/* ==========================================================================
   여수기업 사이트 공통 스타일
   기준: mockup-alt/blue-minimal.html (확정 2026-09-11)
   앞부분(토큰 ~ 푸터)은 확정본에서 옮긴 것이다. 값을 바꾸지 않았다.
   뒷부분 「서브 쪽 부품」은 같은 말투로 새로 더한 것이다.
   ========================================================================== */

/* 본문 — 가변 폰트 하나로 굵기 전부 */
@font-face{
  font-family:"PretendardV";
  src:url("../fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight:45 920; font-display:swap;
}
/* 제목 — Gothic A1 (OFL). 가변이 아니라 굵기마다 파일이 따로다.
   ⚠️ 본문·버튼·작은 라벨에는 쓰지 않는다. 제목에만 쓸 때 두 글꼴이 구분된다. */
@font-face{font-family:"GothicA1";src:url("../fonts/GothicA1-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"GothicA1";src:url("../fonts/GothicA1-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"GothicA1";src:url("../fonts/GothicA1-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"GothicA1";src:url("../fonts/GothicA1-900.woff2") format("woff2");font-weight:900;font-display:swap}

/* ── 색 (확정: 네이비 + 아이스) ─────────────────────────────
   ⚠️ 아이스(--aqua-l)는 어두운 곳에서만 글자로 쓴다. 밝은 바탕 대비 1.46 — 안 보인다.
      밝은 바탕의 작은 글씨는 --aqua-mid(대비 5.24). */
:root{
  --aqua:#123A6B;
  --aqua-d:#0D2A4F;
  --aqua-l:#A8D4F0;
  --aqua-mid:#2E6BA0;
  --aqua-bg:#E3F0FA;
  --aqua-bg2:#FBFCFE;
  --paper:#F4F7FA;
  --navy:#0A2440;
  --ink:#11222C;
  --ink-2:#4C606C;
  --ink-3:#84959F;
  --line:#DDE6EF;
  --font:"PretendardV","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --disp:"GothicA1","PretendardV","Malgun Gothic",sans-serif;
  --pad:clamp(78px,9vw,150px);
  --gut:clamp(20px,4vw,48px);
}

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

.ic{
  width:1.15em; height:1.15em; flex:none; vertical-align:-.18em;
  stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.ic-lg{width:26px; height:26px}
.ic-xl{width:30px; height:30px}

/* ── 밑줄형 버튼 (narafoundation 참고) ─────────────── */
.ul{
  display:inline-flex; align-items:center; gap:9px;
  font:inherit; cursor:pointer; background:none; border:none; padding:0 0 11px;
  font-size:15px; font-weight:500; letter-spacing:-.02em;
  border-bottom:2px solid currentColor;
  opacity:.5; transition:opacity .25s, color .25s;
}
.ul:hover{opacity:.85}
.ul.on,.ul[aria-selected="true"],.ul[aria-current="page"]{opacity:1}
.ul-primary{font-size:17px; font-weight:600; border-bottom-width:2px; padding-bottom:12px; opacity:1}
.ul-sub{font-size:14px; font-weight:400; border-bottom-width:1px; opacity:.62}
.ul-sub:hover{opacity:.9}
.ul-light{color:#fff}
.ul-dark{color:var(--navy)}
.ul-dark[aria-selected="true"],.ul-dark[aria-current="page"]{color:var(--aqua)}

html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--ink); font-family:var(--font);
  line-height:1.72; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:anywhere;
}
body.lock{overflow:hidden}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
.inner{width:100%; max-width:1320px; margin:0 auto; padding:0 var(--gut)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.rise{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.rise.on{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .rise{opacity:1; transform:none; transition:none} }

/* ── 헤더: 사진 위 투명 → 스크롤하면 흰색 ─────────────
   드롭다운을 열었을 때도 흰색으로 바꾼다. 투명한 채 흰 판이 매달리면 떠 보인다. */
.bar{position:fixed; top:0; left:0; right:0; z-index:80; transition:background .3s, box-shadow .3s}
.bar .inner{display:flex; align-items:center; gap:30px; height:84px; transition:height .3s}
.logo{display:flex; align-items:center; gap:11px; font-family:var(--disp); font-weight:900; font-size:22px; letter-spacing:-.045em; color:#fff; transition:color .3s; white-space:nowrap}
/* 심벌 — 어두운 바탕용/밝은 바탕용 두 장을 겹쳐 두고 머리글 상태에 따라 바꾼다 */
.logo .mk{position:relative; width:38px; height:38px; flex:none; display:block}
.logo .mk img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .3s}
.logo .mk-l{opacity:0}
.logo .lgt{display:flex; align-items:center; gap:11px}
.logo small{font-weight:600; font-size:11.5px; opacity:.75; letter-spacing:.02em}
.nav{display:flex; gap:38px; margin-left:auto; align-self:stretch; font-size:16px; font-weight:700; color:#fff; transition:color .3s}
.gn{position:relative; display:flex; align-items:center}
.gn > a{position:relative; display:inline-flex; align-items:center; gap:4px; padding:6px 0; white-space:nowrap}
.gn > a .ic{width:15px; height:15px; opacity:.6; transition:transform .25s}
.gn:hover > a .ic,.gn:focus-within > a .ic{transform:rotate(180deg)}
.gn > a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--aqua-l); transition:right .25s}
.gn:hover > a::after,.gn.on > a::after{right:0}
.callbtn{
  margin-left:6px; padding:6px 0 9px; font-weight:600; font-size:16px; white-space:nowrap;
  border-bottom:2px solid currentColor; color:#fff; transition:opacity .25s, color .25s;
}
.callbtn:hover{opacity:.75}

.bar.solid,.bar:has(.gn.has:hover),.bar:has(.gn.has:focus-within),.bar.menu-open{
  background:rgba(255,255,255,.97); backdrop-filter:blur(14px); box-shadow:0 2px 20px rgba(10,36,64,.09)
}
.bar.solid .inner,.bar.menu-open .inner{height:70px}
.bar.solid .logo,.bar:has(.gn.has:hover) .logo,.bar:has(.gn.has:focus-within) .logo,.bar.menu-open .logo{color:var(--navy)}
/* 흰 바탕으로 바뀌면 심벌도 원래 색(남색+금색)으로 — 아이스판은 흰 바탕에서 사라진다 */
.bar.solid .mk-d,.bar:has(.gn.has:hover) .mk-d,.bar:has(.gn.has:focus-within) .mk-d,.bar.menu-open .mk-d{opacity:0}
.bar.solid .mk-l,.bar:has(.gn.has:hover) .mk-l,.bar:has(.gn.has:focus-within) .mk-l,.bar.menu-open .mk-l{opacity:1}
.bar.solid .nav,.bar:has(.gn.has:hover) .nav,.bar:has(.gn.has:focus-within) .nav{color:var(--ink-2)}
.bar.solid .gn > a::after,.bar:has(.gn.has:hover) .gn > a::after,.bar:has(.gn.has:focus-within) .gn > a::after{background:var(--aqua-mid)}
.bar.solid .gn.on > a,.bar:has(.gn.has:hover) .gn.on > a{color:var(--navy)}
.bar.solid .callbtn,.bar:has(.gn.has:hover) .callbtn,.bar:has(.gn.has:focus-within) .callbtn,.bar.menu-open .callbtn{color:var(--aqua)}

/* 드롭다운 — 흰 판 + 위쪽 2px 선. 채운 버튼 없이 글자와 선만 */
.dd{
  position:absolute; top:100%; left:-26px; z-index:2;
  min-width:220px; padding:20px 26px 22px; background:#fff;
  border-top:2px solid var(--aqua); box-shadow:0 18px 40px rgba(10,36,64,.12);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s, transform .2s, visibility 0s linear .2s;
}
.gn:hover .dd,.gn:focus-within .dd{opacity:1; visibility:visible; transform:none; transition:opacity .2s, transform .2s}
.dd a,.dd span{display:block; padding:7px 0; font-size:15px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.dd a{transition:color .2s}
.dd a:hover,.dd a[aria-current="page"]{color:var(--navy)}
.dd a[aria-current="page"]{font-weight:700}
.dd b{display:block; margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--aqua-mid)}
.dd-svc{display:grid; grid-template-columns:auto auto; gap:0 44px; min-width:0}
.dd span{color:var(--ink-3)}
.dd span em{font-style:normal; font-size:11.5px; margin-left:8px; color:var(--ink-3); border-bottom:1px solid var(--line)}

/* 햄버거 — 900px 이하에서만 */
.burger{
  display:none; margin-left:auto; width:44px; height:44px; padding:0; border:none; background:none;
  color:#fff; cursor:pointer; position:relative;
}
.burger span{position:absolute; left:10px; right:10px; height:2px; background:currentColor; transition:transform .25s, top .25s}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:26px}
.bar.solid .burger,.bar.menu-open .burger{color:var(--navy)}
.bar.menu-open .burger span:nth-child(1){top:21px; transform:rotate(45deg)}
.bar.menu-open .burger span:nth-child(2){top:21px; transform:rotate(-45deg)}

.drawer{
  position:fixed; inset:0; z-index:75; background:#fff; overflow-y:auto;
  padding:94px var(--gut) 40px;
}
.drawer section{padding:0; border-top:1px solid var(--line)}
.drawer h2{margin:0; padding:20px 0 10px; font-family:var(--disp); font-size:20px; font-weight:800; letter-spacing:-.04em; color:var(--navy)}
.drawer h2 a{display:block}
.drawer ul{list-style:none; margin:0 0 16px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 18px}
.drawer li a,.drawer li span{display:block; padding:8px 0; font-size:15px; color:var(--ink-2)}
.drawer li span{color:var(--ink-3)}
.drawer li a[aria-current="page"]{color:var(--aqua); font-weight:700}
.drawer .dcall{display:flex; gap:26px; flex-wrap:wrap; margin-top:26px; padding-top:26px; border-top:2px solid var(--navy)}

/* ── 홈 히어로 ─────────────────────────────────────── */
.hero{position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--navy)}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease}
.slide.on{opacity:1}
.slide img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 7.5s linear}
.slide.on img{transform:scale(1)}
@media(prefers-reduced-motion:reduce){ .slide img{transform:none; transition:none} }
.hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top,rgba(6,26,40,.92) 0%,rgba(6,26,40,.58) 32%,rgba(6,26,40,.12) 60%,rgba(6,26,40,.52) 100%);
}
.hero .inner{position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(76px,9vh,118px); z-index:3}
.kicker{display:inline-flex; align-items:center; gap:11px; margin-bottom:22px; font-size:13.5px; font-weight:800; letter-spacing:.03em; color:#fff}
.kicker::before{content:""; width:38px; height:3px; border-radius:2px; background:var(--aqua-l)}
.hero h1{
  margin:0 0 22px; color:#fff; font-family:var(--disp); font-weight:900;
  letter-spacing:-.05em; line-height:1.2; font-size:clamp(31px,5.6vw,68px); text-shadow:0 2px 28px rgba(0,0,0,.32);
}
.hero h1 em{font-style:normal; color:#fff}
.hero p{margin:0 0 34px; color:rgba(255,255,255,.93); max-width:46ch; font-size:clamp(15px,1.5vw,19px); text-shadow:0 1px 16px rgba(0,0,0,.36)}
.hero p b{display:block; font-weight:700; color:#fff}
.acts{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 30px}
.ctrl{
  position:absolute; z-index:4; bottom:clamp(76px,9vh,118px); right:var(--gut);
  display:flex; align-items:flex-end; gap:clamp(14px,2vw,26px); color:#fff;
}
@media(min-width:1000px){ .ctrl{right:calc(var(--gut) + 104px)} }
.ctrl .slidetab{min-width:clamp(84px,9vw,118px); justify-content:center; font-size:14px}
.playbtn{
  width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.08); color:#fff; font:inherit; margin-bottom:7px;
  cursor:pointer; display:grid; place-items:center; transition:all .2s; backdrop-filter:blur(6px);
}
.playbtn:hover{background:#fff; color:var(--navy)}
.scrolldown{
  position:absolute; z-index:4; left:50%; transform:translateX(-50%); bottom:26px;
  color:rgba(255,255,255,.8); font-size:11.5px; font-weight:700; letter-spacing:.12em;
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.scrolldown::after{content:""; width:1px; height:26px; background:rgba(255,255,255,.55); animation:drop 1.9s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
@media(prefers-reduced-motion:reduce){ .scrolldown::after{animation:none} }

/* ── 섹션 공통 ──────────────────────────────────── */
section{padding:var(--pad) 0}
.tint{background:var(--paper)}
.shead{margin-bottom:clamp(38px,5vw,64px)}
.shead h2{
  margin:0; font-family:var(--disp); font-size:clamp(27px,4vw,50px); font-weight:900; letter-spacing:-.05em;
  color:var(--navy); line-height:1.24; text-wrap:balance;
}
.shead h2 em{font-style:normal; color:var(--aqua-mid)}
.shead p{margin:14px 0 0; color:var(--ink-2); font-size:clamp(15px,1.4vw,17px); max-width:52ch}
.shead.row{display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px 48px}
.shead.row p{margin:0 0 6px; margin-left:auto; text-align:right}
.shead.row .ul{margin-left:auto; margin-bottom:6px}

/* ── 강점: 사진 블록 ──────────────────────────────── */
.stag{display:grid; gap:30px 22px; grid-template-columns:1fr}
@media(min-width:700px){ .stag{grid-template-columns:repeat(2,1fr); gap:34px 24px} }
@media(min-width:1100px){ .stag{grid-template-columns:repeat(4,1fr); gap:0 26px; align-items:start} }
@media(min-width:1100px){
  .stag article:nth-child(2){margin-top:56px}
  .stag article:nth-child(3){margin-top:18px}
  .stag article:nth-child(4){margin-top:78px}
}
.stag figure{margin:0 0 16px; position:relative; overflow:hidden; border-radius:4px; background:var(--navy)}
.stag img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.stag article:hover img{transform:scale(1.05)}
.stag article:nth-child(1) figure{aspect-ratio:3/4}
.stag article:nth-child(2) figure{aspect-ratio:4/5}
.stag article:nth-child(3) figure{aspect-ratio:1/1}
.stag article:nth-child(4) figure{aspect-ratio:3/4}
.stag figure::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,20,28,.74) 0%,rgba(6,20,28,.30) 46%,rgba(6,20,28,.05) 100%)}
.stag figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 22px 24px;
  color:#fff; font-family:var(--disp); font-size:clamp(18px,1.7vw,21px); font-weight:700; letter-spacing:-.04em;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.stag figcaption b{display:block; font-size:12px; font-weight:700; letter-spacing:.14em; opacity:.7; margin-bottom:8px}
.stag p{margin:0; font-size:14.5px; color:var(--ink-2); padding-right:8px}

/* ── 홈 서비스 탭 ─────────────────────────────────── */
.tabs{display:flex; flex-wrap:wrap; gap:14px clamp(18px,2.6vw,34px); margin-bottom:clamp(30px,4vw,48px)}
.panel{display:none}
.panel.on{display:grid; gap:30px; grid-template-columns:1fr; animation:fade .45s ease}
@media(min-width:960px){ .panel.on{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:56px; align-items:center} }
@keyframes fade{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){ .panel.on{animation:none} }
.panel img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px}
.kind{
  display:inline-block; font-size:12.5px; font-weight:700; color:var(--aqua-mid);
  letter-spacing:.04em; padding:0 0 7px; border-bottom:1px solid var(--aqua-l); margin-bottom:18px;
}
.panel h3{margin:0 0 14px; font-family:var(--disp); font-size:clamp(23px,2.9vw,34px); font-weight:800; letter-spacing:-.045em; color:var(--navy)}
.panel > div > p{margin:0 0 22px; color:var(--ink-2); font-size:16px}
.panel .more{margin-top:30px}
.pills{display:grid; grid-template-columns:1fr; gap:14px 32px}
@media(min-width:520px){ .pills{grid-template-columns:1fr 1fr} }
.pills a{
  display:flex; align-items:center; gap:9px; padding:0 0 10px;
  border-bottom:1px solid var(--line); font-size:15px; font-weight:500; color:var(--navy);
  transition:border-color .2s, color .2s;
}
.pills a .ic{color:var(--aqua-mid); width:1.05em; height:1.05em; margin-left:auto}
.pills a:hover{border-color:var(--aqua); color:var(--aqua)}

/* ── 전·후 슬라이더 ──────────────────────────────── */
.cmp{
  position:relative; overflow:hidden; user-select:none; touch-action:pan-y;
  aspect-ratio:16/9; border-radius:4px; background:#D9E7EE; cursor:ew-resize;
}
/* 사진을 끌면 브라우저 기본 「이미지 끌어다 놓기」가 시작돼 슬라이더가 첫 움직임에서 멈췄다(마우스만).
   사진은 눌리지 않게 하고 상자가 직접 받는다. */
.cmp img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; user-select:none}
.cmp .after{clip-path:inset(0 0 0 50%)}
.cmp .handle{position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; z-index:3; box-shadow:0 0 14px rgba(0,0,0,.3)}
.cmp .handle::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.24);
}
.cmp .handle .ic{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:24px; height:24px; color:var(--aqua); stroke-width:2.2; z-index:1}
.cmp .lb{
  position:absolute; top:22px; z-index:4; font-size:13.5px; font-weight:600;
  padding:0 0 7px; color:#fff; border-bottom:2px solid currentColor; text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.cmp .lb.l{left:20px}
.cmp .lb.r{right:22px; color:var(--aqua-l)}
.facts{display:grid; gap:0 24px; grid-template-columns:repeat(2,1fr); margin:40px 0 0}
@media(min-width:820px){ .facts{grid-template-columns:repeat(4,1fr)} }
.facts.three{grid-template-columns:1fr}
@media(min-width:620px){ .facts.three{grid-template-columns:repeat(3,1fr)} }
.facts div{padding:24px 20px 24px 0; border-top:2px solid var(--navy)}
.facts dt{font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--aqua-mid); margin-bottom:8px}
.facts dd{margin:0; font-family:var(--disp); font-size:clamp(17px,1.9vw,21px); font-weight:700; letter-spacing:-.035em; color:var(--navy)}

