/* ═══════════════════════════════════════════════════════════════
   사주헌 홈 — home-premium/css/home.css
   기준: home-premium/DESIGN_SPEC.md (토큰 → 기본 → 섹션 → 반응형 → 모션 → 숫자 규칙)
   이 페이지의 모든 클래스는 hp- 접두사. 공용 tokens/components/auth.css 뒤에 읽힌다.
   ═══════════════════════════════════════════════════════════════ */

/* ───────── 서체(자체 서브셋 4종 — tools/build_fonts.py) ───────── */
@font-face{font-family:"HP Serif";src:url(/home-premium/fonts/maru-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"HP Serif";src:url(/home-premium/fonts/maru-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"HP Sans";src:url(/home-premium/fonts/pret-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"HP Sans";src:url(/home-premium/fonts/pret-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ───────── 1. 토큰 ───────── */
:root{
  /* 밤 — 히어로·사판·고정바 */
  --hp-night-0:#0b0a09;
  --hp-night-1:#11100e;
  --hp-night-rule:#2d2924;
  --hp-lamp:#ede4d3;
  --hp-lamp-2:#bdb19d;
  --hp-lamp-3:#91877a;
  --hp-amber:#c6a26a;
  /* 종이 */
  --hp-paper:#efe8da;
  --hp-paper-2:#e6ddcb;
  --hp-paper-faq:#e9e1d1;
  --hp-paper-deep:#e4dac7;
  --hp-sheet:#f4efe6;
  --hp-sheet-edge:#d9cfbd;
  --hp-ink:#1f1c18;
  --hp-ink-2:#575046;
  --hp-ink-3:#8a8172;
  --hp-rule-p:#d4c9b5;
  --hp-amber-p:#7a5c30;
  /* 사주동자 */
  --hp-dongja-paper:#f6efe2;
  --hp-celadon:#5d8371;
  --hp-celadon-deep:#45685a;
  /* 점 하나씩 */
  --hp-seal:#a8322d;
  --hp-ribbon:#8a5a36;

  /* 서체 스택 */
  --hp-f-serif:"HP Serif","Noto Serif KR","AppleMyungjo","Batang",serif;
  --hp-f-hanja:"Noto Serif KR","AppleMyungjo","Batang",serif;
  --hp-f-sans:"HP Sans",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  --hp-f-latin:"Cormorant Garamond","HP Serif",serif;
  --hp-f-voice:"Gowun Batang","HP Serif",serif;
  /* 공용 로그인 모달도 같은 서체로 */
  --font-serif:var(--hp-f-serif);
  --font-sans:var(--hp-f-sans);

  /* 크기 */
  --hp-fs-display:clamp(40px,5.7vw,86px);
  --hp-fs-coda:clamp(36px,5vw,76px);
  --hp-fs-h2:clamp(30px,3.5vw,52px);
  --hp-fs-lead:clamp(16px,1.3vw,18.5px);
  --hp-fs-clock:clamp(64px,8.4vw,120px);

  /* 간격 */
  --hp-s-1:4px;--hp-s-2:8px;--hp-s-3:12px;--hp-s-4:16px;--hp-s-5:24px;--hp-s-6:32px;
  --hp-s-7:40px;--hp-s-8:56px;--hp-s-9:72px;--hp-s-10:96px;--hp-s-11:120px;
  --hp-sec:clamp(88px,11vw,168px);
  --hp-gap-t:30px;                 /* 제목→본문 */

  /* 그리드 */
  --hp-gutter:clamp(20px,4.4vw,72px);
  --hp-cgap:24px;

  /* 움직임 */
  --hp-ease:cubic-bezier(.19,1,.22,1);
  --hp-ease-ui:cubic-bezier(.4,0,.2,1);
  --hp-ease-lamp:cubic-bezier(.45,.05,.2,1);
  --hp-t-ui:240ms;

  /* 사판 첫 장 위치 = S1 빛 웅덩이 중심(r1: 사진 상위 3% 밝기 무게중심 42.8% 43.2% 실측) */
  --hp-sheet-x:43%;
  --hp-sheet-y:44%;
}

/* ───────── 2. 기본 ───────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px;background:var(--hp-night-0)}
body{margin:0;background:var(--hp-paper);color:var(--hp-ink);font:400 17px/1.8 var(--hp-f-sans);letter-spacing:-.01em;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-family:var(--hp-f-serif);font-weight:300;font-feature-settings:"palt";text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{-webkit-tap-highlight-color:transparent}
b,strong{font-weight:500}
::selection{background:rgba(198,162,106,.32)}

/* 포커스: 종이 위 먹, 어둠 위 등불 */
:focus{outline:none}
:focus-visible{outline:2px solid var(--hp-ink);outline-offset:4px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.hp-hero :focus-visible,.hp-sapan :focus-visible,.hp-dock :focus-visible,
.hp-nav.is-hero :focus-visible,.hp-nav.is-night :focus-visible{outline-color:var(--hp-lamp)}
.hp-btn:focus-visible{outline-offset:3px}

.hp-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hp-skip{position:fixed;left:16px;top:-80px;z-index:100;padding:15px 18px;background:var(--hp-lamp);color:var(--hp-night-0);font:500 14px/1 var(--hp-f-sans);transition:top .24s var(--hp-ease-ui)}
.hp-skip:focus{top:16px}
.hp-wrap{width:100%;max-width:calc(1280px + var(--hp-gutter) * 2);margin:0 auto;padding:0 var(--hp-gutter)}
.hp-hj{font-family:var(--hp-f-hanja);font-weight:300;letter-spacing:.08em}
.hp-nw{white-space:nowrap}
@media (min-width:761px){br.hp-m{display:none}}
@media (max-width:760px){br.hp-d{display:none}}

/* 그레인 — 고정 레이어 한 장, 불투명도만 */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .48  0 0 0 0 .45  0 0 0 1.4 -.45'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:180px 180px}

/* ───────── 공통 부품 ───────── */
/* 섹션 라벨: 28px 선 + 번호(Cormorant) + 한글 13px */
.hp-label{display:flex;align-items:center;gap:12px;font:500 13px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-amber-p)}
.hp-label::before{content:"";flex:none;width:28px;height:1px;background:currentColor}
.hp-label__no{font:500 15px/1 var(--hp-f-latin);letter-spacing:.02em}
.hp-label--night{color:var(--hp-lamp-2)}
.hp-label--night::before{background:var(--hp-amber)}
.hp-label--night .hp-label__no{color:var(--hp-amber)}
.hp-label--celadon{color:var(--hp-celadon-deep);flex-wrap:wrap}
.hp-label__hj{font:300 13px/1 var(--hp-f-hanja);letter-spacing:.2em}

.hp-h2{margin-top:28px;font-size:var(--hp-fs-h2);line-height:1.28;letter-spacing:-.03em;color:var(--hp-ink)}
.hp-h3{font:400 22px/1.4 var(--hp-f-serif);letter-spacing:-.015em;color:var(--hp-ink)}
.hp-lead{margin-top:var(--hp-gap-t);max-width:30em;font:400 var(--hp-fs-lead)/1.85 var(--hp-f-serif);letter-spacing:-.005em;color:var(--hp-ink-2)}

/* 줄 단위 */
.hp-ln{display:block}
.hp-ln>span{display:block}
.hp-mask .hp-ln{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}

/* 뜻풀이(私版·書架) */
.hp-meaning{grid-column:9/span 4;justify-self:end;text-align:right;font:400 14px/1.7 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp-3)}
.hp-meaning__hj{display:block;margin:0 -.18em 14px 0;font:300 40px/1 var(--hp-f-hanja);letter-spacing:.18em;color:var(--hp-lamp-2)}
.hp-meaning__tx{display:block}

/* 섹션 머리(왼쪽 라벨+H2 / 오른쪽 뜻풀이) */
.hp-sechead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hp-cgap);align-items:end}
.hp-sechead__main{grid-column:1/span 8}
.hp-sechead__main--7{grid-column:1/span 7}

/* 도판 캡션 */
.hp-cap{margin-top:16px;display:flex;align-items:baseline;gap:14px;font:400 13px/1.6 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp-3)}
.hp-cap>span:last-child{max-width:36em;text-wrap:balance}
.hp-pl{flex:none;font:500 15px/1 var(--hp-f-latin);letter-spacing:.02em;color:var(--hp-amber)}

/* 버튼 */
.hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 30px;border:0;border-radius:0;
  font:500 15px/1 var(--hp-f-sans);letter-spacing:0;white-space:nowrap;cursor:pointer;
  transition:background-color var(--hp-t-ui) var(--hp-ease-ui),color var(--hp-t-ui) var(--hp-ease-ui),box-shadow var(--hp-t-ui) var(--hp-ease-ui)}
