/* ============================================================================
   v460 매뉴얼 공용 스타일 — 앱(style.css)의 디자인 토큰을 그대로 따른다.

   🔴 이 파일 하나만 고치면 매뉴얼 3종이 같이 바뀐다. 예전엔 페이지마다 <style> 이
      통째로 복사돼 있어서, 한 곳을 고치면 나머지 둘이 조용히 어긋났다.

   앱과 맞춘 것 (style.css :root 참조):
     · 바탕 #FFFFFF · 카드 #FFFFFF/#F5F5F5 · 보더 #E0E0E0
     · 글자 #1A1A1A / #555555 / #888888
     · 액센트 #1B7340 (호버 #145A32, 연한 #E8F5EE)
     · 폰트 Pretendard Variable
     · 굵기는 **700까지만**. 앱에 800이 없어서 매뉴얼만 유독 무거워 보였다
     · 라디우스 8/12/16/pill · 그림자는 앱의 중립 3단계

   페이지별 정체성은 --accent 3종만 덮어쓴다(각 html 상단 <style>).
   기본값은 앱 액센트(초록)라, 안 덮어써도 앱처럼 보인다.
   ========================================================================== */
:root{
    /* 앱 토큰 (style.css 와 같은 값) */
    --bg:            #FFFFFF;
    --card:          #FFFFFF;
    --card-2:        #F5F5F5;
    --line:          #E0E0E0;
    --line-light:    #EFEFEF;
    --ink:           #1A1A1A;
    --gray:          #555555;
    --muted:         #888888;
    --danger:        #B91C1C;
    --danger-soft:   #FEF2F2;
    --gold:          #A16207;      /* 앱 --color-warning(#F59E0B)의 글자용 대비 확보 버전 */
    --gold-soft:     #FFF8E1;      /* 앱 --color-warning-light */

    /* 페이지 액센트 — 기본은 앱 액센트 */
    --accent:        #1B7340;
    --accent-dark:   #145A32;
    --accent-soft:   #E8F5EE;
    --on-accent:     #FFFFFF;

    --shadow:    0 1px 2px rgba(0,0,0,.08);
    --shadow-md: 0 2px 8px rgba(0,0,0,.12);
    --shadow-lg: 0 4px 16px rgba(0,0,0,.16);

    --sans: 'Pretendard Variable','Pretendard','Malgun Gothic','맑은 고딕',
            -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 다크 모드 — 앱엔 없지만 매뉴얼은 브라우저 탭에서 열려서 OS 설정을 따르는 게 맞다.
   같은 토큰만 다시 정의한다(컴포넌트는 토큰만 보므로 아래 규칙을 안 건드린다). */
@media (prefers-color-scheme:dark){
    :root{
        --bg:#141414; --card:#1E1E1E; --card-2:#252525;
        --line:#333333; --line-light:#2A2A2A;
        --ink:#F0F0F0; --gray:#B0B0B0; --muted:#8A8A8A;
        --danger:#F87171; --danger-soft:#2A1616;
        --gold:#E0B44A; --gold-soft:#2A2415;
        --accent:#4CAF7D; --accent-dark:#7FCBA0; --accent-soft:#16281E; --on-accent:#0F1A13;
        --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 2px 8px rgba(0,0,0,.5);
        --shadow-lg:0 4px 16px rgba(0,0,0,.6);
    }
}
:root[data-theme="dark"]{
    --bg:#141414; --card:#1E1E1E; --card-2:#252525;
    --line:#333333; --line-light:#2A2A2A;
    --ink:#F0F0F0; --gray:#B0B0B0; --muted:#8A8A8A;
    --danger:#F87171; --danger-soft:#2A1616;
    --gold:#E0B44A; --gold-soft:#2A2415;
    --accent:#4CAF7D; --accent-dark:#7FCBA0; --accent-soft:#16281E; --on-accent:#0F1A13;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 2px 8px rgba(0,0,0,.5);
    --shadow-lg:0 4px 16px rgba(0,0,0,.6);
}
/* 🔴 라이트 블록이 없으면 OS 가 다크일 때 data-theme="light" 로 되돌릴 수가 없다.
   위 미디어쿼리가 이미 다크를 칠해놨고, 그걸 되돌릴 규칙이 없기 때문이다.
   토글은 양방향으로 이겨야 한다. */
:root[data-theme="light"]{
    --bg:#FFFFFF; --card:#FFFFFF; --card-2:#F5F5F5;
    --line:#E0E0E0; --line-light:#EFEFEF;
    --ink:#1A1A1A; --gray:#555555; --muted:#888888;
    --danger:#B91C1C; --danger-soft:#FEF2F2;
    --gold:#A16207; --gold-soft:#FFF8E1;
    --accent:#1B7340; --accent-dark:#145A32; --accent-soft:#E8F5EE; --on-accent:#FFFFFF;
    --shadow:0 1px 2px rgba(0,0,0,.08); --shadow-md:0 2px 8px rgba(0,0,0,.12);
    --shadow-lg:0 4px 16px rgba(0,0,0,.16);
}

*{box-sizing:border-box}
body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.7;
    -webkit-font-smoothing:antialiased;
    word-break:keep-all; overflow-wrap:break-word;
}
/* 한글은 어절 단위로만 줄바꿈 — 단어 중간이 끊기면 읽는 속도가 떨어진다 */
h1,h2,h3,h4,p,span,b,em,.step,.beat,.val,.close,.hero,.qa,.two b{word-break:keep-all;overflow-wrap:break-word}
.wrap{max-width:780px;margin:0 auto;padding:24px 20px 72px}

