/* =====================================================================
   Kindergarden 브랜드 층 — brand.css  (kg.css → live.css → studio.css 다음, 맨 마지막에 읽는다)
   로고에서 가져온 네 가지만 쓴다.
     먹(ink)  #171715  글자와 기본 동작 하나
     종이     #fffefb  원고와 입력창,  바탕은 한 톤 내린 #f8f5ef
     세이지   #adc6c0  로고 바탕. 고른 상태와 조용한 면에만
     교정 빨강 #c4472f  로고의 교정 부호. 지운 말, 확인할 곳, 오류에만
   글 고치는 종이(캔버스)의 표시는 원래 설계 그대로 둔다: 호박 형광펜 = AI 같은 문장, 초록 펜 = 킨더가든이 고친 손.
   조작부는 Pretendard, 원고는 명조(Noto Serif KR). 방 사진·병풍·황동은 쓰지 않는다.
   ===================================================================== */
:root{
  --paper:#fffefb; --paper-2:#f3eee6; --line:#e5ded2; --rule:#eee8dd;
  --text:#171715; --muted:#5c5850; --faint:#6e6a61;
  --accent:#171715; --accent-2:#35332e;
  --pen:#1e6b43; --red:#c4472f; --warn:#b53f29; --hl:217,154,43;
  --sage:#adc6c0; --sage-2:#e4ece9; --sage-ink:#2c4740;
  --wall:#f8f5ef; --floor:#f8f5ef; --edge:#e5ded2; --ink2:#4b4842; --side:#f3eee6;
  --ui:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --r-paper:6px; --r-ctl:10px; --r-card:14px;
  --focus:0 0 0 2px var(--paper),0 0 0 4px var(--text);
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--wall);letter-spacing:-.005em}
::selection{background:rgba(173,198,192,.6)}
:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:6px}
.ed:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible{outline:0}

/* ── 사이드바: 테두리 없는 줄 목록(새로 만들기, 검색, 프로젝트 …, 최근, 맨 아래 계정) ── */
.side{background:var(--side);border-right:1px solid var(--edge);padding:14px 10px 10px;font-size:15px}
.ws{padding:4px 8px 14px}
.ws img{height:28px}
.ws .tg{color:var(--muted)}
.newchat,.nav a{display:flex;align-items:center;justify-content:flex-start;gap:12px;height:40px;margin:0;padding:0 10px;border:0;border-radius:10px;
  background:none;box-shadow:none;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--text)}
.newchat .plus{width:20px;height:20px;flex:none;background:none;border-radius:0;display:grid;place-items:center}
.newchat .plus svg{width:17px;height:17px;stroke:var(--text);stroke-width:1.15;fill:none;stroke-linecap:round}
.newchat kbd,.nav a kbd{display:none}
.nav{margin-top:0}
.nav a svg{width:20px;height:20px;color:var(--text);stroke-width:1.3}
.nav a em{font-size:12.5px;color:var(--faint)}
.ws .tg:hover,.newchat:hover,.nav a:hover,.grp a:hover{background:rgba(23,23,21,.06)}
.nav a.on,.grp a.on{background:rgba(23,23,21,.08);outline:0;color:var(--text);font-weight:600}
.recent{margin-top:14px}
.rl h3{font-size:13px;font-weight:500;color:var(--faint);padding:14px 10px 6px}
.rl .rempty{font-size:13.5px;color:var(--faint);padding:0 10px;line-height:1.6}
.grp a.ri{height:38px;gap:12px;padding:0 6px 0 10px;border-radius:10px;font-size:15px;margin:0}
.ri svg{width:20px;height:20px;stroke:var(--muted);stroke-width:1.2}
.ri.on svg{stroke:var(--text)}
.ri.pin .rp{color:var(--pen)}
.ri.pin .rp svg{fill:rgba(30,107,67,.16)}
.me{border-top:1px solid var(--edge);padding:12px 8px 4px;gap:10px;align-items:center}
.me .av{width:30px;height:30px;background:var(--text);color:var(--paper);font-size:12.5px}
.me>div{display:flex;align-items:baseline;gap:6px;min-width:0}
.me b{font-size:15px;font-weight:600}
.me s{display:none}
.me em{margin-left:0;padding:0;border:0;background:none;font-size:14px;color:var(--muted)}
.me em:before{content:"· "}

