/* 에이스홈픽스 화장실 담배냄새 — 공기 흐름·환풍구 화면
   안개 회보라 바탕 · 남청 잉크 · 환기 민트 · 담뱃불 주황 / Diphylleia(제목) + 시스템 고딕(본문)
   휴대폰 기준으로 먼저 짜고 넓은 화면에서 칸을 늘린다. 숨은 조작(슬라이더·가로 넘김) 없음. */
:root{
 --mist:#eeedf4; --mist2:#e3e1ee; --paper:#fff; --ink:#1d2342; --ink2:#3b4268; --ink3:#5d6385;
 --mint:#128c6e; --mint2:#2fc39c; --mint-l:#dcf4ec; --lilac:#8f88b3; --lilac-l:#e6e2f3;
 --ember:#e8552a; --ember-l:#ffe6dc; --red:#d11f1f; --foil1:#c7cad3; --foil2:#f4f5f8;
 --r:14px; --cut:22px;
 --serif:'Diphylleia','Nanum Myeongjo','AppleMyungjo',serif;
 --sans:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mist);color:var(--ink);font:17px/1.72 var(--sans);word-break:keep-all;overflow-wrap:anywhere;padding-bottom:84px}
img{max-width:100%;height:auto;display:block}
a{color:var(--mint)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.35;letter-spacing:-.01em;margin:0 0 .5em}
h2{font-size:1.6rem}
h3{font-size:1.2rem}
p{margin:0 0 .9em}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:50}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--ember);outline-offset:2px}

