/* ============================================================================
   v615 매뉴얼 — 읽는 문서에서 **넘겨 보는 화면**으로.

   왜 바꿨나: 기존 매뉴얼은 스크롤 한 판에 문단이 길게 이어졌다. 티박스에서
   3초 안에 읽어야 하는 사람에게 문단은 무용지물이다. 한 페이지에 **화면 하나,
   문장 하나**만 둔다. 나머지는 화면 위의 핀이 말한다.

   🔴 화면 그림은 '스크린샷'이 아니라 **도식**이다. 픽셀을 베끼면 앱이 바뀔 때마다
      조용히 거짓말이 된다. 대신 **버튼 이름·문구는 앱에 실제로 있는 것만** 쓴다
      (index.html / app.js 에서 확인하고 옮긴다).

   토큰은 manual.css 를 그대로 쓴다 — 이 파일보다 먼저 불러야 한다.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
body.deck {
    /* 화면을 꽉 채운다 — 안 그러면 아래 조작줄이 화면 중턱에 떠 보인다 */
    display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all; overflow-wrap: anywhere;   /* 한글 줄바꿈 */
}

/* ── 상단 바 : 어느 매뉴얼인지 + 진행 ─────────────────────────────────────── */
.dk-top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-top));
    background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line-light);
}
.dk-home {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 auto;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); color: var(--gray); text-decoration: none; font-size: 16px;
}
.dk-name { font-size: 14px; font-weight: 700; flex: 1 1 auto; min-width: 0;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-name b { color: var(--accent); }
.dk-count { font-size: 12px; color: var(--muted); flex: 0 0 auto;
            font-variant-numeric: tabular-nums; }
.dk-bar { height: 3px; background: var(--line-light); }
.dk-bar i { display: block; height: 100%; background: var(--accent);
            transition: width .22s ease; }

/* ── 페이지 트랙 : 가로 스냅. JS 가 죽어도 손으로 넘길 수 있다 ─────────────── */
.dk-track {
    flex: 1 1 auto; min-height: 0;
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.dk-track::-webkit-scrollbar { display: none; }
.pg {
    flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
    min-width: 0; padding: 18px 16px 8px;
    display: flex; flex-direction: column; align-items: center;
}

/* ── 페이지 머리 : 한 줄이 전부다 ─────────────────────────────────────────── */
.pg-step { font-size: 11px; font-weight: 700; letter-spacing: .12em;
           color: var(--accent); margin-bottom: 6px; }
.pg-h { font-size: 21px; font-weight: 700; line-height: 1.35; text-align: center;
        text-wrap: balance; margin: 0 0 14px; max-width: 20em; }
.pg-h em { font-style: normal; color: var(--accent); }

/* ── 폰 프레임 ───────────────────────────────────────────────────────────── */
/* 🔴 핀은 화면 **밖 왼쪽 여백**에 세운다. 화면 위에 얹으면 하필 짚으려는
   버튼 글자를 가린다(첫 시안에서 '✓ 저장' 이 핀에 덮였다).
   그래서 프레임을 감싸는 wrap 을 두고, 프레임만 overflow:hidden 한다. */
.ph-wrap { position: relative; width: 100%; max-width: 300px; padding-left: 28px; }
.ph-frame {
    position: relative; width: 100%;
    border: 8px solid #16181a; border-radius: 30px; background: var(--card);
    box-shadow: var(--shadow-md); overflow: hidden;
}
.ph-bar { height: 22px; background: var(--card-2); border-bottom: 1px solid var(--line-light);
          display: flex; align-items: center; justify-content: center; }
.ph-bar span { width: 52px; height: 5px; border-radius: 999px; background: #c9c9c9; }
.ph-body { padding: 12px 11px 14px; min-height: 292px; }

/* 화면 조각들 — 앱의 실제 요소를 도식으로 */
.s-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.s-head b { font-size: 12.5px; font-weight: 700; }
.s-head i { font-size: 11px; color: var(--muted); font-style: normal; margin-left: auto; }

.s-hole { text-align: center; padding: 6px 0 2px; }
.s-hole .k { font-size: 9.5px; letter-spacing: .16em; color: var(--muted); font-weight: 700; }
.s-hole .n { font-size: 38px; font-weight: 700; line-height: 1.05; }
.s-hole .p { font-size: 11.5px; color: var(--gray); }

.s-score { text-align: center; font-size: 56px; font-weight: 700; line-height: 1.05;
           color: var(--accent); }
.s-cat { text-align: center; font-size: 11px; color: var(--gray); margin-top: -2px; }
.s-pm { display: flex; justify-content: center; gap: 26px; margin: 10px 0 4px; }
.s-pm b { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line);
          display: flex; align-items: center; justify-content: center;
          font-size: 22px; font-weight: 700; color: var(--gray); background: var(--card); }

.s-btn { display: block; width: 100%; text-align: center; padding: 11px;
         border-radius: 10px; font-size: 13px; font-weight: 700; margin-top: 8px; }
.s-btn.go { background: var(--accent); color: var(--on-accent); }
.s-btn.gh { background: var(--card); color: var(--gray); border: 1px solid var(--line); }
.s-row { display: flex; gap: 7px; margin-top: 8px; }
.s-row .s-btn { margin-top: 0; flex: 1; }

/* 이름 칩 (조원 고르기) — 지금 넣는 사람은 은은하게 숨쉰다 (앱 v605 와 같은 신호) */
.s-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.s-chip { padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
          border: 1px solid var(--line); color: var(--gray); background: var(--card); }
.s-chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
             animation: dkBreathe 2.4s ease-in-out infinite; }
@keyframes dkBreathe { 0%,100% { opacity: 1 } 50% { opacity: .58 } }

/* 스코어카드 표 */
.s-card { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-top: 8px; }
.s-card div { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); }
.s-card span { padding: 5px 2px; font-size: 10.5px; text-align: center;
               border-bottom: 1px solid var(--line-light); font-variant-numeric: tabular-nums; }
