/* =========================================================
   퐁뜨 디자인 시스템 v1  (docs/design-system.md 참고)
   색 방향: 종이색 + 테라코타 + 먹색 (대표 승인 색감 유지)
   ========================================================= */
:root{
  /* 색 — 의미 기준 이름 */
  --paper:#f7f4ee; --card:#fffdf9; --sunk:#efe9df; --ink:#1d1b18; --muted:#6b655c; --line:#e3ddd2; --line-strong:#cfc6b7;
  --accent:#b8442c; --accent-ink:#ffffff; --accent-soft:#f6e3dc; --accent-hover:#9e3923;
  --ok:#2f6b3f; --ok-soft:#e2efe4; --warn:#8a5a00; --warn-soft:#f7ecd2; --no:#9b2b2b; --no-soft:#f6dede; --na:#6b655c; --na-soft:#ece7de;
  /* 글자 크기 6단계 */
  --fs-xs:12px; --fs-s:13.5px; --fs-m:15px; --fs-l:18px; --fs-xl:24px; --fs-2xl:30px;
  /* 간격 5단계 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  /* 모양 */
  --r-s:8px; --r-m:12px; --r-pill:999px;
  --h-main:44px; --h-sub:36px;
  --shadow:0 1px 2px rgb(29 27 24/.05),0 4px 14px rgb(29 27 24/.05);
  --shadow-up:0 2px 4px rgb(29 27 24/.06),0 10px 28px rgb(29 27 24/.09);
  --wrap:1280px;
  --ui:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
[data-theme="dark"]{
  --paper:#17150f; --card:#211e17; --sunk:#1b1913; --ink:#f1ece2; --muted:#a59d90; --line:#3a352b; --line-strong:#4a4438;
  --accent:#e0775c; --accent-ink:#1d1b18; --accent-soft:#3b2620; --accent-hover:#ea8b72;
  --ok:#7cc48f; --ok-soft:#1f3326; --warn:#e6b65c; --warn-soft:#3a2f17; --no:#ef8c8c; --no-soft:#3d2121; --na:#a59d90; --na-soft:#2c2820;
  --shadow:none; --shadow-up:0 8px 26px rgb(0 0 0/.35);
}

/* ---------- 바탕 ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--fs-m)/1.55 var(--ui);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}
.fs-xs{font-size:var(--fs-xs)}
[hidden]{display:none!important}

/* ---------- 공통 부품: 버튼 ---------- */
.btn,.primary,.dialog-actions button,.dbtns button,.dbtns a,.copy,.more,.project-row button,.card-actions button,.card-actions a{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);
  min-height:var(--h-main);padding:0 var(--sp-4);border-radius:var(--r-s);
  border:1px solid var(--line-strong);background:var(--card);color:var(--ink);
  font-size:var(--fs-s);font-weight:500;text-decoration:none;transition:background .15s,border-color .15s,transform .1s}
.btn:hover,.dialog-actions button:hover,.dbtns button:hover,.copy:hover,.more:hover,.card-actions button:hover,.card-actions a:hover{border-color:var(--ink)}
.primary,.dbtns .primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.primary:hover,.dbtns .primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.copy{min-height:var(--h-sub);padding:0 var(--sp-3)}
.btn-a{text-decoration:none}
.btn-a.kakao{background:#FEE500;color:#191919;border-color:#e6cf00;font-weight:700}

/* ---------- 공통 부품: 칩 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chips button{border:1px solid var(--line-strong);background:var(--card);border-radius:var(--r-pill);padding:0 var(--sp-3);min-height:var(--h-sub);font-size:var(--fs-s);transition:background .15s,border-color .15s}
.chips button:hover{border-color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips button .n{color:var(--muted);font-size:var(--fs-xs);margin-left:var(--sp-1)}
.chips button[aria-pressed="true"] .n{color:inherit;opacity:.7}

/* ---------- 공통 부품: 판정 배지(4상태) ---------- */
.badge{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-xs);font-weight:700;padding:2px var(--sp-2);border-radius:var(--r-pill);white-space:nowrap}
.b-허용{background:var(--ok-soft);color:var(--ok)}
.b-조건부{background:var(--warn-soft);color:var(--warn)}
.b-불가{background:var(--no-soft);color:var(--no)}
.b-미확인{background:var(--na-soft);color:var(--na)}
.flag{display:inline-flex;font-size:var(--fs-xs);font-weight:500;padding:2px var(--sp-2);border-radius:var(--r-pill);background:var(--warn-soft);color:var(--warn)}
.flag.no{background:var(--no-soft);color:var(--no)}

