/* =====================================================================
   seuk.app 스타일 — 랜딩(/), 개인정보 처리방침(/privacy/), 404가 함께 쓴다.
   자바스크립트·인라인 스타일 없이 동작한다(_headers의 CSP: style-src 'self').
   build.mjs가 이 파일 이름에 내용 해시를 붙여 dist/에 둔다(styles.<해시>.css).

   1. 토큰(색·글자·간격·모서리) — 라이트 / 다크 / 고대비
   2. 기본
   3. 공통 컴포넌트(컨테이너, 머리말, 버튼, 섹션 제목, 목록)
   4. 기기 프레임과 잠금화면 목업
   5. 랜딩 섹션(히어로 → 왜 → 사용법 → 기능 → 개인정보 → FAQ → 마무리)
   6. 바닥글
   7. 개인정보 처리방침, 404
   8. 움직임 줄이기, 인쇄
   ===================================================================== */

/* 1. 토큰 ------------------------------------------------------------ */

:root {
  color-scheme: light dark;

  /* 바탕과 글자 */
  --bg: #ffffff;
  --bg-soft: #faf7f4;
  --surface: #ffffff;
  --surface-soft: #f5f1ed;
  --fg: #1c1917;
  --fg-muted: #57534e;
  --fg-subtle: #6f6862;
  --line: #ebe5df;
  --line-strong: #d8d0c8;

  /* 앱 강조색: 글자 #C2410C, 채움 #C2410C (고대비 #9A3412) */
  --accent: #c2410c;
  --accent-fill: #c2410c;
  --accent-fill-hover: #a8390b;
  --on-accent: #ffffff;
  --accent-soft: #fff1e8;
  --accent-soft-line: #fbd5bf;
  --accent-glow: rgb(255 138 76 / 0.28);

  /* 머리말 */
  --header-bg: rgb(255 255 255 / 0.9);
  --header-line: rgb(28 25 23 / 0.08);

  /* 개인정보 띠(어두운 띠) */
  --band-bg: #1c1917;
  --band-fg: #fafaf9;
  --band-muted: #d6d3d1;
  --band-accent: #ff8a5b;
  --band-card: rgb(255 255 255 / 0.05);
  --band-line: rgb(255 255 255 / 0.12);

  /* 기능 그림 판 */
  --panel-peach: linear-gradient(160deg, #fff4ec 0%, #ffe2cf 100%);
  --panel-sand: linear-gradient(160deg, #f8f4f0 0%, #ebe3db 100%);
  --panel-rose: linear-gradient(160deg, #fff2ee 0%, #f9dad0 100%);
  --panel-line: rgb(28 25 23 / 0.05);

  /* 잠금화면 배경과 유리 카드. 흰 글자(날짜, 칸 이름)가 올라가는 위쪽도 충분히 진하게 둔다. */
  --wallpaper:
    radial-gradient(110% 50% at 8% 0%, rgb(255 150 100 / 0.35) 0%, rgb(255 150 100 / 0) 62%),
    radial-gradient(90% 55% at 100% 32%, rgb(255 110 60 / 0.55) 0%, rgb(255 110 60 / 0) 66%),
    radial-gradient(120% 70% at 0% 100%, rgb(100 30 10 / 0.9) 0%, rgb(100 30 10 / 0) 72%),
    linear-gradient(168deg, #dc5a22 0%, #c2410c 50%, #8a2c0d 100%);
  --wall-text-shadow: 0 1px 2px rgb(90 25 5 / 0.35);
  --glass: rgb(255 255 255 / 0.7);
  --glass-strong: rgb(255 255 255 / 0.9);
  --glass-fg: #1c1917;
  --glass-muted: rgb(28 25 23 / 0.62);
  --glass-line: rgb(255 255 255 / 0.55);

  /* 그림자 */
  --shadow-sm: 0 1px 2px rgb(28 25 23 / 0.05), 0 4px 12px -4px rgb(28 25 23 / 0.08);
  --shadow-md: 0 2px 6px rgb(28 25 23 / 0.06), 0 16px 36px -14px rgb(28 25 23 / 0.22);
  --shadow-device: 0 50px 80px -40px rgb(97 41 10 / 0.5), 0 24px 44px -26px rgb(28 25 23 / 0.45);

  /* 글자 */
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-lg: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --fs-h3: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 2.4vw, 3rem);
  --fs-display: clamp(2.25rem, 1.25rem + 5vw, 4rem);

  /* 간격·크기. 가로 화면의 노치·둥근 모서리(viewport-fit=cover)를 피하도록 안전 영역도 함께 본다. */
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 16px;
  --container: 1080px;
  --container-text: 720px;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);
  --header-h: 64px;

  /* 모서리 */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0a09;
    --bg-soft: #141110;
    --surface: #1c1917;
    --surface-soft: #1a1715;
    --fg: #f5f5f4;
    --fg-muted: #a8a29e;
    --fg-subtle: #918a85;
    --line: #2a2522;
    --line-strong: #3d3633;

    /* 다크: 글자 #FF7A47, 채움 #C2410C */
    --accent: #ff7a47;
    --accent-fill: #c2410c;
    --accent-fill-hover: #d64f12;
    --accent-soft: #26150d;
    --accent-soft-line: #4a2614;
    --accent-glow: rgb(194 65 12 / 0.3);

    --header-bg: rgb(12 10 9 / 0.78);
    --header-line: rgb(255 255 255 / 0.08);

    --band-bg: #1d1714;
    --band-card: rgb(255 255 255 / 0.04);
    --band-line: rgb(255 255 255 / 0.1);

    --panel-peach: linear-gradient(160deg, #2a1810 0%, #1b120d 100%);
    --panel-sand: linear-gradient(160deg, #201c19 0%, #161312 100%);
    --panel-rose: linear-gradient(160deg, #2a1714 0%, #1c100e 100%);
    --panel-line: rgb(255 255 255 / 0.06);

    --wallpaper:
      radial-gradient(110% 55% at 8% 0%, rgb(196 92 46 / 0.9) 0%, rgb(196 92 46 / 0) 62%),
      radial-gradient(90% 55% at 100% 32%, rgb(160 52 16 / 0.85) 0%, rgb(160 52 16 / 0) 66%),
      radial-gradient(120% 70% at 0% 100%, rgb(24 8 4 / 0.95) 0%, rgb(24 8 4 / 0) 72%),
      linear-gradient(168deg, #8d3814 0%, #5c210b 50%, #1f0c05 100%);
    --glass: rgb(30 27 25 / 0.68);
    --glass-strong: rgb(52 47 44 / 0.88);
    --glass-fg: #f5f5f4;
    --glass-muted: rgb(245 245 244 / 0.64);
    --glass-line: rgb(255 255 255 / 0.12);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px -4px rgb(0 0 0 / 0.5);
    --shadow-md: 0 2px 6px rgb(0 0 0 / 0.4), 0 16px 36px -14px rgb(0 0 0 / 0.7);
    --shadow-device: 0 50px 80px -40px rgb(0 0 0 / 0.9), 0 24px 44px -26px rgb(0 0 0 / 0.8);
  }
}

/* 고대비: 강조색을 앱의 고대비 값(#9A3412 / 다크 글자 #FFA07A)으로, 보조 글자와 선을 진하게 */
@media (prefers-contrast: more) {
  :root {
    --fg-muted: #3f3a36;
    --fg-subtle: #4a4440;
    --line: #a8a29e;
    --line-strong: #78716c;
    --accent: #9a3412;
    --accent-fill: #9a3412;
    --accent-fill-hover: #7c2d12;
    --accent-soft-line: #c2410c;
    --header-bg: #ffffff;
    --glass: rgb(255 255 255 / 0.94);
    --glass-strong: #ffffff;
    --glass-muted: rgb(28 25 23 / 0.82);
    --band-muted: #f5f5f4;
    --band-line: rgb(255 255 255 / 0.4);
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --fg-muted: #d6d3d1;
    --fg-subtle: #c7c1bc;
    --line: #57534e;
    --line-strong: #78716c;
    --accent: #ffa07a;
    --accent-fill: #9a3412;
    --accent-fill-hover: #7c2d12;
    --accent-soft-line: #ffa07a;
    --header-bg: #0c0a09;
    --glass: rgb(28 25 23 / 0.95);
    --glass-strong: #292524;
    --glass-muted: rgb(245 245 244 / 0.85);
  }
}

/* 2. 기본 ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

/* 짧은 페이지(404)에서도 바닥글이 화면 아래에 붙도록 세로 flex */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3 {
  margin: 0;
  color: inherit;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

p,
li,
dd {
  text-wrap: pretty;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

b,
strong {
  font-weight: 700;
}

/* 따옴표로 묶은 UI 이름·예문(‘슥 적기’, “내일 3시 회의”)은 줄바꿈으로 가르지 않는다 */
.nw {
  white-space: nowrap;
}

::selection {
  background: var(--accent-soft-line);
  color: var(--fg);
}

/* 스프라이트: 문서 안 <symbol>을 <use>로 쓴다 */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 선 아이콘(24 격자). 크기는 놓이는 곳에서 정한다. */
.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 채운 기호(상태 막대, 자물쇠) */
.glyph {
  flex: none;
  fill: currentColor;
}

/* 3. 공통 컴포넌트 ---------------------------------------------------- */

.container {
  width: min(100% - 2 * max(var(--gutter), var(--safe-left), var(--safe-right)), var(--container));
  margin-inline: auto;
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
  }
}

.skip-link {
  position: absolute;
  top: 8px;
  left: max(8px, var(--safe-left));
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

/* 머리말 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--bg);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--fg);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 23%;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 3px 8px -3px rgb(194 65 12 / 0.55);
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.site-nav a:hover {
  background: var(--surface-soft);
  color: var(--fg);
}

.site-header__cta {
  margin-left: 8px;
}

.site-header__cta.btn--primary {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(194 65 12 / 0.3);
}

@media (max-width: 599px) {
  .site-nav {
    display: none;
  }

  .site-header__cta {
    margin-left: auto;
  }
}

/* 버튼 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.btn .icon {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 2.2;
}

.btn--primary {
  background: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 10px 24px -12px rgb(194 65 12 / 0.75);
}

.btn--primary:hover {
  background: var(--accent-fill-hover);
}

.btn--primary:active,
.btn--inverse:active {
  transform: translateY(1px);
}

.btn--small {
  min-height: 44px;
  padding: 0 18px;
  font-size: var(--fs-sm);
}

.btn--large {
  min-height: 56px;
  padding: 0 28px;
  font-size: 1.0625rem;
}

.btn--inverse {
  background: #ffffff;
  color: #9a3412;
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.5);
}

.btn--inverse:hover {
  background: #fff4ee;
}

.btn--ghost {
  background: var(--surface);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.btn--ghost:hover {
  background: var(--surface-soft);
}

/* 화살표가 붙은 글자 링크 */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--fg);
  font-weight: 700;
  text-decoration: none;
}

.link-more .icon {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 2.2;
  color: var(--accent);
  transition: transform 0.15s;
}

.link-more:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.link-more:hover .icon {
  transform: translateY(2px);
}

/* 작은 꼬리표 */
.kicker {
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* 섹션 */
.section {
  padding-block: var(--section-y);
}

.section--soft {
  background: var(--bg-soft);
}

.section-head {
  max-width: 760px;
  margin: 0 auto clamp(3rem, 2rem + 4vw, 5rem);
  text-align: center;
}

.section-head h2 {
  margin-top: 10px;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1.22;
}

.section-head__lead {
  max-width: 34em;
  margin: 18px auto 0;
  color: var(--fg-muted);
  font-size: var(--fs-lg);
  line-height: 1.65;
  text-wrap: balance;
}

/* 체크 목록 */
.checks {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 34px;
  line-height: 1.65;
}

.checks li::before {
  content: "";
  position: absolute;
  top: 0.12em;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-soft-line);
}

.checks li::after {
  content: "";
  position: absolute;
  top: calc(0.12em + 6px);
  left: 8px;
  width: 6px;
  height: 10px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.fine {
  margin-top: 20px;
  color: var(--fg-subtle);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* 알림 토스트(히어로) */
.toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 18px;
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.35;
}

.toast__check {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: #ffffff;
}

.toast__check .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}

/* 4. 기기 프레임 ------------------------------------------------------ */

/* --dw: 기기 바깥 너비. 화면 비율은 스크린샷과 같은 960:2087이다. */
.device {
  --dw: 280px;
  position: relative;
  flex: none;
  width: var(--dw);
  padding: calc(var(--dw) * 0.032);
  border-radius: calc(var(--dw) * 0.165);
  background: linear-gradient(145deg, #55555b 0%, #26262a 14%, #111113 50%, #26262a 86%, #4a4a50 100%);
  box-shadow:
    inset 0 0 0 calc(var(--dw) * 0.004) rgb(255 255 255 / 0.22),
    inset 0 0 0 calc(var(--dw) * 0.014) #0d0d0f,
    0 0 0 1px rgb(0 0 0 / 0.35),
    var(--shadow-device);
}

/* 옆 버튼: 왼쪽은 동작 버튼과 음량, 오른쪽은 측면 버튼 */
.device::before,
.device::after {
  content: "";
  position: absolute;
  width: calc(var(--dw) * 0.011);
  background: #2c2c30;
}

.device::before {
  top: 17%;
  left: calc(var(--dw) * -0.009);
  height: 21%;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(#2c2c30 0 15%, transparent 15% 27%, #2c2c30 27% 59%, transparent 59% 68%, #2c2c30 68% 100%);
}

.device::after {
  top: 25%;
  right: calc(var(--dw) * -0.009);
  height: 12%;
  border-radius: 0 2px 2px 0;
}

.device__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 960 / 2087;
  border-radius: calc(var(--dw) * 0.134);
  background: #000000;
  container-type: inline-size;
  isolation: isolate;
}

.device__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.device__island {
  position: absolute;
  z-index: 3;
  top: 3.4cqw;
  left: 50%;
  width: 30cqw;
  height: 8.8cqw;
  margin-left: -15cqw;
  border-radius: 8.8cqw;
  background: #000000;
}

/* 잠금화면 목업 (모든 크기는 화면 너비 기준 cqw) */
.lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 4.4cqw 29cqw;
  background: var(--wallpaper);
  color: #ffffff;
  font-size: 4cqw;
  line-height: 1.3;
}

.lock__status {
  position: absolute;
  top: 6.2cqw;
  right: 7cqw;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
}

.lock__signal {
  width: 4.6cqw;
  height: 3.1cqw;
}

.lock__wifi {
  width: 4.2cqw;
  height: 3.1cqw;
}

.lock__battery {
  width: 6.6cqw;
  height: 3.1cqw;
}

.lock__padlock {
  width: 3.4cqw;
  height: 4.4cqw;
  margin-top: 15.5cqw;
  opacity: 0.95;
}

.lock__date {
  margin-top: 2.2cqw;
  font-size: 4.9cqw;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: var(--wall-text-shadow);
}

.lock__time {
  margin-top: 0.2cqw;
  font-size: 24cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-shadow: 0 0.6cqw 4cqw rgb(110 35 10 / 0.25);
}

.lock__stack {
  display: grid;
  gap: 2.4cqw;
  width: 100%;
  margin-top: auto;
}

.lock__card {
  display: block;
  padding: 3.8cqw 4cqw 4cqw;
  border-radius: 6.4cqw;
  background: var(--glass);
  color: var(--glass-fg);
  box-shadow: inset 0 0 0 0.3cqw var(--glass-line), 0 2cqw 6cqw -2cqw rgb(60 18 4 / 0.4);
  -webkit-backdrop-filter: blur(5cqw) saturate(160%);
  backdrop-filter: blur(5cqw) saturate(160%);
}

.lock__app {
  display: flex;
  align-items: center;
  gap: 1.8cqw;
  margin-bottom: 2cqw;
  color: var(--glass-muted);
  font-size: 3.5cqw;
  font-weight: 600;
}

.lock__app img {
  width: 5.2cqw;
  height: 5.2cqw;
  border-radius: 1.3cqw;
}

.lock__q {
  display: block;
  font-size: 4.9cqw;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.lock__field {
  display: flex;
  align-items: center;
  min-height: 11cqw;
  margin-top: 2.6cqw;
  padding: 0 1.4cqw 0 3.4cqw;
  border-radius: 3.6cqw;
  background: var(--glass-strong);
  font-size: 4.5cqw;
  font-weight: 500;
}

.lock__caret,
.qa__caret {
  flex: none;
  width: 0.55cqw;
  height: 5.4cqw;
  margin-left: 0.5cqw;
  border-radius: 0.3cqw;
  background: var(--accent-fill);
}

.lock__done {
  display: grid;
  place-items: center;
  height: 8cqw;
  margin-left: auto;
  padding: 0 3.6cqw;
  border-radius: 8cqw;
  background: var(--accent-fill);
  color: #ffffff;
  font-size: 3.6cqw;
  font-weight: 700;
}

.lock__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2cqw;
  margin-top: 2.8cqw;
}

.lock__option {
  display: grid;
  place-items: center;
  min-height: 10.6cqw;
  border-radius: 3.6cqw;
  background: var(--glass-strong);
  color: var(--accent);
  font-size: 4cqw;
  font-weight: 700;
}

.lock__option--on {
  background: var(--accent-fill);
  color: #ffffff;
  box-shadow: 0 0 0 0.8cqw rgb(194 65 12 / 0.22);
}

.lock__cancel {
  display: block;
  margin-top: 2.8cqw;
  color: var(--glass-muted);
  font-size: 3.6cqw;
  font-weight: 600;
  text-align: center;
}

.lock__btn {
  position: absolute;
  bottom: 9cqw;
  display: grid;
  place-items: center;
  width: 13cqw;
  height: 13cqw;
  border-radius: 50%;
  background: rgb(28 25 23 / 0.34);
  color: #ffffff;
  -webkit-backdrop-filter: blur(3cqw);
  backdrop-filter: blur(3cqw);
}

.lock__btn .icon {
  width: 5.6cqw;
  height: 5.6cqw;
  stroke-width: 2;
}

.lock__btn--left {
  left: 10cqw;
}

.lock__btn--right {
  right: 10cqw;
}

.lock__btn--on {
  background: rgb(255 255 255 / 0.94);
  color: #c2410c;
  box-shadow: 0 0 0 1.6cqw rgb(255 255 255 / 0.24);
}

.lock__bar {
  position: absolute;
  bottom: 2.4cqw;
  left: 50%;
  width: 34cqw;
  height: 1.3cqw;
  margin-left: -17cqw;
  border-radius: 1cqw;
  background: rgb(255 255 255 / 0.9);
}

/* 5. 랜딩 ------------------------------------------------------------ */

/* 히어로: 잠금화면 목업(.hero__mock) 뒤에 앱 스크린샷 기기(.hero__app)를 비스듬히 겹친다.
   뒤 기기는 앞 기기가 상태 막대의 시각(10:56)을 다 가릴 만큼 겹치고, 600px 미만에서는 숨긴다. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(4rem, 2.5rem + 5vw, 7rem);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -12%;
  right: -18%;
  width: min(1000px, 110vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--accent-glow), rgb(255 255 255 / 0));
  pointer-events: none;
}

.hero__grid {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 4.5rem);
  align-items: center;
}

.hero__copy {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  box-shadow: inset 0 0 0 1px var(--accent-soft-line);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px var(--accent-soft-line);
}

.display {
  margin-top: 22px;
  font-size: var(--fs-display);
  line-height: 1.16;
  letter-spacing: -0.04em;
}

.display__accent {
  color: var(--accent);
}

.hero__lead {
  max-width: 28em;
  margin: 22px auto 0;
  color: var(--fg-muted);
  font-size: var(--fs-lg);
  line-height: 1.65;
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 34px;
}

/* ‘사용법 보기’·‘자주 묻는 질문’은 한 묶음으로 줄을 바꾼다(버튼 옆 줄에 하나만 남지 않게). */
.hero__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 24px;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px clamp(12px, 4vw, 18px);
  margin-top: 26px;
  padding: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  list-style: none;
}

.trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trust .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
  color: var(--accent);
}

/* 베타 상태 한 줄: SEUK_BETA_STATUS=review일 때만 build.mjs가 채운다. 비어 있으면 숨긴다. */
.beta-status {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  max-width: 30em;
  margin: 20px auto 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.55;
  text-align: left;
}

.beta-status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft-line);
}

.beta-status:empty {
  display: none;
}

.hero__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 520px;
}

