/* ─────────────────────────────────────────────────────────
   우리온 — 결제 심사용 소개 페이지
   토큰은 프로토타입 landing.html 의 :root 를 그대로 따른다.
   외부 의존은 Pretendard 웹폰트(jsdelivr) 하나 — 못 불러오면 시스템 스택으로 떨어진다.
   ───────────────────────────────────────────────────────── */

:root{
  --green:#2E9E6B; --green-text:#1F7A50; --green-deep:#166B46; --green-deep-2:#0F5234;
  --green-ink:#0B3A26; --green-mint:#9FE0C2;
  --green-soft:#E7F2EA; --green-soft-2:#D9EBE0;
  --coral:#EE7A42; --coral-deep:#D9622C; --coral-soft:#FDF1E9;
  --ink:#16332C; --muted:#546B60; --line:#D9E2DA; --beige:#F2F5F2; --white:#FFFFFF;

  --surface:var(--white); --text:var(--ink); --text-muted:var(--muted); --border:var(--line);
  --text-on-dark:#FFFFFF; --text-on-dark-muted:rgba(255,255,255,.74);
  --brand:var(--green-deep);

  --font-sans:'Pretendard','Noto Sans KR',system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:16px; --fs-lg:18px;
  --fs-xl:21px; --fs-2xl:26px; --fs-3xl:32px; --fs-4xl:42px;
  --fw-regular:500; --fw-medium:600; --fw-bold:700; --fw-extrabold:800;
  --lh-tight:1.22; --lh-base:1.6; --tracking-tight:-.02em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  --radius-sm:6px; --radius:10px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 4px 14px rgba(22,51,44,.07);
  --shadow:0 18px 40px rgba(22,51,44,.10);
  --wrap:1080px;
  --header-h:60px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + var(--space-4)); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  font-weight:var(--fw-regular);
  line-height:var(--lh-base);
  color:var(--text);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:anywhere;
}

h1,h2,h3{ margin:0; line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; }
li{ list-style:none; }
strong{ font-weight:var(--fw-bold); }

.wrap{ width:min(100% - var(--space-8), var(--wrap)); margin-inline:auto; }

.skip{
  position:absolute; left:var(--space-4); top:calc(var(--space-2) * -8);
  z-index:100; padding:var(--space-2) var(--space-4);
  background:var(--brand); color:var(--text-on-dark);
  border-radius:var(--radius-sm); text-decoration:none;
  transition:top .15s;
}
.skip:focus{ top:var(--space-2); }

/* ── 헤더 ─────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:20;
  height:var(--header-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; gap:var(--space-6); height:var(--header-h); }

.brand{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-lg); font-weight:var(--fw-extrabold);
  color:var(--brand); text-decoration:none; white-space:nowrap;
}
/* 로고 — 랜딩과 같은 PNG (qa-1-B-9) */
.logo{ height:28px; width:auto; display:block; }

.site-nav{ display:flex; gap:var(--space-1); overflow-x:auto; scrollbar-width:none; }
.site-nav::-webkit-scrollbar{ display:none; }
.site-nav a{
  padding:var(--space-2) var(--space-3);
  font-size:var(--fs-sm); font-weight:var(--fw-medium);
  color:var(--text-muted); text-decoration:none;
  border-radius:var(--radius-pill); white-space:nowrap;
}
.site-nav a:hover{ color:var(--brand); background:var(--green-soft); }
.site-nav a.is-current{ color:var(--brand); background:var(--green-soft); }

/* ── Hero ─────────────────────────────────────────────── */
.hero{
  padding-block:var(--space-20);
  background:linear-gradient(170deg, var(--green-soft) 0%, var(--white) 70%);
}
.eyebrow{
  display:inline-block; margin-bottom:var(--space-4);
  padding:var(--space-1) var(--space-3);
  font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.02em;
  color:var(--green-text); background:var(--white);
  border:1px solid var(--green-soft-2); border-radius:var(--radius-pill);
}
.hero h1{ font-size:var(--fs-4xl); font-weight:var(--fw-extrabold); color:var(--green-ink); }
.accent{ color:var(--green); }
.lede{ max-width:56ch; margin-top:var(--space-5); font-size:var(--fs-lg); color:var(--text-muted); }

