/* ════════════════════════════════════════════════════════════════
   스튜디오 콘솔 — EDK 콘솔 디자인 시스템 v1 (2026-06 신축)

   구조(3계층 셸):
     ① 상단 글로벌 바(.sc-topbar)  — 로고 · ws 스위처 · 포인트 · 알림 · 프로필
     ② 스튜디오 레일(.sc-rail)     — 홈 + 디지털/페이/톡/더블 + 도구/지원
     ③ 서브메뉴 패널(.sc-sub)      — 선택 스튜디오의 메뉴만 (그룹 라벨 + 항목)
   반응형:
     ≥1024  topbar + rail + sub + main
     768~   sub 숨김(드로어로) · rail 유지
     <768   rail/sub 숨김 · 하단 탭바(.sc-tabbar) + 햄버거 전체메뉴(.sc-drawer)
   ════════════════════════════════════════════════════════════════ */

:root {
    /* 스튜디오 시그니처 컬러 (레일/서브/카드 액센트) — 선명 톤(2026-06-12 사장님 피드백: 흐림 → 뚜렷하게) */
    --sc-home: #475569;
    --sc-home-bg: #e8ecf3;
    --sc-digital: #2563eb;
    --sc-digital-bg: #dceafe;
    --sc-pay: #0f9d6e;
    --sc-pay-bg: #d6f3e7;
    --sc-talk: #ea580c;
    --sc-talk-bg: #ffe8d9;
    --sc-content: #7c3aed;
    --sc-content-bg: #ece4fd;
    --sc-shop: #0891b2;
    --sc-shop-bg: #d4edf3;

    /* 잉크(주 액션) + 중립 */
    --sc-ink: #171b26;
    --sc-ink-hover: #2c3242;
    --sc-text: #1a1c24;
    --sc-muted: #6e7488;
    --sc-line: #dfe2ec;
    --sc-canvas: #f3f5f9;
    --sc-panel: #ffffff;

    /* 시멘틱 */
    --sc-danger: #dc2626;
    --sc-danger-bg: #fee2e2;
    --sc-success: #059669;
    --sc-success-bg: #d2f5e6;
    --sc-warn: #d97706;
    --sc-warn-bg: #fef0d9;
    --sc-info: #2563eb;
    --sc-info-bg: #dceafe;

    /* 레이아웃 */
    --sc-topbar-h: 56px;
    --sc-rail-w: 68px;
    --sc-sub-w: 224px;
    --sc-radius: 10px;
    --sc-radius-lg: 12px;
    --sc-tabbar-h: 58px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    /* 구형 폴백 — 가로 넘침 차단 */
    overflow-x: clip;
    /* 모던: 스크롤 컨테이너를 안 만들어 sticky(알림함 우측 리딩 등) 동작 + 가로 넘침 차단 */
    background: var(--sc-canvas);
    color: var(--sc-text);
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(13px, 1.9vw, 14px);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

/* ───────────────────────── 커스텀 스크롤바(콘솔 공용) ───────────────────────── */
/* 얇고 둥근 떠 있는 thumb — 트랙 배경색과 무관(background-clip: padding-box).
   Firefox 는 scrollbar-width/color, 웹킷(크롬·사파리·엣지)은 ::-webkit-scrollbar. */
* {
    scrollbar-width: thin;
    scrollbar-color: #c4cad8 transparent;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c4cad8;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #a7aec1;
}

::-webkit-scrollbar-thumb:active {
    background: #9098ad;
}

/* ───────────────────────── ① 상단 글로벌 바 ───────────────────────── */
.sc-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--sc-topbar-h);
    background: var(--sc-panel);
    border-bottom: 1px solid var(--sc-line);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    z-index: 1000;
}

.sc-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    color: var(--sc-ink);
    flex-shrink: 0;
}

.sc-topbar__brand img {
    width: 26px;
    height: 26px;
    display: block;
}

.sc-topbar__brand-name {
    letter-spacing: -.2px;
}

.sc-topbar__divider {
    width: 1px;
    height: 20px;
    background: var(--sc-line);
    flex-shrink: 0;
}

.sc-topbar__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* 우측(포인트·알림·프로필)은 줄어들지 않음 — ws 만 줄어든다 */
}

/* ws(업체) 스위처 */
.sc-ws {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--sc-line);
    border-radius: 9px;
    background: var(--sc-panel);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-text);
    max-width: 100%;
    /* 폭 상한은 래퍼(.sc-topbar > .sc-pop-wrap)가 가진다 */
    min-width: 0;
    /* 좁은 화면에서 이름이 줄임표 처리되며 줄어들 수 있게 */
}

.sc-ws:hover {
    background: var(--sc-canvas);
}

.sc-ws i {
    color: var(--sc-muted);
    font-size: 15px;
    flex-shrink: 0;
}

.sc-ws__name {
    min-width: 0;
    /* flex 자식이 min-content 아래로 줄어 ellipsis 가 동작하게 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 포인트 칩 */
.sc-point {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--sc-pay);
    color: #fff;
    border: 0;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.sc-point:hover {
    background: #047857;
}

.sc-point i {
    font-size: 14px;
}

/* 상단 아이콘 버튼 (알림 등) */
.sc-topbar .sc-iconbtn {
    position: relative;
}

.sc-iconbtn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--sc-line);
    background: var(--sc-panel);
    color: var(--sc-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.sc-iconbtn:hover {
    background: var(--sc-canvas);
    color: var(--sc-text);
}

.sc-iconbtn__dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sc-danger);
    border: 1.5px solid #fff;
}

/* 프로필 아바타 */
.sc-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sc-ink);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

/* 드롭다운 (ws 스위처 / 프로필 공용) */
.sc-pop-wrap {
    position: relative;
}

/* ws 스위처 래퍼(.sc-topbar 직속)만 좁은 화면에서 줄어든다.
   프로필 래퍼는 .sc-topbar__right 안에 중첩되어 영향 없음(우측 고정). */
