/* 레이아웃: 가운데 정렬 섹션 헤드 + 좌우 교차 행 + 하단 고정 상담 바. 최대폭 1120px */
:root{
  --bg:#ffffff; --soft:#f0fafa; --soft-2:#e6f5f5; --ink:#0f2626; --sub:#4d6b6b; --line:#dceaea;
  --accent:#0e8080; --accent-2:#0d6e6e; --accent-ink:#ffffff; --accent-soft:#d3eeee; --accent-bright:#12a0a0;
  --warn:#c2581b; --brand-navy:#30558a; --brand-teal:#3a777c;
  --f:"Pretendard Variable","Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --r-lg:24px; --r-md:16px; --r-sm:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b1717; --soft:#112222; --soft-2:#142a2a; --ink:#e6f2f2; --sub:#9ab8b8; --line:#203a3a;
  --accent:#2ab8b8; --accent-2:#4dd4d4; --accent-ink:#052020; --accent-soft:#143434; --accent-bright:#4dd4d4;
  --warn:#f08a4b; --brand-navy:#9db8e6; --brand-teal:#6cc2c2; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b1717; --soft:#112222; --soft-2:#142a2a; --ink:#e6f2f2; --sub:#9ab8b8; --line:#203a3a;
  --accent:#2ab8b8; --accent-2:#4dd4d4; --accent-ink:#052020; --accent-soft:#143434; --accent-bright:#4dd4d4;
  --warn:#f08a4b; --brand-navy:#9db8e6; --brand-teal:#6cc2c2; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.7 var(--f);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;padding-bottom:96px}
img,svg{max-width:100%}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.3;text-wrap:balance}
h1{font-size:clamp(2rem,5.4vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.65rem)}
h1 em,h2 em{font-style:normal;color:var(--accent)}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
main>section{padding-block:clamp(72px,10vw,128px)}

/* buttons, pill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-weight:700;text-decoration:none;white-space:nowrap;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)}
.btn-sm{padding:8px 14px;font-size:.88rem;border-radius:10px}
.btn-lg{padding:16px 26px;font-size:1.05rem}
.btn{padding:12px 20px}
.btn-sm{padding:8px 14px}
.btn-lg{padding:16px 26px}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-light{background:var(--soft);color:var(--ink)}
.btn-outline{border:1.5px solid var(--accent);color:var(--accent);background:var(--bg)}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:var(--bg)}
.pill{display:inline-block;padding:6px 16px;border:1.5px solid var(--ink);border-radius:999px;font-size:.85rem;font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.cta-row.center{justify-content:center}

/* gnb */
.gnb{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.gnb-row{display:flex;align-items:center;gap:12px 28px;min-height:68px;flex-wrap:wrap;padding-block:8px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:1.02rem}
.logo-mark{width:30px;height:auto;flex:none;display:block}
.logo-text{font-size:1.08rem;letter-spacing:-.02em}
.lt-a{color:var(--brand-navy);font-weight:800}
.lt-b{color:var(--brand-teal);font-weight:800}
.lt-c{color:var(--sub);font-weight:500;margin-left:2px}
.gnb-menu{display:flex;flex-wrap:wrap;gap:4px 24px;margin-left:auto;font-size:.95rem;font-weight:500}
.gnb-menu a{color:var(--ink);text-decoration:none;padding-block:6px}
.gnb-menu a:hover{color:var(--accent)}
.gnb-menu a[aria-current]{color:var(--accent);font-weight:700}
.gnb-out{color:var(--sub)!important}

/* hero */
.hero{padding-block:clamp(64px,10vw,120px) clamp(56px,8vw,96px);background:linear-gradient(180deg,var(--bg) 0%,var(--soft) 100%)}
.hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.hero-lede{font-size:clamp(1.02rem,1.8vw,1.2rem);color:var(--sub);max-width:36em}
.hero-board{width:min(100%,640px);margin-top:28px;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px clamp(16px,3vw,28px);box-shadow:0 24px 60px -28px rgb(14 110 110 / .4)}
.board-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:1rem}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.board-tag{margin-left:auto;font-size:.75rem;color:var(--sub);background:var(--soft);padding:2px 10px;border-radius:999px}
.board-list{list-style:none;margin:0;padding:0}
.board-list li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:center;padding-block:14px;border-bottom:1px solid var(--line)}
.board-list li:last-child{border-bottom:0;padding-bottom:2px}
.board-list b{display:block;font-weight:700;font-size:.98rem}
.board-list small{color:var(--sub);font-size:.85rem}
.board-list em{font-style:normal;font-size:.8rem;font-weight:700;color:var(--sub);background:var(--soft);padding:4px 10px;border-radius:999px}
.chk{width:22px;height:22px;border-radius:7px;border:2px solid var(--line)}
.board-list .ok .chk{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.board-list .ok .chk::after{content:"✓";font-size:13px;font-weight:800;line-height:1}
.board-list .ok em{color:var(--accent);background:var(--accent-soft)}
.board-list .todo .chk{border-color:var(--warn)}
.board-list .todo em{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,var(--bg))}

