/* ==========================================================================
   gini1688 landing
   근거: BRIEF.md §5 §12 / docs/design/06_디자인스펙.md / design-system/DESIGN.md
   외부 리소스 0건. 웹폰트 로드 없음. Inter 미로드(한글 글리프 부재).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, ol, li, dl, dt, dd, figure, blockquote {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* --------------------------------------------------------------------------
   2. tokens
   -------------------------------------------------------------------------- */
:root {
  /* surface */
  --canvas:        #ffffff;
  --parchment:     #f5f5f7;
  --tile-1:        #272729;
  --tile-2:        #2a2a2c;
  --black:         #000000;

  /* text */
  --ink:           #1d1d1f;
  --ink-80:        #333333;
  --ink-48:        #7a7a7a;
  --on-dark:       #ffffff;
  --muted-dark:    #cccccc;

  /* line */
  --hairline:      #e0e0e0;
  --divider:       #f0f0f0;

  /* accent — 단일 액센트. 두 번째 브랜드 색 없음 */
  --primary:       #0066cc;
  --primary-focus: #0071e3;
  --primary-dark:  #2997ff;   /* 어두운 면 전용 */

  /* radius */
  --r-sm:   8px;    /* 인라인 이미지 */
  --r-md:   11px;   /* 입력 */
  --r-lg:   18px;   /* 유틸 카드 */
  --r-pill: 9999px; /* 액션 */

  /* type stack — Inter 미로드 */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
          system-ui, sans-serif;

  /* 밴드 세로 패딩 상한. 브레이크포인트에서 이 값만 조인다 */
  --cap: 999px;
  --gutter: 24px;
}

/* --------------------------------------------------------------------------
   3. base typography — 한국어 조정치 적용 (디자인스펙 §5)
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.2px;
  color: var(--ink-80);
  background: var(--canvas);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, .lead { text-wrap: balance; }
p { text-wrap: pretty; }

/* 부품 코드와 URL에만 국소 적용 */
.part-code, .buy { word-break: break-all; }

/* 숫자 정렬 */
.num, .price, .metric-value { font-variant-numeric: tabular-nums; }

h1 {
  font-size: 56px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -1.0px;
  color: var(--ink);
}
.h-lg {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.7px;
  color: var(--ink);
}
.h-md {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.h-tag {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.3px;   /* 원 토큰 +0.231px 의 부호를 뒤집은 값 */
  color: var(--ink);
}
.lead {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.3px;
  color: var(--ink-80);
}
.kicker {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.1px;
  color: var(--primary);
}
.note, .metric-label, .fine, .map-step {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.1px;
  color: var(--ink-48);
}
.fine {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0;        /* 12px 이하 음수 자간 금지 */
}

/* 본문 강조는 굵기가 아니라 명도차 (600 금지) */
.em { color: var(--ink); }

/* --------------------------------------------------------------------------
   4. band / wrap — 색 변화 자체가 구분선. hr·border-top 없음
   -------------------------------------------------------------------------- */
.band {
  padding: min(var(--pt, 80px), var(--cap)) var(--gutter)
           min(var(--pb, 80px), var(--cap));
  background: var(--canvas);
  border-radius: 0;          /* 풀블리드 섹션 라디우스 금지 */
}
.band-p80  { --pt: 80px;  --pb: 80px; }
.band-p100 { --pt: 100px; --pb: 100px; }
.band-hero { --pt: 120px; --pb: 100px; }
.band-footer { --pt: 64px; --pb: 64px; }

.band-parchment { background: var(--parchment); }
.band-dark      { background: var(--tile-1); }
.band-dark2     { background: var(--tile-2); }

/* 어두운 면 텍스트 규칙 */
.band-dark, .band-dark2 { color: var(--muted-dark); }
.band-dark h1, .band-dark h2, .band-dark h3,
.band-dark2 h1, .band-dark2 h2, .band-dark2 h3 { color: var(--on-dark); }
.em-dark { color: var(--on-dark); }
.note-dark {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.1px;
  color: var(--muted-dark);
}
.lead-dark {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.3px;
  color: var(--muted-dark);
}

.wrap { margin: 0 auto; }
.wrap-560  { max-width: 560px; }
.wrap-780  { max-width: 780px; }
.wrap-900  { max-width: 900px; }
.wrap-980  { max-width: 980px; }
.wrap-1080 { max-width: 1080px; }
.center { text-align: center; }

/* 고정 내비 높이만큼 앵커 보정 */
[id] { scroll-margin-top: 60px; }

/* --------------------------------------------------------------------------
   5. global nav — surface-black. 순수 검정의 유일한 자리
   -------------------------------------------------------------------------- */
.gnav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 44px;
  background: var(--black);
  color: var(--on-dark);
}
.gnav-inner {
  height: 44px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.wordmark {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;    /* 라틴 대문자 트래킹. 유일한 양수 예외 */
  color: var(--on-dark);
  text-decoration: none;
}
.gnav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.gnav-links a {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--on-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 44px;              /* 라벨은 12px 이지만 터치 영역은 내비 높이 전체 */
  padding: 0 2px;
}

/* --------------------------------------------------------------------------
   6. buttons / links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;          /* 한국어 라벨이 짧아 알약이 초라해지는 것 방지 */
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.2px;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  transition: transform 90ms linear;
}
.btn-primary {
  background: var(--primary);
  color: #ffffff;
}
.btn-ghost {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-sm { min-width: 108px; min-height: 44px; padding: 10px 20px; }
.btn:active { transform: scale(0.95); }

a:focus-visible,
summary:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--primary-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}

