:root{--bg:#f6f3ee;--bg2:#efe9e0;--card:#fff;--ink:#241f1a;--mute:#7d7368;--line:#e5ddd1;
 --brand:#c8791f;--brand-ink:#8a5314;--accent:#e0561f;--shadow:0 1px 2px rgba(40,30,20,.06),0 4px 14px rgba(40,30,20,.05)}
html[data-theme="dark"]{--bg:#16130f;--bg2:#1e1a15;--card:#221d17;--ink:#f0e9df;--mute:#9c9186;
 --line:#332b22;--brand:#e2a04a;--brand-ink:#e2a04a;--accent:#f4713d;--shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Pretendard','Malgun Gothic','Apple SD Gothic Neo',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 18px}
header.top{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:18px;height:60px}
.brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:19px;color:var(--brand-ink)}
.brand .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;color:#fff;font-size:14px;font-weight:900}
nav.main{display:flex;gap:4px;flex:1}
nav.main a{padding:8px 13px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--mute)}
nav.main a:hover{background:var(--bg2);color:var(--ink)}
nav.main a.on{background:var(--bg2);color:var(--brand-ink)}
.icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:15px}
.menu-btn{display:none}
.btn{display:inline-block;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.danger{background:#b4402f;border-color:#b4402f;color:#fff}
.btn.small{padding:5px 10px;font-size:12.5px;border-radius:7px}
main{padding:26px 0 70px;min-height:60vh}
h1{font-size:25px;margin:0 0 6px}h2{font-size:18px;margin:30px 0 12px}
.sub{color:var(--mute);font-size:14px;margin:0 0 22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.hero{background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;border-radius:18px;padding:34px 30px;margin-bottom:26px}
.hero h1{font-size:29px;color:#fff;margin-bottom:8px}.hero p{margin:0;opacity:.94;font-size:15px}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.quick a,.quick .card{padding:20px;display:block;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.quick a:hover{border-color:var(--brand)}
.quick .t{font-weight:800;font-size:16px;margin-bottom:5px}.quick .d{font-size:13px;color:var(--mute)}
.notice-box{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14px;margin-bottom:22px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tabs button{padding:8px 15px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--mute);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.tabs button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.tier-row{display:flex;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:11px;background:var(--card);box-shadow:var(--shadow)}
.tier-label{width:78px;flex:none;display:grid;place-items:center;font-size:24px;font-weight:900;color:#fff}
.tier-items{flex:1;display:flex;flex-wrap:wrap;gap:10px;padding:13px 15px;min-height:74px;align-items:center}
.tier-empty{color:var(--mute);font-size:13px}
.T-Splus{background:#e0561f}.T-S{background:#e08a1f}.T-A{background:#3f9a55}.T-B{background:#3f78a8}.T-C{background:#8a8177}.T-F{background:#a4453c}
.ci{display:flex;flex-direction:column;align-items:center;gap:4px;width:74px;cursor:pointer}
.ci:hover .face{border-color:var(--brand)}
.face{width:52px;height:52px;border-radius:14px;background:var(--bg2);border:2px solid var(--line);object-fit:cover;display:grid;place-items:center;font-size:22px}
.ci .nm{font-size:11.5px;text-align:center;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.filters input,.filters select{padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;background:var(--card);color:var(--ink);font-family:inherit}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:13px}
.ccard{display:flex;gap:12px;align-items:center;padding:13px;cursor:pointer}
.ccard:hover{border-color:var(--brand)}
.ccard .nm{font-weight:700;font-size:15px}.ccard .mt{font-size:12px;color:var(--mute);margin-top:2px}
.badges{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;color:#fff;padding:2px 6px;border-radius:5px}
.tag .cl{opacity:.85;font-weight:600}.tag.none{background:var(--line);color:var(--mute)}
table.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);font-size:14px}
table.tbl th,table.tbl td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.tbl th{background:var(--bg2);font-size:13px;font-weight:700;white-space:nowrap}
table.tbl th.sortable{cursor:pointer}
table.tbl tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.eff{font-weight:800;color:var(--brand-ink)}.eff.good{color:#2f8a45}.eff.bad{color:#b4402f}
.detail{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
.illust{width:100%;border-radius:16px;border:1px solid var(--line);background:var(--bg2);display:block}
.kv{display:grid;grid-template-columns:118px 1fr;gap:8px 14px;font-size:14.5px}
.kv .k{color:var(--mute);font-size:13px}
.src{font-size:11.5px;color:var(--mute);margin-top:8px}
.pre{white-space:pre-wrap;font-size:14.5px;line-height:1.6}
.empty{text-align:center;color:var(--mute);padding:48px 20px;font-size:14.5px}
.notice{padding:52px 24px;text-align:center}.notice .big{font-size:21px;font-weight:800;margin-bottom:8px}
footer.site{border-top:1px solid var(--line);color:var(--mute);font-size:12.5px;padding:26px 0;text-align:center;background:var(--card)}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:11px 14px;padding:16px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--mute);font-weight:600}
.form input,.form select,.form textarea{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:14px;background:var(--bg);color:var(--ink);font-family:inherit}
.form textarea{min-height:74px;resize:vertical}.form .full{grid-column:1/-1}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.msg{padding:11px 15px;border-radius:10px;font-size:13.5px;margin:12px 0;display:none}
.msg.ok{display:block;background:#e4f2e6;color:#256b2c}.msg.err{display:block;background:#f9e5e1;color:#a3382a}
html[data-theme="dark"] .msg.ok{background:#1d3320;color:#8fdb98}
html[data-theme="dark"] .msg.err{background:#3a201c;color:#f0a394}
.itemgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.itemgrid .ig{display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 9px}
.itemgrid .ig span{font-size:12.5px;flex:1}
.itemgrid .ig input{width:88px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font-size:13px;text-align:right}
.chip{display:inline-block;background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:12px;margin:2px 3px 2px 0}
@media(max-width:820px){.detail{grid-template-columns:1fr}
 nav.main{position:fixed;top:60px;left:0;right:0;background:var(--card);border-bottom:1px solid var(--line);flex-direction:column;padding:8px;display:none}
 nav.main.open{display:flex}.menu-btn{display:grid}.tier-label{width:56px;font-size:19px}}
.arow{display:flex;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid var(--line)}
.arow:last-child{border-bottom:0}
.arow:hover{background:var(--bg2)}
.arow b{font-size:14px}