/* ── 머리: 그릴 로고 + 루버 메뉴 ─────────────────── */
.hd{background:var(--paper);border-bottom:1px solid var(--mist2)}
.hd-in{max-width:1080px;margin:0 auto;padding:10px 16px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo svg{width:38px;height:38px;flex:none}
.g-rim{fill:var(--ink)} .g-ring{fill:none;stroke:var(--mint2);stroke-width:2.4}
.g-bar{stroke:#fff;stroke-width:1.6} .g-hub{fill:var(--ember)}
.logo-t{display:flex;flex-direction:column;line-height:1.15}
.logo-t b{font-family:var(--serif);font-weight:400;font-size:1.3rem;white-space:nowrap}
.logo-t .kw{font-style:normal;font-size:.8rem;font-weight:700;color:var(--mint);letter-spacing:.02em;white-space:nowrap}
.louver{background:var(--lilac-l);border-bottom:2px solid var(--ink)}
.louver ul{list-style:none;margin:0 auto;padding:0 8px;max-width:1080px;display:grid;grid-template-columns:repeat(4,1fr)}
.louver li{position:relative}
.louver a{display:flex;align-items:center;justify-content:center;min-height:50px;padding:10px 4px 8px;color:var(--ink);text-decoration:none;
 font-weight:700;font-size:.92rem;text-align:center;line-height:1.25;position:relative}
.louver a::before{content:"";position:absolute;left:6px;right:6px;top:5px;height:5px;border-radius:3px;
 background:repeating-linear-gradient(115deg,var(--ink) 0 5px,transparent 5px 9px);opacity:.55}
.louver li+li a{border-left:1px solid rgba(29,35,66,.18)}
.louver a:hover,.louver a:focus-visible{background:var(--paper)}
.louver a:hover::before{background:repeating-linear-gradient(115deg,var(--mint2) 0 5px,transparent 5px 9px);opacity:1}

/* ── 버튼 ─────────────────────────────────────── */
.cta{display:grid;grid-template-columns:1fr 1.25fr;gap:10px;margin:16px 0}
.cta a{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:999px;text-decoration:none;font-weight:800;font-size:1.05rem;padding:8px 12px;text-align:center}
.b-sms{background:var(--mint2);color:var(--ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.b-call{background:var(--paper);color:var(--ink);border:2px solid var(--ink);white-space:nowrap;letter-spacing:.01em}
.cta-hero .b-call{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.b-sms:hover{background:#56d6b3} .b-call:hover{background:var(--mist)} .cta-hero .b-call:hover{background:rgba(255,255,255,.08)}

/* ── 전후 사진: 은박 덕트 테두리 + 공기 흐름 화살표 ─── */
.pr{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;border-radius:12px;
 background:repeating-linear-gradient(90deg,var(--foil1) 0 3px,var(--foil2) 3px 7px)}
.pr figure{margin:0;position:relative;border-radius:8px;overflow:hidden;background:var(--mist2);aspect-ratio:3/4}
.pr img{width:100%;height:100%;object-fit:cover}
.pr.big figure{aspect-ratio:4/5}
.lb{position:absolute;left:6px;top:6px;z-index:1;font-size:.78rem;font-weight:800;padding:3px 9px;border-radius:999px;line-height:1.4;white-space:nowrap}
.lb-b{background:var(--lilac-l);color:var(--ink)}
.lb-a{background:var(--mint2);color:var(--ink)}
.flow{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--ink);
 box-shadow:0 0 0 3px var(--foil2)}
.flow::after{content:"";position:absolute;left:10px;top:11px;border:6px solid transparent;border-left:10px solid var(--mint2);border-right:0}

/* ── 첫 화면 ───────────────────────────────────── */
.hero{background:linear-gradient(168deg,#1d2342 0%,#2c2a52 55%,#3d3766 100%);color:#fff;position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px)}
.hero::before{width:260px;height:260px;right:-80px;top:-60px;background:radial-gradient(circle,rgba(143,136,179,.45),transparent 65%)}
.hero::after{width:220px;height:220px;left:-90px;top:180px;background:radial-gradient(circle,rgba(143,136,179,.3),transparent 65%)}
.hero-in{position:relative;max-width:760px;margin:0 auto;padding:22px 16px 26px}
.kick{font-size:.82rem;font-weight:800;letter-spacing:.06em;color:var(--mint);margin:0 0 .4em}
.hero .kick{color:var(--mint2)}
.hero h1{font-size:2.15rem;margin:0 0 16px}
.hero h1 span{display:block;font-size:1.25rem;color:#cfd0e6;margin-top:6px}
.hero-pair{display:block;text-decoration:none;color:#fff}
.hp-cap{display:block;font-size:.86rem;color:#c3c5dc;margin-top:8px;line-height:1.5}
.hero .lead{color:#e6e6f2;font-size:1rem;margin:4px 0 0}
.hero .lead b{color:#fff;font-weight:700;background:linear-gradient(transparent 62%,rgba(47,195,156,.35) 62%)}

/* ── 공통 구획 ─────────────────────────────────── */
.sec{max-width:1080px;margin:0 auto;padding:30px 16px 8px}
.sub{color:var(--ink3);margin-top:-.3em}
.answer{background:var(--paper);border-left:5px solid var(--mint2);padding:14px 16px;border-radius:0 var(--r) var(--r) 0}
.more{display:inline-flex;align-items:center;gap:6px;margin:16px 0 4px;font-weight:800;color:var(--ink);text-decoration:none;
 border-bottom:3px solid var(--mint2);padding-bottom:2px}
.more::after{content:"→";color:var(--mint)}
.wrap{max-width:1080px;margin:0 auto;padding:18px 16px 0}
.wrap .sec{padding-left:0;padding-right:0}

/* ── 냄새 길 단면도 ─────────────────────────────── */
.path-sec{padding-top:26px}
.bldg{position:relative;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);padding:0 0 0 30px;overflow:hidden}
.shaft{position:absolute;left:0;top:0;bottom:0;width:30px;background:repeating-linear-gradient(0deg,var(--foil1) 0 3px,var(--foil2) 3px 8px);border-right:2px solid var(--ink)}
.shaft::after{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:0;border-left:3px dashed var(--lilac)}
.fl{position:relative;padding:10px 14px;border-bottom:2px solid var(--ink)}
.fl:last-child{border-bottom:0}
.fl-up,.fl-down{background:var(--mist2);color:var(--ink3);font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:10px;min-height:42px}
.puff{display:inline-block;width:46px;height:16px;border-radius:999px;background:radial-gradient(circle at 20% 50%,var(--lilac) 0 7px,transparent 8px),
 radial-gradient(circle at 55% 45%,var(--lilac) 0 8px,transparent 9px),radial-gradient(circle at 85% 55%,var(--lilac) 0 6px,transparent 7px);opacity:.7}
.fl-mine{background:var(--paper);padding:12px}
.fl-l{margin:0 0 8px;font-weight:800;font-size:.86rem;color:var(--mint)}
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.room{display:flex;flex-direction:column;justify-content:space-between;gap:4px;min-height:84px;padding:10px 11px;border-radius:10px;text-decoration:none;
 color:var(--ink);background:var(--mist);border:1.5px solid var(--mist2);position:relative}
.room b{font-family:var(--serif);font-weight:400;font-size:1.08rem;line-height:1.3}
.room small{font-size:.8rem;font-weight:700;color:var(--mint)}
.room small::after{content:" →"}
.room:hover{border-color:var(--mint2);background:var(--mint-l)}

/* ── 사례 카드: 모서리 깎인 카드 + 은박 띠 ─────────── */
.vcs{display:grid;grid-template-columns:1fr;gap:18px}
.vc{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border-radius:var(--r);overflow:hidden;
 clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);box-shadow:0 1px 0 var(--mist2)}
.vc .pr{border-radius:0}
.foil{display:block;height:8px;background:repeating-linear-gradient(90deg,var(--foil1) 0 2px,var(--foil2) 2px 6px)}
.vc-b{display:block;padding:12px 14px 16px}
.kind{display:inline-block;font-size:.78rem;font-weight:800;color:var(--ember);background:var(--ember-l);padding:2px 10px;border-radius:999px;margin-bottom:6px}
.vc-t{display:block;font-family:var(--serif);font-weight:400;font-size:1.18rem;line-height:1.4;margin-bottom:8px}
.row{display:grid;grid-template-columns:4.6em 1fr;gap:6px;font-size:.92rem;line-height:1.55;padding:4px 0;border-top:1px dashed var(--mist2)}
.row b{color:var(--ink3);white-space:nowrap}
.vc:hover .vc-t{color:var(--mint)}

/* ── 질문 카드: 연기 방울 줄 ─────────────────────── */
.pfs{position:relative;display:grid;gap:14px;padding-left:24px}
.pfs::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;border-left:3px dotted var(--lilac)}
.pf{position:relative;background:var(--paper);border-radius:var(--r);padding:14px 16px}
.pf::before{content:"";position:absolute;left:-23px;top:16px;width:18px;height:18px;border-radius:50%;background:var(--lilac-l);border:3px solid var(--lilac)}
.pf-tag{display:inline-block;font-size:.76rem;font-weight:800;color:var(--paper);background:var(--ink);padding:2px 10px;border-radius:999px;margin:0 0 6px}
.pf h3{font-size:1.2rem;margin-bottom:.35em}
.pf-a{font-weight:700;color:var(--ink);background:var(--mint-l);border-radius:8px;padding:8px 10px}
.pf-more{color:var(--ink2);font-size:.96rem}
.pf-link{font-weight:800;color:var(--mint);text-decoration:none}
.pf-link::after{content:" →"}

/* ── 서비스 카드: 그릴 테 사진 가로형 ─────────────── */
.svcs{display:grid;gap:12px}
.svc{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;background:var(--paper);border-radius:var(--r);padding:10px;text-decoration:none;color:var(--ink);
 border:1.5px solid var(--mist2)}
.svc-img{display:block;width:96px;height:96px;border-radius:14px;overflow:hidden;border:5px solid var(--ink);
 box-shadow:inset 0 0 0 3px var(--foil1)}
.svc-img img{width:100%;height:100%;object-fit:cover}
.svc-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.svc-k{font-size:.76rem;font-weight:800;color:var(--mint)}
.svc-t strong{font-family:var(--serif);font-weight:400;font-size:1.18rem;line-height:1.3}
.svc-w{font-size:.9rem;color:var(--ink3);line-height:1.45}
.svc:hover{border-color:var(--mint2)}

/* ── 방법 고르기 ───────────────────────────────── */
.ways{display:grid;gap:12px}
.way{display:grid;grid-template-columns:104px 1fr;gap:12px;text-decoration:none;color:var(--ink);background:var(--paper);border-radius:var(--r);overflow:hidden}
.way-img{display:block;height:100%;min-height:124px}
.way-img img{width:100%;height:100%;object-fit:cover}
.way-t{display:flex;flex-direction:column;gap:4px;padding:10px 12px 10px 0;font-size:.92rem;line-height:1.5}
.way-t strong{font-family:var(--serif);font-weight:400;font-size:1.15rem;color:var(--ink)}
.way-t b{display:block;font-size:.74rem;color:var(--mint)}

/* ── 작업 순서: 덕트 마디 ───────────────────────── */
.duct{list-style:none;margin:0;padding:0;display:grid;gap:0}
.duct li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:0 12px;padding:0 0 18px}
.duct li::before{content:"";position:absolute;left:15px;top:36px;bottom:0;width:14px;
 background:repeating-linear-gradient(0deg,var(--foil1) 0 3px,var(--foil2) 3px 7px);border-radius:3px}
.duct li:last-child::before{display:none}
.duct .num{grid-row:span 2;width:44px;height:36px;border-radius:10px;background:var(--ink);color:var(--mint2);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem;position:relative;z-index:1}
.duct figure{margin:0 0 8px;border-radius:10px;overflow:hidden;background:var(--mist2)}
.duct figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.duct li>div{grid-column:2}
.duct .stage{font-size:.78rem;font-weight:800;color:var(--ember);margin:0 0 2px}
.duct h3{font-size:1.1rem;margin-bottom:.25em}
.duct li>div p:last-child{margin:0;color:var(--ink2);font-size:.95rem}

/* ── 문의 영역: 천장 점검구 판 ───────────────────── */
.hatch-wrap{max-width:1080px;margin:26px auto 6px;padding:0 16px}
.hatch{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:6px;padding:26px 18px 18px;
 box-shadow:inset 0 0 0 6px var(--mist),inset 0 0 0 8px var(--mist2)}
.screw{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,var(--foil2) 0 30%,var(--foil1) 31%);border:1.5px solid var(--ink3)}
.screw::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:2px;background:var(--ink3);transform:rotate(35deg)}
.s1{left:9px;top:9px}.s2{right:9px;top:9px}.s3{left:9px;bottom:9px}.s4{right:9px;bottom:9px}
.hatch-k{font-size:.8rem;font-weight:800;color:var(--mint);letter-spacing:.05em;margin:0 0 .2em}
.hatch h2{font-size:1.45rem}
.hatch-lead{color:var(--ink2)}
.hf{margin:0 0 14px;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden}
.hf-r{display:grid;grid-template-columns:5.2em 1fr;border-top:1.5px solid var(--mist2)}
.hf-r:first-child{border-top:0}
.hf dt{background:var(--ink);color:#fff;font-weight:700;padding:8px 10px;font-size:.92rem}
.hf dd{margin:0;padding:8px 10px;font-size:.92rem;color:var(--ink3)}
.hatch-sub{font-weight:800;margin:0 0 6px}
.hatch-shots{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.hatch-shots li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font-size:.94rem;line-height:1.55}
.hatch-shots .no{width:30px;height:30px;border-radius:50%;background:var(--mint-l);color:var(--mint);font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--mint2)}
.hatch-shots b{display:block}
.hatch-note{font-size:.9rem;color:var(--ink3);margin:0}

/* ── 질문 답변(펼쳐 보기) ───────────────────────── */
.qa{display:grid;gap:10px}
.qa details{background:var(--paper);border-radius:var(--r);border:1.5px solid var(--mist2)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 28px;gap:10px;align-items:center;padding:14px 14px 14px 16px;font-weight:700;line-height:1.5}
.qa summary::-webkit-details-marker{display:none}
.pl{width:28px;height:28px;border-radius:50%;background:var(--mist);position:relative}
.pl::before,.pl::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:2px;background:var(--ink)}
.pl::after{transform:rotate(90deg);transition:transform .15s}
.qa details[open] .pl{background:var(--mint2)}
.qa details[open] .pl::after{transform:rotate(0)}
.qa details p{margin:0;padding:0 16px 16px;color:var(--ink2)}

/* ── 출장 지역: 권역 탭 + 환기구 칩 ───────────────── */
.area-red{color:var(--red);font-size:1.05rem}
.zones{display:grid;gap:18px}
.zone h3{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
.zone h3 span{background:var(--ink);color:#fff;padding:3px 14px;border-radius:10px 10px 0 0;font-size:1.05rem}
.zone h3 small{font-family:var(--sans);font-size:.82rem;color:var(--ink3)}
.zone ul{list-style:none;margin:0;padding:10px;display:flex;flex-wrap:wrap;gap:7px;background:var(--paper);border-top:3px solid var(--ink);border-radius:0 var(--r) var(--r) var(--r)}
.zone a{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 7px;border-radius:999px;background:var(--mist);color:var(--ink);text-decoration:none;font-size:.9rem;line-height:1.35}
.zone a::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--ink3);
 background:repeating-linear-gradient(0deg,transparent 0 2px,var(--ink3) 2px 3px)}
.zone a:hover{background:var(--mint-l)}

/* ── 하위 페이지 머리 ───────────────────────────── */
.ph{background:linear-gradient(168deg,#1d2342 0%,#302d58 100%);color:#fff;position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;right:-70px;top:-50px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(143,136,179,.4),transparent 65%);pointer-events:none}
.ph::after{content:"";display:block;height:10px;background:repeating-linear-gradient(115deg,var(--lilac) 0 6px,transparent 6px 11px);opacity:.6}
.ph-in{position:relative;max-width:1080px;margin:0 auto;padding:14px 16px 20px}
.crumb{font-size:.82rem;color:#c3c5dc;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:4px 6px}
.crumb a{color:#fff}
.ph-label{display:inline-block;font-size:.8rem;font-weight:800;color:var(--ink);background:var(--mint2);padding:2px 10px;border-radius:999px;margin:0 0 8px}
.ph h1{font-size:1.75rem}
.ph .lead{color:#e6e6f2;font-size:1rem}
.upd{font-size:.8rem;color:#b7b9d3;margin:0}
.ph .b-call{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}

/* ── 하위 페이지 본문 요소 ───────────────────────── */
.pts{margin:16px 0;padding:0;list-style:none;counter-reset:p;display:grid;gap:8px}
.pts li{counter-increment:p;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;background:var(--paper);border-radius:10px;padding:10px 12px}
.pts li::before{content:counter(p);width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--mint2);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.toc{background:var(--paper);border:2px dashed var(--lilac);border-radius:var(--r);padding:12px 16px;margin:14px 0 4px}
.toc p{font-weight:800;margin:0 0 4px}
.toc ol{margin:0;padding-left:1.3em}
.toc a{color:var(--ink)}
.facts{display:grid;gap:10px}
.facts>div{background:var(--paper);border-radius:var(--r);padding:12px 14px;border-top:4px solid var(--mint2)}
.facts h3{font-size:1.08rem}
.facts p{margin:0;color:var(--ink2);font-size:.95rem}
.cmp{display:grid;gap:10px}
.cmp-r{background:var(--paper);border-radius:var(--r);padding:12px 14px;border:1.5px solid var(--mist2)}
.cmp-r strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.15rem;margin-bottom:4px}
.cmp-r p{margin:0 0 4px;font-size:.94rem}
.cmp-r b{display:inline-block;min-width:5.2em;color:var(--mint);font-size:.84rem}
.chk{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chk li{background:var(--paper);border-radius:10px;padding:10px 12px 10px 40px;position:relative;font-size:.95rem}
.chk li::before{content:"";position:absolute;left:12px;top:14px;width:16px;height:16px;border-radius:4px;border:2.5px solid var(--mint2)}
.chk b{display:block}
.chk span{color:var(--ink2)}
.sum{margin:0;background:var(--paper);border-radius:var(--r);overflow:hidden}
.sum>div{display:grid;grid-template-columns:5.4em 1fr;border-top:1px solid var(--mist2)}
.sum>div:first-child{border-top:0}
.sum dt{background:var(--mist2);font-weight:800;padding:10px;font-size:.92rem}
.sum dd{margin:0;padding:10px 12px;font-size:.95rem}
.sum ul{margin:0;padding-left:1.1em}
.ex{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ex figure{margin:0;background:var(--paper);border-radius:var(--r);overflow:hidden}
.ex img{width:100%;aspect-ratio:1/1;object-fit:cover}
.ex figcaption{padding:8px 10px;font-size:.86rem;line-height:1.5}
.ex figcaption b{display:block;font-size:.92rem}
.tip{background:var(--ember-l);border-radius:10px;padding:10px 12px;margin-top:10px;font-size:.95rem}
.flow-list{margin:0;padding-left:1.4em;display:grid;gap:6px}
.local p{background:var(--paper);border-radius:10px;padding:12px 14px}
.rqs{display:grid;gap:10px}
.rq{display:grid;grid-template-columns:88px 1fr;gap:12px;background:var(--paper);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink)}
.rq-img{display:block;min-height:120px}
.rq-img img{width:100%;height:100%;object-fit:cover}
.rq-t{display:flex;flex-direction:column;gap:4px;padding:10px 12px 10px 0;font-size:.92rem;line-height:1.5}
.rq-t strong{font-size:1rem}
.rq-t em{font-style:normal;font-size:.8rem;color:var(--mint);font-weight:700}
.warn{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.warn li{background:var(--ember-l);border-radius:8px;padding:8px 12px 8px 30px;position:relative;font-size:.94rem}
.warn li::before{content:"!";position:absolute;left:11px;top:8px;font-weight:900;color:var(--ember)}
.why-pick{background:var(--lilac-l);border-radius:10px;padding:10px 12px;font-size:.95rem}
.links h2{margin-top:10px}
.rl{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:7px}
.rl a{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;font-size:.9rem;border:1.5px solid var(--mist2)}
.sec h2 small{font-family:var(--sans);font-size:.85rem;color:var(--ink3)}
.sec h2 a{color:var(--ink)}

/* ── 하단 고정 [번호][문자보내기] ─────────────────── */
.dock{position:fixed;left:10px;right:10px;bottom:10px;z-index:40;display:grid;grid-template-columns:1.25fr 1fr;gap:6px;padding:6px;border-radius:999px;
 background:var(--ink);box-shadow:0 8px 24px rgba(29,35,66,.35);max-width:520px;margin:0 auto;transition:opacity .2s,transform .2s}
.dock a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;text-decoration:none;font-weight:800;font-size:1rem;padding:6px 10px;white-space:nowrap}
.dk-call{color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.dk-sms{background:var(--mint2);color:var(--ink)}
.dock.hide{opacity:0;transform:translateY(16px);visibility:hidden;pointer-events:none}

/* ── 좁은 화면 ─────────────────────────────────── */
@media (max-width:374px){
 body{font-size:16px}
 .hero h1{font-size:1.85rem}
 .hero h1 span{font-size:1.1rem}
 .logo-t b{font-size:1.15rem}
 .louver a{font-size:.84rem;padding:10px 2px 8px}
 .cta{grid-template-columns:1fr;gap:8px}
 .dock{grid-template-columns:1.3fr 1fr;left:6px;right:6px}
 .dock a{font-size:.92rem;padding:6px 6px}
 .room b{font-size:1rem}
 .svc{grid-template-columns:80px 1fr}
 .svc-img{width:80px;height:80px}
 .way{grid-template-columns:88px 1fr}
 .row{grid-template-columns:1fr;gap:0}
}

/* ── 넓은 화면 ─────────────────────────────────── */
@media (min-width:700px){
 h2{font-size:1.9rem}
 .hero-in{padding:34px 24px 36px}
 .hero h1{font-size:2.8rem}
 .hero h1 span{font-size:1.5rem}
 .cta{max-width:520px}
 .rooms{grid-template-columns:repeat(3,1fr)}
 .vcs{grid-template-columns:1fr 1fr}
 .pfs{grid-template-columns:1fr 1fr;padding-left:0}
 .pfs::before,.pf::before{display:none}
 .pf{border-top:4px solid var(--lilac)}
 .ways{grid-template-columns:1fr 1fr}
 .facts{grid-template-columns:repeat(3,1fr)}
 .cmp{grid-template-columns:repeat(3,1fr)}
 .rqs{grid-template-columns:1fr 1fr}
 .hatch{padding:32px 30px 24px}
 .duct{grid-template-columns:1fr 1fr;gap:0 24px}
 .ph-in{padding:22px 24px 26px}
 .ph h1{font-size:2.2rem}
}
@media (min-width:1000px){
 .hero-in{max-width:1080px;display:grid;grid-template-columns:1fr 1.05fr;gap:0 44px;align-items:start}
 .hero-in>.kick{grid-column:1;grid-row:1}
 .hero-in>h1{grid-column:1;grid-row:2}
 .hero-in>.cta{grid-column:1;grid-row:3}
 .hero-in>.lead{grid-column:1;grid-row:4}
 .hero-pair{grid-column:2;grid-row:1/span 5}
 .vcs{grid-template-columns:repeat(3,1fr)}
 .svcs{grid-template-columns:repeat(3,1fr)}
 .svc{grid-template-columns:110px 1fr}
 .svc-img{width:110px;height:110px}
 .duct{grid-template-columns:repeat(3,1fr)}
}