/* ---------- 공통 부품: 면 ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-4) 18px;margin-bottom:var(--sp-4)}
.panel h2{font-size:var(--fs-l);margin:0 0 var(--sp-3)}
.panel.alert{border-left:4px solid var(--no)}
.panel.notice{border-left:4px solid var(--warn)}
.hint{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-1) 0 2px}
.warn{font-size:var(--fs-s);color:var(--warn);margin:var(--sp-1) 0}

/* ---------- 퐁 캐릭터 ---------- */
.pong{width:64px;height:64px;flex:none}
.pong-say{display:flex;gap:var(--sp-3);align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-3) var(--sp-4)}
.pong-say p{margin:0}
.pong-say strong{display:block;font-size:var(--fs-m)}
.pong-say .bubble{position:relative}
.pong-wave{transition:transform .25s}
.pong-say:hover .pong-wave{transform:rotate(-6deg)}

/* ---------- 상단 ---------- */
.beta{display:flex;justify-content:center;align-items:center;gap:var(--sp-3);background:var(--ink);color:var(--paper);font-size:var(--fs-xs);padding:5px var(--sp-5)}
.beta button{border:0;background:none;color:inherit;opacity:.7;text-decoration:underline;font-size:var(--fs-xs)}
.top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-4);padding:var(--sp-4) 20px var(--sp-2);max-width:var(--wrap);margin:0 auto}
.brand{display:flex;gap:var(--sp-3);align-items:center;text-decoration:none}
.mark{width:42px;height:42px;flex:none}
.brand strong{font-size:22px;display:block;line-height:1.2;letter-spacing:-.01em}
.brand strong small{font-size:var(--fs-xs);font-weight:400;color:var(--muted);margin-left:var(--sp-1)}
.brand .sub{font-size:var(--fs-s);color:var(--muted)}
.nav{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.nav a{text-decoration:none;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-s);font-size:var(--fs-s);color:var(--muted);border:1px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);background:var(--card);border-color:var(--line);font-weight:500}
.nav b{font-size:var(--fs-xs);background:var(--accent-soft);color:var(--accent);border-radius:var(--r-pill);padding:0 6px}
.top-actions{display:flex;gap:var(--sp-2);align-items:center}
.icon-btn{width:var(--h-main);height:var(--h-main);border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);font-size:18px}
.drawer-btn{border:1px solid var(--ink);background:var(--card);border-radius:var(--r-pill);padding:0 var(--sp-4);min-height:var(--h-main);white-space:nowrap;font-weight:500}
.drawer-btn b{display:inline-block;min-width:22px;margin-left:6px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-size:var(--fs-xs)}
.drawer-btn.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.08)}}

