/* ==========================================================================
   OFFICEBAY 홈페이지 공통 스타일
   색상/여백/글꼴은 아래 :root 값만 바꾸면 사이트 전체에 반영됩니다.
   ========================================================================== */

:root{
  /* 브랜드 색 */
  --brand:        #0B57D0;
  --brand-dark:   #08409b;
  --brand-light:  #e8f0fe;
  --point:        #ff5a1f;   /* 이벤트·강조 */

  /* 중립 색 */
  --ink:          #14181f;
  --ink-2:        #3d4552;
  --ink-3:        #6b7484;
  --line:         #e4e7ec;
  --bg:           #ffffff;
  --bg-soft:      #f6f8fb;

  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 1px 2px rgba(16,24,40,.05), 0 12px 28px -12px rgba(16,24,40,.14);
  --shadow-lg:    0 24px 60px -24px rgba(11,87,208,.35);
  --wrap:         1180px;
  --header-h:     70px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,
              "Segoe UI","Malgun Gothic","맑은 고딕",Roboto,"Helvetica Neue",sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  word-break:keep-all;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }

/* ---------- 헤더 ---------- */
.topbar{
  background:var(--ink); color:#c9cfda;
  font-size:13px;
}
.topbar .wrap{ display:flex; justify-content:flex-end; gap:18px; height:38px; align-items:center; }
.topbar a:hover{ color:#fff; }
.topremote{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:99px;
  background:#e11d48; color:#fff !important; font-weight:800; font-size:12.5px;
}
.topremote:hover{ background:#be123c; }
.topremote svg{ width:14px; height:14px; flex:none; }
.footremote{
  display:inline-flex; align-items:center; gap:7px; margin-top:4px;
  padding:8px 15px; border-radius:99px;
  background:#e11d48; color:#fff !important; font-weight:800; font-size:13.5px;
}
.footremote:hover{ background:#be123c; }
.footremote svg{ width:16px; height:16px; flex:none; }

.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header .wrap{
  height:var(--header-h);
  display:flex; align-items:center; gap:18px;
}
.logo{ display:flex; align-items:center; flex:none; }
.logo img{ height:30px; width:auto; display:block; }

.gnb{ display:flex; gap:2px; margin-left:auto; align-items:center; }
.gnb a{
  padding:10px 13px; border-radius:99px; font-weight:600; font-size:15.5px; color:var(--ink-2);
  white-space:nowrap; transition:.15s;
}
.gnb a:hover{ background:var(--bg-soft); color:var(--ink); }
.gnb a.on{ background:var(--brand-light); color:var(--brand); }

.header-cta{ display:flex; align-items:center; gap:14px; flex:none; }
.tel{ font-weight:800; font-size:19px; color:var(--brand); letter-spacing:-.3px; white-space:nowrap; }
/* PC 에서는 전화번호를 눌러도 아무 일이 없으므로 글자로만 보여 줍니다.
   (휴대폰에서는 눌러서 바로 전화가 걸립니다) */
@media (min-width:821px){
  .header-cta .tel{ pointer-events:none; cursor:default; }
}

.nav-toggle{
  display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:10px;
  background:#fff; cursor:pointer; align-items:center; justify-content:center; flex:none;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink);
}
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:99px; border:1px solid transparent;
  font-weight:700; font-size:15.5px; cursor:pointer; transition:.16s; white-space:nowrap;
}
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 8px 20px -8px rgba(11,87,208,.6); }
.btn-primary:hover{ background:var(--brand-dark); transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink-3); }
.btn-point{ background:var(--point); color:#fff; }
.btn-point:hover{ filter:brightness(.94); }
.btn-lg{ padding:16px 32px; font-size:17px; }
.btn-sm{ padding:9px 16px; font-size:14px; }
.btn-remote{
  background:#e11d48; border:1px solid #e11d48; color:#fff; font-weight:800;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 8px 18px -10px rgba(225,29,72,.9);
}
.btn-remote:hover{ background:#be123c; border-color:#be123c; color:#fff; }
.btn-remote svg{ width:17px; height:17px; flex:none; }
.btn-block{ width:100%; }

/* ---------- 섹션 공통 ---------- */
.section{ padding:82px 0; }
.section-soft{ background:var(--bg-soft); }
.eyebrow{
  display:inline-block; font-size:13px; font-weight:800; letter-spacing:.08em;
  color:var(--brand); background:var(--brand-light); padding:6px 14px; border-radius:99px;
  margin-bottom:16px;
}
.section h2{
  margin:0 0 14px; font-size:34px; line-height:1.3; font-weight:800; letter-spacing:-.9px;
}
.section .lead{ margin:0 auto; max-width:640px; color:var(--ink-3); font-size:17px; }
.center{ text-align:center; }

/* ---------- 페이지 헤드 ---------- */
.pagehead{
  background:linear-gradient(180deg,var(--brand-light),#fff);
  padding:58px 0 46px; border-bottom:1px solid var(--line); text-align:center;
}
.pagehead h1{ margin:0 0 10px; font-size:36px; font-weight:800; letter-spacing:-1px; }
.pagehead p{ margin:0; color:var(--ink-2); font-size:17px; }

/* ---------- 히어로 ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0b57d0 0%,#0a3fa0 55%,#072d75 100%);
  color:#fff;
}
.hero::after{
  content:""; position:absolute; right:-160px; top:-160px; width:560px; height:560px;
  border-radius:50%; background:rgba(255,255,255,.07);
}
.hero .wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding-top:76px; padding-bottom:76px;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700;
  background:rgba(255,255,255,.16); padding:8px 16px; border-radius:99px; margin-bottom:20px;
}
.hero h1{
  margin:0 0 18px; font-size:46px; line-height:1.24; font-weight:800; letter-spacing:-1.4px;
}
.hero h1 em{ font-style:normal; color:#ffd166; }
.hero p{ margin:0 0 30px; font-size:18px; color:rgba(255,255,255,.86); max-width:520px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hero .btn-ghost{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.34); color:#fff; }
.hero .btn-ghost:hover{ background:rgba(255,255,255,.2); }

.hero-card{
  background:#fff; color:var(--ink); border-radius:20px; padding:28px;
  box-shadow:var(--shadow-lg);
}
.hero-card h3{ margin:0 0 6px; font-size:19px; font-weight:800; }
.hero-card > p{ margin:0 0 20px; font-size:14px; color:var(--ink-3); }
.hero-card ul{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:12px; }
.hero-card li{ display:flex; gap:11px; font-size:15px; align-items:flex-start; }
.hero-card li i{
  flex:none; width:22px; height:22px; border-radius:50%; background:var(--brand-light);
  color:var(--brand); font-style:normal; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}

/* ---------- 이벤트 스트립 ---------- */
.eventstrip{ background:var(--point); color:#fff; }
.eventstrip .wrap{
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  padding:15px 20px; font-weight:700; font-size:15.5px; text-align:center;
}
.eventstrip .tag{
  background:rgba(0,0,0,.18); padding:3px 11px; border-radius:99px; font-size:13px;
}
.eventstrip a{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- 카드 그리드 ---------- */
.grid{ display:grid; gap:22px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  transition:.18s;
}
.card:hover{ border-color:#c9d6f0; box-shadow:var(--shadow); transform:translateY(-2px); }
.card .ico{
  width:48px; height:48px; border-radius:12px; background:var(--brand-light); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px;
}
.card h3{ margin:0 0 8px; font-size:18px; font-weight:800; letter-spacing:-.3px; }
.card p{ margin:0; color:var(--ink-3); font-size:15px; }

/* ---------- 진행 절차 ---------- */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step{ position:relative; padding-top:16px; }
.step::before{
  counter-increment:step; content:"0" counter(step);
  font-size:13px; font-weight:800; color:var(--brand); letter-spacing:.06em;
}
.step h4{ margin:8px 0 6px; font-size:17px; font-weight:800; }
.step p{ margin:0; color:var(--ink-3); font-size:14.5px; }
.step::after{
  content:""; position:absolute; top:0; left:0; right:14px; height:3px;
  background:var(--brand-light); border-radius:99px;
}
.step:first-child::after{ background:var(--brand); }

/* ---------- 가격표 ---------- */
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.filters button{
  padding:9px 18px; border-radius:99px; border:1px solid var(--line); background:#fff;
  font-weight:600; font-size:14.5px; color:var(--ink-2); cursor:pointer; transition:.15s;
}
.filters button:hover{ border-color:var(--brand); color:var(--brand); }
.filters button.on{ background:var(--brand); border-color:var(--brand); color:#fff; }

.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
table.price{ width:100%; border-collapse:collapse; min-width:820px; font-size:15px; }
table.price thead th{
  background:var(--bg-soft); text-align:left; padding:15px 18px; font-size:13.5px;
  font-weight:800; color:var(--ink-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
table.price td{ padding:16px 18px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.price tbody tr:last-child td{ border-bottom:0; }
table.price tbody tr:hover{ background:#fafbfe; }
.model{ font-weight:700; }
.model small{ display:block; font-weight:500; color:var(--ink-3); font-size:13px; margin-top:2px; }
.price-num{ font-weight:800; font-size:17px; color:var(--brand); white-space:nowrap; }
.price-num span{ font-size:13px; font-weight:600; color:var(--ink-3); }
.badge{
  display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:6px;
  background:var(--brand-light); color:var(--brand);
}
.badge.hot{ background:#fff0e9; color:var(--point); }
.note{ margin-top:16px; font-size:13.5px; color:var(--ink-3); line-height:1.8; }

/* ---------- 이벤트 카드 ---------- */
.event-card{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;
  display:flex; flex-direction:column;
}
.event-card .thumb{
  height:150px; background:linear-gradient(135deg,var(--brand),#0a3fa0); color:#fff;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:22px; font-weight:800; letter-spacing:-.6px; padding:20px;
}
.event-card .thumb.alt{ background:linear-gradient(135deg,#ff7a45,#ff3d00); }
.event-card .thumb.alt2{ background:linear-gradient(135deg,#12b886,#0ca678); }
.event-card .thumb.c-navy{ background:linear-gradient(135deg,#1b3a6b,#0d1f3d); }
.event-card .thumb.c-sky{ background:linear-gradient(135deg,#38bdf8,#0284c7); }
.event-card .thumb.c-mint{ background:linear-gradient(135deg,#2dd4bf,#0d9488); }
.event-card .thumb.c-teal{ background:linear-gradient(135deg,#0e7490,#0b4f63); }
.event-card .thumb.c-purple{ background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
.event-card .thumb.c-pink{ background:linear-gradient(135deg,#f472b6,#db2777); }
.event-card .thumb.c-red{ background:linear-gradient(135deg,#ef4444,#b91c1c); }
.event-card .thumb.c-amber{ background:linear-gradient(135deg,#f59e0b,#d97706); }
.event-card .thumb.c-brown{ background:linear-gradient(135deg,#b45309,#7c3f12); }
.event-card .thumb.c-gray{ background:linear-gradient(135deg,#475569,#1e293b); }
.event-card .body{ padding:22px; flex:1; display:flex; flex-direction:column; }
.event-card h3{ margin:0 0 8px; font-size:18px; font-weight:800; }
.event-card p{ margin:0 0 14px; color:var(--ink-3); font-size:15px; flex:1; }
.event-card .period{ font-size:13px; color:var(--ink-3); font-weight:600; }
.event-card .dday{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:5px;
  background:#fff1e8; color:#c2410c; font-size:12px; font-weight:800;
}

/* ---------- 폼 ---------- */
.formbox{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px;
  box-shadow:var(--shadow);
}
.field{ margin-bottom:20px; }
.field > label{
  display:block; font-weight:700; font-size:14.5px; margin-bottom:8px; color:var(--ink-2);
}
.field .req{ color:var(--point); margin-left:3px; }
.field input[type=text],.field input[type=tel],.field input[type=email],
.field select,.field textarea{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:15.5px; font-family:inherit; color:var(--ink); background:#fff; transition:.15s;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light);
}
.field .help{ margin:7px 0 0; font-size:13px; color:var(--ink-3); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.checks{ display:grid; gap:10px; }
.check{
  display:flex; align-items:flex-start; gap:10px; font-size:15px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; transition:.15s;
}
.check:hover{ border-color:var(--brand); }
.check input{ margin-top:3px; accent-color:var(--brand); width:17px; height:17px; flex:none; }

.agree{ display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--ink-2); }
.agree input{ margin-top:3px; accent-color:var(--brand); width:17px; height:17px; flex:none; }

.form-msg{ margin-top:16px; padding:14px 16px; border-radius:var(--radius-sm); font-size:14.5px; display:none; }
.form-msg.ok{ display:block; background:#e7f7ee; color:#0b6b3a; border:1px solid #b7e4c7; }
.form-msg.err{ display:block; background:#fdecea; color:#a4231a; border:1px solid #f6c9c4; }

.aside-box{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
}
.aside-box h3{ margin:0 0 14px; font-size:17px; font-weight:800; }
.aside-box dl{ margin:0; display:grid; gap:14px; }
.aside-box dt{ font-size:13px; color:var(--ink-3); font-weight:700; }
.aside-box dd{ margin:2px 0 0; font-size:15.5px; font-weight:600; }
.aside-box .big{ font-size:26px; font-weight:800; color:var(--brand); letter-spacing:-.5px; }

/* ---------- CTA ---------- */
.cta{
  background:linear-gradient(135deg,#0b57d0,#072d75); color:#fff; border-radius:20px;
  padding:52px 40px; text-align:center;
}
.cta h2{ margin:0 0 12px; font-size:30px; font-weight:800; letter-spacing:-.8px; }
.cta p{ margin:0 0 26px; color:rgba(255,255,255,.85); font-size:17px; }
.cta .btn-ghost{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); color:#fff; }

/* ---------- 푸터 ---------- */
.footer{ background:#161b23; color:#98a1b0; padding:52px 0 34px; font-size:14px; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; padding-bottom:32px; }
.footer h4{ color:#fff; font-size:15px; font-weight:700; margin:0 0 14px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.footer a:hover{ color:#fff; }
.footer .biginfo{ color:#fff; font-size:25px; font-weight:800; letter-spacing:-.5px; }
.footer-bottom{
  border-top:1px solid #262c36; padding-top:22px; font-size:13px; line-height:1.9; color:#79818f;
}

/* ---------- 반응형 ---------- */
@media (max-width:960px){
  .hero .wrap{ grid-template-columns:1fr; padding-top:56px; padding-bottom:56px; }
  .hero h1{ font-size:36px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .topbar{ display:none; }
  .nav-toggle{ display:flex; margin-left:auto; }
  .header .wrap{ gap:12px; }
  .logo img{ height:27px; }
  .header-cta .btn{ display:none; }   /* 원격지원 포함 — 휴대폰에서는 숨깁니다 */
  .tel{ font-size:16px; }
  .tel small{ display:none; }
  .gnb{
    position:absolute; top:var(--header-h); left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:8px 12px 14px;
    display:none; box-shadow:var(--shadow);
  }
  .gnb.open{ display:flex; }
  .gnb a{ padding:13px 12px; border-radius:10px; font-size:16px; }
  .section{ padding:56px 0; }
  .section h2{ font-size:26px; }
  .pagehead h1{ font-size:28px; }
  .hero h1{ font-size:30px; }
  .hero p{ font-size:16px; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .row2{ grid-template-columns:1fr; }
  .cta{ padding:40px 22px; } .cta h2{ font-size:23px; }
  .formbox{ padding:22px; }
  .footer-top{ grid-template-columns:1fr; }
}

/* ==========================================================================
   제품 목록 (렌탈제품안내 / 판매제품안내)
   ========================================================================== */

.filter-row{
  display:flex; align-items:flex-start; gap:14px; padding:14px 0;
  border-bottom:1px dashed var(--line);
}
.filter-row:last-child{ border-bottom:0; }
.filter-label{
  flex:none; width:76px; padding-top:8px; font-size:13.5px; font-weight:800; color:var(--ink-2);
}
.filter-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.filter-chips button{
  padding:7px 15px; border-radius:99px; border:1px solid var(--line); background:#fff;
  font-weight:600; font-size:14px; color:var(--ink-2); cursor:pointer; transition:.15s;
}
.filter-chips button:hover{ border-color:var(--brand); color:var(--brand); }
.filter-chips button.on{ background:var(--brand); border-color:var(--brand); color:#fff; }

.filterbox{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:6px 22px; margin-bottom:26px;
}

.pgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

.pcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:.18s;
}
.pcard:hover{ border-color:#c9d6f0; box-shadow:var(--shadow); transform:translateY(-3px); }

.p-thumb{
  position:relative; height:210px; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.p-thumb img{ max-height:100%; max-width:100%; object-fit:contain; }
.p-noimg{ color:#aab2c0; font-size:13.5px; }
.p-tag{
  position:absolute; top:12px; left:12px; background:var(--brand); color:#fff;
  font-size:12px; font-weight:800; padding:4px 10px; border-radius:6px;
}
.p-tag.hot{ background:var(--point); }

.p-brand{
  text-align:center; padding:14px 14px 6px; font-size:14.5px; font-weight:700; color:var(--brand);
}
.p-name{
  margin:0; background:var(--brand); color:#fff; text-align:center;
  padding:9px 12px; font-size:17px; font-weight:800; letter-spacing:-.3px;
}

.p-body{ padding:18px; display:flex; flex-direction:column; flex:1; }
.p-spec{ margin:0 0 12px; font-size:14px; color:var(--ink-3); line-height:1.6; min-height:44px; }
.p-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; }
.p-price{
  display:block; font-size:21px; font-weight:800; color:var(--ink); letter-spacing:-.5px; margin-bottom:12px;
}
.p-meta{
  margin:0 0 16px; padding:12px 14px; background:var(--bg-soft); border-radius:var(--radius-sm);
  display:grid; grid-template-columns:auto 1fr; gap:5px 12px; font-size:13px;
}
.p-meta dt{ color:var(--ink-3); font-weight:700; white-space:nowrap; }
.p-meta dd{ margin:0; color:var(--ink-2); }
.p-body .btn{ margin-top:auto; }

.p-empty{
  grid-column:1/-1; padding:70px 20px; text-align:center; color:var(--ink-3);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
}

@media (max-width:1080px){ .pgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:860px){ .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
  .filterbox{ padding:6px 16px; }
  .filter-row{ flex-direction:column; gap:8px; padding:12px 0; }
  .filter-label{ width:auto; padding-top:0; }
  .filter-chips button{ padding:6px 13px; font-size:13.5px; }
  .p-thumb{ height:170px; }
  .p-spec{ min-height:0; }
}
@media (max-width:430px){ .pgrid{ grid-template-columns:1fr; } }

/* ==========================================================================
   MFPS 솔루션 · 대리점 표기 · 지점 전화
   ========================================================================== */

.topbar .wrap{ justify-content:space-between; }
.topbar .dealer{
  margin-right:auto; font-weight:700; color:#fff;
  background:rgba(255,255,255,.12); padding:3px 11px; border-radius:99px; font-size:12.5px;
}

.branchbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px;
  padding:18px 0 22px; border-top:1px solid #262c36;
}
.branchbar .bl{ color:#fff; font-size:14.5px; font-weight:700; }
.footer .branches{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.footer .branches li{
  display:flex; gap:8px; align-items:center;
  padding:8px 13px; border-radius:9px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
}
.footer .branches li:hover{ border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.1); }
.footer .branches b{ color:#aeb7c4; font-weight:700; font-size:12.5px; }
.footer .branches a{
  color:#fff; font-size:15px; font-weight:800; letter-spacing:-.2px;
  font-variant-numeric:tabular-nums;
}
@media (max-width:520px){
  .branchbar{ gap:10px; }
  .footer .branches{ width:100%; }
  .footer .branches li{ flex:1 1 100%; justify-content:space-between; }
}

/* ---------- MFPS 히어로 ---------- */
.mfps-hero{
  background:linear-gradient(135deg,#0b57d0 0%,#0a3fa0 58%,#062a6d 100%);
  color:#fff; position:relative; overflow:hidden;
}
.mfps-hero::after{
  content:""; position:absolute; left:-120px; bottom:-200px; width:520px; height:520px;
  border-radius:50%; background:rgba(255,255,255,.06);
}
.mfps-hero .wrap{ position:relative; z-index:1; padding:72px 20px; text-align:center; }
.mfps-hero .tagline{
  display:inline-block; font-size:13.5px; font-weight:800; letter-spacing:.06em;
  background:rgba(255,255,255,.16); padding:7px 16px; border-radius:99px; margin-bottom:20px;
}
.mfps-hero h1{
  margin:0 0 16px; font-size:44px; line-height:1.26; font-weight:800; letter-spacing:-1.4px;
}
.mfps-hero h1 em{ font-style:normal; color:#ffd166; }
.mfps-hero p{ margin:0 auto; max-width:640px; font-size:17.5px; color:rgba(255,255,255,.88); }

/* ---------- 기능 목록 ---------- */
.feat-col{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.feat-col > h3{
  margin:0; background:var(--brand); color:#fff; text-align:center;
  padding:14px 16px; font-size:17px; font-weight:800; letter-spacing:-.3px;
}
.feat-col > h3.alt{ background:#0b3f96; }
.feat-list{ list-style:none; margin:0; padding:8px 24px 20px; }
.feat-list li{ display:flex; gap:16px; padding:20px 0; border-bottom:1px dashed var(--line); }
.feat-list li:last-child{ border-bottom:0; }
.feat-ico{
  flex:none; width:44px; height:44px; border-radius:12px; background:var(--brand-light);
  color:var(--brand); display:flex; align-items:center; justify-content:center;
}
.feat-ico svg{ width:23px; height:23px; }
.feat-list h4{ margin:0 0 5px; font-size:16.5px; font-weight:800; color:var(--brand); letter-spacing:-.3px; }
.feat-list p{ margin:0; font-size:14.5px; color:var(--ink-3); line-height:1.65; }

/* ---------- 약속 배너 ---------- */
.promise{
  display:flex; gap:24px; align-items:center;
  background:#fff; border:2px solid var(--brand); border-radius:18px; padding:30px 34px;
}
.promise .bell{
  flex:none; width:62px; height:62px; border-radius:50%; background:var(--brand-light);
  color:var(--brand); display:flex; align-items:center; justify-content:center;
}
.promise .bell svg{ width:30px; height:30px; }
.promise h3{ margin:0 0 8px; font-size:23px; font-weight:800; letter-spacing:-.7px; }
.promise p{ margin:0; color:var(--ink-2); font-size:16px; }
.promise b{ color:var(--brand); }

@media (max-width:760px){
  .topbar .dealer{ margin:0; }
  .mfps-hero .wrap{ padding:52px 20px; }
  .mfps-hero h1{ font-size:29px; }
  .mfps-hero p{ font-size:16px; }
  .feat-list{ padding:6px 18px 16px; }
  .feat-list li{ gap:13px; padding:17px 0; }
  .promise{ flex-direction:column; text-align:center; gap:16px; padding:26px 22px; }
  .promise h3{ font-size:19px; }
}

/* ==========================================================================
   제품 상세 페이지
   ========================================================================== */

.crumb{ font-size:13.5px; color:var(--ink-3); margin-bottom:22px; display:flex; gap:7px; align-items:center; }
.crumb a:hover{ color:var(--brand); }
.crumb b{ color:var(--ink-2); font-weight:700; }

.pd-top{ display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:start; }

/* ---------- 사진 ---------- */
.pd-main{
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  height:420px; display:flex; align-items:center; justify-content:center; padding:26px;
}
.pd-main img{ max-height:100%; max-width:100%; object-fit:contain; }
.pd-noimg{ color:#aab2c0; font-size:14px; }
.pd-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pd-thumbs button{
  width:78px; height:66px; border:1px solid var(--line); border-radius:8px; background:#fff;
  padding:6px; cursor:pointer; transition:.15s;
}
.pd-thumbs button.on{ border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-light); }
.pd-thumbs img{ width:100%; height:100%; object-fit:contain; }

/* ---------- 사양 요약 ---------- */
.pd-info h1{ margin:0 0 12px; font-size:28px; font-weight:800; letter-spacing:-.8px; line-height:1.3; }
.pd-facts{
  margin:0 0 24px; display:grid; grid-template-columns:110px 1fr; gap:0;
  border-top:2px solid var(--ink); font-size:15px;
}
.pd-facts dt{
  padding:13px 0; color:var(--ink-3); font-weight:700; font-size:14px;
  border-bottom:1px solid var(--line);
}
.pd-facts dd{ margin:0; padding:13px 0; border-bottom:1px solid var(--line); color:var(--ink-2); }
.pd-facts .pd-base{ color:var(--brand); font-weight:800; font-size:17px; }

/* ---------- 렌탈조건 ---------- */
.pd-inc{
  margin:18px 0 22px; padding:16px 18px; border-radius:12px;
  background:var(--bg-soft); border:1px solid var(--line);
}
.pd-inc-t{
  display:inline-block; margin-bottom:10px; padding:3px 10px; border-radius:6px;
  background:var(--brand); color:#fff; font-size:12px; font-weight:800;
}
.pd-inc ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; }
.pd-inc li{ font-size:14.5px; font-weight:700; color:var(--ink-2); }
.pd-inc li::before{ content:"✓"; color:var(--brand); font-weight:900; margin-right:6px; }

.pd-options h2{ margin:0 0 12px; font-size:16px; font-weight:800; }
.pd-opt{
  display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px;
  align-items:center; margin-bottom:10px;
}
.pd-opt > label{
  font-size:14.5px; color:var(--ink); font-weight:800;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pd-opt select, .opt-select, .opt-head{
  display:block; width:100%; height:48px; line-height:22px;
  padding:12px 38px 12px 15px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:14.5px; font-family:inherit; background-color:#fff; color:var(--ink); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.opt-select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light); }

/* 여러 개 고르는 선택칸 */
.opt-drop{ position:relative; }
.opt-head{
  text-align:left; color:var(--ink-3); transition:.14s;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236b7484' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.opt-drop.has .opt-head{ color:var(--ink); font-weight:700; }
.opt-drop.open .opt-head, .opt-head:hover{ border-color:var(--brand); }
.opt-drop.open .opt-head{ box-shadow:0 0 0 3px var(--brand-light); }
.opt-menu{
  position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); padding:6px; max-height:260px; overflow:auto;
}
.opt-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  font-size:14.5px; cursor:pointer;
}
.opt-item:hover{ background:var(--bg-soft); }
.opt-item input{ width:17px; height:17px; accent-color:var(--brand); flex:none; }
.opt-item span{ flex:1; }
.opt-item b{ font-size:13.5px; color:var(--ink-3); font-weight:800; }

.pd-dup{
  margin:10px 0 0; padding:9px 14px; border-radius:8px;
  background:#fff1e8; border:1px solid #ffc7a6; color:#c2410c;
  font-size:13.5px; font-weight:700;
}
.pd-opt label{ font-size:14.5px; color:var(--ink); font-weight:800; }
.opt-tag{
  display:inline-block; margin-left:5px; padding:1px 6px; border-radius:5px;
  background:var(--bg-soft); color:var(--ink-3); font-size:11.5px; font-weight:700;
  vertical-align:2px;
}
.pd-optnote{ margin:14px 0 0; font-size:13px; color:var(--ink-3); line-height:1.7; }
.pd-optnote b{ color:var(--ink-2); }
.pd-opt select{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:14.5px; font-family:inherit; background:#fff; color:var(--ink);
}
.pd-opt select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light); }

.p-cond{
  position:absolute; right:12px; top:12px; z-index:1;
  padding:4px 10px; border-radius:6px;
  background:#14181f; color:#fff; font-size:12px; font-weight:800; letter-spacing:-.3px;
}
.badge.used{ background:#fff1e8; color:#c2410c; }

.pd-docs{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 4px; }
.pd-doc{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 16px; border:1px solid var(--line); border-radius:10px; background:#fff;
  font-size:14.5px; font-weight:700; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.pd-doc:hover{ border-color:var(--brand); box-shadow:var(--shadow); }
.pd-doc .ico{
  padding:3px 8px; border-radius:5px; background:#c0392b; color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.5px;
}
.pd-doc em{ font-style:normal; font-size:12.5px; font-weight:600; color:var(--ink-3); }

/* ---------- 카운터 정산 주기 (제품 상세) ---------- */
.pd-counter{
  position:relative; overflow:hidden;
  margin:44px 0 6px; padding:38px 34px; border-radius:18px;
  background:linear-gradient(135deg,#0d1522 0%,#16233a 60%,#101a2c 100%);
  color:#fff; text-align:center;
}
.pd-counter::after{
  content:""; position:absolute; left:-120px; bottom:-160px;
  width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle,rgba(11,87,208,.45),transparent 65%);
}
.pd-counter > *{ position:relative; z-index:1; }
.pdc-tag{
  display:inline-block; margin-bottom:14px; padding:6px 15px;
  border-radius:999px; background:var(--point); color:#fff;
  font-size:12.5px; font-weight:800; letter-spacing:.5px;
}
.pd-counter h2{
  margin:0 0 10px; font-size:31px; font-weight:900; letter-spacing:-1.1px; color:#fff;
}
.pdc-head p{ margin:0; font-size:16px; line-height:1.85; color:rgba(255,255,255,.8); }
.pdc-head p b{ color:#ffb08a; }

.pdc-picks{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:26px 0 20px; }
.pdc-pick{
  min-width:118px; padding:15px 20px; border-radius:12px; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.07);
  color:#fff; font-size:16px; font-weight:800; letter-spacing:-.3px;
  transition:all .15s;
}
.pdc-pick:hover{ border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.14); }
.pdc-pick.on{
  background:#fff; border-color:#fff; color:#0d1522;
  box-shadow:0 10px 24px -10px rgba(255,255,255,.5);
}
.pdc-warn{
  display:inline-block; max-width:100%; margin:0 auto;
  padding:10px 18px; border-radius:10px;
  background:rgba(255,90,31,.14); border:1px solid rgba(255,90,31,.45);
  color:#ffcdb5; font-size:13.5px; line-height:1.7; text-align:center;
}
.pdc-warn b{
  display:inline-block; margin-right:6px; padding:1px 7px; border-radius:5px;
  background:var(--point); color:#fff; font-size:12px; font-weight:800;
}
@media (max-width:760px){
  .pd-counter{ margin-top:32px; padding:28px 18px; border-radius:14px; }
  .pd-counter h2{ font-size:24px; }
  .pdc-head p{ font-size:14.5px; }
  .pdc-pick{ min-width:0; flex:1 1 44%; padding:13px 10px; font-size:15px; }
  .pdc-warn{ font-size:12.5px; }
}
.pd-total{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:24px 0 20px; padding:20px 22px; border-radius:var(--radius);
  background:var(--brand-light); border:1px solid #c9d9f7;
}
.pd-total span{ font-size:15px; font-weight:700; color:var(--ink-2); }
.pd-total b{
  margin-left:auto; font-size:30px; font-weight:800; color:var(--brand);
  letter-spacing:-.8px; font-variant-numeric:tabular-nums;
}
.pd-total small{ font-size:13px; color:var(--ink-3); }

.pd-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.pd-actions .btn{ flex:1; min-width:180px; }

/* ---------- 탭 ---------- */
.pd-tabs{ display:flex; gap:0; margin:56px 0 0; border-bottom:2px solid var(--line); }
.pd-tabs button{
  padding:15px 30px; border:0; background:none; cursor:pointer; position:relative;
  font-size:15.5px; font-weight:700; color:var(--ink-3); transition:.15s;
}
.pd-tabs button:hover{ color:var(--ink); }
.pd-tabs button.on{ color:var(--brand); }
.pd-tabs button.on::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--brand);
}
.pd-panel{ padding:34px 0 0; }

table.pd-spec{ width:100%; border-collapse:collapse; border-top:2px solid var(--ink); font-size:15px; }
table.pd-spec th{
  width:190px; text-align:left; padding:15px 20px; background:var(--bg-soft);
  border-bottom:1px solid var(--line); font-weight:700; color:var(--ink-2); font-size:14.5px;
  vertical-align:top;
}
table.pd-spec td{ padding:15px 20px; border-bottom:1px solid var(--line); color:var(--ink-2); }

.pd-desc{ margin:0 0 28px; font-size:16px; color:var(--ink-2); line-height:1.85; }
.pd-detail-img{ width:100%; max-width:900px; margin:0 auto 8px; border-radius:6px; }

.pd-spec tr.sec th{
  background:var(--ink); color:#fff; font-size:14px; font-weight:800;
  padding:11px 18px; text-align:left; letter-spacing:-.2px;
}
.pd-spec td{ word-break:break-word; }
.pd-guide{ margin:0; padding-left:20px; color:var(--ink-2); font-size:15.5px; line-height:2; }
.pd-guide b{ color:var(--brand); }

@media (max-width:960px){
  .pd-top{ grid-template-columns:1fr; gap:30px; }
  .pd-main{ height:320px; }
}
@media (max-width:760px){
  .pd-info h1{ font-size:22px; }
  .pd-facts{ grid-template-columns:92px 1fr; font-size:14.5px; }
  .pd-opt{ grid-template-columns:1fr; gap:6px; align-items:stretch; }
  .pd-total{ padding:16px 18px; }
  .pd-total b{ font-size:25px; }
  .pd-tabs{ overflow-x:auto; }
  .pd-tabs button{ padding:13px 20px; font-size:14.5px; white-space:nowrap; }
  table.pd-spec th{ width:110px; padding:12px 14px; font-size:13.5px; }
  table.pd-spec td{ padding:12px 14px; font-size:14px; }
}

/* 목록 카드 : 클릭으로 상세 이동 */
a.p-thumb{ text-decoration:none; }
a.p-name{ display:block; text-decoration:none; transition:.15s; }
a.p-name:hover{ background:var(--brand-dark); }
.p-btns{ display:flex; gap:8px; margin-top:auto; }
.p-btns .btn{ flex:1; padding-inline:10px; }
.p-body .p-btns .btn{ margin-top:0; }

/* 카카오톡 상담 떠 있는 버튼 */
.kakao-float{
  position:fixed; right:20px; bottom:20px; z-index:80;
  display:flex; align-items:center; gap:9px;
  background:#FEE500; color:#191600; text-decoration:none;
  padding:13px 20px; border-radius:99px; font-weight:800; font-size:15px;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.35); transition:.16s;
}
.kakao-float:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(0,0,0,.4); }
.kakao-float svg{ width:22px; height:22px; flex:none; }
@media (max-width:760px){
  .kakao-float{ right:14px; bottom:14px; padding:12px 16px; font-size:14px; }
  .kakao-float span{ display:none; }
}

/* ---------- 홈 : MFPS 아래 제품 사진 띠 ---------- */
.shotband{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px; }
.shotband .shot{
  display:block; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:#fff; transition:.16s;
}
.shotband .shot:hover{ border-color:var(--brand); box-shadow:var(--shadow); transform:translateY(-3px); }
.shotband img{ width:100%; height:260px; object-fit:contain; background:#fff; padding:18px; }
.shot-cap{ padding:14px 18px 18px; border-top:1px solid var(--line); }
.shot-cap b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.3px; }
.shot-cap span{ display:block; margin-top:4px; font-size:13.5px; color:var(--ink-3); }
@media (max-width:860px){
  .shotband{ grid-template-columns:1fr 1fr; gap:12px; }
  .shotband img{ height:190px; padding:12px; }
}
@media (max-width:520px){
  .shotband{ grid-template-columns:1fr; }
}

/* ---------- 정품 소모품 배너 (홈) ---------- */
.genuine{
  position:relative; overflow:hidden;
  padding:78px 0;
  background:linear-gradient(160deg,#101623 0%,#182238 55%,#0f1a2e 100%);
  color:#fff;
}
.genuine::after{
  content:""; position:absolute; right:-140px; top:-140px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,31,.28),transparent 65%);
}
.genuine .wrap{ position:relative; z-index:1; }
.genuine-head{ text-align:center; max-width:760px; margin:0 auto; }
.genuine .seal{
  display:inline-block; margin-bottom:18px; padding:7px 16px;
  border:1.5px solid var(--point); border-radius:999px;
  color:#ffb08a; font-size:13px; font-weight:800; letter-spacing:1px;
}
.genuine h2{
  margin:0 0 14px; font-size:38px; font-weight:900;
  letter-spacing:-1.4px; line-height:1.28; color:#fff;
}
.genuine h2 em{ font-style:normal; color:#ff8a4c; }
.genuine-head p{ margin:0; font-size:17.5px; color:rgba(255,255,255,.82); }

.genuine-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:44px; text-align:left;
}
.genuine .gcard{
  padding:24px 22px; border-radius:var(--radius);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.genuine .gcard b{ display:block; margin-bottom:9px; font-size:17.5px; font-weight:800; }
.genuine .gcard p{ margin:0; font-size:15px; line-height:1.8; color:rgba(255,255,255,.76); }

.genuine-note{
  max-width:820px; margin:34px auto 0; padding:22px 24px;
  border-left:4px solid var(--point); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);
  font-size:16px; line-height:1.9; color:rgba(255,255,255,.86);
}
.genuine-note b{ color:#ffb08a; }
.genuine-cta{ margin-top:30px; text-align:center; }
.genuine-cta .btn-ghost{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.45);
}
.genuine-cta .btn-ghost:hover{ background:rgba(255,255,255,.1); }

@media (max-width:900px){
  .genuine{ padding:58px 0; }
  .genuine h2{ font-size:29px; }
  .genuine-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   스마트폰 · 태블릿 (아이폰 · 안드로이드 공통)
   ========================================================================== */

/* 손가락으로 눌렀을 때 파란 네모가 번쩍이지 않게 */
*{ -webkit-tap-highlight-color:rgba(11,87,208,.12); }

/* 아이폰(사파리)에서 입력칸을 누르면 화면이 확대되는 것을 막습니다 (16px 이상) */
@media (max-width:820px){
  .field input[type=text], .field input[type=tel], .field input[type=email],
  .field select, .field textarea,
  .pd-opt select, .pdc-pick, .btn{ font-size:16px; }
}

/* 아이폰에서 입력칸·선택칸이 제멋대로 그려지는 것을 맞춥니다
   (체크박스는 그대로 두어야 네모가 보입니다) */
.field input[type=text], .field input[type=tel], .field input[type=email],
.field select, .field textarea, .pd-opt select{
  -webkit-appearance:none; appearance:none;
}
.pd-opt select, .field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236b7484' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}

/* 가로로 넘치는 표는 손가락으로 부드럽게 밀 수 있게 */
.table-wrap, .pd-spec-wrap{ -webkit-overflow-scrolling:touch; }

/* 노치(둥근 모서리) 있는 아이폰에서 떠 있는 단추가 가려지지 않게 */
.kakao-float{
  bottom:calc(20px + env(safe-area-inset-bottom));
  right:calc(20px + env(safe-area-inset-right));
}

/* 화면을 가로로 눕혔을 때도 넘치지 않게 */
html, body{ overflow-x:hidden; max-width:100%; }

/* ==========================================================================
   드라이버 자료실
   ========================================================================== */
.dsearch{ background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:22px; }
.dsearch input[type=search]{
  width:100%; padding:16px 18px; border:1px solid var(--line); border-radius:12px;
  font-size:16px; font-family:inherit; background:#fff; color:var(--ink);
}
.dsearch input[type=search]:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light); }
.dfilters{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.dfilters button{
  padding:8px 15px; border-radius:99px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--ink-2);
  font-size:14px; font-weight:700; transition:.14s;
}
.dfilters button:hover{ border-color:var(--brand); color:var(--brand); }
.dfilters button.on{ background:var(--brand); border-color:var(--brand); color:#fff; }

.dcount{ margin:24px 0 12px; color:var(--ink-3); font-size:14px; }
.dcount b{ color:var(--brand); font-size:16px; }

.dlist{ display:grid; gap:12px; }
.dcard{
  display:grid; grid-template-columns:1fr 190px; gap:20px; align-items:center;
  border:1px solid var(--line); border-radius:14px; background:#fff; padding:22px 24px;
  transition:.15s;
}
.dcard:hover{ border-color:var(--brand); box-shadow:var(--shadow); }
.dtop{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:9px; }
.dbrand{ font-size:14px; font-weight:800; color:var(--brand); margin-right:4px; }
.dtag{
  padding:3px 9px; border-radius:6px; background:var(--bg-soft);
  color:var(--ink-3); font-size:12px; font-weight:700;
}
.dtag.file{ background:#e7f7ee; color:#0b6b3a; }
.dcard h3{ margin:0 0 6px; font-size:18px; font-weight:800; letter-spacing:-.4px; }
.dcard p{ margin:0 0 10px; color:var(--ink-3); font-size:14.5px; line-height:1.8; }
.dbtn{ text-align:center; }
.dbtn .btn{ width:100%; }
.dbtn small{ display:block; margin-top:8px; color:var(--ink-3); font-size:12.5px; }
@media (max-width:760px){
  .dcard{ grid-template-columns:1fr; gap:14px; }
  .dsearch{ padding:16px; }
}

/* ==========================================================================
   팝업 공지
   ========================================================================== */
.popup-back{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(10,14,20,.55); padding:20px; animation:popfade .18s ease-out;
}
@keyframes popfade{ from{ opacity:0 } to{ opacity:1 } }
.popup{
  position:relative; width:100%; max-width:440px; max-height:90vh; overflow:auto;
  background:#fff; border-radius:18px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
}
.popup-x{
  position:absolute; right:10px; top:10px; z-index:2;
  width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.45); color:#fff; font-size:20px; line-height:1;
}
.popup-x:hover{ background:rgba(0,0,0,.7); }
.popup-img{ display:block; width:100%; border-radius:18px 18px 0 0; }
.popup-body{ padding:26px 26px 6px; }
.popup-body h2{ margin:0 0 10px; font-size:22px; font-weight:900; letter-spacing:-.7px; }
.popup-body p{ margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.85; }
.popup-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px; margin-top:16px; border-top:1px solid var(--line); background:var(--bg-soft);
  border-radius:0 0 18px 18px;
}
.popup-foot label{ display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-3); cursor:pointer; }
.popup-foot input{ width:16px; height:16px; accent-color:var(--brand); }
.popup-foot button{
  border:0; background:none; color:var(--ink); font-size:14px; font-weight:800; cursor:pointer;
  padding:6px 10px; border-radius:8px;
}
.popup-foot button:hover{ background:#e8ebf1; }

/* ==========================================================================
   카카오톡 상담 안내 띠
   ========================================================================== */
.kband{ background:#3b2f2a; }
.kband-in{ display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0 20px; }

/* 왼쪽 : 노란 카카오 영역 */
.kb-talk{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:#FEE500; color:#3b2f2a; padding:30px 34px; border-radius:0;
}
.kb-bubble{
  display:inline-block; padding:5px 14px; border-radius:99px;
  background:#3b2f2a; color:#FEE500; font-size:12.5px; font-weight:800; letter-spacing:1px;
}
.kb-talk h3{ margin:12px 0 10px; font-size:30px; font-weight:900; letter-spacing:-1.4px; }
.kb-ch{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 16px;
  padding:7px 16px 7px 8px; border-radius:99px; background:rgba(59,47,42,.12);
  font-size:17px; font-weight:800;
}
.kb-ch i{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:#3b2f2a; color:#FEE500;
  font-style:normal; font-size:12px; font-weight:800;
}
.kb-add{
  display:inline-block; padding:11px 20px; border-radius:10px;
  background:#3b2f2a; color:#FEE500 !important; font-size:15px; font-weight:800;
}
.kb-add:hover{ background:#201916; }
.kb-qr{ flex:none; text-align:center; background:#fff; border-radius:12px; padding:12px; }
.kb-qr span{ display:block; margin-bottom:6px; font-size:12px; font-weight:800; color:#3b2f2a; }
.kb-qr img{ width:118px; height:118px; object-fit:contain; display:block; }

/* 오른쪽 : 연락처 영역 */
.kb-info{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  padding:30px 34px; color:#fff;
}
.kb-col + .kb-col{ border-left:1px solid rgba(255,255,255,.22); padding-left:24px; }
.kb-tel{
  display:block; color:#fff !important; font-size:34px; font-weight:900;
  letter-spacing:-1.5px; font-variant-numeric:tabular-nums;
}
.kb-br{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:5px; }
.kb-br li{ display:flex; gap:10px; align-items:baseline; font-size:14.5px; }
.kb-br b{ min-width:34px; color:rgba(255,255,255,.72); font-weight:700; }
.kb-br a{ color:#fff !important; font-weight:800; font-variant-numeric:tabular-nums; }
.kb-hours{ margin:0 0 14px; font-size:19px; font-weight:800; line-height:1.55; letter-spacing:-.5px; }
.kb-mobile{
  display:block; color:#fff !important; font-size:23px; font-weight:900;
  letter-spacing:-1px; font-variant-numeric:tabular-nums;
}
.kb-sms{ display:block; margin-top:3px; font-size:13.5px; color:rgba(255,255,255,.72); font-weight:700; }

@media (max-width:980px){
  .kband-in{ grid-template-columns:1fr; padding:0; }
  .kb-talk{ padding:26px 22px; }
  .kb-talk h3{ font-size:25px; }
  .kb-info{ padding:26px 22px; }
}
@media (max-width:560px){
  .kb-talk{ flex-direction:column; align-items:flex-start; }
  .kb-info{ grid-template-columns:1fr; gap:18px; }
  .kb-col + .kb-col{ border-left:0; border-top:1px solid rgba(255,255,255,.22); padding-left:0; padding-top:18px; }
  .kb-tel{ font-size:29px; }
}