/* ─────────────────────────────────────────────────────────────
   플레이 가이드 — 화면 스타일
   색과 글자 크기는 전부 CSS 변수(디자인 토큰)입니다.
   app.js 의 THEME_TOKENS / TEXT_TOKENS 가 이 변수들을 덮어씁니다.
   ───────────────────────────────────────────────────────────── */
:root{
  --stage:#141414;
  --bg:#252525;            /* 페이지 배경 */
  --card:#E9E9E9;          /* 카드 헤더(밝은 면) */
  --card-hover:#DEDEDE;
  --card-ink:#252525;      /* 카드 헤더 글자 */
  --body:#535353;          /* 펼쳐진 카드 내부 */
  --body-ink:#FFFFFF;
  --cell:#323232;          /* 셀 */
  --cell-ink:#FFFFFF;      /* 셀 글자 */
  --cell-line:#3E3E3E;     /* 셀 디바이더 */
  --caret:#5A5A5A;         /* 카드 화살표 */
  --chip:#3B3B3B;
  --chip-ink:#C6C6C6;
  --chip-on:#D9D9D9;
  --chip-on-ink:#252525;
  --tab:#6E6E6E;
  --tab-on:#E9E9E9;
  --bar:#1B1B1B;
  --line:#3E3E3E;
  --muted:#8D8D8D;
  --accent:#F1801F;
  --danger:#E05A4E;

  --fs-tab:16px;
  --fs-chip:14px;
  --fs-card-title:16px;
  --fs-body:15px;
  --fs-cell-title:15px;
  --fs-cell-body:14.5px;
  --ico-scale:1;

  --r:10px;
  --gutter:10px;
  --ease:cubic-bezier(.22,.68,.28,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--stage);color:var(--body-ink);margin:0;
  /* 도현체는 한글·라틴만 담고 있어, 그 외 문자는 기기 기본 서체로 떨어집니다 */
  font-family:'Do Hyeon','Apple SD Gothic Neo','Malgun Gothic',
              'Noto Sans JP','Noto Sans SC','Noto Sans TC','Noto Sans Thai',
              'Hiragino Sans','Microsoft YaHei','PingFang TC',sans-serif;
  -webkit-text-size-adjust:100%;}
button{font-family:inherit;color:inherit}
img{max-width:100%;display:block}

/* ---------- shell ---------- */
.stage{min-height:100vh;display:flex;justify-content:center;background:var(--stage)}
.phone{width:100%;max-width:430px;background:var(--bg);min-height:100vh;overflow:hidden;
  box-shadow:0 0 0 1px #000, 0 20px 60px rgba(0,0,0,.6);position:relative}

/* ---------- edit bar ---------- */
.editbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;
  padding:8px var(--gutter);background:var(--bar);border-bottom:1px solid #2F2F2F;
  overflow-x:auto;scrollbar-width:none}
.editbar::-webkit-scrollbar{display:none}
.editbar .spacer{flex:1}
.btn{border:1px solid #4A4A4A;background:#333;color:#EDEDED;flex:0 0 auto;
  border-radius:8px;padding:6px 11px;font-size:13px;cursor:pointer;line-height:1.4;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease)}
