/* ============================================================================
   퍼스트전산 복합기 사용설명서 — 디자인 시스템
   모바일 우선. 고객이 복합기 앞에 서서 한 손으로 보는 화면이 기준입니다.

   색은 전부 퍼스트전산의 실제 자산에서 가져왔습니다.
     네이비 #03183F  유튜브 썸네일 로고판
     블루   #0D5CAB  본사 홈페이지(firstoa.co.kr) 주색
     골드   #F8B93E  유튜브 썸네일 제목
   맨 아래 세 줄만 바꾸면 사이트 전체가 따라옵니다.
   ========================================================================== */

:root{
  --navy:#03183F; --navy-2:#0A2B62; --navy-3:#123F80;
  --blue:#0D5CAB; --blue-2:#0A4A8C; --blue-3:#3E8BDF;
  --gold:#F8B93E; --gold-2:#DE9714; --gold-soft:#FDF3DE;
  --kakao:#FEE500; --kakao-ink:#181600;

  --ink:#0A1424; --ink-2:#3F4E64; --ink-3:#68768C; --ink-4:#6E7C92;
  --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#E9EDF3; --surface-3:#F8FAFC;
  --line:rgba(3,24,63,.10); --line-2:rgba(3,24,63,.055);
  --dark-ink:#E8EEF8; --dark-ink-2:#9FB3D2;

  --amber:#9A6206; --amber-bg:#FDF5E7; --amber-line:#F0D5A2;
  --green:#0B6E4F; --green-bg:#E5F5EE;

  --dev-hi:#FFFFFF; --dev-body:#E3E8F0; --dev-shade:#C7D0DE; --dev-tray:#EDF1F6;
  --dev-line:#B4BFD1; --dev-dark:#1B2A43; --dev-paper:#FFFFFF; --dev-shadow:rgba(3,24,63,.10);
  --accent:var(--blue);
  --accent-soft:color-mix(in srgb, var(--blue) 9%, var(--surface));
  --accent-ink:color-mix(in srgb, var(--blue) 80%, var(--ink));

  --r-sm:10px; --r:14px; --r-md:18px; --r-lg:22px; --r-xl:28px; --r-2xl:34px;
  --sh-1:0 1px 2px rgba(3,24,63,.06);
  --sh-2:0 2px 8px rgba(3,24,63,.07), 0 1px 2px rgba(3,24,63,.04);
  --sh-3:0 14px 36px -14px rgba(3,24,63,.22), 0 4px 12px -4px rgba(3,24,63,.08);
  --sh-4:0 36px 72px -28px rgba(3,24,63,.38);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1200px; --nav-h:62px;
}

@media (prefers-color-scheme: dark){
  :root{
    --blue:#4E9AEE; --blue-2:#7DB6F5; --blue-3:#8FC0FF;
    --gold:#F8BF4E; --gold-2:#FFD37A; --gold-soft:#2B2009;
    --ink:#E9EEF7; --ink-2:#A9B7CB; --ink-3:#8391A7; --ink-4:#66738A;
    --bg:#070C15; --surface:#101927; --surface-2:#1A2539; --surface-3:#0C1420;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05);
    --navy:#040E24; --navy-2:#0A2352; --navy-3:#12437F;
    --amber:#F2C075; --amber-bg:#2A1F09; --amber-line:#6A4C10;
    --green:#5FDCAC; --green-bg:#0A2A20;
    --dev-hi:#28344A; --dev-body:#1F2A3D; --dev-shade:#151E2D; --dev-tray:#2C384E;
    --dev-line:#3B4964; --dev-dark:#040910; --dev-paper:#C6D1E4; --dev-shadow:rgba(0,0,0,.55);
    --accent-soft:color-mix(in srgb, var(--blue) 15%, var(--surface));
    --accent-ink:color-mix(in srgb, var(--blue) 64%, var(--ink));
    --sh-2:0 2px 10px rgba(0,0,0,.45); --sh-3:0 18px 44px -18px rgba(0,0,0,.75);
    --sh-4:0 36px 72px -28px rgba(0,0,0,.85);
  }
}