.tlink { color: var(--primary); text-decoration: none; }
.tlink-dark { color: var(--primary-dark); text-decoration: none; }

/* --------------------------------------------------------------------------
   7. hero
   -------------------------------------------------------------------------- */
#hero .kicker { margin-bottom: 17px; }
#hero h1 { margin-bottom: 32px; }
#hero .lead { max-width: 720px; margin-bottom: 40px; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}
.microrow {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.1px;
  color: var(--ink-48);
}

/* --------------------------------------------------------------------------
   8. position — 1~2문장 선언만. 목록·표·카드 없음
   -------------------------------------------------------------------------- */
#position .h-lg { margin-bottom: 32px; }
#position p { max-width: 640px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   9. problem — 2열 대조
   -------------------------------------------------------------------------- */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  margin-top: 56px;
}
.two-col-tight { gap: 48px; margin-top: 48px; }
.col > * + * { margin-top: 17px; }
.col .h-tag { margin-bottom: 4px; }

.quote {
  background: var(--parchment);
  border-radius: var(--r-lg);
  padding: 24px;
}
.band-parchment .quote { background: var(--canvas); }
.quote > * + * { margin-top: 12px; }
.quote-sum {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.1px;
  color: var(--ink-48);
}
.qa {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px 16px;
}
.qa dt {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: -0.1px;
  color: var(--ink-48);
}
.qa dd { color: var(--ink); }

.closing {
  margin-top: 48px;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   10. map — 텍스트 4열, 이미지 없음
   -------------------------------------------------------------------------- */
.map-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  margin-top: 56px;
}
.map-grid > li > * + * { margin-top: 8px; }
.map-step {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.1px;
  color: var(--ink-48);
}
.map-price { color: var(--ink); }

/* --------------------------------------------------------------------------
   11. step blocks — 자산 확보 시 <figure>만 추가하면 2열로 전환
   -------------------------------------------------------------------------- */
.steps { margin-top: 56px; }
.step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.step:has(figure) {
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 48px;
}
.step + .step { margin-top: 80px; }
.step-body > * + * { margin-top: 17px; }

.step-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.step-no {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.6px;
  color: var(--ink-48);
}

/* --- 자산 확보 시 사용. Phase 1 에는 해당 마크업이 없다 ------------------
   <figure> 를 .step 안에 넣기만 하면 위 :has(figure) 규칙이 2열로 전환한다.
   마크업 재작성 불필요. img 에는 width/height 와 loading="lazy" 를 반드시 붙인다. */
