/* ==========================================================================
   FLAWLESS base.css — 디자인 토큰 · 리셋 · 랜딩 페이지 스타일
   톤: 인트로와 같은 차콜(#0b0b0c) + 아이보리(#f3efe6) 모노톤, 샴페인(--accent) 포인트.
   ========================================================================== */

/* ---- 1. 디자인 토큰 (§1-5: intro.css 와 공유) ---------------------------- */
:root {
  --bg: #0b0b0c;
  --bg-elev: #141416;
  --bg-elev-2: #1a1a1d;
  --line: #242427;
  --line-strong: #34343a;
  --text: #f3efe6;
  --text-dim: #9a968e;
  --accent: #d8c3a0;          /* 샴페인 */
  --accent-rgb: 216, 195, 160;
  --accent-soft: rgba(216, 195, 160, .07);
  --accent-edge: rgba(216, 195, 160, .32);
  --accent-glow: rgba(216, 195, 160, .22);
  --kakao: #fee500;
  --coral: #ff5a36;           /* 선택·오류 강조 */
  --font-sans: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-display: "Archivo", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* 페이지 전용 보조 토큰 */
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 16px;

  /* 호환 alias (관리자 화면 pages.css / admin.css 가 --lime* 를 쓴다) */
  --lime: var(--accent);
  --lime-glow: var(--accent-glow);
  --lime-soft: var(--accent-soft);
  --lime-edge: var(--accent-edge);
}

/* ---- 2. 인트로 연동 (§1-3) ---------------------------------------------- */
html.intro-pending body { overflow: hidden; }
html.intro-pending #site { visibility: hidden; }
html.intro-pending body::before { content: ""; position: fixed; inset: 0; background: var(--bg); z-index: 9998; }
/* #site 밖의 헤더/스킵 링크도 인트로 동안 숨기고 포커스 대상에서 제외 */
html.intro-pending .site-header,
html.intro-pending .site-footer,
html.intro-pending .skip-link { visibility: hidden; }

/* ---- 3. 리셋 ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--bg);
  scroll-padding-top: 88px;          /* sticky 헤더에 앵커 제목이 가려지지 않도록 */
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  word-break: keep-all;              /* 한글은 어절 단위로 줄바꿈 */
  overflow-wrap: break-word;         /* 긴 영문/코드가 넘칠 때만 강제 줄바꿈 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 아주 옅은 필름 그레인 (인트로 9998/9999 보다 아래) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#site:focus, #site:focus-visible { outline: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container {
  width: min(100% - 2 * var(--gutter), 1200px);
  margin-inline: auto;
}

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* 선 아이콘 (인라인 <svg class="ico"> + 스프라이트 <use>) */
.ico { flex: none; width: 20px; height: 20px; }
.ico--lg { width: 28px; height: 28px; }

/* ---- 4. 본문 등장 애니메이션 (§3-3, CSS만) ------------------------------- */
@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.reveal { opacity: 0; transform: translateY(24px); }
html.site-ready .reveal {
  animation: reveal .9s var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0) * 80ms);
}
html.no-js .reveal { opacity: 1; transform: none; }