.hero__stage > * {
  grid-area: 1 / 1;
}

.hero__app {
  --dw: min(236px, 58vw);
  transform: translate(46%, 9%);
}

@media (max-width: 599px) {
  .hero__app {
    display: none;
  }
}

.hero__app img {
  filter: saturate(0.96);
}

.hero__mock {
  position: relative;
  z-index: 2;
  transform: translateX(-16%);
}

.hero__mock .device {
  --dw: min(286px, 70vw);
}

.hero__toast {
  position: absolute;
  top: 35%;
  left: 66%;
  width: max-content;
  max-width: min(300px, 80vw);
  transform: translateX(-50%);
}

/* 기기 그림자 위에 놓여 배경이 어두워지므로 --fg-subtle 대신 한 단계 진한 색 (라이트에서 대비 4.5 이상) */
.hero__note {
  margin-top: 26px;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* 휴대폰(600px 미만): 입력창과 할 일/일정 고르기가 첫 화면에 들게 한다. 390×844 iPhone의 Safari에서 실제로 보이는 높이는
   660~750px라서 고르기 버튼이 위에서 660px 안쪽에 오게 맞췄다. 글 사이를 조금 줄이고, 잠금화면 목업은 위쪽(상태 막대·시계·
   빈 배경)을 잘라 입력창부터 보여 준다. 결과 토스트는 입력 → 고르기 → 결과 순서로 읽히도록 기기 아랫변에 걸친다.
   목업 안쪽(.device, .lock)은 바꾸지 않으므로 og 이미지(tools/og.html)와 600px 이상 화면은 그대로다. */
@media (max-width: 599px) {
  .hero {
    padding-top: 24px;
  }

  .hero__grid {
    gap: 20px;
  }

  .display {
    margin-top: 14px;
  }

  .hero__lead {
    margin-top: 12px;
  }

  .hero__actions {
    row-gap: 4px;
    margin-top: 22px;
  }

  .trust {
    margin-top: 12px;
  }

  /* 무대 윗변 위로 올라간 기기 윗부분을 잘라 낸다(그리지도, 눌리지도 않는다). 아래로는 기기 그림자와 토스트가 잘리지 않게
     안쪽 여백을 둔 뒤 그만큼 바깥 여백을 빼서 아래 글의 자리는 그대로 둔다. overflow: clip을 모르는 브라우저는 hidden으로 자른다.
     잘린 윗변(기기와 옆 그림자)은 마스크로 16px에 걸쳐 투명하게 흐려서, 뒤의 바탕과 빛 번짐(.hero::before)이 그대로 비친다.
     바탕색 띠로 덮으면 540px 넘는 폭에서 빛 번짐 위에 가로줄이 생긴다. 마스크는 무대 상자 밖을 그리지 않으므로 무대를
     화면 폭(양옆 --gutter까지)으로 넓혀 기기 옆 그림자가 상자 안에 들게 한다. 기기는 그대로 가운데다. */
  .hero__stage {
    width: calc(100% + 2 * var(--gutter));
    max-width: none;
    overflow: hidden;
    overflow: visible clip;
    padding-bottom: 72px;
    margin-bottom: -72px;
    -webkit-mask-image: linear-gradient(transparent, #000000 16px);
    mask-image: linear-gradient(transparent, #000000 16px);
  }

  /* --peek: 기기 윗변에서 입력창 윗변까지(기기 폭의 1.1176배) − 입력창 위에 남길 배경 16px. 1.1176 = 테두리 0.032 +
     (화면 높이 217.4cqw − 아래 여백 29cqw − 카드 둘과 그 사이 72.42cqw) × 0.00936(1cqw = 기기 폭의 0.936%). 기기 폭은 위
     .hero__mock .device의 --dw와 같다. 잠금화면 목업의 카드·여백을 바꾸면 이 비율도 다시 잰다. */
  .hero__mock {
    --peek: calc(min(286px, 70vw) * 1.1176 - 16px);
    margin-top: calc(var(--peek) * -1);
    transform: none;
  }

  .hero__toast {
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
  }

  .hero__note {
    margin-top: 48px;
  }
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .hero__copy {
    margin: 0;
    text-align: left;
  }

  .hero__lead {
    margin-left: 0;
  }

  .hero__actions,
  .hero__links,
  .trust {
    justify-content: flex-start;
  }

  .beta-status {
    justify-content: flex-start;
    margin-left: 0;
  }

  .hero__mock .device {
    --dw: 300px;
  }

  /* 앞 기기가 뒤 기기 화면의 왼쪽 30% 남짓(상태 막대 시각 포함)을 가린다. 960~1199px에서는 창 안에 들도록 조금 작게. */
  .hero__app {
    --dw: 220px;
    transform: translate(50%, 8%);
  }

  .hero__mock {
    transform: translateX(-24%);
  }

  .hero__toast {
    left: 0;
    transform: translateX(-18%);
  }
}

@media (min-width: 1200px) {
  .hero__app {
    --dw: 250px;
  }

  .hero__toast {
    transform: translateX(-34%);
  }
}

/* 왜 슥인가요 */
.why {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  background: var(--bg-soft);
  border-block: 1px solid var(--line);
}

.why__title {
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  text-align: center;
}

.why__list {
  display: grid;
  gap: 16px;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: 0;
  list-style: none;
}

.why__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
  padding: 22px 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}

.why__item > :not(.why__icon) {
  grid-column: 2;
}

.why__item p {
  margin-top: 6px;
}

.why__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-soft-line);
}

