/* ─────────────────────────────────────────────
   Tadak 문서 페이지 공용 스타일
   랜딩(index.html)의 디자인 시스템 "High-Voltage Tech"에서
   문서에 필요한 토큰과 컴포넌트만 추려 공용 파일로 분리했다.
   랜딩은 인라인 <style>을 그대로 유지한다(수정 범위를 줄이기 위해).
   ───────────────────────────────────────────── */

@font-face { font-family:'Plus Jakarta Sans'; font-weight:700; font-display:swap;
  src:url('/fonts/PlusJakartaSans-700.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:800; font-display:swap;
  src:url('/fonts/PlusJakartaSans-800.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:400; font-display:swap;
  src:url('/fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-display:swap;
  src:url('/fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:500; font-display:swap;
  src:url('/fonts/Geist-500.woff2') format('woff2'); }
@font-face { font-family:'Pretendard'; font-weight:400; font-display:swap;
  src:url('/fonts/Pretendard-Regular.sub.woff2') format('woff2'); unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF; }
@font-face { font-family:'Pretendard'; font-weight:800; font-display:swap;
  src:url('/fonts/Pretendard-ExtraBold.sub.woff2') format('woff2'); unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF; }
/* 웹폰트 도착 전 맑은 고딕의 한글 폭을 Pretendard에 맞춰 교체 시 줄바꿈이 바뀌지 않게 한다 */
@font-face { font-family:'Pretendard Fallback'; font-weight:400; src:local('Malgun Gothic'), local('MalgunGothic'), local('MalgunGothicRegular'); size-adjust:84.9%; unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF; }
@font-face { font-family:'Pretendard Fallback'; font-weight:800; src:local('Malgun Gothic Bold'), local('MalgunGothicBold'); size-adjust:84.4%; unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF; }

html { color-scheme: light; }

:root{
  --white:#FFFFFF;
  --surface:#F9F9F9;
  --surface-low:#F3F3F4;
  --black:#000000;
  --ink:#1A1C1C;
  --ink-soft:#414754;
  --gray:#666666;
  --line:#EAEAEA;
  --outline:#727786;
  --blue:#0070F3;
  --blue-deep:#0058C3;
  --r:4px;
  --r-lg:8px;
  --hard:4px 4px 0 0 var(--black);
  --hard-sm:3px 3px 0 0 var(--black);
  --display:'Plus Jakarta Sans','Pretendard','Pretendard Fallback','Malgun Gothic',sans-serif;
  --body:'Inter','Pretendard','Pretendard Fallback','Malgun Gothic',sans-serif;
  --mono:'Geist','Pretendard','Pretendard Fallback',ui-monospace,Consolas,monospace;
  --wrap:1180px;
  --col:760px;   /* 본문 한 줄 길이 — 읽기 편한 폭으로 제한 */
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--surface); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

h1,h2,h3{ font-family:var(--display); color:var(--black); font-weight:800; letter-spacing:-0.04em; line-height:1.15; margin:0; }
h1{ font-size:clamp(1.85rem,4.4vw,3rem); }
h2{ font-size:clamp(1.4rem,2.9vw,2rem); letter-spacing:-0.03em; }
h3{ font-size:1.08rem; font-weight:700; letter-spacing:-0.02em; }
p{ margin:0; }
a{ color:var(--black); }
code{ font-family:var(--mono); font-size:.88em; background:var(--surface-low); border-radius:3px; padding:1px 5px; }
kbd{ font-family:var(--mono); font-size:.8em; border:1.5px solid var(--black); border-radius:3px; padding:1px 5px; background:var(--white); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:32px; }
.eyebrow{
  font-family:var(--mono); font-size:.88rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------------- 헤더 ---------------- */
header{ position:sticky; top:0; z-index:50; background:var(--white); border-bottom:2px solid var(--line); }
.top{
  max-width:var(--wrap); margin:0 auto; padding:0 32px; height:66px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:800; font-size:1.22rem; letter-spacing:-0.04em;
  text-decoration:none; color:var(--black);
}
.brand-mark{ width:28px; height:28px; display:block; }
header nav{ display:flex; gap:26px; }
header nav a{
  font-size:.9rem; font-weight:600; text-decoration:none; color:var(--ink-soft);
  padding:4px 0; border-bottom:2px solid transparent;
}
header nav a:hover{ color:var(--black); border-bottom-color:var(--blue); }
.lang-switch{ display:flex; align-items:center; gap:1px; font-family:var(--mono); font-size:.72rem; }
.lang-switch a{ color:var(--gray); text-decoration:none; padding:5px 7px; border-radius:3px; }
.lang-switch a:hover{ color:var(--black); }
.lang-switch a.is-on{ color:var(--white); background:var(--black); }

/* ---------------- 문서 본문 ---------------- */
.doc{ max-width:var(--col); margin:0 auto; padding:clamp(34px,5vw,60px) 0 clamp(50px,7vw,86px); }
.crumb{ font-family:var(--mono); font-size:.78rem; color:var(--gray); margin-bottom:18px; }
.crumb a{ color:var(--gray); }
.doc-meta{ margin-top:18px; font-family:var(--mono); font-size:.78rem; color:var(--gray); }
.lede{ margin-top:20px; font-size:1.08rem; color:var(--ink-soft); }
.doc h2{ margin-top:clamp(42px,5vw,60px); }
.doc h3{ margin-top:30px; }
.doc p{ margin-top:16px; color:var(--ink-soft); }
.doc p strong, .doc li strong{ color:var(--black); }
.doc ul, .doc ol{ margin:16px 0 0; padding-left:22px; color:var(--ink-soft); }
.doc li{ margin-top:8px; }
.doc a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--blue); }

/* 바로 답 박스 — 검색으로 들어온 사람에게 결론을 먼저 준다 */
.answer{
  margin-top:26px; background:var(--white);
  border:2px solid var(--black); border-radius:var(--r-lg);
  box-shadow:var(--hard); padding:24px 26px;
}
.answer .eyebrow{ color:var(--blue-deep); }
.answer p{ margin-top:12px; color:var(--ink); font-size:1.02rem; }
.answer ul{ margin-top:12px; color:var(--ink); }

/* 참고 박스 */
.note{
  margin-top:24px; background:var(--white);
  border:1.5px solid var(--line); border-left:4px solid var(--blue);
  border-radius:var(--r); padding:18px 20px;
}
.note p{ margin-top:0; font-size:.94rem; }
.note p + p{ margin-top:10px; }

/* 점검 단계 */
.checks{ list-style:none; margin:26px 0 0; padding:0; counter-reset:chk; }
.checks > li{
  position:relative; margin-top:14px; padding:20px 22px 20px 62px;
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-lg);
}
.checks > li::before{
  counter-increment:chk; content:counter(chk);
  position:absolute; left:20px; top:20px;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.82rem;
  color:var(--white); background:var(--black); border-radius:var(--r);
}
.checks h3{ margin-top:0; }
.checks p{ margin-top:9px; font-size:.95rem; }
.checks .sym{ font-family:var(--mono); font-size:.76rem; color:var(--blue-deep); letter-spacing:.02em; }

/* ---------------- 비교표 ---------------- */
.compare-wrap{ margin-top:26px; overflow-x:auto; border:2px solid var(--black); border-radius:var(--r-lg); background:var(--white); }
.compare{ width:100%; min-width:640px; border-collapse:collapse; font-size:.9rem; line-height:1.55; }
.compare th, .compare td{ padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1.5px solid var(--line); }
.compare thead th{ font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); }
.compare tbody th{ font-weight:600; color:var(--black); white-space:nowrap; }
.compare td{ color:var(--ink-soft); }
.compare .us{ background:rgba(0,112,243,.06); color:var(--black); }
.compare thead .us{ color:var(--blue-deep); font-weight:600; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td{ border-bottom:0; }
.src{ margin-top:12px; font-size:.8rem; color:var(--gray); }
.src a{ color:var(--gray); }

/* ---------------- 미리듣기 ---------------- */
.preview{
  margin-top:26px; background:var(--white);
  border:2px solid var(--black); border-radius:var(--r-lg); padding:22px 24px;
}
.preview .eyebrow{ color:var(--blue-deep); }
.preview p{ margin-top:10px; font-size:.94rem; color:var(--ink-soft); }
.prev-row{ margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }
.prev-btn{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.02em;
  color:var(--ink); background:var(--white);
  border:1.5px solid var(--line); border-radius:2px; padding:9px 13px; cursor:pointer;
  transition:background 120ms ease, color 120ms ease, box-shadow 90ms ease, transform 60ms ease;
}
.prev-btn:hover{ background:var(--black); color:var(--white); border:2px solid var(--black); box-shadow:var(--hard-sm); padding:8.5px 12.5px; }
.prev-btn:active{ transform:translate(3px,3px); box-shadow:none; }
.prev-btn[aria-pressed="true"]{ background:var(--blue); color:var(--white); border:2px solid var(--black); padding:8.5px 12.5px; }

/* ---------------- 전환 블록 ---------------- */
.pitch{
  margin-top:30px; background:var(--black); color:#C9CDD6;
  border-radius:var(--r-lg); padding:30px 30px 32px;
}
.pitch h2{ margin-top:0; color:var(--white); font-size:clamp(1.3rem,2.6vw,1.75rem); }
.pitch p{ color:#C9CDD6; }
.pitch ul{ color:#C9CDD6; }
.pitch li strong{ color:var(--white); }
.pitch .eyebrow{ color:#8E95A3; }
.cta-row{ margin-top:24px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.9rem; font-weight:500; letter-spacing:.02em;
  padding:14px 22px; border-radius:var(--r); text-decoration:none; cursor:pointer;
  transition:background 150ms ease, color 150ms ease, box-shadow 90ms ease, transform 60ms ease;
}
.btn-main{ background:var(--blue); color:var(--white); border:2px solid var(--white); }
.btn-main:hover{ background:var(--white); color:var(--black); }
.btn-ghost{ background:transparent; color:var(--white); border:2px solid #4A4A4A; }
.btn-ghost:hover{ border-color:var(--white); }
.btn-note{ font-family:var(--mono); font-size:.76rem; color:#8E95A3; }
.pitch .btn{ text-decoration:none; }

/* ---------------- FAQ ---------------- */
.faq{ margin-top:26px; border:2px solid var(--black); border-radius:var(--r-lg); background:var(--white); overflow:hidden; }
.faq details{ border-bottom:1.5px solid var(--line); }
.faq details:last-child{ border-bottom:0; }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 22px;
  font-family:var(--display); font-weight:700; font-size:.99rem; letter-spacing:-0.02em; color:var(--black);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); font-size:1.1rem; color:var(--blue); flex:none; }
.faq details[open] summary::after{ content:"−"; }
.faq details[open] summary{ background:var(--surface-low); }
.faq .body{ padding:2px 22px 20px; }
.faq .body p{ margin-top:10px; font-size:.93rem; color:var(--ink-soft); }

/* ---------------- 더 보기 ---------------- */
.more{ margin-top:34px; padding-top:22px; border-top:2px solid var(--line); }
.more-links{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.more-links a{ font-size:.94rem; font-weight:600; color:var(--ink); text-decoration:none; }
.more-links a:hover{ color:var(--blue-deep); }

/* ---------------- 푸터 ---------------- */
footer{ background:var(--surface-low); border-top:2px solid var(--line); padding:44px 0 56px; }
.foot{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px; }
.foot p{ font-size:.88rem; color:var(--gray); }
.foot-links{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-links a{ font-size:.88rem; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:1.5px solid transparent; }
.foot-links a:hover{ border-bottom-color:var(--blue); }

@media (max-width:720px){
  .wrap{ padding-inline:20px; }
  .top{ padding:0 20px; height:58px; gap:10px; }
  header nav{ gap:12px; }
  header nav a{ font-size:.78rem; }
  .lang-switch{ font-size:.66rem; }
  .lang-switch a{ padding:4px 5px; }
  .btn{ padding:12px 18px; font-size:.84rem; }
  .cta-row .btn{ flex:1 1 100%; justify-content:center; }
  .checks > li{ padding:18px 18px 18px 56px; }
  .pitch{ padding:24px 20px 26px; }
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }