/* 시안 B(딥톤 에디토리얼) 승계 — 딥 슬레이트 그라운드, 웜 크림 텍스트, 세리프 헤드라인, 매거진 괘선 */
/* R6 D2: 나눔명조 self-host (OFL, assets/fonts/ — 헤드라인·드롭캡용 서브셋, 외부 CDN 금지 유지) */
@font-face{
  font-family:"Nanum Myeongjo Sub";
  src:url("fonts/NanumMyeongjo-subset.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
:root{
  --bg:#26292F; --panel:#2E3138; --ink:#EDE7DC; --sub:#A7A297;
  --accent:#D9B36C; --line:#43464D; --con:#C98B6B;
  --serif:"Nanum Myeongjo Sub",Georgia,"Times New Roman","Apple Myungjo","Nanum Myeongjo",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:860px; margin:0 auto; padding:0 24px 90px}
[hidden]{display:none!important}
a{color:inherit}
img{max-width:100%; display:block}

/* 마스트헤드 */
header{border-bottom:1px solid var(--line); padding:30px 0 0}
.masthead{display:flex; justify-content:space-between; align-items:baseline}
.masthead a.logo{font-family:var(--serif); font-size:26px; letter-spacing:.04em; text-decoration:none}
.masthead .logo i{color:var(--accent); font-style:normal}
.issue{font-size:12px; color:var(--sub); letter-spacing:.12em}
nav{display:flex; gap:26px; padding:18px 0 14px; font-size:14px}
nav button{
  background:none; border:none; color:var(--sub); cursor:pointer; font-size:14px;
  /* 라이브 실측 26px 이었다 — 터치 타깃 44px 확보(모바일 3폭 재검 2026-08-31) */
  padding:13px 0 11px; min-height:44px; letter-spacing:.02em; border-bottom:2px solid transparent; font-family:inherit;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
nav button.on{color:var(--ink); border-bottom-color:var(--accent)}
nav button:disabled{opacity:.4}

/* 히어로 */
.hero{display:grid; grid-template-columns:7fr 5fr; gap:36px; padding:52px 0 44px; border-bottom:1px solid var(--line)}
@media(max-width:640px){.hero{grid-template-columns:1fr}}
.hero{animation:heroIn .7s var(--ease) both}
.hero-side{animation:heroIn .7s var(--ease) .12s both}
@keyframes heroIn{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.hero, .hero-side{animation:none}}
.hero .no{font-size:12px; color:var(--accent); letter-spacing:.18em; margin-bottom:14px}
.hero h1{font-family:var(--serif); font-size:38px; line-height:1.28; font-weight:500; margin-bottom:18px}
.hero p{color:var(--sub); font-size:15px; max-width:34em}
.hero-side{border-left:1px solid var(--line); padding-left:32px; display:flex; flex-direction:column; justify-content:center; gap:14px}
@media(max-width:640px){.hero-side{border-left:none; padding-left:0}}
.hero-side .meta{font-size:13px; color:var(--sub)}

.btn{
  display:inline-block; background:var(--accent); color:#26292F; border:none; cursor:pointer;
  padding:14px 26px; font-size:15px; font-weight:700; text-decoration:none; letter-spacing:.02em;
  border-radius:2px; font-family:inherit; transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(217,179,108,.25)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}

/* 퀴즈 목차 — 썸네일 카드 그리드 */
.index-head{display:flex; justify-content:space-between; padding:34px 0 8px; font-size:13px; color:var(--sub); letter-spacing:.1em}
.card-grid{list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; padding:14px 0 4px}
@media(max-width:760px){.card-grid{grid-template-columns:repeat(2, 1fr)}}
@media(max-width:520px){.card-grid{grid-template-columns:1fr}}
.card{
  border:1px solid var(--line); background:var(--panel); cursor:pointer; overflow:hidden;
  transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.card:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:0 10px 26px rgba(0,0,0,.28)}
.card-thumb{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg)}
.card-thumb img{width:100%; height:100%; object-fit:cover; border:none; transition:transform .35s var(--ease)}
.card:hover .card-thumb img{transform:scale(1.06)}
.card-num{
  position:absolute; left:0; bottom:0; font-family:var(--serif); font-size:14px; color:var(--ink);
  background:rgba(20,21,24,.68); padding:4px 10px 3px;
}
.card-thumb .g{
  position:absolute; right:0; top:0; font-size:11px; color:var(--accent); letter-spacing:.14em;
  background:rgba(20,21,24,.68); padding:5px 10px 4px;
}
.card-body{padding:16px 18px 20px}
.card-hook{font-size:11px; color:var(--accent); letter-spacing:.1em; margin-bottom:8px}
.card h3{font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.4; transition:color .15s}
.card:hover h3{color:var(--accent)}
.card .desc{font-size:12.5px; color:var(--sub); margin-top:8px; line-height:1.55}
@media (prefers-reduced-motion:reduce){.card, .card-thumb img{transition:none}}

/* 스크롤 리빌 — 본문은 조용하게, opacity+미세 이동만 */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* 글 본문 */
.article-head{padding:44px 0 28px; border-bottom:1px solid var(--line)}
.article-head .kicker{font-size:12px; color:var(--accent); letter-spacing:.18em; margin-bottom:14px}
.article-head h1{font-family:var(--serif); font-size:34px; line-height:1.32; font-weight:500}
.disclosure{
  font-size:12.5px; color:#C9BC9C; border:1px solid var(--line); border-left:3px solid var(--accent);
  background:var(--panel); padding:12px 16px; margin:22px 0 6px; letter-spacing:.01em;
}
.article-body{padding:30px 0; font-size:16.5px; max-width:38em}
.article-body p{margin-bottom:18px}
.article-body p:first-of-type:first-letter{
  font-family:var(--serif); font-size:34px; color:var(--accent); float:left; line-height:1; padding:4px 8px 0 0;
}
.article-body h2{font-family:var(--serif); font-size:22px; font-weight:500; margin:34px 0 14px}
.article-body figure{margin:26px 0}
.article-body figcaption{font-size:12px; color:var(--sub); margin-top:8px}
figure img{ display:block; width:100%; height:auto; border:1px solid var(--line); }
/* R6 D1: 중간 요약 박스 — 괘선+골드 포인트, 이미지 대체 시각 앵커 */
.summary-box{
  margin:30px 0; padding:22px 24px; border-top:1px solid var(--accent); border-bottom:1px solid var(--line);
  background:var(--panel);
}
.summary-box-title{
  font-family:var(--serif); font-size:14px; color:var(--accent); letter-spacing:.08em; margin-bottom:12px;
}
.summary-box ul{list-style:none; padding:0}
.summary-box li{
  font-size:14.5px; color:var(--ink); padding:6px 0 6px 18px; position:relative; line-height:1.55;
}
.summary-box li::before{content:"—"; position:absolute; left:0; color:var(--accent)}
.img-slot{
  aspect-ratio:16/9; background:
    repeating-linear-gradient(135deg, var(--panel), var(--panel) 12px, #34373e 12px, #34373e 24px);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--sub); font-size:13px; text-align:center; padding:16px;
}

/* 하단 후킹 CTA */
.cta-block{
  margin:40px 0 10px; padding:34px 30px; border:1px solid var(--line); border-top:2px solid var(--accent);
  background:var(--panel); text-align:center; position:relative; overflow:hidden;
}
.cta-block h2{font-family:var(--serif); font-size:22px; font-weight:500; line-height:1.4; margin-bottom:20px}
.cta-block .btn{position:relative; overflow:hidden}
.cta-block .btn::after{
  content:""; position:absolute; inset:0; border-radius:2px; box-shadow:0 0 0 0 rgba(217,179,108,.5);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(217,179,108,.35)}
  70%{box-shadow:0 0 0 14px rgba(217,179,108,0)}
  100%{box-shadow:0 0 0 0 rgba(217,179,108,0)}
}
@media (prefers-reduced-motion:reduce){.cta-block .btn::after{animation:none}}

footer{border-top:1px solid var(--line); padding:26px 0; font-size:12px; color:var(--sub)}

/* ── 퀴즈 모달 ── */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,11,13,.72); display:flex; align-items:flex-start; justify-content:center;
  padding:5vh 16px; z-index:50; overflow-y:auto;
  opacity:0; transition:opacity .2s var(--ease);
}
.modal-backdrop.open{opacity:1}
.modal{
  background:var(--bg); border:1px solid var(--line); max-width:640px; width:100%; padding:0 28px 28px;
  transform:translateY(18px) scale(.98); opacity:0; transition:transform .28s var(--ease), opacity .28s var(--ease);
}
.modal-backdrop.open .modal{transform:none; opacity:1}
@media (prefers-reduced-motion:reduce){
  .modal-backdrop, .modal{transition:none}
}
.quiz-top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0 8px; position:sticky; top:0; background:var(--bg)}
.quiz-top .steps{font-family:var(--serif); font-size:15px; color:var(--sub); letter-spacing:.14em}
.quiz-top .steps b{color:var(--accent); font-weight:500}
.quiz-top button{background:none; border:none; color:var(--sub); font-size:22px; cursor:pointer; line-height:1; padding:4px}
.quiz-top button:hover{color:var(--accent)}
.rule{height:1px; background:var(--line); margin:6px 0 30px; position:relative; overflow:hidden}
.rule i{position:absolute; left:0; top:0; height:1px; background:var(--accent); width:0; transition:width .3s var(--ease)}
.qbox h2{font-family:var(--serif); font-size:24px; line-height:1.4; font-weight:500; margin-bottom:8px}
.qbox .hint{font-size:13px; color:var(--sub); margin-bottom:24px}
.opts{display:flex; flex-direction:column}
.opt{
  text-align:left; background:none; border:none; border-bottom:1px solid var(--line);
  padding:16px 6px; font-size:15px; cursor:pointer; color:var(--ink); font-family:inherit;
  display:flex; justify-content:space-between; align-items:center; gap:14px; width:100%;
  transition:color .15s var(--ease), padding-left .15s var(--ease);
}
.opt:hover{padding-left:10px; color:var(--accent)}
.opt:after{content:"→"; color:var(--line); transition:transform .15s var(--ease)}
.opt:hover:after{transform:translateX(3px)}
.opt.sel{color:var(--accent)} .opt.sel:after{content:"●"; color:var(--accent); font-size:10px}
.opt small{color:var(--sub); font-size:12px}
.quiz-next{margin-top:26px; display:flex; justify-content:flex-end; padding-bottom:6px}