/* ---------- 문장 입력 / 검색 ---------- */
.compose{max-width:var(--wrap);margin:var(--sp-2) auto 0;padding:0 20px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--sp-2) var(--sp-4);align-items:start}
.compose label>span{display:block;font-size:var(--fs-s);font-weight:700;margin-bottom:6px}
.field-text input{width:100%;font-size:22px;padding:12px var(--sp-4);border:2px solid var(--ink);border-radius:var(--r-m);background:var(--card);height:58px}
.field-q input{width:100%;font-size:var(--fs-m);padding:0 var(--sp-4);border:1px solid var(--line-strong);border-radius:var(--r-m);background:var(--card);height:58px}
.examples{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--fs-xs);color:var(--muted)}
.examples span{margin-right:2px}
.examples button{border:1px dashed var(--line-strong);background:transparent;border-radius:var(--r-pill);padding:3px 10px;font-size:var(--fs-xs);color:var(--muted)}
.examples button:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- 필터 바 ---------- */
.filterbar{max-width:var(--wrap);margin:var(--sp-4) auto 0;padding:0 20px;display:flex;flex-direction:column;gap:var(--sp-2)}
.quick{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.quick>span{font-size:var(--fs-s);font-weight:700;white-space:nowrap;flex:none}
.quick .chips button{min-height:var(--h-sub)}
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;position:relative}
.fgroup{position:relative}
.fgroup summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:var(--h-sub);padding:0 var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--card);font-size:var(--fs-s);font-weight:500;user-select:none}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup summary::after{content:"▾";font-size:11px;color:var(--muted)}
.fgroup[open] summary{border-color:var(--ink)}
.fgroup summary em{font-style:normal;font-weight:700;color:var(--accent);font-size:var(--fs-xs)}
.fgroup .pop{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:min(520px,calc(100vw - 40px));background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-up);padding:var(--sp-3) var(--sp-4)}
.reset{border:0;background:none;color:var(--muted);text-decoration:underline;min-height:var(--h-sub);font-size:var(--fs-s)}

