/* ================================================================
   일루펫 홈페이지 — 스타일시트

   🔴 색·타이포·라운드·그림자·간격은 iluPet EMR 디자인 시스템이 정본이다.
      정본 위치: doc/SaaS 페이지 디자인 검토/_ds/ilupet-emr-design-system-<uuid>/
      아래 :root 는 그 tokens/semantic.css · typography.css 값을 그대로 옮긴 것이며
      임의로 만든 값이 없다. 값을 바꿔야 하면 정본을 먼저 고친다.

   시스템이 못박은 제약 (doc/02_디자인_기획서.md §0-2):
     · 브랜드 색은 Purple-500 하나뿐 — 절제해서 쓴다
     · 링크색은 퍼플. 파랑(#4C85F7)은 링크가 아니라 정보·예약 상태색이다
     · 카드는 평면 — 흰 배경 + 1px 보더. 그림자를 새로 만들지 않는다
     · 자간 0. 한글 제목에 음수 자간을 넣지 않는다
     · 간격은 2·4·6·8·10·12·16·20·24·32·40 — 8pt 그리드가 아니다
     · 그라디언트는 브랜드 그라디언트 하나뿐이며 마케팅·인증 화면에만 쓴다
   ================================================================ */

:root {
  /* ── 브랜드 ── */
  --brand-purple-500: #6348EF;
  --brand-purple-300: #A189FF;
  --brand-purple-50:  #ECE8FF;
  --brand-purple-600: #4F37CF;   /* 채움 버튼 hover — 시스템 「퍼플 채움 버튼의 hover 는 더 짙은 퍼플」 */
  --brand-gradient:   linear-gradient(180deg, #A189FF 0%, #6348EF 123.26%);

  /* ── 텍스트 ── */
  --text-primary:   #12121E;
  --text-secondary: #50505E;
  --text-tertiary:  #71768B;
  --text-disabled:  #B7B7C2;
  --text-on-brand:  #FFFFFF;
  --text-link:      #6348EF;

  /* ── 서피스 ── */
  --surface-page:     #FAFAFB;
  --surface-card:     #FFFFFF;
  --surface-sunken:   #F3F3F6;
  --surface-hover:    #FAFAFB;
  --surface-selected: #ECE8FF;

  /* ── 보더 ── */
  --border-default: #EAEBF0;
  --border-strong:  #D5D6DC;
  --border-focus:   #6348EF;

  /* ── 상태 ── */
  --status-info:        #4C85F7;
  --status-info-bg:     #E7F2FE;
  --status-success:     #349F5C;
  --status-success-bg:  #E1F8E7;
  --status-danger:      #E93526;
  --status-danger-bg:   #FBEAEB;
  --status-warning:     #FF9500;
  --status-warning-strong: #F76922;
  --status-warning-bg:  #FFF3DC;

  /* ── 라운드 (시스템 실측값) ── */
  --radius-2: 2px;  --radius-4: 4px;  --radius-6: 6px;  --radius-8: 8px;
  --radius-10: 10px; --radius-12: 12px; --radius-16: 16px; --radius-full: 999px;

  /* ── 그림자 — 시스템 전체에 셋뿐. 새로 만들지 않는다 ── */
  --shadow-sm:    0px 1px 4px 0px rgba(0,0,0,0.05);
  --shadow-md:    0px 4px 15px 0px rgba(0,0,0,0.05);
  --shadow-modal: 0px 0px 20px 0px rgba(0,0,0,0.1);

  /* ── 폰트 ── */
  --font-sans: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-numeric: "Inter", "Pretendard", -apple-system, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  /* 시스템 기본 본문 = Text-2 (14/20). 마케팅 지면은 한 단 위인 Text-1(16/24)을 기본으로 쓴다 */
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--text-primary);
  background: var(--surface-card);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--brand-purple-300); }

/* ── 레이아웃 ─────────────────────────────── */
/* 🔴 콘텐츠 폭은 1120px 다.
   시안은 패딩을 바깥 section 에 두고 안쪽을 max-width:1120px 로 잡는다.
   여기서는 한 요소가 둘을 겸하므로 box-sizing:border-box 를 감안해
   좌우 패딩 48px 을 더한 1168px 로 둔다. 1120 으로 두면 콘텐츠가 1072px 이
   되어 1120px 짜리 제품 목업이 가로로 잘린다. */
