@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; }
.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; }
.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; }
}