.sc-topbar>.sc-pop-wrap {
    min-width: 0;
    max-width: 240px;
}

.sc-pop {
    position: absolute;
    top: calc(100% + 7px);
    min-width: 220px;
    background: var(--sc-panel);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius-lg);
    box-shadow: 0 10px 30px rgba(35, 36, 50, .13);
    padding: 6px;
    z-index: 1100;
    display: none;
}

.sc-pop.is-open {
    display: block;
}

.sc-pop--left {
    left: 0;
}

.sc-pop--right {
    right: 0;
}

.sc-pop__label {
    font-size: 11px;
    color: var(--sc-muted);
    padding: 7px 10px 4px;
}

.sc-pop__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    background: none;
    border-radius: 8px;
    font-size: 13px;
    color: var(--sc-text);
    cursor: pointer;
    text-align: left;
}

.sc-pop__item:hover {
    background: var(--sc-canvas);
}

.sc-pop__item i {
    color: var(--sc-muted);
    font-size: 15px;
    width: 17px;
    text-align: center;
    flex-shrink: 0;
}

.sc-pop__item.is-active {
    background: var(--sc-home-bg);
    font-weight: 600;
}

.sc-pop__item.is-danger,
.sc-pop__item.is-danger i {
    color: var(--sc-danger);
}

.sc-pop__divider {
    height: 1px;
    background: var(--sc-line);
    margin: 5px 8px;
}

.sc-pop__hint {
    font-size: 11px;
    color: var(--sc-muted);
    margin-left: auto;
}

/* ───────────────────────── ② 스튜디오 레일 ───────────────────────── */
.sc-rail {
    position: fixed;
    top: var(--sc-topbar-h);
    left: 0;
    bottom: 0;
    width: var(--sc-rail-w);
    background: var(--sc-panel);
    border-right: 1px solid var(--sc-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 7px;
    gap: 3px;
    z-index: 900;
}

.sc-rail__btn {
    width: 100%;
    padding: 8px 0 7px;
    border: 0;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    color: #5b6172;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.sc-rail__btn i {
    font-size: 19px;
    line-height: 1;
}

.sc-rail__btn span {
    font-size: 11px;
    letter-spacing: -.2px;
}

/* 스튜디오 타일(컬러 SVG) — 비활성은 살짝 가라앉히고 활성/호버에 풀컬러 */
.sc-rail__tile {
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 9px;
    opacity: .55;
    filter: saturate(.55);
}

.sc-rail__btn:hover {
    background: var(--studio-bg, var(--sc-home-bg));
    color: var(--studio, var(--sc-home));
}

.sc-rail__btn:hover .sc-rail__tile {
    opacity: 1;
    filter: none;
}

.sc-rail__btn.is-active {
    background: var(--studio-bg, var(--sc-home-bg));
    color: var(--studio, var(--sc-home));
}

.sc-rail__btn.is-active .sc-rail__tile {
    opacity: 1;
    filter: none;
}

.sc-rail__btn.is-active span {
    font-weight: 700;
}

.sc-rail__btn--push {
    margin-top: 4px;
    color: var(--sc-info);
}

.sc-rail__btn--push:hover,
.sc-rail__btn--push.is-on {
    background: var(--sc-info-bg);
    color: var(--sc-info);
}

.sc-rail__btn--push.is-on i::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sc-success);
    border: 1.5px solid #fff;
    transform: translate(-2px, -3px);
}

.sc-rail__btn--push i {
    position: relative;
}

.sc-push-pop {
    position: fixed;
    width: 252px;
    max-width: calc(100vw - 96px);
    background: var(--sc-panel);
    border: 1px solid var(--sc-line);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(25, 27, 38, .16);
    padding: 14px;
    z-index: 1150;
    display: none;
}

.sc-push-pop.is-open {
    display: block;
}

.sc-push-pop::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 22px;
    width: 12px;
    height: 12px;
    background: var(--sc-panel);
    border-left: 1px solid var(--sc-line);
    border-bottom: 1px solid var(--sc-line);
    transform: rotate(45deg);
}

.sc-push-pop__title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sc-ink);
}

.sc-push-pop__title i {
    font-size: 16px;
    color: var(--sc-info);
}

.sc-push-pop__text {
    margin: 8px 0 12px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #555a6e;
}

.sc-push-pop__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: var(--sc-info);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.sc-push-pop__btn:hover {
    background: #1d4ed8;
}

.sc-push-pop__btn:disabled {
    opacity: .65;
    cursor: wait;
}

.sc-rail__spacer {
    margin-top: auto;
}

.sc-rail__divider {
    width: 36px;
    height: 1px;
    background: var(--sc-line);
    margin: 6px 0;
    flex-shrink: 0;
}

/* ───────────────────────── ③ 서브메뉴 패널 ───────────────────────── */
.sc-sub {
    position: fixed;
    top: var(--sc-topbar-h);
    left: var(--sc-rail-w);
    bottom: 0;
    width: var(--sc-sub-w);
    background: var(--sc-panel);
    border-right: 1px solid var(--sc-line);
    padding: 16px 12px;
    overflow-y: auto;
    z-index: 890;
    display: flex;
    flex-direction: column;
}

.sc-sub__studio {
    font-size: 14px;
    font-weight: 700;
    color: var(--studio, var(--sc-text));
    padding: 0 8px 10px;
    margin: 0 0 10px;
    border-bottom: 2px solid var(--studio, var(--sc-line));
    display: flex;
    align-items: center;
    gap: 7px;
}

.sc-sub__studio i {
    font-size: 16px;
}

.sc-sub__group {
    font-size: 11px;
    font-weight: 600;
    color: var(--sc-muted);
    padding: 0 8px;
    margin: 14px 0 4px;
}

.sc-sub__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 1px;
    font-size: 13px;
    color: #494e60;
    cursor: pointer;
}

