@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');

/* Shared proportions; each portrait below keeps its own material and type. */
:root[data-theme="gangja"] {--muted:#706f5c;--line:rgba(85,77,49,.22);--paper-rgb:241,235,221;--portrait-font:'Nanum Myeongjo',Batang,serif;color-scheme:light;}
:root[data-theme="haesoo"] {--muted:#b6c8ce;--line:rgba(211,177,107,.27);--paper-rgb:16,35,50;--portrait-font:'Noto Serif KR',Batang,serif;color-scheme:dark;}
:root[data-theme="songpan"] {--muted:#beb0a1;--line:rgba(198,167,120,.26);--paper-rgb:33,28,25;--portrait-font:'Noto Sans KR','Malgun Gothic',sans-serif;color-scheme:dark;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) {scrollbar-color:var(--gold) var(--paper);}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .film {background:var(--paper);}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .film:after {background:linear-gradient(90deg,rgba(var(--paper-rgb),.98),rgba(var(--paper-rgb),.88) 24%,transparent 44%,transparent 65%,rgba(var(--paper-rgb),.92) 82%,var(--paper)),linear-gradient(0deg,var(--paper),transparent 23%,transparent 78%,rgba(var(--paper-rgb),.8));}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .stage:before {border-color:var(--line);}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) h1 {font-family:var(--portrait-font);font-size:clamp(46px,5vw,76px);font-weight:500;color:var(--ink);text-shadow:0 3px 24px var(--paper);line-height:1.35;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .stage:not([data-scene="0"]) h1 {font-size:28px;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) h1 .character-alias {font-family:var(--portrait-font);color:var(--gold);font-size:13px;line-height:1.5;letter-spacing:.08em;margin-top:16px;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) h1 span:not(.character-alias) {font:9px/1.7 Cinzel,Georgia,serif;color:var(--muted);letter-spacing:.1em;margin-top:17px;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) :is(.eyebrow,.edition span,.facts dt,.hobby>span,.caption>span) {color:var(--gold);}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .profile {top:29%;width:24%;max-width:280px;right:5%;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .profile .eyebrow {font-size:10px;letter-spacing:.06em;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .occupation {font-family:var(--portrait-font);max-width:none;font-size:25px;line-height:1.6;white-space:pre-line;margin-bottom:22px;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .facts {display:grid;grid-template-columns:1.15fr 1fr .8fr;gap:12px;padding:18px 0;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .facts dd {font-family:var(--portrait-font);font-size:16px;white-space:nowrap;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .facts dt {font-size:11px;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .hobby {gap:20px;padding-top:18px;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .hobby p {color:var(--muted);font-size:13px;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .story {top:34%;width:32%;max-width:420px;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .story h2 {font-family:var(--portrait-font);font-weight:500;line-height:1.5;font-size:clamp(25px,2.5vw,37px);color:var(--ink);white-space:pre-line;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .story>p:not(.eyebrow) {font-family:var(--portrait-font);font-size:16px;line-height:1.95;color:var(--muted);white-space:pre-line;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .story .eyebrow {font-size:10px;letter-spacing:.13em;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .quote-mark {color:var(--gold);opacity:.28;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .caption h2 {font-family:var(--portrait-font);font-size:23px;}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) :is(.caption p,.scroll-hint) {color:var(--muted);}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .motion {color:var(--ink);background:rgba(var(--paper-rgb),.85);border-color:var(--line);}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .motion:hover {background:rgba(var(--paper-rgb),1);}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .progress-track {background:var(--line);}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .character-rail {color:var(--ink);background:var(--paper);border-right-color:var(--line);}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) :is(.rail-brand span,.rail-bottom,.rail-heading span) {color:var(--muted);}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) :is(.rail-heading,.member-badge) {color:var(--gold);}
:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) :is(.member-badge,.character-card img) {border-color:var(--line);}
:root:is([data-theme="haesoo"],[data-theme="songpan"]) .character-card[aria-pressed="true"] {border-color:var(--gold);background:rgba(255,255,255,.06);}
:root:is([data-theme="haesoo"],[data-theme="songpan"]) .character-card:hover {background:rgba(255,255,255,.08);}

/* GANGJA — warm hanji, ink and a small vermilion seal. */
:root[data-theme="gangja"] h1 {font-weight:800;letter-spacing:.04em;}
:root[data-theme="gangja"] .identity:before {content:'强者';display:block;width:32px;padding:9px 5px;margin-bottom:25px;text-align:center;font:700 18px/1.15 'Nanum Myeongjo',serif;color:#f7eee0;border:2px solid #a3523d;background:#a3523d;box-shadow:inset 0 0 0 2px #eee0c6;writing-mode:vertical-rl;letter-spacing:5px;transform:rotate(-4deg);}
:root[data-theme="gangja"] .stage:not([data-scene="0"]) .identity:before {display:none;}
:root[data-theme="gangja"] .edition {font-family:'Nanum Myeongjo',serif;letter-spacing:.22em;}
:root[data-theme="gangja"] .story h2 {font-weight:700;letter-spacing:-.04em;}
:root[data-theme="gangja"] .story>p:not(.eyebrow) {color:#444b3e;font-weight:700;}
:root[data-theme="gangja"] .story .eyebrow {font-family:'Nanum Myeongjo',serif;font-size:13px;letter-spacing:.19em;}
:root[data-theme="gangja"] .story-rule {width:120px;background:linear-gradient(90deg,#a3523d,transparent);}
:root[data-theme="gangja"] .profile {border-left:1px solid var(--line);padding-left:22px;}
:root[data-theme="gangja"] .profile .eyebrow {font-family:'Nanum Myeongjo',serif;font-size:12px;letter-spacing:.14em;}
:root[data-theme="gangja"] .occupation {font-weight:700;font-size:26px;}
:root[data-theme="gangja"] .character-rail {background:repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(109,99,76,.025) 30px),#e9e1cf;}
:root[data-theme="gangja"] .character-card img {border-radius:2px;filter:saturate(.8);}
:root[data-theme="gangja"] .character-card[aria-pressed="true"] {border-color:#a3523d;background:rgba(255,255,255,.45);}
:root[data-theme="gangja"] .character-card:hover {background:rgba(255,255,255,.3);}
:root[data-theme="gangja"] .character-card[data-character="gangja"] strong {font-family:'Nanum Myeongjo',serif;font-weight:800;}

/* HAESOO — midnight ocean, brass and a captain's engraved log. */
:root[data-theme="haesoo"] .identity:before {content:'⚓︎';display:block;font:39px 'Segoe UI Symbol',serif;color:var(--gold);margin-bottom:22px;}
:root[data-theme="haesoo"] .stage:not([data-scene="0"]) .identity:before {display:none;}
:root[data-theme="haesoo"] .edition {font-family:Cinzel,Georgia,serif;letter-spacing:.09em;}
:root[data-theme="haesoo"] .stage:before {border-top:3px double var(--line);border-bottom:3px double var(--line);}
:root[data-theme="haesoo"] .occupation {font-size:22px;letter-spacing:-.02em;}
:root[data-theme="haesoo"] .profile .eyebrow {font-family:Cinzel,'Malgun Gothic',sans-serif;font-size:9px;}
:root[data-theme="haesoo"] .story-rule {width:120px;height:3px;background:none;border-top:1px solid var(--gold);border-bottom:1px solid var(--line);}
:root[data-theme="haesoo"] .character-rail {background:linear-gradient(180deg,#142d40,#0b1a27);}
:root[data-theme="haesoo"] .character-card img {border-radius:50% 50% 3px 3px;}
:root[data-theme="haesoo"] .story h2 {color:#f0deb8;}

/* SONGPAN — dark walnut, strict rules and an unapologetically blunt statement. */
:root[data-theme="songpan"] h1 {font-weight:600;letter-spacing:-.07em;}
:root[data-theme="songpan"] .identity:before {content:'JUDICIAL RECORD';display:block;width:max-content;font:9px Consolas,monospace;letter-spacing:.16em;color:var(--gold);padding:8px 11px;border:1px solid var(--line);margin-bottom:23px;}
:root[data-theme="songpan"] .stage:not([data-scene="0"]) .identity:before {display:none;}
:root[data-theme="songpan"] .stage:before {border:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);}
:root[data-theme="songpan"] :is(.edition,.story .eyebrow) {font-family:Consolas,'Malgun Gothic',monospace;letter-spacing:.13em;}
:root[data-theme="songpan"] .story .eyebrow {border-top:1px solid var(--line);padding-top:15px;}
:root[data-theme="songpan"] .story h2 {font-weight:600;letter-spacing:-.055em;}
:root[data-theme="songpan"] .quote-mark {display:none;}
:root[data-theme="songpan"] .story-rule {height:2px;width:50px;background:#a26f56;}
:root[data-theme="songpan"] .character-card img {border-radius:3px;}
:root[data-theme="songpan"] .story[data-panel="2"]>p:not(.eyebrow):last-of-type {border-left:2px solid #967051;padding:10px 13px;background:rgba(0,0,0,.12);font-size:12px;line-height:1.8;color:#b8a698;margin-top:19px;}
:root[data-theme="songpan"] .story[data-panel="2"]>p:not(.eyebrow):last-of-type:before {content:'TMI / 대리작성 메모';display:block;color:var(--gold);font-size:9px;letter-spacing:.07em;margin-bottom:7px;}

/* CECILIA — preserve the ivory/navy/gold portrait, now with the final footage. */
:root[data-theme="cecilia"] .film {background:var(--paper);}
:root[data-theme="cecilia"] .film:after {background:linear-gradient(90deg,rgba(244,240,235,.95),rgba(244,240,235,.85) 23%,transparent 44%,transparent 65%,rgba(244,240,235,.92) 83%,#f4f0eb),linear-gradient(0deg,#f4f0eb,transparent 24%,transparent 78%,rgba(244,240,235,.8));}
:root[data-theme="cecilia"] .identity:before {content:'◇';display:block;font:32px Georgia,serif;color:var(--gold);margin-bottom:24px;}
:root[data-theme="cecilia"] .stage:not([data-scene="0"]) .identity:before {display:none;}
:root[data-theme="cecilia"] .edition {font-family:Cinzel,Georgia,serif;letter-spacing:.12em;}
:root[data-theme="cecilia"] .story-rule {width:90px;background:linear-gradient(90deg,var(--gold),transparent);}
:root[data-theme="cecilia"] .profile {width:24%;max-width:265px;}
:root[data-theme="cecilia"] .occupation {max-width:none;font-size:26px;}
:root[data-theme="cecilia"] .facts {justify-content:space-between;}

@media(min-width:801px) and (max-width:1200px){
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .profile {width:26%;right:4%;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .occupation {font-size:21px;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .story {width:34%;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .story>p:not(.eyebrow) {font-size:15px;}
}
@media(max-width:800px){
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .film:after {background:linear-gradient(0deg,var(--paper),transparent 37%,transparent 70%,var(--paper) 90%);}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .identity:before {display:none;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .identity,:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .stage[data-scene] .identity {top:11%;left:7%;bottom:auto;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) h1,:root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .stage:not([data-scene="0"]) h1 {font-size:28px;line-height:1.3;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) h1 .character-alias {font-size:10px;line-height:1.4;letter-spacing:.04em;margin-top:8px;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) h1 span:not(.character-alias) {font-size:7px;letter-spacing:.04em;margin-top:7px;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"]) h1 span:not(.character-alias) {display:none;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .profile {top:54%;left:7%;right:7%;width:auto;max-width:none;display:block;border-left:0;padding-left:0;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .profile .eyebrow {font-size:9px;letter-spacing:.05em;margin-bottom:12px;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .occupation {font-size:20px;line-height:1.5;margin-bottom:15px;}
  :root[data-theme="haesoo"] .occupation {font-size:17px;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .facts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);gap:12px;padding:11px 0;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .facts dt {font-size:10px;margin-bottom:7px;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .facts dd {font-size:14px;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .hobby {padding-top:12px;gap:17px;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .hobby p {font-size:12px;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .story {top:55%;left:7%;width:86%;max-width:none;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .story .eyebrow {font-size:9px;margin-bottom:14px;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .story h2 {font-size:23px;line-height:1.5;margin-bottom:14px;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .story>p:not(.eyebrow) {font-size:14px;line-height:1.8;}
  :root[data-theme="songpan"] .story[data-panel="2"]>p:not(.eyebrow):last-of-type {font-size:11px;line-height:1.6;margin-top:12px;padding:9px 11px;}
  :root[data-theme="cecilia"] .story h2 {font-size:22px;}
  :root[data-theme="cecilia"] .story>p:not(.eyebrow) {font-size:14px;line-height:1.8;}
}
@media(max-width:800px) and (max-height:760px){
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .profile {top:46%;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .occupation {font-size:19px;margin-bottom:12px;}
  :root[data-theme="haesoo"] .occupation {font-size:16px;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .story {top:47%;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .story h2 {font-size:21px;margin-bottom:11px;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"]) .story>p:not(.eyebrow) {font-size:13px;line-height:1.75;}
  :root[data-theme="cecilia"] .story h2 {font-size:19px;line-height:1.45;margin-bottom:9px;}
  :root[data-theme="cecilia"] .story>p:not(.eyebrow) {font-size:12.5px;line-height:1.6;margin-bottom:8px;}
}
@media(min-width:500px) and (max-width:800px) and (max-height:760px){
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .profile {top:54%;}
  :root:is([data-theme="gangja"],[data-theme="haesoo"],[data-theme="songpan"],[data-theme="cecilia"]) .story {top:55%;}
}