/* ==========================================================================
   WHITESEA — Where the Sea Turns White
   테마: night(바다) / snow(설원). 색은 모두 변수로 되어 있어요.
   ========================================================================== */

:root {
  --serif-d: 'Instrument Serif', 'Cormorant Garamond', 'Gowun Batang', 'Times New Roman', serif;
  --title: 'Makcasa', 'Instrument Serif', 'Gowun Batang', serif;
  --nav: 'Makcasa', 'Instrument Serif', 'Noto Serif KR', serif;
  --display: 'Makcasa', 'Instrument Serif', 'Noto Serif KR', serif;
  --kopub: 'KoPub Batang Medium', 'KoPubBatang', 'Noto Serif KR', 'Gowun Batang', serif;
  --cinzel: 'Cinzel', 'Cormorant Garamond', 'Gowun Batang', serif;
  --serif-b: 'Noto Serif KR', 'Gowun Batang', 'Batang', serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease2: cubic-bezier(.5, .05, .2, 1);
  --sea0: #040A24; --sea1: #0B2A8A; --sea2: #1F5BEA; --sea3: #8FDBFF;
}
[data-theme="night"] {
  --bg: #040A24; --bg2: #0A1650; --ink: #EAF4FF; --muted: #9DB4E8;
  --line: rgba(168, 200, 255, .30); --accent: #6FC6FF; --accent-ink: #04123F;
  --card: rgba(10, 26, 100, .42); --gold: #d6cdb4;
  --shadow: 0 24px 70px rgba(0, 8, 60, .55);
  --bubA: #12307F; --bubB: #E9F3FF; --bubB-ink: #0B2570;
}
[data-theme="snow"] {
  --bg: #F3F9FF; --bg2: #DCEBFB; --ink: #0F2C84; --muted: #4A6AB0;
  --line: rgba(31, 75, 216, .28); --accent: #2A6FDB; --accent-ink: #fff;
  --card: rgba(255, 255, 255, .72); --gold: #8E7A3C;
  --shadow: 0 24px 70px rgba(40, 90, 200, .18);
  --bubA: #1F4BD8; --bubB: #fff; --bubB-ink: #0F2C84;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font: 400 17px/1.9 var(--serif-b); word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; font-synthesis: none;
  background: var(--bg); transition: background-color .7s, color .7s;
}
[data-theme="night"] body { background: #06194f; }
[data-theme="snow"] body { background: linear-gradient(180deg, #FAFDFF 0%, #DCEBFB 100%); }
a { color: inherit; }
img { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3, h4 { margin: 0; font-family: var(--title); font-style: normal; font-weight: 400; letter-spacing: -.015em; line-height: 1.1; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

#sky { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
main { position: relative; z-index: 2; outline: none; }

/* ---------- 상단 카테고리 (첨부한 gif 처럼: 가운데 정렬, 작은 대문자 세리프, 호버하면 짧은 밑줄) ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 70; display: flex; justify-content: center; padding: clamp(14px, 2.4vw, 30px) 16px 0; pointer-events: none; }
.topnav { max-width: 100%; overflow-x: auto; scrollbar-width: none; pointer-events: auto; }
.topnav::-webkit-scrollbar { display: none; }
.topnav ul { display: flex; gap: clamp(22px, 3.4vw, 54px); width: max-content; margin: 0 auto; padding: 0 6px; }
.topnav a { position: relative; display: block; padding: .4rem .05rem .95rem; text-decoration: none; white-space: nowrap; color: #fff;
  font: 400 clamp(1.25rem, 1.7vw, 1.65rem)/1 var(--nav); letter-spacing: .01em; text-shadow: 0 2px 6px rgba(0, 12, 70, .75), 0 0 22px rgba(0, 20, 110, .6); }
.topnav a::after { content: ''; position: absolute; left: 50%; bottom: .4rem; width: 14px; height: 1.5px; translate: -50% 0; background: #fff; opacity: 0; scale: .3 1; transition: opacity .35s, scale .45s var(--ease); box-shadow: 0 0 8px rgba(255, 255, 255, .8); }
.topnav a:hover::after, .topnav a:focus-visible::after, .topnav a[aria-current]::after { opacity: 1; scale: 1; }
@media (max-width: 720px) { .topnav ul { width: auto; flex-wrap: wrap; justify-content: center; gap: 0 18px; } .topnav a { font-size: 1.1rem; padding-bottom: .8rem; } .topnav a::after { bottom: .25rem; } }
.bar::before { content: ''; position: absolute; inset: 0 0 -26px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(2, 14, 72, .62), rgba(2, 14, 72, 0)); }

/* ---------- 공통 페이지 ---------- */
.page { position: relative; max-width: 1180px; margin: 0 auto; padding: 130px clamp(18px, 4vw, 48px) 110px; }
.phead { margin-bottom: 3.6rem; max-width: 760px; }
.phead h1 { font-family: var(--display); font-weight: 400; letter-spacing: .005em; font-size: clamp(3rem, 8vw, 6.4rem); letter-spacing: -.01em; }
.phead .sub { margin: 1.2rem 0 0; color: var(--muted); font-size: 1.02rem; }
.phead .rule { display: flex; align-items: center; gap: 12px; margin-top: 1.6rem; color: var(--accent); }
.phead .rule::before, .phead .rule::after { content: ''; height: 1px; background: var(--line); flex: 0 0 56px; }
.phead .rule::after { flex: 1; }
.phead .rule i { width: 7px; height: 7px; transform: rotate(45deg); background: currentColor; }
.sample { display: inline-block; margin-left: .7em; padding: .15em .7em; font: 600 .68rem/1.5 var(--serif-b); letter-spacing: .12em; vertical-align: middle; border: 1px dashed var(--gold); color: var(--gold); border-radius: 99px; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { padding: .1rem .9rem; font-size: .88rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); }
.arch {
  border-radius: 50% 50% 14px 14px / 130px 130px 14px 14px; border: 1px solid var(--line);
  outline: 1px solid var(--line); outline-offset: 7px; background: var(--card); backdrop-filter: blur(6px);
}
.empty { padding: 3rem 1rem; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; }
.back { display: inline-flex; gap: .5em; align-items: center; margin-bottom: 2rem; color: var(--muted); text-decoration: none; font-size: .95rem; }
.back:hover { color: var(--accent); }

@keyframes spin { to { rotate: 360deg; } }
@keyframes bob { 50% { translate: 0 -10px; } }
@keyframes aur { from { opacity: .7; translate: -2% 0; } to { opacity: 1; translate: 3% 4%; } }
@keyframes rise { from { opacity: 0; transform: translateY(45%); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.ring { position: absolute; top: 50%; left: 50%; aspect-ratio: 1; translate: -50% -50%; animation: spin 90s linear infinite; pointer-events: none; }
.ring svg { width: 100%; height: 100%; display: block; }

/* ==========================================================================
   캐릭터 프로필
   ========================================================================== */
.char { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.char-art { position: sticky; top: 90px; height: calc(100svh - 130px); min-height: 520px; }
.char-art .ring { left: 50%; top: 46%; width: min(120%, 640px); opacity: .5; color: var(--accent); }
.char-art .art { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 20px 36px rgba(0, 10, 80, .4)); animation: bob 8s ease-in-out infinite; }
.char-art .art img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.char-info .role { margin: 0 0 .8rem; color: var(--accent); font: 400 1.25rem/1.2 var(--serif-d); letter-spacing: .06em; }
.char-info h1 { font-size: clamp(3.4rem, 8vw, 6.8rem); margin-bottom: .5rem; }
.char-info .epi { margin: 0 0 1.6rem; color: var(--muted); }
blockquote { margin: 2.2rem 0; padding: .4rem 0 .4rem 1.4rem; border-left: 2px solid var(--accent); font: 400 1.5rem/1.5 var(--serif-d); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 2rem 0 3rem; }
.stats div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.stats dt { color: var(--muted); font-size: .92rem; }
.stats dd { margin: 0; text-align: right; }
.csec { margin-bottom: 2.4rem; }
.csec h3 { font-size: 1.9rem; margin-bottom: .6rem; }
.pairnav { margin-top: 4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--line); text-decoration: none; }
.pairnav b { font: 400 1.8rem/1 var(--serif-d); }
.pairnav:hover b { color: var(--accent); }
.char-bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
body[data-route="char"] main { overflow: hidden; }
.bg-aur { position: absolute; inset: -10% -10% 55% -10%; filter: blur(40px); opacity: .7; background: radial-gradient(40% 70% at 25% 30%, rgba(111, 198, 255, .55), transparent 70%), radial-gradient(35% 60% at 75% 20%, rgba(150, 170, 255, .45), transparent 70%); animation: aur 16s ease-in-out infinite alternate; }
.bg-mount { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; opacity: .75; }

/* ---------- 실루엣 자리표시 ---------- */
.art { position: relative; }
.art .sil { width: 100%; height: 100%; max-height: 100%; }
.is-ph .sil, .art .sil { overflow: visible; }
.ph-note { color: currentColor; }

/* ==========================================================================
   서사 타임라인
   ========================================================================== */
.world { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 3rem; margin-bottom: 6rem; padding: 3rem; }
.world h2 { font-size: clamp(2.6rem, 5vw, 4rem); }
.world p { max-width: 34em; }
.tl { position: relative; padding: 1rem 0 2rem; --p: 0; }
.tl::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; translate: -50% 0; background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px); }
.tl-fill { position: absolute; left: 50%; top: 0; width: 2px; translate: -50% 0; height: calc(var(--p) * 100%); background: linear-gradient(180deg, var(--sea2), var(--accent) 70%, #fff); box-shadow: 0 0 14px var(--accent); }
.tl-ship { position: absolute; left: 50%; top: calc(var(--p) * 100%); width: 26px; height: 26px; translate: -50% -50%; color: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); z-index: 3; }
.tl-ship svg { width: 100%; height: 100%; animation: spin 14s linear infinite; }
.row { position: relative; display: grid; grid-template-columns: 1fr 72px 1fr; margin-bottom: 4.2rem; align-items: start; }
.row .card { grid-column: 1; padding: 1.8rem 2rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(6px); opacity: .35; transform: translateY(14px); transition: opacity .8s, transform .9s var(--ease); }
.row.in .card { opacity: 1; transform: none; }
.row.knight .card { grid-column: 3; }
.row .pt { grid-column: 2; grid-row: 1; justify-self: center; margin-top: 1.9rem; width: 15px; height: 15px; rotate: 45deg; background: var(--bg); border: 1.5px solid var(--accent); z-index: 2; transition: background .5s, box-shadow .5s; }
.row.in .pt { background: var(--accent); box-shadow: 0 0 16px var(--accent); }
.row.both { display: flex; flex-direction: column; align-items: center; text-align: center; }
.row.both .pt { order: -1; }
.row.both .card { width: 100%; max-width: 660px; margin: 0 auto; }
.row.both .pt { display: block; margin: 0 auto 1.4rem; }
.card .lab { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .5rem; color: var(--accent); font: 400 1.2rem/1 var(--serif-d); }
.row.both .card .lab, .row.both .chips { justify-content: center; }
.card .lab small { font: 400 .85rem var(--serif-b); color: var(--muted); }
.card h3 { font-size: 2rem; margin-bottom: .7rem; }
.card .chips { margin-top: 1rem; }

/* ==========================================================================
   역극 / TRPG / 만화 — 목록
   ========================================================================== */
.log-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.6rem; }
.log-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.8rem; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(6px); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; }
.log-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--shadow); }
.log-card .meta { color: var(--muted); font-size: .86rem; }
.log-card h3 { font-size: 1.9rem; }
.log-card p { color: var(--muted); font-size: .95rem; margin: 0; }
.log-card .chips { margin-top: auto; padding-top: .8rem; }
.log-card .go { color: var(--accent); font: 400 1.05rem/1 var(--serif-d); margin-top: .8rem; }
.comic-cover { aspect-ratio: 4/5; margin: -1.8rem -1.8rem .8rem; border-radius: 14px 14px 0 0; overflow: hidden; }
.comic-cover img, .comic-cover .ph { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 로그 리더 ---------- */
.reader { --fs: 17px; max-width: 820px; margin: 0 auto; }
.r-head { margin-bottom: 1.6rem; }
.r-head h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin-bottom: .6rem; }
.r-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .3rem 1.6rem; margin: 1.2rem 0; padding: 1rem 0; border-block: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.r-info b { color: var(--ink); font-weight: 400; display: block; }
.r-tools { position: sticky; top: 64px; z-index: 20; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; margin: 0 0 2rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 99px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); font-size: .88rem; }
.r-tools label { display: inline-flex; gap: .6rem; align-items: center; }
.r-tools input[type=range] { width: 110px; accent-color: var(--accent); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.seg button { padding: .2rem .9rem; background: none; border: 0; font-size: .88rem; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.r-prog { position: fixed; left: 0; top: 0; height: 3px; z-index: 70; width: calc(var(--rp, 0) * 100%); background: linear-gradient(90deg, var(--sea2), var(--accent)); }
.r-body { font-size: var(--fs); }
.scene { display: flex; align-items: center; gap: 1rem; margin: 3rem 0 1.6rem; color: var(--accent); font: 400 1.35rem/1 var(--serif-d); }
.scene::before, .scene::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.narr { margin: 1.4rem auto; max-width: 36em; text-align: center; color: var(--muted); font-size: .94em; }
.msg { display: flex; gap: .8rem; margin: 1.1rem 0; align-items: flex-start; }
.msg.side-right { flex-direction: row-reverse; }
.av { position: relative; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line); background: var(--card); color: var(--accent); }
.av svg { width: 24px; height: 24px; } .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bub { max-width: min(78%, 34em); padding: .7rem 1.1rem; border-radius: 4px 18px 18px 18px; background: var(--bubA); color: #fff; box-shadow: 0 6px 20px rgba(0, 10, 80, .18); }
.side-right .bub { border-radius: 18px 4px 18px 18px; background: var(--bubB); color: var(--bubB-ink); border: 1px solid var(--line); }
.nm { display: block; font: 400 .95em/1.3 var(--serif-d); letter-spacing: .04em; opacity: .85; margin-bottom: .1rem; }
.bub p { margin: 0; line-height: 1.75; }
.msg.side-gm { display: block; margin: 1.6rem 0; }
.side-gm .bub { max-width: none; border-radius: 12px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--gold); box-shadow: none; }
.side-gm .av { display: none; }
.roll { display: flex; justify-content: center; margin: 1rem 0; }
.roll span { display: inline-flex; align-items: center; gap: .7em; padding: .35rem 1.1rem; border: 1px solid var(--line); border-radius: 99px; background: var(--card); font-size: .92em; }
.roll svg { width: 20px; height: 20px; color: var(--accent); }
.roll em { font-style: normal; color: var(--muted); }
.roll b { font-weight: 700; }
.g-ok b { color: #3E9BFF; } .g-fail b { color: #E27D8C; } .g-crit b { color: var(--gold); } .g-fumble b { color: #E2506B; }
.g-crit { box-shadow: 0 0 22px rgba(233, 221, 176, .35); } .g-crit span { border-color: var(--gold); }
/* 소설 모드 */
.reader.novel .av { display: none; }
.reader.novel .msg, .reader.novel .msg.side-right { display: block; margin: .9rem 0; }
.reader.novel .bub, .reader.novel .side-right .bub, .reader.novel .side-gm .bub { max-width: none; padding: 0; background: none; color: var(--ink); border: 0; box-shadow: none; border-radius: 0; }
.reader.novel .nm { display: inline; margin-right: .6em; color: var(--accent); opacity: 1; }
.reader.novel .bub p { display: inline; }
.r-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.r-nav a { text-decoration: none; max-width: 48%; }
.r-nav small { display: block; color: var(--muted); }
.r-nav b { font: 400 1.5rem/1.2 var(--serif-d); }
.r-nav a:hover b { color: var(--accent); }
.r-nav a:last-child { text-align: right; margin-left: auto; }

/* ---------- 만화 리더 ---------- */
.comic-view { max-width: 860px; margin: 0 auto; }
.cpage { display: block; width: 100%; margin: 0 auto .6rem; background: var(--card); }
.cpage img { display: block; width: 100%; height: auto; }
.ph { display: grid; place-content: center; gap: .4rem; text-align: center; padding: 1rem; color: #fff; font: 400 1.2rem/1.3 var(--serif-d); position: relative; overflow: hidden; width: 100%; }
.ph small { font: 400 .78rem var(--serif-b); opacity: .75; word-break: break-all; }
.ph::before { content: '✦'; position: absolute; left: 12%; top: 10%; font-size: 1.1rem; opacity: .7; }
.ph::after { content: '✧'; position: absolute; right: 14%; bottom: 12%; font-size: 1.6rem; opacity: .5; }
.ph.p0 { background: linear-gradient(160deg, #0B2A8A, #040A24); }
.ph.p1 { background: linear-gradient(160deg, #EAF5FF, #8DBFFF); color: #0F2C84; }
.ph.p2 { background: linear-gradient(200deg, #1F5BEA, #8FDBFF); }
.ph.p3 { background: linear-gradient(170deg, #0A1650, #2A6FDB 70%, #BFE6FF); }
.pager { display: none; align-items: center; justify-content: center; gap: 1.4rem; margin: 1.4rem 0; }
.comic-view.paged .pager { display: flex; }
.comic-view.paged .cpage { display: none; }
.comic-view.paged .cpage.on { display: block; }
.pager button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 1.3rem; }
.pager button:hover { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   미니룸
   ========================================================================== */
.room-wrap { padding: 14px; border-radius: 50% 50% 18px 18px / 110px 110px 18px 18px; border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: 8px; background: var(--card); max-width: 1040px; margin: 8px auto 0; }
.room { display: block; width: 100%; height: auto; border-radius: 50% 50% 8px 8px / 100px 100px 8px 8px; background: #040A24; }
.room .item { cursor: pointer; transition: filter .4s; outline: none; }
.room .item:hover, .room .item:focus-visible, .room .item.on { filter: drop-shadow(0 0 10px #8FDBFF) brightness(1.15); }
.room .w1 { animation: slide2 7s linear infinite; } .room .w2 { animation: slide2 11s linear infinite reverse; }
@keyframes slide2 { to { transform: translateX(-160px); } }
.room .snowf { animation: snowfall linear infinite; }
@keyframes snowfall { from { transform: translateY(-20px); } to { transform: translateY(190px); } }
.room .needle { animation: sway 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sway { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(31deg); } }
.room .flick { animation: flick 3s ease-in-out infinite; } @keyframes flick { 0%, 100% { opacity: .55; } 45% { opacity: 1; } 70% { opacity: .75; } }
.room .steam { animation: steam 3.6s ease-in-out infinite; } @keyframes steam { from { opacity: 0; transform: translateY(6px); } 50% { opacity: .8; } to { opacity: 0; transform: translateY(-14px); } }
.room .aurb { animation: auroraMove 9s ease-in-out infinite alternate; } @keyframes auroraMove { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
.room-cap { max-width: 640px; margin: 2.4rem auto 0; text-align: center; min-height: 6.5rem; }
.room-cap h3 { font-size: 2rem; margin-bottom: .3rem; color: var(--accent); }
.room-img { width: 100%; border-radius: 8px; display: block; }

/* ==========================================================================
   갤러리
   ========================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.4rem; }
.filters button { padding: .25rem 1.1rem; border-radius: 99px; background: none; border: 1px solid var(--line); font-size: .95rem; transition: background .3s, color .3s; }
.filters button:hover { border-color: var(--accent); }
.filters button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.masonry { columns: 3 260px; column-gap: 1.2rem; }
.g-item { display: block; width: 100%; padding: 0; margin: 0 0 1.2rem; break-inside: avoid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); position: relative; transition: transform .6s var(--ease), box-shadow .6s, border-color .3s; }
.g-item:hover { transform: translateY(-4px) scale(1.012); box-shadow: var(--shadow); border-color: var(--accent); }
.g-item img { display: block; width: 100%; height: auto; }
.g-item .ph { min-height: 160px; }
.g-item .cap { position: absolute; inset: auto 0 0 0; padding: 2.4rem 1rem .8rem; text-align: left; color: #fff; font: 400 1.15rem/1.2 var(--serif-d); background: linear-gradient(transparent, rgba(4, 10, 36, .78)); opacity: 0; transition: opacity .4s; }
.g-item:hover .cap, .g-item:focus-visible .cap { opacity: 1; }
#lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 3vw; background: rgba(2, 6, 26, .92); backdrop-filter: blur(10px); color: #EAF4FF; }
#lightbox[hidden] { display: none; }
#lightbox figure { margin: 0; max-width: min(1100px, 80vw); text-align: center; }
.lb-stage img { max-width: 100%; max-height: 78svh; width: auto; margin: auto; display: block; border-radius: 6px; }
.lb-stage .ph { width: min(70vw, 560px); max-height: 78svh; margin: auto; border-radius: 6px; aspect-ratio: 3/4; }
#lightbox figcaption { margin-top: 1rem; font-size: .95rem; color: #9DB4E8; }
#lightbox figcaption b { display: block; color: #EAF4FF; font: 400 1.5rem/1.3 var(--serif-d); }
.lb-x { position: absolute; right: 22px; top: 14px; background: none; border: 0; font-size: 2.6rem; line-height: 1; color: #EAF4FF; }
.lb-n { background: none; border: 1px solid rgba(168, 200, 255, .35); width: 48px; height: 48px; border-radius: 50%; font-size: 1.8rem; line-height: 1; color: #EAF4FF; flex: none; }
.lb-n:hover, .lb-x:hover { color: #6FC6FF; border-color: #6FC6FF; }

/* ---------- 반응형 ---------- */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .char { grid-template-columns: 1fr; }
  .char-art { position: relative; top: 0; height: 74svh; min-height: 0; }
  .world { grid-template-columns: 1fr; padding: 1.8rem; gap: 1rem; margin-bottom: 4rem; }
  .tl::before, .tl-fill { left: 14px; } .tl-ship { left: 14px; }
  .row, .row.knight { grid-template-columns: 28px 1fr; }
  .row .card, .row.knight .card { grid-column: 2; padding: 1.4rem; }
  .row .pt, .row.knight .pt { grid-column: 1; margin-top: 1.7rem; }
  .row.both { display: grid; text-align: left; }
  .row.both .pt { margin: 1.7rem 0 0; justify-self: center; } .row.both .card { max-width: none; margin: 0; }
  .row.both .card .lab, .row.both .chips { justify-content: flex-start; }
  .stats { grid-template-columns: 1fr; }
  .bub { max-width: 84%; } .r-tools { border-radius: 16px; top: 62px; }
  .masonry { columns: 2 150px; column-gap: .8rem; } .g-item { margin-bottom: .8rem; }
  .lb-n { position: absolute; bottom: 18px; } .lb-prev { left: 22%; } .lb-next { right: 22%; }
  #lightbox figure { max-width: 92vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .c, .dock li { opacity: 1 !important; }
}

/* ==========================================================================
   페이지 전환 (파도 없이 짧게 페이드)
   ========================================================================== */
#app { transition: opacity .16s ease; }
#app.out { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { #app:not(.out) { animation: pgin .5s var(--ease) backwards; } }
@keyframes pgin { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   프로필 선택 — 금장 카드 (앞면 얼굴~가슴팍 / 뒷면 전신, 호버하면 뒤집힘)
   ========================================================================== */
.chpage { position: relative; max-width: 1200px; margin: 0 auto; padding: 100px 20px 70px; }
.c-rings { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.c-rings .ring { top: 58%; width: min(150vw, 1100px); opacity: .14; color: #cfe3ff; animation-duration: 240s; }
.c-rings .ring.r2 { width: min(112vw, 820px); opacity: .2; animation-direction: reverse; animation-duration: 160s; }
.c-head { text-align: center; margin-bottom: clamp(1.2rem, 3vw, 2.2rem); }
.c-head h1 { font-family: var(--display); font-weight: 400; letter-spacing: .005em; font: 400 clamp(3.2rem, 7vw, 6rem)/1 var(--title); font-style: normal; letter-spacing: -.01em; color: #fff; text-shadow: 0 0 30px rgba(120, 180, 255, .45); }
.c-head .hint { margin: .7rem 0 0; color: #dce9ff; font-size: .9rem; letter-spacing: .08em; }
.cards { display: flex; justify-content: center; gap: clamp(18px, 5.5vw, 90px); perspective: 1600px; }
.ccard { --w: clamp(160px, min(24vw, calc((100svh - 260px) / 1.55)), 340px); position: relative; display: block; width: var(--w); aspect-ratio: 10 / 15.5; text-decoration: none; color: #f4ecd0; opacity: 0; animation: cardin 1.1s var(--ease) .1s both; transition: translate .6s var(--ease); }
.ccard + .ccard { animation-delay: .3s; }
@keyframes cardin { from { opacity: 0; translate: 0 50px; } to { opacity: 1; translate: 0 0; } }
.ccard:hover, .ccard:focus-visible { translate: 0 -10px; }
.cc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s var(--ease); }
.ccard:hover .cc-in, .ccard:focus-visible .cc-in { transform: rotateY(180deg); }
.cc-face { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: 6px; background: #04103a; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 30px 70px rgba(0, 5, 40, .65); }
.cc-back { transform: rotateY(180deg); }
.cc-bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.cc-pirate .cc-bg { background: linear-gradient(180deg, #0a2a8a 0%, #1450c8 42%, #0a2f95 70%, #04134a 100%); }
.cc-knight .cc-bg { background: linear-gradient(180deg, #060f3a 0%, #1d3d92 38%, #5a86d4 72%, #b9d4fb 100%); }
.cc-bg i { position: absolute; border-radius: 50%; filter: blur(26px); animation: aur 12s ease-in-out infinite alternate; }
.cc-pirate .b1 { left: -20%; top: 18%; width: 90%; aspect-ratio: 1; background: rgba(120, 210, 255, .45); }
.cc-pirate .b2 { right: -30%; top: 48%; width: 80%; aspect-ratio: 1; background: rgba(40, 100, 230, .55); animation-delay: -5s; }
.cc-pirate .b3 { left: -10%; right: -10%; bottom: -8%; height: 26%; border-radius: 40%; background: rgba(226, 246, 255, .4); }
.cc-knight .b1 { left: -10%; top: -4%; width: 110%; height: 42%; background: rgba(120, 240, 220, .42); }
.cc-knight .b2 { right: -22%; top: 14%; width: 90%; height: 40%; background: rgba(170, 146, 255, .42); animation-delay: -6s; }
.cc-knight .b3 { left: -10%; right: -10%; bottom: -8%; height: 28%; border-radius: 40%; background: rgba(255, 255, 255, .55); }
.cc-dots { position: absolute; inset: -40px 0; opacity: .4; background-image: radial-gradient(circle, #fff 0 1.1px, transparent 1.7px), radial-gradient(circle, #fff 0 .8px, transparent 1.3px); background-size: 46px 52px, 29px 33px; background-position: 0 0, 14px 20px; animation: dots 18s linear infinite; }
.cc-pirate .cc-dots { animation-direction: reverse; }
@keyframes dots { to { background-position: 0 52px, 14px 53px; } }
.cc-face .art { position: absolute; inset: 0; z-index: -2; display: block; animation: none; }
.cc-face .art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-art img { object-fit: cover; object-position: 50% 0; }
.cc-full img { object-fit: contain; object-position: 50% 46%; transform: scale(1.5); filter: drop-shadow(0 12px 22px rgba(0, 8, 60, .55)); }
.cc-knight .cc-full img { transform: scale(1.02); object-position: 50% 40%; }
.cc-face .art .sil { position: absolute; left: 12%; right: 12%; bottom: 14%; width: 76%; height: 70%; color: rgba(255, 255, 255, .5); }
.cc-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2, 6, 32, .4) 0%, transparent 18%, transparent 56%, rgba(2, 6, 32, .94) 100%); }
.cc-back .cc-shade { background: linear-gradient(180deg, rgba(2, 6, 32, .25) 0%, transparent 25%, transparent 70%, rgba(2, 6, 32, .85) 100%); }
.cc-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: #d6ccb2; }
.cc-frame::before { content: ''; position: absolute; inset: 0; border-radius: 6px; padding: 2px; background: linear-gradient(140deg, #fff3c4, #a89d82 30%, #7d6830 55%, #f0dd9a 80%, #b89a50);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cc-frame::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(208, 197, 169, .5); border-radius: 3px; }
.co { position: absolute; width: clamp(30px, 20%, 56px); filter: drop-shadow(0 0 4px rgba(208, 197, 169, .55)); }
.co-tl { left: 5px; top: 5px; } .co-tr { right: 5px; top: 5px; scale: -1 1; } .co-bl { left: 5px; bottom: 5px; scale: 1 -1; } .co-br { right: 5px; bottom: 5px; scale: -1 -1; }
.cc-top, .cc-bot { position: absolute; left: 50%; translate: -50% 0; width: 34px; fill: #e4dcc6; filter: drop-shadow(0 0 5px rgba(246, 230, 166, .8)); }
.cc-top { top: -1px; } .cc-bot { bottom: -1px; }
.cc-num { position: absolute; left: 20px; top: 18px; z-index: 3; font: 400 clamp(1rem, 1.7vw, 1.4rem)/1 var(--title); color: #d6ccb2; text-shadow: 0 0 10px rgba(0, 10, 60, .9); }
.cc-ico { position: absolute; right: 18px; top: 16px; z-index: 3; color: #d6ccb2; }
.cc-ico svg { width: clamp(18px, 2vw, 26px); height: auto; filter: drop-shadow(0 0 6px rgba(0, 10, 60, .9)); }
.cc-plate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 14px 26px; text-align: center; }
.cc-plate small { display: block; font: 600 clamp(.5rem, .75vw, .66rem)/1.2 var(--cinzel); letter-spacing: .26em; padding-left: .26em; color: #d6ccb2; text-transform: uppercase; }
.cc-plate b { display: block; margin: .45rem 0 .25rem; font: 700 clamp(.95rem, 1.6vw, 1.38rem)/1.25 var(--serif-b); color: #fff6dc; text-shadow: 0 2px 12px rgba(0, 8, 50, .95); }
.cc-plate em { display: block; font: 500 clamp(.5rem, .75vw, .68rem)/1.3 var(--cinzel); font-style: normal; letter-spacing: .14em; color: #b9cff7; }
.cc-epi { display: flex; align-items: center; justify-content: center; gap: .7em; margin-top: .9rem; font: 700 clamp(1rem, 1.7vw, 1.4rem)/1 var(--serif-b); letter-spacing: .24em; padding-left: .24em;
  background: linear-gradient(180deg, #fff6d0, #e6c870 55%, #b89448); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 2px 6px rgba(0, 8, 50, .9)); }
.cc-epi i { width: clamp(14px, 2.4vw, 34px); height: 1px; background: linear-gradient(90deg, transparent, #e6c870); -webkit-text-fill-color: initial; }
.cc-epi i:last-child { transform: scaleX(-1); }
.cc-go { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: .7em; font: 600 .72rem/1 var(--cinzel); letter-spacing: .34em; padding-left: .34em; color: #d6ccb2; }
.cc-go i { width: 34px; height: 1px; background: currentColor; }
@media (max-width: 720px) {
  .chpage { padding: 96px 12px 60px; }
  .cards { gap: 12px; }
  .ccard { --w: calc(50vw - 18px); }
  .cc-plate { padding: 0 8px 20px; }
  .cc-plate b { font-size: .9rem; }
  .cc-num { left: 14px; } .cc-ico { right: 12px; }
  .co { width: 26px; }
}
@media (hover: none) { .ccard:active .cc-in { transform: rotateY(180deg); } }

/* ==========================================================================
   프로필 — 전신 이미지를 크게
   ========================================================================== */
.pf { position: relative; max-width: 1500px; margin: 0 auto; padding: 96px clamp(16px, 3vw, 48px) 110px; }
.pf-hero { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1rem, 3vw, 3.5rem); align-items: center; min-height: calc(100svh - 120px); }
.pf-info .back { display: inline-block; margin-bottom: 1.4rem; }
.pf-info .role { margin: 0 0 .8rem; color: var(--accent); font: 600 .8rem/1.2 var(--cinzel); letter-spacing: .24em; text-transform: uppercase; }
.pf-info h1 { font: 700 clamp(2rem, 3.8vw, 3.4rem)/1.18 var(--serif-b); font-style: normal; letter-spacing: -.01em; margin-bottom: .4rem; }
.pf-info .en { margin: 0 0 1.1rem; font: 500 .92rem/1.3 var(--cinzel); letter-spacing: .3em; color: var(--muted); text-transform: uppercase; }
.pf-info .epi { display: flex; align-items: center; gap: 12px; margin: 0 0 1.4rem; color: var(--gold); font: 700 1.05rem/1 var(--serif-b); letter-spacing: .3em; }
.pf-info .epi i { height: 1px; width: 56px; background: linear-gradient(90deg, transparent, var(--gold)); }
.pf-info .epi i:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.pf-info blockquote { margin: 0 0 1.6rem; font: 400 1.2rem/1.6 var(--serif-b); font-style: normal; }
.pf-info blockquote::before { content: '“'; margin-right: .1em; color: var(--accent); }
.pf-info blockquote::after { content: '”'; margin-left: .1em; color: var(--accent); }
.pf-art { position: relative; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: zoom-in; height: calc(100svh - 120px); min-height: 460px; }
.pf-art .ring { width: min(88%, 760px); opacity: .35; color: var(--accent); }
.pf-art .art { position: absolute; inset: 0; animation: none; }
.pf-art .art img { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 24px 44px rgba(0, 10, 80, .6)); transition: transform 1s var(--ease); }
.pf-art:hover .art img { transform: scale(1.015); }
.pf-art .zoom { position: absolute; right: 4px; bottom: 6px; padding: .3rem .8rem; font: 600 .74rem/1.4 var(--cinzel); letter-spacing: .12em; color: #dbe8ff; background: rgba(3, 10, 50, .6); border: 1px solid var(--line); border-radius: 99px; opacity: .8; }
.pf-body { max-width: 900px; margin: 3rem auto 0; }
.pf .stats { margin-top: 0; }
.pf .stats .wide { grid-column: 1 / -1; }
.pf .csec h3 { display: flex; align-items: center; gap: .7em; margin-bottom: .9rem; font: 700 1.3rem/1.2 var(--serif-b); font-style: normal; letter-spacing: .1em; }
.pf .csec h3::before { content: ''; width: 8px; height: 8px; rotate: 45deg; background: var(--gold); box-shadow: 0 0 10px var(--gold); flex: none; }
.pf .csec p { color: var(--ink); opacity: .92; }
.trait-list { display: grid; gap: .8rem; }
.trait { position: relative; padding: 1.1rem 1.3rem 1.2rem; border: 1px solid var(--line); border-left: 2px solid var(--gold); border-radius: 4px 12px 12px 4px; background: var(--card); backdrop-filter: blur(6px); }
.trait h4 { font: 700 1rem/1.3 var(--serif-b); font-style: normal; letter-spacing: .12em; color: var(--gold); }
.trait small { display: block; margin: .25rem 0 .55rem; color: var(--accent); font-size: .82rem; }
.trait p { margin: .45rem 0 0; font-size: .96rem; line-height: 1.85; }
.trait small + p { margin-top: 0; }
.trait q { display: block; margin-top: .6rem; font: 600 1.15rem/1.5 var(--serif-b); color: var(--accent); quotes: '“' '”'; }
.pf-pirate .bg-aur { background: radial-gradient(40% 70% at 25% 30%, rgba(90, 190, 255, .5), transparent 70%), radial-gradient(35% 60% at 75% 20%, rgba(70, 120, 255, .45), transparent 70%); }
.pf-knight .bg-aur { background: radial-gradient(40% 70% at 25% 30%, rgba(120, 240, 220, .42), transparent 70%), radial-gradient(35% 60% at 75% 20%, rgba(170, 146, 255, .4), transparent 70%); }
@media (max-width: 860px) {
  .pf { padding-top: 118px; }
  .pf-hero { grid-template-columns: 1fr; min-height: 0; }
  .pf-art { height: 68svh; min-height: 0; }
}

/* ==========================================================================
   AU 게시판 — 어두운 판타지 카드
   ========================================================================== */
.au-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 2.6vw, 2.2rem); perspective: 1400px; }
.au-card { --gx: 50%; --gy: 0%; position: relative; display: flex; flex-direction: column; padding: 22px 20px 22px; text-decoration: none; color: #eef0ff; isolation: isolate; border-radius: 8px;
  background: radial-gradient(120% 70% at 50% 0%, #1a2a78 0%, #090d2e 48%, #04050f 100%); box-shadow: 0 24px 54px rgba(0, 4, 36, .65), 0 0 0 1px rgba(8, 12, 40, .9); transition: transform .5s var(--ease), box-shadow .5s; }
.au-card::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--gx) var(--gy), rgba(190, 220, 255, .22), transparent 55%); opacity: 0; transition: opacity .4s; }
.au-card:hover { transform: translateY(-10px) rotateX(2deg); box-shadow: 0 38px 70px rgba(0, 4, 36, .75), 0 0 38px rgba(110, 160, 255, .28); }
.au-card:hover::before { opacity: 1; }
.au-card > * { position: relative; z-index: 1; }
.au-card .cc-frame { position: absolute; z-index: 3; }
.aug-win { display: block; position: relative; margin: 14px 8px 0; aspect-ratio: 4 / 4.2; overflow: hidden; border-radius: 999px 999px 6px 6px / 70% 70% 6px 6px; background: radial-gradient(90% 70% at 50% 25%, #2c46b8 0%, #0e1a63 55%, #060a2a 100%);
  box-shadow: inset 0 0 0 1.5px rgba(208, 197, 169, .85), inset 0 0 40px rgba(0, 4, 40, .7), 0 0 0 4px rgba(4, 6, 24, .9), 0 0 0 5px rgba(208, 197, 169, .35); }
.aug-win::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .5) 0 1px, transparent 2px) 0 0 / 38px 44px, radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .4) 0 1px, transparent 2px) 0 0 / 52px 46px; opacity: .55; }
.aug-win .au-tok { position: absolute; inset: 0; z-index: 1; display: grid; place-items: end center; aspect-ratio: auto; }
.aug-win .au-tok img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.au-ph { display: flex; align-items: flex-end; justify-content: center; gap: 4%; width: 100%; height: 86%; color: rgba(190, 210, 255, .5); }
.au-ph .sil { width: 34%; height: 100%; }
.aug-body { display: grid; gap: .55rem; padding: 1.1rem .5rem .2rem; text-align: center; }
.au-card h2 { font: 400 clamp(2rem, 2.6vw, 2.5rem)/1.05 var(--title); letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 14px rgba(110, 160, 255, .5); }
.aug-tags { margin: 0; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; color: #d0c5a9; font: 500 .8rem/1.6 var(--serif-b); letter-spacing: -.02em; }
.aug-tags i { color: #a89d82; font-style: normal; font-size: .55rem; opacity: .9; }
.au-desc { margin: 0; color: #c3cdf0; font: 400 .84rem/1.75 var(--serif-b); letter-spacing: -.02em; }
.au-cast { display: grid; gap: .25rem; margin-top: .2rem; padding-top: .7rem; border-top: 1px solid rgba(208, 197, 169, .3); }
.au-cast > span { display: block; font-size: .76rem; line-height: 1.5; }
.au-cast b { color: #f3ecd2; font-weight: 500; } .au-cast em { display: block; color: #8fa0d8; font-style: normal; letter-spacing: -.02em; }
.au-n { margin-top: .3rem; color: #d0c5a9; font: 600 .68rem/1 var(--cinzel); letter-spacing: .2em; }
.au-n i { font-style: normal; font-size: .5rem; margin: 0 .3em; }
.au-head { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; margin: 0 0 2.6rem; padding: clamp(1.2rem, 2.4vw, 2rem); border-radius: 8px; background: radial-gradient(120% 90% at 20% 0%, #172680 0%, #080c2c 55%, #04050f 100%); box-shadow: 0 24px 54px rgba(0, 4, 36, .6), inset 0 0 0 1px rgba(208, 197, 169, .5); }
.au-head .aug-win { margin: 6px 6px 0; }
.au-head h1 { font: 400 clamp(2.6rem, 5vw, 4.4rem)/1.05 var(--display); color: #fff; }
.au-head .aug-tags { justify-content: flex-start; margin: .8rem 0 1rem; }
.au-head .au-desc { font-size: .98rem; max-width: 36em; }
.au-head .au-cast { margin-top: 1.1rem; max-width: 30em; }
.au-tabs { display: flex; gap: .6rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.au-tabs button { padding: .6rem 1.4rem; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: 700 1.05rem/1 var(--serif-b); }
.au-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--accent); }
.au-tabs small { opacity: .7; margin-left: .3em; }
.au-story { margin-bottom: 1.2rem; padding: 1.6rem 1.8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); backdrop-filter: blur(6px); }
.au-story header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .8rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.au-story h3 { font: 700 1.3rem/1.3 var(--serif-b); font-style: normal; }
.au-story time { color: var(--muted); font-size: .85rem; }
.au-body { max-width: 40em; }
@media (max-width: 700px) { .au-head { grid-template-columns: 1fr; } .au-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } .au-card { padding: 16px 12px; } .au-card h2 { font-size: 1.5rem; } .au-desc, .au-cast { display: none; } }
@media (max-width: 480px) { .au-grid { grid-template-columns: 1fr; } .au-desc, .au-cast { display: block; } }

/* 라이트박스 확대 (이미지를 누르면 원본 크기로) */
.lb-stage img { cursor: zoom-in; }
#lightbox.zoom { align-items: flex-start; justify-content: flex-start; overflow: auto; padding: 0; }
#lightbox.zoom figure { max-width: none; }
#lightbox.zoom .lb-stage img { max-width: none; max-height: none; width: auto; border-radius: 0; cursor: zoom-out; }
#lightbox.zoom figcaption, #lightbox.zoom .lb-n { display: none; }
#lightbox.zoom .lb-x { position: fixed; z-index: 2; }

/* ==========================================================================
   폰트: KoPub바탕 Medium (카드 뒷면 대사)
   ========================================================================== */
@font-face { font-family: 'Makcasa'; font-weight: 400; font-style: normal; font-display: swap; src: url(../assets/fonts/Makcasa-Regular.woff2) format('woff2'); }
@font-face { font-family: 'KoPub Batang Medium'; font-weight: 500; font-style: normal; font-display: swap; src: url(../assets/fonts/KoPubBatang-Medium.subset.woff2) format('woff2'); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   배경 — 메인.psd 레이어 그대로 (하늘/오로라 → 달(screen) → 바다)
   3840×2160 캔버스를 화면을 덮도록(cover) 맞추고 퍼센트 좌표로 올렸어요.
   ========================================================================== */
:root { --sw: max(100vw, calc(100svh * 16 / 9)); }
#bgstage { position: fixed; inset: 0; z-index: -3; overflow: hidden; background: #06194f; }
.bs-in { position: absolute; left: 50%; top: 50%; width: var(--sw); aspect-ratio: 16 / 9; translate: -50% -50%; }
.bs-in img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.bs-base { left: 0; top: 0; width: 100%; height: 100%; }
.bs-moon { left: 31.1198%; top: -30.2778%; width: 39.2708%; mix-blend-mode: screen; animation: moonin 3.2s var(--ease) both, moonbreath 9s ease-in-out 3.2s infinite; }
.bs-sea { left: 0; top: 31.2037%; width: 100%; }
@keyframes moonin { from { opacity: 0; } to { opacity: 1; } }
@keyframes moonbreath { 50% { opacity: .9; scale: 1.012; } }
#veil { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(3, 16, 76, .42) 0%, rgba(3, 20, 88, .6) 45%, rgba(3, 20, 88, .72) 100%); transition: opacity .8s; }
body[data-route="home"] #veil { opacity: 0; }
body { background: #06194f; }

/* 페이지 전환 */
#app { transition: opacity .16s ease; }
#app.out { opacity: 0; }

/* ==========================================================================
   홈 — PSD 구성 그대로 (달 / 제목 / 작은 글씨)
   ========================================================================== */
@media (min-width: 0px) { html:has(body[data-route="home"]), body[data-route="home"] { overflow: hidden; } }
.hm2 { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.hm2-title { position: absolute; left: 50%; top: 50%; width: calc(var(--sw) * .39479); translate: -50% 0; margin-top: calc(var(--sw) * -.07448); max-width: none; user-select: none;
  filter: drop-shadow(0 3px 5px rgba(0, 14, 80, .55)) drop-shadow(0 10px 28px rgba(0, 20, 110, .55)); animation: titlein 2.4s var(--ease) .5s both; }
.hm2-sub { position: absolute; left: 50%; top: 50%; translate: -50% 0; margin: 0; margin-top: calc(var(--sw) * .07942); width: max-content; text-align: center; color: #fff;
  font: 400 calc(var(--sw) * 35 / 3840)/1.35 'Noto Serif KR', 'Gowun Batang', serif; letter-spacing: -.075em; text-shadow: 0 2px 4px rgba(0, 14, 80, .6), 0 4px 18px rgba(0, 20, 110, .55); animation: subin 2s var(--ease) 1.5s both; }
@keyframes titlein { from { opacity: 0; filter: blur(14px) drop-shadow(0 3px 5px rgba(0, 14, 80, .55)); transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes subin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .hm2-title { --tw: min(88vw, 560px); width: var(--tw); top: 34%; margin-top: 0; }
  .hm2-sub { top: calc(34% + var(--tw, 88vw) * .3285 + 22px); margin-top: 0; font-size: 11px; letter-spacing: -.06em; }
  .hm2 { --tw: min(88vw, 560px); }
}

/* ==========================================================================
   프로필 카드 — 앞면 위쪽 문구 / 뒷면(타로카드 뒷면 같은 나침반·달 무늬 + 대사)
   ========================================================================== */
.cc-epit { position: absolute; left: 0; right: 0; top: clamp(34px, 11%, 52px); z-index: 3; text-align: center; color: #fff; font: 500 clamp(.72rem, 1.05vw, .92rem)/1 var(--serif-b); letter-spacing: .5em; padding-left: .5em; text-shadow: 0 1px 8px rgba(0, 8, 60, .95), 0 0 16px rgba(0, 8, 60, .7); }
.cc-back { background: #04060f; }
.cb-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cb-svg text { font-family: 'Instrument Serif', 'Cormorant Garamond', serif; }
.cb-quote { position: absolute; left: 14%; right: 14%; top: 63%; display: block; quotes: none; text-align: center; color: #f6ecd0; font: 500 clamp(.82rem, calc(var(--w) * .052), 1.12rem)/1.75 var(--kopub); letter-spacing: -1px; word-break: keep-all; text-wrap: balance; text-shadow: 0 1px 10px rgba(0, 4, 30, .9); }
@media (max-width: 720px) { .cb-quote { font-size: .74rem; left: 11%; right: 11%; } }

/* ==========================================================================
   TRPG — 영화 포스터 전시관
   ========================================================================== */
.pst-page { max-width: 1320px; }
.pst-head { margin-bottom: clamp(2.4rem, 5vw, 4rem); text-align: center; }
.pst-eye { margin: 0 0 .6rem; color: #fff; opacity: .85; font: 600 .78rem/1 var(--cinzel); letter-spacing: .6em; padding-left: .6em; }
.pst-head h1 { font-family: var(--display); font-weight: 400; letter-spacing: .005em; font-size: clamp(3.4rem, 8vw, 6.8rem); color: #fff; text-shadow: 0 0 40px rgba(130, 190, 255, .5); }
.pst-head .sub { margin: 1rem auto 0; max-width: 34em; color: #dce9ff; }
.posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(210px, 22vw, 290px), 1fr)); gap: clamp(2rem, 4vw, 3.4rem) clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
.poster { position: relative; display: block; text-decoration: none; color: #fff; opacity: 0; animation: pstin .9s var(--ease) calc(var(--i) * 110ms + .1s) both; }
@keyframes pstin { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
.poster::before { content: ''; position: absolute; inset: -14% -18% 18% -18%; z-index: -1; background: radial-gradient(ellipse 50% 46% at 50% 42%, rgba(190, 225, 255, .38), transparent 100%); opacity: .55; transition: opacity .6s; pointer-events: none; }
.poster:hover::before, .poster:focus-visible::before { opacity: 1; }
  .pst-frame { display: block; border-radius: 3px; overflow: hidden; box-shadow: 0 26px 50px rgba(0, 8, 50, .55); transition: translate .6s var(--ease), box-shadow .6s; }
.poster:hover .pst-frame, .poster:focus-visible .pst-frame { translate: 0 -10px; box-shadow: 0 40px 70px rgba(0, 8, 50, .6), 0 0 40px rgba(180, 220, 255, .3); }
.pst-img { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: #0a1a5e; isolation: isolate; }
.pst-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: scale 1.2s var(--ease), filter .6s; }
.poster:hover .pst-img img { scale: 1.05; }
.pst-img.land::before { content: ''; position: absolute; inset: -12%; z-index: -1; background: var(--u) center / cover; filter: blur(22px) brightness(.7) saturate(1.2); }
.pst-img.land img { object-fit: contain; object-position: 50% 50%; }
.pst-img .ph { position: absolute; inset: 0; height: 100%; aspect-ratio: auto !important; }
.pst-gloss { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 60%) -120% 0 / 250% 100% no-repeat; transition: background-position 1.1s var(--ease); }
.poster:hover .pst-gloss { background-position: 120% 0; }
.pst-label { display: grid; gap: .25rem; margin-top: 1rem; padding: 0 .2rem; text-align: center; }
.pst-label small { color: #bcd2ff; font: 600 .68rem/1.4 var(--cinzel); letter-spacing: .2em; text-transform: uppercase; }
.pst-label b { font: 400 clamp(1.5rem, 2.2vw, 1.95rem)/1.15 var(--title); letter-spacing: -.01em; }
.pst-label em { color: #dce9ff; font: 400 .86rem/1.6 var(--serif-b); font-style: normal; letter-spacing: -.02em; opacity: .85; }
.pst-go { margin-top: .5rem; justify-self: center; color: #fff; font: 600 .68rem/1 var(--cinzel); letter-spacing: .3em; padding: .55rem 1rem .55rem 1.3rem; border: 1px solid rgba(255, 255, 255, .55); border-radius: 99px; opacity: 0; translate: 0 -6px; transition: opacity .4s, translate .5s var(--ease), background .3s, color .3s; }
.poster:hover .pst-go, .poster:focus-visible .pst-go { opacity: 1; translate: 0 0; }
.pst-go:hover { background: #fff; color: #0a2a80; }
@media (hover: none) { .pst-go { opacity: 1; translate: 0 0; } }
@media (max-width: 560px) { .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem .9rem; } .pst-label b { font-size: 1.25rem; } .pst-label em { display: none; } }

/* ==========================================================================
   프로필 본문 — Wix 프로필 레이아웃 (가운데 한 줄 기둥, 가운데 정렬 소제목, 양쪽 맞춤 본문)
   ========================================================================== */
.pf-info .meta { margin: 0 0 1.2rem; color: #dce9ff; font: 400 .92rem/1.6 var(--serif-b); letter-spacing: -.02em; }
.pf-info .epi { color: #fff; }
.pf-doc { max-width: 760px; margin: clamp(3rem, 7vw, 5.5rem) auto 0; text-align: center; }
.d-h2 { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin: clamp(3rem, 6vw, 4.6rem) 0 1.6rem; font: 400 clamp(2rem, 3.4vw, 2.7rem)/1.1 var(--title); color: #fff; letter-spacing: -.01em; text-shadow: 0 2px 16px rgba(0, 10, 80, .6); }
.d-h2::before, .d-h2::after { content: ''; flex: 0 1 70px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6)); }
.d-h2::after { transform: scaleX(-1); }
.d-tags { display: flex; flex-direction: column; gap: .35rem; margin: 2.4rem 0 .4rem; }
.d-tags li { font: 400 1.45rem/1.3 var(--serif-b); color: #fff; letter-spacing: -.02em; }
.d-trait { margin: 2.2rem 0 1.1rem; }
.d-trait h3 { font: 700 1.2rem/1.4 var(--serif-b); letter-spacing: -.02em; color: #fff; }
.d-hash { margin: .3rem 0 0; color: #9fc4ff; font: 400 .9rem/1.6 var(--serif-b); letter-spacing: -.02em; }
.d-p { margin: 0 0 1.5rem; text-align: left; word-break: keep-all; overflow-wrap: break-word; color: #e8f0ff; font: 400 clamp(.96rem, 1.15vw, 1.04rem)/2.05 var(--serif-b); letter-spacing: -.02em; text-indent: 1em; }
.d-li { text-indent: 0; padding-left: 1.1em; position: relative; }
.d-li::before { content: '–'; position: absolute; left: 0; color: #9fc4ff; }
.d-c { margin: 0 0 1.4rem; color: #e8f0ff; font: 400 1rem/1.95 var(--serif-b); letter-spacing: -.02em; }
.d-chap { margin: 3rem 0 1.4rem; font: 700 1.05rem/1.4 var(--serif-b); color: #9fc4ff; letter-spacing: .02em; text-align: left; }
.d-num { margin: 2rem 0 .8rem; color: #9fc4ff; font: 400 1.4rem/1 var(--title); }
.d-script { margin: .4rem 0 1.6rem; color: #fff; font: 400 clamp(1.1rem, 2vw, 1.5rem)/1.6 'Gowun Batang', var(--serif-b); font-style: italic; letter-spacing: -.02em; text-shadow: 0 2px 16px rgba(0, 10, 80, .6); }
.d-attr { margin: -.6rem 0 2rem; color: #b9cff7; font-size: .9rem; }
.d-mon { display: grid; justify-items: center; gap: .25rem; margin: 3.2rem 0 1.6rem; }
.d-mon svg { width: 26px; fill: #fff; opacity: .9; margin-bottom: .4rem; }
.d-mon h3 { font: 400 clamp(2rem, 3.4vw, 2.7rem)/1.1 var(--title); color: #fff; text-shadow: 0 2px 16px rgba(0, 10, 80, .6); }
.d-alt { font: 400 1.1rem/1.2 'Noto Serif KR', serif; color: #cfe0ff; }
.d-kind { margin-top: .3rem; padding: .2rem 1rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: 99px; font: 500 .8rem/1.6 var(--serif-b); letter-spacing: .3em; padding-left: 1.3rem; }
.d-rel { margin-top: 3rem; text-align: left; }
.d-relitem { margin: 0 0 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); backdrop-filter: blur(6px); }
.d-relitem b { color: #fff; font: 700 1rem/1.5 var(--serif-b); } .d-relitem p { margin: .3rem 0 0; font-size: .92rem; line-height: 1.9; color: #dce9ff; }
.pf-doc .pairnav { text-align: left; }
@media (max-width: 600px) { .d-p { text-align: left; text-indent: 0; } }

/* ==========================================================================
   v6 — 포인트 금색(채도↓ 명도↑) / 제목 폰트 / 카드 / 서사 / AU / 프로필
   ========================================================================== */
:root { --g1: #d0c5a9; --g2: #efe7d2; --g3: #9a8f74; }
[hidden] { display: none !important; }
.phead .eyebrow { margin: 0 0 .7rem; color: #fff; opacity: .85; font: 600 .78rem/1 var(--cinzel); letter-spacing: .6em; padding-left: .6em; }
.pst-head.phead { max-width: none; text-align: center; }
.pst-head .rule { display: none; }
.pst-head .sub { margin-inline: auto; }
.phead .sub { white-space: pre-line; }

/* 프로필 선택 제목도 Makcasa */
.c-head h1 { font: 400 clamp(3.4rem, 7.4vw, 6.4rem)/1 var(--display); letter-spacing: 0; color: #fff; text-shadow: 0 2px 6px rgba(0, 12, 70, .6), 0 0 30px rgba(120, 180, 255, .4); }

/* ---------- 카드 앞면 ---------- */
.cc-front { background: #05070f; }
.cc-pirate .cc-bg, .cc-knight .cc-bg { background: radial-gradient(120% 80% at 50% 28%, #141c3d 0%, #070a17 62%, #04050b 100%); }
.cf-svg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cc-front .cc-shade { background: linear-gradient(180deg, rgba(3, 4, 12, .6) 0%, rgba(3, 4, 12, .1) 20%, transparent 50%, rgba(3, 4, 12, .92) 88%, rgba(3, 4, 12, .98) 100%); }
.cc-art img { object-position: 50% 8%; }
.cc-epit { top: 12.6%; font-size: clamp(.68rem, .95vw, .84rem); }
.cc-plate { padding: 0 14% calc(var(--w) * 1.55 * .085); }
.cc-plate small { font: 400 clamp(.72rem, 1vw, .92rem)/1.2 var(--display); letter-spacing: .08em; padding-left: 0; text-transform: none; color: var(--g1); }
.cc-plate b { margin: .35rem 0 .3rem; color: #fff; }
.cc-plate em { font: 400 clamp(.74rem, 1.05vw, .95rem)/1.2 var(--display); letter-spacing: .06em; color: #c9d2ea; }

/* ---------- 카드 뒷면 ---------- */
.cc-back { background: #04050b; }
.cb-quote { top: 72.5%; height: 15%; display: flex; align-items: center; justify-content: center; left: 15%; right: 15%; color: var(--g2); }

/* ---------- 프로필 : 한마디 → 전신(가로 전체) → 이름 ---------- */
.pf { max-width: none; padding: 92px 0 110px; }
.pf-back { position: absolute; left: clamp(16px, 4vw, 56px); top: 96px; z-index: 2; }
.pf-top { display: grid; justify-items: center; gap: 1.1rem; padding: clamp(46px, 7vw, 96px) max(16px, 6vw) 0; text-align: center; }
.pf-spark { width: 22px; fill: #fff; opacity: .92; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .7)); }
.pf-spark.sm { width: 16px; }
.pf-quote { max-width: 22em; color: #fff; font: 500 clamp(1.55rem, 3.4vw, 2.9rem)/1.5 var(--kopub); letter-spacing: -1px; text-wrap: balance; word-break: keep-all; text-shadow: 0 2px 22px rgba(0, 10, 80, .65); }
.pf-full { display: block; width: 100%; max-width: 1600px; margin: clamp(1.2rem, 3vw, 2.6rem) auto 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pf-full img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0, 8, 60, .5)); }
.pf-full .art { height: 70vh; }
.pf-name { display: grid; justify-items: center; gap: .45rem; margin-top: clamp(1.4rem, 3vw, 2.4rem); padding: 0 16px; text-align: center; }
.pf-name .epi { margin: .3rem 0 0; color: var(--g1); font: 500 .95rem/1 var(--serif-b); letter-spacing: .5em; padding-left: .5em; }
.pf-name h2 { color: #fff; font: 700 clamp(2rem, 4vw, 3.2rem)/1.2 var(--serif-b); letter-spacing: -.01em; text-shadow: 0 2px 18px rgba(0, 10, 80, .6); }
.pf-name .en { margin: 0; color: #dce6ff; font: 400 clamp(1.3rem, 2.3vw, 1.85rem)/1.2 var(--display); letter-spacing: .03em; }
.pf-name .meta { margin: .2rem 0 0; color: #c9d6f5; font: 400 .95rem/1.6 var(--serif-b); letter-spacing: -.02em; }
.pf-doc { max-width: calc(760px + 2 * clamp(18px, 4vw, 48px)); padding: 0 clamp(18px, 4vw, 48px); margin-top: clamp(2.4rem, 6vw, 4.6rem); }

/* ---------- 서사 : 목차형, 왼쪽 정렬 한 덩어리 ---------- */
.toc { list-style: none; margin: 0; padding: 0; max-width: 980px; display: grid; gap: clamp(3.6rem, 7vw, 6.2rem); }
.toc-it { position: relative; display: grid; grid-template-columns: clamp(76px, 10.5vw, 146px) minmax(0, 1fr); gap: 0 clamp(1.2rem, 3vw, 2.8rem); opacity: 0; translate: 0 22px; transition: opacity .9s, translate 1s var(--ease); }
.toc-it.in { opacity: 1; translate: 0 0; }
.toc-n { display: grid; justify-items: center; align-content: start; gap: .6rem; padding-top: .15rem; color: #fff; }
.toc-n b { font: 800 clamp(3rem, 6.4vw, 5.4rem)/.86 'Bodoni Moda', 'Playfair Display', 'Times New Roman', serif; letter-spacing: -.02em; text-shadow: 0 4px 26px rgba(0, 10, 80, .5); }
.toc-n i { width: 1px; height: 36px; background: rgba(255, 255, 255, .75); }
.toc-n small { color: #dce6ff; font: 700 .76rem/1.3 'Bodoni Moda', 'Noto Serif KR', serif; letter-spacing: .1em; text-align: center; }
.toc-main { min-width: 0; }
.toc-t { position: relative; padding: .95rem 2.4rem 1.05rem; text-align: center; }
.toc-t::before, .toc-t::after { content: ''; position: absolute; width: 16px; height: 34px; border: 1px solid rgba(255, 255, 255, .85); }
.toc-t::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.toc-t::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.toc-t h2 { color: #fff; font: 500 clamp(1.45rem, 2.7vw, 2.2rem)/1.3 var(--serif-b); letter-spacing: .05em; text-wrap: balance; }
.toc-en { margin: .4rem 0 0; color: #dce6ff; font: 600 .68rem/1.4 var(--cinzel); letter-spacing: .38em; padding-left: .38em; text-transform: uppercase; }
.toc-sum { margin: 1.1rem 0 0; color: #e8eeff; text-align: center; font: 500 .95rem/1.8 var(--serif-b); letter-spacing: -.01em; }
.toc-rule { display: flex; justify-content: flex-end; min-height: 1px; margin: 1.15rem 0 1.7rem; padding-top: .55rem; border-top: 1px solid rgba(255, 255, 255, .6); color: #dce6ff; font: 600 .78rem/1 var(--serif-b); letter-spacing: .04em; }
.toc-body { color: #e8f0ff; font: 400 clamp(1rem, 1.12vw, 1.06rem)/2.1 var(--serif-b); letter-spacing: -.015em; }
.toc-body p { margin: 0 0 1.25em; text-indent: 1em; text-align: left; word-break: keep-all; overflow-wrap: break-word; }
.toc-body:not(.open) { max-height: 12.6em; overflow: hidden; }
.toc-body.clip:not(.open) { -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.toc-more { margin-top: .6rem; padding: .55rem 1.3rem; border: 1px solid rgba(255, 255, 255, .55); border-radius: 99px; background: none; color: #fff; font: 600 .82rem/1 var(--serif-b); letter-spacing: .08em; transition: background .3s, color .3s; }
.toc-more:hover { background: #fff; color: #0a2a80; }
@media (max-width: 640px) {
  .toc-it { grid-template-columns: 1fr; }
  .toc-n { grid-auto-flow: column; justify-content: start; align-items: center; margin-bottom: 1rem; }
  .toc-n i { width: 28px; height: 1px; }
  .toc-t { padding-inline: 1.6rem; }
  .toc-body p { text-align: left; }
}

/* ---------- AU : 심플한 검정 카드 ---------- */
.au-grid { perspective: none; }
.au-card { padding: 12px 12px 18px; border-radius: 16px; background: #0b0d16; border: 1px solid rgba(208, 197, 169, .2); box-shadow: 0 18px 40px rgba(0, 3, 20, .5); transition: transform .5s var(--ease), border-color .4s, box-shadow .5s; }
.au-card::before { display: none; }
.au-card:hover { transform: translateY(-6px); border-color: rgba(208, 197, 169, .5); box-shadow: 0 26px 50px rgba(0, 3, 20, .6); }
.au-img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 11px; background: #161b2b; }
.au-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.au-img .au-ph { position: absolute; inset: 14% 0 0; height: auto; color: rgba(190, 200, 230, .28); }
.aug-body { gap: .5rem; padding: 1rem .35rem 0; text-align: left; }
.au-card h2 { color: #fff; font: 400 clamp(1.8rem, 2.3vw, 2.2rem)/1.05 var(--display); text-shadow: none; }
.aug-tags { justify-content: flex-start; gap: .1rem .75rem; color: var(--g1); font: 500 .82rem/1.6 var(--serif-b); }
.au-desc { color: #b4bad0; }
.au-n { display: flex; gap: .9rem; margin-top: .2rem; color: #7f859c; font: 500 .76rem/1 var(--serif-b); letter-spacing: 0; }
.au-head { grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); border-radius: 18px; background: #0b0d16; box-shadow: 0 18px 40px rgba(0, 3, 20, .5); border: 1px solid rgba(208, 197, 169, .2); }
.au-head h1 { font-family: var(--display); }
@media (max-width: 700px) { .au-card { padding: 10px 10px 14px; } .au-card h2 { font-size: 1.45rem; } }
@media (max-width: 480px) { .au-desc { display: block; } }

/* ==========================================================================
   편집 모드
   ========================================================================== */
.ed-btn { display: none; }
body.ed-on .ed-host { outline: 1px dashed rgba(255, 255, 255, .28); outline-offset: 5px; }
body.ed-on .ed-btn { position: absolute; top: 8px; right: 8px; z-index: 30; display: inline-flex; align-items: center; padding: .34rem .75rem; border-radius: 99px; background: rgba(255, 255, 255, .94); color: #0b1f6e; font: 700 .74rem/1.2 'Noto Serif KR', serif; letter-spacing: 0; text-shadow: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); cursor: pointer; pointer-events: auto; }
body.ed-on .ed-btn:hover { background: #fff; }
body.ed-on .hm2 { pointer-events: none; }
body.ed-on .hm2 .ed-btn { top: auto; bottom: 90px; right: 50%; translate: 50% 0; }
body.ed-on .ccard .ed-btn { top: -14px; right: -10px; }
body.ed-on .cc-in { pointer-events: auto; }
.ed-add { display: inline-flex; margin: 0 0 1.6rem; padding: .65rem 1.25rem; border: 1px dashed rgba(255, 255, 255, .7); border-radius: 99px; background: rgba(255, 255, 255, .07); color: #fff; font: 700 .9rem/1 var(--serif-b); }
.ed-add:hover { background: rgba(255, 255, 255, .16); }
#ed-bar { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; gap: 4px; padding: 5px; border-radius: 99px; background: rgba(6, 10, 30, .9); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); }
#ed-bar button, #ed-bar a { padding: .55rem .95rem; border: 0; border-radius: 99px; background: none; color: #fff; font: 700 .8rem/1 'Noto Serif KR', serif; text-decoration: none; }
#ed-bar [aria-pressed="true"] { background: #fff; color: #0b1f6e; }
#ed-toast { position: fixed; left: 50%; bottom: 84px; z-index: 300; max-width: calc(100vw - 32px); padding: .7rem 1.2rem; border-radius: 12px; background: #0d1a52; color: #fff; font: 600 .86rem/1.5 'Noto Serif KR', serif; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); opacity: 0; translate: -50% 16px; pointer-events: none; transition: opacity .3s, translate .4s var(--ease); }
#ed-toast.on { opacity: 1; translate: -50% 0; }
#ed-toast.bad { background: #6a1426; }
.ed-dlg { width: min(780px, calc(100vw - 20px)); max-width: none; max-height: calc(100svh - 20px); padding: 0; border: 0; border-radius: 16px; background: #f6f7fb; color: #151a33; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.ed-dlg::backdrop { background: rgba(2, 4, 16, .62); }
.ed-form { display: flex; flex-direction: column; max-height: calc(100svh - 20px); }
.ed-hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px 18px 14px 22px; border-bottom: 1px solid #dfe3ee; }
.ed-hd h2 { color: #151a33; font: 700 1.08rem/1.3 'Noto Serif KR', serif; letter-spacing: 0; }
.ed-x { width: 36px; height: 36px; border: 0; border-radius: 9px; background: none; color: #5a6180; font-size: 1.6rem; line-height: 1; }
.ed-x:hover { background: #e7eaf3; }
.ed-note { margin: 12px 22px 0; color: #4a5275; font-size: .84rem; }
.ed-body { display: grid; gap: 16px; padding: 18px 22px 22px; overflow: auto; }
.ed-f { display: grid; gap: 6px; margin: 0; }
.ed-l { color: #343c60; font: 700 .82rem/1.3 'Noto Serif KR', serif; }
.ed-h { color: #6b7290; font-size: .76rem; line-height: 1.65; }
.ed-f input[type="text"], .ed-f textarea, .ad-login input { width: 100%; padding: .62rem .78rem; border: 1px solid #cdd3e4; border-radius: 9px; background: #fff; color: #151a33; font: 400 .93rem/1.6 'Noto Serif KR', serif; }
.ed-f textarea { resize: vertical; min-height: 4.6em; }
.ed-long textarea, .ed-doc textarea { min-height: 20em; font-size: .9rem; line-height: 1.8; }
.ed-f input:focus, .ed-f textarea:focus, .ad-login input:focus { outline: 2px solid #3553d6; outline-offset: 0; border-color: transparent; }
.ed-row { grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; }
.ed-row input { width: 18px; height: 18px; }
.ed-img { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.ed-pv { display: grid; place-items: center; width: 96px; height: 96px; overflow: hidden; border-radius: 10px; background: #e5e8f2; color: #8a90a8; font-size: .72rem; }
.ed-pv img { width: 100%; height: 100%; object-fit: cover; }
.ed-imgc { display: grid; gap: 8px; min-width: 0; }
.ed-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-sm { padding: .52rem .95rem; border: 1px solid #2f4bc8; border-radius: 8px; background: #2f4bc8; color: #fff; font: 700 .8rem/1 'Noto Serif KR', serif; }
.ed-sm.ghost { background: #fff; color: #2f4bc8; }
.ed-sm:disabled, .ed-save:disabled { opacity: .55; cursor: progress; }
.ed-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ed-th { position: relative; width: 86px; height: 112px; overflow: hidden; border-radius: 8px; background: #e5e8f2; }
.ed-th img { width: 100%; height: 100%; object-fit: cover; }
.ed-th b { position: absolute; left: 4px; top: 4px; padding: 0 .4rem; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .7rem; }
.ed-th span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 2px; padding: 3px; background: rgba(255, 255, 255, .88); }
.ed-th button { width: 24px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: none; color: #151a33; font-size: .9rem; }
.ed-th button:hover { background: #dfe3ee; }
.ed-none { color: #8a90a8; font-size: .82rem; }
.ed-sub { display: grid; gap: 8px; justify-items: start; }
.ed-item { justify-self: stretch; padding: 0 14px 14px; border: 1px solid #d7dbe8; border-radius: 10px; background: #fff; }
.ed-item:not([open]) { padding-bottom: 0; }
.ed-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 10px 0; cursor: pointer; color: #151a33; font-size: .88rem; }
.ed-item .ed-f { margin-top: 10px; }
.ed-ia { display: flex; gap: 4px; flex: none; }
.ed-ia button { padding: .28rem .55rem; border: 1px solid #cdd3e4; border-radius: 6px; background: #fff; color: #343c60; font-size: .76rem; }
.ed-err { margin: 0 22px 10px; color: #c0304a; font-size: .85rem; }
.ed-ft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid #dfe3ee; }
.ed-sp { flex: 1; }
.ed-mv { display: flex; gap: 6px; }
.ed-save { padding: .68rem 1.5rem; border: 0; border-radius: 9px; background: #14204f; color: #fff; font: 700 .9rem/1 'Noto Serif KR', serif; }
.ed-del { padding: .62rem 1rem; border: 1px solid #d0425b; border-radius: 9px; background: #fff; color: #c0304a; font: 700 .82rem/1 'Noto Serif KR', serif; }
.ad-page .phead { max-width: 820px; }
.ad-page .phead .sub b { color: #fff; }
.ad-box { display: grid; gap: 1rem; max-width: 820px; padding: 1.4rem 1.5rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; background: rgba(4, 8, 30, .6); }
.ad-box p { margin: 0; }
.ad-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-login { display: grid; gap: 10px; max-width: 360px; }
.ad-login label { display: grid; gap: 6px; color: #fff; }
.ad-login .ed-err { margin: 0; color: #ffb3c0; }
.ad-tx { width: 100%; padding: .6rem; border-radius: 9px; font: .8rem/1.5 ui-monospace, monospace; }
@media (max-width: 560px) { .ed-img { grid-template-columns: 72px minmax(0, 1fr); } .ed-pv { width: 72px; height: 72px; } #ed-bar { left: 16px; right: 16px; justify-content: center; } }

/* ---------- v7 만화: 스크롤 모드는 이미지 사이 여백 없이 ---------- */
.comic-view .cpage { margin: 0 auto; background: none; line-height: 0; }
.comic-view .cpage img { width: 100%; height: auto; max-height: none; vertical-align: top; }
.comic-view.paged .cpage { margin-bottom: .6rem; }
.comic-view.paged .cpage img { width: auto; max-width: 100%; max-height: none; margin: 0 auto; }

/* ---------- v7 AU : 하얀 카드 ---------- */
.au-card { background: #fbfcff; color: #1b2142; border: 0; box-shadow: 0 18px 40px rgba(0, 6, 40, .35); }
.au-card:hover { border-color: transparent; box-shadow: 0 26px 54px rgba(0, 6, 40, .45); }
.au-img { background: #e9edf7; }
.au-img .au-ph { color: rgba(40, 60, 120, .22); }
.au-card h2 { color: #121735; }
.au-card .aug-tags { color: #8a7a55; }
.au-desc { color: #4d5573; }
.au-n { color: #8b90a6; }
.au-head { background: #fbfcff; color: #1b2142; border: 0; box-shadow: 0 18px 40px rgba(0, 6, 40, .35); }
.au-head h1 { color: #121735; text-shadow: none; }
.au-head .aug-tags { color: #8a7a55; }
.au-head p, .au-head .au-desc { color: #4d5573; }

/* ---------- v7 TRPG 가로 포스터도 꽉 채우기 / 카드 칭호 위로 ---------- */
.pst-img.land::before { display: none; }
.pst-img.land img { object-fit: cover; object-position: 50% 50%; }
.cc-epit { top: 10.2%; }

/* ---------- v7 프로필: 성장 전 / 성장 후 두 줄 ---------- */
.c-row + .c-row { margin-top: clamp(2.6rem, 6vw, 4.6rem); }
.c-rowlab { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 0 clamp(1rem, 2.4vw, 1.6rem); color: #fff; font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1 var(--display); letter-spacing: .02em; text-shadow: 0 2px 10px rgba(0, 12, 70, .6); }
.c-rowlab::before, .c-rowlab::after { content: ''; width: clamp(40px, 8vw, 90px); height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6)); }
.c-rowlab::after { transform: scaleX(-1); }
.c-row:nth-child(n+3) .ccard { animation-delay: .5s; }
.c-row:nth-child(n+3) .ccard + .ccard { animation-delay: .8s; }

/* ---------- v7 로그: Roll20 변환 요소 · 프로필 사진 ---------- */
.av img.bust { object-position: 50% 12%; transform: scale(1.5); transform-origin: 50% 0; }
.av span { font: 600 1rem/1 var(--serif-b); color: #fff; }
.side-gm .nm { display: flex; align-items: center; gap: .5rem; }
.side-gm .nm .av { display: grid; flex: 0 0 26px; width: 26px; height: 26px; }
.side-gm .nm .av span { font-size: .72rem; }
.scene { flex-wrap: wrap; text-align: center; }
.scene small { flex-basis: 100%; order: -1; margin-bottom: .5rem; color: rgba(220, 232, 255, .7); font: 600 .72rem/1 var(--cinzel); letter-spacing: .3em; }
.scene:has(small)::before, .scene:has(small)::after { display: none; }
.scene span { flex: 0 1 auto; }
.scene:has(small) span { flex-basis: 100%; color: #fff; font: 500 clamp(1.2rem, 2.2vw, 1.5rem)/1.4 var(--serif-b); }
.lg-hr { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 2.2rem 0; color: rgba(220, 232, 255, .7); }
.lg-hr::before, .lg-hr::after { content: ''; width: min(28%, 140px); height: 1px; background: rgba(220, 232, 255, .4); }
.lg-hr i::before { content: '✷'; font-style: normal; font-size: .9rem; }
.lg-label { margin: 1.6rem 0 .4rem; text-align: center; color: rgba(220, 232, 255, .75); font-size: .8em; letter-spacing: .12em; }
.lg-img { margin: 1.4rem auto; max-width: 100%; text-align: center; }
.lg-img img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 6px; aspect-ratio: var(--r, auto); }
.lg-img figcaption { display: none; }
.lg-img.bad img { display: none; }
.lg-img.bad { display: grid; place-items: center; aspect-ratio: var(--r, 16 / 9); max-height: 220px; border: 1px dashed rgba(220, 232, 255, .35); border-radius: 8px; }
.lg-img.bad figcaption { display: block; color: rgba(220, 232, 255, .6); font-size: .8rem; }
mark.hl { background: none; color: #a9cbff; font-weight: 600; }
.bub mark.hl { color: inherit; text-decoration: underline 1px rgba(255, 255, 255, .5); text-underline-offset: 3px; }
.rl-who { display: inline-flex; align-items: center; gap: .45em; font-style: normal; color: #fff; }
.rl-who .av { flex: 0 0 24px; width: 24px; height: 24px; }
.rl-who .av span { font-size: .7rem; }
.reader.novel .rl-who .av, .reader.novel .side-gm .nm .av { display: grid; }
/* 성장 전 전신 이미지는 원본 크기 이상으로 키우지 않아요 */
.pf-young .pf-full img { width: auto; max-width: 100%; height: auto; margin-inline: auto; }

/* ---------- v8 읽기 도구: 배경 없이 작게 + 미끄러지는 토글 ---------- */
.r-tools { position: static; gap: .4rem 1.2rem; justify-content: flex-end; margin: 0 0 1.6rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: .8rem; color: rgba(225, 235, 255, .78); }
.r-tools label { gap: .5rem; }
.r-tools input[type=range] { width: 84px; height: 14px; accent-color: #dfe8ff; }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border: 1px solid rgba(225, 235, 255, .32); border-radius: 99px; overflow: visible; background: none; }
.seg::before { content: ''; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 2); border-radius: 99px; background: rgba(235, 242, 255, .92); transition: translate .45s cubic-bezier(.3, 1.3, .5, 1); }
.seg:has(button:nth-child(2)[aria-pressed="true"])::before { translate: 100% 0; }
.seg button { position: relative; z-index: 1; padding: .22rem .85rem; border: 0; background: none; color: rgba(225, 235, 255, .8); font: 500 .76rem/1.4 var(--serif-b); letter-spacing: .02em; transition: color .3s; cursor: pointer; }
.seg button[aria-pressed="true"] { background: none; color: #0b1640; }
@media (max-width: 720px) { .r-tools { justify-content: center; border-radius: 0; } }

/* ---------- v8 지문 글씨 조금 더 밝게 ---------- */
.narr { color: #bfd0f3; }
.lg-label { color: rgba(225, 235, 255, .85); }

/* ---------- v8 인장(프로필 사진) 150% ---------- */
.av { flex: 0 0 69px; width: 69px; height: 69px; }
.av svg { width: 34px; height: 34px; }
.av span { font-size: 1.4rem; }
.side-gm .nm { gap: .65rem; }
.side-gm .nm .av { flex: 0 0 39px; width: 39px; height: 39px; }
.side-gm .nm .av span { font-size: 1rem; }
.rl-who .av { flex: 0 0 36px; width: 36px; height: 36px; }
.rl-who .av span { font-size: .9rem; }
.roll span { padding: .3rem 1.1rem .3rem .35rem; }
@media (max-width: 720px) { .av { flex-basis: 54px; width: 54px; height: 54px; } }
/* 소설 보기에서도 이름 앞에 인장 */
.reader.novel .msg, .reader.novel .msg.side-right { display: flex; flex-direction: row; gap: .8rem; align-items: flex-start; }
.reader.novel .msg > .av { display: grid; flex: 0 0 39px; width: 39px; height: 39px; margin-top: .1rem; }
.reader.novel .msg > .av span { font-size: 1rem; }
.reader.novel .msg.side-gm { display: block; }
.reader.novel .side-gm .nm { display: inline-flex; vertical-align: middle; }
.reader.novel .bub p { display: block; }
.reader.novel .nm { display: block; margin: 0 0 .15rem; }
.reader.novel .side-gm .nm { gap: .8rem; }
.reader.novel .side-gm .bub p { padding-left: calc(39px + .8rem); }

/* ---------- v9 말풍선 인장 크기 되돌림 ---------- */
.av { flex: 0 0 50px; width: 50px; height: 50px; }
.av span { font-size: 1.05rem; }
.side-gm .nm .av { flex: 0 0 32px; width: 32px; height: 32px; }
.rl-who .av { flex: 0 0 30px; width: 30px; height: 30px; }
@media (max-width: 720px) { .av { flex-basis: 44px; width: 44px; height: 44px; } }

/* ---------- v9 캐릭터 쪽 지문 (독백) ---------- */
.aside { max-width: min(74%, 34em); margin: 1.1rem 0; padding: .15rem 0 .15rem 1.1rem; border-left: 1.5px solid rgba(214, 226, 255, .45); color: #d3def6; font-size: .95em; line-height: 1.9; text-align: left; }
.aside-right { margin-left: auto; padding: .15rem 1.1rem .15rem 0; border-left: 0; border-right: 1.5px solid rgba(214, 226, 255, .45); text-align: right; }
.aside.who-pirate { border-color: rgba(120, 175, 255, .7); }
.aside.who-knight { border-color: rgba(236, 240, 252, .7); }
.reader.novel .aside { max-width: none; }
@media (max-width: 720px) { .aside { max-width: 88%; } }

/* ---------- v9 프로필: 성장 전/후 토글 ---------- */
.age-tog { display: flex; justify-content: center; margin: -.4rem 0 clamp(1.2rem, 3vw, 2rem); }
.age-tog .seg button { min-width: 6.2rem; padding: .32rem 1.1rem; font: 400 1.02rem/1.3 var(--display); letter-spacing: .04em; }
.cards .ccard { backface-visibility: visible; }

/* ---------- v10 프로필 카드: 들리는 동작 부드럽게 ---------- */
.ccard { animation: cardin 1.1s var(--ease) .1s backwards; opacity: 1; transition: translate .7s cubic-bezier(.22, .8, .3, 1), filter .7s ease; will-change: translate; }
.ccard:hover, .ccard:focus-visible { translate: 0 -10px; filter: drop-shadow(0 18px 26px rgba(0, 6, 40, .45)); }

/* ---------- v10 AU 해시태그 파란색 ---------- */
.au-card .aug-tags, .au-head .aug-tags { color: #2f5fd8; }

/* ---------- v10 만화 읽기 화면: 흰 배경, 눈 없음 ---------- */
body[data-route="comic-read"] { background: #fff; color: #1b2142; }
body[data-route="comic-read"] #bgstage, body[data-route="comic-read"] #veil, body[data-route="comic-read"] #sky { display: none; }
body[data-route="comic-read"] .bar::before { background: linear-gradient(180deg, #fff 55%, rgba(255, 255, 255, 0)); }
body[data-route="comic-read"] .topnav a { color: #1b2142; text-shadow: none; }
body[data-route="comic-read"] .topnav a::after { background: #1b2142; box-shadow: none; }
body[data-route="comic-read"] #app, body[data-route="comic-read"] .page { color: #1b2142; }
body[data-route="comic-read"] .phead h1 { color: #121735; text-shadow: none; }
body[data-route="comic-read"] .phead .sub, body[data-route="comic-read"] .back { color: #5a6385; text-shadow: none; }
body[data-route="comic-read"] .r-tools { color: #4a5476; }
body[data-route="comic-read"] .seg { border-color: rgba(27, 33, 66, .25); }
body[data-route="comic-read"] .seg::before { background: #1b2142; }
body[data-route="comic-read"] .seg button { color: #4a5476; }
body[data-route="comic-read"] .seg button[aria-pressed="true"] { color: #fff; }
body[data-route="comic-read"] .r-nav { border-color: rgba(27, 33, 66, .15); }
body[data-route="comic-read"] .r-nav b { color: #121735; }
body[data-route="comic-read"] .r-nav small, body[data-route="comic-read"] #cpn, body[data-route="comic-read"] #cpc { color: #5a6385; }
body[data-route="comic-read"] .pager button { background: #fff; color: #1b2142; border-color: rgba(27, 33, 66, .25); }
body[data-route="comic-read"] .ed-host { outline-color: rgba(27, 33, 66, .3); }

/* ---------- v10 소설 보기: 지문도 전부 왼쪽, 화자가 바뀔 때만 행간을 띄워 구분 ---------- */
.reader.novel .r-body > * { margin-top: .5rem; margin-bottom: 0; }
.reader.novel .r-body > .chg { margin-top: 1.9rem; }
.reader.novel .r-body > .scene, .reader.novel .r-body > .lg-hr { margin-top: 3rem; margin-bottom: 1.4rem; }
.reader.novel .aside, .reader.novel .aside-right { max-width: none; margin-left: 0; padding: 0; border: 0; text-align: left; color: #d8e2f8; font-size: 1em; }
.reader.novel .narr { margin-left: 0; margin-right: 0; max-width: none; text-align: left; }
.reader.novel .msg + .msg:not(.chg) { margin-top: .35rem; }
.reader.novel .msg:not(.chg) > .av { visibility: hidden; }
.reader.novel .msg:not(.chg) .nm { display: none; }
.ed-choice { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ed-opt { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: #151a33; cursor: pointer; }

/* ==========================================================================
   v12
   ========================================================================== */
:root { --dutch: 'Dutch801 Rm BT', 'Dutch801 BT', 'Dutch801 Rm', 'Dutch 801', 'Tinos', 'Times New Roman', Times, serif; }
html:has(body[data-route="page"]) { scrollbar-gutter: stable; }

/* 상단 카테고리: Dutch801 대문자 */
.topnav a { font-family: var(--dutch); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(.92rem, 1.1vw, 1.08rem); }
@media (max-width: 720px) { .topnav a { font-size: .86rem; letter-spacing: .06em; } }
.bar { transition: translate .45s cubic-bezier(.3, .7, .3, 1); }
body.nav-hide .bar { translate: 0 -110%; }

/* 서사 타임라인: 숫자 Dutch801, 제목 낫표 없이 왼쪽 정렬, 세로선이 다음 숫자까지 이어짐 */
.toc { --tgap: clamp(3.6rem, 7vw, 6.2rem); gap: var(--tgap); }
.toc-n { display: flex; flex-direction: column; align-items: center; gap: .6rem; height: 100%; }
.toc-n b { font: 700 clamp(3rem, 6.4vw, 5.4rem)/.86 var(--dutch); letter-spacing: -.01em; }
.toc-n small { order: 1; font-family: var(--dutch); }
.toc-n i { order: 2; flex: 1 1 auto; min-height: 36px; margin-bottom: calc(-1 * var(--tgap) + .9rem); }
.toc-it:last-child .toc-n i { flex: 0 0 36px; margin-bottom: 0; }
.toc-t { padding: .2rem 0 0; text-align: left; }
.toc-t::before, .toc-t::after { display: none; }
.toc-t h2 { text-wrap: pretty; }
.toc-en { padding-left: 0; }
.toc-sum { text-align: left; }
@media (max-width: 720px) {
  .toc-n { flex-direction: row; height: auto; }
  .toc-n i { flex: 0 0 28px; min-height: 0; height: 1px; margin-bottom: 0; }
}

/* 스카엘 프로필 숫자 (1. 2. …) */
.d-num { font: 700 1.5rem/1 var(--dutch); color: #b9d2ff; letter-spacing: 0; }

/* 프로필 카드: 들림 동작에 필터를 쓰지 않아 3D 뒤집기와 충돌하지 않게 */
.ccard:hover, .ccard:focus-visible { filter: none; }
.ccard .cc-in { box-shadow: 0 14px 30px rgba(0, 6, 40, .25); transition: transform 1s var(--ease), box-shadow .7s ease; border-radius: inherit; }
.ccard:hover .cc-in { box-shadow: 0 28px 44px rgba(0, 6, 40, .45); }

/* 역극: 이름은 본문보다 크고 굵게 */
.reader .nm { font-size: 1.1em; font-weight: 700; letter-spacing: .01em; opacity: 1; }
.reader.novel .nm { font-size: 1.08em; font-weight: 700; color: #e3ecff; }

/* AU 해시태그 색 */
.au-card .aug-tags, .au-head .aug-tags { color: #7593EA; }

/* 만화 목록 썸네일: 가로형 */
.comic-cover { aspect-ratio: 16 / 10; }

/* 갤러리: 이미지가 들어온 다음 차례로 페이드인 */
.masonry .g-item { opacity: 0; translate: 0 14px; }
.masonry.ready .g-item { opacity: 1; translate: 0 0; transition: opacity .7s ease var(--d, 0ms), translate .9s var(--ease) var(--d, 0ms), transform .6s var(--ease), box-shadow .5s, border-color .4s; }
/* 편집 버튼이 해당 영역 오른쪽 위에 붙도록 (게시글 안 제목 영역 등) */
body.ed-on .ed-host:not(.hm2):not(.ccard):not(.g-item):not(.au-card):not(.log-card) { position: relative; }

/* ==========================================================================
   v13 — 한글 제목 폰트: 스텔라체 (Stellar Serif Bold Condensed)
   ========================================================================== */
@font-face { font-family: 'Stella'; src: url('../assets/fonts/Stella-BoldCondensed.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/Project-Noonnu/2608201622@stellar-serif/stellar-serif/Stellar_Serif_Bold_Condensed.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root { --stella: 'Stella', 'Noto Serif KR', serif; --display: 'Makcasa', 'Stella', 'Instrument Serif', 'Noto Serif KR', serif; }
/* 프로필 */
.pf-quote { font: 400 clamp(1.7rem, 3.6vw, 3.1rem)/1.4 var(--stella); letter-spacing: 0; }
.pf-name h2 { font: 400 clamp(2.3rem, 4.4vw, 3.6rem)/1.15 var(--stella); letter-spacing: .01em; }
.d-h2 { font-family: 'Instrument Serif', var(--stella); }
.d-h2 span { font-family: var(--stella); font-weight: 400; }
.d-mon h3 { font-family: var(--stella); font-weight: 400; }
.d-trait h3 { font: 400 1.4rem/1.35 var(--stella); letter-spacing: .01em; }
.cc-plate b { font: 400 clamp(1.15rem, 1.9vw, 1.62rem)/1.2 var(--stella); letter-spacing: .01em; }
@media (max-width: 720px) { .cc-plate b { font-size: 1.05rem; } }
/* 만화·역극·서사·TRPG 글 제목 */
.log-card h3 { font-family: var(--stella); font-weight: 400; letter-spacing: .005em; }
.r-head h1, body[data-route="comic-read"] .phead h1, .page .phead h1[style] { font-family: var(--stella); font-weight: 400; letter-spacing: 0; }
.toc-t h2 { font: 400 clamp(1.3rem, 2.2vw, 1.85rem)/1.3 var(--stella); letter-spacing: .02em; }
.pst-cap h3, .pst-title { font-family: var(--stella); font-weight: 400; }
/* Dutch801 자리는 굵기 해제 */
.toc-n b { font-weight: 400; }
.toc-n small { font-weight: 400; }
.d-num { font-weight: 400; }
.cc-plate small { font-family: 'Makcasa', 'Instrument Serif', 'Noto Serif KR', serif; }
.d-tags li { font: 400 1.6rem/1.3 var(--stella); letter-spacing: .01em; }

/* ==========================================================================
   v14
   ========================================================================== */
@font-face { font-family: 'KookminUniversitySunggokSerif'; src: url('../assets/fonts/KMU80SungkokSerif.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/Project-Noonnu/2607101542@kmu80sungkokserif/kmu80sungkokserif/KMU80SungkokSerif.woff2') format('woff2'); font-weight: 400; font-display: swap; }

/* 달이 아래에서 떠오르기 */
@keyframes moonin { from { opacity: 0; translate: 0 26%; } 35% { opacity: .6; } to { opacity: 1; translate: 0 0; } }
.bs-moon { animation: moonin 4.2s cubic-bezier(.2, .7, .25, 1) both, moonbreath 9s ease-in-out 4.2s infinite; }

/* 메인: 별똥별 + 바다 위 반짝임 */
.hm-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.shoot { position: absolute; width: var(--l); height: 1.4px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95)); rotate: 18deg; transform-origin: right center; opacity: 0; filter: drop-shadow(0 0 4px rgba(200, 225, 255, .9)); animation: shoot 14s linear var(--d) infinite; }
@keyframes shoot { 0% { opacity: 0; translate: 0 0; scale: .2 1; } 1.5% { opacity: 1; } 6% { opacity: 0; translate: 220px 72px; scale: 1 1; } 100% { opacity: 0; translate: 220px 72px; } }
.glint { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(215, 232, 255, .9); opacity: 0; scale: var(--s); animation: glint var(--t) ease-in-out var(--d) infinite; }
.glint::before, .glint::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; translate: -50% -50%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); }
.glint::after { rotate: 90deg; width: 9px; }
@keyframes glint { 0%, 100% { opacity: 0; } 45% { opacity: .95; } 60% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .shoot, .glint { display: none; } }

/* 프로필 군주 강림 선언문 대사 */
.d-script { font-family: 'KookminUniversitySunggokSerif', 'Noto Serif KR', serif; font-style: normal; font-synthesis: none; font-weight: 400; letter-spacing: 0; transform: skewX(-10deg); }

/* 서사 제목 120% */
.toc-t h2 { font-size: clamp(1.56rem, 2.64vw, 2.22rem); }

/* 역극 본문은 이름보다 작게 (90%) */
.rd-rp .bub p, .rd-rp.novel .bub p, .rd-rp .aside, .rd-rp .narr { font-size: .9em; }
.rd-rp .nm { font-size: 1.1em; }

/* AU 카드 제목 Dutch801 */
.au-card h2 { font-family: var(--dutch), var(--stella); font-weight: 400; letter-spacing: .01em; }

/* 역극 목록형 */
.rp-list { list-style: none; margin: 0; padding: 0; max-width: 980px; border-top: 1px solid rgba(225, 235, 255, .3); }
.rp-list > li { border-bottom: 1px solid rgba(225, 235, 255, .18); }
.rp-row { display: grid; grid-template-columns: 3.4rem 9.5rem minmax(0, 1fr) 2rem; gap: 1.2rem; align-items: start; padding: 1.5rem .4rem; color: #eef3ff; text-decoration: none; transition: background .4s, padding .4s var(--ease); }
.rp-row:hover { background: rgba(225, 235, 255, .06); padding-left: .9rem; }
.rp-n { font: 400 1.7rem/1 var(--dutch); color: rgba(225, 235, 255, .55); }
.rp-meta { display: grid; gap: .35rem; padding-top: .2rem; color: rgba(225, 235, 255, .7); font: 400 .82rem/1.35 var(--serif-b); }
.rp-meta time { font-family: var(--dutch); font-size: .9rem; letter-spacing: .04em; color: #dbe5ff; }
.rp-main { display: grid; gap: .4rem; min-width: 0; }
.rp-main b { font: 400 clamp(1.35rem, 2.2vw, 1.75rem)/1.25 var(--stella); color: #fff; }
.rp-sum { color: #c9d6f3; font-size: .9rem; line-height: 1.7; }
.rp-tags { display: flex; flex-wrap: wrap; gap: .1rem .7rem; }
.rp-tags i { font-style: normal; font-size: .8rem; color: #9fbaf4; }
.rp-go { align-self: center; justify-self: end; color: rgba(225, 235, 255, .5); font-size: 1.2rem; transition: translate .4s var(--ease), color .3s; }
.rp-row:hover .rp-go { translate: 4px 0; color: #fff; }
@media (max-width: 720px) { .rp-row { grid-template-columns: 2.4rem minmax(0, 1fr); gap: .3rem .9rem; } .rp-n { grid-row: span 2; font-size: 1.3rem; } .rp-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: .2rem .7rem; } .rp-main { grid-column: 2; } .rp-go { display: none; } }

/* TRPG 정보: 영화 티켓 */
.tk { display: grid; grid-template-columns: minmax(0, 1fr) 7.2rem; margin: 1.6rem 0 1.4rem; max-width: 760px; color: #16204a; filter: drop-shadow(0 14px 28px rgba(0, 6, 40, .45));
  --notch: radial-gradient(circle at 0 50%, transparent 11px, #000 11.5px); }
.tk-main, .tk-stub { position: relative; background: #f3efe4; }
.tk-main { padding: 1.1rem 1.5rem 1.2rem; border-radius: 10px 0 0 10px; -webkit-mask: radial-gradient(circle 11px at 100% 0, transparent 98%, #000) top right / 100% 51% no-repeat, radial-gradient(circle 11px at 100% 100%, transparent 98%, #000) bottom right / 100% 51% no-repeat; mask: radial-gradient(circle 11px at 100% 0, transparent 98%, #000) top right / 100% 51% no-repeat, radial-gradient(circle 11px at 100% 100%, transparent 98%, #000) bottom right / 100% 51% no-repeat; }
.tk-stub { display: grid; align-content: center; justify-items: center; gap: .3rem; padding: 1rem .6rem; border-radius: 0 10px 10px 0; border-left: 2px dashed rgba(22, 32, 74, .35); text-align: center; -webkit-mask: radial-gradient(circle 11px at 0 0, transparent 98%, #000) top left / 100% 51% no-repeat, radial-gradient(circle 11px at 0 100%, transparent 98%, #000) bottom left / 100% 51% no-repeat; mask: radial-gradient(circle 11px at 0 0, transparent 98%, #000) top left / 100% 51% no-repeat, radial-gradient(circle 11px at 0 100%, transparent 98%, #000) bottom left / 100% 51% no-repeat; }
.tk-top { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(22, 32, 74, .2); font: 400 .66rem/1 var(--dutch); letter-spacing: .32em; color: #4a5680; }
.tk-title { margin: .75rem 0 .8rem; font: 400 clamp(1.25rem, 2.2vw, 1.6rem)/1.25 var(--stella); color: #0f1a46; }
.tk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem 1rem; padding: .7rem 0; border-block: 1px dashed rgba(22, 32, 74, .25); }
.tk small { display: block; margin-bottom: .25rem; font: 400 .62rem/1.2 var(--dutch); letter-spacing: .18em; color: #6a7396; }
.tk b { display: block; font: 500 .92rem/1.4 var(--serif-b); color: #16204a; overflow-wrap: anywhere; }
.tk-cast { padding-top: .7rem; }
.tk-cast i { margin: 0 .55rem; font-style: normal; color: #9aa2c0; }
.tk-stub b { font: 400 1.9rem/1 var(--dutch); letter-spacing: .02em; }
.tk-bar { width: 72%; height: 38px; margin: .3rem 0; background: repeating-linear-gradient(90deg, #16204a 0 2px, transparent 2px 4px, #16204a 4px 5px, transparent 5px 8px, #16204a 8px 11px, transparent 11px 12px); opacity: .85; }
@media (max-width: 600px) { .tk { grid-template-columns: 1fr; } .tk-stub { display: none; } .tk-main { border-radius: 10px; -webkit-mask: none; mask: none; } .tk-grid { grid-template-columns: 1fr 1fr; } }

/* 만화: 이전/다음 + TOP */
.cm-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 860px; margin: 4rem auto 0; }
.cm-nav > * { display: grid; gap: .35rem; padding: 1.2rem 1.4rem; border: 1px solid rgba(27, 33, 66, .18); border-radius: 12px; text-decoration: none; color: #1b2142; transition: border-color .3s, background .3s, translate .4s var(--ease); }
.cm-nav a:hover { border-color: #1b2142; background: #f5f7fc; translate: 0 -2px; }
.cm-next { text-align: right; }
.cm-nav small { font: 400 .74rem/1 var(--dutch); letter-spacing: .2em; text-transform: uppercase; color: #6a7396; }
.cm-nav b { font: 400 1.3rem/1.3 var(--stella); color: #121735; }
.cm-nav .off { opacity: .45; }
.cm-nav .off b { font: 400 .9rem/1.4 var(--serif-b); color: #6a7396; }
.to-top { position: fixed; left: max(18px, env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 65; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(27, 33, 66, .25); background: rgba(255, 255, 255, .92); color: #1b2142; font: 400 .72rem/1 var(--dutch); letter-spacing: .14em; cursor: pointer; opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .35s, translate .45s var(--ease), background .3s; box-shadow: 0 8px 22px rgba(0, 10, 50, .14); }
.to-top.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top:hover { background: #1b2142; color: #fff; }
@media (max-width: 600px) { .cm-nav { grid-template-columns: 1fr; } .cm-next { text-align: left; } }

/* ==========================================================================
   v15
   ========================================================================== */
/* 달: 움직임은 그대로, 나타나는 건 글씨보다 늦게 */
@keyframes moonrise { from { translate: 0 26%; } to { translate: 0 0; } }
@keyframes moonfade { from { opacity: 0; } to { opacity: 1; } }
.bs-moon { animation: moonin 4.2s cubic-bezier(.2, .7, .25, 1) both, moonbreath 9s ease-in-out 4.2s infinite; }

/* TRPG 티켓: 배경 없이 흰 선, 게시글 폭에 맞춤 */
.tk { max-width: none; width: 100%; color: #eef3ff; filter: none; position: relative; }
.tk-main, .tk-stub { background: none; -webkit-mask: none; mask: none; }
.tk-main { border: 1px solid rgba(255, 255, 255, .85); border-right: 0; border-radius: 10px 0 0 10px;
  -webkit-mask: radial-gradient(circle 11.5px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11.5px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 11.5px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11.5px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.tk-stub { border: 1px solid rgba(255, 255, 255, .85); border-left: 1px dashed rgba(255, 255, 255, .6); border-radius: 0 10px 10px 0;
  -webkit-mask: radial-gradient(circle 11.5px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11.5px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 11.5px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11.5px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.tk::before, .tk::after { content: ''; position: absolute; left: calc(100% - 7.2rem - 11px); width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%; pointer-events: none; }
.tk::before { top: -11px; clip-path: inset(50% 0 0 0); }
.tk::after { bottom: -11px; clip-path: inset(0 0 50% 0); }
.tk-top { color: rgba(225, 235, 255, .7); border-bottom-color: rgba(255, 255, 255, .3); }
.tk-title { color: #fff; font: 400 clamp(1.05rem, 1.7vw, 1.3rem)/1.6 var(--serif-b); }
.tk-grid { border-color: rgba(255, 255, 255, .3); }
.tk small { color: rgba(225, 235, 255, .62); }
.tk b { color: #fff; }
.tk-cast i { color: rgba(225, 235, 255, .45); }
.tk-bar { background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px, #fff 8px 11px, transparent 11px 12px); opacity: .8; }
@media (max-width: 600px) { .tk::before, .tk::after { display: none; } .tk-main { border-right: 1px solid rgba(255, 255, 255, .85); border-radius: 10px; -webkit-mask: none; mask: none; } }

/* ---------- v16 TRPG: 개요는 제목 밑, 티켓 맨 위는 룰·GM·날짜 ---------- */
.r-tagline { margin: -.1rem 0 .7rem; color: #e3ebff; font: 400 clamp(1rem, 1.5vw, 1.15rem)/1.6 var(--serif-b); }
.tk-grid { padding-top: 0; border-top: 0; }

/* ---------- v17 로그: 인장 크기 통일 · 지문 · 붙여넣은 스타일 ---------- */
/* 말풍선 보기: GM 도 다른 사람처럼 인장이 말풍선 옆에 같은 크기로 */
.msg.side-gm { display: flex; }
.side-gm .av { display: grid; }
.side-gm .bub { flex: 1; min-width: 0; }
.side-gm .nm { display: block; }
.reader.novel .msg.side-gm { display: flex; }
.reader.novel .side-gm .nm { display: block; }
.reader.novel .side-gm .bub p { padding-left: 0; }
/* TRPG 소설 보기: 지문은 가운데, 대사보다 조금 크게 */
.rd-trpg.novel .narr { text-align: center; margin-left: auto; margin-right: auto; max-width: 40em; }
.rd-trpg .narr { font-size: 1.06em; }
.rd-trpg .bub p { font-size: .97em; }
/* 판정 안내 줄: 굴림 결과처럼 둥근 상자 */
.lg-label { display: flex; justify-content: center; margin: 1.6rem 0 .5rem; }
.lg-label > span { display: inline-flex; align-items: center; gap: .5em; padding: .32rem 1.1rem; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: #eaf1ff; font-size: .9rem; letter-spacing: .08em; }
.reader.novel .r-body > .lg-label { margin-top: 1.6rem; }
/* 붙여넣은 로그의 배경 상자·그라데이션 */
.scene.styled { display: block; padding: .85rem 1.2rem .95rem; border-radius: 8px; text-align: center; color: #fff; }
.scene.styled::before, .scene.styled::after { display: none; }
.scene.styled small { display: block; margin: 0 0 .35rem; color: inherit; opacity: .9; letter-spacing: .12em; font: 500 .8rem/1.4 var(--serif-b); }
.scene.styled span { display: block; color: inherit; font: 400 clamp(1.2rem, 2vw, 1.45rem)/1.4 var(--stella); }
.narr.styled { display: table; margin-inline: auto; padding: .5rem 1.1rem; border-radius: 6px; }
.lgs { border-radius: 3px; }
.lgs[style*="background"] { padding: .05em .35em; }
/* TRPG 티켓: 위·아래 여백 맞춤 */
.tk-main { display: flex; flex-direction: column; justify-content: center; padding: 1.1rem 1.5rem; }
.tk-cast { padding-top: .7rem; }

/* ---------- v18 TRPG 지문 = 대사 크기 ---------- */
.rd-trpg .narr, .rd-trpg .bub p { font-size: 1em; }

/* ---------- v18 판정 카드 ---------- */
.dice { display: flex; justify-content: center; margin: 1.6rem 0; }
.dcard { width: min(100%, 380px); border: 1px solid rgba(225, 235, 255, .55); border-radius: 12px; overflow: hidden; background: rgba(6, 14, 50, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0, 6, 40, .35); font-size: .92rem; color: #eef3ff; }
.dh { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .6rem 1rem; border-bottom: 1px solid rgba(225, 235, 255, .35); background: linear-gradient(180deg, rgba(225, 235, 255, .14), rgba(225, 235, 255, .04)); }
.dh .av { flex: 0 0 30px; width: 30px; height: 30px; }
.dh .av span { font-size: .8rem; }
.dico svg { width: 22px; height: 22px; color: #dbe6ff; display: block; }
.dt { display: flex; align-items: baseline; gap: .5rem; }
.dt b { font: 400 1.05rem/1.2 var(--stella); color: #fff; }
.dt em { font-style: normal; font-weight: 600; letter-spacing: .04em; color: #dbe6ff; }
.dr { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); align-items: center; min-height: 2.6rem; border-bottom: 1px solid rgba(225, 235, 255, .18); }
.dr:last-child { border-bottom: 0; }
.dk { align-self: stretch; display: flex; align-items: center; padding: 0 .9rem; border-right: 1px solid rgba(225, 235, 255, .18); color: rgba(225, 235, 255, .78); font-size: .84rem; }
.dvs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem; padding: .4rem .6rem; }
.dv { display: inline-grid; place-items: center; min-width: 2.4rem; padding: .12rem .55rem; border: 1px solid rgba(225, 235, 255, .55); border-radius: 6px; background: rgba(225, 235, 255, .08); font: 400 1.05rem/1.35 var(--dutch); color: #fff; }
.ds { font-style: normal; color: rgba(225, 235, 255, .5); }
.dres .dk { color: rgba(225, 235, 255, .9); }
.dg { align-self: stretch; display: grid; place-items: center; padding: .45rem .6rem; font-weight: 700; letter-spacing: .14em; color: #fff; background: rgba(225, 235, 255, .1); }
.g-ok .dg { background: linear-gradient(90deg, rgba(64, 120, 255, .55), rgba(110, 170, 255, .35)); }
.g-crit .dg { background: linear-gradient(90deg, rgba(208, 197, 169, .75), rgba(240, 228, 196, .45)); color: #1b1a12; }
.g-fail .dg { background: linear-gradient(90deg, rgba(200, 60, 90, .55), rgba(150, 40, 80, .35)); }
.g-fumble .dg { background: linear-gradient(90deg, #b3123a, #7a0a2e); }
.reader.novel .r-body > .dice { margin: 1.6rem 0; }

/* ---------- v18 AU 카드 제목: 대문자, 자간 -1px ---------- */
.au-card h2 { text-transform: uppercase; letter-spacing: -1px; }
.reader.novel .dh .av, .dh .av { display: grid; }

/* ==========================================================================
   v19 — 디자인 위계 정리 (글꼴 역할 · 글자 크기 규격 · 본문 상자)
   --------------------------------------------------------------------------
   글꼴 역할
     게시판 대제목(영문)   Makcasa              --display
     게시글·영역 제목      국민대 성곡세리프    --f-title
     본문(읽는 글)         Noto Serif KR        --f-body
     자잘한 글자(정보·태그·버튼·요약) Pretendard --f-ui
     상단 카테고리         Noto Serif KR 대문자
   글자 크기 규격 (모든 페이지 공통)
     --t-display 게시판 대제목 / --t-h1 게시글 제목 / --t-h2 목록·영역 제목
     --t-h3 소제목 / --t-body 본문 / --t-sm 요약·보조 / --t-xs 날짜·태그·라벨
   ========================================================================== */
@font-face { font-family: 'Pretendard'; src: url('../assets/fonts/Pretendard-Regular.subset.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../assets/fonts/Pretendard-Medium.subset.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../assets/fonts/Pretendard-SemiBold.subset.woff2') format('woff2'); font-weight: 600; font-display: swap; }
:root {
  --f-ui: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --f-title: 'KookminUniversitySunggokSerif', 'Noto Serif KR', serif;
  --f-body: 'Noto Serif KR', serif;
  --t-display: clamp(3rem, 6.6vw, 5.6rem);
  --t-h1: clamp(2.1rem, 4vw, 3.1rem);
  --t-h2: clamp(1.45rem, 2.3vw, 1.85rem);
  --t-h3: 1.2rem;
  --t-body: 1.0625rem;
  --t-sm: .9375rem;
  --t-xs: .8125rem;
  --panel: rgba(0, 0, 0, .5);
  --ui-ink: rgba(228, 236, 255, .78);
}

/* 상단 카테고리 */
.topnav a { font: 400 .92rem/1 'Noto Serif KR', serif; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 720px) { .topnav a { font-size: .8rem; letter-spacing: .08em; } }

/* 메인 */
.hm2-dd { position: absolute; left: 50%; top: 50%; translate: -50% -100%; margin-top: calc(var(--sw) * -.0745 - var(--sw) * .006); display: grid; justify-items: center; gap: calc(var(--sw) * .0015); text-align: center; color: #fff; text-shadow: 0 2px 4px rgba(0, 14, 80, .6), 0 4px 18px rgba(0, 20, 110, .55); animation: subin 2s var(--ease) 1.2s both; }
.hm2-date { margin: 0; font: 500 calc(var(--sw) * .0094)/1.3 var(--f-ui); letter-spacing: -1px; }
.hm2-day { margin: 0; font: 400 calc(var(--sw) * .0158)/1.2 'Noto Serif KR', serif; letter-spacing: 0; }
.hm2-day b { font-weight: 600; color: #7593EA; }
.hm2-sub { top: auto; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); margin-top: 0; color: rgba(214, 222, 238, .72); font: 500 13px/1.3 var(--f-ui); letter-spacing: -1px; text-shadow: 0 1px 6px rgba(0, 10, 50, .6); }
@media (max-width: 820px) {
  .hm2-dd { top: calc(34% - 10px); margin-top: 0; gap: 2px; }
  .hm2-date { font-size: 12px; }
  .hm2-day { font-size: 20px; }
  .hm2-sub { top: auto; font-size: 11px; }
}

/* 게시판 머리 */
.phead h1, .c-head h1 { font-size: var(--t-display); }
.phead .rule { display: none; }
.phead .sub, .c-head .hint { font: 400 var(--t-sm)/1.7 var(--f-ui); color: var(--ui-ink); letter-spacing: -.01em; }
.phead .eyebrow { font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .4em; }
.sample { font-family: var(--f-ui); font-weight: 600; }
.back { font: 500 var(--t-xs)/1 var(--f-ui); letter-spacing: .02em; color: var(--ui-ink); }
.cats button { font: 500 var(--t-xs)/1 var(--f-ui); letter-spacing: .02em; }
.empty { font: 400 var(--t-sm)/1.7 var(--f-ui); }
.chips li { font: 500 var(--t-xs)/1.6 var(--f-ui); }

/* 게시글 제목 (국민대 성곡세리프) */
.r-head h1, .post-title, body[data-route="comic-read"] .phead h1 { font: 400 var(--t-h1)/1.25 var(--f-title); letter-spacing: -.01em; }
.log-card h3, .rp-main b, .toc-t h2, .pst-label b, .au-story h3, .au-head h1 { font-family: var(--f-title); font-weight: 400; letter-spacing: -.01em; }
.log-card h3, .rp-main b, .toc-t h2, .pst-label b { font-size: var(--t-h2); line-height: 1.3; }
.au-story h3 { font-size: var(--t-h3); }
.au-head h1 { font-size: var(--t-h1); }

/* 자잘한 글자 = Pretendard */
.log-card .meta, .rp-meta, .rp-meta time, .rp-n, .toc-n small, .r-info, .r-info b, .tk small, .tk b, .pst-label small, .pst-label em, .au-story time, .au-n, .au-desc, .au-tabs button, .aug-tags, .log-card .go, .cm-nav small, .r-tools, .lg-label > span, .dcard, .dk, .dt em, .g-item .cap, .toc-more, .toc-rule, .rp-sum, .log-card p, .r-tagline, .r-head .sub { font-family: var(--f-ui); }
.log-card .meta, .rp-meta, .toc-n small, .pst-label small, .au-story time, .au-n, .r-info, .tk small { font-size: var(--t-xs); font-weight: 500; letter-spacing: .02em; }
.r-info b, .tk b { font-size: var(--t-sm); font-weight: 500; letter-spacing: -.01em; }
.log-card p, .rp-sum, .pst-label em, .au-desc, .r-tagline, .r-head .sub { font-size: var(--t-sm); line-height: 1.65; font-weight: 400; letter-spacing: -.01em; }
.log-card .go, .toc-more { font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; }
.aug-tags { font-size: var(--t-xs); font-weight: 500; }
.rp-n { font-size: 1.15rem; font-weight: 500; }
.rp-meta time { font-size: var(--t-xs); letter-spacing: .04em; }
.rp-row { grid-template-columns: 3rem 7.5rem minmax(0, 1fr) 2rem; }
.au-tabs button { font-size: var(--t-sm); font-weight: 600; }
.lg-label > span { font-size: var(--t-xs); font-weight: 500; letter-spacing: .1em; }
.dcard { font-size: var(--t-sm); }
.dk { font-size: var(--t-xs); }
.dt b { font-size: 1rem; }
/* 서사: 영문 부제·한 줄 요약은 원래 글꼴 그대로 */
.toc-en { font-family: var(--cinzel); }
.toc-sum { font-family: var(--serif-b); }
.toc-n b { font-family: var(--dutch); }

/* 본문 크기·행간 */
.r-body { font-size: var(--fs, 17px); }
.toc-body, .d-p, .au-body, .d-c { font-size: var(--t-body); line-height: 2; }
.bub p, .aside { line-height: 1.85; }
.rd-trpg .narr { line-height: 2.25; }
.rd-trpg.novel .narr { margin-block: .7rem; }

/* 게시글 본문 상자 (반투명 검정) */
.reader .r-body, .pf-doc, .toc-main, .au-story { background: var(--panel); border-radius: 16px; }
.reader .r-body { padding: clamp(22px, 4vw, 48px) clamp(18px, 4vw, 44px); }
.pf-doc { padding-top: clamp(22px, 4vw, 44px); padding-bottom: clamp(22px, 4vw, 44px); }
.toc-main { padding: clamp(18px, 3vw, 34px) clamp(18px, 3.4vw, 40px); }
.au-story { border: 0; backdrop-filter: none; }
.pf-doc .d-h2:first-child, .pf-doc > :first-child { margin-top: 0; }

/* 프로필 카드: 빛 효과·들림 없음 (마우스를 올리면 뒤집히기만) */
.ccard:hover, .ccard:focus-visible { translate: none; filter: none; }
.ccard:hover .cc-in { box-shadow: 0 14px 30px rgba(0, 6, 40, .25); }
.hm2-day b { text-shadow: 0 1px 3px rgba(0, 10, 60, .85), 0 0 14px rgba(0, 20, 90, .7); }
.hm2-sub { color: rgba(88, 100, 128, .9); text-shadow: 0 0 10px rgba(255, 255, 255, .35); }
.rd-rp .r-head .chips { display: none; }
.log-card { background: var(--panel); border-color: rgba(225, 235, 255, .16); }
.log-card:hover { transform: none; }
.ph span { font-family: var(--f-ui); font-size: var(--t-sm); }
.ph small { font-family: var(--f-ui); font-size: var(--t-xs); }
.rp-list { background: var(--panel); border-radius: 16px; border-top: 0; padding: .4rem clamp(12px, 2vw, 24px); }
.rp-list > li:last-child { border-bottom: 0; }

/* ==========================================================================
   v20
   ========================================================================== */
@font-face { font-family: 'Pretendard'; src: url('../assets/fonts/Pretendard-Bold.subset.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* 눈: 배경 바로 위, 글·상자 뒤 */
#sky { z-index: -1; }

/* 프로필: 검은 배경이 한마디부터 본문 끝까지 */
.pf { margin-top: 118px; padding-top: 0; background: var(--panel); }
.pf-back { position: relative; z-index: 2; display: inline-flex; margin: 1.4rem 0 0 clamp(16px, 3vw, 40px); }
.pf-top { padding-top: clamp(28px, 4vw, 56px); }
.pf-doc { background: none; border-radius: 0; }

/* 서사: 상자 없음, 본문 Pretendard, 제목 더 크게 */
.toc-main { background: none; padding: 0; border-radius: 0; }
.toc-body { font-family: var(--f-ui); font-size: var(--t-body); line-height: 1.95; letter-spacing: -.01em; }
.toc-t h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }

/* RP 목록: 상자 없이 원래 줄 스타일, 화살표 없음 */
.rp-list { background: none; border-radius: 0; padding: 0; border-top: 1px solid rgba(225, 235, 255, .3); }
.rp-list > li:last-child { border-bottom: 1px solid rgba(225, 235, 255, .18); }
.rp-row { grid-template-columns: 3.4rem 9.5rem minmax(0, 1fr); }
.rp-n { font: 400 1.7rem/1 var(--dutch); }
.rp-meta time { font: 400 .9rem/1.35 var(--dutch); letter-spacing: .04em; }
@media (max-width: 720px) { .rp-row { grid-template-columns: 2.4rem minmax(0, 1fr); } }

/* RP·TRPG 게시글: 검은 상자가 제목부터 */
.reader { background: var(--panel); border-radius: 16px; padding: clamp(24px, 4vw, 48px) clamp(18px, 4vw, 44px); }
.reader .r-body { background: none; padding: 0; border-radius: 0; }
.reader .back { margin-bottom: 1.6rem; }

/* RP·TRPG 본문: KoPub 바탕 Medium, 자간 -1px */
.reader .r-body { font-family: var(--kopub); letter-spacing: -1px; }
.reader .bub p, .reader .narr, .reader .aside { font-family: var(--kopub); letter-spacing: -1px; }
/* RP: 이름 파랑, 이름과 대사 사이 살짝 띄움 */
.rd-rp .nm { color: #7593EA; font-family: var(--f-ui); letter-spacing: 0; }
.rd-rp .nm { margin-bottom: .35rem; }
.rd-rp.novel .nm { color: #7593EA; }
/* TRPG 지문: Pretendard Bold, 행간 넉넉히 */
.rd-trpg .narr { font-family: var(--f-ui); font-weight: 700; letter-spacing: -.01em; line-height: 2.6; }
.rd-trpg.novel .narr { margin-block: 1rem; }
/* 판정 안내 줄 = 판정 카드와 같은 글꼴·크기 */
.lg-label > span { font: 600 var(--t-sm)/1.2 var(--f-ui); letter-spacing: .04em; color: #eef3ff; padding: .55rem 1.2rem; border-color: rgba(225, 235, 255, .55); background: linear-gradient(180deg, rgba(225, 235, 255, .14), rgba(225, 235, 255, .04)); }
.dt em { font: 600 var(--t-sm)/1.2 var(--f-ui); letter-spacing: .04em; color: #eef3ff; }

/* 만화 맨 위로 버튼 */
.to-top { display: grid; place-items: center; width: 46px; height: 46px; font-size: 0; }

/* 메인: 날짜·푸터 자간 넓게 */
.hm2-date { font-size: calc(var(--sw) * .0074); letter-spacing: .2em; padding-left: .2em; }
.hm2-sub { letter-spacing: .2em; padding-left: .2em; }
@media (max-width: 820px) { .hm2-date { font-size: 10px; } }

/* 프로필 선택: 위 여백 늘리고, 토글 작게, 카드는 화면 가운데 쪽으로 */
.chpage { min-height: 100svh; display: flex; flex-direction: column; padding-top: clamp(140px, 17vh, 200px); padding-bottom: 60px; }
.chpage .c-head { margin-bottom: 1rem; }
.age-tog { margin: 0 0 clamp(2rem, 5vh, 3.4rem); }
.age-tog .seg button { min-width: 4.6rem; padding: .2rem .8rem; font-size: .84rem; }
.chpage .cards { margin-top: auto; margin-bottom: auto; }
.ccard { --w: clamp(160px, min(22vw, calc((100svh - 380px) / 1.55)), 320px); }

/* ==========================================================================
   v21
   ========================================================================== */
:root { --panel: rgba(0, 0, 0, .7); }

/* 메인 날짜·푸터 자간 */
.hm2-date, .hm2-sub { letter-spacing: .5em; padding-left: .5em; }

/* 프로필 선택 화면 */
.chpage { padding-top: clamp(96px, 11vh, 130px); }
.ccard { --w: clamp(180px, min(27vw, calc((100svh - 300px) / 1.55)), 390px); }
.age-tog .seg button { font-family: var(--f-ui); font-weight: 500; letter-spacing: 0; }

/* 서사 본문: 2px 작게, 들여쓰기 없이 제목과 같은 시작점 */
.toc-body { font-size: calc(var(--t-body) - 2px); }
.toc-body p { text-indent: 0; }

/* RP·TRPG 본문 글꼴 되돌림 (KoPub → 원래 본문 글꼴) */
.reader .r-body, .reader .bub p, .reader .narr, .reader .aside { font-family: var(--serif-b); letter-spacing: -.01em; }
.rd-trpg .narr { font-family: var(--f-ui); font-weight: 700; letter-spacing: -.01em; font-size: calc(1em - 1px); }
/* RP 이름: Pretendard, 자간 -1px, 1px 작게 */
.rd-rp .nm, .rd-rp.novel .nm { font-family: var(--f-ui); font-weight: 700; letter-spacing: -1px; font-size: calc(1.1em - 1px); }

/* ---------- AU: 피규어 쇼케이스 ---------- */
.au-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.au-card.sc { padding: 0; border: 0; border-radius: 26px 26px 10px 10px; overflow: hidden; background: rgba(255, 255, 255, .06); box-shadow: 0 24px 50px rgba(0, 4, 30, .55), inset 0 0 0 1px rgba(225, 235, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #eef3ff; transition: box-shadow .5s; }
.au-card.sc:hover { transform: none; box-shadow: 0 28px 60px rgba(0, 4, 30, .6), inset 0 0 0 1px rgba(225, 235, 255, .42); }
.au-card.sc::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, rgba(117, 147, 234, .35), #7593EA, rgba(117, 147, 234, .35)); }
.sc-head { display: grid; justify-items: center; gap: .3rem; padding: 1rem 1rem .85rem; text-align: center; background: linear-gradient(180deg, rgba(190, 210, 255, .3), rgba(190, 210, 255, .12)); border-bottom: 1px solid rgba(225, 235, 255, .25); }
.au-card.sc h2 { margin: 0; color: #fff; font: 400 clamp(1.45rem, 1.9vw, 1.75rem)/1.1 var(--dutch), var(--stella); text-transform: uppercase; letter-spacing: -1px; text-shadow: 0 2px 10px rgba(0, 10, 60, .5); }
.au-card.sc .aug-tags { justify-content: center; color: #9fb5f2; }
/* 유리 진열장 */
.sc-case { position: relative; display: block; margin: 14px 14px 0; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 55% at 50% 0%, rgba(160, 190, 255, .22), transparent 70%), linear-gradient(180deg, rgba(8, 14, 40, .55), rgba(4, 8, 26, .8));
  box-shadow: inset 0 0 0 1px rgba(225, 235, 255, .35), inset 0 0 0 4px rgba(255, 255, 255, .04), inset 0 -30px 40px -20px rgba(0, 0, 0, .6), 0 8px 18px rgba(0, 0, 0, .35); }
.sc-case .au-img { position: absolute; inset: 8% 6% 13%; z-index: 1; aspect-ratio: auto; border-radius: 0; background: none; overflow: visible; }
.sc-case .au-img img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .55)); }
.sc-case .au-ph { inset: 6% 0 0; color: rgba(200, 215, 255, .32); }
.sc-spot { position: absolute; left: 50%; top: -20%; z-index: 0; width: 80%; height: 90%; translate: -50% 0; background: radial-gradient(50% 60% at 50% 30%, rgba(220, 232, 255, .28), transparent 70%); pointer-events: none; }
.sc-floor { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 18%; background: linear-gradient(180deg, rgba(225, 235, 255, .16), rgba(225, 235, 255, .04)); border-top: 1px solid rgba(225, 235, 255, .35); }
.sc-floor::after { content: ''; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent); }
.sc-glass { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 18%, transparent 30%, transparent 62%, rgba(255, 255, 255, .08) 70%, transparent 78%),
              linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 14%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45), inset -1px -1px 0 rgba(255, 255, 255, .12); transition: background-position .9s var(--ease); background-size: 220% 100%, 100% 100%; background-position: 0 0, 0 0; }
.au-card.sc:hover .sc-glass { background-position: 60% 0, 0 0; }
/* 이름표 */
.sc-plates { display: flex; justify-content: space-around; gap: .6rem; padding: .9rem 14px 0; text-align: center; }
.sc-plate { display: grid; gap: .2rem; min-width: 0; }
.sc-plate b { font: 600 var(--t-sm)/1.3 var(--f-ui); color: #fff; }
.sc-plate small { font: 400 var(--t-xs)/1.4 var(--f-ui); color: rgba(225, 235, 255, .75); }
.au-card.sc .aug-body { padding: .8rem 1.1rem 1.3rem; text-align: center; gap: .5rem; }
.au-card.sc .au-desc { color: rgba(225, 235, 255, .7); font-size: var(--t-xs); line-height: 1.7; }
.au-card.sc .au-n { justify-content: center; color: rgba(225, 235, 255, .55); }
@media (max-width: 700px) { .au-card.sc { padding: 0; } .sc-case { margin: 10px 10px 0; } }
.ccard { --w: clamp(180px, min(27vw, calc((100svh - 350px) / 1.55)), 390px); }

/* ==========================================================================
   v22
   ========================================================================== */
:root { --panel: rgba(0, 0, 0, .5); }
/* 카테고리 = AU 카드 제목 글꼴 */
.topnav a { font-family: var(--dutch); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 720px) { .topnav a { font-size: .86rem; } }
/* RP 이름 */
.rd-rp .nm, .rd-rp.novel .nm { color: #a3b8f2; font-size: calc(1.1em - 2px); margin-bottom: .6rem; }
/* TRPG 글자 1px 작게 */
.rd-trpg .r-body { font-size: calc(var(--fs, 17px) - 1px); }
.rd-trpg .narr { font-size: 1em; }
.rd-trpg .r-head .sub, .rd-trpg .r-tagline { font-size: calc(var(--t-sm) - 1px); }
.rd-trpg .tk small, .rd-trpg .dk { font-size: calc(var(--t-xs) - 1px); }
.rd-trpg .tk b, .rd-trpg .dcard, .rd-trpg .dt em { font-size: calc(var(--t-sm) - 1px); }
.rd-trpg .r-head h1 { font-size: calc(var(--t-h1) - 1px); }
/* 갤러리 페이드는 갤러리 페이지에만 (AU 그림이 안 보이던 문제) */
.masonry.au-m .g-item { opacity: 1; translate: none; }

/* ---- AU 게시글 머리: 쇼윈도 스타일 ---- */
.au-head.sc-headbox { grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; padding: clamp(16px, 2.2vw, 26px); border: 0; border-radius: 26px 26px 12px 12px; background: rgba(255, 255, 255, .06); color: #eef3ff; box-shadow: 0 24px 50px rgba(0, 4, 30, .55), inset 0 0 0 1px rgba(225, 235, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: relative; overflow: hidden; }
.au-head.sc-headbox::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, rgba(117, 147, 234, .35), #7593EA, rgba(117, 147, 234, .35)); }
.au-head.sc-headbox .sc-case { margin: 0; }
.au-head.sc-headbox h1 { color: #fff; font: 400 var(--t-h1)/1.1 var(--dutch), var(--stella); text-transform: uppercase; letter-spacing: -1px; text-shadow: 0 2px 12px rgba(0, 10, 60, .5); }
.au-head.sc-headbox .aug-tags { justify-content: flex-start; color: #9fb5f2; margin: .6rem 0 .9rem; }
.au-head.sc-headbox .au-desc { color: rgba(225, 235, 255, .78); font: 400 var(--t-sm)/1.7 var(--f-ui); }
.au-hd { min-width: 0; padding-top: .4rem; }
.au-ppl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.au-p { margin: 0; padding: 1rem 1.1rem; border-radius: 12px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(225, 235, 255, .16); font-family: var(--f-ui); }
.au-p dt { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(225, 235, 255, .16); }
.au-p dt b { font: 600 1.05rem/1.2 var(--f-ui); color: #fff; }
.au-pav { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 34px; box-shadow: 0 0 0 1px rgba(225, 235, 255, .4); }
.au-pav img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.au-p > div { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .5rem; padding: .22rem 0; }
.au-p dd { margin: 0; font-size: var(--t-sm); color: #eef3ff; }
.au-p dd.k { font-size: var(--t-xs); color: rgba(225, 235, 255, .55); padding-top: .1rem; }
@media (max-width: 700px) { .au-head.sc-headbox { grid-template-columns: 1fr; } .au-ppl { grid-template-columns: 1fr; } }

/* ---- 탭: 파란 막대가 미끄러지듯 ---- */
.au-tabs { position: relative; }
.au-tabs button { border-bottom: 0; font-family: var(--f-ui); }
.au-tabs button[aria-selected="true"] { color: #fff; }
.au-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: #7593EA; border-radius: 2px; transition: transform .45s cubic-bezier(.3, .9, .3, 1), width .45s cubic-bezier(.3, .9, .3, 1); box-shadow: 0 0 10px rgba(117, 147, 234, .7); }

/* ---- 썰: 3열 카드 → 펼치면 전체 폭 ---- */
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
.sc-st { margin: 0; padding: 0; background: none; }
.sc-st.open { grid-column: auto; }
.st-card { display: grid; gap: .55rem; width: 100%; height: 100%; min-height: 168px; align-content: start; padding: 1.2rem 1.3rem 1.3rem; text-align: left; border: 0; border-radius: 14px; background: var(--panel); color: #eef3ff; box-shadow: inset 0 0 0 1px rgba(225, 235, 255, .14); cursor: pointer; transition: box-shadow .35s, background .35s; }
.st-card:hover { box-shadow: inset 0 0 0 1px rgba(117, 147, 234, .7); background: rgba(0, 0, 0, .6); }
.st-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font: 500 var(--t-xs)/1 var(--f-ui); color: rgba(225, 235, 255, .55); }
.st-top i { font-style: normal; font-weight: 600; letter-spacing: .14em; color: #7593EA; }
.st-card h3 { margin: 0; font: 400 1.25rem/1.35 var(--f-title); color: #fff; }
.st-pre { font: 400 var(--t-xs)/1.7 var(--f-ui); color: rgba(225, 235, 255, .7); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-full { padding: clamp(18px, 3vw, 34px); border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(225, 235, 255, .14); }
.st-full header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(225, 235, 255, .18); }
.st-full h3 { margin: 0; font: 400 var(--t-h2)/1.3 var(--f-title); color: #fff; }
.st-x { padding: .35rem .9rem; border: 1px solid rgba(225, 235, 255, .35); border-radius: 99px; background: none; color: #dfe8ff; font: 500 var(--t-xs)/1 var(--f-ui); cursor: pointer; }
.st-x:hover { background: rgba(225, 235, 255, .12); }
.st-full .au-body { max-width: 40em; font: 400 var(--t-body)/1.95 var(--serif-b); }
@media (max-width: 900px) { .st-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .st-grid { grid-template-columns: 1fr; } }

/* 트위터 타래 */
.th { list-style: none; margin: 0 auto; padding: 0; max-width: 600px; }
.tw { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .8rem; padding-bottom: 1.3rem; }
.tw:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 50px; bottom: 4px; width: 2px; background: rgba(225, 235, 255, .2); border-radius: 2px; }
.tw-av, .kt-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: rgba(117, 147, 234, .35); color: #fff; font: 600 1rem/1 var(--f-ui); }
.tw-av img, .kt-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.tw-h { margin: .1rem 0 .25rem; display: flex; gap: .4rem; align-items: baseline; }
.tw-h b { font: 700 var(--t-sm)/1.2 var(--f-ui); color: #fff; }
.tw-h small { font: 400 var(--t-xs)/1.2 var(--f-ui); color: rgba(225, 235, 255, .5); }
.tw-t { margin: 0; font: 400 var(--t-sm)/1.7 var(--f-ui); color: #eef3ff; white-space: pre-line; }
/* 카톡 */
.kt { max-width: 560px; margin: 0 auto; padding: 1.2rem 1rem; border-radius: 14px; background: rgba(155, 187, 212, .16); display: grid; gap: .5rem; }
.kt-sys { justify-self: center; margin: .3rem 0; padding: .2rem .8rem; border-radius: 99px; background: rgba(0, 0, 0, .3); font: 400 var(--t-xs)/1.4 var(--f-ui); color: rgba(225, 235, 255, .8); }
.kt-m { display: flex; gap: .55rem; align-items: flex-start; }
.kt-m.cont { margin-top: -.25rem; }
.kt-av { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 14px; }
.kt-m.cont .kt-av { background: none; }
.kt-m > div { display: grid; gap: .25rem; justify-items: start; max-width: 74%; }
.kt-n { margin: 0 0 .1rem; font: 500 var(--t-xs)/1 var(--f-ui); color: rgba(225, 235, 255, .8); }
.kt-b { margin: 0; padding: .5rem .8rem; border-radius: 4px 14px 14px 14px; background: #fff; color: #1b1f2a; font: 400 var(--t-sm)/1.5 var(--f-ui); word-break: keep-all; overflow-wrap: anywhere; }
.kt-m.me { justify-content: flex-end; }
.kt-m.me > div { justify-items: end; }
.kt-m.me .kt-b { border-radius: 14px 4px 14px 14px; background: #fee500; color: #1b1a12; }

/* ---------- v23 ---------- */
/* RP·TRPG 이름 통일 (Pretendard Bold -1px, 옅은 흰빛) */
.reader .nm, .reader.novel .nm, .rd-rp .nm, .rd-rp.novel .nm { font-family: var(--f-ui); font-weight: 700; letter-spacing: -1px; font-size: calc(1.1em - 2px); margin-bottom: .6rem; color: #e3ecff; opacity: 1; }
/* 펼친 썰: 칸 너비 그대로, 아래로 길게 */
.sc-st.open .st-full { padding: 1.2rem 1.1rem; }
.sc-st .th { max-width: none; }
.sc-st .kt { max-width: none; padding: .9rem .7rem; }
.sc-st .kt-m > div { max-width: 82%; }
.sc-st .st-full h3 { font-size: 1.25rem; }
/* 프로필 카드: 마우스를 올리면 바깥 빛 */
.ccard .cc-in { transition: transform 1s var(--ease), box-shadow .6s ease; }
.ccard:hover .cc-in, .ccard:focus-visible .cc-in { box-shadow: 0 0 0 1px rgba(170, 200, 255, .35), 0 0 22px 4px rgba(120, 165, 255, .45), 0 0 60px 12px rgba(80, 130, 255, .25); }
.ccard:hover .cc-in, .ccard:focus-visible .cc-in { box-shadow: 0 14px 30px rgba(0, 6, 40, .25); }
.ccard::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .6s ease; box-shadow: 0 0 0 1px rgba(170, 200, 255, .4), 0 0 24px 6px rgba(120, 165, 255, .5), 0 0 70px 16px rgba(80, 130, 255, .28); }
.ccard:hover::after, .ccard:focus-visible::after { opacity: 1; }
.ccard { isolation: isolate; }
.ccard::after { box-shadow: 0 0 0 1px rgba(220, 235, 255, .7), 0 0 18px 4px rgba(200, 225, 255, .75), 0 0 46px 14px rgba(140, 185, 255, .55), 0 0 90px 26px rgba(100, 150, 255, .3); }

/* ---------- v24 ---------- */
/* RP 목록 번호·날짜, 분류 버튼 Pretendard */
.rp-n, .rp-meta, .rp-meta time, .cats button { font-family: var(--f-ui); }
.rp-n { font-size: 1.1rem; font-weight: 500; letter-spacing: 0; }
.rp-meta time { font-size: var(--t-xs); font-weight: 500; letter-spacing: .02em; }
/* 펼친 썰: 제목 줄을 누르면 접혀요 */
.st-full header { cursor: pointer; }
.st-full header:hover h3 { color: #c9d6ff; }
.kt-m.me .kt-av { order: 2; }
/* 프로필 카드 바깥 빛 제거, 토글 조금 아래로 */
.ccard::after { display: none; }
.chpage .c-head { margin-bottom: 0; }
.age-tog { margin-top: clamp(1.4rem, 3vh, 2.2rem); }
/* 편집 도구는 전부 Pretendard */
#ed-bar, #ed-bar *, .ed-dlg, .ed-dlg *, .ed-btn, .ed-add, #ed-toast, .ad-page .ad-box, .ad-page .ad-box *, .ad-login, .ad-login * { font-family: var(--f-ui) !important; letter-spacing: -.01em; }
.ed-dlg h2 { font-weight: 700; }
.ed-l { font-weight: 600; }
.ed-dlg textarea { font-size: .92rem; line-height: 1.7; }
.ed-h { line-height: 1.6; }
.age-tog { margin: clamp(1.8rem, 4vh, 2.6rem) 0 clamp(1.2rem, 3vh, 2rem); }

/* ---------- v25 ---------- */
/* 상단 카테고리 Pretendard */
.topnav a { font: 500 .9rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 720px) { .topnav a { font-size: .8rem; letter-spacing: .06em; } }
/* 스크롤바 자리를 모든 페이지에서 항상 비워 둬서, 스크롤이 생겼다 없어져도 화면이 옆으로 움직이지 않게 */
html, html:has(body[data-route="page"]) { scrollbar-gutter: stable; overflow-y: scroll; }
html:has(body[data-route="home"]) { overflow-y: scroll; }
body[data-route="home"] { overflow: hidden; }

/* ---------- v26 ---------- */
.topnav a { font: 400 .95rem/1 var(--f-title); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 720px) { .topnav a { font-size: .84rem; letter-spacing: .05em; } }
/* 프로필: 검은 상자는 본문 너비 그대로 한마디부터 끝까지, 전신 이미지는 상자 위에 겹쳐 가로 전체 */
.pf { background: none; position: relative; isolation: isolate; }
.pf::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 0; bottom: 0; translate: -50% 0; width: min(100% - 32px, calc(760px + 2 * clamp(18px, 4vw, 48px))); background: var(--panel); border-radius: 18px; pointer-events: none; }
.pf-full { position: relative; z-index: 2; }
.pf-doc { background: none; }

/* ---------- v27 프로필 상세: 상자 없이 배경을 어둡게 ---------- */
.pf::before { display: none; }
body[data-route="char"] #veil { opacity: 1; background: linear-gradient(180deg, rgba(2, 8, 40, .72) 0%, rgba(2, 10, 46, .82) 45%, rgba(2, 10, 46, .88) 100%); }
.d-trait h3 { font-family: var(--serif-b); font-weight: 700; letter-spacing: -.01em; }

/* ---------- v28 프로필 ---------- */
body[data-route="char"] #veil { z-index: -1; }
body[data-route="char"] #sky { z-index: -2; }

/* ---------- v29 보호글 ---------- */
.lk { display: grid; justify-items: center; gap: .6rem; max-width: 420px; margin: 2.4rem auto; padding: 2rem 1.6rem; border-radius: 16px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(225, 235, 255, .18); text-align: center; font-family: var(--f-ui); color: #eef3ff; }
.lk.sm { margin: 1rem auto; padding: 1.4rem 1rem; background: rgba(0, 0, 0, .25); }
.lk-ico, .lk-mark { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lk-ico { width: 30px; height: 30px; color: #a3b8f2; }
.lk-mark { width: .8em; height: .8em; margin-right: .3em; vertical-align: -.05em; color: #a3b8f2; }
.lk-t { margin: 0; font-weight: 600; font-size: var(--t-sm); }
.lk-h { margin: 0; font-size: var(--t-xs); color: rgba(225, 235, 255, .7); line-height: 1.6; }
.lk-row { display: flex; gap: .5rem; width: 100%; max-width: 300px; margin-top: .4rem; }
.lk input { flex: 1; min-width: 0; padding: .55rem .8rem; border: 1px solid rgba(225, 235, 255, .35); border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff; font: 500 var(--t-sm)/1.2 var(--f-ui); }
.lk input:focus { outline: 2px solid #7593EA; outline-offset: 1px; }
.lk button { padding: .55rem 1.1rem; border: 0; border-radius: 10px; background: #7593EA; color: #fff; font: 600 var(--t-sm)/1.2 var(--f-ui); cursor: pointer; }
.lk button:disabled { opacity: .6; }
.lk-e { margin: 0; color: #ff9aae; font-size: var(--t-xs); }
body[data-route="comic-read"] .lk { background: #f3f5fb; color: #1b2142; box-shadow: inset 0 0 0 1px rgba(27, 33, 66, .12); }
body[data-route="comic-read"] .lk input { background: #fff; color: #1b2142; border-color: rgba(27, 33, 66, .25); }
body[data-route="comic-read"] .lk-h { color: #5a6385; }
.reader:has(.r-body > .lk) .r-tools { display: none; }

/* ---------- v31 ---------- */
/* 게시판 설명: 세리프 */
.phead .sub, .c-head .hint { font-family: var(--serif-b); }
/* 프로필 상세: 위에서부터 차례로 떠오르며 나타나기 */
@keyframes upin { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
.pf { animation: upin 1.1s cubic-bezier(.2, .7, .25, 1) .05s backwards; }
/* 만화·AU 목록: 순서대로 떠오르기 */
.log-grid > .log-card, .au-grid > .au-card { animation: upin .9s cubic-bezier(.2, .7, .25, 1) backwards; }
.log-grid > :nth-child(2), .au-grid > :nth-child(2) { animation-delay: .1s; }
.log-grid > :nth-child(3), .au-grid > :nth-child(3) { animation-delay: .2s; }
.log-grid > :nth-child(4), .au-grid > :nth-child(4) { animation-delay: .3s; }
.log-grid > :nth-child(5), .au-grid > :nth-child(5) { animation-delay: .4s; }
.log-grid > :nth-child(6), .au-grid > :nth-child(6) { animation-delay: .5s; }
.log-grid > :nth-child(7), .au-grid > :nth-child(7) { animation-delay: .6s; }
.log-grid > :nth-child(n+8), .au-grid > :nth-child(n+8) { animation-delay: .7s; }
@media (prefers-reduced-motion: reduce) { .pf, .log-grid > .log-card, .au-grid > .au-card { animation: none; } }

/* ==========================================================================
   v34 — 중세 판타지 게임 UI
   ========================================================================== */
:root { --gold: #ffffff; --gold-d: rgba(255, 255, 255, .35);
  --c-tl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M2%2038V10Q2%202%2010%202H38%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M8%2038V16Q8%208%2016%208H38%22%20stroke-width%3D%22.7%22%20opacity%3D%22.6%22/%3E%3Cpath%20d%3D%22M14%2014Q22%2014%2022%2022Q16%2022%2014%2014Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%20opacity%3D%22.9%22/%3E%3Cpath%20d%3D%22M2%202l4%204%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%228%22%20r%3D%221.3%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2226%22%20r%3D%221.3%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22/%3E%3C/svg%3E"); --c-tr: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate%2840%200%29%20scale%28-1%201%29%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M2%2038V10Q2%202%2010%202H38%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M8%2038V16Q8%208%2016%208H38%22%20stroke-width%3D%22.7%22%20opacity%3D%22.6%22/%3E%3Cpath%20d%3D%22M14%2014Q22%2014%2022%2022Q16%2022%2014%2014Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%20opacity%3D%22.9%22/%3E%3Cpath%20d%3D%22M2%202l4%204%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%228%22%20r%3D%221.3%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2226%22%20r%3D%221.3%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22/%3E%3C/g%3E%3C/svg%3E"); --c-bl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate%280%2040%29%20scale%281%20-1%29%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M2%2038V10Q2%202%2010%202H38%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M8%2038V16Q8%208%2016%208H38%22%20stroke-width%3D%22.7%22%20opacity%3D%22.6%22/%3E%3Cpath%20d%3D%22M14%2014Q22%2014%2022%2022Q16%2022%2014%2014Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%20opacity%3D%22.9%22/%3E%3Cpath%20d%3D%22M2%202l4%204%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%228%22%20r%3D%221.3%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2226%22%20r%3D%221.3%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22/%3E%3C/g%3E%3C/svg%3E"); --c-br: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate%2840%2040%29%20scale%28-1%20-1%29%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M2%2038V10Q2%202%2010%202H38%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M8%2038V16Q8%208%2016%208H38%22%20stroke-width%3D%22.7%22%20opacity%3D%22.6%22/%3E%3Cpath%20d%3D%22M14%2014Q22%2014%2022%2022Q16%2022%2014%2014Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%20opacity%3D%22.9%22/%3E%3Cpath%20d%3D%22M2%202l4%204%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%228%22%20r%3D%221.3%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2226%22%20r%3D%221.3%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22/%3E%3C/g%3E%3C/svg%3E"); }
/* 커서: 금테 화살표 / 누를 수 있는 곳은 반짝이는 화살표 */
html { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M3%202L21%2011.5L13%2013.5L9.5%2022Z%22%20fill%3D%22%230b1440%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M6.5%206.5L13%2013.5%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") 3 2, auto; }
a, button, [role="button"], label, summary, .ccard, .g-item, .st-card, .st-full header { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M3%202L21%2011.5L13%2013.5L9.5%2022Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%230b1440%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M19%203l1.2%202.8L23%207l-2.8%201.2L19%2011l-1.2-2.8L15%207l2.8-1.2Z%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E") 3 2, pointer; }
input, textarea { cursor: text; }
/* 스크롤바 */
html { scrollbar-color: rgba(255, 255, 255, .45) rgba(4, 10, 36, .6); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(4, 10, 36, .7); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #eef2fb, #8d96b0); border-radius: 6px; border: 2px solid rgba(4, 10, 36, .7); }

/* 상단 메뉴: 게임 메뉴처럼 선택된 항목 양옆에 마름모 표시 */
.topnav a::after { display: none; }
.topnav a::before { content: '◆'; position: absolute; left: 50%; bottom: .15rem; translate: -50% 0; font-size: .42rem; color: var(--gold); opacity: 0; transition: opacity .35s, translate .45s var(--ease); text-shadow: 0 0 8px rgba(255, 255, 255, .9); }
.topnav a:hover::before, .topnav a[aria-current]::before, .topnav a.on::before { opacity: 1; }
.topnav a { transition: color .3s, text-shadow .3s; }
.topnav a:hover, .topnav a[aria-current], .topnav a.on { color: #ffffff; text-shadow: 0 0 12px rgba(255, 255, 255, .65), 0 2px 6px rgba(0, 10, 60, .6); }

/* 게시판 대제목: 은빛 크롬 글씨 + 반짝임 */
.phead h1, .c-head h1 { position: relative; display: inline-block; background: linear-gradient(180deg, #ffffff 0%, #e8eeff 40%, #9fb4e6 52%, #f7f9ff 60%, #c9d6ff 86%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 6px rgba(0, 12, 70, .55)) drop-shadow(0 0 18px rgba(130, 165, 255, .35)); }
.phead h1::after, .c-head h1::after { content: ''; position: absolute; right: -.18em; top: .02em; width: .34em; height: .34em; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 6px #fff); animation: ttsp 4.6s ease-in-out 1s infinite; }
.phead h1 .sample { -webkit-text-fill-color: initial; }

/* 창(패널): 금테 두 줄 + 네 모서리 장식 */
.reader, .log-card, .st-card, .st-full, .au-p, .lk {
  background: var(--c-tl) left 8px top 8px / 26px no-repeat, var(--c-tr) right 8px top 8px / 26px no-repeat, var(--c-bl) left 8px bottom 8px / 26px no-repeat, var(--c-br) right 8px bottom 8px / 26px no-repeat, var(--panel);
  box-shadow: inset 0 0 0 1px var(--gold-d), 0 18px 40px rgba(0, 4, 30, .35); outline: 1px solid rgba(255, 255, 255, .14); outline-offset: -6px; }
.reader { border-radius: 6px; }
.log-card, .st-card, .st-full { border: 0; border-radius: 4px; }
.au-p { background-size: 18px, 18px, 18px, 18px, auto; background-position: left 5px top 5px, right 5px top 5px, left 5px bottom 5px, right 5px bottom 5px, 0 0; }
.lk { border-radius: 6px; }
.st-card:hover, .log-card:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 24px rgba(255, 255, 255, .18), 0 18px 40px rgba(0, 4, 30, .35); }
body[data-route="comic-read"] .lk { background: #f3f5fb; outline: 0; }

/* 분류 버튼: 게임 탭 */
.cats button { position: relative; padding-left: 1.4em; border-radius: 3px; border-color: var(--gold-d); }
.cats button::before { content: '◇'; position: absolute; left: .55em; top: 50%; translate: 0 -50%; font-size: .7em; color: var(--gold); }
.cats button[aria-pressed="true"]::before { content: '◆'; }
.cats button[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 255, 255, .25); }

/* 뒤로 가기: ◀ */
.back { letter-spacing: .08em; }
.back:hover { color: #ffffff; text-shadow: 0 0 8px rgba(255, 255, 255, .6); }

/* 역극 목록: 고른 줄 앞에 게임 선택 커서 */
.rp-row { position: relative; }
.rp-row::before { content: '▶'; position: absolute; left: -1.1rem; top: 1.65rem; font-size: .7rem; color: var(--gold); opacity: 0; translate: -6px 0; transition: opacity .3s, translate .4s var(--ease); text-shadow: 0 0 8px rgba(255, 255, 255, .8); }
.rp-row:hover::before { opacity: 1; translate: 0 0; }
.rp-row:hover .rp-main b { color: #ffffff; }

/* 프로필 상세 소제목 줄에 마름모 */
.d-h2::before, .d-h2::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8)); }
.d-h2 span { position: relative; }

/* 탭 막대·토글 금빛 */
.au-bar { background: var(--gold); box-shadow: 0 0 10px rgba(255, 255, 255, .7); }
.reader, .log-card, .st-card, .st-full, .lk { background-size: 34px, 34px, 34px, 34px, auto; }
.st-card { padding: 1.5rem 1.7rem 1.6rem; }
.log-card { padding-bottom: 2.2rem; }

/* ---------- v35 ---------- */
/* 커서: 닻 */
html { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20stroke%3D%22%230b1440%22%20stroke-width%3D%224%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%225%22%20r%3D%222.6%22/%3E%3Cpath%20d%3D%22M14%207.6V24M8.5%2011.5H19.5M4.5%2017.5Q6%2024%2014%2024Q22%2024%2023.5%2017.5%22/%3E%3C/g%3E%3Cg%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%225%22%20r%3D%222.6%22/%3E%3Cpath%20d%3D%22M14%207.6V24M8.5%2011.5H19.5M4.5%2017.5Q6%2024%2014%2024Q22%2024%2023.5%2017.5%22/%3E%3C/g%3E%3Cpath%20d%3D%22M2.5%2016.5L4.5%2019.5L6.8%2016.8ZM25.5%2016.5L23.5%2019.5L21.2%2016.8Z%22%20fill%3D%22%23ffffff%22/%3E%3C/svg%3E") 14 4, auto; }
a, button, [role="button"], label, summary, .ccard, .g-item, .st-card, .st-full header { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20stroke%3D%22%230b1440%22%20stroke-width%3D%224%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%225%22%20r%3D%222.6%22/%3E%3Cpath%20d%3D%22M14%207.6V24M8.5%2011.5H19.5M4.5%2017.5Q6%2024%2014%2024Q22%2024%2023.5%2017.5%22/%3E%3C/g%3E%3Cg%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%225%22%20r%3D%222.6%22/%3E%3Cpath%20d%3D%22M14%207.6V24M8.5%2011.5H19.5M4.5%2017.5Q6%2024%2014%2024Q22%2024%2023.5%2017.5%22/%3E%3C/g%3E%3Cpath%20d%3D%22M2.5%2016.5L4.5%2019.5L6.8%2016.8ZM25.5%2016.5L23.5%2019.5L21.2%2016.8Z%22%20fill%3D%22%23ffffff%22/%3E%3Cpath%20d%3D%22M24%202l1%202.4L27.4%205.4%2025%206.4%2024%208.8%2023%206.4%2020.6%205.4%2023%204.4Z%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E") 14 4, pointer; }
input, textarea { cursor: text; }
/* 게시판 대제목 반짝이 제거 */
.phead h1::after, .c-head h1::after { display: none; }
/* 만화 글 제목은 글씨 효과 없이 */
body[data-route="comic-read"] .phead h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #121735; filter: none; text-shadow: none; }
/* AU 썰 카드: 모서리 장식만 빼고 두 줄 테두리는 그대로 */
.st-card, .st-full { background: var(--panel); }
/* 만화 목록 카드: 테두리를 썸네일 위 레이어로 */
.log-card { position: relative; background: var(--panel); box-shadow: 0 18px 40px rgba(0, 4, 30, .35); outline: 0; }
.log-card::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: var(--c-tl) left 8px top 8px / 34px no-repeat, var(--c-tr) right 8px top 8px / 34px no-repeat, var(--c-bl) left 8px bottom 8px / 34px no-repeat, var(--c-br) right 8px bottom 8px / 34px no-repeat;
  box-shadow: inset 0 0 0 1px var(--gold-d); outline: 1px solid rgba(255, 255, 255, .14); outline-offset: -6px; transition: box-shadow .4s; }
.log-card:hover { box-shadow: 0 0 24px rgba(255, 255, 255, .18), 0 18px 40px rgba(0, 4, 30, .35); }
.log-card:hover::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }

/* ---------- v36 커서: 흰 닻 + 왼쪽 위 가리키는 삼각형 ---------- */
html { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1%201L10%204.2L4.2%2010Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%230b1440%22%20stroke-width%3D%221%22/%3E%3Cg%20transform%3D%22translate%285%204%29%22%3E%3Cg%20stroke%3D%22%230b1440%22%20stroke-width%3D%223.6%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%225%22%20r%3D%222.4%22/%3E%3Cpath%20d%3D%22M13%207.4V23M8%2011H18M4%2016.5Q5.5%2023%2013%2023Q20.5%2023%2022%2016.5%22/%3E%3C/g%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%225%22%20r%3D%222.4%22/%3E%3Cpath%20d%3D%22M13%207.4V23M8%2011H18M4%2016.5Q5.5%2023%2013%2023Q20.5%2023%2022%2016.5%22/%3E%3C/g%3E%3Cpath%20d%3D%22M2%2015.6L4%2018.6L6.2%2015.9ZM24%2015.6L22%2018.6L19.8%2015.9Z%22%20fill%3D%22%23fff%22/%3E%3C/g%3E%3C/svg%3E") 1 1, auto; }
a, button, [role="button"], label, summary, .ccard, .g-item, .st-card, .st-full header { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1%201L10%204.2L4.2%2010Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%230b1440%22%20stroke-width%3D%221%22/%3E%3Cg%20transform%3D%22translate%285%204%29%22%3E%3Cg%20stroke%3D%22%230b1440%22%20stroke-width%3D%223.6%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%225%22%20r%3D%222.4%22/%3E%3Cpath%20d%3D%22M13%207.4V23M8%2011H18M4%2016.5Q5.5%2023%2013%2023Q20.5%2023%2022%2016.5%22/%3E%3C/g%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%225%22%20r%3D%222.4%22/%3E%3Cpath%20d%3D%22M13%207.4V23M8%2011H18M4%2016.5Q5.5%2023%2013%2023Q20.5%2023%2022%2016.5%22/%3E%3C/g%3E%3Cpath%20d%3D%22M2%2015.6L4%2018.6L6.2%2015.9ZM24%2015.6L22%2018.6L19.8%2015.9Z%22%20fill%3D%22%23fff%22/%3E%3C/g%3E%3C/svg%3E") 1 1, pointer; }
input, textarea { cursor: text; }

/* ==========================================================================
   v36 — 메인 (메인2.psd 배치) · 게임 메뉴 버튼 · Modern No. 20
   ========================================================================== */
:root { --modern: 'Modern No. 20', 'ModernNo20', 'Old Standard TT', 'Bodoni Moda', serif; --bask: 'Baskerville Old Face', 'BaskOldFace', 'Libre Baskerville', serif; }
.topnav a { font-family: var(--modern); font-weight: 400; letter-spacing: .06em; }
.phead h1, .c-head h1 { font-family: var(--modern); font-weight: 400; letter-spacing: -.01em; }
body[data-route="home"] .bar { display: none; }
.hm2 > .hm2-dd, .hm2 > .hm2-title, .hm2 > .hm2-sub { display: none; }
/* 제목 묶음: 날짜 · 제목 · D+ (PSD 좌표 기준, 화면이 좁아도 왼쪽 24px 안쪽으로) */
.h3-tt { position: absolute; left: max(24px, calc(50% - var(--sw) * .4409)); top: calc(50% - var(--sw) * .1034); width: calc(var(--sw) * .3948); text-align: center; color: #fff; text-shadow: 0 2px 4px rgba(0, 14, 80, .6), 0 4px 18px rgba(0, 20, 110, .55); animation: subin 2s var(--ease) .6s both; }
.h3-date { margin: 0; font: 300 calc(var(--sw) * 50 / 3840)/1 var(--f-ui); letter-spacing: -.025em; }
.h3-title { display: block; width: 100%; margin: calc(var(--sw) * .0224) 0 0; filter: drop-shadow(0 3px 5px rgba(0, 14, 80, .55)) drop-shadow(0 10px 28px rgba(0, 20, 110, .55)); }
.h3-day { margin: calc(var(--sw) * .0346) 0 0; font: 400 calc(var(--sw) * 125 / 3840)/1 var(--bask); letter-spacing: -.025em; }
.h3-day b { font-weight: 400; color: #AADCFF; }
/* 오른쪽 메뉴: 게임 메인 화면 선택 버튼 */
.h3-menu { position: absolute; right: max(20px, calc(50% - var(--sw) * .4617 - var(--sw) * .012)); top: calc(50% + var(--sw) * .0531); display: grid; gap: calc(var(--sw) * .0026); pointer-events: auto; }
.h3-btn { --h: calc(var(--sw) * .0234); position: relative; display: flex; align-items: center; justify-content: flex-end; width: calc(var(--sw) * .118); height: var(--h); padding: 0 calc(var(--sw) * .012) 0 0; color: #fff; text-decoration: none; isolation: isolate;
  font: 400 calc(var(--sw) * 50 / 3840)/1 var(--modern); letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0, 10, 60, .7);
  animation: btnin .8s cubic-bezier(.2, .7, .25, 1) calc(1s + var(--i) * .07s) both; }
.h3-btn::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(4, 12, 44, 0) 0%, rgba(4, 12, 44, .38) 45%, rgba(4, 12, 44, .46) 100%); clip-path: polygon(calc(var(--h) * .5) 0, 100% 0, calc(100% - var(--h) * .5) 100%, 0 100%); }
.h3-btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .34)); clip-path: polygon(calc(var(--h) * .5) 0, 100% 0, calc(100% - var(--h) * .5) 100%, 0 100%); transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.65, 0, .25, 1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.h3-btn span { position: relative; transition: letter-spacing .45s var(--ease); }
.h3-btn span::before { content: '›'; position: absolute; right: calc(100% + .5em); top: 50%; translate: -6px -54%; font-size: 1.3em; opacity: 0; transition: opacity .3s, translate .45s var(--ease); }
.h3-btn:hover::after, .h3-btn:focus-visible::after { transform: scaleX(1); }
.h3-btn:hover span::before, .h3-btn:focus-visible span::before { opacity: 1; translate: 0 -54%; }
.h3-btn:hover span, .h3-btn:focus-visible span { letter-spacing: .08em; }
.h3-btn:focus-visible { outline: none; }
@keyframes btnin { from { opacity: 0; translate: 18px 0; } to { opacity: 1; translate: 0 0; } }
/* 아래 문구 */
.h3-foot { position: absolute; left: 50%; top: min(calc(50% + var(--sw) * .2518), calc(100% - 46px)); translate: -50% 0; margin: 0; width: max-content; max-width: calc(100% - 32px); text-align: center; color: #343434; font: 300 max(11px, calc(var(--sw) * 41.67 / 3840))/1.4 var(--f-ui); letter-spacing: 0; animation: subin 2s var(--ease) 1.4s both; }
@media (max-width: 820px) {
  .h3-tt { left: 50%; translate: -50% 0; top: 24%; width: min(88vw, 560px); }
  .h3-date { font-size: 12px; } .h3-title { margin-top: 10px; } .h3-day { margin-top: 14px; font-size: 30px; }
  .h3-menu { right: auto; left: 50%; translate: -50% 0; top: calc(24% + min(88vw, 560px) * .33 + 120px); }
  .h3-btn { --h: 34px; width: min(62vw, 260px); font-size: 15px; padding-right: 18px; }
  .h3-foot { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); font-size: 10.5px; white-space: normal; width: calc(100% - 40px); color: #3c4256; }
}
@media (prefers-reduced-motion: reduce) { .h3-btn, .h3-tt, .h3-foot { animation: none; } }
.h3-btn { text-transform: uppercase; }
.h3-btn::before { background: linear-gradient(90deg, rgba(4, 12, 44, 0) 0%, rgba(4, 12, 44, .26) 45%, rgba(4, 12, 44, .32) 100%); }
.h3-btn::after { background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .48)); }

/* ---------- v37 메인: PSD 프레임 전체가 화면 안에 들어오게(양옆 여백) ---------- */
.hm2 { --hw: min(100vw, calc(100svh * 16 / 9)); }
.h3-tt { left: calc(50% - var(--hw) * .4409); top: calc(50% - var(--hw) * .1034); width: calc(var(--hw) * .3948); }
.h3-date { font-size: max(11px, calc(var(--hw) * 27 / 3840)); }
.h3-title { margin-top: calc(var(--hw) * .0224); }
.h3-day { margin-top: calc(var(--hw) * .0346); font-size: calc(var(--hw) * 125 / 3840); }
.h3-menu { right: calc(50% - var(--hw) * .4617 - var(--hw) * .008); top: calc(50% + var(--hw) * .057); gap: calc(var(--hw) * .0042); }
.h3-btn { --h: calc(var(--hw) * .0172); width: calc(var(--hw) * .105); padding-right: calc(var(--hw) * .008); font: 500 max(12px, calc(var(--hw) * 36 / 3840))/1 'Cinzel', serif; letter-spacing: .03em; text-transform: uppercase; }
.h3-btn::before { clip-path: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .1) 55%, rgba(255, 255, 255, .16) 100%); }
.h3-btn::after { clip-path: none; background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .42)); box-shadow: none; }
.h3-foot { top: min(calc(50% + var(--hw) * .2518), calc(100% - 40px)); font-size: max(10px, calc(var(--hw) * 22 / 3840)); }
/* 상단 카테고리: 첨부 gif 와 같은 세리프 대문자 */
.topnav a { font: 500 .92rem/1 'Cinzel', serif; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 820px) {
  .h3-tt { left: 50%; top: 24%; width: min(88vw, 560px); }
  .h3-date { font-size: 11px; } .h3-day { font-size: 30px; margin-top: 14px; } .h3-title { margin-top: 10px; }
  .h3-menu { right: auto; left: 50%; top: calc(24% + min(88vw, 560px) * .33 + 120px); gap: 6px; }
  .h3-btn { --h: 28px; width: min(56vw, 230px); font-size: 13px; padding-right: 14px; }
  .h3-foot { top: auto; font-size: 10px; }
  .topnav a { font-size: .78rem; }
}

/* ---------- v38 ---------- */
.h3-date { font-size: max(12px, calc(var(--hw) * 46 / 3840)); }
.h3-foot { top: auto; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); font-size: max(11px, calc(var(--hw) * 37 / 3840)); }
.phead[data-ed="board:au"] h1 { letter-spacing: -.075em; }
@media (max-width: 820px) {
  .h3-date { font-size: 13px; }
  .h3-foot { font-size: 11px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .h3-btn { justify-content: center; padding: 0; }
  .h3-btn span::before { right: calc(100% + .4em); }
}

/* ---------- v39 ---------- */
.h3-date { font-size: max(11px, calc(var(--hw) * 27 / 3840)); }
.h3-foot { font-size: max(10px, calc(var(--hw) * 22 / 3840)); color: #5c5f68; }
.phead h1, .c-head h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; -webkit-text-fill-color: currentColor; filter: drop-shadow(0 2px 8px rgba(0, 12, 70, .45)); }
body[data-route="char"] #veil { background: linear-gradient(180deg, rgba(10, 14, 34, .72) 0%, rgba(11, 15, 38, .82) 45%, rgba(11, 15, 38, .88) 100%); backdrop-filter: saturate(.8); -webkit-backdrop-filter: saturate(.8); }
@media (max-width: 820px) {
  .h3-date { font-size: 11px; }
  .h3-foot { font-size: 10px; color: #5c6070; }
}

/* ---------- v40 레코드판 플레이리스트 ---------- */
.mu { position: fixed; top: max(18px, env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); z-index: 80; font-family: var(--f-ui); color: #fff; cursor: inherit; }
.mu[hidden] { display: none; }
.mu button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: inherit; }
.mu svg { display: block; width: 100%; height: 100%; }
#mu-yt, .mu iframe { position: fixed !important; left: -9999px; top: 0; width: 200px; height: 200px; opacity: 0; pointer-events: none; }

/* 레코드판 */
.mu-disc { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, #0d1124 0 31%, transparent 31.5%), repeating-radial-gradient(circle, #070a18 0 1.1px, #121731 1.6px 2.4px), #090c1c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 26px rgba(0, 4, 30, .6); animation: muspin 3.4s linear infinite; animation-play-state: paused; }
.mu.playing .mu-disc { animation-play-state: running; }
.mu-grv { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 0 46%, rgba(255, 255, 255, .07) 46.5% 47%, transparent 47.5% 62%, rgba(255, 255, 255, .06) 62.5% 63%, transparent 63.5% 80%, rgba(255, 255, 255, .05) 80.5% 81%, transparent 81.5%); }
.mu-lbl { position: absolute; inset: 31%; border-radius: 50%; background: #dfe8ff center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 3px rgba(9, 12, 28, .9), 0 0 0 4px rgba(255, 255, 255, .2); }
.mu.mu-empty .mu-lbl, .mu-lbl[style*="none"] { background: radial-gradient(circle at 40% 38%, #fff, #b9c9f2 60%, #7d92c9); }
.mu-disc > i { position: absolute; left: 50%; top: 50%; width: 7%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #0b0f22, 0 0 6px rgba(255, 255, 255, .8); }
@keyframes muspin { to { rotate: 360deg; } }

/* 접힌 모양 */
.mu-mini { display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 99px; background: rgba(4, 9, 32, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity .3s, scale .3s var(--ease); }
.mu-mini .mu-disc { width: 40px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.mu-mtx { display: grid; gap: 2px; text-align: left; max-width: 150px; }
.mu-mtx small { font: 500 9px/1 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.mu-mtx b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; font-size: 12px; letter-spacing: -.02em; }
.mu-mini:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.mu.open .mu-mini { opacity: 0; scale: .9; pointer-events: none; }
@media (max-width: 1279px) { .mu-mini { padding: 4px; } .mu-mtx { display: none; } }

/* 펼친 모양 */
.mu-panel { position: absolute; top: 0; right: 0; width: 300px; padding: 14px 16px 14px; border-radius: 14px; transform-origin: top right;
  background: linear-gradient(180deg, rgba(14, 22, 62, .78), rgba(4, 8, 30, .86)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 24px 60px rgba(0, 4, 30, .6);
  outline: 1px solid rgba(255, 255, 255, .12); outline-offset: -6px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; scale: .94; translate: 0 -6px; transition: opacity .3s var(--ease), scale .3s var(--ease), translate .3s var(--ease); }
.mu-panel.in { opacity: 1; scale: 1; translate: 0 0; }
.mu-deck { position: relative; height: 172px; margin: 0 0 12px; border-radius: 8px; background: radial-gradient(120% 90% at 30% 20%, rgba(117, 147, 234, .22), transparent 60%), rgba(2, 6, 24, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); overflow: hidden; }
.mu-deck::before { content: ''; position: absolute; inset: 0; background: radial-gradient(1px 1px at 82% 22%, #fff, transparent), radial-gradient(1px 1px at 90% 70%, rgba(255,255,255,.7), transparent), radial-gradient(1.4px 1.4px at 8% 84%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 64% 90%, rgba(255,255,255,.6), transparent); pointer-events: none; }
.mu-plate { position: absolute; left: 14px; top: 11px; width: 150px; aspect-ratio: 1; border-radius: 50%; padding: 4px; background: conic-gradient(from 210deg, rgba(255,255,255,.35), rgba(255,255,255,.08), rgba(255,255,255,.3), rgba(255,255,255,.06), rgba(255,255,255,.35)); }
.mu-plate .mu-disc { width: 100%; }
.mu-sheen { position: absolute; inset: 4px; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, .12) 12%, transparent 18% 50%, rgba(255, 255, 255, .09) 56%, transparent 62%); pointer-events: none; mix-blend-mode: screen; }
.mu-arm { position: absolute; left: 150px; top: 8px; width: 56px; height: 140px; transform-origin: 66.6% 12%; rotate: -24deg; transition: rotate .9s cubic-bezier(.3, .7, .2, 1); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.mu.playing .mu-arm, .mu.loading .mu-arm { rotate: 2deg; }
.mu-arm .a-b { fill: rgba(9, 14, 40, .9); stroke: rgba(255, 255, 255, .6); stroke-width: 1; }
.mu-arm .a-c { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1; }
.mu-arm .a-d, .mu-arm .a-h { fill: #fff; }
.mu-arm .a-r { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.mu-arm .a-w { fill: rgba(255, 255, 255, .5); }
.mu-no { position: absolute; right: 12px; bottom: 10px; font: 400 11px/1 'Cinzel', serif; letter-spacing: .08em; color: rgba(255, 255, 255, .55); }
.mu-no b { font-weight: 600; color: #fff; }
.mu-x { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; padding: 5px !important; border-radius: 50%; color: rgba(255, 255, 255, .7) !important; transition: background .2s, color .2s; }
.mu-x:hover { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
.mu-meta { padding: 0 2px; }
.mu-t { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 19px/1.3 var(--f-title); letter-spacing: -.02em; }
.mu-a { margin: 3px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; color: rgba(255, 255, 255, .55); letter-spacing: -.01em; }
.mu-prog { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 6px; margin: 12px 0 8px; font: 500 10.5px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .65); }
.mu-prog .mu-dur { text-align: right; }
.mu-wave { display: flex; align-items: center; gap: 2px; height: 26px; touch-action: none; outline: none; }
.mu-wave i { flex: 1; height: var(--h); min-height: 3px; border-radius: 1px; background: rgba(255, 255, 255, .22); transition: background .2s; }
.mu-wave i.on { background: #fff; box-shadow: 0 0 5px rgba(170, 220, 255, .6); }
.mu-wave:focus-visible { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); border-radius: 3px; }
.mu-ctl { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.mu-ctl button { position: relative; width: 34px; height: 34px; padding: 7px; border-radius: 50%; color: rgba(255, 255, 255, .78); transition: color .2s, background .2s, opacity .2s; }
.mu-ctl button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.mu-ctl button:disabled { opacity: .35; }
.mu-ctl .mu-pp { width: 46px; height: 46px; padding: 12px; background: #fff; color: #0a1030; box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 0 20px rgba(170, 210, 255, .45); }
.mu-ctl .mu-pp:hover { background: #fff; color: #0a1030; scale: 1.05; }
.mu-sh[aria-pressed="true"], .mu-rp:not([data-m="off"]) { color: #AADCFF !important; }
.mu-sh[aria-pressed="true"]::after, .mu-rp:not([data-m="off"])::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 3px; height: 3px; translate: -50% 0; border-radius: 50%; background: currentColor; }
.mu-rp b { position: absolute; right: 5px; top: 5px; font: 700 8px/1 var(--f-ui); }
.mu-vrow { display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 2px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.mu-vrow button { width: 26px; height: 26px; padding: 4px; border-radius: 50%; color: rgba(255, 255, 255, .7); }
.mu-vrow button:hover, .mu-ls.on { color: #fff; background: rgba(255, 255, 255, .1); }
.mu-vol { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; background: none; cursor: inherit; --v: 60%; }
.mu-vol::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--v), rgba(255, 255, 255, .22) var(--v)); }
.mu-vol::-moz-range-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--v), rgba(255, 255, 255, .22) var(--v)); }
.mu-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; rotate: 45deg; border-radius: 1px; background: #fff; box-shadow: 0 0 6px rgba(170, 220, 255, .8); }
.mu-vol::-moz-range-thumb { width: 9px; height: 9px; border: 0; rotate: 45deg; border-radius: 1px; background: #fff; }
.mu-list { margin: 10px 0 0; padding: 4px 0 0; list-style: none; max-height: 210px; overflow-y: auto; border-top: 1px solid rgba(255, 255, 255, .12); scrollbar-width: thin; }
.mu-list button { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; width: 100%; padding: 7px 6px !important; border-radius: 6px; text-align: left; transition: background .2s; }
.mu-list button:hover { background: rgba(255, 255, 255, .08) !important; }
.mu-list span { grid-row: span 2; font: 500 10px/1.7 'Cinzel', serif; color: rgba(255, 255, 255, .45); }
.mu-list b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; font-size: 12.5px; letter-spacing: -.02em; color: rgba(255, 255, 255, .85); }
.mu-list small { font-size: 10.5px; color: rgba(255, 255, 255, .45); }
.mu-list [aria-current] b, .mu-list [aria-current] span { color: #AADCFF; }
.mu-add button { display: block; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .7); }
.mu-note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
body.nav-hide .mu { translate: 0 -140%; transition: translate .45s cubic-bezier(.3, .7, .3, 1); }
.mu { transition: translate .45s cubic-bezier(.3, .7, .3, 1); }
@media (max-width: 720px) {
  .mu { top: auto; bottom: max(16px, env(safe-area-inset-bottom, 0px)); right: auto; left: max(16px, env(safe-area-inset-left, 0px)); }
  .mu-panel { top: auto; bottom: 0; right: auto; left: 0; width: min(300px, calc(100vw - 32px)); transform-origin: bottom left; translate: 0 6px; }
  body.nav-hide .mu { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .mu-disc { animation: none; } .mu-arm { transition: none; } }

/* ---------- v40 메인 양옆 여백 ---------- */
.h3-tt { left: calc(50% - var(--hw) * .418); }
.h3-menu { right: calc(50% - var(--hw) * .442); }
@media (max-width: 820px) { .h3-tt { left: 50%; } .h3-menu { right: auto; } }

/* ---------- v40 프로필 첫 화면 (왼쪽 정보 · 가운데 전신 · 오른쪽 배너) ---------- */
body[data-route="char"] main { padding-top: 0; }
.pf2 { animation: none; }
.px { position: relative; display: grid; grid-template-columns: minmax(360px, 30%) minmax(0, 1fr) clamp(210px, 17vw, 300px); grid-template-areas: 'l a b'; min-height: 100svh; padding-left: max(16px, 4.2vw); isolation: isolate; }
.px-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.px-ring { position: absolute; left: 58%; top: 52%; width: min(64vw, 92svh); translate: -50% -50%; color: rgba(255, 255, 255, .3); animation: pxring 120s linear infinite; }
@keyframes pxring { to { rotate: 360deg; } }
.px-sh { position: absolute; background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(170, 220, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); backdrop-filter: blur(2px); }
.px-sh.s1 { left: 40%; top: 14%; width: 22vw; height: 10vw; clip-path: polygon(0 60%, 100% 0, 78% 100%); }
.px-sh.s2 { left: 66%; top: 62%; width: 12vw; height: 14vw; clip-path: polygon(30% 0, 100% 70%, 0 100%); opacity: .8; }
.px-sh.s3 { left: 36%; top: 70%; width: 9vw; height: 6vw; clip-path: polygon(0 0, 100% 40%, 20% 100%); opacity: .6; }
.px-sh.s4 { left: 72%; top: 18%; width: 6vw; height: 9vw; clip-path: polygon(50% 0, 100% 100%, 0 80%); opacity: .55; }
.px-beam { position: absolute; left: 30%; top: -10%; width: 46vw; height: 140%; rotate: 24deg; background: linear-gradient(90deg, transparent, rgba(190, 225, 255, .08) 45%, rgba(255, 255, 255, .14) 50%, rgba(190, 225, 255, .08) 55%, transparent); filter: blur(6px); }
.pf-knight .px-sh { background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(220, 226, 255, .04)); }

.px-l { grid-area: l; position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 110px 0 56px; min-width: 0; }
.px-logo { position: absolute; left: 0; top: clamp(20px, 3vw, 34px); width: clamp(150px, 13vw, 210px); }
.px-logo img { display: block; width: 100%; filter: drop-shadow(0 2px 10px rgba(0, 10, 60, .5)); }
.px-k { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 11px/1 'Cinzel', serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.px-k a { color: inherit; text-decoration: none; }
.px-k > a:hover { color: #fff; }
.px-k > span:not(.px-age) { padding: 4px 7px; border: 1px solid rgba(255, 255, 255, .3); letter-spacing: .1em; }
.px-age { display: inline-flex; margin-left: auto; border: 1px solid rgba(255, 255, 255, .3); }
.px-age a { padding: 4px 9px; letter-spacing: .1em; transition: background .25s, color .25s; }
.px-age a[aria-current] { background: #fff; color: #0b1236; }
.px-age a:not([aria-current]):hover { background: rgba(255, 255, 255, .14); }
.px-nm { display: flex; align-items: stretch; gap: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .86)); color: #0b1236; box-shadow: 0 10px 30px rgba(0, 8, 50, .35); position: relative; }
.px-nm::after { content: ''; position: absolute; right: 8px; top: 8px; width: 22px; height: 3px; background: #7593EA; }
.px-ico { flex: none; display: grid; place-items: center; width: 58px; background: #0b1236; }
.px-ico svg { width: 22px; fill: #fff; filter: drop-shadow(0 0 6px rgba(170, 220, 255, .8)); }
.px-nm > div { padding: 12px 18px 13px; min-width: 0; }
.px-en { margin: 0 0 4px; font: 500 11px/1.2 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase; color: #4a5b92; }
.px-nm h1 { margin: 0; font: 400 clamp(1.6rem, 2.3vw, 2.2rem)/1.15 var(--f-title); letter-spacing: -.03em; word-break: keep-all; }
.px-info { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; }
.px-info > div { display: grid; grid-template-columns: 92px 1fr; min-width: 0; }
.px-info > div:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 92px 1fr; }
.px-info dt { padding: 6px 8px; background: rgba(255, 255, 255, .14); font: 500 9.5px/1.35 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); display: flex; align-items: center; }
.px-info dd { margin: 0; padding: 6px 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font: 500 12px/1.35 var(--f-ui); letter-spacing: -.02em; color: #fff; min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; }
.px-desc { margin: 6px 0 0; max-width: 34em; font: 400 13px/1.85 var(--f-ui); letter-spacing: -.02em; color: rgba(235, 242, 255, .82); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.px-voice { display: grid; gap: 12px; }
.px-voice > div { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; }
.px-voice span { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 99px; background: rgba(255, 255, 255, .9); color: #0b1236; font: 600 9.5px/1.2 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; }
.px-voice span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #7593EA; }
.px-voice p { margin: 0; font: 400 13px/1.7 var(--serif-b); color: #fff; letter-spacing: -.02em; }
.px-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.px-tags span { padding: 3px 9px; font: 500 11px/1.4 var(--f-ui); color: #AADCFF; box-shadow: inset 0 0 0 1px rgba(170, 220, 255, .35); letter-spacing: -.02em; }
.px-tags span::before { content: '#'; opacity: .6; margin-right: 1px; }

.px-art { grid-area: a; position: relative; z-index: 2; align-self: center; height: min(calc(100svh - 70px), 1100px); margin: 0 -4vw 0 -2vw; padding: 0; border: 0; background: none; cursor: zoom-in; }
.px-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 50px rgba(0, 6, 50, .55)); animation: pxart 1.4s cubic-bezier(.2, .7, .2, 1) .15s backwards; transition: scale 1.2s var(--ease); }
.px-art:hover img { scale: 1.015; }
@keyframes pxart { from { opacity: 0; translate: 40px 0; scale: 1.03; } }

.px-ban { grid-area: b; position: relative; z-index: 1; height: 100svh; min-height: 640px; position: sticky; top: 0; overflow: hidden; cursor: zoom-in; background: linear-gradient(180deg, #dfe9ff, #a9bdf0); box-shadow: -1px 0 0 rgba(255, 255, 255, .35), -20px 0 60px rgba(0, 6, 40, .4); animation: pxban 1.1s cubic-bezier(.2, .7, .2, 1) backwards; }
.px-ban::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 12, 44, .55) 0%, transparent 18%, transparent 52%, rgba(6, 12, 44, .2) 70%, rgba(6, 12, 44, .92) 100%); pointer-events: none; }
.px-ban::after { content: ''; position: absolute; inset: 10px; z-index: 2; border: 1px solid rgba(255, 255, 255, .45); outline: 1px solid rgba(255, 255, 255, .2); outline-offset: 4px; pointer-events: none; }
.px-ban img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: scale 1.4s var(--ease); }
.px-ban:hover img { scale: 1.04; }
@keyframes pxban { from { opacity: 0; translate: 0 -30px; } }
.px-bv { position: absolute; z-index: 3; left: 22px; top: 50%; writing-mode: vertical-rl; rotate: 180deg; translate: 0 -50%; font: 500 10px/1 'Cinzel', serif; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px rgba(0, 0, 40, .6); white-space: nowrap; }
.px-bn { position: absolute; z-index: 3; right: 24px; top: 84px; font: 400 54px/1 var(--modern); color: rgba(255, 255, 255, .9); text-shadow: 0 2px 14px rgba(0, 10, 60, .5); }
.px-bb { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 30px; display: grid; gap: 6px; color: #fff; }
.px-st { display: flex; gap: 4px; margin: 0; }
.px-st svg { width: 13px; fill: #fff; filter: drop-shadow(0 0 4px rgba(170, 220, 255, .9)); }
.px-bb b { font: 400 clamp(1.8rem, 2.4vw, 2.5rem)/1 var(--modern); letter-spacing: -.02em; }
.px-bb small { font: 500 9.5px/1.5 'Cinzel', serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

.pf2 .pf-doc { margin-top: clamp(3rem, 7vw, 5rem); }
.pf2 .px-l > * { animation: upin .9s cubic-bezier(.2, .7, .25, 1) backwards; }
.pf2 .px-l > :nth-child(2) { animation-delay: .1s; } .pf2 .px-l > :nth-child(3) { animation-delay: .18s; } .pf2 .px-l > :nth-child(4) { animation-delay: .26s; }
.pf2 .px-l > :nth-child(5) { animation-delay: .34s; } .pf2 .px-l > :nth-child(6) { animation-delay: .42s; } .pf2 .px-l > :nth-child(7) { animation-delay: .5s; }

@media (max-width: 1100px) and (min-width: 821px) {
  .px { grid-template-columns: minmax(320px, 38%) minmax(0, 1fr) 190px; }
  .px-info { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .px { grid-template-columns: 1fr; grid-template-areas: 'a' 'l' 'b'; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); min-height: 0; }
  .px-logo { position: static; width: 150px; margin: 0 auto 6px; }
  .px-l { padding: 0 0 12px; gap: 14px; }
  .px-l > .px-logo { order: -1; }
  .px-art { height: 62svh; margin: 96px -16px 0; }
  .px-ring { left: 50%; top: 32%; width: 120vw; }
  .px-info { grid-template-columns: 1fr; }
  .px-voice > div { grid-template-columns: 1fr; gap: 6px; }
  .px-ban { position: relative; height: 260px; min-height: 0; margin: 12px -16px 0; }
  .px-ban img { object-position: 50% 22%; }
  .px-bn { top: 20px; font-size: 40px; }
  .px-sh.s1 { width: 50vw; height: 22vw; left: 30%; top: 8%; }
  .px-sh.s2 { width: 26vw; height: 30vw; left: 60%; top: 34%; }
}
@media (prefers-reduced-motion: reduce) { .px-ring, .px-art img, .px-ban { animation: none; } }
.pf.pf2 { padding-top: 0; }
.px-ban { position: relative; z-index: 4; }
.px-art { margin-right: 0; }
.px-sh.s1 { opacity: .45; }
.px-sh.s4 { opacity: .35; }
.px-bn { top: auto; bottom: 108px; right: 22px; font-size: 46px; }
.mu-mini { padding-right: 20px; }
.mu-mtx small { letter-spacing: .12em; }
@media (max-width: 820px) {
  .px-logo { position: absolute; left: 50%; top: 96px; translate: -50% 0; margin: 0; z-index: 5; }
  .px-art { margin-top: 150px; }
  .px-bn { bottom: 96px; }
}
.pf.pf2 { margin-top: 0; background: none; }
.mu .mu-arm { width: 56px; height: 140px; }
.px-logo { top: 96px; }
.px-l { padding-top: 190px; }
@media (max-width: 820px) {
  .px-l { position: static; padding-top: 0; }
  .px-logo { top: 92px; }
}
@media (max-width: 1279px) and (min-width: 821px) { .px-ban { margin-top: 84px; height: calc(100svh - 84px); min-height: 560px; } }
@media (max-width: 820px) { .px-bv { display: none; } }

/* ---------- v41 프로필: 배너·링 없앰, 한마디 위로, 본문을 왼쪽 상자 안에서 스크롤 ---------- */
.px { grid-template-columns: minmax(400px, 38%) minmax(0, 1fr); grid-template-areas: 'l a'; height: 100svh; min-height: 680px; padding-right: max(16px, 3vw); }
.px-ban, .px-ring { display: none; }
.px-art { margin: 0 0 0 -3vw; height: min(calc(100svh - 70px), 1100px); }
.px-l { justify-content: flex-start; gap: 14px; padding: calc(84px + clamp(120px, 10.4vw, 168px) * .33 + 26px) 0 34px; min-height: 0; height: 100%; }
.px-logo { top: 84px; width: clamp(120px, 10.4vw, 168px); }
.px-hd { display: grid; gap: 10px; margin: 6px 0 2px; }
.px-epi { display: flex; align-items: center; gap: 12px; margin: 0; color: #fff; font: 500 .9rem/1 var(--serif-b); letter-spacing: .32em; }
.px-epi i { flex: none; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8)); }
.px-epi i:last-child { background: linear-gradient(90deg, rgba(255, 255, 255, .8), transparent); }
.px-q { margin: 0; color: #fff; font: 500 clamp(1.3rem, 1.75vw, 1.7rem)/1.45 var(--kopub); letter-spacing: -1px; text-wrap: balance; word-break: keep-all; text-shadow: 0 2px 18px rgba(0, 10, 80, .6); }
.px-nm h1 { font-family: var(--f-title); font-weight: 400; }
.px-info dt { font: 500 11px/1.35 var(--f-ui); letter-spacing: -.01em; text-transform: none; }
.px-doc { flex: 1 1 auto; min-height: 140px; display: flex; flex-direction: column; margin-top: 4px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); outline: 1px solid rgba(255, 255, 255, .08); outline-offset: -5px; }
.px-dh { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px 9px 14px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.px-dh > span { font: 500 10px/1 'Cinzel', serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.px-orig { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 12px; border: 0; border-radius: 99px; background: #fff; color: #0b1236; font: 600 11.5px/1 var(--f-ui); letter-spacing: -.02em; cursor: inherit; transition: background .25s, scale .25s; }
.px-orig svg { width: 11px; height: 11px; }
.px-orig:hover { background: #dce8ff; }
.px-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 26px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent; }
.px-scroll::-webkit-scrollbar { width: 6px; } .px-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 3px; }
.px-scroll .pf-doc { max-width: none; margin: 0; padding: 0; font-size: 14px; }
.px-scroll .d-h2 { margin-top: 2.2rem; }
.px-scroll .pairnav { margin-top: 2.4rem; }
.pf2 .px-l > :nth-child(5) { animation-delay: .34s; }
/* 원문 감상 */
.pfo { position: fixed; inset: 0; z-index: 78; overflow-y: auto; overscroll-behavior: contain; background: rgba(3, 8, 30, .93); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s var(--ease); }
.pfo.in { opacity: 1; }
.pfo .pf-o { margin-top: 0; padding: 40px 0 110px; background: none; animation: none; }
.pfo .pf-top { padding-top: clamp(64px, 8vw, 110px); }
.pfo-x { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); top: max(16px, env(safe-area-inset-top, 0px)); z-index: 2; padding: 8px 14px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); color: #fff; font: 500 12.5px/1 var(--f-ui); cursor: inherit; backdrop-filter: blur(8px); }
.pfo-x:hover { background: rgba(255, 255, 255, .22); }
body.pfo-on { overflow: hidden; }
body.pfo-on .bar { visibility: hidden; }
@media (max-width: 1100px) and (min-width: 821px) { .px { grid-template-columns: minmax(360px, 44%) minmax(0, 1fr); } .px-info { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) {
  .px { grid-template-columns: 1fr; grid-template-areas: 'a' 'l'; height: auto; min-height: 0; padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .px-l { height: auto; padding: 0 0 40px; }
  .px-art { margin: 150px -16px 0; }
  .px-info { grid-template-columns: 1fr 1fr; }
  .px-info > div { grid-template-columns: 64px 1fr; }
  .px-info > div:last-child:nth-child(odd) { grid-template-columns: 64px 1fr; }
  .px-doc { flex: none; }
  .px-scroll { max-height: 70svh; padding: 4px 16px 22px; }
}

/* ---------- v41 플레이리스트: 바다 같은 파랑 + 흰색 ---------- */
.mu-mini { background: rgba(96, 128, 184, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 8px 24px rgba(10, 30, 80, .3); }
.mu-mini:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 8px 24px rgba(10, 30, 80, .3); }
.mu-mtx small { color: rgba(255, 255, 255, .78); }
.mu-panel { background: linear-gradient(180deg, rgba(118, 148, 200, .86) 0%, rgba(84, 114, 170, .9) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 24px 60px rgba(10, 30, 80, .4); outline-color: rgba(255, 255, 255, .22); }
.mu-deck { background: linear-gradient(160deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .14) 60%, rgba(255, 255, 255, .22)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.mu-deck::before { opacity: .5; }
.mu-disc { background: radial-gradient(circle, #243a66 0 31%, transparent 31.5%), repeating-radial-gradient(circle, #1a2a4c 0 1.1px, #2a3e6a 1.6px 2.4px), #1d2d52; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 10px 22px rgba(20, 40, 90, .35); }
.mu-plate { background: conic-gradient(from 210deg, rgba(255,255,255,.9), rgba(255,255,255,.45), rgba(255,255,255,.85), rgba(255,255,255,.4), rgba(255,255,255,.9)); }
.mu-lbl { box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 3px rgba(29, 45, 82, .9), 0 0 0 4px rgba(255, 255, 255, .35); }
.mu.mu-empty .mu-lbl, .mu-lbl[style*="none"] { background: radial-gradient(circle at 40% 38%, #fff, #d4e0f7 60%, #9fb4dc); }
.mu-arm .a-b { fill: #fff; stroke: rgba(40, 64, 120, .5); }
.mu-arm .a-c { stroke: rgba(40, 64, 120, .45); }
.mu-arm .a-d { fill: #3f5f9c; }
.mu-arm .a-w { fill: rgba(255, 255, 255, .8); }
.mu-no { color: rgba(29, 45, 82, .65); }
.mu-no b { color: #1d2d52; }
.mu-x { color: rgba(29, 45, 82, .7) !important; }
.mu-x:hover { background: rgba(255, 255, 255, .4) !important; color: #1d2d52 !important; }
.mu-a { color: rgba(255, 255, 255, .78); }
.mu-prog { color: rgba(255, 255, 255, .85); }
.mu-wave i { background: rgba(255, 255, 255, .32); }
.mu-wave i.on { background: #fff; box-shadow: 0 0 4px rgba(255, 255, 255, .7); }
.mu-ctl button { color: rgba(255, 255, 255, .85); }
.mu-ctl button:hover { background: rgba(255, 255, 255, .18); }
.mu-ctl .mu-pp { color: #3f5f9c; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 6px 18px rgba(20, 40, 90, .3); }
.mu-ctl .mu-pp:hover { color: #3f5f9c; }
.mu-sh[aria-pressed="true"], .mu-rp:not([data-m="off"]) { color: #fff !important; background: rgba(255, 255, 255, .2); }
.mu-vrow, .mu-list { border-top-color: rgba(255, 255, 255, .28); }
.mu-vrow button { color: rgba(255, 255, 255, .85); }
.mu-vrow button:hover, .mu-ls.on { background: rgba(255, 255, 255, .22); }
.mu-vol::-webkit-slider-runnable-track { background: linear-gradient(90deg, #fff var(--v), rgba(255, 255, 255, .3) var(--v)); }
.mu-vol::-moz-range-track { background: linear-gradient(90deg, #fff var(--v), rgba(255, 255, 255, .3) var(--v)); }
.mu-vol::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(63, 95, 156, .35); }
.mu-list button:hover { background: rgba(255, 255, 255, .16) !important; }
.mu-list span, .mu-list small { color: rgba(255, 255, 255, .65); }
.mu-list b { color: #fff; }
.mu-list [aria-current] { background: rgba(255, 255, 255, .22) !important; }
.mu-list [aria-current] b, .mu-list [aria-current] span { color: #fff; font-weight: 600; }
.mu-note { color: rgba(255, 255, 255, .85); }
.mu .mu-mini { background: rgba(104, 136, 192, .66); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mu-mtx { padding-right: 4px; }
.mu-mtx small { letter-spacing: .1em; }
@media (max-width: 820px) { .px-art { height: 56svh; margin-bottom: 8px; } }

/* ---------- v42 프로필 ---------- */
.px-q { font-family: var(--stella); font-weight: 400; letter-spacing: 0; }
.px-epi { letter-spacing: .04em; font-size: .95rem; }
.px-nm::after { display: none; }
.px-l { padding-top: calc(84px + clamp(120px, 10.4vw, 168px) * .33 + 62px); }
.px-art { margin-top: 64px; height: min(calc(100svh - 100px), 1080px); }
/* 왼쪽 상자 본문: 작은 고딕 */
.px-scroll .d-p, .px-scroll .d-li, .px-scroll .d-c, .px-scroll .d-script, .px-scroll .d-relitem p { font: 400 13px/1.85 var(--f-ui); letter-spacing: -.02em; color: rgba(235, 242, 255, .85); }
.px-scroll .d-p { margin-bottom: 1.1rem; text-indent: 0; text-align: justify; word-break: keep-all; }
.px-scroll .d-c { margin: 1.2rem 0; }
.px-scroll .d-h2 { margin: 2rem 0 1rem; font-size: 1.45rem; gap: .8rem; }
.px-scroll .d-h2:first-child { margin-top: 1.2rem; }
.px-scroll .d-tags { margin: 1.4rem 0 .4rem; }
.px-scroll .d-tags li { font-size: 1.05rem; }
.px-scroll .d-trait { margin: 1.4rem 0 .7rem; }
.px-scroll .d-trait h3 { font-size: 1.05rem; }
.px-scroll .d-hash { font: 400 11.5px/1.6 var(--f-ui); }
.px-scroll .d-chap { font-size: .95rem; }
.px-scroll .d-mon h3 { font-size: 1.15rem; }
.px-scroll .d-relitem b { font-size: .95rem; }
/* 원문 감상 페이지: 양쪽 맞춤 */
.pf-o .d-p { text-align: justify; }
@media (max-width: 600px) { .px-scroll .d-p, .pf-o .d-p { text-align: justify; } }
@media (max-width: 820px) { .px-l { padding-top: 0; } .px-art { margin-top: 150px; height: 56svh; } }

/* ---------- v42 플레이리스트 위치·크기 ---------- */
.mu { top: max(28px, env(safe-area-inset-top, 0px)); right: max(32px, env(safe-area-inset-right, 0px)); }
.mu .mu-mini { gap: 12px; padding: 6px 22px 6px 6px; }
.mu-mini .mu-disc { width: 48px; }
.mu-mtx { min-width: 0; max-width: 180px; padding-right: 0; gap: 4px; }
.mu-mtx small { display: block; white-space: nowrap; font-size: 9.5px; letter-spacing: .12em; }
.mu-mtx b { font-size: 13.5px; }
.mu-panel { width: 330px; padding: 16px 18px; }
.mu-deck { height: 186px; }
.mu-plate { width: 164px; left: 16px; }
.mu .mu-arm { left: 166px; width: 60px; height: 150px; }
.mu-t { font-size: 20px; }
@media (max-width: 1279px) { .mu .mu-mini { padding: 5px; } }
@media (max-width: 720px) { .mu { top: auto; right: auto; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); } .mu-panel { width: min(330px, calc(100vw - 32px)); } }

/* ---------- v42 메인: 북두칠성 ---------- */
.h3-dip { position: absolute; left: calc(50% + var(--hw) * .245); top: calc(50% - var(--hw) * .18); width: calc(var(--hw) * .15); overflow: visible; pointer-events: none; animation: subin 2.4s var(--ease) 1.6s both; }
.h3-dip .dp { animation: dptw 4.8s ease-in-out var(--d) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dptw { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (max-width: 820px) { .h3-dip { left: auto; right: 6%; top: 15%; width: 34vw; } }

/* ---------- v42 나침반 항로 점 ---------- */
.h3-cmp { position: absolute; left: calc(50% - var(--hw) * .418); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: #fff; font: 500 12px/1 var(--f-ui); letter-spacing: -.01em; cursor: inherit; animation: subin 2s var(--ease) 1.6s both; }
.h3-cmp svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 8px rgba(0, 10, 60, .5)); transition: rotate 1.2s cubic-bezier(.2, .7, .2, 1); }
.h3-cmp:hover svg { rotate: 45deg; }
.h3-cmp span { text-shadow: 0 1px 8px rgba(0, 10, 60, .6); }
@media (max-width: 820px) { .h3-cmp { left: auto; right: 16px; bottom: calc(44px + env(safe-area-inset-bottom, 0px)); } }
.cp { position: fixed; inset: 0; z-index: 88; display: grid; place-items: center; padding: 16px; background: rgba(2, 8, 32, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s var(--ease); }
.cp.in { opacity: 1; }
.cp-box { position: relative; width: min(400px, 100%); max-height: calc(100svh - 32px); overflow-y: auto; padding: 26px 26px 24px; text-align: center; color: #fff; background: linear-gradient(180deg, rgba(14, 26, 70, .92), rgba(6, 12, 40, .95)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 30px 80px rgba(0, 4, 30, .6); outline: 1px solid rgba(255, 255, 255, .14); outline-offset: -7px; border-radius: 4px; translate: 0 10px; transition: translate .4s var(--ease); }
.cp.in .cp-box { translate: 0 0; }
.cp-x { position: absolute; right: 12px; top: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, .75); font: 300 22px/1 var(--f-ui); cursor: inherit; }
.cp-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cp-k { margin: 0; font: 500 10px/1 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.cp-h { margin: 8px 0 14px; font: 400 1.6rem/1.2 var(--f-title); letter-spacing: -.02em; }
.cp-dial { position: relative; width: min(230px, 64vw); aspect-ratio: 1; margin: 0 auto 16px; }
.cp-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-rose .r1 { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .7); stroke-width: .8; }
.cp-rose .r2 { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: .4; }
.cp-rose .r3 { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: .4; stroke-dasharray: 1 2.6; }
.cp-rose .tk { stroke: rgba(255, 255, 255, .6); stroke-width: .6; }
.cp-rose text { fill: #fff; font: 600 9px/1 'Cinzel', serif; text-anchor: middle; dominant-baseline: central; }
.cp-rose text.sm { font-size: 6.5px; fill: rgba(255, 255, 255, .65); }
.cp-rose .pa { fill: rgba(255, 255, 255, .28); } .cp-rose .pb { fill: rgba(255, 255, 255, .1); }
.cp-needle { rotate: 0deg; filter: drop-shadow(0 3px 6px rgba(0, 0, 30, .5)); }
.cp-needle .n1 { fill: #fff; } .cp-needle .n2 { fill: #7593EA; } .cp-needle .n3 { fill: #0b1236; stroke: #fff; stroke-width: 1.2; } .cp-needle .n4 { fill: #fff; }
.cp-res { min-height: 96px; transition: opacity .3s; }
.cp-res.fade { opacity: 0; }
.cp-hint { margin: 1.4rem 0; font: 400 13px/1.7 var(--f-ui); color: rgba(255, 255, 255, .7); }
.cp-dir { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0; }
.cp-dir b { font: 400 1.5rem/1 var(--modern); }
.cp-dir span { font: 500 11.5px/1 var(--f-ui); color: rgba(255, 255, 255, .65); }
.cp-t { margin: 10px 0 8px; font: 400 1.25rem/1.3 var(--f-title); letter-spacing: -.02em; }
.cp-p { margin: 0 auto; max-width: 30em; font: 400 13px/1.8 var(--f-ui); letter-spacing: -.02em; color: rgba(235, 242, 255, .85); text-align: justify; word-break: keep-all; }
.cp-item { display: inline-flex; gap: 8px; align-items: center; margin: 12px 0 0; padding: 5px 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); font: 500 12px/1.3 var(--f-ui); }
.cp-item span { font-size: 10.5px; color: rgba(255, 255, 255, .6); }
.cp-line { margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .15); }
.cp-line p { margin: 0; font: 400 15px/1.6 var(--stella); }
.cp-line cite { display: block; margin-top: 4px; font: 500 11px/1 var(--f-ui); font-style: normal; color: rgba(255, 255, 255, .6); }
.cp-again { margin: 12px 0 0; font: 400 11px/1.5 var(--f-ui); color: rgba(255, 255, 255, .55); }
.cp-go { margin-top: 18px; padding: 10px 22px; border: 0; border-radius: 99px; background: #fff; color: #0b1236; font: 600 13px/1 var(--f-ui); cursor: inherit; transition: background .25s; }
.cp-go:hover { background: #dce8ff; }
.h3-cmp { pointer-events: auto; z-index: 5; }
.cp-line { border-left: 0; padding-left: 0; background: none; }
.cp-by { display: block; margin-top: 4px; font: 500 11px/1 var(--f-ui); color: rgba(255, 255, 255, .6); }
@media (max-width: 820px) { .h3-dip { right: 4%; top: 43%; width: 28vw; } }

/* ---------- v43 프로필 ---------- */
.px-q { font-family: var(--f-title); font-style: italic; font-weight: 400; font-size: clamp(1.55rem, 2.2vw, 2.1rem); letter-spacing: -.02em; }
.px-nm::after { display: block; }
body.ed-on .pf2 > .ed-btn { top: 30px; right: auto; left: max(16px, 4.2vw); position: absolute; }
body.ed-on .px-l .ed-btn, body.ed-on .px .ed-btn { right: auto; }
.ed-sheet textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; white-space: pre; overflow-x: auto; tab-size: 14; }

/* ---------- v43 오늘의 항로: 오른쪽 카테고리 바로 위 ---------- */
.h3-cmp { left: auto; bottom: auto; right: calc(50% - var(--hw) * .442); top: calc(50% + var(--hw) * .057 - 12px); translate: 0 -100%; gap: 9px; padding: 7px 16px 7px 9px; background: rgba(4, 14, 48, .34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .3s, box-shadow .3s; }
.h3-cmp:hover { background: rgba(4, 14, 48, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.h3-cmp svg { width: 26px; height: 26px; }
.h3-cmp span { font-size: max(12px, calc(var(--hw) * 26 / 3840)); }
@media (max-width: 820px) { .h3-cmp { right: 16px; top: auto; bottom: calc(46px + env(safe-area-inset-bottom, 0px)); translate: none; } }

/* ---------- v43 체크리스트 게시판 ---------- */
.sh-list { display: grid; gap: 12px; max-width: 980px; margin: 0 auto; }
.sh-card { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px 22px; color: #fff; text-decoration: none; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); outline: 1px solid rgba(255, 255, 255, .07); outline-offset: -5px; transition: background .3s, box-shadow .3s; }
.sh-card:hover { background: rgba(0, 0, 0, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.sh-ic { display: grid; gap: 5px; width: 54px; height: 54px; padding: 10px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.sh-ic i { display: block; height: 7px; background: linear-gradient(90deg, rgba(255, 255, 255, .8) 0 22%, transparent 22% 30%, rgba(255, 255, 255, .3) 30%); }
.sh-main { display: grid; gap: 6px; min-width: 0; }
.sh-main b { font: 400 1.25rem/1.3 var(--f-title); letter-spacing: -.02em; }
.sh-main small { font: 400 12.5px/1.6 var(--f-ui); color: rgba(235, 242, 255, .7); letter-spacing: -.02em; }
.sh-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.sh-tabs em { padding: 2px 8px; font: 500 11px/1.5 var(--f-ui); font-style: normal; color: #cfe0ff; box-shadow: inset 0 0 0 1px rgba(170, 200, 255, .35); }
.sh-side { display: grid; justify-items: end; gap: 6px; font: 500 12px/1.3 var(--f-ui); color: rgba(255, 255, 255, .65); }
.sh-pct { color: rgba(255, 255, 255, .7); }
.sh-pct b { font: 400 1.35rem/1 var(--modern); color: #fff; margin-right: 3px; }
@media (max-width: 640px) { .sh-card { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px; } .sh-ic { width: 40px; height: 40px; padding: 7px; gap: 4px; } .sh-ic i { height: 5px; } .sh-side { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; gap: 14px; align-items: baseline; } }

.sh-read { max-width: 1060px; }
.sh-src { align-self: center; padding: 6px 12px; border-radius: 99px; background: #fff; color: #0b1236; font: 600 12px/1 var(--f-ui); text-decoration: none; }
.sh-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 8px 0 18px; }
.sh-leg { display: flex; gap: 16px; margin: 0; font: 500 13px/1 var(--f-ui); }
.sh-leg span { display: inline-flex; align-items: center; gap: 7px; }
.sh-filter { display: inline-flex; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.sh-filter button { padding: 7px 12px; border: 0; background: none; color: rgba(255, 255, 255, .75); font: 500 12px/1 var(--f-ui); cursor: inherit; transition: background .25s, color .25s; }
.sh-filter button[aria-pressed="true"] { background: #fff; color: #0b1236; }
.sh-filter button:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sh-tabbar { display: flex; gap: 2px; margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.sh-tabbar button { flex: none; padding: 10px 16px 9px; border: 0; background: none; color: rgba(255, 255, 255, .6); font: 500 13px/1 var(--f-ui); letter-spacing: -.02em; cursor: inherit; box-shadow: inset 0 -2px 0 transparent; transition: color .25s, box-shadow .25s, background .25s; }
.sh-tabbar button[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 -2px 0 #fff; }
.sh-stat { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.sh-stat span { padding: 6px 12px; font: 500 12px/1 var(--f-ui); color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.sh-stat b { margin-left: 4px; color: #fff; font-weight: 700; }
.sh-body { display: grid; gap: 0; }
.sk-info { display: grid; gap: 0; max-width: 560px; margin: 0 auto 6px; width: 100%; text-align: center; }
.sk-row { display: flex; justify-content: center; gap: 0; margin: 0; }
.sk-row span { flex: 1 1 0; min-width: 0; padding: 9px 12px; font: 400 13.5px/1.6 var(--f-ui); letter-spacing: -.02em; color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); word-break: keep-all; }
.sk-row.one span { font-size: 14px; }
.sk-row:first-child.one span { font: 400 1.3rem/1.4 var(--f-title); letter-spacing: .3em; box-shadow: none; padding-bottom: 14px; }
.sk-gap { height: 0; margin: 14px 0; border: 0; }
.sk-grp { display: grid; grid-template-columns: repeat(var(--nb), minmax(0, 1fr)); gap: 0 28px; }
.sk-col { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; }
.sk { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 40px; padding: 6px 4px 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, .13); transition: opacity .3s, background .25s; }
.sk:hover { background: rgba(255, 255, 255, .05); }
.sk.dim { opacity: .18; }
.sk-e { border-bottom-color: transparent; }
.sk-q { font: 400 13.5px/1.55 var(--f-ui); letter-spacing: -.02em; color: rgba(240, 245, 255, .92); text-align: center; word-break: keep-all; }
.sk-v { display: inline-flex; gap: 6px; }
.sk-b { display: inline-grid; place-items: center; width: 22px; height: 22px; box-shadow: inset 0 0 0 1.4px rgba(255, 255, 255, .55); color: transparent; transition: background .25s; }
.sk-b svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sk-b.c0.on { background: #3f63b0; box-shadow: none; color: #fff; }
.sk-b.c1.on { background: #cfe0fb; box-shadow: none; color: #2c4a88; }
.sk-b.c2.on { background: #7593EA; box-shadow: none; color: #fff; }
.sk-b.c3.on { background: #fff; box-shadow: none; color: #0b1236; }
@media (max-width: 760px) { .sk-grp { grid-template-columns: 1fr; } .sk-e { display: none; } .sk-q { text-align: left; } .sk-col + .sk-col { margin-top: 14px; } }
.px-q { font-synthesis: style; font-style: italic; }
.sk-row:first-child.one span { font: 400 14px/1.6 var(--f-ui); letter-spacing: -.02em; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); padding: 9px 12px; }
.sh-body > .sk-info:first-child > .sk-row:first-child.one span { font: 400 1.3rem/1.4 var(--f-title); letter-spacing: .3em; box-shadow: none; padding-bottom: 14px; }

/* ---------- v44 체크리스트: 시트 서식 그대로 ---------- */
.gs-paper { position: relative; margin: 0 0 8px; padding: clamp(14px, 3vw, 34px); background: #fff; color: #000; border-radius: 2px; box-shadow: 0 20px 50px rgba(0, 6, 40, .45); }
.gs-scroll { overflow-x: auto; }
.gs-zoom { width: max-content; margin: 0 auto; }
.gs-t { border-collapse: collapse; table-layout: fixed; font: 400 10pt/1.35 Arial, 'Noto Sans KR', sans-serif; color: #000; }
.gs-t td { padding: 2px 3px; vertical-align: middle; overflow: hidden; word-break: keep-all; overflow-wrap: break-word; }
.gs-t td a { color: #1155cc; }
.gs-t td.gs-cbx { text-align: center; padding: 0; }
.gs-cb { display: inline-grid; place-items: center; width: 14px; height: 14px; vertical-align: middle; border-radius: 2px; box-shadow: inset 0 0 0 1.6px currentColor; color: inherit; }
.gs-cb svg { width: 12px; height: 12px; fill: none; stroke: transparent; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gs-cb.on { background: currentColor; box-shadow: none; }
.gs-cb.on svg { stroke: var(--cbg, #fff); }
.gs-t td.gs-pic { padding: 0; }
.gs-t td.gs-pic img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
.gs-t td.gs-n { position: relative; cursor: help; }
.gs-t td.gs-n::after { content: ''; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 6px 6px 0; border-color: transparent #000 transparent transparent; }
.gs-tip { position: absolute; z-index: 5; width: 240px; padding: 9px 11px; background: #fff; color: #202124; font: 400 12px/1.55 'Pretendard', Arial, sans-serif; white-space: pre-wrap; word-break: keep-all; box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .08); border-radius: 2px; pointer-events: none; }
.gs-embed { background: #fff; box-shadow: 0 20px 50px rgba(0, 6, 40, .45); }
.gs-embed iframe { display: block; width: 100%; height: min(80svh, 900px); border: 0; }

/* ---------- v44 프로필 ---------- */
.px-hd { gap: 18px; }
.px-nm::after { display: none; }
.px-doc { background: none; box-shadow: none; outline: 0; margin-top: 10px; gap: 14px; }
.px-scroll { padding: 0 14px 0 0; mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 40px), transparent); }
.px-scroll .pf-doc { padding-bottom: 30px; }
.px-scroll .d-h2:first-child, .px-scroll .d-tags:first-child { margin-top: .2rem; }
.px-orig { align-self: flex-start; flex: none; }
@media (max-width: 820px) { .px-scroll { padding-right: 0; } }

/* ---------- v44 양쪽 아래 빛나는 나뭇가지 ---------- */
#branches { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#branches svg { position: absolute; bottom: -2px; height: min(64svh, 600px); width: auto; aspect-ratio: 2 / 3; overflow: visible; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .95)) drop-shadow(0 0 12px rgba(190, 225, 255, .7)) drop-shadow(0 0 30px rgba(150, 200, 255, .45)); opacity: .9; animation: brglow 7s ease-in-out infinite; }
#branches .br-l { left: -1vw; } #branches .br-r { right: -1vw; }
@keyframes brglow { 50% { opacity: .72; } }
body[data-route="comic-read"] #branches { display: none; }
@media (max-width: 820px) { #branches svg { height: 36svh; opacity: .75; } }
@media (prefers-reduced-motion: reduce) { #branches svg { animation: none; } }
body:not([data-route="home"]) #branches svg { height: min(46svh, 430px); opacity: .5; }

/* ---------- v45 양쪽 아래 흰 뿔 ---------- */
#branches svg, body:not([data-route="home"]) #branches svg { height: min(80svh, 820px); opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45)) drop-shadow(0 0 22px rgba(190, 220, 255, .35)); animation: none; }
#branches .br-l { left: 2vw; } #branches .br-r { right: 2vw; }
@media (max-width: 820px) { #branches svg, body:not([data-route="home"]) #branches svg { height: 42svh; opacity: .9; } #branches .br-l { left: -4vw; } #branches .br-r { right: -4vw; } }

/* ---------- v45 상단 로고 (MAIN 대신) ---------- */
.bar-logo { position: absolute; left: max(16px, 4.2vw); top: 84px; width: clamp(120px, 10.4vw, 168px); pointer-events: auto; transition: opacity .3s; }
.bar-logo img { display: block; width: 100%; filter: drop-shadow(0 2px 10px rgba(0, 10, 60, .5)); }
.bar-logo:hover { opacity: .85; }
body[data-route="comic-read"] .bar-logo { display: none; }
@media (max-width: 1100px) { .bar-logo { display: none; } }
/* 원문 감상: 본문에 붙여서, 밑줄 없이 */
.px-orig { text-decoration: none; margin-top: -4px; }
.px-doc { gap: 8px; }
.px-scroll { mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent); }
.px-scroll .pf-doc { padding-bottom: 14px; }
.bar-logo { position: absolute; z-index: 65; }
body[data-route="home"] .bar-logo { display: none; }

/* ---------- v45 체크리스트: 화면 밖으로 넘치지 않게 ---------- */
.sh-read, .sh-sheet, .sh-body, .gs-paper, .gs-scroll { min-width: 0; max-width: 100%; }
.sh-read { overflow: hidden; }
.gs-paper { overflow: hidden; }
.gs-scroll { overflow: auto; }
.gs-t td { overflow: visible; white-space: nowrap; }
.gs-t td[style*="white-space:normal"], .gs-t td[style*="word-wrap:break-word"], .gs-t td[style*="overflow-wrap:break-word"] { white-space: normal; }
.gs-t td.gs-pic { overflow: hidden; }

/* ---------- v45 AU 진열장: 밝은 흰 테마 ---------- */
.sc-case { background: radial-gradient(80% 60% at 50% 0%, #ffffff, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #f4f7fd 0%, #e6ecf7 70%, #d9e1ef 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 0 0 4px rgba(255, 255, 255, .35), inset 0 -26px 36px -22px rgba(60, 80, 130, .25), 0 8px 18px rgba(0, 0, 0, .3); }
.sc-spot { background: radial-gradient(50% 60% at 50% 30%, rgba(255, 255, 255, .95), transparent 70%); }
.sc-floor { background: linear-gradient(180deg, #ffffff, #e3e9f4); border-top: 1px solid rgba(150, 165, 200, .35); }
.sc-floor::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent); }
.sc-case .au-ph { color: rgba(60, 80, 130, .28); }
.sc-case .au-img img { filter: drop-shadow(0 10px 12px rgba(40, 60, 110, .3)); }
.sc-glass { background: linear-gradient(115deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 18%, transparent 30%, transparent 62%, rgba(255, 255, 255, .25) 70%, transparent 78%), linear-gradient(180deg, rgba(255, 255, 255, .3), transparent 14%); background-size: 220% 100%, 100% 100%; }

/* ---------- v45 체크리스트 목록: 두루마리 ---------- */
.scr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 46px 56px; max-width: 1040px; margin: 10px auto 0; padding: 0 34px; }
.scr { position: relative; display: block; color: #3b2a18; text-decoration: none; filter: drop-shadow(0 14px 18px rgba(0, 6, 30, .45)); }
.scr-roll { position: relative; display: grid; place-items: center; height: 54px; margin: 0 34px; padding: 0 12px; border-radius: 4px;
  background: linear-gradient(180deg, #a8946b 0%, #d9c8a0 14%, #f1e6c9 34%, #f7eed8 46%, #e9dbb6 66%, #c9b58a 86%, #9a8660 100%); }
.scr-roll::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(14px 9px at 32% 46%, rgba(150, 110, 50, .18), transparent 70%), radial-gradient(10px 7px at 74% 62%, rgba(150, 110, 50, .16), transparent 70%); pointer-events: none; }
.scr-roll.bot { height: 50px; margin-top: -2px; }
.scr-end { position: absolute; top: 50%; width: 62px; height: 48px; translate: 0 -50%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.scr-end.l { right: calc(100% - 4px); } .scr-end.r { left: calc(100% - 4px); }
.scr-t { position: relative; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 1.18rem/1.2 var(--f-title); letter-spacing: -.01em; color: #3b2a18; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.scr-body { display: grid; grid-template-rows: 0fr; margin: -1px 46px 0; background: linear-gradient(90deg, #e2d2ab, #f3e9cf 8%, #f7efdb 50%, #f1e5c8 92%, #dccb9f); box-shadow: inset 0 10px 10px -8px rgba(90, 60, 20, .35), inset 0 -10px 10px -8px rgba(90, 60, 20, .35); transition: grid-template-rows .7s cubic-bezier(.3, .7, .2, 1); }
.scr-in { overflow: hidden; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 0 22px; min-height: 0; }
.scr-in > :first-child { margin-top: 18px; } .scr-in > :last-child { margin-bottom: 20px; }
.scr:hover .scr-body, .scr:focus-visible .scr-body { grid-template-rows: 1fr; }
.scr-d { font: 500 11px/1 var(--f-ui); letter-spacing: .08em; color: #8a6d45; }
.scr-p { font: 400 13px/1.7 var(--f-ui); letter-spacing: -.02em; color: #4a3722; word-break: keep-all; }
.scr-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.scr-tabs em { padding: 2px 8px; font: 500 11px/1.5 var(--f-ui); font-style: normal; color: #6b5234; box-shadow: inset 0 0 0 1px rgba(107, 82, 52, .35); }
.scr-pct { font: 500 11.5px/1 var(--f-ui); color: #6b5234; } .scr-pct b { font: 400 1.2rem/1 var(--modern); color: #3b2a18; margin-right: 3px; }
@media (max-width: 560px) { .scr-list { padding: 0 26px; gap: 34px; } .scr-roll { margin: 0 26px; } .scr-body { margin: -1px 36px 0; } .scr-end { width: 48px; height: 38px; } }
@media (hover: none) { .scr .scr-body { grid-template-rows: 1fr; } }

/* ---------- v45 체크리스트 본문: 낡은 종이 파일철 ---------- */
.sh-page { max-width: 1120px; }
.sh-file { position: relative; margin: 24px 26px 0 0; padding: 26px 0 0 18px; }
.sf-back { position: absolute; inset: 0 0 -14px 0; z-index: 0; border-radius: 6px 0 6px 6px; background: linear-gradient(160deg, #b79f86, #a68b71 60%, #977c62); box-shadow: 0 24px 50px rgba(0, 6, 30, .5), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.sf-back::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: .35; background-image: radial-gradient(rgba(60, 40, 20, .25) 1px, transparent 1px); background-size: 3px 3px; }
.sf-tab { position: absolute; right: -26px; top: 70px; z-index: 0; display: grid; place-items: center; width: 34px; height: 210px; border-radius: 0 8px 8px 0; background: linear-gradient(90deg, #a68b71, #b79f86); box-shadow: 4px 6px 14px rgba(0, 6, 30, .35); }
.sf-tab span { writing-mode: vertical-rl; font: 600 12px/1 var(--modern); letter-spacing: .18em; text-transform: uppercase; color: rgba(50, 32, 18, .7); }
.sf-paper { position: relative; z-index: 1; padding: clamp(40px, 5vw, 64px) clamp(20px, 4.4vw, 58px) clamp(30px, 4vw, 52px); color: #2a2218; border-radius: 2px;
  background: radial-gradient(120px 80px at 88% 12%, rgba(160, 120, 60, .1), transparent 70%), radial-gradient(160px 110px at 8% 92%, rgba(160, 120, 60, .12), transparent 70%), linear-gradient(180deg, #f6f1e6, #efe7d6);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .4) inset, 0 10px 24px rgba(40, 24, 10, .3), 10px 10px 0 -2px #e7dec9, 10px 10px 0 -1px rgba(120, 90, 50, .25); }
.sf-paper::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(120, 90, 50, .14) .6px, transparent .8px); background-size: 4px 4px; mix-blend-mode: multiply; }
.sf-clip { position: absolute; top: -34px; left: clamp(140px, 30%, 320px); z-index: 3; width: 34px; height: 94px; rotate: 6deg; filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, .3)); }
.sf-stub { position: absolute; top: 18px; left: 18px; z-index: 2; padding: 5px 14px; font: 500 11px/1 var(--f-ui); letter-spacing: .14em; color: #6b5537; background: #e1d3b6; rotate: -4deg; clip-path: polygon(0 0, 100% 0, 100% 35%, 94% 50%, 100% 65%, 100% 100%, 0 100%, 0 65%, 6% 50%, 0 35%); }
.sf-head { position: relative; margin: 0 0 26px; padding-bottom: 18px; border-bottom: 2px solid #2a2218; }
.sf-k { margin: 0 0 10px; font: 600 11px/1 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; color: #8a6d45; }
.sf-head h1 { margin: 0 0 16px; font: 700 clamp(1.9rem, 3.6vw, 2.8rem)/1.15 var(--f-title); letter-spacing: -.03em; color: #1f1812; text-wrap: balance; }
.sf-info { display: grid; gap: 0; margin: 0; max-width: 560px; }
.sf-info > div { display: grid; grid-template-columns: 90px 1fr; align-items: center; border-bottom: 1px solid rgba(42, 34, 24, .55); padding: 7px 0; }
.sf-info dt { font: 600 11px/1 'Cinzel', serif; letter-spacing: .12em; text-transform: uppercase; color: #5a4630; border-right: 1px solid rgba(42, 34, 24, .55); }
.sf-info dd { margin: 0; padding-left: 14px; font: 500 14px/1.4 var(--f-ui); color: #2a2218; }
.sf-info .sh-src { background: #2a2218; color: #f6f1e6; }
.sf-desc { margin: 16px 0 0; font: 400 13.5px/1.8 var(--f-ui); color: #3b3025; letter-spacing: -.02em; }
.sf-nav { margin-top: 40px; }
/* 종이 위에서는 어두운 글씨로 */
.sh-file .sh-tabbar { border-bottom-color: rgba(42, 34, 24, .3); }
.sh-file .sh-tabbar button { color: rgba(42, 34, 24, .55); }
.sh-file .sh-tabbar button[aria-selected="true"] { color: #1f1812; background: rgba(42, 34, 24, .06); box-shadow: inset 0 -2px 0 #1f1812; }
.sh-file .sh-leg { color: #2a2218; }
.sh-file .sh-filter { box-shadow: inset 0 0 0 1px rgba(42, 34, 24, .4); }
.sh-file .sh-filter button { color: rgba(42, 34, 24, .7); }
.sh-file .sh-filter button[aria-pressed="true"] { background: #2a2218; color: #f6f1e6; }
.sh-file .sh-stat span { color: rgba(42, 34, 24, .7); background: rgba(42, 34, 24, .05); box-shadow: inset 0 0 0 1px rgba(42, 34, 24, .18); }
.sh-file .sh-stat b { color: #1f1812; }
.sh-file .sk-row span { color: #2a2218; box-shadow: inset 0 0 0 .5px rgba(42, 34, 24, .35); }
.sh-file .sh-body > .sk-info:first-child > .sk-row:first-child.one span { box-shadow: none; }
.sh-file .sk { border-bottom-color: rgba(42, 34, 24, .18); }
.sh-file .sk:hover { background: rgba(42, 34, 24, .04); }
.sh-file .sk-q { color: #2a2218; }
.sh-file .sk-b { box-shadow: inset 0 0 0 1.4px rgba(42, 34, 24, .55); }
.sh-file .sk-b.c1.on { background: #a9c1ea; color: #fff; }
.sh-file .gs-paper { padding: 0; background: transparent; box-shadow: none; }
.sh-file .lk { background: rgba(42, 34, 24, .06); color: #2a2218; }
@media (max-width: 640px) { .sh-file { margin-right: 14px; padding-left: 8px; } .sf-tab { right: -14px; width: 22px; height: 150px; } .sf-tab span { font-size: 10px; } .sf-clip { left: 60%; } }
.bar-logo { top: clamp(16px, 2vw, 26px); width: clamp(110px, 9vw, 150px); }
@media (max-width: 1240px) { .bar-logo { display: none; } }

/* ---------- v46 공통 빈티지 질감 ---------- */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .4' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ---------- v46 플레이리스트: 빈티지 ---------- */
.mu-panel { background: linear-gradient(180deg, #6f819c 0%, #5d6f89 100%); box-shadow: inset 0 0 0 1px rgba(236, 232, 220, .5), inset 0 0 40px rgba(20, 28, 48, .45), 0 20px 50px rgba(8, 14, 34, .5); outline: 1px solid rgba(236, 232, 220, .25); outline-offset: -6px; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 6px; }
.mu-panel::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background-image: var(--mottle), var(--grain); background-size: 420px, 180px; mix-blend-mode: multiply; opacity: .55; }
.mu-panel > * { position: relative; z-index: 1; }
.mu-panel > #mu-yt { position: fixed !important; }
.mu-deck { background: linear-gradient(180deg, rgba(30, 38, 58, .35), rgba(30, 38, 58, .55)); box-shadow: inset 0 0 0 1px rgba(236, 232, 220, .35), inset 0 2px 14px rgba(0, 0, 0, .35); border-radius: 3px; }
.mu-deck::before { display: none; }
.mu-plate { background: conic-gradient(from 210deg, #cfc9b8, #8e8a80, #c9c3b2, #7f7b72, #cfc9b8); }
.mu-sheen { opacity: .5; }
.mu-disc { box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 6px 14px rgba(0, 0, 0, .4); }
.mu-lbl { filter: sepia(.25) saturate(.8) contrast(.95); box-shadow: 0 0 0 1px #e8e2cf, 0 0 0 3px #1d2436, 0 0 0 4px rgba(232, 226, 207, .4); }
.mu-arm .a-b { fill: #e8e2cf; stroke: #4c5466; } .mu-arm .a-r { stroke: #e8e2cf; } .mu-arm .a-h, .mu-arm .a-d { fill: #e8e2cf; } .mu-arm .a-w { fill: #b9b3a2; }
.mu-t { color: #f3efe4; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.mu-a, .mu-prog, .mu-no { color: rgba(243, 239, 228, .75); }
.mu-wave i { background: rgba(243, 239, 228, .3); } .mu-wave i.on { background: #f3efe4; box-shadow: none; }
.mu-ctl button, .mu-vrow button { color: rgba(243, 239, 228, .85); }
.mu-ctl .mu-pp { background: #e8e2cf; color: #3c4a62; box-shadow: 0 0 0 3px rgba(232, 226, 207, .22), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 4px 10px rgba(0, 0, 0, .3); }
.mu-ctl .mu-pp:hover { background: #f1ecdd; color: #3c4a62; }
.mu-vol::-webkit-slider-runnable-track { background: linear-gradient(90deg, #e8e2cf var(--v), rgba(243, 239, 228, .28) var(--v)); }
.mu-vol::-moz-range-track { background: linear-gradient(90deg, #e8e2cf var(--v), rgba(243, 239, 228, .28) var(--v)); }
.mu-vol::-webkit-slider-thumb { background: #e8e2cf; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.mu-vrow, .mu-list { border-top-color: rgba(243, 239, 228, .25); }
.mu .mu-mini { background: #627590; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(236, 232, 220, .55), 0 6px 18px rgba(8, 14, 34, .4); overflow: hidden; position: relative; }
.mu .mu-mini::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--mottle), var(--grain); background-size: 300px, 180px; mix-blend-mode: multiply; opacity: .5; }
.mu .mu-mini > * { position: relative; z-index: 1; }
.mu-mtx small { color: rgba(243, 239, 228, .75); } .mu-mtx b { color: #f3efe4; }

/* ---------- v46 오늘의 항로: 빈티지 + 채도 낮춤 ---------- */
.cp { background: rgba(10, 14, 24, .6); }
.cp-box { background: linear-gradient(180deg, #343c4c, #262c38); box-shadow: inset 0 0 0 1px rgba(232, 226, 207, .45), inset 0 0 60px rgba(0, 0, 0, .45), 0 30px 70px rgba(0, 0, 0, .55); outline-color: rgba(232, 226, 207, .2); color: #efebe0; }
.cp-box::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--mottle), var(--grain); background-size: 420px, 180px; mix-blend-mode: multiply; opacity: .6; }
.cp-box > * { position: relative; z-index: 1; }
.cp-rose .r1 { fill: rgba(232, 226, 207, .05); stroke: rgba(232, 226, 207, .7); }
.cp-rose .r2, .cp-rose .r3 { stroke: rgba(232, 226, 207, .3); } .cp-rose .tk { stroke: rgba(232, 226, 207, .55); }
.cp-rose text { fill: #efebe0; } .cp-rose .pa { fill: rgba(232, 226, 207, .3); } .cp-rose .pb { fill: rgba(232, 226, 207, .1); }
.cp-needle .n1 { fill: #efebe0; } .cp-needle .n2 { fill: #8a97ad; } .cp-needle .n3 { fill: #262c38; stroke: #efebe0; }
.cp-k, .cp-hint, .cp-dir span, .cp-again, .cp-by { color: rgba(239, 235, 224, .62); }
.cp-p { color: rgba(239, 235, 224, .85); }
.cp-item { box-shadow: inset 0 0 0 1px rgba(232, 226, 207, .3); }
.cp-go { background: #e8e2cf; color: #2c3342; } .cp-go:hover { background: #f1ecdd; }
.h3-cmp { background: rgba(30, 36, 50, .45); box-shadow: inset 0 0 0 1px rgba(232, 226, 207, .3); backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; }
.h3-cmp::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 180px; mix-blend-mode: multiply; opacity: .5; }
.h3-cmp > * { position: relative; z-index: 1; }

/* ---------- v46 체크리스트 목록: 3열, 쿨톤, 빈티지 두루마리 ---------- */
.scr-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 68px; max-width: 1180px; padding: 0 30px; }
@media (max-width: 1060px) { .scr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .scr-list { grid-template-columns: 1fr; } }
.scr { filter: drop-shadow(0 10px 14px rgba(0, 6, 30, .45)); }
.scr-roll { height: 44px; margin: 0 26px; padding: 0 10px; border-radius: 3px; isolation: isolate;
  background: linear-gradient(180deg, #8f98a6 0%, #b9c0cb 18%, #d3d8df 40%, #d9dde3 52%, #c7cdd6 72%, #a2aab6 90%, #7f8896 100%); }
.scr-roll::before { background-image: var(--mottle), var(--grain); background-size: 260px, 160px; mix-blend-mode: multiply; opacity: .7; }
.scr-roll::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(40, 48, 62, .25), inset 6px 0 8px -4px rgba(40, 48, 62, .35), inset -6px 0 8px -4px rgba(40, 48, 62, .35); }
.scr-roll.bot { height: 40px; }
.scr-end { width: 48px; height: 38px; }
.scr-end.l { right: calc(100% - 3px); } .scr-end.r { left: calc(100% - 3px); }
.scr-t { z-index: 1; font-size: 1rem; color: #262d3a; text-shadow: none; }
.scr-body { margin: -1px 36px 0; position: relative; isolation: isolate; background: linear-gradient(90deg, #bfc5ce, #d6dae0 10%, #dde0e5 50%, #d4d8de 90%, #bcc2cb); box-shadow: inset 0 8px 8px -6px rgba(30, 38, 52, .4), inset 0 -8px 8px -6px rgba(30, 38, 52, .4); }
.scr-body::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--mottle), var(--fibers), var(--grain); background-size: 320px, 300px, 160px; mix-blend-mode: multiply; opacity: .65; }
.scr-d { color: #5f6b7e; } .scr-p { color: #2c3342; } .scr-pct { color: #4a5568; } .scr-pct b { color: #262d3a; }
.scr-tabs em { color: #3d4757; box-shadow: inset 0 0 0 1px rgba(61, 71, 87, .35); }

/* ---------- v46 체크리스트 본문: 쿨톤 파일철 + 흰 종이 ---------- */
.sf-back { background: linear-gradient(160deg, #8592a6, #75829a 60%, #687590); }
.sf-back::before { background-image: var(--mottle), var(--grain); background-size: 420px, 180px; mix-blend-mode: multiply; opacity: .6; }
.sf-tab { background: linear-gradient(90deg, #75829a, #8592a6); }
.sf-tab span { color: rgba(20, 26, 38, .65); }
.sf-paper { color: #1d2330; background: #fbfbf9; box-shadow: 0 2px 0 rgba(255, 255, 255, .5) inset, 0 10px 24px rgba(10, 16, 34, .3), 10px 10px 0 -2px #eef0f3, 10px 10px 0 -1px rgba(60, 72, 92, .25); }
.sf-paper::before { background-image: var(--grain); background-size: 180px; opacity: .18; mix-blend-mode: multiply; }
.sf-stub { color: #4a5568; background: #dfe4eb; }
.sf-k { color: #6a7a94; }
.sf-head { border-bottom-color: #1d2330; }
.sf-head h1 { color: #161b26; }
.sf-info > div { border-bottom-color: rgba(29, 35, 48, .5); }
.sf-info dt { color: #4a5568; border-right-color: rgba(29, 35, 48, .5); }
.sf-info dd, .sf-desc { color: #1d2330; }
.sf-info .sh-src { background: #1d2330; color: #fff; }

/* ---------- v46 프로필: 원문 감상 버튼을 글 바로 아래로 ---------- */
.px-doc { flex: 0 1 auto; min-height: 0; }
.px-scroll { flex: 0 1 auto; }

/* ---------- v46 상단 로고 80% · 직접 그린 나뭇가지 ---------- */
.bar-logo { width: clamp(88px, 7.2vw, 120px); }
#branches img { position: absolute; bottom: 0; height: min(68vh, calc(100vw * 1468 / 3840 * 1.0)); width: auto; max-width: none; pointer-events: none; user-select: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .85)) drop-shadow(0 0 14px rgba(200, 228, 255, .6)) drop-shadow(0 0 34px rgba(150, 200, 255, .35)); }
#branches .br-l { left: 0; } #branches .br-r { right: 0; }
#branches img { height: calc(max(100vw, 100vh * 16 / 9) * 1468 / 3840); }
@media (max-width: 820px) { #branches img { height: 34svh; opacity: .85; } }
/* v46 조정: 질감은 은은하게 */
.scr-roll { background: linear-gradient(180deg, #a9b1bd 0%, #d2d7de 20%, #e6e9ed 42%, #eaedf0 54%, #dadee4 74%, #b8bfca 92%, #98a1ae 100%); }
.scr-roll::before { opacity: .32; }
.scr-body { background: linear-gradient(90deg, #d5d9df, #e6e9ed 10%, #eceef1 50%, #e4e7eb 90%, #d2d6dc); }
.scr-body::before { opacity: .3; }
.scr-d { color: #6b778a; }
.mu-panel { background: linear-gradient(180deg, #7d8fa9 0%, #6a7c97 100%); }
.mu-panel::after, .mu .mu-mini::after { opacity: .32; }
.mu-deck { background: linear-gradient(180deg, rgba(40, 50, 74, .22), rgba(40, 50, 74, .38)); }
.cp-box::after { opacity: .42; }
#branches img { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)) drop-shadow(0 0 12px rgba(200, 228, 255, .45)) drop-shadow(0 0 28px rgba(150, 200, 255, .25)); }
.sf-paper::before { opacity: .07; }
body:not([data-route="home"]) #branches img { height: calc(max(100vw, 100vh * 16 / 9) * 1468 / 3840 * .72); opacity: .55; }
.px-scroll .pf-doc > :last-child { margin-bottom: 0; }
.cp-box > .cp-x { position: absolute; z-index: 2; }

/* ---------- v47 체크리스트 파일철: 흰 종이 + 옅은 푸른 종이, 오른쪽 잘림 수정 ---------- */
.sh-file { margin: 24px 30px 0 0; padding: 26px 30px 0 18px; }
.sf-back { inset: 0 0 -16px 0; }
.sf-tab { right: -28px; }
.sf-paper { background: #fff; box-shadow: 0 10px 24px rgba(10, 16, 34, .28), 9px 9px 0 0 #e4edf8, 9px 9px 0 1px rgba(80, 110, 150, .25), 17px 17px 0 0 #fff, 17px 17px 0 1px rgba(60, 72, 92, .2); }
.sf-paper::before { opacity: .04; }
@media (max-width: 640px) { .sh-file { margin-right: 18px; padding-right: 20px; } .sf-tab { right: -16px; } }

/* 두루마리: 아래 막대에 날짜, 나무 하이라이트 옅게 */
.scr-roll.bot .scr-d { position: relative; z-index: 1; font: 500 11px/1 var(--f-ui); letter-spacing: .1em; color: #4a5568; }
.scr-end { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }

/* ---------- v47 플레이리스트: 원래 하늘색 + 질감은 은은하게 ---------- */
.mu-panel { background: linear-gradient(180deg, rgba(118, 148, 200, .9) 0%, rgba(90, 120, 174, .93) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 24px 60px rgba(10, 30, 80, .4); outline: 1px solid rgba(255, 255, 255, .22); }
.mu-panel::after, .mu .mu-mini::after { background-image: var(--grain); background-size: 180px; opacity: .22; }
.mu .mu-mini { background: rgba(104, 136, 192, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 8px 24px rgba(10, 30, 80, .3); }
.mu-deck { background: linear-gradient(160deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .12) 60%, rgba(255, 255, 255, .2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.mu-plate { background: conic-gradient(from 210deg, rgba(255,255,255,.9), rgba(255,255,255,.45), rgba(255,255,255,.85), rgba(255,255,255,.4), rgba(255,255,255,.9)); }
.mu-arm .a-b { fill: #fff; stroke: rgba(40, 64, 120, .5); } .mu-arm .a-r { stroke: #fff; } .mu-arm .a-h, .mu-arm .a-d { fill: #fff; } .mu-arm .a-d { fill: #3f5f9c; } .mu-arm .a-w { fill: rgba(255, 255, 255, .8); }
.mu-lbl { filter: none; }
.mu-t, .mu-mtx b { color: #fff; } .mu-a, .mu-prog, .mu-no, .mu-mtx small { color: rgba(255, 255, 255, .8); }
.mu-wave i { background: rgba(255, 255, 255, .32); } .mu-wave i.on { background: #fff; }
.mu-ctl button, .mu-vrow button { color: rgba(255, 255, 255, .88); }
.mu-ctl .mu-pp, .mu-ctl .mu-pp:hover { background: #fff; color: #3f5f9c; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 6px 18px rgba(20, 40, 90, .3); }
.mu-vol::-webkit-slider-runnable-track { background: linear-gradient(90deg, #fff var(--v), rgba(255, 255, 255, .3) var(--v)); }
.mu-vol::-moz-range-track { background: linear-gradient(90deg, #fff var(--v), rgba(255, 255, 255, .3) var(--v)); }
.mu-vol::-webkit-slider-thumb { background: #fff; }
.mu-vrow, .mu-list { border-top-color: rgba(255, 255, 255, .28); }

/* ---------- v47 오늘의 항로: 버튼을 설명과 바닥 사이 가운데로 ---------- */
.cp-res:has(> .cp-hint) { min-height: 0; }
.cp-hint { margin: 1rem 0 0; }
.cp-box { padding-bottom: 28px; }
.cp-go { margin-top: 28px; }

/* ---------- v47 나뭇가지: 어느 페이지든 같은 크기, 맨 앞(클릭은 통과) · 프로필에서만 뒤로 ---------- */
#branches { z-index: 79; pointer-events: none; }
#branches img, body:not([data-route="home"]) #branches img { height: calc(max(100vw, 100vh * 16 / 9) * 1468 / 3840); opacity: 1; pointer-events: none; }
body[data-route="char"] #branches { z-index: 1; }
@media (max-width: 820px) { #branches img, body:not([data-route="home"]) #branches img { height: 34svh; opacity: .85; } }

/* ---------- v47 바닥 1px 틈 ---------- */
#bgstage, #veil, #sky, #branches { bottom: -2px; }
.bs-in { scale: 1.004; }
.sf-paper { box-shadow: 0 10px 24px rgba(10, 16, 34, .28), 8px 8px 0 0 #dbe7f6, 8px 8px 0 1px rgba(80, 110, 150, .3), 16px 16px 0 0 #fff, 16px 16px 0 1px rgba(60, 72, 92, .22); }

/* ---------- v48 ---------- */
/* 메인: 카테고리·오늘의 항로를 나뭇가지보다 앞으로 */
body[data-route="home"] #branches { z-index: 1; }
body[data-route="home"] main { z-index: 2; }
/* 프로필: 뒤로가기 + 편집 버튼 자리 */
.px-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 -4px -4px; padding: 6px 14px 6px 8px; border-radius: 99px; color: rgba(255, 255, 255, .85); text-decoration: none; font: 500 11px/1 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); transition: background .25s, color .25s, box-shadow .25s; }
.px-back svg { width: 15px; height: 15px; transition: translate .25s; }
.px-back:hover { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.px-back:hover svg { translate: -2px 0; }
.pf2 .px-l > :nth-child(6) { animation-delay: .42s; } .pf2 .px-l > :nth-child(7) { animation-delay: .5s; }
body.ed-on .pf2 > .ed-btn { top: auto; bottom: 84px; left: auto; right: max(24px, 3vw); position: fixed; }
/* 체크리스트: 가로로 넓은 시트는 가로 파일철 */
.sh-page.wide { max-width: min(1500px, 100%); }
.sh-file.wide { margin: 48px 0 0; padding: 18px 18px 0 18px; }
.sh-file.wide .sf-back { border-radius: 0 6px 6px 6px; }
.sh-file.wide .sf-tab { right: auto; left: 0; top: -30px; width: 240px; height: 32px; border-radius: 8px 8px 0 0; box-shadow: 0 -2px 10px rgba(0, 6, 30, .2); }
.sh-file.wide .sf-tab span { writing-mode: horizontal-tb; }
.sh-file.wide .sf-clip { left: auto; right: clamp(80px, 14%, 200px); rotate: -6deg; }

/* ---------- v49 플레이리스트: 폭 85%, 제목·설명 가운데 ---------- */
.mu-panel { width: 280px; padding: 14px 15px; }
.mu-deck { height: 160px; }
.mu-plate { width: 140px; left: 12px; top: 10px; }
.mu .mu-arm { left: 142px; width: 52px; height: 130px; }
.mu-meta { text-align: center; }
.mu-t { font-size: 18px; }
.mu-ctl { gap: 0; }
@media (max-width: 720px) { .mu-panel { width: min(280px, calc(100vw - 32px)); } }

/* ---------- v49 프로필: 나뭇가지는 배경 쪽으로, 뒤로가기 위로 ---------- */
body[data-route="char"] #branches { z-index: -2; }
.px-back { margin-bottom: 12px; }

/* ---------- v49 체크리스트 목록: 닫힌 파일철 표지 ---------- */
.fc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px; max-width: 1120px; margin: 30px auto 0; padding: 0 16px; }
@media (max-width: 1000px) { .fc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fc-list { grid-template-columns: 1fr; } }
.fc { position: relative; display: block; aspect-ratio: 4 / 3.1; color: #1d2330; text-decoration: none; perspective: 1000px; }
.fc-back { position: absolute; inset: 0; border-radius: 3px 6px 6px 6px; background: linear-gradient(160deg, #8592a6, #6f7c93); box-shadow: 0 14px 26px rgba(0, 6, 30, .45); }
.fc-back::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: var(--grain); background-size: 180px; mix-blend-mode: multiply; opacity: .35; }
.fc-tab { position: absolute; left: 0; top: -22px; max-width: 60%; height: 24px; padding: 0 16px; border-radius: 6px 10px 0 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #7d8aa0; font: 600 10px/1 var(--modern); letter-spacing: .16em; text-transform: uppercase; color: rgba(20, 26, 38, .7); }
.fc-paper { position: absolute; left: 7%; right: 7%; top: 6%; bottom: 6%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 5px -5px 0 -1px #dbe7f6; transition: translate .6s cubic-bezier(.3, .7, .2, 1); }
.fc-in { position: absolute; inset: 0; display: grid; align-content: start; gap: 10px; padding: 16px 18px; overflow: hidden; }
.fc-p { font: 400 12.5px/1.75 var(--f-ui); letter-spacing: -.02em; color: #2c3342; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fc-none { color: #9aa3b2; }
.fc-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.fc-tabs em { padding: 2px 7px; font: 500 10.5px/1.5 var(--f-ui); font-style: normal; color: #3d4757; box-shadow: inset 0 0 0 1px rgba(61, 71, 87, .3); }
.fc-cover { position: absolute; inset: 9% 0 0 0; z-index: 2; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 18px; border-radius: 3px 3px 6px 6px; transform-origin: 50% 100%;
  background: linear-gradient(170deg, #94a1b5, #7f8ca3 70%, #76839a); box-shadow: 0 -1px 0 rgba(255, 255, 255, .25) inset, 0 6px 14px rgba(0, 6, 30, .3); transition: transform .7s cubic-bezier(.3, .7, .2, 1), box-shadow .7s; }
.fc-cover::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: var(--grain); background-size: 180px; mix-blend-mode: multiply; opacity: .35; pointer-events: none; }
.fc-cover > * { position: relative; }
.fc-label { display: grid; gap: 6px; justify-items: center; width: 82%; padding: 14px 12px 15px; background: #f6f7f9; box-shadow: 0 1px 2px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(29, 35, 48, .12); text-align: center; }
.fc-label small { font: 600 9.5px/1 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; color: #6a7a94; }
.fc-label b { font: 400 1.08rem/1.3 var(--f-title); letter-spacing: -.02em; color: #161b26; word-break: keep-all; text-wrap: balance; }
.fc-no { position: absolute !important; left: 14px; top: 12px; font: 600 10px/1 var(--f-ui); letter-spacing: .14em; color: rgba(20, 26, 38, .55); }
.fc-date { font: 500 11px/1 var(--f-ui); letter-spacing: .1em; color: rgba(20, 26, 38, .65); }
.fc:hover .fc-cover, .fc:focus-visible .fc-cover { transform: rotateX(-58deg); box-shadow: 0 -1px 0 rgba(255, 255, 255, .25) inset, 0 24px 30px rgba(0, 6, 30, .35); }
.fc:hover .fc-paper, .fc:focus-visible .fc-paper { translate: 0 -8%; }
@media (hover: none) { .fc .fc-cover { transform: rotateX(-40deg); } }
@media (prefers-reduced-motion: reduce) { .fc-cover, .fc-paper { transition: none; } }

/* 체크리스트 표: 돌린 글씨 */
.gs-t .gs-rot { display: inline-block; white-space: nowrap; }
.gs-t td:has(> .gs-rot), .gs-t td:has(> div[style*="writing-mode"]) { text-align: center; }

/* ---------- v50 관리 화면: 이미지 → 링크 ---------- */
.ad-img { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); display: grid; gap: 10px; }
.ad-img h3 { margin: 0; font: 600 15px/1.3 var(--f-ui); }
.ad-img p { margin: 0; font: 400 12.5px/1.6 var(--f-ui); opacity: .8; }
.ad-img label { justify-self: start; cursor: pointer; }


/* ---------- v54 ---------- */
.av.av-def { background: #cfd9e6; }
.av.av-def svg { width: 100%; height: 100%; display: block; }

/* ---------- v57 ---------- */
.mu-lbl { background-size: cover !important; background-position: center !important; }
.gs-tip { position: fixed; z-index: 120; }
.gs-t td.gs-n::after { border-width: 0 7px 7px 0; border-color: transparent #000 transparent transparent; }

/* ---------- v58: 게시판 대제목을 카테고리와 같은 Cinzel 로 ---------- */
.phead h1, .c-head h1 { font-family: 'Cinzel', serif; font-weight: 500; letter-spacing: .02em; }
.phead[data-ed="board:au"] h1 { letter-spacing: 0; }