/* ==========================================================================
   web1 – layout.css
   브레이크포인트: 태블릿 max-width 1295px, 모바일 max-width 744px (회사 표준, 프로젝트 전체 공통)
   단, main.html은 태블릿 구간도 모바일 레이아웃을 그대로 사용 - 아래 반응형 블록은 max-width 1295px 하나로 통합
   ========================================================================== */

/* -----------------------------
   Web Font (Pretendard)
------------------------------ */
@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("../../../files/web1/font/Pretendard-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url("../../../files/web1/font/Pretendard-ExtraLight.woff2")
    format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../../../files/web1/font/Pretendard-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../../../files/web1/font/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../../../files/web1/font/Pretendard-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../../../files/web1/font/Pretendard-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../../../files/web1/font/Pretendard-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("../../../files/web1/font/Pretendard-ExtraBold.woff2")
    format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("../../../files/web1/font/Pretendard-Black.woff2") format("woff2");
}

/* -----------------------------
   Design Tokens
------------------------------ */
:root {
  /* Font family */
  --font-family-base: "Pretendard", sans-serif;
  --font-family-display: "Pretendard", sans-serif;
  --font-family-logo: "Gmarket Sans", "Pretendard", sans-serif;

  /* Font size */
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-12-5: 12.5px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-19: 19px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-26: 26px;
  --font-size-32: 32px;
  --font-size-46: 46px;

  /* Font size - 역할 토큰 (Figma "Font Size" 컬렉션 · web 모드)
     모바일(744px 이하)에서는 아래 미디어쿼리로 mobile 모드 값으로 자동 전환된다.
     새로 만드는 화면은 --font-size-16 같은 숫자 토큰 대신 이 역할 토큰을 쓴다. */
  --font-size-display-d2: var(--font-size-46);
  --font-size-heading-h1: var(--font-size-26);
  --font-size-heading-h2: var(--font-size-22);
  --font-size-heading-h3: var(--font-size-20);
  --font-size-heading-h4: var(--font-size-18);
  --font-size-body-l: var(--font-size-17);
  --font-size-body-m: var(--font-size-16);
  --font-size-body-s: var(--font-size-15);
  --font-size-caption-m: var(--font-size-14);
  --font-size-caption-s: var(--font-size-13);

  /* Line height (Figma 타이포 스타일별 실제 값) */
  --line-height-base: 1.5; /* Body/M, Body/S */
  --line-height-snug: 1.45; /* Heading/H3, H4, Caption/M */
  --line-height-tight: 1.4; /* Heading/H1, H2, Caption/S */
  --line-height-relaxed: 1.55; /* Body/L */
  --line-height-display: 1.3; /* Display/D2 */
  --line-height-none: 1; /* Counter 등 행간 없는 숫자 */

  /* Color - base */
  --color-white: #fff;
  --color-black: #000;
  --color-gray-900: #111;
  --color-gray-800: #222;
  --color-gray-700: #333;
  --color-gray-650: #444; /* Figma 모바일 통계 라벨 */
  --color-gray-600: #555; /* Figma Gray/600 */
  --color-gray-550: #555; /* --color-gray-600 과 동일값 (기존 참조 유지용) */
  --color-gray-500: #666;
  --color-gray-400: #767676;
  --color-gray-100: #f8f8f8;
  --color-gray-75: #fafafa;
  --color-gray-50: #f6f8fb;
  --color-border: #d8dce4;
  --color-divider: rgba(0, 0, 0, 0.1);
  --color-divider-strong: rgba(0, 0, 0, 0.2);
  --color-divider-vertical: #cfcfe2; /* Figma Vector 11 - main-user 모바일 메타 구분선 */
  --color-dot-active: #1f2128; /* 배너 슬라이드 인디케이터 - 활성 */
  --color-dot-idle: #767987; /* 배너 슬라이드 인디케이터 - 비활성 테두리 */

  /* Color - primary/blue */
  --color-primary: #2d65f2; /* Figma Primary/default = Brand/500 */
  --color-primary-hover: #1f4fd1; /* Figma Primary/hover */
  --color-primary-pressed: #163da8; /* Figma Primary/pressed */
  --color-primary-border: #2d67ff;
  --color-primary-alt: #3081fe;
  --color-blue-600: #066bfd;
  --color-blue-gradient-start: #2956e3;
  --color-blue-gradient-end: #56acf4;
  --color-settings-gradient-start: #92afef;
  --color-settings-gradient-end: #7aa1f6;
  --color-active-step: #4076e1;
  --color-process-divider-active: #3889fd;
  --color-stage-active: rgba(33, 93, 211, 0.8);
  --color-stage-inactive: rgba(86, 93, 107, 0.6);
  --color-hero-bg: #284586;
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-white-80: rgba(255, 255, 255, 0.8);
  --color-hero-gradient-white-start: rgba(255, 255, 255, 0.1);
  --color-hero-gradient-white-end: rgba(255, 255, 255, 0);

  /* Color - footer */
  --color-footer-bg: #0d162f;
  --color-footer-border: #31394e;
  --color-footer-text: #b9babe;
  --color-footer-value: #787b84;
  --color-footer-link: #4a7ce8;

  /* Color - footer (mobile accordion, 744px 이하 전용 - 데스크톱과 다른 값) */
  --color-footer-bg-mobile: #11192d;
  --color-footer-border-mobile: #293045;
  --color-footer-title-mobile: #e4e4e4;
  --color-footer-link-mobile: #4a7de8;

  /* Radius */
  --radius-card: 28px;
  --radius-pill: 100px;

  /* Sub-page / Figma design system tokens */
  --color-border-divider: #e9eef8;
  --color-bg-subtle: #f5f6f9;
  --color-border-light: #ecf0f5;
  --color-bg-nav-bottom: #f5f7fa;
  --color-bg-filterbar: #ecedf2;
  --color-primary-bg: #eaf0fe;
  --color-primary-border-light: #abc3fb;
  --color-avatar-bg: #4277f3;
  --color-divider-primary-light: rgba(171, 195, 251, 0.38);
  --color-bg-info-banner: #dfeaff;

  /* Form control tokens (Figma Input/Select/Textarea/Checkbox/Radio/Chip/Date Picker) */
  --color-border-strong: #aab4c1;
  --color-bg-muted: #ecf0f5;
  --color-text-disabled: #999;
  --color-status-error: #ee4b47;
  --color-point-red: #ee4b47; /* Figma Point/Red/500 - 캘린더 일요일 등 포인트 강조(에러와 값은 같지만 별개 토큰) */
  --color-primary-glow: #d5e1fd;
  --color-coolgray-800: #4a5468;
  --color-coolgray-700: #626d80;
  --color-required: #e4022d;
  --color-border-default: #dadfe6;
  --color-border-table: #e3e8f0;

  /* Text tokens (Figma text/*) */
  --color-text-heading: #111;
  --color-text-body: #333;
  --color-text-secondary: #666;
  --color-text-tertiary: #767676;
  --color-text-inverse: #fff; /* Figma Text/inverse */
  --color-text-link: #2d65f2; /* Figma Text/link */
  --color-icon-default: #141b34;

  /* Background tokens (Figma Background/*) */
  --color-bg-page: #fff;
  --color-bg-card: #f5f6f9;

  /* Coolgray / Brand 램프 (Figma Coolgray/*, Brand/*) */
  --color-coolgray-50: #f5f6f9;
  --color-coolgray-400: #aab4c1;
  --color-brand-50: #eaf0fe;
  --color-brand-100: #d5e1fd;
  --color-brand-500: #2d65f2;
  --color-brand-800: #0f2c7e;
  --color-violet-500: #6c5cec;
  --color-violet-700: #4937d7;

  /* Status tokens (Figma status/*) */
  --color-status-warning: #ff9632;
  --color-status-warning-bg: #fff4ed;
  --color-status-success: #12af60;
  --color-status-success-bg: #eaf9f0;
  --color-status-error-bg: #ffeeed;
  /* GNB 알림 배지 도트 (Figma HeaderBell Badge=True) */
  --color-badge-dot: #f84f4d;

  /* Point/slate tokens (Figma point/slate/*) */
  --color-slate-500: #64748b;
  --color-slate-50: #f3f7fb;

  /* Point/purple tokens (Figma point/purple/*) */
  --color-point-purple: #7035f3;
  --color-point-purple-bg: #f5f0ff;

  /* Point/blue tokens (Figma point/blue/*) */
  --color-blue-50: #eff3ff;
  --color-blue-500: #3c66f6;

  /* Point/purple tokens (Figma point/purple/*, 증명서 미리보기 등급 배지) */
  --color-purple-50: #f5f0ff;
  --color-purple-500: #7035f3;

  /* Illustration tokens (Figma 일러스트 아이콘 - chat delay 등) */
  --color-illust-warning-bg: #ffeed3;
  --color-illust-warning: #ff8f1f;
  --color-icon-muted: #77797e;

  /* SNS 브랜드 컬러 (Figma _login 간편로그인 아이콘) */
  --color-sns-naver: #03c75a;
  --color-sns-kakao: #fee500;

  /* Shadow tokens (Figma shadow/*) */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.12);
  --shadow-card-soft: 4px 4px 30px 0 rgba(0, 0, 0, 0.12);

  /* Dim overlay (Figma Modal 설명: 뒤에 dim #000 40%) */
  --color-dim: rgba(0, 0, 0, 0.4);

  /* Radius tokens (Figma radius/*) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Spacing tokens (Figma spacing/*) */
  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-4xl: 48px;
  --spacing-5xl: 64px;

  /* Icon size tokens (Figma "Icon Size" 컬렉션) */
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;
  /* Icon Size/sm 은 피그마 컴포넌트 전체를 훑어도 실제 사용처가 없어 정의하지 않는다. */
  /* t-shirt 스케일 밖의 피그마 고정값 */
  --radius-6: 6px;
  --radius-10: 10px;
  --radius-26: 26px;
  --spacing-3: 3px;
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-18: 18px;
  --spacing-26: 26px;
  --spacing-25: 25px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-60: 60px;
  --spacing-90: 90px;
}