.hp-btn--lamp{background:var(--hp-lamp);color:var(--hp-night-0)}
.hp-btn--lamp:hover{background:#f6eedf}
.hp-btn--ink{background:var(--hp-ink);color:var(--hp-paper)}
.hp-btn--ink:hover{background:#0f0d0b}
.hp-btn--line{background:transparent;color:var(--hp-ink);box-shadow:inset 0 0 0 1px var(--hp-ink)}
.hp-btn--line:hover{background:rgba(31,28,24,.05)}
.hp-btn--celadon{background:var(--hp-celadon-deep);color:#f7f1e6}
.hp-btn--celadon:hover{background:#38574a}
.hp-btn__sep{flex:none;width:1px;height:14px;background:currentColor;opacity:.3}
.hp-btn__price{font-size:13px;font-weight:400;color:#5b5347}
.hp-btn--ink .hp-btn__price{color:#cfc5b2}
.hp-btn--table{width:100%;height:48px;padding:0 16px}
.hp-arr{flex:none;position:relative;width:18px;height:1px;background:currentColor;transition:transform var(--hp-t-ui) var(--hp-ease-ui)}
.hp-arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);transform-origin:center}
a:hover>.hp-arr,a:focus-visible>.hp-arr{transform:translateX(4px)}

/* 밑줄 링크: 밑줄이 오른쪽으로 빠진다(.5s expo-out) */
.hp-tlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:400 15px/1.4 var(--hp-f-sans);letter-spacing:0;color:inherit}
.hp-tlink>span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .5s var(--hp-ease)}
.hp-tlink:hover>span,.hp-tlink:focus-visible>span{background-size:0 1px;background-position:100% 100%}
.hp-tlink .hp-arr{width:14px}
.hp-mail{padding:15px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 16px)/100% 1px no-repeat;transition:background-size .5s var(--hp-ease)}
.hp-mail:hover{background-size:0 1px;background-position:100% calc(100% - 16px)}

/* ═══════════════════ 3. 섹션 ═══════════════════ */

/* ───────── 0. 머리 ───────── */
.hp-nav{position:fixed;top:0;left:0;right:0;z-index:50;height:84px;color:var(--hp-lamp);background-color:rgba(11,10,9,0);border-bottom:1px solid transparent;
  transition:background-color .4s var(--hp-ease-ui),color .4s var(--hp-ease-ui),border-color .4s var(--hp-ease-ui),height .4s var(--hp-ease-ui)}
.hp-nav.is-scrolled{height:64px}
.hp-nav.is-night{background-color:rgba(11,10,9,.94);border-bottom-color:var(--hp-night-rule)}
.hp-nav.is-paper{background-color:rgba(239,232,218,.94);border-bottom-color:var(--hp-rule-p);color:var(--hp-ink)}
.hp-nav__in{height:100%;max-width:calc(1280px + var(--hp-gutter) * 2);margin:0 auto;padding:0 var(--hp-gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.hp-brand{justify-self:start;display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap;color:inherit;min-height:44px;align-self:center;padding-top:12px}
.hp-brand__ko{font:400 21px/1 var(--hp-f-serif);letter-spacing:-.02em}
.hp-brand__hj{font:300 13px/1 var(--hp-f-hanja);letter-spacing:.22em;color:var(--hp-lamp-2);transition:color .4s var(--hp-ease-ui)}
.hp-nav.is-paper .hp-brand__hj{color:var(--hp-ink-2)}
.hp-nav__links{display:flex;align-items:center;gap:36px}
.hp-nav__links a{display:inline-flex;align-items:center;min-height:40px;font:400 14px/1 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp-2);transition:color var(--hp-t-ui) var(--hp-ease-ui)}
.hp-nav__links a:hover{color:var(--hp-lamp)}
.hp-nav.is-paper .hp-nav__links a{color:var(--hp-ink-2)}
.hp-nav.is-paper .hp-nav__links a:hover{color:var(--hp-ink)}
.hp-nav__act{justify-self:end;display:flex;align-items:center;gap:22px}
/* 공용 로그인 버튼·'닉네임 님' — 머리 톤을 그대로 따른다(공용 auth.css 덮기) */
.hp-nav #headerAuthArea{display:inline-flex;align-items:center}
.hp-nav .header-auth{position:relative}
.hp-nav .header-login-btn,.hp-nav .header-user-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 2px;background:none;border:0;color:inherit;font:400 14px/1 var(--hp-f-sans);letter-spacing:0;cursor:pointer;opacity:.86;transition:opacity var(--hp-t-ui) var(--hp-ease-ui)}
.hp-nav .header-login-btn:hover,.hp-nav .header-user-btn:hover{opacity:1}
.hp-nav .header-user-arrow{border-color:currentColor;width:6px;height:6px}
/* 머리 CTA(40px) — 톤에 따라 선 → 등불 → 먹 */
.hp-btn--nav{height:40px;padding:0 18px;font-size:13px;background:transparent;color:var(--hp-lamp);box-shadow:inset 0 0 0 1px rgba(237,228,211,.42)}
.hp-btn--nav:hover{background:rgba(237,228,211,.08)}
.hp-nav.is-night .hp-btn--nav{background:var(--hp-lamp);color:var(--hp-night-0);box-shadow:none}
.hp-nav.is-night .hp-btn--nav:hover{background:#f6eedf}
.hp-nav.is-paper .hp-btn--nav{background:var(--hp-ink);color:var(--hp-paper);box-shadow:none}
.hp-nav.is-paper .hp-btn--nav:hover{background:#0f0d0b}
/* 목차 버튼: 두 줄 → X */
.hp-tocbtn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;color:inherit;font:500 13px/1 var(--hp-f-sans);letter-spacing:0}
.hp-tocbtn__ic{position:relative;flex:none;width:22px;height:9px}
.hp-tocbtn__ic::before,.hp-tocbtn__ic::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .4s var(--hp-ease)}
.hp-tocbtn__ic::before{top:0}
.hp-tocbtn__ic::after{bottom:0}
.hp-tocbtn[aria-expanded="true"] .hp-tocbtn__ic::before{transform:translateY(4px) rotate(45deg) scaleX(.8)}
.hp-tocbtn[aria-expanded="true"] .hp-tocbtn__ic::after{transform:translateY(-4px) rotate(-45deg) scaleX(.8)}
.hp-tocbtn__tx{min-width:2.1em}

/* ───────── 목차(전체 메뉴) ───────── */
.hp-toc{position:fixed;inset:0;z-index:45;overflow-y:auto;overscroll-behavior:contain;background:var(--hp-sheet);color:var(--hp-ink);
  padding:calc(64px + 56px) 0 64px;opacity:0;visibility:hidden;transition:opacity .32s var(--hp-ease-ui),visibility 0s linear .32s}
.hp-toc.is-open{opacity:1;visibility:visible;transition:opacity .32s var(--hp-ease-ui),visibility 0s}
.hp-toc__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hp-cgap);align-items:start;transform:translateY(8px);transition:transform .4s var(--hp-ease)}
.hp-toc.is-open .hp-toc__in{transform:none}
.hp-toc__col--a{grid-column:1/span 4}
.hp-toc__col--b{grid-column:5/span 4}
.hp-toc__col--c{grid-column:9/span 4}
.hp-toc__title{font:300 56px/1.05 var(--hp-f-serif);letter-spacing:-.03em;color:var(--hp-ink)}
.hp-toc__desc{margin-top:16px;font:400 14px/1.6 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-toc__part{margin:0 0 10px;font:500 13px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-amber-p)}
.hp-toc__col--a .hp-toc__part{margin-top:48px}
.hp-toc__col--c .hp-toc__list+.hp-toc__part{margin-top:40px}
.hp-toc__list{border-top:1px solid var(--hp-rule-p)}
.hp-toc__list a{display:flex;align-items:baseline;gap:12px;min-height:48px;padding:11px 0;border-bottom:1px solid var(--hp-rule-p);
  font:400 19px/1.35 var(--hp-f-serif);letter-spacing:-.015em;color:var(--hp-ink);transition:color var(--hp-t-ui) var(--hp-ease-ui)}
