/*
 * 리더짐·이음 웹 공통 스타일
 * 색·글자·간격·모서리·그림자는 이음 앱 토큰을 그대로 옮겼다.
 * 원본: family-ai/apps/mobile/lib/design_system/tokens/selected.tokens.json
 *       family-ai/docs/design/extensions/2026-10-14-h-system.md
 * 화면에서 새 색을 만들지 않는다. 웹에만 있는 값은 "웹 확장" 표시를 달았다.
 */

/* ---------- 토큰 ---------- */
:root {
  color-scheme: light;

  /* 색 — 의미 토큰 (FamilyColors) */
  --c-background: #FFFFFF;      /* background */
  --c-surface: #FFFFFF;         /* surface */
  --c-surface-muted: #F4F5F3;   /* surfaceMuted (well) */
  --c-text: #1D2420;            /* text (ink) */
  --c-text-secondary: #5C655F;  /* secondaryText */
  --c-icon-muted: #6B746F;      /* iconMuted */
  --c-action: #1F4D40;          /* action (forest) */
  --c-on-action: #FFFFFF;       /* onAction */
  --c-on-action-muted: #BFD6CC; /* onActionMuted (forestMist) */
  --c-subtle: #E3EDE7;          /* subtle (sage) */
  --c-warm: #FBE3D6;            /* warm (peach) */
  --c-warm-ink: #A2421F;        /* warmInk */
  --c-border: #E6E8E5;          /* border */
  --c-border-strong: #858D88;   /* borderStrong */
  --c-focus: #1F4D40;           /* focus */
  --c-error: #A63828;           /* error */
  --c-reward: #FFD66B;          /* reward (sun) — 포인트에만 */
  --c-on-reward: #2B2100;       /* onReward */
  --c-reward-soft: #FFF1C9;     /* rewardSoft */
  --c-reward-soft-ink: #7A5200; /* rewardSoftInk */
  --c-info-soft: #DDEBF6;       /* infoSoft (sky) */
  --c-info-ink: #275C80;        /* infoInk */
  --c-lilac: #ECE4F6;           /* 구성원 색 lilac */
  --c-lilac-ink: #5B3F86;
  --c-rose: #F9E1E8;            /* 구성원 색 rose */
  --c-rose-ink: #8E3550;
  /* 이음 아이콘 전용 숲색(아이콘·글자 로고에만, 공통 토큰 아님 — app-identity.md) */
  --c-mark: #28594C;

  /* 글자 (FamilyTypeScale / FamilyLineHeight) */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --fs-display: 32px;   --lh-display: 1.15;
  --fs-headline: 28px;  --lh-headline: 1.25;
  --fs-page: 20px;      --lh-title: 1.3;
  --fs-section: 18px;   --lh-section: 1.35;
  --fs-item: 16px;      --lh-item: 1.4;
  --fs-body: 16px;      --lh-body: 1.5;
  --fs-reading: 18px;
  --fs-meta: 14px;      --lh-meta: 1.45;
  --fs-caption: 12px;
  /* 웹 확장: 큰 화면 첫 화면 제목만 키운다 */
  --fs-hero: clamp(32px, 4.4vw, 52px);

  /* 간격 (FamilySpace + 기본값 u48~u128) */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px;
  --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-56: 56px; --s-64: 64px;
  --s-80: 80px; --s-96: 96px; --s-128: 128px;

  /* 모서리 (FamilyRadius) */
  --r-small: 8px; --r-input: 12px; --r-well: 16px; --r-card: 24px; --r-pill: 999px;

  /* 그림자 (FamilyElevation) */
  --shadow-card: 0 1px 2px rgba(29, 36, 32, .04), 0 4px 12px rgba(29, 36, 32, .05);
  --shadow-raised: 0 8px 24px rgba(29, 36, 32, .12);

  /* 배치 */
  --page-max: 1120px;
  --gutter: 16px;
  --target: 48px;  /* 최소 누름 영역 (FamilyLayout.minimumTarget) */
  /* 버튼 크기 세 단계 — 역할마다 하나만 쓴다 */
  --btn-lg: 52px;  /* 페이지 주 행동 (FamilyLayout.buttonHeight) */
  --btn-md: 48px;  /* 카드 안 행동 (minimumTarget) */
  --btn-sm: 40px;  /* 웹 확장: 머리·메뉴 칩. 보이는 높이만 40, 누름 영역은 ::after로 48 */
}

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

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-background);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  word-break: keep-all;          /* 한국어 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-action); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }

.wrap { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--c-action); color: var(--c-on-action); padding: 12px 16px; border-radius: var(--r-input); font-weight: 700; }
.skip:focus { top: 8px; }

/* ---------- 머리 ---------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: var(--c-background);
  border-bottom: 1px solid var(--c-border);
}
.site-head .bar { display: flex; align-items: center; gap: var(--s-16); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-8); text-decoration: none; color: var(--c-text); min-height: var(--target); }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand b { font-size: var(--fs-page); line-height: 1; letter-spacing: -0.01em; }
.brand small { display: block; font-size: var(--fs-caption); font-weight: 600; color: var(--c-text-secondary); line-height: 1.2; margin-top: 2px; }
.brand.ieum b { color: var(--c-mark); }
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-8); }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--btn-sm); padding: 0 var(--s-16);
  color: var(--c-text); text-decoration: none; font-size: var(--fs-meta); font-weight: 600; line-height: 1.3; border-radius: var(--r-pill);
}
.nav a::after, .subnav a::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.nav a:hover { background: var(--c-surface-muted); }
.nav a[aria-current="page"] { background: var(--c-subtle); color: var(--c-action); }
.nav .nav-cta { background: var(--c-subtle); color: var(--c-action); font-weight: 700; }
.subnav { display: none; }
@media (max-width: 860px) {
  .nav .nav-link { display: none; }
  .subnav {
    display: flex; gap: var(--s-8); overflow-x: auto; padding: var(--s-4) var(--gutter) var(--s-12);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a {
    position: relative; flex: none; display: inline-flex; align-items: center; min-height: var(--btn-sm); padding: 0 var(--s-16); line-height: 1.3;
    border: 1px solid var(--c-border); border-radius: var(--r-pill); text-decoration: none;
    color: var(--c-text); font-size: var(--fs-meta); font-weight: 600; background: var(--c-surface);
  }
}

/* ---------- 버튼·칩 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  min-height: var(--btn-lg); padding: 0 var(--s-24); border-radius: var(--r-pill);
  font: 700 var(--fs-body)/1.3 var(--font); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--c-action); color: var(--c-on-action); }
.btn-primary:hover { box-shadow: var(--shadow-raised); }
.btn-tonal { background: var(--c-subtle); color: var(--c-action); }
.btn-outline { background: var(--c-surface); color: var(--c-action); border-color: var(--c-action); }
.btn-on-action { background: var(--c-on-action); color: var(--c-action); }
.btn[aria-disabled="true"] { cursor: default; }
.btn[aria-disabled="true"]:hover { box-shadow: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-12); }
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row > .btn { width: 100%; }
}

.chip {
  display: inline-flex; align-items: center; gap: var(--s-4); min-height: 28px; padding: 0 var(--s-12);
  border-radius: var(--r-pill); font-size: 13px; font-weight: 700; line-height: 1.3;
  background: var(--c-subtle); color: var(--c-action);
}
.chip.info { background: var(--c-info-soft); color: var(--c-info-ink); }
.chip.warm { background: var(--c-warm); color: var(--c-warm-ink); }
.chip.reward { background: var(--c-reward-soft); color: var(--c-reward-soft-ink); }
.chip.lilac { background: var(--c-lilac); color: var(--c-lilac-ink); }
.chip.rose { background: var(--c-rose); color: var(--c-rose-ink); }
.chip.muted { background: var(--c-surface-muted); color: var(--c-text-secondary); }

/* ---------- 구역 ---------- */
.section { padding: var(--s-64) 0; }
.section + .section { border-top: 1px solid var(--c-border); }
.section.muted { background: var(--c-surface-muted); border-top: 0; }
.section.muted + .section { border-top: 0; }
@media (min-width: 960px) { .section { padding: var(--s-96) 0; } }
.eyebrow { font-size: var(--fs-meta); font-weight: 700; color: var(--c-action); letter-spacing: .02em; }
.section-title { font-size: var(--fs-headline); line-height: var(--lh-headline); margin-top: var(--s-8); letter-spacing: -0.01em; }
@media (min-width: 960px) { .section-title { font-size: var(--fs-display); line-height: var(--lh-display); } }
.section-lead { margin-top: var(--s-12); color: var(--c-text-secondary); font-size: var(--fs-body); max-width: 640px; }
@media (min-width: 960px) { .section-lead { font-size: var(--fs-reading); } }
.section-head { margin-bottom: var(--s-32); }

