@charset "UTF-8";
/* ============================================================
   SOMEBE - Colors & Typography
   Brand Pojangmacha SOMEBE / Premium indoor pojangmacha
   (Korean copy lives in README.md and SKILL.md to keep this
    file ASCII-safe across all editors and review tools.)
   ============================================================ */

/* Fallback CDN for weights we don't have locally (300 / 500 / 800 / 900) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* Pretendard — local brand files (regular / semibold / bold). These follow the
   CDN @imports so they take precedence for the matching weights. */
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Pretendard-normal-400-100.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Pretendard_SemiBold-normal-600-100.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Pretendard-normal-700-100.woff2') format('woff2');
}

:root {
  /* ── Brand core ───────────────────────────────────────── */
  --somebe-blue:        #00509e; /* primary — deep blue, trust */
  --somebe-blue-700:    #003e7c;
  --somebe-blue-100:    #e6efF8;

  --somebe-gold:        #c8a24a; /* logo gold accent, reserved */
  --somebe-gold-soft:   #e7c98a;

  --accent-green:       #00d255; /* active/hover pop */
  --accent-purple:      #7407ff; /* secondary highlight */
  --accent-red:         #e63946; /* alert / "한정" tag */

  /* ── Neutrals ─────────────────────────────────────────── */
  --bg:                 #ffffff;
  --bg-soft:            #f8f9fa;
  --bg-mute:            #f5f5f5;
  --bg-dark:            #111111;  /* dark hero / cost panel */
  --bg-dark-2:          #1c1c1c;
  --bg-dark-3:          #252525;

  --line:               #ececec;
  --line-strong:        #dadada;
  --line-dark:          #333333;

  --fg:                 #212121;  /* text primary */
  --fg-2:               #363636;  /* text secondary */
  --fg-3:               #6d6d6d;  /* tertiary / captions */
  --fg-4:               #9a9a9a;  /* hints */
  --fg-on-dark:         #f5f5f5;
  --fg-on-dark-2:       #aaaaaa;

  /* ── Type families ────────────────────────────────────── */
  --font-kr: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui,
             'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-en: 'Poppins', 'Pretendard', sans-serif;
  --font-display: 'Poppins', 'Pretendard', sans-serif; /* GNB / numerals / eyebrows */

  /* ── Type scale (display = numerals / eyebrows / EN heads) */
  --t-eyebrow: 13px;        /* "01 BRAND" page tags */
  --t-body-sm: 13px;
  --t-body:    16px;
  --t-body-lg: 18px;
  --t-h4:      20px;
  --t-h3:      24px;
  --t-h2:      32px;
  --t-h1:      44px;
  --t-display: 64px;        /* hero & metric numerals */
  --t-mega:    96px;        /* "33.3%" mega numeral */

  /* ── Weight ───────────────────────────────────────────── */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  /* ── Rhythm ───────────────────────────────────────────── */
  --leading-tight: 1.2;
  --leading-snug:  1.4;
  --leading-base:  1.6;
  --leading-loose: 1.8;
  --tracking:      0px;
  --tracking-eyebrow: 0.18em;

  /* ── Layout ───────────────────────────────────────────── */
  --max-w:        1080px;
  --max-w-wide:   1280px;
  --header-h:     90px;
  --header-h-mob: 67px;
  --pad-x:        15px;
  --section-y:    100px;
  --section-y-sm: 60px;

  /* ── Radius / shadow ──────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(0, 32, 70, .06);
  --shadow-md: 0 8px 24px rgba(0, 32, 70, .08);
  --shadow-lg: 0 20px 48px rgba(0, 32, 70, .12);
  --shadow-dark: 0 10px 30px rgba(0, 0, 0, .5);

  /* ── Motion ───────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .2s;
  --t-base: .3s;
  --t-slow: .4s;
}

/* ── Semantic typography (apply via class or element) ──── */
body {
  font-family: var(--font-kr);
  font-size: var(--t-body);
  line-height: var(--leading-base);
  color: var(--fg);
  letter-spacing: var(--tracking);
  background: var(--bg);
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, .h1 {
  font-family: var(--font-kr);
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-kr);
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  line-height: var(--leading-snug);
  letter-spacing: -0.005em;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-kr);
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  line-height: var(--leading-snug);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-kr);
  font-size: var(--t-h4);
  font-weight: var(--w-bold);
  line-height: var(--leading-snug);
  margin: 0;
}

p, .body {
  font-family: var(--font-kr);
  font-size: var(--t-body);
  line-height: var(--leading-loose);
  color: var(--fg-2);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--somebe-blue);
}

.metric {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--w-black);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--somebe-blue);
}

.metric-mega {
  font-family: var(--font-display);
  font-size: var(--t-mega);
  font-weight: var(--w-black);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--somebe-blue);
}

.caption {
  font-size: var(--t-body-sm);
  color: var(--fg-3);
}