/* ── 홈 현장 타일 ─────────────────────────────────── */
.grid{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:720px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .grid{grid-template-columns:repeat(12,1fr)} }
.tile{position:relative; overflow:hidden; border-radius:4px; display:block; background:var(--navy)}
@media(min-width:1100px){
  .tile:nth-child(1){grid-column:span 7; aspect-ratio:16/10}
  .tile:nth-child(2){grid-column:span 5; aspect-ratio:16/10}
  .tile:nth-child(3){grid-column:span 5; aspect-ratio:16/11}
  .tile:nth-child(4){grid-column:span 7; aspect-ratio:16/11}
}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,26,40,.88) 6%,rgba(6,26,40,.22) 48%,transparent 78%)}
.tile .cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:30px 28px; color:#fff}
.tile .cap b{display:block; font-family:var(--disp); font-size:clamp(19px,2.1vw,24px); font-weight:800; letter-spacing:-.04em; margin-bottom:5px}
.tile .cap b::before{content:""; display:block; width:30px; height:3px; border-radius:2px; background:var(--aqua-l); margin-bottom:12px}
.tile .cap span{font-size:14.5px; color:rgba(255,255,255,.82)}
.tile .tile-ic{position:absolute; right:26px; bottom:30px; width:24px; height:24px; color:var(--aqua-l); transition:transform .3s}
.tile:hover .tile-ic{transform:translateX(5px)}
@media(max-width:1099px){ .tile{aspect-ratio:16/10} }