/* ---------- 카드 ---------- */
.card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.card-body { padding: var(--s-20); }
.card h3 { font-size: var(--fs-item); line-height: var(--lh-item); }
.card p { color: var(--c-text-secondary); font-size: var(--fs-meta); line-height: var(--lh-meta); margin-top: var(--s-8); }
.well { background: var(--c-surface-muted); border-radius: var(--r-well); }
.grid { display: grid; gap: var(--s-16); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 959px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 영웅(첫 화면) ---------- */
.hero { padding: var(--s-48) 0 var(--s-48); }
@media (min-width: 960px) { .hero { padding: var(--s-80) 0 var(--s-64); } }
.hero-grid { display: grid; gap: var(--s-32); align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-48); } .hero-ieum .hero-grid { grid-template-columns: 1fr 1fr; } }
.hero h1 { font-size: var(--fs-hero); line-height: var(--lh-display); letter-spacing: -0.02em; margin-top: var(--s-16); }
.hero h1 em { font-style: normal; color: var(--c-action); }
.hero .lead { margin-top: var(--s-16); font-size: var(--fs-body); color: var(--c-text-secondary); max-width: 560px; }
@media (min-width: 960px) { .hero .lead { font-size: var(--fs-reading); } }
.hero .btn-row { margin-top: var(--s-24); }
.hero-note { margin-top: var(--s-12); font-size: var(--fs-meta); color: var(--c-text-secondary); }

