/* ui.css — 2026-11-04 shell and component layer.
   Loaded after style.css/features.css: top navigation replaces the sidebar, denser forms, illustrated cards.
   Palette stays charcoal / hanji / vermilion; official Dokkaebi artwork only. No pill badges. */
:root{--surface:#fbf8f3;--surface-2:#f1ece3;--line-soft:#e6dfd3;--ink-2:#5b544c;--shadow:0 10px 30px -18px rgba(60,40,20,.35);--head-h:64px;--content:1200px;--r-sm:4px;--r-md:8px;--r-lg:12px}
:root[data-theme="dark"]{--bg:#17161a;--paper:#201f24;--surface:#232227;--surface-2:#2a282e;--line:#36343b;--line-soft:#2d2b31;--ink:#ece7df;--ink-2:#b9b2a8;--muted:#9f978d;--accent:#e2a18c;--shadow:0 14px 40px -20px rgba(0,0,0,.7)}
html{scroll-behavior:smooth}
body{max-width:none;background:var(--bg);background-image:none}
[data-theme="dark"] body{background:var(--bg)}
.sidebar,.topbar{display:none}
.shell{margin:0;width:100%}

/* ───── Header ───── */
.site-head{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line)}
[data-theme="dark"] .site-head{background:#1b1a1f;border-bottom-color:#2e2c33}
.site-head-inner{max-width:var(--content);margin:0 auto;padding:0 24px;height:var(--head-h);display:flex;align-items:center;gap:22px}
.site-head .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-story);font-size:22px;font-weight:600;letter-spacing:-.3px;color:var(--ink);text-decoration:none;flex:none;line-height:1}
.site-head .brand small{display:none}
.site-head .brand-character{width:34px;height:38px;object-fit:contain;image-rendering:pixelated}
.site-nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.site-nav .nav-link,.site-nav .nav-trigger{display:inline-flex;align-items:center;gap:4px;height:38px;padding:0 12px;border-radius:var(--r-sm);font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:none;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.site-nav .nav-link:hover,.site-nav .nav-trigger:hover,.site-nav .nav-trigger[aria-expanded="true"]{background:var(--surface-2);color:var(--ink)}
.site-nav .nav-link.active,.site-nav .nav-group:has(a.active)>.nav-trigger{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);border-radius:var(--r-sm) var(--r-sm) 0 0}
.site-nav .caret{width:12px;height:12px;opacity:.6;transition:transform .15s}
.site-nav .nav-trigger[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav-group{position:relative}
.nav-menu{position:absolute;left:0;top:calc(100% + 6px);min-width:280px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);display:none;z-index:50}
[data-theme="dark"] .nav-menu{background:#232227}
.nav-group:hover>.nav-menu,.nav-group:focus-within>.nav-menu,.nav-trigger[aria-expanded="true"]+.nav-menu{display:grid}
.nav-menu a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);transition:background .12s}
.nav-menu a:hover,.nav-menu a.active{background:var(--surface-2)}
.nav-menu a.active strong{color:var(--accent)}
.nav-menu a strong{display:block;font-size:14px;font-weight:600;line-height:1.3}
.nav-menu a small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.nav-menu .menu-art{width:34px;height:34px;flex:none}
.head-tools{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.head-tools .data-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding:0 8px}
.head-tools .theme-toggle{height:34px;padding:0 10px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);font-size:12px;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.head-tools .text-button{height:34px;padding:0 10px;font-size:12px;color:var(--ink-2);background:none;border:0}
.head-tools .text-button:hover{color:var(--accent)}
.mobile-menu{display:none;width:40px;height:40px;border:0;background:none;padding:8px;flex-direction:column;justify-content:center;gap:5px;cursor:pointer}
.mobile-menu span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.site-head.open .mobile-menu span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-head.open .mobile-menu span:nth-child(2){opacity:0}
.site-head.open .mobile-menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* 기와 띠: 공식 사이트의 처마 느낌을 가는 반복 무늬로만 표현 */
.roof-strip{height:9px;background:
 radial-gradient(circle at 50% 100%,transparent 55%,var(--accent) 56%,var(--accent) 70%,transparent 71%) 0 0/18px 9px repeat-x,
 linear-gradient(var(--surface-2),var(--surface-2));opacity:.55}
