/* 홈페이지사랑 — 블록 스타일  (토큰은 tokens.css) */

/* ── 공통 ─────────────────────────────────────────── */
h1,h2,h3{ margin:0; line-height:1.25; letter-spacing:var(--ls-ko); font-weight:800 }
p{ margin:0 }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
section{ padding-block:var(--sp-sec) }
.eyebrow{ font-size:var(--f-cap); font-weight:700; color:var(--brand);
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px }
.sec-h{ font-size:var(--f-h2); margin-bottom:14px }
.sec-p{ color:var(--text-mute); max-width:62ch }
.center{ text-align:center }
.center .sec-p{ margin-inline:auto }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:15px 26px;
  border-radius:var(--r-md); font-weight:700; font-size:.98rem; border:1px solid transparent;
  cursor:pointer; transition:transform .18s var(--ease), background .18s var(--ease) }
.btn:hover{ transform:translateY(-2px) }
.btn-1{ background:var(--brand); color:#fff }
.btn-2{ background:transparent; color:var(--text); border-color:var(--line) }
.btn-2:hover{ border-color:var(--text-mute) }

/* ── N1 네비 ──────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line) }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:72px }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.12rem }
.logo .heart{ color:var(--brand); font-size:1.3rem }
.logo small{ display:block; font-size:.6rem; letter-spacing:.18em;
  color:var(--text-mute); font-weight:600 }
.menu{ display:flex; gap:34px; font-size:.95rem; font-weight:600 }
.menu a{ color:var(--text-mute); transition:color .18s }
.menu a:hover{ color:var(--text) }
.nav .btn{ padding:11px 20px; font-size:.9rem }
.burger{ display:none; background:none; border:0; font-size:1.5rem;
  color:var(--text); cursor:pointer }

/* ── H1 히어로 ────────────────────────────────────── */
.hero{ padding-block:clamp(72px,11vw,140px) clamp(48px,7vw,88px);
  position:relative; overflow:hidden }
.hero::after{ content:""; position:absolute; inset:auto -10% -60% 55%; height:70vh;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--brand) 13%,transparent), transparent 70%);
  pointer-events:none }
.hero h1{ font-size:var(--f-hero); max-width:16ch; margin-bottom:22px }
.hero h1 em{ font-style:normal; color:var(--brand) }
.hero p{ font-size:1.08rem; color:var(--text-mute); max-width:46ch; margin-bottom:34px }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap }

/* ── S1 숫자바 ────────────────────────────────────── */
.stats{ border-block:1px solid var(--line); padding-block:clamp(28px,4vw,44px) }
.stats-in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:28px }
.stat b{ display:block; font-size:var(--f-num); font-weight:800;
  letter-spacing:-.03em; line-height:1 }
.stat span{ display:block; margin-top:8px; font-size:var(--f-cap);
  color:var(--text-mute); font-weight:600 }

/* ── 서비스 ───────────────────────────────────────── */
.svc{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px; margin-top:52px }
.svc-card{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:36px 30px;
  transition:transform .2s var(--ease), border-color .2s }
.svc-card:hover{ transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--brand) 40%,var(--line)) }
.svc-card h3{ font-size:var(--f-h3); margin-bottom:12px }
.svc-card p{ color:var(--text-mute); font-size:.96rem }
.svc-card ul{ margin:18px 0 0; padding-left:18px; color:var(--text-mute);
  font-size:.92rem; line-height:2 }

/* ── L1 포트폴리오 ────────────────────────────────── */
.pf-filter{ display:flex; gap:8px; flex-wrap:wrap; margin:32px 0 28px }
.chip{ padding:9px 17px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--text-mute); font-size:.88rem;
  font-weight:600; cursor:pointer; transition:.18s var(--ease) }
.chip:hover{ color:var(--text) }
.chip[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff }
.pf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:20px }
.pf-card{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); display:flex; flex-direction:column;
  transition:transform .2s var(--ease), border-color .2s }