.btn:hover{background:#3F3F3F;border-color:#6E6E6E}
.btn:active{transform:scale(.95)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.on{background:var(--accent);border-color:var(--accent);color:#160D05}
.btn.ghost{background:transparent}
.btn.sm{padding:3px 8px;font-size:12px}
.btn.icon{padding:3px 7px;font-size:12px;min-width:26px}
.btn.danger:hover{background:#472220;border-color:var(--danger);color:#FFD9D5}
.btn.solid-danger{background:#8A2E26;border-color:#A8392F;color:#FFE4E0}
.btn.solid-danger:hover{background:#9C342B;border-color:#C24638}
.card-head .btn{background:#D2D2D2;border-color:#B4B4B4;color:#252525}
.card-head .btn:hover{background:#C4C4C4}
.hint{font-size:12px;color:var(--muted);flex:0 0 auto}
.lang-select{flex:0 0 auto;background:#333;color:#EDEDED;border:1px solid #4A4A4A;
  border-radius:8px;padding:6px 8px;font-size:12px;font-family:inherit;cursor:pointer}

/* ---------- header ---------- */
.hero{position:relative;background:#0B0C0E;min-height:60px}
.hero img{width:100%;height:auto}

/* ---------- menu tabs ---------- */
.tabs{position:relative;display:flex;align-items:stretch;gap:0;background:var(--bg);
  padding:0 4px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:0 0 auto;background:none;border:0;cursor:pointer;
  padding:13px 13px 15px;font-size:var(--fs-tab);color:var(--tab);white-space:nowrap;
  display:flex;align-items:center;gap:6px;
  transition:color .3s var(--ease),transform .14s var(--ease)}
.tab:hover{color:#9C9C9C}
.tab:active{transform:scale(.96)}
.tab[aria-selected="true"]{color:var(--tab-on)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.ink{position:absolute;left:0;bottom:9px;height:2px;width:0;border-radius:2px;
  background:var(--tab-on);pointer-events:none;
  transition:transform .38s var(--ease),width .38s var(--ease),opacity .2s linear}
.tabs.no-anim .ink{transition:none}

/* ---------- panel ---------- */
.panel{will-change:transform;touch-action:pan-y}
.panel.dragging{transition:none}
@keyframes slideR{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideL{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
.slide-r{animation:slideR .34s var(--ease) both}
.slide-l{animation:slideL .34s var(--ease) both}

/* ---------- category chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;padding:22px var(--gutter) 0}
.chip{border:0;background:var(--chip);color:var(--chip-ink);
  border-radius:999px;padding:5px 15px;min-height:30px;font-size:var(--fs-chip);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:background-color .28s var(--ease),color .28s var(--ease),transform .14s var(--ease)}
.chip:hover{background:#464646}
.chip:active{transform:scale(.94)}
.chip[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-ink)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip.pending{opacity:.55}

/* ---------- cards ---------- */
.cards{display:flex;flex-direction:column;gap:6px;padding:18px var(--gutter) 64px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cards.stagger>*{animation:rise .34s var(--ease) both;animation-delay:calc(var(--i,0)*38ms)}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;
  transition:background-color .25s var(--ease)}
.card:hover{background:var(--card-hover)}
.card-head{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
  padding:11px 15px;background:none;border:0;cursor:pointer;text-align:left;
  transition:transform .14s var(--ease)}
.card-head:active{transform:scale(.988)}
.card-title{flex:1;font-size:var(--fs-card-title);line-height:1.35;min-width:0;word-break:keep-all;
  color:var(--card-ink)}
.caret{display:inline-flex;flex:0 0 auto;width:13px;height:13px;color:var(--caret);
  transition:transform .38s var(--ease)}
.caret svg{display:block;width:13px;height:13px}
.card.open .caret{transform:rotate(180deg)}
.card-head:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:var(--r)}
.collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s var(--ease)}
.card.open .collapse{grid-template-rows:1fr}
.collapse>.inner{overflow:hidden;min-height:0}
.card-body{background:var(--body);color:var(--body-ink);min-width:0;
  padding:17px 16px 18px;display:flex;flex-direction:column;gap:14px;
  opacity:0;transition:opacity .22s var(--ease)}
.card.open .card-body{opacity:1;transition-delay:.05s}
.para{font-size:var(--fs-body);line-height:1.7;color:inherit;margin:0;max-width:100%;min-width:0;
  white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}

/* ---------- cells ---------- */
.cells{display:flex;flex-direction:column;gap:8px}
.cell{background:var(--cell);border-radius:8px;overflow:hidden;min-width:0}
.cell-head{padding:11px 15px;font-size:var(--fs-cell-title);line-height:1.35;color:var(--cell-ink);
  word-break:keep-all;overflow-wrap:anywhere}
.cell-div{height:1px;background:var(--cell-line);margin:0 14px}
.cell-body{padding:15px 14px 16px;display:flex;flex-direction:column;gap:15px;min-width:0}
.shots{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x proximity;
  touch-action:pan-x;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;
  user-select:none;-webkit-user-select:none}
.shots::-webkit-scrollbar{display:none}
.shots.grabbing{cursor:grabbing;scroll-snap-type:none}
.shot{position:relative;flex:0 0 auto;scroll-snap-align:start;border-radius:6px;overflow:hidden;
  background:#1A1A1A;cursor:zoom-in}
.shots.grabbing .shot{cursor:grabbing}
.shot img{height:150px;width:auto;max-width:none;pointer-events:none;-webkit-user-drag:none}
.shot .x{position:absolute;top:4px;right:4px}
.cell .para{font-size:var(--fs-cell-body);color:var(--cell-ink)}

/* 글 중간에 들어가는 정방형 아이콘 — 글자 높이(1em)에 맞춰 따라 커지고 작아집니다 */
.rich img.ico{display:inline-block;max-width:none;object-fit:contain;
  width:calc(1em * var(--ico-scale,1));height:calc(1em * var(--ico-scale,1));
  vertical-align:-0.16em;margin:0 .12em}
.rich[contenteditable="true"] img.ico{outline:1px solid rgba(241,128,31,.5);border-radius:2px}

/* ---------- 편집 표시 ---------- */
[contenteditable="true"]{outline:1px dashed #7A4A1C;outline-offset:3px;border-radius:3px;cursor:text}
[contenteditable="true"]:focus{outline:1px solid var(--accent)}
[contenteditable="true"]:empty::before{content:attr(data-ph);color:var(--muted)}
.card-head [contenteditable="true"]{outline-color:#B0651A}
.chip [contenteditable="true"]{outline-color:#6B4A22}
.row-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dropzone{border:1px dashed #5A5A5A;border-radius:8px;padding:12px;text-align:center;
  font-size:12px;color:var(--muted);cursor:pointer;transition:border-color .2s,color .2s}
.dropzone.over{border-color:var(--accent);color:var(--accent)}
.cid{font-size:11px;color:#7A7A7A;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- 부분 서식 툴바 ---------- */
.fmtbar[hidden]{display:none!important}
.fmtbar{position:fixed;z-index:80;background:#1B1B1B;border:1px solid #4A4A4A;border-radius:10px;
  padding:8px 9px;display:flex;flex-direction:column;gap:7px;
  box-shadow:0 10px 28px rgba(0,0,0,.55);animation:pop .16s var(--ease) both}
.fmtrow{display:flex;align-items:center;gap:6px}
.fmtlbl{font-size:11px;color:#8F8F8F;width:38px;flex:0 0 auto;letter-spacing:.02em}
.sw{width:21px;height:21px;flex:0 0 auto;padding:0;border-radius:5px;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);transition:transform .12s var(--ease)}
.sw:hover{transform:scale(1.14)}
.sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.swpick{-webkit-appearance:none;appearance:none;width:27px;height:21px;flex:0 0 auto;padding:0;
  border:1px dashed #6E6E6E;border-radius:5px;background:none;cursor:pointer}
.swpick::-webkit-color-swatch-wrapper{padding:2px}
.swpick::-webkit-color-swatch{border:0;border-radius:3px}
.swpick::-moz-color-swatch{border:0;border-radius:3px}

/* ---------- 확대 보기 ---------- */
.lightbox{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(6,6,8,.84);cursor:zoom-out;animation:fade .2s var(--ease) both}
.lightbox.closing{animation:fadeOut .18s var(--ease) both}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
.lb-img{max-width:min(92vw,760px);max-height:82vh;width:auto;height:auto;border-radius:8px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);transform-origin:center center;will-change:transform}
.lb-close{position:fixed;top:14px;right:14px;z-index:91}

/* ---------- 시트 / 토스트 ---------- */
.modal{position:fixed;inset:0;background:rgba(8,8,8,.78);display:flex;align-items:center;
  justify-content:center;padding:20px;z-index:100;animation:fade .2s var(--ease) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.sheet{width:100%;max-width:430px;background:#2A2A2A;border:1px solid var(--line);
  border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;
  animation:pop .26s var(--ease) both}
.sheet h3{margin:0;font-size:16px;font-weight:400}
.sheet .scroll{max-height:58vh;overflow-y:auto;display:flex;flex-direction:column;gap:9px;
  padding-right:4px;margin:0 -2px}
.sheet textarea{width:100%;height:190px;background:#161616;color:#C9C9C9;
  border:1px solid var(--line);border-radius:8px;padding:10px;font-size:12px;line-height:1.5;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.ask{font-size:14px;line-height:1.6;color:#E4E4E4;margin:0;word-break:keep-all}
.crow{display:grid;grid-template-columns:46px 1fr 94px;gap:10px;align-items:center}
.crow .nm{font-size:13.5px;color:#DCDCDC;min-width:0;word-break:keep-all}
.srow{display:grid;grid-template-columns:96px 1fr 76px;gap:10px;align-items:center}
.srow .nm{font-size:13.5px;color:#DCDCDC;word-break:keep-all}
input[type=color]{-webkit-appearance:none;appearance:none;width:46px;height:32px;padding:0;
  border:1px solid #4A4A4A;border-radius:8px;background:none;cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}
input[type=color]::-moz-color-swatch{border:0;border-radius:6px}
.hexin{width:94px;background:#161616;border:1px solid #4A4A4A;border-radius:8px;color:#DCDCDC;
  padding:7px 8px;font-size:12px;letter-spacing:.02em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.hexin:focus{outline:1px solid var(--accent);border-color:var(--accent)}
.numin{width:76px;background:#161616;border:1px solid #4A4A4A;border-radius:8px;color:#DCDCDC;
  padding:7px 8px;font-size:12px;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.numin:focus{outline:1px solid var(--accent);border-color:var(--accent)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;
  background:none;cursor:pointer;margin:0}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:#4A4A4A;border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border:0;
  border-radius:50%;background:var(--accent);margin-top:-6px}
input[type=range]::-moz-range-track{height:4px;background:#4A4A4A;border-radius:2px}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--accent)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#1B1B1B;
  border:1px solid var(--line);color:#EDEDED;padding:9px 16px;border-radius:999px;
  font-size:13px;z-index:70;box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:toastIn .26s var(--ease) both}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media (max-width:430px){.phone{box-shadow:none}}