[data-theme="dark"] .roof-strip{background:radial-gradient(circle at 50% 100%,transparent 55%,#8a5f52 56%,#8a5f52 70%,transparent 71%) 0 0/18px 9px repeat-x,linear-gradient(#1f1e23,#1f1e23)}

/* ───── Breadcrumb · page head ───── */
.crumb-bar{border-bottom:1px solid var(--line-soft)}
.crumb-inner{max-width:var(--content);margin:0 auto;padding:10px 24px;font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.crumb-inner b{color:var(--ink);font-weight:500}
.crumb-inner i{font-style:normal;opacity:.5}
main,.shell>main{width:100%;max-width:var(--content);margin:0 auto;margin-inline:auto;padding:28px 24px 64px;min-height:calc(100vh - 260px);box-sizing:border-box}
.shell>footer{width:100%;max-width:none;margin-inline:0}
@media(min-width:1800px){:root{--content:1320px}}
.page-head{margin:0 0 22px;align-items:flex-end}
.page-head .page-label{font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.2px;margin-bottom:6px}
.page-head h1,h1{font-family:var(--font-story);font-size:30px;font-weight:600;letter-spacing:-.6px;line-height:1.35;margin:0}
.page-head p{margin:8px 0 0;font-size:14px;color:var(--ink-2);max-width:60ch}
.date{font-size:12px;color:var(--muted)}
.feature-subnav{gap:4px;padding:0 0 18px;border-bottom:1px solid var(--line-soft);margin-bottom:22px}
.feature-subnav a,.feature-more summary{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:background .12s,color .12s}
.feature-subnav a:hover,.feature-more summary:hover{background:var(--surface-2);color:var(--ink)}
.feature-more summary::-webkit-details-marker{display:none}
.feature-more>div{border-radius:var(--r-md);gap:10px}

/* ───── Surfaces ───── */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:none}
[data-theme="dark"] .panel{background:var(--surface)}
.panel.padded,.padded{padding:22px}
.panel-head{padding:16px 20px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-head h2{font-size:17px;font-weight:600;margin:0}
.panel-head a,.small-link{font-size:12px;color:var(--accent);text-decoration:none;font-weight:600}
.panel-foot{padding:12px 20px;font-size:12px;color:var(--muted);border-top:1px solid var(--line-soft)}
.note{background:var(--surface-2);border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 16px;font-size:13px;line-height:1.7;color:var(--ink-2);margin-bottom:20px}
[data-theme="dark"] .note{background:var(--surface-2);color:var(--ink-2)}
.hint,.check-note{font-size:12px;color:var(--muted);line-height:1.7}
.section-title{font-size:15px;font-weight:600;margin:24px 0 8px}

/* ───── Forms: compact, dense, aligned ───── */
.form-layout{gap:20px}
.form-title{font-family:var(--font-story);font-size:19px;font-weight:600;margin:0}
.character-heading{display:flex;align-items:center;gap:12px;margin-bottom:18px;justify-content:flex-start;text-align:left}
.character-heading img{width:40px;height:44px;image-rendering:pixelated}
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px}
.field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:500;color:var(--ink-2)}
.field.full{grid-column:1/-1}
input,select,textarea{min-height:38px;padding:7px 10px;font-size:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-variant-numeric:tabular-nums;transition:border-color .12s,box-shadow .12s}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#1b1a1f;border-color:#3a383f}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
input[type=number]{text-align:right}
input[type=checkbox],input[type=radio]{min-height:0;width:16px;height:16px;accent-color:var(--accent)}
textarea{min-height:90px}
.form-actions{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.primary,.secondary{min-height:38px;padding:0 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;gap:8px;transition:background .15s,transform .08s,border-color .15s}
.primary:hover{filter:brightness(1.06)}
.primary:active,.secondary:active{transform:translateY(1px)}
.secondary{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.secondary:hover{border-color:var(--ink-2)}
.skill-checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.skill-checks label{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line-soft);border-radius:var(--r-sm);font-size:13px;background:var(--surface);min-height:36px}
.skill-checks label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:0 0 16px}
.toolbar label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-2);font-weight:500}
.toolbar input,.toolbar select{min-width:180px;width:auto}
.toolbar button{min-height:38px;padding:0 14px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);font-size:13px;color:var(--ink)}
.toolbar button:disabled{opacity:.45}

