/* ══════════════════════════════════════════════════════════════════
   Apioni — 공용 디자인 시스템 (단일 정본)
   모든 페이지(index 포함)가 이 파일 하나만 참조합니다.
   토큰 → 컴포넌트 → 모션 → 반응형 순으로 구성.
   ══════════════════════════════════════════════════════════════════ */

/* ── 디자인 토큰 ─────────────────────────────────────────────────── */
:root{
  /* 브랜드 색 (고정) */
  --ink:#1A1D21; --paper:#F5F6F7; --blue:#0066cc;
  --line:#E3E5E8; --muted:#5A6068; --card:#FFFFFF;
  /* 색 — 토큰 내 명도 변형 */
  --ink-hover:#0E1013;      /* 버튼 hover */
  --blue-hover:#0071e3;     /* 블루 버튼 hover (Action Blue press) */
  --blue-soft:#e8f1fc;      /* 블루 연한 배경 */
  --surface-2:#EDEFF2;      /* 표 헤더 등 보조 면 */
  --muted-strong:#3F454D;   /* 본문에 가까운 muted (AA 안전) */

  /* 간격 스케일 (8px 그리드) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px;

  /* 모서리 반경 */
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px;
  --radius-pill:999px;

  /* 그림자 (절제 — 신뢰 톤) */
  --shadow-sm:0 1px 2px rgba(26,29,33,.04);
  --shadow-md:0 4px 16px rgba(26,29,33,.06);
  --shadow-lg:0 12px 32px rgba(26,29,33,.10);
  --shadow-focus:0 0 0 3px rgba(0,113,227,.28);

  /* 모션 토큰 */
  --motion-fast:.15s; --motion-base:.2s;
  --ease:cubic-bezier(.2,.6,.2,1);

  /* 레이아웃 */
  --maxw:980px; --maxw-narrow:760px; --gutter:24px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Pretendard","Noto Sans KR",sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* 한국어 줄바꿈: keep-all 로 어절 중간 끊김 방지("있습/니다" 버그 해소).
     overflow-wrap 으로 URL·이메일 등 긴 불가분 토큰만 넘침 방지(둘 다 필요). */
  word-break:keep-all;
  overflow-wrap:break-word;
}
/* 제목·문단 줄 균형 — 마지막 줄 한 글자 고아·들쭉날쭉 방지(modern browsers) */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
/* 짧은 중앙 정렬 리드/서브는 balance 로 줄 길이를 고르게 — 고아 단어 방지(Safari 17.5+ 포함, pretty 미지원 보완) */
.lede,.sub,.hero .sub{text-wrap:balance}
::selection{background:var(--blue-soft);color:var(--ink)}

/* 키보드 포커스 — 전역 일관 (마우스 클릭에는 미표시) */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--radius-sm)}
:focus:not(:focus-visible){outline:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ── 헤더 / 네비게이션 ───────────────────────────────────────────── */
header{
  position:sticky;top:0;background:rgba(245,246,247,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);z-index:20;
}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px;gap:22px}
.nav>a{display:flex;align-items:center;border-radius:var(--radius-sm)}
.nav img{height:22px;display:block}
.nav ul{display:flex;gap:28px;list-style:none}
/* 언어 전환(좌측 상단) — 로고 우측에 두고 margin-right:auto 로 메뉴를 우측으로 분리 */
.lang-switch{display:flex;align-items:center;gap:2px;margin-right:auto}
.lang-switch a{font-size:12px;font-weight:500;color:var(--muted);padding:4px 9px;border-radius:var(--radius-sm);text-decoration:none;line-height:1;transition:color var(--motion-fast) var(--ease),background var(--motion-fast) var(--ease)}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.active{color:var(--ink);background:var(--surface-2)}
/* 메뉴 링크에만 적용(헤더 CTA .btn 은 제외 — .nav a 가 .btn 흰 글자색을 덮던 버그 수정) */
.nav ul a{
  color:var(--ink);text-decoration:none;font-size:14px;
  transition:color var(--motion-fast) var(--ease);
}
.nav ul a:hover{color:var(--blue)}
.nav-toggle{
  display:none;background:none;border:0;font-size:22px;line-height:1;
  cursor:pointer;color:var(--ink);padding:6px 10px;border-radius:var(--radius-sm);
  transition:background var(--motion-fast) var(--ease);
}
.nav-toggle:hover{background:var(--surface-2)}