.wrap { max-width: 1168px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.wrap--narrow { max-width: 928px; }   /* 콘텐츠 880px */

.section { padding: 104px 0; }
.section--tight { padding: 88px 0; }
.section--alt { background: var(--surface-page); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.section--dark { background: var(--text-primary); padding: 76px 0; }
.section--flush-top { padding-top: 0; }

.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-bottom: 48px; }
.section-head--center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }

/* ── 타이포 (시스템 명명 스타일 기준 · 자간 0) ─────── */
/* 시안 실측값 — 마케팅 지면은 시스템 Title-1(34/50) 위로 한 단 올려 쓴다 */
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--brand-purple-500); }
.h1 { font-size: 48px; line-height: 62px; font-weight: 700; margin: 0; }
.h2 { font-size: 42px; line-height: 56px; font-weight: 700; margin: 0; }
.h3 { font-size: 20px; line-height: 26px; font-weight: 600; margin: 0; }   /* Title-3 */
.h4 { font-size: 18px; line-height: 26px; font-weight: 600; margin: 0; }   /* Subtitle-1 계열 */
.sub { font-size: 18px; line-height: 28px; color: var(--text-secondary); margin: 0; }
.body { font-size: 16px; line-height: 24px; color: var(--text-secondary); margin: 0; }
.small { font-size: 14px; line-height: 20px; color: var(--text-tertiary); margin: 0; }
.caption { font-size: 12px; line-height: 16px; color: var(--text-tertiary); margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.is-ink { color: var(--text-primary); }
.is-brand { color: var(--brand-purple-500); }

/* ── 아이콘 ─────────────────────────────── */
/* 디자인 시스템 아이콘은 24px 박스의 **채움(fill) 패스**다 — 스트로크가 아니다.
   경로 안에 fill="currentColor" 가 들어 있으므로 여기서 색을 강제하지 않는다.
   렌더 크기는 18px·20px 이 표준이고 빈 상태에만 24px 을 쓴다 (DS readme 「아이콘」). */
.ic { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.ic--16 { width: 16px; height: 16px; }
.ic--18 { width: 18px; height: 18px; }
.ic--24 { width: 24px; height: 24px; }
.ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── 버튼 ─────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       border-radius: var(--radius-8); font-family: inherit; font-weight: 600; border: 0;
       cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.btn--p { background: var(--brand-purple-500); color: #FFFFFF; }
.btn--p:hover { background: var(--brand-purple-600); color: #FFFFFF; }
/* 아웃라인은 보더 대신 inset 링 — 레이아웃이 밀리지 않게 (시스템 규약) */
.btn--s { background: var(--surface-card); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn--s:hover { background: var(--surface-page); color: var(--text-primary); }
.btn--ghost-dark { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px #3D3D4E; }
.btn--ghost-dark:hover { background: rgba(255,255,255,0.06); color: #FFFFFF; }
.btn--lg { height: 52px; padding: 0 26px; font-size: 18px; line-height: 23px; }
.btn--md { height: 40px; padding: 0 18px; font-size: 15px; line-height: 22px; }
.btn--sm { height: 34px; padding: 0 14px; font-size: 14px; line-height: 20px; }
.btn--full { width: 100%; }

/* ── 카드 (평면 — 그림자 없음) ─────────────── */
.card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-12); }
.card--pad { padding: 24px; }
.tile { width: 40px; height: 40px; border-radius: var(--radius-8); background: var(--brand-purple-50);
        display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand-purple-500); }
.tile--36 { width: 36px; height: 36px; }
.tile--info { background: var(--status-info-bg); color: var(--status-info); }
.tile--ok { background: var(--status-success-bg); color: var(--status-success); }

.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; }

/* ── 배지 (완전한 필) ─────────────────────── */
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
         border-radius: var(--radius-full); font-size: 12px; line-height: 16px; font-weight: 600; }
.badge--brand { background: var(--surface-selected); color: var(--brand-purple-500); }
.badge--warn { background: var(--status-warning-bg); color: var(--status-warning-strong); }
.badge--ok { background: var(--status-success-bg); color: var(--status-success); }

/* ── 제품 목업 (히어로 · 데스크 밴드 · 재고 · SOAP) ───────
   DS 의미색 규약을 따른다: 파랑=정보·진행 / 초록=완료 / 주황=대기·경고 */
.mock { min-width: 1120px; border: 1px solid var(--border-default); border-bottom: none;
        border-radius: var(--radius-12) var(--radius-12) 0 0; background: var(--surface-card);
        box-shadow: var(--shadow-md); overflow: hidden; }
.mock__bar { height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
             background: var(--surface-sunken); border-bottom: 1px solid var(--border-default); }
.mock__dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--border-strong); display: block; }
.mock__url { flex: 1; max-width: 280px; height: 22px; border-radius: var(--radius-full);
             background: var(--surface-card); border: 1px solid var(--border-default);
             display: flex; align-items: center; padding: 0 10px; font-size: 11px; line-height: 16px; color: var(--text-tertiary); }
