@charset "utf-8";
/* ==================================================================
   갤럭시 Z8 가이드 — Apple 공식 홈페이지 스타일 디자인 시스템
   ================================================================== */

/* 웹폰트는 <head>의 preconnect + link로 로드한다 (렌더 블로킹 방지) */

/* ---------- 토큰 ---------- */
:root {
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;

  --bg: #fbfbfd;
  --bg-alt: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: rgba(0, 0, 0, 0.1);
  --line-2: rgba(0, 0, 0, 0.06);
  --blue: #0071e3;
  --blue-ink: #0066cc;
  --blue-hover: #0077ed;
  --nav-bg: rgba(251, 251, 253, 0.72);
  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-m: 0 4px 12px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.08);

  --accent: #8f6df0;
  --accent-2: #4f8ff7;

  --r-s: 12px;
  --r-m: 18px;
  --r-l: 28px;
  --w: 980px;
  --w-text: 720px;
  --nav-h: 48px;
}

html[data-tint="violet"] { --accent: #8f6df0; --accent-2: #5b8def; }
html[data-tint="green"]  { --accent: #29876a; --accent-2: #1f7f95; }
html[data-tint="pink"]   { --accent: #ef6f9c; --accent-2: #f5a55f; }
html[data-tint="neutral"]{ --accent: #5b8def; --accent-2: #8f6df0; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-alt: #101012;
    --surface: #1c1c1e;
    --surface-2: #161618;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #86868b;
    --line: rgba(255, 255, 255, 0.14);
    --line-2: rgba(255, 255, 255, 0.08);
    --blue-ink: #2997ff;
    --nav-bg: rgba(22, 22, 23, 0.72);
    --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-m: 0 18px 40px rgba(0, 0, 0, 0.6);
  }
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.02em; line-height: 1.12; }
p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
table { border-collapse: collapse; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--blue); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

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

/* ---------- 내비게이션 (Apple 글로벌 헤더) ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--bg); /* backdrop-filter 미지원/비활성 환경 폴백 — 완전 불투명 */
  border-bottom: 1px solid var(--line-2);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav {
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}
.nav__in {
  max-width: 1024px; margin: 0 auto; height: 100%;
  padding: 0 22px;
  display: flex; align-items: center; gap: 20px;
}
.nav__brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.nav__brand:hover { text-decoration: none; opacity: 0.75; }
.nav__logo {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff; letter-spacing: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.nav__menu { margin-left: auto; }
.nav__menu ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav__a { font-size: 13px; color: var(--ink); opacity: 0.86; letter-spacing: -0.01em; }
.nav__a:hover { opacity: 1; text-decoration: none; }
.nav__a.is-active { font-weight: 600; opacity: 1; }
.nav__a--ps { color: var(--blue-ink); font-weight: 600; opacity: 1; }
.nav__toggle { display: none; }

/* 홈 화면 추가 버튼 — 설치 가능할 때만 노출 (main.js) */
.nav__install {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; height: 30px; padding: 0 12px;
  border: 1px solid var(--blue); border-radius: 980px;
  background: none; color: var(--blue-ink);
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  cursor: pointer; transition: background .2s, color .2s;
}
.nav__install:hover { background: var(--blue); color: #fff; }
.nav__install[hidden] { display: none; }
.nav__install:not([hidden]) ~ .nav__menu { margin-left: 0; }

/* iOS용 설치 안내 시트 */
.a2hs {
  width: min(420px, calc(100% - 32px)); margin: auto auto max(16px, env(safe-area-inset-bottom));
  padding: 24px 22px 18px; border: 0; border-radius: var(--r-l);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-m);
}
.a2hs::backdrop { background: rgba(0, 0, 0, .4); }
.a2hs__h { margin: 0 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.a2hs ol { margin: 0 0 18px; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.a2hs__share { display: inline-block; vertical-align: -3px; }
.a2hs .btn { width: 100%; justify-content: center; border: 0; font: inherit; cursor: pointer; }

@media (max-width: 833px) {
  .nav__in { padding: 0 16px; }
  .nav__install { height: 34px; }
  .nav__install:not([hidden]) + .nav__toggle { margin-left: 4px; }
}
@media (max-width: 380px) {
  /* 좁은 화면은 아이콘만 — 글자는 스크린리더용으로 유지 */
  .nav__install { width: 34px; padding: 0; justify-content: center; }
  .nav__install span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 833px) {
  .nav__toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer; padding: 0;
  }
  .nav__toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform .3s, opacity .3s; }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    /* 전체 화면급 오버레이 메뉴라 블러 대신 완전 불투명 배경으로 고정한다.
       backdrop-filter는 @supports상 "지원"으로 보고돼도 GPU 미가속·저사양 기기에서
       실제로는 블러가 적용되지 않아 뒤 콘텐츠가 겹쳐 보이는 사례가 있어 신뢰할 수 없다. */
    background: var(--bg);
    border-bottom: 1px solid var(--line-2);
    max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.28,.11,.32,1);
  }
  .nav__menu.is-open { max-height: 60vh; overflow-y: auto; }
  .nav__menu ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 20px; }
  .nav__menu li { border-bottom: 1px solid var(--line-2); }
  .nav__a { display: block; padding: 15px 4px; font-size: 17px; }
}

