/* 풀이서 공통: 토큰, 표지, 오행 색, 웹 전용(PDF 아님). 장 안의 글 스타일은 blocks.css / spacing.css */
@font-face { font-family: "Pretendard"; font-weight: 400; src: url("../fonts/Pretendard-Regular.ttf"); }
@font-face { font-family: "Pretendard"; font-weight: 600; src: url("../fonts/Pretendard-SemiBold.ttf"); }

:root {
  --w: 390px;
  --bg: #efe8de;
  /* 오행 색 (목은 시험본에 없어 임시값 — 확인 필요) */
  --wood: #6f8f64;
  --fire: #b0604c;
  --earth: #a89060;
  --metal: #8a8985;
  --water: #58748c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
body { width: var(--w); font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif;  /* 한자는 Pretendard에 없어 뒤쪽 폰트로 */ color: #222; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }

section.page { width: var(--w); padding: 54px 20px 59px; background: var(--bg); overflow: hidden; }
section.page + section.page { break-before: page; }

/* 오행 색 */
.bg-w { background: var(--wood); } .bg-f { background: var(--fire); } .bg-e { background: var(--earth); } .bg-m { background: var(--metal); } .bg-s { background: var(--water); }
.c-w { color: var(--wood); } .c-f { color: var(--fire); } .c-e { color: var(--earth); } .c-m { color: var(--metal); } .c-s { color: var(--water); }

/* ── 표지 ── (값은 시험본 측정: 연도 y60, 제목 y131·179, 한 줄 y515, 차례로 y604, 색 줄 y750·821, 라벨 y893) */
/* 표지 배경: 필요한 기운의 색 위에 고운 입자(grain.jpg)를 얹는다 */
section.page.cover { position: relative; overflow: hidden; min-height: 943px; padding: 57px 20px 0; color: #f2effa; background-color: #070813;
  background-image:
    radial-gradient(62% 36% at 82% 20%, color-mix(in srgb, var(--cover-bg, #c99b57) 34%, transparent), transparent 72%),
    radial-gradient(70% 38% at 8% 88%, color-mix(in srgb, var(--cover-bg2, var(--cover-bg, #c99b57)) 30%, transparent), transparent 72%),
    radial-gradient(52% 30% at 58% 52%, rgba(98, 80, 200, 0.24), transparent 72%); }
section.page.cover > :not(.space) { position: relative; z-index: 1; }
/* 표지는 우주: 필요한 기운의 색이 행성이 되고, 곁에서 돕는 기운의 색이 달이 되어 돈다. 오행 다섯 빛은 별자리로 (웹에서는 아주 천천히 움직이고, PDF·인쇄는 멈춘 모습) */
.space { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.space .stars { position: absolute; inset: 0; background-image:
    radial-gradient(0.6px 0.6px at 171px 160px, rgba(255,255,255,0.63) 45%, transparent 100%),
    radial-gradient(1.1px 1.1px at 54px 380px, rgba(255,255,255,0.39) 45%, transparent 100%),
    radial-gradient(0.7px 0.7px at 50px 450px, rgba(255,255,255,0.52) 45%, transparent 100%),
    radial-gradient(1.1px 1.1px at 36px 852px, rgba(255,255,255,0.55) 45%, transparent 100%),
    radial-gradient(0.8px 0.8px at 304px 69px, rgba(255,255,255,0.69) 45%, transparent 100%),
    radial-gradient(0.7px 0.7px at 29px 576px, rgba(255,255,255,0.36) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 66px 590px, rgba(255,255,255,0.37) 45%, transparent 100%),
    radial-gradient(0.8px 0.8px at 303px 590px, rgba(255,255,255,0.52) 45%, transparent 100%),
    radial-gradient(1.4px 1.4px at 38px 583px, rgba(255,255,255,0.92) 45%, transparent 100%),
    radial-gradient(0.9px 0.9px at 224px 801px, rgba(255,255,255,0.48) 45%, transparent 100%),
    radial-gradient(0.9px 0.9px at 159px 260px, rgba(255,255,255,0.4) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 300px 313px, rgba(255,255,255,0.59) 45%, transparent 100%),
    radial-gradient(0.7px 0.7px at 153px 629px, rgba(255,255,255,0.47) 45%, transparent 100%),
    radial-gradient(0.8px 0.8px at 181px 161px, rgba(255,255,255,0.68) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 45px 788px, rgba(255,255,255,0.63) 45%, transparent 100%),
    radial-gradient(0.8px 0.8px at 180px 717px, rgba(255,255,255,0.62) 45%, transparent 100%),
    radial-gradient(1.5px 1.5px at 41px 866px, rgba(255,255,255,0.92) 45%, transparent 100%),
    radial-gradient(0.8px 0.8px at 39px 68px, rgba(255,255,255,0.53) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 354px 847px, rgba(255,255,255,0.65) 45%, transparent 100%),
    radial-gradient(0.8px 0.8px at 183px 29px, rgba(255,255,255,0.54) 45%, transparent 100%),
    radial-gradient(0.7px 0.7px at 258px 66px, rgba(255,255,255,0.6) 45%, transparent 100%),
    radial-gradient(0.8px 0.8px at 209px 406px, rgba(255,255,255,0.37) 45%, transparent 100%),
    radial-gradient(0.7px 0.7px at 211px 568px, rgba(255,255,255,0.47) 45%, transparent 100%),
    radial-gradient(1.1px 1.1px at 287px 291px, rgba(255,255,255,0.57) 45%, transparent 100%),
    radial-gradient(1.4px 1.4px at 200px 242px, rgba(255,255,255,0.81) 45%, transparent 100%),
    radial-gradient(0.9px 0.9px at 125px 18px, rgba(255,255,255,0.41) 45%, transparent 100%),
    radial-gradient(0.8px 0.8px at 8px 155px, rgba(255,255,255,0.53) 45%, transparent 100%),
    radial-gradient(1.1px 1.1px at 70px 713px, rgba(255,255,255,0.56) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 384px 61px, rgba(255,255,255,0.68) 45%, transparent 100%),
    radial-gradient(0.8px 0.8px at 354px 823px, rgba(255,255,255,0.46) 45%, transparent 100%),
    radial-gradient(0.7px 0.7px at 252px 655px, rgba(255,255,255,0.69) 45%, transparent 100%),
    radial-gradient(1.7px 1.7px at 231px 172px, rgba(255,255,255,0.78) 45%, transparent 100%),
    radial-gradient(1.1px 1.1px at 296px 160px, rgba(255,255,255,0.55) 45%, transparent 100%),
    radial-gradient(0.8px 0.8px at 42px 901px, rgba(255,255,255,0.55) 45%, transparent 100%),
    radial-gradient(0.7px 0.7px at 183px 622px, rgba(255,255,255,0.64) 45%, transparent 100%),
    radial-gradient(0.6px 0.6px at 244px 497px, rgba(255,255,255,0.34) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 181px 764px, rgba(255,255,255,0.36) 45%, transparent 100%),
    radial-gradient(0.9px 0.9px at 17px 216px, rgba(255,255,255,0.36) 45%, transparent 100%),
    radial-gradient(0.7px 0.7px at 284px 33px, rgba(255,255,255,0.56) 45%, transparent 100%),
    radial-gradient(0.9px 0.9px at 52px 718px, rgba(255,255,255,0.66) 45%, transparent 100%),
    radial-gradient(0.9px 0.9px at 188px 796px, rgba(255,255,255,0.5) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 331px 234px, rgba(255,255,255,0.6) 45%, transparent 100%),
    radial-gradient(0.8px 0.8px at 105px 831px, rgba(255,255,255,0.62) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 108px 536px, rgba(255,255,255,0.7) 45%, transparent 100%),
    radial-gradient(0.9px 0.9px at 149px 489px, rgba(255,255,255,0.68) 45%, transparent 100%),
    radial-gradient(1.1px 1.1px at 234px 833px, rgba(255,255,255,0.68) 45%, transparent 100%),
    radial-gradient(0.7px 0.7px at 192px 88px, rgba(255,255,255,0.38) 45%, transparent 100%),
    radial-gradient(1.1px 1.1px at 110px 500px, rgba(255,255,255,0.64) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 251px 937px, rgba(255,255,255,0.33) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 344px 128px, rgba(255,255,255,0.6) 45%, transparent 100%),
    radial-gradient(1.9px 1.9px at 250px 916px, rgba(255,255,255,0.83) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 375px 411px, rgba(255,255,255,0.33) 45%, transparent 100%),
    radial-gradient(0.6px 0.6px at 87px 180px, rgba(255,255,255,0.54) 45%, transparent 100%),
    radial-gradient(0.9px 0.9px at 244px 831px, rgba(255,255,255,0.54) 45%, transparent 100%),
    radial-gradient(0.7px 0.7px at 248px 679px, rgba(255,255,255,0.52) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 16px 20px, rgba(255,255,255,0.34) 45%, transparent 100%),
    radial-gradient(0.7px 0.7px at 77px 450px, rgba(255,255,255,0.65) 45%, transparent 100%),
    radial-gradient(0.9px 0.9px at 20px 263px, rgba(255,255,255,0.61) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 172px 271px, rgba(255,255,255,0.32) 45%, transparent 100%),
    radial-gradient(0.9px 0.9px at 384px 368px, rgba(255,255,255,0.63) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 270px 436px, rgba(255,255,255,0.35) 45%, transparent 100%),
    radial-gradient(1.0px 1.0px at 83px 542px, rgba(255,255,255,0.61) 45%, transparent 100%),
    radial-gradient(0.7px 0.7px at 317px 10px, rgba(255,255,255,0.36) 45%, transparent 100%),
    radial-gradient(1.3px 1.3px at 322px 748px, rgba(255,255,255,0.92) 45%, transparent 100%); }
.sys { position: absolute; left: 0; top: 150px; width: 390px; height: 400px; }
/* 행성(.pl): NASA·ESA 공개 사진(static/planets, tools/make_planets.py). 사진의 실제 색을 그대로 둔다 (후광 없음) */
.pl { position: absolute; display: block; isolation: isolate; background: center / contain no-repeat var(--img); }
.pl.wood  { --img: url(planets/wood.webp);  --img-s: url(planets/wood-s.webp);  --halo: #8fd18a; }   /* 木 = 목성 */
.pl.fire  { --img: url(planets/fire.webp);  --img-s: url(planets/fire-s.webp);  --halo: #ff8f63; }   /* 火 = 화성 */
.pl.earth { --img: url(planets/earth.webp); --img-s: url(planets/earth-s.webp); --halo: #f2c46b; }   /* 土 = 토성 */
.pl.metal { --img: url(planets/metal.webp); --img-s: url(planets/metal-s.webp); --halo: #e3e9f0; }   /* 金 = 금성 */
.pl.water { --img: url(planets/water.webp); --img-s: url(planets/water-s.webp); --halo: #6fb2ff; }   /* 水 = 수성 */
.planet { left: 95px; top: 90px; width: 200px; height: 200px; }
.planet.earth { left: 5px; top: 114px; width: 380px; height: 152px; }                                    /* 토성은 고리까지 */
.moon { left: -31px; top: -31px; width: 62px; height: 62px; }
.moon.earth { left: -42px; top: -17px; width: 84px; height: 34px; }
.planet-name { position: absolute; left: 0; right: 0; top: 302px; text-align: center; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.9); }
.planet-name b { display: block; font-weight: 600; }
.planet-name .pn-colors { display: flex; justify-content: center; gap: 12px; margin: 8px 0 6px; font-size: 14px; line-height: 22px; font-weight: 600; color: #fff; }
.planet-name .pn-colors span { display: inline-flex; align-items: center; margin: 0; font-size: 14px; color: #fff; }
.pn-colors i { display: inline-block; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.75); }
.planet-name .pn-colors .pn-label { margin-right: 2px; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.62); }
.planet-name span { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, 0.62); }
.pl.on3d { background-image: none; }
.planet.earth.on3d { top: 90px; height: 200px; }                                   /* 3D 토성: 고리가 기울어 보이도록 위아래를 조금 더 쓴다 (가운데는 그대로) */
.moon.earth.on3d { top: -22px; height: 44px; }
.moonorb { position: absolute; left: 195px; top: 190px; width: 0; height: 0; }
.mx, .my { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mx { transform: translateX(89px); }
.my { transform: translateY(-96px); }
@keyframes orb-x { from { transform: translateX(138px); } to { transform: translateX(-138px); } }
@keyframes orb-y { from { transform: translateY(125px); } to { transform: translateY(-125px); } }
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  body.web .mx { animation: orb-x 45s cubic-bezier(.37, 0, .63, 1) -77.5s infinite alternate; }
  body.web .my { animation: orb-y 45s cubic-bezier(.37, 0, .63, 1) -55.0s infinite alternate; }
    body.web .space .stars { animation: twinkle 14s ease-in-out infinite alternate; }
}
section.page.cover > .cover-q { position: absolute; left: 20px; top: 102px; font-size: 12.5px; line-height: 18px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.62); }
.cover .year { text-align: left; font-size: 15px; line-height: 24px; }
.cover h1 { margin-top: 48.8px; font-size: 38px; line-height: 48px; font-weight: 400; color: #fff; }
.cover .why { margin-top: 30px; }                       /* 왜 이 별빛이 필요한가 — 엔진이 계산한 이유를 쉬운 말로 */
.cover .why-h { font-size: 12.5px; line-height: 18px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.62); }
.cover .why-row { margin-top: 12px; }
.cover .why-row b { display: inline-block; padding: 1px 9px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; font-size: 11.5px; line-height: 18px; font-weight: 600; color: #fff; }
.cover .why-row p { margin-top: 5px; font-size: 14.5px; line-height: 23px; color: rgba(255, 255, 255, 0.92); word-break: keep-all; }
.cover .why-end { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.28); font-size: 15px; line-height: 24px; font-weight: 600; color: #fff; word-break: keep-all; }
.cover .tagline { margin-top: 336px; font-size: 20px; line-height: 30px; font-weight: 600; }
.cover .mystar { margin-top: 300px; text-align: center; }          /* 내가 어떤 별인지 — 큰 행성과 이름 바로 아래 */
.cover .mystar small { display: block; font-size: 12.5px; line-height: 18px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.62); }
.cover .mystar b { display: block; margin-top: 3px; font-size: 21px; line-height: 30px; font-weight: 600; color: #fff; word-break: keep-all; text-shadow: 0 0 14px rgba(255, 255, 255, 0.35); }
section.page.cover#cover { min-height: 600px; padding-bottom: 0; }                  /* 표지는 내 별 하나만 — 아래 '나를 도와줄 별' 장이 이어진다 */
.cover .mytraits { margin-top: 26px; text-align: center; }          /* 내 별의 특징 — 02장 첫 줄의 키워드 */
.cover .mytraits small { display: block; font-size: 12.5px; line-height: 18px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.62); }
.cover .mytraits p { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cover .mytraits span { padding: 3px 13px; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 999px; font-size: 14px; line-height: 22px; font-weight: 600; color: #fff; }
.cover.helpers h1 { margin-top: 72.8px; }
/* 가장 필요한 별 · 곁에서 돕는 별: 좌우 두 카드. 행성은 카드 안에 맞춰 자전한다 */
.hcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.hcards.one { grid-template-columns: 1fr; width: 60%; margin-left: auto; margin-right: auto; }
.hcard { padding: 14px 10px 16px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px; text-align: center; color: #fff;
         background: linear-gradient(165deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)); }
.hcard.wood { --halo: #8fd18a; } .hcard.fire { --halo: #ff8f63; } .hcard.earth { --halo: #f2c46b; } .hcard.metal { --halo: #e3e9f0; } .hcard.water { --halo: #6fb2ff; }
.hc-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0.02em; }
.hc-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--halo, #fff); }
.hcard .pl.planet { position: relative; left: auto; top: auto; width: 116px; height: 116px; margin: 12px auto 8px; }
.hcard .pl.planet.earth { width: calc(100% + 8px); margin-left: -4px; margin-right: -4px; height: 116px; }       /* 토성은 고리까지 카드 폭을 쓴다 */
.hc-name { font-size: 14px; line-height: 20px; font-weight: 600; }
.hc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 8px; font-size: 12.5px; line-height: 18px; color: rgba(255, 255, 255, 0.92); }
.hc-chips span { display: inline-flex; align-items: center; }
.hc-chips i { width: 11px; height: 11px; margin-right: 4px; border-radius: 50%; border: 1.2px solid rgba(255, 255, 255, 0.75); }
.cover.helpers .tagline { margin-top: 30px; }                      /* 위쪽 글자(year)를 없앤 만큼 내려서 제목 자리는 그대로 */
.cover.helpers .luck { margin-top: 60px; }
.cover.helpers .cover-links { margin-top: 30px; padding-bottom: 36px; }   /* 차례로 · 내 별 소개 → 는 이 장의 맨 아래 */
.cover .cover-links { display: flex; justify-content: space-between; align-items: center; margin-top: 44px; }
.cover .cover-links a { margin: 0; font-size: 15px; line-height: 24px; }
.cover .cover-links .next-star { font-weight: 600; color: #fff; }
.cover .toc-link { display: block; margin-top: 20px; text-align: right; font-size: 15px; line-height: 24px; }
.cover .luck { margin-top: 44px; }
.cover .luck-row { display: flex; align-items: center; gap: 18px; height: 71px; border-top: 1px solid rgba(255, 255, 255, 0.45); color: #fff; }
.cover .dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #fff; flex: none; }
.cover .luck-row b { display: block; font-size: 16px; line-height: 25px; font-weight: 600; }
.cover .luck-row span { display: block; margin-top: 3px; font-size: 13px; line-height: 20px; }
.cover .luck-label { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.45); font-size: 13px; line-height: 20px; color: #fff; }

/* ── 웹으로 볼 때만: 가운데 정렬 + 하단 다운로드 버튼 (PDF에는 안 나옴) ── */
/* 바깥은 한 톤 어둡게, 풀이서 칸은 그림자로 띄워서 장 배경색이 바깥과 같아도 경계가 보이게 */
html:has(body.web) { background: #d9d4cb; }
body.web { margin: 0 auto; padding-bottom: 88px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 8px 48px rgba(60, 45, 25, 0.22); }
.dock { position: fixed; z-index: 30; left: 50%; bottom: 20px; transform: translateX(-50%); width: 350px; display: flex; gap: 8px; }
.dock::before { content: ""; position: absolute; left: -24px; right: -24px; top: -28px; bottom: -20px; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .22), transparent); }   /* 버튼 뒤를 살짝 어둡게 깔아 글자와 구분 */
.topback { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; z-index: 30; display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 14px 0 8px; border-radius: 20px; background: rgba(36, 26, 16, .82); color: #f6f0e6; font-size: 15px; font-weight: 600; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.topback svg { width: 20px; height: 20px; }
.topback:active { transform: scale(.97); }
.dl, .home { display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb, 201, 155, 87), .9); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); color: #241a10; border-radius: 14px; transition: transform var(--spring-smooth-dur, .5s) var(--spring-smooth, ease-out); }
.dl { flex: 1; padding: 16px; font-size: 16px; font-weight: 600; box-shadow: 0 10px 28px rgba(0, 0, 0, .34), 0 2px 6px rgba(0, 0, 0, .22), 0 0 0 1px rgba(36, 26, 16, .22); }   /* 표지색과 비슷해도 버튼이 떠 보이게 그림자·테두리 */
.home { flex: none; width: 56px; background: rgba(36,26,16,.88); color: #f6f0e6; box-shadow: 0 10px 28px rgba(0, 0, 0, .34), 0 2px 6px rgba(0, 0, 0, .22); }   /* PDF 버튼(금색)과 구분되는 짙은 갈색 */
.home svg { width: 24px; height: 24px; }
.dl:active, .home:active { transform: scale(.97); transition-duration: 90ms; transition-timing-function: ease-out; }
@media (prefers-reduced-transparency: reduce) { .dl, .home { -webkit-backdrop-filter: none; backdrop-filter: none; } .dl { background: rgb(var(--accent-rgb, 201, 155, 87)); } .home { background: #241a10; } }
@media print { .dock, .topback { display: none; } }
/* 스크롤 등장 — 웹에서 JS가 켜졌을 때만. PDF(print)에는 영향 없음 */
@media screen {
  html.rv-on .rv { opacity: 0; transform: translateY(18px); }
  /* 이동 대상(id)은 위치를 밀지 않고 투명도로만 — 링크로 도착했을 때 제목이 잘리지 않게 */
  html.rv-on .rv[id] { transform: none; }
  html.rv-on .rv.in { opacity: 1; transform: none; transition: opacity 360ms ease-out, transform var(--spring-smooth-dur, .56s) var(--spring-smooth, ease-out); }
}