@charset "utf-8";

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

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


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

.v2-main-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1100px;
    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-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
   .v2-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) */
}

.v2-grid-4-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 680px) {
    .v2-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
   .v2-btn-primary  — 브랜드 블루
   .v2-btn-dark     — 다크
   .v2-btn:disabled — 비활성
========================================= */
.v2-btn {
    width: 100%;
    padding: 0.875rem 1.25rem;   /* PC: 14×20px — 토스 스타일 압축 */
    border-radius: 0.625rem;     /* 10px */
    font-size: 1rem;             /* 16px */
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.01em;
    transition: all 0.2s;
    position: relative;
    z-index: 10;
}
.v2-btn:active { transform: scale(0.97); }

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

.v2-btn-dark {
    background: #1E293B;
    color: #FFFFFF;
}
.v2-btn-dark:hover { background: #0F172A; }

.v2-btn:disabled {
    background: #CBD5E1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 폴드 (680-1023): 좁은 카드 폭에 맞춤 */
@media (min-width: 680px) and (max-width: 1023px) {
    .v2-btn { padding: 0.8125rem 1rem; font-size: 0.9375rem; }   /* 13×16px / 15px */
}

/* 모바일 (≤679): 토스 가이드 표준 */
@media (max-width: 679px) {
    .v2-btn { padding: 0.8125rem 1rem; font-size: 0.9375rem; border-radius: 0.625rem; }   /* 13×16px / 15px / 10px */
}

/* 플립 (≤360): 최소 압축 */
@media (max-width: 360px) {
    .v2-btn { padding: 0.6875rem 0.875rem; font-size: 0.875rem; border-radius: 0.5rem; }   /* 11×14px / 14px / 8px */
}


/* =========================================
   [4] JS Control State Classes (유틸리티)
   .is-active-*    — box-shadow ring
   .text-active-*  — 텍스트 컬러 강조
   .bg-active-*    — 배경 컬러 강조
   .v2-disabled / .v2-disabled-row — 비활성
   .v2-hidden         — display: none
========================================= */
.v2-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 { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
.v2-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  { color: #0D9488 !important;          font-weight: 900; }
.v2-text-active-amber { color: #F59E0B !important;          font-weight: 900; }
.v2-text-active-rose  { color: #F43F5E !important;          font-weight: 900; }

.v2-bg-active-blue   { background: var(--color-main) !important; color: #FFFFFF !important; }
.v2-bg-active-amber  { background: #F59E0B !important;          color: #FFFFFF !important; }
.v2-bg-active-slate  { background: #64748B !important;          color: #FFFFFF !important; }

.v2-disabled       { opacity: 0.5; filter: grayscale(100%); pointer-events: none; }
.v2-disabled-row   { opacity: 0.3; text-decoration: line-through; }
.v2-disabled-row .v2-time-meta { text-decoration: none; }   /* 보조 안내 문구는 취소선 제외 */
.v2-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); }
.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-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); }
.v2-icon-globe            { -webkit-mask-image: url(/shop/assets/images/svg/globe.svg);            mask-image: url(/shop/assets/images/svg/globe.svg); }


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

.v2-hero-title {
    font-size: 2.125rem;       /* 기본 34px (36→34) */
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 0.75rem;    /* 12px */
    letter-spacing: -0.02em;
}

.v2-text-gradient {
    background: linear-gradient(135deg, #0F172A 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: 2.125rem; }   /* PC: 34px (36→34) */
    .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.875rem; }          /* 폴드: 30px (32→30) */
    .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) {
    .v2-hide-mobile     { display: none; }
    .v2-hero-title      { font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.025em; }   /* 모바일: 26px (28→26) */
    .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.375rem; }          /* 플립: 22px (24→22) */
    .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: #FFFFFF;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border-radius: 1.5rem;
    transition: all 0.4s var(--smooth);
    position: relative;
    padding: 1.5rem;
}

.v2-group-card:not(.v2-disabled):hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(2, 103, 255, 0.08);
    border-color: #BFDBFE;
}
.v2-group-card:not(.v2-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: 1.125rem; }
}
@media (max-width: 360px) {
    .v2-clean-card { padding: 1rem; }
}


/* =========================================
   [8] TAB SYSTEM
   .v2-tab-buttons      — 탭 버튼 그룹 컨테이너
   .v2-tab-btn          — 탭 버튼 (.v2-active 시 강조)
   .v2-tab-soon         — 준비 중 라벨
   .v2-tab-pane         — 탭 콘텐츠 (.v2-active 시 표시)
========================================= */
.v2-tab-buttons {
    display: flex;
    gap: 0.1875rem;              /* 3px (4→3 압축) */
    background: #F1F5F9;
    padding: 0.25rem;            /* 4px (6→4 압축) */
    border-radius: 9999px;
    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: 9999px;
    transition: all 0.3s var(--smooth);
    line-height: 1.2;
}
.v2-tab-btn:hover { color: var(--text-main); }
.v2-tab-btn.v2-active {
    background: #FFFFFF;
    color: var(--text-main);
    font-weight: 800;
    box-shadow: 0 1px 4px rgba(11, 18, 32, 0.06);   /* 그림자 압축 */
}

.v2-tab-soon {
    font-size: 0.625rem;
    background: #E5E7EB;
    color: var(--text-muted);
    padding: 0.1875rem 0.5rem;
    border-radius: 0.3125rem;
    margin-left: 0.4375rem;
    font-weight: 700;
}
.v2-tab-btn.v2-active .v2-tab-soon { background: #E5E7EB; 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 */
    .v2-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 */
    .v2-tab-soon    { font-size: 0.5rem; padding: 0.0625rem 0.3125rem; }
}


/* =========================================
   [9] ACCORDION
   .v2-accordion-section          — 펼침 컨테이너 (.v2-expanded 시 열림)
   .v2-accordion-header           — 클릭 영역
   .v2-accordion-header-text      — 헤더 텍스트 래퍼
   .v2-accordion-icon             — 펼침 화살표 (회전)
   .v2-accordion-content          — 콘텐츠 (max-height 트랜지션)
   .v2-accordion-inner            — 콘텐츠 내부 패딩
========================================= */
.v2-accordion-section {
    background: #FFFFFF;
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    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 {
    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 {
    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 (공지/안내 박스)
   .v2-carrier-notice         — 단일 안내
   .v2-carrier-notice-group   — 여러 항목 통합
   .v2-carrier-notice-item    — 통합 안내의 각 항목
   .v2-carrier-notice-label   — 항목 라벨
========================================= */
.v2-carrier-notice {
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 0.875rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.v2-carrier-notice-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-main);
    margin-bottom: 0.25rem;
}
.v2-carrier-notice-header h4 {
    font-size: 0.9375rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--color-main);
    margin: 0;
}
.v2-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;
}
.v2-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: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 0.875rem;
    padding: 0.25rem 1.25rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.v2-carrier-notice-item {
    padding: 0.875rem 0;
    border-top: 1px solid #DBEAFE;
}
.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: #FFFFFF;
    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) {
    .v2-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; }
    .v2-carrier-notice       { margin-bottom: 1.25rem; }
}
@media (max-width: 679px) {
    .v2-carrier-notice              { padding: 0.875rem 1rem; margin-bottom: 1rem; }
    .v2-carrier-notice-header h4    { font-size: 0.875rem; }
    .v2-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; }
    .v2-carrier-notice       { margin-bottom: 0.875rem; }
}