/* ── Button core ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-kr);
  font-size: 15px;
  font-weight: var(--w-bold);
  letter-spacing: 0;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}

.btn-primary {
  background: var(--somebe-blue);
  color: #fff;
  border-color: var(--somebe-blue);
}
.btn-primary:hover {
  background: #fff;
  color: var(--somebe-blue);
}

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: var(--fg);
  color: #fff;
  border-color: var(--fg);
}

.btn-on-dark {
  background: #fff;
  color: var(--fg);
  border-color: #fff;
}
.btn-on-dark:hover {
  background: var(--accent-green);
  color: #fff;
  border-color: var(--accent-green);
}

/* ============================================================
   RESPONSIVE UTILITIES & CUSTOM COMPONENTS (ADDED FOR MOBILE)
   ============================================================ */

/* Grid Utilities (Desktop) */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.grid-timeline { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 12px; align-items: center; }
.grid-contact { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; }
.grid-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }

/* Timeline vertical line — class lets media queries override left/transform */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 36px;
  bottom: 36px;
  width: 2px;
  background: linear-gradient(180deg, var(--somebe-blue) 0%, var(--somebe-blue-100) 100%);
  transform: translateX(-50%);
}

/* Mobile Menu Toggle (Hamburger) */
.mobile-menu-btn { display: none; background: none; border: none; font-size: 24px; color: #fff; cursor: pointer; }
.mobile-nav-wrap { display: flex; gap: 32px; align-items: center; }

@media (max-width: 900px) {
  /* GNB Mobile Transform */
  .mobile-menu-btn { display: block; }
  .somebe-header.is-scrolled .mobile-menu-btn { color: var(--fg); }
  .mobile-nav-wrap {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    background: rgba(255,255,255,0.98); backdrop-filter: blur(10px);
    flex-direction: column; padding: 24px; box-shadow: var(--shadow-md);
    transform: translateY(-100%); opacity: 0; pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .mobile-nav-wrap.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .mobile-nav-wrap a { color: var(--fg) !important; font-size: 18px !important; width: 100%; text-align: center; padding: 12px 0; border-bottom: 1px solid var(--line); }

  /* Tablet: 3→2 column grids */
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .grid-6 { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
}

@media (max-width: 768px) {
  /* Responsive CSS token overrides */
  :root {
    --header-h: 67px;
    --section-y: 64px;
  }

  /* Responsive Grids (Mobile 1-column conversion) */
  .grid-2, .grid-contact, .grid-footer { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Timeline: circle(60px) | card(1fr) */
  .grid-timeline { grid-template-columns: 60px 1fr !important; align-items: start !important; }
  .grid-timeline > div:nth-child(1) { grid-column: 2 !important; text-align: left !important; }
  .grid-timeline > div:nth-child(2) { grid-column: 1 !important; grid-row: 1 !important; }

  /* Fix vertical line: align to circle column center (60px / 2 = 30px) */
  .timeline-line { left: 30px !important; transform: none !important; }

  /* Brand story stacked image box: reduce height */
  .brand-image-container { height: 300px !important; }
}

@media (max-width: 480px) {
  /* Very small phones */
  :root {
    --section-y: 48px;
    --pad-x: 12px;
  }
  .grid-3 { grid-template-columns: 1fr !important; gap: 16px !important; }
  .grid-6 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* Cost Table Wrapper for Mobile Scroll */
.cost-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--bg-dark);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-dark);
}

.cost-table {
  width: 100%;
  min-width: 800px; /* Forces horizontal scroll on narrow mobile screens */
  border-collapse: collapse;
  text-align: center;
  background-color: #004e92;
  color: #ffffff;
}

.cost-table th, .cost-table td {
  padding: 16px 12px;
  border: 1px solid #ffffff;
  font-size: 15px;
  word-break: keep-all;
  font-family: var(--font-kr);
}

.cost-table thead th {
  background-color: #ffffff;
  color: #333333;
  font-weight: var(--w-bold);
  border: 1px solid #dddddd;
  border-bottom: 3px solid #004e92;
  padding: 18px 10px;
  font-size: 17px;
}

.cost-table .white-row th, .cost-table .white-row td {
  background-color: #ffffff;
  color: #333333;
  font-weight: var(--w-bold);
  border: 1px solid #dddddd;
}

.cost-table .highlight-row th, .cost-table .highlight-row td {
  background-color: #f5eedc;
  color: #333333;
  font-weight: var(--w-bold);
  border: 1px solid #dddddd;
}

.cost-table .point-text {
  color: #ffd700;
  font-weight: var(--w-bold);
}

.cost-table .total-price {
  font-size: 24px;
  color: #004e92;
  font-weight: var(--w-black) !important;
}

.cost-table .sub-text {
  display: block;
  font-size: 13px;
  font-weight: var(--w-regular);
  margin-top: 6px;
  color: #777777;
  text-align: left;
}

.cost-table .align-left {
  text-align: left !important;
}