.pf-card:hover{ transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--brand) 45%,var(--line)) }
.pf-thumb{ aspect-ratio:16/10; display:grid; place-items:center; position:relative;
  background:linear-gradient(140deg,
    color-mix(in srgb,var(--brand) 9%,var(--surface)), var(--surface-2)) }
.pf-thumb .nm{ font-size:1.24rem; font-weight:800; letter-spacing:-.02em;
  color:var(--text); padding:0 18px; text-align:center }
.pf-thumb img{ width:100%; height:100%; object-fit:cover }
.pf-body{ padding:20px 22px 24px }
.pf-body h3{ font-size:1.02rem; margin-bottom:6px }
.pf-body p{ font-size:.9rem; color:var(--text-mute) }
.pf-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px }
.pf-tags i{ font-style:normal; font-size:.74rem; font-weight:700; padding:4px 10px;
  border-radius:999px; background:var(--brand-soft); color:var(--brand) }
.pf-more{ margin-top:34px; text-align:center }

/* ── 프로세스 ─────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px; margin-top:52px; counter-reset:s }
.step{ padding:30px 26px; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--surface) }
.step::before{ counter-increment:s; content:"0" counter(s); display:block;
  font-size:1.5rem; font-weight:800; color:var(--brand);
  margin-bottom:14px; letter-spacing:-.02em }
.step h3{ font-size:1.02rem; margin-bottom:8px }
.step p{ font-size:.9rem; color:var(--text-mute) }

/* ── Q1 FAQ ───────────────────────────────────────── */
.faq{ max-width:820px; margin:52px auto 0; border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ cursor:pointer; padding:24px 44px 24px 0; font-weight:700;
  font-size:1.02rem; list-style:none; position:relative }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; position:absolute; right:6px; top:50%;
  translate:0 -50%; font-size:1.4rem; color:var(--brand);
  font-weight:400; transition:rotate .2s }
.faq details[open] summary::after{ rotate:45deg }
.faq .a{ padding:0 44px 26px 0; color:var(--text-mute) }

/* ── C1 CTA ───────────────────────────────────────── */
.cta{ background:var(--ink); color:var(--paper) }
.cta h2{ font-size:var(--f-h2); margin-bottom:14px }
.cta p{ color:color-mix(in srgb,var(--paper) 65%,var(--ink)); margin-bottom:30px }
.cta .btn-2{ color:var(--paper);
  border-color:color-mix(in srgb,var(--paper) 32%,var(--ink)) }

/* ── FT1 푸터 ─────────────────────────────────────── */
.ft{ border-top:1px solid var(--line); padding-block:56px;
  font-size:.9rem; color:var(--text-mute) }
.ft-in{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px }
.ft h4{ font-size:.86rem; color:var(--text); margin:0 0 14px; font-weight:700 }
.ft ul{ margin:0; padding:0; list-style:none; line-height:2.1 }
.ft-copy{ margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
  font-size:.82rem }

/* ── CH1 상담 위젯 (Tocplus 대체) ─────────────────── */
.chat-fab{ position:fixed; right:22px; bottom:22px; z-index:80;
  width:60px; height:60px; border-radius:50%; border:0;
  background:var(--brand); color:#fff; cursor:pointer;
  box-shadow:0 10px 30px color-mix(in srgb,var(--brand) 40%,transparent);
  display:grid; place-items:center; transition:transform .2s var(--ease) }
.chat-fab:hover{ transform:scale(1.06) }
.chat-fab svg{ width:26px; height:26px }
.chat-panel{ position:fixed; right:22px; bottom:94px; z-index:80;
  width:min(340px, calc(100vw - 44px));
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:0 24px 60px rgba(0,0,0,.16);
  overflow:hidden; opacity:0; visibility:hidden;
  transform:translateY(12px); transition:.22s var(--ease) }
.chat-panel[data-open="true"]{ opacity:1; visibility:visible; transform:none }
.chat-head{ background:var(--ink); color:var(--paper); padding:20px 22px }
.chat-head b{ display:block; font-size:1.02rem }
.chat-head span{ font-size:.82rem; opacity:.7 }
.chat-body{ padding:20px 22px 24px; display:grid; gap:10px }
.chat-body label{ font-size:.8rem; font-weight:700; color:var(--text-mute) }
.chat-body input,.chat-body textarea{ width:100%; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text); font:inherit; font-size:.94rem }
.chat-body textarea{ min-height:84px; resize:vertical }
.chat-body .btn{ width:100%; justify-content:center; margin-top:6px }
.chat-note{ font-size:.76rem; color:var(--text-mute); text-align:center; margin-top:4px }