figure { margin: 0; }
.evidence-photo {                 /* 실사진. 4:3 고정, 그림자·테두리 없음 */
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.screen-capture {                 /* 화면 캡처. 원본 비율 유지 */
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);   /* 흰 UI 가 흰 페이지에서 경계를 잃는 것만 막는다 */
}
figcaption {                      /* 무엇 / 어디 / 언제. 구두점 없이 여백으로 분리 */
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.1px;
  color: var(--ink-48);
}
.band-dark figcaption, .band-dark2 figcaption { color: var(--muted-dark); }
.product-cutout {                 /* 배경 제거 완성품 전용. case 밴드에만, 전체 2회 */
  display: block;
  max-width: 560px;
  margin: 40px auto;
  border-radius: 0;
  filter: drop-shadow(3px 5px 30px rgba(0, 0, 0, 0.22));
}

/* 사진 자리를 대신하는 수치 강조. 카드로 감싸지 않는다 */
.metric { margin-top: 32px; }
.metric-value {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.metric-label { margin-top: 4px; }
.band-dark .metric-value { color: var(--on-dark); }
.band-dark .metric-label { color: var(--muted-dark); }

.pull { margin-top: 80px; }
.pull > * + * { margin-top: 17px; }
.next { margin-top: 56px; }
.next > * + * { margin-top: 17px; }

/* --------------------------------------------------------------------------
   12. case — 페이지 무게중심
   -------------------------------------------------------------------------- */
#case .h-lg { margin-bottom: 17px; }
#case .lead-dark { margin-bottom: 56px; }

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 56px;
}
.case-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}
.case-block > * + * { margin-top: 12px; }
#case .note-dark { margin-top: 48px; }
#case .note-dark + .note-dark { margin-top: 17px; }
#case .tlink-dark { display: inline-block; margin-top: 32px; }

/* --------------------------------------------------------------------------
   13. pricing — 밝은 면에만. 그림자 없음
   -------------------------------------------------------------------------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 56px auto 0;
}
.price-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 32px;
}
.price-card > * + * { margin-top: 12px; }
.price {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.price-lead { color: var(--ink-48); font-size: 14px; letter-spacing: -0.1px; }

.plain > li { position: relative; padding-left: 14px; }
.plain > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 4px;
  height: 1px;
  background: var(--ink-48);
}
.plain > li + li { margin-top: 8px; }
.price-card .plain { margin-top: 17px; }

.price-notes { margin-top: 48px; max-width: 780px; }
.price-notes > * + * { margin-top: 17px; }

/* --------------------------------------------------------------------------
   14. scope — boundary + who. 카드·아이콘·취소선 없음
   -------------------------------------------------------------------------- */
.who { margin-top: 56px; }
.who > * + * { margin-top: 17px; }
.who .plain { margin-top: 17px; }

/* --------------------------------------------------------------------------
   15. faq — native <details>. JS 없음, 회전 애니메이션 없음
   -------------------------------------------------------------------------- */
.faq { margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--divider); }
.faq summary {
  position: relative;
  display: block;
  padding: 24px 40px 24px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.2px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  background: var(--ink);
  top: 50%;
  right: 4px;
}
.faq summary::before {          /* 가로 */
  width: 15px;
  height: 1.5px;
  margin-top: -0.75px;
}
.faq summary::after {           /* 세로. 열리면 사라진다 */
  width: 1.5px;
  height: 15px;
  right: 10.75px;
  margin-top: -7.5px;
}
.faq details[open] > summary::after { display: none; }
.faq-a {
  padding: 0 0 24px;
  max-width: 66ch;
  color: var(--ink-80);
}

/* --------------------------------------------------------------------------
   16. form 밴드 — 실제 필드는 intake_form 블록에서 주입
   -------------------------------------------------------------------------- */
#form .h-lg { margin-bottom: 17px; }
#form .lead-dark { margin-bottom: 40px; }
#form .note-dark { margin-top: 32px; }

/* --------------------------------------------------------------------------
   17. sticky bar — step1 진입부터 faq 끝까지만 떠 있는다 (JS 없음)
   -------------------------------------------------------------------------- */