/* 문항 전환 애니메이션 */
.qbox{animation:qin .32s var(--ease)}
@keyframes qin{from{opacity:0; transform:translateX(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.qbox{animation:none}}

/* 결과 화면 — 유형 공개 연출 */
.r-declare{text-align:center; padding:10px 0 30px; border-bottom:1px solid var(--line)}
.r-declare .icon{font-size:44px; animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.4); opacity:0} 60%{transform:scale(1.12); opacity:1} 100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.r-declare .icon{animation:none}}
.r-declare .label{font-size:12px; color:var(--accent); letter-spacing:.22em; margin:14px 0 8px}
.r-declare h1{font-family:var(--serif); font-size:30px; font-weight:500; margin-bottom:16px}
.r-declare .why{font-size:14px; color:var(--sub); max-width:36em; margin:0 auto; text-align:left; border:1px solid var(--line); padding:14px 18px}
.story{padding:28px 0; font-size:16px; max-width:38em; border-bottom:1px solid var(--line)}
.story p{margin-bottom:14px}
.bridge{padding:20px 0; font-family:var(--serif); font-size:16px; color:var(--sub)}
.plist-label{font-size:12px; color:var(--sub); letter-spacing:.2em; margin-bottom:14px}
.prod{border:1px solid var(--line); background:var(--panel); padding:22px; margin-bottom:12px}
.prod.main{border-color:var(--accent)}
.prod .plabel{font-size:11px; letter-spacing:.18em; color:var(--accent); margin-bottom:8px}
.prod h3{font-size:16px; font-weight:600; margin-bottom:6px}
.prod ul{list-style:none; font-size:13.5px; color:var(--sub); margin-bottom:14px}
.prod ul li{padding:2.5px 0}
.prod ul li.con{color:var(--con)}
.sub-prods{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:520px){.sub-prods{grid-template-columns:1fr}}
.result-footer-nav{display:flex; gap:10px; flex-wrap:wrap; padding:26px 0 4px}
.result-footer-nav .btn{font-size:13px; padding:10px 16px}
.result-body{animation:rin .4s var(--ease)}
@keyframes rin{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){.result-body{animation:none}}