.sc-sub__link:hover {
    background: var(--studio-bg, var(--sc-home-bg));
    color: var(--studio, var(--sc-text));
}

.sc-sub__link.is-active {
    background: var(--studio, var(--sc-home));
    color: #fff;
    font-weight: 600;
}

.sc-sub__link .sc-soon {
    margin-left: auto;
}

/* "준비중" 마커 */
.sc-soon {
    font-size: 10px;
    font-weight: 600;
    color: var(--sc-muted);
    border: 1px solid var(--sc-line);
    border-radius: 5px;
    padding: 1px 5px;
    flex-shrink: 0;
}

/* 서브패널 하단 고객센터 안내 — 하단 고정(sticky) + 스튜디오색 채움 + 흰 글씨 */
.sc-sub__footer {
    position: sticky;
    bottom: 0;
    margin: auto -12px -16px;
    /* 위:auto=콘텐츠 짧아도 바닥으로, 좌우·하단은 패딩 상쇄해 폭 꽉 채움 */
    padding: 14px 14px 16px;
    background: var(--studio, var(--sc-home));
    color: #fff;
}

.sc-sub__tel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 7px;
    font-size: clamp(13px, 2vw, 14px);
    color: rgba(255, 255, 255, .92);
}

.sc-sub__tel>i {
    font-size: 19px;
    color: #fff;
    flex-shrink: 0;
}

.sc-sub__tel-label {
    color: rgba(255, 255, 255, .9);
}

.sc-sub__tel-num {
    font-weight: 700;
    font-size: clamp(16px, 2.5vw, 18px);
    letter-spacing: .3px;
    color: #fff;
}

.sc-sub__tel-num:hover {
    color: #fff;
    text-decoration: underline;
}

.sc-sub__ext {
    padding: 6px 0 0 31px;
    /* 아이콘 폭만큼 들여써 번호 아래에 정렬 */
    font-size: clamp(14px, 2.3vw, 15.5px);
    font-weight: 600;
    line-height: 1.6;
    color: rgba(255, 255, 255, .95);
}

/* 홈 전용 — 내선이 여러 개라 세로 리스트(스튜디오 이름 ↔ 내선번호 양끝 정렬, 추가 시 줄만 늘어남) */
.sc-sub__extlist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.sc-sub__extrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: clamp(14px, 2.3vw, 15.5px);
}

.sc-sub__extrow-name {
    color: rgba(255, 255, 255, .9);
}

.sc-sub__extrow-num {
    font-weight: 700;
    color: #fff;
    letter-spacing: .2px;
    flex-shrink: 0;
}

/* ───────────────────────── 본문 ───────────────────────── */
.sc-main {
    margin: var(--sc-topbar-h) 0 0 calc(var(--sc-rail-w) + var(--sc-sub-w));
    padding: 22px 24px 48px;
    min-height: calc(100vh - var(--sc-topbar-h));
}

.sc-main__inner {
    max-width: 1240px;
    margin: 0 auto;
}

/* 페이지 헤더 */
.sc-page-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 18px;
    flex-wrap: wrap;
}

.sc-page-head__title {
    font-size: clamp(17px, 2.6vw, 20px);
    font-weight: 700;
    margin: 0;
    letter-spacing: -.3px;
}

.sc-page-head__sub {
    font-size: 13px;
    color: var(--sc-muted);
    min-width: 0;
    line-height: 1.55;
    word-break: keep-all;
}

.sc-page-head__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ───────────────────────── 모바일: 하단 탭바 ───────────────────────── */
.sc-tabbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* height: calc(var(--sc-tabbar-h) + env(safe-area-inset-bottom)); */
    /* padding-bottom: env(safe-area-inset-bottom); */
    background: var(--sc-panel);
    border-top: 1px solid var(--sc-line);
    z-index: 1000;
}

.sc-tabbar__btn {
    flex: 1;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #5b6172;
    padding: 6px 0;
}

.sc-tabbar__btn i {
    font-size: 22px;
    line-height: 1;
}

.sc-tabbar__btn span {
    font-size: 10.5px;
}

.sc-tabbar__btn.is-active {
    color: var(--sc-ink);
}

.sc-tabbar__btn.is-active span {
    font-weight: 700;
}

/* 중앙 강조 버튼(OTP) — 원형 FAB로 위로 돌출 */
.sc-tabbar__btn--center {
    color: var(--sc-ink);
}

.sc-tabbar__btn--center i {
    width: 50px;
    height: 50px;
    margin-top: -24px;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-ink);
    color: #fff;
    border-radius: 50%;
    font-size: 25px;
    border: 3px solid var(--sc-panel);
    box-shadow: 0 4px 12px rgba(23, 27, 38, .28);
}

.sc-tabbar__btn--center span {
    font-weight: 700;
}

/* ───────────────────────── 모바일/태블릿: 메뉴 드로어 ───────────────────────── */
.sc-drawer-dim {
    position: fixed;
    inset: 0;
    background: rgba(25, 27, 38, .42);
    z-index: 1190;
    display: none;
}

.sc-drawer-dim.is-open {
    display: block;
}

.sc-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 86vw;
    background: var(--sc-panel);
    z-index: 1200;
    transform: translateX(-104%);
    transition: transform .22s ease;
    display: flex;
    flex-direction: column;
}

.sc-drawer.is-open {
    transform: translateX(0);
}

.sc-drawer__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--sc-line);
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.sc-drawer__head img {
    width: 24px;
    height: 24px;
}

.sc-drawer__close {
    margin-left: auto;
}

.sc-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 12px 30px;
}

/* 스튜디오 카드 (아코디언) — 스튜디오별 색상 카드로 경계를 만든다 */
.sc-drawer__st {
    border: 1px solid var(--sc-line);
    border-left: 3px solid var(--studio, var(--sc-home));
    border-radius: 0 10px 10px 0;
    margin-bottom: 10px;
    overflow: hidden;
}

.sc-drawer__st.is-current {
    border-color: var(--studio, var(--sc-home));
}

