/* ==========================================================================
   PocketTime Web — 디자인 시스템
   앱(lib/core/theme)의 색·타이포·라운드 값을 그대로 옮긴 단일 스타일시트.

   - 색: AppColors (colors.dart)
   - 타이포: AppTypography (typography.dart) — Pretendard, letter-spacing -0.5px
   - 카드: 테두리·그림자 없이 surface 배경 + radius 20 (SelectionCard)
   - 버튼: pill(radius 999) + accent 배경 + 높이 56/48 (AppButton)
   ========================================================================== */

/* ── 토큰 ────────────────────────────────────────────────────────────────── */

:root {
  /* Light — AppColors */
  --bg: #ffffff;
  --surface: #f5f5f5;
  --surface-2: #ffffff;
  --border: #e7e7e7;
  --text: #1a1a1a;
  --text-secondary: #6a6a6a;
  --text-light: #a1a1a1;
  --inactive: #e7e7e7;
  --accent: #ff6427;
  --accent-surface: #fbe9e0;
  --error: #ff5252;
  --error-surface: #ffecec;
  --warning: #ffc107;
  --overlay: rgba(255, 255, 255, 0.72);
  --shadow-nav: 0 4px 24px rgba(0, 0, 0, 0.06);

  /* 모양 */
  --r-card: 20px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* 레이아웃 */
  --page: 1040px;
  --page-narrow: 760px;
  --gutter: 32px;

  /* 서체 */
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif,
    'Apple Color Emoji';
}

:root[data-theme='dark'] {
  /* Dark — AppColors dark mode */
  --bg: #0d0d0d;
  --surface: #1c1c1e;
  --surface-2: #131315;
  --border: #1f1f21;
  --text: #e0e0e0;
  --text-secondary: #aeaeb2;
  --text-light: #8e8e93;
  --inactive: #38383a;
  --accent: #ff6427;
  --accent-surface: rgba(255, 100, 39, 0.15);
  --error: #ff5252;
  --error-surface: rgba(255, 82, 82, 0.14);
  --overlay: rgba(13, 13, 13, 0.72);
  --shadow-nav: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* ── 리셋 ────────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

::selection {
  background: var(--accent-surface);
  color: var(--accent);
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--inactive);
  border-radius: var(--r-pill);
  border: 3px solid var(--bg);
}

/* ── 타이포 (AppTypography 매핑) ─────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.5px;
}

.t-display {
  /* displayLarge 38 → 반응형 */
  font-size: clamp(1.875rem, 5.5vw, 2.625rem);
  font-weight: 700;
  line-height: 1.22;
}

.t-headline {
  /* displaySmall 26 */
  font-size: clamp(1.375rem, 3.4vw, 1.625rem);
  font-weight: 600;
}

.t-title {
  /* titleLarge 24 */
  font-size: 1.5rem;
  font-weight: 600;
}

.t-title-m {
  /* titleMedium 18 */
  font-size: 1.125rem;
  font-weight: 600;
}

.t-body {
  /* bodyLarge 16 / w500 */
  font-size: 1rem;
  font-weight: 500;
}

.t-body-s {
  /* bodyMedium 14 */
  font-size: 0.875rem;
  font-weight: 400;
}

.t-label {
  /* labelSmall 12 */
  font-size: 0.75rem;
  font-weight: 400;
}

.muted {
  color: var(--text-secondary);
}

.dim {
  color: var(--text-light);
}

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

/* ── 아이콘 ──────────────────────────────────────────────────────────────── */