.hp-toc__list a:hover{color:var(--hp-amber-p)}
.hp-toc__no{flex:none;width:28px;font:500 15px/1 var(--hp-f-latin);letter-spacing:.02em;color:var(--hp-amber-p)}
.hp-toc__nm{min-width:0}
.hp-toc__lead{flex:1;min-width:16px;border-bottom:1px dotted #a99d88;transform:translateY(-5px)}
.hp-toc__pr{flex:none;font:400 14px/1 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-toc__legal{margin-top:36px;font:400 13px/1.9 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-toc__legal a{display:inline-block;padding:12px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 12px)/100% 1px no-repeat}
html.hp-toc-open{overflow:hidden}
.hp-toc-open #headerAuthArea{visibility:hidden}

/* ───────── 1. 히어로 '밤의 서재' ───────── */
.hp-hero{position:relative;height:100vh;height:100svh;min-height:640px;max-height:1100px;overflow:hidden;isolation:isolate;background:#0b0a09;color:var(--hp-lamp)}
.hp-hero__media{position:absolute;inset:0;z-index:0;transform-origin:70% 45%}
.hp-hero__media picture{position:absolute;inset:0;display:block}
.hp-hero__poster,.hp-hero__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% 55%}
.hp-hero__video{opacity:0;pointer-events:none;transition:opacity 2.2s var(--hp-ease-ui)}
.hp-hero__video.is-playing{opacity:1}
.hp-hero__video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.hp-hero__video::-webkit-media-controls{display:none!important}
.hp-hero__fog{position:absolute;left:0;bottom:-6%;width:200%;height:62%;pointer-events:none;opacity:.26;will-change:transform;
  background:url(/home-premium/assets/fog.webp) repeat-x 0 100%/50% 100%;transition:opacity 2.4s var(--hp-ease-ui)}
.hp-hero__fog--b{bottom:-14%;height:48%;opacity:.16;transform:scaleX(-1)}
.hp-hero.has-video .hp-hero__fog{opacity:0;visibility:hidden;animation-play-state:paused;transition:opacity 2.2s var(--hp-ease-ui),visibility 0s 2.2s}
.hp-lowend .hp-hero__fog--b{display:none}
/* 점등 덮개(애니메이션 중에만 — 아래 모션 절에서 켠다) */
.hp-hero__dusk{display:none;position:absolute;inset:0;z-index:1;pointer-events:none;background:#0b0a09;opacity:.9;will-change:opacity}
/* 등잔불 숨결 — 켜진 뒤에도 불빛이 은은하게 흔들린다(영상이 붙으면 영상이 대신한다) */
.hp-hero__breath{position:absolute;inset:0;z-index:1;pointer-events:none;background:#0b0a09;opacity:0;will-change:opacity}
/* 가독성 스크림 2개 */
.hp-hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,8,7,.78) 0%,rgba(9,8,7,.5) 30%,rgba(9,8,7,0) 58%),
             linear-gradient(180deg,rgba(9,8,7,.55) 0%,rgba(9,8,7,0) 18%,rgba(9,8,7,0) 62%,rgba(11,10,9,.92) 94%,#0b0a09 100%)}
/* 16:10보다 가로가 긴 화면: 포스터가 위아래로 잘려 문살이 머리 뒤까지 올라오므로 위쪽 띠만 진하게(r1, 값만 변경) */
@media (min-width:1101px) and (min-aspect-ratio:16/10){
  /* 넓은 화면: 사진을 머리 아래에서 시작시키고 위 가장자리를 어둠에 녹여 문살이 메뉴와 겹치지 않게 */
  .hp-hero__media{top:76px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);mask-image:linear-gradient(180deg,transparent 0,#000 18%)}
  .hp-hero__scrim{background:linear-gradient(90deg,rgba(9,8,7,.78) 0%,rgba(9,8,7,.5) 30%,rgba(9,8,7,0) 58%),
             linear-gradient(180deg,rgba(9,8,7,.8) 0%,rgba(9,8,7,.45) 9%,rgba(9,8,7,0) 21%,rgba(9,8,7,0) 62%,rgba(11,10,9,.92) 94%,#0b0a09 100%)}
}
.hp-hero__inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(104px,13vh,150px)}
.hp-hero__copy{max-width:760px}
.hp-eyebrow{display:flex;align-items:center;gap:14px;font:500 14px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp-2)}
.hp-eyebrow::before{content:"";flex:none;width:28px;height:1px;background:var(--hp-amber)}
.hp-hero__title{margin-top:28px;font-size:var(--hp-fs-display);line-height:1.16;letter-spacing:-.035em;color:var(--hp-lamp)}
.hp-hero__lead{margin-top:30px;max-width:30em;font:400 var(--hp-fs-lead)/1.85 var(--hp-f-serif);letter-spacing:-.005em;color:var(--hp-lamp-2)}
.hp-hero__cta{margin-top:38px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 34px}
.hp-hero__free{color:var(--hp-lamp)}
.hp-hero__note{margin-top:20px;font:400 13px/1.6 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp-2)}
.hp-hero__plate{position:absolute;z-index:2;right:max(var(--hp-gutter),calc((100% - 1280px) / 2));bottom:32px;display:flex;align-items:baseline;gap:12px;
  font:400 13px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp-3)}

/* ───────── 2. 근거 4칸 띠 ───────── */
.hp-proof{background:var(--hp-paper);padding:44px 0}
.hp-proof__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-proof__list li{padding:0 24px;border-left:1px solid var(--hp-rule-p)}
.hp-proof__list li:first-child{padding-left:0;border-left:0}
.hp-proof__label{font:500 13px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-amber-p)}
.hp-proof__text{margin-top:8px;font:400 16px/1.65 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-ink)}

/* ───────── 3. 01 사주를 읽는 방법 ───────── */
.hp-method{background:var(--hp-paper);padding:clamp(72px,8vw,120px) 0 var(--hp-sec);border-top:1px solid var(--hp-rule-p)}
.hp-method__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hp-cgap)}
.hp-method__head>.hp-label,.hp-method__head>.hp-h2{grid-column:1/span 8}
.hp-method__head>.hp-lead{grid-column:1/span 6}
.hp-method__body{margin-top:88px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hp-cgap);align-items:start}
.hp-reader{grid-column:1/span 6;padding-top:26px;border-top:1px solid var(--hp-ink)}
.hp-method__side{grid-column:8/span 5}
.hp-reader__cap{font:400 13px/1.5 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-reader__date{margin-top:8px;font:400 17px/1.4 var(--hp-f-serif);letter-spacing:-.01em;color:var(--hp-ink)}
.hp-reader__clock{margin-top:10px;font:300 var(--hp-fs-clock)/1 var(--hp-f-latin);letter-spacing:.01em;color:var(--hp-ink);white-space:nowrap}
.hp-reader__clock time{display:block;margin-left:-.04em}
.hp-clock__c{position:relative;top:-.1em;margin:0 .02em}
/* 연결선: 시계 아래 왼쪽에서 年 버블까지 */
.hp-reader__link{position:relative;display:block;height:58px;margin-top:calc(var(--hp-fs-clock) * -.13);padding-left:54px}
.hp-reader__wire{position:absolute;left:0;top:0;bottom:0;width:48px}
.hp-reader__line{position:absolute;left:23.5px;top:0;bottom:2.5px;width:1px;background:var(--hp-amber-p);transform-origin:top}
.hp-reader__dot{position:absolute;left:21.5px;bottom:0;width:5px;height:5px;border-radius:50%;background:var(--hp-amber-p)}
.hp-reader__note{display:block;padding-top:4px;font:500 13px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-amber-p)}
.hp-reader__plabel{position:absolute;right:0;bottom:6px;display:flex;align-items:center;gap:8px;font:400 13px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-reader__plabel i{flex:none;width:16px;height:1px;background:var(--hp-ink-3)}
.hp-pillars{margin-top:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px;row-gap:28px}
.hp-pillars li{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hp-pillars__b{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--hp-ink);border-radius:50%;
  font:300 22px/1 var(--hp-f-hanja);letter-spacing:0;color:var(--hp-ink)}
.hp-pillars .is-year .hp-pillars__b{background:var(--hp-ink);color:var(--hp-paper)}
.hp-pillars__k{margin-top:14px;font:400 13px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-pillars__nm{margin-top:4px;font:400 17px/1.4 var(--hp-f-serif);letter-spacing:-.01em;color:var(--hp-ink)}
.hp-pillars__ds{margin-top:6px;font:400 14px/1.6 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-ink-2)}
.hp-reader__desc{margin-top:34px;max-width:34em;font:400 15px/1.75 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-ink)}
.hp-reader__src{margin-top:12px;font:400 13px/1.5 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-principles{border-top:1px solid var(--hp-ink)}
.hp-principles li{display:grid;grid-template-columns:48px minmax(0,1fr);padding:26px 0 30px;border-bottom:1px solid var(--hp-rule-p)}
.hp-principles__no{font:500 15px/1.9 var(--hp-f-latin);letter-spacing:.02em;color:var(--hp-amber-p)}
.hp-principles p{margin-top:10px;max-width:34em;font:400 16px/1.8 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-ink-2)}
.hp-method__more{margin-top:24px;color:var(--hp-ink)}