.sc-drawer__sthead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
}

.sc-drawer__st.is-current .sc-drawer__sthead {
    background: var(--studio-bg, var(--sc-home-bg));
}

.sc-drawer__sthead .sc-studio-mark {
    flex-shrink: 0;
}

.sc-drawer__sthead>i {
    color: var(--studio, var(--sc-text));
    font-size: 19px;
    flex-shrink: 0;
}

.sc-drawer__stname {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--sc-ink);
}

.sc-drawer__stinner {
    padding: 2px 8px 8px;
}

/* 개발문서 등 서브패널 없이 바로 여는 카드(헤더만) */
.sc-drawer__direct {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 0 10px 10px 0;
}

.sc-drawer__direct:hover {
    background: var(--studio-bg, var(--sc-home-bg));
}

.sc-drawer__stext {
    margin-left: auto;
    font-size: 15px;
    color: var(--sc-muted);
}

/* 카드 내부 그룹 라벨 — 구분선 제거, 스튜디오 경계보다 약하게 */
.sc-drawer__group {
    margin: 7px 4px 2px;
    color: var(--sc-muted);
    font-size: 11px;
    font-weight: 700;
}

.sc-drawer__stinner>.sc-drawer__group:first-child {
    margin-top: 2px;
}

.sc-drawer .sc-sub__link {
    gap: 9px;
    font-size: 13.5px;
    padding: 9px 10px;
    margin-bottom: 2px;
    border-radius: 9px;
}

.sc-drawer .sc-sub__link i {
    width: 18px;
    text-align: center;
    color: var(--sc-muted);
    flex-shrink: 0;
}

.sc-drawer .sc-sub__link:hover {
    background: var(--studio-bg, var(--sc-home-bg));
    color: var(--studio, var(--sc-text));
}

.sc-drawer .sc-sub__link.is-active {
    background: var(--studio-bg, var(--sc-home-bg));
    color: var(--studio, var(--sc-home));
    font-weight: 800;
    box-shadow: inset 3px 0 0 var(--studio, var(--sc-home));
}

.sc-drawer .sc-sub__link.is-active i {
    color: var(--studio, var(--sc-home));
}

/* 드로어 맨 아래 고객센터 대표번호 한 줄 */
.sc-drawer__tel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 7px;
    margin-top: 14px;
    padding: 13px 8px 0;
    border-top: 1px solid var(--sc-line);
    font-size: clamp(12px, 3vw, 13px);
    color: var(--sc-muted);
}

.sc-drawer__tel>i {
    font-size: 16px;
    color: var(--sc-muted);
    flex-shrink: 0;
}

.sc-drawer__tel a {
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--sc-text);
}

.sc-drawer__tel a:hover {
    color: var(--sc-info);
}

/* 스튜디오 마크(서브패널/드로어 헤더의 타일 SVG) */
.sc-studio-mark {
    display: block;
    border-radius: 5px;
    flex-shrink: 0;
}

/* ───────────────────────── 컴포넌트: 버튼 ───────────────────────── */
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--sc-line);
    border-radius: 9px;
    background: var(--sc-panel);
    color: var(--sc-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.sc-btn:hover {
    background: var(--sc-canvas);
}

.sc-btn i {
    font-size: 15px;
}

.sc-btn--primary {
    background: var(--sc-ink);
    border-color: var(--sc-ink);
    color: #fff;
}

.sc-btn--primary:hover {
    background: var(--sc-ink-hover);
}

.sc-btn--danger {
    background: var(--sc-panel);
    border-color: #f3c2c6;
    color: var(--sc-danger);
}

.sc-btn--danger:hover {
    background: var(--sc-danger-bg);
}

.sc-btn--ghost {
    border-color: transparent;
    background: none;
    color: var(--sc-muted);
}

.sc-btn--ghost:hover {
    background: var(--sc-canvas);
    color: var(--sc-text);
}

.sc-btn--sm {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 8px;
}

.sc-btn--lg {
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
    border-radius: 10px;
}

.sc-btn--full {
    width: 100%;
}

.sc-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ───────────────────────── 컴포넌트: 카드 ───────────────────────── */
.sc-card {
    background: var(--sc-panel);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius-lg);
}

.sc-card__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sc-line);
}

.sc-card__title {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.sc-card__title i {
    color: var(--sc-muted);
    font-size: 16px;
}

.sc-card__head-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sc-card__body {
    padding: 16px 18px;
}

/* 통계 카드 (대시보드) — 상단 컬러 라인 + 채움 아이콘 */
.sc-stat {
    background: var(--sc-panel);
    border: 1px solid var(--sc-line);
    border-top: 3px solid var(--studio, var(--sc-line));
    border-radius: var(--sc-radius-lg);
    padding: 14px 17px 15px;
    position: relative;
    display: block;
}

.sc-stat--link:hover {
    border-color: var(--studio, #cfd3e3);
}

.sc-stat__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--studio, var(--sc-muted));
    margin: 0 0 7px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sc-stat__label i {
    font-size: 14px;
}

.sc-stat__value {
    font-size: clamp(18px, 3vw, 22px);
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--sc-text);
}

.sc-stat__value small {
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-muted);
    margin-left: 2px;
}

.sc-stat__sub {
    font-size: 12px;
    color: var(--sc-muted);
    margin-top: 4px;
}

.sc-stat__accent {
    position: absolute;
    top: 13px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--studio, var(--sc-home));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.sc-stat__accent--tile {
    background: none;
}

.sc-stat__accent--tile img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 9px;
}

/* ───────────────────────── 컴포넌트: 폼 ───────────────────────── */
.sc-field {
    margin-bottom: 14px;
}

.sc-field>label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #555a6e;
    margin-bottom: 6px;
}

.sc-field>label .req {
    color: var(--sc-danger);
}