/* ---------- 레이아웃 ---------- */
main { display: block; }
.crumb {
  max-width: var(--w); margin: 0 auto; padding: 14px 22px 0;
  font-size: 12px; color: var(--ink-3);
}
.crumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.crumb li + li::before { content: "›"; margin-right: 6px; color: var(--ink-3); }
.crumb a { color: var(--ink-3); }
.crumb [aria-current] { color: var(--ink-2); }

.art__body { max-width: var(--w); margin: 0 auto; padding: 0 22px 40px; }

/* ---------- 히어로 ---------- */
.hero { position: relative; overflow: hidden; text-align: center; padding: 64px 22px 40px; }
.hero__in { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.hero__eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 12px; text-transform: none;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero__eyebrow {
    color: transparent;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text;
  }
}
.hero__h {
  font-size: clamp(32px, 5.4vw, 56px);
  font-weight: 700; letter-spacing: -0.028em; line-height: 1.07;
  margin-bottom: 18px;
}
.hero__s { font-size: clamp(17px, 2.1vw, 21px); color: var(--ink-2); line-height: 1.42; max-width: 700px; margin: 0 auto 18px; }
.hero__meta { font-size: 13px; color: var(--ink-3); display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0; }
.byline { display: inline-flex; align-items: center; gap: 4px; }
.byline__a { color: var(--ink-2); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.byline__a:hover { color: var(--ink); border-bottom-color: currentColor; }
.hero__cta { margin: 26px 0 18px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero__media {
  position: relative; z-index: 1;
  width: min(980px, 100%); margin: 36px auto 0;
  border-radius: var(--r-l); overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow-m);
}
.hero__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero__glow {
  position: absolute; inset: -40% -10% auto -10%; height: 520px; z-index: 0;
  background:
    radial-gradient(45% 55% at 30% 60%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(40% 50% at 72% 40%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 70%);
  filter: blur(30px); pointer-events: none;
}
.hero--hub { padding: 92px 22px 56px; }
.hero--hub .hero__h { font-size: clamp(36px, 6.4vw, 72px); }
@media (max-width: 640px) {
  .hero--article { padding: 44px 16px 24px; }
  .hero__media { margin-top: 28px; border-radius: var(--r-m); }
}

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 12px 22px; border-radius: 980px;
  font-size: 15px; font-weight: 550; letter-spacing: -0.01em;
  transition: background .22s ease, transform .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); }