.why__icon .icon {
  width: 22px;
  height: 22px;
}

.why__item h3 {
  align-self: center;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
}

.why__item p {
  margin-top: 8px;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

@media (min-width: 800px) {
  .why__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .why__item {
    display: block;
    padding: 26px 24px 28px;
  }

  .why__item h3 {
    margin-top: 18px;
  }
}

/* 사용법 */
.steps {
  display: grid;
  gap: 16px;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}

.step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: 1.0625rem;
  font-weight: 800;
  box-shadow: 0 8px 18px -10px rgb(194 65 12 / 0.8);
}

.step__icon {
  color: var(--fg-subtle);
}

.step__icon .icon {
  width: 22px;
  height: 22px;
}

.step h3 {
  margin-top: 20px;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.step p {
  margin-top: 8px;
  color: var(--fg-muted);
  line-height: 1.7;
}

.step .fine {
  margin-top: 12px;
}

.how__more {
  margin-top: 28px;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

@media (min-width: 800px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

/* 기능 줄 */
.feature {
  display: grid;
  gap: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
}

.feature + .feature {
  margin-top: clamp(5rem, 3rem + 7vw, 9rem);
}

.feature__text {
  max-width: 540px;
}

.feature__text h3 {
  margin-top: 10px;
  font-size: var(--fs-h3);
  letter-spacing: -0.03em;
}

.feature__body {
  margin-top: 16px;
  color: var(--fg-muted);
  font-size: var(--fs-md);
  line-height: 1.7;
}

.feature__visual {
  min-width: 0;
}

@media (min-width: 900px) {
  .feature {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  .feature--flip {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .feature--flip .feature__visual {
    order: -1;
  }

  .feature--flip .feature__text {
    justify-self: end;
  }
}

/* 그림 판 */
.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px var(--panel-line);
}

.panel--peach {
  background: var(--panel-peach);
}

.panel--sand {
  background: var(--panel-sand);
}

.panel--rose {
  background: var(--panel-rose);
}

.panel--wall {
  background: var(--wallpaper);
  box-shadow: none;
}

@media (min-width: 900px) {
  .panel {
    min-height: 460px;
  }
}

/* 4a 입력 경로 네 칸 */
.entry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 470px;
}

.entry__tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  padding: 16px 16px 14px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
  container-type: inline-size;
}

.entry__name {
  position: relative;
  z-index: 1;
  font-size: max(0.875rem, 8cqw);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.entry__hint {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  font-size: max(0.6875rem, 5.6cqw);
  font-weight: 600;
  line-height: 1.35;
}

/* 잠금화면 버튼 칸 */
.entry__tile--lock {
  background: var(--wallpaper);
  color: #ffffff;
  box-shadow: none;
}

.entry__tile--lock :is(.entry__name, .entry__hint) {
  text-shadow: var(--wall-text-shadow);
}

.entry__lockbtns {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding: 0 4cqw 2cqw;
}

.entry__lockbtn {
  display: grid;
  place-items: center;
  width: 25cqw;
  height: 25cqw;
  border-radius: 50%;
  background: rgb(28 25 23 / 0.32);
  color: #ffffff;
}

.entry__lockbtn .icon {
  width: 11cqw;
  height: 11cqw;
  stroke-width: 2;
}

.entry__lockbtn--on {
  background: rgb(255 255 255 / 0.95);
  color: #c2410c;
  box-shadow: 0 0 0 3cqw rgb(255 255 255 / 0.25);
}

/* 제어 센터 칸 */
.entry__tile--cc {
  background: linear-gradient(160deg, #3b3532 0%, #1d1a18 100%);
  color: #ffffff;
  box-shadow: none;
}

.entry__cc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5cqw;
  margin-top: auto;
}

.entry__cc-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 9cqw;
  background: rgb(255 255 255 / 0.14);
  color: rgb(255 255 255 / 0.7);
}

.entry__cc-tile .icon {
  width: 9cqw;
  height: 9cqw;
}

.entry__cc-tile--wide {
  display: flex;
  place-items: initial;
  grid-column: 1 / -1;
  align-items: center;
  gap: 3cqw;
  aspect-ratio: auto;
  height: 24cqw;
  padding: 0 6cqw;
  border-radius: 12cqw;
  background: rgb(255 255 255 / 0.95);
  color: #c2410c;
  font-size: max(0.75rem, 7.5cqw);
  font-weight: 800;
}

.entry__cc-tile--wide .icon {
  width: 9cqw;
  height: 9cqw;
}

.entry__cc .entry__cc-tile:not(.entry__cc-tile--wide) {
  height: 24cqw;
  aspect-ratio: auto;
}

/* 동작 버튼 칸. 기기 윗변(--phone-top)은 칸 이름 아래로 내린다(좁은 화면에서 이름을 가로지르지 않게). */
.entry__tile--action {
  --phone-top: max(30cqw, 2.75rem);
  background: var(--surface);
}

.entry__phone {
  position: absolute;
  top: var(--phone-top);
  right: -40cqw;
  bottom: -40cqw;
  left: 52cqw;
  border-radius: 20cqw;
  background: linear-gradient(145deg, #4a4a50 0%, #1f1f22 30%, #151517 100%);
  box-shadow: inset 0 0 0 1.4cqw #2c2c30, var(--shadow-md);
}

.entry__phone::after {
  content: "";
  position: absolute;
  inset: 3cqw;
  border-radius: 17cqw;
  background: var(--wallpaper);
  opacity: 0.9;
}

.entry__action-btn {
  position: absolute;
  top: 14cqw;
  left: -2.6cqw;
  width: 3cqw;
  height: 13cqw;
  border-radius: 2cqw 0 0 2cqw;
  background: var(--accent-fill);
  box-shadow: 0 0 0 1.4cqw rgb(194 65 12 / 0.25), 0 0 6cqw rgb(255 122 71 / 0.75);
}

.entry__pill {
  position: absolute;
  z-index: 2;
  top: calc(var(--phone-top) + 14cqw);
  left: 7cqw;
  padding: 2.4cqw 4.6cqw;
  border-radius: 99px;
  background: var(--accent-fill);
  color: #ffffff;
  font-size: max(0.6875rem, 7cqw);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 4cqw 8cqw -4cqw rgb(194 65 12 / 0.8);
}

/* 꼬리표와 동작 버튼을 잇는 선 */
.entry__pill::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 7cqw;
  height: 0.7cqw;
  margin-top: -0.35cqw;
  background: var(--accent-fill);
}

/* Siri 칸 */
.entry__tile--siri {
  background: var(--surface);
}

.entry__mic {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 22cqw;
  height: 22cqw;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-soft-line);
}

.entry__mic .icon {
  width: 11cqw;
  height: 11cqw;
}

.entry__bubbles {
  display: grid;
  gap: 4cqw;
  justify-items: start;
  margin-top: auto;
}

.entry__bubble {
  padding: 3.6cqw 5.6cqw;
  border-radius: 9cqw 9cqw 9cqw 2.4cqw;
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: max(0.6875rem, 7.4cqw);
  font-weight: 700;
  line-height: 1.3;
}

.entry__bubble--alt {
  justify-self: end;
  border-radius: 9cqw 9cqw 2.4cqw 9cqw;
  background: var(--accent-fill);
  color: #ffffff;
  box-shadow: none;
}

/* 휴대폰: 네 칸이 좁으므로 판의 안쪽 여백과 칸 사이를 줄인다. */
@media (max-width: 479px) {
  .panel--peach {
    padding: 12px;
  }

  .entry {
    gap: 10px;
  }
}

/* 4b 시간 읽기 예시. 표가 좁으면(460px 미만) 두 칸 대신 문장 아래에 결과를 둔다(결과가 두 줄로 갈라지지 않게). */
.parse {
  margin-top: 28px;
  overflow: hidden;
  container-type: inline-size;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}

.parse__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 12px;
  padding: 12px 18px;
  background: var(--surface-soft);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.parse__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
}