.mock__side { width: 160px; flex-shrink: 0; background: var(--text-primary); padding: 14px 10px;
              display: flex; flex-direction: column; gap: 2px; }
.mock__side a, .mock__side div { border-radius: var(--radius-4); }
.sidebar__item { padding: 8px 10px; font-size: 13px; line-height: 18px; color: #8B8D9E; border-radius: var(--radius-4); }
.sidebar__item.is-on { background: var(--brand-purple-500); color: #FFFFFF; font-weight: 600; }

.pcard { background: var(--surface-card); border: 1px solid var(--border-default);
         border-radius: var(--radius-8); padding: 10px; }
.pcard__top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pcard__name { font-size: 14px; line-height: 20px; font-weight: 600; }
.pcard__meta { font-size: 12px; line-height: 18px; color: var(--text-tertiary); }
.pcard__owner { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.pcard__foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-default);
               display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard__amt { font-size: 14px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.colhead { display: flex; align-items: center; gap: 6px; height: 28px; }
.colhead span:first-child { font-size: 13px; line-height: 20px; font-weight: 600; }
.colcount { font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; color: var(--text-tertiary);
            background: var(--surface-sunken); border-radius: var(--radius-full); padding: 1px 7px; }
.colcount--hi { color: var(--brand-purple-500); background: var(--brand-purple-50); }

/* 환자 상태 배지 — DS BadgePatientStatus 대응 */
.pbadge { margin-left: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
          border-radius: var(--radius-full); font-size: 11px; line-height: 16px; font-weight: 600; }
.pbadge--접수 { background: var(--status-warning-bg); color: var(--status-warning-strong); }
.pbadge--진료중 { background: var(--status-info-bg); color: var(--status-info); }
.pbadge--완료 { background: var(--status-success-bg); color: var(--status-success); }
.pbadge--수납대기 { background: var(--brand-purple-50); color: var(--brand-purple-500); }

/* 데스크 밴드 — 강조된 수납대기 컬럼 (시안: inset 링 + 퍼플 배경) */
.col--hi { padding: 8px; margin: -8px; border-radius: var(--radius-10);
           box-shadow: inset 0 0 0 2px var(--brand-purple-500); background: var(--brand-purple-50); }
.col--hi .colhead span:first-child { color: var(--brand-purple-500); }
.colcount--on { color: #FFFFFF; background: var(--brand-purple-500); }

/* ── 시안의 style-hover 를 옮긴 상호작용 규칙 ── */
.card-link { color: var(--text-primary); transition: background 140ms ease; }
.card-link:hover { background: var(--surface-page); color: var(--text-primary); }
.link-arrow { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px;
              font-weight: 600; color: var(--brand-purple-500); }
.link-arrow--lg { font-size: 16px; line-height: 22px; gap: 6px; }
.btn--on-brand { background: #FFFFFF; color: var(--brand-purple-500); }
.btn--on-brand:hover { background: var(--brand-purple-50); color: var(--brand-purple-500); }
.btn--ghost-brand { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px #FFFFFF; }
.btn--ghost-brand:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; }
.section--gradient { background: var(--brand-gradient); padding: 104px 0; }

/* ── GNB ─────────────────────────────── */
.gnb { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.94);
       backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--border-default); }
.gnb__inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.gnb__logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--text-primary); }
.gnb__logo:hover { color: var(--text-primary); }
.gnb__logo span { font-size: 20px; line-height: 26px; font-weight: 700; }
.gnb__nav { display: flex; align-items: center; gap: 4px; }
.gnb__nav a { padding: 8px 12px; border-radius: var(--radius-6); font-size: 15px; line-height: 22px;
              font-weight: 600; color: var(--text-secondary); }
.gnb__nav a:hover { background: var(--surface-sunken); color: var(--text-primary); }
.gnb__nav a.is-active { color: var(--brand-purple-500); }
.gnb__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.gnb__drop { position: relative; }
.gnb__drop > a { display: flex; align-items: center; gap: 4px; }
.gnb__panel { position: absolute; top: 100%; left: 0; padding-top: 8px; width: 200px; }
.gnb__panel > div { background: var(--surface-card); border: 1px solid var(--border-default);
                    border-radius: var(--radius-10); box-shadow: var(--shadow-md); padding: 6px;
                    display: flex; flex-direction: column; gap: 2px; }
.gnb__panel a { padding: 8px 10px; border-radius: var(--radius-6); font-size: 14px; line-height: 20px;
                font-weight: 400; color: var(--text-secondary); }
.gnb__panel a:hover { background: var(--surface-selected); color: var(--brand-purple-500); }
.gnb__drop:not(:hover) .gnb__panel { display: none; }
.gnb__login { display: flex; align-items: center; gap: 4px; font-size: 15px; line-height: 22px;
              font-weight: 600; color: var(--text-secondary); }
.gnb__login:hover { color: var(--text-primary); }
.gnb__burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--text-secondary); }
.gnb__menu { display: none; flex-direction: column; gap: 4px; padding: 8px 24px 20px; border-top: 1px solid var(--border-default); }
.gnb__menu a { padding: 12px 8px; font-size: 16px; font-weight: 600; color: var(--text-secondary); }

