/* ─────────────────────────────────────────────────────────
   우리온 — 결제 심사용 소개 페이지
   토큰은 프로토타입 landing.html 의 :root 를 그대로 따른다.
   외부 의존 없음 — 폰트도 시스템 스택으로 떨어진다.
   ───────────────────────────────────────────────────────── */

:root{
  --green:#2E9E6B; --green-text:#1F7A50; --green-deep:#166B46; --green-deep-2:#0F5234;
  --green-ink:#0B3A26; --green-mint:#9FE0C2; --green-panel:#14603E;
  --green-soft:#E7F2EA; --green-soft-2:#D9EBE0;
  --coral:#EE7A42; --coral-deep:#D9622C;
  --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-xl:24px; --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;
}

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;
}
.brand-mark{
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg, var(--green-mint), var(--green));
}

.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); }
.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--featured{ border-color:var(--green); box-shadow:var(--shadow); }
.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); }

/* ── 정의 목록 ────────────────────────────────────────── */
.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:#FDF1E9; border-left-color:var(--coral); }
.notice--warn strong{ color:var(--coral-deep); }
.notice--dark{ background:rgba(238,122,66,.14); color:var(--text-on-dark-muted); }
.notice--dark strong{ color:#FFC7A8; }

.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); }

/* ── 푸터 ─────────────────────────────────────────────── */
.site-footer{ padding-block:var(--space-16); color:var(--text-on-dark-muted); background:var(--green-ink); }
.footer-title{ font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--text-on-dark); }

.bizinfo{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 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(255,255,255,.12); }
.bizinfo dt{ flex:none; width:130px; font-size:var(--fs-sm); color:rgba(255,255,255,.56); }
.bizinfo dd{ margin:0; font-size:var(--fs-sm); color:var(--text-on-dark); }

.copyright{ margin-top:var(--space-10); font-size:var(--fs-xs); color:rgba(255,255,255,.5); }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width:720px){
  :root{ --fs-4xl:30px; --fs-3xl:24px; }
  .header-inner{ gap:var(--space-3); }
  .hero,.section{ padding-block:var(--space-12); }
  .deflist-row{ grid-template-columns:1fr; gap:var(--space-2); }
}