/* ───────── 4. 02 사판 ───────── */
.hp-sapan{background:var(--hp-night-0);color:var(--hp-lamp);padding:calc(var(--hp-sec) * .85) 0 var(--hp-sec)}
.hp-sapan .hp-h2{color:var(--hp-lamp)}
.hp-sapan__grid{margin-top:clamp(48px,5vw,72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hp-cgap);align-items:start}
.hp-sapan__figwrap{grid-column:1/span 6;grid-row:1;align-self:stretch}
.hp-sapan__fig{position:sticky;top:112px}
.hp-sapan__body{grid-column:8/span 5;grid-row:1}
/* 도판: 책상(S1) 위 HTML 첫 장 견본 */
.hp-plate{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0b0a09}
.hp-plate__desk{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-sheet{position:absolute;left:calc(var(--hp-sheet-x) - 29%);top:calc(var(--hp-sheet-y) - 32.8%);width:58%;aspect-ratio:1/1.414;container-type:inline-size}
.hp-sheet__under,.hp-sheet__page{position:absolute;inset:0;background:var(--hp-sheet);border:1px solid var(--hp-sheet-edge)}
.hp-sheet__under{transform:translate(12px,12px);background-color:#c9bfae;box-shadow:0 1px 0 rgba(0,0,0,.35),0 24px 48px -16px rgba(0,0,0,.7)}
.hp-sheet__under+.hp-sheet__under{transform:translate(6px,6px);background-color:#d9d0c1;box-shadow:0 1px 0 rgba(0,0,0,.35)}
/* 빛 쪽(왼쪽 위, 도판 빛 웅덩이) 100% → 반대쪽 아래 모서리 약 71% + 2% 노이즈 — 구운 이미지(assets/sheet-light.webp, r2)
   + 아래 30%만 책상 그늘 한 겹(rgba(40,26,12,.10)) */
.hp-sheet__page{background:linear-gradient(180deg,rgba(40,26,12,0) 70%,rgba(40,26,12,.10) 100%),var(--hp-sheet) url(/home-premium/assets/sheet-light.webp) 0 0/100% 100% no-repeat;box-shadow:0 1px 0 rgba(0,0,0,.35);padding:9% 9% 8%;display:flex;flex-direction:column;justify-content:space-between;text-align:center;color:var(--hp-ink)}
.hp-sheet__top{display:flex;align-items:center;justify-content:space-between;font-size:3.43cqi;line-height:1}
.hp-sheet__top .hp-hj{font-weight:300;letter-spacing:.3em}
.hp-sheet__top b{font-weight:400}
.hp-sheet__tag{padding:2px 6px;border:1px solid currentColor;font:400 3.14cqi/1.2 var(--hp-f-sans);letter-spacing:0}
.hp-sheet__mid{display:flex;flex-direction:column;align-items:center}
.hp-sheet__title{font:300 8.57cqi/1.2 var(--hp-f-serif);letter-spacing:-.02em}
.hp-sheet__sub{margin-top:3.2cqi;font:400 3.71cqi/1.4 var(--hp-f-serif);letter-spacing:0;color:var(--hp-ink-2)}
.hp-sheet__rule{display:block;width:8cqi;height:1px;margin:6.4cqi 0;background:#8a8172}
.hp-sheet__for{font:400 3.57cqi/1.4 var(--hp-f-sans);letter-spacing:0}
.hp-sheet__ph{margin-right:-.1em;font-family:var(--hp-f-serif);letter-spacing:.18em}
.hp-sheet__foot{font:400 3.43cqi/1.4 var(--hp-f-serif)}
.hp-sheet__house .hp-hj{margin-left:.3em;font-size:.86em;letter-spacing:.12em}
.hp-sheet__house b{font-weight:300}
.hp-sheet__year{margin-top:1.4cqi;font:500 3.43cqi/1 var(--hp-f-latin);letter-spacing:.06em;color:#3a352f}   /* 아래 그늘(밝기 ~170) 위 4.5:1 이상(r2) */
@supports not (font-size:1cqi){
  .hp-sheet__top{font-size:12px}.hp-sheet__tag{font-size:11px}.hp-sheet__title{font-size:30px}.hp-sheet__sub{margin-top:11px;font-size:13px}
  .hp-sheet__rule{width:28px;margin:22px 0}.hp-sheet__for{font-size:12.5px}.hp-sheet__foot{font-size:12px}.hp-sheet__year{margin-top:5px;font-size:12px}
}
/* 본문 */
.hp-sapan__name{font:400 clamp(24px,2.2vw,30px)/1.35 var(--hp-f-serif);letter-spacing:-.02em;color:var(--hp-lamp)}
.hp-sapan__name span{display:block;margin-top:8px;font:400 15px/1.5 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp-3)}
.hp-sapan__lead{margin-top:26px;max-width:30em;font:400 var(--hp-fs-lead)/1.85 var(--hp-f-serif);letter-spacing:-.005em;color:var(--hp-lamp-2)}
.hp-parts{margin-top:48px}
.hp-parts__head{margin-bottom:14px;font:500 13px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp-2)}
.hp-parts__list{border-top:1px solid var(--hp-night-rule)}
.hp-parts__list li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:10px;align-items:baseline;padding:13px 0 14px;border-bottom:1px solid var(--hp-night-rule)}
.hp-parts__no{font:500 13px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-amber)}
.hp-parts__nm{display:block;font:400 17px/1.45 var(--hp-f-serif);letter-spacing:-.01em;color:var(--hp-lamp)}
.hp-parts__ds{display:block;margin-top:3px;font:400 13.5px/1.6 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-lamp-3)}
.hp-parts__ch{font:400 13px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp-3);white-space:nowrap}
.hp-spec{margin-top:40px;border-top:1px solid var(--hp-night-rule)}
.hp-spec div{display:grid;grid-template-columns:72px minmax(0,1fr);padding:13px 0;border-bottom:1px solid var(--hp-night-rule)}
.hp-spec dt{font:400 13.5px/1.6 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp-3)}
.hp-spec dd{font:400 15px/1.6 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-lamp)}
.hp-sapan__price{margin-top:40px;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px}
.hp-price{font:300 34px/1 var(--hp-f-serif);letter-spacing:-.02em;color:var(--hp-lamp)}
.hp-price span{margin-left:2px;font-size:.55em;color:var(--hp-lamp-2)}
.hp-sapan__pnote{font:400 14px/1.6 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp-2)}
.hp-sapan__cta{margin-top:30px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 30px}
.hp-sapan__cta .hp-tlink{color:var(--hp-lamp)}
/* 17장 펼침 */
.hp-chapters{margin-top:0}
.hp-chapters summary{display:inline-flex;align-items:center;gap:14px;min-height:60px;cursor:pointer;list-style:none;font:400 15px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp)}
.hp-chapters summary::-webkit-details-marker{display:none}
.hp-chapters summary::marker{content:""}
.hp-chapters summary>span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .5s var(--hp-ease)}
.hp-chapters summary:hover>span{background-size:0 1px;background-position:100% 100%}
.hp-chapters__close{display:none}
.hp-chapters[open] .hp-chapters__open{display:none}
.hp-chapters[open] .hp-chapters__close{display:inline}
.hp-chapters__arr{position:relative;width:9px;height:9px;margin-top:-5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform var(--hp-t-ui) var(--hp-ease-ui)}
.hp-chapters[open] .hp-chapters__arr{margin-top:4px;transform:rotate(-135deg)}
.hp-chapters__list{margin-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(9,auto);grid-auto-flow:column;column-gap:var(--hp-cgap);border-top:1px solid var(--hp-night-rule)}
.hp-chapters__list li{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:baseline;padding:13px 0;border-bottom:1px solid var(--hp-night-rule);font:400 16px/1.5 var(--hp-f-serif);letter-spacing:-.01em;color:var(--hp-lamp)}
.hp-chapters__list span{font:500 15px/1 var(--hp-f-latin);letter-spacing:.02em;color:var(--hp-amber)}
.hp-chapters__end{margin-top:18px;margin-bottom:8px;font:400 13px/1.6 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp-3)}

/* ───────── 5. 03 서가 ───────── */
.hp-shelf{background:var(--hp-paper);padding:var(--hp-sec) 0 calc(var(--hp-sec) * .7)}
.hp-shelf .hp-meaning,.hp-faq .hp-meaning{color:var(--hp-ink-2)}
.hp-shelf .hp-meaning__hj{color:var(--hp-ink)}
/* 요·정·심 비교표 */
.hp-tiers{margin-top:64px;margin-bottom:0;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}
.hp-tiers__rowh{width:17%}
.hp-tiers th,.hp-tiers td{text-align:left;vertical-align:top;padding:18px 24px 18px 0;border-bottom:1px solid var(--hp-rule-p);font-weight:400}
.hp-tiers thead th{position:relative;padding-top:52px;padding-bottom:26px;border-bottom:1px solid var(--hp-ink)}
/* 마지막 열(深): 오른쪽 여백 24px를 왼쪽으로 옮겨 精 틴트와 간격을 둔다(칸 폭·버튼 폭은 세 열 같음) */
.hp-tiers th:last-child,.hp-tiers td:last-child{padding-left:24px;padding-right:0}
.hp-tiers tbody th{font:400 14px/1.6 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2);text-wrap:balance}
.hp-tiers tbody th,.hp-tiers tbody td{vertical-align:baseline}
.hp-tiers .hp-tiers__bars th,.hp-tiers .hp-tiers__bars td{vertical-align:top}
.hp-tiers td{font:400 16px/1.6 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-ink)}
.hp-tiers .is-rec{background:rgba(122,92,48,.06);box-shadow:-24px 0 0 rgba(122,92,48,.06)}
.hp-tiers thead .is-rec::before{content:"";position:absolute;top:0;left:-24px;right:0;height:2px;background:var(--hp-amber-p)}
.hp-rec{display:block;font:500 13px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-amber-p);white-space:nowrap}
.hp-tiers .hp-rec{position:absolute;top:18px;left:0}
.hp-tier{display:flex;align-items:baseline;gap:12px}
.hp-tier__hj{font:300 40px/1 var(--hp-f-hanja);letter-spacing:0;color:var(--hp-ink)}
.hp-tier__ko{font:400 22px/1 var(--hp-f-serif);letter-spacing:-.02em;color:var(--hp-ink)}
.hp-tier__tag{display:block;margin-top:14px;font:400 15px/1.5 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-ink-2)}
.hp-tiers__bars td,.hp-tiers__bars th{padding-top:20px;padding-bottom:20px}
.hp-bar{position:relative;display:block;width:min(200px,100%);height:2px;margin-top:10px}
.hp-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(31,28,24,.15)}
.hp-bar>i{position:absolute;left:0;top:-.5px;height:2px;background:var(--hp-ink)}
.hp-bar__plus{display:block;margin-top:12px;font:400 13px/1.5 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-tiers__price td{padding-top:22px;font:500 21px/1.2 var(--hp-f-sans);letter-spacing:-.01em}
.hp-tiers__price td span{margin-left:2px;font-size:14px;font-weight:400;color:var(--hp-ink-2)}
.hp-tiers .hp-tiers__go th,.hp-tiers .hp-tiers__go td{vertical-align:top;padding-top:6px;padding-bottom:0;border-bottom:0}
.hp-tiercards{display:none}
.hp-shelf__after{margin-top:52px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 28px;font:400 15px/1.6 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-shelf__links{display:flex;flex-wrap:wrap;gap:0 28px;color:var(--hp-ink)}
/* 주제별 색인 */
.hp-index{margin-top:clamp(96px,10vw,140px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hp-cgap)}
.hp-index__head{grid-column:1/span 4}
.hp-index__title{font:300 clamp(24px,2.2vw,30px)/1.4 var(--hp-f-serif);letter-spacing:-.02em;color:var(--hp-ink)}
.hp-index__head p{margin-top:16px;max-width:22em;font:400 15px/1.75 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-ink-2)}
.hp-index__list{grid-column:5/span 8;border-top:1px solid var(--hp-ink)}
.hp-index__list a{position:relative;isolation:isolate;display:grid;grid-template-columns:44px 46px minmax(0,1fr) auto 28px;column-gap:8px;align-items:center;
  min-height:64px;padding:10px 0;border-bottom:1px solid var(--hp-rule-p);color:var(--hp-ink)}
.hp-index__list a::before{content:"";position:absolute;inset:0 -12px;z-index:-1;background:var(--hp-paper-2);opacity:0;transition:opacity var(--hp-t-ui) var(--hp-ease-ui)}
.hp-index__list a:hover::before{opacity:1}
.hp-index__no{font:500 13px/1 var(--hp-f-latin);letter-spacing:.04em;color:var(--hp-ink-3)}
.hp-index__no::before{content:attr(data-n)}
.hp-index__hj{font:300 22px/1 var(--hp-f-hanja);letter-spacing:0;color:var(--hp-ink)}
.hp-index__tx{min-width:0}
.hp-index__nm{display:block;font:400 19px/1.4 var(--hp-f-serif);letter-spacing:-.015em}
.hp-index__ds{display:block;margin-top:3px;font:400 14.5px/1.6 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-ink-2)}
.hp-index__pr{padding-left:16px;font:500 16px/1.3 var(--hp-f-sans);letter-spacing:-.01em;text-align:right;white-space:nowrap}
.hp-index__pr small{display:block;font:400 13px/1.4 var(--hp-f-sans);color:var(--hp-ink-2)}
.hp-index__ar{justify-self:end;position:relative;width:18px;height:1px;background:var(--hp-ink);transition:transform var(--hp-t-ui) var(--hp-ease-ui)}
.hp-index__ar::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--hp-ink);border-right:1px solid var(--hp-ink);transform:rotate(45deg)}
.hp-index__list a:hover .hp-index__ar{transform:translateX(4px)}
.hp-index__list li:last-child a{border-bottom:0}
/* 정가 선언 */
.hp-pledge{margin-top:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hp-cgap)}
.hp-pledge p{grid-column:5/span 8;padding-top:32px;border-top:1px solid var(--hp-rule-p);font:400 16px/1.8 var(--hp-f-serif);letter-spacing:-.01em;color:var(--hp-ink-2)}
.hp-pledge strong{font-weight:400;color:var(--hp-ink)}