/* ── 상단 네비 ─────────────────────────────────────────────────────────── */
.topnav{
    display:flex; gap:6px; background:var(--card-2);
    border:1px solid var(--line); border-radius:9999px; padding:4px;
    margin:0 auto 24px; width:max-content; max-width:100%; overflow-x:auto;
}
.topnav a{
    font-size:14px; font-weight:600; text-decoration:none; color:var(--gray);
    padding:8px 16px; border-radius:9999px; white-space:nowrap;
}
.topnav a.on{background:var(--accent);color:var(--on-accent)}

/* ── 헤더 ──────────────────────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--accent-dark)}
.brand svg{width:22px;height:22px}
.hero{margin:18px 0 6px}
.hero .kicker{font-size:12.5px;font-weight:600;letter-spacing:.12em;color:var(--accent-dark);text-transform:uppercase}
.hero h1{font-size:38px;line-height:1.18;font-weight:700;margin:8px 0 0;text-wrap:balance;letter-spacing:-.02em}
.hero h1 .g{color:var(--accent-dark)}
.hero p{font-size:17px;color:var(--gray);margin:14px 0 0;max-width:40ch}
.hero p b{color:var(--ink);font-weight:600}

/* ── 흐름 리본 ─────────────────────────────────────────────────────────── */
.ribbon{
    margin:28px 0 6px; background:var(--card); border:1px solid var(--line);
    border-radius:16px; padding:22px 16px 18px; box-shadow:var(--shadow-md);
}
.ribbon h4{text-align:center;font-size:12px;font-weight:600;letter-spacing:.1em;
    color:var(--muted);margin:0 0 18px;text-transform:uppercase}
.flow{position:relative;display:flex;justify-content:space-between;gap:4px}
.flow::before{content:"";position:absolute;top:28px;left:12%;right:12%;height:2px;border-radius:1px;
    background:repeating-linear-gradient(90deg,var(--accent) 0 7px,transparent 7px 14px);opacity:.45}
.beat{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;min-width:0}
.beat .dot{width:56px;height:56px;border-radius:50%;background:var(--card);border:1.5px solid var(--accent);
    display:flex;align-items:center;justify-content:center;z-index:1}
.beat .dot svg{width:24px;height:24px;color:var(--accent-dark)}
.beat b{font-size:13.5px;font-weight:600;line-height:1.3}
.beat span{font-size:11.5px;color:var(--muted);line-height:1.35}

/* ── 섹션 헤더 ─────────────────────────────────────────────────────────── */
.phase{display:flex;align-items:center;gap:12px;margin:44px 0 18px}
.phase .badge{flex:0 0 auto;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--on-accent);
    background:var(--accent);padding:6px 14px;border-radius:9999px;white-space:nowrap}
.phase.gold .badge{background:var(--gold)}
.phase h2{font-size:22px;font-weight:700;margin:0;letter-spacing:-.01em}
.phase .rule{flex:1;height:1px;background:var(--line)}

/* ── 단계 카드 ─────────────────────────────────────────────────────────── */
.track{position:relative}
.step{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:18px;margin-bottom:10px;box-shadow:var(--shadow)}
.num{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--accent);color:var(--on-accent);
    display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.phase-gold-num .num{background:var(--accent);color:var(--on-accent)}