/* section head */
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;margin-bottom:clamp(40px,6vw,64px)}
.sec-sub{color:var(--sub)}

/* numbers */
.num-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.num-card{position:relative;overflow:hidden;background:var(--soft);border-radius:var(--r-lg);padding:28px 28px 30px;display:flex;flex-direction:column;gap:6px;min-width:0}
.num-wide{grid-row:span 2;justify-content:flex-start;padding-bottom:120px}
.num-v{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.04em;line-height:1.15;font-variant-numeric:tabular-nums}
.num-v small{font-size:.45em;font-weight:700;margin-left:4px;color:var(--sub)}
.num-l{font-weight:700}
.num-s{font-size:.85rem;color:var(--sub)}
.num-graph{position:absolute;left:0;right:0;bottom:0;width:100%;height:110px}
.g-fill{fill:var(--accent-soft)} .g-line{fill:none;stroke:var(--accent);stroke-width:3}

/* why rows */
.why{background:var(--bg)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:center;padding-block:clamp(28px,4vw,44px)}
.row-rev .row-vis{order:2}
.row-copy{display:flex;flex-direction:column;gap:16px;min-width:0}
.row-copy p{color:var(--sub);font-size:1.03rem}
.row-copy .sub{font-size:.92rem;padding-top:14px;border-top:1px solid var(--line)}
.ico{width:48px;height:48px;border-radius:14px;background:var(--accent);display:grid;place-items:center}
.ico svg{width:24px;height:24px;fill:none;stroke:var(--accent-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.row-vis{background:var(--soft);border-radius:var(--r-lg);padding:clamp(20px,4vw,36px);display:flex;flex-direction:column;gap:10px;min-width:0}
.vis-cap{font-size:.75rem;color:var(--sub);text-align:right}
.pf,.pay-line,.bld-bar{display:flex;justify-content:space-between;gap:12px;background:var(--bg);border-radius:var(--r-sm);padding:14px 18px;font-size:.95rem}
.pf b,.pay-line b,.bld-bar b{font-variant-numeric:tabular-nums}
.pf span,.pay-line span,.bld-bar span{color:var(--sub)}
.pf-sum,.pay-total{background:var(--accent);color:var(--accent-ink)}
.pf-sum span,.pay-total span{color:var(--accent-ink);opacity:.85}
.pay-head{font-weight:700;padding:4px 4px 6px}
.bld-vat{background:var(--accent-soft)}
.bld-arrow{align-self:center;font-size:.85rem;font-weight:700;color:var(--accent);padding:2px 0}
.bld-arrow::before{content:"↓ "}
.bld-back{background:var(--accent);color:var(--accent-ink)} .bld-back span{color:var(--accent-ink);opacity:.85}
.types{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(36px,5vw,56px)}
.types span{padding:10px 18px;border-radius:999px;background:var(--soft);font-weight:600;font-size:.95rem}

/* calendar: 실제 날짜 순서 */
.calendar{background:var(--soft)}
.cal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.cal li{background:var(--bg);border-radius:var(--r-md);padding:22px;display:flex;flex-direction:column;gap:4px}
.cal time{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.cal b{font-size:1.02rem}
.cal span{font-size:.88rem;color:var(--sub)}

/* steps */
.step-list{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.step-list li{counter-increment:s;display:flex;flex-direction:column;gap:6px;padding:22px 20px;border:1px solid var(--line);border-radius:var(--r-md)}
.step-list li::before{content:counter(s);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:.9rem;margin-bottom:8px}
.step-list span{font-size:.9rem;color:var(--sub)}

/* ceo */
.ceo{background:var(--soft)}
.ceo-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:center}
.ceo-photo{width:clamp(220px,28vw,320px);max-width:100%;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:var(--soft-2)}
.ceo-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ceo-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:40em}
.ceo-copy p{color:var(--sub);font-size:1.05rem}
.ceo-facts{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ceo-facts li{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.9rem;font-weight:600}

/* faq */
.faq-wrap{max-width:820px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq{background:var(--soft);border-radius:var(--r-md)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 24px;font-weight:700;font-size:1.03rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;margin-top:6px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(45deg);transition:transform .2s}
.faq[open] summary::after{transform:rotate(-135deg);margin-top:10px}
.faq p{padding:0 24px 22px;color:var(--sub)}
.more-link{display:block;text-align:center;margin-top:28px;font-weight:700;text-decoration:none}

/* dark cta */
.dark-cta{background:linear-gradient(180deg,var(--soft) 0%,var(--soft-2) 100%);border-top:1px solid var(--line)}
.dark-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,72px);align-items:center}
.dark-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.dark-copy p{color:var(--sub);font-size:1.05rem}
.info-card{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 26px;box-shadow:0 20px 50px -30px rgb(14 128 128 / .45)}
.info-card div{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:12px;padding-block:16px;border-bottom:1px solid var(--line)}
.info-card div:last-child{border-bottom:0}
.info-card dt{color:var(--sub);font-size:.9rem}
.info-card dd{margin:0;font-weight:600}
.info-card a{color:var(--accent)}

/* footer + dock */
.foot{padding-block:44px;border-top:1px solid var(--line);font-size:.9rem;color:var(--sub)}
.foot b{color:var(--ink)}
.foot-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.foot-note{font-size:.84rem}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:0 clamp(12px,3vw,24px) calc(14px + env(safe-area-inset-bottom,0px));pointer-events:none}
.dock-in{pointer-events:auto;max-width:1060px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:12px 12px 12px 24px;box-shadow:0 16px 40px -16px rgb(0 0 0 / .3)}
.dock-in p{font-weight:600}

/* guide page */
.hero-guide{padding-bottom:clamp(48px,7vw,80px)}
.stamp{font-size:.88rem;color:var(--sub);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 16px}
.guide{padding-top:clamp(48px,6vw,72px)!important}
.guide-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 92px);background:var(--soft);border-radius:var(--r-md);padding:20px}
.toc p{font-weight:800;margin-bottom:10px}
.toc ol{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:10px;font-size:.9rem}
.toc a{color:var(--sub);text-decoration:none} .toc a:hover{color:var(--accent)}
.qa-list{display:flex;flex-direction:column;gap:clamp(56px,8vw,88px);max-width:760px;min-width:0}
.qa{display:flex;flex-direction:column;gap:18px;scroll-margin-top:96px}
.qa-n{font-size:.95rem;font-weight:800;color:var(--accent)}
.qa-a{font-size:1.1rem;font-weight:700;line-height:1.6;background:var(--accent-soft);border-radius:var(--r-md);padding:20px 22px}
.qa-body{display:flex;flex-direction:column;gap:16px;color:var(--sub);font-size:1.02rem}
.qa-body b{color:var(--ink)}
.calc,.tier{background:var(--soft);border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column;gap:8px}
.calc-t{font-size:.85rem;font-weight:700;color:var(--sub);padding:0 4px 4px}
.calc div,.tier div{display:flex;justify-content:space-between;gap:12px;background:var(--bg);border-radius:var(--r-sm);padding:12px 16px;color:var(--ink)}
.calc b{font-variant-numeric:tabular-nums;white-space:nowrap}
.calc .calc-sum{background:var(--accent);color:var(--accent-ink)} .calc .calc-sum b{color:var(--accent-ink)}
.tier div{flex-direction:column;gap:2px;align-items:flex-start}
.tier span{color:var(--sub);font-size:.92rem}
.law{font-size:.85rem;padding-top:12px;border-top:1px dashed var(--line)}