/* ---------- 리더짐 첫 화면 사진 묶음 ---------- */
.photo-trio { position: relative; aspect-ratio: 1 / .86; max-width: 540px; margin: 0 auto; width: 100%; }
.photo-trio img { position: absolute; border-radius: 50%; background: var(--c-surface-muted); box-shadow: var(--shadow-card); }
.photo-trio .p1 { width: 66%; left: 0; top: 8%; }
.photo-trio .p2 { width: 40%; right: 2%; top: 0; }
.photo-trio .p3 { width: 36%; right: 8%; bottom: 0; }
.photo-trio .badge {
  position: absolute; left: 4%; bottom: 2%; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-pill); box-shadow: var(--shadow-raised); padding: var(--s-8) var(--s-16) var(--s-8) var(--s-8);
  display: flex; align-items: center; gap: var(--s-8); font-size: var(--fs-meta); font-weight: 700;
}
@media (max-width: 639px) { .photo-trio .badge { max-width: 62%; font-size: 13px; line-height: 1.3; padding: var(--s-4) var(--s-12) var(--s-4) var(--s-4); } }
.photo-trio .badge img { position: static; width: 36px; height: 36px; box-shadow: none; background: var(--c-surface); }

/* 숫자 줄 */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-12); margin-top: var(--s-32); }
@media (min-width: 960px) { .facts { grid-template-columns: repeat(4, 1fr); margin-top: var(--s-48); } }
.fact { padding: var(--s-16) var(--s-20); border-radius: var(--r-well); background: var(--c-surface-muted); }
.fact b { display: block; font-size: var(--fs-page); line-height: var(--lh-title); }
.fact span { font-size: var(--fs-meta); color: var(--c-text-secondary); }