/* ── 바탕 ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 70px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Pretendard Variable','Pretendard','Noto Sans KR',-apple-system,
              'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  font-size:16px; line-height:1.68; letter-spacing:-.012em;
  word-break:keep-all; overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0}
img{max-width:100%; display:block}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:3px; border-radius:6px}
.ic{flex:none}
.ic.flip{transform:scaleX(-1)}
.container{max-width:var(--wrap); margin:0 auto; padding:0 20px}
@media(min-width:900px){ .container{padding:0 32px} }
.num{font-variant-numeric:tabular-nums}

h1,h2,h3{margin:0; letter-spacing:-.035em; line-height:1.22; font-weight:800; text-wrap:balance}
.display{font-size:clamp(32px,6.6vw,60px); line-height:1.08; letter-spacing:-.045em; font-weight:900}
.h1{font-size:clamp(26px,4.6vw,42px); font-weight:900}
.h2{font-size:clamp(21px,3vw,30px); font-weight:900}
.h3{font-size:17px; font-weight:750; letter-spacing:-.025em}
.eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue)}
.eyebrow.gold{color:var(--amber)}
.eyebrow.on-dark{color:var(--gold)}
.lead{color:var(--ink-2); font-size:clamp(15px,1.6vw,18px); line-height:1.66; margin:12px 0 0}
.muted{color:var(--ink-3); font-size:14px}

/* ── 상단 바 (네이비 한 줄로 통합) ────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:70; background:var(--navy); color:var(--dark-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.07); transition:box-shadow .25s}
.nav.stuck{box-shadow:0 6px 24px -10px rgba(3,24,63,.55), 0 1px 0 rgba(255,255,255,.07)}
.nav-in{max-width:var(--wrap); margin:0 auto; padding:0 20px; height:var(--nav-h);
  display:flex; align-items:center; gap:14px}
@media(min-width:1000px){ .nav-in{padding:0 32px; gap:18px} }

.brandmark{display:flex; align-items:center; gap:12px; min-width:0; flex:none}
.brandmark .logo{height:32px; width:auto; border-radius:4px; display:block}
@media(min-width:1000px){ .brandmark .logo{height:36px} }
.brandmark .rule{width:1px; height:26px; background:rgba(255,255,255,.18); flex:none; display:none}
.brandmark .sub{display:none; font-size:11.5px; line-height:1.25; font-weight:600;
  color:var(--dark-ink-2); letter-spacing:-.01em; white-space:nowrap}
@media(min-width:1000px){ .brandmark .rule,.brandmark .sub{display:block} }

.nav-links{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  margin:0 -20px; padding:0 20px; flex:1; min-width:0}
.nav-links::-webkit-scrollbar{display:none}
@media(min-width:1000px){ .nav-links{margin:0 0 0 6px; padding:0; flex:none; overflow:visible} }
.nav-links a{flex:none; display:inline-flex; align-items:center; height:34px; padding:0 13px;
  border-radius:999px; font-size:14px; font-weight:650; color:var(--dark-ink-2);
  white-space:nowrap; transition:.16s var(--ease)}
.nav-links a:hover{background:rgba(255,255,255,.1); color:#fff}
.nav-links a.on{background:rgba(255,255,255,.14); color:#fff}
.nav-sp{flex:1; display:none}
@media(min-width:1000px){ .nav-sp{display:block} }

.navtel{display:none; align-items:center; gap:7px; font-size:13.5px; color:var(--dark-ink-2);
  font-weight:600; padding:6px 10px; border-radius:999px; transition:.15s}
.navtel b{font-weight:750; color:#fff; letter-spacing:-.01em}
.navtel:hover{background:rgba(255,255,255,.08)}
@media(min-width:900px){ .navtel{display:inline-flex} }

.navbtn{flex:none; display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px;
  border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07);
  color:var(--dark-ink); font-size:13.5px; font-weight:650; transition:.16s var(--ease)}
.navbtn:hover{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.32); color:#fff}
.navbtn .kbd{display:none; font-size:10.5px; font-weight:700; color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.22); border-radius:5px; padding:1px 5px}
@media(min-width:1000px){ .navbtn .kbd{display:inline-block} }
@media(max-width:999px){ .navbtn span:not(.kbd){display:none} .navbtn{padding:0 11px} }
.navbtn.kko{background:var(--kakao); color:var(--kakao-ink); border-color:transparent; font-weight:750}
.navbtn.kko:hover{background:#F5DC00; color:var(--kakao-ink)}

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:52px; padding:0 26px; border-radius:999px; font-size:16px; font-weight:750;
  background:var(--blue); color:#fff; box-shadow:0 10px 24px -10px color-mix(in srgb, var(--blue) 78%, transparent);
  transition:.18s var(--ease)}
.btn:hover{transform:translateY(-2px); background:var(--blue-2)}
.btn:active{transform:translateY(0)}
.btn.gold{background:var(--gold); color:var(--navy); box-shadow:0 10px 24px -10px rgba(248,185,62,.7)}
.btn.gold:hover{background:var(--gold-2)}
.btn.kko{background:var(--kakao); color:var(--kakao-ink); box-shadow:0 10px 24px -10px rgba(254,229,0,.8)}
.btn.kko:hover{background:#F2DA00}
.btn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--sh-1)}
.btn.ghost:hover{border-color:var(--ink-4); background:var(--surface)}
.btn.light{background:#fff; color:var(--navy); box-shadow:0 12px 28px -12px rgba(0,0,0,.55)}
.btn.on-dark{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.24); box-shadow:none}
.btn.on-dark:hover{background:rgba(255,255,255,.2)}
.btn.sm{height:44px; padding:0 18px; font-size:14.5px}
.btn.wide{width:100%}

/* ── 히어로 ───────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; background:var(--navy); color:var(--dark-ink)}
.hero::before{content:""; position:absolute; inset:0;
  background:radial-gradient(820px 520px at 74% -12%, rgba(18,63,128,.9), transparent 62%),
             radial-gradient(560px 440px at 4% 108%, rgba(248,185,62,.12), transparent 62%)}
.hero::after{content:""; position:absolute; inset:0; opacity:.42;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.15) 1px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 76%); mask-image:linear-gradient(to bottom,#000,transparent 76%)}
.hero-in{position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; padding:40px 20px 44px}
@media(min-width:960px){ .hero-in{padding:74px 32px 78px; display:grid; grid-template-columns:1.08fr .92fr;
  gap:48px; align-items:center} }
.hero h1{color:#fff; margin:14px 0 0}
.hero h1 em{font-style:normal; color:var(--gold)}
.hero .lead{color:var(--dark-ink-2); max-width:34ch}

.searchbar{display:flex; align-items:center; gap:10px; margin-top:26px; padding:7px 7px 7px 20px;
  background:#fff; border-radius:999px; box-shadow:0 22px 48px -20px rgba(0,0,0,.6); max-width:540px}
.searchbar .ic{color:#94A1B5}
.searchbar input{flex:1; min-width:0; border:0; outline:0; background:transparent; color:#0A1424;
  font-size:16px; font-weight:500; padding:12px 0; font-family:inherit}
.searchbar input::placeholder{color:#98A5B8}
.searchbar button{flex:none; height:46px; padding:0 22px; border-radius:999px; background:var(--blue);
  color:#fff; font-weight:750; font-size:15px; transition:.16s var(--ease)}
.searchbar button:hover{background:var(--blue-2)}
@media(max-width:520px){ .searchbar button{padding:0 16px} }

.quick{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.quick a{display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#EAF0F9;
  font-size:14px; font-weight:650; transition:.16s var(--ease)}
.quick a:hover{background:rgba(255,255,255,.2); transform:translateY(-1px)}
.quick .ic{width:17px; height:17px; opacity:.9}

/* 히어로 오른쪽 사진 구성 */
.hero-art{display:none; position:relative}
@media(min-width:960px){ .hero-art{display:block} }
.hero-shot{position:relative; border-radius:var(--r-2xl); overflow:hidden; background:#fff;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.14)}
.hero-shot img{width:100%; aspect-ratio:4/3; object-fit:contain; padding:26px; background:
  radial-gradient(120% 90% at 50% 10%, #FFFFFF, #EEF2F8)}
.hero-shot .tagchip{position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:7px;
  background:var(--navy); color:#fff; border-radius:999px; padding:6px 13px; font-size:12px; font-weight:750}
.hero-shot .tagchip i{width:6px; height:6px; border-radius:50%; background:var(--gold)}
.hero-float{position:absolute; display:flex; align-items:center; gap:11px; padding:12px 16px;
  background:rgba(9,22,46,.72); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md); box-shadow:var(--sh-4); color:#fff}
.hero-float b{font-size:19px; font-weight:850; letter-spacing:-.03em; display:block; line-height:1.1}
.hero-float span{font-size:11.5px; color:var(--dark-ink-2); font-weight:600}
.hero-float .ic{color:var(--gold)}
.hero-float.f1{left:-26px; bottom:56px}
.hero-float.f2{right:-18px; top:38px}

/* ── 실적 띠 ──────────────────────────────────────────────────────────── */
.trust{background:var(--navy-2); color:#fff; position:relative; z-index:1}
.trust-in{max-width:var(--wrap); margin:0 auto; padding:20px; display:grid;
  grid-template-columns:1fr 1fr; gap:16px 8px}
@media(min-width:760px){ .trust-in{grid-template-columns:repeat(4,1fr); padding:24px 32px} }
.trust .cell{text-align:center; position:relative}
@media(min-width:760px){
  .trust .cell + .cell::before{content:""; position:absolute; left:0; top:14%; height:72%;
    width:1px; background:rgba(255,255,255,.16)}
}
.trust b{display:block; font-size:clamp(24px,3.2vw,32px); font-weight:900; letter-spacing:-.04em; line-height:1.1}
.trust b em{font-style:normal; font-size:.55em; font-weight:750; color:var(--gold); margin-left:2px}
.trust span{font-size:12.5px; color:var(--dark-ink-2); font-weight:600}

/* ── 구획 ─────────────────────────────────────────────────────────────── */
.section{padding:56px 0}
@media(min-width:900px){ .section{padding:88px 0} }
.section.tight{padding:36px 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px}
.sec-head .lead{max-width:54ch}
.sec-head .more{display:none; align-items:center; gap:6px; font-size:14.5px; font-weight:750;
  color:var(--blue); white-space:nowrap; transition:gap .2s}
@media(min-width:768px){ .sec-head .more{display:inline-flex} }
.sec-head .more:hover{gap:10px}

/* ── 작업 타일 ────────────────────────────────────────────────────────── */
.tiles{display:grid; gap:12px; grid-template-columns:1fr 1fr}
@media(min-width:760px){ .tiles{grid-template-columns:repeat(4,1fr); gap:16px} }
.tile{position:relative; display:flex; flex-direction:column; gap:12px; padding:22px 18px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); overflow:hidden; transition:.2s var(--ease)}
.tile::after{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.tile:hover{transform:translateY(-4px); box-shadow:var(--sh-3)}
.tile:hover::after{transform:scaleX(1)}
.tile .box{width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--blue)}
.tile b{font-size:16px; font-weight:750; letter-spacing:-.025em}
.tile p{margin:0; font-size:13.5px; color:var(--ink-3); line-height:1.55}
.tile .foot{margin-top:auto; padding-top:12px; font-size:12.5px; font-weight:650; color:var(--ink-4);
  display:flex; align-items:center; gap:6px}

/* ── 브랜드 탭 ────────────────────────────────────────────────────────── */
.tabs{display:flex; gap:8px; overflow-x:auto; padding:4px 20px 16px; margin:0 -20px;
  scrollbar-width:none; -ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
@media(min-width:900px){ .tabs{margin:0 0 10px; padding:0 0 16px; flex-wrap:wrap; overflow:visible} }
.tab{flex:none; display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 17px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-size:14.5px; font-weight:650;
  color:var(--ink-2); box-shadow:var(--sh-1); transition:.16s var(--ease); white-space:nowrap}
.tab:hover{border-color:var(--ink-4); color:var(--ink)}
.tab[aria-selected="true"]{background:var(--navy); color:#fff; border-color:transparent; box-shadow:var(--sh-2)}
.tab .dot{width:8px; height:8px; border-radius:50%; background:var(--bdot,var(--ink-4))}
.tab .n{font-size:12px; font-weight:750; color:var(--ink-4)}
.tab[aria-selected="true"] .n{color:rgba(255,255,255,.6)}

/* ── 기종 카드 ────────────────────────────────────────────────────────── */
.models{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:560px){ .models{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .models{grid-template-columns:repeat(3,1fr); gap:18px} }
.mcard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); transition:.22s var(--ease)}
.mcard:hover{transform:translateY(-5px); box-shadow:var(--sh-3); border-color:var(--line-2)}
.mcard .art{position:relative; aspect-ratio:16/11; display:grid; place-items:center; padding:18px;
  background:linear-gradient(168deg,var(--surface-3),var(--surface-2));
  border-bottom:1px solid var(--line-2); overflow:hidden}
.mcard .art .dev{height:100%; width:auto; max-width:78%; transition:transform .35s var(--ease)}
.mcard .art img.photo{width:100%; height:100%; object-fit:contain; transition:transform .35s var(--ease)}
.mcard:hover .art .dev,.mcard:hover .art img.photo{transform:translateY(-4px) scale(1.04)}
.mcard .art .bdot{position:absolute; top:13px; left:14px; display:inline-flex; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px 11px 4px 8px;
  font-size:11.5px; font-weight:750; color:var(--ink-2); box-shadow:var(--sh-1)}
.mcard .art .bdot i{width:7px; height:7px; border-radius:50%}
.mcard .art .real{position:absolute; right:13px; top:13px; background:var(--navy); color:#fff;
  border-radius:999px; padding:4px 10px; font-size:10.5px; font-weight:750; letter-spacing:.02em}
.mcard .info{padding:16px 18px 18px; display:flex; flex-direction:column; gap:3px; flex:1}
.mcard .info b{font-size:17px; font-weight:800; letter-spacing:-.03em; line-height:1.3}
.mcard .info .sub{font-size:12.5px; color:var(--ink-3); line-height:1.5}
.mcard .info .meta{margin-top:auto; padding-top:13px; display:flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--ink-3); font-weight:650}
.mcard .go{margin-left:auto; color:var(--blue); display:inline-flex; transition:.2s var(--ease)}
.mcard:hover .go{transform:translateX(4px)}

/* ── 배지 ─────────────────────────────────────────────────────────────── */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:750;
  border-radius:999px; padding:3px 9px; white-space:nowrap}
.badge .ic{width:13px; height:13px}
.b-vid{background:var(--green-bg); color:var(--green)}
.b-soon{background:var(--surface-2); color:var(--ink-3)}
.b-gold{background:var(--gold-soft); color:var(--amber)}

/* ── 이용 흐름 ────────────────────────────────────────────────────────── */
.flow{display:grid; gap:14px; grid-template-columns:1fr; counter-reset:f}
@media(min-width:800px){ .flow{grid-template-columns:repeat(3,1fr); gap:20px} }
.flow .step{position:relative; counter-increment:f; padding:28px 24px; border-radius:var(--r-xl);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-2)}
.flow .step::before{content:"0" counter(f); display:block; font-size:13px; font-weight:900;
  letter-spacing:.12em; color:var(--gold-2); margin-bottom:12px}
.flow .step > b{display:block; font-size:17.5px; font-weight:800; letter-spacing:-.03em; margin-bottom:7px}
.flow .step p b{font-weight:800; color:var(--ink)}
.flow .step p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.62}

/* ── 취급 품목 (홍보) ─────────────────────────────────────────────────── */
.promo{display:grid; gap:14px; grid-template-columns:1fr 1fr}
@media(min-width:760px){ .promo{grid-template-columns:repeat(3,1fr); gap:18px} }
.pcard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); transition:.22s var(--ease)}
.pcard:hover{transform:translateY(-5px); box-shadow:var(--sh-3)}
.pcard .shot{aspect-ratio:4/3; background:linear-gradient(168deg,#FFFFFF,var(--surface-2));
  display:grid; place-items:center; padding:14px; border-bottom:1px solid var(--line-2)}
.pcard .shot img{width:100%; height:100%; object-fit:contain; transition:transform .4s var(--ease)}
.pcard:hover .shot img{transform:scale(1.06)}
.pcard .tx{padding:15px 17px 17px; display:flex; flex-direction:column; gap:4px; flex:1}
.pcard .tx b{font-size:16px; font-weight:800; letter-spacing:-.03em; display:flex; align-items:center; gap:7px}
.pcard .tx b .ic{color:var(--ink-4); width:15px; height:15px; margin-left:auto}
.pcard .tx p{margin:0; font-size:13px; color:var(--ink-3); line-height:1.5}
@media (prefers-color-scheme: dark){ .pcard .shot{background:linear-gradient(168deg,#F4F6FA,#DDE3EC)} }

/* ── 카카오 채널 ──────────────────────────────────────────────────────── */
.kko-card{display:grid; gap:22px; align-items:center; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-2xl); padding:26px; box-shadow:var(--sh-2);
  position:relative; overflow:hidden}
@media(min-width:820px){ .kko-card{grid-template-columns:1.35fr .65fr; padding:38px 40px; gap:40px} }
.kko-card::before{content:""; position:absolute; right:-70px; top:-70px; width:240px; height:240px;
  border-radius:50%; background:var(--kakao); opacity:.16}
.kko-card > *{position:relative; z-index:1}
.kko-badge{display:inline-flex; align-items:center; gap:8px; background:var(--kakao); color:var(--kakao-ink);
  border-radius:999px; padding:7px 15px; font-size:13px; font-weight:800}
.kko-card h3{font-size:clamp(20px,2.6vw,27px); margin:14px 0 8px}
.kko-card p{margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.65}
.kko-card .why{display:flex; flex-direction:column; gap:9px; margin-top:18px}
.kko-card .why div{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-2)}
.kko-card .why .ic{color:var(--green); margin-top:3px; width:17px; height:17px}
.kko-side{display:flex; flex-direction:column; gap:10px}
.kko-side .hint{font-size:12.5px; color:var(--ink-4); text-align:center; font-weight:600}

/* ── 어두운 안내 띠 ───────────────────────────────────────────────────── */
.band{position:relative; overflow:hidden; background:var(--navy); color:#fff; border-radius:var(--r-2xl);
  padding:42px 26px; text-align:center}
.band::before{content:""; position:absolute; inset:0;
  background:radial-gradient(640px 340px at 50% 0%, rgba(18,63,128,.85), transparent 66%),
             radial-gradient(420px 240px at 50% 100%, rgba(248,185,62,.14), transparent 70%)}
.band > *{position:relative; z-index:1}
.band h3{font-size:clamp(21px,3vw,30px); color:#fff; margin-bottom:10px}
.band p{margin:0 auto 24px; color:var(--dark-ink-2); max-width:46ch; font-size:15.5px}
.band .row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
@media(min-width:800px){ .band{padding:58px 40px} }

/* ── 페이지 머리 ──────────────────────────────────────────────────────── */
.crumbs{display:flex; align-items:center; flex-wrap:wrap; gap:7px; font-size:13.5px; color:var(--ink-3); font-weight:650}
.crumbs a:hover{color:var(--blue)}
.crumbs .sep{color:var(--ink-4); opacity:.55}
.crumbs .cur{color:var(--ink)}
.phead{padding:26px 0 8px}
.phead-grid{display:grid; gap:24px; align-items:center}
@media(min-width:880px){ .phead-grid{grid-template-columns:1.2fr .8fr; gap:44px} }
.phead .art{display:none}
@media(min-width:880px){
  .phead .art{display:grid; place-items:center; background:linear-gradient(168deg,var(--surface-3),var(--surface-2));
    border:1px solid var(--line); border-radius:var(--r-2xl); padding:24px; min-height:250px; box-shadow:var(--sh-2)}
  .phead .art .dev{max-height:220px; width:auto}
  .phead .art img.photo{width:100%; max-height:230px; object-fit:contain}
}
.statrow{display:flex; flex-wrap:wrap; gap:9px; margin-top:20px}
.stat{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-size:13.5px; font-weight:650;
  color:var(--ink-2); box-shadow:var(--sh-1)}
.stat .ic{width:16px; height:16px; color:var(--ink-4)}

/* ── 목차 칩 ──────────────────────────────────────────────────────────── */
.jump{position:sticky; top:var(--nav-h); z-index:40; margin:0 -20px; padding:12px 20px;
  background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); display:flex; gap:8px; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none}
.jump::-webkit-scrollbar{display:none}
@media(min-width:900px){ .jump{margin:0; padding:12px 0} }
.jump a{flex:none; display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 15px;
  border-radius:999px; background:var(--surface); border:1px solid var(--line);
  font-size:13.5px; font-weight:650; color:var(--ink-2); white-space:nowrap; transition:.16s var(--ease)}
.jump a:hover,.jump a.on{background:var(--navy); color:#fff; border-color:transparent}
.jump .ic{width:16px; height:16px}

/* ── 작업 카드 ────────────────────────────────────────────────────────── */
.cards{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:600px){ .cards{grid-template-columns:1fr 1fr} }
@media(min-width:1040px){ .cards{grid-template-columns:repeat(3,1fr); gap:18px} }
.tcard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); transition:.22s var(--ease)}
.tcard:hover{transform:translateY(-5px); box-shadow:var(--sh-3)}
.tcard .thumb{position:relative; aspect-ratio:16/9; background:var(--surface-2); overflow:hidden}
.tcard .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease)}
.tcard:hover .thumb img{transform:scale(1.05)}
.tcard .thumb .ph{position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-4);
  background:linear-gradient(160deg,var(--surface-3),var(--surface-2)),
    repeating-linear-gradient(-45deg,transparent 0 9px,rgba(120,132,155,.06) 9px 18px)}
