/* ══════════════════════════════════════
   投稿驛站 — 共用設計系統
   Tokens / Base / Nav / Footer / Buttons / Card / Tag / Stamp
══════════════════════════════════════ */
:root{
  --bg-cream:#FFF8F1;
  --surface:#FFFFFF;
  --ink:#3A2E39;
  --muted:#8B7B84;
  --coral:#FF6B54;
  --coral-tint:#FFE9E4;
  --gold:#FFB100;
  --gold-tint:#FFF3D6;
  --sage:#3F8E6D;
  --sage-tint:#E4F3EC;
  --line:rgba(58,46,57,.10);
  --line-soft:rgba(58,46,57,.06);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:8px;
  --shadow-card:0 4px 20px rgba(58,46,57,.06);
  --shadow-card-hover:0 14px 32px rgba(58,46,57,.12);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Noto Sans TC', sans-serif;
  background:var(--bg-cream);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
img{ max-width:100%; display:block; }

:focus-visible{
  outline:2.5px solid var(--coral);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(1.25rem, 4vw, 2.5rem); }

h1,h2,h3{ font-family:'Noto Serif TC', serif; color:var(--ink); line-height:1.35; }

.eyebrow{
  font-family:'Quicksand', sans-serif;
  font-weight:700; font-size:.8rem; letter-spacing:.14em;
  color:var(--coral); display:flex; align-items:center; gap:.5rem;
}
.eyebrow::before{ content:''; width:18px; height:2px; background:var(--coral); display:inline-block; }

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.35rem; border-radius:100px;
  font-weight:700; font-size:.9rem;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--coral); color:#fff; box-shadow:0 8px 20px rgba(255,107,84,.32); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(255,107,84,.4); }
.btn-primary:disabled{ opacity:.5; pointer-events:none; transform:none; }
.btn-ghost{ color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-block{ width:100%; }

.link-underline{
  font-weight:700; font-size:.92rem;
  border-bottom:1.5px solid var(--ink); padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.link-underline:hover{ color:var(--coral); border-color:var(--coral); }

/* ── Nav ── */
.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,248,241,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{
  display:flex; align-items:center; gap:.65rem;
  font-family:'Noto Serif TC', serif; font-weight:700; font-size:1.15rem;
}
.brand-mark{ position:relative; width:34px; height:34px; flex-shrink:0; }
.brand-mark span{ position:absolute; width:24px; height:30px; border-radius:4px; box-shadow:0 2px 6px rgba(58,46,57,.15); }
.brand-mark span:first-child{ background:var(--gold); top:4px; left:0; transform:rotate(-9deg); }
.brand-mark span:last-child{ background:var(--coral); top:0; left:6px; transform:rotate(6deg); }
.brand-mark span:last-child::after{
  content:''; position:absolute; inset:5px 5px auto 5px; height:2px;
  background:rgba(255,255,255,.65);
  box-shadow:0 5px 0 rgba(255,255,255,.5), 0 10px 0 rgba(255,255,255,.4);
}
.nav-links{ display:flex; align-items:center; gap:2.25rem; font-size:.92rem; font-weight:500; }
.nav-links a{ color:var(--muted); transition:color .2s var(--ease); position:relative; }
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--coral); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:.75rem; }

/* ── Logged-in nav variant ── */
.nav-user{
  display:flex; align-items:center; gap:.7rem;
  padding:.4rem .9rem .4rem .4rem;
  border-radius:100px; border:1.5px solid var(--line);
  transition:border-color .2s;
}
.nav-user:hover{ border-color:var(--ink); }
.nav-user .avatar{
  width:32px; height:32px; border-radius:50%;
  background:var(--gold-tint); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif TC',serif; font-weight:700; font-size:.85rem;
}
.nav-user span{ font-size:.88rem; font-weight:500; }

/* ── Tag / Stamp ── */
.tag{
  font-family:'Quicksand',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.03em; padding:.3rem .7rem; border-radius:100px;
  display:inline-flex; align-items:center; gap:.35rem;
}
.tag.academic{ background:var(--sage-tint); color:var(--sage); }
.tag.student{ background:var(--coral-tint); color:var(--coral); }
.tag .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

