@import url("../shared/art-direction.css");
:root {
  color-scheme: dark;
  --bg: var(--hw-black);
  --panel: #11101a;
  --panel-2: #171522;
  --paper: var(--hw-paper);
  --text: var(--hw-paper);
  --muted: var(--hw-soft);
  --dim: var(--hw-dim);
  --gold: var(--hw-accent);
  --gold-soft: rgba(146, 131, 189, .14);
  --line: var(--hw-rule);
  --serif: var(--hw-serif);
  --sans: var(--hw-sans);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-anchor: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--sans); }
body::before { position: fixed; z-index: -1; inset: 0; max-width: 450px; margin: 0 auto; content: ""; background: radial-gradient(80% 42% at 50% -8%, rgba(76, 56, 132, .15), transparent 70%), linear-gradient(180deg, #0d0b16, var(--hw-black) 70%); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--hw-paper); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: -80px; left: 16px; padding: 11px 14px; background: var(--text); color: #111; }
.skip-link:focus { top: 12px; }
.archive-view { width: min(100%, 450px); margin: auto; padding: 0 22px 110px; }
.archive-hero { position: relative; max-width: 450px; padding: clamp(74px, min(13vw,58.5px), 128px) 0 clamp(72px, min(10vw,45px), 108px); }
.archive-hero::after { display: block; width: 1px; height: 56px; margin-top: 42px; background: linear-gradient(var(--gold), transparent); content: ""; }
.eyebrow, .funnel-kicker { margin: 0 0 18px; color: var(--gold); font: 10px Georgia, serif; letter-spacing: .24em; }
.archive-hero h1 { margin: 0 0 27px; font: 500 clamp(43px, min(9vw,40.5px), 72px)/1.34 var(--serif); letter-spacing: -.065em; }
.archive-intro { max-width: 450px; margin: 0; color: var(--muted); font: 400 clamp(15px, min(2.2vw,9.9px), 18px)/2 var(--serif); word-break: keep-all; }
.celebrity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, min(5vw,22.5px), 58px) clamp(16px, min(3vw,13.5px), 28px); }
.celebrity-card { min-width: 0; }
.celebrity-card a { display: block; text-decoration: none; }
.portrait { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #151321; }
.portrait::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(65,48,112,.08), transparent 48%, rgba(7,5,15,.76)); pointer-events: none; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; filter: grayscale(1) sepia(.1) hue-rotate(215deg) saturate(.78) contrast(1.08) brightness(.92); transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease; }
.celebrity-card a:hover .portrait img,
.celebrity-card a:focus-visible .portrait img { transform: scale(1.035); filter: grayscale(0) saturate(.9) contrast(1.04); }
.portrait-rank { position: absolute; z-index: 2; right: 12px; bottom: 10px; color: var(--hw-paper); font: 11px Georgia, serif; letter-spacing: .14em; }
.card-copy { padding: 17px 2px 0; }
.card-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card-name-row h2 { margin: 0; font: 500 clamp(19px, min(2.7vw,12.15px), 25px)/1.4 var(--serif); }
.card-name-row small { overflow: hidden; color: var(--dim); font: 9px Georgia, serif; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.card-title { min-height: 3.4em; margin: 9px 0 13px; color: var(--muted); font: 400 13px/1.7 var(--serif); word-break: keep-all; }
.axis-row { display: flex; flex-wrap: wrap; gap: 7px; }
.axis-row span { padding: 5px 8px; border: 1px solid var(--line); color: var(--hw-soft); font-size: 10px; }
.list-funnel, .detail-funnel { position: relative; overflow: hidden; margin-top: clamp(100px, min(16vw,72px), 170px); padding: clamp(56px, min(8vw,36px), 90px) clamp(24px, min(7vw,31.5px), 68px); border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(65,48,112,.11), rgba(255,255,255,.012)), #0f0e17; }
.list-funnel::before, .detail-funnel::before { position: absolute; top: 0; left: 0; width: 78px; height: 2px; background: var(--gold); content: ""; }
.list-funnel h2, .detail-funnel h2 { margin: 0 0 22px; font: 500 clamp(29px, min(6vw,27px), 46px)/1.55 var(--serif); letter-spacing: -.055em; word-break: keep-all; }
.list-funnel p:not(.funnel-kicker), .detail-funnel p:not(.funnel-kicker) { margin: 0 0 35px; color: var(--muted); font: 400 15px/1.9 var(--serif); word-break: keep-all; }
.funnel-button { position: relative; display: flex; overflow: hidden; align-items: center; justify-content: center; min-height: 66px; padding: 8px 20px; border: 1px solid rgba(255,255,255,.52); border-radius: 16px; background: linear-gradient(110deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); box-shadow: 0 0 0 1px rgba(255,255,255,.035) inset, 0 8px 30px rgba(0,0,0,.28); color: #f7f4ec; font: 400 16px var(--serif); text-align: center; text-decoration: none; transition: border-color .3s ease, box-shadow .3s ease, color .3s ease, transform .3s ease; animation: funnel-glow 3.8s ease-in-out infinite; isolation: isolate; }
.funnel-button::after { position: absolute; z-index: -1; top: -80%; left: -38%; width: 24%; height: 260%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); content: ""; filter: blur(1px); pointer-events: none; transform: rotate(18deg) translateX(-320%); animation: funnel-shine 3.8s cubic-bezier(.55,.05,.25,1) infinite; }
.funnel-button:hover, .funnel-button:focus-visible { border-color: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 24px rgba(255,255,255,.14), 0 12px 34px rgba(0,0,0,.38); color: #fff; transform: translateY(-2px); }
.funnel-button:active { transform: translateY(0) scale(.995); }
@keyframes funnel-shine {
  0%, 58% { transform: rotate(18deg) translateX(-320%); opacity: 0; }
  66% { opacity: .85; }
  82% { transform: rotate(18deg) translateX(720%); opacity: 0; }
  100% { transform: rotate(18deg) translateX(720%); opacity: 0; }
}
@keyframes funnel-glow {
  0%, 52%, 100% { border-color: rgba(255,255,255,.42); box-shadow: 0 0 0 1px rgba(255,255,255,.025) inset, 0 8px 30px rgba(0,0,0,.28); }
  70% { border-color: rgba(255,255,255,.78); box-shadow: 0 0 0 1px rgba(255,255,255,.09) inset, 0 0 20px rgba(255,255,255,.12), 0 10px 32px rgba(0,0,0,.34); }
}
.detail-view { width: min(100%, 450px); margin: auto; padding: 0 22px 105px; }
.detail-nav { display: flex; align-items: center; justify-content: space-between; min-height: 68px; border-bottom: 1px solid var(--line); }
.detail-back { min-height: 44px; border: 0; background: none; color: var(--hw-paper); font: 400 14px var(--serif); cursor: pointer; }
.detail-count { color: var(--dim); font: 10px Georgia, serif; letter-spacing: .15em; }
.detail-hero { display: grid; grid-template-columns: minmax(240px, .78fr) minmax(280px, 1fr); gap: clamp(30px, min(7vw,31.5px), 72px); align-items: end; padding: clamp(46px, min(8vw,36px), 82px) 0 78px; }
.detail-image { overflow: hidden; aspect-ratio: 4 / 5; background: #151321; }
.detail-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; filter: grayscale(1) sepia(.1) hue-rotate(215deg) saturate(.78) contrast(1.08) brightness(.92); transition: filter .35s ease; }
.detail-image:hover img { filter: grayscale(0) saturate(.9) contrast(1.04); }
.detail-heading .eyebrow { margin-bottom: 14px; }
.detail-heading h1 { margin: 0 0 8px; font: 500 clamp(42px, min(7vw,31.5px), 62px)/1.35 var(--serif); letter-spacing: -.05em; }
.detail-heading .english { margin: 0 0 27px; color: var(--dim); font: 10px Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
.detail-heading h2 { margin: 0; color: var(--hw-paper); font: 400 clamp(20px, min(3.6vw,16.2px), 29px)/1.7 var(--serif); letter-spacing: -.04em; word-break: keep-all; }
.birth-line { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 25px; color: #9790ad; font-size: 11px; }
.reading-section { padding: clamp(46px, min(8vw,36px), 72px) 0; border-top: 1px solid var(--line); }
.section-label { margin: 0 0 16px; color: var(--gold); font: 10px Georgia, serif; letter-spacing: .2em; }
.reading-section h2 { margin: 0 0 24px; font: 500 clamp(27px, min(5vw,22.5px), 38px)/1.5 var(--serif); letter-spacing: -.05em; }
.reading-section p { margin: 0 0 18px; color: var(--hw-soft); font: 400 clamp(15px, min(2.3vw,10.35px), 17px)/2 var(--serif); word-break: keep-all; }
.reading-section > p:last-child { margin-bottom: 0; }
.chart-section { padding-top: 58px; }
.chart-intro { max-width: 450px; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 30px 0 12px; }
.pillar { display: grid; min-height: 136px; place-items: center; align-content: center; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(146,131,189,.1), rgba(255,255,255,.015)); text-align: center; }
.pillar small { margin-bottom: 9px; color: var(--dim); font-size: 10px; letter-spacing: .13em; }
.pillar strong { color: #ddd6f1; font: 500 24px/1.3 var(--serif); letter-spacing: .08em; }
.pillar span { margin-top: 3px; color: var(--gold); font: 14px Georgia, serif; letter-spacing: .15em; }
.chart-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 26px; border: 1px solid var(--line); border-top: 0; }
.chart-facts > span { display: grid; gap: 5px; min-width: 0; padding: 13px 15px; border-right: 1px solid var(--line); }
.chart-facts > span:last-child { border-right: 0; }
.chart-facts small { color: var(--dim); font-size: 9px; letter-spacing: .1em; }
.chart-facts strong { overflow: hidden; color: #c9c1df; font: 500 13px var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.element-chart { display: grid; gap: 11px; padding: 20px; border: 1px solid var(--line); background: rgba(146,131,189,.045); }
.element-row { display: grid; grid-template-columns: 47px minmax(0, 1fr) 18px; gap: 11px; align-items: center; }
.element-row b { color: #b7afcc; font: 500 11px var(--serif); }
.element-row > span { overflow: hidden; height: 4px; background: rgba(255,255,255,.07); }
.element-row i { display: block; height: 100%; background: linear-gradient(90deg, #65518f, #a997d2); }
.element-row em { color: var(--gold); font: normal 11px Georgia, serif; text-align: right; }
.evidence { margin-top: 31px; padding: 19px 20px; border-left: 2px solid var(--hw-seal); background: rgba(151,135,198,.05); color: var(--hw-soft); font: 13px/1.8 var(--serif); }
.detail-axes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 30px; }
.detail-axis { padding: 17px; border: 1px solid var(--line); background: var(--panel); }
.detail-axis span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.detail-axis strong { color: var(--hw-paper); font: 400 27px Georgia, serif; }
.detail-axis small { margin-left: 4px; color: var(--dim); font-size: 10px; }
.move-list { display: grid; gap: 0; margin: 27px 0 0; padding: 0; list-style: none; counter-reset: moves; }
.move-list li { display: grid; grid-template-columns: 35px 1fr; gap: 13px; padding: 19px 0; border-top: 1px solid var(--line); color: var(--hw-paper); font: 400 15px/1.8 var(--serif); counter-increment: moves; }
.move-list li:last-child { border-bottom: 1px solid var(--line); }
.move-list li::before { color: var(--gold); font: 12px Georgia, serif; content: "0" counter(moves); }
.detail-legal { margin-top: 34px; color: rgba(184,179,204,.14); transition: color .25s ease; }
.detail-legal:hover, .detail-legal:focus-within { color: rgba(184,179,204,.5); }
.detail-note { margin: 0; color: inherit; font-size: 10px; line-height: 1.8; word-break: keep-all; }
.source-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 17px; }
.source-links a { color: inherit; font-size: 10px; text-underline-offset: 3px; }
.source-links a:hover, .source-links a:focus-visible { color: rgba(184,179,204,.72); }
.detail-funnel { margin-top: 72px; }

  .celebrity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-view { width: min(100%, 450px); }
  .detail-hero { grid-template-columns: 1fr; gap: 34px; padding-top: 36px; }
  .detail-image { width: min(82%, 360px); }
@media (hover: none), (pointer: coarse) {
  .celebrity-card.is-in-view .portrait img,
  .detail-image.is-in-view img { filter: grayscale(0) saturate(.9) contrast(1.04); }
}
@media (max-width: 370px) {
  .archive-view, .detail-view { padding-inline: 17px; }
  .celebrity-grid { gap-inline: 12px; }
  .card-title { font-size: 12px; }
  .axis-row { gap: 5px; }
  .axis-row span { padding-inline: 6px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portrait img, .detail-image img { transition: none; }
  .funnel-button, .funnel-button::after { animation: none; }
  .funnel-button:hover, .funnel-button:focus-visible, .funnel-button:active { transform: none; }
}

.element-row i[data-width="0"]{width:0%}
.element-row i[data-width="1"]{width:1%}
.element-row i[data-width="2"]{width:2%}
.element-row i[data-width="3"]{width:3%}
.element-row i[data-width="4"]{width:4%}
.element-row i[data-width="5"]{width:5%}
.element-row i[data-width="6"]{width:6%}
.element-row i[data-width="7"]{width:7%}
.element-row i[data-width="8"]{width:8%}
.element-row i[data-width="9"]{width:9%}
.element-row i[data-width="10"]{width:10%}
.element-row i[data-width="11"]{width:11%}
.element-row i[data-width="12"]{width:12%}
.element-row i[data-width="13"]{width:13%}
.element-row i[data-width="14"]{width:14%}
.element-row i[data-width="15"]{width:15%}
.element-row i[data-width="16"]{width:16%}
.element-row i[data-width="17"]{width:17%}
.element-row i[data-width="18"]{width:18%}
.element-row i[data-width="19"]{width:19%}
.element-row i[data-width="20"]{width:20%}
.element-row i[data-width="21"]{width:21%}
.element-row i[data-width="22"]{width:22%}
.element-row i[data-width="23"]{width:23%}
.element-row i[data-width="24"]{width:24%}
.element-row i[data-width="25"]{width:25%}
.element-row i[data-width="26"]{width:26%}
.element-row i[data-width="27"]{width:27%}
.element-row i[data-width="28"]{width:28%}
.element-row i[data-width="29"]{width:29%}
.element-row i[data-width="30"]{width:30%}
.element-row i[data-width="31"]{width:31%}
.element-row i[data-width="32"]{width:32%}
.element-row i[data-width="33"]{width:33%}
.element-row i[data-width="34"]{width:34%}
.element-row i[data-width="35"]{width:35%}
.element-row i[data-width="36"]{width:36%}
.element-row i[data-width="37"]{width:37%}
.element-row i[data-width="38"]{width:38%}
.element-row i[data-width="39"]{width:39%}
.element-row i[data-width="40"]{width:40%}
.element-row i[data-width="41"]{width:41%}
.element-row i[data-width="42"]{width:42%}
.element-row i[data-width="43"]{width:43%}
.element-row i[data-width="44"]{width:44%}
.element-row i[data-width="45"]{width:45%}
.element-row i[data-width="46"]{width:46%}
.element-row i[data-width="47"]{width:47%}
.element-row i[data-width="48"]{width:48%}
.element-row i[data-width="49"]{width:49%}
.element-row i[data-width="50"]{width:50%}
.element-row i[data-width="51"]{width:51%}
.element-row i[data-width="52"]{width:52%}
.element-row i[data-width="53"]{width:53%}
.element-row i[data-width="54"]{width:54%}
.element-row i[data-width="55"]{width:55%}
.element-row i[data-width="56"]{width:56%}
.element-row i[data-width="57"]{width:57%}
.element-row i[data-width="58"]{width:58%}
.element-row i[data-width="59"]{width:59%}
.element-row i[data-width="60"]{width:60%}
.element-row i[data-width="61"]{width:61%}
.element-row i[data-width="62"]{width:62%}
.element-row i[data-width="63"]{width:63%}
.element-row i[data-width="64"]{width:64%}
.element-row i[data-width="65"]{width:65%}
.element-row i[data-width="66"]{width:66%}
.element-row i[data-width="67"]{width:67%}
.element-row i[data-width="68"]{width:68%}
.element-row i[data-width="69"]{width:69%}
.element-row i[data-width="70"]{width:70%}
.element-row i[data-width="71"]{width:71%}
.element-row i[data-width="72"]{width:72%}
.element-row i[data-width="73"]{width:73%}
.element-row i[data-width="74"]{width:74%}
.element-row i[data-width="75"]{width:75%}
.element-row i[data-width="76"]{width:76%}
.element-row i[data-width="77"]{width:77%}
.element-row i[data-width="78"]{width:78%}
.element-row i[data-width="79"]{width:79%}
.element-row i[data-width="80"]{width:80%}
.element-row i[data-width="81"]{width:81%}
.element-row i[data-width="82"]{width:82%}
.element-row i[data-width="83"]{width:83%}
.element-row i[data-width="84"]{width:84%}
.element-row i[data-width="85"]{width:85%}
.element-row i[data-width="86"]{width:86%}
.element-row i[data-width="87"]{width:87%}
.element-row i[data-width="88"]{width:88%}
.element-row i[data-width="89"]{width:89%}
.element-row i[data-width="90"]{width:90%}
.element-row i[data-width="91"]{width:91%}
.element-row i[data-width="92"]{width:92%}
.element-row i[data-width="93"]{width:93%}
.element-row i[data-width="94"]{width:94%}
.element-row i[data-width="95"]{width:95%}
.element-row i[data-width="96"]{width:96%}
.element-row i[data-width="97"]{width:97%}
.element-row i[data-width="98"]{width:98%}
.element-row i[data-width="99"]{width:99%}
.element-row i[data-width="100"]{width:100%}

/* 261009_ 원컬럼 바깥 배경 */
:root:has(#celebrity-content) { background: #1c1c1c; }
/* 261011_ 모바일 인물 검색 확대 방지 */
@media (hover: none) and (pointer: coarse) {
  body .option-free .of-goal-controls select { font-size: 16px; }
}