.btn--ghost { border: 1px solid var(--blue); color: var(--blue-ink); }
.btn--ghost:hover { background: var(--blue); color: #fff; }
.btn__arrow { font-size: 17px; line-height: 1; transform: translateY(-1px); }

/* ---------- 본문 타이포 ---------- */
.sec { max-width: var(--w-text); margin: 0 auto; padding: 46px 0 8px; }
.sec__h {
  font-size: clamp(24px, 3.2vw, 32px); font-weight: 650; letter-spacing: -0.022em;
  margin: 0 0 18px; padding-top: 10px; line-height: 1.18;
}
.sec h3 { font-size: 20px; font-weight: 620; margin: 32px 0 10px; }
.sec h4 { font-size: 17px; font-weight: 620; margin: 22px 0 8px; }
.sec p, .sec li { font-size: 17px; line-height: 1.65; color: var(--ink); }
.sec p { color: color-mix(in srgb, var(--ink) 92%, var(--ink-2)); }
.lede { font-size: 19px !important; color: var(--ink) !important; font-weight: 480; line-height: 1.55; }
.list li { margin-bottom: 8px; }
.list--num { counter-reset: none; }

.summary {
  max-width: var(--w-text); margin: 30px auto 0; padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
}
.summary__h { font-size: 13px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 10px; }
.summary ul { margin: 0; padding-left: 1.1em; }
.summary li { font-size: 16px; line-height: 1.6; margin-bottom: 6px; }

/* 목차 */
.toc {
  max-width: var(--w-text); margin: 26px auto 0; padding: 20px 24px;
  background: var(--surface-2); border-radius: var(--r-m);
}
.toc__h { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-bottom: 10px; letter-spacing: 0.02em; }
.toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 28px; }
.toc li { font-size: 15px; margin-bottom: 6px; break-inside: avoid; }
.toc a { color: var(--ink-2); }
.toc a:hover { color: var(--blue-ink); }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* 표 */
.tablewrap { max-width: var(--w-text); margin: 22px auto 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-m); border: 1px solid var(--line-2); background: var(--surface); }
.tbl { width: 100%; min-width: 480px; font-size: 15px; }
.tbl caption { caption-side: top; text-align: left; padding: 14px 18px 8px; font-size: 13px; color: var(--ink-3); }
.tbl th, .tbl td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; line-height: 1.5; }
.tbl thead th { background: var(--surface-2); font-weight: 600; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.tbl tbody th { font-weight: 600; white-space: nowrap; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }

/* 스펙 목록 */
.spec { max-width: var(--w-text); margin: 22px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r-m); overflow: hidden; }
.spec__i { background: var(--surface); padding: 18px 20px; }
.spec dt { font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.spec dd { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }

/* 결론 박스 */
.verdict {
  max-width: var(--w-text); margin: 22px auto; padding: 22px 24px;
  border-radius: var(--r-m); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent-2) 7%, transparent));
}
.verdict__k { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); margin: 0 0 8px; }
.verdict__v { font-size: 19px !important; font-weight: 560; line-height: 1.55; margin: 0; }

