:root{--bg:#0f1115;--bg-elevated:#171a21;--bg-card:#1c2028;--border:#2a2f3a;--text:#eef0f4;--text-dim:#9aa2b1;--accent:#d4af6a;--wei:#4d7ff0;--wei-tint:#1a2440;--shu:#1e8f5f;--shu-tint:#12261e;--wu:#e04b4b;--wu-tint:#331616;--qun:#a3703b;--qun-tint:#2b2016;--tier-sss:#ff5f6d;--tier-ss:#ff9d4d;--tier-s:#ffd23f;--tier-a:#b6e35a;--tier-b:#6bd0d0;--tier-c:#8f9bb3;--tier-d:#6b7280;--radius:14px;--radius-sm:8px}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:Pretendard,Noto Sans KR,system-ui,-apple-system,sans-serif}a{color:inherit;text-decoration:none}button{font-family:inherit}.nation-위나라,.nation-위{--nation:var(--wei);--nation-tint:var(--wei-tint)}.nation-촉나라,.nation-촉{--nation:var(--shu);--nation-tint:var(--shu-tint)}.nation-오나라,.nation-오{--nation:var(--wu);--nation-tint:var(--wu-tint)}.nation-군웅{--nation:var(--qun);--nation-tint:var(--qun-tint)}.container{max-width:1200px;margin:0 auto;padding:0 20px}.site-header{z-index:40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);background:#0f1115e6;position:sticky;top:0}.site-header-inner{align-items:center;gap:24px;max-width:1200px;height:56px;margin:0 auto;padding:0 20px;display:flex}.site-logo{letter-spacing:-.5px;font-weight:800}.site-nav{flex:1;gap:4px;display:flex}.site-nav a{border-radius:var(--radius-sm);color:var(--text-dim);padding:8px 12px;font-size:14px;font-weight:600}.site-nav a.active,.site-nav a:hover{color:var(--text);background:var(--bg-elevated)}.search-box{background:var(--bg-elevated);border:1px solid var(--border);border-radius:999px;align-items:center;gap:8px;min-width:220px;padding:8px 14px;display:flex}.search-box input{color:var(--text);background:0 0;border:none;outline:none;width:100%;font-size:14px}.search-box-hero{min-width:unset;width:100%;padding:16px 22px;font-size:16px}.search-box-hero input{font-size:16px}.nation-section{margin:36px 0}.nation-title{color:var(--nation);align-items:center;gap:10px;margin-bottom:14px;font-size:20px;font-weight:800;display:flex}.nation-title .dot{background:var(--nation);border-radius:50%;width:10px;height:10px}.general-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;display:grid}.general-thumb{cursor:pointer;border-radius:var(--radius);background:linear-gradient(180deg, var(--nation-tint), var(--bg-card));border:1px solid var(--border);transition:transform .15s,border-color .15s;position:relative;overflow:hidden}.general-thumb:hover{border-color:var(--nation);transform:translateY(-3px)}.general-thumb img{aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;width:100%}.general-thumb .badges{gap:4px;display:flex;position:absolute;top:6px;left:6px}.badge{background:#0000008c;border:1px solid #ffffff26;border-radius:999px;padding:2px 6px;font-size:10px;font-weight:700}.badge-jin{color:#ffd23f;border-color:#ffd23f66}.badge-plus{color:#7fd6ff;border-color:#7fd6ff66}.general-thumb .name{text-align:center;padding:8px 8px 10px;font-size:13px;font-weight:700}.general-thumb .tier{background:#0009;border-radius:6px;padding:2px 6px;font-size:11px;font-weight:800;position:absolute;top:6px;right:6px}.modal-overlay{z-index:100;background:#000000b8;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal-card{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;width:100%;max-width:980px;max-height:92vh;position:relative;overflow-y:auto}.modal-close{float:right;border:1px solid var(--border);width:36px;height:36px;color:var(--text);cursor:pointer;z-index:2;background:#00000080;border-radius:50%;margin:12px;font-size:18px;position:sticky;top:12px;right:12px}.card-layout{grid-template-columns:320px 1fr;gap:0;display:grid}@media (width<=760px){.card-layout{grid-template-columns:1fr}}.card-left{background:linear-gradient(180deg, var(--nation-tint), transparent 40%), var(--bg-elevated);border-radius:20px 0 0 20px;padding:24px 20px}@media (width<=760px){.card-left{border-radius:20px 20px 0 0}}.card-left .name-row{flex-wrap:wrap;align-items:baseline;gap:10px;display:flex}.card-left .name-row h2{margin:0;font-size:24px}.card-left .release-date{color:var(--text-dim);font-size:13px}.card-left .legend-plus-date{color:#7fd6ff;margin-top:2px;font-size:12px}.tag-row{flex-wrap:wrap;gap:6px;margin:10px 0 16px;display:flex}.tag{background:var(--nation-tint);color:var(--nation);border:1px solid var(--nation);border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700}.portrait-frame{justify-content:center;align-items:flex-start;width:100%;min-height:320px;margin-bottom:14px;display:flex;position:relative;overflow:visible}.portrait-frame img{object-fit:contain;object-position:50% 0%;-webkit-mask-composite:source-in;width:100%;max-height:420px;-webkit-mask-image:linear-gradient(#000 72%,#0000 100%),linear-gradient(90deg,#0000 0%,#000 6% 94%,#0000 100%);mask-image:linear-gradient(#000 72%,#0000 100%),linear-gradient(90deg,#0000 0%,#000 6% 94%,#0000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.stat-block{flex-direction:column;gap:6px;font-size:13px;display:flex}.stat-block .row{color:var(--text-dim);align-items:baseline;gap:10px;display:flex}.stat-block .row>span{flex-shrink:0;min-width:44px}.stat-block .row b{color:var(--text);font-weight:700}.card-right{padding:20px 22px 28px}.tabs{border-bottom:1px solid var(--border);gap:6px;margin-bottom:16px;display:flex}.tabs button{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 14px;font-size:14px;font-weight:700}.tabs button.active{color:var(--text);border-bottom-color:var(--nation)}.section-title{color:var(--text-dim);letter-spacing:.3px;margin:18px 0 8px;font-size:13px;font-weight:800}.info-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;padding:14px 16px}.info-card-light{border-radius:var(--radius-sm);color:#2a2416;background:#f4efe3;border:1px solid #d9cfb8;margin-bottom:10px;padding:14px 16px}.ref-table-light{border-collapse:collapse;background:#f4efe3;width:100%;font-size:12px}.ref-table-light td{color:#2a2416;border:1px solid #d9cfb8;padding:6px 10px}.ref-table-light tr:first-child td{color:#8a5a1e;background:#ece2cc;font-weight:700}.final-summary-box{border-left:3px solid var(--accent);background:var(--bg-card);border-radius:0 8px 8px 0;margin-top:12px;padding:10px 14px}.final-summary-label{color:var(--accent);letter-spacing:.5px;margin-bottom:4px;font-size:11px;font-weight:800;display:block}.chip-row{flex-wrap:wrap;gap:6px;display:flex}.chip{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);border-radius:999px;padding:3px 9px;font-size:12px}.chip-color{border:1px solid #0000;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}.chip-buff{color:#4ade80;background:#1e8f5f22;border-color:#4ade8055}.chip-debuff{color:#ff8a8a;background:#e04b4b22;border-color:#ff8a8a55}.chip-control{color:#c4b5fd;background:#7c3aed22;border-color:#c4b5fd55}.chip-heal{color:#5eead4;background:#0d948822;border-color:#5eead455}.chip-damage{color:#fdba74;background:#ea580c22;border-color:#fdba7455}.chip-special{color:#d4af6a;background:#d4af6a22;border-color:#d4af6a55}.chip-neutral{background:var(--bg-card);color:var(--text-dim);border-color:var(--border)}.summary-line{margin-bottom:10px;font-size:14px;line-height:1.9}.summary-line .line{margin-bottom:4px;display:block}.meta-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.meta-item{flex-direction:column;gap:4px;display:flex}.meta-item .label{color:var(--text-dim);font-size:12px}.tier-pill{border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;font-size:13px;font-weight:900;display:inline-flex}.star-rating{gap:2px;display:inline-flex}.star-rating .star{cursor:default;width:20px;height:20px;position:relative}.star-rating.editable .star{cursor:pointer}.star-rating .star svg{width:100%;height:100%;display:block}.star-half{position:absolute;inset:0;overflow:hidden}.skill-icon-row{align-items:center;gap:12px;margin-bottom:10px;display:flex}.skill-icon{border:1px solid var(--border);object-fit:cover;border-radius:10px;width:56px;height:56px}.skill-pair-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (width<=560px){.skill-pair-grid{grid-template-columns:1fr}}.skill-pair-grid .info-card{margin-bottom:0}.stage-toggle{gap:6px;margin:10px 0;display:flex}.stage-toggle button{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-dim);cursor:pointer;flex:1;padding:8px 6px;font-size:12px;font-weight:700}.stage-toggle button.active{color:var(--text);border-color:var(--nation);background:var(--nation-tint)}.effect-text strong{color:var(--accent)}.horse-block{grid-template-columns:140px 1fr;align-items:start;gap:14px;margin-bottom:10px;display:grid}.horse-block img{object-fit:contain;object-position:top;width:100%}.horse-effects-title{align-items:center;gap:8px;margin-bottom:8px;font-weight:800;display:flex}.horse-effects-title img{object-fit:contain;width:28px;height:28px}.horse-effect-row{color:var(--text-dim);font-size:13px;line-height:1.7}.horse-effect-row b{color:var(--accent)}.filter-panel{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.filter-panel select{background:var(--bg-elevated);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;font-size:13px}.home-grid{grid-template-columns:1.3fr 1fr;gap:18px;margin:24px 0;display:grid}@media (width<=820px){.home-grid{grid-template-columns:1fr}}.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.panel h3{margin:0 0 12px;font-size:15px}.hero-search{text-align:center;margin:28px 0}.hero-search h1{margin-bottom:14px;font-size:22px}.calendar-grid{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.calendar-cell{border:1px solid var(--border);border-radius:8px;min-height:74px;padding:4px;font-size:11px}.calendar-cell .date-num{color:var(--text-dim);margin-bottom:3px}.calendar-event{background:var(--nation-tint);color:var(--nation);white-space:nowrap;text-overflow:ellipsis;border-radius:4px;margin-bottom:2px;padding:1px 5px;font-size:10px;font-weight:700;overflow:hidden}.timeline-wrap{overflow-x:auto}.timeline-table{border-collapse:collapse;font-size:11px}.timeline-table th,.timeline-table td{border:1px solid var(--border);text-align:center;min-width:34px;height:30px;padding:0}.timeline-table th{color:var(--text-dim);background:var(--bg-card);z-index:1;font-weight:600;position:sticky;top:0}.timeline-table .row-label{background:var(--bg-card);z-index:1;text-align:left;white-space:nowrap;text-overflow:ellipsis;min-width:150px;max-width:220px;padding:0 10px;font-weight:700;position:sticky;left:0;overflow:hidden}.timeline-table .today-col{background:#d4af6a1f}.timeline-bar{border-radius:4px;height:18px;margin:0 1px}.tier-table{flex-direction:column;gap:10px;display:flex}.tier-row{align-items:center;gap:12px;display:flex}.tier-row .tier-label{text-align:center;border-radius:8px;flex-shrink:0;width:56px;padding:8px 0;font-weight:900}.tier-row .tier-members{flex-wrap:wrap;gap:8px;display:flex}.tier-row .tier-members img{object-fit:cover;border:1px solid var(--border);border-radius:8px;width:48px;height:48px}.search-results-section{margin-bottom:22px}.search-results-section h4{color:var(--text-dim);margin-bottom:8px;font-size:13px}.search-result-row{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:10px;margin-bottom:6px;padding:10px;display:flex}.search-result-row:hover{border-color:var(--accent)}.search-result-row img{object-fit:cover;border-radius:6px;width:36px;height:36px}.login-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);max-width:360px;margin:60px auto;padding:28px}.login-box input{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);margin-bottom:10px;padding:10px 12px}.login-box button{border-radius:var(--radius-sm);background:var(--accent);color:#221a0e;cursor:pointer;border:none;width:100%;padding:10px;font-weight:800}.article-body{color:var(--text);font-size:14px;line-height:1.8}.article-body h2{color:var(--accent);margin-top:26px;font-size:18px}.article-body h3{margin-top:20px;font-size:15px}.article-body p{margin:10px 0}.article-body img{border-radius:10px;max-width:100%;margin:12px 0;display:block}.article-body table{border-collapse:collapse;background:#f4efe3;width:100%;margin:14px 0;font-size:12px}.article-body th,.article-body td{color:#2a2416;border:1px solid #d9cfb8;padding:6px 10px}.article-body th{color:#8a5a1e;background:#ece2cc}