/* 스크롤 진입 등장: 지원 브라우저에서만 (미지원이면 처음부터 보임) */
@supports (animation-timeline: view()) {
  html.js .reveal-scroll {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

html.site-ready .site-header { animation: fade-in .8s var(--ease-out) both; }

/* ---- 5. 버튼 ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .3s, transform .25s var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(.97); }

/* 관리자 화면용 기본 버튼 */
.btn--primary {
  background: var(--accent);
  color: var(--bg);
}
.btn--primary:hover {
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* 랜딩 기본 CTA: 아이보리 바탕 + 카카오 아이콘 */
.btn--cta {
  background: var(--text);
  color: #0b0b0c;
}
.btn--cta:hover:not(:disabled) {
  background: #fff;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .75);
}
.btn--cta:disabled,
.btn--cta[aria-disabled="true"] {
  background: var(--bg-elev-2);
  border-color: var(--line-strong);
  color: var(--text-dim);
  cursor: not-allowed;
  pointer-events: none;
}

/* 카카오톡 아이콘: 노란 원 + 어두운 말풍선 */
.kakao-ico {
  flex: none;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--kakao);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23191919' d='M12 3C6.48 3 2 6.58 2 11c0 2.83 1.86 5.32 4.66 6.74L5.6 21.5l4.3-2.84c.68.1 1.38.16 2.1.16 5.52 0 10-3.58 10-8S17.52 3 12 3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 58%;
}

.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 16px; }

/* ---- 6. 헤더 ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 11, 12, .72);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(11, 11, 12, .95); }
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}
.site-header__actions { display: flex; align-items: center; gap: 8px; justify-self: end; }

.logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .32em;
  white-space: nowrap;
}
.logo__dot { display: none; }   /* 관리자 화면 마크업에 남아 있는 옛 LED 점 */

.nav__list { display: flex; gap: clamp(18px, 3.4vw, 40px); }
.nav a {
  position: relative;
  display: block;
  padding: 10px 2px;
  color: var(--text-dim);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { transform: scaleX(1); }

/* ---- 7. 공통 섹션 ------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: .7;
}

.section { padding-block: clamp(80px, 11vw, 144px); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(36px, 5.5vw, 64px);
}
.section__title {
  margin-top: 16px;
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.12;
}
.section__desc { margin-top: 14px; max-width: 38em; color: var(--text-dim); }
.section__hint { display: block; margin-top: 6px; color: var(--text); font-weight: 600; }

/* ---- 8. 첫 섹션(상품) — 히어로 없이 바로 상품부터 ------------------------ */
.section--top { padding-top: clamp(48px, 7vw, 88px); }
.section--top .section__head { margin-bottom: clamp(24px, 3.4vw, 36px); }

/* 메인 문의 버튼 (라인업 제목 옆, 크게) */
.hero-cta { display: grid; justify-items: end; gap: 12px; }
.hero-cta__btn {
  justify-content: flex-start;
  gap: 18px;
  min-width: 440px;
  min-height: 100px;
  padding: 0 34px 0 28px;
  border-radius: 22px;
  text-align: left;
  white-space: normal;
  box-shadow: 0 0 0 1px rgba(243, 239, 230, .18), 0 24px 60px -24px rgba(243, 239, 230, .38);
}
.hero-cta__btn:hover:not(:disabled) {
  box-shadow: 0 0 0 6px rgba(243, 239, 230, .08), 0 28px 64px -22px rgba(243, 239, 230, .45);
}
.hero-cta__btn .kakao-ico { width: 46px; height: 46px; }
.hero-cta__text { display: grid; gap: 6px; flex: 1; min-width: 0; line-height: 1.15; }
.hero-cta__label { font-size: clamp(21px, 2.1vw, 27px); font-weight: 800; letter-spacing: -.03em; }
.hero-cta__sub { color: #5d5a54; font-size: 13.5px; font-weight: 600; letter-spacing: 0; }
.hero-cta__arrow { font-size: 26px; font-weight: 300; transition: transform .35s var(--ease-out); }
.hero-cta__btn:hover .hero-cta__arrow { transform: translateX(5px); }
.hero-cta__note { color: var(--text-dim); font-size: 13px; letter-spacing: .01em; }
@media (max-width: 767px) {
  .hero-cta { width: 100%; justify-items: stretch; }
  .hero-cta__btn { width: 100%; min-width: 0; min-height: 84px; padding: 0 22px 0 18px; gap: 14px; }
  .hero-cta__btn .kakao-ico { width: 38px; height: 38px; }
  .hero-cta__note { text-align: center; }
}

/* ---- 9. 신뢰 배지 줄 ---------------------------------------------------- */
.trust {
  display: flex;
  margin-bottom: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elev);
}
.trust__item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 16px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.trust__item + .trust__item { border-left: 1px solid var(--line); }
.trust__item--lead { color: var(--accent); }

@media (max-width: 719px) {
  .trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__item { justify-content: flex-start; padding: 14px 14px; }
  .trust__item + .trust__item { border-left: 0; }
  .trust__item:nth-child(even) { border-left: 1px solid var(--line); }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 399px) {
  .trust__item { gap: 8px; padding-inline: 12px; font-size: 13.5px; }
}

/* ---- 10. 상품 그리드 ---------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));   /* 카드 안에 플랜 목록이 들어가므로 넓게 */
  gap: 20px;
}
.grid > li { display: flex; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, #161618, #111113);
  transition: transform .4s var(--ease-out), border-color .3s, box-shadow .4s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-edge);
  box-shadow: 0 28px 48px -26px rgba(0, 0, 0, .85);
}

/* 버전별 프로그램 화면 사진: 어두운 무대 위에 같은 정사각형 틀, 사진은 원본 비율 그대로(contain). 누르면 크게 보기 */
.card__shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: radial-gradient(120% 90% at 50% 0%, #2a2a2f 0%, #151517 70%);
  cursor: zoom-in;
  overflow: hidden;
}
.card__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .75));
  transition: transform .5s var(--ease-out);
}
.card__shot:hover img { transform: scale(1.03); }
.card__shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card__shot-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(11, 11, 12, .78);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .25s;
}
.card__shot:hover .card__shot-zoom,
.card__shot:focus-visible .card__shot-zoom { opacity: 1; }
@media (hover: none) { .card__shot-zoom { opacity: 1; } }