/* ---------- 도구줄 ---------- */
.toolbar{max-width:var(--wrap);margin:var(--sp-3) auto 0;padding:10px 20px;display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(6px);z-index:10}
.ctl{display:flex;align-items:center;gap:6px;font-size:var(--fs-s);color:var(--muted)}
.ctl select{padding:6px 8px;border:1px solid var(--line-strong);border-radius:var(--r-s);background:var(--card);color:var(--ink);min-height:var(--h-sub)}
.ctl output{min-width:30px;color:var(--ink)}
.ctl input[type=range]{accent-color:var(--accent)}
.chk input{accent-color:var(--accent);width:16px;height:16px}
.view{display:flex;border:1px solid var(--line-strong);border-radius:var(--r-s);overflow:hidden;margin-left:auto}
.view button{border:0;background:var(--card);padding:0 var(--sp-3);min-height:var(--h-sub);font-size:var(--fs-s)}
.view button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ---------- 목록 ---------- */
.status{max-width:var(--wrap);margin:var(--sp-3) auto 0;padding:0 20px;color:var(--muted);font-size:var(--fs-s)}
.status b{color:var(--ink)}
.grid{max-width:var(--wrap);margin:var(--sp-2) auto var(--sp-5);padding:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.grid.list{grid-template-columns:1fr}

/* ---------- 카드 ---------- */
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:14px var(--sp-4) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;box-shadow:var(--shadow);transition:box-shadow .2s,border-color .2s,transform .2s}
.card:hover{box-shadow:var(--shadow-up);border-color:var(--line-strong)}
.card-head{display:flex;flex-direction:column;gap:2px;padding-right:40px;min-width:0}
.card-name{font-weight:700;font-size:var(--fs-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-name a{text-decoration:none}
.card-name a:hover{text-decoration:underline}
.card-meta{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav{position:absolute;top:var(--sp-2);right:var(--sp-2);border:0;background:none;font-size:20px;line-height:1;width:40px;height:40px;border-radius:var(--r-pill);color:var(--muted)}
.fav:hover{background:var(--sunk)}
.fav[aria-pressed="true"]{color:var(--accent)}
.preview{font-synthesis:none;line-height:1.25;overflow-wrap:anywhere;min-height:1.3em;padding:var(--sp-2) 0 var(--sp-1);color:var(--ink);transition:opacity .25s}
.preview.loading{opacity:.3}
.card textarea.preview{width:100%;border:0;background:transparent;resize:none;font-size:inherit;outline:none;overflow:hidden;border-radius:var(--r-s)}
.card textarea.preview:focus{background:var(--sunk)}
.specimen{display:block;max-width:100%;height:auto;max-height:64px;margin:var(--sp-2) 0 var(--sp-1)}
[data-theme="dark"] .specimen{filter:invert(1)}
.spec-note{font-size:var(--fs-xs);color:var(--muted)}
.nopreview{font-size:var(--fs-s);color:var(--muted);padding:var(--sp-3);border-radius:var(--r-s);background:var(--sunk);margin:var(--sp-1) 0}
.use{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:var(--sp-2);border-top:1px dashed var(--line)}
.use .lic{font-size:var(--fs-xs);color:var(--muted);margin-left:auto}
.card-actions{display:flex;gap:var(--sp-2)}
.card-actions>*{flex:1;min-height:var(--h-sub)}
.card-actions .add[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.grid.list .card{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;align-items:center;gap:var(--sp-4)}
.grid.list .card-actions{grid-column:3}

.empty{grid-column:1/-1;padding:var(--sp-5) 0}
.more-wrap{max-width:var(--wrap);margin:0 auto 30px;padding:0 20px}
.more{width:100%;min-height:48px}

/* ---------- 작업서랍 ---------- */
.drawer{position:fixed;top:0;right:0;height:100%;width:min(460px,100%);background:var(--card);border-left:1px solid var(--line);transform:translateX(102%);transition:transform .22s ease;z-index:40;display:flex;flex-direction:column;padding:var(--sp-4) 18px;overflow:auto}
.drawer.open{transform:none}
.scrim{position:fixed;inset:0;background:rgb(29 27 24/.35);z-index:35}
.drawer-head{display:flex;justify-content:space-between;align-items:center}
.drawer-head h2{margin:0;font-size:var(--fs-l)}
.x{border:0;background:none;font-size:28px;line-height:1;width:var(--h-main);height:var(--h-main)}
.drawer-note{font-size:var(--fs-s);color:var(--muted);margin:6px 0 var(--sp-3)}
.project-row{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.project-row select{flex:1;padding:0 var(--sp-2);border:1px solid var(--line-strong);border-radius:var(--r-s);background:var(--card);min-height:var(--h-main)}
.item{border:1px solid var(--line);border-radius:var(--r-m);padding:10px var(--sp-3);margin-bottom:10px}
.item .preview{padding:var(--sp-1) 0}
.item-head{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-s)}
.item-head button{border:0;background:none;color:var(--muted);text-decoration:underline;min-height:32px}
.snap{font-size:var(--fs-xs);color:var(--muted)}
.snap a{color:var(--accent)}
.changed{background:var(--warn-soft);color:var(--warn);font-size:var(--fs-xs);border-radius:6px;padding:6px 8px;margin-top:6px}
.drawer-actions{margin-top:auto;padding-top:10px}
.drawer-actions .primary{width:100%}

/* ---------- 대화상자 ---------- */
dialog{border:0;border-radius:14px;padding:20px 22px;max-width:min(640px,94vw);width:100%;background:var(--card);color:var(--ink);box-shadow:var(--shadow-up)}
dialog::backdrop{background:rgb(29 27 24/.45)}
dialog h2{margin:0 0 6px;font-size:var(--fs-xl)}
dialog label{display:block;font-size:var(--fs-s);font-weight:700;margin:10px 0 0}
dialog label.chk{display:flex;gap:6px;align-items:center;font-weight:400}
dialog input:not([type=checkbox]),dialog textarea{display:block;width:100%;margin-top:var(--sp-1);padding:9px 10px;border:1px solid var(--line-strong);border-radius:var(--r-s);font-weight:400;background:var(--card)}
dialog pre{white-space:pre-wrap;background:var(--sunk);border-radius:var(--r-s);padding:var(--sp-3);font:var(--fs-s)/1.6 var(--ui);margin:var(--sp-3) 0 6px}
.dialog-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:10px}
.dialog-actions>*{flex:1 1 160px}
.leave-list{font-size:var(--fs-s);padding-left:18px}

/* ---------- 상세 ---------- */
.detail{max-width:var(--wrap);margin:var(--sp-4) auto 40px;padding:0 20px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-5)}
.detail h1{font-size:var(--fs-2xl);margin:var(--sp-1) 0 2px;letter-spacing:-.01em}
.crumb{font-size:var(--fs-s);color:var(--muted)}
.crumb a{color:var(--muted)}
.dmeta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-s);color:var(--muted);margin:6px 0 14px}
.dmeta b{color:var(--ink)}
.dbtns{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:10px 0 18px}
.tester textarea{width:100%;min-height:96px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--sunk);padding:10px;font-size:var(--fs-s)}
.tester .row{display:flex;flex-wrap:wrap;gap:10px var(--sp-4);align-items:center;margin:var(--sp-2) 0}
.wrows .wr{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:baseline;border-top:1px dashed var(--line);padding:var(--sp-2) 0}
.wrows .wr span{font-size:var(--fs-xs);color:var(--muted)}
.wrows .wr div{overflow-wrap:anywhere;line-height:1.25}
.lic-text{white-space:pre-wrap;font-size:var(--fs-s);line-height:1.7;background:var(--sunk);border-radius:var(--r-s);padding:var(--sp-3);max-height:340px;overflow:auto}
.usage-table{width:100%;border-collapse:collapse;font-size:var(--fs-s)}
.usage-table th,.usage-table td{border-bottom:1px solid var(--line);padding:var(--sp-2) var(--sp-1);text-align:left;vertical-align:top}
.usage-table th small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-xs)}
.usage-table td:nth-child(2){white-space:nowrap}
.usage-table td:last-child{color:var(--muted);font-size:var(--fs-xs)}
pre.code{white-space:pre-wrap;background:var(--sunk);border-radius:var(--r-s);padding:var(--sp-3);font-size:var(--fs-xs);overflow:auto}
.side h3{font-size:var(--fs-m);margin:0 0 var(--sp-2)}
.sim a{display:block;text-decoration:none;padding:var(--sp-2) 0;border-top:1px solid var(--line)}
.sim a span{display:block;font-size:var(--fs-xs);color:var(--muted)}
.sim .s-pv{font-size:22px;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.verify dt{font-size:var(--fs-xs);color:var(--muted)}
.verify dd{margin:0 0 var(--sp-2);font-size:var(--fs-s)}
.sign{background:var(--accent-soft);border-radius:var(--r-m);padding:14px var(--sp-4)}
.sign p{margin:0 0 var(--sp-2);font-size:var(--fs-s)}
.sign .sign-tag{display:inline-block;font-size:var(--fs-xs);color:var(--accent);border:1px solid currentColor;border-radius:999px;padding:1px 8px;margin-bottom:var(--sp-2)}
.op-note{font-size:var(--fs-xs);color:var(--muted)}

/* ---------- 안내 페이지 ---------- */
.page{max-width:900px;margin:var(--sp-4) auto 40px;padding:0 20px}
.page h1{font-size:26px}
.page details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-3) var(--sp-4);margin-bottom:10px}
.page summary{font-weight:700;cursor:pointer}
.page table{width:100%;border-collapse:collapse;font-size:var(--fs-s)}
.page th,.page td{border-bottom:1px solid var(--line);padding:var(--sp-2) 6px;text-align:left;vertical-align:top}

