:root {
  --ink:#24312b; --muted:#6f776f; --paper:#f3f0e9; --surface:#fbfaf6;
  --line:#d8d2c7; --green:#42675a; --green-soft:#dfe8e3; --clay:#a96650;
}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--paper); }
body {
  min-height:100vh; margin:0; color:var(--ink);
  font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  background:
    linear-gradient(rgba(66,103,90,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(66,103,90,.035) 1px,transparent 1px),
    var(--paper);
  background-size:32px 32px;
}
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr); }
.login-story {
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  min-height:100vh; padding:42px clamp(34px,6vw,92px); overflow:hidden;
  border-right:1px solid var(--line); background:#e7ebe6;
}
.login-brand { display:flex; align-items:center; gap:14px; position:relative; z-index:2; }
.login-seal {
  display:grid; place-items:center; width:52px; height:52px; border:1px solid #9caf9f;
  border-radius:50%; color:#294d40; font-weight:800; letter-spacing:.08em;
}
.login-brand strong { display:block; font-size:18px; letter-spacing:.06em; }
.login-brand span { display:block; margin-top:3px; color:#66716a; font-size:12px; }
.school-emblem {
  position:absolute; z-index:1; top:42px; right:clamp(24px,4vw,64px);
  width:clamp(116px,13vw,178px); height:auto; opacity:.9;
  filter:drop-shadow(0 10px 18px rgba(42,68,57,.08));
}
.school-emblem g {
  stroke-dasharray:520;
  stroke-dashoffset:520;
  animation:emblem-draw 1.8s ease-out forwards;
}
.school-emblem .emblem-gear { animation-delay:.15s; }
.school-emblem .emblem-leaves { animation-delay:.28s; }
.school-emblem .emblem-grain { animation-delay:.4s; }
.school-emblem .emblem-center { animation-delay:.55s; }
.story-copy { position:relative; z-index:2; max-width:620px; margin:70px 0 30px; }
.eyebrow { margin:0 0 16px; color:var(--clay); font-size:12px; font-weight:800; letter-spacing:.2em; }
.story-copy h1 { max-width:560px; margin:0; font-family:Georgia,"Noto Serif TC",serif; font-size:clamp(39px,5vw,70px); line-height:1.16; letter-spacing:.01em; }
.story-copy > p:last-of-type { max-width:510px; margin:22px 0 0; color:#5e6861; font-size:16px; line-height:1.9; }
.campus-line { width:min(720px,105%); margin:22px -3% -10px; color:#668177; opacity:.8; }
.campus-line .draw { stroke-dasharray:900; stroke-dashoffset:900; animation:draw-line 2.2s .2s ease-out forwards; }
.campus-line .float { transform-origin:center; animation:quiet-float 5s ease-in-out infinite; }
.campus-line .clock-sound {
  opacity:0;
  transform-origin:363px 166px;
  animation:clock-chime 4.8s 2.4s ease-out infinite;
}
.story-note { position:relative; z-index:2; padding-top:20px; border-top:1px solid rgba(66,103,90,.2); color:#69736c; font-size:12px; letter-spacing:.06em; }
.login-side { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:42px clamp(24px,5vw,72px); background:rgba(251,250,246,.86); }
.login-column { width:min(510px,100%); }
.login-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:27px; }
.login-heading h2 { margin:0; font-size:30px; letter-spacing:.03em; }
.login-heading p { margin:7px 0 0; color:var(--muted); font-size:14px; }
.secure-mark { display:flex; align-items:center; gap:8px; color:#5d7168; font-size:12px; white-space:nowrap; }
.secure-mark::before { content:""; width:7px; height:7px; border:1px solid #5d7168; border-radius:50%; box-shadow:0 0 0 4px #e1e9e4; }
.login-form { padding:29px; border:1px solid var(--line); border-radius:4px; background:var(--surface); box-shadow:10px 12px 0 rgba(83,104,94,.07); }
.field { margin-bottom:19px; }
.field label { display:flex; justify-content:space-between; margin-bottom:8px; color:#49564f; font-size:13px; font-weight:700; }
.field input {
  width:100%; height:54px; padding:0 15px; border:1px solid #c9c3b8; border-radius:3px;
  outline:0; background:#fff; color:var(--ink); font:inherit; transition:border .18s,box-shadow .18s;
}
.field input:focus { border-color:#54796b; box-shadow:0 0 0 3px rgba(84,121,107,.12); }
.login-button {
  position:relative; width:100%; height:54px; margin-top:7px; overflow:hidden; border:0; border-radius:3px;
  background:var(--green); color:#fff; font:inherit; font-weight:800; letter-spacing:.08em; cursor:pointer;
}
.login-button::after {
  content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform .65s ease;
}
.login-button:hover::after { transform:translateX(120%); }
.login-button[disabled] { cursor:wait; opacity:.82; }
.login-button.is-loading .button-text { opacity:0; }
.login-button.is-loading::before {
  content:""; position:absolute; top:50%; left:50%; width:19px; height:19px; margin:-11px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .75s linear infinite;
}
.login-message { margin-bottom:18px; padding:12px 14px; border-left:3px solid; font-size:14px; line-height:1.6; }
.login-message.error { color:#7c433a; border-color:#a96650; background:#f1e5e0; }
.login-message.success { color:#34594b; border-color:#54796b; background:#e1ebe6; }
.login-help { margin:18px 2px 0; color:#777d77; font-size:12px; line-height:1.75; }
.news-section { margin-top:34px; }
.news-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:11px; border-bottom:1px solid var(--line); }
.news-heading h3 { display:flex; align-items:center; gap:11px; margin:0; font-size:17px; }
.news-line-icon { width:25px; height:25px; color:var(--green); }
.news-count { color:#7b817b; font-size:12px; }
.news-list { display:grid; }
.news-item { display:grid; grid-template-columns:72px 1fr; gap:15px; padding:17px 0; border-bottom:1px solid var(--line); }
.news-date { color:var(--clay); font-family:Georgia,serif; font-size:13px; }
.news-copy strong { display:block; font-size:14px; }
.news-copy p { margin:6px 0 0; color:#727972; font-size:13px; line-height:1.7; }
.news-empty { padding:20px 0; color:var(--muted); font-size:13px; }
@keyframes draw-line { to { stroke-dashoffset:0; } }
@keyframes emblem-draw { to { stroke-dashoffset:0; } }
@keyframes quiet-float { 50% { transform:translateY(-5px); } }
@keyframes clock-chime {
  0%,68%,100% { opacity:0; transform:scale(.92); }
  73% { opacity:.8; transform:scale(1); }
  82% { opacity:.25; transform:scale(1.08); }
  88% { opacity:0; transform:scale(1.13); }
}
@keyframes spin { to { transform:rotate(360deg); } }
@media(max-width:900px) {
  .login-shell { grid-template-columns:1fr; }
  .login-story { min-height:auto; padding:28px 24px 34px; border-right:0; border-bottom:1px solid var(--line); }
  .school-emblem { top:26px; right:22px; width:105px; opacity:.82; }
  .story-copy { margin:54px 0 0; }
  .story-copy h1 { font-size:clamp(34px,10vw,52px); }
  .campus-line { max-height:190px; margin-bottom:0; }
  .story-note { display:none; }
  .login-side { min-height:auto; padding:38px 20px 55px; }
}
@media(max-width:520px) {
  .login-brand { max-width:calc(100% - 84px); }
  .school-emblem { width:78px; top:22px; right:18px; }
  .login-heading { align-items:flex-start; flex-direction:column; }
  .login-form { padding:22px 18px; box-shadow:6px 7px 0 rgba(83,104,94,.07); }
  .news-item { grid-template-columns:58px 1fr; }
}
@media(prefers-reduced-motion:reduce) {
  .campus-line .draw { stroke-dashoffset:0; animation:none; }
  .campus-line .float { animation:none; }
  .school-emblem g { stroke-dashoffset:0; animation:none; }
  .campus-line .clock-sound { animation:none; opacity:.6; }
}