/* 명령어 화면 공통 CSS — 이용자 채팅(index.html)과 제작 스튜디오 미리보기(studio.html)가 같은 규칙을 쓴다.
   렌더러: prototype/command-render.js · 기존 app.css(.phone·.noti·.board·.kakao·.innercard·.gaugecard)와 v2-panels.css(.command-paper)에서 옮겨 왔다. */
.phone{border-radius:26px;overflow:hidden;position:relative;height:486px;border:4px solid #26232F;margin:0 18px;background:#000}
.phone>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(10px) brightness(.45);transform:scale(1.2)}
.phone .ls{position:relative;z-index:1;padding:22px 12px 12px;height:100%;display:flex;flex-direction:column}
.phone .clock{text-align:center;font-size:46px;font-weight:300;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.phone .date{text-align:center;font-size:13px;color:#ddd;margin:4px 0 14px}
.noti{background:rgba(40,38,50,.72);backdrop-filter:blur(14px);border-radius:14px;padding:8px 10px;margin-bottom:6px;display:flex;gap:8px;align-items:flex-start;font-size:12px}
.noti .ic{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:14px;flex:none}
.noti .nb{flex:1;min-width:0}
.noti .nb .a{display:flex;justify-content:space-between;color:#bbb;font-size:10.5px}
.noti .nb b{font-size:12.5px;display:block}
.noti .nb p{color:#e6e6e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board{border-radius:16px;background:#FAFAFC;color:#1b1b22;overflow:hidden}
.board .bh{background:#C62E3A;color:#fff;padding:10px 14px;font-size:13px;font-weight:800;display:flex;justify-content:space-between}
.board .bh span{font-weight:500;opacity:.85;font-size:11.5px}
.board .post{padding:12px 14px;border-bottom:1px solid #eee}
.board .post .an{display:flex;gap:6px;align-items:center;font-size:12px;color:#666}
.board .post .an i{width:22px;height:22px;border-radius:6px;background:#ddd;display:inline-block}
.board .post h5{font-size:15px;margin-top:8px}
.board .post p{font-size:13.5px;color:#333;margin-top:4px;line-height:1.55}
.board .post .st{font-size:11.5px;color:#999;margin-top:8px;display:flex;gap:10px}
.board .post .st .l{color:#C62E3A}
.board .bc{padding:10px 14px;border-bottom:1px solid #f0f0f0;font-size:13px}
.board .bc .n{font-weight:700;font-size:12px;display:flex;justify-content:space-between}
.board .bc .n span{color:#C62E3A;font-weight:600}
.board .bc p{color:#333;margin-top:2px}
.board .bc.writer .n b{color:#2A62D8}
.kakao{border-radius:16px;overflow:hidden;background:#3B4A5E}
.kakao .kh{background:#34435A;padding:10px 14px;font-size:13.5px;font-weight:700;display:flex;justify-content:space-between}
.kakao .kh span{opacity:.7;font-weight:500}
.kakao .kb{padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.kakao .km{display:flex;gap:7px;align-items:flex-start;max-width:86%}
.kakao .km .ka{width:28px;height:28px;border-radius:10px;background:#8FA3BF;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;color:#1d2533}
.kakao .km .kn{font-size:11px;color:#dfe6ef;margin-bottom:2px}
.kakao .km .kt{background:#fff;color:#111;padding:6px 10px;border-radius:4px 12px 12px 12px;font-size:13px}
.kakao .km.me{align-self:flex-end}
.kakao .km.me .kt{background:#FFE14D;border-radius:12px 4px 12px 12px}
/* 보라-분홍 그라데이션을 꽉 채우면 어느 서비스에나 있는 'AI 패널'로 보인다 —
   위쪽에만 옅게 걸고 바탕은 채팅 배경에 가깝게 둔다 */
.innercard{border-radius:16px;padding:16px;background:linear-gradient(180deg,rgba(123,92,255,.16),rgba(123,92,255,.05) 38%,rgba(26,24,38,.9));border:1px solid rgba(169,139,255,.3);position:relative;overflow:hidden}
.innercard .h{font-size:12px;color:#D9CCFF;font-weight:700;display:flex;gap:6px;align-items:center}
.innercard p{font-size:14.5px;line-height:1.7;margin-top:8px;font-style:italic;color:#F3EEFF}
.gaugecard{border-radius:16px;padding:16px;background:var(--surface);border:1px solid var(--line2)}
.gaugecard .big{display:flex;align-items:baseline;gap:8px}
.gaugecard .big b{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums}
.gaugecard .gb{height:10px;border-radius:5px;background:#2A2737;margin-top:10px;position:relative;overflow:visible}
.gaugecard .gb i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#8E8AA3,#CFCBE0,#5CC8D8,#FF8FAB,#FFB86B)}
.gaugecard .ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--t3);margin-top:6px}
.gaugecard .nx{font-size:13px;color:var(--t2);margin-top:10px}
.command-paper{background:var(--bg2,#191722);border:1px solid var(--line);border-radius:12px;padding:20px;max-width:100%;overflow-wrap:anywhere}.command-paper>header{font-weight:700;border-bottom:1px solid var(--line);padding:0 0 12px}.command-paper article{padding:12px 0;border-bottom:1px solid var(--line)}.command-paper article:last-child{border-bottom:0}.command-paper h4{margin:6px 0}.command-paper p{white-space:pre-wrap;line-height:1.7}.command-paper small{color:var(--t3)}

/* 속마음 4층 — 겉으로는(인용) / 속으로는 / 들키고 싶지 않은 것 / 지금 바라는 것
   네 층을 같은 무게로 쌓으면 마음이 아니라 서식처럼 읽힌다. 실제 상위작의 속마음은
   짧은 한 줄 독백이다(벤치마크 13건, 중앙 19자 · 85%가 40자 이하).
   그래서 독백(속으로는)을 본문으로 세우고, 나머지 셋은 그 둘레로 내린다.
   층 이름은 생성 스키마 그대로라 앞의 둘은 읽어 주기용으로만 남기고 화면에서는 뺀다. */
.innercard .inner-layers{margin:12px 0 4px;display:grid;gap:0}
.innercard .inner-layers .layer{margin:0}
.innercard .inner-layers dt{font-size:11px;font-weight:700;color:#C4A7FF;letter-spacing:.02em}
.innercard .inner-layers dd{margin:3px 0 0;font-size:14px;line-height:1.65;color:#F3EEFF;overflow-wrap:anywhere}

/* 겉으로는 — 방금 실제로 한 말. 라벨 없이 인용으로 얹는다 */
.innercard .inner-layers .l0 dt,
.innercard .inner-layers .l1 dt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.innercard .inner-layers .l0 dd{margin:0;font-size:13px;line-height:1.6;color:#B9AEDA}
.innercard .inner-layers .l0 dd:before{content:"“"}
.innercard .inner-layers .l0 dd:after{content:"”"}

/* 속으로는 — 이 카드의 본문. 왼쪽 선으로 독백임을 표시한다 */
.innercard .inner-layers .l1 dd{margin:12px 0 0;padding-left:12px;border-left:2px solid rgba(196,167,255,.5);
  font-size:15.5px;line-height:1.75;color:#F6F2FF;font-style:italic;text-wrap:pretty}

/* 들키고 싶지 않은 것 · 지금 바라는 것 — 본문 아래 낮은 단으로 내린다.
   문구는 원문 그대로 두고 크기·색으로만 낮춘다(CSS 로 글자를 갈아끼우면 원문이 가려진다). */
.innercard .inner-layers .l2{margin-top:14px;padding-top:12px;border-top:1px solid rgba(169,139,255,.22)}
.innercard .inner-layers .l3{margin-top:10px}
.innercard .inner-layers .l2 dt{font-size:10.5px;font-weight:600;color:#9A8FC0;letter-spacing:.02em}
.innercard .inner-layers .l3 dt{font-size:10.5px;font-weight:600;color:#C9A57A;letter-spacing:.02em}
.innercard .inner-layers .l2 dd{font-size:13.5px;line-height:1.65;color:#D7CEF0}
.innercard .inner-layers .l3 dd{font-size:13.5px;line-height:1.65;color:#FFE1B8}