/* =========================================
   [11] USAGE GUIDE HEADER (가이드 박스 상단 헤더)
   .v2-usage-guide-header   — 헤더 컨테이너 (하단 보더)
   .v2-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);
}

.v2-usage-guide-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--color-main);
    background: #EEF4FF;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    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; }
    .v2-usage-guide-badge      { font-size: 0.625rem; padding: 0.1875rem 0.5rem; }
}


/* =========================================
   [12] SIMPLE CALLOUT (간단한 강조 안내)
   .v2-carrier-tail-notice          — 기본 약관/유의사항 톤
   .v2-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: #4E5968;
    letter-spacing: -0.01em;
}
.v2-carrier-tail-notice h5 {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #191F28;
    letter-spacing: -0.02em;
    margin: 0 0 0.625rem;
}
.v2-carrier-tail-notice h6 {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #191F28;
    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: #191F28; font-weight: 700; }
.v2-carrier-tail-notice .v2-small-note {
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    color: #8B95A1;
}
.v2-carrier-tail-notice .v2-tail-callout {
    margin: 0.75rem 0 1rem;
    padding: 0.875rem 1rem;
    background: var(--gray-15);
    border: none;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    color: #4E5968;
}
.v2-carrier-tail-notice .v2-tail-callout p {
    margin: 0;
    line-height: 1.7;
}

/* === 간단한 강조 안내 (옅은 블루 + ⓘ 아이콘) === */
.v2-carrier-tail-notice.v2-carrier-tail-simple {
    margin-top: 1.5rem;
    padding: 1.125rem 1.25rem;
    background: #EFF6FF;
    border: none;
    border-top: none;
    border-radius: 0.75rem;
    color: #1E3A8A;
    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.v2-carrier-tail-simple::before {
    content: 'i';
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--color-main);
    color: #FFFFFF;
    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.v2-carrier-tail-simple p {
    margin: 0;
    flex: 1;
}
.v2-carrier-tail-notice.v2-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.v2-carrier-tail-simple    { padding: 0.875rem 1rem; font-size: 0.8125rem; }
}