:root{
    --bg:#f8fafc; --fg:#0f172a; --muted:#64748b; --card:#ffffff; --border:#e2e8f0;
    --link:#0f172a; --link-hover:#111827; --primary:#0f172a; --primary-fg:#ffffff;
    --chip-green:#065f46; --chip-red:#991b1b; --chip-blue:#1e3a8a; --chip-amber:#92400e;
    --chip-bg:#f1f5f9;
}
[data-theme="dark"]{
    --bg:#0b1220; --fg:#e2e8f0; --muted:#94a3b8; --card:#0f172a; --border:#1f2937;
    --link:#e2e8f0; --link-hover:#ffffff; --primary:#e2e8f0; --primary-fg:#0b1220;
    --chip-green:#34d399; --chip-red:#fca5a5; --chip-blue:#93c5fd; --chip-amber:#fbbf24;
    --chip-bg:#111827;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;background:var(--bg);color:var(--fg);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    line-height:1.45;-webkit-text-size-adjust:100%;
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
.container{max-width:1120px;margin:0 auto;padding:0 16px}

/* === Header / GNB ======================================================== */
.site-header{
    position:sticky;top:0;z-index:20;
    background:color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter:saturate(150%) blur(6px);
    border-bottom:1px solid var(--border);
}
.site-header .row{display:flex;gap:8px;align-items:center;padding:10px 0;position:relative}
.brand{font-weight:800;letter-spacing:.2em}

.btn{border:1px solid var(--border);background:var(--card);color:var(--fg);
    padding:10px 12px;border-radius:12px;cursor:pointer;min-height:44px}
.btn.primary{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.btn.ghost{background:transparent}

.gnb{display:none;flex-direction:column;gap:6px;position:absolute;left:16px;right:16px;top:100%;
    background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:8px}
.gnb a{padding:10px 12px;border-radius:10px;border:1px solid transparent}
.gnb a.active,.gnb a:hover{background:var(--card);border-color:var(--border)}
.gnb.is-open{display:flex}

.mobile-only{display:inline-flex}
.desktop-only{display:none}

/* ≥768px: 데스크탑 GNB */
@media (min-width:768px){
    .gnb{display:flex;position:static;flex-direction:row;background:transparent;border:none;padding:0}
    .mobile-only{display:none}
    .desktop-only{display:inline-flex}
}

/* === Cards / Sections ==================================================== */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;
    box-shadow:0 1px 2px rgb(0 0 0 / 4%);padding:16px}
.section{margin:20px 0}
.section .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section .title{font-weight:700}

/* === Form ================================================================ */
.input, select{
    width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);
    background:var(--card);color:var(--fg);outline:none;min-height:44px
}
.input:focus, select:focus{border-color:color-mix(in oklab, var(--primary) 30%, var(--border))}
.form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.form-row > label{min-width:80px}

/* Stack on small, row on md+ */
@media (max-width:767.98px){
    .form-row{flex-direction:column;align-items:stretch}
    .form-row > label{min-width:auto}
}

/* === Slideshow =========================================================== */
.slideshow{position:relative;height:200px;border-radius:16px;overflow:hidden;border:1px solid var(--border)}
.slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease;opacity:0}
.slide.active{opacity:1}

/* heights per breakpoint */
@media (min-width:768px){ .slideshow{height:280px} }
@media (max-width:479.98px){ .slideshow{height:160px} }

/* === Chips / Badges ====================================================== */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 8px;border-radius:999px;background:var(--chip-bg)}
.chip.green{color:var(--chip-green)}
.chip.red{color:var(--chip-red)}
.chip.blue{color:var(--chip-blue)}
.chip.amber{color:var(--chip-amber)}
.badge{font-size:12px;opacity:.8}

/* === Table (mobile scroll) ============================================== */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
.table th{text-wrap:nowrap}

