/* 색: ink · gray · line · bg · brand(Tech Blue) · brand2(Ocean Blue) · soft · navy · dark
   굵기 4개: 300 · 400 · 700 · 900 (워드마크만 600) */
:root{
  --ink:#111318; --gray:#6E7380; --line:#E4E7EE; --bg:#FFFFFF; --brand:#325FEB;
  --brand2:#508FFF; /* 글자 그라데이션 끝색 */
  --soft:#EAF0FF; /* 연한 파랑 틴트 */
  --navy:#04044A;
  --dark:#071116; /* 푸터 · 어두운 면 */
  --tile:#FFFFFF; /* 타일 바탕: 흰색 (색 바탕 대신 얇은 선으로 구분) */
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:400;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
b,strong{font-weight:700}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons & links */
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 30px;background:var(--brand);color:var(--bg);font-weight:700;font-size:16px;border-radius:999px;transition:opacity .2s,transform .2s var(--ease)}
.btn:hover{opacity:.88}
.btn:active{transform:scale(.97)}
.btn-block{width:100%}
.link{font-weight:700;font-size:16px;border-bottom:1px solid var(--ink);padding-bottom:2px;transition:color .2s,border-color .2s}
.link:hover{color:var(--brand);border-color:var(--brand)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:inline-flex;align-items:center}
.wordmark{font-weight:600;font-size:20px;letter-spacing:-.03em;color:var(--ink);line-height:1}
.wordmark-w{color:#fff}
.menu{display:flex;gap:40px;align-items:center}
.menu a{font-size:15px;color:var(--gray);transition:color .2s}
.menu a:hover{color:var(--ink)}
.menu .menu-cta{color:var(--brand);font-weight:700}
.burger{display:none;width:36px;height:36px;position:relative}
.burger span{position:absolute;left:8px;right:8px;height:1px;background:var(--ink);transition:transform .3s var(--ease)}
.burger span:first-child{top:14px}.burger span:last-child{top:21px}
.nav.open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* type */
.label{font-weight:900;font-size:13px;letter-spacing:.24em;color:var(--brand);margin-bottom:28px}
h1{font-weight:700;font-size:clamp(40px,6.4vw,84px);line-height:1.18;letter-spacing:-.045em}
h2{font-weight:700;font-size:20px;letter-spacing:-.01em}
h2.big{font-weight:700;font-size:clamp(30px,4vw,50px);line-height:1.3;letter-spacing:-.035em}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--gray);margin-top:24px}

/* hero */
.hero{padding-top:180px}
.hero-cta{display:flex;gap:32px;justify-content:center;align-items:center;margin-top:44px;flex-wrap:wrap}
.vline{display:block;width:1px;height:96px;background:var(--line);margin:72px auto 0}
.hero-img{margin-top:0;overflow:hidden}
.hero-img img{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:50% 60%}

/* facts */
.facts{border-bottom:1px solid var(--line)}
.facts-in{display:grid;grid-template-columns:repeat(3,1fr)}
.fact{display:flex;flex-direction:column;align-items:center;gap:6px;padding:64px 16px;text-align:center}
.fact+.fact{border-left:1px solid var(--line)}
.fact b{font-weight:700;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.03em;line-height:1.1}
.fact span{color:var(--gray);font-size:15px}

/* sections */
.section{padding:120px 0}
.sec-head{display:flex;align-items:baseline;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--ink)}
.num{font-weight:300;font-size:20px;color:var(--gray);font-variant-numeric:tabular-nums}

/* finder */
.opts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 32px;margin:48px auto 0;max-width:860px}
.opt{font-size:17px;color:var(--gray);padding:6px 0;transition:color .2s}
.opt:hover{color:var(--ink)}
.opt.on{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:8px}
.answer{max-width:640px;margin:64px auto 0;padding-top:48px;border-top:1px solid var(--line);min-height:220px}
.ans{animation:fadeUp .45s var(--ease)}
.a-tag{font-weight:700;font-size:14px;color:var(--brand)}
.a-title{font-weight:700;font-size:clamp(24px,2.8vw,34px);letter-spacing:-.025em;line-height:1.35;margin-top:12px}
.a-desc{color:var(--gray);margin-top:12px}
.ans .link{display:inline-block;margin-top:28px}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* rows */
.two{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.rows{list-style:none}
.rows li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.rows b{font-size:17px;white-space:nowrap}
.rows span{color:var(--gray);font-size:15px;text-align:right}
.mk-lead{font-weight:400;font-size:clamp(22px,2.4vw,30px);line-height:1.4;letter-spacing:-.02em;padding:32px 0;border-bottom:1px solid var(--line)}
.mk-lead b{color:var(--brand);font-weight:700}
.wide-img{margin-top:120px}
.wide-img img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 55%}

/* centers */
.search{display:block;margin-top:40px}
.search input{width:100%;border:0;border-bottom:1px solid var(--line);padding:16px 0;font:inherit;font-weight:400;font-size:clamp(18px,2vw,24px);color:var(--ink);background:none;outline:none;transition:border-color .2s;border-radius:0}
.search input:focus{border-color:var(--ink)}
.search input::placeholder{color:var(--gray)}
.centers{list-style:none;margin-top:8px}
.centers li{display:grid;grid-template-columns:200px 1fr auto;gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);transition:opacity .3s}
.centers li b{font-size:17px}
.centers li span{color:var(--gray);font-size:15px}
.centers li em{font-style:normal;font-weight:700;font-size:14px;color:var(--brand)}
.centers li.dim{opacity:.28}
.centers .no-hit{display:block;color:var(--gray)}
.centers .no-hit a{color:var(--brand);font-weight:700}

/* contact */
.phones{display:grid;grid-template-columns:repeat(3,1fr);margin:56px auto 0;max-width:880px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.phones a{display:flex;flex-direction:column;gap:4px;padding:32px 12px;transition:color .2s}
.phones a+a{border-left:1px solid var(--line)}
.phones span{color:var(--gray);font-size:14px}
.phones b{font-weight:700;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em}
.phones a:hover b{color:var(--brand)}
.form{max-width:520px;margin:72px auto 0;text-align:left;display:flex;flex-direction:column;gap:28px}
.form label{display:flex;flex-direction:column;gap:4px;min-width:0}
.form label>span,legend{font-size:14px;color:var(--gray)}
.form input:not([type=checkbox]){border:0;border-bottom:1px solid var(--line);padding:12px 0;font:inherit;font-size:18px;color:var(--ink);background:none;outline:none;border-radius:0;transition:border-color .2s}
.form input:not([type=checkbox]):not(.hp){width:100%;min-width:0}
.form input:focus{border-color:var(--ink)}
.form input.err{border-color:var(--brand)}
fieldset{border:0}
legend{margin-bottom:10px}
.pick{display:flex;flex-wrap:wrap;gap:8px 24px}
.pick button{font-size:16px;color:var(--gray);padding:4px 0;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.pick button::before{content:"";width:14px;height:14px;border:1px solid var(--line);border-radius:50%;transition:background-color .16s,border-color .16s,color .16s}
.pick button.on{color:var(--ink);font-weight:700}
.pick button.on::before{background:var(--brand);border-color:var(--brand)}
.form .agree{flex-direction:row;align-items:center;gap:10px;font-size:15px;color:var(--gray)}
.agree input{appearance:none;-webkit-appearance:none;width:14px;height:14px;border:1px solid var(--line);border-radius:50%;margin:0;flex:none;cursor:pointer;transition:background-color .16s,border-color .16s,color .16s}
.agree input:checked{background:var(--brand);border-color:var(--brand)}
.form-msg{font-size:15px;min-height:24px;color:var(--gray);text-align:center}
.form-msg.bad{color:var(--brand)}

/* footer — 어두운 바탕(dark) */
.foot{background:var(--dark);color:var(--line);padding:72px 0 56px;font-size:14px}
.foot a{transition:color .2s}
.foot a:hover{color:var(--bg)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--gray)}
.foot-top .wordmark{font-size:22px}
.foot-call{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.foot-call span{font-size:13px;opacity:.7}
.foot-call b{color:var(--bg);font-weight:700;font-size:28px;letter-spacing:-.02em}
.foot-menu-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px}
.foot-menu-head p{color:#AAB2C0;font-size:13px}
.foot-toggle-all{min-height:44px;padding:0 4px;color:var(--line);font-size:13px;text-decoration:underline;text-underline-offset:5px}
.foot-toggle-all[hidden]{display:none}
.foot-map{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;gap:24px 32px;padding:12px 0 32px;border-bottom:1px solid var(--gray)}
.foot-group{min-width:0}
.foot-group summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;color:var(--bg);font-weight:700;list-style:none;cursor:pointer}
.foot-group summary::-webkit-details-marker{display:none}
.foot-disclosure{position:relative;flex:none;width:16px;height:16px;color:#AAB2C0}
.foot-disclosure::before,.foot-disclosure::after{content:"";position:absolute;background:currentColor;border-radius:1px}
.foot-disclosure::before{width:12px;height:1px;left:2px;top:7px}
.foot-disclosure::after{width:1px;height:12px;left:7px;top:2px}
.foot-group[open] .foot-disclosure::after{display:none}
.foot-links{display:flex;flex-direction:column;gap:2px;padding:4px 0 12px}
.foot-links a{display:flex;align-items:center;min-height:34px;overflow-wrap:anywhere}
.foot-links .foot-overview{color:#AAB2C0;font-size:13px;margin-bottom:4px}
.foot-group summary:focus-visible,.foot-toggle-all:focus-visible,.foot a:focus-visible{outline:2px solid #A7BFFF;outline-offset:4px;border-radius:3px}
.foot-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-top:28px;font-size:13px;opacity:.7}
.biz{line-height:1.9}
.copy{display:flex;gap:20px}
.copy b{font-weight:700}
/* ---------- 하위 페이지 공통 ---------- */
.menu a.on{color:var(--ink);font-weight:700}
.page-head{padding-top:180px}
.page-head .lead b.brand,.brand{color:var(--brand);font-weight:700}
.section.tight-top{padding-top:64px}
.crumb{font-size:14px;color:var(--gray);margin-bottom:28px}
.crumb a:hover{color:var(--ink)}
.prose{display:flex;flex-direction:column;gap:20px;color:var(--gray);font-size:17px;line-height:1.8}
.prose-lead{font-weight:400;font-size:clamp(22px,2.4vw,30px);line-height:1.45;letter-spacing:-.02em;color:var(--ink)}
.statement{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:baseline;padding:48px 0;border-bottom:1px solid var(--line)}
.st-label{font-weight:900;font-size:13px;letter-spacing:.24em;color:var(--brand)}
.statement p{font-weight:400;font-size:clamp(22px,2.6vw,34px);line-height:1.45;letter-spacing:-.02em}
.cols3{display:grid;grid-template-columns:repeat(3,1fr)}
.col{padding:40px 32px 40px 0;border-bottom:1px solid var(--line)}
.col+.col{padding-left:32px;border-left:1px solid var(--line)}
.col .n,.svc .n,.steps .n{display:block;font-weight:300;color:var(--gray);font-variant-numeric:tabular-nums;margin-bottom:20px}
.col b{display:block;font-size:20px;margin-bottom:10px}
.col p{color:var(--gray);font-size:15px}
.rows-top,.prose-lead+.rows{border-top:1px solid var(--line)}
.prose-lead+.rows{margin-top:32px}
.svc{list-style:none}
.svc li{display:grid;grid-template-columns:72px 260px 1fr;gap:16px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line)}
.svc .n{margin:0}
.svc b{font-weight:700;font-size:clamp(19px,2vw,24px);letter-spacing:-.02em}
.svc p{color:var(--gray)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px}
.steps.steps-2{grid-template-columns:repeat(2,1fr)}
.steps li{padding:40px 24px 40px 0;border-bottom:1px solid var(--line)}
.steps li+li{padding-left:24px;border-left:1px solid var(--line)}
.steps b{display:block;font-size:19px;margin-bottom:8px}
.steps p{color:var(--gray);font-size:15px}
.quote{font-weight:700;font-size:clamp(28px,3.6vw,48px);letter-spacing:-.03em;line-height:1.3}
.note{color:var(--gray);font-size:14px;margin-top:24px}
.more-link{display:inline-block;margin-top:32px}
@media (max-width:900px){
  .statement{grid-template-columns:1fr;gap:12px}
  .svc li{grid-template-columns:48px 1fr}
  .svc p{grid-column:2}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps li:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:600px){
  .page-head{padding-top:132px}
  .cols3,.steps,.steps.steps-2{grid-template-columns:1fr}
  .col,.col+.col,.steps li,.steps li+li{padding:28px 0;border-left:0}
  .svc li{grid-template-columns:36px 1fr;padding:24px 0}
}

.svc-2{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.svc-2 li{grid-template-columns:56px 1fr}
.svc-2 li p{grid-column:2}
.svc-2 b{font-size:clamp(18px,1.8vw,22px)}
.plist{display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:72px 1fr 1fr 32px;gap:16px;align-items:center;padding:40px 0;border-bottom:1px solid var(--line)}
.prow .n{font-weight:300;color:var(--gray)}
.prow .t{font-weight:700;font-size:clamp(24px,2.8vw,38px);letter-spacing:-.03em;transition:color .25s}
.prow .d{color:var(--gray)}
.prow .go{justify-self:end;font-weight:300;font-size:24px;transition:transform .3s var(--ease)}
.prow:hover .t{color:var(--brand)}
.prow:hover .go{transform:translateX(6px)}
.others{display:grid;grid-template-columns:repeat(3,1fr)}
.other{display:flex;align-items:baseline;gap:16px;padding:32px 0;border-bottom:1px solid var(--line)}
.other+.other{padding-left:32px;border-left:1px solid var(--line)}
.other .n{font-weight:300;color:var(--gray)}
.other b{font-weight:700;font-size:clamp(19px,2vw,24px);letter-spacing:-.02em;transition:color .2s}
.other:hover b{color:var(--brand)}
@media (max-width:900px){
  .svc-2{grid-template-columns:1fr}
  .prow{grid-template-columns:48px 1fr 24px}
  .prow .d{display:none}
}
@media (max-width:600px){
  .others{grid-template-columns:1fr}
  .other+.other{padding-left:0;border-left:0}
  .prow{grid-template-columns:36px 1fr 20px;padding:28px 0}
}

/* ---------- 사진 레이아웃 ---------- */
figure{margin:0}
figure img{width:100%;height:100%;object-fit:cover}
figcaption{font-size:14px;color:var(--gray);padding-top:12px;margin-top:12px;border-top:1px solid var(--line)}
.sec-note{margin-left:auto;font-size:14px;color:var(--gray)}
.band{position:relative;overflow:hidden;height:min(560px,56vw)}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.42}
.band-text{position:relative;z-index:1;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--bg)}
.band-text p{font-weight:700;font-size:clamp(28px,4.2vw,54px);line-height:1.2;letter-spacing:-.03em}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:120px}
.duo img{aspect-ratio:4/3}
.gallery{display:grid;gap:12px;margin-top:40px}
.gallery>*,.pgrid>*,.duo>*{min-width:0}
.gallery.g3{grid-template-columns:1.4fr 1fr 1fr}
.gallery.g4{grid-template-columns:repeat(4,1fr)}
.gallery.g2{grid-template-columns:1fr 1fr}
.gallery.g2 img{aspect-ratio:4/3}
.gallery img{aspect-ratio:4/5}
.gallery.g3 figure:first-child img{aspect-ratio:auto;height:calc(100% - 45px)}
.prow{grid-template-columns:72px 120px 1fr 1fr 32px}
.prow .th{width:120px;aspect-ratio:4/3;overflow:hidden}
.prow .th img{transition:transform .8s var(--ease)}
.prow:hover .th img{transform:scale(1.06)}
@media (max-width:900px){
  .prow{grid-template-columns:48px 96px 1fr 24px}
  .prow .th{width:96px}
  .gallery.g4{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
              .band{height:72vw;min-height:280px}
  .duo{grid-template-columns:1fr;margin-top:80px}
  .gallery.g2{grid-template-columns:1fr}
  .gallery.g3{grid-template-columns:1fr 1fr}
  .gallery.g3 figure:first-child{grid-column:1/-1}
  .gallery.g3 figure:first-child img{aspect-ratio:4/3;height:auto}
  .prow{grid-template-columns:28px 72px 1fr 16px;gap:12px}
  .prow .th{width:72px}
  .sec-note{display:none}
}

/* 제품 그리드 (홈) */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 20px;margin-top:40px}
.pcard{display:flex;flex-direction:column;gap:4px}
.pcard figure{overflow:hidden;aspect-ratio:4/5;margin-bottom:16px}
.pcard img{transition:transform .8s var(--ease)}
.pcard:hover img{transform:scale(1.04)}
.pcard b{font-size:20px;font-weight:700;letter-spacing:-.02em;transition:color .2s}
.pcard:hover b{color:var(--brand)}
.pcard span{color:var(--gray);font-size:15px}
.link-plain{color:var(--gray)}
.link-plain:hover{color:var(--ink)}
#busy .wide-img{margin-top:64px}
#busy .wide-img img{aspect-ratio:16/8}
@media (max-width:900px){.pgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  .pgrid{gap:28px 12px}
  .pcard b{font-size:17px}.pcard span{font-size:13px}
  #busy .wide-img img{aspect-ratio:4/3}
}