/* ── 히어로 ─────────────────────────────── */
.hero { padding: 96px 0 0; overflow: hidden; }
.hero__copy { max-width: 672px; display: flex; flex-direction: column; gap: 20px; }
.hero__cta { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.hero__shot { margin-top: 56px; border: 1px solid var(--border-default); border-top-left-radius: var(--radius-12);
              border-top-right-radius: var(--radius-12); background: var(--surface-card); overflow: hidden; }

/* ── 신뢰 바 ─────────────────────────────── */
.trust { background: var(--surface-page); border-top: 1px solid var(--border-default);
         border-bottom: 1px solid var(--border-default); padding: 24px 0; }
.trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.trust__item { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 15px; line-height: 22px; }
.trust__item strong { font-weight: 600; }
.trust__item span { color: var(--text-tertiary); }

/* ── 스텝 (교체 밴드 · 이관 절차) ───────────── */
.steps { display: flex; flex-direction: column; gap: 24px; }
.step { display: flex; gap: 16px; }
.step__no { font-family: var(--font-numeric); font-size: 14px; line-height: 24px; font-weight: 700;
            color: var(--brand-purple-500); flex-shrink: 0; width: 24px; }
.step__body { display: flex; flex-direction: column; gap: 6px; }

.timeline { display: flex; flex-direction: column; }
.timeline__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; }
.timeline__rail { display: flex; flex-direction: column; align-items: center; }
.timeline__dot { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--brand-purple-500);
                 color: #FFFFFF; display: flex; align-items: center; justify-content: center;
                 font-family: var(--font-numeric); font-size: 14px; font-weight: 700; flex-shrink: 0; }