.tcard .thumb .ph .ic{width:38px; height:38px; opacity:.5}
.tcard .thumb .pin{position:absolute; right:11px; bottom:11px; display:inline-flex; align-items:center; gap:6px;
  background:rgba(6,12,26,.8); backdrop-filter:blur(8px); color:#fff; border-radius:999px;
  padding:5px 11px; font-size:11.5px; font-weight:700}
.tcard .thumb .pin .ic{width:13px; height:13px}
.tcard .thumb .playdot{position:absolute; inset:0; display:grid; place-items:center}
.tcard .thumb .playdot i{width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.95);
  display:grid; place-items:center; color:var(--navy); box-shadow:0 8px 24px rgba(0,0,0,.34); transition:.25s var(--ease)}
.tcard:hover .thumb .playdot i{transform:scale(1.1); background:#fff}
.tcard .body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:5px; flex:1}
.tcard .body .row1{display:flex; align-items:center; gap:9px}
.tcard .body .row1 .ic{color:var(--blue); width:19px; height:19px}
.tcard .body b{font-size:16px; font-weight:800; letter-spacing:-.03em}
.tcard .body p{margin:0; font-size:13.5px; color:var(--ink-3); line-height:1.55}
.tcard .body .meta{margin-top:auto; padding-top:12px; display:flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--ink-4); font-weight:650}
.tcard.soon .thumb .ph .ic{opacity:.35}

