/* =========================================================
   語法工坊 — Design Tokens
   色彩：嚴格黑白灰階，不使用任何彩色 hue。
   字體：Noto Serif TC（標題）／Noto Sans TC（內文）／IBM Plex Mono（程式碼）
   ========================================================= */
:root{
  --bg:        #F7F7F3;
  --bg-deep:   #EFEFE9;
  --surface:   #FFFFFF;
  --ink:       #121212;
  --ink-soft:  #55554F;
  --ink-faint: #8B8B84;
  --line:      #121212;
  --line-soft: #D8D8CF;
  --line-hair: #E4E4DC;
  --hit:       #121212;   /* 選中 / 命中 */
  --miss-bg:   #EAEAE2;

  --serif: "Noto Serif TC", "Georgia", serif;
  --sans:  "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --mono:  "IBM Plex Mono", "Consolas", "SFMono-Regular", Menlo, monospace;

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 22px;

  --shadow-card: 6px 6px 0 var(--ink);
  --shadow-card-sm: 4px 4px 0 var(--ink);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family: var(--serif); margin:0; letter-spacing:.01em; }
p{ margin:0; }
button{ font-family: inherit; }
a{ color: inherit; }

::selection{ background: var(--ink); color: var(--bg); }

:focus-visible{
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.br-desktop{ display:none; }
@media (min-width:700px){ .br-desktop{ display:inline; } }

/* =========================================================
   按鈕
   ========================================================= */
.btn{
  font-family: var(--sans);
  font-weight: 700;
  font-size: .92rem;
  padding: .62em 1.15em;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--ink); color: var(--bg); }
.btn-primary:hover{ background: #000; }
.btn-ghost{ background: transparent; border-color: var(--line-soft); color: var(--ink-soft); }
.btn-ghost:hover{ border-color: var(--ink); color: var(--ink); }
.btn-outline{ background: transparent; }
.btn:disabled{ opacity:.35; cursor:not-allowed; transform:none; }

/* =========================================================
   封面
   ========================================================= */
.cover{
  position: relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding: 6rem 1.5rem 4rem;
  border-bottom: 2px solid var(--ink);
}
.cover-grid{
  position:absolute; inset:0;
  background-image: radial-gradient(var(--line-soft) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 85%);
}
.cover-inner{
  position:relative;
  max-width: 760px;
  text-align:center;
}
.cover-eyebrow{
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}
.cover-title{
  font-size: clamp(3.2rem, 11vw, 6.4rem);
  font-weight: 900;
  line-height: .95;
  margin-bottom: 1.3rem;
}
.cover-sub{
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto 2.2rem;
}
.cover-actions{
  display:flex; gap: .9rem; justify-content:center; flex-wrap: wrap;
  margin-bottom: 3rem;
}
.cover-actions .btn-ghost{
  display:flex; align-items:center; text-decoration:none;
}
.cover-stats{
  display:flex; gap: 2.4rem; justify-content:center;
}
.stat{ display:flex; flex-direction:column; align-items:center; }
.stat-num{ font-family: var(--serif); font-weight:900; font-size:1.9rem; }
.stat-label{ font-size:.78rem; color: var(--ink-faint); letter-spacing:.05em; }

.cover-stamp{
  position:absolute;
  right: clamp(1rem, 6vw, 6rem);
  top: clamp(4.5rem, 10vw, 7rem);
  width: 132px; height:132px;
  opacity:.9;
  transform: rotate(-14deg);
}
.cover-stamp svg{ width:100%; height:100%; }
.cover-stamp circle{ fill:none; stroke: var(--ink); stroke-width:2.4; }
.cover-stamp text{
  font-family: var(--mono); font-size: 12px; letter-spacing:.14em;
  fill: var(--ink); font-weight:600;
}
@media (max-width: 760px){ .cover-stamp{ display:none; } }

/* =========================================================
   Topbar
   ========================================================= */
.topbar{
  position: sticky; top:0; z-index: 40;
  display:flex; align-items:center; gap: 1.4rem;
  padding: .7rem 1.4rem;
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  flex-wrap: wrap;
}
.wordmark{
  font-family: var(--serif); font-weight:900; font-size:1.25rem;
  background:none; border:none; cursor:pointer; color:var(--ink);
  padding: .1rem .2rem;
}
.cat-tabs{ display:flex; gap:.4rem; }
.cat-tab{
  font-family: var(--sans); font-weight:700; font-size:.86rem;
  padding: .5em 1em; border-radius: 999px; border:2px solid transparent;
  background: transparent; color: var(--ink-soft); cursor:pointer;
}
.cat-tab:hover{ color: var(--ink); }
.cat-tab[aria-current="true"]{
  border-color: var(--ink); color: var(--ink); background: var(--surface);
}
.topbar-progress{
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--mono); font-size:.82rem; color: var(--ink-soft);
  margin-left:auto;
}
.progress-track{
  width: 110px; height:8px; border-radius:999px;
  background: var(--bg-deep); border:1.5px solid var(--ink);
  overflow:hidden;
}
.progress-fill{ height:100%; background: var(--ink); width:0%; transition: width .25s ease; }
.btn-map-toggle{
  display:none;
  border:2px solid var(--ink); background:var(--surface); border-radius:999px;
  font-weight:700; font-size:.8rem; padding:.45em .9em; cursor:pointer;
}
@media (max-width: 920px){
  .btn-map-toggle{ display:inline-block; }
}