/* 글자 그라데이션 */
.grad{background:linear-gradient(90deg,var(--brand) 0%,var(--brand2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:gradMove 6s ease-in-out infinite alternate}
@keyframes gradMove{from{background-position:0% 50%}to{background-position:100% 50%}}



/* 전국 센터 지도 */
.center-head{margin-bottom:56px}
.map-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.kmap svg{width:100%;height:auto;display:block;max-height:620px}
.kmap .land path{fill:var(--line);stroke:var(--bg);stroke-width:1.2;transition:fill .3s}
.kmap .land path:hover{opacity:.7}
.pin{cursor:pointer;outline:none}
.pin .dot{fill:var(--brand);stroke:var(--bg);stroke-width:2.5;transition:r .3s var(--ease)}
.pin .pulse{fill:var(--brand);opacity:0;transform-box:fill-box;transform-origin:center}
.pin.active .pulse,.pin.hit .pulse{animation:pinPulse 1.8s ease-out infinite}
.pin.active .dot{r:8}
.pin.dim{opacity:.25}
@keyframes pinPulse{0%{opacity:.45;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
.map-side .search{margin-top:0}
.map-side .centers{max-height:520px;overflow:auto;scrollbar-width:thin}
.map-wrap .centers li{grid-template-columns:110px 1fr auto;cursor:pointer;transition:background .2s,opacity .3s}
.map-wrap .centers li.active b{color:var(--brand)}

/* 고객사 로고 — 칸은 선으로만 구분 */
.brands{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);margin-top:56px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.brands li{min-width:0;display:flex;align-items:center;justify-content:center;aspect-ratio:2/1;padding:18% 14%;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.brands img{max-width:100%;max-height:100%;object-fit:contain}
.brands-more{font-size:15px;color:var(--gray);text-align:center;word-break:keep-all}
.brands-more b{color:var(--ink);margin:0 4px}

@media (max-width:900px){
  .map-wrap{grid-template-columns:1fr;gap:32px}
  .kmap svg{max-height:460px;margin:0 auto}
  .map-side .centers{max-height:none}
  .brands{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:600px){
  .brands{grid-template-columns:repeat(3,1fr)}
  .map-wrap .centers li{grid-template-columns:1fr auto}
}
@media (prefers-reduced-motion:reduce){.grad{animation:none}.pin .pulse{animation:none!important}}

/* 제품 타일 — 실물 사진을 같은 크기·여백으로 정리 */
.tile{background:var(--tile);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1}
.tile img{width:86%;height:86%;object-fit:contain;mix-blend-mode:multiply;transition:transform .7s var(--ease)}
a:hover .tile img{transform:scale(1.05)}
.pcard figure.tile{margin-bottom:18px}
.pcard b{font-size:19px}

/* 히어로 아래 고객사 로고 흐름 */
.logo-band{margin-top:96px;padding:40px 0 48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logo-band-cap{text-align:center;font-size:15px;color:var(--gray);margin-bottom:28px}
.logo-band-cap b{color:var(--ink)}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq{list-style:none;display:flex;align-items:center;gap:56px;width:max-content;animation:mq 50s linear infinite}
.mq li{flex:none;height:44px;display:flex;align-items:center}
.mq img{height:100%;width:auto;max-width:150px;object-fit:contain}
.marquee:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){.mq{animation:none}}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none}}

/* responsive */
@media (max-width:900px){
  .foot-map{grid-template-columns:repeat(3,1fr)}
  .menu{display:none;position:fixed;top:68px;left:0;right:0;background:var(--bg);flex-direction:column;align-items:stretch;gap:0;padding:0 32px 24px;border-bottom:1px solid var(--line)}
  .nav.open .menu{display:flex}
  .menu a{font-size:18px;padding:18px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .burger{display:block}
  .two{grid-template-columns:1fr;gap:96px}
}
@media (max-width:600px){
  .wrap{padding:0 20px}
  .foot-map{grid-template-columns:1fr;gap:0;padding:8px 0 0}
  .foot-group+.foot-group{border-top:1px solid #3A424F}
  .foot-group summary{min-height:56px}
  .foot-links{padding:0 0 16px}
  .foot-links a{min-height:44px}
  .foot{padding:48px 0 36px}
  .foot-call{align-items:flex-end}
  .foot-call b{font-size:24px}
  .foot-top{align-items:center;flex-wrap:nowrap;gap:16px;padding-bottom:24px}
  .menu{padding:0 20px 20px}
  .hero{padding-top:132px}
  .hero-cta{flex-direction:column;gap:24px}
  .hero-cta .btn{width:100%}
  .vline{height:64px;margin-top:56px}
  .hero-img img{aspect-ratio:4/3}
  .facts-in{grid-template-columns:1fr}
  .fact{padding:36px 0}
  .fact+.fact{border-left:0;border-top:1px solid var(--line)}
  .section{padding:100px 0}
  .opts{gap:4px 20px}
  .rows li{flex-direction:column;gap:2px}
  .rows span{text-align:left}
  .wide-img{margin-top:80px}
  .wide-img img{aspect-ratio:4/3}
  .centers li{grid-template-columns:1fr auto;gap:4px 12px}
  .centers li span{grid-column:1/-1;grid-row:2}
  .phones{grid-template-columns:1fr}
  .phones a+a{border-left:0;border-top:1px solid var(--line)}
}

/* 모바일 숫자: 한 줄 3칸 (기존 600px 규칙보다 뒤에 둬야 함) */
@media (max-width:600px){
  .facts-in{grid-template-columns:repeat(3,1fr)}
  .fact{padding:28px 4px;gap:2px}
  .fact+.fact{border-top:0;border-left:1px solid var(--line)}
  .fact b{font-size:20px}
  .fact span{font-size:12px}
}

/* 제품 상세: 실물 이미지 히어로 · 라인업 */
.product-hero{display:flex;justify-content:center;padding:24px 0 8px;border-bottom:1px solid var(--line)}
.product-hero img{max-height:520px;width:auto;max-width:100%;object-fit:contain}
.lineup-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:40px}
.lineup-grid li{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 16px;border-bottom:1px solid var(--line);text-align:center}
.lineup-grid li+li{border-left:1px solid var(--line)}
.lineup-grid img{width:100%;aspect-ratio:1/1;object-fit:contain}
.lineup-grid b{font-size:17px}
.lineup-grid span{font-size:14px;color:var(--gray)}
.lineup-grid.n2{grid-template-columns:repeat(2,1fr)}
.lineup-grid.n3{grid-template-columns:repeat(3,1fr)}
@media (max-width:600px){
  .product-hero img{max-height:320px}
  .lineup-grid,.lineup-grid.n3{grid-template-columns:1fr 1fr}
  .lineup-grid li:nth-child(odd){border-left:0}
  .lineup-grid li{padding:20px 8px}
}

/* 제품 상세: 히어로·라인업도 타일로 */
.product-hero{border-bottom:0;padding:0}
.product-hero.tile{aspect-ratio:16/8;border-radius:28px}
.product-hero.tile img{width:auto;height:92%;max-height:none}
.lineup-grid{border-top:0;gap:16px;list-style:none}
.lineup-grid li{border:0!important;padding:0 0 8px;align-items:flex-start;text-align:left}
.lineup-grid li .tile{width:100%;margin-bottom:6px}
.lineup-grid li .tile img{width:84%;height:84%;aspect-ratio:auto}
.lineup-grid li+li{border-left:0}
.lineup-grid.n2,.lineup-grid.n3{gap:16px}
@media (max-width:600px){
  .lineup-grid,.lineup-grid.n3{gap:12px}
  .tile{border-radius:14px}
  .product-hero.tile{aspect-ratio:4/3;border-radius:18px}
  .logo-band{margin-top:64px;padding:28px 0 32px}
  .mq{gap:36px}.mq li{height:34px}
}

/* 캠페인 */
.camp-main{margin-top:56px;overflow:hidden;border-radius:20px}
.camp-main img{aspect-ratio:16/8}
.camp-duo{margin-top:12px}
.camp-duo figure{overflow:hidden;border-radius:20px}
.camp-duo img{aspect-ratio:4/3}
.duo-1{grid-template-columns:1fr}
.duo-1 img{aspect-ratio:21/9}
@media (max-width:600px){.camp-main,.camp-duo figure{border-radius:14px}.camp-main img{aspect-ratio:4/3}.camp-duo{grid-template-columns:1fr 1fr}.duo-1 img{aspect-ratio:4/3}}

.camp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:12px}
.camp-grid figure{grid-column:span 2;min-width:0}
.camp-grid figure:nth-child(4),.camp-grid figure:nth-child(5){grid-column:span 3}
.camp-grid img{aspect-ratio:4/5;border-radius:16px;height:auto;object-fit:cover}
.camp-grid{row-gap:28px}
.camp-grid figure:nth-child(4) img,.camp-grid figure:nth-child(5) img{aspect-ratio:4/3}
.camp-grid figcaption{border-top:0;margin-top:0;padding-top:10px;font-size:14px}
@media (max-width:600px){.camp-grid{grid-template-columns:1fr 1fr}.camp-grid figure,.camp-grid figure:nth-child(4),.camp-grid figure:nth-child(5){grid-column:span 1}.camp-grid figure:nth-child(5){grid-column:1/-1}.camp-grid img,.camp-grid figure:nth-child(4) img{aspect-ratio:4/5;border-radius:12px}}

/* 캠페인 뷰어: 큰 화면 1장 + 글자 탭 */
.camp{margin-top:56px}
.camp-view{position:relative;aspect-ratio:16/8;overflow:hidden;border-radius:20px;background:var(--line)}
.camp-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .8s var(--ease),transform 1.6s var(--ease)}
.camp-view img.on{opacity:1;transform:none}
.camp-tabs{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);margin-top:24px}
.ctab{position:relative;text-align:left;padding:18px 12px 0 0;font-size:15px;color:var(--gray);display:flex;gap:8px;transition:color .2s}
.ctab span{font-weight:300}
.ctab::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--brand)}
.ctab.on{color:var(--ink);font-weight:700}
.ctab.on::before{width:100%;transition:width var(--dur,5s) linear}
.ctab:hover{color:var(--ink)}
@media (max-width:600px){
  .camp-view{aspect-ratio:4/3;border-radius:14px}
  .camp-tabs{grid-template-columns:repeat(3,1fr);row-gap:4px}
  .ctab{font-size:13px;padding:14px 6px 8px 0}
}

/* QA 수정 */
.link,.logo,.crumb a,.more{position:relative}
.link::after,.logo::after,.crumb a::after,.more::after{content:"";position:absolute;inset:-12px -8px}
.pin:focus-visible .dot{stroke:var(--ink);stroke-width:3}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* FAQ */
.fsearch{display:block;margin-bottom:28px}
.fsearch input{width:100%;border:0;border-bottom:1px solid var(--ink);padding:16px 0;font:inherit;font-size:clamp(17px,1.8vw,22px);color:var(--ink);background:none;outline:none;border-radius:0}
.fsearch input::placeholder{color:var(--gray)}
.fcats{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:24px}
.fcat{font-size:15px;color:var(--gray);padding:6px 0;transition:color .2s}
.fcat span{font-weight:300;margin-left:2px}
.fcat:hover{color:var(--ink)}
.fcat.on{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:8px}
.faq{list-style:none;border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line);scroll-margin-top:90px}
.fq-head{width:100%;display:grid;grid-template-columns:120px 1fr 24px;gap:16px;align-items:center;padding:24px 0;text-align:left}
.fq-cat{font-size:14px;color:var(--brand);font-weight:700}
.fq-t{font-size:17px;font-weight:700;line-height:1.5;transition:color .2s}
.fq-head:hover .fq-t{color:var(--brand)}
.fq-head .i{position:relative;width:16px;height:16px;justify-self:end}
.fq-head .i::before,.fq-head .i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink);transition:transform .35s var(--ease)}
.fq-head .i::after{transform:rotate(90deg)}
.fq.open .fq-head .i::after{transform:rotate(0)}
.fq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.fq.open .fq-body{grid-template-rows:1fr}
.fq-inner{overflow:hidden}
.fq-content{padding:0 0 28px 136px;font-size:16px;line-height:1.8;max-width:880px}
.fq-content h3,.fq-content h4{font-size:17px;font-weight:700;margin:24px 0 8px;color:var(--ink)}
.fq-content p{margin:0 0 10px;color:var(--gray)}
.fq-content b{color:var(--ink);font-weight:700}
.fq-content ul,.fq-content ol{padding-left:20px;margin:0 0 12px;color:var(--gray)}
.fq-content li p{margin:0}
.fq-content img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px;margin:12px 0}
.fq-content a{color:var(--brand);text-decoration:underline}
.fq-content table{border-collapse:collapse;margin:12px 0;font-size:14px}
.fq-content td,.fq-content th{border:1px solid var(--line);padding:8px 10px}
.fq-foot{padding:0 0 28px 136px;font-size:14px;color:var(--gray)}
.fq-foot a{color:var(--ink);font-weight:700;border-bottom:1px solid var(--ink)}
.fq[hidden]{display:none}
.faq-empty{padding:40px 0;color:var(--gray)}
.faq-empty a{color:var(--brand);font-weight:700}
@media (max-width:600px){
  .fq-head{grid-template-columns:1fr 20px;gap:4px 12px;padding:20px 0}
  .fq-cat{grid-column:1;font-size:13px}
  .fq-t{grid-column:1;font-size:16px}
  .fq-head .i{grid-row:1/3;grid-column:2}
  .fq-content,.fq-foot{padding-left:0}
}