/* ── 작업 화면 ────────────────────────────────────────────────────────── */
.work{display:grid; gap:26px; align-items:start}
@media(min-width:1000px){ .work{grid-template-columns:minmax(0,1.62fr) minmax(300px,.98fr); gap:36px} }
.player{position:relative; aspect-ratio:16/9; background:#04070D; border-radius:var(--r-2xl); overflow:hidden;
  box-shadow:var(--sh-3); border:1px solid var(--line)}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.player img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.player .veil{position:absolute; inset:0;
  background:linear-gradient(to top,rgba(4,7,13,.62),rgba(4,7,13,.12) 46%,rgba(4,7,13,.34))}
.player .go{position:absolute; inset:0; width:100%; display:grid; place-items:center}
.player .go i{width:78px; height:78px; border-radius:50%; background:#fff; color:var(--navy);
  display:grid; place-items:center; box-shadow:0 16px 44px rgba(0,0,0,.55); transition:.24s var(--ease)}
.player .go:hover i{transform:scale(1.08)}
.player .cap{position:absolute; left:18px; bottom:16px; color:#fff; font-weight:750; font-size:14.5px;
  text-shadow:0 2px 12px rgba(0,0,0,.7); display:flex; align-items:center; gap:8px}
.noplayer{aspect-ratio:16/9; border-radius:var(--r-2xl); border:1.5px dashed var(--line);
  background:linear-gradient(160deg,var(--surface-3),var(--surface-2)); display:grid; place-content:center;
  text-align:center; gap:8px; padding:24px; color:var(--ink-3)}
.noplayer b{color:var(--ink-2); font-size:16.5px; font-weight:800}
.noplayer .ic{width:34px; height:34px; margin:0 auto; opacity:.45}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-2)}
.panel-h{display:flex; align-items:center; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--line-2)}
.panel-h b{font-size:16.5px; font-weight:800; letter-spacing:-.03em}
.panel-h .rst{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--ink-4); padding:6px 11px;
  border-radius:999px; border:1px solid var(--line); transition:.15s}
.panel-h .rst:hover{color:var(--ink); border-color:var(--ink-4)}
.progress{height:5px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin:0 20px}
.progress i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-2));
  border-radius:999px; transition:width .4s var(--ease)}
.pmeta{padding:9px 20px 4px; font-size:12.5px; font-weight:650; color:var(--ink-4)}
.steps{list-style:none; margin:0; padding:6px 12px 12px}
.steps li{display:flex; gap:14px; align-items:flex-start; padding:13px 8px; border-radius:var(--r);
  cursor:pointer; transition:background .15s; -webkit-tap-highlight-color:transparent}
.steps li:hover{background:var(--surface-3)}
.steps li + li{box-shadow:inset 0 1px 0 var(--line-2)}
.steps .mark{flex:none; width:30px; height:30px; border-radius:50%; border:2px solid var(--line);
  display:grid; place-items:center; font-size:13.5px; font-weight:800; color:var(--ink-3);
  background:var(--surface); transition:.22s var(--ease)}
.steps .mark .ic{width:16px; height:16px; display:none}
.steps .tx{font-size:15.5px; line-height:1.62; color:var(--ink); padding-top:3px}
.steps li.done .mark{background:var(--blue); border-color:var(--blue); color:#fff}
.steps li.done .mark span{display:none}
.steps li.done .mark .ic{display:block}
.steps li.done .tx{color:var(--ink-4); text-decoration:line-through; text-decoration-thickness:1.5px}

.callout{border-radius:var(--r-xl); padding:18px 20px; border:1px solid}
.callout > b{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; margin-bottom:9px}
.callout li b,.callout p b{display:inline; font-size:inherit; font-weight:800; margin:0}   /* 문장 속 굵은 글씨는 줄을 끊지 않는다(2026-10-09) */
.callout ul{margin:0; padding-left:20px}
.callout li{margin:6px 0; font-size:14.5px; line-height:1.6}
.callout p{margin:0; font-size:14.5px; line-height:1.62}
.callout.warn{background:var(--amber-bg); border-color:var(--amber-line); color:var(--amber)}
.callout.info{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink)}

.aside{display:flex; flex-direction:column; gap:14px}
@media(min-width:1000px){ .aside{position:sticky; top:calc(var(--nav-h) + 20px)} }
.aside .box{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:18px 20px; box-shadow:var(--sh-2)}
.aside .box b{display:block; font-size:14px; font-weight:800; margin-bottom:12px}
.aside .links{display:flex; flex-direction:column; gap:2px; margin:-6px -8px}
.aside .links a{display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--r-sm);
  font-size:14.5px; font-weight:650; color:var(--ink-2); transition:.15s}