/* ── 반응형 ───────────────────────────────────────── */
@media(max-width:860px){
  .menu{ display:none }
  .burger{ display:block }
  .ft-in{ grid-template-columns:1fr; gap:28px }
  .nav .btn{ display:none }
}
@media(prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
}

/* 닫힌 사이트 카드 — 링크 없음 */
.pf-card[data-closed="true"]{ cursor:default; opacity:.86 }
.pf-card[data-closed="true"]:hover{ transform:none; border-color:var(--line) }
.pf-card[data-closed="true"] .pf-thumb::after{ content:"현재 운영 종료"; position:absolute;
  left:14px; top:14px; font-size:.7rem; font-weight:700; padding:5px 10px;
  border-radius:999px; background:color-mix(in srgb,var(--ink) 62%,transparent); color:var(--paper) }

/* ══════════════════════════════════════════════════════════
   v2 — 밀도 보강 (히어로 모자이크 · 마퀴 · 다크섹션 · 리빌)
   ══════════════════════════════════════════════════════════ */

/* ── 히어로 2단 ─────────────────────────────────────── */
.hero-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px);
  align-items:center }
.hero-txt{ position:relative; z-index:2 }
.hero .eyebrow{ display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); margin-bottom:20px }
.hero .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--brand) }

/* 포트폴리오 모자이크 — 첫 화면에서 실적이 바로 보이게 */
.mosaic{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  height:clamp(380px,52vw,560px); overflow:hidden;
  -webkit-mask-image:linear-gradient(#0000,#000 11%,#000 89%,#0000);
          mask-image:linear-gradient(#0000,#000 11%,#000 89%,#0000) }
.mos-col{ display:grid; gap:12px; align-content:start;
  animation:mosUp 40s linear infinite; will-change:transform }
.mos-col:nth-child(2){ animation-name:mosDown; animation-duration:52s }
.mos-col:nth-child(3){ animation-duration:46s }
.mos-col img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top;
  border-radius:var(--r-md); border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.06) }
@keyframes mosUp  { from{transform:translateY(0)}     to{transform:translateY(-50%)} }
@keyframes mosDown{ from{transform:translateY(-50%)}  to{transform:translateY(0)} }

/* ── 클라이언트 워드마크 마퀴 ───────────────────────── */
.marq{ overflow:hidden; border-block:1px solid var(--line);
  padding-block:clamp(18px,2.4vw,26px); background:var(--surface);
  -webkit-mask-image:linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000);
          mask-image:linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000) }
.marq-track{ display:flex; gap:clamp(34px,5vw,64px); width:max-content;
  animation:marq 38s linear infinite; will-change:transform }
.marq b{ font-size:clamp(.95rem,1.6vw,1.12rem); font-weight:700; white-space:nowrap;
  color:var(--text-mute); letter-spacing:-.01em; transition:color .2s }
.marq b::after{ content:"·"; margin-left:clamp(17px,2.5vw,32px); opacity:.4 }
.marq:hover b{ color:var(--text) }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* ── 다크 섹션 ──────────────────────────────────────── */
.dark{ background:var(--ink); color:var(--paper) }
.dark .sec-p,.dark .pf-body p{ color:color-mix(in srgb,var(--paper) 60%,var(--ink)) }
.dark .sec-h,.dark h3{ color:var(--paper) }
.dark .chip{ border-color:color-mix(in srgb,var(--paper) 22%,var(--ink));
  color:color-mix(in srgb,var(--paper) 62%,var(--ink)) }
.dark .chip:hover{ color:var(--paper) }
.dark .chip[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff }
.dark .pf-card{ background:color-mix(in srgb,var(--paper) 5%,var(--ink));
  border-color:color-mix(in srgb,var(--paper) 13%,var(--ink)) }
