/* 자동 생성물이다. 원본은 design_handoff_careit/design/current/landing.dc.html 이고
   변환은 tools/build.py 다. 여기를 직접 고치면 다음 변환에서 사라진다. */
@font-face {
  font-family: "Pretendard Variable";
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  src: url('./fonts/PretendardVariable.subset.woff2?v=c38f5cd6') format('woff2-variations');
}

:root {
  --font-sans: "Pretendard Variable", Pretendard, "Noto Sans Korea", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ls: -1px;
  --fs-page: 26px;
  --fs-section: 20px;
  --fs-body: 16px;
  --fs-caption: 14px;
  --type-section-title: 700 var(--fs-page)/1.5 var(--font-sans);
  --type-card-title: 700 var(--fs-section)/1.5 var(--font-sans);
  --type-card-body: 400 var(--fs-body)/1.5 var(--font-sans);
  --type-caption: 400 var(--fs-caption)/1.5 var(--font-sans);
  /* 소개 사이트 전용. 앱 화면은 --type-section-title(26px)을 그대로 쓴다 —
     1440 랜딩에서만 이 크기가 필요하고, 앱에 쓰면 정보 밀도가 무너진다. */
  --type-display: 700 56px/74px var(--font-sans);
  --type-section-lg: 700 40px/54px var(--font-sans);
  /* 글자가 커질수록 자간이 벌어져 보인다. 큰 글씨에만 좁힌다. */
  --ls-display: -0.8px;
  /* 소개 사이트 마지막 절의 어두운 밴드. **테마를 따라가면 안 된다** — --text 를 배경으로 쓰면
     다크 테마에서 그 값이 밝은 색으로 뒤집혀 밴드가 통째로 사라진다(2026-08-24 아트보드
     다크 캡처에서 확인). 두 테마에서 같은 값을 쓰는 것이 이 밴드의 요구사항이다. */
  --band-dark-bg: #16202A;
  --band-dark-fg: #ECF1F4;
  --band-dark-muted: #8FAA9D;
  /* A4 문서는 화면 UI와 물리 크기가 달라 같은 네 역할을 별도 출력 scale로 쓴다. */
  --report-fs-page: 24px;
  --report-fs-section: 16px;
  --report-fs-body: 14px;
  --report-fs-caption: 11px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  /* A control's fixed icon clearance and visually-hidden clipping are not layout rhythm. */
  --space-password-toggle-clearance: 58px;
  --space-sr-only-offset: 1px;
  /* Sticky controls and A4 scaling have physical, non-ladder dimensions. */
  --space-journal-actions-clearance: 120px;
  --report-page-height: 1123px;
  /* 컨텐츠 박스(카드·패널)의 모서리. 컨트롤(버튼·입력·탭)은 8px을 그대로 쓴다. */
  --radius-card: 15px;
  --radius-control: 8px;
  --primary: #05A66B;
  --primary-dark: #06784F;
  --primary-action: #06784F;
  --primary-muted: #4F6F61;
  --mint-soft: #EDF8F3;
  --screen: #F4F7F8;
  --surface: #FFFFFF;
  --surface-soft: #F8FAFB;
  --neutral: #EEF3F5;
  --text: #16202A;
  --muted: #5F6D7A;
  --line: rgba(22, 32, 42, 0.08);
  --danger: #D32F2F;
  --danger-soft: #FFF4F4;
  --chart-bar: #8FD4B8;
  --badge-todo-bg: #FFF6E9;
  --badge-todo-fg: #875A14;
  --badge-draft-bg: #EEF2FB;
  --badge-draft-fg: #3D5A9E;
  --badge-share-bg: #EDF8F3;
  --badge-share-fg: #06784F;
  --badge-done-bg: #05A66B;
  --badge-done-fg: #FFFFFF;
  --shadow: 0 1px 3px rgba(22,32,42,0.06), 0 4px 14px rgba(22,32,42,0.04);
  --shadow-hover: 0 3px 8px rgba(22,32,42,0.09), 0 10px 24px rgba(22,32,42,0.08);
}

@media (max-width: 760px) {
  :root { --fs-page: 24px; }
}