.aside .links a:hover{background:var(--surface-3); color:var(--ink)}
.aside .links .ic{width:18px; height:18px; color:var(--ink-4)}
.aside .links a:hover .ic{color:var(--blue)}
.aside .links .arw{margin-left:auto; color:var(--ink-4)}

.pagenav{display:grid; gap:12px; grid-template-columns:1fr; margin-top:32px}
@media(min-width:700px){ .pagenav{grid-template-columns:1fr 1fr} }
.pagenav a{display:flex; align-items:center; gap:13px; padding:17px 19px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-1); transition:.18s var(--ease)}
.pagenav a:hover{border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--sh-2)}
.pagenav .lbl{font-size:12px; font-weight:750; color:var(--ink-4); letter-spacing:.03em}
.pagenav b{display:block; font-size:15.5px; font-weight:750; letter-spacing:-.025em; margin-top:2px}
.pagenav .next{justify-content:flex-end; text-align:right}
.pagenav .ic{color:var(--ink-4); flex:none}

/* ── 검색 창 ──────────────────────────────────────────────────────────── */
.overlay{position:fixed; inset:0; z-index:100; display:none; padding:11vh 16px 20px;
  background:color-mix(in srgb, var(--navy) 62%, transparent); backdrop-filter:blur(6px)}
.overlay.open{display:block; animation:fade .18s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{max-width:640px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-2xl); box-shadow:var(--sh-4); overflow:hidden; animation:rise .24s var(--ease)}
@keyframes rise{from{opacity:0; transform:translateY(14px) scale(.985)}to{opacity:1; transform:none}}
.sheet .top{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line)}
.sheet .top .ic{color:var(--ink-4)}
.sheet .top input{flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:17px;
  font-weight:650; color:var(--ink); font-family:inherit; padding:4px 0}
.sheet .top input::placeholder{color:var(--ink-4); font-weight:500}
.sheet .top .esc{font-size:11px; font-weight:750; color:var(--ink-4); border:1px solid var(--line);
  border-radius:6px; padding:3px 7px}
.sheet .res{max-height:min(56vh,460px); overflow-y:auto; padding:8px}
.sheet .grp{font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-4); padding:12px 12px 6px}
.sheet .hit{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r); transition:.12s}
.sheet .hit:hover,.sheet .hit.sel{background:var(--accent-soft)}
.sheet .hit .thumb{width:46px; height:34px; border-radius:8px; background:var(--surface-2); display:grid;
  place-items:center; flex:none; overflow:hidden; color:var(--ink-4)}
.sheet .hit .thumb .dev{height:27px; width:auto}
.sheet .hit .thumb img{width:100%; height:100%; object-fit:contain; padding:3px}
.sheet .hit .tx{min-width:0}
.sheet .hit .tx b{display:block; font-size:14.5px; font-weight:750; letter-spacing:-.025em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sheet .hit .tx span{font-size:12.5px; color:var(--ink-3)}
.sheet .hit .arw{margin-left:auto; color:var(--ink-4)}
.sheet .none{padding:34px 20px; text-align:center; color:var(--ink-3); font-size:14.5px}
.sheet .none b{display:block; color:var(--ink); font-size:16px; margin-bottom:5px}

.empty{text-align:center; padding:70px 20px}
.empty .ic{width:44px; height:44px; color:var(--ink-4); margin:0 auto 16px; opacity:.6}
.empty b{display:block; font-size:21px; font-weight:800; letter-spacing:-.03em; margin-bottom:7px}
.empty p{color:var(--ink-3); margin:0 0 22px}

/* ── 바닥 ─────────────────────────────────────────────────────────────── */
.footer{background:var(--navy); color:var(--dark-ink-2); margin-top:24px;
  padding:44px 0 calc(38px + env(safe-area-inset-bottom))}
.footer-grid{display:grid; gap:28px}
@media(min-width:820px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr; gap:44px} }
.footer .fbrand{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.footer .fbrand b{display:block; color:#fff; font-size:16px; font-weight:850; letter-spacing:-.03em}
.footer .fbrand span{font-size:12.5px}
.footer .fdesc{font-size:13.5px; line-height:1.7; margin:0 0 16px; max-width:38ch}
.footer .fcol h4{margin:0 0 12px; font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold)}
.footer .fcol a,.footer .fcol div{display:flex; align-items:center; gap:8px; font-size:13.5px;
  padding:5px 0; transition:.15s}
.footer .fcol a:hover{color:#fff}
.footer .fcol .ic{width:15px; height:15px; opacity:.75}
.footer .fbot{margin-top:32px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
  font-size:12px; display:flex; flex-wrap:wrap; gap:6px 16px; color:rgba(255,255,255,.5)}

/* ── 하단 고정 막대 (좁은 화면) ───────────────────────────────────────── */
.callbar{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:80;
  display:flex; align-items:center; gap:8px; padding:9px 9px 9px 16px;
  background:color-mix(in srgb, var(--surface) 93%, transparent); backdrop-filter:blur(18px);
  border:1px solid var(--line); border-radius:999px; box-shadow:var(--sh-3);
  transform:translateY(150%); transition:transform .34s var(--ease)}
.callbar.show{transform:none}
.callbar .t{flex:1; min-width:0; font-size:12px; color:var(--ink-3); line-height:1.3; font-weight:650}
.callbar .t b{display:block; color:var(--ink); font-size:14px; font-weight:800}
.callbar a{flex:none; display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 16px;
  border-radius:999px; font-weight:750; font-size:14px}
.callbar a.tel{background:var(--blue); color:#fff}
.callbar a.kko{background:var(--kakao); color:var(--kakao-ink)}
@media(min-width:1000px){ .callbar{display:none} }
body.has-callbar{padding-bottom:86px}
@media(min-width:1000px){ body.has-callbar{padding-bottom:0} }

/* ── 등장 효과 ────────────────────────────────────────────────────────── */
[data-rv]{opacity:0; transform:translateY(18px)}
[data-rv].in{opacity:1; transform:none; transition:opacity .62s var(--ease), transform .62s var(--ease)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  [data-rv]{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ── 인쇄 ─────────────────────────────────────────────────────────────── */
@media print{
  .nav,.topbar,.callbar,.overlay,.band,.pagenav,.aside,.player,.noplayer,.footer,.jump,.quick,.kko-card{display:none !important}
  body{background:#fff; color:#000; font-size:12pt}
  .panel,.callout{border:1px solid #ccc; box-shadow:none; break-inside:avoid}
  .work{display:block}
  .steps li{break-inside:avoid; cursor:default}
}

/* ── 두 갈래 입구 (고객이 오는 이유는 결국 두 가지다) ─────────────────── */
.doors{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:760px){ .doors{grid-template-columns:1fr 1fr; gap:20px} }
.door{position:relative; display:flex; flex-direction:column; gap:10px; padding:28px 26px 24px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2xl);
  box-shadow:var(--sh-2); overflow:hidden; transition:.22s var(--ease)}
.door::before{content:""; position:absolute; right:-60px; top:-60px; width:200px; height:200px;
  border-radius:50%; opacity:.1; transition:.35s var(--ease)}
.door.d1::before{background:var(--gold)}
.door.d2::before{background:var(--blue)}
.door:hover{transform:translateY(-5px); box-shadow:var(--sh-3)}
.door:hover::before{transform:scale(1.35); opacity:.16}
.door > *{position:relative; z-index:1}
.dbox{width:62px; height:62px; border-radius:19px; display:grid; place-items:center; margin-bottom:4px}
.door.d1 .dbox{background:var(--gold-soft); color:var(--gold-2)}
.door.d2 .dbox{background:var(--accent-soft); color:var(--blue)}
.door b{font-size:clamp(19px,2.2vw,23px); font-weight:850; letter-spacing:-.035em}
.door p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.6; max-width:34ch}
.dgo{display:inline-flex; align-items:center; gap:7px; margin-top:8px; font-size:14.5px; font-weight:750;
  color:var(--blue); transition:gap .2s var(--ease)}
.door.d1 .dgo{color:var(--gold-2)}
.door:hover .dgo{gap:12px}

.chipbar{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.chip2{display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-size:14px; font-weight:650;
  color:var(--ink-2); box-shadow:var(--sh-1); transition:.16s var(--ease)}
.chip2:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-1px)}
.chip2 .ic{color:var(--ink-4)}
.chip2:hover .ic{color:var(--blue)}

/* ── 렌탈 패키지 ──────────────────────────────────────────────────────── */
.promo.packs{grid-template-columns:1fr}
@media(min-width:760px){ .promo.packs{grid-template-columns:repeat(3,1fr)} }
.pcard.pack .shot{position:relative; aspect-ratio:16/10}
.pkbadge{position:absolute; left:12px; top:12px; background:var(--gold); color:var(--navy);
  border-radius:999px; padding:4px 11px; font-size:11px; font-weight:800; letter-spacing:-.01em}
.pcard.pack .tx p{font-size:13.5px; line-height:1.58; color:var(--ink-2)}
@media(min-width:760px){ .promo{grid-template-columns:repeat(3,1fr)} }


/* 카운터 안내 안의 작은 순서 */
.ministeps{list-style:none; counter-reset:ms; margin:0; padding:0}
.ministeps li{counter-increment:ms; position:relative; padding:7px 0 7px 30px; font-size:14.5px;
  line-height:1.55; color:var(--ink-2)}
.ministeps li + li{box-shadow:inset 0 1px 0 var(--line-2)}
.ministeps li::before{content:counter(ms); position:absolute; left:0; top:8px; width:21px; height:21px;
  border-radius:50%; background:var(--accent-soft); color:var(--blue); display:grid; place-items:center;
  font-size:11.5px; font-weight:800}

/* ── 이용 안내 ────────────────────────────────────────────────────────── */
.notices{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:900px){ .notices{grid-template-columns:1fr 1fr; gap:18px} }
.notice{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:22px 24px; box-shadow:var(--sh-2)}
.nhead{display:flex; gap:14px; align-items:flex-start; margin-bottom:14px}
.nbox{width:46px; height:46px; border-radius:14px; flex:none; display:grid; place-items:center;
  background:var(--gold-soft); color:var(--gold-2)}
.ntag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--blue);
  background:var(--accent-soft); border-radius:999px; padding:2px 9px; margin-bottom:6px}
.nhead b{display:block; font-size:18px; font-weight:800; letter-spacing:-.032em; line-height:1.32}
.nlead{display:block; font-size:14px; color:var(--ink-3); margin-top:4px; font-weight:600}
.nbody{margin:0; padding-left:19px; display:flex; flex-direction:column; gap:8px}
.nbody li{font-size:14.5px; line-height:1.66; color:var(--ink-2)}
.ntip{display:flex; gap:8px; align-items:flex-start; margin:14px 0 0; padding:12px 14px;
  background:var(--accent-soft); border-radius:var(--r); font-size:13.5px; font-weight:600;
  color:var(--accent-ink); line-height:1.55}
.ntip .ic{flex:none; margin-top:2px}

/* ── 출력할 장 고르기 (목록형 — 미리보기가 화면을 잡아먹지 않게) ────── */
.inklist{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-2); overflow:hidden}
.inkrow{display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:14px 18px; transition:background .15s; -webkit-tap-highlight-color:transparent}
.inkrow + .inkrow{box-shadow:inset 0 1px 0 var(--line-2)}
.inkrow:hover{background:var(--surface-3)}
.swatch{flex:none; width:26px; height:34px; border-radius:5px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink-3)}
.swatch.chart{background:linear-gradient(160deg,#fff,var(--surface-2))}
.itx{min-width:0; flex:1}
.itx b{display:block; font-size:15px; font-weight:750; letter-spacing:-.025em}
.itx span{display:block; font-size:12.5px; color:var(--ink-3); line-height:1.45; margin-top:2px}
.ibtn{flex:none; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px;
  border-radius:999px; border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--ink-2)}
.inkrow:hover .ibtn{border-color:var(--blue); color:var(--blue)}
@media(max-width:520px){ .ibtn span{display:none} .ibtn{padding:0 10px} }

/* 종합 차트 미리 보기 — 접어 둔다 */
.peek{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-2); overflow:hidden}
.peek summary{display:flex; align-items:center; gap:9px; padding:15px 18px; cursor:pointer;
  font-size:14.5px; font-weight:700; color:var(--ink-2); list-style:none}
