/* 에이스홈픽스 현관문 수리 — 철문 점검 콘셉트. 콘크리트 회색 바탕·흑연색 철판·산화철 방청 빨강·크롬 은색,
   Stylish(제목) + 시스템 고딕(본문) + 고정폭 숫자·표찰.
   흑연색 문틀 안 문짝 모양 첫 화면(호수판 눈썹 글, 문짝 왼쪽 경첩 마디, 아래 문턱과 빨간 틈 선, 철판 액자 전후 사진),
   경첩 마디처럼 이어진 메뉴, 문 한 짝을 위쪽·경첩 쪽·가운데·아래쪽으로 나눈 증상 지도, 왼쪽 경첩 마디가 달린 문짝 사례 카드,
   모서리를 깎은 부품 꼬리표 서비스 카드, 점선으로 이어 내려가는 판단 순서도, 구멍 뚫린 점검 꼬리표 정보 카드,
   경첩 핀 레일 작업 순서, 외시경(문 렌즈)이 달린 철문 문의 영역, 호수판 모양 지역 목록, 킥플레이트 모양 고정 버튼.
   (기존 tile·tilelift·sinkdrain·bathdoor·washbasin·kitchenfaucet·popup·hood·ceilingfan·mirror·grabbar·toilet·baseboard와
   색·글꼴·배치가 겹치지 않게 새로 설계)
   휴대폰(390px) 기준으로 쓰고 넓은 화면에서 칸을 늘린다. 가로로 넘기거나 눌러야 바뀌는 조작은 없다. */
:root{
  --con:#e6e4df; --con2:#d6d2ca; --paper:#faf9f6; --ink:#1c1f22; --ink2:#4b5259; --line:#c9c5bd;
  --steel:#3a4148; --steel-d:#262b30; --steel-l:#6b747c; --chrome:#c7ccd1; --chrome-l:#eceef0;
  --primer:#a8321f; --primer-d:#7e2314; --primer-l:#f6e3dc; --red:#c3161c;
  --head:'Stylish','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;color:var(--ink);font:16px/1.72 var(--body);word-break:keep-all;overflow-wrap:anywhere;padding-bottom:88px;
  background-color:var(--con);
  background-image:radial-gradient(rgba(28,31,34,.07) 1px,transparent 1.6px),radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.6px);
  background-size:15px 15px,21px 21px;background-position:0 0,8px 5px}
img{display:block;max-width:100%;height:auto}
a{color:var(--primer-d)}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.28;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:1.9rem}
h3{font-size:1.36rem}
p{margin:0 0 .8em}
.ic{width:1.1em;height:1.1em;flex:none}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:99}
.skip:focus{left:8px}
.pn{white-space:nowrap;font-family:var(--mono);letter-spacing:-.02em}

