@charset "utf-8";

/* ===========================================================================
   common.css — 프로젝트 공통 컴포넌트 / 레이아웃 스타일
   - 모든 페이지에서 재사용되는 레이아웃·UI 컴포넌트
   - 페이지 전용 스타일은 각 페이지의 .css 파일에 별도 작성

   구성
   [1]  LAYOUT & BACKGROUND     — hero-gradient-bg, main-wrapper, section, section-header
   [2]  GRID LAYOUTS            — grid-card / 4 / 2 / 3
   [3]  BUTTONS                 — btn, btn-primary, btn-dark
   [4]  JS CONTROL STATE        — is-active-*, text-active-*, bg-active-*, disabled, hidden
   [5]  ICON MASK SYSTEM        — .v2-icon, .icon-* (lucide SVG mask)
   [6]  HERO TEXT               — hero-title-area, hero-title, hero-desc, text-gradient
   [7]  CLEAN-CARD              — clean-card, group-card
   [8]  TAB SYSTEM              — tab-buttons, tab-btn, tab-pane
   [9]  ACCORDION               — accordion-section, accordion-header, accordion-content
   [10] NOTICE BOX              — carrier-notice, carrier-notice-group
   [11] USAGE GUIDE HEADER      — usage-guide-header, usage-guide-badge
   [12] SIMPLE CALLOUT          — carrier-tail-notice, carrier-tail-simple
=========================================================================== */


/* =========================================
   [1] LAYOUT & BACKGROUND
========================================= */
.v2-hero-gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 600px;
    background: linear-gradient(180deg, var(--blue-70) 0%, var(--slate-50) 100%);
    z-index: -1;
    pointer-events: none;
}

.v2-main-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--content-max);   /* 콘텐츠 폭 단일 토큰(4.2.1) */
    margin: 0 auto;
    padding: 2.5rem 1rem 6rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    box-sizing: border-box;
}

@media (min-width: 680px) {
    .v2-main-wrapper { padding: 2.5rem 1.5rem 6rem 1.5rem; gap: 4rem; }
}
@media (min-width: 1024px) {
    .v2-main-wrapper { padding: 2.5rem 1.5rem 6rem; }
}
@media (min-width: 1141px) {
    .v2-main-wrapper { padding: 2.5rem 0 6rem; }
}
@media (min-width: 680px) and (max-width: 1023px) {
    .v2-main-wrapper { padding: 2rem 1.5rem 5rem; gap: 2.75rem; }
}
@media (max-width: 679px) {
    .v2-main-wrapper { padding: 1.5rem 1.25rem 4rem; gap: 2.25rem; }
}
@media (max-width: 360px) {
    .v2-main-wrapper { padding: 1.25rem 0.75rem 3.5rem; gap: 1.75rem; }
}

/* 콘텐츠 폭 래퍼 — 순수 폭/거터만 (세로 리듬은 .v2-main-wrapper가 담당, 역할 분리: 4.2.1) */
.v2-container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--content-gutter);
}
@media (max-width: 679px) { .v2-container { padding: 0 1.25rem; } }
@media (max-width: 360px) { .v2-container { padding: 0 1rem; } }

/* 섹션 공통 */
.v2-section {
    scroll-margin-top: calc(var(--header-h, 76px) + 1rem);
}

.v2-section-header {
    text-align: center;
    margin-bottom: 1.25rem;   /* 기본 20px (모바일) */
}
.v2-section-header h2 {
    font-size: 1.25rem;       /* 모바일 20px */
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 0.375rem;  /* 6px (8→6 압축) */
}
.v2-section-header p {
    font-size: 0.875rem;      /* 14px */
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.5;
}

/* 폴드 (680-1023) */
@media (min-width: 680px) and (max-width: 1023px) {
    .v2-section-header     { margin-bottom: 1.5rem; }   /* 24px */
    .v2-section-header h2  { font-size: 1.5rem; }       /* 24px */
}

/* PC (1024+) */
@media (min-width: 1024px) {
    .v2-section-header     { margin-bottom: 1.75rem; }   /* 28px */
    .v2-section-header h2  { font-size: 1.75rem; }       /* 28px (30→28 압축) */
    .v2-section-header p   { font-size: 1rem; }          /* 16px */
}

/* 플립 (≤360) */
@media (max-width: 360px) {
    .v2-section-header     { margin-bottom: 1rem; }      /* 16px */
    .v2-section-header h2  { font-size: 1.125rem; }      /* 18px */
    .v2-section-header p   { font-size: 0.8125rem; }     /* 13px */
}


/* =========================================
   [2] GRID LAYOUTS (재사용 가능한 그리드)
   .v2-grid-card-layout — 1024px+에서 7fr : 5fr
   .grid-4-layout    — 모바일 2열 → 680px+ 4열
   .v2-grid-2-layout    — 모바일 1열 → 680px+ 2열
   .v2-grid-3-layout    — 모바일 1열 → 680px+ 3열
========================================= */
.v2-grid-card-layout {
    display: grid;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .v2-grid-card-layout { grid-template-columns: 6fr 5fr; gap: 1.25rem; }   /* 셀프 미세 강조: 6:5 (약 55:45) */
}