/* =========================================================
   工作區 Layout
   ========================================================= */
.workshop{
  display:grid;
  grid-template-columns: 260px 1fr;
  align-items:start;
  min-height: calc(100svh - 60px);
}
@media (max-width: 920px){
  .workshop{ grid-template-columns: 1fr; }
}

/* --- 側邊關卡地圖 --- */
.sidebar{
  border-right: 2px solid var(--ink);
  padding: 1.4rem 1.1rem 3rem;
  position: sticky; top: 60px;
  height: calc(100svh - 60px);
  overflow-y:auto;
  background: var(--bg-deep);
}
.sidebar-head h2{ font-size:1.15rem; margin-bottom:.3rem; }
.sidebar-head p{ font-size:.85rem; color:var(--ink-soft); margin-bottom:1.2rem; }
.level-map{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.level-item{
  display:flex; align-items:center; gap:.7rem;
  width:100%; text-align:left;
  background:transparent; border:2px solid transparent; border-radius: var(--radius-s);
  padding: .5rem .6rem; cursor:pointer;
  font-family: var(--sans); font-size:.86rem; color: var(--ink-soft);
}
.level-item:hover{ border-color: var(--line-soft); }
.level-item .lvl-num{
  flex:0 0 auto;
  width: 26px; height:26px; border-radius:50%;
  border: 2px solid var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono); font-size:.72rem; color:var(--ink-soft);
}
.level-item.is-current{
  background: var(--surface); border-color: var(--ink); color: var(--ink);
  box-shadow: var(--shadow-card-sm);
}
.level-item.is-current .lvl-num{ border-color:var(--ink); color:var(--ink); }
.level-item.is-done .lvl-num{ background: var(--ink); border-color:var(--ink); color: var(--bg); }
.level-item.is-done{ color: var(--ink); }
.level-item .lvl-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width: 920px){
  .sidebar{
    position: fixed; inset: 60px 0 0 0; z-index:35;
    height: calc(100svh - 60px);
    transform: translateX(-100%);
    transition: transform .2s ease;
    width: min(86vw, 340px);
    box-shadow: 8px 0 0 rgba(0,0,0,.06);
  }
  .sidebar.is-open{ transform: translateX(0); }
}

/* --- 主要面板 --- */
.board{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 0;
  align-items: stretch;
}
@media (max-width: 1180px){
  .board{ grid-template-columns: 1fr; }
}

.panel{ padding: 2rem clamp(1.2rem, 3vw, 2.6rem); }
.panel-brief{ border-right: 2px solid var(--ink); }
@media (max-width: 1180px){
  .panel-brief{ border-right:none; border-bottom: 2px solid var(--ink); }
}

