.catalog-nav { display:flex; gap:6px; overflow-x:auto; padding:16px 0 22px; margin:0 auto 12px; scrollbar-width:thin; }
.catalog-nav a { display:flex; align-items:center; gap:8px; padding:10px 14px; white-space:nowrap; color:#a9a69d; border:1px solid #292920; border-radius:4px; font-size:12px; text-decoration:none; transition:background .18s,color .18s,border-color .18s; }
.catalog-nav a:hover,.catalog-nav a.active,.catalog-nav a[aria-current="page"] { color:#e1c185; background:#242016; border-color:#685434; }
.catalog-nav a span { font-size:10px; opacity:.65; font-variant-numeric:tabular-nums; }
.expanded-filter { flex-wrap:wrap; gap:12px; }
.expanded-filter label { min-width:112px; }
.pagination { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; margin:32px 0 8px; }
.pagination a,.pagination span { display:grid; place-items:center; min-width:38px; min-height:38px; padding:7px 12px; border:1px solid #353125; border-radius:3px; color:#b9b3a4; font-size:12px; text-decoration:none; }
.pagination a:hover,.pagination [aria-current="page"] { color:#edd299; background:#2b2418; border-color:#897044; }
.pagination span { border-color:transparent; }
.data-list { border-top:1px solid #353125; }
.data-row { display:flex; align-items:center; gap:18px; padding:19px 20px; border-bottom:1px solid #292820; color:#ddd7cb; text-decoration:none; background:rgba(20,20,17,.58); transition:background .18s; }
.data-row:hover { background:rgba(58,48,30,.46); }
.data-row h3 { margin:0 0 4px; font-size:15px; font-weight:500; line-height:1.55; }
.data-row p { margin:0; color:#8f8d83; font-size:12px; line-height:1.65; }
.data-row>div:nth-child(2) { min-width:0; flex:1; }
.row-emblem { width:42px; height:46px; display:grid; place-items:center; flex:0 0 42px; border:1px solid #4c422d; color:#caaa6c; background:linear-gradient(145deg,#29261d,#141512); font-family:Georgia,serif; font-size:18px; border-radius:3px; }
.row-secondary { color:#9e9787; font-size:12px; text-align:right; max-width:30%; line-height:1.7; }
.row-level { flex:0 0 65px; font-size:12px; color:#c3aa78; text-align:right; font-variant-numeric:tabular-nums; }
.row-act { flex:0 0 52px; color:#c4a876; font-family:Georgia,serif; font-size:13px; }
.area-levels { display:flex; gap:16px; color:#aca48f; font-size:12px; font-variant-numeric:tabular-nums; }
.class-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:22px 0; }
.class-grid a { display:flex; flex-direction:column; gap:7px; padding:18px; border:1px solid #302d23; border-radius:4px; text-decoration:none; color:#dbd3c2; background:linear-gradient(135deg,#211f19,#161714); }
.class-grid a:hover,.class-grid a.active,.class-grid a[aria-current="page"] { border-color:#8c7142; background:#29231a; }
.class-grid strong { font-size:14px; font-weight:500; }
.class-grid span,.class-grid small { color:#958b77; font-size:11px; }
.catalog-callout { margin:22px 0; padding:17px 20px; color:#aca595; background:rgba(39,34,24,.5); border-left:2px solid #8b7043; font-size:12px; line-height:1.9; }
.catalog-callout a { color:#dbc18a; }
.guide-catalog,.recipe-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:24px 0; }
.text-guide-card,.recipe-card { display:flex; flex-direction:column; padding:24px; border:1px solid #353025; border-radius:5px; background:linear-gradient(145deg,#211f19,#151612); color:#d5cebe; text-decoration:none; transition:border-color .18s,transform .18s; min-width:0; }
.text-guide-card:hover,.recipe-card:hover { border-color:#8a7145; transform:translateY(-2px); }
.text-guide-card h3,.recipe-card h3 { color:#e0d5c0; font-size:16px; line-height:1.75; margin:12px 0; font-weight:500; }
.text-guide-card p,.recipe-card p { color:#999487; font-size:12px; line-height:1.9; margin:0 0 16px; }
.text-guide-card>span:last-child,.recipe-card>span:last-child { margin-top:auto; color:#bba272; font-size:11px; }
.recipe-card ul { padding-left:18px; margin:5px 0 18px; color:#b5ae9e; font-size:12px; line-height:1.9; }
.recipe-card .recipe-arrow { color:#b39356; font-size:18px; }
.edition-badges { display:flex; gap:5px; flex-wrap:wrap; margin:8px 0; }
.edition-badges span { padding:3px 7px; background:#25261f; border:1px solid #3a3b2f; border-radius:3px; font-size:10px; color:#aaa48e; line-height:1.5; }
.effects-group { margin:22px 0; padding:18px 20px; background:rgba(9,12,13,.4); border:1px solid #2d302a; border-radius:4px; }
.effects-group h3 { margin:0 0 12px; color:#cfb681; font-size:13px; font-weight:500; }
.effect-list { margin:0; padding:0; list-style:none; }
.effect-list li { color:#8aa8d9; font-size:13px; line-height:1.95; overflow-wrap:anywhere; }
.effects-group .effect-list li+li { margin-top:3px; }
.table-scroll { width:100%; overflow-x:auto; margin:18px 0; scrollbar-width:thin; }
.catalog-table { width:100%; border-collapse:collapse; font-size:12px; text-align:left; }
.catalog-table th { color:#aa9874; background:#222018; font-weight:500; white-space:nowrap; }
.catalog-table th,.catalog-table td { padding:12px 14px; border-bottom:1px solid #343026; line-height:1.7; vertical-align:top; }
.catalog-table td { color:#c0b9aa; }
.catalog-table a { color:#d9bd83; text-underline-offset:3px; }
.table-caption { font-size:11px; line-height:1.8; color:#898575; margin:10px 0 20px; }
.related-links { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 25px; }
.related-links a,.set-link { display:inline-block; padding:8px 11px; border:1px solid #3d3627; border-radius:3px; font-size:12px; color:#cbb784; text-decoration:none; }
.related-links a:hover,.set-link:hover { background:#30291b; border-color:#8b7043; }
.bonus-label { color:#acbd82; font-size:12px; margin:15px 0 5px; }
.skill-description { color:#c2bba9; font-size:14px; line-height:2; white-space:pre-line; margin:22px 0; }
.search-result-section { margin:32px 0; }
.search-result-section>h2 { display:flex; align-items:center; gap:12px; color:#d3c4a8; font-weight:500; font-size:18px; }
.search-result-section>h2 span { color:#8f826a; font-size:12px; }
.coverage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:28px 0; }
.coverage-grid>div { padding:22px; background:#1c1d17; border:1px solid #383326; border-radius:4px; }
.coverage-grid strong { display:block; font-size:30px; color:#d5b77c; font-family:Georgia,serif; font-weight:400; margin-bottom:8px; }
.coverage-grid span { color:#a19a89; font-size:12px; }
.coverage-content { max-width:860px; padding:10px 0 40px; color:#b9b09f; font-size:14px; line-height:2; }
.coverage-content h2 { color:#d8c9ab; font-size:20px; font-weight:500; margin-top:32px; }
.coverage-content a { color:#d5b87c; text-underline-offset:4px; }
.archive-overview { padding-top:32px; padding-bottom:64px; }
.archive-overview h2 { color:#e0d2b3; font-family:Georgia,'Noto Serif JP',serif; font-size:26px; font-weight:500; margin:0 0 10px; }
.archive-overview>p { font-size:13px; color:#8e8b7f; margin:0 0 22px; }
.archive-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.archive-grid a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px; border:1px solid #383225; border-radius:4px; background:linear-gradient(130deg,#242118,#171914); text-decoration:none; color:#c6b695; }
.archive-grid a:hover { border-color:#8b7043; }
.archive-grid strong { display:block; font-weight:500; font-size:15px; color:#d8c7a7; margin-bottom:6px; }
.archive-grid small,.archive-grid span { color:#9d917a; font-size:11px; }
.archive-grid b { font-size:26px; font-weight:400; color:#bea06b; font-family:Georgia,serif; }
.item-card h3 { overflow-wrap:anywhere; }
.suggestion>svg:not(.mini-item) { width:24px; height:24px; flex:0 0 24px; margin:0 6px; }
.data-row h3,.data-row small,.text-guide-card h3,.recipe-card h3 { overflow-wrap:anywhere; }
.data-row small,.related-links small,.row-secondary small { display:block; color:var(--muted); font-size:11px; }
.pagination>div { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.effects-group summary { color:var(--gold-light); cursor:pointer; margin-bottom:12px; }
.set-link { display:inline-flex; align-items:center; gap:8px; }
.set-link svg { width:16px; height:16px; }
.detail-content .data-row { padding-left:8px; padding-right:8px; }
@media(min-width:1200px) { .guide-catalog { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:900px) { .guide-catalog,.recipe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .coverage-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .data-row { gap:12px; padding:16px 12px; } .row-secondary { max-width:26%; font-size:11px; } }
@media(max-width:600px) { .catalog-nav { margin-right:16px; padding-right:16px; } .catalog-nav a { padding:9px 11px; font-size:11px; } .class-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .class-grid a { padding:15px; } .guide-catalog,.recipe-grid { grid-template-columns:1fr; gap:12px; } .text-guide-card,.recipe-card { padding:20px; } .row-emblem { width:32px; height:37px; flex-basis:32px; font-size:14px; } .row-level { flex-basis:48px; font-size:11px; } .data-row { gap:10px; } .data-row h3 { font-size:13px; } .data-row p { font-size:11px; } .row-secondary { display:none; } .area-levels { gap:9px; font-size:10px; } .row-act { flex-basis:40px; font-size:11px; } .expanded-filter label { flex:1 1 42%; min-width:0; } .expanded-filter select { max-width:100%; width:100%; } .coverage-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .coverage-grid>div { padding:17px; } .coverage-grid strong { font-size:25px; } .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .archive-grid a { padding:15px 13px; } .archive-grid strong { font-size:12px; } .archive-grid b { font-size:23px; } .archive-overview h2 { font-size:23px; } .effects-group { padding:15px; } .effect-list li { font-size:12px; } .catalog-table th,.catalog-table td { padding:10px; } }
@media(prefers-reduced-motion:reduce) { .text-guide-card:hover,.recipe-card:hover { transform:none; } }