.shot-dialog {
  max-width: min(92vw, 640px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.shot-dialog::backdrop { background: rgba(5, 5, 6, .84); }
.shot-dialog__img {
  display: block;
  width: auto;
  max-width: min(92vw, 640px);
  height: auto;
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.shot-dialog__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
@media (max-width: 599px) { .shot-dialog__close { top: 6px; right: 6px; } }

/* ---- 1:1 문의 팝업 (notice.js) ---------------------------------------------
   <dialog> 라 top layer 에 올라가 모바일 하단 바(.cta-bar)보다 위에 보인다.
   여백은 안쪽 래퍼(.notice-dialog__inner)가 가진다 → 다이얼로그 자체를 누르면 곧 배경 클릭. */
.notice-dialog {
  width: min(92vw, 440px);
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: linear-gradient(180deg, #18181b, #111113);
  color: var(--text);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  overflow-x: hidden;
  overflow-y: auto;
}
/* 상단 샴페인 헤어라인 (좌우로 옅어진다) */
.notice-dialog::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .7), transparent);
  pointer-events: none;
}
.notice-dialog::backdrop {
  background: rgba(5, 5, 7, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.notice-dialog__inner {
  position: relative;
  padding: 36px 32px 28px;
}
@media (max-width: 599px) { .notice-dialog__inner { padding: 28px 22px 22px; } }

.notice-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.notice-dialog__close:hover { border-color: var(--accent); color: var(--text); }

.notice-dialog__title {
  margin-top: 14px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.25;
}
.notice-dialog__desc { margin-top: 10px; color: var(--text-dim); font-size: 15px; line-height: 1.6; }
.notice-dialog__hint { margin-top: 6px; color: var(--text-dim); font-size: 13px; line-height: 1.5; }

.notice-dialog__go {
  width: 100%;
  min-height: 60px;
  margin-top: 26px;
  gap: 12px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 800;
}
.notice-dialog__go .kakao-ico { width: 30px; height: 30px; }

.notice-dialog__later {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: color .2s;
}
.notice-dialog__later:hover { color: var(--text); }

@keyframes notice-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes notice-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.notice-dialog[open] { animation: notice-in .5s var(--ease-out) both; }
.notice-dialog[open]::backdrop { animation: notice-backdrop-in .5s var(--ease-out) both; }

.card__tag {
  margin-top: 0;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
}
.card__name {
  margin-top: 6px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.3;
}

/* 이용 기간(플랜) 목록: 헤어라인으로 나뉜 목록형 */
.plans { margin-top: 18px; border-top: 1px solid var(--line); }
.plans > li { display: block; }
.plans > li + li { border-top: 1px solid var(--line); }
.plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
}
.plan__main { display: grid; gap: 1px; min-width: 0; }
.plan__label { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; overflow-wrap: anywhere; }
.plan__term { color: var(--text-dim); font-size: 12.5px; line-height: 1.4; }
/* 플랜별 문의 링크: 아웃라인 알약 */
.plan__ask {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--accent-edge);
  border-radius: 999px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  transition: background-color .2s, border-color .2s, color .2s;
}
.plan__ask:hover { border-color: var(--accent); background: var(--accent); color: #0b0b0c; }

/* 카드 하단: 버튼 → 노트 (세로) */
.card__bottom {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}
.card__bottom::before {   /* 선반 라인 */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.card__cta { width: 100%; min-height: 50px; }
.card__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
}
.card__note::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- 11. 신분 보장 ------------------------------------------------------ */
.section--privacy { border-top: 1px solid var(--line); }

.priv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.priv-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 22px 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, #161618, #111113);
}
.priv-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.priv-card__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent-edge);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.priv-card__num {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--text-dim);
}
.priv-card__title { font-size: 18px; font-weight: 700; letter-spacing: -.025em; line-height: 1.35; }
.priv-card__desc { margin-top: 10px; color: var(--text-dim); font-size: 14.5px; line-height: 1.65; }

.privacy-pledge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 28px;
  margin-top: clamp(20px, 3vw, 32px);
  padding: clamp(22px, 3vw, 32px) clamp(20px, 3.4vw, 36px);
  border: 1px solid var(--accent-edge);
  border-radius: 18px;
  background: var(--accent-soft);
}
.privacy-pledge__ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--accent-edge);
  border-radius: 50%;
  color: var(--accent);
}
.privacy-pledge__title { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.035em; line-height: 1.3; }
.privacy-pledge__desc { margin-top: 8px; color: var(--text-dim); font-size: 14.5px; }