/* 머리: 흑연 철판 + 표찰 키워드 + 경첩 마디 메뉴 */
.hd{background:var(--steel-d);color:#f4f2ee}
.hd-in{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 14px 8px}
.logo{display:flex;align-items:center;gap:7px;text-decoration:none;color:#f4f2ee;white-space:nowrap}
.logo .mark{width:28px;height:28px;flex:none}
.logo b{font-family:var(--head);font-weight:400;font-size:1.5rem;line-height:1.1}
.kw{position:relative;font-family:var(--head);font-size:1.12rem;line-height:1.2;color:var(--ink);white-space:nowrap;
  background:linear-gradient(180deg,#fbfbfc,#cfd4d8);border:1px solid #8d959c;border-radius:3px;padding:2px 16px 1px}
.kw::before,.kw::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#8d959c}
.kw::before{left:5px}.kw::after{right:5px}
.hd-tel{display:none;margin-left:auto;align-items:center;gap:6px;font-weight:700;text-decoration:none;color:#f4f2ee}
.knuckle{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-width:1080px;margin:0 auto;padding:4px 10px 10px}
.knuckle::before{content:"";position:absolute;left:10px;right:10px;top:calc(50% - 3px);height:4px;background:#8d959c;border-radius:2px}
.knuckle a{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 2px;text-align:center;text-decoration:none;
  font-family:var(--head);font-size:1.12rem;line-height:1.1;color:var(--ink);border-radius:7px;
  background:linear-gradient(180deg,#f7f8f9 0,#d5d9dd 45%,#a9b0b6 100%);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 1px 0 #000}
.knuckle a[aria-current]{background:linear-gradient(180deg,#d4553f 0,#a8321f 55%,#7e2314 100%);color:#fff}

/* 첫 화면: 흑연 문틀 안 문짝, 아래 문턱과 빨간 틈 선 */
.hero{padding:16px 12px 0}
.jamb{max-width:1080px;margin:0 auto;background:var(--steel);padding:10px 10px 0;box-shadow:inset 0 0 0 2px var(--steel-d)}
.leaf{position:relative;background:var(--paper);padding:20px 16px 22px 20px;box-shadow:inset 0 0 0 1px #b9b5ad,inset 0 0 0 9px var(--paper),inset 0 0 0 10px #dcd8d0}
.leaf::before,.leaf::after{content:"";position:absolute;left:-7px;width:9px;height:52px;border-radius:3px;
  background:linear-gradient(90deg,#8d959c,#eceef0 45%,#8d959c)}
.leaf::before{top:12%}.leaf::after{bottom:12%}
.plate{display:inline-block;margin:0 0 10px;padding:2px 12px;font:700 .8rem/1.6 var(--mono);letter-spacing:.04em;color:var(--steel-d);
  background:linear-gradient(180deg,#fbfbfc,#d2d6da);border:1px solid #8d959c;border-radius:3px}
.hero h1{font-size:2.2rem;margin:0 0 .45em}
.hero h1 .hl{display:inline-block;background:var(--primer);color:#fff;padding:0 .28em;box-shadow:0 5px 0 var(--steel-d)}
.hero .lead{font-size:1rem;margin:0}
.hero .lead b{background:linear-gradient(transparent 60%,var(--primer-l) 60%)}
.hero-ba{display:block;margin-top:18px;text-decoration:none;color:var(--ink)}
.hero-ba .ba{gap:8px}
.hero-ba figure{border:4px solid var(--steel-d);background:var(--steel-d)}
.hero-ba figure img{aspect-ratio:4/5;object-fit:cover;width:100%}
.hero-c{display:block;margin-top:8px;font-size:.86rem;font-weight:700;color:var(--ink2);padding-left:10px;border-left:4px solid var(--primer)}
.hero-cta{margin-top:16px}
.sill{max-width:1080px;margin:0 auto;height:22px;background:linear-gradient(180deg,var(--steel) 0 4px,var(--primer) 4px 7px,#bdb7ac 7px 100%)}
.sill span{display:block;height:100%;background:repeating-linear-gradient(90deg,transparent 0 58px,rgba(28,31,34,.18) 58px 60px)}

/* 문의 버튼 */
.cta-inline{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 4px}
.cta-inline a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:8px 8px;font-weight:700;font-size:1rem;text-decoration:none;border-radius:4px;border:2px solid var(--steel-d)}
.b-sms{background:var(--primer);color:#fff;box-shadow:inset 0 -4px 0 var(--primer-d)}
.b-tel{background:linear-gradient(180deg,#fff,#dfe3e6);color:var(--ink);box-shadow:inset 0 -4px 0 #aab1b7}
.cta-inline a:active{transform:translateY(2px);box-shadow:none}

/* 공통 섹션 */
main>.sec{max-width:1080px;margin:0 auto;padding:34px 16px}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}
.wrap .sec{padding:26px 0}
.kick{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;font:700 .78rem/1.6 var(--mono);letter-spacing:.06em;color:#fff;background:var(--steel-d);padding:1px 10px 1px 8px}
.kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primer)}
.sub{color:var(--ink2);font-size:.95rem}
.more{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* 증상 지도: 문 한 짝을 네 구역으로 */
.doormap{margin-top:14px;background:var(--paper);border:9px solid var(--steel);border-bottom-width:14px;box-shadow:0 8px 0 -4px #bdb7ac}
.zone{padding:12px 12px 8px;border-top:2px dashed var(--line)}
.zone:first-child{border-top:0}
.zn{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:700 .82rem/1.3 var(--mono);color:var(--primer-d)}
.za{width:22px;height:33px;flex:none}
.zone ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.zl{position:relative;display:block;padding:10px 38px 10px 12px;text-decoration:none;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-left:6px solid var(--primer);border-radius:0 4px 4px 0}
.zl strong{display:block;font-family:var(--head);font-weight:400;font-size:1.3rem;line-height:1.25}
.zl span{display:block;font-size:.86rem;color:var(--ink2);line-height:1.5}
.zl .go{position:absolute;right:12px;top:50%;margin-top:-.55em;color:var(--primer)}
.z-hinge .zl{border-left-color:var(--steel)}
.z-mid .zl{border-left-color:var(--steel-l)}

/* 사례 카드: 왼쪽 경첩 마디가 달린 문짝 */
.scs{display:grid;gap:18px;margin-top:14px}
.sc{position:relative;display:flex;flex-direction:column;padding-left:14px;background:var(--paper);color:var(--ink);text-decoration:none;border:2px solid var(--steel);box-shadow:0 5px 0 -1px #bdb7ac}
.sc-knuckle{position:absolute;left:0;top:0;bottom:0;width:14px;background-color:var(--steel);
  background-image:linear-gradient(180deg,transparent 14%,#d5d9dd 14%,#9aa1a7 26%,transparent 26%,transparent 74%,#d5d9dd 74%,#9aa1a7 86%,transparent 86%);
  background-size:8px 100%;background-repeat:no-repeat;background-position:3px 0}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:0}
.ba figure{position:relative;margin:0}
.ba img{width:100%;aspect-ratio:1/1;object-fit:cover}
.ba figcaption{position:absolute;left:0;bottom:0;padding:2px 10px;font:700 .8rem/1.5 var(--mono);color:#fff;letter-spacing:.02em}
.ba .bf figcaption{background:rgba(38,43,48,.9)}
.ba .af figcaption{background:rgba(168,50,31,.95)}
.ba .af-stage figcaption{background:rgba(75,82,89,.95)}
.ba.wide{gap:6px;margin:18px 0 6px}
.ba.wide figure{border:3px solid var(--steel-d)}
.sc-b{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.kind{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.kind b{font:700 .78rem/1.6 var(--mono);color:#fff;background:var(--primer);padding:0 8px;border-radius:2px}
.kind i{font-style:normal;font-size:.8rem;color:var(--ink2);border:1px solid var(--line);padding:0 7px;border-radius:2px;background:#fff}
.sc-t{font-family:var(--head);font-weight:400;font-size:1.34rem;line-height:1.28}
.row{font-size:.9rem;line-height:1.6;color:var(--ink2)}
.row em{font-style:normal;font:700 .74rem/1.5 var(--mono);color:#fff;background:var(--steel);padding:0 6px;margin-right:6px;border-radius:2px;white-space:nowrap}

/* 서비스 카드: 모서리를 깎은 부품 꼬리표 */
.svs{display:grid;gap:12px;margin-top:14px}
.sv{position:relative;display:grid;grid-template-columns:36% 1fr;background:#fff;color:var(--ink);text-decoration:none;border:2px solid var(--steel-d);
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.sv::after{content:"";position:absolute;right:9px;top:26px;width:11px;height:11px;border-radius:50%;border:2px solid var(--steel-d);background:var(--con)}
.sv-img{position:relative;border-right:2px solid var(--steel-d)}
.sv-img img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
.sv-n{position:absolute;left:0;top:0;font:700 1.2rem/1 var(--mono);color:#fff;background:var(--primer);padding:6px 8px}
.sv-b{display:flex;flex-direction:column;gap:3px;padding:10px 26px 12px 12px}
.sv-tag{display:flex;align-items:center;gap:4px;font:700 .74rem/1.5 var(--mono);color:var(--steel-l)}
.sv-b strong{font-family:var(--head);font-weight:400;font-size:1.36rem;line-height:1.22}
.sv-s{font-size:.88rem;font-weight:700;color:var(--primer-d)}
.sv-d{font-size:.84rem;line-height:1.5;color:var(--ink2)}
.sv-go{display:inline-flex;align-items:center;gap:4px;font-size:.85rem;font-weight:700;color:var(--ink);margin-top:auto;text-decoration:underline;text-underline-offset:3px}

/* 판단 순서도: 점선으로 이어 내려가는 질문 */
.flow{list-style:none;counter-reset:q;margin:14px 0 0;padding:0;display:grid;gap:14px}
.flow li{counter-increment:q;position:relative}
.flow li:not(:last-child)::after{content:"";position:absolute;left:22px;bottom:-15px;height:15px;border-left:2px dashed var(--steel-l)}
.fl{position:relative;display:grid;gap:4px;padding:12px 14px 12px 56px;background:var(--paper);color:var(--ink);text-decoration:none;border:1.5px solid var(--steel);border-radius:6px}
.fl::before{content:"Q" counter(q);position:absolute;left:8px;top:11px;width:30px;padding:3px 0;text-align:center;font:700 .8rem/1.2 var(--mono);color:#fff;background:var(--steel-d);border-radius:4px}
.fl-q{font-family:var(--head);font-size:1.28rem;line-height:1.3}
.fl-a{display:flex;align-items:center;gap:5px;font-weight:700;color:var(--primer-d)}
.fl-s{justify-self:start;font:700 .74rem/1.6 var(--mono);color:var(--steel-d);background:var(--chrome-l);border:1px solid var(--chrome);padding:0 8px;border-radius:2px}
.fl-c{font-size:.84rem;color:var(--ink2);text-decoration:underline;text-underline-offset:3px}

/* 문의 영역: 외시경이 달린 철문 */
.ask{background:var(--steel-d);padding:34px 14px 36px;margin:10px 0}
.slab{position:relative;max-width:760px;margin:0 auto;color:#f4f2ee;padding:44px 18px 22px;border:3px solid #15181b;
  background:linear-gradient(180deg,#4a525a,#3a4148);box-shadow:inset 0 0 0 10px rgba(255,255,255,.04),inset 0 0 0 11px rgba(0,0,0,.35)}
.lens{position:absolute;left:50%;top:12px;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  background:radial-gradient(circle,#0f1214 0 35%,#9aa1a7 36% 60%,#eceef0 61% 100%);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.slab h2{font-size:2rem;color:#fff;text-align:center}
.ask-l{font-weight:700}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.shot{display:flex;flex-direction:column;gap:4px;color:#c7ccd1}
.shot svg{width:100%;height:auto;background:var(--chrome-l);border-radius:3px}
.shot b{font-family:var(--head);font-weight:400;font-size:1.16rem;line-height:1.25;color:#fff}
.shot span{font-size:.82rem;line-height:1.5;color:#d8dcdf}
.ask-t{font-size:.9rem;background:rgba(255,255,255,.07);padding:8px 10px;border-left:4px solid var(--primer)}
.ask-n{font-size:.82rem;color:#c7ccd1;margin:8px 0 0}

/* 정보 카드: 구멍 뚫린 점검 꼬리표 */
.tags{display:grid;gap:14px;margin-top:14px}
.tagcard{position:relative;padding:30px 16px 14px;background:#fffdf7;border:1.5px solid #b9b3a5;
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%,0 18px)}
.tagcard::before{content:"";position:absolute;left:50%;top:9px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--con);border:2px solid var(--steel-l)}
.badge{display:inline-block;font:700 .76rem/1.6 var(--mono);background:var(--primer);color:#fff;padding:0 8px;border-radius:2px;margin-bottom:6px}
.tagcard h3{font-size:1.36rem}
.tagcard p{margin:0 0 6px;font-size:.95rem}
.tagcard .a1{font-weight:700;border-left:3px solid var(--primer);padding-left:8px}

/* 작업 순서: 경첩 핀 레일 */
.pinrail{list-style:none;margin:14px 0 0;padding:0;position:relative}
.pinrail::before{content:"";position:absolute;left:17px;top:4px;bottom:4px;width:6px;border-radius:3px;background:linear-gradient(90deg,#8d959c,#eceef0 50%,#8d959c)}
.pinrail li{position:relative;display:grid;grid-template-columns:42px 1fr;gap:10px;padding-bottom:18px}
.st-n{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:40px;height:30px;border-radius:6px;background:var(--steel-d);color:#fff;font:700 .92rem/1 var(--mono);box-shadow:inset 0 -3px 0 #000}
.st-b{background:var(--paper);border:1.5px solid var(--line);padding:10px 12px}
.st-k{display:inline-block;margin:0 0 4px;font:700 .74rem/1.6 var(--mono);color:#fff;background:var(--steel-l);padding:0 7px;border-radius:2px}
.st-b h3{font-size:1.26rem;margin-bottom:6px}
.st-b img{width:100%;aspect-ratio:4/3;object-fit:cover;margin:0 0 8px;border:3px solid var(--steel-d)}
.st-b p:last-child{margin:0;font-size:.93rem}

/* 자주 묻는 질문 */
.qa{display:grid;gap:6px}
.qa details{background:var(--paper);border:1.5px solid var(--line);border-left:5px solid var(--steel)}
.qa details[open]{border-left-color:var(--primer)}
.qa summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:flex-start;padding:13px 12px;font-weight:700}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:3px;background:var(--steel-d);color:#fff;font:700 .8rem/1 var(--mono)}
.qa summary::after{content:"+";margin-left:auto;flex:none;font:700 1.1rem/1.3 var(--mono);color:var(--primer)}
.qa details[open] summary::after{content:"−"}
.qa details p{margin:0;padding:0 14px 16px 46px;font-size:.95rem}

/* 출장 지역: 호수판 모양 목록 */
.area .red{color:var(--red);font-size:1.02rem}
.ar-g{margin-top:22px}
.ar-g h3{display:flex;align-items:baseline;gap:8px;border-bottom:3px solid var(--steel-d);padding-bottom:4px;margin:0 0 10px}
.ar-g h3 small{font:700 .76rem/1 var(--mono);color:#fff;background:var(--primer);padding:3px 7px;border-radius:2px}
.plates{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:6px}
.plates a{position:relative;display:flex;align-items:center;justify-content:center;min-height:40px;padding:5px 12px;text-align:center;
  font-size:.86rem;font-weight:700;line-height:1.3;color:var(--ink);text-decoration:none;border-radius:3px;border:1px solid #8d959c;
  background:linear-gradient(180deg,#fbfbfc,#d5d9dd);box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(0,0,0,.18)}
.plates a::before,.plates a::after{content:"";position:absolute;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#8d959c}
.plates a::before{left:4px}.plates a::after{right:4px}
.plates a:hover,.plates a:focus{background:var(--primer);color:#fff}

/* 하위 페이지 머리: 흑연 인방(문틀 윗부분) 아래 안내판 */
.crumb{max-width:1000px;margin:0 auto;padding:10px 16px 0;font-size:.82rem;color:var(--ink2)}
.crumb a{color:var(--ink2)}
.band{margin-top:8px;background:var(--paper);border-top:12px solid var(--steel-d);box-shadow:inset 0 3px 0 var(--primer)}
.band::after{content:"";display:block;height:14px;background:linear-gradient(180deg,var(--steel) 0 4px,#bdb7ac 4px)}
.band-in{max-width:1000px;margin:0 auto;padding:16px 16px 18px}
.eye{display:flex;align-items:center;gap:6px;margin:0 0 8px;font:700 .8rem/1.5 var(--mono);color:var(--primer-d)}
.band h1{font-size:2.05rem}
.band .lead{font-size:1rem}
.upd{font:.78rem/1.5 var(--mono);color:var(--ink2);margin:0 0 4px}
.ticks{list-style:none;margin:16px 0;padding:0;display:grid;gap:6px}
.ticks li{display:flex;gap:8px;align-items:flex-start;font-size:.95rem}
.ticks .ic{color:var(--primer);margin-top:.3em}
.jump{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.jump a{display:inline-block;padding:4px 10px;font-size:.85rem;font-weight:700;color:var(--ink);text-decoration:none;background:linear-gradient(180deg,#fff,#dfe3e6);border:1px solid #8d959c;border-radius:3px}
.facts{display:grid;gap:8px;margin:12px 0 0}
.facts div{background:#fff;border:1.5px solid var(--line);border-top:4px solid var(--steel);padding:8px 12px}
.facts dt{font:700 .8rem/1.6 var(--mono);color:var(--primer-d)}
.facts dd{margin:0;font-size:.95rem}
.grid-cmp{display:grid;gap:10px;margin-top:12px}
.gc{background:#fff;border:2px solid var(--steel);padding:12px 14px}
.gc strong{display:block;font-family:var(--head);font-weight:400;font-size:1.3rem;line-height:1.25;margin-bottom:6px}
.gc p{margin:0 0 4px;font-size:.92rem}
.gc em{font-style:normal;font:700 .74rem/1.5 var(--mono);color:#fff;background:var(--steel-l);padding:0 6px;margin-right:6px;border-radius:2px}
.gc .warn em{background:var(--primer)}
.num{list-style:none;counter-reset:n;margin:12px 0 0;padding:0;display:grid;gap:8px}
.num li{counter-increment:n;position:relative;padding:10px 12px 10px 50px;background:#fff;border:1.5px solid var(--line)}
.num li::before{content:counter(n,decimal-leading-zero);position:absolute;left:9px;top:10px;width:32px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--steel-d);color:#fff;font:700 .8rem/1 var(--mono);border-radius:4px}
.num b{display:block}
.num span{font-size:.93rem}
.note{background:var(--primer-l)!important;border-left:6px solid var(--primer);padding:18px 16px!important;margin:10px 0}
.conds{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.conds li{background:#fff;border:1.5px solid var(--line);border-left:5px solid var(--steel-l);padding:9px 12px}
.conds b{display:block}
.conds span{font-size:.92rem;color:var(--ink2)}
.h2b{margin-top:26px}
.exs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.exs figure{margin:0;background:#fff;border:2px solid var(--steel)}
.exs img{width:100%;aspect-ratio:3/4;object-fit:cover}
.exs figcaption{padding:8px 10px;font-size:.85rem;line-height:1.5}
.exs figcaption b{display:block;font-family:var(--head);font-weight:400;font-size:1.14rem}
.tip{background:var(--primer-l);padding:8px 12px;border-left:4px solid var(--primer);font-size:.92rem}
.dongs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.dongs span{padding:2px 12px;font-size:.86rem;font-weight:700;border:1px solid #8d959c;border-radius:3px;background:linear-gradient(180deg,#fbfbfc,#d5d9dd)}
.pick{background:#fff;padding:8px 12px;border-left:4px solid var(--steel);font-size:.93rem}
.mqs{display:grid;gap:12px;margin-top:10px}
.mq{background:var(--paper);border:2px solid var(--steel);padding:12px 14px}
.mq h3{font-size:1.28rem}
.mq p{font-size:.93rem}
.mq-case{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-size:.88rem;font-weight:700;background:var(--chrome-l);padding:6px}
.mq-case img{width:76px;height:76px;object-fit:cover;border:2px solid var(--steel-d)}

/* 하단 고정 버튼: 킥플레이트(문 아래 철판) [번호][문자보내기] */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),linear-gradient(180deg,#d9dde1,#aab1b7);
  border-top:4px solid var(--primer);box-shadow:0 -2px 0 var(--steel-d);transition:transform .2s,visibility .2s}
.dock a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:50px;padding:6px 8px;font-weight:700;text-decoration:none;border-radius:4px;border:2px solid var(--steel-d)}
.d-tel{background:var(--steel-d);color:#fff}
.d-sms{background:var(--primer);color:#fff}
.dock.off{transform:translateY(120%);visibility:hidden}

@media (max-width:359px){
  .logo b{font-size:1.32rem}
  .kw{font-size:1rem;padding:1px 14px 0}
  .knuckle a{font-size:1rem}
  .cta-inline a,.dock a{font-size:.9rem;padding:6px 4px;gap:4px}
  .hero h1{font-size:1.95rem}
  .leaf{padding:18px 12px 20px 16px}
  .sv{grid-template-columns:32% 1fr}
}
@media (min-width:560px){
  .hd-tel{display:inline-flex}
  .zone ul{grid-template-columns:1fr 1fr}
}
@media (min-width:768px){
  h2{font-size:2.2rem}
  .hero{padding:24px 20px 0}
  .jamb{padding:14px 14px 0}
  .leaf{padding:30px 30px 30px 36px}
  .hero h1{font-size:2.8rem}
  .hero-ba figure img{aspect-ratio:1/1}
  .scs{grid-template-columns:1fr 1fr}
  .tags{grid-template-columns:1fr 1fr}
  .svs{grid-template-columns:1fr 1fr}
  .grid-cmp{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:1fr 1fr}
  .mqs{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr;column-gap:18px}
  .flow li:not(:last-child)::after{display:none}
  .pinrail li{grid-template-columns:52px 1fr}
  .st-b{display:grid;grid-template-columns:260px 1fr;gap:4px 16px;align-items:start}
  .st-b img{grid-row:1 / span 3;grid-column:1;margin:0}
  .st-b>.st-k,.st-b>h3,.st-b>p{grid-column:2}
  .shots{gap:18px}
  .slab{padding:48px 32px 26px}
  .band h1{font-size:2.5rem}
  .doormap{display:grid;grid-template-columns:1fr 1fr}
  .zone{border-top:2px dashed var(--line)}
  .zone:nth-child(-n+2){border-top:0}
  .zone:nth-child(odd){border-right:2px dashed var(--line)}
  .zone ul{grid-template-columns:1fr}
}
@media (min-width:1100px){
  .scs{grid-template-columns:repeat(3,1fr)}
  .svs{grid-template-columns:repeat(4,1fr)}
  .sv{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .sv-img{border-right:0;border-bottom:2px solid var(--steel-d)}
  .sv-img img{aspect-ratio:4/3}
  .leaf{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:0 34px;align-items:start}
  .leaf>.plate,.leaf>h1,.leaf>.lead{grid-column:1}
  .leaf>.plate{justify-self:start}
  .leaf>.hero-ba{grid-column:2;grid-row:1 / span 4;margin-top:0}
  .leaf>.hero-cta{grid-column:1;align-self:end}
  body{padding-bottom:0}
  .dock{left:auto;right:22px;bottom:22px;width:400px;border:2px solid var(--steel-d);border-top:4px solid var(--primer);box-shadow:5px 5px 0 rgba(28,31,34,.35)}
}