.dark .pf-card:hover{ border-color:var(--brand) }
.dark .pf-thumb{ background:linear-gradient(140deg,
  color-mix(in srgb,var(--brand) 22%,var(--ink)), color-mix(in srgb,var(--paper) 7%,var(--ink))) }
.dark .pf-thumb .nm{ color:var(--paper) }
.dark .pf-tags i{ background:color-mix(in srgb,var(--brand) 26%,var(--ink));
  color:color-mix(in srgb,var(--paper) 92%,var(--brand)) }
.dark .btn-2{ color:var(--paper); border-color:color-mix(in srgb,var(--paper) 28%,var(--ink)) }

/* 썸네일 hover — 살짝 확대 */
.pf-thumb{ overflow:hidden }
.pf-thumb img{ transition:transform .5s var(--ease) }
.pf-card:hover .pf-thumb img{ transform:scale(1.05) }

/* ── 숫자바 강화 ────────────────────────────────────── */
.stats-in{ position:relative }
.stat{ position:relative; padding-left:20px }
.stat::before{ content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:3px; border-radius:2px; background:var(--brand); opacity:.55 }
.stat b{ font-variant-numeric:tabular-nums }

/* ── 스크롤 리빌 ────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease) }
.rv.in{ opacity:1; transform:none }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s }

/* ── 반응형 ─────────────────────────────────────────── */
@media(max-width:900px){
  .hero-in{ grid-template-columns:1fr; gap:36px }
  .mosaic{ height:300px; grid-template-columns:repeat(4,1fr) }
}
@media(prefers-reduced-motion:reduce){
  .mos-col,.marq-track{ animation:none }
  .rv{ opacity:1; transform:none }
}

/* ══════════════════════════════════════════════════════════
   v3 — 리빌 완화 · 타이포 정밀화 · 가독성
   ══════════════════════════════════════════════════════════ */

/* 리빌: 완전히 사라지지 않게. 빠르게 스크롤해도 빈 화면이 안 보인다 */
.rv{ opacity:.28; transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .55s var(--ease) }
.rv.in{ opacity:1; transform:none }

/* ── 타이포 정밀화 ──────────────────────────────────── */
/* 큰 글자는 자간을 좁히고 행간을 붙인다. 작은 글자는 반대. */
h1{ line-height:1.16; letter-spacing:-.028em }
h2{ line-height:1.22; letter-spacing:-.022em }
h3{ line-height:1.32; letter-spacing:-.015em }
.sec-p,.svc-card p,.step p,.faq .a{ line-height:1.78 }

/* 영문 라벨과 숫자는 세리프로 — 서체 2종 규칙 안에서 격을 올린다 */
.eyebrow{ font-family:"Instrument Serif",var(--serif); font-style:italic;
  font-weight:400; font-size:.95rem; text-transform:none; letter-spacing:.01em }
.stat b,.step::before{ font-family:"Instrument Serif",var(--serif);
  font-weight:400; letter-spacing:-.01em }
.stat b{ font-size:clamp(2.4rem,5vw,3.6rem) }
.step::before{ font-size:2rem; opacity:.85 }

/* 히어로 숫자 강조도 동일 계열로 */
.hero h1 em{ font-family:"Instrument Serif",var(--serif); font-style:italic;
  font-weight:400; letter-spacing:0 }

/* 가독성 — 본문 최대폭과 색 대비 */
.sec-p{ max-width:58ch }
.hero p{ max-width:44ch; line-height:1.72 }
.svc-card ul{ line-height:2.05; font-size:.9rem }

/* 링크 밑줄 — 본문 안 링크는 눈에 보이게 */
.faq .a a,.ft ul a{ text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,currentColor 35%,transparent) }

/* 포커스 표시 — 키보드 사용자 */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
summary:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px }

/* 선택 영역 */
::selection{ background:color-mix(in srgb,var(--brand) 24%,transparent) }

/* ══════════════════════════════════════════════════════════
   견적 계산기
   ══════════════════════════════════════════════════════════ */