/* ───── Tables ───── */
.table-wrap{border:1px solid var(--line);border-radius:var(--r-md);overflow:auto;background:var(--paper)}
[data-theme="dark"] .table-wrap{background:var(--surface)}
table{font-size:13px}
th{background:var(--surface-2);color:var(--ink-2);font-size:12px;font-weight:600;padding:10px 14px;position:sticky;top:0;border-bottom:1px solid var(--line)}
[data-theme="dark"] th{background:#2a282e;color:var(--ink-2)}
td{padding:10px 14px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.pagination{display:flex;gap:8px;align-items:center;margin:14px 0}
.pagination button{min-height:34px;padding:0 12px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);font-size:13px;color:var(--ink)}

/* ───── Results · numbers ───── */
.result{background:var(--surface-2);border-radius:var(--r-md);padding:18px 20px}
.result strong.big{font-size:30px;font-weight:600;letter-spacing:-.5px}
.compare-result{background:var(--surface-2);border-radius:var(--r-md);padding:20px}
.compare-result .number{font-size:28px;font-weight:600}
.record{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px}
[data-theme="dark"] .record{background:var(--surface)}

/* ───── Empty states ───── */
.panel.empty,.empty{text-align:center;padding:44px 24px;position:relative;overflow:hidden;background:var(--paper)}
[data-theme="dark"] .panel.empty,[data-theme="dark"] .empty{background:var(--surface)}
.panel.empty::before{content:"";position:absolute;inset:0;background:url(images/village.webp) center 40%/cover;opacity:.12;pointer-events:none}
[data-theme="dark"] .panel.empty::before{opacity:.18;filter:saturate(.7)}
.panel.empty>*{position:relative}
.panel.empty h2{font-family:var(--font-story);font-size:21px;font-weight:600;margin:0 0 8px}
.panel.empty p{color:var(--ink-2);font-size:14px;margin:0 auto 18px;max-width:46ch}
.panel.empty img{width:90px;height:auto;image-rendering:pixelated;margin-bottom:10px}
.panel.empty .primary{margin-top:6px}

/* ───── Dex cards ───── */
.dex-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dex-card{padding:12px;gap:12px;border-radius:var(--r-md);background:var(--paper);transition:border-color .12s,transform .12s;cursor:pointer}
[data-theme="dark"] .dex-card{background:var(--surface)}
.dex-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.dex-card img,.dex-letter{width:52px;height:52px;flex:none;border-radius:var(--r-sm);object-fit:contain;background:#efe6d8;border:1px solid #d9cdb9;padding:4px;box-sizing:border-box}
[data-theme="dark"] .dex-card img{background:#e9dfcf;border-color:#6b5f52}
.dex-letter{font-size:20px;padding:0}
.dex-card strong{font-size:14px;font-weight:600;line-height:1.3}
.dex-card small{margin-top:4px;font-size:12px;opacity:1;color:var(--muted)}
.dex-card .positive{margin-left:auto;font-size:12px;color:var(--accent)}

/* ───── Home ───── */
.home-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:360px;display:flex;align-items:center;border:1px solid var(--line);background:#101216;isolation:isolate}
.home-hero img.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;z-index:-2}
.home-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,14,18,.86) 0%,rgba(14,14,18,.72) 42%,rgba(14,14,18,.15) 100%)}
.home-hero .copy{padding:40px 44px;max-width:560px;color:#f5efe6}
.home-hero .eyebrow{font-size:12px;letter-spacing:.3px;color:#e8c69d;font-weight:600;margin-bottom:10px}
.home-hero h2{font-family:var(--font-story);font-size:36px;font-weight:600;line-height:1.35;letter-spacing:-.8px;margin:0 0 12px;color:#fff}
.home-hero p{font-size:15px;line-height:1.75;color:#ddd3c6;margin:0 0 22px;max-width:44ch}
.home-hero .actions{display:flex;gap:10px;flex-wrap:wrap}
.home-hero .primary{background:var(--accent);color:#fff}
.home-hero .ghost{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-sm);color:#fff;font-size:13px;font-weight:600;text-decoration:none;background:rgba(255,255,255,.06)}
.home-hero .ghost:hover{background:rgba(255,255,255,.14)}
.home-hero .figure{position:absolute;right:6%;bottom:0;width:190px;image-rendering:pixelated;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.home-hero .figure-2{right:22%;width:120px;bottom:6px;opacity:.95}
.home-hero .credit{position:absolute;right:12px;bottom:8px;font-size:11px;color:rgba(255,255,255,.5)}

.quick-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 32px}
.quick-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s,box-shadow .15s}
[data-theme="dark"] .quick-card{background:var(--surface)}
.quick-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow)}
.quick-card .thumb{height:104px;background-size:cover;background-position:center;position:relative}
.quick-card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(16,16,20,.55))}
.quick-card .thumb .menu-art{position:absolute;left:12px;bottom:-16px;width:40px;height:40px;border:2px solid var(--paper);box-shadow:0 4px 10px rgba(0,0,0,.25)}
[data-theme="dark"] .quick-card .thumb .menu-art{border-color:var(--surface)}
.quick-card .body{padding:24px 14px 14px}
.quick-card h3{font-size:15px;font-weight:600;margin:0 0 4px;line-height:1.35}
.quick-card p{font-size:12px;color:var(--muted);margin:0;line-height:1.5}
.thumb-tiger{background-image:url(images/features.webp);background-position:70% 18%;background-size:220%}
.thumb-path{background-image:url(images/foreground.webp);background-position:50% 40%;background-size:180%}
.thumb-village{background-image:url(images/village.webp);background-position:40% 55%;background-size:200%}
.thumb-sky{background-image:url(images/sky.webp);background-position:60% 50%;background-size:160%}
.thumb-world{background-image:url(images/world-middle.webp);background-position:50% 50%;background-size:150%}
.thumb-ogre{background-image:url(images/features.webp);background-position:20% 35%;background-size:230%}

