/* 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}}

/* 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;}