.q-grid{ display:grid; grid-template-columns:1.35fr .85fr; gap:clamp(24px,3.4vw,44px);
  margin-top:52px; align-items:start }
.q-form{ display:grid; gap:clamp(26px,3vw,38px) }
.q-row{ display:grid; gap:12px }
.q-lb{ font-size:.92rem; font-weight:700; color:var(--text);
  display:flex; align-items:baseline; gap:10px }
.q-lb b{ font-family:"Instrument Serif",var(--serif); font-weight:400;
  font-size:1.24rem; color:var(--brand) }
.q-help{ font-size:.82rem; color:var(--text-mute); line-height:1.6 }

/* 세그먼트 버튼 */
.q-seg{ display:flex; gap:8px; flex-wrap:wrap }
.q-seg button{ flex:1 1 auto; min-width:120px; padding:15px 18px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper);
  color:var(--text-mute); font:inherit; font-size:.95rem; font-weight:700;
  cursor:pointer; transition:.18s var(--ease) }
.q-seg button:hover{ border-color:var(--text-mute); color:var(--text) }
.q-seg button[aria-checked="true"]{ background:var(--brand); border-color:var(--brand); color:#fff }
.q-seg-sm button{ padding:12px 16px; font-size:.9rem; min-width:100px }

/* 슬라이더 */
#qPages{ -webkit-appearance:none; appearance:none; width:100%; height:6px;
  border-radius:999px; background:var(--surface-2); outline:none }
#qPages::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px;
  border-radius:50%; background:var(--brand); cursor:grab;
  border:4px solid var(--paper); box-shadow:0 2px 10px rgba(0,0,0,.18) }
#qPages::-moz-range-thumb{ width:22px; height:22px; border-radius:50%;
  background:var(--brand); cursor:grab; border:4px solid var(--paper) }

/* 기능 체크 */
.q-opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px }
.q-opt{ display:flex; gap:12px; align-items:flex-start; padding:15px 17px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper);
  cursor:pointer; transition:.18s var(--ease) }
.q-opt:hover{ border-color:var(--text-mute) }
.q-opt:has(input:checked){ border-color:var(--brand); background:var(--brand-soft) }
.q-opt input{ margin:2px 0 0; width:18px; height:18px; accent-color:var(--brand); cursor:pointer }
.q-opt b{ display:block; font-size:.94rem; font-weight:700 }
.q-opt i{ display:block; font-style:normal; font-size:.8rem;
  color:var(--text-mute); margin-top:3px; line-height:1.5 }

/* 결과 패널 */
.q-out{ position:sticky; top:96px; background:var(--ink); color:var(--paper);
  border-radius:var(--r-lg); padding:clamp(26px,3vw,34px) }
.q-out-lb{ font-size:.84rem; font-weight:700;
  color:color-mix(in srgb,var(--paper) 55%,var(--ink)); margin-bottom:12px }
.q-price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  font-family:"Instrument Serif",var(--serif); line-height:1 }
.q-price b{ font-size:clamp(2rem,3.6vw,2.7rem); font-weight:400;
  font-variant-numeric:tabular-nums }
.q-price span{ font-size:1.3rem; opacity:.5 }
.q-price i{ font-style:normal; font-size:1.1rem; font-family:var(--sans);
  font-weight:700; margin-left:4px }
.q-vat{ font-size:.8rem; color:color-mix(in srgb,var(--paper) 45%,var(--ink)); margin-top:10px }

.q-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0;
  padding:18px 0; border-block:1px solid color-mix(in srgb,var(--paper) 14%,var(--ink)) }
.q-meta div{ text-align:center }
.q-meta dt{ font-size:.72rem; color:color-mix(in srgb,var(--paper) 48%,var(--ink));
  margin-bottom:6px }
.q-meta dd{ margin:0; font-size:.92rem; font-weight:700 }

.q-list{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:9px;
  font-size:.86rem; color:color-mix(in srgb,var(--paper) 70%,var(--ink)) }
.q-list li{ display:flex; justify-content:space-between; gap:12px }
.q-list li b{ color:var(--paper) }
.q-list li span{ font-variant-numeric:tabular-nums; white-space:nowrap }