.parse__row dt {
  font-weight: 700;
  line-height: 1.45;
}

.parse__row dd {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.45;
}

.parse__row dd .icon {
  width: 17px;
  height: 17px;
  margin-top: 1px;
}

@container (max-width: 459px) {
  .parse__head {
    display: none;
  }

  .parse__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* 4b 그림: 입력 중 스크린샷 + 그 입력창을 크게 본 카드. 판 아래쪽이 기기를 자른다. */
.panel--quickadd {
  min-height: 0;
  padding: clamp(28px, 4vw, 48px) 0 0;
  place-items: start center;
}

.quickadd {
  --dw: min(270px, 64vw);
  position: relative;
  margin-bottom: calc(var(--dw) * -0.36);
}

.quickadd .device {
  --dw: inherit;
}

.qa {
  position: absolute;
  z-index: 2;
  top: 45.5%;
  left: 50%;
  display: grid;
  gap: 10px;
  width: min(344px, 86vw);
  transform: translateX(-50%);
  padding: 14px;
  border-radius: 24px;
  background: rgb(255 255 255 / 0.82);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgb(255 255 255 / 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: #1c1917;
  font-size: 0.875rem;
  line-height: 1.2;
  container-type: inline-size;
}

.qa__preview {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  padding: 7px 10px 7px 9px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgb(28 25 23 / 0.12);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.qa__preview .icon {
  width: 15px;
  height: 15px;
  color: #c2410c;
  stroke-width: 2.1;
}

.qa__dim {
  color: #78716c;
}

.qa__preview .qa__clear {
  margin-left: 4px;
  color: #78716c;
}

.qa__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.qa__seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 99px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #e7e5e4;
  font-size: 0.8125rem;
  font-weight: 600;
}

.qa__seg > span {
  padding: 5px 10px;
  border-radius: 99px;
}

.qa__seg .qa__seg-on {
  background: #c2410c;
  color: #ffffff;
}

.qa__sep {
  width: 1px;
  height: 18px;
  background: #d6d3d1;
}

.qa__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 99px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #e7e5e4;
  font-size: 0.8125rem;
  font-weight: 600;
}

.qa__chip .icon {
  width: 13px;
  height: 13px;
}

.qa__field {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 6px 0 16px;
  border-radius: 23px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #e7e5e4;
  font-size: 1rem;
  font-weight: 500;
}

.qa__caret {
  width: 2px;
  height: 20px;
  margin-left: 2px;
  border-radius: 1px;
}

.qa__send {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border-radius: 50%;
  background: #c2410c;
  color: #ffffff;
}

.qa__send .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

@media (max-width: 359px) {
  .qa {
    padding: 12px;
  }

  .qa__chips {
    gap: 4px;
  }

  .qa__seg,
  .qa__chip {
    font-size: 0.75rem;
  }

  .qa__seg > span,
  .qa__chip {
    padding-inline: 8px;
  }
}

@media (prefers-color-scheme: dark) {
  .qa {
    background: rgb(28 25 23 / 0.82);
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgb(255 255 255 / 0.08);
    color: #f5f5f4;
  }

  .qa__preview,
  .qa__seg,
  .qa__chip,
  .qa__field {
    background: #2a2522;
    box-shadow: inset 0 0 0 1px #3d3633;
  }

  .qa__preview .icon {
    color: #ff7a47;
  }

  .qa__dim,
  .qa__preview .qa__clear {
    color: #a8a29e;
  }

  .qa__sep {
    background: #44403c;
  }
}

/* 4c 알림 */
.notify {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 400px;
  padding-block: 8px;
  color: #1c1917;
}

.notify__clock {
  display: grid;
  justify-items: center;
  margin-bottom: 6px;
  color: #ffffff;
  text-shadow: 0 2px 16px rgb(110 35 10 / 0.25);
}

.notify__date {
  font-size: 0.9375rem;
  font-weight: 600;
  text-shadow: var(--wall-text-shadow);
}

.notify__time {
  font-size: clamp(4rem, 3rem + 4vw, 5.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.notify__group {
  display: grid;
  gap: 8px;
}

.notify__tag {
  justify-self: start;
  padding: 3px 11px;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.92);
  color: #9a3412;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
}

.notify__tag--event {
  background: rgb(28 25 23 / 0.45);
  color: #ffffff;
}

.notif {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 22px;
  background: var(--glass);
  color: var(--glass-fg);
  box-shadow: inset 0 0 0 1px var(--glass-line), 0 10px 30px -14px rgb(60 18 4 / 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

.notif__icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.notif__body {
  display: grid;
  min-width: 0;
}

.notif__title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}

.notif__text {
  font-size: 0.875rem;
  line-height: 1.4;
}

.notif__time {
  color: var(--glass-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.notif-actions {
  display: grid;
  overflow: hidden;
  border-radius: 18px;
  background: var(--glass);
  color: var(--glass-fg);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

.notif-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 16px;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: pre;
}

.notif-action + .notif-action {
  border-top: 1px solid rgb(120 113 108 / 0.25);
}

.notif-action .icon {
  width: 18px;
  height: 18px;
}

.notify__note {
  justify-self: start;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  opacity: 0.9;
}

/* 4d 두 화면 */
.panel--duo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  min-height: 0;
  padding: clamp(28px, 4vw, 44px) 12px clamp(24px, 3vw, 36px);
  container-type: inline-size;
}

.duo__item {
  display: grid;
  justify-items: center;
  gap: 14px;
}

/* 기기 그림자와 판 그러데이션 위라 보조 색은 대비가 4.5에 못 미친다. 본문 색을 쓴다. */
.duo__item figcaption {
  color: var(--fg);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* 두 기기는 판 폭의 46%까지(최대 236px). 겹치는 건 테두리뿐이라 두 화면이 다 보인다. */
.device--duo {
  --dw: min(236px, 46cqw);
}

.duo__item--front {
  position: relative;
  z-index: 2;
}

.duo__item--back {
  margin-top: clamp(28px, 5vw, 56px);
  margin-left: calc(min(236px, 46cqw) * -0.035);
}

/* 4e 위젯 */
.feature--wide {
  display: block;
}

.feature__text--wide {
  display: grid;
  gap: 8px 56px;
  max-width: none;
}

.feature__text--wide .checks {
  margin-top: 20px;
}

@media (min-width: 900px) {
  .feature__text--wide {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .feature__text--wide .checks {
    padding-top: 6px;
  }

  .feature__text--wide .checks {
    margin-top: 0;
  }
}

.bento {
  display: grid;
  gap: 16px;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.bento__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 28px;
  background: var(--panel-sand);
  box-shadow: inset 0 0 0 1px var(--panel-line);
}

.bento__card--peach {
  background: var(--panel-peach);
}

.bento__caption {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 22px 24px 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
}

.bento__caption strong {
  color: var(--fg);
  font-size: 1.0625rem;
  font-weight: 800;
}

.device--peek {
  --dw: min(250px, 66vw);
  margin: 22px 0 calc(var(--dw) * -0.46);
}

/* 잠금화면 카드: 위쪽 설명(figcaption)은 본문 글자라 배경 위쪽을 살짝 어둡게 해 대비를 올린다. */
.bento__card--lock {
  min-height: 360px;
  background:
    linear-gradient(180deg, rgb(80 22 4 / 0.44) 0, rgb(80 22 4 / 0) 130px),
    var(--wallpaper);
  box-shadow: none;
}

.bento__card--lock .bento__caption {
  color: #ffffff;
  text-shadow: var(--wall-text-shadow);
}

.bento__card--lock .bento__caption strong {
  color: #ffffff;
}

.bento__card--lock .lockw {
  margin-block: auto;
  padding-top: 24px;
}

/* 잠금화면 위젯 목업 */
.lockw {
  display: grid;
  justify-items: center;
  width: 100%;
  padding: 34px 18px 18px;
  color: #ffffff;
  container-type: inline-size;
}

.lockw__date {
  font-size: max(0.875rem, 4.6cqw);
  font-weight: 600;
  text-shadow: var(--wall-text-shadow);
}

.lockw__time {
  font-size: min(6rem, 25cqw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 18px rgb(110 35 10 / 0.25);
}

.lockw__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.4cqw;
  width: 100%;
  margin-top: 6cqw;
}

.lockw__widget {
  display: flex;
  min-width: 0;
  min-height: 24cqw;
  padding: 2.6cqw 3.2cqw;
  border-radius: 5cqw;
  background: rgb(255 255 255 / 0.14);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.lockw__now {
  align-items: stretch;
  gap: 2cqw;
}

.lockw__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.lockw__cap {
  overflow: hidden;
  font-size: 3.4cqw;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  text-shadow: var(--wall-text-shadow);
  white-space: nowrap;
}

.lockw__title {
  font-size: 5cqw;
  font-weight: 700;
  line-height: 1.25;
}

.lockw__btns {
  display: grid;
  gap: 1.6cqw;
  align-content: center;
}

.lockw__btn {
  display: grid;
  place-items: center;
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.24);
}

.lockw__btn .icon {
  width: 4.6cqw;
  height: 4.6cqw;
  stroke-width: 2.6;
}

.lockw__list {
  flex-direction: column;
  justify-content: center;
  gap: 0.6cqw;
}

.lockw__line {
  display: flex;
  align-items: baseline;
  gap: 1.4cqw;
  min-width: 0;
  font-size: 3.7cqw;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

.lockw__line--first {
  font-size: 4.1cqw;
  font-weight: 700;
}

.lockw__tag {
  flex: none;
  font-size: 3.1cqw;
  font-weight: 700;
  opacity: 0.78;
}

.lockw__text {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
}

.lockw__more {
  flex: none;
  margin-left: auto;
  font-size: 3.1cqw;
  font-weight: 700;
  opacity: 0.78;
}

@media (min-width: 700px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento__card--lock {
    grid-column: 1 / -1;
  }

  .bento__card--lock .lockw {
    max-width: 560px;
  }
}

@media (min-width: 1000px) {
  .bento {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .bento__card--lock {
    grid-column: auto;
  }

  .device--peek {
    --dw: 236px;
  }
}

/* 900px 미만: 기능마다 제목·본문 → 그림 → 예시표·목록·덧붙임 순서로 보인다(그림 앞에 글만 길게 이어지지 않게).
   .feature__text는 display: contents로 풀어 그 자식들이 .feature의 flex 항목이 된다. */
@media (max-width: 899px) {
  .feature {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .feature__text,
  .feature__text--wide > div {
    display: contents;
  }

  .feature__visual,
  .feature .bento {
    order: 1;
    margin-top: 28px;
  }

  .feature :is(.parse, .checks, .fine) {
    order: 2;
  }

  .feature :is(.kicker, h3, .feature__body, .parse, .checks, .fine) {
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
  }
}

/* 개인정보 띠 */
.privacy-band {
  padding-block: var(--section-y);
  background: var(--band-bg);
  color: var(--band-fg);
}

.privacy-band__inner {
  display: grid;
  gap: clamp(2.5rem, 2rem + 2vw, 4rem);
  align-items: center;
}

.privacy-band__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgb(255 138 91 / 0.14);
  color: var(--band-accent);
  box-shadow: inset 0 0 0 1px rgb(255 138 91 / 0.3);
}

.privacy-band__mark .icon {
  width: 26px;
  height: 26px;
}

.privacy-band h2 {
  margin-top: 22px;
  font-size: var(--fs-h2);
  letter-spacing: -0.035em;
}

.privacy-band__text > p {
  max-width: 30em;
  margin-top: 16px;
  color: var(--band-muted);
  font-size: var(--fs-md);
  line-height: 1.7;
}

.privacy-band__text > .privacy-band__fine {
  margin-top: 14px;
  font-size: var(--fs-sm);
}

.link-more--band {
  margin-top: 14px;
  color: var(--band-fg);
}

.link-more--band .icon {
  color: var(--band-accent);
}

.link-more--band:hover .icon {
  transform: translateX(3px);
}

.privacy-band :focus-visible {
  outline-color: var(--band-accent);
}

.badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
}

.badge {
  padding: 20px 18px 20px;
  border-radius: 20px;
  background: var(--band-card);
  box-shadow: inset 0 0 0 1px var(--band-line);
}

.badge .icon {
  width: 28px;
  height: 28px;
  color: var(--band-accent);
}

.badge strong {
  display: block;
  margin-top: 16px;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.badge > span {
  display: block;
  margin-top: 4px;
  color: var(--band-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  .privacy-band {
    background:
      radial-gradient(70% 110% at 100% 0%, rgb(194 65 12 / 0.18), rgb(194 65 12 / 0) 65%),
      var(--band-bg);
    border-block: 1px solid rgb(255 255 255 / 0.07);
  }
}

@media (min-width: 900px) {
  .privacy-band__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
  }

  .badge {
    padding: 24px 22px;
  }
}

/* 자주 묻는 질문 */
.faq__layout {
  display: grid;
  gap: 28px;
}

.faq__head h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.035em;
}

.faq__contact {
  margin-top: 14px;
  color: var(--fg-muted);
  line-height: 1.7;
}

.faq__contact a {
  overflow-wrap: anywhere;
}

.faq__list {
  border-top: 1px solid var(--line);
}

.qa-item {
  border-bottom: 1px solid var(--line);
}

.qa-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 16px 2px;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}

.qa-item summary::-webkit-details-marker {
  display: none;
}

.qa-item summary::after {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    linear-gradient(var(--fg-muted), var(--fg-muted)) center / 12px 2px no-repeat,
    linear-gradient(var(--fg-muted), var(--fg-muted)) center / 2px 12px no-repeat,
    var(--surface-soft);
  transition: transform 0.2s ease, background-color 0.2s;
}

.qa-item[open] summary::after {
  transform: rotate(45deg);
}

.qa-item summary:hover {
  color: var(--accent);
}

.qa-item__answer {
  max-width: 640px;
  padding: 0 2px 26px;
  color: var(--fg-muted);
  line-height: 1.75;
}

.qa-item__answer ul {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-left: 1.2em;
}

.qa-item__answer p + p,
.qa-item__answer ul + p {
  margin-top: 10px;
}

.qa-item__more:empty {
  display: none;
}

.qa-item__answer li::marker {
  color: var(--accent);
}

.qa-item__answer a {
  overflow-wrap: anywhere;
}

@media (min-width: 900px) {
  .faq__layout {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: 72px;
    align-items: start;
  }

  .faq__head {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}

/* 마무리 */
.cta {
  padding-block: 0 var(--section-y);
}

.cta__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(1.25rem, 0.5rem + 4vw, 4rem);
  border-radius: clamp(28px, 2rem + 1vw, 40px);
  background: linear-gradient(150deg, #c2410c 0%, #a8390b 48%, #7c2d12 100%);
  color: #ffffff;
  text-align: center;
}

.cta__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% -20% auto auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(255 170 120 / 0.22), rgb(255 170 120 / 0));
}

.cta__icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 26px;
  border-radius: 23%;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.3), 0 18px 34px -14px rgb(0 0 0 / 0.55);
}

.cta__card h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.035em;
}

.cta__lead {
  max-width: 28em;
  margin: 16px auto 0;
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.cta__card .btn {
  max-width: 100%;
  margin-top: 32px;
  white-space: normal;
}

@media (max-width: 359px) {
  .cta__card {
    padding-inline: 16px;
  }

  .btn--large {
    padding-inline: 20px;
    font-size: 1rem;
  }
}

.cta__card :focus-visible {
  outline-color: #ffffff;
}

.cta__note {
  max-width: 34em;
  margin: 22px auto 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.cta__note > span {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .cta__card {
    background: linear-gradient(150deg, #a8390b 0%, #7c2d12 52%, #4a1a09 100%);
  }
}

@media (prefers-contrast: more) {
  .cta__card {
    background: #7c2d12;
  }

  .cta__card::before {
    display: none;
  }
}

/* 6. 바닥글 ---------------------------------------------------------- */

.site-footer {
  padding-block: 44px max(36px, var(--safe-bottom));
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 48px;
}

.site-footer__brand p {
  margin-top: 6px;
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg-muted);
  font-weight: 600;
  text-decoration: none;
}

.site-footer__nav a:hover {
  color: var(--fg);
  text-decoration: underline;
}

@media (max-width: 599px) {
  .site-footer__nav ul {
    flex-direction: column;
  }
}

.site-footer__mail {
  margin-left: 0.35em;
  overflow-wrap: anywhere;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
}

/* 7. 개인정보 처리방침 ------------------------------------------------ */

.policy {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--section-y);
}

.policy__layout {
  display: grid;
  gap: 32px;
}

.policy__crumb {
  color: var(--fg-subtle);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.policy__crumb a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-inline: -16px;
  padding-inline: 16px;
  color: inherit;
  text-decoration: none;
}

.policy__crumb a:hover {
  color: var(--fg);
  text-decoration: underline;
}

.policy__head h1 {
  margin-top: 10px;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  letter-spacing: -0.04em;
}

.policy__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 14px 6px 12px;
  border-radius: 99px;
  background: var(--surface-soft);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line);
}

.policy__meta .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.policy__intro {
  margin-top: 22px;
  font-size: var(--fs-md);
  line-height: 1.8;
}

.glance {
  margin-top: 28px;
  padding: 22px 22px 24px;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-soft-line);
}