/* ── 바탕, 머리줄 ─────────────────────────────────────────── */
.main,.main[data-view]{background:var(--wall)}
.head{background:transparent}
.head .engine:before{background:#4d8a78;box-shadow:0 0 0 3px rgba(77,138,120,.16)}
.head .engine.off:before{background:var(--red);box-shadow:0 0 0 3px rgba(196,71,47,.14)}
.head .r .hbtn{border-radius:999px}

/* ── 첫 화면: 제목 하나, 입력창 하나 ─────────────────────── */
.wrapc{width:min(1120px,calc(100% - 48px))}
.wall .wrapc,.cslot,.mhint,.hsec.narrow{max-width:820px;margin-left:auto;margin-right:auto}
.wall{min-height:0;display:block;padding:clamp(40px,11vh,128px) 0 0}
.wall .wrapc{display:block}
.hl,.wall .hl{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 0 30px}
.hl .hmark{width:46px;height:auto;display:block;margin-bottom:18px}
.hl .kicker{font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:0;color:var(--sage-ink);background:var(--sage-2);padding:5px 11px;border-radius:999px;margin:0 0 16px;line-height:1.3}
.hl .kicker span{display:block;clip-path:none;animation:none}
.hl .big{font-family:var(--ui);font-size:clamp(34px,4.4vw,56px);font-weight:750;line-height:1.16;letter-spacing:-.035em;color:var(--text);text-wrap:balance;margin:0}
.hl .sub{font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.7;color:var(--ink2);margin-top:16px;max-width:30em;font-weight:400;letter-spacing:-.01em;text-wrap:balance;word-break:keep-all}
.floor{background:none;border-top:0;padding:0 0 64px}
.mhint{text-align:center;color:var(--faint);font-size:13.5px;margin-top:14px}
.hmore{margin-top:40px}
.hsec{margin-top:36px}
.hsec h3{color:var(--text);font-size:14.5px;font-weight:650}
.hsec .hh a,.wmore a{color:var(--muted);font-size:13.5px;text-underline-offset:3px}
.hsec .prow:hover{background:rgba(23,23,21,.035)}
/* 칩으로 고르고 카드로 본다 */
.htabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.htabs button{height:36px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--edge);font-size:14px;color:var(--ink2);white-space:nowrap;transition:background-color .15s,color .15s}
.htabs button:hover{background:rgba(23,23,21,.05)}
.htabs button[aria-selected=true]{background:var(--text);color:var(--paper);box-shadow:none;font-weight:600}
.wgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.wcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;height:268px;padding:20px 20px 0;border-radius:18px;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--edge);text-align:left;text-decoration:none;color:var(--text);overflow:hidden;transition:box-shadow .18s,transform .18s var(--ease)}
.wcard:hover{box-shadow:inset 0 0 0 1px #c9bfae,0 14px 28px -20px rgba(23,23,21,.35)}
.wcard:hover .pp{transform:translateY(-6px)}
.wic{width:28px;height:28px;flex:none;border-radius:50%;background:var(--text);color:var(--paper);display:grid;place-items:center;margin-bottom:14px}
.wic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wt{font-family:var(--doc);font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.015em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.wd{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.wm{margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--faint)}
.wpv{position:absolute;left:20px;right:20px;top:176px;bottom:0;display:block;pointer-events:none}
.wcard .wm~.wpv{top:196px}
.pp{display:flex;flex-direction:column;gap:5px;width:76%;height:140px;margin:0 auto;padding:12px 13px;background:#fff;border-radius:6px 6px 0 0;font-style:normal;
  box-shadow:0 0 0 1px var(--edge),0 10px 24px -12px rgba(23,23,21,.3);transition:transform .22s var(--ease)}
.pp b{font-family:var(--doc);font-size:8.5px;font-weight:600;line-height:1.4;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp b.ph{color:#a8a195}
.pp span{font-family:var(--doc);font-size:6.5px;line-height:1.75;color:#4b4842;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.pp span.nil,.pp span.caret{color:#a8a195}
.pp span.caret:before{content:"";display:inline-block;width:1px;height:9px;background:var(--red);vertical-align:-1.5px;margin-right:2px}
.pp s{text-decoration:line-through;text-decoration-color:var(--red)}
.pp u{text-decoration:none;color:var(--red);font-family:var(--pen-font);font-size:10px;line-height:1}
.pp.files,.pp.vers{flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:5px}
.pp em{font-style:normal;font-family:var(--ui);font-size:7px;font-weight:650;padding:2px 6px;border-radius:999px;background:var(--sage-2);color:var(--sage-ink)}
.pp.vers em:first-child{background:var(--text);color:var(--paper)}
.pp.files span,.pp.vers span{flex:0 0 100%;height:4px;border-radius:2px;background:#ece6db}
.pp.files span:nth-of-type(1),.pp.vers span:nth-of-type(1){margin-top:6px}
.pp.files span:nth-of-type(3),.pp.vers span:nth-of-type(3){flex-basis:62%}
.pp.ask{background:var(--sage-2);box-shadow:none;border-radius:12px 12px 0 0}
.pp.ask span{font-family:var(--ui);font-size:8.5px;line-height:1.6;color:var(--sage-ink);-webkit-line-clamp:5}
.wmore{text-align:center;margin-top:18px}

/* ── 입력창 ───────────────────────────────────────────────── */
.box,.compose .box{background:var(--paper);border:0;border-radius:22px;box-shadow:0 0 0 1px var(--edge),0 2px 4px rgba(23,23,21,.03),0 18px 40px -22px rgba(23,23,21,.22)}
.box:focus-within{box-shadow:0 0 0 1px #bdb4a4,0 2px 4px rgba(23,23,21,.03),0 18px 40px -22px rgba(23,23,21,.26)}
.compose .box.drop{box-shadow:0 0 0 2px var(--text)}
.box .in{padding:18px 22px 4px}
.box textarea::placeholder{color:var(--faint)}
.box .bar{padding:8px 12px 12px 14px}
.box .sq{border-radius:999px}
.box .sq:hover,.mdl:hover{background:rgba(23,23,21,.06)}
.kindsel select{border-radius:999px}
.mdl{border-radius:999px;font-size:14px;font-weight:550}
.mdl .mn{color:var(--text)}
.mmenu{border-radius:14px;padding:6px;box-shadow:0 0 0 1px var(--edge),0 16px 40px -16px rgba(23,23,21,.3);background:var(--paper);min-width:248px}
.mmenu button{border-radius:9px}
.mmenu button b{font-weight:650}
/* 다섯 단계: 이름 한 줄, 설명은 그 밑에(옆에 두면 좁은 칸에서 줄이 깨진다) */
.mmenu .mh{padding:6px 10px 4px;font-size:11.5px;font-weight:600;color:var(--muted)}
.mmenu button{flex-direction:column;align-items:flex-start;gap:1px;padding:7px 10px}
.mmenu button b{white-space:nowrap;font-size:14px}
.mmenu button s{white-space:nowrap;font-size:12px}
.mmenu button[aria-checked=true]{background:var(--sage-2)}
.fmode{background:rgba(23,23,21,.055);border-radius:999px;padding:3px}
.fmode button{border-radius:999px;color:var(--muted)}
.fmode button[aria-checked=true]{background:var(--paper);box-shadow:0 0 0 1px var(--edge);color:var(--text)}
.go{border-radius:999px;background:rgba(23,23,21,.08);color:var(--muted)}
.go:hover{background:rgba(23,23,21,.12)}
.go.ready,.go.stop{background:var(--text);color:var(--paper)}
.go.ready:hover,.go.stop:hover{background:var(--accent-2)}
.go.ready kbd{color:rgba(255,254,251,.6)}

/* ── 버튼, 알림 ───────────────────────────────────────────── */
.btn{border-radius:999px}
.btn.pri{background:var(--text);border-color:var(--text);color:var(--paper)}
.btn.pri:hover{background:var(--accent-2)}
.toast{border-radius:999px;background:var(--text);color:var(--paper);display:flex;align-items:center;gap:12px}
.toast button{color:var(--paper);font-weight:650;text-decoration:underline;text-underline-offset:3px}

/* ── 킨더가든의 손: 초록 펜 대신 붉은 교정 펜 ─────────────── */
.reply .who .mark,.prog .mark{width:18px;height:auto}
.reply .who b{font-weight:650}

/* ── 작업대: 종이와 교정 패널 ─────────────────────────────── */
.dz-stage{background:var(--wall)}
.dzmode,.dz-vers{background:rgba(23,23,21,.055);box-shadow:none;border-radius:999px}
.dzmode button,.dz-vers button{border-radius:999px;color:var(--muted)}
.dzmode button.on,.dz-vers button.on{background:var(--text);color:var(--paper)}
.dz-bar .showchg,.dz-count{background:transparent;color:var(--muted)}
.sheet{border-radius:var(--r-paper);box-shadow:0 0 0 1px var(--edge),0 1px 2px rgba(23,23,21,.04),0 24px 48px -32px rgba(23,23,21,.25)}
.sheet:before,.sheet:after{display:none}
.sheet.drop{box-shadow:0 0 0 2px var(--text)}
.sh-kind select{background:var(--sage-2);color:var(--sage-ink);border-radius:999px}
.sh-title::placeholder,.sheet.blank .ed:before{color:#a8a195}
.sh-empty{border-color:#d5ccbc;color:var(--muted);border-radius:12px}
.dz-panel{background:var(--paper);border-left:1px solid var(--edge)}
.ptabs{border-bottom-color:var(--rule)}
.ptabs button.on:after{background:var(--text)}
.psec h3{color:var(--text)}

/* 형광펜으로 칠한 문장은 누를 수 있다(누르면 고칠 후보) */
.sh-doc.r .s{cursor:pointer;border-radius:2px}
.sh-doc.r .s:hover,.sh-doc.r .s:focus-visible{box-shadow:0 0 0 2px rgba(var(--hl),.55);outline:0}
.hl-rect{pointer-events:none}
mark.need{background:rgba(196,71,47,.08);color:var(--warn);border-radius:4px;padding:1px 4px;font-family:var(--ui);font-size:.86em;font-weight:600;box-shadow:inset 0 0 0 1px rgba(196,71,47,.28)}

/* 수정본: 원문에 없던 숫자가 든 자리 */
.doc .chg.newnum{box-shadow:inset 0 -0.55em 0 rgba(196,71,47,.14)}

/* ── 고른 문장 다듬기: 선택 옆 도구, 후보 칸 ──────────────── */
.seltools{position:absolute;z-index:8;display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--text);box-shadow:0 10px 24px -8px rgba(23,23,21,.45);animation:kg-pop .14s var(--ease) both}
.seltools button{height:32px;padding:0 13px;border-radius:999px;color:var(--paper);font-size:13.5px;font-weight:550;white-space:nowrap}
.seltools button:hover,.seltools button:focus-visible{background:rgba(255,254,251,.16);outline:0}
.selpop{width:min(440px,calc(100% - 16px));padding:0;border:0;border-radius:16px;background:var(--paper);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 0 0 1px var(--edge),0 24px 48px -20px rgba(23,23,21,.4)}
.sph{align-items:center;padding:12px 10px 8px 16px}
.sph b{flex:1;font-size:14.5px;font-weight:650}
.sph .x{width:30px;height:30px;border-radius:999px}
.sph .x:hover{background:rgba(23,23,21,.07)}
.spo{margin:0 12px;padding:10px 12px;border-radius:10px;background:var(--wall)}
.spo s{display:block;text-decoration:none;font-size:12px;font-weight:600;color:var(--faint);margin-bottom:3px}
.spo p{font-family:var(--doc);font-size:14px;line-height:1.7;color:var(--ink2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.spo em{display:block;font-style:normal;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:6px}
.spt{display:flex;gap:6px;padding:10px 12px 0}
.spt button{height:32px;padding:0 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--edge);font-size:13.5px;color:var(--text)}
.spt button[aria-pressed=true]{background:var(--text);color:var(--paper);box-shadow:none}
.selpop .el{padding:10px 16px 4px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.selpop .el:empty{display:none}
.spl{flex:1;min-height:0;overflow:auto;padding:0 6px;gap:0;overscroll-behavior:contain}
.spl .pline{margin:8px 10px 12px}
.cand{position:relative;padding:10px 64px 10px 10px;border-radius:10px;font-size:14.5px}
.cand:hover,.cand:focus-visible{background:var(--sage-2);outline:0}
.cand s{font-size:12.5px;line-height:1.5;margin-top:3px}
.cand em{font-size:12.5px;color:var(--warn)}
.cand i{position:absolute;right:10px;top:10px;font-style:normal;font-family:var(--ui);font-size:12.5px;font-weight:650;height:26px;padding:0 10px;border-radius:999px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--edge);background:var(--paper)}
.cand:hover i{background:var(--text);color:var(--paper);box-shadow:none}
.spl .merr{margin:4px 10px 8px;font-size:13px;line-height:1.55;color:var(--warn)}
.spl .retry{margin:0 10px 8px;align-self:flex-start}
.spf{display:flex;justify-content:flex-end;padding:8px 12px 12px;border-top:1px solid var(--rule);margin-top:6px}
.spf .skip{height:34px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:550;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--edge)}
.spf .skip:hover{background:rgba(23,23,21,.05)}

/* ── 교정 패널 접기 ───────────────────────────────────────── */
.pfold{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:36px;height:36px;padding:0;border-radius:999px;font-size:13px;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--edge);background:var(--paper)}
.pfold svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4}
.pfold:hover{background:#fff}
.pfold[aria-expanded=true] svg path{stroke-width:3.4}
.dz.nopanel{grid-template-columns:minmax(0,1fr)}
.dz.nopanel .dz-panel{display:none}

/* ── 좁은 화면 ────────────────────────────────────────────── */
@media (max-width:1180px){
  .dz{grid-template-columns:minmax(0,1fr)}
  .dz-stage,.dz-panel{min-width:0}
  .wgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dz.nopanel{grid-template-rows:minmax(0,1fr)}
}
@media (max-width:860px){
  .wall{padding-top:28px}
  .hl .big{font-size:32px}
  .wgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .wcard{height:248px;padding:16px 16px 0}
  .wpv{left:16px;right:16px}
  .htabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -24px;padding:2px 24px;scrollbar-width:none}
  .htabs::-webkit-scrollbar{display:none}
  .box,.compose .box{border-radius:18px}
  .box textarea,.tcompose textarea,.sh-title{font-size:16px}
  /* 원고 먼저: 패널은 아래에 낮게 두고, 접으면 종이만 남는다 */
  .dz-panel{max-height:38vh}
  .dz-stage{padding:0 10px 40px}
  .sh-top{padding:18px 18px 0}
  .sh-body{padding:4px 18px 22px}
  .dz-bar{flex-wrap:nowrap;gap:8px}
  .head .ttl{flex:1;min-width:0}
  .head h1{max-width:none}
  .head .r{flex:none;gap:6px}
  .head .r .hbtn{font-size:0;gap:0;width:40px;height:40px;padding:0;justify-content:center}
  .head .r .hbtn svg{width:17px;height:17px}
  .seltools button{height:38px;padding:0 14px}
  .spf .skip,.spt button{height:40px}
}
@media (max-width:520px){
  .wgrid{grid-template-columns:1fr}
  .wcard{height:auto;padding-bottom:16px}
  .wpv{display:none}
}
@media (prefers-reduced-motion:reduce){.wcard,.pp,.seltools{transition:none;animation:none}}

/* ── 수정본: 원래 캔버스 방식(초록 밑줄, 원래 말은 그 밑에, 여백 손글씨)을 그대로 쓰고 색만 맞춘다 ── */
.dz-bar:has(.dz-vers:not([hidden])) .dz-count{display:none}
.sh-doc.v.tg .bd{grid-template-columns:1fr}
.sh-doc.v.tg .mg.notes{display:none}
.doc .sug em mark.need,.pen mark.need{background:none;box-shadow:none;padding:0;font:inherit;color:inherit}
.dz-vers .tag.ok{background:var(--sage-2);color:var(--sage-ink)}
/* 좁은 화면: 버전 탭 이름이 세 줄로 접히던 것. 한 줄로 두고 옆으로 밀어 본다 */
.dzmode{flex:none}
.dz-vers{min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}
.dz-vers::-webkit-scrollbar{display:none}
.dz-vers button{flex:none;white-space:nowrap}
.dz-bar .showchg{flex:none;white-space:nowrap}
.dz-vers button.on .tag.ok{background:rgba(255,254,251,.18);color:var(--paper)}
.tag.ok{background:var(--sage-2);color:var(--sage-ink)}
.vrow{border-radius:12px}
/* 고치는 정도: 꽃살 무늬 대신 먹색 칸 */
.scale{border:1px solid var(--edge);border-radius:12px;background:var(--paper)}
.scale button{border-left-color:var(--rule)}
.scale button:first-child{border-radius:11px 0 0 11px}
.scale button:last-child{border-radius:0 11px 11px 0}
.scale button[aria-checked="true"]{background:var(--text);outline:0}
.scale button[aria-checked="true"] b,.scale button[aria-checked="true"] em{background:none;padding:0;color:var(--paper)}
.psec .scale button.rec:after{background:var(--sage-2);color:var(--sage-ink)}
.why-chips button{border-radius:999px}
/* A4로 크게 보기 */
.cv:before{background:rgba(23,23,21,.5)}
.cv-bar{border-radius:999px;padding:6px 6px 6px 10px;box-shadow:0 0 0 1px var(--edge)}
.cv-bar .back{border-radius:999px}
.cv-mode{border-radius:999px}
.cv-mode button{border-radius:999px}
/* 넓은 화면에서 교정 패널이 열려 있으면 수정본 목록은 패널에서 고른다(위 막대가 두 줄로 넘치지 않게) */
@media (min-width:1181px){.dz:not(.nopanel) .dz-vers{display:none}}

/* ── 고치기 칸 ────────────────────────────────────────────── */
.pbody.fix{padding:0 20px 28px}
.fx{padding:20px 0;border-bottom:1px solid var(--rule)}
.fx:last-child{border-bottom:0}
.fx-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.fx-h h3{flex:1;font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--text);margin:0}
.fx-h .lk,.fx-count .lk,.fx-undo .lk{font-size:13px;color:var(--ink2);text-decoration:underline;text-decoration-color:var(--edge);text-underline-offset:3px;text-decoration-thickness:1.5px}
.fx-h .lk:hover,.fx-count .lk:hover,.fx-undo .lk:hover{color:var(--text);text-decoration-color:currentColor}
.fx-meta{font-size:12.5px;color:var(--muted)}
.fx-p{font-size:14px;line-height:1.6;color:var(--ink2);margin:0 0 12px;text-wrap:pretty}
.fx-p b{font-weight:650;color:var(--text);margin-right:4px}
.fx-note{font-size:12.5px;line-height:1.55;color:var(--faint);margin:10px 0 0;text-wrap:pretty}
.num{font-variant-numeric:tabular-nums}
/* 검사 결과: 숫자 하나, 문장 지도, 고칠 만한 문장 */
.fx-big{display:flex;align-items:baseline;gap:10px;margin:2px 0 12px}
.fx-big b{font-size:40px;font-weight:750;line-height:1;letter-spacing:-.04em;color:var(--text)}
.fx-big span{font-size:13.5px;line-height:1.4;color:var(--muted)}
.fx-strip{display:flex;gap:3px;height:14px}
.fx-strip button{flex:1;min-width:4px;border-radius:3px;background:rgba(var(--hl),calc(.1 + var(--ai,0) * .85));transition:transform .15s var(--ease)}
.fx-strip button:hover,.fx-strip button:focus-visible{transform:scaleY(1.45);outline:0}
.fx-sub{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:650;color:var(--text);margin:20px 0 6px}
.fx-sub em{font-style:normal;font-weight:400;font-size:12px;color:var(--faint)}
.fx-list{list-style:none;margin:0 -8px;padding:0;display:flex;flex-direction:column}
.fx-list button{display:block;width:100%;text-align:left;padding:9px 10px 9px 14px;border-radius:10px;position:relative;transition:background-color .15s}
.fx-list button:before{content:"";position:absolute;left:4px;top:11px;bottom:11px;width:3px;border-radius:2px;background:rgba(var(--hl),calc(.25 + var(--ai,0) * .75))}
.fx-list button:hover,.fx-list button:focus-visible{background:rgba(23,23,21,.045);outline:0}
.fx-list span{font-family:var(--doc);font-size:14px;line-height:1.65;color:var(--text);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* 글 전체 고치기: 모델 셋, 낼 곳, 두 동작 */
.fx-tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:3px;border-radius:12px;background:rgba(23,23,21,.055);margin-bottom:10px}
.fx-tiers button{position:relative;height:38px;border-radius:9px;font-size:13px;white-space:nowrap;font-weight:600;color:var(--muted);transition:background-color .15s,color .15s}
.fx-tiers button:hover{color:var(--text)}
.fx-tiers button[aria-checked=true]{background:var(--paper);color:var(--text);box-shadow:0 0 0 1px var(--edge),0 1px 2px rgba(23,23,21,.08)}
.fx-tiers em{position:absolute;top:-8px;right:6px;font-style:normal;font-size:10.5px;font-weight:650;height:17px;line-height:17px;padding:0 6px;border-radius:999px;background:var(--sage-2);color:var(--sage-ink)}
.fx-sel{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;height:42px;padding:0 12px 0 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--edge);font-size:14px;color:var(--muted)}
.fx-sel select{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--text);padding:0 20px 0 0;cursor:pointer;text-align:right}
.fx-sel svg{position:absolute;right:12px;top:15px;width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.6;pointer-events:none}
.fx-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.fx-acts .btn{height:44px;justify-content:center;font-size:14.5px;font-weight:600}
.fx-acts .btn:only-child{grid-column:1 / -1}
.btn.ghost{box-shadow:inset 0 0 0 1px var(--edge);background:var(--paper);color:var(--text)}
.btn.ghost:hover{background:#fff;box-shadow:inset 0 0 0 1px #c9bfae}
.fx .btn.wide{height:44px;margin-top:4px;font-size:14.5px;font-weight:600}
.fx-figs{margin-top:12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--edge);padding:0 12px}
.fx-figs summary{height:42px;display:flex;align-items:center;font-size:14px;font-weight:600;cursor:pointer}
/* 수정본 */
.fx.res .vlist{display:flex;flex-direction:column;gap:4px}
.fx.res .vrow{display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--edge);background:var(--paper);text-align:left}
.fx.res .vrow b{font-size:14px;font-weight:600}
.fx.res .vrow s{margin-left:auto;text-decoration:none;font-size:12.5px;color:var(--faint)}
.fx.res .vrow.on{box-shadow:inset 0 0 0 2px var(--text)}
.fx-warn{margin-top:10px;padding:12px 14px;border-radius:12px;background:rgba(196,71,47,.06);box-shadow:inset 0 0 0 1px rgba(196,71,47,.18)}
.fx-warn b{display:block;font-size:13.5px;font-weight:650;color:var(--warn);margin-bottom:2px}
.fx-warn p{font-size:13.5px;line-height:1.55;color:var(--ink2)}
.fx-count{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:13.5px;color:var(--muted)}
.fx-count span{flex:1}
.fx-count b{font-size:15px;font-weight:700;color:var(--text)}
.fx-undo{display:flex;align-items:baseline;gap:10px;padding:16px 0 0;font-size:12.5px;color:var(--faint)}
.fx.run{padding-top:16px}
.fx.res .vrow{display:flex;flex-wrap:nowrap;white-space:nowrap}
.fx.res .vrow s{display:inline;margin-top:0}
.fx.res .vrow .tag{height:20px;font-size:11.5px}

/* 붉은 교정 펜: 형광펜 다음에 고칠 문장을 교정 기호(⌴)로 받치고 여백에 적는다 */
.pen-stroke.red{stroke:var(--red);stroke-width:1.8}
.pen.red{color:var(--red)}
.sh-doc.r .end{display:flex;justify-content:flex-end;padding:18px 0 6px}
.sh-doc.r .end .pen{font-size:24px;text-align:right}
.sh-doc.r .txt{line-height:2.25}
/* 고칠 만한 문장: 원문은 흐리게 줄 긋고, 고친 말을 그 밑에 */
.fx-list span.was{color:var(--faint);text-decoration:line-through;text-decoration-color:rgba(196,71,47,.55);-webkit-line-clamp:1}
.fx-list .fixto{display:block;margin-top:2px;font-family:var(--doc);font-size:14px;line-height:1.65;color:var(--text)}
/* 수정본: 바뀐 곳 밑줄 아래 원래 말을 작고 연한 회색으로 */
.doc .wasnote{font-size:10px;color:#a8a296;letter-spacing:-.01em}
.fx-sub{display:block}
.fx-sub em{display:block;margin-top:2px}
/* 폰: 버전 탭은 둘째 줄에 한 줄로(첫 줄은 쓰기·형광펜·수정본과 바뀐 곳 보기) */
@media (max-width:760px){
  .dz-bar{flex-wrap:wrap;row-gap:8px}
  .dz-vers:not([hidden]){order:9;flex:1 1 100%;max-width:100%}
}