@charset "utf-8";

/* ===========================================================================
   variables.css — 디자인 토큰 (CSS Custom Properties)
   - 모든 페이지에서 공통으로 참조되는 색상·타이포·간격 변수
   - 그룹: 메인 브랜드 / 기본 / 통신사 / 라벨·배지 / 텍스트 / 테두리
            / 그레이 / 블루 / 레드·옐로우 / 그림자·트랜지션
=========================================================================== */

:root {
    /* =========================================
       [1] 메인 브랜드 컬러
    ========================================= */
    --color-main:          #0267FF;   /* 메인 포인트 컬러 */
    --color-main-bg:       #E0EFFD;   /* 메인 백그라운드 */
    --color-main-hover:    #0257E0;   /* Hover */
    --color-main-focus:    #5A9EFF;   /* Focus */
    --color-main-active:   #014EC0;   /* Click / Active */
    --color-main-disabled: #AFCFFF;   /* Disabled */

    /* =========================================
       [2] 기본 컬러
    ========================================= */
    --color-white:  #FFFFFF;
    --color-black:  #000000;
    --color-black2: #292929;
    --color-pink:   #F1516C;
    --color-red:    #FF1139;
    --color-red2:   #ED2647;
    --color-orange: #525151;
    --color-yellow: #FFBE3B;

    /* =========================================
       [3] 통신사 컬러
    ========================================= */
    /* 신리뉴얼: 홈페이지 파스텔 톤 + 통신사 아이덴티티 (SKT 레드 / KT 틸 / LG U+ 마젠타) */
    --color-skt:    #D23B42;   /* SKT 레드 */
    --color-skt-bg: #FCE9E9;
    --color-kt:     #0E8576;   /* KT 틸 */
    --color-kt-bg:  #E2F4F0;
    --color-lgt:    #CE3B7E;   /* LG U+ 마젠타 */
    --color-lgt-bg: #FCE6F0;

    /* =========================================
       [4] 라벨 / 배지
    ========================================= */
    --label-orange-bg:   #FFE5C2;   /* 파스텔 오렌지 배경 */
    --label-orange-text: #A34F00;   /* 진한 오렌지 브라운 텍스트 */

    /* 추천 배지 */
    --badge-recommend-text: #8A6A1F;
    --badge-recommend-bg:   #FFF6DD;
    --badge-recommend-bd:   #FFE2A8;
    --badge-point-bg:       #E3DDFC;
    --badge-point-text:     #4C1D95;

    /* 인기 배지 */
    --badge-popular-text:  #C84C3A;
    --badge-popular-bg:    #FFE9E6;
    --badge-popular-bd:    #FFD1CB;
    --badge-popular-bg2:   #FFE8E4;
    --badge-popular-text2: #C2410C;
    /* 할인율 배지(badge-save) 전용 텍스트 — popular-text(#C84C3A)는 pink 배경 위 대비 4.0:1로 WCAG 미달.
       같은 코럴-레드 계열을 진하게 내려 5.1:1 확보(11px 소형 텍스트도 AA 통과). 배경은 popular-bg 파스텔 유지 */
    --badge-save-text:     #B23A0A;

    /* 데이터 중심 배지 */
    --badge-data-text: #0E7C86;
    --badge-data-bg:   #E6F7F9;
    --badge-data-bd:   #BFEAED;

    /* 통화 중심 배지 */
    --badge-call-text: #2F5BD1;
    --badge-call-bg:   #EAF2FF;
    --badge-call-bd:   #C8DAFF;

    /* 직장인 페르소나 배지 — 세이지/유칼립투스(저채도 그린). 라임의 눈부심을 채도로 낮춤.
       그린의 '추천/긍정' 정서로 전환 보강 + CTA 블루·알뜰 오렌지·헤비 틸과 hue 분리(웜 올리브라 쿨 시안 틸과 구별) */
    --badge-work-bg:   #EDF2E3;
    --badge-work-text: #52713C;

    /* 통신망 배지(LTE/5G) — 웜 그레이지. 통신사·combo·프로모와 안 겹치는 온화한 뉴트럴(저채도) */
    --badge-net-bg:   #ECE8E2;
    --badge-net-text: #6B6157;

    /* 비교 배지 — 산뜻한 솔리드(흰 글자) */
    --badge-deal:       #FF6B35;   /* 가장 저렴 (산뜻 오렌지) */
    --badge-data-fresh: #14B8A6;   /* 데이터 넉넉 (산뜻 민트틸) */

    /* 홈 히어로 우측 바로가기 카드 — 색 덜어내고 대비 극대화: 쿨그레이 배경 통일 */
    --act-bg:       #F2F4F6;   /* 카드 배경(쿨그레이) — near-black 다크 텍스트와 명도 대비 */
    --act-bg-hover: #E7EAEE;   /* 카드 호버 — 동일 톤 한 단 어둡게 */

    /* 커스텀 해시태그 배지 (basic-custom01~05) — 통신사색(레드·틸·마젠타·블루) 회피 팔레트 */
    --basic-custom01-bg: #EDE7FB; --basic-custom01-text: #6E40C9;   /* 퍼플 */
    --basic-custom02-bg: #FFE8D6; --basic-custom02-text: #C2410C;   /* 오렌지 */
    --basic-custom03-bg: #FBF2C9; --basic-custom03-text: #9A7B0A;   /* 앰버(골드) */
    --basic-custom04-bg: #EFE6DC; --basic-custom04-text: #835A3A;   /* 브라운(모카) */
    --basic-custom05-bg: var(--color-white); --basic-custom05-text: #475569; --basic-custom05-bd: var(--slate-400);   /* 직접입력 — 흰 배경+테두리로 강조 */

    /* =========================================
       [5] 텍스트 컬러
    ========================================= */
    --text-main:      #111827;   /* 진한 잉크색 본문 */
    --text-primary:   #444444;   /* 기본 텍스트 */
    --text-secondary: #666666;   /* 보조 텍스트 */
    --text-tertiary:  #8B95A1;   /* 흐린 텍스트 (메타·dot 등) */
    --text-muted:     #64748B;   /* 회색-블루 톤 보조 */
    --text-disabled:  #ACACAC;   /* 비활성화 */

    /* =========================================
       [6] 테두리
    ========================================= */
    --border-light: #E9E9E9;   /* 연한 테두리 */
    --border-dark:  #DDDDDD;   /* 일반 테두리 */

    /* =========================================
       [7] 그레이 스케일
    ========================================= */
    --gray-10:  #FBFBFB;
    --gray-15:  #F9F9FA;   /* 페이지 기본 배경 */
    --gray-20:  #F9F9F9;
    --gray-50:  #F6F6F6;
    --gray-100: #F4F4F6;
    --gray-150: #F2F2F2;
    --gray-200: #F0F0F0;
    --gray-300: #EAEAEA;
    --gray-400: #DDDDDD;
    --gray-500: #CCCCCC;

    /* =========================================
       [8] 블루 계열
    ========================================= */
    --blue-50:  #F1F6FA;   /* 아주 연한 블루톤 */
    --blue-100: #F5F7FF;   /* 은은한 블루+보라톤 */
    --blue-150: #E6F2FB;   /* 공지사항 배경 */
    --blue-200: #E0EFFD;   /* 정보성 배경 */
    --blue-300: #C2E4FA;   /* 중간톤 카드 강조 */
    --blue-400: #8AB9E3;
    --blue-500: #65AEF1;

    /* =========================================
       [9] 레드 / 옐로우 (알림용)
    ========================================= */
    --red-50:    #FEECEC;   /* 에러 알림 배경 */
    --yellow-50: #FCFAE7;   /* 경고·주의 배경 */

    /* =========================================
       [10] 그림자 / 트랜지션
    ========================================= */
    --shadow-sm: 0 2px 8px rgba(11, 15, 26, 0.04);
    --shadow-md: 0 8px 24px rgba(11, 15, 26, 0.06);
    --smooth:    cubic-bezier(0.4, 0, 0.2, 1);

    /* =========================================
       [11] 2차 팔레트 (slate·accent)
       - 요금제/개통 페이지의 토스풍 보조 색을 토큰화 (값 동일, 시각 변화 없음)
    ========================================= */
    /* 슬레이트(쿨 그레이) 스케일 */
    --slate-50:  #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-250: #D7DFE9;   /* 200~300 사이 — 아주 옅은 인셋(서브 영역 배경) */
    --slate-300: #CBD5E1;
    --slate-400: #B0B8C1;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-850: #1F2937;
    --slate-900: #0F172A;
    --slate-text: #4E5968;

    /* 블루 액센트 */
    --blue-soft:   #EEF4FF;   /* 선택·활성 배경 */
    --blue-border: #BFDBFE;   /* 포커스·호버 테두리 */
    --blue-pale:   #F7FAFF;
    --blue-bright: #2A7BFF;
    --blue-110:    #DBEAFE;
    --blue-60:     #EFF6FF;
    --blue-bar:    #C7DCF2;
    --blue-bar2:   #D7E3F4;
    --blue-deep:   #1E3A8A;
    --blue-light:  #5AA0FF;   /* 그라데이션 텍스트 밝은 끝(숫자 권력화) */

    /* 다크 네이비 섹션(크로스 대비 쇼케이스 — USP) */
    --navy:        #13294B;   /* 섹션 배경 상단 */
    --navy-deep:   #0B1A33;   /* 섹션 배경 하단(그라데이션) */
    --navy-card:   #1B3257;   /* 네이비 위 솔리드 보조 카드 */
    --navy-border: #2A4671;   /* 네이비 위 솔리드 테두리 */
    --navy-sub:    #9FB0CC;   /* 네이비 위 보조 텍스트 */
    --navy-accent: #7FB2FF;   /* 네이비 위 밝은 블루 강조(숫자) */

    /* 인디고·라벤더·핑크 (아바타 그라데이션·데이터 태그) */
    --indigo-200:  #C7D2FE;
    --indigo-300:  #A5B4FC;
    --indigo-text: #4256C7;
    --lavender-bg: #E7EAFD;
    --pink-200:    #FBCFE8;
    --pink-300:    #F9A8D4;

    /* 그린·틸 (성공·개통 액센트) */
    --green-600: #1F8A5B;
    --green-300: #7FD8A4;
    --green-200: #BFE6D0;
    --green-100: #EAF7EE;
    --green-50:  #ECFDF5;
    --teal-100:  #CCFBF1;
    --teal-400:  #2DD4BF;
    --teal-600:  #0D9488;

    /* 앰버·레드 (알림 액센트) */
    --amber-500: #F59E0B;
    --amber-400: #FBBF24;
    --amber-50:  #FFFBEB;
    --red-600:   #DC2626;
    --red-100:   #FEE2E2;
    --rose-500:  #F43F5E;

    /* 공통 컴포넌트(common) 보조색 */
    --slate-150: #E5E7EB;
    --slate-950: #191F28;
    --blue-70:   #E8F0FE;
    --blue-600:  #0056E0;

    /* 웜 팔레트 — '따뜻한 고객 서비스' 톤(USP 등 감성 섹션). 차가운 슬레이트 대체용 */
    --warm-bg:     #FBF5EC;   /* 크림 섹션 배경 */
    --warm-card:   #FFFDF9;   /* 웜 화이트 카드 */
    --warm-peach:  #FFE6D2;   /* 피치 칩 배경 */
    --warm-coral:  #C0552E;   /* 코랄(텍스트·포인트) */
    --warm-coral2: #E2704A;   /* 코랄 라이트(강조) */
    --warm-border: #EFE5D6;   /* 웜 테두리 */
    --warm-ink:    #2A2017;   /* 웜 다크(제목) */
    --warm-sub:    #897C6C;   /* 웜 보조 텍스트 */

    /* =========================================
       [12] 버튼 사이즈 스케일 — xs / sm / md(기본) / lg
       높이=터치 타깃(권장 44px↑), 패딩·폰트는 해상도별로 아래 @media에서 한 번에 조정
       ========================================= */
    --btn-radius: var(--radius-md);
    --btn-xs-h: 2.125rem; --btn-xs-px: 0.75rem;  --btn-xs-fs: 0.75rem;    /* 칩·인라인 보조 */
    --btn-sm-h: 2.5rem;   --btn-sm-px: 1rem;     --btn-sm-fs: 0.875rem;   /* 보조 액션 */
    --btn-md-h: 3rem;     --btn-md-px: 1.25rem;  --btn-md-fs: 1rem;       /* 기본 CTA (48px) */
    --btn-lg-h: 3.5rem;   --btn-lg-px: 1.625rem; --btn-lg-fs: 1.0625rem;  /* 메인 CTA */

    /* =========================================
       [13] 보더 radius 스케일 — 통일 + 축소 (15+종 → 6단계, 큰 값 한 톤 낮춤)
       ========================================= */
    --radius-xs:   6px;     /* 배지·칩·작은 라벨 */
    --radius-sm:   8px;     /* qos카드·작은 요소 */
    --radius-md:   12px;    /* 버튼·중간 요소·카드 내부 */
    --radius-lg:   16px;    /* 카드·검색바·리스트 (18 → 16) */
    --radius-xl:   20px;    /* 바텀시트·모달 (22·24 → 20) */
    --radius-pill: 9999px;  /* 토글·세그먼트·pill */

    /* =========================================
       [13.1] 콘텐츠 폭 / 거터 (페이지 래퍼 단일 관리 — 4.2.1)
       ========================================= */
    --content-max:    1200px;   /* 콘텐츠 최대 폭 (2026 표준 밴드 1140~1280 내, 한국 커머스 관례값) */
    --content-gutter: 1.5rem;   /* 측면 거터 (좁은 화면은 .v2-container @media서 축소) */
    --header-h:       4.5rem;   /* 고정 헤더(.rd-gnb .rd-bar) 높이 — sticky 요소가 헤더 밑에 붙도록 참조(폴드 4rem·모바일 3.5rem은 아래 @media) */
    --tabbar-h:       3.5rem;   /* 하단 고정 탭바(.mobile-tabbar) 높이 — ≤1023서만 노출. 하단 고정 요소가 탭바 위에 앉도록 참조 */

    /* =========================================
       [14] 세그먼트 탭 사이즈 스케일 — sm / md(기본) / lg (PC 기준, 아래 @media서 축소)
       ========================================= */
    --seg-radius: var(--radius-md); --seg-tab-radius: var(--radius-sm); --seg-pad: 0.1875rem; --seg-gap: 0.1875rem;
    --seg-sm-fs: 0.71875rem; --seg-sm-py: 0.25rem;   --seg-sm-px: 0.5rem;
    --seg-md-fs: 0.8125rem;  --seg-md-py: 0.4375rem; --seg-md-px: 0.875rem;
    --seg-lg-fs: 0.9375rem;  --seg-lg-py: 0.5625rem; --seg-lg-px: 1.125rem;
}