.glance h2 {
  color: var(--accent);
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

.glance .checks {
  gap: 10px;
  margin-top: 14px;
}

.glance .checks li::before {
  background: var(--surface);
}

.policy__toc {
  align-self: start;
  padding: 20px 20px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

.policy__toc h2 {
  color: var(--fg-subtle);
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

.policy__toc ol {
  margin-top: 6px;
  padding: 0;
  list-style: none;
}

.policy__toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.policy__toc a:hover {
  color: var(--accent);
}

.policy__toc-num {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--surface);
  color: var(--fg-subtle);
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--line);
}

.policy__body {
  min-width: 0;
  max-width: var(--container-text);
}

.policy__section {
  padding-top: 36px;
  margin-top: 36px;
  border-top: 1px solid var(--line);
}

.policy__section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.policy__section h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.025em;
}

.policy__num {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px var(--accent-soft-line);
}

.policy__section p,
.policy__section ul {
  margin-top: 14px;
  line-height: 1.85;
}

.policy__section ul {
  display: grid;
  gap: 12px;
  padding-left: 1.25em;
}

.policy__section li::marker {
  color: var(--accent);
}

.policy__section strong {
  color: var(--fg);
}

.policy__section a,
.english a {
  overflow-wrap: anywhere;
}

.english {
  margin-top: 48px;
  padding: 26px 24px 28px;
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--line);
  word-break: normal;
}

