/* 2026 성남 트레일레이스 · RaceVibe 사용 매뉴얼 — 공통 서식
   🔴 글자 최소 · 그림 중심(사용자 지시 2026-09-10 · 2026-09-11).
   🔴 야외에서 폰으로 읽는다 — 글자 크고, 대비 높고, 가로 스크롤이 생기면 안 된다.
   🔴 강조색은 둘뿐이다(W-68): 라임 = 행동 · 코럴 #FF6B3D = 사람·응원. 새 색을 만들지 마라.
   ⛔ 이름·전화번호·인증코드·비밀번호를 이 파일이나 shot/ 에 넣지 마라. */
:root{--bg:#0f1512;--card:#18211d;--line:#2a3630;--fg:#eaf2ed;--dim:#9db3a8;
      --accent:#c8f560;--warn:#ffd479;--bad:#ff8a80;--cheer:#FF6B3D;--ink:#12200a}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
     font:17px/1.65 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
     padding:22px 14px 80px;overflow-x:hidden;word-break:keep-all}
.wrap{max-width:640px;margin:0 auto}
h1{font-size:26px;margin:0 0 4px;letter-spacing:-.01em}
.sub{color:var(--dim);font-size:14px;margin:0 0 10px}
.who{display:inline-block;background:var(--accent);color:var(--ink);font-weight:800;
     font-size:13px;padding:5px 12px;border-radius:999px;margin:0 0 22px}
.who.org{background:#7fd1ff;color:#0a1d2a}
.who.cheer{background:var(--cheer);color:#2a1008}
a{color:var(--accent)}
a.back{display:inline-block;color:var(--dim);font-size:14px;text-decoration:none;
       margin:0 0 14px;padding:6px 0}
h2{font-size:20px;margin:34px 0 12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
h2 em{font-style:normal;font-size:13px;color:var(--dim);font-weight:400}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:0 0 12px;overflow:hidden}
.step .n{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line)}
.step .n i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
           background:var(--accent);color:var(--ink);font-style:normal;font-weight:800;font-size:15px;flex:0 0 auto}
.step .n b{font-size:18px;line-height:1.35}
.step .body{padding:14px 15px}
.step p{margin:0 0 8px}
.step p:last-child{margin:0}
.tiny{color:var(--dim);font-size:14px;line-height:1.6}
figure{margin:12px 0 0}
figure svg,figure img{display:block;width:100%;max-width:100%;height:auto;border-radius:10px;
                      border:1px solid var(--line);background:#0b110e}
figcaption{color:#7d9186;font-size:12.5px;text-align:center;margin:6px 0 0;line-height:1.5}
/* 🔴 실제 화면 사진이 들어갈 자리. 사진이 준비되면 <img> 로 바꾼다. */
.ph{display:grid;place-items:center;gap:2px;min-height:110px;color:#8fa398;font-size:13px;
    text-align:center;border:2px dashed #3d4f46;border-radius:10px;margin:12px 0 0;padding:16px 12px}
.ph b{color:var(--warn);font-size:12px;letter-spacing:.04em;display:block;margin:0 0 6px}
.warn{border-color:#5a4a1a;background:#241f10}
.warn .n{border-color:#5a4a1a}.warn .n i{background:var(--warn)}
.bad{border-color:#5a2a26;background:#241312}
.bad .n{border-color:#5a2a26}.bad .n i{background:var(--bad)}
.good{border-color:#2f5a2a;background:#12210f}
.good .n{border-color:#2f5a2a}
.cheerbox{border-color:#5a3a2a;background:#241610}
.cheerbox .n{border-color:#5a3a2a}.cheerbox .n i{background:var(--cheer);color:#2a1008}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:15px;margin:8px 0 0}
.kv dt{color:var(--dim);white-space:nowrap}
.kv dd{margin:0}
code{background:#0b110e;padding:2px 6px;border-radius:5px;font-size:14px;word-break:break-all}
/* 🔴 「근무 시작」이 회색인 이유 다섯. 화면 문구를 **그대로** 인용하고 할 일을 붙인다.
   ⛔ `.kv dt` 로 쓰지 마라 — `white-space:nowrap` 이라 긴 문장이 가로 스크롤을 만든다. */
.why{display:grid;gap:10px;margin:12px 0 0}
.why>div{background:#0b110e;border:1px solid var(--line);border-left:4px solid var(--warn);
         border-radius:10px;padding:12px 13px}
.why q{display:block;quotes:none;font-weight:800;font-size:16px;line-height:1.5;color:var(--warn)}
.why q::before{content:"「"}.why q::after{content:"」"}
.why p{margin:7px 0 0;color:var(--dim);font-size:15px;line-height:1.6}
.why p b{color:var(--fg)}
.why>div.ok{border-left-color:var(--accent)}
.why>div.ok q{color:var(--accent)}
/* 역할 고르기 — 야외에서 장갑 낀 손으로도 눌리도록 크게 */
.roles{display:grid;gap:10px}
.role{display:block;background:#0b110e;border:1px solid var(--line);border-radius:12px;
      padding:16px;text-decoration:none;color:var(--fg);min-height:76px}
.role b{display:block;font-size:19px;margin:0 0 4px}
.role span{color:var(--dim);font-size:14px;line-height:1.5}
.role.runner{border-color:#3f5a34}.role.runner b{color:var(--accent)}
.role.staff{border-color:#4a4030}.role.staff b{color:var(--warn)}
.role.cheer{border-color:#5a3a2a}.role.cheer b{color:var(--cheer)}
/* 내려받기 단추 */
.dl{display:block;background:var(--accent);color:var(--ink);font-weight:800;font-size:19px;
    text-align:center;padding:18px;border-radius:12px;text-decoration:none;margin:4px 0 8px}
.foot{color:var(--dim);font-size:13px;text-align:center;margin-top:36px}

/* 세로로 긴 폰 화면 사진 — 폭을 100% 로 늘리면 카드 하나를 통째로 먹는다. */
figure.shotfig img{width:auto;max-width:290px;margin:0 auto;border-radius:12px}
figure.shotfig figcaption{margin:8px 0 0;text-align:center;font-size:13px;color:#8fa398}
figure.shotfig figcaption .tiny{display:block;margin:3px 0 0}