/* 트립데스크 가이드 공용 스타일 — 랜딩(index.html) 토큰 재사용 */
:root{
  --ink:#0A0E1A; --ink-2:#1A1F2E; --sub:#475569; --sub-2:#64748B;
  --mute:#94A3B8; --mute-2:#CBD5E1; --line:#E5E3DD; --line-2:#D4D0C7;
  --bg:#FCFBF8; --bg-2:#F6F4EF; --bg-3:#EDE9DF; --paper:#FFFFFF;
  --primary:#0A4F7C; --primary-dark:#063150; --primary-soft:#E0EAF2;
  --accent:#0D9F6E; --accent-soft:#D1FAE5;
  --gold:#C9A24B; --gold-soft:#F4ECD8;
  --warn:#F59E0B; --warn-soft:#FEF3C7;
  --danger:#DC2626; --danger-soft:#FEE2E2;
  --r-sm:10px; --r:14px; --r-lg:18px;
  --shadow-xs:0 1px 3px rgba(10,14,26,.04);
  --shadow:0 8px 28px -6px rgba(10,14,26,.08), 0 2px 6px rgba(10,14,26,.04);
  --sans:'Pretendard Variable','Pretendard','SF Pro Text',-apple-system,sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* 헤더 */
.gh{position:sticky;top:0;z-index:20;background:rgba(252,251,248,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.gh-in{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px}
.gh-logo{font-weight:800;letter-spacing:-.02em;color:var(--ink);font-size:17px}
.gh-logo span{color:var(--primary)}
.gh-nav{margin-left:auto;display:flex;gap:20px;font-size:14px;color:var(--sub)}
.gh-nav a{color:var(--sub)}
.gh-cta{background:var(--primary);color:#fff;padding:9px 16px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600}
.gh-cta:hover{background:var(--primary-dark);text-decoration:none}

/* 레이아웃 */
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1080px;margin:0 auto;padding:0 24px}
.crumb{font-size:13px;color:var(--mute);padding:22px 0 0}
.crumb a{color:var(--sub-2)}

article{padding:8px 0 64px}
h1{font-size:clamp(26px,4.4vw,38px);line-height:1.32;letter-spacing:-.03em;margin:14px 0 16px;font-weight:800}
.lede{font-size:18px;color:var(--sub);margin:0 0 22px;line-height:1.75}
.meta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:13px;color:var(--mute);
  padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:32px}
h2{font-size:clamp(20px,2.8vw,25px);line-height:1.4;letter-spacing:-.02em;margin:46px 0 14px;font-weight:750}
h3{font-size:18px;margin:30px 0 10px;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 17px}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin-bottom:8px}
strong{font-weight:700;color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:44px 0}

/* 표 */
.tbl-wrap{overflow-x:auto;margin:0 0 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--bg-2);font-weight:700;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
tr:last-child td{border-bottom:0}
td code{font-family:var(--mono);font-size:13px;background:var(--bg-3);padding:2px 5px;border-radius:4px}

/* 강조 박스 */
.box{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);
  padding:18px 20px;margin:0 0 22px;box-shadow:var(--shadow-xs)}
.box-t{font-weight:700;font-size:15px;margin-bottom:8px;display:flex;gap:8px;align-items:center}
.box p:last-child,.box ul:last-child,.box ol:last-child{margin-bottom:0}
.box.warn{background:var(--warn-soft);border-color:#EBCF8A}
.box.warn .box-t{color:#8A5A00}
.box.field{background:var(--primary-soft);border-color:#BFD4E5}
.box.field .box-t{color:var(--primary-dark)}
.box.gold{background:var(--gold-soft);border-color:#E3D2A6}

/* CTA */
.cta{margin:48px 0 0;padding:26px 24px;background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:var(--shadow)}
.cta h2{margin:0 0 8px;font-size:20px}
.cta p{color:var(--sub);font-size:15px}
.cta-btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;font-size:15px;
  padding:13px 22px;border-radius:var(--r-sm);margin-top:6px}
.cta-btn:hover{background:#0B8A5F;text-decoration:none}

/* 관련 글 */
.rel{margin:44px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.rel-t{font-size:13px;font-weight:700;color:var(--mute);letter-spacing:.06em;margin-bottom:14px}
.rel-list{display:grid;gap:10px}
.rel-list a{display:block;padding:14px 16px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-sm);font-weight:600;font-size:15px;color:var(--ink)}
.rel-list a:hover{border-color:var(--primary);text-decoration:none}
.rel-list span{display:block;font-weight:400;font-size:13.5px;color:var(--sub-2);margin-top:3px}

/* 허브 */
.hub-hero{padding:52px 0 34px;border-bottom:1px solid var(--line);margin-bottom:38px}
.hub-hero h1{margin-bottom:12px}
.cluster{margin-bottom:44px}
.cluster-h{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.cluster-h h2{margin:0;font-size:20px}
.cluster-h em{font-size:13px;color:var(--mute);font-weight:600}
.cluster-d{font-size:14.5px;color:var(--sub);margin:0 0 16px}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.card{display:block;padding:18px 20px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-xs)}
.card:hover{border-color:var(--primary);text-decoration:none}
.card b{display:block;font-size:16px;color:var(--ink);letter-spacing:-.01em;margin-bottom:5px;font-weight:700}
.card span{font-size:14px;color:var(--sub-2);line-height:1.6}
.card.soon{opacity:.55;pointer-events:none}
.card.soon:after{content:'준비 중';display:inline-block;margin-top:8px;font-size:11.5px;
  font-weight:700;color:var(--mute);background:var(--bg-3);padding:3px 8px;border-radius:20px}

/* 푸터 */
.gf{border-top:1px solid var(--line);background:var(--bg-2);padding:34px 0;margin-top:56px}
.gf-in{max-width:1080px;margin:0 auto;padding:0 24px;font-size:13.5px;color:var(--sub-2);
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.gf-in a{color:var(--sub)}
.gf-note{margin-left:auto;color:var(--mute);font-size:12.5px}

@media (max-width:640px){
  body{font-size:15.5px}
  .gh-nav{display:none}
  .wrap,.wrap-wide{padding:0 18px}
}

/* ── 2026-08-22 추가: 밀도 기준(04 체크리스트 B-0) 대응 요소 ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 22px}
.stat{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);
  padding:14px 16px;box-shadow:var(--shadow-xs)}
.stat-n{font-size:22px;font-weight:800;line-height:1.2;color:var(--primary-dark)}
.stat-l{font-size:13px;color:var(--sub);margin-top:4px}
.steps{list-style:none;counter-reset:st;padding:0;margin:0 0 22px}
.steps>li{counter-increment:st;position:relative;padding:0 0 0 40px;margin:0 0 14px}
.steps>li::before{content:counter(st);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.calc{border:1px solid var(--line-2);background:var(--bg-2);border-radius:var(--r);
  padding:16px 18px;margin:0 0 22px;font-size:14.5px}
.calc .calc-t{font-weight:700;margin-bottom:8px}
.calc .calc-r{border-top:1px dashed var(--line-2);margin-top:10px;padding-top:10px;font-weight:700}
.qa{margin:0 0 22px}
.qa h3{margin-top:20px}