.ico {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.ico-sm {
  width: 20px;
  height: 20px;
}

.ico-lg {
  width: 28px;
  height: 28px;
}

/* ── 레이아웃 ────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap-narrow {
  max-width: var(--page-narrow);
}

.section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.section-tight {
  padding-top: 40px;
  padding-bottom: 40px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.center {
  text-align: center;
}

/* ── 헤더 / 네비게이션 (앱 FloatingNavBar 스타일) ────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 0;
  background: var(--overlay);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 600;
}

.nav-brand:hover {
  text-decoration: none;
}

.nav-brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
}

.nav-link:hover {
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.nav-link[aria-current='page'] {
  background: var(--accent-surface);
  color: var(--accent);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.icon-btn:hover {
  color: var(--accent);
  background: var(--accent-surface);
}

/* 모바일: 링크는 가로 스크롤로 밀어넣는다 */
@media (max-width: 720px) {
  .nav-links {
    order: 3;
    flex: 0 0 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav-links::-webkit-scrollbar {
    display: none;
  }
  .nav-inner {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .nav-toggle-slot {
    margin-left: auto;
  }
  .nav-link {
    white-space: nowrap;
  }
}

/* ── 버튼 (AppButton) ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.5px;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease, background 0.15s ease;
}

.btn:hover {
  filter: brightness(1.06);
  text-decoration: none;
}

.btn:active {
  transform: scale(0.96);
}

.btn-sm {
  height: 48px;
  padding: 0 22px;
  font-size: 1rem;
}

.btn-ghost {
  background: var(--surface);
  color: var(--text);
}

.btn-ghost:hover {
  background: var(--accent-surface);
  color: var(--accent);
  filter: none;
}

.btn-danger {
  background: var(--error);
}

.btn-block {
  width: 100%;
}

.btn[aria-disabled='true'] {
  background: var(--inactive);
  color: var(--text-secondary);
  cursor: default;
  pointer-events: none;
}

/* ── 카드 (SelectionCard) ────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 24px;
}

.card-tight {
  padding: 16px;
}

.card-outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
}

.card-accent {
  background: var(--accent-surface);
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.card p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.card p + p {
  margin-top: 10px;
}

.grid {
  display: grid;
  gap: 12px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* 카드 안 아이콘 배지 */
.badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--accent);
}

.card-accent .badge-icon,
.card-outline .badge-icon {
  background: var(--surface);
}

/* ── 칩 / 태그 ───────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--accent-surface);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.chip-neutral {
  background: var(--surface);
  color: var(--text-secondary);
}

.chip-danger {
  background: var(--error-surface);
  color: var(--error);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ── 안내 박스 ───────────────────────────────────────────────────────────── */

.note {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.card .note {
  background: var(--bg);
}

.note-icon {
  color: var(--accent);
}

.note-warn {
  background: var(--error-surface);
  color: var(--error);
}

.note-warn .note-icon {
  color: var(--error);
}

/* ── 목록 ────────────────────────────────────────────────────────────────── */

.list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.list > li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  box-shadow: inset 0 -1px 0 var(--border);
  font-size: 0.9375rem;
}

.list > li:last-child {
  box-shadow: none;
  padding-bottom: 0;
}

.list-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--accent-surface);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.list-body strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}

.list-body span {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* 링크 목록 (앱 설정 화면 느낌) */
.link-list {
  list-style: none;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
}

.link-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  box-shadow: inset 0 -1px 0 var(--border);
}

.link-list li:last-child a {
  box-shadow: none;
}

.link-list a:hover {
  background: var(--accent-surface);
  color: var(--accent);
  text-decoration: none;
}

.link-list .ico:first-child {
  color: var(--accent);
}

.link-list .spacer {
  margin-left: auto;
  color: var(--text-light);
}

/* ── 본문(법률·안내 문서) ────────────────────────────────────────────────── */

