:root{
  --ink:#171b27;--ink-2:#202534;--paper:#f1ece2;--paper-2:#faf6ee;--wine:#8b3150;--wine-deep:#69213c;
  --brass:#b99a60;--brass-pale:#e2cca0;--line:#c8baa7;--text:#2b2c34;--muted:#6b696d;--white:#fffaf1;
  --max:1480px;--pad:max(5vw,calc((100vw - var(--max))/2));
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:var(--text);background:var(--paper);font-synthesis:none
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:82px}body{margin:0;background:var(--paper);overflow-x:hidden}body.opening-active,body.dialog-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}img{display:block;max-width:100%}h1,h2,h3,p,blockquote,figure{margin:0}ul{margin:0;padding:0;list-style:none}.skip-link{position:fixed;top:-100px;left:18px;z-index:500;background:#fff;padding:12px 16px}.skip-link:focus{top:18px}

/* opening */
.opening{position:fixed;inset:0;z-index:300;overflow:hidden;background:#141824;color:#fffaf1;transition:opacity .62s ease,visibility .62s ease}.opening.leaving{opacity:0;visibility:hidden}.opening-bg{position:absolute;inset:-2%;background:url('assets/backgrounds/brakenheim.png') center/cover no-repeat;filter:saturate(.74) brightness(.58);transform:scale(1.055);animation:openingDrift 3.3s cubic-bezier(.2,.7,.2,1) forwards}.opening-dim{position:absolute;inset:0;background:linear-gradient(90deg,#111521f4 0%,#151925dd 44%,#15192575 72%,#15192536 100%),linear-gradient(0deg,#111521c5 0%,transparent 54%)}.opening-frame{position:absolute;inset:22px;border:1px solid #dbc18a55;pointer-events:none}.opening-inner{position:absolute;left:8vw;top:50%;transform:translateY(-50%);width:min(900px,84vw);z-index:2}.opening-kicker{font-size:10px;letter-spacing:.32em;color:#ddc48f;opacity:0;transform:translateY(8px);animation:openingFade .48s .12s ease forwards}.opening-rule{width:min(360px,48vw);height:1px;background:linear-gradient(90deg,#d8bd84,transparent);margin:18px 0 24px;transform:scaleX(0);transform-origin:left;animation:openingRule .7s .32s ease forwards}.opening-title{font-family:Georgia,"Batang","Noto Serif KR",serif;font-size:clamp(60px,7vw,108px);line-height:.96;letter-spacing:-.075em;font-weight:700;text-shadow:0 10px 30px #0007;overflow:visible}.title-line{display:block;width:max-content;max-width:100%;white-space:nowrap;word-break:keep-all;opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(10px);animation:openingTitle .78s .4s cubic-bezier(.22,.78,.24,1) forwards}.title-accent{color:#ead1a1;animation-delay:.58s}.opening-copy{margin-top:22px;font-size:15px;line-height:1.7;color:#f4eadbd5;word-break:keep-all;opacity:0;transform:translateY(8px);animation:openingFade .5s .86s ease forwards}.enter-button{margin-top:30px;min-width:220px;height:56px;padding:0 18px 0 22px;display:flex;align-items:center;justify-content:space-between;border:1px solid #d9c59c;background:#f5ead8;color:#1e2230;font-weight:800;font-size:14px;opacity:0;transform:translateY(8px);animation:openingFade .5s 1.02s ease forwards;transition:transform .18s ease,background .18s ease}.enter-button:hover{transform:translateY(-2px);background:#fff8eb}.enter-button b{font-size:19px}.opening-sound{margin-top:12px;color:#e9d9bca8;font-size:11px;letter-spacing:.1em;opacity:0;transform:translateY(6px);animation:openingFade .45s 1.12s ease forwards}.opening-sound span{margin-right:7px}.opening-sound[aria-pressed="false"]{color:#ffffff66}.opening-note{position:absolute;right:44px;bottom:38px;font-size:10px;color:#ffffff72}.opening.leaving .opening-bg{transform:scale(1.01);transition:transform .62s ease}.opening.leaving .opening-inner{transform:translateY(-50%) translateX(-8px);opacity:.3;transition:transform .62s ease,opacity .62s ease}@keyframes openingDrift{to{transform:scale(1)}}@keyframes openingRule{to{transform:scaleX(1)}}@keyframes openingFade{to{opacity:1;transform:translateY(0)}}@keyframes openingTitle{to{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(0)}}

.site{visibility:hidden;opacity:0;transition:opacity .7s ease}.site.visible{visibility:visible;opacity:1}.topbar{position:fixed;top:0;left:0;right:0;height:74px;padding:0 4vw;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;z-index:100;background:#151925e8;color:#fff;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff17}.brand strong{font-size:11px;letter-spacing:.18em;color:#d6c08e}.topbar nav{display:flex;justify-content:center;gap:30px;font-size:12px}.topbar nav a{padding:8px 0;color:#f3ecdfc4}.topbar nav a:hover{color:#fff}.chat-small{border:1px solid #c9ae77;padding:10px 14px;font-size:11px;color:#f3dfb8;white-space:nowrap}

/* hero */
.hero{min-height:100svh;padding-top:74px;position:relative;overflow:hidden;color:#fff}.hero-bg{position:absolute;inset:0}.hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.77) brightness(.66);transform:scale(1.02)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#171b27f4 0%,#171b27e7 39%,#171b2797 67%,#171b2750 100%),linear-gradient(0deg,#171b27c9 0%,transparent 46%)}.hero-content{position:relative;z-index:2;width:min(1480px,90vw);min-height:calc(100svh - 74px);margin:auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(240px,.55fr);align-items:center;gap:7vw;padding:70px 0 64px}.section-label{display:block;color:#8a6c3e;font-size:10px;font-weight:800;letter-spacing:.19em;margin-bottom:18px}.section-label.light{color:#d8bf8d}.hero-copy h1{font-family:Georgia,"Batang","Noto Serif KR",serif;font-size:clamp(62px,6.7vw,112px);line-height:.93;letter-spacing:-.075em}.hero-line{display:block;white-space:nowrap}.hero-accent{color:#e6c99a}.hero-lead{margin-top:27px;max-width:760px;font-size:16px;line-height:1.9;color:#f3eadfd2;word-break:keep-all}.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.hero-tags span{font-size:11px;border:1px solid #ffffff2d;background:#ffffff0b;padding:8px 10px;color:#eee5d8}.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:32px}.btn{min-height:52px;padding:0 18px 0 21px;display:inline-flex;align-items:center;justify-content:space-between;gap:38px;border:1px solid transparent;font-size:13px;font-weight:800;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn.primary{background:#f2e5cd;color:#202432}.btn.secondary{border-color:#ffffff51;background:#181d2cb5;color:#fff}.btn.dark{background:#202432;color:#fff}.btn.large{min-width:240px;height:58px}.text-link{font-size:12px;color:#ead7b2;padding:12px 6px;border-bottom:1px solid #d9bd827a}.hero-type{justify-self:end;align-self:end;margin-bottom:72px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num line" "name name";gap:7px 12px;min-width:220px;color:#f0dec1}.hero-type span{grid-area:num;font:600 52px/1 Georgia,"Batang",serif;color:#ffffff22}.hero-type i{grid-area:line;align-self:center;height:1px;background:linear-gradient(90deg,#d8bb80,transparent)}.hero-type b{grid-area:name;font-size:9px;letter-spacing:.25em;font-weight:600;color:#e0c797}.scroll-mark{position:absolute;z-index:3;left:4vw;bottom:28px;display:flex;align-items:center;gap:12px;color:#f4ead9a0;font-size:8px;letter-spacing:.14em}.scroll-mark i{width:64px;height:1px;background:#f4ead955;position:relative;overflow:hidden}.scroll-mark i:after{content:"";position:absolute;width:22px;height:1px;background:#e2c383;left:-22px;animation:scrollLine 2s infinite}@keyframes scrollLine{to{left:64px}}

.section-pad{padding:112px var(--pad)}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:50px;position:relative;z-index:2}.section-head h2,.argument-copy h2,.prologue-copy h2,.join h2{font-family:Georgia,"Batang","Noto Serif KR",serif;font-size:clamp(48px,5vw,78px);line-height:1.03;letter-spacing:-.07em}.section-head h2 em{font-style:normal;color:var(--wine)}.section-head>p{max-width:520px;text-align:right;font-size:15px;line-height:1.9;color:var(--muted);word-break:keep-all}.section-head.invert{color:#fff}.section-head.invert>p{color:#c7c5c2}

/* world: background art only as atmosphere */
.world{position:relative;overflow:hidden;background:var(--paper)}.world-deco{position:absolute;pointer-events:none;opacity:.12;filter:saturate(.4) contrast(.9)}.world-deco-a{inset:auto -8% 0 38%;height:56%;background:url('assets/backgrounds/station.png') center/cover no-repeat;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}.world-deco-b{left:-8%;top:0;width:46%;height:42%;background:url('assets/backgrounds/shopping.png') center/cover no-repeat;mask-image:linear-gradient(180deg,#000,transparent)}.world-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.world-card{position:relative;min-height:320px;background:#fbf7efdd;border:1px solid var(--line);overflow:hidden;isolation:isolate}.world-card:before{content:"";position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;opacity:.13;filter:saturate(.45) contrast(.85)}.world-card:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#fbf7efc5,#fbf7eff8 72%)}.world-card-city:before{background-image:url('assets/backgrounds/brakenheim.png')}.world-card-life:before{background-image:url('assets/backgrounds/shopping.png')}.world-card-talk:before{background-image:url('assets/backgrounds/court.png')}.world-card>div{height:100%;padding:34px 28px;display:flex;flex-direction:column;justify-content:flex-end}.world-card span{font-size:9px;letter-spacing:.2em;color:#99784a}.world-card h3{font-family:Georgia,"Batang",serif;font-size:31px;letter-spacing:-.05em;margin:8px 0 13px}.world-card p{font-size:14px;line-height:1.9;color:#5d5a5d;word-break:keep-all}

.argument{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(240px,.55fr) minmax(420px,.9fr);gap:8vw;align-items:center;background:#e8e0d5}.argument-bg{position:absolute;inset:0;background:linear-gradient(90deg,#e8e0d5f4 0 44%,#e8e0d5d9 68%,#e8e0d5c2),url('assets/backgrounds/court.png') center/cover no-repeat;filter:saturate(.72);opacity:.82}.argument-rail,.argument-copy{position:relative;z-index:2}.argument-rail{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:18px;color:#7f6240}.argument-rail span{font-size:10px;letter-spacing:.28em}.argument-rail i{display:block;width:min(280px,70%);height:1px;background:linear-gradient(90deg,#8b704a,transparent)}.argument-rail b{font-family:Georgia,serif;font-size:54px;font-weight:400;color:#7c6a5a22}.argument-copy{max-width:760px;margin-left:auto;background:#eee7dcde;padding:46px;border:1px solid #c8b9a4;backdrop-filter:blur(4px)}.argument-copy p{margin-top:22px;font-size:15px;line-height:1.95;color:#565356;word-break:keep-all}.argument-copy ul{margin-top:30px;border-top:1px solid #bfb09b}.argument-copy li{display:grid;grid-template-columns:102px 1fr;gap:20px;padding:17px 0;border-bottom:1px solid #c8baa6;font-size:14px;line-height:1.75}.argument-copy li b{color:#7d3b50}.argument-copy li span{color:#5f5c5e}

/* characters */
.characters{background:#171b27;color:#fff}.character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}.character-card{padding:0;background:transparent;border:0;position:relative;transition:transform .24s ease,filter .24s ease;min-width:0}.character-card img{display:block;width:100%;height:auto;object-fit:contain;border:1px solid #ffffff1b;box-shadow:0 18px 45px #0003}.character-card:hover{transform:translateY(-6px)}.character-card:focus-visible{outline:2px solid #e3c68f;outline-offset:5px}.character-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 34%,#fff1 48%,transparent 62%);transform:translateX(-110%);transition:transform .55s ease;pointer-events:none}.character-card:hover:before{transform:translateX(110%)}.character-card:after{content:"＋";position:absolute;right:13px;bottom:13px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#171b27e8;border:1px solid #e7d7bb9e;color:#fff;font-size:20px;opacity:0;transform:scale(.85);transition:.2s}.character-card:hover:after,.character-card:focus-visible:after{opacity:1;transform:scale(1)}

/* city map: no image gallery */
.places{position:relative;overflow:hidden;background:#ece5da}.places-bg{position:absolute;inset:-8%;background:url('assets/backgrounds/brakenheim.png') center/cover no-repeat;filter:blur(2px) saturate(.38) brightness(1.15);opacity:.12;transform:scale(1.08)}.places:after{content:"";position:absolute;inset:0;background:linear-gradient(#f1ece2e8,#f1ece2f4)}.places>.section-head,.city-map{position:relative;z-index:2}.city-map{height:560px;border:1px solid #b8aa96;background:linear-gradient(90deg,#fbf8f2eb,#f7f1e8e8),repeating-linear-gradient(0deg,transparent 0 38px,#8e7c6512 39px 40px),repeating-linear-gradient(90deg,transparent 0 38px,#8e7c6512 39px 40px);overflow:hidden}.city-map:before{content:"BRAKENHEIM";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Georgia,serif;font-size:clamp(70px,10vw,154px);letter-spacing:.05em;color:#4e44370b;white-space:nowrap}.map-lines{position:absolute;inset:0;width:100%;height:100%}.map-lines path{fill:none;stroke:#9d7e54;stroke-width:2;stroke-dasharray:5 8;opacity:.34;vector-effect:non-scaling-stroke}.map-node{position:absolute;padding:0 0 0 18px;color:#4c4541;font-size:12px;font-weight:800;white-space:nowrap;transition:transform .18s ease,color .18s ease}.map-node:before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;border:2px solid #8e6a3c;border-radius:50%;background:#f7f0e4;transform:translateY(-50%);box-shadow:0 0 0 4px #8e6a3c12;transition:.18s}.map-node:hover,.map-node.active{color:var(--wine);transform:translateY(-2px)}.map-node:hover:before,.map-node.active:before{background:var(--wine);border-color:var(--wine);box-shadow:0 0 0 7px #8b315018}.n1{left:7%;top:72%}.n2{left:15%;top:19%}.n3{left:34%;top:41%}.n4{left:47%;top:20%}.n5{left:55%;top:66%}.n6{left:67%;top:37%}.n7{left:73%;top:70%}.n8{left:82%;top:49%}.n9{left:84%;top:15%}.n10{left:24%;top:78%}.n11{left:38%;top:72%}.n12{left:63%;top:13%}.map-status{position:absolute;left:28px;bottom:24px;display:flex;align-items:baseline;gap:14px;background:#171b27e9;color:#fff;padding:12px 15px;border:1px solid #bfa5745c}.map-status span{font-size:8px;letter-spacing:.2em;color:#cfb37d}.map-status strong{font-family:Georgia,"Batang",serif;font-size:17px;font-weight:600}

.prologue{display:grid;grid-template-columns:minmax(340px,.7fr) minmax(0,1fr);gap:8vw;align-items:center;background:#efe4dd}.prologue-cover{max-width:480px;justify-self:center;width:100%}.prologue-cover a{display:block;height:620px;position:relative;overflow:hidden;background:#1b1f2b;box-shadow:0 30px 70px #513b4623;border:9px solid #fffaf3}.prologue-cover img{width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top center;transition:transform .6s ease}.prologue-cover:hover img{transform:translateY(-1.5%)}.prologue-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#171b27b8,transparent 50%);pointer-events:none}.prologue-cover span{position:absolute;z-index:2;left:24px;bottom:22px;color:#fff;font-size:10px;letter-spacing:.2em}.prologue-copy p{max-width:600px;margin:24px 0 30px;font-size:16px;line-height:1.95;color:#655c61;word-break:keep-all}
.join{min-height:660px;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}.join-bg{position:absolute;inset:0}.join-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.66)}.join-overlay{position:absolute;inset:0;background:#161a26b9}.join-copy{position:relative;z-index:2}.join p{margin:24px auto 30px;max-width:610px;font-size:15px;line-height:1.9;color:#f4eaded0;word-break:keep-all}.join .btn{margin:auto}
footer{min-height:130px;background:#121622;color:#fff;padding:30px 4vw;display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid #ffffff14}footer>div:first-child{display:flex;flex-direction:column;gap:7px}footer strong{font-family:Georgia,"Batang",serif;font-size:18px}footer span{font-size:8px;letter-spacing:.2em;color:#af9d7c}.footer-actions{display:flex;align-items:center;gap:20px;font-size:11px;color:#d7d0c5}.footer-actions button{color:#d7d0c5}

/* character dialog */
.character-dialog{border:1px solid #bda67254;padding:0;background:#141824;color:#fff;box-shadow:0 35px 120px #0009;width:min(1240px,94vw);max-height:92svh;opacity:0;transform:translateY(28px) scale(.965);transition:opacity .28s ease,transform .42s cubic-bezier(.2,.8,.2,1)}.character-dialog::backdrop{background:#090c1300;backdrop-filter:blur(0);transition:background .3s ease,backdrop-filter .3s ease}.character-dialog.is-open{opacity:1;transform:none}.character-dialog.is-open::backdrop{background:#090c13dc;backdrop-filter:blur(8px)}.character-dialog.is-closing{opacity:0;transform:translateY(18px) scale(.98)}.character-dialog.is-closing::backdrop{background:#090c1300;backdrop-filter:blur(0)}.dialog-close{position:sticky;float:right;top:14px;right:14px;z-index:5;width:44px;height:44px;background:#111521e8;border:1px solid #ffffff2b;color:#fff;font-size:18px;transition:transform .18s ease,background .18s ease}.dialog-close:hover{transform:rotate(8deg);background:#7a2c45}.character-detail{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:42px;padding:66px 36px 36px}.character-gallery{opacity:0;transform:translateX(-24px) scale(.985)}.character-dialog.is-open .character-gallery{animation:galleryIn .52s .06s cubic-bezier(.2,.8,.2,1) forwards}.character-gallery img{width:100%;height:auto;object-fit:contain;background:#202534;border:1px solid #ffffff17;transition:opacity .18s ease,transform .24s ease}.character-gallery img.is-changing{opacity:.18;transform:scale(.985)}.emotion-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}.emotion-tabs button{min-height:42px;border:1px solid #ffffff1b;color:#aeb3bd;font-size:12px;transition:background .18s,color .18s,transform .18s}.emotion-tabs button:hover{transform:translateY(-1px);color:#fff}.emotion-tabs button[aria-selected="true"]{background:#efe2ca;color:#202432;border-color:#efe2ca}.character-bio{padding:12px 6px 0}.character-bio>*{opacity:0;transform:translateY(13px)}.character-dialog.is-open .character-bio>*{animation:bioIn .42s ease forwards}.character-dialog.is-open .character-bio>*:nth-child(1){animation-delay:.10s}.character-dialog.is-open .character-bio>*:nth-child(2){animation-delay:.14s}.character-dialog.is-open .character-bio>*:nth-child(3){animation-delay:.18s}.character-dialog.is-open .character-bio>*:nth-child(4){animation-delay:.22s}.character-dialog.is-open .character-bio>*:nth-child(5){animation-delay:.26s}.character-dialog.is-open .character-bio>*:nth-child(6){animation-delay:.30s}.character-dialog.is-open .character-bio>*:nth-child(7){animation-delay:.34s}.detail-index{display:block;font-size:9px;letter-spacing:.2em;color:#948568}.detail-alias{display:block;margin-top:22px;color:#d2af72;font-size:14px}.character-bio h2{font-family:Georgia,"Batang",serif;font-size:clamp(42px,4.7vw,72px);letter-spacing:-.06em;line-height:1.05;margin:9px 0 12px}.detail-meta{font-size:13px;color:#c6c3bf}.detail-facts{margin-top:28px;border-top:1px solid #ffffff1a}.detail-facts section{padding:16px 0;border-bottom:1px solid #ffffff12}.detail-facts h3{font-size:11px;color:#d1b781;margin:0 0 7px}.detail-facts p{font-size:14px;line-height:1.85;color:#b9bdc6;word-break:keep-all}.character-bio blockquote{margin-top:24px;padding:18px 20px;border-left:3px solid #8d3651;background:#ffffff08;font-size:15px;line-height:1.8;color:#f0e5d7}.detail-nav{display:flex;justify-content:space-between;margin-top:22px}.detail-nav button{border:1px solid #ffffff25;padding:10px 14px;color:#ddd6cc;transition:.18s}.detail-nav button:hover{background:#ffffff10;border-color:#d7bd89;color:#fff}@keyframes galleryIn{to{opacity:1;transform:none}}@keyframes bioIn{to{opacity:1;transform:none}}

.music-toggle{position:fixed;right:18px;bottom:18px;z-index:220;min-width:112px;height:42px;padding:0 13px;display:flex;align-items:center;gap:8px;background:#171b27e8;color:#f0e4d1;border:1px solid #c4a96f80;backdrop-filter:blur(10px);font-size:10px;letter-spacing:.03em;transition:opacity .25s}.opening-active .music-toggle{opacity:0;pointer-events:none}.music-toggle i{width:7px;height:7px;border-radius:50%;background:#d4b778;box-shadow:0 0 0 4px #d4b7781e}.music-toggle[aria-pressed="false"]{color:#8d8d91}.music-toggle[aria-pressed="false"] i{background:#696b72;box-shadow:none}.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--delay,0s),transform .85s var(--delay,0s) cubic-bezier(.2,.75,.2,1)}.reveal.visible{opacity:1;transform:none}

@media(max-width:1050px){.topbar{grid-template-columns:1fr auto}.topbar nav{display:none}.hero-content{grid-template-columns:1fr}.hero-type{justify-self:start;align-self:auto;margin:0}.world-grid{grid-template-columns:1fr}.world-card{min-height:230px}.argument{grid-template-columns:1fr}.argument-rail{display:none}.argument-copy{margin:0;max-width:none}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.prologue{grid-template-columns:.8fr 1fr}.character-detail{grid-template-columns:1fr}.character-bio{padding-bottom:20px}.city-map{height:620px}.n1{left:7%;top:77%}.n2{left:10%;top:18%}.n3{left:29%;top:42%}.n4{left:44%;top:17%}.n5{left:50%;top:68%}.n6{left:65%;top:39%}.n7{left:68%;top:73%}.n8{left:80%;top:52%}.n9{left:76%;top:14%}.n10{left:19%;top:82%}.n11{left:38%;top:76%}.n12{left:59%;top:12%}}
@media(max-width:700px){:root{--pad:5vw}.opening-frame{inset:12px}.opening-inner{left:7vw;width:86vw}.opening-title{font-size:clamp(40px,13vw,62px);letter-spacing:-.075em}.opening-kicker{font-size:8px;letter-spacing:.22em}.opening-copy{font-size:13px}.enter-button{min-width:235px;height:54px;font-size:13px}.opening-note{left:7vw;right:auto;bottom:27px;font-size:9px}.topbar{height:64px;padding:0 5vw}.brand strong{font-size:10px}.chat-small{font-size:10px;padding:9px 11px}.hero{padding-top:64px;min-height:auto}.hero-content{min-height:auto;padding:92px 0 88px;gap:52px}.hero-copy h1{font-size:clamp(50px,14vw,72px)}.hero-lead{font-size:14px}.hero-type{margin-bottom:0}.scroll-mark{display:none}.section-pad{padding-top:74px;padding-bottom:74px}.section-head{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:34px}.section-head h2,.argument-copy h2,.prologue-copy h2,.join h2{font-size:clamp(40px,11vw,56px)}.section-head>p{text-align:left;font-size:14px}.world-card{min-height:260px}.world-card>div{padding:26px 21px}.argument{padding-left:5vw;padding-right:5vw}.argument-copy{padding:30px 22px}.argument-copy p{font-size:14px}.argument-copy li{grid-template-columns:88px 1fr;font-size:13px;gap:12px}.character-grid{grid-template-columns:1fr;gap:18px}.character-card:after{opacity:1;transform:none}.city-map{height:680px}.map-lines{opacity:.65}.map-node{font-size:11px}.n1{left:8%;top:83%}.n2{left:8%;top:14%}.n3{left:26%;top:34%}.n4{left:45%;top:12%}.n5{left:47%;top:63%}.n6{left:65%;top:31%}.n7{left:68%;top:72%}.n8{left:76%;top:49%}.n9{left:65%;top:8%}.n10{left:16%;top:70%}.n11{left:31%;top:78%}.n12{left:54%;top:23%}.map-status{left:18px;bottom:18px}.prologue{grid-template-columns:1fr;gap:42px}.prologue-cover{max-width:390px}.prologue-cover a{height:520px}.prologue-copy p{font-size:14px}.join{min-height:520px;padding:70px 5vw}.join p{font-size:14px}.hero-actions{align-items:stretch;flex-direction:column}.btn{width:100%}.text-link{align-self:flex-start}.character-dialog{width:100vw;max-height:100svh;height:100svh;border:0}.character-detail{display:block;padding:62px 14px 28px}.emotion-tabs{grid-template-columns:repeat(3,1fr)}.character-bio{padding:30px 4px 0}.detail-facts p{font-size:13px}.music-toggle{right:10px;bottom:10px;min-width:auto}.music-label{display:none}.footer-actions{flex-wrap:wrap;justify-content:flex-end}footer{align-items:flex-start;flex-direction:column}.world-deco{display:none}}
@media(max-width:380px){.opening-title{font-size:40px}.hero-copy h1{font-size:46px}.map-node{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.opening-bg,.opening-rule,.opening-title .title-line,.opening-kicker,.opening-copy,.enter-button,.opening-sound,.scroll-mark i:after{animation:none!important}.opening-kicker,.opening-copy,.enter-button,.opening-sound,.title-line{opacity:1!important;transform:none!important}.opening-rule{transform:none!important}.reveal{opacity:1;transform:none}.character-dialog,.character-gallery,.character-bio>*{transition:none!important;animation:none!important;opacity:1!important;transform:none!important}}




/* intro webtoon teaser + reader dialog */
.webtoon-teaser{position:relative;min-height:520px;display:grid;place-items:center;background:#151925;color:#f5ecdf;overflow:hidden;text-align:center}
.webtoon-teaser-bg{position:absolute;inset:0;background:linear-gradient(90deg,#111521e8,#111521bd 48%,#111521e8),url("assets/backgrounds/court.png") center/cover no-repeat;filter:saturate(.68);transform:scale(1.02)}
.webtoon-teaser-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent 0 25%,#0f1320a8 72%,#0f1320 100%)}
.webtoon-teaser-copy{position:relative;z-index:1;width:min(760px,92vw)}
.webtoon-teaser .webtoon-kicker{margin:18px 0 10px;font-size:11px;letter-spacing:.12em;color:#c9ad77;word-break:keep-all}
.webtoon-teaser h2{margin:0 0 18px;font-family:Georgia,"Batang","Noto Serif KR",serif;font-size:clamp(42px,6vw,72px);line-height:1.04;letter-spacing:-.06em;word-break:keep-all}
.webtoon-teaser h2 em{font-style:normal;color:#e1c28d}
.webtoon-teaser-copy>p:not(.webtoon-kicker){margin:0 auto 30px;max-width:620px;font-size:15px;line-height:1.9;color:#d9d2c8;word-break:keep-all}

.webtoon-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#f6efe3;overflow:hidden;opacity:0;transform:translateY(18px) scale(.985);transition:opacity .26s ease,transform .34s cubic-bezier(.2,.75,.2,1)}
.webtoon-dialog::backdrop{background:#070910e8;backdrop-filter:blur(8px);opacity:0;transition:opacity .26s ease}
.webtoon-dialog[open]{display:block}
.webtoon-dialog.is-open{opacity:1;transform:none}
.webtoon-dialog.is-open::backdrop{opacity:1}
.webtoon-dialog.is-closing{opacity:0;transform:translateY(14px) scale(.99)}
.webtoon-dialog-shell{height:100dvh;background:#0d1018;display:flex;flex-direction:column}
.webtoon-dialog-bar{position:relative;z-index:5;flex:none;min-height:72px;padding:12px clamp(16px,3vw,42px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#111522f3;border-bottom:1px solid #ffffff19;box-shadow:0 10px 30px #0007}
.webtoon-dialog-bar>div{min-width:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.webtoon-dialog-bar span{font-size:9px;letter-spacing:.2em;color:#bda26f}
.webtoon-dialog-bar strong{font-size:14px;letter-spacing:-.02em;word-break:keep-all}
.webtoon-dialog-bar button{width:42px;height:42px;border:1px solid #ffffff24;background:#ffffff09;color:#fff;font-size:17px;cursor:pointer;transition:background .18s,transform .18s,border-color .18s}
.webtoon-dialog-bar button:hover{background:#ffffff13;border-color:#c8a96c;transform:rotate(3deg)}
.webtoon-reader{flex:1;overflow-y:auto;overscroll-behavior:contain;background:#161923;scrollbar-color:#6f6047 #11141c;scrollbar-width:thin;padding:36px 0 70px;outline:none}
.webtoon-reader>img{display:block;width:min(480px,100%);height:auto;margin:0 auto;background:#fff;box-shadow:0 24px 90px #000a}
.webtoon-reader-end{width:min(700px,90vw);margin:0 auto;padding:64px 20px 20px;text-align:center}
.webtoon-reader-end>span{font-size:9px;letter-spacing:.22em;color:#af9769}
.webtoon-reader-end h3{margin:16px 0 26px;font-family:Georgia,"Batang","Noto Serif KR",serif;font-size:clamp(28px,5vw,46px);line-height:1.15;letter-spacing:-.05em;word-break:keep-all}
.webtoon-reader-end>div{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.webtoon-reader-end button,.webtoon-reader-end a{min-height:46px;padding:0 18px;border:1px solid #ffffff30;background:transparent;color:#f5ecdf;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:12px;cursor:pointer;text-decoration:none}
.webtoon-reader-end a{background:#f0e2c8;color:#1d2130;border-color:#f0e2c8;font-weight:800}
body.webtoon-open{overflow:hidden}
@media(max-width:700px){
 .webtoon-teaser{min-height:460px;padding-left:5vw;padding-right:5vw}
 .webtoon-teaser h2{font-size:clamp(38px,10vw,54px)}
 .webtoon-dialog-bar{min-height:60px;padding:9px 12px}
 .webtoon-dialog-bar span{display:none}
 .webtoon-dialog-bar strong{font-size:12px}
 .webtoon-dialog-bar button{width:38px;height:38px}
 .webtoon-reader{padding-top:0}
 .webtoon-reader>img{width:100%;box-shadow:none}
}