:root{--ink:#1c2630;--mute:#5d6b78;--line:#d9e0e6;--bg:#f6f8f9;--soft:#eef2f5;--acc:#2f5f86}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.75 'Pretendard','Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;word-break:keep-all}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.top{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.bar{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.04em;text-decoration:none;line-height:1.2}
.brand small{display:block;font-weight:500;font-size:11px;letter-spacing:0;color:var(--mute)}
nav{display:flex;gap:6px 20px;flex:1;flex-wrap:wrap}
nav a{font-size:15px;font-weight:600;text-decoration:none;color:#34434f}
nav a:hover{color:var(--acc)}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:12px 20px;border-radius:8px;border:1px solid var(--ink)}
.btn.ghost{background:#fff;color:var(--ink)}
.btn.small{padding:8px 14px;font-size:14px}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.tag{display:inline-block;font-size:11px;letter-spacing:.08em;font-weight:700;color:var(--acc);background:#e6eef5;border-radius:99px;padding:2px 10px;margin-bottom:10px}
.hero{background:var(--bg);padding:56px 0}
.hgrid{display:grid;grid-template-columns:45fr 55fr;gap:32px;align-items:center}
h1{font-size:clamp(30px,4.2vw,52px);line-height:1.25;letter-spacing:-.04em;margin:0 0 14px}
h2{font-size:clamp(22px,2.6vw,30px);line-height:1.35;letter-spacing:-.03em;margin:0 0 6px}
h3{font-size:17px;margin:10px 0 2px}
.lead{color:var(--mute);margin:0}
.hslots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hslots .video{grid-column:1/-1}
.note{grid-column:1/-1;margin:0;font-size:12px;color:var(--mute)}
.trust{border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;gap:10px 26px;flex-wrap:wrap;align-items:center;padding-top:14px;padding-bottom:10px;font-size:14px;color:var(--mute)}
.trust .tag{margin:0}
.sec{padding:56px 0;border-bottom:1px solid var(--line)}
.sec:nth-of-type(even){background:var(--bg)}
.grid{display:grid;gap:14px;margin-top:22px}
.c1{grid-template-columns:minmax(0,420px)}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.c5{grid-template-columns:repeat(5,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none;display:block}
.card p{margin:0;font-size:14px;color:var(--mute)}
.faq{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.faq li{border-bottom:1px solid var(--line);padding:12px 0;font-weight:700}
.faq a{text-decoration:none}
.phead{background:var(--bg);padding:36px 0;border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(26px,3.4vw,40px);margin:6px 0 0}
.crumb{margin:0;font-size:13px;color:var(--mute)}
nav a[aria-current]{color:var(--acc);box-shadow:0 2px 0 var(--acc)}
a.card:hover{border-color:#8fa6b8}
.foot{background:#16212b;color:#c4d0da;font-size:13px;padding:34px 0}
.foot .wrap{display:flex;flex-direction:column;gap:12px}
.foot a{color:#e3edf4}
.other{padding-top:12px;border-top:1px solid #2b3a47}
@media(max-width:860px){.hgrid{grid-template-columns:1fr}.c4,.c5{grid-template-columns:repeat(2,1fr)}.c3{grid-template-columns:1fr}.hero{padding:36px 0}}
@media(max-width:560px){body{font-size:16px}.wrap{padding:0 16px}.c2,.c4,.c5{grid-template-columns:1fr}.hslots{grid-template-columns:1fr}nav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px}nav a{white-space:nowrap;font-size:16px}.bar{gap:10px}.btn{width:100%;text-align:center}.btn.small{width:auto}}
.rows{margin-top:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:26px 0;border-top:1px solid var(--line)}
.row h3{font-size:clamp(20px,2.4vw,28px);margin:0;letter-spacing:-.03em}
@media(max-width:860px){.row{grid-template-columns:1fr;gap:12px}}
.hline{margin:14px 0 0;font-size:15px;font-weight:700;color:var(--ink)}
.hlink{display:inline-block;margin-top:8px;font-size:14px;font-weight:700;color:var(--acc);text-decoration:none}
.glance{border-bottom:1px solid var(--line);background:#fff}
.glance .wrap{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;padding-top:14px;padding-bottom:14px}
.glance b{background:var(--soft);border-radius:8px;padding:6px 12px;font-size:14px}
.glance .tag{margin:0}
.body{margin:10px 0 0;font-size:16px;color:#33414d;max-width:68ch}
.lead{max-width:62ch}
.sm{display:block;margin:10px 0 0;font-size:12.5px;color:var(--mute)}
.warn{margin:16px 0 0;padding:12px 14px;border:1px solid #efdcb5;background:#fff7e6;font-size:14px;color:#5a4416;border-radius:8px}
.price{font-weight:800;color:var(--acc)!important;margin-bottom:4px!important}
.hvis .pic,.hvis .shot{width:100%;border-radius:14px}
.pic{display:block;width:100%;border-radius:12px;border:1px solid var(--line)}
.card .pic{margin-bottom:8px}
.shot{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#1c2530 center/cover no-repeat;box-shadow:0 12px 28px rgba(16,28,40,.16)}
.shot:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.25))}
.ph{position:absolute;z-index:2;top:7%;height:86%;aspect-ratio:9/19.5;border:4px solid #0b1118;border-radius:18px;background:#0b1118;box-shadow:0 14px 30px rgba(0,0,0,.4);overflow:hidden}
.ph img{display:block;width:100%;height:100%;object-fit:cover}.ph.r{right:7%}.ph.l{left:6%}
.tg{position:absolute;z-index:3;right:10px;bottom:8px;font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:2px 9px;border-radius:99px}
.tw{overflow-x:auto;margin-top:20px}
table{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
th,td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left;vertical-align:top}
thead th{background:var(--soft);font-size:13px;color:#42505c}
tbody th{font-weight:700;white-space:nowrap}
.steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.steps.c3{grid-template-columns:repeat(3,1fr)}.steps.c4{grid-template-columns:repeat(4,1fr)}.steps.c5{grid-template-columns:repeat(5,1fr)}.steps.c2{grid-template-columns:repeat(2,1fr)}
.steps li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.steps b{display:inline-block;font-size:12px;letter-spacing:.08em;color:var(--acc)}
.steps p{margin:0;font-size:14.5px;color:#33414d}
.faqb{margin-top:20px;border-top:1px solid var(--line)}
.faqb details{border-bottom:1px solid var(--line);padding:12px 0}
.faqb summary{cursor:pointer;font-weight:700}
.faqb p{margin:8px 0 0;color:#33414d;font-size:15px}
.ul{margin:14px 0 0;padding-left:20px;color:#33414d}.ul li{margin:5px 0}
.hvis{display:grid;gap:8px}
.hvis .hbg{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#1c2530 center/cover}
@media(max-width:860px){.steps.c3,.steps.c4,.steps.c5{grid-template-columns:1fr}.ph{border-width:3px}}
@media(max-width:560px){.steps.c2{grid-template-columns:1fr}.tw{margin-left:-16px;margin-right:-16px;padding:0 16px}}

/* ===== 디자인 정리(2026-10-30 점검 반영): 글자 12/14/16/18/22/30+ · 모서리 8/12/태그 · 메뉴 44px · 폰 틀 비율 ===== */
body{font-size:16px}
.tag{font-size:12px}
.draft,.tg,.steps b{font-size:12px}
.btn{font-size:16px}.btn.small{font-size:14px;min-height:44px;display:inline-flex;align-items:center}
nav{gap:0 8px}
nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:16px}
.brand{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px}
h2{font-size:22px}
h3{font-size:18px}
.row h3{font-size:22px}
.steps h3{font-size:18px}
.steps p,.faqb p,table,.hline{font-size:16px}
thead th{font-size:14px}
.sm,.crumb,.foot,.card p,.glance b,.trust,.hlink{font-size:14px}
.warn{font-size:14px}
.card h3{font-size:18px}
.shot{border-radius:12px;container-type:inline-size}
.hvis .pic,.hvis .shot{border-radius:12px}
.ph{border-width:max(4px,.75cqw);border-radius:14%/6.5%}
.ph img{border-radius:inherit}
.fig{position:relative;margin:0}.fig .pic{display:block}
.fig .tg{position:absolute;right:10px;bottom:8px;z-index:2}
@media(max-width:560px){nav a{font-size:16px}}
.brand small{font-size:12px}
.phead h1{font-size:clamp(30px,3.4vw,40px)}
.faqb summary{min-height:44px;display:flex;align-items:center}
.faqb details{padding:0}
.faqb details[open] p{padding-bottom:12px}
.grid>*,.row>*{min-width:0}
.hero{background:#f3f6f8}
.hero h1{font-size:clamp(30px,3.7vw,48px);line-height:1.22}
.hgrid{grid-template-columns:44fr 56fr}
.seam{position:absolute;z-index:1;top:0;bottom:0;left:44%;width:16%;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 50%,transparent);mask-image:linear-gradient(90deg,transparent,#000 50%,transparent)}
.pic.appimg{max-width:260px;margin:0 auto;border:0;border-radius:18px;box-shadow:0 8px 22px rgba(16,28,40,.16)}
[id]{scroll-margin-top:76px}
.flowd{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.flowd li{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 12px;text-align:center}
.flowd li+li::before{content:"→";position:absolute;left:-14px;top:50%;transform:translateY(-50%);color:var(--acc);font-weight:800}
.flowd b{display:block;font-size:18px}.flowd small{display:block;font-size:14px;color:var(--mute)}
@media(max-width:560px){.flowd{grid-template-columns:1fr 1fr}.flowd li+li::before{display:none}}
/* 흐름 줄은 위 카드 줄과 같은 폭으로 늘림 */
.grid.c1:has(>.flowd){grid-template-columns:minmax(0,1fr);justify-content:stretch}
.flowd{width:100%;gap:16px}
.flowd li+li::before{left:-15px}

/* ===== 디자인 점검 2차(2026-10-30): 모바일 붕괴 수정 + 영상 제목 중복 제거 + 메뉴 ===== */
@media(max-width:860px){.hgrid{grid-template-columns:1fr}.hero{padding:32px 0}}
nav{scrollbar-width:none}nav::-webkit-scrollbar{display:none}
@media(max-width:560px){nav{flex-wrap:wrap;overflow:visible;gap:0 4px}nav a{font-size:15px;padding:0 6px}.sec{padding:40px 0}.phead{padding:28px 0}}
.vid .operation-title,.grid>.operation-video .operation-title{display:none}

/* ===== 디자인 점검 3차(2026-10-30 밤): 앱 화면은 모두 폰 틀 안 · 비중 · 모바일 머리말 ===== */
/* 단독 앱 화면도 사진 위 폰(.ph)과 같은 틀 — 9:19.5, 틀 두께 = 폭의 약 3%, 모서리 14%/6.5%. 크기 L 240 / 모바일 200 */
.pic.appimg{box-sizing:border-box;width:100%;max-width:200px;aspect-ratio:9/19.5;object-fit:cover;object-position:top;border:6px solid #0b1118;border-radius:14%/6.5%;background:#0b1118;box-shadow:0 14px 30px rgba(16,28,40,.22)}
:not(.grid)>.pic.appimg{margin:32px auto 0}
/* 카드 안의 폰(M): 다른 카드 사진과 같은 4:3 칸, 폰 전체가 보이게 가운데(밝은 바탕) */
.pbox{position:relative;box-sizing:border-box;aspect-ratio:4/3;margin-bottom:8px;border-radius:12px;overflow:hidden;background:var(--soft);border:1px solid var(--line);display:flex;justify-content:center;align-items:center;padding:16px 0}
.pbox>.pic.appimg{width:auto;height:100%;max-width:none;margin:0;border-width:4px}
/* 서비스 카드 사진 높이 통일(키프리 홈) */
#choose .card>.pic{aspect-ratio:4/3;object-fit:cover}
/* 4단 카드 속 사진 위 폰이 너무 작던 것(48px) → 칸을 4:3으로, 버스 사진도 같은 칸(폰이 있는 왼쪽 기준) */
.grid.c4 .card .shot{aspect-ratio:4/3}
.grid.c4 .card .fig .pic{aspect-ratio:4/3;object-fit:cover;object-position:left center}
/* 폰 한두 대 + 설명 구역: 왼쪽 글, 오른쪽 폰 (빈 오른쪽 없애기) */
@media(min-width:861px){
.sec .wrap:has(>.grid>.pic.appimg){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:repeat(7,auto) 1fr;column-gap:64px;align-items:start}
.sec .wrap:has(>.grid>.pic.appimg)>*{grid-column:1}
.sec .wrap:has(>.grid>.pic.appimg)>.tag{justify-self:start}
.sec .wrap:has(>.grid>.pic.appimg)>.grid{grid-column:2;grid-row:1/-1;margin-top:0;align-self:center;justify-items:center}
.sec .wrap:has(>.grid.c1>.pic.appimg)>.grid{grid-template-columns:200px}
.sec .wrap:has(>.grid.c2>.pic.appimg)>.grid{grid-template-columns:repeat(2,170px);gap:20px}
}
@media(max-width:860px){.grid.c2:has(>.pic.appimg){grid-template-columns:repeat(2,minmax(0,1fr))}.grid:has(>.pic.appimg){justify-items:center}}
@media(max-width:560px){.pic.appimg{max-width:170px;border-width:5px}.pbox>.pic.appimg{border-width:4px}}
/* 모바일 머리말: 1줄 = 로고 왼쪽 · 버튼 오른쪽, 2줄 = 메뉴 */
@media(max-width:560px){.top .bar{justify-content:space-between;row-gap:0}.top .bar>nav{order:3;flex:1 0 100%}}

/* ===== 3차-2: 미디어 크기 규칙 — 단독 영상·장면 860 가운데 / 둘은 전체 폭 반반 / 단독 사진 640 가운데 / 카드 4:3 / 부품 카드 300 상자 ===== */
.vid{max-width:860px;margin-left:auto;margin-right:auto}
.vid.grid{max-width:none}
.grid.c1:has(>.vid){grid-template-columns:minmax(0,860px);justify-content:center}
.grid.c1:has(>.pic:not(.appimg)){grid-template-columns:minmax(0,640px);justify-content:center}
.grid.c1>.pic:not(.appimg){width:100%}
.grid.c2>img.pic:only-of-type:not(.appimg){grid-column:1/-1;justify-self:center;width:100%;max-width:760px}
.grid.c2>.shot{aspect-ratio:16/9}
.grid.c3 .card>.pic,.grid.c3 .card .fig .pic,.grid.c3 .card .shot{aspect-ratio:4/3;object-fit:cover}
.grid.c3 .card .fig .pic{object-position:left center}
.grid.c4 .card>.pic{height:300px;width:100%;object-fit:contain;aspect-ratio:auto}
.hvis .fig .pic{aspect-ratio:16/10;object-fit:cover}
.hvis>.pic.hsq{aspect-ratio:4/3;object-fit:contain}

/* 3차-3: 모션 장면 좌우 여백(라이브 기본 40px) 제거 — 같은 쪽의 영상과 폭을 맞춘다(단독 860 · 둘은 반반) */
.vid figure.bkc,.grid>.vid figure.bkc{margin-left:0;margin-right:0}
.grid.c2 figure.bkc{margin-left:0;margin-right:0}
/* 3차-4: 그리드 안 .vid 는 칸을 채운다 — auto 여백 때문에 크기 없는 모션 장면(bus.html 13-3)이 폭 0으로 접히던 것 */
.grid>.vid{width:100%}

/* ===== 3차-5 (impeccable 리뷰): 안내 상자 왼쪽 굵은 띠 제거 · 구역 제목 위 꼬리표 숨김(히어로는 유지) · 건너편 사이트 링크를 버튼 줄로 ===== */
.sec>.wrap>.tag{display:none}
.wrap.rn-other{padding:32px 20px 48px}
@media(max-width:560px){.wrap.rn-other{padding:24px 16px 40px}}
.wrap.rn-other a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;box-sizing:border-box;padding:0 20px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:16px;font-weight:700;text-decoration:none}
.wrap.rn-other a::after{content:"";flex:none;width:20px;height:20px;background:var(--acc);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.wrap.rn-other a:hover{border-color:var(--acc)}
.wrap.rn-other a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* 3차-6: 사용 장면 줄은 좌·우·좌로 번갈아(PC만, 폰은 글 → 사진 순서 그대로) */
@media(min-width:861px){.rows>.row:nth-child(even)>:last-child{order:-1}}

/* ===== 3차-7: 머리말 — 사이트 이름은 크게(Archivo 넓은 굵은체), 설명은 옆에 작게 파란색, 메뉴는 오른쪽 버튼 옆으로 ===== */
.top .brand{flex-direction:row;align-items:center;gap:12px;font-family:'Archivo','Pretendard','Noto Sans KR',sans-serif;font-stretch:125%;font-size:24px;font-weight:800;letter-spacing:0;color:var(--ink);white-space:nowrap}
.top .brand small{font-family:'Pretendard','Noto Sans KR','Malgun Gothic',sans-serif;font-stretch:100%;font-size:13px;font-weight:600;color:var(--acc);padding-left:12px;border-left:1px solid var(--line);line-height:1.2}
@media(min-width:561px){.top .bar>nav{flex:0 1 auto;margin-left:auto;justify-content:flex-end}}
@media(max-width:860px) and (min-width:561px){.top .brand{font-size:20px}.top .brand small{display:none}}
@media(max-width:560px){.top .brand{flex-direction:column;align-items:flex-start;gap:2px;font-size:20px}.top .brand small{padding-left:0;border-left:0;font-size:12px}}

/* ===== 3차-8: 앱 화면 공통 폰 틀 하나 — 실제 기기처럼: 옅은 흑연 회색 테두리 + 얇은 회색 금속 테(밝은 반사 1px) + 부드러운 그림자. 흰 띠 없음. 단독·사진 위·카드 안 폰 모두 같은 틀 ===== */
.ph,.pic.appimg,.pbox>.pic.appimg{border-color:#2b3036;background:#2b3036;box-shadow:0 0 0 1px #474e56,0 0 0 2px #a3abb3,0 0 0 3.5px #555d66,0 18px 36px rgba(10,18,28,.26),0 4px 10px rgba(10,18,28,.16)}
@media(max-width:560px){.ph,.pic.appimg,.pbox>.pic.appimg{box-shadow:0 0 0 1px #474e56,0 0 0 1.5px #a3abb3,0 0 0 2.5px #555d66,0 12px 24px rgba(10,18,28,.24)}}

/* ===== 3차-9: 하위 쪽 히어로 그림 — vis = 오른쪽 그림(누끼는 그림자만, 사진은 16:10), bg = 배경 사진(오른쪽에 두고 글 쪽은 바탕색으로 흐리게) ===== */
.phead .hgrid{align-items:center}
.phead .hvis{display:flex;justify-content:center;align-items:center}
.phead .hvis .cut{display:block;width:auto;height:auto;max-width:100%;max-height:340px;filter:drop-shadow(0 16px 28px rgba(16,28,40,.18))}
.phead .hvis .pic{aspect-ratio:16/10;object-fit:cover}
.phead .hvis .shot{width:100%}
.phead.pbg{position:relative;overflow:hidden;padding:72px 0}
.pbgimg{position:absolute;inset:0;background:var(--bg) right center/cover no-repeat}
.pbgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(246,248,249,.98) 0%,rgba(246,248,249,.95) 46%,rgba(246,248,249,.6) 64%,rgba(246,248,249,0) 86%)}
.phead.pbg .wrap{position:relative;z-index:1}
.phead.pbg .wrap>div{max-width:620px}
@media(max-width:860px){.phead .hvis .cut{max-height:220px}.phead.pbg{padding:200px 0 32px}.pbgimg{inset:0 0 auto;height:230px;background-position:center}.pbgimg::after{background:linear-gradient(180deg,rgba(246,248,249,0) 0%,rgba(246,248,249,.35) 60%,rgba(246,248,249,1) 100%)}}
.ph.sm{height:72%;top:14%}

/* ===== 3차-10: 벤치마크 반영 — 세 가지 가치 기둥 · 한눈에 보는 기능 칸 · 마무리 띠 · 줄 안 모션 ===== */
.glance.pill3 .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 40px;align-items:start;padding-top:32px;padding-bottom:32px}
.glance.pill3 .wrap>div{display:flex;flex-direction:column;gap:6px}
.glance.pill3 b{background:none;border-radius:0;padding:0;font-size:18px;color:var(--ink)}
.glance.pill3 span{font-size:15px;line-height:1.65;color:var(--mute)}
@media(max-width:860px){.glance.pill3 .wrap{grid-template-columns:1fr;gap:18px;padding-top:24px;padding-bottom:24px}}
.feats{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feats li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:6px}
.feats .ic{width:26px;height:26px;color:var(--acc);margin-bottom:6px}
.feats b{font-size:17px;color:var(--ink)}
.feats span{font-size:15px;line-height:1.6;color:var(--mute)}
@media(max-width:860px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.feats{grid-template-columns:1fr}}
.sec.band{background:var(--ink);border-bottom:0;padding:56px 0}
.sec.band h2{color:#fff}
.sec.band .body{color:#c6d0da}
.sec.band .btn{background:#fff;color:var(--ink);border-color:#fff}
.sec.band .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.sec.band .btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.row>.vid{width:100%;margin:0;max-width:none}
.row>.vid figure.bkc{margin:0}
/* 3차-11: 이름표 달린 단독 사진도 640 가운데(다른 단독 사진과 같은 크기) */
.grid.c1:has(>.fig){grid-template-columns:minmax(0,640px);justify-content:center}
.grid.c1>.fig .pic{width:100%}

/* ===== 3차-12 (캡처 검토 11가지) ===== */
/* 1: 모션 장면이 그림을 받기 전 빈 상자 대신 정지 그림을 덮어 두고, 다 그려지면 걷음 */
figure.bkc,.bfx-slab{position:relative}
.bkc-still{position:absolute;left:0;top:0;width:100%;z-index:2;pointer-events:none;transition:opacity .4s ease-out,visibility 0s linear .4s}
.bkc-still img{display:block;width:100%;height:auto;border-radius:12px}
.bkc-ready>.bkc-still{opacity:0;visibility:hidden}
@media(prefers-reduced-motion:reduce){.bkc-still{transition:none}}
/* 4: 큰 제목·구역 제목이 말 중간에서 끊기지 않게 줄 길이를 고르게 */
h1,h2,.hero h1,.phead h1{text-wrap:balance}
/* 6: 꼬리말 위 72px 흰 틈 제거(마무리 띠·마지막 구역에 바로 붙게) */
html body.rn footer.bkfa{margin-top:0!important}
/* 4 보강: 큰 제목 두 번째 문장이 한 줄에 들어가게 — 글 칸 48%, 제목 최대 44px (PC만) */
@media(min-width:861px){.hero .hgrid{grid-template-columns:48fr 52fr}.hero h1{font-size:clamp(30px,3.4vw,44px)}}
/* 흰 바탕 누끼 사진이 혼자 놓일 때는 420(너무 크게 보이지 않게) */
.grid.c1:has(>.pic[src$="-white.webp"]){grid-template-columns:minmax(0,420px)}
/* 사용 장면 줄의 사진(이름표 달린 그림)도 옆 장면과 같은 16:9 칸 */
.row>.fig .pic{aspect-ratio:16/9;object-fit:cover}
/* 메뉴 4개(키프리)가 좁은 폰(≤380)에서도 한 줄에 — 글자·여백만 조금 줄임 */
@media(max-width:380px){.top nav a{font-size:14px;padding:0 4px}}
/* 사이트별 색(옛 사이트 색 이어받기): 키프리 진한 파랑 · 키링크 연한 파랑 · 테크브릭 주황 */
/* 10/31 밝게(애플 계열): --acc = 글자·버튼(흰 바탕 대비 4.5 이상), --pop = 아이콘·화살표 — 색 점검 뒤(보드 2NP9VgPwUGBgb8h4YEQLL8) 키링크 #0068B8(5.7)·테크브릭 #B34700(5.5)로 한 단계 진하게, 장식색도 글자색과 같게 */
body.rn.kf{--acc:#0A2D96;--pop:#0A2D96;--tint:#E7ECF8;--soft:#F3F5FB;--band:#081F68}
body.rn.kl{--acc:#0068B8;--pop:#0068B8;--tint:#E3F0FB;--soft:#F2F8FE;--band:#0B5CA6}
body.rn.tb{--acc:#B34700;--pop:#B34700;--tint:#FBECE0;--soft:#FFF8F0;--band:#2B1D12}
.feats .ic,.flowd li+li::before{color:var(--pop,var(--acc))}
.wrap.rn-other a::after{background:var(--pop,var(--acc))}
.btn{background:var(--acc);border-color:var(--acc)}
.btn.ghost{background:#fff;color:var(--acc)}
.tag{background:var(--tint,#e6eef5)}
.sec.band{background:var(--band,var(--ink))}
.sec.band .btn{color:var(--band,var(--ink))}
.sec.band .body{color:#E6EEF7} /* 밝아진 띠(키링크 #0B5CA6)에서도 대비 4.5 이상 */
/* 사이트 이름·단계 번호 = Michroma(영문·숫자만 있는 넓은 서체, 굵기 하나) */
.top .brand{font-family:'Michroma','Pretendard','Noto Sans KR',sans-serif;font-stretch:100%;font-size:22px;font-weight:400;letter-spacing:.02em}
@media(max-width:860px){.top .brand{font-size:17px}}
/* Michroma는 굵기가 하나뿐 — 같은 색 외곽선으로 획을 두껍게(설명 글자는 그대로) */
/* 머리 문의 버튼 = 테두리 알약(10/31 사용자 선택 B): 흰 바탕 + 사이트 색 테두리·글자, 누르면 채움 */
.top .btn.small{position:relative;height:34px;min-height:34px;padding:0 14px;border-radius:999px;border:1.5px solid var(--acc);background:#fff;color:var(--acc);font-size:14px}
.top .btn.small::after{content:"";position:absolute;inset:-6px -2px} /* 보이는 크기는 34, 누르는 자리는 44 */
@media(max-width:560px){.top .btn.small{font-size:13.5px;padding:0 12px}}
.top .btn.small:hover{background:var(--acc);color:#fff}
.top .btn.small:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* 머리 메뉴 글자: 16/600 → 15/500(폰 14), 버튼(15)보다 크지 않게 — tedee 14·1Control 15 */
.top nav a{font-size:14px;font-weight:500}
/* 메뉴 사이 | 구분선으로 붙여 배치(간격 대신 얇은 세로선) */
.top nav{gap:0}
.top nav a{position:relative;padding:0 14px}
.top nav a+a::before{content:"";position:absolute;left:0;top:50%;width:1px;height:13px;margin-top:-6.5px;background:#c5ced6}
@media(max-width:560px){.top nav a{font-size:13.5px;padding:0 10px}.top nav a:first-child{padding-left:0}}
@media(max-width:380px){.top nav a{font-size:13px;padding:0 8px}}
.top .brand{-webkit-text-stroke:.9px currentColor}
.top .brand small{-webkit-text-stroke:0}
@media(max-width:860px){.top .brand{-webkit-text-stroke:.7px currentColor}}
/* tedee·1Control 실측 기준 여유(10/31): 구역 제목 22→40(폰 26), 구역 위아래 56→96(폰 64), 본문 폭 1080→1200, 머리말 높이 76 */
.wrap{max-width:1240px}
.sec{padding:96px 0}
.sec h2{font-size:clamp(28px,2.8vw,40px);line-height:1.2;letter-spacing:-.03em;margin:0 0 14px}
.sec .lead{font-size:18px;line-height:1.6}
.sec .tag{margin-bottom:14px}
.top .wrap{min-height:76px}
@media(max-width:560px){.sec{padding:64px 0}.sec h2{font-size:26px}}
/* 꼬리말: 내용은 그대로, 크기만 tedee 비율(PC 쪽 높이의 약 5.6%)로 — 여백·로고·글자 키움, 폭은 본문 1200에 맞춤 */
html body.rn footer.bkfa{padding:88px 24px 64px!important}
html body.rn footer.bkfa .bkfa-in{max-width:1200px}
html body.rn footer.bkfa a.bkfa-logo img{height:36px!important}
html body.rn footer.bkfa p.bkfa-tag{margin-top:18px!important;font-size:16px!important}
html body.rn footer.bkfa .bkfa-info{margin-top:48px;padding-top:28px}
html body.rn footer.bkfa p.bkfa-biz{font-size:14px!important}
html body.rn footer.bkfa p.bkfa-copy{margin-top:10px!important;font-size:13px!important}
@media(max-width:720px){html body.rn footer.bkfa{padding:56px 22px 40px!important}html body.rn footer.bkfa a.bkfa-logo img{height:30px!important}html body.rn footer.bkfa .bkfa-info{margin-top:36px}}
.steps b .no{font-family:'Michroma',sans-serif;font-weight:400;font-size:13px;letter-spacing:.04em;margin-right:4px}
/* ===== 다크 모드(10/31): 방문자 폰·PC 설정이 다크면 자동으로. 사이트 색은 어두운 바탕용 밝은 색(세 색 모두 대비 약 7.2~7.4로 밝기를 맞춰 주황이 튀지 않게), 버튼 글자는 어둡게 ===== */
@media(prefers-color-scheme:dark){
:root{color-scheme:dark;--ink:#E6EBF0;--mute:#A3AFBB;--line:#27313C;--bg:#11171E;--soft:#161E27}
body.rn.kf{--acc:#7C9CF5;--pop:#7C9CF5;--tint:#1A2340;--soft:#161E27;--band:#12285E;--btn:#3557C9}
body.rn.kl{--acc:#4AA8EC;--pop:#4AA8EC;--tint:#10283A;--soft:#161E27;--band:#0B4F8C;--btn:#0068B8}
body.rn.tb{--acc:#E58B4E;--pop:#E58B4E;--tint:#2A1D12;--soft:#161E27;--band:#3A2414;--btn:#B34700}
body{background:#0C1116}
.top{background:rgba(12,17,22,.92)}
nav a,.top nav a{color:#C9D2DB}
.top nav a+a::before{background:#3A4552}
.btn:not(.ghost):not(.small){background:var(--btn);border-color:var(--btn);color:#fff}   /* 흰 글자 + 진한 사이트 색(11/01 사용자) */
.btn.ghost,.top .btn.small{background:transparent}
.top .btn.small:hover{color:#0C1116}
.card,.glance,table,.steps li,.flowd li,.feats li,.wrap.rn-other a{background:#141B23}
.body,.steps p,.faqb p,.ul{color:#C4CDD6}
thead th{color:#A3AFBB}
.hero{background:#11171E}
.warn{background:#2A2210;border-color:#5A4720;color:#F0D9A8}
.pbgimg::after{background:linear-gradient(95deg,rgba(17,23,30,.98) 0%,rgba(17,23,30,.95) 46%,rgba(17,23,30,.6) 64%,rgba(17,23,30,0) 86%)}
.sec.band .btn:not(.ghost){background:#fff;border-color:#fff;color:#0C1116}
/* 그림이 어두운 바탕에 묻히지 않게 밝은 판(ego 라이트 다크 점검, 10/31): 누끼·장비 그림, 폰 화면 상자, 폰 화면만 있는 칸 */
img.pic:not(.appimg),img.cut{background-color:#E3E9EF}
.hvis>img.cut{box-sizing:border-box;padding:18px;border-radius:16px}
.pbox{background:#E3E9EF;border-color:#E3E9EF}
.grid:has(>.pic.appimg){background:#E3E9EF;border-radius:16px;padding:24px;justify-items:center}
.wrap>img.pic.appimg{box-shadow:0 0 0 1px #474e56,0 0 0 2px #a3abb3,0 0 0 3.5px #555d66,0 0 0 26px #E3E9EF}
/* 영상 아래 다시 보기·소리 버튼: 흰 덩어리 대신 테두리 버튼 */
html body .operation-video .operation-controls button{background:transparent;color:#E6EBF0;border:1px solid #3A4552}
html body .operation-video .operation-controls button:hover{border-color:var(--acc);color:var(--acc)}
}
@media(prefers-color-scheme:dark) and (max-width:860px){.pbgimg::after{background:linear-gradient(180deg,rgba(17,23,30,0) 0%,rgba(17,23,30,.35) 60%,rgba(17,23,30,1) 100%)}}
/* ===== 전체 디자인 리뷰 반영(10/31 밤, 보드 5AEe4C6He91rbZU3m2nDDj) ===== */
/* 3 제목 위계: 첫 화면 제목은 키우고(52) 구역 제목은 줄여(34) 비율 1.5 */
@media(min-width:861px){.hero h1{font-size:clamp(40px,4vw,52px)}}
.phead h1{font-size:clamp(30px,3.6vw,46px)}
.sec h2{font-size:clamp(26px,2.6vw,34px)}
/* 5 설명 한 줄 길이: 한국어 약 44자에서 줄바꿈 */
.sec p,.operation-video .operation-note{max-width:44em}
/* 8 작은 글자 13px 이상 */
.tag,.tg,.steps b{font-size:13px}
@media(max-width:560px){.top .brand small{font-size:13px}}
/* 12 구역 회색·흰 번갈이 없애고 선으로만 나눔(흰 바탕 위주) */
.sec:nth-of-type(even):not(.band){background:transparent}
.hlink{display:inline-flex;align-items:center;min-height:44px}
/* 11 폰 쪽 길이: 구역 위아래 여백 64→52 */
@media(max-width:560px){.sec{padding:52px 0}}
/* 7 3칸 표: 폰에서 줄마다 카드 — 이름 · 설명 · 셋째 칸(가격 등)을 위아래로, 칸 머리는 작은 이름표로(11/01 리뷰: 두 칸이면 6~7줄로 접힘) */
@media(max-width:560px){
.sec table:has(thead th:nth-child(3):last-child),.sec table:has(thead th:nth-child(3):last-child) tbody{display:block;background:none}
.sec table:has(thead th:nth-child(3):last-child) thead{display:none}
.sec table:has(thead th:nth-child(3):last-child) tbody tr{display:block;margin-bottom:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sec table:has(thead th:nth-child(3):last-child) tbody tr>*{display:block;border:0}
.sec table:has(thead th:nth-child(3):last-child) tbody tr>:first-child{background:var(--soft)}
.sec table:has(thead th:nth-child(3):last-child) tbody tr>:last-child{padding-top:0;font-weight:700}
.sec table:has(thead th:nth-child(3):last-child) tbody tr>[data-h]::before{content:attr(data-h);display:block;font-size:12.5px;font-weight:500;color:var(--mute)}
}
@media(prefers-color-scheme:dark){
/* 1 영상·모션 아래 안내 글자(옛 영상 스타일 색 #183656·#4d5c6a)를 다크 본문색으로 */
html body .operation-video,html body .operation-video :is(p,figcaption,span,li,.operation-note){color:#C4CDD6!important}
html body .operation-video :is(h2,h3,.operation-title){color:#E6EBF0!important}
/* 4 모션 장면(크림 바탕)을 어두운 액자에 두고 밝기 살짝 낮춤 */
figure.bkc,.bfx-slab{background:#1A222C;border-radius:18px;padding:10px}
figure.bkc>[data-bk-scene],.bfx-slab>[data-bk-scene],.bkc-still{filter:brightness(.92)}
.bkc-still{left:10px;top:10px;width:calc(100% - 20px)}
}
/* 키프리 첫 화면: 세 서비스(리모컨 복사·차 키 생성·스마트폰 키)를 한 줄로 + 만든 사람 한 줄(10/31 카피 리뷰) */
.hero .maker{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--mute);max-width:34em}
.hero3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;align-self:center}
.hero3 figure{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 10px 12px}
.hero3 img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain}
.hero3 .ph3 img.pic.appimg{width:58%;max-width:none;height:auto;aspect-ratio:9/19.5;object-fit:cover}
.hero3 figcaption{font-size:14px;font-weight:700;color:#1C2630}
@media(prefers-color-scheme:dark){.hero3 figure{background:#E3E9EF;border-color:#E3E9EF}}
.hero3 figure:not(.ph3) img{mix-blend-mode:multiply} /* 흰 바탕 사진이 다크 모드 밝은 타일에서 네모로 뜨지 않게 */
/* 세 사이트 공통 코어(10/31): tedee식 세 줄(그림 ↔ 글 번갈아) + 쓰는 곳 다섯. 키워드만 사이트 색 */
/* tedee 실측(1366 기준): 그림 451 정사각·모서리 8 · 칸 사이 70 · 줄 사이 96 · 제목 64/600/1.1 · 글 18 · 기능 40 아이콘 + 21/600, 사이 32 */
.crows{display:flex;flex-direction:column;gap:96px;margin-top:64px}
.crow{display:grid;grid-template-columns:451fr 70fr 699fr;align-items:center}
.crow>figure{grid-column:1}.crow>div{grid-column:3}
.crow:nth-child(even)>figure{grid-column:3;grid-row:1}.crow:nth-child(even)>div{grid-column:1;grid-row:1}
.crow:nth-child(even){grid-template-columns:699fr 70fr 451fr}
.crow:nth-child(even)>figure{grid-column:3}
.crow .fig{margin:0}
.crow .pic{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.crow h3{margin:0 0 16px;font-size:clamp(36px,4.7vw,64px);line-height:1.1;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.crow h3 em{font-style:normal;color:var(--acc)}
.crow p.body{max-width:none;margin:24px 0 0;font-size:18px;line-height:1.6;font-weight:400;color:var(--ink)}
.crow p.body+p.body{margin-top:12px}
.chips{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:16px 32px}
.chips li{display:flex;align-items:center;gap:16px;font-size:21px;font-weight:600;line-height:1.1;color:var(--ink)}
.chips .ic{width:40px;height:40px;stroke-width:1.5;color:var(--ink);flex:none}
@media(max-width:860px){.crows{gap:56px;margin-top:40px}.crow,.crow:nth-child(even){grid-template-columns:1fr;gap:24px}.crow>figure,.crow>div,.crow:nth-child(even)>figure,.crow:nth-child(even)>div{grid-column:1;grid-row:auto}.crow p.body{font-size:16px}.chips li{font-size:18px;gap:12px}.chips .ic{width:32px;height:32px}}
.uses{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:72px}
.use{display:flex;flex-direction:column;gap:3px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;transition:border-color .15s}
.use .ic{width:24px;height:24px;color:var(--acc);margin-bottom:6px}
.use b{font-size:16px}
.use span{font-size:14px;line-height:1.5;color:var(--mute)}
.use small{margin-top:6px;font-size:12px;color:var(--mute)}
.use.here{background:var(--tint);border-color:transparent}
.use.here small{color:var(--acc);font-weight:700}
.use:hover{border-color:var(--acc)}
.use:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.core .sm{margin-top:16px}
@media(max-width:1080px){.uses{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.uses{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:48px}.use:last-child{grid-column:1/-1}}

/* 좌우 나눔 쪽(10/31): 키프리 리모컨 복사|차 키 생성, 키링크 출입 관리|버스 */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.split{display:flex;flex-wrap:wrap}
.split .sp{flex:1 1 480px;min-width:0;box-sizing:border-box;padding:88px 32px 80px;display:flex;flex-direction:column;align-items:center;text-align:center;background:#F1F4F9;color:var(--ink)}
.split .sp.dark{background:var(--band);color:#fff}
.split .sp h2{margin:0;font-size:clamp(34px,4.2vw,60px);line-height:1.12;font-weight:700;letter-spacing:-.03em;color:inherit}
.split .sp-name{margin:18px 0 0;font-size:22px;font-weight:800;color:var(--acc)}
.split .sp.dark .sp-name{color:#A9C4F5}
body.rn.kl .split .sp.dark .sp-name{color:#BFE0F8}
.split .sp-img{width:100%;max-width:480px;aspect-ratio:4/3;margin:40px 0 0;border-radius:14px;overflow:hidden;background:#fff}
.split .sp-img img{width:100%;height:100%;object-fit:contain;display:block}
.split .sp-img.cover img{object-fit:cover}
.split .sp-sub{margin:44px 0 0;max-width:30em;font-size:22px;line-height:1.4;font-weight:700}
.split .sp-d{margin:16px 0 0;max-width:32em;font-size:17px;line-height:1.65;color:var(--mute)}
.split .sp.dark .sp-d{color:rgba(255,255,255,.84)}
.split .sp-price{margin:18px 0 0;font-size:15px;font-weight:700}
.split a.sp-btn{margin-top:32px;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:10px;background:var(--acc);color:#fff;font-size:17px;font-weight:700;text-decoration:none}
.split .sp.dark a.sp-btn{background:transparent;border:2px solid #fff;color:#fff}
.split a.sp-btn:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.split .sp.dark a.sp-btn:focus-visible{outline-color:#fff}
.split .sp-foot{margin:40px 0 0;font-size:15px;line-height:1.6;color:var(--mute)}
.split .sp.dark .sp-foot{color:rgba(255,255,255,.84)}   /* .74 는 #0b5ca6 위 4.48 — 4.5 넘게(11/01 리뷰) */
@media(max-width:860px){.split .sp{padding:56px 20px 52px}.split .sp-sub{margin-top:32px;font-size:20px}.split .sp-foot{margin-top:28px}}
@media(prefers-color-scheme:dark){.split .sp{background:#141B23;color:#E6EBF0}.split .sp.dark{background:var(--band)}.split .sp:not(.dark) a.sp-btn{background:var(--btn);color:#fff}}
/* 글자 크기 다시 맞춤(10/31 사용자: 생각보다 큼 — 사이트 히어로 52·구역 제목 34에 맞춰 한 단계 아래로) */
.crow h3{font-size:clamp(28px,3.2vw,44px);margin-bottom:12px}
.crow p.body{font-size:17px}
.crow p.body:first-of-type{margin-top:18px}
.chips{margin-top:26px;gap:12px 28px}
.chips li{font-size:18px;gap:12px}
.chips .ic{width:32px;height:32px}
.split .sp h2{font-size:clamp(30px,3.2vw,44px)}
.split .sp-name{font-size:19px;margin-top:14px}
.split .sp-sub{font-size:20px;margin-top:36px}
.split .sp-d{font-size:16px}
.split a.sp-btn{min-height:48px;font-size:16px}
@media(max-width:860px){.crow h3{font-size:28px}.chips li{font-size:16px}.chips .ic{width:28px;height:28px}.split .sp-sub{font-size:18px}}
/* 전체 글자 한 단계 줄임(10/31 사용자: "다른 부분들 전체에 적용") — 히어로 52→46 · 쪽 제목 46→40 · 구역 제목 34→30 · 본문 18→16 */
@media(min-width:861px){.hero h1{font-size:clamp(36px,3.4vw,46px)}}
.phead h1{font-size:clamp(28px,3vw,40px)}
.sec h2{font-size:clamp(24px,2.3vw,30px)}
.sec .lead{font-size:17px}
.sec p.body{font-size:16px}
.row h3{font-size:20px}
.card h3,.steps h3{font-size:17px}
.feats b{font-size:16px}
.crow h3{font-size:clamp(26px,2.9vw,40px)}
.crow p.body{font-size:16px}
.chips li{font-size:17px}
.split .sp h2{font-size:clamp(28px,2.9vw,40px)}
/* 코어 제목만 다시 키움(10/31 사용자: Quick 버튼 글자 더 크게) 64→40→48 */
.crow h3{font-size:clamp(30px,3.5vw,48px)}
@media(max-width:860px){.crow h3{font-size:30px}}
/* 핵심 키워드(첫 줄, 사이트 색)만 더 크게(10/31 사용자) — 둘째 줄 44, 키워드 1.25배 */
.crow h3{font-size:clamp(28px,3.2vw,44px);line-height:1.12}
.crow h3 em{font-size:1.25em;letter-spacing:-.035em}
@media(max-width:860px){.crow h3{font-size:26px}}
/* 테크브릭 제품 샘플 그림 실제 크기 비율 맞춤(10/31 사용자: RF 보드 폭 ≈ ATOM 폭) — 그림마다 칸 높이를 꽉 채워 크기가 들쭉날쭉해서, RELAY MINI 4 의 ATOM(약 60px)에 맞춰 안쪽 여백으로 줄임 */
.card img.pic[src*="PWM_Encoder_cut"],.card img.pic[src*="remote_cut"],.card img.pic[src*="rf_cc1101_cut"]{box-sizing:border-box}
.card img.pic[src*="PWM_Encoder_cut"]{padding:27px 0}
/* CAMP REMOTE 는 칸 높이 그대로가 ATOM 폭과 같음 */
.card img.pic[src*="rf_cc1101_cut"]{padding:43px 0}

/* 브랜드 스토리: 글 옆 그림(하나 걸러 하나, 10/31) */
.sec.sd .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center}
.sd-f{margin:0}.sd-f img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:16px}
@media(max-width:860px){.sec.sd .wrap{grid-template-columns:1fr;gap:24px}.sd-f img{max-height:300px}}
/* 실제 동작 영상 섬네일(10/31): 누르면 그 줄 아래에 펼쳐 재생, 한 번에 하나 */
.vths{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
html body .vth{display:flex;align-items:center;gap:12px;max-width:360px;padding:8px 14px 8px 8px;border:1px solid var(--line,#D9E0E6);border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
html body .vth:hover,html body .vth[aria-expanded="true"]{border-color:var(--acc,#0A2D96)}
.vth-i{position:relative;flex:none;width:112px;height:63px;border-radius:8px;overflow:hidden;background:#000}
.vth-i img{width:100%;height:100%;object-fit:cover;display:block}
.vth-i i{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(0,0,0,.6)}
.vth-i i::after{content:"";position:absolute;left:12px;top:9px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}
html body .vth[aria-expanded="true"] .vth-i i::after{left:10px;top:10px;width:3px;height:10px;border:0;border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:content-box}
.vth-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.vth-t small{font-size:12px;font-weight:700;color:var(--acc,#0A2D96)}
.vth-t b{font-size:15px;line-height:1.35}
.vth-t em{font-style:normal;font-size:13px;line-height:1.4;opacity:.75}
.crow .vplay{grid-column:1/-1}.crow .vplay[hidden]{display:none}
.vplay video{display:block;width:100%;max-height:70vh;border-radius:16px;background:#000}
@media(max-width:700px){html body .vth{max-width:none;width:100%}}
/* 키프리 홈 첫 화면: 리모컨 복사 사진 하나만 크게(10/31) — 밝은 칸이라 다크 모드에서도 검은 리모컨이 보임 */
.hero1{margin:0;width:100%;align-self:center;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px}
.hero1 img{display:block;width:100%;max-width:560px;height:auto}
@media(prefers-color-scheme:dark){.hero1{background:#E3E9EF;border-color:#E3E9EF}}
@media(max-width:700px){.hero1{padding:18px}}
/* 반반(사진 + 모션): 사진만 있는 칸 규칙(img:only-of-type → 두 칸 차지)이 옆에 모션이 있을 때는 걸리지 않게(10/31) */
.grid.c2>img.pic:only-of-type:not(.appimg):not(:only-child){grid-column:auto;align-self:center;max-width:none}

/* 크게 보여 주는 실제 동작 영상(키링크 셔터, 10/31) */
.vid video.big-vid{display:block;width:100%;max-width:860px;height:auto;border-radius:16px;background:#000}

/* 좌우 나눔: 색 면은 끝까지, 내용은 칸마다 520px 폭으로 가운데 경계 쪽에 모은다(10/31 사용자: 가운데 빈 공간 줄이기). 나란히 놓일 때만 — 폰에서는 그대로 위아래 */
@media(min-width:1000px){.split .sp:first-child{padding-left:max(32px,calc(50% - 568px));padding-right:48px}.split .sp:last-child{padding-right:max(32px,calc(50% - 568px));padding-left:48px}}
/* 11/01 점검 반영 — 폰: 아래 고정 문의 버튼, 코어 사진 낮게(16:9), 적용 분야는 옆으로 넘기는 한 줄 */
.mcta{display:none}
@media(max-width:700px){
.mcta{display:flex;position:fixed;left:16px;right:16px;width:auto!important;bottom:max(16px,env(safe-area-inset-bottom));z-index:60;min-height:52px;justify-content:center;align-items:center;font-size:16px;box-shadow:0 8px 24px rgba(12,17,22,.28)}
body.rn{padding-bottom:84px}
body:has(.mcta) .iq-float{display:none!important}   /* 떠 있는 '궁금한 점 물어보기'가 문의하기 띠를 덮음 — 같은 문의 쪽이라 띠만 둠(11/01) */
.crow .fig .pic{aspect-ratio:16/9;object-fit:cover;height:auto}
.uses{gap:10px}   /* 옆으로 넘기는 띠 → 두 칸 격자(11/01 리뷰: 다섯 중 셋이 화면 밖) — 860 이하 두 칸·마지막 한 줄 규칙을 그대로 씀 */
}
/* 적용 분야 작은 표시(키프리·키링크) 12px → 13px, 설명은 진하게(11/01 점검) */
.use small{font-size:13px}
.use span{color:var(--ink);opacity:.78}
/* 카드 사진 칸: 흰 바탕 한 톤(11/01 점검) */
.grid>.card>img.pic{background:#fff;aspect-ratio:4/3;object-fit:contain}

/* 안내 상자 + 버튼 한 줄(11/01) — 좁으면 아래로 */
.wbr{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:16px}.wbr .warn{margin:0;flex:0 1 620px}.wbr .btns{margin:0}

/* 카드 굵은 한 줄은 크게, 아래 설명은 작게(11/01 캠핑카 구성 카드) */
.card p:has(>.cs){font-size:13px;line-height:1.6}.card .cs{display:block;font-size:16px;line-height:1.45;margin-bottom:6px}

/* 줄 설명의 굵은 한 줄 — 연한 파란색(11/01 테크브릭 제품 줄). 밝은 화면은 읽히게 조금 진하게 */
.kick{color:#2E75C9}
@media(prefers-color-scheme:dark){.kick{color:#7DB8F5}}

/* 주황 강조 글자(키프리 홈 투싼 사용 기록 제목, 11/01 사용자) — 밝은 화면 대비 5.5 */
a.orange{color:#B34700}
@media(prefers-color-scheme:dark){a.orange{color:#F0A062}}

/* 앱 체험 카드(11/01) — 동작 영상 카드와 같은 모양. PC 는 QR, 폰은 앱 화면 + 눌러서 설치 */
.vapp{display:flex;align-items:center;gap:12px;max-width:360px;margin-top:14px;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:12px;color:inherit;text-decoration:none}.vapp:hover{border-color:var(--acc)}
.vapp-i{flex:none;display:flex;align-items:center;justify-content:center;width:63px;height:63px;border-radius:8px;overflow:hidden;background:#fff}.vapp-qr{width:63px;height:63px;display:block}.vapp-sc{display:none;width:100%;height:100%;object-fit:cover;object-position:top}.vapp-m{display:none}
@media(max-width:860px){.vapp{max-width:none;width:100%}}
@media(hover:none) and (pointer:coarse){.vapp-qr,.vapp-pc{display:none}.vapp-sc{display:block}.vapp-m{display:inline}.vapp-i{width:112px;background:#0C1116}}   /* PC: QR 크기 그대로 네모(11/01 사용자), 폰: 앱 화면 112×63 */

/* 영상 카드 옆 앱 체험 카드 — 두 카드 같은 크기(11/01 사용자) */
html body .vths>.vth,.vths>.vapp{flex:1 1 230px;width:auto;max-width:340px;min-height:81px;margin:0;align-self:stretch}   /* 설명 칸(약 580px)에 두 장 나란히 */
@media(max-width:700px){html body .vths>.vth,.vths>.vapp{flex:1 1 100%;width:100%;max-width:none}}


.operation-video{box-sizing:border-box;max-width:908px;margin:44px auto 52px;padding:0 24px;scroll-margin-top:96px;color:#183656}
.operation-video .operation-title{font:700 clamp(22px,2.7vw,28px)/1.45 Pretendard,"Malgun Gothic",sans-serif!important;letter-spacing:-.035em;margin:0 0 18px!important;text-align:left!important;color:#183656!important}
.operation-video .operation-media{margin:0!important;max-width:none!important;width:100%!important}
.operation-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#191b1f;border-radius:10px;overflow:hidden}
.operation-video .operation-note{font:400 16px/1.7 Pretendard,"Malgun Gothic",sans-serif!important;margin:14px 0 0!important;max-width:none!important;text-align:left!important;color:#4d5c6a!important}
.operation-video .operation-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.operation-video .operation-controls button{appearance:none;font:500 15px/1.4 Pretendard,"Malgun Gothic",sans-serif;padding:10px 16px;min-height:42px;border:1px solid #cbd5df;border-radius:6px;background:#fff;color:#183656;cursor:pointer}
.operation-video .operation-controls button:hover{background:#f3f6f8}
.operation-video .operation-controls button:focus-visible{outline:3px solid var(--focus-ring,#2563eb);outline-offset:3px}
.operation-video .operation-links{font:400 15px/1.7 Pretendard,"Malgun Gothic",sans-serif!important;margin:12px 0 0!important;text-align:left!important}
.operation-video .operation-links a{color:#1768bb!important;text-decoration:underline;text-underline-offset:3px}
.operation-video--short{max-width:720px;margin:24px auto 32px;padding:0}
.operation-video--short .operation-title{font-size:20px!important}
@media(max-width:600px){.operation-video{margin:28px auto 36px;padding:0 16px}
.operation-video .operation-title{font-size:21px!important;margin-bottom:14px!important}
.operation-video .operation-note{font-size:15px!important}
.operation-video video{border-radius:7px}
.operation-video--short{padding:0;margin:20px auto 28px}}

.grid>.operation-video,.grid>.vid{grid-column:1/-1}.vid{max-width:860px;margin-top:20px}.rn-other{padding:18px 0 26px;font-size:14px}.operation-video.rn-vid{max-width:none;margin:0;padding:0}.operation-video .operation-media{margin:0;width:100%}.operation-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#191b1f;border-radius:12px}.operation-video .operation-title{font-size:22px;margin:0 0 14px;color:inherit}.operation-video .operation-note{font-size:16px;color:var(--mute);margin:14px 0 0}.operation-video .operation-controls button{min-height:44px}.vid .operation-video{max-width:none;margin:0;padding:0}