.english h2 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.english p {
  margin-top: 12px;
  color: var(--fg-muted);
  line-height: 1.7;
}

.policy__back {
  margin-top: 40px;
}

@media (min-width: 560px) and (max-width: 999px) {
  .policy__toc ol {
    columns: 2;
    column-gap: 24px;
  }

  .policy__toc li {
    break-inside: avoid;
  }
}

/* 1000px 이상: 왼쪽 목차는 머리말 로고와, 본문 오른쪽 끝은 머리말 버튼과 같은 선에 맞춘다. */
@media (min-width: 1000px) {
  .policy__layout {
    grid-template-columns: 230px minmax(0, var(--container-text));
    grid-template-areas:
      "toc head"
      "toc body";
    justify-content: space-between;
    gap: 40px 72px;
  }

  .policy__head {
    grid-area: head;
  }

  .policy__body {
    grid-area: body;
  }

  .policy__toc {
    position: sticky;
    top: calc(var(--header-h) + 28px);
    grid-area: toc;
    padding: 0 0 0 18px;
    border-radius: 0;
    background: none;
    box-shadow: inset 2px 0 0 var(--line);
  }
}

/* 404 */
.notfound {
  padding-block: clamp(4rem, 2rem + 8vw, 8rem);
  text-align: center;
}

.notfound__code {
  color: var(--accent);
  font-size: clamp(4.5rem, 3rem + 8vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}

.notfound h1 {
  margin-top: 20px;
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  letter-spacing: -0.035em;
}

.notfound p:not(.notfound__code) {
  margin-top: 14px;
  color: var(--fg-muted);
  font-size: var(--fs-md);
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* 8. 움직임, 인쇄 ----------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* 깜빡임은 5초 안에 멈춘다(WCAG 2.2.2). 끝나면 커서가 켜진 채로 남는다. */
  .lock__caret,
  .qa__caret {
    animation: caret-blink 1.1s steps(1, end) 4;
  }
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 강제 색상(Windows 고대비): 배경이 지워져도 버튼 테두리와 FAQ 열림 표시가 보이게 */
@media (forced-colors: active) {
  .btn {
    border: 2px solid ButtonText;
  }

  .qa-item summary::after {
    content: "+";
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid CanvasText;
    color: CanvasText;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
  }

  .beta-status::before {
    background: CanvasText;
  }
}

@media print {
  .site-header,
  .skip-link,
  .policy__toc,
  .hero__visual,
  .feature__visual,
  .bento,
  .cta {
    display: none;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .privacy-band {
    background: none;
    color: inherit;
  }
}