/* =========================================================
   YJ 정보 — Apple-Inspired Design Tokens
   Type + Color CSS variables
   Typography: Noto Sans KR (Korean + Latin), via Google Fonts
   ========================================================= */

@font-face {
  font-family: "Noto Sans KR";
  src: url("fonts/NotoSansKR-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/NotoSansKR-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------- Color: Primary -------- */
  --yj-black: #000000;              /* Hero section bg, immersive */
  --yj-light-gray: #f5f5f7;         /* Alternate section bg */
  --yj-near-black: #1d1d1f;         /* Primary text on light */
  --yj-white: #ffffff;

  /* -------- Color: Interactive (Blue is the ONLY accent) -------- */
  --yj-blue: #0071e3;               /* Primary CTA, focus */
  --yj-link-blue: #0066cc;          /* Inline text links on light */
  --yj-bright-blue: #2997ff;        /* Links on dark bg */
  --sk-focus-color: #0071e3;
  --sk-body-link-color: #0066cc;

  /* -------- Color: Text alpha (on light) -------- */
  --yj-fg-primary-light: #1d1d1f;
  --yj-fg-secondary-light: rgba(0, 0, 0, 0.8);
  --yj-fg-tertiary-light: rgba(0, 0, 0, 0.48);

  /* -------- Color: Dark surface scale -------- */
  --yj-dark-surface-1: #272729;
  --yj-dark-surface-2: #262628;
  --yj-dark-surface-3: #28282a;
  --yj-dark-surface-4: #2a2a2d;
  --yj-dark-surface-5: #242426;

  /* -------- Color: Button states -------- */
  --yj-btn-active: #ededf2;
  --yj-btn-default-light: #fafafc;
  --yj-overlay: rgba(210, 210, 215, 0.64);
  --yj-white-32: rgba(255, 255, 255, 0.32);

  /* -------- Shadow -------- */
  --yj-shadow-card: 3px 5px 30px 0px rgba(0, 0, 0, 0.22);

  /* -------- Radius -------- */
  --yj-radius-micro: 5px;
  --yj-radius-standard: 8px;
  --yj-radius-comfortable: 11px;
  --yj-radius-large: 12px;
  --yj-radius-pill: 980px;
  --yj-radius-circle: 50%;

  /* -------- Spacing (8px base, dense low end) -------- */
  --yj-space-2: 2px;
  --yj-space-4: 4px;
  --yj-space-5: 5px;
  --yj-space-6: 6px;
  --yj-space-7: 7px;
  --yj-space-8: 8px;
  --yj-space-9: 9px;
  --yj-space-10: 10px;
  --yj-space-11: 11px;
  --yj-space-14: 14px;
  --yj-space-15: 15px;
  --yj-space-17: 17px;
  --yj-space-20: 20px;
  --yj-space-24: 24px;

  /* -------- Type families --------
     Noto Sans KR is a single optical family; we alias both Display and Text to it
     and control weight/tracking/line-height per role via the scale below. */
  --yj-font-display: "Noto Sans KR", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --yj-font-text:    "Noto Sans KR", "SF Pro Text",    "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* -------- Type scale (size / weight / line-height / tracking) -------- */
  --yj-display-hero-size: 56px;   --yj-display-hero-lh: 1.07; --yj-display-hero-ls: -0.28px;   --yj-display-hero-weight: 600;
  --yj-section-size:      40px;   --yj-section-lh:      1.10; --yj-section-ls:      normal;    --yj-section-weight:      600;
  --yj-tile-size:         28px;   --yj-tile-lh:         1.14; --yj-tile-ls:         0.196px;   --yj-tile-weight:         400;
  --yj-card-title-size:   21px;   --yj-card-title-lh:   1.19; --yj-card-title-ls:   0.231px;   --yj-card-title-weight:   700;
  --yj-sub-heading-size:  21px;   --yj-sub-heading-lh:  1.19; --yj-sub-heading-ls:  0.231px;   --yj-sub-heading-weight:  400;
  --yj-nav-heading-size:  34px;   --yj-nav-heading-lh:  1.47; --yj-nav-heading-ls:  -0.374px;  --yj-nav-heading-weight:  600;
  --yj-sub-nav-size:      24px;   --yj-sub-nav-lh:      1.50; --yj-sub-nav-ls:      normal;    --yj-sub-nav-weight:      300;
  --yj-body-size:         17px;   --yj-body-lh:         1.47; --yj-body-ls:         -0.374px;  --yj-body-weight:         400;
  --yj-body-emph-size:    17px;   --yj-body-emph-lh:    1.24; --yj-body-emph-ls:    -0.374px;  --yj-body-emph-weight:    600;
  --yj-button-lg-size:    18px;   --yj-button-lg-lh:    1.00; --yj-button-lg-ls:    normal;    --yj-button-lg-weight:    300;
  --yj-button-size:       17px;   --yj-button-lh:       2.41; --yj-button-ls:       normal;    --yj-button-weight:       400;
  --yj-link-size:         14px;   --yj-link-lh:         1.43; --yj-link-ls:         -0.224px;  --yj-link-weight:         400;
  --yj-caption-size:      14px;   --yj-caption-lh:      1.29; --yj-caption-ls:      -0.224px;  --yj-caption-weight:      400;
  --yj-caption-bold-size: 14px;   --yj-caption-bold-lh: 1.29; --yj-caption-bold-ls: -0.224px;  --yj-caption-bold-weight: 600;
  --yj-micro-size:        12px;   --yj-micro-lh:        1.33; --yj-micro-ls:        -0.12px;   --yj-micro-weight:        400;
  --yj-micro-bold-size:   12px;   --yj-micro-bold-lh:   1.33; --yj-micro-bold-ls:   -0.12px;   --yj-micro-bold-weight:   600;
  --yj-nano-size:         10px;   --yj-nano-lh:         1.47; --yj-nano-ls:         -0.08px;   --yj-nano-weight:         400;

  /* -------- Layout -------- */
  --yj-max-content: 980px;
  --yj-nav-height: 48px;
  --yj-nav-bg: rgba(0, 0, 0, 0.8);
  --yj-nav-blur: saturate(180%) blur(20px);
}

/* =========================================================
   Semantic typography classes
   Use SF Pro Display at 20px+, SF Pro Text below 20px.
   ========================================================= */

body, .yj-body {
  font-family: var(--yj-font-text);
  font-size: var(--yj-body-size);
  font-weight: var(--yj-body-weight);
  line-height: var(--yj-body-lh);
  letter-spacing: var(--yj-body-ls);
  color: var(--yj-near-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.yj-display-hero {
  font-family: var(--yj-font-display);
  font-size: var(--yj-display-hero-size);
  font-weight: var(--yj-display-hero-weight);
  line-height: var(--yj-display-hero-lh);
  letter-spacing: var(--yj-display-hero-ls);
}

.yj-section-heading, h1 {
  font-family: var(--yj-font-display);
  font-size: var(--yj-section-size);
  font-weight: var(--yj-section-weight);
  line-height: var(--yj-section-lh);
  letter-spacing: var(--yj-section-ls);
}

.yj-tile-heading, h2 {
  font-family: var(--yj-font-display);
  font-size: var(--yj-tile-size);
  font-weight: var(--yj-tile-weight);
  line-height: var(--yj-tile-lh);
  letter-spacing: var(--yj-tile-ls);
}

.yj-card-title, h3 {
  font-family: var(--yj-font-display);
  font-size: var(--yj-card-title-size);
  font-weight: var(--yj-card-title-weight);
  line-height: var(--yj-card-title-lh);
  letter-spacing: var(--yj-card-title-ls);
}

.yj-sub-heading {
  font-family: var(--yj-font-display);
  font-size: var(--yj-sub-heading-size);
  font-weight: var(--yj-sub-heading-weight);
  line-height: var(--yj-sub-heading-lh);
  letter-spacing: var(--yj-sub-heading-ls);
}

.yj-body-emphasis, strong {
  font-family: var(--yj-font-text);
  font-size: var(--yj-body-emph-size);
  font-weight: var(--yj-body-emph-weight);
  line-height: var(--yj-body-emph-lh);
  letter-spacing: var(--yj-body-emph-ls);
}

.yj-link, a {
  font-family: var(--yj-font-text);
  font-size: var(--yj-link-size);
  font-weight: var(--yj-link-weight);
  line-height: var(--yj-link-lh);
  letter-spacing: var(--yj-link-ls);
  color: var(--yj-link-blue);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

.yj-caption {
  font-family: var(--yj-font-text);
  font-size: var(--yj-caption-size);
  font-weight: var(--yj-caption-weight);
  line-height: var(--yj-caption-lh);
  letter-spacing: var(--yj-caption-ls);
}

.yj-micro {
  font-family: var(--yj-font-text);
  font-size: var(--yj-micro-size);
  font-weight: var(--yj-micro-weight);
  line-height: var(--yj-micro-lh);
  letter-spacing: var(--yj-micro-ls);
}

.yj-nano {
  font-family: var(--yj-font-text);
  font-size: var(--yj-nano-size);
  font-weight: var(--yj-nano-weight);
  line-height: var(--yj-nano-lh);
  letter-spacing: var(--yj-nano-ls);
}

/* =========================================================
   Section utility: alternating light/dark rhythm
   ========================================================= */
.yj-section-dark  { background: var(--yj-black);      color: var(--yj-white); }
.yj-section-light { background: var(--yj-light-gray); color: var(--yj-near-black); }
.yj-section-dark  a { color: var(--yj-bright-blue); }
.yj-section-light a { color: var(--yj-link-blue); }

/* =========================================================
   Buttons
   ========================================================= */
.yj-btn {
  font-family: var(--yj-font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  padding: 8px 15px;
  border-radius: var(--yj-radius-standard);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 180ms ease, color 180ms ease, transform 120ms ease;
  min-height: 44px;
}
.yj-btn:focus-visible {
  outline: 2px solid var(--sk-focus-color);
  outline-offset: 2px;
}

.yj-btn-blue {
  background: var(--yj-blue);
  color: var(--yj-white);
}
.yj-btn-blue:hover { background: #0077ed; }
.yj-btn-blue:active { background: var(--yj-btn-active); color: var(--yj-near-black); }

.yj-btn-dark {
  background: var(--yj-near-black);
  color: var(--yj-white);
}
.yj-btn-dark:hover { background: #37373a; }

.yj-pill {
  background: transparent;
  color: var(--yj-link-blue);
  border: 1px solid var(--yj-link-blue);
  border-radius: var(--yj-radius-pill);
  padding: 8px 16px;
  font-family: var(--yj-font-text);
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 180ms ease;
}
.yj-pill:hover { background: rgba(0, 102, 204, 0.08); }

.yj-pill-dark {
  background: transparent;
  color: var(--yj-bright-blue);
  border: 1px solid var(--yj-bright-blue);
  border-radius: var(--yj-radius-pill);
  padding: 8px 16px;
}

.yj-search {
  background: var(--yj-btn-default-light);
  color: rgba(0, 0, 0, 0.8);
  padding: 0 14px;
  height: 40px;
  border-radius: var(--yj-radius-comfortable);
  border: 3px solid rgba(0, 0, 0, 0.04);
  font-family: var(--yj-font-text);
  font-size: 17px;
}

.yj-media-btn {
  background: var(--yj-overlay);
  color: rgba(0, 0, 0, 0.48);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, background-color 180ms ease;
}
.yj-media-btn:active { transform: scale(0.9); }

/* =========================================================
   Cards & Nav
   ========================================================= */
.yj-card {
  background: var(--yj-light-gray);
  border-radius: var(--yj-radius-standard);
  padding: 24px;
}
.yj-card-elevated {
  background: var(--yj-white);
  border-radius: var(--yj-radius-standard);
  box-shadow: var(--yj-shadow-card);
  padding: 24px;
}
.yj-card-dark {
  background: var(--yj-dark-surface-1);
  color: var(--yj-white);
  border-radius: var(--yj-radius-standard);
  padding: 24px;
}

.yj-nav {
  position: sticky;
  top: 0;
  height: var(--yj-nav-height);
  background: var(--yj-nav-bg);
  backdrop-filter: var(--yj-nav-blur);
  -webkit-backdrop-filter: var(--yj-nav-blur);
  color: var(--yj-white);
  display: flex;
  align-items: center;
  padding: 0 22px;
  z-index: 9999;
}
.yj-nav a {
  color: var(--yj-white);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.12px;
  opacity: 0.88;
}
.yj-nav a:hover { opacity: 1; text-decoration: none; }

/* Max content container */
.yj-container {
  max-width: var(--yj-max-content);
  margin: 0 auto;
  padding: 0 22px;
}