.sc-input,
.sc-select,
.sc-textarea {
    width: 100%;
    border: 1px solid var(--sc-line);
    border-radius: 9px;
    padding: 0 12px;
    height: 40px;
    font-size: 14px;
    font-family: inherit;
    color: var(--sc-text);
    background: var(--sc-panel);
}

.sc-textarea {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    min-height: 84px;
    line-height: 1.55;
}

.sc-input:focus,
.sc-select:focus,
.sc-textarea:focus {
    outline: none;
    border-color: var(--sc-ink);
    box-shadow: 0 0 0 3px rgba(31, 35, 48, .08);
}

.sc-input::placeholder,
.sc-textarea::placeholder {
    color: #b4b8c9;
}

.sc-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.sc-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--sc-ink);
    margin: 0;
}

/* 비밀번호 표시 토글 (눈 아이콘) — input 을 .pw-field 로 감싸고 우측에 .pw-eye 버튼 */
.pw-field {
    position: relative;
}

.pw-field .sc-input {
    padding-right: 42px;
}

.pw-eye {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40px;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--sc-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.pw-eye:hover {
    color: var(--sc-text);
}

/* ───────────────────────── 컴포넌트: 배지 ───────────────────────── */
.sc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 6px;
    padding: 2.5px 8px;
    background: var(--sc-home-bg);
    color: var(--sc-home);
}

.sc-badge--success {
    background: var(--sc-success-bg);
    color: var(--sc-success);
}

.sc-badge--danger {
    background: var(--sc-danger-bg);
    color: var(--sc-danger);
}

.sc-badge--warn {
    background: var(--sc-warn-bg);
    color: var(--sc-warn);
}

.sc-badge--info {
    background: var(--sc-info-bg);
    color: var(--sc-info);
}

.sc-badge--digital {
    background: var(--sc-digital-bg);
    color: var(--sc-digital);
}

.sc-badge--pay {
    background: var(--sc-pay-bg);
    color: var(--sc-pay);
}

.sc-badge--talk {
    background: var(--sc-talk-bg);
    color: var(--sc-talk);
}

.sc-badge--content {
    background: var(--sc-content-bg);
    color: var(--sc-content);
}

/* ───────────────────────── 컴포넌트: 테이블 ───────────────────────── */
.sc-table-wrap {
    overflow-x: auto;
}

.sc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sc-table th {
    text-align: left;
    font-weight: 600;
    color: var(--sc-muted);
    font-size: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sc-line);
    background: #fafbfd;
    white-space: nowrap;
}

.sc-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--sc-line);
    vertical-align: middle;
}

.sc-table tbody tr:hover {
    background: #fafbfd;
}

.sc-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 빈 상태 */
.sc-empty {
    text-align: center;
    padding: 38px 16px;
    color: var(--sc-muted);
    font-size: 13px;
}

.sc-empty i {
    font-size: 26px;
    display: block;
    margin-bottom: 8px;
    color: #c2c6d6;
}

/* ───────────────────────── 컴포넌트: 피드(인사이트 카드) ───────────────────────── */
/* 홈 대시보드 · 인사이트 목록 공용 — 4열 카드 그리드(반응형 4→3→2→1) */
.sc-feed {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.sc-feed__card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius-lg);
    overflow: hidden;
    background: var(--sc-panel);
    transition: border-color .15s, transform .15s;
}

.sc-feed__card:hover {
    border-color: #cfd3e3;
    transform: translateY(-2px);
}

.sc-feed__thumb {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: var(--sc-canvas);
}

.sc-feed__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sc-feed__thumb-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c2c6d6;
    font-size: 28px;
}

.sc-feed__body {
    padding: 12px 13px 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

.sc-feed__studios {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sc-feed__studios .sc-badge {
    font-size: 11px;
    padding: 2px 7px;
}

.sc-feed__title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--sc-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sc-feed__date {
    margin-top: auto;
    font-size: 11.5px;
    color: var(--sc-muted);
}

@media (max-width: 1199px) {
    .sc-feed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .sc-feed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

/* ───────────────────────── 컴포넌트: 페이지네이션(표준) ───────────────────────── */
/* 모든 리스트 공용 — 처음 · 이전 · 번호 · 다음 · 마지막 */
.sc-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.sc-pagination a,
.sc-pagination span {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sc-line);
    border-radius: 8px;
    font-size: 13px;
    color: var(--sc-text);
    background: var(--sc-panel);
}

.sc-pagination a:hover {
    background: var(--sc-canvas);
    border-color: #cfd3e3;
}

.sc-pagination a.is-active {
    background: var(--sc-ink);
    border-color: var(--sc-ink);
    color: #fff;
    font-weight: 700;
}

.sc-pagination span.is-disabled {
    color: #c2c6d6;
    background: var(--sc-canvas);
    cursor: default;
}

.sc-pagination i {
    font-size: 16px;
}

/* ───────────────────────── 컴포넌트: 리스트(공지 등) ───────────────────────── */
.sc-list {
    display: flex;
    flex-direction: column;
}

.sc-list__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 6px;
    border-bottom: 1px solid var(--sc-line);
    font-size: 14px;
}

.sc-list__item:last-child {
    border-bottom: 0;
}

.sc-list__item:hover {
    background: #fafbfd;
}

.sc-list__title {
    font-weight: 600;
    color: var(--sc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sc-list__studios {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.sc-list__studios .sc-badge {
    font-size: 11px;
    padding: 2px 7px;
}

.sc-list__date {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--sc-muted);
    flex-shrink: 0;
}

/* ───────────────────────── 컴포넌트: 스튜디오 홈 ───────────────────────── */
/* 스튜디오 컬러 버튼 (홈 CTA 용) */
.sc-btn--studio {
    background: var(--studio, var(--sc-ink));
    border-color: var(--studio, var(--sc-ink));
    color: #fff;
}

.sc-btn--studio:hover {
    filter: brightness(1.08);
    background: var(--studio, var(--sc-ink));
}

/* 히어로 — 역할 소개 + 주 CTA */
.sc-hero {
    background: var(--sc-panel);
    border: 1px solid var(--sc-line);
    border-top: 3px solid var(--studio, var(--sc-ink));
    border-radius: var(--sc-radius-lg);
    padding: clamp(18px, 3.4vw, 26px) clamp(16px, 3.4vw, 26px);
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.sc-hero__tile {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    flex-shrink: 0;
}

.sc-hero__body {
    min-width: 0;
    flex: 1;
}

.sc-hero__eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: var(--studio, var(--sc-muted));
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.sc-hero__title {
    font-size: clamp(17px, 2.8vw, 21px);
    font-weight: 700;
    letter-spacing: -.3px;
    margin: 0 0 6px;
}

.sc-hero__desc {
    font-size: 13.5px;
    color: #555a6e;
    line-height: 1.65;
    margin: 0 0 14px;
    max-width: 640px;
}

.sc-hero__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* 기능 카드 (무엇을 하나요) */
.sc-feature {
    background: var(--sc-panel);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius-lg);
    padding: 15px 16px;
}

.sc-feature__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--studio-bg, var(--sc-home-bg));
    color: var(--studio, var(--sc-home));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 10px;
}

.sc-feature__title {
    font-size: 13.5px;
    font-weight: 700;
    margin: 0 0 4px;
}

.sc-feature__desc {
    font-size: 12.5px;
    color: var(--sc-muted);
    line-height: 1.6;
    margin: 0;
}

/* 시작 절차 스텝 */
.sc-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sc-step {
    display: flex;
    gap: 11px;
    position: relative;
    padding-bottom: 16px;
}

.sc-step:last-child {
    padding-bottom: 0;
}

.sc-step::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: 2px;
    width: 2px;
    background: var(--sc-line);
}