/* ───────── 6. 04 묻고 답하기 ───────── */
.hp-faq{background:var(--hp-paper-faq);padding:calc(var(--hp-sec) * .7) 0}
.hp-faq__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hp-cgap);align-items:start}
.hp-faq__head{grid-column:1/span 5}
.hp-faq .hp-h2 .hp-ln>span{white-space:nowrap}
.hp-faq__contact{margin-top:28px;font:400 14px/1.7 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-faq__contact .hp-mail{color:var(--hp-ink)}
.hp-faq__list{grid-column:6/span 7;border-top:1px solid var(--hp-ink)}
.hp-faq__item{padding:26px 0;border-bottom:1px solid var(--hp-rule-p)}
.hp-faq__item dt{font:400 19px/1.45 var(--hp-f-serif);letter-spacing:-.015em;color:var(--hp-ink)}
.hp-faq__item dd{margin-top:10px;max-width:38em;font:400 16px/1.8 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-ink-2)}

/* ───────── 7. 사주동자 '문 앞의 아이' ───────── */
.hp-dongja{border-top:1px solid var(--hp-rule-p);background:var(--hp-dongja-paper);color:var(--hp-ink);padding:calc(var(--hp-sec) * .85) 0}
.hp-dongja__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hp-cgap);align-items:center}
.hp-dongja__fig{grid-column:1/span 5}
.hp-dongja__art{aspect-ratio:4/5;overflow:hidden}
.hp-dongja__art img{width:100%;height:100%;object-fit:cover}
.hp-dongja__fig .hp-cap{color:var(--hp-ink-2)}
.hp-dongja__fig .hp-pl{color:var(--hp-celadon-deep)}
.hp-dongja__body{grid-column:7/span 6}
.hp-dongja .hp-lead{max-width:28em}
.hp-voice{margin-top:34px;display:flex;align-items:flex-start;gap:18px}
.hp-voice__seal{flex:none;width:46px;height:46px}
.hp-voice__q{font:400 19px/1.7 var(--hp-f-voice);letter-spacing:-.01em;color:var(--hp-celadon-deep)}
.hp-voice__by{margin-top:6px;font:400 13px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-menu{margin-top:40px;border-top:1px solid var(--hp-ink)}
.hp-menu a{display:block;padding:18px 0 17px;border-bottom:1px solid var(--hp-rule-p);color:var(--hp-ink)}
.hp-menu__line{display:flex;align-items:baseline;gap:12px}
.hp-menu__nm{font:400 19px/1.3 var(--hp-f-serif);letter-spacing:-.015em;white-space:nowrap}
.hp-menu__nm small{margin-left:4px;font:400 13px/1 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-menu__lead{flex:1;min-width:12px;border-bottom:1px dotted #a99d88;transform:translateY(-5px);transition:border-color var(--hp-t-ui) var(--hp-ease-ui)}
.hp-menu a:hover .hp-menu__lead{border-bottom-color:var(--hp-celadon-deep)}
.hp-menu__pr{font:500 17px/1 var(--hp-f-sans);letter-spacing:-.01em;white-space:nowrap}
.hp-menu__ds{display:block;margin-top:6px;font:400 14.5px/1.6 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-ink-2)}
.hp-dongja__cta{margin-top:34px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px}
.hp-dongja__cta .hp-tlink{color:var(--hp-celadon-deep)}

/* ───────── 8. 맺음 ───────── */
.hp-coda{border-top:1px solid var(--hp-rule-p);background:var(--hp-paper);padding:calc(var(--hp-sec) * .8) 0 calc(var(--hp-sec) * .6)}
.hp-coda__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hp-cgap);align-items:end}
.hp-coda__title{grid-column:2/span 10;font:300 var(--hp-fs-coda)/1.2 var(--hp-f-serif);font-feature-settings:"palt";text-wrap:balance;letter-spacing:-.035em;color:var(--hp-ink)}
.hp-coda__h{display:inline;font:inherit;letter-spacing:inherit;color:inherit}
.hp-seal{display:inline-block;width:1.1em;height:1.1em;margin-left:.3em;vertical-align:-.18em;transform:rotate(-2deg)}
.hp-coda__side{grid-column:2/span 6;margin-top:40px}
.hp-coda__sub{font:400 17px/1.85 var(--hp-f-serif);letter-spacing:-.005em;color:var(--hp-ink-2)}
.hp-coda__cta{margin-top:32px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 30px}
.hp-coda__cap{grid-column:8/span 5;align-self:end;padding-bottom:17px;display:flex;align-items:baseline;gap:10px;font:400 13px/1.7 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-coda__cap .hp-hj{flex:none;font-size:15px;letter-spacing:0;color:var(--hp-ink)}
.hp-coda__cap>span:last-child{text-wrap:balance}

/* ───────── 9. 판권면 ───────── */
.hp-colophon{background:var(--hp-paper-deep);border-top:1px solid var(--hp-ink);padding:88px 0 48px;color:var(--hp-ink-2);font:400 14px/1.7 var(--hp-f-sans);letter-spacing:0}
.hp-colophon__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hp-cgap)}
.hp-colophon__brand{grid-column:1/span 4}
.hp-colophon__mark{display:flex;align-items:baseline;gap:10px;color:var(--hp-ink)}
.hp-colophon__mark .hp-brand__hj{color:var(--hp-ink-2)}
.hp-colophon__motto{margin-top:14px;font:400 15px/1.7 var(--hp-f-serif);letter-spacing:-.005em;color:var(--hp-ink-2)}
.hp-colophon__links{grid-column:5/span 8;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--hp-cgap)}
.hp-colophon__h{margin-bottom:12px;font:500 13px/1.4 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink)}
.hp-colophon__links a{display:inline-block;min-width:44px;padding:3px 0;font:400 14px/1.6 var(--hp-f-sans);color:var(--hp-ink-2);transition:color var(--hp-t-ui) var(--hp-ease-ui)}
.hp-colophon__links a:hover,.hp-colophon__lglinks a:hover{color:var(--hp-ink)}
.hp-colophon__bottom{margin-top:64px;padding-top:28px;border-top:1px solid var(--hp-rule-p);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hp-cgap);font:400 13px/1.75 var(--hp-f-sans);color:var(--hp-ink-2)}
.hp-colophon__legal{grid-column:1/span 4}
.hp-colophon__lglinks{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:12px}
.hp-colophon__lglinks a{padding:3px 0;color:var(--hp-ink-2);transition:color var(--hp-t-ui) var(--hp-ease-ui)}
.hp-colophon__biz{grid-column:5/span 8}
.hp-colophon__biz p+p{margin-top:12px}
.hp-colophon__ai{max-width:46em;text-wrap:balance}
.hp-colophon .hp-hj{letter-spacing:.04em}
.hp-colophon__mark .hp-brand__hj{letter-spacing:.22em}

/* ───────── 모바일 하단 고정바(≤860px) ───────── */
.hp-dock{display:none}

