/* 호그와트 친구들 — 학생 플래너
   레이아웃: 왼쪽 레일(메뉴) + 위 상태줄 + 가운데 본문, 대화는 오른쪽 서랍. 휴대폰은 아래 탭바.
   강조색은 내 기숙사 색을 따른다. */
:root {
  --paper: #f4f1eb;
  --sheet: #fffdf9;
  --sheet-2: #f4f0e8;
  --rule: #e2dccf;
  --ink: #24211c;
  --ink-2: #5b564d;
  --ink-3: #8c867a;
  --good: #2e7a4c;
  --bad: #b3432f;
  --warn: #9a6a12;
  --hp: #2e7a4c;
  --mp: #3a5fae;
  --st: #a9771a;
  --scrim: rgba(24, 28, 40, .38);
  --lift: 0 1px 2px rgba(40, 30, 10, .06), 0 10px 28px rgba(40, 30, 10, .1);
  --soft: 0 1px 2px rgba(40, 30, 10, .04), 0 2px 8px rgba(40, 30, 10, .04);
  --warn-ink: #9a6a12;
  --accent: #7a5b1e;
  --on-accent: #ffffff;
  --accent-soft: rgba(122, 91, 30, .1);
  --f-display: 'Gowun Batang', 'Nanum Myeongjo', 'Batang', serif;
  --f-body: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --f-mono: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;   /* 숫자도 본문 글꼴로(글꼴은 명조·고딕·영문 장식 세 가지만), 자릿수만 고정폭 */
  --rail: 232px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121319; --sheet: #1a1c24; --sheet-2: #22252f; --rule: #2f3340; --ink: #ece8e0; --ink-2: #bbb6ac; --ink-3: #838077; --soft: 0 1px 2px rgba(0, 0, 0, .25);
    --good: #7cc495; --bad: #e2836c; --warn: #e0b65c; --hp: #7cc495; --mp: #86a8ea; --st: #e0b65c;
    --scrim: rgba(4, 6, 10, .6); --lift: 0 10px 30px rgba(0, 0, 0, .4); --accent: #e0b65c; --on-accent: #1b1508; --accent-soft: rgba(224, 182, 92, .12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121319; --sheet: #1a1c24; --sheet-2: #22252f; --rule: #2f3340; --ink: #ece8e0; --ink-2: #bbb6ac; --ink-3: #838077; --soft: 0 1px 2px rgba(0, 0, 0, .25);
  --good: #7cc495; --bad: #e2836c; --warn: #e0b65c; --hp: #7cc495; --mp: #86a8ea; --st: #e0b65c;
  --scrim: rgba(4, 6, 10, .6); --lift: 0 10px 30px rgba(0, 0, 0, .4); --accent: #e0b65c; --on-accent: #1b1508; --accent-soft: rgba(224, 182, 92, .12);
  color-scheme: dark;
}

/* 기숙사 색: 밝은 화면용 / 어두운 화면용 */
.h-gryffindor { --h-l: #a3302c; --h-d: #ef7a6e; --h-on-l: #fff; --h-on-d: #2a0d0b; }
.h-hufflepuff { --h-l: #8a6410; --h-d: #ecc25a; --h-on-l: #fff; --h-on-d: #241a04; }
.h-ravenclaw  { --h-l: #2d55a3; --h-d: #8fb0f0; --h-on-l: #fff; --h-on-d: #0c1830; }
.h-slytherin  { --h-l: #22704a; --h-d: #74cf9a; --h-on-l: #fff; --h-on-d: #062014; }
.shell[class*="h-"] { --accent: var(--h-l); --on-accent: var(--h-on-l); --accent-soft: color-mix(in srgb, var(--h-l) 10%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shell[class*="h-"] { --accent: var(--h-d); --on-accent: var(--h-on-d); --accent-soft: color-mix(in srgb, var(--h-d) 13%, transparent); }
}
:root[data-theme="dark"] .shell[class*="h-"] { --accent: var(--h-d); --on-accent: var(--h-on-d); --accent-soft: color-mix(in srgb, var(--h-d) 13%, transparent); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 14.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
#root { min-height: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0; }
.num, .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 13px; }
.eyebrow { font-size: 12px; letter-spacing: .08em; color: var(--ink-3); }
.prose { font-family: var(--f-display); font-size: 16px; line-height: 1.8; max-width: 64ch; }
.good { color: var(--good); } .bad { color: var(--bad); }
[style*="--pc:"]:not(.mono-av) { color: color-mix(in srgb, var(--pc) 70%, var(--ink)); }

/* ---------- 버튼과 입력 ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); background: var(--sheet); padding: 7px 13px; border-radius: 8px; line-height: 1.3; white-space: nowrap; transition: border-color .15s, background .15s; }
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.quiet:hover:not(:disabled) { background: var(--sheet-2); border-color: transparent; }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 4px 9px; font-size: 13px; border-radius: 6px; }
.btn .badge { margin-left: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--rule); background: var(--sheet); border-radius: 999px; padding: 4px 12px; font-size: 13px; white-space: nowrap; }
.chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.chip:disabled { opacity: .45; cursor: not-allowed; }
input[type=text], input[type=date], input[type=time], input[type=password], input[type=number], input[type=search], input[type=url], textarea, select {
  width: 100%; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 11px; min-width: 0; }
textarea { resize: vertical; min-height: 72px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; }
.field { display: grid; gap: 5px; }
.toggle { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; font-family: var(--f-mono); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ink-3)); display: inline-block; flex: none; }
.dot.on { --c: var(--good); } .dot.away { --c: var(--warn); } .dot.off { --c: var(--rule); }

/* ---------- 입장 화면 ---------- */
.gate { min-height: 100vh; display: grid; place-items: center; padding-block: 40px; padding-inline: 16px; }
.gate-box { width: min(440px, 100%); display: grid; gap: 18px; }
.brand { font-family: var(--f-display); font-size: clamp(32px, 8vw, 46px); line-height: 1.1; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 8px; font: 400 14.5px/1.6 var(--f-body); color: var(--ink-2); }
.card { border: 1px solid var(--rule); background: var(--sheet); border-radius: 12px; padding: 16px; display: grid; gap: 12px; min-width: 0; }
.note { border: 1px dashed var(--rule); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink-2); }
.err { color: var(--bad); font-size: 13px; min-height: 1em; }
.wizard { width: min(740px, 100%); display: grid; gap: 18px; }
.steps { display: flex; gap: 0; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.steps span { flex: 1; text-align: center; font-size: 13px; padding: 7px 4px; color: var(--ink-3); border-right: 1px solid var(--rule); background: var(--sheet); }
.steps span:last-child { border-right: 0; }
.steps span.on { color: var(--on-accent); background: var(--accent); }
.steps span.done { color: var(--ink); }
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.pick { text-align: left; border: 1px solid var(--rule); background: var(--sheet); border-radius: 10px; padding: 11px 13px; display: grid; gap: 3px; }
.pick:hover { border-color: var(--ink-3); }
.pick.on { border-color: var(--accent); background: var(--accent-soft); }
.pick b { font-family: var(--f-display); font-size: 16px; }
.pick-house { border-left: 5px solid var(--hc); }
.attr-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper .num { width: 22px; text-align: center; font-size: 16px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--sheet); box-shadow: 0 0 0 1px var(--rule); }
.swatch.on { box-shadow: 0 0 0 2px var(--ink); }

/* ---------- 껍데기 ---------- */
.shell { min-height: 100vh; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
.shell.docked { grid-template-columns: var(--rail) minmax(0, 1fr) 340px; }
.rail { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--rule); background: var(--sheet); display: flex; flex-direction: column; padding: 16px 12px 0; gap: 14px; }
.rail-brand { font-family: var(--f-display); font-size: 20px; padding: 0 8px; }
.rail-brand small { display: block; font: 12px var(--f-body); color: var(--ink-3); margin-top: 2px; }
.nav { display: grid; gap: 10px; }
.nav-group { display: grid; gap: 1px; }
.nav-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--gc); opacity: .85; padding: 0 10px 2px; }
.nav button { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 5px 8px; border-radius: 9px; color: var(--ink-2); text-align: left; position: relative; }
.nav button:hover { background: color-mix(in srgb, var(--gc) 8%, transparent); color: var(--ink); }
.nav button.on { background: color-mix(in srgb, var(--gc) 14%, transparent); color: color-mix(in srgb, var(--gc) 75%, var(--ink)); font-weight: 600; }
.nav button.on::before { content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gc); }
.nav button .badge { margin-left: auto; }
.nav-ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--gc); background: color-mix(in srgb, var(--gc) 12%, transparent); }
.nav button.on .nav-ico { background: var(--gc); color: var(--sheet); }
.nav-ico svg { width: 16px; height: 16px; }
.nav svg, .tabbar svg, .ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.me { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 10px 8px; border-top: 1px solid var(--rule); }
.mono-av { width: 38px; height: 42px; flex: none; display: grid; place-items: center; font-family: var(--f-display); font-size: 18px; color: var(--on-accent); background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); padding-bottom: 6px; overflow: hidden; position: relative; }
.mono-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mono-av.lg { width: 58px; height: 64px; font-size: 24px; }
.me-name { font-weight: 600; line-height: 1.25; }
.me-sub { font-size: 12px; color: var(--ink-3); }

.stage { min-width: 0; display: flex; flex-direction: column; }
.statusbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); padding: 10px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.where { display: grid; line-height: 1.25; min-width: 0; }
.where b { font-family: var(--f-display); font-size: 16px; border: 0; background: none; padding: 0; text-align: left; }
.where span { font-size: 12px; color: var(--ink-3); }
.meters { display: flex; gap: 14px; flex: 1; min-width: 260px; max-width: 460px; }
.meter { flex: 1; display: grid; gap: 3px; min-width: 0; }
.meter-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); }
.meter-top .num { color: var(--ink); }
.track { height: 5px; border-radius: 3px; background: var(--sheet-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.fill { height: 100%; border-radius: 3px; background: var(--fc); transition: width .5s; }
.sb-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.clock { font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.clock b { color: var(--ink); font-size: 14.5px; }
.curfew { font-size: 11px; color: var(--bad); border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; }
.purse { font-size: 13px; }
.iconbtn { position: relative; border: 1px solid var(--rule); background: var(--sheet); width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-2); }
.iconbtn:hover { border-color: var(--accent); color: var(--ink); }
.iconbtn .badge { position: absolute; top: -6px; right: -6px; }
.view { width: 100%; max-width: 1000px; margin: 0 auto; padding: 24px 24px 120px; display: grid; gap: 22px; }

/* ---------- 공통 블록 ---------- */
.block { display: grid; gap: 10px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.block-head h2 { font-size: 18px; }
.block-head h3 { font-size: 16px; }
.panel { border: 1px solid var(--rule); background: var(--sheet); border-radius: 12px; padding: 16px; display: grid; gap: 10px; min-width: 0; align-content: start; }
.panel.tight { padding: 12px 14px; gap: 8px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.cols-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
.stars { color: var(--accent); letter-spacing: 1.5px; font-size: 12px; white-space: nowrap; }
.stars i { color: var(--rule); font-style: normal; }
.empty { color: var(--ink-3); font-size: 13px; }
.divider { height: 1px; background: var(--rule); }

/* 오늘 */
.today-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.today-head h1 { font-size: clamp(24px, 4vw, 32px); letter-spacing: -.01em; }
.notice-bar { display: flex; gap: 12px; align-items: flex-start; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule)); background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; }
.notice-bar b { white-space: nowrap; color: var(--accent); font-size: 13px; }
.next-list { display: grid; gap: 8px; }
.next { display: flex; gap: 12px; align-items: center; border: 1px solid var(--rule); background: var(--sheet); border-radius: 10px; padding: 11px 14px; }
.next .grow b { display: block; }
.next.hot { border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.check { border: 1px solid var(--rule); background: var(--sheet); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; text-align: left; }
.check:hover { border-color: var(--accent); }
.check .top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ink-2); }
.check .top .num { color: var(--ink); font-size: 14.5px; }
.check.done .top .num { color: var(--good); }
.check .track { height: 4px; }
.class-list { display: grid; gap: 4px; }
.class-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--rule); }

/* 장소 */
.scene { display: grid; gap: 8px; padding-bottom: 4px; }
.scene h1 { font-size: clamp(26px, 5vw, 34px); letter-spacing: -.01em; }
.hop { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.event { border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--rule)); border-radius: 12px; padding: 16px; background: var(--sheet); display: grid; gap: 10px; box-shadow: var(--lift); }
.event h3 { font-size: 18px; }
.statusline { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; border: 1px solid var(--rule); border-left: 3px solid var(--accent); background: var(--sheet); border-radius: 10px; padding: 11px 14px; }
.statusline.bad { border-left-color: var(--bad); }
.log { display: grid; font-size: 13px; max-height: 320px; overflow-y: auto; }
.log-line { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); }
.log-line .t { color: var(--ink-3); font: 12px var(--f-mono); padding-top: 2px; }
.log-line.find .x { color: var(--good); }
.log-line.bad .x { color: var(--bad); }
.log-line.fight .x { color: var(--accent); }
.log-line.flavor .x { color: var(--ink-2); font-family: var(--f-display); }
.progress { height: 4px; border-radius: 2px; background: var(--sheet-2); overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); transition: width 1s linear; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 13px; border: 1px solid var(--rule); border-radius: 6px; padding: 2px 8px; background: var(--sheet); }
.people { display: grid; gap: 2px; }
.person { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border: 0; background: none; border-radius: 8px; text-align: left; width: 100%; }
.person:hover { background: var(--sheet-2); }
.person .nm { font-weight: 600; }
.person .meta { margin-left: auto; font-size: 12px; color: var(--ink-3); text-align: right; }
.doodles { display: grid; gap: 6px; }
.doodle { font-family: var(--f-display); font-size: 14.5px; padding: 6px 10px; border-left: 2px solid var(--dc, var(--rule)); background: var(--sheet-2); border-radius: 0 6px 6px 0; display: flex; gap: 8px; align-items: baseline; }
.doodle .by { font: 12px var(--f-body); color: var(--ink-3); margin-left: auto; white-space: nowrap; }

/* 지도 */
.zone { display: grid; gap: 8px; }
.zone-head { display: flex; gap: 10px; align-items: baseline; }
.zone-head h3 { font-size: 16px; }
.places { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.place-btn { text-align: left; border: 1px solid var(--rule); background: var(--sheet); border-radius: 10px; padding: 9px 12px; display: grid; gap: 2px; }
.place-btn:hover:not(:disabled) { border-color: var(--accent); }
.place-btn.here { border-color: var(--accent); background: var(--accent-soft); }
.place-btn:disabled { opacity: .5; cursor: not-allowed; }
.place-btn b { font-family: var(--f-display); font-size: 14.5px; }

/* 가방·목록 */
.list { display: grid; gap: 6px; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); }
.item .nm { font-weight: 600; }
.item .ds { font-size: 13px; color: var(--ink-2); }
.cnt { font: 13px var(--f-mono); color: var(--ink-3); margin-left: 6px; }

/* 표 */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 500; font-size: 12px; letter-spacing: .04em; color: var(--ink-3); padding: 9px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover td { background: var(--sheet-2); }
tbody tr.sel td { background: var(--accent-soft); }
.pill { font-size: 12px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap; }
.pill.admin { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.pill.ban { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.pill.wait { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }

/* 기숙사 */
.glasses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }

/* 일지·알림 */
.lines { display: grid; }
.line { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.line .t { color: var(--ink-3); font: 12px var(--f-mono); padding-top: 2px; }
.line .x { font-family: var(--f-display); }

/* 우편 */
.letter { border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); padding: 11px 14px; display: grid; gap: 4px; text-align: left; width: 100%; }
.letter.unread { border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); }
.letter .x { font-family: var(--f-display); white-space: pre-wrap; word-break: break-word; }
.letter .meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); }

/* 대화 서랍 */
.chat { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100%); z-index: 40; background: var(--sheet); border-left: 1px solid var(--rule); box-shadow: var(--lift); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.shell.docked .chat { position: sticky; top: 0; height: 100vh; width: auto; box-shadow: none; z-index: 1; }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 4px; }
.chat-head h3 { font-size: 16px; }
.chat-tabs { display: flex; gap: 4px; padding: 6px 12px 10px; border-bottom: 1px solid var(--rule); }
.chat-tabs button { position: relative; }
.chat-tabs button.unread::after { content: ''; position: absolute; top: 2px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.chat-list { overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.msg { line-height: 1.5; word-break: break-word; }
.msg .who { font-weight: 600; }
.msg .t { font: 11px var(--f-mono); color: var(--ink-3); margin-right: 6px; }
.msg .del { border: 0; background: none; color: var(--ink-3); font-size: 11px; padding: 0 4px; }
.chat-input { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--rule); }

/* 탭바 (휴대폰) */
.tabbar { display: none; }

/* 시트·모달 */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--lift); padding: 18px; display: grid; gap: 12px; }
.modal h3 { font-size: 20px; }
.pop { position: fixed; z-index: 45; top: calc(60px + env(safe-area-inset-top, 0px)); right: 16px; width: min(360px, calc(100% - 32px)); max-height: 70vh; overflow-y: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--lift); padding: 12px 14px; display: grid; gap: 8px; }
.sheet-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sheet-menu button { display: grid; justify-items: center; gap: 6px; padding: 14px 6px; border: 1px solid var(--rule); background: var(--sheet); border-radius: 12px; font-size: 13px; position: relative; }
.sheet-menu button .badge { position: absolute; top: 6px; right: 8px; }
.combat-bars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.combat-log { display: grid; gap: 3px; font-size: 13px; max-height: 220px; overflow-y: auto; padding: 10px 12px; background: var(--sheet-2); border-radius: 10px; }
.combat-log div { color: var(--ink-2); }
.combat-log div:last-child { color: var(--ink); }
.spells { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.spell { text-align: left; border: 1px solid var(--rule); background: var(--sheet); border-radius: 9px; padding: 7px 10px; display: grid; }
.spell:hover:not(:disabled) { border-color: var(--accent); }
.spell:disabled { opacity: .4; cursor: not-allowed; }
.spell b { font-size: 13px; }
.spell span { font-size: 12px; color: var(--ink-3); }
.roll { font: 13px var(--f-mono); color: var(--ink-3); }

/* 관리 */
.admin-detail { display: grid; gap: 12px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 10px; font-size: 13px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; word-break: break-all; }
.confirm { border: 1px solid color-mix(in srgb, var(--bad) 50%, var(--rule)); border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 13px; }

/* 알림 토스트 */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; z-index: 60; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.toast { background: var(--ink); color: var(--paper); border-radius: 10px; padding: 9px 14px; font-size: 13px; box-shadow: var(--lift); animation: rise .25s ease-out; }
.toast.bad { background: var(--bad); color: #fff; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1360px) { .shell.docked { grid-template-columns: var(--rail) minmax(0, 1fr); } .shell.docked .chat { position: fixed; height: auto; width: min(380px, 100%); box-shadow: var(--lift); z-index: 40; } }
@media (max-width: 900px) {
  .shell, .shell.docked { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .statusbar { padding: 8px 16px; gap: 10px; }
  .meters { order: 3; flex-basis: 100%; max-width: none; min-width: 0; }
  .sb-right .clock .lbl, .sb-right .purse .faint { display: none; }
  .view { padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px)); gap: 18px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--sheet); border-top: 1px solid var(--rule); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .tabbar button { display: grid; justify-items: center; gap: 2px; border: 0; background: none; padding: 6px 0; font-size: 11px; color: var(--ink-3); position: relative; }
  .tabbar button.on { color: var(--accent); font-weight: 600; }
  .tabbar button .badge { position: absolute; top: 0; left: 55%; }
  .chat { width: 100%; }
  .cols-2 { grid-template-columns: minmax(0, 1fr); }
  .combat-bars { grid-template-columns: minmax(0, 1fr); }
  .glasses .tube { height: 96px; }
  .line { grid-template-columns: 72px minmax(0, 1fr); }
  .toasts { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* 다듬기 */
.place-btn .row { flex-wrap: nowrap; align-items: center; }
.place-btn .row .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.admin-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.admin-grid select { min-width: 120px; }

/* ---------- 그림 지도 ---------- */
:root { --map-paper: #efe3c2; --map-paper-2: #e7d7ae; --map-ink: #4a3418; --map-faint: #8a6f45; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --map-paper: #2b251a; --map-paper-2: #352d1f; --map-ink: #ecdcb3; --map-faint: #a89067; } }
:root[data-theme="dark"] { --map-paper: #2b251a; --map-paper-2: #352d1f; --map-ink: #ecdcb3; --map-faint: #a89067; }
.mapwrap { position: relative; height: min(68vh, 720px); min-height: 340px; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--map-paper); touch-action: none; }
#castle-map { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; -webkit-user-select: none; }
#castle-map:active { cursor: grabbing; }
.map-paper { fill: var(--map-paper); }
.sec-box { fill: none; stroke: var(--map-faint); stroke-width: 1.2; stroke-dasharray: 2 6; stroke-linecap: round; }
.sec-title { fill: var(--map-faint); font: 700 14.5px var(--f-display); letter-spacing: .25em; }
.route { fill: none; stroke: var(--map-faint); stroke-width: 1.8; stroke-dasharray: 1 7; stroke-linecap: round; }
.decor { fill: none; stroke: var(--map-faint); stroke-width: 1.2; opacity: .7; }
.room { cursor: pointer; outline: none; }
.room .shape { fill: var(--map-paper-2); stroke: var(--map-ink); stroke-width: 1.5; transition: stroke-width .15s, fill .15s; }
.room:hover .shape, .room:focus-visible .shape { stroke-width: 2.6; }
.room.here .shape { stroke: var(--accent); stroke-width: 3; }
.room.sel .shape { fill: color-mix(in srgb, var(--accent) 18%, var(--map-paper-2)); stroke-width: 2.6; }
.room.locked .shape { fill: url(#hatch); }
.hatch-bg { fill: var(--map-paper-2); }
.hatch-line { stroke: var(--map-faint); stroke-width: 1.1; opacity: .5; }
.room-name { fill: var(--map-ink); font: 700 14.5px var(--f-display); pointer-events: none; }
.room.here .room-name { fill: var(--accent); }
.foot { pointer-events: none; }
.foot ellipse { fill: var(--map-ink); }
.foot text { font: 600 12px var(--f-body); }
.foot.me text { font-weight: 700; text-decoration: underline; }
.foot.away { opacity: .55; }
.foot-more { fill: var(--map-faint); font: 12px var(--f-body); pointer-events: none; }
.foot .prints { animation: tread 2.6s ease-in-out infinite; }
.foot:nth-child(odd) .prints { animation-delay: -1.3s; }
@keyframes tread { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.map-tools { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; }
.map-tools button { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--map-faint); background: var(--map-paper); color: var(--map-ink); font-size: 18px; line-height: 1; }
.map-note { font-size: 13px; color: var(--ink-3); margin-top: -12px; }
.room-sub { font-size: 12px; font-weight: 400; }
@media (max-width: 900px) { .mapwrap { height: auto; aspect-ratio: var(--ar, 1.33); width: 100%; min-height: 0; max-height: 72vh; transition: aspect-ratio .3s; } }

/* ---------- 접속 중 · 상태 ---------- */
.online-rail { display: grid; gap: 4px; padding: 10px 2px 0; border-top: 1px solid var(--rule); min-height: 0; overflow-y: auto; }
.online-rail .person { padding: 5px 6px; }
.online-rail .meta { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.person > span:not(.meta) { min-width: 0; }
.stag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: color-mix(in srgb, var(--sc) 70%, var(--ink)); white-space: nowrap; }
.status-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule); background: var(--sheet); border-radius: 999px; padding: 6px 12px; font-size: 13px; max-width: 220px; }
.status-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-chip:hover { border-color: var(--accent); }
.iconbtn.wide { width: auto; padding: 0 10px; gap: 6px; display: inline-flex; font-size: 13px; }
.online-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ochip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule); background: var(--sheet); border-radius: 10px; padding: 7px 12px; font-size: 13px; text-align: left; }
.ochip:hover { border-color: var(--accent); }
.ochip span { color: var(--ink-3); font-size: 12px; }
.rail { overflow: hidden; }
.rail .nav { flex: none; }
@media (max-width: 900px) {
  .status-chip { max-width: 120px; padding: 6px 10px; }
  .sb-right { gap: 6px; }
}
.online-rail { flex: 1 1 auto; }
.online-rail .meta { display: none; }
.pill.only { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 600; }
.online-rail { align-content: start; }

/* ---------- 공지 ---------- */
.noticebar { display: flex; align-items: center; gap: 10px; padding: 8px 24px; background: var(--accent-soft); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule)); font-size: 13px; }
.nb-text { flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.nb-text:hover { text-decoration: underline; }
.nb-time { white-space: nowrap; }
.ntag { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; color: var(--on-accent); background: var(--accent); }
.ntag-1 { background: #2f7a4a; color: #fff; }
.ntag-2 { background: #b05a1e; color: #fff; }
.ntag-3 { background: #6b7280; color: #fff; }
.notice-quick { display: grid; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.notice-bar .ntag { margin-top: 1px; }
@media (max-width: 900px) { .noticebar { padding: 7px 16px; } .nb-time { display: none; } }

/* ---------- 도움말 ---------- */
.help-toc { position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--paper); padding-block: 8px; }
.help { display: grid; gap: 12px; max-width: 760px; line-height: 1.75; }
.help-h { font-size: 20px; padding-top: 18px; border-top: 1px solid var(--rule); margin-top: 8px; scroll-margin-top: 130px; }
.help-h:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.help-h3 { font-size: 14.5px; margin-top: 4px; }
.help-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.help-tip { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 8px 12px; border-radius: 0 8px 8px 0; font-size: 13px; }
.help code { font-family: var(--f-mono); font-size: 13px; background: var(--sheet-2); padding: 1px 5px; border-radius: 4px; }
.help-faq { display: grid; gap: 4px 0; margin: 0; }
.help-faq dt { font-weight: 600; margin-top: 8px; }
.help-faq dd { margin: 0; color: var(--ink-2); }
@media (max-width: 900px) { .help-toc { position: static; } .help-h { scroll-margin-top: 150px; } }

/* ---------- 성장 ---------- */
.big-num { font-family: var(--f-display); font-size: 32px; line-height: 1.1; }
.num.big { font-size: 20px; }
.attr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.attr-cell { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; background: var(--sheet); }
.subj-row { display: grid; grid-template-columns: 64px 28px minmax(80px, 1fr) minmax(0, 1.3fr); gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--rule); }
.title-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.title-card { border: 1px dashed var(--rule); border-radius: 10px; padding: 10px 12px; display: grid; gap: 5px; opacity: .75; }
.title-card.has { border-style: solid; opacity: 1; background: var(--sheet); }
.title-card.on { border-color: var(--accent); background: var(--accent-soft); }
.ttl { font-family: var(--f-display); font-size: 12px; color: var(--accent); }
h3 + .ttl, .ttl + h3 { margin-top: 0; }
@media (max-width: 900px) { .subj-row { grid-template-columns: 56px 24px 1fr; } .subj-row > .small { grid-column: 1 / -1; } }
.grad { border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); }
.grad-card { border: 1px solid var(--rule); border-radius: 10px; padding: 14px; display: grid; gap: 8px; align-content: start; background: var(--sheet); }
.grad-card h3 { font-size: 18px; }

/* ---------- 메뉴 묶음 색 (쓰임새별) ---------- */
:root { --g-day: #b0740f; --g-stuff: #3b8550; --g-me: #7a55c2; --g-people: #2f6fb8; --g-guide: #6b7280; --g-admin: #b8432f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-day: #e8b04c; --g-stuff: #7cc98f; --g-me: #b69cf0; --g-people: #86b4ee; --g-guide: #a3aaba; --g-admin: #ef8a74; } }
:root[data-theme="dark"] { --g-day: #e8b04c; --g-stuff: #7cc98f; --g-me: #b69cf0; --g-people: #86b4ee; --g-guide: #a3aaba; --g-admin: #ef8a74; }
.g-day { --gc: var(--g-day); } .g-stuff { --gc: var(--g-stuff); } .g-me { --gc: var(--g-me); }
.g-people { --gc: var(--g-people); } .g-guide { --gc: var(--g-guide); } .g-admin { --gc: var(--g-admin); }
.rail { overflow-y: auto; }
.rail .online-rail { flex: 1 0 auto; min-height: 0; overflow: visible; }
.rail .me { flex: none; margin-top: 0; }
.rail-brand { font-size: 20px; letter-spacing: -.01em; }
.tabbar button.on { color: var(--gc, var(--accent)); }
.sheet-modal { width: 100%; max-width: 520px; gap: 14px; }
.sheet-group { display: grid; gap: 6px; }
.sheet-group .nav-label { padding: 0 2px; }
.sheet-menu button .nav-ico { width: 34px; height: 34px; border-radius: 10px; }
.sheet-menu button .nav-ico svg { width: 18px; height: 18px; }
.sheet-menu button.on { border-color: var(--gc); }

/* ---------- 다듬은 스킨 ---------- */
.panel, .card, .item, .next, .check, .letter, .attr-cell, .grad-card, .pick { box-shadow: var(--soft); }
.panel { border-radius: 14px; }
.item, .next, .check, .letter { border-radius: 12px; }
.btn { border-radius: 9px; }
.btn.primary { box-shadow: 0 1px 0 rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .15); }
.view > .block-head:first-child h2, .view > .today-head h1 { font-size: clamp(22px, 3.4vw, 28px); letter-spacing: -.01em; }
.view > .block-head:first-child { padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
.block-head h3 { font-size: 16px; }
.statusbar { background: color-mix(in srgb, var(--sheet) 86%, transparent); }
.track { height: 6px; border-radius: 4px; }
.fill { border-radius: 4px; }
.warn { color: var(--warn); }
.tabbar { box-shadow: 0 -4px 16px rgba(40, 30, 10, .06); }

/* ---------- 화분 ---------- */
.pots { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.pot-card { border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px 12px; display: grid; gap: 6px; align-content: start; background: var(--sheet); }
.pot-card.ready { border-color: color-mix(in srgb, var(--good) 55%, var(--rule)); background: color-mix(in srgb, var(--good) 5%, var(--sheet)); }
.pot-card.is-dry { border-style: dashed; }
.pot-card.empty { background: var(--sheet-2); }
.pot-card .chips .chip { font-size: 13px; padding: 3px 10px; }
.pot-svg { width: 84px; height: 96px; justify-self: center; overflow: visible; }
.pot-svg .pot { fill: #c46f45; } .pot-svg .pot-rim { fill: #d98557; } .pot-svg .soil { fill: #5a3d26; }
.pot-svg .seed { fill: #8a6a3c; }
.pot-svg .stem { stroke: #5c8f3a; stroke-width: 2.4; fill: none; stroke-linecap: round; }
.pot-svg .leaf { fill: #6aa34a; }
.pot-svg.dry .leaf { fill: #b0a466; } .pot-svg.dry .stem { stroke: #9c9055; }
.pot-svg.dry .plant { transform: rotate(4deg); transform-origin: 40px 61px; }
.pot-card.ready .pot-svg .plant { animation: sway 3.6s ease-in-out infinite; transform-origin: 40px 61px; }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

/* ---------- 낚시 ---------- */
.fish-panel { gap: 10px; }
.lake { width: 100%; height: clamp(120px, 20vw, 170px); border-radius: 10px; display: block; }
.lake-sky { fill: color-mix(in srgb, #8fb6d8 45%, var(--sheet)); }
.lake-water { fill: #2b4a5e; }
.lake-wave { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 2; }
.lake-line { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.2; }
.bob-top { fill: #e0503c; } .bob-bot { fill: #f4efe4; }
.ripple { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.4; }
.lake.wait .bobber { animation: bob 2.4s ease-in-out infinite; }
.lake.bite .bobber { animation: dip .45s ease-in-out infinite; }
.lake.bite .ripple { animation: ripple .9s ease-out infinite; transform-origin: 200px 60px; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes dip { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(7px); } }
@keyframes ripple { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.reel-now { animation: pulse .6s ease-in-out infinite; font-size: 14.5px; padding: 9px 18px; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.bite-text { font-family: var(--f-display); font-weight: 700; color: var(--bad); font-size: 16px; }
.catch { border-left: 3px solid var(--g-stuff); background: color-mix(in srgb, var(--g-stuff) 8%, var(--sheet)); padding: 7px 11px; border-radius: 0 8px 8px 0; font-size: 13px; }
.catch.rare { border-left-color: var(--g-day); background: color-mix(in srgb, var(--g-day) 12%, var(--sheet)); font-weight: 600; }
.catch.miss { border-left-color: var(--ink-3); background: var(--sheet-2); color: var(--ink-2); }
.fishbook { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.fb-cell { border: 1px solid var(--rule); border-radius: 9px; padding: 6px 9px; display: grid; font-size: 13px; }
.fb-cell.rare { border-color: color-mix(in srgb, var(--g-day) 55%, var(--rule)); }
.fb-cell.unknown { border-style: dashed; color: var(--ink-3); }

/* ---------- 스크롤바: 얇게, 메뉴는 마우스를 올렸을 때만 보이게 ---------- */
:root { --scroll: color-mix(in srgb, var(--ink) 22%, transparent); --scroll-hover: color-mix(in srgb, var(--ink) 38%, transparent); }
html, .chat-list, .log, .modal, .pop, .combat-log, .table-wrap { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); background-clip: padding-box; }
.rail { scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; }
.rail:hover { scrollbar-color: var(--scroll) transparent; }
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-thumb { background: transparent; }
.rail:hover::-webkit-scrollbar-thumb { background: var(--scroll); background-clip: padding-box; }

/* 화면이 낮으면 메뉴를 촘촘하게 해서 스크롤이 덜 생기게 */
@media (max-height: 860px) {
  .rail { padding-top: 12px; gap: 10px; }
  .nav { gap: 6px; }
  .nav button { padding: 3px 8px; }
  .nav-ico { width: 26px; height: 26px; }
  .nav-label { padding-bottom: 0; }
}

/* ---------- 메뉴 넓이 ---------- */
:root[data-rail="narrow"] { --rail: 196px; }
:root[data-rail="wide"] { --rail: 268px; }
:root[data-rail="wide"] .nav button { padding-block: 6px; font-size: 14.5px; }
:root[data-rail="icon"] { --rail: 76px; }
:root[data-rail="icon"] .rail { padding-inline: 10px; align-items: stretch; }
:root[data-rail="icon"] .rail-brand { font-size: 0; height: 6px; padding: 0; }
:root[data-rail="icon"] .rail-brand small { display: none; }
:root[data-rail="icon"] .nav-label { font-size: 0; height: 1px; padding: 0; margin: 4px 10px; background: var(--gc); opacity: .35; }
:root[data-rail="icon"] .nav button { justify-content: center; padding: 4px 0; }
:root[data-rail="icon"] .nav button > span:not(.nav-ico):not(.badge) { display: none; }
:root[data-rail="icon"] .nav button .badge { position: absolute; top: -2px; right: 2px; margin: 0; }
:root[data-rail="icon"] .nav button.on::before { left: -10px; }
:root[data-rail="icon"] .nav-ico { width: 34px; height: 34px; border-radius: 10px; }
:root[data-rail="icon"] .online-rail { display: none; }
:root[data-rail="icon"] .rail .me { justify-content: center; padding-inline: 0; margin-top: auto; }
:root[data-rail="icon"] .rail .me > span { display: none; }

/* 소포 */
.block { align-content: start; }
.parcel .x { font-size: 14.5px; color: var(--ink-2); }

/* 자동 낚시 */
.auto-fish { display: grid; gap: 8px; border-top: 1px dashed var(--rule); padding-top: 10px; }
.auto-fish.running, .auto-fish.done { border-top: 0; padding-top: 0; }
.rod-stand { fill: none; stroke: #7a5a35; stroke-width: 3; stroke-linecap: round; }
.tag.rare { border-color: color-mix(in srgb, var(--g-day) 60%, var(--rule)); background: color-mix(in srgb, var(--g-day) 10%, var(--sheet)); font-weight: 600; }

/* ---------- 경매장 ---------- */
.auc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.auc-layout > .panel { position: sticky; top: 76px; }
.item.auc { align-items: start; }
.item.auc.top { border-color: color-mix(in srgb, var(--g-stuff) 55%, var(--rule)); }
.auc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.auc-act { display: grid; gap: 6px; justify-items: end; }
#auction-form .row .field { flex: 1; min-width: 0; }
@media (max-width: 1100px) { .auc-layout { grid-template-columns: minmax(0, 1fr); } .auc-layout > .panel { position: static; } }
@media (max-width: 600px) { .item.auc { grid-template-columns: minmax(0, 1fr); } .auc-act { justify-items: start; } #auction-form .row { flex-wrap: wrap !important; } }

/* ---------- 메뉴 두 칸 배치 (설정에서 한 칸으로 바꿀 수 있음) ---------- */
.nav-group { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px; row-gap: 2px; }
.nav-label { grid-column: 1 / -1; }
.nav button { gap: 7px; padding: 4px 6px; min-width: 0; }
.nav button > span:not(.nav-ico):not(.badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav button.on::before { display: none; }
.nav button .badge { position: absolute; top: -3px; left: 24px; margin: 0; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.nav { gap: 8px; }
:root[data-navcols="1"] .nav-group { grid-template-columns: minmax(0, 1fr); }
:root[data-navcols="1"] .nav button.on::before { display: block; }
:root[data-navcols="1"] .nav button .badge { position: static; margin-left: auto; }
:root[data-rail="icon"] .nav-group { grid-template-columns: minmax(0, 1fr); }
:root[data-rail="icon"] .nav button .badge { position: absolute; top: -2px; left: auto; right: 2px; }
:root[data-rail="narrow"]:not([data-navcols="1"]) .nav button { gap: 5px; padding: 4px 4px; font-size: 13px; }
:root[data-rail="narrow"]:not([data-navcols="1"]) .nav-ico { width: 22px; height: 22px; border-radius: 7px; }
:root[data-rail="narrow"]:not([data-navcols="1"]) .nav-ico svg { width: 14px; height: 14px; }
:root[data-rail="narrow"]:not([data-navcols="1"]) .nav button .badge { left: 16px; }

/* ---------- 오늘 시간표 ---------- */
.tl { gap: 6px; }
.tl-cap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.tl-cap .num { font-size: 18px; }
.tl-now-label { font-weight: 600; }
.tl-track { position: relative; height: 34px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--soft); overflow: hidden; }
.tl-curfew { position: absolute; top: 0; bottom: 0; display: grid; place-items: center start; padding-left: 10px;
  background: repeating-linear-gradient(135deg, var(--sheet-2) 0 6px, color-mix(in srgb, var(--ink) 6%, var(--sheet-2)) 6px 8px); }
.tl-curfew span { font-size: 12px; color: var(--ink-3); }
.tl-meal { position: absolute; top: 5px; bottom: 5px; border-radius: 7px; display: grid; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 14%, var(--sheet)); color: color-mix(in srgb, var(--accent) 80%, var(--ink)); font-size: 12px; font-weight: 600; white-space: nowrap; margin-left: 1px; }
.tl-meal.now { background: var(--accent); color: var(--on-accent); }
.tl-meal.ate:not(.now) { opacity: .55; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); z-index: 2; }
.tl-now::before { content: ''; position: absolute; top: -1px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.tl-band { position: relative; height: 22px; }
.tl-band i { position: absolute; top: 2px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--g-people) 45%, transparent); }
.tl-band span { position: absolute; top: 6px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.tl-scale { position: relative; height: 14px; font: 11px var(--f-mono); color: var(--ink-3); }
.tl-scale span { position: absolute; transform: translateX(-50%); }
.tl-scale span:first-child { transform: none; }
.tl-scale span:last-child { transform: translateX(-100%); }
@media (max-width: 600px) { .tl-meal { font-size: 11px; } .tl-scale span:nth-child(even) { display: none; } }

/* ---------- 상태줄: 본문 폭에 맞춰 한 줄 / 두 줄 ---------- */
.stage { container-type: inline-size; container-name: stage; }
.statusbar { flex-wrap: nowrap; }
.where { flex: none; max-width: 200px; }
.where b, .where span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meters { min-width: 180px; }
.sb-right { flex: none; }
@container stage (max-width: 1080px) {
  .statusbar { flex-wrap: wrap; row-gap: 8px; }
  .meters { order: 3; flex-basis: 100%; max-width: none; min-width: 0; }
  .sb-right .clock .lbl { display: none; }
}

/* ---------- 기숙사 점수 ---------- */
.glasses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.glass { display: grid; gap: 4px; text-align: center; }
.glass .tube { height: 150px; border: 1.5px solid color-mix(in srgb, var(--gc) 45%, var(--rule)); border-radius: 40px 40px 12px 12px; background: color-mix(in srgb, var(--gc) 7%, var(--sheet)); position: relative; overflow: hidden; }
.glass .tube::after { content: ''; position: absolute; left: 14%; top: 10%; width: 8%; height: 60%; border-radius: 4px; background: rgba(255, 255, 255, .35); }
.glass .gems { position: absolute; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, #fff 35%, var(--gc)) 0 2px, transparent 3px) 0 0 / 10px 10px, var(--gc); transition: height .6s; }
.glass .pts { font: 600 20px var(--f-mono); margin-top: 4px; }
.glass .hn { font-family: var(--f-display); font-size: 14.5px; color: color-mix(in srgb, var(--gc) 70%, var(--ink)); }
.glass.lead .hn::after { content: ' ★'; color: var(--g-day); }
.today-pts { border: 1px solid var(--rule); background: var(--sheet); border-radius: 12px; padding: 10px 12px; width: min(300px, 100%); text-align: left; box-shadow: var(--soft); }
.today-pts:hover { border-color: var(--accent); }
.glasses.mini { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.hp-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 32px; gap: 8px; align-items: center; font-size: 12px; }
.hp-row .hn { color: color-mix(in srgb, var(--gc) 70%, var(--ink)); white-space: nowrap; }
.hp-row .num { text-align: right; font-size: 13px; }
.hp-row.lead .hn { font-weight: 700; }
.hp-bar { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--gc) 12%, var(--sheet-2)); overflow: hidden; }
.hp-bar i { display: block; height: 100%; min-width: 3px; background: var(--gc); border-radius: 4px; transition: width .6s; }
@media (max-width: 900px) {
  .today-pts { width: 100%; }
  .glasses.mini { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .glass .tube { height: 100px; }
}

/* ---------- 오늘: 학생증 숫자, 접속 목록 ---------- */
.stat-grid { display: grid; gap: 6px; }
.stat-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-grid div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 5px 9px; border-radius: 8px; background: var(--sheet-2); font-size: 13px; }
.stat-grid span { color: var(--ink-2); white-space: nowrap; }
.stat-grid b { font-size: 14.5px; }
@media (min-width: 901px) { :root:not([data-rail="icon"]) #online-today { display: none; } }

/* ---------- 일지 숫자 ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.tile { border: 1px solid var(--rule); background: var(--sheet); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; box-shadow: var(--soft); }
.tile b { font-size: 18px; }
.tile span { font-size: 12px; color: var(--ink-3); }

/* ---------- 장소: 넓은 칸 ---------- */
.cols > .wide { grid-column: 1 / -1; }

/* ---------- 휴대폰: 위쪽 줄을 두 줄로 줄이기, 일지 숫자 작게 ---------- */
@media (max-width: 520px) {
  .statusbar { column-gap: 8px; }
  .where { max-width: 120px; }
  .sb-right { gap: 5px; }
  .sb-right .clock { display: none; }
  .status-chip { padding: 0; width: 34px; height: 34px; justify-content: center; }
  .status-chip span { display: none; }
  .iconbtn { width: 34px; height: 34px; }
  .iconbtn.wide { padding: 0 8px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tile { padding: 8px 10px; }
  .tile b { font-size: 16px; }
}
@media (max-width: 600px) {
  .item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .item > .row, .item > .btn { justify-content: flex-end; justify-self: end; }
}
@media (max-width: 600px) { .attr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .attr-cell .small { font-size: 12px; } }

/* ---------- 아이콘 ---------- */

.hico { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; vertical-align: -6px; border-radius: 8px;
  color: var(--gc); background: color-mix(in srgb, var(--gc) 12%, transparent); flex: none; }
.hico .ico { width: 15px; height: 15px; }
.panel > b .hico, .panel > .row > b .hico, .auto-fish .hico { width: 22px; height: 22px; margin-right: 7px; vertical-align: -5px; border-radius: 7px; }
.panel > b .hico .ico, .panel > .row > b .hico .ico { width: 13px; height: 13px; }
.help-h .hico { width: 30px; height: 30px; vertical-align: -7px; }
.help-toc .chip .hico { width: auto; height: auto; background: none; margin-right: 4px; vertical-align: -3px; }
.help-toc .chip .hico .ico { width: 14px; height: 14px; }
.iti { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; margin-right: 8px; vertical-align: -5px; flex: none;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.iti .ico { width: 13px; height: 13px; }
.chip .iti { width: 18px; height: 18px; margin-right: 5px; vertical-align: -4px; background: none; }
.ti-food { --tc: #c47a1e; } .ti-potion { --tc: #8b5cc7; } .ti-material { --tc: #3f8a4a; } .ti-fish { --tc: #2f7fb0; } .ti-seed { --tc: #6f9a2a; }
.ti-tool { --tc: #6b7280; } .ti-book { --tc: #9a6b3a; } .ti-combat { --tc: #c4473a; } .ti-valuable { --tc: #b8901c; } .ti-key { --tc: #2b9a90; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ti-food { --tc: #e9a55a; } :root:not([data-theme="light"]) .ti-potion { --tc: #b897ec; } :root:not([data-theme="light"]) .ti-material { --tc: #7cc48a; } :root:not([data-theme="light"]) .ti-fish { --tc: #79b8e0; } :root:not([data-theme="light"]) .ti-seed { --tc: #a8cc62; } :root:not([data-theme="light"]) .ti-tool { --tc: #a3aaba; } :root:not([data-theme="light"]) .ti-book { --tc: #d1a172; } :root:not([data-theme="light"]) .ti-combat { --tc: #ee8578; } :root:not([data-theme="light"]) .ti-valuable { --tc: #e4c45a; } :root:not([data-theme="light"]) .ti-key { --tc: #6fd0c5; } }
:root[data-theme="dark"] .ti-food { --tc: #e9a55a; } :root[data-theme="dark"] .ti-potion { --tc: #b897ec; } :root[data-theme="dark"] .ti-material { --tc: #7cc48a; } :root[data-theme="dark"] .ti-fish { --tc: #79b8e0; } :root[data-theme="dark"] .ti-seed { --tc: #a8cc62; } :root[data-theme="dark"] .ti-tool { --tc: #a3aaba; } :root[data-theme="dark"] .ti-book { --tc: #d1a172; } :root[data-theme="dark"] .ti-combat { --tc: #ee8578; } :root[data-theme="dark"] .ti-valuable { --tc: #e4c45a; } :root[data-theme="dark"] .ti-key { --tc: #6fd0c5; }
.mlab { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.mlab .ico { width: 12px; height: 12px; stroke-width: 2.2; }
.mlab span { color: var(--ink-2); font-weight: 400; }
.ck-l { display: inline-flex; align-items: center; gap: 6px; }
.ck-l .ico { width: 15px; height: 15px; color: var(--g-day); }
.check.done .ck-l .ico { color: var(--good); }
.next-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--accent); background: var(--accent-soft); }
.next-ico .ico { width: 18px; height: 18px; }
.next.hot .next-ico { background: var(--accent); color: var(--on-accent); }
/* 공지 팝업 */
.notice-modal { display: grid; gap: 12px; }
.nm-head { display: flex; gap: 12px; align-items: center; }
.nm-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); flex: none; animation: ring 1s ease-in-out 2; }
.nm-ico .ico { width: 22px; height: 22px; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
.nm-item { display: grid; gap: 6px; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 12px; background: var(--sheet-2); }
.nm-item .ntag { justify-self: start; }
.nm-item p { white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.7; }
.sico { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; color: var(--gc, var(--accent)); }
.sico .ico { width: 15px; height: 15px; }
.stat-grid .sico { width: 14px; height: 14px; margin-right: 4px; }
.stat-grid .sico .ico { width: 12px; height: 12px; }
.subj-row { grid-template-columns: 84px 28px minmax(80px, 1fr) minmax(0, 1.3fr); }
@media (max-width: 900px) { .subj-row { grid-template-columns: 78px 24px 1fr; } }
.gate-crest { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); box-shadow: var(--lift); margin-bottom: -6px; }
.gate-crest .ico { width: 28px; height: 28px; }

/* ---------- 파티 전투 ---------- */
.role-attack { --rc: #c4473a; } .role-guard { --rc: #2f6fb8; } .role-heal { --rc: #3b8550; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .role-attack { --rc: #ee8578; } :root:not([data-theme="light"]) .role-guard { --rc: #86b4ee; } :root:not([data-theme="light"]) .role-heal { --rc: #7cc98f; } }
:root[data-theme="dark"] .role-attack { --rc: #ee8578; } :root[data-theme="dark"] .role-guard { --rc: #86b4ee; } :root[data-theme="dark"] .role-heal { --rc: #7cc98f; }
.party-panel { border-color: color-mix(in srgb, var(--g-day) 40%, var(--rule)); }
.party-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.pm { display: flex; gap: 10px; align-items: center; border: 1px solid var(--rule); border-left: 3px solid var(--rc, var(--rule)); border-radius: 10px; padding: 8px 10px; background: var(--sheet); min-height: 56px; }
.pm.empty { border-style: dashed; justify-content: center; background: var(--sheet-2); }
.pm .track { display: block; margin-top: 5px; height: 4px; }
.pm-role { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent); }
.pm-role .ico { width: 16px; height: 16px; }
.party-modal { display: grid; gap: 10px; }
.party-modal h3 { font-size: 20px; }
.party-roster { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { font-size: 13px; border-radius: 999px; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--rc) 45%, var(--rule)); color: var(--ink-2); }
.party-modal .combat-log { max-height: 300px; }
.pv-round { color: var(--ink-3) !important; font-size: 12px; margin-top: 4px; }
.pv-sum { display: grid; gap: 8px; border-radius: 12px; padding: 12px; }
.pv-sum.win { background: color-mix(in srgb, var(--good) 10%, var(--sheet)); }
.pv-sum.lose { background: var(--sheet-2); }
.pv-sum > b { font-family: var(--f-display); font-size: 20px; }
.pm-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pm-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-name .pill { flex: none; }
.party-modal, .notice-modal { --gc: var(--g-day); }

/* ---------- 잊힌 지하 동굴 ---------- */
.ti-mineral { --tc: #7a6a58; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ti-mineral { --tc: #c4b39c; } }
:root[data-theme="dark"] .ti-mineral { --tc: #c4b39c; }
.th-earth { --cv-a: #3b2f25; --cv-b: #5a4636; --cv-glow: #e0a85a; }
.th-ice { --cv-a: #1e3343; --cv-b: #335a73; --cv-glow: #a8dcf2; }
.th-crystal { --cv-a: #2c2140; --cv-b: #4b3670; --cv-glow: #d6a8ff; }
.th-lava { --cv-a: #3a1712; --cv-b: #6b2618; --cv-glow: #ff8a4c; }
.th-void { --cv-a: #0c0d12; --cv-b: #1c1e2a; --cv-glow: #8fa0ff; }
.mine-hero, .mine-head { border-radius: 16px; padding: 22px; color: #f4ede2; background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--cv-glow) 30%, transparent), transparent 45%), linear-gradient(160deg, var(--cv-b), var(--cv-a)); box-shadow: var(--lift); }
.mine-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: end; }
.mine-hero h1, .mine-head h1 { font-size: clamp(26px, 4vw, 34px); color: #fff; }
.mine-hero .eyebrow, .mine-head .eyebrow { color: color-mix(in srgb, var(--cv-glow) 70%, #fff); }
.mine-hero .prose { color: #e9e0d2; font-size: 14.5px; }
.mine-stats .tile { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); box-shadow: none; }
.mine-stats .tile b { color: #fff; } .mine-stats .tile span { color: #d8cdbd; }
.mine-run { display: grid; gap: 14px; }
.mine-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.mine-head .btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }
.mine-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fam-rock { --fc2: #8a7a66; } .fam-beast { --fc2: #c4562f; } .fam-spirit { --fc2: #5b7fd6; }
.rps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rps-cell { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--fc2) 45%, var(--rule)); background: color-mix(in srgb, var(--fc2) 8%, var(--sheet)); text-align: center; }
.rps-cell b { font-size: 14.5px; }
.rps-cell .small { color: var(--ink-3); }
.rps-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--fc2); }
.rps-ico .ico { width: 22px; height: 22px; }
.rps.act .rps-cell { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.rps.act .rps-cell:hover { transform: translateY(-2px); box-shadow: var(--lift); border-color: var(--fc2); }
.mine-enemy { border-radius: 14px; padding: 16px; display: grid; gap: 10px; background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--fc2, var(--ink)); box-shadow: var(--soft); }
.mine-enemy.hidden-foe { background: linear-gradient(160deg, #16171d, #262833); color: #e8e6e0; border-color: #333; }
.mine-enemy.hidden-foe .prose { color: #c9c6be; }
.mine-enemy.hidden-foe .rps-cell { background: rgba(255, 255, 255, .06); color: #eee; }
.foe-name { font-family: var(--f-display); font-size: 20px; }
.mine-floor { display: grid; gap: 10px; border-radius: 14px; padding: 16px; background: color-mix(in srgb, var(--cv-a) 8%, var(--sheet)); border: 1px solid var(--rule); }
.rocks { display: flex; flex-wrap: wrap; gap: 10px; min-height: 64px; align-items: center; }
.rock-btn { width: 64px; height: 56px; border-radius: 16px 20px 12px 18px; border: 1px solid color-mix(in srgb, var(--cv-b) 40%, var(--rule)); background: linear-gradient(160deg, color-mix(in srgb, var(--cv-b) 30%, var(--sheet)), color-mix(in srgb, var(--cv-a) 25%, var(--sheet-2))); display: grid; place-items: center; color: color-mix(in srgb, var(--cv-a) 70%, var(--ink)); transition: transform .1s; }
.rock-btn:hover { transform: translateY(-2px) rotate(-2deg); }
.rock-btn:active { transform: scale(.94); }
.rock-btn .ico { width: 28px; height: 28px; }
.tag .iti { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; background: none; }
.stage-list { margin: 0; padding-left: 22px; display: grid; gap: 3px; font-size: 13px; }
.pv-stage { color: var(--g-day) !important; font-weight: 700; margin-top: 8px; }
.mine-door { background: linear-gradient(160deg, color-mix(in srgb, #5a4636 12%, var(--sheet)), var(--sheet)); }
@media (max-width: 700px) { .mine-hero { grid-template-columns: minmax(0, 1fr); } .rps-cell { padding: 10px 4px; } .rps-ico { width: 34px; height: 34px; } }
.mine-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ti-special { --tc: #c0508e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ti-special { --tc: #ec8cc0; } }
:root[data-theme="dark"] .ti-special { --tc: #ec8cc0; }
.floo-chip { border-color: color-mix(in srgb, #3f9a62 50%, var(--rule)); color: #2e7a4c; }
.chip .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.modal h3 .iti { vertical-align: -3px; }
#bgm-host { position: fixed; width: 200px; height: 200px; left: -9999px; top: 0; overflow: hidden; pointer-events: none; }
.bgm-btn.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); background: var(--accent-soft); }
.bgm-btn.on .ico { animation: bob 1.6s ease-in-out infinite; }

/* ---------- 장비 ---------- */
.badge.soft { background: var(--sheet-2); color: var(--ink-2); border: 1px solid var(--rule); }
.gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.gear-card { gap: 8px; }
.gear-name { display: inline-flex; align-items: center; gap: 8px; }
.gear-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.gear-ico .ico { width: 18px; height: 18px; }
.gear-lv { font-size: 24px; font-weight: 700; color: var(--accent); }
.dur .track { height: 6px; }
.dur .fill { background: var(--good); }
.dur.worn .fill { background: var(--warn); } .dur.worn .dur-st { color: var(--warn); }
.dur.bad .fill { background: var(--bad); } .dur.bad .dur-st { color: var(--bad); font-weight: 600; }
.dur-st { font-size: 12px; color: var(--good); }
.gear-up, .gear-fix { display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--rule); padding-top: 8px; }
.gear-up .btn { align-self: flex-start; }
.need { display: flex; flex-wrap: wrap; gap: 6px; }
.need-i { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 2px 8px 2px 4px; border-radius: 6px; background: var(--sheet-2); }
.need-i .ico { width: 14px; height: 14px; }
.need-i.no { color: var(--bad); }
.need-i.no b { color: var(--bad); }
.forge-note.here { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); background: color-mix(in srgb, var(--accent) 5%, var(--sheet)); }
.gear-mini { display: grid; gap: 8px; }
.gm { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.gm > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.gm > span .ico { width: 15px; height: 15px; color: var(--ink-3); }
.gm .dur { grid-column: 1 / -1; }

/* ---------- 이변 (게임의 종이·잉크 톤에 맞춤) ---------- */
.inc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.inc-card { position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left; border: 1px solid var(--rule); background: var(--sheet); border-radius: 14px; padding: 14px 16px; box-shadow: var(--soft); overflow: hidden; }
.inc-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--dc, var(--rule)); }
.inc-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); }
.inc-card.st-solved { --dc: var(--good); } .inc-card.st-failed { opacity: .7; }
.inc-card .ico { width: 14px; height: 14px; vertical-align: -2px; }
.inc-name { font-family: var(--f-display); font-size: 16px; }
.inc-prog, .inc-bar { display: block; height: 7px; border-radius: 4px; background: var(--sheet-2); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.inc-prog i, .inc-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), var(--accent)); transition: width .4s; }
.inc-bar { height: 10px; border-radius: 6px; }
.dtag { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 1px 9px; border-radius: 999px; font-weight: 600; background: color-mix(in srgb, var(--dc) 13%, transparent); color: color-mix(in srgb, var(--dc) 85%, var(--ink)); }
.d-D { --dc: #6b8f5a; } .d-C { --dc: #3f6fc4; } .d-B { --dc: #c0812b; } .d-A { --dc: #b3432f; } .d-S { --dc: #7a2fb3; }
.inc-card.st-open.d-D, .inc-card.st-open.d-C, .inc-card.st-open.d-B, .inc-card.st-open.d-A { }
.inc-detail { gap: 12px; }
hr.dash { border: 0; border-top: 1px dashed var(--rule); margin: 2px 0; width: 100%; }
.inc-title { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--f-display); font-size: 20px; flex-wrap: wrap; }
.inc-title .ico { width: 18px; height: 18px; color: var(--accent); align-self: center; }
.inc-detail .small .ico { width: 13px; height: 13px; vertical-align: -2px; }
.inc-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.inc-banner > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inc-banner b { font-family: var(--f-display); font-size: 16px; }
.inc-banner .big-t { font-size: 16px; }
.inc-banner.wait { background: var(--sheet-2); border-color: var(--rule); }
.inc-banner.solved { background: color-mix(in srgb, var(--good) 10%, var(--sheet)); border-color: color-mix(in srgb, var(--good) 35%, transparent); } .inc-banner.solved b { color: var(--good); }
.inc-banner.failed { background: var(--sheet-2); border-color: var(--rule); } .inc-banner.failed b { color: var(--ink-2); }
.inc-brief { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 13px; }
.inc-brief dt { color: var(--ink-3); font-size: 13px; } .inc-brief dd { margin: 0; }
.inc-weak { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; background: var(--sheet-2); border-radius: 10px; font-size: 13px; }
.inc-weak b { color: var(--accent); }
.inc-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 8px; }
.inc-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 58px; padding: 8px; border-radius: 12px; text-align: center; }
.inc-slot.taken { background: var(--sheet-2); }
.inc-slot.taken.me { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.inc-slot.open { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--rule)); color: var(--accent); font-size: 13px; font-weight: 600; }
.inc-slot.open:hover { background: var(--accent-soft); }
.inc-slot.empty { border: 1px dashed var(--rule); }
.inc-log { display: flex; flex-direction: column; }
.inc-log .ico { width: 14px; height: 14px; }
.inc-log-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 13px; flex-wrap: wrap; }
.inc-log-row:last-child { border-bottom: 0; }
.inc-log-row .t { margin-left: auto; }
.ap { font-size: 12px; padding: 0 8px; background: var(--sheet-2); border-radius: 999px; color: var(--ink-2); }
.ap.full { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.gr { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.gr.g-miss { color: var(--ink-3); font-weight: 400; } .gr.g-good { color: var(--ink-2); } .gr.g-great { color: var(--mp); } .gr.g-excellent { color: var(--accent); }
.quiet-inc { text-align: center; padding: 28px 16px; }
.inc-act { display: flex; flex-direction: column; gap: 12px; }
.inc-act > h3 { display: flex; align-items: center; gap: 8px; }
.inc-act > h3 .ico { width: 18px; height: 18px; color: var(--accent); }
.inc-act-brief { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; background: var(--sheet-2); border-radius: 10px; font-size: 13px; }
.wk { color: var(--accent); font-weight: 600; } .wk.q { color: var(--ink-3); font-weight: 400; }
.inc-act .eyebrow { display: flex; align-items: baseline; gap: 8px; }
.inc-opts { display: grid; gap: 8px; }
.inc-opts.three { grid-template-columns: repeat(3, 1fr); } .inc-opts.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .inc-opts.three { grid-template-columns: 1fr; } }
.inc-opt { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border: 1px solid var(--rule); background: var(--sheet); border-radius: 12px; }
.inc-opt:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); }
.inc-opt b { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; }
.inc-opt b .ico { width: 15px; height: 15px; color: var(--ink-3); }
.inc-opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.inc-opt.on b .ico { color: var(--accent); }
.fit { font-size: 11px; font-weight: 600; color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); border-radius: 999px; padding: 0 6px; }
.inc-preview { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--rule); }
.inc-result { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-top: 6px; }
.inc-result .gr-big { font-family: var(--f-display); font-size: 28px; font-weight: 700; }
.inc-result.g-miss .gr-big { color: var(--ink-3); } .inc-result.g-good .gr-big { color: var(--ink); } .inc-result.g-great .gr-big { color: var(--mp); } .inc-result.g-excellent .gr-big { color: var(--accent); }
.inc-result .big-d { font-size: 20px; }
.inc-result .row.end { align-self: stretch; }

/* ---------- 프로필 ---------- */
.prof-modal { display: flex; flex-direction: column; gap: 14px; }
.prof-card { display: flex; gap: 18px; align-items: flex-start; }
.prof-photo { position: relative; flex: none; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--pc) 16%, var(--sheet-2)); box-shadow: 0 0 0 3px var(--sheet), 0 0 0 4px color-mix(in srgb, var(--pc) 45%, var(--rule)); display: grid; place-items: center; }
.prof-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prof-photo .mono { font-family: var(--f-display); font-size: 40px; color: color-mix(in srgb, var(--pc) 75%, var(--ink)); }
.prof-photo:not(.noimg) .mono { visibility: hidden; }
.prof-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.prof-name { font-family: var(--f-display); font-size: 24px; }
.hpill { font-size: 12px; padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--hc) 14%, transparent); color: color-mix(in srgb, var(--hc) 85%, var(--ink)); font-weight: 600; }
.pill.temp { color: var(--ink-3); }
.temp-box { padding: 8px 12px; font-size: 13px; color: var(--ink-2); border-radius: 10px; background: var(--sheet-2); }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-weight: 600; }
.fat { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; max-width: 420px; }
.fat .ico { width: 14px; height: 14px; color: var(--st); vertical-align: -2px; }
.fat-bar { height: 7px; border-radius: 4px; background: var(--sheet-2); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.fat-bar i { display: block; height: 100%; border-radius: 4px; background: var(--st); }
.fat-bar.hi i { background: var(--bad); }
.prof-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.prof-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1px solid var(--rule); background: var(--sheet); white-space: nowrap; font-size: 13px; border-radius: 999px; color: var(--ink-2); }
.prof-tabs button .ico { width: 14px; height: 14px; }
.prof-tabs button:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); }
.prof-tabs button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.prof-body { display: flex; flex-direction: column; gap: 12px; }
.prof-modal .prof-body { max-height: min(58vh, 560px); overflow-y: auto; padding-right: 2px; }
.prof-bio { font-size: 16px; }
.prof-kv { grid-template-columns: auto 1fr; }
.prof-page { padding: 20px; }
.act-grade { display: flex; gap: 14px; align-items: center; }
.act-grade > div { display: flex; flex-direction: column; gap: 3px; }
.grade-box { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--sheet-2); font-family: var(--f-display); font-size: 24px; font-weight: 700; color: var(--ink-3); }
.grade-box.g-S { color: #fff; background: var(--accent); } .grade-box.g-A { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.grade-box.g-B { color: var(--mp); background: color-mix(in srgb, var(--mp) 12%, transparent); } .grade-box.g-C { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.grade-box.g-D { color: var(--ink-2); }
.rel-group { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.rel-group:last-child { border-bottom: 0; }
.rel-k { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-3); }
.rel-k .ico { width: 14px; height: 14px; }
.rel-people { display: flex; flex-wrap: wrap; gap: 6px; }
.rel-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 11px; border-radius: 999px; background: var(--sheet-2); font-size: 13px; }
.rel-chip .linkish { text-decoration: none; }
.rel-chip .x { border: 0; background: none; padding: 0 2px; color: var(--ink-3); display: inline-grid; place-items: center; }
.rel-chip .x .ico { width: 13px; height: 13px; }
.rel-pending { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; background: var(--accent-soft); border-radius: 12px; margin-bottom: 8px; }
.rel-pending.out { background: var(--sheet-2); }
.rel-req { gap: 8px; }
.rel-new { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); }
.rel-new .chip .ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px 12px; }
@media (max-width: 560px) {
  .prof-card { gap: 12px; }
  .prof-photo { width: 80px; height: 80px; }
  .prof-photo .mono { font-size: 32px; }
  .prof-name { font-size: 20px; }
}
.modal:has(.prof-modal), .modal:has(.inc-act) { width: min(680px, 100%); }

/* ---------- 마법 생물 ---------- */
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.cr-card { gap: 10px; }
.cr-card.focus, .cr-mini.focus { box-shadow: 0 0 0 2px var(--accent), var(--soft); }
.cr-card.st-cold { opacity: .7; }
.cr-top { display: flex; gap: 14px; align-items: flex-start; }
.cr-pic { flex: none; display: grid; place-items: center; border-radius: 16px; background: radial-gradient(circle at 50% 60%, var(--sheet-2), transparent 70%); }
.cr-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cr-name { font-family: var(--f-display); font-size: 18px; }
.cr-desc { color: var(--ink-2); font-family: var(--f-display); line-height: 1.6; }
.cr-svg .shadow { fill: var(--ink); opacity: .08; }
.cr-svg .shell { stroke: color-mix(in srgb, var(--ink) 25%, transparent); stroke-width: 1; }
.cr-svg .spot { fill: #fff; opacity: .35; }
.cr-svg .crack { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.cr-svg.cold { filter: grayscale(.85) brightness(1.05); }
.cr-svg.live .body > * { fill: var(--cc); stroke: color-mix(in srgb, var(--cc) 60%, var(--ink)); stroke-width: 1.2; }
.cr-svg.live .body .wing { fill: color-mix(in srgb, var(--cc) 65%, #fff); }
.cr-svg.live .body .tail, .cr-svg.live .body .horn { fill: none; stroke: var(--cc); stroke-width: 4; stroke-linecap: round; }
.cr-svg.live .body .coil { fill: none; stroke: var(--cc); stroke-width: 9; stroke-linecap: round; }
.cr-svg.live .body .eye { fill: #fff; stroke: none; }
.cr-svg.live .body .beak { fill: #e2a93b; stroke: none; }
.cr-svg.live .body .spot { fill: #fff; opacity: .4; stroke: none; }
.cr-svg.live { animation: cr-bob 3.2s ease-in-out infinite; }
@keyframes cr-bob { 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .cr-svg.live { animation: none; } }
.cr-prog { display: flex; flex-direction: column; gap: 4px; }
.cr-prog .track { height: 7px; }
.cr-prog .fill { background: var(--fc); }
.cr-acts { gap: 6px; }
.cr-acts select { width: auto; max-width: 180px; padding: 4px 8px; font-size: 13px; }
.cr-acts .btn .ico { width: 14px; height: 14px; }
.hearts { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-3); }
.hearts i { display: inline-grid; } .hearts .ico { width: 14px; height: 14px; }
.hearts i.on { color: #c4523f; } .hearts i.on .ico { fill: currentColor; }
.hearts .num { margin-left: 5px; }
.cr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.cr-mini { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--sheet); box-shadow: var(--soft); }
.cr-mini-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-mini .btn .ico { width: 14px; height: 14px; }
.cr-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.cr-bk b { font-family: var(--f-display); display: block; }
.cr-bk.unknown .cr-svg { opacity: .8; }
.cr-adults { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--sheet-2); }
.cr-chip .cr-svg { width: 40px; height: 40px; }
.cr-chip > span { display: flex; flex-direction: column; line-height: 1.3; }
.comp-line { display: inline-flex; align-items: center; gap: 4px; }
.comp-line .cr-svg { width: 30px; height: 30px; }
.nest-box { border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); background: color-mix(in srgb, var(--accent) 5%, var(--sheet)); }
.nest { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.nest-egg { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 10px; border-radius: 12px; background: var(--sheet); border: 1px solid var(--rule); }
.nest-egg .small { font-family: var(--f-display); color: var(--ink-2); }
.mine-run .nest-box { color: var(--ink); }

/* ---------- 이변 이야기 ---------- */
.inc-story { font-family: var(--f-display); font-size: 14.5px; line-height: 1.85; color: var(--ink); margin: 2px 0; max-width: 68ch; }
.inc-nowbox { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; font-family: var(--f-display); font-size: 14.5px; }
.inc-nowbox.st-solved { border-left-color: var(--good); background: color-mix(in srgb, var(--good) 9%, var(--sheet)); }
.inc-nowbox.st-failed { border-left-color: var(--ink-3); background: var(--sheet-2); }
.inc-now { font-family: var(--f-display); color: var(--ink-2); line-height: 1.6; }

/* ---------- 왼쪽 메뉴 맨 위 ‘오늘’ ---------- */
.g-home { --gc: var(--accent); }
.nav-group.g-home { grid-template-columns: minmax(0, 1fr) !important; margin-bottom: 4px; }
.nav .nav-home { padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--rule)); background: color-mix(in srgb, var(--accent) 6%, var(--sheet)); border-radius: 12px; }
.nav .nav-home .nh-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nav .nav-home .nh-t b { font-size: 14.5px; color: var(--ink); }
.nav .nav-home .nh-t small { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.nav .nav-home.on { background: var(--accent-soft); border-color: var(--accent); }
.nav .nav-home.on::before { display: none; }
:root[data-rail="icon"] .nav .nav-home .nh-t { display: none; }

/* ---------- 왼쪽 아래 접속 중: 이름만 작게 ---------- */
.online-rail { display: flex; flex-direction: column; gap: 6px; padding: 10px 4px 8px; }
.or-head { display: flex; align-items: center; justify-content: space-between; border: 0; background: none; padding: 0 4px; font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }
.or-head b { font-size: 12px; color: var(--good); }
.or-head:hover { color: var(--ink); }
.or-names { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.or-n { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 1px 5px; border-radius: 6px; font-size: 13px; color: var(--ink-2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-n .dot { width: 6px; height: 6px; flex: none; }
.or-n:hover { background: var(--sheet-2); color: var(--ink); }
.or-n.me { font-weight: 600; color: var(--ink); }
.or-n.away { opacity: .6; }
.or-n.more { color: var(--accent); font-weight: 600; }
:root[data-rail="icon"] .or-names { display: none; }

/* ---------- 시클 지갑 ---------- */
.purse { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 5px; border-radius: 999px; background: color-mix(in srgb, #c9a227 12%, var(--sheet)); border: 1px solid color-mix(in srgb, #c9a227 35%, var(--rule)); font-size: 13px; white-space: nowrap; }
.purse .coin { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(145deg, #f2d27a, #c9a227); color: #6b4f0a; }
.purse .coin .ico { width: 13px; height: 13px; }
.purse b { color: var(--ink); }
.sb-right .clock { padding-left: 8px; border-left: 1px solid var(--rule); }

/* ---------- 결투 결과 ---------- */
.duel-result { display: flex; flex-direction: column; gap: 12px; }
.duel-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px; border-radius: 12px; background: var(--sheet-2); text-align: center; }
.duel-head h3 { font-size: 24px; }
.duel-head.won { background: color-mix(in srgb, var(--good) 11%, var(--sheet)); } .duel-head.won h3 { color: var(--good); }
.duel-head.lost h3 { color: var(--bad); }
.duel-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duel-side { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rule); }
.duel-side.win { border-color: color-mix(in srgb, var(--good) 50%, var(--rule)); }
.duel-log { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.6; }
.duel-log .dl-round { margin-top: 6px; font-size: 12px; color: var(--ink-3); letter-spacing: .05em; }
.duel-log .dl-me { color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.gear-tier { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--sheet-2); }
.duel-hist { display: flex; flex-direction: column; }
.dh-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.dh-row:last-child { border-bottom: 0; }
.dh-res { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-family: var(--f-display); background: var(--sheet-2); color: var(--ink-2); }
.dh-res.win { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.dh-res.lose { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.dh-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }

/* ---------- 이변 화면 (정리판) ---------- */
.inc-wrap { display: flex; flex-direction: column; gap: 14px; }
.inc-head { gap: 12px; }
.ih-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inc-head .inc-title { font-size: 24px; }
.ih-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.ih-r .ico { width: 13px; height: 13px; vertical-align: -2px; }
.ih-prog { display: flex; align-items: center; gap: 12px; }
.ih-prog .inc-bar { flex: 1; height: 12px; }
.ih-prog > b { font-size: 20px; min-width: 56px; text-align: right; }
.ia { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); }
.ia > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ia b { font-family: var(--f-display); font-size: 16px; }
.ia.wait, .ia.join { background: var(--sheet-2); }
.ia.solved { background: color-mix(in srgb, var(--good) 11%, var(--sheet)); } .ia.solved b { color: var(--good); }
.ia.failed { background: var(--sheet-2); } .ia.failed b { color: var(--ink-2); }
.ia-timer { font-family: var(--f-mono) !important; font-size: 24px !important; }
.btn.big { padding: 10px 18px; font-size: 14.5px; }
.inc-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 980px) { .inc-cols { grid-template-columns: minmax(0, 1fr); } }
.inc-main, .inc-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.inc-tale { gap: 14px; }
.inc-tale .inc-story { font-size: 16px; }
.inc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .inc-facts { gap: 8px; } .if { padding: 9px 11px; font-size: 13px; } }
.if { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 12px; background: var(--sheet); border: 1px solid var(--rule); font-size: 13px; box-shadow: var(--soft); }
.tip-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.tip-row > .eyebrow { flex: none; }
.wchips { display: inline-flex; gap: 4px; }
.wchip { display: inline-grid; place-items: center; min-width: 28px; padding: 1px 9px; border-radius: 999px; background: var(--sheet-2); color: var(--ink-3); font-size: 13px; }
.wchip.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ip-group { display: flex; flex-direction: column; gap: 5px; }
.ip-list { display: flex; flex-wrap: wrap; gap: 5px; }
.ip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--sheet-2); font-size: 13px; }
.ip.me { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.ip .faint { font-size: 12px; }
.inc-log > b { margin-bottom: 4px; }
.or-names { align-items: flex-end; }
.or-n { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; }
.or-nm { display: inline-flex; align-items: center; gap: 4px; }
.or-t { font-size: 10px; color: var(--accent); letter-spacing: -.01em; padding-left: 10px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-people { gap: 10px; }
.inc-people .inc-slots { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.inc-slot.taken b { font-size: 14.5px; }

/* =========================================================
   덜 갑갑하게: 테두리·그림자를 걷어 내고, 바탕색 차이와 여백으로만 나눈다
   ========================================================= */
.panel, .card { border-color: transparent; box-shadow: none; border-radius: 16px; }
.panel { padding: 18px; }
.panel.tight { padding: 14px 16px; }
.view { gap: 22px; }
.cols, .cols-2 { gap: 14px; }
/* 카드 안의 카드는 상자 대신 바탕만 살짝 */
.panel .panel, .panel .card { background: var(--sheet-2); padding: 12px 14px; border-radius: 12px; }
/* 줄 목록: 상자 대신 가는 구분선 */
.item { border-color: transparent; box-shadow: none; background: var(--sheet); }
.panel .item, .panel .list .item { background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 10px 2px; box-shadow: none; }
.panel .list .item:last-child, .panel .item:last-child { border-bottom: 0; }
.panel .list { gap: 0; }
.next, .check, .tile, .letter, .attr-cell, .grad-card, .pick, .today-pts { border-color: transparent; box-shadow: none; }
.next.hot { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--sheet)); }
.check:hover, .next:hover { border-color: transparent; background: color-mix(in srgb, var(--accent) 4%, var(--sheet)); }
.tl-track { border-color: transparent; box-shadow: none; }
.inc-card, .if, .cr-mini, .nest-egg, .duel-side, .inc-opt, .gear-up, .gear-fix { box-shadow: none; }
.inc-card, .if, .cr-mini { border-color: transparent; }
.panel .if, .panel .cr-mini, .panel .nest-egg { background: var(--sheet-2); border-color: transparent; }
.duel-side { border-color: transparent; background: var(--sheet-2); }
.gear-up, .gear-fix { border-top-style: solid; }
.title-card { box-shadow: none; }
.block-head { padding-bottom: 2px; }
.notice-bar { border-color: transparent; }
.forge-note.here { border-color: transparent; }
.nest-box, .rel-pending { border-color: transparent; }

/* ---------- 상점 물건 카드 ---------- */
.goods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.goods { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 16px 12px 14px; border-radius: 16px; background: var(--sheet); min-width: 0; }
.panel .goods { background: var(--sheet-2); }
.goods.owned { opacity: .7; }
.goods .g-ico { width: 46px; height: 46px; border-radius: 14px; margin: 0 0 2px; }
.goods .g-ico .ico { width: 24px; height: 24px; }
.g-name { font-size: 14.5px; line-height: 1.35; font-family: var(--f-display); }
.g-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.gtag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--sheet-2); color: var(--ink-2); }
.panel .gtag { background: var(--sheet); }
.gtag.only { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.g-desc { font-size: 12px; line-height: 1.55; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.g-eff { font-size: 12px; color: var(--good); }
.g-own { font-size: 12px; color: var(--ink-3); }
.g-price { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 4px; }
.g-price .coin { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(145deg, #f2d27a, #c9a227); color: #6b4f0a; }
.g-price .coin .ico { width: 11px; height: 11px; }
.g-price b { font-size: 14.5px; }
.qty { display: inline-flex; align-items: stretch; border-radius: 10px; overflow: hidden; background: var(--sheet-2); }
.panel .qty { background: var(--sheet); }
.qty button { border: 0; background: none; width: 30px; font-size: 16px; color: var(--ink-2); }
.qty button:hover { background: var(--accent-soft); color: var(--accent); }
.qty input { width: 40px; border: 0; background: transparent; text-align: center; font-family: var(--f-mono); font-size: 13px; padding: 4px 0; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty .qty-max { width: auto !important; flex: 0 0 auto; padding: 0 7px; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--accent); border-left: 1px solid var(--rule); }
.goods .g-row .qty button:not(.qty-max) { width: 20px !important; min-width: 0 !important; flex: 0 0 20px; padding: 0 !important; } .goods .g-row .qty input { width: 26px !important; min-width: 0 !important; flex: 0 0 26px; padding: 4px 0 !important; }
.goods .g-row .qty .qty-max { padding: 0 6px !important; }
.goods .g-row .g-price { min-width: 0; } .goods .g-row .g-price .coin { flex-shrink: 0; }
.goods .g-row .g-price { position: relative; overflow: visible; }
.goods .g-row .g-sum { position: absolute; left: 0; bottom: 100%; margin: 0 0 1px; font-size: 10.5px; opacity: .75; white-space: nowrap; pointer-events: none; } .goods .g-row .g-sum .num { font-size: 10.5px; }
.goods .g-row { flex-wrap: nowrap; gap: 6px; } .goods .g-row .qty { flex-shrink: 0; }
.g-total { color: var(--ink-3); }
.g-total b { color: var(--ink); }
.g-btns { display: flex; gap: 6px; width: 100%; justify-content: center; }
.g-btns .btn.primary { flex: 1; justify-content: center; max-width: 110px; }
.g-gift { padding: 6px 9px; }
.g-gift .ico { width: 16px; height: 16px; }
.shop-panel { gap: 12px; }
@media (max-width: 560px) { .goods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .goods { padding: 14px 10px 12px; } }

/* ---------- 가게마다 다른 색 (data.js SHOPS 의 color) ---------- */
.shop-sec { --sc: var(--accent); background: color-mix(in srgb, var(--sc) 9%, var(--sheet)); border-radius: 18px; padding: 16px 18px; }
.block.shop-sec { gap: 12px; }
.shop-sec > .block-head h3, .shop-sec > .row > b { color: color-mix(in srgb, var(--sc) 80%, var(--ink)); }
.shop-sec > .block-head h3 .hico, .shop-sec > .row > b .hico { background: color-mix(in srgb, var(--sc) 18%, transparent); color: var(--sc); }
.shop-sec .goods { background: var(--sheet); }
.shop-sec .gtag { background: color-mix(in srgb, var(--sc) 8%, var(--sheet-2)); }
.shop-sec .gtag.only { background: color-mix(in srgb, var(--sc) 18%, transparent); color: color-mix(in srgb, var(--sc) 85%, var(--ink)); }
.shop-sec .qty { background: color-mix(in srgb, var(--sc) 7%, var(--sheet-2)); }
.shop-sec .btn.primary { background: var(--sc); border-color: var(--sc); color: #fff; }
.shop-sec .notice-bar { background: color-mix(in srgb, var(--sc) 8%, var(--sheet)); }
.shop-sec .chip.on { border-color: var(--sc); color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, transparent); }
.panel.shop-sec { border-left: 4px solid var(--sc); }
.panel.shop-sec .pill.only { color: var(--sc); border-color: color-mix(in srgb, var(--sc) 45%, transparent); }

/* ---------- 상점 카드 더 작게 ---------- */
.goods-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.goods { padding: 11px 9px 10px; gap: 4px; border-radius: 13px; }
.goods .g-ico { width: 34px; height: 34px; border-radius: 10px; }
.goods .g-ico .ico { width: 18px; height: 18px; }
.g-name { font-size: 13px; }
.gtag { font-size: 11px; padding: 0 6px; }
.g-desc { font-size: 12px; line-height: 1.45; -webkit-line-clamp: 2; }
.g-eff, .g-own { font-size: 11px; }
.g-price b { font-size: 13px; }
.g-price .faint { font-size: 12px; }
.qty button { width: 24px; font-size: 14.5px; }
.qty input { width: 30px; font-size: 13px; padding: 2px 0; }
.g-total { font-size: 12px; }
.g-btns .btn { padding: 4px 8px; font-size: 13px; }
.g-gift .ico { width: 14px; height: 14px; }
.shop-sec { padding: 14px 16px; }
@media (max-width: 560px) { .goods-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; } .goods { padding: 10px 7px 9px; } .g-tags .gtag:not(.only) { display: none; } }
@media (max-width: 560px) {
  .goods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .goods { padding: 9px 5px 8px; }
  .goods .g-ico { width: 28px; height: 28px; } .goods .g-ico .ico { width: 15px; height: 15px; }
  .g-name { font-size: 12px; }
  .g-desc { display: none; }
  .qty button { width: 20px; } .qty input { width: 24px; }
  .g-btns { gap: 4px; } .g-btns .btn { padding: 4px 6px; font-size: 12px; } .g-gift { padding: 4px 5px !important; }
  .shop-sec { padding: 12px 10px; }
  .panel.shop-sec { border-left-width: 3px; }
}
.goods .g-ico { border: 0; cursor: pointer; } .g-name { cursor: pointer; }

/* ---------- 상점 카드: 세로로 낮게 ---------- */
.goods-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; }
.goods { align-items: stretch; text-align: left; gap: 6px; padding: 10px 11px; }
.g-top { display: flex; gap: 8px; align-items: center; min-width: 0; }
.goods .g-ico { width: 30px; height: 30px; border-radius: 9px; flex: none; margin: 0; }
.goods .g-ico .ico { width: 16px; height: 16px; }
.g-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-tags { justify-content: flex-start; flex-wrap: nowrap; overflow: hidden; }
.gtag { white-space: nowrap; }
.g-own { font-size: 11px; white-space: nowrap; }
.g-desc { -webkit-line-clamp: 2; font-size: 12px; }
.g-eff { font-size: 11px; }
.g-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.g-price { margin: 0; padding: 0; }
.g-btns { justify-content: stretch; }
.g-btns .btn.primary { max-width: none; }
.g-btns .btn.primary .num { opacity: .85; font-weight: 500; }
@media (max-width: 560px) {
  .goods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .goods { padding: 9px 8px; }
  .g-desc { display: none; }
  .g-tags .gtag:not(.only) { display: none; }
  .goods .g-ico { width: 26px; height: 26px; } .goods .g-ico .ico { width: 14px; height: 14px; }
}

/* 아이콘은 가게가 아니라 물건 종류마다 같은 모양·색 */
.ti-pet { --tc: #a0662f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ti-pet { --tc: #e0a46a; } }
:root[data-theme="dark"] .ti-pet { --tc: #e0a46a; }
/* 가게 목록: 이름만 */
.shop-names { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.sn { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); padding: 2px 8px 2px 3px; border-radius: 999px; background: var(--sheet); }
.sn .iti { width: 18px; height: 18px; border-radius: 6px; margin: 0; }
.sn .iti .ico { width: 11px; height: 11px; }
.sn.only { color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc, var(--accent)) 55%, transparent); }
.sn-dot { display: inline-block; width: 12px; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc, var(--accent)) 55%, transparent); vertical-align: -1px; }

/* 부엉이 통신 주문: 가게들과 다른 '편지 봉투' 느낌으로 아래에 따로 */
.owl-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 4px; color: var(--ink-3, var(--ink-2)); font-size: 13px; }
.owl-divider::before, .owl-divider::after { content: ""; flex: 1; border-top: 1.5px dashed var(--rule); }
.owl-divider span { display: inline-flex; align-items: center; gap: 6px; }
.owl-divider .ico { width: 14px; height: 14px; }
.owl-sec { position: relative; overflow: hidden; background: var(--sheet); border-radius: 14px; padding: 26px 18px 18px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc) 22%, transparent); }
.owl-sec::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px;
  background: repeating-linear-gradient(-45deg, #c8463d 0 12px, transparent 12px 20px, var(--sc) 20px 32px, transparent 32px 40px); }
.owl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.owl-head h3 { margin: 2px 0 2px; font-family: 'Gowun Batang', serif; font-size: 20px; color: color-mix(in srgb, var(--sc) 80%, var(--ink)); }
.owl-head .eyebrow { color: var(--sc); }
.owl-stamp { flex: none; display: grid; place-items: center; text-align: center; width: 62px; height: 62px; border-radius: 50%; line-height: 1.1;
  border: 2px dashed color-mix(in srgb, var(--sc) 60%, transparent); color: var(--sc); font-weight: 700; font-size: 14.5px; transform: rotate(-8deg); }
.owl-stamp small { font-weight: 500; font-size: 11px; }
.owl-sec .notice-bar { background: color-mix(in srgb, var(--sc) 6%, var(--sheet-2)); }
.owl-sec .goods { background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 28%, transparent); border-radius: 10px; }
.owl-sec .goods { background-image: linear-gradient(color-mix(in srgb, var(--sc) 5%, transparent), transparent 40px); }
@media (max-width: 560px) { .owl-sec { padding: 22px 10px 12px; } .owl-stamp { width: 52px; height: 52px; font-size: 12px; } .owl-head h3 { font-size: 18px; } }

/* 가방: 가로로 길게 늘어진 줄 대신 좁은 카드 */
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; }
.bag-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; border-radius: 13px; background: var(--sheet); min-width: 0; }
.bc-top { display: flex; gap: 8px; align-items: center; min-width: 0; }
.bc-top .iti { width: 30px; height: 30px; border-radius: 9px; margin: 0; }
.bc-top .iti .ico { width: 16px; height: 16px; }
.bc-head { display: grid; min-width: 0; line-height: 1.25; }
.bc-head b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-desc { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-btns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.bc-btns:empty { display: none; }
.bc-btns .btn { flex: 1 1 auto; justify-content: center; }
.bc-btns .small { font-size: 12px; }
.bag-grid > .empty { grid-column: 1 / -1; }
@media (max-width: 560px) { .bag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .bag-card { padding: 9px 8px; } }
.bc-btns .btn.quiet { background: var(--sheet-2); }

/* 설명은 자르지 않고, 모든 칸은 같은 크기로 */
.goods-grid, .bag-grid { grid-auto-rows: 1fr; }
.g-desc, .bc-desc { display: block !important; -webkit-line-clamp: unset; overflow: visible; }
.g-name, .bc-head b { white-space: normal; overflow: visible; text-overflow: clip; }
.goods .g-row { margin-top: auto; }
.bc-btns { margin-top: auto; }
/* 가방도 상점과 같은 카드 */
.bag-sec .g-btns { margin-top: auto; }
.bag-sec .g-row + .g-btns { margin-top: 0; }
.bag-sec .g-btns .btn { flex: 1; justify-content: center; }
.bag-sec .g-btns .btn:not(.primary) { background: var(--sheet-2); }
/* 개수·합계가 헷갈리지 않게 */
.g-unit { font-size: 11px; color: var(--ink-3, var(--ink-2)); margin-right: 1px; }
.g-btns .btn { gap: 4px; flex-wrap: wrap; line-height: 1.25; }
.g-btns .btn b { font-weight: 700; }
.g-total { font-weight: 500; opacity: .85; font-size: 12px; }
.bag-sec .g-desc { flex: 1; }
.bag-sec .goods .g-row, .bag-sec .g-btns { margin-top: 0; }
.g-sellrow { padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--sc) 25%, var(--rule)); }
.g-sell .btn { flex: 1 1 0; }
.g-total { color: inherit; }
.g-btns:not(.g-sell) .g-total::before { content: "· "; }
.g-sell .btn { flex-direction: column; gap: 0; padding-top: 4px; padding-bottom: 4px; }
.g-sell .g-total { font-size: 11px; }
.g-unit { white-space: nowrap; }
/* 깔끔하게: 버튼은 말만, 숫자는 가격 줄에 한 번 */
.bag-sec .goods .g-row { margin-top: auto; }
.bag-sec .g-desc { flex: 0 1 auto; }
.bag-sec .goods > .g-btns:only-of-type { margin-top: auto; }
.bag-sec .goods .g-row ~ .g-btns { margin-top: 0; }
.g-btns .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; padding-left: 4px; padding-right: 4px; }
.g-btns .g-gift { flex: 0 0 auto; }
.bag-sec .g-btns .btn:not(.primary) { background: var(--sheet-2); border-color: transparent; }
.g-sum { margin-left: 5px; font-size: 11px; color: var(--ink-3, var(--ink-2)); white-space: nowrap; }
.g-sum .num { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.g-sum.one { visibility: hidden; }

/* 부엉이 우편: 편지 쓰기 칸은 제자리, 편지함은 오른쪽에서 따로 스크롤 */
.post-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: start; }
.post-compose { position: sticky; top: 112px; }
.post-compose textarea { resize: vertical; min-height: 150px; }
.post-box { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.post-tabs { padding: 12px 14px; border-bottom: 1px solid var(--rule); background: var(--sheet-2); margin: 0; }
.post-box #post-list, .post-box > .list, .post-box > div:not(.post-tabs):not(.post-tools) { max-height: calc(100vh - 250px); min-height: 220px; overflow-y: auto; }
.post-box #post-list { display: block; gap: 0; }
.post-box .letter { border: 0 !important; border-radius: 0; box-shadow: none; background: transparent; padding: 12px 16px; border-bottom: 1px solid var(--rule) !important; position: relative; }
.post-box .letter:last-child { border-bottom: 0 !important; }
.post-box .letter:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.post-box .letter.unread::before { content: ""; position: absolute; left: 6px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.post-box .letter .x { background: var(--sheet-2); border-radius: 10px; padding: 10px 12px; margin-top: 4px; line-height: 1.6; }
.post-box .letter .small.muted { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-box .empty { display: block; padding: 28px 16px; text-align: center; }
@media (max-width: 860px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .post-compose { position: static; }
  .post-box #post-list, .post-box > div:not(.post-tabs):not(.post-tools) { max-height: none; min-height: 0; }
}
.post-box .letter.unread::before { display: none; } .post-box .letter.unread { background: color-mix(in srgb, var(--accent) 5%, transparent); }
/* 편지 쓰기 칸 안의 입력이 밖으로 삐져나오지 않게 */
.post-compose > *, .post-compose .field { min-width: 0; }
.post-compose input, .post-compose select, .post-compose textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.pc-pick { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; gap: 6px; align-items: stretch; }
.pc-pick select { min-width: 0; text-overflow: ellipsis; }
.pc-pick .btn { white-space: nowrap; }
.pc-two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 10px; }
.pc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pc-foot .small { flex: 1; min-width: 0; line-height: 1.5; }
.pc-foot .btn { flex: none; }
.post-compose .tags .tag { display: inline-flex; align-items: center; gap: 4px; }
.post-compose .tags .iti { width: 18px; height: 18px; margin: 0; border-radius: 6px; } .post-compose .tags .iti .ico { width: 11px; height: 11px; }
@media (max-width: 560px) { .pc-two { grid-template-columns: minmax(0, 1fr); } .pc-foot { flex-direction: column; align-items: stretch; } }
/* 접속 중 이름: 기숙사 색 */
.hn-gryffindor { --hc: #b8322f; } .hn-hufflepuff { --hc: #a87a10; } .hn-ravenclaw { --hc: #3a63b0; } .hn-slytherin { --hc: #2b7d4f; }
.hn[class*="hn-"]:not(.hn-) { color: var(--hc); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hn-gryffindor { --hc: #ec7a72; } :root:not([data-theme="light"]) .hn-hufflepuff { --hc: #e8c058; } :root:not([data-theme="light"]) .hn-ravenclaw { --hc: #86a6ea; } :root:not([data-theme="light"]) .hn-slytherin { --hc: #6cc796; } }
:root[data-theme="dark"] .hn-gryffindor { --hc: #ec7a72; } :root[data-theme="dark"] .hn-hufflepuff { --hc: #e8c058; } :root[data-theme="dark"] .hn-ravenclaw { --hc: #86a6ea; } :root[data-theme="dark"] .hn-slytherin { --hc: #6cc796; }

/* ===== 한 번 더 정리 ===== */
.toggle input { flex: none; }
.toggle { line-height: 1.45; }
.inc-spawn-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; }
@media (max-width: 640px) { .inc-spawn-row { grid-template-columns: 1fr 1fr; } .inc-spawn-row select:first-child { grid-column: 1 / -1; } }
.gear-fix.full { padding-top: 2px; }
@media (max-width: 560px) { .roster-t th:nth-child(4), .roster-t td:nth-child(4) { display: none; } }

/* ===== 누를 수 있는 것은 모두 버튼 모양으로 =====
   진한 색 칠 = 주 행동 / 테두리 = 보통 / 옅은 색 칠 = 가벼운 이동·보조 / 빨간 글씨 = 지우기 */
.btn { border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
.btn.quiet { background: color-mix(in srgb, var(--accent) 9%, transparent); border-color: transparent; color: color-mix(in srgb, var(--accent) 85%, var(--ink)); }
.btn.quiet:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: transparent; }
.btn.danger { color: var(--bad); }
.btn.quiet.danger { background: color-mix(in srgb, var(--bad) 8%, transparent); color: var(--bad); }
.btn.quiet.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 15%, transparent); }
.bag-sec .g-btns .btn:not(.primary), .bc-btns .btn.quiet { background: var(--sheet); }
/* 문장 안의 링크는 글자 링크 하나로 통일 */
a, .link { color: color-mix(in srgb, var(--accent) 85%, var(--ink)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); cursor: pointer; }
a:hover, .link:hover { text-decoration-color: currentColor; }
.temp-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chip { border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
.small .btn.sm, .muted .btn.sm { vertical-align: baseline; padding: 2px 8px; font-size: 12px; }
/* 조제·요리 카드 */
.rcp-need { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 12px; margin-top: auto; }
.rcp-need .ok { color: var(--ink-2); } .rcp-need .no { color: var(--ink-3, var(--ink-2)); opacity: .6; }
.rcp-need .ok b { color: var(--good, #2f8a57); }
.goods.rcp.locked { opacity: .55; }
.goods.rcp.ready { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.rcp-bar { margin: 2px 0 2px; }
.elf-snack { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, var(--sheet-2)); font-size: 13px; }
.elf-snack .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* ===== 화면마다 그 메뉴 묶음의 색으로 (오늘은 기숙사 색 그대로) ===== */
/* 제목 앞 아이콘도 그 색으로 */
.view[class*="pg-"]:not(.pg-home) .hico { background: color-mix(in srgb, var(--gc) 13%, transparent); color: var(--gc); }

/* ===== 눌러서 들어가는 칸은 옅은 테두리 ===== */
.inc-card, .today-pts, .place-btn, .inc-slot.open, .inc-opt, .pick, .spell, .rock-btn, .rps-cell, .person, .ochip {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, var(--rule)) !important; transition: box-shadow .15s, background .15s; }
.inc-card:hover, .today-pts:hover, .place-btn:hover, .inc-slot.open:hover, .inc-opt:hover, .pick:hover, .spell:hover:not(:disabled), .rock-btn:hover, .rps-cell:hover, .person:hover, .ochip:hover {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent) !important; }
.inc-opt.on, .pick.on { box-shadow: inset 0 0 0 2px var(--accent) !important; }

/* ===== 가방: 상점 카드와 똑같이 ===== */
.bag-sec { background: color-mix(in srgb, var(--sc) 7%, var(--sheet)); }
.bag-sec .goods .g-desc { flex: 1 1 auto; }
.bag-sec .goods .g-row, .bag-sec .goods .g-btns { margin-top: 0; }
.g-note { font-size: 12px; color: var(--ink-3, var(--ink-2)); padding: 5px 0 2px; border-top: 1px dashed color-mix(in srgb, var(--ink) 12%, transparent); }
.owl-sec { margin-top: 18px; }


/* ===== 테마 색: 학생이 고른 포인트 컬러 (기숙사 색 대신) ===== */
.shell.themed { --accent: var(--theme, #6b7280); --accent-soft: color-mix(in srgb, var(--theme, #6b7280) 11%, transparent); --on-accent: #fff;
  --btn-bg: color-mix(in srgb, var(--theme, #6b7280) 38%, #4f545e); --btn-on: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shell.themed { --accent: color-mix(in srgb, var(--theme, #9aa1ad) 72%, #fff); --accent-soft: color-mix(in srgb, var(--theme, #9aa1ad) 16%, transparent); --on-accent: #15130f; --btn-bg: color-mix(in srgb, var(--theme, #9aa1ad) 40%, #c9ccd3); --btn-on: #15130f; } }
:root[data-theme="dark"] .shell.themed { --accent: color-mix(in srgb, var(--theme, #9aa1ad) 72%, #fff); --accent-soft: color-mix(in srgb, var(--theme, #9aa1ad) 16%, transparent); --on-accent: #15130f; --btn-bg: color-mix(in srgb, var(--theme, #9aa1ad) 40%, #c9ccd3); --btn-on: #15130f; }
/* 주 버튼은 차분한 회색 바탕(테마 색이 살짝 섞임) */
.shell.themed .btn.primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-on); }
.shell.themed .btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--btn-bg) 85%, var(--accent)); border-color: transparent; }
/* 가게 단락 안의 버튼은 가게 색 그대로 */
.shell.themed .shop-sec:not(.bag-sec) .btn.primary { background: var(--sc); border-color: var(--sc); color: #fff; }

/* ===== 이변: 게이지와 테두리를 그 단락(위험도) 색으로 ===== */
.inc-card { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc, var(--rule)) 32%, var(--rule)) !important; }
.inc-card:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dc, var(--accent)) 65%, transparent) !important; }
.inc-card .inc-prog i, .inc-head .inc-bar i, .inc-head .inc-prog i { background: linear-gradient(90deg, color-mix(in srgb, var(--dc, var(--accent)) 60%, transparent), var(--dc, var(--accent))); }
.inc-card .inc-prog, .inc-head .inc-bar { background: color-mix(in srgb, var(--dc, var(--rule)) 10%, var(--sheet-2)); box-shadow: none; }
.inc-card .inc-name { color: color-mix(in srgb, var(--dc, var(--ink)) 55%, var(--ink)); }

/* ===== 그림 지도: 성벽·잔디·호수·숲·마을 ===== */
:root { --mt-grass: #dfe2b4; --mt-forest: #b3bf8c; --mt-tree: #8fa36a; --mt-tree-l: #a9b97f; --mt-water: #bcd2cf; --mt-shore: #e6dbb4; --mt-stone: #e2d2a6; --mt-stone-2: #d6c393; --mt-village: #ead9ae; --mt-roof: #b06b4b; --mt-glass: #a9cbc6; --mt-pitch: #cfd99e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mt-grass: #2d3220; --mt-forest: #262e1b; --mt-tree: #3d4c2a; --mt-tree-l: #46552f; --mt-water: #1f3134; --mt-shore: #3a3424; --mt-stone: #3a3122; --mt-stone-2: #4a3e2a; --mt-village: #3a3122; --mt-roof: #8a4f36; --mt-glass: #3c5c58; --mt-pitch: #35401f; } }
:root[data-theme="dark"] { --mt-grass: #2d3220; --mt-forest: #262e1b; --mt-tree: #3d4c2a; --mt-tree-l: #46552f; --mt-water: #1f3134; --mt-shore: #3a3424; --mt-stone: #3a3122; --mt-stone-2: #4a3e2a; --mt-village: #3a3122; --mt-roof: #8a4f36; --mt-glass: #3c5c58; --mt-pitch: #35401f; }
.map-frame { fill: none; stroke: var(--map-faint); stroke-width: 1.4; opacity: .55; stroke-dasharray: 10 4 2 4; }
.terrain { pointer-events: none; }
.t-grass { fill: var(--mt-grass); stroke: color-mix(in srgb, var(--mt-tree) 60%, transparent); stroke-width: 1.2; }
.t-forest { fill: var(--mt-forest); stroke: var(--mt-tree); stroke-width: 1.4; }
.t-tree circle { fill: var(--mt-tree); stroke: color-mix(in srgb, var(--map-ink) 35%, transparent); stroke-width: .8; }
.t-tree.light circle { fill: var(--mt-tree-l); }
.t-shore { fill: var(--mt-shore); }
.t-water { fill: var(--mt-water); stroke: color-mix(in srgb, #3c6e74 55%, transparent); stroke-width: 1.4; }
.t-ripple { fill: none; stroke: color-mix(in srgb, #3c6e74 50%, transparent); stroke-width: 1.2; stroke-linecap: round; }
.t-pitch { fill: var(--mt-pitch); stroke: var(--map-faint); stroke-width: 1.2; }
.t-pitchline { fill: none; stroke: color-mix(in srgb, #fff 55%, transparent); stroke-width: 1.4; }
.t-hoops circle { fill: none; stroke: var(--map-ink); stroke-width: 1.3; opacity: .7; }
.t-village { fill: var(--mt-village); stroke: var(--map-faint); stroke-width: 1; stroke-dasharray: 3 4; }
.t-castle { fill: var(--mt-stone); stroke: var(--map-ink); stroke-width: 2.2; }
.t-merlon rect { fill: var(--mt-stone); stroke: var(--map-ink); stroke-width: 1.6; }
.t-turret { fill: var(--mt-stone-2); stroke: var(--map-ink); stroke-width: 2; }
.t-turret-in { fill: none; stroke: var(--map-ink); stroke-width: 1; opacity: .5; }
.t-floorline { stroke: var(--map-ink); stroke-width: 1.4; opacity: .45; stroke-dasharray: 14 3 2 3; }
.t-battle { fill: none; stroke: var(--map-ink); stroke-width: 5; stroke-dasharray: 5 4; opacity: .55; }
.t-roof { fill: var(--mt-roof); stroke: var(--map-ink); stroke-width: 1.2; stroke-linejoin: round; }
.t-roof.glass { fill: var(--mt-glass); }
.t-compass circle { fill: color-mix(in srgb, var(--map-paper) 70%, transparent); stroke: var(--map-faint); stroke-width: 1.2; }
.t-compass path { fill: var(--map-faint); } .t-compass path.n { fill: var(--map-ink); }
.t-compass text { fill: var(--map-ink); font: 700 11px var(--f-display); }
/* 구역 이름은 지도 글씨처럼 */
.sec-title { fill: var(--map-ink); opacity: .7; font: italic 700 14px var(--f-display); letter-spacing: .3em; paint-order: stroke; stroke: var(--map-paper); stroke-width: 4px; stroke-linejoin: round; }
.sec-grounds .sec-title, .sec-forest .sec-title, .sec-hogsmeade .sec-title { opacity: .8; }
.sec-forest .sec-title { fill: var(--map-paper); stroke: var(--mt-tree); }
/* 방: 성 안은 방, 바깥은 건물과 땅 */
.room-name { paint-order: stroke; stroke: color-mix(in srgb, var(--map-paper) 85%, transparent); stroke-width: 3.5px; stroke-linejoin: round; }
.room .shape { fill: color-mix(in srgb, var(--map-paper) 75%, var(--mt-stone)); stroke: color-mix(in srgb, var(--map-ink) 75%, transparent); stroke-width: 1.3; }
.room.rs-towers .shape { fill: var(--mt-stone-2); stroke-width: 1.8; }
.room.rs-forest .shape { fill: transparent; stroke: color-mix(in srgb, var(--map-paper) 70%, transparent); stroke-width: 1.4; stroke-dasharray: 6 5; }
.room.rs-forest .room-name { fill: var(--map-paper); stroke: color-mix(in srgb, var(--mt-tree) 90%, #000); }
.room.rm-black_lake .shape, .room.rm-pitch .shape { fill: transparent; stroke: transparent; }
.room.rm-black_lake .room-name { stroke: color-mix(in srgb, var(--mt-water) 90%, transparent); }
.room.rs-hogsmeade .shape, .room.rm-keeper_hut .shape { fill: color-mix(in srgb, var(--map-paper) 60%, var(--mt-village)); }
.room.rm-hogsmeade .shape { fill: color-mix(in srgb, var(--mt-village) 70%, var(--map-faint)); stroke-dasharray: 2 3; }
.room.rm-greenhouse .shape { fill: color-mix(in srgb, var(--mt-glass) 45%, var(--map-paper)); }
.room.rm-shrieking_shack .shape { fill: color-mix(in srgb, var(--map-ink) 12%, var(--mt-village)); }
.room:hover .shape, .room:focus-visible .shape { stroke: var(--map-ink); stroke-width: 2.4; }
.room.rm-black_lake:hover .shape, .room.rm-pitch:hover .shape { stroke: color-mix(in srgb, var(--map-ink) 60%, transparent); stroke-dasharray: 4 4; }
.room.here .shape { stroke: var(--accent) !important; stroke-width: 3 !important; stroke-dasharray: none !important; }
.room.sel .shape { fill: color-mix(in srgb, var(--accent) 16%, var(--map-paper-2)); }
.room.rs-forest.sel .shape, .room.rm-black_lake.sel .shape, .room.rm-pitch.sel .shape { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.route { stroke: color-mix(in srgb, var(--map-ink) 55%, transparent); stroke-width: 2.4; stroke-dasharray: 2 6; }
.mapwrap { background: var(--map-paper); box-shadow: inset 0 0 60px color-mix(in srgb, var(--map-faint) 35%, transparent); }
/* 장비 내구도: 보라색 (닳을수록 옅어짐) */
.dur.ok .fill { background: linear-gradient(90deg, #9b7ad8, #7a55c2); }
.dur.worn .fill { background: linear-gradient(90deg, #b9a2e3, #9b7ad8); }
.dur.bad .fill { background: linear-gradient(90deg, #d7c6f0, #b9a2e3); }
.dur.ok .dur-st { color: #7a55c2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dur.ok .fill { background: linear-gradient(90deg, #8f74c9, #b69cf0); } :root:not([data-theme="light"]) .dur.ok .dur-st { color: #b69cf0; } }
:root[data-theme="dark"] .dur.ok .fill { background: linear-gradient(90deg, #8f74c9, #b69cf0); } :root[data-theme="dark"] .dur.ok .dur-st { color: #b69cf0; }
.or-hid { margin-left: 4px; font-size: 10px; padding: 0 5px; border-radius: 999px; background: var(--sheet-2); color: var(--ink-3, var(--ink-2)); font-weight: 500; }
/* 프로필: 체력·마력·기력 */
.vitals { display: grid; gap: 5px; margin: 6px 0 2px; max-width: 420px; }
.vt { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; }
.vt-k { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }
.vt-k .ico { width: 13px; height: 13px; }
.vt-bar { height: 7px; border-radius: 4px; background: var(--sheet-2); overflow: hidden; }
.vt-bar i { display: block; height: 100%; border-radius: 4px; }
.vt.hp .vt-bar i { background: #3f8a5c; } .vt.mp .vt-bar i { background: #3f63b0; } .vt.st .vt-bar i { background: #b88a1f; }
.vt.hp .vt-k .ico { color: #3f8a5c; } .vt.mp .vt-k .ico { color: #3f63b0; } .vt.st .vt-k .ico { color: #b88a1f; }
.vt-v { font-size: 12px; min-width: 56px; text-align: right; }
/* 가방 팔기 버튼이 글자처럼 보이지 않게: 상점 카드의 버튼과 같은 상자 */
.bag-sec .goods .g-btns .btn:not(.primary) { background: var(--sheet-2) !important; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important; color: var(--ink); }
.bag-sec .goods .g-btns .btn:not(.primary):hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important; }

/* ===== 움직이는 꾸밈 그림 (취미·경매장·장소) ===== */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); align-items: stretch; border-radius: 18px; overflow: hidden; background: var(--sheet); min-height: 132px; }
.hero-txt { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 4px; position: relative; z-index: 1; }
.hero-txt h2 { font-size: 24px; margin: 0; }
.hero-txt p { margin: 0; line-height: 1.55; }
.hero-art { width: 100%; height: 100%; min-height: 132px; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
@media (max-width: 640px) { .hero { grid-template-columns: 1fr; } .hero-art { position: absolute; inset: 0; opacity: .32; -webkit-mask-image: none; mask-image: none; } .hero-txt { padding: 16px; } }
.scene.with-art { position: relative; }
.scene.with-art > .hero-art { position: absolute; right: 0; top: 0; width: min(46%, 380px); height: 100%; min-height: 0; z-index: 0; border-radius: 14px; opacity: .9; }
.scene.with-art > :not(.hero-art) { position: relative; z-index: 1; }
.scene.with-art .prose { max-width: 56%; }
@media (max-width: 760px) { .scene.with-art > .hero-art { width: 100%; opacity: .18; -webkit-mask-image: none; mask-image: none; } .scene.with-art .prose { max-width: none; } }
:root[data-theme="dark"] .hero-art { filter: brightness(.72) saturate(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-art { filter: brightness(.72) saturate(.9); } }

/* 그림 색 */
.ha-sky { fill: #dbe8ef; } .night .ha-sky { fill: #2b3150; }
.ha-sun { fill: #f2c45a; } .ha-moon { fill: #f3ecd0; }
.ha-stars circle { fill: #fff; animation: ha-twinkle 2.4s ease-in-out infinite; } .ha-stars circle:nth-child(2n) { animation-delay: -1.2s; }
.ha-cloud ellipse { fill: #fff; opacity: .9; } .ha-cloud { animation: ha-drift 16s ease-in-out infinite alternate; }
.ha-ground { fill: #c9d9a4; } .ha-wall { fill: #efe2c8; }
.ha-cook .ha-ground, .ha-auction .ha-ground { fill: #b98d5c; }
/* 원예 */
.ha-stem { fill: none; stroke: #4f8a3c; stroke-width: 3; stroke-linecap: round; } .ha-leaf { fill: #6ea851; }
.ha-bloom { fill: #e27aa0; } .ha-bloom-c { fill: #f5d36b; }
.ha-pot { fill: #c46a3c; } .ha-pot-rim { fill: #a8562e; }
.ha-can-body { fill: #6e8fb0; } .ha-can-h { stroke: #6e8fb0; stroke-width: 3; }
.ha-can { transform-origin: 211px 76px; animation: ha-tilt 3s ease-in-out infinite; }
.ha-drops circle { fill: #6fa8d8; animation: ha-drop 1.2s linear infinite; } .ha-drops circle:nth-child(2) { animation-delay: -.4s; } .ha-drops circle:nth-child(3) { animation-delay: -.8s; }
.ha-sway { animation: ha-sway 3.2s ease-in-out infinite alternate; }
.ha-fly path { fill: #c97ad6; } .ha-fly { animation: ha-flutter 7s ease-in-out infinite; }
/* 낚시 */
.ha-water { fill: #5b8fa8; } .night .ha-water { fill: #2a4a5e; }
.ha-waves path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.6; } .ha-waves { animation: ha-wave 4s linear infinite; }
.ha-line { stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1; }
.ha-bob circle { fill: #d9543f; } .ha-bob rect { fill: #fff; } .ha-bob { animation: ha-bob 2.2s ease-in-out infinite; }
.ha-jump path { fill: #e0a34a; } .ha-jump { animation: ha-jump 5s ease-in-out infinite; }
/* 요리 */
.ha-fire { fill: #f08a3a; transform-origin: 128px 100px; animation: ha-fire .5s ease-in-out infinite alternate; }
.ha-pot2 { fill: #4b4f58; } .ha-cook .ha-pot-rim { fill: #3a3d44; }
.ha-spoon rect, .ha-spoon ellipse { fill: #a0703f; } .ha-spoon { transform-origin: 140px 64px; animation: ha-stir 2.4s ease-in-out infinite alternate; }
.ha-steam path { fill: none; stroke: #c9b9a0; stroke-width: 3; stroke-linecap: round; animation: ha-steam 3s ease-out infinite; }
.ha-bubbles circle { fill: #8fb36a; animation: ha-bubble 1.6s ease-in infinite; }
.ha-shelf rect { fill: #8a6a44; } .ha-jar { fill: #c9a7d9; } .ha-jar.b { fill: #9cc7a4; } .ha-jar.c { fill: #e6b56a; }
/* 경매장 */
.ha-desk { fill: #8a5a36; } .ha-desk-top { fill: #6e4527; } .ha-block { fill: #5a3a22; }
.ha-gavel rect { fill: #6e4527; } .ha-gavel { transform-origin: 162px 60px; animation: ha-gavel 1.8s ease-in infinite; }
.ha-coin circle { fill: #e3b648; } .ha-coin .in, .ha-tag .in { fill: #c9962a; } .ha-coin { animation: ha-coin 1.4s ease-in-out infinite; }
.ha-spark path { fill: #f2c45a; transform-box: fill-box; transform-origin: center; animation: ha-spark 2.4s ease-in-out infinite; }
.ha-tag path { fill: #d9c39a; } .ha-tag { transform-origin: 28px 70px; animation: ha-sway 2.6s ease-in-out infinite alternate; }
/* 장소 */
.ha-hill { fill: #b8c98e; } .night .ha-hill { fill: #2f3b2c; }
.ha-castle rect { fill: #cfc2a6; } .night .ha-castle rect { fill: #4a4658; } .roof { fill: #6a5a8a; }
.ha-castle .win, .ha-hogsmeade .win { fill: #f5d36b; animation: ha-flicker 3s ease-in-out infinite; }
.ha-flag path { fill: #c0503a; } .ha-flag { animation: ha-flag 1.4s ease-in-out infinite alternate; }
.ha-tree circle { fill: #6c9a4e; } .ha-tree rect { fill: #7a5634; } .ha-sway2 { animation: ha-sway2 4s ease-in-out infinite alternate; }
.ha-hut { fill: #a0754a; } .ha-grounds .roof { fill: #7a4e33; }
.ha-smoke circle { fill: #e6e3dc; opacity: .8; animation: ha-smoke 3s ease-out infinite; }
.ha-forest .ha-sky { fill: #4c6350; } .ha-forest.night .ha-sky { fill: #1d2a24; } .ha-forest-floor { fill: #2a3a2a; }
.ha-pine path { fill: #2f4a33; } .ha-pine rect { fill: #4a3626; }
.ha-ffly circle { fill: #f5e27a; filter: drop-shadow(0 0 3px #f5e27a); animation: ha-ffly 3.4s ease-in-out infinite; }
.ha-snow { fill: #f2f4f7; } .ha-house { fill: #b98a5c; } .ha-hogsmeade .roof { fill: #7b4a3a; } .ha-snowcap { fill: #fff; } .ha-chim { fill: #6e4e3a; }
.ha-flakes circle { fill: #fff; animation: ha-flake 6s linear infinite; } .ha-flakes circle:nth-child(2n) { animation-duration: 8s; animation-delay: -3s; }
@keyframes ha-twinkle { 50% { opacity: .2; } }
@keyframes ha-drift { from { transform: translateX(-18px); } to { transform: translateX(22px); } }
@keyframes ha-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes ha-drop { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(-6px, 22px); opacity: 0; } }
@keyframes ha-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes ha-sway2 { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes ha-flutter { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(18px, -10px); } 50% { transform: translate(34px, 4px); } 75% { transform: translate(14px, 12px); } }
@keyframes ha-wave { from { transform: translateX(0); } to { transform: translateX(-40px); } }
@keyframes ha-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes ha-jump { 0%, 55% { transform: translate(190px, 92px) rotate(0); opacity: 0; } 60% { opacity: 1; transform: translate(190px, 86px) rotate(-30deg); } 72% { transform: translate(212px, 62px) rotate(0); } 84% { transform: translate(234px, 86px) rotate(35deg); opacity: 1; } 88%, 100% { transform: translate(236px, 96px) rotate(40deg); opacity: 0; } }
@keyframes ha-fire { from { transform: scaleY(.85); } to { transform: scaleY(1.12); } }
@keyframes ha-stir { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes ha-steam { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-18px); opacity: 0; } }
@keyframes ha-bubble { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-8px); opacity: 0; } }
@keyframes ha-gavel { 0%, 60%, 100% { transform: rotate(0); } 75% { transform: rotate(-28deg); } 85% { transform: rotate(4deg); } }
@keyframes ha-coin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ha-spark { 0%, 100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes ha-flicker { 0%, 100% { opacity: 1; } 45% { opacity: .7; } 50% { opacity: .95; } }
@keyframes ha-flag { from { transform: skewY(-6deg) scaleX(.9); } to { transform: skewY(6deg) scaleX(1.05); } }
@keyframes ha-smoke { from { transform: translateY(0) scale(.8); opacity: .8; } to { transform: translateY(-16px) scale(1.4); opacity: 0; } }
@keyframes ha-ffly { 0%, 100% { opacity: .2; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(6px, -6px); } }
@keyframes ha-flake { from { transform: translateY(-10px); } to { transform: translateY(124px); } }
@media (prefers-reduced-motion: reduce) { .hero-art * { animation: none !important; } }

/* 취미 탭 */
.hobby-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.htab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 9px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: var(--sheet); font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.htab .ico { width: 20px; height: 20px; padding: 5px; box-sizing: content-box; border-radius: 9px; background: color-mix(in srgb, var(--gc, var(--accent)) 12%, transparent); color: var(--gc, var(--accent)); }
.htab.on { border-color: var(--gc, var(--accent)); color: var(--ink); background: color-mix(in srgb, var(--gc, var(--accent)) 8%, var(--sheet)); }
.htab.on .ico { background: var(--gc, var(--accent)); color: #fff; }
.htab:hover .ico { animation: ha-coin .8s ease-in-out; }
.hobby-body { display: grid; gap: 14px; }
.hobby-body > .fish-panel, .hobby-body > .panel { width: 100%; }
.scene.with-art > .hero-art { top: 30px; height: calc(100% - 30px); }
@media (max-width: 760px) {
  .scene.with-art > .hero-art { position: static; width: 100%; height: 96px; opacity: 1; border-radius: 12px; -webkit-mask-image: none; mask-image: none; order: -1; }
}
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { position: static; order: -1; height: 104px; min-height: 0; opacity: 1; -webkit-mask-image: none; mask-image: none; }
}

/* ===== 지금 있는 곳: 위쪽 줄에서 눈에 띄게 ===== */
.where { display: flex !important; align-items: center; gap: 9px; max-width: 260px; padding: 5px 12px 5px 6px; border-radius: 14px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 10%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.where:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); }
.where-pin { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--accent); color: var(--on-accent, #fff); }
.where-pin .ico { width: 19px; height: 19px; animation: hp-bob 2.4s ease-in-out infinite; }
.where-txt { display: grid; min-width: 0; line-height: 1.2; }
.where-txt small { font-size: 11px; color: color-mix(in srgb, var(--accent) 75%, var(--ink)); letter-spacing: .04em; }
.where-txt b { font-family: var(--f-display); font-size: 18px; color: var(--ink); }
.where-txt > span { font-size: 12px; color: var(--ink-3, var(--ink-2)); }
.where-txt b, .where-txt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .where { max-width: 175px; padding: 4px 9px 4px 4px; gap: 7px; } .where-pin { width: 28px; height: 28px; border-radius: 9px; } .where-pin .ico { width: 16px; height: 16px; } .where-txt small { display: none; } .where-txt b { font-size: 14.5px; } }

/* ===== 지도: 내 위치 핀 ===== */
.room.here .shape { fill: color-mix(in srgb, var(--accent) 16%, var(--map-paper-2)) !important; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); }
.here-pin { pointer-events: none; }
.hp-body { fill: var(--accent); stroke: var(--map-paper); stroke-width: 2; }
.hp-dot { fill: var(--map-paper); }
.hp-pulse { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hp-pulse 1.8s ease-out infinite; }
.hp-bob { animation: hp-bob 1.8s ease-in-out infinite; }
.hp-label { font: 700 12px var(--f-body); fill: var(--accent); paint-order: stroke; stroke: var(--map-paper); stroke-width: 4px; stroke-linejoin: round; }
@keyframes hp-pulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@keyframes hp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .hp-pulse, .hp-bob, .where-pin .ico { animation: none; } }
.where-pin { color: #fff !important; } .where-pin .ico { stroke: #fff; stroke-width: 2.2; }
:root[data-theme="dark"] .where-pin { color: #15130f !important; } :root[data-theme="dark"] .where-pin .ico { stroke: #15130f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .where-pin { color: #15130f !important; } :root:not([data-theme="light"]) .where-pin .ico { stroke: #15130f; } }
.hp-label { font-size: 14.5px; }

/* ===== 지금 있는 곳: 상자 없이 '표지판' 글씨로 (오늘 버튼과 다르게) ===== */
.where { display: block !important; background: none !important; box-shadow: none !important; padding: 0 4px 0 0 !important; border-radius: 0; max-width: 300px; }
.where:hover .where-txt b { text-decoration-color: var(--accent); }
.where-txt { display: grid; gap: 1px; }
.where-txt small { display: flex !important; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3, var(--ink-2)); letter-spacing: 0; }
.where-txt small .ico { width: 13px; height: 13px; color: var(--accent); stroke: var(--accent); flex: none; animation: hp-bob 2.4s ease-in-out infinite; }
.where-txt small > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.where-txt b { font-family: var(--f-display); font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
  text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); }
@media (max-width: 700px) { .where { max-width: 170px; } .where-txt b { font-size: 18px; } .where-txt small { display: flex !important; } }
/* 위쪽 줄 시간 칩 (통금·식사 시간일 때만) */
.tchip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tchip.curfew { background: color-mix(in srgb, #4a4f8a 14%, var(--sheet)); color: #4a4f8a; }
.tchip.meal { background: color-mix(in srgb, #b8862a 16%, var(--sheet)); color: #8a6418; }
:root[data-theme="dark"] .tchip.curfew { color: #a9aef0; } :root[data-theme="dark"] .tchip.meal { color: #e8c06a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tchip.curfew { color: #a9aef0; } :root:not([data-theme="light"]) .tchip.meal { color: #e8c06a; } }

/* ===== 오늘의 사건: 눈에 띄는 금빛 카드 ===== */
.event.daily-ev { position: relative; border: 0 !important; border-radius: 16px; padding: 18px 20px 18px 64px; overflow: hidden;
  background: linear-gradient(120deg, #fbefd2, #f6dfae 60%, #f3d39a); box-shadow: inset 0 0 0 1.5px #e0b660, 0 6px 18px -10px #b8862a; }
.event.daily-ev h3 { display: grid; gap: 2px; color: #5a3d0c; }
.event.daily-ev h3 small { font-size: 12px; letter-spacing: .14em; color: #a2700f; font-weight: 700; }
.event.daily-ev .prose { color: #4a3510; }
.event.daily-ev .faint { color: #8a6418; opacity: 1; }
.event.daily-ev .btn { background: #fffaf0; border-color: #e0b660; color: #5a3d0c; }
.event.daily-ev .btn:hover:not(:disabled) { background: #fff; border-color: #b8862a; }
.dev-badge { position: absolute; left: 16px; top: 18px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #c9962a; color: #fff; box-shadow: 0 0 0 5px rgba(201,150,42,.18); animation: dev-glow 2.2s ease-in-out infinite; }
.dev-badge .ico { width: 18px; height: 18px; stroke: #fff; }
.event.daily-ev::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%); transform: translateX(-100%); animation: dev-shine 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes dev-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(201,150,42,.18); } 50% { box-shadow: 0 0 0 9px rgba(201,150,42,.08); } }
@keyframes dev-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
:root[data-theme="dark"] .event.daily-ev { background: linear-gradient(120deg, #3a2e17, #4a3816 60%, #55401a); box-shadow: inset 0 0 0 1.5px #8a6a2a; }
:root[data-theme="dark"] .event.daily-ev h3, :root[data-theme="dark"] .event.daily-ev .prose { color: #f3e2b8; } :root[data-theme="dark"] .event.daily-ev .btn { background: #2b2414; color: #f3e2b8; border-color: #8a6a2a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .event.daily-ev { background: linear-gradient(120deg, #3a2e17, #4a3816 60%, #55401a); box-shadow: inset 0 0 0 1.5px #8a6a2a; } :root:not([data-theme="light"]) .event.daily-ev h3, :root:not([data-theme="light"]) .event.daily-ev .prose { color: #f3e2b8; } :root:not([data-theme="light"]) .event.daily-ev .btn { background: #2b2414; color: #f3e2b8; border-color: #8a6a2a; } }
@media (max-width: 560px) { .event.daily-ev { padding: 16px 14px 14px 14px; } .dev-badge { position: static; margin-bottom: 6px; } }
@media (prefers-reduced-motion: reduce) { .event.daily-ev::after, .dev-badge { animation: none; } }

/* ===== 장소별 그림 ===== */
.pa-wall { fill: #efe3c8; } .pa-wall.dk { fill: #3d3a42; } .pa-wall.pink { fill: #f7dbe4; }
.pa-floor { fill: #b98d5c; } .pa-floor.dk { fill: #2a2830; }
.pa-ceil { fill: #2e3560; }
.pa-wood { fill: #8a5a36; } .pa-wood2 { fill: #6e4527; }
.pa-plate { fill: #f4efe4; }
.pa-candle rect { fill: #f3ead6; } .pa-flame, .pa-fire { fill: #f2a43a; } .pa-fire { animation: ha-fire .45s ease-in-out infinite alternate; }
.pa-candle .pa-flame { transform-box: fill-box; transform-origin: bottom; animation: ha-fire .5s ease-in-out infinite alternate; }
.pa-float { animation: ha-bob 3s ease-in-out infinite; }
.pa-book.b0 { fill: #a3302c; } .pa-book.b1 { fill: #2d55a3; } .pa-book.b2 { fill: #2b7d4f; } .pa-book.b3 { fill: #c99a1f; }
.pa-jar.b0 { fill: #b58ad8; } .pa-jar.b1 { fill: #8fd17a; } .pa-jar.b2 { fill: #e6b56a; } .pa-jar.b3 { fill: #7ac0d8; }
.pa-flybook .pa-page { fill: #fffaf0; stroke: #8a6a44; stroke-width: .8; } .pa-flybook { animation: pa-flybook 6s ease-in-out infinite; }
@keyframes pa-flybook { 0%, 100% { transform: translate(130px, 30px); } 50% { transform: translate(130px, 20px) rotate(-6deg); } }
.pa-win { fill: #bcd6ea; stroke: #8a6a44; stroke-width: 3; } .night .pa-win { fill: #2b3150; }
.pa-bed { fill: #f4efe4; stroke: #c9b9a0; } .pa-pillow { fill: #fff; stroke: #c9b9a0; }
.pa-bottle { fill: rgba(200,230,240,.7); stroke: #6a8fa0; stroke-width: 1.2; } .pa-liquid { fill: #e27aa0; opacity: .8; }
.pa-bob { animation: ha-bob 2.4s ease-in-out infinite; }
.pa-spark { fill: #f2c45a; transform-box: fill-box; transform-origin: center; animation: ha-spark 2.4s ease-in-out infinite; }
.pa-board { fill: #2f4a3a; stroke: #8a5a36; stroke-width: 4; } .pa-chalk { fill: none; stroke: #e8efe6; stroke-width: 1.6; opacity: .8; }
.pa-feather path { fill: #fff; stroke: #9a8a70; stroke-width: .8; } .pa-feather { animation: pa-feather 4s ease-in-out infinite; }
@keyframes pa-feather { 0%, 100% { transform: translate(110px, 78px) rotate(-6deg); } 50% { transform: translate(122px, 60px) rotate(8deg); } }
.pa-cup { fill: #f4efe4; stroke: #8a6a44; stroke-width: 1.4; } .pa-mouse { fill: #9a8f86; } .pa-dark { fill: #2a2622; }
.pa-morph { animation: pa-morph 4s ease-in-out infinite; } .pa-morph2 { animation: pa-morph 4s ease-in-out infinite reverse; }
@keyframes pa-morph { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
.pa-sack { fill: #c9a676; stroke: #8a6a44; } .pa-dummy { animation: ha-sway 1.4s ease-in-out infinite alternate; }
.pa-bolt path { fill: none; stroke: #f2c45a; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 80; animation: pa-bolt 1.8s linear infinite; }
@keyframes pa-bolt { from { stroke-dashoffset: 80; opacity: 1; } 70% { opacity: 1; } to { stroke-dashoffset: -80; opacity: 0; } }
.pa-shield { fill: none; stroke: #8ab8f0; stroke-width: 2.5; opacity: .5; animation: ha-twinkle 1.8s ease-in-out infinite; }
.pa-cauldron { fill: #3a3d44; }
.pa-arch { fill: none; stroke: #59545e; stroke-width: 6; }
.pa-door { fill: #5a3a22; stroke: #3a2414; stroke-width: 3; } .pa-knob { fill: #e3b648; }
.pa-door.shimmer { animation: pa-shimmer 3s ease-in-out infinite; } @keyframes pa-shimmer { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.pa-shadow path { fill: rgba(0,0,0,.55); } .pa-shadow { animation: ha-sway2 3s ease-in-out infinite alternate; transform-origin: 80px 102px; }
.pa-eyes circle { fill: #f2c45a; animation: ha-twinkle 3s ease-in-out infinite; }
.pa-step { fill: #c9b9a0; stroke: #8a6a44; } .pa-stair { animation: pa-stair 4s ease-in-out infinite; } @keyframes pa-stair { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
.pa-frame rect { fill: #e8dcc0; stroke: #b8862a; stroke-width: 3; } .pa-face { fill: #d9b48a; animation: ha-bob 2.6s ease-in-out infinite; }
.pa-stone { fill: #b8ad9a; } .pa-stone2 { fill: #9a8e7a; } .pa-fire.big { fill: #f08a3a; }
.pa-chair { stroke: rgba(0,0,0,.25); stroke-width: 1; } .pa-banner { opacity: .9; } .pa-banner { animation: ha-flag 2s ease-in-out infinite alternate; transform-origin: 115px 12px; }
.pa-glass { fill: rgba(255,255,255,.55); stroke: #d48aa8; stroke-width: 1.4; } .pa-lid { fill: #d48aa8; }
.pa-sweet.s0 { fill: #e85a8a; } .pa-sweet.s1 { fill: #f2c45a; } .pa-sweet.s2 { fill: #7ac0d8; } .pa-sweet.s3 { fill: #8fd17a; }
.pa-jarw { animation: ha-coin 2s ease-in-out infinite; }
.pa-rocket .r { fill: #e85a3a; } .pa-rocket .r2 { fill: #f2c45a; } .pa-rocket { animation: pa-rocket 3s ease-in infinite; }
@keyframes pa-rocket { 0% { transform: translate(100px, 92px); opacity: 1; } 60% { transform: translate(140px, 20px); opacity: 1; } 61%, 100% { opacity: 0; transform: translate(140px, 20px); } }
.pa-burst line { stroke-width: 2.4; stroke-linecap: round; } .pa-burst .c0 { stroke: #e85a8a; } .pa-burst .c1 { stroke: #f2c45a; } .pa-burst .c2 { stroke: #7ac0d8; }
.pa-burst { animation: pa-burst 2.1s ease-out infinite; } @keyframes pa-burst { 0% { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
.pa-box rect { fill: #8a63c9; } .pa-box .spring { fill: #f2c45a; animation: ha-coin .9s ease-in-out infinite; }
.pa-mug .mug { fill: #c98a3a; } .pa-mug .mug-h { fill: none; stroke: #c98a3a; stroke-width: 4; } .pa-mug .foam { fill: #fff6e0; } .pa-mug { animation: ha-coin 2.2s ease-in-out infinite; }
.pa-paper { fill: #fffaf0; stroke: #c9b9a0; } .pa-ink { fill: none; stroke: #2a2650; stroke-width: 1.4; stroke-dasharray: 80; animation: pa-write 3s linear infinite; }
@keyframes pa-write { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
.pa-quill .feather { fill: #fff; stroke: #9a8a70; } .pa-quill .nib { stroke: #2a2650; stroke-width: 2; } .pa-quill { animation: pa-quill 3s linear infinite; }
@keyframes pa-quill { 0% { transform: translate(92px, 70px); } 25% { transform: translate(110px, 66px); } 50% { transform: translate(128px, 72px); } 75% { transform: translate(146px, 66px); } 100% { transform: translate(150px, 70px); } }
.pa-inkpot { fill: #2a2650; }
.pa-spin .ring { fill: none; stroke: #b8862a; stroke-width: 2.5; } .pa-spin .ring.b { stroke: #7a8ab0; } .pa-spin .dot { fill: #e85a3a; } .pa-spin { animation: pa-spin 4s linear infinite; }
@keyframes pa-spin { to { transform: rotate(360deg); } }
.pa-scope .metal { fill: none; stroke: #8a8f9c; stroke-width: 3; } .pa-scope .metal2 { fill: #b8862a; }
.pa-sneak .top { fill: #8a63c9; } .pa-sneak { animation: pa-spin 1.2s linear infinite; }
.pa-goat .goat { fill: #c9b9a0; stroke: #6e5a40; } .pa-goat .horn { fill: none; stroke: #6e5a40; stroke-width: 2; } .pa-goat { animation: ha-bob 3s ease-in-out infinite; }
.pa-cobweb { fill: none; } .pa-web { stroke: rgba(255,255,255,.35); stroke-width: .8; fill: none; }
.pa-shack { fill: #7a5a3e; stroke: #3a2a1c; stroke-width: 1.4; } .pa-shack-roof { fill: none; stroke: #3a2a1c; stroke-width: 4; stroke-linecap: round; }
.pa-board-up { fill: #a88a62; } .pa-creak { animation: ha-sway2 2.4s ease-in-out infinite alternate; }
.pa-fence { stroke: #5a4430; stroke-width: 2; fill: none; }
.pa-metal { fill: #b8862a; } .pa-metal2 { fill: none; stroke: #8a8f9c; stroke-width: 3; }
.pa-scope-t { animation: ha-sway2 4s ease-in-out infinite alternate; }
.pa-shoot { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 40; animation: pa-bolt 3.5s linear infinite; }
.pa-owl .body { fill: #a07a52; } .pa-owl .eye { fill: #f5e6b8; } .pa-owl .ear { stroke: #a07a52; stroke-width: 2.5; } .pa-owl { animation: pa-owl 3s ease-in-out infinite; }
@keyframes pa-owl { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-12deg); } }
.pa-flyowl .wing { fill: #8a6a44; } .pa-flyowl { animation: pa-flyowl 7s linear infinite; }
@keyframes pa-flyowl { from { transform: translate(-20px, 30px); } to { transform: translate(280px, 10px); } }
.pa-pole { fill: #c9b9a0; } .pa-hoop { fill: none; stroke: #c9b9a0; stroke-width: 3; }
.pa-broom .stick { stroke: #8a5a36; stroke-width: 3; } .pa-broom .bristle { fill: #c9a676; } .pa-broom .rider { fill: #a3302c; }
.pa-broom { animation: pa-broom 6s ease-in-out infinite; } @keyframes pa-broom { 0% { transform: translate(-40px, 50px); } 50% { transform: translate(130px, 30px); } 100% { transform: translate(300px, 46px); } }
.pa-snitch circle { fill: #f2c45a; } .pa-snitch .wing { fill: none; stroke: #fff; stroke-width: 1.4; } .pa-snitch { animation: pa-snitch 5s ease-in-out infinite; }
@keyframes pa-snitch { 0% { transform: translate(200px, 30px); } 25% { transform: translate(150px, 60px); } 50% { transform: translate(90px, 24px); } 75% { transform: translate(170px, 16px); } 100% { transform: translate(200px, 30px); } }
.pa-cauldron { fill: #1c1d22; stroke: #6a6e7a; stroke-width: 1.5; }
.pa-potions_room .ha-fire { fill: #f08a3a; }
.pa-deep .ha-sky { fill: #18221d; } .pa-deep .ha-pine path { fill: #22362a; } .pa-deep .ha-forest-floor { fill: #141c16; } .pa-deep .ha-moon { fill: #cfd6c8; opacity: .7; }
.pa-deep .pa-eyes circle { fill: #f2d45a; filter: drop-shadow(0 0 3px #f2d45a); }
/* 지난 이변: 작은 카드 */
.inc-grid.past { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 8px; }
.inc-grid.past .inc-card { padding: 10px 12px 10px 14px; gap: 4px; border-radius: 12px; }
.inc-grid.past .inc-card .inc-now, .inc-grid.past .inc-card > .small.muted { display: none; }
.inc-grid.past .inc-card .inc-name { font-size: 14.5px; }
.inc-grid.past .inc-card .inc-prog { height: 4px; }
.inc-grid.past .inc-card .row.between.small { font-size: 12px; }
.inc-grid.past .inc-card .tag, .inc-grid.past .inc-card .pill { font-size: 11px; }

/* ===== 지금 하는 중: 위쪽 줄 아래 띠 ===== */
.act-band { --ab: #3f6fc4; order: 20; flex: 1 1 100%; position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 14px 12px; border: 0; border-radius: 12px; text-align: left; cursor: pointer; overflow: hidden;
  background: color-mix(in srgb, var(--ab) 13%, var(--sheet)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ab) 40%, transparent); color: var(--ink); }
.act-band:hover { box-shadow: inset 0 0 0 2px var(--ab); }
.ab-walk { --ab: #3f6fc4; } .ab-explore { --ab: #c07a1a; } .ab-mine { --ab: #8a5a36; } .ab-fish { --ab: #2f9aa3; } .ab-hurt { --ab: #c4523f; } .ab-detention { --ab: #6b7280; }
.ab-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ab); color: #fff; }
.ab-ico .ico { width: 18px; height: 18px; stroke: #fff; }
.ab-walk .ab-ico .ico { animation: ab-walk .7s ease-in-out infinite alternate; }
.ab-explore .ab-ico .ico { animation: pa-spin 3s linear infinite; }
.ab-mine .ab-ico .ico { transform-origin: 70% 80%; animation: ab-dig .8s ease-in-out infinite; }
.ab-fish .ab-ico .ico { animation: hp-bob 1.6s ease-in-out infinite; }
.ab-hurt .ab-ico, .ab-explore.done .ab-ico { animation: dev-glow 1.6s ease-in-out infinite; }
.ab-detention .ab-ico .ico { animation: ab-walk 1s ease-in-out infinite alternate; }
.ab-txt { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.ab-txt b { font-size: 14.5px; color: color-mix(in srgb, var(--ab) 75%, var(--ink)); }
.ab-txt span { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-left { display: grid; justify-items: end; line-height: 1.1; flex: none; }
.ab-left .num { font-size: 18px; font-weight: 700; color: color-mix(in srgb, var(--ab) 80%, var(--ink)); }
.ab-left small { font-size: 11px; color: var(--ink-3, var(--ink-2)); }
.ab-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: color-mix(in srgb, var(--ab) 15%, transparent); }
.ab-bar i { display: block; height: 100%; background: var(--ab); transition: width 1s linear; }
.ab-bar i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: ab-shine 1.8s linear infinite; }
@keyframes ab-walk { from { transform: translateX(-2px) rotate(-6deg); } to { transform: translateX(2px) rotate(6deg); } }
@keyframes ab-dig { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-28deg); } }
@keyframes ab-shine { from { left: -30px; } to { left: 100%; } }
@media (max-width: 700px) { .act-band { padding: 7px 10px 10px; gap: 9px; } .ab-ico { width: 30px; height: 30px; } .ab-txt b { font-size: 14.5px; } .ab-left .num { font-size: 14.5px; } }
@media (prefers-reduced-motion: reduce) { .act-band * { animation: none !important; } }
/* 대화 이름표 */
.mbadge { display: inline-flex; align-items: center; gap: 1px; margin-right: 4px; vertical-align: -2px; color: var(--hc); }
.mbadge .ico { width: 15px; height: 15px; fill: var(--hc); stroke: var(--hc); }
.mbadge b { font-size: 11px; font-weight: 700; color: var(--hc); font-family: var(--f-mono); }
.chat-online { height: 32px; }
/* 주머니 팝업 */
.purse { cursor: pointer; font: inherit; color: inherit; }
.purse-pop .pp-big { display: flex; align-items: center; gap: 8px; font-size: 24px; padding: 6px 0; }
.purse-pop .pp-big .coin { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg, #f2d27a, #c9a227); color: #6b4f0a; }
.purse-pop .pp-big span:last-child { font-size: 14.5px; color: var(--ink-2); }
.pp-links { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-links .btn .ico { width: 14px; height: 14px; }
/* 오늘: 기숙사 점수는 작은 방패 네 개로 */
.today-pts:has(.mini2) { padding: 6px 10px !important; background: var(--sheet); border-radius: 12px; }
.glasses.mini2 { display: flex; gap: 10px; align-items: center; }
.glasses.mini2 .hs { display: inline-flex; align-items: center; gap: 3px; }
.glasses.mini2 .hs .ico { width: 18px; height: 18px; fill: color-mix(in srgb, var(--hc) 85%, transparent); stroke: var(--hc); }
.glasses.mini2 .hs b { font-size: 13px; color: var(--ink-2); }
.glasses.mini2 .hs.lead b { color: var(--hc); font-weight: 800; }
.glasses.mini2 .hs.lead .ico { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--hc) 60%, transparent)); }
/* 같이 있는 사람: 연한 회색 */
.person { box-shadow: none !important; background: color-mix(in srgb, var(--ink) 4%, var(--sheet)) !important; border-radius: 10px; }
.person:hover { background: color-mix(in srgb, var(--ink) 8%, var(--sheet)) !important; box-shadow: none !important; }
.people { display: grid; gap: 5px; }

/* ===== 예언자 일보 ===== */
.daily-prophet { background: #f6f0e1 !important; color: #2a2418; box-shadow: inset 0 0 0 1px #d8cba8 !important; padding: 16px 18px !important; gap: 12px; }
.dp-mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; border-bottom: 3px double #2a2418; padding-bottom: 6px; }
.dp-title { font-family: 'Gowun Batang', var(--f-display), serif; font-size: 28px; letter-spacing: .12em; text-align: center; }
.dp-date { font-size: 11px; color: #6b5f48; letter-spacing: .04em; } .dp-mast .dp-date:last-child { text-align: right; }
.dp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; }
.dp-art { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px; border-left: 1px solid #d0c39f; }
.dp-art:first-child { border-left: 0; padding-left: 0; }
.dp-art h4 { margin: 0; font-family: 'Gowun Batang', var(--f-display), serif; font-size: 18px; line-height: 1.3; }
.dp-art p { margin: 0; font-size: 13px; line-height: 1.6; color: #463c2a; flex: 1; }
.dp-art.claimed { opacity: .55; }
.dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-top: 1px dashed #d0c39f; padding-top: 6px; }
.dp-foot .faint { color: #7a6c50 !important; display: inline-flex; align-items: center; gap: 3px; }
.dp-foot .ico { width: 12px; height: 12px; }
.daily-prophet .btn:not(.primary) { background: #fffaf0; color: #2a2418; border-color: #c9b68a; }
.daily-prophet .btn.primary { background: #2a2418 !important; border-color: #2a2418 !important; color: #f6f0e1 !important; }
.daily-prophet .pill { background: #e8dcc0; color: #4a3e28; }
@media (max-width: 640px) { .dp-art { border-left: 0; border-top: 1px solid #d0c39f; padding: 10px 0; } .dp-art:first-child { border-top: 0; } .dp-title { font-size: 24px; } .dp-mast { grid-template-columns: 1fr; text-align: center; } .dp-mast .dp-date:last-child { text-align: center; } }
:root[data-theme="dark"] .daily-prophet { background: #2b2619 !important; color: #efe6cf; box-shadow: inset 0 0 0 1px #4a4230 !important; }
:root[data-theme="dark"] .dp-art p, :root[data-theme="dark"] .dp-date { color: #cfc4a8; } :root[data-theme="dark"] .dp-mast { border-color: #efe6cf; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .daily-prophet { background: #2b2619 !important; color: #efe6cf; box-shadow: inset 0 0 0 1px #4a4230 !important; } :root:not([data-theme="light"]) .dp-art p, :root:not([data-theme="light"]) .dp-date { color: #cfc4a8; } :root:not([data-theme="light"]) .dp-mast { border-color: #efe6cf; } }
.dp-here { background: #f6f0e1 !important; box-shadow: inset 0 0 0 1px #d8cba8 !important; }
.dp-here b .ico { width: 15px; height: 15px; vertical-align: -2px; }

/* ===== 첫걸음 ===== */
.first-steps { background: var(--sheet); border-radius: 18px; padding: 16px 18px; gap: 10px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.fs-head { display: flex; align-items: center; gap: 12px; }
.fs-head > div { flex: 1; } .fs-head h2 { margin: 0; font-size: 20px; }
.fs-count { font-size: 13px; color: var(--ink-2); } .fs-count b { font-size: 20px; color: var(--accent); }
.fs-bar { height: 6px; border-radius: 4px; background: var(--sheet-2); overflow: hidden; } .fs-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s; }
.fs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: fs; }
.fs-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 3%, var(--sheet)); }
.fs-list li .grow { display: grid; min-width: 0; } .fs-list li b { font-size: 14.5px; }
.fs-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 20%, transparent); }
.fs-list li.done { opacity: .6; } .fs-list li.done b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.fs-list li.done .fs-check { background: var(--accent); box-shadow: none; } .fs-list li.done .fs-check .ico { width: 15px; height: 15px; stroke: #fff; }
.fs-list li.now { background: color-mix(in srgb, var(--accent) 9%, var(--sheet)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.fs-list li.now .fs-check { box-shadow: inset 0 0 0 2px var(--accent); animation: dev-glow 2s ease-in-out infinite; }
/* 이변 보상 · 피로도 */
.inc-reward { gap: 8px; background: color-mix(in srgb, #c9962a 8%, var(--sheet)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9962a 35%, transparent) !important; }
.inc-reward > b { display: flex; align-items: center; gap: 6px; } .inc-reward > b .ico { width: 16px; height: 16px; color: #b8862a; }
.ir-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.ir-list li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.ir-list li > .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ink-2); }
.ir-list .coin, .inc-rw .coin { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(145deg, #f2d27a, #c9a227); color: #6b4f0a; flex: none; margin-top: 1px; }
.ir-list .coin .ico, .inc-rw .coin .ico { width: 11px; height: 11px; }
.inc-rw { display: inline-flex; align-items: center; gap: 4px; color: #8a6418; }
.fat.compact .small.faint { display: none; }
.inc-fat-top { padding: 10px 14px !important; }

/* ===== 관계도 ===== */
.rel-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .rel-layout { grid-template-columns: 1fr; } }
.rel-map { padding: 6px !important; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 7%, var(--sheet)), var(--sheet) 70%) !important; }
.rg { width: 100%; height: auto; display: block; }
.rg-orbit { fill: none; stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-dasharray: 3 6; }
.rg-link { stroke-width: 3; stroke-linecap: round; opacity: .85; transition: opacity .2s; }
.rg-link.pending { stroke-dasharray: 6 6; opacity: .55; }
.rg-side { stroke-width: 1.5; stroke-dasharray: 2 5; opacity: .5; }
.rg-tag text { fill: #fff; font: 700 12px var(--f-body); }
.rg-tag { transition: opacity .2s; }
.rg-me circle { stroke: var(--sheet); stroke-width: 4; filter: drop-shadow(0 3px 8px rgba(0,0,0,.18)); }
.rg-mono { font: 700 24px var(--f-display); fill: var(--ink); pointer-events: none; } .rg-mono.me { fill: #fff; font-size: 24px; }
.rg-name { font: 700 13px var(--f-body); fill: var(--ink); paint-order: stroke; stroke: var(--sheet); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.rg-node { cursor: pointer; transition: opacity .2s; }
.rg-ring { fill: var(--sheet); stroke-width: 4; }
.rg-node:hover .rg-ring, .rg-node.sel .rg-ring { stroke-width: 6; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 50%, transparent)); }
.rg-node.sel .rg-ring { fill: color-mix(in srgb, var(--accent) 12%, var(--sheet)); }
.dim { opacity: .25; }
.rg-dot { stroke: var(--sheet); stroke-width: 2; } .rg-dot.me { fill: #3f9a62; } .rg-dot.them { fill: #d4558a; }
.rel-side { gap: 10px; }
.rs-name { font-size: 18px; font-family: var(--f-display); }
.rs-rels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rs-chip { padding: 3px 10px; border-radius: 999px; background: var(--rc); color: #fff; font-size: 12px; font-weight: 700; }
.rs-them { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #d4558a 8%, var(--sheet)); display: grid; gap: 4px; }
.rs-them p { margin: 0; font-family: var(--f-display); font-size: 14.5px; line-height: 1.6; }
.rg-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; }
.rg-legend i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.rel-empty { gap: 8px; }

/* ===== 한쪽으로 쏠리거나 빈칸이 남지 않게 ===== */
/* 칸 묶음: 남는 줄의 칸이 옆으로 늘어나 빈자리를 채운다 */
.cols { display: flex !important; flex-wrap: wrap; align-items: stretch; }
.cols > * { flex: 1 1 280px; min-width: 0; }
.cols > .wide { flex-basis: 100%; }
/* 이변 카드: 하나뿐이면 한 줄을 다 쓴다 */
.inc-grid:not(.past) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important; }
.inc-fat-top .fat, .inc-side .fat { max-width: none; }
/* 일지 기록 칸: 줄 끝까지 고르게 */
.tiles { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important; }
.tiles { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important; }
.mine-stats.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 560px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .mine-stats.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* 휴대폰: 위쪽 버튼 줄이 오른쪽으로 쏠리지 않게 */
@media (max-width: 700px) {
  .sb-right { flex: 1 1 100%; justify-content: flex-start; }
  .sb-right > .iconbtn:not(.iconbtn ~ .iconbtn) { margin-left: auto; }
}

/* 갈 수 없는 가게는 회색 */
.shop-sec.locked { opacity: .78; filter: grayscale(1); }
.shop-sec.locked .sn { color: var(--ink-3, var(--ink-2)); }
.shop-sec.locked > .row > b .ico { width: 14px; height: 14px; vertical-align: -2px; }

/* 오늘: 기숙사 점수 방패 — 꼭 맞는 크기로 오른쪽에 */
.today-head .today-pts:has(.mini2) { justify-self: end; align-self: center; width: auto !important; min-width: 0; height: auto; padding: 8px 14px !important; border-radius: 999px; background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent) !important; }
.glasses.mini2 { gap: 0; }
.glasses.mini2 .hs { gap: 5px; padding: 0 10px; border-left: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); min-width: 52px; justify-content: center; }
.glasses.mini2 .hs:first-child { border-left: 0; padding-left: 2px; }
.glasses.mini2 .hs:last-child { padding-right: 2px; }
.glasses.mini2 .hs b { min-width: 1.6em; text-align: left; font-variant-numeric: tabular-nums; }

/* 접속 목록 이름표 */
.person .mbadge { margin-right: 5px; }

/* 관계 고치기 */
.rs-rels { flex-direction: column; align-items: stretch !important; }
.rs-rel { display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 3%, var(--sheet)); }
.rs-note-edit { display: flex; gap: 6px; } .rs-note-edit input { flex: 1; min-width: 0; }

/* 전체 지급 */
.gift-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; }
@media (max-width: 640px) { .gift-grid { grid-template-columns: 1fr; } }

/* ===== 스크롤바가 생기고 사라질 때 화면이 옆으로 흔들리지 않게 ===== */
html { scrollbar-gutter: stable; overflow-y: scroll; }
.chat-list, .post-box #post-list, .online-rail, .rail, .modal, .pop .people, .lines { scrollbar-gutter: stable; }
body { overflow-x: hidden; }
.view { min-width: 0; }
.or-nm .mbadge, .ochip .mbadge { transform: scale(.9); margin: 0 1px; }

/* ===== 업적 ===== */
.ach-head { gap: 10px; }
.ach-sum { display: flex; gap: 16px; align-items: center; }
.ach-sum > div { display: grid; gap: 4px; min-width: 0; }
.ach-ring { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, var(--sheet) 76%, transparent 78%), conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--ink) 8%, transparent) 0); }
.ach-ring b { font-size: 24px; line-height: 1; } .ach-ring span { font-size: 11px; color: var(--ink-3, var(--ink-2)); }
.crown-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #8a5a00; background: linear-gradient(135deg, #fff3c4, #f6d77a); box-shadow: inset 0 0 0 1px #e2b94a; }
.crown-chip .ico { width: 13px; height: 13px; }
.ach-cats { margin: 2px 0 4px; }
.title-card.crown { background: linear-gradient(160deg, color-mix(in srgb, #f6d77a 22%, var(--sheet)), var(--sheet)); }
.title-card.crown b .ico { width: 14px; height: 14px; color: #c08a12; vertical-align: -2px; margin-right: 3px; }
.title-card.crown:not(.has) { opacity: .7; }

/* ===== 랭킹 ===== */
.rank-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.rank-cell { display: grid; justify-items: center; gap: 2px; padding: 9px 4px 8px; border-radius: 12px; border: 0; background: color-mix(in srgb, var(--ink) 4%, var(--sheet)); color: var(--ink-2); cursor: pointer; font: inherit; }
.rank-cell .ico { width: 18px; height: 18px; color: var(--accent); }
.rank-cell span { font-size: 12px; } .rank-cell b { font-size: 14.5px; color: var(--ink); }
.rank-cell:hover { background: color-mix(in srgb, var(--accent) 10%, var(--sheet)); }
.rank-cell.on { background: color-mix(in srgb, var(--accent) 16%, var(--sheet)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.rank-cell.top b { color: #b07a00; }
.rank-cell.top { background: linear-gradient(160deg, #fff6d6, color-mix(in srgb, #f6d77a 30%, var(--sheet))); }
.rk-list { display: grid; gap: 4px; }
.rk-row { display: grid; grid-template-columns: 44px auto minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 3%, var(--sheet)); }
.rk-row.me { box-shadow: inset 0 0 0 1.5px var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); }
.rk-n { display: inline-flex; align-items: center; gap: 3px; justify-content: center; color: var(--ink-3, var(--ink-2)); }
.rk-n .ico { width: 15px; height: 15px; }
.rk-row.m1 .rk-n { color: #c08a12; } .rk-row.m2 .rk-n { color: #8d97a5; } .rk-row.m3 .rk-n { color: #b06c3a; }
.rk-row.m1 { background: linear-gradient(90deg, color-mix(in srgb, #f6d77a 28%, var(--sheet)), color-mix(in srgb, var(--ink) 3%, var(--sheet))); }
.rk-nm { background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-nm:hover .hn { text-decoration: underline; }
.rk-v { font-size: 14.5px; }
.rk-gap { text-align: center; color: var(--ink-3, var(--ink-2)); line-height: 1; }
.crown-t { color: #b07a00; }
.rank-house { display: grid; gap: 8px; }
.rh-row { display: grid; grid-template-columns: 24px 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: color-mix(in srgb, var(--hc) 7%, var(--sheet)); }
.rh-row.lead { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hc) 60%, transparent); }
.rh-shield .ico { width: 30px; height: 30px; fill: var(--hc); stroke: var(--hc); }
.rh-main { display: grid; gap: 4px; min-width: 0; }
.rh-bar { height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; }
.rh-bar i { display: block; height: 100%; background: var(--hc); border-radius: inherit; }
.rh-v { font-size: 20px; color: var(--hc); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); font-weight: 700; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent); }

/* 이변 막타 */
.last-hit { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 4px auto 8px; padding: 10px 16px; border-radius: 14px; background: linear-gradient(135deg, #fff3c4, #f6d77a); color: #6b4300; text-align: left; }
.last-hit .ico { width: 26px; height: 26px; } .last-hit > span { display: grid; }
.inc-last { color: var(--ink-2); } .inc-last .ico { width: 13px; height: 13px; vertical-align: -2px; }

/* 프로필 탭이 많아져도 한 줄에서 넘겨 보기 */
.prof-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.prof-tabs::-webkit-scrollbar { display: none; }
.prof-tabs button { flex: none; }
@media (max-width: 640px) { .rk-row { grid-template-columns: 36px auto minmax(0, 1fr) auto; padding-right: 10px; } .rank-sum { grid-template-columns: repeat(4, 1fr); } }
.title-card > .row.between { flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
.title-card > .row.between > b { min-width: 0; }
.title-card > .row.between > .btn { flex: none; }
@media (max-width: 640px) {
  .ach-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .ach-cats::-webkit-scrollbar { display: none; }
  .ach-cats .chip { flex: none; }
  .ach-sum { align-items: flex-start; gap: 12px; }
  .ach-ring { width: 60px; height: 60px; } .ach-ring b { font-size: 18px; }
}

.toast { cursor: pointer; pointer-events: auto; }

/* 이변 카드: 최다 기여·마지막 일격 */
.inc-credits { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-2); }
.inc-credits .ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; color: #c08a12; }

/* 학년도 · 기숙사컵 */
.term-panel { position: relative; overflow: hidden; }
.term-panel[style*="--cup"]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--cup); }
.cup-hist { display: grid; gap: 6px; }
.cup-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.cup { flex: none; display: grid; justify-items: center; gap: 1px; min-width: 84px; padding: 8px 8px 7px; border-radius: 12px; background: color-mix(in srgb, var(--hc) 10%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 30%, transparent); }
.cup .ico { width: 20px; height: 20px; color: var(--hc); }
.cup span { font-size: 11px; color: var(--ink-3, var(--ink-2)); } .cup b { font-size: 13px; color: var(--hc); }
.cup.none { opacity: .6; }

/* 대연회장 깃발: 지난 학년도 우승 기숙사 색 */
.pa-cupban rect, .pa-cupban > path:not(.pa-cupmark) { fill: var(--cup); }
.pa-cupban { transform-box: fill-box; transform-origin: top center; animation: banSway 6s ease-in-out infinite; }
.pa-cupmark { fill: color-mix(in srgb, #fff 70%, var(--cup)); opacity: .85; }
@keyframes banSway { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(2.5deg); } }
@media (prefers-reduced-motion: reduce) { .pa-cupban { animation: none; } }

/* 오늘의 식단 */
.menu-card { gap: 10px; }
.menu-card[style*="--cup"] { background: linear-gradient(180deg, color-mix(in srgb, var(--cup) 9%, var(--sheet)), var(--sheet) 60%); }
.cup-note { color: var(--cup, var(--ink-2)); } .cup-note .ico { width: 13px; height: 13px; vertical-align: -2px; }
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.menu-col { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 3%, var(--sheet)); display: grid; gap: 4px; align-content: start; }
.menu-col ul { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.6; }
.menu-col.now { background: color-mix(in srgb, var(--cup, var(--accent)) 12%, var(--sheet)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cup, var(--accent)) 55%, transparent); }
.menu-col.past { opacity: .6; }
@media (max-width: 640px) { .menu-grid { grid-template-columns: 1fr; } }

/* 우편함 도구 */
.post-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0 4px; }
.post-tools .grow { flex: 1; }
.post-tools.picking { position: sticky; top: 0; z-index: 2; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--sheet)); }
.letter.picking { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start; }
.letter.picking > :not(.pick-box) { grid-column: 2; }
.letter.picking > .pick-box { grid-row: 1 / span 4; }
.pick-box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); background: var(--sheet); display: grid; place-items: center; padding: 0; cursor: pointer; margin-top: 1px; }
.pick-box .ico { width: 14px; height: 14px; color: #fff; }
.pick-box.on { background: var(--accent); border-color: var(--accent); }
.pick-box.off { opacity: .35; cursor: not-allowed; border-style: dashed; }
.letter.sel { background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); }
.post-box > .post-tools { padding: 8px 14px; border-bottom: 1px solid var(--rule); min-height: 0; max-height: none; overflow: visible; }
.post-box > .post-tools:empty, .post-box > .post-tools:not(:has(button)) { display: none; }
.post-box > .post-tools.picking { border-radius: 0; position: static; }

/* ===== 이변: 자세한 설명과 작전 ===== */
.inc-guide { gap: 6px; background: color-mix(in srgb, var(--accent) 5%, var(--sheet)); }
.inc-guide p { font-size: 14.5px; line-height: 1.7; margin: 0; }
.inc-guide b .ico { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.inc-tacs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.inc-tac { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 0; background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); font: inherit; color: var(--ink); cursor: pointer; }
.inc-tac:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); }
.inc-tac.on { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); }
.inc-tac:disabled { opacity: .55; cursor: default; }
.tac-ef { color: color-mix(in srgb, var(--accent) 80%, var(--ink)); font-weight: 600; }
.tac-ef .ico { width: 12px; height: 12px; vertical-align: -1px; }
.inc-opts.tactics { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.inc-opt.weak:not(.on) { opacity: .7; }

/* ===== 내기 ===== */
.game-card { gap: 8px; }
.game-card > .row:first-child b .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; color: var(--accent); }
.bet-in { display: inline-flex; align-items: center; gap: 6px; }
.bet-in input { width: 84px; text-align: right; }
.cups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cup-btn { display: grid; justify-items: center; gap: 4px; padding: 12px 6px 8px; border-radius: 14px; border: 0; background: color-mix(in srgb, #8a5a2b 10%, var(--sheet)); cursor: pointer; font: inherit; color: var(--ink-2); transition: transform .15s; }
.cup-btn svg { width: 44px; height: 40px; fill: #8a5a2b; }
.cup-btn:hover:not(:disabled) { transform: translateY(-3px); }
.cup-btn:disabled { opacity: .5; cursor: default; }
.game-res { display: grid; gap: 12px; text-align: center; }
.game-res.win h3 { color: var(--good, #3f9a62); } .game-res.lose h3 { color: var(--ink-2); }
.cups.big { gap: 12px; }
.cup-show { display: grid; justify-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); }
.cup-show svg { width: 64px; height: 70px; overflow: visible; }
.cup-show .cupb { fill: #8a5a2b; }
.cup-show.ball .cupb { animation: cupLift .7s .2s ease-out forwards; }
.cup-show .pea { fill: #e2b94a; }
.cup-show.picked span { font-weight: 700; color: var(--ink); }
@keyframes cupLift { to { transform: translateY(-14px) rotate(-8deg); } }
.gob-rounds { display: grid; gap: 6px; justify-content: center; }
.gob-rounds .gr { display: grid; grid-template-columns: 40px 32px 10px 32px 40px; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, var(--sheet)); }
.gob-rounds .gr.w { background: color-mix(in srgb, #3f9a62 12%, var(--sheet)); } .gob-rounds .gr.l { background: color-mix(in srgb, #c4523f 10%, var(--sheet)); }
.frogs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.frog { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #4f8a3c 8%, var(--sheet)); position: relative; }
.frog .odds { position: absolute; right: 12px; top: 10px; font-weight: 800; color: #4f8a3c; font-family: var(--f-mono); }
.frog.mine { box-shadow: inset 0 0 0 1.5px #4f8a3c; }
.frog .btn { justify-self: start; margin-top: 2px; }
.lotto-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.ln { aspect-ratio: 1; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--ink) 5%, var(--sheet)); font: inherit; font-weight: 700; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.ln.on { background: var(--accent); color: #fff; }
.tickets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ticket { padding: 4px 10px; border-radius: 8px; background: repeating-linear-gradient(90deg, color-mix(in srgb, #e2b94a 25%, var(--sheet)) 0 8px, color-mix(in srgb, #e2b94a 15%, var(--sheet)) 8px 16px); font-family: var(--f-mono); font-size: 13px; font-weight: 700; }
@media (max-width: 640px) { .lotto-grid { grid-template-columns: repeat(5, 1fr); } .cup-btn svg { width: 36px; height: 32px; } }
.lotto-grid { grid-template-columns: repeat(auto-fill, 38px); justify-content: start; }
.ln { width: 38px; height: 38px; aspect-ratio: auto; }
.cups.big { padding-top: 18px; }
.game-res h3 { margin-bottom: 4px; }
@media (max-width: 640px) { .lotto-grid { grid-template-columns: repeat(auto-fill, 34px); } .ln { width: 34px; height: 34px; } }
.inc-guide .prose { max-width: none; }

/* ===== 위쪽 줄: 현재 위치 꼬리표 + 시클 옆 ‘하는 중’ 상자 ===== */
.loc-tag { display: inline-flex; align-items: center; gap: 0; max-width: 100%; border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); background: var(--sheet); }
.loc-tag i { font-style: normal; flex: none; font-size: 12px; font-weight: 700; padding: 4px 8px; background: color-mix(in srgb, var(--accent) 16%, var(--sheet)); color: color-mix(in srgb, var(--accent) 75%, var(--ink)); }
.loc-tag b { font-family: var(--f-display); font-size: 18px !important; padding: 2px 10px 2px 8px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.sb-right, .sb-mid) .act-band { order: 0; flex: 0 1 auto; max-width: 280px; min-width: 0; gap: 8px; padding: 6px 12px 9px 6px; border-radius: 13px; }
:is(.sb-right, .sb-mid) .act-band .ab-ico { width: 30px; height: 30px; }
:is(.sb-right, .sb-mid) .act-band .ab-ico .ico { width: 16px; height: 16px; }
:is(.sb-right, .sb-mid) .act-band .ab-txt { display: grid; min-width: 0; line-height: 1.2; }
:is(.sb-right, .sb-mid) .act-band .ab-txt b { font-size: 13px; }
:is(.sb-right, .sb-mid) .act-band .ab-txt > span { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.sb-right, .sb-mid) .act-band .ab-left { display: grid; justify-items: end; line-height: 1.1; font-size: 13px; font-weight: 700; }
:is(.sb-right, .sb-mid) .act-band .ab-left small { font-size: 10px; font-weight: 400; color: var(--ink-3, var(--ink-2)); }
:is(.sb-right, .sb-mid) .act-band .ab-bar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px; }
/* 무언가 하는 중이면 위쪽 줄 색이 살짝 바뀐다 */
.statusbar[data-busy] { --ab: #3f6fc4; background: linear-gradient(90deg, color-mix(in srgb, var(--ab) 12%, var(--sheet)), color-mix(in srgb, var(--ab) 5%, var(--sheet))) !important; border-bottom-color: color-mix(in srgb, var(--ab) 45%, transparent) !important; transition: background .4s; }
.statusbar[data-busy="explore"] { --ab: #c07a1a; } .statusbar[data-busy="mine"] { --ab: #8a5a36; } .statusbar[data-busy="fish"] { --ab: #2f9aa3; } .statusbar[data-busy="hurt"] { --ab: #c4523f; } .statusbar[data-busy="detention"] { --ab: #6b7280; }
@media (max-width: 700px) {
  .loc-tag i { font-size: 11px; padding: 3px 6px; } .loc-tag b { font-size: 14.5px !important; }
  :is(.sb-right, .sb-mid) .act-band { max-width: 150px; padding: 5px 9px 8px 5px; }
  :is(.sb-right, .sb-mid) .act-band .ab-txt > span { display: none; }
  :is(.sb-right, .sb-mid) .act-band .ab-ico { width: 26px; height: 26px; }
}
:is(.sb-right, .sb-mid) .act-band .ab-left .num { font-size: 14.5px; }
.msg.notice-msg { display: grid; gap: 3px; margin: 6px 0; padding: 9px 12px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, #e2b94a 22%, var(--sheet)), color-mix(in srgb, #e2b94a 8%, var(--sheet))); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c08a12 40%, transparent); }
.notice-msg .nm-head { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: #8a5a00; }
.notice-msg .nm-head .ico { width: 14px; height: 14px; }
.notice-msg .nm-head .t { margin-left: auto; font-weight: 400; color: var(--ink-3, var(--ink-2)); }
.notice-msg .nm-text { font-size: 13px; line-height: 1.55; white-space: pre-wrap; }

/* ===== 주사위 ===== */
.dice-stage { display: grid; justify-items: center; gap: 14px; padding: 18px 8px 8px; text-align: center; }
.dice-row { display: flex; gap: 28px; justify-content: center; }
.d20-wrap { display: grid; justify-items: center; gap: 8px; }
.d20 { width: 86px; height: 86px; display: grid; place-items: center; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, #000)); color: #fff; }
.d20 span { font-family: var(--f-mono); font-size: 28px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.d20.rolling { animation: d20spin .35s linear infinite; }
.d20.landed { animation: d20land .45s cubic-bezier(.2, 1.6, .4, 1); }
.d20.crit { background: linear-gradient(160deg, #fff3c4, #e2b94a 55%, #a87810); }
.d20.fumble { background: linear-gradient(160deg, #e7b3a9, #c4523f 55%, #7d2c20); }
@keyframes d20spin { 0% { transform: rotate(0) scale(1); } 25% { transform: rotate(90deg) scale(.92) translateY(-6px); } 50% { transform: rotate(180deg) scale(1); } 75% { transform: rotate(270deg) scale(.92) translateY(-6px); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes d20land { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ===== 의뢰 NPC ===== */
.npc-say { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0; }
.npc-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14.5px; color: #5b4a2e; background: color-mix(in srgb, #c9a96a 35%, var(--sheet)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #8a6d3b 45%, transparent); font-family: var(--f-display); }
.npc-say > div { position: relative; min-width: 0; padding: 7px 11px; border-radius: 4px 12px 12px 12px; background: color-mix(in srgb, #c9a96a 14%, var(--sheet)); }
.npc-say b { color: #6b5328; }
.npc-say p { margin: 2px 0 0; font-size: 13px; line-height: 1.55; }
.quest-story { display: grid; gap: 10px; }
.quest-story .qs-scene { font-size: 14.5px; line-height: 1.75; margin: 0; padding: 10px 14px; border-left: 3px solid #c9a96a; background: color-mix(in srgb, #c9a96a 8%, var(--sheet)); border-radius: 0 10px 10px 0; }
.qs-reward { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #e2b94a 16%, var(--sheet)); }
.qs-reward .ico { width: 16px; height: 16px; color: #b07a00; }
.notice-msg .del { justify-self: end; }
:is(.sb-right, .sb-mid) .act-band .ab-txt b { white-space: nowrap; }

/* 현재 위치: 한 줄로 깔끔하게 */
.where { display: flex !important; align-items: center; max-width: none !important; min-width: 0; }
.loc-line { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; padding: 6px 14px 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.loc-line > .ico { align-self: center; flex: none; width: 15px; height: 15px; color: var(--accent); stroke: var(--accent); }
.loc-line .lk { flex: none; font-size: 12px; color: var(--ink-3, var(--ink-2)); }
.loc-line .lk::after { content: ":"; margin-left: 3px; }
.loc-line b { font-family: var(--f-display); font-size: 18px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.loc-line .lz { flex: none; font-size: 12px; color: var(--ink-3, var(--ink-2)); }
.where:hover .loc-line { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
@media (max-width: 700px) { .loc-line { padding: 5px 11px 5px 8px; gap: 6px; } .loc-line b { font-size: 14.5px; } .loc-line .lz { display: none; } }
/* 현재 위치 v3: [● 현재 위치 | 도서관] */
.loc-line { align-items: center !important; gap: 0 !important; padding: 3px 14px 3px 3px !important; background: var(--sheet) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 1px 2px rgba(0,0,0,.04) !important; }
.loc-line .lp { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); }
.loc-line .lp .ico { width: 14px; height: 14px; color: #fff; stroke: #fff; }
.loc-line .lk { font-size: 12px !important; font-weight: 600; letter-spacing: .02em; color: color-mix(in srgb, var(--accent) 70%, var(--ink)) !important; padding: 0 10px 0 8px; border-right: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.loc-line .lk::after { content: none !important; }
.loc-line b { padding-left: 10px; font-size: 16px !important; letter-spacing: -.01em; }
.loc-line .lz { display: none !important; }
@media (max-width: 700px) { .loc-line .lp { width: 22px; height: 22px; } .loc-line .lk { padding: 0 8px 0 6px; font-size: 11px !important; } .loc-line b { padding-left: 8px; font-size: 14.5px !important; } }

/* 전체 관계도 */
.rg.ra .ra-edge { fill: none; stroke-width: 2.2; opacity: .55; transition: opacity .2s; }
.rg.ra .ra-edge.one { stroke-dasharray: 5 4; }
.rg.ra .ra-edge.on { opacity: 1; stroke-width: 3; }
.rg.ra .ra-edge.dim { opacity: .08; }
.ra-node { cursor: pointer; transition: opacity .2s; }
.ra-node circle { fill: var(--sheet); stroke-width: 3; }
.ra-node.sel circle { stroke-width: 5; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.ra-node.me .rg-mono { fill: #fff; }
.ra-node.dim { opacity: .25; }
.ra-list, .ra-top { display: grid; gap: 6px; }
.ra-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ra-row.linkrow { border: 0; background: color-mix(in srgb, var(--ink) 3%, var(--sheet)); padding: 6px 10px; border-radius: 10px; font: inherit; cursor: pointer; text-align: left; }
.ra-row.linkrow b { flex: 1; }
.ra-row.linkrow:hover { background: color-mix(in srgb, var(--accent) 10%, var(--sheet)); }

/* 소포도 편지와 같은 모양 */
.post-box .letter.parcel > .row:first-of-type .ico { width: 14px; height: 14px; vertical-align: -2px; color: var(--accent); }
.pc-sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pc-sum > .small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-st.sent { color: color-mix(in srgb, var(--accent) 80%, var(--ink)); font-weight: 600; }
.post-box .letter.parcel .row.end { margin-top: 6px; }

/* 받은 의뢰 */
#quest-block .block-head h2 .ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; color: #8a6d3b; }
.qlist { display: grid; gap: 8px; }
.qrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #c9a96a 10%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #8a6d3b 18%, transparent); }
.qrow.done { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); }
.qrow.claimed { opacity: .6; }
.qmain { display: grid; gap: 3px; min-width: 0; }
.qmain .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbar { height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; margin-top: 2px; }
.qbar i { display: block; height: 100%; background: #b08a3c; border-radius: inherit; }
.qside { display: grid; justify-items: end; gap: 5px; }
.qside .ico { width: 12px; height: 12px; vertical-align: -1px; color: #b07a00; }
.q-more { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 10px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, #8a6d3b 35%, transparent); }
@media (max-width: 640px) { .qrow { grid-template-columns: auto minmax(0, 1fr); } .qside { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; } }
.q-check { display: inline-flex; align-items: center; gap: 4px; color: color-mix(in srgb, var(--accent) 70%, var(--ink)); font-weight: 600; }
.q-check .ico { width: 12px; height: 12px; }
.quest-story .roll, .quest-story.fail .roll { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); margin: 0; }
.quest-story.fail h3 { color: var(--ink-2); }

/* 내 내기 */
#bet-block .block-head h2 .ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; color: #b07a00; }
.bet-list { display: grid; gap: 8px; }
.bet-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent); }
.bet-row .grow { display: grid; gap: 2px; min-width: 0; }
.bet-row > .small { text-align: right; line-height: 1.35; }
.bet-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; }
.bet-ico .ico { width: 17px; height: 17px; stroke: #fff; }
.bet-ico.frog { background: #4f8a3c; } .bet-ico.lotto { background: #b08a3c; }
.ticket-nums { font-family: var(--f-mono); font-weight: 700; }
.bet-log { display: grid; gap: 4px; margin-top: 10px; }
.bet-log .line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: 13px; }
.bet-log .line .t { color: var(--ink-3, var(--ink-2)); font-size: 12px; }

/* ===== 내기: 그림 타일 → 눌러서 펼치기 ===== */
.game-tile { --gc: #5f9a43; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; text-align: left; cursor: pointer; border: 0; font: inherit; color: var(--ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 22%, var(--sheet)), color-mix(in srgb, var(--gc) 8%, var(--sheet))) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gc) 35%, transparent) !important; border-radius: 18px !important; transition: transform .15s, box-shadow .15s; }
.game-tile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gc) 70%, transparent), 0 6px 16px color-mix(in srgb, var(--gc) 20%, transparent) !important; }
.gt-art { flex: none; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 20px; background: color-mix(in srgb, #fff 55%, color-mix(in srgb, var(--gc) 25%, var(--sheet))); }
.gt-art svg { width: 54px; height: 54px; overflow: visible; }
.gt-txt { display: grid; gap: 2px; min-width: 0; }
.gt-txt b { font-size: 16px; color: color-mix(in srgb, var(--gc) 70%, var(--ink)); }
.gt-txt .small { color: var(--ink-2); }
.gt-st { color: color-mix(in srgb, var(--gc) 75%, var(--ink)) !important; }
.gt-go { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gc); color: #fff; }
.gt-go .ico { width: 15px; height: 15px; stroke: #fff; transform: rotate(90deg); }
/* 귀여운 움직임 */
.game-tile:hover .ga-body, .go-head .ga-body { animation: gaHop .6s ease-in-out infinite alternate; transform-origin: 32px 56px; }
.game-tile .ga-eye { animation: gaBlink 4s infinite; transform-origin: center; transform-box: fill-box; }
.game-tile:hover .ga-cup.c2 { animation: gaLift .7s ease-in-out infinite alternate; }
.game-tile:hover .ga-m.m2 { animation: gaRoll 1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.ga-star { animation: gaTwinkle 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.game-tile:hover .ga-ticket { animation: gaWiggle .5s ease-in-out infinite alternate; transform-origin: 32px 32px; }
@keyframes gaHop { to { transform: translateY(-3px); } }
@keyframes gaBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes gaLift { to { transform: translateY(-6px); } }
@keyframes gaRoll { to { transform: translateX(-4px) rotate(-30deg); } }
@keyframes gaTwinkle { 50% { transform: scale(.6); opacity: .6; } }
@keyframes gaWiggle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .game-tile *, .go-head * { animation: none !important; } }
/* 펼친 모습: 단락 전체에 그 놀이 색 */
.game-open { --gc: #5f9a43; display: grid; gap: 0; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 20%, var(--sheet)), color-mix(in srgb, var(--gc) 7%, var(--sheet))); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gc) 40%, transparent); }
.game-open.wide { grid-column: 1 / -1; }
.go-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 4px; }
.go-head b { flex: 1; font-size: 18px; color: color-mix(in srgb, var(--gc) 70%, var(--ink)); }
.go-head .gt-art { width: 54px; height: 54px; border-radius: 16px; } .go-head .gt-art svg { width: 44px; height: 44px; }
.game-open > .game-card { background: transparent !important; box-shadow: none !important; border: 0 !important; padding-top: 4px; }
.game-open > .game-card > .row:first-child > b { display: none; }
.game-open > .game-card > .row:first-child { justify-content: flex-end; }
.game-open .btn.primary { background: var(--gc); border-color: var(--gc); }
.game-open .frog { background: color-mix(in srgb, #fff 55%, transparent); }
.game-open .cup-btn { background: color-mix(in srgb, #fff 50%, transparent); }
.game-open .ln:not(.on) { background: color-mix(in srgb, #fff 60%, transparent); }
.game-open .ln.on { background: var(--gc); }
.game-open .btn.primary:not(:disabled) { background: var(--gc) !important; border-color: var(--gc) !important; color: #fff !important; }
.game-open > .game-card > .row:first-child { margin-top: -38px; padding-right: 72px; pointer-events: none; }
.game-open > .game-card > .row:first-child > * { pointer-events: auto; }
@media (max-width: 640px) { .game-open > .game-card > .row:first-child { margin-top: 0; padding-right: 0; justify-content: flex-start; } .game-tile { gap: 10px; } .gt-art { width: 56px; height: 56px; } .gt-art svg { width: 46px; height: 46px; } }
/* 호숫가·경기장처럼 그림 위에 겹친 칸은 ‘지금 여기’여도 그림이 비치게 */
.room.here.rm-black_lake .shape, .room.here.rm-pitch .shape, .room.here.rs-forest .shape { fill: color-mix(in srgb, var(--accent) 12%, transparent) !important; stroke: var(--accent) !important; stroke-width: 2.5 !important; stroke-dasharray: 6 4 !important; }

/* 장소 위 꼬리표 */
.scene-top { align-items: flex-start !important; gap: 10px; position: relative; z-index: 1; }
.scene-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; max-width: 62%; }
.zone-pill { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--accent) 75%, var(--ink)); background: color-mix(in srgb, var(--accent) 14%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.ptag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 8px; border-radius: 999px; border: 0; font: inherit; font-size: 12px; color: var(--ink-2); background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); cursor: pointer; transition: background .15s, box-shadow .15s, transform .15s; }
.ptag .ico { width: 12px; height: 12px; color: var(--accent); }
.ptag:hover { background: color-mix(in srgb, var(--accent) 10%, var(--sheet)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-1px); }
@media (max-width: 860px) { .scene-tags { max-width: none; } }
/* 꼬리표를 눌러 찾아간 단락 반짝 */
.sec-flash { animation: secFlash 1.4s ease-out; }
@keyframes secFlash { 0%, 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* 꼬리표는 흐릿하게, 존재감 작게 */
.zone-pill { font-weight: 500; font-size: 12px; padding: 2px 9px; color: var(--ink-3, var(--ink-2)); background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: none; }
.ptag { font-size: 12px; padding: 2px 8px 2px 6px; color: var(--ink-3, var(--ink-2)); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); opacity: .8; }
.ptag .ico { width: 11px; height: 11px; color: currentColor; opacity: .7; }
.ptag:hover { opacity: 1; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent); transform: none; }
.scene-tags { gap: 4px; }

/* ===== 잊힌 지하 동굴: 화면 전체가 어둑하게 ===== */
.stage.in-mine {
  --paper: #121216; --sheet: #1c1c22; --sheet-2: #24242c; --rule: #33333d; --ink: #ece6dc; --ink-2: #bdb5a8; --ink-3: #8a8378;
  --good: #7cc495; --bad: #e2836c; --warn: #e0b65c; --hp: #7cc495; --mp: #86a8ea; --st: #e0b65c;
  --soft: 0 1px 2px rgba(0, 0, 0, .35); --lift: 0 10px 30px rgba(0, 0, 0, .5);
  color: var(--ink); color-scheme: dark;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(120, 140, 200, .10), transparent 45%),
    radial-gradient(ellipse at 85% 30%, rgba(170, 120, 220, .08), transparent 40%),
    radial-gradient(circle at 50% 120%, rgba(224, 182, 92, .08), transparent 50%),
    linear-gradient(180deg, #16161c, #0e0e12 60%, #0b0b0e);
  transition: background .5s;
}
.stage.in-mine .statusbar { background: color-mix(in srgb, #121216 88%, transparent) !important; border-bottom-color: #2a2a33 !important; }
.stage.in-mine .view::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: radial-gradient(1.5px 1.5px at 12% 22%, #9fb7ff, transparent), radial-gradient(1.5px 1.5px at 78% 14%, #d7b4ff, transparent), radial-gradient(1px 1px at 42% 68%, #ffe6a8, transparent), radial-gradient(1.5px 1.5px at 88% 72%, #9fe3ff, transparent), radial-gradient(1px 1px at 25% 88%, #c8b4ff, transparent);
  animation: caveTwinkle 6s ease-in-out infinite alternate; }
.stage.in-mine .view > * { position: relative; z-index: 1; }
.stage.in-mine .panel, .stage.in-mine .mine-floor, .stage.in-mine .mine-enemy:not(.hidden-foe) { background: var(--sheet); border-color: #2c2c35; }
.stage.in-mine .btn:not(.primary) { background: #24242c; border-color: #3a3a45; color: var(--ink); }
.stage.in-mine input, .stage.in-mine select, .stage.in-mine textarea { background: #15151a; color: var(--ink); border-color: #3a3a45; }
@keyframes caveTwinkle { from { opacity: .3; } to { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .stage.in-mine .view::before { animation: none; } }
.stage.in-mine .loc-line { background: #1c1c22 !important; box-shadow: inset 0 0 0 1px #3a3a45 !important; }
.stage.in-mine .purse, .stage.in-mine .iconbtn { background: #1c1c22; border-color: #3a3a45; color: var(--ink); }

/* ===== 퀴디치 ===== */
.qd-sh { display: inline-grid; place-items: center; } .qd-sh .ico { width: 16px; height: 16px; fill: var(--hc); stroke: var(--hc); }
.qd-sh.big .ico { width: 34px; height: 34px; }
.qd-bracket { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 14px; align-items: start; background: linear-gradient(160deg, color-mix(in srgb, #b5462e 8%, var(--sheet)), var(--sheet)); }
.qb-col { display: grid; gap: 8px; }
.qb-card { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; border: 0; background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.qb-card:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); }
.qb-card.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.qb-card.st-live { background: linear-gradient(90deg, color-mix(in srgb, #c4523f 10%, var(--sheet)), var(--sheet)); }
.qb-round { font-size: 12px; color: var(--ink-3, var(--ink-2)); display: flex; align-items: center; gap: 4px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #d64535; display: inline-block; animation: liveDot 1.2s ease-in-out infinite; }
@keyframes liveDot { 50% { opacity: .3; } }
.qb-team { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; font-size: 14.5px; }
.qb-team .num { font-weight: 800; }
.qb-team.win b, .qb-team.win .num { color: var(--ink); } .qb-team.lose { opacity: .5; }
.qb-team.mine b { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-underline-offset: 3px; }
.qb-cup { justify-items: center; text-align: center; padding: 10px; }
.qb-cup > .ico { width: 40px; height: 40px; color: #c08a12; }
.qd-board { gap: 12px; }
.qs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.qs-vs { align-self: center; font-weight: 800; color: var(--ink-3, var(--ink-2)); }
.qs-team { display: grid; justify-items: center; gap: 6px; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--hc) 16%, var(--sheet)), color-mix(in srgb, var(--hc) 4%, var(--sheet))); text-align: center; }
.qs-name { color: var(--hc); }
.qs-score { font-size: 40px; font-weight: 800; line-height: 1; color: var(--ink); }
.qs-clue { position: relative; width: 100%; height: 18px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.qs-clue i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #e2b94a, #f6d77a); }
.qs-clue span { position: relative; font-size: 11px; font-weight: 700; color: var(--ink); }
.qs-tok { color: var(--ink-2); } .qs-tok .ico { width: 12px; height: 12px; vertical-align: -2px; }
.qs-roster { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.qs-p { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, #fff 55%, transparent); color: var(--ink-2); }
.qs-p.me { box-shadow: inset 0 0 0 1.5px var(--hc); }
.qd-act { display: grid; gap: 8px; }
.qd-act.wait { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, var(--sheet)); }
.qd-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.qd-role { display: grid; gap: 3px; justify-items: start; text-align: left; padding: 12px; border-radius: 14px; border: 0; font: inherit; color: var(--ink); background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); cursor: pointer; }
.qd-role .ico { width: 20px; height: 20px; color: var(--accent); }
.qd-role:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-1px); }
.qd-role.mine { background: color-mix(in srgb, var(--accent) 10%, var(--sheet)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); }
.qd-ch { font-weight: 700; color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.qd-log { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.ql-row { display: grid; grid-template-columns: auto auto auto auto minmax(0, 1fr); gap: 6px; align-items: center; font-size: 13px; }
.ql-row .t { color: var(--ink-3, var(--ink-2)); font-size: 12px; } .ql-role { font-size: 12px; color: var(--ink-3, var(--ink-2)); }
.ql-txt.g-miss { color: var(--ink-3, var(--ink-2)); }
.qd-reg { gap: 10px; }
.qd-reg > .row b .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.qd-pos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.qd-pos-b { display: grid; gap: 2px; justify-items: start; padding: 10px 12px; border-radius: 12px; border: 0; font: inherit; color: var(--ink); background: color-mix(in srgb, var(--ink) 3%, var(--sheet)); cursor: pointer; text-align: left; }
.qd-pos-b .ico { width: 18px; height: 18px; color: var(--accent); }
.qd-pos-b.on { background: color-mix(in srgb, var(--accent) 14%, var(--sheet)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.qd-pos-b:disabled { opacity: .5; cursor: default; }
.qd-res .qd-res-t { font-size: 16px; font-weight: 700; }
.qd-tile .gt-art .ico { width: 40px; height: 40px; color: #b5462e; }
@media (max-width: 760px) { .qd-bracket { grid-template-columns: 1fr; } .qd-roles, .qd-pos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qs { grid-template-columns: 1fr; } .qs-vs { justify-self: center; } .qs-score { font-size: 32px; } }
.qb-card.tbd { cursor: default; opacity: .75; } .qb-card.tbd .qd-sh .ico { fill: #bbb; stroke: #bbb; }
.qd-left { display: flex; align-items: center; gap: 8px; }
.qd-pips { display: flex; gap: 3px; flex: 1; max-width: 260px; }
.qd-pips i { flex: 1; height: 8px; border-radius: 4px; background: var(--accent); }
.qd-pips i.used { background: color-mix(in srgb, var(--ink) 12%, transparent); }

/* ===== 일정 ===== */
.house-tabs .chip .ico { width: 13px; height: 13px; vertical-align: -2px; }
.daily-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 4%, var(--sheet)); color: var(--ink-2); }
.dchip .ico { width: 12px; height: 12px; color: var(--accent); }
.ev-day { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.ev-day:first-of-type { border-top: 0; }
.ev-date { font-weight: 700; font-size: 14.5px; padding-top: 10px; }
.ev-list { display: grid; gap: 6px; }
.ev-row { display: grid; grid-template-columns: 48px 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.ev-time { font-weight: 700; color: var(--ink-2); }
.ev-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--sheet)); }
.ev-ico .ico { width: 15px; height: 15px; color: var(--accent); }
.ev-main { display: grid; gap: 2px; min-width: 0; } .ev-main .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-side { display: flex; align-items: center; gap: 6px; }
.ev-quidditch .ev-ico { background: color-mix(in srgb, #b5462e 14%, var(--sheet)); } .ev-quidditch .ev-ico .ico { color: #b5462e; }
.ev-term .ev-ico { background: color-mix(in srgb, #e2b94a 20%, var(--sheet)); } .ev-term .ev-ico .ico { color: #b07a00; }
.ev-official { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.ev-event .ev-ico { background: color-mix(in srgb, #3f9a62 14%, var(--sheet)); } .ev-event .ev-ico .ico { color: #3f9a62; }
.ev-row.mine { background: color-mix(in srgb, var(--accent) 6%, var(--sheet)); }
.ev-form { gap: 10px; } .ev-form > b .ico { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.ev-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 10px; }
#up-block .block-head h2 .ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; color: var(--accent); }
@media (max-width: 700px) { .ev-day { grid-template-columns: 1fr; gap: 6px; } .ev-date { padding-top: 0; } .ev-row { grid-template-columns: 44px minmax(0, 1fr); } .ev-ico { display: none; } .ev-side { grid-column: 2; flex-wrap: wrap; } .ev-grid { grid-template-columns: 1fr 1fr; } .ev-grid .field:first-child { grid-column: 1 / -1; } }

/* ===== 일정: 축제와 테마 일정은 귀엽게 ===== */
.daily-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -6px; }
.daily-line .daily-chips { margin: 0; }
.daily-line .dchip { font-size: 12px; padding: 2px 9px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-3, var(--ink-2)); }
.fest-card { --fc: #e8762c; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 22px;
  background: radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--fc) 30%, transparent), transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--fc) 22%, var(--sheet)), color-mix(in srgb, var(--fc) 6%, var(--sheet)));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fc) 40%, transparent); position: relative; overflow: hidden; }
.fest-card::after { content: "✦ ✧ ✦"; position: absolute; right: 18px; top: 8px; font-size: 12px; letter-spacing: 6px; color: color-mix(in srgb, var(--fc) 60%, transparent); }
.fest-art { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 26px; background: color-mix(in srgb, #fff 60%, color-mix(in srgb, var(--fc) 15%, var(--sheet))); }
.fest-art svg { width: 70px; height: 70px; overflow: visible; }
.fest-txt { display: grid; gap: 3px; min-width: 0; }
.fest-txt b { font-family: var(--f-display); font-size: 24px; color: color-mix(in srgb, var(--fc) 70%, var(--ink)); }
.fest-d { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--fc); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.fest-side { display: grid; justify-items: end; gap: 8px; }
.ev-row.themed { background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 16%, var(--sheet)), color-mix(in srgb, var(--fc) 4%, var(--sheet))); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fc) 30%, transparent); border-radius: 16px; }
.ev-row.themed .ev-main b { color: color-mix(in srgb, var(--fc) 70%, var(--ink)); }
.ev-art { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: color-mix(in srgb, #fff 60%, transparent); }
.ev-art svg { width: 32px; height: 32px; overflow: visible; }
.ev-row.themed { grid-template-columns: 48px 40px minmax(0, 1fr) auto; }
.ev-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-th { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 0; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink-2); background: color-mix(in srgb, var(--fc) 8%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 25%, transparent); }
.ev-th-art svg { width: 22px; height: 22px; display: block; }
.ev-th.on { background: color-mix(in srgb, var(--fc) 22%, var(--sheet)); box-shadow: inset 0 0 0 2px var(--fc); color: var(--ink); font-weight: 700; }
/* 살짝 움직이는 그림 */
.ea-bat { animation: eaFlap 1.2s ease-in-out infinite alternate; transform-origin: 38px 10px; transform-box: view-box; }
.ea-star { animation: gaTwinkle 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ea-boom { animation: eaBoom 1.6s ease-out infinite; transform-origin: 24px 24px; transform-box: view-box; }
.ea-heart { animation: eaBeat 1.1s ease-in-out infinite; transform-origin: 24px 26px; transform-box: view-box; }
.ea-flower { animation: eaSway 2.4s ease-in-out infinite alternate; transform-origin: 24px 20px; transform-box: view-box; }
.ea-float { animation: gaHop 1.4s ease-in-out infinite alternate; }
.ea-steam { animation: eaSteam 2s ease-in-out infinite; }
.ea-quill { animation: gaWiggle .8s ease-in-out infinite alternate; transform-origin: 38px 30px; transform-box: view-box; }
@keyframes eaFlap { to { transform: translateY(-3px) scaleY(.8); } }
@keyframes eaBoom { 0% { transform: scale(.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.05); opacity: .2; } }
@keyframes eaBeat { 50% { transform: scale(1.1); } }
@keyframes eaSway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes eaSteam { 0% { opacity: 0; transform: translateY(3px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .fest-art *, .ev-art *, .ev-th-art * { animation: none !important; } }
@media (max-width: 640px) { .fest-card { grid-template-columns: auto minmax(0, 1fr); } .fest-side { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; } .fest-art { width: 64px; height: 64px; } .fest-art svg { width: 52px; height: 52px; } .ev-row.themed { grid-template-columns: 44px minmax(0, 1fr); } .ev-art { display: none; } }
.qd-bar { flex: 1; max-width: 280px; height: 9px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; } .qd-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .4s; }

/* 합친 메뉴의 위쪽 작은 탭 */
.subtabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, var(--sheet)); justify-self: start; margin-bottom: -8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; position: relative; }
.subtabs button .ico { width: 15px; height: 15px; }
.subtabs button:hover { color: var(--ink); }
.subtabs button.on { background: var(--sheet); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.subtabs button.on .ico { color: var(--accent); }
.subtabs .badge { position: static; margin-left: 2px; }
.stage.in-mine .subtabs { background: #1c1c22; }

/* ===== 프로필: 체력·마력·기력 고르게 ===== */
.vitals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: none; margin: 8px 0 4px; }
.vitals > .small { grid-column: 1 / -1; }
.vt { grid-template-columns: 1fr auto; grid-template-areas: "k v" "bar bar"; gap: 4px 8px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 3%, var(--sheet)); }
.vt > .vt-k { grid-area: k; } .vt > .vt-bar { grid-area: bar; height: 8px; } .vt > :last-child:not(.vt-bar):not(.vt-k) { grid-area: v; font-family: var(--f-mono); font-weight: 700; }
.prof-main .fat { max-width: none; }
@media (max-width: 560px) { .vitals { grid-template-columns: 1fr; } }

/* ===== 우편: 교무실 편지와 운영진 선물 ===== */
.post-box .letter.official { background: linear-gradient(90deg, color-mix(in srgb, #e2b94a 18%, var(--sheet)), color-mix(in srgb, #e2b94a 4%, var(--sheet))) !important; box-shadow: inset 3px 0 0 #c99a2e !important; }
.off-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #7a5410; background: color-mix(in srgb, #f6d77a 60%, var(--sheet)); }
.off-tag .ico { width: 11px; height: 11px; }
.gift-list { display: grid; gap: 0; border-bottom: 1px solid var(--rule); }
.gift-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: linear-gradient(90deg, color-mix(in srgb, #e2b94a 22%, var(--sheet)), color-mix(in srgb, #e2b94a 6%, var(--sheet))); border-top: 1px solid color-mix(in srgb, #c99a2e 20%, transparent); }
.gift-row .grow { display: grid; gap: 1px; min-width: 0; }
.gift-row b { color: #7a5410; }
.gift-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #f6d77a, #e2b94a); }
.gift-ico .ico { width: 17px; height: 17px; color: #6b4300; }

/* ===== 가방: 물건·장비 큰 카드 ===== */
.bag-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bag-tab { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; background: color-mix(in srgb, var(--ink) 3%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); opacity: .75; transition: opacity .15s, transform .15s, box-shadow .15s; }
.bag-tab:hover { opacity: 1; transform: translateY(-1px); }
.bag-tab.on { opacity: 1; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--sheet)), var(--sheet)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 4px 14px color-mix(in srgb, var(--accent) 14%, transparent); }
.bt-art { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: color-mix(in srgb, #fff 55%, var(--sheet)); }
.bt-art svg { width: 54px; height: 54px; overflow: visible; }
.bag-tab.on .bt-art svg { animation: gaHop .7s ease-in-out infinite alternate; }
.bt-txt { display: grid; gap: 2px; min-width: 0; }
.bt-txt b { font-size: 18px; } .bt-txt .small { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-warn { color: var(--bad) !important; font-weight: 700; }
.bt-spark { animation: gaTwinkle 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .bag-tab * { animation: none !important; } }
@media (max-width: 560px) { .bag-tabs { gap: 8px; } .bag-tab { padding: 10px; gap: 10px; } .bt-art { width: 48px; height: 48px; } .bt-art svg { width: 40px; height: 40px; } .bt-txt b { font-size: 14.5px; } }

/* ===== 접고 펴는 칸 ===== */
.block.fold { gap: 0; border-radius: 16px; background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); padding: 0; overflow: hidden; }
.fold-head { display: flex; align-items: center; gap: 8px; padding-right: 12px; }
.fold-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.fold-btn h2 { font-size: 18px; margin: 0; flex: none; }
.fold-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, var(--sheet)); }
.fold-ico .ico { width: 16px; height: 16px; color: var(--accent); }
.fold-sum { flex: 1; min-width: 0; color: var(--ink-3, var(--ink-2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-chev { flex: none; margin-left: auto; transition: transform .2s; color: var(--ink-3, var(--ink-2)); }
.fold-chev .ico { width: 16px; height: 16px; transform: rotate(180deg); display: block; }
.block.fold.open .fold-chev { transform: rotate(180deg); }
.block.fold:not(.open):hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.fold-body { display: grid; gap: 10px; padding: 0 16px 16px; animation: foldIn .2s ease-out; }
@keyframes foldIn { from { opacity: 0; transform: translateY(-4px); } }
.fold-body .ev-row, .fold-body .qrow, .fold-body .bet-row, .fold-body .next { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.post-compose .toggle { flex-wrap: wrap; gap: 6px 10px; }
.post-compose .toggle input[type=checkbox] { width: 18px; height: 18px; flex: none; }
.post-compose .toggle .faint { flex: 1 1 160px; }
.post-box > .gift-list { min-height: 0; max-height: none; overflow: visible; flex: none; }
@media (max-width: 560px) { .bt-txt .small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; line-height: 1.35; } }

/* ---------- 게시판 ---------- */
.dotsep { opacity: .4; margin: 0 5px; }
.bd-filter .chip .ico { width: 13px; height: 13px; color: var(--kc, currentColor); }
.bd-list { display: grid; gap: 10px; margin: 12px 0; }
.bd-card { --kc: #4f9a6a; background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--kc); border-radius: 14px; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.bd-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.bd-card.open { border-color: color-mix(in srgb, var(--kc) 45%, var(--rule)); box-shadow: 0 4px 16px color-mix(in srgb, var(--kc) 12%, transparent); }
.bd-card.official { background: linear-gradient(90deg, color-mix(in srgb, #e2b94a 14%, var(--sheet)), var(--sheet)); }
.bd-card.st-past, .bd-card.st-closed { opacity: .62; }
.bd-head { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.bd-kind { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--kc) 14%, var(--sheet)); color: var(--kc); }
.bd-kind .ico { width: 19px; height: 19px; }
.bd-kind.sm { width: 30px; height: 30px; border-radius: 9px; } .bd-kind.sm .ico { width: 15px; height: 15px; }
.bd-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.bd-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bd-tag { font-size: 12px; font-weight: 700; color: var(--kc); }
.bd-st { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--kc) 12%, transparent); color: var(--kc); }
.st-full .bd-st, .st-closed .bd-st, .st-past .bd-st { background: var(--sheet-2); color: var(--ink-3, #888); }
.bd-title { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.bd-meta { display: flex; align-items: center; flex-wrap: wrap; color: var(--ink-2); gap: 0; }
.bd-meta .ico { width: 12px; height: 12px; vertical-align: -1px; }
.bd-peek { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.bd-who { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: color-mix(in srgb, var(--hc) 75%, var(--ink)); }
.bd-who .ico { width: 12px; height: 12px; color: var(--hc); }
.bd-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bd-cc { color: var(--ink-3, #999); display: inline-flex; align-items: center; gap: 3px; } .bd-cc .ico { width: 12px; height: 12px; }
.bd-chev { color: var(--ink-3, #aaa); transform: rotate(180deg); transition: transform .2s; display: inline-flex; }
.bd-chev .ico { width: 14px; height: 14px; }
.bd-card.open .bd-chev { transform: none; }
.bd-seats { display: inline-flex; align-items: center; gap: 3px; }
.bd-seats b { font-size: 12px; margin-left: 3px; color: var(--kc, var(--accent)); }
.bd-seat { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--kc, var(--accent)) 60%, transparent); }
.bd-seat.on { background: var(--kc, var(--accent)); border-color: var(--kc, var(--accent)); }
.bd-body { padding: 0 14px 14px 64px; display: grid; gap: 12px; animation: foldIn .2s ease; }
.bd-text { margin: 0; white-space: pre-wrap; line-height: 1.65; overflow-wrap: anywhere; }
.bd-party { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--kc) 7%, var(--sheet)); }
.bd-members { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-mem { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: var(--sheet); border: 1px solid var(--rule); font-size: 13px; }
.bd-mem.empty { border-style: dashed; color: var(--ink-3, #aaa); background: transparent; }
.bd-mem .pill { font-size: 11px; padding: 0 6px; }
.bd-kick { border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink-3, #aaa); display: inline-flex; } .bd-kick .ico { width: 12px; height: 12px; }
.bd-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-cmts { display: grid; gap: 8px; border-top: 1px dashed var(--rule); padding-top: 10px; }
.bd-cmt { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--sheet-2); }
.bd-ctext { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; }
.bd-cform { display: flex; gap: 6px; } .bd-cform input { flex: 1; min-width: 0; }
.bd-form { display: grid; gap: 12px; margin-bottom: 12px; border-top: 4px solid var(--kc); }
.bd-form input, .bd-form select, .bd-form textarea { width: 100%; box-sizing: border-box; }
.bd-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-kbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; border: 1.5px solid color-mix(in srgb, var(--kc) 30%, var(--rule)); background: var(--sheet); color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; }
.bd-kbtn .ico { width: 15px; height: 15px; color: var(--kc); }
.bd-kbtn.on { background: var(--kc); border-color: var(--kc); color: #fff; font-weight: 700; } .bd-kbtn.on .ico { color: #fff; }
.bd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bd-mini { display: grid; gap: 6px; }
.bd-mrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--rule); border-left: 3px solid var(--kc); background: var(--sheet); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.bd-mrow:hover { background: color-mix(in srgb, var(--kc) 5%, var(--sheet)); }
.bd-mrow .grow { display: grid; gap: 1px; min-width: 0; } .bd-mrow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-party .ev-ico { color: #c4613a; }
@media (max-width: 700px) { .bd-grid { grid-template-columns: 1fr 1fr; } .bd-body { padding-left: 14px; } .bd-head { gap: 10px; padding: 11px 12px; } .bd-kind { width: 32px; height: 32px; border-radius: 10px; } .bd-title { font-size: 14.5px; } }

/* ---------- 장소 단락 색 (할 수 있는 일마다 다른 색) ---------- */

/* ---------- 귀여운 체크박스 · 스위치 · 드롭다운 · 슬라이더 ---------- */
input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; cursor: pointer;
  width: 20px; height: 20px; border-radius: 7px; position: relative;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--rule)); background: var(--sheet);
  transition: background .15s, border-color .15s, transform .15s; vertical-align: -4px;
}
input[type=checkbox]:hover { border-color: var(--accent); transform: scale(1.06); }
input[type=checkbox]::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: 5px; height: 10px;
  border: solid var(--on-accent, #fff); border-width: 0 2.5px 2.5px 0; border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg) scale(0); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); animation: cbPop .25s ease; }
input[type=checkbox]:checked::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
input[type=checkbox]:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
input[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }
@keyframes cbPop { 0% { transform: scale(.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.toggle input[type=checkbox] { width: 20px; height: 20px; }

/* 설정의 켜고 끄는 것은 동글동글 스위치 */
.toggle.sw input[type=checkbox] { width: 40px; height: 23px; border-radius: 99px; border: 0; background: color-mix(in srgb, var(--ink) 18%, var(--sheet)); }
.toggle.sw input[type=checkbox]::after {
  left: 3px; top: 3px; width: 17px; height: 17px; border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transform: none; transition: left .2s cubic-bezier(.3, 1.4, .5, 1);
}
.toggle.sw input[type=checkbox]:checked { background: var(--accent); animation: none; }
.toggle.sw input[type=checkbox]:checked::after { left: 20px; transform: none; }
.toggle.sw input[type=checkbox]:hover { transform: none; filter: brightness(1.05); }

/* 드롭다운: 둥근 모서리 + 작은 화살표 */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  border-radius: 12px; padding-right: 34px; font: inherit;
  background-color: var(--sheet);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23b8892a' fill-opacity='.16'/%3E%3Cpath d='M6.5 8.5 10 12l3.5-3.5' fill='none' stroke='%23a0701f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 20px;
  transition: border-color .15s, box-shadow .15s;
}
select:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); }
select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
select option { background: var(--sheet); color: var(--ink); }
input[type=text], input[type=date], input[type=time], input[type=password], input[type=number], input[type=search], input[type=url], textarea { border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type=password]:focus, input[type=number]:focus, input[type=search]:focus, input[type=url]:focus, textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; border-radius: 6px; padding: 2px; }
input[type=date]::-webkit-calendar-picker-indicator:hover, input[type=time]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* 슬라이더: 통통한 손잡이 */
input[type=range] { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 18%, var(--sheet-2)); cursor: pointer; border: 0; padding: 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--sheet); box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .15s; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--sheet); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
/* 색 고르기: 동그란 물감 */
input[type=color] { -webkit-appearance: none; appearance: none; width: 34px; height: 34px; border: 2px solid var(--rule); border-radius: 50%; padding: 2px; background: var(--sheet); cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; } input[type=color]::-moz-color-swatch { border: 0; border-radius: 50%; }

/* ---------- 퀴디치 경기장 ---------- */
.qd-board { padding-top: 0; overflow: hidden; }
.qd-stadium { position: relative; margin: 0 -16px; height: 300px; overflow: hidden; border-radius: 16px 16px 0 0; }
.qd-pitch-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.qd-flag { animation: qdFlag 1.6s ease-in-out infinite; }
@keyframes qdFlag { 50% { transform: skewY(-10deg) scaleX(.85); } }
.qd-flyer { animation: qdBob 3s ease-in-out infinite; }
.qd-flyer.ghost { opacity: .5; }
.qd-flyer.me circle { filter: drop-shadow(0 0 4px #ffe28a); }
@keyframes qdBob { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(6px, -7px); } 65% { transform: translate(-5px, 4px); } }
.qa-wing { animation: qdWing .18s linear infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes qdWing { to { transform: scaleY(.35); } }
.qd-snitch.caught { animation: qdGlow 1.4s ease-in-out infinite; }
@keyframes qdGlow { 50% { opacity: .7; } }
.qd-cloud { animation: qdCloud 40s linear infinite alternate; } .qd-cloud.c2 { animation-duration: 55s; }
@keyframes qdCloud { to { transform: translateX(60px); } }
.qd-star { animation: qdTwinkle 3s ease-in-out infinite; } @keyframes qdTwinkle { 50% { opacity: .25; } }
.qd-sb { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; padding: 8px 18px 10px; border-radius: 14px;
  background: linear-gradient(180deg, #5a3a22, #3e2716); color: #f7ecd2; box-shadow: 0 6px 18px rgba(0,0,0,.3), inset 0 0 0 2px #8a6038, inset 0 0 0 4px #3e2716; min-width: 320px; max-width: calc(100% - 24px); }
.qd-sb::before, .qd-sb::after { content: ""; position: absolute; top: -14px; width: 3px; height: 14px; background: #8a6038; } .qd-sb::before { left: 30%; } .qd-sb::after { right: 30%; }
.sb-round { font-size: 11px; letter-spacing: .12em; color: #f2c94c; font-weight: 800; }
.sb-row { display: flex; align-items: center; gap: 10px; }
.sb-team { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--hc) 55%, #3e2716); color: #fff; white-space: nowrap; }
.sb-team .qd-sh .ico { fill: #fff; stroke: #fff; width: 14px; height: 14px; }
.sb-score { font-family: var(--f-mono); font-size: 32px; font-weight: 800; line-height: 1; min-width: 46px; text-align: center; color: #fff6d8; text-shadow: 0 0 10px rgba(242, 201, 76, .45); padding: 2px 6px; border-radius: 8px; background: #2a190d; }
.sb-colon { font-size: 24px; font-weight: 800; color: #f2c94c; }
.sb-state { color: #e9d9b5; display: inline-flex; align-items: center; gap: 5px; }
.qd-stadium + .qs { margin-top: 2px; }
.qs-team { border: 2px solid color-mix(in srgb, var(--hc) 35%, transparent); position: relative; overflow: hidden; }
.qs-team::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: repeating-linear-gradient(90deg, var(--hc) 0 14px, #f2c94c 14px 20px); }
.qs-vs { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f6d77a, #c99a2e); color: #5a3a10; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
/* 포지션 카드 */
.qr-art { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--qc, #5fa54a) 14%, var(--sheet)); }
.qr-art svg { width: 32px; height: 32px; }
.qd-role, .qd-pos-b { --qc: #5fa54a; border: 1.5px solid color-mix(in srgb, var(--qc) 30%, var(--rule)) !important; background: linear-gradient(160deg, color-mix(in srgb, var(--qc) 9%, var(--sheet)), var(--sheet)) !important; }
.qr-chaser, .qd-pos-b[data-arg=chaser] { --qc: #c4423b; } .qr-keeper, .qd-pos-b[data-arg=keeper] { --qc: #c99a2e; } .qr-beater, .qd-pos-b[data-arg=beater] { --qc: #4a4a58; } .qr-seeker, .qd-pos-b[data-arg=seeker] { --qc: #e2a92a; }
.qd-role:hover { transform: translateY(-2px); box-shadow: 0 6px 14px color-mix(in srgb, var(--qc) 25%, transparent) !important; }
.qd-role.mine, .qd-pos-b.on { border-color: var(--qc) !important; box-shadow: inset 0 0 0 1.5px var(--qc) !important; }
.qd-role .qd-ch { color: color-mix(in srgb, var(--qc) 80%, var(--ink)); }
/* 대진표: 초록 잔디판 */
.qd-bracket { background: repeating-linear-gradient(90deg, #4f9a42 0 48px, #47903b 48px 96px) !important; border: 3px solid #e9f2dc; box-shadow: inset 0 0 0 2px #3f7f35; }
.qd-bracket .eyebrow { color: #f2f8e8; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.qd-bracket .qb-card { box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.qd-bracket .qb-cup { background: radial-gradient(circle at 50% 30%, rgba(255,240,180,.35), transparent 70%); border-radius: 14px; color: #fff; }
.qd-bracket .qb-cup .small.faint { color: #e6f0da; opacity: .9; }
.qd-bracket .qb-cup > .ico { color: #f6d15a; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.qd-bracket .qb-cup b { background: #fff; padding: 2px 10px; border-radius: 99px; }
/* 경기 마당 타일 */
.qd-tile .gt-art svg { width: 54px; height: 54px; }
.qa-snitch { animation: qdBob 2.4s ease-in-out infinite; }
@media (max-width: 760px) {
  .qd-stadium { height: 250px; }
  .qd-sb { min-width: 0; padding: 6px 10px 8px; top: 10px; }
  .sb-row { gap: 6px; } .sb-team { font-size: 12px; padding: 2px 7px; } .sb-team b { max-width: 4.5em; overflow: hidden; text-overflow: ellipsis; } .sb-score { font-size: 24px; min-width: 34px; } .sb-colon { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .qd-flyer, .qd-flag, .qa-wing, .qd-cloud, .qd-star, .qa-snitch { animation: none; } }
@media (max-width: 760px) {
  .qd-stadium { height: auto; display: grid; }
  .qd-pitch-art { position: static; height: auto; aspect-ratio: 800 / 300; }
  .qd-sb { position: relative; left: auto; top: auto; transform: none; margin: -26px auto 6px; justify-self: center; }
  .qd-sb::before, .qd-sb::after { display: none; }
}

/* ---------- 모든 메뉴의 맨 위 제목: 같은 모양 ---------- */
.page-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); min-width: 0; }
.ph-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--gc, var(--accent)) 14%, var(--sheet)); color: var(--gc, var(--accent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc, var(--accent)) 22%, transparent); }
.ph-ico .ico { width: 24px; height: 24px; }
.ph-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ph-txt h1 { font-size: clamp(22px, 3.2vw, 27px); line-height: 1.15; letter-spacing: -.01em; }
.ph-sub { font-size: 13px; color: var(--ink-3, var(--ink-2)); overflow: hidden; text-overflow: ellipsis; }
.ph-sub b { color: var(--ink-2); }
.ph-act { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ph-act:empty { display: none; }
.ph-act .small.faint, .ph-act .small { white-space: nowrap; }
.page-head + .subtabs, .page-head + .bag-tabs { margin-top: -6px; }
.subtabs { margin-bottom: 0; }
@media (max-width: 560px) {
  .page-head { gap: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  .ph-ico { width: 38px; height: 38px; border-radius: 11px; } .ph-ico .ico { width: 20px; height: 20px; }
  .ph-txt h1 { font-size: 20px; } .ph-sub { font-size: 12px; }
  .ph-act { flex-basis: 100%; justify-content: flex-start; }
}
.page-head.today-head { display: flex; }
@media (max-width: 560px) { .ph-act { flex-basis: auto; margin-left: auto; } .page-head.today-head .ph-act { flex-basis: 100%; margin-left: 0; } }
.page-head.today-head { justify-content: flex-start; align-items: center; gap: 14px; }
.page-head.today-head h1 { font-size: clamp(22px, 3.2vw, 27px); }
.page-head.today-head .ph-txt { flex: 1 1 auto; } .page-head.today-head .ph-act { margin-left: auto; }

/* ---------- 파티 레이드 (진행 중) ---------- */
.raid-live { display: grid; gap: 10px; }
.rp-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #b5462e; }
.rp-bar { flex: 1; min-width: 120px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.rp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c8413a, #e2a92a); border-radius: inherit; transition: width .6s; }
.rp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.rp-step { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: var(--sheet-2); border: 1px solid var(--rule); min-width: 0; }
.rp-step .rp-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.rp-txt { display: grid; min-width: 0; } .rp-txt b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-txt .small { color: var(--ink-3, var(--ink-2)); }
.rp-step.st-now { border-color: #c8413a; background: color-mix(in srgb, #c8413a 8%, var(--sheet)); } .rp-step.st-now .rp-n { background: #c8413a; color: #fff; animation: liveDot 1.4s ease-in-out infinite; }
.rp-step.st-done .rp-n { background: #4f9a42; color: #fff; } .rp-step.st-skip { opacity: .45; }
.rp-pick { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #e2a92a 12%, var(--sheet)); border: 1.5px dashed color-mix(in srgb, #c99a2e 60%, transparent); }
.rp-pick.wait, .rp-pick.done { border-style: solid; background: var(--sheet-2); border-color: var(--rule); }
.rp-pick b .ico { width: 15px; height: 15px; vertical-align: -2px; }
.rp-tacs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.rp-tac { display: grid; gap: 2px; text-align: left; padding: 9px 11px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--sheet); font: inherit; color: var(--ink); cursor: pointer; transition: transform .12s, border-color .12s; }
.rp-tac:hover { transform: translateY(-1px); border-color: #c99a2e; }
.rp-tac .small { color: var(--ink-2); }
.rp-log { max-height: 240px; overflow-y: auto; }
.ab-raid { --ab: #c8413a; }
.qd-role:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
/* 지난 이변: 한 줄 */
.inc-past { display: grid; gap: 4px; }
.inc-prow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--rule); background: var(--sheet); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.inc-prow:hover { background: var(--sheet-2); }
.ip-tag { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
.inc-prow.st-solved .ip-tag { background: color-mix(in srgb, #3f8a4f 16%, transparent); color: #2f7a40; }
.ip-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ip-main b { font-size: 14.5px; }
.ip-cred { flex: none; display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); } .ip-cred .ico { width: 12px; height: 12px; color: #c08a12; }
@media (max-width: 560px) { .ip-cred { display: none; } }
/* 일정의 '매일' 줄: 더 작게 */
.daily-line { gap: 6px; margin-top: -10px; }
.daily-line .eyebrow { font-size: 11px; }
.daily-line .daily-chips { gap: 3px; }
.daily-line .dchip { font-size: 11px; padding: 1px 7px; gap: 3px; box-shadow: none; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.daily-line .dchip .ico { width: 10px; height: 10px; }

/* ---------- 장소: 길드 게시판 ---------- */
/* 쪽지 색: 양피지 바탕에 어울리는 차분한 색 — 기본(갈색) · 모험(벽돌) · 취미(청회) · 배움(남보라) · 생활(호박) · 의뢰(올리브) · 그 밖(회색) */
[data-tone=explore], [data-tone=people] { --tone: #9a6b3f; }
[data-tone=party], [data-tone=mine], [data-tone=forge], [data-tone=quidditch] { --tone: #b0574a; }
[data-tone=fish], [data-tone=garden], [data-tone=cook] { --tone: #4f86a3; }
[data-tone=class], [data-tone=study], [data-tone=brew] { --tone: #6c6aa8; }
[data-tone=meal], [data-tone=rest], [data-tone=infirmary] { --tone: #c3873a; }
[data-tone=prophet], [data-tone=quest] { --tone: #8c7a3c; }
[data-tone=shop], [data-tone=game] { --tone: #a98a4e; }
[data-tone=doodle], [data-tone=owl] { --tone: #8d8a84; }
[data-tone=catalog] { --tone: #9a6a34; } [data-tone=frogbook] { --tone: #4f8a4a; } [data-tone=restricted] { --tone: #6e4a8e; } [data-tone=owls] { --tone: #8a6a40; } [data-tone=feathers] { --tone: #5a86a8; } [data-tone=anon] { --tone: #6e7fa8; }
.panel[data-tone], [data-tone]:not(.panel):not(.ptag):not(.gb-pin):not(.gb-open) > .panel { border: 1px solid var(--rule); border-left: 1px solid var(--rule); background: var(--sheet); }
.gboard { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background:
  radial-gradient(circle at 12% 18%, rgba(255,255,255,.18) 0 2px, transparent 3px) 0 0 / 22px 22px,
  linear-gradient(160deg, #c9a173, #b88c5e); box-shadow: inset 0 0 0 6px #8a6440, inset 0 0 0 7px #6e4f31, 0 6px 18px rgba(80, 50, 20, .15); }
.gb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 4px 6px 0; }
.gb-head h2 { font-size: 18px; color: #3d2814; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.gb-head .small { color: #4d3520; opacity: .85; }
.gb-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; padding: 4px; }
.gb-pin { position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px 8px 11px; border: 0; border-radius: 6px; cursor: pointer; font: inherit; color: #3a2a1a; text-align: center;
  background: linear-gradient(180deg, #fffaf0, #f6ecd6); box-shadow: 0 3px 6px rgba(60, 35, 10, .22); transform: rotate(var(--tilt, 0deg)); transition: transform .15s, box-shadow .15s; }
.gb-pin:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 8px 14px rgba(60, 35, 10, .25); }
.gb-pin.on { transform: rotate(0deg) translateY(-2px) scale(1.03); box-shadow: 0 0 0 3px var(--tone), 0 8px 16px rgba(60, 35, 10, .28); }
.gb-tack { position: absolute; top: 5px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 15%, var(--tone) 40%); box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.gb-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--tone) 16%, #fffaf0); color: var(--tone); }
.gb-ico .ico { width: 21px; height: 21px; }
.gb-pin b { font-size: 13px; line-height: 1.25; }
.gb-sub { font-size: 12px; color: #7a6650; line-height: 1.3; }
.gb-pin.hot .gb-sub { color: var(--tone); font-weight: 700; }
.gb-pin.hot::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #d64535; box-shadow: 0 0 0 3px rgba(214, 69, 53, .2); animation: liveDot 1.4s ease-in-out infinite; }
.gb-open { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: var(--sheet); box-shadow: 0 4px 14px rgba(60, 35, 10, .2), inset 0 3px 0 var(--tone); animation: foldIn .2s ease; }
.gb-open > .panel, .gb-open > div > .panel { box-shadow: none; }
.gb-open .panel[data-tone] > b:first-child, .gb-open .panel[data-tone] > .row:first-child > b { color: color-mix(in srgb, var(--tone) 75%, var(--ink)); }
:root[data-theme="dark"] .gboard { background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.06) 0 2px, transparent 3px) 0 0 / 22px 22px, linear-gradient(160deg, #4a3826, #3a2b1d); box-shadow: inset 0 0 0 6px #2a1f14, 0 6px 18px rgba(0,0,0,.4); }
:root[data-theme="dark"] .gb-pin { background: linear-gradient(180deg, #2e2a24, #26221d); color: var(--ink); }
:root[data-theme="dark"] .gb-sub { color: var(--ink-2); } :root[data-theme="dark"] .gb-head h2, :root[data-theme="dark"] .gb-head .small { color: #f0e2c8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gboard { background: linear-gradient(160deg, #4a3826, #3a2b1d); box-shadow: inset 0 0 0 6px #2a1f14; } :root:not([data-theme="light"]) .gb-pin { background: linear-gradient(180deg, #2e2a24, #26221d); color: var(--ink); } :root:not([data-theme="light"]) .gb-head h2, :root:not([data-theme="light"]) .gb-head .small { color: #f0e2c8; } }
@media (max-width: 560px) { .gboard { padding: 12px; } .gb-pins { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .gb-pin { padding: 13px 4px 8px; } .gb-ico { width: 32px; height: 32px; } .gb-ico .ico { width: 17px; height: 17px; } .gb-pin b { font-size: 12px; } .gb-sub { font-size: 11px; } .gb-open { padding: 10px; } }

/* ---------- 오늘: 더 촘촘하게, 할 일은 눈에 띄게 ---------- */
.view.pg-home { gap: 14px; }
.pg-home .fold-btn { padding: 10px 12px; }
.pg-home .fold-head h2 { font-size: 16px; }
.pg-home .fold-ico { width: 28px; height: 28px; }
.pg-home .next-list { gap: 6px; }
.pg-home .next { padding: 8px 12px; gap: 10px; }
.pg-home .next .grow b { font-size: 14.5px; }
.pg-home .next .small { font-size: 12px; }
.pg-home .notice-bar { padding: 8px 12px; }
#fold-checks { border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--rule)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--sheet)), var(--sheet)); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 10%, transparent); }
#fold-checks .fold-ico { background: var(--accent); color: var(--on-accent, #fff); }
#fold-checks .fold-ico .ico { color: inherit; }
.ck-sum { color: var(--accent); font-size: 14.5px; }
.ck-bar { display: inline-block; vertical-align: middle; width: 70px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; margin-left: 4px; }
.ck-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.pg-home .checks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pg-home .check { padding: 8px 10px; gap: 4px; border-radius: 12px; }
.pg-home .check .top { font-size: 13px; }
.pg-home .check.done { background: color-mix(in srgb, #3f8a4f 8%, var(--sheet)); border-color: color-mix(in srgb, #3f8a4f 30%, var(--rule)); }
.pg-home .timeline, .pg-home .tl { transform-origin: top left; }
.today-mini { gap: 14px; }
.today-mini > .block.fold { margin: 0; }
@media (max-width: 560px) { .pg-home .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .view.pg-home { gap: 12px; } }
.view > * { min-width: 0; }
.view { grid-template-columns: minmax(0, 1fr); }
.fold-btn { min-width: 0; } .fold-head { min-width: 0; }
.fold-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-home .fold-body { padding: 0 12px 12px; gap: 8px; }

/* ---------- 가게: 줄무늬 차양 · 간판 · 진열대 ---------- */
.shop-sec:not(.bag-sec) { position: relative; overflow: hidden; padding-top: 40px !important; border-radius: 16px 16px 12px 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 6%, var(--sheet)) 0%, color-mix(in srgb, var(--sc) 10%, var(--sheet)) 100%);
  border: 1px solid color-mix(in srgb, var(--sc) 30%, var(--rule)) !important; border-left-width: 1px !important;
  box-shadow: inset 0 -8px 0 color-mix(in srgb, #8a5a2b 55%, var(--sc)), inset 0 -10px 0 color-mix(in srgb, #000 15%, transparent); padding-bottom: 22px !important; }
/* 차양: 가게 색 줄무늬 + 아래쪽 물결 */
.shop-sec:not(.bag-sec)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px;
  background: repeating-linear-gradient(90deg, var(--sc) 0 22px, color-mix(in srgb, var(--sc) 12%, #fffaf0) 22px 44px);
  -webkit-mask: radial-gradient(circle 11px at 11px 15px, #000 98%, transparent) 0 0 / 22px 26px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 15px no-repeat;
          mask: radial-gradient(circle 11px at 11px 15px, #000 98%, transparent) 0 0 / 22px 26px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 15px no-repeat;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.12)); }
.shop-sec:not(.bag-sec)::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: color-mix(in srgb, var(--sc) 70%, #000); }
/* 간판: 가게 이름을 나무 판에 */
.shop-sec:not(.bag-sec) > .row:first-child > b, .shop-sec:not(.bag-sec) > .block-head h3 {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 8px; color: #fff8ea !important; font-family: var(--f-display);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 80%, #3a2210), color-mix(in srgb, var(--sc) 60%, #2a170a));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #f2c94c 55%, transparent), 0 2px 4px rgba(0,0,0,.18); text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.shop-sec:not(.bag-sec) > .row:first-child > b .hico, .shop-sec:not(.bag-sec) > .block-head h3 .hico { background: rgba(255,255,255,.18) !important; color: #fff8ea !important; }
.shop-sec:not(.bag-sec) > .row:first-child > b .ico { color: #fff8ea; }
/* 진열대: 물건 칸 아래에 선반 */
.shop-sec:not(.bag-sec) .goods, .shop-sec:not(.bag-sec) .shop-names { border-radius: 10px; box-shadow: 0 6px 0 -2px color-mix(in srgb, #a8703d 70%, var(--sc)), 0 8px 6px -4px rgba(0,0,0,.2); }
.shop-sec:not(.bag-sec) .shop-names { padding: 8px; background: color-mix(in srgb, #fffaf0 80%, var(--sc)); margin-bottom: 6px; }
.shop-sec.locked::before { filter: grayscale(1); }
:root[data-theme="dark"] .shop-sec:not(.bag-sec) .shop-names { background: color-mix(in srgb, var(--sheet-2) 85%, var(--sc)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shop-sec:not(.bag-sec) .shop-names { background: color-mix(in srgb, var(--sheet-2) 85%, var(--sc)); } }
@media (max-width: 560px) { .shop-sec:not(.bag-sec) { padding-top: 36px !important; } .shop-sec:not(.bag-sec)::before { height: 22px; } }

/* ---------- 장면 느낌: 정원 · 주방 · 호숫가 · 부엉이장 · 가방 속 · 둥지 ---------- */
.hobby-body.hb-garden, .hobby-body.hb-cook, .hobby-body.hb-fish { position: relative; padding: 16px; border-radius: 22px; }
.hobby-body.hb-garden { padding-top: 44px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg opacity='.5'%3E%3Ccircle cx='14' cy='18' r='3' fill='%23f2a7c0'/%3E%3Ccircle cx='10' cy='16' r='2.4' fill='%23f7c6d6'/%3E%3Ccircle cx='18' cy='16' r='2.4' fill='%23f7c6d6'/%3E%3Ccircle cx='14' cy='13' r='2.4' fill='%23f7c6d6'/%3E%3Ccircle cx='14' cy='16' r='1.6' fill='%23f6d15a'/%3E%3Ccircle cx='62' cy='58' r='2.4' fill='%23fff'/%3E%3Ccircle cx='58' cy='56' r='2.4' fill='%23fff'/%3E%3Ccircle cx='66' cy='56' r='2.4' fill='%23fff'/%3E%3Ccircle cx='62' cy='53' r='2.4' fill='%23fff'/%3E%3Ccircle cx='62' cy='56' r='1.5' fill='%23f6d15a'/%3E%3Cpath d='M40 80q2-6 4 0M70 20q2-6 4 0M20 60q2-5 4 0' stroke='%236aa84f' stroke-width='1.6' fill='none'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 90px 90px, linear-gradient(180deg, #eaf4dc 0%, #d8eac3 100%); box-shadow: inset 0 -10px 0 #b9d79a; }
.hobby-body.hb-garden::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34' viewBox='0 0 40 34'%3E%3Cpath d='M6 34V8l6-6 6 6v26z M26 34V8l6-6 6 6v26z' fill='%23fffaf0' stroke='%23c9b48a' stroke-width='1.2'/%3E%3Crect x='0' y='14' width='40' height='5' fill='%23f3ead6' stroke='%23c9b48a' stroke-width='1'/%3E%3Crect x='0' y='25' width='40' height='5' fill='%23f3ead6' stroke='%23c9b48a' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 40px 34px repeat-x; opacity: .95; }
.hobby-body.hb-cook { padding-top: 70px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' fill='%23f7f1e3'/%3E%3Crect width='18' height='18' fill='%23e3edf2'/%3E%3Crect x='18' y='18' width='18' height='18' fill='%23e3edf2'/%3E%3Cpath d='M0 0H36V36H0Z M18 0V36 M0 18H36' stroke='%23d6cdb8' stroke-width='1' fill='none'/%3E%3Ccircle cx='9' cy='9' r='2' fill='%239fbccc' opacity='.6'/%3E%3Ccircle cx='27' cy='27' r='2' fill='%239fbccc' opacity='.6'/%3E%3C/svg%3E") 0 0 / 36px 36px; box-shadow: inset 0 -14px 0 #9a6b3f, inset 0 -18px 0 #7a5230; padding-bottom: 28px; }
.hobby-body.hb-cook::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='60' viewBox='0 0 220 60'%3E%3Cpath d='M0 6H220' stroke='%237a5230' stroke-width='4'/%3E%3Cg%3E%3Cpath d='M30 6v10' stroke='%23555' stroke-width='1.5'/%3E%3Ccircle cx='30' cy='30' r='14' fill='%23c9773f'/%3E%3Ccircle cx='30' cy='30' r='10' fill='%23b0612e'/%3E%3Cpath d='M30 16v-2' stroke='%23c9773f' stroke-width='4'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M95 6v6' stroke='%23555' stroke-width='1.5'/%3E%3Cpath d='M85 12h20l-3 26h-14z' fill='%238a8f96'/%3E%3Cpath d='M83 12h24' stroke='%236b7075' stroke-width='3'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M160 6v14' stroke='%23555' stroke-width='1.5'/%3E%3Cellipse cx='160' cy='38' rx='16' ry='12' fill='%23c9773f'/%3E%3Cpath d='M160 26v-6' stroke='%23c9773f' stroke-width='4'/%3E%3Cellipse cx='160' cy='36' rx='10' ry='7' fill='%23b0612e'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M200 6v8' stroke='%23555' stroke-width='1.5'/%3E%3Cpath d='M193 14h14v18a7 7 0 0 1-14 0z' fill='%23d9c7a1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 60px repeat-x; }
.hobby-body.hb-fish { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cpath d='M10 20q10-6 20 0t20 0M70 44q10-6 20 0t20 0' stroke='%237fb3cf' stroke-width='1.5' fill='none' opacity='.45'/%3E%3C/svg%3E") 0 0 / 120px 60px, linear-gradient(180deg, #e3f0f6, #cfe3ee); }
.hobby-body > .panel, .hobby-body > .hero, .hobby-body > div { position: relative; }
/* 우편: 돌벽 부엉이장, 횃대 위 부엉이 */
.view[data-page=post] .post-layout, .view[data-page=post] > .page-head + * { }
.view[data-page=post] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23b9ae9a' stroke-width='1.2' opacity='.55'%3E%3Cpath d='M0 0h58v28H0zM62 0h58v28H62zM-30 32h58v28h-58zM32 32h58v28H32zM94 32h58v28H94z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 60px; background-color: transparent; border-radius: 0; }
.view[data-page=post] .page-head { position: relative; }
.view[data-page=post] .page-head::after { content: ""; position: absolute; right: 0; bottom: -6px; width: 300px; height: 70px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='70' viewBox='0 0 300 70'%3E%3Cpath d='M0 58H300' stroke='%237a5230' stroke-width='5' stroke-linecap='round'/%3E%3Cg fill='%238a6a4a'%3E%3Cpath d='M40 58c-10 0-14-10-14-20 0-8 4-14 14-14s14 6 14 14c0 10-4 20-14 20z'/%3E%3Cpath d='M28 26l4 6M52 26l-4 6' stroke='%238a6a4a' stroke-width='4'/%3E%3C/g%3E%3Ccircle cx='35' cy='36' r='4' fill='%23fff6d8'/%3E%3Ccircle cx='45' cy='36' r='4' fill='%23fff6d8'/%3E%3Ccircle cx='35' cy='36' r='2' fill='%233a2a1a'/%3E%3Ccircle cx='45' cy='36' r='2' fill='%233a2a1a'/%3E%3Cpath d='M38 42l2 3 2-3z' fill='%23e2a92a'/%3E%3Cg fill='%23c9c2b2'%3E%3Cpath d='M150 58c-9 0-12-9-12-17 0-7 4-12 12-12s12 5 12 12c0 8-3 17-12 17z'/%3E%3C/g%3E%3Ccircle cx='146' cy='40' r='3.5' fill='%23fff'/%3E%3Ccircle cx='154' cy='40' r='3.5' fill='%23fff'/%3E%3Ccircle cx='146' cy='40' r='1.8' fill='%23333'/%3E%3Ccircle cx='154' cy='40' r='1.8' fill='%23333'/%3E%3Cpath d='M148 45l2 3 2-3z' fill='%23e2a92a'/%3E%3Cg transform='translate(232 30) rotate(-8)'%3E%3Crect x='0' y='0' width='30' height='20' rx='2' fill='%23fffaf0' stroke='%23c9b48a'/%3E%3Cpath d='M0 0l15 11 15-11' fill='none' stroke='%23c9b48a'/%3E%3Ccircle cx='15' cy='12' r='3.5' fill='%23b0574a'/%3E%3C/g%3E%3C/svg%3E") right bottom / contain no-repeat; pointer-events: none; }
.view[data-page=post] .page-head .ph-act { margin-right: 300px; }
.view[data-page=post] .post-compose, .view[data-page=post] .post-box { box-shadow: 0 6px 18px rgba(70, 55, 35, .16); background-image: linear-gradient(180deg, #fffdf6, #fbf3e2); }
/* 가방: 가죽 가방 속 */
.view[data-page=bag] .bag-sec { position: relative; padding: 18px 16px 16px; border-radius: 26px 26px 22px 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23000' opacity='.06'%3E%3Ccircle cx='8' cy='12' r='1.2'/%3E%3Ccircle cx='30' cy='6' r='1'/%3E%3Ccircle cx='48' cy='20' r='1.3'/%3E%3Ccircle cx='20' cy='40' r='1.1'/%3E%3Ccircle cx='42' cy='48' r='1'/%3E%3Ccircle cx='54' cy='38' r='.9'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 60px 60px, radial-gradient(ellipse at 50% 0%, #6b4428 0%, #4e3019 70%); box-shadow: inset 0 0 0 6px #8a5a33, inset 0 0 0 7px #3a2210, 0 8px 18px rgba(60,35,15,.25); outline: 2px dashed rgba(255, 228, 180, .55); outline-offset: -12px; }
.view[data-page=bag] .bag-sec .empty { color: #f3e3c6; }
.view[data-page=bag] .bag-sec .goods-grid { position: relative; z-index: 1; }
/* 생물: 짚을 깐 둥지 */
.view[data-page=creatures] .cr-grid { padding: 16px; border-radius: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg stroke='%23d9b469' stroke-width='1.6' opacity='.5' stroke-linecap='round'%3E%3Cpath d='M2 10q18-8 36 2M40 30q18-8 36 2M20 22q14 6 30-4M60 8q10 6 18 0'/%3E%3C/g%3E%3Cg stroke='%23b98f45' stroke-width='1.2' opacity='.4' stroke-linecap='round'%3E%3Cpath d='M10 34q10-6 22 0M50 18q12-4 24 2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 80px 40px, radial-gradient(ellipse at 50% 30%, #fbf1d9, #f0dcae); box-shadow: inset 0 0 0 3px #d9b469, inset 0 -12px 18px rgba(150, 100, 40, .18); }
.view[data-page=creatures] .page-head { position: relative; }
.view[data-page=creatures] .page-head::after { content: ""; position: absolute; right: 4px; bottom: 2px; width: 160px; height: 60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60' viewBox='0 0 160 60'%3E%3Cellipse cx='80' cy='40' rx='70' ry='16' fill='%23c79a5a'/%3E%3Cg stroke='%238a6030' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Cpath d='M14 38q30-14 66-4t66 0'/%3E%3Cpath d='M20 46q30 8 60 0t60 2'/%3E%3Cpath d='M30 32q20 10 50 4M90 30q20 8 46 6'/%3E%3C/g%3E%3Cellipse cx='80' cy='32' rx='52' ry='9' fill='%235a3a1a' opacity='.55'/%3E%3Cellipse cx='66' cy='26' rx='10' ry='13' fill='%23f3ead6'/%3E%3Cellipse cx='88' cy='27' rx='9' ry='12' fill='%23e8d3f0'/%3E%3Cellipse cx='62' cy='21' rx='3' ry='4' fill='%23fff' opacity='.7'/%3E%3C/svg%3E") right bottom / contain no-repeat; pointer-events: none; }
.view[data-page=creatures] .page-head .ph-act { margin-right: 160px; }
@media (max-width: 560px) { .view[data-page=post] .page-head::after { width: 150px; height: 36px; bottom: -2px; } .view[data-page=post] .page-head .ph-act { margin-right: 0; } .view[data-page=creatures] .page-head::after { width: 90px; height: 34px; } .view[data-page=creatures] .page-head .ph-act { margin-right: 0; } .hobby-body.hb-cook { padding-top: 62px; } }
:root[data-theme="dark"] .hobby-body.hb-garden { background: linear-gradient(180deg, #24321f, #1d2a19); box-shadow: inset 0 -10px 0 #2f4527; }
:root[data-theme="dark"] .hobby-body.hb-cook { background: linear-gradient(180deg, #2c2a27, #24221f); }
:root[data-theme="dark"] .hobby-body.hb-fish { background: linear-gradient(180deg, #1c2a33, #18242c); }
:root[data-theme="dark"] .view[data-page=post] .post-compose, :root[data-theme="dark"] .view[data-page=post] .post-box { background-image: none; }
:root[data-theme="dark"] .view[data-page=creatures] .cr-grid { background: linear-gradient(180deg, #3a2f1e, #2e2517); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hobby-body.hb-garden { background: linear-gradient(180deg, #24321f, #1d2a19); box-shadow: inset 0 -10px 0 #2f4527; } :root:not([data-theme="light"]) .hobby-body.hb-cook { background: linear-gradient(180deg, #2c2a27, #24221f); } :root:not([data-theme="light"]) .hobby-body.hb-fish { background: linear-gradient(180deg, #1c2a33, #18242c); } :root:not([data-theme="light"]) .view[data-page=post] .post-compose, :root:not([data-theme="light"]) .view[data-page=post] .post-box { background-image: none; } :root:not([data-theme="light"]) .view[data-page=creatures] .cr-grid { background: linear-gradient(180deg, #3a2f1e, #2e2517); } }
/* 장소: 제목 옆 큰 '여기 / 지도' */
.ph-tabs { display: inline-flex; gap: 6px; padding: 5px; border-radius: 18px; background: color-mix(in srgb, var(--ink) 6%, var(--sheet)); margin-left: auto; }
.ph-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: 0; border-radius: 14px; background: transparent; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, transform .12s; }
.ph-tabs button .ico { width: 20px; height: 20px; }
.ph-tabs button:hover { color: var(--ink); transform: translateY(-1px); }
.ph-tabs button.on { background: var(--sheet); color: var(--gc, var(--accent)); box-shadow: 0 2px 8px rgba(0,0,0,.1), inset 0 0 0 1.5px color-mix(in srgb, var(--gc, var(--accent)) 40%, transparent); }
.page-head.has-tabs .ph-act { margin-left: 0; }
@media (max-width: 560px) { .ph-tabs { margin-left: 0; flex-basis: 100%; } .ph-tabs button { flex: 1; justify-content: center; padding: 10px 12px; font-size: 14.5px; } }
.lk-wave { animation: lkWave 4s ease-in-out infinite; } @keyframes lkWave { 50% { transform: translateX(6px); } }
.lk-squid { animation: lkSquid 6s ease-in-out infinite; transform-origin: 116px 104px; } @keyframes lkSquid { 0%, 100% { transform: rotate(-4deg) translateY(4px); } 50% { transform: rotate(6deg) translateY(0); } }
.lk-boat { animation: lkBoat 5s ease-in-out infinite; } @keyframes lkBoat { 50% { transform: translate(-4px, 1.5px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .lk-wave, .lk-squid, .lk-boat { animation: none; } }
.rp-foot { gap: 8px; flex-wrap: wrap; }
.rp-run { background: color-mix(in srgb, #c8413a 10%, var(--sheet)); color: #b0372f; border: 1px solid color-mix(in srgb, #c8413a 35%, transparent); }
.rp-run .ico { width: 14px; height: 14px; }

.view[data-page=creatures] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23c9a46a' opacity='.16'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='36' cy='36' r='2'/%3E%3Cpath d='M36 8l1.5 3 3 1.5-3 1.5-1.5 3-1.5-3-3-1.5 3-1.5z'/%3E%3Cpath d='M12 32l1.2 2.4 2.4 1.2-2.4 1.2-1.2 2.4-1.2-2.4-2.4-1.2 2.4-1.2z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 48px 48px; }
.view[data-page=creatures] .panel.quiet-inc, .view[data-page=creatures] .cr-empty { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg stroke='%23d9b469' stroke-width='1.6' opacity='.5' stroke-linecap='round'%3E%3Cpath d='M2 10q18-8 36 2M40 30q18-8 36 2M20 22q14 6 30-4M60 8q10 6 18 0'/%3E%3C/g%3E%3Cg stroke='%23b98f45' stroke-width='1.2' opacity='.4' stroke-linecap='round'%3E%3Cpath d='M10 34q10-6 22 0M50 18q12-4 24 2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 80px 40px, radial-gradient(ellipse at 50% 40%, #fbf1d9, #f0dcae); box-shadow: inset 0 0 0 3px #d9b469, inset 0 -12px 18px rgba(150,100,40,.18); border-radius: 26px; border: 0; }
:root[data-theme="dark"] .view[data-page=creatures] .panel.quiet-inc { background: linear-gradient(180deg, #3a2f1e, #2e2517); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .view[data-page=creatures] .panel.quiet-inc { background: linear-gradient(180deg, #3a2f1e, #2e2517); } }
@media (max-width: 560px) { .view[data-page=post] .page-head::after { display: none; } }
/* 지도: 구역 칩과 '그림/목록' 전환을 한 줄 도구막대로 */
.map-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.map-secs { flex: 1; min-width: 0; }
.me-chip .ico { width: 13px; height: 13px; vertical-align: -2px; }
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, var(--sheet)); flex: none; }
.seg button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.seg button .ico { width: 14px; height: 14px; }
.seg button.on { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
@media (max-width: 560px) { .map-bar { flex-direction: column-reverse; align-items: stretch; } .seg { align-self: flex-end; } }

/* 취미 세 칸: 같은 틀(위쪽 장식 띠 높이·여백·그림 높이를 맞춤) */
.hobby-body.hb-garden, .hobby-body.hb-cook, .hobby-body.hb-fish { padding: 54px 16px 22px !important; min-height: 560px; align-content: start; }
.hobby-body.hb-garden::before, .hobby-body.hb-cook::before, .hobby-body.hb-fish::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 42px; background-repeat: repeat-x !important; }
.hobby-body.hb-garden::before { background-size: auto 42px !important; }
.hobby-body.hb-cook::before { top: 0; background-size: auto 46px !important; }
.hobby-body.hb-fish::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 34q10-4 20 0t20 0t20 0t20 0t20 0t20 0' stroke='%237fb3cf' stroke-width='2' fill='none' opacity='.7'/%3E%3Cg stroke='%235f8f4a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 36V14M19 36V8M24 36V18'/%3E%3Cpath d='M84 36V16M90 36V10'/%3E%3C/g%3E%3Cg fill='%238a5a2b'%3E%3Cellipse cx='19' cy='10' rx='2' ry='5'/%3E%3Cellipse cx='90' cy='12' rx='2' ry='5'/%3E%3C/g%3E%3Ccircle cx='54' cy='26' r='3' fill='%23f2c94c'/%3E%3Cpath d='M54 23v-6' stroke='%23888' stroke-width='1'/%3E%3C/svg%3E") 0 0 / auto 42px repeat-x; }
.hobby-body.hb-cook { box-shadow: inset 0 -14px 0 #9a6b3f, inset 0 -18px 0 #7a5230; }
.hobby-body.hb-fish { box-shadow: inset 0 -10px 0 #9cc3d8; }
.hobby-body > .hero { height: 184px; min-height: 184px; }
.hobby-body > .hero .hero-txt { overflow: hidden; }
@media (max-width: 640px) { .hobby-body.hb-garden, .hobby-body.hb-cook, .hobby-body.hb-fish { min-height: 0; padding: 50px 10px 18px !important; } .hobby-body > .hero { height: 150px; min-height: 150px; } }
/* 다른 가게: 소박한 목록 */
.shop-list { gap: 8px; }
.shop-list .eyebrow { margin-top: 6px; }
.shop-lines { display: grid; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--sheet); }
.shop-line { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--rule); min-width: 0; }
.shop-line:first-child { border-top: 0; }
.sl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); opacity: .8; }
.sl-main { flex: 1; min-width: 0; display: grid; gap: 1px; } .sl-main b { font-size: 14.5px; } .sl-main b .ico { width: 12px; height: 12px; vertical-align: -1px; }
.sl-main .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-side { flex: none; }
.shop-line.locked { opacity: .55; } .shop-line.locked .sl-dot { background: #9a9ca3; }

/* ---------- 장비: 나무 옷장, 옷걸이에 걸린 장비 ---------- */
.view[data-page=gear] .gear-grid { position: relative; padding: 58px 18px 22px; border-radius: 16px 16px 8px 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='120' viewBox='0 0 90 120'%3E%3Crect width='90' height='120' fill='%238a5a33'/%3E%3Cg stroke='%236e4626' stroke-width='1.4' fill='none' opacity='.55'%3E%3Cpath d='M8 0q6 30 0 60t0 60M30 0q-5 40 2 70t-2 50M52 0q6 25 0 55t2 65M74 0q-6 35 0 65t0 55'/%3E%3C/g%3E%3Cg stroke='%23a8703d' stroke-width='1' fill='none' opacity='.5'%3E%3Cpath d='M18 0q4 30-2 60t2 60M62 0q-4 30 2 60t-2 60'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 90px 120px; box-shadow: inset 0 0 0 8px #6e4626, inset 0 0 0 10px #4e3019, inset 0 18px 24px rgba(0,0,0,.25), 0 8px 18px rgba(60,35,15,.2); gap: 30px 14px; }
.view[data-page=gear] .gear-grid::before { content: ""; position: absolute; left: 18px; right: 18px; top: 26px; height: 7px; border-radius: 99px; background: linear-gradient(180deg, #e9edf2, #9aa2ad); box-shadow: 0 2px 3px rgba(0,0,0,.35); }
.view[data-page=gear] .gear-grid::after { content: "옷장"; position: absolute; left: 50%; top: 4px; transform: translateX(-50%); padding: 1px 14px; border-radius: 0 0 8px 8px; background: #4e3019; color: #f3e3c6; font-size: 11px; letter-spacing: .2em; font-weight: 700; }
.view[data-page=gear] .gear-grid > * { position: relative; overflow: visible; box-shadow: 0 6px 14px rgba(0,0,0,.28); }
.view[data-page=gear] .gear-grid > *::before { content: ""; position: absolute; left: 50%; top: -27px; width: 60px; height: 26px; margin-left: -30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='26' viewBox='0 0 60 26'%3E%3Cpath d='M30 2a4 4 0 1 1 4 4c-2 0-4 2-4 4v2' fill='none' stroke='%23b8bcc4' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M30 12L6 23h48z' fill='none' stroke='%239c7b4f' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 560px) { .view[data-page=gear] .gear-grid { padding: 54px 10px 16px; } }

/* ---------- 생물: 포근한 바구니 둥지(글씨는 깨끗한 바탕 위에) ---------- */
.view[data-page=creatures] { background: none; }
.view[data-page=creatures] .cr-grid { position: relative; padding: 18px 16px 44px; border-radius: 22px; background: linear-gradient(180deg, #fffaf0, #fbf1dc) !important; box-shadow: inset 0 0 0 1px #ead8b4 !important; }
.view[data-page=creatures] .cr-grid::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; border-radius: 0 0 22px 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='26' viewBox='0 0 28 26'%3E%3Crect width='28' height='26' fill='%23c99a5a'/%3E%3Cpath d='M0 6q7 8 14 0t14 0M0 14q7 8 14 0t14 0M0 22q7 8 14 0t14 0' stroke='%23a8743a' stroke-width='3' fill='none'/%3E%3Cpath d='M0 6q7 8 14 0t14 0' stroke='%23e2bd82' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 0 0 / 28px 26px repeat-x; box-shadow: inset 0 3px 0 #e2bd82; }
.view[data-page=creatures] .cr-grid > * { position: relative; z-index: 1; }
.view[data-page=creatures] .panel.quiet-inc { background: var(--sheet) !important; box-shadow: inset 0 0 0 1px var(--rule) !important; border-radius: 18px; padding-top: 92px; position: relative; text-align: center; justify-items: center; }
.view[data-page=creatures] .panel.quiet-inc::before { content: ""; position: absolute; left: 50%; top: 14px; width: 140px; height: 70px; margin-left: -70px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70' viewBox='0 0 140 70'%3E%3Cellipse cx='70' cy='60' rx='58' ry='6' fill='%23000' opacity='.08'/%3E%3Cellipse cx='50' cy='30' rx='13' ry='17' fill='%23fdf6e8' stroke='%23e6d6b8'/%3E%3Ccircle cx='45' cy='26' r='1.6' fill='%23d9b48a'/%3E%3Ccircle cx='54' cy='34' r='1.3' fill='%23d9b48a'/%3E%3Ccircle cx='47' cy='38' r='1' fill='%23d9b48a'/%3E%3Cellipse cx='84' cy='32' rx='12' ry='15' fill='%23f1e3fb' stroke='%23dccaea'/%3E%3Ccircle cx='80' cy='28' r='1.4' fill='%23c6a8e0'/%3E%3Ccircle cx='88' cy='36' r='1.2' fill='%23c6a8e0'/%3E%3Cpath d='M14 38q56 30 112 0q-4 22-56 22T14 38z' fill='%23c99a5a'/%3E%3Cg stroke='%23a8743a' stroke-width='2.2' fill='none' stroke-linecap='round'%3E%3Cpath d='M20 42q50 18 100 0'/%3E%3Cpath d='M26 50q44 12 88 0'/%3E%3C/g%3E%3Cpath d='M14 38q56 14 112 0' stroke='%23e2bd82' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M112 14l2 4 4 1-4 1-2 4-2-4-4-1 4-1z' fill='%23f2c94c'/%3E%3C/svg%3E") center / contain no-repeat; }
.view[data-page=creatures] .page-head::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70' viewBox='0 0 140 70'%3E%3Cellipse cx='70' cy='60' rx='58' ry='6' fill='%23000' opacity='.08'/%3E%3Cellipse cx='50' cy='30' rx='13' ry='17' fill='%23fdf6e8' stroke='%23e6d6b8'/%3E%3Ccircle cx='45' cy='26' r='1.6' fill='%23d9b48a'/%3E%3Ccircle cx='54' cy='34' r='1.3' fill='%23d9b48a'/%3E%3Ccircle cx='47' cy='38' r='1' fill='%23d9b48a'/%3E%3Cellipse cx='84' cy='32' rx='12' ry='15' fill='%23f1e3fb' stroke='%23dccaea'/%3E%3Ccircle cx='80' cy='28' r='1.4' fill='%23c6a8e0'/%3E%3Ccircle cx='88' cy='36' r='1.2' fill='%23c6a8e0'/%3E%3Cpath d='M14 38q56 30 112 0q-4 22-56 22T14 38z' fill='%23c99a5a'/%3E%3Cg stroke='%23a8743a' stroke-width='2.2' fill='none' stroke-linecap='round'%3E%3Cpath d='M20 42q50 18 100 0'/%3E%3Cpath d='M26 50q44 12 88 0'/%3E%3C/g%3E%3Cpath d='M14 38q56 14 112 0' stroke='%23e2bd82' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M112 14l2 4 4 1-4 1-2 4-2-4-4-1 4-1z' fill='%23f2c94c'/%3E%3C/svg%3E") !important; width: 120px; height: 60px; }
.view[data-page=creatures] .page-head .ph-act { margin-right: 120px; }
:root[data-theme="dark"] .view[data-page=creatures] .cr-grid { background: linear-gradient(180deg, #2e2a24, #26221d) !important; box-shadow: inset 0 0 0 1px #4a3d2a !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .view[data-page=creatures] .cr-grid { background: linear-gradient(180deg, #2e2a24, #26221d) !important; box-shadow: inset 0 0 0 1px #4a3d2a !important; } }
.ab-study { --ab: #6c6aa8; }
.lesson-bar { display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.lesson-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a87c9, #6c6aa8); transition: width 1s linear; }
.lesson-live, .study-live { border-color: color-mix(in srgb, #6c6aa8 35%, var(--rule)) !important; background: color-mix(in srgb, #6c6aa8 6%, var(--sheet)) !important; }
.study-long .seg button { padding: 6px 10px; }

/* ---------- 오늘: 휴대폰 첫 화면 ---------- */
.home-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.home-top > .block.fold { margin: 0; }
.home-clock { --hc-bg1: #dff0fb; --hc-bg2: #bfe0f4; --hc-ink: #1f3550; position: relative; overflow: hidden; display: grid; gap: 10px; padding: 18px 20px 14px; border-radius: 24px; color: var(--hc-ink);
  background: linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); box-shadow: 0 6px 20px rgba(40, 60, 90, .12); }
.home-clock.sky-dusk { --hc-bg1: #ffe4cc; --hc-bg2: #f7b9a6; --hc-ink: #4a2a22; }
.home-clock.sky-night { --hc-bg1: #2a3463; --hc-bg2: #161c3d; --hc-ink: #eef1ff; }
.hc-main { display: grid; gap: 2px; position: relative; z-index: 1; }
.hc-hi { font-size: 13px; opacity: .78; }
.hc-time { font-size: clamp(44px, 7vw, 60px); line-height: 1; letter-spacing: -.02em; font-weight: 800; }
.hc-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.hc-pill { padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.55); font-weight: 700; }
.sky-night .hc-pill { background: rgba(255,255,255,.14); }
.hc-art { position: absolute; right: 14px; top: 10px; width: 74px; height: 74px; }
.hc-art svg { width: 100%; height: 100%; }
.hc-art .sun { transform-origin: 30px 30px; animation: pa-spin 30s linear infinite; }
.hc-art .tw { animation: qdTwinkle 3s ease-in-out infinite; }
.hc-bar { position: relative; height: 12px; border-radius: 99px; background: rgba(255,255,255,.5); overflow: hidden; }
.sky-night .hc-bar { background: rgba(255,255,255,.12); }
.hc-bar i { position: absolute; top: 0; bottom: 0; }
.hc-curfew { background: repeating-linear-gradient(135deg, rgba(0,0,0,.12) 0 4px, transparent 4px 8px); }
.hc-meal { background: rgba(214, 150, 60, .45); border-radius: 99px; }
.hc-meal.ate { background: rgba(80, 160, 90, .55); }
.hc-meal.now { background: #e09a2f; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.hc-now { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; border-radius: 4px; background: var(--hc-ink); box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.hc-scale { position: relative; height: 14px; font-size: 11px; opacity: .75; }
.hc-scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.hc-foot { font-size: 12px; opacity: .65; }
/* 앱 아이콘 */
.home-apps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 8px; padding: 16px 12px; border-radius: 24px; background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.happ { display: grid; justify-items: center; gap: 6px; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; padding: 2px; border-radius: 14px; }
.happ-ico { position: relative; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--gc) 78%, #fff), var(--gc)); box-shadow: 0 4px 10px color-mix(in srgb, var(--gc) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .15s; }
.happ-ico .ico { width: 24px; height: 24px; color: #fff; }
.happ-ico .badge { position: absolute; top: -5px; right: -6px; }
.happ:hover .happ-ico { transform: translateY(-3px) scale(1.04); }
.happ:active .happ-ico { transform: scale(.94); }
.happ-n { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.g-day { --gc: var(--g-day); } .g-stuff { --gc: var(--g-stuff); } .g-me { --gc: var(--g-me); } .g-people { --gc: var(--g-people); } .g-guide { --gc: var(--g-guide); }
@media (max-width: 760px) { .home-top { grid-template-columns: 1fr; } .home-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 4px; } }
@media (max-width: 380px) { .happ-ico { width: 46px; height: 46px; border-radius: 14px; } }
/* 오늘 할 일: 동그란 진행 고리 */
.checks:has(.check.ring) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px 6px !important; }
.check.ring { display: grid; justify-items: center; gap: 3px; padding: 6px 2px !important; border: 0 !important; background: none !important; box-shadow: none !important; cursor: pointer; text-align: center; }
.ck-ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--ink) 9%, transparent) 0); transition: transform .15s; }
.ck-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sheet); color: var(--accent); }
.ck-ic .ico { width: 17px; height: 17px; }
.check.ring.done .ck-ring { background: conic-gradient(var(--good, #3f8a4f) 100%, transparent 0); }
.check.ring.done .ck-ic { background: var(--good, #3f8a4f); color: #fff; }
.check.ring:hover .ck-ring { transform: scale(1.06); }
.ck-n { font-size: 12px; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.ck-v { font-size: 12px; }
.home-clock { align-content: space-between; }

/* ---------- 전체 다듬기: 부드러운 모서리 · 그림자 · 눌림 반응 (귀엽되 담백하게) ---------- */
:root { --r-card: 16px; --r-btn: 11px; --line: color-mix(in srgb, var(--ink) 9%, transparent); --soft2: 0 1px 2px rgba(40, 30, 10, .04), 0 6px 18px rgba(40, 30, 10, .05); }
.panel { border-radius: var(--r-card); border-color: var(--line); box-shadow: var(--soft2); }
.panel .panel { box-shadow: none; }
.btn { border-radius: var(--r-btn); border-color: var(--line); transition: transform .12s ease, background .15s, border-color .15s, box-shadow .15s; }
.btn:not(:disabled):hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.btn:not(:disabled):active { transform: translateY(0) scale(.97); }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.primary:not(:disabled):hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.18); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.chip { transition: background .15s, border-color .15s, transform .12s; border-color: var(--line); }
.chip:not(.on):not(:disabled):hover { background: color-mix(in srgb, var(--accent) 6%, var(--sheet)); }
.chip:active { transform: scale(.96); }
:where(button, a, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; border-radius: 10px; }
.toast { border-radius: 14px; padding: 10px 16px; background: color-mix(in srgb, var(--ink) 90%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(20, 15, 5, .2); line-height: 1.5; }
.toast.bad { background: color-mix(in srgb, var(--bad) 92%, transparent); }
.block.fold { box-shadow: inset 0 0 0 1px var(--line), var(--soft2); }
.badge { box-shadow: 0 0 0 2px var(--sheet); }
.empty { color: var(--ink-3); }
.modal { border-radius: 20px; border-color: var(--line); animation: modalIn .18s ease-out; }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal { animation: none; } .btn, .chip { transition: none; } }
/* 퀴디치 선수 얼굴 */
.qd-ava { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--hc); color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--hc); }
.qd-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qd-ava b { font-size: 13px; }
.qd-ava.sm { width: 20px; height: 20px; box-shadow: 0 0 0 1.5px #fff; } .qd-ava.sm b { font-size: 10px; }
.qs-p { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px !important; }
.qd-pos-who { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; }
.qd-who { display: inline-flex; align-items: center; gap: 5px; }
/* 취미: 꾸밈은 빼고 색 테두리만(정원 초록 · 주방 주황 · 호수 파랑) */
.hobby-body.hb-garden, .hobby-body.hb-cook, .hobby-body.hb-fish { --hb: #5f9a43; padding: 16px !important; border-radius: 22px; background: color-mix(in srgb, var(--hb) 5%, var(--paper)) !important; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hb) 35%, transparent) !important; min-height: 0; }
.hobby-body.hb-cook { --hb: #d0803a; }
.hobby-body.hb-fish { --hb: #4f86a3; }
.hobby-body.hb-garden::before, .hobby-body.hb-cook::before, .hobby-body.hb-fish::before { content: none !important; display: none !important; }
/* ---------- 확인·취소·체크 칸 위치 통일 ---------- */
/* 팝업: 버튼 줄은 언제나 오른쪽 아래, 취소는 조용한 버튼 · 확인은 진한 버튼(오른쪽 끝) */
.modal > .row:last-child:has(> .btn), .modal .row.end { justify-content: flex-end; gap: 8px; margin-top: 6px; }
.modal .btn[data-act=close]:not(.primary) { background: transparent; border-color: transparent; color: var(--ink-2); box-shadow: none; }
.modal .btn[data-act=close]:not(.primary):hover { background: var(--sheet-2); }
/* 카드 안 버튼만 있는 마지막 줄은 오른쪽으로 */
.panel > .row:last-child:not(.between):not(.chips):has(> .btn):not(:has(> :not(.btn):not(.toggle):not(.qty):not(.bet-in))) { justify-content: flex-end; }
/* 체크 칸: 네모 체크박스 + 글씨, 같은 간격 · 같은 크기 */
.toggle { display: inline-flex !important; align-items: center; gap: 9px; padding: 4px 0 !important; font-size: 14.5px; color: var(--ink); cursor: pointer; line-height: 1.4; }
.toggle.small { font-size: 13px; color: var(--ink-2); }
.toggle input[type=checkbox] { margin: 0; }
.toggle .faint, .toggle .small { font-size: 12px; }
form .row.between:last-child, .panel form .row.between { align-items: center; }
.gear-legend { background: linear-gradient(90deg, #b8860b, #e2a92a, #b8860b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.legend-pop { display: grid; justify-items: center; gap: 6px; text-align: center; }
.legend-pop h3 { font-size: 24px; background: linear-gradient(90deg, #a8740a, #e2a92a, #a8740a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-spark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #fff3c4, #f2c94c); color: #8a5a00; animation: modalIn .4s ease-out; }
.lp-spark .ico { width: 28px; height: 28px; }
.legend-pop .row { width: 100%; }
.hobby-where { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.hobby-where > .ico { width: 15px; height: 15px; color: var(--hb, var(--accent)); }
.hobby-where .btn { margin-left: auto; }
/* 오늘: 시계는 가로로 얇게, 할 일은 그 아래 한 줄 고리 */
.home-top.stack { grid-template-columns: 1fr; gap: 12px; }
.home-top.stack .home-clock { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "main wd art" "main bar art" "main scale art" "main foot art"; align-items: center; column-gap: 28px; row-gap: 6px; padding: 16px 22px 14px 22px; }
.home-top.stack .hc-wd { grid-area: wd; align-self: end; margin: 0 0 2px; }
.home-top.stack .hc-main { grid-area: main; }
.home-top.stack .hc-bar { grid-area: bar; align-self: end; }
.home-top.stack .hc-scale { grid-area: scale; }
.home-top.stack .hc-foot { grid-area: foot; }
.home-top.stack .hc-art { grid-area: art; position: static; align-self: center; transform: none; width: 64px; height: 64px; }
.home-top.stack #fold-checks .checks:has(.check.ring) { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
@media (max-width: 760px) {
  .home-top.stack .home-clock { grid-template-columns: 1fr; grid-template-areas: "main" "wd" "bar" "scale" "foot"; padding: 16px 18px 12px; }
  .home-top.stack .hc-wd { margin: 2px 0 0; }
  .home-top.stack .hc-art { position: absolute; top: 12px; right: 14px; transform: none; width: 56px; height: 56px; }
  .home-top.stack #fold-checks .checks:has(.check.ring) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* 위젯 */
.widgets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-1col { display: block; }
.wg { display: grid; align-content: start; gap: 8px; padding: 14px; border-radius: 20px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line), var(--soft2); min-width: 0; min-height: 132px; }
.wg-head { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; min-width: 0; }
.wg-head b { font-size: 13px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-ico { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--wc, var(--accent)); }
.wg-ico .ico { width: 16px; height: 16px; }
.wg-big { font-size: 20px; font-weight: 800; color: var(--wc, var(--accent)); }
.wg-bet { --wc: #c08a12; } .wg-online { --wc: #2f8a57; } .wg-notes { --wc: #5d6f9c; } .wg-card { --wc: #8a63c9; }
.wg-line { font-size: 13px; color: var(--ink-2); }
.wg-sub { font-size: 12px; color: var(--ink-3, var(--ink-2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-lines { display: grid; gap: 3px; font-size: 12px; color: var(--ink-2); }
.wg-lines span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wg-lines i { font-style: normal; color: var(--ink-3, var(--ink-2)); margin-right: 5px; font-size: 11px; }
.wg-avas { display: flex; align-items: center; }
.wg-ava { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--hc); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 2px var(--sheet); margin-right: -6px; }
.wg-more { margin-left: 10px; font-size: 12px; color: var(--ink-3, var(--ink-2)); }
.wg-bar { display: block; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.wg-bar i { display: block; height: 100%; background: var(--wc); border-radius: inherit; }
.wg:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wc) 40%, var(--line)), var(--soft2); }
@media (max-width: 900px) { .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bets-modal { display: grid; gap: 10px; }
@media (min-width: 901px) { :root:not([data-rail="icon"]) .widgets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gear-go { align-items: center; gap: 8px; flex-wrap: wrap; }
.gear-why { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 180px; } .gear-why .ico { width: 12px; height: 12px; }
/* 몰래 가기 */
.sneak-pop { display: grid; gap: 10px; }
.sneak-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sneak-opt { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--sheet); font: inherit; color: var(--ink); cursor: pointer; transition: transform .12s, border-color .15s; }
.sneak-opt:not(:disabled):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.sneak-opt:disabled { opacity: .5; cursor: not-allowed; }
.so-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, #5d6f9c 16%, var(--sheet)); color: #5d6f9c; }
.so-ico.coin { background: color-mix(in srgb, #c08a12 16%, var(--sheet)); color: #b07a10; }
.so-ico .ico { width: 18px; height: 18px; }
@media (max-width: 520px) { .sneak-opts { grid-template-columns: 1fr; } }
/* 몰래 가기 버튼: 밤하늘 색, 달, 살금살금 발자국 */
.sneak-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; color: #f1edff;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.18) 0 1.5px, transparent 2px) 0 0 / 22px 18px, linear-gradient(135deg, #3b3f7a, #1f2347);
  box-shadow: 0 4px 12px rgba(31, 35, 71, .35), inset 0 1px 0 rgba(255,255,255,.15); transition: transform .15s, box-shadow .15s; }
.sneak-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31, 35, 71, .4), inset 0 1px 0 rgba(255,255,255,.15); }
.sneak-btn:active { transform: scale(.97); }
.sb-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 236, 170, .16); color: #ffe6a0; }
.sb-ico .ico { width: 17px; height: 17px; }
.sb-txt { display: grid; text-align: left; line-height: 1.2; } .sb-txt b { font-size: 14.5px; } .sb-txt small { font-size: 11px; opacity: .75; }
.sb-steps { display: flex; gap: 4px; margin-left: 4px; }
.sb-steps i { width: 6px; height: 9px; border-radius: 50% 50% 45% 45%; background: rgba(255, 236, 170, .55); animation: sbStep 1.6s ease-in-out infinite; }
.sb-steps i:nth-child(2) { animation-delay: .25s; transform: translateY(3px); } .sb-steps i:nth-child(3) { animation-delay: .5s; }
@keyframes sbStep { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
.sneak-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #f1edff; background: linear-gradient(135deg, #3b3f7a, #1f2347); vertical-align: 2px; }
.sneak-tag .ico { width: 10px; height: 10px; color: #ffe6a0; }
.place-btn.sneaky { border-style: dashed !important; }
/* 몰래 가기 창의 두 선택지도 같은 밤 느낌으로 */
.sneak-opt:first-child { background: linear-gradient(160deg, #2f3366, #1c2042); color: #eceaff; border-color: transparent; }
.sneak-opt:first-child .small { color: #cfd0f0; } .sneak-opt:first-child .small.bad { color: #ffb4a8; }
.sneak-opt:first-child .so-ico { background: rgba(255, 236, 170, .15); color: #ffe6a0; }
@media (prefers-reduced-motion: reduce) { .sb-steps i { animation: none; opacity: .7; } }
/* 파티 전투 방식: 빠르게(5분) / 차근차근(10분) */
.raid-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.raid-mode { position: relative; display: grid; gap: 3px; justify-items: start; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--sheet); font: inherit; color: var(--ink); cursor: pointer; transition: transform .12s, border-color .15s, box-shadow .15s; }
.raid-mode:not(:disabled):hover { transform: translateY(-2px); }
.raid-mode:disabled { cursor: default; opacity: .75; }
.raid-mode .small { color: var(--ink-2); }
.rm-time { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 99px; color: #fff; }
.rm-rush .rm-time { background: #c8413a; } .rm-careful .rm-time { background: #3f8a6a; }
.raid-mode.on.rm-rush { border-color: #c8413a; box-shadow: 0 0 0 3px color-mix(in srgb, #c8413a 18%, transparent); background: color-mix(in srgb, #c8413a 6%, var(--sheet)); }
.raid-mode.on.rm-careful { border-color: #3f8a6a; box-shadow: 0 0 0 3px color-mix(in srgb, #3f8a6a 18%, transparent); background: color-mix(in srgb, #3f8a6a 6%, var(--sheet)); }
.raid-mode.on:disabled { opacity: 1; }
@media (max-width: 520px) { .raid-modes { grid-template-columns: 1fr; } }

/* ---------- 끝없는 숲길 (금지된 숲 깊은 곳) ---------- */
.trek-door { display: grid; gap: 10px; }
.trek-door-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; color: #eef3ea;
  background: radial-gradient(circle at 88% 15%, rgba(200, 230, 170, .22), transparent 45%), linear-gradient(160deg, #2f4a33, #18291c); }
.trek-door-top .eyebrow { color: #b9d6a8; }
.trek-title { display: block; font-family: var(--f-display); font-size: 24px; color: #fff; }
.trek-best { display: grid; justify-items: end; line-height: 1.1; }
.trek-best b { font-size: 24px; color: #fff; } .trek-best small { font-size: 13px; margin-left: 2px; opacity: .8; }
.trek-best span { font-size: 12px; color: #b9d6a8; }
.trek-rules { margin: 0; padding-left: 18px; display: grid; gap: 3px; color: var(--ink-2); }
.trek-run { display: grid; gap: 14px; }
.trek-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; padding: 18px 20px; border-radius: 16px; color: #eef3ea; box-shadow: var(--lift);
  background: radial-gradient(circle at 85% 10%, rgba(210, 235, 180, .2), transparent 40%), radial-gradient(circle at 10% 110%, rgba(0, 0, 0, .35), transparent 50%), linear-gradient(160deg, #2c4630, #142217); }
.trek-head .eyebrow { color: #b9d6a8; }
.trek-head h1 { font-size: clamp(30px, 5vw, 40px); color: #fff; line-height: 1; margin: 4px 0 8px; }
.trek-head h1 small { font-size: 16px; margin-left: 3px; opacity: .75; }
.trek-head .btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }
.trek-head > div { flex: 1; min-width: 180px; }
.trek-path { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; max-width: 320px; }
.trek-path i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a8d48a, #e8f5c8); }
.trek-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trek-forks { display: grid; gap: 10px; }
.fork-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.fork { --fk: #5c8a55; text-align: left; display: grid; gap: 4px; padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--fk) 40%, var(--rule)); background: color-mix(in srgb, var(--fk) 7%, var(--sheet)); cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.fork:hover { transform: translateY(-2px); box-shadow: var(--lift); border-color: var(--fk); }
.fork.r2 { --fk: #b07a3a; } .fork.r3 { --fk: #b0453a; }
.fork.rare { --fk: #7a6fc4; background: linear-gradient(160deg, color-mix(in srgb, #7a6fc4 12%, var(--sheet)), var(--sheet)); }
.fk-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--fk); }
.fk-ico .ico { width: 19px; height: 19px; }
.fork b { font-size: 16px; }
.fk-hint { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.fk-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.fk-risk { color: var(--fk); font-weight: 600; }
.trek-foe { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--bad); box-shadow: var(--soft); }
.trek-foe.elite { background: linear-gradient(160deg, #1d1a22, #2d2533); color: #eee; border-color: #3a3340; border-left-color: #c0504a; }
.trek-foe.elite .small, .trek-foe.elite .tk-act span:last-child { color: #c9c3cc; }
.foe-track { height: 8px; }
.trek-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tk-act { --ta: #5b7fd6; display: grid; justify-items: center; gap: 3px; padding: 11px 6px; border-radius: 12px; text-align: center; border: 1px solid color-mix(in srgb, var(--ta) 40%, var(--rule)); background: color-mix(in srgb, var(--ta) 8%, var(--sheet)); cursor: pointer; transition: transform .12s, box-shadow .12s; color: var(--ink); }
.tk-act:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--lift); border-color: var(--ta); }
.tk-act:disabled { opacity: .45; cursor: not-allowed; }
.tk-act b { font-size: 14.5px; } .tk-act span:last-child { font-size: 12px; color: var(--ink-3); }
.tk-act.a-spell { --ta: #c4562f; } .tk-act.a-swing { --ta: #8a7a66; } .tk-act.a-guard { --ta: #3f8f6a; } .tk-act.a-flee { --ta: #6b6f86; }
.tk-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--ta); }
.tk-ico .ico { width: 19px; height: 19px; }
@media (max-width: 640px) {
  .trek-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trek-meters { grid-template-columns: 1fr; gap: 6px; }
  .trek-door-top { padding: 14px; }
}
@media (max-width: 640px) {
  .fork { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; padding: 11px 12px; }
  .fork .fk-ico { grid-row: span 3; align-self: start; }
  .fork-grid { gap: 8px; grid-template-columns: minmax(0, 1fr); }
  .trek-head { padding: 14px 16px; }
}

/* 끝없는 숲길: 동굴처럼 화면 전체를 어둡게 + 숲빛 */
.th-forest { --cv-a: #0f1d14; --cv-b: #284232; --cv-glow: #a8d48a; }
.trek-head.th-forest { color: #eef3ea; background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--cv-glow) 26%, transparent), transparent 45%), linear-gradient(160deg, var(--cv-b), var(--cv-a)); }
.trek-head h1 { font-size: clamp(26px, 4vw, 34px); margin: 2px 0 8px; }
.trek-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage.in-trek {
  --paper: #0f1411; --sheet: #18201b; --sheet-2: #1f2a23; --rule: #2c3a31; --ink: #e8efe4; --ink-2: #b4c2b0; --ink-3: #7f8f7c;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(140, 200, 130, .10), transparent 45%),
    radial-gradient(ellipse at 85% 30%, rgba(200, 230, 150, .07), transparent 40%),
    radial-gradient(circle at 50% 120%, rgba(90, 140, 90, .12), transparent 50%),
    linear-gradient(180deg, #121a15, #0c120e 60%, #090d0a);
}
.stage.in-trek .view::before { background-image: radial-gradient(2px 2px at 14% 26%, #e9f7a0, transparent), radial-gradient(1.5px 1.5px at 76% 18%, #c8f0a0, transparent), radial-gradient(2px 2px at 44% 64%, #f2f7b0, transparent), radial-gradient(1.5px 1.5px at 86% 70%, #b8eaa0, transparent), radial-gradient(1.5px 1.5px at 28% 86%, #e4f5a8, transparent), radial-gradient(1.5px 1.5px at 62% 40%, #d8f2a0, transparent); }
.stage.in-trek .statusbar { background: color-mix(in srgb, #0f1411 88%, transparent) !important; border-bottom-color: #26332b !important; }
.stage.in-trek .panel, .stage.in-trek .trek-foe:not(.elite) { background: var(--sheet); border-color: #2a372f; }
.stage.in-trek .btn:not(.primary), .stage.in-trek .loc-line, .stage.in-trek .purse, .stage.in-trek .iconbtn { background: #1a231d !important; border-color: #33443a; color: var(--ink); }
.stage.in-trek .page-head .ph-tabs, .stage.in-trek .subtabs { background: #1a231d; }
.stage.in-trek .fork { background: color-mix(in srgb, var(--fk) 14%, var(--sheet)); }
.stage.in-trek .fork.r1 { --fk: #7fb36f; }
.stage.in-trek .tk-act { background: color-mix(in srgb, var(--ta) 14%, var(--sheet)); }
@media (max-width: 480px) { .sb-right .tchip { display: none; } }
.stage.in-trek .chip:not(.on), .stage.in-mine .chip:not(.on) { background: #222c25; border: 1px solid #33443a; color: var(--ink); }

/* 숲길 전투: 상대의 다음 행동(예고)과 맞았을 때 움직임 */
.trek-foe { position: relative; overflow: hidden; }
.foe-intent { --it: #8a7a66; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--it) 14%, var(--sheet)); border: 1px solid color-mix(in srgb, var(--it) 45%, transparent); }
.foe-intent b { display: block; font-size: 14.5px; line-height: 1.35; }
.fi-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--it); }
.fi-ico .ico { width: 22px; height: 22px; }
.fi-tag { display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--it); letter-spacing: .02em; }
.fi-hint { display: block; font-size: 12px; color: var(--ink-2); line-height: 1.4; margin-top: 1px; }
.it-strike .foe-intent { --it: #b07a3a; }
.it-heavy .foe-intent { --it: #d0453a; animation: tkWindup 1.1s ease-in-out infinite; }
.it-heavy .fi-ico { animation: tkShakeS .5s ease-in-out infinite; }
.it-quick .foe-intent { --it: #c98a2a; }
.it-idle .foe-intent { --it: #4f9a7a; }
.it-web .foe-intent { --it: #8a7ec4; }
.it-heavy { border-left-color: #d0453a !important; }
@keyframes tkWindup { 0%, 100% { box-shadow: 0 0 0 0 rgba(208, 69, 58, 0); } 50% { box-shadow: 0 0 0 4px rgba(208, 69, 58, .28), 0 0 22px rgba(208, 69, 58, .35); } }
@keyframes tkShakeS { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.tk-act.good { border-color: var(--ta); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ta) 35%, transparent); }
.tk-act.good span:last-child { color: var(--ta); font-weight: 700; }
/* 방금 일어난 일 */
.fx-heavy, .fx-hit { animation: tkHit .45s ease-out; }
.fx-heavy { animation-duration: .6s; }
.fx-heavy::after, .fx-hit::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(220, 60, 50, .22); animation: tkFlash .6s ease-out forwards; }
.fx-parry::after, .fx-block::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 3px rgba(120, 200, 255, .7), inset 0 0 40px rgba(120, 200, 255, .35); animation: tkFlash .7s ease-out forwards; }
.fx-web::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(35deg, rgba(230, 230, 240, .18) 0 1px, transparent 1px 14px), repeating-linear-gradient(-35deg, rgba(230, 230, 240, .18) 0 1px, transparent 1px 14px); animation: tkFlash 1s ease-out forwards; }
.fx-ko { animation: tkKo .5s ease-out; }
@keyframes tkHit { 0% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } 100% { transform: none; } }
@keyframes tkFlash { from { opacity: 1; } to { opacity: 0; } }
@keyframes tkKo { from { transform: scale(1.02); } to { transform: none; } }
.fx-pop { position: absolute; z-index: 3; font: 800 24px var(--f-mono); pointer-events: none; animation: tkPop 1.2s ease-out forwards; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.fx-pop.foe { right: 34%; top: 10px; color: #ffd27a; }
.fx-pop.me { right: 18px; top: 92px; color: #ff7a6a; font-size: 20px; }
.fx-pop.parry { left: 50%; top: 40%; transform: translateX(-50%); color: #9fd8ff; font-size: 20px; font-family: var(--f-display); }
@keyframes tkPop { 0% { opacity: 0; translate: 0 8px; } 15% { opacity: 1; translate: 0 0; } 70% { opacity: 1; } 100% { opacity: 0; translate: 0 -18px; } }
@media (prefers-reduced-motion: reduce) { .it-heavy .foe-intent, .it-heavy .fi-ico, .fx-heavy, .fx-hit, .fx-ko, .fx-pop { animation: none; } }

/* ---------- 침대맡 ---------- */
.room-box { display: grid; gap: 10px; }
.room-frame { width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--soft); background: #efe6d4; max-width: 560px; }
.room-frame.big { max-width: 720px; }
.room-svg { display: block; width: 100%; height: auto; }
.room-svg .tw { fill: #fff8d8; animation: rmTw 2.4s ease-in-out infinite alternate; }
.room-svg .tw.g { fill: #ffe9a0; }
.room-svg .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: rmFlame .9s ease-in-out infinite alternate; }
.room-svg .float { animation: rmFloat 3.2s ease-in-out infinite; }
.room-svg .ff { animation: rmTw 1.6s ease-in-out infinite alternate; }
.room-svg .sway { transform-box: fill-box; transform-origin: 50% 100%; animation: rmSway 2.6s ease-in-out infinite; }
.room-svg .hover { animation: rmFloat 1.8s ease-in-out infinite; }
.room-svg .wing { transform-box: fill-box; transform-origin: 50% 50%; animation: rmWing .18s linear infinite alternate; }
.room-svg .zz { animation: rmZz 2.4s ease-in-out infinite; }
.room-svg .steps { animation: rmTw 1.2s steps(2) infinite; } .room-svg .steps.s2 { animation-delay: .6s; }
.room-svg .zoom { animation: rmZoom 3s ease-in-out infinite; }
.room-svg .snow { fill: #fff; animation: rmFloat 2s ease-in-out infinite; }
@keyframes rmTw { from { opacity: .35; } to { opacity: 1; } }
@keyframes rmFlame { from { transform: scaleY(.85) skewX(-4deg); } to { transform: scaleY(1.1) skewX(4deg); } }
@keyframes rmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes rmSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes rmWing { from { transform: scaleY(1); } to { transform: scaleY(.4); } }
@keyframes rmZz { 0% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -6px); } }
@keyframes rmZoom { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .room-svg * { animation: none !important; } }

/* 꾸미기 화면 */
.seg-chips { margin-bottom: 4px; }
.deco-top { display: grid; gap: 8px; justify-items: start; }
.deco-top .prof-card { width: 100%; max-width: 560px; }
.deco-slot { gap: 8px; }
.deco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.deco-it { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--rule); background: var(--sheet); }
.deco-it.own { background: color-mix(in srgb, var(--accent) 5%, var(--sheet)); }
.deco-it.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.deco-it.pv { border-style: dashed; border-color: var(--accent); }
.deco-name { all: unset; cursor: pointer; display: grid; gap: 1px; min-width: 0; }
.deco-name b { font-size: 14.5px; } .deco-name span { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.style-chips .chip { display: inline-flex; align-items: center; gap: 6px; }
.swc { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--rule); background: var(--sheet); flex: none; }
.swc.sw-frame.s-vine { border: 2px solid #5a9a5a; } .swc.sw-frame.s-star { border: 2px dotted #c9a24a; } .swc.sw-frame.s-gold { border: 2px solid #d9b35c; box-shadow: inset 0 0 0 1px #fff3; } .swc.sw-frame.s-crest { border: 2px double var(--accent); }
.swc.sw-pattern.s-stripe { background: repeating-linear-gradient(45deg, #e8dcc4 0 3px, #fff 3px 6px); } .swc.sw-pattern.s-check { background: repeating-conic-gradient(#e8dcc4 0 25%, #fff 0 50%) 0 0 / 6px 6px; }
.swc.sw-pattern.s-parch { background: #efe0bc; } .swc.sw-pattern.s-dust { background: radial-gradient(#c9a24a 1px, transparent 1.5px) 0 0 / 5px 5px, #fff; } .swc.sw-pattern.s-aurora { background: linear-gradient(135deg, #a8e0d0, #c8b0f0, #f0c0d8); }
.swc.sw-ink.s-rose { background: #d0587a; } .swc.sw-ink.s-teal { background: #2a8a8a; } .swc.sw-ink.s-silver { background: linear-gradient(135deg, #e8eaee, #9aa0aa); } .swc.sw-ink.s-gold { background: linear-gradient(135deg, #f2d27a, #b8862a); } .swc.sw-ink.s-rainbow { background: linear-gradient(90deg, #f26a6a, #f2c84a, #6ac48a, #6a9af2, #b06af2); }

/* 학생증 꾸미기 */
.prof-card.cf-vine { box-shadow: inset 0 0 0 3px #5a9a5a, inset 0 0 0 6px color-mix(in srgb, #5a9a5a 18%, transparent); }
.prof-card.cf-star { outline: 3px dotted #c9a24a; outline-offset: -6px; }
.prof-card.cf-gold { box-shadow: inset 0 0 0 2px #d9b35c, inset 0 0 0 5px color-mix(in srgb, #d9b35c 25%, transparent), 0 6px 18px rgba(185, 140, 40, .18); }
.prof-card.cf-crest { box-shadow: inset 0 0 0 3px var(--hc, var(--accent)), inset 0 0 0 7px color-mix(in srgb, var(--accent) 15%, transparent); }
.prof-card.cp-stripe { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 8px, transparent 8px 16px); }
.prof-card.cp-check { background-image: repeating-conic-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 0 25%, transparent 0 50%); background-size: 20px 20px; }
.prof-card.cp-parch { background-image: radial-gradient(circle at 20% 10%, #f6ecd2, transparent 60%), linear-gradient(160deg, #f3e6c6, #ead8b0); }
.prof-card.cp-dust { background-image: radial-gradient(color-mix(in srgb, #c9a24a 45%, transparent) 1px, transparent 1.6px); background-size: 14px 14px; }
.prof-card.cp-aurora { background-image: linear-gradient(135deg, color-mix(in srgb, #a8e0d0 40%, transparent), color-mix(in srgb, #c8b0f0 40%, transparent), color-mix(in srgb, #f0c0d8 40%, transparent)); }
:root[data-theme="dark"] .prof-card.cp-parch { background-image: linear-gradient(160deg, #3a3222, #2c2618); }
.prof-card.ci-rose .prof-name { color: #d0587a; } .prof-card.ci-teal .prof-name { color: #2a8a8a; }
.prof-card.ci-silver .prof-name, .prof-card.ci-gold .prof-name, .prof-card.ci-rainbow .prof-name { background-clip: text; -webkit-background-clip: text; color: transparent; }
.prof-card.ci-silver .prof-name { background-image: linear-gradient(135deg, #8a909a, #c8ccd4 50%, #7a808a); }
.prof-card.ci-gold .prof-name { background-image: linear-gradient(135deg, #b8862a, #f2d27a 50%, #a8761a); }
.prof-card.ci-rainbow .prof-name { background-image: linear-gradient(90deg, #e85a5a, #e8b03a, #4ab47a, #4a8ae8, #a05ae8); }

/* 납품 의뢰 */
.deliv-list { display: grid; gap: 10px; }
.deliv { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--soft); }
.deliv.ready { border-color: color-mix(in srgb, var(--good) 60%, var(--rule)); }
.deliv.done { opacity: .6; }
.dv-from { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.dv-from .ico { width: 16px; height: 16px; color: var(--accent); }
.dv-main .nm { display: flex; align-items: center; gap: 6px; }
.dv-pay { display: grid; justify-items: end; line-height: 1.15; }
.dv-pay b { font-size: 20px; color: var(--accent); } .dv-pay span { font-size: 11px; color: var(--ink-3); } .dv-pay small { font-size: 11px; }
@media (max-width: 640px) { .deliv { grid-template-columns: minmax(0, 1fr) auto; } .dv-from { grid-column: 1 / -1; } }

/* 빗자루 가게 */
.broom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.broom { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--rule); background: var(--sheet); }
.broom.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
.broom .btn, .broom .pill { justify-self: start; }
.prof-card.styled { padding: 16px; border-radius: 14px; }
.deco-card { width: 100%; max-width: 640px; }
.cu-url { display: flex; gap: 6px; width: 100%; margin-top: 6px; }
.cu-url input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); font-size: 13px; }
.deco-it:has(.cu-url) { flex-wrap: wrap; }
.out-box { border-left: 4px solid var(--bad); }
.out-box.ob-detention { border-left-color: #8a6a3a; }
.bd-cmt.reply { margin-left: 22px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--kc, var(--accent)) 35%, var(--rule)); }
.bd-cmt.replying { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 8px; }
.bd-replyto { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); padding: 4px 2px; }
.bd-replyto .ico { width: 14px; height: 14px; }

/* ---------- 무너진 신전 ---------- */
.shrine-panel { gap: 10px; }
.sh-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; color: #ece8f4;
  background: radial-gradient(circle at 85% 20%, rgba(190, 170, 255, .22), transparent 45%), linear-gradient(160deg, #2c2a3e, #15141f); }
.sh-head .eyebrow { color: #c4b8e8; } .sh-head .small { color: #d6cfe8; }
.sh-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-slot { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-3); background: var(--sheet); }
.sh-slot.on { border-color: #7a6fc4; color: var(--ink); background: color-mix(in srgb, #7a6fc4 12%, var(--sheet)); }
.sh-slot b { color: inherit; }
.shrine-live { display: grid; gap: 10px; }
.sh-boss { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--bad); }
.sh-timer { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.sh-timer .num { font-size: 18px; font-weight: 700; color: var(--accent); }
.sh-mems { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sh-mem { display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rule); background: var(--sheet); }
.sh-mem.me { border-color: var(--accent); }
.sh-mem.target { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 45%, transparent); }
.sh-mem.out { opacity: .55; }
.sh-tgt { font-size: 11px; color: var(--bad); font-weight: 700; }
.sh-acts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sh-act { --ta: #5b7fd6; display: grid; justify-items: center; gap: 3px; padding: 10px 6px; border-radius: 12px; text-align: center; border: 1px solid color-mix(in srgb, var(--ta) 40%, var(--rule)); background: color-mix(in srgb, var(--ta) 8%, var(--sheet)); cursor: pointer; color: var(--ink); transition: transform .12s, box-shadow .12s; }
.sh-act:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--lift); border-color: var(--ta); }
.sh-act:disabled { opacity: .45; cursor: not-allowed; }
.sh-act b { font-size: 13px; } .sh-act span:last-child { font-size: 11px; color: var(--ink-3); line-height: 1.35; }
.sh-act.good { border-color: var(--ta); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ta) 35%, transparent); }
.sh-act.a-attack { --ta: #5b7fd6; } .sh-act.a-strong { --ta: #c4562f; } .sh-act.a-guard { --ta: #3f8f6a; } .sh-act.a-heal { --ta: #c46a8a; } .sh-act.a-special { --ta: #7a6fc4; }
.sh-wait { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, var(--sheet)); border: 1px dashed var(--rule); text-align: center; }
.sh-wait.win { border-color: var(--good); } .sh-wait.lose { border-color: var(--bad); }
.sh-log { max-height: 240px; overflow: auto; }
@media (max-width: 640px) { .sh-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sh-acts .sh-act:last-child { grid-column: 1 / -1; } }
.foe-intent.it-strike { --it: #b07a3a; } .foe-intent.it-quick { --it: #c98a2a; } .foe-intent.it-idle { --it: #4f9a7a; } .foe-intent.it-web { --it: #8a7ec4; }
.foe-intent.it-heavy { --it: #d0453a; animation: tkWindup 1.1s ease-in-out infinite; }
.foe-intent.it-heavy .fi-ico { animation: tkShakeS .5s ease-in-out infinite; }
.bd-who { display: inline-flex; align-items: center; gap: 6px; }
.bd-ava { position: relative; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--hc) 22%, var(--sheet)); box-shadow: 0 0 0 1.5px var(--hc); font-size: 11px; font-style: normal; font-weight: 700; color: var(--hc); }
.bd-ava i { font-style: normal; }
.bd-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bd-who > svg.ico { display: none; }

/* 납품 의뢰: 집요정이 들고 온 의뢰 */
.deliv { grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; }
.dv-elf { width: 76px; height: 84px; }
.elf-svg { width: 100%; height: 100%; display: block; animation: elfBob 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.deliv:nth-child(2) .elf-svg { animation-delay: .6s; } .deliv:nth-child(3) .elf-svg { animation-delay: 1.2s; }
@keyframes elfBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(1.5deg); } }
.dv-main { display: grid; gap: 6px; min-width: 0; }
.dv-bubble { position: relative; display: grid; gap: 2px; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, #9cc48a 16%, var(--sheet)); border: 1px solid color-mix(in srgb, #7aa868 40%, var(--rule)); justify-self: start; max-width: 100%; }
.dv-bubble::before { content: ""; position: absolute; left: -7px; top: 16px; width: 12px; height: 12px; background: inherit; border-left: inherit; border-bottom: inherit; transform: rotate(45deg); }
.dv-bubble b { font-size: 14.5px; font-family: var(--f-display); }
.dv-from { font-size: 12px; color: #5a8a48; }
.dv-side { display: grid; gap: 6px; justify-items: end; }
.deliv.done .elf-svg { animation: elfHop .9s ease-in-out infinite; }
@keyframes elfHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }
@media (max-width: 640px) { .deliv { grid-template-columns: 56px minmax(0, 1fr); } .dv-elf { width: 56px; height: 64px; } .dv-side { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; } .dv-from { grid-column: auto; } }

/* 빗자루 가게: 나무 벽, 걸어 둔 빗자루 */
.broom-shop { background: linear-gradient(180deg, #f6ecd8, #efe0c2); border-color: #d8c094; }
:root[data-theme="dark"] .broom-shop { background: linear-gradient(180deg, #2e261c, #241d15); border-color: #4a3a26; }
.brm-sign { position: relative; border-radius: 12px; overflow: hidden; padding: 14px 16px 12px; color: #f6ecd8;
  background: repeating-linear-gradient(90deg, #6b4a2c 0 24px, #5e4026 24px 26px), #6b4a2c; box-shadow: inset 0 -6px 0 #4a3220; }
.brm-rack { display: flex; justify-content: flex-end; gap: 4px; position: absolute; right: 12px; top: 6px; opacity: .9; }
.brm-hang { width: 70px; transform: rotate(-62deg); transform-origin: 30% 50%; margin-left: -26px; }
.brm-hang .broom-svg { width: 100%; }
.brm-title { position: relative; display: grid; gap: 2px; max-width: 70%; }
.brm-title b { font-family: var(--f-display); font-size: 18px; color: #fff3d6; display: flex; align-items: center; gap: 6px; }
.brm-title .small { color: #ead8b4; }
.broom { background: #fffaf0; border-color: #e0cca4; }
:root[data-theme="dark"] .broom { background: #2a231a; border-color: #4a3a26; }
.broom-stand { height: 34px; display: flex; align-items: center; border-bottom: 3px solid #b08a58; margin-bottom: 4px; }
.broom-stand .broom-svg { width: 100%; height: 30px; }
.bs-speed { color: #8a5a20; font-weight: 600; }
@media (max-width: 640px) { .brm-rack { opacity: .35; } .brm-title { max-width: 100%; } }

/* 던전: 큰 상자 두 개 */
.dg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dg-card { all: unset; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 128px; padding: 16px 18px; border-radius: 18px; color: #f4ede2; box-shadow: var(--soft); transition: transform .15s, box-shadow .15s, outline-color .15s; outline: 3px solid transparent; outline-offset: 2px; }
.dg-card:hover { transform: translateY(-2px); box-shadow: var(--lift); }
.dg-card.on { outline-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.dg-card:not(.on) { filter: saturate(.75) brightness(.92); }
.dg-cave { background: radial-gradient(circle at 80% 15%, rgba(224, 168, 90, .35), transparent 45%), linear-gradient(160deg, #5a4636, #2a211a); }
.dg-forest { background: radial-gradient(circle at 80% 15%, rgba(190, 230, 150, .3), transparent 45%), linear-gradient(160deg, #2f4a33, #121e15); }
.dg-art { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.dg-cave .dg-art { background: radial-gradient(2px 2px at 20% 30%, #ffd78a, transparent), radial-gradient(2px 2px at 70% 60%, #d6a8ff, transparent), radial-gradient(1.5px 1.5px at 45% 20%, #9fe3ff, transparent),
  linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .35)), conic-gradient(from 200deg at 85% 110%, transparent 0 20deg, rgba(0, 0, 0, .25) 20deg 60deg, transparent 60deg); }
.dg-forest .dg-art { background: radial-gradient(2px 2px at 25% 35%, #f0f7a0, transparent), radial-gradient(1.5px 1.5px at 65% 50%, #d8f2a0, transparent), radial-gradient(2px 2px at 85% 25%, #f0f7a0, transparent),
  linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .35)); }
.dg-txt { position: relative; display: grid; gap: 2px; }
.dg-txt .eyebrow { color: rgba(255, 255, 255, .7); }
.dg-txt b { font-family: var(--f-display); font-size: clamp(22px, 3.4vw, 28px); color: #fff; }
.dg-txt .small { color: rgba(255, 255, 255, .78); }
.mine-hero.th-forest { background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--cv-glow) 26%, transparent), transparent 45%), linear-gradient(160deg, var(--cv-b), var(--cv-a)); }
@media (max-width: 640px) { .dg-cards { gap: 8px; } .dg-card { min-height: 96px; padding: 12px; } .dg-txt .small { font-size: 11px; } }
.brm-sign { min-height: 84px; }
.brm-rack { flex-direction: column; gap: 0; top: 6px; right: 16px; }
.brm-hang { width: 130px; transform: none; margin: -3px 0; position: relative; }
.brm-hang:nth-child(odd) { margin-right: 18px; }
.brm-hang::before { content: ""; position: absolute; left: 28px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: #3a2616; box-shadow: 52px 0 0 #3a2616; }
.brm-hang:nth-child(n+4) { display: none; }
.brm-hang:nth-child(n+3) { display: none; }
.dv-main .nm { flex-wrap: wrap; row-gap: 2px; }
.dv-main .nm > .small { flex-basis: 100%; }
.dv-main .nm b { white-space: nowrap; }
@media (max-width: 640px) { .dv-pay { grid-auto-flow: column; align-items: baseline; gap: 4px; justify-items: start; } }
.cr-svg.live .body .pupil { fill: #2a2420; stroke: none; }
.cr-svg.live .body .gold { fill: #e8c24a; stroke: #b8902a; }
.cr-svg.live .body .thin { fill: none; stroke: color-mix(in srgb, var(--cc) 40%, #2a2420); stroke-width: 1.2; }
.cr-svg.sleep .zz { animation: rmZz 2.4s ease-in-out infinite; }
.cr-svg.sleep { animation: cr-bob 4s ease-in-out infinite; }
.nest-box.den { border-color: color-mix(in srgb, #6f8f4e 50%, var(--rule)); }
.dragon-top { display: flex; gap: 12px; align-items: center; }
.dragon-art { width: 92px; height: 92px; flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.dragon-art .cr-svg { width: 92px; height: 92px; }
.dragon-foe.it-heavy .dragon-art { animation: dragonBreath 1.1s ease-in-out infinite; }
@keyframes dragonBreath { 0%, 100% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); } 50% { filter: drop-shadow(0 0 16px rgba(255, 120, 40, .8)); } }
.cr-foods { display: grid; gap: 4px; flex-basis: 100%; }
.food-chip { display: inline-flex; align-items: center; gap: 5px; }
.food-chip .fc-eff { font-size: 11px; color: var(--good); font-weight: 700; }

/* ---------- 마법약 조제실 ---------- */
.brew-lab { gap: 12px; background: linear-gradient(170deg, #1c2a24, #121a16); border-color: #2c3d34; color: #e6efe8; }
.brew-lab .small, .brew-lab .muted { color: #b9c9be; }
.brew-lab .faint { color: #8ea495; }
.bl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.bl-head .eyebrow { color: #9fd0b0; }
.bl-grid { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 14px; }
.bl-book { display: grid; gap: 4px; align-content: start; padding: 10px; border-radius: 12px; background: linear-gradient(90deg, #4a3424, #5c4330 6%, #efe2c4 6%, #f4ead2); max-height: 440px; overflow: auto; }
.bl-book .eyebrow { color: #6a5034; padding-left: 14px; }
.bl-page { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 8px; color: #3a2a1a; font-size: 13px; }
.bl-page:hover { background: #e8d8b4; }
.bl-page.on { background: #dcc69a; box-shadow: inset 3px 0 0 hsl(var(--ph) 55% 40%); }
.bl-page.locked { opacity: .5; }
.bl-dot { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--ph) 60% 50%); box-shadow: 0 0 0 2px #fff8; }
.bl-nm { font-family: var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-lv { font-size: 11px; color: #7a6040; display: inline-flex; align-items: center; gap: 3px; }
.bl-lv .ico { width: 11px; height: 11px; }
.bl-page.ready .bl-lv { color: #2f7a4a; font-weight: 700; }
.bl-desk { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: center; }
.cauldron { width: 220px; height: 190px; }
.cd-body { fill: #2a2a30; stroke: #44444e; stroke-width: 2; }
.cd-rim { fill: #3a3a44; stroke: #55555f; stroke-width: 2; }
.cd-fire path { fill: #ff9a3a; opacity: .85; transform-box: fill-box; transform-origin: 50% 100%; animation: rmFlame .7s ease-in-out infinite alternate; }
.cd-fire path:nth-child(2) { fill: #ffd25a; animation-delay: .2s; }
.cd-bub { fill: hsl(var(--ph) 85% 72%); opacity: 0; animation: cdBub 2.2s ease-in infinite; }
@keyframes cdBub { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-16px); } }
.cd-steam path { fill: none; stroke: hsl(var(--ph) 50% 85%); stroke-width: 3; stroke-linecap: round; opacity: 0; animation: cdSteam 2.8s ease-out infinite; }
@keyframes cdSteam { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: .55; } 100% { opacity: 0; transform: translateY(-14px); } }
.cd-spoon path { stroke: #8a6a44; stroke-width: 5; stroke-linecap: round; }
.cd-spoon ellipse { fill: #8a6a44; }
.cd-spoon { transform-origin: 114px 74px; }
.cauldron.stir .cd-spoon { animation: cdStir .35s linear infinite; }
.cauldron.stir .cd-liq { animation: cdSwirl .7s linear infinite; transform-origin: 110px 72px; }
.cauldron.stir .cd-bub { animation-duration: .8s; }
@keyframes cdStir { 0% { transform: translate(0, 0); } 25% { transform: translate(-22px, 2px); } 50% { transform: translate(-40px, 0); } 75% { transform: translate(-22px, -2px); } 100% { transform: translate(0, 0); } }
@keyframes cdSwirl { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.94); } }
.cauldron.fx-ok .cd-steam path { stroke: #fff6c8; opacity: .9; animation-duration: 1.4s; }
.cauldron.fx-ok .cd-liq { filter: brightness(1.3) drop-shadow(0 0 10px hsl(var(--ph) 90% 70%)); }
.cauldron.fx-boom { animation: tkHit .5s ease-out; }
.cauldron.fx-boom .cd-liq { filter: brightness(.6) saturate(.4); }
.cauldron.fx-murky .cd-liq { filter: saturate(.15) brightness(.8); }
.bl-info { display: grid; gap: 7px; min-width: 0; }
.bl-title { font-family: var(--f-display); font-size: 20px; color: #fff; }
.bl-vials { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-vial { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 13px; background: #ffffff12; border: 1px solid #ffffff22; }
.bl-vial.ok b { color: #8fe0a8; } .bl-vial.no b { color: #f09a8a; } .bl-vial.no { opacity: .8; }
.bl-odds { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; color: #b9c9be; }
.bl-odds .track { background: #ffffff18; }
.bl-result { padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.bl-result.ok { background: #2f7a4a55; color: #c8f0d4; } .bl-result.boom { background: #a0302055; color: #ffd0c4; } .bl-result.murky { background: #ffffff14; color: #d0d0d0; }
.brew-lab .btn:not(.primary) { background: #ffffff10; color: #e6efe8; border-color: #ffffff24; }
@media (max-width: 900px) { .bl-grid { grid-template-columns: 1fr; } .bl-book { max-height: 220px; } .bl-desk { grid-template-columns: 1fr; justify-items: center; } .bl-info { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cauldron * { animation: none !important; } }
.panel.brew-lab, .gb-open .panel.brew-lab, [data-tone] .panel.brew-lab { background: radial-gradient(circle at 70% 30%, rgba(120, 200, 150, .10), transparent 50%), linear-gradient(170deg, #1c2a24, #121a16) !important; border-color: #2c3d34 !important; color: #e6efe8 !important; box-shadow: var(--lift); }
.brew-lab .trek-title { color: #f2f8f2; }

/* 스크롤바 — 전부 투명 */
*, html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 16%, transparent) transparent !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb, .rail::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 16%, transparent) !important; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box !important; }
::-webkit-scrollbar-thumb:hover, .rail:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 30%, transparent) !important; background-clip: padding-box !important; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent !important; }

/* 지금 하는 중 띠 — 그만두기 */
.ab-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-right: -4px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ab) 14%, transparent); color: color-mix(in srgb, var(--ab) 80%, var(--ink)); cursor: pointer; transition: background .15s; }
.ab-x .ico { width: 14px; height: 14px; stroke: currentColor; }
.ab-x:hover { background: color-mix(in srgb, var(--ab) 28%, transparent); }
.act-band.ab-asking { cursor: default; box-shadow: inset 0 0 0 2px var(--ab); }
.ab-ask { display: flex; gap: 6px; flex: none; }
.ab-ask .btn { white-space: nowrap; }
:is(.sb-right, .sb-mid) .act-band.ab-asking { max-width: 420px; }
:is(.sb-right, .sb-mid) .act-band .ab-x { width: 24px; height: 24px; }
@media (max-width: 700px) { .ab-ask .btn { padding-inline: 9px; } }
:is(.sb-right, .sb-mid) .act-band .ab-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  :is(.sb-right, .sb-mid) .act-band .ab-left small { display: none; }
  :is(.sb-right, .sb-mid) .act-band .ab-left .num { font-size: 13px; }
  :is(.sb-right, .sb-mid) .act-band.ab-asking { order: 30; flex: 1 1 100%; max-width: none; }
  :is(.sb-right, .sb-mid) .act-band.ab-asking .ab-txt > span { white-space: normal; }
}
@media (max-width: 700px) { .sb-right:has(.ab-asking) { flex-wrap: wrap; row-gap: 8px; } }

/* ---------- 장비: 열어 둔 여행 트렁크 (옷장 대신) ---------- */
.trunk { position: relative; border-radius: 20px; padding: 10px; background: linear-gradient(180deg, #b87a44, #9a5f30); box-shadow: inset 0 0 0 2px #7a4520, inset 0 0 0 5px #c48a52, 0 10px 24px rgba(70,40,15,.22); }
.trunk::before { content: ""; position: absolute; inset: 5px; border-radius: 16px; border: 1.5px dashed rgba(255,232,196,.45); pointer-events: none; }
.trunk-lid { position: relative; height: 74px; margin-bottom: 8px; border-radius: 12px 12px 4px 4px; overflow: hidden;
  background: radial-gradient(circle at 50% 0, rgba(255,255,255,.08), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23573040'/%3E%3Cpath d='M0 12L12 0L24 12L12 24Z' fill='none' stroke='%23683a4c' stroke-width='1'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%237c4a5e'/%3E%3C/svg%3E");
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.25); }
.trunk-lid::before, .trunk-lid::after { content: ""; position: absolute; top: 0; bottom: 0; width: 16px; background: linear-gradient(90deg, #6e3f1d, #8a5229 40%, #6e3f1d); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.trunk-lid::before { left: 18%; } .trunk-lid::after { right: 18%; }
.trunk-tag { position: absolute; left: 50%; top: 12px; transform: translateX(-50%) rotate(-2deg); z-index: 1; display: grid; justify-items: center; gap: 0; min-width: 150px; padding: 5px 16px 6px; border-radius: 6px 6px 6px 6px; background: #f6ecd6; color: #4a3020; line-height: 1.25; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.trunk-tag::before { content: ""; position: absolute; left: -9px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #573040; box-shadow: inset 0 0 0 2px #c9a24a; }
.trunk-tag small { font-size: 10px; letter-spacing: .12em; color: #9a7a52; }
.trunk-tag b { font-size: 14.5px; }
.trunk-tag span { font-size: 11px; color: #7a5a40; }
.view[data-page=gear] .trunk .gear-grid { padding: 14px; gap: 14px; border-radius: 4px 4px 12px 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23573040'/%3E%3Cpath d='M0 12L12 0L24 12L12 24Z' fill='none' stroke='%23683a4c' stroke-width='1'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%237c4a5e'/%3E%3C/svg%3E");
  box-shadow: inset 0 10px 16px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.25); }
.view[data-page=gear] .trunk .gear-grid::before, .view[data-page=gear] .trunk .gear-grid::after, .view[data-page=gear] .trunk .gear-grid > *::before { content: none; display: none; }
.view[data-page=gear] .trunk .gear-grid > * { box-shadow: 0 4px 12px rgba(0,0,0,.3); border: 0; }
.gear-pocket { position: relative; height: 68px; margin: -4px -4px 2px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #3e2230, #4c2a3a); box-shadow: inset 0 3px 8px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.3); }
.gear-art { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
.gear-art .ga-band rect { fill: #2a1520; opacity: .78; }
.gear-art .ga-band rect + rect { fill: #2a1520; }
.gear-art .ga-spark { animation: qdTwinkle 2.4s ease-in-out infinite; }
.gp-tag { position: absolute; right: 8px; bottom: 6px; padding: 1px 8px; border-radius: 99px; background: rgba(246,236,214,.92); color: #5a3a24; font-size: 11px; font-weight: 700; }
.gear-card.legend .gear-pocket { background: radial-gradient(circle at 80% 30%, rgba(255,214,120,.25), transparent 60%), linear-gradient(180deg, #3e2230, #4c2a3a); }
@media (max-width: 560px) { .trunk { padding: 7px; border-radius: 16px; } .view[data-page=gear] .trunk .gear-grid { padding: 9px; gap: 10px; } .trunk-lid { height: 66px; } }

/* 게시판 댓글 상자 — 더 옅게 */
.bd-cmt { background: color-mix(in srgb, var(--ink) 2.5%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 5%, transparent); }
.bd-cmt.reply { background: color-mix(in srgb, var(--ink) 1.5%, var(--sheet)); }
.bd-cmt.replying { background: color-mix(in srgb, var(--accent) 5%, var(--sheet)); }

/* 그만두기 · 지우기 버튼 — 한눈에 보이게, 모양은 통일 */
.btn.stop { display: inline-flex; align-items: center; gap: 5px; background: color-mix(in srgb, var(--bad) 7%, var(--sheet)); border: 1px solid color-mix(in srgb, var(--bad) 28%, transparent); color: var(--bad); font-weight: 600; }
.btn.stop:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 14%, var(--sheet)); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.btn.stop .ico, .btn.danger .ico { width: 14px; height: 14px; stroke: currentColor; flex: none; }
.btn.danger:not(.quiet):not(.stop) { display: inline-flex; align-items: center; gap: 5px; background: color-mix(in srgb, var(--bad) 90%, #000); border-color: transparent; color: #fff; font-weight: 700; box-shadow: 0 2px 8px color-mix(in srgb, var(--bad) 28%, transparent); }
.btn.danger:not(.quiet):not(.stop):hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 76%, #000); color: #fff; }
.btn.danger:not(.quiet):not(.stop):disabled { box-shadow: none; }
.statusline .btn.stop, .small .btn.stop { padding: 2px 9px; }
/* 게시판 댓글의 답글 · 지우기 */
.cm-act { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 2px 8px; border: 0; border-radius: 99px; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.5; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-2); transition: background .15s, color .15s; }
.cm-act .ico { width: 12px; height: 12px; stroke: currentColor; }
.cm-act:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: color-mix(in srgb, var(--accent) 85%, var(--ink)); }
.cm-act.del { background: color-mix(in srgb, var(--bad) 8%, transparent); color: var(--bad); }
.cm-act.del:hover { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.bd-replyto .cm-act { margin-left: 2px; }

/* 먹이 고르기 — 작고 단정하게 */
.cr-foods { gap: 3px; }
.cr-foods > .small { font-size: 12px; }
.cr-foods .chips { gap: 4px; }
.chip.food-chip { gap: 3px; min-height: 0; padding: 2px 9px 2px 6px; font-size: 12px; line-height: 1.5; border-radius: 99px; }
.chip.food-chip .ico, .chip.food-chip svg { width: 12px; height: 12px; }
.chip.food-chip .faint { font-size: 11px; }
.food-chip .fc-eff { font-size: 11px; }

/* ---------- 예언자 일보 의뢰: 대화 고르기 ---------- */
.quest-story.pt { display: grid; gap: 12px; }
.pt-step { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: color-mix(in srgb, var(--accent) 85%, var(--ink)); }
.pt-log { display: grid; gap: 6px; max-height: 180px; overflow-y: auto; padding: 2px; }
.pt-me { display: flex; justify-content: flex-end; }
.pt-me span { max-width: 85%; padding: 6px 12px; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--accent) 14%, var(--sheet)); font-size: 13px; }
.pt-reply { font-size: 13px; color: var(--ink-2); font-style: italic; padding: 0 6px; }
.pt-say { display: flex; gap: 10px; align-items: flex-start; }
.pt-av { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(160deg, #f3e3c6, #d9b98a); color: #5a3a1a; font-weight: 800; font-size: 18px; box-shadow: inset 0 0 0 2px #fff8, 0 2px 6px rgba(0,0,0,.12); }
.pt-say > div { display: grid; gap: 3px; padding: 9px 13px; border-radius: 4px 14px 14px 14px; background: color-mix(in srgb, var(--ink) 4%, var(--sheet)); box-shadow: inset 0 0 0 1px var(--rule); }
.pt-say b { font-size: 13px; color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.pt-say p { margin: 0; line-height: 1.55; }
.pt-opts { display: grid; gap: 7px; }
.pt-opt { display: grid; gap: 3px; text-align: left; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--sheet); color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.45; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.pt-opt:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); background: color-mix(in srgb, var(--accent) 6%, var(--sheet)); }
.pt-opt:active { transform: scale(.99); }
.pt-need { display: inline-flex; align-items: center; gap: 4px; justify-self: start; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.pt-need .ico { width: 11px; height: 11px; }
.pt-opt.met .pt-need { background: color-mix(in srgb, var(--good) 14%, transparent); color: color-mix(in srgb, var(--good) 80%, var(--ink)); }
.pt-opt.unmet .pt-need { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); }
.pt-opt.unmet > span:last-child { color: var(--ink-2); }
.pt-hint { text-align: center; }
.pt-fail { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--bad) 8%, var(--sheet)); color: var(--bad); }
.pt-fail .ico { width: 22px; height: 22px; flex: none; }
.pt-fail > div { display: grid; gap: 2px; }
.pt-fail .small { color: var(--ink-2); }
.quest-story.pt.lose .pt-log .pt-reply:last-child { color: var(--bad); font-style: normal; font-weight: 600; }
.quest-story.pt.win h3 { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.pt-narr { margin: 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, #c9a24a 10%, var(--sheet)); border-left: 3px solid #c9a24a; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.shrine-quick { padding-top: 10px; border-top: 1px dashed var(--rule); gap: 10px; flex-wrap: wrap; }
.shrine-quick .small { display: inline-flex; align-items: center; gap: 5px; }
.shrine-quick .small .ico { width: 14px; height: 14px; }
.panel .shrine-entry { display: grid; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--rule); }
.panel .shrine-entry b { display: inline-flex; align-items: center; gap: 6px; }
.panel .shrine-entry b .ico { width: 16px; height: 16px; }
.panel .shrine-entry .shrine-quick { border-top: 0; padding-top: 2px; }
.pill.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); font-weight: 700; }

/* ---------- 요리: 따뜻한 주방, 화덕 위 프라이팬 ---------- */
.panel.cook-lab, .gb-open .panel.cook-lab, [data-tone] .panel.cook-lab { gap: 12px; color: #4a2f1e !important; border-color: #e3c49a !important; box-shadow: var(--lift);
  background: radial-gradient(circle at 75% 25%, rgba(255, 190, 110, .28), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect width='28' height='28' fill='%23fbf1e1'/%3E%3Cpath d='M0 .5H28M.5 0V28' stroke='%23efdcc0' stroke-width='1'/%3E%3C/svg%3E") !important; }
.cook-lab .trek-title { color: #6a3a1c; }
.cook-lab .eyebrow { color: #b0703a; }
.cook-lab .small, .cook-lab .muted { color: #7a5a40; }
.cook-lab .faint { color: #a08066; }
.cook-lab .bl-title { color: #4a2f1e; }
.ck-mastery { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: #fff8ee; box-shadow: inset 0 0 0 1px #ecd5b4; }
.ck-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; background: linear-gradient(180deg, #f6b65c, #e08a2e); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 2px 6px rgba(200, 110, 30, .35); }
.ck-badge .ico { width: 14px; height: 14px; stroke: #fff; }
.ck-mastery .track { background: #f0dcc0; } .ck-mastery .fill { --fc: #e08a2e; background: linear-gradient(90deg, #f6b65c, #e08a2e); }
.ck-book { display: grid; gap: 5px; align-content: start; padding: 10px; border-radius: 12px; background: #fffaf2; box-shadow: inset 0 0 0 1px #ecd5b4, 0 3px 10px rgba(120, 70, 30, .08); max-height: 420px; overflow-y: auto; }
.ck-book .eyebrow { padding-left: 4px; }
.ck-card { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; font-size: 14.5px; color: #4a2f1e; border: 1px dashed transparent; }
.ck-card:hover { background: #fdeed8; }
.ck-card.on { background: #fde3c0; border-color: #e7b77c; }
.ck-card:not(.ready) { opacity: .62; }
.ck-card .bl-lv { color: #a07a55; } .ck-card.ready .bl-lv { color: #c26a1e; font-weight: 700; }
.cook-lab .bl-vial { background: #fff; border: 1px solid #ecd5b4; color: #4a2f1e; }
.cook-lab .bl-vial.ok b { color: #2f7a4a; } .cook-lab .bl-vial.no b { color: #c0442e; }
.cook-lab .bl-odds { color: #7a5a40; } .cook-lab .bl-odds .track { background: #f0dcc0; } .cook-lab .bl-odds .fill { background: linear-gradient(90deg, #f6b65c, #e08a2e); }
.cook-lab .bl-result.ok { background: #fde3c0; color: #8a4512; }
.ck-parts { line-height: 1.5; }
.kpan { width: 240px; height: 190px; overflow: visible; }
.kp-stove { fill: #5a3e30; } .kp-grill { fill: #2e2420; }
.kp-fire path { fill: #ff9a3c; transform-origin: 50% 100%; transform-box: fill-box; animation: rmFlame .5s ease-in-out infinite alternate; }
.kp-fire path:nth-child(2) { fill: #ffcf4a; animation-delay: .15s; }
.kp-pan { fill: #34363c; } .kp-rim { fill: #4a4d55; stroke: #22242a; stroke-width: 2; } .kp-handle { stroke: #6b4a2e; stroke-width: 9; stroke-linecap: round; }
.kp-panwrap { transform-origin: 120px 125px; }
.kp-food ellipse { stroke: rgba(0,0,0,.18); stroke-width: 1; }
.kp-steam path { fill: none; stroke: #ffffffb0; stroke-width: 3; stroke-linecap: round; opacity: 0; animation: cdSteam 2.4s ease-out infinite; }
.kp-sizzle circle { fill: #fff3c4; opacity: 0; }
.kpan.toss .kp-panwrap { animation: kpToss .55s ease-in-out infinite; }
.kpan.toss .kp-food { animation: kpHop .55s ease-in-out infinite; }
.kpan.toss .kp-sizzle circle { animation: kpSizzle .5s ease-out infinite; }
.kpan.toss .kp-fire path { animation-duration: .25s; }
.kp-dish { fill: #fffdf8; stroke: #d9c3a3; stroke-width: 2; }
.kp-plus { font: 800 18px var(--f-display, sans-serif); fill: #e08a2e; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.kp-plate { opacity: 0; animation: kpPlate .7s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes kpToss { 0%, 100% { transform: rotate(0) translateY(0); } 35% { transform: rotate(-6deg) translateY(-6px); } 60% { transform: rotate(3deg) translateY(2px); } }
@keyframes kpHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-26px); } 70% { transform: translateY(-4px); } }
@keyframes kpSizzle { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx, 4px), -22px); } }
@keyframes kpPlate { 0% { opacity: 0; transform: translate(calc(var(--dx) * .2), 50px) scale(.4); } 100% { opacity: 1; transform: translate(var(--dx), 0) scale(1); } }
@media (max-width: 900px) { .ck-book { max-height: 220px; } }
@media (prefers-reduced-motion: reduce) { .kpan * { animation: none !important; } .kp-plate { opacity: 1; } }
/* 능력치·과목: 어디에 도움이 되는지 */
.use-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.use-chips span { padding: 1px 8px; border-radius: 999px; font-size: 11px; line-height: 1.6; background: color-mix(in srgb, var(--accent) 8%, transparent); color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }
.subj-row .subj-uses { grid-column: 1 / -1; padding: 0 0 4px; }
@media (max-width: 600px) { .ck-mastery { grid-template-columns: auto minmax(0, 1fr); } .ck-mastery > .small { grid-column: 1 / -1; } .ck-badge { white-space: nowrap; } }

/* 양호실 침대에 푹 쉬기 */
.ab-bed { --ab: #3f9a8a; }
.bed-box { display: grid; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #3f9a8a 6%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #3f9a8a 22%, transparent); }
.bed-box.on { background: color-mix(in srgb, #3f9a8a 12%, var(--sheet)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #3f9a8a 45%, transparent); }
.bed-box > .row b { display: inline-flex; align-items: center; gap: 6px; } .bed-box > .row b .ico { width: 16px; height: 16px; }
.bed-bar { position: relative; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.bed-bar > div { position: absolute; top: 0; bottom: 0; }
.bb-now { left: 0; background: var(--hp); border-radius: 99px 0 0 99px; }
.bb-10 { background: color-mix(in srgb, var(--hp) 55%, transparent); }
.bb-30 { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--hp) 30%, transparent) 0 4px, transparent 4px 7px); }
.bed-box.on .bb-10 { animation: bedGlow 1.6s ease-in-out infinite; }
@keyframes bedGlow { 50% { opacity: .55; } }
.bed-fc { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-2); }
.bed-fc b { color: var(--ink); }

/* 요리 도구별 모양·움직임 */
.kp-pot { fill: #4a4d55; } .kpan .kp-rim { fill: #5c606a; stroke: #2a2c32; stroke-width: 2; }
.kp-soup { stroke: rgba(0,0,0,.15); } .kp-soup.oil { fill: #e9b64a; }
.kp-bub circle { fill: #fff6; opacity: 0; animation: cdBub 1.6s ease-in infinite; }
.kp-bub.many circle { fill: #fff3c0; animation-duration: .7s; }
.kp-ladle path { stroke: #8a6a4a; stroke-width: 5; stroke-linecap: round; fill: none; } .kp-ladle ellipse { fill: #8a6a4a; }
.kp-ladle { transform-origin: 140px 60px; }
.kpan.toss .kp-ladle { animation: kpStir .8s linear infinite; }
.kpan.toss .kp-soup { animation: cdSwirl 1s linear infinite; transform-origin: 120px 84px; }
.kpan.toss .kp-bub circle { animation-duration: .6s; }
.kp-fry rect { stroke: rgba(0,0,0,.2); animation: kpBob 1.2s ease-in-out infinite; }
.kpan.toss .kp-fry rect { animation-duration: .4s; }
.kpan.toss.ks-fry .kp-bub circle { animation-duration: .35s; }
.kp-spout { stroke: #4a4d55; stroke-width: 8; stroke-linecap: round; fill: none; }
.kp-hand { stroke: #3a3c42; stroke-width: 4; fill: none; stroke-linecap: round; }
.kp-pour { stroke: #9aa85a; stroke-width: 4; fill: none; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; opacity: 0; }
.kp-kettle { transform-origin: 92px 132px; }
.kpan.toss .kp-kettle { animation: kpTilt 1.3s ease-in-out forwards; }
.kpan.toss .kp-pour { animation: kpPour 1.3s ease-in-out forwards; }
.kp-cupb { fill: #fffdf8; stroke: #d9c3a3; stroke-width: 2; }
.kp-tea { transform-origin: 170px 126px; }
.kpan.toss .kp-tea { animation: kpFill 1.3s ease-out forwards; }
.kp-brick { fill: #9a4e34; } .kp-brick2 { fill: #b5603e; } .kp-mouth { fill: #2a1610; }
.kp-ofire path { fill: #ff9a3c; transform-origin: 50% 100%; transform-box: fill-box; animation: rmFlame .6s ease-in-out infinite alternate; } .kp-ofire path:nth-child(2) { fill: #ffcf4a; }
.kp-crust { stroke: #8a4a1e; stroke-width: 2.5; fill: none; stroke-linecap: round; }
.kp-peel { stroke: #8a6a4a; stroke-width: 6; stroke-linecap: round; }
.kp-pie { transition: transform .3s; }
.kpan.toss.ks-oven .kp-pie, .kpan.toss.ks-oven .kp-peel { animation: kpIn 1.3s ease-in-out forwards; }
.kpan.toss.ks-oven .kp-ofire path { animation-duration: .25s; }
.kpan.toss.ks-oven .kp-mouth { animation: kpGlow .5s ease-in-out infinite alternate; }
.kp-coal circle { fill: #3a2a24; animation: kpCoal 1.4s ease-in-out infinite alternate; }
.kp-stick { stroke: #8a6a4a; stroke-width: 3; stroke-linecap: round; }
.kp-sk rect { stroke: rgba(0,0,0,.2); }
.kp-sk { transform-origin: 120px 120px; transform-box: view-box; }
.kpan.toss .kp-sk { animation: kpTurn .5s ease-in-out infinite; }
.kpan.toss .kp-coal circle { animation-duration: .3s; }
.kp-table { fill: #b07a4e; } .kp-bowl { fill: #e9e2d6; stroke: #c9b89c; stroke-width: 2; } .kp-bowlrim { fill: #f5efe4; stroke: #c9b89c; stroke-width: 2; }
.kp-spoon path { stroke: #c9a24a; stroke-width: 5; stroke-linecap: round; fill: none; } .kp-spoon ellipse { fill: #c9a24a; }
.kp-spoon { transform-origin: 150px 70px; }
.kpan.toss .kp-spoon { animation: kpStir .6s linear infinite; }
.kpan.toss .kp-mix { animation: kpToss .45s ease-in-out infinite; transform-origin: 120px 106px; }
@keyframes kpStir { 0% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } 100% { transform: rotate(-14deg); } }
@keyframes kpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes kpTilt { 0% { transform: rotate(0); } 30%, 85% { transform: rotate(26deg); } 100% { transform: rotate(0); } }
@keyframes kpPour { 0%, 25% { opacity: 0; stroke-dashoffset: 60; } 40%, 85% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes kpFill { 0%, 30% { transform: scaleY(.2); opacity: .3; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes kpIn { 0% { transform: translateX(0); } 50%, 100% { transform: translateX(-4px) translateY(-6px) scale(.96); } }
@keyframes kpGlow { from { fill: #2a1610; } to { fill: #5a2410; } }
@keyframes kpCoal { from { fill: #3a2a24; } to { fill: #c4502a; } }
@keyframes kpTurn { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.6); } }

/* 능력치·과목 상세 설명: 누르거나 손을 올리면 회색 글씨로 */
.use-more { display: grid; gap: 4px; justify-items: start; }
.um-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3, var(--ink-2)); padding: 1px 8px 1px 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.um-btn .ico { width: 12px; height: 12px; }
.um-btn:hover, .use-more.open .um-btn { color: var(--ink-2); background: color-mix(in srgb, var(--ink) 9%, transparent); }
.um-body { display: none; font-size: 12px; line-height: 1.55; color: color-mix(in srgb, var(--ink) 50%, transparent); }
.use-more.open .um-body { display: block; }
@media (hover: hover) { .use-more:hover .um-body { display: block; } }
.subj-row .subj-uses { grid-column: 1 / -1; padding: 0 0 4px; }

/* 휴게실 소파·밤 보내기 */
.bed-box.couch { background: color-mix(in srgb, #c07a1a 6%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c07a1a 22%, transparent); }
.bed-box.couch.on { background: color-mix(in srgb, #c07a1a 12%, var(--sheet)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #c07a1a 45%, transparent); }
.bed-box.couch .bb-now { background: var(--st); } .bed-box.couch .bb-10 { background: color-mix(in srgb, var(--st) 55%, transparent); } .bed-box.couch .bb-30 { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--st) 30%, transparent) 0 4px, transparent 4px 7px); }
.ab-sleep { --ab: #5b5fb0; }
.night-box { display: grid; gap: 9px; margin-top: 6px; padding: 12px; border-radius: 14px; background: linear-gradient(170deg, #252a4e, #1a1d38); color: #e8eaff; box-shadow: inset 0 0 0 1px #3a3f70; }
.night-box .small, .night-box .faint { color: #b8bce8; } .night-box .g-eff { color: #ffe08a; }
.night-box > .row b { display: inline-flex; align-items: center; gap: 6px; } .night-box > .row b .ico { width: 16px; height: 16px; }
.nb-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nb-kind { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; align-content: start; padding: 10px; border-radius: 12px; background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff1c; color: #e8eaff; }
.nb-kind:hover { background: #ffffff16; }
.nb-kind.on { background: #ffffff22; box-shadow: inset 0 0 0 2px #ffe08a; }
.nb-kind > span:last-child { font-size: 12px; line-height: 1.45; color: #b8bce8; }
.nb-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ffffff18; }
.nb-ico .ico { width: 16px; height: 16px; stroke: #ffe08a; }
.nb-opts .seg button { color: #e8eaff; }
.night-box .seg { background: #ffffff12; } .night-box .seg button.on { background: #ffe08a; color: #2a2a4a; }
.night-box select { background: #ffffff14; color: #e8eaff; border-color: #ffffff30; }
.night-box .btn:not(.primary):not(.stop) { background: #ffffff12; color: #e8eaff; border-color: #ffffff26; }
.night-box .track { background: #ffffff18; }
.nb-sky { position: relative; height: 54px; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 80% 30%, #3a3f78, #1c2042); }
.nb-sky i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; animation: qdTwinkle 2.6s ease-in-out infinite; }
.nb-moon { position: absolute; right: 16px; top: 10px; width: 28px; height: 28px; border-radius: 50%; box-shadow: -7px 3px 0 0 #ffe8a8; }
.nb-z { position: absolute; left: 14px; bottom: 6px; font-weight: 800; color: #b8bce8; letter-spacing: .2em; animation: nbZ 2.4s ease-in-out infinite; }
@keyframes nbZ { 0%, 100% { opacity: .4; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }
.nk-homework .nb-sky { background: radial-gradient(circle at 20% 70%, #6a4a1a, #2a1d10 70%); }
.quest-story.night-done .nd-lines { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; }
.quest-story.night-done .nd-lines p { margin: 0; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, #5b5fb0 7%, var(--sheet)); font-size: 13px; }
@media (max-width: 700px) { .nb-kinds { grid-template-columns: 1fr; } }
.attr-cell { align-content: start; } .attr-cell > .btn { align-self: end; } .um-btn { line-height: 1.7; height: auto; }
/* 우편 벽돌 배경: 크고 희미하게, 이음새가 끊기지 않게 */
.view[data-page=post] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23c2b6a0' stroke-width='1.4' opacity='.32'%3E%3Cpath d='M0 0.7H240M0 60.7H240M0.7 0V60M120.7 0V60M60.7 60V120M180.7 60V120'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 120px; background-color: transparent; }
:root[data-theme="dark"] .view[data-page=post] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2' opacity='.06'%3E%3Cpath d='M0 0.7H240M0 60.7H240M0.7 0V60M120.7 0V60M60.7 60V120M180.7 60V120'/%3E%3C/g%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .view[data-page=post] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2' opacity='.06'%3E%3Cpath d='M0 0.7H240M0 60.7H240M0.7 0V60M120.7 0V60M60.7 60V120M180.7 60V120'/%3E%3C/g%3E%3C/svg%3E"); } }
/* 원예: 새 화분 놓기 칸 */
.pot-card.add { border: 2px dashed color-mix(in srgb, var(--g-stuff, #4a8a35) 45%, transparent) !important; background: color-mix(in srgb, var(--g-stuff, #4a8a35) 5%, var(--sheet)) !important; justify-items: center; text-align: center; }
.pot-card.add.none { opacity: .8; }
.view[data-page=post] { background: none !important; position: relative; min-height: calc(100vh - 160px); }
.view[data-page=post]::before { content: ""; position: absolute; inset: -12px -28px 0; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23c2b6a0' stroke-width='1.4' opacity='.3'%3E%3Cpath d='M0 0.7H240M0 60.7H240M0.7 0V60M120.7 0V60M60.7 60V120M180.7 60V120'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 120px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-composite: intersect; }
.view[data-page=post] > * { position: relative; z-index: 1; }
:root[data-theme="dark"] .view[data-page=post]::before { opacity: .25; filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .view[data-page=post]::before { opacity: .25; filter: invert(1); } }

/* 휴게실 방 그림 */
.rest-room { gap: 10px; }
.rr-scene { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 600 / 220; box-shadow: inset 0 0 0 1px var(--rule); }
.rr-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rr-wall { fill: color-mix(in srgb, var(--hc) 18%, #f3e6cf); } .rr-floor { fill: #8a5a33; } .rr-skirt { stroke: #6a4226; stroke-width: 4; }
.rr-win { fill: #1f2a52; stroke: #6a4226; stroke-width: 5; } .rr-winbar { stroke: #6a4226; stroke-width: 3; } .rr-moon { fill: #ffe8a8; }
.rr-rug { fill: color-mix(in srgb, var(--hc) 70%, #000 10%); opacity: .55; }
.rr-post, .rr-frame { fill: #5a3a22; } .rr-canopy { fill: var(--hc); } .rr-curtain { fill: none; stroke: var(--hc); stroke-width: 10; opacity: .75; }
.rr-quilt { fill: color-mix(in srgb, var(--hc) 75%, #fff); } .rr-pillow { fill: #fffaf0; }
.rr-sofaback, .rr-sofaarm { fill: color-mix(in srgb, var(--hc) 80%, #3a1a10); } .rr-sofaseat { fill: color-mix(in srgb, var(--hc) 65%, #fff 5%); } .rr-cushion { fill: #f3d58a; }
.rr-blanket { fill: none; stroke: #f3e6cf; stroke-width: 12; stroke-linecap: round; }
.rr-mantel { fill: #9a8a78; } .rr-shelf { fill: #6a4226; } .rr-hearth { fill: #2a1610; } .rr-log { fill: #6a4226; } .rr-candle { fill: #ffd25a; filter: drop-shadow(0 0 4px #ffb84a); }
.rr-flames path { fill: #ff9a3c; transform-origin: 50% 100%; transform-box: fill-box; animation: rmFlame .6s ease-in-out infinite alternate; } .rr-flames path:nth-child(2) { fill: #ffd25a; animation-delay: .2s; }
.rr-zz { font: 800 16px var(--f-display, sans-serif); fill: #fff; paint-order: stroke; stroke: #0004; stroke-width: 3px; animation: nbZ 2.4s ease-in-out infinite; }
.rr-svg g { transition: filter .2s, opacity .2s; }
.rr-scene:has(.rr-spot.on) .rr-svg g:not(.on) { opacity: .62; }
.rr-svg g.on { filter: drop-shadow(0 0 10px rgba(255, 220, 140, .85)); }
.rr-spot { all: unset; position: absolute; cursor: pointer; border-radius: 12px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; box-sizing: border-box; }
.rr-spot:hover { background: rgba(255, 255, 255, .12); }
.rr-spot.on { box-shadow: inset 0 0 0 2px rgba(255, 224, 138, .95); }
.rr-tag { padding: 2px 10px; border-radius: 99px; font-size: 12px; background: rgba(30, 22, 15, .72); color: #fff8e8; white-space: nowrap; }
.rr-spot.on .rr-tag { background: #ffe08a; color: #3a2510; }
.nap-box { display: grid; gap: 7px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #e07a2e 7%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #e07a2e 25%, transparent); }
.nap-box > .row b { display: inline-flex; align-items: center; gap: 6px; } .nap-box > .row b .ico { width: 16px; height: 16px; }
@media (max-width: 600px) { .rr-tag { font-size: 11px; padding: 1px 6px; } .rr-tag b { display: block; } }
@media (max-width: 600px) { .rr-scene { aspect-ratio: auto; height: 160px; } .rr-sub { display: none; } .rr-tag { font-size: 12px; padding: 2px 9px; } .rr-tag b { display: inline; } }
.dragon-foe .trek-acts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tk-act.a-feed .tk-ico { background: #b5703a; }
@media (max-width: 700px) { .dragon-foe .trek-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dragon-foe .tk-act.a-feed { grid-column: 1 / -1; } }
.rr-stripe { fill: color-mix(in srgb, var(--hc) 32%, #f3e6cf); opacity: .55; }
.rr-pin { fill: #c9a24a; opacity: .45; }
.rr-wains { fill: #7a4a2a; opacity: .55; }
.gift-btn { background: linear-gradient(180deg, #f6c87a, #e3a24a) !important; border-color: transparent !important; color: #4a2a10 !important; }
.gift-btn:disabled { opacity: .5; }
/* 입학 소식 */
.msg.welcome-msg { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 4px 0; border-radius: 12px; background: color-mix(in srgb, var(--wc) 10%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wc) 30%, transparent); }
.welcome-msg .wm-ico { font-size: 18px; }
.welcome-msg .wm-text { flex: 1; font-weight: 600; color: color-mix(in srgb, var(--wc) 55%, var(--ink)); }
.welcome-msg .t { font-size: 11px; color: var(--ink-3, var(--ink-2)); }

/* ---------- 왼쪽 위: 기숙사 색 리본 ---------- */
.rail-brand { display: flex; align-items: flex-start; gap: 10px; }
.brand-ribbon { flex: none; position: relative; width: 16px; height: 46px; margin-top: -22px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 80%, #000) 0 2px, var(--rc) 2px calc(100% - 2px), color-mix(in srgb, var(--rc) 80%, #000) calc(100% - 2px));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.brand-ribbon::after { content: ""; position: absolute; left: 3px; right: 3px; top: 0; bottom: 14px; border-left: 1px dashed rgba(255,255,255,.45); border-right: 1px dashed rgba(255,255,255,.45); }
.rb-t { min-width: 0; }
:root[data-rail="icon"] .brand-ribbon { margin: -18px auto 0; }

/* ---------- 위쪽 줄: 체력·마력·기력·피로도를 현재 위치 아래에 ---------- */
:root { --fg: #8a6fc0; }
.statusbar { flex-wrap: wrap !important; row-gap: 6px; }
.statusbar .where { order: 1; }
.statusbar .sb-right { order: 2; margin-left: auto; }
.statusbar .meters { order: 3; flex: 0 1 640px !important; max-width: 640px !important; min-width: 0 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.meters .meter.fatigue.hi .mlab, .meters .meter.fatigue.hi .num { color: var(--bad) !important; }
.statusbar .meters::after { content: none; }
@media (max-width: 700px) { .statusbar .meters { flex-basis: 100% !important; max-width: none !important; gap: 8px; } .meters .meter-top .faint { display: none; } }
/* 왼쪽 아래 접속 중: 2열로 같은 간격 */
.online-rail .or-names { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 6px; }
.online-rail .or-n { display: flex; width: 100%; min-width: 0; padding: 3px 6px; font-size: 12px; line-height: 1.35; justify-content: flex-start; }
.online-rail .or-n > span, .online-rail .or-n .or-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-rail .or-n .or-t { display: none; }
.online-rail .or-n.more { grid-column: 1 / -1; justify-content: center; }

/* 기숙사 리본: 통통하고 깔끔하게 */
.brand-ribbon { width: 22px; height: 48px; margin-top: -22px; border-radius: 0 0 2px 2px; background: var(--rc);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.brand-ribbon::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 0; background: linear-gradient(90deg, rgba(0,0,0,.12) 0 3px, rgba(255,255,255,.18) 3px 5px, transparent 5px calc(100% - 5px), rgba(255,255,255,.18) calc(100% - 5px) calc(100% - 3px), rgba(0,0,0,.12) calc(100% - 3px)); }
.rail-brand { gap: 12px; }

/* 오늘 할 일: 다 한 것도 같은 색(기숙사 색)으로 */
.check.ring.done .ck-ring { background: conic-gradient(var(--accent) 100%, transparent 0); }
.check.ring.done .ck-ic { background: var(--accent); color: var(--on-accent, #fff); }
.check.ring.done .ck-ic .ico { stroke: currentColor; }
/* 왼쪽 아래 내 학생 카드: 동그란 얼굴 */
.me .mono-av { clip-path: none; border-radius: 50%; width: 40px; height: 40px; overflow: hidden; position: relative; }
/* 제목 옆 기숙사 리본: 왼쪽 아래 학생 표식과 같은 모양으로 깔끔하게 */
.brand-ribbon { width: 24px; height: 28px; margin-top: 2px; background: var(--rc); clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); filter: none; border-radius: 0; }
.brand-ribbon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 55%); border: 0; }
.rail-brand { align-items: center; gap: 10px; }
:root[data-rail="icon"] .brand-ribbon { margin: 2px auto 0; }
/* 맨 위로 */
.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--sheet); color: var(--ink-2); box-shadow: 0 4px 14px rgba(0,0,0,.16), inset 0 0 0 1px var(--rule); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--accent); }
.to-top .ico { width: 20px; height: 20px; }
.page-end { display: flex; justify-content: center; padding: 18px 0 6px; }
@media (max-width: 900px) { .to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 14px; } }

/* 과목 숙련도: 숫자 옆 상세 설명(흐릿하게) */
.subj-row { grid-template-columns: 84px 28px auto minmax(80px, 1fr) minmax(0, 1.3fr) !important; }
.subj-row .use-more.subj-uses { display: contents; }
.subj-row .use-more.subj-uses .um-btn { grid-column: auto; justify-self: start; }
.subj-row .use-more.subj-uses .um-body { grid-column: 1 / -1; order: 99; padding: 0 0 4px 4px; }
.um-btn { color: color-mix(in srgb, var(--ink) 38%, transparent); background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.um-btn:hover, .use-more.open .um-btn { color: color-mix(in srgb, var(--ink) 60%, transparent); }
.um-body { color: color-mix(in srgb, var(--ink) 38%, transparent); }
@media (max-width: 900px) { .subj-row { grid-template-columns: 78px 24px auto 1fr !important; } .subj-row > .small { grid-column: 1 / -1; } }

/* 제목 옆 기숙사 리본: 위에서 길게 내려오는 메달 리본 */
.rail-brand { position: relative; display: block !important; padding-left: 46px !important; min-height: 50px; }
.brand-ribbon { position: absolute !important; left: 8px; top: -16px; width: 28px !important; height: 70px !important; margin: 0 !important; background: var(--rc) !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%) !important; filter: drop-shadow(0 2px 3px rgba(0,0,0,.22)) !important; border-radius: 0; }
.brand-ribbon::before { content: ""; position: absolute; left: 50%; top: 38px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b44a 45%, #a8781e 100%); box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(120,80,10,.4); z-index: 1; }
.brand-ribbon::after { content: "" !important; position: absolute; inset: 0 !important; border: 0 !important;
  background: linear-gradient(90deg, rgba(0,0,0,.14) 0 3px, transparent 3px calc(100% - 3px), rgba(0,0,0,.14) calc(100% - 3px)) !important; }
.rail-brand .rb-t { display: block; padding-top: 2px; white-space: nowrap; font-size: 18px; letter-spacing: -.02em; }
.rail-brand .rb-t small { white-space: normal; }
:root[data-rail="icon"] .rail-brand { padding-left: 0 !important; min-height: 46px; }
:root[data-rail="icon"] .brand-ribbon { left: 50%; margin-left: -14px !important; }

/* 리본: 앞 메달 없이 */
.brand-ribbon::before { content: none !important; display: none !important; }

/* 아래쪽 상태 독: 체력·마력·기력·피로도 + 시클 + 통금, 반투명 · 접기 */
.hud { position: sticky; bottom: 12px; z-index: 25; display: flex; justify-content: center; padding: 0 16px; margin-top: 8px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-in { display: flex; align-items: center; gap: 14px; width: min(860px, 100%); padding: 9px 10px 9px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--sheet) 72%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); box-shadow: 0 6px 22px rgba(30, 20, 10, .10); }
.hud .meters { flex: 1; min-width: 0; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hud .meters::after { content: none; }
.hud-side { display: flex; align-items: center; gap: 6px; flex: none; }
.hud-fold { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; }
.hud-fold .ico { width: 16px; height: 16px; transform: rotate(180deg); }
.hud-fold:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.hud.fold { justify-content: flex-end; }
.hud-mini { display: inline-flex; align-items: center; gap: 12px; padding: 7px 10px 7px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--ink-2);
  background: color-mix(in srgb, var(--sheet) 62%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); box-shadow: 0 4px 16px rgba(30, 20, 10, .08); opacity: .85; transition: opacity .2s; }
.hud-mini:hover { opacity: 1; }
.hud-mini > span { display: inline-flex; align-items: center; gap: 3px; }
.hud-mini .ico { width: 14px; height: 14px; }
.hud-mini b { color: var(--ink); font-weight: 600; }
.hud-mini .hm-coin .ico { color: #c9a227; }
.hud-mini .hud-caret { color: var(--ink-3); }
.purse-pop.at-hud { top: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.stage.in-mine .hud-in, .stage.in-mine .hud-mini, .stage.in-trek .hud-in, .stage.in-trek .hud-mini { background: color-mix(in srgb, #15161a 70%, transparent); border-color: #2a2a33; }
.to-top { bottom: 92px; }
@media (max-width: 900px) {
  .hud { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); padding: 0 10px; }
  .to-top { bottom: calc(148px + env(safe-area-inset-bottom, 0px)); }
  .purse-pop.at-hud { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 700px) {
  .hud-in { flex-wrap: wrap; gap: 8px 10px; padding: 8px 8px 8px 12px; }
  .hud .meters { flex-basis: 100%; order: 2; gap: 8px; }
  .hud-side { order: 1; margin-right: auto; }
  .hud-fold { order: 1; }
  .hud-mini { gap: 9px; }
}
.hud .meters { order: 1 !important; } .hud-side { order: 2; } .hud-fold { order: 3; }
.hud-in { width: min(952px, 100%); }
@media (max-width: 700px) { .hud .meters { order: 3 !important; } .hud-side { order: 1; } .hud-fold { order: 2; } }
/* 상태 독: 화면 아래에 딱 붙게 */
.hud { bottom: 0; padding: 0 12px; margin-top: 10px; }
.hud-in { border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: 0 -4px 18px rgba(30, 20, 10, .08); padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)); }
.hud.fold { padding-right: 16px; }
.hud-mini { border-radius: 12px 12px 0 0; border-bottom: 0; padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)); }
.to-top { bottom: 84px; }
.purse-pop.at-hud { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 900px) {
  .hud { bottom: var(--tabbar-h, 57px); padding: 0 6px; }
  .hud-in, .hud-mini { padding-bottom: 8px; }
  .to-top { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  .purse-pop.at-hud { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== 기숙사 휴게실 꾸밈 ===== */
.rr-svg .rr-star { fill: #fff6d8; animation: rrTw 2.6s ease-in-out infinite; }
.rr-svg .rr-sun { fill: #ffe39a; filter: drop-shadow(0 0 6px #ffd76a); } .rr-svg .rr-sun.low { fill: #ffb27a; }
.rr-cloud { animation: rrCloud 38s linear infinite; } .rr-cloud ellipse { fill: #fff; opacity: .85; }
.rr-night .rr-cloud ellipse { fill: #b9c3e6; opacity: .25; } .rr-dusk .rr-cloud ellipse { fill: #ffe0d0; opacity: .7; }
.rr-wframe { fill: none; stroke: #6a4226; stroke-width: 5; } .rr-wbar { fill: none; stroke: #6a4226; stroke-width: 2.4; }
.rr-mtn { fill: #4b5d86; } .rr-mtn.b { fill: #33416a; }
.rr-night .rr-mtn { fill: #18213f; } .rr-night .rr-mtn.b { fill: #0f1630; }
@keyframes rrTw { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes rrCloud { from { transform: translateX(-30px); } to { transform: translateX(160px); } }

/* 래번클로: 탑 꼭대기 · 별 천장 · 하늘 창 */
.rr-h-ravenclaw .rr-wall { fill: #e4e9f2; } .rr-h-ravenclaw .rr-stripe { fill: #8fa3c9; opacity: .32; } .rr-h-ravenclaw .rr-pin { fill: #b98a4a; }
.rr-h-ravenclaw .rr-wframe, .rr-h-ravenclaw .rr-wbar { stroke: #9a7442; }
.rr-dome { fill: #1f2f5c; } .rr-star.dome { fill: #e9c77c; }
.rr-mobile { transform-box: view-box; transform-origin: 398px 12px; animation: rrSwing 4s ease-in-out infinite alternate; }
.rr-string { stroke: #8a7a62; stroke-width: 1; fill: none; } .rr-mstar { fill: #d9a94a; }
@keyframes rrSwing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* 슬리데린: 호수 아래 · 돌벽 · 초록 등불 */
.rr-stone-bg { fill: #2b3631; } .rr-stone { fill: #46544d; stroke: #36433d; stroke-width: 1; } .rr-stone.b { fill: #3f4d46; }
.rr-h-slytherin .rr-floor { fill: #2c2a26; } .rr-h-slytherin .rr-skirt { stroke: #1d1b18; } .rr-h-slytherin .rr-wains { fill: #1f2a25; opacity: .7; }
.rr-h-slytherin .rr-mantel { fill: #5b6660; } .rr-h-slytherin .rr-rug { fill: #1d4a3a; opacity: .7; }
.rr-wframe.sly, .rr-wbar.sly { stroke: #6f7d74; } .rr-wframe.sly { stroke-width: 6; }
.rr-rays path { fill: #c8ffe6; opacity: .12; animation: rrRay 5s ease-in-out infinite alternate; } .rr-rays path:nth-child(2) { animation-delay: 1.6s; } .rr-rays path:nth-child(3) { animation-delay: 3s; }
.rr-night .rr-rays path { fill: #9fe0c8; opacity: .05; }
.rr-kelp { fill: none; stroke: #2d6b3c; stroke-width: 4; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: rrSway 3.2s ease-in-out infinite alternate; }
.rr-bub { fill: none; stroke: #d6fff1; stroke-width: .9; opacity: 0; animation: rrBub 4.5s ease-in infinite; }
.rr-fish { fill: #9ec9b2; animation: rrFish 16s linear infinite; } .rr-fish.b { fill: #7aa892; animation-duration: 22s; animation-delay: -9s; } .rr-eye { fill: #0b2a22; }
.rr-tent { fill: none; stroke: #4f6e62; stroke-width: 6; stroke-linecap: round; opacity: .55; transform-box: fill-box; transform-origin: 50% 100%; animation: rrTent 14s ease-in-out infinite; }
.rr-silt { fill: #0b241e; opacity: .7; }
.rr-chain { stroke: #6b7a72; stroke-width: 1.2; stroke-dasharray: 2 2; } .rr-lampcap { fill: #2f3a35; }
.rr-lampglow { fill: #7dffb7; filter: drop-shadow(0 0 6px #43e08f); animation: rrGlow 3s ease-in-out infinite alternate; }
@keyframes rrRay { from { opacity: .05; } to { opacity: .2; } }
@keyframes rrSway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes rrBub { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-96px); opacity: 0; } }
@keyframes rrFish { 0% { transform: translate(-40px, 44px); } 50% { transform: translate(100px, 36px); } 100% { transform: translate(210px, 48px); } }
@keyframes rrTent { 0%, 70%, 100% { transform: translateY(70px); } 82%, 90% { transform: translateY(0) rotate(4deg); } }
@keyframes rrGlow { from { opacity: .65; } to { opacity: 1; } }

/* 후플푸프: 둥근 창 너머 잔디 · 걸린 화분 */
.rr-h-hufflepuff .rr-wall { fill: #f6ead0; } .rr-h-hufflepuff .rr-stripe { fill: #e8c65e; opacity: .35; } .rr-h-hufflepuff .rr-pin { fill: #a87a3a; }
.rr-wframe.round { stroke: #8a5a2e; stroke-width: 6; } .rr-wbar.round { stroke: #8a5a2e; }
.rr-hill { fill: #7fbf5a; } .rr-hill.b { fill: #5fa244; }
.rr-night .rr-hill { fill: #2c4a2c; } .rr-night .rr-hill.b { fill: #1f3a22; } .rr-dusk .rr-hill { fill: #8aa850; } .rr-dusk .rr-hill.b { fill: #6b8a3c; }
.rr-stem { stroke: #3f7a2e; stroke-width: 1.2; } .rr-bloom { fill: #ffd84a; } .rr-bloom.w { fill: #fff8e6; }
.rr-night .rr-bloom { fill: #b8a84a; } .rr-night .rr-bloom.w { fill: #c9c4b0; }
.rr-flower { transform-box: fill-box; transform-origin: 50% 100%; animation: rrSway 2.4s ease-in-out infinite alternate; }
.rr-bee { animation: rrBee 7s ease-in-out infinite; } .rr-beeb { fill: #ffc531; } .rr-beest { stroke: #3a2a10; stroke-width: 1; } .rr-wing { fill: #fff; opacity: .8; }
.rr-fly { fill: #f4ff9a; filter: drop-shadow(0 0 3px #e6ff6a); animation: rrFly 4s ease-in-out infinite alternate; }
.rr-hang { transform-box: fill-box; transform-origin: 50% 0; animation: rrHang 5s ease-in-out infinite alternate; }
.rr-pot { fill: #c06a3a; } .rr-vine { fill: none; stroke: #4f8f3a; stroke-width: 1.6; stroke-linecap: round; } .rr-leaf { fill: #6aaa48; }
.rr-beam { fill: #8a5a2e; opacity: .7; }
@keyframes rrBee { 0% { transform: translate(-30px, -6px); } 25% { transform: translate(-6px, -18px); } 50% { transform: translate(22px, -4px); } 75% { transform: translate(4px, 4px); } 100% { transform: translate(-30px, -6px); } }
@keyframes rrFly { from { transform: translate(0, 0); opacity: .3; } to { transform: translate(6px, -8px); opacity: 1; } }
@keyframes rrHang { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } }

/* 그리핀도르: 금박 액자 초상화 · 휘장 */
.rr-h-gryffindor .rr-wall { fill: #f1dccb; } .rr-h-gryffindor .rr-stripe { fill: #b0352b; opacity: .3; } .rr-h-gryffindor .rr-pin { fill: #d4a33a; opacity: .6; }
.rr-gilt { fill: #c9962f; stroke: #8a6418; stroke-width: 1.5; } .rr-gilt.in { fill: #e6be5a; stroke: #a87a22; }
.rr-gem { fill: #e9c76a; stroke: #8a6418; }
.rr-canvas { fill: #4a3a2c; } .rr-canvas.b { fill: #3c4a3a; } .rr-drape { fill: #7a2a24; }
.rr-dress { fill: #e48aa0; } .rr-face { fill: #f3d2b4; } .rr-hair { fill: #6a3a1e; } .rr-smile { fill: none; stroke: #8a3a2a; stroke-width: .9; stroke-linecap: round; }
.rr-eyes circle { fill: #2a1a10; } .rr-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: rrBlink 4.5s infinite; }
.rr-lady { transform-box: fill-box; transform-origin: 50% 100%; animation: rrLady 5s ease-in-out infinite alternate; }
.rr-fan path { fill: #f6e6a8; stroke: #b08a3a; stroke-width: .6; } .rr-fan { transform-box: fill-box; transform-origin: 0% 100%; animation: rrFan .9s ease-in-out infinite alternate; }
.rr-robe { fill: #4a3a8a; } .rr-hat { fill: #3a2e6e; } .rr-beard { fill: none; stroke: #eee; stroke-width: 2.4; stroke-linecap: round; } .rr-shut { stroke: #2a1a10; stroke-width: .9; }
.rr-wiz { transform-box: fill-box; transform-origin: 50% 100%; animation: rrNod 3.6s ease-in-out infinite; }
.rr-pz { font: 800 10px var(--f-display, sans-serif); fill: #fff; paint-order: stroke; stroke: #0005; stroke-width: 2px; animation: nbZ 2.6s ease-in-out infinite; }
.rr-tower { fill: none; stroke: #2a2f4a; stroke-width: 1.6; }
.rr-bnr { fill: #9e2a22; } .rr-bnrline { stroke: #d4a33a; stroke-width: 1.4; } .rr-bnrmark { fill: none; stroke: #e6be5a; stroke-width: 3; stroke-linejoin: round; }
.rr-banner { transform-box: view-box; transform-origin: 88px 0; animation: rrHang 6s ease-in-out infinite alternate; }
@keyframes rrBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes rrLady { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes rrFan { from { transform: rotate(-12deg); } to { transform: rotate(10deg); } }
@keyframes rrNod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg) translateY(1px); } }
@media (prefers-reduced-motion: reduce) { .rr-svg * { animation: none !important; } }
.rr-scene:has(.rr-spot.on) .rr-svg g:not(.on) { opacity: 1; }
.rr-scene:has(.rr-spot.on) .rr-svg :is(.rr-bed, .rr-sofa, .rr-fire):not(.on) { opacity: .62; }
.rr-svg g:not(.rr-bed):not(.rr-sofa):not(.rr-fire) { transition: none; }
/* 접속 중 목록: 칭호를 이름 위에 작게 */
.online-rail .or-n .or-t { display: block !important; font-size: 10px; line-height: 1.2; padding-left: 9px; max-width: 100%; color: color-mix(in srgb, var(--accent) 85%, var(--ink-3)); }
.online-rail .or-names { align-items: end; }
/* 프로필 창: 가로 스크롤 없이 넓게 */
.modal:has(.prof-modal) { width: min(820px, calc(100vw - 24px)); overflow-x: hidden; }
.prof-modal, .prof-modal > *, .prof-card > *, .prof-main, .prof-main > * { min-width: 0; max-width: 100%; }
.prof-modal .prof-body { max-height: none; overflow: visible; }
.prof-modal .row { flex-wrap: wrap; }
.prof-modal .prof-tabs, .prof-modal .ach-cats { flex-wrap: wrap !important; overflow: visible !important; row-gap: 6px; }
.prof-modal .prof-tabs > * { flex: none; }
/* 접속 중 이름: 점·배지·이름을 촘촘하게 */
.online-rail .or-names { gap: 2px 2px; }
.online-rail .or-n { padding: 2px 3px; }
.online-rail .or-nm { gap: 2px; }
.online-rail .or-nm .mbadge { margin: 0 -1px; transform: scale(.85); }
.online-rail .or-n .dot { width: 5px; height: 5px; margin-right: 1px; }
.online-rail .or-n .or-t { padding-left: 7px; }
/* 긴 이름은 옆으로 흘러가며 보여 주기 */
.online-rail .or-nm { display: flex !important; text-overflow: clip !important; }
.online-rail .or-nm .hn { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.online-rail .or-nm .hn .mq { display: inline-block; }
.online-rail .or-nm .hn:not(.marq) { text-overflow: ellipsis; }
.online-rail .or-nm .hn.marq { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 8px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 8px), transparent); }
.online-rail .or-nm .hn.marq .mq { animation: orMarq var(--mqt, 5s) ease-in-out infinite alternate; }
.online-rail .or-n:hover .hn.marq .mq { animation-play-state: paused; }
@keyframes orMarq { 0%, 18% { transform: translateX(0); } 82%, 100% { transform: translateX(var(--mq, 0)); } }
@media (prefers-reduced-motion: reduce) { .online-rail .or-nm .hn.marq .mq { animation: none; } }
.online-rail .or-nm { align-self: stretch; width: 100%; max-width: 100%; }
.online-rail .or-nm .hn { flex: 0 1 auto; text-align: left; margin-left: 1px; }
/* 능력치·숙련도 상세 설명: 이름 바로 옆, 더 작은 글씨 */
.attr-um { display: contents; }
.at-nm { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.um-btn { font-size: 11px !important; padding: 0 7px 0 5px !important; line-height: 1.6 !important; }
.um-btn .ico { width: 11px !important; height: 11px !important; }
.um-body { font-size: 11px !important; line-height: 1.5; }
@media (hover: hover) { .use-more:hover .um-body { display: none; } .use-more:has(.um-btn:hover) .um-body, .use-more.open .um-body { display: block; } }
/* 화면보다 좁은 덩어리는 가운데로 */
.room-frame, .room-frame.big, .deco-card, .deco-top .prof-card { margin-inline: auto; }
.room-box { justify-items: center; }
.room-box > :not(.room-frame) { justify-self: stretch; }
.help { max-width: none; }
.deco-top { justify-items: center; } .deco-top > :not(.room-frame):not(.deco-card) { justify-self: stretch; }
/* 관리자 물건 고르기 */
.item-pick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 260px; min-width: 0; }
.item-pick .item-q { flex: 1 1 140px; min-width: 120px; width: auto; }
.item-pick select { flex: 2 1 180px; min-width: 0; width: auto; }
.item-pick .item-q-n { flex: none; }
/* 내용이 짧은 화면에서도 상태 막대가 맨 아래에 붙게 */
.stage { min-height: 100vh; min-height: 100dvh; }
.hud { margin-top: auto; }
.view { flex: 0 0 auto; }
@media (max-width: 900px) { .stage { min-height: calc(100dvh - var(--tabbar-h, 55px)); } .hud { bottom: var(--tabbar-h, 55px); } }
/* 숨김 중인 내 이름: 회색으로 */
.or-n.hid, .person.hid { opacity: .55; }
.or-n.hid .hn, .or-n.hid .or-t, .person.hid .nm, .person.hid .ttl { color: var(--ink-3) !important; background: none !important; -webkit-text-fill-color: currentColor; }
.or-n.hid .dot, .person.hid .dot { --c: #9aa0a6 !important; background: #9aa0a6 !important; box-shadow: none !important; }
.or-n.hid .mbadge, .person.hid .mbadge { filter: grayscale(1); }
.or-n.hid:hover, .person.hid:hover { opacity: .8; }
/* 이변: 활동 기록(좁게) + 한마디 대화 */
.inc-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: stretch; }
@media (max-width: 860px) { .inc-bottom { grid-template-columns: minmax(0, 1fr); } }
.inc-log-panel .inc-log { max-height: 340px; overflow-y: auto; }
.inc-log-panel .inc-log-row { font-size: 13px; gap: 6px; padding: 5px 0; }
.inc-chat { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ic-list { flex: 1; min-height: 150px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ic-empty { margin: auto; text-align: center; font-size: 13px; }
.ic-msg { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; line-height: 1.5; padding: 5px 9px; border-radius: 10px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule); max-width: 92%; align-self: flex-start; }
.ic-msg.me { align-self: flex-end; background: color-mix(in srgb, var(--accent) 9%, var(--sheet)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, var(--rule)); }
.ic-msg .who { font-size: 12px; color: var(--pc, var(--ink)); }
.ic-msg .ic-t { flex: 1 1 auto; min-width: 0; word-break: break-word; color: var(--ink); }
.ic-msg .t { font-size: 11px; margin-left: auto; }
.ic-msg .del { all: unset; cursor: pointer; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--ink-3); opacity: .5; }
.ic-msg .del:hover { opacity: 1; color: var(--bad); }
.ic-msg .del .ico { width: 10px; height: 10px; }
.ic-msg .mbadge { transform: scale(.85); margin: 0 -2px; }
.ic-form { display: flex; gap: 6px; }
.ic-form input { flex: 1; min-width: 0; }
/* 이변 화면 정리 */
.inc-tale .inc-guide-in { display: grid; gap: 4px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.inc-tale .inc-guide-in .prose { margin: 0; font-size: 14.5px; }
.inc-tips .inc-fat { padding-top: 8px; margin-top: 2px; border-top: 1px dashed var(--rule); }
.inc-tac-panel { gap: 10px; }
.inc-tac-panel .inc-tacs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.inc-tac-panel .inc-tac { padding: 10px 12px; }
.ip-groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; }
@media (max-width: 760px) { .ip-groups { grid-template-columns: minmax(0, 1fr); } }
.ip-g { display: grid; gap: 6px; align-content: start; }
.inc-people .ip-g .inc-slots { grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)); gap: 6px; }
.inc-people .inc-slot { min-height: 42px; padding: 5px 6px; border-radius: 10px; font-size: 13px; }
/* 아래: 활동 기록 넓게 · 한마디는 일반 대화창처럼 */
.inc-bottom { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) !important; }
@media (max-width: 860px) { .inc-bottom { grid-template-columns: minmax(0, 1fr) !important; } }
.inc-chat { gap: 6px; }
.inc-chat .ic-list { flex: 1; min-height: 160px; max-height: 300px; gap: 4px; padding: 8px 10px; font-size: 13px; border-radius: 10px; background: var(--sheet-2, color-mix(in srgb, var(--ink) 3%, transparent)); border: 1px solid var(--rule); }
.inc-chat .ic-list .msg { line-height: 1.45; }
.inc-chat .ic-list .msg .mbadge { transform: scale(.85); margin: 0 1px 0 -2px; }
.inc-chat .ic-form input { height: 34px; }
.inc-main .inc-tac-panel .inc-tacs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .inc-tac-panel .row.between { flex-wrap: wrap; gap: 4px 10px; }
.inc-bottom { align-items: start !important; } .inc-log-panel { min-height: 0; }
/* 이변 머리: 제목 → 이야기 → 해결도 → 큰 참가/행동 칸 */
.inc-head .inc-tale { display: grid; gap: 12px; }
.inc-head .inc-tale .inc-story { margin: 0; }
.inc-head .ih-prog { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--rule); }
.inc-head .ia { padding: 18px 20px; gap: 14px 18px; border-radius: 16px; min-height: 84px; }
.inc-head .ia b { font-size: 18px; }
.inc-head .ia .small { font-size: 13px; }
.inc-head .ia .btn { min-height: 46px; padding: 0 22px; font-size: 14.5px; border-radius: 14px; }
.inc-head .ia .btn.big { min-height: 52px; padding: 0 28px; font-size: 16px; }
.inc-head .ia .btn .ico { width: 18px; height: 18px; }
.inc-head .ia-timer { font-size: 28px !important; }
@media (max-width: 600px) { .inc-head .ia { padding: 14px; } .inc-head .ia > .row, .inc-head .ia > .btn { width: 100%; } .inc-head .ia .btn { flex: 1; justify-content: center; } }
.inc-main .ip-groups { grid-template-columns: minmax(0, 1fr); gap: 10px; } .inc-main .inc-people .ip-g .inc-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } .inc-head .inc-tale .prose { max-width: none; }
.inc-head .inc-story { max-width: none; }
/* 이변: 함께하는 사람 가로로 넓게 */
.inc-people .ip-groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px 18px; }
@media (max-width: 760px) { .inc-people .ip-groups { grid-template-columns: minmax(0, 1fr) !important; } }
.inc-people .ip-g .inc-slots { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px; }
.inc-people .inc-slot { min-height: 40px; padding: 6px 10px; flex-direction: row; justify-content: space-between; gap: 6px; text-align: left; }
.inc-people .inc-slot.open { justify-content: center; }
.inc-people .inc-slot.taken { background: color-mix(in srgb, var(--pc, var(--accent)) 7%, var(--sheet)); box-shadow: inset 3px 0 0 var(--pc, var(--accent)), 0 0 0 1px var(--rule); }
.inc-people .inc-slot.taken.me { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.inc-people .inc-slot.taken b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.inc-people .inc-slot.taken .small { flex: none; font-size: 11px; }
@media (max-width: 480px) { .inc-people .ip-g .inc-slots { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* 이변: 활동 기록에 한 줄 이야기 */
.inc-log-panel .inc-log { max-height: 460px; overflow-y: auto; gap: 8px; }
.ilr-list { display: grid; gap: 6px; }
.ilr { --gc: #8a9aa8; display: grid; gap: 3px; padding: 8px 10px 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--gc) 6%, var(--sheet)); box-shadow: inset 3px 0 0 var(--gc); }
.ilr.g-good { --gc: #3f8f6a; } .ilr.g-great { --gc: #c08a1e; } .ilr.g-excellent { --gc: #8a5cc4; } .ilr.g-miss { --gc: #b0565a; }
.ilr-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.ilr-top .ilr-who { font-size: 13px; }
.ilr-top .ap { font-size: 11px; padding: 0 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); line-height: 1.7; }
.ilr-top .ap.full { background: color-mix(in srgb, #d0582a 14%, transparent); color: #b0481e; }
.ilr-top .gr { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 0 7px; border-radius: 99px; line-height: 1.7; color: #fff; background: var(--gc); }
.ilr-top .ilr-d { font-weight: 700; color: var(--gc); }
.ilr.g-miss .ilr-d { color: var(--ink-3); }
.ilr-top .t { margin-left: auto; }
.ilr-say { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.ilr.g-miss .ilr-say { color: color-mix(in srgb, var(--gc) 70%, var(--ink-2)); }
/* 오른쪽 한마디 */
.inc-side .inc-chat .ic-list { min-height: 140px; max-height: 260px; }
/* 알림 눌러서 바로 가기 */
.note-link { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; width: 100%; padding: 6px 4px; border-radius: 8px; }
.note-link:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.note-link .nl-go { color: var(--accent); display: grid; place-items: center; } .note-link .nl-go .ico { width: 14px; height: 14px; }
.toast.linked { cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
/* ===== 이변 화면 v3 ===== */
/* 함께하는 사람 + 해결하면 받는 것 */
.inc-people { gap: 10px; }
.inc-reward.in { display: grid; gap: 6px; margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #c9962a 7%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9962a 28%, transparent); }
.inc-reward.in > b { display: flex; align-items: center; gap: 6px; font-size: 13px; } .inc-reward.in > b .ico { width: 15px; height: 15px; color: #b8862a; }
.inc-reward.in .ir-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
@media (max-width: 700px) { .inc-reward.in .ir-list { grid-template-columns: minmax(0, 1fr); } }
.inc-reward.in .ir-list li { display: flex; gap: 6px; align-items: flex-start; }
/* 작전 + 알아 둘 것 */
.inc-plan { gap: 10px; }
.inc-plan > .row.between { flex-wrap: wrap; gap: 4px 10px; }
.ipl-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 820px) { .ipl-grid { grid-template-columns: minmax(0, 1fr); } }
.ipl-grid .inc-tacs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
@media (max-width: 480px) { .ipl-grid .inc-tacs { grid-template-columns: minmax(0, 1fr) !important; } }
.ipl-tips { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ipl-tips .inc-fat { padding-top: 8px; margin-top: 2px; border-top: 1px dashed var(--rule); }
/* 활동 기록: 색 없이 한 줄, 판정만 작은 색 조각 */
.inc-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: stretch !important; }
@media (max-width: 860px) { .inc-bottom { grid-template-columns: minmax(0, 1fr) !important; } }
.inc-log-panel .inc-log { max-height: 320px; gap: 6px; }
.ilr-list { display: flex; flex-direction: column; gap: 3px; }
.ilr { display: flex; align-items: baseline; gap: 7px; padding: 3px 0; background: none !important; box-shadow: none !important; font-size: 13px; line-height: 1.5; border-bottom: 1px dashed color-mix(in srgb, var(--rule) 70%, transparent); }
.ilr:last-child { border-bottom: 0; }
.ilr .t { flex: none; font: 11px var(--f-mono); color: var(--ink-3); }
.ilr .gr-chip { flex: none; align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 0 5px; border-radius: 4px; line-height: 1.6; color: #fff; background: #8a9aa8; }
.gr-chip.g-good { background: #3f8f6a; } .gr-chip.g-great { background: #c08a1e; } .gr-chip.g-excellent { background: #8a5cc4; } .gr-chip.g-miss { background: #a7a29a; }
.ilr .ilr-say { flex: 1; min-width: 0; color: var(--ink-2); }
.ilr .ilr-d { flex: none; font-size: 12px; color: var(--ink-3); font-weight: 600; }
/* 한마디: 색 덜어 낸 대화창 */
.inc-bottom .inc-chat .ic-list { background: transparent !important; border: 1px solid var(--rule); min-height: 180px; max-height: 280px; }
.inc-bottom .inc-chat .msg .who { color: var(--ink) !important; }
.ilr.g-miss .ilr-say { color: var(--ink-2) !important; } .ilr { align-items: center; } .ilr .ilr-say { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ilr:hover .ilr-say { white-space: normal; }
/* 이변 v4: 알아 둘 것 + 작전(읽기 전용), 활동 기록 넓게, 한마디는 그 아래 */
.inc-plan .ipl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
@media (max-width: 820px) { .inc-plan .ipl-grid { grid-template-columns: minmax(0, 1fr); } }
.ipl-tacs { display: grid; gap: 4px; align-content: start; }
.ipl-tac { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--rule); font-size: 13px; }
.ipl-tac:last-child { border-bottom: 0; }
.ipl-tac .it-l { flex: none; font-size: 11px; color: var(--ink-3); min-width: 56px; }
.ipl-tac .it-e { color: #a2741c; font-size: 12px; }
.ipl-tac.lack { opacity: .55; } .ipl-tac .it-x { font-size: 11px; color: var(--ink-3); }
.inc-log-panel .inc-log { max-height: 380px; }
.ilr .ilr-say { white-space: normal !important; overflow: visible; }
.inc-wrap > .inc-chat .ic-list { background: transparent !important; border: 1px solid var(--rule); min-height: 150px; max-height: 260px; }
.inc-wrap > .inc-chat .msg .who { color: var(--ink) !important; }
/* ===== 이변: 알아 둘 것 (타일) ===== */
.inc-plan { gap: 12px; }
.ik-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .ik-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ik { display: grid; gap: 3px; align-content: start; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 3%, transparent); min-width: 0; }
.ik-l { font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.ik-l .ico { width: 12px; height: 12px; }
.ik-v { font-size: 14.5px; display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-v .ico { width: 15px; height: 15px; color: var(--accent); }
.ik-s { font-size: 11px; color: var(--ink-3); } .ik-s.good { color: var(--good); }
.ik .wchips { display: flex; gap: 4px; flex-wrap: wrap; }
.ik-fat { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto auto; align-items: center; gap: 10px; padding: 4px 2px; }
.ik-fat .track { height: 6px; }
.ik-fat b { font-size: 13px; }
@media (max-width: 520px) { .ik-fat { grid-template-columns: auto minmax(0, 1fr) auto; } .ik-fat .ik-s { grid-column: 1 / -1; } }
.ik-tacs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px dashed var(--rule); }
@media (max-width: 760px) { .ik-tacs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ik-tac { display: grid; gap: 2px; align-content: start; font-size: 13px; min-width: 0; }
.ik-tac b { font-size: 13px; }
.ik-tac .ik-e { font-size: 12px; color: #a2741c; line-height: 1.45; }
.ik-tac.lack { opacity: .5; }

/* ===== 이변: 힘 보태기 창 ===== */
.modal:has(.ia2) { width: min(620px, calc(100vw - 24px)); }
.ia2 { display: grid; gap: 16px; }
.ia2-head { display: grid; gap: 6px; }
.ia2-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 20px; }
.ia2-head h3 .ico { width: 18px; height: 18px; color: var(--accent); }
.ia2-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--ink-2); }
.ia2-meta .sep { color: var(--ink-3); }
.ia2-meta .wk { font-weight: 600; color: #a2741c; } .ia2-meta .wk.q { color: var(--ink-3); font-weight: 400; }
.ia2-link { all: unset; cursor: pointer; margin-left: auto; font-size: 12px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ia2-step { display: grid; gap: 8px; }
.ia2-lab { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.ia2-lab .n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; background: var(--accent); color: #fff; }
.ia2-lab .faint { font-weight: 400; font-size: 12px; margin-left: 2px; }
.ia2-seg { display: grid; gap: 6px; }
.ia2-seg.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ia2-seg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .ia2-seg.three { grid-template-columns: minmax(0, 1fr); } }
.ia2-opt { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 3px; align-content: start; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--rule); background: var(--sheet); transition: border-color .15s, background .15s; }
.ia2-opt:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.ia2-opt b { display: flex; align-items: center; gap: 5px; font-size: 14.5px; }
.ia2-opt b .ico { width: 15px; height: 15px; }
.ia2-opt > span { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.ia2-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--sheet)); box-shadow: inset 0 0 0 1px var(--accent); }
.ia2-opt .fit { margin-left: auto; font-size: 10px; font-weight: 600; padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.ia2-note { font-size: 12px; color: var(--ink-3); } .ia2-note.good { color: var(--good); }
.ia2-list { display: grid; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.ia2-row { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 16px 68px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; border-top: 1px solid var(--rule); background: var(--sheet); }
.ia2-row:first-child { border-top: 0; }
.ia2-row:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 5%, var(--sheet)); }
.ia2-row .rd { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.ia2-row.on { background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); }
.ia2-row.on .rd { box-shadow: inset 0 0 0 3.5px var(--accent); }
.ia2-row .tl { font-size: 11px; color: var(--ink-3); }
.ia2-row .tt { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia2-row .te { font-size: 12px; color: #a2741c; text-align: right; }
.ia2-row.weak .tt, .ia2-row.weak .te { opacity: .55; }
.ia2-row:disabled { cursor: not-allowed; opacity: .5; }
@media (max-width: 520px) { .ia2-row { grid-template-columns: 16px minmax(0, 1fr); } .ia2-row .tl { display: none; } .ia2-row .te { grid-column: 2; text-align: left; } }
.ia2-pv { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.ia2-pv-top { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.ia2-pv-top b { font-size: 24px; color: var(--ink); }
.ia2-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.ia2-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); transition: width .25s; }
.ia2-pv-s { font-size: 12px; color: var(--ink-3); }
/* ===== 오늘: 대연회장 카드 + 바로 가기 + 반반 ===== */
.home-hall { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
@media (max-width: 760px) { .home-hall { grid-template-columns: minmax(0, 1fr); } }
.hall-card { gap: 10px; background: linear-gradient(160deg, color-mix(in srgb, #c9962a 9%, var(--sheet)), var(--sheet)) !important; }
.hall-card > .row b { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; } .hall-card > .row b .ico { color: #b8862a; }
.hc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-tag { font-size: 12px; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-2); }
.hc-tag.hot { background: color-mix(in srgb, #c9962a 20%, transparent); color: #8a6418; font-weight: 600; }
.nw-mini { display: grid; gap: 2px; padding-top: 8px; border-top: 1px dashed var(--rule); }
.sc-row { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
@media (max-width: 760px) { .sc-row { grid-template-rows: none; grid-template-columns: 1fr 1fr; } }
.sc-btn { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule), var(--soft, none); transition: transform .12s, box-shadow .12s; min-width: 0; }
.sc-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--rule)), var(--soft, none); }
.sc-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.sc-ic .ico { width: 19px; height: 19px; }
.sc-t { display: grid; gap: 1px; min-width: 0; }
.sc-t b { font-size: 14.5px; }
.sc-t span { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-btn .badge { position: absolute; top: 8px; right: 10px; }
.home-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 860px) { .home-2col { grid-template-columns: minmax(0, 1fr); } }
.home-2col > * { min-width: 0; margin: 0 !important; }
/* ===== 호그와트 소식 (교내 신문) ===== */
.news-box { gap: 10px; background: color-mix(in srgb, #efe3c4 45%, var(--sheet)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #8a6a3a 25%, transparent) !important; }
.nw-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 3px double color-mix(in srgb, var(--ink) 30%, transparent); }
.nw-mast { font-family: var(--f-display); font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.nw-sub { font-size: 12px; color: var(--ink-3); font-style: italic; }
.nw-list { display: grid; gap: 2px; max-height: 360px; overflow-y: auto; }
.nw-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed color-mix(in srgb, var(--rule) 80%, transparent); font-size: 13px; line-height: 1.5; }
.nw-row:last-child { border-bottom: 0; }
.nw-t { flex: none; font: 11px var(--f-mono); color: var(--ink-3); }
.nw-x { min-width: 0; color: var(--ink-2); }
.nw-mini .nw-row { font-size: 13px; padding: 3px 0; }
.nw-empty { font-size: 13px; }
:root[data-theme="dark"] .news-box { background: color-mix(in srgb, #3a3020 40%, var(--sheet)) !important; }
/* 대화 지우기: 옅은 × */
.msg .del { display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0 !important; margin-left: 4px; vertical-align: middle; border-radius: 50%; border: 0; background: none; color: var(--ink-3); opacity: .35; cursor: pointer; transition: opacity .15s, color .15s, background .15s; }
.msg .del .ico { width: 10px; height: 10px; stroke-width: 2; }
.msg:hover .del { opacity: .7; }
.msg .del:hover { opacity: 1; color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
/* 상태 막대 위치 설정 */
:root[data-hud="off"] .hud { display: none !important; }
:root[data-hud="top"] .hud { position: sticky; top: calc(var(--sb-h, 56px) + env(safe-area-inset-top, 0px)); bottom: auto !important; margin-top: 0 !important; z-index: 19; padding: 0 12px; }
:root[data-hud="top"] .hud-in { border-radius: 0 0 14px 14px; border-top: 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); box-shadow: 0 4px 18px rgba(30, 20, 10, .07); padding-bottom: 9px; }
:root[data-hud="top"] .hud-mini { border-radius: 0 0 12px 12px; border-top: 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); padding-bottom: 7px; }
:root[data-hud="top"] .purse-pop.at-hud { top: calc(var(--sb-h, 56px) + 92px); bottom: auto; }
:root[data-hud="top"] .stage { min-height: 0; }
@media (max-width: 900px) { :root[data-hud="top"] .hud { bottom: auto !important; padding: 0 6px; } }
:root:not([data-hud="bottom"]) .to-top { bottom: 22px; }
@media (max-width: 900px) { :root:not([data-hud="bottom"]) .to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
:root[data-hud="top"] .hud-fold .ico { transform: none; } :root[data-hud="top"] .hud-caret .ico { transform: rotate(180deg); }
/* ===== 투표 ===== */
.poll-home { gap: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--sheet)), var(--sheet)) !important; }
.poll-card { display: grid; gap: 8px; }
.poll-card + .poll-card { padding-top: 12px; border-top: 1px dashed var(--rule); }
.pc-head { display: grid; gap: 4px; }
.pc-tag { display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--accent); color: #fff; }
.pc-tag .ico { width: 11px; height: 11px; }
.pc-q { font-size: 16px; line-height: 1.45; }
.pc-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 6px; }
.pc-opt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--rule); background: var(--sheet); font-size: 13px; transition: border-color .15s, background .15s; }
.pc-opt:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.pc-opt .rd { flex: none; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.pc-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--sheet)); font-weight: 600; }
.pc-opt.on .rd { box-shadow: inset 0 0 0 4px var(--accent); }
.nm-item .poll-card { padding: 4px 0; }
.poll-res { gap: 10px; } .poll-res.ended { opacity: .85; }
.pr-list { display: grid; gap: 10px; }
.pr-row { display: grid; gap: 3px; }
.pr-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.pr-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.pr-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.pr-who { line-height: 1.5; }
#poll-form { gap: 8px; }
/* 대화 두상: 동그랗게 */
.c-ava { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; vertical-align: -7px; border-radius: 50%; overflow: hidden; flex: none;
  background: color-mix(in srgb, var(--hc) 22%, var(--sheet)); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--hc) 55%, transparent); }
.c-ava b { font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--hc) 80%, var(--ink)); line-height: 1; }
.c-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.msg.has-ava { padding-left: 30px; text-indent: -30px; }
.msg.has-ava > * { text-indent: 0; }
/* 대화 두상 정렬: 두상 칸 + 글 칸 */
.msg.has-ava { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; align-items: start; padding-left: 0; text-indent: 0; }
.msg.has-ava .c-ava { margin: 0; vertical-align: 0; width: 26px; height: 26px; }
.msg.has-ava .m-body { min-width: 0; padding-top: 3px; line-height: 1.45; }
/* ===== 대화창: 전체 / 장소 / RP 탭 (탭마다 색) ===== */
.chat-tabs { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--rule); }
.chat-tabs .ct { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px 9px; font-size: 13px; font-weight: 600; color: var(--ink-3); border-bottom: 2.5px solid transparent; transition: color .15s, border-color .15s, background .15s; }
.chat-tabs .ct-all { --tc: #c08a1e; } .chat-tabs .ct-place { --tc: #3f8f6a; } .chat-tabs .ct-rp { --tc: #8a5cc4; }
.chat-tabs .ct:hover { color: var(--ink-2); background: color-mix(in srgb, var(--tc) 5%, transparent); }
.chat-tabs .ct.on { color: var(--tc); border-bottom-color: var(--tc); background: color-mix(in srgb, var(--tc) 7%, transparent); }
.chat-tabs .ct::after { content: none !important; }
.chat-tabs .ct-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: var(--tc); }
.chat-tabs .ct-n[hidden] { display: none; }
#chat[data-tab="all"] .chat-form button[type=submit], #chat[data-tab="all"] #chat-form button[type=submit] { background: #c08a1e; }
#chat[data-tab="place"] #chat-form button[type=submit] { background: #3f8f6a; }
#chat[data-tab="rp"] #chat-form button[type=submit] { background: #8a5cc4; }
/* ===== 대화 한 줄: 두상 · 칭호 · 이름 · 옅은 말풍선 · 시간 ===== */
.msg.has-ava .m-body { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; padding-top: 1px; }
.c-ttl { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; color: #8a6418; background: color-mix(in srgb, #e6be5a 16%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c08a1e 40%, transparent); }
.msg.has-ava .mbadge { margin: 0 -2px; transform: scale(.88); }
.msg.has-ava .who { font-size: 13px; }
.msg .bub { display: inline-block; max-width: 100%; padding: 4px 10px; border-radius: 4px 12px 12px 12px; background: color-mix(in srgb, var(--ink) 4.5%, transparent); color: var(--ink); line-height: 1.5; word-break: break-word; }
.msg .bub .btn { margin-left: 4px; }
.msg.has-ava .t { font: 11px var(--f-mono); color: var(--ink-3); margin: 0; }
.msg.has-ava .del { margin-left: -2px; }
:root[data-theme="dark"] .msg .bub { background: color-mix(in srgb, #fff 6%, transparent); }
:root[data-theme="dark"] .c-ttl { color: #e8c06a; background: color-mix(in srgb, #e6be5a 10%, transparent); }
.msg .bub .t { margin-left: 8px !important; font-size: 10px !important; opacity: .8; white-space: nowrap; }
.msg .bub .del { margin-left: 2px !important; vertical-align: -3px; }
/* 대화 탭 4개 · 두상 없이 */
.chat-tabs { grid-template-columns: repeat(4, 1fr) !important; }
.chat-tabs .ct { font-size: 13px; padding: 10px 4px 9px; white-space: nowrap; }
.chat-tabs .ct-house { --tc: var(--hc-me, #3d6fb8); }
#chat[data-tab="house"] #chat-form button[type=submit] { background: var(--hc-me, #3d6fb8); }
.msg.has-ava { display: block; }
.msg.has-ava .m-body { padding-top: 0; }
/* 두상: 전체·사담 탭만 빼고 */
.msg.has-ava { display: grid !important; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.msg.has-ava.no-ava { display: block !important; }
.msg.has-ava .c-ava { margin-top: 0; }
/* ===== 꾸러미 ===== */
.bn-head, .dx-head { gap: 8px; }
.bn-prog { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.bn-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e6be5a, #c08a1e); }
.bn-room { gap: 10px; box-shadow: inset 4px 0 0 var(--rc) !important; }
.bn-room.done { background: color-mix(in srgb, var(--rc) 6%, var(--sheet)) !important; }
.bn-rn { display: inline-flex; align-items: center; gap: 6px; } .bn-rn .ico { color: var(--rc); }
.bn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.bn-card { display: grid; gap: 8px; align-content: start; padding: 11px 12px; border-radius: 14px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule); }
.bn-card.done { background: color-mix(in srgb, var(--good) 7%, var(--sheet)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--good) 35%, var(--rule)); }
.bn-rw { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #a2741c; }
.bn-card.done .bn-rw { color: var(--good); }
.bn-rw .ico { width: 13px; height: 13px; }
.bn-items { display: grid; gap: 4px; }
.bn-it { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 7px; font-size: 13px; padding: 3px 0; }
.bn-it .bn-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-it .bn-n { font-size: 12px; color: var(--ink-2); }
.bn-it.ok .bn-n { color: var(--good); font-weight: 700; }
.bn-it.ok .bn-nm { color: var(--ink-3); }
.bn-it .btn.sm { padding: 2px 9px; min-height: 0; font-size: 12px; }
.bn-no { min-width: 32px; text-align: right; }
/* ===== 도감 ===== */
.dx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.dx-it { all: unset; box-sizing: border-box; display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule); font-size: 12px; text-align: center; cursor: pointer; }
.dx-it:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.dx-it .iti { transform: scale(1.25); }
.dx-it.unknown { cursor: default; color: var(--ink-3); background: color-mix(in srgb, var(--ink) 3%, transparent); box-shadow: none; }
.dx-q { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 8%, transparent); font-weight: 700; color: var(--ink-3); }
/* 대화 칭호: 작고 흐리게 · 방패와 학년이 먼저 */
.c-ttl { height: 15px !important; padding: 0 5px !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 500 !important; opacity: .7; box-shadow: inset 0 0 0 1px color-mix(in srgb, #c08a1e 28%, transparent) !important; background: color-mix(in srgb, #e6be5a 10%, transparent) !important; }
/* 모두의 알: 작은 카드로 촘촘하게 */
.cr-list.compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)) !important; gap: 8px !important; }
.cr-list.compact .cr-mini { padding: 8px 10px !important; gap: 8px !important; align-items: center; }
.cr-list.compact .cr-pic { width: 46px !important; height: 46px !important; flex: none; }
.cr-list.compact .cr-pic svg { width: 100%; height: 100%; }
.cr-list.compact .cr-desc { display: none !important; }
.cr-list.compact .cr-mini-b { gap: 2px !important; min-width: 0; }
.cr-list.compact .cr-mini-b > .small.faint { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-list.compact .btn.sm { padding: 2px 9px; min-height: 0; font-size: 12px; }
/* 꾸러미 · 도감 그림 */
.ha-bundle .bn-crate rect { fill: #b8865a; } .ha-bundle .bn-plank { stroke: #8a5a33; stroke-width: 2; }
.ha-bundle .bn-wick { fill: #d9b27a; } .ha-bundle .bn-handle { stroke: #a87a3a; stroke-width: 4; }
.ha-bundle .bn-ball.a { fill: #c4523f; } .ha-bundle .bn-ball.b { fill: #e6be5a; } .ha-bundle .bn-ball.c { fill: #4f8f3a; }
.ha-bundle .bn-bow path { fill: #c4523f; } .ha-bundle .bn-bow circle { fill: #9e2a22; }
.ha-twinkle path { fill: #f2cf6a; animation: rrTw 2.4s ease-in-out infinite; }
.ha-dex .dx-pg { fill: #fbf3e2; stroke: #c9a876; stroke-width: 1.5; } .ha-dex .dx-pg.b { fill: #f6ecd6; } .ha-dex .dx-spine { stroke: #b08a5a; stroke-width: 2; }
.ha-dex .dx-cell { fill: #e6be5a; opacity: .8; } .ha-dex .dx-cell.q { fill: none; stroke: #c9a876; stroke-dasharray: 3 2; opacity: 1; }
.ha-dex .dx-lens { fill: color-mix(in srgb, #bfe3f2 55%, transparent); stroke: #8a6a4a; stroke-width: 3; } .ha-dex .dx-handle { stroke: #8a6a4a; stroke-width: 5; stroke-linecap: round; }
.hero-bundle { background: linear-gradient(135deg, color-mix(in srgb, #c08a1e 10%, var(--sheet)), var(--sheet)); }
.hero-dex { background: linear-gradient(135deg, color-mix(in srgb, #6a5cc4 9%, var(--sheet)), var(--sheet)); }
/* 물건 설명 창 (도감·상점에서 눌렀을 때) */
.ii-modal { display: grid; gap: 10px; }
.modal:has(.ii-modal) { width: min(460px, calc(100vw - 24px)); }
.ii-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ii-head .iti { transform: scale(1.5); margin: 0 8px; }
.ii-head h3 { margin: 0; font-size: 20px; }
.ii-have { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good); white-space: nowrap; }
.ii-have.none { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-3); }
.ii-desc { margin: 0; line-height: 1.6; color: var(--ink-2); }
.ii-eff { font-size: 13px; }
.ii-src { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.ii-src b { display: inline-flex; align-items: center; gap: 5px; } .ii-src b .ico { width: 13px; height: 13px; color: var(--accent); }
.ii-src ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; }
.cr-leave { color: #8a6a3a; display: inline-flex; align-items: center; gap: 4px; } .cr-leave .ico { width: 12px; height: 12px; }
/* ===== 취미 › 꾸러미: 삼베 바탕 · 나무 선반 · 천 주머니 ===== */
.hobby-body.hb-bundle { position: relative; padding: 16px; border-radius: 22px;
  background: repeating-linear-gradient(0deg, rgba(120, 90, 50, .05) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgba(120, 90, 50, .05) 0 2px, transparent 2px 5px), #f3e7cf;
  box-shadow: inset 0 0 0 1px #e2cfa8; }
:root[data-theme="dark"] .hobby-body.hb-bundle { background: repeating-linear-gradient(0deg, rgba(255, 230, 190, .04) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgba(255, 230, 190, .04) 0 2px, transparent 2px 5px), #2e271d; box-shadow: inset 0 0 0 1px #4a3d2a; }
.bn-ledger { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 12px 16px; border-radius: 14px; background: #fffaf0; box-shadow: 0 2px 0 #d9c39a, 0 0 0 1px #e2cfa8; }
:root[data-theme="dark"] .bn-ledger { background: #3a3124; box-shadow: 0 2px 0 #4a3d2a; }
.bn-ledger .bl-l { display: grid; } .bn-ledger .bl-l b { font-family: var(--f-display); font-size: 24px; line-height: 1; }
.bn-ledger .bl-bar { height: 10px; border-radius: 99px; background: rgba(120, 90, 50, .12); overflow: hidden; }
.bn-ledger .bl-bar i { display: block; height: 100%; border-radius: inherit; background: repeating-linear-gradient(45deg, #e6be5a 0 8px, #d6a83e 8px 16px); }
.bn-ledger > .small { grid-column: 1 / -1; }
.bn-shelf { position: relative; display: grid; gap: 4px; padding: 6px 4px 0; }
.bs-sign { display: flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 14px 6px 8px; border-radius: 10px; background: linear-gradient(#b8865a, #a0703f); color: #fff8e8; box-shadow: 0 2px 0 #7a4f28; margin-left: 6px; }
.bs-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .2); } .bs-ico .ico { width: 14px; height: 14px; }
.bs-sign b { font-size: 14.5px; } .bs-n { font-size: 12px; opacity: .85; }
.bn-shelf.done .bs-sign { background: linear-gradient(#d6a83e, #b8862a); }
.bs-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px 14px; align-items: end; padding: 4px 6px 0; }
.bs-plank { height: 14px; margin: 0 -2px 8px; border-radius: 4px; background: linear-gradient(#a0703f, #7a4f28); box-shadow: 0 4px 6px rgba(80, 50, 20, .25); }
.pouch { --cloth: color-mix(in srgb, var(--rc) 22%, #f6ead2); display: grid; justify-items: center; }
.pouch-top { width: 120px; height: 34px; margin-bottom: -2px; display: block; }
.pt-neck { fill: var(--cloth); stroke: color-mix(in srgb, var(--rc) 45%, #8a6a4a); stroke-width: 1.5; }
.pt-frill { fill: var(--cloth); stroke: color-mix(in srgb, var(--rc) 45%, #8a6a4a); stroke-width: 1.2; }
.pt-cord { fill: none; stroke: #8a5a33; stroke-width: 2.4; stroke-linecap: round; }
.pt-knot { fill: #8a5a33; } .pt-bow path { fill: #c9962f; stroke: #8a6418; stroke-width: 1; } .pt-bow circle { fill: #8a6418; }
.pouch-body { position: relative; width: 100%; display: grid; gap: 8px; padding: 12px 12px 14px; border-radius: 22px 22px 30px 30px / 16px 16px 40px 40px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .5), transparent 55%), repeating-linear-gradient(45deg, rgba(0, 0, 0, .025) 0 3px, transparent 3px 6px), var(--cloth);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rc) 45%, #8a6a4a), inset 0 -10px 18px rgba(80, 50, 20, .08), 0 4px 8px rgba(80, 50, 20, .12); }
:root[data-theme="dark"] .pouch { --cloth: color-mix(in srgb, var(--rc) 30%, #3a3124); }
.pb-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pb-head b { font-size: 14.5px; }
.pb-rw { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: #8a6418; padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, .6); }
.pb-rw .ico { width: 12px; height: 12px; }
.pouch.done .pb-rw { color: var(--good); }
.slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; }
.slot { all: unset; box-sizing: border-box; position: relative; display: grid; justify-items: center; gap: 2px; width: 66px; text-align: center; }
.sl-ring { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(closest-side, #fffaf0 78%, transparent 80%), conic-gradient(#d6a83e calc(var(--p) * 1%), rgba(120, 90, 50, .18) 0); }
:root[data-theme="dark"] .sl-ring { background: radial-gradient(closest-side, #2e271d 78%, transparent 80%), conic-gradient(#d6a83e calc(var(--p) * 1%), rgba(255, 230, 190, .15) 0); }
.sl-ring .iti { transform: scale(1.1); }
.sl-n { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.sl-nm { font-size: 11px; line-height: 1.25; color: var(--ink-3); max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot.none .sl-ring { opacity: .55; filter: grayscale(.6); }
.slot.ok .sl-ring { box-shadow: 0 0 0 2px #e6be5a, 0 0 10px rgba(230, 190, 90, .5); }
.slot.ok .sl-n { color: var(--good); }
.slot.has { cursor: pointer; } .slot.has .sl-ring { animation: slPulse 1.8s ease-in-out infinite; }
.slot.has:hover .sl-ring { transform: scale(1.06); }
.sl-have { position: absolute; top: -4px; right: 4px; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 99px; background: var(--accent); color: #fff; }
@keyframes slPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 168, 62, .0); } 50% { box-shadow: 0 0 0 4px rgba(214, 168, 62, .28); } }
.pb-all { justify-self: center; } .pb-hint { text-align: center; }
.pb-stamp { justify-self: center; transform: rotate(-6deg); font-family: var(--f-display); font-weight: 800; font-size: 14.5px; color: #b0481e; padding: 2px 12px; border: 2px solid #b0481e; border-radius: 8px; opacity: .8; letter-spacing: .1em; }
@media (prefers-reduced-motion: reduce) { .slot.has .sl-ring { animation: none; } }

/* ===== 취미 › 도감: 책상 위에 펼친 책 · 책갈피 리본 ===== */
.hobby-body.hb-dex { position: relative; padding: 16px; border-radius: 22px; background: linear-gradient(90deg, rgba(0, 0, 0, .04) 0 1px, transparent 1px) 0 0 / 46px 100%, linear-gradient(#b58a5e, #9a6f45); box-shadow: inset 0 0 0 1px #8a5f38; }
:root[data-theme="dark"] .hobby-body.hb-dex { background: linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px) 0 0 / 46px 100%, linear-gradient(#4a3826, #3a2b1c); }
.hb-dex > .hero { box-shadow: 0 6px 14px rgba(40, 20, 5, .25); }
.dx-book-wrap { position: relative; padding-top: 30px; }
.dx-marks { position: absolute; top: 0; left: 26px; right: 26px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; z-index: 1; }
.dx-mark { all: unset; cursor: pointer; flex: none; display: grid; justify-items: center; gap: 0; min-width: 52px; padding: 6px 8px 12px; font-size: 12px; font-weight: 700; color: #fff; background: var(--mc); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); transform: translateY(6px); transition: transform .15s; }
.dx-mark span { font-size: 10px; font-weight: 500; opacity: .85; }
.dx-mark:hover { transform: translateY(2px); }
.dx-mark.on { transform: translateY(-2px); padding-bottom: 18px; }
.dx-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: 6px 6px 10px 10px; box-shadow: 0 10px 20px rgba(40, 20, 5, .35), 0 0 0 1px #c9a876; overflow: hidden; }
.dx-spread::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 40px; margin-left: -20px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(80, 50, 20, .14) 45%, rgba(80, 50, 20, .22) 50%, rgba(80, 50, 20, .14) 55%, transparent); }
.dx-page { position: relative; display: grid; align-content: start; gap: 12px; padding: 22px 22px 34px; min-height: 360px; background: linear-gradient(transparent 0 27px, rgba(160, 120, 70, .09) 27px 28px) 0 0 / 100% 28px, #fbf5e6; }
.dx-page.right { background-color: #f8f0dd; }
:root[data-theme="dark"] .dx-page { background: linear-gradient(transparent 0 27px, rgba(255, 230, 190, .05) 27px 28px) 0 0 / 100% 28px, #3a3226; } :root[data-theme="dark"] .dx-page.right { background-color: #362e23; }
.dp-head { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 2px solid rgba(160, 120, 70, .25); }
.dp-head h3 { margin: 0; font-family: var(--f-display); font-size: 24px; }
.dp-head.r { align-content: end; min-height: 62px; gap: 6px; }
.dp-no { position: absolute; bottom: 10px; font: 11px var(--f-mono); color: #a08060; } .dx-page.left .dp-no { left: 22px; } .dx-page.right .dp-no { right: 22px; }
.dx-page .dx-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.dx-page .dx-it { background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(160, 120, 70, .25), 0 2px 0 rgba(160, 120, 70, .15); border-radius: 10px; padding: 10px 6px; }
.dx-page .dx-it:not(.unknown) { transform: rotate(-1deg); } .dx-page .dx-it:nth-child(even):not(.unknown) { transform: rotate(1.2deg); }
.dx-page .dx-it.unknown { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(160, 120, 70, .3); outline: none; border: 0; background-image: none; }
.dx-page .dx-it.unknown { box-shadow: none; border: 1.5px dashed rgba(160, 120, 70, .4); }
.dx-page .dx-q { background: rgba(160, 120, 70, .12); color: rgba(120, 90, 50, .6); }
@media (max-width: 700px) { .dx-spread { grid-template-columns: 1fr; } .dx-spread::after { display: none; } .dx-page.right { border-top: 1px dashed rgba(160, 120, 70, .35); } .dx-page { min-height: 0; } }
.bn-shelf { min-height: 0 !important; height: auto !important; align-content: start; }
.bs-sign { height: auto !important; min-height: 0 !important; align-self: start; justify-self: start; }
.dx-page { padding-top: 40px; }
.bs-row { align-items: start !important; }
/* ===== 꾸러미 v2: 파스텔 · 동글동글 ===== */
.hobby-body.hb-bundle { background: radial-gradient(circle, rgba(232, 150, 160, .18) 1.6px, transparent 2px) 0 0 / 22px 22px, linear-gradient(180deg, #fff5f2, #fdf1e8) !important; box-shadow: inset 0 0 0 1px #f4d9d2 !important; }
:root[data-theme="dark"] .hobby-body.hb-bundle { background: radial-gradient(circle, rgba(232, 150, 160, .12) 1.6px, transparent 2px) 0 0 / 22px 22px, #2e2627 !important; box-shadow: inset 0 0 0 1px #4a3a3c !important; }
.bn-ledger { background: #fff !important; border-radius: 18px !important; box-shadow: 0 2px 10px rgba(220, 140, 140, .14), 0 0 0 1px #f4d9d2 !important; }
:root[data-theme="dark"] .bn-ledger { background: #3a3032 !important; box-shadow: 0 0 0 1px #4a3a3c !important; }
.bn-ledger .bl-l b { color: #d06a7a; }
.bn-ledger .bl-bar { height: 12px !important; background: #fbe7e4 !important; }
.bn-ledger .bl-bar i { background: linear-gradient(90deg, #f7b2bd, #f4c58a) !important; }
.bn-shelf { padding: 14px 12px 12px !important; border-radius: 22px; background: color-mix(in srgb, var(--rc) 7%, #fffdfb); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--rc) 22%, transparent), 0 3px 10px rgba(180, 120, 110, .08); gap: 10px !important; }
:root[data-theme="dark"] .bn-shelf { background: color-mix(in srgb, var(--rc) 10%, #2e2627); }
.bn-shelf::before { content: ""; position: absolute; inset: 6px; border-radius: 17px; border: 1.5px dashed color-mix(in srgb, var(--rc) 28%, transparent); pointer-events: none; }
.bs-sign { margin: 0 !important; padding: 5px 14px 5px 5px !important; border-radius: 99px !important; background: #fff !important; color: var(--ink) !important; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--rc) 35%, transparent), 0 2px 6px rgba(180, 120, 110, .1) !important; position: relative; z-index: 1; }
:root[data-theme="dark"] .bs-sign { background: #3a3032 !important; }
.bs-ico { background: color-mix(in srgb, var(--rc) 22%, #fff) !important; color: color-mix(in srgb, var(--rc) 80%, #000) !important; width: 26px !important; height: 26px !important; }
.bs-n { color: var(--ink-3); opacity: 1 !important; }
.bn-shelf.done .bs-sign { background: linear-gradient(90deg, #fff6d8, #fff) !important; }
.bs-plank { display: none !important; }
.pouch { --cloth: color-mix(in srgb, var(--rc) 16%, #fffaf6) !important; --edge: color-mix(in srgb, var(--rc) 40%, #e8c8c0); }
:root[data-theme="dark"] .pouch { --cloth: color-mix(in srgb, var(--rc) 22%, #3a3032) !important; }
.pt-neck, .pt-frill { stroke: var(--edge) !important; }
.pt-cord { stroke: #e79aa8 !important; stroke-width: 2 !important; }
.pt-bow path { fill: #f7b2bd !important; stroke: #e0899a !important; } .pt-bow circle { fill: #e0899a !important; }
.pt-spark { fill: #f4c58a; animation: rrTw 2s ease-in-out infinite; }
.pouch-body { border-radius: 28px 28px 46px 46px / 22px 22px 52px 52px !important; padding: 12px 12px 18px !important;
  background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .85), transparent 50%), radial-gradient(circle, color-mix(in srgb, var(--rc) 14%, transparent) 1.4px, transparent 1.8px) 0 0 / 14px 14px, var(--cloth) !important;
  box-shadow: inset 0 0 0 1.5px var(--edge), 0 6px 14px rgba(180, 120, 110, .12) !important; }
.pouch-body::after { content: ""; position: absolute; inset: 5px; border-radius: 23px 23px 41px 41px / 18px 18px 47px 47px; border: 1.5px dashed color-mix(in srgb, var(--edge) 70%, transparent); pointer-events: none; }
.pb-head b { color: color-mix(in srgb, var(--rc) 60%, var(--ink)); }
.pb-rw { background: #fff !important; color: #c2862a !important; box-shadow: 0 0 0 1px #f3dcb0; }
.pouch.done .pb-rw { color: #4f9a6a !important; box-shadow: 0 0 0 1px #cfe8d6; }
.sl-ring { width: 46px !important; height: 46px !important; background: radial-gradient(closest-side, #fff 76%, transparent 79%), conic-gradient(color-mix(in srgb, var(--rc) 70%, #f4c58a) calc(var(--p) * 1%), color-mix(in srgb, var(--rc) 14%, #f3e6e2) 0) !important; }
:root[data-theme="dark"] .sl-ring { background: radial-gradient(closest-side, #2e2627 76%, transparent 79%), conic-gradient(color-mix(in srgb, var(--rc) 70%, #f4c58a) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0) !important; }
.slot.ok .sl-ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f4c58a !important; }
.sl-have { background: #f08da0 !important; box-shadow: 0 1px 3px rgba(200, 80, 100, .3); }
.pb-all { background: linear-gradient(180deg, #f6a3b2, #e9879a) !important; border-color: transparent !important; color: #fff !important; border-radius: 99px !important; box-shadow: 0 3px 8px rgba(220, 120, 140, .3) !important; }
.pb-stamp { transform: rotate(-4deg) !important; color: #e0899a !important; border: 2px dashed #e0899a !important; border-radius: 99px !important; font-size: 13px !important; padding: 1px 12px !important; }
.pb-hint { font-size: 12px; }
/* ===== 도감 v2: 라벤더 책상 · 파스텔 책 ===== */
.hobby-body.hb-dex { background: radial-gradient(circle, rgba(150, 130, 220, .2) 1.4px, transparent 1.8px) 0 0 / 20px 20px, linear-gradient(180deg, #f5f1fd, #efeafb) !important; box-shadow: inset 0 0 0 1px #e1d9f5 !important; }
:root[data-theme="dark"] .hobby-body.hb-dex { background: radial-gradient(circle, rgba(150, 130, 220, .14) 1.4px, transparent 1.8px) 0 0 / 20px 20px, #272433 !important; box-shadow: inset 0 0 0 1px #3d3852 !important; }
.hb-dex > .hero { box-shadow: var(--soft, none) !important; }
.dx-book-wrap { padding-top: 26px !important; }
.dx-marks { left: 30px !important; right: 30px !important; gap: 5px !important; }
.dx-mark { --mc2: color-mix(in srgb, var(--mc) 55%, #fff); background: var(--mc2) !important; color: color-mix(in srgb, var(--mc) 70%, #000) !important; border-radius: 10px 10px 0 0; min-width: 50px !important; padding: 5px 8px 11px !important; font-size: 11px !important; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%) !important; }
.dx-mark span { color: inherit; opacity: .75; }
.dx-mark.on { background: var(--mc) !important; color: #fff !important; }
.dx-spread { padding: 8px; border-radius: 22px !important; background: linear-gradient(135deg, #b9a8e8, #a08fdc) !important; box-shadow: 0 10px 24px rgba(110, 90, 180, .25) !important; overflow: visible !important; gap: 0; }
.dx-spread::after { left: 50% !important; top: 8px !important; bottom: 8px !important; width: 28px !important; margin-left: -14px !important; background: linear-gradient(90deg, transparent, rgba(110, 90, 180, .12) 45%, rgba(110, 90, 180, .2) 50%, rgba(110, 90, 180, .12) 55%, transparent) !important; }
.dx-page { background: radial-gradient(circle, rgba(150, 130, 220, .1) 1px, transparent 1.4px) 0 0 / 18px 18px, #fffdf8 !important; padding: 36px 18px 30px !important; }
.dx-page.left { border-radius: 16px 4px 4px 16px; } .dx-page.right { border-radius: 4px 16px 16px 4px; background-color: #fffaf3 !important; }
:root[data-theme="dark"] .dx-page { background: #34304a !important; } :root[data-theme="dark"] .dx-spread { background: linear-gradient(135deg, #5a4f8a, #4a4176) !important; }
.dp-head { border-bottom: 2px dotted rgba(150, 130, 220, .35) !important; }
.dp-head h3 { color: #6a58b8; }
:root[data-theme="dark"] .dp-head h3 { color: #c8bdf2; }
.dp-no { color: #a89ad8 !important; }
.dx-page .dx-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)) !important; gap: 10px !important; }
.dx-page .dx-it { transform: none !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 3px 8px rgba(130, 110, 200, .14), 0 0 0 1.5px #ece6fb !important; padding: 12px 6px 10px !important; transition: transform .15s; }
.dx-page .dx-it:not(.unknown):hover { transform: translateY(-2px) rotate(-2deg) !important; }
:root[data-theme="dark"] .dx-page .dx-it { background: #3d3856 !important; box-shadow: 0 0 0 1.5px #4d4770 !important; }
.dx-page .dx-it .iti { transform: scale(1.2); }
.dx-page .dx-it.unknown { background: transparent !important; border: 1.5px dashed #d8cff2 !important; box-shadow: none !important; color: #b8acd8; }
.dx-page .dx-q { background: #f1ecfc !important; color: #b0a2e0 !important; border-radius: 50%; }
:root[data-theme="dark"] .dx-page .dx-q { background: #3d3856 !important; }
.dx-page .bn-prog i { background: linear-gradient(90deg, #c7b8f2, #f2b8d4) !important; }

/* 도움말 정리 */
.help-toc { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.help-toc .ht-row { display: flex; gap: 10px; align-items: baseline; }
.help-toc .ht-g { flex: 0 0 34px; font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.help-toc .chips { gap: 4px; }
.help-toc .chip { padding: 3px 10px; font-size: 13px; }
.help { max-width: 880px; margin-inline: auto; gap: 10px; }
.help-lead { margin: -4px 0 2px; color: var(--ink-2); font-size: 14.5px; }
.help-more { border: 1px dashed var(--rule); border-radius: 10px; padding: 6px 10px; }
.help-more > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.help-more[open] > summary { margin-bottom: 6px; }
@media (max-width: 600px) { .help-toc .ht-row { flex-direction: column; gap: 4px; } }
/* 게시판 버튼: 지우기는 오른쪽 */
.bd-btns { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bd-btns-l { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-btns .bd-del { margin-left: auto; color: var(--ink-3, #999); }
.bd-btns .bd-del:hover { color: var(--bad, #b33); }
.item.auc.focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.help-toc { position: static; }
.help-toc .chip .hico { display: none; }
/* 이동 중 표시: 오는 중 · 떠나는 중 · 가는 중 */
.mv-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; padding: 1px 7px 1px 5px; border-radius: 999px; margin-right: 4px; white-space: nowrap; vertical-align: middle; }
.mv-tag .ico { width: 12px; height: 12px; }
.mv-tag.come { color: #2f7a4f; background: color-mix(in srgb, #2f7a4f 13%, transparent); }
.mv-tag.leave { color: #b0602a; background: color-mix(in srgb, #b0602a 13%, transparent); }
.mv-tag.go { color: var(--ink-2); background: var(--sheet-2); }
.mv-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
/* 첫걸음 단계 */
.fs-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fs-stage { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 0; background: color-mix(in srgb, var(--ink) 4%, var(--sheet)); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.fs-stage > span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.fs-stage b { font-size: 13px; } .fs-stage small { font-size: 12px; color: var(--ink-2); }
.fs-no { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--sheet-2); color: var(--ink-2); }
.fs-no .ico { width: 14px; height: 14px; stroke: #fff; }
.fs-stage.on { background: color-mix(in srgb, var(--accent) 12%, var(--sheet)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); }
.fs-stage.on .fs-no { background: var(--accent); color: #fff; }
.fs-stage.ok .fs-no { background: color-mix(in srgb, var(--accent) 70%, #fff); color: #fff; }
.fs-sub { margin-top: -2px; }
@media (max-width: 520px) { .fs-stage { padding: 6px 7px; gap: 6px; } .fs-stage b { font-size: 13px; } .fs-no { width: 20px; height: 20px; } }
.or-mv { flex: none; display: inline-grid; place-items: center; margin-left: 2px; color: var(--ink-3, #999); }
.or-mv .ico { width: 11px; height: 11px; }
.or-mv.come { color: #2f7a4f; } .or-mv.leave { color: #b0602a; }
.person .nm { white-space: nowrap; }
.person .meta:has(.mv-tag) { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 3px 4px; }
.person .meta .mv-tag { margin-right: 0; }
/* 대댓글 */
.bd-cmt.reply.d2 { margin-left: 44px; }
.bd-ctext .at-name { color: var(--accent); font-weight: 600; font-size: .95em; }
@media (max-width: 520px) { .bd-cmt.reply { margin-left: 12px; } .bd-cmt.reply.d2 { margin-left: 24px; } }
/* 신고 · 벌점 */
.rep-btn { color: var(--ink-3, #999); margin-left: auto; }
.rep-why { margin: 4px 0 8px; }
#rep-text { width: 100%; }
.rep-target { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, #c0392b 8%, var(--sheet)); font-size: 13px; }
.rep-target .btn:first-of-type { margin-left: auto; }
.pen-box { display: grid; gap: 10px; }
/* 세 개의 빗자루 · 필요의 방 쉼터 */
.rr-plank { fill: #a8774a; } .rr-plankline { stroke: #7d5432; stroke-width: 1.5; } .rr-knot { fill: none; stroke: #7d5432; stroke-width: 1.2; opacity: .5; }
.rr-h-three_brooms .rr-wains { fill: #5c3a20; opacity: .8; } .rr-h-three_brooms .rr-floor { fill: #6e4426; } .rr-h-three_brooms .rr-rug { fill: #8a2f22; opacity: .6; }
.rr-post2 { stroke: #5c3a20; stroke-width: 12; } .rr-brace { stroke: #5c3a20; stroke-width: 6; }
.rr-h-three_brooms .rr-beam, .rr-beam.rr-rq { fill: #4e301a; }
.rr-village { fill: #5a4e60; } .rr-vwin { fill: #ffd97a; } .rr-snowbank { fill: #fff; opacity: .9; }
.rr-snow { fill: #fff; animation: rrSnow 5s linear infinite; }
@keyframes rrSnow { to { transform: translate(-8px, 110px); } }
.rr-shelf2 { fill: #5c3a20; } .rr-bottle { opacity: .9; } .rr-label { fill: #f3e6cf; opacity: .8; }
.rr-broomstick { stroke: #7a4a2a; stroke-width: 3; stroke-linecap: round; } .rr-bristle { fill: #d4a33a; }
.rr-signtxt { font: 700 8px var(--f-display, serif); fill: #f3e6cf; text-anchor: middle; letter-spacing: 1px; }
.rr-mug { fill: #d29a4a; stroke: #8a5a2a; stroke-width: 1.5; } .rr-mughandle { fill: none; stroke: #8a5a2a; stroke-width: 2.5; } .rr-foam { fill: #fff8e8; }
.rr-bub { fill: #fff8e8; opacity: 0; animation: rrBub 2.4s ease-out infinite; }
@keyframes rrBub { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-14px); } }
.rr-lamp { animation: rrSway 4s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
@keyframes rrSway { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
.rr-lantern { fill: #3a2a1a; } .rr-glow { fill: #ffc85a; filter: drop-shadow(0 0 6px #ffb340); }
.rr-barrel { fill: #8a5a33; } .rr-barreltop { fill: #a8774a; } .rr-hoop { stroke: #3a2a1a; stroke-width: 3; }
.rr-h-room_req .rr-wall { fill: #e7e2f2; } .rr-h-room_req .rr-stripe { fill: #8f84c9; opacity: .28; } .rr-h-room_req .rr-floor { fill: #5d4a3a; }
.rr-pile { fill: #6b5a4a; opacity: .85; } .rr-junk { fill: #8f7a5f; stroke: #4e3f30; stroke-width: 1; } .rr-junkline { fill: none; stroke: #4e3f30; stroke-width: 2; } .rr-junkball { fill: #b48a3a; }
.rr-mirror { fill: #cfe0ea; } .rr-glint { stroke: #fff; stroke-width: 2; opacity: .7; }
.rr-cabinet { fill: #3b2a3e; } .rr-cabtop { fill: #2a1d2c; } .rr-cabline { stroke: #1d141f; stroke-width: 1.5; } .rr-knob { fill: #d4a33a; }
.rr-book.b0 { fill: #8a2f22; } .rr-book.b1 { fill: #2f5c8a; } .rr-book.b2 { fill: #3c7a4a; } .rr-book.b3 { fill: #a8823a; }
.rr-candlestick { fill: #f6efe0; } .rr-flame { fill: #ffc240; } .rr-candleglow { fill: #ffd97a; opacity: .25; }
.rr-float { animation: rrFloat 3.4s ease-in-out infinite; }
@keyframes rrFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.rr-dust { fill: #fff3c4; opacity: 0; animation: rrDust 3.5s ease-in-out infinite; }
@keyframes rrDust { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .rr-snow, .rr-bub, .rr-lamp, .rr-float, .rr-dust { animation: none; } }

/* =========================================================
   스킨: 양피지 (기본) — 설정 → 스킨에서 '깔끔한 기본'으로 되돌릴 수 있다
   색은 변수로만 바꾸고, 결(종이 섬유)·테두리·그림자만 얹는다.
   ========================================================= */
:root[data-skin="parchment"] {
  --paper: #e8dabb; --sheet: #f7efdc; --sheet-2: #eee2c5; --rule: #d4bf93;
  --ink: #2f2417; --ink-2: #5f4a30; --ink-3: #8e7955;
  --good: #3f6d2f; --bad: #9e3423; --warn: #8a5c12; --warn-ink: #8a5c12;
  --accent: #6d4818; --accent-soft: rgba(109, 72, 24, .1);
  --soft: inset 0 1px 0 rgba(255, 251, 238, .75), 0 1px 1px rgba(90, 62, 22, .10), 0 6px 16px -8px rgba(90, 62, 22, .28);
  --lift: inset 0 1px 0 rgba(255, 251, 238, .8), 0 2px 3px rgba(90, 62, 22, .12), 0 22px 44px -16px rgba(70, 46, 14, .45);
  --scrim: rgba(40, 26, 10, .42);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .14 0 0 0 .075 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --fiber: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .36 0 0 0 0 .16 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --edge: rgba(120, 84, 34, .18);
  --gilt: #b08a3e;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="parchment"]:not([data-theme="light"]) {
    --paper: #18120b; --sheet: #231b12; --sheet-2: #2c2217; --rule: #44362a;
    --ink: #efe1c3; --ink-2: #cbb791; --ink-3: #93805f;
    --good: #95c47f; --bad: #e48a72; --warn: #e2b660; --warn-ink: #e2b660; --accent: #dcb46a; --accent-soft: rgba(220, 180, 106, .12);
    --soft: inset 0 1px 0 rgba(255, 230, 180, .05), 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px -10px rgba(0, 0, 0, .6);
    --lift: inset 0 1px 0 rgba(255, 230, 180, .06), 0 24px 48px -16px rgba(0, 0, 0, .7);
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .86 0 0 0 0 .6 0 0 0 .045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --fiber: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .55 0 0 0 .035 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
    --edge: rgba(0, 0, 0, .35); --gilt: #c9a25a;
  }
}
:root[data-skin="parchment"][data-theme="dark"] {
  --paper: #18120b; --sheet: #231b12; --sheet-2: #2c2217; --rule: #44362a;
  --ink: #efe1c3; --ink-2: #cbb791; --ink-3: #93805f;
  --good: #95c47f; --bad: #e48a72; --warn: #e2b660; --warn-ink: #e2b660; --accent: #dcb46a; --accent-soft: rgba(220, 180, 106, .12);
  --soft: inset 0 1px 0 rgba(255, 230, 180, .05), 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px -10px rgba(0, 0, 0, .6);
  --lift: inset 0 1px 0 rgba(255, 230, 180, .06), 0 24px 48px -16px rgba(0, 0, 0, .7);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .86 0 0 0 0 .6 0 0 0 .045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --fiber: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .55 0 0 0 .035 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --edge: rgba(0, 0, 0, .35); --gilt: #c9a25a;
}
/* 기숙사 강조색은 잉크처럼 조금 깊게 */
:root[data-skin="parchment"] .h-gryffindor { --h-l: #8e2a22; } :root[data-skin="parchment"] .h-hufflepuff { --h-l: #7a560c; }
:root[data-skin="parchment"] .h-ravenclaw { --h-l: #2a4a8a; } :root[data-skin="parchment"] .h-slytherin { --h-l: #1f5e3e; }

/* 바탕: 종이 결 + 가장자리가 살짝 바랜 느낌 */
:root[data-skin="parchment"] body {
  background-color: var(--paper);
  background-image: var(--grain), var(--fiber),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 249, 230, .55), transparent 60%),
    radial-gradient(140% 120% at 50% 100%, var(--edge), transparent 55%);
  background-attachment: fixed;
}
:root[data-skin="parchment"] .stage, :root[data-skin="parchment"] .shell { background: transparent; }

/* 종이 카드: 결을 얹고, 모서리는 단정하게, 안쪽에 아주 옅은 이중선 */
:root[data-skin="parchment"] :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .table-wrap, .letter, .gb-open, .first-steps, .card, .next, .sc-btn, .item, .person, .shop-lines, .hud-in, .fs-stage, .admin-detail) {
  background-image: var(--grain);
  border-color: var(--rule);
}
:root[data-skin="parchment"] :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .table-wrap, .letter, .gb-open, .first-steps, .card) {
  border-radius: 10px;
  box-shadow: var(--soft), inset 0 0 0 1px var(--rule), inset 0 0 0 4px color-mix(in srgb, var(--sheet) 70%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--rule) 55%, transparent);
}
:root[data-skin="parchment"] :is(.modal, .pop) {
  background-color: var(--sheet); background-image: var(--grain), linear-gradient(180deg, rgba(255, 250, 235, .35), transparent 30%);
  border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: var(--lift), inset 0 0 0 4px color-mix(in srgb, var(--sheet) 70%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--gilt) 45%, transparent);
}

/* 왼쪽 메뉴: 가죽 장정처럼 조금 짙은 종이, 오른쪽에 금박 두 줄 */
:root[data-skin="parchment"] .rail {
  background-color: color-mix(in srgb, var(--paper) 88%, #7a5320);
  background-image: var(--grain), var(--fiber);
  border-right: 0;
  box-shadow: inset -1px 0 0 var(--rule), inset -4px 0 0 color-mix(in srgb, var(--paper) 80%, transparent), inset -5px 0 0 color-mix(in srgb, var(--gilt) 55%, transparent);
}
:root[data-skin="parchment"] .nav button.on { background: color-mix(in srgb, var(--accent) 12%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }

/* 위쪽 줄·아래 막대: 반투명 종이 */
:root[data-skin="parchment"] .statusbar { background: color-mix(in srgb, var(--paper) 82%, transparent); background-image: var(--grain); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); box-shadow: 0 1px 0 color-mix(in srgb, var(--sheet) 60%, transparent); }
:root[data-skin="parchment"] .hud-in { background-color: color-mix(in srgb, var(--sheet) 90%, transparent); }
:root[data-skin="parchment"] .tabbar { background-color: color-mix(in srgb, var(--paper) 92%, transparent); background-image: var(--grain); border-top: 1px solid var(--rule); }

/* 제목: 펜으로 그은 듯한 밑줄과 작은 장식 */
:root[data-skin="parchment"] h1, :root[data-skin="parchment"] h2, :root[data-skin="parchment"] h3 { letter-spacing: -.005em; color: var(--ink); }
:root[data-skin="parchment"] #view > .block-head:first-child { position: relative; border-bottom: 0; padding-bottom: 14px; }
:root[data-skin="parchment"] #view > .block-head:first-child::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--gilt) 70%, transparent) 12%, color-mix(in srgb, var(--gilt) 70%, transparent) 46%, transparent 46.5%, transparent 53.5%, color-mix(in srgb, var(--gilt) 70%, transparent) 54%, color-mix(in srgb, var(--gilt) 70%, transparent) 88%, transparent) center / 100% 1px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='9' viewBox='0 0 40 9'><path d='M20 0l4 4.5-4 4.5-4-4.5z' fill='%23b08a3e'/><circle cx='10' cy='4.5' r='1.4' fill='%23b08a3e'/><circle cx='30' cy='4.5' r='1.4' fill='%23b08a3e'/></svg>") center / 40px 9px no-repeat;
}

/* 버튼: 종이 단추 · 주 버튼은 밀랍 도장처럼 */
:root[data-skin="parchment"] .btn { border-radius: 7px; border-color: var(--rule); background-color: var(--sheet); background-image: var(--grain); box-shadow: inset 0 1px 0 rgba(255, 251, 238, .6), 0 1px 1px rgba(90, 62, 22, .1); }
:root[data-skin="parchment"] .btn.quiet { background: transparent; box-shadow: none; }
:root[data-skin="parchment"] .btn.primary {
  background-color: var(--accent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .1)), var(--grain);
  border-color: color-mix(in srgb, var(--accent) 80%, #000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(60, 36, 8, .35), 0 3px 8px -3px color-mix(in srgb, var(--accent) 60%, transparent);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
:root[data-skin="parchment"] .btn.primary:hover:not(:disabled) { filter: brightness(1.06); }
:root[data-skin="parchment"] .chip { border-color: var(--rule); background-color: color-mix(in srgb, var(--sheet) 80%, transparent); }
:root[data-skin="parchment"] .chip.on { background-color: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }

/* 입력칸: 줄 그은 종이 */
:root[data-skin="parchment"] :is(input[type=text], input[type=search], input[type=number], input[type=url], input[type=password], input:not([type]), select, textarea) {
  background-color: color-mix(in srgb, var(--sheet) 70%, #fff 12%); border-color: var(--rule); box-shadow: inset 0 1px 2px rgba(90, 62, 22, .08);
}
:root[data-skin="parchment"] :is(input, select, textarea):focus { border-color: color-mix(in srgb, var(--accent) 60%, var(--rule)); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

/* 표·구분선·알림 */
:root[data-skin="parchment"] table th { color: var(--ink-2); font-family: var(--f-display); font-weight: 700; }
:root[data-skin="parchment"] hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule) 15%, var(--rule) 85%, transparent); }
:root[data-skin="parchment"] .toast { background-color: #2f2417; background-image: var(--grain); color: #f6ecd4; border: 1px solid #5a4528; box-shadow: 0 10px 30px -10px rgba(30, 18, 4, .6); }
:root[data-skin="parchment"] .help-tip { border-left-color: var(--gilt); background: color-mix(in srgb, var(--gilt) 10%, transparent); }
:root[data-skin="parchment"] .scrim, :root[data-skin="parchment"] .modal-back { -webkit-backdrop-filter: blur(2px) sepia(.25); backdrop-filter: blur(2px) sepia(.25); }
/* 오늘 시계: 하늘색 대신 빛바랜 양피지에 시간대 빛만 은은하게 */
:root[data-skin="parchment"] .home-clock { --hc-bg1: #f6ead0; --hc-bg2: #ead6aa; --hc-ink: #3a2a14; border-radius: 12px;
  background: var(--grain), radial-gradient(90% 140% at 92% 20%, rgba(255, 214, 120, .45), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2));
  box-shadow: var(--soft), inset 0 0 0 1px var(--rule), inset 0 0 0 4px rgba(255, 248, 228, .55), inset 0 0 0 5px color-mix(in srgb, var(--gilt) 45%, transparent); }
:root[data-skin="parchment"] .home-clock.sky-dusk { --hc-bg1: #f4dcc0; --hc-bg2: #e4b98e; --hc-ink: #4a2a18; background: var(--grain), radial-gradient(90% 140% at 92% 30%, rgba(240, 140, 90, .35), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); }
:root[data-skin="parchment"] .home-clock.sky-night { --hc-bg1: #2c2418; --hc-bg2: #191309; --hc-ink: #f1e2c0; background: var(--grain), radial-gradient(70% 120% at 90% 20%, rgba(255, 230, 160, .14), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); }
:root[data-skin="parchment"] .hc-time { font-family: var(--f-display); font-weight: 700; letter-spacing: 0; }
@media (prefers-color-scheme: dark) {
  :root[data-skin="parchment"]:not([data-theme="light"]) .home-clock:not(.sky-night) { --hc-bg1: #3a2d1a; --hc-bg2: #241b10; --hc-ink: #f3e3c0; }
}
:root[data-skin="parchment"][data-theme="dark"] .home-clock:not(.sky-night) { --hc-bg1: #3a2d1a; --hc-bg2: #241b10; --hc-ink: #f3e3c0; }

/* =========================================================
   스킨: 별의 서고 (기본) — 먹빛 바탕에 청동색 금테, 아스트롤라베 원과 산 능선을 옅게 그린 고서 느낌
   어두운 화면 위에 얹는다(이 스킨을 고르면 화면은 늘 어둡게). 그림은 모두 이 게임용으로 새로 그린 선화.
   ========================================================= */
html:root[data-frame="night"][data-theme="dark"] {
  --paper: #23221e; --sheet: #2b2925; --sheet-2: #34312b; --rule: rgba(201, 162, 114, .32);
  --ink: #ece3d0; --ink-2: #c9bca2; --ink-3: #908672;
  --good: #a8c98a; --bad: #e2917a; --warn: #e2bd7a; --warn-ink: #e2bd7a; --hp: #9fc48a; --mp: #8fa8d8; --st: #d9b26a;
  --accent: #c9a272; --on-accent: #1f1a12; --accent-soft: rgba(201, 162, 114, .14);
  --gold: #c9a272; --gold-2: #e6cc9e; --gilt: #c9a272; --edge: rgba(0, 0, 0, .4);
  --soft: 0 1px 0 rgba(255, 236, 200, .04) inset, 0 8px 22px -12px rgba(0, 0, 0, .7);
  --lift: 0 24px 60px -18px rgba(0, 0, 0, .8);
  --scrim: rgba(10, 9, 7, .62);
  --f-latin: 'Cinzel', 'Gowun Batang', serif;
  --frame: 0 0 0 1px rgba(201, 162, 114, .55), inset 0 0 0 3px var(--sheet), inset 0 0 0 4px rgba(201, 162, 114, .28);
  --c-tl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23c9a272' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/><path d='M6 22c9 0 16-7 16-16' opacity='.45'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23c9a272'/><circle cx='20' cy='3' r='1.1' fill='%23c9a272'/><circle cx='3' cy='20' r='1.1' fill='%23c9a272'/></svg>");
  --c-tr: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(40 0) scale(-1 1)'><g fill='none' stroke='%23c9a272' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/><path d='M6 22c9 0 16-7 16-16' opacity='.45'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23c9a272'/><circle cx='20' cy='3' r='1.1' fill='%23c9a272'/><circle cx='3' cy='20' r='1.1' fill='%23c9a272'/></g></svg>");
  --c-bl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(0 40) scale(1 -1)'><g fill='none' stroke='%23c9a272' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/><path d='M6 22c9 0 16-7 16-16' opacity='.45'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23c9a272'/><circle cx='20' cy='3' r='1.1' fill='%23c9a272'/><circle cx='3' cy='20' r='1.1' fill='%23c9a272'/></g></svg>");
  --c-br: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(40 40) scale(-1 -1)'><g fill='none' stroke='%23c9a272' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/><path d='M6 22c9 0 16-7 16-16' opacity='.45'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23c9a272'/><circle cx='20' cy='3' r='1.1' fill='%23c9a272'/><circle cx='3' cy='20' r='1.1' fill='%23c9a272'/></g></svg>");
  --astro: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100' viewBox='0 0 1100 1100'><g fill='none' stroke='%23c9a272' stroke-width='1.2' opacity='.16'><circle cx='550' cy='550' r='520'/><circle cx='550' cy='550' r='490'/><circle cx='550' cy='550' r='380' stroke-dasharray='2 10'/><circle cx='550' cy='550' r='250'/><path d='M550 30v1040M30 550h1040M182 182l736 736M918 182L182 918'/><path d='M550 60 C 760 300 760 800 550 1040 M550 60 C 340 300 340 800 550 1040' opacity='.6'/><path d='M140 360 L 420 250 L 700 420 L 960 300' stroke-width='.8'/><path d='M200 760 L 480 820 L 760 700 L 900 780' stroke-width='.8'/></g><g fill='%23e6cc9e' opacity='.45'><circle cx='420' cy='250' r='2.2'/><circle cx='700' cy='420' r='2.6'/><circle cx='960' cy='300' r='2'/><circle cx='140' cy='360' r='2'/><circle cx='480' cy='820' r='2.4'/><circle cx='760' cy='700' r='2'/><circle cx='200' cy='760' r='1.8'/><circle cx='900' cy='780' r='1.8'/></g></svg>");
  --ridge: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='220' viewBox='0 0 1600 220' preserveAspectRatio='none'><path d='M0 220V150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60V220z' fill='%23181713' opacity='.75'/><path d='M0 150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60' fill='none' stroke='%23c9a272' stroke-width='1.2' opacity='.35'/><g stroke='%23c9a272' stroke-width='.7' opacity='.22'><path d='M270 40l-30 60M270 40l25 55M720 30l-40 70M720 30l35 60M1080 70l-30 50'/></g></svg>");
  --pillar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='900' viewBox='0 0 60 900'><g fill='none' stroke='%23c9a272' stroke-width='1.1' opacity='.75'><path d='M14 900V150q16-40 16-70 0 30 16 70v750'/><path d='M20 900V160q10-26 10-50 0 24 10 50v740' opacity='.6'/><path d='M30 120v-40M30 220v40'/></g><g fill='%23c9a272' opacity='.85'><path d='M30 20l3 11 11 3-11 3-3 11-3-11-11-3 11-3z'/><path d='M30 60l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/><path d='M30 330l4 14 14 4-14 4-4 14-4-14-14-4 14-4z'/><path d='M30 620l2.5 8 8 2.5-8 2.5-2.5 8-2.5-8-8-2.5 8-2.5z'/></g></svg>");
  --spark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'><g fill='%23c9a272'><path d='M12 3l1.3 3.7L17 8l-3.7 1.3L12 13l-1.3-3.7L7 8l3.7-1.3z'/><path d='M32 1l1.8 5.2L39 8l-5.2 1.8L32 15l-1.8-5.2L25 8l5.2-1.8z'/><path d='M52 3l1.3 3.7L57 8l-3.7 1.3L52 13l-1.3-3.7L47 8l3.7-1.3z'/></g></svg>");
  color-scheme: dark;
}
/* 바탕: 먹빛 + 종이 결 + 아스트롤라베 원(가운데 위) + 산 능선(아래) */
html:root[data-frame="night"][data-theme="dark"] body {
  background-color: #252420;
  background-image: var(--grain), var(--ridge), var(--astro),
    radial-gradient(80% 60% at 55% 0%, rgba(120, 104, 80, .28), transparent 65%),
    radial-gradient(70% 50% at 50% 110%, rgba(150, 120, 80, .18), transparent 60%),
    linear-gradient(180deg, #2c2b27, #1e1d1a);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, center bottom, 58% -260px, 0 0, 0 0, 0 0;
  background-size: auto, 100% 200px, 1100px 1100px, auto, auto, auto;
  background-attachment: fixed;
}
/* 오른쪽 가장자리 장식 기둥(넓은 화면) */
@media (min-width: 1500px) {
  html:root[data-frame="night"][data-theme="dark"] .stage::after { content: ''; position: fixed; right: 14px; top: 0; bottom: 0; width: 60px; background: var(--pillar) top center / 60px auto repeat-y; pointer-events: none; z-index: 1; opacity: .9; }
  html:root[data-frame="night"][data-theme="dark"] .shell:has(.chat:not([hidden])) .stage::after { display: none; }
}
html:root[data-frame="night"][data-theme="dark"] .stage:not(.in-mine):not(.in-trek) > .view { background: transparent; box-shadow: none; padding-top: 30px; }
/* 왼쪽 메뉴: 깃발처럼 길게 늘어뜨린 짙은 천, 안쪽 청동 두 줄 */
html:root[data-frame="night"][data-theme="dark"] .rail {
  background-color: #1e1d1a; background-image: var(--grain), linear-gradient(180deg, rgba(201, 162, 114, .08), transparent 30%);
  border-right: 0; box-shadow: inset -1px 0 0 rgba(201, 162, 114, .55), inset -5px 0 0 #1e1d1a, inset -6px 0 0 rgba(201, 162, 114, .3), 8px 0 30px rgba(0, 0, 0, .45);
}
html:root[data-frame="night"][data-theme="dark"] .rail-brand { font-family: var(--f-display); color: var(--gold-2); }
html:root[data-frame="night"][data-theme="dark"] .nav-label { color: var(--gold); letter-spacing: .12em; }
html:root[data-frame="night"][data-theme="dark"] .nav button { color: var(--ink); font-family: var(--f-display); }
html:root[data-frame="night"][data-theme="dark"] .nav button:hover { background: rgba(201, 162, 114, .1); }
html:root[data-frame="night"][data-theme="dark"] .nav button.on { background: rgba(201, 162, 114, .16); box-shadow: inset 0 0 0 1px rgba(201, 162, 114, .55); color: var(--gold-2); }
html:root[data-frame="night"][data-theme="dark"] .nav-ico { background: transparent !important; color: var(--gold) !important; box-shadow: inset 0 0 0 1px rgba(201, 162, 114, .4); border-radius: 50% !important; }
/* 위쪽 줄·아래 막대 */
html:root[data-frame="night"][data-theme="dark"] .statusbar { background: rgba(30, 29, 26, .86); background-image: none; border-bottom: 1px solid rgba(201, 162, 114, .45); box-shadow: 0 3px 0 -2px rgba(201, 162, 114, .2); }
html:root[data-frame="night"][data-theme="dark"] .tabbar { background: rgba(30, 29, 26, .95); background-image: none; border-top: 1px solid rgba(201, 162, 114, .45); }
html:root[data-frame="night"][data-theme="dark"] .hud-in { background-color: rgba(30, 29, 26, .92); background-image: none; border: 1px solid rgba(201, 162, 114, .45); border-radius: 4px; }
/* 페이지 머리: ✦✦✦ · 영문 머리글 · 한글 제목, 아래 청동 줄 */
html:root[data-frame="night"][data-theme="dark"] .page-head { border-bottom: 0; position: relative; padding-bottom: 18px; }
html:root[data-frame="night"][data-theme="dark"] .page-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 114, .7) 10%, rgba(201, 162, 114, .7) 44%, transparent 44.5%, transparent 55.5%, rgba(201, 162, 114, .7) 56%, rgba(201, 162, 114, .7) 90%, transparent) center / 100% 1px no-repeat, var(--spark) center / 64px 14px no-repeat; }
html:root[data-frame="night"][data-theme="dark"] .ph-ico { border-radius: 50%; background: radial-gradient(circle, #34312b 55%, #23221e); color: var(--gold-2); box-shadow: 0 0 0 1px rgba(201, 162, 114, .7), 0 0 0 4px #23221e, 0 0 0 5px rgba(201, 162, 114, .45); }
html:root[data-frame="night"][data-theme="dark"] .ph-txt h1 { color: #f3ead8; font-family: var(--f-display); }
html:root[data-frame="night"][data-theme="dark"] .ph-txt h1::before { content: var(--pg-en, 'HOGWARTS'); display: block; font-family: var(--f-latin); font-size: 12px; font-weight: 700; letter-spacing: .3em; color: var(--gold); margin-bottom: 3px; }
html:root[data-frame="night"][data-theme="dark"] .ph-sub { color: var(--ink-3); }
html:root[data-frame="night"] .view[data-page="today"] { --pg-en: 'TODAY'; } html:root[data-frame="night"] .view[data-page="place"] { --pg-en: 'PLACE'; }
html:root[data-frame="night"] .view[data-page="map"] { --pg-en: 'MAP'; } html:root[data-frame="night"] .view[data-page="schedule"] { --pg-en: 'SCHEDULE'; }
html:root[data-frame="night"] .view[data-page="incident"] { --pg-en: 'INCIDENT'; } html:root[data-frame="night"] .view[data-page="mine"] { --pg-en: 'DUNGEON'; }
html:root[data-frame="night"] .view[data-page="bag"] { --pg-en: 'SATCHEL'; } html:root[data-frame="night"] .view[data-page="shop"] { --pg-en: 'SHOP'; }
html:root[data-frame="night"] .view[data-page="auction"] { --pg-en: 'AUCTION'; } html:root[data-frame="night"] .view[data-page="hobby"] { --pg-en: 'HOBBY'; }
html:root[data-frame="night"] .view[data-page="creatures"] { --pg-en: 'CREATURES'; } html:root[data-frame="night"] .view[data-page="gear"] { --pg-en: 'EQUIPMENT'; }
html:root[data-frame="night"] .view[data-page="growth"] { --pg-en: 'GROWTH'; } html:root[data-frame="night"] .view[data-page="profile"] { --pg-en: 'STUDENT'; }
html:root[data-frame="night"] .view[data-page="rank"] { --pg-en: 'RANKING'; } html:root[data-frame="night"] .view[data-page="journal"] { --pg-en: 'JOURNAL'; }
html:root[data-frame="night"] .view[data-page="post"] { --pg-en: 'OWL POST'; } html:root[data-frame="night"] .view[data-page="board"] { --pg-en: 'NOTICE BOARD'; }
html:root[data-frame="night"] .view[data-page="house"] { --pg-en: 'HOUSE'; } html:root[data-frame="night"] .view[data-page="roster"] { --pg-en: 'MEMBER'; }
html:root[data-frame="night"] .view[data-page="rels"] { --pg-en: 'RELATIONS'; } html:root[data-frame="night"] .view[data-page="quidditch"] { --pg-en: 'QUIDDITCH'; }
html:root[data-frame="night"] .view[data-page="help"] { --pg-en: 'SYSTEM'; } html:root[data-frame="night"] .view[data-page="settings"] { --pg-en: 'SETTINGS'; }
html:root[data-frame="night"] .view[data-page="admin"] { --pg-en: 'STAFF ROOM'; } html:root[data-frame="night"] .view[data-page="deco"] { --pg-en: 'DECORATE'; }
html:root[data-frame="night"] .view[data-page="deliver"] { --pg-en: 'DELIVERY'; } html:root[data-frame="night"] .view[data-page="fortune"] { --pg-en: 'FORTUNE'; }
/* 칸: 각진 이중 청동 테두리, 큰 칸은 네 귀퉁이에 덩굴 장식 */
html:root[data-frame="night"][data-theme="dark"] :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .table-wrap, .letter, .gb-open, .first-steps, .card, .home-clock) {
  background-color: rgba(43, 41, 37, .94); border: 0; border-radius: 3px; box-shadow: var(--frame), var(--soft);
}
html:root[data-frame="night"][data-theme="dark"] :is(.panel:not(.tight), .block.fold, .first-steps, .gb-open, .home-clock) {
  background-image: var(--c-tl), var(--c-tr), var(--c-bl), var(--c-br), var(--grain);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position: left 6px top 6px, right 6px top 6px, left 6px bottom 6px, right 6px bottom 6px, 0 0;
  background-size: 34px, 34px, 34px, 34px, auto;
}
html:root[data-frame="night"][data-theme="dark"] :is(.item, .person, .next, .sc-btn, .fs-stage, .shop-lines) { background-color: rgba(52, 49, 43, .7); border-color: rgba(201, 162, 114, .25); border-radius: 3px; }
html:root[data-frame="night"][data-theme="dark"] :is(.block-head h3, .panel > b, .panel > .row > b) { color: var(--gold-2); font-family: var(--f-display); }
html:root[data-frame="night"][data-theme="dark"] .home-clock { --hc-bg1: #2e2c28; --hc-bg2: #23221e; --hc-ink: #f1e6cf; }
html:root[data-frame="night"][data-theme="dark"] .hc-time { color: var(--gold-2); }
/* 버튼: 주 버튼은 청동빛 둥근 패, 나머지는 청동 테 */
html:root[data-frame="night"][data-theme="dark"] .btn { background: rgba(255, 240, 210, .03); border-color: rgba(201, 162, 114, .5); color: var(--ink); box-shadow: none; border-radius: 999px; }
html:root[data-frame="night"][data-theme="dark"] .btn.quiet { border-color: transparent; background: transparent; }
html:root[data-frame="night"][data-theme="dark"] .btn.primary { background: linear-gradient(180deg, #d9b98a, #c09666); border-color: #e6cc9e; color: #1f1a12; text-shadow: none; box-shadow: 0 0 0 2px #23221e, 0 0 0 3px rgba(201, 162, 114, .6); }
html:root[data-frame="night"][data-theme="dark"] .btn:hover:not(:disabled) { border-color: var(--gold-2); }
html:root[data-frame="night"][data-theme="dark"] .chip { background: rgba(255, 240, 210, .03); border-color: rgba(201, 162, 114, .4); color: var(--ink-2); }
html:root[data-frame="night"][data-theme="dark"] .chip.on { background: #c9a272; border-color: #e6cc9e; color: #1f1a12; }
html:root[data-frame="night"][data-theme="dark"] :is(input[type=text], input[type=search], input[type=number], input[type=url], input[type=password], input:not([type]), select, textarea) { background: #1e1d1a; border-color: rgba(201, 162, 114, .4); color: var(--ink); box-shadow: none; }
/* 창·알림 */
html:root[data-frame="night"][data-theme="dark"] :is(.modal, .pop) { background-color: #2a2824; background-image: var(--c-tl), var(--c-tr), var(--c-bl), var(--c-br), var(--grain); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat; background-position: left 6px top 6px, right 6px top 6px, left 6px bottom 6px, right 6px bottom 6px, 0 0; background-size: 34px, 34px, 34px, 34px, auto; border: 0; border-radius: 3px; box-shadow: 0 0 0 1px rgba(201, 162, 114, .6), inset 0 0 0 4px #2a2824, inset 0 0 0 5px rgba(201, 162, 114, .3), var(--lift); }
html:root[data-frame="night"][data-theme="dark"] .toast { background: #1e1d1a; color: var(--ink); border: 1px solid rgba(201, 162, 114, .55); border-radius: 3px; }
html:root[data-frame="night"][data-theme="dark"] .chat { background-color: #23221e; border-left: 1px solid rgba(201, 162, 114, .5); }
html:root[data-frame="night"][data-theme="dark"] .help-tip { border-left-color: var(--gold); background: rgba(201, 162, 114, .08); }
@media (max-width: 900px) {
  html:root[data-frame="night"][data-theme="dark"] body { background-position: 0 0, center bottom, 50% -340px, 0 0, 0 0, 0 0; background-size: auto, 100% 120px, 760px 760px, auto, auto, auto; }
}

/* =========================================================
   정렬 다듬기 (모든 스킨)
   ========================================================= */
/* 위쪽 줄 내용을 본문 칸과 같은 왼쪽·오른쪽 선에 맞춘다 */
@media (min-width: 901px) {
  .statusbar { padding-inline: max(24px, calc((100% - 1000px) / 2 + 24px)); }
}
/* 휴대폰: 아래 막대도 본문과 같은 16px 여백 */
@media (max-width: 900px) { .hud { padding: 0 16px; } }
/* 도움말: 목차와 본문 폭을 같게 */
.help { max-width: none; margin-inline: 0; }
/* 오늘: 나란히 놓인 두 칸은 높이를 맞춘다 */
.home-2col { align-items: stretch; }
.home-2col > * { height: 100%; }

/* 별의 서고: 귀퉁이 장식은 작게, 칸 안의 칸에는 테두리를 겹쳐 두르지 않는다 */
html:root[data-frame="night"][data-theme="dark"] :is(.panel:not(.tight), .block.fold, .first-steps, .gb-open, .home-clock, .modal, .pop) {
  background-size: 22px, 22px, 22px, 22px, auto;
  background-position: left 4px top 4px, right 4px top 4px, left 4px bottom 4px, right 4px bottom 4px, 0 0;
}
html:root[data-frame="night"][data-theme="dark"] :is(.panel, .block.fold, .gb-open, .wg, .goods, .bd-card, .inc-card, .letter, .card) :is(.panel, .block.fold, .wg, .card) {
  background-image: none; background-color: rgba(52, 49, 43, .45); box-shadow: inset 0 0 0 1px rgba(201, 162, 114, .22); border-radius: 3px;
}
/* 제목 메달이 본문 왼쪽 선 밖으로 나가지 않게 */
html:root[data-frame="night"][data-theme="dark"] .ph-ico { margin-left: 5px; }
/* 어두운 화면: 랭킹 1위 칸이 너무 밝아 글자가 안 보이던 것 */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rank-cell.top { background: linear-gradient(160deg, rgba(230, 190, 100, .28), rgba(230, 190, 100, .08)); } :root:not([data-theme="light"]) .rank-cell.top b { color: #f0cf7a; } }
:root[data-theme="dark"] .rank-cell.top { background: linear-gradient(160deg, rgba(230, 190, 100, .28), rgba(230, 190, 100, .08)); }
:root[data-theme="dark"] .rank-cell.top b { color: #f0cf7a; }

/* 숫자는 본문 글꼴 + 고정폭 자릿수 */
.num, .mono, .hc-time, [class*='num'] { font-variant-numeric: tabular-nums; }

/* =========================================================
   글자 크기 체계 — 10 · 11 · 12 · 13 · 14.5(본문) · 16 · 18 · 20 · 24 · 28
   화면 제목 24~28 / 칸 제목 18 / 작은 칸 제목 16 / 본문 14.5 / 설명 13 / 꼬리표 12 / 아주 작은 것 11
   ========================================================= */
.block-head h2, .fold-btn h2, .gb-head h2, .pg-home .fold-head h2 { font-size: 18px; }
.block-head h3, .zone-head h3, .chat-head h3, .panel > b, .panel > .row > b { font-size: 16px; }
.modal h3, .party-modal h3, .owl-head h3, .ia2-head h3, .ii-head h3 { font-size: 20px; }
.duel-head h3, .legend-pop h3, .dp-head h3, .hero-txt h2 { font-size: 24px; }
.help-h { font-size: 20px; } .help-h3 { font-size: 16px; }
.ph-sub, .small, .help-lead { font-size: 13px; }
.eyebrow { font-size: 12px; }
/* 휴대폰: 취미 머리 그림 아래 제목이 잘리던 것 — 높이를 내용에 맞춘다 */
@media (max-width: 640px) { .hobby-body > .hero { height: auto; min-height: 0; } .hobby-body > .hero .hero-txt { overflow: visible; } }

/* =========================================================
   강조색은 스킨이 정한다(학생이 고르는 색은 이름 색만)
   ========================================================= */
html:root[data-skin="parchment"] .shell[class*="h-"] { --accent: #6d4818; --on-accent: #fff8ea; --accent-soft: rgba(109, 72, 24, .1); }
html:root[data-skin="parchment"][data-theme="dark"] .shell[class*="h-"] { --accent: #dcb46a; --on-accent: #1f1a12; --accent-soft: rgba(220, 180, 106, .13); }
html:root[data-frame="night"] .shell[class*="h-"] { --accent: #8a6531; --on-accent: #fff8ea; --accent-soft: rgba(138, 101, 49, .12); }
html:root[data-frame="night"][data-theme="dark"] .shell[class*="h-"] { --accent: #c9a272; --on-accent: #1f1a12; --accent-soft: rgba(201, 162, 114, .14); }

/* =========================================================
   소포: 받은 것 · 보낸 것 구분
   ========================================================= */
.pc-dir { margin-bottom: 10px; }
.pc-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; vertical-align: 1px; margin-right: 2px; }
.pc-tag.in { color: #2f6b46; background: rgba(60, 140, 90, .14); }
.pc-tag.out { color: #8a5a1e; background: rgba(184, 135, 58, .16); }
.letter.parcel.pc-in { border-left: 3px solid rgba(60, 140, 90, .55) !important; }
.letter.parcel.pc-out { border-left: 3px solid rgba(184, 135, 58, .55) !important; }
:root[data-theme="dark"] .pc-tag.in { color: #9fd3b0; } :root[data-theme="dark"] .pc-tag.out { color: #e6c08a; }

/* =========================================================
   관리 · 회원 상세: 칸 간격과 입력줄 정리
   ========================================================= */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.admin-detail .panel.tight { display: grid; gap: 10px; padding: 16px 18px; align-content: start; }
.admin-detail .panel.tight > b { margin-bottom: 2px; }
.admin-detail .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 0; }
.admin-detail .row > :only-child { grid-column: 1 / -1; justify-self: start; }
.admin-detail .row:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr) 72px auto; }
.admin-detail .row > input, .admin-detail .row > select, .admin-detail .row > .item-pick { width: 100% !important; min-width: 0; }
.admin-detail .row .btn { justify-self: end; white-space: nowrap; }
.admin-detail .kv { grid-template-columns: 92px minmax(0, 1fr); row-gap: 6px; }
.admin-detail .field { margin: 0; }
.admin-detail .confirm { grid-column: 1 / -1; }
.admin-detail .item-pick { display: grid; gap: 6px; min-width: 0; } .admin-detail .item-pick > * { width: 100%; }

html:root[data-frame="night"] .page-head::after { width: auto !important; }
.view[data-page=post] .page-head .ph-act { margin-right: 0; }
.pc-dir { display: inline-flex; justify-self: start; align-self: start; height: auto; width: auto; }
.pc-dir button { padding: 6px 12px; }
.admin-grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
html:root[data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) > .view[data-page=post] {
  background-color: var(--paper) !important;
  background-image: var(--grain), var(--fiber), radial-gradient(130% 100% at 50% 40%, transparent 62%, rgba(120, 84, 34, .16) 100%) !important;
  background-size: auto, auto, 100% 100% !important; background-repeat: repeat, repeat, no-repeat !important;
}
.post-box > .pc-dir { min-height: 0; max-height: none; overflow: visible; margin: 10px 16px 4px; }
.post-box > .pc-dir { min-height: 0 !important; max-height: none !important; overflow: visible !important; }
html:root[data-frame="night"] .post-box .letter, html:root[data-skin="parchment"] .post-box .letter { box-shadow: none !important; background-image: none !important; background-color: transparent !important; border-radius: 0 !important; }
.view[data-page=post] .page-head { flex-wrap: nowrap; } .view[data-page=post] .page-head .ph-act:empty { display: none; }
.view { align-content: start; }
/* 별의 서고 · 밝게: 위쪽 줄과 아래 막대를 책장 바깥 테두리에 맞춘다 */
@media (min-width: 901px) {
  html:root[data-frame="night"]:not([data-theme="dark"]) .statusbar { padding-inline: max(24px, calc((100% - 1000px) / 2)); }
  html:root[data-frame="night"]:not([data-theme="dark"]) .hud { padding: 0; }
  html:root[data-frame="night"]:not([data-theme="dark"]) .hud-in { width: min(1000px, calc(100% - 48px)); }
}
@media (max-width: 900px) { html:root[data-frame="night"]:not([data-theme="dark"]) .hud { padding: 0 8px; } }

/* 틀 안의 틀 줄이기: 코르크 게시판 안 펼친 칸과 그 안의 칸은 테두리 없이 */
html:root[data-frame="night"] .gboard .gb-open { box-shadow: none !important; background-image: none !important; }
html:root[data-frame="night"] :is(.panel, .block.fold, .gb-open, .wg, .goods, .bd-card, .inc-card, .letter, .card) :is(.panel, .block.fold, .wg, .card) { box-shadow: none !important; background-image: none !important; }

/* 별의 서고(어두운 화면): 흐린 글씨를 한 단계 밝게 */
html:root[data-frame="night"][data-theme="dark"] { --ink: #f0e8d6; --ink-2: #d9cdb2; --ink-3: #ab9f86; --rule: rgba(201, 162, 114, .38); }
html:root[data-frame="night"][data-theme="dark"] :is(.faint, .eyebrow, .ph-sub, .small.faint, .meta) { color: #b3a78e; }
html:root[data-frame="night"][data-theme="dark"] :is(input, textarea)::placeholder { color: #8f846f; }
html:root[data-frame="night"][data-theme="dark"] .chip { color: var(--ink); }
/* 기본 글자 크기 한 단계 작게: 본문 14 · 도움말·이야기 글 14 */
body { font-size: 14px; }
.prose { font-size: 14.5px; line-height: 1.75; }
.help { font-size: 14px; line-height: 1.7; }
.help-list { gap: 4px; }
/* 퀴디치 대진표: 줄마다 칸 높이를 맞춘다 */
.qd-bracket.qb-grid { display: grid; grid-template-columns: 1fr 1fr .9fr; grid-auto-rows: auto; gap: 10px 14px; align-items: stretch; }
.qb-grid > .qb-h { align-self: end; }
.qb-grid > .qb-cup { grid-column: 3; grid-row: 2 / span 2; display: grid; align-content: center; justify-items: center; gap: 8px; text-align: center; padding: 10px; }
.qb-grid > .qb-card { height: 100%; }
@media (max-width: 640px) {
  .qd-bracket.qb-grid { grid-template-columns: 1fr 1fr; }
  .qb-grid > .qb-h3 { display: none; }
  .qb-grid > .qb-cup { grid-column: 1 / -1; grid-row: auto; order: 9; }
}
/* 대화창·알림 창 넓이 조절 */
.chat { width: min(var(--chat-w, 380px), 100%); }
.shell.docked { grid-template-columns: var(--rail) minmax(0, 1fr) var(--chat-w, 340px); }
@media (max-width: 1360px) { .shell.docked { grid-template-columns: var(--rail) minmax(0, 1fr); } .shell.docked .chat { width: min(var(--chat-w, 380px), 100%); } }
.pop { width: min(var(--pop-w, 360px), calc(100% - 32px)); }
.chat > .rz-h, .pop > .rz-h { position: absolute; left: -4px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 5; touch-action: none; }
.pop { position: fixed; }
.chat > .rz-h::after, .pop > .rz-h::after { content: ''; position: absolute; left: 3px; top: 50%; width: 4px; height: 44px; margin-top: -22px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 45%, transparent); opacity: 0; transition: opacity .15s; }
.chat > .rz-h:hover::after, .pop > .rz-h:hover::after, body.rz-on .rz-h::after { opacity: 1; }
body.rz-on { cursor: ew-resize; user-select: none; }
@media (max-width: 900px) { .rz-h { display: none; } }
.tabcol-rows { display: grid; gap: 6px; }
.tabcol-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 8px; }
.tc-name { font-size: 13px; font-weight: 700; color: var(--tc, var(--ink)); }
.tc-name.ct-all { --tc: #c08a1e; } .tc-name.ct-place { --tc: #3f8f6a; } .tc-name.ct-rp { --tc: #8a5cc4; } .tc-name.ct-house { --tc: var(--hc-me, #3d6fb8); }
.swatches.sm { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.swatches.sm .swatch { width: 20px; height: 20px; }
.swatches.sm .chip { padding: 2px 9px; font-size: 12px; }
.bag-tools { display: flex; } .bag-tools input { width: min(320px, 100%); }
.cm-x { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; margin-left: 4px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); opacity: .55; cursor: pointer; vertical-align: middle; } .cm-x .ico { width: 12px; height: 12px; } .cm-x:hover { opacity: 1; color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.auc-done { display: inline-flex; align-items: center; gap: 4px; }
/* 잔디 위 글씨는 밝게 */
.qd-bracket .qb-h, .qd-bracket .qb-cup, .qd-bracket .qb-cup .small, .qd-bracket .qb-cup .faint { color: #fbf4e2 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.qd-bracket .qb-h { font-weight: 700; letter-spacing: .04em; }
.swatches.sm .swatch { width: 18px; height: 18px; } .swatches.sm { gap: 4px; }

/* =========================================================
   별의 서고 (최종) — 바깥은 먹빛 + 청동, 칸은 원래 밝기
   · 뿌리(:root): 밝은 칸 색  · 본문(.view): 먹빛 위 글씨(밝은 글씨)  · 본문 안의 칸: 다시 밝은 칸 색
   ========================================================= */
html:root[data-frame="night"]:not([data-theme="dark"]) {
  --paper: #efe6d3; --sheet: #faf5ea; --sheet-2: #efe6d3; --rule: #dccaa6;
  --ink: #2b2318; --ink-2: #5a4934; --ink-3: #85755b;
  --accent: #8a6531; --on-accent: #fff8ea; --accent-soft: rgba(138, 101, 49, .12);
  --gilt: #b08a4a; --gold: #c9a272; --gold-2: #e6cc9e;
  --f-latin: 'Cinzel', 'Gowun Batang', serif;
  --dk-ink: #f1e8d6; --dk-ink-2: #d8cbaf; --dk-ink-3: #ada189;
  --astro-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100' viewBox='0 0 1100 1100'><g fill='none' stroke='%23c9a272' stroke-width='1.2' opacity='.15'><circle cx='550' cy='550' r='520'/><circle cx='550' cy='550' r='490'/><circle cx='550' cy='550' r='380' stroke-dasharray='2 10'/><circle cx='550' cy='550' r='250'/><path d='M550 30v1040M30 550h1040M182 182l736 736M918 182L182 918'/><path d='M550 60 C 760 300 760 800 550 1040 M550 60 C 340 300 340 800 550 1040' opacity='.6'/><path d='M140 360 L 420 250 L 700 420 L 960 300' stroke-width='.8'/><path d='M200 760 L 480 820 L 760 700 L 900 780' stroke-width='.8'/></g><g fill='%23e6cc9e' opacity='.45'><circle cx='420' cy='250' r='2.2'/><circle cx='700' cy='420' r='2.6'/><circle cx='960' cy='300' r='2'/><circle cx='140' cy='360' r='2'/><circle cx='480' cy='820' r='2.4'/><circle cx='760' cy='700' r='2'/></g></svg>");
  --ridge-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='220' viewBox='0 0 1600 220' preserveAspectRatio='none'><path d='M0 220V150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60V220z' fill='%23181713' opacity='.75'/><path d='M0 150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60' fill='none' stroke='%23c9a272' stroke-width='1.2' opacity='.35'/></svg>");
  --cn-tl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23b08a4a' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23b08a4a'/></svg>");
  --cn-tr: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(40 0) scale(-1 1)'><g fill='none' stroke='%23b08a4a' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23b08a4a'/></g></svg>");
  --spark-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'><g fill='%23c9a272'><path d='M12 3l1.3 3.7L17 8l-3.7 1.3L12 13l-1.3-3.7L7 8l3.7-1.3z'/><path d='M32 1l1.8 5.2L39 8l-5.2 1.8L32 15l-1.8-5.2L25 8l5.2-1.8z'/><path d='M52 3l1.3 3.7L57 8l-3.7 1.3L52 13l-1.3-3.7L47 8l3.7-1.3z'/></g></svg>");
  color-scheme: light;
}
html:root[data-frame="night"]:not([data-theme="dark"]) .shell[class*="h-"] { --accent: #8a6531; --on-accent: #fff8ea; --accent-soft: rgba(138, 101, 49, .12); }
/* 바깥 바탕: 먹빛 + 천구 원 + 산 능선 (오른쪽 기둥 띠는 없음) */
html:root[data-frame="night"]:not([data-theme="dark"]) body {
  background-color: #252420;
  background-image: var(--grain), var(--ridge-n), var(--astro-n), radial-gradient(80% 60% at 55% 0%, rgba(120, 104, 80, .28), transparent 65%), linear-gradient(180deg, #2c2b27, #1e1d1a);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, center bottom, 58% -260px, 0 0, 0 0;
  background-size: auto, 100% 200px, 1100px 1100px, auto, auto;
  background-attachment: fixed;
}
html:root[data-frame="night"] .stage::after { content: none !important; display: none !important; }
html:root[data-frame="night"]:not([data-theme="dark"]) .stage, html:root[data-frame="night"]:not([data-theme="dark"]) .shell { background: transparent; }
html:root[data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) > .view,
html:root[data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) > .view[data-page=post] { background: transparent !important; box-shadow: none !important; }

/* 먹빛 위에 바로 놓이는 것들(메뉴·위쪽 줄·아래 막대·본문 바탕 글씨): 밝은 글씨 */
html:root[data-frame="night"]:not([data-theme="dark"]) :is(.rail, .statusbar, .tabbar, .hud, .stage > .view) {
  --ink: #f1e8d6; --ink-2: #d8cbaf; --ink-3: #ada189; --rule: rgba(201, 162, 114, .38);
  --paper: #23221e; --sheet: #302e29; --sheet-2: #3a3731;
  --accent: #d4b07a; --on-accent: #1f1a12; --accent-soft: rgba(212, 176, 122, .15);
  color: var(--ink);
}
/* 본문 안의 칸(그리고 창·팝업): 다시 밝은 칸 색 */
html:root[data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block, .wg, .goods, .bd-card, .inc-card, .letter, .card, .gb-open, .gboard, .first-steps, .table-wrap, .item, .person, .next, .sc-btn, .fs-stage, .shop-sec, .hero, .bag-tab, .bn-shelf, .dx-spread, .hobby-body, .broom-shop, .qd-bracket, .page-tabs .on, .modal, .pop, .help-toc, .rank-cell, .post-box, .post-compose, .hall-card, .ev-row, .fest-card, .news-row, .rr-scene, .inc-head, .auc-sell),
html:root[data-frame="night"]:not([data-theme="dark"]) :is(.modal, .pop, #chat) {
  --ink: #2b2318; --ink-2: #5a4934; --ink-3: #85755b; --rule: #dccaa6;
  --paper: #efe6d3; --sheet: #faf5ea; --sheet-2: #efe6d3;
  --accent: #8a6531; --on-accent: #fff8ea; --accent-soft: rgba(138, 101, 49, .12);
  color: var(--ink);
}
/* 칸 테두리: 얇은 청동 이중선, 큰 칸은 위 두 귀퉁이 장식 */
html:root[data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card, .first-steps) {
  background-color: var(--sheet); border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(176, 138, 74, .6), inset 0 0 0 3px var(--sheet), inset 0 0 0 4px rgba(176, 138, 74, .22), 0 10px 26px -14px rgba(0, 0, 0, .7);
}
html:root[data-frame="night"]:not([data-theme="dark"]) .view :is(.panel:not(.tight), .block.fold, .first-steps) {
  background-image: var(--cn-tl), var(--cn-tr), var(--grain); background-repeat: no-repeat, no-repeat, repeat;
  background-position: left 4px top 4px, right 4px top 4px, 0 0; background-size: 20px, 20px, auto;
}
html:root[data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block.fold, .gb-open, .wg, .goods, .bd-card, .inc-card, .letter, .card) :is(.panel, .block.fold, .wg, .card) { box-shadow: inset 0 0 0 1px rgba(176, 138, 74, .25) !important; background-image: none !important; }
html:root[data-frame="night"]:not([data-theme="dark"]) .view :is(.block-head h3, .panel > b, .panel > .row > b) { color: #5a3f18; font-family: var(--f-display); }

/* 메뉴·위쪽 줄·아래 막대 */
html:root[data-frame="night"]:not([data-theme="dark"]) .rail { background: #1e1d1a; background-image: var(--grain); border-right: 0; box-shadow: inset -1px 0 0 rgba(201, 162, 114, .55), inset -5px 0 0 #1e1d1a, inset -6px 0 0 rgba(201, 162, 114, .3), 8px 0 30px rgba(0, 0, 0, .45); }
html:root[data-frame="night"]:not([data-theme="dark"]) .nav button { color: var(--ink); font-family: var(--f-display); }
html:root[data-frame="night"]:not([data-theme="dark"]) .nav button:hover { background: rgba(201, 162, 114, .1); }
html:root[data-frame="night"]:not([data-theme="dark"]) .nav button.on { background: rgba(201, 162, 114, .18); box-shadow: inset 0 0 0 1px rgba(201, 162, 114, .55); color: #f0d9a8; }
html:root[data-frame="night"]:not([data-theme="dark"]) .nav-ico { background: transparent !important; color: #c9a272 !important; box-shadow: inset 0 0 0 1px rgba(201, 162, 114, .4); border-radius: 50% !important; }
html:root[data-frame="night"]:not([data-theme="dark"]) .nav-label { color: #c9a272; letter-spacing: .12em; }
html:root[data-frame="night"]:not([data-theme="dark"]) .rail-brand { color: #e6cc9e; font-family: var(--f-display); }
html:root[data-frame="night"]:not([data-theme="dark"]) .statusbar { background: rgba(30, 29, 26, .88); background-image: none; border-bottom: 1px solid rgba(201, 162, 114, .45); }
html:root[data-frame="night"]:not([data-theme="dark"]) :is(.statusbar, .tabbar) .btn { background: rgba(255, 240, 210, .04); border-color: rgba(201, 162, 114, .4); color: var(--ink); box-shadow: none; }
html:root[data-frame="night"]:not([data-theme="dark"]) .tabbar { background: rgba(30, 29, 26, .96); background-image: none; border-top: 1px solid rgba(201, 162, 114, .45); }
html:root[data-frame="night"]:not([data-theme="dark"]) .hud-in { background: rgba(30, 29, 26, .93); background-image: none; border: 1px solid rgba(201, 162, 114, .45); border-radius: 4px; box-shadow: 0 -6px 24px -10px rgba(0, 0, 0, .5); }
html:root[data-frame="night"]:not([data-theme="dark"]) .hud-mini { background: rgba(30, 29, 26, .93); color: var(--ink-2); }

/* 페이지 머리 (먹빛 위) */
html:root[data-frame="night"]:not([data-theme="dark"]) .page-head { border-bottom: 0; position: relative; padding-bottom: 18px; }
html:root[data-frame="night"]:not([data-theme="dark"]) .page-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; width: auto;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 114, .7) 10%, rgba(201, 162, 114, .7) 44%, transparent 44.5%, transparent 55.5%, rgba(201, 162, 114, .7) 56%, rgba(201, 162, 114, .7) 90%, transparent) center / 100% 1px no-repeat, var(--spark-n) center / 64px 14px no-repeat; }
html:root[data-frame="night"]:not([data-theme="dark"]) .ph-ico { margin-left: 5px; border-radius: 50%; background: radial-gradient(circle, #34312b 55%, #23221e); color: #e6cc9e; box-shadow: 0 0 0 1px rgba(201, 162, 114, .7), 0 0 0 4px #23221e, 0 0 0 5px rgba(201, 162, 114, .45); }
html:root[data-frame="night"]:not([data-theme="dark"]) .ph-txt h1 { color: #f3ead8; font-family: var(--f-display); }
html:root[data-frame="night"]:not([data-theme="dark"]) .ph-txt h1::before { content: var(--pg-en, 'HOGWARTS'); display: block; font-family: var(--f-latin); font-size: 11px; font-weight: 700; letter-spacing: .3em; color: #c9a272; margin-bottom: 3px; }

/* 버튼·칩 */
html:root[data-frame="night"]:not([data-theme="dark"]) .btn.primary { background: linear-gradient(180deg, #3a3631, #26241f); border-color: #8a6a2e; color: #f0d9a8; text-shadow: none; box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3px rgba(176, 138, 74, .6); border-radius: 999px; }
html:root[data-frame="night"]:not([data-theme="dark"]) .btn:not(.primary):not(.quiet) { border-radius: 999px; border-color: color-mix(in srgb, #b08a4a 55%, transparent); }
html:root[data-frame="night"]:not([data-theme="dark"]) .chip.on { background: #2f2c27; border-color: #8a6a2e; color: #f0d9a8; }
html:root[data-frame="night"]:not([data-theme="dark"]) .stage > .view > .chips .chip.on, html:root[data-frame="night"]:not([data-theme="dark"]) .stage > .view .subtabs .on { background: #c9a272; border-color: #e6cc9e; color: #1f1a12; }
html:root[data-frame="night"]:not([data-theme="dark"]) :is(.modal, .pop) { background-color: var(--sheet); border-radius: 4px; box-shadow: 0 0 0 1px rgba(176, 138, 74, .7), inset 0 0 0 4px var(--sheet), inset 0 0 0 5px rgba(176, 138, 74, .3), 0 24px 60px -18px rgba(0, 0, 0, .6); }
html:root[data-frame="night"]:not([data-theme="dark"]) .toast { background: #23221e; color: #f1e8d6; border: 1px solid rgba(201, 162, 114, .55); border-radius: 4px; }
html:root[data-frame="night"]:not([data-theme="dark"]) #chat { border-left: 1px solid rgba(176, 138, 74, .6); }
/* 오늘 시계는 먹빛 판 */
html:root[data-frame="night"]:not([data-theme="dark"]) .home-clock { --hc-bg1: #34312b; --hc-bg2: #26241f; --hc-ink: #f1e6cf; background: var(--grain), radial-gradient(90% 140% at 92% 20%, rgba(255, 214, 120, .18), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); border-radius: 4px; box-shadow: 0 0 0 1px rgba(201, 162, 114, .7), inset 0 0 0 4px #2c2a25, inset 0 0 0 5px rgba(201, 162, 114, .35); }
html:root[data-frame="night"]:not([data-theme="dark"]) .home-clock .hc-time { color: #e6cc9e; }
/* 설정: 글씨 한 단계 작게 */
.view[data-page=settings] { font-size: 13px; }
.view[data-page=settings] .toggle, .view[data-page=settings] label { font-size: 13px; }
.view[data-page=settings] .panel > b { font-size: 15px; }
.view[data-page=settings] .small { font-size: 12px; }
@media (min-width: 901px) {
  html:root[data-frame="night"]:not([data-theme="dark"]) .statusbar { padding-inline: max(24px, calc((100% - 1000px) / 2 + 24px)); }
  html:root[data-frame="night"]:not([data-theme="dark"]) .hud { padding: 0 16px; }
  html:root[data-frame="night"]:not([data-theme="dark"]) .hud-in { width: min(952px, 100%); }
}
@media (max-width: 900px) { html:root[data-frame="night"]:not([data-theme="dark"]) .hud { padding: 0 16px; } }
.adm-reset { display: grid; gap: 6px; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--rule); } .adm-reset .row { display: flex !important; gap: 6px; flex-wrap: wrap; }
/* 싸움 중 대처 */
.tactics { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.tac { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); font: inherit; cursor: pointer; }
.tac b { font-size: 13px; display: flex; align-items: center; gap: 5px; } .tac b small { font-weight: 600; color: var(--ink-3); font-size: 11px; margin-left: auto; }
.tac span { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.tac:hover:not(:disabled) { border-color: var(--accent); }
.tac:disabled { opacity: .45; cursor: not-allowed; }
.tac.special { grid-column: 1 / -1; border-color: color-mix(in srgb, #c9a227 60%, var(--rule)); background: color-mix(in srgb, #f2d27a 18%, var(--sheet)); }
.tac.special b { color: #8a6418; } .tac.special .ico { width: 14px; height: 14px; color: #c9a227; }

/* 별의 서고(어둡게)로 되돌림 — 오른쪽 기둥 띠는 계속 없앰 */
html:root[data-frame="night"] .stage::after { content: none !important; }
/* 전투: 내 능력치가 지금 하는 일 */
.odds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 2px 0 8px; }
.odds > span { display: grid; gap: 1px; padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.odds i { font-style: normal; font-size: 11px; color: var(--ink-3); }
.odds b { font-family: var(--f-mono); color: var(--ink); font-size: 13px; }
@media (max-width: 560px) { .odds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.attr-cell .at-now { display: block; font-size: 12px; color: var(--gold-2, var(--accent)); font-family: var(--f-mono); margin-top: 2px; }

/* ===== 던전: 혼자 떠나기 / 함께 싸우기 그림 카드 ===== */
.dg-group { display: grid; gap: 6px; }
.dg-group + .dg-group { margin-top: 2px; }
.dg-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); }
.dg-label .ico { width: 14px; height: 14px; }
.dg-label .faint { font-weight: 400; }
.dg-card .dg-art { opacity: 1; }
.dg-card .dg-art svg { position: absolute; right: 0; bottom: 0; width: 72%; height: 100%; }
.dg-party { background: radial-gradient(circle at 85% 20%, rgba(150, 190, 255, .32), transparent 50%), linear-gradient(160deg, #3a3f6e, #181a33); }
.dg-raid { background: radial-gradient(circle at 80% 30%, rgba(255, 120, 90, .32), transparent 50%), linear-gradient(160deg, #5e2a2a, #1f0f10); }
.dga-tw circle, .dga-fly circle { animation: dgTw 2.6s ease-in-out infinite; }
.dga-tw circle:nth-child(2n), .dga-fly circle:nth-child(2n) { animation-delay: -1.3s; }
.dga-fly { animation: dgDrift 6s ease-in-out infinite; }
.dga-swing { transform-origin: 150px 66px; animation: dgSwing 1.6s ease-in-out infinite; }
.dga-path { animation: dgDash 3s linear infinite; }
.dga-bob { animation: dgBob 2.2s ease-in-out infinite; }
.dga-bolt path { stroke-dasharray: 90; stroke-dashoffset: 90; animation: dgBolt 1.8s ease-in infinite; }
.dga-bolt path:nth-child(2) { animation-delay: .5s; }
.dga-hit { transform-origin: 180px 50px; animation: dgHit 1.8s ease-out infinite; }
.dga-shake { animation: dgShake 3.2s ease-in-out infinite; transform-origin: 150px 120px; }
.dga-eye { animation: dgEye 3.2s steps(1) infinite; }
.dga-ring circle { transform-origin: 150px 118px; animation: dgRing 3.2s ease-out infinite; }
@keyframes dgTw { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
@keyframes dgDrift { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-6px, -5px) } }
@keyframes dgSwing { 0%, 100% { transform: rotate(-18deg) } 50% { transform: rotate(12deg) } }
@keyframes dgDash { to { stroke-dashoffset: -26 } }
@keyframes dgBob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@keyframes dgBolt { 0% { stroke-dashoffset: 90; opacity: 0 } 15% { opacity: 1 } 60% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes dgHit { 0%, 55% { transform: scale(.2); opacity: 0 } 65% { transform: scale(1.3); opacity: 1 } 100% { transform: scale(1.6); opacity: 0 } }
@keyframes dgShake { 0%, 70%, 100% { transform: translate(0, 0) } 74% { transform: translate(-2px, 1px) } 78% { transform: translate(2px, -1px) } 82% { transform: translate(-2px, 0) } 86% { transform: translate(1px, 1px) } }
@keyframes dgEye { 0%, 46%, 50%, 100% { opacity: 1 } 47%, 49% { opacity: .1 } 72%, 90% { opacity: 1 } }
@keyframes dgRing { 0%, 70% { transform: scale(.3); opacity: 0 } 76% { opacity: 1 } 100% { transform: scale(1.4); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .dg-art * { animation: none !important; } }
.dg-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 14px; color: #f2ead9; }
.dg-intro h2 { margin: 2px 0 4px; font-family: var(--f-display); font-size: 20px; color: #fff; }
.dg-intro .eyebrow { color: rgba(255, 255, 255, .7); }
.dg-intro .small { color: rgba(255, 255, 255, .82); }
.dg-intro.th-party { background: linear-gradient(160deg, #343963, #1a1c36); }
.dg-intro.th-raid { background: linear-gradient(160deg, #552828, #221112); }
.dg-vs { display: grid; gap: 6px; font-size: 11.5px; line-height: 1.4; }
.dg-vs span { padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .12); }
.dg-vs span:first-child { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .35); }
.dg-vs b { display: block; font-size: 12.5px; }
@media (max-width: 640px) { .dg-intro { grid-template-columns: 1fr; } .dg-vs { grid-template-columns: 1fr 1fr; } }

/* ===== 퀴디치 경기장 비행 연습 ===== */
.fly-panel { display: grid; gap: 10px; }
.fly-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fly-mode { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.fly-mode b { font-size: 13.5px; color: var(--ink); }
.fly-mode.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.fly-course { position: relative; height: 44px; margin: 4px 14px 2px; }
.fly-track { position: absolute; left: 0; right: 0; top: 20px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.fly-track i { display: block; height: 100%; background: linear-gradient(90deg, #6aa7d8, #f2cf7a); transition: width 1s linear; }
.fly-ring { position: absolute; top: 9px; width: 16px; height: 26px; margin-left: -8px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--ink) 30%, transparent); box-sizing: border-box; }
.fly-ring.ok { border-color: #e2b84f; box-shadow: 0 0 8px rgba(226, 184, 79, .6); }
.fly-ring.miss { border-color: var(--bad); border-style: dashed; opacity: .8; }
.fly-me { position: absolute; top: 4px; margin-left: -14px; width: 28px; height: 28px; display: grid; place-items: center; color: #f2cf7a; transition: left 1s linear; animation: flyBob 1.2s ease-in-out infinite; }
.fly-me .ico { width: 22px; height: 22px; }
@keyframes flyBob { 0%, 100% { transform: translateY(0) rotate(-6deg) } 50% { transform: translateY(-4px) rotate(4deg) } }
.fly-result { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.fly-result.best { border-color: #e2b84f; box-shadow: inset 0 0 0 1px rgba(226, 184, 79, .5); }
.fly-result b.num { font-size: 30px; font-family: var(--f-display); color: var(--ink); }
.fly-result b.num small { font-size: 14px; margin-left: 2px; }
.fly-res-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fly-res-tags span { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.fly-res-tags .good { color: var(--good); border-color: currentColor; }
.fly-board { display: grid; gap: 4px; padding-top: 8px; border-top: 1px dashed var(--line); }
.fly-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 6px; border-radius: 6px; }
.fly-row b { color: var(--pc, var(--ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fly-row.me { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.fly-row > .num:first-child { color: var(--ink-3); text-align: center; }
@media (max-width: 560px) { .fly-modes { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .fly-course { margin: 4px 6px 2px; } .fly-ring { width: 11px; height: 20px; margin-left: -5.5px; top: 12px; border-width: 2px; } }

/* 작은 창 옮기기: 제목 줄을 끌어서 */
#pop .pop > .row:first-of-type { cursor: grab; user-select: none; touch-action: none; }
#pop .pop > .row:first-of-type:active { cursor: grabbing; }
#pop.moved .pop { left: var(--pop-x) !important; top: var(--pop-y) !important; right: auto !important; bottom: auto !important; transform: none !important; max-height: calc(100vh - var(--pop-y) - 12px); }

/* 지도: 크게 보고, 방을 누르면 '이동할까요?' 창 */
.mapwrap { height: calc(100vh - 200px) !important; height: calc(100dvh - 200px) !important; min-height: 520px !important; max-height: none !important; aspect-ratio: auto !important; }
@media (max-width: 900px) { .mapwrap { height: calc(100dvh - 270px) !important; min-height: 380px !important; } }
.map-ask { display: grid; gap: 10px; }
.map-ask h3 { font-size: 20px; margin: 2px 0 0; }
.map-ask .people { max-height: 140px; overflow-y: auto; }
.ma-q { padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-size: 14.5px; }

/* 지도 위 학생 이름: 더 크고 또렷하게 */
.foot text { font: 700 15.5px var(--f-body) !important; paint-order: stroke; stroke: var(--map-paper); stroke-width: 3.5px; stroke-linejoin: round; }
.foot.me text { font-size: 16.5px !important; }
.foot ellipse { transform: scale(1.25); }
.foot-more { font: 600 14px var(--f-body) !important; }

/* 지도: 화면 전체를 배경처럼 */
.view[data-page="map"]:has(.mapwrap) { max-width: none; padding: 0 !important; gap: 0; position: relative; }
.view[data-page="map"]:has(.mapwrap) > :is(.page-head, .subtabs, .block-head) { display: none; }
.view[data-page="map"]:has(.mapwrap) .mapwrap { height: calc(100dvh - var(--sb-h, 56px)) !important; min-height: 420px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.view[data-page="map"]:has(.mapwrap) .map-bar { position: absolute; z-index: 4; top: 12px; left: 12px; right: 12px; padding: 6px 8px; border-radius: 12px; background: color-mix(in srgb, var(--sheet) 88%, transparent); border: 1px solid var(--rule); box-shadow: var(--soft); backdrop-filter: blur(6px); }
.view[data-page="map"]:has(.mapwrap) .map-note { position: absolute; z-index: 4; left: 16px; bottom: 150px; margin: 0; max-width: min(460px, calc(100% - 32px)); padding: 5px 10px; border-radius: 8px; font-size: 12px; background: color-mix(in srgb, var(--sheet) 85%, transparent); color: var(--ink-2); }
.view[data-page="map"]:has(.mapwrap) .map-tools { top: auto; bottom: 150px; right: 16px; }
.view[data-page="map"]:has(.map-list) { max-width: 1000px; }
@media (max-width: 900px) {
  .view[data-page="map"]:has(.mapwrap) .mapwrap { height: calc(100dvh - var(--sb-h, 56px) - var(--tabbar-h, 55px)) !important; }
  .view[data-page="map"]:has(.mapwrap) .map-bar { top: 8px; left: 8px; right: 8px; }
  .view[data-page="map"]:has(.mapwrap) .map-note { display: none; }
  .view[data-page="map"]:has(.mapwrap) .map-tools { bottom: 140px; right: 10px; }
}

/* =====================================================================
   별의 서고(어둡게) — 대비 손질
   · 버튼·칩·탭은 바탕보다 한 톤 밝게 해서 눌러지는 곳이 보이게
   · 밝은 칸(꾸러미 주머니·요리·도감)은 밝은 바탕 + 진한 글씨로
   ===================================================================== */
html:root[data-frame="night"][data-theme="dark"] .btn:not(.primary):not(.quiet):not(.danger):not(.stop) { background: #3d382f; border-color: rgba(214, 178, 128, .62); color: #f3e8d0; }
html:root[data-frame="night"][data-theme="dark"] .btn:not(.primary):not(:disabled):hover { background: #4a443a; }
html:root[data-frame="night"][data-theme="dark"] .btn.quiet { background: rgba(255, 240, 210, .07); border-color: rgba(214, 178, 128, .28); color: #eadcc0; }
html:root[data-frame="night"][data-theme="dark"] .btn:disabled { opacity: .5; }
html:root[data-frame="night"][data-theme="dark"] :is(.chip, .ptag) { background: #38332b; border-color: rgba(214, 178, 128, .5); color: #efe3ca; }
html:root[data-frame="night"][data-theme="dark"] .chip:not(.on):hover { background: #453f35; }
html:root[data-frame="night"][data-theme="dark"] :is(.htab, .subtabs button, .seg button, .bag-tab, .rank-cell, .fly-mode, .tac, .spell, .rps-cell, .tk-act) { background: #38332b; border-color: rgba(214, 178, 128, .42); color: #efe3ca; }
html:root[data-frame="night"][data-theme="dark"] :is(.htab.on, .subtabs button.on, .seg button.on, .bag-tab.on, .rank-cell.on, .fly-mode.on) { background: #5a4a30; border-color: #e0bf86; color: #fff6e2; box-shadow: inset 0 0 0 1px rgba(224, 191, 134, .5); }
html:root[data-frame="night"][data-theme="dark"] .htab .ico { background: rgba(255, 240, 210, .1); }

/* 밝은 칸 안 글씨는 진하게 */
html:root[data-frame="night"][data-theme="dark"] :is(.pouch-body, .panel.cook-lab, .dx-page, .ck-book, .ck-mastery) { --ink: #3a2a1a; --ink-2: #5a4430; --ink-3: #85694c; --rule: rgba(120, 85, 45, .3); --line: rgba(120, 85, 45, .25); --sheet: #fbf3e2; color: #3a2a1a; }

/* 꾸러미: 삼베 주머니 */
html:root[data-frame="night"] .pouch { --cloth: #e6d2ad; }
html:root[data-frame="night"] .pt-neck, html:root[data-frame="night"] .pt-frill { fill: #dcc497; stroke: #8a6a42; }
html:root[data-frame="night"] .pouch-body { background:
    repeating-linear-gradient(0deg, rgba(120, 85, 45, .06) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(120, 85, 45, .06) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 30%, #f1e2c2, #d9bf90 75%, #c7a874) !important;
  border: 1.5px solid #9a7748 !important; box-shadow: inset 0 -10px 18px rgba(110, 70, 30, .22), 0 6px 14px rgba(0, 0, 0, .35) !important;
  border-radius: 26px 26px 48% 48% / 18px 18px 34% 34% !important; padding-bottom: 22px !important; }
html:root[data-frame="night"] .pouch-body::before { content: ''; position: absolute; left: 14px; right: 14px; top: 8px; border-top: 1.5px dashed rgba(120, 80, 40, .45); }
html:root[data-frame="night"] .pouch-body .pb-head b { color: #3a2a1a; }
html:root[data-frame="night"] .pouch-body :is(.small, .faint, .pb-hint) { color: #6e5538 !important; }
html:root[data-frame="night"] .pouch-body .slot span, html:root[data-frame="night"] .pouch-body .slots span { color: #4a3622; }
html:root[data-frame="night"] .pb-rw { background: #fff7e6; color: #7a5410; box-shadow: 0 0 0 1px rgba(120, 85, 45, .3); }

/* 요리: 밝은 부엌 칸 되살리기 */
html:root[data-frame="night"] body .view .panel.panel.cook-lab.cook-lab { background: radial-gradient(circle at 75% 25%, rgba(255, 190, 110, .28), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect width='28' height='28' fill='%23fbf1e1'/%3E%3Cpath d='M0 .5H28M.5 0V28' stroke='%23efdcc0' stroke-width='1'/%3E%3C/svg%3E") !important;
  border: 1px solid #e3c49a !important; border-radius: 14px !important; padding: 16px 18px !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .35) !important; }
html:root[data-frame="night"] .panel.cook-lab::before, html:root[data-frame="night"] .panel.cook-lab::after { display: none !important; }
html:root[data-frame="night"] .cook-lab :is(.trek-title, h2, h3) { color: #6a3a1c !important; }
html:root[data-frame="night"] .cook-lab .eyebrow { color: #a8642c !important; }
html:root[data-frame="night"] .cook-lab :is(.small, .muted) { color: #6e5236 !important; }
html:root[data-frame="night"] .cook-lab .faint { color: #977758 !important; }
html:root[data-frame="night"] .cook-lab .btn:not(.primary) { background: #fff4e2 !important; color: #5a3a1c !important; border-color: #d9b182 !important; }
/* 요리 칸 정렬: 제목줄·수첩·조리대를 같은 선에 */
.cook-lab > .row.between { align-items: flex-end; flex-wrap: wrap; gap: 6px 12px; }
.cook-lab > .row.between > :last-child { margin-left: auto; text-align: right; }

/* 도감: 오래된 책을 펼친 모습 */
html:root[data-frame="night"] .dx-spread { padding: 12px 14px 16px !important; border-radius: 10px 10px 14px 14px !important;
  background: linear-gradient(180deg, #5b3a22, #3f2716) !important;
  box-shadow: inset 0 0 0 2px #2a190c, inset 0 0 0 4px rgba(214, 170, 100, .35), 0 14px 26px rgba(0, 0, 0, .5) !important; gap: 0; }
html:root[data-frame="night"] .dx-page { background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(120, 80, 30, .22) 100%),
    linear-gradient(transparent 0 27px, rgba(120, 85, 45, .08) 27px 28px) 0 6px / 100% 28px,
    #eadbb8 !important; color: #3a2a1a; padding: 34px 22px 34px !important; min-height: 380px; }
html:root[data-frame="night"] .dx-page.left { border-radius: 6px 2px 2px 8px !important; box-shadow: inset -18px 0 22px -14px rgba(70, 40, 10, .45), -3px 3px 0 #d8c69e, -6px 6px 0 #c7b285 !important; }
html:root[data-frame="night"] .dx-page.right { border-radius: 2px 6px 8px 2px !important; background-color: #ecdfbe !important; box-shadow: inset 18px 0 22px -14px rgba(70, 40, 10, .45), 3px 3px 0 #d8c69e, 6px 6px 0 #c7b285 !important; }
html:root[data-frame="night"] .dx-spread::after { top: 12px !important; bottom: 16px !important; width: 34px !important; margin-left: -17px !important; background: linear-gradient(90deg, transparent, rgba(60, 35, 10, .35) 45%, rgba(60, 35, 10, .45) 50%, rgba(60, 35, 10, .35) 55%, transparent) !important; }
html:root[data-frame="night"] .dx-page h3 { font-family: var(--f-display); color: #4a2c14; font-size: 22px; }
html:root[data-frame="night"] .dx-page .eyebrow { color: #8a5a2a; letter-spacing: .2em; }
html:root[data-frame="night"] .dx-page :is(.small, .faint) { color: #6e5538 !important; }
html:root[data-frame="night"] .dx-page .dp-head { border-bottom: 1px solid rgba(120, 85, 45, .35); padding-bottom: 8px; }
html:root[data-frame="night"] .dx-page .dx-it { background: #f6ecd2 !important; color: #3a2a1a; box-shadow: 0 0 0 1px rgba(120, 85, 45, .35), 0 2px 0 rgba(120, 85, 45, .2) !important; border-radius: 4px !important; }
html:root[data-frame="night"] .dx-page .dx-it.unknown { background: transparent !important; box-shadow: none !important; border: 1.5px dashed rgba(120, 85, 45, .45) !important; color: #8a7050; }
html:root[data-frame="night"] .dx-page .dx-q { background: rgba(120, 85, 45, .14); color: #7a5a38; font-family: var(--f-display); }
html:root[data-frame="night"] .dp-no { color: #8a6a44; font-family: var(--f-display); font-style: italic; }
html:root[data-frame="night"] .dx-page .bn-prog { background: rgba(120, 85, 45, .2); }
html:root[data-frame="night"] .dx-page .bn-prog i { background: #8a5a2a; }
html:root[data-frame="night"] .dx-mark { border-radius: 2px 2px 0 0 !important; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); padding-bottom: 16px !important; background: color-mix(in srgb, var(--mc) 60%, #3a2a1a) !important; color: #fff3dc !important; }
html:root[data-frame="night"] .dx-mark.on { background: var(--mc) !important; padding-bottom: 22px !important; }
@media (max-width: 700px) { html:root[data-frame="night"] .dx-page.left, html:root[data-frame="night"] .dx-page.right { box-shadow: none !important; border-radius: 4px !important; } }

/* 주머니(시클): 가죽 주머니 */
.pp-sack { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; }
.pp-art { width: 92px; height: 92px; overflow: visible; }
.pp-body { fill: #8a5a33; stroke: #5a3618; stroke-width: 2; }
.pp-neck { fill: #9c6a3e; stroke: #5a3618; stroke-width: 2; }
.pp-cord { fill: none; stroke: #e2c27a; stroke-width: 3.2; stroke-linecap: round; }
.pp-tie { fill: none; stroke: #e2c27a; stroke-width: 2.4; stroke-linecap: round; }
.pp-bead { fill: #f2d27a; stroke: #8a6418; }
.pp-stitch { fill: none; stroke: rgba(255, 230, 180, .45); stroke-width: 1.4; stroke-dasharray: 4 4; }
.pp-coins circle { fill: #f2d27a; stroke: #a07a1a; stroke-width: 1.4; }
.pp-coins { animation: ppPeek 2.8s ease-in-out infinite; transform-origin: 60px 30px; }
@keyframes ppPeek { 0%, 100% { transform: translateY(4px) } 50% { transform: translateY(-1px) } }
.pp-sack .pp-big { flex-wrap: wrap; }
.purse-pop { background: radial-gradient(circle at 20% 0%, rgba(242, 210, 122, .14), transparent 55%), var(--sheet); }
html:root[data-frame="night"][data-theme="dark"] .purse-pop .pp-big b { color: #f6dc8a; }
html:root[data-frame="night"] body .view .panel.panel.brew-lab.brew-lab { background: radial-gradient(circle at 70% 30%, rgba(120, 200, 150, .10), transparent 50%), linear-gradient(170deg, #1c2a24, #121a16) !important; border: 1px solid #3c5446 !important; border-radius: 14px !important; padding: 16px 18px !important; }
/* 요리: 수첩 옆 조리대를 위쪽부터, 그림과 설명을 한 카드로 */
.cook-lab .bl-desk { align-items: start; align-content: start; padding: 12px 14px; border-radius: 12px; background: rgba(255, 250, 240, .75); box-shadow: inset 0 0 0 1px #ecd5b4; }
.cook-lab .bl-info { padding-top: 6px; }
.cook-lab .bl-head { align-items: flex-end; }
.cook-lab svg [class*="steam"] path, .cook-lab svg [class*="steam"] { stroke: rgba(150, 110, 70, .55) !important; }
@media (max-width: 700px) { .cook-lab .bl-desk { grid-template-columns: 1fr; } }
/* 우편함: 편지 · 소포 · 교무실 */
.post-box .post-tabs .chip .ico { width: 15px; height: 15px; }
.post-box .pc-dir { margin-top: -2px; }
.post-notices { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, #c9a24a 45%, var(--rule)); background: color-mix(in srgb, #c9a24a 8%, transparent); }
.post-notices .lines { display: grid; gap: 4px; font-size: 13px; }
.post-tabs .chip.on .badge { background: #2a1f12; color: #f6dc8a; box-shadow: none; }
/* 우편함 안 작은 덩어리(받은/보낸 고르기 · 공지 · 선물)는 목록처럼 키를 늘리지 않게 */
.post-box > :is(.pc-dir, .post-notices, .gift-list) { min-height: 0 !important; max-height: none !important; overflow: visible !important; flex: none; }
.post-box > .pc-dir { margin: 8px 14px 0; justify-self: start; align-self: start; }
.post-box > .post-notices { margin: 8px 14px; padding: 8px 10px; }
.post-notices .line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.post-notices .line > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 이변 '함께하는 사람': 이름은 다 보이게(작게, 줄 바꿈), 활동 수는 아랫줄 */
.inc-people .inc-slot.taken { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 1px !important; padding: 5px 8px 5px 10px !important; }
.inc-people .inc-slot.taken b { font-size: 12.5px !important; line-height: 1.25; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: keep-all; overflow-wrap: anywhere; }
.inc-people .inc-slot.taken .small { font-size: 10.5px !important; line-height: 1.2; }
/* 공지 창은 처음부터 넓게(가장자리를 끌어 바꾸면 따로 기억) */
.pop.notice-pop { width: min(var(--notice-w, 600px), calc(100% - 32px)) !important; max-height: 78vh; }
.notice-pop .lines .line { font-size: 14px; line-height: 1.55; }

/* =====================================================================
   별의 서고(어둡게) — 잘 안 보이던 글씨 손질(대비 검사 결과)
   ===================================================================== */
/* 기숙사 색 글씨: 어두운 바탕 위에선 밝게 섞어서 */
html:root[data-frame="night"][data-theme="dark"] :is(.hn[class*="hn-"]:not(.hn-), .mbadge, .mbadge b, .glasses.mini2 .hs.lead b, .rh-v, .cup .ico, .cup b, .qs-name, .bd-who .ico) { color: color-mix(in srgb, var(--hc) 58%, #fff) !important; }
html:root[data-frame="night"][data-theme="dark"] .mbadge .ico { fill: color-mix(in srgb, var(--hc) 70%, #fff); stroke: color-mix(in srgb, var(--hc) 70%, #fff); }
html:root[data-frame="night"][data-theme="dark"] :is(.hpill, .bd-who, .c-ava b) { color: color-mix(in srgb, var(--hc) 55%, #fff) !important; }
html:root[data-frame="night"][data-theme="dark"] .hpill { background: color-mix(in srgb, var(--hc) 26%, #2a2824); }
html:root[data-frame="night"][data-theme="dark"] .bd-ava { color: color-mix(in srgb, var(--hc) 55%, #fff); background: color-mix(in srgb, var(--hc) 35%, #2a2824); }
html:root[data-frame="night"][data-theme="dark"] [style*="--pc:"]:not(.mono-av) { color: color-mix(in srgb, var(--pc) 60%, #fff); }
html:root[data-frame="night"][data-theme="dark"] :is(.ic-msg .who, .fly-row b) { color: color-mix(in srgb, var(--pc, #e8dcc4) 60%, #fff); }
html:root[data-frame="night"][data-theme="dark"] .tc-name { color: color-mix(in srgb, var(--tc, currentColor) 60%, #fff) !important; }
html:root[data-frame="night"][data-theme="dark"] :is(.ct-all, .ct-place, .ct-house, .ct-rp).tc-name { filter: brightness(1.45) saturate(.9); }
/* 그림 카드 위 작은 글씨 */
.dg-txt .eyebrow { color: rgba(255, 255, 255, .88) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.dg-txt .small { color: rgba(255, 255, 255, .92) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
/* 빗자루 가게 · 배달 · 퀴디치 */
html:root[data-frame="night"][data-theme="dark"] .bs-speed { color: #f0c27a !important; }
html:root[data-frame="night"][data-theme="dark"] .dv-from { color: #a9d892 !important; }
html:root[data-frame="night"][data-theme="dark"] .qd-bracket .qb-cup .small.faint { color: #fff4d8 !important; opacity: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
html:root[data-frame="night"][data-theme="dark"] .qd-bracket .qb-cup { background: radial-gradient(circle at 50% 30%, rgba(255, 220, 140, .22), rgba(40, 30, 15, .55) 75%); }
html:root[data-frame="night"][data-theme="dark"] .qd-role .qd-ch { color: color-mix(in srgb, var(--qc, #e0bf86) 55%, #fff) !important; }
/* 교무실 꼬리표 */
html:root[data-frame="night"][data-theme="dark"] .off-tag { background: #f2d27a; color: #5a3a08; }
/* 꾸러미 주머니 */
html:root[data-frame="night"] .pouch-body .pb-all { background: #b8455c !important; border-color: #8a2e42 !important; color: #fff !important; }
html:root[data-frame="night"] .pb-rw { color: #6a4508 !important; }
/* 요리 수첩 */
html:root[data-frame="night"] .cook-lab .bl-lv { color: #7a5634 !important; }
html:root[data-frame="night"] .cook-lab .ck-card { color: #3a2412; }
/* 도감 책 */
html:root[data-frame="night"] body .dx-page .dp-head .eyebrow { color: #7a4a1e !important; }
html:root[data-frame="night"] body .dx-page .dp-no { color: #7a5a34 !important; }
html:root[data-frame="night"] .dx-mark { background: color-mix(in srgb, var(--mc) 55%, #24160a) !important; }
html:root[data-frame="night"] .dx-mark.on { background: color-mix(in srgb, var(--mc) 75%, #24160a) !important; }
html:root[data-frame="night"][data-theme="dark"] .hc-pill { background: rgba(0, 0, 0, .35); color: #fff3d8; }
html:root[data-frame="night"][data-theme="dark"] .stars i { color: rgba(214, 178, 128, .5); }
html:root[data-frame="night"][data-theme="dark"] .inc-rw { color: #e6be62; }
html:root[data-frame="night"][data-theme="dark"] .owl-stamp { color: color-mix(in srgb, var(--sc) 55%, #fff) !important; border-color: color-mix(in srgb, var(--sc) 60%, #fff) !important; }
html:root[data-frame="night"][data-theme="dark"] .wg-big { color: color-mix(in srgb, var(--wc, #8fa8e0) 55%, #fff) !important; }
html:root[data-frame="night"] .cook-lab .bl-lv { color: #5a3a1c !important; }
html:root[data-frame="night"] .cook-lab .ck-parts { color: #6e5236 !important; }
html:root[data-frame="night"] .ck-badge { background: linear-gradient(180deg, #e08a2e, #b8651a); }

/* 이변: 위험도 색으로 칸 바탕을 은은하게 (D 초록 · C 파랑 · B 주황 · A 빨강) */
.d-D { --dcb: #7fb06a; } .d-C { --dcb: #6f9be6; } .d-B { --dcb: #e3a24a; } .d-A { --dcb: #e46a52; } .d-S { --dcb: #c08aff; }
:is(.inc-card.st-open, .inc-head.st-open, .next.inc-tint)[class*="d-"] { background: linear-gradient(135deg, color-mix(in srgb, var(--dc) 16%, var(--sheet)), color-mix(in srgb, var(--dc) 6%, var(--sheet))) !important; }
html:root[data-frame="night"][data-theme="dark"] :is(.inc-card.st-open, .inc-head.st-open, .next.inc-tint)[class*="d-"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--dcb) 30%, #2a2824), color-mix(in srgb, var(--dcb) 12%, #26241f)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dcb) 55%, transparent), 0 0 14px -4px color-mix(in srgb, var(--dcb) 45%, transparent) !important; }
html:root[data-frame="night"][data-theme="dark"] :is(.inc-card, .inc-head)[class*="d-"]::before { background: var(--dcb) !important; }
html:root[data-frame="night"][data-theme="dark"] .inc-card[class*="d-"] .inc-name { color: color-mix(in srgb, var(--dcb) 45%, #fff) !important; }
html:root[data-frame="night"][data-theme="dark"] [class*="d-"] .dtag, html:root[data-frame="night"][data-theme="dark"] .dtag[class*="d-"] { background: color-mix(in srgb, var(--dcb) 30%, transparent); color: color-mix(in srgb, var(--dcb) 50%, #fff); }
.next.inc-tint { border-radius: 10px; padding: 8px 10px; }

/* 위쪽 표시줄: 현재 위치는 왼쪽 끝, 아이콘은 오른쪽 끝, 하고 있는 일(이동 중 등)은 가운데 길게 */
.statusbar { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "where mid right"; align-items: center; column-gap: 14px; row-gap: 8px; }
.statusbar > .where { grid-area: where; justify-self: start; min-width: 0; }
.statusbar > .sb-mid { grid-area: mid; min-width: 0; display: flex; justify-content: center; }
.statusbar > .sb-mid:empty { display: block; }
.statusbar > .sb-right { grid-area: right; justify-self: end; margin-left: 0 !important; flex: none !important; justify-content: flex-end !important; }
.statusbar > .sb-right > .iconbtn { margin-left: 0 !important; }
.sb-mid .act-band { flex: 0 1 300px !important; width: 300px; max-width: 300px !important; }
.sb-mid .act-band.ab-asking { flex: 0 1 460px !important; width: 460px; max-width: 460px !important; }
@media (max-width: 760px) { .sb-mid .act-band:not(.ab-asking) { flex-basis: 220px !important; width: 220px; max-width: 220px !important; } .sb-mid .act-band.ab-asking { flex: 1 1 100% !important; width: auto; max-width: none !important; } }
@media (max-width: 760px) {
  .statusbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "where right" "mid mid"; }
  .statusbar > .sb-mid:empty { display: none; }
  .sb-mid .act-band { max-width: none !important; }
}
/* 지도 안내 글씨는 위쪽(구역 버튼 줄 바로 아래)에 */
.view[data-page="map"]:has(.mapwrap) .map-note { top: 74px !important; bottom: auto !important; left: 16px; display: block !important; }
@media (max-width: 900px) { .view[data-page="map"]:has(.mapwrap) .map-note { top: 112px !important; left: 10px; right: 10px; font-size: 11.5px; } }
@media (max-width: 560px) { .view[data-page="map"]:has(.mapwrap) .map-note { top: 150px !important; } }
/* 지도 안내 글씨: 위쪽 버튼 줄 안 맨 아래 한 줄 */
.view[data-page="map"]:has(.mapwrap) .map-bar .map-note { position: static !important; flex: 1 1 100%; order: 9; max-width: none; margin: 0; padding: 4px 4px 0; background: none; border-top: 1px dashed var(--rule); font-size: 12px; color: var(--ink-2); display: block !important; }

/* 오늘 화면 공지: 개인 지정 색(설정 → 오늘 화면 공지 색, 기본 호박색) */
.view .notice-bar.nb-today { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nb-c, #d9a65e) 92%, #fff), color-mix(in srgb, var(--nb-c, #d9a65e) 88%, #000)) !important;
  border: 1px solid color-mix(in srgb, var(--nb-c, #d9a65e) 70%, #000) !important; color: var(--nb-ink, #2a1806) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--nb-c, #d9a65e) 25%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3) !important; font-weight: 600; }
.view .notice-bar.nb-today .grow { color: var(--nb-ink, #2a1806); }
.view .notice-bar.nb-today .btn.quiet { background: color-mix(in srgb, var(--nb-ink, #2a1806) 10%, transparent) !important; border-color: color-mix(in srgb, var(--nb-ink, #2a1806) 45%, transparent) !important; color: var(--nb-ink, #2a1806) !important; }
.view .notice-bar.nb-today .btn.quiet:hover { background: color-mix(in srgb, var(--nb-ink, #2a1806) 18%, transparent) !important; }
.nb-preview { margin: 4px 0 6px; }
.nb-pick { width: 30px; height: 26px; padding: 0; border: 1px solid var(--rule); border-radius: 6px; background: none; cursor: pointer; }

/* ===== 던전 고르기: 세로 그림 카드 줄 ===== */
.dg-select { display: grid; gap: 8px; padding: 16px 16px 12px; border-radius: 14px; background: radial-gradient(ellipse at 50% 0%, rgba(214, 160, 90, .16), transparent 60%), linear-gradient(180deg, #221c16, #17130f); box-shadow: inset 0 0 0 1px rgba(214, 178, 128, .35); }
.dgc-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dgc-wrap { display: grid; gap: 6px; min-width: 0; }
.dgc { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; grid-template-rows: auto 1fr auto; border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, #3a2f22, #241d15); box-shadow: 0 0 0 1.5px #6e5634, 0 6px 14px rgba(0, 0, 0, .45); transition: transform .15s, box-shadow .15s; }
.dgc:hover { transform: translateY(-3px); box-shadow: 0 0 0 1.5px #b08a50, 0 10px 18px rgba(0, 0, 0, .5); }
.dgc.on { box-shadow: 0 0 0 2px #f0c674, 0 0 18px rgba(240, 190, 100, .45), 0 10px 18px rgba(0, 0, 0, .5); }
.dgc-title { padding: 8px 6px 7px; text-align: center; font-family: var(--f-display); font-size: 14.5px; font-weight: 700; color: #f6e7c8; background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .45)); border-bottom: 1px solid rgba(214, 178, 128, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.dgc-art { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.dgc-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dgc-kind { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #fff4dc; background: rgba(0, 0, 0, .55); border: 1px solid rgba(240, 200, 130, .45); }
.dgc-stat { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 6px; font-size: 13px; font-weight: 700; color: #f2d58c; background: linear-gradient(180deg, #2a2219, #1a1510); border-top: 1px solid rgba(214, 178, 128, .3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgc-stat .ico { width: 14px; height: 14px; flex: none; }
.dgc-foot { text-align: center; font-size: 11.5px; font-weight: 700; color: #f0a070; padding: 3px 4px; border-radius: 4px; background: rgba(120, 30, 20, .35); box-shadow: inset 0 0 0 1px rgba(220, 90, 60, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgc-foot.hot { color: #fff1c8; background: rgba(200, 120, 30, .45); box-shadow: inset 0 0 0 1px #e8b04a; }
.dgc-foot.dim { color: #8a9498; background: rgba(40, 50, 55, .45); box-shadow: inset 0 0 0 1px rgba(120, 140, 150, .35); }
.dg-note { color: #b8a888 !important; text-align: center; }
/* 아즈카반: 봉인 */
.dgc.locked { cursor: not-allowed; background: linear-gradient(180deg, #1c2326, #121719); box-shadow: 0 0 0 1.5px #3a4448, 0 6px 14px rgba(0, 0, 0, .5); }
.dgc.locked:hover { transform: none; }
.dgc.locked .dgc-art > svg:first-child { filter: grayscale(.6) brightness(.75) blur(.6px); }
.dgc.locked .dgc-title { color: #8a9498; }
.az-blur { filter: blur(3px); opacity: .75; letter-spacing: .1em; }
.dgc.locked .dgc-stat { color: #6e787c; }
.az-chain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; }
.az-lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; z-index: 2; color: #c8d0d4; font-size: 15px; text-shadow: 0 2px 4px #000; }
.az-lock .ico { width: 34px; height: 34px; padding: 10px; border-radius: 50%; background: rgba(10, 14, 16, .8); box-shadow: 0 0 0 2px #5a6468; }
.az-lock b { font-family: var(--f-display); letter-spacing: .3em; padding-left: .3em; }
.az-fog { animation: azFog 7s ease-in-out infinite; }
.az-dem { animation: azDem 5s ease-in-out infinite; }
@keyframes azFog { 0%, 100% { transform: translateX(-6px) } 50% { transform: translateX(6px) } }
@keyframes azDem { 0%, 100% { transform: translateY(0); opacity: .9 } 50% { transform: translateY(-6px); opacity: .6 } }
@media (max-width: 900px) {
  .dg-select { padding: 12px 10px 10px; }
  .dgc-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 132px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .dgc-wrap { scroll-snap-align: start; }
}

/* ===== 새 공지: 창 맨 위를 반투명하게 흘러가는 띠(닫을 때까지) ===== */
#noticebar:has(.ticker) { position: fixed; z-index: 60; left: 0; right: 0; top: env(safe-area-inset-top, 0px); pointer-events: none; }
.noticebar.ticker { pointer-events: auto; display: flex; align-items: center; gap: 0; height: 34px; padding: 0 !important; overflow: hidden;
  background: color-mix(in srgb, var(--nb-c, #d9a65e) 72%, transparent) !important; color: var(--nb-ink, #2a1806);
  backdrop-filter: blur(6px) saturate(1.2); -webkit-backdrop-filter: blur(6px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--nb-c, #d9a65e) 60%, #000) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  animation: ntIn .45s ease-out; font-size: 13.5px; font-weight: 600; }
@keyframes ntIn { from { transform: translateY(-100%); opacity: 0 } to { transform: none; opacity: 1 } }
.nt-ico { flex: none; display: grid; place-items: center; width: 40px; height: 100%; background: color-mix(in srgb, var(--nb-c, #d9a65e) 85%, #000); color: var(--nb-ink, #2a1806); }
.nt-ico .ico { width: 17px; height: 17px; }
.nt-track { all: unset; cursor: pointer; flex: 1; min-width: 0; height: 100%; overflow: hidden; position: relative; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.nt-run { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: ntRun var(--nt-dur, 20s) linear infinite; }
.nt-track:hover .nt-run { animation-play-state: paused; }
@keyframes ntRun { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.nt-item { display: inline-flex; align-items: center; gap: 8px; }
.nt-item .ntag { font-size: 11px; }
.nt-ago { font-size: 11px; font-weight: 500; opacity: .7; }
.nt-dot { margin: 0 18px; opacity: .6; }
.nt-gap { display: inline-block; width: 120px; }
.nt-x { flex: none; display: grid; place-items: center; width: 40px; height: 100%; border: 0; background: color-mix(in srgb, var(--nb-c, #d9a65e) 85%, #000); color: var(--nb-ink, #2a1806); cursor: pointer; }
.nt-x .ico { width: 16px; height: 16px; }
.nt-x:hover { filter: brightness(1.15); }
@media (prefers-reduced-motion: reduce) { .nt-run { animation-duration: 60s; } }
/* 설정의 미리보기는 제자리에 */
.nb-preview.ticker { position: relative; border-radius: 8px; animation: none; margin: 4px 0 6px; }

/* ===== 기숙사 학생들: 금테 초상화 2열 ===== */
.hp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hp-card { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 14%, var(--sheet)), var(--sheet)); box-shadow: inset 0 0 0 1px var(--rule); transition: transform .15s, box-shadow .15s; }
.hp-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #c9a24a, 0 6px 14px rgba(0, 0, 0, .25); }
.hp-card.me { box-shadow: inset 0 0 0 1.5px #e0bf86; }
/* 액자: 타원 금테 두 겹 + 안쪽 그림자 */
.hp-frame { position: relative; width: 96px; height: 118px; border-radius: 50% / 50%; padding: 7px; box-sizing: border-box;
  background: linear-gradient(145deg, #f6dd94, #b8862a 40%, #f0cf7a 60%, #8a5f18); box-shadow: 0 0 0 2px #5a3d0e, 0 5px 10px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 245, 210, .6); }
.hp-frame::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dotted rgba(90, 60, 10, .55); pointer-events: none; }
.hp-frame::after { content: ''; position: absolute; left: 50%; top: -5px; width: 16px; height: 9px; margin-left: -8px; border-radius: 4px 4px 2px 2px; background: linear-gradient(#f0cf7a, #8a5f18); box-shadow: 0 0 0 1px #5a3d0e; }
.hp-pic { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--pc) 55%, #f4e6c8), color-mix(in srgb, var(--pc) 70%, #1a120a) 85%);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .55); }
.hp-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; z-index: 1; }
.hp-ini { font-family: var(--f-display); font-size: 40px; font-weight: 700; color: rgba(255, 248, 230, .92); text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.hp-card.pr-off .hp-pic { filter: saturate(.6) brightness(.85); }
.hp-info { display: grid; gap: 4px; min-width: 0; }
.hp-plate { justify-self: start; max-width: 100%; padding: 3px 12px; border-radius: 3px; font-family: var(--f-display); font-weight: 700; font-size: 15px; color: #3a2408;
  background: linear-gradient(180deg, #f3d98e, #c9973a); box-shadow: 0 0 0 1px #7a5414, inset 0 1px 0 rgba(255, 250, 220, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-plate small { font-size: 11px; opacity: .75; }
.hp-meta { font-size: 13px; color: var(--ink-2); }
.hp-pr { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3, var(--ink-2)); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .hp-grid { gap: 8px; }
  .hp-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 12px 8px; gap: 8px; }
  .hp-frame { width: 84px; height: 104px; }
  .hp-info { justify-items: center; }
  .hp-plate { justify-self: center; font-size: 14px; }
}
.adm-wipe { display: grid; gap: 6px; padding: 8px 10px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--bad) 45%, var(--rule)); }
.wipe-chip { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.wipe-chip input { accent-color: var(--bad); }
.wipe-chip:has(input:checked) { border-color: var(--bad) !important; color: var(--bad) !important; }

/* ===== 학생 명부: 가는 금테 네모 초상화 2열 ===== */
.ro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ro-card { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px 12px 12px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(120deg, color-mix(in srgb, var(--hc) 14%, var(--sheet)) 0%, var(--sheet) 55%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 22%, var(--rule)); transition: transform .15s, box-shadow .15s; }
.ro-card::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--hc); opacity: .85; }
.ro-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 55%, transparent), 0 10px 22px -12px rgba(0, 0, 0, .55); }
.ro-card.me { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); }
.ro-frame { position: relative; width: 62px; height: 76px; border-radius: 14px; padding: 2px; box-sizing: border-box; background: linear-gradient(160deg, var(--hc), color-mix(in srgb, var(--hc) 40%, #000)); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6); }
.ro-pic { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--pc) 45%, #f4ead6), color-mix(in srgb, var(--pc) 65%, #15110c) 95%); }
.ro-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; z-index: 1; }
.ro-ini { font-size: 26px; font-weight: 800; color: rgba(255, 252, 244, .95); text-shadow: 0 2px 6px rgba(0, 0, 0, .35); letter-spacing: -.02em; }
.ro-dot { position: absolute; right: -3px; bottom: -3px; z-index: 2; width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--sheet); background: #8a8f9c; }
.ro-dot.on { background: #4fbf72; } .ro-dot.away { background: #e2b04a; }
.ro-card.pr-off .ro-pic { filter: saturate(.55) brightness(.85); }
.ro-info { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.ro-info .ttl { font-size: 10.5px; letter-spacing: .02em; }
.ro-name { display: flex; align-items: baseline; gap: 6px; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; }
.ro-name b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; position: relative; }
.ro-name b::after { content: ""; display: block; height: 2px; width: 18px; margin-top: 2px; border-radius: 2px; background: var(--pc); }
.ro-sur { font-size: 13px; font-weight: 500; color: var(--ink-3, var(--ink-2)); overflow: hidden; text-overflow: ellipsis; }
.ro-me { align-self: center; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.ro-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.ro-meta .hpill { font-size: 10.5px; padding: 1px 8px; }
.ro-pr { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 11.5px; color: var(--ink-3, var(--ink-2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-pr .dot { display: none; }
.ro-bio { max-width: 100%; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; border-left: 2px solid color-mix(in srgb, var(--pc) 60%, transparent); }
@media (max-width: 560px) {
  .ro-grid { grid-template-columns: 1fr; gap: 8px; }
  .ro-card { grid-template-columns: 54px minmax(0, 1fr); padding: 10px 12px 10px 10px; gap: 12px; }
  .ro-frame { width: 54px; height: 66px; }
}

/* ===== 아즈카반 ===== */
.mine-hero.th-azk { padding: 20px 22px; border-radius: 16px; color: #dfe7ea; background: radial-gradient(circle at 80% 15%, rgba(140, 180, 200, .18), transparent 50%), linear-gradient(160deg, #1c262b, #0b1012); box-shadow: inset 0 0 0 1px rgba(120, 150, 160, .35); }
.mine-hero.th-azk h1 { color: #eef4f6; font-family: var(--f-display); }
.mine-hero.th-azk .eyebrow, .mine-hero.th-azk .prose { color: #b8c6cc; }
.mine-hero.th-azk .tile { background: rgba(255, 255, 255, .06); color: #dfe7ea; }
.az-abyss-panel.locked { opacity: .75; }
.az-run { display: grid; gap: 12px; padding: 16px; border-radius: 16px; color: #e3eaec; background: radial-gradient(ellipse at 50% 0%, rgba(120, 160, 180, .16), transparent 60%), linear-gradient(180deg, #172025, #0b0f11); box-shadow: inset 0 0 0 1px rgba(120, 150, 160, .35); }
.az-run.abyss { background: radial-gradient(ellipse at 50% 0%, rgba(120, 90, 180, .2), transparent 60%), linear-gradient(180deg, #171427, #0a0910); box-shadow: inset 0 0 0 1px rgba(140, 110, 200, .4); }
.az-run .eyebrow { color: #9fb2ba; } .az-run h2 { margin: 0; font-family: var(--f-display); font-size: 26px; color: #f2f7f8; }
.az-run .faint, .az-run .small { color: #a8b8be; }
.az-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.az-meters { display: grid; gap: 6px; }
.az-run .meter-top { color: #e3eaec; }
.az-pips { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; height: 8px; }
.az-pips i { border-radius: 2px; background: rgba(140, 170, 220, .18); }
.az-pips i.on { background: linear-gradient(180deg, #9cc0ff, #5b7fd6); box-shadow: 0 0 4px rgba(120, 160, 255, .6); }
.az-foe { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(140, 170, 180, .25); }
.az-foe.elite { box-shadow: inset 0 0 0 1.5px #c9a24a, 0 0 16px rgba(200, 160, 80, .25); }
.az-dem svg { width: 78px; height: 96px; display: block; filter: drop-shadow(0 0 10px rgba(150, 190, 210, .35)); }
.dem-float { animation: demFloat 3.4s ease-in-out infinite; }
@keyframes demFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
.az-foe .foe-name { color: #f2f7f8; }
.az-intent { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); box-shadow: inset 3px 0 0 #7fa8c0; }
.az-intent.mv-kiss { box-shadow: inset 3px 0 0 #e46a52; background: rgba(228, 106, 82, .12); }
.az-intent.mv-hover { box-shadow: inset 3px 0 0 #8fd07a; background: rgba(143, 208, 122, .1); }
.az-intent.mv-despair { box-shadow: inset 3px 0 0 #a98ad9; background: rgba(169, 138, 217, .12); }
.az-intent b { display: block; font-size: 13.5px; color: #f2f7f8; } .az-intent .fi-hint { font-size: 12px; color: #b8c6cc; }
.az-intent .fi-ico .ico { width: 18px; height: 18px; color: #cfe0e6; }
.az-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.az-run .tk-act { --ta: #7fa8c0; background: rgba(255, 255, 255, .05) !important; color: #eef4f6; border-color: rgba(140, 170, 180, .4) !important; cursor: pointer; font: inherit; }
.az-run .tk-act b { color: #f2f7f8; } .az-run .tk-act span:last-child { color: #b8c6cc; }
.az-run .tk-act.good { border-color: #9fd08a !important; box-shadow: 0 0 10px rgba(159, 208, 138, .3); }
.az-run .az-pat { --ta: #c8dcff; border-color: rgba(200, 220, 255, .6) !important; background: rgba(200, 220, 255, .08) !important; }
.az-run .az-pat.locked { opacity: .45; cursor: default; }
.az-auto .btn.quiet { color: #c8d4d8 !important; }
.az-log { max-height: 220px; background: rgba(0, 0, 0, .35) !important; color: #cfdade; border-radius: 10px; }
.az-log .good { color: #a9e09a; } .az-log .bad { color: #ff9a85; } .az-log .miss { color: #8a9aa0; } .az-log .foe { color: #f2f7f8; font-weight: 700; } .az-log .info { color: #b8c6cc; font-style: italic; }
.az-clear { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: rgba(159, 208, 138, .08); box-shadow: inset 0 0 0 1px rgba(159, 208, 138, .4); }
.az-clear > b { font-size: 18px; color: #c8f0b8; font-family: var(--f-display); }
.az-shop { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(200, 160, 80, .1); box-shadow: inset 0 0 0 1px rgba(200, 160, 80, .45); }
.az-shop b { color: #f0d090; }
.az-shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.az-item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(200, 160, 80, .35); }
.az-item b { color: #f6e2b0; font-size: 13.5px; } .az-item span { grid-column: 1; font-size: 11.5px; color: #c9b896; } .az-item em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 700; color: #f2d27a; font-family: var(--f-mono); }
.az-item:disabled { opacity: .45; cursor: not-allowed; }
.az-item:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #e0bf86; }
@media (max-width: 560px) { .az-head { grid-template-columns: 1fr; gap: 8px; } .az-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .az-foe { grid-template-columns: 60px minmax(0, 1fr); } .az-dem svg { width: 60px; height: 74px; } }

/* 숲길: 풀 캐기 · 보물상자 */
.trek-spot { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ts-herbs, .ts-chest { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #5f9a43 10%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #5f9a43 40%, var(--rule)); }
.ts-row { display: flex; gap: 8px; flex-wrap: wrap; }
.herb-btn { all: unset; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #c8f0a8; background: radial-gradient(circle at 50% 70%, #3f6a2a, #24401a); box-shadow: 0 0 0 1.5px #7fb05a, 0 3px 6px rgba(0, 0, 0, .3); transition: transform .12s; animation: herbSway 2.4s ease-in-out infinite; }
.herb-btn:nth-child(2n) { animation-delay: -1.2s; }
.herb-btn:hover { transform: scale(1.1); }
.herb-btn .ico { width: 22px; height: 22px; }
@keyframes herbSway { 0%, 100% { rotate: -4deg } 50% { rotate: 4deg } }
.ts-chest { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; background: color-mix(in srgb, #c9a24a 12%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9a24a 50%, var(--rule)); }
.ts-chest .grow { display: grid; gap: 2px; }
.chest-ico svg { width: 52px; height: 44px; display: block; animation: chestGlow 2s ease-in-out infinite; }
.ts-chest.tier-3 .chest-ico svg { filter: drop-shadow(0 0 6px rgba(242, 210, 122, .8)); }
@keyframes chestGlow { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2px) } }
/* 전투 준비물 */
.kit-panel { display: grid; gap: 8px; }
.kit-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.kit-slot { display: grid; gap: 4px; }
/* 별 */
.star-n { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #3a2a00; background: linear-gradient(180deg, #ffe38a, #e0b040); box-shadow: 0 0 6px rgba(255, 210, 90, .5); vertical-align: 1px; }
.star-n.big { font-size: 16px; padding: 1px 10px; vertical-align: 6px; }
.star-panel { position: relative; overflow: hidden; display: grid; gap: 8px; background: radial-gradient(ellipse at 70% 0%, rgba(255, 220, 120, .25), transparent 60%), linear-gradient(160deg, #1d1a3a, #0e0c1e) !important; color: #efe8ff; box-shadow: inset 0 0 0 1px rgba(255, 220, 120, .55) !important; }
.star-panel h3 { margin: 0; font-family: var(--f-display); color: #fff3c8; font-size: 20px; }
.star-panel .eyebrow { color: #f2d27a; } .star-panel .small { color: #d8d0f0; } .star-panel b { color: #fff3c8; }
.sp-sky i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff6d0; box-shadow: 0 0 6px #ffe38a; animation: dgTw 2.4s ease-in-out infinite; }
.sp-sky i:nth-child(1) { left: 12%; top: 18%; } .sp-sky i:nth-child(2) { left: 78%; top: 12%; animation-delay: -.6s; } .sp-sky i:nth-child(3) { left: 60%; top: 40%; animation-delay: -1.2s; } .sp-sky i:nth-child(4) { left: 30%; top: 70%; animation-delay: -1.8s; } .sp-sky i:nth-child(5) { left: 90%; top: 64%; animation-delay: -.3s; }
.nt-ago { opacity: .85 !important; }
/* 보스 레이드: 내가 배운 주문 */
.sh-spells { display: grid; gap: 4px; margin-top: 6px; }
.sh-spells .chips { gap: 5px; }
.sh-sp .cnt { font-size: 10.5px; opacity: .75; }
.spells .spell span { font-size: 11.5px; }


/* ===================== 스킨: 엑셀 ===================== */
html:root[data-skin="excel"] {
  --paper: #ffffff; --sheet: #ffffff; --sheet-2: #f3f3f3; --ink: #1f1f1f; --ink-2: #444; --ink-3: #6b6b6b; --rule: #d4d4d4; --line: #e1e1e1;
  --accent: #217346; --accent-soft: #e3f1e8; --on-accent: #fff; --good: #217346; --bad: #c42b1c;
  --f-body: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", Calibri, sans-serif; --f-display: "Segoe UI", "Malgun Gothic", Calibri, sans-serif; --f-latin: "Segoe UI", Calibri, sans-serif;
  --soft: none; --lift: 0 2px 8px rgba(0, 0, 0, .18); --xl-grid: #e3e3e3;
}
html:root[data-skin="excel"] body { background-color: #fff !important; background-image: linear-gradient(var(--xl-grid) 1px, transparent 1px), linear-gradient(90deg, var(--xl-grid) 1px, transparent 1px) !important; background-size: 80px 22px !important; color: var(--ink); font-family: var(--f-body); }
html:root[data-skin="excel"] .stage::after, html:root[data-skin="excel"] .stage::before { content: none !important; }
html:root[data-skin="excel"] .view { background: transparent !important; box-shadow: none !important; }
/* 위쪽 줄 = 엑셀 리본 */
html:root[data-skin="excel"] .statusbar { background: #217346 !important; background-image: none !important; border-bottom: 1px solid #185c37 !important; box-shadow: 0 1px 0 #185c37 !important; color: #fff; }
html:root[data-skin="excel"] .statusbar :is(.where, .where *, .loc-line, .lp) { color: #fff !important; }
html:root[data-skin="excel"] .statusbar .where > * { background: rgba(255, 255, 255, .12) !important; border-color: rgba(255, 255, 255, .35) !important; box-shadow: none !important; }
html:root[data-skin="excel"] .statusbar .iconbtn { background: transparent !important; border: 1px solid rgba(255, 255, 255, .45) !important; color: #fff !important; border-radius: 3px !important; box-shadow: none !important; }
html:root[data-skin="excel"] .statusbar .iconbtn:hover { background: rgba(255, 255, 255, .15) !important; }
html:root[data-skin="excel"] .statusbar .act-band { background: #fff !important; color: #1f1f1f !important; border-radius: 3px !important; }
/* 왼쪽 메뉴 = 시트 목록 */
html:root[data-skin="excel"] .rail { background: #f3f3f3 !important; background-image: none !important; border-right: 1px solid #d4d4d4 !important; box-shadow: none !important; }
html:root[data-skin="excel"] .rail-brand { color: #217346 !important; font-family: var(--f-body) !important; font-weight: 700; }
html:root[data-skin="excel"] .nav-label { color: #6b6b6b !important; font-family: var(--f-body); letter-spacing: 0; }
html:root[data-skin="excel"] .nav button { border-radius: 0 !important; color: #1f1f1f !important; font-family: var(--f-body) !important; background: transparent !important; box-shadow: none !important; }
html:root[data-skin="excel"] .nav button:hover { background: #e3f1e8 !important; }
html:root[data-skin="excel"] .nav button.on { background: #fff !important; box-shadow: inset 0 0 0 2px #217346 !important; color: #185c37 !important; font-weight: 700; }
html:root[data-skin="excel"] .nav-ico { background: transparent !important; color: #217346 !important; box-shadow: none !important; border-radius: 0 !important; }
/* 제목 = 수식 입력줄 */
html:root[data-skin="excel"] .page-head { position: relative; padding: 6px 10px 6px 64px !important; border: 1px solid #d4d4d4 !important; background: #fff !important; border-radius: 0 !important; }
html:root[data-skin="excel"] .page-head::before { content: 'fx'; position: absolute; left: 0; top: 0; bottom: 0; width: 48px; display: grid; place-items: center; font-style: italic; font-family: Georgia, serif; color: #6b6b6b; border-right: 1px solid #d4d4d4; background: #f3f3f3; }
html:root[data-skin="excel"] .page-head::after { content: none !important; }
html:root[data-skin="excel"] .ph-ico { display: none !important; }
html:root[data-skin="excel"] .ph-txt h1 { font-family: var(--f-body) !important; font-size: 18px !important; color: #1f1f1f !important; }
html:root[data-skin="excel"] .ph-txt h1::before { content: none !important; }
html:root[data-skin="excel"] .ph-sub { color: #6b6b6b !important; }
/* 칸 = 셀 */
html:root[data-skin="excel"] :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card, .gb-open, .first-steps, .table-wrap, .item, .person, .next, .home-clock, .modal, .pop, .post-box, .post-compose, .fly-panel, .kit-panel) { border-radius: 0 !important; box-shadow: none !important; background-image: none !important; }
html:root[data-skin="excel"] :is(.panel, .block.fold, .wg, .gb-open, .first-steps, .table-wrap, .modal, .pop, .post-box, .post-compose) { background-color: #fff !important; border: 1px solid #c6c6c6 !important; }
html:root[data-skin="excel"] :is(.panel, .block.fold, .gb-open)::before, html:root[data-skin="excel"] :is(.panel, .block.fold, .gb-open)::after { display: none !important; }
html:root[data-skin="excel"] :is(.panel > b, .panel > .row > b, .block-head h2, .block-head h3) { font-family: var(--f-body) !important; color: #185c37 !important; }
html:root[data-skin="excel"] .block-head { border-bottom: 2px solid #217346; padding-bottom: 4px; }
html:root[data-skin="excel"] table th { background: #f3f3f3 !important; color: #1f1f1f !important; border: 1px solid #d4d4d4 !important; font-weight: 700; }
html:root[data-skin="excel"] table td { border: 1px solid #e1e1e1 !important; }
/* 버튼 · 칩 · 입력 */
html:root[data-skin="excel"] .btn { border-radius: 2px !important; background: #fff !important; border: 1px solid #adadad !important; color: #1f1f1f !important; box-shadow: none !important; text-shadow: none !important; font-family: var(--f-body); }
html:root[data-skin="excel"] .btn:hover:not(:disabled) { background: #e3f1e8 !important; border-color: #217346 !important; }
html:root[data-skin="excel"] .btn.primary { background: #217346 !important; border-color: #185c37 !important; color: #fff !important; }
html:root[data-skin="excel"] .btn.primary:hover:not(:disabled) { background: #185c37 !important; }
html:root[data-skin="excel"] .btn.quiet { border-color: transparent !important; background: transparent !important; }
html:root[data-skin="excel"] .chip, html:root[data-skin="excel"] .ptag { border-radius: 2px !important; background: #fff !important; border: 1px solid #c6c6c6 !important; color: #1f1f1f !important; box-shadow: none !important; }
html:root[data-skin="excel"] .chip.on { background: #e3f1e8 !important; border: 1px solid #217346 !important; color: #185c37 !important; font-weight: 700; }
html:root[data-skin="excel"] :is(input[type=text], input[type=search], input[type=number], input[type=password], input:not([type]), select, textarea) { border-radius: 0 !important; border: 1px solid #c6c6c6 !important; background: #fff !important; color: #1f1f1f !important; box-shadow: none !important; }
html:root[data-skin="excel"] :is(input, select, textarea):focus { outline: 2px solid #217346 !important; outline-offset: -1px; }
html:root[data-skin="excel"] :is(.subtabs button, .seg button, .htab, .bag-tab, .rank-cell) { border-radius: 0 !important; }
html:root[data-skin="excel"] :is(.subtabs button.on, .seg button.on, .htab.on, .bag-tab.on, .rank-cell.on) { background: #fff !important; box-shadow: inset 0 -3px 0 #217346 !important; color: #185c37 !important; }
/* 아래 탭 = 시트 탭 · 상태 막대 = 상태 표시줄 */
html:root[data-skin="excel"] .tabbar { background: #f3f3f3 !important; background-image: none !important; border-top: 1px solid #c6c6c6 !important; }
html:root[data-skin="excel"] .tabbar button { border-radius: 0 !important; color: #444 !important; }
html:root[data-skin="excel"] .tabbar button.on { background: #fff !important; color: #185c37 !important; box-shadow: inset 0 -3px 0 #217346 !important; font-weight: 700; }
html:root[data-skin="excel"] .hud-in { background: #f3f3f3 !important; background-image: none !important; border: 1px solid #c6c6c6 !important; border-radius: 0 !important; box-shadow: none !important; }
html:root[data-skin="excel"] .toast { background: #fff !important; color: #1f1f1f !important; border: 1px solid #217346 !important; border-left: 4px solid #217346 !important; border-radius: 0 !important; }
html:root[data-skin="excel"] .noticebar.ticker { --nb-c: #217346; --nb-ink: #fff; }
html:root[data-skin="excel"] .badge { background: #c42b1c; color: #fff; border-radius: 2px; }
/* 설정: 스킨 고르기 */
.skin-picks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.skin-pick { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 6px; justify-items: center; padding: 8px; border-radius: 10px; border: 1px solid var(--rule); background: var(--sheet); font-size: 12.5px; }
.skin-pick.on { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.sk-prev { display: grid; grid-template-columns: 14px 1fr; grid-template-rows: 8px 1fr; gap: 2px; width: 100%; height: 46px; padding: 3px; box-sizing: border-box; border-radius: 6px; }
.sk-prev i:nth-child(1) { grid-column: 1 / -1; border-radius: 2px; } .sk-prev i:nth-child(2) { border-radius: 2px; } .sk-prev i:nth-child(3) { border-radius: 2px; }
.sk-night .sk-prev { background: #1e1d1a; } .sk-night .sk-prev i:nth-child(1) { background: #3a332a; box-shadow: inset 0 -1px 0 #c9a272; } .sk-night .sk-prev i:nth-child(2) { background: #2a2824; } .sk-night .sk-prev i:nth-child(3) { background: #2a2824; box-shadow: inset 0 0 0 1px #c9a272; }
.sk-nightblue .sk-prev { background: #191c21; } .sk-nightblue .sk-prev i:nth-child(1) { background: #283240; box-shadow: inset 0 -1px 0 #8fb0dc; } .sk-nightblue .sk-prev i:nth-child(2) { background: #23272d; } .sk-nightblue .sk-prev i:nth-child(3) { background: #23272d; box-shadow: inset 0 0 0 1px #8fb0dc; }
.sk-nightwhite .sk-prev { background: #ece7dc; } .sk-nightwhite .sk-prev i:nth-child(1) { background: #f4f1ea; box-shadow: inset 0 -1px 0 #8a6f4a; } .sk-nightwhite .sk-prev i:nth-child(2) { background: #f4f1ea; box-shadow: inset -1px 0 0 #a58e6a; } .sk-nightwhite .sk-prev i:nth-child(3) { background: #fdfcf8; box-shadow: inset 0 0 0 1px #8a6f4a; }
.sk-nightcool .sk-prev { background: #eef0f3; } .sk-nightcool .sk-prev i:nth-child(1) { background: #fafbfc; box-shadow: inset 0 -1px 0 #8a94a2; } .sk-nightcool .sk-prev i:nth-child(2) { background: #fafbfc; box-shadow: inset -1px 0 0 #a0a8b4; } .sk-nightcool .sk-prev i:nth-child(3) { background: #ffffff; box-shadow: inset 0 0 0 1px #8a94a2; }
.sk-classic .sk-prev { background: #f4f2ee; } .sk-classic .sk-prev i:nth-child(1) { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); } .sk-classic .sk-prev i:nth-child(2) { background: #fff; } .sk-classic .sk-prev i:nth-child(3) { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); border-radius: 5px; }
.sk-excel .sk-prev { background: #fff linear-gradient(#e3e3e3 1px, transparent 1px) 0 0 / 100% 6px; box-shadow: inset 0 0 0 1px #d4d4d4; } .sk-excel .sk-prev i:nth-child(1) { background: #217346; } .sk-excel .sk-prev i:nth-child(2) { background: #f3f3f3; } .sk-excel .sk-prev i:nth-child(3) { background: transparent; box-shadow: inset 0 0 0 1.5px #217346; }
@media (max-width: 760px) { .skin-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 420px) { .skin-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 전체·사담: 오너 이름 + 줄인 캐릭터 이름 */
.msg .who.own { font-weight: 700; }
.msg .who-char { font-size: 11px; opacity: .62; margin-left: 4px; padding: 0 5px; border-radius: 6px; border: 1px solid currentColor; line-height: 1.5; vertical-align: 1px; white-space: nowrap; }
.msg .who-char::before { content: "✨ "; font-size: 10px; }

/* 비행 연습 미니게임 */
.fly-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fly-games .fly-mode b { display: flex; align-items: center; gap: 6px; }
.fly-games .fly-mode b .ico { width: 16px; height: 16px; }
.fly-stat { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 7px 10px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
@media (max-width: 560px) { .fly-games { grid-template-columns: 1fr; } }
.fg-wrap { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: rgba(8, 10, 22, .62); backdrop-filter: blur(3px); }
.fg-box { width: min(760px, 100%); display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--sheet); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.fg-head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; }
.fg-head b { display: flex; align-items: center; gap: 6px; } .fg-head b .ico { width: 18px; height: 18px; }
.fg-time { font-size: 22px; font-weight: 800; min-width: 5ch; text-align: right; color: var(--accent); }
.fg-sky { position: relative; height: min(62vh, 440px); border-radius: 12px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair;
  background: linear-gradient(180deg, #5d8fd0 0%, #8fb8e6 55%, #cfe2f1 82%, #7fae6a 82%, #5f8f4e 100%); }
.fg-wrap[data-game="hover"] .fg-sky { cursor: default; background: linear-gradient(180deg, #2f3f7a 0%, #6a6fb0 45%, #e3a77c 80%, #6b8a58 80%, #4f6e42 100%); }
.fg-cloud { position: absolute; width: 120px; height: 34px; border-radius: 30px; background: rgba(255, 255, 255, .75); filter: blur(1px); animation: fgCloud 26s linear infinite; pointer-events: none; }
.fg-cloud::before { content: ""; position: absolute; left: 24px; top: -16px; width: 52px; height: 40px; border-radius: 50%; background: inherit; }
.fg-cloud.c1 { top: 12%; left: -20%; } .fg-cloud.c2 { top: 32%; left: -40%; animation-duration: 34s; animation-delay: -12s; transform: scale(.7); } .fg-cloud.c3 { top: 55%; left: -30%; animation-duration: 40s; animation-delay: -25s; opacity: .6; }
@keyframes fgCloud { from { translate: 0 0; } to { translate: 900px 0; } }
.fg-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 24px)); box-sizing: border-box; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 18px 16px; border-radius: 14px; background: color-mix(in srgb, var(--sheet) 94%, transparent); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); z-index: 3; }
.fg-center .fly-res-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fg-center .row.center { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.fg-big { font-size: 40px; line-height: 1; color: var(--accent); } .fg-big small { font-size: 16px; margin-left: 2px; }
.fg-result.best { box-shadow: 0 0 0 2px #e2b84f, 0 10px 30px rgba(226, 184, 79, .35); }
.fg-why { font-weight: 700; color: var(--bad, #d46a6a); }
.fg-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 84px; font-weight: 900; color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, .4); pointer-events: none; }
.fg-count.fg-pop { animation: fgPop .6s ease-out; }
@keyframes fgPop { from { transform: scale(1.6); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); opacity: .9; } }
.fg-ring { all: unset; position: absolute; box-sizing: border-box; border-radius: 50%; cursor: pointer; display: grid; place-items: center; z-index: 2;
  border: 5px solid #e8b94a; box-shadow: 0 0 0 2px rgba(120, 80, 20, .5), 0 0 14px rgba(255, 210, 110, .7), inset 0 0 0 2px rgba(255, 240, 200, .6); animation: fgRingIn .18s ease-out; }
.fg-ring span { font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.fg-ring.hit { animation: fgRingHit .26s ease-out forwards; }
@keyframes fgRingIn { from { transform: scale(.4); opacity: 0; } }
@keyframes fgRingHit { to { transform: scale(1.6); opacity: 0; } }
.fg-miss { position: absolute; transform: translate(-50%, -50%); font-weight: 800; font-size: 14px; color: #fff; background: rgba(200, 60, 60, .85); padding: 1px 7px; border-radius: 8px; pointer-events: none; animation: fgMiss .7s ease-out forwards; z-index: 3; }
@keyframes fgMiss { to { translate: 0 -26px; opacity: 0; } }
.fg-broom { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: radial-gradient(circle, rgba(255, 244, 214, .35), rgba(255, 244, 214, .08) 70%); border: 2px dashed rgba(255, 244, 214, .8); }
.fg-broom > .ico { width: 64px; height: 64px; color: #f6dc9a; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .4)); animation: flyBob 3s ease-in-out infinite; pointer-events: none; }
.fg-broom em { position: absolute; bottom: -26px; font-style: normal; font-size: 12.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); white-space: nowrap; pointer-events: none; }
.fg-halo { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; }
.fg-broom.arming { border-style: solid; border-color: #f2cf7a; }
.fg-broom.live { border-style: solid; border-color: #9ee39a; box-shadow: 0 0 22px rgba(158, 227, 154, .55); }
.fg-broom.live .fg-halo { border: 2px solid rgba(158, 227, 154, .6); animation: fgHalo 1.6s ease-out infinite; }
@keyframes fgHalo { from { transform: scale(1); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.fg-tease { position: absolute; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 20px; background: rgba(20, 20, 40, .7); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; animation: fgTease 2.6s ease-in-out forwards; z-index: 3; }
@keyframes fgTease { 0% { opacity: 0; translate: 0 8px; } 15%, 80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
.fg-snitch { position: absolute; left: -30px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c4, #e2b23a 60%, #9a7414); box-shadow: 0 0 10px #ffd860; pointer-events: none; animation: fgSnitch 1.8s ease-in-out forwards; z-index: 3; }
.fg-snitch::before, .fg-snitch::after { content: ""; position: absolute; top: -3px; width: 14px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.fg-snitch::before { left: -12px; } .fg-snitch::after { right: -12px; }
@keyframes fgSnitch { 0% { left: -30px; } 50% { translate: 0 -30px; } 100% { left: calc(100% + 30px); translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .fg-cloud, .fg-snitch, .fg-broom > .ico { animation: none; } }

/* 인사하기 · 소매치기 · 프로필 음악 */
.greet-row { display: grid; gap: 6px; padding: 10px 0 2px; border-top: 1px dashed var(--line); }
.greet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.greet-chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 8px; border-radius: 999px; font-size: 13px; color: var(--ink); border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 7%, transparent); transition: transform .12s, background .12s; }
.greet-chip span { font-size: 16px; line-height: 1; }
.greet-chip:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-1px); }
.greet-chip:active { transform: scale(.94); }
.greet-chip.done { opacity: .5; }
.greet-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msg.greet-msg { display: flex; justify-content: center; align-items: baseline; gap: 8px; padding: 4px 10px; margin: 2px auto; width: fit-content; max-width: 92%; border-radius: 999px; font-size: 12.5px; color: var(--ink-2, var(--ink)); background: color-mix(in srgb, var(--accent) 9%, transparent); text-align: center; }
.msg.greet-msg.to-me { background: color-mix(in srgb, #e58fb0 22%, transparent); font-weight: 600; }
.msg.greet-msg .t { font-size: 10.5px; opacity: .6; }
.pick-amts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pick-amt { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); text-align: center; }
.pick-amt b { font-size: 24px; color: var(--accent); } .pick-amt b small { font-size: 12px; margin-left: 1px; }
.pick-amt:hover:not([disabled]) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pick-amt[disabled] { opacity: .45; cursor: not-allowed; }
.pick-odds { font-size: 11px; letter-spacing: 2px; color: var(--accent); }
.pick-odds em { font-style: normal; letter-spacing: 0; color: var(--ink-3, var(--ink)); opacity: .75; margin-right: 2px; }
.pick-wait, .pick-res { display: grid; justify-items: center; text-align: center; gap: 6px; }
.pick-hand { font-size: 46px; animation: pickSneak 1.4s ease-in-out infinite; }
@keyframes pickSneak { 0%, 100% { transform: translateX(-10px) rotate(-8deg); } 50% { transform: translateX(10px) rotate(6deg); } }
.pick-big { font-size: 52px; line-height: 1; }
.pick-res.win h3 { color: var(--good, #6fbf73); } .pick-res.lose h3 { color: var(--bad, #d46a6a); }
.pick-res .row.end { justify-self: stretch; }
.pick-alert { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px; background: rgba(60, 10, 20, .45); animation: paIn .15s ease-out; }
@keyframes paIn { from { opacity: 0; } }
.pa-box { width: min(360px, 100%); display: grid; justify-items: center; text-align: center; gap: 8px; padding: 20px 18px; border-radius: 18px; background: var(--sheet); color: var(--ink); border: 2px solid #e07a7a; box-shadow: 0 0 0 6px rgba(224, 122, 122, .25), 0 20px 50px rgba(0, 0, 0, .45); animation: paShake .45s ease-in-out 2; }
.pick-alert.won .pa-box { border-color: #8fd18a; box-shadow: 0 0 0 6px rgba(143, 209, 138, .25), 0 20px 50px rgba(0, 0, 0, .45); animation: none; }
.pick-alert.lost .pa-box { animation: none; }
@keyframes paShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px) rotate(-1deg); } 40% { transform: translateX(7px) rotate(1deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
.pa-pouch { font-size: 48px; line-height: 1; }
.pa-title { font-size: 20px; }
.pa-btn { font-size: 17px; padding: 12px 22px; width: 100%; }
.pa-bar { width: 100%; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.pa-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #e07a7a, #f2cf7a); transform-origin: left; animation: paBar linear forwards; }
@keyframes paBar { to { transform: scaleX(0); } }
.prof-music { display: grid; gap: 8px; }
.pm-frame { position: relative; width: 100%; max-width: 480px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.pm-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) { .pa-box, .pick-hand { animation: none; } }

/* 던전(동굴·숲길·파티·레이드·아즈카반) 칸은 둥글게 */
html:root .view[data-page="mine"] :is(.panel, .block.fold, .wg, .card, .tile, .mine-stats > *, .table-wrap) { border-radius: 16px; }
html:root[data-frame="night"][data-theme="dark"] .view[data-page="mine"] :is(.panel, .block.fold) { border-radius: 18px; background-image: var(--grain, none); }
html:root[data-frame="night"][data-theme="dark"] .view[data-page="mine"] :is(.panel, .block.fold, .wg, .card) :is(.panel, .block.fold, .wg, .card) { border-radius: 14px; }
html:root .view[data-page="mine"] .panel :is(button:not(.btn):not(.chip), .item, .next, .tk-act) { border-radius: 14px; }
html:root .view[data-page="mine"] .mine-hero { border-radius: 22px; }

/* 던전 카드·아래 띠 둥글게 */
html:root .dgc-row .dgc { border-radius: 18px; }
html:root .dgc-row .dgc-foot { border-radius: 999px; padding: 4px 10px; }
html:root .dg-select { border-radius: 22px; }

/* 고블린 작업대 목록 */
.craft-list { display: grid; gap: 8px; }
html:root .craft-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); }
html:root .craft-row.ready { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.craft-row .cr-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.craft-row .cr-ico .ico, .craft-row .cr-ico img, .craft-row .cr-ico svg { width: 20px; height: 20px; margin: 0; }
.craft-row .cr-main { display: grid; gap: 3px; min-width: 0; }
.craft-row .cr-nm { font-size: 14.5px; color: var(--ink); }
.craft-row .cr-ds { font-size: 12.5px; color: var(--ink-2, var(--ink)); opacity: .85; line-height: 1.45; }
.craft-row .cr-need { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.craft-row .cr-need .need-i { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.craft-row .cr-need .need-i.ok { color: var(--good, #7cc47f); border-color: color-mix(in srgb, var(--good, #7cc47f) 45%, transparent); }
.craft-row .cr-need .need-i.no { color: var(--ink-3, var(--ink)); opacity: .75; }
.craft-row .cr-btn { white-space: nowrap; }
@media (max-width: 560px) {
  html:root .craft-row { grid-template-columns: auto minmax(0, 1fr); }
  .craft-row .cr-btn { grid-column: 1 / -1; justify-self: end; }
}

/* 검수: 어두운 화면 대비 보정 */
html:root[data-theme="dark"] .hc-tag.hot { color: #ffd98a; background: color-mix(in srgb, #c9962a 30%, transparent); }
html:root[data-theme="dark"] .rk-row.m1 .rk-n { color: #f2c14e; }
html:root[data-theme="dark"] .bd-st { color: color-mix(in srgb, var(--kc) 55%, #fff); }
.fest-d { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); filter: saturate(1.05) brightness(.88); }
html:root .craft-row .cr-need .need-i.no { opacity: 1; color: var(--ink-2, var(--ink)); }
html:root .craft-row .cr-need .need-i.no b { color: var(--bad); }

/* 강화 카드: 이유 문구는 한 줄 통째로, 버튼은 그 아래 오른쪽 */
html:root .gear-go { flex-wrap: wrap; gap: 8px; }
html:root .gear-go .gear-why { flex: 1 1 100%; }
html:root .gear-go > .row { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

/* 강화 재료 표: +1~10 / +11~20 두 칸 */
.enh-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.enh-col { display: grid; gap: 6px; min-width: 0; }
.enh-col-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.enh-tbl { font-size: 12.5px; }
.enh-tbl td, .enh-tbl th { padding: 5px 7px; vertical-align: top; }
.enh-tbl td:first-child, .enh-tbl td:nth-child(3), .enh-tbl td:nth-child(4) { white-space: nowrap; }
.enh-tbl { width: 100%; }
html:root .enh-tbl td:nth-child(2) { white-space: normal; min-width: 0; }
.enh-m { display: inline-block; margin: 0 6px 2px 0; white-space: nowrap; }
.enh-col .table-wrap { overflow-x: visible; }
@media (max-width: 760px) { .enh-cols { grid-template-columns: 1fr; } }

.craft-row .cr-wear { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; vertical-align: 1px; color: var(--warn, #e0b65c); border: 1px solid color-mix(in srgb, var(--warn, #e0b65c) 50%, transparent); }

/* 혈통·핏줄 고르기 */
.origin-picks { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.origin-picks .pick { text-align: left; }
.og-box { display: grid; gap: 8px; padding: 12px 14px; margin-bottom: 6px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); }

.trait-off { text-decoration: line-through; opacity: .55; }
.trait-note { padding: 8px 12px; margin-bottom: 8px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--warn, #e0b65c) 50%, transparent); background: color-mix(in srgb, var(--warn, #e0b65c) 10%, transparent); }

.pot-stars { color: #f2c14e; font-size: .85em; letter-spacing: 1px; }
.chip.on .pot-stars { color: #7a4a00; }
.pot-note { margin-top: 6px; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: color-mix(in srgb, #f2c14e 14%, transparent); border: 1px solid color-mix(in srgb, #f2c14e 45%, transparent); }

/* 기숙사 직접 고르기: 4칸 나란히, 가운데 정렬 + 동물 */
.house-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html:root .house-picks .pick-house { display: grid; justify-items: center; align-content: center; gap: 2px; text-align: center; padding: 14px 8px 12px; border-left: 0; border-top: 4px solid var(--hc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--hc) 16%, transparent), transparent 70%); }
.house-picks .pick-house b { font-size: 15px; }
.house-picks .hp-emo { font-size: 30px; line-height: 1.1; margin-bottom: 2px; transition: transform .15s; }
.house-picks .pick-house:hover .hp-emo { transform: scale(1.15) rotate(-6deg); }
@media (max-width: 560px) { .house-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 위쪽 표시줄: 넓은 화면에서도 현재 위치는 왼쪽 끝, 아이콘은 오른쪽 끝 */
html:root .statusbar, html:root[data-frame="night"] .statusbar, html:root[data-frame="night"]:not([data-theme="dark"]) .statusbar { padding-inline: clamp(12px, 2vw, 24px) !important; }
.to-top { transition: right .2s, opacity .2s, transform .2s; }

/* 위쪽 줄: 눌러서 처리할 일 */
.sb-mid { gap: 8px; align-items: center; flex-wrap: nowrap; }
.todo-chips { display: inline-flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: center; }
.todo-chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); transition: transform .12s, background .12s; }
.todo-chip .ico { width: 14px; height: 14px; }
.todo-chip:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); transform: translateY(-1px); }
.todo-chip.hot { color: #fff; background: #c4523f; border-color: #e07a6a; animation: todoPulse 1.6s ease-in-out infinite; }
@keyframes todoPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 122, 106, .5); } 50% { box-shadow: 0 0 0 5px rgba(224, 122, 106, 0); } }
@media (max-width: 760px) { .sb-mid { flex-wrap: wrap; justify-content: center; } .todo-chip { padding: 4px 9px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .todo-chip.hot { animation: none; } }

/* 전투 준비물 */
html:root .kit-panel { gap: 12px; }
html:root .kit-slots { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
html:root .kit-slot { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ks-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ks-head .ks-emo { font-size: 20px; line-height: 1; }
.ks-head .small { margin-left: auto; }
.kit-items { display: grid; gap: 6px; }
.kit-item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); transition: border-color .12s, background .12s, transform .12s; }
.kit-item:hover:not([disabled]) { border-color: color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-1px); }
.kit-item.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.kit-item.none { opacity: .5; cursor: default; }
.kit-item .ki-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.kit-item .ki-emo { font-size: 20px; line-height: 1; }
.kit-item .ki-main { display: grid; gap: 3px; min-width: 0; }
.kit-item .ki-main b { font-size: 13.5px; color: var(--ink); }
.ki-fx { display: flex; flex-wrap: wrap; gap: 4px; }
.kfx { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--good, #7cc495); background: color-mix(in srgb, var(--good, #7cc495) 12%, transparent); }
.kfx .ico { width: 11px; height: 11px; }
.kit-item .ki-cnt { display: inline-flex; align-items: baseline; gap: 2px; color: var(--ink-2, var(--ink)); }
.kit-item .ki-cnt .ico { width: 14px; height: 14px; color: var(--accent); align-self: center; margin-right: 3px; }
.kit-item .ki-cnt b { font-size: 15px; }
.kit-item .ki-cnt small { font-size: 11px; opacity: .7; }
.kit-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; border: 1px dashed var(--line); }
.kit-sum.on { border-style: solid; border-color: color-mix(in srgb, var(--good, #7cc495) 50%, transparent); background: color-mix(in srgb, var(--good, #7cc495) 7%, transparent); }
.kit-sum .ks-label { font-weight: 700; font-size: 13px; }
.kit-sum .ks-when { margin-left: auto; }

/* 프로필: 성격 키워드 */
.kw-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-chip { padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
#profile-form select { min-width: 0; }

/* 오늘의 별자리 운세 */
.oha-me { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.oha-me > div { display: grid; gap: 3px; }
.oha-me .oha-sign { font-size: 34px; line-height: 1; }
.oha-me.rtop { border-color: color-mix(in srgb, #f2c14e 60%, transparent); background: color-mix(in srgb, #f2c14e 12%, transparent); }
.oha-me.rlow { border-color: color-mix(in srgb, #8fa3c9 50%, transparent); background: color-mix(in srgb, #8fa3c9 10%, transparent); }
.oha-none { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.oha-rank { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.oha-rank li { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 8px; font-size: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); min-width: 0; }
.oha-rank li .num { font-weight: 800; color: var(--accent); min-width: 1.4em; }
.oha-rank li .oh-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oha-rank li.me { outline: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.oha-rank li:nth-child(-n+3) .num { color: #f2c14e; }
@media (max-width: 760px) { .oha-rank { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 화분 촉촉함 물방울 */
.moist { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 5px; --mw: #4f9fd8; }
.moist .mw-ico { font-size: 11px; line-height: 1; }
.moist .mw-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.moist .mw-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--mw) 70%, #fff), var(--mw)); transition: width .4s; }
.moist .mw-lbl { font-size: 11px; font-weight: 700; color: var(--mw); white-space: nowrap; }
.moist.mw-ok { --mw: #5aa7c9; } .moist.mw-low { --mw: #d39a3a; } .moist.mw-dry { --mw: var(--bad); } .moist.mw-dry .mw-ico { filter: grayscale(1) opacity(.5); }

/* 던전 다섯 곳의 제목 띠: 같은 높이·같은 글씨·세로 가운데 */
html:root .view[data-page="mine"] :is(.mine-hero, .dg-intro) { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: center; min-height: 170px; padding: 22px 24px; border-radius: 22px; box-sizing: border-box; }
html:root .view[data-page="mine"] :is(.mine-hero, .dg-intro) > div:first-child { display: grid; gap: 6px; align-content: center; }
html:root .view[data-page="mine"] :is(.mine-hero h1, .dg-intro h2) { margin: 0; font-family: var(--f-display); font-size: clamp(24px, 3.4vw, 32px); line-height: 1.2; color: #fff; }
html:root .view[data-page="mine"] :is(.mine-hero, .dg-intro) .eyebrow { margin: 0; }
html:root .view[data-page="mine"] :is(.mine-hero .prose, .dg-intro .small) { margin: 0; font-size: 14px; line-height: 1.6; }
html:root .view[data-page="mine"] .dg-intro > :last-child:not(:first-child) { justify-self: end; align-self: center; }
html:root .view[data-page="mine"] .mine-hero .tiles { align-self: center; }
@media (max-width: 700px) { html:root .view[data-page="mine"] :is(.mine-hero, .dg-intro) { grid-template-columns: minmax(0, 1fr); min-height: 0; } html:root .view[data-page="mine"] .dg-intro > :last-child:not(:first-child) { justify-self: stretch; } }

/* 스니치 따라잡기: 움직이는 금빛 원 */
.fg-orb { position: absolute; left: 0; top: 0; border-radius: 50%; z-index: 2; display: grid; place-items: center; will-change: transform;
  border: 2px dashed rgba(255, 232, 160, .9); background: radial-gradient(circle, rgba(255, 226, 140, .28), rgba(255, 226, 140, .06) 70%); }
.fg-orb .fg-snitchball { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c4, #e2b23a 60%, #9a7414); box-shadow: 0 0 12px #ffd860; position: relative; pointer-events: none; }
.fg-orb .fg-snitchball::before, .fg-orb .fg-snitchball::after { content: ""; position: absolute; top: -4px; width: 16px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .9); animation: fgWing .18s ease-in-out infinite alternate; }
.fg-orb .fg-snitchball::before { left: -14px; transform-origin: right center; } .fg-orb .fg-snitchball::after { right: -14px; transform-origin: left center; }
@keyframes fgWing { to { transform: scaleY(.3); } }
.fg-orb em { position: absolute; bottom: -24px; font-style: normal; font-size: 12.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); white-space: nowrap; pointer-events: none; }
.fg-orb.arming { border-style: solid; border-color: #f2cf7a; }
.fg-orb.live { border-style: solid; border-color: #9ee39a; box-shadow: 0 0 22px rgba(158, 227, 154, .5); }
.fg-orb.live .fg-halo { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(158, 227, 154, .55); animation: fgHalo 1.6s ease-out infinite; pointer-events: none; }
.fg-wrap[data-game="hover"] .fg-sky { cursor: crosshair; }

.sneak-path { padding: 8px 12px; margin: 4px 0 8px; border-radius: 10px; border-left: 3px solid #c9a24a; background: color-mix(in srgb, #c9a24a 10%, transparent); line-height: 1.6; }

/* 왼쪽 아래 내 이름: 누르면 상태 팝업이 그 위에 */
html:root #pop .pop.me-pop:not(.x) { top: auto; bottom: 92px; left: 16px; right: auto; width: min(340px, calc(100% - 32px)); }
.me .me-st { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-2, var(--ink)); opacity: .9; }
.me .me-st .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); display: inline-block; }

/* 운세: 점술가의 천막 */
.seer-hero { position: relative; display: grid; align-items: end; min-height: 340px; padding: 22px 24px; border-radius: 24px; color: #ece6ff; overflow: hidden; isolation: isolate; box-shadow: 0 10px 30px rgba(20, 10, 60, .35); }
.seer-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.seer-txt { display: grid; gap: 8px; max-width: 560px; padding: 16px 18px; border-radius: 18px; background: rgba(14, 10, 40, .55); backdrop-filter: blur(4px); border: 1px solid rgba(200, 185, 255, .22); }
.seer-txt h1 { margin: 0; font-family: var(--f-display); font-size: clamp(24px, 3.4vw, 32px); color: #fff; }
.seer-txt .eyebrow { color: #c6b8ff; margin: 0; }
.seer-txt .prose { margin: 0; color: #d6cff5; font-size: 14px; }
.seer-sky .stars circle { fill: #fff; animation: seerTw 3s ease-in-out infinite; }
.seer-sky .milky { fill: none; stroke: rgba(190, 170, 255, .14); stroke-width: 60; stroke-linecap: round; filter: blur(8px); }
.seer-sky .cons polyline { fill: none; stroke: rgba(200, 220, 255, .75); stroke-width: 1.4; stroke-dasharray: 100; stroke-dashoffset: 100; animation: consDraw 12s ease-in-out infinite; }
.seer-sky .cons circle { fill: #fff; filter: drop-shadow(0 0 4px #bcd6ff); animation: seerTw 2.4s ease-in-out infinite; }
.seer-sky .cons.c1 polyline { animation-delay: 4s; } .seer-sky .cons.c2 polyline { animation-delay: 8s; }
.seer-sky .moon { fill: #f6e7a8; filter: drop-shadow(0 0 10px rgba(246, 231, 168, .7)); }
.seer-sky .shoot { opacity: 0; animation: shootFall var(--d, 4s) linear var(--dl, 0s) infinite; }
.seer-sky .shoot path { stroke: url(#skyg); stroke: rgba(255, 255, 255, .85); stroke-width: 2; stroke-linecap: round; }
.seer-sky .shoot circle { fill: #fff; filter: drop-shadow(0 0 5px #fff); }
.seer-sky .hills { fill: #120f2a; }
.seer-sky .tower path { fill: #1b1638; stroke: #3c3270; stroke-width: 1; }
.seer-sky .tower .win { fill: #ffd27a; opacity: .85; animation: seerTw 4s ease-in-out infinite; }
.seer-sky .scope .leg { stroke: #8a7aa8; stroke-width: 2.4; fill: none; stroke-linecap: round; }
.seer-sky .scope .tube { fill: #b38a4a; stroke: #e6c27a; stroke-width: 1.2; stroke-linejoin: round; }
.seer-sky .scope .band { stroke: #6d5226; stroke-width: 3; }
.seer-sky .scope .mount { fill: #6d5226; }
.seer-sky .scope .lensface { fill: #cfe6ff; opacity: .9; }
.seer-sky .tower .ledge { stroke: #3c3270; stroke-width: 3; }
.seer-sky .tower rect:not(.win) { fill: #1b1638; stroke: #3c3270; stroke-width: 1; }
.seer-sky .scope .lens { animation: seerGlow 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.seer-sky .seer .robe { fill: #3d2c6e; stroke: #8f7ad6; stroke-width: 1.2; }
.seer-sky .seer .hood { fill: #2a1d52; stroke: #8f7ad6; stroke-width: 1.2; }
.seer-sky .seer .arm { fill: none; stroke: #8f7ad6; stroke-width: 3; stroke-linecap: round; }
.seer-sky .seer .eye { fill: #f6e7a8; animation: seerBlink 5s infinite; }
.seer-sky .ball .orb { fill: #8fb3ff; stroke: #eaf2ff; stroke-width: 1; }
.seer-sky .ball .ball-glow { animation: seerGlow 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.seer-sky .ball .stand { fill: #b38a4a; }
@keyframes consDraw { 0% { stroke-dashoffset: 100; opacity: 0; } 15% { opacity: 1; } 40% { stroke-dashoffset: 0; } 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes shootFall { 0% { opacity: 0; transform: translate(0, 0); } 4% { opacity: 1; } 22% { opacity: 0; transform: translate(-260px, 150px); } 100% { opacity: 0; transform: translate(-260px, 150px); } }
.seer-me { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(200, 185, 255, .3); }
.seer-me > div { display: grid; gap: 4px; justify-items: start; }
.seer-me .sm-sign { font-size: 38px; line-height: 1; }
.seer-me b em { font-style: normal; color: #ffd86b; }
.seer-me.rtop { border-color: rgba(255, 216, 107, .7); background: rgba(255, 216, 107, .12); }
.seer-me .small { color: #e2dcff; } .seer-me .faint { color: #b9b0e0; opacity: 1; }
.seer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.seer-list { display: grid; gap: 6px; align-content: start; }
.sl-row { display: grid; grid-template-columns: 26px 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; border: 1px solid var(--line, var(--rule)); }
.sl-row .sl-n { font-weight: 800; font-size: 15px; color: var(--ink-2, var(--ink)); text-align: center; }
.sl-row.top .sl-n { color: #e8b94a; }
.sl-row .sl-emo { font-size: 19px; text-align: center; }
.sl-row .sl-name { display: grid; gap: 1px; min-width: 0; }
.sl-row .sl-name b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-row .sl-name b small { font-size: 11px; font-weight: 400; opacity: .6; }
.sl-row .sl-lucky { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-row .sl-bonus { text-align: right; white-space: nowrap; font-size: 12px; }
.sl-row.me { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 760px) { .seer-hero { min-height: 0; padding: 236px 12px 12px; } .seer-sky { height: 300px; bottom: auto; } .seer-cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .seer-sky * { animation: none !important; } .seer-sky .cons polyline { stroke-dashoffset: 0; } }
@keyframes seerTw { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes seerShoot { 0% { stroke-dashoffset: 68; opacity: 0; } 8% { opacity: 1; } 20% { stroke-dashoffset: 0; opacity: 0; } 100% { opacity: 0; } }
@keyframes seerBlink { 0%, 92%, 100% { opacity: 1; } 95% { opacity: 0; } }
@keyframes seerGlow { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes seerSpark { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.mail-btn { position: relative; }

@media (max-width: 480px) { .statusbar .where .lk { display: none; } }

/* z154: 꾸밈 박스 정렬 손질 */
.ev-date { display: flex; flex-direction: column; gap: 3px; }
.ev-date b { font-size: 15px; }
.ev-date small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3, var(--ink-2)); }
.ev-tdy { font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.ev-tdy.tm { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-2); }
@media (max-width: 700px) { .ev-date { flex-direction: row; align-items: center; gap: 8px; } }
.scene.with-art { min-height: 168px; align-content: center; }
.scene.with-art > .scene-top, .scene.with-art > h1 { max-width: 56%; }
.scene.with-art > .scene-top { justify-content: flex-start !important; align-items: center !important; }
.scene.with-art > .hero-art { top: 0 !important; height: 100% !important; }
@media (max-width: 760px) { .scene.with-art { min-height: 0; } .scene.with-art > .scene-top, .scene.with-art > h1 { max-width: none; } .scene.with-art > .hero-art { height: 96px !important; } }
.deco-top > .small.faint { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; text-align: center; }

/* z155: 이동중 띠 길이 · 두꺼비 경주 · 침대맡 문구 · 업적 필터 · 프로필 입력칸 */
.statusbar :is(.sb-right, .sb-mid) .act-band:not(.ab-asking) { flex: 0 1 260px; width: 260px; max-width: 260px; }
@media (max-width: 760px) { .statusbar :is(.sb-right, .sb-mid) .act-band:not(.ab-asking) { flex-basis: 160px; width: 160px; max-width: 160px; } }
.frog { display: flex; flex-direction: column; gap: 4px; } .frog > .small.faint { flex: 1; } .frog > .btn { margin-top: 4px; align-self: flex-start; }
.frog-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.frog-top b { flex: 1 1 auto !important; min-width: 0; width: auto !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frog .odds, .frog-top .odds { position: static; flex: none; width: auto !important; inset: auto; }
.game-open .frog { background: color-mix(in srgb, #4f8a3c 14%, var(--sheet)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, #4f8a3c 30%, transparent); }
.game-open .frog .faint { color: var(--ink-2); }
.game-open .frog .frog-odds { color: #7fc062; }
.game-open .frog.mine { box-shadow: inset 0 0 0 1.5px #7fc062; }
.room-box > .row.between { flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center; }
.chip.on .cnt { color: inherit; opacity: .8; }
.chip .cnt { color: var(--ink-3, var(--ink-2)); font-weight: 600; }
.ach-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ach-filter .ach-cats { flex: 1 1 420px; }
.ach-own button .ico { width: 13px; height: 13px; }
.pf-basic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px 12px; align-items: end; }
.pf-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.pf-basic .field, .pf-two .field { margin: 0; min-width: 0; }
.pf-basic :is(input, select), .pf-two input { width: 100%; height: 42px; box-sizing: border-box; }
.pf-bday-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pf-bday .eyebrow small { font-size: 11px; letter-spacing: 0; text-transform: none; }
@media (max-width: 560px) { .pf-basic { grid-template-columns: 1fr 1fr; } .pf-basic .pf-bday { grid-column: 1 / -1; } .pf-two { grid-template-columns: 1fr; } }
/* z155: 가위바위보 결투 */
.rpsd { display: grid; gap: 12px; }
.rps-head h3 { margin: 2px 0 0; }
.rps-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rps-side { display: grid; align-content: space-between; gap: 5px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, var(--sheet)); }
.rps-side .track { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.rps-side .fill { height: 100%; border-radius: inherit; background: #d0605a; transition: width .5s ease; }
.rps-side.me .fill { background: #5aa36a; }
.rps-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rps-btn { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 14px 8px 12px; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--rc) 45%, transparent); background: color-mix(in srgb, var(--rc) 12%, var(--sheet)); color: var(--ink); font: inherit; cursor: pointer; text-align: center; transition: transform .12s, box-shadow .15s; }
.rps-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 18px color-mix(in srgb, var(--rc) 30%, transparent); }
.rps-btn:active { transform: scale(.96); }
.rps-attack { --rc: #e0a33a; } .rps-shield { --rc: #5a8fd0; } .rps-disarm { --rc: #b06ad0; }
.rpsd-ico { font-size: 30px; line-height: 1.1; }
.rps-btn b { font-size: 15px; }
.rps-btn small { font-size: 11.5px; color: var(--ink-2); }
.rps-btn em { font-style: normal; font-size: 11px; color: var(--ink-3, var(--ink-2)); }
.rps-time { height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.rps-time i { display: block; height: 100%; width: 100%; background: var(--accent); transition: width .3s linear; }
.rps-wait { text-align: center; font-weight: 600; padding: 14px 8px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, var(--sheet)); margin: 0; }
.rps-reveal { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: 8px; padding: 6px 0; animation: rpsIn .45s ease; }
.rps-card { display: grid; justify-items: center; gap: 2px; font-size: 34px; line-height: 1.1; width: 86px; padding: 8px 0; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, var(--sheet)); }
.rps-card small { font-size: 11.5px; color: var(--ink-2); }
.rps-reveal.won b { color: #5aa36a; } .rps-reveal.lost b { color: #d0605a; } .rps-reveal.tie b { color: var(--ink-2); }
.rps-reveal.won .rps-card:not(.op), .rps-reveal.lost .rps-card.op { box-shadow: inset 0 0 0 2px currentColor; color: var(--accent); }
.rps-line { text-align: center; margin: 0; }
@keyframes rpsIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .rps-btn em { display: none; } .rpsd-ico { font-size: 26px; } .rps-card { width: 70px; font-size: 28px; } }

/* z157: 파티 역할 소모 */
.role-chip small { font-size: 11px; opacity: .75; margin-left: 2px; }
.role-chip.rc-attack small { color: #d9a43a; } .role-chip.rc-guard small { color: #d0605a; } .role-chip.rc-heal small { color: #5a8fd0; }
.chip.on.role-chip small { color: inherit; }
.bag-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.bag-bar > .chips { flex: 1 1 360px; min-width: 0; }
.bag-bar > .bag-tools { flex: 0 1 300px; margin-left: auto; justify-content: flex-end; }
.bag-bar > .bag-tools input { width: 100%; }
@media (max-width: 560px) { .bag-bar > .bag-tools { flex: 1 1 100%; order: -1; } }
/* z157: 기숙사 규칙 줄 · 관리자 꾸미기 · 계절 테마 */
.term-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.term-rules span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 6%, var(--sheet)); }
.term-rules span b { color: var(--ink); }
.term-rules .ico { width: 14px; height: 14px; color: var(--cup, var(--accent)); }
.adm-site { display: grid; gap: 10px; }
.adm-cups, .adm-seasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.adm-cup, .adm-season { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--hc, var(--accent)) 35%, transparent); background: color-mix(in srgb, var(--hc, var(--accent)) 10%, var(--sheet)); color: var(--ink); font: inherit; cursor: pointer; text-align: center; }
.adm-cup .emo, .adm-season .emo { font-size: 24px; line-height: 1.1; }
.adm-cup .ico { width: 22px; height: 22px; color: var(--accent); }
.adm-season small { font-size: 11px; color: var(--ink-3, var(--ink-2)); }
.adm-cup.on, .adm-season.on { border-color: var(--hc, var(--accent)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hc, var(--accent)) 40%, transparent); background: color-mix(in srgb, var(--hc, var(--accent)) 22%, var(--sheet)); }
/* z157: 상점 탭 크게 · 경매장 눈에 띄게 */
.subtabs.st-shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 100%; gap: 6px; padding: 6px; border-radius: 18px; }
.subtabs.st-shop button { justify-content: center; padding: 12px 10px; font-size: 14.5px; font-weight: 700; border-radius: 13px; }
.subtabs.st-shop button .ico { width: 18px; height: 18px; }
html:root .subtabs.st-shop button.sub-auction { color: #f3d58a !important; background: linear-gradient(135deg, rgba(201, 162, 74, .32), rgba(201, 162, 74, .12)) !important; box-shadow: inset 0 0 0 1.5px rgba(230, 196, 120, .6) !important; }
.subtabs.st-shop button.sub-auction .ico { width: 20px; height: 20px; animation: gavelTap 2.6s ease-in-out infinite; transform-origin: 70% 70%; }
html:root .subtabs.st-shop button.sub-auction.on { background: linear-gradient(135deg, #e0bf6a, #b38a3a) !important; color: #1f1a12 !important; }
html:root:not([data-frame="night"]) .subtabs.st-shop button.sub-auction { color: #8a6418 !important; }
html:root:not([data-frame="night"]) .subtabs.st-shop button.sub-auction.on { color: #fff !important; }
@keyframes gavelTap { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(-22deg); } 92% { transform: rotate(4deg); } }
@media (max-width: 560px) { .subtabs.st-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* z157: 설정 탭 · 도움말 말풍선 */
.set-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 5%, var(--sheet)); }
.set-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.set-tabs button .ico { width: 17px; height: 17px; }
.set-tabs button.on { background: var(--sheet); color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.12), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 40%, transparent); }
.set-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start; }
.set-panel { display: grid; gap: 10px; align-content: start; }
.hide-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.hide-row .toggle { flex: 1; margin: 0; }
.tip { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 800; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 10%, transparent); cursor: help; flex: none; }
.tip-box { position: absolute; right: -6px; bottom: calc(100% + 8px); width: 240px; padding: 10px 12px; border-radius: 12px; background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 10px 24px rgba(0,0,0,.3); font-size: 12.5px; font-weight: 400; line-height: 1.55; text-align: left; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s; z-index: 30; }
.tip:hover .tip-box, .tip:focus .tip-box, .tip:focus-within .tip-box { opacity: 1; visibility: visible; transform: none; }
/* z157: 화면 전체 스크롤바는 숨긴다(생겼다 사라지며 가로 폭이 흔들리지 않게) · 위로 가기 버튼으로 올라간다 */
html, body { scrollbar-width: none !important; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; background: transparent; }
/* z157: 대화 탭 순서 바꾸기 */
.chat-tabs .ct[draggable="true"] { cursor: grab; }
.chat-tabs .ct.dragging { opacity: .45; }
.chat-tabs .ct.drop-to { box-shadow: inset 3px 0 0 var(--accent); }
.tc-move { display: inline-flex; gap: 2px; flex: none; }
.iconbtn.xs { width: 24px; height: 24px; min-width: 24px; padding: 0; border-radius: 7px; }
.iconbtn.xs .ico { width: 13px; height: 13px; }
.iconbtn.xs.down .ico { transform: rotate(180deg); }
.iconbtn.xs:disabled { opacity: .3; }
.tabcol-row { grid-template-columns: auto 70px minmax(0, 1fr); align-items: center; }

/* z158: 점검 안내판 */
.maint-gate { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.maint-board { width: min(520px, 100%); display: grid; gap: 12px; justify-items: center; text-align: center; padding: 26px 22px; border-radius: 24px; background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.maint-board h1 { margin: 0; font-family: var(--f-display); font-size: clamp(22px, 4vw, 28px); }
.maint-board .prose { margin: 0; color: var(--ink-2); }
.mb-art { width: min(300px, 100%); height: auto; overflow: visible; }
.mb-post { stroke: #6d5226; stroke-width: 7; stroke-linecap: round; }
.mb-sign { fill: #c9a24a; stroke: #7a5a26; stroke-width: 3; }
.mb-grain { stroke: rgba(122, 90, 38, .35); stroke-width: 1.5; }
.mb-text { font-size: 26px; font-weight: 800; fill: #3a2a12; letter-spacing: 2px; font-family: var(--f-display, inherit); }
.mb-ham { fill: #8a8f9c; transform-origin: 167px 40px; animation: mbHam 1.6s ease-in-out infinite; }
.mb-ham .mb-handle { fill: #7a5a26; }
.mb-tw path { fill: #ffd86b; animation: seerTw 2s ease-in-out infinite; }
@keyframes mbHam { 0%, 60%, 100% { transform: rotate(0); } 75% { transform: rotate(-28deg); } 85% { transform: rotate(6deg); } }
.mb-until { margin: 0; padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: 13.5px; }
.maint-board .row.center { justify-content: center; flex-wrap: wrap; }
.maint-note { border-color: #e8762c !important; background: color-mix(in srgb, #e8762c 14%, transparent) !important; }
#maint-flag { position: fixed; z-index: 60; left: 50%; top: 66px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; border: 1px solid #e8762c; background: #2a1d10; color: #ffd2a8; font: inherit; font-size: 12.5px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.35); cursor: pointer; }
html:not([data-frame="night"]) #maint-flag { background: #fff3e6; color: #a04a10; }
.adm-maint.on { border-color: #e8762c; box-shadow: inset 0 0 0 1px #e8762c55; }

/* z159: 관리 도구 정리 — 왼쪽(정보·상태) / 오른쪽(지급·세부 조절·계정), 입력칸 크기 통일 */
.admin-detail .admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "info give" "state tune" "state acct" "state ."; gap: 14px; align-items: start; }
.admin-detail .admin-grid.nochar { grid-template-areas: "info acct"; }
.admin-grid .adm-info { grid-area: info; } .admin-grid .adm-give { grid-area: give; } .admin-grid .adm-state { grid-area: state; } .admin-grid .adm-tune { grid-area: tune; } .admin-grid .adm-acct { grid-area: acct; }
@media (max-width: 860px) { .admin-detail .admin-grid, .admin-detail .admin-grid.nochar { grid-template-columns: 1fr; grid-template-areas: "info" "give" "state" "tune" "acct"; } }
.admin-detail .adm-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 132px; gap: 8px; align-items: center; flex-wrap: nowrap; }
.admin-detail .adm-row.n3 { grid-template-columns: minmax(0, 1fr) 88px 132px; }
.admin-detail .adm-row > :is(input, select), .admin-detail .adm-row .item-pick :is(input, select) { width: 100% !important; height: 40px; box-sizing: border-box; min-width: 0; }
.admin-detail .adm-row .item-pick { display: grid; gap: 6px; min-width: 0; }
.admin-detail .adm-row > .btn { width: 100%; justify-content: center; white-space: nowrap; height: 36px; }
.admin-detail .adm-row > .btn:only-child { grid-column: 1 / -1; width: auto; justify-self: start; }
.admin-detail .adm-row > .small { line-height: 1.35; }
.admin-detail .adm-tune .row.between, .admin-detail .adm-state > .row:not(.adm-row) { flex-wrap: wrap; }
.admin-detail .panel.tight { display: grid; gap: 9px; align-content: start; }
/* z159: 오늘 별자리 순위 작은 팝업 */
.oha-peek { position: fixed; z-index: 58; right: 16px; top: 70px; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 16px; border: 1px solid rgba(200, 185, 255, .4); background: linear-gradient(135deg, #2a2160, #1a1640); color: #ece6ff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 10px 26px rgba(20, 10, 60, .45); opacity: 0; transform: translateY(-10px) scale(.96); transition: opacity .3s, transform .3s; max-width: min(320px, calc(100vw - 32px)); }
.oha-peek.show { opacity: 1; transform: none; }
.oha-peek .op-sign { font-size: 28px; line-height: 1; animation: seerTw 2.4s ease-in-out infinite; }
.oha-peek .op-txt { display: grid; gap: 1px; min-width: 0; }
.oha-peek b { font-size: 14px; } .oha-peek b em { font-style: normal; color: #ffd86b; }
.oha-peek small { font-size: 11.5px; color: #cfc6f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oha-peek.rtop { border-color: rgba(255, 216, 107, .7); }
@media (max-width: 760px) { .oha-peek { top: auto; bottom: 84px; right: 12px; } }

/* z160: 오늘 화면 운세 칸 */
.sc-btn.sc-fortune { position: relative; overflow: hidden; background: linear-gradient(135deg, #2a2160, #1a1640) !important; border-color: rgba(200, 185, 255, .35) !important; color: #ece6ff !important; }
.sc-btn.sc-fortune::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.2px 1.2px at 70% 30%, #fff, transparent), radial-gradient(1px 1px at 85% 70%, #fff, transparent), radial-gradient(1.4px 1.4px at 92% 20%, #ffe9a8, transparent), radial-gradient(1px 1px at 60% 80%, #fff, transparent); opacity: .8; animation: seerTw 3s ease-in-out infinite; }
.sc-btn.sc-fortune .sc-ic { background: rgba(255, 255, 255, .1) !important; color: #ffd86b !important; }
.sc-btn.sc-fortune .sc-emo { font-size: 20px; line-height: 1; }
.sc-btn.sc-fortune .sc-t b { color: #fff !important; } .sc-btn.sc-fortune .sc-t b em { font-style: normal; color: #ffd86b; }
.sc-btn.sc-fortune .sc-t span { color: #cfc6f5 !important; }
.sc-btn.sc-fortune.top { border-color: rgba(255, 216, 107, .7) !important; }

/* z167: 예언자 일보 의뢰 — 오려 붙인 신문 조각(어떤 스킨이든 종이 위에는 진한 잉크) */
html:root body .panel.dp-clip.dp-here.dp-here.dp-here.dp-here { position: relative; overflow: visible; display: grid; gap: 10px; padding: 20px 20px 18px !important; margin-top: 8px; border-radius: 4px !important; color: #33291d !important;
  background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(120, 95, 50, .06) 23px 24px), radial-gradient(circle at 15% 10%, #fffaf0, #f3e8cf 70%) !important; background-color: #f3e8cf !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28), inset 0 0 0 1px #dccba3 !important; transform: rotate(-.35deg); border: 0 !important; }
html:root body .panel.dp-clip.dp-here.dp-here.dp-here.dp-here::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px; background: radial-gradient(circle at 6px -2px, #f3e8cf 6px, transparent 6.5px) 0 0 / 12px 8px repeat-x; filter: drop-shadow(0 3px 2px rgba(0,0,0,.18)); }
.dpc-tape { position: absolute; top: -11px; left: 50%; width: 92px; height: 22px; transform: translateX(-50%) rotate(-3deg); background: repeating-linear-gradient(45deg, rgba(240, 214, 140, .85) 0 8px, rgba(250, 230, 170, .85) 8px 16px); box-shadow: 0 1px 3px rgba(0,0,0,.2); border-radius: 2px; opacity: .95; }
.dpc-mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 3px double #3a2f22; }
.dpc-paper { font-family: 'Gowun Batang', var(--f-display), serif; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #5a4630; }
.dpc-owl { justify-self: center; line-height: 0; }
.dpc-owl .dpo-body { transform-origin: 20px 32px; animation: dpoBob 3.2s ease-in-out infinite; }
.dpc-owl .dpo-eye { animation: dpoBlink 4.5s infinite; transform-origin: 20px 15px; }
.dpc-owl .dpo-wing { transform-origin: 11px 22px; animation: dpoFlap 3.2s ease-in-out infinite; } .dpc-owl .dpo-wing.r { transform-origin: 29px 22px; animation-name: dpoFlapR; }
.dpc-stamp { justify-self: end; padding: 3px 10px; border: 2px solid #b0412e; border-radius: 999px; color: #b0412e; font-size: 12px; font-weight: 800; letter-spacing: .04em; transform: rotate(6deg); background: rgba(176, 65, 46, .06); animation: dpcStamp 2.8s ease-in-out infinite; }
.dpc-title { margin: 2px 0 0; font-family: 'Gowun Batang', var(--f-display), serif; font-size: clamp(19px, 2.4vw, 23px); line-height: 1.3; color: #241b10 !important; }
.dpc-body { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; align-items: start; }
.dpc-photo { position: relative; width: 78px; height: 94px; border: 4px solid #fffaf0; outline: 1px solid #cbb88f; box-shadow: 0 3px 8px rgba(0,0,0,.18); background: radial-gradient(circle at 50% 35%, #d9c39a, #9c8158); display: grid; place-items: center; overflow: hidden; transform: rotate(-2deg); filter: sepia(.35); }
.dpc-ini { font-family: 'Gowun Batang', var(--f-display), serif; font-size: 34px; font-weight: 700; color: #3a2a14; animation: dpcSway 3.6s ease-in-out infinite; }
.dpc-glint { position: absolute; inset: -30% auto -30% -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: rotate(20deg); animation: dpcGlint 4s ease-in-out infinite; }
.dpc-text { display: grid; gap: 8px; min-width: 0; }
.dpc-lead { margin: 0; font-size: 13.5px; line-height: 1.6; color: #3e3222 !important; }
.dpc-lead::first-letter { font-family: 'Gowun Batang', var(--f-display), serif; font-size: 1.5em; font-weight: 700; color: #7a4512; }
html:root body .panel.dp-clip.dp-here.dp-here.dp-here.dp-here .npc-av { display: none; }
html:root body .panel.dp-clip.dp-here.dp-here.dp-here.dp-here .npc-say { margin: 0; }
html:root body .panel.dp-clip.dp-here.dp-here.dp-here.dp-here .npc-say > div { position: relative; background: #fffaf0 !important; border: 1.5px solid #3a2f22 !important; border-radius: 14px 14px 14px 4px !important; padding: 8px 12px; box-shadow: 2px 2px 0 rgba(58, 47, 34, .18); }
html:root body .panel.dp-clip.dp-here.dp-here.dp-here.dp-here .npc-say b { color: #7a4512 !important; }
html:root body .panel.dp-clip.dp-here.dp-here.dp-here.dp-here .npc-say p { color: #2c2318 !important; }
html:root body .panel.dp-clip.dp-here.dp-here.dp-here.dp-here .q-check { display: inline-flex; justify-self: start; padding: 3px 10px; border-radius: 999px; background: rgba(122, 69, 18, .1); color: #7a4512 !important; font-size: 12.5px; }
html:root body .panel.dp-clip.dp-here.dp-here.dp-here.dp-here .q-check .ico { color: #7a4512; }
.dpc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px dashed #cbb88f; padding-top: 9px; }
.dpc-cost { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #5a4630; }
.dpc-cost .ico { width: 13px; height: 13px; color: #c08a2a; }
html:root body .panel.dp-clip.dp-here.dp-here.dp-here.dp-here .dpc-go { background: #2a2418 !important; border-color: #2a2418 !important; color: #f6efdc !important; box-shadow: 2px 2px 0 rgba(42, 36, 24, .25); }
html:root body .panel.dp-clip.dp-here.dp-here.dp-here.dp-here .dpc-go:hover { transform: translateY(-1px) rotate(-1deg); }
@keyframes dpoBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes dpoBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes dpoFlap { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(18deg); } 90% { transform: rotate(-4deg); } }
@keyframes dpoFlapR { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-18deg); } 90% { transform: rotate(4deg); } }
@keyframes dpcStamp { 0%, 100% { transform: rotate(6deg) scale(1); } 50% { transform: rotate(4deg) scale(1.05); } }
@keyframes dpcSway { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes dpcGlint { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@media (max-width: 560px) { .dpc-body { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; } .dpc-photo { width: 60px; height: 74px; } .dpc-ini { font-size: 26px; } .dpc-mast { grid-template-columns: 1fr auto; } .dpc-owl { display: none; } }
@media (prefers-reduced-motion: reduce) { .dp-clip * { animation: none !important; } }
html:root[data-frame="night"] .ik-tac.lack .ik-e { color: #e2b45a !important; }
html:root[data-frame="night"] .ik-tac.lack .ik-l { color: #d4cab4 !important; }

/* z166: 프로필 오너 닉네임 */
.own-line { margin: 1px 0 2px; }
.own-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12.5px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); }
.own-chip .ico { width: 13px; height: 13px; color: var(--accent); }
.own-chip .faint { font-size: 11.5px; }

/* z168: 한글 글이 단어 중간에서 끊기지 않게 · 캐릭터 소개는 칸 너비를 꽉 채워 양쪽 정렬 */
.prose, .dpc-lead, .npc-say p, .bd-body, .letter p { word-break: keep-all; overflow-wrap: anywhere; }
.prose.char-intro { max-width: none; margin: 4px 0 0; font-size: 14.5px; line-height: 1.85; white-space: pre-wrap; text-align: justify; text-justify: inter-character; }

/* z169: 소매치기 — 몰래 당할 때의 부드러운 알림 · 남은 시간 */
.pick-alert.soft .pa-box { border-color: rgba(200, 185, 255, .5) !important; }
.pick-alert .pa-left { display: block; margin-top: 6px; }
.pick-res.absent .pick-big { filter: grayscale(.2); }

.pick-vs { display: inline-flex; gap: 8px; align-items: center; justify-self: center; padding: 4px 12px; border-radius: 999px; font-size: 13px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.pick-vs b { font-family: var(--f-mono); }

/* z171: 퀴디치 선수 칩·스니치 막대 글씨 잘 보이게 */
html:root .qs-p { background: color-mix(in srgb, var(--hc, var(--accent)) 16%, rgba(20, 18, 15, .55)) !important; color: #f3ead8 !important; border: 1px solid color-mix(in srgb, var(--hc, var(--accent)) 45%, transparent); font-size: 12.5px; }
html:root .qs-p b { color: #fff !important; }
html:root .qs-p .faint, html:root .qs-p small { color: #d9cfb8 !important; opacity: 1 !important; }
html:root:not([data-frame="night"]):not([data-theme="dark"]) .qs-p { background: color-mix(in srgb, var(--hc, var(--accent)) 14%, #fff) !important; color: #2a241c !important; }
html:root:not([data-frame="night"]):not([data-theme="dark"]) .qs-p b { color: #1a160f !important; }
html:root:not([data-frame="night"]):not([data-theme="dark"]) .qs-p .faint { color: #5a5040 !important; }
.qs-clue { height: 22px; display: flex; align-items: center; padding: 0 10px; }
.qs-clue span { font-size: 12px; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.8); }
html:root:not([data-frame="night"]):not([data-theme="dark"]) .qs-clue span { color: #2a241c; text-shadow: none; }
.qs-tok { font-size: 13px; }
/* z171: 채팅 이름 눌러서 프로필 */
button.who-btn { all: unset; cursor: pointer; display: inline; }
button.who-btn:hover .who, button.who-btn:hover .who-char, button.who-btn:focus-visible .who { text-decoration: underline; text-underline-offset: 3px; }
/* z171: 소매치기 기록 */
.pick-tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pick-tally > div { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); text-align: center; }
.pick-tally b { font-size: 20px; font-family: var(--f-mono); }
.pick-tally span { font-size: 12px; color: var(--ink-2); }
@media (max-width: 560px) { .pick-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.welcome-all { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent); flex-wrap: wrap; gap: 8px; }

.pf-bday .eyebrow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .pf-bday-note { display: inline-flex; align-items: center; gap: 3px; } .pf-bday-note.on { color: var(--accent); } .pf-bday-note .ico { width: 11px; height: 11px; }
.pf-bday.locked select { opacity: .6; cursor: not-allowed; }

.rps-autobar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.rps-autoing { animation: rpsAutoPulse 1.2s ease-in-out infinite; }
@keyframes rpsAutoPulse { 50% { opacity: .55; } }
/* ===== 계절 테마 · 우승 깃발 (z179) ===== */
#season-bg, #cup-ban { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#season-fx { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
#season-bg .sb-tint { position: absolute; inset: 0; }
#season-bg .sb-at { position: absolute; }
#season-bg .sb-at svg, #season-fx svg { display: block; width: 100%; height: auto; }
#season-bg .sb-bl { left: calc(var(--st-l, 0px) - 10px); bottom: 0; }
#season-bg .sb-br { right: calc(100vw - var(--st-l, 0px) - var(--st-w, 100vw) - 10px); bottom: 0; }
#season-bg .sb-tl { left: var(--st-l, 0px); top: 0; }
#season-bg .sb-tr { right: calc(100vw - var(--st-l, 0px) - var(--st-w, 100vw)); top: 0; }
/* 할로윈: 보라 하늘 + 호박빛 바닥 */
html[data-season=halloween] #season-bg .sb-tint { background: radial-gradient(ellipse 70% 55% at 85% -5%, rgba(126, 70, 200, .32), transparent 70%), radial-gradient(ellipse 60% 45% at 10% 105%, rgba(240, 120, 40, .30), transparent 70%), radial-gradient(ellipse 60% 40% at 95% 105%, rgba(240, 120, 40, .22), transparent 70%), linear-gradient(180deg, rgba(70, 30, 110, .22), rgba(70, 30, 110, .05) 45%, rgba(200, 90, 30, .10)); }
html[data-season=halloween] #season-bg .sb-moon { right: calc(100vw - var(--st-l, 0px) - var(--st-w, 100vw) + 1%); top: calc(var(--sb-h, 56px) + 6px); width: clamp(80px, 9vw, 150px); filter: drop-shadow(0 0 30px rgba(255, 220, 140, .35)); }
html[data-season=halloween] #season-bg .sb-tl { width: clamp(80px, 10vw, 150px); top: var(--sb-h, 56px); }
.sb-pks { display: flex; align-items: flex-end; }
.sb-pks span { display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)) drop-shadow(0 0 18px rgba(255, 140, 40, .35)); }
.sb-pks .pk1 { width: clamp(90px, 11vw, 190px); } .sb-pks .pk2 { width: clamp(60px, 7vw, 120px); margin-left: -18px; } .sb-pks .pk3 { width: clamp(44px, 5vw, 86px); margin-left: -8px; }
.sb-pks .pk4 { width: clamp(56px, 6.5vw, 110px); margin-right: -14px; position: relative; z-index: 1; } .sb-pks .pk5 { width: clamp(96px, 12vw, 200px); }
.sp-face { animation: spFlicker 2.6s ease-in-out infinite; } .pk3 .sp-face, .pk4 .sp-face { animation-delay: -1.1s; }
@keyframes spFlicker { 0%, 100% { opacity: 1; } 42% { opacity: .78; } 47% { opacity: .95; } 70% { opacity: .82; } }
.sf-bat { position: absolute; left: 0; width: calc(46px * var(--s, 1)); animation: sfBatFly var(--d, 16s) linear var(--dl, 0s) infinite; opacity: .85; }
.sf-bat svg { animation: sfFlap .32s ease-in-out infinite alternate; transform-origin: center; }
@keyframes sfBatFly { 0% { transform: translate(-10vw, 0); } 25% { transform: translate(25vw, -26px); } 50% { transform: translate(55vw, 18px); } 75% { transform: translate(82vw, -20px); } 100% { transform: translate(112vw, 6px); } }
@keyframes sfFlap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
.sf-gh { position: absolute; width: 42px; opacity: .78; animation: sfBob var(--d, 7s) ease-in-out var(--dl, 0s) infinite; filter: drop-shadow(0 0 10px rgba(220, 210, 255, .5)); }
.sf-cd { position: absolute; width: 14px; opacity: .9; animation: sfBob var(--d, 6s) ease-in-out var(--dl, 0s) infinite; }
.sp-flame { transform-origin: 10px 17px; animation: spFlame .5s ease-in-out infinite alternate; } .sp-halo { animation: spFlicker 1.8s ease-in-out infinite; }
@keyframes spFlame { from { transform: scale(1, 1) skewX(-3deg); } to { transform: scale(.88, 1.08) skewX(4deg); } }
@keyframes sfBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(4deg); } }
/* 크리스마스: 큰 트리 + 눈 쌓인 바닥 + 내리는 눈 */
html[data-season=christmas] #season-bg .sb-tint { background: radial-gradient(ellipse 60% 50% at 12% 100%, rgba(255, 190, 90, .22), transparent 70%), linear-gradient(180deg, rgba(80, 130, 200, .16), transparent 50%, rgba(220, 235, 255, .08)); }
.sb-tree { width: clamp(150px, 22vw, 360px); filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .4)); }
.sb-tree.sm { width: clamp(90px, 12vw, 200px); }
.sb-tree .sb-gifts { position: absolute; left: 62%; bottom: 8px; width: 62%; }
#season-bg .sb-tree { bottom: 28px; }
.sp-lights circle { animation: spTwinkle 1.6s ease-in-out infinite; } .sp-star { transform-origin: 110px 36px; animation: spStar 3s ease-in-out infinite; filter: drop-shadow(0 0 8px #ffd45e); }
@keyframes spTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes spStar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.sb-bank { position: absolute; left: var(--st-l, 0px); right: calc(100vw - var(--st-l, 0px) - var(--st-w, 100vw)); bottom: 0; height: 64px; }
.sb-bank svg { width: 100%; height: 100%; display: block; }
.sf-snow { position: absolute; top: -12px; width: calc(7px * var(--s, 1)); height: calc(7px * var(--s, 1)); border-radius: 50%; background: #fff; opacity: .85; box-shadow: 0 0 6px rgba(255, 255, 255, .7); animation: sfFall var(--d, 12s) linear var(--dl, 0s) infinite; }
html:not([data-theme=dark]) .sf-snow { box-shadow: 0 0 0 1px rgba(140, 165, 200, .5), 0 1px 3px rgba(80, 110, 160, .35); }
.sf-snow.big { width: calc(11px * var(--s, 1)); height: calc(11px * var(--s, 1)); opacity: .7; filter: blur(.5px); }
@keyframes sfFall { 0% { transform: translate(0, -2vh); } 50% { transform: translate(var(--x, 20px), 52vh); } 100% { transform: translate(calc(var(--x, 20px) * -.4), 104vh); } }
.sf-pile { position: absolute; left: 0; right: 0; bottom: -2px; height: 16px; background: radial-gradient(ellipse 30px 12px at 30px 16px, #f4f8ff 98%, transparent) repeat-x; background-size: 60px 16px; opacity: .95; filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, .15)); }
/* 봄 축제: 벚나무 + 튤립 + 꽃잎 */
html[data-season=spring] #season-bg .sb-tint { background: radial-gradient(ellipse 60% 50% at 90% 0%, rgba(247, 170, 200, .26), transparent 70%), radial-gradient(ellipse 60% 50% at 10% 0%, rgba(247, 170, 200, .18), transparent 70%), linear-gradient(180deg, rgba(255, 200, 220, .10), transparent 60%, rgba(140, 200, 120, .10)); }
.sb-sak { width: clamp(170px, 24vw, 380px); top: calc(var(--sb-h, 56px) - 10px) !important; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .25)); }
.sb-sak.flip { transform: scaleX(-1); width: clamp(120px, 15vw, 240px); }
.sb-tul { width: clamp(150px, 18vw, 280px); }
.sf-petal { position: absolute; top: -14px; width: calc(10px * var(--s, 1)); height: calc(7px * var(--s, 1)); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #ffd6e6, #f39bbf); opacity: .85; animation: sfPetal var(--d, 14s) linear var(--dl, 0s) infinite; }
@keyframes sfPetal { 0% { transform: translate(0, -2vh) rotate(var(--r, 0deg)); } 33% { transform: translate(var(--x, 60px), 34vh) rotate(calc(var(--r, 0deg) + 160deg)); } 66% { transform: translate(calc(var(--x, 60px) * -.3), 70vh) rotate(calc(var(--r, 0deg) + 320deg)); } 100% { transform: translate(var(--x, 60px), 104vh) rotate(calc(var(--r, 0deg) + 480deg)); } }
.sf-bf { position: absolute; width: 30px; animation: sfBob var(--d, 8s) ease-in-out var(--dl, 0s) infinite; }
.sp-bf .w { transform-origin: 20px 15px; animation: sfWing .4s ease-in-out infinite alternate; }
@keyframes sfWing { to { transform: scaleX(.3); } }
.sf-gl, .sf-gr { margin-left: -21px; } .sf-cd.sf-gl, .sf-cd.sf-gr { margin-left: -7px; } .sf-bf.sf-gl, .sf-bf.sf-gr { margin-left: -15px; }
.sf-gl { left: calc(var(--st-l, 0px) + var(--g-l, 60px) * var(--gx, .5)); }
.sf-gr { left: calc(var(--st-l, 0px) + var(--st-w, 100vw) - var(--g-r, 60px) * var(--gx, .5)); }
html:not(.gut50) .sf-gl, html:not(.gut50) .sf-gr { display: none; }
/* 장식은 거터가 넓을 때만 크게, 좁은 화면에선 줄인다 */
@media (max-width: 760px) {
  .sf-snow:nth-child(n+20), .sf-petal:nth-child(n+14) { display: none; }
  #season-bg .sb-tl, .sb-tree.sm { display: none; }
}
/* UI에 얹는 장식: 아래 상태 막대 위에 호박·눈·꽃 */
html[data-season] .hud-in { position: relative; }
html[data-season] .hud-in::before { content: ""; position: absolute; pointer-events: none; z-index: 1; }
html[data-season=halloween] .hud-in::before { right: 14px; top: -30px; width: 74px; height: 34px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 34'><ellipse cx='20' cy='22' rx='14' ry='11' fill='%23c9561a'/><ellipse cx='20' cy='22' rx='9' ry='12' fill='%23e8772a'/><path d='M19 11q0-5 4-6' stroke='%2355732c' stroke-width='2.4' fill='none'/><path d='M14 21l3-4 3 4zM21 21l3-4 3 4z' fill='%23ffd25e'/><path d='M13 26q7 5 14 0' stroke='%23ffd25e' stroke-width='1.8' fill='none'/><ellipse cx='50' cy='26' rx='10' ry='7.5' fill='%23c9561a'/><ellipse cx='50' cy='26' rx='6' ry='8' fill='%23e8772a'/><path d='M49 18q0-4 3-5' stroke='%2355732c' stroke-width='2' fill='none'/><rect x='64' y='14' width='5' height='19' rx='1' fill='%23f3ead2'/><path d='M66.5 5c3 4 3 6 0 8-3-2-3-4 0-8z' fill='%23ffcf5a'/></svg>") no-repeat bottom / contain; }
html[data-season=christmas] .hud-in::before { left: 6px; right: 6px; top: -9px; height: 14px; background: radial-gradient(ellipse 22px 9px at 22px 13px, #f4f8ff 98%, transparent) repeat-x; background-size: 44px 14px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
html[data-season=christmas] .hud-in::after { content: ""; position: absolute; pointer-events: none; right: 18px; top: -18px; width: 30px; height: 22px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'><path d='M15 14C9 4 2 6 3 12c5-1 7 1 12 2zM15 14c6-10 13-8 12-2-5-1-7 1-12 2z' fill='%232f7a4a'/><circle cx='12' cy='15' r='3.4' fill='%23d64545'/><circle cx='18' cy='15' r='3.4' fill='%23d64545'/><circle cx='15' cy='18' r='3.4' fill='%23c43a3a'/></svg>") no-repeat center / contain; z-index: 2; }
html[data-season=spring] .hud-in::before { left: 10px; top: -15px; width: 110px; height: 22px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 22'><path d='M2 20q26-12 54-6t52-8' stroke='%235c9a46' stroke-width='2' fill='none'/><g fill='%23f7c3d8'><circle cx='14' cy='14' r='5'/><circle cx='40' cy='12' r='6'/><circle cx='70' cy='14' r='5'/><circle cx='96' cy='8' r='6'/></g><g fill='%23fff'><circle cx='14' cy='14' r='1.6'/><circle cx='40' cy='12' r='1.8'/><circle cx='70' cy='14' r='1.6'/><circle cx='96' cy='8' r='1.8'/></g></svg>") no-repeat center / contain; }
html[data-season=halloween] .statusbar { box-shadow: inset 0 -2px 0 #e8762c99, 0 6px 18px -10px rgba(126, 70, 200, .6); }
html[data-season=christmas] .statusbar { box-shadow: inset 0 -2px 0 #c43a3a99; }
html[data-season=christmas] .statusbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 9px; pointer-events: none; background: radial-gradient(ellipse 16px 7px at 16px 0, #f4f8ff 98%, transparent) repeat-x; background-size: 32px 9px; opacity: .9; }
html[data-season=spring] .statusbar { box-shadow: inset 0 -2px 0 #e88fb899; }
html[data-season=halloween] .ph-txt h1::after { content: " 🎃"; font-size: .7em; }
html[data-season=christmas] .ph-txt h1::after { content: " 🎄"; font-size: .7em; }
html[data-season=spring] .ph-txt h1::after { content: " 🌸"; font-size: .7em; }
/* 계절 빛깔: 강조색을 호박/빨강/분홍으로 (엑셀 스킨은 그대로) */
html:root[data-season=halloween]:not([data-skin=excel]) .shell.shell.shell.shell { --accent: #b85a12; --accent-soft: rgba(184, 90, 18, .12); --gold: #d98a3a; --gold-2: #f2b06a; --on-accent: #fff6ec; }
html:root[data-season=christmas]:not([data-skin=excel]) .shell.shell.shell.shell { --accent: #b3302f; --accent-soft: rgba(179, 48, 47, .1); --on-accent: #fff6f2; }
html:root[data-season=spring]:not([data-skin=excel]) .shell.shell.shell.shell { --accent: #c24f86; --accent-soft: rgba(194, 79, 134, .1); --on-accent: #fff4f9; }
html:root[data-theme=dark][data-season=halloween]:not([data-skin=excel]) .shell.shell.shell.shell { --accent: #f0943e; --accent-soft: rgba(240, 148, 62, .14); --on-accent: #1f1206; }
html:root[data-theme=dark][data-season=christmas]:not([data-skin=excel]) .shell.shell.shell.shell { --accent: #ec6a64; --accent-soft: rgba(236, 106, 100, .14); --gold: #d9b45a; --on-accent: #1f0d0c; }
html:root[data-theme=dark][data-season=spring]:not([data-skin=excel]) .shell.shell.shell.shell { --accent: #f08dbb; --accent-soft: rgba(240, 141, 187, .14); --gold: #e6a9c6; --gold-2: #f6cfe1; --on-accent: #26101b; }
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme=light])[data-season=halloween]:not([data-skin=excel]) .shell.shell.shell.shell { --accent: #f0943e; --accent-soft: rgba(240, 148, 62, .14); --on-accent: #1f1206; }
  html:root:not([data-theme=light])[data-season=christmas]:not([data-skin=excel]) .shell.shell.shell.shell { --accent: #ec6a64; --accent-soft: rgba(236, 106, 100, .14); --on-accent: #1f0d0c; }
  html:root:not([data-theme=light])[data-season=spring]:not([data-skin=excel]) .shell.shell.shell.shell { --accent: #f08dbb; --accent-soft: rgba(240, 141, 187, .14); --on-accent: #26101b; }
}
/* 우승 기숙사 깃발: 위에서 길게 늘어져 살랑 */
.sb-ban { --bw: clamp(30px, calc(min(var(--g-l, 60px), var(--g-r, 60px)) - 10px), 120px); position: absolute; top: calc(var(--sb-h, 56px) - 4px); width: var(--bw); height: min(68vh, 620px); transform-origin: 50% 0; animation: banSway 7s ease-in-out infinite; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .4)); }
.sb-ban.sb-l { left: max(calc(var(--st-l, 0px) + 6px), calc(var(--st-l, 0px) + var(--g-l, 60px) - var(--bw) - 12px)); }
.sb-ban.sb-r { left: min(calc(var(--st-l, 0px) + var(--st-w, 100vw) - var(--g-r, 60px) + 12px), calc(var(--st-l, 0px) + var(--st-w, 100vw) - var(--bw) - 6px)); animation-delay: -3.4s; }
.sb-ban > span { position: absolute; display: block; }
.sb-ban .rod { left: -10px; right: -10px; top: 0; height: 9px; border-radius: 9px; background: linear-gradient(180deg, #f3d488, #a77a2a); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); z-index: 2; }
.sb-ban .rod::before, .sb-ban .rod::after { content: ""; position: absolute; top: -3px; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff1c2, #b8862e); }
.sb-ban .rod::before { left: -6px; } .sb-ban .rod::after { right: -6px; }
.sb-ban .gold, .sb-ban .cloth { left: 0; right: 0; top: 4px; bottom: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 46px), 0 100%); }
.sb-ban .gold { background: linear-gradient(90deg, #a77a2a, #f3d488 50%, #a77a2a); }
.sb-ban .cloth { left: 5px; right: 5px; bottom: 9px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 40px), 0 100%); background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 22%, rgba(255, 255, 255, .08) 50%, transparent 78%, rgba(0, 0, 0, .3)), repeating-linear-gradient(180deg, transparent 0 46px, rgba(0, 0, 0, .06) 46px 48px), var(--hc); }
.sb-ban .inner { position: absolute; left: 0; right: 0; top: 34px; bottom: 64px; display: flex; flex-direction: column; align-items: center; gap: 14px; overflow: hidden; }
.sb-ban .crest { flex: none; width: 70%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .25), transparent 60%), color-mix(in srgb, var(--hc) 70%, #000); box-shadow: 0 0 0 3px #e2be6a, 0 3px 8px rgba(0, 0, 0, .35); font-size: calc(var(--bw) * .36); line-height: 1; }
.sb-ban .nm { writing-mode: vertical-rl; text-orientation: upright; color: #f6e2a8; font-weight: 800; letter-spacing: .25em; font-size: clamp(12px, calc(var(--bw) * .19), 22px); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.sb-ban .sb-line { position: relative; flex: 1; width: 2px; margin: 4px 0; background: linear-gradient(180deg, #e2be6a, rgba(226, 190, 106, .25)); }
.sb-ban .sb-line::before, .sb-ban .sb-line::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; background: #e2be6a; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.sb-ban .sb-line::before { top: 22%; } .sb-ban .sb-line::after { top: 64%; }
.sb-ban .cupmark { font-size: clamp(14px, calc(var(--bw) * .22), 28px); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
#cup-ban.narrow { display: none; }
@keyframes banSway { 0%, 100% { transform: rotate(-.9deg); } 50% { transform: rotate(.9deg); } }
@media (prefers-reduced-motion: reduce) { #season-fx *, #season-bg *, .sb-ban { animation: none !important; } }
/* 배경 음악 고르기 (z179) */
.bgm-pop { width: min(320px, calc(100% - 32px)); }
.bgm-now { gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--accent-soft); }
.bgm-list { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.bgm-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; font-size: 14px; }
.bgm-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.bgm-item.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); font-weight: 700; }
.bgm-item .bgm-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
.bgm-item.on .bgm-dot { background: var(--accent); color: var(--on-accent); }
.bgm-item .bgm-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgl { display: grid; gap: 6px; }
.bgl-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 6px; align-items: center; padding: 6px; border-radius: 10px; border: 1px solid var(--rule); }
.bgl-row.def { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
.bgl-row input { min-width: 0; }
.bgl-n { text-align: center; color: var(--ink-3, var(--ink-2)); font-size: 12px; }
.bgl-btns { display: flex; gap: 2px; } .bgl-btns .iconbtn { width: 30px; height: 30px; font-size: 12px; }
.bgl-btns .iconbtn.on { color: #e2b84f; }
.adm-bgm .grow { flex: 1; }
.adm-look-save.dirty { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.adm-look-save .row { gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .bgl-row { grid-template-columns: 22px minmax(0, 1fr); } .bgl-row .bgl-u { grid-column: 2; } .bgl-btns { grid-column: 2; justify-content: flex-end; } }

/* 의뢰인 그림자 초상화 (z180) */
.npc-pic { display: block; width: 100%; height: 100%; overflow: visible; }
.npc-pic .np-s { fill: #2b2230; }
.npc-pic .np-ghost { fill: #f3efff; opacity: .82; }
.npc-pic .np-cut { fill: var(--np-bg, #d9c39a); }
.npc-pic .np-f { fill: #2b2230; stroke: #f6ead0; }
.npc-pic .np-fl { fill: #fff3d6; }
.npc-pic .np-l { fill: none; stroke: #fff3d6; stroke-width: 1.8; stroke-linecap: round; }
.npc-pic .np-ring { fill: #3d3242; stroke: #f6ead0; stroke-width: 1; }
.npc-pic .np-blush { fill: #f19bb5; opacity: .55; }
.npc-pic.np-ghost .np-fl { fill: #2d2440; } .npc-pic.np-ghost .np-l { stroke: #2d2440; }
.npc-pic .np-fig { transform-origin: 30px 72px; animation: npSway 4.2s ease-in-out var(--dl, 0s) infinite; }
.npc-pic.np-ghost .np-fig { animation: npFloat 3.4s ease-in-out var(--dl, 0s) infinite; }
.npc-pic .np-eyes { transform-box: fill-box; transform-origin: center; animation: npBlink 4.6s linear var(--dl, 0s) infinite; }
.npc-pic .np-emo { font: 800 13px/1 system-ui, sans-serif; fill: #8a5a2b; opacity: 0; animation: npEmo 5.5s ease-in-out var(--dl, 0s) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes npSway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg) translateY(-1px); } }
@keyframes npFloat { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-4px); } }
@keyframes npBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes npEmo { 0%, 55%, 100% { opacity: 0; transform: translateY(4px) scale(.6); } 62%, 88% { opacity: 1; transform: translateY(0) scale(1); } }
.npc-av.has-pic, .pt-av.has-pic { overflow: hidden; padding: 0; background: radial-gradient(circle at 50% 35%, #e8d5ae, #b89868); --np-bg: #c9ad7f; }
.npc-av.has-pic .npc-pic, .pt-av.has-pic .npc-pic { width: 112%; height: 112%; margin-top: 18%; }
.npc-av.has-pic .np-emo, .pt-av.has-pic .np-emo { display: none; }
.dpc-photo .npc-pic { position: absolute; left: -2%; bottom: -4%; width: 104%; height: auto; --np-bg: #b39a70; }
.dpc-photo .np-emo { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .npc-pic * { animation: none !important; } .npc-pic .np-emo { opacity: 1; } }

.chat-new { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); z-index: 3; border: 0; border-radius: 999px; padding: 7px 14px; font-family: inherit; font-weight: 700; font-size: 12.5px; line-height: 1; background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); cursor: pointer; animation: chatNewIn .2s ease-out; }
.chat-new[hidden] { display: none; }
@keyframes chatNewIn { from { opacity: 0; transform: translate(-50%, 6px); } }
.rs-acts { gap: 4px; }
.rs-chg { display: grid; gap: 6px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.rs-chg .chip { border-color: color-mix(in srgb, var(--rc, var(--accent)) 50%, transparent); }
.rs-chg .chip small { font-size: 10.5px; opacity: .7; }
.rel-mine { display: grid; gap: 8px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px dashed var(--rule); }
.rel-mine .rs-rels { display: grid; gap: 8px; }
.got-log { gap: 10px; }
.got-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; }
.got-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px dashed color-mix(in srgb, var(--rule) 70%, transparent); font-size: 13px; }
.got-ico { display: grid; place-items: center; width: 26px; height: 26px; } .got-ico svg, .got-ico .ico { width: 20px; height: 20px; }
.got-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .got-nm b { color: var(--good, #3f9a62); font-size: 12px; }
.got-t { font-size: 11px; color: var(--ink-3, var(--ink-2)); white-space: nowrap; }
.got-more { justify-self: center; }
/* 알림 종류별 색 (z181) */
:root { --nk-fight: #c2483a; --nk-quest: #a8692c; --nk-social: #3a74c0; --nk-grow: #8456c4; --nk-nature: #2f8a55; --nk-school: #1f8585; --nk-money: #a87a12; --nk-misc: var(--ink); }
:root[data-theme="dark"] { --nk-fight: #f08a7c; --nk-quest: #e2a96a; --nk-social: #86b4f0; --nk-grow: #c3a2f2; --nk-nature: #7fd0a0; --nk-school: #6fd0d0; --nk-money: #f0c860; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nk-fight: #f08a7c; --nk-quest: #e2a96a; --nk-social: #86b4f0; --nk-grow: #c3a2f2; --nk-nature: #7fd0a0; --nk-school: #6fd0d0; --nk-money: #f0c860; } }
[class*="nk-"] > .nk-tx { color: var(--nkc, inherit); font-style: normal; }
.nk-fight { --nkc: var(--nk-fight); } .nk-quest { --nkc: var(--nk-quest); } .nk-social { --nkc: var(--nk-social); } .nk-grow { --nkc: var(--nk-grow); } .nk-nature { --nkc: var(--nk-nature); } .nk-school { --nkc: var(--nk-school); } .nk-money { --nkc: var(--nk-money); } .nk-misc { --nkc: inherit; }
.line[class*="nk-"] { padding-left: 8px; } .line[class*="nk-"]:not(.nk-misc) { box-shadow: inset 3px 0 0 var(--nkc); }
.toast[class*="nk-"]:not(.nk-misc) { border-left: 4px solid var(--nkc); }

/* 알림 줄: 시간 칸이 줄바꿈되거나 링크 알림만 어긋나던 것 정리 */
.line .t { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pop .lines .line, .pop .lines .line.note-link { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: start; gap: 10px; width: 100%; padding: 7px 4px 7px 8px; border-radius: 0; border-bottom: 1px solid var(--rule); }
.pop .lines .line .t { padding-top: 1px; font-size: 11.5px; }
.pop .lines .line .nk-tx { word-break: keep-all; overflow-wrap: anywhere; line-height: 1.45; }
.pop .lines .note-link .nl-go { padding-top: 2px; }
.pop .lines .note-link:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* 이름 메뉴 (z183) */
.who-menu { position: fixed; z-index: 70; width: 248px; max-width: calc(100vw - 16px); padding: 6px; border-radius: 14px; background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .55); display: grid; gap: 2px; animation: wmIn .14s ease-out; }
@keyframes wmIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.wm-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; margin-bottom: 2px; border-bottom: 1px solid var(--rule); }
.wm-ava { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--hc); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.wm-id { display: grid; min-width: 0; } .wm-id b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-id b small { font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--on-accent); }
.wm-id > small { font-size: 11.5px; color: var(--ink-3, var(--ink-2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-it { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; cursor: pointer; color: var(--ink); }
.wm-it .ico { width: 16px; height: 16px; color: var(--ink-2); }
.wm-it:hover:not(:disabled), .wm-it.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.wm-it:disabled { opacity: .55; cursor: default; }
.wm-sub { margin-left: auto; color: var(--ink-3, var(--ink-2)); transition: transform .15s; } .wm-it.on .wm-sub { transform: rotate(90deg); }
.wm-why { margin-left: auto; font-size: 11px; color: var(--ink-3, var(--ink-2)); }
.wm-greets { display: flex; justify-content: space-between; gap: 2px; padding: 2px 6px 6px; }
.wm-g { all: unset; box-sizing: border-box; width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px; border-radius: 50%; cursor: pointer; transition: transform .12s, background .12s; }
.wm-g:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); transform: scale(1.12); }
.wm-g.done { opacity: .35; filter: grayscale(.6); }
.wm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

/* 업데이트 소식 (z185) */
.patch { display: grid; gap: 14px; }
.patch-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.patch-head h3 { margin: 2px 0 0; }
.patch-seal { flex: none; width: 46px; height: 46px; display: grid; place-items: center; font-size: 24px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--accent) 30%, var(--sheet)), color-mix(in srgb, var(--accent) 12%, var(--sheet))); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.patch-body { display: grid; gap: 14px; max-height: min(58vh, 520px); overflow-y: auto; padding-right: 4px; }
.patch-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14.5px; }
.patch-sec h4 span { font-size: 17px; }
.patch-sec ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.patch-sec li::marker { color: var(--accent); }
.patch-foot { padding-top: 10px; border-top: 1px solid var(--rule); }

.adm-patch textarea { font-family: var(--f-mono, ui-monospace, monospace); font-size: 13px; line-height: 1.55; }
.pt-old { display: grid; gap: 4px; padding-top: 8px; border-top: 1px dashed var(--rule); }
.pt-row { padding: 6px 2px; border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }

/* 이벤트 카드 (z191) — 깔끔하고 귀엽게 */
.ev-strip { display: grid; gap: 12px; } .ev-strip.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .ev-strip.two { grid-template-columns: 1fr; } }
.ev-card { position: relative; display: grid; gap: 12px; align-content: start; padding: 16px 16px 14px; border-radius: 20px; background: var(--sheet); border: 1px solid color-mix(in srgb, var(--evc, var(--accent)) 28%, var(--rule)); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .55); overflow: hidden; }
.evc-head { display: flex; align-items: center; gap: 11px; }
.evc-head > div { display: grid; gap: 1px; min-width: 0; flex: 1; } .evc-head b { font-size: 15px; letter-spacing: -.01em; } .evc-head small { font-size: 12px; color: var(--ink-3, var(--ink-2)); }
.evc-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 21px; border-radius: 14px; background: color-mix(in srgb, var(--evc, var(--accent)) 16%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--evc, var(--accent)) 30%, transparent); }
.evc-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--evc, var(--accent)) 14%, transparent); color: var(--ink); white-space: nowrap; }
.evc-tag.candy b { font-size: 14px; }
.evc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .evc-foot.end { justify-content: flex-end; }
.evc-note { font-size: 13.5px; color: var(--ink-2); } .evc-note b { color: var(--ink); }
.evc-btn { border-radius: 999px !important; padding-left: 14px; padding-right: 14px; }
/* 출석 */
.att-card { --evc: #e2534a; }
.att-paper { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; padding: 12px; border-radius: 14px; background: repeating-linear-gradient(0deg, transparent 0 15px, color-mix(in srgb, var(--ink) 5%, transparent) 15px 16px), color-mix(in srgb, #f6e9cf 10%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.att-cell { position: relative; height: 66px; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--ink) 22%, transparent); background: color-mix(in srgb, var(--sheet) 70%, transparent); }
.att-cell em { font-style: normal; font-size: 22px; line-height: 1; } .att-cell small { font-size: 11.5px; font-weight: 800; color: var(--ink-2); }
.att-cell.big { border-color: color-mix(in srgb, #e2b84f 70%, transparent); background: color-mix(in srgb, #e2b84f 12%, var(--sheet)); }
.att-cell.next { border: 1.5px solid #e2534a; animation: attPulse 1.6s ease-in-out infinite; }
.att-cell.on { border: 0; background: transparent; }
.att-ink { font-style: normal; display: grid; place-items: center; height: 56px; width: 56px; max-width: 96%; aspect-ratio: 1; border-radius: 50%; font-size: 13px; font-weight: 800; letter-spacing: .05em; color: #c8342c; border: 2px solid #c8342c; box-shadow: inset 0 0 0 2px color-mix(in srgb, #c8342c 25%, transparent); transform: rotate(-12deg); opacity: .88; animation: attStamp .35s cubic-bezier(.2, 1.6, .5, 1); }
:root[data-theme="dark"] .att-ink { color: #ff8a80; border-color: #ff8a80; }
@keyframes attStamp { from { transform: rotate(-12deg) scale(1.6); opacity: 0; } }
@keyframes attPulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, #e2534a 20%, transparent); } }
@media (max-width: 560px) { .att-paper { gap: 5px; padding: 8px; } .att-cell { height: 50px; } .att-ink { height: 42px; width: 42px; } .att-cell em { font-size: 17px; } .att-cell small { font-size: 10px; } .att-ink { font-size: 10.5px; } }
/* 할로윈 */
.sea-halloween { --evc: #e8772a; background: radial-gradient(circle at 100% 0, color-mix(in srgb, #8a4fd0 22%, transparent), transparent 55%), radial-gradient(circle at 0 100%, color-mix(in srgb, #e8772a 16%, transparent), transparent 60%), var(--sheet); }
.sea-deco { position: absolute; right: 14px; top: -2px; font-size: 16px; opacity: .55; animation: seaBat 3.2s ease-in-out infinite; pointer-events: none; }
.sea-card .evc-head { padding-right: 0; }
@keyframes seaBat { 50% { transform: translate(-8px, 6px) rotate(-8deg); } }
.sea-prog { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.sea-bar { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.sea-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f2a14a, #e8772a 60%, #b860e0); }
.sea-src { display: flex; flex-wrap: wrap; gap: 5px; } .sea-src span { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-2); }
.sea-feast { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; background: color-mix(in srgb, #8a4fd0 10%, transparent); border: 1px dashed color-mix(in srgb, #8a4fd0 40%, transparent); }
.sea-feast.open { background: color-mix(in srgb, #e8772a 16%, transparent); border: 1px solid color-mix(in srgb, #e8772a 55%, transparent); }
/* 이벤트 띠 */
.ev-boost { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 999px; font-size: 13.5px; background: linear-gradient(90deg, color-mix(in srgb, #3a8fd0 18%, var(--sheet)), var(--sheet) 70%); border: 1px solid color-mix(in srgb, #3a8fd0 35%, transparent); --evc: #3a8fd0; }
.ev-boost > span:nth-child(2) { flex: 1; }
.evb-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, #3a8fd0 22%, var(--sheet)); font-size: 16px; animation: seaBat 2.8s ease-in-out infinite; }
/* 교환소 */
.ev-shop { display: grid; gap: 14px; --evc: #e8772a; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ev-it { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 14px 10px 12px; border-radius: 16px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--ink) 3%, var(--sheet)); transition: transform .15s, box-shadow .15s; }
.ev-it.can { border-color: color-mix(in srgb, var(--evc) 50%, transparent); box-shadow: 0 6px 16px -12px var(--evc); } .ev-it.can:hover { transform: translateY(-2px); }
.ev-it-ico { width: 46px; height: 46px; display: grid; place-items: center; font-size: 25px; border-radius: 50%; background: color-mix(in srgb, var(--evc) 13%, var(--sheet)); margin-bottom: 2px; }
.ev-it b { font-size: 13px; line-height: 1.35; word-break: keep-all; } .ev-it small { font-size: 11px; color: var(--ink-3, var(--ink-2)); }
.ev-it .btn { margin-top: 4px; border-radius: 999px !important; min-width: 74px; } .ev-it.got { opacity: .55; }
/* 대항전 */
.vs-panel { --evc: var(--accent); }
.vs-bars { display: grid; gap: 8px; }
.vs-bar { display: grid; grid-template-columns: 104px minmax(0, 1fr) 70px; align-items: center; gap: 10px; font-size: 13px; padding: 4px 6px; border-radius: 10px; }
.vs-bar.me { background: color-mix(in srgb, var(--hc) 10%, transparent); } .vs-bar.me .vs-h { font-weight: 800; }
.vs-h { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .vs-emo { font-size: 15px; }
.vs-track { height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.vs-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 70%, #fff), var(--hc)); transition: width .5s; min-width: 3px; }
.vs-n { display: flex; align-items: baseline; justify-content: flex-end; gap: 3px; } .vs-n b { font-size: 14px; } .vs-n small { font-size: 10.5px; color: var(--ink-3, var(--ink-2)); margin-left: 2px; }
.vs-prize { display: flex; gap: 6px; } .vs-prize span { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.vs-yd { font-size: 12px; color: var(--ink-3, var(--ink-2)); text-align: center; }
@media (max-width: 560px) { .vs-bar { grid-template-columns: 84px minmax(0, 1fr) 58px; gap: 6px; } .vs-n small { display: none; } }
.pill.good { background: color-mix(in srgb, var(--good, #3f9a62) 18%, transparent); color: var(--good, #3f9a62); }

.house-picks .hp-n { margin-top: 4px; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--hc) 14%, transparent); color: var(--ink-2); }
.house-picks .hp-n b { color: var(--ink); }

/* 작품 대회 (z194) */
.ct-card { --evc: #8a63c9; }
.ct-thumbs { display: flex; gap: 6px; min-height: 56px; align-items: center; overflow: hidden; }
.ev-strip .ct-card { grid-column: 1 / -1; }
.ct-th { flex: none; }
.ct-th { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.ct-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-modal { display: grid; gap: 14px; --evc: #8a63c9; }
.ct-left { font-size: 13px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, #e2534a 10%, transparent); }
.ct-prize { display: flex; flex-wrap: wrap; gap: 6px; } .ct-prize span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, #e2b84f 14%, transparent); }
.ct-form { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--evc) 45%, transparent); background: color-mix(in srgb, var(--evc) 6%, transparent); }
.ct-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
@media (max-width: 560px) { .ct-form-row { grid-template-columns: 1fr; } }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; max-height: min(56vh, 620px); overflow-y: auto; padding: 4px; }
.ct-it { position: relative; margin: 0; display: grid; gap: 6px; padding: 8px 8px 10px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 8px 18px -14px rgba(0, 0, 0, .6); }
.ct-it.own { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.ct-it.win { border-width: 2px; } .ct-it.w1 { border-color: #e2b84f; box-shadow: 0 0 0 3px color-mix(in srgb, #e2b84f 25%, transparent); } .ct-it.w2 { border-color: #b8c2cc; } .ct-it.w3 { border-color: #c98a5a; }
.ct-img { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ct-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; } .ct-img:hover img { transform: scale(1.04); }
.ct-img.broken { display: grid; place-items: center; border: 1.5px dashed color-mix(in srgb, var(--ink) 18%, transparent); }
.ct-img.broken::after { content: "🎃\A미리보기가 안 돼요\A눌러서 열어 보기"; white-space: pre; text-align: center; line-height: 1.6; font-size: 11.5px; color: var(--ink-3, var(--ink-2)); }
.ct-it figcaption { display: grid; gap: 1px; padding: 0 2px; } .ct-it figcaption b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-it figcaption .small { display: flex; align-items: center; gap: 5px; color: var(--ink-3, var(--ink-2)); } .ct-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hc); }
.ct-heart { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: #e2534a; background: color-mix(in srgb, var(--sheet) 88%, transparent); box-shadow: 0 3px 10px rgba(0, 0, 0, .3); transition: transform .12s; }
.ct-heart:hover:not(:disabled) { transform: scale(1.12); } .ct-heart.on { background: #e2534a; color: #fff; } .ct-heart:disabled { opacity: .4; cursor: default; }
.ct-medal { position: absolute; left: 12px; top: 12px; z-index: 1; font-size: 26px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.ct-votes { font-size: 12px; font-weight: 700; color: #e2534a; padding: 0 2px; }

/* 복수 선택 투표 (z197) */
.pc-opt .rd.sq { border-radius: 4px; position: relative; }
.pc-opt.on .rd.sq { box-shadow: none; background: var(--accent); }
.pc-opt.on .rd.sq::after { content: ''; position: absolute; left: 4px; top: 1.5px; width: 3.5px; height: 7px; border: solid var(--on-accent, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pc-multi-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink-2); }

/* 위치 옆 이벤트 단추 (z197) */
.where:has(.ev-pill) { max-width: 420px; }
.ev-pill { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; padding: 5px 11px 5px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 800; line-height: 1;
  color: #fff4e6; background: linear-gradient(135deg, #e8772a, #b8532a 55%, #6b3aa8); box-shadow: 0 2px 8px -2px color-mix(in srgb, #e8772a 70%, transparent), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .15s; animation: evPillBob 3s ease-in-out infinite; }
.where .ev-pill span { white-space: nowrap; color: inherit; font-size: inherit; overflow: visible; }
.evp-dday { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, #8a4fd0 16%, transparent); font-size: 12px; }
.ev-pill:hover { transform: translateY(-1px) scale(1.03); }
.ev-pill.on { outline: 2px solid color-mix(in srgb, #e8772a 55%, transparent); outline-offset: 2px; }
.ev-pill:not(.ev-halloween) { background: linear-gradient(135deg, #8a63c9, #5a4bb0); }
@keyframes evPillBob { 50% { transform: translateY(-1.5px); } }
@media (max-width: 700px) { .where .ev-pill span { display: none; } .ev-pill { padding: 6px 7px; font-size: 14px; } .where:has(.ev-pill) { max-width: 170px; } }

/* 계절 카드 속 전시장 한 줄 */
.sea-ct { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 12px; font-size: 12.5px;
  background: color-mix(in srgb, #8a63c9 10%, transparent); border: 1px solid color-mix(in srgb, #8a63c9 30%, transparent); transition: background .15s; }
.sea-ct > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sea-ct:hover { background: color-mix(in srgb, #8a63c9 18%, transparent); }
.sea-ct-go { flex: none; font-weight: 800; color: #7a4fc0; }
:root[data-theme="dark"] .sea-ct-go { color: #c9a8ff; }

/* 이벤트 페이지 — 할로윈 밤 */
.evp { display: grid; gap: 14px; --evc: #e8772a; }
.evp-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 24px; color: #fbeedd;
  background: radial-gradient(circle at 88% 12%, rgba(255, 214, 140, .35) 0 34px, transparent 36px), radial-gradient(ellipse at 20% 120%, rgba(232, 119, 42, .45), transparent 60%), linear-gradient(160deg, #2a1745, #3b1d55 50%, #1d1030);
  box-shadow: 0 10px 30px -14px #2a1745; }
.evp-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 26px; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.25) 18px 20px), linear-gradient(transparent, rgba(0,0,0,.35)); pointer-events: none; }
.evp-hero h1 { margin: 2px 0 6px; font-family: var(--f-display); font-size: 26px; color: #fff3df; letter-spacing: -.01em; }
.evp-hero p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #e9d6c0; word-break: keep-all; max-width: 560px; }
.evp-hero .eyebrow { color: #f2a14a; }
.evp-big { flex: none; width: 104px; display: grid; place-items: center; font-size: 64px; filter: drop-shadow(0 6px 14px rgba(232, 119, 42, .55)); animation: evpGlow 3.4s ease-in-out infinite; }
.evp-big svg { width: 104px; height: auto; }
.evp-ht { display: grid; min-width: 0; position: relative; z-index: 1; }
.evp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.evp-chips .evc-tag { background: rgba(255, 255, 255, .12); color: #fff3df; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); text-decoration: none; }
.evp-chips a.evc-tag:hover { background: rgba(255, 255, 255, .22); }
.evp-bats { position: absolute; right: 22px; top: 16px; display: flex; gap: 14px; font-size: 15px; opacity: .7; pointer-events: none; }
.evp-bats i { font-style: normal; animation: seaBat 3.2s ease-in-out infinite; } .evp-bats i:nth-child(2) { animation-delay: -1.1s; font-size: 11px; } .evp-bats i:nth-child(3) { animation-delay: -2.2s; font-size: 13px; }
@keyframes evpGlow { 50% { transform: translateY(-3px) rotate(-2deg); filter: drop-shadow(0 8px 20px rgba(232, 119, 42, .8)); } }
.evp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.evp-sec { display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: 20px; background: var(--sheet); border: 1px solid color-mix(in srgb, var(--evc) 26%, var(--rule)); }
.evp-sh { display: flex; align-items: center; gap: 8px; } .evp-sh > span { font-size: 18px; } .evp-sh b { font-size: 15.5px; } .evp-sh small { margin-left: auto; font-size: 12px; color: var(--ink-3, var(--ink-2)); }
.evp-src { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.evp-src span { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; background: color-mix(in srgb, #e8772a 7%, transparent); }
.evp-src em { font-style: normal; font-size: 18px; } .evp-src b { font-size: 12.5px; } .evp-src small { font-size: 11px; color: var(--ink-3, var(--ink-2)); }
.evp-feast { background: radial-gradient(circle at 100% 0, color-mix(in srgb, #8a4fd0 14%, transparent), transparent 60%), var(--sheet); }
.evp-feast.open { border-color: #e8772a; box-shadow: 0 0 0 3px color-mix(in srgb, #e8772a 18%, transparent); }
.evp-gal { --evc: #8a63c9; background: linear-gradient(180deg, color-mix(in srgb, #8a63c9 8%, var(--sheet)), var(--sheet) 120px); }
.evp-gal .ct-grid { max-height: none; overflow: visible; }
.evp .ev-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width: 560px) { .evp-hero { flex-direction: column; text-align: center; padding: 20px 16px; } .evp-chips { justify-content: center; } .evp-big, .evp-big svg { width: 84px; } .evp-hero h1 { font-size: 22px; } }

.ct-form-mid { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; }
.ct-prev { position: relative; width: 112px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; display: grid; place-items: center; text-align: center; padding: 6px; box-sizing: border-box; font-size: 11px; line-height: 1.45; color: var(--ink-3, var(--ink-2)); border: 1.5px dashed color-mix(in srgb, var(--ink) 18%, transparent); background: color-mix(in srgb, var(--ink) 4%, transparent); word-break: keep-all; }
.ct-prev.ok { padding: 0; border: 2px solid #3f9a62; }
.ct-prev.ok img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ct-prev-ok { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(32, 110, 66, .85); }
.ct-prev.bad { border-color: #d64545; color: var(--ink-2); background: color-mix(in srgb, #d64545 7%, transparent); }
.ct-prev.wait span { animation: attPulse 1.2s ease-in-out infinite; }
.ct-how { line-height: 1.65; }
@media (max-width: 560px) { .ct-form-mid { grid-template-columns: 1fr; justify-items: center; } .ct-prev { width: 150px; } .ct-how { text-align: left; justify-self: stretch; } }

.vs-cfg { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.vs-cfg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .vs-cfg-row select { width: auto; max-width: 100%; flex: 1 1 220px; }
.vs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); color: var(--ink-3, var(--ink-2)); transition: background .15s; }
.vs-chip.on { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); font-weight: 700; }
.vs-chip:hover { border-color: var(--accent); }

/* 왼쪽 메뉴: 메뉴·내 프로필은 고정, 접속 중 목록만 스크롤 (z203) */
@media (min-width: 901px) {
  .rail { overflow: hidden !important; height: 100vh; height: 100dvh; }
  .rail > .nav, .rail > .rail-brand, .rail > .me { flex: none; }
  .rail .online-rail { flex: 1 1 0 !important; min-height: 56px; overflow: hidden !important; display: flex !important; flex-direction: column; }
  .rail .online-rail .or-head { flex: none; }
  .rail .online-rail .or-names { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; align-items: start !important; grid-auto-rows: max-content; padding-bottom: 6px; scrollbar-width: thin; }
  .rail .online-rail .or-n { flex-shrink: 0; min-height: max-content; }
  .rail .me { margin-top: 0 !important; }
}
/* 화면이 아주 낮으면(메뉴가 다 안 들어가면) 예전처럼 메뉴 전체가 스크롤 */
@media (min-width: 901px) and (max-height: 620px) {
  .rail { overflow-y: auto !important; }
  .rail .online-rail { flex: none !important; max-height: 180px; }
}

.vs-fair { font-size: 11.5px; color: var(--ink-3, var(--ink-2)); } .vs-fair b { color: var(--ink-2); }

.grad-gets { margin: 6px 0 10px; padding-left: 18px; display: grid; gap: 3px; line-height: 1.5; } .grad-gets li::marker { color: var(--accent); }

.ab-panel { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; background: radial-gradient(circle at 0 50%, color-mix(in srgb, #e2b84f 14%, transparent), transparent 40%), var(--sheet); }
.ab-box { font-size: 34px; line-height: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, #e2b84f 16%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #e2b84f 40%, transparent); animation: abWiggle 3.2s ease-in-out infinite; }
.ab-box.open { animation: abPop .6s ease-out; } .ab-box.rare { box-shadow: 0 0 0 3px color-mix(in srgb, #b860e0 45%, transparent), 0 0 18px color-mix(in srgb, #e2b84f 60%, transparent); }
.ab-t { display: grid; gap: 3px; min-width: 0; } .ab-t b { font-size: 15px; }
.ab-got { justify-self: start; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, #e2b84f 18%, transparent); }
.ab-got.rare { background: linear-gradient(90deg, color-mix(in srgb, #e2b84f 30%, transparent), color-mix(in srgb, #b860e0 25%, transparent)); }
@keyframes abWiggle { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-8deg); } 94% { transform: rotate(7deg); } }
@keyframes abPop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } }
@media (max-width: 560px) { .ab-panel { grid-template-columns: auto minmax(0, 1fr); } .ab-panel > .btn { grid-column: 1 / -1; } }

/* 새 공지 띠: 위쪽 표시줄(장소·탭) 바로 아래에 붙어서 흘러간다 (z209) */
#noticebar:has(.ticker) { position: sticky !important; top: calc(var(--sb-h, 56px) + env(safe-area-inset-top, 0px)) !important; left: auto !important; right: auto !important; z-index: 19 !important; pointer-events: auto !important; }
:root[data-hud="top"] #noticebar:has(.ticker) { position: relative !important; top: auto !important; }
#noticebar .noticebar.ticker { box-shadow: 0 3px 10px rgba(0, 0, 0, .18); animation: ntDrop .4s ease-out; }
@keyframes ntDrop { from { opacity: 0; transform: translateY(-8px); } }

/* 채팅 속 운영진 공지: 제목이 잘 보이게 */
.notice-msg .nm-head { gap: 6px !important; color: var(--ink) !important; font-size: 12.5px; }
.notice-msg .nm-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border-radius: 999px; background: #b7800f; color: #fff; font-weight: 800; letter-spacing: .01em; box-shadow: 0 1px 0 rgba(0, 0, 0, .15); }
.notice-msg .nm-pill .ico { width: 13px !important; height: 13px !important; }
.notice-msg .nm-tag { font-size: 13px; font-weight: 800; color: var(--ink); }
.notice-msg .nm-text { color: var(--ink); font-size: 13.5px !important; }
:root[data-theme="dark"] .notice-msg .nm-pill { background: #e2b94a; color: #2a1a00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .notice-msg .nm-pill { background: #e2b94a; color: #2a1a00; } }

.evp .ev-grid, .ev-shop .ev-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .evp .ev-grid, .ev-shop .ev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .evp .ev-grid, .ev-shop .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

.evp .ev-it, .ev-shop .ev-it { grid-template-rows: auto auto 1fr auto; align-items: start; height: 100%; box-sizing: border-box; }
.evp .ev-it .btn, .ev-shop .ev-it .btn { align-self: end; }

.ir-cols { display: grid; gap: 10px; margin: 6px 0 8px; } .ir-cols.two { grid-template-columns: minmax(0, 1fr) minmax(200px, 250px); align-items: start; }
.ir-cols .ir-list { grid-template-columns: 1fr !important; }
.ir-live { display: grid; gap: 5px; padding: 9px 11px; border-radius: 12px; font-size: 11.5px; background: linear-gradient(135deg, color-mix(in srgb, #e2b84f 15%, var(--sheet)), color-mix(in srgb, var(--accent) 7%, var(--sheet))); box-shadow: inset 0 0 0 1px color-mix(in srgb, #e2b84f 36%, transparent); }
.ir-lh { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .ir-lh .small { font-weight: 700; font-size: 11.5px; }
.ir-big { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; } .ir-big b { font-size: 17px; line-height: 1; }
.ir-m { display: grid; grid-template-columns: auto minmax(40px, 1fr) 36px; white-space: nowrap; align-items: center; gap: 6px; color: var(--ink-2); } .ir-m > b { text-align: right; font-size: 11.5px; color: var(--ink); }
.ir-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.ir-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #e2b84f, #f0d27a); transition: width .5s; }
.ir-bar.sup i { background: linear-gradient(90deg, #5fae7a, #9bd69b); }
.ir-hint { font-size: 10.5px; color: var(--ink-3, var(--ink-2)); }
@media (max-width: 640px) { .ir-cols.two { grid-template-columns: 1fr; } }

.htab { position: relative; } .htab-dot { position: absolute; top: 3px; right: 4px; min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box; border-radius: 99px; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--bad, #d64545); box-shadow: 0 0 0 2px var(--sheet); animation: attPulse 1.6s ease-in-out infinite; }

.az-log .az-turn { margin-top: 6px; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent); }

/* 패트로누스 (z217) — 은빛 도형 애니메이션 */
.ptr { display: block; overflow: visible; }
.ptr .pl { fill: none !important; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ptr .pl.thick { stroke-width: 6; }
.ptr .ptr-body { stroke-width: .6; } .ptr .ptr-body .pe { fill: #3b5f93; stroke: none; }
.ptr .ptr-shine { mix-blend-mode: screen; stroke-width: .6; } .ptr .ptr-shine .pe { fill: none; }
.ptr .ptr-fig { transform-origin: 60px 60px; animation: ptrBob 4.2s ease-in-out infinite; }
.ptr .ptr-aura { animation: ptrBreath 3.6s ease-in-out infinite; transform-origin: 60px 56px; }
.ptr .ptr-mist circle { fill: #d6eaff; opacity: 0; r: 3.2; transform-box: fill-box; transform-origin: center; animation: ptrMist 5s ease-in-out infinite; }
.ptr .ptr-ground { fill: #bcdcff; opacity: .18; filter: blur(1.5px); }
.ptr .ptr-rays { transform-origin: 60px 56px; animation: ptrSpin 28s linear infinite; } .ptr .ptr-rays path { fill: #dcefff; opacity: .1; }
.ptr .ptr-sp { fill: #fff; transform-box: fill-box; transform-origin: center; animation: ptrTwinkle 2.8s ease-in-out infinite; }
.ptr-s1 .ptr-fig { opacity: .1; filter: blur(3.5px); } .ptr-s1 .ptr-mist circle { animation-duration: 3.6s; } .ptr-s1 .ptr-aura { opacity: .55; }
.ptr-s2 .ptr-fig { opacity: .42; filter: blur(1.6px); } .ptr-s2 .ptr-aura { opacity: .75; }
.ptr-s3 .ptr-fig { opacity: .88; filter: blur(.35px) drop-shadow(0 0 3px #cfe6ff); }
.ptr-s4 .ptr-fig { opacity: 1; filter: drop-shadow(0 0 3px #eef7ff) drop-shadow(0 0 10px #8ec2ff); animation: ptrBob 3.4s ease-in-out infinite, ptrPulse 2.4s ease-in-out infinite; }
.ptr-s4 .ptr-ground { opacity: .4; }
.ptr.ptr-ghost .ptr-fig { opacity: .05; }
@keyframes ptrBob { 50% { transform: translateY(-3px); } }
@keyframes ptrBreath { 50% { transform: scale(1.08); opacity: .9; } }
@keyframes ptrMist { 0% { opacity: 0; transform: translate(0, 4px) scale(.6); } 40% { opacity: .22; } 100% { opacity: 0; transform: translate(4px, -14px) scale(1.4); } }
@keyframes ptrSpin { to { transform: rotate(360deg); } }
@keyframes ptrTwinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes ptrPulse { 50% { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 18px #9fd0ff); } }
@media (prefers-reduced-motion: reduce) { .ptr * { animation: none !important; } }
.ptr-stage { flex: none; display: grid; place-items: center; padding: 8px; overflow: hidden; border-radius: 18px; background: radial-gradient(ellipse at 50% 60%, #1d3358, #0e1a30 70%); box-shadow: inset 0 0 0 1px rgba(160, 200, 255, .2), inset 0 -20px 40px rgba(0, 0, 0, .35); }
.ptr-panel { display: flex !important; align-items: center; gap: 16px; }
.ptr-t { display: grid; gap: 4px; min-width: 0; } .ptr-t > b { font-size: 18px; font-family: var(--f-display); }
.ptr-sn { font-size: 13px; font-weight: 700; color: #6f9fdc; } :root[data-theme="dark"] .ptr-sn { color: #a9cdfa; }
.ptr-dots { display: flex; gap: 5px; } .ptr-dots i { width: 22px; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 12%, transparent); } .ptr-dots i.on { background: linear-gradient(90deg, #bcdcff, #7fb2f0); box-shadow: 0 0 6px #9fc8ff; }
.ptr-panel.st4 { background: radial-gradient(circle at 15% 50%, color-mix(in srgb, #8ec2ff 14%, transparent), transparent 55%), var(--sheet); }
.ptr-shop-in { display: flex; gap: 16px; align-items: flex-start; margin-top: 8px; }
.ptr-forms { display: flex; flex-wrap: wrap; gap: 5px; }
.ptr-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ptr-steps span { display: grid; gap: 1px; padding: 7px 8px; border-radius: 10px; font-size: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.ptr-steps b { font-size: 11px; color: var(--ink-3, var(--ink-2)); } .ptr-steps small { font-size: 11px; color: var(--ink-3, var(--ink-2)); }
.ptr-steps .done { background: color-mix(in srgb, #8ec2ff 16%, transparent); } .ptr-steps .done small { color: #5f9de0; }
.ptr-steps .next { box-shadow: inset 0 0 0 1.5px #8ec2ff; }
.ptr-done { font-weight: 700; color: #6f9fdc; }
@media (max-width: 640px) { .ptr-shop-in, .ptr-panel { flex-direction: column; align-items: stretch !important; } .ptr-stage { align-self: center; } .ptr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


.ptr-cus-chip { border-style: dashed !important; } .ptr-cus { display: grid; gap: 4px; } .ptr-cus .row input { flex: 1; min-width: 0; }

.sneak-tunnel { margin: 6px 0 0; padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, #c98a4b 12%, transparent); color: var(--ink-2); }

.floo-why { flex-basis: 100%; font-size: 12.5px; } .floo-why summary { cursor: pointer; color: var(--ink-2); font-weight: 700; list-style: none; } .floo-why summary::-webkit-details-marker { display: none; }
.floo-why[open] summary { margin-bottom: 4px; } .floo-why span { display: block; padding: 8px 10px; border-radius: 10px; line-height: 1.6; color: var(--ink-2); background: color-mix(in srgb, #e8772a 9%, transparent); }

/* 요리하기: 그림과 설명 간격 (z225) */
.cook-lab .bl-desk { grid-template-columns: 230px minmax(0, 1fr) !important; column-gap: 22px !important; align-items: center !important; }
.cook-lab .bl-desk > .kpan { width: 100%; max-width: 230px; height: auto; justify-self: center; align-self: center; overflow: hidden; }
.cook-lab .bl-info { padding-left: 4px; border-left: 1px dashed #ecd5b4; padding-left: 22px; }
@media (max-width: 700px) { .cook-lab .bl-desk { grid-template-columns: 1fr !important; row-gap: 12px; } .cook-lab .bl-info { border-left: 0; padding-left: 0; border-top: 1px dashed #ecd5b4; padding-top: 12px; } .cook-lab .bl-desk > .kpan { max-width: 220px; } }

/* 프로필: 캐릭터 소개 + 패트로누스 나란히 · 능력치 + 숙련도 나란히 (z227) */
.prof-pair { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 12px; align-items: stretch; }
.prof-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.prof-stats > .panel { margin: 0; }
.pa-kv { grid-template-columns: repeat(2, auto minmax(0, 1fr)) !important; }
@media (max-width: 700px) { .prof-pair, .prof-stats { grid-template-columns: 1fr; } }
.ptr-panel.compact { flex-direction: column !important; align-items: center !important; text-align: center; gap: 8px; padding: 12px;
  background: linear-gradient(170deg, color-mix(in srgb, #8ec2ff 20%, var(--sheet)), color-mix(in srgb, #3b5f93 12%, var(--sheet))) !important; border-color: color-mix(in srgb, #8ec2ff 45%, transparent) !important; }
.ptr-panel.compact .ptr-t { justify-items: center; gap: 2px; } .ptr-panel.compact .ptr-t > b { font-size: 16px; } .ptr-panel.compact .ptr-t .small.faint { display: none; }
.ptr-panel.compact .ptr-stage { padding: 4px; border-radius: 14px; }
.ptr-panel .ptr-t .eyebrow { color: #5f8fd0; } :root[data-theme="dark"] .ptr-panel .ptr-t .eyebrow { color: #a9cdfa; }
/* 전투 준비물: 이모지 크게 */
.kit-item .ki-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--sheet)); }
.kit-item .ki-emo { font-size: 28px; line-height: 1; }
.kit-item .ki-main b { font-size: 14px; } .kit-item .ki-fx { font-size: 12px; }
.ks-head .ks-emo { font-size: 26px !important; }
/* 내 능력치 칸: 높이와 줄 맞추기 */
.attr-grid { grid-auto-rows: 1fr; }
.attr-cell { align-content: stretch !important; grid-template-rows: minmax(0, 1fr) auto; }
.attr-cell > .use-more { display: grid; grid-template-rows: auto minmax(2.9em, auto) auto auto; align-content: start; justify-items: stretch; gap: 2px; } .attr-cell > .use-more > .row { width: 100%; }
.attr-cell > .btn { align-self: end; }

/* 패트로누스 작은 칸: 더 화려하게 (z228) */
.ptr-panel.compact { position: relative; overflow: hidden; isolation: isolate; color: #eaf4ff;
  background: radial-gradient(ellipse at 50% 0%, rgba(160, 205, 255, .35), transparent 60%), linear-gradient(170deg, #1d3358, #0f1d36 70%, #0a1428) !important; border: 0 !important;
  box-shadow: 0 0 0 1px rgba(160, 205, 255, .35), 0 8px 24px -10px rgba(110, 170, 255, .55) !important; }
.ptr-panel.compact::before { content: ''; position: absolute; inset: -60%; z-index: -1; background: conic-gradient(from 0deg, transparent 0 60%, rgba(200, 230, 255, .95) 75%, #fff 78%, transparent 90%); animation: ptrSpin 5s linear infinite; }
.ptr-panel.compact::after { content: ''; position: absolute; inset: 2.5px; z-index: -1; border-radius: inherit; background: radial-gradient(ellipse at 50% 0%, rgba(160, 205, 255, .28), transparent 60%), linear-gradient(170deg, #1d3358, #0f1d36 70%, #0a1428),
  radial-gradient(circle at 12% 30%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 85% 18%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 70% 80%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 25% 85%, #fff 0 1px, transparent 1.5px); }
.ptr-panel.compact .ptr-stage { background: radial-gradient(ellipse at 50% 60%, #27457a, #0e1a30 72%); box-shadow: inset 0 0 0 1px rgba(170, 210, 255, .3), 0 0 20px -6px rgba(150, 200, 255, .8); }
.ptr-panel.compact .ptr-t .eyebrow { color: #a9cdfa !important; letter-spacing: .08em; }
.ptr-panel.compact .ptr-t > b { font-size: 18px !important; background: linear-gradient(90deg, #cfe6ff, #ffffff, #9fc8ff, #ffffff, #cfe6ff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ptrText 4s linear infinite; text-shadow: none; }
.ptr-panel.compact .ptr-sn { color: #bfe0ff !important; text-shadow: 0 0 8px rgba(150, 200, 255, .8); }
.ptr-panel.compact .ptr-dots i.on { box-shadow: 0 0 8px #bfe0ff, 0 0 2px #fff; }
.ptr-panel.compact .ptr-dots i { background: rgba(255, 255, 255, .15); } .ptr-panel.compact .ptr-dots i.on { background: linear-gradient(90deg, #dff0ff, #8ec2ff); }
@keyframes ptrText { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ptr-panel.compact::before, .ptr-panel.compact .ptr-t > b { animation: none; } }

/* 게시판: 지난 모임 접기 */
.bd-past { margin: 4px 0 12px; border: 1px dashed var(--line, #ddd); border-radius: 14px; background: var(--sheet-2, #f6f4ef); }
.bd-past-head { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--ink-2, #555); }
.bd-past-head:focus-visible { outline: 2px solid var(--accent, #6b8cff); outline-offset: 2px; border-radius: 14px; }
.bd-past-head > .ico { width: 15px; height: 15px; opacity: .7; }
.bd-past-head .num { font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--sheet, #fff); color: var(--ink-3, #888); }
.bd-past-head .small { margin-left: auto; }
.bd-past.open .bd-past-head .bd-chev { transform: none; }
.bd-past > .bd-list { margin: 0; padding: 0 10px 10px; }

/* 프로필: 패트로누스 한 줄 전체 (가로형) */
.ptr-panel.compact { flex-direction: row !important; align-items: center !important; justify-content: flex-start; text-align: left; gap: 22px; padding: 16px 22px; margin: 0 0 12px; min-height: 170px; }
.ptr-panel.compact .ptr-t { justify-items: start; gap: 4px; position: relative; z-index: 1; }
.ptr-panel.compact .ptr-t > b { font-size: 24px !important; letter-spacing: .02em; }
.ptr-panel.compact .ptr-t .small.faint { display: block; color: #b8cfe9 !important; max-width: 44ch; margin-top: 4px; }
.ptr-panel.compact .ptr-dots i { width: 26px; }
.ptr-panel.compact .ptr-stage { flex: none; position: relative; z-index: 1; }
.ptr-panel.compact::before { inset: auto; left: 50%; top: 50%; width: max(140%, 520px); aspect-ratio: 1; margin: calc(max(140%, 520px) / -2) 0 0 calc(max(140%, 520px) / -2); }
@media (max-width: 640px) { .ptr-panel.compact { flex-direction: column !important; text-align: center; padding: 14px; } .ptr-panel.compact .ptr-t { justify-items: center; } }

/* 프로필: 두상 아래 패트로누스 버튼 · 눌러서 창으로 */
.prof-ava-col { flex: none; display: grid; justify-items: center; gap: 8px; align-self: flex-start; }
.ptr-btn { font: inherit; font-size: 12px; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--rule); background: var(--sheet-2); color: var(--ink-3, #999); cursor: default; white-space: nowrap; opacity: .5; }
.ptr-btn.on { opacity: 1; cursor: pointer; color: #eaf4ff; border-color: rgba(170, 210, 255, .6); background: linear-gradient(160deg, #2a4a7c, #142645); box-shadow: 0 0 10px -2px rgba(140, 195, 255, .75); transition: transform .15s, box-shadow .15s; }
.ptr-btn.on:hover { transform: translateY(-1px); box-shadow: 0 0 16px -2px rgba(160, 210, 255, .95); }
.ptr-pop { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(6, 12, 26, .62); backdrop-filter: blur(3px); animation: ptrPopIn .2s ease; }
.ptr-pop-in { display: grid; justify-items: center; gap: 10px; width: min(340px, 100%); }
.ptr-pop .ptr-panel.compact { flex-direction: column !important; text-align: center; width: 100%; margin: 0; padding: 22px 18px; }
.ptr-pop .ptr-panel.compact .ptr-t { justify-items: center; }
.ptr-pop .ptr-panel.compact .ptr-stage svg, .ptr-pop .ptr-panel.compact .ptr-stage img { width: 168px; height: 168px; }
.ptr-pop-x { color: #dbe9ff !important; }
@keyframes ptrPopIn { from { opacity: 0; transform: scale(.97); } }
.char-box .kw-chips { margin: 8px 0 2px; }
.char-box .prof-kv { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--rule); }
@media (max-width: 640px) { .prof-ava-col { align-self: center; } }

/* 대화 도구: 이모티콘 · 굴리기 */
.chat-input { position: relative; align-items: center; }
.ct-tool { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule); background: var(--sheet-2); color: var(--ink-2, var(--ink)); cursor: pointer; display: grid; place-items: center; padding: 0; font: inherit; }
.ct-tool span { font-size: 20px; line-height: 1; transition: transform .18s; margin-top: -1px; }
.ct-tool:hover:not(:disabled) { border-color: color-mix(in srgb, var(--hc-me, var(--accent)) 55%, var(--rule)); }
.ct-tool.on { background: color-mix(in srgb, var(--hc-me, var(--accent)) 16%, var(--sheet)); border-color: color-mix(in srgb, var(--hc-me, var(--accent)) 55%, var(--rule)); }
.ct-tool.on span { transform: rotate(45deg); }
.ct-tool:disabled { opacity: .45; cursor: default; }
.ct-pop { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); z-index: 30; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); padding: 8px; display: grid; gap: 8px; animation: ctIn .15s ease; }
.ct-pop[hidden] { display: none; }
@keyframes ctIn { from { opacity: 0; transform: translateY(4px); } }
.ct-tabs { display: flex; gap: 4px; }
.ct-tabs button { flex: 1; font: inherit; font-size: 12.5px; padding: 5px 0; border-radius: 8px; border: 0; background: none; color: var(--ink-3, #888); cursor: pointer; }
.ct-tabs button.on { background: var(--sheet-2); color: var(--ink); font-weight: 600; }
.ct-emo { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; max-height: 170px; overflow-y: auto; }
.ct-emo button { font-size: 20px; line-height: 1; padding: 6px 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.ct-emo button:hover { background: var(--sheet-2); transform: scale(1.12); }
.ct-roll { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.ct-roll[hidden], .ct-emo[hidden] { display: none; }
.ct-roll button { font: inherit; display: grid; justify-items: center; gap: 0; padding: 6px 2px; border-radius: 10px; border: 1px solid var(--rule); background: var(--sheet-2); color: var(--ink); cursor: pointer; }
.ct-roll button:hover { border-color: color-mix(in srgb, var(--hc-me, var(--accent)) 55%, var(--rule)); transform: translateY(-1px); }
.ct-roll .ct-ic { font-size: 18px; } .ct-roll b { font-size: 12px; white-space: nowrap; } .ct-roll small { font-size: 10.5px; color: var(--ink-3, #888); }
.ct-note { grid-column: 1 / -1; text-align: center; }

/* 아즈카반: 패트로누스 불러내기 상자 (은빛 밤하늘) */
.ptr-shop { position: relative; overflow: hidden; color: #e6f0ff; border: 0 !important; isolation: isolate;
  background: radial-gradient(ellipse at 18% 0%, rgba(150, 200, 255, .22), transparent 55%), radial-gradient(circle at 8% 40%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 62% 12%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 92% 70%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 40% 92%, #fff 0 1px, transparent 1.5px), linear-gradient(165deg, #1c3156, #0e1b33 65%, #0a1328) !important;
  box-shadow: 0 0 0 1px rgba(160, 205, 255, .3), 0 10px 30px -14px rgba(110, 170, 255, .6) !important; }
.ptr-shop .ps-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptr-shop .ps-head > b { font-size: 16px; color: #f2f7ff; letter-spacing: .01em; }
.ps-coin { font-size: 12.5px; padding: 4px 11px; border-radius: 99px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(170, 210, 255, .3); color: #c9dcf5; }
.ps-coin b { color: #fff; margin-left: 2px; }
.ptr-shop .ptr-shop-in { gap: 22px; margin-top: 14px; }
.ps-left { display: grid; justify-items: center; gap: 2px; flex: none; }
.ptr-shop .ptr-stage { box-shadow: inset 0 0 0 1px rgba(170, 210, 255, .3), 0 0 24px -6px rgba(150, 200, 255, .8); margin-bottom: 6px; }
.ps-name { font-size: 17px; color: #fff; text-shadow: 0 0 10px rgba(160, 210, 255, .8); }
.ps-sn { font-size: 12px; color: #a9cdfa; }
.ptr-shop .ptr-t { display: grid; gap: 8px; flex: 1; min-width: 0; }
.ps-lead { margin: 0; font-size: 13px; color: #c3d6ef; line-height: 1.55; }
.ps-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: #9fc6f5; margin-top: 4px; display: flex; gap: 8px; align-items: baseline; }
.ps-label small { font-weight: 400; letter-spacing: 0; color: #7f9cc2; }
.ptr-shop .ptr-forms { gap: 6px; }
.ps-form { font: inherit; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 8px; border-radius: 99px; cursor: pointer; color: #dbe8fa; background: rgba(255, 255, 255, .06); border: 1px solid rgba(170, 210, 255, .22); transition: background .15s, border-color .15s, box-shadow .15s; }
.ps-form span { font-size: 15px; }
.ps-form small { font-size: 10.5px; color: #9fb8d8; margin-left: 2px; }
.ps-form:hover { background: rgba(255, 255, 255, .12); border-color: rgba(190, 225, 255, .5); }
.ps-form.on { color: #0f1d36; font-weight: 700; border-color: transparent; background: linear-gradient(135deg, #f2f8ff, #b9d9ff); box-shadow: 0 0 12px -2px rgba(170, 215, 255, .9); }
.ps-form.on small { color: #3d5f8c; }
.ps-form.ptr-cus-chip { border-style: dashed !important; }
.ps-form.ptr-cus-chip.on { border-style: solid !important; }
.ptr-shop .ptr-cus { gap: 6px; }
.ps-url { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 12px; background: rgba(5, 12, 26, .55); box-shadow: inset 0 0 0 1px rgba(170, 210, 255, .3); transition: box-shadow .15s; }
.ps-url:focus-within { box-shadow: inset 0 0 0 1.5px #a9d0ff, 0 0 14px -4px rgba(160, 210, 255, .9); }
.ps-url-ic { font-size: 14px; opacity: .8; }
.ps-url input { flex: 1; min-width: 0; border: 0 !important; background: none !important; box-shadow: none !important; color: #eef5ff; font: inherit; font-size: 13px; padding: 7px 4px; outline: none; }
.ps-url input::placeholder { color: #7f98bb; }
.ps-url-btn { font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 9px; border: 0; cursor: pointer; color: #0f1d36; background: linear-gradient(135deg, #f2f8ff, #b9d9ff); }
.ps-url-btn:hover { box-shadow: 0 0 12px -2px rgba(170, 215, 255, .9); }
.ps-hint { font-size: 11.5px; color: #8fa9cb; line-height: 1.5; }
.ptr-shop .ptr-steps { gap: 0; position: relative; padding: 2px 0; }
.ptr-shop .ptr-steps span, .ptr-shop .ptr-steps span.next { position: relative; display: grid; background: none !important; border: 0 !important; padding: 0 4px; justify-items: center; text-align: center; gap: 3px; border-radius: 0; box-shadow: none !important; }
.ptr-shop .ptr-steps span::before { content: ''; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: rgba(170, 210, 255, .2); z-index: 0; }
.ptr-shop .ptr-steps span:first-child::before { display: none; }
.ptr-shop .ptr-steps span.done::before, .ptr-shop .ptr-steps span.next::before { background: linear-gradient(90deg, #cfe6ff, #8ec2ff); }
.ptr-shop .ptr-steps i { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: #8fa9cb; background: #12223f; box-shadow: inset 0 0 0 1.5px rgba(170, 210, 255, .3); }
.ptr-shop .ptr-steps .done i { color: #0f1d36; background: linear-gradient(135deg, #f2f8ff, #9fcbff); box-shadow: 0 0 10px -1px rgba(170, 215, 255, .9); }
.ptr-shop .ptr-steps .next i { color: #fff; box-shadow: inset 0 0 0 2px #a9d0ff, 0 0 12px -2px rgba(160, 210, 255, .9); animation: psPulse 2.2s ease-in-out infinite; }
.ptr-shop .ptr-steps b { font-size: 12px; color: #dbe8fa; font-weight: 600; }
.ptr-shop .ptr-steps small { font-size: 10.5px; color: #87a3c8; }
.ptr-shop .ptr-steps .done small { color: #a9d0ff; }
.ptr-shop .ptr-steps .next b { color: #fff; }
@keyframes psPulse { 50% { box-shadow: inset 0 0 0 2px #a9d0ff, 0 0 20px 0 rgba(160, 210, 255, .9); } }
.ptr-lock { justify-self: start; font-size: 12px; padding: 6px 12px; border-radius: 99px; color: #d8e6f8; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(170, 210, 255, .22); }
.ptr-lock b { color: #fff; } .ptr-lock small { color: #8fa9cb; margin-left: 4px; }
.ps-up { font: inherit; font-size: 13.5px; font-weight: 700; padding: 9px 18px; border-radius: 99px; border: 0; color: #9fb3cf; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(170, 210, 255, .2); cursor: not-allowed; }
.ps-up span { font-weight: 400; opacity: .8; margin-left: 4px; }
.ps-up.ready { cursor: pointer; color: #0f1d36; background: linear-gradient(135deg, #ffffff, #b4d6ff); box-shadow: 0 0 18px -3px rgba(170, 215, 255, .95); }
.ps-up.ready:hover { transform: translateY(-1px); box-shadow: 0 0 24px -2px rgba(180, 220, 255, 1); }
.ptr-shop .ptr-done { color: #cfe6ff; text-shadow: 0 0 10px rgba(160, 210, 255, .8); }
.ptr-shop .confirm { background: rgba(255, 255, 255, .07); color: #e6f0ff; border-color: rgba(170, 210, 255, .3); }
@media (max-width: 640px) { .ptr-shop .ptr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ptr-shop .ptr-steps b { font-size: 11px; } .ps-left { justify-self: center; } }
@media (prefers-reduced-motion: reduce) { .ptr-shop .ptr-steps .next i { animation: none; } }

/* 아즈카반: 탑 오르기 + 어비스 한 상자 */
.az-climb { display: grid; gap: 12px; align-content: start; position: relative; overflow: hidden; color: #e3ebf7; border: 0 !important;
  background: radial-gradient(ellipse at 85% 0%, rgba(140, 170, 220, .18), transparent 55%), radial-gradient(circle at 12% 22%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 78% 46%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 34% 88%, #fff 0 1px, transparent 1.5px), linear-gradient(170deg, #1d2638, #111827 60%, #0b111d) !important;
  box-shadow: 0 0 0 1px rgba(160, 185, 225, .25), 0 10px 30px -14px rgba(60, 90, 150, .6) !important; }
.azc-sec { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(170, 195, 235, .16); }
.azc-h { display: flex; gap: 11px; align-items: center; }
.azc-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 20px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(190, 210, 240, .22); }
.azc-h > div { display: grid; gap: 1px; }
.azc-h b { font-size: 15.5px; color: #f3f6fc; }
.azc-h b small { font-size: 11.5px; font-weight: 400; color: #a9b6cf; margin-left: 4px; }
.azc-h > div > span { font-size: 12px; color: #9fb0cc; } .azc-h > div > span b { font-size: 12px; color: #fff; }
.azc-note { font-size: 12.5px; color: #b9c6dc; line-height: 1.5; } .azc-note b { color: #fff; }
.az-climb .btn.quiet { color: #c9d4e8; }
.azc-go { box-shadow: 0 0 14px -4px rgba(170, 195, 240, .8); }
.azc-abyss { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 120%, rgba(150, 90, 230, .45), transparent 65%), linear-gradient(160deg, #241a3d, #120c22) !important; box-shadow: inset 0 0 0 1px rgba(190, 150, 255, .32), 0 0 22px -10px rgba(160, 100, 255, .8); }
.azc-abyss::before { content: ''; position: absolute; z-index: -1; width: 240px; height: 240px; right: -70px; bottom: -120px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(180, 130, 255, .28), transparent 40%, rgba(120, 80, 220, .25), transparent 75%); animation: ptrSpin 14s linear infinite; }
.azc-abyss .azc-ic { background: rgba(170, 120, 255, .16); box-shadow: inset 0 0 0 1px rgba(200, 160, 255, .38); }
.azc-abyss .azc-h > div > span { color: #c4b2e6; }
.azc-abyss .azc-note { color: #cfc2e8; }
.azc-abyss.locked { filter: saturate(.55); opacity: .82; }
.azc-go.ab { background: linear-gradient(135deg, #b993ff, #7a4fe0) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 0 16px -4px rgba(180, 130, 255, .95); }
.azc-ab-row { flex-wrap: wrap; gap: 8px; }
.azc-floor { display: inline-flex; align-items: center; gap: 6px; color: #d8cdee; }
.azc-floor input { width: 58px; text-align: center; font: inherit; font-weight: 700; padding: 6px 4px; border-radius: 9px; color: #fff; background: rgba(10, 5, 25, .55) !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(200, 160, 255, .4) !important; -moz-appearance: textfield; }
.azc-floor input::-webkit-inner-spin-button, .azc-floor input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.azc-step { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; font: inherit; font-size: 16px; line-height: 1; color: #e9defc; background: rgba(170, 120, 255, .18); box-shadow: inset 0 0 0 1px rgba(200, 160, 255, .38); }
.azc-step:hover { background: rgba(170, 120, 255, .32); }
.azc-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; } .azc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8e6ae6, #cdb4ff); }
.azc-rank { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
/* 프로필: 한마디를 소개 칸 맨 위에 크게 */
.char-quote { margin: 10px 0 4px; font-family: var(--f-display, inherit); font-size: 19px; line-height: 1.45; color: var(--ink); position: relative; padding-left: 26px; }
.char-quote::before { content: '“'; position: absolute; left: 0; top: -8px; font-size: 40px; line-height: 1; color: color-mix(in srgb, var(--accent) 60%, transparent); font-family: Georgia, serif; }
@media (max-width: 640px) { .char-quote { font-size: 17px; } }

/* 전투 화면: 보스 문장 · 파티원 체력/마력/기력 */
.raid-live > [data-swap], .shrine-live > [data-swap] { display: grid; gap: 10px; }
.rp-arena { display: grid; gap: 10px; }
.rp-boss, .sh-boss.rp-boss { display: flex !important; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--bc, var(--bad)) 35%, var(--rule)) !important; border-left-width: 1px !important; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 0% 50%, color-mix(in srgb, var(--bc, var(--bad)) 22%, transparent), transparent 60%), var(--sheet) !important; }
.rpb-main { flex: 1; min-width: 0; display: grid; gap: 5px; }
.rpb-main .foe-name { font-size: 16px; }
.rpb-pct { font-weight: 700; color: var(--bad); }
.rpb-track { position: relative; height: 13px; border-radius: 99px; background: color-mix(in srgb, var(--bad) 14%, var(--sheet-2)); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.rpb-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c94a3c, #ec7a5e 60%, #f6a37f); transition: width .9s cubic-bezier(.2, .8, .2, 1); position: relative; }
.rpb-track i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); background-size: 220% 100%; animation: rpShine 2.6s linear infinite; }
.rp-boss.low .rpb-track i { background: linear-gradient(90deg, #a82d24, #e0503c); }
.rp-boss.down { filter: grayscale(.7); opacity: .8; }
.rp-boss.frenzy { box-shadow: 0 0 0 1px color-mix(in srgb, var(--bad) 60%, transparent), 0 0 22px -6px var(--bad); }
.rp-boss.hit { animation: rpShake .45s ease; }
.rp-boss.hit::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 12% 50%, rgba(255, 120, 90, .45), transparent 55%); animation: rpFlash .5s ease forwards; }
/* 보스 문장 */
.boss-emb { position: relative; width: 84px; height: 84px; flex: none; display: grid; place-items: center; }
.be-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.be-r1 { fill: none; stroke: var(--bc); stroke-width: 2; stroke-dasharray: 6 5; opacity: .75; transform-origin: 50px 50px; animation: ptrSpin 14s linear infinite; }
.be-r2 { fill: color-mix(in srgb, var(--bc) 14%, transparent); stroke: color-mix(in srgb, var(--bc) 60%, transparent); stroke-width: 1.2; }
.be-runes { fill: var(--bc); opacity: .85; transform-origin: 50px 50px; animation: ptrSpin 9s linear infinite reverse; }
.be-core { position: absolute; width: 58%; height: 58%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bc) 55%, #fff) 0%, color-mix(in srgb, var(--bc) 35%, transparent) 45%, transparent 72%); animation: bePulse 2.4s ease-in-out infinite; }
.be-ico { position: relative; font-size: 34px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); animation: beBob 3s ease-in-out infinite; }
.be-sp { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--bc); box-shadow: 0 0 6px var(--bc); opacity: 0; animation: beSpark 3.2s ease-out infinite; }
.be-sp.s1 { left: 18%; bottom: 20%; } .be-sp.s2 { left: 72%; bottom: 26%; animation-delay: 1.1s; } .be-sp.s3 { left: 46%; bottom: 10%; animation-delay: 2.1s; }
.rp-boss.low .be-core { animation-duration: .9s; background: radial-gradient(circle, #ffb3a0 0%, rgba(230, 80, 60, .5) 45%, transparent 72%); }
.rp-boss.low .be-ico { animation-duration: 1.1s; }
.rp-boss.down .be-ico { transform: rotate(-24deg) translateY(6px); animation: none; }
.rp-boss.down .be-r1, .rp-boss.down .be-runes, .rp-boss.down .be-core, .rp-boss.down .be-sp { animation: none; opacity: .3; }
.rp-boss.hit .be-ico { animation: beHit .45s ease; }
/* 파티원 카드 */
.rp-units, .rp-units.sh-mems { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pu, .pu.sh-mem { position: relative; display: grid; gap: 4px; padding: 9px 11px 10px; border-radius: 12px; background: var(--sheet); border: 1px solid var(--rule); overflow: hidden; transition: opacity .3s, filter .3s; }
.pu::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rc, var(--accent)); }
.pu.role-attack { --rc: #d9774f; } .pu.role-guard { --rc: #5b8fd6; } .pu.role-heal { --rc: #4fae78; }
.pu.me { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); }
.pu.target { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 55%, transparent); animation: puTarget 1.2s ease-in-out infinite; }
.pu.out { opacity: .5; filter: grayscale(.8); }
.pu.hit { animation: rpShake .4s ease; }
.pu.hit::after { content: ''; position: absolute; inset: 0; background: rgba(230, 80, 60, .22); animation: rpFlash .5s ease forwards; pointer-events: none; }
.pu-h { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pu-h b { font-size: 13.5px; color: var(--pc, var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-ic { font-size: 15px; flex: none; display: inline-block; }
.pu.out .pu-ic { animation: puDizzy 2s linear infinite; }
.pu-role { margin-left: auto; font-size: 11px; color: var(--ink-3, #888); white-space: nowrap; }
.vb { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 6px; font-size: 11px; }
.vb-k { color: var(--ink-3, #888); }
.vb-t { height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.vb-t i { display: block; height: 100%; border-radius: inherit; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.vb.hp i { background: linear-gradient(90deg, var(--hp), color-mix(in srgb, var(--hp) 60%, #fff)); }
.vb.mp i { background: linear-gradient(90deg, var(--mp), color-mix(in srgb, var(--mp) 60%, #fff)); }
.vb.st i { background: linear-gradient(90deg, var(--st, #d6a83e), color-mix(in srgb, var(--st, #d6a83e) 60%, #fff)); }
.vb-v { min-width: 56px; text-align: right; font-size: 11.5px; } .vb-v small { color: var(--ink-3, #999); font-size: 10px; }
@keyframes rpShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes rpShake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
@keyframes rpFlash { from { opacity: 1; } to { opacity: 0; } }
@keyframes bePulse { 0%, 100% { transform: scale(.9); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes beBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes beSpark { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) scale(1.1); } }
@keyframes beHit { 0% { transform: scale(1); } 30% { transform: scale(.82) rotate(-8deg); filter: brightness(2); } 100% { transform: scale(1); } }
@keyframes puTarget { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 35%, transparent), 0 0 14px -4px var(--bad); } }
@keyframes puDizzy { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .boss-emb { width: 64px; height: 64px; } .be-ico { font-size: 26px; } .rp-boss { gap: 10px; padding: 10px 12px; } .rp-units { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .be-r1, .be-runes, .be-core, .be-ico, .be-sp, .rpb-track i::after, .pu.target, .pu.out .pu-ic { animation: none !important; } }
.boss-emb.sm { width: 40px; height: 40px; } .boss-emb.sm .be-ico { font-size: 18px; } .boss-emb.sm .be-sp { display: none; }
.boss-emb.md { width: 64px; height: 64px; } .boss-emb.md .be-ico { font-size: 26px; }
.pb-title { display: inline-flex; align-items: center; gap: 10px; }
.sh-head:has(.boss-emb) { display: flex; align-items: center; gap: 14px; }

/* 큰 보스 무대 */
.bstage { position: relative; height: 210px; border-radius: 16px; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px -14px rgba(0, 0, 0, .6); }
.bs-sc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.bs-boss { position: absolute; left: 50%; top: 22px; width: 150px; height: 150px; margin-left: -75px; display: grid; place-items: center; }
.bsx-ico { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; font-size: 104px; line-height: 1; padding-top: 26px; transform-origin: 50% 90%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); animation: bsIdle 2.8s ease-in-out infinite; }
.bs-shadow { position: absolute; bottom: 0; left: 50%; width: 110px; height: 16px; margin-left: -55px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%); animation: bsShadow 2.8s ease-in-out infinite; z-index: 1; }
.bs-aura { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bc) 55%, transparent) 0%, transparent 65%); animation: bePulse 2.8s ease-in-out infinite; z-index: 0; }
.bs-ring { position: absolute; inset: 6px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--bc) 70%, transparent); opacity: .45; animation: ptrSpin 16s linear infinite; z-index: 0; }
.bs-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bs-pop { position: absolute; top: 30%; font-size: 26px; font-weight: 800; color: #fff; text-shadow: 0 0 6px #ff5a3c, 0 2px 0 #7a1a10; animation: bsPop 1.3s ease-out forwards; }
/* 상태 */
.bstage.it-heavy .bs-aura { background: radial-gradient(circle, rgba(255, 90, 60, .6) 0%, transparent 65%); animation-duration: 1s; }
.bstage.it-heavy .bsx-ico { animation: bsCharge 1s ease-in-out infinite; }
.bstage.it-strike .bsx-ico { animation: bsLean 1.6s ease-in-out infinite; }
.bstage.it-web .bs-aura { background: radial-gradient(circle, rgba(170, 120, 255, .55) 0%, transparent 65%); }
.bstage.it-quick .bs-ring { animation-duration: 3s; opacity: .8; }
.bstage.low .bsx-ico { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)) sepia(.5) saturate(2.4) hue-rotate(-30deg); }
.bstage.low .bs-aura { background: radial-gradient(circle, rgba(255, 60, 40, .55) 0%, transparent 65%); animation-duration: .9s; }
.bstage.frenzy { box-shadow: inset 0 0 40px rgba(255, 60, 40, .45), 0 0 0 1px rgba(255, 90, 60, .5); }
.bstage.down .bsx-ico { animation: bsDown .9s ease forwards; }
.bstage.down .bs-aura, .bstage.down .bs-ring { opacity: 0; transition: opacity .8s; }
.bstage.hurt .bsx-ico { animation: bsHurt .55s ease; }
.bstage.hurt::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, .35), transparent 55%); animation: rpFlash .5s ease forwards; z-index: 2; }
.bstage.lunge .bsx-ico { animation: bsLunge .7s cubic-bezier(.3, 1.4, .5, 1); }
.bstage.lunge .bs-fx::before { content: ''; position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; border: 3px solid rgba(255, 120, 90, .8); animation: bsWave .7s ease-out forwards; }
/* 장면 소품 */
.bs-torch { position: absolute; top: 46px; width: 8px; height: 26px; background: #3a2a1c; border-radius: 2px; }
.bs-torch.l { left: 14%; } .bs-torch.r { right: 14%; }
.bs-torch i { position: absolute; left: 50%; top: -20px; width: 18px; height: 24px; margin-left: -9px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff3b0, #ffb340 45%, rgba(255, 90, 20, .0) 75%); filter: blur(.5px); animation: bsFlame .35s ease-in-out infinite alternate; box-shadow: 0 0 30px 12px rgba(255, 150, 60, .25); }
.bs-wave { animation: bsWaveX 6s linear infinite; } .bs-wave.w2 { animation-duration: 4s; animation-direction: reverse; }
.bs-bub { position: absolute; bottom: 20px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(180, 240, 255, .6); animation: bsBub 4s ease-in infinite; }
.bs-bub.b1 { left: 22%; } .bs-bub.b2 { left: 70%; animation-delay: 1.3s; } .bs-bub.b3 { left: 84%; animation-delay: 2.6s; width: 5px; height: 5px; }
.bs-moon { position: absolute; top: 22px; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffbea, #efe2b8 60%, #d8c890); box-shadow: 0 0 30px 6px rgba(255, 240, 200, .25); z-index: -1; animation: bsMoon 5s ease-in-out infinite; }
.bs-moon.r { right: 14%; } .bs-moon.l { left: 12%; width: 32px; height: 32px; background: radial-gradient(circle at 40% 40%, #fff, #dcd6ff 65%); box-shadow: 0 0 26px 6px rgba(210, 200, 255, .25); }
.bs-fly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #e8ff9a; box-shadow: 0 0 8px 2px rgba(220, 255, 120, .7); animation: bsFly 6s ease-in-out infinite; }
.bs-fly.f1 { left: 18%; top: 40%; } .bs-fly.f2 { left: 78%; top: 30%; animation-delay: 1.5s; } .bs-fly.f3 { left: 30%; top: 70%; animation-delay: 3s; } .bs-fly.f4 { left: 66%; top: 62%; animation-delay: 4.2s; }
.bs-fog { position: absolute; left: -20%; right: -20%; bottom: 0; height: 60px; z-index: -1; background: radial-gradient(ellipse at 30% 100%, rgba(190, 200, 255, .18), transparent 60%), radial-gradient(ellipse at 75% 100%, rgba(190, 200, 255, .14), transparent 60%); animation: bsFog 9s ease-in-out infinite alternate; }
@keyframes bsIdle { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-6px) scale(1.02, .98); } }
@keyframes bsShadow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.85); opacity: .6; } }
@keyframes bsCharge { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.08) rotate(-3deg); } }
@keyframes bsLean { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg) translateX(-4px); } }
@keyframes bsHurt { 0% { transform: none; filter: brightness(1); } 20% { transform: translateX(10px) rotate(6deg) scale(.94); filter: brightness(2.2); } 45% { transform: translateX(-8px) rotate(-4deg); } 70% { transform: translateX(4px); } 100% { transform: none; } }
@keyframes bsLunge { 0% { transform: none; } 35% { transform: translateY(14px) scale(1.25); } 100% { transform: none; } }
@keyframes bsDown { to { transform: rotate(-80deg) translate(-20px, 30px) scale(.9); opacity: .55; filter: grayscale(1); } }
@keyframes bsPop { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { transform: translateY(-6px) scale(1.2); opacity: 1; } 100% { transform: translateY(-60px) scale(1); opacity: 0; } }
@keyframes bsWave { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
@keyframes bsFlame { from { transform: scaleY(1) translateY(0); opacity: .9; } to { transform: scaleY(1.15) translateY(-2px); opacity: 1; } }
@keyframes bsWaveX { from { transform: translateX(0); } to { transform: translateX(-100px); } }
@keyframes bsBub { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-150px); opacity: 0; } }
@keyframes bsMoon { 50% { opacity: .7; } }
@keyframes bsFly { 0%, 100% { transform: translate(0, 0); opacity: .2; } 30% { opacity: 1; } 50% { transform: translate(24px, -18px); opacity: .9; } 80% { transform: translate(-10px, 10px); opacity: .3; } }
@keyframes bsFog { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
@media (max-width: 640px) { .bstage { height: 170px; } .bsx-ico { font-size: 80px; padding-top: 20px; } .bs-boss { top: 14px; width: 120px; height: 120px; margin-left: -60px; } }
@media (prefers-reduced-motion: reduce) { .bstage *, .bstage::after { animation: none !important; } }

.rw-line { margin-top: 3px; font-size: 11.5px; color: var(--ink-3, #999); opacity: .85; line-height: 1.45; }
/* 전투 결과 창 */
.pr-modal { display: grid; gap: 14px; }
.pr-head { display: flex; align-items: center; gap: 14px; }
.pr-ht { flex: 1; min-width: 0; } .pr-ht h3 { margin: 2px 0 0; }
.pr-badge { font-weight: 800; font-size: 15px; padding: 7px 14px; border-radius: 99px; white-space: nowrap; }
.pr-modal.win .pr-badge { color: #fff; background: linear-gradient(135deg, #f0b84a, #d98a2b); box-shadow: 0 0 16px -4px rgba(240, 180, 70, .9); animation: prBadge 1.8s ease-in-out infinite; }
.pr-modal.lose .pr-badge { color: var(--ink-2, var(--ink)); background: var(--sheet-2); }
.pr-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2, var(--ink)); }
.pr-rew { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--sheet-2)); }
.pr-k { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3, #888); }
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 7px; border-radius: 99px; font-size: 13px; background: var(--sheet); border: 1px solid var(--rule); animation: prPop .4s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.pr-chip:nth-child(2) { animation-delay: .06s; } .pr-chip:nth-child(3) { animation-delay: .12s; } .pr-chip:nth-child(4) { animation-delay: .18s; } .pr-chip:nth-child(5) { animation-delay: .24s; } .pr-chip:nth-child(6) { animation-delay: .3s; }
.pr-chip.coin { border-color: color-mix(in srgb, #d9a53a 50%, var(--rule)); } .pr-chip.pt { border-color: color-mix(in srgb, var(--hc) 55%, var(--rule)); }
.pr-chip .iti { width: 20px; height: 20px; }
.pr-table tr.mvp td { background: color-mix(in srgb, #f0b84a 12%, transparent); font-weight: 600; }
.boss-emb.down .be-ico { transform: rotate(-24deg) translateY(6px); animation: none; filter: grayscale(.6); }
.boss-emb.down .be-r1, .boss-emb.down .be-runes { animation: none; opacity: .4; }
@keyframes prPop { from { transform: scale(.6); opacity: 0; } }
@keyframes prBadge { 50% { transform: scale(1.06); } }

/* 보스 레이드 무대: 마법진 · 빛줄기 · 궤도 구슬 */
.bstage.sc-shrine { height: 240px; } .bstage.sc-shrine .bs-boss { top: 38px; }
.bs-magic { position: absolute; left: 50%; bottom: 4px; width: 300px; height: 300px; margin-left: -150px; transform: perspective(500px) rotateX(72deg); transform-origin: 50% 100%; z-index: -1; pointer-events: none; }
.bs-magic svg { width: 100%; height: 100%; animation: ptrSpin 18s linear infinite; filter: drop-shadow(0 0 6px var(--bc)); }
.bs-magic .mg1 { fill: none; stroke: var(--bc); stroke-width: 2.5; opacity: .9; }
.bs-magic .mg2 { fill: color-mix(in srgb, var(--bc) 14%, transparent); stroke: var(--bc); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .8; }
.bs-magic .mg3 { fill: none; stroke: color-mix(in srgb, var(--bc) 70%, #fff); stroke-width: 1.6; opacity: .85; }
.bs-magic .mg4 { fill: color-mix(in srgb, var(--bc) 60%, #fff); animation: mgBlink 1.6s ease-in-out infinite; }
.bs-magic .mg4:nth-child(odd) { animation-delay: .8s; }
.bs-beam { position: absolute; top: -20%; bottom: 20%; width: 46px; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 45%, transparent), transparent 85%); filter: blur(6px); opacity: .45; transform-origin: 50% 0; animation: bsBeam 6s ease-in-out infinite; }
.bs-beam.b1 { left: 36%; transform: rotate(14deg); } .bs-beam.b2 { left: 50%; width: 64px; margin-left: -32px; animation-delay: 2s; } .bs-beam.b3 { left: 62%; transform: rotate(-14deg); animation-delay: 4s; }
.bs-mote { position: absolute; bottom: 10px; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px var(--bc); opacity: 0; animation: bsMote 5s linear infinite; z-index: 1; }
.bs-mote.m0 { left: 20%; } .bs-mote.m1 { left: 32%; animation-delay: .6s; } .bs-mote.m2 { left: 42%; animation-delay: 1.9s; } .bs-mote.m3 { left: 55%; animation-delay: 1.1s; } .bs-mote.m4 { left: 63%; animation-delay: 2.7s; } .bs-mote.m5 { left: 74%; animation-delay: 3.4s; } .bs-mote.m6 { left: 82%; animation-delay: .3s; } .bs-mote.m7 { left: 48%; animation-delay: 4.1s; }
.bs-ring2 { position: absolute; inset: -14px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--bc) 55%, transparent); border-left-color: transparent; border-right-color: transparent; animation: ptrSpin 4s linear infinite reverse; z-index: 0; }
.bs-orb { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: radial-gradient(circle, #fff, var(--bc)); box-shadow: 0 0 12px 3px var(--bc); z-index: 3; animation: bsOrbit 5s linear infinite; }
.bs-orb.o2 { animation-delay: -1.67s; } .bs-orb.o3 { animation-delay: -3.33s; }
.bstage.sc-shrine .bs-aura { inset: -10px; }
.bstage.sc-shrine.it-heavy .bs-magic svg { animation-duration: 4s; filter: drop-shadow(0 0 10px #ff5a3c); }
.bstage.sc-shrine.it-heavy .bs-magic .mg1, .bstage.sc-shrine.it-heavy .bs-magic .mg3 { stroke: #ff7a5a; }
.bstage.sc-shrine.down .bs-magic, .bstage.sc-shrine.down .bs-beam, .bstage.sc-shrine.down .bs-orb, .bstage.sc-shrine.down .bs-ring2 { opacity: 0; transition: opacity 1s; }
@keyframes mgBlink { 50% { opacity: .25; } }
@keyframes bsBeam { 0%, 100% { opacity: .25; } 50% { opacity: .6; } }
@keyframes bsMote { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-200px) scale(1); opacity: 0; } }
@keyframes bsOrbit { from { transform: rotate(0deg) translateX(88px) rotate(0deg) scaleY(1); } to { transform: rotate(360deg) translateX(88px) rotate(-360deg); } }
@media (max-width: 640px) { .bstage.sc-shrine { height: 200px; } .bs-magic { width: 230px; height: 230px; margin-left: -115px; } @keyframes bsOrbit { from { transform: rotate(0deg) translateX(66px) rotate(0deg); } to { transform: rotate(360deg) translateX(66px) rotate(-360deg); } } }

/* 보스 전신 그림 */
.bstage.has-body .bs-boss { width: 176px; height: 196px; margin-left: -88px; top: 8px; }
.bstage.sc-shrine.has-body .bs-boss { top: 30px; }
.bstage.has-body .bsx-ico { padding-top: 0; }
.bstage.has-body .bs-aura { inset: 10px 0 20px; }
.bstage.has-body .bs-ring { inset: 26px 14px 36px; }
.bsx-ico > svg.bb { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; overflow: visible; }
.bb * { transform-box: fill-box; }
.bb-arm { transform-origin: 50% 6%; animation: bbArmL 2.8s ease-in-out infinite; }
.bb-arm.r { animation-name: bbArmR; }
.bb-head { transform-origin: 50% 100%; animation: bbHead 2.8s ease-in-out infinite; }
.bb-leg { transform-origin: 50% 0; }
.bb-eye { transform-origin: 50% 50%; animation: bbBlink 4.2s infinite; }
.bb-glow { animation: bbGlow 1.6s ease-in-out infinite; }
.bb-crown { transform-origin: 50% 100%; animation: bbHead 2.8s ease-in-out infinite; }
.bb-cloak { transform-origin: 50% 0; animation: bbCloak 3.2s ease-in-out infinite; }
.bb-mouth { animation: bbGlow 2.2s ease-in-out infinite; }
.bb-sleg { transform-origin: 100% 0; animation: bbSleg 1.4s ease-in-out infinite; } .bb-sleg.r { transform-origin: 0 0; animation-name: bbSlegR; }
.bb-sleg.s1 { animation-delay: -.35s; } .bb-sleg.s2 { animation-delay: -.7s; } .bb-sleg.s3 { animation-delay: -1.05s; }
.bb-tent { transform-origin: 50% 0; animation: bbTent 2.4s ease-in-out infinite; }
.bb-tent.t1 { animation-delay: -.4s; } .bb-tent.t2 { animation-delay: -.8s; } .bb-tent.t3 { animation-delay: -1.2s; } .bb-tent.t4 { animation-delay: -1.6s; } .bb-tent.t5 { animation-delay: -2s; }
.bstage.it-heavy .bb-arm.l { animation: bbRaiseL 1s ease-in-out infinite; } .bstage.it-heavy .bb-arm.r { animation: bbRaiseR 1s ease-in-out infinite; }
.bstage.lunge .bb-arm.l { animation: bbSwingL .7s ease; } .bstage.lunge .bb-arm.r { animation: bbSwingR .7s ease; }
.bstage.hurt .bb-head { animation: bbHurtHead .5s ease; }
.bstage.down .bb * { animation: none !important; }
@keyframes bbArmL { 50% { transform: rotate(7deg); } }
@keyframes bbArmR { 50% { transform: rotate(-7deg); } }
@keyframes bbHead { 50% { transform: rotate(-3deg) translateY(1px); } }
@keyframes bbBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes bbGlow { 50% { opacity: .45; } }
@keyframes bbCloak { 50% { transform: skewX(4deg) scaleY(1.02); } }
@keyframes bbSleg { 50% { transform: rotate(6deg); } }
@keyframes bbSlegR { 50% { transform: rotate(-6deg); } }
@keyframes bbTent { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes bbRaiseL { 0%, 100% { transform: rotate(60deg); } 50% { transform: rotate(75deg); } }
@keyframes bbRaiseR { 0%, 100% { transform: rotate(-60deg); } 50% { transform: rotate(-75deg); } }
@keyframes bbSwingL { 30% { transform: rotate(70deg); } 60% { transform: rotate(-30deg); } }
@keyframes bbSwingR { 30% { transform: rotate(-70deg); } 60% { transform: rotate(30deg); } }
@keyframes bbHurtHead { 30% { transform: rotate(12deg) translateX(4px); } }
@media (max-width: 640px) { .bstage.has-body .bs-boss { width: 140px; height: 156px; margin-left: -70px; top: 10px; } .bstage.sc-shrine.has-body .bs-boss { top: 30px; } }

/* 전투 카드 막대 더 촘촘하게 */
.rp-units, .rp-units.sh-mems { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important; gap: 6px; }
.pu, .pu.sh-mem { gap: 2px; padding: 7px 10px 8px; }
.pu-h { margin-bottom: 2px; } .pu-h b { font-size: 13px; }
.vb { grid-template-columns: 24px 1fr auto; gap: 5px; font-size: 10.5px; line-height: 1.25; }
.vb-t { height: 5px; }
.vb-v { min-width: 48px; font-size: 10.5px; }
@media (max-width: 640px) { .rp-units, .rp-units.sh-mems { grid-template-columns: 1fr 1fr !important; } .pu-role { display: none; } }
/* 보스 레이드: 보스 고르기 */
.sh-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 8px 0; }
.sh-pick { font: inherit; display: flex; align-items: center; gap: 9px; text-align: left; padding: 8px 10px; border-radius: 12px; cursor: pointer; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); transition: border-color .15s, box-shadow .15s, transform .15s; }
.sh-pick:hover:not(:disabled) { transform: translateY(-1px); border-color: color-mix(in srgb, var(--bc) 55%, var(--rule)); }
.sh-pick.on { border-color: var(--bc); box-shadow: 0 0 0 1.5px var(--bc), 0 6px 16px -10px var(--bc); background: color-mix(in srgb, var(--bc) 10%, var(--sheet)); }
.sh-pick:disabled { cursor: default; opacity: .85; }
.shp-t { display: grid; gap: 1px; min-width: 0; } .shp-t b { font-size: 13px; } .shp-t small { font-size: 11px; color: var(--ink-3, #888); }
.sh-pick.weak .shp-t small { color: #e0a63a; font-weight: 700; }
.sh-pick.weak { position: relative; }
.sh-pick.weak::after { content: '💫'; position: absolute; right: 8px; top: 6px; font-size: 13px; animation: beBob 2s ease-in-out infinite; }
.sh-weak { font-size: 12px; font-weight: 700; color: #ffd27a; margin-left: 6px; }

/* 보스 무대 배경 더 화려하게 */
.bs-vign { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(0, 0, 0, .45) 100%); }
.bs-floor { position: absolute; left: 50%; bottom: 0; width: 70%; height: 46px; margin-left: -35%; z-index: -1; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--bc) 45%, transparent), transparent 70%); animation: bsMoon 3s ease-in-out infinite; }
.bs-star { position: absolute; width: var(--sz); height: var(--sz); border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff; z-index: -1; animation: bsTwinkle 3s ease-in-out infinite; }
.bs-ember { position: absolute; bottom: 10px; width: 3px; height: 3px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 6px 2px rgba(255, 140, 40, .7); opacity: 0; z-index: 0; animation: bsEmber 5s ease-out infinite; }
.bs-chains { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.bs-chain { stroke: #4d4652; stroke-width: 3; fill: none; stroke-dasharray: 6 3; transform-box: fill-box; transform-origin: 50% 0; animation: bsSwing 4s ease-in-out infinite; }
.bs-chain circle { stroke-dasharray: none; } .bs-chain.c2 { animation-delay: -1.6s; }
.bs-rune { position: absolute; left: 50%; bottom: 8px; width: 240px; height: 40px; margin-left: -120px; border-radius: 50%; border: 2px solid rgba(255, 110, 60, .5); box-shadow: 0 0 18px rgba(255, 110, 60, .45), inset 0 0 14px rgba(255, 110, 60, .35); z-index: -1; animation: bsMoon 2.4s ease-in-out infinite; }
.bs-refl { position: absolute; right: 13%; top: 120px; width: 46px; height: 60px; z-index: -1; background: repeating-linear-gradient(180deg, rgba(255, 245, 210, .45) 0 3px, transparent 3px 9px); filter: blur(1px); animation: bsRefl 2.4s ease-in-out infinite; mask-image: linear-gradient(180deg, #000, transparent); -webkit-mask-image: linear-gradient(180deg, #000, transparent); }
.bs-caustic { position: absolute; inset: 0; z-index: -1; opacity: .1; background: repeating-radial-gradient(circle at 30% 20%, rgba(140, 230, 255, .35) 0 2px, transparent 2px 22px); animation: bsCaustic 8s linear infinite; mix-blend-mode: screen; }
.bs-kelp { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.bs-kelp .kp { fill: none; stroke: #1f6a4c; stroke-width: 6; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: bsKelp 3.6s ease-in-out infinite; } .bs-kelp .k1, .bs-kelp .k3 { stroke: #2b8a5f; animation-delay: -1.2s; }
.bs-cloud { position: absolute; height: 18px; border-radius: 99px; background: rgba(200, 190, 230, .16); filter: blur(3px); z-index: -1; animation: bsCloud 26s linear infinite; }
.bs-cloud.c1 { top: 30px; width: 140px; } .bs-cloud.c2 { top: 62px; width: 90px; animation-duration: 34s; animation-delay: -14s; }
.bs-bat { position: absolute; top: 40px; font-size: 16px; z-index: 0; filter: brightness(.45); animation: bsBat 9s linear infinite; } .bs-bat.b2 { top: 70px; font-size: 12px; animation-delay: -4.5s; animation-duration: 11s; }
.bs-mist { position: absolute; left: -30%; right: -30%; height: 50px; z-index: 0; background: radial-gradient(ellipse at 50% 50%, rgba(210, 240, 220, .14), transparent 70%); animation: bsFog 10s ease-in-out infinite alternate; }
.bs-mist.m1 { bottom: 20px; } .bs-mist.m2 { bottom: 60px; animation-duration: 14s; animation-direction: alternate-reverse; opacity: .7; }
.bs-shroom { position: absolute; bottom: 18px; width: 12px; height: 9px; border-radius: 12px 12px 3px 3px; background: radial-gradient(circle at 50% 30%, #c8ffd6, #45d68a); box-shadow: 0 0 12px 3px rgba(80, 230, 150, .55); z-index: 0; animation: bsMoon 2.6s ease-in-out infinite; }
.bs-shroom.s1 { left: 12%; } .bs-shroom.s2 { left: 82%; animation-delay: -1s; width: 9px; height: 7px; } .bs-shroom.s3 { left: 26%; animation-delay: -1.8s; width: 8px; height: 6px; }
.bs-aurora { position: absolute; left: -10%; right: -10%; top: -10px; height: 90px; z-index: -1; background: linear-gradient(100deg, transparent 10%, color-mix(in srgb, var(--bc) 30%, transparent) 30%, rgba(160, 120, 255, .22) 50%, color-mix(in srgb, var(--bc) 25%, transparent) 70%, transparent 90%); filter: blur(14px); animation: bsAurora 9s ease-in-out infinite alternate; }
@keyframes bsTwinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes bsEmber { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(14px, -170px); opacity: 0; } }
@keyframes bsSwing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes bsRefl { 50% { transform: scaleX(1.25); opacity: .6; } }
@keyframes bsCaustic { to { background-position: 60px 40px; } }
@keyframes bsKelp { 0%, 100% { transform: skewX(-8deg); } 50% { transform: skewX(8deg); } }
@keyframes bsCloud { from { transform: translateX(-160px); } to { transform: translateX(110vw); } }
@keyframes bsBat { 0% { left: -6%; transform: translateY(0); } 25% { transform: translateY(-14px); } 50% { transform: translateY(6px); } 75% { transform: translateY(-10px); } 100% { left: 106%; transform: translateY(0); } }
@keyframes bsAurora { from { transform: translateX(-30px) skewX(-6deg); opacity: .7; } to { transform: translateX(30px) skewX(6deg); opacity: 1; } }
.got-src { display: flex; align-items: center; gap: 3px; margin-top: 1px; font-size: 11px; color: var(--ink-3, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.got-src .ico { width: 11px; height: 11px; }

/* 전투 기록: 종류별 색 · 차례는 가운데 선 */
.bt-log { display: grid; gap: 3px; }
.bt-log .lg { display: flex; gap: 6px; align-items: baseline; padding: 3px 8px; border-radius: 7px; line-height: 1.5; border-left: 3px solid transparent; }
.bt-log .lg.sub { margin-left: 22px; padding-top: 1px; padding-bottom: 1px; }
.lg-ic { flex: none; width: 18px; text-align: center; font-size: 13px; }
.lg-who { color: var(--ink); }
.lg-fx { font-style: italic; opacity: .78; font-size: .94em; }
.lg-n { font-size: 1.12em; color: #ff9a5c; } .lg-m { color: #ff6f6f; } .lg-p { color: #5fd08f; }
.lg-round { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; font-size: 11.5px; color: var(--ink-3, #888); letter-spacing: .04em; }
.lg-round::before, .lg-round::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 25%, transparent), transparent); }
.lg-round span { white-space: nowrap; padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.lg-spell { border-left-color: #e8964a; background: color-mix(in srgb, #e8964a 8%, transparent); }
.lg-heal { border-left-color: #4fbf80; background: color-mix(in srgb, #4fbf80 9%, transparent); color: color-mix(in srgb, #4fbf80 55%, var(--ink)); }
.lg-guard { border-left-color: #5b8fd6; background: color-mix(in srgb, #5b8fd6 9%, transparent); color: color-mix(in srgb, #5b8fd6 50%, var(--ink)); }
.lg-boss { border-left-color: #d9534f; background: color-mix(in srgb, #d9534f 11%, transparent); font-weight: 600; color: color-mix(in srgb, #e86a5e 60%, var(--ink)); }
.lg-hurt { border-left-color: #c96a8a; color: color-mix(in srgb, #e07a9a 45%, var(--ink)); }
.lg-miss { color: var(--ink-3, #888); font-style: italic; }
.lg-stage { border-left-color: #e0b14a; background: color-mix(in srgb, #e0b14a 12%, transparent); color: color-mix(in srgb, #e0b14a 70%, var(--ink)); font-weight: 700; }
.lg-end { border-left-color: #e0b14a; background: linear-gradient(90deg, color-mix(in srgb, #e0b14a 18%, transparent), transparent); font-weight: 700; font-size: 1.04em; }

.bt-log .lg-nar { border-left: 0; padding: 2px 10px 4px; font-family: var(--f-display, inherit); font-style: italic; font-size: .95em; color: var(--ink-3, #9a94a8); letter-spacing: .01em; }
.lg-ic { display: none; }

.pu-h b { flex: 0 1 auto; min-width: 3.5em; } .pu-role { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 두상 아래 패트로누스 버튼: 심플하게 */
.prof-ava-col { gap: 14px; }
.ptr-btn { font-size: 11.5px; padding: 3px 12px; border-radius: 99px; border: 1px solid var(--rule); background: none; color: var(--ink-3, #999); opacity: .55; box-shadow: none; letter-spacing: .02em; }
.ptr-btn.on { opacity: 1; color: color-mix(in srgb, #8ec2ff 70%, var(--ink)); border-color: color-mix(in srgb, #8ec2ff 55%, var(--rule)); background: color-mix(in srgb, #8ec2ff 8%, transparent); box-shadow: none; }
.ptr-btn.on:hover { transform: none; box-shadow: none; background: color-mix(in srgb, #8ec2ff 16%, transparent); }

/* 프로필 음악: 축음기 */
#pm-host { position: fixed; width: 200px; height: 200px; left: -9999px; top: 0; overflow: hidden; pointer-events: none; }
.gramo { font: inherit; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 6px 4px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.gramo-art { position: relative; flex: none; width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, #d9a53a 22%, var(--sheet-2)), var(--sheet-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #d9a53a 40%, var(--rule)); transition: transform .15s; }
.gramo:hover .gramo-art { transform: translateY(-1px) rotate(-3deg); }
.gramo-art svg { width: 50px; height: 50px; overflow: visible; }
.gr-horn { fill: #d9a53a; stroke: #8a6420; stroke-width: 1.5; transform-box: fill-box; transform-origin: 0 100%; }
.gr-neck { stroke: #8a6420; stroke-width: 3; }
.gr-box { fill: #7a4f2a; stroke: #4e3018; stroke-width: 1.5; }
.gr-rec { fill: #1f1a22; stroke: #3b3340; stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.gr-lbl { fill: #e06a5a; }
.gramo-notes { position: absolute; inset: 0; pointer-events: none; }
.gramo-notes i { position: absolute; font-style: normal; font-size: 13px; color: #d9a53a; opacity: 0; right: 4px; top: 6px; }
.gramo.on .gramo-notes i { animation: gNote 2.4s ease-out infinite; } .gramo.on .gramo-notes i:nth-child(2) { animation-delay: .8s; right: 12px; } .gramo.on .gramo-notes i:nth-child(3) { animation-delay: 1.6s; right: -2px; }
.gramo.on .gr-horn { animation: gHorn 1.2s ease-in-out infinite; }
.gramo.on .gr-lbl { animation: gSpin .9s linear infinite; transform-box: fill-box; transform-origin: center; }
.gramo.on .gramo-art { box-shadow: inset 0 0 0 1.5px #d9a53a, 0 0 16px -4px rgba(217, 165, 58, .8); }
.gramo-t { display: grid; gap: 2px; } .gramo-t b { font-size: 14.5px; } .gramo-t small { font-size: 12px; color: var(--ink-3, #888); }
.gramo.on .gramo-t small { color: #d9a53a; }
.pm-bar { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 99px; background: var(--sheet); border: 1px solid color-mix(in srgb, #d9a53a 50%, var(--rule)); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5); font-size: 12.5px; }
.pm-dot { color: #d9a53a; animation: gHorn 1.2s ease-in-out infinite; display: inline-block; }
@keyframes gNote { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(10px, -26px) rotate(15deg); opacity: 0; } }
@keyframes gHorn { 50% { transform: scale(1.06); } }
@keyframes gSpin { to { transform: scaleX(.3); } }

/* 마법사 체스 */
.chess-panel .ch-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 14px; border-radius: 16px; color: #f3ead8;
  background: radial-gradient(ellipse 70% 120% at 0% 0%, rgba(232, 196, 120, .22), transparent 65%), linear-gradient(135deg, #2a2131 0%, #1c1824 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 200, 140, .28), 0 6px 18px -10px rgba(30, 20, 40, .6); }
.chess-panel .ch-hero::after { content: ''; position: absolute; right: -10px; top: 0; bottom: 0; width: 46%; pointer-events: none;
  background: repeating-conic-gradient(rgba(240, 214, 160, .13) 0 25%, transparent 0 50%) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); transform: perspective(160px) rotateY(-18deg); transform-origin: right center; }
.ch-medal { position: relative; z-index: 1; flex-shrink: 0; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a3a52, #241c2c 70%); box-shadow: inset 0 0 0 1.5px #d9b46a, 0 0 0 3px rgba(217, 180, 106, .15), 0 0 16px -2px rgba(240, 200, 120, .55); animation: beBob 3.4s ease-in-out infinite; }
.ch-medal svg { width: 32px; height: 32px; } .ch-medal .kn { fill: #f0d592; } .ch-medal .ey { fill: #2a2131; }
.ch-hero-t { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; letter-spacing: .14em; color: #cdb88e; }
.ch-title { white-space: nowrap; font-family: var(--f-display); font-size: 25px; font-weight: 700; letter-spacing: .04em; line-height: 1.15; background: linear-gradient(180deg, #fff6dc 10%, #e7c47a 90%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.ch-reward { align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; color: #e8dcc4; background: rgba(20, 14, 26, .55); box-shadow: inset 0 0 0 1px rgba(232, 200, 140, .3); }
.ch-reward b { color: #f0d592; }
.ch-head { --bc: #c9a55a; }
.cboard { position: relative; padding: 14px; border-radius: 16px; background: radial-gradient(ellipse at 50% 0%, rgba(240, 200, 120, .18), transparent 60%), linear-gradient(170deg, #2b2436, #17131f); box-shadow: inset 0 0 0 1px rgba(240, 210, 150, .2), 0 10px 26px -14px rgba(0, 0, 0, .7); }
.cb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 380px; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px #6b5434, 0 0 22px -6px rgba(240, 200, 120, .5); transform: perspective(700px) rotateX(18deg); transform-origin: 50% 100%; }
.cb-sq { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: #d9c7a3; border: 0; padding: 0; font: inherit; color: inherit; }
.cb-sq.dk { background: #8a6a48; }
button.cb-sq { cursor: pointer; }
button.cb-sq:hover .cb-pc { transform: translateY(-4px) scale(1.08); }
.cb-sq.open::after { content: ''; position: absolute; inset: 3px; border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(255, 230, 150, .55); pointer-events: none; }
button.cb-sq.open::after { box-shadow: inset 0 0 0 2px #ffe08a, 0 0 10px rgba(255, 220, 120, .8); animation: bsMoon 1.6s ease-in-out infinite; }
.cb-sq.mov .cb-pc { animation: cbMov 1s ease-in-out infinite; color: #ffd0c0; text-shadow: 0 0 10px #ff6a4a, 0 2px 0 #000; }
.cb-pc { font-size: clamp(26px, 6vw, 40px); line-height: 1; color: #1d1824; text-shadow: 0 2px 0 rgba(255, 255, 255, .25), 0 4px 8px rgba(0, 0, 0, .45); transition: transform .15s; font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Noto Sans Symbols2', serif; }
.cb-sq.dk .cb-pc { color: #120e17; }
.cb-pc.k-king { font-size: clamp(30px, 7vw, 46px); } .cb-pc.k-queen, .cb-pc.promo { color: #3a1830; }
.cb-pc.ghost { opacity: .14; }
.cb-hp { position: absolute; left: 12%; right: 12%; bottom: 5px; height: 4px; border-radius: 99px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.cb-hp i { display: block; height: 100%; background: linear-gradient(90deg, #e65a4a, #ffb36a); transition: width .6s; }
.cb-line { height: 2px; margin: 12px auto 10px; max-width: 380px; background: linear-gradient(90deg, transparent, rgba(240, 210, 150, .6), transparent); }
.cb-allies { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; max-width: 380px; margin: 0 auto; }
.cb-sq.ally { aspect-ratio: auto; padding: 6px 4px; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(240, 210, 150, .2); gap: 2px; }
.cb-pc.ally { color: #f6efe0; text-shadow: 0 0 10px rgba(180, 210, 255, .7); font-size: 28px; }
.cb-nm { font-size: 11px; color: #e8dcc4; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-sq.ally.me { box-shadow: inset 0 0 0 1.5px #ffd27a; }
.cb-sq.ally.tgt { box-shadow: inset 0 0 0 2px #ff6a5a, 0 0 12px rgba(255, 90, 70, .6); animation: puTarget 1.2s ease-in-out infinite; }
.cb-sq.ally.daze { opacity: .45; }
.vb.mp.big .vb-t { height: 8px; } .vb.mp.big .vb-k { color: var(--mp); font-weight: 700; }
.chess-panel .fi-ico { font-size: 26px; color: #fff; }
@keyframes cbMov { 50% { transform: translateY(-5px) scale(1.06); } }

/* 마법사 체스 2: 5×5 살아 있는 판 */
.cb-wrap { position: relative; max-width: 420px; margin: 0 auto; padding: 0 0 18px 18px; }
.cb-wrap .cb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; transform: none; border-radius: 8px; }
.cb-arrows { position: absolute; left: 18px; top: 0; right: 0; bottom: 18px; width: calc(100% - 18px); height: calc(100% - 18px); pointer-events: none; overflow: visible; }
.cb-arrows line { stroke: #ff6a5a; stroke-width: .07; stroke-linecap: round; stroke-dasharray: .16 .1; opacity: .9; animation: chDash 1s linear infinite; }
.cb-arrows line.cap { stroke-width: .1; stroke-dasharray: none; filter: drop-shadow(0 0 .06px #ff3a2a); }
.cb-files { position: absolute; left: 18px; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-size: 11px; color: #c9b88f; }
.cb-ranks { position: absolute; left: 0; top: 0; bottom: 18px; width: 16px; display: grid; grid-template-rows: repeat(5, 1fr); align-items: center; text-align: center; font-size: 11px; color: #c9b88f; }
.cb-sq.dz-hit { box-shadow: inset 0 0 0 3px rgba(255, 80, 60, .85); background-image: radial-gradient(circle, rgba(255, 70, 50, .45), rgba(255, 70, 50, .15)); }
.cb-sq.dz-path { background-image: repeating-linear-gradient(45deg, rgba(255, 90, 60, .28) 0 5px, transparent 5px 10px); }
.cb-sq.mv { cursor: pointer; }
.cb-dot { position: absolute; width: 22%; height: 22%; border-radius: 50%; background: rgba(90, 160, 255, .75); box-shadow: 0 0 8px rgba(120, 180, 255, .9); }
button.cb-sq.mv:hover { filter: brightness(1.12); }
.cb-sq.sel { box-shadow: inset 0 0 0 3px #ffd36a, 0 0 14px rgba(255, 210, 110, .9); z-index: 1; }
.cb-sq.mine .cb-pc { animation: beBob 1.6s ease-in-out infinite; }
.cb-cost { position: absolute; right: 3px; top: 2px; font-size: 10px; font-weight: 700; color: #1b3a6a; background: rgba(200, 225, 255, .9); border-radius: 6px; padding: 0 4px; }
.cb-ghost { position: absolute; font-size: clamp(22px, 5vw, 32px); color: #fff; opacity: .55; text-shadow: 0 0 10px #ffd36a; }
.cb-pc.ally { color: #fbf6ea; text-shadow: 0 0 2px #000, 0 2px 0 #3a2d1a, 0 0 10px rgba(255, 240, 200, .6); font-size: clamp(24px, 5.5vw, 36px); }
.cb-pc.ally.me { color: #fff6cf; text-shadow: 0 0 2px #000, 0 0 14px #ffd36a; }
.cb-pc.ally.daze { font-size: 22px; }
.cb-tag { position: absolute; bottom: 1px; left: 2px; right: 2px; font-size: 9.5px; line-height: 1.1; text-align: center; color: #fff; background: rgba(20, 14, 26, .55); border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-wrap .cb-pc { font-size: clamp(22px, 5vw, 34px); }
.ch-pick { display: grid; gap: 8px; }
.ch-acts { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; }
.ch-acts .sh-act { padding: 9px 10px; }
.ch-pieces { display: grid; gap: 6px; margin: 4px 0 10px; }
.ch-pc-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ch-pc-btn { font: inherit; display: grid; justify-items: center; gap: 2px; padding: 10px 8px; border-radius: 12px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); cursor: pointer; text-align: center; }
.ch-pc-btn.on { border-color: #c9a55a; box-shadow: 0 0 0 1.5px #c9a55a, 0 6px 16px -10px #c9a55a; background: color-mix(in srgb, #c9a55a 10%, var(--sheet)); }
.cpb-ic { font-size: 34px; line-height: 1; font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Noto Sans Symbols2', serif; }
.ch-pc-btn small { font-size: 11px; color: var(--ink-3, #888); line-height: 1.35; }
.ch-role { font-size: 20px; font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Noto Sans Symbols2', serif; }
.pu-ic { font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Noto Sans Symbols2', sans-serif; }
@keyframes chDash { to { stroke-dashoffset: -.26; } }

/* 마법사 체스 3: 쓸어 담기 8×8 */
.cb8-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 440px; margin: 0 auto; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 3px #4a4550, 0 0 22px -6px rgba(240, 230, 210, .45); }
.cs { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; font: inherit; background: #f5f3ef; transition: background-color .25s; }
.cs.dk { background: #d6d3cd; }
.cs.own { background: color-mix(in srgb, var(--oc) 78%, #fff); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--oc) 85%, #000 15%); } .cs.own.dk { background: color-mix(in srgb, var(--oc) 88%, #fff); }
.cs.own::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 70%); animation: csClaim .6s ease-out; }
.cs.edge:not(.own) { box-shadow: inset 0 -3px 0 rgba(200, 60, 50, .5); }
button.cs { cursor: pointer; } button.cs:hover { filter: brightness(1.12); }
.cs.aim { box-shadow: inset 0 0 0 3px #e8a317, inset 0 0 16px rgba(240, 170, 40, .75); }
.cs.aim .cs-pc { animation: csShake .5s ease-in-out infinite; }
.cs.sel { box-shadow: inset 0 0 0 3px #fff, 0 0 12px rgba(255, 255, 255, .9); z-index: 1; }
.cs-pc { font-size: clamp(16px, 4.2vw, 28px); line-height: 1; color: #1a1420; text-shadow: 0 1px 0 rgba(255, 255, 255, .3), 0 3px 5px rgba(0, 0, 0, .35); font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Noto Sans Symbols2', serif; }
.cs-pc.k-king { color: #4a1028; font-size: clamp(18px, 4.8vw, 32px); } .cs-pc.k-queen { color: #3a1638; }
.cs-pips { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font-size: 6px; letter-spacing: 1px; color: #b8322a; line-height: 1; } .cs-pips b { font-size: 9px; letter-spacing: 0; }
.cs-arrow { position: absolute; right: 2px; bottom: 6px; font-style: normal; font-size: 11px; font-weight: 800; color: #e2443a; animation: csDown 1s ease-in-out infinite; }
.cs-arrow.breach { color: #ff2a1a; font-size: 14px; }
.cs.mov { box-shadow: inset 0 0 0 2px rgba(226, 68, 58, .55); }
.cb8-wall { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-size: 12px; color: #e8dcc4; }
.cb8-hearts { display: inline-flex; gap: 4px; } .cb8-hearts i { width: 22px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(240, 210, 150, .3); } .cb8-hearts i.on { background: linear-gradient(180deg, #d9b26a, #9a7230); }
.ch-shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ch-shape { font: inherit; display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); cursor: pointer; text-align: center; }
.ch-shape.on { border-color: #c9a55a; box-shadow: 0 0 0 1.5px #c9a55a; background: color-mix(in srgb, #c9a55a 12%, var(--sheet)); }
.ch-shape:disabled { opacity: .45; cursor: default; }
.chs-ic svg { width: 28px; height: 28px; fill: color-mix(in srgb, #c9a55a 45%, transparent); stroke: #c9a55a; } .chs-ic svg .c { fill: #ffe08a; stroke: none; }
.ch-shape small { font-size: 10.5px; color: var(--ink-3, #888); line-height: 1.3; }
.ch-go { gap: 8px; flex-wrap: wrap; }
.ch-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--rc); flex: none; }
.pu.sh-mem[style*='--rc']::before { background: var(--rc); }
@keyframes csClaim { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.4); } }
@keyframes csShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes csDown { 50% { transform: translateY(3px); } }
@media (max-width: 640px) { .ch-shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 마법사 체스 3+: 보물 · 합동 · 땅부자 */
.cs.ally::after { content: ''; position: absolute; inset: 3px; border: 2px dashed var(--ac); border-radius: 4px; opacity: .85; pointer-events: none; }
.cs.combo { box-shadow: inset 0 0 0 3px #ffe08a, inset 0 0 18px var(--ac, #ffb36b); }
.cs.combo .cs-pc { animation: csShake .35s ease-in-out infinite; }
.cs-tr { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; font-style: normal; z-index: 1; animation: csTw 1.8s ease-in-out infinite; }
.cs-tr svg { width: 9px; height: 9px; }
.cs-tr.tr-star { background: #fff4c4; box-shadow: 0 0 6px 1px rgba(255, 210, 90, .9); } .cs-tr.tr-star svg { fill: #c98a12; }
.cs-tr.tr-glass { background: #e2eeff; box-shadow: 0 0 6px 1px rgba(120, 170, 255, .85); } .cs-tr.tr-glass svg { stroke: #3b62b8; }
.cs-tr.tr-wall { background: #e4f4dc; box-shadow: 0 0 6px 1px rgba(120, 200, 110, .85); } .cs-tr.tr-wall svg { stroke: #3d7a2e; }
@keyframes csTw { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.ch-crown { flex-shrink: 0; white-space: nowrap; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700; color: #7a5410; background: linear-gradient(180deg, #fff1bd, #f3cf6a); box-shadow: 0 0 0 1px rgba(160, 110, 20, .35); }
.lg.lg-combo span { color: #b8681a; font-weight: 600; }
.lg.lg-treasure span { color: #2f7a8a; font-weight: 600; }

.ch-today { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #d9b46a 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #d9b46a 35%, transparent); }
.ch-today-k { font-size: 10.5px; letter-spacing: .1em; color: #a07a2c; } .ch-today b { font-family: var(--f-display); }
.crm { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.crm-board { display: grid; grid-template-columns: repeat(8, 1fr); width: 168px; flex-shrink: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 2px #4a4550; }
.crm-board i { aspect-ratio: 1; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #1a1420; background: #f5f3ef; }
.crm-board i.dk { background: #d6d3cd; } .crm-board i.own { background: color-mix(in srgb, var(--oc) 80%, #fff); } .crm-board i.own.dk { background: color-mix(in srgb, var(--oc) 90%, #fff); }
.crm-side { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.crm-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.crm-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--oc); }
.crm-bar { flex-basis: 100%; height: 5px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; } .crm-bar i { display: block; height: 100%; background: var(--oc); border-radius: 9px; }
/* 요일 행사: 출석 도장 상자 맨 위 한 줄 */
.att-card .wd-ev { display: flex; align-items: center; gap: 10px; margin: -2px 0 10px; padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--wc) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wc) 28%, transparent); }
.wd-ic { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--wc); }
.wd-ic svg { width: 14px; height: 14px; }
.wd-t { display: flex; flex-direction: column; min-width: 0; gap: 0; line-height: 1.35; } .wd-k { font-size: 12px; color: color-mix(in srgb, var(--wc) 70%, var(--ink)); } .wd-k b { font-family: var(--f-display); font-size: 13.5px; } .wd-t .small { opacity: .85; }
/* 함께 다니는 생물의 선물 */
.pg-card { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 14px; border-radius: 14px; background: radial-gradient(ellipse at 0% 50%, color-mix(in srgb, #e8a6b8 20%, transparent), transparent 60%), var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, #e8a6b8 35%, transparent); }
.pg-card.done { opacity: .78; }
.pg-pic { flex-shrink: 0; width: 46px; height: 46px; display: grid; place-items: center; animation: beBob 2.6s ease-in-out infinite; } .pg-pic svg { width: 46px; height: 46px; }
.pg-card.done .pg-pic { animation: none; }
.pg-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .pg-k { font-size: 10.5px; letter-spacing: .08em; color: #b46a80; } .pg-t b { font-family: var(--f-display); font-size: 15px; }
/* 성의 비밀 */
.secret-glint { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 12px 6px 10px; border: 0; border-radius: 99px; font: inherit; font-size: 12.5px; font-style: italic; color: #fff4d8; background: rgba(20, 16, 30, .42); box-shadow: inset 0 0 0 1px rgba(255, 230, 170, .35); cursor: pointer; animation: sgPulse 2.8s ease-in-out infinite; text-align: left; }
.secret-glint i { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px 3px rgba(255, 220, 140, .9); animation: phTw 1.8s ease-in-out infinite; }
.secret-glint:hover { background: rgba(20, 16, 30, .6); }
@keyframes sgPulse { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 230, 170, .3); } 50% { box-shadow: inset 0 0 0 1px rgba(255, 230, 170, .7), 0 0 14px rgba(255, 220, 140, .45); } }
.secret-modal { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.secret-modal .sm-ic { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: #142438; background: radial-gradient(circle at 35% 30%, #e2efff, #7fa6d8 70%); box-shadow: 0 0 22px rgba(120, 170, 255, .55); }
.secret-modal .sm-ic .ico { width: 28px; height: 28px; } .secret-modal h3 { margin: 0; font-family: var(--f-display); } .secret-modal .row { align-self: stretch; }
/* 메인 이야기 */
.stc { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(100deg, color-mix(in srgb, #8a4a3a 14%, var(--card)), var(--card) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #8a4a3a 28%, transparent); }
.stc-ic { flex-shrink: 0; width: 38px; height: 44px; display: grid; place-items: center; border-radius: 4px 8px 8px 4px; color: #f6e6c8; background: linear-gradient(90deg, #5a2e24 0 18%, #7a3e30 18%); box-shadow: 0 3px 8px -3px rgba(60, 20, 10, .5); }
.stc-ic .ico { width: 18px; height: 18px; }
.stc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .stc-k { font-size: 10.5px; letter-spacing: .06em; color: #9a5a48; } .stc-t b { font-family: var(--f-display); font-size: 15px; }
.stc-prog { display: flex; gap: 4px; margin-top: 3px; } .stc-prog i { width: 16px; height: 4px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 12%, transparent); } .stc-prog i.on { background: #9a5a48; } .stc-prog i.cur { background: linear-gradient(90deg, #9a5a48 50%, color-mix(in srgb, #9a5a48 30%, transparent) 50%); }
.stc-wait { flex-shrink: 0; } .stc.done .stc-t .small { line-height: 1.45; }
.story-modal { display: flex; flex-direction: column; gap: 10px; }
.story-modal .eyebrow { color: #9a5a48; }
.sm-text, .sm-out { margin: 0; font-family: var(--f-display); font-size: 16px; line-height: 1.75; padding: 14px 16px; border-radius: 10px; background: color-mix(in srgb, #f3e6c8 45%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #9a5a48 18%, transparent); }
.sm-choices { display: flex; flex-direction: column; gap: 6px; }
.sm-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; font: inherit; text-align: left; color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc) 35%, transparent); cursor: pointer; transition: background .15s, transform .15s; }
.sm-choice:hover { background: color-mix(in srgb, var(--vc) 10%, var(--card)); transform: translateX(3px); }
.sm-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--vc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vc) 22%, transparent); }
.sm-gain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sm-v { padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #fff; background: var(--vc); }
.sm-ch, .sm-end { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, #d9b46a 14%, transparent); } .sm-end p { margin: 2px 0 0; font-family: var(--f-display); line-height: 1.6; }
.ptr-adm { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #c0503a 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c0503a 25%, transparent); }

.widgets, :root:not([data-rail="icon"]) .widgets { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; }
/* 이야기 책 */
.modal:has(> .book) { width: min(820px, 100%); padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; }
.book { position: relative; padding: 10px; border-radius: 10px; background: linear-gradient(135deg, #6a2e24, #4a1e18); box-shadow: 0 20px 40px -12px rgba(20, 8, 4, .7), inset 0 0 0 2px rgba(220, 170, 100, .35); }
.bk-spread { position: relative; display: grid; grid-template-columns: 1fr 1.25fr; border-radius: 4px; overflow: hidden; color: #3a2a1c; background: #f6ecd6; box-shadow: inset 0 0 40px rgba(140, 100, 50, .18); }
.bk-spread::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(100% / 2.25); width: 34px; margin-left: -17px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(110, 70, 30, .22) 45%, rgba(60, 30, 10, .32) 50%, rgba(110, 70, 30, .22) 55%, transparent); z-index: 1; }
.bk-page { position: relative; padding: 26px 26px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bk-left { align-items: center; justify-content: center; text-align: center; background: linear-gradient(90deg, #efe2c6, #f6ecd6 85%); }
.bk-orn { width: 120px; height: 24px; fill: none; stroke: #a8784a; stroke-width: 1.4; stroke-linejoin: round; } .bk-chname { font-size: 26px !important; }
.bk-right { background: linear-gradient(90deg, #f6ecd6 10%, #f2e6cc); }
.bk-run { font-size: 10.5px; letter-spacing: .3em; color: #9a7a5a; }
.bk-chno { margin-top: 6px; font-size: 11px; letter-spacing: .25em; color: #8a5a3a; }
.bk-chname { font-family: var(--f-display); font-size: 21px; color: #4a2a18; }
.bk-dots { display: flex; gap: 6px; } .bk-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(120, 80, 40, .2); } .bk-dots i.on { background: #8a4a32; } .bk-dots i.cur { background: transparent; box-shadow: inset 0 0 0 1.5px #8a4a32; }
.bk-frame { display: block; width: min(190px, 70%); aspect-ratio: 4 / 5; padding: 9px; border-radius: 3px; background: linear-gradient(135deg, #e8c46a, #a87a28 40%, #f0d488 60%, #8a6020); box-shadow: 0 6px 14px -6px rgba(60, 30, 10, .55), inset 0 0 0 2px rgba(255, 240, 200, .45); }
.bk-frame img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.bk-frame svg { width: 100%; height: 100%; display: block; background: #3a2c3a; border-radius: 1px; }
.bk-frame svg .bg { fill: #4a3a4a; } .bk-frame svg .win { fill: #9ab8d8; opacity: .55; } .bk-frame svg .mull { stroke: #4a3a4a; stroke-width: 3; }
.bk-frame svg .chair { fill: none; stroke: #c9a26a; stroke-width: 3; stroke-linecap: round; } .bk-frame svg .cup { fill: #efe4cc; stroke: #efe4cc; stroke-width: 1.5; } .bk-frame svg .steam { fill: none; stroke: #efe4cc; stroke-width: 1.2; opacity: .7; animation: bkSteam 3s ease-in-out infinite; }
@keyframes bkSteam { 0%, 100% { opacity: .15; transform: translateY(1px); } 50% { opacity: .8; transform: translateY(-2px); } }
.bk-frame.sm { width: 40px; padding: 3px; flex-shrink: 0; box-shadow: 0 2px 6px -2px rgba(60, 30, 10, .5), inset 0 0 0 1px rgba(255, 240, 200, .45); }
.bk-text { margin: 0; font-family: var(--f-display); font-size: 16px; line-height: 1.85; color: #3a2a1c; }
.bk-text.dropcap::first-letter { float: left; font-size: 2.6em; line-height: .9; padding: 4px 6px 0 0; color: #8a3a26; }
.book .sm-choice { color: #3a2a1c; background: rgba(255, 252, 244, .7); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc) 45%, transparent); }
.book .sm-choice:hover { background: color-mix(in srgb, var(--vc) 12%, #fffaf0); }
.book .small, .book .faint { color: #8a7258; } .book .sm-end, .book .sm-ch { background: rgba(200, 160, 80, .18); } .book .sm-end p { color: #3a2a1c; }
.bk-next { margin-top: auto; } .bk-foot { margin-top: auto; }
.bk-x { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #f6ecd6; background: #4a1e18; box-shadow: 0 2px 8px rgba(0, 0, 0, .4), inset 0 0 0 1.5px rgba(220, 170, 100, .5); cursor: pointer; z-index: 2; }
.bk-x .ico { width: 16px; height: 16px; }
.bk-adm { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; } .bk-adm input { flex: 1 1 160px; min-width: 0; font-size: 12px; }
@media (max-width: 620px) { .bk-spread { grid-template-columns: 1fr; } .bk-spread::before { display: none; } .bk-left { padding: 18px 18px 14px; border-bottom: 1px dashed rgba(120, 80, 40, .3); } .bk-frame { width: 120px; } .bk-chname { font-size: 18px; } .bk-page.bk-right { padding: 18px; } .bk-text { font-size: 15px; } .bk-x { top: -8px; right: -8px; } }

/* 시계 상자: 요일 행사 한 줄 + 출석 도장 단추 */
.hc-wd { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font-size: 12px; line-height: 1.4; color: color-mix(in srgb, var(--wc) 28%, #fffaf0); text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 8px rgba(0, 0, 0, .25); }
.sky-day .hc-wd, .sky-dusk .hc-wd { color: color-mix(in srgb, var(--wc) 22%, #fffdf6); text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 10px rgba(0, 0, 0, .3); }
.hc-wd .ico { width: 12px; height: 12px; align-self: center; } .hc-wd b { font-family: var(--f-display); font-weight: 700; } .hc-wd-d { opacity: .95; }
.home-clock > * { min-width: 0; } .hc-main { min-width: 0; }
.hc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; opacity: 1 !important; } .hc-foot > span:first-child { opacity: .65; }
.hc-stamp { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 0; border-radius: 10px; font: inherit; color: inherit; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 230, 190, .25); cursor: pointer; transition: transform .15s, background .15s; }
.hc-stamp:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .14); }
.hcs-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; font-size: 16px; background: #f4e7cc; box-shadow: inset 0 0 0 1.5px #c99a5a; }
.hcs-ink { font-style: normal; font-size: 9px; font-weight: 800; color: #b8322a; border: 1.5px solid #b8322a; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; transform: rotate(-12deg); }
.hcs-t { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .hcs-t b { font-size: 12px; } .hcs-t small { font-size: 10.5px; opacity: .8; }
.hc-stamp.ready { box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .6), 0 0 0 0 rgba(255, 200, 120, .6); animation: hcsPulse 2.2s ease-in-out infinite; }
.hc-stamp.done { opacity: .75; }
@keyframes hcsPulse { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .6), 0 0 0 0 rgba(255, 200, 120, .45); } 50% { box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .8), 0 0 0 6px rgba(255, 200, 120, 0); } }
.att-pop { display: grid; gap: 10px; } .att-pop .att-card { margin: 0; } .att-pop.stamped .att-card { animation: attPop .5s ease-out; }
@keyframes attPop { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
/* 지난 이야기 · 관리자 이야기 진행 */
.stc-btns { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.story-log { display: grid; gap: 10px; } .sl-title { font-family: var(--f-display); font-size: 17px; }
.sp-tallies { display: flex; flex-wrap: wrap; gap: 6px; } .sp-tally { padding: 2px 10px; border-radius: 99px; font-size: 12px; background: color-mix(in srgb, var(--vc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc) 35%, transparent); } .sp-tally b { color: var(--vc); }
.sp-ch { border-radius: 10px; background: color-mix(in srgb, #f3e6c8 30%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #9a5a48 18%, transparent); padding: 4px 12px; margin-top: 6px; }
.sp-ch summary { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none; } .sp-ch summary::-webkit-details-marker { display: none; }
.sp-ch summary b { font-family: var(--f-display); flex: 1; } .sp-no { font-size: 11px; letter-spacing: .1em; color: #9a5a48; }
.sp-scene { padding: 8px 0 10px; border-top: 1px dashed color-mix(in srgb, #9a5a48 25%, transparent); display: grid; gap: 6px; }
.sp-text { margin: 0; font-size: 13px; line-height: 1.6; opacity: .85; } .sp-out { margin: 0; font-family: var(--f-display); font-size: 13.5px; line-height: 1.6; }
.sp-pick { display: flex; align-items: center; gap: 8px; font-size: 13px; } .sp-pick .sm-v { flex-shrink: 0; }
.sd-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; margin-top: 6px; }
.sd-list { display: grid; gap: 6px; margin-top: 8px; }
.sd-stu { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line, rgba(127,127,127,.25)); } .sd-stu.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, #9a5a48 45%, transparent); }
.sd-head { width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.sd-head b { color: var(--pc, inherit); } .sd-prog { flex: 1 1 80px; height: 6px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; } .sd-prog i { display: block; height: 100%; background: #9a5a48; border-radius: 9px; }
.sd-path { padding: 0 12px 10px; }
.sd-scene { padding: 8px 0; border-top: 1px dashed color-mix(in srgb, #9a5a48 22%, transparent); display: grid; gap: 4px; }
.sd-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 22px; align-items: center; gap: 8px; font-size: 12.5px; } .sd-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-bar { height: 7px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; } .sd-bar i { display: block; height: 100%; background: var(--vc); }

/* 도서관: 목록 카드함 · 금서 구역 */
.lib-top, .rs-top { display: flex; align-items: center; gap: 12px; } .lib-top > div, .rs-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lib-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #6a4a24; background: linear-gradient(180deg, #f3e2bc, #dcc08a); box-shadow: inset 0 0 0 1px rgba(120, 80, 30, .35); } .lib-ic .ico { width: 20px; height: 20px; }
.lib-q { width: 100%; }
.lib-types { gap: 4px; }
.lib-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 460px; overflow-y: auto; padding: 2px; }
.lib-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 6px; color: #3a2a18; background: #fbf4e2; box-shadow: 0 1px 0 rgba(120, 80, 30, .15), inset 0 22px 0 -21px rgba(190, 70, 60, .45); background-image: repeating-linear-gradient(180deg, transparent 0 19px, rgba(90, 130, 180, .14) 19px 20px); background-position: 0 28px; }
.lib-h { display: flex; align-items: center; gap: 6px; } .lib-h b { flex: 1; min-width: 0; font-family: var(--f-display); }
.lib-ty { flex-shrink: 0; padding: 0 7px; border-radius: 99px; font-size: 10.5px; color: #6a4a24; background: rgba(200, 160, 90, .25); }
.lib-desc { line-height: 1.5; } .lib-card .faint, .lib-card .muted { color: #8a7258 !important; } .lib-inc { font-style: italic; color: #7a3a26; }
.rs-panel { color: #e8e0f0; background: radial-gradient(ellipse at 15% 0%, rgba(140, 110, 200, .22), transparent 60%), linear-gradient(160deg, #241e30, #15111c) !important; box-shadow: inset 0 0 0 1px rgba(170, 140, 220, .25) !important; }
.rs-panel .small { color: #c8bcd8; }
.rs-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #241e30; background: radial-gradient(circle at 35% 30%, #f3e6ff, #a88ad8 70%); box-shadow: 0 0 14px rgba(170, 140, 230, .5); } .rs-ic .ico { width: 18px; height: 18px; }
.rs-count { flex-shrink: 0; font-size: 12px; padding: 2px 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); } .rs-count b { color: #f0d592; }
.rs-closed { padding: 12px 14px; border-radius: 10px; font-family: var(--f-display); font-size: 14px; line-height: 1.6; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(170, 140, 220, .18); }
.rs-warn { color: #e6c8a0 !important; }
.rs-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.rs-book { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 120px; padding: 12px 12px 12px 22px; border: 0; border-radius: 3px 8px 8px 3px; font: inherit; text-align: left; color: #f6ead0; background: linear-gradient(135deg, #5a2a3a, #3a1826); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(240, 200, 140, .25); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.rs-book:nth-child(2) { background: linear-gradient(135deg, #2a3a5a, #18223a); } .rs-book:nth-child(3) { background: linear-gradient(135deg, #2e4a32, #1a2a1c); }
.rs-book:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .8), 0 0 18px rgba(200, 170, 255, .25), inset 0 0 0 1px rgba(240, 200, 140, .45); }
.rs-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; border-radius: 3px 0 0 3px; background: repeating-linear-gradient(180deg, rgba(240, 200, 120, .55) 0 2px, transparent 2px 18px), rgba(0, 0, 0, .3); }
.rs-book b { font-family: var(--f-display); font-size: 14px; line-height: 1.35; } .rs-book small { font-size: 11px; opacity: .75; }
.rs-book.read { opacity: .78; }
.rs-note { border-radius: 10px; padding: 6px 12px; background: rgba(255, 255, 255, .05); } .rs-note summary { cursor: pointer; font-size: 13px; padding: 4px 0; }
.rs-entry { padding: 8px 0; border-top: 1px dashed rgba(200, 180, 230, .2); } .rs-entry p { margin: 4px 0 0; font-family: var(--f-display); font-size: 13.5px; line-height: 1.6; color: #e0d6ec; }
.rs-modal { display: grid; gap: 8px; } .rs-modal h3 { margin: 0; font-family: var(--f-display); } .rs-lore { margin: 0; padding: 14px 16px; border-radius: 10px; font-family: var(--f-display); font-size: 15.5px; line-height: 1.8; color: #2a2030; background: #efe6d4; box-shadow: inset 0 0 30px rgba(110, 80, 40, .2); }
.rs-modal.caught h3 { color: #c0503a; }

.no-doodle { margin: 0; font-family: var(--f-display); line-height: 1.7; opacity: .85; }

/* 책 빌리기 · 숨은 선택지 */
.loan-shelf { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(180deg, transparent 0 calc(100% - 8px), #6b4a2a calc(100% - 8px)), color-mix(in srgb, #9a6a34 10%, transparent); }
.loan-row { display: flex; gap: 4px; align-items: flex-end; overflow-x: auto; padding: 4px 2px 8px; }
.loan-spine { flex: 0 0 auto; width: 44px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 2px; border: 0; border-radius: 3px; font: inherit; color: #f6ead0; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 30%, rgba(255,255,255,.12) 55%, rgba(0,0,0,.2)), var(--bc); box-shadow: inset 0 6px 0 -3px rgba(240, 200, 120, .55), inset 0 -6px 0 -3px rgba(240, 200, 120, .55), 0 2px 4px rgba(0,0,0,.3); cursor: pointer; transition: transform .2s; }
.loan-spine:nth-child(3n) { height: 140px; } .loan-spine:nth-child(4n+1) { height: 156px; }
.loan-spine:hover { transform: translateY(-6px); }
.loan-spine b { writing-mode: vertical-rl; font-family: var(--f-display); font-size: 11.5px; letter-spacing: 0; line-height: 1.05; height: 108px; flex: none; overflow: hidden; white-space: nowrap; } .loan-spine small { font-size: 9.5px; opacity: .8; }
.loan-now { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #9a6a34 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #9a6a34 30%, transparent); }
.loan-now .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .loan-now b { font-family: var(--f-display); }
.loan-now.late { background: color-mix(in srgb, #c0503a 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c0503a 40%, transparent); }
.loan-book { flex-shrink: 0; width: 26px; height: 36px; border-radius: 2px 4px 4px 2px; background: linear-gradient(90deg, rgba(0,0,0,.3) 0 4px, transparent 4px), var(--bc); box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.sm-choice.secret { background: linear-gradient(90deg, rgba(110, 74, 142, .12), rgba(255, 252, 244, .7)) !important; box-shadow: inset 0 0 0 1px rgba(110, 74, 142, .55) !important; }
.sm-forbid { margin-left: auto; flex-shrink: 0; padding: 1px 8px; border-radius: 99px; font-size: 10.5px; color: #fff; background: #6e4a8e; }

.lib-src { display: flex; align-items: flex-start; gap: 4px; font-size: 12px; color: #6a4a24; } .lib-src .ico { flex-shrink: 0; width: 13px; height: 13px; margin-top: 2px; }

/* 출석 도장 바로가기 · 부엉이장 */
.sc-stamp .sc-ic { background: #f4e7cc; box-shadow: inset 0 0 0 1.5px #c99a5a; font-size: 17px; } .sc-stamp.ready { box-shadow: inset 0 0 0 1px rgba(220, 160, 90, .55); animation: hcsPulse 2.4s ease-in-out infinite; } .sc-stamp.done { opacity: .85; }
.owl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.owl-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; border-radius: 14px; text-align: center; background: color-mix(in srgb, #8a6a40 8%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #8a6a40 22%, transparent); }
.owl-card.bond { box-shadow: inset 0 0 0 1.5px #d9b46a, 0 0 14px -4px rgba(217, 180, 106, .6); } .owl-card.me { background: color-mix(in srgb, #d9b46a 16%, var(--card)); }
.owl-card b { font-family: var(--f-display); } .owl-pic { animation: owlBob 3.2s ease-in-out infinite; } .owl-card:nth-child(2n) .owl-pic { animation-delay: -1.4s; }
.owl-svg .owl-eye { animation: owlBlink 5s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes owlBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes owlBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.owl-hearts { display: flex; gap: 2px; } .owl-hearts i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 14%, transparent); } .owl-hearts i.on { background: #d9789a; }
.owl-hunt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #2a3463 10%, transparent); } .owl-hunt .grow { display: flex; flex-direction: column; gap: 2px; }
.owl-hunt.night { color: #e8ecff; background: radial-gradient(ellipse at 85% 20%, rgba(255, 244, 207, .25), transparent 40%), linear-gradient(160deg, #2a3463, #161c3d); } .owl-hunt.night .small { color: #c8d0f0; }
.fth-row { display: flex; flex-wrap: wrap; gap: 6px 12px; } .fth { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.fth-ic { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; } .fth-ic .ico { width: 13px; height: 13px; }
.fth-snow { background: #eef3fa; color: #7a9ab8; } .fth-ash { background: #e4e2e2; color: #5a5a62; } .fth-tawny { background: #f0e0cc; color: #8a5a32; } .fth-gold { background: #fff1bd; color: #b8892a; box-shadow: 0 0 8px rgba(230, 190, 80, .7); }
.quill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.quill { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc) 35%, transparent); background: color-mix(in srgb, var(--qc) 7%, var(--card)); }
.quill.use { box-shadow: inset 0 0 0 2px var(--qc); } .quill b { color: var(--qc); font-family: var(--f-display); } .quill-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--qc); } .quill-ic .ico { width: 14px; height: 14px; }
.anon-panel textarea, .anon-modal textarea { width: 100%; resize: vertical; } .anon-done { padding: 10px 12px; border-radius: 10px; font-family: var(--f-display); background: color-mix(in srgb, #6e7fa8 10%, transparent); }
.anon-modal { display: grid; gap: 8px; }
.anon-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #6e7fa8; } .anon-tag .ico { width: 14px; height: 14px; }
.letter .x.quilled { color: var(--qc); font-family: var(--f-display); }
.owl-sign { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #8a6a40; } .owl-sign .ico { width: 13px; height: 13px; }

.chat-link { color: var(--accent, #5a86c8); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .chat-link:hover { opacity: .8; }

.place-btn { gap: 6px; min-width: 0; }
.pb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .pb-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pb-top .stars, .pb-top > span:last-child { flex-shrink: 0; font-size: 11px; }
.pb-tags { display: flex; flex-wrap: wrap; gap: 4px; } .pb-tags i { font-style: normal; font-size: 11.5px; line-height: 1.5; padding: 0 8px; border-radius: 99px; color: var(--ink-2, inherit); background: color-mix(in srgb, var(--accent, #c9a24a) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #c9a24a) 22%, transparent); }
.pb-tags i.more { background: none; opacity: .7; } .pb-note { font-size: 12px; opacity: .75; }

/* 입장 양피지 */
.parch { position: relative; padding: 14px; border-radius: 6px; background: radial-gradient(ellipse at 30% 20%, #f6ead0, #e6d2a6 70%, #cfb581); box-shadow: 0 20px 40px -14px rgba(30, 18, 6, .7), inset 0 0 50px rgba(120, 80, 30, .35); color: #3a2a18; animation: parchIn .6s ease-out; }
.parch::before, .parch::after { content: ''; position: absolute; left: -6px; right: -6px; height: 16px; border-radius: 8px; background: linear-gradient(180deg, #c9a46a, #8a6a3a); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.parch::before { top: -8px; } .parch::after { bottom: -8px; }
.parch-in { display: grid; gap: 12px; padding: 18px 16px; border: 1px dashed rgba(120, 80, 30, .35); border-radius: 4px; text-align: center; }
.parch-k { font-size: 11px; letter-spacing: .35em; color: #8a5a32; }
.parch-lead { margin: 0; font-family: var(--f-display); font-size: 15px; line-height: 1.8; }
.parch-hint { margin: 0; font-family: var(--f-display); font-style: italic; color: #7a3a26; }
.parch-form { display: grid; gap: 8px; } .parch-form input { text-align: center; font-family: var(--f-display); font-size: 15px; color: #2a1c10; background: rgba(255, 250, 235, .65); border: 0; border-bottom: 2px solid rgba(90, 50, 20, .45); border-radius: 0; }
.parch-ink { margin: 0; min-height: 1.6em; font-family: var(--f-display); line-height: 1.7; color: #5a2a1a; }
.parch .btn.quiet { color: #6a4a2a !important; background: rgba(120, 80, 30, .12) !important; border-color: rgba(120, 80, 30, .3) !important; justify-self: center; }
.parch .parch-form input { color: #2a1c10 !important; background: rgba(255, 250, 235, .7) !important; border: 0 !important; border-bottom: 2px solid rgba(90, 50, 20, .5) !important; box-shadow: none !important; border-radius: 4px 4px 0 0 !important; } .parch .parch-form input::placeholder { color: rgba(90, 60, 30, .55); }
.parch.fail { animation: parchShake .45s ease-in-out; } .parch.fail .parch-ink { color: #9a2a1a; }
.parch.open .parch-ink { animation: inkIn 1.2s ease-out both; } .parch.open { box-shadow: 0 20px 40px -14px rgba(30, 18, 6, .7), inset 0 0 50px rgba(120, 80, 30, .25), 0 0 30px rgba(240, 210, 140, .55); }
@keyframes parchIn { from { opacity: 0; transform: translateY(10px) scaleY(.92); } to { opacity: 1; transform: none; } }
@keyframes parchShake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px) rotate(-1deg); } 75% { transform: translateX(6px) rotate(1deg); } }
@keyframes inkIn { from { opacity: 0; filter: blur(4px); letter-spacing: .2em; } to { opacity: 1; filter: none; letter-spacing: 0; } }
.gate-note-ok { border-color: #c9a46a; }

/* 모두의 알: 주인별 둥지 */
.nests { display: grid; gap: 10px; }
.nests > details.nest { display: block !important; grid-template-columns: none !important; } .nests > details.nest > summary { display: flex !important; width: auto !important; flex-direction: row !important; }
.nest > .cr-list.compact { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; gap: 8px; }
.nest { border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, #b8864a 28%, transparent); overflow: hidden; }
.nest.todo { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #e0a34a 55%, transparent); }
.nest > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; cursor: pointer; list-style: none; background: linear-gradient(90deg, color-mix(in srgb, #b8864a 12%, transparent), transparent 70%); }
.nest > summary::-webkit-details-marker { display: none; }
.nest > summary::after { content: '▾'; margin-left: 4px; opacity: .5; transition: transform .2s; } .nest:not([open]) > summary::after { transform: rotate(-90deg); }
.nest-ic { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, #e8c88a 40%, transparent), transparent 70%); } .nest-ic svg { width: 40px; height: 40px; }
.nest-t { flex: 1; min-width: 140px; display: flex; flex-direction: column; } .nest-t b { font-family: var(--f-display); }
.nest-left { font-size: 12px; font-weight: 700; color: #c07a2a; } .nest-ok { font-size: 12px; opacity: .6; }
.nest > .cr-list { padding: 4px 10px 10px; }

/* 게시판 댓글 접기 · 벌점 알림 */
.bd-cfold { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 10px; border: 0; border-radius: 99px; font: inherit; font-size: 12.5px; color: var(--ink-2, inherit); background: color-mix(in srgb, var(--kc, var(--accent)) 10%, transparent); cursor: pointer; }
.bd-cfold .ico { width: 14px; height: 14px; } .bd-cf-ar { transition: transform .2s; } .bd-cf-ar.up { transform: rotate(180deg); }
.bd-cmts.folded > .bd-cmt { display: none; }
.pen-alert { display: grid; gap: 8px; justify-items: center; text-align: center; }
.pen-ic { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #c0503a; box-shadow: 0 0 0 6px rgba(192, 80, 58, .18); animation: penShake .6s ease-in-out 2; } .pen-ic .ico { width: 26px; height: 26px; }
.pen-alert h3 { margin: 0; font-family: var(--f-display); color: #c0503a; }
.pen-rows { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 15px; }
.pen-why { margin: 0; padding: 8px 14px; border-radius: 10px; font-family: var(--f-display); background: color-mix(in srgb, #c0503a 8%, transparent); }
.pen-alert .row { justify-self: stretch; }
@keyframes penShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }

/* 신입생 보물찾기 */
.fhc { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(100deg, color-mix(in srgb, #d9a93a 16%, var(--card)), var(--card) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9a86a 38%, transparent); }
.fhc-ic { flex-shrink: 0; width: 38px; height: 42px; display: grid; place-items: center; }
.fhc-ic svg { width: 36px; height: 40px; filter: drop-shadow(0 3px 5px rgba(120, 90, 20, .22)); }
.fhc.done .fhc-ic svg { animation: sgPulse 2.8s ease-in-out infinite; }
.fhc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fhc-k { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: color-mix(in srgb, #a77a1c 80%, var(--text)); }
.fhc-t b { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.fhc-btns { flex-shrink: 0; display: flex; gap: 6px; }
.fh-dots { display: flex; gap: 5px; margin-top: 2px; }
.fh-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, #c9a86a 30%, transparent); }
.fh-dots i.on { background: #e0b440; box-shadow: 0 0 5px rgba(230, 180, 60, .7); }
.fh-dots i.cur { background: transparent; box-shadow: inset 0 0 0 1.5px #e0b440; }
@media (max-width: 560px) { .fhc { flex-wrap: wrap; } .fhc-btns { width: 100%; justify-content: flex-end; } }
.fresh-glint i { background: #ffe9a8; box-shadow: 0 0 8px 3px rgba(250, 200, 90, .95); }
.fresh-modal .sm-ic { color: #5a3f10; background: radial-gradient(circle at 35% 30%, #fff6dc, #e2c27a 70%); }
.fresh-modal .sm-ic svg { width: 34px; height: 38px; }
.fh-pick h3 { margin: 4px 0 6px; }
.fh-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 14px; }
.fh-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px 14px; border: 0; border-radius: 14px; font: inherit; color: var(--text); text-align: center; cursor: pointer; background: color-mix(in srgb, #f3e3bc 26%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9a86a 45%, transparent); transition: transform .15s, box-shadow .15s; }
.fh-opt:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px #c9a86a, 0 6px 14px -8px rgba(120, 90, 20, .45); }
.fh-opt b { font-size: 14px; }
.fh-opt .small { color: var(--muted); line-height: 1.45; }
.fh-tk { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.fh-tk .ico { width: 20px; height: 20px; }
.fh-hogsmeade { background: linear-gradient(135deg, #b5546a, #7e3550); }
.fh-forest { background: linear-gradient(135deg, #4f8a5b, #2f5e3b); }
@media (max-width: 420px) { .fh-opts { grid-template-columns: 1fr; } }

/* 비명 지르는 오두막: 저절로 움직이는 모루 (세공) */
[data-tone=refine] { --tone: #6a7a8c; }
.refine-panel { display: flex; flex-direction: column; gap: 14px; }
.rf-hero { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 18px; align-items: center; }
.rf-stage, .refine-stage { position: relative; border-radius: 16px; overflow: hidden; padding: 10px 8px 4px;
  background: radial-gradient(ellipse at 50% 85%, rgba(255, 190, 90, .16), transparent 60%), repeating-linear-gradient(90deg, #241b19 0 34px, #2b211e 34px 36px), #221a18;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 160, .12), inset 0 -30px 50px rgba(0, 0, 0, .45), 0 10px 26px -14px rgba(0, 0, 0, .6); }
.rf-stage::before, .refine-stage::before { content: ''; position: absolute; right: 18px; top: 10px; width: 46px; height: 34px; border-radius: 4px 4px 2px 2px; background: linear-gradient(#1a2440, #2b3a62); box-shadow: inset 0 0 0 3px #3a2a22, 0 0 18px rgba(170, 190, 255, .18); background-image: linear-gradient(90deg, transparent 21px, #3a2a22 21px 25px, transparent 25px), linear-gradient(transparent 15px, #3a2a22 15px 18px, transparent 18px), radial-gradient(circle at 70% 40%, #f3f1de 0 5px, transparent 6px), linear-gradient(#1a2440, #2b3a62); }
.rf-intro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rf-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: color-mix(in srgb, #c99a4a 85%, var(--text)); }
.rf-title { margin: 0; font-family: var(--f-display); font-size: 28px; line-height: 1.15; letter-spacing: .01em; background: linear-gradient(100deg, #f7e2a8, #e2a929 45%, #fff2c8 55%, #c98a1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(226, 169, 41, .25)); background-size: 220% 100%; animation: rfTitle 6s ease-in-out infinite; }
.rf-title.sm { font-size: 22px; }
@keyframes rfTitle { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
.rf-flavor { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--muted); font-style: italic; }
.rf-flavor b { font-style: normal; color: var(--text); }
.rf-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-leg { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 99px; font-size: 12px; background: color-mix(in srgb, var(--rc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 45%, transparent); }
.rf-leg i { width: 8px; height: 8px; transform: rotate(45deg); border-radius: 2px; background: var(--rc); box-shadow: 0 0 8px var(--rc); }
.rf-leg span { color: var(--faint); }
/* 모루 그림 */
.anvil { display: block; width: 100%; height: auto; overflow: visible; }
.anvil .anv-body { transform-box: view-box; transform-origin: 130px 154px; animation: anvBreath 3.4s ease-in-out infinite; }
.anvil .anv-ham { transform-box: view-box; transform-origin: 218px 20px; animation: anvHover 2.6s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(190, 240, 220, .55)); }
.anvil .anv-eyes { transform-box: fill-box; transform-origin: center; animation: anvBlink 4.2s infinite; filter: drop-shadow(0 0 4px rgba(200, 255, 235, .9)); }
.anvil .anv-piece { filter: drop-shadow(0 0 6px var(--gc)); animation: anvPiece 2.4s ease-in-out infinite; }
.anvil .anv-ring { transform-box: view-box; transform-origin: 130px 150px; animation: anvRing 14s linear infinite; opacity: .55; }
.anvil .anv-fl { transform-box: fill-box; transform-origin: 50% 100%; animation: anvFlame 1.1s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px #ffb84a); }
.anvil .anv-fl.b { animation-duration: 1.4s; }
.anvil .anv-sp line, .anvil .anv-flash, .anvil .anv-wave, .anvil .anv-burst { opacity: 0; }
.anvil .anv-flash, .anvil .anv-wave { transform-box: view-box; transform-origin: 136px 69px; }
.anvil .anv-burst { transform-box: view-box; transform-origin: 136px 70px; }
.anvil .anv-mist path { fill: none; stroke: rgba(200, 235, 225, .22); stroke-width: 3; stroke-linecap: round; animation: anvMist 5s ease-in-out infinite; }
.anvil .anv-mist path + path { animation-delay: -2.5s; }
@keyframes anvBreath { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(-1.4deg); } 55% { transform: translateY(0) rotate(1deg); } 75% { transform: translateY(-1px) rotate(0); } }
@keyframes anvHover { 0%, 100% { transform: rotate(-24deg) translateY(0); } 50% { transform: rotate(-17deg) translateY(-4px); } }
@keyframes anvBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes anvPiece { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes anvRing { to { transform: rotate(360deg) scaleY(1); } }
@keyframes anvFlame { from { transform: scale(1, 1) skewX(-3deg); } to { transform: scale(.9, 1.15) skewX(4deg); } }
@keyframes anvMist { 0%, 100% { opacity: .2; transform: translateX(0); } 50% { opacity: .7; transform: translateX(8px); } }
/* 세공 중 */
.anvil.work .anv-ham { animation: anvStrike .8s cubic-bezier(.5, 0, .7, 1) 3; }
.anvil.work .anv-body { animation: anvHop .8s ease-out 3; }
.anvil.work .anv-sp line { animation: anvSpark .8s ease-out 3; animation-delay: var(--dl); }
.anvil.work .anv-flash { animation: anvFlash .8s ease-out 3; }
.anvil.work .anv-wave { animation: anvWave .8s ease-out 3; }
.anvil.work .anv-ring { animation: anvRingFast 3.4s cubic-bezier(.3, 0, .2, 1) forwards; }
.anvil.work .anv-burst { animation: anvBurst 1s 2.45s ease-out forwards; }
.anvil.work .anv-eyes { animation: none; }
@keyframes anvStrike { 0% { transform: rotate(-22deg); } 40% { transform: rotate(-52deg); } 56% { transform: rotate(5deg); } 62% { transform: rotate(1deg); } 100% { transform: rotate(-22deg); } }
@keyframes anvHop { 0%, 55% { transform: translateY(0) rotate(0); } 62% { transform: translateY(-8px) rotate(-2.5deg); } 72% { transform: translateY(0) rotate(1.5deg); } 82%, 100% { transform: translateY(0) rotate(0); } }
@keyframes anvSpark { 0%, 55% { opacity: 0; transform: translate(0, 0); } 58% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes anvFlash { 0%, 55% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes anvWave { 0%, 56% { opacity: 0; transform: scale(1); } 60% { opacity: 1; } 100% { opacity: 0; transform: scale(5.5); } }
@keyframes anvRingFast { 0% { opacity: .5; transform: rotate(0); } 70% { opacity: 1; } 100% { opacity: 1; transform: rotate(540deg); filter: drop-shadow(0 0 6px var(--gc)); } }
@keyframes anvBurst { 0% { opacity: 0; transform: scale(.3) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6) rotate(25deg); } }
.refine-pop { display: flex; flex-direction: column; gap: 10px; }
.refine-pop.working { gap: 8px; position: relative; }
.refine-pop.working .refine-stage { animation: rfShake .8s 3; }
.refine-pop.working::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255, 240, 200, .9), transparent 60%); opacity: 0; animation: rfWhite .9s 2.5s ease-out forwards; }
@keyframes rfWhite { 0% { opacity: 0; } 25% { opacity: .85; } 100% { opacity: 0; } }
@keyframes rfShake { 0%, 55%, 100% { transform: translate(0); } 58% { transform: translate(-3px, 2px); } 62% { transform: translate(3px, -1px); } 66% { transform: translate(-1px, 0); } }
.refine-pop .rf-say { margin: 2px 0 0; text-align: center; font-size: 14.5px; font-style: italic; min-height: 1.6em; color: var(--text); animation: rfSay .8s ease-out; }
@keyframes rfSay { from { opacity: 0; letter-spacing: .12em; } to { opacity: 1; letter-spacing: 0; } }
/* 장비 고르기 · 무늬 명판 */
.rf-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 0; border-radius: 99px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.rf-tab .ico { width: 14px; height: 14px; }
.rf-tab.on { background: color-mix(in srgb, var(--accent) 16%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.rf-tab.off { opacity: .55; }
.rf-tab.gl-r { box-shadow: inset 0 0 0 1px rgba(111, 168, 255, .7), 0 0 10px -3px rgba(111, 168, 255, .8); } .rf-tab.gl-l { box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .8), 0 0 10px -3px rgba(242, 193, 78, .9); }
.rf-dot { position: absolute; top: 2px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #e05a4a; }
.rf-plaque { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 10%, var(--card)), var(--card) 60%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 40%, var(--line)); }
.rf-plaque.gl-l, .rf-plaque.gl-r { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rc) 70%, transparent), 0 0 22px -10px var(--rc); }
.rf-plaque.gl-l::after, .rf-plaque.gl-r::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .12) 50%, transparent 60%); transform: translateX(-120%); animation: glSweep 4.2s ease-in-out infinite; pointer-events: none; }
.rf-ph { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rf-pn { font-family: var(--f-display); font-size: 17px; font-weight: 600; }
.rf-lines { display: inline-flex; gap: 4px; flex: 1; }
.rf-lines i { width: 16px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.rf-lines i.on { background: var(--rc); box-shadow: 0 0 6px var(--rc); }
.rf-empty { display: block; }
.rk-pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.rfk-n { color: #3d4855; background: linear-gradient(135deg, #f1f5fa, #c6d1de); } .rfk-r { color: #fff; background: linear-gradient(135deg, #79b0ff, #3f6fcf); box-shadow: 0 0 8px rgba(111, 168, 255, .5); } .rfk-l { color: #4a3300; background: linear-gradient(135deg, #ffe9a6, #e2a929); box-shadow: 0 0 10px rgba(242, 193, 78, .6); }
.ro-list { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.ro { display: grid; grid-template-columns: 14px minmax(5.5em, 1fr) minmax(0, 72px) auto auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; font-size: 13px; background: color-mix(in srgb, var(--rc) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 22%, transparent); animation: roIn .45s ease-out both; animation-delay: calc(var(--i) * .12s); }
@keyframes roIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.ro-gem { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--rc); box-shadow: 0 0 8px var(--rc); justify-self: center; }
.ro-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-bar { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.ro-bar b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 55%, transparent), var(--rc)); }
.ro-lv { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; }
.ro-v { font-variant-numeric: tabular-nums; text-align: right; color: color-mix(in srgb, var(--rc) 55%, var(--text)); }
/* 세공 도구 카드 */
.rf-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rf-tool { --tc: #9aa4b4; position: relative; display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 14%, var(--card)), var(--card) 55%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 40%, var(--line)); }
.rf-tool::before { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 30%, transparent), transparent 70%); pointer-events: none; }
.rf-tool.rf-plain { --tc: #b8a58a; } .rf-tool.rf-fine { --tc: #79b0ff; } .rf-tool.rf-plus { --tc: #ffc94a; } .rf-tool.rf-basic { --tc: #c9d3df; }
.rf-th { display: flex; gap: 10px; align-items: flex-start; }
.rf-th .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rf-em { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--tc) 85%, #fff), color-mix(in srgb, var(--tc) 70%, #000)); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--tc) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
.rf-em svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rf-tn { font-family: var(--f-display); font-size: 16.5px; letter-spacing: .01em; }
.rf-td { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.rf-odds { display: flex; flex-wrap: wrap; gap: 5px; }
.rf-odds span { padding: 3px 9px; border-radius: 99px; font-size: 11.5px; color: var(--muted); background: color-mix(in srgb, var(--text) 5%, transparent); }
.rf-odds span.on { color: var(--text); background: color-mix(in srgb, var(--tc) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 55%, transparent); }
.rf-odds span.hi { color: color-mix(in srgb, var(--tc) 70%, var(--text)); font-weight: 600; }
.rf-tool .need { display: flex; flex-wrap: wrap; gap: 5px; }
.rf-go { align-self: stretch; justify-content: center; margin-top: auto; }
.rf-go .ico { width: 15px; height: 15px; }
/* 비교 · 결과 */
.rf-rankup { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; animation: rcIn .5s ease-out; }
.rf-rankup > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rf-rankup .small { opacity: .85; }
.rf-ru-ic { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.rf-ru-ic .ico { width: 18px; height: 18px; }
.rf-rankup.gl-l { color: #4a3300; background: linear-gradient(120deg, #fff1c2, #f2c14e); box-shadow: 0 0 18px -4px rgba(242, 193, 78, .8); }
.rf-rankup.gl-r { color: #fff; background: linear-gradient(120deg, #8fbcff, #3f6fcf); box-shadow: 0 0 18px -4px rgba(111, 168, 255, .8); }
.rf-rankup.gl-n { color: #2d3640; background: linear-gradient(120deg, #f5f8fb, #c6d1de); }
.rc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc-col { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.rc-col.new { background: linear-gradient(140deg, color-mix(in srgb, var(--rc) 12%, var(--card)), var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rc) 60%, transparent), 0 0 18px -8px var(--rc); animation: rcIn .5s ease-out; }
.rc-h { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--faint); }
@keyframes rcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .rf-hero { grid-template-columns: 1fr; } .rf-title { font-size: 24px; } }
.rc-col .ro { grid-template-columns: 12px minmax(0, 1fr) auto auto; } .rc-col .ro-bar { display: none; }
.ro-nm { min-width: 4.5em; }
@media (max-width: 520px) { .rc-cols { grid-template-columns: 1fr; } .ro { grid-template-columns: 12px minmax(0, 1fr) auto auto; } .ro-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .anvil *, .rf-title, .ro, .rf-plaque::after { animation: none !important; } }
.gear-refine { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); }
/* 세공한 장비는 빛난다 */
.gear-card.gl-max .gear-art { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .5)); }
.gear-card.gl-n .gear-art { animation: glN 3s ease-in-out infinite; }
.gear-card.gl-r .gear-art { animation: glR 2.6s ease-in-out infinite; }
.gear-card.gl-l .gear-art { animation: glL 2.2s ease-in-out infinite; }
.gear-card.gl-l .gear-pocket, .gear-card.gl-r .gear-pocket { position: relative; overflow: hidden; }
.gear-card.gl-l .gear-pocket::after, .gear-card.gl-r .gear-pocket::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); animation: glSweep 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes glN { 0%, 100% { filter: drop-shadow(0 0 2px rgba(200, 215, 230, .5)); } 50% { filter: drop-shadow(0 0 6px rgba(210, 225, 240, .9)); } }
@keyframes glR { 0%, 100% { filter: drop-shadow(0 0 3px rgba(111, 168, 255, .55)); } 50% { filter: drop-shadow(0 0 9px rgba(111, 168, 255, 1)); } }
@keyframes glL { 0%, 100% { filter: drop-shadow(0 0 4px rgba(242, 193, 78, .65)); } 50% { filter: drop-shadow(0 0 12px rgba(255, 210, 90, 1)); } }
@keyframes glSweep { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .anvil *, .gear-card .gear-art, .gear-pocket::after { animation: none !important; } }

/* 졸업 갈림길: 별 · 직업 · 시간의 흔적 */
.grad-stars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 13px; }
.grad-stars .ico { width: 15px; height: 15px; color: #e2a929; }
.grad-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.gp { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 0; border-radius: 10px; font: inherit; color: var(--text); text-align: left; cursor: pointer; background: color-mix(in srgb, var(--text) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.gp:disabled { opacity: .45; cursor: default; }
.gp.on { background: color-mix(in srgb, var(--accent) 14%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.gp-h { display: flex; align-items: center; gap: 6px; } .gp-h .ico { width: 14px; height: 14px; flex-shrink: 0; } .gp-h b { flex: 1; font-size: 13px; }
.gp-st { font-size: 11px; font-weight: 700; color: #b8860b; }
.prof-legacy { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pl-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; box-sizing: border-box; padding: 0 11px; border-radius: 99px; font-size: 12px; line-height: 1; font-family: inherit; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.pl-chip .ico { width: 13px; height: 13px; }
/* 변신술 교실: 애니마구스 수련 */
[data-tone=animagus] { --tone: #7a6a9a; } [data-tone=boggart] { --tone: #6e5a4a; }
.am-panel { display: flex; flex-direction: column; gap: 10px; }
.am-steps { display: flex; align-items: flex-start; gap: 4px; }
.am-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--faint); min-width: 0; }
.am-step .small { line-height: 1.3; }
.am-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.am-ic .ico { width: 16px; height: 16px; }
.am-step.cur { color: var(--text); } .am-step.cur .am-ic { background: color-mix(in srgb, #7a6a9a 22%, var(--card)); box-shadow: inset 0 0 0 1.5px #7a6a9a; animation: sgPulse 2.6s ease-in-out infinite; }
.am-step.done { color: var(--muted); } .am-step.done .am-ic { color: #fff; background: #7a6a9a; box-shadow: none; }
.am-line { flex: 0 0 18px; height: 2px; margin-top: 16px; background: var(--line); }
.am-now .need { display: flex; flex-wrap: wrap; gap: 5px; }
.am-days { display: flex; align-items: center; gap: 5px; }
.am-days i { width: 18px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.am-days i.on { background: #6aa067; }
.am-form { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: linear-gradient(110deg, color-mix(in srgb, #7a6a9a 16%, var(--card)), var(--card)); }
.am-form > div { display: flex; flex-direction: column; gap: 3px; }
.am-sil { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #a99ad0, #5a4a7e); }
.am-reveal .sm-ic { color: #fff; background: radial-gradient(circle at 35% 30%, #c9bce8, #6a5a90 70%); }
@media (max-width: 520px) { .am-step .small { font-size: 10.5px; } .am-line { flex-basis: 6px; } }
/* 방어술 교실: 보가트 옷장 */
.bg-top { display: flex; gap: 14px; align-items: flex-start; }
.bg-top .grow { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wardrobe { display: block; width: 100%; height: auto; overflow: visible; }
.wardrobe .wd-door { transform-box: fill-box; transform-origin: right center; }
.bg-art .wardrobe { animation: wdRattle 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes wdRattle { 0%, 70%, 100% { transform: rotate(0); } 73% { transform: rotate(-2deg); } 76% { transform: rotate(2deg); } 79% { transform: rotate(-1.5deg); } 82% { transform: rotate(1deg); } }
.bg-pop { display: flex; flex-direction: column; gap: 10px; }
.bg-stage { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: radial-gradient(ellipse at 30% 60%, #3b2e28, #18141a 80%); color: #f3ead8; }
.bg-stage .wardrobe { width: 64px; flex-shrink: 0; }
.bg-pop:not(.res) .bg-stage .wd-door { animation: wdOpen .6s ease-out forwards; }
@keyframes wdOpen { to { transform: scaleX(.18); } }
.wardrobe .wd-eye { opacity: 0; } .bg-pop:not(.res) .wd-eye { animation: wdEye .4s .45s forwards; } @keyframes wdEye { to { opacity: 1; } }
.bg-fear { display: flex; flex-direction: column; gap: 4px; }
.bg-fear .small { color: rgba(243, 234, 216, .65); }
.bg-fear b { font-size: 19px; font-family: var(--f-display); animation: bgLoom .6s ease-out; }
@keyframes bgLoom { from { opacity: 0; transform: scale(.85); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.bg-timer { height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); }
.bg-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #e05a4a, #e2a929); transform-origin: left; animation: bgTime linear forwards; }
@keyframes bgTime { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.bg-opts { display: flex; flex-direction: column; gap: 6px; }
.bg-opt { padding: 10px 14px; border: 0; border-radius: 12px; font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); transition: transform .12s, box-shadow .12s; }
.bg-opt:hover { transform: translateX(3px); box-shadow: inset 0 0 0 1.5px var(--accent); }
.bg-pop.res.win .bg-stage { background: radial-gradient(ellipse at 30% 60%, #4a3a20, #1c1712 80%); }
.bg-pop.res.win .bg-fear b { color: #ffe08a; animation: bgPop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bgPop { from { transform: scale(.6) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.bg-pop.res.lose .bg-stage { animation: rfShake .5s 1; }
@media (prefers-reduced-motion: reduce) { .bg-art .wardrobe, .am-step.cur .am-ic { animation: none; } }

/* 운영 모드(크리에이티브) */
body.creative-on::after { content: '운영 모드'; position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 9000; padding: 4px 12px; border-radius: 99px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #2a1d00; background: linear-gradient(135deg, #ffe08a, #e2a929); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .45); pointer-events: none; }
.creative-panel { display: flex; flex-direction: column; gap: 8px; }
.creative-panel.on { box-shadow: inset 0 0 0 1.5px rgba(226, 169, 41, .7); }
.cr-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; color: var(--muted); }

/* 신입생 보물찾기 · 쪽지 */
.fh-note { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 6px 4px 2px; padding: 26px 22px 18px; color: #3e2f1c; border-radius: 3px 3px 10px 3px; transform: rotate(-.8deg);
  background: linear-gradient(transparent 31px, rgba(150, 120, 80, .16) 32px) 0 14px / 100% 32px, radial-gradient(circle at 92% 8%, rgba(190, 150, 90, .18), transparent 40%), #fbf3df;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .55), inset 0 0 40px rgba(180, 140, 80, .18); clip-path: polygon(0 2%, 6% 0, 14% 1.5%, 24% 0, 36% 1.2%, 50% 0, 62% 1.4%, 74% 0, 86% 1.2%, 100% 0, 100% 100%, 0 100%); }
.fhn-pin { position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a80, #c0392b 70%); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.fhn-to { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #a0522d; }
.fh-note h3 { margin: 0; font-family: var(--f-display); font-size: 20px; color: #3e2f1c !important; }
.fh-note p { margin: 0; font-size: 13.5px; line-height: 1.75; }
.fh-note p b { color: #8a4b12; }
.fhn-sign { align-self: flex-end; font-size: 12.5px; font-style: italic; color: #7a6040; }
/* 애니마구스 수련 (꾸밈) */
.am-panel { position: relative; overflow: hidden; background: radial-gradient(1px 1px at 12% 20%, rgba(255, 255, 255, .6), transparent), radial-gradient(1px 1px at 68% 12%, rgba(255, 255, 255, .5), transparent), radial-gradient(1.5px 1.5px at 86% 30%, rgba(255, 255, 255, .55), transparent), linear-gradient(160deg, color-mix(in srgb, #4a3a72 30%, var(--card)), var(--card) 65%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #7a6a9a 40%, var(--line)); }
.am-panel > .row b { font-family: var(--f-display); font-size: 17px; }
.am-now { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 14px; border-radius: 6px 14px 14px 6px; color: #3a2c1a;
  background: linear-gradient(90deg, rgba(120, 80, 40, .14), transparent 8%), radial-gradient(circle at 90% 10%, rgba(200, 160, 100, .25), transparent 45%), #f6ecd6; box-shadow: inset 4px 0 0 #8a6a3a, 0 8px 20px -10px rgba(0, 0, 0, .5); }
.am-no { position: absolute; top: 10px; right: 16px; font-family: var(--f-display); font-size: 30px; line-height: 1; color: rgba(90, 58, 114, .25); }
.am-nh { display: flex; flex-direction: column; gap: 2px; }
.am-nk { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #7a5a9a; }
.am-nt { font-family: var(--f-display); font-size: 18px; color: #2e2140; }
.am-how { margin: 0; font-size: 13.5px; line-height: 1.75; font-style: italic; color: #4a3a28; }
.am-now .need { display: flex; flex-wrap: wrap; gap: 5px; }
.am-now .need-i { color: #3a2c1a; background: rgba(255, 255, 255, .55); }
.am-now .small.faint { color: #7a6a58; } .am-now .small.bad { color: #b03a2e; } .am-now .small.good { color: #3f7a3a; }
.am-days i { background: rgba(90, 60, 30, .15); } .am-days i.on { background: #5c8a4a; box-shadow: 0 0 6px rgba(92, 138, 74, .6); }
.am-step.cur .am-ic { box-shadow: inset 0 0 0 1.5px #b9a6e6, 0 0 14px rgba(185, 166, 230, .55); }
/* 보가트 소나기 */
.bg-panel { position: relative; overflow: hidden; background: radial-gradient(ellipse at 10% 80%, rgba(120, 60, 40, .22), transparent 55%), linear-gradient(160deg, color-mix(in srgb, #3a2420 35%, var(--card)), var(--card) 70%); }
.bg-hero { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.bg-art { position: relative; display: block; width: 150px; padding: 12px 22px 6px; border-radius: 14px; background: radial-gradient(ellipse at 50% 90%, rgba(0, 0, 0, .5), transparent 70%), #1d1517; box-shadow: inset 0 0 0 1px rgba(255, 220, 180, .1); }
.bg-art .wardrobe .wd-eye { opacity: 1; animation: wdGlow 3s ease-in-out infinite; }
@keyframes wdGlow { 0%, 100% { opacity: .15; } 40%, 60% { opacity: 1; } }
.bg-art .wardrobe .wd-door { animation: wdPeek 3.6s ease-in-out infinite; }
@keyframes wdPeek { 0%, 60%, 100% { transform: scaleX(1); } 70%, 82% { transform: scaleX(.78); } }
.bg-drift { position: absolute; inset: 0; pointer-events: none; }
.bg-drift span { position: absolute; left: 50%; bottom: 40%; font-size: 11px; font-weight: 700; color: rgba(255, 220, 200, .0); white-space: nowrap; animation: bgDrift 6s ease-in infinite; animation-delay: calc(var(--i) * 1s); }
@keyframes bgDrift { 0% { transform: translate(-50%, 0) scale(.6); color: rgba(255, 220, 200, 0); } 20% { color: rgba(255, 220, 200, .85); } 100% { transform: translate(calc(-50% + (var(--i) - 2.5) * 14px), -90px) scale(1.1); color: rgba(255, 220, 200, 0); } }
.bg-intro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bg-eyebrow, .sg-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: color-mix(in srgb, #c97a5a 80%, var(--text)); }
.sg-eyebrow { color: color-mix(in srgb, #8fb0ff 75%, var(--text)); }
.bg-title, .sg-title { margin: 0; font-family: var(--f-display); font-size: 26px; line-height: 1.15; }
.bg-title { background: linear-gradient(100deg, #ffd9c2, #e0735a 50%, #ffe7d6); -webkit-background-clip: text; background-clip: text; color: transparent; animation: bgShiver 4s ease-in-out infinite; }
@keyframes bgShiver { 0%, 88%, 100% { transform: none; } 90% { transform: translateX(-1.5px) rotate(-.4deg); } 93% { transform: translateX(1.5px) rotate(.4deg); } 96% { transform: translateX(-1px); } }
.sg-title { background: linear-gradient(100deg, #e8efff, #8fb0ff 50%, #fff6d8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sg-title.sm { font-size: 22px; }
.bg-flavor, .sg-flavor { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.bg-flavor b, .sg-flavor b { color: var(--text); }
.bg-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-rules span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.bg-rules .ico { width: 13px; height: 13px; }
.bg-tix { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.bg-tix i { width: 22px; height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); clip-path: polygon(0 0, 100% 0, 100% 35%, 88% 50%, 100% 65%, 100% 100%, 0 100%, 0 65%, 12% 50%, 0 35%); }
.bg-tix i.on { background: linear-gradient(135deg, #f0a07a, #c0563a); }
.bgr { display: flex; flex-direction: column; gap: 8px; }
.bgr-top { display: flex; align-items: center; gap: 8px; }
.bgr-hearts { display: flex; gap: 3px; flex: 1; } .bgr-hearts i { color: #e0574a; transition: opacity .2s, transform .2s; } .bgr-hearts i .ico { width: 18px; height: 18px; fill: currentColor; } .bgr-hearts i.off { opacity: .2; transform: scale(.8); }
.bgr-score { font-size: 26px; font-family: var(--f-display); color: #f2c14e; }
.bgr-time, .sg-time { height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); }
.bgr-time i, .sg-time i { display: block; height: 100%; background: linear-gradient(90deg, #e05a4a, #f2c14e); transform-origin: left; }
.bgr-time i.run, .sg-time i.run { animation: bgTime linear forwards; }
.bgr-field { position: relative; height: 320px; overflow: hidden; border-radius: 14px; background: radial-gradient(ellipse at 50% 100%, rgba(224, 115, 90, .18), transparent 60%), linear-gradient(#141018, #23181c); box-shadow: inset 0 0 0 1px rgba(255, 220, 200, .08); }
.bgr-field::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, transparent, #e05a4a, transparent); opacity: .6; }
.bgr-field.hit { animation: bgrHit .35s; }
@keyframes bgrHit { 0% { box-shadow: inset 0 0 0 3px #e05a4a; transform: translateX(-3px); } 50% { transform: translateX(3px); } 100% { box-shadow: inset 0 0 0 1px rgba(255, 220, 200, .08); transform: none; } }
.bgr-wd { position: absolute; left: 50%; top: 6px; width: 56px; margin-left: -28px; opacity: .7; }
.bgr-field.open .bgr-wd .wd-door { animation: wdOpen .5s ease-out forwards; } .bgr-field.open .wd-eye { opacity: 1; }
.bgr-count { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 54px; color: #ffe0c8; text-shadow: 0 0 20px rgba(224, 115, 90, .8); animation: bgrCount .65s ease-out infinite; }
.bgr-count.go { font-size: 40px; animation: none; }
@keyframes bgrCount { from { transform: scale(1.4); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); } }
.bgr-w { position: absolute; top: -30px; padding: 4px 12px; border-radius: 99px; font-size: 16px; font-weight: 700; color: #ffeedd; background: rgba(60, 30, 40, .85); box-shadow: 0 0 0 1px rgba(255, 180, 150, .35), 0 0 14px rgba(224, 115, 90, .35); white-space: nowrap; animation: bgrFall linear forwards; }
@keyframes bgrFall { from { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(160px) rotate(2deg); } to { transform: translateY(330px) rotate(-1deg); } }
.bgr-pop { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; pointer-events: none; animation: bgrPop .9s ease-out forwards; white-space: nowrap; }
.bgr-pop b { font-size: 15px; color: #ffe08a; text-shadow: 0 0 10px rgba(255, 210, 100, .9); }
.bgr-pop span { font-size: 12px; color: #fff; }
@keyframes bgrPop { 0% { transform: scale(.6); opacity: 0; } 20% { transform: scale(1.15); opacity: 1; } 100% { transform: translateY(-30px) scale(1); opacity: 0; } }
.bgr-in { width: 100%; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 17px; text-align: center; color: var(--text); background: var(--card); border: 1.5px solid color-mix(in srgb, #e0735a 55%, var(--line)); outline: none; }
.bgr-in:focus { box-shadow: 0 0 0 3px color-mix(in srgb, #e0735a 30%, transparent); }
.bgr-in.bad { animation: bgrBad .3s; } @keyframes bgrBad { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.bgr-tip { text-align: center; }
.bgr-res, .sg-res { display: flex; flex-direction: column; gap: 10px; }
.bgr-big { display: flex; align-items: baseline; justify-content: center; gap: 6px; } .bgr-big b { font-family: var(--f-display); font-size: 56px; color: #f2c14e; text-shadow: 0 0 18px rgba(242, 193, 78, .5); animation: bgPop .5s cubic-bezier(.3, 1.6, .5, 1); }
.bgr-res.lose .bgr-big b { color: #e0735a; text-shadow: none; }
.bgr-got { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .bgr-got span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 99px; font-size: 13px; background: color-mix(in srgb, #f2c14e 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #f2c14e 40%, transparent); } .bgr-got .ico { width: 14px; height: 14px; }
@media (max-width: 560px) { .bg-hero { grid-template-columns: 1fr; } .bg-art { width: 140px; margin: 0 auto; } .bgr-field { height: 260px; } }
/* 천문탑: 별자리 잇기 */
[data-tone=stargaze] { --tone: #4a5a9a; }
.sg-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; background: radial-gradient(1px 1px at 8% 16%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, .7), transparent), radial-gradient(1.4px 1.4px at 62% 22%, #fff, transparent), radial-gradient(1px 1px at 84% 60%, rgba(255, 255, 255, .8), transparent), radial-gradient(1px 1px at 92% 12%, #fff, transparent), linear-gradient(170deg, color-mix(in srgb, #1d2a5a 45%, var(--card)), var(--card) 75%); }
.sg-hero { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.sg-art { display: block; padding: 10px; border-radius: 14px; background: radial-gradient(circle at 70% 25%, rgba(255, 246, 200, .5) 0 8px, transparent 9px), radial-gradient(ellipse at 50% 100%, rgba(120, 140, 255, .15), transparent 60%), linear-gradient(#0e1430, #1c2550); }
.scope { display: block; width: 100%; height: auto; } .scope g { transform-box: view-box; transform-origin: 52px 50px; animation: scopeSway 5s ease-in-out infinite; }
@keyframes scopeSway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
.sg-intro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sg-atlas { display: flex; flex-direction: column; gap: 8px; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.sg-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; border-radius: 10px; font-size: 11.5px; color: #9aa4d0; background: linear-gradient(#0f1532, #18204a); box-shadow: inset 0 0 0 1px rgba(150, 170, 255, .12); }
.sg-card svg { width: 100%; height: auto; } .sg-card circle { fill: rgba(200, 210, 255, .35); } .sg-card line { stroke: #ffd98a; stroke-width: .8; opacity: .8; }
.sg-card.on { color: #ffe9b0; box-shadow: inset 0 0 0 1px rgba(255, 217, 138, .45), 0 0 12px -6px #ffd98a; } .sg-card.on circle { fill: #fff6d8; filter: drop-shadow(0 0 1.5px #ffd98a); }
.sg-game { display: flex; flex-direction: column; gap: 8px; }
.sg-miss { display: flex; gap: 3px; } .sg-miss i { color: #e0574a; transition: opacity .2s; } .sg-miss i .ico { width: 16px; height: 16px; fill: currentColor; } .sg-miss i.off { opacity: .2; }
.sg-q { font-family: var(--f-display); font-size: 18px; text-align: center; }
.sg-sky { border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 30% 20%, rgba(120, 140, 255, .18), transparent 60%), linear-gradient(#070b1e, #141c44); box-shadow: inset 0 0 0 1px rgba(150, 170, 255, .15); }
.sg-sky svg { display: block; width: 100%; height: auto; }
.sg-sky line { stroke: #ffd98a; stroke-width: .7; stroke-linecap: round; opacity: 0; transition: opacity .4s; filter: drop-shadow(0 0 1px #ffd98a); }
.sg-sky.show line { opacity: .9; }
.sg-sky.play line { opacity: 0; } .sg-sky.play line.on, .sg-sky.won line { opacity: 1; }
.sg-st .hit { fill: transparent; cursor: pointer; }
.sg-st .dot { fill: #e8ecff; filter: drop-shadow(0 0 1.2px #fff); transition: fill .2s, r .2s; animation: sgTw 2.4s ease-in-out infinite; }
.sg-st:nth-child(3n) .dot { animation-delay: -.8s; } .sg-st:nth-child(3n+1) .dot { animation-delay: -1.6s; }
@keyframes sgTw { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.sg-sky.show .sg-st.real .dot { fill: #fff3c4; r: 2.2; }
.sg-st.lit .dot { fill: #ffd98a; r: 2.4; filter: drop-shadow(0 0 2px #ffd98a); animation: none; }
.sg-st.bad .dot { animation: sgBad .5s; } @keyframes sgBad { 0%, 100% { fill: #e8ecff; } 30% { fill: #ff6a5a; r: 2.6; } }
.sg-sky.won { box-shadow: inset 0 0 0 2px #ffd98a, 0 0 24px -6px #ffd98a; } .sg-sky.lost { filter: grayscale(.6) brightness(.7); transition: filter .6s; }
.sg-tip { text-align: center; }
.sg-big { padding: 8px 22px; border-radius: 14px; background: linear-gradient(#0e1430, #1c2550); } .sg-big svg { display: block; width: 100%; height: auto; } .sg-big circle { fill: #fff6d8; filter: drop-shadow(0 0 1.5px #ffd98a); } .sg-big line { stroke: #ffd98a; stroke-width: .8; }
@media (max-width: 560px) { .sg-hero { grid-template-columns: 1fr; } .sg-art { width: 150px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .bg-drift span, .bg-title, .scope g, .sg-st .dot, .bg-art .wardrobe * { animation: none !important; } }

/* 주문 교실: 깃털 띄우기 */
[data-tone=levitate] { --tone: #5a8aa8; }
.lv-panel { position: relative; overflow: hidden; background: radial-gradient(ellipse at 12% 30%, rgba(140, 190, 230, .2), transparent 55%), linear-gradient(160deg, color-mix(in srgb, #2a4a6a 30%, var(--card)), var(--card) 70%); }
.lv-hero { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.lv-art { position: relative; display: block; height: 150px; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 100%, rgba(255, 230, 170, .25), transparent 60%), linear-gradient(#1a2a3e, #26405a); }
.lv-art .feather { position: absolute; width: 22px; left: 50%; bottom: 10px; filter: drop-shadow(0 0 6px rgba(200, 230, 255, .7)); animation: lvFloat 4.6s ease-in-out infinite; }
.lv-art .feather:nth-child(2) { left: 22%; width: 16px; animation-delay: -1.5s; animation-duration: 5.4s; opacity: .7; }
.lv-art .feather:nth-child(3) { left: 74%; width: 14px; animation-delay: -3s; animation-duration: 6s; opacity: .55; }
@keyframes lvFloat { 0%, 100% { transform: translate(-50%, 0) rotate(-12deg); } 50% { transform: translate(-50%, -80px) rotate(14deg); } }
.lv-sp { position: absolute; width: 5px; height: 5px; border-radius: 50%; left: 36%; top: 30%; background: #fff6c8; box-shadow: 0 0 8px 2px rgba(255, 240, 180, .8); animation: phTw 1.8s ease-in-out infinite; }
.lv-sp.b { left: 66%; top: 18%; animation-delay: -.9s; }
.lv-intro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lv-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: color-mix(in srgb, #7ab4dc 80%, var(--text)); }
.lv-title { margin: 0; font-family: var(--f-display); font-size: 26px; line-height: 1.15; background: linear-gradient(100deg, #e8f6ff, #7ab4dc 50%, #fff6d8); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; animation: lvBob 3.6s ease-in-out infinite; }
@keyframes lvBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.lv-flavor { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); } .lv-flavor b { color: var(--text); }
.lv-tix i.on { background: linear-gradient(135deg, #a8d4f0, #4a86b4); }
.lvg { display: flex; flex-direction: column; gap: 10px; }
.lvg-n { font-family: var(--f-display); font-size: 20px; color: #7ab4dc; }
.lvg-stage { position: relative; height: 260px; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 100%, rgba(255, 230, 170, .22), transparent 55%), linear-gradient(#152234, #24405c); }
.lvg-scale i { position: absolute; left: 12px; right: 12px; height: 1px; background: rgba(200, 225, 255, .08); }
.lvg-fe { position: absolute; left: 50%; bottom: 0; width: 34px; transform: translateX(-50%); transition: bottom .55s cubic-bezier(.3, 1.4, .5, 1); }
.lvg-fe .feather { width: 100%; filter: drop-shadow(0 0 8px rgba(200, 230, 255, .8)); animation: lvSway 2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes lvSway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.lvg-fe.ok::after, .lvg-fe.pf::after { content: ''; position: absolute; left: 50%; top: 40%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 200, .8), transparent 65%); animation: lvBurst .6s ease-out forwards; }
.lvg-fe.pf::after { background: radial-gradient(circle, rgba(255, 220, 120, 1), transparent 65%); width: 120px; height: 120px; margin: -60px 0 0 -60px; }
.lvg-fe.no .feather { animation: lvNo .5s; }
@keyframes lvBurst { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
@keyframes lvNo { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-25deg) translateX(-4px); } 75% { transform: rotate(20deg) translateX(4px); } }
.lvg-say { position: absolute; left: 0; right: 0; top: 14px; text-align: center; font-family: var(--f-display); font-size: 18px; color: #fff6d8; text-shadow: 0 0 12px rgba(255, 220, 140, .7); opacity: 0; }
.lvg-say.ok, .lvg-say.no { animation: lvSay 1s ease-out; } .lvg-say.no { color: #ffb3a6; text-shadow: none; }
@keyframes lvSay { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.lvg-meter { position: relative; height: 30px; border-radius: 99px; background: linear-gradient(#152234, #24405c); box-shadow: inset 0 0 0 1px rgba(122, 180, 220, .35), inset 0 2px 6px rgba(0, 0, 0, .4); overflow: hidden; }
.lvg-zone { position: absolute; top: 3px; bottom: 3px; border-radius: 99px; background: linear-gradient(90deg, rgba(122, 180, 220, .35), rgba(122, 180, 220, .6), rgba(122, 180, 220, .35)); box-shadow: 0 0 12px rgba(122, 180, 220, .6); transition: left .3s, width .3s; }
.lvg-zone i { position: absolute; left: 32%; right: 32%; top: 0; bottom: 0; border-radius: 99px; background: rgba(255, 230, 150, .75); box-shadow: 0 0 10px rgba(255, 220, 120, .8); }
.lvg-mark { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px 2px rgba(255, 255, 255, .8); }
.lvg-go { align-self: stretch; justify-content: center; padding: 12px; font-size: 15px; }
.lv-res-st { display: flex; align-items: flex-end; justify-content: center; gap: 18px; padding: 14px 18px 10px; border-radius: 14px; background: radial-gradient(ellipse at 50% 100%, rgba(255, 230, 170, .22), transparent 60%), linear-gradient(#152234, #24405c); }
.lv-res-st .bgr-big span { color: #c9d8ea; }
.lv-res-fe { display: block; width: 26px; margin-bottom: calc(var(--h) * 40px); animation: lvSway 2s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(200, 230, 255, .8)); }
.lv-res .bgr-big b { color: #7ab4dc; text-shadow: 0 0 18px rgba(122, 180, 220, .5); }
@media (max-width: 560px) { .lv-hero { grid-template-columns: 1fr; } .lv-art { width: 160px; margin: 0 auto; } .lvg-stage { height: 220px; } }
@media (prefers-reduced-motion: reduce) { .lv-art .feather, .lv-title, .lvg-fe .feather { animation: none !important; } }

/* 게시판: 답글 접기 */
.bd-repfold { align-self: flex-start; justify-self: start; width: max-content; display: inline-flex; align-items: center; gap: 5px; margin: -2px 0 2px 22px; padding: 3px 10px; border: 0; border-radius: 99px; font: inherit; font-size: 12px; color: var(--accent); cursor: pointer; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.bd-repfold .ico { width: 13px; height: 13px; } .bd-repfold:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
/* 경매장 카드 */
.auc-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "ic main price" "foot foot foot"; gap: 10px 14px; padding: 14px 16px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.auc-card + .auc-card { margin-top: 8px; }
.auc-card.top { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #3f9a5a 60%, transparent); background: linear-gradient(120deg, color-mix(in srgb, #3f9a5a 7%, var(--card)), var(--card) 60%); }
.auc-card.mine { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--line)); }
.auc-card.closed { opacity: .8; }
.auc-card.focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-ic { grid-area: ic; position: relative; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; }
.ac-ic .ico { width: 26px; height: 26px; }
.ac-qty { position: absolute; right: -6px; bottom: -6px; padding: 1px 7px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.ac-main { grid-area: main; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ac-nm { font-family: var(--f-display); font-size: 17px; font-weight: 600; line-height: 1.3; }
.ac-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.ac-note { font-size: 13px; font-family: var(--f-display); color: var(--text); }
.ac-desc { font-size: 12.5px; line-height: 1.5; color: var(--faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 110px; text-align: right; }
.ac-pl { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--faint); }
.ac-price > b { font-family: var(--f-display); font-size: 26px; line-height: 1.1; color: color-mix(in srgb, #c9961a 85%, var(--text)); }
.ac-unit { font-size: 11.5px; color: var(--muted); margin-top: -2px; }
.ac-bids { font-size: 11.5px; color: var(--muted); }
.ac-buy { margin-top: 3px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; background: color-mix(in srgb, #c9961a 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9961a 40%, transparent); }
.ac-foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ac-time { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); } .ac-time .ico { width: 14px; height: 14px; }
.ac-foot .auc-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
#auction-form.flash { animation: aucFlash 1.4s ease-out; }
@keyframes aucFlash { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: none; } }
.auc-bag .ico { width: 13px; height: 13px; }
@media (max-width: 560px) { .auc-card { grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "ic main" "price price" "foot foot"; } .ac-ic { width: 46px; height: 46px; } .ac-price { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 8px; text-align: left; } .ac-price > b { font-size: 22px; } }
/* 오늘의 기록판 */
.day-board { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 8px; }
.db-h { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-display); } .db-h .ico { width: 15px; height: 15px; color: #e2a929; }
.db-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.db-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 9px; font-size: 13px; }
.db-list li.me { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.db-n { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--text) 8%, transparent); }
.db-list li.m1 .db-n { color: #4a3300; background: linear-gradient(135deg, #ffe08a, #e2a929); } .db-list li.m2 .db-n { color: #333; background: linear-gradient(135deg, #f1f4f8, #b8c2ce); } .db-list li.m3 .db-n { color: #fff; background: linear-gradient(135deg, #e0a477, #a8653a); }
.db-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pc, inherit); font-weight: 600; }
.db-v { font-variant-numeric: tabular-nums; }
.db-new { align-self: center; padding: 3px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #4a3300; background: linear-gradient(135deg, #ffe08a, #e2a929); animation: bgPop .5s cubic-bezier(.3, 1.6, .5, 1); }
/* 애니마구스 수련 (화려하게) */
.am-hero { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.am-art { position: relative; display: block; height: 150px; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 72% 22%, rgba(255, 246, 216, .35), transparent 40%), radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 40% 14%, #fff, transparent), radial-gradient(1px 1px at 16% 70%, rgba(255, 255, 255, .8), transparent), linear-gradient(#1e1838, #3a2c62); box-shadow: inset 0 0 0 1px rgba(200, 180, 255, .18); }
.phial { display: block; width: 100%; height: 100%; }
.phial .ph-liq { animation: phLiq 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes phLiq { 0%, 100% { opacity: .65; } 50% { opacity: .95; } }
.phial .ph-bub circle { animation: phBub 2.4s ease-in infinite; } .phial .ph-bub circle:nth-child(2) { animation-delay: -.8s; } .phial .ph-bub circle:nth-child(3) { animation-delay: -1.6s; }
@keyframes phBub { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-22px); opacity: 0; } }
.phial .ph-leaf { transform-box: fill-box; transform-origin: center; animation: phLeaf 4s ease-in-out infinite; } @keyframes phLeaf { 0%, 100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(12deg) translateY(4px); } }
.phial .ph-rays { animation: phRay 2.6s ease-in-out infinite; } @keyframes phRay { 0%, 100% { opacity: .2; } 50% { opacity: .8; } }
.am-sp { position: absolute; width: 4px; height: 4px; border-radius: 50%; left: 22%; top: 40%; background: #e8deff; box-shadow: 0 0 8px 2px rgba(200, 180, 255, .8); animation: phTw 1.8s ease-in-out infinite; }
.am-sp.b { left: 78%; top: 62%; animation-delay: -.6s; } .am-sp.c { left: 50%; top: 12%; animation-delay: -1.2s; }
.am-intro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.am-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: color-mix(in srgb, #b9a6e6 80%, var(--text)); }
.am-title { margin: 0; font-family: var(--f-display); font-size: 26px; line-height: 1.15; background: linear-gradient(100deg, #f2ecff, #b9a6e6 45%, #fff2c8 60%, #9a82d8); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rfTitle 7s ease-in-out infinite; }
.am-flavor { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); font-style: italic; }
.am-stepbadge { align-self: flex-start; padding: 3px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #9a82d8, #5a4a9a); box-shadow: 0 0 12px rgba(154, 130, 216, .45); }
.am-panel { gap: 14px; }
.am-steps { padding: 10px 6px; border-radius: 12px; background: rgba(20, 14, 40, .18); }
.am-go { box-shadow: 0 4px 14px -6px rgba(90, 60, 140, .6); }
.am-roster { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #4a3a72 10%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #7a6a9a 30%, var(--line)); }
.am-rh { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-display); }
.am-rl { display: flex; flex-direction: column; gap: 4px; }
.am-ri { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); align-items: center; gap: 10px; padding: 5px 10px; border-radius: 9px; font-size: 13px; }
.am-ri.me { background: color-mix(in srgb, #9a82d8 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #9a82d8 40%, transparent); }
.am-ri.done .am-rs { color: color-mix(in srgb, #c9961a 80%, var(--text)); font-weight: 600; }
.am-rn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--pc, inherit); }
.am-rbar { display: inline-flex; gap: 3px; } .am-rbar i { width: 14px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); } .am-rbar i.on { background: #9a82d8; } .am-rbar i.cur { background: transparent; box-shadow: inset 0 0 0 1.5px #9a82d8; }
.am-rs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); } .am-rs .ico { width: 12px; height: 12px; }
@media (max-width: 560px) { .am-hero { grid-template-columns: 1fr; } .am-art { width: 160px; margin: 0 auto; } .am-ri { grid-template-columns: minmax(0, 1fr) auto; } .am-rs { grid-column: 1 / -1; } }

.am-intro > .pill { align-self: flex-start; }
.am-form .am-nt { color: color-mix(in srgb, #d9c8ff 70%, var(--text)); font-size: 22px; }
.am-form { padding: 14px 16px; box-shadow: inset 0 0 0 1px color-mix(in srgb, #9a82d8 40%, transparent), 0 0 24px -12px #9a82d8; }

/* 애니마구스 동물 고르기 · 패트로누스 이름 */
.amc { display: flex; flex-direction: column; gap: 10px; }
.am-title.sm { font-size: 22px; }
.amc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 320px; overflow: auto; padding: 2px; }
.amc-opt { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border: 0; border-radius: 11px; font: inherit; text-align: left; color: var(--text); cursor: pointer; background: color-mix(in srgb, #9a82d8 7%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #9a82d8 25%, var(--line)); transition: transform .12s, box-shadow .12s; }
.amc-opt b { font-size: 14px; } .amc-opt span { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.amc-opt:hover { transform: translateY(-1px); }
.amc-opt.on { background: color-mix(in srgb, #9a82d8 20%, var(--card)); box-shadow: inset 0 0 0 2px #9a82d8, 0 0 14px -6px #9a82d8; }
.amc-custom { display: flex; flex-direction: column; gap: 5px; } .amc-custom .eyebrow { display: inline-flex; align-items: center; gap: 5px; } .amc-custom .ico { width: 13px; height: 13px; }
.amc-custom input, .ptrn-pop input { width: 100%; padding: 10px 12px; border-radius: 10px; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); }
.ptrn-pop { display: flex; flex-direction: column; gap: 10px; } .ptrn-pop h3 { margin: 0; font-family: var(--f-display); }
.pl-chip.empty { opacity: .7; } .pl-chip.empty b { font-weight: 500; }
button.pl-chip { border: 0; font: inherit; color: inherit; cursor: pointer; } button.pl-chip:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, #9fc4e8 60%, transparent); }
.ptr-chip .ico { color: #9fc4e8; } .am-chip .ico { color: #b9a6e6; }
.am-form .am-go { align-self: flex-start; margin-top: 6px; }

/* 날씨 */
.hc-wx { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; padding: 4px 11px 4px 8px; border-radius: 14px; font-size: 12px; line-height: 1.35; max-width: 100%; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.hc-wx .ico { width: 15px; height: 15px; } .hc-wx b { font-weight: 700; } .hc-wx-d { opacity: .9; } .hc-wx-n { opacity: .7; }
.sky-day .hc-wx { background: rgba(255, 255, 255, .45); box-shadow: inset 0 0 0 1px rgba(31, 53, 80, .12); }
.hc-wx.wx-storm { background: rgba(255, 227, 106, .22); box-shadow: inset 0 0 0 1px rgba(255, 227, 106, .55); }
.hc-art .wx-rain line { animation: wxRain .7s linear infinite; }
@keyframes wxRain { from { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(8px); opacity: 0; } }
.hc-art .wx-bolt { animation: wxBolt 3.2s steps(1) infinite; filter: drop-shadow(0 0 4px #ffe36a); }
@keyframes wxBolt { 0%, 62%, 70%, 100% { opacity: 0; } 64%, 68% { opacity: 1; } }
.home-clock.wx-storm::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(255, 255, 230, .0); animation: wxFlash 3.2s steps(1) infinite; border-radius: inherit; }
@keyframes wxFlash { 0%, 62%, 66%, 100% { background: rgba(255, 255, 230, 0); } 64% { background: rgba(255, 255, 230, .14); } }
.hc-art .wx-snow circle { animation: wxSnow 2.6s linear infinite; }
@keyframes wxSnow { from { transform: translate(0, -8px); opacity: 0; } 20% { opacity: 1; } to { transform: translate(3px, 10px); opacity: 0; } }
.hc-art .wx-fog path { animation: wxFog 5s ease-in-out infinite; } .hc-art .wx-fog path:nth-child(2) { animation-delay: -1.6s; } .hc-art .wx-fog path:nth-child(3) { animation-delay: -3.2s; }
@keyframes wxFog { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
.hc-art .wx-wind path { stroke-dasharray: 60; animation: wxWind 2.4s ease-in-out infinite; } .hc-art .wx-wind path + path { animation-delay: -1.2s; }
@keyframes wxWind { 0% { stroke-dashoffset: 60; opacity: 0; } 30% { opacity: 1; } 100% { stroke-dashoffset: -60; opacity: 0; } }
.hc-art .wx-cl { animation: wxDrift 8s ease-in-out infinite; } @keyframes wxDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .hc-art .wx-rain line, .hc-art .wx-bolt, .home-clock.wx-storm::after, .hc-art .wx-snow circle, .hc-art .wx-fog path, .hc-art .wx-wind path, .hc-art .wx-cl { animation: none !important; } }
/* 가방: 경매 동그란 버튼 */
.btn.auc-bag, .g-btns .btn.auc-bag { flex: 0 0 32px; width: 32px; height: 32px; min-width: 32px; padding: 0 !important; border-radius: 50%; justify-content: center; align-self: center; }
.btn.auc-bag .ico { width: 15px; height: 15px; margin: 0; }
.pl-chip.on.ptr-chip { box-shadow: inset 0 0 0 1px color-mix(in srgb, #9fc4e8 55%, transparent); } .pl-chip.on.am-chip { box-shadow: inset 0 0 0 1px color-mix(in srgb, #b9a6e6 55%, transparent); }

/* 대화창 글씨 크기 (설정) */
:root[data-chatfs="s"] .chat-list { font-size: 12px; } :root[data-chatfs="l"] .chat-list { font-size: 15px; } :root[data-chatfs="xl"] .chat-list { font-size: 17px; }
:root[data-chatfs="l"] #chat-text { font-size: 15px; } :root[data-chatfs="xl"] #chat-text { font-size: 16.5px; }
:root[data-chatfs="l"] .msg .bub .t, :root[data-chatfs="xl"] .msg .bub .t { font-size: 11px !important; }

/* 비밀의 방 */
[data-tone=chamber] { --tone: #3f7a5a; }
.ch-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; background: radial-gradient(ellipse at 15% 20%, rgba(63, 154, 90, .18), transparent 55%), linear-gradient(165deg, color-mix(in srgb, #12261c 55%, var(--card)), var(--card) 75%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #3f9a5a 35%, var(--line)); }
.ch-hero { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: start; }
.ch-art { display: block; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(160, 230, 190, .15), 0 10px 24px -14px rgba(0, 0, 0, .7); }
.sink { display: block; width: 100%; height: auto; }
.sink .snk { stroke-dasharray: 4 3; animation: snkMove 2.4s linear infinite; } @keyframes snkMove { to { stroke-dashoffset: -14; } }
.sink .sk-eyes { animation: skEye 5s ease-in-out infinite; } @keyframes skEye { 0%, 70%, 100% { opacity: 0; } 78%, 90% { opacity: 1; } }
.sink .sk-water { animation: skWater 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes skWater { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.08); } }
.ch-intro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ch-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: color-mix(in srgb, #6fd09a 75%, var(--text)); }
.ch-title { margin: 0; font-family: var(--f-display); font-size: 30px; line-height: 1.1; background: linear-gradient(100deg, #d8ffe6, #3f9a5a 45%, #e6f7c8 60%, #2d6a45); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rfTitle 8s ease-in-out infinite; }
.ch-title.sm { font-size: 22px; }
.ch-flavor { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); } .ch-flavor b { color: var(--text); }
.ch-rule { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 12px; border-radius: 12px; font-size: 13px; background: color-mix(in srgb, #3f9a5a 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #3f9a5a 40%, transparent); }
.ch-rk { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #6fd09a; } .ch-rule b { font-family: var(--f-display); font-size: 15px; } .ch-rule span:last-child { color: var(--muted); }
.ch-rec { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); } .ch-rec b { color: var(--text); }
.ch-howto { line-height: 1.6; }
.ch-list li { grid-template-columns: 26px minmax(0, 1fr) auto; }
.ch-who { display: flex; flex-direction: column; min-width: 0; } .ch-gear { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.ch-stats { display: inline-flex; flex-wrap: wrap; gap: 12px; color: var(--muted); } .ch-stats span { display: inline-flex; align-items: center; gap: 4px; } .ch-stats .ico { width: 14px; height: 14px; } .ch-stats .got { color: #e2c060; font-weight: 700; }
.ch-bar { position: relative; height: 22px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); }
.ch-bar > span { position: absolute; left: 12px; top: 0; bottom: 0; display: flex; align-items: center; gap: 4px; font-size: 12px; z-index: 1; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.ch-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; transition: width .4s; }
.ch-bar.hp > i { background: linear-gradient(90deg, #2f7a46, #5fc27f); } .ch-bar.mp > i { background: linear-gradient(90deg, #2f4f9a, #6f96e6); } .ch-bar.boss > i { background: linear-gradient(90deg, #6a1f2a, #c0394a); }
.ch-grid { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: 14px; align-items: start; }
.ch-mapwrap { display: flex; flex-direction: column; gap: 6px; }
.ch-map { display: block; width: 100%; height: auto; }
.ch-map .ch-bg { fill: #0d1712; stroke: rgba(111, 208, 154, .18); }
.ch-lines line { stroke: rgba(111, 208, 154, .25); stroke-width: 6; stroke-linecap: round; } .ch-lines line.v { stroke: rgba(111, 208, 154, .55); }
.chr rect { fill: #13241b; stroke: rgba(111, 208, 154, .35); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chr.v rect { fill: #1d3a2a; stroke: rgba(111, 208, 154, .7); stroke-dasharray: none; }
.chr text { font-size: 14px; font-weight: 700; fill: rgba(220, 255, 235, .55); pointer-events: none; } .chr.v text { fill: #dcffeb; }
.chr.t-boss rect { stroke: #c0394a; } .chr.t-boss text { fill: #ff8a96; } .chr.t-key text { fill: #ffd76a; } .chr.t-fountain text { fill: #8fd0ff; } .chr.t-treasure text { fill: #ffd76a; }
.chr.can { cursor: pointer; } .chr.can rect { stroke: #ffe08a; stroke-width: 2; stroke-dasharray: none; animation: chCan 1.6s ease-in-out infinite; } .chr.can:hover rect { fill: #24452f; }
@keyframes chCan { 0%, 100% { stroke-opacity: .5; } 50% { stroke-opacity: 1; } }
.chr.cur rect { fill: #2b5a3d; stroke: #9ff0c4; stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(111, 208, 154, .8)); }
.chr .me { fill: #ffe08a; stroke: #3a2a00; stroke-width: 1.2; }
.ch-legend { text-align: center; }
.ch-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ch-ev, .ch-boss { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); animation: rcIn .35s ease-out; }
.ch-ev > b, .ch-bname { font-family: var(--f-display); font-size: 18px; }
.ev-monster { box-shadow: inset 0 0 0 1px rgba(192, 57, 74, .5); background: color-mix(in srgb, #c0394a 8%, var(--card)); }
.ev-trap { box-shadow: inset 0 0 0 1px rgba(226, 169, 41, .5); background: color-mix(in srgb, #e2a929 8%, var(--card)); }
.ev-riddle { box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .5); background: color-mix(in srgb, #3f9a5a 10%, var(--card)); }
.ch-boss { box-shadow: inset 0 0 0 1.5px rgba(192, 57, 74, .7), 0 0 24px -10px rgba(192, 57, 74, .8); background: radial-gradient(ellipse at 80% 0%, rgba(192, 57, 74, .2), transparent 60%), var(--card); }
.ch-bdot { display: inline-block; width: 10px; height: 10px; margin-left: 4px; border-radius: 50%; background: color-mix(in srgb, var(--text) 15%, transparent); } .ch-bdot.done { background: #5fc27f; } .ch-bdot.cur { background: #c0394a; box-shadow: 0 0 8px #c0394a; }
.ch-intent { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; font-size: 13px; background: rgba(0, 0, 0, .18); }
.ch-ik { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: #ff8a96; } .ch-intent.i-gather .ch-ik { color: #8fe0b0; } .ch-intent.i-gaze { animation: chGaze 1.2s ease-in-out infinite; } .ch-intent.i-gaze .ch-ik { color: #ffe36a; }
@keyframes chGaze { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 227, 106, .3); } 50% { box-shadow: inset 0 0 0 2px rgba(255, 227, 106, .9); } }
.ch-acts { display: flex; flex-wrap: wrap; gap: 6px; } .ch-acts.col { flex-direction: column; } .ch-acts.col .btn { justify-content: flex-start; } .ch-acts .ico { width: 14px; height: 14px; }
.ch-log { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; background: rgba(0, 0, 0, .14); } .ch-log span.old { color: var(--faint); font-size: 12px; }
.ch-end { display: flex; flex-direction: column; gap: 10px; text-align: center; } .ch-end .ch-eyebrow { text-align: left; } .ch-end .ch-title { text-align: left; } .ch-gear-line { display: block; }
.ch-end.win .bgr-big b { color: #5fc27f; text-shadow: 0 0 18px rgba(95, 194, 127, .5); }
@media (max-width: 760px) { .ch-grid { grid-template-columns: 1fr; } .ch-hero { grid-template-columns: 1fr; } .ch-art { max-width: 220px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .sink *, .ch-title, .chr.can rect, .ch-intent { animation: none !important; } }

/* 비밀의 방 (화려하게) */
.ch-panel.run { gap: 14px; }
.ch-top { align-items: flex-end; }
.chip-s { padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.chip-s.got { color: #ffd76a; box-shadow: inset 0 0 0 1px rgba(255, 215, 106, .55); background: rgba(255, 215, 106, .1); }
.ch-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ch-stage-wrap { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: radial-gradient(ellipse at 50% 0%, rgba(111, 208, 154, .14), transparent 60%), color-mix(in srgb, #0d1712 70%, var(--card)); box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .25), 0 14px 30px -18px rgba(0, 0, 0, .8); animation: rcIn .35s ease-out; }
.ch-stage-wrap.boss { background: radial-gradient(ellipse at 50% 0%, rgba(192, 57, 74, .22), transparent 60%), color-mix(in srgb, #170c0f 70%, var(--card)); box-shadow: inset 0 0 0 1.5px rgba(192, 57, 74, .5), 0 0 30px -12px rgba(192, 57, 74, .7); }
.ch-head { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.ch-rt { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: #6fd09a; }
.ch-rn { font-family: var(--f-display); font-size: 24px; line-height: 1.2; color: #ecfff3; text-shadow: 0 0 14px rgba(111, 208, 154, .35); }
.ch-stage { border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ch-scene { display: block; width: 100%; height: auto; max-height: 280px; }
.ch-scene .cs-fire { transform-box: fill-box; transform-origin: 50% 100%; animation: anvFlame .9s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px #ffb84a); }
.ch-scene .cs-eyes { animation: csEye 3.6s ease-in-out infinite; filter: drop-shadow(0 0 4px currentColor); }
@keyframes csEye { 0%, 86%, 100% { opacity: 1; } 90% { opacity: .1; } }
.ch-scene .cs-bob { animation: csBob 3.2s ease-in-out infinite; } @keyframes csBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ch-scene .cs-glow { animation: csGlow 2.4s ease-in-out infinite; } @keyframes csGlow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(111, 208, 154, .4)); } 50% { filter: drop-shadow(0 0 10px rgba(111, 208, 154, .9)); } }
.ch-scene.k-treasure .cs-glow, .ch-scene.k-key .cs-glow { animation-name: csGold; } @keyframes csGold { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 215, 106, .5)); } 50% { filter: drop-shadow(0 0 14px rgba(255, 215, 106, 1)); } }
.ch-scene .cs-warn { animation: csWarn 1s steps(2) infinite; } @keyframes csWarn { 50% { opacity: .2; } }
.ch-scene .cs-spikes { animation: csSpike 2.4s ease-in-out infinite; } @keyframes csSpike { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-8px); } }
.ch-scene .cs-ripple { transform-box: fill-box; transform-origin: center; animation: csRip 2.2s ease-out infinite; } @keyframes csRip { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.ch-scene .cs-drop { animation: csDrop 1.6s ease-in infinite; } @keyframes csDrop { from { transform: translateY(0); opacity: 1; } to { transform: translateY(36px); opacity: 0; } }
.ch-scene .cs-flame { transform-box: fill-box; transform-origin: 0 50%; animation: csFl 1.4s ease-in-out infinite; } @keyframes csFl { 0%, 100% { transform: scaleX(.6); opacity: .6; } 50% { transform: scaleX(1.1); opacity: 1; } }
.ch-scene .cs-ghost { animation: csBob 4s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(200, 230, 255, .6)); }
.ch-scene .cs-snake { animation: csSnake 5s ease-in-out infinite; } @keyframes csSnake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px); } }
.ch-rd { margin: 0; font-size: 13.5px; line-height: 1.7; text-align: center; color: var(--muted); } .ch-rd b { color: var(--text); }
.ch-q { margin: 0; font-family: var(--f-display); font-size: 18px; line-height: 1.5; text-align: center; color: #dcffeb; }
.ch-int { margin: 0; } .ch-int.i-gaze { animation: chGaze 1.2s ease-in-out infinite; } .ch-int.i-gather { box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .6); }
.ch-rpb { margin: 0; }
.ch-tacs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.ch-tac { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 0; border-radius: 14px; font: inherit; text-align: left; color: var(--text); cursor: pointer; background: linear-gradient(150deg, color-mix(in srgb, #3f9a5a 14%, var(--card)), var(--card) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #3f9a5a 40%, var(--line)), 0 6px 16px -10px rgba(0, 0, 0, .6); transition: transform .12s, box-shadow .12s; }
.ch-tac:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px #6fd09a, 0 10px 20px -10px rgba(63, 154, 90, .6); }
.ch-tac:disabled { opacity: .45; cursor: default; }
.ch-tac.hint { box-shadow: inset 0 0 0 2px #ffd76a, 0 0 18px -6px #ffd76a; }
.ch-tac.quiet { background: color-mix(in srgb, var(--text) 4%, var(--card)); box-shadow: inset 0 0 0 1px var(--line); }
.ct-ic { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #dcffeb; background: linear-gradient(140deg, #3f9a5a, #1f5a36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.ct-ic .ico { width: 18px; height: 18px; }
.ch-stage-wrap.boss + .ch-tacs .ch-tac, .ch-tacs.fight .ch-tac { background: linear-gradient(150deg, color-mix(in srgb, #c0394a 12%, var(--card)), var(--card) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c0394a 40%, var(--line)); }
.ch-stage-wrap.boss + .ch-tacs .ct-ic, .ch-tacs.fight .ct-ic { background: linear-gradient(140deg, #c0394a, #6a1f2a); }
.ch-stage-wrap.boss + .ch-tacs .ch-tac.hint, .ch-tacs.fight .ch-tac.hint { box-shadow: inset 0 0 0 2px #ffd76a, 0 0 18px -6px #ffd76a; }
.ct-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ct-t b { font-size: 14.5px; } .ct-t b small { font-weight: 500; color: var(--faint); font-size: 11px; } .ct-t > span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.ch-sh { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); } .ch-sh .ico { width: 13px; height: 13px; }
.ch-grid { grid-template-columns: minmax(220px, 320px) 1fr; }
.ch-lockbox { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(192, 57, 74, .08); box-shadow: inset 0 0 0 1px rgba(192, 57, 74, .4); }
.ch-lockbox > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .ch-lk-ic { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(192, 57, 74, .2); color: #ff8a96; } .ch-lk-ic .ico { width: 16px; height: 16px; }
.ch-open:not(:disabled) { box-shadow: 0 0 18px -4px rgba(111, 208, 154, .7); }
.ch-note .sm-ic { color: #dcffeb; background: radial-gradient(circle at 35% 30%, #8fe0b0, #1f5a36 70%); }
.pa-myrtle { animation: csBob 4s ease-in-out infinite; } .pa-snk { stroke-dasharray: 4 3; animation: snkMove 2.4s linear infinite; } .pa-puddle { animation: skWater 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@media (max-width: 760px) { .ch-bars { grid-template-columns: 1fr; } .ch-rn { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .ch-scene *, .pa-myrtle, .pa-snk, .pa-puddle { animation: none !important; } }

/* 비밀의 방: 괴물 떼 · 내 상태 · 전투 기록 */
.ch-foes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ch-foe-card { margin: 0; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.ch-foe-card:hover { transform: translateY(-2px); }
.ch-foe-card.tgt { box-shadow: inset 0 0 0 2px #ffd76a, 0 0 18px -6px #ffd76a !important; }
.ch-foe-card .rpb-main { display: flex; flex-direction: column; gap: 5px; }
.ch-fi { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 3px 9px; border-radius: 99px; font-size: 12px; background: rgba(0, 0, 0, .22); }
.ch-fi .ico { width: 13px; height: 13px; } .ch-fi.i-bite { color: #ffb3a6; } .ch-fi.i-spell { color: #c9b3ff; } .ch-fi.i-gather { color: #8fe0b0; } .ch-fi.i-gaze { color: #ffe36a; animation: chGaze 1.2s ease-in-out infinite; }
.ch-tgt { font-size: 11px; color: #ffd76a; font-weight: 700; }
.ch-tacs.fight { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ch-tac.hint2 { box-shadow: inset 0 0 0 1.5px rgba(255, 160, 90, .8); }
/* 비밀의 방: 방 이야기 상자 · 장식 모서리 */
.ch-stage-wrap { padding: 20px 18px 20px; border-radius: 20px; background: radial-gradient(ellipse at 50% -10%, rgba(111, 208, 154, .2), transparent 55%), radial-gradient(ellipse at 50% 120%, rgba(201, 165, 90, .1), transparent 50%), color-mix(in srgb, #0b1510 75%, var(--card)); box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .28), inset 0 0 0 5px rgba(11, 21, 16, .6), inset 0 0 0 6px rgba(201, 165, 90, .22), 0 18px 36px -20px rgba(0, 0, 0, .85); }
.ch-cn { position: absolute; z-index: 2; width: 18px; height: 18px; pointer-events: none; border: 2px solid #c9a55a; opacity: .75; }
.ch-cn::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #e7c47a; box-shadow: 0 0 6px #e7c47a; }
.ch-cn.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; } .ch-cn.tl::after { top: 4px; left: 4px; }
.ch-cn.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; } .ch-cn.tr::after { top: 4px; right: 4px; }
.ch-cn.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; } .ch-cn.bl::after { bottom: 4px; left: 4px; }
.ch-cn.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; } .ch-cn.br::after { bottom: 4px; right: 4px; }
.ch-stage-wrap.boss .ch-cn { border-color: #e06070; } .ch-stage-wrap.boss .ch-cn::after { background: #ff9aa6; box-shadow: 0 0 6px #ff6a7a; }
.ch-head .ch-rt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.ch-head .ch-rt::before, .ch-head .ch-rt::after { content: ''; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.ch-head .ch-rt::after { transform: scaleX(-1); }
.ch-note { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 18px 14px; border-radius: 14px; text-align: center; background: linear-gradient(180deg, rgba(201, 165, 90, .08), rgba(111, 208, 154, .04)), rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(201, 165, 90, .25); animation: rcIn .4s ease-out; }
.ch-orn { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); background: linear-gradient(135deg, #f0d592, #a8823c); box-shadow: 0 0 10px rgba(231, 196, 122, .6), 0 0 0 3px color-mix(in srgb, #0b1510 75%, var(--card)); }
.ch-flav { margin: 0; max-width: 560px; font-family: var(--f-display); font-size: 15px; line-height: 1.75; word-break: keep-all; color: #e9f3e6; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.ch-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ch-pills .cp { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 99px; font-size: 12px; color: var(--muted); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ch-pills .cp .ico { width: 13px; height: 13px; } .ch-pills .cp b { color: var(--text); }
.ch-pills .cp.got { color: #f0d592; background: rgba(201, 165, 90, .14); box-shadow: inset 0 0 0 1px rgba(231, 196, 122, .5); font-weight: 700; }
.ch-pills .cp.hint { color: #9fe3bd; box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .35); }
.ch-pills .cp.warn { color: #ffb4a0; background: rgba(192, 80, 60, .12); box-shadow: inset 0 0 0 1px rgba(224, 112, 90, .4); }
/* 비밀의 방: 나(체력·마력·기력 나란히 + 내 장비) */
.ch-me2 { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, #c9a55a 10%, var(--card)), var(--card) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9a55a 45%, var(--line)), 0 10px 24px -18px rgba(0, 0, 0, .8); }
.chm-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chm-name { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; } .chm-name b { font-size: 15px; color: var(--pc, var(--text)); }
.chm-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(201, 165, 90, .16); box-shadow: inset 0 0 0 1px rgba(201, 165, 90, .45); font-size: 15px; }
.chm-key { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--faint); } .chm-key .ico { width: 13px; height: 13px; } .chm-key.got { color: #f0d592; font-weight: 700; }
.chm-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.chm-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chm-t { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 12.5px; white-space: nowrap; }
.chm-t span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); } .chm-t .ico { width: 13px; height: 13px; }
.chm-t b { font-size: 14px; } .chm-t small { color: var(--faint); font-weight: 400; font-size: 11px; }
.chm-tr { position: relative; display: block; height: 9px; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.chm-tr i { display: block; height: 100%; border-radius: inherit; transition: width .4s ease; }
.chm-b.hp .chm-tr i { background: linear-gradient(90deg, #3f9a5a, #8fe0a8); } .chm-b.hp .ico { color: #8fe0a8; }
.chm-b.mp .chm-tr i { background: linear-gradient(90deg, #3a5fc0, #8fb0ff); } .chm-b.mp .ico { color: #8fb0ff; }
.chm-b.sp .chm-tr i { background: linear-gradient(90deg, #b8862a, #f0d070); } .chm-b.sp .ico { color: #f0d070; }
.chm-b.low .chm-tr i { animation: chLow 1s ease-in-out infinite alternate; } .chm-b.low b { color: #ff8a7a; }
@keyframes chLow { from { filter: brightness(1); } to { filter: brightness(1.5) saturate(1.3); } }
.chm-gear { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, #c9a55a 30%, var(--line)); }
.chg-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chg { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 1px var(--line); }
.chg.broken { opacity: .6; box-shadow: inset 0 0 0 1px rgba(224, 96, 112, .5); }
.chg-ic { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #f0d592; background: linear-gradient(140deg, rgba(201, 165, 90, .3), rgba(201, 165, 90, .08)); } .chg-ic .ico { width: 17px; height: 17px; }
.chg-t { display: flex; flex-direction: column; min-width: 0; flex: 1; } .chg-k { font-size: 11px; color: var(--faint); }
.chg-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chg-t em { font-style: normal; color: #f0d592; }
.chg .rk-pill { flex-shrink: 0; }
.chg-st { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); } .chg-st span { display: inline-flex; align-items: center; gap: 4px; } .chg-st .ico { width: 13px; height: 13px; } .chg-st b { color: var(--text); }
/* 비밀의 방 배치: 위(지도 1/3 · 방 2/3) → 선택지 → 아래(나 1/3 · 전투 기록 2/3) */
.ch-l1, .ch-l2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; align-items: stretch; }
.ch-l1 .ch-mapwrap { min-width: 0; padding: 12px; border-radius: 18px; background: color-mix(in srgb, #0b1510 60%, var(--card)); box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .2); }
.ch-l1 .ch-mapwrap > svg { width: 100%; height: auto; }
.ch-l1 .ch-foe-card .foe-name { font-size: 13.5px; }
.ch-l2 .ch-me2 { align-self: start; }
.ch-l2 .chm-bars { grid-template-columns: 1fr; gap: 10px; }
.ch-l2 .chg-row { grid-template-columns: 1fr; }
.ch-l2 .chg-st { flex-direction: column; gap: 6px; }
.ch-l2 .chm-h .chm-key { display: none; }
.ch-l2 .ch-side { min-width: 0; } .ch-l2 .ch-log2 { flex: 1; }
.ch-l2 .ch-log2 { max-height: 430px; }
.ch-l1 .ch-foes { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 760px) { .ch-l1, .ch-l2 { display: contents; } .ch-l1 .ch-mapwrap { order: 5; } .ch-l1 .ch-mapwrap > svg { max-width: 340px; margin: 0 auto; display: block; } }
/* 비밀의 방(진행 화면) 정리: 굴 속 한 가지 색 — 짙은 이끼 바탕 · 금빛 테 · 글씨는 밝게(밝은 테마에서도 같은 모습) */
.ch-panel.run { --sheet: #131b17; --sheet-2: #1a241f; --ink: #eef2ea; --ink-2: #b6c0b4; --ink-3: #808c81; --rule: rgba(201, 165, 90, .24); --line: rgba(201, 165, 90, .18); --card: #141c18; --text: #eef2ea; --muted: #b6c0b4; --faint: #808c81; --bad: #ef8a78; --chg: #e7c47a; --chm: #8fe0b0; --chglass: rgba(5, 10, 8, .5);
  color: var(--ink); color-scheme: dark; padding: 18px;
  background: radial-gradient(ellipse at 18% -5%, rgba(63, 154, 90, .2), transparent 45%), radial-gradient(ellipse at 95% 105%, rgba(201, 165, 90, .1), transparent 45%), linear-gradient(170deg, #142019, #0b110e 70%);
  box-shadow: inset 0 0 0 1px rgba(201, 165, 90, .32), inset 0 0 0 4px rgba(0, 0, 0, .25), 0 22px 44px -26px rgba(0, 0, 0, .9); }
.ch-panel.run .ch-top { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ch-panel.run .ch-eyebrow { color: var(--chm); }
.ch-panel.run .ch-stats { gap: 6px; } .ch-panel.run .chip-s { color: var(--ink-2); background: var(--chglass); box-shadow: inset 0 0 0 1px var(--line); }
.ch-panel.run .chip-s.got { color: var(--chg); background: rgba(201, 165, 90, .12); box-shadow: inset 0 0 0 1px rgba(231, 196, 122, .5); }
/* 상자 네 개(지도 · 나 · 기록)는 같은 유리 바탕 */
.ch-panel.run .ch-l1 .ch-mapwrap, .ch-panel.run .ch-me2, .ch-panel.run .ch-l2 .ch-side { padding: 14px; border-radius: 16px; background: var(--chglass); box-shadow: inset 0 0 0 1px var(--line); }
.ch-panel.run .ch-me2 { background: linear-gradient(180deg, rgba(201, 165, 90, .08), transparent 40%), var(--chglass); box-shadow: inset 0 0 0 1px rgba(201, 165, 90, .32); }
.ch-panel.run .ch-sh { color: var(--chg); font-size: 11.5px; letter-spacing: .14em; } .ch-panel.run .ch-sh .ico { color: var(--chg); }
.ch-panel.run .ch-legend { color: var(--ink-3); font-size: 11.5px; line-height: 1.6; }
.ch-panel.run .ch-log2 { margin: 0; padding: 4px 2px; background: none; box-shadow: none; border: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; }
.ch-panel.run .ch-log2 > * { flex: none; }
.ch-panel.run .ch-l2 .ch-side .row.end { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.ch-panel.run .chm-name b { color: var(--pc, var(--ink)); }
.ch-panel.run .chg { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); }
.ch-panel.run .chg-k { color: var(--ink-3); } .ch-panel.run .chg-t b { color: var(--ink); }
/* 선택지: 같은 유리 바탕 · 비용은 색깔 알약(마력 파랑 · 기력 금빛) */
.ch-panel.run .ch-tac { background: linear-gradient(150deg, rgba(63, 154, 90, .14), transparent 70%), var(--chglass); box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .3); color: var(--ink); }
.ch-panel.run .ch-tacs.fight .ch-tac { background: linear-gradient(150deg, rgba(192, 57, 74, .16), transparent 70%), var(--chglass); box-shadow: inset 0 0 0 1px rgba(224, 96, 112, .35); }
.ch-panel.run .ch-tac.quiet { background: var(--chglass); box-shadow: inset 0 0 0 1px var(--line); }
.ch-panel.run .ch-tac:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--chg), 0 10px 20px -12px rgba(231, 196, 122, .5); }
.ch-panel.run .ch-tac.hint, .ch-panel.run .ch-tacs.fight .ch-tac.hint { box-shadow: inset 0 0 0 2px #ffd76a, 0 0 18px -6px #ffd76a; }
.ch-panel.run .ct-t b { color: var(--ink); } .ch-panel.run .ct-t > span { color: var(--ink-2); }
.ch-panel.run .ct-t b small { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700; vertical-align: 2px; color: var(--ink-2); background: rgba(255, 255, 255, .06); }
.ch-panel.run .ct-t b small.mp { color: #a9c1ff; background: rgba(110, 145, 240, .16); }
.ch-panel.run .ct-t b small.sp { color: #f0d070; background: rgba(224, 182, 92, .16); }
.ch-panel.run .ct-t b small.tg { padding: 0; background: none; color: var(--chg); font-weight: 600; }
/* 괴물 카드 · 다음 행동 */
.ch-panel.run .ch-foe-card { background: linear-gradient(165deg, rgba(150, 40, 52, .2), transparent 60%), var(--chglass) !important; border-color: rgba(224, 96, 112, .32) !important; }
.ch-panel.run .ch-foe-card .foe-name { color: var(--ink); } .ch-panel.run .ch-foe-card .faint { color: var(--ink-3); }
.ch-panel.run .foe-intent { background: var(--chglass); border-color: var(--line); }
.ch-panel.run .foe-intent b { color: var(--ink); } .ch-panel.run .foe-intent .fi-tag { color: var(--ink-2); font-weight: 500; }
.ch-panel.run .ch-stage-wrap .ch-rn { color: #f4faf2; }
@media (max-width: 560px) { .ch-panel.run { padding: 12px; } .ch-panel.run .ch-foes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .ch-panel.run .ch-foe-card { padding: 9px 10px; } .ch-panel.run .ch-foe-card .foe-name { font-size: 12.5px; } .ch-panel.run .ch-foe-card .rpb-pct { font-size: 11px; } .ch-panel.run .ch-stage-wrap { padding: 16px 10px 14px; } .ch-panel.run .ch-tacs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .ch-panel.run .ch-tac { flex-direction: column; align-items: flex-start; gap: 8px; padding: 11px; } .ch-panel.run .ct-ic { width: 32px; height: 32px; } .ch-panel.run .ct-t b { font-size: 13.5px; } .ch-panel.run .ct-t > span { font-size: 11.5px; } }
/* 비밀의 방(진행 화면) 배치 2: 큰 그림 위에 지도(왼쪽 위) · 괴물(오른쪽) · 지문(아래) → 주문 → 나 · 전투 기록 — 녹색과 검정 */
.ch-panel.run { --chg: #8fe0b0; --chm: #8fe0b0; --rule: rgba(111, 208, 154, .22); --line: rgba(111, 208, 154, .16); --chglass: rgba(3, 8, 6, .62);
  background: radial-gradient(ellipse at 15% -10%, rgba(63, 154, 90, .22), transparent 45%), radial-gradient(ellipse at 100% 110%, rgba(40, 120, 80, .14), transparent 45%), linear-gradient(170deg, #0f1914, #060a08 75%);
  box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .3), inset 0 0 0 4px rgba(0, 0, 0, .3), 0 22px 44px -26px rgba(0, 0, 0, .9); }
.ch-panel.run .ch-eyebrow { color: #6fd09a; }
.ch-panel.run .chip-s.got { color: #ffd76a; }
.ch-big { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 210px minmax(0, 1fr) 250px; grid-template-rows: auto 1fr auto; grid-template-areas: "map head mobs" "map . mobs" "text text text"; gap: 12px; min-height: 440px; padding: 16px; border-radius: 20px; background: #050906; box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .3), 0 18px 36px -20px rgba(0, 0, 0, .9); animation: rcIn .35s ease-out; }
.ch-hero-art { position: absolute; inset: 0; z-index: -1; }
.ch-hero-art .ch-scene { width: 100%; height: 100%; max-height: none; }
.ch-hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 8, 6, .55), transparent 28%, transparent 55%, rgba(3, 8, 6, .85)), radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0, 0, 0, .4)); pointer-events: none; }
.ch-hero-art .ch-scene { filter: brightness(1.2) saturate(1.1); }
.ch-big.fight .ch-hero-art::after { background: linear-gradient(180deg, rgba(3, 8, 6, .55), transparent 28%, transparent 55%, rgba(3, 8, 6, .85)), radial-gradient(ellipse at 50% 45%, rgba(120, 30, 40, .18), rgba(0, 0, 0, .6) 75%); }
.ch-big .ch-cn { border-color: rgba(111, 208, 154, .7); } .ch-big .ch-cn::after { background: #8fe0b0; box-shadow: 0 0 6px #6fd09a; }
.ch-hero-map { grid-area: map; align-self: start; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: rgba(3, 8, 6, .72); box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .28); backdrop-filter: blur(3px); }
.ch-hero-map > svg { width: 100%; height: auto; display: block; }
.ch-hero-map .ch-legend { font-size: 10.5px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.ch-big .ch-head { grid-area: head; align-self: start; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.ch-big .ch-rt { color: #8fe0b0; } .ch-big .ch-rn { color: #f2fbf4; font-size: 26px; }
.ch-hero-text { grid-area: text; }
.ch-hero-text .ch-note { background: rgba(3, 8, 6, .78); box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .3); backdrop-filter: blur(3px); }
.ch-hero-text .ch-orn { background: linear-gradient(135deg, #b8f0cc, #3f9a5a); box-shadow: 0 0 10px rgba(111, 208, 154, .6), 0 0 0 3px #050906; }
.ch-hero-text .foe-intent { background: rgba(3, 8, 6, .78) !important; border-color: rgba(111, 208, 154, .3) !important; backdrop-filter: blur(3px); }
.ch-panel.run .ch-pills .cp.got { color: #ffd76a; }
/* 괴물: 오른쪽에 세로로 */
.ch-mobs { grid-area: mobs; align-self: start; display: flex; flex-direction: column; gap: 6px; }
.ch-mob { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border: 0; border-radius: 12px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; background: rgba(3, 8, 6, .78); box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .22); backdrop-filter: blur(3px); transition: transform .12s, box-shadow .12s; }
.ch-mob:hover { transform: translateX(-3px); box-shadow: inset 0 0 0 1px rgba(143, 224, 176, .6); }
.ch-mob.tgt { box-shadow: inset 0 0 0 2px #8fe0b0, 0 0 16px -4px rgba(111, 208, 154, .7); background: rgba(10, 30, 20, .85); }
.ch-mob.is-boss { padding: 11px 12px; } .ch-mob.is-boss .foe-name { font-size: 15px; }
.cm-top, .cm-bot { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-width: 0; }
.ch-mob .foe-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-pct { flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: #f0a090; }
.cm-bar { display: block; height: 6px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.cm-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a83a3a, #e8806a); transition: width .4s ease; }
.ch-mob.low .cm-bar i { background: linear-gradient(90deg, #7a1c1c, #d0453a); animation: chLow .8s ease-in-out infinite alternate; }
.cm-hp { flex-shrink: 0; font-size: 11px; color: var(--ink-3); }
.ch-mob .ch-fi { margin: 0; font-size: 11px; padding: 2px 8px; }
/* 주문 넷: 한 줄 */
.ch-panel.run .ch-tacs, .ch-panel.run .ch-tacs.fight { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ch-panel.run .ch-tac, .ch-panel.run .ch-tacs.fight .ch-tac { background: linear-gradient(150deg, rgba(63, 154, 90, .16), transparent 70%), var(--chglass); box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .28); }
.ch-panel.run .ct-ic, .ch-panel.run .ch-tacs.fight .ct-ic { color: #e6fff0; background: linear-gradient(140deg, #3f9a5a, #12361f); }
.ch-panel.run .ch-tac:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px #8fe0b0, 0 10px 20px -12px rgba(111, 208, 154, .6); }
.ch-panel.run .ct-t b small.tg { color: #8fe0b0; }
/* 아래: 나 · 전투 기록 */
.ch-panel.run .ch-me2 { background: linear-gradient(180deg, rgba(63, 154, 90, .1), transparent 40%), var(--chglass); box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .3); }
.ch-panel.run .chm-av { background: rgba(63, 154, 90, .18); box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .45); }
.ch-panel.run .chg-ic { color: #b8f0cc; background: linear-gradient(140deg, rgba(63, 154, 90, .35), rgba(63, 154, 90, .08)); }
.ch-panel.run .chg-t em { color: #8fe0b0; }
.ch-panel.run .chm-gear { border-top-color: rgba(111, 208, 154, .2); }
@media (max-width: 760px) {
  .ch-l2 .ch-me2 { align-self: stretch; }
  .ch-big { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "head head" "map mobs" "text text"; min-height: 0; padding: 12px; gap: 10px; }
  .ch-hero-map { padding: 6px; } .ch-hero-map .ch-sh, .ch-hero-map .ch-legend { display: none; }
  .ch-big .ch-rn { font-size: 21px; }
  .ch-mob { padding: 6px 8px; gap: 4px; } .ch-mob .foe-name { font-size: 12px; white-space: normal; line-height: 1.3; } .cm-hp { display: none; }
  .ch-panel.run .ch-tacs, .ch-panel.run .ch-tacs.fight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 천문탑: 지금 하늘 */
.sg-sky-now { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; padding: 9px 12px; border-radius: 12px; background: rgba(120, 140, 220, .1); box-shadow: inset 0 0 0 1px rgba(150, 170, 240, .3); }
.sg-sky-now > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sg-sky-now b { font-size: 13px; }
.sg-sky-now .small { color: var(--ink-2); line-height: 1.45; }
.sg-wx { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(150, 170, 240, .18); } .sg-wx .ico { width: 20px; height: 20px; }
.sg-sky-now.ok { background: rgba(240, 210, 120, .1); box-shadow: inset 0 0 0 1px rgba(240, 210, 120, .4); } .sg-sky-now.ok .sg-wx { background: rgba(240, 210, 120, .2); color: #f0d070; }
.sg-sky-now.no .sg-wx { color: #a9b8e8; }
/* 졸업 갈림길: 직접 정하는 직업 */
.gp-custom { cursor: default; } .gp-custom.on { grid-column: 1 / -1; gap: 8px; }
.gp-pick { display: flex; flex-direction: column; gap: 3px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .gp-pick:disabled { opacity: .45; cursor: default; }
.gj-name { width: 100%; box-sizing: border-box; }
.gj-tal { display: flex; flex-wrap: wrap; gap: 5px; }
.gj-t { padding: 5px 11px; border: 0; border-radius: 99px; font: inherit; font-size: 12px; cursor: pointer; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px var(--rule); }
.gj-t.on { color: var(--ink); font-weight: 700; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.hc-foot { justify-content: flex-start !important; } .hc-foot .hc-wx { margin-top: 0; }
.goods .g-top { position: relative; }
.g-fav { position: absolute; top: -2px; right: -2px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; font-size: 17px; line-height: 1; cursor: pointer; color: var(--ink-3); background: none; transition: transform .12s, color .12s; }
.g-fav:hover { transform: scale(1.15); color: #e0b65c; } .g-fav.on { color: #e0b65c; text-shadow: 0 0 8px rgba(224, 182, 92, .6); }
.chip.fav { box-shadow: inset 0 0 0 1px rgba(224, 182, 92, .7); color: #e0b65c; }
.fav-tip { flex-basis: 100%; font-size: 11px; }
.cr-tools { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 2px; }
.cr-sec { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px var(--rule); }
.cr-sec .eyebrow { display: inline-flex; align-items: center; gap: 5px; } .cr-sec .eyebrow .ico { width: 14px; height: 14px; }
.cr-now { display: flex; align-items: center; gap: 8px; } .cr-now b { font-size: 18px; }
.cr-btns { display: flex; flex-wrap: wrap; gap: 5px; } .cr-btns .btn .ico { width: 14px; height: 14px; }
.gp-more { margin: 2px 0 8px; } .gp-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--rule); }
.gp-more > summary::-webkit-details-marker { display: none; } .gp-more > summary::before { content: '▸'; transition: transform .15s; } .gp-more[open] > summary::before { transform: rotate(90deg); }
.gp-more[open] > summary { margin-bottom: 6px; }
/* 졸업 갈림길: 두 문 · 팝업 */
.grad-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.grad-door { display: flex; align-items: center; gap: 14px; padding: 16px; border: 0; border-radius: 16px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; background: linear-gradient(150deg, color-mix(in srgb, var(--dc) 16%, transparent), transparent 70%), color-mix(in srgb, var(--ink) 3%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc) 45%, var(--rule)); transition: transform .12s, box-shadow .12s; }
.grad-door.regress { --dc: #8a7ec4; } .grad-door.life { --dc: #e0b65c; }
.grad-door:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--dc), 0 12px 24px -16px var(--dc); }
.gd-ic { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: linear-gradient(140deg, var(--dc), color-mix(in srgb, var(--dc) 45%, #000)); } .gd-ic .ico { width: 24px; height: 24px; }
.gd-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .gd-t b { font-size: 18px; font-family: var(--f-display); } .gd-t > span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.gd-t .gd-sub { font-size: 11.5px; color: var(--ink-3); }
.gd-go { flex-shrink: 0; color: var(--dc); } .gd-go .ico { width: 18px; height: 18px; transform: rotate(90deg); }
.grad-pop { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#modal .modal:has(.grad-pop) { width: min(780px, 94vw); max-width: min(780px, 94vw); }
.grad-pop .grad-card { padding: 0; background: none; box-shadow: none; }
.grad-pop .grad-card h3 { margin: 0; }
.grad-warn { display: block; padding: 8px 12px; line-height: 1.55; border-radius: 10px; font-size: 12.5px; color: var(--bad); background: rgba(226, 131, 108, .1); box-shadow: inset 0 0 0 1px rgba(226, 131, 108, .4); } .grad-warn .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.grad-warn.ok { color: var(--ink-2); background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px var(--rule); }
@media (max-width: 560px) { .grad-doors { grid-template-columns: 1fr; } }
.lg-panel { margin-top: 6px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--rule); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.lg-top { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; } .lg-top::-webkit-details-marker { display: none; } .lg-top b { font-size: 13.5px; } .lg-top b .faint { font-weight: 400; }
.lg-chev2 { display: inline-grid; color: var(--ink-3); transition: transform .15s; transform: rotate(90deg); } .lg-chev2 .ico { width: 14px; height: 14px; } .lg-panel[open] .lg-chev2 { transform: rotate(180deg); }
.lg-hint { margin-left: auto; font-size: 11.5px; }
.lg-in { display: flex; flex-direction: column; gap: 2px; padding: 0 6px 8px; }
.lg-chips { display: flex; flex-wrap: wrap; gap: 4px; } .lg-chips span { padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.lg-life { border-radius: 9px; } .lg-life[open] { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.lg-life > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 5px 8px; cursor: pointer; font-size: 13px; border-radius: 9px; } .lg-life > summary::-webkit-details-marker { display: none; }
.lg-life > summary:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.lg-n { flex-shrink: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10.5px; font-weight: 700; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.lg-nm { flex-shrink: 0; } .lg-m { flex-shrink: 0; font-size: 12px; color: var(--ink-3); }
.lg-j { margin-left: auto; min-width: 0; text-align: right; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lg-j em { font-style: normal; color: var(--ink-3); font-size: 11.5px; margin-left: 4px; }
.lg-body { padding: 0 8px 7px 34px; color: var(--ink-3); line-height: 1.5; }
.lg-reg { padding: 2px 8px; color: var(--ink-2); }
@media (max-width: 560px) { .lg-life > summary { flex-wrap: wrap; } .lg-j { flex-basis: 100%; text-align: left; padding-left: 26px; margin: 0; } }
.g-btns:has(.g-br) { flex-wrap: wrap; row-gap: 6px; } .g-br { flex-basis: 100%; height: 0; }
.g-btns .btn.g-sellb { flex: 1 1 0; }
.goods .g-top:has(.g-fav) .g-head { padding-right: 26px; }
.inc-card.d-S, .inc-head.d-S { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #c08aff 70%, transparent), 0 0 24px -8px rgba(160, 96, 255, .8); animation: incS 2.4s ease-in-out infinite alternate; }
@keyframes incS { from { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #c08aff 50%, transparent), 0 0 16px -8px rgba(160, 96, 255, .6); } to { box-shadow: inset 0 0 0 1.5px #c08aff, 0 0 30px -6px rgba(160, 96, 255, .95); } }
.map-bar.folded { padding-block: 4px !important; } .map-bar.folded .map-unfold { font-size: 12.5px; } .mb-chev { opacity: .7; margin-left: 2px; }
.map-fold { width: 28px; height: 28px; font-size: 13px; line-height: 1; }
.pc-find { display: flex; flex-direction: column; gap: 6px; } .pc-find input { width: 100%; box-sizing: border-box; }
.pc-types { gap: 4px; } .pc-types .chip { font-size: 12px; padding: 3px 10px; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; max-height: 236px; overflow-y: auto; padding: 2px; margin-top: 4px; }
.pc-it { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; border: 0; border-radius: 10px; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px var(--rule); }
.pc-it:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--accent); } .pc-it:disabled { opacity: .45; cursor: default; }
.pc-it.in { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pc-it .pc-in { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-have { flex-shrink: 0; font-size: 11px; color: var(--ink-3); } .pc-have b { color: var(--accent); }
.pc-draft { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.pc-row { display: flex; align-items: center; gap: 8px; font-size: 13px; } .pc-row .qty input { width: 40px; }
.pc-sk input { max-width: 180px; }
#pc-note { width: 100%; box-sizing: border-box; min-height: 92px; resize: vertical; line-height: 1.6; }
.pc-open-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--rule); }
.pc-open-btn .ico { width: 15px; height: 15px; } .pc-open-btn .mb-chev { margin-left: auto; } .pc-open-btn.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.pc-pickwrap { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .pc-pickwrap[hidden] { display: none; }
.msg.narr-msg { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 2px 10px; margin: 2px 0; background: none !important; border: 0 !important; box-shadow: none !important; }
.narr-msg .nm-text { font-family: var(--f-display); font-style: italic; font-size: 12px; color: var(--ink-3); opacity: .85; letter-spacing: .02em; text-align: center; }
.narr-msg .t { font-size: 10px; color: var(--ink-3); opacity: .55; }
@media (max-width: 560px) { .chm-key { display: none; } .chm-bars { gap: 8px; } .chm-t { flex-direction: column; align-items: flex-start; gap: 0; } .chg-row { grid-template-columns: 1fr; } .ch-flav { font-size: 14px; } }
.ch-log2 { max-height: 320px; overflow-y: auto; }
.ch-side .ch-log { display: none; }

/* ---------- 마이룸 ---------- */
.mr-stage { display: grid; justify-items: center; }
.mr-room { position: relative; width: 100%; max-width: 720px; aspect-ratio: var(--cols) / var(--rows); border-radius: 12px; overflow: hidden; border: 3px solid #4a2f1c; box-shadow: 0 6px 18px rgba(40, 24, 10, .22), inset 0 0 0 1px rgba(255,255,255,.08); image-rendering: pixelated; user-select: none; -webkit-user-select: none; background: #c9b48e; }
.mr-wall { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--wr) / var(--rows) * 100%); }
.mr-floor { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--wr) / var(--rows) * 100%); box-shadow: inset 0 3px 0 #4a2f1c, inset 0 7px 0 rgba(0,0,0,.12); }
.mr-it { position: absolute; padding: 0; margin: 0; border: 0; background: none; display: block; cursor: default; }
.mr-it img { display: block; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.mr-it.fl img { transform: scaleX(-1); }
.mr-it.c-floor img, .mr-it.c-wall img { filter: drop-shadow(0 2px 0 rgba(0,0,0,.18)); }
button.mr-it { cursor: pointer; }
button.mr-it:hover { filter: brightness(1.08); }
.mr-it.sel { outline: 2px dashed #f2c14a; outline-offset: 1px; animation: mrSel 1.2s ease-in-out infinite; }
@keyframes mrSel { 50% { outline-color: #fff6d0; } }
.mr-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); z-index: 1; }
.mr-cells.placing { z-index: 900; }
.mr-cell { border: 0; padding: 0; margin: 0; background: transparent; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14); cursor: pointer; }
.mr-cells.placing .mr-cell:hover { background: rgba(242, 193, 74, .35); box-shadow: inset 0 0 0 1.5px #f2c14a; }
.mr-empty { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font-size: 13px; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
/* 벽지 */
.w-cream .mr-wall, .mr-sw.w-cream { background: repeating-linear-gradient(90deg, #f1e4c6 0 14px, #ead9b6 14px 15px); }
.w-stone .mr-wall, .mr-sw.w-stone { background: repeating-linear-gradient(0deg, #857c70 0 2px, #a59c8e 2px 16px); }
.w-wood .mr-wall, .mr-sw.w-wood { background: repeating-linear-gradient(90deg, #a57a50 0 22px, #7a5530 22px 24px); }
.w-stripe .mr-wall, .mr-sw.w-stripe { background: repeating-linear-gradient(90deg, #cfe0c4 0 12px, #b8d0aa 12px 24px); }
.w-night .mr-wall, .mr-sw.w-night { background: radial-gradient(1.5px 1.5px at 20% 30%, #f6e7a8 50%, transparent 51%) 0 0 / 60px 40px, radial-gradient(1px 1px at 70% 70%, #fff 50%, transparent 51%) 0 0 / 46px 34px, #232a4e; }
.w-rose .mr-wall, .mr-sw.w-rose { background: radial-gradient(circle at 50% 50%, #e89aa8 0 3px, transparent 3.5px) 0 0 / 26px 26px, #f8e1e4; }
/* 바닥 */
.f-plank .mr-floor, .mr-sw.f-plank { background: repeating-linear-gradient(0deg, #9a7550 0 20px, #7a5a3a 20px 22px); }
.f-stone .mr-floor, .mr-sw.f-stone { background: linear-gradient(90deg, #6f6a64 2px, transparent 2px) 0 0 / 40px 40px, linear-gradient(#6f6a64 2px, transparent 2px) 0 0 / 40px 40px, #8f877d; }
.f-check .mr-floor, .mr-sw.f-check { background: conic-gradient(#e8dcc0 25%, #6b4b2e 0 50%, #e8dcc0 0 75%, #6b4b2e 0) 0 0 / 40px 40px; }
.f-carpet .mr-floor, .mr-sw.f-carpet { background: radial-gradient(circle, #c4544a 1px, transparent 1.5px) 0 0 / 10px 10px, #9a2f2f; }
.f-moss .mr-floor, .mr-sw.f-moss { background: radial-gradient(circle at 30% 40%, #7aa05a 0 2px, transparent 2.5px) 0 0 / 18px 14px, #4f7a3c; }
.mr-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); background-size: 14px 14px !important; }
.mr-bar { margin-top: 8px; }
.mr-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mr-tools .row { flex-wrap: wrap; gap: 6px; }
.mr-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 6px; }
.mr-tray-it { display: grid; justify-items: center; gap: 3px; padding: 8px 4px 6px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); background: color-mix(in srgb, var(--ink) 3%, var(--sheet)); color: var(--ink); font-size: 12px; cursor: pointer; position: relative; }
.mr-tray-it img { width: calc(var(--fw) * 24px); height: calc(var(--fh) * 24px); image-rendering: pixelated; }
.mr-tray-it em { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.mr-tray-it.on { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--sheet)); }
.mr-tray-it:disabled { opacity: .45; cursor: default; }
.mr-box { display: grid; gap: 8px; margin-bottom: 12px; }
.mr-box-t { display: flex; align-items: center; gap: 6px; }
.mr-box .mr-room { max-width: none; }
/* 가구 카드 */
.fn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 8px; }
.fn-grid.sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.fn-card { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); background: var(--sheet); }
.fn-pic { display: grid; place-items: center; height: 92px; border-radius: 8px; background: repeating-conic-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 0 25%, transparent 0 50%) 0 0 / 12px 12px; }
.fn-pic img { width: calc(var(--fw) * 40px); height: calc(var(--fh) * 40px); max-height: 84px; object-fit: contain; image-rendering: pixelated; }
.fn-txt { display: grid; gap: 2px; align-content: start; }
.fn-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.fn-price { width: 84px; }
/* 도트 공방 */
.px-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.px-left { display: grid; justify-items: center; }
.px-grid { display: grid; grid-template-columns: repeat(var(--pw), var(--cs)); grid-auto-rows: var(--cs); touch-action: none; border: 2px solid #4a2f1c; border-radius: 6px; overflow: hidden; background: repeating-conic-gradient(#e9e3d6 0 25%, #f7f3ea 0 50%) 0 0 / calc(var(--cs) * 2) calc(var(--cs) * 2); cursor: crosshair; }
.px-cell { display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.07); }
.px-pal { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 8px; }
.px-sw { aspect-ratio: 1; border-radius: 6px; border: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); cursor: pointer; padding: 0; }
.px-sw.on { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--accent); }
.px-send { display: grid; gap: 8px; }
.px-prev-box { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 8px; background: repeating-conic-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 0 25%, transparent 0 50%) 0 0 / 12px 12px; flex: none; }
.px-prev-box img { width: calc(var(--fw) * 36px); height: calc(var(--fh) * 36px); image-rendering: pixelated; }
@media (max-width: 760px) { .px-wrap { grid-template-columns: 1fr; } .mr-room { border-radius: 8px; border-width: 2px; } }

/* ---------- 대화: 카톡처럼 말풍선 · 내 말은 오른쪽 ---------- */
.chat-list .msg.km { display: flex; align-items: flex-start; gap: 7px; padding: 0; margin: 0; text-indent: 0; line-height: 1.45; }
.chat-list .msg.km:not(.first) { margin-top: -4px; }
.chat-list .msg.km.first:not(:first-child) { margin-top: 4px; }
.msg.km .c-ava { flex: none; width: 32px; height: 32px; margin: 0; border-radius: 12px; }
.msg.km .c-ava b { font-size: 13px; }
.msg.km .km-sp { flex: none; width: 32px; }
.msg.km .km-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: calc(100% - 39px); }
.msg.km.no-ava .km-col { max-width: 88%; }
.msg.km .km-name { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; font-size: .92em; padding-left: 2px; }
.msg.km .km-name .who { font-weight: 600; }
.msg.km .km-row { display: flex; align-items: flex-end; gap: 5px; min-width: 0; }
.msg.km .km-bub { position: relative; display: inline-block; min-width: 0; padding: 6px 11px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, var(--sheet, #fff)); color: var(--ink); line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; box-shadow: 0 1px 1.5px rgba(0, 0, 0, .08); }
.msg.km .km-bub .btn { margin-left: 4px; }
.msg.km.km-you.first .km-bub { border-top-left-radius: 4px; }
.msg.km.km-you.first:not(.no-ava) .km-bub::before { content: ""; position: absolute; left: -5px; top: 0; width: 10px; height: 10px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.msg.km .km-side { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: none; }
.msg.km .km-side .t { margin: 0 !important; font: 10.5px var(--f-mono); color: var(--ink-3); opacity: .85; white-space: nowrap; }
.msg.km .km-side .del { margin: 0 !important; opacity: 0; }
.msg.km:hover .km-side .del, .msg.km .km-side .del:focus { opacity: .7; }
/* 내 말 */
.msg.km.km-me { flex-direction: row-reverse; }
.msg.km.km-me .km-name { justify-content: flex-end; padding: 0 2px 0 0; }
.msg.km.km-me .km-col { align-items: flex-end; }
.msg.km.km-me .km-row { flex-direction: row-reverse; }
.msg.km.km-me .km-side { align-items: flex-end; }
.msg.km.km-me .km-bub { background: color-mix(in srgb, #f2c94c 42%, var(--sheet, #fff)); color: color-mix(in srgb, var(--ink) 92%, #3a2a00); }
.msg.km.km-me.first .km-bub { border-top-right-radius: 4px; }
.msg.km.km-me.first:not(.no-ava) .km-bub::before { content: ""; position: absolute; right: -5px; top: 0; width: 10px; height: 10px; background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%); }
:root[data-theme="dark"] .msg.km .km-bub { background: color-mix(in srgb, #fff 9%, var(--sheet, #222)); }
:root[data-theme="dark"] .msg.km.km-me .km-bub { background: color-mix(in srgb, #e2b94a 34%, var(--sheet, #222)); color: #fbf3df; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg.km .km-bub { background: color-mix(in srgb, #fff 9%, var(--sheet, #222)); } :root:not([data-theme="light"]) .msg.km.km-me .km-bub { background: color-mix(in srgb, #e2b94a 34%, var(--sheet, #222)); color: #fbf3df; } }

/* 게시판: 글·댓글 고치기 */
.ed-tag { margin-left: 5px; font-size: 11px; color: var(--ink-3); opacity: .8; }
.ed-tag::before { content: "· "; }
.bd-eform { display: grid; gap: 6px; margin: 4px 0 8px; }
.bd-eform input, .bd-eform textarea { width: 100%; }
.bc-eform { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.bc-eform input { flex: 1; min-width: 0; }

/* ---------- 기숙사 휴게실 꾸미기(쿼터뷰) ---------- */
.hr-room { position: relative; width: 100%; max-width: 760px; margin: 0 auto; border-radius: 14px; overflow: hidden; user-select: none; -webkit-user-select: none;
  background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--hc) 22%, #3a2c1e), #18120c 75%); box-shadow: 0 8px 22px rgba(20, 12, 4, .3), inset 0 0 0 1px rgba(255,255,255,.06); }
.hr-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hr-wall.l { fill: color-mix(in srgb, var(--hc) 12%, #efdfbd); }
.hr-wall.r { fill: color-mix(in srgb, var(--hc) 16%, #d9c39c); }
.hr-trim { fill: #5a3a22; }
.hr-banner { fill: var(--hc); opacity: .85; }
.hr-floor { fill: #8e6644; }
.hr-tile { fill: transparent; stroke: rgba(40, 22, 8, .16); stroke-width: 1; }
.hr-tile.b { fill: rgba(0, 0, 0, .05); }
.hr-tiles.edit .hr-tile { cursor: pointer; stroke: rgba(255, 240, 200, .28); }
.hr-tiles.placing .hr-tile:hover { fill: rgba(242, 193, 74, .42); stroke: #f2c14a; stroke-width: 1.5; }
.hr-its { position: absolute; inset: 0; pointer-events: none; }
.hr-it { position: absolute; padding: 0; margin: 0; border: 0; background: none; display: block; pointer-events: none; }
button.hr-it { pointer-events: auto; cursor: pointer; }
.hr-room.placing .hr-it { pointer-events: none !important; }
.hr-it img { display: block; width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .22)); pointer-events: none; }
.hr-it.fl img { transform: scaleX(-1); }
.hr-room.edit .hr-it:not(.mine) { opacity: .78; }
button.hr-it:hover img { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .22)) brightness(1.1); }
.hr-it.sel img { filter: drop-shadow(0 0 0 #f2c14a) drop-shadow(2px 0 0 #f2c14a) drop-shadow(-2px 0 0 #f2c14a) drop-shadow(0 2px 0 #f2c14a) drop-shadow(0 -2px 0 #f2c14a); }
.hr-card { display: grid; gap: 10px; }
.hr-card .hr-room { max-width: 560px; }
.px-cur { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.px-pick-wrap { position: relative; width: 34px; height: 34px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 0 0 2px var(--sheet), 0 0 0 4px var(--accent); cursor: pointer; flex: none; }
.px-pick-wrap input { position: absolute; inset: -8px; width: 50px; height: 50px; opacity: 0; cursor: pointer; }
.px-pick-wrap span { position: absolute; inset: 0; pointer-events: none; }
.px-used-h { display: block; margin-top: 10px; }
.px-used { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.px-used .px-sw { width: 24px; height: 24px; aspect-ratio: auto; }
.px-file-btn { position: relative; justify-self: start; margin-top: 6px; cursor: pointer; }

/* 날씨: 바뀜 알림 · 소리 */
button.hc-wx { border: 0; font: inherit; font-size: 12px; color: inherit; cursor: pointer; text-align: left; }
button.hc-wx:hover { filter: brightness(1.06); box-shadow: inset 0 0 0 1px currentColor; }
.hc-wx-snd { font-size: 11px; opacity: .8; }
.hc-wx.snd-on .hc-wx-snd { opacity: 1; font-weight: 700; }
.wx-pop { position: fixed; z-index: 3000; display: flex; align-items: center; gap: 10px; max-width: min(380px, calc(100vw - 24px)); padding: 10px 10px 10px 12px; border-radius: 14px; background: var(--sheet, #fff); color: var(--ink); box-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .35s; }
.wx-pop.top { left: 50%; top: 64px; transform: translate(-50%, -8px); }
.wx-pop.show { opacity: 1; transform: none; } .wx-pop.top.show { transform: translate(-50%, 0); }
.wx-pop.side::before { content: ""; position: absolute; left: -6px; top: 16px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); box-shadow: -1px 1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.wx-pop .wp-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, var(--sheet, #fff)); flex: none; }
.wx-pop .wp-ico .ico { width: 22px; height: 22px; }
.wx-pop .wp-txt { display: grid; gap: 2px; font-size: 12.5px; min-width: 0; } .wx-pop .wp-txt span { font-size: 11.5px; color: var(--ink-3); }
.wx-pop .wp-btns { display: flex; align-items: center; gap: 4px; flex: none; }
.test-panel { border-style: dashed !important; }

/* 휴게실: 자유 배치 · 끌어 옮기기 · 기록 */
.hr-room.placing { cursor: crosshair; }
.hr-room.edit button.hr-it.mine { cursor: grab; touch-action: none; }
.hr-it.dragging { cursor: grabbing !important; opacity: .85; }
.hr-it.dragging img { filter: drop-shadow(0 10px 6px rgba(0,0,0,.3)) !important; }
.hr-log { display: grid; gap: 4px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.hr-log-row { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; }
.hr-log-row b { flex: none; } .hr-log-row > span:nth-child(2) { flex: 1; min-width: 0; color: var(--ink-2); } .hr-log-row .small { flex: none; }

.mr-z { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.mr-z b { min-width: 22px; text-align: center; font-size: 12px; }
.pm-vol { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.pm-vol input { width: 90px; }
.bgl-req { margin-top: 8px; }

/* 왼쪽 메뉴: 묶음 접기 */
button.nav-label { display: flex; align-items: center; gap: 4px; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit; position: relative; }
button.nav-label:hover { opacity: 1; }
.nav-label .nl-ar { font-size: 8px; opacity: .28; letter-spacing: 0; font-weight: 400; }
.nav-label:hover .nl-ar { opacity: .55; }
.nav-label .nl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bad, #d9534f); margin-left: 2px; }
.nav-group.folded > button:not(.nav-label):not(.on) { display: none; }
.nav-group.folded { row-gap: 0; }
:root[data-rail="icon"] button.nav-label { pointer-events: none; }
:root[data-rail="icon"] .nav-group.folded > button:not(.nav-label) { display: grid; }

/* 필요의 방: 레이어 패널 · 꾸미는 중 표시 */
.hr-stage { display: grid; gap: 10px; align-items: start; }
.hr-stage .hr-room { max-width: 980px; }
.hr-stage.with-lay { grid-template-columns: minmax(0, 1fr) 236px; }
.hr-stage.with-lay.lay-folded { grid-template-columns: minmax(0, 1fr) auto; }
.hr-layers { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; max-height: 620px; padding: 10px; border-radius: 14px; background: var(--sheet); box-shadow: 0 4px 14px rgba(0,0,0,.12), inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); position: sticky; top: 70px; }
.hr-layers.folded { padding: 0; background: none; box-shadow: none; }
.hr-lay-tab { writing-mode: vertical-rl; padding: 12px 6px; border-radius: 10px; border: 0; background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; }
.hr-lay-head { display: flex; align-items: center; gap: 6px; } .hr-lay-head b { flex: 1; }
.hr-lay-list { display: grid; gap: 4px; overflow-y: auto; align-content: start; padding-right: 2px; }
.hr-lay { display: flex; align-items: center; gap: 4px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.hr-lay.on { background: color-mix(in srgb, var(--accent) 18%, var(--sheet)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.hr-lay-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 5px 6px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.hr-lay-main:disabled { cursor: default; opacity: .7; }
.hr-lay-main img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; flex: none; border-radius: 6px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.hr-lay-main span { display: grid; min-width: 0; } .hr-lay-main b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hr-lay-main small { font-size: 10.5px; color: var(--ink-3); }
.hr-lay-btns { display: flex; flex-direction: column; gap: 1px; padding-right: 4px; } .hr-lay-btns .iconbtn { width: 22px; height: 18px; font-size: 9px; }
.hr-lay-note { text-align: center; }
.hr-busy { margin-top: 8px; padding: 8px 12px; border-radius: 12px; font-size: 13px; background: color-mix(in srgb, #e2b94a 18%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #e2b94a 45%, transparent); }
@media (max-width: 900px) { .hr-stage.with-lay, .hr-stage.with-lay.lay-folded { grid-template-columns: 1fr; } .hr-layers { position: static; max-height: 320px; } .hr-lay-tab { writing-mode: horizontal-tb; width: 100%; } }

/* 필요의 방 크게 보기 */
.hr-body.big { position: fixed; inset: 0; z-index: 4000; overflow-y: auto; padding: 14px 18px 40px; background: color-mix(in srgb, #0d0a07 94%, transparent); backdrop-filter: blur(4px); display: grid; gap: 10px; align-content: start; color: var(--ink); border-radius: 0 !important; }
.hr-card.hr-body.big { margin: 0; }
.hr-big-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #f3e7cf; position: sticky; top: -14px; z-index: 2; padding: 6px 0; background: inherit; }
.hr-body.big .hr-stage .hr-room { max-width: none; width: min(100%, calc((100vh - 120px) * 1.19)); justify-self: center; }
.hr-body.big .hr-stage.with-lay { grid-template-columns: minmax(0, 1fr) 250px; }
.hr-body.big .hr-layers { max-height: calc(100vh - 140px); top: 40px; }
.hr-body.big .panel, .hr-body.big .hr-log { background: var(--sheet); }
html.hr-big-on body { overflow: hidden; }
.hr-card .hr-stage .hr-room { max-width: none; }
.ver-foot { text-align: center; margin: 18px 0 6px; letter-spacing: .03em; }
.nm-who { border: 0; background: none; padding: 0; font: inherit; color: inherit; font-weight: 700; text-decoration: underline dotted 1px; text-underline-offset: 2px; cursor: pointer; }
.nm-who:hover { color: var(--accent); }

/* 날씨 알림: 날씨마다 색 · 작은 스피커 */
.wx-pop { --wc: #8a9bb0; background: color-mix(in srgb, var(--wc) 22%, var(--sheet, #fff)) !important; box-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 0 0 1.5px color-mix(in srgb, var(--wc) 60%, transparent) !important; }
.wx-pop .wp-ico { background: color-mix(in srgb, var(--wc) 40%, var(--sheet, #fff)) !important; color: color-mix(in srgb, var(--wc) 70%, var(--ink)); }
.wx-pop.wx-clear { --wc: #f2b632; } .wx-pop.wx-cloudy { --wc: #9aa3ad; } .wx-pop.wx-rain { --wc: #4f86c6; } .wx-pop.wx-storm { --wc: #8a63c9; }
.wx-pop.wx-fog { --wc: #a9b4ae; } .wx-pop.wx-wind { --wc: #4fb3a2; } .wx-pop.wx-snow { --wc: #9cc8ef; }
.wx-pop .wp-snd { width: 30px; height: 30px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--wc) 30%, transparent); font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.wx-pop .wp-snd:hover { background: color-mix(in srgb, var(--wc) 50%, transparent); }
/* 낚시 호수: 시간대별 하늘 */
.lake .lake-art { pointer-events: none; }
.lake-star { fill: #fff6d0; animation: lakeTw 2.6s ease-in-out infinite; }
@keyframes lakeTw { 50% { opacity: .35; } }
.lake-moon { fill: #f3e7b8; } .lake-moon-cut { fill: #1b2347; }
.lake-sun { fill: #ffe08a; } .lake-sun.low { fill: #ffb067; opacity: .9; }
.lake.tod-day .lake-sky { fill: #9fd0f0; } .lake.tod-day .lake-water { fill: #2f6b8c; }
.lake.tod-dawn .lake-sky { fill: #d9a8c8; } .lake.tod-dawn .lake-water { fill: #4a4f7a; }
.lake.tod-dusk .lake-sky { fill: #f0a066; } .lake.tod-dusk .lake-water { fill: #4a3f5e; }
.lake.tod-eve .lake-sky { fill: #3a3f78; } .lake.tod-eve .lake-water { fill: #1f2a4a; }
.lake.tod-night .lake-sky { fill: #1b2347; } .lake.tod-night .lake-water { fill: #111a30; }
.lake-tod { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; width: fit-content; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.lake-tod.tod-night, .lake-tod.tod-eve { background: color-mix(in srgb, #3a3f78 30%, transparent); }
.lake-tod.tod-day { background: color-mix(in srgb, #9fd0f0 30%, transparent); }
.lake-tod.tod-dusk { background: color-mix(in srgb, #f0a066 30%, transparent); }
.lake-tod.tod-dawn { background: color-mix(in srgb, #d9a8c8 30%, transparent); }

/* 필요의 방: 간격 · 회전 손잡이 · 붓 크기 */
.hr-body .mr-bar { margin: 12px 0 12px; gap: 10px; flex-wrap: wrap; }
.hr-body .mr-tools, .hr-body > .panel { margin-bottom: 12px; }
.hr-body .mr-bar > .row { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.hr-rot { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; line-height: 1; background: #f2c14a; color: #3a2a00; box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: grab; touch-action: none; z-index: 5; }
.hr-rot::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 6px; background: #f2c14a; transform: translateX(-50%); }
.hr-it.sel { overflow: visible; }
.px-brush { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.px-bsz { width: 30px; height: 30px; border-radius: 8px; border: 0; background: color-mix(in srgb, var(--ink) 6%, transparent); display: grid; place-items: center; cursor: pointer; }
.px-bsz i { display: block; width: calc(var(--n) * 4px + 2px); height: calc(var(--n) * 4px + 2px); background: var(--ink); border-radius: 2px; }
.px-bsz.on { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* 레이어 버튼 2×2 · 관리자 휴지통 */
.hr-lay-btns { display: grid !important; grid-template-columns: repeat(2, 22px); gap: 1px; padding-right: 4px; }
.hr-lay-btns .iconbtn { width: 22px; height: 18px; font-size: 10px; }
.hr-lay-del { color: var(--bad, #c0392b); margin-right: 4px; }
/* 엑셀 스킨: 장소 「여기서 할 수 있는 일」 게시판도 엑셀 색 */
html:root[data-skin="excel"] .gboard { background: #f3f3f3 !important; background-image: none !important; border: 1px solid #c6c6c6 !important; border-radius: 0 !important; box-shadow: none !important; }
html:root[data-skin="excel"] .gb-head h2 { color: #185c37 !important; text-shadow: none !important; font-family: var(--f-body) !important; }
html:root[data-skin="excel"] .gb-head .small { color: #6b6b6b !important; }
html:root[data-skin="excel"] .gb-pins { gap: 0 !important; padding: 0 !important; border-top: 1px solid #d4d4d4; border-left: 1px solid #d4d4d4; }
html:root[data-skin="excel"] .gb-pin { transform: none !important; border-radius: 0 !important; background: #fff !important; border-right: 1px solid #d4d4d4 !important; border-bottom: 1px solid #d4d4d4 !important; box-shadow: none !important; color: #1f1f1f !important; }
html:root[data-skin="excel"] .gb-pin:hover { background: #e3f1e8 !important; }
html:root[data-skin="excel"] .gb-pin.on { background: #e3f1e8 !important; box-shadow: inset 0 0 0 2px #217346 !important; }
html:root[data-skin="excel"] .gb-tack { display: none !important; }
html:root[data-skin="excel"] .gb-ico { border-radius: 2px !important; background: #e3f1e8 !important; color: #217346 !important; }
html:root[data-skin="excel"] .gb-sub { color: #6b6b6b !important; }
html:root[data-skin="excel"] .gb-pin.hot .gb-sub { color: #217346 !important; }
html:root[data-skin="excel"] .gb-pin.hot::after { background: #217346 !important; box-shadow: 0 0 0 3px rgba(33, 115, 70, .2) !important; }
html:root[data-skin="excel"] .gb-open { border-radius: 0 !important; box-shadow: none !important; border: 1px solid #c6c6c6 !important; border-top: 3px solid #217346 !important; }

/* 필요의 방 벽지·바닥 */
.hw-line { stroke: rgba(0,0,0,.1); stroke-width: 1.5; } .hw-line.mint { stroke: rgba(70, 120, 80, .22); stroke-width: 6; } .hw-line.wood { stroke: rgba(60, 35, 15, .25); }
.hw-dot.night { fill: #f6e7a8; } .hw-dot.rose { fill: rgba(200, 90, 110, .35); } .hw-dot.gold { fill: rgba(150, 110, 30, .35); }
.hr-deco-box { display: grid; gap: 6px; margin: 4px 0 10px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.hr-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 5px; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.hr-deco-c:disabled { opacity: 1; }

/* 꾸러미 칸 아이콘 가운데로(모든 스킨) */
.sl-ring .iti { margin: 0 !important; vertical-align: 0 !important; }
/* 프로필 벌점 · 미리 보기 */
.pen-panel > summary { cursor: pointer; list-style: none; } .pen-panel > summary::-webkit-details-marker { display: none; }
.pen-panel > summary::after { content: '▾'; margin-left: 6px; opacity: .5; } .pen-panel[open] > summary::after { content: '▴'; }
.pen-panel .bad { color: var(--bad, #c0392b); }
.pf-prev { display: grid; gap: 10px; max-width: 760px; }

/* 개구리 초콜릿 카드 */
.fc-card { position: relative; width: 240px; max-width: 100%; margin: 0 auto; padding: 12px 14px 14px; border-radius: 14px; color: #3a2410; text-align: center; display: grid; gap: 8px;
  background: linear-gradient(160deg, #fff6dd, #f3dfb0); box-shadow: 0 0 0 3px var(--rc), 0 0 0 7px #5a3a1c, 0 0 0 9px var(--rc), 0 14px 30px rgba(0,0,0,.35); }
.fc-card.r-l { background: linear-gradient(160deg, #fff4c8, #f1cf6a 55%, #fff1b8); }
.fc-card.r-r { background: linear-gradient(160deg, #f4efff, #d8cdf4); }
.fc-top { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--rc) 75%, #3a2410); letter-spacing: .04em; }
.fc-portrait { position: relative; height: 150px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 35%, #fff), color-mix(in srgb, var(--rc) 60%, #3a2410)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.fc-portrait b { position: relative; font: 700 64px var(--f-display); color: #fff8e6; text-shadow: 0 3px 10px rgba(0,0,0,.35); animation: fcWave 3.2s ease-in-out infinite; }
.fc-glow { position: absolute; inset: -30%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.35), transparent 30%); animation: fcSpin 6s linear infinite; }
.fc-spark { position: absolute; color: #fff6c8; font-style: normal; animation: fcTw 1.8s ease-in-out infinite; } .fc-spark.s1 { left: 16%; top: 18%; } .fc-spark.s2 { right: 18%; top: 30%; animation-delay: .6s; } .fc-spark.s3 { left: 30%; bottom: 16%; animation-delay: 1.1s; }
.fc-name { font: 700 18px var(--f-display); }
.fc-story { margin: 0; font-size: 12.5px; line-height: 1.55; color: #5a4024; }
.fc-n { font-size: 11px; color: #7a6040; }
@keyframes fcSpin { to { transform: rotate(360deg); } } @keyframes fcTw { 50% { opacity: .2; transform: scale(.7); } } @keyframes fcWave { 50% { transform: translateY(-4px) rotate(-2deg); } }
.frog-pop { position: relative; display: grid; gap: 12px; justify-items: center; text-align: center; padding: 8px 4px; overflow: hidden; }
.frog-pop .fc-card { animation: fcIn .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes fcIn { from { transform: rotateY(90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.fp-head { font: 700 18px var(--f-display); color: #3f7d46; }
.fp-new { position: absolute; top: 42px; right: 18%; z-index: 3; padding: 3px 10px; border-radius: 999px; background: #e0452f; color: #fff; font-weight: 800; font-size: 12px; transform: rotate(12deg); box-shadow: 0 3px 8px rgba(0,0,0,.3); animation: fpNew 1s ease-in-out infinite alternate; }
@keyframes fpNew { to { transform: rotate(12deg) scale(1.12); } }
.fp-burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; }
.fp-burst i { position: absolute; left: -3px; top: -60px; width: 6px; height: 40px; border-radius: 3px; background: linear-gradient(#f6e7a8, transparent); transform-origin: 3px 60px; transform: rotate(var(--a)); opacity: 0; animation: fpRay 1.2s ease-out var(--d) forwards; }
@keyframes fpRay { 20% { opacity: 1; } to { opacity: 0; top: -150px; } }
.frog-pop.view .fc-card { animation: none; }
.frog-deck .fd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 8px; }
.fd-card { display: grid; align-content: center; justify-items: center; gap: 2px; min-height: 64px; padding: 6px; border-radius: 10px; border: 0; font: inherit; cursor: pointer; color: #3a2410; text-align: center;
  background: linear-gradient(160deg, #fff6dd, #f3dfb0); box-shadow: inset 0 0 0 2px #b98a4a; }
.fd-card b { font-size: 11.5px; line-height: 1.25; } .fd-card span { font-size: 10px; opacity: .7; }
.fd-card.r-r { box-shadow: inset 0 0 0 2px #7a6ad0; background: linear-gradient(160deg, #f4efff, #d8cdf4); }
.fd-card.r-l { box-shadow: inset 0 0 0 2px #e0a92a, 0 0 8px rgba(224, 169, 42, .45); background: linear-gradient(160deg, #fff4c8, #f1cf6a); }
.fd-card.none { cursor: default; background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink-3); }
.fd-card:not(.none):hover { transform: translateY(-2px); }
/* 점술 교실 수정 구슬 */
.cry-box { display: grid; gap: 10px; justify-items: center; text-align: center; }
.cry-ball { position: relative; width: 170px; height: 170px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle at 35% 30%, #ffffff 0 8%, #d8ecff 18%, #8fb8e8 55%, #4a5aa8 85%, #2a2f6a); box-shadow: 0 0 30px rgba(140, 180, 255, .45), inset 0 -10px 30px rgba(20, 20, 60, .5); }
.cry-ball::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -16px; height: 22px; border-radius: 6px; background: linear-gradient(#c9a24a, #8a6420); z-index: -1; }
.cry-mist { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.55), transparent 65%); filter: blur(6px); animation: cryMist 5s ease-in-out infinite; }
@keyframes cryMist { 50% { transform: translate(6px, -5px) scale(1.08); opacity: .7; } }
.cry-print { position: absolute; left: 50%; top: 50%; width: 46px; height: 56px; transform: translate(-50%, -50%); stroke: rgba(255,255,255,.75); opacity: .85; transition: opacity .3s; }
.cry-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; }
.cry-ring circle { fill: none; stroke: #f6e7a8; stroke-width: 3; stroke-dasharray: 296; stroke-dashoffset: 296; }
.cry-ball.holding .cry-ring circle { transition: stroke-dashoffset 1.6s linear; stroke-dashoffset: 0; }
.cry-ball.holding .cry-print { opacity: 1; filter: drop-shadow(0 0 6px #fff); }
.cry-ball.holding { box-shadow: 0 0 50px rgba(200, 220, 255, .8), inset 0 -10px 30px rgba(20, 20, 60, .5); }
.cry-ball.reveal { animation: cryFlash .65s ease-out; } @keyframes cryFlash { 40% { filter: brightness(1.8); transform: scale(1.06); } }
.cry-ball.shown { cursor: default; background: radial-gradient(circle at 35% 30%, #ffffff 0 8%, color-mix(in srgb, var(--cc) 30%, #e8f2ff) 22%, color-mix(in srgb, var(--cc) 60%, #4a5aa8) 70%, #2a2f6a); display: grid; place-items: center; }
.cry-vision { position: relative; max-width: 120px; font: 700 13px var(--f-display); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); animation: cryIn 1.4s ease both; }
@keyframes cryIn { from { opacity: 0; filter: blur(6px); } }
.cry-text { margin: 4px 0 0; font: 600 15px var(--f-display); max-width: 360px; }
.cry-lucky { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 12.5px; }

/* 왼쪽 메뉴 통째로 접기: 왼쪽으로 쏙 */
.shell { transition: grid-template-columns .3s ease; }
.rail { transition: transform .3s ease, opacity .3s ease; position: sticky; }
.rail-hide-btn { position: absolute; top: 2px; right: 4px; z-index: 3; width: 22px; height: 18px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-3); opacity: .45; font-size: 15px; line-height: 1; cursor: pointer; }
.rail-hide-btn:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 7%, transparent); }
html.rail-hide .shell { grid-template-columns: 0px minmax(0, 1fr); }
html.rail-hide .shell.docked { grid-template-columns: 0px minmax(0, 1fr) var(--chat-w, 340px); }
html.rail-hide .rail { width: var(--rail); transform: translateX(-100%); opacity: 0; pointer-events: none; }
#rail-show { position: fixed; left: 0; top: 76px; z-index: 900; display: none; width: 22px; height: 44px; border: 0; border-radius: 0 10px 10px 0; background: var(--sheet); color: var(--ink-2); box-shadow: 0 2px 8px rgba(0,0,0,.2), inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); font-size: 15px; cursor: pointer; }
#rail-show:hover { width: 28px; color: var(--accent); }
html.rail-hide #rail-show { display: block; }
@media (max-width: 1360px) { html.rail-hide .shell.docked { grid-template-columns: 0px minmax(0, 1fr); } }
@media (max-width: 900px) { .rail-hide-btn, #rail-show, html.rail-hide #rail-show { display: none !important; } html.rail-hide .shell, html.rail-hide .shell.docked { grid-template-columns: minmax(0, 1fr); } }

/* 카드 속 움직이는 마법사 */
.fc-portrait .fw { position: relative; width: 120px; height: 132px; margin-top: 18px; overflow: visible; }
.fw-body { transform-origin: 50px 110px; animation: fwBob 3s ease-in-out infinite; }
.fw-arm { transform-origin: 66px 72px; animation: fwWave 1.6s ease-in-out infinite; }
.fw-wand .fw-arm { animation: fwWand 2.4s ease-in-out infinite; } .fw-bow .fw-arm { animation: fwWave 2.8s ease-in-out infinite; }
.fw-bow .fw-body { animation: fwBow 4s ease-in-out infinite; }
.fw-head { transform-origin: 50px 58px; animation: fwTilt 4.5s ease-in-out infinite; }
.fw-eyes { transform-origin: 50px 44px; animation: fwBlink 4s steps(1) infinite; }
.fw-tip { animation: fwTip 1.2s ease-in-out infinite; }
@keyframes fwBob { 50% { transform: translateY(-3px); } }
@keyframes fwWave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-18deg); } 75% { transform: rotate(10deg); } }
@keyframes fwWand { 0%, 60%, 100% { transform: rotate(0deg); } 70% { transform: rotate(-28deg); } 80% { transform: rotate(8deg); } }
@keyframes fwBow { 0%, 70%, 100% { transform: rotate(0deg); } 80% { transform: rotate(-8deg) translateY(2px); } }
@keyframes fwTilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
@keyframes fwBlink { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes fwTip { 50% { r: 4; opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .fw * { animation: none !important; } }

/* 대왕 호박 키우기 */
.pk-sec { --evc: #e8772a; }
.pk-top { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 16px; align-items: center; }
.pk-stage { border-radius: 16px; background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, #e8772a 16%, transparent), transparent 70%); }
.pk-art { display: block; width: 100%; height: auto; overflow: visible; }
.pk-grow { transform-origin: 80px 126px; animation: pkBreath 3.2s ease-in-out infinite; }
.pk-tw text { fill: #f4c542; font-size: 12px; animation: fcTw 2s ease-in-out infinite; } .pk-tw text:nth-child(2) { animation-delay: .6s; } .pk-tw text:nth-child(3) { animation-delay: 1.2s; }
@keyframes pkBreath { 50% { transform: scale(1.03, .98); } }
@keyframes fcTw { 50% { opacity: .2; } }
.pk-info { display: grid; gap: 8px; align-content: center; }
.pk-name { font-size: 20px; } .pk-kg { font-size: 14px; color: var(--ink-2); } .pk-kg b { font-size: 26px; color: var(--evc); margin-right: 2px; }
.pk-steps { display: flex; gap: 6px; } .pk-steps span { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); } .pk-steps span.on { background: var(--evc); }
.pk-info .btn { justify-self: start; }
.pk-bar { display: block; height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; } .pk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f4a24a, var(--evc)); transition: width .5s ease; }
.pk-steps span { height: 4px !important; }
.pk-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pk-act { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--evc) 30%, var(--rule)); background: color-mix(in srgb, var(--evc) 6%, var(--sheet)); color: var(--ink); cursor: pointer; font: inherit; }
.pk-act em { font-style: normal; font-size: 22px; } .pk-act small { color: var(--ink-3); font-size: 11.5px; }
.pk-act:hover:not(:disabled) { background: color-mix(in srgb, var(--evc) 14%, var(--sheet)); }
.pk-act:disabled { cursor: default; opacity: .55; } .pk-act.done { opacity: .7; border-style: dashed; }
.pk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.pk-cols > div { display: grid; gap: 8px; align-content: start; }
.pk-rank { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13.5px; }
.pk-rank li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 56px; align-items: baseline; gap: 6px; padding: 5px 8px; border-radius: 9px; }
.pk-rank li:nth-child(odd) { background: color-mix(in srgb, var(--ink) 4%, transparent); } .pk-rank li.me { font-weight: 700; outline: 1px solid color-mix(in srgb, var(--evc) 40%, transparent); }
.pk-rn { text-align: center; color: var(--ink-3); font-size: 12.5px; } .pk-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-rank b { text-align: right; } .pk-rank small { font-size: 11px; }
.pk-feed { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; font-size: 13px; max-height: 330px; overflow-y: auto; }
.pk-feed li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 5px 4px; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 10%, transparent); line-height: 1.45; }
.pk-feed li.me { background: color-mix(in srgb, var(--evc) 7%, transparent); } .pk-ft { color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.pk-sc { color: var(--evc); } .pk-sc.hi { color: #e0a92a; }
@media (max-width: 560px) { .pk-top { grid-template-columns: 1fr; } .pk-stage { max-width: 220px; justify-self: center; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .pk-grow, .pk-tw text { animation: none; } }

.bgr-mus { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; font-size: 15px; line-height: 1; cursor: pointer; opacity: .4; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.bgr-mus.on { opacity: 1; filter: none; animation: bgrSax 1.4s ease-in-out infinite; } .bgr-mus:hover { opacity: .85; }
@keyframes bgrSax { 50% { transform: rotate(-10deg); } }
@media (prefers-reduced-motion: reduce) { .bgr-mus.on { animation: none; } }

.pill.fb-replied { background: color-mix(in srgb, #4f9a6a 14%, transparent); color: #3f8a5a; border-color: color-mix(in srgb, #4f9a6a 35%, transparent); }
:root[data-theme="dark"] .pill.fb-replied { color: #8fd0a6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.fb-replied { color: #8fd0a6; } }

.fly-wx { padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; border: 1px solid var(--rule); }
.fly-wx.risky { background: color-mix(in srgb, #e0a92a 12%, transparent); border-color: color-mix(in srgb, #e0a92a 40%, transparent); }
.fly-wx.shut { background: color-mix(in srgb, #7a9cc0 12%, transparent); border-color: color-mix(in srgb, #7a9cc0 40%, transparent); }
.fly-ask { display: grid; gap: 10px; justify-items: center; text-align: center; max-width: 380px; margin: 0 auto; }
.fly-ask .row { justify-self: stretch; } .fa-bolt { font-size: 44px; animation: faBolt 1.6s ease-in-out infinite; }
@keyframes faBolt { 0%, 86%, 100% { opacity: 1; transform: none; } 90% { opacity: .2; transform: scale(1.15); } 94% { opacity: 1; } 97% { opacity: .4; } }
.fg-sky.fg-bolt { animation: fgBolt .9s ease-out; }
@keyframes fgBolt { 0% { filter: brightness(3.2) saturate(.3); } 12% { filter: brightness(1); } 22% { filter: brightness(2.6) saturate(.4); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .fa-bolt, .fg-sky.fg-bolt { animation: none; } }

.hr-wallart .hw-line { stroke-width: 3; } .hr-wallart .hw-line.mint { stroke-width: 12; } .hr-wallart { pointer-events: none; }
.hr-lay { flex-wrap: wrap; }
.hr-lay-btns.hr-lay-my { display: flex !important; flex-direction: row; flex-basis: 100%; justify-content: flex-end; gap: 4px; padding: 0 6px 5px; }
.hr-lay-my .btn { padding: 2px 10px; font-size: 11.5px; min-height: 0; height: 22px; }

.mr-tray-it img { width: min(calc(var(--fw) * 24px), 72px); height: min(calc(var(--fh) * 24px), 56px); object-fit: contain; }
.fn-pic img { width: min(calc(var(--fw) * 40px), 100%); }
.px-prev-box img { width: min(calc(var(--fw) * 36px), 144px); height: min(calc(var(--fh) * 36px), 144px); object-fit: contain; }

.hr-room-wrap { display: grid; gap: 4px; min-width: 0; }
.hr-credit { margin: 0; text-align: center; font-size: 11px; color: var(--ink-3); opacity: .75; }
.hr-body.big .hr-stage .hr-room-wrap { justify-items: center; }

.lvg-key { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; font: 600 11.5px/1.5 inherit; color: inherit; background: color-mix(in srgb, currentColor 16%, transparent); border: 1px solid color-mix(in srgb, currentColor 45%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, currentColor 35%, transparent); opacity: 1; }

.treat-opt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #e8772a 12%, var(--sheet)); border: 1px solid color-mix(in srgb, #e8772a 40%, var(--rule)); }
.treat-opt .treat-ico { font-size: 26px; } .treat-opt span { display: grid; gap: 2px; } .treat-opt small { color: var(--ink-2); font-size: 12px; line-height: 1.45; } .treat-opt em { font-style: normal; }
@media (max-width: 520px) { .treat-opt { grid-template-columns: auto 1fr; } .treat-opt .btn { grid-column: 1 / -1; } }
.wm-treat { color: #c75f12; } :root[data-theme="dark"] .wm-treat { color: #f2a25a; }
.treat-alert .pa-box { border-color: #e8772a; }
.tr-sec { --evc: #c7428a; } .tr-mine { display: grid; gap: 6px; align-content: start; justify-items: start; } .tr-big { font-size: 28px; color: var(--evc); }

.adm-group { display: grid; gap: 12px; padding: 4px 12px 12px; border-radius: 18px; background: color-mix(in srgb, #e8772a 7%, transparent); border: 1px solid color-mix(in srgb, #e8772a 35%, var(--rule)); }
.adm-group > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 2px; cursor: pointer; list-style: none; }
.adm-group > summary::-webkit-details-marker { display: none; }
.adm-group > summary::after { content: '▾'; margin-left: auto; color: var(--ink-3); transition: transform .2s; } .adm-group:not([open]) > summary::after { transform: rotate(-90deg); }
.adm-group > summary .ag-ico { font-size: 22px; } .adm-group > summary b { font-size: 16px; } .adm-group > summary small { color: var(--ink-3); font-size: 12px; } .adm-group .ag-pills { display: flex; gap: 4px; }

.sea-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.sea-list li { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; padding: 6px 9px; border-radius: 10px; background: color-mix(in srgb, #e8772a 9%, transparent); font-size: 12.5px; }
.sea-list li span { grid-row: span 2; font-size: 17px; } .sea-list li small { color: var(--ink-3); font-size: 11px; }
.sea-dday { margin-left: 4px; padding: 0 6px; border-radius: 6px; background: #e8772a; color: #fff; font-size: 11px; }

.hr-pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 2px 0; }
.hr-pager b { min-width: 90px; text-align: center; font-size: 13.5px; } .hr-dots { display: flex; gap: 4px; margin-left: 6px; } .hr-dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 20%, transparent); } .hr-dots i.on { background: var(--accent); }
.hr-grow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 8px; border-top: 1px dashed var(--rule); margin-top: 4px; }
img.hr-sw { width: 16px; height: 16px; border-radius: 4px; image-rendering: pixelated; object-fit: cover; flex: none; }

.hr-room.expanding .hr-svg { z-index: 30; }
.hr-room.expanding .hr-its { opacity: .45; pointer-events: none; }
.hr-cand { fill: rgba(20, 24, 40, .55); stroke: rgba(255, 255, 255, .5); stroke-width: 3; stroke-dasharray: 10 8; cursor: pointer; pointer-events: all; transition: fill .15s; }
.hr-cand:hover { fill: rgba(242, 193, 74, .35); } .hr-cand.on { fill: rgba(242, 193, 74, .55); stroke: #f2c14a; stroke-dasharray: none; }
.hr-cand-t { fill: #fff; font: 700 34px/1 inherit; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.4); stroke-width: 4px; }
.hr-ghost { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .25); stroke-width: 2; }
.hr-deco-c.pre { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.hr-exp-tip { color: var(--accent); }

.pk-kg-add { color: var(--evc, #e8772a); font-variant-numeric: tabular-nums; margin-left: 4px; } .pk-sing { margin-left: 4px; }

/* 칭호 소품 · 칭호 학생증 꾸미기 */
.deco-it.ttl-item { position: relative; border-color: color-mix(in srgb, #c9a24a 55%, var(--rule)); }
.deco-it .ttl-need, .chip .ttl-need { font-size: 11px; color: #a8761a; font-weight: 600; } :root[data-theme="dark"] .deco-it .ttl-need, :root[data-theme="dark"] .chip .ttl-need { color: #e8c86a; }
.deco-it .ttl-need { grid-column: 1 / -1; }
.deco-it.locked { opacity: .78; }
.room-svg .aur { animation: aurW 9s ease-in-out infinite alternate; } @keyframes aurW { to { transform: translateX(-30px); } }
.room-svg .rattle { transform-box: fill-box; transform-origin: center; animation: rattle 2.6s ease-in-out infinite; } @keyframes rattle { 0%, 80%, 100% { transform: none; } 84% { transform: rotate(-6deg); } 88% { transform: rotate(5deg); } 92% { transform: rotate(-3deg); } }
.swc.sw-frame.s-crown { border: 2px solid #e8c24a; box-shadow: 0 -2px 0 #e8c24a; } .swc.sw-frame.s-scale { border: 2px solid #2f6a4a; background: radial-gradient(circle at 50% 100%, #9fe0b8 30%, transparent 32%) 0 0 / 5px 4px; } .swc.sw-frame.s-frog { border: 2px solid #7a6ad0; }
.swc.sw-pattern.s-pumpkin { background: radial-gradient(#e8772a 2px, transparent 2.6px) 0 0 / 7px 7px, #fff4e6; } .swc.sw-pattern.s-constel { background: radial-gradient(#f6e7a8 1px, transparent 1.4px) 0 0 / 5px 5px, #1f2650; } .swc.sw-pattern.s-feather { background: repeating-linear-gradient(120deg, #e8eef8 0 3px, #fff 3px 6px); }
.swc.sw-ink.s-phoenix { background: linear-gradient(135deg, #f2a23a, #b8401e); } .swc.sw-ink.s-patronus { background: linear-gradient(135deg, #ffffff, #9ac8f0); } .swc.sw-ink.s-bolt { background: linear-gradient(135deg, #f6e04a, #e8a020); }
.prof-card.cf-crown { box-shadow: inset 0 0 0 2px #e8c24a, inset 0 0 0 6px color-mix(in srgb, #e8c24a 20%, transparent), 0 -3px 0 #e8c24a; }
.prof-card.cf-scale { box-shadow: inset 0 0 0 3px #2f6a4a, inset 0 0 0 7px color-mix(in srgb, #9fe0b8 25%, transparent); }
.prof-card.cf-frog { box-shadow: inset 0 0 0 3px #7a6ad0, inset 0 0 0 7px color-mix(in srgb, #e0a92a 22%, transparent); }
.prof-card.cp-pumpkin { background-image: radial-gradient(color-mix(in srgb, #e8772a 30%, transparent) 3px, transparent 3.6px); background-size: 26px 26px; }
.prof-card.cp-constel { background-image: radial-gradient(color-mix(in srgb, #8a9ae8 55%, transparent) 1.2px, transparent 1.8px), linear-gradient(160deg, color-mix(in srgb, #1f2650 14%, transparent), transparent); background-size: 18px 18px, 100% 100%; }
.prof-card.cp-feather { background-image: repeating-linear-gradient(120deg, color-mix(in srgb, #9ac8f0 10%, transparent) 0 10px, transparent 10px 22px); }
.prof-card.ci-phoenix .prof-name, .prof-card.ci-patronus .prof-name, .prof-card.ci-bolt .prof-name { background-clip: text; -webkit-background-clip: text; color: transparent; }
.prof-card.ci-phoenix .prof-name { background-image: linear-gradient(90deg, #b8401e, #f2a23a, #b8401e); }
.prof-card.ci-patronus .prof-name { background-image: linear-gradient(90deg, #6a9ad0, #e8f4ff 50%, #6a9ad0); }
.prof-card.ci-bolt .prof-name { background-image: linear-gradient(90deg, #d08a10, #f6e04a 50%, #d08a10); }
@media (prefers-reduced-motion: reduce) { .room-svg .aur, .room-svg .rattle { animation: none; } }

.fn-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.fn-card { padding: 7px; gap: 4px; }
button.fn-pic { border: 0; width: 100%; height: 64px; cursor: zoom-in; padding: 0; }
.fn-pic img { max-height: 54px; max-width: 100%; }
.fn-card .fn-txt b { font-size: 12.5px; } .fn-card .fn-txt .small { font-size: 11px; } .fn-card .fn-txt .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fn-foot .btn.sm { padding: 2px 8px; }
.fn-cats { margin-top: 6px; } .fn-cats .chip small { margin-left: 2px; }
.fn-adm-del { color: var(--bad, #c0392b); }
.fn-zoom { display: grid; gap: 10px; justify-items: center; text-align: center; }
.fn-zoom-pic { display: grid; place-items: center; padding: 14px; border-radius: 12px; max-width: 100%; overflow: auto; background: repeating-conic-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.fn-zoom-pic img { image-rendering: pixelated; max-width: 100%; height: auto !important; }

.fd-card.veiled { display: grid; place-items: center; gap: 1px; text-align: center; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 6%, transparent) 0 6px, transparent 6px 12px); border-style: dashed; cursor: help; }
.fd-card.veiled b { font-size: 16px; color: var(--ink-3); } .fd-card.veiled small { font-size: 9.5px; line-height: 1.25; color: var(--ink-3); }
.fc-era.muggle { color: #2f6a8a; font-weight: 700; }
.frog-all .fa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; width: 100%; max-height: 52vh; overflow: auto; }
.fa-grid .fd-card { position: relative; } .fa-grid .fd-card em { position: absolute; top: -6px; right: -4px; font-style: normal; font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 6px; background: #e0a92a; color: #fff; }
.pass-chip { color: #2f6a4a; }

/* 학생증 이름 색: 밤·어두운 화면의 이름 색 규칙보다 앞서게 */
.prof-card.ci-rose .prof-name { color: #d0587a !important; } .prof-card.ci-teal .prof-name { color: #2a8a8a !important; }
html[data-theme="dark"] .prof-card.ci-rose .prof-name { color: #f08aa6 !important; } html[data-theme="dark"] .prof-card.ci-teal .prof-name { color: #5cc4c0 !important; }
.prof-card:is(.ci-silver, .ci-gold, .ci-rainbow, .ci-phoenix, .ci-patronus, .ci-bolt, .ci-shine, .ci-flame) .prof-name { color: transparent !important; -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text; }
.prof-card.ci-shine .prof-name { --nc: color-mix(in srgb, var(--pc, #b8873a) 75%, var(--ink)); background-image: linear-gradient(100deg, var(--nc) 0 38%, #fffbe6 48%, #fff 50%, #fffbe6 52%, var(--nc) 62% 100%); background-size: 260% 100%; animation: ciShine 3.2s ease-in-out infinite; }
@keyframes ciShine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
.prof-card.ci-flame .prof-name { background-image: linear-gradient(0deg, #9a1e0a 0%, #e8481a 30%, #f6a020 58%, #ffe680 82%, #fff6c8 100%); background-size: 100% 220%; animation: ciFlame 1.1s ease-in-out infinite alternate, ciFlick .23s steps(2) infinite; filter: drop-shadow(0 0 4px rgba(240, 110, 20, .55)); }
@keyframes ciFlame { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }
@keyframes ciFlick { 0% { filter: drop-shadow(0 -1px 4px rgba(240, 110, 20, .55)); } 100% { filter: drop-shadow(0 -3px 7px rgba(255, 150, 30, .75)); } }
.swc.sw-ink.s-shine { background: linear-gradient(100deg, #8a6a3a 35%, #fff 50%, #8a6a3a 65%); } .swc.sw-ink.s-flame { background: linear-gradient(0deg, #b8301a, #f6a020 60%, #ffe680); }
/* 학생증 움직이는 효과 */
.prof-card { position: relative; }
.prof-card[class*="cx-"] > :not(.pfx) { position: relative; z-index: 1; }
.pfx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; }
.pfx-steps, .pfx-sparkle { overflow: hidden; }
.pfx-steps i { position: absolute; left: var(--x); top: calc(30% + var(--i) * 4%); width: 26px; height: 16px; color: color-mix(in srgb, var(--pc, #8a6a3a) 60%, var(--ink)); opacity: 0; animation: pfStep 7s linear infinite; animation-delay: calc(var(--i) * .42s); }
.pfx-steps i.l { margin-top: -9px; } .pfx-steps i.r { margin-top: 6px; --fl: scaleY(-1); }
.pfx-steps svg { width: 100%; height: 100%; fill: currentColor; display: block; }
@keyframes pfStep { 0% { opacity: 0; transform: var(--fl, none) scale(.6); } 3% { opacity: .55; transform: var(--fl, none) scale(1); } 40% { opacity: .3; } 62%, 100% { opacity: 0; } }
.pfx-sparkle i { position: absolute; left: var(--x); top: 100%; font-style: normal; font-size: calc(11px * var(--s)); color: #e8c25a; text-shadow: 0 0 6px rgba(255, 220, 120, .8); opacity: 0; animation: pfRise 6s linear infinite; animation-delay: var(--d); }
@keyframes pfRise { 0% { top: 100%; transform: rotate(0); opacity: 0; } 12% { opacity: .95; } 100% { top: -6%; transform: rotate(200deg); opacity: 0; } }
.pfx-glow { inset: -1px; box-shadow: 0 0 10px 2px rgba(240, 200, 90, .35); animation: pfGlow 2.6s ease-in-out infinite; }   /* 바깥으로만 빛나요(테두리 꾸미기를 가리지 않게) */
@keyframes pfGlow { 0%, 100% { box-shadow: 0 0 6px 1px rgba(240, 200, 90, .22); } 50% { box-shadow: 0 0 22px 6px rgba(255, 205, 90, .55); } }
.prof-card.cx-float { animation: pfFloat 3.6s ease-in-out infinite; }
@keyframes pfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.swc.sw-fx.s-float { background: linear-gradient(#cfe3f4, #fff); box-shadow: 0 2px 0 #9ab4cc; } .swc.sw-fx.s-glow { background: #fff6d8; box-shadow: 0 0 0 1px #e8c25a, 0 0 6px #f0c85a; }
.swc.sw-fx.s-steps { background: radial-gradient(ellipse 3px 2px at 35% 35%, #8a6a3a 99%, transparent), radial-gradient(ellipse 3px 2px at 65% 68%, #8a6a3a 99%, transparent), #f4ead6; } .swc.sw-fx.s-sparkle { background: radial-gradient(#e8c25a 1.2px, transparent 1.8px) 0 0 / 5px 5px, #2c2a3e; }
.style-chips .chip.pv { box-shadow: 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--sheet)); }
.style-chips .chip.pv .pv-buy { color: var(--accent); } .style-chips .chip.locked:not(.pv) { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .prof-card.cx-float, .pfx *, .pfx-glow, .prof-card.ci-shine .prof-name, .prof-card.ci-flame .prof-name { animation: none !important; } .pfx-steps i, .pfx-sparkle i { opacity: .25; } }
/* 모두의 알: 둥지 두 줄 */
.nests { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.nests .nest > .cr-list.compact { grid-template-columns: 1fr !important; }
@media (max-width: 360px) { .nests { grid-template-columns: 1fr; } }

.wm-why.wm-why-row { display: block; margin: 0; padding: 2px 10px 6px; }
.who-menu .wm-it:disabled { opacity: .5; cursor: not-allowed; }

.hr-lay-mode { padding: 2px 8px; font-size: 11px; margin-left: auto; }
.hr-layers.txt .hr-lay-list { gap: 2px; }
.hr-layers.txt .hr-lay-main { padding: 4px 8px; }
.hr-layers.txt .hr-lay-main span { display: flex; align-items: baseline; gap: 6px; } .hr-layers.txt .hr-lay-main small { flex: none; }
.hr-layers.txt .hr-lay.on .hr-lay-main b { color: var(--accent); }
.hr-layers.txt .hr-lay { flex-wrap: nowrap; gap: 2px; }
.hr-layers.txt .hr-lay-btns { grid-template-columns: repeat(4, 20px) !important; padding-right: 2px; } .hr-layers.txt .hr-lay-btns .iconbtn { width: 20px; height: 20px; }
.hr-layers.txt .hr-lay-btns.hr-lay-my { flex-basis: auto; padding: 0 4px 0 0; } .hr-layers.txt .hr-lay-my .btn { padding: 1px 6px; height: 20px; font-size: 11px; }
.hr-room.edit.has-sel { cursor: crosshair; }

/* 도서관: 마법사 위인전 (책 모양) */
.fb-panel { gap: 10px; }
.fb-cover { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px 14px 14px 10px; color: #f4e6c4;
  background: linear-gradient(90deg, #3a1a12 0 14px, #5a2a1c 14px 16px, #6b3020 16px), #6b3020;
  box-shadow: inset 0 0 0 2px #8a5a2c, inset 0 0 0 5px #4a2014, inset 0 0 0 6px #c9a24a66, 0 3px 0 #2a120c; font-family: var(--f-display); }
.fb-cover b { display: block; font-size: 19px; letter-spacing: .04em; color: #f2d27a; text-shadow: 0 1px 0 #2a120c; } .fb-cover div span { font-size: 12px; opacity: .85; font-family: var(--f-body, inherit); }
.fb-emb { width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-size: 22px; border-radius: 50%; background: radial-gradient(circle, #f2d27a, #b8862a); box-shadow: 0 0 0 2px #4a2014, 0 0 0 3px #c9a24a; }
.fb-cnt { margin-left: auto; font-size: 13px; color: #f2d27a; white-space: nowrap; } .fb-cnt b { font-size: 20px; }
.fb-book { position: relative; display: grid; grid-template-columns: 1fr 14px 1fr; padding: 10px; border-radius: 10px; background: #5a2a1c; box-shadow: inset 0 0 0 2px #3a1a12, 0 6px 14px rgba(0, 0, 0, .35); }
.fb-page { position: relative; display: grid; align-content: start; gap: 6px; min-height: 330px; padding: 14px 14px 26px; color: #3a2410;
  background: radial-gradient(ellipse at 50% 50%, #f6ecd2 55%, #ead9b2 100%); font-family: var(--f-display); }
.fb-page.l { border-radius: 6px 0 0 6px; box-shadow: inset -14px 0 18px -10px rgba(90, 50, 20, .45); }
.fb-page.r { border-radius: 0 6px 6px 0; box-shadow: inset 14px 0 18px -10px rgba(90, 50, 20, .45); }
.fb-gutter { background: linear-gradient(90deg, #d9c79e, #b89a68 50%, #d9c79e); }
.fb-pn { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 11px; color: #8a6a44; }
.fb-blank { align-self: center; justify-self: center; color: #a8906a; font-size: 12px; margin-top: 120px; }
.fb-ent { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 6px; border: 0; border-bottom: 1px dashed #c9b088; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 6px; transition: background .15s; }
.fb-ent:last-of-type { border-bottom: 0; } .fb-ent:hover { background: rgba(201, 162, 74, .14); }
.fb-por { width: 64px; height: 76px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: #efe0bc; box-shadow: inset 0 0 0 2px #fff8e8, 0 0 0 1px #b8986a; }
.fb-ent.r-l .fb-por { box-shadow: inset 0 0 0 2px #fff8e8, 0 0 0 1.5px #c9a24a, 0 0 6px #e8c25a88; } .fb-ent.mug .fb-por { background: #e2ecef; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #7a9aaa; }
.fb-por .fw { width: 54px; height: 60px; margin-top: 16px; overflow: visible; }
.fb-ent.miss .fb-por i { font-style: normal; font-size: 28px; color: #c9b088; }
.fb-ent.miss .fb-por { background: repeating-linear-gradient(135deg, #e8d8b4 0 5px, #e2d0a8 5px 10px); }
.fb-txt { display: grid; gap: 1px; min-width: 0; }
.fb-no { font-size: 10px; letter-spacing: .06em; color: #8a6a44; } .fb-ent.r-l .fb-no { color: #a8781a; } .fb-ent.mug .fb-no { color: #2f6a8a; }
.fb-txt b { font-size: 14.5px; } .fb-ent.miss .fb-txt b { color: #a8906a; }
.fb-txt small { font-size: 11px; color: #7a5a3a; }
.fb-txt em { font-size: 11.5px; font-style: italic; color: #5a3a20; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fb-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fb-shadow { font-size: 64px; font-weight: 800; color: rgba(60, 36, 16, .3); }
.fc-card.veiled .fc-portrait { filter: grayscale(.6); }
@media (max-width: 620px) { .fb-book { grid-template-columns: 1fr; padding: 6px; } .fb-gutter { display: none; } .fb-page.l, .fb-page.r { border-radius: 6px; box-shadow: none; min-height: 0; } .fb-page.l { border-bottom: 2px solid #c9b088; } .fb-blank { margin: 8px 0; } }
/* 관리자: 학생 가방 */
.ab-panel { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
.ab-gear { display: flex !important; flex-wrap: wrap; gap: 4px; }
.ab-gear .gm { display: flex !important; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 12.5px; }
.ab-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .ab-coin { font-size: 15px; } .ab-coin .ico { width: 16px; height: 16px; vertical-align: -3px; }
.ab-sec { display: grid; gap: 4px; margin-top: 6px; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.ab-it { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 12.5px; min-width: 0; }
.ab-it b { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ab-it em { font-style: normal; color: var(--ink-2); }
.ab-it .ico, .ab-it svg { width: 16px; height: 16px; flex: none; }

.hr-room.cbg { background: var(--hrbg) !important; }
.hr-bgc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.hr-bgc small { opacity: .8; }
.hr-bgc-sw { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; background: var(--sw); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.hr-bgc-sw.def { background: radial-gradient(circle at 50% 35%, #6a5236, #18120c 75%); }
.hr-bgc-sw.on { box-shadow: 0 0 0 2px var(--sheet, #fff), 0 0 0 4px var(--accent); }
.hr-bgc-pick { position: relative; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; background: conic-gradient(#e85a5a, #e8c24a, #4ab47a, #4a8ae8, #a05ae8, #e85a5a); }
.hr-bgc-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; border: 0; }
.hr-bgc-pick span { font-size: 11px; pointer-events: none; filter: drop-shadow(0 0 1px #fff); }
.hr-cute { display: grid; gap: 10px; }
.hr-cute-box { max-width: 100%; max-height: 70vh; overflow: auto; border-radius: 10px; background: repeating-conic-gradient(#0000 0 25%, #8882 0 50%) 0 0 / 16px 16px; text-align: center; }
.hr-cute-box img { image-rendering: pixelated; image-rendering: crisp-edges; max-width: none; width: auto; height: auto; display: inline-block; vertical-align: top; }
.hr-lay-grip { flex: none; width: 16px; align-self: stretch; display: grid; place-items: center; color: var(--ink-3); cursor: grab; touch-action: none; font-size: 13px; user-select: none; }
.hr-lay-grip:active { cursor: grabbing; }
.hr-lay.dragging { opacity: .55; }
.hr-lay.drop-a { box-shadow: inset 0 3px 0 var(--accent); } .hr-lay.drop-b { box-shadow: inset 0 -3px 0 var(--accent); }

.hr-zoom-box { position: relative; min-width: 0; width: 100%; justify-self: stretch; }
.hr-zoom-scroll { width: 100%; }
.hr-body.big .hr-zoom-box:not(.zoomed) .hr-room { width: min(100%, calc((100vh - 150px) * 1.15)) !important; margin-inline: auto; }
.hr-body.big .hr-zoom-box.zoomed .hr-zoom-scroll { max-height: calc(100vh - 120px); }
.hr-zoom-scroll { min-width: 0; }
.hr-zoom-box.zoomed .hr-zoom-scroll { overflow: auto; max-height: 80vh; border-radius: 14px; overscroll-behavior: contain; }
.hr-zoom-box.zoomed .hr-room { max-width: none !important; width: calc(var(--zm) * 100%) !important; }
.hr-zoom-btns { position: sticky; top: 64px; z-index: 6; height: 0; display: flex; justify-content: flex-start; overflow: visible; pointer-events: none; }
.hr-zoom-btns > * { pointer-events: auto; }
.hr-zoom-btns::before { content: ''; } .hr-zoom-in { display: flex; align-items: center; gap: 2px; margin: 8px 0 0 8px; padding: 2px; height: max-content; border-radius: 10px; background: rgba(20, 14, 8, .6); backdrop-filter: blur(3px); }
.hr-zoom-btns .iconbtn { color: #f4ead6; } .hr-zoom-v { min-width: 46px; padding: 2px 4px; font-size: 11px; color: #f4ead6 !important; }
.hr-del { fill: rgba(200, 60, 60, .22) !important; stroke: #d05050 !important; } .hr-del.on { fill: rgba(220, 60, 60, .45) !important; }

.hr-wf { margin-top: 10px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent); }
.hr-wf-tabs { gap: 6px; flex-wrap: wrap; align-items: center; }

.parch-form { justify-items: stretch; text-align: center; }
.parch-form .btn { justify-content: center; text-align: center; justify-self: center; min-width: 60%; }
.parch-form input { text-align: center !important; }

.acc-help-btn { justify-self: center; margin-top: 4px; padding: 4px 6px; border: 0 !important; background: none !important; box-shadow: none !important; font: inherit; font-size: 12.5px; color: var(--ink-3); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; cursor: pointer; }
.acc-help-btn:hover { color: var(--accent); }
.acc-help { display: grid; gap: 10px; } .acc-help textarea { width: 100%; }
.acc-req { gap: 6px; flex-wrap: wrap; align-items: center; padding: 6px 0; }

.wm-own { display: inline-block; vertical-align: 1px; margin-left: 2px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--ink-3); background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }

.cf-names { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; align-items: end; }
.cf-own-note { margin-top: -4px; }

.prof-own { font-size: 14px; color: var(--ink-2); white-space: nowrap; } .prof-own span { color: var(--ink-3); opacity: .8; }

.fb-got { font-style: normal; margin-left: 4px; padding: 0 5px; border-radius: 6px; background: rgba(63, 125, 70, .16); color: #3f7d46; font-size: 9.5px; }

/* 필요의 방 꾸미기 아래쪽: 내 가구 → (벽지·바닥 | 넓히기·확장방·배경색) */
.hr-mypanel { gap: 8px; border-radius: 16px; }
.hr-myhead { align-items: baseline; gap: 8px; flex-wrap: wrap; } .hr-myhead b { font-size: 15px; }
.hr-deco-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; align-items: start; }
@media (max-width: 720px) { .hr-deco-cols { grid-template-columns: minmax(0, 1fr); } }
.hr-deco-cols > .hr-deco-box { margin: 0 !important; padding: 12px 14px !important; border: 0 !important; border-radius: 16px; display: grid; gap: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--sheet, transparent)), var(--sheet, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 11%, transparent), 0 2px 8px rgba(20, 12, 4, .12); }
.hr-deco-cols .hr-wf > .row:first-child b, .hr-gh b { font-size: 14px; }
.hr-deco-cols .hr-wf > .row:first-child { align-items: baseline; flex-wrap: wrap; gap: 6px; }
.hr-gsec { display: grid; gap: 6px; padding-bottom: 8px; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent); }
.hr-gsec:last-child { padding-bottom: 0; border-bottom: 0; }
.hr-gh { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hr-gpill { font-size: 11px; padding: 2px 9px; border-radius: 999px; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.hr-gbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-growbox .hr-bgc { margin: 0; }
.hr-wf-tabs .btn { min-width: 88px; justify-content: center; }
.fn-adm-del { width: 22px !important; height: 22px !important; min-width: 0 !important; padding: 0 !important; opacity: .75; } .fn-adm-del .ico, .fn-adm-del svg { width: 12px !important; height: 12px !important; }
.fn-adm-del:hover { opacity: 1; }

.hr-bga { display: flex; align-items: center; gap: 8px; width: 100%; } .hr-bga input[type=range] { flex: 1; min-width: 80px; accent-color: var(--accent); } .hr-bga .num { min-width: 34px; text-align: right; font-size: 11.5px; color: var(--ink-2); }

.chat-keep { margin-left: 4px; font-size: 10.5px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); opacity: .85; white-space: nowrap; }

.bd-who-btn { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.bd-who-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

.bd-hy { flex: none; margin-right: 2px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 1.6; color: color-mix(in srgb, var(--hc) 80%, var(--ink)); background: color-mix(in srgb, var(--hc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 30%, transparent); white-space: nowrap; }
/* 진급 축하 창 */
.ypop { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 6px 4px 2px; overflow: hidden; }
.ypop-k { font-size: 11px; letter-spacing: .3em; color: var(--ink-3); }
.ypop-badge { position: relative; z-index: 1; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 0; color: #fff8e6;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--hc) 60%, #fff), var(--hc) 60%, color-mix(in srgb, var(--hc) 70%, #000));
  box-shadow: 0 0 0 4px #f2c14a, 0 0 0 7px color-mix(in srgb, #f2c14a 30%, transparent), 0 8px 24px rgba(0, 0, 0, .35); animation: ypopIn .8s cubic-bezier(.2, 1.5, .4, 1) both; }
.ypop-badge b { font-size: 46px; line-height: 1; font-family: var(--f-display); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); } .ypop-badge span { font-size: 13px; letter-spacing: .2em; }
@keyframes ypopIn { from { transform: scale(.2) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ypop h3 { margin: 4px 0 0; } .ypop .prose { margin: 0; max-width: 340px; }
.ypop-got { list-style: none; margin: 4px 0; padding: 10px 14px; display: grid; gap: 4px; text-align: left; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 13.5px; }
.ypop .row.end { width: 100%; }
.ypop-burst { position: absolute; left: 50%; top: 92px; width: 0; height: 0; pointer-events: none; }
.ypop-burst i { position: absolute; width: 8px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0; transform: rotate(var(--a)) translateY(0); animation: ypopBurst 1.4s ease-out both; animation-delay: calc(.25s + var(--d)); }
@keyframes ypopBurst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.6); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-150px) rotate(220deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ypop-badge, .ypop-burst i { animation: none; } }

/* 세공: 무늬 설명 말풍선 · 봉인 */
.ro { position: relative; cursor: help; }
.ro[data-tip]:not([data-tip=""]):hover::after, .ro[data-tip]:not([data-tip=""]):focus::after { content: attr(data-tip); position: absolute; left: 8px; right: 8px; bottom: calc(100% + 4px); z-index: 20; padding: 6px 9px; border-radius: 8px; font-size: 11.5px; line-height: 1.45; font-weight: 400; color: #f4ead6; background: rgba(24, 18, 12, .94); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); pointer-events: none; white-space: normal; }
.ro.locked { box-shadow: inset 3px 0 0 #c9a24a; } .ro-lock { position: absolute; left: -4px; top: 50%; transform: translateY(-50%); font-size: 11px; }
.rf-lockrow { display: grid; gap: 6px; margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #c9a24a 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9a24a 30%, transparent); }
.rf-help { margin: 6px 0; } .rf-help summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); }
.rf-help-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 6px; }
.rf-help-l > div { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 12px; }
.rf-help-l b { font-size: 12.5px; } .rf-help-l span { color: var(--ink-2); } .rf-help-l em { font-style: normal; font-size: 11px; color: var(--ink-3); }
/* 진급 창: 호그와트 급행열차 */
.ypop-train { position: relative; width: calc(100% + 40px); margin: -6px -20px 0; height: 58px; overflow: hidden; }
.yt-rail { position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; background: repeating-linear-gradient(90deg, #6a4a30 0 10px, transparent 10px 14px), #3a2a1e; opacity: .7; }
.yt-run { position: absolute; bottom: 8px; left: 0; width: 200px; animation: ytRun 3.6s cubic-bezier(.35, .1, .5, 1) .1s both; }
.yt-run svg { display: block; width: 200px; height: 40px; }
.yt-w { animation: ytBob .22s steps(2) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ytBob { 50% { transform: translateY(-1px); } }
@keyframes ytRun { from { transform: translateX(-230px); } to { transform: translateX(520px); } }
.yt-smoke { position: absolute; left: 160px; top: -14px; width: 30px; height: 24px; }
.yt-smoke i { position: absolute; left: 4px; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: rgba(240, 236, 228, .75); animation: ytPuff 1s ease-out infinite; }
.yt-smoke i:nth-child(2) { animation-delay: .33s; } .yt-smoke i:nth-child(3) { animation-delay: .66s; }
@keyframes ytPuff { from { transform: translate(0, 0) scale(.5); opacity: .9; } to { transform: translate(-26px, -14px) scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .yt-run { animation: none; left: 30%; } .yt-w, .yt-smoke i { animation: none; } }

.ck-dexn { margin-left: 6px; letter-spacing: 0; font-size: 11px; color: var(--ink-2); text-transform: none; }
.ck-made { font-style: normal; margin-left: 5px; font-size: 11px; color: #3f7d46; font-weight: 800; }
.ck-new { font-style: normal; margin-left: 5px; padding: 0 5px; border-radius: 6px; font-size: 9px; font-weight: 800; color: #fff; background: #d06a3a; vertical-align: 1px; }

/* 진급 창 · 특별한 학년(3·4·7)은 더 화려하게 */
.ypop-badge-wrap { position: relative; display: grid; place-items: center; width: 180px; height: 150px; }
.ypop.big .ypop-badge { width: 120px; height: 120px; } .ypop.big .ypop-badge b { font-size: 56px; }
.ypop-badge { overflow: hidden; }
.ypop-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .65) 48%, transparent 60%); transform: translateX(-120%); animation: ypShine 2.6s ease-in-out 1s infinite; }
@keyframes ypShine { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
.ypop-rays { position: absolute; width: 230px; height: 230px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, #f2c14a 55%, transparent) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%); animation: ypSpin 14s linear infinite, ypFade .8s ease-out both; }
@keyframes ypSpin { to { transform: rotate(360deg); } } @keyframes ypFade { from { opacity: 0; transform: scale(.4); } }
.ypop-ring { position: absolute; width: 140px; height: 140px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc) 60%, #fff), 0 0 26px 6px color-mix(in srgb, #f2c14a 60%, transparent); animation: ypPulse 1.8s ease-in-out infinite; }
@keyframes ypPulse { 50% { transform: scale(1.08); opacity: .6; } }
.ypop-stars { position: absolute; inset: 0; pointer-events: none; }
.ypop-stars i { position: absolute; font-style: normal; color: #f2d27a; text-shadow: 0 0 8px #f2c14a; animation: ypTw 1.6s ease-in-out infinite; }
.ypop-stars i:nth-child(1) { left: 6%; top: 18%; } .ypop-stars i:nth-child(2) { right: 8%; top: 12%; animation-delay: .3s; } .ypop-stars i:nth-child(3) { left: 2%; bottom: 20%; animation-delay: .6s; font-size: 20px; } .ypop-stars i:nth-child(4) { right: 3%; bottom: 26%; animation-delay: .9s; } .ypop-stars i:nth-child(5) { left: 44%; top: -2%; animation-delay: 1.2s; } .ypop-stars i:nth-child(6) { right: 30%; bottom: -2%; animation-delay: .45s; font-size: 18px; }
@keyframes ypTw { 0%, 100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.25) rotate(40deg); } }
.ypop-ribbon { position: relative; z-index: 1; margin-top: -6px; padding: 5px 26px; color: #3a2410; font-weight: 800; font-size: 14px; letter-spacing: .04em; background: linear-gradient(180deg, #ffe08a, #e8b54a); box-shadow: 0 3px 8px rgba(0, 0, 0, .3); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); animation: ypopIn .7s cubic-bezier(.2, 1.5, .4, 1) .5s both; }
.ypop.y4 .ypop-ribbon { background: linear-gradient(180deg, #a8e08a, #4f8a4a); color: #fff; } .ypop.y7 .ypop-ribbon { background: linear-gradient(180deg, #e0c8ff, #8a6ac8); color: #fff; }
.ypop.big { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--hc) 22%, transparent), transparent 70%); border-radius: 14px; }
.ypop-fw { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ypop-fw > span { position: absolute; width: 0; height: 0; }
.ypop-fw i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); opacity: 0; animation: ypFw 1.5s ease-out infinite; animation-delay: var(--d); }
@keyframes ypFw { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-46px); } }
.ypop > :not(.ypop-fw):not(.ypop-burst) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ypop-rays, .ypop-ring, .ypop-stars i, .ypop-fw i, .ypop-shine { animation: none; } }

/* 선택과목 */
.elf { display: grid; gap: 10px; }
.elf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.elf-card { position: relative; display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px; border-radius: 14px; border: 0; font: inherit; color: var(--ink); cursor: pointer; background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); transition: transform .12s, box-shadow .12s; }
.elf-card:hover { transform: translateY(-2px); }
.elf-card.on { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.elf-ico { font-size: 26px; } .elf-card b { font-size: 15px; }
.elf-perk { font-size: 12px; color: var(--ink-2); padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, #c9a24a 12%, transparent); } .elf-perk small { color: var(--ink-3); }
.elf-check { position: absolute; top: 8px; right: 10px; font-style: normal; font-weight: 800; color: var(--accent); }
.el-panel { gap: 8px; } .el-head { display: flex; gap: 12px; align-items: center; } .el-ico { font-size: 34px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, transparent); flex: none; }
.el-head > div { display: grid; gap: 2px; flex: 1; min-width: 0; } .el-title { font-size: 18px; } .el-lv { flex: none; font-size: 13px; } .el-lv b { font-size: 22px; }
.el-sum { gap: 6px; } .el-sum .row { gap: 8px; flex-wrap: wrap; }

.cols.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .cols.cols3 { grid-template-columns: 1fr; } }
.pw-box { gap: 8px; } .pw-k { white-space: nowrap; } .pw-k::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; vertical-align: 1px; background: hsl(calc(38 + var(--i) * 42) 55% 58%); }
.pw-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; gap: 2px; }
.pw-bar i { display: block; min-width: 3px; background: hsl(calc(38 + var(--i) * 42) 55% 58%); }

.rec-pw { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--rc) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 35%, transparent); --rc: #6aa86a; }
.rec-pw > span:first-child { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); } .rec-pw > span:first-child b { font-size: 16px; color: var(--rc); }
.rec-pw.rp-mid { --rc: #c9a24a; } .rec-pw.rp-low { --rc: #c0605a; }
.rec-mini { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* 별가루 행상인 */
.ped-shop { display: grid; gap: 12px; }
.ped-head { display: flex; gap: 14px; align-items: center; } .ped-head > div { display: grid; gap: 3px; min-width: 0; }
.ped-ava { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; background: radial-gradient(circle at 35% 30%, #fff6d8, #c9a24a 60%, #6b5320); box-shadow: 0 0 18px rgba(233, 196, 106, .55); animation: pedGlow 2.4s ease-in-out infinite; }
@keyframes pedGlow { 50% { box-shadow: 0 0 30px rgba(233, 196, 106, .85); } }
.ped-say { margin: 0; font-family: var(--f-display); color: var(--ink-2); }
.ped-list { display: grid; gap: 8px; }
.ped-it { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #c9a24a 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9a24a 30%, transparent); }
.ped-it .grow { display: grid; gap: 2px; }
.person[data-arg="npc-peddler"], .or-n[data-arg="npc-peddler"] { background: color-mix(in srgb, #c9a24a 14%, transparent); border-radius: 10px; }
.person[data-arg="npc-peddler"] b, .or-n[data-arg="npc-peddler"] { color: #b08a35; }

/* O.W.L. · N.E.W.T. */
.ex-panel { gap: 10px; } .ex-head { display: flex; gap: 14px; align-items: center; } .ex-head > div { display: grid; gap: 2px; min-width: 0; }
.ex-seal { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--f-display); letter-spacing: .02em; color: #fff7e0; background: radial-gradient(circle at 35% 30%, #c0503f, #7a1f1a 70%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.18), 0 3px 10px rgba(0,0,0,.3); transform: rotate(-8deg); }
.ex-title { font-size: 18px; }
.ex-list { display: grid; gap: 6px; }
.ex-row { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.6fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ex-row .nm { display: inline-flex; gap: 6px; align-items: center; min-width: 0; }
@media (max-width: 640px) { .ex-row { grid-template-columns: 1fr auto; } }
.ex-g { display: inline-flex; gap: 3px; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; color: var(--gc); background: color-mix(in srgb, var(--gc) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 40%, transparent); white-space: nowrap; vertical-align: 1px; }
.ex-g b { font-size: 12px; }
.ex-steps { display: flex; align-items: center; gap: 6px; font-size: 12px; } .ex-steps i { flex: 1; height: 1px; background: color-mix(in srgb, var(--ink) 20%, transparent); }
.ex-steps span { padding: 3px 10px; border-radius: 99px; color: var(--ink-3); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.ex-steps span.on { color: #fff; background: var(--accent); } .ex-steps span.done { color: var(--good, #5fa36b); }
.ex-paper, .ex-prac, .ex-result { display: grid; gap: 10px; }
.ex-qs { display: grid; gap: 12px; margin: 0; padding-left: 20px; } .ex-qs li { display: grid; gap: 6px; }
.ex-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } @media (max-width: 560px) { .ex-opts { grid-template-columns: 1fr; } }
.ex-opt { text-align: left; font: inherit; color: var(--ink); padding: 8px 10px; border-radius: 10px; border: 0; cursor: pointer; background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.ex-opt.on { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.ex-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } @media (max-width: 560px) { .ex-styles { grid-template-columns: 1fr; } }
.ex-style { display: grid; gap: 4px; text-align: left; font: inherit; color: var(--ink); padding: 12px; border-radius: 12px; border: 0; cursor: pointer; background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); transition: transform .12s; }
.ex-style:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--accent); }
.ex-roll { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, currentColor 8%, transparent); }
.ex-die { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; font-weight: 800; font-size: 18px; color: var(--ink); background: var(--paper, #fff); box-shadow: 0 2px 6px rgba(0,0,0,.25); animation: exDie .5s ease-out; }
@keyframes exDie { from { transform: rotate(-200deg) scale(.4); opacity: 0; } }
.ex-result { text-align: center; justify-items: center; }
.ex-big { font: 800 84px/1 var(--f-display); color: var(--gc); text-shadow: 0 4px 18px color-mix(in srgb, var(--gc) 50%, transparent); animation: exBig .7s cubic-bezier(.2,1.6,.4,1); }
@keyframes exBig { from { transform: scale(.2) rotate(-15deg); opacity: 0; } }
.ex-gname { font-size: 18px; } .ex-score { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .ex-score b { font-size: 18px; }
.ex-log { display: grid; gap: 3px; font-size: 12px; }
.ex-result.fail .ex-big { filter: saturate(.7); }

.sh-act.sending, .sh-sp.sending { animation: shSend .8s ease-in-out infinite; } @keyframes shSend { 50% { opacity: .6; } }

/* 동아리 */
.cl-emb { flex: none; width: 46px; height: 46px; border-radius: 14px; display: inline-grid; place-items: center; font-size: 24px; background: color-mix(in srgb, var(--cc) 18%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cc) 55%, transparent); }
.cl-emb.big { width: 64px; height: 64px; font-size: 34px; border-radius: 18px; } .cl-emb.sm { width: 20px; height: 20px; font-size: 12px; border-radius: 6px; vertical-align: -4px; }
.cl-list { display: grid; gap: 8px; }
.cl-card { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--cc) 6%, transparent); box-shadow: inset 3px 0 0 var(--cc); }
.cl-card.mine { background: color-mix(in srgb, var(--cc) 12%, transparent); }
.cl-main { display: grid; gap: 2px; flex: 1; min-width: 0; } .cl-name { font-size: 15px; } .cl-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cl-mine { gap: 12px; border-top: 4px solid var(--cc); }
.cl-head { display: flex; gap: 14px; align-items: center; } .cl-head > div:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; } .cl-title { margin: 0; }
.cl-score { display: grid; justify-items: center; flex: none; } .cl-score b { font-size: 26px; color: var(--cc); }
.cl-mem { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cl-m { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 13px; }
.cl-m::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 25%, transparent); } .cl-m.on::before { background: #3f9a62; }
.cl-m small { margin-right: 4px; }
.cl-act { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--cc) 8%, transparent); }
.cl-act > div { display: grid; gap: 3px; min-width: 0; }
.cl-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-em { width: 38px; height: 38px; border-radius: 10px; border: 0; cursor: pointer; font-size: 20px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.cl-em.on { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cl-col { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; } .cl-col.on { box-shadow: 0 0 0 2px var(--sheet, #fff), 0 0 0 4px var(--ink); }
.cl-make summary { cursor: pointer; } .cl-make[open] { gap: 10px; }
.hr-rooms { margin-bottom: 4px; }
@media (max-width: 560px) { .cl-card { flex-wrap: wrap; } .cl-act { flex-wrap: wrap; } }

/* 필요의 방 입구 */
.hr-door { display: grid; gap: 10px; }
.hr-door-head { display: flex; gap: 12px; align-items: center; } .hr-door-head > div { display: grid; gap: 2px; }
.hr-door-ic { font-size: 30px; }
.hr-door-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.hr-door-c { display: flex; gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--ink); padding: 10px 12px; border: 0; border-radius: 14px; cursor: pointer; background: color-mix(in srgb, var(--cc, #c9a24a) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc, #c9a24a) 35%, transparent); transition: transform .12s; }
.hr-door-c:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--cc, #c9a24a); }
.hr-door-c.mine { background: color-mix(in srgb, var(--cc) 14%, transparent); box-shadow: inset 0 0 0 2px var(--cc); }
.hr-door-c.common { --cc: #c9a24a; }
.hr-dc-t { display: grid; gap: 1px; flex: 1; min-width: 0; }
.hr-now { display: inline-flex; gap: 6px; align-items: center; }
.ct-box .title-card.ct { box-shadow: inset 0 0 0 1px color-mix(in srgb, #c9a24a 50%, transparent); background: color-mix(in srgb, #c9a24a 8%, transparent); }
.adm-ctitle { display: grid; gap: 6px; margin: 6px 0; }

[data-tone=club] { --tone: #2f8f7f; }
/* 동아리 순위표 (얇게) */
.cr-panel { gap: 8px; }
.cr-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; width: 100%; } .cr-list > .cr-row { justify-self: stretch; width: auto !important; max-width: none !important; box-sizing: border-box; }
.cr-row { display: grid; grid-template-columns: 28px 24px minmax(0, 1.4fr) minmax(40px, 1fr) auto auto; gap: 8px; align-items: center; padding: 5px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 3px 0 0 var(--cc); }
.cr-row.mine { background: color-mix(in srgb, var(--cc) 12%, transparent); }
.cr-row.m1 { background: linear-gradient(90deg, color-mix(in srgb, #e3b341 22%, transparent), transparent 70%); }
.cr-row.m2 { background: linear-gradient(90deg, color-mix(in srgb, #b8c0cc 20%, transparent), transparent 70%); }
.cr-row.m3 { background: linear-gradient(90deg, color-mix(in srgb, #c9875a 18%, transparent), transparent 70%); }
.cr-n { font-weight: 800; text-align: center; color: var(--ink-3); } .cr-e { font-size: 16px; text-align: center; }
.cr-nm { display: flex; gap: 6px; align-items: baseline; min-width: 0; } .cr-nm b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-nm small { white-space: nowrap; }
.cr-bar { height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; } .cr-bar i { display: block; height: 100%; background: var(--cc); border-radius: inherit; }
.cr-pts { font-size: 15px; color: var(--cc); } .cr-pts small { font-size: 10px; margin-left: 1px; color: var(--ink-3); }
.cr-btns { display: flex; gap: 4px; }
.btn.xs { padding: 2px 9px; font-size: 11.5px; min-height: 0; }
@media (max-width: 640px) { .cr-row { grid-template-columns: 24px 20px minmax(0, 1fr) auto; } .cr-bar { display: none; } .cr-btns { grid-column: 3 / -1; justify-content: flex-end; } .cr-nm { flex-wrap: wrap; } }
.cl-score b { font-size: 16px; }
/* 동아리 만들기 버튼 */
.cl-make { padding: 0; overflow: hidden; }
.cl-make > :not(summary) { margin: 0 16px; } .cl-make[open] { padding-bottom: 14px; }
.cl-cta { list-style: none; display: flex; gap: 14px; align-items: center; padding: 16px 18px; cursor: pointer; position: relative; overflow: hidden; background: linear-gradient(110deg, color-mix(in srgb, #c9a24a 22%, transparent), color-mix(in srgb, #6a5ab0 18%, transparent)); }
.cl-cta::-webkit-details-marker { display: none; }
.cl-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-100%); animation: clShine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes clShine { 60%, 100% { transform: translateX(100%); } }
.cl-cta-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 20px; color: #fff8e0; background: radial-gradient(circle at 35% 30%, #f3d27a, #b8862e); box-shadow: 0 0 14px rgba(230, 190, 90, .6); animation: clPulse 2.4s ease-in-out infinite; }
@keyframes clPulse { 50% { box-shadow: 0 0 26px rgba(230, 190, 90, .9); transform: scale(1.06); } }
.cl-cta-t { display: grid; gap: 2px; flex: 1; min-width: 0; } .cl-cta-t b { font-size: 16px; } .cl-cta-t small { color: var(--ink-3); }
.cl-cta-go { font-weight: 700; color: #b8862e; white-space: nowrap; }
.cl-make[open] .cl-cta-go { opacity: 0; }
.cl-found-btn { position: relative; overflow: hidden; box-shadow: 0 0 0 0 rgba(230, 190, 90, .6); animation: clBtn 2s ease-in-out infinite; }
@keyframes clBtn { 50% { box-shadow: 0 0 0 6px rgba(230, 190, 90, 0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(230, 190, 90, .55); } }
/* 선택과목 두 칸 */
.el-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.el-box { display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.prof-el { margin-top: 6px; } .prof-el .el-box { grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; padding: 6px 12px; }

.adm-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; } .adm-st i { width: 8px; height: 8px; border-radius: 50%; background: #9a958c; }
.adm-st.st-on i { background: #3f9a62; } .adm-st.st-away i { background: #d9a43a; } .adm-st.st-hid i { background: #8a6ac8; } .adm-st.st-off { color: var(--ink-3); }

/* 밤 11시 기숙사 점수 발표 */
.hp-pop { display: grid; gap: 10px; text-align: center; }
.hp-pop h3 { margin: 0; }
.hp-rows { display: grid; gap: 6px; text-align: left; }
.hp-row { display: grid; grid-template-columns: 22px 80px 1fr auto 56px; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--hc) 9%, transparent); opacity: 0; animation: hpIn .5s ease-out var(--d) forwards; }
.hp-row:first-child { background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 24%, transparent), color-mix(in srgb, var(--hc) 6%, transparent)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hc) 55%, transparent); }
@keyframes hpIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.hp-rk { font-weight: 800; text-align: center; color: var(--hc); } .hp-nm { font-weight: 700; color: var(--hc); }
.hp-bar { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.hp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 70%, #fff), var(--hc)); transform-origin: left; animation: hpGrow 1.1s cubic-bezier(.2,.8,.3,1) calc(var(--d) + .2s) both; }
@keyframes hpGrow { from { transform: scaleX(0); } }
.hp-v { font-size: 16px; } .hp-d { font-size: 11.5px; font-weight: 700; text-align: right; } .hp-d.up { color: #3f9a62; } .hp-d.down { color: #c0605a; }
.hp-pop.final h3 { color: var(--wc); text-shadow: 0 0 18px color-mix(in srgb, var(--wc) 40%, transparent); }
@media (max-width: 520px) { .hp-row { grid-template-columns: 18px 64px 1fr auto; } .hp-d { display: none; } }

/* 도움말: 글씨 한 단계 작게 */
.help-h { font-size: 18px !important; } .help-h3 { font-size: 14.5px !important; } .help-lead { font-size: 13.5px !important; }
.help-list, .help-list li { font-size: 13.5px; line-height: 1.65; }

.ab-mini { gap: 6px; align-items: center; }

.letter .x.quilled { color: color-mix(in srgb, var(--qc) 58%, var(--ink)) !important; font-weight: 600; text-shadow: 0 0 1px color-mix(in srgb, var(--qc) 90%, transparent), 0 0 8px color-mix(in srgb, var(--qc) 80%, transparent), 0 0 18px color-mix(in srgb, var(--qc) 50%, transparent); }

.el-row .sico { color: #3f9a8a; } .el-row { border-top: 1px dashed color-mix(in srgb, #3f9a8a 35%, transparent); }
.el-row .nm { white-space: nowrap; font-size: 12px; letter-spacing: -.03em; } .el-tag { justify-self: start; min-width: 74px; text-align: center; box-sizing: border-box; padding: 1px 8px; border-radius: 99px; font-size: 10px; color: #3f9a8a; background: color-mix(in srgb, #3f9a8a 13%, transparent); vertical-align: 1px; }

/* 동아리 미션 */
.cm-panel { gap: 10px; } .cm-list { display: grid; gap: 8px; }
.cm-row { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.cm-row.full { background: color-mix(in srgb, #3f9a62 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #3f9a62 40%, transparent); }
.cm-top { display: flex; gap: 10px; align-items: center; } .cm-t { display: grid; gap: 1px; flex: 1; min-width: 0; } .cm-n { font-size: 17px; } .cm-n small { font-size: 11px; color: var(--ink-3); }
.cm-bar { height: 9px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; } .cm-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c9a24a, #e3c46a); transition: width .4s; }
.cm-row.full .cm-bar i { background: linear-gradient(90deg, #3f9a62, #6cc08a); }
.cm-foot { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cm-who { display: flex; gap: 4px; flex-wrap: wrap; } .cm-w { font-size: 11.5px; padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 6%, transparent); } .cm-w.me { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cm-btns { gap: 4px; align-items: center; }

.hp-pop { position: relative; overflow: hidden; }
.hp-cup { font-size: 54px; line-height: 1; filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--wc) 60%, transparent)); animation: hpCup 1s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes hpCup { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }
.hp-confetti { position: absolute; inset: 0; pointer-events: none; }
.hp-confetti i { position: absolute; top: -10px; width: 7px; height: 12px; border-radius: 2px; background: var(--c); opacity: .9; animation: hpFall 2.6s ease-in var(--d) both; }
@keyframes hpFall { to { transform: translateY(520px) rotate(540deg); opacity: 0; } }

/* 우승 발표: 기숙사 색으로 화려하게 */
.hp-pop.final { margin: -8px; padding: 22px 18px 16px; border-radius: 16px; isolation: isolate;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--wc) 55%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--wc) 22%, var(--sheet)), var(--sheet) 75%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wc) 70%, #e3c46a), inset 0 0 40px color-mix(in srgb, var(--wc) 35%, transparent), 0 0 40px color-mix(in srgb, var(--wc) 45%, transparent); }
.hp-pop.final > * { position: relative; z-index: 1; }
.hp-rays { position: absolute !important; z-index: 0 !important; left: 50%; top: 70px; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--wc) 40%, transparent) 0deg 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 62%); mask: radial-gradient(circle, #000 15%, transparent 62%); animation: hpSpin 18s linear infinite; opacity: .8; pointer-events: none; }
@keyframes hpSpin { to { transform: rotate(360deg); } }
.hp-banners { position: absolute !important; z-index: 0 !important; inset: 0 0 auto; height: 70px; display: flex; justify-content: space-between; padding: 0 10px; pointer-events: none; }
.hp-banners i { width: 26px; height: 64px; background: linear-gradient(var(--wc), color-mix(in srgb, var(--wc) 70%, #000)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); box-shadow: inset 0 3px 0 #e3c46a; transform-origin: top; animation: hpFlag 2.4s ease-in-out infinite; opacity: .9; }
.hp-banners i:nth-child(2) { margin-right: auto; margin-left: 10px; animation-delay: .3s; } .hp-banners i:nth-child(3) { margin-left: auto; margin-right: 10px; animation-delay: .6s; } .hp-banners i:nth-child(4) { animation-delay: .9s; }
@keyframes hpFlag { 50% { transform: skewX(4deg) scaleY(.96); } }
.hp-cup { font-size: 66px !important; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--wc) 80%, #fff)) drop-shadow(0 6px 10px rgba(0,0,0,.4)) !important; }
.hp-win { display: grid; gap: 0; font-size: 34px !important; font-family: var(--f-display); color: color-mix(in srgb, var(--wc) 45%, #fff) !important; text-shadow: 0 0 12px color-mix(in srgb, var(--wc) 70%, transparent), 0 0 30px color-mix(in srgb, var(--wc) 45%, transparent), 0 2px 0 rgba(0,0,0,.35) !important; animation: hpWin .9s cubic-bezier(.2,1.5,.4,1) .2s both; }
.hp-win small { font-size: 13px; letter-spacing: .4em; color: #e3c46a; text-shadow: none; }
@keyframes hpWin { from { transform: scale(.4); opacity: 0; letter-spacing: .5em; } }
.hp-pop.final .hp-row:first-child { box-shadow: inset 0 0 0 2px var(--wc), 0 0 18px color-mix(in srgb, var(--wc) 45%, transparent); }
.hp-confetti i { width: 8px; height: 13px; transform: rotate(var(--r)); }

.sk-nightparch .sk-prev { background: #ece2cc; } .sk-nightparch .sk-prev i:nth-child(1) { background: #dccfb2; box-shadow: inset 0 -1px 0 #8a6a2a; } .sk-nightparch .sk-prev i:nth-child(2) { background: #e4d8bd; } .sk-nightparch .sk-prev i:nth-child(3) { background: #e4d8bd; box-shadow: inset 0 0 0 1px #8a6a2a; }
html[data-tint="parch"] { color-scheme: light; }
.fd-card { min-height: 46px !important; padding: 4px 6px !important; } .fd-card b { font-size: 10.5px !important; } .fd-card span { font-size: 9px !important; }

.pa-give { margin-top: 2px; font-size: 13px; }

/* 호그스미드 큰길 */
.hg-panel { gap: 10px; } .hg-head { display: flex; gap: 12px; align-items: center; } .hg-head > div { display: grid; gap: 2px; min-width: 0; }
.hg-ic { flex: none; width: 50px; height: 50px; display: grid; place-items: center; font-size: 26px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.hg-title { font-size: 17px; }
.hg-now { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hg-list { display: grid; gap: 6px; } .hg-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.hj { display: grid; gap: 10px; text-align: center; justify-items: center; }
.hj-top { display: flex; gap: 24px; font-size: 15px; } .hj-top b { font-size: 22px; color: var(--accent); }
.hj-grid { display: grid; grid-template-columns: repeat(3, 76px); gap: 8px; }
.hj-c { width: 76px; height: 76px; border-radius: 16px; border: 0; font-size: 36px; cursor: pointer; background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); transition: transform .08s; }
.hj-c.on { animation: hjPop .18s ease-out; background: color-mix(in srgb, #e3c46a 18%, transparent); } .hj-c.bad { animation: hjPop .18s ease-out; background: color-mix(in srgb, #c0605a 16%, transparent); }
.hj-c.got { background: color-mix(in srgb, #3f9a62 22%, transparent); } .hj-c.oops { background: color-mix(in srgb, #c0605a 30%, transparent); animation: hjShake .25s; }
.hj-c:active { transform: scale(.94); }
@keyframes hjPop { from { transform: scale(.5); } } @keyframes hjShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.hj-big { font: 800 56px/1 var(--f-display); color: var(--accent); } .hj-big small { font-size: 18px; margin-left: 2px; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; padding: 4px; }
.ph-card { display: grid; gap: 4px; padding: 8px 8px 10px; background: #fbf7ee; color: #3a2a18; border-radius: 4px; box-shadow: 0 3px 10px rgba(0,0,0,.28); transform: rotate(var(--rt)); }
.ph-pic { position: relative; aspect-ratio: 1; border-radius: 2px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding-bottom: 10%; background: linear-gradient(180deg, #8fb3d8, #d9c6a0 70%, #a08060); }
.ph-a, .ph-b { width: 38%; aspect-ratio: 1; border-radius: 50% 50% 46% 46%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--hc); box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.ph-b { background: color-mix(in srgb, var(--hc) 40%, #6a5a8a); }
.ph-card.fr-gold { box-shadow: 0 3px 10px rgba(0,0,0,.28), inset 0 0 0 3px #d9a93a; } .ph-card.fr-house { background: color-mix(in srgb, var(--hc) 22%, #fbf7ee); }
.ph-card.fr-snow .ph-pic { background: linear-gradient(180deg, #cfe2f4, #f4f8fc 70%, #dfe8f0); } .ph-card.fr-night .ph-pic { background: radial-gradient(circle at 70% 20%, #fff8 1px, transparent 2px) 0 0 / 18px 18px, linear-gradient(180deg, #1c2550, #3a3070 70%, #2a2440); }
.ph-cap { font-size: 11.5px; font-weight: 700; text-align: center; font-family: var(--f-display); } .ph-date { font-size: 10px; text-align: center; opacity: .65; }
.hx-msg .nm-text { font-style: italic; }

.wm-greets { display: flex !important; flex-wrap: wrap; gap: 5px !important; }
.wm-g { width: auto !important; height: auto !important; padding: 4px 10px !important; border-radius: 8px !important; font-size: 12.5px !important; font-weight: 600; background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent); }
.wm-g:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.wm-g.done { opacity: .45; }
.greet-chip { padding: 5px 12px !important; border-radius: 8px !important; font-weight: 600; }
.hand-svg { width: 1em; height: 1em; } .pick-hand .hand-svg, .pick-big .hand-svg { width: 56px; height: 56px; } .pa-pouch .hand-svg { width: 40px; height: 40px; color: var(--accent); }

/* 랭킹 시즌(z430) */
.rs-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; vertical-align: 2px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.rs-note { display: block; margin: 2px 0 8px; }
.rs-prev { color: var(--hc); }
/* 버전 숫자: 제목 옆에 흐릿하게 */
.app-ver { display: inline-block; margin-left: 6px; font: 500 11px/1 var(--f-body); letter-spacing: .02em; color: var(--ink-3); opacity: .6; vertical-align: middle; font-variant-numeric: tabular-nums; }
.brand .app-ver { font-size: 13px; }
.patch-head h3 .app-ver { font-size: 12px; margin-left: 8px; }
:root[data-rail="icon"] .rail-brand .app-ver { display: none; }

/* ===== 별의 서고(파랑): 자동 생성 ===== */
:root[data-tint="blue"][data-theme="dark"] { --rule: #2e3641; --ink: #e1e5eb; --ink-2: #a8b2bf; --ink-3: #717b89; --warn: #668dd6; --accent: #668dd6; --on-accent: #090f1a; --accent-soft: rgba(102, 141, 214, .12); }
:root[data-tint="blue"][data-theme="dark"] { --map-paper: #1b212a; --map-paper-2: #212833; --map-ink: #b7c6e8; --map-faint: #6c82a3; }
:root[data-tint="blue"][data-theme="dark"] { --g-day: #588cdc; --g-guide: #a0adbd; }
:root[data-tint="blue"][data-theme="dark"] .shell.themed { --accent: color-mix(in srgb, var(--theme, #95a2b2) 72%, #ffffff); --accent-soft: color-mix(in srgb, var(--theme, #95a2b2) 16%, transparent); --on-accent: #0f1115; --btn-bg: color-mix(in srgb, var(--theme, #95a2b2) 40%, #c7cdd5); --btn-on: #0f1115; }
:root[data-tint="blue"][data-theme="dark"] { --mt-shore: #262b38; --mt-stone: #242c38; --mt-stone-2: #2c3848; --mt-village: #242c38; --mt-roof: #3c7184; }
:root[data-tint="blue"][data-theme="dark"] .where-pin { color: #0f1115 !important; }
:root[data-tint="blue"][data-theme="dark"] .where-pin .ico { stroke: #0f1115; }
:root[data-tint="blue"][data-theme="dark"] .tchip.meal { color: #7399df; }
:root[data-tint="blue"][data-theme="dark"] .event.daily-ev { background: linear-gradient(120deg, #1a2537, #1a2b46 60%, #1e3251); box-shadow: inset 0 0 0 1.5px #314f83; }
:root[data-tint="blue"][data-theme="dark"] .event.daily-ev h3, :root[data-tint="blue"][data-theme="dark"] .event.daily-ev .prose { color: #bccdef; }
:root[data-tint="blue"][data-theme="dark"] .event.daily-ev .btn { background: #161c29; color: #bccdef; border-color: #314f83; }
:root[data-tint="blue"][data-theme="dark"] .daily-prophet { background: #1a1f2a !important; color: #d1daed; box-shadow: inset 0 0 0 1px #323948 !important; }
:root[data-tint="blue"][data-theme="dark"] .dp-art p, :root[data-tint="blue"][data-theme="dark"] .dp-date { color: #abb5cc; }
:root[data-tint="blue"][data-theme="dark"] .dp-mast { border-color: #d1daed; }
:root[data-tint="blue"][data-theme="dark"] .gboard { background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .06) 0 2px, transparent 3px) 0 0 / 22px 22px, linear-gradient(160deg, #293947, #1f2d38); box-shadow: inset 0 0 0 6px #162028, 0 6px 18px rgba(0, 0, 0, .4); }
:root[data-tint="blue"][data-theme="dark"] .gb-pin { background: linear-gradient(180deg, #222830, #1b2128); }
:root[data-tint="blue"][data-theme="dark"] .gb-head h2, :root[data-tint="blue"][data-theme="dark"] .gb-head .small { color: #cbd8ed; }
:root[data-tint="blue"][data-theme="dark"] .hobby-body.hb-cook { background: linear-gradient(180deg, #25292e, #1d2126); }
:root[data-tint="blue"][data-theme="dark"] .view[data-page=creatures] .cr-grid { background: linear-gradient(180deg, #202a38, #19212c); }
:root[data-tint="blue"][data-theme="dark"] .view[data-page=creatures] .panel.quiet-inc { background: linear-gradient(180deg, #202a38, #19212c); }
:root[data-tint="blue"][data-theme="dark"] .view[data-page=creatures] .cr-grid { background: linear-gradient(180deg, #222830, #1b2128) !important; box-shadow: inset 0 0 0 1px #2c3848 !important; }
:root[data-tint="blue"][data-theme="dark"] .prof-card.cp-parch { background-image: linear-gradient(160deg, #242b38, #1a1f2a); }
:root[data-tint="blue"][data-theme="dark"] .broom-shop { background: linear-gradient(180deg, #1d252d, #161c23); border-color: #293747; }
:root[data-tint="blue"][data-theme="dark"] .broom { background: #1b2229; border-color: #293747; }
:root[data-tint="blue"][data-theme="dark"] .news-box { background: color-mix(in srgb, #222b38 40%, var(--sheet)) !important; }
:root[data-tint="blue"][data-theme="dark"] .msg .bub { background: color-mix(in srgb, #ffffff 6%, transparent); }
:root[data-tint="blue"][data-theme="dark"] .c-ttl { color: #7399df; background: color-mix(in srgb, #658adb 10%, transparent); }
:root[data-tint="blue"][data-theme="dark"] .hobby-body.hb-bundle { background: repeating-linear-gradient(0deg, rgba(195, 218, 250, .04) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgba(195, 218, 250, .04) 0 2px, transparent 2px 5px), #1e252d; box-shadow: inset 0 0 0 1px #2c3848; }
:root[data-tint="blue"][data-theme="dark"] .bn-ledger { background: #262e38; box-shadow: 0 2px 0 #2c3848; }
:root[data-tint="blue"][data-theme="dark"] .pouch { --cloth: color-mix(in srgb, var(--rc) 30%, #262e38); }
:root[data-tint="blue"][data-theme="dark"] .sl-ring { background: radial-gradient(closest-side, #1e252d 78%, transparent 80%), conic-gradient(#4975cb calc(var(--p) * 1%), rgba(195, 218, 250, .15) 0); }
:root[data-tint="blue"][data-theme="dark"] .hobby-body.hb-dex { background: linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px) 0 0 / 46px 100%, linear-gradient(#293947, #1e2c38); }
:root[data-tint="blue"][data-theme="dark"] .dx-page { background: linear-gradient(transparent 0 27px, rgba(195, 218, 250, .05) 27px 28px) 0 0 / 100% 28px, #282f38; }
:root[data-tint="blue"][data-theme="dark"] .dx-page.right { background-color: #242c35; }
:root[data-tint="blue"][data-theme="dark"] .hobby-body.hb-bundle { background: radial-gradient(circle, rgba(232, 150, 160, .12) 1.6px, transparent 2px) 0 0 / 22px 22px, #242930 !important; box-shadow: inset 0 0 0 1px #37404d !important; }
:root[data-tint="blue"][data-theme="dark"] .bn-ledger { background: #2d343d !important; box-shadow: 0 0 0 1px #37404d !important; }
:root[data-tint="blue"][data-theme="dark"] .bn-shelf { background: color-mix(in srgb, var(--rc) 10%, #242930); }
:root[data-tint="blue"][data-theme="dark"] .bs-sign { background: #2d343d !important; }
:root[data-tint="blue"][data-theme="dark"] .pouch { --cloth: color-mix(in srgb, var(--rc) 22%, #2d343d) !important; }
:root[data-tint="blue"][data-theme="dark"] .sl-ring { background: radial-gradient(closest-side, #242930 76%, transparent 79%), conic-gradient(color-mix(in srgb, var(--rc) 70%, #92bdec) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0) !important; }
:root[data-tint="blue"][data-skin="parchment"] { --paper: #becce5; --sheet: #dee6f5; --sheet-2: #c8d3eb; --rule: #98accf; --ink: #19232d; --ink-2: #34475b; --ink-3: #596d8a; --warn: #1b4581; --warn-ink: #1b4581; --accent: #1e4067; --accent-soft: rgba(30, 64, 103, .1); --soft: inset 0 1px 0 rgba(239, 243, 254, .75), 0 1px 1px rgba(27, 53, 85, .10), 0 6px 16px -8px rgba(27, 53, 85, .28); --lift: inset 0 1px 0 rgba(239, 243, 254, .8), 0 2px 3px rgba(27, 53, 85, .12), 0 22px 44px -16px rgba(18, 40, 66, .45); --edge: rgba(40, 73, 114, .18); --gilt: #476aa7; }
:root[data-tint="blue"][data-skin="parchment"][data-theme="dark"] { --paper: #0c1117; --sheet: #131b22; --sheet-2: #19222a; --rule: #2c3942; --ink: #c6d3ec; --ink-2: #95a8c7; --ink-3: #63758f; --warn: #6a93d8; --warn-ink: #6a93d8; --accent: #7398d3; --accent-soft: rgba(115, 152, 211, .12); --soft: inset 0 1px 0 rgba(186, 209, 249, .05), 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px -10px rgba(0, 0, 0, .6); --lift: inset 0 1px 0 rgba(186, 209, 249, .06), 0 24px 48px -16px rgba(0, 0, 0, .7); --gilt: #6287c1; }
:root[data-tint="blue"][data-skin="parchment"] .h-hufflepuff { --h-l: #143672; }
:root[data-tint="blue"][data-skin="parchment"] body { background-image: var(--grain), var(--fiber),
    radial-gradient(120% 90% at 50% 0%, rgba(232, 238, 253, .55), transparent 60%),
    radial-gradient(140% 120% at 50% 100%, var(--edge), transparent 55%); }
:root[data-tint="blue"][data-skin="parchment"] :is(.modal, .pop) { background-image: var(--grain), linear-gradient(180deg, rgba(236, 241, 253, .35), transparent 30%); }
:root[data-tint="blue"][data-skin="parchment"] .rail { background-color: color-mix(in srgb, var(--paper) 88%, #274a73); }
:root[data-tint="blue"][data-skin="parchment"] #view > .block-head:first-child::after { background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--gilt) 70%, transparent) 12%, color-mix(in srgb, var(--gilt) 70%, transparent) 46%, transparent 46.5%, transparent 53.5%, color-mix(in srgb, var(--gilt) 70%, transparent) 54%, color-mix(in srgb, var(--gilt) 70%, transparent) 88%, transparent) center / 100% 1px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='9' viewBox='0 0 40 9'><path d='M20 0l4 4.5-4 4.5-4-4.5z' fill='%23476aa7'/><circle cx='10' cy='4.5' r='1.4' fill='%23476aa7'/><circle cx='30' cy='4.5' r='1.4' fill='%23476aa7'/></svg>") center / 40px 9px no-repeat; }
:root[data-tint="blue"][data-skin="parchment"] .btn { box-shadow: inset 0 1px 0 rgba(239, 243, 254, .6), 0 1px 1px rgba(27, 53, 85, .1); }
:root[data-tint="blue"][data-skin="parchment"] .btn.primary { border-color: color-mix(in srgb, var(--accent) 80%, #000000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(12, 34, 56, .35), 0 3px 8px -3px color-mix(in srgb, var(--accent) 60%, transparent); }
:root[data-tint="blue"][data-skin="parchment"] :is(input[type=text], input[type=search], input[type=number], input[type=url], input[type=password], input:not([type]), select, textarea) { background-color: color-mix(in srgb, var(--sheet) 70%, #ffffff 12%); box-shadow: inset 0 1px 2px rgba(27, 53, 85, .08); }
:root[data-tint="blue"][data-skin="parchment"] .toast { background-color: #19232d; color: #d7e0f3; border: 1px solid #2c3f56; box-shadow: 0 10px 30px -10px rgba(6, 17, 28, .6); }
:root[data-tint="blue"][data-skin="parchment"] .home-clock { background: var(--grain), radial-gradient(90% 140% at 92% 20%, rgba(130, 169, 245, .45), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); box-shadow: var(--soft), inset 0 0 0 1px var(--rule), inset 0 0 0 4px rgba(230, 237, 253, .55), inset 0 0 0 5px color-mix(in srgb, var(--gilt) 45%, transparent); }
:root[data-tint="blue"][data-skin="parchment"] .home-clock.sky-dusk { background: var(--grain), radial-gradient(90% 140% at 92% 30%, rgba(101, 190, 229, .35), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); }
:root[data-tint="blue"][data-skin="parchment"] .home-clock.sky-night { background: var(--grain), radial-gradient(70% 120% at 90% 20%, rgba(167, 191, 248, .14), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] { --paper: #1c2025; --sheet: #23272d; --sheet-2: #292f36; --rule: rgba(121, 156, 194, .32); --ink: #d2dbea; --ink-2: #a5b1c6; --ink-3: #6c7e96; --warn: #82a4da; --warn-ink: #82a4da; --accent: #799cc2; --on-accent: #13181e; --accent-soft: rgba(121, 156, 194, .14); --gold: #799cc2; --gold-2: #a3bce1; --gilt: #799cc2; --soft: 0 1px 0 rgba(204, 222, 251, .04) inset, 0 8px 22px -12px rgba(0, 0, 0, .7); --frame: 0 0 0 1px rgba(121, 156, 194, .55), inset 0 0 0 3px var(--sheet), inset 0 0 0 4px rgba(121, 156, 194, .28); --c-tl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23799cc2' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/><path d='M6 22c9 0 16-7 16-16' opacity='.45'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23799cc2'/><circle cx='20' cy='3' r='1.1' fill='%23799cc2'/><circle cx='3' cy='20' r='1.1' fill='%23799cc2'/></svg>"); --c-tr: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(40 0) scale(-1 1)'><g fill='none' stroke='%23799cc2' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/><path d='M6 22c9 0 16-7 16-16' opacity='.45'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23799cc2'/><circle cx='20' cy='3' r='1.1' fill='%23799cc2'/><circle cx='3' cy='20' r='1.1' fill='%23799cc2'/></g></svg>"); --c-bl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(0 40) scale(1 -1)'><g fill='none' stroke='%23799cc2' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/><path d='M6 22c9 0 16-7 16-16' opacity='.45'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23799cc2'/><circle cx='20' cy='3' r='1.1' fill='%23799cc2'/><circle cx='3' cy='20' r='1.1' fill='%23799cc2'/></g></svg>"); --c-br: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(40 40) scale(-1 -1)'><g fill='none' stroke='%23799cc2' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/><path d='M6 22c9 0 16-7 16-16' opacity='.45'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23799cc2'/><circle cx='20' cy='3' r='1.1' fill='%23799cc2'/><circle cx='3' cy='20' r='1.1' fill='%23799cc2'/></g></svg>"); --astro: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100' viewBox='0 0 1100 1100'><g fill='none' stroke='%23799cc2' stroke-width='1.2' opacity='.16'><circle cx='550' cy='550' r='520'/><circle cx='550' cy='550' r='490'/><circle cx='550' cy='550' r='380' stroke-dasharray='2 10'/><circle cx='550' cy='550' r='250'/><path d='M550 30v1040M30 550h1040M182 182l736 736M918 182L182 918'/><path d='M550 60 C 760 300 760 800 550 1040 M550 60 C 340 300 340 800 550 1040' opacity='.6'/><path d='M140 360 L 420 250 L 700 420 L 960 300' stroke-width='.8'/><path d='M200 760 L 480 820 L 760 700 L 900 780' stroke-width='.8'/></g><g fill='%23a3bce1' opacity='.45'><circle cx='420' cy='250' r='2.2'/><circle cx='700' cy='420' r='2.6'/><circle cx='960' cy='300' r='2'/><circle cx='140' cy='360' r='2'/><circle cx='480' cy='820' r='2.4'/><circle cx='760' cy='700' r='2'/><circle cx='200' cy='760' r='1.8'/><circle cx='900' cy='780' r='1.8'/></g></svg>"); --ridge: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='220' viewBox='0 0 1600 220' preserveAspectRatio='none'><path d='M0 220V150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60V220z' fill='%23121519' opacity='.75'/><path d='M0 150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60' fill='none' stroke='%23799cc2' stroke-width='1.2' opacity='.35'/><g stroke='%23799cc2' stroke-width='.7' opacity='.22'><path d='M270 40l-30 60M270 40l25 55M720 30l-40 70M720 30l35 60M1080 70l-30 50'/></g></svg>"); --pillar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='900' viewBox='0 0 60 900'><g fill='none' stroke='%23799cc2' stroke-width='1.1' opacity='.75'><path d='M14 900V150q16-40 16-70 0 30 16 70v750'/><path d='M20 900V160q10-26 10-50 0 24 10 50v740' opacity='.6'/><path d='M30 120v-40M30 220v40'/></g><g fill='%23799cc2' opacity='.85'><path d='M30 20l3 11 11 3-11 3-3 11-3-11-11-3 11-3z'/><path d='M30 60l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/><path d='M30 330l4 14 14 4-14 4-4 14-4-14-14-4 14-4z'/><path d='M30 620l2.5 8 8 2.5-8 2.5-2.5 8-2.5-8-8-2.5 8-2.5z'/></g></svg>"); --spark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'><g fill='%23799cc2'><path d='M12 3l1.3 3.7L17 8l-3.7 1.3L12 13l-1.3-3.7L7 8l3.7-1.3z'/><path d='M32 1l1.8 5.2L39 8l-5.2 1.8L32 15l-1.8-5.2L25 8l5.2-1.8z'/><path d='M52 3l1.3 3.7L57 8l-3.7 1.3L52 13l-1.3-3.7L47 8l3.7-1.3z'/></g></svg>"); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] body { background-color: #1e2227; background-image: var(--grain), var(--ridge), var(--astro),
    radial-gradient(80% 60% at 55% 0%, rgba(83, 98, 117, .28), transparent 65%),
    radial-gradient(70% 50% at 50% 110%, rgba(85, 113, 145, .18), transparent 60%),
    linear-gradient(180deg, #25292e, #191c1f); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .rail { background-color: #191c1f; background-image: var(--grain), linear-gradient(180deg, rgba(121, 156, 194, .08), transparent 30%); box-shadow: inset -1px 0 0 rgba(121, 156, 194, .55), inset -5px 0 0 #191c1f, inset -6px 0 0 rgba(121, 156, 194, .3), 8px 0 30px rgba(0, 0, 0, .45); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .nav button:hover { background: rgba(121, 156, 194, .1); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .nav button.on { background: rgba(121, 156, 194, .16); box-shadow: inset 0 0 0 1px rgba(121, 156, 194, .55); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .nav-ico { box-shadow: inset 0 0 0 1px rgba(121, 156, 194, .4); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .statusbar { background: rgba(25, 28, 31, .86); border-bottom: 1px solid rgba(121, 156, 194, .45); box-shadow: 0 3px 0 -2px rgba(121, 156, 194, .2); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .tabbar { background: rgba(25, 28, 31, .95); border-top: 1px solid rgba(121, 156, 194, .45); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .hud-in { background-color: rgba(25, 28, 31, .92); border: 1px solid rgba(121, 156, 194, .45); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .page-head::after { background: linear-gradient(90deg, transparent, rgba(121, 156, 194, .7) 10%, rgba(121, 156, 194, .7) 44%, transparent 44.5%, transparent 55.5%, rgba(121, 156, 194, .7) 56%, rgba(121, 156, 194, .7) 90%, transparent) center / 100% 1px no-repeat, var(--spark) center / 64px 14px no-repeat; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .ph-ico { background: radial-gradient(circle, #292f36 55%, #1c2025); box-shadow: 0 0 0 1px rgba(121, 156, 194, .7), 0 0 0 4px #1c2025, 0 0 0 5px rgba(121, 156, 194, .45); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .ph-txt h1 { color: #dae2f1; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .table-wrap, .letter, .gb-open, .first-steps, .card, .home-clock) { background-color: rgba(35, 39, 45, .94); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(.item, .person, .next, .sc-btn, .fs-stage, .shop-lines) { background-color: rgba(41, 47, 54, .7); border-color: rgba(121, 156, 194, .25); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .btn { background: rgba(213, 227, 252, .03); border-color: rgba(121, 156, 194, .5); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .btn.primary { background: linear-gradient(180deg, #90add3, #6d93b9); border-color: #a3bce1; color: #13181e; box-shadow: 0 0 0 2px #1c2025, 0 0 0 3px rgba(121, 156, 194, .6); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .chip { background: rgba(213, 227, 252, .03); border-color: rgba(121, 156, 194, .4); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .chip.on { background: #799cc2; border-color: #a3bce1; color: #13181e; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(input[type=text], input[type=search], input[type=number], input[type=url], input[type=password], input:not([type]), select, textarea) { background: #191c1f; border-color: rgba(121, 156, 194, .4); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(.modal, .pop) { background-color: #22262c; box-shadow: 0 0 0 1px rgba(121, 156, 194, .6), inset 0 0 0 4px #22262c, inset 0 0 0 5px rgba(121, 156, 194, .3), var(--lift); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .toast { background: #191c1f; border: 1px solid rgba(121, 156, 194, .55); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .chat { background-color: #1c2025; border-left: 1px solid rgba(121, 156, 194, .5); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .help-tip { background: rgba(121, 156, 194, .08); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(.panel, .block.fold, .gb-open, .wg, .goods, .bd-card, .inc-card, .letter, .card) :is(.panel, .block.fold, .wg, .card) { background-color: rgba(41, 47, 54, .45); box-shadow: inset 0 0 0 1px rgba(121, 156, 194, .22); }
:root[data-tint="blue"][data-theme="dark"] .rank-cell.top { background: linear-gradient(160deg, rgba(110, 147, 220, .28), rgba(110, 147, 220, .08)); }
:root[data-tint="blue"][data-theme="dark"] .rank-cell.top b { color: #83a2e7; }
html:root[data-tint="blue"][data-skin="parchment"] .shell[class*="h-"] { --accent: #1e4067; --on-accent: #ecf2fd; --accent-soft: rgba(30, 64, 103, .1); }
html:root[data-tint="blue"][data-skin="parchment"][data-theme="dark"] .shell[class*="h-"] { --accent: #7398d3; --on-accent: #13181e; --accent-soft: rgba(115, 152, 211, .13); }
html:root[data-tint="blue"][data-frame="night"] .shell[class*="h-"] { --accent: #385a83; --on-accent: #ecf2fd; --accent-soft: rgba(56, 90, 131, .12); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .shell[class*="h-"] { --accent: #799cc2; --on-accent: #13181e; --accent-soft: rgba(121, 156, 194, .14); }
:root[data-tint="blue"][data-theme="dark"] .pc-tag.out { color: #91b4df; }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) > .view[data-page=post] { background-image: var(--grain), var(--fiber), radial-gradient(130% 100% at 50% 40%, transparent 62%, rgba(40, 73, 114, .16) 100%) !important; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] { --ink: #d8dfee; --ink-2: #b5c0d6; --ink-3: #8994a8; --rule: rgba(121, 156, 194, .38); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(.faint, .eyebrow, .ph-sub, .small.faint, .meta) { color: #919cb0; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(input, textarea)::placeholder { color: #697c95; }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) { --paper: #d5deed; --sheet: #ebf0f9; --sheet-2: #d5deed; --rule: #aabbd8; --ink: #19212a; --ink-2: #374657; --ink-3: #5e6d82; --accent: #385a83; --on-accent: #ecf2fd; --accent-soft: rgba(56, 90, 131, .12); --gilt: #5275a8; --gold: #799cc2; --gold-2: #a3bce1; --dk-ink: #d8e0ef; --dk-ink-2: #b2bed5; --dk-ink-3: #8c97aa; --astro-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100' viewBox='0 0 1100 1100'><g fill='none' stroke='%23799cc2' stroke-width='1.2' opacity='.15'><circle cx='550' cy='550' r='520'/><circle cx='550' cy='550' r='490'/><circle cx='550' cy='550' r='380' stroke-dasharray='2 10'/><circle cx='550' cy='550' r='250'/><path d='M550 30v1040M30 550h1040M182 182l736 736M918 182L182 918'/><path d='M550 60 C 760 300 760 800 550 1040 M550 60 C 340 300 340 800 550 1040' opacity='.6'/><path d='M140 360 L 420 250 L 700 420 L 960 300' stroke-width='.8'/><path d='M200 760 L 480 820 L 760 700 L 900 780' stroke-width='.8'/></g><g fill='%23a3bce1' opacity='.45'><circle cx='420' cy='250' r='2.2'/><circle cx='700' cy='420' r='2.6'/><circle cx='960' cy='300' r='2'/><circle cx='140' cy='360' r='2'/><circle cx='480' cy='820' r='2.4'/><circle cx='760' cy='700' r='2'/></g></svg>"); --ridge-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='220' viewBox='0 0 1600 220' preserveAspectRatio='none'><path d='M0 220V150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60V220z' fill='%23121519' opacity='.75'/><path d='M0 150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60' fill='none' stroke='%23799cc2' stroke-width='1.2' opacity='.35'/></svg>"); --cn-tl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%235275a8' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%235275a8'/></svg>"); --cn-tr: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(40 0) scale(-1 1)'><g fill='none' stroke='%235275a8' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%235275a8'/></g></svg>"); --spark-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'><g fill='%23799cc2'><path d='M12 3l1.3 3.7L17 8l-3.7 1.3L12 13l-1.3-3.7L7 8l3.7-1.3z'/><path d='M32 1l1.8 5.2L39 8l-5.2 1.8L32 15l-1.8-5.2L25 8l5.2-1.8z'/><path d='M52 3l1.3 3.7L57 8l-3.7 1.3L52 13l-1.3-3.7L47 8l3.7-1.3z'/></g></svg>"); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .shell[class*="h-"] { --accent: #385a83; --on-accent: #ecf2fd; --accent-soft: rgba(56, 90, 131, .12); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) body { background-color: #1e2227; background-image: var(--grain), var(--ridge-n), var(--astro-n), radial-gradient(80% 60% at 55% 0%, rgba(83, 98, 117, .28), transparent 65%), linear-gradient(180deg, #25292e, #191c1f); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) :is(.rail, .statusbar, .tabbar, .hud, .stage > .view) { --ink: #d8e0ef; --ink-2: #b2bed5; --ink-3: #8c97aa; --rule: rgba(121, 156, 194, .38); --paper: #1c2025; --sheet: #272c32; --sheet-2: #2e353d; --accent: #81a2cd; --on-accent: #13181e; --accent-soft: rgba(129, 162, 205, .15); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block, .wg, .goods, .bd-card, .inc-card, .letter, .card, .gb-open, .gboard, .first-steps, .table-wrap, .item, .person, .next, .sc-btn, .fs-stage, .shop-sec, .hero, .bag-tab, .bn-shelf, .dx-spread, .hobby-body, .broom-shop, .qd-bracket, .page-tabs .on, .modal, .pop, .help-toc, .rank-cell, .post-box, .post-compose, .hall-card, .ev-row, .fest-card, .news-row, .rr-scene, .inc-head, .auc-sell), html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) :is(.modal, .pop, #chat) { --ink: #19212a; --ink-2: #374657; --ink-3: #5e6d82; --rule: #aabbd8; --paper: #d5deed; --sheet: #ebf0f9; --sheet-2: #d5deed; --accent: #385a83; --on-accent: #ecf2fd; --accent-soft: rgba(56, 90, 131, .12); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card, .first-steps) { box-shadow: 0 0 0 1px rgba(82, 117, 168, .6), inset 0 0 0 3px var(--sheet), inset 0 0 0 4px rgba(82, 117, 168, .22), 0 10px 26px -14px rgba(0, 0, 0, .7); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block.fold, .gb-open, .wg, .goods, .bd-card, .inc-card, .letter, .card) :is(.panel, .block.fold, .wg, .card) { box-shadow: inset 0 0 0 1px rgba(82, 117, 168, .25) !important; }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .view :is(.block-head h3, .panel > b, .panel > .row > b) { color: #1d3655; }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .rail { background: #191c1f; box-shadow: inset -1px 0 0 rgba(121, 156, 194, .55), inset -5px 0 0 #191c1f, inset -6px 0 0 rgba(121, 156, 194, .3), 8px 0 30px rgba(0, 0, 0, .45); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .nav button:hover { background: rgba(121, 156, 194, .1); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .nav button.on { background: rgba(121, 156, 194, .18); box-shadow: inset 0 0 0 1px rgba(121, 156, 194, .55); color: #adc3eb; }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .nav-ico { color: #799cc2 !important; box-shadow: inset 0 0 0 1px rgba(121, 156, 194, .4); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .nav-label { color: #799cc2; }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .rail-brand { color: #a3bce1; }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .statusbar { background: rgba(25, 28, 31, .88); border-bottom: 1px solid rgba(121, 156, 194, .45); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) :is(.statusbar, .tabbar) .btn { background: rgba(213, 227, 252, .04); border-color: rgba(121, 156, 194, .4); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .tabbar { background: rgba(25, 28, 31, .96); border-top: 1px solid rgba(121, 156, 194, .45); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .hud-in { background: rgba(25, 28, 31, .93); border: 1px solid rgba(121, 156, 194, .45); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .hud-mini { background: rgba(25, 28, 31, .93); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .page-head::after { background: linear-gradient(90deg, transparent, rgba(121, 156, 194, .7) 10%, rgba(121, 156, 194, .7) 44%, transparent 44.5%, transparent 55.5%, rgba(121, 156, 194, .7) 56%, rgba(121, 156, 194, .7) 90%, transparent) center / 100% 1px no-repeat, var(--spark-n) center / 64px 14px no-repeat; }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .ph-ico { background: radial-gradient(circle, #292f36 55%, #1c2025); color: #a3bce1; box-shadow: 0 0 0 1px rgba(121, 156, 194, .7), 0 0 0 4px #1c2025, 0 0 0 5px rgba(121, 156, 194, .45); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .ph-txt h1 { color: #dae2f1; }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .ph-txt h1::before { color: #799cc2; }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .btn.primary { background: linear-gradient(180deg, #2e353d, #1d2228); border-color: #355383; color: #adc3eb; box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3px rgba(82, 117, 168, .6); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .btn:not(.primary):not(.quiet) { border-color: color-mix(in srgb, #5275a8 55%, transparent); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .chip.on { background: #252a31; border-color: #355383; color: #adc3eb; }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .stage > .view > .chips .chip.on, html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .stage > .view .subtabs .on { background: #799cc2; border-color: #a3bce1; color: #13181e; }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) :is(.modal, .pop) { box-shadow: 0 0 0 1px rgba(82, 117, 168, .7), inset 0 0 0 4px var(--sheet), inset 0 0 0 5px rgba(82, 117, 168, .3), 0 24px 60px -18px rgba(0, 0, 0, .6); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .toast { background: #1c2025; color: #d8e0ef; border: 1px solid rgba(121, 156, 194, .55); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) #chat { border-left: 1px solid rgba(82, 117, 168, .6); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .home-clock { background: var(--grain), radial-gradient(90% 140% at 92% 20%, rgba(130, 169, 245, .18), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); box-shadow: 0 0 0 1px rgba(121, 156, 194, .7), inset 0 0 0 4px #23282e, inset 0 0 0 5px rgba(121, 156, 194, .35); }
html:root[data-tint="blue"][data-frame="night"]:not([data-theme="dark"]) .home-clock .hc-time { color: #a3bce1; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .btn:not(.primary):not(.quiet):not(.danger):not(.stop) { background: #2c3540; border-color: rgba(134, 167, 208, .62); color: #d3ddf0; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .btn:not(.primary):not(:disabled):hover { background: #37404d; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .btn.quiet { background: rgba(213, 227, 252, .07); border-color: rgba(134, 167, 208, .28); color: #c3d0e7; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(.chip, .ptag) { background: #29303a; border-color: rgba(134, 167, 208, .5); color: #cdd8ec; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .chip:not(.on):hover { background: #323c48; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(.htab, .subtabs button, .seg button, .bag-tab, .rank-cell, .fly-mode, .tac, .spell, .rps-cell, .tk-act) { background: #29303a; border-color: rgba(134, 167, 208, .42); color: #cdd8ec; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(.htab.on, .subtabs button.on, .seg button.on, .bag-tab.on, .rank-cell.on, .fly-mode.on) { background: #334257; border-color: #8dabd9; color: #e4edfd; box-shadow: inset 0 0 0 1px rgba(141, 171, 217, .5); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .htab .ico { background: rgba(213, 227, 252, .1); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(.pouch-body, .panel.cook-lab, .dx-page, .ck-book, .ck-mastery) { --ink: #1c2b38; --ink-2: #334757; --ink-3: #506a81; --rule: rgba(51, 82, 114, .3); --line: rgba(51, 82, 114, .25); --sheet: #e4ebf9; color: #1c2b38; }
html:root[data-tint="blue"][data-frame="night"] .pouch { --cloth: #b1c4e2; }
html:root[data-tint="blue"][data-frame="night"] .pt-neck, html:root[data-tint="blue"][data-frame="night"] .pt-frill { fill: #9cb3d7; stroke: #476585; }
html:root[data-tint="blue"][data-frame="night"] .pouch-body { background:
    repeating-linear-gradient(0deg, rgba(51, 82, 114, .06) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(51, 82, 114, .06) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 30%, #c6d4ed, #95aed4 75%, #7a97c1) !important; border: 1.5px solid #4e6e94 !important; box-shadow: inset 0 -10px 18px rgba(36, 72, 104, .22), 0 6px 14px rgba(0, 0, 0, .35) !important; }
html:root[data-tint="blue"][data-frame="night"] .pouch-body::before { border-top: 1.5px dashed rgba(46, 82, 114, .45); }
html:root[data-tint="blue"][data-frame="night"] .pouch-body .pb-head b { color: #1c2b38; }
html:root[data-tint="blue"][data-frame="night"] .pouch-body :is(.small, .faint, .pb-hint) { color: #3c536a !important; }
html:root[data-tint="blue"][data-frame="night"] .pouch-body .slot span, html:root[data-tint="blue"][data-frame="night"] .pouch-body .slots span { color: #253747; }
html:root[data-tint="blue"][data-frame="night"] .pb-rw { background: #e8effd; color: #183b72; box-shadow: 0 0 0 1px rgba(51, 82, 114, .3); }
html:root[data-tint="blue"][data-frame="night"] body .view .panel.panel.cook-lab.cook-lab { background: radial-gradient(circle at 75% 25%, rgba(121, 180, 244, .28), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect width='28' height='28' fill='%23e3ecf9'/%3E%3Cpath d='M0 .5H28M.5 0V28' stroke='%23c4d5eb' stroke-width='1'/%3E%3C/svg%3E") !important; border: 1px solid #9fbcde !important; }
html:root[data-tint="blue"][data-frame="night"] .cook-lab :is(.trek-title, h2, h3) { color: #224d64 !important; }
html:root[data-tint="blue"][data-frame="night"] .cook-lab .eyebrow { color: #35739f !important; }
html:root[data-tint="blue"][data-frame="night"] .cook-lab :is(.small, .muted) { color: #3a546a !important; }
html:root[data-tint="blue"][data-frame="night"] .cook-lab .faint { color: #5d7a92 !important; }
html:root[data-tint="blue"][data-frame="night"] .cook-lab .btn:not(.primary) { background: #e4eefd !important; color: #213e55 !important; border-color: #89add2 !important; }
html:root[data-tint="blue"][data-frame="night"] .dx-spread { background: linear-gradient(180deg, #264457, #192f3c) !important; box-shadow: inset 0 0 0 2px #0e1e28, inset 0 0 0 4px rgba(109, 149, 205, .35), 0 14px 26px rgba(0, 0, 0, .5) !important; }
html:root[data-tint="blue"][data-frame="night"] .dx-page { background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(37, 73, 113, .22) 100%),
    linear-gradient(transparent 0 27px, rgba(51, 82, 114, .08) 27px 28px) 0 6px / 100% 28px,
    #bccae6 !important; color: #1c2b38; }
html:root[data-tint="blue"][data-frame="night"] .dx-page.left { box-shadow: inset -18px 0 22px -14px rgba(14, 42, 66, .45), -3px 3px 0 #a2b3d4, -6px 6px 0 #8a9ec2 !important; }
html:root[data-tint="blue"][data-frame="night"] .dx-page.right { background-color: #c1cee9 !important; box-shadow: inset 18px 0 22px -14px rgba(14, 42, 66, .45), 3px 3px 0 #a2b3d4, 6px 6px 0 #8a9ec2 !important; }
html:root[data-tint="blue"][data-frame="night"] .dx-spread::after { background: linear-gradient(90deg, transparent, rgba(14, 36, 56, .35) 45%, rgba(14, 36, 56, .45) 50%, rgba(14, 36, 56, .35) 55%, transparent) !important; }
html:root[data-tint="blue"][data-frame="night"] .dx-page h3 { color: #183346; }
html:root[data-tint="blue"][data-frame="night"] .dx-page .eyebrow { color: #315d83; }
html:root[data-tint="blue"][data-frame="night"] .dx-page :is(.small, .faint) { color: #3c536a !important; }
html:root[data-tint="blue"][data-frame="night"] .dx-page .dp-head { border-bottom: 1px solid rgba(51, 82, 114, .35); }
html:root[data-tint="blue"][data-frame="night"] .dx-page .dx-it { background: #d5def3 !important; color: #1c2b38; box-shadow: 0 0 0 1px rgba(51, 82, 114, .35), 0 2px 0 rgba(51, 82, 114, .2) !important; }
html:root[data-tint="blue"][data-frame="night"] .dx-page .dx-it.unknown { border: 1.5px dashed rgba(51, 82, 114, .45) !important; color: #546c86; }
html:root[data-tint="blue"][data-frame="night"] .dx-page .dx-q { background: rgba(51, 82, 114, .14); color: #3d5a75; }
html:root[data-tint="blue"][data-frame="night"] .dp-no { color: #496685; }
html:root[data-tint="blue"][data-frame="night"] .dx-page .bn-prog { background: rgba(51, 82, 114, .2); }
html:root[data-tint="blue"][data-frame="night"] .dx-page .bn-prog i { background: #315d83; }
html:root[data-tint="blue"][data-frame="night"] .dx-mark { background: color-mix(in srgb, var(--mc) 60%, #1c2b38) !important; color: #dfeafc !important; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .purse-pop .pp-big b { color: #92abee; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(.hn[class*="hn-"]:not(.hn-), .mbadge, .mbadge b, .glasses.mini2 .hs.lead b, .rh-v, .cup .ico, .cup b, .qs-name, .bd-who .ico) { color: color-mix(in srgb, var(--hc) 58%, #ffffff) !important; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .mbadge .ico { fill: color-mix(in srgb, var(--hc) 70%, #ffffff); stroke: color-mix(in srgb, var(--hc) 70%, #ffffff); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(.hpill, .bd-who, .c-ava b) { color: color-mix(in srgb, var(--hc) 55%, #ffffff) !important; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .hpill { background: color-mix(in srgb, var(--hc) 26%, #22262c); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .bd-ava { color: color-mix(in srgb, var(--hc) 55%, #ffffff); background: color-mix(in srgb, var(--hc) 35%, #22262c); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] [style*="--pc:"]:not(.mono-av) { color: color-mix(in srgb, var(--pc) 60%, #ffffff); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(.ic-msg .who, .fly-row b) { color: color-mix(in srgb, var(--pc, #c7d2e5) 60%, #ffffff); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .tc-name { color: color-mix(in srgb, var(--tc, currentColor) 60%, #ffffff) !important; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .bs-speed { color: #83ade7 !important; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .qd-bracket .qb-cup .small.faint { color: #dbe5fc !important; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .qd-bracket .qb-cup { background: radial-gradient(circle at 50% 30%, rgba(149, 182, 246, .22), rgba(17, 26, 38, .55) 75%); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .qd-role .qd-ch { color: color-mix(in srgb, var(--qc, #8dabd9) 55%, #ffffff) !important; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .off-tag { background: #83a2e9; color: #0e2c54; }
html:root[data-tint="blue"][data-frame="night"] .pouch-body .pb-all { color: #ffffff !important; }
html:root[data-tint="blue"][data-frame="night"] .pb-rw { color: #0f3263 !important; }
html:root[data-tint="blue"][data-frame="night"] .cook-lab .bl-lv { color: #395a75 !important; }
html:root[data-tint="blue"][data-frame="night"] .cook-lab .ck-card { color: #152937; }
html:root[data-tint="blue"][data-frame="night"] body .dx-page .dp-head .eyebrow { color: #255073 !important; }
html:root[data-tint="blue"][data-frame="night"] body .dx-page .dp-no { color: #395675 !important; }
html:root[data-tint="blue"][data-frame="night"] .dx-mark { background: color-mix(in srgb, var(--mc) 55%, #0c1922) !important; }
html:root[data-tint="blue"][data-frame="night"] .dx-mark.on { background: color-mix(in srgb, var(--mc) 75%, #0c1922) !important; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .hc-pill { color: #dbe6fc; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .stars i { color: rgba(134, 167, 208, .5); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .inc-rw { color: #6c92dc; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .owl-stamp { color: color-mix(in srgb, var(--sc) 55%, #ffffff) !important; border-color: color-mix(in srgb, var(--sc) 60%, #ffffff) !important; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .wg-big { color: color-mix(in srgb, var(--wc, #8fa8e0) 55%, #ffffff) !important; }
html:root[data-tint="blue"][data-frame="night"] .cook-lab .bl-lv { color: #213e55 !important; }
html:root[data-tint="blue"][data-frame="night"] .cook-lab .ck-parts { color: #3a546a !important; }
html:root[data-tint="blue"][data-frame="night"] .ck-badge { background: linear-gradient(180deg, #3b89d3, #2671ac); }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] :is(.inc-card.st-open, .inc-head.st-open, .next.inc-tint)[class*="d-"] { background: linear-gradient(135deg, color-mix(in srgb, var(--dcb) 30%, #22262c), color-mix(in srgb, var(--dcb) 12%, #1d2228)) !important; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .inc-card[class*="d-"] .inc-name { color: color-mix(in srgb, var(--dcb) 45%, #ffffff) !important; }
html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] [class*="d-"] .dtag, html:root[data-tint="blue"][data-frame="night"][data-theme="dark"] .dtag[class*="d-"] { color: color-mix(in srgb, var(--dcb) 50%, #ffffff); }
html:root[data-tint="blue"][data-theme="dark"] .hc-tag.hot { color: #93b6f6; background: color-mix(in srgb, #3666bd 30%, transparent); }
html:root[data-tint="blue"][data-theme="dark"] .rk-row.m1 .rk-n { color: #5a89e6; }
html:root[data-tint="blue"][data-theme="dark"] .bd-st { color: color-mix(in srgb, var(--kc) 55%, #ffffff); }
html:root[data-tint="blue"]:not([data-frame="night"]) .subtabs.st-shop button.sub-auction { color: #214481 !important; }
html:root[data-tint="blue"]:not([data-frame="night"]) .subtabs.st-shop button.sub-auction.on { color: #ffffff !important; }
html[data-tint="blue"] html:not([data-frame="night"]) #maint-flag { background: #e8f3fd; color: #1b6895; }
html:root[data-tint="blue"][data-frame="night"] .ik-tac.lack .ik-e { color: #648fd8 !important; }
html:root[data-tint="blue"][data-frame="night"] .ik-tac.lack .ik-l { color: #b6c0d2 !important; }
html:root[data-tint="blue"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-p { background: color-mix(in srgb, var(--hc, var(--accent)) 14%, #ffffff) !important; color: #1d2329 !important; }
html:root[data-tint="blue"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-p b { color: #101419 !important; }
html:root[data-tint="blue"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-p .faint { color: #424b58 !important; }
html:root[data-tint="blue"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-clue span { color: #1d2329; }
:root[data-tint="blue"][data-theme="dark"] { --nk-quest: #73a7d9; --nk-money: #6b91e5; }
:root[data-tint="blue"][data-theme="dark"] .notice-msg .nm-pill { background: #557dd7; color: #031227; }
:root[data-tint="blue"][data-theme="dark"] .msg.km .km-bub { background: color-mix(in srgb, #ffffff 9%, var(--sheet, #202224)); }
:root[data-tint="blue"][data-theme="dark"] .msg.km.km-me .km-bub { background: color-mix(in srgb, #557dd7 34%, var(--sheet, #202224)); color: #e1e9f9; }
:root[data-tint="blue"][data-theme="dark"] .wm-treat { color: #65aee7; }
:root[data-tint="blue"][data-theme="dark"] .deco-it .ttl-need, :root[data-tint="blue"][data-theme="dark"] .chip .ttl-need { color: #7392df; }

/* ===== 별의 서고(white): 자동 생성 ===== */
:root[data-tint="white"][data-skin="parchment"] { --paper: #d7d4cc; --sheet: #ecebe7; --sheet-2: #dedbd5; --rule: #bcb7ab; --ink: #262420; --ink-2: #4d4a42; --ink-3: #79746a; --warn: #585244; --warn-ink: #585244; --accent: #4b463a; --accent-soft: rgba(75, 70, 58, .1); --soft: inset 0 1px 0 rgba(248, 247, 245, .75), 0 1px 1px rgba(63, 59, 49, .10), 0 6px 16px -8px rgba(63, 59, 49, .28); --lift: inset 0 1px 0 rgba(248, 247, 245, .8), 0 2px 3px rgba(63, 59, 49, .12), 0 22px 44px -16px rgba(47, 44, 37, .45); --edge: rgba(87, 81, 67, .18); --gilt: #857d69; }
:root[data-tint="white"][data-skin="parchment"] .h-hufflepuff { --h-l: #4c463a; }
:root[data-tint="white"][data-skin="parchment"] body { background-image: var(--grain), var(--fiber),
    radial-gradient(120% 90% at 50% 0%, rgba(244, 243, 241, .55), transparent 60%),
    radial-gradient(140% 120% at 50% 100%, var(--edge), transparent 55%); }
:root[data-tint="white"][data-skin="parchment"] :is(.modal, .pop) { background-image: var(--grain), linear-gradient(180deg, rgba(246, 246, 244, .35), transparent 30%); }
:root[data-tint="white"][data-skin="parchment"] .rail { background-color: color-mix(in srgb, var(--paper) 88%, #575143); }
:root[data-tint="white"][data-skin="parchment"] #view > .block-head:first-child::after { background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--gilt) 70%, transparent) 12%, color-mix(in srgb, var(--gilt) 70%, transparent) 46%, transparent 46.5%, transparent 53.5%, color-mix(in srgb, var(--gilt) 70%, transparent) 54%, color-mix(in srgb, var(--gilt) 70%, transparent) 88%, transparent) center / 100% 1px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='9' viewBox='0 0 40 9'><path d='M20 0l4 4.5-4 4.5-4-4.5z' fill='%23857d69'/><circle cx='10' cy='4.5' r='1.4' fill='%23857d69'/><circle cx='30' cy='4.5' r='1.4' fill='%23857d69'/></svg>") center / 40px 9px no-repeat; }
:root[data-tint="white"][data-skin="parchment"] .btn { box-shadow: inset 0 1px 0 rgba(248, 247, 245, .6), 0 1px 1px rgba(63, 59, 49, .1); }
:root[data-tint="white"][data-skin="parchment"] .btn.primary { border-color: color-mix(in srgb, var(--accent) 80%, #000000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(38, 36, 30, .35), 0 3px 8px -3px color-mix(in srgb, var(--accent) 60%, transparent); }
:root[data-tint="white"][data-skin="parchment"] :is(input[type=text], input[type=search], input[type=number], input[type=url], input[type=password], input:not([type]), select, textarea) { background-color: color-mix(in srgb, var(--sheet) 70%, #ffffff 12%); box-shadow: inset 0 1px 2px rgba(63, 59, 49, .08); }
:root[data-tint="white"][data-skin="parchment"] .toast { background-color: #262420; color: #e8e6e2; border: 1px solid #47443b; box-shadow: 0 10px 30px -10px rgba(19, 18, 15, .6); }
:root[data-tint="white"][data-skin="parchment"] .home-clock { background: var(--grain), radial-gradient(90% 140% at 92% 20%, rgba(196, 191, 179, .45), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); box-shadow: var(--soft), inset 0 0 0 1px var(--rule), inset 0 0 0 4px rgba(243, 242, 240, .55), inset 0 0 0 5px color-mix(in srgb, var(--gilt) 45%, transparent); }
:root[data-tint="white"][data-skin="parchment"] .home-clock.sky-dusk { background: var(--grain), radial-gradient(90% 140% at 92% 30%, rgba(177, 170, 153, .35), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); }
:root[data-tint="white"][data-skin="parchment"] .home-clock.sky-night { background: var(--grain), radial-gradient(70% 120% at 90% 20%, rgba(214, 210, 201, .14), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); }
html:root[data-tint="white"][data-skin="parchment"] .shell[class*="h-"] { --accent: #4b463a; --on-accent: #f6f5f3; --accent-soft: rgba(75, 70, 58, .1); }
html:root[data-tint="white"][data-frame="night"] .shell[class*="h-"] { --accent: #696252; --on-accent: #f6f5f3; --accent-soft: rgba(105, 98, 82, .12); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) > .view[data-page=post] { background-image: var(--grain), var(--fiber), radial-gradient(130% 100% at 50% 40%, transparent 62%, rgba(87, 81, 67, .16) 100%) !important; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) { --paper: #e4e2de; --sheet: #f4f3f0; --sheet-2: #e4e2de; --rule: #c8c4ba; --ink: #24221f; --ink-2: #4c4942; --ink-3: #76726a; --accent: #696252; --on-accent: #f6f5f3; --accent-soft: rgba(105, 98, 82, .12); --gilt: #8a8270; --gold: #a8a293; --gold-2: #cac5ba; --dk-ink: #e7e5e0; --dk-ink-2: #c9c6be; --dk-ink-3: #a09d96; --astro-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100' viewBox='0 0 1100 1100'><g fill='none' stroke='%23a8a293' stroke-width='1.2' opacity='.15'><circle cx='550' cy='550' r='520'/><circle cx='550' cy='550' r='490'/><circle cx='550' cy='550' r='380' stroke-dasharray='2 10'/><circle cx='550' cy='550' r='250'/><path d='M550 30v1040M30 550h1040M182 182l736 736M918 182L182 918'/><path d='M550 60 C 760 300 760 800 550 1040 M550 60 C 340 300 340 800 550 1040' opacity='.6'/><path d='M140 360 L 420 250 L 700 420 L 960 300' stroke-width='.8'/><path d='M200 760 L 480 820 L 760 700 L 900 780' stroke-width='.8'/></g><g fill='%23cac5ba' opacity='.45'><circle cx='420' cy='250' r='2.2'/><circle cx='700' cy='420' r='2.6'/><circle cx='960' cy='300' r='2'/><circle cx='140' cy='360' r='2'/><circle cx='480' cy='820' r='2.4'/><circle cx='760' cy='700' r='2'/></g></svg>"); --ridge-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='220' viewBox='0 0 1600 220' preserveAspectRatio='none'><path d='M0 220V150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60V220z' fill='%23171614' opacity='.75'/><path d='M0 150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60' fill='none' stroke='%23a8a293' stroke-width='1.2' opacity='.35'/></svg>"); --cn-tl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%238a8270' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%238a8270'/></svg>"); --cn-tr: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(40 0) scale(-1 1)'><g fill='none' stroke='%238a8270' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%238a8270'/></g></svg>"); --spark-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'><g fill='%23a8a293'><path d='M12 3l1.3 3.7L17 8l-3.7 1.3L12 13l-1.3-3.7L7 8l3.7-1.3z'/><path d='M32 1l1.8 5.2L39 8l-5.2 1.8L32 15l-1.8-5.2L25 8l5.2-1.8z'/><path d='M52 3l1.3 3.7L57 8l-3.7 1.3L52 13l-1.3-3.7L47 8l3.7-1.3z'/></g></svg>"); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .shell[class*="h-"] { --accent: #696252; --on-accent: #f6f5f3; --accent-soft: rgba(105, 98, 82, .12); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) body { background-color: #242321; background-image: var(--grain), var(--ridge-n), var(--astro-n), radial-gradient(80% 60% at 55% 0%, rgba(105, 102, 95, .28), transparent 65%), linear-gradient(180deg, #2c2a27, #1d1d1b); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) :is(.rail, .statusbar, .tabbar, .hud, .stage > .view) { --ink: #e7e5e0; --ink-2: #c9c6be; --ink-3: #a09d96; --rule: rgba(168, 162, 147, .38); --paper: #22211f; --sheet: #2f2d2a; --sheet-2: #383733; --accent: #b2ac9c; --on-accent: #1a1917; --accent-soft: rgba(178, 172, 156, .15); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block, .wg, .goods, .bd-card, .inc-card, .letter, .card, .gb-open, .gboard, .first-steps, .table-wrap, .item, .person, .next, .sc-btn, .fs-stage, .shop-sec, .hero, .bag-tab, .bn-shelf, .dx-spread, .hobby-body, .broom-shop, .qd-bracket, .page-tabs .on, .modal, .pop, .help-toc, .rank-cell, .post-box, .post-compose, .hall-card, .ev-row, .fest-card, .news-row, .rr-scene, .inc-head, .auc-sell), html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) :is(.modal, .pop, #chat) { --ink: #24221f; --ink-2: #4c4942; --ink-3: #76726a; --rule: #c8c4ba; --paper: #e4e2de; --sheet: #f4f3f0; --sheet-2: #e4e2de; --accent: #696252; --on-accent: #f6f5f3; --accent-soft: rgba(105, 98, 82, .12); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card, .first-steps) { box-shadow: 0 0 0 1px rgba(138, 130, 112, .6), inset 0 0 0 3px var(--sheet), inset 0 0 0 4px rgba(138, 130, 112, .22), 0 10px 26px -14px rgba(0, 0, 0, .7); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block.fold, .gb-open, .wg, .goods, .bd-card, .inc-card, .letter, .card) :is(.panel, .block.fold, .wg, .card) { box-shadow: inset 0 0 0 1px rgba(138, 130, 112, .25) !important; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .view :is(.block-head h3, .panel > b, .panel > .row > b) { color: #403c32; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .rail { background: #1d1d1b; box-shadow: inset -1px 0 0 rgba(168, 162, 147, .55), inset -5px 0 0 #1d1d1b, inset -6px 0 0 rgba(168, 162, 147, .3), 8px 0 30px rgba(0, 0, 0, .45); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .nav button:hover { background: rgba(168, 162, 147, .1); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .nav button.on { background: rgba(168, 162, 147, .18); box-shadow: inset 0 0 0 1px rgba(168, 162, 147, .55); color: #d3cfc5; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .nav-ico { color: #a8a293 !important; box-shadow: inset 0 0 0 1px rgba(168, 162, 147, .4); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .nav-label { color: #a8a293; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .rail-brand { color: #cac5ba; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .statusbar { background: rgba(29, 29, 27, .88); border-bottom: 1px solid rgba(168, 162, 147, .45); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) :is(.statusbar, .tabbar) .btn { background: rgba(235, 234, 230, .04); border-color: rgba(168, 162, 147, .4); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .tabbar { background: rgba(29, 29, 27, .96); border-top: 1px solid rgba(168, 162, 147, .45); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .hud-in { background: rgba(29, 29, 27, .93); border: 1px solid rgba(168, 162, 147, .45); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .hud-mini { background: rgba(29, 29, 27, .93); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .page-head::after { background: linear-gradient(90deg, transparent, rgba(168, 162, 147, .7) 10%, rgba(168, 162, 147, .7) 44%, transparent 44.5%, transparent 55.5%, rgba(168, 162, 147, .7) 56%, rgba(168, 162, 147, .7) 90%, transparent) center / 100% 1px no-repeat, var(--spark-n) center / 64px 14px no-repeat; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .ph-ico { background: radial-gradient(circle, #32302d 55%, #22211f); color: #cac5ba; box-shadow: 0 0 0 1px rgba(168, 162, 147, .7), 0 0 0 4px #22211f, 0 0 0 5px rgba(168, 162, 147, .45); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .ph-txt h1 { color: #e9e7e2; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .ph-txt h1::before { color: #a8a293; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .btn.primary { background: linear-gradient(180deg, #383733, #242321); border-color: #686150; color: #d3cfc5; box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3px rgba(138, 130, 112, .6); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .btn:not(.primary):not(.quiet) { border-color: color-mix(in srgb, #8a8270 55%, transparent); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .chip.on { background: #2d2c29; border-color: #686150; color: #d3cfc5; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage > .view > .chips .chip.on, html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage > .view .subtabs .on { background: #a8a293; border-color: #cac5ba; color: #1a1917; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) :is(.modal, .pop) { box-shadow: 0 0 0 1px rgba(138, 130, 112, .7), inset 0 0 0 4px var(--sheet), inset 0 0 0 5px rgba(138, 130, 112, .3), 0 24px 60px -18px rgba(0, 0, 0, .6); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .toast { background: #22211f; color: #e7e5e0; border: 1px solid rgba(168, 162, 147, .55); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) #chat { border-left: 1px solid rgba(138, 130, 112, .6); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .home-clock { background: var(--grain), radial-gradient(90% 140% at 92% 20%, rgba(196, 191, 179, .18), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); box-shadow: 0 0 0 1px rgba(168, 162, 147, .7), inset 0 0 0 4px #2b2926, inset 0 0 0 5px rgba(168, 162, 147, .35); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .home-clock .hc-time { color: #cac5ba; }
html:root[data-tint="white"][data-frame="night"] .pouch { --cloth: #d0ccc3; }
html:root[data-tint="white"][data-frame="night"] .pt-neck, html:root[data-tint="white"][data-frame="night"] .pt-frill { fill: #c2bdb1; stroke: #6f6a5d; }
html:root[data-tint="white"][data-frame="night"] .pouch-body { background:
    repeating-linear-gradient(0deg, rgba(92, 86, 73, .06) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(92, 86, 73, .06) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 30%, #dedbd5, #beb8ab 75%, #a8a293) !important; border: 1.5px solid #7b7567 !important; box-shadow: inset 0 -10px 18px rgba(79, 74, 61, .22), 0 6px 14px rgba(0, 0, 0, .35) !important; }
html:root[data-tint="white"][data-frame="night"] .pouch-body::before { border-top: 1.5px dashed rgba(90, 84, 70, .45); }
html:root[data-tint="white"][data-frame="night"] .pouch-body .pb-head b { color: #2e2c26; }
html:root[data-tint="white"][data-frame="night"] .pouch-body :is(.small, .faint, .pb-hint) { color: #5a564c !important; }
html:root[data-tint="white"][data-frame="night"] .pouch-body .slot span, html:root[data-tint="white"][data-frame="night"] .pouch-body .slots span { color: #3b3831; }
html:root[data-tint="white"][data-frame="night"] .pb-rw { background: #f4f3f1; color: #4e493c; box-shadow: 0 0 0 1px rgba(92, 86, 73, .3); }
html:root[data-tint="white"][data-frame="night"] body .view .panel.panel.cook-lab.cook-lab { background: radial-gradient(circle at 75% 25%, rgba(192, 186, 173, .28), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect width='28' height='28' fill='%23f0efec'/%3E%3Cpath d='M0 .5H28M.5 0V28' stroke='%23dddad2' stroke-width='1'/%3E%3C/svg%3E") !important; border: 1px solid #c7c2b6 !important; }
html:root[data-tint="white"][data-frame="night"] .cook-lab :is(.trek-title, h2, h3) { color: #4c463a !important; }
html:root[data-tint="white"][data-frame="night"] .cook-lab .eyebrow { color: #78705c !important; }
html:root[data-tint="white"][data-frame="night"] .cook-lab :is(.small, .muted) { color: #59554b !important; }
html:root[data-tint="white"][data-frame="night"] .cook-lab .faint { color: #7f7b70 !important; }
html:root[data-tint="white"][data-frame="night"] .cook-lab .btn:not(.primary) { background: #f2f1ef !important; color: #433e33 !important; border-color: #b8b2a3 !important; }
html:root[data-tint="white"][data-frame="night"] .dx-spread { background: linear-gradient(180deg, #464137, #302d25) !important; box-shadow: inset 0 0 0 2px #1f1c17, inset 0 0 0 4px rgba(170, 162, 144, .35), 0 14px 26px rgba(0, 0, 0, .5) !important; }
html:root[data-tint="white"][data-frame="night"] .dx-page { background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(85, 79, 65, .22) 100%),
    linear-gradient(transparent 0 27px, rgba(92, 86, 73, .08) 27px 28px) 0 6px / 100% 28px,
    #d7d3cb !important; color: #2e2c26; }
html:root[data-tint="white"][data-frame="night"] .dx-page.left { box-shadow: inset -18px 0 22px -14px rgba(45, 42, 35, .45), -3px 3px 0 #c2beb4, -6px 6px 0 #aea99e !important; }
html:root[data-tint="white"][data-frame="night"] .dx-page.right { background-color: #dad7d0 !important; box-shadow: inset 18px 0 22px -14px rgba(45, 42, 35, .45), 3px 3px 0 #c2beb4, 6px 6px 0 #aea99e !important; }
html:root[data-tint="white"][data-frame="night"] .dx-spread::after { background: linear-gradient(90deg, transparent, rgba(40, 37, 30, .35) 45%, rgba(40, 37, 30, .45) 50%, rgba(40, 37, 30, .35) 55%, transparent) !important; }
html:root[data-tint="white"][data-frame="night"] .dx-page h3 { color: #353129; }
html:root[data-tint="white"][data-frame="night"] .dx-page .eyebrow { color: #665f4e; }
html:root[data-tint="white"][data-frame="night"] .dx-page :is(.small, .faint) { color: #5a564c !important; }
html:root[data-tint="white"][data-frame="night"] .dx-page .dp-head { border-bottom: 1px solid rgba(92, 86, 73, .35); }
html:root[data-tint="white"][data-frame="night"] .dx-page .dx-it { background: #e8e5e0 !important; color: #2e2c26; box-shadow: 0 0 0 1px rgba(92, 86, 73, .35), 0 2px 0 rgba(92, 86, 73, .2) !important; }
html:root[data-tint="white"][data-frame="night"] .dx-page .dx-it.unknown { border: 1.5px dashed rgba(92, 86, 73, .45) !important; color: #747066; }
html:root[data-tint="white"][data-frame="night"] .dx-page .dx-q { background: rgba(92, 86, 73, .14); color: #615c51; }
html:root[data-tint="white"][data-frame="night"] .dp-no { color: #706a5e; }
html:root[data-tint="white"][data-frame="night"] .dx-page .bn-prog { background: rgba(92, 86, 73, .2); }
html:root[data-tint="white"][data-frame="night"] .dx-page .bn-prog i { background: #665f4e; }
html:root[data-tint="white"][data-frame="night"] .dx-mark { background: color-mix(in srgb, var(--mc) 60%, #2e2c26) !important; color: #f0eeeb !important; }
html:root[data-tint="white"][data-frame="night"] .pouch-body .pb-all { color: #ffffff !important; }
html:root[data-tint="white"][data-frame="night"] .pb-rw { color: #403c32 !important; }
html:root[data-tint="white"][data-frame="night"] .cook-lab .bl-lv { color: #605a4e !important; }
html:root[data-tint="white"][data-frame="night"] .cook-lab .ck-card { color: #2b2821; }
html:root[data-tint="white"][data-frame="night"] body .dx-page .dp-head .eyebrow { color: #565042 !important; }
html:root[data-tint="white"][data-frame="night"] body .dx-page .dp-no { color: #605a4e !important; }
html:root[data-tint="white"][data-frame="night"] .dx-mark { background: color-mix(in srgb, var(--mc) 55%, #1a1814) !important; }
html:root[data-tint="white"][data-frame="night"] .dx-mark.on { background: color-mix(in srgb, var(--mc) 75%, #1a1814) !important; }
html:root[data-tint="white"][data-frame="night"] .cook-lab .bl-lv { color: #433e33 !important; }
html:root[data-tint="white"][data-frame="night"] .cook-lab .ck-parts { color: #59554b !important; }
html:root[data-tint="white"][data-frame="night"] .ck-badge { background: linear-gradient(180deg, #978d77, #776e5b); }
html:root[data-tint="white"]:not([data-frame="night"]) .subtabs.st-shop button.sub-auction { color: #5c5546 !important; }
html:root[data-tint="white"]:not([data-frame="night"]) .subtabs.st-shop button.sub-auction.on { color: #ffffff !important; }
html[data-tint="white"] html:not([data-frame="night"]) #maint-flag { background: #f4f3f1; color: #635d4d; }
html:root[data-tint="white"][data-frame="night"] .ik-tac.lack .ik-e { color: #aba391 !important; }
html:root[data-tint="white"][data-frame="night"] .ik-tac.lack .ik-l { color: #c8c6c0 !important; }
html:root[data-tint="white"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-p { background: color-mix(in srgb, var(--hc, var(--accent)) 14%, #ffffff) !important; color: #252421 !important; }
html:root[data-tint="white"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-p b { color: #161513 !important; }
html:root[data-tint="white"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-p .faint { color: #514f49 !important; }
html:root[data-tint="white"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-clue span { color: #252421; }
/* =========================================================
   별의 서고 · 하양 — 같은 고서 틀(금테·천구 원·산 능선)을 차분한 회색 종이 위에
   ========================================================= */
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) {
  --ridge-w: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='220' viewBox='0 0 1600 220' preserveAspectRatio='none'><path d='M0 220V150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60V220z' fill='%23e2ddd0' opacity='.6'/><path d='M0 220V180l120-40 90 30 140-60 110 50 100-30 130 50 120-40 110 30 140-50 120 40 100-20 120 40 110-30 90 20V220z' fill='%23d6d0c1' opacity='.5'/></svg>");
}
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) body {
  background-color: #f2efe8;
  background-image: var(--grain), var(--ridge-w), var(--astro-n), radial-gradient(80% 60% at 55% 0%, rgba(173, 165, 147, .16), transparent 65%), linear-gradient(180deg, #fbf9f4, #e9e4d9);
}
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) :is(.rail, .statusbar, .tabbar, .hud, .stage > .view) {
  --ink: #27241e; --ink-2: #504a40; --ink-3: #827a6c; --rule: rgba(143, 135, 117, .35);
  --paper: #f4f1ea; --sheet: #fdfcf8; --sheet-2: #eeeae1;
  --accent: #5f5747; --on-accent: #ffffff; --accent-soft: rgba(104, 96, 78, .12);
}
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .rail { background: #fbf9f4; background-image: var(--grain); box-shadow: inset -1px 0 0 rgba(153, 145, 127, .5), inset -5px 0 0 #fbf9f4, inset -6px 0 0 rgba(153, 145, 127, .28), 8px 0 30px rgba(80, 65, 45, .07); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .nav button:hover { background: rgba(133, 125, 107, .08); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .nav button.on { background: rgba(133, 125, 107, .13); box-shadow: inset 0 0 0 1px rgba(133, 125, 107, .5); color: #36312a; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .nav-ico { color: #776d5c !important; box-shadow: inset 0 0 0 1px rgba(133, 125, 107, .4); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .nav-label { color: #7a705f; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .rail-brand { color: #433d33; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .statusbar { background: rgba(240, 235, 225, .92); border-bottom: 1px solid rgba(153, 145, 127, .45); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) :is(.statusbar, .tabbar) .btn { background: rgba(133, 125, 107, .06); border-color: rgba(153, 145, 127, .45); color: var(--ink); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .tabbar { background: rgba(240, 235, 225, .97); border-top: 1px solid rgba(153, 145, 127, .45); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) :is(.hud-in, .hud-mini) { background: rgba(240, 235, 225, .95); border: 1px solid rgba(153, 145, 127, .45); box-shadow: 0 -6px 24px -12px rgba(80, 65, 45, .22); color: var(--ink-2); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .ph-ico { background: radial-gradient(circle, #ffffff 55%, #ece7dc); color: #5f5747; box-shadow: 0 0 0 1px rgba(153, 145, 127, .7), 0 0 0 4px #f4f1ea, 0 0 0 5px rgba(153, 145, 127, .45); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .ph-txt h1 { color: #27241e; } html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .ph-txt h1::before { color: #8e8473; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card, .first-steps) { box-shadow: 0 0 0 1px rgba(153, 145, 127, .5), inset 0 0 0 3px var(--sheet), inset 0 0 0 4px rgba(153, 145, 127, .2), 0 10px 24px -16px rgba(80, 65, 45, .28); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .view :is(.block-head h3, .panel > b, .panel > .row > b) { color: #36312a; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .btn.primary { background: linear-gradient(180deg, #7c7262, #5a5244); border-color: #4a4338; color: #ffffff; box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3px rgba(133, 125, 107, .5); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .chip.on { background: #e8e2d4; border-color: #9c917d; color: #2e2a23; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage > .view > .chips .chip.on, html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage > .view .subtabs .on { background: #6b6252; border-color: #9c917d; color: #ffffff; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) :is(.modal, .pop) { box-shadow: 0 0 0 1px rgba(153, 145, 127, .65), inset 0 0 0 4px var(--sheet), inset 0 0 0 5px rgba(153, 145, 127, .28), 0 24px 60px -18px rgba(70, 55, 35, .3); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .toast { background: #ffffff; color: #27241e; border: 1px solid rgba(153, 145, 127, .55); box-shadow: 0 10px 30px -12px rgba(70, 55, 35, .3); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .home-clock { --hc-bg1: #ffffff; --hc-bg2: #ece7dc; --hc-ink: #27241e; box-shadow: 0 0 0 1px rgba(153, 145, 127, .55), inset 0 0 0 3px #ffffff, inset 0 0 0 4px rgba(153, 145, 127, .22), 0 10px 24px -16px rgba(80, 65, 45, .28) !important; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .home-clock .hc-time { color: #5f5747; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .home-clock .hc-wd { color: color-mix(in srgb, var(--wc) 55%, #2f2b24); text-shadow: none; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .home-clock .hc-wx { background: rgba(133, 125, 107, .08); box-shadow: inset 0 0 0 1px rgba(153, 145, 127, .4); color: #2f2b24; }
/* 어두운 바탕을 쓰는 칸(운세 천막·행사 머리·동굴·숲길)은 밝은 글씨 그대로 */
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) :is(.seer, .evp-hero) { --ink: #f3f1fa; --ink-2: #d4d0e4; --ink-3: #a9a4c0; color: var(--ink); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage.in-mine { background: radial-gradient(ellipse at 20% 0%, rgba(120, 140, 200, .10), transparent 45%), radial-gradient(ellipse at 85% 30%, rgba(170, 120, 220, .08), transparent 40%), linear-gradient(180deg, #16161c, #0e0e12 60%, #0b0b0e) !important; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage.in-trek { background: radial-gradient(ellipse at 20% 0%, rgba(140, 200, 130, .10), transparent 45%), radial-gradient(circle at 50% 120%, rgba(90, 140, 90, .12), transparent 50%), linear-gradient(180deg, #121a15, #0c120e 60%, #090d0a) !important; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage.in-mine > .view, html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage.in-mine .statusbar { --paper: #121216; --sheet: #1c1c22; --sheet-2: #24242c; --rule: #33333d; --ink: #ece6dc; --ink-2: #bdb5a8; --ink-3: #8a8378; --accent: #c9ccd2; --on-accent: #16161c; color: var(--ink); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage.in-trek > .view, html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage.in-trek .statusbar { --paper: #0f1411; --sheet: #18201b; --sheet-2: #1f2a23; --rule: #2c3a31; --ink: #e8efe4; --ink-2: #b4c2b0; --ink-3: #7f8f7c; --accent: #c9d2cc; --on-accent: #121a15; color: var(--ink); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage:is(.in-mine, .in-trek) .statusbar { background: rgba(14, 14, 18, .9) !important; border-bottom-color: rgba(242, 237, 228, .12) !important; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage:is(.in-mine, .in-trek) .view :is(.panel, .block.fold, .wg, .goods, .card) { box-shadow: 0 0 0 1px rgba(242, 237, 228, .12), 0 10px 24px -16px rgba(0, 0, 0, .6); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage:is(.in-mine, .in-trek) .ph-txt h1 { color: #f3f1ea; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .seer-txt h1 { color: #ffffff; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage:is(.in-mine, .in-trek) .btn:not(.primary) { color: var(--ink) !important; background: var(--sheet-2); border-color: var(--rule); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage:is(.in-mine, .in-trek) :is(.hud-in, .hud-mini) { background: rgba(240, 235, 225, .95); border-color: rgba(153, 145, 127, .45); --ink: #27241e; --ink-2: #504a40; --ink-3: #827a6c; --sheet: #fdfcf8; --sheet-2: #eeeae1; color: var(--ink-2); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .hud .purse { background: color-mix(in srgb, #c9a227 12%, #ffffff); color: #27241e; }

html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage.in-mine .view :is(.panel, .block, .wg, .goods, .card, .first-steps, .item, .mine-floor) { --paper: #121216; --sheet: #1c1c22; --sheet-2: #24242c; --rule: #33333d; --ink: #ece6dc; --ink-2: #bdb5a8; --ink-3: #8a8378; background-color: #1c1c22 !important; background-image: none !important; color: var(--ink); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage.in-trek .view :is(.panel, .block, .wg, .goods, .card, .first-steps, .item) { --paper: #0f1411; --sheet: #18201b; --sheet-2: #1f2a23; --rule: #2c3a31; --ink: #e8efe4; --ink-2: #b4c2b0; --ink-3: #7f8f7c; background-color: #18201b !important; background-image: none !important; color: var(--ink); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage:is(.in-mine, .in-trek) .view :is(.block-head h3, .panel > b, .panel > .row > b) { color: #f1ebdf; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .subtabs.st-shop button.sub-auction { color: #7a5a14 !important; background: linear-gradient(135deg, rgba(201, 162, 74, .3), rgba(201, 162, 74, .14)) !important; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .subtabs.st-shop button.sub-auction.on { color: #ffffff !important; background: linear-gradient(135deg, #c9a24a, #9a7428) !important; }
/* 위쪽 줄 아이콘·알약: 노란빛 대신 갈색 */
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) :is(.statusbar, .tabbar) .btn, html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .statusbar :is(.iconbtn, .loc-pill, .pill) { background: rgba(110, 85, 50, .16); border-color: rgba(110, 85, 50, .55); color: #3e2f1c; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .statusbar .ico { color: #5a4228; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .nav button.on { background: rgba(110, 85, 50, .24); box-shadow: inset 0 0 0 1px rgba(110, 85, 50, .6); color: #33271a; }
/* 마법약 조제·비밀의 방은 밝은 스킨에서도 어두운 칸 그대로 */
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .view :is(.brew-lab, .ch-panel), html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .view :is(.brew-lab, .ch-panel) :is(.panel, .block, .wg, .card, .goods, .item) { --paper: #121216 !important; --sheet: #1c1c22 !important; --sheet-2: #24242c !important; --rule: rgba(255, 255, 255, .14) !important; --line: rgba(255, 255, 255, .12) !important; --ink: #ece6dc !important; --ink-2: #bdb5a8 !important; --ink-3: #8a8378 !important; --card: #1a1d1b !important; --text: #ece6dc !important; --muted: #bdb5a8 !important; --faint: #8a8378 !important; --accent: #d4b07a !important; --on-accent: #1f1a12 !important; color: var(--ink); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .view .ch-panel.run { --sheet: #131b17 !important; --sheet-2: #1a241f !important; --ink: #eef2ea !important; --ink-2: #b6c0b4 !important; --ink-3: #808c81 !important; --card: #141c18 !important; --text: #eef2ea !important; --muted: #b6c0b4 !important; --faint: #808c81 !important; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) body .view .panel.panel.brew-lab.brew-lab { background: radial-gradient(circle at 70% 30%, rgba(120, 200, 150, .10), transparent 50%), linear-gradient(170deg, #1c2a24, #121a16) !important; box-shadow: none !important; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) body .view .panel.ch-panel:not(.run) { background: radial-gradient(ellipse at 15% 20%, rgba(63, 154, 90, .18), transparent 55%), linear-gradient(165deg, #142019, #1a1d1b 75%) !important; box-shadow: inset 0 0 0 1px rgba(63, 154, 90, .35) !important; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) body .view .panel.ch-panel.run { background: radial-gradient(ellipse at 15% -10%, rgba(63, 154, 90, .22), transparent 45%), linear-gradient(170deg, #0f1914, #060a08 75%) !important; box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .3), 0 22px 44px -26px rgba(0, 0, 0, .9) !important; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .view :is(.brew-lab, .ch-panel) :is(.panel, .block, .wg, .card, .goods) { background-image: none !important; }
/* 밝은 칸: 비치지 않는 덜 밝은 흰색(z399) */
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) .view :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card, .first-steps, .home-clock):not(.brew-lab):not(.ch-panel) { background-color: #f7f4ed; -webkit-backdrop-filter: none; backdrop-filter: none; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) .view :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card) :is(.panel, .block.fold, .wg, .goods, .card) { background-color: #efebe2; -webkit-backdrop-filter: none; backdrop-filter: none; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) :is(.statusbar, .tabbar) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .rail { background-color: rgba(244, 241, 234, .82); }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .view[data-page=post]::before { content: none !important; display: none !important; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) > .view[data-page=post] { background: transparent !important; }
/* 남은 흰 칸들도 같은 흰색 */
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) .view :is(.sc-btn:not(.sc-fortune), .next, .gb-open, .shop-lines, .temp-box, .fat-bar, .post-tabs, .ev-row, .ev-card, .pot-card, .qb-card, .help-toc, .table-wrap, .deco-it, .deliv, .attr-cell, .quiet-inc, .item, .person, .hall-card, .news-row, .rank-cell, .post-box, .post-compose, .bag-tab, .shop-sec, .first-steps, .fs-stage, .hobby-body, .rr-scene, .inc-head, .auc-sell, .fest-card, .page-tabs, .subtabs, .seg, .set-tabs, .prof-tabs, .chips.page-tabs) { background-color: #f7f4ed !important; }
html:root[data-tint="white"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) .view :is(.pc-it, .pc-open-btn, .attr-cell, .ev-row) { background-color: #f2eee6 !important; }

/* ===== 별의 서고(cool): 자동 생성 ===== */
:root[data-tint="cool"][data-skin="parchment"] { --paper: #cfd1d4; --sheet: #e8e9eb; --sheet-2: #d7d9dc; --rule: #b0b3b7; --ink: #222324; --ink-2: #45474a; --ink-3: #6e7175; --warn: #494d53; --warn-ink: #494d53; --accent: #3e4247; --accent-soft: rgba(62, 66, 71, .1); --soft: inset 0 1px 0 rgba(246, 246, 247, .75), 0 1px 1px rgba(52, 55, 60, .10), 0 6px 16px -8px rgba(52, 55, 60, .28); --lift: inset 0 1px 0 rgba(246, 246, 247, .8), 0 2px 3px rgba(52, 55, 60, .12), 0 22px 44px -16px rgba(39, 42, 45, .45); --edge: rgba(72, 76, 82, .18); --gilt: #70767e; }
:root[data-tint="cool"][data-skin="parchment"] .h-hufflepuff { --h-l: #3e4248; }
:root[data-tint="cool"][data-skin="parchment"] body { background-image: var(--grain), var(--fiber),
    radial-gradient(120% 90% at 50% 0%, rgba(242, 242, 243, .55), transparent 60%),
    radial-gradient(140% 120% at 50% 100%, var(--edge), transparent 55%); }
:root[data-tint="cool"][data-skin="parchment"] :is(.modal, .pop) { background-image: var(--grain), linear-gradient(180deg, rgba(244, 245, 246, .35), transparent 30%); }
:root[data-tint="cool"][data-skin="parchment"] .rail { background-color: color-mix(in srgb, var(--paper) 88%, #484c52); }
:root[data-tint="cool"][data-skin="parchment"] #view > .block-head:first-child::after { background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--gilt) 70%, transparent) 12%, color-mix(in srgb, var(--gilt) 70%, transparent) 46%, transparent 46.5%, transparent 53.5%, color-mix(in srgb, var(--gilt) 70%, transparent) 54%, color-mix(in srgb, var(--gilt) 70%, transparent) 88%, transparent) center / 100% 1px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='9' viewBox='0 0 40 9'><path d='M20 0l4 4.5-4 4.5-4-4.5z' fill='%2370767e'/><circle cx='10' cy='4.5' r='1.4' fill='%2370767e'/><circle cx='30' cy='4.5' r='1.4' fill='%2370767e'/></svg>") center / 40px 9px no-repeat; }
:root[data-tint="cool"][data-skin="parchment"] .btn { box-shadow: inset 0 1px 0 rgba(246, 246, 247, .6), 0 1px 1px rgba(52, 55, 60, .1); }
:root[data-tint="cool"][data-skin="parchment"] .btn.primary { border-color: color-mix(in srgb, var(--accent) 80%, #000000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(32, 34, 36, .35), 0 3px 8px -3px color-mix(in srgb, var(--accent) 60%, transparent); }
:root[data-tint="cool"][data-skin="parchment"] :is(input[type=text], input[type=search], input[type=number], input[type=url], input[type=password], input:not([type]), select, textarea) { background-color: color-mix(in srgb, var(--sheet) 70%, #ffffff 12%); box-shadow: inset 0 1px 2px rgba(52, 55, 60, .08); }
:root[data-tint="cool"][data-skin="parchment"] .toast { background-color: #222324; color: #e3e5e7; border: 1px solid #3e4044; box-shadow: 0 10px 30px -10px rgba(16, 17, 18, .6); }
:root[data-tint="cool"][data-skin="parchment"] .home-clock { background: var(--grain), radial-gradient(90% 140% at 92% 20%, rgba(183, 187, 192, .45), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); box-shadow: var(--soft), inset 0 0 0 1px var(--rule), inset 0 0 0 4px rgba(241, 241, 242, .55), inset 0 0 0 5px color-mix(in srgb, var(--gilt) 45%, transparent); }
:root[data-tint="cool"][data-skin="parchment"] .home-clock.sky-dusk { background: var(--grain), radial-gradient(90% 140% at 92% 30%, rgba(159, 164, 171, .35), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); }
:root[data-tint="cool"][data-skin="parchment"] .home-clock.sky-night { background: var(--grain), radial-gradient(70% 120% at 90% 20%, rgba(204, 207, 211, .14), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); }
html:root[data-tint="cool"][data-skin="parchment"] .shell[class*="h-"] { --accent: #3e4247; --on-accent: #f4f4f5; --accent-soft: rgba(62, 66, 71, .1); }
html:root[data-tint="cool"][data-frame="night"] .shell[class*="h-"] { --accent: #585d63; --on-accent: #f4f4f5; --accent-soft: rgba(88, 93, 99, .12); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) > .view[data-page=post] { background-image: var(--grain), var(--fiber), radial-gradient(130% 100% at 50% 40%, transparent 62%, rgba(72, 76, 82, .16) 100%) !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) { --paper: #dfe1e3; --sheet: #f1f2f3; --sheet-2: #dfe1e3; --rule: #bec0c4; --ink: #202123; --ink-2: #454749; --ink-3: #6d7073; --accent: #585d63; --on-accent: #f4f4f5; --accent-soft: rgba(88, 93, 99, .12); --gilt: #777c83; --gold: #989da3; --gold-2: #bec1c6; --dk-ink: #e2e3e5; --dk-ink-2: #c1c3c6; --dk-ink-3: #999b9d; --astro-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100' viewBox='0 0 1100 1100'><g fill='none' stroke='%23989da3' stroke-width='1.2' opacity='.15'><circle cx='550' cy='550' r='520'/><circle cx='550' cy='550' r='490'/><circle cx='550' cy='550' r='380' stroke-dasharray='2 10'/><circle cx='550' cy='550' r='250'/><path d='M550 30v1040M30 550h1040M182 182l736 736M918 182L182 918'/><path d='M550 60 C 760 300 760 800 550 1040 M550 60 C 340 300 340 800 550 1040' opacity='.6'/><path d='M140 360 L 420 250 L 700 420 L 960 300' stroke-width='.8'/><path d='M200 760 L 480 820 L 760 700 L 900 780' stroke-width='.8'/></g><g fill='%23bec1c6' opacity='.45'><circle cx='420' cy='250' r='2.2'/><circle cx='700' cy='420' r='2.6'/><circle cx='960' cy='300' r='2'/><circle cx='140' cy='360' r='2'/><circle cx='480' cy='820' r='2.4'/><circle cx='760' cy='700' r='2'/></g></svg>"); --ridge-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='220' viewBox='0 0 1600 220' preserveAspectRatio='none'><path d='M0 220V150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60V220z' fill='%23151516' opacity='.75'/><path d='M0 150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60' fill='none' stroke='%23989da3' stroke-width='1.2' opacity='.35'/></svg>"); --cn-tl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23777c83' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23777c83'/></svg>"); --cn-tr: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(40 0) scale(-1 1)'><g fill='none' stroke='%23777c83' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23777c83'/></g></svg>"); --spark-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'><g fill='%23989da3'><path d='M12 3l1.3 3.7L17 8l-3.7 1.3L12 13l-1.3-3.7L7 8l3.7-1.3z'/><path d='M32 1l1.8 5.2L39 8l-5.2 1.8L32 15l-1.8-5.2L25 8l5.2-1.8z'/><path d='M52 3l1.3 3.7L57 8l-3.7 1.3L52 13l-1.3-3.7L47 8l3.7-1.3z'/></g></svg>"); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .shell[class*="h-"] { --accent: #585d63; --on-accent: #f4f4f5; --accent-soft: rgba(88, 93, 99, .12); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) body { background-color: #222223; background-image: var(--grain), var(--ridge-n), var(--astro-n), radial-gradient(80% 60% at 55% 0%, rgba(98, 100, 102, .28), transparent 65%), linear-gradient(180deg, #29292a, #1c1c1c); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) :is(.rail, .statusbar, .tabbar, .hud, .stage > .view) { --ink: #e2e3e5; --ink-2: #c1c3c6; --ink-3: #999b9d; --rule: rgba(152, 157, 163, .38); --paper: #202021; --sheet: #2c2c2d; --sheet-2: #353536; --accent: #a2a6ac; --on-accent: #181819; --accent-soft: rgba(162, 166, 172, .15); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block, .wg, .goods, .bd-card, .inc-card, .letter, .card, .gb-open, .gboard, .first-steps, .table-wrap, .item, .person, .next, .sc-btn, .fs-stage, .shop-sec, .hero, .bag-tab, .bn-shelf, .dx-spread, .hobby-body, .broom-shop, .qd-bracket, .page-tabs .on, .modal, .pop, .help-toc, .rank-cell, .post-box, .post-compose, .hall-card, .ev-row, .fest-card, .news-row, .rr-scene, .inc-head, .auc-sell), html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) :is(.modal, .pop, #chat) { --ink: #202123; --ink-2: #454749; --ink-3: #6d7073; --rule: #bec0c4; --paper: #dfe1e3; --sheet: #f1f2f3; --sheet-2: #dfe1e3; --accent: #585d63; --on-accent: #f4f4f5; --accent-soft: rgba(88, 93, 99, .12); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card, .first-steps) { box-shadow: 0 0 0 1px rgba(119, 124, 131, .6), inset 0 0 0 3px var(--sheet), inset 0 0 0 4px rgba(119, 124, 131, .22), 0 10px 26px -14px rgba(0, 0, 0, .7); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block.fold, .gb-open, .wg, .goods, .bd-card, .inc-card, .letter, .card) :is(.panel, .block.fold, .wg, .card) { box-shadow: inset 0 0 0 1px rgba(119, 124, 131, .25) !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .view :is(.block-head h3, .panel > b, .panel > .row > b) { color: #35383d; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .rail { background: #1c1c1c; box-shadow: inset -1px 0 0 rgba(152, 157, 163, .55), inset -5px 0 0 #1c1c1c, inset -6px 0 0 rgba(152, 157, 163, .3), 8px 0 30px rgba(0, 0, 0, .45); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .nav button:hover { background: rgba(152, 157, 163, .1); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .nav button.on { background: rgba(152, 157, 163, .18); box-shadow: inset 0 0 0 1px rgba(152, 157, 163, .55); color: #c8cbd0; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .nav-ico { color: #989da3 !important; box-shadow: inset 0 0 0 1px rgba(152, 157, 163, .4); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .nav-label { color: #989da3; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .rail-brand { color: #bec1c6; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .statusbar { background: rgba(28, 28, 28, .88); border-bottom: 1px solid rgba(152, 157, 163, .45); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) :is(.statusbar, .tabbar) .btn { background: rgba(231, 232, 234, .04); border-color: rgba(152, 157, 163, .4); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .tabbar { background: rgba(28, 28, 28, .96); border-top: 1px solid rgba(152, 157, 163, .45); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .hud-in { background: rgba(28, 28, 28, .93); border: 1px solid rgba(152, 157, 163, .45); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .hud-mini { background: rgba(28, 28, 28, .93); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .page-head::after { background: linear-gradient(90deg, transparent, rgba(152, 157, 163, .7) 10%, rgba(152, 157, 163, .7) 44%, transparent 44.5%, transparent 55.5%, rgba(152, 157, 163, .7) 56%, rgba(152, 157, 163, .7) 90%, transparent) center / 100% 1px no-repeat, var(--spark-n) center / 64px 14px no-repeat; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .ph-ico { background: radial-gradient(circle, #2f2f30 55%, #202021); color: #bec1c6; box-shadow: 0 0 0 1px rgba(152, 157, 163, .7), 0 0 0 4px #202021, 0 0 0 5px rgba(152, 157, 163, .45); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .ph-txt h1 { color: #e4e5e7; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .ph-txt h1::before { color: #989da3; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .btn.primary { background: linear-gradient(180deg, #353536, #222223); border-color: #565b62; color: #c8cbd0; box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3px rgba(119, 124, 131, .6); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .btn:not(.primary):not(.quiet) { border-color: color-mix(in srgb, #777c83 55%, transparent); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .chip.on { background: #2b2b2b; border-color: #565b62; color: #c8cbd0; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage > .view > .chips .chip.on, html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage > .view .subtabs .on { background: #989da3; border-color: #bec1c6; color: #181819; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) :is(.modal, .pop) { box-shadow: 0 0 0 1px rgba(119, 124, 131, .7), inset 0 0 0 4px var(--sheet), inset 0 0 0 5px rgba(119, 124, 131, .3), 0 24px 60px -18px rgba(0, 0, 0, .6); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .toast { background: #202021; color: #e2e3e5; border: 1px solid rgba(152, 157, 163, .55); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) #chat { border-left: 1px solid rgba(119, 124, 131, .6); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .home-clock { background: var(--grain), radial-gradient(90% 140% at 92% 20%, rgba(183, 187, 192, .18), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); box-shadow: 0 0 0 1px rgba(152, 157, 163, .7), inset 0 0 0 4px #282829, inset 0 0 0 5px rgba(152, 157, 163, .35); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .home-clock .hc-time { color: #bec1c6; }
html:root[data-tint="cool"][data-frame="night"] .pouch { --cloth: #c6c9cd; }
html:root[data-tint="cool"][data-frame="night"] .pt-neck, html:root[data-tint="cool"][data-frame="night"] .pt-frill { fill: #b5b9be; stroke: #62656a; }
html:root[data-tint="cool"][data-frame="night"] .pouch-body { background:
    repeating-linear-gradient(0deg, rgba(78, 82, 87, .06) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(78, 82, 87, .06) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 30%, #d7d9dc, #b0b4b9 75%, #999da2) !important; border: 1.5px solid #6c7076 !important; box-shadow: inset 0 -10px 18px rgba(65, 69, 75, .22), 0 6px 14px rgba(0, 0, 0, .35) !important; }
html:root[data-tint="cool"][data-frame="night"] .pouch-body::before { border-top: 1.5px dashed rgba(75, 79, 85, .45); }
html:root[data-tint="cool"][data-frame="night"] .pouch-body .pb-head b { color: #282a2c; }
html:root[data-tint="cool"][data-frame="night"] .pouch-body :is(.small, .faint, .pb-hint) { color: #505256 !important; }
html:root[data-tint="cool"][data-frame="night"] .pouch-body .slot span, html:root[data-tint="cool"][data-frame="night"] .pouch-body .slots span { color: #343638; }
html:root[data-tint="cool"][data-frame="night"] .pb-rw { background: #f2f2f3; color: #40444a; box-shadow: 0 0 0 1px rgba(78, 82, 87, .3); }
html:root[data-tint="cool"][data-frame="night"] body .view .panel.panel.cook-lab.cook-lab { background: radial-gradient(circle at 75% 25%, rgba(177, 182, 188, .28), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect width='28' height='28' fill='%23edeeef'/%3E%3Cpath d='M0 .5H28M.5 0V28' stroke='%23d5d7da' stroke-width='1'/%3E%3C/svg%3E") !important; border: 1px solid #babec3 !important; }
html:root[data-tint="cool"][data-frame="night"] .cook-lab :is(.trek-title, h2, h3) { color: #3e4248 !important; }
html:root[data-tint="cool"][data-frame="night"] .cook-lab .eyebrow { color: #636971 !important; }
html:root[data-tint="cool"][data-frame="night"] .cook-lab :is(.small, .muted) { color: #4f5155 !important; }
html:root[data-tint="cool"][data-frame="night"] .cook-lab .faint { color: #74777b !important; }
html:root[data-tint="cool"][data-frame="night"] .cook-lab .btn:not(.primary) { background: #eff0f2 !important; color: #373a3f !important; border-color: #a8adb3 !important; }
html:root[data-tint="cool"][data-frame="night"] .dx-spread { background: linear-gradient(180deg, #3b3e42, #282a2d) !important; box-shadow: inset 0 0 0 2px #191b1d, inset 0 0 0 4px rgba(150, 156, 164, .35), 0 14px 26px rgba(0, 0, 0, .5) !important; }
html:root[data-tint="cool"][data-frame="night"] .dx-page { background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(70, 74, 80, .22) 100%),
    linear-gradient(transparent 0 27px, rgba(78, 82, 87, .08) 27px 28px) 0 6px / 100% 28px,
    #ced0d4 !important; color: #282a2c; }
html:root[data-tint="cool"][data-frame="night"] .dx-page.left { box-shadow: inset -18px 0 22px -14px rgba(37, 40, 43, .45), -3px 3px 0 #b8babe, -6px 6px 0 #a2a5aa !important; }
html:root[data-tint="cool"][data-frame="night"] .dx-page.right { background-color: #d2d5d8 !important; box-shadow: inset 18px 0 22px -14px rgba(37, 40, 43, .45), 3px 3px 0 #b8babe, 6px 6px 0 #a2a5aa !important; }
html:root[data-tint="cool"][data-frame="night"] .dx-spread::after { background: linear-gradient(90deg, transparent, rgba(33, 35, 37, .35) 45%, rgba(33, 35, 37, .45) 50%, rgba(33, 35, 37, .35) 55%, transparent) !important; }
html:root[data-tint="cool"][data-frame="night"] .dx-page h3 { color: #2c2e32; }
html:root[data-tint="cool"][data-frame="night"] .dx-page .eyebrow { color: #545960; }
html:root[data-tint="cool"][data-frame="night"] .dx-page :is(.small, .faint) { color: #505256 !important; }
html:root[data-tint="cool"][data-frame="night"] .dx-page .dp-head { border-bottom: 1px solid rgba(78, 82, 87, .35); }
html:root[data-tint="cool"][data-frame="night"] .dx-page .dx-it { background: #e2e4e6 !important; color: #282a2c; box-shadow: 0 0 0 1px rgba(78, 82, 87, .35), 0 2px 0 rgba(78, 82, 87, .2) !important; }
html:root[data-tint="cool"][data-frame="night"] .dx-page .dx-it.unknown { border: 1.5px dashed rgba(78, 82, 87, .45) !important; color: #6a6c70; }
html:root[data-tint="cool"][data-frame="night"] .dx-page .dx-q { background: rgba(78, 82, 87, .14); color: #55585d; }
html:root[data-tint="cool"][data-frame="night"] .dp-no { color: #63666b; }
html:root[data-tint="cool"][data-frame="night"] .dx-page .bn-prog { background: rgba(78, 82, 87, .2); }
html:root[data-tint="cool"][data-frame="night"] .dx-page .bn-prog i { background: #545960; }
html:root[data-tint="cool"][data-frame="night"] .dx-mark { background: color-mix(in srgb, var(--mc) 60%, #282a2c) !important; color: #ecedef !important; }
html:root[data-tint="cool"][data-frame="night"] .pouch-body .pb-all { color: #ffffff !important; }
html:root[data-tint="cool"][data-frame="night"] .pb-rw { color: #35383d !important; }
html:root[data-tint="cool"][data-frame="night"] .cook-lab .bl-lv { color: #53565b !important; }
html:root[data-tint="cool"][data-frame="night"] .cook-lab .ck-card { color: #242628; }
html:root[data-tint="cool"][data-frame="night"] body .dx-page .dp-head .eyebrow { color: #474b51 !important; }
html:root[data-tint="cool"][data-frame="night"] body .dx-page .dp-no { color: #53565b !important; }
html:root[data-tint="cool"][data-frame="night"] .dx-mark { background: color-mix(in srgb, var(--mc) 55%, #151719) !important; }
html:root[data-tint="cool"][data-frame="night"] .dx-mark.on { background: color-mix(in srgb, var(--mc) 75%, #151719) !important; }
html:root[data-tint="cool"][data-frame="night"] .cook-lab .bl-lv { color: #373a3f !important; }
html:root[data-tint="cool"][data-frame="night"] .cook-lab .ck-parts { color: #4f5155 !important; }
html:root[data-tint="cool"][data-frame="night"] .ck-badge { background: linear-gradient(180deg, #7f868f, #626870); }
html:root[data-tint="cool"]:not([data-frame="night"]) .subtabs.st-shop button.sub-auction { color: #4b5057 !important; }
html:root[data-tint="cool"]:not([data-frame="night"]) .subtabs.st-shop button.sub-auction.on { color: #ffffff !important; }
html[data-tint="cool"] html:not([data-frame="night"]) #maint-flag { background: #f2f2f3; color: #52575e; }
html:root[data-tint="cool"][data-frame="night"] .ik-tac.lack .ik-e { color: #979da5 !important; }
html:root[data-tint="cool"][data-frame="night"] .ik-tac.lack .ik-l { color: #c2c4c6 !important; }
html:root[data-tint="cool"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-p { background: color-mix(in srgb, var(--hc, var(--accent)) 14%, #ffffff) !important; color: #222324 !important; }
html:root[data-tint="cool"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-p b { color: #141415 !important; }
html:root[data-tint="cool"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-p .faint { color: #4b4d4f !important; }
html:root[data-tint="cool"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-clue span { color: #222324; }
/* =========================================================
   서고 D(차가운 회색) — 같은 고서 틀(금테·천구 원·산 능선)을 차분한 회색 종이 위에
   ========================================================= */
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) {
  --ridge-w: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='220' viewBox='0 0 1600 220' preserveAspectRatio='none'><path d='M0 220V150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60V220z' fill='%23dde1e6' opacity='.6'/><path d='M0 220V180l120-40 90 30 140-60 110 50 100-30 130 50 120-40 110 30 140-50 120 40 100-20 120 40 110-30 90 20V220z' fill='%23cfd5dc' opacity='.5'/></svg>");
}
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) body {
  background-color: #f1f2f4;
  background-image: var(--grain), var(--ridge-w), var(--astro-n), radial-gradient(80% 60% at 55% 0%, rgba(150, 160, 175, .16), transparent 65%), linear-gradient(180deg, #fafbfc, #e8ebef);
}
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) :is(.rail, .statusbar, .tabbar, .hud, .stage > .view) {
  --ink: #22262b; --ink-2: #4b525b; --ink-3: #7b828c; --rule: rgba(120, 130, 145, .35);
  --paper: #f3f4f6; --sheet: #fdfdfe; --sheet-2: #eef0f3;
  --accent: #4f5b6b; --on-accent: #ffffff; --accent-soft: rgba(79, 91, 107, .12);
}
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .rail { background: #fafbfc; background-image: var(--grain); box-shadow: inset -1px 0 0 rgba(130, 140, 155, .5), inset -5px 0 0 #fafbfc, inset -6px 0 0 rgba(130, 140, 155, .28), 8px 0 30px rgba(60, 70, 85, .07); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .nav button:hover { background: rgba(110, 120, 135, .08); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .nav button.on { background: rgba(110, 120, 135, .13); box-shadow: inset 0 0 0 1px rgba(110, 120, 135, .5); color: #2f3640; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .nav-ico { color: #66707c !important; box-shadow: inset 0 0 0 1px rgba(110, 120, 135, .4); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .nav-label { color: #6b7480; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .rail-brand { color: #3c444e; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .statusbar { background: rgba(250, 251, 252, .92); border-bottom: 1px solid rgba(130, 140, 155, .45); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) :is(.statusbar, .tabbar) .btn { background: rgba(110, 120, 135, .06); border-color: rgba(130, 140, 155, .45); color: var(--ink); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .tabbar { background: rgba(250, 251, 252, .97); border-top: 1px solid rgba(130, 140, 155, .45); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) :is(.hud-in, .hud-mini) { background: rgba(250, 251, 252, .95); border: 1px solid rgba(130, 140, 155, .45); box-shadow: 0 -6px 24px -12px rgba(60, 70, 85, .22); color: var(--ink-2); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .ph-ico { background: radial-gradient(circle, #ffffff 55%, #eceff3); color: #4f5b6b; box-shadow: 0 0 0 1px rgba(130, 140, 155, .7), 0 0 0 4px #f3f4f6, 0 0 0 5px rgba(130, 140, 155, .45); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .ph-txt h1 { color: #22262b; } html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .ph-txt h1::before { color: #7d8794; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card, .first-steps) { box-shadow: 0 0 0 1px rgba(130, 140, 155, .5), inset 0 0 0 3px var(--sheet), inset 0 0 0 4px rgba(130, 140, 155, .2), 0 10px 24px -16px rgba(60, 70, 85, .28); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .view :is(.block-head h3, .panel > b, .panel > .row > b) { color: #2f3640; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .btn.primary { background: linear-gradient(180deg, #6b7684, #4c5664); border-color: #3f4855; color: #ffffff; box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3px rgba(110, 120, 135, .5); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .chip.on { background: #e3e7ec; border-color: #8a94a2; color: #2a3038; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage > .view > .chips .chip.on, html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage > .view .subtabs .on { background: #5d6876; border-color: #8a94a2; color: #ffffff; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) :is(.modal, .pop) { box-shadow: 0 0 0 1px rgba(130, 140, 155, .65), inset 0 0 0 4px var(--sheet), inset 0 0 0 5px rgba(130, 140, 155, .28), 0 24px 60px -18px rgba(40, 50, 65, .3); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .toast { background: #ffffff; color: #22262b; border: 1px solid rgba(130, 140, 155, .55); box-shadow: 0 10px 30px -12px rgba(40, 50, 65, .3); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .home-clock { --hc-bg1: #ffffff; --hc-bg2: #eceff3; --hc-ink: #22262b; box-shadow: 0 0 0 1px rgba(130, 140, 155, .55), inset 0 0 0 3px #ffffff, inset 0 0 0 4px rgba(130, 140, 155, .22), 0 10px 24px -16px rgba(60, 70, 85, .28) !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .home-clock .hc-time { color: #4f5b6b; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .home-clock .hc-wd { color: color-mix(in srgb, var(--wc) 55%, #2a2f36); text-shadow: none; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .home-clock .hc-wx { background: rgba(110, 120, 135, .08); box-shadow: inset 0 0 0 1px rgba(130, 140, 155, .4); color: #2a2f36; }
/* 어두운 바탕을 쓰는 칸(운세 천막·행사 머리·동굴·숲길)은 밝은 글씨 그대로 */
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) :is(.seer, .evp-hero) { --ink: #f3f1fa; --ink-2: #d4d0e4; --ink-3: #a9a4c0; color: var(--ink); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage.in-mine { background: radial-gradient(ellipse at 20% 0%, rgba(120, 140, 200, .10), transparent 45%), radial-gradient(ellipse at 85% 30%, rgba(170, 120, 220, .08), transparent 40%), linear-gradient(180deg, #16161c, #0e0e12 60%, #0b0b0e) !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage.in-trek { background: radial-gradient(ellipse at 20% 0%, rgba(140, 200, 130, .10), transparent 45%), radial-gradient(circle at 50% 120%, rgba(90, 140, 90, .12), transparent 50%), linear-gradient(180deg, #121a15, #0c120e 60%, #090d0a) !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage.in-mine > .view, html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage.in-mine .statusbar { --paper: #121216; --sheet: #1c1c22; --sheet-2: #24242c; --rule: #33333d; --ink: #ece6dc; --ink-2: #bdb5a8; --ink-3: #8a8378; --accent: #c9ccd2; --on-accent: #16161c; color: var(--ink); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage.in-trek > .view, html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage.in-trek .statusbar { --paper: #0f1411; --sheet: #18201b; --sheet-2: #1f2a23; --rule: #2c3a31; --ink: #e8efe4; --ink-2: #b4c2b0; --ink-3: #7f8f7c; --accent: #c9d2cc; --on-accent: #121a15; color: var(--ink); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:is(.in-mine, .in-trek) .statusbar { background: rgba(14, 14, 18, .9) !important; border-bottom-color: rgba(250, 251, 252, .12) !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:is(.in-mine, .in-trek) .view :is(.panel, .block.fold, .wg, .goods, .card) { box-shadow: 0 0 0 1px rgba(250, 251, 252, .12), 0 10px 24px -16px rgba(0, 0, 0, .6); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:is(.in-mine, .in-trek) .ph-txt h1 { color: #f3f1ea; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .seer-txt h1 { color: #ffffff; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:is(.in-mine, .in-trek) .btn:not(.primary) { color: var(--ink) !important; background: var(--sheet-2); border-color: var(--rule); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:is(.in-mine, .in-trek) :is(.hud-in, .hud-mini) { background: rgba(250, 251, 252, .95); border-color: rgba(130, 140, 155, .45); --ink: #22262b; --ink-2: #4b525b; --ink-3: #7b828c; --sheet: #fdfdfe; --sheet-2: #eef0f3; color: var(--ink-2); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .hud .purse { background: color-mix(in srgb, #c9a227 12%, #ffffff); color: #22262b; }

html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage.in-mine .view :is(.panel, .block, .wg, .goods, .card, .first-steps, .item, .mine-floor) { --paper: #121216; --sheet: #1c1c22; --sheet-2: #24242c; --rule: #33333d; --ink: #ece6dc; --ink-2: #bdb5a8; --ink-3: #8a8378; background-color: #1c1c22 !important; background-image: none !important; color: var(--ink); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage.in-trek .view :is(.panel, .block, .wg, .goods, .card, .first-steps, .item) { --paper: #0f1411; --sheet: #18201b; --sheet-2: #1f2a23; --rule: #2c3a31; --ink: #e8efe4; --ink-2: #b4c2b0; --ink-3: #7f8f7c; background-color: #18201b !important; background-image: none !important; color: var(--ink); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:is(.in-mine, .in-trek) .view :is(.block-head h3, .panel > b, .panel > .row > b) { color: #f1ebdf; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .subtabs.st-shop button.sub-auction { color: #7a5a14 !important; background: linear-gradient(135deg, rgba(201, 162, 74, .3), rgba(201, 162, 74, .14)) !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .subtabs.st-shop button.sub-auction.on { color: #ffffff !important; background: linear-gradient(135deg, #c9a24a, #9a7428) !important; }
/* 위쪽 줄 아이콘·알약: 노란빛 대신 갈색 */
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) :is(.statusbar, .tabbar) .btn, html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .statusbar :is(.iconbtn, .loc-pill, .pill) { background: rgba(85, 98, 118, .16); border-color: rgba(85, 98, 118, .55); color: #2a3340; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .statusbar .ico { color: #4a5666; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .nav button.on { background: rgba(85, 98, 118, .24); box-shadow: inset 0 0 0 1px rgba(85, 98, 118, .6); color: #26303c; }
/* 마법약 조제·비밀의 방은 밝은 스킨에서도 어두운 칸 그대로 */
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .view :is(.brew-lab, .ch-panel), html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .view :is(.brew-lab, .ch-panel) :is(.panel, .block, .wg, .card, .goods, .item) { --paper: #121216 !important; --sheet: #1c1c22 !important; --sheet-2: #24242c !important; --rule: rgba(255, 255, 255, .14) !important; --line: rgba(255, 255, 255, .12) !important; --ink: #ece6dc !important; --ink-2: #bdb5a8 !important; --ink-3: #8a8378 !important; --card: #1a1d1b !important; --text: #ece6dc !important; --muted: #bdb5a8 !important; --faint: #8a8378 !important; --accent: #d4b07a !important; --on-accent: #1f1a12 !important; color: var(--ink); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .view .ch-panel.run { --sheet: #131b17 !important; --sheet-2: #1a241f !important; --ink: #eef2ea !important; --ink-2: #b6c0b4 !important; --ink-3: #808c81 !important; --card: #141c18 !important; --text: #eef2ea !important; --muted: #b6c0b4 !important; --faint: #808c81 !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) body .view .panel.panel.brew-lab.brew-lab { background: radial-gradient(circle at 70% 30%, rgba(120, 200, 150, .10), transparent 50%), linear-gradient(170deg, #1c2a24, #121a16) !important; box-shadow: none !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) body .view .panel.ch-panel:not(.run) { background: radial-gradient(ellipse at 15% 20%, rgba(63, 154, 90, .18), transparent 55%), linear-gradient(165deg, #142019, #1a1d1b 75%) !important; box-shadow: inset 0 0 0 1px rgba(63, 154, 90, .35) !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) body .view .panel.ch-panel.run { background: radial-gradient(ellipse at 15% -10%, rgba(63, 154, 90, .22), transparent 45%), linear-gradient(170deg, #0f1914, #060a08 75%) !important; box-shadow: inset 0 0 0 1px rgba(111, 208, 154, .3), 0 22px 44px -26px rgba(0, 0, 0, .9) !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .view :is(.brew-lab, .ch-panel) :is(.panel, .block, .wg, .card, .goods) { background-image: none !important; }
/* 밝은 칸은 살짝 비치게: 뒤의 천구 원·산 능선이 은은하게 보이도록 */
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) .view :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card, .first-steps, .home-clock):not(.brew-lab):not(.ch-panel) { background-color: rgba(253, 253, 254, .5); -webkit-backdrop-filter: blur(5px) saturate(1.05); backdrop-filter: blur(5px) saturate(1.05); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) .view :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card) :is(.panel, .block.fold, .wg, .goods, .card) { background-color: rgba(243, 244, 246, .45); -webkit-backdrop-filter: none; backdrop-filter: none; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) :is(.statusbar, .tabbar) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .rail { background-color: rgba(243, 244, 246, .82); }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .view[data-page=post]::before { content: none !important; display: none !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) > .view[data-page=post] { background: transparent !important; }
/* 남은 흰 칸들도 반투명 */
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) .view :is(.sc-btn:not(.sc-fortune), .next, .gb-open, .shop-lines, .temp-box, .fat-bar, .post-tabs, .ev-row, .ev-card, .pot-card, .qb-card, .help-toc, .table-wrap, .deco-it, .deliv, .attr-cell, .quiet-inc, .item, .person, .hall-card, .news-row, .rank-cell, .post-box, .post-compose, .bag-tab, .shop-sec, .first-steps, .fs-stage, .hobby-body, .rr-scene, .inc-head, .auc-sell, .fest-card, .page-tabs, .subtabs, .seg, .set-tabs, .prof-tabs, .chips.page-tabs) { background-color: rgba(253, 253, 254, .5) !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) .view :is(.pc-it, .pc-open-btn, .attr-cell, .ev-row) { background-color: rgba(253, 253, 254, .4) !important; }

/* 서고 D: 칸을 서고 C처럼 비치지 않는 창백한 흰색으로(z427) */
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) .view :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card, .first-steps, .home-clock):not(.brew-lab):not(.ch-panel) { background-color: #f2f4f6; -webkit-backdrop-filter: none; backdrop-filter: none; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) .view :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card) :is(.panel, .block.fold, .wg, .goods, .card) { background-color: #e9ecef; -webkit-backdrop-filter: none; backdrop-filter: none; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) .view :is(.sc-btn:not(.sc-fortune), .next, .gb-open, .shop-lines, .temp-box, .fat-bar, .post-tabs, .ev-row, .ev-card, .pot-card, .qb-card, .help-toc, .table-wrap, .deco-it, .deliv, .attr-cell, .quiet-inc, .item, .person, .hall-card, .news-row, .rank-cell, .post-box, .post-compose, .bag-tab, .shop-sec, .first-steps, .fs-stage, .hobby-body, .rr-scene, .inc-head, .auc-sell, .fest-card, .page-tabs, .subtabs, .seg, .set-tabs, .prof-tabs, .chips.page-tabs) { background-color: #f2f4f6 !important; }
html:root[data-tint="cool"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) .view :is(.pc-it, .pc-open-btn, .attr-cell, .ev-row) { background-color: #edf0f3 !important; }

/* ===== 서고 E(창백한 양피지 · 반전): 자동 생성 ===== */
:root[data-tint="parch"][data-theme="dark"] { --paper: #bec1d0; --sheet: #bec2cf; --sheet-2: #bec2cf; --rule: #d1bfa1; --ink: #4b422f; --ink-2: #735e39; --ink-3: #ac8d57; --soft: 0 1px 2px rgba(238, 232, 221, .25); --warn: #a07822; --lift: 0 10px 30px rgba(238, 232, 221, .4); --accent: #a07822; --on-accent: #e4d2aa; --accent-soft: rgba(160, 120, 34, .12); }
:root[data-tint="parch"][data-theme="dark"] { --map-paper: #d4cbba; --map-paper-2: #d5cbb9; --map-ink: #604d1a; --map-faint: #968059; }
:root[data-tint="parch"][data-theme="dark"] { --g-day: #af7a1b; --g-stuff: #38814a; --g-me: #2d1268; --g-people: #143f76; --g-guide: #78623b; --g-admin: #882813; }
:root[data-tint="parch"][data-theme="dark"] .shell.themed { --accent: color-mix(in srgb, var(--theme, #846c41) 72%, #221c11); --accent-soft: color-mix(in srgb, var(--theme, #846c41) 16%, transparent); --on-accent: #d0cabe; --btn-bg: color-mix(in srgb, var(--theme, #846c41) 40%, #57472b); --btn-on: #d0cabe; }
:root[data-tint="parch"][data-theme="dark"] { --mt-grass: #ccd3bb; --mt-forest: #c9d5b9; --mt-tree: #c6d4b4; --mt-tree-l: #c1cfab; --mt-water: #b9d1d4; --mt-shore: #d3cdba; --mt-stone: #d5cab9; --mt-stone-2: #d4c9b6; --mt-village: #d5cab9; --mt-roof: #c78f77; --mt-glass: #a4c2be; --mt-pitch: #cdd9b4; }
:root[data-tint="parch"][data-theme="dark"] .dur.ok .fill { background: linear-gradient(90deg, #523889, #2d1268); }
:root[data-tint="parch"][data-theme="dark"] .dur.ok .dur-st { color: #2d1268; }
:root[data-tint="parch"][data-theme="dark"] .where-pin { color: #d0cabe !important; }
:root[data-tint="parch"][data-theme="dark"] .where-pin .ico { stroke: #d0cabe; }
:root[data-tint="parch"][data-theme="dark"] .tchip.curfew { color: #141a66; }
:root[data-tint="parch"][data-theme="dark"] .tchip.meal { color: #926c1a; }
:root[data-tint="parch"][data-theme="dark"] .event.daily-ev { background: linear-gradient(120deg, #deceb0, #e4d0aa 60%, #e3cfab); box-shadow: inset 0 0 0 1.5px #d3b477; }
:root[data-tint="parch"][data-theme="dark"] .event.daily-ev h3, :root[data-tint="parch"][data-theme="dark"] .event.daily-ev .prose { color: #674f14; }
:root[data-tint="parch"][data-theme="dark"] .event.daily-ev .btn { background: #dacfb3; color: #674f14; border-color: #d3b477; }
:root[data-tint="parch"][data-theme="dark"] .daily-prophet { background: #d5cdb9 !important; color: #5a4a20; box-shadow: inset 0 0 0 1px #cec7b6 !important; }
:root[data-tint="parch"][data-theme="dark"] .dp-art p, :root[data-tint="parch"][data-theme="dark"] .dp-date { color: #564c31; }
:root[data-tint="parch"][data-theme="dark"] .dp-mast { border-color: #5a4a20; }
:root[data-tint="parch"][data-theme="dark"] .gboard { background: radial-gradient(circle at 12% 18%, rgba(34, 28, 17, .06) 0 2px, transparent 3px) 0 0 / 22px 22px, linear-gradient(160deg, #d8c7b6, #d9c6b5); box-shadow: inset 0 0 0 6px #dac7b4, 0 6px 18px rgba(238, 232, 221, .4); }
:root[data-tint="parch"][data-theme="dark"] .gb-pin { background: linear-gradient(180deg, #d9cab1, #dccfb9); }
:root[data-tint="parch"][data-theme="dark"] .gb-head h2, :root[data-tint="parch"][data-theme="dark"] .gb-head .small { color: #5e471c; }
:root[data-tint="parch"][data-theme="dark"] .hobby-body.hb-garden { background: linear-gradient(180deg, #c1d3ba, #c0d4b9); box-shadow: inset 0 -10px 0 #c0d6b8; }
:root[data-tint="parch"][data-theme="dark"] .hobby-body.hb-cook { background: linear-gradient(180deg, #d8cab0, #dccfb9); }
:root[data-tint="parch"][data-theme="dark"] .hobby-body.hb-fish { background: linear-gradient(180deg, #b7cad6, #b7cad7); }
:root[data-tint="parch"][data-theme="dark"] .view[data-page=creatures] .cr-grid { background: linear-gradient(180deg, #d8cbb6, #d9cbb5); }
:root[data-tint="parch"][data-theme="dark"] .view[data-page=creatures] .panel.quiet-inc { background: linear-gradient(180deg, #d8cbb6, #d9cbb5); }
:root[data-tint="parch"][data-theme="dark"] .view[data-page=creatures] .cr-grid { background: linear-gradient(180deg, #d9cab1, #dccfb9) !important; box-shadow: inset 0 0 0 1px #d4c8b6 !important; }
:root[data-tint="parch"][data-theme="dark"] .prof-card.cp-parch { background-image: linear-gradient(160deg, #d5ccb9, #d7cdb7); }
:root[data-tint="parch"][data-theme="dark"] .broom-shop { background: linear-gradient(180deg, #d4c8ba, #d5c8b9); border-color: #d8c9b6; }
:root[data-tint="parch"][data-theme="dark"] .broom { background: #d3c8ba; border-color: #d8c9b6; }
:root[data-tint="parch"][data-theme="dark"] .view[data-page=post] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23221c11' stroke-width='1.2' opacity='.06'%3E%3Cpath d='M0 0.7H240M0 60.7H240M0.7 0V60M120.7 0V60M60.7 60V120M180.7 60V120'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-tint="parch"][data-theme="dark"] .news-box { background: color-mix(in srgb, #d6cab8 40%, var(--sheet)) !important; }
:root[data-tint="parch"][data-theme="dark"] .msg .bub { background: color-mix(in srgb, #221c11 6%, transparent); }
:root[data-tint="parch"][data-theme="dark"] .c-ttl { color: #926c1a; background: color-mix(in srgb, #a27c1c 10%, transparent); }
:root[data-tint="parch"][data-theme="dark"] .hobby-body.hb-bundle { background: repeating-linear-gradient(0deg, rgba(119, 75, 3, .04) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgba(119, 75, 3, .04) 0 2px, transparent 2px 5px), #d3c9bb; box-shadow: inset 0 0 0 1px #d4c8b6; }
:root[data-tint="parch"][data-theme="dark"] .bn-ledger { background: #d3c9ba; box-shadow: 0 2px 0 #d4c8b6; }
:root[data-tint="parch"][data-theme="dark"] .pouch { --cloth: color-mix(in srgb, var(--rc) 30%, #d3c9ba); }
:root[data-tint="parch"][data-theme="dark"] .sl-ring { background: radial-gradient(closest-side, #d3c9bb 78%, transparent 80%), conic-gradient(#bd922d calc(var(--p) * 1%), rgba(119, 75, 3, .15) 0); }
:root[data-tint="parch"][data-theme="dark"] .hobby-body.hb-dex { background: linear-gradient(90deg, rgba(238, 232, 221, .08) 0 1px, transparent 1px) 0 0 / 46px 100%, linear-gradient(#d8c7b6, #d9c7b4); }
:root[data-tint="parch"][data-theme="dark"] .dx-page { background: linear-gradient(transparent 0 27px, rgba(119, 75, 3, .05) 27px 28px) 0 0 / 100% 28px, #d2c9bc; }
:root[data-tint="parch"][data-theme="dark"] .dx-page.right { background-color: #d2c9bc; }
:root[data-tint="parch"][data-theme="dark"] .hobby-body.hb-bundle { background: radial-gradient(circle, rgba(103, 25, 35, .12) 1.6px, transparent 2px) 0 0 / 22px 22px, #d8c9b0 !important; box-shadow: inset 0 0 0 1px #cbb896 !important; }
:root[data-tint="parch"][data-theme="dark"] .bn-ledger { background: #d2c1a4 !important; box-shadow: 0 0 0 1px #cbb896 !important; }
:root[data-tint="parch"][data-theme="dark"] .bn-shelf { background: color-mix(in srgb, var(--rc) 10%, #d8c9b0); }
:root[data-tint="parch"][data-theme="dark"] .bs-sign { background: #d2c1a4 !important; }
:root[data-tint="parch"][data-theme="dark"] .pouch { --cloth: color-mix(in srgb, var(--rc) 22%, #d2c1a4) !important; }
:root[data-tint="parch"][data-theme="dark"] .sl-ring { background: radial-gradient(closest-side, #d8c9b0 76%, transparent 79%), conic-gradient(color-mix(in srgb, var(--rc) 70%, #72460e) calc(var(--p) * 1%), rgba(34, 28, 17, .08) 0) !important; }
:root[data-tint="parch"][data-theme="dark"] .hobby-body.hb-dex { background: radial-gradient(circle, rgba(56, 37, 123, .14) 1.4px, transparent 1.8px) 0 0 / 20px 20px, #c1bed0 !important; box-shadow: inset 0 0 0 1px #b2aec6 !important; }
:root[data-tint="parch"][data-theme="dark"] .dx-page { background: #b9b6ce !important; }
:root[data-tint="parch"][data-theme="dark"] .dx-spread { background: linear-gradient(135deg, #8176af, #938abd) !important; }
:root[data-tint="parch"][data-theme="dark"] .dp-head h3 { color: #261664; }
:root[data-tint="parch"][data-theme="dark"] .dx-page .dx-it { background: #aeaac6 !important; box-shadow: 0 0 0 1.5px #9690b7 !important; }
:root[data-tint="parch"][data-theme="dark"] .dx-page .dx-q { background: #aeaac6 !important; }
:root[data-tint="parch"][data-skin="parchment"] { --paper: #5a4820; --sheet: #624c19; --sheet-2: #5d4a1d; --rule: #6a562d; --ink: #d9c8b5; --ink-2: #cebaa1; --ink-3: #a99572; --warn: #eabe78; --warn-ink: #eabe78; --accent: #e5c294; --accent-soft: rgba(229, 194, 148, .1); --soft: inset 0 1px 0 rgba(119, 92, 3, .75), 0 1px 1px rgba(231, 205, 167, .10), 0 6px 16px -8px rgba(231, 205, 167, .28); --lift: inset 0 1px 0 rgba(119, 92, 3, .8), 0 2px 3px rgba(231, 205, 167, .12), 0 22px 44px -16px rgba(234, 204, 163, .45); --edge: rgba(219, 185, 137, .18); --gilt: #be9a52; }
:root[data-tint="parch"][data-skin="parchment"][data-theme="dark"] { --paper: #dbc8b3; --sheet: #d8c8b6; --sheet-2: #d8c8b6; --rule: #d3c6ba; --ink: #5f491c; --ink-2: #6d5a35; --ink-3: #9f8d6d; --warn: #9c7220; --warn-ink: #9c7220; --accent: #926c26; --accent-soft: rgba(146, 108, 38, .12); --soft: inset 0 1px 0 rgba(119, 81, 3, .05), 0 1px 2px rgba(238, 232, 221, .35), 0 8px 20px -10px rgba(238, 232, 221, .6); --lift: inset 0 1px 0 rgba(119, 81, 3, .06), 0 24px 48px -16px rgba(238, 232, 221, .7); --edge: rgba(238, 232, 221, .35); --gilt: #a27d39; }
:root[data-tint="parch"][data-skin="parchment"] .h-gryffindor { --h-l: #da7b74; }
:root[data-tint="parch"][data-skin="parchment"] .h-hufflepuff { --h-l: #f0ce88; }
:root[data-tint="parch"][data-skin="parchment"] .h-ravenclaw { --h-l: #7796d3; }
:root[data-tint="parch"][data-skin="parchment"] .h-slytherin { --h-l: #a3dec0; }
:root[data-tint="parch"][data-skin="parchment"] body { background-image: var(--grain), var(--fiber),
    radial-gradient(120% 90% at 50% 0%, rgba(119, 91, 3, .55), transparent 60%),
    radial-gradient(140% 120% at 50% 100%, var(--edge), transparent 55%); }
:root[data-tint="parch"][data-skin="parchment"] :is(.modal, .pop) { background-image: var(--grain), linear-gradient(180deg, rgba(119, 90, 3, .35), transparent 30%); }
:root[data-tint="parch"][data-skin="parchment"] .rail { background-color: color-mix(in srgb, var(--paper) 88%, #ddb887); }
:root[data-tint="parch"][data-skin="parchment"] #view > .block-head:first-child::after { background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--gilt) 70%, transparent) 12%, color-mix(in srgb, var(--gilt) 70%, transparent) 46%, transparent 46.5%, transparent 53.5%, color-mix(in srgb, var(--gilt) 70%, transparent) 54%, color-mix(in srgb, var(--gilt) 70%, transparent) 88%, transparent) center / 100% 1px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='9' viewBox='0 0 40 9'><path d='M20 0l4 4.5-4 4.5-4-4.5z' fill='%23be9a52'/><circle cx='10' cy='4.5' r='1.4' fill='%23be9a52'/><circle cx='30' cy='4.5' r='1.4' fill='%23be9a52'/></svg>") center / 40px 9px no-repeat; }
:root[data-tint="parch"][data-skin="parchment"] .btn { box-shadow: inset 0 1px 0 rgba(119, 92, 3, .6), 0 1px 1px rgba(231, 205, 167, .1); }
:root[data-tint="parch"][data-skin="parchment"] .btn.primary { background-image: linear-gradient(180deg, rgba(34, 28, 17, .16), rgba(238, 232, 221, .1)), var(--grain); border-color: color-mix(in srgb, var(--accent) 80%, #eee8dd); box-shadow: inset 0 1px 0 rgba(34, 28, 17, .22), 0 1px 2px rgba(240, 202, 158, .35), 0 3px 8px -3px color-mix(in srgb, var(--accent) 60%, transparent); text-shadow: 0 1px 0 rgba(238, 232, 221, .18); }
:root[data-tint="parch"][data-skin="parchment"] :is(input[type=text], input[type=search], input[type=number], input[type=url], input[type=password], input:not([type]), select, textarea) { background-color: color-mix(in srgb, var(--sheet) 70%, #221c11 12%); box-shadow: inset 0 1px 2px rgba(231, 205, 167, .08); }
:root[data-tint="parch"][data-skin="parchment"] .toast { background-color: #d9c8b5; color: #634d17; border: 1px solid #d6c2a6; box-shadow: 0 10px 30px -10px rgba(240, 202, 158, .6); }
:root[data-tint="parch"][data-skin="parchment"] .home-clock { background: var(--grain), radial-gradient(90% 140% at 92% 20%, rgba(132, 93, 3, .45), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); box-shadow: var(--soft), inset 0 0 0 1px var(--rule), inset 0 0 0 4px rgba(119, 89, 3, .55), inset 0 0 0 5px color-mix(in srgb, var(--gilt) 45%, transparent); }
:root[data-tint="parch"][data-skin="parchment"] .home-clock.sky-dusk { background: var(--grain), radial-gradient(90% 140% at 92% 30%, rgba(161, 66, 19, .35), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); }
:root[data-tint="parch"][data-skin="parchment"] .home-clock.sky-night { background: var(--grain), radial-gradient(70% 120% at 90% 20%, rgba(119, 89, 3, .14), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] { --paper: #ddd0ba; --sheet: #d9cbb2; --sheet-2: #d5c5aa; --rule: rgba(139, 102, 56, .32); --ink: #564625; --ink-2: #5c5037; --ink-3: #a98a53; --warn: #825f20; --warn-ink: #825f20; --accent: #8b6638; --on-accent: #d5cab9; --accent-soft: rgba(139, 102, 56, .14); --gold: #8b6638; --gold-2: #60471b; --gilt: #8b6638; --edge: rgba(238, 232, 221, .4); --soft: 0 1px 0 rgba(119, 79, 3, .04) inset, 0 8px 22px -12px rgba(238, 232, 221, .7); --lift: 0 24px 60px -18px rgba(238, 232, 221, .8); --frame: 0 0 0 1px rgba(139, 102, 56, .55), inset 0 0 0 3px var(--sheet), inset 0 0 0 4px rgba(139, 102, 56, .28); --c-tl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%238b6638' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/><path d='M6 22c9 0 16-7 16-16' opacity='.45'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%238b6638'/><circle cx='20' cy='3' r='1.1' fill='%238b6638'/><circle cx='3' cy='20' r='1.1' fill='%238b6638'/></svg>"); --c-tr: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(40 0) scale(-1 1)'><g fill='none' stroke='%238b6638' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/><path d='M6 22c9 0 16-7 16-16' opacity='.45'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%238b6638'/><circle cx='20' cy='3' r='1.1' fill='%238b6638'/><circle cx='3' cy='20' r='1.1' fill='%238b6638'/></g></svg>"); --c-bl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(0 40) scale(1 -1)'><g fill='none' stroke='%238b6638' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/><path d='M6 22c9 0 16-7 16-16' opacity='.45'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%238b6638'/><circle cx='20' cy='3' r='1.1' fill='%238b6638'/><circle cx='3' cy='20' r='1.1' fill='%238b6638'/></g></svg>"); --c-br: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(40 40) scale(-1 -1)'><g fill='none' stroke='%238b6638' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/><path d='M6 22c9 0 16-7 16-16' opacity='.45'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%238b6638'/><circle cx='20' cy='3' r='1.1' fill='%238b6638'/><circle cx='3' cy='20' r='1.1' fill='%238b6638'/></g></svg>"); --astro: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100' viewBox='0 0 1100 1100'><g fill='none' stroke='%238b6638' stroke-width='1.2' opacity='.16'><circle cx='550' cy='550' r='520'/><circle cx='550' cy='550' r='490'/><circle cx='550' cy='550' r='380' stroke-dasharray='2 10'/><circle cx='550' cy='550' r='250'/><path d='M550 30v1040M30 550h1040M182 182l736 736M918 182L182 918'/><path d='M550 60 C 760 300 760 800 550 1040 M550 60 C 340 300 340 800 550 1040' opacity='.6'/><path d='M140 360 L 420 250 L 700 420 L 960 300' stroke-width='.8'/><path d='M200 760 L 480 820 L 760 700 L 900 780' stroke-width='.8'/></g><g fill='%2360471b' opacity='.45'><circle cx='420' cy='250' r='2.2'/><circle cx='700' cy='420' r='2.6'/><circle cx='960' cy='300' r='2'/><circle cx='140' cy='360' r='2'/><circle cx='480' cy='820' r='2.4'/><circle cx='760' cy='700' r='2'/><circle cx='200' cy='760' r='1.8'/><circle cx='900' cy='780' r='1.8'/></g></svg>"); --ridge: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='220' viewBox='0 0 1600 220' preserveAspectRatio='none'><path d='M0 220V150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60V220z' fill='%23e3d8c6' opacity='.75'/><path d='M0 150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60' fill='none' stroke='%238b6638' stroke-width='1.2' opacity='.35'/><g stroke='%238b6638' stroke-width='.7' opacity='.22'><path d='M270 40l-30 60M270 40l25 55M720 30l-40 70M720 30l35 60M1080 70l-30 50'/></g></svg>"); --pillar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='900' viewBox='0 0 60 900'><g fill='none' stroke='%238b6638' stroke-width='1.1' opacity='.75'><path d='M14 900V150q16-40 16-70 0 30 16 70v750'/><path d='M20 900V160q10-26 10-50 0 24 10 50v740' opacity='.6'/><path d='M30 120v-40M30 220v40'/></g><g fill='%238b6638' opacity='.85'><path d='M30 20l3 11 11 3-11 3-3 11-3-11-11-3 11-3z'/><path d='M30 60l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/><path d='M30 330l4 14 14 4-14 4-4 14-4-14-14-4 14-4z'/><path d='M30 620l2.5 8 8 2.5-8 2.5-2.5 8-2.5-8-8-2.5 8-2.5z'/></g></svg>"); --spark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'><g fill='%238b6638'><path d='M12 3l1.3 3.7L17 8l-3.7 1.3L12 13l-1.3-3.7L7 8l3.7-1.3z'/><path d='M32 1l1.8 5.2L39 8l-5.2 1.8L32 15l-1.8-5.2L25 8l5.2-1.8z'/><path d='M52 3l1.3 3.7L57 8l-3.7 1.3L52 13l-1.3-3.7L47 8l3.7-1.3z'/></g></svg>"); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] body { background-color: #dccfb8; background-image: var(--grain), var(--ridge), var(--astro),
    radial-gradient(80% 60% at 55% 0%, rgba(174, 159, 136, .28), transparent 65%),
    radial-gradient(70% 50% at 50% 110%, rgba(173, 145, 107, .18), transparent 60%),
    linear-gradient(180deg, #d8cab0, #dfd3bf); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .rail { background-color: #dfd3bf; background-image: var(--grain), linear-gradient(180deg, rgba(139, 102, 56, .08), transparent 30%); box-shadow: inset -1px 0 0 rgba(139, 102, 56, .55), inset -5px 0 0 #dfd3bf, inset -6px 0 0 rgba(139, 102, 56, .3), 8px 0 30px rgba(238, 232, 221, .45); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .nav button:hover { background: rgba(139, 102, 56, .1); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .nav button.on { background: rgba(139, 102, 56, .16); box-shadow: inset 0 0 0 1px rgba(139, 102, 56, .55); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .nav-ico { box-shadow: inset 0 0 0 1px rgba(139, 102, 56, .4); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .statusbar { background: rgba(223, 211, 191, .86); border-bottom: 1px solid rgba(139, 102, 56, .45); box-shadow: 0 3px 0 -2px rgba(139, 102, 56, .2); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .tabbar { background: rgba(223, 211, 191, .95); border-top: 1px solid rgba(139, 102, 56, .45); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .hud-in { background-color: rgba(223, 211, 191, .92); border: 1px solid rgba(139, 102, 56, .45); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .page-head::after { background: linear-gradient(90deg, transparent, rgba(139, 102, 56, .7) 10%, rgba(139, 102, 56, .7) 44%, transparent 44.5%, transparent 55.5%, rgba(139, 102, 56, .7) 56%, rgba(139, 102, 56, .7) 90%, transparent) center / 100% 1px no-repeat, var(--spark) center / 64px 14px no-repeat; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .ph-ico { background: radial-gradient(circle, #d5c5aa 55%, #ddd0ba); box-shadow: 0 0 0 1px rgba(139, 102, 56, .7), 0 0 0 4px #ddd0ba, 0 0 0 5px rgba(139, 102, 56, .45); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .ph-txt h1 { color: #5c471e; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .table-wrap, .letter, .gb-open, .first-steps, .card, .home-clock) { background-color: rgba(217, 203, 178, .94); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(.item, .person, .next, .sc-btn, .fs-stage, .shop-lines) { background-color: rgba(213, 197, 170, .7); border-color: rgba(139, 102, 56, .25); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .btn { background: rgba(119, 81, 3, .03); border-color: rgba(139, 102, 56, .5); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .btn.primary { background: linear-gradient(180deg, #735528, #976f41); border-color: #60471b; color: #d5cab9; box-shadow: 0 0 0 2px #ddd0ba, 0 0 0 3px rgba(139, 102, 56, .6); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .chip { background: rgba(119, 81, 3, .03); border-color: rgba(139, 102, 56, .4); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .chip.on { background: #8b6638; border-color: #60471b; color: #d5cab9; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(input[type=text], input[type=search], input[type=number], input[type=url], input[type=password], input:not([type]), select, textarea) { background: #dfd3bf; border-color: rgba(139, 102, 56, .4); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(.modal, .pop) { background-color: #dacbb3; box-shadow: 0 0 0 1px rgba(139, 102, 56, .6), inset 0 0 0 4px #dacbb3, inset 0 0 0 5px rgba(139, 102, 56, .3), var(--lift); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .toast { background: #dfd3bf; border: 1px solid rgba(139, 102, 56, .55); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .chat { background-color: #ddd0ba; border-left: 1px solid rgba(139, 102, 56, .5); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .help-tip { background: rgba(139, 102, 56, .08); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(.panel, .block.fold, .gb-open, .wg, .goods, .bd-card, .inc-card, .letter, .card) :is(.panel, .block.fold, .wg, .card) { background-color: rgba(213, 197, 170, .45); box-shadow: inset 0 0 0 1px rgba(139, 102, 56, .22); }
:root[data-tint="parch"][data-theme="dark"] .rank-cell.top { background: linear-gradient(160deg, rgba(152, 114, 28, .28), rgba(152, 114, 28, .08)); }
:root[data-tint="parch"][data-theme="dark"] .rank-cell.top b { color: #826312; }
html:root[data-tint="parch"][data-skin="parchment"] .shell[class*="h-"] { --accent: #e5c294; --on-accent: #775103; --accent-soft: rgba(229, 194, 148, .1); }
html:root[data-tint="parch"][data-skin="parchment"][data-theme="dark"] .shell[class*="h-"] { --accent: #926c26; --on-accent: #d5cab9; --accent-soft: rgba(146, 108, 38, .13); }
html:root[data-tint="parch"][data-frame="night"] .shell[class*="h-"] { --accent: #cca977; --on-accent: #775103; --accent-soft: rgba(204, 169, 119, .12); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .shell[class*="h-"] { --accent: #8b6638; --on-accent: #d5cab9; --accent-soft: rgba(139, 102, 56, .14); }
:root[data-tint="parch"][data-theme="dark"] .pc-tag.in { color: #2d5f3d; }
:root[data-tint="parch"][data-theme="dark"] .pc-tag.out { color: #734f1b; }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .stage:not(.in-mine):not(.in-trek) > .view[data-page=post] { background-image: var(--grain), var(--fiber), radial-gradient(130% 100% at 50% 40%, transparent 62%, rgba(219, 185, 137, .16) 100%) !important; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] { --ink: #584822; --ink-2: #514529; --ink-3: #786d55; --rule: rgba(139, 102, 56, .38); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(.faint, .eyebrow, .ph-sub, .small.faint, .meta) { color: #70654d; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(input, textarea)::placeholder { color: #ab8b55; }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) { --paper: #584722; --sheet: #614b19; --sheet-2: #584722; --rule: #584724; --ink: #d6c9b8; --ink-2: #cabaa6; --ink-3: #a3947b; --accent: #cca977; --on-accent: #775103; --accent-soft: rgba(204, 169, 119, .12); --gilt: #b28e52; --gold: #8b6638; --gold-2: #60471b; --dk-ink: #5a4721; --dk-ink-2: #514529; --dk-ink-3: #756a53; --astro-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100' viewBox='0 0 1100 1100'><g fill='none' stroke='%238b6638' stroke-width='1.2' opacity='.15'><circle cx='550' cy='550' r='520'/><circle cx='550' cy='550' r='490'/><circle cx='550' cy='550' r='380' stroke-dasharray='2 10'/><circle cx='550' cy='550' r='250'/><path d='M550 30v1040M30 550h1040M182 182l736 736M918 182L182 918'/><path d='M550 60 C 760 300 760 800 550 1040 M550 60 C 340 300 340 800 550 1040' opacity='.6'/><path d='M140 360 L 420 250 L 700 420 L 960 300' stroke-width='.8'/><path d='M200 760 L 480 820 L 760 700 L 900 780' stroke-width='.8'/></g><g fill='%2360471b' opacity='.45'><circle cx='420' cy='250' r='2.2'/><circle cx='700' cy='420' r='2.6'/><circle cx='960' cy='300' r='2'/><circle cx='140' cy='360' r='2'/><circle cx='480' cy='820' r='2.4'/><circle cx='760' cy='700' r='2'/></g></svg>"); --ridge-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='220' viewBox='0 0 1600 220' preserveAspectRatio='none'><path d='M0 220V150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60V220z' fill='%23e3d8c6' opacity='.75'/><path d='M0 150l90-60 70 40 110-90 90 70 60-30 120 80 100-70 80 50 130-100 120 90 90-40 110 70 120-80 90 50 120-60 100 60' fill='none' stroke='%238b6638' stroke-width='1.2' opacity='.35'/></svg>"); --cn-tl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23b28e52' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23b28e52'/></svg>"); --cn-tr: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='translate(40 0) scale(-1 1)'><g fill='none' stroke='%23b28e52' stroke-width='1'><path d='M2 30V8a6 6 0 0 1 6-6h22'/><path d='M2 16c7 0 10-3 10-10' opacity='.7'/></g><path d='M12 12l2.4 1.2L12 14.4 9.6 13.2z' fill='%23b28e52'/></g></svg>"); --spark-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'><g fill='%238b6638'><path d='M12 3l1.3 3.7L17 8l-3.7 1.3L12 13l-1.3-3.7L7 8l3.7-1.3z'/><path d='M32 1l1.8 5.2L39 8l-5.2 1.8L32 15l-1.8-5.2L25 8l5.2-1.8z'/><path d='M52 3l1.3 3.7L57 8l-3.7 1.3L52 13l-1.3-3.7L47 8l3.7-1.3z'/></g></svg>"); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .shell[class*="h-"] { --accent: #cca977; --on-accent: #775103; --accent-soft: rgba(204, 169, 119, .12); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) body { background-color: #dccfb8; background-image: var(--grain), var(--ridge-n), var(--astro-n), radial-gradient(80% 60% at 55% 0%, rgba(174, 159, 136, .28), transparent 65%), linear-gradient(180deg, #d8cab0, #dfd3bf); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) :is(.rail, .statusbar, .tabbar, .hud, .stage > .view) { --ink: #5a4721; --ink-2: #514529; --ink-3: #756a53; --rule: rgba(139, 102, 56, .38); --paper: #ddd0ba; --sheet: #d7c7ad; --sheet-2: #d2c1a3; --accent: #83612d; --on-accent: #d5cab9; --accent-soft: rgba(131, 97, 45, .15); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block, .wg, .goods, .bd-card, .inc-card, .letter, .card, .gb-open, .gboard, .first-steps, .table-wrap, .item, .person, .next, .sc-btn, .fs-stage, .shop-sec, .hero, .bag-tab, .bn-shelf, .dx-spread, .hobby-body, .broom-shop, .qd-bracket, .page-tabs .on, .modal, .pop, .help-toc, .rank-cell, .post-box, .post-compose, .hall-card, .ev-row, .fest-card, .news-row, .rr-scene, .inc-head, .auc-sell), html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) :is(.modal, .pop, #chat) { --ink: #d6c9b8; --ink-2: #cabaa6; --ink-3: #a3947b; --rule: #584724; --paper: #584722; --sheet: #614b19; --sheet-2: #584722; --accent: #cca977; --on-accent: #775103; --accent-soft: rgba(204, 169, 119, .12); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block.fold, .wg, .goods, .bd-card, .inc-card, .letter, .card, .first-steps) { box-shadow: 0 0 0 1px rgba(178, 142, 82, .6), inset 0 0 0 3px var(--sheet), inset 0 0 0 4px rgba(178, 142, 82, .22), 0 10px 26px -14px rgba(238, 232, 221, .7); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .view :is(.panel, .block.fold, .gb-open, .wg, .goods, .bd-card, .inc-card, .letter, .card) :is(.panel, .block.fold, .wg, .card) { box-shadow: inset 0 0 0 1px rgba(178, 142, 82, .25) !important; }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .view :is(.block-head h3, .panel > b, .panel > .row > b) { color: #e5cca7; }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .rail { background: #dfd3bf; box-shadow: inset -1px 0 0 rgba(139, 102, 56, .55), inset -5px 0 0 #dfd3bf, inset -6px 0 0 rgba(139, 102, 56, .3), 8px 0 30px rgba(238, 232, 221, .45); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .nav button:hover { background: rgba(139, 102, 56, .1); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .nav button.on { background: rgba(139, 102, 56, .18); box-shadow: inset 0 0 0 1px rgba(139, 102, 56, .55); color: #664c14; }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .nav-ico { color: #8b6638 !important; box-shadow: inset 0 0 0 1px rgba(139, 102, 56, .4); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .nav-label { color: #8b6638; }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .rail-brand { color: #60471b; }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .statusbar { background: rgba(223, 211, 191, .88); border-bottom: 1px solid rgba(139, 102, 56, .45); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) :is(.statusbar, .tabbar) .btn { background: rgba(119, 81, 3, .04); border-color: rgba(139, 102, 56, .4); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .tabbar { background: rgba(223, 211, 191, .96); border-top: 1px solid rgba(139, 102, 56, .45); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .hud-in { background: rgba(223, 211, 191, .93); border: 1px solid rgba(139, 102, 56, .45); box-shadow: 0 -6px 24px -10px rgba(238, 232, 221, .5); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .hud-mini { background: rgba(223, 211, 191, .93); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .page-head::after { background: linear-gradient(90deg, transparent, rgba(139, 102, 56, .7) 10%, rgba(139, 102, 56, .7) 44%, transparent 44.5%, transparent 55.5%, rgba(139, 102, 56, .7) 56%, rgba(139, 102, 56, .7) 90%, transparent) center / 100% 1px no-repeat, var(--spark-n) center / 64px 14px no-repeat; }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .ph-ico { background: radial-gradient(circle, #d5c5aa 55%, #ddd0ba); color: #60471b; box-shadow: 0 0 0 1px rgba(139, 102, 56, .7), 0 0 0 4px #ddd0ba, 0 0 0 5px rgba(139, 102, 56, .45); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .ph-txt h1 { color: #5c471e; }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .ph-txt h1::before { color: #8b6638; }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .btn.primary { background: linear-gradient(180deg, #d2c1a3, #dccfb8); border-color: #cfb077; color: #664c14; box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3px rgba(178, 142, 82, .6); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .btn:not(.primary):not(.quiet) { border-color: color-mix(in srgb, #b28e52 55%, transparent); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .chip.on { background: #d7c9af; border-color: #cfb077; color: #664c14; }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .stage > .view > .chips .chip.on, html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .stage > .view .subtabs .on { background: #8b6638; border-color: #60471b; color: #d5cab9; }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) :is(.modal, .pop) { box-shadow: 0 0 0 1px rgba(178, 142, 82, .7), inset 0 0 0 4px var(--sheet), inset 0 0 0 5px rgba(178, 142, 82, .3), 0 24px 60px -18px rgba(238, 232, 221, .6); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .toast { background: #ddd0ba; color: #5a4721; border: 1px solid rgba(139, 102, 56, .55); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) #chat { border-left: 1px solid rgba(178, 142, 82, .6); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .home-clock { background: var(--grain), radial-gradient(90% 140% at 92% 20%, rgba(132, 93, 3, .18), transparent 55%), linear-gradient(160deg, var(--hc-bg1), var(--hc-bg2)); box-shadow: 0 0 0 1px rgba(139, 102, 56, .7), inset 0 0 0 4px #d9cab1, inset 0 0 0 5px rgba(139, 102, 56, .35); }
html:root[data-tint="parch"][data-frame="night"]:not([data-theme="dark"]) .home-clock .hc-time { color: #60471b; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .btn:not(.primary):not(.quiet):not(.danger):not(.stop) { background: #d2c1a3; border-color: rgba(125, 91, 43, .62); color: #604a1b; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .btn:not(.primary):not(:disabled):hover { background: #cbb896; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .btn.quiet { background: rgba(119, 81, 3, .07); border-color: rgba(125, 91, 43, .28); color: #5a4720; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(.chip, .ptag) { background: #d4c4a8; border-color: rgba(125, 91, 43, .5); color: #5c481e; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .chip:not(.on):hover { background: #cebb9b; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(.htab, .subtabs button, .seg button, .bag-tab, .rank-cell, .fly-mode, .tac, .spell, .rps-cell, .tk-act) { background: #d4c4a8; border-color: rgba(125, 91, 43, .42); color: #5c481e; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(.htab.on, .subtabs button.on, .seg button.on, .bag-tab.on, .rank-cell.on, .fly-mode.on) { background: #cebfa6; border-color: #775721; color: #775303; box-shadow: inset 0 0 0 1px rgba(119, 87, 33, .5); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .htab .ico { background: rgba(119, 81, 3, .1); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(.pouch-body, .panel.cook-lab, .dx-page, .ck-book, .ck-mastery) { --ink: #dbc7b3; --ink-2: #ceb9a6; --ink-3: #b2977b; --rule: rgba(208, 175, 137, .3); --line: rgba(208, 175, 137, .25); --sheet: #694d11; color: #dbc7b3; }
html:root[data-tint="parch"][data-frame="night"] .pouch { --cloth: #5c461e; }
html:root[data-tint="parch"][data-frame="night"] .pt-neck, html:root[data-tint="parch"][data-frame="night"] .pt-frill { fill: #664f25; stroke: #bb9d77; }
html:root[data-tint="parch"][data-frame="night"] .pouch-body { background:
    repeating-linear-gradient(0deg, rgba(208, 175, 137, .06) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(208, 175, 137, .06) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 30%, #624a19, #6d5428 75%, #896b3a) !important; border: 1.5px solid #b59467 !important; box-shadow: inset 0 -10px 18px rgba(223, 185, 147, .22), 0 6px 14px rgba(238, 232, 221, .35) !important; }
html:root[data-tint="parch"][data-frame="night"] .pouch-body::before { border-top: 1.5px dashed rgba(213, 175, 137, .45); }
html:root[data-tint="parch"][data-frame="night"] .pouch-body .pb-head b { color: #dbc7b3; }
html:root[data-tint="parch"][data-frame="night"] .pouch-body :is(.small, .faint, .pb-hint) { color: #c6ae92 !important; }
html:root[data-tint="parch"][data-frame="night"] .pouch-body .slot span, html:root[data-tint="parch"][data-frame="night"] .pouch-body .slots span { color: #dbc7b3; }
html:root[data-tint="parch"][data-frame="night"] .pb-rw { background: #775203; color: #ecc888; box-shadow: 0 0 0 1px rgba(208, 175, 137, .3); }
html:root[data-tint="parch"][data-frame="night"] body .view .panel.panel.cook-lab.cook-lab { background: radial-gradient(circle at 75% 25%, rgba(141, 80, 4, .28), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect width='28' height='28' fill='%236a4711'/%3E%3Cpath d='M0 .5H28M.5 0V28' stroke='%2360441b' stroke-width='1'/%3E%3C/svg%3E") !important; border: 1px solid #63461e !important; box-shadow: 0 6px 16px rgba(238, 232, 221, .35) !important; }
html:root[data-tint="parch"][data-frame="night"] .cook-lab :is(.trek-title, h2, h3) { color: #e1b397 !important; }
html:root[data-tint="parch"][data-frame="night"] .cook-lab .eyebrow { color: #d08f5a !important; }
html:root[data-tint="parch"][data-frame="night"] .cook-lab :is(.small, .muted) { color: #c8ad92 !important; }
html:root[data-tint="parch"][data-frame="night"] .cook-lab .faint { color: #a5876a !important; }
html:root[data-tint="parch"][data-frame="night"] .cook-lab .btn:not(.primary) { background: #774b03 !important; color: #e1c3a7 !important; border-color: #7b5528 !important; }
html:root[data-tint="parch"][data-frame="night"] .dx-spread { background: linear-gradient(180deg, #dcbca5, #e1c3ad) !important; box-shadow: inset 0 0 0 2px #e5c3a9, inset 0 0 0 4px rgba(152, 110, 44, .35), 0 14px 26px rgba(238, 232, 221, .5) !important; }
html:root[data-tint="parch"][data-frame="night"] .dx-page { background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(223, 185, 137, .22) 100%),
    linear-gradient(transparent 0 27px, rgba(208, 175, 137, .08) 27px 28px) 0 6px / 100% 28px,
    #5d4a1e !important; color: #dbc7b3; }
html:root[data-tint="parch"][data-frame="night"] .dx-page.left { box-shadow: inset -18px 0 22px -14px rgba(239, 199, 159, .45), -3px 3px 0 #604e28, -6px 6px 0 #78643a !important; }
html:root[data-tint="parch"][data-frame="night"] .dx-page.right { background-color: #5d4b1d !important; box-shadow: inset 18px 0 22px -14px rgba(239, 199, 159, .45), 3px 3px 0 #604e28, 6px 6px 0 #78643a !important; }
html:root[data-tint="parch"][data-frame="night"] .dx-spread::after { background: linear-gradient(90deg, transparent, rgba(237, 199, 161, .35) 45%, rgba(237, 199, 161, .45) 50%, rgba(237, 199, 161, .35) 55%, transparent) !important; }
html:root[data-tint="parch"][data-frame="night"] .dx-page h3 { color: #e6c3a8; }
html:root[data-tint="parch"][data-frame="night"] .dx-page .eyebrow { color: #d3a577; }
html:root[data-tint="parch"][data-frame="night"] .dx-page :is(.small, .faint) { color: #c6ae92 !important; }
html:root[data-tint="parch"][data-frame="night"] .dx-page .dp-head { border-bottom: 1px solid rgba(208, 175, 137, .35); }
html:root[data-tint="parch"][data-frame="night"] .dx-page .dx-it { background: #644e16 !important; color: #dbc7b3; box-shadow: 0 0 0 1px rgba(208, 175, 137, .35), 0 2px 0 rgba(208, 175, 137, .2) !important; }
html:root[data-tint="parch"][data-frame="night"] .dx-page .dx-it.unknown { border: 1.5px dashed rgba(208, 175, 137, .45) !important; color: #ae9576; }
html:root[data-tint="parch"][data-frame="night"] .dx-page .dx-q { background: rgba(208, 175, 137, .14); color: #c5a787; }
html:root[data-tint="parch"][data-frame="night"] .dp-no { color: #b99b77; }
html:root[data-tint="parch"][data-frame="night"] .dx-page .bn-prog { background: rgba(208, 175, 137, .2); }
html:root[data-tint="parch"][data-frame="night"] .dx-page .bn-prog i { background: #d3a577; }
html:root[data-tint="parch"][data-frame="night"] .dx-mark { background: color-mix(in srgb, var(--mc) 60%, #dbc7b3) !important; color: #774f03 !important; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .purse-pop .pp-big b { color: #725a0c; }
html:root[data-tint="parch"][data-frame="night"] body .view .panel.panel.brew-lab.brew-lab { background: radial-gradient(circle at 70% 30%, rgba(57, 133, 86, .10), transparent 50%), linear-gradient(170deg, #bcd2c8, #bdd1c7) !important; border: 1px solid #acc2b5 !important; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(.hn[class*="hn-"]:not(.hn-), .mbadge, .mbadge b, .glasses.mini2 .hs.lead b, .rh-v, .cup .ico, .cup b, .qs-name, .bd-who .ico) { color: color-mix(in srgb, var(--hc) 58%, #221c11) !important; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .mbadge .ico { fill: color-mix(in srgb, var(--hc) 70%, #221c11); stroke: color-mix(in srgb, var(--hc) 70%, #221c11); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(.hpill, .bd-who, .c-ava b) { color: color-mix(in srgb, var(--hc) 55%, #221c11) !important; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .hpill { background: color-mix(in srgb, var(--hc) 26%, #dacbb3); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .bd-ava { color: color-mix(in srgb, var(--hc) 55%, #221c11); background: color-mix(in srgb, var(--hc) 35%, #dacbb3); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] [style*="--pc:"]:not(.mono-av) { color: color-mix(in srgb, var(--pc) 60%, #221c11); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(.ic-msg .who, .fly-row b) { color: color-mix(in srgb, var(--pc, #574624) 60%, #221c11); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .tc-name { color: color-mix(in srgb, var(--tc, currentColor) 60%, #221c11) !important; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .bs-speed { color: #825612 !important; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .dv-from { color: #3f6b29 !important; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .qd-bracket .qb-cup .small.faint { color: #775703 !important; text-shadow: 0 1px 2px rgba(238, 232, 221, .55); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .qd-bracket .qb-cup { background: radial-gradient(circle at 50% 30%, rgba(119, 84, 3, .22), rgba(223, 204, 175, .55) 75%); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .qd-role .qd-ch { color: color-mix(in srgb, var(--qc, #775721) 55%, #221c11) !important; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .off-tag { background: #826410; color: #f3d19a; }
html:root[data-tint="parch"][data-frame="night"] .pouch-body .pb-all { background: #b74a60 !important; border-color: #cf778a !important; color: #221c11 !important; }
html:root[data-tint="parch"][data-frame="night"] .pb-rw { color: #f5d197 !important; }
html:root[data-tint="parch"][data-frame="night"] .cook-lab .bl-lv { color: #c9a787 !important; }
html:root[data-tint="parch"][data-frame="night"] .cook-lab .ck-card { color: #e3c4ab; }
html:root[data-tint="parch"][data-frame="night"] body .dx-page .dp-head .eyebrow { color: #dfb187 !important; }
html:root[data-tint="parch"][data-frame="night"] body .dx-page .dp-no { color: #c9ab87 !important; }
html:root[data-tint="parch"][data-frame="night"] .dx-mark { background: color-mix(in srgb, var(--mc) 55%, #e5c5a9) !important; }
html:root[data-tint="parch"][data-frame="night"] .dx-mark.on { background: color-mix(in srgb, var(--mc) 75%, #e5c5a9) !important; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .hc-pill { background: rgba(238, 232, 221, .35); color: #775403; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .stars i { color: rgba(125, 91, 43, .5); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .inc-rw { color: #9a741c; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .owl-stamp { color: color-mix(in srgb, var(--sc) 55%, #221c11) !important; border-color: color-mix(in srgb, var(--sc) 60%, #221c11) !important; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .wg-big { color: color-mix(in srgb, var(--wc, #21396e) 55%, #221c11) !important; }
html:root[data-tint="parch"][data-frame="night"] .cook-lab .bl-lv { color: #e1c3a7 !important; }
html:root[data-tint="parch"][data-frame="night"] .cook-lab .ck-parts { color: #c8ad92 !important; }
html:root[data-tint="parch"][data-frame="night"] .ck-badge { background: linear-gradient(180deg, #cd7b23, #e1924b); }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] :is(.inc-card.st-open, .inc-head.st-open, .next.inc-tint)[class*="d-"] { background: linear-gradient(135deg, color-mix(in srgb, var(--dcb) 30%, #dacbb3), color-mix(in srgb, var(--dcb) 12%, #dccfb8)) !important; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .inc-card[class*="d-"] .inc-name { color: color-mix(in srgb, var(--dcb) 45%, #221c11) !important; }
html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] [class*="d-"] .dtag, html:root[data-tint="parch"][data-frame="night"][data-theme="dark"] .dtag[class*="d-"] { color: color-mix(in srgb, var(--dcb) 50%, #221c11); }
html:root[data-tint="parch"][data-theme="dark"] .hc-tag.hot { color: #775203; background: color-mix(in srgb, #d1a13a 30%, transparent); }
html:root[data-tint="parch"][data-theme="dark"] .rk-row.m1 .rk-n { color: #ad7e11; }
html:root[data-tint="parch"][data-theme="dark"] .bd-st { color: color-mix(in srgb, var(--kc) 55%, #221c11); }
html:root[data-tint="parch"]:not([data-frame="night"]) .subtabs.st-shop button.sub-auction { color: #e4c078 !important; }
html:root[data-tint="parch"]:not([data-frame="night"]) .subtabs.st-shop button.sub-auction.on { color: #221c11 !important; }
html[data-tint="parch"] html:not([data-frame="night"]) #maint-flag { background: #774003; color: #eb9a63; }
html:root[data-tint="parch"][data-frame="night"] .ik-tac.lack .ik-e { color: #a27620 !important; }
html:root[data-tint="parch"][data-frame="night"] .ik-tac.lack .ik-l { color: #4d432d !important; }
html:root[data-tint="parch"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-p { background: color-mix(in srgb, var(--hc, var(--accent)) 14%, #221c11) !important; color: #d2c8bc !important; }
html:root[data-tint="parch"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-p b { color: #d5cbb9 !important; }
html:root[data-tint="parch"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-p .faint { color: #beb5a6 !important; }
html:root[data-tint="parch"]:not([data-frame="night"]):not([data-theme="dark"]) .qs-clue span { color: #d2c8bc; }
:root[data-tint="parch"][data-theme="dark"] { --nk-fight: #801f12; --nk-quest: #925c20; --nk-social: #123d76; --nk-grow: #361169; --nk-nature: #317e50; --nk-school: #318e8e; --nk-money: #9b7513; }
:root[data-tint="parch"][data-theme="dark"] .att-ink { color: #7c0d03; border-color: #7c0d03; }
:root[data-tint="parch"][data-theme="dark"] .sea-ct-go { color: #2f0377; }
:root[data-tint="parch"][data-theme="dark"] .notice-msg .nm-pill { background: #b18a21; color: #fcd492; }
:root[data-tint="parch"][data-theme="dark"] .ptr-sn { color: #093771; }
:root[data-tint="parch"][data-theme="dark"] .ptr-panel .ptr-t .eyebrow { color: #093771; }
:root[data-tint="parch"][data-theme="dark"] .msg.km .km-bub { background: color-mix(in srgb, #221c11 9%, var(--sheet, #dccfb8)); }
:root[data-tint="parch"][data-theme="dark"] .msg.km.km-me .km-bub { background: color-mix(in srgb, #b18a21 34%, var(--sheet, #dccfb8)); color: #6a5110; }
:root[data-tint="parch"][data-theme="dark"] .pill.fb-replied { color: #316e46; }
:root[data-tint="parch"][data-theme="dark"] .wm-treat { color: #a15511; }
:root[data-tint="parch"][data-theme="dark"] .deco-it .ttl-need, :root[data-tint="parch"][data-theme="dark"] .chip .ttl-need { color: #92731a; }
html[data-tint="parch"] html[data-theme="dark"] .prof-card.ci-rose .prof-name { color: #72122c !important; }
html[data-tint="parch"] html[data-theme="dark"] .prof-card.ci-teal .prof-name { color: #3ea09d !important; }