/* ---------- 소개 ---------- */
.split { display: grid; gap: var(--s-32); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-56); } .split.flip > :first-child { order: 2; } }
.points { list-style: none; display: grid; gap: var(--s-12); margin-top: var(--s-24); }
.points li { display: flex; gap: var(--s-12); align-items: flex-start; }
.points li::before {
  content: ""; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  background: var(--c-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%231F4D40' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.points b { display: block; }
.points span { color: var(--c-text-secondary); font-size: var(--fs-meta); }
.img-card { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--c-border); box-shadow: var(--shadow-card); background: var(--c-surface-muted); }
.img-card img { width: 100%; }

/* 교육목표 */
.goals { display: grid; gap: var(--s-12); grid-template-columns: 1fr; }
@media (min-width: 640px) { .goals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .goals { grid-template-columns: repeat(4, 1fr); } }
.goal { display: flex; gap: var(--s-12); align-items: center; padding: var(--s-12); }
.goal img { width: 84px; height: 64px; object-fit: cover; border-radius: var(--r-input); flex: none; }
.goal b { display: block; font-size: var(--fs-meta); line-height: var(--lh-item); }
.goal small { display: block; font-size: var(--fs-caption); font-weight: 600; color: var(--c-action); }

/* ---------- 프로그램 ---------- */
.prog-card .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--c-border); }
.prog-card .pics img { width: 100%; aspect-ratio: 256 / 168; object-fit: cover; }
.prog-card .chip { margin-bottom: var(--s-8); }
.mini { display: grid; gap: var(--s-12); grid-template-columns: 1fr; }
@media (min-width: 640px) { .mini { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .mini { grid-template-columns: repeat(3, 1fr); } }
.mini .card { display: flex; gap: var(--s-12); align-items: center; padding: var(--s-12); border-radius: var(--r-well); }
.mini img { width: 96px; height: 64px; object-fit: cover; border-radius: var(--r-input); flex: none; }
.mini h4 { font-size: var(--fs-meta); line-height: var(--lh-item); }
.mini p { margin-top: 2px; font-size: var(--fs-caption); line-height: 1.45; color: var(--c-text-secondary); }
.sub-title { font-size: var(--fs-section); line-height: var(--lh-section); margin: var(--s-48) 0 var(--s-16); }

/* ---------- 센터 ---------- */
.center-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-surface-muted); }
.center-card .card-body { display: grid; gap: var(--s-8); }
.center-card .card-body > .chip { justify-self: start; }
@media (max-width: 639px) {
  /* 작은 화면: 사진은 왼쪽 작은 칸, 글은 오른쪽 — 9곳을 짧게 훑도록 */
  .center-card { display: grid; grid-template-columns: 112px 1fr; align-items: start; }
  .center-card > img { width: 96px; height: 96px; aspect-ratio: auto; margin: 16px 0 0 16px; border-radius: var(--r-well); }
  .center-card .card-body { padding: 16px 16px 12px 12px; gap: 4px; }
  .center-card .actions { grid-column: 1 / -1; padding: 0 16px 16px; }
  .center-card h3 { font-size: var(--fs-item); }
}
.center-card h3 { font-size: var(--fs-section); line-height: var(--lh-section); }
.center-card address { font-style: normal; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--c-text-secondary); }
.center-card .actions { display: flex; gap: var(--s-8); padding: 0 var(--s-20) var(--s-20); }
.center-card .actions a {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8); min-height: var(--btn-md); padding: 0 var(--s-12); white-space: nowrap;
  border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-meta); text-decoration: none;
}
.center-card .call { background: var(--c-action); color: var(--c-on-action); }
.center-card .map { background: var(--c-subtle); color: var(--c-action); }
.center-card .actions svg { width: 18px; height: 18px; }
.notice {
  display: flex; gap: var(--s-12); align-items: flex-start; padding: var(--s-16) var(--s-20);
  border-radius: var(--r-well); background: var(--c-info-soft); color: var(--c-info-ink); font-size: var(--fs-meta); margin-top: var(--s-24);
}
.notice.warm { background: var(--c-warm); color: var(--c-warm-ink); }
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* ---------- 연혁·보도 ---------- */
.timeline { list-style: none; display: grid; gap: 0; border-left: 2px solid var(--c-subtle); margin-left: 8px; }
.timeline li { position: relative; padding: 0 0 var(--s-20) var(--s-24); }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-action); }
.timeline b { display: block; font-size: var(--fs-item); }
.timeline span { color: var(--c-text-secondary); font-size: var(--fs-meta); }
.press-list { list-style: none; display: grid; gap: var(--s-8); }
.press-list li { display: flex; gap: var(--s-12); align-items: baseline; padding: var(--s-12) var(--s-16); border-radius: var(--r-input); background: var(--c-surface-muted); font-size: var(--fs-meta); }
.press-list time { flex: none; font-weight: 700; color: var(--c-action); min-width: 64px; }
.scraps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-8); margin-top: var(--s-16); }
.scraps img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: var(--r-input); border: 1px solid var(--c-border); }