/* -----------------------------
   Font Size - mobile 모드 (Figma "Font Size" 컬렉션의 mobile 모드)
   피그마 Font Size 컬렉션은 web / mobile 두 개의 모드를 갖는다.
   같은 역할 토큰이 모바일에서 더 작은 값으로 resolve 되므로,
   여기서 역할 토큰만 재정의해 화면 전체가 한 번에 mobile 모드로 전환되게 한다.
   (컴포넌트 CSS에서 --font-size-body-m 등을 참조하기만 하면 자동 적용)
------------------------------ */
@media (max-width: 744px) {
  :root {
    --font-size-heading-h2: var(--font-size-19); /* 22 → 19 */
    --font-size-heading-h3: var(--font-size-18); /* 20 → 18 */
    --font-size-heading-h4: var(--font-size-16); /* 18 → 16 */
    --font-size-body-l: var(--font-size-15); /* 17 → 15 */
    --font-size-body-m: var(--font-size-14); /* 16 → 14 */
    --font-size-body-s: var(--font-size-14); /* 15 → 14 */
    --font-size-caption-m: var(--font-size-12); /* 14 → 12 */
    --font-size-caption-s: var(--font-size-12); /* 13 → 12 */
    --font-size-heading-h1: var(--font-size-20); /* 26 → 20 */
    /* display-d2 는 피그마에서 mobile 모드 값을 확인하지 못해
       web 값을 그대로 둔다. 확인되면 여기에 추가. */
  }
}