@media (max-width: 1023px) {
  .priv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .privacy-pledge { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .privacy-pledge__btn { width: 100%; }
}
@media (max-width: 599px) {
  .priv-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 12. 이용 방법 ------------------------------------------------------ */
.section--guide {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(20, 20, 22, .75));
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4.5vw, 64px);
}
.step {
  position: relative;
  padding-top: 30px;
  border-top: 1px solid var(--line-strong);
}
.step::before {
  content: "";
  position: absolute;
  top: -4px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.step__num {
  display: block;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
}
.step__title {
  margin-top: 22px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.3;
}
.step__desc { margin-top: 10px; max-width: 24em; color: var(--text-dim); }

@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; }
}

/* ---- 12-b. 다운로드 (shop.js 가 상품마다 카드 1장) ----------------------- */
.section--download { border-top: 1px solid var(--line); }

.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.dl-grid > li {
  display: flex;
  min-width: 0;
  container-type: inline-size;   /* 카드 폭이 좁으면 .dl-card 를 세로로 쌓는다(아래 @container) */
}

.dl-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, #141416, #111113);
  transition: border-color .3s;
}
.dl-card:hover { border-color: var(--accent-edge); }
.dl-card--pending:hover { border-color: var(--line); }

.dl-card__info { display: grid; gap: 8px; flex: 1 1 auto; min-width: 0; }
.dl-card__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.dl-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* 버전 배지: 와이드 디스플레이 서체 + 샴페인 테두리 알약 */
.dl-card__ver {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid var(--accent-edge);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.dl-card__date { color: var(--text-dim); font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 1.4; }

/* 다운로드 버튼: 아이보리 아웃라인 → hover 시 아이보리 채움 */
.dl-card__btn {
  flex: none;
  min-height: 48px;
  padding: 0 22px;
  border-color: rgba(243, 239, 230, .5);
  color: var(--text);
}
.dl-card__btn:hover:not(:disabled) { border-color: var(--text); background: var(--text); color: #0b0b0c; }
.dl-card__arrow {
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  transition: transform .35s var(--ease-out);
}
.dl-card__btn:hover:not(:disabled) .dl-card__arrow { transform: translateY(2px); }
/* 링크가 아직 없을 때(준비 중) */
.dl-card__btn:disabled {
  border-color: var(--line-strong);
  color: var(--text-dim);
  cursor: not-allowed;
}

/* 버튼 자리: 버튼 하나 + (링크를 만들지 못했을 때만) 작은 오류 문구 */
.dl-card__action { flex: none; display: grid; justify-items: end; gap: 8px; max-width: 100%; }
.dl-card__err { max-width: 200px; color: var(--coral); font-size: 12px; line-height: 1.4; text-align: right; }
/* 잠김: 같은 비활성 버튼에 자물쇠 아이콘(CSS 마스크, 글자색을 따른다) */
.dl-card__lock {
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

@container (max-width: 319px) {
  .dl-card { flex-direction: column; align-items: stretch; gap: 18px; }
  .dl-card__action { width: 100%; justify-items: stretch; }
  .dl-card__btn { width: 100%; }
  .dl-card__err { max-width: none; text-align: left; }
}

.dl-card--skeleton { min-height: 94px; gap: 20px; pointer-events: none; }
.dl-card--skeleton .sk--line { flex: 1 1 auto; height: 14px; }
.dl-card--skeleton .sk--btn { flex: none; width: 124px; height: 48px; }

/* 잠금 패널(그리드 위): 얇은 샴페인 테두리 박스. 잠김 = 안내 + 비밀번호 폼, 해제됨 = 상태 한 줄 + 다시 잠그기 */
.dl-lock {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(16px, 2.4vw, 24px);
  padding: clamp(18px, 2.6vw, 24px) clamp(18px, 3vw, 28px);
  border: 1px solid var(--accent-edge);
  border-radius: 18px;
  background: var(--accent-soft);
}
.dl-lock__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-width: 0; }
.dl-lock__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent-edge);
  border-radius: 12px;
  color: var(--accent);
}
.dl-lock__text, .dl-lock__status { flex: 1 1 200px; min-width: 0; }
.dl-lock__title { font-size: 18px; font-weight: 700; letter-spacing: -.025em; line-height: 1.35; }
.dl-lock__desc { margin-top: 2px; color: var(--text-dim); font-size: 14.5px; line-height: 1.55; }
.dl-lock__status { font-size: 16px; font-weight: 700; letter-spacing: -.02em; line-height: 1.45; }
.dl-lock__status:focus { outline: none; }
/* 다시 잠그기: 눈에 덜 띄는 텍스트 버튼 */
.dl-lock__relock {
  flex: none;
  min-height: 44px;
  margin-left: auto;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .2s;
}
.dl-lock__relock:hover { color: var(--text); }