/* 세그먼트 탭 — 해상도별 축소 (폴드 이하 → 플립) */
@media (max-width: 1023px) {
    :root { --seg-md-fs: 0.78125rem; --seg-md-py: 0.375rem; --seg-md-px: 0.75rem; --seg-lg-fs: 0.875rem; --seg-lg-py: 0.5rem; --seg-lg-px: 1rem; --seg-sm-fs: 0.6875rem; --seg-sm-px: 0.4375rem; }
}
@media (max-width: 360px) {
    :root { --seg-md-fs: 0.75rem; --seg-md-py: 0.3125rem; --seg-md-px: 0.625rem; --seg-lg-fs: 0.8125rem; --seg-lg-py: 0.4375rem; --seg-lg-px: 0.875rem; --seg-sm-py: 0.21875rem; }
}

/* 버튼 스케일 해상도 오버라이드 — 토큰만 바꾸면 전 버튼에 즉시 반영(빠른 셋팅) */
@media (min-width: 680px) and (max-width: 1023px) {   /* 폴드/태블릿 */
    :root { --header-h: 4rem; --btn-md-px: 1rem; --btn-md-fs: 0.9375rem; --btn-lg-h: 3.25rem; --btn-lg-px: 1.375rem; --btn-lg-fs: 1rem; }
}
@media (max-width: 679px) {   /* 모바일 — 터치 높이 유지, 가로 패딩·폰트 축소 */
    :root { --header-h: 3.5rem; --btn-md-px: 1rem; --btn-md-fs: 0.9375rem; --btn-lg-h: 3.25rem; --btn-lg-px: 1.375rem; --btn-lg-fs: 1rem; --btn-sm-h: 2.375rem; --btn-sm-px: 0.875rem; --btn-sm-fs: 0.84375rem; }
}
@media (max-width: 360px) {   /* 플립 — 최소 압축(md는 44px 터치 유지) */
    :root { --btn-md-h: 2.75rem; --btn-md-px: 0.875rem; --btn-md-fs: 0.875rem; --btn-lg-h: 3rem; --btn-lg-px: 1.125rem; --btn-lg-fs: 0.9375rem; --btn-sm-h: 2.25rem; --btn-sm-px: 0.75rem; --btn-sm-fs: 0.8125rem; --btn-xs-h: 2rem; --btn-xs-px: 0.625rem; --btn-xs-fs: 0.6875rem; --btn-radius: var(--radius-sm); }
}