.sc-step:last-child::before {
    display: none;
}

.sc-step__num {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--studio, var(--sc-ink));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.sc-step__body {
    font-size: 13px;
    padding-top: 2px;
}

.sc-step__body b {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}

.sc-step__body small {
    color: var(--sc-muted);
    font-size: 12px;
    line-height: 1.55;
    display: block;
}

/* 현황 행 (내 현황 카드 내부) */
.sc-meter {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid var(--sc-line);
    font-size: 13px;
}

.sc-meter:last-child {
    border-bottom: 0;
}

.sc-meter i {
    color: var(--studio, var(--sc-muted));
    font-size: 15px;
    width: 18px;
    text-align: center;
}

.sc-meter__label {
    color: #555a6e;
}

.sc-meter__value {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sc-meter__value small {
    font-weight: 600;
    color: var(--sc-muted);
    font-size: 11.5px;
}

/* 홍보 슬라이드 배너 (스튜디오 홈 상단 — swiper) */
.sc-banner {
    border-radius: var(--sc-radius-lg);
    overflow: hidden;
    border: 1px solid var(--sc-line);
    margin-bottom: 12px;
}

.sc-banner img {
    width: 100%;
    display: block;
}

.sc-banner .swiper-pagination {
    bottom: 10px;
}

.sc-banner .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: #fff;
    opacity: .55;
    box-shadow: 0 0 0 1px rgba(23, 27, 38, .28);
}

.sc-banner .swiper-pagination-bullet-active {
    opacity: 1;
}

/* 공지 리스트 (스튜디오 홈/메인 공용) */
.sc-notice {
    padding: 8px 10px;
}

.sc-notice__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 8px;
    border-radius: 8px;
    font-size: 13px;
}

.sc-notice__item:hover {
    background: var(--sc-canvas);
}

.sc-notice__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sc-notice__date {
    margin-left: auto;
    font-size: 12px;
    color: var(--sc-muted);
    flex-shrink: 0;
}

/* ───────────────────────── 컴포넌트: 모달 ───────────────────────── */
.sc-modal-dim {
    position: fixed;
    inset: 0;
    background: rgba(25, 27, 38, .45);
    z-index: 1290;
    display: none;
}

.sc-modal-dim.is-open {
    display: block;
}

.sc-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 460px;
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 48px);
    background: var(--sc-panel);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(25, 27, 38, .22);
    z-index: 1300;
    display: none;
    flex-direction: column;
}

.sc-modal.is-open {
    display: flex;
}

.sc-modal__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 16px 18px 13px;
    border-bottom: 1px solid var(--sc-line);
    flex-shrink: 0;
}

.sc-modal__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-modal__title i {
    color: var(--studio, var(--sc-ink));
    font-size: 17px;
}

.sc-modal__close {
    margin-left: auto;
}

.sc-modal__body {
    padding: 16px 18px;
    overflow-y: auto;
}

.sc-modal__hint {
    font-size: 12px;
    color: var(--sc-muted);
    background: var(--sc-canvas);
    border-radius: 8px;
    padding: 9px 11px;
    margin-bottom: 14px;
    line-height: 1.55;
}

.sc-modal__foot {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 13px 18px 16px;
    border-top: 1px solid var(--sc-line);
    flex-shrink: 0;
}

/* ───────────────────────── 워크스페이스 선택 레이어 ───────────────────────── */
.sc-ws-layer {
    position: fixed;
    top: var(--sc-topbar-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1090;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 4vw, 40px);
    background: rgba(243, 245, 249, .96);
    backdrop-filter: blur(2px);
}

.sc-ws-layer.is-open {
    display: flex;
}

.sc-ws-layer.is-required {
    cursor: default;
}

.sc-ws-select {
    width: min(820px, 100%);
    background: var(--sc-panel);
    border: 1px solid var(--sc-line);
    border-radius: 16px;
    box-shadow: 0 20px 54px rgba(23, 27, 38, .16);
    padding: clamp(18px, 3vw, 26px);
}

.sc-ws-select__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.sc-ws-select__eyebrow {
    margin: 0 0 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sc-info);
}

.sc-ws-select__title {
    margin: 0;
    font-size: clamp(18px, 3vw, 23px);
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--sc-ink);
}