.grid-4-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 680px) {
    .grid-4-layout { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

.v2-grid-2-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 680px) {
    .v2-grid-2-layout { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (min-width: 1024px) {
    .v2-grid-2-layout { gap: 1.25rem; }
}

.v2-grid-3-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2.5rem;
}
@media (min-width: 680px) {
    .v2-grid-3-layout { grid-template-columns: repeat(3, 1fr); }
}


/* =========================================
   [3] BUTTONS
   .v2-btn          — 기본 full-width pill (사이즈 md=48px, 토큰 기반·해상도 자동)
   .btn-xs/sm/lg — 사이즈 변형 (높이·패딩·폰트, variables.css [12] 토큰)
   .btn-auto     — 풀폭 해제(글자폭 버튼)
   .v2-btn-primary  — 브랜드 블루
   .v2-btn-dark     — 다크
   .v2-btn:disabled — 비활성
========================================= */
.v2-btn {
    width: 100%;
    min-height: var(--btn-md-h);
    padding: 0 var(--btn-md-px);
    border-radius: var(--btn-radius);
    font-size: var(--btn-md-fs);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    transition: all 0.2s;
    position: relative;
    z-index: 10;
}
.v2-btn:active { transform: scale(0.97); }

/* 사이즈 변형 — 어떤 버튼이든 클래스만 추가하면 적용. 해상도 대응은 토큰이 자동 처리 */
.btn-xs { min-height: var(--btn-xs-h); padding: 0 var(--btn-xs-px); font-size: var(--btn-xs-fs); }
.btn-sm { min-height: var(--btn-sm-h); padding: 0 var(--btn-sm-px); font-size: var(--btn-sm-fs); }
.btn-lg { min-height: var(--btn-lg-h); padding: 0 var(--btn-lg-px); font-size: var(--btn-lg-fs); }
.btn-auto { width: auto; }   /* 풀폭 해제 — 글자폭에 맞춘 버튼 */

.v2-btn-primary {
    background: var(--color-main);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(2, 103, 255, 0.2);   /* 그림자 압축 */
}
.v2-btn-primary:hover { background: var(--blue-600); }

.v2-btn-dark {
    background: var(--slate-800);
    color: var(--color-white);
}
.v2-btn-dark:hover { background: var(--slate-900); }

.v2-btn:disabled {
    background: var(--slate-300);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* =========================================
   [3-1] CUSTOM SELECT (공통 커스텀 셀렉트)
   .custom-select > .cs-trigger(.cs-value,.cs-chev) + .cs-panel > .cs-opt
   동작은 assets/js/common.js · 선택 시 'cs:change' 이벤트
   패널 기본 좌측 정렬 — 우측 정렬 필요하면 페이지에서 .cs-panel{left:auto;right:0} 오버라이드
========================================= */
.custom-select { position: relative; }
.cs-trigger { display: inline-flex; align-items: center; gap: 0.25rem; font-family: inherit; font-size: 0.875rem; font-weight: 700; color: var(--text-main); letter-spacing: -0.01em; padding: 0.25rem 0.0625rem; background: none; border: none; cursor: pointer; white-space: nowrap; }
.cs-chev { width: 0.875rem; height: 0.875rem; color: var(--text-tertiary); flex-shrink: 0; transition: transform 0.2s; }
.custom-select.open .cs-chev { transform: rotate(180deg); }
.cs-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 9.5rem; list-style: none; margin: 0; padding: 0.3125rem; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12); }
.cs-opt { display: flex; align-items: center; padding: 0.5rem 0.625rem; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.cs-opt:hover { background: var(--gray-100); }
.cs-opt.is-sel { color: var(--color-main); font-weight: 800; }
.cs-opt.is-sel::after { content: '✓'; margin-left: auto; padding-left: 0.625rem; font-weight: 900; }


/* =========================================
   [3-2] SEGMENTED TABS (공통 세그먼트 탭)
   .seg-tabs(트랙) > .seg-tab[.v2-active] · 사이즈 .seg-sm / .seg-md(기본) / .seg-lg
   크기는 variables.css [14] 토큰 — 해상도별 자동 축소
========================================= */
.seg-tabs { display: inline-flex; gap: var(--seg-gap); background: var(--slate-150); border-radius: var(--seg-radius); padding: var(--seg-pad); --seg-fs: var(--seg-md-fs); --seg-py: var(--seg-md-py); --seg-px: var(--seg-md-px); }
.seg-tabs.seg-sm { --seg-fs: var(--seg-sm-fs); --seg-py: var(--seg-sm-py); --seg-px: var(--seg-sm-px); }
.seg-tabs.seg-lg { --seg-fs: var(--seg-lg-fs); --seg-py: var(--seg-lg-py); --seg-px: var(--seg-lg-px); }
.seg-tab { font-family: inherit; font-size: var(--seg-fs); font-weight: 800; color: var(--text-secondary); border: none; background: none; border-radius: var(--seg-tab-radius); padding: var(--seg-py) var(--seg-px); letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; transition: color 0.15s, background 0.15s, box-shadow 0.15s; }
/* 활성 상태 — v2-active(activation 컨벤션) + active(plans·legacy 호환) 양쪽 매칭 */
.seg-tab.v2-active,
.seg-tab.active { color: var(--text-main); background: var(--color-white); box-shadow: 0 2px 6px rgba(17, 24, 39, 0.10); }


/* =========================================
   [4] JS Control State Classes (유틸리티)
   .is-active-*    — box-shadow ring
   .text-active-*  — 텍스트 컬러 강조
   .bg-active-*    — 배경 컬러 강조
   .disabled / .disabled-row — 비활성
   .hidden         — display: none
========================================= */
.v2-is-active-blue, .is-active-blue  { box-shadow: 0 0 0 2px rgba(2, 103, 255, 0.2); border-color: var(--color-main) !important; }
.v2-is-active-amber, .is-active-amber { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
.v2-is-active-slate, .is-active-slate { box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1); }

.v2-text-active-blue  { color: var(--color-main) !important; font-weight: 900; }
.v2-text-active-teal, .text-active-teal  { color: var(--teal-600) !important;          font-weight: 900; }
.v2-text-active-amber { color: var(--amber-500) !important;          font-weight: 900; }
.v2-text-active-rose  { color: var(--rose-500) !important;          font-weight: 900; }

.v2-bg-active-blue, .bg-active-blue   { background: var(--color-main) !important; color: var(--color-white) !important; }
.v2-bg-active-amber, .bg-active-amber  { background: var(--amber-500) !important;          color: var(--color-white) !important; }
.v2-bg-active-slate, .bg-active-slate  { background: var(--text-muted) !important;          color: var(--color-white) !important; }

.v2-disabled, .disabled       { opacity: 0.5; filter: grayscale(100%); pointer-events: none; }
.v2-disabled-row, .disabled-row   { opacity: 0.3; text-decoration: line-through; }
.v2-disabled-row .v2-time-meta,
.disabled-row .v2-time-meta { text-decoration: none; }   /* 보조 안내 문구는 취소선 제외 */
.v2-hidden, .hidden         { display: none !important; }


/* =========================================
   [5] Icon Mask System (i 태그 + CSS mask)
   - background-color: currentColor 로 부모 색상 상속
   - SVG 파일을 마스크로 사용해 단색 자유 변경
========================================= */
.v2-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
}

.v2-icon-wifi             { -webkit-mask-image: url(/shop/assets/images/svg/wifi.svg);             mask-image: url(/shop/assets/images/svg/wifi.svg); }
.v2-icon-user-check       { -webkit-mask-image: url(/shop/assets/images/svg/user-check.svg);       mask-image: url(/shop/assets/images/svg/user-check.svg); }
.v2-icon-arrow-left-right { -webkit-mask-image: url(/shop/assets/images/svg/arrow-left-right.svg); mask-image: url(/shop/assets/images/svg/arrow-left-right.svg); }
.v2-icon-bell-ring        { -webkit-mask-image: url(/shop/assets/images/svg/bell-ring.svg);        mask-image: url(/shop/assets/images/svg/bell-ring.svg); }
.v2-icon-smartphone       { -webkit-mask-image: url(/shop/assets/images/svg/smartphone.svg);       mask-image: url(/shop/assets/images/svg/smartphone.svg); }
.v2-icon-chevron-right    { -webkit-mask-image: url(/shop/assets/images/svg/chevron-right.svg);    mask-image: url(/shop/assets/images/svg/chevron-right.svg); }
.v2-icon-chevron-down     { -webkit-mask-image: url(/shop/assets/images/svg/chevron-down.svg);     mask-image: url(/shop/assets/images/svg/chevron-down.svg); }

/* .icon 공통 베이스 — 아래 .icon-*의 mask-image를 전제로 동작(background-color: currentColor + mask).
   단축(mask:)은 mask-image를 초기화하므로 개별 속성(repeat/position/size)만 사용해 정의 순서와 무관하게 안전. */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
}
.icon-chevron-down     { -webkit-mask-image: url(/shop/assets/images/svg/chevron-down.svg);     mask-image: url(/shop/assets/images/svg/chevron-down.svg); }
.icon-chevron-right    { -webkit-mask-image: url(/shop/assets/images/svg/chevron-right.svg);    mask-image: url(/shop/assets/images/svg/chevron-right.svg); }
.icon-smartphone       { -webkit-mask-image: url(/shop/assets/images/svg/smartphone.svg);       mask-image: url(/shop/assets/images/svg/smartphone.svg); }
.icon-link-2           { -webkit-mask-image: url(/shop/assets/images/svg/link-2.svg);           mask-image: url(/shop/assets/images/svg/link-2.svg); }
.icon-list             { -webkit-mask-image: url(/shop/assets/images/svg/list.svg);             mask-image: url(/shop/assets/images/svg/list.svg); }
.icon-layout-grid      { -webkit-mask-image: url(/shop/assets/images/svg/layout-grid.svg);      mask-image: url(/shop/assets/images/svg/layout-grid.svg); }
.v2-icon-clock            { -webkit-mask-image: url(/shop/assets/images/svg/clock.svg);            mask-image: url(/shop/assets/images/svg/clock.svg); }
.v2-icon-zap              { -webkit-mask-image: url(/shop/assets/images/svg/zap.svg);              mask-image: url(/shop/assets/images/svg/zap.svg); }
.v2-icon-trending-down    { -webkit-mask-image: url(/shop/assets/images/svg/trending-down.svg);    mask-image: url(/shop/assets/images/svg/trending-down.svg); }
.v2-icon-headphones       { -webkit-mask-image: url(/shop/assets/images/svg/headphones.svg);       mask-image: url(/shop/assets/images/svg/headphones.svg); }
.v2-icon-users            { -webkit-mask-image: url(/shop/assets/images/svg/users.svg);            mask-image: url(/shop/assets/images/svg/users.svg); }
.v2-icon-calendar         { -webkit-mask-image: url(/shop/assets/images/svg/calendar.svg);         mask-image: url(/shop/assets/images/svg/calendar.svg); }
.v2-icon-shield-check     { -webkit-mask-image: url(/shop/assets/images/svg/shield-check.svg);     mask-image: url(/shop/assets/images/svg/shield-check.svg); }
.v2-icon-phone            { -webkit-mask-image: url(/shop/assets/images/svg/phone.svg);            mask-image: url(/shop/assets/images/svg/phone.svg); }
/* 요금제 페이지 추가 아이콘 */
.icon-search           { -webkit-mask-image: url(/shop/assets/images/svg/search.svg);           mask-image: url(/shop/assets/images/svg/search.svg); }
.icon-sliders          { -webkit-mask-image: url(/shop/assets/images/svg/sliders.svg);          mask-image: url(/shop/assets/images/svg/sliders.svg); }
.icon-x                { -webkit-mask-image: url(/shop/assets/images/svg/x.svg);                 mask-image: url(/shop/assets/images/svg/x.svg); }
.icon-bar-chart        { -webkit-mask-image: url(/shop/assets/images/svg/bar-chart.svg);        mask-image: url(/shop/assets/images/svg/bar-chart.svg); }
.icon-gauge            { -webkit-mask-image: url(/shop/assets/images/svg/gauge.svg);            mask-image: url(/shop/assets/images/svg/gauge.svg); }
.icon-tag              { -webkit-mask-image: url(/shop/assets/images/svg/tag.svg);              mask-image: url(/shop/assets/images/svg/tag.svg); }
.icon-rotate-ccw       { -webkit-mask-image: url(/shop/assets/images/svg/rotate-ccw.svg);       mask-image: url(/shop/assets/images/svg/rotate-ccw.svg); }
.icon-alert-triangle   { -webkit-mask-image: url(/shop/assets/images/svg/alert-triangle.svg);   mask-image: url(/shop/assets/images/svg/alert-triangle.svg); }
.icon-alert-circle     { -webkit-mask-image: url(/shop/assets/images/svg/alert-circle.svg);     mask-image: url(/shop/assets/images/svg/alert-circle.svg); }
.icon-info             { -webkit-mask-image: url(/shop/assets/images/svg/info.svg);             mask-image: url(/shop/assets/images/svg/info.svg); }
.icon-receipt          { -webkit-mask-image: url(/shop/assets/images/svg/receipt.svg);          mask-image: url(/shop/assets/images/svg/receipt.svg); }
.icon-award            { -webkit-mask-image: url(/shop/assets/images/svg/award.svg);            mask-image: url(/shop/assets/images/svg/award.svg); }
/* GNB 헤더 — 퀵메뉴/햄버거 */
.icon-truck            { -webkit-mask-image: url(/shop/assets/images/svg/truck.svg);            mask-image: url(/shop/assets/images/svg/truck.svg); }
.icon-user             { -webkit-mask-image: url(/shop/assets/images/svg/user.svg);             mask-image: url(/shop/assets/images/svg/user.svg); }
.icon-menu             { -webkit-mask-image: url(/shop/assets/images/svg/menu.svg);             mask-image: url(/shop/assets/images/svg/menu.svg); }
.icon-sim-card         { -webkit-mask-image: url(/shop/assets/images/svg/sim-card.svg);         mask-image: url(/shop/assets/images/svg/sim-card.svg); }
.icon-gift             { -webkit-mask-image: url(/shop/assets/images/svg/gift.svg);             mask-image: url(/shop/assets/images/svg/gift.svg); }
.icon-user-round       { -webkit-mask-image: url(/shop/assets/images/svg/user-round.svg);       mask-image: url(/shop/assets/images/svg/user-round.svg); }
.icon-truck-electric   { -webkit-mask-image: url(/shop/assets/images/svg/truck-electric.svg);   mask-image: url(/shop/assets/images/svg/truck-electric.svg); }
/* 모바일 하단 탭바 — 라인(기본) + 활성 페이지용 fill 변형(네이버식 스왑) */
.icon-home             { -webkit-mask-image: url(/shop/assets/images/svg/home.svg);             mask-image: url(/shop/assets/images/svg/home.svg); }
.icon-home-fill        { -webkit-mask-image: url(/shop/assets/images/svg/home-fill.svg);        mask-image: url(/shop/assets/images/svg/home-fill.svg); }
.icon-search-fill      { -webkit-mask-image: url(/shop/assets/images/svg/search-fill.svg);      mask-image: url(/shop/assets/images/svg/search-fill.svg); }
.icon-user-round-fill  { -webkit-mask-image: url(/shop/assets/images/svg/user-round-fill.svg);  mask-image: url(/shop/assets/images/svg/user-round-fill.svg); }
.icon-zap-fill         { -webkit-mask-image: url(/shop/assets/images/svg/zap-fill.svg);         mask-image: url(/shop/assets/images/svg/zap-fill.svg); }
.icon-message-square-heart      { -webkit-mask-image: url(/shop/assets/images/svg/message-square-heart.svg);      mask-image: url(/shop/assets/images/svg/message-square-heart.svg); }
.icon-messages-square           { -webkit-mask-image: url(/shop/assets/images/svg/messages-square.svg);           mask-image: url(/shop/assets/images/svg/messages-square.svg); }
.icon-message-square-heart-fill { -webkit-mask-image: url(/shop/assets/images/svg/message-square-heart-fill.svg); mask-image: url(/shop/assets/images/svg/message-square-heart-fill.svg); }