/* ── 버튼 ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;
  min-height:42px;padding:10px 22px;border-radius:var(--radius-pill);
  text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;line-height:1.2;
  transition:background var(--motion-base) var(--ease),
             transform var(--motion-fast) var(--ease);
}
.btn:hover{background:var(--blue-hover)}
.btn:active{transform:scale(.97)}
.btn-blue{background:var(--blue)}
.btn-blue:hover{background:var(--blue-hover)}
.btn-outline{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-outline:hover{background:var(--blue-soft)}
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.btn-full{width:100%}
.btn-stack{margin-top:10px}
/* 네비 CTA: 헤더에선 더 컴팩트·세련되게 */
.nav .btn{min-height:36px;padding:0 18px;font-size:13.5px;border-radius:var(--radius-pill);font-weight:600;box-shadow:none}

/* ── 섹션 / 타이포 ──────────────────────────────────────────────── */
section{padding:var(--space-8) 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
h2{font-size:clamp(22px,3.4vw,30px);letter-spacing:-.01em;line-height:1.3;text-align:center}
h3{line-height:1.4}
.lede{margin:20px auto 0;max-width:640px;text-align:center;color:var(--muted-strong);font-size:16px;line-height:1.7}

/* ── 히어로 (홈) ────────────────────────────────────────────────── */
.hero{padding:var(--space-9) 0 var(--space-8);text-align:center}
.hero h1{font-size:clamp(28px,5vw,46px);font-weight:700;letter-spacing:-.022em;line-height:1.2}
.hero .sub{margin:20px auto 0;max-width:580px;font-size:17px;color:var(--muted-strong)}
.hero .cta{margin-top:var(--space-6);display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .micro{margin-top:12px;font-size:13px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
.hero .micro:first-of-type{margin-top:18px}
.hero .micro code{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1px 6px}
.check-dot::before{content:"✓";color:var(--blue);font-weight:700;margin-right:1px}

/* ── 서브페이지 히어로 ──────────────────────────────────────────── */
.page-hero{padding:var(--space-8) 0 var(--space-7);text-align:center}
.page-hero h1{font-size:clamp(26px,4vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.25}
.page-hero .sub{margin:16px auto 0;max-width:580px;font-size:16px;color:var(--muted-strong)}
.page-hero .micro{margin-top:14px;font-size:13px;color:var(--muted)}

/* ── 카드 ───────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:40px}
.cards + .cards{margin-top:16px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px;
  transition:border-color var(--motion-base) var(--ease);
}
.card h3{font-size:16px;margin-bottom:10px}
.card p{font-size:14px;color:var(--muted)}
.card-narrow{max-width:720px;margin-left:auto;margin-right:auto}
/* hover lift는 상호작용 카드(.card-i)에만 — 정보 카드는 정적 유지 */
.card-i:hover{border-color:#C7C7C9}
.card-center{text-align:center;padding:32px 24px}
.card-meta{margin-bottom:20px;color:var(--muted)}
.card-note{margin-top:10px;font-size:13px;color:var(--muted)}
.nowrap{white-space:nowrap}
.detail-spaced{margin-top:14px}
.email-lead{margin-bottom:6px;font-size:16px}
.email-lead a{color:var(--blue);text-decoration:none;font-weight:600}
.email-lead a:hover{color:var(--blue-hover);text-decoration:underline}

/* 뱃지 */
.tag{
  display:inline-block;font-size:11px;font-weight:600;color:var(--blue);
  background:var(--blue-soft);border:1px solid rgba(0,102,204,.22);
  border-radius:var(--radius-pill);padding:1px 9px;margin-left:6px;vertical-align:2px;
}
.tag-muted{color:var(--muted);background:var(--surface-2);border-color:var(--line)}

/* ── 표 ─────────────────────────────────────────────────────────── */
table{
  width:100%;border-collapse:collapse;margin-top:32px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  font-size:14px;
}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--surface-2);font-weight:600}
td:first-child{font-weight:500;color:var(--ink)}
tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--motion-fast) var(--ease)}
tbody tr:hover{background:#FAFBFC}

/* ── details / 코드 ─────────────────────────────────────────────── */
details{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:4px 20px;margin-top:12px;
  transition:border-color var(--motion-base) var(--ease);
}
details:hover{border-color:#C7C7C9}
summary{
  cursor:pointer;font-weight:600;font-size:15px;list-style:none;
  padding:14px 0;display:flex;align-items:center;gap:10px;
  transition:color var(--motion-fast) var(--ease);
}
summary::-webkit-details-marker{display:none}
summary::before{
  content:"";width:8px;height:8px;flex:0 0 8px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(-45deg);margin-top:-2px;
  transition:transform var(--motion-base) var(--ease),border-color var(--motion-fast) var(--ease);
}
details[open] summary::before{transform:rotate(45deg)}
summary:hover{color:var(--blue)}
summary:hover::before{border-color:var(--blue)}
details p,details pre{margin:0 0 16px;font-size:14px;color:var(--muted)}
details p:first-of-type{margin-top:2px}
pre{
  background:var(--ink);color:var(--paper);border-radius:var(--radius-md);
  padding:14px 16px;overflow-x:auto;font-size:13px;line-height:1.6;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
code{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1px 6px;font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
pre code{background:transparent;border:0;padding:0;font-size:inherit;color:inherit}

/* ── 단계 (steps) ───────────────────────────────────────────────── */
.steps{counter-reset:s;display:grid;gap:14px;margin-top:40px}
.step{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 22px;display:flex;gap:18px;align-items:flex-start;
  transition:border-color var(--motion-base) var(--ease);
}
.step:hover{border-color:#C7C7C9}
.step::before{
  counter-increment:s;content:counter(s);flex:0 0 32px;height:32px;border-radius:50%;
  background:var(--ink);color:var(--paper);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:15px;
}
.step h3{font-size:15px;margin-bottom:6px}
.step p{font-size:14px;color:var(--muted)}
.step code{background:var(--paper)}

/* ── 가격 카드 ──────────────────────────────────────────────────── */
.price-card{
  max-width:420px;margin:40px auto 0;background:var(--card);border:2px solid var(--ink);
  border-radius:var(--radius-xl);padding:36px;text-align:center;
}
.price-card .amount{font-size:42px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.price-card .once{color:var(--blue);font-weight:600;font-size:14px;margin-top:4px}
.price-card .trial-note{margin-top:14px;font-size:13px;color:var(--muted)}
.price-card ul{list-style:none;margin:22px 0;text-align:left;font-size:14px;color:var(--muted)}
.price-card li{padding:8px 0;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:10px}
.price-card li:last-child{border-bottom:0}
.price-card li::before{content:"✓";color:var(--blue);font-weight:700;flex:0 0 auto;margin-top:0}

/* ── 안내 박스 ──────────────────────────────────────────────────── */
.notice{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:18px 20px;font-size:14px;color:var(--muted-strong);
  margin-top:24px;line-height:1.65;
}
.notice a{color:var(--ink);font-weight:500}
.warn{
  background:#FCF6EC;border:1px solid #ECDDC2;
  border-radius:var(--radius-md);padding:18px 20px;font-size:14px;color:#6B5B3E;margin-top:24px;line-height:1.65;
}
.warn strong{color:#8A5A00}

/* ── 폼 (구매) ──────────────────────────────────────────────────── */
.form-card{
  max-width:560px;margin:32px auto 0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:32px;
}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field input[type="text"],.field input[type="email"]{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-md);
  font-size:16px;background:var(--paper);font-family:inherit;color:var(--ink);
  transition:border-color var(--motion-fast) var(--ease),
             box-shadow var(--motion-fast) var(--ease),background var(--motion-fast) var(--ease);
}
.field input::placeholder{color:#9AA0A8}
.field input:hover{border-color:#CDD2D8}
.field input:focus{outline:none;border-color:var(--blue);background:var(--card);box-shadow:var(--shadow-focus)}
.field input[aria-invalid="true"]{border-color:#D33A3A;box-shadow:0 0 0 3px rgba(211,58,58,.18)}
.field .help{font-size:12px;color:var(--muted);margin-top:6px}
.field .err{font-size:12px;color:#C42B2B;margin-top:6px;display:none}
.field input[aria-invalid="true"] ~ .err{display:block}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted-strong);margin:10px 0;cursor:pointer}
.consent input{margin-top:4px;width:17px;height:17px;flex:0 0 17px;accent-color:var(--blue);cursor:pointer}
.consent a{color:var(--ink);font-weight:500}
.help-center{text-align:center;margin-top:10px}
.form-note{font-size:13px;color:var(--muted);margin:18px 0 12px}
.pay-btn{margin-top:18px}

/* 결제 상태(aria-live) — 인라인 피드백 */
.form-status{margin:14px 0 0;font-size:13px;line-height:1.5;min-height:0}
.form-status:empty{margin:0}
.form-status.is-info{color:var(--muted-strong)}
.form-status.is-err{
  color:#B42424;background:#FDF1F1;border:1px solid #F3D2D2;
  border-radius:var(--radius-md);padding:10px 12px;
}

/* buy 페이지 폭 보조 */
.notice-narrow{max-width:560px;margin-left:auto;margin-right:auto}
.micro-link a{color:var(--ink);font-weight:500;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color var(--motion-fast) var(--ease)}
.micro-link a:hover{border-color:var(--ink)}

/* ── buy 전용: 가격카드 폭·리듬 (전역 .price-card 미변경 — index 보호) ── */
.price-card--buy{max-width:520px}
.price-card--buy ul{margin:24px 0 4px}        /* 카드 내 법조문 분리 후 하단 여백 정리 */
.price-card--buy li{padding:10px 0}           /* 항목 호흡 */
.price-card--buy + .notice{margin-top:18px}   /* 카드+고지 한 덩어리 */
/* buy: 가격 섹션 ↔ 구매자정보 섹션을 한 흐름으로 (전역 section 미변경) */
.section-tight{padding-top:var(--space-7);border-top:0}
/* support: 표 캡션 (전역 h3 영향 없이 좌측 정렬) */
.table-cap{font-size:16px;text-align:left;margin:32px 0 -8px}
/* notice 안 목록 (support 문의·검증 재사용) */
.notice-list{margin:10px 0 12px 20px;font-size:14px}
.notice-list li{margin:6px 0;line-height:1.7}

/* ── 법무 문서 ──────────────────────────────────────────────────── */
.legal{max-width:var(--maxw-narrow);margin:0 auto;padding:24px 0 48px}
.legal .effective{color:var(--muted);font-size:14px;margin-bottom:8px}
.legal h2{text-align:left;font-size:20px;margin:40px 0 10px}
.legal h3{font-size:16px;margin:24px 0 8px}
.legal p{margin:12px 0;font-size:15px}
.legal ol,.legal ul{margin:10px 0 10px 24px;font-size:15px}
.legal li{margin:8px 0}
.legal a{color:var(--blue);text-decoration:none;transition:color var(--motion-fast) var(--ease)}
.legal a:hover{color:var(--blue-hover);text-decoration:underline}
.legal table{margin-top:16px;margin-bottom:16px}
.legal .biz-info{
  margin-top:48px;padding:20px 24px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);font-size:14px;color:var(--muted);
}
.legal .biz-info h3{margin-top:0}

/* ── 푸터 ───────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:var(--space-8) 0 var(--space-7);font-size:13px;color:var(--muted);margin-top:var(--space-8)}
footer a{color:var(--muted);transition:color var(--motion-fast) var(--ease)}
footer a:hover{color:var(--ink)}
/* 상단: 브랜드 + 링크 컬럼 */
footer .footer-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;padding-bottom:var(--space-6);border-bottom:1px solid var(--line)}
footer .footer-brand{max-width:300px}
footer .footer-brand img{height:18px;display:block}
footer .footer-brand p{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.6}
footer .footer-col{display:flex;flex-direction:column;gap:9px}
footer .footer-col h4{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:3px;letter-spacing:.02em}
footer .footer-col a{font-size:13px}
/* 사업자 정보 — 라벨/값 정렬(이니시스 심사 명확 표기) */
footer .footer-biz{padding-top:var(--space-5)}
footer .footer-biz dl{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:5px;margin:0 0 14px}
footer .footer-biz dl>div{display:flex;gap:6px;align-items:baseline}
footer .footer-biz dl>div:not(:last-child)::after{content:"·";color:var(--muted);opacity:.45;margin:0 13px}
footer .footer-biz dt{color:var(--muted);font-size:11.5px;font-weight:400;flex:none}
footer .footer-biz dd{color:var(--ink-muted,#3F454D);font-size:11.5px;font-weight:500}
footer .footer-terms{font-size:12.5px;color:var(--muted);line-height:1.7;margin-bottom:6px}
footer .footer-copy{font-size:12px;color:var(--muted)}

/* ── 진입 모션 (절제) ───────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero h1,.hero .sub,.hero .cta,.hero .micro{animation:rise .5s var(--ease) both}
.hero .sub{animation-delay:.05s}
.hero .cta{animation-delay:.1s}
.hero .micro{animation-delay:.16s}

/* ── 반응형 ─────────────────────────────────────────────────────── */
/* 태블릿 (641–1024) — 여백·그리드 미세 조정 */
@media (max-width:1024px){
  :root{--gutter:22px}
  section{padding:var(--space-8) 0}
  .hero{padding:var(--space-8) 0 var(--space-7)}
  .cards{gap:14px}
}

/* 모바일 (≤640) */
@media (max-width:640px){
  :root{--gutter:18px}
  .nav-toggle{display:inline-block}
  /* 상단 가로 메뉴 → 햄버거 드롭다운(死엔드 방지) */
  .nav ul{
    display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px 18px 16px;
    box-shadow:var(--shadow-md);
  }
  .nav ul.open{display:flex;animation:rise .2s var(--ease) both}
  .nav ul li{padding:0}
  .nav ul li a{display:block;padding:13px 4px;border-bottom:1px solid var(--line)}
  section{padding:var(--space-7) 0}
  .cards,.steps{margin-top:28px}
  .hero{padding:var(--space-7) 0 var(--space-6)}
  .hero .cta{flex-direction:column}
  .hero .cta .btn{width:100%}
  .price-card{padding:28px 22px}
  .price-card--buy{max-width:100%}
  .price-card--buy li{padding:12px 0}
  .form-card{padding:24px 20px}
  footer .footer-top{flex-direction:column;gap:28px}
}

/* 모션 최소화 선호 존중 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}
/* 사용 가이드 페이지 — 리스트 가독성 */
.guide-list{margin:14px 0 0;padding-left:20px;color:var(--ink-muted,#3F454D)}
.guide-list li{margin:6px 0;line-height:1.7}