/* 상담 양식 보강 */
.form{max-width:640px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.form label>span em{font-style:normal;color:var(--brand)}
.form select,.form textarea{border:0;border-bottom:1px solid var(--line);padding:12px 0;font:inherit;font-size:17px;color:var(--ink);background:none;outline:none;border-radius:0;transition:border-color .2s;width:100%}
.form select{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E7380' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center no-repeat}
.form textarea{resize:vertical;min-height:84px;line-height:1.6}
.form select:focus,.form textarea:focus{border-color:var(--ink)}
.form select.err{border-color:var(--brand)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.agree-more{font-size:14px;color:var(--gray);text-decoration:underline;margin-left:6px}
.agree-text{font-size:13px;color:var(--gray);line-height:1.7;margin-top:-16px}
.btn[disabled]{opacity:.5;pointer-events:none}
.form-msg.ok{color:var(--ink);font-weight:700}
@media (max-width:600px){.frow{grid-template-columns:1fr;gap:28px}}

.rows-link li{padding:0}
.rows-link a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;width:100%;padding:22px 0}
.rows-link a:hover b{color:var(--brand)}
.rows-link b{white-space:normal}

/* ---------- 메뉴: 하위 메뉴 (데스크톱은 마우스를 올리면 아래로, 모바일은 펼친 목록) ---------- */
.mi{position:relative;display:flex;align-items:center;height:68px}
.menu .mt{font-size:15px;color:var(--gray);transition:color .2s}
.menu .mt:hover,.mi:hover .mt,.mi:focus-within .mt{color:var(--ink)}
.menu .mt.on{color:var(--ink);font-weight:700}
.sub{position:fixed;left:0;right:0;top:68px;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.mi:hover .sub,.mi:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub-in{max-width:1200px;margin:0 auto;padding:22px 32px;display:flex;justify-content:center;gap:36px;flex-wrap:wrap}
.menu .sub a{font-size:15px;color:var(--gray)}
.menu .sub a:hover{color:var(--brand)}
.menu .sub .sub-all{color:var(--ink);font-weight:700}
@media (min-width:901px){.menu{gap:22px}}
@media (min-width:1101px){.menu{gap:28px}}
@media (min-width:901px) and (max-width:1000px){.menu{gap:16px}.menu>.mi>.mt,.menu>.menu-cta{font-size:14px}}
@media (max-width:900px){
  .menu{max-height:calc(100dvh - 68px);overflow-y:auto}
  .mi{display:block;height:auto;border-bottom:1px solid var(--line);padding:16px 0}
  .menu .mt{display:block;font-size:18px;color:var(--ink);padding:2px 0;border:0}
  .sub{position:static;opacity:1;visibility:visible;transform:none;border:0;background:none;transition:none}
  .sub-in{padding:8px 0 0;justify-content:flex-start;gap:6px 18px}
  .menu .sub a{font-size:15px;padding:4px 0;border:0;color:var(--gray)}
  .menu .sub .sub-all{display:none}
  .menu .menu-cta{padding:18px 0;border:0}
}

/* 하위 페이지 목록 (썸네일 없는 행) */
.prow.prow-text{grid-template-columns:72px 1fr 1fr 32px}
@media (max-width:900px){.prow.prow-text{grid-template-columns:48px 1fr 24px}}
@media (max-width:600px){.prow.prow-text{grid-template-columns:36px 1fr 20px}}

/* 표: 세로선 없이 가로선만 */
.tbl{margin-top:40px;overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th{font-size:14px;font-weight:400;color:var(--gray);text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--ink)}
.tbl td{font-size:17px;padding:20px 16px 20px 0;border-bottom:1px solid var(--line)}
.tbl td:first-child{font-weight:700}
.prose-lead .grad{font-weight:700}

/* 배달앱 */
.apps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.apps li{padding:40px 24px 40px 0;display:flex;flex-direction:column;gap:12px}
.apps li+li{padding-left:24px;border-left:1px solid var(--line)}
.apps img{width:56px;height:56px;border-radius:14px}
.apps b{font-size:19px}
.apps p{color:var(--gray);font-size:15px}
.app-mark{width:72px;height:72px;border-radius:18px;margin:0 auto 28px}
@media (max-width:900px){.apps{grid-template-columns:1fr 1fr}.apps li:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:600px){.apps{grid-template-columns:1fr}.apps li,.apps li+li{padding:28px 0;border-left:0;border-top:1px solid var(--line)}.apps li:first-child{border-top:0}}

/* 이름 나열 (박스 없이 · 로 구분) */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px 0;margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.chips li{font-size:17px;color:var(--ink)}
.chips li+li::before{content:"·";color:var(--line);margin:0 14px}

/* 고객센터: 지원 3열 */
.help3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:40px}
.hgroup{font-weight:900;font-size:13px;letter-spacing:.24em;color:var(--brand);margin-bottom:12px}
.help3 .rows-link a{flex-direction:column;gap:2px}
.help3 .rows-link span{text-align:left}
.help-more{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;margin-top:56px}
@media (max-width:900px){.help3{grid-template-columns:1fr;gap:40px}}

/* 협력사 로고 이미지 */
.partners{margin:40px 0 0;padding:32px 0;border-top:1px solid var(--line)}
.partners img{max-width:760px;margin:0 auto;mix-blend-mode:multiply}

/* 테이블오더 화면 */
.ui-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.ui-shots img{aspect-ratio:16/10;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
@media (max-width:600px){.ui-shots{grid-template-columns:1fr 1fr}}

.lineup-grid.n1{grid-template-columns:minmax(0,420px);justify-content:center}
.lineup-grid.n1 li{border-left:0}
.steps+.steps{margin-top:0}
.steps.steps-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:600px){.steps.steps-3{grid-template-columns:1fr}}
/* 여러 줄 그리드: 줄 첫 칸은 왼쪽 선 없음 */
.cols3 .col:nth-child(3n+1){padding-left:0;border-left:0}
.others .other:nth-child(3n+1){padding-left:0;border-left:0}
.tile img[src*="/apps/"]{width:34%;height:34%;border-radius:22%;mix-blend-mode:normal}
.lineup-grid.n2 .tile{aspect-ratio:4/3}
.lineup-grid.n2{max-width:880px;margin-left:auto;margin-right:auto}
.chips{gap:12px 32px}
.chips li+li::before{content:none}
.partners{border-top:0;padding-top:16px}
@media (max-width:600px){.cols3 .col:nth-child(3n+1){padding-left:0}.others .other:nth-child(3n+1){padding-left:0}}

/* ---------- 그래픽: 큰 숫자 띠 ---------- */
.stat-band{border-top:1px solid var(--line);margin:0 auto;max-width:1200px}
.page-head+.stat-band{margin-top:96px}
.stat-band .fact b{font-size:clamp(28px,3.4vw,46px)}

/* 흐름: 점과 선 */
.chains{display:flex;flex-direction:column;gap:8px;margin-top:40px}
.chain{display:grid;grid-template-columns:140px 1fr;align-items:start;gap:24px;padding:32px 0;border-bottom:1px solid var(--line)}
.chains .chain:last-child{border-bottom:0}
.sec-head+.chain{margin-top:40px}
.chain-tag{font-weight:900;font-size:13px;letter-spacing:.2em;color:var(--brand);padding-top:2px}
.chain ol{list-style:none;display:flex;position:relative}
.chain ol::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:1px;background:var(--line)}
.chain li{flex:1;position:relative;display:flex;flex-direction:column;gap:4px;padding-right:12px}
.chain li:last-child{flex:0 0 auto}
.chain i{width:13px;height:13px;border-radius:50%;background:var(--bg);border:1px solid var(--gray);position:relative;z-index:1;margin-bottom:14px}
.chain li.on i{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 16%,transparent)}
.chain b{font-size:17px;white-space:nowrap}
.chain li.on b{color:var(--brand)}
.chain em{font-style:normal;font-size:14px;color:var(--gray)}
.chain.reveal ol::after{content:"";position:absolute;left:6px;top:6px;height:1px;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width 1.4s var(--ease) .3s}
.chain.reveal.in ol::after{width:calc(100% - 12px)}
@media (max-width:900px){.chain{grid-template-columns:1fr;gap:20px}}
@media (max-width:600px){
  .chain ol{flex-direction:column;gap:22px;padding-left:2px}
  .chain ol::before{left:6px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .chain.reveal ol::after{left:6px;width:1px;height:0;transition:height 1.4s var(--ease) .3s}
  .chain.reveal.in ol::after{width:1px;height:calc(100% - 12px)}
  .chain li{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:0}
  .chain i{margin:0}
  .chain em{flex-basis:100%;padding-left:27px}
}

/* 가로 막대 비교 */
.bars{list-style:none;margin-top:40px;display:flex;flex-direction:column;gap:22px}
.bars li{display:grid;grid-template-columns:180px 1fr 120px;align-items:center;gap:20px}
.bl{font-size:15px;color:var(--gray)}
.bars li.on .bl{color:var(--ink);font-weight:700}
.bt{height:10px;border-radius:99px;background:color-mix(in srgb,var(--line) 50%,var(--bg));overflow:hidden}
.bf{display:block;height:100%;width:0;border-radius:99px;background:var(--line);transition:width 1.2s var(--ease) .2s}
.bars li.on .bf{background:linear-gradient(90deg,var(--brand),var(--brand2))}
.bars.in .bf{width:var(--w)}
.bars b{font-size:19px;text-align:right;font-variant-numeric:tabular-nums}
.bars li:not(.on) b{font-weight:400;color:var(--gray)}
@media (max-width:600px){.bars li{grid-template-columns:1fr auto;gap:8px 12px}.bars .bt{grid-column:1/-1;grid-row:2}}

/* 계약 타입 A·B·C */
.own{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px}
.own-col{padding:8px 32px 32px 0}
.own-col+.own-col{padding-left:32px;border-left:1px solid var(--line)}
.own-k{font-weight:300;font-size:64px;line-height:1;letter-spacing:-.04em;color:var(--ink);display:flex;align-items:baseline;gap:10px}
.own-k small{font-weight:900;font-size:11px;letter-spacing:.24em;color:var(--brand)}
.own-n{display:block;font-size:20px;margin-top:16px}
.own-d{color:var(--gray);font-size:15px;margin-top:6px;min-height:48px}
.own ul{list-style:none;margin-top:24px;border-top:1px solid var(--line)}
.own li{display:grid;grid-template-columns:1fr 12px auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.own li span{font-size:14px;color:var(--gray)}
.own li i{width:10px;height:10px;border-radius:50%;border:1px solid var(--gray)}
.own li.on i{background:var(--brand);border-color:var(--brand)}
.own li b{font-size:15px;font-weight:400;color:var(--gray)}
.own li.on b{color:var(--ink);font-weight:700}
@media (max-width:900px){.own{grid-template-columns:1fr}.own-col,.own-col+.own-col{padding:32px 0;border-left:0;border-top:1px solid var(--line)}.own-col:first-child{border-top:0}}
/* 선 아이콘 */
.ic{width:28px;height:28px;color:var(--brand);display:block}
.prow-text .n .ic{transition:transform .4s var(--ease)}
.prow-text:hover .n .ic{transform:translateY(-2px)}
@media (max-width:600px){.ic{width:22px;height:22px}}
.stat-band{max-width:1136px}
@media (max-width:1200px){.stat-band{margin-left:32px;margin-right:32px}}
@media (max-width:600px){.stat-band{margin-left:20px;margin-right:20px}.stat-band .fact b{font-size:19px;white-space:nowrap}.stat-band .fact span{font-size:11px}}

/* 그라데이션 굵은 문구 띠 (짙은 바탕) */
.stat-band .fact b{background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
h1 .grad{display:inline-block;padding-bottom:.06em}
.quote .grad{font-weight:700}

/* 사회공헌: 이전 → 이후 */
.ba{display:grid;grid-template-columns:1fr 48px 1fr;align-items:center;gap:12px;margin-top:40px}
.ba img{aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.ba figcaption b{color:var(--brand);margin-right:8px}
.ba-arrow{font-weight:300;font-size:32px;color:var(--brand);text-align:center}
.wide-img img.contain{object-fit:contain;aspect-ratio:auto;max-width:760px;margin:0 auto;background:var(--bg)}
.gallery.g3 img{border-radius:16px}
@media (max-width:600px){.ba{grid-template-columns:1fr}.ba-arrow{transform:rotate(90deg)}}
.gallery.gs{grid-template-columns:repeat(3,1fr)}
.gallery.gs img{aspect-ratio:4/3;object-fit:cover;border-radius:16px}
@media (max-width:600px){.gallery.gs{grid-template-columns:1fr 1fr}.gallery.gs figure:first-child{grid-column:1/-1}}

/* ---------- 홈 히어로: 화면 가득 매장 사진 + 실물 제품 ---------- */
.hero2{position:relative;height:100svh;min-height:640px;max-height:1100px;overflow:hidden;background:var(--ink);color:var(--bg)}
.h2-slides,.h2-slide{position:absolute;inset:0;margin:0}
.h2-slide{opacity:0;transition:opacity 1.2s var(--ease)}
.h2-slide.on{opacity:1}
.h2-slide img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform:scale(1.07);transition:transform 7s linear}
.h2-slide.on img{transform:scale(1)}
.h2-shade{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 78%,transparent) 0%,color-mix(in srgb,var(--ink) 40%,transparent) 42%,transparent 70%),linear-gradient(0deg,color-mix(in srgb,var(--ink) 70%,transparent) 0%,transparent 34%),linear-gradient(180deg,color-mix(in srgb,var(--ink) 45%,transparent) 0%,transparent 18%)}
.h2-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;padding-bottom:120px}
.h2-label{margin-bottom:24px}
.h2-title{font-weight:900;font-size:clamp(44px,7vw,104px);line-height:1.08;letter-spacing:-.05em;color:var(--bg)}
.h2-lead{font-size:clamp(16px,1.5vw,20px);color:color-mix(in srgb,var(--bg) 78%,transparent);margin-top:28px}
.h2-cta{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
.btn-ghost{background:transparent;color:var(--bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bg) 55%,transparent);font-variant-numeric:tabular-nums}
.btn-ghost:hover{background:color-mix(in srgb,var(--bg) 12%,transparent);opacity:1}
.h2-bottom{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:40px}
.h2-facts{list-style:none;display:flex;gap:0}
.h2-facts li{display:flex;flex-direction:column;gap:2px;padding:0 32px}
.h2-facts li:first-child{padding-left:0}
.h2-facts li+li{border-left:1px solid color-mix(in srgb,var(--bg) 30%,transparent)}
.h2-facts b{font-weight:700;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em}
.h2-facts span{font-size:13px;color:color-mix(in srgb,var(--bg) 70%,transparent)}
.h2-nav{display:flex;gap:28px}
.h2-nav button{position:relative;color:color-mix(in srgb,var(--bg) 60%,transparent);font-size:14px;padding:0 0 12px;min-width:96px;text-align:left;transition:color .3s}
.h2-nav button span{font-weight:300;margin-right:8px}
.h2-nav button.on{color:var(--bg);font-weight:700}
.h2-nav i{position:absolute;left:0;right:0;bottom:0;height:2px;background:color-mix(in srgb,var(--bg) 22%,transparent);overflow:hidden}
.h2-nav i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--brand),var(--brand2));transform:scaleX(0);transform-origin:left}
.h2-nav button.on i::after{animation:h2bar 6s linear forwards}
.h2-nav.paused button.on i::after{animation-play-state:paused}
@keyframes h2bar{to{transform:scaleX(1)}}
.logo-strip .logo-band{margin-top:0;border-top:0}

/* 홈 히어로 위에서는 머리말이 투명·흰 글자 */
[data-page=index] .nav:not(.scrolled):not(.open):not(:hover):not(:focus-within){background:transparent}
[data-page=index] .nav:not(.scrolled):not(.open):not(:hover):not(:focus-within) .mt{color:color-mix(in srgb,var(--bg) 82%,transparent)}
[data-page=index] .nav:not(.scrolled):not(.open):not(:hover):not(:focus-within) .menu-cta{color:var(--bg)}
[data-page=index] .nav:not(.scrolled):not(.open):not(:hover):not(:focus-within) .wordmark{color:var(--bg)}
[data-page=index] .nav:not(.scrolled):not(.open):not(:hover):not(:focus-within) .burger span{background:var(--bg)}
.nav{transition:border-color .3s,background .3s}

@media (max-width:900px){
  .h2-bottom{flex-direction:column;align-items:stretch;gap:24px}
  .h2-nav{gap:16px}.h2-nav button{min-width:0;flex:1}
}
@media (max-width:600px){
  .hero2{min-height:600px}
  .h2-slide img{object-position:72% 50%}
  .h2-shade{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 75%,transparent) 0%,color-mix(in srgb,var(--ink) 35%,transparent) 48%,color-mix(in srgb,var(--ink) 80%,transparent) 100%)}
  .h2-in{justify-content:flex-start;padding-top:120px;padding-bottom:0}
  .h2-cta .btn{flex:1}
  .h2-facts li{padding:0 14px}
  .h2-facts b{font-size:19px}.h2-facts span{font-size:11px}
  .h2-nav button{font-size:12px}.h2-nav button span{display:none}
  .h2-bottom{padding-bottom:28px}
}
@media (prefers-reduced-motion:reduce){.h2-slide img{transition:none;transform:none}.h2-nav button.on i::after{animation:none;transform:scaleX(1)}}
@media (max-width:600px){
  .h2-slide img{height:128%;object-position:64% 0%}
  .h2-shade{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 82%,transparent) 0%,color-mix(in srgb,var(--ink) 55%,transparent) 44%,transparent 58%,transparent 72%,color-mix(in srgb,var(--ink) 85%,transparent) 88%)}
  .h2-in{padding-top:104px}
}
@media (max-width:600px){
  .h2-slides{top:auto;height:62%}
  .h2-slide img{height:100%;object-position:62% 60%}
  .h2-shade{background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 38%,color-mix(in srgb,var(--ink) 30%,transparent) 52%,transparent 64%,color-mix(in srgb,var(--ink) 88%,transparent) 90%)}
}