/* ── 마감 띠 ─────────────────────────────────────── */
.cta{position:relative; overflow:hidden; padding:0; background:var(--navy)}
.cta > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05)}
.cta::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,rgba(6,26,40,.86),rgba(18,58,107,.58))}
.cta .inner{position:relative; z-index:2; padding-top:var(--pad); padding-bottom:var(--pad); text-align:center}
.cta h2{margin:0 0 16px; color:#fff; font-family:var(--disp); font-size:clamp(27px,4.2vw,52px); font-weight:900; letter-spacing:-.05em; line-height:1.24}
.cta h2 em{font-style:normal; color:var(--aqua-l)}
.cta p{margin:0 auto 34px; color:rgba(255,255,255,.9); max-width:48ch; font-size:clamp(15px,1.5vw,18px)}
.cta .acts{justify-content:center}

/* ── 고정 버튼 ──────────────────────────────────── */
.float{position:fixed; right:clamp(16px,2.4vw,30px); bottom:clamp(16px,2.4vw,30px); z-index:70; display:grid; gap:11px; justify-items:center}
.float a,.float button{
  min-width:64px; display:grid; place-items:center; gap:6px; text-align:center; padding:14px 12px;
  font:inherit; font-size:11.5px; font-weight:600; line-height:1.2; cursor:pointer;
  background:rgba(10,36,64,.88); color:#fff; border:none; border-top:2px solid var(--aqua-l); transition:opacity .2s;
}
.float a:hover,.float button:hover{opacity:.82}
.float button{min-width:0; padding:12px; background:rgba(255,255,255,.92); color:var(--navy); border-top:2px solid var(--navy)}

/* ── 푸터 ────────────────────────────────────────── */
footer{background:var(--navy); color:#9FB4C9; padding:clamp(56px,6vw,80px) 0 44px; font-size:14.5px}
.fgrid{display:grid; gap:34px; grid-template-columns:1fr}
@media(min-width:860px){ .fgrid{grid-template-columns:1.4fr 1fr 1fr} }
footer h4{margin:0 0 16px; font-family:var(--disp); font-size:16px; font-weight:700; color:var(--aqua-l); letter-spacing:-.025em}
footer p,footer li{margin:0 0 8px}
footer a{border-bottom:1px solid rgba(159,180,201,.45); padding-bottom:1px; transition:color .2s, border-color .2s}
footer a:hover{color:var(--aqua-l); border-color:var(--aqua-l)}
footer ul{list-style:none; padding:0; margin:0}
footer .links{columns:2; column-gap:24px}

/* ==========================================================================
   서브 쪽 부품 (새로 더함)
   ========================================================================== */

/* ── 서브 상단 — 좌우 분할 ───────────────────────────
   서비스 사진 다수가 900~966px 라 전면에 깔면 흐려진다. 사진 칸을 원본 크기 안으로 둔다.
   모바일은 사진이 위, 글이 아래. 투명 헤더가 사진 위에 오므로 위쪽을 어둡게 받친다. */
.phero{position:relative; display:grid; grid-template-columns:1fr; background:var(--navy); color:#fff; padding:0}
.phero figure{margin:0; position:relative; order:-1; aspect-ratio:4/3; max-height:64svh; overflow:hidden; background:var(--aqua-d)}
.phero figure img{width:100%; height:100%; object-fit:cover}
.phero figure::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom,rgba(6,26,40,.66) 0%,rgba(6,26,40,.18) 34%,rgba(6,26,40,0) 55%),
    linear-gradient(to top,rgb(10,36,64) 0%,rgba(10,36,64,.72) 6%,rgba(10,36,64,.28) 15%,rgba(10,36,64,0) 26%);
}
.phero .txt{padding:34px var(--gut) 50px}
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0 0 20px; font-size:13px; color:rgba(255,255,255,.66)}
.crumb a{transition:color .2s}
.crumb a:hover{color:#fff}
.crumb i{width:4px; height:4px; border-radius:50%; background:var(--aqua-l); opacity:.7}
.crumb b{font-weight:600; color:rgba(255,255,255,.9)}
.phero h1{margin:0 0 16px; font-family:var(--disp); font-weight:900; font-size:clamp(32px,4.4vw,58px); letter-spacing:-.05em; line-height:1.18}
.phero h1::before{content:""; display:block; width:38px; height:3px; border-radius:2px; background:var(--aqua-l); margin-bottom:22px}
.phero p{margin:0; max-width:40ch; font-size:clamp(15px,1.45vw,18px); color:rgba(255,255,255,.86)}
.phero .acts{margin-top:32px}
@media(min-width:900px){
  .phero{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); min-height:clamp(480px,66svh,660px)}
  .phero figure{order:0; aspect-ratio:auto; max-height:none}
  .phero figure::after{
    background:
      linear-gradient(to bottom,rgba(6,26,40,.5) 0%,rgba(6,26,40,0) 30%),
      linear-gradient(to right,rgb(10,36,64) 0%,rgba(10,36,64,.94) 6%,rgba(10,36,64,.6) 15%,rgba(10,36,64,.26) 26%,rgba(10,36,64,0) 40%);
  }
  .phero .txt{
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:150px clamp(28px,4vw,72px) clamp(56px,7vh,84px) max(var(--gut), calc((100vw - 1320px) / 2 + 48px));
  }
}

