/* 세특 작성 도우미 데모 — faux product UI built to the Stageshow rules (github.com/benjitaylor/skills, MIT) */
/* ---------- The stage (Stageshow rules: one hero window, one satellite, real words only on the story) ---------- */
.host { width: 100%; position: relative; }
.ss-stage {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden;
  background: var(--well); border-radius: 20px;
  /* the sheet is a light document in both themes */
  --s-surface: #ffffff; --s-chrome: #f7f6f2; --s-line: #e6e4dd; --s-grid: #eeece6;
  --s-ink: #353532; --s-muted: #6b6a64; --s-bar: #e6e4dc; --s-bar2: #efede7; --s-hover: #f1efe9;
  --s-accent: #e07a3f; --s-accent-ink: #a9501f; --s-accent-soft: #f7e3d5; --s-ok: #2f7a4f; --s-ok-soft: #e1f0e6;
  font-family: var(--font-ui); color: var(--s-ink); line-height: normal;
}
.win {
  position: absolute; background: var(--s-surface); border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 30px 60px -12px rgba(50,40,30,.25), 0 18px 36px -18px rgba(0,0,0,.3);
  display: flex; flex-direction: column;
}
.bar { height: 38px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 14.5px; background: var(--s-chrome); border-bottom: 1px solid var(--s-line); }
.dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); flex: none; }
.dot:nth-child(1) { background: #ff5f57; } .dot:nth-child(2) { background: #febc2e; } .dot:nth-child(3) { background: #28c840; }
.url { margin: 0 auto; transform: translateX(-20px); padding: 4px 12px; border-radius: 999px; background: #ecebe6; color: var(--s-muted); font-size: 12px; line-height: 1.3; white-space: nowrap; }
.menubar { height: 34px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-bottom: 1px solid var(--s-line); }
.mb { height: 7px; border-radius: 4px; background: var(--s-bar); margin: 0 6px; flex: none; }
.menu-btn { font: 500 13px/1.3 var(--font-ui); color: var(--s-ink); padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.menu-btn[data-open] { background: var(--s-hover); }

.grid { position: relative; flex: 1; }
.r { display: grid; grid-template-columns: var(--cols); border-bottom: 1px solid var(--s-grid); height: 28px; position: relative; }
.r > span { border-right: 1px solid var(--s-grid); padding: 0 8px; display: flex; align-items: center; min-width: 0; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; }
.r > span:last-child { border-right: 0; }
.r .n { justify-content: center; background: var(--s-chrome); color: var(--s-muted); font-size: 11px; padding: 0; }
.r.letters { height: 22px; }
.r.letters > span { justify-content: center; background: var(--s-chrome); color: var(--s-muted); font-size: 11px; }
.r.head > span { font-weight: 600; }
.r .num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.fill { height: 7px; border-radius: 4px; background: var(--s-bar2); flex: none; }
.r.done .fill { background: var(--s-bar); }

/* the student row the story is about */
.r.focus { height: 28px; align-items: stretch; }
.r.focus > span { align-items: flex-start; padding-top: 6px; padding-bottom: 10px; white-space: normal; }
.r.focus .bytes { white-space: nowrap; }
.bwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cchip { opacity: 0; display: none; }
.ss-stage[data-layout="compact"] .cchip { display: inline-block; }
.r.focus .n { color: var(--s-accent-ink); background: var(--s-accent-soft); font-weight: 600; padding-top: 7px; }
.cell-b { position: relative; }
.cell-b::after { content: ""; position: absolute; inset: -1px; box-shadow: inset 0 0 0 2px var(--s-accent); pointer-events: none; }
.draft { font-size: 13px; line-height: 1.55; color: var(--s-ink); word-break: keep-all; overflow-wrap: anywhere; }
.draft i { font-style: normal; opacity: 0; }
.bytes { white-space: nowrap; }
.bytes .lim { color: var(--s-muted); }

/* the anchored menu */
.pop {
  position: absolute; width: 224px; padding: 6px; background: var(--s-surface); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 12px 28px -6px rgba(40,30,20,.22), 0 4px 10px -4px rgba(0,0,0,.12);
  display: flex; flex-direction: column; opacity: 0; transform-origin: 12px 0; pointer-events: none;
}
.pi { height: 32px; display: flex; align-items: center; padding: 0 10px; border-radius: 6px; font-size: 13px; line-height: 1.3; white-space: nowrap; }
.pi[data-hover] { background: var(--s-hover); }
.pi .fill { background: var(--s-bar); }
.sep { height: 1px; background: var(--s-line); margin: 5px 4px; }

/* satellite: the 기재요령 check, straddling the window's right edge */
.sat {
  position: absolute; width: 168px; padding: 14px; box-sizing: border-box; background: var(--s-surface); border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 14px 32px -8px rgba(50,40,30,.24), 0 4px 10px -4px rgba(0,0,0,.1);
  display: flex; flex-direction: column; gap: 6px;
}
.sat .chip { opacity: 0; }
.sat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sat-title { font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.chip { font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 9px; border-radius: 999px; background: var(--s-ok-soft); color: var(--s-ok); white-space: nowrap; }
.sat-sub { font-size: 12px; line-height: 1.3; color: var(--s-muted); white-space: nowrap; }

.cursor { position: absolute; left: 0; top: 0; width: 24px; height: 24px; pointer-events: none; z-index: 5; transform-origin: 7.5px 5.25px; }

/* wide design 720 × 400 · compact design 358 × 450 */
.ss-stage[data-layout="wide"] { width: 720px; height: 400px; }
.ss-stage[data-layout="wide"] .win { left: 32px; top: 32px; width: 568px; height: 440px; --cols: 36px 132px minmax(0,1fr) 92px; }
.ss-stage[data-layout="compact"] { width: 358px; height: 450px; }
.ss-stage[data-layout="compact"] .win { left: 16px; top: 16px; width: 326px; height: 480px; --cols: 28px 0px minmax(0,1fr) 88px; }
.ss-stage[data-layout="compact"] .r > span:nth-child(2) { padding: 0; border: 0; }
.ss-stage[data-layout="compact"] .r > span:nth-child(2) > * { display: none; }
.ss-stage[data-layout="compact"] .mb.wide-only { display: none; }
.ss-stage[data-layout="compact"] .sat { display: none; }
.ss-stage[data-layout="compact"] .url { transform: translateX(-8px); }

/* the demo's own frame on the page */
.sd { display: flex; flex-direction: column; gap: 12px; min-width: 0; width: 100%; max-width: 720px; }
.sd .controls { display: flex; justify-content: flex-end; }
.sd .replay {
  font: 600 14px/1 var(--font-ui); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; min-height: 40px; cursor: pointer;
}
.sd .replay:hover { border-color: var(--ink-muted); }