.timeline__dot--last { background: var(--text-primary); }
.timeline__line { width: 2px; flex-grow: 1; background: var(--border-default); margin-top: 6px; }
.timeline__body { padding-bottom: 32px; display: flex; flex-direction: column; gap: 8px; }
.timeline__row:last-child .timeline__body { padding-bottom: 0; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tag { font-size: 13px; line-height: 20px; color: var(--text-secondary); background: var(--surface-sunken);
       border-radius: var(--radius-6); padding: 4px 10px; }

/* ── 고지 박스 (의도된 정직성 장치 — /switch §4) ── */
.notice { border: 1px solid var(--border-default); background: var(--surface-page);
          border-radius: var(--radius-12); padding: 28px 30px; display: flex; gap: 18px; }
.notice__ic { color: var(--status-warning-strong); flex-shrink: 0; margin-top: 2px; }

/* ── 계산기 ─────────────────────────────── */
.calc { padding: 32px; }
.calc__row { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; }
.calc__input { height: 52px; width: 200px; border: 1px solid var(--border-strong); border-radius: var(--radius-8);
               background: var(--surface-card); padding: 0 16px; text-align: right;
               font-family: var(--font-numeric); font-size: 22px; font-weight: 700; color: var(--text-primary); }
.calc__input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 1px var(--border-focus); }
.calc__out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.calc__cell { background: var(--surface-page); border-radius: var(--radius-10); padding: 20px 0;
              display: flex; flex-direction: column; align-items: center; gap: 4px; }
.calc__cell--hi { background: var(--surface-selected); }
.calc__val { font-family: var(--font-numeric); font-size: 24px; line-height: 32px; font-weight: 700; }

/* ── 표 ─────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border-default);
                       font-size: 15px; line-height: 22px; vertical-align: top; }
.table th { font-weight: 600; color: var(--text-primary); white-space: nowrap; width: 180px; }
.table td { color: var(--text-secondary); }
.table tr:last-child th, .table tr:last-child td { border-bottom: 0; }

/* ── FAQ 아코디언 ───────────────────────── */
.faq__item { border-top: 1px solid var(--border-default); }
.faq__item:last-child { border-bottom: 1px solid var(--border-default); }
.faq__q { width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit;
          display: flex; align-items: center; justify-content: space-between; gap: 16px;
          padding: 22px 4px; text-align: left; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--text-primary); }
.faq__q .ic { color: var(--text-tertiary); transition: transform 140ms ease; }
.faq__item.is-open .faq__q .ic { transform: rotate(180deg); color: var(--brand-purple-500); }
.faq__a { padding: 0 4px 22px; max-width: 760px; }

/* ── 폼 ─────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; line-height: 20px; font-weight: 600; }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 15px; line-height: 22px; color: var(--text-primary);
  background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-8); padding: 10px 12px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 1px var(--border-focus); }
.field textarea { min-height: 140px; resize: vertical; }
.form__msg { font-size: 14px; line-height: 20px; }
.form__msg.is-ok { color: var(--status-success); }
.form__msg.is-bad { color: var(--status-danger); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── 푸터 ─────────────────────────────── */
.footer { background: var(--surface-card); border-top: 1px solid var(--border-default); padding: 56px 0 32px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer__logo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--text-primary); }
.footer__logo span { font-size: 17px; line-height: 24px; font-weight: 700; }
.footer__col { display: flex; flex-direction: column; gap: 8px; }
.footer__title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; }
.footer__col a { font-size: 14px; line-height: 20px; color: var(--text-tertiary); }
.footer__col a:hover { color: var(--brand-purple-500); }
.footer__divider { height: 1px; background: var(--border-default); margin: 40px 0 20px; }
.footer__bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }

/* ── 반응형 ─────────────────────────────── */
@media (max-width: 1023px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .h1 { font-size: 34px; line-height: 46px; }
  .h2 { font-size: 26px; line-height: 36px; }
  .sub { font-size: 17px; line-height: 27px; }
  .section { padding: 64px 0; }
  .hero { padding-top: 56px; }
  .grid--3, .grid--2, .trust__grid, .calc__out { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .gnb__nav { display: none; }
  .gnb__burger { display: block; }
  .gnb__menu.is-open { display: flex; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .timeline__row { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .footer__bottom { flex-direction: column; }
  /* 제품 목업은 축소하지 않고 가로 스크롤 — 정보 밀도 유지 (02 기획서 §1-2) */
  .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}