/* =========================================
   [6] HERO TEXT (페이지 상단 인사 영역)
   .v2-hero-title-area — 가운데 정렬 + 하단 margin
   .v2-hero-title      — 큰 제목, 반응형 폰트
   .v2-text-gradient   — 다크 → 브랜드 블루 그라데이션 텍스트
   .v2-hero-desc       — 부제 (max-width로 가독성)
   .hide-mobile     — 모바일에서 숨김 (줄바꿈 br 등)
========================================= */
.v2-hero-title-area {
    text-align: center;
    margin-bottom: 2rem;       /* PC: 32px (40→32 압축) */
}

.v2-hero-title {
    font-size: 1.875rem;       /* 페이지 제목 기본 30px (직관 문구) */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;    /* 12px */
    letter-spacing: -0.02em;
    color: var(--text-main);
}

/* 랜딩(.v2-hero-title-area 내부) 제목은 마케팅 대제목 크기 유지 — standalone(상세 페이지) 축소와 분리 */
.v2-hero-title-area .v2-hero-title { font-size: 2.125rem; font-weight: 900; }   /* 랜딩 PC: 34px */

/* 페이지 히어로 헤더(좌측정렬) — 제목 + 선택적 부제(.v2-hero-sub)를 묶어 하단 여백을 부모가 공통 관리.
   부제 유무와 무관하게 동일한 하단 간격 유지 → 부제 없는 페이지는 제목이 last-child라 내부 간격 0 */