.q-out .btn{ width:100%; justify-content:center }
.q-note{ font-size:.76rem; line-height:1.6; margin-top:14px; text-align:center;
  color:color-mix(in srgb,var(--paper) 42%,var(--ink)) }

@media(max-width:900px){
  .q-grid{ grid-template-columns:1fr }
  .q-out{ position:static }
}

/* ══════════════════════════════════════════════════════════
   v4 — 글자 크기 상향 · 방문자 조절 버튼
   ══════════════════════════════════════════════════════════ */

/* 작게 잡혀 있던 곳들을 기준 스케일에 맞춘다 */
.svc-card p,.pf-body p,.step p,.q-help{ font-size:var(--f-sm) }
.svc-card ul{ font-size:var(--f-sm); line-height:2 }
.ft{ font-size:var(--f-sm) }
.ft ul{ line-height:2.15 }
.q-opt b{ font-size:var(--f-sm) }
.q-opt i{ font-size:.86rem }
.q-lb,.faq summary{ font-size:calc(var(--f-body) * 1.02) }
.menu{ font-size:var(--f-sm) }
.chat-body input,.chat-body textarea{ font-size:var(--f-sm) }
.q-meta dd{ font-size:var(--f-sm) }
.q-list{ font-size:.92rem }

/* ── 글자 크기 조절 ─────────────────────────────────────
   기업 담당자·대표가 보는 사이트다. 눈이 편한 크기는 사람마다 다르다.
   고른 값은 브라우저에 저장돼 다음 방문에도 유지된다.            */
.fs-ctl{ display:flex; align-items:center; gap:2px; margin-right:14px;
  border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--surface) }
.fs-ctl button{ width:30px; height:30px; border:0; border-radius:50%; cursor:pointer;
  background:transparent; color:var(--text-mute); font:inherit; font-weight:800;
  line-height:1; transition:.16s var(--ease) }
.fs-ctl button:hover{ color:var(--text); background:var(--surface-2) }
.fs-ctl button[aria-pressed="true"]{ background:var(--brand); color:#fff }
.fs-ctl .s{ font-size:.76rem } .fs-ctl .m{ font-size:.92rem } .fs-ctl .l{ font-size:1.06rem }

@media(max-width:860px){ .fs-ctl{ display:none } }

/* ══════════════════════════════════════════════════════════
   v5 — 좌우 폭 활용 · 한국어 줄바꿈 · 큰 글씨 모드 대응
   ══════════════════════════════════════════════════════════ */

/* 히어로 — 텍스트에 폭을 더 준다 */
.hero-in{ grid-template-columns:1.12fr .88fr; gap:clamp(36px,4.5vw,80px) }
.hero h1{ max-width:none }                 /* ch 제한 해제 — keep-all 이 대신 잡는다 */
.hero p{ max-width:52ch }
.hero .eyebrow{ margin-bottom:22px }

/* 본문 폭 — 글자가 커져도 한 줄이 너무 짧아지지 않게 */
.sec-p{ max-width:66ch }

/* 서비스 카드 — 넓은 화면에서 3열 유지, 카드 안 여백 확대 */
.svc{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px }
.svc-card{ padding:clamp(30px,2.6vw,42px) clamp(26px,2.2vw,36px) }

/* 포트폴리오 — 넓은 화면에서 4열까지 */
.pf-grid{ grid-template-columns:repeat(auto-fill,minmax(290px,1fr)) }

/* 프로세스 5단계 — 넓은 화면에서 한 줄 */
.steps{ grid-template-columns:repeat(auto-fit,minmax(215px,1fr)) }

/* FAQ — 컨테이너가 넓어진 만큼 함께 */
.faq{ max-width:900px }

/* ── 큰 글씨 모드에서 무너지지 않게 ─────────────────────
   글자를 키우면 칸이 좁아져 줄바꿈이 지저분해진다.
   배율이 올라가면 열 수를 줄여 한 줄에 들어가는 글자 수를 지킨다. */
html[data-fs="l"] .svc,
html[data-fs="xl"] .svc{ grid-template-columns:repeat(auto-fit,minmax(340px,1fr)) }
html[data-fs="xl"] .steps{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) }
html[data-fs="xl"] .q-opts{ grid-template-columns:repeat(auto-fit,minmax(270px,1fr)) }
html[data-fs="xl"] .hero-in{ grid-template-columns:1.25fr .75fr }
html[data-fs="xl"] .hero p{ max-width:46ch }
html[data-fs="xl"] .sec-p{ max-width:58ch }