/* ---------- 홈 히어로 v2: 그래픽 배경 + 실물 제품 ---------- */
.hero2{background:radial-gradient(120% 90% at 75% 45%,#2a2a2a 0%,var(--ink) 45%,#121212 100%)}
.h2-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(60px)}
.o1{width:52vw;height:52vw;max-width:820px;max-height:820px;right:2%;top:50%;transform:translateY(-50%);background:radial-gradient(circle,color-mix(in srgb,var(--brand) 70%,transparent) 0%,color-mix(in srgb,var(--brand) 25%,transparent) 40%,transparent 70%);opacity:.55;animation:orb1 14s ease-in-out infinite alternate}
.o2{width:30vw;height:30vw;max-width:480px;max-height:480px;right:24%;top:12%;background:radial-gradient(circle,color-mix(in srgb,var(--brand2) 70%,transparent) 0%,transparent 70%);opacity:.35;animation:orb2 11s ease-in-out infinite alternate}
@keyframes orb1{to{transform:translate(-6%,-44%) scale(1.08)}}
@keyframes orb2{to{transform:translate(18%,30%) scale(.9)}}
.rings{position:absolute;right:-4%;top:50%;width:min(64vw,980px);transform:translateY(-50%);fill:none;stroke:color-mix(in srgb,var(--bg) 12%,transparent);stroke-width:1}
.rings .dash{stroke-dasharray:2 10;animation:spin 80s linear infinite;transform-origin:400px 400px}
@keyframes spin{to{transform:rotate(360deg)}}
.grid{position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--bg) 9%,transparent) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(60% 60% at 72% 50%,#000,transparent);-webkit-mask-image:radial-gradient(60% 60% at 72% 50%,#000,transparent)}
.h2-shade{display:none}
.h2-slide{display:flex;align-items:center;justify-content:flex-end;padding-right:max(32px,calc((100vw - 1200px)/2 + 20px));transition:opacity .9s var(--ease)}
.h2-slide img{width:auto;height:auto;max-width:min(46vw,640px);max-height:62vh;object-fit:contain;transform:translateY(24px) scale(.96);transition:transform 1.1s var(--ease);filter:drop-shadow(0 40px 60px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(255,255,255,.2));-webkit-box-reflect:below 6px linear-gradient(transparent 70%,rgba(255,255,255,.14))}
.h2-slide.on img{transform:none}
.h2-slide figcaption{position:absolute;right:max(32px,calc((100vw - 1200px)/2 + 20px));top:18%;text-align:right;font-weight:700;font-size:15px;color:var(--bg);opacity:0;transform:translateY(8px);transition:opacity .24s var(--ease),transform .24s var(--ease)}
.h2-slide figcaption span{display:block;font-weight:400;font-size:13px;color:color-mix(in srgb,var(--bg) 60%,transparent);margin-top:4px}
.h2-slide.on figcaption{opacity:1;transform:none}
.h2-slide::after{content:"";position:absolute;right:max(32px,calc((100vw - 1200px)/2 + 20px));bottom:20%;width:min(42vw,600px);height:60px;background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--brand) 35%,transparent),transparent 70%);filter:blur(10px);opacity:.7}
.h2-in{max-width:1200px}
.h2-title{max-width:680px}
@media (max-width:900px){.h2-slide img{max-width:52vw}}
@media (max-width:600px){
  .h2-slides{top:auto;height:52%}
  .h2-slide{justify-content:center;padding:0 0 150px}
  .h2-slide img{height:auto;max-width:78vw;max-height:30vh}
  .h2-slide figcaption{display:none}
  .h2-slide::after{right:50%;transform:translateX(50%);bottom:150px;width:70vw}
  .o1{width:110vw;height:110vw;right:-30%;top:auto;bottom:-10%;transform:none}
  .o2{width:60vw;height:60vw;right:auto;left:-10%;top:40%}
  .rings{width:140vw;right:-20%;top:auto;bottom:-25%;transform:none}
  .grid{mask-image:radial-gradient(70% 50% at 50% 75%,#000,transparent);-webkit-mask-image:radial-gradient(70% 50% at 50% 75%,#000,transparent)}
  .h2-nav button{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.orb,.rings .dash{animation:none}}
.h2-slide img{max-width:min(40vw,580px);max-height:58vh}
.h2-slide figcaption{display:none}
@media (max-width:600px){.h2-slide img{max-width:80vw;max-height:28vh}}

/* ---------- 홈 히어로 v3: 밝은 바탕 (다른 페이지와 같은 톤) ---------- */
.hero2{background:radial-gradient(90% 80% at 72% 45%,var(--bg) 0%,var(--tile) 55%,color-mix(in srgb,var(--line) 70%,var(--bg)) 100%);color:var(--ink)}
.o1{background:radial-gradient(circle,color-mix(in srgb,var(--brand) 38%,transparent) 0%,color-mix(in srgb,var(--brand2) 14%,transparent) 42%,transparent 70%);opacity:.5}
.o2{background:radial-gradient(circle,color-mix(in srgb,var(--brand2) 40%,transparent) 0%,transparent 70%);opacity:.35}
.rings{stroke:color-mix(in srgb,var(--ink) 12%,transparent)}
.grid{background-image:radial-gradient(color-mix(in srgb,var(--ink) 12%,transparent) 1px,transparent 1px)}
.h2-title{color:var(--ink)}
.h2-lead{color:var(--gray)}
.btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-ghost:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.h2-facts li+li{border-left-color:color-mix(in srgb,var(--ink) 18%,transparent)}
.h2-facts span{color:var(--gray)}
.h2-nav button{color:var(--gray)}
.h2-nav button.on{color:var(--ink)}
.h2-nav i{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.h2-slide img{filter:drop-shadow(0 36px 48px rgba(10,20,60,.22)) drop-shadow(0 8px 14px rgba(10,20,60,.12));-webkit-box-reflect:below 6px linear-gradient(transparent 72%,rgba(255,255,255,.22))}
.h2-slide::after{background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--ink) 18%,transparent),transparent 70%);opacity:.6}
/* 머리말은 다른 페이지처럼 흰 바탕·검은 글자 */
[data-page=index] .nav:not(.scrolled):not(.open):not(:hover):not(:focus-within){background:transparent}
[data-page=index] .nav:not(.scrolled):not(.open):not(:hover):not(:focus-within) .mt{color:var(--gray)}
[data-page=index] .nav:not(.scrolled):not(.open):not(:hover):not(:focus-within) .menu-cta{color:var(--brand)}
[data-page=index] .nav:not(.scrolled):not(.open):not(:hover):not(:focus-within) .wordmark{color:var(--ink)}
[data-page=index] .nav:not(.scrolled):not(.open):not(:hover):not(:focus-within) .burger span{background:var(--ink)}
@media (max-width:600px){.h2-shade{display:none}}
.h2-slide.wide img{max-width:min(48vw,700px)}
.h2-slide img{-webkit-box-reflect:unset}
@media (max-width:600px){.h2-slide.wide img{max-width:90vw}}
.h2-slide.wide img{max-width:min(40vw,600px)}
@media (max-width:600px){.h2-slide.wide img{max-width:94vw}}

/* ---------- 홈 히어로 v4: 중앙 배치 + 제품 하나를 크게 ---------- */
.m-only{display:none}
.hero2.hc{height:100svh;min-height:760px;max-height:1080px}
.hc .h2-in{height:auto;display:block;text-align:center;padding:132px 32px 0;max-width:1200px;margin:0 auto}
.hc .h2-label{margin-bottom:20px}
.hc .h2-title{font-size:clamp(40px,5.6vw,84px);line-height:1.12;max-width:none}
.hc .h2-lead{margin-top:20px}
.hc .h2-cta{justify-content:center;margin-top:32px}
.hc .h2-slides{position:absolute;left:0;right:0;top:auto;bottom:0;height:52%;z-index:1}
.hc .h2-slide{display:flex;justify-content:center;align-items:flex-start;padding:0}
.hc .h2-slide::after{display:none}
.hc .h2-slide img{max-width:none;max-height:none;height:auto;transform:translateY(60px);transition:transform 1.2s var(--ease),opacity 1s;filter:drop-shadow(0 30px 50px rgba(10,20,60,.18)) drop-shadow(0 6px 12px rgba(10,20,60,.10))}
.hc .h2-slide.on img{transform:none}
.hc .k-tab img{width:min(74vw,940px)}
.hc .k-kiosk img{width:min(30vw,380px)}
.hc .k-pos img{width:min(64vw,820px)}
.hc .k-card img{width:min(40vw,500px)}
.hc .o1{right:auto;left:50%;top:auto;bottom:-30%;transform:translateX(-50%);width:70vw;height:70vw;max-width:1100px;max-height:1100px;animation:orb1c 14s ease-in-out infinite alternate}
@keyframes orb1c{to{transform:translateX(-46%) scale(1.06)}}
.hc .o2{right:auto;left:18%;top:30%}
.hc .rings{right:auto;left:50%;top:auto;bottom:-46%;transform:translateX(-50%);width:min(110vw,1500px)}
.hc .grid{mask-image:radial-gradient(60% 50% at 50% 80%,#000,transparent);-webkit-mask-image:radial-gradient(60% 50% at 50% 80%,#000,transparent)}
.hc .h2-nav{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;display:flex;gap:4px;padding:6px;border-radius:999px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.hc .h2-nav button{position:relative;min-width:0;padding:10px 18px;border-radius:999px;font-size:14px;color:var(--gray);overflow:hidden}
.hc .h2-nav button.on{color:var(--bg);background:var(--ink);font-weight:700}
.hc .h2-nav i{left:18px;right:18px;bottom:5px;height:2px;background:transparent}
.hc .h2-nav button.on i{background:color-mix(in srgb,var(--bg) 25%,transparent)}
.logo-strip .logo-band{border-top:1px solid var(--line)}
@media (max-width:900px){.hc .k-tab img{width:88vw}.hc .k-pos img{width:84vw}.hc .k-card img{width:56vw}.hc .k-kiosk img{width:40vw}}
@media (max-width:600px){
  .m-only{display:inline}
  .hero2.hc{min-height:700px}
  .hc .h2-in{padding:108px 20px 0}
  .hc .h2-title{font-size:clamp(34px,10vw,44px)}
  .hc .h2-lead{font-size:15px}
  .hc .h2-cta .btn{flex:1}
  .hc .h2-slides{height:44%}
  .hc .k-tab img{width:118vw}
  .hc .k-pos img{width:104vw}
  .hc .k-card img{width:78vw}
  .hc .k-kiosk img{width:58vw}
  .hc .h2-nav{bottom:18px;max-width:calc(100% - 32px)}
  .hc .h2-nav button{padding:9px 12px;font-size:12px}
}

/* 문구 띠: 검은 배경 대신 구분선 사이 문구 (사이트 톤에 맞춤) */

/* 문구 띠 v3: 아이콘 그래픽 + 문구 */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:40px}
@media (max-width:600px){.two-col{grid-template-columns:1fr;gap:32px}}
@media (max-width:600px){.hc .h2-nav{gap:0;padding:5px}.hc .h2-nav button{white-space:nowrap;padding:9px 11px;font-size:12px;flex:none}}

/* 바깥 링크 목록 */
.xlinks{list-style:none;margin-top:40px;border-top:1px solid var(--ink)}
.xl{display:grid;grid-template-columns:minmax(160px,1fr) 2fr auto;align-items:center;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.xl b{font-size:clamp(19px,2vw,24px);letter-spacing:-.02em;transition:color .2s}
.xl-d{color:var(--gray);font-size:15px}
.xl-u{font-size:13px;color:var(--gray);display:inline-flex;align-items:center;gap:10px}
.xl-u i{font-style:normal;font-size:18px;color:var(--ink);transition:transform .3s var(--ease)}
.xl:hover b{color:var(--brand)}
.xl:hover .xl-u i{transform:translate(3px,-3px)}
@media (max-width:600px){.xl{grid-template-columns:1fr auto;gap:4px 12px;padding:22px 0}.xl-d{grid-column:1;grid-row:2;font-size:14px}.xl-u{grid-column:2;grid-row:1/3}.xl-u{font-size:0}.xl-u i{font-size:18px}}

/* ---------- 그라데이션 색면 (오픈AI 뉴스 방식) ---------- */
.chain{grid-template-columns:1fr}
.chain.tagged{grid-template-columns:140px 1fr}
@media (max-width:900px){.chain.tagged{grid-template-columns:1fr}}

/* ---------- 핀터레스트 레퍼런스 반영 ---------- */
/* 큰 배경 글자 (애플 제품 페이지 방식) */
.page-head.has-wm{position:relative;overflow:hidden}
.page-head .wm{position:absolute;left:50%;top:clamp(110px,12vw,170px);transform:translateX(-50%);white-space:nowrap;font-weight:900;font-size:clamp(90px,17vw,260px);letter-spacing:-.04em;line-height:1;color:color-mix(in srgb,var(--ink) 4.5%,var(--bg));pointer-events:none;z-index:0}
.page-head .wrap{position:relative;z-index:1}
.hc .h2-wm{position:absolute;left:50%;top:-6%;transform:translateX(-50%);white-space:nowrap;font-weight:900;font-size:clamp(90px,15vw,240px);letter-spacing:-.04em;line-height:1;color:color-mix(in srgb,var(--ink) 5%,transparent);z-index:-1;pointer-events:none;opacity:0;transition:opacity 1s var(--ease)}
.hc .h2-slide{z-index:0}
.hc .h2-slide.on .h2-wm{opacity:1}
/* 굵기 대비: 첫 줄 가늘게 */
.thin,h1 .thin{font-weight:300}
.page-head h1{font-weight:300}
.page-head h1 .grad{font-weight:700}
.hc .h2-title{font-weight:700}
/* 아주 연한 파랑 → 흰색 히어로 바탕 */
.hero2.hc{background:var(--bg)}
.hc .o1{opacity:.4}
.hc .o2{opacity:.28}
/* 벤토 그리드 */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(240px,auto);gap:16px;margin-top:40px}
.bx{position:relative;overflow:hidden;border-radius:4px;background:var(--tile);border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;gap:8px;color:var(--ink)}
.bx-wide{grid-column:span 2}
.bx-k{font-weight:900;font-size:11px;letter-spacing:.22em;color:var(--brand)}
.bx b{font-size:20px;letter-spacing:-.02em}
.bx span{color:var(--gray);font-size:15px}
.bx-num{font-weight:700!important;font-size:clamp(48px,6vw,88px)!important;letter-spacing:-.05em!important;line-height:1}
.bx-art img,.bx-art2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.bx-art>div,.bx-art2>div{position:relative;z-index:1;margin-top:auto;display:flex;flex-direction:column;gap:6px}
.bx-art{color:var(--bg)}
.bx-art span{color:color-mix(in srgb,var(--bg) 85%,transparent);font-size:16px}
.bx-art .bx-num{color:var(--bg)}
.bx-more{margin-top:auto;font-weight:700;color:var(--ink)!important}
.bx-ui{grid-row:span 2;padding-bottom:0}
.bx-ui img{margin-top:auto;width:120%;max-width:none;border-radius:10px 10px 0 0;border:1px solid var(--line);border-bottom:0;box-shadow:0 20px 40px rgba(10,20,60,.10)}
.bx-steps{list-style:none;display:flex;gap:6px;margin-top:auto;flex-wrap:wrap}
.bx-steps li{padding:8px 14px;border-radius:999px;background:var(--bg);font-size:14px;font-weight:700;color:var(--gray)}
.bx-steps li.on{background:var(--ink);color:var(--bg)}
a.bx{transition:transform .4s var(--ease)}
a.bx:hover{transform:translateY(-3px)}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}.bx-ui{grid-row:span 1}}
@media (max-width:600px){.bento{grid-template-columns:1fr;grid-auto-rows:auto}.bx-wide{grid-column:auto}.bx{padding:24px;min-height:200px}.page-head .wm{top:120px}}
.bento{grid-auto-rows:300px}
.bx-ui{grid-row:auto}
.bx-ui img{width:130%}
.bx-art2 .bx-num{font-size:clamp(36px,3.8vw,58px)!important;white-space:nowrap}
@media (max-width:600px){.bento{grid-auto-rows:auto}.bx-ui{min-height:300px}}

/* 페이지 맨 아래 '다른 ○○' */
.sibs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:20px;margin-top:32px}
.sib{display:flex;flex-direction:column;gap:6px;min-width:0}
.sib figure{aspect-ratio:4/3;overflow:hidden;border-radius:4px;margin-bottom:10px;background:var(--tile)}
.sib img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.sib:hover img{transform:scale(1.05)}
.sib b{display:flex;justify-content:space-between;align-items:center;font-size:17px;letter-spacing:-.01em;transition:color .2s}
.sib b i{font-style:normal;font-weight:300;transition:transform .3s var(--ease)}
.sib:hover b{color:var(--brand)}
.sib:hover b i{transform:translateX(4px)}
.sib span{font-size:14px;color:var(--gray)}
@media (max-width:900px){
  .sibs{grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-32px;padding-right:32px;scrollbar-width:none}
  .sibs::-webkit-scrollbar{display:none}
  .sib{scroll-snap-align:start}
}
@media (max-width:600px){.sibs{grid-auto-columns:68%;margin-right:-20px;padding-right:20px;gap:14px}}
.sib figure.prod{background:var(--tile);border:1px solid var(--line)}.sib figure.prod img{object-fit:contain;padding:8%;mix-blend-mode:multiply}
/* 하위 메뉴 목록 (허브) — 사진 카드 */
.hubs{display:grid;gap:40px 20px;margin-top:40px}
.hubs.h3{grid-template-columns:repeat(3,1fr)}
.hubs.h4{grid-template-columns:repeat(4,1fr)}
.sib.hub figure{aspect-ratio:4/3}
.sib.hub b{font-size:clamp(18px,1.6vw,21px)}
.sib.hub span{font-size:15px}
@media (max-width:900px){.hubs.h3,.hubs.h4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.hubs{gap:28px 12px}.sib.hub b{font-size:16px}.sib.hub span{font-size:13px}}

/* 협력사 로고 벽 */
.pwall{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);margin-top:40px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pwall li{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:2/1;padding:12% 16%;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .35s var(--ease),opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms);cursor:default}
.pwall img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .35s,opacity .35s,transform .45s var(--ease)}
.pwall li span{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:12px;color:var(--brand);font-weight:700;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s var(--ease)}
.pwall li:hover{background:var(--soft)}
.pwall li:hover img{filter:none;opacity:1;transform:scale(1.08) translateY(-4px)}
.pwall li:hover span{opacity:1;transform:none}
.pwall:hover li:not(:hover) img{opacity:.35}
.pwall-more{flex-direction:column;gap:4px;text-align:center}
.pwall-more b{font-size:18px}
.pwall li.pwall-more span{position:static;opacity:1;transform:none;color:var(--gray);font-weight:400}
@media (hover:none){.pwall img{filter:none;opacity:1}}
@media (max-width:900px){.pwall{grid-template-columns:repeat(4,1fr)}}
@media (max-width:600px){.pwall{grid-template-columns:repeat(2,1fr)}.pwall li{padding:14% 18%}}

/* 페이지 중간 내용 구역 (구호 + 설명 + 버튼 + 사진) */
.feat{padding:40px 0}
.feat-in{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center;border-top:1px solid var(--ink);padding-top:56px}
.feat-h{font-weight:700;font-size:clamp(30px,3.6vw,52px);line-height:1.28;letter-spacing:-.04em}
.feat-h .thin{font-weight:300}
.feat-d{color:var(--gray);font-size:17px;line-height:1.8;margin:24px 0 32px;max-width:480px}
.feat-t .label{margin-bottom:20px}
.feat-img{aspect-ratio:4/3;overflow:hidden;border-radius:4px}
.feat-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.feat-img:hover img{transform:scale(1.03)}
.feat-img.prod{background:var(--tile);border:1px solid var(--line)}
.feat-img.prod img{object-fit:contain;padding:10%}
.feat + .section{padding-top:120px}
@media (max-width:900px){.feat-in{grid-template-columns:1fr;gap:40px;padding-top:40px}}
@media (max-width:600px){.feat-d{font-size:15px}.feat .btn{width:100%}}

/* QA: 터치 영역 */
.crumb a{display:inline-block;padding:10px 4px;margin:-10px -4px}
.note .link,.agree-more,.fq-foot a{display:inline;padding:0 0 1px;margin:0;position:relative}

/* ---------- 전체 QA 수정 ---------- */
/* 한 단어만 남는 줄 줄이기 */
h1,h2,h3,.feat-h,.prose-lead,.lead,.statement p,.quote,.big,.sec-head h2,.fq-t,.a-title{text-wrap:balance}
p,li,td,.sib span,.xl-d,.chain em,.biz,.note,.feat-d,.card-d,.rows span{text-wrap:pretty}
/* 협력사 로고 벽: 모바일 넘침·크기 통일 */
.pwall li{min-width:0}
.pwall img{max-height:46px;max-width:78%}
.pwall + .rows{margin-top:48px}
/* 흐름도 점 간격 통일 */
@media (min-width:601px){
  .chain ol{display:grid;grid-template-columns:repeat(var(--n),1fr)}
  .chain li,.chain li:last-child{padding-right:12px;flex:none}
  .chain ol::before{right:calc(100% / var(--n) - 6px)}
  .chain.reveal.in ol::after{width:calc(100% - 100% / var(--n))}
}
/* 2열 목록에서 혼자 남는 마지막 칸은 한 줄 전체로 */
.svc-2 li:last-child:nth-child(odd){grid-column:1/-1}
/* 라인업 타일: 콘텐츠 격자에 맞춤, 아래 요소와 간격 */
.lineup-grid.n1{grid-template-columns:repeat(3,1fr);justify-content:stretch}
.lineup-grid.n2{max-width:none}
.lineup-grid.n6{grid-template-columns:repeat(3,1fr)}
.lineup-grid.n6 li:nth-child(3n+1){border-left:0}
.lineup-grid + *{margin-top:48px}
/* 구분선 겹침 제거 */
.sec-head + .xlinks,.sec-head + .rows-top,.sec-head + .faq{border-top:0;margin-top:8px}
.feat-in{border-top:0;padding-top:0}
.xl{grid-template-columns:240px 1fr auto}
.own-col:last-child{padding-right:0}
.phones-full{max-width:none}
/* 사진 모서리 통일 */
.gallery.gs img,.ba img,.gallery img{border-radius:4px}
/* 요금 막대 아래 설명 간격 */
.bars + .note{margin:16px 0 32px}
.faq-links span{white-space:nowrap}
@media (max-width:900px){.lineup-grid.n6{grid-template-columns:repeat(2,1fr)}.lineup-grid.n6 li:nth-child(3n+1){border-left:1px solid var(--line)}.lineup-grid.n6 li:nth-child(odd){border-left:0}}
@media (max-width:600px){
  .m-hide{display:none}
  .section{padding:72px 0}
  .two{gap:32px}
  .feat{padding:24px 0}
  .feat + .section{padding-top:80px}
  .stat-band .fact span{font-size:12px}
  .statement p br{display:none}
  .xl{grid-template-columns:1fr auto}
  .lineup-grid.n1{grid-template-columns:1fr}
  .ui-shots{grid-template-columns:repeat(3,1fr);gap:6px}
  .gallery.gs figure:first-child{grid-column:auto}
  .gallery.gs figure:first-child:nth-last-child(odd){grid-column:1/-1}
  /* 표: 모바일에서는 줄마다 항목:값으로 쌓기 */
  .tbl table,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{padding:16px 0;border-bottom:1px solid var(--line)}
  /* 칸 안 글과 링크가 한 줄로 이어지게: grid 대신 왼쪽 여백 + 항목 이름은 절대 위치 */
  .tbl td{border:0;padding:4px 0 4px 108px;font-size:15px;display:block;position:relative}
  .tbl td::before{content:attr(data-label);color:var(--gray);font-size:13px;font-weight:400;position:absolute;left:0;top:6px;width:96px}
  .tbl td:first-child{font-size:17px;display:block;padding:0 0 6px}
  .tbl td:first-child::before{display:none}
}
@media (max-width:600px){.hc .k-tab img{width:100vw}}

