*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:var(--sans);font-size:16px}a{color:inherit}.skip{position:absolute;left:-9999px;top:8px;padding:.7rem 1rem;background:var(--ink);color:#fff;z-index:20}.skip:focus{left:8px}header{padding:0 max(20px,calc((100% - 1120px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(29,41,35,.07);z-index:5;backdrop-filter:blur(12px)}.brand{font:700 1.15rem var(--sans);text-decoration:none}nav{display:flex;align-items:center;gap:24px}nav a{font-size:.9rem;text-decoration:none}.nav-cta{padding:9px 17px;border-radius:var(--r-pill)}main{min-height:70vh}.eyebrow{margin:0 0 10px;color:var(--accent);font-size:.76rem;font-weight:850;letter-spacing:.1em}.hero{margin:0 auto;display:grid;align-items:center;overflow:hidden}.hero h1{margin:12px 0 22px;font:700 clamp(3.6rem,6.8vw,5.8rem)/1.04 var(--sans);letter-spacing:-.055em}.hero h1 em{font-style:normal}.hero-lead{max-width:570px;margin:0;color:var(--muted);line-height:1.75}.actions{margin-top:30px;display:flex;align-items:center;flex-wrap:wrap;gap:12px}.button{display:inline-flex;min-height:52px;padding:13px 22px;align-items:center;justify-content:center;gap:28px;color:#fff;font-weight:800;text-decoration:none;transition:.2s}.button:hover{transform:translateY(-2px)}.button-secondary{color:var(--ink);background:#fff}.button-secondary:hover{color:var(--accent);background:#fff}.text-link{font-weight:750;text-underline-offset:5px}.trust{margin:22px 0 0!important;display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted)!important;font-size:.85rem!important}.trust span:before{content:"•";margin-right:14px;color:#a3ada7}.trust small{flex-basis:100%;margin-top:2px}.personality-orbit{aspect-ratio:1;margin:auto;border:1px solid rgba(40,112,84,.13);border-radius:50%}.personality-orbit:before{content:"";position:absolute;inset:18%;border:1px dashed rgba(40,112,84,.25);border-radius:50%}.orbit-core{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}.orbit-core small{font-size:.68rem;opacity:.75}.orbit-core strong{font:700 1rem var(--sans)}.orbit-type{position:absolute;width:42px;height:42px;display:grid;place-items:center;background:#fff;font:700 1.2rem var(--sans);box-shadow:var(--shadow);transform:translate(-50%,-50%)}.section,.feature{padding:72px max(24px,calc((100% - 1120px)/2))}.section{background:#fff}.section-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:32px}.section-head h2,.feature h2{margin:0;font:700 clamp(2rem,4vw,3rem)/1.18 var(--sans);letter-spacing:-.035em}.section-head>p{max-width:430px;margin:0;color:var(--muted)}.reason-grid,.guide-grid,.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.reason-grid article,.guide-card,.steps>div{padding:25px;border-radius:var(--r);background:var(--paper)}.reason-grid b,.guide-card small,.guide-card span,.steps b{color:var(--accent);font-weight:850}.reason-grid h3,.steps h3{margin:10px 0 6px;font:700 1.25rem var(--sans)}.reason-grid p,.steps p{margin:0;color:var(--muted)}.type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.type-card{--card:#e8f2ec;gap:6px 12px;position:relative;overflow:hidden;border-radius:var(--r);text-decoration:none;transition:.2s}.type-heart{--card:#fff0e8}.type-head{--card:#edf0fa}.type-card:hover,.type-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.type-number{place-items:center;grid-row:1;border-radius:13px;color:var(--accent)}.type-card-title{display:flex;flex-direction:column}.type-card-title small{color:var(--muted)}.type-card p{grid-column:1/4;color:var(--muted);font-size:.9rem;line-height:1.55}.card-arrow{align-self:end;color:var(--accent);font-weight:800}.guide-card{display:flex;flex-direction:column;background:#fff;text-decoration:none;box-shadow:var(--shadow);transition:.2s}.guide-card:hover,.guide-card:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-hover)}.guide-card strong{margin:9px 0;font:700 1.3rem var(--sans)}.guide-card p{flex:1;margin:0 0 16px;color:var(--muted);font-size:.93rem}.steps{margin-top:32px}.steps>div{background:rgba(255,255,255,.65)}.closing{padding:72px 24px;text-align:center;color:#fff}.closing h2{margin:0 auto 28px;font:700 clamp(2rem,4vw,3rem)/1.25 var(--sans)}
.article{max-width:780px;margin:auto;padding:72px 24px 100px}.guide-index,.type-index{max-width:1120px}.article h1{margin:8px 0 22px;font:700 clamp(30px,5.2vw,var(--t-h1))/var(--lh-h1) var(--serif);letter-spacing:var(--ls-h1)}.article .lead{max-width:690px;color:var(--muted);font-size:1.15rem;line-height:1.78}.article section{margin:48px 0}.article h2{margin:0 0 16px;font:700 var(--t-section)/var(--lh-section) var(--serif);letter-spacing:var(--ls-section)}.article section>p{max-width:680px}.guide-index .guide-grid{grid-template-columns:repeat(3,1fr)}.type-detail{max-width:940px}.type-detail>h1{margin-bottom:18px}.fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.fact-grid section{margin:0;border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}.fact-grid section:first-child{background:var(--soft)}.fact-grid section:last-child{background:var(--warm)}.fact-grid h2{margin:0;font-size:1.2rem}.jump{margin:28px 0 52px;padding:12px 15px;display:flex;flex-wrap:wrap;gap:8px;background:#fff;border-radius:var(--r-pill);box-shadow:var(--shadow)}.jump a{padding:5px 10px;color:var(--muted);font-size:.86rem;text-decoration:none}.jump a:hover{color:var(--accent)}.patterns{padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none}.patterns li{padding:18px 20px;background:#fff;border-radius:var(--r-sm);box-shadow:0 4px 15px rgba(32,55,44,.05)}.contrast{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:54px 0}.contrast section{margin:0;padding:27px;border-radius:var(--r);background:var(--soft)}.contrast section:last-child{background:var(--warm)}.observe{margin:55px 0;padding:34px;border-radius:var(--r-lg);color:#fff}.observe .eyebrow{color:#99dabd}.observe ol{margin:18px 0 0;padding:0;list-style:none}.observe li{padding:14px 0;display:grid;grid-template-columns:40px 1fr;gap:8px;border-top:1px solid rgba(255,255,255,.16);font-size:1.04rem}.observe li span{color:#99dabd;font-weight:850}.related-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.related-cards article{margin:0;padding:22px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}.related-cards h3{margin:0;font:700 1.1rem var(--sans)}.related-cards p{color:var(--muted)}.related-cards a{color:var(--accent);font-weight:750}.related{display:flex;flex-wrap:wrap;gap:9px}.related a{padding:11px 15px;background:#fff;border-radius:var(--r-pill);box-shadow:0 3px 12px rgba(32,55,44,.07);font-size:.92rem;font-weight:700;text-decoration:none}.comparison{max-width:940px}.comparison-sides{display:grid;grid-template-columns:1fr 1fr;gap:14px}.comparison-sides section{margin:0;padding:24px;border-radius:var(--r);box-shadow:var(--shadow)}.comparison-sides section:nth-child(2){background:#f1f3fb}.comparison-sides h3{margin:2px 0 10px;font:700 1.3rem var(--sans)}.comparison-sides p:last-child{margin-bottom:0}.situations{display:grid;gap:15px}.situations>article{padding:23px;border-radius:var(--r);background:#fff}.situations>article>h3{margin:0 0 16px;font:700 1.2rem var(--sans)}.next{margin-top:60px;padding:30px;background:var(--ink);color:#fff}.notice{margin:30px 0;padding:22px;border-radius:var(--r-sm);background:#fff}footer{padding:48px max(24px,calc((100% - 1120px)/2));color:#cbd5cf;background:var(--ink)}footer strong{color:#fff;font:700 1.2rem var(--sans)}footer p{font-size:.9rem}footer div,footer .footer-sections{display:flex;gap:20px;font-size:.85rem}:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media(max-width:760px){header{height:62px}nav{gap:12px}header nav>a:not(.nav-cta){display:none}.hero{min-height:auto}.hero-lead{font-size:1rem}.personality-orbit{margin:55px auto 12px}.orbit-type{border-radius:11px;font-size:1rem}.actions{align-items:stretch}.hero .button{flex:1;padding-inline:16px;gap:12px}.trust span:before{display:none}.trust{gap:5px 12px}.section,.feature{padding:55px 20px}.section-head{display:block}.section-head>p{margin-top:16px}.type-grid,.reason-grid,.guide-grid,.steps,.fact-grid,.patterns,.contrast,.related-cards,.comparison-sides{grid-template-columns:1fr}.guide-index .guide-grid{grid-template-columns:1fr}.article{padding:54px 20px 80px}.article .lead{margin-bottom:38px}.article section{margin:40px 0}.jump{border-radius:var(--r);margin-bottom:42px}.observe{margin-left:-5px;margin-right:-5px;padding:27px 22px}.comparison-sides{gap:10px}.result-actions{flex-direction:column}}
@media(max-width:360px){.hero h1{font-size:2.75rem}.hero .button{min-width:100%;}.type-card{padding:18px}.article{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Friendly service UI — compact, card-led, and illustration-forward */
body{line-height:1.62}header{height:68px;position:sticky;top:0}.brand{font-family:var(--sans);font-weight:900;letter-spacing:-.04em}nav a{font-weight:750}
.hero{max-width:none;min-height:590px;padding:62px max(28px,calc((100% - 1120px)/2));grid-template-columns:1fr 470px;gap:50px}.hero h1{font-family:var(--sans);font-size:clamp(3.2rem,5.8vw,5.35rem);font-weight:900;line-height:1.04}.hero-lead{font-size:1.08rem}.button{border-radius:var(--r-pill);padding-inline:25px}.hero-visual{position:relative;min-height:430px}.personality-orbit{width:370px;position:absolute;right:10px;top:8px}.personality-orbit:before{display:none}.personality-orbit svg{position:absolute;inset:9%;width:82%;height:82%;fill:none}.orbit-core{font-family:var(--sans)}.orbit-type{border-radius:50%;font-family:var(--sans);font-weight:900}.orbit-9{left:50%;top:2%}.orbit-1{left:80%;top:13%}.orbit-2{left:98%;top:40%}.orbit-3{left:92%;top:72%}.orbit-4{left:66%;top:95%}.orbit-5{left:34%;top:95%}.orbit-6{left:8%;top:72%}.orbit-7{left:2%;top:40%}.orbit-8{left:20%;top:13%}
.mascot{position:relative;flex:none}.mascot-hero{position:absolute}
.section,.feature{padding-top:62px;padding-bottom:62px}.section-head h2,.feature h2,.guide-card strong,.related-cards h3,.comparison-sides h3{font-family:var(--sans);font-weight:850}.reason-grid article,.steps>div{background:#fff;box-shadow:var(--shadow)}.reason-grid article:nth-child(2){background:var(--warm)}
.type-grid{gap:18px}.type-card{padding:22px;border:0;background:#fff;box-shadow:var(--shadow)}.mascot-small{transform-origin:top right}.type-number{display:block;width:auto;height:auto;margin-bottom:34px;background:none;font:850 .72rem var(--sans);letter-spacing:.1em}.type-card-title strong{font-size:1.15rem}.type-card-title small{margin-top:3px}.type-card p{margin:15px 0 18px}.card-arrow{font-size:.82rem}.guide-card{border-top:5px solid var(--accent);min-height:210px}
.article{padding-top:58px}.detail-hero h1,.compare-hero h1{font-family:var(--serif);font-size:clamp(34px,5.8vw,var(--t-display));line-height:var(--lh-display);letter-spacing:var(--ls-display)}.article .lead{margin-bottom:35px}.article>section{padding:25px 28px;margin:22px 0;border-radius:var(--r);background:#fff;box-shadow:0 5px 18px rgba(40,74,58,.06)}.guide-index>section{padding:0;background:none;box-shadow:none}.detail-hero,.compare-hero{display:grid;grid-template-columns:1fr 190px;align-items:center;margin:0 0 28px;padding:34px;border-radius:var(--r-lg);background:linear-gradient(135deg,#e7f5ec,#fff8e7);overflow:hidden}.detail-hero .lead,.compare-hero .lead{margin-bottom:0}.fact-grid section{padding:28px}.jump{margin-bottom:28px;position:sticky;top:84px;z-index:2}.patterns li{border-left:4px solid var(--accent)}.next{border-radius:var(--r-lg)}
.compare-hero{grid-template-columns:1fr 280px}.mascot-pair{display:flex;align-items:center;justify-content:center;gap:2px}.mascot-pair>b{z-index:6;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--accent);box-shadow:var(--shadow)}.comparison>section>h2{padding-bottom:12px;border-bottom:2px solid var(--line)}.comparison-sides section{border-top:5px solid var(--accent)}.comparison-sides section:nth-child(2){border-color:#7180bd}.situations>article{box-shadow:var(--shadow)}
@media(max-width:760px){header{position:relative}.hero{padding:42px 20px 30px;display:flex;flex-direction:column;gap:20px}.hero h1{font-size:clamp(2.75rem,13vw,3.65rem)}.hero .actions{margin-top:22px}.hero .button{min-width:100%}.hero-visual{min-height:270px;width:100%}.personality-orbit{width:235px;right:0}.mascot-hero{transform:scale(.78)}.orbit-type{width:30px;height:30px}.orbit-core strong{font-size:.65rem}.section,.feature{padding-top:48px;padding-bottom:48px}.section-head h2{font-size:1.9rem}.type-grid{grid-template-columns:1fr}.type-card{min-height:205px}.article{padding-top:35px}.article>section{padding:21px 18px}.detail-hero,.compare-hero{grid-template-columns:1fr;padding:25px 20px}.mascot-detail{transform:scale(.85)}.mascot-pair{height:130px}.mascot-compare{transform:scale(.68);margin:-17px}.jump{position:static}.comparison-sides{grid-template-columns:1fr}.trust small{display:none}}
/* V1 color system: a small semantic palette shared by every public page. */
body { background: var(--paper); }
header { background: rgba(255, 255, 255, .94); border-bottom-color: var(--line); }
/* :not()을 다섯 번 겹치면 특이성이 0,5,1이 되어, 이 색을 덮으려는 컴포넌트 규칙이
순서와 상관없이 전부 진다 — 어두운 푸터의 흰 밑줄이 그렇게 파랗게 남았다.
:where()는 특이성을 더하지 않는다. 고르는 대상은 그대로, 무게만 0,0,1로 낮춘다. */
a:not(:where(.button,.type-card,.guide-card,.brand,.nav-cta,.paid-nav)) { text-decoration-color: rgba(66, 152, 180, .45); }
.brand:before, .eyebrow, .reason-grid b, .guide-card small, .guide-card span,
.steps b, .jump a:hover, .related-cards a, .related a { color: var(--blue); }
.button { background: var(--blue); box-shadow: 0 8px 22px rgba(66, 152, 180, .22); }
.button:hover { background: var(--accent-dark); }
.button-secondary, .button-secondary:hover { background: #fff; }
.hero { background: linear-gradient(135deg, #F2FAFC 0%, #FBF8FD 100%); }
.hero h1 em { color: var(--purple); }
.personality-orbit { border-color: rgba(136, 97, 154, .18); background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 10px rgba(255,255,255,.45), 0 20px 60px rgba(136,97,154,.12); }
.personality-orbit svg { stroke: url(#center-spectrum); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(38, 50, 56, .08)); }
.orbit-core { inset: 33%; padding: 5px; background: conic-gradient(from -30deg, var(--coral) 0 33.33%, var(--green) 33.33% 66.66%, var(--purple) 66.66%); border-radius: 42% 58% 46% 54% / 55% 43% 57% 45%; box-shadow: 0 14px 34px rgba(79, 70, 103, .22); transform: rotate(-3deg); }
.orbit-core > span { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: inherit; background: #303A3F; transform: rotate(3deg); }
.orbit-type { color: var(--purple); border: 2px solid currentColor; }
.orbit-gut { color: var(--coral); }
.orbit-heart { color: var(--green); }
.orbit-head { color: var(--purple); }
.section, .reason-grid article, .steps > div, .guide-card, .article > section,
.fact-grid section, .patterns li, .related-cards article, .related a, .situations > article { background: #fff; }
.section:nth-of-type(3) { background: var(--paper); }
.feature { background: #F1F8FB; }
.reason-grid article:nth-child(2), .fact-grid section:last-child { background: var(--warm); }
.reason-grid article:nth-child(3) { background: #F5F1F7; }
.guide-card { border-top-color: var(--blue); }
/* Center families, differentiated with tint rather than nine unrelated colors. */
.type-gut { --center: var(--coral); --center-tint: #FFF1F1; background: linear-gradient(145deg, #fff, var(--center-tint)); }
.type-heart { --center: var(--green); --center-tint: #EDF8F3; background: linear-gradient(145deg, #fff, var(--center-tint)); }
.type-head { --center: var(--purple); --center-tint: var(--tint-purple); background: linear-gradient(145deg, #fff, var(--center-tint)); }
.type-card .type-number, .type-card .card-arrow { color: var(--center, var(--blue)); }
.type-card:nth-child(3n+2) { filter: saturate(.96) brightness(1.01); }
.type-card:nth-child(3n) { --center-tint: color-mix(in srgb, var(--center, var(--blue)) 9%, white); }
.detail-hero { background: linear-gradient(135deg, #F1F8FB, #F6F2F8); }
.compare-hero { background: linear-gradient(135deg, #F5F1F7, #F1F8FB); }
.comparison-sides section { border-top-color: var(--blue); background: #fff; }
.comparison-sides section:nth-child(2) { border-top-color: var(--purple); }
.patterns li { border-left-color: var(--green); }
.observe { background: linear-gradient(135deg, #765187, var(--purple)); }
.observe .eyebrow, .observe li span { color: #F0DDF5; }
.closing { background: #303A3F; }
.closing .button { color: var(--blue-deep); background: #fff; box-shadow: none; }
/* Individual transparent character assets retain the reference-board roles. */
.mascot.character{width:132px;height:158px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 12px rgba(38,50,56,.14))}
.mascot-small{position:absolute;width:104px!important;height:124px!important;right:14px;top:12px;transform:none}
.mascot-hero{width:150px!important;height:188px!important;right:280px;bottom:-4px;transform:rotate(-3deg);object-position:center bottom}
.mascot-detail{width:150px!important;height:180px!important;transform:none;margin:auto}
.mascot-compare{width:112px!important;height:140px!important;transform:none;margin:-5px}
.type-card{padding-right:116px;min-height:250px}.type-card p{max-width:100%}
@media(max-width:760px){.mascot-hero{width:115px!important;height:145px!important;right:auto;left:5px;bottom:0}.mascot-detail{width:120px!important;height:140px!important}.mascot-compare{width:94px!important;height:116px!important}.type-card{padding-right:112px}}
/* B3 brand assets */
.brand:before{content:none}
.brand{display:flex;align-items:center;gap:9px;white-space:nowrap}.brand img{display:block;width:38px;height:38px;object-fit:contain}.brand span{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:-.01em}.footer-brand{display:block;width:max-content;color:#fff;font:800 1.15rem var(--sans);letter-spacing:-.035em;text-decoration:none}
@media(max-width:760px){.brand span{font-size:15px}header{gap:12px}nav{min-width:0}.footer-brand{font-size:1.05rem}}
/* Navigation affordances: links that leave the page should read as controls, not decoration. */
nav a:not(.nav-cta,.paid-nav){padding:8px 2px;border-bottom:2px solid transparent;transition:border-color .18s,color .18s}
nav a:not(.nav-cta,.paid-nav):hover,nav a:not(.nav-cta,.paid-nav):focus-visible{color:var(--blue);border-bottom-color:currentColor}
.nav-cta,.button{border:2px solid transparent}
.button-secondary{border-color:var(--line);box-shadow:0 4px 14px rgba(38,50,56,.08)}
.button-secondary:hover,.button-secondary:focus-visible{border-color:var(--blue);box-shadow:0 8px 20px rgba(66,152,180,.14)}
.type-card,.guide-card{border:1px solid var(--line)}
.type-card:hover,.type-card:focus-visible,.guide-card:hover,.guide-card:focus-visible{border-color:color-mix(in srgb,var(--blue) 55%,white)}
.card-arrow,.guide-card>span{display:inline-flex;align-items:center;gap:7px;font-weight:850;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.card-arrow::after,.guide-card>span::after{content:"›";display:grid;width:22px;height:22px;place-items:center;border-radius:50%;color:#fff;background:var(--blue);font-size:1rem;line-height:1;text-decoration:none}
.type-card .card-arrow::after{background:var(--center,var(--blue))}
/* 푸터 링크도 컨트롤로 읽혀야 한다. 색·굵기가 본문과 똑같고 밑줄이 글자에 붙어
있어서 그냥 회색 낱말의 나열로 보였다 — 오픈채팅까지 그랬다.
밝기로 띄우고, 밑줄을 글자에서 떼고, 손을 올렸을 때 반응을 만든다. */
footer div a,footer .footer-sections a{padding:4px 0;color:var(--white);font-weight:700;
text-decoration-thickness:1px;text-underline-offset:5px;
text-decoration-color:rgba(255,255,255,.5);
transition:text-decoration-color .18s,color .18s}
footer div a:hover,footer div a:focus-visible,
footer .footer-sections a:hover,footer .footer-sections a:focus-visible{text-decoration-color:currentColor}
/* 섹션 줄은 약관 줄과 성격이 다른 줄이다. 규칙은 같은 것을 쓰되 무게만 한 단 올려
돌아가는 경로임을 먼저 읽히게 한다. */
footer .footer-sections{margin:14px 0 6px;font-size:.9rem}
footer .footer-sections a{font-weight:800}
/* 새 탭으로 나가는 링크는 그 사실도 같이 보여 준다. */
footer a[target="_blank"]{white-space:nowrap}footer a[target="_blank"]::after{content:"↗";margin-left:5px;font-size:.9em;line-height:1}
/* 손가락으로 누르는 크기까지 키운다. 44px는 터치 타깃 권장 최소치이고,
좁은 화면에서 링크가 줄바꿈되므로 세로 간격도 함께 벌린다. */
@media(max-width:760px){footer div,footer .footer-sections{flex-wrap:wrap;gap:4px 18px}
footer div a,footer .footer-sections a{padding:11px 0}
/* 섹션 줄만 가운데로 모은다. 링크 넉 줄이 좁은 화면에서 왼쪽에 몰려 있으면 뒤에
남는 빈 폭이 커 줄이 끊긴 것처럼 보인다. 320px에서는 「프리미엄 검사」가 둘째
줄로 접히는데, 그때 가운데 정렬이라야 한 줄짜리 둘째 행이 균형을 잡는다 —
우측 정렬이면 왼쪽이 뜯긴다. 브랜드·문구·약관 줄은 왼쪽 기준선을 지킨다. */
footer .footer-sections{justify-content:center}}
/* 카드 CTA를 아래쪽에 고정한다. 뒤쪽 override에서 display:grid가 block으로 바뀌면서
자리를 잡아 주던 align-self:end가 풀렸고, 본문 길이에 따라 "자세히 보기 →"의 세로
위치가 카드마다 달라졌다. 세로축은 margin-top:auto로 잡는다. 가로축은 flex-start로
되돌린다 — 세로 방향 flex에서 align-self:end는 오른쪽 정렬이 되기 때문이다. */
.type-card{display:flex;flex-direction:column}
.type-card .card-arrow{margin-top:auto;align-self:flex-start}
.related-cards a{display:inline-flex;min-height:42px;padding:9px 13px;align-items:center;border:1px solid color-mix(in srgb,var(--blue) 45%,white);border-radius:var(--r-pill);background:#fff;text-decoration:none}
.related-cards a:hover,.related-cards a:focus-visible,.related a:hover,.related a:focus-visible{border-color:var(--blue);background:#f1f8fb;box-shadow:0 6px 16px rgba(66,152,180,.12)}
.related a{border:1px solid var(--line)}
@media(max-width:760px){nav .nav-cta{padding:10px 16px}.related-cards a{width:100%;justify-content:center}.card-arrow,.guide-card>span{min-height:38px}}
/* 프리미엄 검사 진입 지점. 동결된 V1 컴포넌트 언어를 그대로 재사용한다. */
.button-disabled{cursor:not-allowed;opacity:.62}
/* 헤더 위계: 프리미엄이 1순위다. 파는 물건이 무료 물건보다 가벼워 보이고 있었다 —
.paid-nav는 평범한 텍스트 링크였고 .nav-cta만 채운 알약이었다.
지렛대는 채움·명도·무게 셋뿐이다. 폭으로는 강조할 수 없다: 320px에서 내비에
남는 230px 중 두 버튼이 이미 198px를 쓴다(build.mjs의 실측 주석).
잉크는 흰 바탕에서 12.6:1로 블루(3.3:1)를 압도하고, 리포트 레지스터의 색이라
파는 물건(문서)과 의미가 맞는다. 기하와 라벨은 건드리지 않는다. */
.paid-nav{
display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;
border:2px solid transparent;border-radius:var(--r-pill);
background:var(--ink);color:var(--white);font-weight:800;text-decoration:none;
box-shadow:0 8px 22px rgba(38,50,56,.20);
transition:background .18s,box-shadow .18s
}
.paid-nav:hover,.paid-nav:focus-visible{
background:var(--blue-deep);box-shadow:0 8px 22px rgba(50,125,150,.24)
}
.paid-nav:active{box-shadow:none;transform:translateY(1px)}
/* 무료는 버튼 자격을 유지하고 무게만 뺀다. 유입의 입구이고 프리미엄을 먹여 살리는
경로다(D-019 — 즉시 결제가 없고 문의를 거친다). 라벨이 --blue가 아니라
--blue-deep인 이유: 블루는 흰 바탕에서 3.3:1로 본문 크기에 미달한다. */
.nav-cta{
background:var(--white);border-color:var(--blue);color:var(--blue-deep);box-shadow:none
}
.nav-cta:hover,.nav-cta:focus-visible{
border-color:var(--blue-deep);background:#f1f8fb;box-shadow:none
}
.nav-cta:active{background:#e4f0f5;transform:translateY(1px)}
@media(max-width:760px){header nav>a.paid-nav{display:block}.paid-nav{white-space:nowrap}}
/* ≤380px에서 프리미엄만 글자가 작아지던 규칙을 뒤집는다. 줄일 쪽은 무료다. */
@media(max-width:380px){
nav{gap:8px}
.paid-nav{font-size:1rem;padding-inline:14px}
nav .nav-cta{font-size:.86rem;padding-inline:12px}
}
/* ── 홈의 유료 띠 ──────────────────────────────────────────────────────────
'더 시끄러운 카드'가 아니라 다른 재료다 — 유형 그리드 아홉 장과 경쟁하지 않고
흐름을 한 번 끊는다. 헤더 .paid-nav와 같은 잉크(잉크 = 유료). */
.premium-band{
padding:clamp(40px,6vw,72px) max(20px,calc((100% - 1120px)/2));
background:var(--ink);color:var(--white)
}
.premium-band .eyebrow{color:rgba(255,255,255,.72)}
.premium-band h2{max-width:24em;color:var(--white)}
.premium-band>p{max-width:36em;color:rgba(255,255,255,.8)}
.premium-facts{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;max-width:44em;
margin:26px 0 30px;
border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)
}
.premium-facts>div{padding:14px 18px;border-right:1px solid rgba(255,255,255,.2)}
.premium-facts>div:first-child{padding-left:0}
.premium-facts>div:last-child{padding-right:0;border-right:0}
.premium-facts dt{
font-size:var(--t-micro);font-weight:800;letter-spacing:var(--ls-label);
color:rgba(255,255,255,.66)
}
.premium-facts dd{margin:5px 0 0;font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums}
/* 어두운 바탕의 버튼은 .closing과 같은 패턴이다: 흰 알약 + 딥블루 라벨.
--blue를 쓰면 흰 바탕에서 3.3:1로 AA 미달이다. */
.premium-band-cta{background:var(--white);color:var(--blue-deep);box-shadow:none}
.premium-band-cta:hover,.premium-band-cta:focus-visible{background:#f1f8fb;box-shadow:none}
/* 닫는 자리의 1순위는 무료 검사다. 프리미엄은 텍스트 링크 한 줄로만 따라붙는다. */
.closing-alt{margin:18px 0 0}
.closing-alt a{color:rgba(255,255,255,.82)}
/* 열 수를 고정하지 않는다 — 이 저장소가 두 번 낸 사고다(D-033, D-034). */
@media(max-width:760px){
.premium-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.premium-facts>div:nth-child(2n){padding-right:0;border-right:0}
.premium-facts>div:nth-child(2n+1){padding-left:0}
.premium-facts>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.2)}
}
/* ── /premium/ 안내 페이지 (D-048) ─────────────────────────────────────────
에디토리얼 셸 안에서 본문 어법만 문서 쪽으로 옮긴다. 카드가 아니라 괘선 구획이고,
radius 0에 그림자를 얹지 않는다. 표지 미리보기의 내용은 report.css가 그린다 —
여기 새로 들어가는 것은 감싸는 종이 한 장(.report-sample)뿐이다. */
.paid-guide{max-width:940px}
/* .article>section의 흰 카드를 이 페이지에서만 거둔다. */
.paid-guide>section{margin:56px 0;padding:0;border-radius:0;background:none;box-shadow:none}
.paid-head{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.paid-no{font-size:var(--t-label);font-weight:800;letter-spacing:var(--ls-micro);color:var(--muted)}
.paid-head h2{margin:0;font-size:var(--t-section);line-height:var(--lh-section);letter-spacing:var(--ls-section)}
.paid-aside{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.paid-intro{margin:18px 0 0;max-width:46em;font-size:var(--t-caption);line-height:var(--lh-caption);color:var(--muted)}
/* 표제 아래 사실 네 칸 */
.paid-facts{margin:0 0 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.paid-facts>div{padding:14px 18px;border-right:1px solid var(--line)}
.paid-facts>div:first-child{padding-left:0}
.paid-facts>div:last-child{padding-right:0;border-right:0}
.paid-facts dt{font-size:10.5px;font-weight:800;letter-spacing:var(--ls-label);color:var(--muted)}
.paid-facts dd{margin:5px 0 0;font-size:1.05rem;font-weight:700}
/* 결과지 미리보기를 감싸는 종이 한 장. 안쪽은 전부 report.css가 그린다. */
/* 센터 색은 예시 유형에서 따라온다. 하드코딩하면 예시 유형을 바꿨을 때
표제는 그 유형의 색인데 도형만 옛 색으로 남는다 — 실제로 5유형에서 9유형으로
바꾸며 그 상태가 났다. 키는 결과지와 같은 gut/heart/head를 쓴다(D-016). */
.report-sample{
--center:var(--coral);
--center-deep:var(--coral-deep);
margin:26px 0 0;padding:28px 32px 34px;
border:1px solid var(--line);border-radius:0;background:var(--white)}
/* 시트가 아니라 미리보기라 폭이 좁다. 결과지의 360px 도형 칼럼을 그대로 두면
좌측 본문이 눌리고 판정 네 칸에서 낱말이 쪼개진다 — D-033과 같은 실패다. */
.report-sample .report-cover{grid-template-columns:minmax(0,1fr) 280px;gap:36px;padding-top:32px}
.report-sample .report-figure{padding-left:28px}
.report-sample .report-cover h1{font-size:clamp(28px,3.4vw,38px)}
.report-sample .cover-lead{margin-bottom:26px;font-size:16.5px;line-height:1.85}
.report-sample .verdict{grid-template-columns:repeat(2,minmax(0,1fr))}
.report-sample .verdict>div:nth-child(2n){padding-right:0;border-right:0}
.report-sample .verdict>div:nth-child(2n+1){padding-left:0}
.report-sample .verdict>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.report-sample[data-center="heart"]{--center:var(--green); --center-deep:var(--green-deep)}
.report-sample[data-center="head"] {--center:var(--purple);--center-deep:var(--purple-deep)}
.report-sample>figcaption{
margin-top:20px;padding-top:14px;border-top:1px solid var(--line);
font-size:var(--t-caption);line-height:var(--lh-caption);color:var(--muted)}
.report-sample>figcaption b{color:var(--ink)}
/* 02 담기는 것 — 번호·제목·설명 3열 괘선 행 */
.deliver-list{margin-top:26px;border-top:1px solid var(--line)}
.deliver-row{display:grid;grid-template-columns:44px 190px minmax(0,1fr);gap:0 20px;
padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.deliver-no{font-size:var(--t-micro);font-weight:800;letter-spacing:var(--ls-label);color:var(--muted)}
.deliver-row strong{font-size:1.02rem}
.deliver-row p{margin:0;font-size:var(--t-prose-m);line-height:var(--lh-prose-m);color:var(--muted)}
.deliver-row p b{color:var(--ink);font-weight:700}
/* 03 무료와의 차이 — 라벨 + 두 값 */
.compare-table{margin-top:26px;border-top:1px solid var(--line)}
.compare-row{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.25fr);gap:0 20px;
padding:16px 0;border-bottom:1px solid var(--line)}
.compare-head{padding:0 0 10px}
.compare-head span{font-size:var(--t-micro);font-weight:800;
letter-spacing:var(--ls-label);color:var(--muted)}
.compare-label{font-size:var(--t-label);font-weight:800;letter-spacing:var(--ls-label);color:var(--muted)}
/* 무료 열은 한 단 물러나 있어야 두 열의 차이가 표 자체로 읽힌다. */
.compare-free{color:var(--muted);font-size:var(--t-prose-m);line-height:var(--lh-prose-m)}
.compare-paid{font-size:var(--t-prose-m);line-height:var(--lh-prose-m)}
/* 04 이용 방법 — 카드 세 장이 아니라 괘선 세 칸 */
.step-grid{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.step-cell{padding:22px 24px;border-right:1px solid var(--line)}
.step-cell:first-child{padding-left:0}
.step-cell:last-child{padding-right:0;border-right:0}
.step-no{display:block;margin-bottom:8px;font-size:var(--t-micro);font-weight:800;
letter-spacing:var(--ls-label);color:var(--muted)}
.step-cell strong{display:block;margin-bottom:8px;font-size:1.02rem}
.step-cell p{margin:0;font-size:var(--t-caption);line-height:var(--lh-caption);color:var(--muted)}
/* 맺음 — 어두운 .next 블록을 쓰지 않는다. 괘선 구획에서 그 덩어리만 튄다. */
.paid-closing{margin-top:60px;padding-top:24px;border-top:2px solid var(--ink)}
.paid-closing-label{margin:0 0 10px;font-size:var(--t-label);font-weight:800;
letter-spacing:var(--ls-label);color:var(--muted)}
.paid-closing>p{margin:0;max-width:46em;font-size:var(--t-prose-m);line-height:var(--lh-prose-m)}
.paid-closing-actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
/* 간기 */
.paid-colophon{margin:60px 0 0;padding-top:18px;border-top:2px solid var(--ink);
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
font-size:11.5px;line-height:1.7;color:var(--muted)}
.paid-colophon dt{color:var(--ink);font-size:var(--t-label);font-weight:800;margin-bottom:3px}
.paid-colophon dd{margin:0}
/* 열 수를 고정하지 않는다. 열 고정으로 두 번 결함이 났다(D-033, D-034). */
@media(max-width:900px){
.paid-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.paid-facts>div:nth-child(2n){padding-right:0;border-right:0}
.paid-facts>div:nth-child(2n+1){padding-left:0}
.report-sample{padding:22px 20px 26px}
.report-sample .report-cover{grid-template-columns:1fr;gap:28px}
.report-sample .report-figure{padding-left:0}
.deliver-row{grid-template-columns:44px minmax(0,1fr)}
.deliver-row p{grid-column:2}
.step-grid{grid-template-columns:1fr}
.step-cell{padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}
.step-cell:last-child{border-bottom:0}
.paid-colophon{grid-template-columns:1fr}
.paid-head{flex-wrap:wrap}
.paid-aside{margin-left:0;flex-basis:100%}
.paid-closing-actions .button{width:100%}
}
@media(max-width:620px){
/* 3열을 390px에 넣으면 본문이 사라진다. 라벨 아래로 두 값을 쌓는다.
쌓고 나면 머리 행은 어느 열을 가리키는지 알 수 없으므로 감추고,
대신 두 값 앞에 렌더러가 번역한 열 이름을 붙인다. */
.compare-row{grid-template-columns:1fr;gap:10px}
.compare-head{display:none}
.compare-label{margin-bottom:2px}
.compare-free::before{content:attr(data-compare-label) " ";font-weight:800;color:var(--muted)}
.compare-paid::before{content:attr(data-compare-label) " ";font-weight:800;color:var(--muted)}
}
/* 좁은 화면의 헤더 — 워드마크 글자를 접는다 (D-050)
320px에서 헤더가 요구하는 폭은 395px다: 브랜드 169(마크 38 + 여백 9 + 글자 122)
+ 내비 186 + 좌우 여백 40. 셋 다 넣을 수 없어 하나를 접어야 하고, 접는 것은
워드마크 글자다. 로고 마크는 그대로 남아 홈 링크 노릇을 하고, 내비 링크 둘은
모든 폭에서 유지된다 — /premium/으로 가는 링크가 페이지마다 내비 하나뿐이라
그쪽을 접으면 모바일에서 프리미엄 페이지에 도달할 길이 없어진다.
406px가 워드마크를 두고도 한 줄에 들어가는 최소 폭이라(실측) 410px에서 끊는다. */
.nav-cta{white-space:nowrap}
/* D-050의 워드마크 접기. 임계값이 410px에서 470px로 올라갔다 — 그때 실측은
프리미엄이 평범한 텍스트 링크(padding:8px 2px)일 때의 것이고, 알약이 되면서
내비가 요구하는 폭이 242px가 됐다. 필요한 폭은 20(패딩) + 166(브랜드) +
12(gap) + 242(내비) + 20 = 460px이라 411–460px에서 .nav-cta가 화면 밖으로
밀려났다. 좁으면 워드마크를 접는다는 D-050의 답을 그대로 쓴다. */
@media(max-width:470px){.brand span{display:none}}
/* ── 읽을거리 — 자동 생성 글의 표면 (D-054의 화면 연결) ──────────────────────
새 토큰을 만들지 않는다(D-035). 센터 색은 D-016을 따르고, 색은 언제나 구분의
보조 수단이다 — 유형과 센터는 카드마다 텍스트로도 함께 적힌다.
카드 골격은 .guide-card에서 파생시켰고 상단 괘선만 5px에서 4px로 줄였다.
가이드와 글이 한 페이지에 놓일 때 두께로 갈린다. */
.article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.article-card{position:relative;display:flex;flex-direction:column;gap:9px;padding:22px 24px;
border:1px solid var(--line);border-top:4px solid var(--center,var(--blue));border-radius:var(--r);
background:#fff;box-shadow:var(--shadow);transition:.2s}
.article-card-gut{--center:var(--coral);--center-deep:var(--coral-deep);--center-tint:var(--tint-coral)}
.article-card-heart{--center:var(--green);--center-deep:var(--green-deep);--center-tint:var(--soft)}
.article-card-head{--center:var(--purple);--center-deep:var(--purple-deep);--center-tint:var(--tint-purple)}
.article-card:hover,.article-card:focus-within{transform:translateY(-3px);box-shadow:var(--shadow-hover);
border-color:color-mix(in srgb,var(--center,var(--blue)) 55%,white)}
.article-card-kicker{margin:0;color:var(--center-deep,var(--blue-deep));font-size:.76rem;font-weight:850;letter-spacing:.08em}
.article-card h2,.article-card h3{margin:0;font:850 1.08rem/1.45 var(--sans);letter-spacing:-.01em}
.article-card a{text-decoration:none}
.article-card h2 a::after,.article-card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
/* excerpt는 생성기가 쓰는 최대 500자 필드다. 한 건이 길면 그리드 stretch로 세 장이
함께 늘어나 카드 수를 정한 전제가 깨진다. 세 줄로 끊는다 — 한국어 요약은 두 줄로
문장 하나를 못 마치는 경우가 많고, 넘치는 요약은 상세로 유도된다.
flex:1은 그대로 둔다(CTA를 아래로 밀어 준다). */
.article-card-excerpt{flex:1;margin:0;color:var(--muted);font-size:.88rem;line-height:1.65;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.article-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
margin:0;padding-top:11px;border-top:1px solid var(--line);
color:var(--muted);font-size:.72rem;font-variant-numeric:tabular-nums}
.article-card-go{color:var(--center-deep,var(--blue-deep));font-size:.78rem;font-weight:850}
/* 괘선 목록 — 네 건 이상인 색인. 한 갈래로 이미 묶여 있어 카드마다 색을 되풀이하지 않는다. */
.article-rows{display:grid}
.article-row{position:relative;display:grid;grid-template-columns:4px minmax(0,1fr);gap:0 16px;
border-bottom:1px solid var(--line)}
.article-row-rule{background:var(--center,var(--blue));border-radius:2px}
.article-row-body{display:grid;gap:7px;padding:20px 0}
.article-row h2,.article-row h3{margin:0;font:850 1.05rem/1.45 var(--sans);letter-spacing:-.01em}
.article-row a{text-decoration:none}
.article-row h2 a::after,.article-row h3 a::after{content:"";position:absolute;inset:0}
.article-row .article-card-foot{padding-top:0;border-top:0}
/* 미니 — 유형·가이드 본문을 다 읽고 내려온 자리. 제목과 날짜만으로 고르게 한다. */
.article-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.article-mini{position:relative;display:grid;gap:6px;padding:17px 19px;border-radius:var(--r-sm);
border:1px solid var(--line);border-left:3px solid var(--center,var(--blue));background:#fff;transition:.2s}
.article-mini:hover,.article-mini:focus-within{border-color:color-mix(in srgb,var(--center,var(--blue)) 55%,white);
box-shadow:0 6px 16px rgba(66,152,180,.12)}
.article-mini h3,.article-mini h4{margin:0;font:850 .95rem/1.45 var(--sans)}
.article-mini a{text-decoration:none}
.article-mini h3 a::after,.article-mini h4 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-sm)}
.article-mini .article-card-foot{padding-top:0;border-top:0}
/* 관련 글 영역. .article 안에서는 흰 카드 규칙(.article>section)이 걸리므로 되돌린다 —
카드 안의 카드가 된다. */
.article-strip{display:grid;gap:14px}
.article > .article-strip{margin:44px 0 0;padding:0;background:none;box-shadow:none}
.article-strip-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 18px;
padding-bottom:10px;border-bottom:1px solid var(--line)}
.article-strip-head h2{margin:0;font:850 1.2rem var(--sans)}
/* 배지와 태그. styles.css의 .chip·.tag와 같은 값이지만 컴포넌트는 합치지 않는다(D-035).
색만으로 뜻을 전하지 않도록 점과 텍스트를 함께 둔다. */
.article-chip,.article-tag{display:inline-flex;align-items:center;gap:6px;
padding:3px 11px;border-radius:var(--r-pill);font-size:.74rem;font-weight:700;white-space:nowrap}
.article-chip{background:var(--center-tint,var(--paper));color:var(--center-deep,var(--blue-deep))}
.article-chip i{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.article-tag{border:1px solid var(--line);color:var(--muted);font-weight:600}
.article-tags{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:32px 0 0}
.article-tags-label{color:var(--muted);font-size:.72rem;font-weight:850;letter-spacing:.08em}
/* 필터 — 한 번에 한 기준. 전부 링크이고, 선택된 것만 aria-current를 받는다.
배경색이 아니라 그 속성이 상태의 근거다. */
.facet-bar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 12px;padding:11px 15px;
border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;box-shadow:var(--shadow)}
.facet-label{flex:none;padding-right:5px;color:var(--muted);font-size:.7rem;font-weight:850;letter-spacing:.1em}
/* 걸러진 목록임을 칩 줄과 무관하게 말한다. 칩이 스크롤 밖에 있어도 남는다. */
.facet-state{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;
margin:0 0 10px;font-size:var(--t-caption);color:var(--muted)}
.facet-state>span{font-size:var(--t-micro);font-weight:850;
letter-spacing:var(--ls-label);color:var(--ink)}
.facet-state a{font-weight:700}
.facet-bar a{display:inline-flex;flex:none;align-items:center;min-height:38px;padding:6px 13px;border-radius:var(--r-pill);
border:1px solid transparent;color:var(--muted);font-size:.85rem;font-weight:700;text-decoration:none}
.facet-bar a:hover{border-color:color-mix(in srgb,var(--blue) 45%,white);color:var(--accent-dark);background:#f1f8fb}
.facet-bar a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:850}
/* 쪽 나누기 */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;margin:36px 0 0}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
padding:0 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;
color:var(--muted);font-size:.88rem;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
.pager a:hover{border-color:var(--blue);color:var(--accent-dark);background:#f1f8fb}
.pager [aria-current]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:850}
.pager .is-off{opacity:.4}
/* 접힌 쪽의 생략표. 링크가 아니므로 44px 타깃도 테두리도 갖지 않는다. */
.pager .pager-gap{min-width:0;min-height:0;padding:0 2px;border:0;background:none;color:var(--muted)}
/* 글 상세 — 사이드바를 두지 않는다. 모바일에서 본문 폭과 글자 크기가 최우선이다. */
.article-detail{max-width:820px}
.article-hero{margin:0 0 30px;padding:30px 32px;border-radius:var(--r-lg);
background:linear-gradient(135deg,var(--center-tint,#F1F8FB),#fff)}
.article-badges{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.article-detail h1{margin:0;font:700 clamp(28px,5vw,var(--t-h1))/var(--lh-h1) var(--serif);letter-spacing:var(--ls-h1)}
.article-dates{margin:14px 0 0;color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}
.article-cta h2{margin:0 0 12px;font:850 1.15rem var(--sans)}
.article-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;
margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
/* 간기 한 줄. 고지(.notice)보다 가볍고, 태그 줄보다 조용하다. 자동 생성 사실은
숨기지도 않지만 본문과 경쟁하지도 않는다. 카드도 틴트도 아이콘도 아니다. */
.article-origin{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
color:var(--muted);font-size:var(--t-caption);line-height:var(--lh-caption)}
/* 산문 뒤의 블록도 같은 폭에 둔다. 표제부 772 → 산문 595 → 태그 772로 폭이 왕복하면
좌측만 정렬되고 우측이 어긋난다. .article-hero와 .article-strip은 산문이 아니므로
넓은 폭을 유지한다 — 좁히면 미니 세 장이 한 줄에 들어가지 않는다.
--measure를 그대로 걸 수 없다. em은 각 블록의 제 글자 크기로 풀리므로 고지는
16px→544px, 간기는 14px→476px가 되어 우측이 도리어 세 갈래로 갈린다. 산문 글자
기준으로 한 번만 풀어 지역 토큰에 담는다(--measure는 report.css도 쓰므로
base.css에서 손대지 않는다). 34는 --measure의 그 34자다. */
.article-detail{--column:calc(34 * var(--t-prose-l))}
.article-detail .prose,
.article-detail .article-tags,
.article-detail .notice,
.article-detail .article-origin,
.article-detail .article-cta{max-width:var(--column)}
/* 본문. 계약된 태그만 스타일이 있고, 계약 밖은 빌드가 먼저 선다(scripts/articles.mjs). */
/* em이 산문 글자로 풀리게 한다. .prose에 font-size가 없으면 --measure의 34em이
상속된 16px로 풀려 의도한 595px이 아니라 544px이 된다. p는 상속만 받는다. */
.prose{font-size:var(--t-prose-l);line-height:var(--lh-prose-l);max-width:var(--measure);color:var(--ink)}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 20px;font-size:1em;line-height:inherit}
.prose h2{margin:44px 0 14px;font:700 var(--t-section)/var(--lh-section) var(--serif);letter-spacing:var(--ls-section)}
.prose h3{margin:32px 0 10px;font:850 var(--t-subhead)/var(--lh-subhead) var(--sans)}
.prose ul,.prose ol{margin:0 0 20px;padding-left:1.3em;font-size:var(--t-prose-m);line-height:1.9}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--muted)}
.prose blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--blue);
color:var(--muted);font-size:var(--t-prose-m);line-height:1.85}
.prose blockquote p:last-child{margin-bottom:0}
.prose hr{margin:36px 0;border:0;border-top:1px solid var(--line)}
.prose code{padding:2px 6px;border-radius:6px;background:var(--paper);font-size:.92em}
.prose a{color:var(--accent);font-weight:700;text-underline-offset:4px}
/* 홈 섹션. 기존 홈 콘텐츠보다 앞서지 않도록 표제를 한 단 낮춘다. */
.articles-home{background:var(--paper)}
.articles-home .section-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem)}
.articles-home-more{margin:22px 0 0}
@media(max-width:760px){
.article-grid,.article-mini-grid{grid-template-columns:1fr}
.article-card{padding:19px 20px}
.article-hero{margin-bottom:24px;padding:22px 20px;border-radius:var(--r)}
.article-detail h1{font-size:clamp(26px,7vw,32px)}
.article > .article-strip{margin-top:36px}
/* 칩 줄만 자체 스크롤을 갖는다. 줄바꿈으로 쌓으면 필터가 화면 한 판을 먹는다. */
.facet-bar{flex-wrap:nowrap;overflow-x:auto;border-radius:var(--r);scrollbar-width:none;
/* 스크롤바를 감췄으므로 "더 있다"를 끝단으로 말한다. */
mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.facet-bar a{min-height:44px;white-space:nowrap}
.article-foot{flex-direction:column;gap:12px}
}
@media(max-width:360px){
.article-grid{gap:12px}
/* 34em은 360px에서 넘친다. 좌우 여백은 .article이 이미 잡고 있다.
.article-detail .prose가 생겼으므로 특정도를 맞춰야 이 줄이 계속 이긴다. */
.prose,.article-detail .prose{max-width:100%}
.prose p{font-size:var(--t-prose-m);line-height:var(--lh-prose-m)}
}
/* ── 모바일 섹션 내비 ────────────────────────────────────────────────────────
760px 이하에서 헤더는 프리미엄·무료 검사 두 개만 남기고 섹션 링크를 접는다.
그 폭에서 헤더 내비에 남는 자리가 32px뿐이라 링크 하나도 들어가지 않는다.
접힌 링크가 갈 곳이 없으면 모바일에서 유형·가이드·읽을거리에 닿는 길이 본문
안 링크뿐이 된다. 헤더를 비집는 대신 아래 한 줄을 준다.
데스크톱에서는 헤더 내비가 같은 링크를 이미 갖고 있어 이 줄을 그리지 않는다.
display:none이라 접근성 트리에서도 빠져 같은 링크가 두 벌로 읽히지 않는다. */
.section-nav{display:none}
@media(max-width:760px){
.section-nav{
display:flex;gap:12px;align-items:center;
padding:5px 20px;overflow-x:auto;scrollbar-width:none;
background:#fff;border-bottom:1px solid var(--line)
}
/* 헤더가 sticky가 아닌 폭이라 이 줄은 스크롤과 함께 올라가 자리를 돌려준다. */
.section-nav a{
display:inline-flex;flex:none;align-items:center;min-height:44px;
padding:0 12px;border-radius:var(--r-pill);
color:var(--muted);font-size:.88rem;font-weight:700;
text-decoration:none;white-space:nowrap
}
.section-nav a:first-child{margin-inline-start:auto}
.section-nav a:last-child{margin-inline-end:auto}
/* 현재 섹션은 색·바탕·굵기 셋으로 말한다. aria-current가 그 근거이고 색은 보조다. */
.section-nav a[aria-current]{background:#f1f8fb;color:var(--accent-dark);font-weight:850}
}