.status-badge{
  font-family:'Quicksand',sans-serif; font-size:.75rem; font-weight:700;
  padding:.32rem .8rem; border-radius:100px; white-space:nowrap;
}
.status-badge.pending{ background:var(--gold-tint); color:#96700A; }
.status-badge.reviewing{ background:#EFEAF5; color:#6C5A94; }
.status-badge.passed{ background:var(--sage-tint); color:var(--sage); }
.status-badge.final{ background:var(--coral-tint); color:var(--coral); }
.status-badge.done{ background:var(--ink); color:#fff; }

.deadline-stamp{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:.68rem;
  color:var(--coral); border:1.5px dashed var(--coral); border-radius:50%;
  width:50px; height:50px; display:flex; align-items:center; justify-content:center;
  flex-direction:column; line-height:1.05; transform:rotate(-9deg); flex-shrink:0;
}
.deadline-stamp b{ font-size:.92rem; }

/* ── Paper grid texture utility ── */
.paper-texture{
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:20px 20px;
}

/* ── Card base ── */
.card{
  position:relative; background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card::before{
  content:''; position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 26px 26px 0;
  border-color:transparent var(--bg-cream) transparent transparent;
  filter:drop-shadow(-1px 1px 2px rgba(58,46,57,.08));
}

/* ── Footer ── */
footer{ background:var(--ink); color:rgba(255,255,255,.7); padding:3rem 0 2rem; margin-top:2rem; }
.footer-grid{
  display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand{ font-family:'Noto Serif TC',serif; font-size:1.1rem; color:#fff; margin-bottom:.6rem; }
.footer-desc{ font-size:.85rem; max-width:32ch; }
.footer-col h4{ font-size:.8rem; color:#fff; margin-bottom:.85rem; letter-spacing:.06em; }
.footer-col a{ display:block; font-size:.85rem; padding:.3rem 0; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  padding-top:1.5rem; font-size:.78rem; color:rgba(255,255,255,.45);
}

/* ── Form base (register / login / apply 共用) ── */
.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.35rem; }
.field label{ font-size:.86rem; font-weight:700; color:var(--ink); }
.field label .req{ color:var(--coral); margin-left:2px; }
.field .hint{ font-size:.78rem; color:var(--muted); margin-top:-.2rem; }
.input, .select, textarea.input{
  width:100%; padding:.85rem 1.05rem;
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:inherit; font-size:.94rem; color:var(--ink);
  background:var(--surface); outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input::placeholder{ color:#B7A9B1; }
.input:focus, .select:focus, textarea.input:focus{
  border-color:var(--coral); box-shadow:0 0 0 4px rgba(255,107,84,.1);
}
.input.error{ border-color:#D64545; }
.error-msg{ font-size:.78rem; color:#D64545; display:none; }
.field.has-error .error-msg{ display:block; }
.field.has-error .input{ border-color:#D64545; }

textarea.input{ resize:vertical; min-height:110px; line-height:1.6; }

.select-wrap{ position:relative; }
.select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B7B84' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1rem center; padding-right:2.5rem;
}

.check-row, .radio-row{ display:flex; flex-wrap:wrap; gap:.65rem; }
.check-pill, .radio-pill{
  position:relative; display:flex; align-items:center; gap:.55rem;
  padding:.6rem 1.05rem; border:1.5px solid var(--line); border-radius:100px;
  font-size:.88rem; cursor:pointer; transition:all .2s var(--ease);
}
.check-pill:hover, .radio-pill:hover{ border-color:var(--ink); }
.check-pill input, .radio-pill input, .agree-row input{ position:absolute; opacity:0; width:0; height:0; }
.check-box, .radio-dot{
  width:17px; height:17px; border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.check-box{ border-radius:5px; }
.radio-dot{ border-radius:50%; }
.check-box::after{
  content:''; width:9px; height:9px; border-radius:2px; background:#fff;
  clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 45% 68%);
  opacity:0; transform:scale(.6); transition:all .15s;
}
.radio-dot::after{
  content:''; width:9px; height:9px; border-radius:50%; background:#fff;
  opacity:0; transform:scale(.5); transition:all .15s;
}
.check-pill input:checked ~ .check-box, .radio-pill input:checked ~ .radio-dot{
  background:var(--coral); border-color:var(--coral);
}
.check-pill input:checked ~ .check-box::after, .radio-pill input:checked ~ .radio-dot::after{
  opacity:1; transform:scale(1);
}
.check-pill:has(input:checked), .radio-pill:has(input:checked){
  border-color:var(--coral); background:var(--coral-tint); color:var(--ink);
}

.agree-row{
  position:relative; display:flex; align-items:flex-start; gap:.75rem;
  font-size:.85rem; color:var(--muted); cursor:pointer;
}
.agree-row .check-box{ margin-top:2px; }
.agree-row a{ color:var(--ink); text-decoration:underline; }

/* ── File dropzone ── */
.dropzone{
  border:2px dashed var(--line); border-radius:var(--radius-md);
  padding:2rem 1.5rem; text-align:center; cursor:pointer;
  transition:all .2s var(--ease); position:relative;
}
.dropzone:hover, .dropzone.dragover{ border-color:var(--coral); background:var(--coral-tint); }
.dropzone .dz-icon{
  width:44px; height:44px; margin:0 auto .75rem; border-radius:50%;
  background:var(--gold-tint); display:flex; align-items:center; justify-content:center;
  color:var(--ink);
}
.dropzone p{ font-size:.9rem; color:var(--muted); }
.dropzone p b{ color:var(--ink); }
.dropzone input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }

.file-chip{
  display:flex; align-items:center; gap:.65rem;
  padding:.75rem 1rem; border-radius:var(--radius-sm);
  background:var(--surface); border:1.5px solid var(--line);
  margin-top:.85rem;
}
.file-chip .file-icon{
  width:34px; height:34px; border-radius:8px; background:var(--sage-tint); color:var(--sage);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.file-chip .file-name{ font-size:.86rem; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-chip .file-size{ font-size:.76rem; color:var(--muted); flex-shrink:0; }
.file-chip .file-remove{ color:var(--muted); flex-shrink:0; transition:color .2s; }
.file-chip .file-remove:hover{ color:#D64545; }

/* ── Toast ── */
.toast{
  position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:.9rem 1.5rem; border-radius:100px;
  font-size:.88rem; font-weight:600; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 12px 32px rgba(0,0,0,.2);
  opacity:0; pointer-events:none; transition:all .35s var(--ease); z-index:1000;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .tick{
  width:20px; height:20px; border-radius:50%; background:var(--sage);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

@media (max-width:640px){
  .nav-links{ display:none; }
  .footer-grid{ flex-direction:column; gap:1.5rem; }
}