.v2-hero-head { margin-bottom: 1.375rem; }
.v2-hero-head .v2-hero-title { margin-bottom: 0.375rem; }
.v2-hero-head .v2-hero-title:last-child { margin-bottom: 0; }

.v2-text-gradient {
    background: linear-gradient(135deg, var(--slate-900) 0%, var(--color-main) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.v2-hero-desc {
    font-size: 0.8125rem;      /* 기본 13px (14→13) */
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.5;
    max-width: 36rem;
    margin: 0 auto;
}

@media (min-width: 680px) {
    .v2-hero-title { font-size: 1.875rem; }   /* PC: 30px */
    .v2-hero-desc  { font-size: 0.9375rem; }   /* PC: 15px (16→15) */
}
@media (min-width: 680px) and (max-width: 1023px) {
    .v2-hero-title      { font-size: 1.625rem; }          /* 태블릿·폴드: 26px */
    .v2-hero-title-area .v2-hero-title { font-size: 1.875rem; }   /* 랜딩 폴드: 30px */
    .v2-hero-desc       { font-size: 0.875rem; max-width: 30rem; }   /* 폴드: 14px (15→14) */
    .v2-hero-title-area { margin-bottom: 1.5rem; }
}
@media (max-width: 679px) {
    .hide-mobile     { display: none; }
    .v2-hero-title      { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.025em; }   /* 모바일: 22px */
    .v2-hero-title-area .v2-hero-title { font-size: 1.625rem; }   /* 랜딩 모바일: 26px */
    .v2-hero-desc       { font-size: 0.8125rem; line-height: 1.5; }    /* 모바일: 13px (14→13) */
    .v2-hero-title-area { margin-bottom: 1.25rem; }
}
@media (max-width: 360px) {
    .v2-hero-title      { font-size: 1.125rem; }          /* 플립: 18px */
    .v2-hero-title-area .v2-hero-title { font-size: 1.375rem; }   /* 랜딩 플립: 22px */
    .v2-hero-desc       { font-size: 0.75rem; }         /* 플립: 12px (13→12) */
    .v2-hero-title-area { margin-bottom: 1rem; }
}


/* =========================================
   [7] CLEAN-CARD (기본 카드 컨테이너)
   .v2-clean-card  — 흰색 카드 + 보더 + 그림자 + 둥근 모서리
   .v2-group-card  — 호버 시 떠오르는 그룹 카드
========================================= */
.v2-clean-card {
    background: var(--color-white);
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border-radius: var(--radius-xl);   /* Crisp Bento: 카드 radius 고정 20px */
    transition: all 0.4s var(--smooth);
    position: relative;
    padding: 1.5rem;
}

.v2-group-card:not(.v2-disabled, .disabled):hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(2, 103, 255, 0.08);
    border-color: var(--blue-border);
}
.v2-group-card:not(.v2-disabled, .disabled):hover .v2-card-icon-wrap {
    transform: translateY(-4px);
}

@media (min-width: 680px) {
    .v2-clean-card { padding: 1.5rem; }   /* 토스 압축: 32px → 24px */
}
@media (max-width: 679px) {
    .v2-clean-card { padding: 1.25rem; border-radius: var(--radius-lg); }
}
@media (max-width: 360px) {
    .v2-clean-card { padding: 1rem; }
}


/* =========================================
   [8] TAB SYSTEM
   .v2-tab-buttons      — 탭 버튼 그룹 컨테이너
   .v2-tab-btn          — 탭 버튼 (.v2-active 시 강조)
   .tab-soon         — 준비 중 라벨
   .v2-tab-pane         — 탭 콘텐츠 (.v2-active 시 표시)
========================================= */
.v2-tab-buttons {
    display: flex;
    gap: 0.1875rem;              /* 3px (4→3 압축) */
    background: var(--slate-100);
    padding: 0.25rem;            /* 4px (6→4 압축) */
    border-radius: var(--radius-pill);
    margin-bottom: 0.75rem;      /* 12px (16→12 압축) */
}

.v2-tab-btn {
    flex: 1;
    padding: 0.625rem 0;         /* 10px (14→10 압축) */
    font-size: 0.9375rem;        /* 15px (14→15 가독성) */
    font-weight: 700;
    color: var(--text-muted);
    border-radius: var(--radius-pill);
    transition: all 0.3s var(--smooth);
    line-height: 1.2;
}
.v2-tab-btn:hover { color: var(--text-main); }
.v2-tab-btn.v2-active {
    background: var(--color-white);
    color: var(--text-main);
    font-weight: 800;
    box-shadow: 0 1px 4px rgba(11, 18, 32, 0.06);   /* 그림자 압축 */
}

.tab-soon {
    font-size: 0.625rem;
    background: var(--slate-150);
    color: var(--text-muted);
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-xs);
    margin-left: 0.4375rem;
    font-weight: 700;
}
.v2-tab-btn.v2-active .tab-soon { background: var(--slate-150); color: var(--text-muted); }