/* ---------- 가맹 ---------- */
.steps { list-style: none; display: grid; gap: var(--s-12); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.steps li { counter-increment: step; padding: var(--s-16); border-radius: var(--r-well); background: var(--c-surface); border: 1px solid var(--c-border); font-weight: 700; font-size: var(--fs-meta); display: flex; gap: var(--s-12); align-items: center; }
@media (min-width: 640px) { .steps li { flex-direction: column; align-items: flex-start; } }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-action); color: var(--c-on-action); font-size: 13px; flex: none; }
.table-card { margin-top: var(--s-24); }
.table-card table th, .table-card table td { padding: var(--s-12) var(--s-16); text-align: left; border-bottom: 1px solid var(--c-border); font-size: var(--fs-meta); vertical-align: top; }
.table-card table tr:last-child th, .table-card table tr:last-child td { border-bottom: 0; }
.table-card table th { width: 30%; color: var(--c-text-secondary); font-weight: 600; background: var(--c-surface-muted); }

/* ---------- 이음 띠 ---------- */
.ieum-band { background: var(--c-action); color: var(--c-on-action); border-radius: var(--r-card); padding: var(--s-32) var(--s-24); display: grid; gap: var(--s-24); align-items: center; overflow: hidden; }
@media (min-width: 960px) { .ieum-band { grid-template-columns: 1fr auto; padding: var(--s-48); } }
.ieum-band .eyebrow { color: var(--c-on-action-muted); }
.ieum-band h2 { font-size: var(--fs-headline); line-height: var(--lh-headline); margin-top: var(--s-8); }
.ieum-band p { color: var(--c-on-action-muted); margin-top: var(--s-12); max-width: 520px; }
.ieum-band .btn-row { margin-top: var(--s-24); }
.ieum-band .art { width: 200px; justify-self: center; }
@media (min-width: 960px) { .ieum-band .art { width: 260px; } }

/* ---------- 문의 ---------- */
.contact { display: grid; gap: var(--s-16); }
@media (min-width: 960px) { .contact { grid-template-columns: repeat(3, 1fr); } }
.contact .card-body b { display: block; font-size: var(--fs-section); margin-top: var(--s-4); }
.contact .card-body a { font-weight: 700; }
.contact .label { font-size: var(--fs-meta); color: var(--c-text-secondary); font-weight: 600; }