.brief-head{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.3rem; }
.level-stamp{
  flex: 0 0 auto;
  font-family: var(--serif); font-weight:900; font-size:1.5rem;
  width: 56px; height:56px; border-radius:50%;
  border: 2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.brief-headings{ flex:1 1 auto; min-width:0; }
.brief-kicker{
  font-family: var(--mono); font-size:.78rem; letter-spacing:.1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom:.3rem;
}
.brief-title{ font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.badge-status{
  flex:0 0 auto;
  font-family: var(--mono); font-size:.72rem; font-weight:600;
  border:1.5px solid var(--ink); border-radius:999px; padding:.35em .8em;
  align-self:flex-start; margin-top:.4rem;
}

.brief-body{ font-size:.98rem; color: var(--ink-soft); margin-bottom:1.4rem; }
.brief-body p + p{ margin-top:.7rem; }
.brief-body code{
  font-family: var(--mono); background: var(--bg-deep); color: var(--ink);
  padding:.1em .4em; border-radius:4px; font-size:.9em;
}
.brief-body .req-list{ margin:.7rem 0 0; padding-left:1.3rem; }
.brief-body .req-list li{ margin-bottom:.3rem; }

/* --- 編輯器 --- */
.editor-wrap{
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  overflow:hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  margin-bottom: 1.2rem;
}
.editor-tab{
  display:flex; align-items:center;
  background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size:.74rem; letter-spacing:.06em;
  padding: .5em .9em;
}
.editor{
  display:block; width:100%;
  min-height: 132px;
  resize: vertical;
  border:none; outline:none;
  padding: 1rem 1.1rem;
  font-family: var(--mono);
  font-size: .95rem;
  line-height:1.65;
  color: var(--ink);
  background: var(--surface);
  background-image: repeating-linear-gradient(var(--surface) 0, var(--surface) calc(1.65em - 1px), var(--line-hair) calc(1.65em - 1px), var(--line-hair) calc(1.65em));
  tab-size: 2;
}

.action-row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.action-row .spacer{ flex:1 1 auto; min-width: 0; }
@media (max-width: 560px){
  .action-row{ justify-content: stretch; }
  .action-row .spacer{ flex-basis: 100%; height:0; }
  .action-row .btn{ flex:1 1 auto; }
}

.feedback{
  font-family: var(--mono); font-size:.86rem;
  padding: .1rem 0; min-height: 1.4em;
}
.feedback.is-pass{ color: var(--ink); font-weight:700; }
.feedback.is-fail{ color: var(--ink-soft); }
.hint-box{
  margin-top:.6rem; padding: .8rem 1rem;
  background: var(--bg-deep); border-left: 3px solid var(--ink);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size:.88rem; color: var(--ink-soft);
}

/* --- 作業區（預覽舞台） --- */
.panel-stage{ background: var(--bg-deep); }
.stage-head{ margin-bottom:1rem; }
.stage-head h3{ font-size:1.05rem; margin-bottom:.2rem; }
.stage-head p{ font-size:.84rem; color:var(--ink-faint); }

.stage-frame{
  position:relative;
  border: 2px solid var(--ink);
  border-radius: var(--radius-l);
  background: var(--surface);
  min-height: 320px;
  padding: 1.6rem;
  overflow:hidden;
}
.stage-dotgrid{
  position:absolute; inset:0;
  background-image: radial-gradient(var(--line-soft) 1.3px, transparent 1.3px);
  background-size: 22px 22px;
  opacity:.7;
}
.stage-target{
  position:relative;
  display:flex; flex-wrap:wrap; gap:.6rem;
  align-content:flex-start;
}

/* 抽屜 / 收納格元件通用樣式（由 JS 產生的自訂標籤） */
.stage-target [data-idx]{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 84px; min-height: 56px;
  padding:.5rem .8rem;
  background: var(--surface);
  border: 1.6px solid var(--ink);
  border-radius: var(--radius-s);
  font-size:.86rem; text-align:center;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.stage-target .drawer,
.stage-target .compartment,
.stage-target .group{
  display:flex; flex-wrap:wrap; gap:.6rem;
  min-width: auto; min-height:auto;
  padding: .7rem;
  background: transparent;
  border: 1.6px dashed var(--line-soft);
  align-items:flex-start;
}
.stage-target [data-idx].is-hit,
.stage-target [data-idx].selected{
  background: var(--ink); color: var(--bg); transform: translateY(-2px);
}
.stage-target [data-idx].is-flash{ animation: pop .3s ease; }
@keyframes pop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.08);} 100%{ transform:scale(1);} }

/* HTML / JS 預覽輸出容器 */
.stage-render{
  position:relative;
  background: var(--surface);
  border-radius: var(--radius-s);
  min-height: 100%;
}
.stage-render :is(h1,h2,h3){ font-family: var(--serif); }
.stage-render a{ color: var(--ink); text-decoration: underline; }
.stage-render button, .stage-render input{ font-family: var(--sans); }
.stage-console{
  font-family: var(--mono); font-size:.82rem;
  background: var(--ink); color: var(--bg);
  border-radius: var(--radius-s);
  padding: .8rem 1rem;
  white-space: pre-wrap; word-break: break-word;
}

/* --- 結果印章 --- */
.result-stamp{
  position:absolute; right: 1.4rem; top: 1.4rem;
  border: 3px solid var(--ink); border-radius: var(--radius-s);
  padding: .5rem 1rem;
  font-family: var(--serif); font-weight:900; font-size:1.05rem;
  letter-spacing:.06em;
  transform: rotate(-8deg) scale(.7);
  opacity:0;
  pointer-events:none;
  background: var(--surface);
}
.result-stamp::after{
  content:""; position:absolute; inset:4px;
  border: 1.4px solid var(--ink); border-radius:4px;
}
.result-stamp.show{
  animation: stamp-in .32s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes stamp-in{
  0%{ opacity:0; transform: rotate(-8deg) scale(1.5); }
  60%{ opacity:1; transform: rotate(-8deg) scale(.92); }
  100%{ opacity:1; transform: rotate(-8deg) scale(1); }
}
.result-stamp.miss{ text-decoration: line-through; color: var(--ink-soft); }

/* =========================================================
   關於區塊
   ========================================================= */
.about-panel{ padding: 5.5rem 1.5rem; border-top:2px solid var(--ink); }
.about-inner{ max-width: 980px; margin: 0 auto; }
.about-inner > h2{ font-size: clamp(1.6rem,4vw,2.3rem); margin-bottom: 2.4rem; text-align:center; }
.about-cols{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
@media (max-width: 780px){ .about-cols{ grid-template-columns:1fr; } }
.about-col{ border-top: 2px solid var(--ink); padding-top:1rem; }
.about-num{ font-family: var(--mono); color: var(--ink-faint); font-size:.85rem; }
.about-col h3{ font-size:1.15rem; margin: .4rem 0 .6rem; }
.about-col p{ color: var(--ink-soft); font-size:.92rem; }
.about-note{ text-align:center; margin-top:2.6rem; color: var(--ink-faint); font-size:.85rem; }

.site-footer{
  text-align:center; padding: 2.2rem 1rem;
  color: var(--ink-faint); font-size:.82rem;
  border-top: 1.5px solid var(--line-hair);
}