.v2-tab-pane {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.v2-tab-pane.v2-active {
    display: block;
    opacity: 1;
}

/* 폴드 (680-1023): PC 동일 또는 약간 압축 */
@media (min-width: 680px) and (max-width: 1023px) {
    .v2-tab-btn     { padding: 0.5625rem 0; font-size: 0.875rem; }   /* 9px / 14px */
}

/* 모바일 (≤679) */
@media (max-width: 679px) {
    .v2-tab-buttons { padding: 0.1875rem; margin-bottom: 0.625rem; }   /* 3px / 10px */
    .v2-tab-btn     { font-size: 0.875rem; padding: 0.5rem 0; }         /* 14px / 8px */
    .tab-soon    { font-size: 0.5625rem; padding: 0.125rem 0.4375rem; margin-left: 0.3125rem; }
}

/* 플립 (≤360) */
@media (max-width: 360px) {
    .v2-tab-buttons { padding: 0.125rem; margin-bottom: 0.5rem; }       /* 2px / 8px */
    .v2-tab-btn     { font-size: 0.8125rem; padding: 0.4375rem 0; }     /* 13px / 7px */
    .tab-soon    { font-size: 0.5rem; padding: 0.0625rem 0.3125rem; }
}


/* =========================================
   [9] ACCORDION
   .v2-accordion-section          — 펼침 컨테이너 (.expanded 시 열림)
   .v2-accordion-header           — 클릭 영역
   .v2-accordion-header-text      — 헤더 텍스트 래퍼
   .v2-accordion-icon             — 펼침 화살표 (회전)
   .v2-accordion-content          — 콘텐츠 (max-height 트랜지션)
   .v2-accordion-inner            — 콘텐츠 내부 패딩
========================================= */
.v2-accordion-section {
    background: var(--color-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: box-shadow 0.4s var(--smooth);
}
.v2-accordion-section:hover {
    box-shadow: 0 12px 30px rgba(2, 103, 255, 0.06);
}

/* 4개 아코디언 묶음 컨테이너 — 모든 사이즈에 8px gap 고정 */
.v2-accordion-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.v2-accordion-header {
    width: 100%;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    transition: background 0.3s;
    background: transparent;
}

.v2-accordion-header-text {
    flex: 1;
    min-width: 0;
}
.v2-accordion-header-text h2 {
    font-size: 1.125rem;
    font-weight: 900;
    margin-bottom: 0.35rem;
    letter-spacing: -0.02em;
    color: var(--text-main);
}
.v2-accordion-header-text p {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.4;
}

.v2-accordion-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.4s var(--smooth), color 0.3s;
}
.v2-accordion-section.v2-expanded .v2-accordion-icon,
.v2-accordion-section.expanded .v2-accordion-icon {
    transform: rotate(180deg);
    color: var(--color-main);
}

.v2-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--smooth);
}
.v2-accordion-section.v2-expanded .v2-accordion-content,
.v2-accordion-section.expanded .v2-accordion-content {
    max-height: 3000px;
}

.v2-accordion-inner {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
}