/* ── 섹션 공통 ────────────────────────────────────────── */
.section{ padding-block:var(--space-20); border-top:1px solid var(--border); }
.section--tint{ background:var(--beige); }
.section h2{ font-size:var(--fs-3xl); font-weight:var(--fw-extrabold); color:var(--green-ink); }
.section-lede{ max-width:60ch; margin-top:var(--space-3); color:var(--text-muted); }

.grid{ display:grid; gap:var(--space-4); margin-top:var(--space-10); }
.cards{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.plans{ grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }

.card{
  padding:var(--space-6);
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.card h3{ font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--green-text); }
.card p{ margin-top:var(--space-3); font-size:var(--fs-sm); color:var(--text-muted); }

/* ── 요금제 ───────────────────────────────────────────── */
.plan{
  display:flex; flex-direction:column;
  padding:var(--space-6);
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.plan-name{ font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--green-text); }
.plan-price{ margin-top:var(--space-3); color:var(--green-ink); }
.plan-price .amount{ font-size:var(--fs-2xl); font-weight:var(--fw-extrabold); letter-spacing:var(--tracking-tight); }
.plan-price .unit{ margin-left:var(--space-1); font-size:var(--fs-sm); color:var(--text-muted); }
.plan-spec{ margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--border); }
.plan-spec li{ font-size:var(--fs-sm); color:var(--text-muted); }
.plan-spec li + li{ margin-top:var(--space-2); }
.plan-spec strong{ color:var(--text); }
.plan-spec--rows li{ display:flex; justify-content:space-between; gap:var(--space-3); }
.plan-cta{ margin-top:auto; }
.plan-spec--rows{ margin-bottom:var(--space-6); }

/* ── 버튼 ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:var(--space-2) var(--space-5);
  font:inherit; font-size:var(--fs-base); font-weight:var(--fw-bold);
  text-decoration:none; border:1px solid transparent; border-radius:var(--radius-pill);
  cursor:pointer;
}
.btn-primary{ color:var(--text-on-dark); background:var(--green); }
.btn-primary:hover{ background:var(--green-deep); }
.btn-primary:disabled{ opacity:.6; cursor:progress; }
.btn:focus-visible{ outline:3px solid var(--green-mint); outline-offset:2px; }
.btn-block{ width:100%; }

/* ── 상품 상세 ────────────────────────────────────────── */
.product{ border-top:0; padding-block:var(--space-12) var(--space-20); }
.product h1,.result h1{ font-size:var(--fs-3xl); font-weight:var(--fw-extrabold); color:var(--green-ink); }
.crumbs{ margin-bottom:var(--space-8); font-size:var(--fs-sm); color:var(--text-muted); }
.crumbs a{ color:var(--green-text); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }

.product-grid{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--space-12); align-items:start; }
.section .product-h2{ margin-top:var(--space-10); font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--green-ink); }

.checklist{ margin-top:var(--space-4); }
.checklist li{ position:relative; padding-left:var(--space-6); font-size:var(--fs-sm); color:var(--text-muted); }
.checklist li + li{ margin-top:var(--space-3); }
.checklist li::before{
  content:''; position:absolute; left:2px; top:.45em;
  width:10px; height:6px; border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}
.checklist strong{ color:var(--text); }

.spec-table{ margin-top:var(--space-4); border-top:1px solid var(--border); }
.spec-table > div{ display:grid; grid-template-columns:120px 1fr; gap:var(--space-4); padding-block:var(--space-3); border-bottom:1px solid var(--border); font-size:var(--fs-sm); }
.spec-table dt{ font-weight:var(--fw-bold); color:var(--green-text); }
.spec-table dd{ margin:0; color:var(--text-muted); }
.spec-table a{ color:var(--green-text); }

