/* keylink 통합 스타일 — kl_guide.css, upgrade.css, support-path.css, typography.css, minimal.css, keylink-product.css, page-message.css, hero-layout.css, detail-groups.css, purchase-guide.css, detail-template.css, order-guide.css, compact-type.css
   2026-09-14 CSS 통합(감사 후속). 순서는 통합 전 각 페이지의 로드 순서 그대로다.
   ☠개별 파일을 고치면 이 번들을 다시 만들어야 한다: scratchpad/bundle_css.py
   ☠페이지 안 <style> 은 이 번들보다 뒤에 온다(더 강함). */

/* ═══ kl_guide.css ═══ */
/* KEY-LINK 가이드 — 공유 스타일 (멀티페이지, 미쉐린 MDS 기준: Noto Sans·자간 0·8px 라운드) */
:root{
  --ink:#1A1A1A; --muted:#5B6068; --faint:#6B7280; --line:#E5E5E5;
  --bg:#fff; --soft:#F7F8FA; --soft2:#F1F3F6;
  --accent:#27509B; --accent-d:#3A61A6; --accent-soft:#D4E7FA;
  --yellow:#FCE500; --yellow-h:#FDF271; --yellow-ink:#1A1A1A;
  --ok:#157A43; --warn:#B0791F; --no:#B03A31;
  --navy:#16255E;
  --r:8px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans KR','Noto Sans',Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;letter-spacing:0;word-break:keep-all;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1000px;margin:0 auto;padding:0 28px;}
a{color:inherit;text-decoration:none;}
strong{font-weight:700;color:var(--ink);}

/* nav */
nav.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px);box-shadow:0 11px 8px -10px rgba(51,51,51,.12);}
nav.top .inner{max-width:1000px;margin:0 auto;padding:15px 28px;display:flex;align-items:center;justify-content:space-between;}
/* 브랜드 로크업 — 간판식: 솔리드 KEY + 아웃라인 LINK */
nav.top .brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--muted);letter-spacing:.02em;}
nav.top .brand .l{display:inline-flex;align-items:center;gap:7px;font-size:19px;font-weight:700;letter-spacing:.07em;color:var(--accent);margin-right:2px;}
nav.top .brand .l b{background:var(--accent);color:#fff;font-weight:700;padding:3px 10px 4px 11px;line-height:1.4;}
@media(max-width:720px){nav.top .brand .l{font-size:17px;}nav.top .brand .l b{padding:2px 8px 3px 9px;}}
nav.top .links{display:flex;gap:18px;align-items:center;font-size:14px;font-weight:600;color:var(--muted);flex-wrap:wrap;justify-content:flex-end;}
nav.top .links a:hover,nav.top .links a.on{color:var(--ink);}
nav.top .links .cta{color:var(--accent);font-weight:700;}
nav.top .nav-dd{position:relative;display:inline-flex;align-items:center;}
nav.top .nav-dd>.dd-t{cursor:pointer;}
nav.top .nav-dd>.dd-t::after{content:"▾";font-size:10px;margin-left:3px;}
nav.top .nav-dd::before{content:"";position:absolute;top:100%;left:-8px;right:-8px;height:14px;}
nav.top .nav-dd .dd-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:184px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(20,24,29,.13);padding:7px;display:none;flex-direction:column;gap:1px;z-index:60;}
nav.top .nav-dd:hover .dd-menu,nav.top .nav-dd:focus-within .dd-menu{display:flex;}
nav.top .nav-dd .dd-menu a{padding:9px 13px;border-radius:8px;white-space:nowrap;color:var(--muted);font-weight:600;}
nav.top .nav-dd .dd-menu a:hover{background:#f6f7f9;color:var(--ink);}
/* 모바일 햄버거 토글 (데스크톱 숨김) */
nav.top .nav-toggle{display:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:0 0 auto;}
nav.top .nav-toggle span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s;}
nav.top.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
nav.top.nav-open .nav-toggle span:nth-child(2){opacity:0;}
nav.top.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
@media(max-width:720px){nav.top .inner{flex-wrap:wrap;gap:8px 0;padding:12px 18px;}
nav.top .nav-toggle{display:inline-flex;}
nav.top .links{display:none;gap:11px 14px;font-size:12.5px;flex-wrap:wrap;width:100%;justify-content:flex-start;padding-top:11px;margin-top:2px;border-top:1px solid var(--line);}
nav.top.nav-open .links{display:flex;}
nav.top .nav-dd{display:block;width:100%;}nav.top .nav-dd::before{display:none;}nav.top .nav-dd .dd-menu{position:static;display:flex;box-shadow:none;border:none;padding:2px 0 2px 12px;min-width:0;}nav.top .nav-dd>.dd-t::after{display:none;}}

