/* =========================================================
   Design Kit — 토큰·레이아웃 전용 (EDITORIAL / 본문 20px 단위).
   이 파일은 임의 수정하지 않는다. 컴포넌트는 치트시트를 보고 매번 새로 작성.
   ========================================================= */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root{
  /* color */
  --color-primary-050:#f6f7f7; --color-primary-100:#e1e1e3; --color-primary-200:#c5c6c8;
  --color-primary-300:#a2a3a5; --color-primary-400:#949597; --color-primary-500:#838486;
  --color-primary-600:#5d5e5f; --color-primary-700:#4c4c4e; --color-primary-800:#393a3b;
  --color-primary-900:#262628; --color-canvas:#fff; --color-placeholder:#d9d9d9;

  --text-default:var(--color-primary-900); --text-subtle:var(--color-primary-600);
  --text-disabled:var(--color-primary-400);
  --text-default-inverse:#fff; --text-subtle-inverse:var(--color-primary-200);

  /* type — DESIGN_18: 등지 14, 일반 텍스트 최소 18 */
  --fs-display-lg:102px; --fs-display-md:96px; --fs-display-sm:80px;
  --fs-h0:64px; --fs-h1:56px; --fs-h2:40px; --fs-h3:32px;
  --fs-body-1:20px; --fs-body-2:18px;
  --fs-badge:14px;
  --fw-strong:700; --fw-base:400;
  --tracking-kr:-0.025em; --display-tracking:-0.02em;
  --lh-display:1.25; --lh-h0:1.25; --lh-h1:1.3; --lh-h2:1.35; --lh-h3:1.4; --lh-body:1.5;
  --measure:38ch;

  /* radius / border */
  --radius-0:0px; --radius-sm:12px; --radius-md:24px; --radius-lg:32px; --radius-circle:999px;
  --border-0:none; --border-1:1px solid var(--color-primary-100); --border-2:2px solid var(--color-primary-900);

  /* layout */
  --container-narrow:1280px; --container-default:1440px; --container-wide:1600px;
  --gutter:80px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:48px; --space-8:64px; --space-9:96px; --space-10:120px; --space-11:160px; --space-12:200px; --space-13:240px;
  --space-section:var(--space-11);
  --grid-gutter-0:0px; --grid-gutter-sm:8px; --grid-gutter-md:16px; --grid-gutter-lg:24px;
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Pretendard',sans-serif;font-weight:var(--fw-base);
  font-size:var(--fs-body-1);line-height:var(--lh-body);letter-spacing:var(--tracking-kr);
  color:var(--text-default);background:var(--color-canvas);}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;}

/* ---------- type ---------- */
.display{font-size:var(--fs-display-lg);font-weight:var(--fw-strong);
  line-height:var(--lh-display);letter-spacing:var(--display-tracking);}
.display--md{font-size:var(--fs-display-md);}
.display--sm{font-size:var(--fs-display-sm);}
h1,.h0{font-size:var(--fs-h0);font-weight:var(--fw-strong);line-height:var(--lh-h0);letter-spacing:var(--display-tracking);}
h2,.h1{font-size:var(--fs-h1);font-weight:var(--fw-strong);line-height:var(--lh-h1);}
h3,.h2{font-size:var(--fs-h2);font-weight:var(--fw-strong);line-height:var(--lh-h2);}
h4,.h3{font-size:var(--fs-h3);font-weight:var(--fw-strong);line-height:var(--lh-h3);}
.body-2,.sub{font-size:var(--fs-body-2);}
.subtle{color:var(--text-subtle);}
.badge{display:inline-block;font-size:var(--fs-badge);font-weight:var(--fw-strong);
  line-height:1.1;letter-spacing:0;padding:6px 12px;border-radius:var(--radius-circle);
  background:var(--color-primary-100);color:var(--text-default);}
.measure{max-width:var(--measure);}

/* ---------- container ---------- */
.container{width:100%;max-width:var(--container-default);margin-inline:auto;padding-inline:var(--gutter);}
.container--wide{max-width:var(--container-wide);}
.container--narrow{max-width:var(--container-narrow);}

/* ---------- grid (12컬럼) ---------- */
/* span은 인라인 grid-column으로 → 조합은 치트시트 §7 */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gutter-lg);}
.grid--flush{gap:var(--grid-gutter-0);}
.grid--tight{gap:var(--grid-gutter-sm);}
.grid--snug{gap:var(--grid-gutter-md);}

/* ---------- section ---------- */
.section{padding-block:var(--space-section);}

/* ---------- image placeholder ---------- */
.img{background:var(--color-placeholder);display:block;width:100%;}
.img--16-9{aspect-ratio:16/9;} .img--4-3{aspect-ratio:4/3;} .img--1-1{aspect-ratio:1/1;}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  :root{--gutter:40px;}
  .grid{gap:var(--grid-gutter-md);}
}
@media (max-width:768px){
  :root{--gutter:20px;
    --fs-display-lg:48px; --fs-display-md:44px; --fs-display-sm:40px;
    --fs-h0:32px; --fs-h1:28px; --fs-h2:24px; --fs-h3:20px;
    --fs-body-1:18px; --fs-body-2:16px;
    --space-section:var(--space-9);}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}