@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root,.dark {
  color-scheme:dark;
  --background:#10121d; --foreground:#f7f2fb; --card:#191c2b; --popover:#1b1b2b;
  --primary:#f3a4cc; --primary-foreground:#28172b; --secondary:#292235; --muted:#252535;
  --muted-foreground:#bcb3cb; --accent:#3b2947; --border:#3e354c;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--foreground); background:radial-gradient(ellipse at 77% 1%,#33223b 0,transparent 32%),radial-gradient(ellipse at 4% 45%,#1f1b32 0,transparent 40%),#10121d; font-family:"Noto Sans KR","Malgun Gothic",sans-serif; font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid #f5b4d5; outline-offset:3px; }
::selection { background:#d78cb9; color:#191220; }
code,pre { font-family:"Noto Sans KR","Malgun Gothic",sans-serif; }
code { color:#f2accf; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:200; padding:10px 16px; background:#f3a4cc; color:#231525; border-radius:8px; }
.skip-link:focus { top:12px; }
.topbar { position:sticky; top:0; z-index:50; border-bottom:1px solid #4f3a56; background:linear-gradient(105deg,#151925 10%,#241e32 57%,#37203c 100%); box-shadow:0 10px 35px #06081278; }
.topbar-inner { max-width:1510px; height:72px; margin:auto; padding:0 30px; display:flex; align-items:center; gap:32px; }
.brand { display:flex; align-items:center; gap:13px; color:#fff8fc; font:700 23px/1 Georgia,"Times New Roman",serif; letter-spacing:.04em; flex-shrink:0; }
.brand-spark { color:#ffafd7; font-size:24px; font-family:Georgia,serif; }
.brand small { display:block; margin-top:6px; color:#dcb8d2; font:600 9px/1.2 "Noto Sans KR",sans-serif; letter-spacing:.17em; }
.topbar-title { color:#ddd2e0; font-size:13px; border-left:1px solid #6a4b68; padding-left:30px; }
.topbar-status { margin-left:auto; display:flex; align-items:center; gap:8px; color:#efc4da; font-size:12px; white-space:nowrap; }
.status-dot { display:block; width:7px; height:7px; border-radius:50%; background:#f7a9cd; box-shadow:0 0 12px #f7a9cd; }
.archive-shell { max-width:1510px; min-height:calc(100vh - 147px); margin:auto; padding:30px; display:grid; grid-template-columns:246px minmax(0,1fr); gap:30px; }
.sidebar { position:sticky; top:102px; align-self:start; max-height:calc(100vh - 124px); overflow-y:auto; border:1px solid #3c344c; border-radius:18px; background:linear-gradient(175deg,#1e1f30,#171a28 80%); box-shadow:0 20px 45px #06071140; scrollbar-width:thin; }
.sidebar-head { display:flex; justify-content:space-between; padding:23px 20px 17px; color:#d8a8c9; font:700 10px/1.3 "Noto Sans KR",sans-serif; letter-spacing:.12em; }
.sidebar-head span+span { color:#94839f; font-size:9px; }
.chapter-nav { display:grid; gap:2px; padding:0 9px 14px; }
.chapter-link { border:0; border-radius:10px; width:100%; min-height:47px; padding:0 10px; display:grid; grid-template-columns:27px 20px 1fr 13px; align-items:center; gap:7px; background:transparent; color:#c4bdcd; text-align:left; font-size:13px; transition:background .2s,color .2s; }
.chapter-link:hover { background:#33283e; color:#f6deef; }
.chapter-link.active { background:linear-gradient(100deg,#50314f,#382b4a); color:#fff1f8; box-shadow:inset 3px 0 #f2a1c9; font-weight:700; }
.chapter-link.active svg { color:#f4aed2; }
.chapter-index { color:#887f92; font:600 10px/1 "Noto Sans KR",sans-serif; letter-spacing:.02em; }
.chapter-link.active .chapter-index { color:#f6c3de; }
.chapter-arrow { opacity:.45; }
.sidebar-footer { display:flex; gap:10px; align-items:flex-start; border-top:1px solid #3c344c; padding:18px 20px 21px; color:#9f93aa; font-size:11px; line-height:1.6; }
.sidebar-footer svg { flex-shrink:0; color:#dba5c8; margin-top:2px; }
.content-shell { min-width:0; }
.chapter-heading { position:relative; min-height:140px; padding:18px 6px 23px; margin-bottom:16px; border-bottom:1px solid #544058; }
.chapter-heading::after { content:"✦"; position:absolute; right:16px; top:20px; color:#cd84b0; font-size:23px; }
.chapter-kicker,.card-kicker { display:block; color:#d89fc4; font-size:10px; font-weight:700; letter-spacing:.15em; line-height:1.4; }
.chapter-kicker i { font-style:normal; color:#857e99; margin-left:7px; }
.chapter-heading h1 { margin:10px 0 2px; font-size:clamp(29px,3.1vw,40px); font-weight:800; letter-spacing:-.06em; line-height:1.3; }
.chapter-heading p { margin:0; color:#c1b7c9; font-size:14px; }
.panel { background:linear-gradient(145deg,#1b1d2c,#171b29); border:1px solid #40364f; border-radius:16px; box-shadow:0 8px 24px #08091426; }
.panel h2,.panel h3 { letter-spacing:-.045em; }
.notice-row { display:flex; align-items:flex-start; gap:12px; border:1px solid #71516e; border-radius:12px; padding:13px 16px; margin:0 0 20px; background:linear-gradient(95deg,#34283e,#261f35); color:#f1d9ea; font-size:13px; }
.notice-row svg { color:#efabd1; flex-shrink:0; margin-top:2px; }
.mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.mode-card { padding:22px; min-height:175px; }
.mode-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.mode-emoji { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:13px; background:linear-gradient(135deg,#5a3860,#a86794); font-size:23px; }
.mode-head h2 { margin:0 0 2px; font-size:17px; }
.mode-head code { font-size:12px; }
.mode-card p { margin:0; color:#c9bed0; font-size:13px; line-height:1.75; white-space:pre-line; }
.example-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:24px; }
.example-card { padding:22px; }
.panel-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.panel-top h2 { font-size:18px; margin:4px 0 0; }
.example-card>p { color:#aaa0b4; font-size:12px; margin:10px 0 12px; }
.example-card pre,.command-example pre { margin:0; background:#10121e; border:1px solid #3b324a; border-radius:10px; padding:15px 17px; color:#e8dbe9; font-size:12px; line-height:1.85; }
.copy-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:#36293f; color:#efb8d7; border:1px solid #74516e; border-radius:8px; padding:6px 9px; min-height:31px; white-space:nowrap; font-size:11px; }
.copy-button:hover { background:#56334e; }
.network-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:22px; }
.network-card { padding:18px; }
.network-symbol { width:35px; height:35px; display:grid; place-items:center; background:#4c3151; color:#f8afd2; border-radius:10px; margin-bottom:13px; }
.network-card h2 { font-size:16px; margin:4px 0 7px; }
.network-card p { margin:0 0 10px; color:#c9bed0; font-size:12px; line-height:1.7; }
.network-card code { font-size:11px; }
.list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; border-block:1px solid #44364d; padding:14px 0; margin-bottom:18px; }
.filter-row { display:flex; gap:6px; flex-wrap:wrap; }
.filter-row button { padding:7px 12px; background:#242435; border:1px solid #43384f; border-radius:8px; color:#bfb2c8; min-height:33px; font-size:12px; }
.filter-row button.selected { background:#efaccf; color:#27192c; border-color:#efaccf; font-weight:700; }
.search-box { display:flex; align-items:center; width:min(280px,100%); gap:8px; height:39px; border:1px solid #51405b; border-radius:9px; padding:0 10px; background:#171925; color:#bfa9c3; flex-shrink:0; }
.search-box input { background:transparent; border:0; outline:0; min-width:0; flex:1; color:#f7eff9; font-size:12px; }
.search-box input::placeholder { color:#978aa4; }
.search-box button { border:0; background:transparent; color:#bfa9c3; padding:4px; }
.result-count { color:#c8bacd; font-size:12px; }
.result-count b { color:#ffc3df; }
.command-list { display:grid; gap:12px; }
.command-card { display:grid; grid-template-columns:minmax(210px,.8fr) minmax(0,1fr); gap:22px; padding:19px 22px; }
.command-main h2 { margin:4px 0 5px; font-size:17px; }
.command-main>code { display:inline-block; font-size:12px; color:#ffb9da; margin-bottom:8px; overflow-wrap:anywhere; }
.command-main p { margin:0; color:#c4b9c9; font-size:12px; }
.exit-line { display:block; margin-top:9px; color:#a79cae; font-size:11px; }
.exit-line code { font-size:11px; }
.command-example>div { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:#b9a2bb; font-size:11px; }
.story-banner { background:linear-gradient(112deg,#292138 5%,#533254 59%,#a65f8a 140%); padding:25px 28px; margin-bottom:18px; }
.story-banner h2 { font-size:23px; margin:7px 0 9px; }
.story-banner p { max-width:730px; margin:0; color:#f0ddec; font-size:13px; line-height:1.75; }
.fact-grid,.power-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.fact-card { min-height:112px; padding:17px 20px; }
.fact-card span { color:#da9fc1; font-size:11px; }
.fact-card strong { display:block; margin-top:8px; color:#f1e8f3; font-size:13px; font-weight:600; }
.section-subhead { margin:30px 2px 16px; }
.section-subhead h2 { margin:5px 0 0; font-size:21px; }
.power-card { min-height:155px; padding:18px 20px; }
.power-number { color:#8f809d; font:700 10px/1 "Noto Sans KR",sans-serif; }
.power-card h3 { font-size:16px; margin:10px 0 5px; }
.power-card p { font-size:12px; color:#c6bacd; margin:0; }
.world-strips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:18px; }
.world-strips>.panel { padding:19px 21px; }
.world-strips h3 { margin:0 0 12px; font-size:15px; }
.world-strips p { margin:12px 0 0; color:#bcb0c4; font-size:12px; }
.tag-row,.region-places { display:flex; flex-wrap:wrap; gap:7px; }
.tag-row span,.region-places span { border:1px solid #57445d; background:#302639; color:#eac6dc; border-radius:7px; padding:4px 8px; font-size:11px; }
.character-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.character-card { padding:0; overflow:hidden; display:flex; flex-direction:column; min-width:0; text-align:left; color:inherit; position:relative; transition:transform .18s,border-color .18s; }
.character-card:hover { transform:translateY(-3px); border-color:#b1769f; }
.character-card>svg { position:absolute; bottom:18px; right:19px; color:#efb4d3; }
.portrait { position:relative; width:100%; aspect-ratio:6/5; overflow:hidden; background:linear-gradient(153deg,#30203d 3%,#6d477a 38%,#d88eb0 100%); }
.portrait::after { content:""; position:absolute; inset:60% 0 0; background:linear-gradient(transparent,#25172baa); pointer-events:none; }
.portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.portrait-pending { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:#ffedf6; font-size:12px; }
.portrait-wordmark { position:absolute; right:14px; bottom:12px; z-index:1; color:#ffe6f5; font:500 10px/1 Georgia,serif; letter-spacing:.24em; text-shadow:0 1px 5px #25152e; }
.character-copy { padding:17px 18px 19px; min-height:105px; }
.character-copy h2 { margin:4px 0 4px; font-size:18px; }
.character-code { color:#998da5; font-size:10px; letter-spacing:.08em; }
.section-footnote { margin:18px 3px 0; color:#9c90aa; font-size:11px; }
.section-footnote code { font-size:11px; }
.region-grid,.creature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.region-card { display:flex; flex-direction:column; padding:19px 21px; min-height:228px; }
.region-card h2 { margin:7px 0 6px; font-size:18px; }
.region-card>p { color:#c5b9ca; font-size:12px; margin:0 0 15px; line-height:1.75; }
.region-places { margin-top:auto; }
.danger-line { display:flex; align-items:flex-start; gap:7px; border-top:1px solid #4d3a54; margin-top:15px; padding-top:12px; color:#b1a4b7; font-size:11px; }
.danger-line svg { flex-shrink:0; color:#d588ab; margin-top:1px; }
.level-tool { display:grid; grid-template-columns:1fr auto; gap:16px 25px; padding:26px; background:linear-gradient(130deg,#202138,#3c2a49 83%,#5f3656); }
.level-tool h2 { margin:7px 0 5px; font-size:22px; }
.level-tool p { margin:0; color:#c8b6ca; font-size:13px; }
.level-result { display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; align-items:end; min-width:185px; }
.level-result span { color:#c4aac3; font-size:10px; }
.level-result strong,.level-result b { color:#ffe1ef; font-size:21px; line-height:1.3; }
.level-controls { grid-column:1/-1; display:flex; align-items:center; gap:18px; }
.level-controls>input[type="range"] { flex:1; accent-color:#eea4cb; min-width:60px; }
.level-controls label { display:flex; align-items:center; gap:8px; color:#c8b4c8; font-size:11px; white-space:nowrap; }
.level-controls input[type="number"] { width:70px; border:1px solid #725675; border-radius:7px; padding:5px 8px; background:#1c1b2b; color:#fbe7f3; }
.level-tool>code { grid-column:1/-1; color:#e2b6d0; font-size:11px; overflow-wrap:anywhere; }
.milestone-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-top:17px; }
.milestone { padding:14px 16px; }
.milestone span { color:#c699bd; font-size:11px; }
.milestone strong { display:block; margin:5px 0; color:#fce6f3; font-size:17px; }
.milestone small { color:#aea1bb; font-size:10px; }
.xp-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.xp-card { padding:18px; min-height:115px; }
.xp-card strong { display:block; color:#f7b6d5; font-size:24px; margin-bottom:5px; }
.xp-card span { color:#c9bdd0; font-size:12px; }
.class-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.class-card { display:flex; flex-direction:column; min-height:235px; padding:19px 20px; }
.class-head,.creature-head { display:flex; justify-content:space-between; align-items:start; gap:10px; }
.class-code { color:#b99bbb; font-size:11px; }
.class-card h2 { margin:9px 0 7px; font-size:20px; }
.class-card>p { color:#c4b9cb; font-size:12px; margin:0 0 16px; line-height:1.7; }
.class-skills { margin-top:auto; border-top:1px solid #4b3c55; padding-top:11px; display:grid; gap:5px; }
.class-skills span { color:#9f91a9; font-size:11px; }
.class-skills b { color:#e9c3da; font-weight:600; margin-left:7px; }
.currency-hero { padding:27px; margin-bottom:15px; background:linear-gradient(100deg,#27223b,#553453 73%,#915677); }
.currency-hero h2 { font-size:clamp(19px,2.3vw,27px); margin:8px 0; }
.currency-hero h2 span { color:#eac5dc; font-weight:400; padding:0 5px; }
.currency-hero p { margin:0; color:#dfccdf; font-size:13px; }
.currency-hero strong { color:#ffe1ef; }
.price-panel { padding:23px 25px; }
.price-panel .panel-top>svg { color:#eeafd2; }
.price-panel table { width:100%; border-collapse:collapse; margin-top:16px; text-align:left; }
.price-panel th { padding:10px 12px; color:#dfbad2; background:#31263d; font-size:11px; font-weight:600; }
.price-panel td { padding:11px 12px; border-bottom:1px solid #3d3448; color:#d1c2d4; font-size:12px; }
.price-panel td:last-child { color:#f2c5df; font-weight:600; white-space:nowrap; }
.creature-definition,.update-intro { padding:23px 25px; margin-bottom:15px; background:linear-gradient(105deg,#28213a,#523152 78%,#875370); }
.creature-definition h2,.update-intro h2 { margin:7px 0; font-size:21px; }
.creature-definition p,.update-intro p { margin:0; color:#e6d2e5; font-size:12px; }
.creature-card { padding:20px 22px; }
.creature-rank { border:1px solid #996581; background:#3e2947; color:#f9b8d7; border-radius:8px; padding:4px 8px; font-size:11px; }
.creature-card h2 { font-size:19px; margin:7px 0 6px; }
.creature-card>p { font-size:12px; color:#c9bdd0; margin:0 0 12px; }
.creature-card dl { margin:0; display:grid; gap:8px; }
.creature-card dl>div { display:grid; grid-template-columns:62px minmax(0,1fr); gap:8px; border-top:1px solid #44364f; padding-top:8px; }
.creature-card dt { color:#dd9fc6; font-size:11px; }
.creature-card dd { color:#bdb1c2; font-size:11px; margin:0; }
.update-list { display:grid; gap:11px; }
.update-item { display:flex; align-items:center; gap:18px; min-height:59px; padding:13px 20px; }
.update-index { color:#ce91b9; font-size:11px; }
.update-item strong { font-size:13px; font-weight:600; color:#f0e5f0; flex:1; }
.update-badge { border:1px solid #765274; background:#3f2b47; color:#e4b3d1; border-radius:7px; padding:4px 8px; font-size:10px; white-space:nowrap; }
.empty-result { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:250px; border:1px dashed #715673; border-radius:15px; color:#b8a4b9; }
.empty-result svg { color:#d6a0c3; }
.empty-result p { font-size:15px; margin:12px 0 0; }
.empty-result span { font-size:12px; }
.footer { max-width:1450px; margin:auto; padding:20px 30px 28px; border-top:1px solid #40354a; display:flex; justify-content:space-between; gap:20px; color:#a99cb2; font-size:11px; }
.footer span:first-child { font:700 13px Georgia,serif; letter-spacing:.12em; color:#e8c1da; }
.footer span:last-child { color:#da9abe; }
[data-slot="dialog-overlay"] { background:#070713c9; backdrop-filter:blur(5px); }
.person-dialog[data-slot="dialog-content"] { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; padding:0; width:min(760px,94vw); max-width:min(760px,94vw); border:1px solid #a06d98; overflow:hidden; background:#1b1b2a; border-radius:18px; }
.dialog-close { position:absolute; top:12px; right:12px; z-index:3; display:grid; place-items:center; width:35px; height:35px; border:1px solid #f8e8f760; border-radius:50%; background:#1e1b2cc9; color:#fff3f9; }
.person-detail-image .portrait { height:100%; min-height:360px; aspect-ratio:auto; }
.person-detail-copy { padding:48px 31px 30px; }
.person-detail-copy [data-slot="dialog-title"] { font-size:27px; margin:8px 0 5px; }
.person-detail-copy [data-slot="dialog-description"] { color:#e0b9d3; font-size:13px; }
.person-detail-copy>p { color:#bdb1c4; font-size:12px; line-height:1.8; margin-top:20px; }
@media(max-width:1150px) {
  .archive-shell { grid-template-columns:210px minmax(0,1fr); gap:18px; padding:22px; }
  .chapter-link { grid-template-columns:23px 17px 1fr 12px; gap:6px; padding:0 7px; }
  .mode-grid,.fact-grid,.power-grid,.class-grid,.character-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .network-grid,.milestone-grid,.xp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .topbar-inner { height:61px; padding:0 16px; }
  .brand { font-size:18px; gap:7px; }
  .brand-spark { font-size:18px; }
  .brand small { font-size:8px; }
  .topbar-title { display:none; }
  .topbar-status { font-size:10px; }
  .archive-shell { display:block; padding:0 16px 30px; }
  .sidebar { position:sticky; top:61px; z-index:40; max-height:none; overflow:visible; border-radius:0; margin:0 -16px; border-inline:0; border-top:0; background:#1a1b2aef; box-shadow:0 8px 20px #08091273; }
  .sidebar-head,.sidebar-footer { display:none; }
  .chapter-nav { display:flex; gap:4px; padding:8px 12px; overflow-x:auto; scrollbar-width:thin; }
  .chapter-link { display:flex; flex-shrink:0; min-height:36px; width:auto; gap:6px; padding:0 11px; border-radius:8px; white-space:nowrap; font-size:11px; }
  .chapter-link .chapter-index,.chapter-arrow { display:none; }
  .chapter-link svg { width:14px; height:14px; }
  .content-shell { padding-top:12px; }
  .chapter-heading { min-height:116px; padding:15px 0 17px; }
  .chapter-heading h1 { font-size:30px; }
  .chapter-heading p { font-size:12px; padding-right:35px; }
  .chapter-heading::after { right:7px; top:18px; }
  .mode-grid,.example-grid,.network-grid,.fact-grid,.power-grid,.world-strips,.region-grid,.class-grid,.creature-grid,.xp-grid { grid-template-columns:1fr; }
  .character-grid,.milestone-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mode-card { min-height:auto; padding:19px; }
  .list-toolbar { align-items:stretch; flex-direction:column; }
  .search-box { width:100%; }
  .command-card { grid-template-columns:1fr; gap:16px; }
  .region-card { min-height:auto; }
  .level-tool { grid-template-columns:1fr; }
  .level-result { width:100%; }
  .level-controls { flex-direction:column; align-items:stretch; gap:12px; }
  .level-controls label { justify-content:space-between; }
  .level-controls>input[type="range"] { width:100%; }
  .currency-hero h2 span { padding:0; }
  .footer { margin:0 16px; padding:18px 0; }
  .footer span:nth-child(2) { display:none; }
}
@media(max-width:480px) {
  .character-grid { gap:9px; }
  .character-copy { padding:12px; min-height:87px; }
  .character-copy h2 { font-size:14px; }
  .character-copy .card-kicker { font-size:8px; }
  .character-code { font-size:8px; }
  .character-card>svg { display:none; }
  .milestone { padding:12px; }
  .person-dialog[data-slot="dialog-content"] { display:block; max-height:88vh; overflow-y:auto; }
  .person-detail-image .portrait { min-height:250px; height:250px; }
  .person-detail-copy { padding:24px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

.chapter-link .nav-glyph { width:20px; color:#cba0c2; text-align:center; font-size:14px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.chapter-link.active .nav-glyph { color:#f6b2d2; }
.chapter-arrow { text-align:right; }
.notice-row>span:first-child { color:#edabd0; font-size:17px; line-height:1; flex-shrink:0; }
.search-box>.search-glyph { color:#bfa9c3; font-size:19px; line-height:1; }
.card-open-mark { position:absolute; right:19px; bottom:16px; color:#efb4d3; font-size:24px; }
.mode-emoji { font-family:"Noto Sans KR","Malgun Gothic",sans-serif; }
.portrait img { opacity:0; }
.portrait.is-loaded img { opacity:1; }
.portrait-face img { object-position:center top!important; transform:scale(2.25); transform-origin:center top; }
.portrait.is-loaded .portrait-pending { display:none; }
.portrait.is-failed img { display:none; }
.portrait-error { display:none; position:absolute; inset:0; place-items:center; padding:20px; text-align:center; color:#ffe7f3; font-size:13px; }
.portrait.is-failed .portrait-pending { display:none; }
.portrait.is-failed .portrait-error { display:grid; }
.person-dialog { position:fixed; inset:0; margin:auto; padding:0; width:min(760px,94vw); max-width:min(760px,94vw); max-height:88vh; border:1px solid #a06d98; border-radius:18px; overflow:auto; background:#1b1b2a; color:#f7f2fb; box-shadow:0 35px 100px #070713e0; }
.person-dialog::backdrop { background:#070713c9; backdrop-filter:blur(5px); }
.person-dialog { width:min(950px,96vw); max-width:min(950px,96vw); max-height:90dvh; }
.person-header { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; gap:20px; padding:22px 28px 19px; background:linear-gradient(103deg,#232036f5,#45304af5 72%,#7d4d69f5); border-bottom:1px solid #946985; backdrop-filter:blur(12px); }
.person-header h2 { margin:4px 0 3px; font-size:28px; line-height:1.25; }
.person-header p { margin:0; color:#eacbdb; font-size:12px; line-height:1.5; }
.person-header .dialog-close { position:static; flex:none; width:38px; height:38px; }
.person-dialog-grid { display:grid; grid-template-columns:minmax(270px,.78fr) minmax(0,1.22fr); gap:0; }
.person-detail-image { min-width:0; margin:0; padding:24px; border-right:1px solid #53435d; background:#211e30; }
.person-detail-image .portrait { height:350px; min-height:0; aspect-ratio:auto; border:1px solid #906583; border-radius:13px; }
.person-detail-image .portrait img { object-position:center 18%; }
.person-detail-image figcaption { display:flex; justify-content:space-between; gap:12px; padding-top:13px; color:#e5b9d2; font-size:12px; }
.person-detail-image figcaption strong { color:#f8edf6; font-weight:600; }
.person-detail-copy { padding:25px 27px 22px; min-width:0; }
.person-facts { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.person-facts span { border:1px solid #785b76; border-radius:7px; background:#35283e; color:#eed6e6; padding:7px 9px; font-size:11px; line-height:1.2; }
.person-story { border-left:2px solid #b37c9e; padding-left:17px; }
.person-story p { color:#d9ccdc; margin:0 0 15px; font-size:13px; line-height:1.85; word-break:keep-all; }
.person-story p:last-child { margin-bottom:0; }
.person-extra { margin-top:19px; border:1px solid #6d526c; border-radius:9px; background:#2d2536; }
.person-extra summary { cursor:pointer; padding:11px 14px; color:#e9b9d5; font-size:12px; font-weight:600; }
.person-extra summary::marker { color:#e9b9d5; }
.person-extra p { margin:0; padding:0 14px 14px; color:#d9ccdc; font-size:12px; line-height:1.8; word-break:keep-all; }
.asset-gallery { border-top:1px solid #5a4561; padding:23px 28px 29px; background:#1d1b2b; }
.asset-gallery-head { display:flex; justify-content:space-between; align-items:end; gap:14px; margin-bottom:15px; }
.asset-gallery-head h3 { font-size:18px; margin:4px 0 0; }
.asset-gallery-head>span { color:#baadbf; font-size:11px; white-space:nowrap; }
.asset-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.asset-thumb { min-width:0; padding:5px; text-align:left; color:#f4eaf4; background:#292536; border:1px solid #58475e; border-radius:9px; transition:transform .16s,border-color .16s,background .16s; }
.asset-thumb:hover { transform:translateY(-2px); border-color:#cb96b8; }
.asset-thumb.active { border-color:#f4b0d1; background:#493149; box-shadow:0 0 0 1px #f4b0d15c; }
.asset-thumb-image { position:relative; display:block; width:100%; aspect-ratio:5/4; overflow:hidden; border-radius:5px; background:linear-gradient(140deg,#392544,#9c668a,#dc95ba); }
.asset-thumb-image img { width:100%; height:100%; object-fit:cover; object-position:center 18%; opacity:0; display:block; }
.asset-thumb.is-loaded .asset-thumb-image img { opacity:1; }
.asset-thumb.face-only .asset-thumb-image img { object-position:center top; transform:scale(1.35); transform-origin:center top; }
.thumb-fallback { position:absolute; inset:0; display:grid; place-items:center; color:#ffecf5; font:700 17px Georgia,serif; }
.asset-thumb.is-loaded .thumb-fallback { display:none; }
.asset-thumb.is-failed .asset-thumb-image { filter:saturate(.55); }
.asset-thumb-label { display:flex; flex-direction:column; gap:2px; min-height:36px; padding:6px 4px 2px; color:#ded3df; font-size:10px; line-height:1.35; word-break:keep-all; }
.asset-thumb-label b { font:700 10px Georgia,serif; color:#ecacd1; }
.price-panel tr:last-child td { border-bottom:0; }
.loading-shell { min-height:70vh; display:grid; align-content:center; justify-content:center; text-align:center; color:#eec5de; }
.loading-shell h1 { font-size:24px; }
.loading-shell p { color:#bba5bd; font-size:13px; }
.mode-toggle-row { display:block; margin:-5px 0 16px; }
.mode-toggle { display:flex; width:100%; min-height:50px; box-sizing:border-box; align-items:center; justify-content:space-between; gap:24px; padding:11px 13px 11px 16px; color:#f2dce9; border:1px solid #76566f; border-radius:12px; background:linear-gradient(120deg,#302638,#242231); font-size:13px; font-weight:700; }
.mode-toggle:hover { color:#fff7fc; border-color:#d79abb; background:linear-gradient(120deg,#3e2d42,#2b2537); }
.mode-toggle b { display:grid; width:24px; height:24px; flex:none; place-items:center; color:#271c29; border-radius:50%; background:#e5a6c8; transition:transform .2s ease; }
.mode-toggle b svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.mode-toggle.is-open b { transform:rotate(180deg); }
.mode-grid[hidden] { display:none; }
.load-error { border:1px solid #704e69; border-radius:16px; padding:26px; margin:80px auto; width:min(600px,90%); }
.load-error h1 { font-size:21px; }
.load-error p { color:#cdbccc; }
@media(max-width:760px) {
  .chapter-link .nav-glyph { width:auto; font-size:12px; }
  .person-dialog-grid { grid-template-columns:minmax(0,1fr); }
  .person-detail-image { border-right:0; border-bottom:1px solid #53435d; }
  .person-detail-image .portrait { height:320px; }
  .asset-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:480px) {
  .card-open-mark { display:none; }
  .person-dialog { width:96vw; max-width:96vw; max-height:92dvh; }
  .person-header { padding:16px 18px; }
  .person-header h2 { font-size:21px; }
  .person-detail-image { padding:15px 18px; }
  .person-detail-image .portrait { height:250px; }
  .person-detail-copy { padding:18px; }
  .asset-gallery { padding:17px 18px 22px; }
  .asset-gallery-head>span { display:none; }
  .asset-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .asset-thumb-label { min-height:34px; font-size:9px; }
}

/* Archive entrance */
body:not(.archive-entered) { overflow:hidden; }
#app { opacity:0; transform:scale(1.015); transition:opacity .8s ease .15s,transform 1.05s cubic-bezier(.2,.8,.2,1); }
body.archive-entered #app { opacity:1; transform:none; padding-bottom:112px; }
.entry-gate { position:fixed; inset:0; z-index:500; display:grid; place-items:center; overflow:hidden; color:#f4f7ff; background:#020512; isolation:isolate; transition:background-color 1.15s ease,opacity 1.05s ease,visibility 1.05s ease; }
.entry-gate[hidden] { display:none; }
.entry-gate::before { content:""; position:absolute; inset:-18%; z-index:-3; background:radial-gradient(ellipse at 50% 45%,#3457c34f 0 15%,#493c9c32 31%,transparent 58%),radial-gradient(ellipse at 19% 72%,#1c76bd2c,transparent 34%),radial-gradient(ellipse at 85% 24%,#6949b52b,transparent 31%),linear-gradient(132deg,#020512 8%,#090a21 48%,#050718 87%); animation:entry-breathe 8s ease-in-out infinite alternate; transition:filter 1.1s ease,opacity 1.1s ease; }
.entry-gate::after { content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 50% 46%,transparent 0 37%,#02051273 69%,#01030cf0 100%); pointer-events:none; }
.entry-aurora { position:absolute; z-index:0; width:min(1040px,92vw); height:min(590px,66vw); border-radius:50%; background:radial-gradient(ellipse,#5272ef2e 0 22%,#7459cd1f 43%,transparent 72%); box-shadow:0 0 135px #3978e934,inset 0 0 100px #7e62dd1c; filter:blur(3px); animation:entry-float 9s ease-in-out infinite alternate; pointer-events:none; }
.entry-aurora::before,.entry-aurora::after { content:""; position:absolute; inset:9%; border:1px solid #7896ff1f; border-radius:47% 53% 46% 54%; transform:rotate(8deg); }
.entry-aurora::after { inset:21%; border-color:#b397ff1c; box-shadow:inset 0 0 76px #6483f020; transform:rotate(-12deg); }
.entry-stars { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.entry-stars i { position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); border-radius:50%; background:#dceaff; box-shadow:0 0 calc(var(--s) * 3) #86b8ff; opacity:var(--o); animation:star-twinkle var(--duration) ease-in-out var(--delay) infinite alternate; }
.entry-stars i:nth-child(3n) { background:#d5c9ff; box-shadow:0 0 calc(var(--s) * 3) #8f7cff; }
.entry-stars i:nth-child(7n) { background:#ffd8fa; box-shadow:0 0 calc(var(--s) * 4) #be85ff; }
.entry-stars .star-flare::before,.entry-stars .star-flare::after { content:""; position:absolute; left:50%; top:50%; background:linear-gradient(90deg,transparent,#e7f4ff,transparent); transform:translate(-50%,-50%); }
.entry-stars .star-flare::before { width:calc(var(--s) * 5); height:1px; }.entry-stars .star-flare::after { width:1px; height:calc(var(--s) * 5); }
.entry-content { position:relative; z-index:2; width:min(1020px,calc(100vw - 34px)); padding:34px 24px 38px; text-align:center; }
.entry-kicker { display:block; margin-bottom:2px; color:#aebcff; font:600 11px/1.2 Georgia,serif; letter-spacing:.45em; text-shadow:0 0 16px #718dff; }
.entry-title-image { display:block; width:min(850px,88vw); max-height:54vh; margin:-12px auto -28px; object-fit:contain; filter:drop-shadow(0 0 22px #577cff59) drop-shadow(0 0 54px #594bb54d); }
.entry-rule { display:flex; width:min(500px,68%); margin:0 auto 20px; align-items:center; gap:16px; color:#aebdff; font-size:12px; }
.entry-rule i { height:1px; flex:1; background:linear-gradient(90deg,transparent,#7894e8); }
.entry-rule i:last-child { background:linear-gradient(90deg,#7894e8,transparent); }
.entry-content p { margin:0 auto 24px; color:#c5cae0; font-size:16px; line-height:1.8; word-break:keep-all; }
.entry-button { display:inline-flex; min-width:260px; align-items:center; justify-content:space-between; gap:28px; padding:16px 18px 16px 23px; border:1px solid #8aa5ff; border-radius:3px; color:#f8faff; background:linear-gradient(115deg,#263d83,#694b9a); box-shadow:0 12px 38px #01030dbd,0 0 32px #5d85ff38; font-size:14px; font-weight:700; letter-spacing:.06em; transition:transform .2s,border-color .2s,box-shadow .2s; }
.entry-button:hover { transform:translateY(-2px); border-color:#d9e3ff; box-shadow:0 16px 44px #01030dd1,0 0 42px #718cff6e; }
.entry-button b { display:grid; width:30px; height:30px; place-items:center; border:1px solid #ffffff36; border-radius:50%; font-size:18px; }
.entry-content small { display:block; margin-top:15px; color:#747c9b; font-size:12px; }
.entry-gate.is-opening { background-color:#171925; opacity:0; visibility:hidden; }
.entry-gate.is-opening::before { filter:hue-rotate(55deg) saturate(.7); opacity:.35; }
.entry-gate.is-opening .entry-aurora { transform:scale(2.15); opacity:0; transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .9s; }
.entry-gate.is-opening .entry-content { transform:scale(.975); opacity:0; transition:transform .72s,opacity .52s; }
@keyframes entry-breathe { to { transform:scale(1.07) rotate(1.5deg); } }
@keyframes entry-float { to { transform:scale(1.06) translateY(-8px); filter:blur(7px); } }
@keyframes star-twinkle { 0% { transform:scale(.62); opacity:calc(var(--o) * .42); } 100% { transform:scale(1.18); opacity:var(--o); } }

/* Music library */
.playlist-intro { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:28px 30px; margin-bottom:18px; background:radial-gradient(circle at 88% 18%,#b875a728,transparent 29%),linear-gradient(120deg,#282237,#1f1d2e); }
.playlist-intro h2 { margin:6px 0 8px; font-size:24px; }
.playlist-intro p { max-width:720px; margin:0; color:#cfc3d2; font-size:15px; line-height:1.75; word-break:keep-all; }
.playlist-intro>button { flex:none; padding:12px 15px; border:1px solid #896682; border-radius:8px; color:#f4dcec; background:#382b3d; font-size:13px; }
.playlist-intro>button b { display:inline-grid; min-width:23px; height:23px; margin-left:8px; place-items:center; border-radius:50%; color:#251928; background:#ebb0d1; font-size:11px; }
.track-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.track-grid--featured { grid-template-columns:minmax(0,1fr); }
.track-card { position:relative; display:grid; grid-template-columns:150px minmax(0,1fr); min-height:190px; padding:0; overflow:hidden; border-color:#57475e; transition:transform .2s,border-color .2s,box-shadow .2s; }
.track-card--featured { grid-column:1/-1; grid-template-columns:220px minmax(0,1fr); min-height:220px; }
.track-card--featured .track-art { min-height:220px; }
.track-card--featured .track-copy { display:flex; flex-direction:column; justify-content:center; }
.track-card--featured .track-copy p { min-height:0; max-width:760px; }
.track-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--track-tone) 62%,#57475e); box-shadow:0 14px 34px #0807115e; }
.track-card.is-playing { border-color:var(--track-tone); box-shadow:0 0 0 1px color-mix(in srgb,var(--track-tone) 45%,transparent),0 15px 38px #08071175; }
.track-art { position:relative; display:flex; min-height:190px; flex-direction:column; justify-content:space-between; padding:18px; overflow:hidden; background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--track-tone) 82%,white) 0 2px,transparent 3px),radial-gradient(circle at 68% 62%,var(--track-tone) 0 1px,transparent 2px),linear-gradient(145deg,#1a1728 7%,color-mix(in srgb,var(--track-tone) 55%,#241a31) 55%,#10111c); }
.track-art::before { content:""; position:absolute; width:118px; height:118px; right:-27px; bottom:17px; border:1px solid color-mix(in srgb,var(--track-tone) 64%,transparent); border-radius:50%; box-shadow:0 0 0 22px color-mix(in srgb,var(--track-tone) 9%,transparent),0 0 0 43px color-mix(in srgb,var(--track-tone) 6%,transparent); }
.track-art>span { color:#f7d9eb; font:700 12px/1 Georgia,serif; letter-spacing:.12em; }
.track-art>i { position:relative; align-self:center; color:#fff3fb; font-style:normal; font-size:28px; text-shadow:0 0 24px var(--track-tone); }
.track-art>b { position:relative; color:#fff5fb; font:700 12px/1 Georgia,serif; letter-spacing:.16em; }
.track-copy { min-width:0; padding:22px 22px 19px; }
.track-copy h2 { margin:5px 0 9px; overflow:hidden; color:#fff7fc; font:600 23px/1.2 Georgia,"Noto Serif KR",serif; text-overflow:ellipsis; white-space:nowrap; }
.track-copy p { min-height:50px; margin:0 0 16px; color:#c9bdce; font-size:14px; line-height:1.7; word-break:keep-all; }
.track-actions { display:flex; flex-wrap:wrap; gap:8px; }
.track-actions button { min-height:36px; padding:8px 11px; border:1px solid #68526a; border-radius:6px; color:#eee1ed; background:#312839; font-size:12px; font-weight:600; }
.track-actions .track-play { border-color:color-mix(in srgb,var(--track-tone) 70%,#68526a); color:#fff; background:color-mix(in srgb,var(--track-tone) 28%,#2b2233); }
.track-actions button:hover { border-color:#d9a4c5; }
.track-actions button:disabled { color:#9d909e; border-color:#49404e; background:#25222d; cursor:default; }
.track-actions .track-lyrics { color:#f2d9e9; border-color:#7c5e77; background:#292430; }
.music-group { margin-top:32px; }
.music-group-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:20px; margin:0 2px 14px; padding-bottom:11px; border-bottom:1px solid #493a4d; }
.music-group-head>span { grid-column:1; color:#d899bb; font:700 9px/1 Georgia,serif; letter-spacing:.2em; }
.music-group-head h2 { grid-column:1; margin:5px 0 0; color:#fff4fb; font-size:20px; letter-spacing:-.04em; }
.music-group-head p { grid-column:2; grid-row:1/3; align-self:end; margin:0; color:#aa9cac; font-size:11px; }
.track-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.track-grid--three .track-card { grid-template-columns:104px minmax(0,1fr); min-height:245px; }
.track-grid--three .track-art { min-height:245px; padding:14px 12px; }
.track-grid--three .track-art::before { right:-55px; }
.track-grid--three .track-copy { display:flex; flex-direction:column; padding:18px 14px 16px; }
.track-grid--three .track-copy h2 { font-size:20px; }
.track-grid--three .track-copy p { min-height:68px; margin-bottom:13px; font-size:12px; line-height:1.65; }
.track-grid--three .track-actions { margin-top:auto; gap:6px; }
.track-grid--three .track-actions button { min-height:33px; padding:7px 8px; font-size:11px; }
.track-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.playing-wave { position:absolute; top:16px; right:16px; display:none; height:18px; align-items:end; gap:2px; }
.is-playing .playing-wave { display:flex; }
.playing-wave i { width:2px; height:8px; background:var(--track-tone); animation:music-wave .85s ease-in-out infinite alternate; }
.playing-wave i:nth-child(2) { height:16px; animation-delay:-.35s; }.playing-wave i:nth-child(3) { height:11px; animation-delay:-.6s; }.playing-wave i:nth-child(4) { height:14px; animation-delay:-.2s; }
@keyframes music-wave { to { height:3px; opacity:.55; } }

/* Persistent audio player */
.audio-shell { position:fixed; z-index:220; left:0; right:0; bottom:0; display:none; color:#f9f1f8; background:#12121df5; border-top:1px solid #674d68; box-shadow:0 -15px 45px #06060dc2; backdrop-filter:blur(18px); }
body.archive-entered .audio-shell { display:block; animation:player-rise .7s cubic-bezier(.2,.8,.2,1) .15s both; }
@keyframes player-rise { from { transform:translateY(110%); } }
.player-progress { position:absolute; left:0; right:0; top:-5px; height:10px; }
.player-progress>input { position:absolute; inset:0; width:100%; height:10px; margin:0; opacity:.01; cursor:pointer; }
.player-progress::before { content:""; position:absolute; top:4px; left:0; right:0; height:2px; background:#4d3d52; }
.player-progress:has(input:hover)::before { height:4px; top:3px; }
.player-progress::after { content:""; position:absolute; z-index:-1; top:4px; left:0; width:var(--player-progress,0%); height:2px; background:linear-gradient(90deg,#b979a3,#f1aed3); }
.player-seek-star { position:absolute; z-index:2; left:clamp(8px,var(--player-progress,0%),calc(100% - 8px)); top:4px; width:18px; height:18px; color:#ffd7ed; font:700 15px/18px Georgia,serif; text-align:center; transform:translate(-50%,-50%); text-shadow:0 0 5px #fff,0 0 11px #f39bca,0 0 20px #d178ad; pointer-events:none; transition:left .08s linear; }
.player-progress:has(input:hover) .player-seek-star { color:#fff4fb; text-shadow:0 0 6px #fff,0 0 13px #ffadd5,0 0 24px #e488bd; transform:translate(-50%,-50%) scale(1.12); }
.player-time { position:absolute; right:14px; bottom:10px; display:none; gap:8px; padding:4px 7px; border-radius:4px; color:#d9cad9; background:#101019e8; font-size:10px; }
.player-time i { font-style:normal; }.player-progress:hover .player-time { display:flex; }
.player-bar { position:relative; max-width:1510px; height:88px; margin:auto; padding:0 30px; display:grid; grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr); align-items:center; gap:24px; }
.now-playing { min-width:0; display:flex; align-items:center; gap:13px; }
.album-orbit { display:grid; width:48px; height:48px; flex:none; place-items:center; border:1px solid #a9799b; border-radius:50%; color:#f4b4d5; background:radial-gradient(circle,#68415f,#292235 62%,#171722 63%); box-shadow:inset 0 0 0 7px #151520,0 0 20px #d783b22e; animation:album-spin 10s linear infinite; }
audio:not([src])~.audio-shell .album-orbit { animation-play-state:paused; }
@keyframes album-spin { to { transform:rotate(360deg); } }
.now-playing>div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.now-playing span:not(.album-orbit) { color:#bca7bb; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.now-playing strong { overflow:hidden; color:#fff7fc; font:600 16px/1.25 Georgia,"Noto Serif KR",serif; text-overflow:ellipsis; white-space:nowrap; }
.transport { display:flex; align-items:center; justify-content:center; gap:7px; }
.transport button { position:relative; display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:50%; color:#ded0df; background:transparent; }
.transport button:hover { color:#fff; background:#342a3a; }
.transport svg,.volume-control svg,.queue-remove svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.transport .play-toggle { width:47px; height:47px; color:#1c1520; background:linear-gradient(135deg,#f3bedc,#d382b1); box-shadow:0 0 25px #e38bb541; }
.transport .play-toggle:hover { color:#161018; background:linear-gradient(135deg,#ffd9ed,#e798c1); }
.transport .play-toggle svg { width:22px; height:22px; fill:currentColor; stroke:none; }
.transport button b { position:absolute; right:-3px; bottom:-1px; display:grid; min-width:18px; height:15px; padding:0 3px; place-items:center; border:1px solid #17131c; border-radius:6px; color:#241a25; background:#dda1c3; font-size:8px; line-height:1; }
.repeat-toggle svg { width:19px; }
.volume-control { justify-self:end; display:flex; align-items:center; gap:10px; color:#cdbacd; }
.volume-control input { width:105px; accent-color:#e3a1c7; }
.queue-drawer { position:absolute; right:max(24px,calc((100vw - 1450px)/2)); bottom:95px; width:min(430px,calc(100vw - 32px)); max-height:min(570px,calc(100vh - 140px)); overflow:auto; border:1px solid #715773; border-radius:14px; background:#191824f7; box-shadow:0 22px 70px #05050bd9; backdrop-filter:blur(20px); }
.queue-drawer[hidden] { display:none; }
.queue-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:19px 20px 15px; border-bottom:1px solid #493b50; background:#201c2df2; }
.queue-head span { color:#d89aba; font:700 9px/1 Georgia,serif; letter-spacing:.2em; }
.queue-head h2 { margin:4px 0 0; font-size:18px; }
.queue-head>button { width:34px; height:34px; border:0; border-radius:50%; color:#d8c7d8; background:#322a3b; font-size:21px; }
.queue-list { padding:8px; }
.queue-item { display:flex; align-items:center; gap:6px; border-radius:9px; }
.queue-item.active { background:#3a2b3e; }
.queue-play { min-width:0; flex:1; display:grid; grid-template-columns:35px minmax(0,1fr); align-items:center; gap:8px; padding:11px 8px; border:0; text-align:left; color:#efe5ef; background:transparent; }
.queue-play>span:first-child { color:#c690b0; font:700 10px Georgia,serif; }
.queue-play>span:last-child { min-width:0; display:flex; flex-direction:column; gap:3px; }
.queue-play strong,.queue-play small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue-play strong { font:600 14px Georgia,"Noto Serif KR",serif; }.queue-play small { color:#ac9bac; font-size:10px; }
.queue-remove { display:grid; width:34px; height:34px; margin-right:6px; place-items:center; border:0; border-radius:50%; color:#9f8e9f; background:transparent; }
.queue-remove:hover { color:#ffd8ea; background:#523648; }.queue-remove svg { width:16px; height:16px; }
.queue-empty { padding:48px 20px; text-align:center; }.queue-empty span { color:#df9ec3; }.queue-empty p { margin:10px 0 4px; font-size:14px; }.queue-empty small { color:#9f91a3; font-size:11px; }

/* Bilingual lyrics */
.lyrics-dialog { position:fixed; inset:0; width:min(760px,94vw); max-width:min(760px,94vw); max-height:90dvh; margin:auto; padding:0; overflow:auto; color:#f7f2fb; border:1px solid #936c8c; border-radius:18px; background:#171722; box-shadow:0 35px 100px #070713e8; }
.lyrics-dialog::backdrop { background:#070713d8; backdrop-filter:blur(6px); }
.lyrics-header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 27px 19px; border-bottom:1px solid color-mix(in srgb,var(--track-tone) 55%,#4e3c52); background:linear-gradient(110deg,#201d2ff5,color-mix(in srgb,var(--track-tone) 20%,#302438) 72%,#57394df5); backdrop-filter:blur(16px); }
.lyrics-header h2 { margin:4px 0 5px; color:#fff8fc; font:600 27px/1.2 Georgia,"Noto Serif KR",serif; }
.lyrics-header p { margin:0; color:#cdbdca; font-size:11px; letter-spacing:.06em; }
.lyrics-header .dialog-close { position:static; flex:none; width:38px; height:38px; }
.lyrics-body { padding:8px 27px 34px; }
.lyrics-section { padding:24px 0 2px; border-bottom:1px solid #3e3443; }
.lyrics-section:last-child { border-bottom:0; }
.lyrics-section h3 { margin:0 0 18px; color:#e6a9ca; font:700 12px/1.3 Georgia,"Noto Serif KR",serif; letter-spacing:.08em; }
.lyric-pair { margin:0 0 15px; }
.lyric-pair p { margin:0; }
.lyric-pair p[lang="en"] { color:#fff8fc; font:500 16px/1.55 Georgia,"Noto Serif KR",serif; }
.lyric-pair p[lang="ko"] { margin-top:3px; color:#b8abbc; font-size:13px; line-height:1.6; }
.lyrics-instrumental { margin:0 0 19px; color:#96899d; font:italic 13px/1.5 Georgia,serif; letter-spacing:.08em; }

@media(max-width:1180px) and (min-width:901px) {
  .track-grid--three .track-card { grid-template-columns:minmax(0,1fr); }
  .track-grid--three .track-art { min-height:118px; }
  .track-grid--three .track-art::before { right:-20px; bottom:-50px; }
  .track-grid--three .track-copy p { min-height:62px; }
}

@media(max-width:900px) {
  .track-grid { grid-template-columns:minmax(0,1fr); }
  .player-bar { grid-template-columns:minmax(190px,1fr) auto; height:92px; padding:0 20px; }
  .volume-control { display:none; }
}
@media(max-width:620px) {
  body.archive-entered #app { padding-bottom:142px; }
  .entry-content { padding:22px 14px 28px; }
  .entry-kicker { margin-bottom:4px; font-size:9px; letter-spacing:.3em; }
  .entry-title-image { width:100%; max-height:43vh; margin:-4px auto -12px; }
  .entry-rule { width:76%; margin-bottom:16px; }
  .entry-content p { max-width:310px; font-size:14px; }
  .entry-button { min-width:min(270px,100%); }
  .playlist-intro { align-items:flex-start; flex-direction:column; padding:22px; }
  .playlist-intro h2 { font-size:21px; }
  .music-group-head { display:block; }.music-group-head p { margin-top:7px; }
  .track-card,.track-card--featured { grid-column:auto; grid-template-columns:105px minmax(0,1fr); min-height:210px; }
  .track-art { min-height:210px; padding:14px; }.track-art::before { right:-57px; }
  .track-card--featured .track-art { min-height:210px; }
  .track-copy { padding:18px 15px; }.track-copy h2 { font-size:19px; }.track-copy p { font-size:13px; }
  .track-actions { flex-direction:column; }.track-actions button { width:100%; }
  .player-bar { height:126px; grid-template-columns:minmax(0,1fr); align-content:center; gap:8px; padding:9px 16px 11px; }
  .now-playing { justify-content:center; }.album-orbit { width:40px; height:40px; }
  .now-playing>div { max-width:calc(100vw - 100px); }.now-playing span:not(.album-orbit),.now-playing strong { text-align:center; }
  .transport { gap:4px; }.transport button { width:34px; height:34px; }.transport .play-toggle { width:42px; height:42px; }
  .queue-drawer { right:8px; bottom:134px; width:calc(100vw - 16px); max-height:calc(100vh - 160px); }
  .lyrics-dialog { width:96vw; max-width:96vw; max-height:92dvh; }
  .lyrics-header { padding:18px 19px 16px; }.lyrics-header h2 { font-size:23px; }
  .lyrics-body { padding:4px 20px 28px; }.lyric-pair p[lang="en"] { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) {
  .entry-gate::before,.entry-aurora,.entry-stars i,.album-orbit,.playing-wave i { animation:none!important; }
  #app,.entry-gate,.entry-gate * { transition-duration:.01ms!important; }
}