/* ───────── 책갈피 끈(≥1024px, CSS 스크롤 연동만 — 미지원이면 보이지 않는다) ───────── */
.hp-ribbon,.hp-ribbon__tail{display:none}
@media (min-width:1024px){
  @supports (animation-timeline:scroll()){
    .hp-ribbon,.hp-ribbon__tail{display:block;position:fixed;top:64px;right:24px;width:3px;z-index:48;pointer-events:none;background:var(--hp-ribbon);transition:opacity .32s var(--hp-ease-ui)}
    .hp-ribbon{height:calc(100vh - 64px - 48px);transform-origin:top;animation:hp-ribbon linear both;animation-timeline:scroll(root)}
    .hp-ribbon__tail{height:9px;clip-path:polygon(0 0,100% 0,100% 100%,50% 60%,0 100%);animation:hp-ribbon-tail linear both;animation-timeline:scroll(root)}
    .hp-toc-open .hp-ribbon{opacity:0}
    .hp-toc-open .hp-ribbon__tail{visibility:hidden}
  }
}
@keyframes hp-ribbon{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hp-ribbon-tail{0%{transform:translateY(0);opacity:0}2%{opacity:1}100%{transform:translateY(calc(100vh - 64px - 48px - 9px));opacity:1}}

/* ═══════════════════ 4. 반응형 ═══════════════════ */
/* 데스크톱: 색인·묻고 답하기의 왼쪽 머리가 읽는 동안 따라 내려온다(사판 도판과 같은 sticky, 움직임 없음) */
@media (min-width:1101px){
  :root{--hp-fs-display:clamp(40px,5.2vw,76px)}
  .hp-index__head{position:sticky;top:112px;align-self:start}
  .hp-faq__head{position:sticky;top:112px}
}
@media (max-width:1100px){
  :root{--hp-cgap:20px}
  .hp-nav__links{gap:24px}
  .hp-nav__act{gap:18px}
  .hp-method__body{display:block}
  .hp-reader{max-width:640px}
  .hp-method__side{margin-top:64px}
  .hp-sapan__figwrap{grid-column:1/span 6}
  .hp-sapan__body{grid-column:7/span 6}
  .hp-chapters__list{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(9,auto)}
  .hp-index__head{grid-column:1/-1;margin-bottom:36px}
  .hp-index__list{grid-column:1/-1}
  .hp-pledge p{grid-column:1/-1}
  .hp-faq__head{grid-column:1/span 5}
  .hp-faq__list{grid-column:6/span 7}
  .hp-colophon__brand{grid-column:1/-1;margin-bottom:48px}
  .hp-colophon__links{grid-column:1/-1}
  .hp-toc__col--a{grid-column:1/span 6}
  .hp-toc__col--b{grid-column:7/span 6}
  .hp-toc__col--c{grid-column:1/span 6;margin-top:48px}
  .hp-coda__title{grid-column:1/-1}
  .hp-coda__side{grid-column:1/-1}
  .hp-coda__cap{grid-column:1/span 8;margin-top:40px;padding-bottom:0}
}
@media (max-width:1100px) and (min-width:761px) and (orientation:landscape){
  .hp-hero__poster,.hp-hero__video{object-position:18% 55%}
}
/* 세로 태블릿(768×1024·820×1180 등): 16:9 포스터를 자르면 문살이 화면 밖으로 나가므로 모바일 포스터(세로 구도)를 쓴다(r1) */
@media (max-width:1100px) and (min-width:761px) and (orientation:portrait){
  .hp-hero{max-height:none}
  .hp-hero__poster,.hp-hero__video{object-position:64% 60%}
  .hp-hero__scrim{background:linear-gradient(180deg,rgba(9,8,7,.86) 0%,rgba(9,8,7,.62) 34%,rgba(9,8,7,.08) 58%,rgba(9,8,7,0) 70%,rgba(11,10,9,.9) 94%,#0b0a09 100%)}
  .hp-hero__inner{justify-content:flex-start;padding-top:clamp(120px,14svh,170px);padding-bottom:0}
}
@media (max-width:860px) and (min-width:761px){
  .hp-sapan__fig{max-width:560px}
}
@media (max-width:860px){
  .hp-nav__in{grid-template-columns:1fr auto}
  .hp-nav__links,.hp-btn--nav{display:none}
  .hp-sechead__main,.hp-sechead__main--7{grid-column:1/-1}
  .hp-meaning{grid-column:1/-1;justify-self:start;display:flex;align-items:center;gap:16px;margin-top:32px;text-align:left}
  .hp-meaning__hj{margin:0;font-size:30px}
  /* 사판: sticky 해제, 한 줄 순서 = 도판 → 상품명 → 리드 → 5부 → 17장 → 사양표 → 가격 → CTA */
  .hp-sapan__grid{display:flex;flex-direction:column;align-items:stretch}
  .hp-sapan__body{display:contents}
  .hp-sapan__figwrap{order:1;margin-bottom:56px}
  .hp-sapan__fig{position:relative;top:auto}
  .hp-sapan__name{order:2}.hp-sapan__lead{order:3}.hp-parts{order:4}.hp-chapters{order:5;margin-top:0}
  .hp-spec{order:6}.hp-sapan__price{order:7}.hp-sapan__cta{order:8}
  .hp-chapters summary{min-height:56px}
  .hp-dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px var(--hp-gutter) calc(12px + env(safe-area-inset-bottom));background:rgba(11,10,9,.96);border-top:1px solid rgba(237,228,211,.12);color:var(--hp-lamp);
    transform:translateY(105%);transition:transform .45s var(--hp-ease)}
  .hp-dock.is-on{transform:none}
  .hp-dock__tx,.hp-dock__btn{transition:opacity .16s var(--hp-ease-ui)}
  .hp-dock.is-swap .hp-dock__tx,.hp-dock.is-swap .hp-dock__btn{opacity:0}
  .hp-dock__tx{min-width:0}
  .hp-dock__tx b{display:block;font:500 14.5px/1.35 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-lamp)}
  .hp-dock__tx span{display:block;margin-top:2px;font:400 13px/1.35 var(--hp-f-sans);letter-spacing:0;color:var(--hp-lamp-2)}
  .hp-dock__btn{flex:none;height:46px;min-width:112px;padding:0 18px;font-size:15px}
  .hp-colophon{padding-bottom:calc(48px + env(safe-area-inset-bottom))}
  /* 고정바(약 70px)가 아래를 덮으므로 키보드·앵커 이동 때 가리지 않게 */
  html{scroll-padding-bottom:84px}
  /* 머리 오른쪽: 로그인·목차 터치 높이 46px, 글자 위치는 음수 여백으로 유지 */
  .hp-nav .header-login-btn,.hp-nav .header-user-btn{min-height:46px;padding:0 10px;margin-right:-6px}
  .hp-tocbtn{min-height:46px;padding:0 0 0 8px;margin-left:-6px}
  /* 판권면 링크: 한 줄 44px 블록. '서가' 9개는 여러 단으로 놓아 길이를 상쇄 */
  .hp-colophon__links{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "a d" "c c";column-gap:16px;row-gap:28px}
  .hp-colophon__links>div:nth-child(1){grid-area:a}
  .hp-colophon__links>div:nth-child(2){grid-area:b}
  .hp-colophon__links>div:nth-child(3){grid-area:c}
  .hp-colophon__links>div:nth-child(4){grid-area:d}
  .hp-colophon__links>div:nth-child(3) ul{columns:3;column-gap:24px}
  .hp-colophon__links li{break-inside:avoid}
  .hp-colophon__h{margin-bottom:4px}
  .hp-colophon__links a,.hp-colophon__lglinks a{display:flex;align-items:center;min-height:44px;padding:0}
}
@media (max-width:760px){
  :root{--hp-gap-t:22px}
  body{font-size:16px;line-height:1.75}
  .hp-h2{margin-top:22px;font-size:clamp(26px,7.2vw,32px);line-height:1.36;letter-spacing:-.035em}
  .hp-lead,.hp-sapan__lead{font-size:16px;line-height:1.8}
  /* 머리 */
  .hp-nav{height:64px}
  .hp-nav.is-scrolled{height:56px}
  html{scroll-padding-top:56px}
  /* 사주동자 앵커: 그림 대신 라벨·H2·리드가 한 화면에(r2) */
  #dongja-title{scroll-margin-top:120px}
  .hp-brand{padding-top:10px}
  .hp-nav__act{gap:16px}
  /* 목차 */
  .hp-toc{padding-top:calc(56px + 40px)}
  .hp-toc__in{display:block}
  .hp-toc__title{font-size:44px}
  .hp-toc__col--b,.hp-toc__col--c{margin-top:44px}
  .hp-toc__col--a .hp-toc__part{margin-top:36px}
  .hp-toc__list a{font-size:20px}
  /* 히어로 */
  .hp-hero{min-height:600px;max-height:none}
  .hp-hero__poster,.hp-hero__video{object-position:64% 60%}
  .hp-hero__scrim{background:linear-gradient(180deg,rgba(9,8,7,.86) 0%,rgba(9,8,7,.62) 34%,rgba(9,8,7,.08) 58%,rgba(9,8,7,0) 70%,rgba(11,10,9,.9) 94%,#0b0a09 100%)}
  .hp-hero__inner{justify-content:flex-start;padding-top:clamp(88px,13svh,140px);padding-bottom:0}
  .hp-eyebrow{font-size:13px}
  .hp-hero__title{margin-top:18px;font-size:clamp(36px,10.4vw,44px);line-height:1.2;letter-spacing:-.04em}
  .hp-hero__lead{margin-top:18px;font-size:16px;line-height:1.8}
  .hp-hero__cta{margin-top:26px;flex-direction:column;align-items:stretch;gap:8px}
  .hp-hero__cta .hp-btn--main{width:100%;height:54px;padding:0 20px}
  .hp-hero__free{justify-content:flex-start;min-height:44px;font-size:15px}
  .hp-hero__note{margin-top:4px}
  .hp-hero__plate{left:var(--hp-gutter);right:auto;bottom:20px}
  .hp-hero__fog{height:46%;opacity:.22}
  /* 근거 띠 2×2 */
  .hp-proof{padding:32px 0}
  .hp-proof__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .hp-proof__list li{position:relative;padding:18px 0;border-left:0}
  .hp-proof__list li:nth-child(odd)::after{content:"";position:absolute;top:0;bottom:0;right:-16px;width:1px;background:var(--hp-rule-p)}
  .hp-proof__list li:nth-child(3)::before{content:"";position:absolute;top:0;left:0;width:calc(200% + 32px);height:1px;background:var(--hp-rule-p)}
  .hp-proof__list li:nth-child(-n+2){padding-top:0}
  .hp-proof__list li:nth-child(n+3){padding-bottom:0}
  .hp-proof__text{font-size:15px}
  /* 방법 */
  .hp-method__head{display:block}
  .hp-method__body{margin-top:56px}
  .hp-reader__clock time{margin-left:-.03em}
  .hp-pillars{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .hp-principles li{grid-template-columns:40px minmax(0,1fr);padding:22px 0 24px}
  .hp-h3,.hp-principles .hp-h3{font-size:19px}
  .hp-principles p{font-size:15.5px;line-height:1.75}
  .hp-method__side{margin-top:56px}
  /* 사판 */
  .hp-sechead{display:block}
  .hp-parts__list li{grid-template-columns:40px minmax(0,1fr);row-gap:4px}
  .hp-parts__ch{grid-column:2}
  .hp-spec div{grid-template-columns:56px minmax(0,1fr)}
  .hp-spec dd{font-size:14.5px}
  .hp-price{font-size:30px}
  .hp-sapan__cta .hp-btn{width:100%;height:54px}
  .hp-chapters__list{display:block}
  /* 첫 장 견본: 350px 도판에서 제목이 18px 이상 되도록 폭 58% → 66% */
  .hp-sheet{left:calc(var(--hp-sheet-x) - 33%);top:calc(var(--hp-sheet-y) - 37.3%);width:66%}
  /* 서가 */
  .hp-tiers{display:none}
  .hp-tiercards{display:block;margin-top:40px;border-top:1px solid var(--hp-ink)}
  .hp-tiercard{padding:24px 0 26px;border-bottom:1px solid var(--hp-rule-p)}
  .hp-tiercard.is-rec{margin:0 calc(var(--hp-gutter) * -1);padding:20px var(--hp-gutter) 26px;background:rgba(122,92,48,.06);box-shadow:inset 0 2px 0 var(--hp-amber-p)}
  .hp-tiercard .hp-rec{margin-bottom:12px}
  .hp-tiercard__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .hp-tiercard .hp-tier__hj{font-size:32px}
  .hp-tiercard__pr{font:500 20px/1 var(--hp-f-sans);letter-spacing:-.01em}
  .hp-tiercard__pr span{margin-left:2px;font-size:13px;font-weight:400;color:var(--hp-ink-2)}
  .hp-tiercard .hp-tier__tag{margin-top:10px}
  .hp-tiercard dl{margin-top:14px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:4px;font:400 14.5px/1.6 var(--hp-f-sans)}
  .hp-tiercard dl div{display:contents}
  .hp-tiercard dt{color:var(--hp-ink-2)}
  .hp-tiercard dd{color:var(--hp-ink)}
  .hp-tiercard .hp-btn{margin-top:18px}
  .hp-shelf__after{display:block;margin-top:24px}
  .hp-shelf__links{display:flex;flex-direction:column;align-items:flex-start;margin-top:4px}
  .hp-index{display:block}
  .hp-index__head{margin-bottom:28px}
  .hp-index__list a{grid-template-columns:30px minmax(0,1fr) auto 22px;grid-template-areas:"no nm pr ar" "no ds ds ar";column-gap:8px;row-gap:2px;align-items:baseline;min-height:72px;padding:18px 0}
  .hp-index__hj{display:none}
  .hp-index__no{grid-area:no}
  .hp-index__tx{display:contents}
  .hp-index__nm{grid-area:nm;font-size:18px}
  .hp-index__ds{grid-area:ds;margin-top:0;font-size:14px}
  .hp-index__pr{grid-area:pr;font-size:15px;padding-left:8px}
  .hp-index__pr small{display:inline;margin-left:2px}
  .hp-index__ar{grid-area:ar;align-self:start;margin-top:11.5px;width:14px}   /* 가격 글줄 가운데(r2) */
  .hp-index__list a::before{inset:0 calc(var(--hp-gutter) * -1)}
  .hp-pledge{display:block;margin-top:0}
  .hp-pledge p{font-size:15px}
  /* 묻고 답하기 */
  .hp-faq__grid{display:block}
  .hp-faq__contact{margin-top:20px}
  .hp-faq__list{margin-top:40px}
  .hp-faq__item{padding:22px 0}
  .hp-faq__item dt{font-size:18px}
  .hp-faq__item dd{font-size:15.5px;line-height:1.75}
  /* 사주동자 */
  .hp-dongja__grid{display:block}
  .hp-dongja__fig{width:min(100%,340px);margin:0 auto 48px}
  .hp-voice{margin-top:28px;gap:14px}
  .hp-voice__q{font-size:17.5px}
  .hp-voice__seal{align-self:flex-start;margin-top:2px}
  .hp-menu__nm{font-size:18px}
  .hp-dongja__cta .hp-btn{width:100%}
  /* 맺음 */
  .hp-coda__grid{display:block}
  .hp-coda__title{font-size:clamp(32px,9vw,40px);line-height:1.25}
  .hp-coda__side{margin-top:32px}
  .hp-coda__cap{margin-top:40px}
  .hp-coda__sub{font-size:16px}
  .hp-coda__cta{flex-direction:column;align-items:stretch;gap:8px}
  .hp-coda__cta .hp-btn--main{width:100%;height:54px;padding:0 20px}
  /* 판권면 */
  .hp-colophon{padding-top:72px}
  .hp-colophon__top,.hp-colophon__bottom{display:block}
  .hp-colophon__links>div:nth-child(3) ul{columns:2;column-gap:16px}
  .hp-colophon__bottom{margin-top:44px}
  .hp-colophon__biz{margin-top:20px}
}
/* 높이가 짧은 폰(375×667·360×640): 글 블록이 화면 2/3를 넘으므로 그림 상자를 아래로 늘려
   문살이 화면 아래쪽(글 블록 밑)에 오게 한다. 스크림·포스터 위치값은 그대로 */
@media (max-width:760px) and (max-height:700px){
  .hp-hero__media{bottom:-18%}
}
@media (max-width:480px){
  html,body{overflow-x:clip}
}
@media (max-width:339px){
  .hp-h2{font-size:24px}
}

/* ── 목차 맨 아래: 사주헌이란? (설계도) ── */
.hp-toc__about{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hp-cgap);align-items:center;margin-top:88px;padding:64px 0 96px;border-top:1px solid var(--hp-ink)}
.hp-about__head{grid-column:1/span 5;grid-row:1}
.hp-about__list{grid-column:1/span 5;grid-row:2}
.hp-about__fig{grid-column:7/span 6;grid-row:1/span 2;margin:0}
.hp-about__h{margin:6px 0 22px;font:300 clamp(28px,2.6vw,38px)/1.32 var(--hp-f-serif);letter-spacing:-.03em;color:var(--hp-ink);text-wrap:balance}
.hp-about__p{max-width:30em;margin:0 0 14px;font:400 15.5px/1.8 var(--hp-f-sans);letter-spacing:-.01em;color:var(--hp-ink-2)}
.hp-about__axes{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--hp-rule-p)}
.hp-about__axes a{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;align-items:baseline;min-height:56px;padding:12px 0;border-bottom:1px solid var(--hp-rule-p);color:var(--hp-ink);text-decoration:none;transition:background-color .24s var(--hp-ease-ui)}
.hp-about__axes a:hover{background:var(--hp-paper-2)}
.hp-about__hj{grid-row:1/span 2;font:300 20px/1.2 var(--hp-f-hanja);letter-spacing:.08em;color:var(--hp-amber-p)}
.hp-about__nm{font:400 17px/1.45 var(--hp-f-serif);letter-spacing:-.015em}
.hp-about__nm em{margin-left:8px;font:400 13px/1 var(--hp-f-sans);font-style:normal;letter-spacing:0;color:var(--hp-ink-2)}
.hp-about__ds{font:400 14px/1.6 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-about__more{margin-top:26px}
.hp-about__svg{display:block;width:100%;height:auto;overflow:visible}
.hp-about__cap{display:flex;gap:12px;align-items:baseline;margin-top:14px;font:400 13px/1.6 var(--hp-f-sans);letter-spacing:0;color:var(--hp-ink-2)}
.hp-about__cap .hp-pl{color:var(--hp-amber-p)}
.ab-line{fill:none;stroke:var(--hp-ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ab-line--thin{stroke-width:.8;opacity:.55}
.ab-roof__fill{fill:rgba(31,28,24,.06)}
.ab-pillars rect{fill:var(--hp-sheet);stroke:var(--hp-ink);stroke-width:1.4}
.ab-hatch{stroke:var(--hp-ink-3);stroke-width:1}
.ab-links path{fill:none;stroke:var(--hp-amber-p);stroke-width:1;stroke-dasharray:3 5}
.ab-hj{font-family:var(--hp-f-hanja);font-weight:300;font-size:24px;fill:var(--hp-ink)}
.ab-hj--roof{font-size:30px;fill:var(--hp-ink-2)}
.ab-hj--node{font-size:17px;letter-spacing:.06em}
.ab-cap{font:400 13px var(--hp-f-sans);fill:var(--hp-ink-2)}
.ab-node circle{fill:var(--hp-sheet);stroke:var(--hp-ink);stroke-width:1.2;transition:fill .24s var(--hp-ease-ui)}
.ab-node:hover circle,.ab-node:focus-visible circle{fill:var(--hp-paper-2)}
.ab-node--core circle{fill:var(--hp-ink)}
.ab-node--core .ab-hj{fill:var(--hp-sheet)}
.ab-node--core:hover circle,.ab-node--core:focus-visible circle{fill:#0f0d0b}
.ab-node:focus-visible{outline:none}
.ab-node:focus-visible circle{stroke-width:2.4}
@media (max-width:1100px){
  .hp-toc__about{display:block}
  .hp-about__fig{margin:36px 0 8px;max-width:640px}
}
@media (max-width:760px){
  .hp-toc__about{margin-top:56px;padding:44px 0 72px}
  .hp-about__fig{margin-top:28px}
  .ab-hj{font-size:34px}.ab-hj--node{font-size:24px;letter-spacing:0}.ab-hj--roof{font-size:38px}.ab-cap{font-size:26px}
}

/* ═══════════════════ 5. 모션(숨김 초기값은 .js + no-preference 안에만) ═══════════════════ */
@media (prefers-reduced-motion:no-preference){
  /* ① 히어로 점등 — 첫 페인트부터, 컴포지터 전용(transform·opacity) */
  .js .hp-hero__dusk{display:block;animation:hp-lights 2.8s linear .25s both}
  .hp-hero__breath{animation:hp-breath 6.5s ease-in-out 3.2s infinite}
  .hp-hero.has-video .hp-hero__breath{animation:none;opacity:0}
  .hp-hero.is-offscreen .hp-hero__breath{animation-play-state:paused}
  .js .hp-hero__media{animation:hp-push 6s cubic-bezier(.2,.6,.2,1) both}
  .js .hp-hero__title .hp-ln>span{animation:hp-h1 1s var(--hp-ease) .2s both}
  .js .hp-hero__title .hp-ln+.hp-ln>span{animation-delay:.29s}
  .js .hp-eyebrow{animation:hp-fade .6s var(--hp-ease-ui) .3s both}
  .js .hp-hero__lead{animation:hp-rise .6s var(--hp-ease) .4s both}
  .js .hp-hero__cta{animation:hp-rise .6s var(--hp-ease) .5s both}
  .js .hp-hero__note{animation:hp-rise .6s var(--hp-ease) .6s both}
  .hp-hero__fog--a{animation:hp-drift 110s linear infinite}
  .hp-hero__fog--b{animation:hp-drift-r 160s linear infinite}
  .hp-hero.is-offscreen .hp-hero__fog{animation-play-state:paused}
  /* 저사양: 덮개는 1초 페이드만, 푸시인 없음 */
  .js.hp-lowend .hp-hero__dusk{animation:hp-lights 2s linear .1s both}
  .js.hp-lowend .hp-hero__media{animation:none}

  /* ② 읽는 방법 — H2 줄 마스크 + 연결선 */
  .js .hp-mask .hp-ln>span{transform:translateY(108%);transition:transform 1.15s var(--hp-ease)}
  .js .hp-mask .hp-ln+.hp-ln>span{transition-delay:.09s}
  .js .hp-mask.is-in .hp-ln>span{transform:none}
  .js .hp-reader .hp-reader__line{transform:scaleY(0);transition:transform .9s var(--hp-ease) .3s}
  .js .hp-reader .hp-reader__dot{opacity:0;transition:opacity .3s var(--hp-ease-ui) .95s}
  .js .hp-reader.is-in .hp-reader__line{transform:none}
  .js .hp-reader.is-in .hp-reader__dot{opacity:1}

  /* ③ 사판 — 스포트라이트 열림 */
  .js .hp-sapan__fig .hp-plate__desk{opacity:.2;transform:scale(1.04);transition:opacity 1.6s var(--hp-ease-ui),transform 1.8s var(--hp-ease)}
  .js .hp-sapan__fig .hp-sheet{opacity:0;transform:translateY(12px);transition:opacity .9s var(--hp-ease-ui) .35s,transform 1.1s var(--hp-ease) .35s}
  .js .hp-sapan__fig.is-in .hp-plate__desk,.js .hp-sapan__fig.is-in .hp-sheet{opacity:1;transform:none}

  /* ④ 사주동자 — 먹 번짐(24프레임 스프라이트 마스크) */
  /* 스프라이트(90KB)는 그림이 1.5화면 앞까지 왔을 때(.is-near)만 받는다 — 그 전엔 화면 밖이라 보이지 않게만 둔다 */
  .js .hp-dongja__fig:not(.is-near) .hp-dongja__art{opacity:0}
  .js .hp-dongja__fig.is-near .hp-dongja__art{-webkit-mask-image:url(/home-premium/assets/ink-45.webp);mask-image:url(/home-premium/assets/ink-45.webp);
    -webkit-mask-size:600% 400%;mask-size:600% 400%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0% 0%;mask-position:0% 0%}
  .js .hp-dongja__fig.is-in .hp-dongja__art{animation:hp-ink 1.7s steps(1,end) forwards}
  .js .hp-dongja__art img{transform:scale(1.04);transition:transform 2s var(--hp-ease)}
  .js .hp-dongja__fig.is-in .hp-dongja__art img{transform:none}

  /* ⑤ 맺음 — 軒 인장 '꾹' */
  .js .hp-coda .hp-seal{opacity:0;transform:scale(1.35) rotate(-9deg);transition:opacity .22s ease-out .5s,transform .62s cubic-bezier(.2,.9,.25,1) .5s}
  .js .hp-coda.is-in .hp-seal{opacity:1;transform:scale(1) rotate(-2deg)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
@keyframes hp-lights{0%,24%{opacity:.9}30%{opacity:.5}33%{opacity:.82}41%{opacity:.3}46%{opacity:.62}58%{opacity:.16}66%{opacity:.28}100%{opacity:0;visibility:hidden}}
@keyframes hp-breath{0%{opacity:0}17%{opacity:.07}26%{opacity:.03}40%{opacity:.1}53%{opacity:.04}71%{opacity:.08}100%{opacity:0}}
@keyframes hp-dusk-open{from{transform:scale(1)}to{transform:scale(9)}}
@keyframes hp-dusk-fade{from{opacity:1}to{opacity:0;visibility:hidden}}
@keyframes hp-push{from{transform:scale(1.045)}to{transform:none}}
@keyframes hp-h1{from{opacity:.32;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hp-fade{from{opacity:0}to{opacity:1}}
@keyframes hp-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hp-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes hp-drift-r{from{transform:scaleX(-1) translate3d(0,0,0)}to{transform:scaleX(-1) translate3d(-50%,0,0)}}
/* 먹 번짐 24단계(6×4 격자) — 마지막 키프레임에서 마스크를 걷는다 */
@keyframes hp-ink{
  0%{-webkit-mask-position:0% 0%;mask-position:0% 0%}4.35%{-webkit-mask-position:20% 0%;mask-position:20% 0%}8.7%{-webkit-mask-position:40% 0%;mask-position:40% 0%}
  13.04%{-webkit-mask-position:60% 0%;mask-position:60% 0%}17.39%{-webkit-mask-position:80% 0%;mask-position:80% 0%}21.74%{-webkit-mask-position:100% 0%;mask-position:100% 0%}
  26.09%{-webkit-mask-position:0% 33.33%;mask-position:0% 33.33%}30.43%{-webkit-mask-position:20% 33.33%;mask-position:20% 33.33%}34.78%{-webkit-mask-position:40% 33.33%;mask-position:40% 33.33%}
  39.13%{-webkit-mask-position:60% 33.33%;mask-position:60% 33.33%}43.48%{-webkit-mask-position:80% 33.33%;mask-position:80% 33.33%}47.83%{-webkit-mask-position:100% 33.33%;mask-position:100% 33.33%}
  52.17%{-webkit-mask-position:0% 66.67%;mask-position:0% 66.67%}56.52%{-webkit-mask-position:20% 66.67%;mask-position:20% 66.67%}60.87%{-webkit-mask-position:40% 66.67%;mask-position:40% 66.67%}
  65.22%{-webkit-mask-position:60% 66.67%;mask-position:60% 66.67%}69.57%{-webkit-mask-position:80% 66.67%;mask-position:80% 66.67%}73.91%{-webkit-mask-position:100% 66.67%;mask-position:100% 66.67%}
  78.26%{-webkit-mask-position:0% 100%;mask-position:0% 100%}82.61%{-webkit-mask-position:20% 100%;mask-position:20% 100%}86.96%{-webkit-mask-position:40% 100%;mask-position:40% 100%}
  91.3%{-webkit-mask-position:60% 100%;mask-position:60% 100%}95.65%{-webkit-mask-position:80% 100%;mask-position:80% 100%}
  100%{-webkit-mask-position:100% 100%;mask-position:100% 100%;-webkit-mask-image:none;mask-image:none}
}

/* ═══════════════════ 6. 숫자 규칙(font 단축 속성 뒤 — 맨 끝에 둔다) ═══════════════════ */
.hp-reader__clock,.hp-price,.hp-tiers__price td,.hp-tiercard__pr,.hp-index__pr,.hp-menu__pr,.hp-toc__pr,.hp-btn__price,.hp-dock__tx b,.hp-tiers td{font-variant-numeric:lining-nums tabular-nums}
.hp-label__no,.hp-pl,.hp-principles__no,.hp-index__no,.hp-chapters__list span,.hp-toc__no,.hp-sheet__year,.hp-parts__no,.hp-parts__ch,.hp-reader__date{font-variant-numeric:lining-nums}