.sc-ws-select__close {
    margin-left: auto;
    flex-shrink: 0;
}

.sc-ws-layer.is-required .sc-ws-select__close {
    display: none;
}

.sc-ws-select__desc {
    margin: 10px 0 18px;
    color: #555a6e;
    font-size: clamp(13px, 2vw, 14px);
    line-height: 1.65;
}

.sc-ws-select__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sc-ws-card {
    width: 100%;
    min-height: 112px;
    border: 1px solid var(--sc-line);
    border-radius: 12px;
    background: var(--sc-panel);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    text-align: left;
    color: var(--sc-text);
    transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}

.sc-ws-card--apply {
    position: relative;
    padding-top: 24px;
    border-color: #b9ead9;
    background: linear-gradient(180deg, #f8fffc 0%, var(--sc-panel) 100%);
}

.sc-ws-card:hover {
    border-color: #bfd0ff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .10);
    transform: translateY(-1px);
}

.sc-ws-card--apply:hover {
    border-color: var(--sc-pay);
    box-shadow: 0 12px 28px rgba(15, 157, 110, .14);
}

.sc-ws-card__bubble {
    position: absolute;
    top: -13px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 32px);
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--sc-pay);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.35;
    white-space: normal;
    word-break: keep-all;
    box-shadow: 0 8px 18px rgba(15, 157, 110, .20);
}

.sc-ws-card__bubble::after {
    content: '';
    position: absolute;
    left: 17px;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: var(--sc-pay);
    transform: rotate(45deg);
}

.sc-ws-card.is-active {
    border-color: var(--sc-info);
    background: var(--sc-info-bg);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .22);
}

.sc-ws-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--sc-home-bg);
    color: var(--sc-home);
    font-size: 22px;
}

.sc-ws-card[data-ws-kind="business"] .sc-ws-card__icon,
.sc-ws-card--apply .sc-ws-card__icon {
    background: var(--sc-pay-bg);
    color: var(--sc-pay);
}