.prose p,
.prose li {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.prose > p + p {
  margin-top: 12px;
}

.prose strong {
  color: var(--text);
  font-weight: 600;
}

.prose ul,
.prose ol {
  margin: 12px 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prose ul ul,
.prose ol ul,
.prose ol ol {
  margin-top: 8px;
}

.prose ol > li::marker {
  color: var(--text-light);
  font-weight: 600;
}

.prose a {
  font-weight: 500;
}

/* ── 표 ──────────────────────────────────────────────────────────────────── */

.table-scroll {
  overflow-x: auto;
  margin-top: 16px;
}

table.data {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

table.data th {
  text-align: left;
  padding: 10px 12px;
  color: var(--text-light);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--border);
}

table.data td {
  padding: 14px 12px;
  vertical-align: top;
  color: var(--text-secondary);
  box-shadow: inset 0 -1px 0 var(--border);
}

table.data tr:last-child td {
  box-shadow: none;
}

table.data td strong {
  color: var(--text);
}

table.data small {
  display: block;
  margin-top: 2px;
  color: var(--text-light);
  font-size: 0.75rem;
}

/* ── 목차 ────────────────────────────────────────────────────────────────── */

.toc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px 16px;
  list-style: none;
}

.toc a {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.toc a:hover {
  color: var(--accent);
  text-decoration: none;
}

.toc-num {
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
  min-width: 18px;
}

/* ── 문서 섹션 헤더 ──────────────────────────────────────────────────────── */

.doc-section {
  scroll-margin-top: 100px;
}

.doc-section + .doc-section {
  margin-top: 12px;
}

.doc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.doc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.doc-head h2 {
  font-size: 1.125rem;
  font-weight: 600;
}

/* ── 히어로 ──────────────────────────────────────────────────────────────── */

.hero {
  padding-top: 56px;
  padding-bottom: 24px;
  text-align: center;
}

.hero-sub {
  margin: 16px auto 0;
  max-width: 520px;
  color: var(--text-secondary);
  font-size: 1.0625rem;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.shots {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.shots .shot {
  flex: 1 1 0;
  min-width: 0;
  max-width: 300px;
}

.shots .shot:nth-child(2) {
  flex: 1.133 1.133 0;
  max-width: 340px;
}

.shots img {
  width: 100%;
  height: auto;
}

/* 테마별 스크린샷 전환 */
:root[data-theme='dark'] .only-light {
  display: none;
}

:root:not([data-theme='dark']) .only-dark {
  display: none;
}

/* ── 기능 소개 (텍스트 + 스크린샷) ──────────────────────────────────────── */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 32px;
  overflow: hidden;
}

.feature + .feature {
  margin-top: 12px;
}

.feature:nth-child(even) .feature-media {
  order: -1;
}

.feature-media {
  background: var(--bg);
  border-radius: var(--r-md);
  overflow: hidden;
}

.feature-media img {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.feature h3 {
  font-size: 1.375rem;
  margin: 10px 0 10px;
}

.feature p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

@media (max-width: 760px) {
  .feature {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }
  .feature:nth-child(even) .feature-media {
    order: 0;
  }
}

/* ── FAQ (아코디언) ─────────────────────────────────────────────────────── */

.faq {
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
}

.faq details {
  box-shadow: inset 0 -1px 0 var(--border);
}

.faq details:last-child {
  box-shadow: none;
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  list-style: none;
}

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

.faq summary::after {
  content: '';
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--text-light);
  border-bottom: 2px solid var(--text-light);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.faq details[open] summary {
  color: var(--accent);
}

.faq .faq-body {
  padding: 0 20px 20px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.faq .faq-body p + p {
  margin-top: 10px;
}

.faq .faq-body ul {
  margin: 10px 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── 스토어 버튼 ─────────────────────────────────────────────────────────── */

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  font-weight: 500;
  text-align: left;
}

.store:hover {
  filter: brightness(1.1);
  text-decoration: none;
}

.store .store-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  opacity: 0.75;
  line-height: 1.2;
}

.store .store-name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.store[aria-disabled='true'] {
  background: var(--surface);
  color: var(--text-secondary);
  pointer-events: none;
}

/* ── 푸터 ────────────────────────────────────────────────────────────────── */

.footer {
  margin-top: 40px;
  padding: 40px 0 48px;
  box-shadow: inset 0 1px 0 var(--border);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.footer-brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-col h4 {
  margin-bottom: 10px;
  color: var(--text-light);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col a {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.footer-col a:hover {
  color: var(--accent);
  text-decoration: none;
}

.footer-meta {
  margin-top: 32px;
  color: var(--text-light);
  font-size: 0.8125rem;
}

/* ── 문서 페이지 헤더 ────────────────────────────────────────────────────── */

.page-head {
  padding: 48px 0 28px;
}

.page-head h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.125rem);
  font-weight: 700;
}

.page-head .page-sub {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 1rem;
}

.effective {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

/* ── 등장 애니메이션 (앱 StaggeredReveal / FadeInOnce) ───────────────────── */
/* JS가 실행될 때만 숨긴다. 스크립트가 막힌 환경에서는 그냥 보이게 둔다. */

.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ── 반응형 ──────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  :root {
    --gutter: 20px;
  }
  .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .hero {
    padding-top: 32px;
    padding-bottom: 16px;
  }
  .card {
    padding: 20px;
  }
  .hero-actions .btn {
    flex: 0 0 100%;
    width: 100%;
  }
  .hero-actions .store {
    flex: 0 0 auto;
    width: auto;
  }
  .shots .shot:nth-child(3) {
    display: none;
  }
  .footer-cols {
    gap: 28px;
  }
}

/* ── 인앱 브라우저 우회 모달 ─────────────────────────────────────────────── */

.iab-lock-scroll {
  overflow: hidden;
}

.iab-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: var(--gutter);
}

.iab-overlay.is-open {
  display: flex;
}

.iab-sheet {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface-2);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-nav);
  padding: 28px 24px 24px;
  text-align: center;
}

.iab-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}

.iab-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.5px;
  margin-top: 8px;
}

.iab-body {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.iab-retry {
  margin-top: 20px;
}

.iab-copy {
  margin-top: 10px;
}

.iab-copied {
  margin-top: 10px;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 500;
}

@media (min-width: 480px) {
  .iab-overlay {
    align-items: center;
  }
}

/* ── 인쇄 ────────────────────────────────────────────────────────────────── */

@media print {
  .nav,
  .footer,
  .icon-btn,
  .hero-actions {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
  .card {
    background: #fff;
    box-shadow: inset 0 0 0 1px #ddd;
    break-inside: avoid;
  }
  .faq details {
    box-shadow: none;
  }
  .faq .faq-body {
    display: block;
  }
}