/* ---------- 꼬리 ---------- */
.site-foot { border-top: 1px solid var(--c-border); background: var(--c-surface-muted); padding: var(--s-48) 0 var(--s-56); font-size: var(--fs-meta); color: var(--c-text-secondary); }
.site-foot .cols { display: grid; gap: var(--s-24); }
@media (min-width: 960px) { .site-foot .cols { grid-template-columns: 1.4fr 1fr; } }
.site-foot strong { color: var(--c-text); font-size: var(--fs-item); }
.site-foot dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s-12); margin: var(--s-12) 0 0; }
.site-foot dt { font-weight: 600; }
.site-foot dd { margin: 0; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-16); align-content: flex-start; align-self: start; }
.site-foot nav a { color: var(--c-text); font-weight: 600; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.site-foot nav a:hover { text-decoration: underline; }
.site-foot .copy { margin-top: var(--s-24); font-size: var(--fs-caption); }

/* ---------- 이음 페이지 ---------- */
.scene { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-raised); background: var(--c-surface-muted); }
.scene img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-ieum .scene { position: relative; }
.hero-ieum h1 { font-size: clamp(32px, 3.6vw, 46px); } /* 웹 확장: 두 줄에 맞춤 */
@media (max-width: 639px) { .hero-ieum .bubble { font-size: 13px; padding: var(--s-8) var(--s-12); } .hero-ieum .bubble img { width: 24px; height: 24px; } }
.hero-ieum .bubble {
  position: absolute; left: 4%; bottom: 6%; max-width: 72%; background: var(--c-surface); color: var(--c-text);
  border-radius: 20px 20px 20px var(--s-4); padding: var(--s-8) var(--s-16); font-size: var(--fs-meta); font-weight: 600; box-shadow: var(--shadow-raised);
  display: flex; align-items: center; gap: var(--s-8);
}
.hero-ieum .bubble img { width: 32px; height: 32px; flex: none; aspect-ratio: auto; }
.mark { width: 56px; height: 56px; }
.app-tag { display: inline-flex; align-items: center; gap: var(--s-8); }
.feature { display: grid; gap: var(--s-24); align-items: center; }
.feature + .feature { margin-top: var(--s-64); }
@media (min-width: 960px) { .feature { grid-template-columns: 1.15fr .85fr; gap: var(--s-56); } .feature.flip > :first-child { order: 2; } .feature + .feature { margin-top: var(--s-96); } }
.feature .num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-action); color: var(--c-on-action); font-weight: 700; font-size: var(--fs-meta); }
.feature h3 { font-size: var(--fs-headline); line-height: var(--lh-headline); margin-top: var(--s-12); letter-spacing: -0.01em; }
.feature .desc { margin-top: var(--s-12); color: var(--c-text-secondary); }
/* 장면 두 장: 큰 장면 + 다음 장면을 오른쪽 아래에 겹쳐 이야기 순서를 보여 준다 */
.story { position: relative; padding-bottom: 22%; }
.story figure { margin: 0; position: relative; }
.story figure:first-child { width: 84%; }
.story figure + figure { position: absolute; right: 0; bottom: 0; width: 54%; }
.story img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-card); background: var(--c-surface-muted); box-shadow: var(--shadow-raised); }
.story figure + figure img { border: 4px solid var(--c-surface); border-radius: var(--r-card); }
.story figcaption {
  position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px);
  background: var(--c-surface); color: var(--c-text); border-radius: var(--r-pill);
  padding: 4px 12px; font-size: var(--fs-caption); font-weight: 600; line-height: 1.35; box-shadow: var(--shadow-card);
}
.story figure + figure figcaption { top: auto; bottom: 12px; }
@media (min-width: 960px) { .story figcaption { font-size: 13px; } }
.who { display: grid; gap: var(--s-12); margin-top: var(--s-20); }
.who .row { display: flex; gap: var(--s-12); align-items: flex-start; padding: var(--s-12) var(--s-16); border-radius: var(--r-well); background: var(--c-surface-muted); }
.who .row img { width: 44px; height: 44px; flex: none; }
.who .row b { display: block; font-size: var(--fs-meta); }
.who .row span { display: block; font-size: var(--fs-meta); color: var(--c-text-secondary); }
.summary-card { padding: var(--s-16); border-radius: var(--r-well); background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow-card); margin-top: var(--s-16); font-size: var(--fs-meta); }
.summary-card .t { font-weight: 700; display: flex; justify-content: space-between; gap: var(--s-8); }
.summary-card ul { list-style: none; display: grid; gap: var(--s-8); margin-top: var(--s-8); color: var(--c-text-secondary); }
.summary-card li b { color: var(--c-text); font-weight: 600; margin-right: var(--s-8); }
.points-tile { margin-top: var(--s-16); display: flex; align-items: center; gap: var(--s-16); padding: var(--s-16) var(--s-20); border-radius: var(--r-card); background: var(--c-reward); color: var(--c-on-reward); }
.points-tile img { width: 64px; height: 64px; }
.points-tile small { display: block; font-size: var(--fs-caption); font-weight: 600; }
.points-tile b { font-size: var(--fs-display); line-height: var(--lh-display); }
.safety { display: grid; gap: var(--s-16); }
@media (min-width: 640px) { .safety { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .safety { grid-template-columns: repeat(4, 1fr); } }
.safety .card-body h3 { margin-top: var(--s-12); }
.ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-subtle); color: var(--c-action); }
.ico svg { width: 22px; height: 22px; }
.faq { display: grid; gap: var(--s-8); max-width: 820px; }
.faq details { border: 1px solid var(--c-border); border-radius: var(--r-well); background: var(--c-surface); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-12); min-height: 56px; padding: var(--s-12) var(--s-20); font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--c-icon-muted); border-bottom: 2px solid var(--c-icon-muted); transform: rotate(45deg); flex: none; margin-top: -4px; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq details > div { padding: 0 var(--s-20) var(--s-20); color: var(--c-text-secondary); }
.get-app { text-align: center; }
.get-app .mark { width: 72px; height: 72px; margin: 0 auto; }
.get-app .btn-row { justify-content: center; margin-top: var(--s-24); }