/* ---------- 바닥글 ---------- */
.foot{max-width:var(--wrap);margin:0 auto;padding:20px 20px 40px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted)}
.foot b{color:var(--ink)}
.foot a{color:var(--ink)}
.foot summary{cursor:pointer;margin:var(--sp-2) 0}

/* ---------- 반응형 ---------- */
@media (max-width:900px){.detail{grid-template-columns:1fr}}
@media (max-width:760px){
  .compose{grid-template-columns:1fr}
  .field-text input{font-size:var(--fs-l);height:52px}
  .field-q input{height:48px}
  .brand .sub{display:none}
  .nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .nav a{white-space:nowrap}
  .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--sp-1);scrollbar-width:none}
  .quick{flex-wrap:nowrap;overflow-x:auto}
  .quick .chips{flex-wrap:nowrap}
  .quick .chips button{white-space:nowrap}
  .fgroup{position:static}
  .fgroup summary{white-space:nowrap}
  .fgroup .pop{position:fixed;left:12px;right:12px;width:auto;top:auto;bottom:12px;max-height:60vh;overflow:auto}
  .toolbar{position:static;gap:var(--sp-2) var(--sp-3);padding:var(--sp-2) 20px}
  .toolbar .ctl:first-child{flex:1 1 100%}
  .toolbar .ctl:first-child input{flex:1}
  .toolbar .chk{flex:1 1 auto}
  .view{margin-left:0}
  .grid{grid-template-columns:1fr}
  .grid.list .card{grid-template-columns:1fr}
  .grid.list .card-actions{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 나란히 비교 */
dialog.wide{max-width:min(1000px,96vw)}
.cmp-ctl{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;margin:var(--sp-2) 0}
.cmp-ctl input[type=text]{flex:1 1 260px;margin:0}
.cmp-row{border-top:1px solid var(--line);padding:var(--sp-3) 0}
.cmp-name{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--fs-s)}
.cmp-use{display:flex;gap:4px;margin-left:auto}
.cmp-pv{line-height:1.25;overflow-wrap:anywhere;padding-top:var(--sp-2)}
.drawer-actions{display:flex;flex-direction:column;gap:var(--sp-2)}
.cmp-ctl .ctl{white-space:nowrap;flex:none}