.home-section-title{display:flex;align-items:baseline;justify-content:space-between;margin:34px 0 14px}
.home-section-title h2{font-family:var(--font-story);font-size:21px;font-weight:600;margin:0;display:flex;align-items:center;gap:10px}
.home-section-title h2::before{content:"";width:10px;height:10px;background:var(--accent);transform:rotate(45deg);display:inline-block;opacity:.85}
.home-section-title a{font-size:12px;color:var(--accent);font-weight:600;text-decoration:none}
.home-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.mini-region{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink)}
.mini-region:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.mini-region h3{font-size:14px;font-weight:600;margin:0}
.mini-region small{font-size:12px;color:var(--muted)}
.mini-region .value{margin-left:auto;font-weight:600;font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
.mini-region .value small{display:block;font-weight:400}
.region-thumb{width:52px;height:40px;border-radius:var(--r-sm);background:url(images/village.webp) center/cover;flex:none}
.region-thumb.cave{background-image:url(images/foreground.webp);filter:brightness(.8)}
.patch-line{display:flex;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink);align-items:flex-start}
.patch-line:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.patch-line time{font-size:12px;color:var(--accent);font-weight:600;min-width:38px;padding-top:2px;font-variant-numeric:tabular-nums}
.patch-line strong{font-size:14px;font-weight:600;display:block}
.patch-line p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.menu-blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}
.menu-block h3{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 8px;letter-spacing:.2px}
.menu-block-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.menu-block-grid a{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);text-decoration:none;color:var(--ink);min-width:0;transition:border-color .12s,background .12s}
[data-theme="dark"] .menu-block-grid a{background:var(--surface)}
.menu-block-grid a:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--paper))}
.menu-block-grid .menu-art{width:34px;height:34px;flex:none}
.menu-block-grid strong{display:block;font-size:13px;font-weight:600;line-height:1.3}
.menu-block-grid small{display:block;font-size:11px;color:var(--muted);line-height:1.4;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.journal-banner{display:flex;align-items:center;gap:18px;margin-top:28px;padding:20px 24px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line)}
.journal-banner h3{font-size:16px;font-weight:600;margin:0 0 4px}
.journal-banner p{font-size:13px;color:var(--ink-2);margin:0}
.journal-banner a{margin-left:auto;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}