/* ---------- 문서(약관·방침) ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: var(--s-48) var(--gutter) var(--s-80); }
.doc h1 { font-size: var(--fs-headline); line-height: var(--lh-headline); margin-top: var(--s-12); }
.doc .meta { margin-top: var(--s-8); color: var(--c-text-secondary); font-size: var(--fs-meta); }
.doc h2 { font-size: var(--fs-section); line-height: var(--lh-section); margin: var(--s-48) 0 var(--s-12); padding-top: var(--s-8); }
.doc h3 { font-size: var(--fs-item); margin: var(--s-24) 0 var(--s-8); }
.doc p, .doc li { font-size: var(--fs-body); line-height: 1.7; }
.doc p + p { margin-top: var(--s-12); }
.doc ul, .doc ol { padding-left: 1.3em; display: grid; gap: var(--s-8); margin-top: var(--s-8); }
.doc table { margin-top: var(--s-12); font-size: var(--fs-meta); }
.doc th, .doc td { border: 1px solid var(--c-border); padding: var(--s-8) var(--s-12); text-align: left; vertical-align: top; line-height: 1.55; }
.doc th { background: var(--c-surface-muted); font-weight: 700; }
.doc .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doc .table-scroll table { min-width: 560px; }
.draft-banner { border-radius: var(--r-well); background: var(--c-warm); color: var(--c-warm-ink); padding: var(--s-16) var(--s-20); font-size: var(--fs-meta); font-weight: 600; }
.draft-banner b { display: block; font-size: var(--fs-item); font-weight: 700; margin-bottom: 4px; }
.todo { background: var(--c-warm); color: var(--c-warm-ink); border-radius: 4px; padding: 0 4px; font-weight: 700; font-size: .92em; }
.toc { margin-top: var(--s-24); padding: var(--s-16) var(--s-20); border-radius: var(--r-well); background: var(--c-surface-muted); }
.toc ol { margin: var(--s-8) 0 0; font-size: var(--fs-meta); }
.toc a { color: var(--c-text); }

.center-card img.contain { object-fit: contain; background: var(--c-surface); }