.sb{flex:1;min-width:0}
.sb h3{font-size:19px;font-weight:700;margin:1px 0 6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;letter-spacing:-.01em}
.sb h3 svg{width:20px;height:20px;color:var(--accent-dark);flex:0 0 auto}
.sb p{font-size:16px;color:var(--gray);margin:0}
.sb p+p{margin-top:8px}
.sb p b{color:var(--ink);font-weight:600}

/* ── 강조 박스 ─────────────────────────────────────────────────────────── */
.tip{margin-top:11px;background:var(--accent-soft);border-radius:8px;padding:10px 12px;
    font-size:14.5px;color:var(--accent-dark);display:flex;gap:8px;align-items:flex-start;line-height:1.55}
.tip svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px}
.tip.g{background:var(--accent-soft);color:var(--accent-dark)}
.tip.w{background:var(--danger-soft);color:var(--danger)}
.pill{display:inline-block;background:var(--card-2);border:1px solid var(--line);border-radius:6px;
    padding:1px 8px;font-size:14.5px;font-weight:600;color:var(--accent-dark);font-variant-numeric:tabular-nums}
.key{font-size:11.5px;font-weight:600;color:var(--on-accent);background:var(--accent-dark);
    padding:2px 9px;border-radius:9999px;white-space:nowrap}

/* ── 정모 전용 — 핵심 상자 · 가치 3칸 ──────────────────────────────────── */
.keybox{margin:24px 0 6px;background:var(--gold-soft);border:1px solid var(--gold);
    border-radius:16px;padding:18px 18px 14px}
.keybox .kh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--gold);
    margin-bottom:8px}