.buybox{
  position:sticky; top:calc(var(--header-h) + var(--space-6));
  padding:var(--space-6);
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
}
.choice{ margin:0 0 var(--space-6); padding:0; border:0; min-width:0; }
.choice legend{ margin-bottom:var(--space-3); padding:0; font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--green-ink); }
.choice-list{ display:grid; gap:var(--space-2); }
.choice-list--row{ grid-template-columns:1fr 1fr; }
.choice-item{ position:relative; display:block; cursor:pointer; }
.choice-item input{ position:absolute; opacity:0; }
.choice-body{
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  font-size:var(--fs-sm); color:var(--text-muted);
  border:1px solid var(--border); border-radius:var(--radius);
}
.choice-body strong{ color:var(--text); }
.choice-item:hover .choice-body{ border-color:var(--green-soft-2); background:var(--green-soft); }
.choice-item input:checked + .choice-body{ border-color:var(--green); background:var(--green-soft); color:var(--green-ink); box-shadow:inset 0 0 0 1px var(--green); }
.choice-item input:focus-visible + .choice-body{ outline:3px solid var(--green-mint); outline-offset:2px; }
.badge{ white-space:nowrap; margin-left:var(--space-1); padding:1px var(--space-2); font-size:var(--fs-2xs); font-style:normal; font-weight:var(--fw-bold); color:var(--coral-deep); background:var(--coral-soft); border-radius:var(--radius-pill); }

.summary{ margin-bottom:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--border); }
.summary > div{ display:flex; justify-content:space-between; padding-block:var(--space-1); font-size:var(--fs-sm); color:var(--text-muted); }
.summary dd{ margin:0; color:var(--text); }
.summary .summary-total{ margin-top:var(--space-2); padding-top:var(--space-3); border-top:1px dashed var(--border); }
.summary-total dt{ font-weight:var(--fw-bold); color:var(--green-ink); }
.summary-total dd{ font-size:var(--fs-xl); font-weight:var(--fw-extrabold); color:var(--green-ink); }

.form-error{ margin-top:var(--space-3); font-size:var(--fs-sm); color:var(--coral-deep); }

/* ── 결제 결과 ────────────────────────────────────────── */
.result{ border-top:0; }
.result-table{ max-width:520px; margin-top:var(--space-8); }
.result-actions{ margin-top:var(--space-8); }

/* ── 정의 목록 ────────────────────────────────────────── */
.deflist{ margin-top:var(--space-10); border-top:1px solid var(--border); }
.deflist-row{
  display:grid; grid-template-columns:180px 1fr; gap:var(--space-6);
  padding-block:var(--space-5); border-bottom:1px solid var(--border);
}
.deflist dt{ font-weight:var(--fw-bold); color:var(--green-text); }
.deflist dd{ margin:0; color:var(--text-muted); }

/* ── 단계 ─────────────────────────────────────────────── */
.steps{ margin-top:var(--space-10); counter-reset:step; }
.steps li{
  position:relative; counter-increment:step;
  padding-left:var(--space-12); padding-block:var(--space-4);
}
.steps li + li{ border-top:1px solid var(--border); }
.steps li::before{
  content:counter(step);
  position:absolute; left:0; top:var(--space-4);
  display:grid; place-items:center;
  width:28px; height:28px;
  font-size:var(--fs-sm); font-weight:var(--fw-bold);
  color:var(--white); background:var(--green); border-radius:50%;
}
.steps h3{ font-size:var(--fs-md); font-weight:var(--fw-bold); }
.steps p{ margin-top:var(--space-2); font-size:var(--fs-sm); color:var(--text-muted); }

/* ── 안내 상자 ────────────────────────────────────────── */
.notice{
  margin-top:var(--space-8); padding:var(--space-4) var(--space-5);
  font-size:var(--fs-sm); color:var(--text-muted);
  background:var(--green-soft); border-left:3px solid var(--green);
  border-radius:var(--radius-sm);
}
.notice strong{ color:var(--green-ink); }
.notice--warn{ background:var(--coral-soft); border-left-color:var(--coral); }
.notice--warn strong{ color:var(--coral-deep); }