/* 사진 없는 쪽 머리 — 2단계 서비스(현장 사진 대기) */
.phero figure.nophoto{
  background:
    radial-gradient(120% 90% at 82% 18%, color-mix(in srgb, var(--aqua-l) 26%, transparent) 0%, transparent 62%),
    linear-gradient(140deg, var(--navy) 0%, var(--aqua-d) 100%);
  aspect-ratio:16/9; max-height:38svh;
}
.phero figure.nophoto::after{background:none}
.phero figure.nophoto span{
  position:absolute; inset:auto auto 0 0; width:100%; height:100%;
  background-image:linear-gradient(color-mix(in srgb,#fff 10%,transparent) 1px, transparent 1px),
                   linear-gradient(90deg, color-mix(in srgb,#fff 10%,transparent) 1px, transparent 1px);
  background-size:46px 46px; opacity:.5;
}
@media(min-width:900px){ .phero figure.nophoto{aspect-ratio:auto; max-height:none} }

/* ── 쪽 안 메뉴 — 형제 쪽 ────────────────────────── */
.lnb{background:#fff; border-bottom:1px solid var(--line); position:relative; z-index:5}
.lnb .inner{display:flex; gap:clamp(20px,3vw,40px); overflow-x:auto; scrollbar-width:none; padding-top:26px}
.lnb .inner::-webkit-scrollbar{display:none}
.lnb .ul{flex:none; padding-bottom:16px; margin-bottom:-1px; font-size:15.5px}
.lnb .ul[aria-current="page"]{font-weight:700}

/* ── 글 + 사진 두 칸 ─────────────────────────────── */
.split{display:grid; gap:34px; grid-template-columns:1fr; align-items:center}
@media(min-width:960px){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(48px,6vw,96px)} .split.flip > :first-child{order:2} }
.split h2{margin:0 0 20px; font-family:var(--disp); font-size:clamp(26px,3.4vw,42px); font-weight:900; letter-spacing:-.05em; line-height:1.26; color:var(--navy); text-wrap:balance}
.split p{margin:0 0 16px; color:var(--ink-2); font-size:16.5px; max-width:54ch}
.split figure{margin:0}
.split figure img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px}
.split .ul{margin-top:18px}
.split.top{align-items:start}
.split .facts{grid-template-columns:repeat(2,1fr); margin-top:0}
.note{margin:18px 0 0; font-size:13px; color:var(--ink-3)}

/* 대상·범위 낱말 — 알약이 아니라 가운뎃점으로 잇는 글줄 */
.words{display:flex; flex-wrap:wrap; gap:10px 22px; margin:26px 0 0; padding:18px 0 0; border-top:1px solid var(--line); list-style:none}
.words li{font-size:15px; font-weight:500; color:var(--navy)}
.words li::before{content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--aqua-mid); margin:0 9px 0 0; vertical-align:middle}

/* ── 작업 순서 ───────────────────────────────────── */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:0 26px; grid-template-columns:1fr; counter-reset:st}
@media(min-width:640px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .steps{grid-template-columns:repeat(var(--n,4),1fr)} }
.steps li{position:relative; padding:26px 18px 30px 0; border-top:2px solid var(--navy)}
.steps li::before{
  counter-increment:st; content:counter(st, decimal-leading-zero);
  display:block; margin-bottom:16px; font-size:13px; font-weight:800; letter-spacing:.12em; color:var(--aqua-mid);
}
.steps h3{margin:0 0 8px; font-family:var(--disp); font-size:clamp(19px,1.9vw,22px); font-weight:800; letter-spacing:-.04em; color:var(--navy)}
.steps p{margin:0; font-size:15px; color:var(--ink-2)}
/* 진행 방향을 선 끝의 작은 점으로 — 화살표를 늘어놓지 않는다 */
@media(min-width:1000px){
  .steps li::after{content:""; position:absolute; top:-5px; right:-17px; width:8px; height:8px; border-radius:50%; background:var(--aqua-mid)}
  .steps li:last-child::after{display:none}
}

/* ── 사진 목록 (캡션은 사진 아래) ─────────────────── */
.gal{display:grid; gap:34px 22px; grid-template-columns:1fr}
@media(min-width:620px){ .gal{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .gal{grid-template-columns:repeat(3,1fr)} }
.gal figure{margin:0}
.gal .pic{position:relative; overflow:hidden; border-radius:4px; aspect-ratio:4/3; background:var(--paper)}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{padding:14px 0 0}
.gal figcaption b{display:block; font-family:var(--disp); font-size:18px; font-weight:700; letter-spacing:-.035em; color:var(--navy)}
.gal figcaption .d{display:block; font-size:14px; color:var(--ink-2)}
.stage{
  display:inline-block; margin:0 0 8px; padding:0 0 4px; font-size:12px; font-weight:700; letter-spacing:.06em;
  color:var(--aqua-mid); border-bottom:1px solid var(--aqua-l);
}
.stage.fin{color:var(--navy); border-color:var(--navy)}
.sub-h{margin:clamp(56px,7vw,90px) 0 26px; font-family:var(--disp); font-size:clamp(20px,2.2vw,26px); font-weight:800; letter-spacing:-.04em; color:var(--navy)}
.sub-h:first-child{margin-top:0}
.sub-h small{display:block; margin-top:6px; font-family:var(--font); font-size:14.5px; font-weight:400; letter-spacing:0; color:var(--ink-2)}

/* 전·후 나란히 — 해상도가 낮아 슬라이더 대신 */
.pairs{display:grid; gap:34px; grid-template-columns:1fr}
@media(min-width:960px){ .pairs{grid-template-columns:1fr 1fr; gap:40px} }
.pair{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pair figure{margin:0; position:relative}
/* 밝은 사진(흰 냉장고) 위에서도 라벨이 읽히게 위쪽만 어둡게 받친다 — 아이스 글자는 어두운 곳 전용 */
.pair figure::after{content:""; position:absolute; left:0; right:0; top:0; height:38%; border-radius:4px 4px 0 0; background:linear-gradient(to bottom,rgba(6,26,40,.62),rgba(6,26,40,0)); pointer-events:none}
.pair img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:4px}
.pair figcaption{position:absolute; z-index:1; left:14px; top:14px; font-size:13px; font-weight:600; color:#fff; padding:0 0 5px; border-bottom:2px solid currentColor; text-shadow:0 1px 10px rgba(0,0,0,.55)}
.pair figure + figure figcaption{color:var(--aqua-l)}
.pair-cap{grid-column:1/-1; margin:6px 0 0; font-size:14.5px; color:var(--ink-2)}
.pair-cap b{font-family:var(--disp); font-weight:700; color:var(--navy); margin-right:8px}

/* ── 서비스 카드 (회사소개) ────────────────────────── */
.svcs{display:grid; gap:36px 22px; grid-template-columns:1fr}
@media(min-width:620px){ .svcs{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .svcs{grid-template-columns:repeat(3,1fr)} }
.svcs a{display:block}
.svcs .pic{overflow:hidden; border-radius:4px; aspect-ratio:4/3; background:var(--navy)}
.svcs img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.svcs a:hover img{transform:scale(1.05)}
.svcs .row{display:flex; align-items:center; gap:10px; padding:16px 0 12px; border-bottom:1px solid var(--line); transition:border-color .2s}
.svcs a:hover .row{border-color:var(--navy)}
.svcs b{font-family:var(--disp); font-size:20px; font-weight:800; letter-spacing:-.04em; color:var(--navy)}
.svcs small{font-size:13px; color:var(--aqua-mid); font-weight:600}
.svcs .ic{margin-left:auto; color:var(--aqua-mid)}

/* ── 정보 표 (회사 정보·지점) ─────────────────────── */
.info{margin:0; border-top:2px solid var(--navy)}
.info div{display:grid; grid-template-columns:1fr; gap:2px 24px; padding:16px 0; border-bottom:1px solid var(--line)}
@media(min-width:620px){ .info div{grid-template-columns:150px minmax(0,1fr)} }
.info dt{font-size:13.5px; font-weight:700; color:var(--aqua-mid)}
.info dd{margin:0; font-size:16px; color:var(--ink)}
.info dd a{border-bottom:1px solid var(--line)}
.info dd a:hover{border-color:var(--navy)}

/* ── 자료 대기 자리 — 비었다는 사실을 설계된 모습으로 ── */
.wait{
  display:grid; place-content:center; gap:10px; text-align:center; padding:34px 28px;
  border-radius:4px; background:var(--aqua-bg2); border:1px dashed color-mix(in srgb, var(--navy) 30%, transparent);
}
.wait .ic{width:32px; height:32px; margin:0 auto; color:var(--aqua-mid); opacity:.6}
.wait b{font-family:var(--disp); font-size:19px; font-weight:700; letter-spacing:-.03em; color:var(--navy)}
.wait span{font-size:14px; color:var(--ink-2); max-width:34ch; margin:0 auto; line-height:1.6}
/* 확인 전 초안 띠 — 2단계 서비스(고객 회신 전). DRAFT_SOON=False 면 안 나온다 */
.draftbar{background:var(--aqua-bg2); border-bottom:1px solid color-mix(in srgb, var(--navy) 14%, transparent)}
.draftbar .inner{display:flex; align-items:center; gap:12px; padding:14px var(--gut)}
.draftbar .ic{width:20px; height:20px; flex:none; color:var(--aqua-mid)}
.draftbar p{margin:0; font-size:14px; line-height:1.6; color:var(--ink-2)}
.draftbar b{color:var(--navy)}
.cert figcaption small{display:block; margin-top:4px; font-size:12px; color:var(--ink-3); font-weight:500}
.wait-wide{padding:64px 28px}          /* 2단계 서비스 쪽 사진 자리 */
.wait-wide span{max-width:44ch}
.wait-wide a{white-space:nowrap}
.wait-chip{
  display:inline-block; margin-left:8px; padding:0 0 2px; font-size:12px; font-weight:600; font-style:normal;
  color:var(--ink-3); border-bottom:1px dashed var(--ink-3); vertical-align:2px; white-space:nowrap;
}

/* ── 대표 인사말 ─────────────────────────────────── */
.greet .sign{margin:34px 0 0; font-size:14px; color:var(--ink-2)}
.greet .sign b{display:block; margin-top:4px; font-family:var(--disp); font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--navy)}
.letter{padding-top:6px}
.letter p{margin:0 0 18px; font-size:16.5px; line-height:1.9; color:var(--ink); max-width:60ch}
.letter p:first-child{font-family:var(--disp); font-size:19px; font-weight:700; letter-spacing:-.03em; color:var(--navy)}

/* ── 신고증 카드 — 사본이 들어오면 사진, 아니면 증서 모양 빈 틀 ── */
.certs{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cert{margin:0}
.cert .paper{aspect-ratio:3/4; overflow:hidden; border-radius:4px; background:#fff; box-shadow:0 12px 30px rgba(10,36,64,.10); border:1px solid var(--line)}
.cert .paper img{width:100%; height:100%; object-fit:contain; background:#fff}
.cert .paper .wait{height:100%; border:none; border-radius:0}
.cert figcaption{padding:14px 0 0; font-family:var(--disp); font-size:17px; font-weight:700; letter-spacing:-.03em; color:var(--navy)}

/* ── 지점 ────────────────────────────────────────── */
.branches{display:grid; gap:56px 48px; grid-template-columns:1fr}
@media(min-width:960px){ .branches{grid-template-columns:1fr 1fr} }
.branch h2{display:flex; align-items:baseline; gap:12px; margin:0 0 20px; font-family:var(--disp); font-size:clamp(26px,3vw,36px); font-weight:900; letter-spacing:-.05em; color:var(--navy)}
.branch h2 small{font-family:var(--font); font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--aqua-mid)}
.branch .acts{margin-top:26px}
.copy{font:inherit; cursor:pointer}

/* 출장 지역 개략도 — 실제 지도가 아님을 캡션에 밝힌다 */
.area{display:grid; gap:40px; grid-template-columns:1fr; align-items:center}
@media(min-width:960px){ .area{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} }
/* ⚠️ .area svg 로 쓰면 버튼 안 아이콘까지 100% 로 늘어난다(실제로 깨졌음) */
.area figure > svg{width:100%; height:auto; display:block; background:var(--navy); border-radius:4px}
.area figure{margin:0}
.area figcaption{margin-top:10px; font-size:13px; color:var(--ink-3)}

/* ── 법정 주기 ───────────────────────────────────── */
.cycles{display:grid; gap:0; grid-template-columns:1fr}
.cycle{display:grid; gap:18px 40px; grid-template-columns:1fr; padding:30px 0; border-top:2px solid var(--navy)}
.cycle:last-child{border-bottom:1px solid var(--line)}
@media(min-width:900px){ .cycle{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} }
.cycle ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.cycle li{position:relative; padding-left:16px; font-size:15.5px; color:var(--ink)}
.cycle li::before{content:""; position:absolute; left:0; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--aqua-mid)}
.cycle li small{color:var(--ink-3); font-size:13.5px; margin-left:4px}
.freq{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-content:start}
.freq div{padding-top:4px}
.freq dt{font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--aqua-mid); margin-bottom:6px}
.freq dd{margin:0; font-family:var(--disp); font-size:clamp(20px,2.3vw,27px); font-weight:800; letter-spacing:-.04em; color:var(--navy); line-height:1.25}
.freq dd small{display:block; font-family:var(--font); font-size:13px; font-weight:500; letter-spacing:0; color:var(--ink-2)}
.src{margin:18px 0 0; font-size:13px; color:var(--ink-3)}

/* ── 현장 사례 모아보기 ───────────────────────────── */
.filter{display:flex; flex-wrap:wrap; gap:14px clamp(18px,2.4vw,32px); margin-bottom:clamp(34px,4vw,52px)}
.faqtool .filter{margin:0}
.gal.two{grid-template-columns:1fr}
@media(min-width:620px){ .gal.two{grid-template-columns:repeat(2,1fr)} }
.gal.tall .pic{aspect-ratio:3/4}
.filter .ul sup{font-size:11px; font-weight:600; margin-left:2px; opacity:.7; vertical-align:4px}
.gal figcaption a{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:13.5px; font-weight:600; color:var(--aqua-mid); border-bottom:1px solid var(--aqua-l); padding-bottom:2px}
.gal figcaption a:hover{color:var(--navy); border-color:var(--navy)}

/* ── 양식 — 입력칸도 밑줄형 ───────────────────────── */
.formwrap{display:grid; gap:56px; grid-template-columns:1fr}
@media(min-width:1000px){ .formwrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:clamp(56px,7vw,110px)} }
.aside h2{margin:0 0 18px; font-family:var(--disp); font-size:clamp(24px,2.8vw,34px); font-weight:900; letter-spacing:-.05em; color:var(--navy); line-height:1.25}
.aside .tel{display:inline-flex; align-items:center; gap:12px; margin:6px 0 24px; padding-bottom:10px; border-bottom:2px solid var(--navy); font-family:var(--disp); font-size:clamp(28px,3.2vw,40px); font-weight:900; letter-spacing:-.03em; color:var(--navy)}
.aside .tel .ic{width:.8em; height:.8em; color:var(--aqua-mid)}
@media(min-width:1000px){ .aside{position:sticky; top:110px; align-self:start} .aside .info div{grid-template-columns:84px minmax(0,1fr)} }
.form{display:grid; gap:30px 32px; grid-template-columns:1fr}
@media(min-width:720px){ .form{grid-template-columns:1fr 1fr} }
.f{display:grid; gap:8px; min-width:0}
.f.full{grid-column:1/-1}
.f > label,.f > .lab{font-size:14px; font-weight:700; color:var(--navy)}
.f .req{color:var(--aqua-mid); margin-left:3px}
.f input[type=text],.f input[type=tel],.f input[type=date],.f input[type=search],.f select,.f textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink); background:transparent;
  border:none; border-bottom:1.5px solid var(--line); border-radius:0; padding:10px 0 12px;
  transition:border-color .2s; outline:none;
}
.f textarea{min-height:130px; resize:vertical; line-height:1.6}
.f input:focus,.f select:focus,.f textarea:focus{border-bottom-color:var(--navy)}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-3)}
.f .hint{font-size:13px; color:var(--ink-3)}
.f input[type=file]{font:inherit; font-size:14px; color:var(--ink-2); padding:10px 0}
.f input[type=file]::file-selector-button{font:inherit; font-size:14px; font-weight:600; color:var(--navy); background:none; border:none; border-bottom:2px solid var(--navy); padding:0 0 6px; margin-right:16px; cursor:pointer}
/* 고르기 — 동그라미 대신 밑줄 */
.opts{display:flex; flex-wrap:wrap; gap:12px 26px; margin:4px 0 0; padding:0; border:none}
.opts label{position:relative; cursor:pointer}
.opts input{position:absolute; opacity:0; width:1px; height:1px}
.opts span{display:inline-block; padding:0 0 8px; font-size:15px; font-weight:500; color:var(--navy); border-bottom:2px solid currentColor; opacity:.42; transition:opacity .2s, color .2s}
.opts label:hover span{opacity:.75}
.opts input:checked + span{opacity:1; color:var(--aqua); font-weight:700}
.opts input:focus-visible + span{outline:2px solid var(--aqua-mid); outline-offset:4px}
.agree{display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--ink)}
.agree input{width:18px; height:18px; margin:4px 0 0; accent-color:var(--aqua); flex:none}
details.policy{margin-top:4px; font-size:14px; color:var(--ink-2)}
details.policy summary{cursor:pointer; color:var(--aqua-mid); font-weight:600; width:max-content; border-bottom:1px solid var(--aqua-l)}
details.policy dl{margin:12px 0 0; display:grid; grid-template-columns:auto 1fr; gap:6px 18px}
details.policy dt{font-weight:700; color:var(--navy)}
details.policy dd{margin:0}
.send{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; padding-top:10px}
.send .hint{font-size:13px; color:var(--ink-3)}
.done{grid-column:1/-1; padding:26px 0 0; border-top:2px solid var(--navy)}
.done b{display:block; font-family:var(--disp); font-size:21px; font-weight:800; letter-spacing:-.04em; color:var(--navy); margin-bottom:8px}
.done p{margin:0; color:var(--ink-2); font-size:15px}
.done .done-call{margin-top:14px}
.done .done-tel{margin-top:10px; opacity:1}
.err{color:#A8402D; font-size:13px; min-height:1em}

/* ── 자주 하는 질문 ───────────────────────────────── */
.faqtool{display:flex; flex-wrap:wrap; align-items:flex-end; gap:22px 40px; margin-bottom:clamp(30px,4vw,48px)}
.faqtool .search{position:relative; flex:1 1 280px; max-width:420px}
.faqtool .search .ic{position:absolute; left:0; top:13px; color:var(--ink-3)}
.faqtool .search input{padding-left:30px}
.faq{border-top:2px solid var(--navy)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:16px; padding:22px 0;
  font-size:clamp(16px,1.5vw,18px); font-weight:600; color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary em{font-style:normal; flex:none; width:64px; padding-top:3px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--aqua-mid)}
.faq summary .ic{margin-left:auto; flex:none; margin-top:4px; color:var(--aqua-mid); transition:transform .25s}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq .a{padding:0 40px 26px 80px; color:var(--ink-2); font-size:15.5px}
.faq .a p{margin:0 0 10px}
.faq .a a{color:var(--aqua-mid); border-bottom:1px solid var(--aqua-l)}
@media(max-width:620px){ .faq summary em{display:none} .faq .a{padding:0 0 22px} }
.empty-msg{padding:40px 0; text-align:center; color:var(--ink-3)}

/* ── 후기 ────────────────────────────────────────── */
.first{display:grid; gap:40px; grid-template-columns:1fr; align-items:center}
@media(min-width:960px){ .first{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px} }
.sample{position:relative; padding:30px 30px 34px; border-radius:4px; background:#fff; border:1px dashed color-mix(in srgb, var(--navy) 30%, transparent)}
.sample .tag{position:absolute; top:-11px; left:24px; padding:0 10px; background:var(--paper); font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--aqua-mid)}
.sample i{display:block; height:10px; border-radius:5px; background:var(--line); margin-bottom:12px}
.sample .meta{display:flex; gap:10px; margin-bottom:22px}
.sample .meta i{width:84px; margin:0; background:var(--aqua-bg)}
.sample .meta i + i{width:56px}
.sample .reply{margin-top:24px; padding:18px 0 0; border-top:1px solid var(--line)}
.sample .reply i{background:#EAF0F5}

@media(max-width:900px){
  .nav,.bar .callbtn{display:none}
  .burger{display:block}
  .hero .inner{bottom:150px}
  /* 오른쪽 아래 고정 버튼(58px)이 셋째 탭과 멈춤 버튼을 덮었다. 그 폭만큼 비우고 탭을 줄인다. */
  .ctrl{bottom:80px; left:var(--gut); right:84px; gap:12px}
  .ctrl .slidetab{min-width:0; font-size:13px}
  .playbtn{width:32px; height:32px; margin-bottom:6px}
  .shead.row p{margin-left:0; text-align:left}
  .shead.row .ul{margin-left:0}
  .float a{min-width:0; padding:13px}
  .float a span{display:none}
}