/* hero — 미쉐린 홈 히어로: 딥블루 밴드 + 흰 900 타이틀 */
header.hero{padding:92px 0 72px;background:linear-gradient(160deg,#2B57A5 0%,var(--accent) 46%,#1E3F7D 100%);}
.hero .eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.62);text-transform:uppercase;margin-bottom:22px;}
.hero h1{font-size:50px;line-height:1.18;font-weight:900;letter-spacing:0;margin-bottom:22px;color:#fff;}
.hero h1 .g{color:#A9C4EE;}
.hero p.lead{font-size:18px;color:rgba(255,255,255,.84);max-width:620px;line-height:1.7;}
.hero p.lead strong{color:#fff;}
.hero .btn.ghost{border-color:rgba(255,255,255,.5);color:#fff;}
.hero .btn.ghost:hover{background:transparent;border-color:#fff;color:#fff;}
.hero .cta-row{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;}
.hero .grid2{display:grid;grid-template-columns:1.08fr .92fr;gap:28px;align-items:center;}
.hero .heroill{width:100%;max-width:400px;margin-left:auto;height:auto;}
@media(max-width:820px){.hero .grid2{grid-template-columns:1fr;gap:26px;}.hero .heroill{max-width:330px;margin:4px auto 0;}}
@media(max-width:680px){header.hero{padding:54px 0 46px;}.hero h1{font-size:34px;}.hero p.lead{font-size:16.5px;}}

/* page hero (detail pages, smaller) — 딥블루 밴드 */
header.phero{padding:64px 0 56px;background:linear-gradient(160deg,#2B57A5 0%,var(--accent) 46%,#1E3F7D 100%);}
.phero .crumb{font-size:13px;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:18px;}
.phero .crumb a:hover{color:#fff;}
.phero h1{font-size:40px;line-height:1.2;font-weight:900;letter-spacing:0;margin-bottom:16px;color:#fff;}
.phero p.lead{font-size:18px;color:rgba(255,255,255,.84);max-width:660px;}
.phero p{color:rgba(255,255,255,.82)!important;}
.phero p strong,.phero p.lead strong{color:#fff!important;}
/* 히어로 속 흰 카드 — 본문이 흰 글씨가 되어 안 보이던 것(xhorse 상황 A/B) */
.phero .card p{color:var(--muted)!important;}
.phero .card p strong{color:var(--ink)!important;}
.phero figcaption{color:rgba(255,255,255,.55)!important;}
/* phero 안 표 = 흰 카드 (미쉐린 히어로 속 화이트 카드 문법) */
.phero table.tb{background:#fff;border-collapse:separate;border-spacing:0;border-radius:12px;overflow:hidden;box-shadow:0 20px 44px rgba(10,20,50,.26);}
.phero table.tb th,.phero table.tb td{padding:12px 16px;}
.phero figure img{border-radius:12px;}
@media(max-width:680px){header.phero{padding:42px 0 36px;}.phero h1{font-size:29px;}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;padding:13px 24px;border-radius:8px;border:1px solid var(--line);transition:.18s;}
.btn.primary{background:var(--yellow);color:var(--yellow-ink);border-color:var(--yellow);}
.btn.primary:hover{background:var(--yellow-h);border-color:var(--yellow-h);}
.btn.ghost{border-color:var(--accent);color:var(--accent);}
.btn.ghost:hover{background:var(--yellow-h);border-color:var(--accent-d);color:var(--ink);}
.btn .ar{font-weight:600;opacity:.6;}

/* sections */
section{padding:80px 0;}
section:nth-of-type(even){background:var(--soft);}
.kicker{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--accent);text-transform:uppercase;margin-bottom:14px;}
h2{font-size:30px;font-weight:700;letter-spacing:0;line-height:1.3;margin-bottom:14px;}
h2 + p.sub{font-size:17px;color:var(--muted);max-width:660px;margin-bottom:6px;}
h3{font-size:18px;font-weight:700;letter-spacing:0;margin:30px 0 8px;}
p{font-size:16px;color:var(--muted);margin-bottom:14px;}
@media(max-width:680px){section{padding:50px 0;}h2{font-size:24px;}.wrap{padding:0 18px;}}

/* lists */
ul.bul{list-style:none;margin:12px 0;}
ul.bul li{font-size:15.5px;color:var(--muted);padding:6px 0 6px 18px;position:relative;}
ul.bul li::before{content:"—";position:absolute;left:0;color:var(--faint);}
ul.bul li strong{color:var(--ink);}

/* callouts */
.quote{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:0 8px 8px 0;padding:18px 22px;margin:22px 0;font-size:18px;font-weight:700;color:var(--accent);line-height:1.55;letter-spacing:0;}
.quote strong{color:var(--accent);}
.warn{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin:22px 0;font-size:15px;font-weight:600;color:var(--muted);line-height:1.6;}
.warn strong{color:var(--ink);}

/* cards grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0;}
.grid.three{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:820px){.grid,.grid.three{grid-template-columns:1fr;}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;}
.card .k{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--accent);text-transform:uppercase;margin-bottom:8px;}
.card h4{font-size:17px;font-weight:700;letter-spacing:0;margin-bottom:6px;}
.card p{font-size:14.5px;margin:0;}
.card.good{background:#F4FBF7;border-color:#CDEBD9;}.card.good h4{color:var(--ok);}
.card.bad{background:#FDF5F4;border-color:#F2D2CE;}.card.bad h4{color:var(--no);}

/* service category cards (home) */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px;}
@media(max-width:860px){.svc{grid-template-columns:1fr;}}
.scard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;transition:.16s;}
.scard:hover{border-color:var(--accent);transform:translateY(-2px);}
.scard .sill{height:54px;margin-bottom:20px;}
.scard .sill svg{height:54px;width:auto;display:block;}
.scard .num{font-size:12.5px;font-weight:700;color:var(--faint);letter-spacing:.08em;margin-bottom:14px;}
.scard h4{font-size:19px;font-weight:700;letter-spacing:0;margin-bottom:10px;}
.scard p{font-size:14.5px;color:var(--muted);line-height:1.64;margin-bottom:16px;}
.scard .more{margin-top:auto;font-size:14px;font-weight:700;color:var(--accent);}

/* principle cards */
.prin{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:34px;}
@media(max-width:860px){.prin{grid-template-columns:1fr;}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;}
.pcard .pill{height:118px;margin:-2px 0 14px;}
.pcard .pill svg{height:118px;width:auto;display:block;}
.pcard .pk{font-size:12.5px;font-weight:700;color:var(--accent);letter-spacing:.06em;margin-bottom:8px;}
.pcard h4{font-size:17px;font-weight:700;margin-bottom:8px;letter-spacing:0;}
.pcard p{font-size:14px;color:var(--muted);line-height:1.64;margin:0;}

/* numbered steps */
.rank{display:flex;flex-direction:column;gap:10px;margin:24px 0;}
.rank .row{display:flex;align-items:flex-start;gap:14px;}
.rank .row .n{flex:0 0 28px;width:28px;height:28px;border-radius:8px;background:var(--soft2);color:var(--ink);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;}
.rank .row.top .n{background:var(--accent);color:#fff;}
.rank .row .t{font-size:15.5px;color:var(--muted);padding-top:2px;}
.rank .row .t b{color:var(--ink);font-weight:700;}

/* phased roadmap */
.phase{display:flex;flex-direction:column;gap:12px;margin:26px 0;}
.phase .step{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px 22px;border-left:4px solid var(--line);}
.phase .step.p1{border-left-color:var(--accent);}
.phase .step .tag{display:inline-block;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-bottom:7px;}
.phase .step.p1 .tag{color:var(--accent);}
.phase .step h4{font-size:17px;font-weight:700;margin-bottom:5px;}
.phase .step p{font-size:14px;color:var(--muted);margin:0;}

/* tables */
table.tb{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;}
table.tb th,table.tb td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;}
table.tb thead th{font-size:13px;font-weight:700;color:var(--faint);letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid var(--ink);}
table.tb tbody th{font-weight:700;color:var(--ink);white-space:nowrap;}
table.tb td{color:var(--muted);}
/* 모바일 — 넓은 표는 표 안에서만 가로 스크롤 (페이지 전체가 밀리지 않게) */
@media(max-width:680px){
  table.tb{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13px;}
  table.tb th,table.tb td{padding:10px 8px;}
  table.tb tbody th{white-space:normal;}
  .phero table.tb{display:table;width:100%;}   /* 히어로 카드 안 2열 표 — 폰에서 60% 폭으로 남던 것 */
  .bundle img{max-width:44vw;}
}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;margin-right:6px;}
.tag.ok{background:#E9F7EF;color:var(--ok);}.tag.visit{background:#FBF3E3;color:var(--warn);}.tag.no{background:#FBECEA;color:var(--no);}.tag.ac{background:var(--accent-soft);color:var(--accent);}
.ok{color:var(--ok);font-weight:700;}.no{color:var(--no);font-weight:700;}.mid{color:var(--warn);font-weight:700;}

/* diagnostic wizard */
.diag{background:#fff;border:1px solid var(--line);border-radius:12px;padding:38px;margin-top:32px;}
.diag .progress{display:flex;gap:6px;margin-bottom:22px;}
.diag .progress i{height:3px;flex:1;border-radius:3px;background:var(--soft2);transition:.2s;}
.diag .progress i.on{background:var(--accent);}
.diag .qhead{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin-bottom:8px;}
.diag .qtitle{font-size:22px;font-weight:700;letter-spacing:0;margin-bottom:24px;}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:680px){.diag{padding:24px 18px;}.opts{grid-template-columns:1fr;}.diag .qtitle{font-size:19px;}}
.opt{text-align:left;background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px 20px;cursor:pointer;font-family:inherit;transition:.16s;width:100%;}
.opt:hover{border-color:var(--accent);transform:translateY(-1px);}
.opt .ot{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.opt .od{font-size:13px;color:var(--faint);line-height:1.5;}
.diag .back{margin-top:20px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;background:none;border:none;font-family:inherit;display:none;}
.diag .back:hover{color:var(--ink);}
.result{display:none;}
.result .verdict{display:inline-flex;align-items:center;font-size:13px;font-weight:700;letter-spacing:.02em;padding:7px 15px;border-radius:999px;margin-bottom:16px;}
.v-ok{background:#E9F7EF;color:var(--ok);}.v-visit{background:#FBF3E3;color:var(--warn);}.v-ask{background:var(--accent-soft);color:var(--accent);}.v-no{background:#FBECEA;color:var(--no);}
.result h3{font-size:24px;font-weight:700;letter-spacing:0;margin:0 0 12px;}
.result p.rdesc{font-size:16px;color:var(--muted);margin-bottom:22px;max-width:620px;}
.result .rsvc{display:flex;flex-wrap:wrap;gap:10px;}
.result .rsvc a{font-size:14.5px;font-weight:700;padding:12px 20px;border-radius:8px;border:1px solid var(--line);transition:.16s;}
.result .rsvc a.go{background:var(--yellow);color:var(--yellow-ink);border-color:var(--yellow);}
.result .rsvc a.go:hover{background:var(--yellow-h);border-color:var(--yellow-h);}
.result .rsvc a:hover{border-color:var(--accent);}
.result .reset{margin-top:24px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;background:none;border:none;font-family:inherit;}
.result .reset:hover{color:var(--ink);}

/* closing band — 네이비 */
.close{background:linear-gradient(160deg,#1D3070 0%,var(--navy) 70%);color:#fff;border-radius:16px;padding:52px 44px;text-align:center;}
.close h2{color:#fff;font-size:30px;margin-bottom:14px;}
.close p{color:#fff;font-size:16.5px;max-width:560px;margin:0 auto 28px;}
.close p strong{color:#fff;}
.close .btn.primary{background:var(--yellow);color:var(--yellow-ink);border-color:var(--yellow);}
.close .btn.primary:hover{background:var(--yellow-h);border-color:var(--yellow-h);}
.close .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45);}
.close .btn.ghost:hover{background:transparent;border-color:#fff;color:#fff;}
@media(max-width:680px){.close{padding:38px 24px;}.close h2{font-size:24px;}}

/* footer — 네이비 */
footer{background:var(--navy);color:rgba(255,255,255,.75);padding:44px 0 52px;font-size:13.5px;}
footer .frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
footer a{color:#fff;}
footer a:hover{color:var(--yellow);}
footer .fcompany{margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;color:rgba(255,255,255,.55);letter-spacing:.02em;}
/* 사업자 정보 (2026-09-15) */
footer .fbiz{margin-top:8px;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.62);word-break:keep-all;}
footer .fbiz a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:3px;}

/* code + result badges */
code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;background:var(--soft2);padding:1px 6px;border-radius:5px;color:var(--ink);}
.win{color:var(--ok);font-weight:700;}

/* SVG illustrations */
.ill .ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ill .lf{fill:none;stroke:var(--faint);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.ill .ac{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ill .dash{stroke-dasharray:3.5 5.5;}
.ill .fs{fill:var(--soft);}.ill .fa{fill:var(--accent);}.ill .fi{fill:var(--ink);}.ill .fw{fill:#fff;}
.ill .tx{fill:var(--faint);font:700 11px 'Noto Sans KR',sans-serif;}

/* 최소 모션 — 스크롤 리빌(kl_fx.js가 .rv 부여, JS 없으면 그대로 표시) */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.2,.65,.25,1),transform .55s cubic-bezier(.2,.65,.25,1);}
  .rv.in{opacity:1;transform:none;}
}

/* hover 마이크로 인터랙션 */
.btn{transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s;}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(26,26,26,.14);}
.scard:hover{box-shadow:0 14px 30px rgba(22,40,80,.10);}
/* 흐름 화살표 — 3단 파이프라인(스테이션 RF 신호 변환). 좁은 화면에선 세로로 눕는다 */
.flow-arrow{align-self:center;font-size:22px;font-weight:900;color:var(--accent);padding:0 2px;line-height:1;}
@media(max-width:760px){.flow-arrow{width:100%;text-align:center;transform:rotate(90deg);padding:2px 0;}}

.card{transition:.18s;}
.card:hover{border-color:var(--accent);box-shadow:0 10px 24px rgba(22,40,80,.08);}
.opt:hover{box-shadow:0 8px 20px rgba(22,40,80,.08);}
.badge:hover{border-color:var(--accent);}
.chcard{transition:box-shadow .2s,border-color .2s;}
.chcard:hover{border-color:var(--accent);box-shadow:0 16px 34px rgba(22,40,80,.14);}
.alicard:hover{box-shadow:0 10px 24px rgba(22,40,80,.08);}

/* responsive fixes — home 3-form grid / hero spacing·align / lora flow */
.svc.three{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:860px){.svc.three{grid-template-columns:1fr;}}
/* 홈 4갈래 카드 — 상단 메뉴 4항목과 1:1 */
.svc.four{grid-template-columns:repeat(4,1fr);}
.svc.four .scard{padding:22px 20px;}
.svc.four .scard .num{color:var(--accent);}
.svc.four .scard h4{font-size:17.5px;}
.svc.four .scard p{font-size:14px;}
@media(max-width:1180px){.svc.four{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.svc.four{grid-template-columns:1fr;}}
.hero .grid2.wide{gap:64px;}
@media(max-width:820px){.hero .grid2.wide{gap:26px;}}
.hero .heroill.lft{margin-left:0;}
.hero .heroill.lft img{margin:0;}
@media(max-width:820px){.hero .heroill.lft{margin:4px auto 0;}.hero .heroill.lft img{margin:0 auto;}}
.flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:26px 0;}
@media(max-width:900px){.flow{flex-direction:column;}.flow>*{width:100%;max-width:340px;}}

/* 폰 — 제품 사진 비중·정렬: 그림은 본문보다 크지 않게(최대 230px), 항상 가운데 */
@media(max-width:680px){
  figure{text-align:center;}
  figure img{max-height:230px!important;width:auto!important;max-width:100%!important;height:auto!important;margin-left:auto!important;margin-right:auto!important;}
  figure figcaption{text-align:center;}
}

/* ★9/10 kl_copy 히어로 장비 컷 예외 — 두 장비의 **상대 크기**가 정보다(XHORSE 가 KEYDIY 보다 작다).
   위 공용 규칙 max-height:230px 가 데스크톱 256/282 를 둘 다 230 으로 눌러 비율을 깨뜨렸다.
   폰에서도 같은 비율(205:226 = 0.907)로 유지한다. */
@media(max-width:680px){
  .phero figure img[src*="keydiy_kdx2"]{max-height:230px!important;}
  .phero figure img[src*="Xhorse_tool"]{max-height:209px!important;}
}

/* Shared reading hierarchy: product pages and blog guides. */
.phero h1{font-size:38px;line-height:1.3;letter-spacing:-.025em}
.phero p.lead{font-size:17px;line-height:1.8}
h2{font-size:28px;line-height:1.4}
h2+p.sub{font-size:16px;line-height:1.8}
p{line-height:1.8}
.card h4,.scard h4,.pcard h4,.phase .step h4,.svc.four .scard h4{font-size:18px;line-height:1.45}
.card p,.scard p,.pcard p,.phase .step p,.svc.four .scard p{font-size:15px;line-height:1.75}
.quote{font-size:16px;line-height:1.75}
.warn{font-size:14.5px;line-height:1.75}
.rank .row .t{font-size:15.5px;line-height:1.8}
.close h2{font-size:28px;line-height:1.4}
.close p{font-size:16px;line-height:1.8}
@media(max-width:680px){.phero h1{font-size:29px}.phero p.lead{font-size:16px}h2,.close h2{font-size:24px}.card h4,.scard h4,.pcard h4,.phase .step h4,.svc.four .scard h4{font-size:17px}table.tb{font-size:14px}}

/* ═══ upgrade.css ═══ */
/* Product selection refresh — 2026-09-09 */
.decision{padding:64px 24px;background:#fff;color:#182230;scroll-margin-top:90px}.decision-inner{max-width:1040px;margin:auto}.decision small{font-size:12px;font-weight:800;color:#526477}.decision h2{font-size:clamp(26px,4vw,40px);line-height:1.3;margin:12px 0 16px}.decision p{line-height:1.75;color:#526477}.decision-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}.decision-card{display:flex;flex-direction:column;gap:12px;padding:26px;background:#f4f6f8;border:1px solid #e1e6ed;border-radius:12px;color:#182230;text-decoration:none}.decision-card h3{font-size:23px;line-height:1.4;margin:0}.decision-card p{margin:0}.decision-card strong{font-size:18px}.decision-card .next{margin-top:auto;padding-top:16px;font-weight:800;color:#2563eb}.decision-card img{width:100%;height:180px;object-fit:contain}.decision-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.decision-actions a{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;min-height:48px;border-radius:8px;background:#fff;color:#172335;font-weight:800;text-decoration:none;border:1px solid #cbd5e1}.decision-actions a:first-child{background:#2563eb;color:#fff;border-color:#2563eb}.decision a:focus-visible,.decision-actions a:focus-visible{outline:3px solid #f59e0b;outline-offset:4px}html{scroll-padding-top:90px}.cine-hero .decision-actions{position:relative;z-index:2}.cine-hero .sub{color:#eef2f7}.cine-hero .inner{padding-bottom:70px}.cine-hero{min-height:760px}.decision-note{font-size:14px;margin-top:22px!important}@media(max-width:700px){.decision{padding:40px 20px}.decision-grid{grid-template-columns:1fr}.decision-card{padding:22px}.decision-actions a{flex:1 1 180px}.cine-hero{min-height:700px;height:auto}.cine-hero h1{font-size:clamp(38px,9vw,60px)}.decision-card img{height:150px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}}

.hero .cta-row{margin-top:24px}.hero .lead{max-width:560px}.hero{padding-top:64px!important;padding-bottom:56px!important}.decision-card .next{color:#27509b}.decision-card:last-child{background:#fffbe0;border-color:#e6d967}.hero .btn.primary{background:#fce500;color:#16255e}.hero .g{color:#d5e3ff}

/* Reading rhythm and keyboard navigation */
.page-shortcuts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:24px 20px;background:#fff}.page-shortcuts a{padding:10px 16px;border:1px solid #d3dce8;border-radius:8px;color:#24364c;font-size:15px;font-weight:700;text-decoration:none}.page-shortcuts a:hover{background:#edf3fb}a:focus-visible,button:focus-visible{outline:3px solid #d99100;outline-offset:4px}.decision-card{transition:border-color .18s,box-shadow .18s}.decision-card:hover{border-color:#8dabc9;box-shadow:0 8px 24px #1723350d}.decision-card h3{word-break:keep-all}.decision-note:empty{display:none}@media(max-width:700px){.decision-card strong{font-size:16px}.decision-card h3{font-size:22px}}

.compact-section{padding:48px 0}.proof-row{display:grid;grid-template-columns:1fr 1.4fr;gap:36px;align-items:center}.proof-row>img{width:100%;max-height:240px;object-fit:contain;border-radius:12px}.proof-row h2{font-size:clamp(24px,3vw,34px)}@media(max-width:700px){.proof-row{grid-template-columns:1fr;gap:24px}.proof-row>img{max-height:180px}.compact-section{padding:36px 0}}

/* Balanced titles, captions and action spacing */
.hero h1{font-size:clamp(32px,3.5vw,44px);line-height:1.25;word-break:keep-all;text-wrap:balance}.hero h1 .phrase{display:inline-block}.hero .grid2.wide{gap:40px}.hero p.lead{font-weight:400;word-break:keep-all}.hero .eyebrow{color:#d5e3ff}.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.cta-row .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}.proof-row>img{max-height:270px}.proof-row p{font-size:17px;line-height:1.75}.phero figcaption{color:#d5e3ff!important}@media(max-width:700px){.proof-row>img{max-height:210px}.hero h1{font-size:32px}.cta-row .btn{flex:0 1 auto}}

@media(max-width:820px){
header.hero{padding:36px 0!important}.hero .grid2.wide{display:block}.hero h1{font-size:clamp(29px,7.5vw,34px);margin-bottom:22px}.hero .heroill.lft{max-width:400px;margin:0 auto 22px}.hero .lead{font-size:16px;line-height:1.75}.hero .eyebrow{font-size:11px;letter-spacing:.06em;margin-bottom:18px}.hero .cta-row{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px}.hero .cta-row .btn{width:100%}.hero .ba-card{gap:8px;padding:16px 12px}.hero .ba-label{font-size:12px;color:#d6e4f7!important}  /* 파란 히어로 위 1.05:1 → 7.4:1 (2026-09-14 라이브 점검) */.hero .ba-pic,.hero .ba-arrow,.hero .ba-or{height:132px}.hero figcaption{font-size:12px!important;line-height:1.6;color:#d5e3ff!important}.compact-section{padding:32px 0}
}

/* ═══ support-path.css ═══ */
.support-path{box-sizing:border-box;max-width:1040px;margin:48px auto;padding:28px 30px;background:#f1f5f9;color:#172235;border:1px solid #dbe3ec;border-radius:16px;font-family:inherit;display:flex;align-items:center;justify-content:space-between;gap:24px}.support-path h2{font-size:23px;line-height:1.4;margin:0 0 8px;color:#172235}.support-path p{font-size:16px;line-height:1.7;margin:0;color:#475569}.support-path a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border-radius:9px;background:#163b65;color:#fff;font-size:16px;font-weight:700;text-decoration:none;flex-shrink:0}.support-path a:focus-visible{outline:3px solid #168bd5;outline-offset:4px}@media(max-width:700px){.support-path{margin:32px 16px;padding:24px;display:block}.support-path a{margin-top:18px;width:100%;box-sizing:border-box}.support-path h2{font-size:21px}}

/* ═══ typography.css ═══ */
/* Shared reading hierarchy: body 16px, headings distinct, metadata compact. */
body.type-hierarchy p,
body.type-hierarchy :is(section,article,main,.doc) :is(li,dd),
body.type-hierarchy :is(.lead,.sub,.desc,.gdesc,.pline,.line,.exp){font-size:16px!important;line-height:1.8!important;font-weight:400!important;}
body.type-hierarchy p :is(strong,b),body.type-hierarchy li :is(strong,b){font-weight:600!important;}
body.type-hierarchy :is(section,article,main) h3{font-size:20px!important;line-height:1.45!important;font-weight:700!important;}
body.type-hierarchy :is(section,article,main) h4{font-size:19px!important;line-height:1.5!important;font-weight:700!important;}
body.type-hierarchy :is(.card,.decision-card,.scard,.pcard,.pg) h3{font-size:21px!important;}
body.type-hierarchy .decision-card>strong{font-size:17px!important;line-height:1.5!important;}
body.type-hierarchy :is(.decision-card,.card,.scard,.pcard) p{margin-top:8px;}
body.type-hierarchy :is(figcaption,.caption,.scap){font-size:13px!important;line-height:1.6!important;}
body.type-hierarchy :is(p.note,p.meta,p.small,footer p){font-size:14px!important;line-height:1.7!important;}
body.type-hierarchy :is(p.price,p.product-price,p.catch,p.big,p.quote){font-size:18px!important;font-weight:700!important;line-height:1.55!important;}
body.type-hierarchy :is(.maker-service,.product-value-update) h2{line-height:1.4;}
body.type-hierarchy .decision-card .next{font-size:14px!important;}
@media(max-width:680px){body.type-hierarchy :is(section,article,main) h3{font-size:20px!important;}body.type-hierarchy :is(section,article,main) h4{font-size:19px!important;}}

/* Descriptions rendered as divs and table cells use the same reading size. */
body.type-hierarchy :is(.rank .row .t,.card .body,.card .d,.step .d,.warn,.fit),
body.type-hierarchy :is(section,article,main) td{font-size:16px!important;line-height:1.8!important;}
body.type-hierarchy :is(.rank .row .t,.card .body,.card .d,.step .d) :is(strong,b){font-weight:600!important;}

/* ═══ minimal.css ═══ */
/* Conclusion first; optional information remains accessible without JavaScript. */
body.minimal .reveal,body.minimal .rv{opacity:1!important;transform:none!important;transition:none!important}
body.minimal .cine-hero .bg{animation:none}
body.minimal .cine-hero{min-height:min(720px,88svh);padding-top:84px}
body.minimal .cine-hero .inner{padding-bottom:64px}
body.minimal .cine-hero.product-hero.home-hero{height:auto;min-height:min(650px,88svh);padding:100px 0 48px;align-items:center}
body.minimal .cine-hero.home-hero .inner{padding:0 28px}
body.minimal .hero,body.minimal .phero{padding-top:52px;padding-bottom:52px;min-height:0}
body.minimal header h1{font-size:clamp(32px,4.2vw,56px)!important;line-height:1.2!important;letter-spacing:-.045em!important}
body.minimal header .lead,body.minimal header .sub{font-size:18px!important;max-width:580px;line-height:1.6!important;margin-top:20px!important}
body.minimal .minimal-note{font-size:14px!important;line-height:1.6;margin-top:14px;opacity:.8}
.minimal-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.minimal-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:1px solid currentColor;border-radius:8px;font-size:16px;font-weight:700;line-height:1.5;text-decoration:none}
.minimal-actions a:first-child{background:var(--accent-btn,var(--accent,#2563eb));color:#fff;border-color:var(--accent-btn,var(--accent,#2563eb))}
.cine-hero .minimal-actions a{background:#fff;color:#152031;border-color:#fff}
.cine-hero .minimal-actions a+a{background:transparent;color:#fff;border-color:#ffffff80}
body.minimal-keylink header.hero .minimal-actions a:first-child{background:#fff;color:#244f95;border-color:#fff}
body.minimal-keylink header.hero .minimal-actions a+a{color:#fff;border-color:#ffffffaa}
body.minimal-techbrick header.hero{background:#f6f7f9}
body.minimal-techbrick header.hero::before,body.minimal-techbrick header.hero::after{display:none}
body.minimal .minimal-overview{padding:48px 0!important;background:var(--bg,#fff);color:var(--ink,#18202b)}
body.minimal .minimal-overview h2{font-size:clamp(21px,3vw,30px);line-height:1.4;margin:0 0 12px}
.minimal-product-photo{display:block;width:100%;max-width:620px;max-height:380px;object-fit:contain;margin:0 auto 28px}
.minimal-shortcuts{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;font-size:16px;font-weight:700}
.minimal-shortcuts a{padding:12px 0}
.minimal-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.minimal-feature-grid>a{display:block;min-width:0;text-align:center;padding:16px;border-radius:12px;background:#f6f7f9}
.minimal-feature-grid img{width:100%!important;height:180px!important;max-height:180px!important;max-width:100%!important;object-fit:contain;margin:0 auto 16px}
.minimal-feature-grid span{font-size:14px;color:#596271}
body.minimal .minimal-detail{display:block;max-width:1000px;margin:0 auto;background:#fff;color:#1c2733;border:0;border-bottom:1px solid #e1e5ea;border-radius:0;padding:0 24px;overflow:visible;scroll-margin-top:90px}
body.minimal .minimal-detail>summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:18px 0;font-size:17px;font-weight:700;line-height:1.5;cursor:pointer;list-style:none;color:#1c2733}
.minimal-detail>summary::-webkit-details-marker{display:none}
.minimal-detail>summary::after{content:'+';font-size:24px;font-weight:400;flex:0 0 auto}
.minimal-detail[open]>summary::after{content:'−'}
body.minimal .minimal-detail-body{padding:8px 0 28px;line-height:1.8}
body.minimal .minimal-detail-body>section{max-width:none!important;margin:0!important;padding:24px 0!important;min-height:0!important;border:0!important;border-radius:0!important}
body.minimal .minimal-detail-body>section>.wrap{padding-left:0;padding-right:0}
body.minimal .minimal-detail-body .scene .inner{padding:40px 24px;min-height:0}
body.minimal .minimal-detail-body h2{font-size:clamp(22px,3vw,30px)!important;line-height:1.4!important}
body.minimal .minimal-detail-body h3{font-size:20px!important;line-height:1.5!important}
body.minimal .minimal-detail-body p{font-size:16px!important}
body.minimal .minimal-detail-body .orb{display:none}
body.minimal .minimal-detail-body .bg{background-attachment:scroll}
body.minimal .inline-detail{padding:0;margin-top:20px;width:100%;background:transparent}
body.minimal .inline-detail>summary{font-size:15px;min-height:52px;padding:14px 0}
body.minimal .minimal-price{font-size:22px!important;font-weight:800;margin-top:20px;color:var(--accent-d,var(--accent,#2563eb))}
body.minimal .prod h2{font-size:clamp(24px,3vw,34px)!important}
body.minimal .prod .desc{font-size:17px!important;line-height:1.7}
body.minimal .prod .stage{min-height:220px}
body.minimal .portals{padding:48px 0}
body.minimal .portals .statement{padding:0!important}
body.minimal .portals .small,body.minimal .portals .after{display:none}
body.minimal .portals h2{font-size:30px}
body.minimal .portal{min-height:0;aspect-ratio:1.25}
body.minimal .portal-grid{margin-top:24px}
body.minimal .minimal-resources{display:flex;justify-content:center;flex-wrap:wrap;gap:0 24px;padding-bottom:12px;font-size:14px}
body.minimal footer{margin-top:48px}
body.minimal .minimal-resources a{color:inherit;text-decoration:underline;text-underline-offset:4px;padding:12px 2px;display:inline-block;line-height:1.4}  /* 손가락 44px (2026-09-14 감사) */
.minimal-anchor,[id]{scroll-margin-top:90px}
.minimal-actions a:focus-visible,.minimal-detail>summary:focus-visible,.minimal-shortcuts a:focus-visible{outline:3px solid #469bff;outline-offset:5px}
@media(max-width:720px){
 body.minimal .cine-hero{min-height:min(600px,88svh);padding-top:76px}
 body.minimal .cine-hero .inner{padding-bottom:36px}
 body.minimal .cine-hero.product-hero.home-hero{padding:90px 0 36px;min-height:88svh}
 body.minimal .cine-hero.home-hero .inner{padding:0 20px}
 body.minimal .home-hero figure img{top:0;width:100%;height:100%;object-fit:cover;object-position:center}
 body.minimal .home-hero figure::after{background:rgba(3,18,41,.66)}
 body.minimal .hero,body.minimal .phero{padding-top:30px;padding-bottom:30px}
 body.minimal header h1{font-size:32px!important}
 body.minimal header .lead,body.minimal header .sub{font-size:16px!important;margin-top:16px!important}
 body.minimal .minimal-note{font-size:13px!important}
 .minimal-actions{gap:10px;margin-top:22px}
 .minimal-actions a{font-size:15px;padding:11px 16px;min-height:46px}
 body.minimal .hero .grid2,body.minimal .phero .grid2{gap:28px}
 body.minimal .hero-products{margin-top:12px}
 body.minimal .hero-product{min-width:0}
 body.minimal .minimal-overview{padding:32px 0!important}
 .minimal-feature-grid{gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
 .minimal-feature-grid>a{padding:10px 6px}
 .minimal-feature-grid img{height:100px!important;max-height:100px!important}
 body.minimal .minimal-feature-grid h2{font-size:16px!important}
 .minimal-feature-grid span{font-size:12px}
 .minimal-shortcuts{justify-content:flex-start;gap:0 22px;font-size:14px}
 body.minimal .minimal-detail{padding:0 20px}
 body.minimal .minimal-detail>summary{font-size:16px;min-height:60px}
 body.minimal .inline-detail{padding:0}
 body.minimal .prod{gap:24px}
 body.minimal .prod .stage{min-height:0}
 body.minimal .portal{aspect-ratio:1.4}
 body.minimal .minimal-detail-body .wrap{max-width:100%}
 body.minimal .minimal-detail-body table{display:block;max-width:100%;overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
/* 9/14 사장님: 파란 phero 바탕의 두 번째 버튼(가격·접수)이 검은 글자로 보이던 것 — header.hero 규칙과 같게 */
body.minimal-keylink .phero .minimal-actions a:first-child{background:#fff;color:#244f95;border-color:#fff}
body.minimal-keylink .phero .minimal-actions a+a{background:transparent;color:#fff;border-color:#ffffffaa}

/* ═══ keylink-product.css ═══ */
/* Show the connected ATOM and remote PCB alongside the phone illustration. */
body.keylink-device-page .phone-hero-stage>div:first-child{padding-top:20px}
body.keylink-device-page .phone-hero-stage>figure svg{height:690px!important}
body.keylink-device-page .keylink-device{position:relative;z-index:2;width:250px;max-width:100%;margin:28px 0 0;padding:0;border-radius:0;overflow:visible;background:transparent}
body.keylink-device-page .keylink-device img{display:block;width:100%;max-width:100%;height:auto;margin:0;border-radius:0;background:transparent}
body.keylink-device-page .phero .minimal-actions a{background:#fff;border-color:#fff;color:#244f95}
body.keylink-device-page .phero .minimal-actions a+a{background:transparent;border-color:#ffffff80;color:#fff}
@media(max-width:700px){
 body.keylink-device-page header.phero{overflow:hidden}
 body.keylink-device-page .phone-hero-stage>div:first-child{padding-top:10px}
 body.keylink-device-page .keylink-device{width:220px;margin-top:28px}
 body.keylink-device-page .phone-hero-stage>figure{top:auto;bottom:0;right:-12px;width:58%}
 body.keylink-device-page .phone-hero-stage>figure svg{height:300px!important}
}

/* ═══ page-message.css ═══ */
/* One readable message between the hero and optional product detail. */
body.minimal .page-message{position:relative;z-index:4;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:36px 24px;background:#fff;color:#263340;border:0;border-radius:0;text-align:left}
.page-message-inner{max-width:1000px;margin:0 auto}
body.minimal .page-message p{max-width:700px;margin:0;font-size:19px!important;font-weight:400;line-height:1.85!important;letter-spacing:-.02em;color:#46515c;word-break:keep-all;overflow-wrap:break-word}
body.minimal .page-message h2{display:block;max-width:700px;margin:0 0 12px;color:#244f95;font-size:24px!important;font-weight:750;line-height:1.5!important;letter-spacing:-.025em;word-break:keep-all;overflow-wrap:break-word}
body.minimal .page-message+.minimal-overview,body.minimal .page-message+.portals,body.minimal .page-message+#products{padding-top:24px!important}
@media(max-width:720px){
 body.minimal .page-message{padding:28px 20px}
 body.minimal .page-message p{font-size:18px!important;line-height:1.8!important}
 body.minimal .page-message h2{font-size:22px!important;margin-bottom:10px}
}

/* Keep decorative equipment complete above the introduction. */
body.minimal-keylink .equipment-stage>figure img{height:460px!important}
@media(max-width:700px){
 body.minimal-keylink .equipment-stage>figure{position:relative;top:auto;right:auto;width:100%;margin:20px 0 0!important}
 body.minimal-keylink .equipment-stage>figure img{height:220px!important;margin-left:auto;margin-right:12px}
}

/* Legible actions on the blue product hero. */
body.minimal-keylink header.phero .minimal-actions a:first-child{background:#fff;color:#244f95;border-color:#fff}
body.minimal-keylink header.phero .minimal-actions a+a{background:transparent;color:#fff;border-color:#ffffffb3}
body.minimal-keylink header.phero .minimal-actions a+a:hover{background:#ffffff18}

/* 9/14 사장님: 선택 전 안내 문단 아래 적용 가능한 리모컨 그룹 컷 */
.page-message .remote-group{margin:22px 0 0;padding:0}.page-message .remote-group img{display:block;width:100%;max-width:1000px;height:auto}.page-message .remote-group figcaption{font-size:14px;line-height:1.7;color:#61727e;margin-top:10px}
@media(max-width:640px){.page-message .remote-group figcaption{font-size:13px}}

/* 9/14 사장님: 모음 컷을 선택 카드(어떻게 다시 쓰고 싶으세요?) 아래로 */
.decision .remote-group{margin:28px auto 0;padding:0;max-width:1000px}.decision .remote-group img{display:block;width:100%;height:auto}.decision .remote-group figcaption{font-size:14px;line-height:1.7;color:#61727e;margin-top:10px;text-align:left}

/* ═══ hero-layout.css ═══ */
/* Shared image placement: complete visuals, contained in the blue hero. */
body.minimal-keylink header.phero{background:linear-gradient(145deg,#2b5395,#203f78) top/100% calc(100% - 84px) no-repeat #fff;padding:36px 0 24px;overflow:visible}
body.minimal-keylink header.phero .crumb{margin-bottom:24px}
body.minimal-keylink .equipment-stage,body.minimal-keylink .phone-hero-stage{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px!important;align-items:center!important;min-height:460px}
body.minimal-keylink .equipment-stage>div:first-child,body.minimal-keylink .phone-hero-stage>div:first-child{padding:0;min-width:0!important;max-width:none!important;width:auto}
body.minimal-keylink .equipment-stage>figure,body.minimal-keylink .phone-hero-stage>figure{position:relative;inset:auto;width:100%;min-width:0;margin:0!important;opacity:1!important;mask-image:none!important;-webkit-mask-image:none!important;transform:none;z-index:1}
body.minimal-keylink .equipment-stage>figure img{height:485px!important;max-width:100%!important;width:auto!important;object-fit:contain;margin:0 auto!important}
body.minimal-keylink .equipment-stage figcaption{display:block;font-size:13px;color:#3d5067!important;margin:14px 0 0}
body.minimal-keylink .phone-hero-stage>figure{display:flex;align-items:center;justify-content:center;gap:20px}
body.minimal-keylink .phone-hero-stage>figure svg{height:460px!important;width:auto!important;max-width:52%!important;flex:0 1 52%;margin:0}
body.minimal-keylink .phone-hero-stage .keylink-device{display:block;position:static;width:42%;max-width:220px;margin:0;padding:0;flex:0 1 42%}
body.minimal-keylink .phone-hero-stage .keylink-device img{display:block;width:100%;height:auto;max-width:100%}
body.minimal-keylink .copy-comparison{display:grid!important;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);align-items:center;gap:14px;width:100%}
body.minimal-keylink .copy-comparison .remote-example{min-width:0;text-align:center}
body.minimal-keylink .copy-comparison img{height:330px!important;max-width:100%!important;margin:0 auto 18px!important}
body.minimal-keylink .copy-comparison .copy-arrow{font-size:30px;color:#c5d9f8;text-align:center}
body.minimal-keylink .copy-comparison .remote-label{display:block;color:#fff;font-size:15px;font-weight:700}
body.minimal-keylink .hero .heroill{max-width:440px;justify-self:center}
body.minimal-keylink .hero .ba-card{width:100%;max-width:440px}
body.minimal-keylink .hero .ba-pic{width:100%;left:0}
body.minimal-keylink .hero .ba-item.ba-phone svg{max-height:300px}
@media(max-width:820px){
 body.minimal-keylink header.phero{padding:28px 0 24px}
 body.minimal-keylink .equipment-stage,body.minimal-keylink .phone-hero-stage{grid-template-columns:minmax(0,1fr);gap:28px!important;min-height:0}
 body.minimal-keylink .equipment-stage>figure,body.minimal-keylink .phone-hero-stage>figure{max-width:360px;justify-self:center}
 body.minimal-keylink .equipment-stage>figure img{height:330px!important}
 body.minimal-keylink .phone-hero-stage>figure svg{height:340px!important}
 body.minimal-keylink .copy-comparison img{height:220px!important}
 body.minimal-keylink .copy-comparison .remote-label{font-size:14px}
 body.minimal-keylink .hero .ba-item.ba-phone svg{max-height:240px}
}

body.minimal-keylink header.phero:not(:has(.equipment-stage,.phone-hero-stage)){background-size:100% 100%;padding-bottom:36px}

/* Center the hero message and its actions on a shared axis. */
body.minimal-keylink header.phero,body.minimal-keylink header.hero{text-align:center}
body.minimal-keylink header .lead,body.minimal-keylink header .sub{margin-left:auto!important;margin-right:auto!important}
body.minimal-keylink header .minimal-actions{justify-content:center}
body.minimal-keylink header .crumb{text-align:center}
body.minimal-keylink .equipment-stage>div:first-child,body.minimal-keylink .phone-hero-stage>div:first-child{text-align:center}

/* Keep the message anchored independently of the equipment height. */
body.minimal-keylink .equipment-stage>div:first-child,body.minimal-keylink .phone-hero-stage>div:first-child{align-self:start;padding-top:24px}
@media(max-width:820px){body.minimal-keylink .equipment-stage>div:first-child,body.minimal-keylink .phone-hero-stage>div:first-child{padding-top:0}}

/* ═══ detail-groups.css ═══ */
/* Shared disclosure vocabulary; one level of expansion. */
.detail-menu-list{clear:both;margin:0 auto;width:100%}
body.minimal .menu-group>.minimal-detail-body{padding-top:0}
body.minimal .menu-group .menu-topic{padding:24px 0!important;margin:0!important;min-height:0!important;background:transparent;border:0;border-radius:0}
body.minimal .menu-group .menu-topic+.menu-topic{border-top:1px solid #e1e5ea!important;margin-top:12px!important}
body.minimal .menu-group h3.menu-topic-title{font-size:20px!important;line-height:1.5!important;color:#25384e;margin:0 0 16px}
body.minimal .menu-topic-body>section{max-width:none!important;min-height:0!important;margin:0!important;padding:16px 0!important;border:0!important;border-radius:0!important}
body.minimal .menu-topic-body>section>.wrap{padding-left:0;padding-right:0;max-width:100%}
body.minimal .menu-subtopic{padding:16px 0 0}
body.minimal .menu-subtopic>h4{font-size:17px;margin:0 0 12px;color:#25384e}
.menu-topic-link{display:inline-block;margin-top:18px;padding:8px 0;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
header .menu-topic-link{color:inherit}
.menu-topic-link:focus-visible{outline:3px solid #469bff;outline-offset:4px}
@media(max-width:720px){body.minimal .menu-group h3.menu-topic-title{font-size:18px!important}.menu-topic-link{font-size:14px}}

/* Readable insets and width constraints for every expanded content block. */
body.minimal .menu-topic-body{min-width:0;max-width:100%}
body.minimal .menu-topic-body>section{box-sizing:border-box;width:100%;max-width:100%!important}
body.minimal .menu-topic-body>section>.wrap{box-sizing:border-box;width:100%;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;padding:24px!important}
body.minimal .menu-topic-body>.maker-service{padding:24px!important}
body.minimal .menu-topic-body :is(h2,h3,h4,p,li,dd,a){overflow-wrap:break-word}
body.minimal .menu-topic-body .shot img{max-width:100%;height:auto;transform:none!important;object-fit:contain}
@media(max-width:720px){body.minimal .menu-topic-body>section>.wrap,body.minimal .menu-topic-body>.maker-service{padding:20px 16px!important}}

/* ═══ purchase-guide.css ═══ */
/* An always-visible next step directly after the detail menus. */
body.minimal .purchase-guide{max-width:1000px;box-sizing:border-box;margin:32px auto 0;padding:36px 24px;background:#f4f6f9;border:0;border-radius:12px;text-align:center;color:#233244}
.purchase-guide-inner{max-width:720px;margin:0 auto}
body.minimal .purchase-guide h2{font-size:24px!important;line-height:1.45!important;margin:0 0 12px;color:#233244}
body.minimal .purchase-guide p{font-size:17px!important;line-height:1.8!important;margin:0 auto 22px;max-width:660px;color:#4b5868;word-break:keep-all}
body.minimal .purchase-primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;box-sizing:border-box;background:#234f88;color:#fff;border:1px solid #234f88;border-radius:8px;font-size:16px;font-weight:700;line-height:1.5;text-decoration:none}
body.minimal-techbrick .purchase-primary{background:#b6411b;border-color:#b6411b}
.purchase-secondary-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 24px;margin-top:16px}
.purchase-secondary{font-size:15px;font-weight:600;line-height:1.7;color:#43546b;text-decoration:underline;text-underline-offset:4px}
.purchase-primary:focus-visible,.purchase-secondary:focus-visible{outline:3px solid #469bff;outline-offset:4px}
@media(max-width:720px){body.minimal .purchase-guide{margin:24px 16px 0;padding:28px 20px}body.minimal .purchase-guide h2{font-size:22px!important}body.minimal .purchase-guide p{font-size:16px!important}body.minimal .purchase-primary{width:100%;font-size:15px;padding:12px 16px}}

/* Product-specific ordering conditions remain visible below the common action. */
body.minimal .purchase-order-content{max-width:100%;text-align:left;margin-top:24px}
body.minimal .purchase-order-content:empty{display:none}
body.minimal .purchase-order-content>.menu-topic{padding:24px 0!important;margin:0!important;min-height:0!important;background:transparent;border:0;border-top:1px solid #dce2e9;border-radius:0}
body.minimal .purchase-order-content .menu-topic-title{font-size:20px!important;line-height:1.5!important;color:#25384e;margin:0 0 16px}
body.minimal .purchase-order-content p{max-width:none;margin:0 0 16px;text-align:left}
body.minimal .purchase-order-content .menu-topic-body>section{background:transparent!important}
body.minimal .purchase-order-content :is(.wrap,.grid,.cards,form){box-sizing:border-box;max-width:100%;min-width:0}
body.minimal .purchase-order-content :is(input,textarea,select){box-sizing:border-box;max-width:100%}
@media(max-width:720px){body.minimal .purchase-order-content .menu-topic-title{font-size:18px!important}body.minimal .purchase-order-content .menu-topic-body>section>.wrap{padding:16px 0!important}}

/* ═══ detail-template.css ═══ */
/* Common expanded-detail layout. Keep hero and product-card styling independent. */
body.minimal{--detail-accent:#204b73}
body.minimal-keylink{--detail-accent:#244f95}
body.minimal-techbrick{--detail-accent:#963d20}
body.minimal .menu-group>.minimal-detail-body{padding:0 24px 24px!important}
body.minimal .detail-block{box-sizing:border-box;min-width:0}
body.minimal .menu-group .detail-block,body.minimal .purchase-order-content>.detail-block{padding:32px 0!important;margin:0!important}
body.minimal .detail-intro{max-width:760px;margin:0 0 24px;text-align:left}
body.minimal .detail-intro .menu-topic-title{font-size:24px!important;line-height:1.45!important;letter-spacing:-.025em;color:var(--detail-accent)!important;margin:0 0 12px!important}
body.minimal .detail-intro .detail-lead{font-size:18px!important;line-height:1.8!important;color:#445164!important;margin:0!important;max-width:none!important}
body.minimal .detail-content{color:#344154;font-size:17px;line-height:1.8;text-align:left;max-width:100%;min-width:0}
body.minimal .detail-content>section{background:transparent!important;color:inherit!important;min-height:0!important;padding:0!important}
body.minimal .detail-content>section>.wrap{padding:0!important}
body.minimal .detail-content :is(.wrap,.inner,.copy){max-width:100%!important;width:100%!important;min-width:0;box-sizing:border-box;text-align:left}
body.minimal .detail-content :is(.reveal,.d1,.d2,.d3){opacity:1!important;transform:none!important}
body.minimal .detail-content :is(h2,h3,h4){font-size:20px!important;line-height:1.5!important;color:#25384e!important;margin:24px 0 12px!important;text-align:left}
body.minimal .detail-content p{font-size:17px!important;line-height:1.8!important;color:#445164!important;max-width:none!important;text-align:left;margin:0 0 16px!important}
body.minimal .detail-content a:not(.btn):not(.purchase-primary){color:var(--detail-accent);text-underline-offset:3px}
body.minimal .detail-content figure{margin:24px auto!important;max-width:100%;text-align:center}
body.minimal .detail-content img{height:auto!important;max-width:100%!important;object-fit:contain;transform:none!important}
body.minimal .detail-media img{display:block;width:100%;max-width:760px!important;margin:auto}
body.minimal .detail-content figcaption{font-size:14px!important;line-height:1.7;color:#637084;text-align:center;margin-top:12px}
body.minimal .detail-content .shot{max-width:100%;height:auto!important;overflow:visible!important;margin:24px auto!important;text-align:center}
body.minimal .detail-content .shot svg{display:block;margin:auto;max-width:100%;height:auto}
body.minimal .detail-content :is(.spec,.spec-grid){display:grid;grid-template-columns:minmax(90px,22%) minmax(0,1fr);gap:0;margin:24px 0;border-top:1px solid #dce2e9}
body.minimal .detail-content :is(.spec,.spec-grid)>:is(dt,dd){margin:0;padding:12px 14px;border-bottom:1px solid #dce2e9;font-size:16px;line-height:1.7;min-width:0;overflow-wrap:anywhere}
body.minimal .detail-content :is(.spec,.spec-grid)>dt{background:#f4f6f9;font-weight:700;color:#25384e}
body.minimal .detail-content table{width:100%;border-collapse:collapse;margin:24px 0;table-layout:auto;font-size:16px;line-height:1.7}
body.minimal .detail-content :is(th,td){padding:12px 14px!important;border-bottom:1px solid #dce2e9;text-align:left;vertical-align:top;white-space:normal!important;overflow-wrap:anywhere}
body.minimal .detail-content thead th{background:#f4f6f9;color:#25384e;font-weight:700}
body.minimal .detail-content .detail-steps{list-style:none;counter-reset:detail-step;margin:24px 0;padding:0}
body.minimal .detail-content .detail-steps>li{position:relative;counter-increment:detail-step;padding:14px 0 14px 42px;border-bottom:1px solid #e1e5ea}
body.minimal .detail-content .detail-steps>li:before{content:counter(detail-step);position:absolute;left:0;top:15px;width:27px;height:27px;border-radius:50%;background:#eef2f7;color:var(--detail-accent);font-size:14px;line-height:27px;font-weight:700;text-align:center}
body.minimal .detail-content :is(.detail-note,.fit){background:#f4f6f9;border:0;border-radius:8px;padding:16px 20px;margin:24px 0 0;color:#4b5868;font-size:15px;line-height:1.8}
body.minimal .detail-content .detail-note p{font-size:15px!important;margin:0!important}
body.minimal .detail-content :is(.ptags,.tagrow){margin:0 0 16px}
body.minimal .detail-content .detail-app-guide{margin-top:24px}
@media(max-width:720px){
 body.minimal .menu-group>.minimal-detail-body{padding:0 16px 16px!important}
 body.minimal .menu-group .detail-block,body.minimal .purchase-order-content>.detail-block{padding:24px 0!important}
 body.minimal .detail-intro .menu-topic-title{font-size:22px!important}
 body.minimal .detail-intro .detail-lead{font-size:17px!important}
 body.minimal .detail-content,body.minimal .detail-content p{font-size:16px!important}
 body.minimal .detail-content :is(h2,h3,h4){font-size:18px!important}
 body.minimal .detail-content :is(th,td){padding:10px 8px!important;font-size:14px}
 body.minimal .detail-content :is(.spec,.spec-grid)>:is(dt,dd){padding:10px;font-size:15px}
}

body.minimal .menu-group .detail-intro h3.menu-topic-title{font-size:24px!important}
body.minimal .detail-content.menu-topic-body>.maker-service{padding:0!important}
body.minimal .detail-content span[style*="inline-flex"]{flex-wrap:wrap;max-width:100%;box-sizing:border-box;justify-content:center}
body.minimal .detail-content span[style*="inline-flex"]>img{min-width:0;max-width:100%!important}
@media(max-width:720px){body.minimal .menu-group .detail-intro h3.menu-topic-title{font-size:22px!important}}

/* Reserve a full marker column even when legacy list styles set padding. */
body.minimal .detail-content ol.detail-steps>li{padding:14px 0 14px 42px!important;text-indent:0!important;list-style:none!important;min-height:28px;box-sizing:border-box}
body.minimal .detail-content ol.detail-steps>li::before{left:0!important;top:15px!important;width:27px!important;margin:0!important}

/* ═══ order-guide.css ═══ */
/* Order-only template: essential steps and one final action. */
body.minimal section.purchase-guide.order-essential{padding:26px 24px;margin-top:24px}
body.minimal .order-essential>h2{margin:0 0 18px!important;font-size:24px!important}
body.minimal .order-essential .order-steps{max-width:820px;margin:0 auto!important;padding:0!important;list-style:none!important;counter-reset:order-step;text-align:left}
body.minimal .order-essential .order-steps>li{position:relative;counter-increment:order-step;padding:8px 0 8px 40px!important;margin:0!important;border:0!important;list-style:none!important;text-indent:0!important;font-size:16px;line-height:1.8;color:#344154}
body.minimal .order-essential .order-steps>li:before{content:counter(order-step);position:absolute;left:0;top:10px;width:25px;height:25px;line-height:25px;text-align:center;font-size:14px;font-weight:700;border-radius:50%;background:#eaf0f7;color:#234f88}
body.minimal .order-essential p.order-note{max-width:820px;margin:12px auto 0!important;font-size:14px!important;line-height:1.7!important;color:#5d6878!important;text-align:left}
body.minimal .order-essential .order-actions{margin:20px auto 0;text-align:center}
.order-mail-dialog{box-sizing:border-box;width:min(760px,94vw);max-height:90vh;border:0;border-radius:12px;padding:28px;background:#fff;color:#233244}
.order-mail-dialog::backdrop{background:rgba(15,23,42,.5)}
.order-mail-close{display:block;margin-left:auto;padding:8px 14px;border:1px solid #ccd4df;border-radius:6px;background:#fff;color:#233244;cursor:pointer}
.order-mail-dialog :is(input,textarea,form,.wrap){box-sizing:border-box;max-width:100%}
@media(max-width:720px){body.minimal section.purchase-guide.order-essential{padding:22px 20px;margin:20px 16px 0}body.minimal .order-essential>h2{font-size:22px!important}body.minimal .order-essential .order-steps>li{padding-left:36px!important;font-size:15px}.order-mail-dialog{padding:20px}}

/* ═══ compact-type.css ═══ */
/* One-step reduction of supporting type across the three sites. */
body.minimal .page-message p{font-size:17px!important;line-height:1.8!important}
body.minimal .page-message h2{font-size:22px!important}
body.minimal .menu-group>summary{font-size:16px!important}
body.minimal .detail-content,body.minimal .detail-content p,body.minimal .detail-intro .detail-lead{font-size:16px!important;line-height:1.75!important}
body.minimal .menu-group .detail-intro h3.menu-topic-title{font-size:22px!important}
body.minimal .detail-content :is(h2,h3,h4){font-size:18px!important}
body.minimal .detail-content :is(table,th,td),body.minimal .detail-content :is(.spec,.spec-grid)>:is(dt,dd){font-size:14px!important;line-height:1.7!important}
body.minimal .detail-content :is(th,td){padding:10px 12px!important}
body.minimal .detail-content :is(.flist,.fit,.detail-note){font-size:15px!important}
body.minimal .detail-content figcaption{font-size:13px!important}
body.minimal .minimal-price,body.minimal .pitem .desc{font-size:16px!important}
body.minimal .order-essential .order-steps>li{font-size:15px!important}
body.minimal .detail-content table.compact-price-table tr>:last-child{min-width:92px;white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important}
@media(max-width:720px){
 body.minimal .page-message p{font-size:16px!important}
 body.minimal .page-message h2{font-size:20px!important}
 body.minimal .detail-content,body.minimal .detail-content p,body.minimal .detail-intro .detail-lead{font-size:15px!important}
 body.minimal .menu-group .detail-intro h3.menu-topic-title{font-size:20px!important}
 body.minimal .detail-content :is(h2,h3,h4){font-size:17px!important}
 body.minimal .detail-content :is(table,th,td),body.minimal .detail-content :is(.spec,.spec-grid)>:is(dt,dd){font-size:13px!important}
 body.minimal .detail-content :is(th,td){padding:9px 6px!important}
 body.minimal .detail-content :is(.flist,.fit,.detail-note){font-size:14px!important}
 body.minimal .detail-content table.compact-price-table tr>:last-child{min-width:74px}
}

/* 9/28 메뉴 끝 「구매하기」 버튼(KEY-FREE 처럼) — 옛 「상담」 자리 */
nav.top .links a.buy{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;background:var(--accent);border:1px solid var(--accent);color:#fff;font-weight:700;}nav.top .links a.buy:hover{background:var(--accent-d,var(--accent));color:#fff;}