.sc-ws-card__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sc-ws-card__text strong {
    font-size: clamp(14px, 2.3vw, 16px);
    font-weight: 800;
    color: var(--sc-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-ws-card__text small {
    font-size: clamp(12px, 2vw, 13px);
    color: var(--sc-muted);
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.sc-ws-card--apply .sc-ws-card__text small {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-ws-card[data-ws-kind="business"] .sc-ws-card__text small {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-ws-card__cta {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--sc-pay-bg);
    color: var(--sc-pay);
    font-size: 11.5px;
    font-weight: 800;
}

.sc-ws-card__current {
    display: none;
    margin-left: auto;
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--sc-info);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.sc-ws-card.is-active .sc-ws-card__current {
    display: inline-flex;
}

.sc-ws-card__arrow {
    margin-left: auto;
    color: var(--sc-muted);
    font-size: 18px;
    flex-shrink: 0;
}

.sc-ws-card.is-active .sc-ws-card__arrow {
    display: none;
}

.sc-ws-select__notice {
    margin-top: 14px;
    border: 1px solid var(--sc-info-bg);
    border-radius: 12px;
    background: #f8fbff;
    color: #475569;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: clamp(12px, 1.9vw, 13px);
    line-height: 1.6;
    word-break: keep-all;
}

.sc-ws-select__notice i {
    color: var(--sc-info);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.sc-ws-select__notice a {
    color: var(--sc-info);
    font-weight: 800;
}

.sc-ws-empty {
    grid-column: 1 / -1;
    min-height: 112px;
    border: 1px dashed var(--sc-line);
    border-radius: 12px;
    background: var(--sc-canvas);
    color: var(--sc-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 18px;
    text-align: center;
}

.sc-ws-empty i {
    font-size: 24px;
    color: #c2c6d6;
}

.sc-ws-empty strong {
    color: var(--sc-text);
}

/* 유틸 */
.sc-grid {
    display: grid;
    gap: 12px;
}

.sc-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sc-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sc-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sc-mt-12 {
    margin-top: 12px;
}

.sc-mt-20 {
    margin-top: 20px;
}

/* 햄버거 (서브패널이 숨는 1023px 이하에서만 노출) */
.sc-burger {
    display: none;
}

/* ───────────────────────── 반응형 ───────────────────────── */
@media (max-width: 1023px) {
    .sc-sub {
        display: none;
    }

    .sc-main {
        margin-left: var(--sc-rail-w);
        padding: 18px 16px 48px;
    }

    .sc-burger {
        display: inline-flex;
    }
}

@media (max-width: 767px) {
    .sc-rail {
        display: none;
    }

    .sc-hero {
        flex-direction: column;
        gap: 12px;
    }

    .sc-hero__tile {
        width: 42px;
        height: 42px;
        border-radius: 11px;
    }

    .sc-hero__actions .sc-btn {
        flex: 1 1 auto;
    }

    .sc-main {
        margin-left: 0;
        padding: 14px 14px calc(var(--sc-tabbar-h) + env(safe-area-inset-bottom) + 28px);
    }

    .sc-tabbar {
        display: flex;
    }

    .sc-topbar {
        padding: 0 11px;
        gap: 8px;
    }

    .sc-topbar__brand-name,
    .sc-topbar__divider {
        display: none;
    }

    /* ws 스위처: 좁아지면 래퍼가 줄어들고 이름은 줄임표 처리(상한은 래퍼가 가짐) */
    .sc-ws {
        font-size: 12.5px;
        padding: 0 9px;
    }

    .sc-point {
        display: none;
    }

    .sc-grid--4,
    .sc-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sc-page-head {
        align-items: flex-start;
        gap: 4px 10px;
        margin-bottom: 14px;
    }

    .sc-page-head__title {
        width: 100%;
    }

    .sc-page-head__sub {
        width: 100%;
        font-size: 12.5px;
    }

    .sc-page-head__right {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 4px;
    }

    .sc-card__head {
        padding: 12px 14px;
    }

    .sc-card__body {
        padding: 13px 14px;
    }

    .sc-ws-layer {
        align-items: flex-start;
        padding: 18px 14px calc(var(--sc-tabbar-h) + env(safe-area-inset-bottom) + 18px);
        overflow-y: auto;
    }

    .sc-ws-select {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .sc-ws-select__grid {
        grid-template-columns: 1fr;
    }

    .sc-ws-card {
        min-height: 96px;
        padding: 15px;
    }

    .sc-ws-card--apply {
        padding-top: 26px;
    }

    .sc-ws-card__bubble {
        top: -12px;
        left: 14px;
        max-width: calc(100% - 28px);
    }

    /* 리스트: 좁은 화면에서 스튜디오 배지는 숨겨 제목·날짜 우선 */
    .sc-list__studios {
        display: none;
    }

    /* 제목: 좁은 화면에선 두 줄까지 보이고 넘치면 말줄임(…). 2줄이 되면 날짜는 첫 줄 옆(상단) 정렬 */
    .sc-list__item {
        align-items: flex-start;
    }
    .sc-list__title {
        flex: 1;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.4;
    }
    .sc-list__date {
        padding-top: 2px;
    }
}

/* ───── 갤럭시 폴드 접힘(~280px)·초소형 단말 ───── */
@media (max-width: 380px) {
    .sc-topbar {
        padding: 0 9px;
        gap: 6px;
    }

    .sc-topbar__brand img {
        width: 24px;
        height: 24px;
    }

    .sc-ws {
        gap: 4px;
        padding: 0 7px;
        font-size: 12px;
    }

    .sc-iconbtn,
    .sc-avatar {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .sc-topbar__right {
        gap: 6px;
    }

    .sc-main {
        padding: 12px 10px calc(var(--sc-tabbar-h) + env(safe-area-inset-bottom) + 24px);
    }

    .sc-page-head__title {
        font-size: 17px;
    }

    .sc-card__head,
    .sc-card__body {
        padding: 12px 12px;
    }

    .sc-tabbar__btn span {
        font-size: 10px;
    }
}

/* iPhone SE(375)는 2열 유지 — 1열은 374 이하(폴드 접힘 등)에서만 */
@media (max-width: 374px) {

    .sc-grid--4,
    .sc-grid--3,
    .sc-grid--2 {
        grid-template-columns: 1fr;
    }
}

/* ───── 초협폭(갤럭시 폴드 접힘 ~280px) ───── */
/* iPhone SE(375)·일반 안드로이드(360)는 영향 없음 — 340 이하에서만 ws 앞 건물 아이콘을
   생략해 알림·프로필이 절대 화면 밖으로 밀리지 않게 우측 폭을 확보한다. */
@media (max-width: 340px) {
    .sc-ws>i:first-child {
        display: none;
    }

    .sc-ws {
        padding: 0 6px;
        gap: 3px;
    }
}

/* ───────────────────────── 컴포넌트: 신용카드 캐러셀(.sc-cc) ─────────────────────────
   충전 모달·카드관리 공용. Swiper(slidesPerView:'auto')로 가로 스와이프 — 마우스 드래그/휠 지원.
   Swiper 가 overflow:hidden 이므로 선택 표시는 외곽 아웃라인이 아닌 안쪽 링(inset)+디밍으로 처리. */
.sc-cc-swiper {
    width: 100%;
    padding: 4px 2px 16px;
}

.sc-cc-swiper .swiper-slide {
    width: 280px;
    height: auto;
}

.sc-cc {
    width: 100%;
    aspect-ratio: 1.6 / 1;
    border: 0;
    border-radius: 16px;
    padding: 17px 19px;
    cursor: pointer;
    text-align: left;
    color: #fff;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: .5;
    box-shadow: 0 4px 12px rgba(20, 28, 55, .18);
    transition: opacity .15s, box-shadow .15s;
    position: relative;
}

.sc-cc--c0 {
    background: linear-gradient(135deg, #3a4a72, #1c2440);
}

.sc-cc--c1 {
    background: linear-gradient(135deg, #4b3a6b, #241a3a);
}

.sc-cc--c2 {
    background: linear-gradient(135deg, #1f5163, #0f2b38);
}

.sc-cc--c3 {
    background: linear-gradient(135deg, #5a3a4a, #321d28);
}

.sc-cc:hover {
    opacity: .8;
}

.sc-cc.is-sel {
    opacity: 1;
    box-shadow: inset 0 0 0 3px var(--sc-info), 0 8px 18px rgba(37, 99, 235, .28);
}

.sc-cc__top {
    display: flex;
    align-items: center;
    gap: 9px;
}

.sc-cc__chip {
    width: 32px;
    height: 23px;
    border-radius: 5px;
    background: linear-gradient(135deg, #f0d488, #c9a23f);
    flex-shrink: 0;
}

.sc-cc__brand {
    font-weight: 700;
    font-size: 14.5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-cc__def {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 255, 255, .22);
    padding: 3px 9px;
    border-radius: 20px;
    flex-shrink: 0;
}

.sc-cc__no {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 17px;
    letter-spacing: 1.5px;
}

.sc-cc__bot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.sc-cc__brandtxt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: .8;
}

.sc-cc__chk {
    font-size: 22px;
    opacity: 0;
    flex-shrink: 0;
}

.sc-cc.is-sel .sc-cc__chk {
    opacity: 1;
}

/* 카드 추가 타일 */
.sc-cc--add {
    background: var(--sc-canvas);
    color: var(--sc-info);
    border: 2px dashed var(--sc-line);
    box-shadow: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    opacity: 1;
}

.sc-cc--add:hover {
    border-color: var(--sc-info);
    background: var(--sc-info-bg);
}

.sc-cc--add i {
    font-size: 28px;
}

.sc-cc--add span {
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 620px) {
    .sc-cc-swiper .swiper-slide {
        width: 250px;
    }
}