/* Kindergarden 앱 틀: 대화, 프로젝트, 디자인 목록, 디자인 작업대. 공용 모양(종이·리넨·황동, 서체 셋)은 kg.css·live.css 그대로.
   움직임은 opacity와 transform만 쓴다(창이 커도 매끄럽게). */

/* ── 화면 갈아 끼우기 ─────────────────────────────────────── */
.main .vw{display:none}
.main:not([data-view=chat]) .thread,.main:not([data-view=chat]) .compose{display:none}
.main:not([data-view=chat]) .vw{display:block;grid-row:2 / span 2;min-height:0;overflow:auto;position:relative;z-index:1}
.main[data-view=design] .vw{overflow:hidden}
.vw.in>*{animation:kg-vin .26s var(--ease) both}
@keyframes kg-vin{from{opacity:0;transform:translate3d(0,6px,0)}}
@media (prefers-reduced-motion:reduce){.vw.in>*{animation:none}}

/* ── 머리줄 ─────────────────────────────────────────────── */
.head .crumb{font-size:13.5px;color:#6b655a;text-decoration:none;white-space:nowrap}
.head .crumb:hover{color:var(--text)}
.head .engine i{display:none}
.hacts{display:flex;align-items:center;gap:8px;position:relative}
.head .r .hbtn{height:32px;padding:0 12px 0 10px;color:var(--text)}
.head .r .hbtn.pri{background:var(--accent);border-color:var(--accent);color:#fbf8f1}
.head .r .hbtn.pri:hover{background:var(--accent-2)}
.head .r .hbtn.quiet{border-color:transparent;color:#6b655a;font-weight:400}
.head .r .hbtn.quiet.sure{color:#94431f}

/* ── 사이드바: 최근(대화와 디자인을 한 줄씩) ─────────────────── */
.nav a{padding-left:22px}
.recent{display:flex;flex-direction:column;min-height:0;flex:1;margin-bottom:10px}
.rl{overflow:auto;min-height:0;margin:0 -4px;padding:0 4px;scrollbar-width:none}
.rl::-webkit-scrollbar{display:none}
.grp a.ri{display:flex;align-items:center;gap:9px;padding:0 6px 0 10px}
.grp a.ri.on:before{display:none}
.ri svg{width:14px;height:14px;flex:none;stroke:#736d62;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ri.on svg{stroke:var(--accent)}
.ri span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri .rx{width:24px;height:24px;flex:none;border-radius:6px;display:grid;place-items:center;opacity:0;color:#736d62}
.ri:hover .rx,.ri .rx:focus-visible,.ri.sure .rx{opacity:1}
.ri .rx svg{width:10px;height:10px;stroke:currentColor;stroke-width:1.6}
.ri .rx:hover{background:rgba(80,60,30,.09);color:var(--text)}
.ri.sure{background:#f7e9dc}
.ri.sure .rx{color:#94431f;background:#efd7c4}
.rempty{font-size:12.5px;line-height:1.55;color:#736d62;padding:2px 10px}

/* ── 대화 ───────────────────────────────────────────────── */
.hello a{color:var(--accent);text-underline-offset:3px}
.ask{max-width:min(600px,92%)}
.ask .atx{white-space:pre-wrap;word-break:break-word}
.ask .aatt{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.fchip{display:flex;align-items:center;gap:9px;padding:7px 8px 7px 10px;border:1px solid var(--line);border-radius:var(--r-ctl);background:#f7f2e8;font-size:13px}
.fchip svg{width:17px;height:17px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.5}
.fchip b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip s{text-decoration:none;color:var(--muted);font-size:12px;white-space:nowrap}
.fchip button{margin-left:auto;height:26px;padding:0 9px;border-radius:5px;font-size:12px;color:var(--accent);white-space:nowrap}
.fchip button:hover{background:rgba(31,58,43,.07)}
.fchip{flex-wrap:wrap;row-gap:2px}.fchip b{flex:1 1 7em}.fchip button+button{margin-left:0}
.aimg{display:flex;gap:6px;flex-wrap:wrap}
.aimg img{height:88px;width:auto;border-radius:4px;display:block;border:1px solid var(--line)}

.reply.msg:before,.reply.msg:after{display:none}
.reply.msg{padding:2px 0 4px}
.reply.msg .who{padding:13px 22px 0}
.reply.msg .who .mdn{font-size:12px;color:#736d62}
.reply.msg.working .who .mark{animation:kg-breathe 1.5s ease-in-out infinite}
.md{padding:6px 22px 8px;font-size:15px;line-height:1.75;color:#24221d;word-break:keep-all;overflow-wrap:anywhere}
.md>*+*{margin-top:10px}
.md h3,.md h4,.md h5,.md h6,.md h7,.md h8{font-size:15.5px;font-weight:650;line-height:1.5;margin-top:16px}
.md h3{font-size:17px}
.md ul,.md ol{padding-left:1.35em}
.md li+li{margin-top:3px}
.md li>ul,.md li>ol{margin-top:3px}
.md code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;padding:1px 5px;border-radius:4px;background:#f1eadc}
.md pre{position:relative;padding:12px 14px;border-radius:6px;background:#2a2a26;color:#efe9dc;overflow:auto;font-size:13px;line-height:1.6}
.md pre code{background:none;padding:0;color:inherit;font-size:inherit}
.md pre .cp{position:absolute;right:8px;top:7px;height:24px;padding:0 8px;border-radius:5px;font-size:11.5px;color:#cfc8b9;background:rgba(255,255,255,.08)}
.md pre .cp:hover{background:rgba(255,255,255,.16)}
.md blockquote{border-left:3px solid var(--line);padding-left:12px;color:#4a463e}
.md hr{border:0;border-top:1px solid var(--rule)}
.md a{color:var(--accent);text-underline-offset:3px}
.md .tw{overflow:auto}
.md table{border-collapse:collapse;font-size:13.5px;line-height:1.55}
.md th,.md td{border:1px solid var(--line);padding:5px 9px;text-align:left;vertical-align:top}
.md th{background:#f4efe4;font-weight:600}
.merr{margin:0 22px 8px;padding:8px 11px;border-radius:6px;background:#fbefe6;color:#8a3f1c;font-size:13px;line-height:1.55}
.mstop{margin:0 22px 8px;font-size:12.5px;color:#736d62}
.macts{display:flex;gap:2px;padding:0 14px 8px;opacity:0;transition:opacity .15s}
.reply.msg:hover .macts,.reply.msg:last-child .macts,.macts:focus-within{opacity:1}
.macts button{height:28px;padding:0 9px;border-radius:6px;font-size:12.5px;color:#6b655a}
.macts button:hover{background:rgba(80,60,30,.07);color:var(--text)}

.box textarea{height:46px;max-height:220px;overflow-y:auto}
.att{flex-wrap:wrap;gap:6px;border:0;background:none;padding:0;margin:10px 12px 0}
.achip{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:6px 6px 6px 10px;border:1px solid var(--line);border-radius:var(--r-ctl);background:#f7f2e8;font-size:13px}
.achip svg{width:16px;height:16px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.5}
.achip b{font-weight:500;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.achip s{text-decoration:none;font-size:12px;color:var(--muted);margin:0}
.achip.wait s{animation:kg-breathe 1.4s ease-in-out infinite}
.achip.bad{border-color:#e3c9b4;background:#fbf1e8}.achip.bad s{color:#94431f}
.achip button{width:22px;height:22px;border-radius:5px;color:var(--muted);font-size:11px}
.achip button:hover{background:rgba(80,60,30,.09)}
.achip.img{padding:3px 4px 3px 3px}
.achip.img img{height:40px;width:auto;border-radius:3px;display:block}
.compose .box.drop{box-shadow:0 0 0 2px var(--accent),0 4px 10px rgba(40,26,8,.08)}
.mwrap{position:relative}
.mdl .mn{color:var(--text)}
.mmenu{position:absolute;left:0;bottom:calc(100% + 6px);z-index:30;min-width:200px;padding:5px;border-radius:8px;background:var(--paper);
  border:1px solid var(--line);box-shadow:0 10px 28px rgba(30,20,8,.14);animation:kg-pop .14s var(--ease) both}
.mmenu button{display:flex;align-items:baseline;gap:10px;width:100%;padding:8px 10px;border-radius:6px;text-align:left}
.mmenu button:hover{background:rgba(80,60,30,.06)}
.mmenu button b{font-size:13.5px;font-weight:500}
.mmenu button s{text-decoration:none;font-size:12px;color:var(--muted)}
.mmenu button[aria-checked=true] b:after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:7px;vertical-align:2px}
@keyframes kg-pop{from{opacity:0;transform:translate3d(0,4px,0) scale(.98)}}
.go.stop{background:#3b372f}
.go.stop:hover{background:#2a2722}

.toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translateX(-50%);max-width:min(520px,90vw);padding:10px 16px;border-radius:8px;
  background:#2a2722;color:#f6f1e6;font-size:13.5px;line-height:1.5;box-shadow:0 8px 24px rgba(20,14,6,.22);animation:kg-toast .22s var(--ease) both}
@keyframes kg-toast{from{opacity:0;transform:translate3d(-50%,8px,0)}}
.kgdlg{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;background:rgba(24,20,14,.3);animation:kg-fade .18s ease both}
.kgdlg .connect{margin:0}
@keyframes kg-fade{from{opacity:0}}

/* ── 목록 화면(프로젝트·디자인) ─────────────────────────────── */
.sheetlist{width:min(980px,calc(100% - 48px));margin:22px auto 40px;padding:22px 26px 26px;background:var(--paper);border-radius:var(--r-paper);
  box-shadow:0 0 0 1px rgba(120,90,50,.16),0 2px 6px rgba(40,26,8,.08)}
.lhead .lead{font-size:14.5px;line-height:1.7;color:#3d3932;max-width:640px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:22px 18px;margin-top:22px}
.dcard{display:block;text-decoration:none;color:inherit}
.dpage{aspect-ratio:210/250;padding:16px 15px;background:#fffdf8;border-radius:2px;overflow:hidden;position:relative;
  box-shadow:0 0 0 1px rgba(120,90,50,.18),0 3px 8px rgba(40,26,8,.07);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.dpage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(rgba(255,253,248,0),#fffdf8)}
.dpage b{display:block;font-family:var(--doc);font-size:12.5px;font-weight:600;line-height:1.45;margin-bottom:8px}
.dpage span{display:block;font-family:var(--doc);font-size:9.5px;line-height:1.7;color:#4a463e;word-break:keep-all}
.dpage span+span{margin-top:3px}
.dpage .nil{color:#a29a8b}
.dcard:hover .dpage{transform:translate3d(0,-2px,0);box-shadow:0 0 0 1px rgba(120,90,50,.26),0 8px 18px rgba(40,26,8,.1)}
.dmeta{padding:10px 2px 0}
.dmeta span{display:block;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmeta s{display:block;text-decoration:none;font-size:12px;color:var(--muted);margin-top:2px}
.plist{margin-top:18px;border-top:1px solid var(--rule)}
.plist.in{margin-top:8px}
.prow{display:flex;align-items:center;gap:14px;padding:13px 8px;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;border-radius:4px}
.prow:hover{background:rgba(80,60,30,.035)}
.prow>svg{width:18px;height:18px;flex:none;stroke:#736d62;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.prow>div{flex:1;min-width:0}
.prow b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow s{display:block;text-decoration:none;font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .pc,.prow .pt{font-size:12.5px;color:var(--muted);white-space:nowrap}
.prow .pt{width:64px;text-align:right}
.empty{padding:44px 10px 26px;text-align:center}
.empty .pen{font-size:32px}
.empty .pen>span{clip-path:none;animation:none;margin:0 auto}
.empty p:not(.pen){font-size:14px;line-height:1.65;color:#4a463e;max-width:460px;margin:8px auto 0}
.empty .eb{display:flex;gap:8px;justify-content:center;margin-top:18px}
.vw.drop .sheetlist,.pmain.drop{box-shadow:0 0 0 2px var(--accent)}

/* 프로젝트 한 개 */
.proj{width:min(1080px,calc(100% - 48px));margin:22px auto 40px;display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start}
.pmain,.pcard{background:var(--paper);border-radius:var(--r-paper);box-shadow:0 0 0 1px rgba(120,90,50,.16),0 2px 6px rgba(40,26,8,.08)}
.pmain{padding:24px 26px 22px}
.pname{display:block;width:100%;border:0;outline:0;background:none;font-family:var(--doc);font-size:26px;font-weight:600;letter-spacing:-.01em;color:var(--text);padding:2px 0}
.pdesc{display:block;width:100%;border:0;outline:0;background:none;font:inherit;font-size:14.5px;color:#4a463e;margin-top:4px;padding:2px 0}
.pname:focus,.pdesc:focus{box-shadow:0 1.5px 0 var(--line)}
.pstart{margin-top:18px;border:1px solid var(--line);border-radius:8px;background:#fffdf8;border-top:1px solid var(--line)}
.pstart textarea{display:block;width:100%;border:0;outline:0;resize:none;background:none;font:inherit;font-size:15px;line-height:1.6;padding:12px 14px 4px;color:var(--text)}
.pbar{display:flex;align-items:center;gap:6px;padding:4px 8px 8px}
.pbar .sp{flex:1}
.ph{font-size:13px;font-weight:600;color:#3b372f;margin:24px 0 0}
.pnone{font-size:13px;color:var(--muted);padding:10px 2px}
.pside{display:flex;flex-direction:column;gap:14px}
.pcard{padding:16px 18px}
.pcard h3{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:600}
.pcard .hint{font-size:12.5px;line-height:1.55;color:var(--muted);margin:4px 0 10px}
.pins{display:block;width:100%;border:1px solid var(--line);border-radius:6px;outline:0;resize:vertical;background:#fffdf8;font:inherit;font-size:13.5px;line-height:1.6;padding:9px 11px;color:var(--text)}
.pins:focus{border-color:#b9ab92}
.pf{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--rule);font-size:13px}
.pf:first-child{border-top:0}
.pf svg{width:16px;height:16px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.5}
.pf b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf s{text-decoration:none;font-size:12px;color:var(--muted)}
.pf button{width:22px;height:22px;border-radius:5px;color:var(--muted);font-size:11px}
.pf button:hover{background:rgba(80,60,30,.09)}

/* ── 디자인 작업대: 왼쪽 종이(족자), 오른쪽 고치기·대화 ──────────── */
.dz{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 372px;min-height:0}
.dz-stage{position:relative;min-height:0;overflow:auto;padding:0 28px 60px;scroll-behavior:auto;overscroll-behavior:contain}
.dz-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:min(860px,100%);margin:0 auto;padding:14px 0 12px}
.dzmode,.dz-vers{display:inline-flex;background:rgba(251,249,244,.94);border-radius:8px;padding:3px;box-shadow:0 0 0 1px rgba(120,90,50,.18)}
.dzmode button,.dz-vers button{height:30px;padding:0 12px;border-radius:6px;font-size:13px;color:#4a463e;display:inline-flex;align-items:center;gap:6px;transition:background-color .15s,color .15s}
.dzmode button:hover:not(:disabled),.dz-vers button:hover{color:var(--text)}
.dzmode button.on,.dz-vers button.on{background:var(--accent);color:#fbf8f1}
.dzmode button:disabled{opacity:.42;cursor:default}
.dz-vers .tag{height:18px;font-size:11px}
.dz-vers button.on .tag{background:rgba(255,255,255,.16);color:#fbf8f1;border-color:transparent}
.dz-bar .sp{flex:1}
.dz-bar .showchg{background:rgba(251,249,244,.94)}
.dz-count{font-size:12.5px;color:#4a463e;background:rgba(251,249,244,.9);padding:4px 9px;border-radius:6px}
.dz-count:empty{display:none}

.sheet{position:relative;width:min(860px,100%);margin:0 auto;background:var(--paper);border-radius:var(--r-paper);
  box-shadow:0 0 0 1px rgba(120,90,50,.16),0 2px 6px rgba(40,26,8,.08),0 18px 40px rgba(40,26,8,.08)}
.sheet:before,.sheet:after{content:"";display:block;height:10px;background:url(bg/lattice-band.jpg) 0 50%/auto 44px repeat-x;filter:saturate(.8);border-radius:var(--r-paper) var(--r-paper) 0 0}
.sheet:after{border-radius:0 0 var(--r-paper) var(--r-paper)}
.sheet.drop{box-shadow:0 0 0 2px var(--accent),0 18px 40px rgba(40,26,8,.1)}
.sh-top{display:flex;align-items:center;gap:12px;padding:22px 40px 0}
.sh-title{flex:1;min-width:0;border:0;outline:0;background:none;font-family:var(--doc);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--text);padding:3px 0}
.sh-title::placeholder{color:#b3aa98}
.sh-kind{position:relative;flex:none}
.sh-kind select{appearance:none;-webkit-appearance:none;height:28px;padding:0 24px 0 10px;border-radius:6px;border:0;background:#f1eadc;font:inherit;font-size:12.5px;font-weight:500;color:var(--text);cursor:pointer}
.sh-kind svg{position:absolute;right:8px;top:9px;width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.6;pointer-events:none}
.sh-body{padding:4px 40px 30px;min-height:420px;position:relative}
.sh-doc{margin:0;border-top:1px solid var(--rule)}
.sh-doc .bd.one{grid-template-columns:1fr}
.sh-doc.r .dh{gap:12px;flex-wrap:wrap}
.sh-doc.r .dh .stat{font-size:12.5px}
.sh-doc.v .bd{grid-template-columns:1fr 150px}
.sh-doc.v .mg .pen{width:150px}
.ed{outline:none;min-height:360px;caret-color:var(--pen);padding-bottom:40px}
.ed>*{margin-top:10px}
.ed>:first-child{margin-top:0}
.ed figure.efig{margin:14px 0 4px;display:flex;justify-content:center;user-select:none}
.ed figure.efig img{display:block;max-width:100%;height:auto;background:#fff;border-radius:2px}
.ed p.cap{font-family:var(--doc);font-size:13px;line-height:1.65;color:#3f3b33}
.ed p.tbl{font-family:var(--ui);font-size:12px;line-height:1.55;color:var(--muted);white-space:pre-wrap}
.ed h4{font-family:var(--doc);font-size:16px;font-weight:600;margin-top:20px}
.ed h3.ti{font-family:var(--doc);font-size:19px;font-weight:600;line-height:1.5}
.sheet.blank .ed{min-height:120px}
.sh-empty{display:none;align-items:center;gap:14px;margin-top:4px;padding:14px 16px;border:1px dashed #d6cbb7;border-radius:8px;color:#5f5a50;font-size:13.5px;line-height:1.6}
.sh-empty p{flex:1}
.sheet.blank .sh-empty{display:flex}
.sheet.blank .ed:before{content:attr(data-ph);position:absolute;color:#b3aa98;pointer-events:none;font-family:var(--doc);font-size:16.5px;line-height:2.2}
.doc .chg[data-ci]{cursor:pointer;border-radius:2px;transition:background-color .15s}
.doc .chg[data-ci]:hover{background:rgba(30,107,67,.08)}
.doc .chg.rev{color:var(--text);text-decoration:underline dotted;text-decoration-color:#b0a58f;text-decoration-thickness:1.5px;text-underline-offset:4px}
.doc.hidechg .chg.rev{text-decoration:none}

/* 읽는 중 */
.sh-reading{padding:56px 0 40px}
.sh-reading .prog{max-width:420px;margin:0 auto}
.sh-reading .hint{max-width:420px;margin:14px auto 0;text-align:center}

/* 진행: 숨 쉬는 로고, 단계, 가는 진행선(한 방향으로만 흐른다) */
.prog .ph2{display:flex;align-items:center;gap:9px}
.prog .ph2 .mark{height:18px;width:auto;animation:kg-breathe 1.5s ease-in-out infinite}
.prog .pst{font-size:14px;font-weight:600;flex:1;min-width:0}
.prog .el{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.psteps{list-style:none;display:flex;flex-direction:column;gap:6px;margin:12px 0 0;padding:0}
.psteps li{position:relative;padding-left:20px;font-size:13px;color:#736d62}
.psteps li:before{content:"";position:absolute;left:3px;top:6px;width:7px;height:7px;border-radius:50%;border:1.5px solid #c9bfab}
.psteps li.on{color:var(--text);font-weight:500}
.psteps li.on:before{border-color:var(--pen);background:var(--pen);animation:kg-breathe 1.2s ease-in-out infinite}
.psteps li.done{color:#1d5434}
.psteps li.done:before{border-color:#1d5434;background:#1d5434}
.pline{height:2px;margin-top:14px;border-radius:2px;background:#ebe3d5;overflow:hidden}
.pline i{display:block;width:34%;height:100%;border-radius:2px;background:var(--pen);animation:kg-flow 1.4s cubic-bezier(.45,.05,.4,.95) infinite;will-change:transform}
@keyframes kg-flow{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(300%,0,0)}}

/* 같이 고치기: 고른 문장 → 다른 표현 */
.selbtn{position:absolute;z-index:8;height:30px;padding:0 12px;border-radius:7px;background:#2a2722;color:#f6f1e6;font-size:12.5px;font-weight:500;
  box-shadow:0 6px 16px rgba(20,14,6,.2);animation:kg-pop .14s var(--ease) both}
.selbtn:hover{background:#1b1a17}
.selpop{position:absolute;z-index:9;width:min(420px,calc(100% - 16px));padding:10px;border-radius:9px;background:var(--paper);
  border:1px solid var(--line);box-shadow:0 14px 34px rgba(30,20,8,.18);animation:kg-pop .16s var(--ease) both}
.sph{display:flex;align-items:baseline;gap:8px;padding:2px 4px 8px}
.sph b{font-size:13.5px;font-weight:600}
.sph .el{flex:1;font-size:12px;color:var(--muted)}
.sph .x{width:24px;height:24px;border-radius:6px;color:var(--muted);font-size:11px}
.sph .x:hover{background:rgba(80,60,30,.08)}
.spl{display:flex;flex-direction:column;gap:2px}
.spl .pline{margin:6px 4px 8px}
.cand{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:6px;font-family:var(--doc);font-size:14.5px;line-height:1.7;color:var(--text)}
.cand:hover{background:rgba(31,58,43,.06)}
.cand s{display:block;text-decoration:none;font-family:var(--ui);font-size:11.5px;color:var(--muted);margin-top:2px}
.cand em{display:block;font-style:normal;font-family:var(--ui);font-size:11.5px;color:#8a4b12}
.cand.keep{font-family:var(--ui);font-size:13px;color:var(--muted);padding:8px 10px}

/* 오른쪽 칸 */
.dz-panel{min-height:0;display:flex;flex-direction:column;background:rgba(246,241,232,.97);border-left:1px solid rgba(120,100,70,.18)}
.ptabs{flex:none;display:flex;gap:4px;padding:10px 12px 0;border-bottom:1px solid var(--rule)}
.ptabs button{position:relative;height:36px;padding:0 12px;font-size:13.5px;color:#6b655a}
.ptabs button.on{color:var(--text);font-weight:600}
.ptabs button.on:after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.pbody{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.pbody.fix{padding:4px 18px 30px}
.psec{padding:16px 0;border-bottom:1px solid var(--rule)}
.psec:last-child{border-bottom:0}
.psec h3{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:600;color:#3b372f;margin:0 0 9px}
.psec h3:not(:first-child){margin-top:18px}
.psec h3 em{font-style:normal;font-weight:400;font-size:12px;color:var(--muted)}
.psec .say{padding:0;font-size:14px;line-height:1.65;color:#2a2722}
.psec .say b{font-weight:600}
.psec .hint,.hint{font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:8px}
.psec.quiet h3{font-weight:500;color:var(--muted)}
.prow2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.lk{font-size:13px;color:var(--accent);text-decoration:underline;text-underline-offset:3px;padding:2px 0}
.lk:hover{color:var(--accent-2)}
.btn.wide{width:100%;justify-content:center;margin-top:12px;height:36px;font-size:13.5px}
.btn:disabled{opacity:.5;cursor:default}
.psec .why-chips button{height:28px;font-size:12.5px;padding:0 10px}
.psec .scale button{height:50px}
.psec .scale b{font-size:14px}
.psec .scale em{font-size:11.5px}
.psec .scale button.rec:after{content:"권함";position:absolute;top:-9px;left:50%;transform:translateX(-50%);height:16px;padding:0 5px;border-radius:999px;
  font-size:10.5px;line-height:16px;background:#e3efe6;color:#1d5434;white-space:nowrap}
.psec .say2{font-size:13px;line-height:1.6;color:#3b372f;margin-top:9px}
.ladder2{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.ladder2 li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.5;color:#a29a8b}
.ladder2 li:before{content:"";position:absolute;left:2px;top:6px;width:7px;height:7px;border-radius:2px;border:1.5px solid #d6cbb7}
.ladder2 li.in{color:#24221d}
.ladder2 li.in:before{background:var(--pen);border-color:var(--pen)}
.psec .figlist{gap:0}
.psec .fp{grid-template-columns:76px 1fr;gap:10px}
.psec .fp figure img{width:76px;max-height:80px}
.psec .pp{grid-template-columns:16px 46px 1fr;gap:8px}
.psec .pp svg.sk,.psec .pp .sk.none{width:46px;height:31px}
.psec .fst{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.psec .thumbs{display:flex;gap:6px;flex-wrap:wrap}
.psec .thumbs img{height:44px;width:auto;border-radius:3px;opacity:.6;animation:kg-breathe 1.6s ease-in-out infinite}
.vlist{display:flex;flex-direction:column;gap:6px}
.vrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;width:100%;padding:10px 12px;border-radius:7px;border:1px solid var(--line);background:var(--paper);text-align:left}
.vrow b{font-size:13.5px;font-weight:600}
.vrow s{flex-basis:100%;text-decoration:none;font-size:12px;color:var(--muted)}
.vrow:hover{border-color:#cdbfa7}
.vrow.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.vrow .tag{height:18px;font-size:11px}
.psec .facts{margin:10px 0 0}
.psec .figfix{margin:10px 0 0}
.psec .figfix .fx{grid-template-columns:64px 46px 1fr;gap:8px}
.psec .figfix .fx img{width:64px}
.psec .figfix .fx svg.sk{width:46px;height:31px}
.pacts{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

/* 오른쪽 칸의 대화 */
.pbody.talk{display:flex;flex-direction:column;overflow:hidden}
.pbody.talk[hidden]{display:none!important}
.tthread{flex:1;min-height:0;overflow:auto;padding:6px 14px 10px;overscroll-behavior:contain}
.thello{padding:24px 6px 10px}
.thello .pen{font-size:26px}
.thello .pen>span{clip-path:none;animation:none}
.thello p:not(.pen){font-size:13px;line-height:1.6;color:#4a463e;margin-top:6px}
.tcol .ask{margin-top:12px;max-width:94%;padding:9px 13px 10px 14px;font-size:14px;line-height:1.65;background:#fffdf8;box-shadow:0 0 0 1px var(--line)}
.tcol .reply.msg{margin-top:10px;box-shadow:0 0 0 1px rgba(120,90,50,.14)}
.tcol .reply.msg .who{padding:10px 14px 0}
.tcol .md{padding:4px 14px 6px;font-size:14px;line-height:1.7}
.tcol .macts{padding:0 8px 6px}
.tcol .merr,.tcol .mstop{margin:0 14px 8px}
.tcompose{flex:none;margin:0 12px 12px;background:var(--paper);border-radius:9px;border-top:1px solid var(--edge);box-shadow:0 0 0 1px rgba(120,90,50,.18)}
.tcompose .att{margin:8px 10px 0}
.tcompose textarea{display:block;width:100%;border:0;outline:0;resize:none;background:none;font:inherit;font-size:14px;line-height:1.6;padding:10px 12px 2px;height:46px;max-height:180px;color:var(--text)}
.tcompose textarea::placeholder{color:var(--faint)}
.tbar{display:flex;align-items:center;gap:4px;padding:2px 8px 8px;position:relative}
.tbar .sp{flex:1}
.tbar .go{height:30px;font-size:13px}
.tcompose.drop{box-shadow:0 0 0 2px var(--accent)}

/* 내보내기 메뉴 */
.xmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:220px;padding:6px;border-radius:9px;background:var(--paper);
  border:1px solid var(--line);box-shadow:0 12px 30px rgba(30,20,8,.16);animation:kg-pop .14s var(--ease) both}
.xmenu p{font-size:12px;color:var(--muted);padding:6px 10px 6px}
.xmenu button{display:block;width:100%;height:34px;padding:0 10px;border-radius:6px;text-align:left;font-size:13.5px}
.xmenu button:hover{background:rgba(80,60,30,.06)}

/* ── 좁은 창(아이패드 세로, 작은 노트북 창): 오른쪽 칸은 종이 아래로 ── */
@media (max-width:1180px){
  .dz{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .dz-panel{border-left:0;border-top:1px solid rgba(120,100,70,.18);max-height:46vh}
  .sh-top{padding:18px 24px 0}
  .sh-body{padding:4px 24px 24px}
  .sh-doc.v .bd{grid-template-columns:1fr}
  .sh-doc.v .mg{display:none}
  .proj{grid-template-columns:1fr}
}
@media (max-width:1000px){
  .dz-stage{padding:0 16px 40px}
  .sheetlist,.proj{width:calc(100% - 32px)}
}
@media (pointer:coarse){
  .ri .rx{opacity:1}
  .macts{opacity:1}
  .dzmode button,.dz-vers button{height:38px}
  .ptabs button{height:42px}
  .cand{padding:12px}
}

/* ── 움직임 다듬기: 칠하기·쓰기를 transform으로만 ─────────────────
   형광펜 칸은 왼쪽에서 오른쪽으로 늘어나고(scaleX), 펜글씨는 종이색 덮개가 오른쪽으로 걷힌다.
   clip-path를 매 장면 다시 칠하던 방식보다 WebKit(맥 앱)에서 훨씬 부드럽다. */
.hllayer{position:absolute;left:0;top:0;pointer-events:none;z-index:0;overflow:visible}
.hl-rect{position:absolute;display:block;border-radius:2px;clip-path:none;transform-origin:0 50%;transform:scaleX(0);
  animation:kg-grow var(--w,.4s) linear both;animation-delay:var(--d,1s)}
.hl-rect.fade{transform:none;opacity:0;animation:kg-fade-in var(--w,.4s) ease both;animation-delay:var(--d,.4s)}
@keyframes kg-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.static .hl-rect{transform:none;opacity:1;animation:none}
.pen>span{clip-path:none;animation:none}
.penbox .pen>span{position:relative}
.penbox .pen>span:after{content:"";position:absolute;left:-3px;right:-8px;top:-7px;bottom:-7px;background:var(--paper);transform-origin:100% 50%;
  animation:kg-uncover var(--w,.8s) linear both;animation-delay:var(--d,1.6s)}
@keyframes kg-uncover{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.static .pen>span:after,.penbox.static .pen>span:after{display:none}
@media (prefers-reduced-motion:reduce){.penbox .pen>span:after{display:none}.hl-rect{transform:none;animation:none}}
html,body{overscroll-behavior:none}

/* ══ 밝은 첫 화면(사용자 시안 11-10): 벽에 병풍이 서 있고, 바닥에 입력창과 이어서 쓸 글 ══
   대화·목록은 밝은 벽색, 파일을 열어 고칠 때만 방(사진) 배경. 병풍이 펴지며 방으로 들어간다. */
:root{--wall:#eff0ec;--floor:#e6e9e3;--edge:#dcdfd7;--ink2:#55574f;--side:#f5f5f1;--frame:#a17c48}
.main{background:var(--wall)}
.main .studio{opacity:0;transition:opacity .9s ease}
.main[data-view=design] .studio,.main.unfolding .studio{opacity:1}
.main.unfolding .studio{transition:opacity 1s ease .15s}
.main:not([data-view=design]) .head{background:none;border-bottom-color:transparent}
.main:not([data-view=design]) .head .crumb{color:#6b6d66}

/* 사이드바: 시안처럼 아이콘과 글줄 */
.side{background:var(--side);border-right:1px solid #e3e4de}
.newchat{gap:12px;font-weight:500;height:38px;padding:0 10px}
.newchat .plus{width:18px;height:18px;background:none;border-radius:0}
.newchat .plus svg{width:15px;height:15px;stroke:var(--text);stroke-width:1.5}
.newchat kbd{display:none}
.newchat:hover,.nav a:hover,.grp a:hover{background:#ebece6}
.nav a{padding:0 10px;gap:12px}
.nav a svg{display:block;width:17px;height:17px;color:#3b3d37;stroke-width:1.4}
.nav a.on,.grp a.on{background:#e6e8e1;font-weight:500}
.nav a.on:before{display:none}
.grp h3{color:#7b7d75}
.ri svg{stroke:#6f716a}
.me{border-top:1px solid #e3e4de}

/* 첫 화면 */
.homev{display:none}
.main.home .homev{display:flex;flex-direction:column;grid-row:2 / span 2;min-height:0;overflow:auto;position:relative;z-index:1}
.main.home .thread{display:none}
.main.home .head{position:relative}
.wrapc{width:min(1080px,calc(100% - 64px));margin:0 auto}
.wall{flex:none;display:flex;align-items:flex-end;min-height:clamp(300px,47vh,560px);padding-top:24px}
.wall .wrapc{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.hl{flex:1;min-width:0;align-self:center;padding:0 0 24px}
.pen.big{font-family:var(--pen-font);font-weight:400;font-size:clamp(58px,6.2vw,92px);line-height:1;color:#1b1a17;letter-spacing:0}
.pen.big>span{display:block}
.hl .sub{font-size:clamp(16px,1.35vw,19px);line-height:1.75;color:var(--ink2);margin-top:22px}
.byeong{flex:none;display:flex;gap:5px;height:clamp(250px,40vh,400px)}
.byeong i{display:block;height:100%;aspect-ratio:.39;background:center/cover no-repeat;border:3px solid var(--frame);border-bottom-width:4px;border-radius:1px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 14px -10px rgba(40,30,10,.35)}
.floor{flex:1 0 auto;background:var(--floor);border-top:1px solid var(--edge);padding:44px 0 56px}
.cslot .compose{padding:0}
.cslot .box{width:100%}
.mhint{font-size:13.5px;line-height:1.6;color:#6b6d66;margin:14px 2px 0}

/* 입력창: 시안의 흰 카드 */
.box{background:#fdfdfb;border:1px solid var(--edge);border-radius:12px;box-shadow:0 1px 2px rgba(30,35,25,.04),0 8px 24px -12px rgba(30,35,25,.12)}
.box:after{display:none}
.box .in{padding:16px 18px 4px}
.box textarea{font-size:16px;line-height:1.65}
.box textarea::placeholder{color:#6f716a}
.main.home .box textarea{min-height:96px}
.bar{gap:8px;padding:6px 12px 12px}
.bar .sq svg{width:18px;height:18px;stroke-width:1.5}
.kindsel{position:relative;display:inline-flex;align-items:center}
.kindsel select{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;font-size:14.5px;font-weight:500;color:var(--text);height:34px;padding:0 24px 0 10px;border-radius:7px;cursor:pointer}
.kindsel select:hover{background:#eff0ec}
.kindsel svg{position:absolute;right:8px;top:12px;width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.6;pointer-events:none}
.mdl{font-size:14.5px;height:34px;padding:0 10px;gap:8px}
.mdl .p{color:var(--text)}
.mdl:hover{background:#eff0ec}
.fmode{display:inline-flex;background:#eceee8;border-radius:9px;padding:3px}
.fmode button{height:32px;padding:0 14px;border-radius:7px;font-size:14px;color:#5d5f58;transition:background-color .15s,color .15s}
.fmode button[aria-checked=true]{background:#fff;color:var(--text);font-weight:500;box-shadow:0 0 0 1px var(--edge)}
.go{height:38px;padding:0 14px 0 16px;border-radius:8px;background:#e3e6df;color:#4a4b45;font-size:14.5px;transition:background-color .15s,color .15s}
.go kbd{color:#7b7d75}
.go:hover{background:#d9ddd5}
.go.ready{background:var(--accent);color:#fbf8f1}
.go.ready kbd{color:rgba(251,248,241,.6)}
.go.ready:hover{background:var(--accent-2)}
.go.stop{background:#3b372f;color:#fbf8f1}
.compose{padding:6px 24px 18px}
.compose .box{width:min(860px,100%)}
.att{margin:12px 14px 0}

/* 대화(밝은 벽 위) */
.ask{background:#fdfdfb;border-right-color:#2b2d27;box-shadow:0 0 0 1px var(--edge)}
.reply.msg{box-shadow:0 0 0 1px var(--edge),0 2px 6px -3px rgba(30,35,25,.1);border-radius:10px;background:#fdfdfb}

/* 바닥: 이어서 쓰기, 최근 대화, 프로젝트(처음이면 세 가지 쓰는 법) */
.hmore{margin-top:34px;display:flex;flex-direction:column;gap:30px}
.hsec .hh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.hsec h3{font-size:14px;font-weight:600;color:#2b2d27}
.hsec .hh a{font-size:13px;color:#5d5f58;text-underline-offset:3px}
.dgrid.mini{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0}
.dgrid.mini .dpage{aspect-ratio:210/170;padding:14px 14px}
.hsec .plist{margin:0;border-top:1px solid var(--edge)}
.hsec .prow{border-bottom-color:var(--edge)}
.hsec .prow:hover{background:rgba(255,255,255,.45)}
.pchips{display:flex;flex-wrap:wrap;gap:8px}
.pchips a{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 11px;border-radius:8px;background:#f5f6f2;border:1px solid var(--edge);font-size:13.5px;color:var(--text);text-decoration:none}
.pchips a:hover{background:#fff}
.pchips svg{width:15px;height:15px;stroke:#6b6d66;fill:none;stroke-width:1.4}
.hsec.first{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 28px;padding-top:6px;border-top:1px solid var(--edge)}
.fcol{padding-top:16px}
.fcol h3{font-size:14.5px;margin-bottom:6px}
.fcol p{font-size:13.5px;line-height:1.7;color:#55574f}
.fbtn{grid-column:1 / -1;display:flex;gap:8px}

/* 병풍이 펴지는 동안 */
.unfoldov{position:fixed;inset:0;z-index:90;pointer-events:none}
.unfoldov i{position:fixed;display:block;background:center/cover no-repeat;transform-origin:0 0;will-change:transform;border:3px solid var(--frame);border-radius:1px}
.main.unfolding .homev{opacity:0;transition:opacity .35s ease}
.main.roomlit .vw .dz{animation:kg-vin .5s var(--ease) .05s both}

/* 목록·프로젝트: 밝은 벽 위의 종이 */
.sheetlist,.pmain,.pcard{box-shadow:0 0 0 1px var(--edge),0 2px 8px -4px rgba(30,35,25,.12)}

@media (max-width:1180px){
  .wall .wrapc{gap:28px}
  .byeong{height:clamp(220px,34vh,340px)}
  .dgrid.mini{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dgrid.mini .dcard:nth-child(4){display:none}
  .hsec.first{grid-template-columns:1fr}
}
@media (max-width:860px){
  .byeong{display:none}
  .fmode button{padding:0 10px}
}

/* 같이 고치기: 원래 말에 펜으로 줄, 그 위에 손글씨로 고칠 말. 누르면 받아들인다 */
.doc .sug{position:relative;display:inline;cursor:pointer;border-radius:2px}
.doc .sug s{text-decoration:line-through;text-decoration-color:#c4402f;text-decoration-thickness:1.6px;color:#5a554b}
.doc .sug em{position:absolute;left:0;bottom:calc(100% - 9px);white-space:nowrap;font-style:normal;font-family:var(--pen-font);font-size:19px;line-height:1;color:#c4402f;pointer-events:none}
.doc .sug.add{display:inline-block;width:.6em;height:1em;vertical-align:-.1em}
.doc .sug.add i{position:absolute;left:50%;bottom:-3px;width:7px;height:7px;border-left:1.6px solid #c4402f;border-top:1.6px solid #c4402f;transform:translateX(-50%) rotate(45deg)}
.doc .sug:hover{background:rgba(196,64,47,.07)}
.sh-doc.v .txt{line-height:2.45}
.pacts.left{justify-content:flex-start;gap:16px;margin-top:8px}
.pacts.two{margin-top:12px}
.pacts.two .btn{flex:1;justify-content:center;height:36px}
.doc.hidechg .sug s{text-decoration:none}
.doc.hidechg .sug em{display:none}
.cslot .compose .box{width:100%}
.newchat{justify-content:flex-start}
.main .studio{transition:opacity .3s ease}
.main[data-view=design] .studio{transition:opacity .6s ease}
.dz-bar{margin-left:auto;margin-right:auto}
.dz-bar:before{content:"";position:absolute;inset:0 -28px;z-index:-1;background:rgba(243,238,229,.0)}

@media (pointer:coarse){
  .kindsel select,.mdl{height:40px}
  .fmode button{height:38px}
  .go{height:42px}
  .bar .sq{width:40px;height:40px}
}

/* 첫 화면 문구: 이름 한 줄, 그 아래 캐치프레이즈 두 줄 */
.pen.kicker{font-family:var(--pen-font);font-size:clamp(28px,2.6vw,38px);line-height:1;color:var(--pen);margin:0 0 14px}
.pen.kicker>span{display:block}
.pen.big{font-size:clamp(50px,5.4vw,82px);line-height:1.08}
.pen.big>span+span{margin-top:2px}

/* 메뉴·화면 글씨: 원티드 산스(가변). 글자 폭이 고르고 획 끝이 단정해 메뉴가 차분하고 단단해 보인다.
   문서 본문(명조)과 킨더가든의 손(펜글씨)은 그대로 */
:root{--ui:"Wanted Sans Variable","Wanted Sans","Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif}
body{letter-spacing:-.008em;font-feature-settings:"ss01" 0}
.side{font-size:14.5px}
.newchat{font-weight:600;letter-spacing:-.012em}
.nav a,.grp a{font-weight:450;letter-spacing:-.01em;color:#2f312b}
.nav a.on,.grp a.on{font-weight:600}
.grp h3{font-weight:500;letter-spacing:.01em}
.head h1{font-weight:650;letter-spacing:-.015em}
.head .crumb{font-weight:450}
.me b{font-weight:600}
.kindsel select,.mdl,.fmode button,.go{font-weight:550;letter-spacing:-.01em}
.mdl .p{font-weight:450;color:#4a4b45}
.fmode button[aria-checked=true]{font-weight:650}
.hl .sub{font-weight:450;letter-spacing:-.012em}
.ptabs button,.dzmode button,.dz-vers button{letter-spacing:-.01em}
.ptabs button.on{font-weight:650}

/* 첫 화면 문구(사용자 선택 '나'): 명조 고운바탕 굵게. 이름 줄은 같은 명조로 작게, 초록 */
.pen.kicker{font-family:"Gowun Batang",var(--doc);font-weight:700;font-size:clamp(21px,1.8vw,26px);line-height:1.2;letter-spacing:.005em;color:var(--pen);margin:0 0 16px}
.pen.big{font-family:"Gowun Batang",var(--doc);font-weight:700;font-size:clamp(44px,4.7vw,70px);line-height:1.22;letter-spacing:-.035em;color:#1b1a17}
.pen.big>span+span{margin-top:0}

/* ══ 11-10: 로고, 사이드바 도구, 더 살아 있는 대화 ══════════════════ */
/* 로고: 사이드바에서 이름이 읽히게 */
.ws{padding:0 4px 20px 6px}
.ws img{height:30px;width:auto}
.ws .tg{flex:none}

/* 메뉴: 찾기(⌘K)와 파일 열기, 갯수 */
.nav a kbd{margin-left:auto;font:inherit;font-size:11.5px;color:#6b675e;letter-spacing:.02em}
.nav a em{margin-left:auto;font-style:normal;font-size:12px;color:#6b675e;font-variant-numeric:tabular-nums}
.nav a svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* 최근: 고정, 오늘, 어제… 묶음과 고정·이름 바꾸기 */
.recent{margin-top:18px}
.rl h3{font-size:12px;font-weight:500;color:#6f716a;padding:14px 10px 6px;margin:0}
.rl h3:first-child{padding-top:2px}
.ri .rp{width:24px;height:24px;flex:none;border-radius:6px;display:grid;place-items:center;opacity:0;color:#736d62}
.ri:hover .rp,.ri .rp:focus-visible,.ri.pin .rp{opacity:1}
.ri.pin .rp{color:var(--pen)}
.ri:not(:hover) .rp{width:0;overflow:hidden}
.ri.pin:not(:hover) .rp{width:24px}
.ri .rp svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ri.pin .rp svg{fill:rgba(30,107,67,.16)}
.ri .rp:hover{background:rgba(80,60,30,.09);color:var(--text)}
.ri .rin{flex:1;min-width:0;height:26px;padding:0 6px;border:1px solid var(--accent);border-radius:5px;background:#fff;font:inherit;font-size:13.5px;color:var(--text);outline:none}

/* 찾기 */
.kfind{position:fixed;inset:0;z-index:120;display:flex;justify-content:center;align-items:flex-start;padding:12vh 20px 20px;background:rgba(30,32,26,.26);animation:kg-fade .14s ease both}
@keyframes kg-fade{from{opacity:0}}
.kf-card{width:min(640px,100%);max-height:70vh;display:flex;flex-direction:column;border-radius:12px;background:#fdfdfb;box-shadow:0 0 0 1px var(--edge),0 24px 60px -18px rgba(30,35,25,.35);overflow:hidden}
.kf-in{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--edge)}
.kf-in svg{width:17px;height:17px;flex:none;fill:none;stroke:#6b6d66;stroke-width:1.5;stroke-linecap:round}
.kf-in input{flex:1;height:54px;border:0;background:none;font:inherit;font-size:16.5px;color:var(--text);outline:none}
.kf-in input::-webkit-search-cancel-button{display:none}
.kf-in kbd{font:inherit;font-size:11.5px;color:#6f716a;border:1px solid var(--edge);border-radius:5px;padding:1px 6px}
.kf-list{overflow:auto;padding:6px}
.kf-list h4{font-size:12px;font-weight:500;color:#6f716a;padding:8px 10px 4px}
.kf-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--text)}
.kf-row>svg{width:16px;height:16px;flex:none;fill:none;stroke:#6b6d66;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.kf-row>div{flex:1;min-width:0}
.kf-row b{display:block;font-weight:500;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-row s{display:block;text-decoration:none;font-size:12.5px;color:#6b6d66;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-row>span{flex:none;font-size:12px;color:#6f716a;text-align:right;display:flex;flex-direction:column;gap:2px}
.kf-row>span i{font-style:normal}
.kf-row.on{background:#eef0ea}
.kf-row mark{background:#f6e3a8;color:inherit;border-radius:2px;padding:0 1px}
.kf-none{padding:22px 12px;font-size:14px;color:#6b6d66}
.kf-foot{padding:9px 16px;border-top:1px solid var(--edge);font-size:12px;color:#6f716a}

/* 대화: 답은 위에 꽃살 띠를 두른 종이 한 폭 */
.reply.msg{position:relative;overflow:hidden}
.reply.msg:before{display:block;content:"";position:absolute;left:0;right:0;top:0;height:6px;background:url(bg/lattice-band.jpg) center/auto 100% repeat-x;opacity:.9}
.reply.msg .who{padding-top:17px;gap:8px}
.reply.msg .who .mt{margin-left:auto;font-size:12px;color:#6b675e;font-variant-numeric:tabular-nums}
.md h1,.md h2,.md h3{font-family:"Noto Serif KR",serif;font-weight:600;letter-spacing:-.01em}
.md h1,.md h2{font-size:18px;margin-top:18px;line-height:1.5}
.md>h1:first-child,.md>h2:first-child,.md>h3:first-child{margin-top:4px}
.md strong,.md b{font-weight:650;color:#141410}
.md blockquote{border-left:1px solid #b9beb2;background:#f6f7f3;padding:8px 12px;border-radius:0 6px 6px 0}
/* 생각하는 동안: 펜글씨 한 줄과 펜이 긋는 선, 지난 초 */
.mthink{display:flex;align-items:center;gap:12px;padding:8px 22px 14px}
.mthink .pen{font-size:24px;margin:0}
.mthink .nibline{width:92px;height:10px;flex:none}
.mthink .nibline path{fill:none;stroke:var(--pen);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:150;stroke-dashoffset:150;animation:kg-ink 1.8s cubic-bezier(.55,.1,.35,1) infinite}
@keyframes kg-ink{0%{stroke-dashoffset:150;opacity:1}60%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.mthink .sec{font-style:normal;font-size:12.5px;color:#6b675e;font-variant-numeric:tabular-nums}
.reply.msg.working:not(.streaming) .md{display:none}
/* 쓰는 중: 마지막 글자 뒤에 잉크 커서 */
.reply.msg.streaming .md>:last-child:after,.reply.msg.streaming .md:empty:after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.15em;background:var(--pen);border-radius:1px;animation:kg-caret 1s steps(2,start) infinite}
.reply.msg.streaming .md>ul:last-child:after,.reply.msg.streaming .md>ol:last-child:after,.reply.msg.streaming .md>pre:last-child:after,.reply.msg.streaming .md>.tw:last-child:after{display:none}
@keyframes kg-caret{to{visibility:hidden}}
/* 이어 묻기 */
.mnext{display:flex;flex-wrap:wrap;gap:6px;padding:4px 22px 16px;border-top:1px dashed var(--edge);margin:2px 0 0;padding-top:12px}
.mnext button{height:30px;padding:0 12px;border-radius:15px;border:1px solid var(--edge);background:#f7f8f4;font-size:13px;color:#3b3d37;transition:background-color .15s,border-color .15s}
.mnext button:hover{background:#fff;border-color:#c8ccc2;color:var(--text)}
.mnext button:before{content:"↳ ";color:#6b675e}
/* 내 말 고쳐 묻기 */
.ask{position:relative}
.ask .aedit{position:absolute;left:-78px;top:50%;transform:translateY(-50%);height:26px;padding:0 9px;border-radius:6px;font-size:12px;color:#6b655a;opacity:0;transition:opacity .15s;white-space:nowrap}
.ask:hover .aedit,.ask .aedit:focus-visible{opacity:1}
.ask .aedit:hover{background:rgba(80,60,30,.07);color:var(--text)}
.ask.editing .atx,.ask.editing .aedit{display:none}
.aed textarea{display:block;width:min(560px,70vw);min-height:48px;max-height:220px;resize:vertical;border:1px solid var(--edge);border-radius:6px;padding:8px 10px;font:inherit;font-size:15px;line-height:1.6;background:#fff;color:var(--text);outline:none}
.aed textarea:focus{border-color:var(--accent)}
.aed>div{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}
.aed button{height:30px;padding:0 12px;border-radius:6px;font-size:13px}
.aed .no{color:#6b655a}.aed .no:hover{background:rgba(80,60,30,.07)}
.aed .ok{background:var(--accent);color:#fbf8f1}.aed .ok:hover{background:var(--accent-2)}
/* 맨 아래로 */
.tojump{position:sticky;bottom:14px;left:50%;display:flex;align-items:center;gap:7px;width:max-content;margin:-46px auto 0;height:34px;padding:0 14px 0 11px;border-radius:17px;background:#2b2d27;color:#f4f2ea;font-size:13px;box-shadow:0 6px 18px -6px rgba(20,22,16,.4);z-index:5}
.tojump[hidden]{display:none}
.tojump svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* 첫 화면: 글 종류에 맞는 첫마디 */
.starters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.starters button{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:8px;border:1px solid var(--edge);background:#f5f6f2;font-size:13.5px;color:#2f312b;transition:background-color .15s,border-color .15s}
.starters button:hover{background:#fff;border-color:#c8ccc2}
.starters button span:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pen);margin:0 8px 2px 0;vertical-align:middle;opacity:.75}
@media (max-width:860px){.ask .aedit{position:static;transform:none;opacity:1;margin-top:6px}}
@media (prefers-reduced-motion:reduce){.mthink .nibline path{animation:none;stroke-dashoffset:0}.reply.msg.streaming .md>:last-child:after{animation:none}.kfind{animation:none}}

/* ══ 11-10 정리: 'AI가 만든 화면' 같은 장식을 걷어 낸다 ══════════════════
   꽃살 띠·두꺼운 옆선·떠 있는 큰 그림자·점 달린 칩·화살표 글자·제목 위 작은 이름표를 없애고,
   종이와 입력창은 가는 선 한 줄로 경계만 둔다. 고치는 곳(펜·형광펜)에만 색을 쓴다. */
.reply:before,.reply:after,.reply.msg:before,.sheet:before,.sheet:after,.box:after{display:none}
.reply.msg .who{padding-top:14px}
.sheet{box-shadow:0 0 0 1px var(--edge),0 1px 2px rgba(30,35,25,.05)}
.sheet .sh-top{padding-top:28px}
.box{border-top:0;border-radius:12px;box-shadow:0 0 0 1px var(--edge),0 1px 2px rgba(30,35,25,.05)}
.box:focus-within{box-shadow:0 0 0 1px #b9beb2,0 1px 2px rgba(30,35,25,.05)}
.pstart,.tcompose{border-top:1px solid var(--edge)}
.tcompose{box-shadow:0 0 0 1px var(--edge)}
.reply.msg{box-shadow:0 0 0 1px var(--edge);border-radius:10px}
.sheetlist,.pmain,.pcard{box-shadow:0 0 0 1px var(--edge)}
/* 내 말: 옆 세로줄 없이, 바닥색 한 단계 진한 면 */
.ask{border-right:0;background:#e4e7e0;box-shadow:none;border-radius:12px 12px 4px 12px;-webkit-backdrop-filter:none;backdrop-filter:none}
.tcol .ask{background:#e9ebe5;box-shadow:none}
.md blockquote{border-left:1px solid #b9beb2;background:none;border-radius:0;padding:2px 0 2px 14px;color:#4a4b45}
/* 이어 묻기·시작 예시: 점과 화살표 글자 없이 글만 */
.mnext{border-top:1px solid var(--edge)}
.mnext button:before,.starters button span:before{content:none;display:none}
.mnext button,.starters button{background:none;border-radius:999px}
.mnext button:hover,.starters button:hover{background:#fff}
/* 제목 위 'kindergarden' 이름표는 왼쪽 위 로고와 겹치는 말이라 뺀다(프로젝트 이름은 위 경로에 이미 있다) */
.pen.kicker{display:none}
/* 처음 쓰는 사람에게 보이는 세 칸 설명: 같은 모양 세 칸 대신 줄 단위 표 */
.hsec.first{display:block;padding-top:0}
.hsec.first .fcol{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;padding:14px 0;border-bottom:1px solid var(--edge)}
.hsec.first .fcol h3{margin:0}
.hsec.first .fbtn{margin-top:18px}
/* 고치는 화면 뒤 병풍 방 배경은 사용자 디자인이라 그대로 둔다 */

/* 좁은 화면: 입력창 단추가 세로로 한 글자씩 꺾이던 것, 제목이 사이드바 단추에 가리던 것 */
.fmode button,.go,.mdl,.head .r button,.head .r a{white-space:nowrap}
@media (max-width:860px){
  .head{padding-left:62px}
  .head .engine{display:none}
  .bar{flex-wrap:wrap;row-gap:8px}
  .bar .sp{display:none}
  .bar .fmode{order:5;margin-left:0}
  .bar .go{order:6;margin-left:auto}
  .col{min-width:0}
  .reply.msg,.md{min-width:0;max-width:100%}
  .md pre,.md .tw{max-width:100%}
  .hsec.first .fcol{grid-template-columns:1fr;gap:4px}
}
/* 첫 화면 제목: 낱자로 꺾이지 않게 줄마다 한 덩어리, 크기는 칸 너비를 따른다 */
.wall .hl{container-type:inline-size;min-width:0;flex:1}
.pen.big{font-size:clamp(34px,14.5cqi,70px);word-break:keep-all}
.pen.big>span{display:block;white-space:nowrap}
/* 찾기 창: 좁은 화면에서 오른쪽 꼬리말이 넓어 창 전체가 옆으로 밀리던 것 */
.kf-list{overflow-x:hidden}
.kf-in input{min-width:0;width:100%}
.kf-row>span{max-width:40%;min-width:0}
.kf-row>span i{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.byeong{height:clamp(200px,min(40vh,24vw),400px)}
.wall .wrapc{gap:clamp(24px,3.4vw,48px)}
/* 한글 문장은 낱자가 아니라 어절 단위로 줄을 바꾼다(긴 주소·영문은 넘치지 않게 끊는다) */
body{word-break:keep-all;overflow-wrap:break-word}
.md pre,.md code{word-break:normal}