/* 스크롤 래퍼 */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll .table{min-width:560px}
.table-scroll.snap{scroll-snap-type:x mandatory}
.table-scroll.snap .table th,.table-scroll.snap .table td{scroll-snap-align:start}

/* === Footer ============================================================== */
.site-footer{border-top:1px solid var(--border);margin-top:24px}
.site-footer .row{padding:16px 0;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}

/* ===== Header / GNB ===== */
.site-header{
    position:sticky; top:0; z-index:30;
    background:color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter:saturate(150%) blur(6px);
    border-bottom:1px solid var(--border);
}
.site-header .row{display:flex;gap:8px;align-items:center;padding:10px 0}
.brand{font-weight:800;letter-spacing:.2em}

.gnb-desktop{display:none; margin-left:auto; gap:8px}
.gnb-desktop a{padding:8px 12px;border-radius:12px;border:1px solid transparent}
.gnb-desktop a.active, .gnb-desktop a:hover{background:var(--card);border-color:var(--border)}

.btn{border:1px solid var(--border);background:var(--card);color:var(--fg);
    padding:10px 12px;border-radius:12px;cursor:pointer;min-height:40px}

/* 모바일 탭바(아이콘 고정식) */
:root{ --accent:#8b0000; --muted-icon:#cbd5e1 }
[data-theme="dark"]{ --accent:#f87171; --muted-icon:#475569 }

:root { --bn-h: 60px; } /* bottom nav 높이 */
@supports (padding: max(0px)) {
    :root { --safe-bottom: env(safe-area-inset-bottom); }
}
@supports not (padding: max(0px)) {
    :root { --safe-bottom: 0px; }
}

/* 하단 고정 탭바 */
.bottom-nav{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(var(--bn-h) + var(--safe-bottom));
    background: var(--bg); border-top: 1px solid var(--border);
    display: flex; align-items: stretch; justify-content: space-around;
    padding: 6px 8px max(6px, var(--safe-bottom)) 8px;
    box-shadow: 0 -6px 18px rgba(0,0,0,.06);
}
.bottom-nav .tab{
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; text-align: center; color: var(--muted); /* 기본 흐림 */
}
.bottom-nav .tab .icon{
    width: 22px; height: 22px; display: block;
    stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.bottom-nav .tab .lbl{ font-size: 11px; }
.bottom-nav .tab.active{ color: var(--accent, #8b0000); }
.bottom-nav .tab.active .icon{ stroke-width: 2; }

/* 컨텐츠가 가려지지 않도록 하단 여백 확보 (모바일만) */
@media (max-width: 767.98px){
    body{ padding-bottom: calc(var(--bn-h) + var(--safe-bottom) + 8px); }
    .gnb-desktop{ display: none; } /* 모바일에선 상단 GNB 숨김 */
}
@media (min-width: 768px){
    .bottom-nav{ display: none; }   /* 데스크톱에선 하단 탭 숨김 */
    .gnb-desktop{ display: flex; gap: 8px; margin-left: auto; }
    .gnb-desktop a{ padding: 8px 12px; border-radius: 12px; border: 1px solid transparent; }
    .gnb-desktop a.active, .gnb-desktop a:hover{ background: var(--card); border-color: var(--border); }
}

/* ===== Footer : 회사 정보/법적 링크 ===== */
.site-footer{border-top:1px solid var(--border);margin-top:24px;background:color-mix(in oklab,var(--bg) 96%,transparent)}
.site-footer .wrap{padding:18px 15px;display:flex;flex-direction:column;gap:10px}

.legal-links{display:flex;gap:10px;flex-wrap:wrap;font-weight:600}
.legal-links a{color:var(--fg)}
.legal-links a:hover{opacity:.9}

.corp-info{color:var(--fg);opacity:.9;font-size:14px;line-height:1.65}
.corp-info strong{font-weight:700}
.corp-info .muted{color:var(--muted)}
.corp-info .sep{margin:0 8px;color:var(--muted)}

.copyright{margin-top:4px;font-size:12px;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}

@media (max-width:480px){
    /*.corp-info .sep{display:none}*/
    .corp-info br.mobile-br{display:block}
}
@media (min-width:481px){
    .corp-info br.mobile-br{display:none}
}

@media (max-width: 767.98px){
    .site-footer .wrap{
        padding-bottom: calc(var(--bn-h) + var(--safe-bottom) + 8px); /* 8px은 여유분 */
    }
}

.rank-list{ display:grid; gap:8px; }
.rank-item{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; border-radius:12px;
    background:var(--card); border:1px solid var(--border);
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.rank-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.rank-nick{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 우측 포인트 */
.rank-pt{ display:flex; align-items:baseline; gap:6px; font-weight:700; }
.rank-pt .val{ letter-spacing:.2px; }
.rank-pt .unit{ font-size:12px; color:var(--muted); }

/* 메달/순위 뱃지 */
.rank-medal, .rank-no{
    width:28px; height:28px; border-radius:50%;
    display:grid; place-items:center; font-size:13px; font-weight:800;
    border:1px solid rgba(0,0,0,.08);
}
.rank-medal.gold   { background:linear-gradient(135deg,#FFD54F,#FFC107); color:#3b2f05; }
.rank-medal.silver { background:linear-gradient(135deg,#ECEFF1,#B0BEC5); color:#263238; }
.rank-medal.bronze { background:linear-gradient(135deg,#E6B07C,#C27B44); color:#3a220e; }
.rank-no{ background:var(--chip-bg); color:var(--fg); opacity:.85; }


[data-theme="dark"] .rank-item{
    background:color-mix(in oklab, var(--card) 94%, transparent);
    border-color:#182030;
}

/* 좁은 화면 폰트/패딩 보정 */
@media (max-width:480px){
    .rank-item{ padding:11px 12px; }
    .rank-pt .val{ font-size:15px; }
}

.card,
.btn,
.input,
select,
.gnb a,
.gnb-desktop a,
.chip,
.badge,
.slideshow,
.table,
.table th,
.table td,
.bottom-nav,
.rank-list,
.rank-item,
.rank-medal,
.rank-no {
    border-radius: 0 !important;
}

.card,
.rank-item {
    box-shadow: none !important;
    border: 1px solid var(--border) !important;
}

:root[data-shape="square"] .card,
:root[data-shape="square"] .btn,
:root[data-shape="square"] .input,
:root[data-shape="square"] select,
:root[data-shape="square"] .gnb a,
:root[data-shape="square"] .gnb-desktop a,
:root[data-shape="square"] .chip,
:root[data-shape="square"] .badge,
:root[data-shape="square"] .slideshow,
:root[data-shape="square"] .table,
:root[data-shape="square"] .table th,
:root[data-shape="square"] .table td,
:root[data-shape="square"] .bottom-nav,
:root[data-shape="square"] .rank-list,
:root[data-shape="square"] .rank-item,
:root[data-shape="square"] .rank-medal,
:root[data-shape="square"] .rank-no {
    border-radius: 0 !important;
}
:root[data-shape="square"] .card,
:root[data-shape="square"] .rank-item {
    box-shadow: none !important;
    border: 1px solid var(--border) !important;
}

.rank-list .rank-medal{
    border-radius:50% !important;  /* 원형 */
}

.rank-list .rank-no{
    border-radius:50% !important;
}

:root{
    --radius: 8px;
    --elev-0: 0 0 0 rgba(0,0,0,0);
    --elev-1: 0 2px 10px rgba(0,0,0,.04);
    --elev-2: 0 6px 24px rgba(0,0,0,.08);

    --surface-1: color-mix(in oklab, var(--bg) 98%, transparent);
    --surface-2: color-mix(in oklab, var(--bg) 94%, transparent);

    --hairline: color-mix(in oklab, var(--fg) 10%, transparent);

    --accent-grad: linear-gradient(135deg, #c1121f, #a3002b);
}
[data-theme="dark"]{
    --elev-1: 0 4px 18px rgba(0,0,0,.35);
    --elev-2: 0 10px 34px rgba(0,0,0,.45);
    --surface-1: color-mix(in oklab, var(--card) 96%, transparent);
    --surface-2: color-mix(in oklab, var(--card) 92%, transparent);
    --hairline: color-mix(in oklab, var(--fg) 14%, transparent);
    --accent-grad: linear-gradient(135deg, #f43f5e, #ef4444);
}

body{ letter-spacing:.01em; }
.title{ letter-spacing:.02em; }
a, .btn, .tab, .rank-item, .input, select{
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .02s ease;
}


.card{
    border-radius: var(--radius) !important;
    background: var(--surface-1) !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: var(--elev-1) !important;
}
.section .head{ margin-bottom: 14px; }


.btn{
    border-radius: var(--radius) !important;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    box-shadow: var(--elev-0);
}
.btn:hover{ box-shadow: var(--elev-1); }
.btn:active{ transform: translateY(1px); }
.btn.primary{
    background: var(--accent-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--elev-1);
}
.btn.primary:hover{ box-shadow: var(--elev-2); }


.input, select{
    border-radius: var(--radius) !important;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
}
.input:focus, select:focus{
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 26%, transparent);
}


.site-header{
    background: color-mix(in oklab, var(--bg) 90%, transparent);
    border-bottom: 1px solid var(--hairline);
    backdrop-filter: blur(6px) saturate(140%);
}
.brand{ font-weight:900; letter-spacing:.24em; }


.bottom-nav{
    background: color-mix(in oklab, var(--bg) 75%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -10px 28px rgba(0,0,0,.08);
}
.bottom-nav .tab{
    position: relative;
    color: color-mix(in oklab, var(--muted) 88%, transparent);
}
.bottom-nav .tab.active{
    color: currentColor; /* --accent 적용 */
}
.bottom-nav .tab.active::after{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    bottom: 6px; width: 22px; height: 3px; border-radius: 999px;
    background: var(--accent-grad);
}


.rank-item{
    border-radius: var(--radius) !important;
    background: color-mix(in oklab, var(--card) 96%, transparent) !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: var(--elev-0) !important;
}
.rank-item:hover{ box-shadow: var(--elev-1) !important; }
.rank-nick{ font-weight: 800; }

.rank-medal{
    border-radius: 50% !important;
    border: none;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.65), 0 2px 6px rgba(0,0,0,.12);
}
.rank-medal.gold   { background: radial-gradient(circle at 30% 30%, #ffe082, #f5af19); color:#2d2104; }
.rank-medal.silver { background: radial-gradient(circle at 30% 30%, #eceff1, #b0bec5); color:#1b2830; }
.rank-medal.bronze { background: radial-gradient(circle at 30% 30%, #efbd8f, #c27b44); color:#3a1e05; }


.rank-no{
    border-radius: 50% !important;
    background: color-mix(in oklab, var(--chip-bg) 100%, transparent);
    border: 1px solid var(--hairline);
}


.table th{
    color: color-mix(in oklab, var(--fg) 80%, transparent);
    font-weight: 700;
    border-bottom: 1px solid var(--hairline);
}
.table td{ border-bottom: 1px solid color-mix(in oklab, var(--hairline) 70%, transparent); }


.site-footer{
    background: color-mix(in oklab, var(--bg) 96%, transparent);
    border-top: 1px solid var(--hairline);
}
.legal-links a{ opacity:.95; }
.legal-links a:hover{ opacity:1; text-decoration: underline; }


.card, .btn, .input, select, .gnb a, .gnb-desktop a, .chip, .badge,
.slideshow, .table, .table th, .table td, .bottom-nav, .rank-list, .rank-item{
    border-radius: var(--radius) !important;
}