/* 재채점 반영 */
.more-use{border:0;background:none;color:var(--muted);text-decoration:underline;min-height:var(--h-sub);font-size:var(--fs-s);white-space:nowrap}
.more-use em{font-style:normal;color:var(--accent);font-weight:700}
.quick-hint{margin:0}
.toolbar-toggle{display:none}
.verify-sum{margin:0 0 var(--sp-2);font-size:var(--fs-s)}
.verify details summary{cursor:pointer;color:var(--muted)}
.report-actions{display:grid;grid-template-columns:1fr 1fr}
.btn-a.kakao{background:var(--card);color:var(--ink);border:1px solid var(--line-strong);font-weight:500}
.kdot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#FEE500;border:1px solid #d9c200;margin-right:2px}
.empty .pong-say{max-width:560px}
.beta{padding:3px var(--sp-5)}
@media (max-width:760px){
  .field-q{display:none}
  .compose.searching .field-q{display:block}
  .quick-hint{display:none}
  .toolbar-toggle{display:block;margin:var(--sp-2) 20px 0;width:calc(100% - 40px);min-height:var(--h-sub);border:1px dashed var(--line-strong);background:transparent;border-radius:var(--r-s);font-size:var(--fs-s);color:var(--muted)}
  .toolbar{display:none}
  .toolbar.open{display:flex}
  .examples{flex-wrap:nowrap;overflow-x:auto}
  .examples button{white-space:nowrap}
  .report-actions{grid-template-columns:1fr}
}
.search-btn{display:none}
@media (max-width:760px){.search-btn{display:inline-block}}
@media (max-width:760px){
  .top{padding:10px 16px 4px;gap:8px}
  .brand{flex:1}
  .top-actions{gap:6px}
  .top-actions .icon-btn{width:40px;height:40px}
  .drawer-btn{min-height:40px;padding:0 12px}
  .nav{order:3}
  .compose label>span{margin-bottom:4px}
  .filterbar{margin-top:10px}
  .examples{margin-top:-2px}
}