@media (min-width: 680px) {
    .v2-accordion-header                       { padding: 1.25rem 1.5rem; }   /* 토스 압축: 28x32 → 20x24 */
    .v2-accordion-header-text h2               { font-size: 1.25rem; }
    .v2-accordion-header-text p                { font-size: 0.9375rem; }
    .v2-accordion-inner                        { padding: 0 1.5rem 1.5rem; }   /* 토스 압축: 40 → 24 */
}
@media (min-width: 680px) and (max-width: 1023px) {
    .v2-accordion-header                       { padding: 1rem 1.25rem; }   /* 토스 압축: 24x30 → 16x20 */
    .v2-accordion-header-text h2               { font-size: 1.125rem; }
    .v2-accordion-header-text p                { font-size: 0.875rem; }
    .v2-accordion-inner                        { padding: 0 1.25rem 1.25rem; }   /* 토스 압축: 24 → 20 */
}
@media (max-width: 679px) {
    .v2-accordion-header           { padding: 1rem 1.125rem; gap: 0.75rem; }
    .v2-accordion-header-text h2   { font-size: 1rem; font-weight: 800; }
    .v2-accordion-header-text p    { font-size: 0.875rem; }
    .v2-accordion-icon             { width: 1.25rem; height: 1.25rem; }
    .v2-accordion-inner            { padding: 0 1rem 1rem; }
}
@media (max-width: 360px) {
    .v2-accordion-header                       { padding: 0.875rem 1rem; }
    .v2-accordion-header-text h2               { font-size: 0.9375rem; }
    .v2-accordion-header-text p                { font-size: 0.75rem; }   /* 12px — 플립 보조 최소 (11→12) */
    .v2-accordion-inner                        { padding: 0 0.875rem 0.875rem; gap: 1rem; }
}


/* =========================================
   [10] NOTICE BOX (공지/안내 박스)
   .carrier-notice         — 단일 안내
   .v2-carrier-notice-group   — 여러 항목 통합
   .v2-carrier-notice-item    — 통합 안내의 각 항목
   .v2-carrier-notice-label   — 항목 라벨
========================================= */
.carrier-notice {
    background: var(--blue-60);
    border: 1px solid var(--blue-110);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.carrier-notice-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-main);
    margin-bottom: 0.25rem;
}
.carrier-notice-header h4 {
    font-size: 0.9375rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--color-main);
    margin: 0;
}
.carrier-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-size: 0.6875rem;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
}
.carrier-notice > p {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
    padding-left: 1.75rem;
    line-height: 1.55;
}

/* 통합 안내 박스 (여러 항목 묶음) */
.v2-carrier-notice-group {
    background: var(--blue-60);
    border: 1px solid var(--blue-110);
    border-radius: var(--radius-md);
    padding: 0.25rem 1.25rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.v2-carrier-notice-item {
    padding: 0.875rem 0;
    border-top: 1px solid var(--blue-110);
}
.v2-carrier-notice-item:first-child { border-top: none; }

.v2-carrier-notice-label {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-main);
    letter-spacing: -0.02em;
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.4375rem;
}
.v2-carrier-notice-label::before {
    content: '!';
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--color-main);
    color: var(--color-white);
    font-size: 0.6875rem;
    font-weight: 900;
    line-height: 1;
}
.v2-carrier-notice-item p {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
    line-height: 1.65;
    word-break: keep-all;
}
.v2-carrier-notice-item strong { color: var(--color-main); font-weight: 800; }

@media (min-width: 680px) {
    .carrier-notice-header h4         { font-size: 1rem; }
    .v2-carrier-notice-label             { font-size: 1rem; }
    .v2-carrier-notice-label::before     { width: 1.25rem; height: 1.25rem; font-size: 0.75rem; }
    .v2-carrier-notice-item p            { font-size: 0.875rem; }
}
@media (min-width: 680px) and (max-width: 1023px) {
    .v2-carrier-notice-group { margin-top: 1.25rem; }
    .carrier-notice       { margin-bottom: 1.25rem; }
}
@media (max-width: 679px) {
    .carrier-notice              { padding: 0.875rem 1rem; margin-bottom: 1rem; }
    .carrier-notice-header h4    { font-size: 0.875rem; }
    .carrier-notice > p          { font-size: 0.75rem; padding-left: 1.625rem; }
    .v2-carrier-notice-group        { padding: 0.25rem 1rem; margin-top: 1rem; }
    .v2-carrier-notice-item         { padding: 0.75rem 0; }
    .v2-carrier-notice-label        { font-size: 0.875rem; }
    .v2-carrier-notice-label::before{ width: 1rem; height: 1rem; font-size: 0.625rem; }
    .v2-carrier-notice-item p       { font-size: 0.75rem; }
}
@media (max-width: 360px) {
    .v2-carrier-notice-group { margin-top: 0.875rem; }
    .carrier-notice       { margin-bottom: 0.875rem; }
}


/* =========================================
   [11] USAGE GUIDE HEADER (가이드 박스 상단 헤더)
   .v2-usage-guide-header   — 헤더 컨테이너 (하단 보더)
   .usage-guide-badge    — 작은 칩 라벨
   .v2-usage-guide-header h4 — 제목
   .v2-usage-guide-header p  — 부제
========================================= */
.v2-usage-guide-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.usage-guide-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--color-main);
    background: var(--blue-soft);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill);
    letter-spacing: 0.01em;
    margin-bottom: 0.625rem;
}

.v2-usage-guide-header h4 {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.02em;
    margin: 0 0 0.375rem;
    line-height: 1.35;
}
.v2-usage-guide-header p {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
    line-height: 1.55;
    word-break: keep-all;
}
.v2-usage-guide-header p strong {
    color: var(--color-main);
    font-weight: 800;
}

@media (min-width: 680px) {
    .v2-usage-guide-header h4 { font-size: 1.25rem; }
}
@media (max-width: 679px) {
    .v2-usage-guide-header     { margin-bottom: 1rem; padding-bottom: 1rem; }
    .v2-usage-guide-header h4  { font-size: 1rem; }
    .v2-usage-guide-header p   { font-size: 0.8125rem; }
    .usage-guide-badge      { font-size: 0.625rem; padding: 0.1875rem 0.5rem; }
}