/* -----------------------------
   Reset
------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* display 값을 지정한 요소에도 hidden 속성이 항상 우선하도록 */
[hidden] {
  display: none !important;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
fieldset,
legend,
input,
select,
textarea,
button {
  margin: 0;
  padding: 0;
}

html,
body {
  overflow-x: hidden;
  font-family: var(--font-family-base);
}

html {
  -webkit-text-size-adjust: 100%;
  /* 세로 스크롤바 자리를 항상 확보 - 애니메이션(translateY)이나 콘텐츠 변화로
     스크롤 가능 영역이 순간적으로 늘었다 줄었다 할 때 스크롤바가 나타났다
     사라지면서 화면 전체가 좌우로 밀리는 현상을 막는다 */
  scrollbar-gutter: stable;
}

body {
  min-width: 1280px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-16);
  line-height: var(--line-height-base);
  color: var(--color-gray-900);
  background: var(--color-white);
}

ul,
ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  border: 0;
}

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

button {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

fieldset {
  border: 0;
}

/* -----------------------------
   Layout helpers
------------------------------ */
.wrap {
  width: 1280px;
  margin: 0 auto;
}

.skip-nav a {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  background: var(--color-primary);
  color: var(--color-white);
  z-index: 100;
}

.skip-nav a:focus {
  top: 0;
}

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* -----------------------------
   반응형 - 모바일 (max-width: 1295px)
   태블릿 구간(744px~1295px)도 모바일 레이아웃과 동일하게 처리 - 별도 태블릿 전용 레이아웃 없음
------------------------------ */
@media (max-width: 1295px) {
  body {
    min-width: 0;
  }

  .wrap {
    width: 100%;
    padding: 0 16px;
  }
}