: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}
}

.form-column{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.form-column > label{min-width:80px}

/* Stack on small, row on md+ */
@media (max-width:767.98px){
    .form-column{align-items:stretch}
    .form-column > 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}

.tableHome{width:100%;}
.tableHome th,.table td{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;
}

select { width: 100%; height: 30px; padding: 0 10px; border: 1px solid #ccc; font-size: 13px; line-height: 31px; appearance: none; -moz-appearance: none; -webkit-appearance: none; }
/*section.section [class^="form_selec"]:not(.disabled)::after {content: '';position: absolute;top: 50%;display: block;right: 5px;width: 6px;height: 6px;border-left: 1px solid #000;border-bottom: 1px solid #000;-o-transform: rotate(-45deg) translateY(-50%);-webkit-transform: rotate(-45deg) translateY(-50%);transform: rotate(-45deg) translateY(-50%);margin-top: -2px;}*/
/*.form_selec {content: '';position: absolute;top: 50%;display: block;right: 5px;width: 6px;height: 6px;border-left: 1px solid #000;border-bottom: 1px solid #000;-o-transform: rotate(-45deg) translateY(-50%);-webkit-transform: rotate(-45deg) translateY(-50%);transform: rotate(-45deg) translateY(-50%);margin-top: -2px;}*/
.select{
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    width :100%;
}

.select_arrow{
    position: absolute;
    top :19px;
    right: 15px;
    width :0;
    height :0;
    pointer-events: none;
    border-style :solid;
    border-width: 8px 5px 0 5px;
    border-color: #999 transparent transparent transparent;
}

/* ===== RESET: 전역 img 절대배치 제거 ===== */
img{
    position: static !important;
    inset: auto !important;
    width: auto;
    height: auto;
    min-width: 0;
    transform: none !important;
    object-fit: initial;
}

/* ===== Full-bleed Hero (컨테이너 안에 있어도 화면 양옆 꽉) ===== */
.fullbleed{
    position: relative;
    /* 컨테이너 max-width, padding 무시하고 화면 전체로 펼치기 */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.hero{
    position: relative;
    height: clamp(180px, 26vw, 420px); /* 모바일~데스크톱 유동 높이 */
    overflow: hidden;
    border: none;
    background: #000; /* 로딩 중 깜빡임 방지 */
}

/* 히어로 안의 이미지만 커버 크롭 */
.hero img {
    width: 100%;
    height: auto;       /* 세로 자동 */
    object-fit: contain; /* 짤림 방지 */
}

/* 페이드 전환을 쓸 때 */
.hero .slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.hero .slide.active{ opacity:1; }
.hero .slide > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* 수평 스크롤 방지(서브픽셀 보정) */
html, body{ overflow-x: hidden; }

/* 기존 .slideshow 스타일이 덮어쓰지 않게 최소화 */
.slideshow{ border:0; border-radius:0; height:auto; }

/* 풀블리드는 동일 */
.fullbleed{
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* 무크롭-고정높이(contain) */
.hero.is-contain-fixed{
    position: relative;
    height: clamp(180px, 26vw, 420px); /* 기기별 반응형 높이 */
    overflow: hidden;
    background:#000; /* 레터박스 컬러 */
    border: 0;
}
.hero.is-contain-fixed > img{
    position: absolute; inset:0;
    width: 100%; height: 100%;
    object-fit: contain;          /* 무크롭 핵심 */
    object-position: center;
    display:block;
}
html, body{ overflow-x:hidden; }

/* 슬라이드 전체 영역을 화면 꽉차게 */
.fullbleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    background: #000;
}

/* 슬라이드 높이를 고정 + 반응형 */
.hero {
    position: relative;
    height: 380px;
    max-height: 40vh;
    overflow: hidden;
}

/* 각 슬라이드 */
.hero .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .8s ease;
}
.hero .slide.active {
    opacity: 1;
}

/* 이미지: 크롭 없이 꽉 채우기 */
.hero .slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.branchGrid{
    display: grid;                 /* 기존 flex 덮어씀 */
    /*display: grid !important;                 !* 기존 flex 덮어씀 *!*/
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.branchCard{
    height: 240px;                            /* 원하는 고정 높이로 조절 */
    display: flex;
    flex-direction: column;
}

.branchCard .head{
    flex: 0 0 auto;
}

.branchCard .tableHome{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* tbody를 스크롤 영역으로 */
.branchCard .tableHome tbody{
    display: block;
    overflow: auto;
    max-height: 180px;                        /* (카드높이-헤더) 대충 맞추기 */
    padding-right: 4px;                       /* 스크롤바로 텍스트 가림 방지 */
}

/* tbody가 block이 되면 tr/td도 폭 유지 필요 */
.branchCard .tableHome tr{
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* 스크롤바(선택) - 크롬/엣지 */
.branchCard .tableHome tbody::-webkit-scrollbar{
    width: 8px;
}
.branchCard .tableHome tbody::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.12);
    border-radius: 8px;
}
.branchCard .tableHome tbody::-webkit-scrollbar-track{
    background: transparent;
}

@media (max-width: 640px){
    .branchGrid{
        grid-template-columns: 1fr;   /* 1열 고정 */
        gap: 12px;
    }

    .branchCard{
        height: auto;
    }

    .branchCard .tableHome tbody{
        display: table-row-group;
        overflow: visible;
        max-height: none;
        padding-right: 0;
    }

    .branchCard .tableHome tr{
        display: table-row;
        width: auto;
        table-layout: auto;
    }

    /* (선택) 모바일에서 행 간격 조금만 타이트하게 */
    .branchCard .tableHome td{
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* (선택) 긴 제목이 과하게 줄바꿈되면 2줄까지만 보여주기 */
    .branchCard .tableHome td:first-child{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: keep-all;
    }
}


@media (max-width: 640px){
    .branchGrid{
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .branchCard{ height: auto; }

    /* tbody 스크롤 구조 해제 */
    .branchCard .tableHome tbody{
        display: table-row-group;
        overflow: visible;
        max-height: none;
        padding-right: 0;
    }
    .branchCard .tableHome tr{
        display: table-row;
        width: auto;
        table-layout: auto;
    }

    .branchCard .tableHome{
        table-layout: fixed;     /* 칸 폭 고정 */
        width: 100%;
    }

    /* 1열(타이틀)은 넓게, 2~3열(칩)은 고정폭 */
    .branchCard .tableHome td:nth-child(2){
        width: 56px;             /* 빨간칩 칸 */
        white-space: nowrap;
    }
    .branchCard .tableHome td:nth-child(3){
        width: 76px;             /* 준비중/진행중 칩 칸 */
        white-space: nowrap;
    }

    .branchCard .tableHome td:first-child{
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: keep-all;    /* 한글 단어 중간 잘림 방지 */
        overflow-wrap: anywhere; /* 너무 긴 영문/숫자 있으면 줄바꿈 */
    }

    /* (선택) 행 패딩 살짝 줄여서 보기 좋게 */
    .branchCard .tableHome td{
        padding-top: 10px;
        padding-bottom: 10px;
        vertical-align: top;
    }

    /* (선택) 칩이 위로 붙게 */
    .branchCard .tableHome td:nth-child(2),
    .branchCard .tableHome td:nth-child(3){
        vertical-align: top;
    }
}


.kakaoFab{
    position: fixed;
    right: 16px;
    bottom: 88px;
    z-index: 9999;
}

@supports (bottom: env(safe-area-inset-bottom)){
    .kakaoFab{ bottom: calc(88px + env(safe-area-inset-bottom)); }
}

.kakaoFabBtn{
    width: 58px;
    height: 58px;
    border: 0;
    cursor: pointer;
    border-radius: 50% 50% 55% 0;
    /*color: var(--primary-fg, #fff);*/
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
    position: relative;
    overflow: hidden;
    padding: 0;
}

.kakaoFabIcon{
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .5px;
    user-select: none;
}

/* 메뉴 */
.kakaoFabMenu{
    position: absolute;
    right: 0;
    bottom: 68px;
    min-width: 145px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255,255,255,.98);
    border: 1px solid var(--border, rgba(0,0,0,.08));
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
    display: none;
    z-index: 9999;
}

.kakaoFabMenu.on{ display:block; }

.kakaoFabItem{
    display:block;
    padding: 11px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    color: #111827;
}

.kakaoFabItem:hover{
    background: rgba(0,0,0,.05);
}

.kakaoFabLogo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform-origin: 50% 50%;
    user-select: none;
    pointer-events: none;
}