/* =========================================
   [12] SIMPLE CALLOUT (간단한 강조 안내)
   .v2-carrier-tail-notice          — 기본 약관/유의사항 톤
   .carrier-tail-simple          — 단독 강조 박스 (옅은 블루 + ⓘ)
   (두 클래스가 함께 결합되어 작동하므로 한 파일에 정의)
========================================= */
.v2-carrier-tail-notice {
    margin-top: 1.5rem;
    padding: 1.5rem 0 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--slate-text);
    letter-spacing: -0.01em;
}
.v2-carrier-tail-notice h5 {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--slate-950);
    letter-spacing: -0.02em;
    margin: 0 0 0.625rem;
}
.v2-carrier-tail-notice h6 {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--slate-950);
    letter-spacing: -0.02em;
    margin: 1.5rem 0 0.5rem;
}
.v2-carrier-tail-notice p           { margin: 0 0 0.625rem; }
.v2-carrier-tail-notice p:last-child{ margin-bottom: 0; }
.v2-carrier-tail-notice strong      { color: var(--slate-950); font-weight: 700; }
.v2-carrier-tail-notice .v2-small-note {
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}
.v2-carrier-tail-notice .v2-tail-callout {
    margin: 0.75rem 0 1rem;
    padding: 0.875rem 1rem;
    background: var(--gray-15);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--slate-text);
}
.v2-carrier-tail-notice .v2-tail-callout p {
    margin: 0;
    line-height: 1.7;
}

/* === 간단한 강조 안내 (옅은 블루 + ⓘ 아이콘) === */
.v2-carrier-tail-notice.carrier-tail-simple {
    margin-top: 1.5rem;
    padding: 1.125rem 1.25rem;
    background: var(--blue-60);
    border: none;
    border-top: none;
    border-radius: var(--radius-md);
    color: var(--blue-deep);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    line-height: 1.65;
    letter-spacing: -0.01em;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.v2-carrier-tail-notice.carrier-tail-simple::before {
    content: 'i';
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--color-main);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    margin-top: 0.125rem;
}
.v2-carrier-tail-notice.carrier-tail-simple p {
    margin: 0;
    flex: 1;
}
.v2-carrier-tail-notice.carrier-tail-simple strong {
    color: var(--color-main);
    font-weight: 800;
}

@media (min-width: 680px) {
    .v2-carrier-tail-notice    { padding-top: 1.5rem; font-size: 0.9375rem; line-height: 1.8; }
    .v2-carrier-tail-notice h5 { font-size: 1rem; }
}
@media (max-width: 679px) {
    .v2-carrier-tail-notice                        { padding: 1.25rem 0 0; font-size: 0.8125rem; line-height: 1.7; }
    .v2-carrier-tail-notice h5                     { font-size: 0.875rem; }
    .v2-carrier-tail-notice h6                     { font-size: 0.875rem; }
    .v2-carrier-tail-notice .v2-tail-callout          { padding: 0.75rem 0.875rem; font-size: 0.8125rem; }
    .v2-carrier-tail-notice.carrier-tail-simple    { padding: 0.875rem 1rem; font-size: 0.8125rem; }
}

/* ===========================================================================
   공통 모달 셸 (.modal) — 스크림 + 시트. 전 페이지 재사용.
   · 동작: 폴드 이하(≤1023) 바닥 고정 바텀시트 / PC(≥1024) 중앙 모달
   · 컨텐츠는 .modal-body 안에 페이지별 스타일로 (셸은 컨텐츠를 모름)
   · 시트 폭은 --modal-max 변수로 주입 (예: .cmp-sheet { --modal-max: 760px })
   · 상태 토글: .modal.v2-active  (JS openModal/closeModal)
   구조: .modal > .modal-sheet > (.modal-grab) (.modal-head > .modal-title + .modal-close) .modal-body (.modal-foot)
=========================================================================== */
/* height:100dvh — 모바일 브라우저 툴바를 제외한 '보이는 뷰포트'에 맞춤(미지원 시 inset:0 폴백) → 바텀시트가 툴바 뒤로 안 밀림 */
.modal { position: fixed; inset: 0; height: 100dvh; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; background-color: rgba(15, 23, 42, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
/* 활성 상태 — v2-active(activation 컨벤션) + active(plans·legacy 호환) 양쪽 매칭 */
.modal.v2-active,
.modal.active { opacity: 1; pointer-events: auto; }
.modal-sheet { display: flex; flex-direction: column; width: 100%; max-width: var(--modal-max, 600px); max-height: 90vh; max-height: 90dvh; background-color: var(--color-white); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.modal.v2-active .modal-sheet,
.modal.active .modal-sheet { transform: translateY(0); }
/* 그랩 핸들 (바텀시트 모드에서만) */
.modal-grab { flex-shrink: 0; width: 2.5rem; height: 0.25rem; margin: -0.375rem auto 0.875rem; border-radius: var(--radius-pill); background: var(--gray-300); }
/* 헤더 / 바디 / 푸터 */
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; flex-shrink: 0; }
.modal-title { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; color: var(--text-main); }
.modal-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border: none; border-radius: 50%; background: var(--gray-100); color: var(--text-muted); font-size: 1.375rem; line-height: 1; cursor: pointer; transition: background .14s, color .14s; }
.modal-close:hover { background: var(--gray-200); color: var(--text-main); }
.modal-close .v2-icon { width: 1.125rem; height: 1.125rem; }
/* 본문이 길어 스크롤될 때 우측에 얇은 스크롤바 노출 — 스크롤 가능 여부를 시각적으로 알림 */
.modal-body { flex: 1; padding: 0 !important; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }   /* overscroll: 시트 끝까지 스크롤해도 배경으로 체이닝 안 됨(iOS) */
.modal-body::-webkit-scrollbar { width: 0.375rem; }
.modal-body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-pill); }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-foot { flex-shrink: 0; margin-top: 1.25rem; }