/* 콜아웃 */
.callout { max-width: var(--w-text); margin: 20px auto; padding: 16px 20px; border-radius: var(--r-s); border-left: 3px solid var(--ink-3); background: var(--surface-2); }
.callout p { margin: 0; font-size: 16px; line-height: 1.6; }
.callout--tip { border-left-color: #2f9e6f; }
.callout--warn { border-left-color: #e0770a; }
.callout--note { border-left-color: var(--accent); }

.quote { max-width: var(--w-text); margin: 24px auto; padding: 0 0 0 20px; border-left: 3px solid var(--line); }
.quote p { font-size: 19px; font-weight: 500; line-height: 1.5; }
.quote cite { font-size: 14px; color: var(--ink-3); font-style: normal; }

/* 카드 */
.cards { max-width: var(--w-text); margin: 22px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 22px; box-shadow: var(--shadow-s); }
.card__t { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 8px; }
.card__b { font-size: 15px !important; color: var(--ink-2) !important; margin: 0; line-height: 1.55; }

/* 좌우 비교 */
.compare { max-width: var(--w-text); margin: 22px auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }
.compare__c { padding: 20px 22px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line-2); }
.compare__h { font-size: 16px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 10px; }
.compare__c ul { margin: 0; padding-left: 1.1em; }
.compare__c li { font-size: 15px; margin-bottom: 6px; color: var(--ink-2); }
.compare__c--yes { border-color: color-mix(in srgb, #2f9e6f 40%, transparent); background: color-mix(in srgb, #2f9e6f 6%, var(--surface)); }
.compare__c--no { border-color: color-mix(in srgb, #d9534f 35%, transparent); background: color-mix(in srgb, #d9534f 5%, var(--surface)); }

/* 판단 플로우 */
.flow { max-width: var(--w-text); margin: 22px auto; list-style: none; padding: 0; counter-reset: f; }
.flow li { counter-increment: f; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.flow li::before { content: counter(f); width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.flow__body { min-width: 0; } /* grid item 기본 최소폭(auto) 때문에 긴 텍스트가 컬럼을 밀어내는 것 방지 */
.flow__q { display: block; font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.flow__a { display: block; font-size: 15px; color: var(--ink-2); }

/* 단계 */
.steps { max-width: var(--w-text); margin: 22px auto; list-style: none; padding: 0; counter-reset: s; }
.steps__i { counter-increment: s; position: relative; padding: 0 0 22px 46px; }
.steps__i::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 13px; font-weight: 700;
}
.steps__i::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 1px; background: var(--line-2); }
.steps__i:last-child::after { display: none; }
.steps__t { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; margin: 4px 0 6px; }
.steps__b { font-size: 16px !important; color: var(--ink-2) !important; margin: 0; }

/* 통계 */
.stats { max-width: var(--w-text); margin: 26px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 16px; text-align: center; }
.stat__n { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 4px; color: var(--accent); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .stat__n { background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.stat__l { font-size: 14px !important; color: var(--ink-3) !important; margin: 0; }

/* ---------- 폰사이소 CTA (애드센스와 명확히 구분 · 기획안 §8) ---------- */
.cta { max-width: var(--w-text); margin: 34px auto; }
.cta--block .cta__inner, .cta--banner .cta__inner {
  padding: 30px 28px; border-radius: var(--r-l); text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), color-mix(in srgb, var(--accent-2) 12%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.cta__eyebrow { font-size: 12px; font-weight: 600; color: var(--ink-3); margin: 0 0 8px; letter-spacing: 0.02em; }
.cta__title { font-size: clamp(19px, 2.6vw, 24px) !important; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 18px !important; line-height: 1.3; color: var(--ink) !important; }
.cta__note { font-size: 12px !important; color: var(--ink-3) !important; margin: 12px 0 0 !important; }
.cta--text { text-align: center; padding: 20px 0; border-top: 1px solid var(--line-2); }
.cta--text p { font-size: 16px; margin: 0; }
.ps-inline { font-weight: 600; color: var(--blue-ink); }

/* ---------- 광고 ---------- */
.ad { max-width: var(--w-text); margin: 30px auto; text-align: center; }
.ad__label { display: block; font-size: 10px; color: var(--ink-3); letter-spacing: 0.08em; margin-bottom: 6px; }
.ad__ph {
  border: 1px dashed var(--line); border-radius: var(--r-s); background: var(--surface-2);
  color: var(--ink-3); font-size: 12px; padding: 42px 12px;
}
.ad--top { margin-top: 22px; }
/* 광고가 늦게 채워지며 본문을 밀어내는 레이아웃 이동(CLS)을 막기 위해 자리를 미리 잡고, 못 채운 슬롯은 접는다 */
.ad .adsbygoogle { min-height: 250px; }
.ad:has(.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* ---------- 자매글 / 관련글 ---------- */
.sisters, .related { max-width: var(--w-text); margin: 44px auto 0; padding-top: 34px; border-top: 1px solid var(--line-2); }
.sisters__h, .related__h { font-size: 21px; margin-bottom: 8px; }
.sisters__d { font-size: 15px; color: var(--ink-2); margin-bottom: 16px; }
.sisters__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.sister { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 18px 20px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line-2); transition: transform .25s ease, box-shadow .25s ease; }
.sister:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-m); }
.sister__k { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-3); }
.sister--violet .sister__k { color: #8f6df0; }
.sister--green .sister__k { color: #29876a; }
.sister--pink .sister__k { color: #ef6f9c; }
.sister__t { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.sister__go { color: var(--ink-3); font-size: 20px; }

.related__l { list-style: none; margin: 0; padding: 0; }
.related__l li { border-bottom: 1px solid var(--line-2); }
.related__l a { display: block; padding: 16px 0; }
.related__l a:hover { text-decoration: none; }
.rel__t { display: block; font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.related__l a:hover .rel__t { color: var(--blue-ink); }
.rel__d { display: block; font-size: 14px; color: var(--ink-3); line-height: 1.5; }

/* ---------- FAQ ---------- */
.faq__l { border-top: 1px solid var(--line-2); }
.faq__i { border-bottom: 1px solid var(--line-2); }
.faq__q { cursor: pointer; padding: 18px 34px 18px 0; font-size: 17px; font-weight: 600; position: relative; list-style: none; line-height: 1.45; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: 4px; top: 15px; font-size: 22px; font-weight: 300; color: var(--ink-3); transition: transform .3s ease; }
.faq__i[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 0 20px; }
.faq__a p { font-size: 16px; color: var(--ink-2); margin: 0 0 10px; line-height: 1.65; }
.faq__a p:last-child { margin: 0; }

/* ---------- 고지 ---------- */
.disclaimer { max-width: var(--w-text); margin: 30px auto 0; padding: 16px 20px; border-radius: var(--r-s); background: var(--surface-2); }
.disclaimer p { font-size: 13px; color: var(--ink-3); margin: 0; line-height: 1.6; }

/* ---------- 허브: 타일 / 링크 그리드 / 클러스터 ---------- */
.tiles { max-width: 1100px; margin: 30px auto; padding: 0 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.tile {
  position: relative; overflow: hidden; text-align: center;
  padding: 44px 26px 0; min-height: 480px; border-radius: var(--r-l);
  background: var(--surface-2);
  display: flex; flex-direction: column;
}
.tile--violet { background: linear-gradient(180deg, #f0ecfd, #f7f5fe); }
.tile--green { background: linear-gradient(180deg, #e6f2ed, #f2f8f6); }
.tile--pink { background: linear-gradient(180deg, #fdecf2, #fef6f8); }
@media (prefers-color-scheme: dark) {
  .tile--violet { background: linear-gradient(180deg, #1a1530, #101018); }
  .tile--green { background: linear-gradient(180deg, #0f2620, #0d1614); }
  .tile--pink { background: linear-gradient(180deg, #2b141d, #180f13); }
}
.tile__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-3); margin: 0 0 10px; }
.tile__t { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.025em; margin-bottom: 10px; }
.tile__s { font-size: 16px; color: var(--ink-2); margin-bottom: 8px; line-height: 1.45; }
.tile__price { font-size: 14px; color: var(--ink-3); margin-bottom: 16px; }
.tile__cta { margin: 0 0 22px; }
.tile__art { margin-top: auto; display: grid; place-items: center; height: 200px; }
.tile__device { display: block; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.16), inset 0 0 0 2px rgba(255,255,255,.5); }
.tile__device--fold { width: 190px; height: 190px; background: linear-gradient(150deg, #6f5bd6, #a48cf5 55%, #cfc3fb); }
.tile__device--ultra { width: 200px; height: 190px; background: linear-gradient(150deg, #17624c, #2f9d7a 55%, #a8ddca); }
.tile__device--flip { width: 116px; height: 190px; background: linear-gradient(150deg, #e05a8c, #f58fb2 55%, #fbd0de); }

.linkgrid { max-width: var(--w); margin: 26px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.linkcard { display: block; padding: 24px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-s); transition: transform .25s ease, box-shadow .25s ease; }
.linkcard:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-m); }
.linkcard__t { display: block; font-size: 18px; font-weight: 620; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1.35; }
.linkcard__d { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 12px; }
.linkcard__go { font-size: 14px; color: var(--blue-ink); font-weight: 500; }

.cluster { max-width: var(--w-text); margin: 40px auto 0; }
.cluster__t { font-size: 22px; margin-bottom: 6px; }
.cluster__d { font-size: 15px; color: var(--ink-2); margin-bottom: 14px; }
.cluster__l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.cluster__l li { border-bottom: 1px solid var(--line-2); }
.cluster__l a { display: block; padding: 15px 0; }
.cluster__l a:hover { text-decoration: none; }
.cl__t { display: block; font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.cluster__l a:hover .cl__t { color: var(--blue-ink); }
.cl__d { display: block; font-size: 14px; color: var(--ink-3); line-height: 1.5; }

/* ---------- 푸터 ---------- */
.foot { background: var(--bg-alt); margin-top: 60px; border-top: 1px solid var(--line-2); }
.foot__in { max-width: var(--w); margin: 0 auto; padding: 40px 22px 34px; }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.foot__c h3 { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.foot__c ul { list-style: none; margin: 0; padding: 0; }
.foot__c li { margin-bottom: 8px; }
.foot__c a { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.foot__c a:hover { color: var(--ink); }
.foot__pub { padding-top: 20px; }
.foot__pubh { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.foot__pubdl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 6px 26px; margin: 0 0 18px; }
.foot__pubdl > div { display: flex; gap: 8px; font-size: 12px; line-height: 1.55; }
.foot__pubdl dt { flex: 0 0 82px; color: var(--ink-3); }
.foot__pubdl dd { margin: 0; color: var(--ink-2); }
.foot__pubdl a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.foot__pubdl a:hover { color: var(--ink); }
.foot__legal { padding-top: 16px; border-top: 1px solid var(--line); }
.foot__legal p { font-size: 12px; color: var(--ink-3); line-height: 1.55; margin-bottom: 8px; }
.foot__cp { margin: 0; }

/* ---------- 맨 위로 ---------- */
.totop {
  position: fixed; z-index: 90;
  right: max(18px, env(safe-area-inset-right) + 10px);
  bottom: max(18px, env(safe-area-inset-bottom) + 10px);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: var(--ink); font-size: 17px; cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.totop.is-on { opacity: 1; pointer-events: auto; transform: none; }

/* ---------- 스크롤 리빌 (Apple 특유의 등장 모션) ---------- */
.reveal, .sec, .tile, .linkcard, .sister { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal, .js .sec > *, .js .tile, .js .linkcard {
    opacity: 0; transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.28,.11,.32,1), transform .7s cubic-bezier(.28,.11,.32,1);
  }
  .js .is-in, .js .is-in > * { opacity: 1; transform: none; }
}

/* ---------- 인쇄 ---------- */
@media print {
  .nav, .ad, .cta, .totop, .foot__cols, .toc, .a2hs { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
}

/* ---------- 발행 전 확정 수치 마커 (CONTENT-TODO.md와 연동) ---------- */
.tbd {
  background: color-mix(in srgb, #ffcc00 30%, transparent);
  color: inherit; padding: 0 4px; border-radius: 4px;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, #ffcc00 60%, transparent);
}
@media (prefers-color-scheme: dark) { .tbd { background: rgba(255, 204, 0, .18); } }