/* 아라봄 사이트 v3 · 문서형 페이지(가이드·시나리오·검사 안내) — 2026-10-21 CMO
   site3.css 토큰 위에서만 쓴다: 흰 바탕 · 잉크 · 중립 회색 면 · 노랑 1색(신청 버튼) · Pretendard 단일.
   하지 않는 것: 크림 바탕 · 금색 · 제목 앞 장식 선(손톱) · 왼쪽 굵은 띠 상자 · 영문 대문자 라벨 · 그림자 카드 벽.
   적용: <body class="doc"> + site3.css 다음에 이 파일. 생성·변환 docs/seo-261021/doc3_convert.py */
.doc{--muted:var(--ink-3);--panel:var(--bg-2);--rule:var(--line);--accent:var(--ink);background:#fff;color:var(--ink)}
.doc a{color:inherit}
.doc main.doc-main{padding:0 0 40px}

/* 본문 기둥 */
.doc article,.doc main.doc-hub{max-width:760px;margin:0 auto;padding:40px 24px 24px;font-size:16.5px;line-height:1.8;color:var(--ink-2)}
.doc main.doc-hub{max-width:1040px}
.doc article p,.doc main.doc-hub p{margin:0 0 16px}
.doc article a:not(.btn),.doc main.doc-hub .lead a,.doc main.doc-hub .intro-block a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--line-2)}
.doc article a:not(.btn):hover{text-decoration-color:var(--ink)}
.doc strong,.doc b{color:var(--ink);font-weight:700}
.doc em{font-style:normal;font-weight:700;color:var(--ink)}

/* 위치 표시 */
.doc .breadcrumb{font-size:13px;color:var(--ink-3);margin:0 0 20px}
.doc .breadcrumb a{text-decoration:none!important;color:var(--ink-3)}
.doc .breadcrumb a:hover{color:var(--ink)}

/* 제목 */
.doc h1{font-size:clamp(30px,4vw,44px);line-height:1.22;font-weight:800;letter-spacing:-.04em;color:var(--ink);margin:0 0 24px}
.doc h1 small{display:block;margin-top:14px;font-size:16px;line-height:1.6;font-weight:500;letter-spacing:-.015em;color:var(--ink-3)}
.doc h2{font-size:clamp(23px,2.6vw,30px);line-height:1.32;font-weight:800;letter-spacing:-.035em;color:var(--ink);margin:72px 0 18px}
.doc h2::before{content:none!important;display:none!important}
.doc h3{font-size:18px;line-height:1.45;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:32px 0 10px}
.doc h2 .label{display:inline-block;vertical-align:middle;margin-left:10px;padding:4px 10px;border-radius:999px;background:var(--bg-2);color:var(--ink-2);font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none}

/* 요약 · 도입 — 회색 면, 띠 없음 */
.doc .tldr,.doc .intro-block{margin:8px 0 8px;padding:24px 26px;background:var(--bg-2);border:0;border-radius:var(--r-md);font-size:16.5px;line-height:1.8;color:var(--ink-2)}
.doc .lead{font-size:18px;line-height:1.75;color:var(--ink-2);max-width:720px;margin:0 0 40px}

/* 표 */
.doc table.compare,.doc .pair-table table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px;line-height:1.6}
.doc table.compare th,.doc table.compare td,.doc .pair-table th,.doc .pair-table td{padding:14px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.doc table.compare thead th,.doc .pair-table th{font-size:13.5px;font-weight:700;color:var(--ink-3);border-bottom:1.5px solid var(--ink);background:none}
.doc table.compare tbody th{font-weight:700;color:var(--ink);width:22%}
.doc table.compare .hl,.doc .hl{font-weight:800;color:var(--ink);background:none}
.doc .pair-table{margin:20px 0;padding:0;background:none;font-size:15px}
@media(max-width:640px){.doc table.compare{font-size:13.5px}.doc table.compare th,.doc table.compare td{padding:11px 8px}}

/* 순서 */
.doc ol.steps{display:block;grid-template-columns:none;list-style:none;counter-reset:step;margin:20px 0 0;padding:0;border-top:1.5px solid var(--ink)}
.doc ol.steps li{position:relative;padding:18px 4px 18px 52px;margin:0;border-bottom:1px solid var(--line);background:none;border-radius:0;font-size:16px}
.doc ol.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:4px;top:17px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:700;line-height:30px;text-align:center}