:root[data-theme='dark'] {
  --primary: #2FBE8A;
  --primary-dark: #7ED9B8;
  --primary-action: #16865F;
  --primary-muted: #8FAA9D;
  --mint-soft: #1D2E27;
  --screen: #0F141A;
  --surface: #161C22;
  --surface-soft: #1B222A;
  --neutral: #222B33;
  --text: #ECF1F4;
  --muted: #94A2AF;
  --line: rgba(236,241,244,0.1);
  --danger: #FF8A80;
  --danger-soft: #3A1F22;
  --chart-bar: #2F6B54;
  --badge-todo-bg: #33291A;
  --badge-todo-fg: #E4B36A;
  --badge-draft-bg: #1E2634;
  --badge-draft-fg: #93AEE0;
  --badge-share-bg: #1D2E27;
  --badge-share-fg: #7ED9B8;
  --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.25);
  --shadow-hover: 0 3px 8px rgba(0,0,0,0.4), 0 10px 24px rgba(0,0,0,0.35);
}

/* ── 소개 페이지 전용 (아트보드 helmet) ── */
* { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        background: var(--screen);
        color: var(--text);
        font: var(--type-card-body);
        letter-spacing: var(--ls);
      }
      a { color: inherit; text-decoration: none; }
      button, input, textarea { font: inherit; letter-spacing: inherit; }
      button { cursor: pointer; }
      /* 요소별 포커스 규칙이 아래에 따로 있는데, 그 **목록에 없는** 링크가 실제로 있었다
         (로고와 푸터 메일 주소). 목록을 늘리는 대신 바닥을 깐다 — 앞으로 링크가 늘어도
         키보드 사용자가 자기 위치를 잃지 않는다. 모양은 앱의 global.css 와 같다. */
      a:focus-visible, button:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
        outline-offset: 2px;
      }
      /* 부드러운 스크롤은 전정기관이 민감한 사람에게 어지럼을 만든다. 끄겠다고 밝힌
         사람에게는 끈다. 앱은 이미 이 규칙이 있고 소개 페이지에만 없었다. */
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after {
          animation-duration: .01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: .01ms !important;
        }
      }
      /* 🔴 2026-08-24 이전에는 `min-width: 1440px; overflow: hidden` 이었다. 375px 에서
         캔버스의 왼쪽 26% 만 보이고 스크롤도 안 됐다. 아래는 그 폭을 유동으로 바꾼 것이다.
         1440 에서의 계산 결과는 이전과 같다 — 1200 + 좌우 여백 20 = 1240 이 상한이다. */
      .landing { min-width: 0; }
      .container { width: 100%; max-width: calc(1200px + var(--space-5) * 2); margin: 0 auto; padding: 0 var(--space-5); }
      .landing { --landing-section-top: calc(var(--space-11) * 2); --landing-section-bottom: calc(var(--space-11) + var(--space-8)); }
      .site-header {
        height: calc(var(--space-10) + var(--space-4));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-8);
      }
      .brand, .nav, .header-actions, .brand-mark, .button, .text-link, .step-index, .slot-chip, .plan-link, .privacy-link, .footer-links {
        display: flex;
        align-items: center;
      }
      .brand { gap: var(--space-3); min-height: 44px; }
      .brand-mark {
        width: var(--space-8);
        height: var(--space-8);
        justify-content: center;
        background: var(--mint-soft);
        border-radius: 50%;
        color: var(--primary-dark);
      }
      .brand-name { font: var(--type-card-title); letter-spacing: var(--ls); }
      .nav { gap: var(--space-8); margin-left: auto; }
      /* 터치 타깃 하한 44px (핸드오프 README §5). 21px 이라 태블릿에서 못 눌렀다. */
      .nav a { display: inline-flex; align-items: center; min-height: 44px; }
      .nav a, .header-login, .theme-toggle, .text-link, .plan-link, .privacy-link, .footer-links a {
        color: var(--muted);
        font: var(--type-caption);
      }
      .nav a:hover, .header-login:hover, .text-link:hover, .plan-link:hover, .privacy-link:hover, .footer-links a:hover { color: var(--primary-dark); }
      .header-actions { gap: var(--space-5); }
      .header-login { min-height: var(--space-10); display: inline-flex; align-items: center; }
      .theme-toggle {
        width: calc(var(--space-7) + var(--space-5));
        height: var(--space-10);
        justify-content: center;
        border: 0;
        border-radius: var(--radius-control);
        background: var(--surface-soft);
        color: var(--muted);
      }
      .theme-toggle:hover { color: var(--primary-dark); background: var(--mint-soft); }
      .theme-toggle:focus-visible, .button:focus-visible, .text-link:focus-visible, .plan-link:focus-visible, .privacy-link:focus-visible, .nav a:focus-visible, .header-login:focus-visible, .footer-links a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary); }
      .section { padding: var(--landing-section-top) 0 var(--landing-section-bottom); }
      .section-screen { background: var(--screen); }
      .section-surface { background: var(--surface); }
      .section-mint { background: var(--mint-soft); }
      .section-soft { background: var(--surface-soft); }
      .section-dark { background: var(--band-dark-bg); color: var(--band-dark-fg); }
      .step-index, .slot-chip, .placeholder-label, .footer-label { font: var(--type-caption); }
      /* `keep-all` 이 없으면 한국어가 음절 단위로 끊긴다 — 375px 실측에서 「기록으로 남 / 습니다」,
         「적어 둡 / 니다」가 나왔다. 어절 경계로만 접게 한다. */
      .section-title, .hero-copy h1, .split-copy h3, .audience-card h3, .bento-title, .safety-callout h3, .plan-card h3 { margin: 0; letter-spacing: var(--ls-display); word-break: keep-all; }
      .hero-copy p, .split-copy p, .audience-card p, .bento-tile p, .safety-detail p, .plan-card p, .footer-label { word-break: keep-all; }
      .section-title { font: var(--type-section-lg); }
      .section-heading { margin-bottom: var(--space-10); }
      .hero { padding: var(--space-11) 0 calc(var(--space-11) + var(--space-8)); }
      .hero-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-11);
        align-items: center;
        min-height: calc(var(--space-11) * 6 + var(--space-6));
      }
      .hero-copy h1 { font: var(--type-display); max-width: 510px; }
      .hero-copy p { max-width: 500px; margin: var(--space-6) 0 0; color: var(--muted); }
      .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-8); }
      .button {
        min-height: calc(var(--space-10) - var(--space-3));
        padding: 0 var(--space-6);
        justify-content: center;
        gap: var(--space-2);
        border: 0;
        border-radius: var(--radius-control);
        background: var(--primary);
        color: var(--badge-done-fg);
        font: var(--type-card-body);
        font-weight: 400;
        box-shadow: var(--shadow);
      }
      .button:hover { background: var(--primary-dark); box-shadow: var(--shadow-hover); }
      .text-link, .plan-link, .privacy-link { gap: var(--space-2); min-height: var(--space-10); color: var(--primary-dark); }
      .hero-visual { position: relative; min-height: 500px; }
      .hero-main-shot {
        position: absolute;
        right: 0;
        top: var(--space-6);
        width: 520px;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        border-radius: var(--radius-card);
        background: var(--surface);
        box-shadow: var(--shadow-hover);
      }
      .hero-main-shot img, .product-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
      .hero-fragment {
        position: absolute;
        overflow: hidden;
        border-radius: var(--radius-card);
        background: var(--surface);
        box-shadow: var(--shadow-hover);
      }
      .hero-fragment-report { left: 0; top: 104px; width: 220px; height: 152px; }
      .hero-fragment-report img { width: 170%; height: 170%; object-fit: cover; object-position: 63% 12%; }
      .hero-fragment-ai { right: 40px; bottom: 0; width: 246px; height: 178px; padding: var(--space-5); }
      .mini-summary { display: grid; gap: var(--space-3); height: 100%; }
      .mini-summary span { display: block; border-radius: var(--radius-control); background: var(--neutral); }
      .mini-summary span:nth-child(1) { width: 44%; background: var(--mint-soft); }
      .mini-summary span:nth-child(2) { width: 90%; }
      .mini-summary span:nth-child(3) { width: 72%; }
      .mini-summary span:nth-child(4) { width: 82%; background: var(--mint-soft); }
      .hero-connectors { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--primary-muted); pointer-events: none; }
      .slot-chip {
        position: absolute;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-control);
        background: var(--mint-soft);
        color: var(--primary-dark);
        box-shadow: var(--shadow);
      }
      .hero-chips { display: contents; }
      .chip-main { right: 26px; top: 0; }
      .chip-report { left: 34px; top: 76px; }
      .chip-ai { right: 0; bottom: 40px; }
      /* 380px 고정 3열이었다. 1240 미만에서 넘쳤다. auto-fit 은 1200 폭에서 같은 3×380 을 만든다. */
      .audience-grid, .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
      .audience-card {
        min-height: 284px;
        padding: var(--space-8);
        border-radius: var(--radius-card);
        background: var(--surface-soft);
        box-shadow: var(--shadow);
      }
      .audience-icon { width: var(--space-10); height: var(--space-10); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mint-soft); color: var(--primary-dark); }
      .audience-card h3 { margin-top: var(--space-7); font: var(--type-card-title); }
      .audience-card p { margin: var(--space-3) 0 0; color: var(--muted); }
      .process-stack { display: grid; gap: calc(var(--space-10) + var(--space-4)); }
      .process-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-11); align-items: center; }
      .process-block.reverse .split-copy { order: 2; }
      .process-block.reverse .product-shot, .process-block.reverse .placeholder-shot { order: 1; }
      .step-index { width: var(--space-10); height: var(--space-10); justify-content: center; border-radius: 50%; background: var(--mint-soft); color: var(--primary-dark); }
      .split-copy h3 { margin-top: var(--space-5); font: var(--type-section-title); }
      .split-copy p { margin: var(--space-4) 0 0; color: var(--muted); max-width: 430px; }
      .product-shot, .placeholder-shot { width: calc(100% - var(--space-10)); justify-self: end; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-card); background: var(--surface-soft); box-shadow: var(--shadow-hover); }
      .process-block.reverse .product-shot, .process-block.reverse .placeholder-shot { justify-self: start; }
      .placeholder-shot { display: flex; align-items: center; justify-content: center; padding: var(--space-8); background: var(--neutral); }
      .placeholder-frame { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); width: 100%; height: 100%; padding: var(--space-6); border-radius: var(--radius-card); background: var(--surface-soft); }
      .placeholder-copy { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); }
      .placeholder-label { display: inline-flex; align-self: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--mint-soft); color: var(--primary-dark); }
      .placeholder-copy span:not(.placeholder-label), .placeholder-panel span { display: block; border-radius: var(--radius-control); background: var(--neutral); }
      .placeholder-copy span:nth-child(2) { width: 76%; height: var(--space-5); background: var(--primary-muted); }
      .placeholder-copy span:nth-child(3) { width: 92%; height: var(--space-3); }
      .placeholder-copy span:nth-child(4) { width: 64%; height: var(--space-3); }
      .placeholder-panel { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-control); background: var(--surface); }
      .placeholder-panel span:nth-child(1) { height: var(--space-5); width: 42%; background: var(--mint-soft); }
      .placeholder-panel span:nth-child(2) { height: var(--space-9); }
      .placeholder-panel span:nth-child(3) { height: var(--space-9); background: var(--mint-soft); }
      .placeholder-panel span:nth-child(4) { height: var(--space-3); width: 64%; }
      .bento-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-6); min-height: calc((var(--space-11) * 6) + var(--space-10)); }
      .bento-tile { border-radius: var(--radius-card); padding: var(--space-8); background: var(--surface); box-shadow: var(--shadow); }
      .bento-large { grid-row: span 2; display: grid; grid-template-rows: auto 1fr; gap: var(--space-6); background: var(--surface-soft); }
      .bento-title { font: var(--type-card-title); }
      .bento-tile p { margin: var(--space-3) 0 0; color: var(--muted); }
      .bento-large .placeholder-shot { min-height: 0; width: 100%; max-width: calc(var(--space-11) * 5); justify-self: center; aspect-ratio: 4 / 3; padding: var(--space-6); }
      .bento-large .placeholder-frame { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
      .bento-large .placeholder-copy { justify-content: flex-start; }
      .bento-large .placeholder-panel { grid-template-columns: 1fr 1fr; }
      .bento-large .placeholder-panel span:nth-child(1) { grid-column: span 2; }
      .bento-large .placeholder-panel span:nth-child(4) { grid-column: span 2; }
      .bento-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); min-height: 0; }
      .bento-pair .bento-tile { min-height: 0; padding: var(--space-6); }
      .bento-pair .bento-icon { width: var(--space-9); height: var(--space-9); }
      .bento-icon { width: var(--space-10); height: var(--space-10); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mint-soft); color: var(--primary-dark); }
      .safety-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-11); align-items: start; }
      .safety-copy { display: grid; gap: var(--space-6); }
      .safety-callout { padding: var(--space-8); border-radius: var(--radius-card); background: var(--mint-soft); }
      .safety-callout h3 { font: var(--type-card-title); }
      .safety-callout p, .safety-detail { margin: var(--space-3) 0 0; color: var(--muted); }
      .safety-detail { display: grid; gap: var(--space-4); }
      .safety-visual { min-height: 358px; display: grid; align-content: center; gap: var(--space-5); padding: var(--space-9); border-radius: var(--radius-card); background: var(--surface-soft); box-shadow: var(--shadow); }
      .safety-visual-row { display: grid; grid-template-columns: var(--space-10) 1fr; gap: var(--space-4); align-items: center; }
      .safety-dot { width: var(--space-10); height: var(--space-10); border-radius: 50%; background: var(--mint-soft); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; }
      .safety-line { display: grid; gap: var(--space-2); }
      .safety-line span { height: var(--space-3); border-radius: var(--radius-control); background: var(--neutral); }
      .safety-line span:last-child { width: 68%; background: var(--mint-soft); }
      .pricing-grid { align-items: stretch; }
      .plan-card { min-height: calc(var(--space-11) * 3); display: flex; flex-direction: column; padding: var(--space-8); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow); }
      .plan-card h3 { font: var(--type-card-title); }
      .plan-card p { margin: var(--space-3) 0 0; color: var(--muted); }
      .pricing-footer { display: flex; justify-content: center; margin-top: var(--space-8); }
      .footer { padding: var(--space-9) 0 var(--space-10); background: var(--band-dark-bg); color: var(--band-dark-fg); }
      .footer-layout { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: end; }
      .footer-label { margin: 0; color: var(--band-dark-muted); }
      .footer-contact { margin: var(--space-4) 0 0; color: var(--band-dark-fg); }
      .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
      .footer-meta { margin: var(--space-2) 0 0; color: var(--band-dark-muted); }
      .footer-links { justify-content: flex-end; gap: var(--space-5); flex-wrap: wrap; }
      /* 터치 타깃 하한 44px (핸드오프 README §5). 21px 이라 손가락으로 못 눌렀다. */
      .footer-links a { color: var(--band-dark-fg); display: inline-flex; align-items: center; min-height: 44px; }

      /* ── 제품 스크린샷: 컨테이너 질의 ─────────────────────────────────────
         🔴 1440px 폭 앱 화면을 그대로 줄이면 글자가 뭉개져 「잘린 조각」처럼 보인다.
         줄이지 말고 **읽히는 구역만 확대해서** 보여 준다. 히어로의 리포트 조각이
         데스크톱에서 이미 쓰는 방식과 같다(width/height 170% + object-position).

         기준을 뷰포트가 아니라 **컨테이너**로 잡는다. 같은 375px 뷰포트에서도 히어로
         이미지와 벤토 안 이미지의 실제 폭이 다르고, 반대로 900px 뷰포트에서도 2단 칸
         안의 이미지는 400px 밖에 안 된다. 뷰포트로 끊으면 둘 중 하나는 반드시 틀린다.
         읽히는 하한은 실측으로 520px 근처였다.

         확대 지점은 화면마다 다르므로 data-focus 로 지정한다. */
      .hero-visual, .process-block, .bento-large { container-type: inline-size; }

      /* 히어로 CTA 를 세로로 쌓고 버튼을 전체폭으로 만드는 건 **전화기 패턴**이다.
         760px 까지 끌고 갔더니 그 폭에서 버튼이 720px 이 됐다(실측: 600→560 · 700→660 · 760→720).
         가로 배치는 320px 에서도 들어간다(버튼 144 + 간격 20 + 링크 82 = 246 < 280),
         그러니 좁혀야 할 이유는 공간이 아니라 엄지 도달 거리뿐이다. 그건 전화기에만 해당한다. */
      @media (max-width: 480px) {
        .hero-actions { flex-direction: column; align-items: stretch; gap: var(--space-3); }
        .hero-actions .button { width: 100%; }
        .hero-actions .text-link { justify-content: center; }
      }

      @container (max-width: 460px) {
        .hero-main-shot, .product-shot { aspect-ratio: 5 / 4; }
        /* `width: 215%` 로 키우는 방법은 못 쓴다 — object-fit: cover 가 그 커진 상자에 다시
           맞추므로 실제 배율이 0.32 에서 안 올라가고, 가로로 옮길 여유도 이미지 폭의 22%
           밖에 안 생겨 사이드바를 못 벗어난다(실측). transform 이면 배율과 초점을 따로 준다. */
        .hero-main-shot img, .product-shot img {
          transform: scale(var(--zoom, 2.2));
          transform-origin: var(--fx, 50%) var(--fy, 20%);
        }
        /* 초점은 「그 화면에서 무엇을 보여 줄 것인가」다. 좌표가 아니라 의도를 적어 둔다. */
        [data-focus="home"] img { --zoom: 1.7; --fx: 19%; --fy: 0%; }  /* 인사말 + 이번 주 기록 추이 + 관리대상 카드 */
        [data-focus="write"] img { --fx: 24%; --fy: 12%; }  /* 오늘의 일지 작성 + 자유 메모 */
        [data-focus="report"] img { --fx: 66%; --fy: 14%; } /* 주간 리포트 제목 + 날짜별 기록 수 */
      }

      /* 자리표시자는 문턱이 더 낮다(390px). 460 을 같이 쓰면 벤토 큰 타일의 자리표시자
         (데스크톱에서 400px)까지 바뀌어 승인된 데스크톱 화면이 달라진다. 390 이면
         데스크톱 400 은 그대로 두고 좁은 화면(≤414 뷰포트)만 한 칸으로 세운다. */
      @container (max-width: 390px) {
        .placeholder-shot { padding: var(--space-4); aspect-ratio: 5 / 4; }
        .placeholder-frame { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--space-3); padding: var(--space-4); }
        .placeholder-copy { gap: var(--space-2); }
      }

      /* ── 반응형 (2026-08-24 신규) ───────────────────────────────────────────
         이전 아트보드에는 @media 가 0개였다. 경계 두 개를 둔다.
          · 1080px — 좌우 2단(히어로·공정·안전)이 세로로 접힌다. 히어로의 제품 이미지가
            520px 고정이라 그 아래에서는 반쪽 칸에 안 들어간다.
          · 760px  — 웹 앱이 사이드바를 모달로 바꾸는 경계와 같은 값을 쓴다
            (web/src/styles/global.css:123). 두 화면이 같은 자리에서 접혀야 한다. */

      @media (max-width: 1080px) {
        .landing { --landing-section-top: calc(var(--space-11) + var(--space-8)); --landing-section-bottom: var(--space-11); }
        .hero-layout, .process-block, .safety-layout { grid-template-columns: 1fr; gap: var(--space-10); }
        .process-block.reverse .split-copy, .process-block.reverse .product-shot, .process-block.reverse .placeholder-shot { order: 0; }
        .product-shot, .placeholder-shot { width: 100%; justify-self: stretch; }
        .process-block.reverse .product-shot, .process-block.reverse .placeholder-shot { justify-self: stretch; }
        .split-copy p { max-width: none; }
        .hero-copy h1, .hero-copy p { max-width: none; }
        .bento-grid { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
        .bento-large { grid-row: auto; }
        .safety-visual { min-height: 0; }

        /* 히어로 제품 미리보기. 절대 배치 세 조각이 겹쳐 있어 반쪽 폭에서 서로를 가린다.
           세로 흐름으로 풀고 조각은 이미지 아래에 겹치게 둔다. */
        .hero-visual { min-height: 0; display: grid; gap: var(--space-6); }
        .hero-connectors { display: none; }
        .hero-main-shot { position: static; width: 100%; max-width: 520px; margin: 0 auto; }
        .hero-fragment { position: static; }
        .hero-fragment-report { display: none; }
        .hero-fragment-ai { width: 100%; max-width: 520px; height: auto; min-height: 178px; margin: 0 auto; }
        .slot-chip { position: static; }
        .hero-visual { grid-template-areas: "shot" "fragment" "chips"; }
        .hero-main-shot { grid-area: shot; }
        .hero-fragment-ai { grid-area: fragment; }
        .chip-main, .chip-report, .chip-ai { inset: auto; }
      }

      /* 칩 셋은 절대 배치를 잃으면 각자 한 줄을 차지한다. 한 줄에 모아 이름표로 쓴다. */
      @media (max-width: 1080px) {
        .hero-chips { grid-area: chips; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
      }

      @media (max-width: 760px) {
        /* ── 타이포 스케일 ───────────────────────────────────────────────────
           데스크톱 스케일(56 / 40 / 20 / 16 / 14)을 그대로 줄이지 않고 다시 짰다.
           위 두 단계가 375px 에서 너무 크고(H1 34px 이 「돌본 하루를 적으면」에서 넘쳤다)
           아래 세 단계는 서로 붙어 있어 위계가 납작했다. 1.28 비율로 다섯 단계를 벌린다.
           한글은 라틴보다 글자 높이가 커서 같은 크기에서 더 크게 보인다 — 행간은 1.45 로
           같이 조인다. 큰 글씨일수록 자간을 좁혀야 벌어져 보이지 않는다. */
        .landing {
          --type-display: 700 30px/42px var(--font-sans);
          --type-section-lg: 700 23px/33px var(--font-sans);
          --fs-section: 17px;   /* 카드 제목 */
          --fs-body: 15px;
          --fs-caption: 13px;
          --ls-display: -0.9px;
          --landing-section-top: var(--space-10);
          --landing-section-bottom: var(--space-9);
          /* 모든 절이 같은 폭을 쓰게 하는 한 값. 카드·이미지·글이 같은 좌우선에 선다. */
          --landing-gutter: var(--space-5);
        }
        .container { padding: 0 var(--landing-gutter); }

        /* ── 헤더 ──────────────────────────────────────────────────────────
           브랜드+링크3+로그인+토글은 375px 에 안 들어간다. 절 이동은 스크롤과 푸터가 맡는다.
           햄버거는 아트보드가 아니라 구현 결정이라 만들지 않는다. */
        .site-header { height: auto; padding: var(--space-5) 0; gap: var(--space-4); }
        .nav { display: none; }
        .header-actions { gap: var(--space-3); }
        .theme-toggle { width: var(--space-9); height: var(--space-9); }

        /* ── 히어로 ────────────────────────────────────────────────────────
           카피의 강제 줄바꿈은 1440 기준이다. 375px 에서는 두 줄이 네 줄이 되어 깨진다.
           (앞뒤 공백을 남겨 뒀다 — 없으면 「적으면읽을」로 붙는다.) */
        .hero { padding: var(--space-7) 0 var(--space-10); }
        .hero-layout { gap: var(--space-8); min-height: 0; }
        .hero-copy p { margin-top: var(--space-5); }
        .hero-actions { margin-top: var(--space-7); }
        .hero-visual { gap: var(--space-4); }
        /* 회색 막대뿐인 「AI 정리본」 추상 카드는 178px 을 쓰고 아무것도 말하지 않는다.
           같은 말을 아래 칩이 이미 한다. 모바일에서는 뺀다. */
        .hero-fragment-ai { display: none; }

        /* ── 절 공통 ───────────────────────────────────────────────────────── */
        .section-heading { margin-bottom: var(--space-6); }
        .process-stack { gap: var(--space-10); }
        .process-block { gap: var(--space-6); }
        .split-copy h3 { margin-top: var(--space-4); }
        .split-copy p, .hero-copy p { margin-top: var(--space-3); }

        /* 원형 표식 64px 은 335px 칸에서 과하다. 44px 은 터치 타깃 하한과 같다. */
        .step-index, .audience-icon, .bento-icon, .safety-dot { width: 44px; height: 44px; }
        .audience-icon svg, .bento-icon svg, .safety-dot svg { width: 20px; height: 20px; }
        .audience-card h3 { margin-top: var(--space-5); }

        /* ── 카드 ─────────────────────────────────────────────────────────── */
        .audience-grid, .pricing-grid, .bento-pair, .bento-grid { grid-template-columns: 1fr; gap: var(--space-4); }
        .audience-card, .plan-card, .bento-tile, .safety-callout, .safety-visual { min-height: 0; padding: var(--space-6); }
        .bento-large { gap: var(--space-5); }
        .safety-copy { gap: var(--space-5); }
        .safety-visual { gap: var(--space-4); }
        .safety-visual-row { grid-template-columns: 44px 1fr; }

        .bento-large .placeholder-shot { max-width: none; }

        /* ── 푸터 ─────────────────────────────────────────────────────────── */
        .footer { padding: var(--space-8) 0 var(--space-9); }
        .footer-layout { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
        .footer-links { justify-content: flex-start; gap: var(--space-4) var(--space-5); }
      }