.peek summary::-webkit-details-marker{display:none}
.peek summary::after{content:"▾"; margin-left:auto; color:var(--ink-4); transition:transform .2s}
.peek[open] summary::after{transform:rotate(180deg)}
.peek summary:hover{color:var(--ink)}
.peekbox{padding:0 18px 18px}
.peekbox svg{display:block; width:100%; max-width:420px; margin:0 auto;
  border:1px solid var(--line); border-radius:8px; background:#fff}

/* ── 차트만 인쇄 ──────────────────────────────────────────────────────── */
/* 4색 패턴은 화면 CSS 를 타지 않는 별도 문서로 인쇄합니다(assets/app.js 의 printChart).
   화면을 @media print 로 걷어내던 방식은 브라우저마다 결과가 달라 빈 종이가 나왔습니다. */
@page{ size:A4; margin:12mm }

/* ============================================================================
   2026-10-06 개편 — 폰 하단 탭 · 홈 길이 축소 · 기종 화면 2단 · 브랜드 타일 · 새 영상 선반
   ========================================================================== */
/* 상단 바: 폰·태블릿에서는 가로 스크롤 메뉴를 숨기고(하단 탭으로 대체) 로고·검색·상담만 */
@media(max-width:999px){ .nav-links{display:none} .nav-in{gap:10px} }

/* 하단 탭 */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:85; display:grid; grid-template-columns:repeat(5,1fr); gap:2px;
  background:color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-top:1px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -8px 24px -16px rgba(3,24,63,.25)}
.tabbar a,.tabbar button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:54px;
  border-radius:14px; font-size:11px; font-weight:750; color:var(--ink-3); letter-spacing:-.01em; transition:.16s var(--ease);
  -webkit-tap-highlight-color:transparent; padding:0}