/* 초광폭 화면 — 1920 이상에서 더 넓게 */
@media(min-width:1800px){
  :root{ --wrap:1480px }
  .pf-grid{ grid-template-columns:repeat(4,1fr) }
}

/* 태블릿 */
@media(max-width:1100px){
  .hero-in{ grid-template-columns:1fr .8fr }
}

/* ══════════════════════════════════════════════════════════
   v6 — 상담창 닫기 · 상단 이동 · 고객사 링크 · 오시는 길
   ══════════════════════════════════════════════════════════ */

/* 상담창 닫기 */
.chat-head{ position:relative; padding-right:56px }
.chat-close{ position:absolute; right:14px; top:14px; width:34px; height:34px;
  border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  background:color-mix(in srgb,var(--paper) 14%,transparent); color:var(--paper);
  font-size:1.15rem; line-height:1; transition:.16s var(--ease) }
.chat-close:hover{ background:color-mix(in srgb,var(--paper) 26%,transparent) }

/* 상단으로 */
.to-top{ position:fixed; right:22px; bottom:94px; z-index:79;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--paper); color:var(--text);
  display:grid; place-items:center; box-shadow:0 6px 22px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:.24s var(--ease) }
.to-top[data-show="true"]{ opacity:1; visibility:visible; transform:none }
.to-top:hover{ border-color:var(--brand); color:var(--brand) }
.to-top svg{ width:20px; height:20px }
/* 상담창이 열려 있으면 겹치지 않게 위로 */
body:has(.chat-panel[data-open="true"]) .to-top{ bottom:auto; top:96px }

/* 고객사 마퀴 — 링크 */
.marq a{ display:inline-block; transition:color .18s }
.marq a:hover b{ color:var(--brand) }
.marq span.off{ cursor:default }

/* ── 오시는 길 ─────────────────────────────────────── */
.map-wrap{ display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(20px,2.6vw,32px); margin-top:52px; align-items:stretch }
.map-box{ position:relative; min-height:clamp(320px,38vw,460px);
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--surface) }
#naverMap{ position:absolute; inset:0 }
.map-fallback{ position:absolute; inset:0; display:grid; place-items:center;
  text-align:center; padding:32px; gap:14px; align-content:center }
.map-fallback p{ color:var(--text-mute); font-size:var(--f-sm); line-height:1.7 }
.map-photo{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--surface); display:grid; grid-template-rows:1fr auto }
.map-photo img{ width:100%; height:100%; object-fit:cover; min-height:200px }
.map-photo .cap{ padding:16px 20px; font-size:.86rem; color:var(--text-mute) }
.map-info{ display:grid; gap:16px; align-content:start; padding:clamp(24px,2.4vw,32px);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface) }
.map-info dl{ margin:0; display:grid; gap:14px }
.map-info dt{ font-size:.8rem; font-weight:700; color:var(--text-mute); margin-bottom:4px }
.map-info dd{ margin:0; font-size:var(--f-sm); font-weight:600; line-height:1.6 }
.map-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
.map-btns .btn{ padding:12px 18px; font-size:.9rem }

@media(max-width:900px){
  .map-wrap{ grid-template-columns:1fr }
  .to-top{ right:18px; bottom:88px; width:44px; height:44px }
}

/* 🚨 지도 컨테이너 높이 확정
   #naverMap 이 absolute 라 부모가 실제 높이를 갖고 있어야 한다.
   min-height 만으로는 grid 자식일 때 0 이 될 수 있다. */
.map-box{ height:clamp(340px,40vw,480px) }
#naverMap{ width:100%; height:100% }