@media (max-width:960px){
  .gnb-menu{order:3;width:100%;margin-left:0;gap:4px 18px;font-size:.9rem}
  .gnb-row .btn-sm{margin-left:auto}
  .num-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .num-wide{grid-row:auto;grid-column:1/-1;padding-bottom:110px}
  .step-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-grid,.dark-grid,.foot-row{grid-template-columns:minmax(0,1fr)}
  .toc{position:static}
}
@media (max-width:720px){
  .row{grid-template-columns:minmax(0,1fr)}
  .row-rev .row-vis{order:0}
  .ceo-card{grid-template-columns:minmax(0,1fr)}
  .dock-in p{font-size:.9rem}
}
@media (max-width:480px){
  .num-grid,.step-list{grid-template-columns:minmax(0,1fr)}
  .dock-in{padding-left:16px} .dock-in p{display:none} .dock-in .btn{flex:1}
  .board-list li{grid-template-columns:22px minmax(0,1fr)} .board-list em{grid-column:2;justify-self:start}
  .h1-br{display:none}
}
/* hub · cards · crumb · related */
.crumb{display:flex;flex-wrap:wrap;gap:6px;font-size:.85rem;color:var(--sub)}
.crumb a{color:var(--sub);text-decoration:none} .crumb a:hover{color:var(--accent)}
.crumb span[aria-hidden]{opacity:.5}
.crumb span[aria-current]{color:var(--ink);font-weight:600}
.hero-in.left{align-items:flex-start;text-align:left;max-width:860px;margin:0 auto}
.hero-sub{padding-block:clamp(48px,7vw,80px) clamp(32px,5vw,56px)}
.q-h1{font-size:clamp(1.7rem,4vw,2.6rem)}
.hub-h{font-size:clamp(1.3rem,2.4vw,1.6rem);margin:0 0 20px}
.hub-h:not(:first-child){margin-top:clamp(48px,7vw,72px)}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.link-card{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);color:var(--ink);text-decoration:none;min-width:0;transition:border-color .15s,transform .15s}
.link-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.link-card b{font-size:1.05rem;line-height:1.45}
.link-card span{color:var(--sub);font-size:.92rem}
.link-card em{margin-top:auto;font-style:normal;font-weight:700;font-size:.9rem;color:var(--accent)}
.type-card{background:var(--soft);border-color:transparent}
.type-card b{font-size:1.25rem}
.types-sec{background:var(--bg)}
.types-sec .types{margin-top:28px}
.toc ul{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:.88rem}
.toc ul:last-child{margin-bottom:0}
.toc a[aria-current]{color:var(--accent);font-weight:700}
.toc p:not(:first-child){margin-top:4px}
.related{display:flex;flex-direction:column;gap:14px;padding-top:28px;border-top:1px solid var(--line)}
.related-h{font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 16px;border-radius:999px;background:var(--soft);color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem}
.chip:hover{background:var(--accent-soft);color:var(--accent)}
.qa-a .tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--accent-ink);background:var(--accent);border-radius:4px;padding:1px 8px;margin-right:10px;vertical-align:2px}
@media (max-width:960px){.card-grid,.card-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.card-grid,.card-grid.two,.card-grid.four{grid-template-columns:minmax(0,1fr)}}
/* calculator */
.tools{padding-top:clamp(40px,6vw,64px)!important}
.tool-stack{display:flex;flex-direction:column;gap:clamp(32px,5vw,48px)}
.tool{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,4vw,36px);display:flex;flex-direction:column;gap:22px;background:var(--bg);box-shadow:0 24px 60px -36px rgb(14 110 110 / .35)}
.tool-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.tool-head h2{font-size:clamp(1.3rem,2.6vw,1.7rem)}
.tool-head p{color:var(--sub);font-size:.9rem}
.tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(20px,4vw,40px);align-items:start}
.tool-form{display:flex;flex-direction:column;gap:6px}
.tool-form label{font-weight:700;font-size:.95rem;margin-top:10px}
.tool-form label:first-child{margin-top:0}
.tool-form small{font-weight:400;color:var(--sub);font-size:.82rem;margin-left:4px}
.tool-form input,.tool-form select{width:100%;font:inherit;font-size:1.05rem;font-variant-numeric:tabular-nums;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
.tool-form input:focus,.tool-form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tool-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;background:var(--soft);border-radius:var(--r-md);padding:16px}
.out-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.out-col.wide{grid-column:1/-1}
.out-h{font-weight:800;padding:2px 4px}
.out-col>div{display:flex;justify-content:space-between;gap:10px;background:var(--bg);border-radius:var(--r-sm);padding:11px 14px;font-size:.92rem}
.out-col>div span{color:var(--sub)}
.out-col>div b{font-variant-numeric:tabular-nums;white-space:nowrap}
.out-col .out-sp{background:transparent;padding:0;flex:1}
.out-col .out-sum{background:var(--accent);color:var(--accent-ink);margin-top:auto}
.out-col .out-sum span{color:var(--accent-ink);opacity:.85}
.out-note{grid-column:1/-1;font-weight:600;padding:6px 4px 0;line-height:1.6}
/* compare table */
.cmp{display:flex;flex-direction:column;gap:6px;background:var(--soft);border-radius:var(--r-md);padding:12px;overflow-x:auto}
.cmp-row{display:grid;grid-template-columns:minmax(8em,1.2fr) minmax(7em,1fr) minmax(7em,1fr);gap:6px;min-width:440px}
.cmp-row span{background:var(--bg);border-radius:var(--r-sm);padding:10px 12px;font-size:.92rem;color:var(--ink)}
.cmp-head span{background:transparent;font-weight:800;font-size:.85rem;color:var(--sub);padding-block:4px}
.cmp .yes{color:var(--accent);font-weight:700}
.cmp .no{color:var(--sub)}
/* news */
.news-card time,.news-meta time{font-size:.85rem;color:var(--sub);font-variant-numeric:tabular-nums}
.status{display:inline-block;align-self:flex-start;font-style:normal;font-size:.78rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:3px 10px}
.news-card .status{margin-top:auto}
.news-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.news-wrap{max-width:820px;display:flex;flex-direction:column;gap:clamp(40px,6vw,64px)}
.qa-body h3{font-size:1.15rem;color:var(--ink);margin-top:8px}
/* home extras */
.extras{background:var(--soft)}
.ext-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px}
.ext-card{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,4vw,36px);border-radius:var(--r-lg);background:var(--accent);color:var(--accent-ink);text-decoration:none}
.ext-card b{font-size:1.4rem}
.ext-card span{opacity:.9}
.ext-card em{margin-top:auto;font-style:normal;font-weight:700}
.ext-news{background:var(--bg);border-radius:var(--r-lg);padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:6px}
.ext-h{font-weight:800;margin-bottom:6px}
.ext-news ul{list-style:none;margin:0;padding:0}
.ext-news li a{display:flex;flex-direction:column;gap:2px;padding-block:12px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.ext-news li a:hover b{color:var(--accent)}
.ext-news time{font-size:.8rem;color:var(--sub)}
.more-link.left{text-align:left;margin-top:12px}
@media (max-width:860px){.tool-grid,.ext-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.tool-out{grid-template-columns:minmax(0,1fr)}.out-col .out-sp{display:none}}
.qa-body ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:10px}
.qa-body li b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}