/* PC(≥1024) — 중앙 모달(스케일 페이드) */
@media (min-width: 1024px) {
    .modal { align-items: center; padding: 1.5rem; }
    .modal-sheet { border-radius: var(--radius-xl); max-height: 86vh; max-height: 86dvh; opacity: 0; transform: scale(0.96); transition: transform .26s cubic-bezier(.16, 1, .3, 1), opacity .26s; }
    .modal.v2-active .modal-sheet,
    .modal.active .modal-sheet { opacity: 1; transform: scale(1); }
    .modal-grab { display: none; }
}

/* ===========================================================================
   공통 경고/알림 팝업 (.v2-alert) — 브라우저 alert() 대체. 공통 .modal 셸 재사용 + 스크립트 없이 동작.
   동작 : 숨김 체크박스(.v2-alert-toggle)의 checked가 .modal.active를 대체(노출·시트 슬라이드/스케일).
          닫기(딤·X·버튼)는 for=ID 라벨이 체크박스를 해제 → JS 불필요. 배경 스크롤 잠금은 html:has로 처리.
   구조 : <input type="checkbox" id="ID" class="v2-alert-toggle" hidden>
          <div class="modal v2-alert" role="alertdialog" aria-modal="true" aria-labelledby="IDTitle" aria-describedby="IDDesc">
            <label for="ID" class="v2-alert-scrim" aria-label="닫기"></label>
            <div class="modal-sheet">
              <div class="modal-grab"></div>
              <label for="ID" class="modal-close v2-alert-close" aria-label="닫기"><i class="v2-icon icon-x" aria-hidden="true"></i></label>
              <div class="modal-body"><h2 class="v2-alert-title" id="IDTitle">타이틀</h2><p class="v2-alert-desc" id="IDDesc">설명</p></div>
              <div class="modal-foot"><label for="ID" class="v2-btn v2-btn-primary">확인</label></div>
            </div>
          </div>
   노출 : 개발자가 조건 충족 시 체크박스에 checked 속성만 출력. (ID는 인스턴스마다 고유하게)
=========================================================================== */
.v2-alert { --modal-max: 26rem; }
.v2-alert-toggle:checked ~ .v2-alert { opacity: 1; pointer-events: auto; }
.v2-alert-toggle:checked ~ .v2-alert .modal-sheet { transform: translateY(0); }
html:has(.v2-alert-toggle:checked) { overflow: hidden; }   /* 열림 동안 배경 스크롤 잠금(:has로 JS 대체) */
.v2-alert .modal-sheet { position: relative; z-index: 1; text-align: center; }   /* 헤더 없이 body 중앙 정렬 */
.v2-alert-scrim { position: absolute; inset: 0; cursor: pointer; }   /* 딤 클릭 닫기 */
.v2-alert-close { position: absolute; top: 0.875rem; right: 0.875rem; z-index: 2; }   /* 헤더 없음 → 우상단 X */
.v2-alert-title { padding: 0 1.5rem; margin-bottom: 0.625rem; font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; color: var(--text-main); line-height: 1.4; }   /* 좌우 여백 = 우상단 X와 겹침 방지 */
.v2-alert-desc { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; }
.v2-alert-desc b { color: var(--text-main); font-weight: 700; }
.v2-alert .v2-btn { cursor: pointer; }   /* label을 CTA로 사용 → 포인터 커서 */
@media (min-width: 1024px) {
    .v2-alert-toggle:checked ~ .v2-alert .modal-sheet { opacity: 1; transform: scale(1); }
}

/* ===========================================================================
   공통 상태 컴포넌트 (.v2-state) — 빈/에러 상태(판매 종료·로딩 실패 등). 전 페이지 재사용.
   구조: .v2-state > .v2-state-badge(.end|.err) > i.v2-icon
                   > .v2-state-title > .v2-state-desc
                   > .v2-state-actions(.v2-btn.v2-btn-primary + .v2-state-sub)
   톤: 판매 종료=중립 회색(안내) / 에러=온화한 파스텔 주황(주의). 색만 아니라 아이콘·문구로도 구분(WCAG).
=========================================================================== */
.v2-state { text-align: center; padding: 2.75rem 1.5rem 2.5rem; }
.v2-state-badge { width: 4.5rem; height: 4.5rem; margin: 0 auto 1.25rem; border-radius: 50%; display: grid; place-items: center; }
.v2-state-badge .v2-icon { width: 2rem; height: 2rem; }
.v2-state-badge.end { background: var(--gray-100); color: var(--text-tertiary); }            /* 판매 종료 — 중립 안내 */
.v2-state-badge.err { background: var(--label-orange-bg); color: var(--label-orange-text); }  /* 에러 — 주의 */
.v2-state-title { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-main); }
.v2-state-desc { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.65; }
.v2-state-actions { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; }
.v2-state-actions .v2-icon { width: 1.0625rem; height: 1.0625rem; }
/* 보조 액션 — 아웃라인(저채도). 단발 메인 CTA(.v2-btn-primary)와 위계 분리 */
.v2-state-sub { width: 100%; min-height: var(--btn-md-h); border-radius: var(--btn-radius); font-size: var(--btn-md-fs); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem; background: var(--color-white); border: 1px solid var(--border-light); color: var(--text-secondary); transition: border-color .14s, color .14s; }
.v2-state-sub:hover { border-color: var(--text-tertiary); color: var(--text-main); }

/* 폴드↑ — 배지·제목 키우고, 넓은 폭은 액션을 가로로 나란히(여백 낭비 방지) */
@media (min-width: 680px) {
    .v2-state { padding: 3.5rem 2rem; }
    .v2-state-badge { width: 5rem; height: 5rem; }
    .v2-state-badge .v2-icon { width: 2.25rem; height: 2.25rem; }
    .v2-state-title { font-size: 1.25rem; }
    .v2-state-actions { flex-direction: row; justify-content: center; }
    .v2-state-actions .v2-btn, .v2-state-actions .v2-state-sub { width: auto; min-width: 11rem; }
}

/* 스크린리더 전용 — 시각적으론 숨기고 보조기기엔 읽힘(취소선 가격의 "할인 전 가격" 라벨 등)
   .blind = 동일 기능 별칭(국문 관용 클래스명). 둘 다 같은 규칙을 공유한다. */
.v2-sr-only,
.blind {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 텍스트 컬러 유틸 — 강조 문구를 메인블루로 (전 페이지 재사용) */
.v2-text-main { color: var(--color-main); }