.dl-lock__form { display: flex; gap: 10px; }
.dl-lock__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;            /* iOS 입력 시 자동 확대 방지 */
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}
.dl-lock__input:hover:not(:disabled) { border-color: var(--accent-edge); }
.dl-lock__input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.dl-lock__input:disabled { opacity: .6; cursor: progress; }
.dl-lock__submit { flex: none; min-width: 104px; }
.dl-lock__note { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
.dl-lock__error { color: var(--coral); font-size: 13.5px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.dl-lock__error:empty { display: none; }
@media (max-width: 479px) {
  .dl-lock__form { flex-direction: column; }
  .dl-lock__submit { width: 100%; }
}

/* 하단 안내 박스: 텍스트 + 문의 버튼 */
.dl-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: clamp(20px, 3vw, 32px);
  padding: 20px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
}
.dl-help__text { min-width: 0; color: var(--text-dim); font-size: 14.5px; line-height: 1.6; }
.dl-help__btn { flex: none; }

@media (max-width: 1023px) {
  .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .dl-help { flex-direction: column; align-items: stretch; }
  .dl-help__btn { width: 100%; }
}
@media (max-width: 599px) {
  .dl-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 13. 푸터 ----------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(40px, 5vw, 64px) clamp(36px, 4vw, 56px); }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px 48px;
}
.site-footer__brand { display: grid; gap: 10px; min-width: 0; max-width: 34em; }
.site-footer__logo {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .32em;
}
.site-footer__pledge { color: var(--text-dim); font-size: 14px; }
.site-footer__copy { color: var(--text-dim); font-size: 12.5px; }
.site-footer__contact { display: grid; justify-items: start; gap: 12px; }
.site-footer__title { color: var(--text-dim); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--accent-edge);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .2s, border-color .2s, color .2s;
}
.site-footer__link:hover { border-color: var(--accent); background: var(--accent); color: #0b0b0c; }

/* ---- 14. 반응형 --------------------------------------------------------- */
@media (max-width: 599px) {
  /* 좁은 화면: 내비·헤더 문의는 숨기고 로고만 유지 (하단 고정 바가 문의를 대신한다) */
  .site-header__inner { grid-template-columns: 1fr auto; min-height: 60px; }
  .nav { display: none; }
}

/* ---- 14-b. 동적 상품 그리드 상태 (shop.js, 설계서 §6-2) ------------------- */
[hidden] { display: none !important; }   /* display 를 지정한 컴포넌트에서도 hidden 이 항상 이긴다 */

.card__desc {
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.card__name, .card__tag { overflow-wrap: anywhere; }

/* 스켈레톤 (pages.css 의 로딩 표시도 같이 쓴다) */
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, #141416 30%, #1d1d20 50%, #141416 70%);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
.card--skeleton { gap: 12px; min-height: 340px; }
.card--skeleton .sk--thumb { width: 52px; height: 46px; }
.card--skeleton .sk--line { height: 14px; }
.card--skeleton .sk--btn { height: 44px; width: 100%; margin-top: auto; }
html.no-js .skeleton-card { display: none; }

.grid-state {
  padding: 48px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(20, 20, 22, .5);
  color: var(--text-dim);
  text-align: center;
}
.grid-state__title { color: var(--text); font-size: 18px; font-weight: 700; }
.grid-state__desc { margin-top: 6px; font-size: 14.5px; }
.grid-state .btn { margin-top: 18px; }

/* ---- 15. 모바일 하단 고정 문의 바 --------------------------------------- */
.cta-bar { display: none; }
@media (max-width: 599px) {
  .cta-bar {
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    border-radius: 14px;
    background: var(--text);
    color: #0b0b0c;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7);
  }
  .cta-bar[hidden] { display: none; }
  body { padding-bottom: 76px; }
}

/* ---- 16. 모션 최소화 ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
  html { scroll-behavior: auto; }
  .reveal, .reveal-scroll { opacity: 1 !important; transform: none !important; animation: none !important; }
  .site-header, html.site-ready .site-header { animation: none !important; }
  .card:hover { transform: none; }
  .dl-card__btn:hover:not(:disabled) .dl-card__arrow { transform: none; }
  .btn:active:not(:disabled) { transform: none; }
  .notice-dialog[open], .notice-dialog[open]::backdrop { animation: none; }
  * { transition-duration: .01ms !important; }
}