.fineprint{ margin-top:var(--space-6); font-size:var(--fs-xs); color:var(--text-muted); }

/* ── 아코디언 ─────────────────────────────────────────── */
.accordion{ margin-top:var(--space-8); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.acc-item + .acc-item{ border-top:1px solid var(--border); }
.acc-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-5) var(--space-6);
  font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--green-ink);
  cursor:pointer; list-style:none; background:var(--white);
}
.acc-item summary::-webkit-details-marker{ display:none; }
.acc-item summary::after{
  content:''; flex:none;
  width:9px; height:9px; margin-right:var(--space-1);
  border-right:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(45deg) translateY(-2px); transition:transform .18s;
}
.acc-item[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.acc-item summary:hover{ background:var(--green-soft); }
.acc-body{ padding:0 var(--space-6) var(--space-5); font-size:var(--fs-sm); color:var(--text-muted); }
.acc-body p + p{ margin-top:var(--space-3); }

/* ── 푸터 ─────────────────────────────────────────────── */
/* 푸터 — 랜딩과 같은 밝은 회색 (qa-1-B-9) */
.site-footer{ padding-block:var(--space-16); color:var(--text-muted); background:#E9ECEA; }
.footer-title{ font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--text); }

.bizinfo{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap:var(--space-3) var(--space-8); margin-top:var(--space-8);
}
.bizinfo > div{ display:flex; gap:var(--space-3); padding-block:var(--space-2); border-bottom:1px solid rgba(22,51,44,.12); }
.bizinfo dt{ flex:none; width:130px; font-size:var(--fs-sm); color:var(--text-muted); }
.bizinfo dd{ margin:0; font-size:var(--fs-sm); color:var(--text); }

.copyright{ margin-top:var(--space-10); font-size:var(--fs-xs); color:var(--text-muted); }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width:720px){
  :root{ --fs-4xl:30px; --fs-3xl:24px; }
  .header-inner{ gap:var(--space-3); }
  .site-nav{
    flex:1; min-width:0; padding-right:var(--space-6);
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - var(--space-6)), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - var(--space-6)), transparent);
  }
  .hero,.section{ padding-block:var(--space-12); }
  .deflist-row{ grid-template-columns:1fr; gap:var(--space-2); }
}
@media (max-width:900px){
  .product-grid{ grid-template-columns:1fr; gap:var(--space-8); }
  .buybox{ position:static; }
}

/* ── 약관 · 개인정보 처리방침 전문(terms.html · privacy.html) ── */
.legal-body{ max-width:820px; }
.legal-body h1{ font-size:var(--fs-3xl); font-weight:var(--fw-extrabold); color:var(--green-ink); margin-bottom:var(--space-6); }
.legal-body h2{ font-size:var(--fs-xl); margin-top:var(--space-10); margin-bottom:var(--space-3); }
.legal-body h3{ font-size:var(--fs-lg); margin-top:var(--space-8); margin-bottom:var(--space-2); color:var(--green-ink); }
.legal-body p{ margin-block:var(--space-2); }
.legal-body ol, .legal-body ul{ margin-block:var(--space-2); padding-left:1.6em; }
.legal-body ol > li{ list-style:decimal; }
.legal-body ol.alpha > li{ list-style:lower-alpha; }
.legal-body ul > li{ list-style:disc; }
.legal-body li{ margin-block:var(--space-1); }
.table-wrap{ overflow-x:auto; margin-block:var(--space-4); }
.legal-body table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.legal-body th, .legal-body td{ border:1px solid var(--border); padding:var(--space-2) var(--space-3); text-align:left; vertical-align:top; }
.legal-body th{ background:var(--beige); font-weight:var(--fw-bold); }
.site-nav a[aria-current="page"]{ color:var(--green-text); }