/* ───── Footer ───── */
footer{border-top:1px solid var(--line);background:var(--surface);padding:0;display:block}
[data-theme="dark"] footer{background:#1b1a1f}
.foot-inner{max-width:var(--content);margin:0 auto;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.foot-inner strong{display:block;font-family:var(--font-story);font-size:15px;color:var(--ink);margin-bottom:4px}
.foot-links{display:flex;gap:16px;align-items:center}
.foot-links a{color:var(--ink-2);text-decoration:none}
.foot-links a:hover{color:var(--accent)}

/* ───── Responsive ───── */
@media(max-width:1100px){
 .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 .quick-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dex-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .menu-blocks{grid-template-columns:1fr}
 .home-grid{grid-template-columns:1fr}
 .skill-checks{grid-template-columns:repeat(3,minmax(0,1fr))}
 .site-head .brand{font-size:20px}
 .site-nav .nav-link,.site-nav .nav-trigger{padding:0 9px;font-size:13px}
 .head-tools .data-status{display:none}
}
@media(max-width:860px){
 .site-head-inner{gap:12px;padding:0 14px;height:56px}
 .mobile-menu{display:flex}
 .site-nav{display:none;position:fixed;left:0;right:0;top:56px;bottom:0;overflow:auto;background:var(--surface);padding:12px 14px 40px;flex-direction:column;align-items:stretch;gap:0;z-index:45;border-top:1px solid var(--line)}
 [data-theme="dark"] .site-nav{background:#1b1a1f}
 .site-nav.open{display:flex}
 .site-nav .nav-link{height:46px;font-size:15px;border-bottom:1px solid var(--line-soft);border-radius:0}
 .site-nav .nav-link.active,.site-nav .nav-group:has(a.active)>.nav-trigger{box-shadow:none}
 .nav-group{border-bottom:1px solid var(--line-soft)}
 .nav-trigger{width:100%;height:46px;font-size:15px;justify-content:space-between;border-radius:0}
 .nav-menu{position:static;display:none;min-width:0;border:0;box-shadow:none;padding:0 0 10px;background:transparent}
 .nav-trigger[aria-expanded="true"]+.nav-menu{display:grid}
 .nav-group:hover>.nav-menu,.nav-group:focus-within>.nav-menu{display:none}
 .nav-trigger[aria-expanded="true"]+.nav-menu{display:grid}
 .head-tools .theme-label,.head-tools .text-button{display:none}
 .roof-strip{height:7px}
 main{padding:20px 14px 48px}
 .crumb-inner{padding:8px 14px}
 .page-head h1,h1{font-size:25px}
 .home-hero{min-height:300px}
 .home-hero .copy{padding:26px 20px 120px;max-width:100%}
 .home-hero h2{font-size:27px}
 .home-hero p{font-size:13px}
 .home-hero .figure{width:130px;right:8px}
 .home-hero .figure-2{width:84px;right:150px}
 .home-hero .credit{display:none}
 .quick-cards{gap:10px}
 .quick-card .thumb{height:84px}
 .menu-block-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .fields{grid-template-columns:1fr}
 .skill-checks{grid-template-columns:1fr 1fr}
 .dex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .panel.padded,.padded{padding:16px}
 .journal-banner{flex-wrap:wrap}
 .journal-banner a{margin-left:0}
 .foot-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
 .quick-cards{grid-template-columns:1fr 1fr}
 .dex-grid{grid-template-columns:1fr}
 .menu-block-grid{grid-template-columns:1fr}
}

/* ───── 유파 탭 도술 선택기 (게임 도술 화면 구조) ───── */
.skill-tabs-head{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.skill-tabs{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;flex:1;min-width:0}
.skill-tabs-group{display:inline-flex;align-items:center;gap:4px;padding-left:10px;border-left:1px solid var(--line)}
.skill-tabs-group b{font-size:11px;color:var(--muted);font-weight:600;margin-right:4px;white-space:nowrap}
.skill-tabs button{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.skill-tabs button small{font-size:11px;color:var(--muted);font-weight:500}
.skill-tabs button:hover{border-color:var(--ink-2)}
.skill-tabs button.is-active{background:var(--style,var(--accent));border-color:var(--style,var(--accent));color:#fff}
.skill-tabs button.is-active small{color:rgba(255,255,255,.75)}
.skill-search input{min-width:180px;min-height:32px;padding:4px 10px;font-size:13px}
.skill-tabs-status{font-size:12px;color:var(--muted);margin:0 0 10px}
.skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.skill-card{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink);text-align:left;cursor:pointer;min-width:0;position:relative;transition:border-color .12s,background .12s,transform .12s;font:inherit}
[data-theme="dark"] .skill-card{background:var(--surface)}
.skill-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.skill-card.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--paper));box-shadow:inset 0 0 0 1px var(--accent)}
.skill-card input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.skill-icon{position:relative;width:52px;height:52px;flex:none;border-radius:var(--r-sm);background:#e9dfcf;border:1px solid #d3c5ad;padding:3px;box-sizing:border-box}
.skill-icon img{width:100%;height:100%;object-fit:contain;display:block}
.skill-icon.big{width:72px;height:72px}
.skill-badge{position:absolute;right:-4px;bottom:-4px;font-size:10px;font-weight:700;background:#2a2622;color:#ffe9b0;padding:1px 4px;border-radius:3px;border:1px solid #6b5c3a;line-height:1.3;font-style:normal}
.skill-text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.skill-text strong{font-size:14px;font-weight:600;line-height:1.3;display:flex;align-items:center;gap:6px}
.skill-ult{font-style:normal;font-size:10px;color:var(--accent);border:1px solid currentColor;padding:0 4px;border-radius:3px;line-height:1.5}
.skill-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.skill-meta small{font-size:11px;color:var(--muted)}
.skill-tag{display:inline-block;font-size:11px;font-weight:600;color:#fff;background:var(--style,var(--accent));padding:1px 6px;border-radius:3px;line-height:1.5}
.skill-check{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line);padding:3px 7px;border-radius:3px;flex:none}
.skill-card.is-on .skill-check{color:#fff;background:var(--accent);border-color:var(--accent)}
.skill-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:30px 0;font-size:13px}
.skill-hidden{display:none}
/* 도감: 왼쪽 상세, 오른쪽 목록 */
.skill-browser{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:start}
.skill-browser-side{position:sticky;top:calc(var(--head-h) + 20px)}
.skill-detail{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:18px}
[data-theme="dark"] .skill-detail{background:var(--surface)}
.skill-detail-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.skill-detail h3{font-family:var(--font-story);font-size:20px;font-weight:600;margin:0 0 6px}
.skill-desc{font-size:14px;line-height:1.7;margin:0 0 8px;color:var(--ink)}
.skill-coef{font-size:13px;color:var(--accent);font-weight:600;margin:0 0 12px;font-variant-numeric:tabular-nums}
.skill-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0 0 14px;padding:12px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.skill-facts div{display:flex;flex-direction:column;gap:2px}
.skill-facts dt{font-size:11px;color:var(--muted)}
.skill-facts dd{margin:0;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.skill-detail h4{font-size:13px;font-weight:600;margin:12px 0 6px;color:var(--ink-2)}
.skill-effects{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.skill-effects li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--surface-2);border-radius:var(--r-sm);font-size:13px}
.skill-effects li small{color:var(--muted);margin-left:6px}
.skill-effects li span{font-size:12px;color:var(--ink-2);line-height:1.6}
.skill-awaken{font-size:12px;line-height:1.7;color:var(--ink-2);margin:0}
.skill-detail-empty{padding:30px 16px;text-align:center;color:var(--muted);font-size:13px}
.skill-detail-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
@media(max-width:960px){.skill-browser{grid-template-columns:1fr}.skill-browser-side{position:static;order:-1}}
@media(max-width:860px){.skill-tabs-group{border-left:0;padding-left:0;flex-wrap:wrap}.skill-tabs button{height:30px;padding:0 9px;font-size:12px}.skill-search input{min-width:0;width:100%}.skill-search{width:100%}.skill-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.skill-card{padding:7px 8px;gap:8px}.skill-icon{width:44px;height:44px}.skill-text strong{font-size:13px}.skill-check{display:none}.skill-facts{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.toolbar{flex-direction:column;align-items:stretch;gap:8px}.toolbar label{width:100%;align-items:stretch;text-align:left}.toolbar input,.toolbar select,.toolbar input[type=search]{width:100%;max-width:none;min-width:0}.toolbar label:has(input[type=checkbox]){flex-direction:row;align-items:center;gap:8px}.toolbar button{width:100%}}

/* ───── 계정 · 내 도사 ───── */
.head-user{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:12px;font-weight:600;color:var(--ink);text-decoration:none;background:var(--surface);max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head-user:hover{border-color:var(--accent);color:var(--accent)}
.head-user-dot{width:7px;height:7px;border-radius:50%;background:#4fa36b;flex:none}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.auth-box h2{font-family:var(--font-story);font-size:20px;font-weight:600;margin:0 0 14px}
.auth-box form{display:grid;gap:12px}
.auth-box .field{font-size:12px}
.auth-error{margin:0;min-height:1em;font-size:12px;color:var(--accent)}
.account-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.account-head .eyebrow{font-size:11px;color:var(--muted)}
.account-head h2{font-family:var(--font-story);font-size:22px;font-weight:600;margin:4px 0 0}
.account-head h2 small{font-family:var(--font-ui);font-size:12px;color:var(--muted);font-weight:400;margin-left:8px}
.account-tools{display:flex;gap:8px}
#pw-form{width:100%}
.char-save{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.char-save strong{font-size:15px}
.char-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.char-card{display:grid;grid-template-columns:64px 1fr;gap:12px 14px;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);align-items:center}
[data-theme="dark"] .char-card{background:var(--surface)}
.char-art{width:64px;height:70px;object-fit:contain;image-rendering:pixelated;grid-row:span 2}
.char-body h3{font-family:var(--font-story);font-size:17px;font-weight:600;margin:0 0 2px}
.char-body p{margin:0;font-size:13px;color:var(--ink-2)}
.char-body small{font-size:11px;color:var(--muted)}
.char-actions{display:flex;gap:6px;flex-wrap:wrap;grid-column:2}
.char-actions .primary,.char-actions .secondary{min-height:32px;padding:0 11px;font-size:12px}
.char-actions .text-button{font-size:12px;color:var(--muted);background:none;border:0;padding:0 6px}
.char-actions .text-button:hover{color:var(--accent)}
@media(max-width:860px){.auth-grid{grid-template-columns:1fr}.account-head{flex-direction:column}.head-user{max-width:96px;padding:0 8px}}

/* ───── 용도별 덱 추천 ───── */
.deck-setup h2{font-family:var(--font-story);font-size:19px;font-weight:600;margin:0 0 14px}
.deck-setup-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.purpose-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.purpose-tile{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 14px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;min-height:150px;transition:border-color .15s,background .15s}
.purpose-tile input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.purpose-tile:hover{border-color:var(--ink-2)}
.purpose-tile:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:inset 0 0 0 1px var(--accent)}
.purpose-tile:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.purpose-name{font-family:var(--font-story);font-size:17px;font-weight:600;line-height:1.2}
.purpose-short{font-size:12px;color:var(--accent);font-weight:600}
.purpose-desc{font-size:12px;color:var(--ink-2);line-height:1.5;flex:1}
.purpose-metric{font-size:11px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:6px;margin-top:4px}
.deck-styles{border:0;padding:0;margin:0 0 14px}
.deck-styles legend{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.style-checks{display:flex;flex-wrap:wrap;gap:6px 8px}
.style-checks label{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:13px;background:var(--surface);cursor:pointer}
.style-checks label small{color:var(--muted);font-size:11px}
.style-checks label.is-off{opacity:.45;cursor:default}
.style-checks label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.assume{margin:10px 0 0;padding-left:18px;font-size:12px;color:var(--muted);line-height:1.6}
.deck-cards{display:grid;gap:14px}
.deck-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px}
[data-theme="dark"] .deck-card{background:var(--surface)}
.deck-card>header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.deck-card h3{font-family:var(--font-story);font-size:20px;font-weight:600;margin:2px 0 0}
.purpose-eyebrow{font-size:11px;color:var(--accent);font-weight:600}
.deck-score{text-align:right}
.deck-score b{display:block;font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.deck-score span{font-size:12px;color:var(--muted)}
.deck-strip{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0}
.deck-strip li{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 6px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);text-align:center;min-width:0}
[data-theme="dark"] .deck-strip li{background:var(--paper)}
.deck-strip li.is-ult{border-color:var(--accent)}
.deck-strip img{width:44px;height:44px;border-radius:6px;background:#2b2724}
.deck-strip .slot{font-size:10px;color:var(--muted)}
.deck-strip strong{font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.deck-strip small{font-size:10px;color:var(--ink-2)}
.deck-strip.compact{display:flex;flex-wrap:wrap;gap:4px}
.deck-strip.compact li{padding:3px;border:0;background:none;width:auto}
.deck-strip.compact img{width:30px;height:30px}
.deck-strip.compact .slot,.deck-strip.compact strong,.deck-strip.compact small{display:none}
.deck-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 16px;margin:14px 0 10px;font-size:13px}
.deck-meta dt{font-size:11px;color:var(--muted);margin:0}
.deck-meta dd{margin:2px 0 0;font-variant-numeric:tabular-nums}
.deck-card details{border-top:1px solid var(--line-soft);padding-top:10px;font-size:13px}
.deck-card summary{cursor:pointer;font-size:12px;color:var(--ink-2);font-weight:600}
.deck-card footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.deck-card footer .hint{margin-left:auto}
.thumb-dummy{background-image:url(images/world.webp)}
@media(max-width:1100px){.purpose-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.deck-strip{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:700px){.purpose-grid{grid-template-columns:1fr 1fr}.purpose-tile{min-height:0}.deck-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.deck-score{text-align:left}.deck-card{padding:14px}}
@media(min-width:1101px){.quick-cards{grid-template-columns:repeat(5,minmax(0,1fr))}}

.deck-hunt{margin:12px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--accent) 5%,var(--paper))}
[data-theme="dark"] .deck-hunt{background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.deck-hunt-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.deck-hunt h4{font-family:var(--font-story);font-size:15px;font-weight:600;margin:0}
.deck-hunt-rows{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.deck-hunt-rows li{display:grid;grid-template-columns:22px 1fr auto;gap:2px 10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line-soft);font-size:13px}
.deck-hunt-rows li:first-child{border-top:0}
.deck-hunt-rows .rank{font-size:12px;color:var(--muted);font-weight:600}
.deck-hunt-rows .ground{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-hunt-rows b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.deck-hunt-rows b small{font-size:11px;color:var(--muted);font-weight:500;margin-left:4px}
.deck-hunt-rows .kph{grid-column:2/4;font-size:11px;color:var(--muted)}
.deck-hunt>.hint{margin:8px 0 0}
@media(max-width:700px){.deck-hunt-rows li{grid-template-columns:22px 1fr}.deck-hunt-rows b{grid-column:2;text-align:left}}

/* 캐릭터 능력치: 핵심 칸 먼저, 세부 능력치는 접기 */
.field-guide{grid-column:1/-1;margin:2px 0 0;font-size:12px;line-height:1.55}
.more-fields{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:10px}
.more-fields summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);list-style:none;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.more-fields summary::-webkit-details-marker{display:none}
.more-fields summary::before{content:'▸';font-size:11px}
.more-fields[open] summary::before{content:'▾'}
.more-fields summary small{font-weight:400;color:var(--muted);font-size:12px}
.more-fields .fields{margin-top:12px}
/* 스크린샷 붙여넣기·끌어다 놓기 */
.ocr-drop{position:relative;display:grid;gap:6px;justify-items:center;text-align:center;padding:22px 14px;margin-top:12px;border:1.5px dashed var(--line);border-radius:var(--r-md);background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s}
.ocr-drop.is-over,.ocr-drop:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface-2))}
.ocr-drop b{font-size:14px;font-weight:600}
.ocr-drop .hint{margin:0;font-size:12px}
.ocr-drop kbd{font-family:inherit;font-size:11px;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--paper)}
.ocr-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.ocr-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ocr-controls-wrap{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:10px}
.ocr-controls-wrap>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2)}
.ocr-controls-wrap>summary small{font-weight:400;color:var(--muted);font-size:12px}

/* 몬스터 엽전표: 사냥터 고르기 */
.ground-panel{margin-bottom:16px}
.ground-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ground-head h2{margin:0;font-size:17px}
.ground-head input{width:220px;max-width:100%}
.ground-picker{display:flex;flex-wrap:wrap;gap:6px}
.ground-pick{display:grid;gap:2px;justify-items:start;padding:7px 11px;border:1px solid var(--line);border-radius:4px;background:var(--surface-2);color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-height:44px}
.ground-pick strong{font-size:13px;font-weight:600;line-height:1.2}
.ground-pick small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ground-pick:hover{border-color:var(--ink-2)}
.ground-pick.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface-2));box-shadow:inset 0 0 0 1px var(--accent)}
.ground-pick.is-active small{color:var(--ink-2)}
#ground-summary{margin:12px 0 0}
@media(max-width:700px){.ground-pick{padding:6px 9px;min-height:40px}.ground-head input{width:100%}}
.cp-cell{white-space:nowrap}
.cp-cell strong{font-variant-numeric:tabular-nums;font-size:14px}
.cp-cell small{display:block;font-size:11px;color:var(--muted)}
.cp-cell .muted{color:var(--muted);font-size:12px}
.mon-cell{display:flex;align-items:center;gap:10px;min-width:200px}
.mon-cell img,.mon-blank{width:40px;height:40px;flex:0 0 40px;object-fit:contain;border-radius:4px;background:color-mix(in srgb,var(--ink) 6%,var(--surface-2))}
[data-theme="dark"] .mon-cell img,[data-theme="dark"] .mon-blank{background:color-mix(in srgb,#fff 8%,var(--surface))}
.dex-card .dex-mon{width:40px;height:40px;flex:0 0 40px;object-fit:contain;border-radius:4px;background:color-mix(in srgb,var(--ink) 6%,var(--surface-2))}
.dex-portrait{display:block;width:96px;height:96px;object-fit:contain;margin:0 0 12px;border-radius:6px;background:color-mix(in srgb,var(--ink) 6%,var(--surface-2))}
[data-theme="dark"] .dex-card .dex-mon,[data-theme="dark"] .dex-portrait{background:color-mix(in srgb,#fff 8%,var(--surface))}