/* 지도: 수도권 확대 창 */
.kmap .cap-bg{fill:var(--bg)}
.kmap .cap-ring{fill:none;stroke:var(--ink);stroke-width:1}
.kmap .cap-land path{stroke-width:.45}
.kmap .cap-mark{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.kmap .cap-line{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.kmap .cap-t{font-size:13px;font-weight:700;fill:var(--ink)}

/* 사회공헌: 건축 지역 */
.regions{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink)}
.regions li{display:flex;flex-direction:column;gap:6px;padding:28px 16px 28px 0;border-bottom:1px solid var(--line)}
.regions li+li{padding-left:20px;border-left:1px solid var(--line)}
.regions span{font-weight:300;color:var(--gray);font-size:14px}
.regions b{font-size:20px;letter-spacing:-.02em}
.regions em{font-style:normal;font-size:13px;color:var(--gray)}
@media (max-width:600px){.regions{grid-template-columns:1fr 1fr}.regions li+li{padding-left:0;border-left:0}.regions li:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}.regions li:last-child{grid-column:1/-1}}

/* ---------- 2차 QA 수정 ---------- */
/* 홈 히어로(PC): 제품 사진 아래쪽을 탭 알약 위에서 흐리게 끝내 알약과 겹치지 않게 */
@media (min-width:601px){.hc .h2-slides{-webkit-mask-image:linear-gradient(#000 calc(100% - 190px),transparent calc(100% - 112px));mask-image:linear-gradient(#000 calc(100% - 190px),transparent calc(100% - 112px))}}
/* 홈 히어로(모바일): 좌우 16px 여백 */
@media (max-width:600px){.hc .k-tab img,.hc .k-pos img{width:calc(100vw - 32px)}}
/* 벤토 CALL 카드: 하늘색 바탕 위 글자 대비 */
.bx-art2 .bx-k{color:var(--navy)}
.bx-art2 span:not(.bx-k){color:color-mix(in srgb,var(--navy) 80%,transparent)}
/* 벤토 ONE STOP 카드: 설명 줄 */
.bx-steps-d{margin-top:4px}
/* 제품 목록 썸네일: 정사각 사진이 잘리지 않게 */
.prow .th img{width:100%;height:100%;object-fit:contain}
/* 제품 목록 광고 띠: 문구를 포스터 반대편(오른쪽)에 */
@media (min-width:601px){.band-r .band-text{justify-content:flex-end;text-align:left;padding-right:max(48px,calc((100vw - 1200px)/2 + 40px))}}
/* 협력사 로고 벽: 모바일 칸 높이 통일, 터치 기기도 흑백 유지 */
@media (hover:none){.pwall img{filter:grayscale(1);opacity:.75}}
@media (max-width:600px){.pwall{grid-auto-rows:1fr}.pwall li{aspect-ratio:auto;min-height:88px;padding:0 18%}}
/* 모바일 머리말 큰 배경 글자: 빵부스러기·라벨이 아니라 제목 뒤로 */
@media (max-width:600px){.page-head .wm{top:200px}}
/* 한글 소제목·태그: 영문용 넓은 자간 빼기 */
.hgroup{letter-spacing:.02em;font-size:14px}
.chain-tag{letter-spacing:0;font-size:14px}
/* 광고 사진: 세로로 잘릴 때 위쪽(워드마크·헤드라인)이 보이게 */
.hero-img img[src*="ad-busstop"]{object-position:50% 45%}
.gallery.gs img[src*="ad-banner"],.sib img[src*="ad-banner"]{object-position:50% 12%}
/* 동의 체크박스·관심 항목: 흰 바탕에서 보이게, 체크박스는 네모 */
.agree input{width:18px;height:18px;border:1.5px solid #9AA0AC;border-radius:4px}
.agree input:checked{border-color:var(--brand);background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.pick button::before{width:16px;height:16px;border:1.5px solid #9AA0AC}
/* 요금 막대: 결합 안 한 줄의 채움도 바탕과 구분되게 */
.bf{background:color-mix(in srgb,var(--gray) 45%,var(--bg))}
/* 번호 목록 안 바깥 링크 */
.svc-x{display:inline-flex;align-items:center;gap:6px;padding:10px 0;color:var(--ink);font-weight:700;border-bottom:1px solid var(--ink);line-height:1}
.svc-x i{font-style:normal}
.svc-x:hover{color:var(--brand);border-color:var(--brand)}
/* FAQ 답변 속 글자 링크: 터치 영역 넓히기, 긴 주소 줄바꿈 */
.fq-content a{padding:12px 0;overflow-wrap:anywhere}
/* FAQ 분류 탭: 모바일은 한 줄 가로 넘김 */
@media (max-width:600px){.fcats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-20px;padding-right:20px;gap:20px}.fcats::-webkit-scrollbar{display:none}.fcat{white-space:nowrap;flex:none}}
/* 통계 띠 보조 문구(모바일) */
@media (max-width:600px){.stat-band .fact span{font-size:13px;line-height:1.4}}
/* ===== 2026-10-08 A+B 통일: 장식 제거 · 굵은 제목 · 상자 없음 · 페이지당 파랑 띠 하나 ===== */
.page-head .wm,.hc .h2-wm,.h2-bg,.vline{display:none!important}
.grad{background:none;-webkit-text-fill-color:currentColor;color:var(--brand);animation:none}
.stat-band .fact b{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
.thin,h1 .thin,.feat-h .thin,.page-head h1{font-weight:700}
.page-head{padding-top:168px}
.page-head .lead{margin-top:22px}
.page-head .hero-cta{margin-top:36px}
.page-head .hero-img{margin-top:72px}
.btn-ghost{box-shadow:none;background:#F1F3F7;color:var(--ink)}
.btn-ghost:hover{background:#E7EAF0}
/* 상자 없애기: 제품 사진은 흰 바탕에 그대로 */
.tile,.sib figure.prod,.feat-img.prod{border:0!important;background:none!important;border-radius:0}
.tile img{filter:none;mix-blend-mode:normal}
/* 홈 첫 화면(A): 두 줄 굵은 제목 */
.hc .h2-title{font-size:clamp(38px,4.8vw,68px);line-height:1.15;letter-spacing:-.045em}
.hc .h2-in{padding-top:120px}
/* 숫자 줄(A) */
.nums{border-top:1px solid var(--line);margin:0 auto;max-width:1136px}
.nums .fact b{font-size:clamp(30px,3.6vw,52px)}
a.fact{transition:color .2s}a.fact:hover b{color:var(--brand)}
/* 결제솔루션 카드: 가운데 정렬 */
#products .pcard{align-items:center;text-align:center}
#products .pcard figure.tile{aspect-ratio:1/1;width:100%}
#products .pcard figure.tile img{width:92%;height:92%}
/* 파랑 띠(B) */
.oneband{position:relative;overflow:hidden;background:var(--brand);color:#fff;padding:128px 0}
.oneband .disc{position:absolute;border-radius:50%;pointer-events:none}
.oneband .d1{width:620px;height:620px;left:-170px;top:-220px;background:radial-gradient(circle at 35% 30%,#7FA6FF 0%,#3E68F0 45%,#1C3BC9 100%);box-shadow:inset -30px -40px 80px rgba(4,4,74,.35),0 40px 80px rgba(4,4,74,.22)}
.oneband .d2{width:440px;height:440px;right:-120px;bottom:-200px;background:radial-gradient(circle at 30% 25%,#9CC0FF 0%,#4F7CF6 50%,#2445D6 100%);box-shadow:inset -20px -30px 60px rgba(4,4,74,.3)}
.band-in{position:relative;display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center}
.oneband .label{color:rgba(255,255,255,.7);margin-bottom:20px}
.oneband h2{font-size:clamp(30px,3.6vw,50px);font-weight:700;letter-spacing:-.04em;line-height:1.25}
.band-d{font-size:17px;line-height:1.7;color:rgba(255,255,255,.78);margin-top:20px;max-width:440px}
.band-list{list-style:none;margin-top:40px;border-top:1px solid rgba(255,255,255,.25)}
.band-list a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.25);font-size:17px;font-weight:600;transition:padding .3s var(--ease)}
.band-list a span{font-weight:400;color:rgba(255,255,255,.7);font-size:15px}
.band-list a:hover{padding-left:6px}
.band-img img{width:100%;height:auto;filter:drop-shadow(0 40px 60px rgba(4,4,74,.45))}
/* 페이지 중간 소개 구역(feat)도 같은 파랑 띠로 */
.feat{background:var(--brand);color:#fff;padding:120px 0;margin-top:80px}
.feat .label{color:rgba(255,255,255,.7)}
.feat-h,.feat-h .grad{color:#fff}
.feat-d{color:rgba(255,255,255,.8)}
.feat .btn{background:#fff;color:var(--brand)}
.feat-img{border-radius:20px}
.feat-img.prod img{padding:0;filter:drop-shadow(0 40px 60px rgba(4,4,74,.45))}
.feat + .section{padding-top:140px}
/* 상담 구역: 네이비 띠(B) */
.navy-band{background:var(--navy);color:#fff}
.navy-band .lead{color:rgba(255,255,255,.7)}
.navy-band .phones{border-color:rgba(255,255,255,.18)}
.navy-band .phones a+a{border-color:rgba(255,255,255,.18)}
.navy-band .phones span{color:rgba(255,255,255,.6)}
.navy-band .phones b{color:#fff}
.navy-band .phones a:hover b{color:#9CC0FF}
.navy-band .btn{background:#fff;color:var(--navy)}
.navy-band .link{color:#fff;border-color:#fff}
.navy-band .link:hover{color:#9CC0FF;border-color:#9CC0FF}
@media (max-width:900px){.oneband{padding:88px 0}.band-in{grid-template-columns:1fr;gap:48px}.oneband .d1{width:420px;height:420px}.feat{padding:88px 0}}
@media (max-width:600px){.oneband .d1{left:-220px;top:-240px}.oneband .d2{width:300px;height:300px}.nums .facts-in{grid-template-columns:1fr}.nums .fact+.fact{border-left:0;border-top:1px solid var(--line)}.nums .fact{padding:36px 16px}}
/* 홈 첫 화면: 제목이 두 줄이 되며 기기와 겹치던 것 → 기기 영역을 제목 아래 흐름으로 */
.hero2.hc{height:auto;min-height:0;max-height:none;padding-bottom:104px}
.hc .h2-slides{position:relative;top:auto;bottom:auto;left:auto;right:auto;height:600px;margin-top:64px}
@media (max-width:600px){.hero2.hc{padding-bottom:88px}.hc .h2-in{padding-top:104px}.hc .h2-slides{height:280px;margin-top:40px}}
@media (min-width:601px){.hc .h2-slides{height:660px;-webkit-mask-image:none;mask-image:none}.hero2.hc{padding-bottom:112px}}
/* 히어로 슬라이드 크기: 슬라이드 영역(660px) 안에 기기 전체가 들어가게 */
@media (min-width:601px){.hc .k-tab img{width:min(68vw,900px)}.hc .k-pos img{width:min(56vw,760px)}.hc .k-card img{width:min(32vw,440px)}.hc .k-kiosk img{width:min(22vw,282px)}}
@media (max-width:600px){.hc .k-pos img{width:64vw}.hc .k-card img{width:50vw}.hc .k-kiosk img{width:30vw}}

/* ===== 2026-10-08 토스플레이스 문법: 흰 구역 ↔ 연회색 구역, 강조는 회색 위 흰 카드, 파랑은 버튼에만 ===== */
:root{--ink:#191F28;--gray:#6B7684;--line:#E5E8EB;--g50:#F9FAFB;--g100:#F2F4F6;--g700:#4E5968}
/* 파랑 덜어내기: 작은 머리글·강조 글자·숫자는 검정/회색 */
.label,.st-label,.hgroup,.chain-tag,.own-k small,.bx-k,.a-tag,.fq-cat{color:var(--gray)}
.grad,h1 .grad,.feat-h .grad{color:inherit}
.brand,.page-head .lead b.brand,.mk-lead b{color:inherit}
.link:hover{color:var(--ink);border-color:var(--ink)}
.pcard:hover b,.sib:hover b,.prow:hover .t,.other:hover b,.rows-link a:hover b,.xl:hover b,.fq-head:hover .fq-t{color:var(--ink)}
/* 제품 사진은 연회색 둥근 판 위에 (토스 조합 카드처럼) */
.tile,.sib figure.prod{background:var(--g100)!important;border-radius:24px!important}
#products .pcard figure.tile img{width:82%;height:82%}
/* 파랑 띠 → 연회색 구역 + 흰 카드 */
.oneband{background:var(--g100);color:var(--ink);padding:120px 0}
.oneband .disc{display:none}
.oneband-in,.oneband .band-in{background:#fff;border-radius:28px;padding:64px 64px 64px 72px}
.oneband .label{color:var(--gray)}
.oneband h2{color:var(--ink)}
.oneband .band-d{color:var(--gray)}
.band-list{border-top-color:var(--line)}
.band-list a{border-bottom-color:var(--line);color:var(--ink)}
.band-list a span{color:var(--gray)}
.band-img img{filter:drop-shadow(0 30px 40px rgba(25,31,40,.14))}
.feat{background:var(--g100);color:var(--ink);padding:100px 0;margin-top:80px}
.feat-in{background:#fff;border-radius:28px;padding:56px 56px 56px 64px}
.feat .label{color:var(--gray)}
.feat-h,.feat-h .grad{color:var(--ink)}
.feat-d{color:var(--gray)}
.feat .btn{background:var(--brand);color:#fff}
.feat-img{border-radius:20px}
.feat-img.prod{background:var(--g100)!important}
.feat-img.prod img{padding:8%;filter:none}
.navy-band{background:var(--g100);color:var(--ink)}
.navy-band .lead{color:var(--gray)}
.navy-band .phones{border-color:var(--line);background:#fff;border-radius:24px;border:0}
.navy-band .phones a+a{border-color:var(--line)}
.navy-band .phones span{color:var(--gray)}
.navy-band .phones b{color:var(--ink)}
.navy-band .phones a:hover b{color:var(--brand)}
.navy-band .btn{background:var(--brand);color:#fff}
.navy-band .link{color:var(--ink);border-color:var(--ink)}
.navy-band .link:hover{color:var(--ink);border-color:var(--ink)}
.foot{background:#202632}
@media (max-width:900px){.oneband .band-in,.feat-in{padding:40px 28px}.oneband,.feat{padding:72px 0}}
@media (max-width:600px){.oneband .band-in,.feat-in{border-radius:22px;padding:32px 22px}}
/* 테이블오더 체험 */
.demo-sec{background:var(--g100);padding:120px 0;margin-top:120px}
.demo-frame{margin:56px auto 0;max-width:1080px;background:#1A1C20;border-radius:44px;padding:22px;box-shadow:0 40px 80px rgba(25,31,40,.18)}
.demo-frame iframe{display:block;width:100%;aspect-ratio:16/10;border:0;border-radius:24px;background:#F7F3EC}
.demo-foot{max-width:1080px;margin:24px auto 0;display:flex;align-items:center;gap:24px;font-size:15px;color:var(--gray)}
.demo-foot span{margin-right:auto}
.demo-foot .link{font-size:15px;cursor:pointer;background:none}
@media (min-width:901px){.demo-full{display:none}}
@media (max-width:900px){.demo-sec{padding:72px 0;margin-top:72px}.demo-frame{border-radius:26px;padding:10px}.demo-frame iframe{border-radius:16px}.demo-foot{flex-wrap:wrap;gap:12px 20px}.demo-foot span{flex-basis:100%}}

/* ===== 2026-10-09 깊이(그림자)와 그라데이션 ===== */
:root{
  --sh1:0 1px 2px rgba(25,31,40,.04),0 6px 20px rgba(25,31,40,.05);
  --sh2:0 2px 6px rgba(25,31,40,.06),0 18px 44px rgba(25,31,40,.11);
  --sh-dev:drop-shadow(0 28px 36px rgba(25,31,40,.16)) drop-shadow(0 6px 10px rgba(25,31,40,.08));
  --gr-gray:linear-gradient(180deg,#F7F8FA 0%,#EEF1F4 100%);
  --gr-mint:linear-gradient(120deg,#C9F1EA 0%,#E4F4EE 45%,#F6EEDC 100%);
  --gr-blue:linear-gradient(140deg,#4D82FF 0%,#3366EE 55%,#5E9BFF 100%);
  --gr-peach:linear-gradient(135deg,#FFE9DD 0%,#FFF3E7 55%,#F7F0FF 100%);
}
/* 회색 구역: 위→아래로 아주 옅은 그라데이션 */
.oneband,.feat,.navy-band,.demo-sec,.kit{background:var(--gr-gray)}
/* 흰 카드는 떠 있게 */
.oneband .band-in,.feat-in,.navy-band .phones{box-shadow:var(--sh1)}
.demo-frame{box-shadow:0 50px 90px rgba(25,31,40,.22),0 10px 24px rgba(25,31,40,.12)}
/* 제품 판: 위가 밝은 그라데이션 + 기기 그림자 */
.tile,.sib figure.prod,.feat-img.prod{background:linear-gradient(180deg,#F6F7F9 0%,#ECEFF3 100%)!important}
.tile img,.feat-img.prod img,.sib figure.prod img{filter:var(--sh-dev)}
.pcard figure.tile,.sib figure{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pcard:hover figure.tile,.sib:hover figure{transform:translateY(-6px);box-shadow:var(--sh2)}
.pcard:hover img{transform:none}
.sib figure{border-radius:20px}
/* 기기 사진 그림자 */
.band-img img,.product-hero img{filter:var(--sh-dev)}
.hc .h2-slide img{filter:drop-shadow(0 36px 46px rgba(25,31,40,.18)) drop-shadow(0 8px 12px rgba(25,31,40,.08))}
/* 홈 첫 화면: 기기 뒤로 아주 옅은 빛 */
.hero2.hc{background:radial-gradient(60% 46% at 50% 72%,#EAF0FB 0%,rgba(234,240,251,0) 70%),#fff}
/* 버튼: 은은한 그라데이션 + 그림자 */
.btn{background:linear-gradient(180deg,#4170F0 0%,#2F5BE6 100%);box-shadow:0 6px 16px rgba(50,95,235,.24),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{opacity:1;transform:translateY(-1px);box-shadow:0 10px 24px rgba(50,95,235,.30),inset 0 1px 0 rgba(255,255,255,.14)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:var(--sh1)}
.btn-ghost:hover{background:#fff;box-shadow:var(--sh2)}
/* 사진 카드 모서리 */
.feat-img,.hero-img,.photo{border-radius:24px;overflow:hidden}
.hero-img{box-shadow:var(--sh1)}

/* 홈: 가게에 필요한 모든 것(토스식 카드 묶음) */
.kit{padding:140px 0}
.kit-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1040px;margin:64px auto 0}
.kc{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:360px;padding:40px 40px 0;border-radius:28px;background:#fff;box-shadow:var(--sh1);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.kc:hover{transform:translateY(-6px);box-shadow:var(--sh2)}
.kc-wide{grid-column:1/-1;flex-direction:row;align-items:center;min-height:260px;padding:44px 52px}
.kc-t b{display:block;font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.03em;line-height:1.35;color:var(--ink)}
.kc-more{display:inline-block;margin-top:14px;font-size:15px;color:var(--gray)}
.g-mint{background:var(--gr-mint)}
.g-peach{background:var(--gr-peach)}
.g-blue{background:var(--gr-blue)}
.g-blue .kc-t b{color:#fff}.g-blue .kc-more{color:rgba(255,255,255,.8)}
.kc-apps{display:flex;gap:16px}
.kc-apps img{width:96px;height:96px;border-radius:26px;object-fit:cover;box-shadow:0 14px 30px rgba(25,31,40,.14);background:#fff}
.kc-apps img:nth-child(2){transform:translateY(-14px)}.kc-apps img:nth-child(4){transform:translateY(-10px)}
.kc-pills{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:40px}
.kc-pills li{background:#fff;color:var(--ink);font-size:15px;font-weight:600;padding:12px 18px;border-radius:14px;box-shadow:0 10px 24px rgba(4,4,74,.18)}
.kc-pills li:nth-child(2){margin-left:28px}.kc-pills li:nth-child(3){margin-left:12px}.kc-pills li:nth-child(4){margin-left:40px}
.kc-pic{margin:0 -40px;height:190px;overflow:hidden;border-radius:0}
.kc-pic img{width:100%;height:100%;object-fit:cover}

.kc-photo{padding:0;justify-content:flex-end}
.kc-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,31,40,0) 35%,rgba(25,31,40,.62) 100%)}
.kc-photo .kc-t{position:relative;z-index:1;padding:40px}
.kc-photo .kc-t b{color:#fff}.kc-photo .kc-more{color:rgba(255,255,255,.82)}
.kc-num{padding-bottom:44px}
.kc-num strong{display:block;font-size:84px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.kc-num strong small{font-size:30px;margin-left:4px;letter-spacing:-.02em}
.kc-num span{display:block;margin-top:10px;color:var(--gray);font-size:15px}
.kit-more{margin-top:48px}
@media (max-width:900px){.kit{padding:88px 0}.kit-grid{grid-template-columns:1fr;gap:14px;margin-top:44px}.kc-wide{flex-direction:column;align-items:flex-start;padding:36px 28px 32px}.kc{padding:32px 28px 0;min-height:300px;border-radius:24px}.kc-pic{margin:0 -28px}.kc-photo{padding:0}.kc-photo .kc-t{padding:32px 28px}.kc-apps img{width:68px;height:68px;border-radius:18px}}
.navy-band{background:#fff}
.navy-band .phones{box-shadow:var(--sh2)}
@media (max-width:600px){.kc-apps{gap:10px}.kc-apps img{width:58px;height:58px;border-radius:16px}.kc-apps img:nth-child(2),.kc-apps img:nth-child(4){transform:translateY(-8px)}}
/* FAQ: 둥근 검색창 · 알약 분류 (목록은 선으로) */
.fsearch input{border:0;background:#F2F4F6;border-radius:18px;padding:20px 24px;font-size:17px;transition:background .2s,box-shadow .2s}
.fsearch input:focus{background:#fff;box-shadow:0 0 0 2px var(--ink)}
.fcats{gap:8px;margin-bottom:28px}
.fcat{padding:9px 16px;border-radius:999px;background:#F2F4F6;font-size:14px;font-weight:400;color:var(--g700)}
.fcat span{font-weight:400;color:var(--gray);margin-left:4px}
.fcat.on{background:var(--ink);color:#fff;text-decoration:none}
.fcat.on span{color:rgba(255,255,255,.6)}
.fq-head:hover .fq-t{color:var(--ink)}
.product-hero{margin-top:64px}
.chain li.on i{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 6px rgba(25,31,40,.08)}
.chain li.on b{color:var(--ink)}
.chain.reveal ol::after{background:var(--ink)}
.chain-tag{color:var(--ink);font-size:15px;letter-spacing:0;font-weight:700}
.map-wrap .centers li.active b{color:var(--brand)}
.pin .dot{fill:var(--ink)}.pin .pulse{fill:var(--brand)}.pin.active .dot{fill:var(--brand)}
.pin .plabel{font-size:15px;font-weight:700;fill:var(--gray);pointer-events:none}.pin.active .plabel{fill:var(--brand)}

/* ===== 2026-10-09 상자 걷어내기: 강조는 회색 '구역' 바탕만, 카드·판·테두리 상자 없음 ===== */
.oneband .band-in,.feat-in{background:none;border-radius:0;padding:0;box-shadow:none}
.navy-band .phones,.phones{background:none;border-radius:0;box-shadow:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tile,.sib figure.prod,.feat-img.prod{background:none!important;border-radius:0!important}
.pcard:hover figure.tile,.sib:hover figure.prod{box-shadow:none}
.feat-img.prod img{padding:0}
.feat-img:not(.prod){box-shadow:0 24px 50px rgba(25,31,40,.14)}
/* 홈 창업·마케팅: 사진 + 제목 + 링크 (카드 아님) */
.kit-grid{grid-template-columns:repeat(3,1fr);gap:44px 28px;max-width:1136px}
.kc,.kc-wide,.kc-photo{display:flex;flex-direction:column;justify-content:flex-start;gap:0;min-height:0;padding:0!important;background:none!important;border-radius:0;box-shadow:none;overflow:visible;grid-column:auto}
.kc:hover{transform:none;box-shadow:none}
.kc .shot{display:block;aspect-ratio:4/3;border-radius:20px;overflow:hidden;box-shadow:0 18px 40px rgba(25,31,40,.12);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.kc .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.kc:hover .shot{transform:translateY(-6px);box-shadow:0 28px 56px rgba(25,31,40,.16)}
.kc:hover .shot img{transform:scale(1.04)}
.kc .kc-t{padding:22px 2px 0}
.kc .kc-t b{color:var(--ink)!important;font-size:21px}
.kc .kc-t p{font-size:15px;color:var(--gray);line-height:1.6;margin-top:8px}
.kc .kc-more{color:var(--gray)!important}
@media (max-width:900px){.kit-grid{grid-template-columns:1fr 1fr;gap:36px 16px}}
@media (max-width:600px){.kit-grid{grid-template-columns:1fr}}
/* 숫자 4개 줄 · 연혁 */
.facts-in.n4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.facts-in.n4{grid-template-columns:1fr 1fr}.facts-in.n4 .fact:nth-child(3){border-left:0}.facts-in.n4 .fact:nth-child(n+3){border-top:1px solid var(--line)}}
.history{list-style:none;margin-top:16px}
.history li{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:30px 0;border-bottom:1px solid var(--line);align-items:baseline}
.history b{font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.03em}
.history strong{display:block;font-size:20px;font-weight:700}
.history p{color:var(--gray);margin-top:6px}
@media (max-width:600px){.history li{grid-template-columns:1fr;gap:6px;padding:24px 0}}
/* 고객센터: 운영 시간 · 신청 안내 · 회색 구역 */
.hours{margin-top:24px;font-size:15px;color:var(--gray);line-height:1.8}
.gray-band{background:var(--gr-gray)}
.rules{gap:64px;margin-top:40px;align-items:start}
.rules .hgroup{color:var(--ink);font-size:17px;letter-spacing:0;margin-bottom:8px}
.rules .tbl{margin-top:16px}
/* 세로 체험(웨이팅) */
.demo-frame.tall{max-width:540px;border-radius:40px}
.demo-frame.tall iframe{aspect-ratio:10/16}
.demo-foot.tall{max-width:540px;flex-wrap:wrap;gap:12px 20px}.demo-foot.tall span{flex-basis:100%}

/* 고객센터 A/S 진행 상태 조회 (왼쪽 단, 박스 없이 구분선만) */
.form.lookup{margin:56px 0 0;gap:20px;max-width:none}
.form.lookup .hgroup{margin:0;color:var(--ink);font-size:17px;font-weight:700;letter-spacing:0}
.form.lookup .btn{align-self:flex-start}
.form.lookup .form-msg{text-align:left;min-height:0}
.as-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.as-list li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.as-list b{font-size:16px;color:var(--ink)}
.as-list li.done b{color:var(--gray)}
.as-list span{font-size:15px;color:var(--ink)}
.as-list small{grid-column:1/-1;font-size:13px;color:var(--gray);margin-top:4px}

/* 인터넷: 통신 3사 로고 줄 · 통신사별 안내 (박스 없이 윗선만) */
.carrier-strip{max-width:1136px;margin:44px auto 0;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:20px 32px;flex-wrap:wrap}
.carrier-strip span{font-size:15px;color:var(--gray)}
.carrier-strip div{display:flex;align-items:center;gap:36px}
.carrier-strip img{height:30px;width:auto}
.carriers{display:grid;grid-template-columns:repeat(3,1fr);column-gap:48px}
.carrier{padding-top:32px}
.carrier img{height:40px;width:auto;display:block}
.carrier b{display:block;font-size:20px;margin-top:26px}
.carrier ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.carrier li{font-size:15px;color:var(--gray);line-height:1.5}
.carriers+.rows{margin-top:64px}
@media(max-width:860px){.carriers{grid-template-columns:1fr;row-gap:40px}.carrier-strip img{height:24px}.carrier-strip div{gap:24px}}

/* 짧은 목록(2~4줄)은 넓은 화면에서 가로 칸으로, 긴 목록(5줄~)은 두 단으로 — 한 줄에 글자가 적어 허전해 보이던 것 정리 */
@media(min-width:861px){
  .wrap:not(.two)>.rows:not(.rows-link):has(>li:nth-child(2):last-child){--n:2}
  .wrap:not(.two)>.rows:not(.rows-link):has(>li:nth-child(3):last-child){--n:3}
  .wrap:not(.two)>.rows:not(.rows-link):has(>li:nth-child(4):last-child){--n:4}
  .wrap:not(.two)>.rows:not(.rows-link):is(:has(>li:nth-child(2):last-child),:has(>li:nth-child(3):last-child),:has(>li:nth-child(4):last-child)){display:grid;grid-template-columns:repeat(var(--n),1fr);column-gap:40px;border-top:0}
  .wrap:not(.two)>.rows:not(.rows-link):is(:has(>li:nth-child(2):last-child),:has(>li:nth-child(3):last-child),:has(>li:nth-child(4):last-child)) li{flex-direction:column;align-items:flex-start;gap:10px;padding:28px 0 4px;border-bottom:0;border-top:1px solid var(--line)}
  .wrap:not(.two)>.rows:not(.rows-link):is(:has(>li:nth-child(2):last-child),:has(>li:nth-child(3):last-child),:has(>li:nth-child(4):last-child)) b{white-space:normal;font-size:19px}
  .wrap:not(.two)>.rows:not(.rows-link):is(:has(>li:nth-child(2):last-child),:has(>li:nth-child(3):last-child),:has(>li:nth-child(4):last-child)) span{text-align:left;font-size:15px;line-height:1.55}
  .wrap:not(.two)>.rows:not(.rows-link):has(>li:nth-child(5)){display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
}

/* 제품: 이런 매장에 추천해요 — 매장 유형 사진 + 제목 + 설명 (칸 수 = 항목 수) */
.fitgrid{list-style:none;margin-top:40px;display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:40px 28px}
.fitgrid.n2{--n:2}.fitgrid.n3{--n:3}.fitgrid.n4{--n:4}
.fitgrid figure{aspect-ratio:4/3;border-radius:20px;overflow:hidden;box-shadow:0 18px 40px rgba(25,31,40,.10);margin-bottom:22px}
.fitgrid figure img{width:100%;height:100%;object-fit:cover;display:block}
.fitgrid b{display:block;font-size:19px}
.fitgrid span{display:block;font-size:15px;color:var(--gray);margin-top:8px;line-height:1.55}
.fitgrid li:not(:has(figure)){padding-top:24px;border-top:1px solid var(--line)}
@media(max-width:860px){.fitgrid{grid-template-columns:1fr 1fr;gap:32px 16px}.fitgrid figure{border-radius:14px;margin-bottom:14px}.fitgrid b{font-size:16px}}




/* 업종별 추천 조합: 업종 탭 + 기기 묶음 사진(이름표) + 기기별 기능 + 상담 버튼 */
.ctabs2{display:flex;gap:8px 28px;flex-wrap:wrap;margin-top:8px;border-bottom:1px solid var(--line)}
.ctab2{font:inherit;font-size:17px;font-weight:700;color:var(--gray);background:none;border:0;padding:14px 0;margin-bottom:-1px;border-bottom:2px solid transparent;cursor:pointer}
.ctab2.on{color:var(--ink);border-bottom-color:var(--ink)}
.cpanel{display:none;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;padding-top:48px}
.cpanel.on{display:grid;animation:cfade .4s ease}
@keyframes cfade{from{opacity:0;transform:translateY(8px)}}
.cpic{position:relative;margin:0}
.cpic img{width:100%;height:auto;display:block}
.ctag{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;font-size:13px;font-weight:700;color:var(--ink);background:#fff;padding:7px 12px;border-radius:999px;box-shadow:0 6px 18px rgba(25,31,40,.12)}
.cinfo .label{margin:0}
.cinfo h3{font-size:clamp(26px,2.6vw,34px);line-height:1.3;letter-spacing:-.02em;margin-top:12px}
.ctitle{font-size:16px;font-weight:700;margin-top:18px}
.cdesc{font-size:15px;color:var(--gray);margin-top:6px}
.cgrps{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin:28px 0 32px;padding-top:24px;border-top:1px solid var(--line)}
.cgrp b{display:block;font-size:15px}
.cgrp ul{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:5px}
.cgrp li{font-size:14px;color:var(--gray);padding-left:14px;position:relative}
.cgrp li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--ink)}
@media(max-width:900px){.cpanel{grid-template-columns:1fr;gap:28px;padding-top:32px}.ctag{font-size:11px;padding:5px 9px}.ctabs2{gap:4px 20px}.ctab2{font-size:15px}}

/* 하단 빠른 상담 바 (페이히어식) — 흰 반투명, 첫 화면 지나면 올라옴 */
.qbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(25,31,40,.07);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.qbar.show{transform:none}
.qbar-in{max-width:1188px;margin:0 auto;padding:12px 56px 12px 24px;display:flex;align-items:center;gap:20px;position:relative}
.qbar-t{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.qbar-t b{font-size:16px}.qbar-t span{font-size:14px;color:var(--gray)}
.qbar-open{display:none}
.qbar-f{display:flex;align-items:center;gap:10px;margin-left:auto}
.qbar-f input:not([type=checkbox]){height:44px;width:150px;border:0;border-radius:12px;background:var(--g100,#F2F4F6);padding:0 14px;font:inherit;font-size:15px;color:var(--ink);outline:none}
.qbar-f input.err{box-shadow:inset 0 0 0 1.5px var(--brand)}
.qbar-f .btn{height:44px;padding:0 22px;font-size:15px}
.qbar-agree{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--gray);white-space:nowrap}
.qbar-agree a{color:inherit;text-decoration:underline}
.qbar-msg{position:absolute;right:56px;bottom:calc(100% + 8px);font-size:13px;background:#fff;padding:6px 12px;border-radius:999px;box-shadow:0 6px 18px rgba(25,31,40,.1)}
.qbar-msg:empty{display:none}.qbar-msg.bad{color:var(--brand)}.qbar-msg.ok{font-weight:700}
.qbar-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;font-size:22px;color:var(--gray);cursor:pointer}
body.has-qbar footer::after{content:"";display:block;height:72px}
@media(max-width:980px){.qbar-t span{display:none}.qbar-f input:not([type=checkbox]){width:120px}}
@media(max-width:860px){
  .qbar-in{padding:10px 52px 10px 16px;flex-wrap:wrap;gap:10px}
  .qbar-f{display:none}.qbar-open{display:inline-flex;margin-left:auto;height:42px;padding:0 18px;font-size:15px}
  .qbar.open .qbar-t,.qbar.open .qbar-open{display:none}
  .qbar.open .qbar-f{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin:0}
  .qbar.open .qbar-f input:not([type=checkbox]){width:100%}
  .qbar.open .qbar-agree{grid-column:1/-1}.qbar.open .qbar-f .btn{grid-column:1/-1}
  .qbar-msg{right:16px}
}

/* 매장 한 곳 그림 + 기기 이름표(누르면 해당 페이지) */
.iso-map{position:relative;max-width:1136px;margin:56px auto 0}
.iso-map img{width:100%;height:auto;display:block}
.iso-map figcaption{text-align:center;font-size:14px;color:var(--gray);margin-top:8px}
.ipin{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,calc(-100% + 5px));text-decoration:none;z-index:1}
.ipin::before{content:"";order:2;width:1.5px;height:22px;background:var(--ink)}
.ipin::after{content:"";order:3;width:10px;height:10px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px rgba(255,255,255,.9);animation:pinpulse 2.4s ease-in-out infinite}
.ipin span{order:1;background:#fff;color:var(--ink);font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;box-shadow:0 6px 18px rgba(25,31,40,.14);white-space:nowrap;transition:background .2s,color .2s}
.ipin:hover span,.ipin:focus-visible span{background:var(--ink);color:#fff}
.ipin.down{transform:translate(-50%,-5px)}
.ipin.down::before{order:2}.ipin.down::after{order:1}.ipin.down span{order:3}
@keyframes pinpulse{50%{box-shadow:0 0 0 7px rgba(255,255,255,.6)}}
@media(max-width:860px){.ipin span{font-size:10.5px;padding:4px 7px}.ipin::before{height:12px}.ipin::after{width:7px;height:7px;box-shadow:0 0 0 3px rgba(255,255,255,.9)}.iso-map{margin-top:32px}}
@media(prefers-reduced-motion:reduce){.ipin::after{animation:none}}
@media(min-width:861px){.tbl td:first-child{white-space:nowrap}}

/* 홈 고민 찾기: 답마다 맞는 기기 사진 */
.ans:has(.a-pic){display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px;max-width:980px;margin-left:auto;margin-right:auto;text-align:left}
.a-pic{margin:0;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.a-pic img{max-width:100%;max-height:100%;object-fit:contain;animation:cfade .4s ease}
.ans:has(.a-pic) .a-txt{animation:cfade .4s ease}
@media(max-width:860px){.ans:has(.a-pic){grid-template-columns:1fr;gap:20px;text-align:center}.a-pic{max-width:300px;margin:0 auto}}
.answer:has(.a-pic){max-width:1040px}
.ans:has(.a-pic) .a-title{font-size:clamp(26px,2.6vw,36px)}

/* 회사소개 */
.about-intro{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center;margin-top:8px}
.about-pic{margin:0;aspect-ratio:4/3;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px rgba(25,31,40,.12)}
.about-pic img{width:100%;height:100%;object-fit:cover;display:block}
.trust{display:grid;grid-template-columns:repeat(4,1fr);margin-top:16px}
.trust .fact{padding:28px 0;text-align:left}
.trust .fact b{font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:-.03em;display:block}
.trust .fact span{font-size:15px;color:var(--gray);display:block;margin-top:6px}
.about-mission{margin-top:64px;padding-top:32px;border-top:1px solid var(--line);display:grid;gap:14px}
.about-mission p{font-size:18px;line-height:1.6}
.about-mission .st-label{display:inline-block;width:96px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--gray)}
@media(max-width:860px){.about-intro{grid-template-columns:1fr;gap:28px}.trust{grid-template-columns:1fr 1fr}.about-mission .st-label{display:block;width:auto;margin-bottom:4px}}
.cpic-wide{max-width:880px;margin:32px auto 8px}
.mk-how{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;margin-top:8px}
.mk-how .rows-link a{flex-direction:column;align-items:flex-start;gap:6px}
.mk-how .rows-link span{text-align:left}
@media(max-width:860px){.mk-how{grid-template-columns:1fr;gap:24px}}

/* SNS 채널 로고 줄 (공식 로고, 박스 없이) */
.sns-logos{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:32px 24px;margin-top:48px;align-items:end}
.sns-logos li{display:flex;flex-direction:column;align-items:center;gap:14px}
.sns-logos img{display:block;width:auto}
.sns-logos img.sq{height:56px}
.sns-logos img.wd{height:30px;margin:13px 0}
.sns-logos span{font-size:15px;color:var(--gray)}
@media(max-width:860px){.sns-logos{grid-template-columns:repeat(3,1fr)}.sns-logos img.sq{height:44px}.sns-logos img.wd{height:22px;margin:11px 0}}
.ic-inline{display:inline-block;height:22px;width:auto;vertical-align:-5px;margin-right:8px}
.ic-inline.wd{height:15px;vertical-align:-2px}

/* 흐름도(chain) 개편: 점을 칸 가운데로 → 그래프가 가운데 정렬, 강조 점은 파랑 + 퍼지는 움직임, 선은 파랗게 그려지고 빛이 흐름 */
@media (min-width:601px){
  .chain ol{display:grid;grid-template-columns:repeat(var(--n),1fr)}
  .chain li,.chain li:last-child{align-items:center;text-align:center;padding:0 8px;flex:none}
  .chain i{margin:0 auto 16px}
  .chain ol::before{left:calc(50% / var(--n));right:calc(50% / var(--n));top:6px;height:2px;background:var(--line)}
  .chain.reveal ol::after{left:calc(50% / var(--n));top:6px;height:2px;width:0;
    background:linear-gradient(90deg,var(--brand) 0%,var(--brand2) 45%,#fff 50%,var(--brand2) 55%,var(--brand) 100%);background-size:300% 100%;
    transition:width 1.4s var(--ease) .3s}
  .chain.reveal.in ol::after{width:calc(100% - 100% / var(--n));animation:chainflow 3.2s linear 1.8s infinite}
}
.chain li.on i{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 16%,transparent);animation:chainpulse 2.2s ease-out infinite}
.chain li.on b{color:var(--brand)}
.chain i{transition:background .4s,border-color .4s}
.chain.reveal.in li:not(.on) i{border-color:color-mix(in srgb,var(--brand) 55%,var(--gray));background:#fff}
@media (max-width:600px){.chain.reveal ol::after{background:var(--brand)}}
@keyframes chainflow{from{background-position:100% 0}to{background-position:0 0}}
@keyframes chainpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 40%,transparent)}70%{box-shadow:0 0 0 12px color-mix(in srgb,var(--brand) 0%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.chain li.on i,.chain.reveal.in ol::after{animation:none}}

/* 작은 사진 + 글 2열 목록 (사진 4칸이 연달아 나오지 않게) */
.mrows{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:28px 48px;margin-top:8px}
.mrows li{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}
.mrows figure{margin:0;aspect-ratio:4/3;border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(25,31,40,.10)}
.mrows img{width:100%;height:100%;object-fit:cover;display:block}
.mrows b{display:block;font-size:18px}
.mrows span{display:block;font-size:15px;color:var(--gray);margin-top:8px;line-height:1.6}
@media(max-width:860px){.mrows{grid-template-columns:1fr;gap:0}.mrows li{grid-template-columns:130px 1fr;gap:16px}}

/* 표: 첫 칸(이름)은 왼쪽, 짧은 값 칸은 가운데 — 사양표 · 비교표 */
.tbl-c th:not(:first-child),.tbl-c td:not(:first-child){text-align:center}
.tbl-c td:first-child{font-weight:700}
.tbl-c td{vertical-align:middle}
.tbl-c .wide{text-align:left!important}
.tbl th.c,.tbl td.c{text-align:center}
@media(min-width:861px){.tbl td.c{white-space:nowrap}.tbl td:first-child{font-weight:700}}
/* 주요 사양: 기기 그림 + 사양 목록 */
.spec-two{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.spec-pic{margin:0;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.spec-pic img{max-width:88%;max-height:88%;object-fit:contain}
.spec-two .rows li{flex-direction:row}
@media(max-width:860px){.spec-two{grid-template-columns:1fr;gap:16px}.spec-pic{max-width:280px;margin:0 auto}}
/* 사진 칸 안의 기기 그림(투명 배경)은 잘리지 않게 */
.fitgrid figure:has(img[src*="/assets/product/"]) img{object-fit:contain;padding:6%}
/* 설치 움짤(3:2)은 자르지 않게 */
.fitgrid figure:has(img[src*="/assets/anim/"]){aspect-ratio:3/2}

/* 모바일: 문장 속 밑줄 링크는 보이지 않는 터치 영역만 넓힘(글자 · 밑줄 위치와 줄 배치는 그대로) */
@media(max-width:860px){
  :is(p,td,small)>a:not(.btn),.note a,.agree-more,button.link-plain{position:relative}
  :is(p,td,small)>a:not(.btn)::before,.note a::before,.agree-more::before,button.link-plain::before{content:"";position:absolute;inset:-12px -6px}
}
/* 표: 가운데 정렬은 넓은 화면에서만(모바일 카드형 표는 모두 왼쪽) */
@media(max-width:860px){.tbl th.c,.tbl td.c{text-align:left}}
/* 사진 칸: 폰에서는 한 줄에 하나, 작은 사진 + 글 가로 배치(긴 설명이 좁은 칸에 끼지 않게) */
@media(max-width:600px){
  .fitgrid,.fitgrid.n2,.fitgrid.n3,.fitgrid.n4{grid-template-columns:1fr;gap:18px}
  .fitgrid li{display:grid;grid-template-columns:44% 1fr;column-gap:14px;align-items:center}
  .fitgrid figure{margin:0;grid-row:span 2}
  .fitgrid b{align-self:end}.fitgrid span{align-self:start;margin-top:4px}
}
/* 카드단말기 사양표: 칸 너비 고정(줄바꿈 줄이기) */
@media(min-width:861px){
  .tbl-spec table{table-layout:fixed;width:100%}
  .tbl-spec th:nth-child(1){width:14%}.tbl-spec th:nth-child(2){width:12%}.tbl-spec th:nth-child(3){width:13%}
  .tbl-spec th:nth-child(4){width:13%}.tbl-spec th:nth-child(5){width:26%}.tbl-spec th:nth-child(6){width:22%}
  .tbl-spec td{padding-right:14px}
}

/* 10/10 전수 점검 반영 */
.mk-how .rows li{flex-direction:column;align-items:flex-start;gap:6px}
.mk-how .rows li span{text-align:left}
.sns-cap{align-items:start}
.sns-cap li span{color:var(--ink);font-weight:600}
.sns-cap li small{font-size:13px;color:var(--gray);text-align:center;line-height:1.45;margin-top:-6px}
.bgrid{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:36px 40px;align-items:center;margin-top:48px}
.bgrid li{display:flex;justify-content:center}
.bgrid img{height:46px;width:100%;max-width:150px;object-fit:contain}
@media(max-width:600px){.bgrid{grid-template-columns:repeat(3,1fr);gap:24px 20px}.bgrid img{height:34px}}
.fitgrid em.for{display:block;font-style:normal;font-size:13px;font-weight:600;color:var(--ink);margin-top:10px}
.steps b .step-a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid var(--ink)}
.steps b .step-a i{font-style:normal;font-size:14px}
.tbl-kv td:first-child{font-weight:600;width:34%}
.nw{white-space:nowrap}
.rows-2{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
@media(max-width:860px){.rows-2{grid-template-columns:1fr}}
.rows-link a[href$=".apk"]{position:relative;padding-right:104px}
.rows-link a[href$=".apk"]::after{content:"내려받기 ↓";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:14px;font-weight:600;color:var(--ink)}
.mk-how.rules{grid-template-columns:.8fr 1.2fr}
@media(max-width:860px){.mk-how.rules{grid-template-columns:1fr}}
/* 홈 ONE STOP: 주문이 이어지는 순서 (선은 파란색이 흘러감) */
.oneband .band-in{grid-template-columns:1fr 1.25fr}
.flow4{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;--h:150px}
.flow4 a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink);text-decoration:none}
.flow4 img{height:var(--h);width:100%;object-fit:contain;transition:transform .5s var(--ease)}
.flow4 a:hover img{transform:translateY(-4px)}
.flow4 i{width:12px;height:12px;border-radius:50%;background:var(--ink);margin:18px 0 14px;box-shadow:0 0 0 5px var(--g100)}
.flow4 a:last-child i{background:var(--brand);animation:chainpulse 2.2s ease-out infinite}
.flow4 b{font-size:16px}
.flow4 span{font-size:13px;color:var(--gray);margin-top:2px}
.flow4::before,.flow4::after{content:"";position:absolute;left:12.5%;top:calc(var(--h) + 23px);height:2px}
.flow4::before{right:12.5%;background:var(--line)}
.flow4::after{width:0;background:linear-gradient(90deg,var(--brand),var(--brand2) 45%,#fff 50%,var(--brand2) 55%,var(--brand));background-size:300% 100%;transition:width 1.6s var(--ease) .3s}
.flow4.in::after{width:75%;animation:chainflow 3.2s linear 1.9s infinite}
@media(max-width:900px){.oneband .band-in{grid-template-columns:1fr}}
@media(max-width:600px){.flow4{--h:72px;gap:4px}.flow4 b{font-size:14px}.flow4 span{font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.flow4.in::after{animation:none}.flow4 a:last-child i{animation:none}}
.a-photo img{width:100%;height:100%;object-fit:cover;border-radius:20px}
.cap-note{display:inline-block;margin-top:10px;font-size:14px;color:var(--gray)}
.st-chain{margin:56px 0 8px}
.dl-grid li>a{display:contents;color:inherit;text-decoration:none}
.dl-grid em.dl{display:inline-block;font-style:normal;font-size:14px;font-weight:600;color:var(--ink);margin-top:12px;border-bottom:1px solid var(--ink)}
.dl-grid li:hover em.dl{color:var(--brand);border-color:var(--brand)}
.rows-stack li{flex-direction:column;align-items:flex-start;gap:6px}
.rows-stack li>span{text-align:left}
.app-ics{display:flex;gap:6px;margin-bottom:8px}
.app-ics img{width:28px;height:28px;border-radius:8px}
.app-ics-lg img{width:44px;height:44px;border-radius:12px}.app-ics-lg{gap:10px}
.nf-links{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:56px;font-size:15px}.nf-links a{color:var(--gray)}.nf-links a:hover{color:var(--ink)}
.about-pic.prod{box-shadow:none;border-radius:0;overflow:visible}.about-pic.prod img{object-fit:contain;padding:4%}
@media(max-width:600px){.phones a{padding:18px 0}}

/* ===== 2026-10-10 공식 로고: payplay (Pretendard Black) 단색 + pay 위 점 셋(하늘 · 파랑 · 네이비). 공식 로고에는 그라데이션을 넣지 않는다 ===== */
:root{--sky:#7CC0FF;--brand2:#5B9DFF;--navy:#18268A}
.wordmark{font-weight:900;font-size:25px;letter-spacing:-.05em;line-height:1;white-space:nowrap;color:var(--ink)}
.wm-pay{position:relative;display:inline-block}
.wm-pay i{position:absolute;top:.115em;width:.135em;height:.135em;border-radius:50%}
.wm-pay i:nth-child(1){left:.2545em;background:var(--sky)}
.wm-pay i:nth-child(2){left:.7865em;background:var(--brand)}
.wm-pay i:nth-child(3){left:1.3245em;background:var(--navy)}
.foot-top .wordmark{font-size:30px}
@media (max-width:600px){.foot-top .wordmark{font-size:26px}}
.wordmark.wordmark-w{color:#fff}
.wordmark-w .wm-pay i:nth-child(1){background:#A9D3FF}.wordmark-w .wm-pay i:nth-child(2){background:#6FA8FF}.wordmark-w .wm-pay i:nth-child(3){background:var(--brand)}

/* 그라데이션 큰 글씨(Black): 민트 · 파랑 · 보라가 왼쪽 위로 이어지는 Hypercolor 참고 색상 */
/* 그라데이션 큰 글씨는 홈 핵심 문구에만(.gtype). 하위 페이지 제목 강조 줄은 그라데이션 없이 */
h1 .grad{background:none;color:var(--ink);-webkit-text-fill-color:currentColor;font-weight:700;animation:none}
.gtype{font-weight:900;letter-spacing:-.05em;
  background-image:linear-gradient(to left top, rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  display:inline-block;padding:0 .04em .1em;margin-bottom:-.1em}
.gtype-glow{filter:drop-shadow(0 .1em .24em rgba(47,98,255,.24))}

/* 현재 화면에서 읽는 약관 · 개인정보처리방침 */
html.legal-open{overflow:hidden;scrollbar-gutter:stable}
.legal-dialog{width:min(800px,calc(100% - 48px));max-height:min(800px,calc(100dvh - 64px));margin:auto;padding:0;border:0;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 24px 80px rgba(25,31,40,.2)}
.legal-dialog[open]{display:flex;flex-direction:column}
.legal-dialog::backdrop{background:rgba(25,31,40,.48)}
.legal-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:none;padding:24px 32px;border-bottom:1px solid var(--line)}
.legal-dialog-head h2{font-size:24px;line-height:1.4;letter-spacing:-.03em}
.legal-close{width:44px;height:44px;flex:none;border:0;border-radius:12px;background:var(--g100,#F2F4F6);color:var(--ink);font:inherit;font-size:28px;cursor:pointer}
.legal-close:focus-visible,.legal-scroll:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.legal-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:28px 32px 40px}
.legal-document{font-size:15px;line-height:1.85;overflow-wrap:anywhere;word-break:keep-all}
.legal-document h2{font-size:18px;line-height:1.5;margin:32px 0 14px;font-weight:700;letter-spacing:-.02em}
.legal-document h2:first-child{margin-top:0}
.legal-document p{margin:0 0 18px}
#legalStatus{font-size:15px;line-height:1.7;color:var(--gray)}
#legalFallback{display:inline-block;margin-top:16px;color:var(--brand);text-decoration:underline}
#legalFallback[hidden]{display:none}
.legal-page{padding:124px 0 96px}
.legal-page-in{max-width:848px}
.legal-page h1{font-size:36px;letter-spacing:-.04em;margin:24px 0}
.legal-back{font-size:15px;color:var(--gray)}
.legal-links{display:flex;gap:24px;border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:36px;font-size:15px;color:var(--gray)}
.legal-links a[aria-current]{color:var(--brand);font-weight:700}
@media(max-width:600px){
  .legal-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);border-radius:20px}
  .legal-dialog-head{padding:16px 20px;gap:12px}
  .legal-dialog-head h2{font-size:20px}
  .legal-scroll{padding:24px 20px 32px}
  .legal-page{padding:104px 0 64px}
  .legal-page h1{font-size:30px}
}
/* 순서 없는 목록 번호는 숨김(손으로 쓴 페이지 포함) */
.svc .n,.cols3 .n{display:none}

/* ===== 2026-10-10 v2 하위 페이지 공통: 큰 구역 제목 · 흰색/연회색 띠(빌드 때 자동으로 번갈아) · 아이콘 카드 · 세 칸 목록 · 큰 글씨 문구 ===== */
:root{--band:#F5F6F8}
.section{padding:128px 0}
.section.tight-top{padding-top:56px}
.section.v2-band,.section.gray-band.v2-band{background:var(--band)}
.sec-head{border-bottom:0;padding-bottom:0;align-items:flex-end}
.sec-head h2{font-size:clamp(28px,3.1vw,42px);font-weight:700;letter-spacing:-.035em;line-height:1.3}
.sec-note{font-size:15px}
/* 문구 띠: 사진 없이 큰 글씨, 둘째 줄 그라데이션 Black */
.feat.say-band{background:none;margin:0;padding:150px 0;text-align:center;color:var(--ink)}
.feat.say-band.v2-band{background:var(--band)}
.say-band .st-h{font-size:clamp(34px,5vw,68px);font-weight:700;letter-spacing:-.045em;line-height:1.22}
.say-band .st-d{max-width:640px;margin:28px auto 0;font-size:18px;color:var(--gray);line-height:1.7}
.say-band .hero-cta{justify-content:center;margin-top:36px}
/* 아이콘 카드: 상자 없이 위 선 + Lucide 아이콘 */
.icards{display:grid;gap:48px 32px;margin-top:48px}
.icards.c1{grid-template-columns:1fr}.icards.c2{grid-template-columns:repeat(2,1fr)}.icards.c3{grid-template-columns:repeat(3,1fr)}.icards.c4{grid-template-columns:repeat(4,1fr)}
.icard{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:2px solid var(--ink);color:var(--ink);min-width:0}
.icard-ic{display:block;width:40px;height:40px;color:var(--brand);margin-bottom:14px}
.icard-ic .ic{width:100%;height:100%;display:block}
.icard b{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:19px;letter-spacing:-.02em;transition:color .2s}
.icard b i{font-style:normal;font-weight:400;transition:transform .3s var(--ease)}
.icard>span:last-child{font-size:15px;color:var(--gray);line-height:1.55}
.icard:hover b{color:var(--brand)}.icard:hover b i{transform:translateX(4px)}
/* 순서 없는 목록(svc) → 세 칸, 위 선 */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px;margin-top:48px}
.svc.svc-2{grid-template-columns:repeat(2,1fr)}
.svc li{display:block;padding:24px 0 0;border-top:2px solid var(--ink);border-bottom:0}
.svc b{display:block;font-size:20px;margin-bottom:10px}
.svc p{font-size:16px;line-height:1.65}
@media(max-width:900px){
  .section{padding:88px 0}.section.tight-top{padding-top:40px}
  .feat.say-band{padding:96px 0}
  .icards.c3,.icards.c4{grid-template-columns:repeat(2,1fr)}
  .svc,.svc.svc-2{grid-template-columns:1fr;gap:32px}
}
@media(max-width:600px){.icards.c2,.icards.c3,.icards.c4{grid-template-columns:1fr 1fr;gap:32px 16px}.icard b{font-size:16px}.icard-ic{width:32px;height:32px}.say-band .st-d{font-size:16px}}
/* 제품 머리 그림: 새 렌더(흰 바탕) — 상자 없이 */
.product-hero.v2-dev{background:none;border:0;border-radius:0;aspect-ratio:auto;display:flex;justify-content:center;margin-top:16px}
.product-hero.v2-dev img{width:auto;height:auto;max-width:100%;max-height:560px;object-fit:contain}
/* 렌더 · 화면 카드가 들어간 칸: 회색 상자 · 그림자 없이 */
.fitgrid figure:has(img[src*="/assets/v2/dev-"]),.lineup-grid .tile:has(img[src*="/assets/v2/dev-"]),.spec-pic:has(img[src*="/assets/v2/"]){background:none;border:0;box-shadow:none}
.fitgrid figure:has(img[src*="/assets/v2/dev-"]) img,.lineup-grid .tile img[src*="/assets/v2/dev-"]{object-fit:contain;padding:4%;mix-blend-mode:multiply}
.fitgrid figure:has(img[src*="/assets/v2/ui-"]){background:none;box-shadow:none;overflow:visible}
.fitgrid figure img[src*="/assets/v2/ui-"]{object-fit:contain;filter:drop-shadow(0 14px 24px rgba(17,19,24,.14))}
.spec-pic img[src*="/assets/v2/ui-"]{filter:drop-shadow(0 18px 30px rgba(17,19,24,.16))}
/* 제품 라인업: 회색 상자 걷어냄 */
.lineup-grid li .tile{background:none;border:0}
.icard-s{gap:6px}
/* 새 렌더는 흰 바탕 그림이라 그림자 필터(투명 그림용)를 끄고, 회색 띠 위에서도 흰 바탕이 사라지게 곱하기 */
img[src*="/assets/v2/dev-"]{filter:none!important;mix-blend-mode:multiply}
/* 협력사 로고: 칸 테두리 없이 */
.pwall{border:0;gap:8px 0}
.pwall li{border:0}
.pwall li:hover{background:none}
.cpic img[src*="/assets/v2/"],.product-hero.v2-dev img{mix-blend-mode:multiply}
.about-pic.about-dev{box-shadow:none;border-radius:0;aspect-ratio:auto}
.about-pic.about-dev img{object-fit:contain;mix-blend-mode:multiply}

/* 화면 캡처 · 조합 그림은 4:3 칸에서도 잘리지 않게 통째로(그림자는 그림에) */
.fitgrid figure:has(img[src*="/assets/ui/"]),.fitgrid figure:has(img[src*="/assets/v2/combo-"]){background:none;box-shadow:none;overflow:visible}
.fitgrid figure img[src*="/assets/ui/"]{object-fit:contain;filter:drop-shadow(0 14px 24px rgba(17,19,24,.14))}
.fitgrid figure img[src*="/assets/v2/combo-"]{object-fit:contain;mix-blend-mode:multiply}

/* 검수 2026-10-10: 머리말이 첫 구역과 붙어 보이지 않게 · 회사소개 숫자 줄 */
.page-head+.section.tight-top{padding-top:120px}
.page-head+.facts{margin-top:72px;border-top:1px solid var(--line)}
@media(max-width:900px){.page-head+.section.tight-top{padding-top:80px}.page-head+.facts{margin-top:48px}}
@media(max-width:600px){.nums .facts-in.n4 .fact:nth-child(2){border-top:0;border-left:1px solid var(--line)}}
/* 화면 카드(assets/v2/card-*, 4:3 · 모서리 둥글게 자른 원본)와 전체 화면(shot-*, 16:10): 칸 비율 = 그림 비율이라 잘림 없음 */
.fitgrid figure:has(img[src*="/assets/v2/shot-"]){aspect-ratio:16/10}
.fitgrid figure:has(img[src*="/assets/v2/card-"]),.fitgrid figure:has(img[src*="/assets/v2/shot-"]){background:#fff;box-shadow:0 0 0 1px rgba(17,19,24,.06),0 18px 40px -12px rgba(17,19,24,.16)}
.spec-pic:has(img[src*="/assets/v2/shot-"]){aspect-ratio:16/10}
.spec-pic img[src*="/assets/v2/shot-"]{max-width:100%;max-height:100%;border-radius:16px;box-shadow:0 0 0 1px rgba(17,19,24,.06),0 24px 48px -16px rgba(17,19,24,.2)}
@media(max-width:860px){.spec-pic:has(img[src*="/assets/v2/shot-"]){max-width:none}}
/* 검수 2026-10-10 레이아웃 */
a[href^="tel:"]{white-space:nowrap}
.mk-how{align-items:start;margin-top:48px}
.mk-how .about-pic{align-self:start}
.mrows{margin-top:32px}
.mrows:has(>li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr);gap:40px}
.mrows:has(>li:nth-child(3):last-child) li{grid-template-columns:1fr;align-items:start;gap:18px}
.spec-two .rows li{align-items:flex-start}
#delivery .rows-top li{align-items:flex-start}
#delivery .rows-top li:not(:first-child) span{font-weight:700;color:var(--ink);font-size:17px}
.ctabs2{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ctabs2::-webkit-scrollbar{display:none}
.ctab2{flex:none;white-space:nowrap}
@media(max-width:860px){.mrows:has(>li:nth-child(3):last-child){grid-template-columns:1fr;gap:0}.mrows:has(>li:nth-child(3):last-child) li{grid-template-columns:130px 1fr;align-items:center;gap:16px}}
@media(max-width:600px){
  .icards>:last-child:nth-child(odd){grid-column:1/-1}
  .fitgrid.n3:not(:has(span)){grid-template-columns:repeat(3,1fr);gap:16px 10px}
  .fitgrid.n3:not(:has(span)) li{display:block}
  .fitgrid.n3:not(:has(span)) figure{margin:0 0 10px}
  .fitgrid.n3:not(:has(span)) b{font-size:14px;text-align:center}
  .v2-num b{font-size:34px}
  .v2-num li{padding:0 10px}
  .dl-grid li{display:grid;grid-template-columns:42% 1fr;column-gap:14px;align-items:start}
  .dl-grid li figure{grid-row:span 3;margin:0}
  .dl-grid li b{font-size:15px}
  .dl-grid li span{font-size:13px}
  .dl-grid em.dl{margin-top:6px;justify-self:start}
}
.gallery.gs:has(>figure:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
.gallery.gs img[src*="ad-banner"]{object-position:50% 22%}
@media(max-width:900px){.gallery.gs:has(>figure:nth-child(4):last-child){grid-template-columns:1fr 1fr}}
/* 센터 지도: 폰에서 가운데 · 지명은 줄어든 지도에서도 12px 이상으로 */
@media(max-width:600px){
  .kmap{width:100%;margin-inline:auto}
  .kmap svg{width:100%;max-width:420px;margin-inline:auto}
  .pin .plabel{font-size:21px}
  .kmap .cap-t{font-size:22px}
}
/* 사진 칸 안의 기기 렌더 · 제품 사진도 사진과 같은 틀(둥근 4:3 + 연회색 바탕 + 같은 그림자) — 한 줄에서 틀이 제각각이지 않게 */
.fitgrid figure:has(img[src*="/assets/v2/dev-"]),.fitgrid figure:has(img[src*="/assets/v2/combo-"]),.fitgrid figure:has(img[src*="/assets/product/"]){background:#F2F4F6;border:0;overflow:hidden;box-shadow:0 18px 40px rgba(25,31,40,.10)}
.v2-band .fitgrid figure:has(img[src*="/assets/v2/dev-"]),.v2-band .fitgrid figure:has(img[src*="/assets/v2/combo-"]),.v2-band .fitgrid figure:has(img[src*="/assets/product/"]){background:#fff}
.fitgrid figure img[src*="/assets/v2/combo-"]{padding:6%}
/* 머리말 아래 사진 한 장(서빙 로봇): 원본 4:3 그대로, 가운데 */
.head-photo{max-width:760px;margin:56px auto 0}
.head-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;box-shadow:0 30px 60px -24px rgba(17,19,24,.28)}
.head-photo figcaption{margin-top:14px;text-align:center;font-size:14px;color:var(--gray)}
/* 제품 머리말 기기: 첫 화면 안에 들어오게(키오스크처럼 세로로 긴 기기는 더 작게) */
.product-hero.v2-dev img[src*="dev-kiosk"]{max-height:370px}
.product-hero.v2-dev img[src*="dev-waiting-close"]{max-height:420px}
@media(max-width:600px){.product-hero.v2-dev img{max-height:320px}.product-hero.v2-dev img[src*="dev-kiosk"]{max-height:300px}.head-photo{margin-top:40px}}
.pwall img{height:calc(var(--hp,26) * 1px);width:auto;max-width:100%;max-height:none}
@media(max-width:600px){.pwall{grid-template-columns:repeat(3,1fr);gap:4px 0}.pwall li{min-height:60px;padding:0 8%}.pwall img{height:calc(var(--hp,26) * .62px)}}
.feat-img:has(img[src*="/assets/v2/shot-"]){aspect-ratio:16/10;border-radius:16px;box-shadow:0 0 0 1px rgba(17,19,24,.06),0 24px 48px -16px rgba(17,19,24,.2)}
.feat-img:has(img[src*="/assets/v2/shot-"]):hover img{transform:none}
/* 조합 그림: 폰에서는 그림이 작아 이름표가 기기를 가림 → 숨기고, 아래 '테이블오더 + POS + …' 글로 대신 */
@media(max-width:600px){.cpic .ctag{display:none}}
/* 재검수 2026-10-10 */
.stat-band+.section.tight-top{padding-top:120px}
@media(max-width:900px){.stat-band+.section.tight-top{padding-top:80px}}
@media(min-width:861px){.wrap:not(.two)>.rows:not(.rows-link):is(:has(>li:nth-child(2):last-child),:has(>li:nth-child(3):last-child),:has(>li:nth-child(4):last-child)) li{justify-content:flex-start}}
.sec-head+.spec-two{margin-top:40px}
.spec-two{align-items:start}
@media(max-width:860px){.spec-two .rows li{flex-direction:column;align-items:flex-start;gap:4px}.spec-two .rows span{text-align:left}}
@media(max-width:600px){.fitgrid figure:has(img[src*="/assets/v2/shot-"]){border-radius:8px}}
.help-more{justify-content:flex-start}
@media(max-width:860px){.two.rules>.st-stack{border-top:0}}
.page-head+.facts{border-top:0;border-bottom:0}
.page-head+.facts .facts-in{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:600px){.nums .facts-in.n4 .fact:nth-child(4){border-left:1px solid var(--line)}}
.nw{white-space:nowrap}
.product-hero.v2-dev:has(img[src*="dev-kiosk"]){margin-top:48px;margin-bottom:72px}
@media(max-width:600px){.product-hero.v2-dev:has(img[src*="dev-kiosk"]){margin-top:32px;margin-bottom:48px}}
/* 지도 지명: 원 테두리 · 경계선이 글자를 가로지르지 않게 바탕색 테두리 */
.kmap text{paint-order:stroke;stroke:var(--halo,#fff);stroke-width:5px;stroke-linejoin:round}
.v2-band .kmap,.section.v2-band .kmap{--halo:var(--band)}
@media(max-width:600px){.lineup-grid.n3{grid-template-columns:1fr}.lineup-grid.n3 li{display:grid;grid-template-columns:40% 1fr;align-items:center;justify-items:start;text-align:left;gap:2px 16px;padding:18px 0}.lineup-grid.n3 li+li{border-left:0}.lineup-grid.n3 li>.tile{grid-row:span 2;width:100%}.lineup-grid.n3 b{align-self:end}.lineup-grid.n3 span{align-self:start}}

/* 키오스크 라인업: 바닥형은 세로로 길어 1:1 칸에선 작아 보임 → 세로 칸(3:4)으로 두 기기 높이를 맞춤 */
.lineup-grid:has(img[src*="dev-kiosk"]) img{aspect-ratio:3/4;max-height:440px}
.sec-head+.apps{margin-top:40px}
.product-hero.v2-dev:has(img[src*="dev-terminal"]){margin-bottom:72px}
@media(max-width:600px){.product-hero.v2-dev:has(img[src*="dev-terminal"]){margin-bottom:48px}}
@media(max-width:600px){.ctabs2{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:28px}}
/* 회사소개 숫자 줄: 선은 칸에만(가장자리 여백 안쪽), 모바일 2×2에서도 같은 길이 */
.page-head+.facts .facts-in{border-top:0;border-bottom:0}
.page-head+.facts .fact{border-bottom:1px solid var(--line)}
.page-head+.facts .fact:nth-child(-n+4){border-top:1px solid var(--line)}
@media(max-width:900px){.page-head+.facts .facts-in.n4 .fact:nth-child(n+3){border-top:0}}
@media(max-width:600px){.page-head+.facts .facts-in.n4 .fact:nth-child(2){border-top:1px solid var(--line)}}
/* 라인업 제품 사진: 그림자가 칸 경계에서 잘려 옅은 네모가 보이던 것 → 칸 밖으로 번지게, 그림자는 짧게 */
.lineup-grid .tile{overflow:visible!important}
.lineup-grid .tile img[src*="/assets/product/"]{filter:drop-shadow(0 12px 16px rgba(25,31,40,.12))}
@media(max-width:600px){.lineup-grid.n3 li>.tile img{aspect-ratio:4/3}.lineup-grid.n3 li{padding:12px 0}}
@media(max-width:600px){.lineup-grid.n3 li>.tile{aspect-ratio:4/3}.lineup-grid.n3{margin-bottom:-16px}}

/* FAQ answers keep optional setup screenshots below the concise instructions. */
.fq-content code{overflow-wrap:anywhere;word-break:break-word;white-space:normal}
.faq-screens{margin:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.faq-screens summary{min-height:44px;padding:12px 4px;line-height:1.5;font-size:15px;font-weight:700;cursor:pointer}
.faq-screens summary::marker{color:var(--brand)}
.faq-screens summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.faq-screens[open] summary{margin-bottom:12px}
.faq-screens>p:last-child{margin-bottom:20px}