.keybox .kh svg{width:20px;height:20px}
.keyrow{display:flex;gap:13px;align-items:flex-start;padding:11px 0}
.keyrow+.keyrow{border-top:1px solid var(--gold);border-top-style:dashed}
.keyrow .kn{flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:var(--gold);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.keyrow .kt{flex:1;min-width:0}
.keyrow .kt b{display:block;font-size:17px;font-weight:600;color:var(--ink);margin:2px 0 3px}
.keyrow .kt span{font-size:15px;color:var(--gray);line-height:1.5}
.keyrow .kt span em{font-style:normal;font-weight:600;color:var(--gold)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:36px 0 0}
.val{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 12px;
    text-align:center;box-shadow:var(--shadow)}
.val .e{font-size:28px;line-height:1}
.val b{display:block;font-size:17px;font-weight:700;margin:8px 0 3px}
.val span{font-size:13px;color:var(--muted);line-height:1.45}

/* ── 모집 전용 — 두 갈래 · 시간표 · 문답 ───────────────────────────────── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0}
.two > div{background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:16px 16px 18px;box-shadow:var(--shadow)}
.two h4{margin:0 0 10px;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.two h4 svg{width:19px;height:19px;flex:0 0 auto}
.two.host h4{color:var(--accent-dark)}
.two ul{margin:0;padding-left:18px}
.two li{font-size:15px;color:var(--gray);margin-bottom:6px;line-height:1.55}
.two li b{color:var(--ink);font-weight:600}

.clock{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 16px;box-shadow:var(--shadow)}
.clock .cr{display:flex;gap:14px;align-items:flex-start;padding:11px 0}
.clock .cr+.cr{border-top:1px solid var(--line-light)}
.clock .ct{flex:0 0 90px;font-size:14px;font-weight:600;color:var(--accent-dark);
    font-variant-numeric:tabular-nums;line-height:1.45}
.clock .cd{flex:1;min-width:0;font-size:15.5px;color:var(--gray);line-height:1.55}
.clock .cd b{color:var(--ink);font-weight:600}

.qa{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px 18px;box-shadow:var(--shadow)}
.qa details{border-bottom:1px solid var(--line-light)}
.qa details:last-child{border-bottom:0}
.qa summary{cursor:pointer;list-style:none;padding:14px 0;font-size:16px;font-weight:600;
    display:flex;gap:10px;align-items:flex-start}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";flex:0 0 auto;width:22px;height:22px;border-radius:6px;
    background:var(--accent-soft);color:var(--accent-dark);font-size:12.5px;font-weight:700;
    display:flex;align-items:center;justify-content:center;margin-top:1px}
.qa p{margin:0 0 15px 32px;font-size:15.5px;color:var(--gray);line-height:1.6}
.qa p b{color:var(--ink);font-weight:600}

/* ── 마무리 ────────────────────────────────────────────────────────────── */
.close{margin-top:40px;background:var(--accent);color:var(--on-accent);
    border-radius:16px;padding:30px 24px;text-align:center;box-shadow:var(--shadow-md)}
.close h2{font-size:23px;font-weight:700;margin:0 0 10px;text-wrap:balance;letter-spacing:-.01em}
.close p{font-size:16px;margin:0;opacity:.93;line-height:1.65;max-width:38ch;margin-inline:auto}
.arc{margin-top:16px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.arc span{background:rgba(255,255,255,.2);border-radius:9999px;padding:5px 13px;font-size:13.5px;font-weight:600}
:root[data-theme="dark"] .arc span{background:rgba(0,0,0,.18)}
@media(prefers-color-scheme:dark){.arc span{background:rgba(0,0,0,.18)}}

.footer{margin-top:28px;text-align:center;font-size:13px;color:var(--muted);line-height:1.8}
.footer .sig{color:var(--gold);font-weight:600}

/* ── 좁은 화면 ─────────────────────────────────────────────────────────── */
@media (max-width:600px){
    body{font-size:16px}
    .wrap{padding:20px 15px 56px}
    /* 🔴 탭이 3개라 375px 에선 한 줄에 안 들어간다. 스크롤로 두면 현재 페이지 탭이
       화면 밖으로 밀려 어느 매뉴얼을 보는지 알 수 없다. */
    .topnav{gap:4px;padding:3px}
    .topnav a{font-size:12.5px;padding:7px 11px}
    .hero h1{font-size:30px}
    .hero p{font-size:16px}
    .beat .dot{width:46px;height:46px}
    .beat .dot svg{width:21px;height:21px}
    .beat b{font-size:12px}
    .beat span{font-size:10.5px}
    .flow::before{top:23px}
    .step{padding:15px 14px;gap:12px}
    .num{width:40px;height:40px;font-size:19px;border-radius:10px}
    .sb h3{font-size:17.5px}
    .sb p{font-size:15.5px}
    .phase h2{font-size:20px}
    .values{gap:8px}
    .val{padding:15px 8px}
    .val b{font-size:15.5px}
    .two{grid-template-columns:1fr}
    .clock .ct{flex-basis:74px;font-size:13px}
    .clock .cd{font-size:14.5px}
}
@media (prefers-reduced-motion:no-preference){
    .step,.val,.beat .dot{transition:transform .15s ease}
}

/* ===== v548 — 읽는 매뉴얼에서 보는 매뉴얼로 =====
   매뉴얼은 길어질 수밖에 없다. 그래서 각 문서 맨 위에 **앱의 그 화면으로 건너가는
   손잡이**를 둔다. 글을 다 읽지 않아도 실제 화면 위에서 바로 확인할 수 있게. */
.see{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
     margin:0 0 26px;padding:15px 17px;border-radius:16px;
     background:linear-gradient(135deg,#12251A 0%,#1B7340 100%);color:#f3ede1}
.see-t{font-size:13.5px;font-weight:700;line-height:1.5;word-break:keep-all;overflow-wrap:break-word}
.see-t span{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.75);margin-top:2px}
.see-go{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
        padding:11px 18px;border-radius:999px;border:0;
        background:#f6c67e;color:#2a1c06;font-size:13.5px;font-weight:700;
        text-decoration:none;white-space:nowrap;cursor:pointer}
.see-go:hover{background:#ffd79a}
.see-go svg{width:16px;height:16px;stroke-width:2.4}
@media (max-width:460px){
  .see{gap:11px}
  .see-go{margin-left:0;width:100%;justify-content:center}
}

/* v549 — 항목별 딥링크. 문서가 길어도 "이 부분만" 앱에서 확인할 수 있다. */
.see-step{display:inline-flex;align-items:center;gap:5px;margin:0 0 9px;
          padding:5px 11px;border-radius:999px;
          border:1px solid var(--line,#eae3d6);background:#fff;
          color:var(--green,#1B7340);font-size:12px;font-weight:700;text-decoration:none}
.see-step:hover{background:var(--green-bg,#eef5f0);border-color:var(--green,#1B7340)}
.see-step svg{width:13px;height:13px}