/* 회색 면 상자 — 조합·오독·차원·유형·축·두 칸 */
.doc .combo,.doc .misread,.doc .dim-list li,.doc .axis-list li,.doc .type-box,.doc .two-col .col{margin:0 0 10px;padding:20px 22px;background:var(--bg-2);border:0;border-radius:var(--r-md);font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.doc .dim-list,.doc .axis-list{list-style:none;margin:20px 0 0;padding:0}
.doc .combo .code,.doc .dim-list .code,.doc .axis-list .axis-code{display:inline-block;margin-right:8px;padding:3px 10px;border-radius:999px;background:#fff;color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:0;box-shadow:inset 0 0 0 1px var(--line)}
.doc .combo .name,.doc .dim-list .name,.doc .axis-list .axis-name{font-weight:700;color:var(--ink)}
.doc .combo .desc,.doc .dim-list .desc{display:block;margin-top:8px;color:var(--ink-2)}
.doc .misread .no{display:inline-block;margin-right:8px;font-weight:800;color:var(--ink)}
.doc .misread .fix{display:block;margin-top:8px;color:var(--ink-2)}
.doc .two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.doc .two-col .col{margin:0}
.doc .two-col .col strong{display:block;margin-bottom:8px}
@media(max-width:640px){.doc .two-col{grid-template-columns:1fr}}

/* 점검·실천·경계 상자 — 흰 바탕 + 선 하나(크림·금색 테 없음) */
.doc .boundary-box,.doc .decision-tree,.doc .insight-box,.doc .checklist,.doc .practice-box{margin:24px 0;padding:22px 24px;background:#fff;border:1.5px solid var(--ink);border-radius:var(--r-md);font-size:15.5px;line-height:1.8;color:var(--ink-2)}
.doc .boundary-box strong,.doc .decision-tree strong,.doc .insight-box strong,.doc .checklist strong,.doc .practice-box strong{display:block;margin-bottom:8px}
.doc .checklist ol{margin:8px 0 0 20px;padding:0}
.doc .checklist li{margin-bottom:6px}

/* 인용 */
.doc blockquote,.doc .quote{margin:20px 0;padding:4px 0 4px 18px;border-left:2px solid var(--line-2);background:none;color:var(--ink-2);font-size:16px;line-height:1.75}

/* 신청 상자 — 밤색 면 + 노랑 버튼(사이트 v3와 같은 말투) */
.doc .cta-card{margin:56px 0;padding:32px 30px;background:var(--night);color:#fff;border-radius:var(--r-lg)}
.doc .cta-card h3{margin:0 0 10px;font-size:22px;font-weight:800;letter-spacing:-.03em;color:#fff}
.doc .cta-card p{margin:0;font-size:15.5px;line-height:1.75;color:var(--on-night-2)}
.doc .cta-card p+p{margin-top:10px}
.doc .cta-card a:not(.btn),.doc .cta-card .on-night-link{color:#fff!important;text-decoration-color:rgba(255,255,255,.4)!important}
.doc .cta-card a.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;margin:20px 8px 0 0;padding:0 24px;border-radius:999px;background:var(--yellow);color:#111;font-size:15.5px;font-weight:700;letter-spacing:-.01em;text-decoration:none;box-shadow:none;transition:background var(--t-fast) var(--e-std)}
.doc .cta-card a.btn:hover{background:var(--yellow-press)}
.doc .cta-card a.btn+a.btn{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32);margin-left:0!important}
@media(max-width:560px){.doc .cta-card{padding:26px 22px}.doc .cta-card a.btn{display:flex;width:100%;margin-right:0}}

/* 자주 묻는 질문 */
.doc .faq{margin-top:72px;border-top:0}
.doc .faq h2{margin-bottom:12px}
.doc .faq details{margin:0;padding:0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0}
.doc .faq details:first-of-type{border-top:1.5px solid var(--ink)}
.doc .faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);list-style:none;cursor:pointer}
.doc .faq summary::-webkit-details-marker{display:none}
.doc .faq summary::after{content:"+";float:none;flex:none;font-size:22px;font-weight:400;line-height:1;color:var(--ink)}
.doc .faq details[open] summary::after{content:"−"}
.doc .faq details p{margin:0;padding:0 0 22px;font-size:16px;color:var(--ink-2)}

/* 함께 읽을 글 */
.doc .related{margin:64px 0 0;padding:0;border-top:0}
.doc .related h3{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--ink-3)}
.doc .related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.doc .related a{display:block;padding:18px 20px;background:var(--bg-2);border-radius:var(--r-md);text-decoration:none!important;font-size:15px;font-weight:600;line-height:1.55;color:var(--ink);transition:background var(--t-fast) var(--e-std)}
.doc .related a:hover{background:#EAEAEC}
.doc .related a .topic,.doc .scenario-card .topic{display:block;margin-bottom:6px;font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink-3)}

/* 시나리오 허브 */
.doc .scenario-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:0 0 28px}
.doc .scenario-card{position:relative;display:block;padding:26px 24px 56px;background:#fff;border:0;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:box-shadow var(--t-fast) var(--e-std)}
.doc .scenario-card:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:none}
.doc .scenario-card .scenario-title{margin:0 0 10px;font-size:18px;font-weight:800;line-height:1.45;letter-spacing:-.025em;color:var(--ink)}
.doc .scenario-card .scenario-desc{margin:0 0 14px;font-size:14.5px;line-height:1.7;color:var(--ink-3)}
.doc .scenario-card .report-tag{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--bg-2);color:var(--ink-2);font-size:12.5px;font-weight:600}
.doc .scenario-card .arrow{position:absolute;right:22px;bottom:22px;color:var(--ink-3)}
.doc .scenario-card:hover .arrow{color:var(--ink)}
.doc .coming-section{margin-top:40px;padding:24px 26px;background:var(--bg-2);border-radius:var(--r-md);font-size:15px;line-height:1.75;color:var(--ink-2)}
.doc .qd-banner{margin:56px 0 8px;padding:30px 30px;background:var(--bg-2);border:0;border-radius:var(--r-lg)}
.doc .qd-banner .qb-label{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.doc .qd-banner .qb-title{margin:0 0 10px;font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.45;color:var(--ink)}
.doc .qd-banner .qb-desc{margin:0 0 18px;font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.doc .qd-banner .qb-cta{display:inline-flex;align-items:center;height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--ink);color:#fff!important;font-size:15px;font-weight:700;text-decoration:none!important}
.doc .qd-banner .qb-cta:hover{background:#2a2a2d}
.doc .qd-banner .qb-meta{margin-left:12px;font-size:13px;color:var(--ink-3)}
@media(max-width:560px){.doc .qd-banner{padding:24px 20px}.doc .qd-banner .qb-cta{display:flex;justify-content:center}.doc .qd-banner .qb-meta{display:block;margin:10px 0 0;text-align:center}}

/* 고지 묶음(시나리오 본문 끝) */
.doc .doc-notes{margin:56px 0 0;padding:20px 0 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.75;color:var(--ink-3)}
.doc .doc-notes p{margin:0 0 8px}
.doc .doc-notes strong{color:var(--ink-2)}

/* 고지 문단(본문 끝 작은 글씨) */
.doc article > p[style*="font-size:13px"]{color:var(--ink-3)!important;font-size:13px!important;line-height:1.7}

@media(max-width:760px){
  .doc article,.doc main.doc-hub{padding:28px 20px 16px;font-size:16px}
  .doc h2{margin-top:56px}
}

/* 목차(바로가기) */
.doc .doc-toc{margin:32px 0 8px;padding:16px 22px;background:var(--bg-2);border-radius:var(--r-md);font-size:15px;color:var(--ink-3)}
.doc .doc-toc p{margin:0}
.doc .doc-toc a{color:var(--ink)!important;font-weight:600}
.doc table.compare .hl,.doc table.compare td:last-child a{white-space:nowrap}