.s-card span:first-child { text-align: left; padding-left: 7px; font-weight: 700; }
.s-card div:first-child span { background: var(--card-2); color: var(--muted); font-weight: 700; }
.s-card div:last-child span { border-bottom: 0; }
.s-card span.hit { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
/* 빈 홀은 **경고**다 — 초록으로 칠하면 '잘 됐다'는 신호가 되어 정반대로 읽힌다 */
.s-card span.miss { background: var(--gold-soft); color: var(--gold); font-weight: 700; }

/* 배너 */
/* v734: 예전엔 flex 였다 — 글이 두 줄로 꺾이면 텍스트와 <b> 가 각자 열이 되어 세 토막으로 벌어졌다
   (영상 스크린샷 t-link 에서 발견). 안에 든 건 글자·<b>·<br> 뿐이라 block 이 맞다. */
.s-ban { display: block; padding: 8px 10px; border-radius: 9px;
         font-size: 11px; line-height: 1.45; margin-top: 8px; word-break: keep-all; overflow-wrap: anywhere; }
.s-ban.warn { background: var(--gold-soft); color: var(--gold); }
.s-ban.ok { background: var(--accent-soft); color: var(--accent-dark); }

/* 카톡 말풍선 (방장이 보내는 것) */
.s-kko { background: #b2c7d9; padding: 10px 9px; border-radius: 9px; margin-top: 2px; }
.s-bub { background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 11.5px;
         line-height: 1.5; color: #1a1a1a; }
.s-bub b { color: var(--accent); }
.s-lnk { display: block; margin-top: 6px; padding: 7px 9px; border-radius: 8px;
         background: var(--card-2); font-size: 10.5px; color: var(--gray); }

/* ── 핀 : 화면 위에서 짚는다. 설명은 핀 아래 목록에 한 줄씩 ───────────────── */
.pin { position: absolute; left: 0; z-index: 3; transform: translateY(-50%);
       width: 22px; height: 22px; border-radius: 50%;
       background: var(--accent); color: var(--on-accent);
       font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
/* 핀에서 화면으로 가는 짧은 선 — 무엇을 짚는지 눈이 따라간다 */
.pin::after { content: ''; position: absolute; top: 50%; left: 100%;
              width: 6px; height: 1.5px; background: var(--accent); }
.pins { width: 100%; max-width: 300px; margin: 12px 0 0; padding: 0; list-style: none;
        display: flex; flex-direction: column; gap: 7px; }
.pins li { display: flex; gap: 8px; align-items: flex-start;
           font-size: 13px; line-height: 1.5; color: var(--gray); }
.pins li b { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%;
             background: var(--accent-soft); color: var(--accent);
             font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; }
.pins li em { font-style: normal; color: var(--ink); font-weight: 700; }

/* 주의 한 줄 — 페이지마다 최대 하나 */
.pg-note { width: 100%; max-width: 300px; margin-top: 10px; padding: 9px 11px;
           border-radius: 9px; background: var(--gold-soft); color: var(--gold);
           font-size: 12.5px; line-height: 1.5; }
.pg-note.bad { background: var(--danger-soft); color: var(--danger); }

/* ── 표지 / 마지막 장 ────────────────────────────────────────────────────── */
.pg.cover { justify-content: center; }
.cover-h { font-size: 27px; font-weight: 700; line-height: 1.3; text-align: center;
           text-wrap: balance; margin: 0 0 10px; }
.cover-h em { font-style: normal; color: var(--accent); }
.cover-s { font-size: 14px; color: var(--gray); text-align: center; margin: 0 0 22px;
           line-height: 1.6; max-width: 22em; }
.beats { display: flex; align-items: center; gap: 6px; }
.beat { flex: 1; text-align: center; padding: 12px 6px; border-radius: 12px;
        background: var(--card-2); }
.beat b { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
.beat span { font-size: 10.5px; color: var(--muted); }
.beat-a { color: var(--line); font-size: 15px; flex: 0 0 auto; }

.go-app { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px;
          padding: 13px 22px; border-radius: 999px; background: var(--accent);
          color: var(--on-accent); text-decoration: none; font-size: 14px; font-weight: 700; }

/* ── 아래 조작 ───────────────────────────────────────────────────────────── */
.dk-foot {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line-light);
}
.dk-nav { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
          border: 1px solid var(--line); background: var(--card); color: var(--ink);
          font-size: 17px; cursor: pointer; }
.dk-nav:disabled { opacity: .32; cursor: default; }
.dk-dots { flex: 1; display: flex; justify-content: center; gap: 6px; }
.dk-dots b { width: 6px; height: 6px; border-radius: 50%; background: var(--line);
             transition: background .18s, width .18s; }
.dk-dots b.on { background: var(--accent); width: 17px; border-radius: 999px; }

@media (min-width: 720px) {
    .pg { padding-top: 26px; }
    .ph-wrap, .pins, .pg-note { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
    .dk-track { scroll-behavior: auto; }
    .s-chip.on { animation: none; }
}

/* ── 화면 조각 추가분 (정모·내 기록·라운드 매뉴얼에서 같이 쓴다) ─────────────── */

/* 목록형 버튼 (정모 관리 등) */
.s-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.s-li { display: flex; align-items: center; gap: 8px; padding: 10px 11px;
        border: 1px solid var(--line); border-radius: 10px; font-size: 12px; font-weight: 700; }
.s-li i { font-style: normal; margin-left: auto; color: var(--line); font-weight: 400; }
.s-li.acc { border-color: var(--accent); color: var(--accent); }
.s-li.bad { background: var(--danger); border-color: var(--danger); color: #fff; }
.s-li.lock { background: var(--card-2); color: var(--muted); }

/* 조 카드 — 이름 + 조장 왕관 (앱 v602 와 같은 방식) */
.s-team { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; margin-top: 8px; }
.s-team > b { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.s-mem { display: flex; align-items: center; gap: 7px; padding: 5px 0;
         border-top: 1px solid var(--line-light); font-size: 12px; }
.s-team .s-mem:first-of-type { border-top: 0; }
.s-mem u { text-decoration: none; font-weight: 700; }
.s-mem s { text-decoration: none; color: var(--muted); font-size: 10.5px; }
.s-crown { margin-left: auto; width: 24px; height: 24px; border-radius: 50%;
           border: 1px solid var(--line); color: var(--line);
           display: flex; align-items: center; justify-content: center; font-size: 12px; }
.s-crown.on { border-color: var(--accent); background: var(--accent-soft); color: var(--gold); }

/* 순위 줄 */
.s-rank { display: flex; align-items: center; gap: 8px; padding: 7px 2px;
          border-bottom: 1px solid var(--line-light); font-size: 12px; }
.s-rank b { width: 17px; text-align: center; font-weight: 700; color: var(--muted); }
.s-rank u { text-decoration: none; flex: 1; font-weight: 700; }
.s-rank s { text-decoration: none; font-variant-numeric: tabular-nums; color: var(--accent);
            font-weight: 700; }

/* 입력칸 */
.s-in { display: flex; align-items: center; justify-content: space-between; gap: 8px;
        padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px;
        font-size: 12px; margin-top: 7px; }
.s-in em { font-style: normal; color: var(--muted); }
.s-in u { text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 결과 카드 축소판 */
.s-win { border-radius: 12px; padding: 14px 12px; text-align: center;
         background: linear-gradient(160deg,#0f3d23,#14532d); border: 1.5px solid #E8A33C;
         margin-top: 6px; }
.s-win b { display: block; font-size: 9px; letter-spacing: .2em; color: #F0BC72; font-weight: 700; }
.s-win u { display: block; text-decoration: none; font-size: 22px; font-weight: 700; color: #fff;
           margin-top: 3px; }
.s-win s { display: block; text-decoration: none; font-size: 12px; color: #F0BC72; margin-top: 2px; }

/* 🔴 매뉴얼 사이를 오가는 줄. v615 에서 지웠다가 되살렸다 — 한 매뉴얼만 읽고
   나머지를 못 찾으면 안 된다(테스트 3종이 각각 이걸 요구하고 있었다).
   덱은 세로 flex 라 이 줄이 트랙 높이를 먹지 않도록 flex:0 으로 고정한다. */
.dk-topnav {
    flex: 0 0 auto; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    padding: 8px 14px; border-bottom: 1px solid var(--line-light); background: var(--bg);
}
.dk-topnav::-webkit-scrollbar { display: none; }
.dk-topnav a {
    flex: 0 0 auto; padding: 6px 11px; border-radius: 999px; text-decoration: none;
    font-size: 12px; font-weight: 600; color: var(--muted);
    border: 1px solid var(--line-light); background: var(--card);
}
.dk-topnav a.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ── v725: 홀 카드(v720)·명단 시트(v719) 도식 — 앱의 .hc-row / .spk-box 와 같은 꼴 ── */
.s-sub { font-size: 11px; color: var(--muted); line-height: 1.45; margin: -4px 0 8px; }
.s-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.s-box { padding: 12px 6px; text-align: center; border: 1.5px solid var(--line); border-radius: 10px;
         background: var(--card); font-size: 13px; font-weight: 700; }
.s-box.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.s-link { margin-top: 10px; text-align: center; font-size: 11px; color: var(--muted); text-decoration: underline; }
.s-sheet { margin-top: 6px; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.s-sheet .s-btn { padding: 9px; font-size: 11.5px; margin-top: 6px; }
.s-hc { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px;
        padding: 6px 7px 6px 10px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--card); }
.s-hc.draft { border-color: var(--gold); background: var(--gold-soft); }
.s-hc .nm { font-size: 12.5px; font-weight: 700; flex: 1; min-width: 0; }
.s-hc .cat { font-size: 9.5px; color: var(--muted); font-weight: 700; flex: 0 0 auto; }
.s-hc .ctl { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.s-hc .ctl b, .s-hc .ctl i { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
        font-style: normal; font-weight: 700; font-size: 15px; border: 1px solid var(--line); background: var(--card-2); }
.s-hc .ctl i { width: 34px; background: var(--card); }
.s-hc.draft .ctl i { border-color: var(--gold); }
.s-hc .ctl i.ghost { color: var(--muted); font-weight: 600; border-style: dashed; }

/* ── v727: JMID 페이지 도식 ── */
.s-jmid { text-align: center; padding: 8px 4px 2px; }
.s-jmid-b { font-size: 9.5px; letter-spacing: .14em; font-weight: 700; color: var(--muted); }
.s-jmid-t { font-size: 24px; font-weight: 700; letter-spacing: .06em; color: var(--accent); margin-top: 4px; }
.s-jmid-s { font-size: 10.5px; color: var(--muted); margin-bottom: 10px; }
.s-jmid-in { padding: 9px; border: 1.5px solid var(--accent); border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 20px; font-weight: 700; letter-spacing: .28em; font-family: "Courier New", monospace; }
.s-jmid-m { font-size: 11px; font-weight: 700; margin: 8px 0 10px; }