/* 데모 껍데기 — 폰 바깥. 화면 자체는 screen.css 가 갖는다.
 *
 * /m/SC-D01   화면 한 장 (정본)
 * /demo/…     같은 화면을 폰에 끼우고 왜 이렇게 생겼는지 옆에 적는다
 */

:root {
  --stage: #10171a;
  --stage-2: #182226;
  --stage-line: #26343a;
  --stage-ink: #eaf0f0;
  --stage-ink-2: #8fa3a6;
  --stage-ink-3: #5f7377;
  --accent: #0e6b60;
  --tap: 44px;
}

.stage * { box-sizing: border-box; }
.stage a { color: inherit; }
.stage :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.stage { background: var(--stage); color: var(--stage-ink); min-height: 100vh;
         padding: 3.5rem 2rem 5rem;
         font-family: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif; }
.wrap { max-width: 78rem; margin: 0 auto; }

.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
        flex-wrap: wrap; padding-bottom: 1.5rem; border-bottom: 1px solid var(--stage-line); }
.hero .eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .18em;
                 color: var(--stage-ink-3); margin: 0 0 .6rem; }
.hero h1 { font-size: clamp(2.1rem, 3.6vw, 2.9rem); font-weight: 200; letter-spacing: -.035em;
           line-height: 1; margin: 0; }
.hero h1 b { font-weight: 700; }
.hero .tags { display: flex; gap: .3rem; flex-wrap: wrap; }
.chip { font-size: .72rem; font-weight: 500; padding: .28rem .6rem; border-radius: 999px;
        border: 1px solid var(--stage-line); color: var(--stage-ink-2); white-space: nowrap; }

.stage .cols { display: grid; grid-template-columns: 414px minmax(0, 1fr); gap: 3.5rem;
        align-items: start; margin-top: 2.75rem; }

/* 폰 */
.stage .phone { position: sticky; top: 2rem; }
.device { width: 414px; background: #05090a; border-radius: 44px; padding: 11px;
          box-shadow: 0 0 0 1px #2c3a3e, 0 40px 70px -20px rgba(0,0,0,.75); }
.screen { width: 392px; height: min(806px, calc(100vh - 12rem));
          border-radius: 34px; overflow: hidden; }
.cap { margin: 1rem 0 0; font-size: .74rem; color: var(--stage-ink-3); text-align: center; }
.cap a { color: var(--stage-ink-2); text-underline-offset: 3px; }
.cap a:hover { color: var(--accent); }

/* 데스크톱 화면은 폰 옆에 설명을 둘 수 없다 — 창 아래로 내린다 */
.stage .cols--wide { grid-template-columns: minmax(0, 1fr); }
.stage .cols--wide .phone { position: static; }
.window { border-radius: 10px; overflow: hidden; background: #1b2426;
          box-shadow: 0 0 0 1px #2c3a3e, 0 30px 60px -25px rgba(0,0,0,.7); }
.window .chrome { display: flex; align-items: center; gap: .35rem; padding: .5rem .75rem; }
.window .chrome i { width: 9px; height: 9px; border-radius: 50%; background: #3a4a4d; }
.window .chrome span { margin-left: auto; font-size: .68rem; color: var(--stage-ink-3); }
.window .pane { height: 620px; overflow: auto; background: #fbfaf7; }
/* POS 1280 × 700 · 거울앞 1024 × 700 — 데스크톱보다 세로가 길다 */
.window .pane--tall { height: 700px; }

.cap a.on { color: var(--accent); font-weight: 600; }

/* 옆 — 왜 이렇게 생겼나 */
.stage .side { max-width: 36rem; }
.stage .side > section { margin-bottom: 2.5rem; }
.stage .side > section:last-child { margin-bottom: 0; }
.stage .side h2 { font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--stage-ink-3);
           margin: 0 0 1rem; }
.stage .side .q { font-size: 1.3rem; font-weight: 200; letter-spacing: -.03em; line-height: 1.5; margin: 0; }
.stage .side .q b { font-weight: 700; }
.stage .side .q span { color: var(--stage-ink-3); }

.notes { list-style: none; margin: 0; padding: 0; }
.notes li { font-size: .87rem; line-height: 1.75; color: var(--stage-ink-2);
            padding: .55rem 0 .55rem 1.1rem; border-bottom: 1px solid var(--stage-line);
            position: relative; }
.notes li::before { content: ""; position: absolute; left: 0; top: 1.15rem;
                    width: 5px; height: 5px; border-radius: 50%; background: var(--stage-ink-3); }
.notes li b { color: var(--stage-ink); font-weight: 600; }
.notes.open li::before { background: none; border: 1px solid var(--stage-ink-3); }
.stage .side .kx { opacity: .72; }

.jump { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.jump a { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
          min-height: var(--tap); padding: .6rem .9rem; text-decoration: none;
          background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 12px; }
.jump a:hover { border-color: var(--accent); background: #1b2b2c; }
.jump .n { font-size: .86rem; color: var(--stage-ink); }
.jump .n small { display: block; font-size: .72rem; color: var(--stage-ink-3); margin-top: .1rem; }
.jump .go { color: var(--stage-ink-3); font-size: .8rem; }
.jump a:hover .go { color: var(--accent); }

/* 메모 — 설명 옆에서 바로 적는다. 저장 버튼 없음, 멎으면 올라간다 */
.pmnote textarea { width: 100%; min-height: 2.4rem; resize: none; overflow: hidden;
                   background: transparent; border: 0; border-bottom: 1px dashed var(--stage-line);
                   color: var(--stage-ink); font: inherit; font-size: .9rem; line-height: 1.7;
                   padding: .3rem 0; }
.pmnote textarea:hover { border-bottom-color: var(--stage-ink-3); }
.pmnote textarea:focus { outline: none; border-bottom-color: var(--accent); }
.pmnote textarea::placeholder { color: var(--stage-ink-3); }
.pmnote-state { margin: .35rem 0 0; font-size: .72rem; color: var(--stage-ink-3); min-height: 1em; }

/* 데모 차례 넘기기 — 좌우 하단에 떠 있는 화살표. 차례는 홈 목록 순서 그대로다.
   .step 은 화면 안(.m--agenda 의 ◀▶)이 이미 쓰는 이름이라 .turn 으로 둔다 — bin/css-scope 가 잡았다 */
.turn { position: fixed; bottom: 1.5rem; z-index: 20;
        display: flex; align-items: center; gap: .5rem;
        min-height: var(--tap); padding: .6rem 1rem; border-radius: 999px;
        text-decoration: none; font-size: 1rem; color: var(--stage-ink);
        background: var(--stage-2); border: 1px solid var(--stage-line);
        box-shadow: 0 14px 32px -14px rgba(0,0,0,.8); }
.turn small { font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--stage-ink-3); }
.turn:hover { border-color: var(--accent); background: #1b2b2c; }
.turn:hover small { color: var(--accent); }
.turn--prev { left: 1.5rem; }
.turn--next { right: 1.5rem; }
/* 목록으로 — 차례 화살표와 같은 알약이지만 위에 뜬다 */
.turn--home { top: 1.25rem; bottom: auto; left: 1.5rem; }

@media (max-width: 1000px) {
  .stage { padding: 2rem 1.25rem 3rem; }
  .stage .cols { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .stage .phone { position: static; }
  .device { width: min(414px, 100%); margin: 0 auto; }
  .screen { width: 100%; }
}