.tabbar .ic{width:22px; height:22px}
.tabbar .on{color:var(--blue); background:var(--accent-soft)}
.tabbar .help{color:var(--ink-2)}
.tabbar .help .ic{background:var(--kakao); color:var(--kakao-ink); border-radius:50%; padding:4px; width:26px; height:26px}
@media(min-width:1000px){ .tabbar{display:none} }
body.has-tabbar{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
@media(min-width:1000px){ body.has-tabbar{padding-bottom:0} }

/* 아래에서 올라오는 메뉴판 */
.bsheet-wrap{position:fixed; inset:0; z-index:95; background:rgba(3,24,63,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; animation:fade .18s var(--ease)}
.bsheet-wrap[hidden]{display:none}
.bsheet{width:100%; max-width:560px; margin:0 auto; background:var(--surface); border-radius:24px 24px 0 0;
  padding:10px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow:var(--sh-4); animation:rise .24s var(--ease); max-height:82vh; overflow-y:auto}
.bsheet .grab{width:40px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 12px}
.bsheet h3{font-size:17px; margin:6px 6px 10px}
.bsheet .row{display:flex; align-items:center; gap:13px; padding:12px 10px; border-radius:14px; transition:.14s}
.bsheet .row:hover{background:var(--surface-3)}
.bsheet .row .box{width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:var(--accent-soft); color:var(--blue); flex:none}
.bsheet .row b{display:block; font-size:15px; font-weight:750; letter-spacing:-.02em}
.bsheet .row > span:not(.box):not(.arw) span{display:block; font-size:12.5px; color:var(--ink-3); margin-top:1px}
.bsheet .row .arw{margin-left:auto; color:var(--ink-4)}
.bsheet .help-h{padding:4px 6px 14px}
.bsheet .help-h b{font-size:19px; font-weight:850; letter-spacing:-.03em; display:block}
.bsheet .help-h span{font-size:13px; color:var(--ink-3)}
.bsheet .btn + .btn{margin-top:8px}

/* 홈: 폰에서 섹션 간격·히어로를 조인다 */
@media(max-width:899px){
  .section{padding:44px 0}
  .hero-in{padding:34px 20px 36px}
  .hero .lead{font-size:15px; margin-top:10px}
  .searchbar{margin-top:20px}
  .quick{margin-top:14px}
  .quick a{padding:8px 13px; font-size:13.5px}
  .sec-head{margin-bottom:20px}
}

/* 기종 카드: 폰에서는 2열·작게 → 24종이 한눈에 */
@media(max-width:559px){
  .models{grid-template-columns:1fr 1fr; gap:10px}
  .mcard{border-radius:var(--r-lg)}
  .mcard .art{aspect-ratio:5/4; padding:10px}
  .mcard .art .bdot{top:8px; left:8px; padding:3px 8px 3px 6px; font-size:10.5px}
  .mcard .art .real{display:none}
  .mcard .info{padding:11px 12px 12px; gap:2px}
  .mcard .info b{font-size:14.5px}
  .mcard .info .sub{display:none}
  .mcard .info .meta{padding-top:8px; font-size:11.5px; gap:6px}
  .mcard .info .meta > span:not(.badge):not(.go){display:none}
}
.showall{display:none; margin-top:14px}
@media(max-width:759px){
  .models.collapsed .mcard:nth-child(n+9){display:none}
  .models.collapsed + .showall{display:inline-flex}
}

/* 가로로 넘기는 선반(폰) — 취급 품목·패키지·새 영상 */
@media(max-width:759px){
  .rail{display:flex !important; grid-template-columns:none; overflow-x:auto; gap:12px; margin:0 -20px; padding:4px 20px 14px;
    scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none}
  .rail::-webkit-scrollbar{display:none}
  .rail > *{flex:0 0 68%; scroll-snap-align:start}
  .rail.packs > *{flex-basis:80%}
  .cards.rail > *{flex-basis:78%}
}

/* 이용 방법: 폰에서 번호 왼쪽, 글 오른쪽 한 줄 */
@media(max-width:799px){
  .flow{gap:8px}
  .flow .step{display:grid; grid-template-columns:34px 1fr; gap:0 12px; padding:16px 18px; align-items:start; border-radius:var(--r-lg)}
  .flow .step::before{grid-row:1/3; width:34px; height:34px; border-radius:50%; background:var(--gold-soft); display:grid; place-items:center; margin:0; font-size:12px; letter-spacing:0}
  .flow .step > b{font-size:15.5px; margin-bottom:3px}
  .flow .step p{font-size:13.5px}
}

/* 기종 화면: 폰은 작은 사진 머리띠, 데스크톱은 2단(왼쪽 고정 요약 + 오른쪽 내용) */
.mpage{display:grid; gap:18px; margin-top:14px}
.msum{display:grid; grid-template-columns:96px 1fr; gap:14px 16px; align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:16px; box-shadow:var(--sh-2)}
.msum-art{display:grid; place-items:center; aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; padding:8px;
  background:linear-gradient(168deg,var(--surface-3),var(--surface-2))}
.msum-art img.photo{width:100%; height:100%; object-fit:contain}
.msum-art .dev{height:100%; width:auto}
.msum-tx .h1{font-size:clamp(22px,4vw,34px); margin-top:4px}
.msum-tx .lead{margin-top:4px; font-size:14px}
.msum-tx .statrow{margin-top:12px; gap:7px}
.msum-tx .stat{padding:6px 11px; font-size:12.5px}
.msum-help{display:none}
.mintro{margin:0 0 10px}
@media(min-width:1000px){
  .mpage{grid-template-columns:320px minmax(0,1fr); gap:40px; align-items:start; margin-top:20px}
  .msum{position:sticky; top:calc(var(--nav-h) + 20px); grid-template-columns:1fr; padding:20px; gap:16px}
  .msum-art{aspect-ratio:4/3; padding:18px}
  .msum-help{display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line-2); padding-top:16px}
  .msum-help b{font-size:14px; font-weight:800}
  .msum-help .muted{margin:-4px 0 6px}
  .mbody .cards{grid-template-columns:1fr 1fr}
  .mbody .section.tight{padding:28px 0}
  .mbody > .section.tight:first-of-type{padding-top:10px}
}
@media(min-width:1280px){ .mbody .cards{grid-template-columns:repeat(3,1fr)} }

/* 브랜드 고르기: 사진 카드 대신 한 줄 타일 — 여섯 개가 한 화면에 */
.brandtiles{display:grid; gap:10px; grid-template-columns:1fr}
@media(min-width:620px){ .brandtiles{grid-template-columns:1fr 1fr; gap:12px} }
@media(min-width:1000px){ .brandtiles{grid-template-columns:repeat(3,1fr)} }
.btile{display:flex; align-items:center; gap:14px; padding:16px 18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); transition:.18s var(--ease)}
.btile:hover{transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--ink-4)}
.btile .dot{width:14px; height:14px; border-radius:50%; background:var(--bdot,var(--ink-4)); flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--bdot,var(--ink-4)) 18%, transparent)}
.btile .tx{min-width:0; flex:1}
.btile .tx b{display:block; font-size:16.5px; font-weight:800; letter-spacing:-.03em}
.btile .tx span{display:block; font-size:12.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.btile .cnt{font-size:12px; font-weight:700; color:var(--ink-3); white-space:nowrap}
.btile .ic{color:var(--ink-4); flex:none}

/* 새 영상 카드(제목만) */
.tcard .body > b{font-size:15px; font-weight:800; letter-spacing:-.03em; line-height:1.4}

/* ── 2026-10-09: 화면 안 이동 자리(기종 탭·취급 품목 묶음)는 붙박이 상단 바 아래로 오게 ── */
[id^="sec-"],[id^="grp-"]{scroll-margin-top:calc(var(--nav-h) + 74px)}
.empty .btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* ── 사용량 카운터: 브랜드 카드 안의 기종 묶음 ── */
.mgroup{padding:13px 0 2px; border-top:1px dashed var(--line)}
.mgroup:first-of-type{border-top:0; padding-top:0}
.mgroup .mmodels{display:block; font-weight:800; font-size:14.5px; letter-spacing:-.02em; margin-bottom:7px}
.mgroup .mtip{margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--ink-3)}
.mgroup .msend{display:inline-flex; align-items:center; gap:6px; margin-top:9px; padding:4px 10px; border-radius:999px;
  background:var(--surface-2); font-size:12.5px; font-weight:700; color:var(--ink-2)}
.mgroup .msend .ic{width:14px; height:14px}

/* ── 취급 품목 화면 ── */
.pgroups .section.tight{padding-top:8px}