.sticky-zone { position: relative; }
.stickybar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin-top: -64px;          /* 흐름 높이를 상쇄해 섹션 간 빈 띠를 만들지 않는다 */
  height: 64px;
  background: rgba(245, 245, 247, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.stickybar-inner {
  height: 64px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.stickybar-text { color: var(--ink); }

/* --------------------------------------------------------------------------
   18. footer — 상단 테두리 없음, dense-link 미사용
   -------------------------------------------------------------------------- */
.wordmark-footer { color: var(--ink); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}
.footer-links a {
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.2px;
  color: var(--ink-80);
  text-decoration: none;
}
footer .fine { margin-top: 32px; }

/* ==========================================================================
   19. 반응형 — 1440 / 1068 / 1023 / 833 / 640 / 480
   ========================================================================== */

/* 1069–1440 : 기본값 유지 */
@media (max-width: 1440px) {
  .band { --gutter: 24px; }
}

/* 1024–1068 */
@media (max-width: 1068px) {
  :root { --cap: 80px; }
  h1 { font-size: 40px; letter-spacing: -0.7px; line-height: 1.2; }
  .step:has(figure) { grid-template-columns: 320px minmax(0, 1fr); gap: 40px; }
}

/* 834–1023 : price 는 2열을 거치지 않고 1열로 직행한다 */
@media (max-width: 1023px) {
  .price-grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:has(figure) { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; }
}

/* 641–833 */
@media (max-width: 833px) {
  :root { --cap: 56px; }
  h1 { font-size: 34px; letter-spacing: -0.6px; line-height: 1.3; }
  .h-lg { font-size: 34px; letter-spacing: -0.6px; }
  .h-md { font-size: 28px; letter-spacing: -0.5px; }
  .lead { font-size: 21px; }
  .two-col { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .case-blocks { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .price-grid { max-width: 520px; }
  .step:has(figure) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .step + .step { margin-top: 56px; }
  .screen-capture { max-height: 300px; }
  .gnav-wide { display: none; }          /* 앵커 3개. 햄버거 만들지 않음 */
}

/* 481–640 */
@media (max-width: 640px) {
  :root { --cap: 48px; --gutter: 24px; }
  h1 { font-size: 30px; letter-spacing: -0.5px; }
  .h-lg { font-size: 30px; letter-spacing: -0.5px; }
  .step-no { font-size: 28px; }
  .map-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .microrow { gap: 8px 24px; }
  .cta-row .btn { width: 100%; }
  .stickybar-text { display: none; }     /* 모바일은 한 줄 CTA만 */
  .stickybar-inner { justify-content: center; padding: 12px 24px; }
  .stickybar-inner .btn { width: 100%; max-width: 420px; }
}

/* ≤480 */
@media (max-width: 480px) {
  :root { --cap: 40px; }
  h1 { font-size: 28px; letter-spacing: -0.4px; }
  .h-lg { font-size: 28px; letter-spacing: -0.4px; }
  .h-md { font-size: 24px; letter-spacing: -0.4px; }
  .lead { font-size: 19px; }
  .step-head { gap: 12px; }              /* 번호가 제목과 같은 줄에 붙는다 */
  .step-no { font-size: 24px; }
  .metric-value, .price { font-size: 30px; }
  .price-card { padding: 24px; }
  .quote { padding: 20px; }
}

/* ==========================================================================
   20. print — 다크 타일을 그대로 인쇄하지 않는다.
       print-color-adjust 를 전역에 걸지 않는다.
   ========================================================================== */
@media print {
  .gnav, .stickybar { display: none; }
  .band { padding: 24px 0; background: #ffffff; }
  .band + .band { border-top: 1px solid var(--hairline); }
  .band-dark, .band-dark2 { background: #ffffff; color: var(--ink-80); }
  .band-dark h1, .band-dark h2, .band-dark h3,
  .band-dark2 h1, .band-dark2 h2, .band-dark2 h3 { color: var(--ink); }
  .em-dark, .note-dark, .lead-dark { color: var(--ink-80); }
  .band-dark .metric-value { color: var(--ink); }
  .band-dark .metric-label { color: var(--ink-48); }
  .tlink-dark { color: var(--ink); }
  .faq details { border-bottom: 1px solid var(--hairline); }
  .faq-a { display: block; }
  .price-card, .quote, .metric { break-inside: avoid; }
}