/* ── 2026-10-09: 영상 없는 작업 카드의 그림(관리·검침) ── */
.tcard .thumb .ph.art{background:linear-gradient(160deg,#FFFFFF,var(--surface-2)); padding:8px}
.tcard .thumb .ph.art .dev{height:88%; width:auto; max-width:76%; opacity:1}
.tcard.soon .thumb .ph.art .dev{opacity:1}
/* ── 검침 작업 화면 (2026-10-09): 단추 흐름 + 번호 순서. 그림 카드는 실제 기기와 단추 자리가 달라 헷갈려서 뺌 ── */
.mpanel .mbody{padding:16px 22px 22px}
.mpanel .mintro{margin:0 0 6px; font-size:14px; line-height:1.6; color:var(--ink-3)}
.mpanel .mgroup{padding:18px 0 10px; border-top:1px dashed var(--line)}
.mpanel .mgroup:first-of-type{border-top:0; padding-top:12px}
.mpanel .mmodels{display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:16px; font-weight:800; letter-spacing:-.02em}
.mpanel .mmodels::before{content:""; width:4px; height:18px; border-radius:2px; background:var(--accent)}
.keyflow{display:flex; flex-wrap:wrap; align-items:center; gap:8px 6px; margin:2px 0 14px; padding:12px 14px 13px;
  background:var(--surface-3); border:1px solid var(--line-2); border-radius:14px}
.keyflow .klabel{flex:0 0 100%; font-size:11.5px; font-weight:800; letter-spacing:.03em; color:var(--ink-4); margin-bottom:-1px}
.keyflow .key{display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:0 13px; border-radius:9px; background:var(--navy); color:#fff;
  font-weight:800; font-size:14px; letter-spacing:-.01em; box-shadow:0 2px 0 rgba(0,0,0,.28)}
.keyflow .key.end{background:#FEE500; color:#191919; box-shadow:0 2px 0 rgba(0,0,0,.12)}
.keyflow .key .ic{width:15px; height:15px}
.keyflow .karr{display:inline-flex; color:var(--ink-4)} .keyflow .karr .ic{width:15px; height:15px}
.mpanel .ministeps li{font-size:15px; line-height:1.6; padding:9px 0 9px 34px}
.mpanel .ministeps li::before{top:10px; width:23px; height:23px}
.ministeps kbd,.mtip kbd{font:inherit; font-weight:800; background:var(--surface-2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:6px; padding:0 7px; margin:0 1px; white-space:nowrap}
.mpanel .mtip{margin:10px 0 0; font-size:13px; line-height:1.55; color:var(--ink-3)}
.mpanel .msend{margin-top:12px}
.mpanel .btn.kko{margin-top:18px}

/* 홈 첫 화면 한 줄 설명(2026-10-09) */
.hero .hero-note{margin:-6px 0 22px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.72); max-width:520px}

/* 제조사 공식 영상 배지(2026-10-09) */
.b-off{background:#EEF2FF; color:#3730A3}
@media (prefers-color-scheme: dark){ .b-off{background:#1E2452; color:#C7D2FE} }

/* ── 2026-10-09: 폰 홈 브랜드 타일(1단계) · 브랜드 화면 칩 · QR 연결 안내 · QR 스티커 ── */
.btiles{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.btile{display:flex; flex-direction:column; gap:8px; padding:12px 12px 13px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-1); color:inherit; text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.btile:active{transform:scale(.98)}
.btile .bshot{display:grid; place-items:center; aspect-ratio:4/3; border-radius:12px; background:linear-gradient(168deg,#FFFFFF,var(--surface-2)); overflow:hidden; padding:8px}
.btile .bshot img{width:100%; height:100%; object-fit:contain}
.btile .bshot .dev{height:90%; width:auto}
.btile b{display:flex; align-items:center; gap:7px; font-size:17px; font-weight:850; letter-spacing:-.03em}
.btile b i{width:9px; height:9px; border-radius:50%; flex:none}
.btile .bn{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; color:var(--ink-3)}
.btile .bn .ic{width:14px; height:14px}
.bchips{display:flex; gap:8px; overflow-x:auto; padding:14px 20px 4px; margin:0 -20px; scrollbar-width:none}
.bchips::-webkit-scrollbar{display:none}
.bchips a{flex:none; display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); font-size:13.5px; font-weight:750; text-decoration:none}
.bchips a i{width:8px; height:8px; border-radius:50%}
.bchips a.on{background:var(--navy); color:#fff; border-color:transparent}
@media(min-width:900px){ .bchips{margin:0; padding:14px 0 4px; flex-wrap:wrap; overflow:visible} }
.qrhello{display:flex; align-items:center; gap:9px; margin:12px 0 0; padding:11px 14px; border-radius:12px; background:var(--green-bg); color:var(--green); font-size:13.5px; font-weight:700; line-height:1.45}
.qrhello .ic{width:16px; height:16px; flex:none}
.labels{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:700px){ .labels{grid-template-columns:1fr 1fr} }
.labellink{display:block; color:inherit; text-decoration:none}
.label{display:flex; flex-direction:column; gap:10px; padding:14px 16px; background:#fff; color:#111; border:1px dashed #B4BFD1; border-radius:12px; break-inside:avoid}
.label .lhead{display:flex; justify-content:space-between; gap:8px; font-size:11px; font-weight:800; letter-spacing:.04em; color:#03183F}
.label .lbody{display:flex; gap:14px; align-items:center}
.label .qrbox{flex:none; width:112px; height:112px; display:grid; place-items:center; font-size:10px; color:#999; text-align:center}
.label .qrbox svg{width:100%; height:100%; display:block}
.label .ltx{min-width:0}
.label .ltx b{display:block; font-size:20px; font-weight:900; letter-spacing:-.03em; line-height:1.2}
.label .ltx span{display:block; margin-top:2px; font-size:11.5px; color:#555}
.label .ltx p{margin:6px 0 0; font-size:12px; line-height:1.45; color:#222}
.label .lfoot{display:flex; justify-content:space-between; gap:8px; font-size:11px; font-weight:700; color:#03183F; border-top:1px solid #E5E7EB; padding-top:8px}
@media print{
  .nav,.tabbar,.tabbar-sp,.qr-tools,#footer,.band,.bsheet{display:none !important}
  body{background:#fff}
  .container{padding:0; max-width:none}
  .section{padding:0}
  .labels{grid-template-columns:1fr 1fr; gap:0}
  .label{border:1px dashed #bbb; border-radius:0; height:67mm; box-sizing:border-box; justify-content:space-between; page-break-inside:avoid}
}
/* 폰에서는 실적 띠를 접는다 — 고객이 폰으로 오는 이유는 문제 해결이지 회사 소개가 아니다 */
@media(max-width:759px){ .trust{display:none} }

/* 기종 화면 → 그 기종 QR 스티커(직원용) 작은 링크(2026-10-09) */
.msum-help .qrlink{display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-size:12px; font-weight:700; color:var(--ink-4); text-decoration:none}
.msum-help .qrlink small{font-size:10px; font-weight:800; padding:1px 6px; border-radius:999px; background:var(--surface-2); color:var(--ink-3)}
.msum-help .qrlink:hover{color:var(--ink)}
.msum-help .qrlink .ic{width:14px; height:14px}

/* 기종 화면이 폰에서 옆으로 밀리던 것(2026-10-09): 가로 스크롤 탭 줄(.jump)이 격자 칸 안에서 내용 폭(423px)만큼 버텼다 — 칸의 최소 폭을 풀고 스크롤 줄은 칸 폭에 가둔다 */
.mpage > *{min-width:0}
.mbody{min-width:0; max-width:100%}
.mbody .jump{max-width:100%}

/* ── 폰 기종 화면 탭: 가로 드래그 대신 3칸 균등 분할(아이콘 위 · 짧은 이름 아래), 2026-10-09 ── */
.jump a .ls{display:none}
@media(max-width:759px){
  .mbody .jump{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; overflow:visible; margin:0 -2px; padding:10px 2px 12px}
  .mbody .jump a{flex:1 1 auto; flex-direction:column; justify-content:center; gap:5px; height:auto; min-height:58px; padding:8px 4px 9px;
    border-radius:16px; font-size:12.5px; font-weight:750; white-space:normal; text-align:center; line-height:1.15}
  .mbody .jump a .ic{width:19px; height:19px}
  .mbody .jump a .lf{display:none} .mbody .jump a .ls{display:inline}
  .mbody .jump a.on{box-shadow:0 6px 16px rgba(3,24,63,.18)}
  /* 취급 품목 묶음 탭은 드래그 없이 줄바꿈 */
  .jump.jump-wrap{flex-wrap:wrap; overflow:visible; margin:0; padding:12px 0}
}

/* 폰 머리말 단추를 손가락 크기(44px)로 (2026-10-09) */
@media(max-width:759px){ .navbtn,.navbtn.kko,.navtel{min-height:44px; min-width:44px} }
/* 정적 페이지(검색엔진용) 본문 — 앱이 그리기 전 잠깐 보이는 목록. 앱이 뜨면 바뀐다 */
.prerender{padding:28px 0 60px; line-height:1.7} .prerender h1{font-size:24px; margin:0 0 10px} .prerender h2{font-size:17px; margin:22px 0 6px}
.prerender ul,.prerender ol{margin:0; padding-left:22px} .prerender a{color:var(--blue)}