/* 에이스홈픽스 벽 구멍 메우기 — 현장 석고보드 판 콘셉트. 석고 종이색·흑연색·초록 방수보드색·산딸기색 분필, 레이저 연두 한 줄.
   Noto Sans KR 900(굵은 고딕 제목·본문) + Nanum Pen Script(목수 연필 손글씨 꼬리표).
   세로 보드 이음 줄 바탕, 초록 띠 위 나사 머리로 나눈 글자 메뉴, 레이저 수평선이 가로지르는 첫 화면과 산딸기색 점선 '절단선' 안 전후 사진,
   구멍 크기 그림 4칸 바로가기, 퍼티·판 교체 두 판 비교, 네 귀퉁이 나사 점 보드 조각 사례 카드, 점선으로 잇는 세로 작업 순서,
   초록 보드 '재단표' 문의 영역, 권역별 보드 판 격자 지역 목록, 점선 윗변 받침판 고정 버튼.
   휴대폰(390px) 기준으로 쓰고 넓은 화면에서 칸을 늘린다. 가로로 넘기거나 눌러야 바뀌는 조작은 없다. */
:root{
  --gyp:#efece5; --gyp2:#e4e0d6; --paper:#fbfaf7; --ink:#22282a; --muted:#565d60; --seam:#d6d1c5;
  --jade:#2f7d68; --jade-d:#1f5a4a; --jade-l:#dcebe4;
  --chalk:#c2185b; --chalk-d:#9c1249; --chalk-l:#fbe3ec;
  --laser:#39e27d; --red:#c62828; --screw:#8a8f91;
  --body:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --pen:'Nanum Pen Script','Apple SD Gothic Neo',cursive;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;background:var(--gyp);color:var(--ink);font:400 16px/1.8 var(--body);word-break:keep-all;overflow-wrap:anywhere;padding-bottom:84px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 12px}
b,strong{font-weight:700}
h1,h2,h3{margin:0;line-height:1.3;font-family:var(--body);font-weight:900;letter-spacing:-.02em}
h2{font-size:26px;margin-bottom:10px}
h3{font-size:19px;margin-bottom:6px;font-weight:700}
ul,ol{margin:0;padding:0;list-style:none}
.ic{width:20px;height:20px;flex:none}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;z-index:60;background:var(--chalk);color:#fff;padding:8px 12px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--chalk);outline-offset:2px}
.pn{white-space:nowrap}
.pen{font-family:var(--pen);font-weight:400;letter-spacing:0}

/* 머리: 석고 종이 바탕 로고 + 연필 손글씨 키워드, 아래 초록 띠 나사 머리 메뉴 */
.hd{background:var(--paper);border-bottom:1px solid var(--seam)}
.hd-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;min-width:0}
.mark{width:34px;height:34px;flex:none}
.logo b{font-size:20px;line-height:1.1;font-weight:900;letter-spacing:-.03em}
.tagline{font-size:25px;line-height:1;color:var(--chalk);white-space:nowrap;padding:0 2px 2px;
  background:linear-gradient(transparent 78%,var(--chalk-l) 78%)}
.hd-tel{display:none;margin-left:auto;align-items:center;gap:6px;text-decoration:none;font-weight:700;color:var(--ink);padding:6px 14px;border:2px solid var(--ink);border-radius:3px}
.menu{display:flex;align-items:center;background:var(--jade);padding:0 6px}
.menu a{flex:1;text-align:center;color:#fff;text-decoration:none;font-size:14px;font-weight:700;padding:11px 2px 10px;white-space:nowrap;border-bottom:3px solid transparent}
.menu a[aria-current]{border-bottom-color:var(--laser)}
.screw{flex:none;width:12px;height:12px;fill:#e4e0d6;stroke:var(--jade-d);stroke-width:1.4}

/* 공통 */
main{display:block}
.sec{max-width:1180px;margin:0 auto;padding:44px 16px 8px}
.wrap .sec{padding-left:0;padding-right:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.kick{margin:0 0 2px;font-family:var(--pen);font-size:24px;line-height:1.1;color:var(--chalk)}
.sub{color:var(--muted)}
.h2b{margin-top:28px}
.h3b{margin:28px 0 12px;font-size:21px;font-weight:900;display:flex;align-items:center;gap:10px}
.h3b::before{content:'';width:22px;height:0;border-top:3px dashed var(--chalk)}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-weight:700;color:var(--jade-d);text-decoration:underline;text-decoration-style:dashed;text-decoration-color:var(--chalk);text-decoration-thickness:2px;text-underline-offset:5px}
.red{color:var(--red)}
.crumb{max-width:1180px;margin:0 auto;padding:12px 16px 0;font-size:14px;color:var(--muted)}
.crumb a{color:var(--jade-d)}

/* 전후 사진: 점선 절단선 안에 나란히, 손글씨 꼬리표 */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ba figure{margin:0;position:relative}
.ba img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ba figcaption{position:absolute;left:0;right:0;bottom:0;font-size:12px;font-weight:700;line-height:1.35;padding:5px 6px 4px;text-align:center}
.ba .bf figcaption{background:rgba(34,40,42,.86);color:#fff}
.ba .af figcaption{background:rgba(47,125,104,.94);color:#fff}
.ba.wide{margin:18px 0 0;padding:8px;border:2px dashed var(--chalk);background:var(--paper)}
.ba.wide img{aspect-ratio:4/5}
.ba.wide figcaption{font-size:14px}

/* 첫 화면: 보드 이음 줄 + 레이저 수평선 */
.hero{background-color:var(--gyp);background-image:repeating-linear-gradient(90deg,transparent 0 119px,var(--seam) 119px 120px);border-bottom:1px solid var(--seam)}
.hero-in{max-width:1180px;margin:0 auto;padding:20px 16px 28px}
.hero-eye{font-size:24px;line-height:1.1;color:var(--jade-d);margin:0 0 6px}
.hero h1{font-size:40px;line-height:1.15;margin-bottom:18px}
.hero h1 mark{display:block;background:none;color:var(--ink)}
.hero h1 span{display:block;font-size:21px;line-height:1.4;font-weight:700;color:var(--jade-d);margin-top:6px}
.hero-frame{position:relative;padding:10px;border:2px dashed var(--chalk);background:var(--paper)}
.laser-line{position:absolute;left:-16px;right:-16px;top:34%;height:2px;background:var(--laser);box-shadow:0 0 6px 1px rgba(57,226,125,.8);z-index:2;pointer-events:none}
.hero-ba{display:block;text-decoration:none}
.hero-c{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.5}
.hero-c .ic{color:var(--chalk)}
.hero .lead{margin:18px 0 16px}
.lead b{background:linear-gradient(transparent 62%,var(--jade-l) 62%)}

/* 문의 버튼 [문자보내기][번호] */
.cta-inline{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cta-inline a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:54px;padding:8px 6px;text-decoration:none;font-weight:700;font-size:16px;border-radius:3px}
.b-sms{background:var(--chalk);color:#fff}
.b-tel{background:var(--ink);color:#fff}
.cta-inline a:active{filter:brightness(.92)}

/* 구멍 크기 그림 4칸 */
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.sz{display:flex;flex-direction:column;height:100%;background:var(--paper);text-decoration:none;padding:10px 10px 12px;border-top:4px solid var(--jade)}
.sz-art{display:block;margin-bottom:8px}
.sz-art svg{width:100%;height:auto;display:block}
.sz-art .bd{fill:var(--gyp2);stroke:var(--ink);stroke-width:2}
.sz-art .sm{stroke:var(--seam);stroke-width:2;stroke-dasharray:4 3;fill:none}
.sz-art .hl{fill:#3a3f41;stroke:var(--ink);stroke-width:1.5}
.sz-art .sc{stroke:var(--muted);stroke-width:2;fill:none}
.sz-art .cutl{fill:none;stroke:var(--chalk);stroke-width:2;stroke-dasharray:5 3}
.sz-art .laser{stroke:var(--laser);stroke-width:2.5}
.sz strong{font-size:16px;font-weight:900;line-height:1.35}
.sz span{font-size:14px;line-height:1.55;color:var(--muted)}

/* 퍼티 vs 판 교체 두 판 */
.pvs{display:grid;gap:12px;margin-top:6px}
.pv{background:var(--paper);padding:16px;border:2px solid var(--seam)}
.pv h3{font-size:20px;font-weight:900}
.pv ul{display:grid;gap:6px;margin:6px 0 10px}
.pv li{display:flex;gap:8px;align-items:flex-start;line-height:1.6}
.pv li .ic{color:var(--jade);margin-top:3px}
.pv-r{margin:0;font-weight:700;border-top:2px dashed var(--seam);padding-top:8px}
.pv-b{background:var(--jade);border-color:var(--jade);color:#fff}
.pv-b li .ic{color:var(--laser)}
.pv-b .pv-r{border-top-color:rgba(255,255,255,.4)}

/* 사례 카드: 네 귀퉁이 나사 점이 박힌 보드 조각 */
.cards{display:grid;gap:18px}
.cc{display:block;text-decoration:none;color:var(--ink);background-color:var(--paper);padding:14px;border:1px solid var(--seam);
  background-image:radial-gradient(circle,var(--screw) 2.5px,transparent 3px),radial-gradient(circle,var(--screw) 2.5px,transparent 3px),
    radial-gradient(circle,var(--screw) 2.5px,transparent 3px),radial-gradient(circle,var(--screw) 2.5px,transparent 3px);
  background-size:14px 14px;background-repeat:no-repeat;background-position:0 0,100% 0,0 100%,100% 100%}
.cc-ph{display:block;padding:5px;border:2px dashed var(--chalk)}
.cc-ph .ba{gap:4px}
.cc-b{display:flex;flex-direction:column;gap:6px;padding:10px 2px 0}
.kind{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-family:var(--pen);font-size:24px;line-height:1.1;color:var(--chalk)}
.kind i{font-style:normal;font-family:var(--body);font-size:12px;font-weight:700;color:var(--jade-d);background:var(--jade-l);padding:1px 8px;border-radius:2px}
.cc-t{font-size:18px;line-height:1.4;font-weight:900}
.row{display:block;font-size:14px;line-height:1.65}
.row em{font-style:normal;font-weight:700;color:var(--jade-d);margin-right:6px}

/* 서비스 카드: 사진 왼쪽 가로형, 초록 옆 띠 */
.svs{display:grid;gap:12px}
.sv{display:grid;grid-template-columns:116px 1fr;background:var(--paper);text-decoration:none;min-height:136px;border-left:6px solid var(--jade)}
.sv-img img{width:100%;height:100%;object-fit:cover}
.sv-b{display:flex;flex-direction:column;gap:2px;padding:10px 12px;min-width:0}
.sv-s{font-family:var(--pen);font-size:21px;line-height:1.1;color:var(--chalk)}
.sv-b strong{font-size:19px;line-height:1.3;font-weight:900}
.sv-d{font-size:14px;line-height:1.55;color:var(--muted)}
.sv-go{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--jade-d);margin-top:auto}
.sv-go .ic{width:16px;height:16px}

/* 바로 답 카드 */
.qcs{display:grid;gap:14px}
.qc{background:var(--paper);padding:0 16px 16px;border-top:6px solid var(--ink)}
.badge{display:inline-block;font-size:13px;font-weight:700;background:var(--ink);color:#fff;padding:2px 10px;margin:0 0 8px}
.qc h3{font-size:19px;font-weight:900}
.a1{font-weight:700;border-left:4px solid var(--chalk);padding-left:10px}

/* 점선으로 잇는 세로 작업 순서 */
.cutsteps{display:grid;gap:0;margin-top:8px}
.cutsteps li{display:grid;grid-template-columns:38px 1fr;column-gap:10px;position:relative;padding-bottom:22px}
.cutsteps li::before{content:'';position:absolute;left:18px;top:40px;bottom:0;border-left:2px dashed var(--chalk)}
.cutsteps li:last-child::before{display:none}
.cs-n{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--pen);font-size:28px;line-height:1}
.cs-b figure{margin:0 0 8px;position:relative;background:var(--paper);padding:5px}
.cs-b img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cs-b figcaption{display:inline-block;margin-top:5px;font-size:13px;font-weight:700;color:var(--jade-d);background:var(--jade-l);padding:1px 8px}
.cs-b h3{font-size:18px}
.cs-b p{font-size:15px;margin:0}

/* 초록 보드 재단표 문의 영역 */
.ask{padding:44px 16px 8px}
.ask-in{max-width:760px;margin:0 auto;background:var(--jade);color:#fff;padding:20px 16px 18px;border-radius:4px;
  background-image:repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.08) 79px 80px)}
.ask .pen{font-size:26px;line-height:1;color:var(--laser);margin:0 0 4px}
.ask h2{font-size:26px;color:#fff}
.ask-l{font-weight:500}
.cutlist{display:grid;gap:0;margin:8px 0 12px;background:var(--paper);color:var(--ink);border-radius:3px}
.cutlist li{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:10px 12px;border-top:1px dashed var(--seam)}
.cutlist li:first-child{border-top:0}
.cl-n{width:30px;height:30px;border:2px solid var(--chalk);color:var(--chalk);border-radius:50%;display:grid;place-items:center;font-family:var(--pen);font-size:24px;line-height:1}
.cutlist b{display:block}
.cutlist span{font-size:15px;line-height:1.6}
.ask-t{font-size:15px;background:rgba(0,0,0,.18);padding:8px 10px;border-radius:3px}
.ask .b-tel{background:var(--paper);color:var(--ink)}
.ask-n{margin:10px 0 0;font-size:13px;color:#d9ece5}

/* 질문 답변(기본 details) */
.qa{display:grid;gap:8px}
.qa details{background:var(--paper);border-left:4px solid var(--jade)}
.qa summary{cursor:pointer;list-style:none;padding:12px 46px 12px 14px;font-weight:700;position:relative;line-height:1.6}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';position:absolute;right:12px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--gyp2);border:1.5px solid var(--screw);font-size:18px;line-height:1;color:var(--ink)}
.qa details[open] summary{color:var(--jade-d)}
.qa details[open] summary::after{content:'−'}
.qa details p{padding:0 14px 14px;margin:0}

/* 지역: 권역별 보드 판 격자 */
.zone{margin-top:22px;background:var(--paper);padding:12px 12px 14px}
.zone h3{display:flex;align-items:baseline;gap:10px;font-size:22px;font-weight:900;border-bottom:2px dashed var(--chalk);padding-bottom:6px;margin-bottom:10px}
.zone h3 small{font-family:var(--pen);font-size:22px;font-weight:400;color:var(--chalk)}
.plates{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.plates li{min-width:0}
.plates a{display:flex;align-items:center;gap:6px;padding:5px 6px;font-size:14px;line-height:1.4;text-decoration:none;background:var(--gyp);border-radius:2px}
.plates a::before{content:'';flex:none;width:6px;height:6px;background:var(--jade)}
.plates a:hover{background:var(--jade-l)}
.plates.flat{margin-top:6px}

/* 고정 버튼: 점선 윗변 받침판 위 두 칸 */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:2px dashed var(--chalk);transition:transform .2s,visibility .2s}
.dock a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;text-decoration:none;font-weight:700;border-radius:3px}
.d-tel{background:var(--ink);color:#fff}
.d-sms{background:var(--chalk);color:#fff}
.dock.off{transform:translateY(110%);visibility:hidden}

/* 하위 페이지 머리 */
.ph{background-color:var(--gyp);background-image:repeating-linear-gradient(90deg,transparent 0 119px,var(--seam) 119px 120px);margin-top:10px;border-bottom:2px dashed var(--chalk)}
.ph-in{max-width:1180px;margin:0 auto;padding:20px 16px 22px}
.ph .eye{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;font-family:var(--pen);font-size:22px;line-height:1.1;color:var(--chalk)}
.ph .eye .ic{width:18px;height:18px;color:var(--jade)}
.ph h1{font-size:28px;line-height:1.3;margin-bottom:12px}
.ph .lead{background:var(--paper);padding:12px 14px;border-left:4px solid var(--jade)}
.upd{font-size:13px;color:var(--muted);margin:0 0 14px}

.ticks{display:grid;gap:6px;margin:18px 0 0}
.ticks li{display:flex;gap:8px;align-items:flex-start;line-height:1.6}
.ticks .ic{color:#fff;background:var(--jade);border-radius:2px;padding:2px;margin-top:2px}
.jump{display:grid;margin:22px 0 0;background:var(--paper);border-top:4px solid var(--ink)}
.jump a{display:flex;gap:10px;align-items:center;padding:8px 12px;text-decoration:none;border-top:1px dashed var(--seam);font-size:15px}
.jump a:first-child{border-top:0}
.jump b{font-family:var(--pen);font-size:24px;line-height:1;color:var(--chalk);width:18px}
.facts{display:grid;gap:10px;margin:12px 0 0}
.facts div{background:var(--paper);border-left:4px solid var(--chalk);padding:10px 12px}
.facts dt{font-weight:700;color:var(--jade-d)}
.facts dd{margin:2px 0 0;font-size:15px}
.vs{display:grid;gap:10px;margin-top:10px}
.vs-c{background:var(--paper);padding:12px;border-top:4px solid var(--jade)}
.vs-c strong{display:block;font-size:18px;line-height:1.3;font-weight:900;margin-bottom:6px}
.vs-c p{margin:0 0 4px;font-size:15px}
.vs-c em{font-style:normal;font-weight:700;margin-right:6px;color:var(--jade-d)}
.vs-c .warn em{color:var(--chalk-d)}
.num{display:grid;gap:8px;counter-reset:n}
.num li{counter-increment:n;display:grid;grid-template-columns:34px 1fr;column-gap:10px;background:var(--paper);padding:10px 12px}
.num li::before{content:counter(n);grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--jade);color:#fff;font-weight:700}
.num li b{color:var(--jade-d)}
.num li span{font-size:15px}
.note{background:var(--chalk-l);padding:16px!important;margin-top:28px;border:2px dashed var(--chalk)}
.note h2{font-size:22px}
.note p{margin:0}
.conds{display:grid;gap:8px;margin-top:8px}
.conds li{background:var(--paper);padding:10px 12px;display:flex;flex-direction:column;border-left:4px solid var(--seam)}
.conds b{color:var(--jade-d)}
.conds span{font-size:15px}
.exs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.exs figure{margin:0;background:var(--paper);padding:5px}
.exs img{width:100%;aspect-ratio:3/4;object-fit:cover}
.exs figcaption{padding:8px 4px 4px;font-size:14px;line-height:1.55}
.exs figcaption b{display:block;color:var(--chalk-d)}
.tip{margin-top:10px;background:var(--jade-l);padding:8px 10px;font-size:15px}
.dongs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.dongs span{background:var(--jade);color:#fff;padding:2px 10px;font-size:14px;border-radius:2px}
.pick{background:var(--jade-l);padding:10px 12px;font-size:15px}
.mqs{display:grid;gap:14px}
.mq{background:var(--paper);padding:0 14px 14px;border-top:6px solid var(--ink)}
.mq p{font-size:15px}
.mq-case{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:center;text-decoration:none;background:var(--gyp);padding:6px;font-size:14px;font-weight:700}
.mq-case img{width:84px;height:84px;object-fit:cover}

/* 넓은 화면 */
@media (min-width:600px){
  .hd-tel{display:inline-flex}
  .menu{justify-content:center;gap:10px}
  .menu a{flex:none;padding:12px 18px 10px;font-size:15px}
  .hero h1{font-size:52px}
  .hero h1 span{font-size:24px}
  .sizes{grid-template-columns:repeat(4,1fr)}
  .pvs{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .qcs,.mqs{grid-template-columns:1fr 1fr}
  .vs{grid-template-columns:repeat(3,1fr)}
  .conds{grid-template-columns:1fr 1fr}
  .plates{grid-template-columns:repeat(4,1fr)}
  .cutsteps{grid-template-columns:1fr 1fr;column-gap:22px}
  .dock{max-width:520px;left:50%;transform:translateX(-50%);bottom:10px;border:2px dashed var(--chalk);border-radius:6px}
  .dock.off{transform:translate(-50%,130%)}
}
@media (min-width:960px){
  body{font-size:17px}
  .hero-in{display:grid;grid-template-columns:1fr 1fr;gap:6px 40px;align-items:start;padding:40px 16px 46px}
  .hero-eye,.hero h1,.hero .lead,.hero-cta{grid-column:1}
  .hero-frame{grid-column:2;grid-row:1/6}
  .hero h1{font-size:60px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .svs{grid-template-columns:repeat(3,1fr)}
  .sv{grid-template-columns:1fr;grid-template-rows:170px auto;border-left:0;border-top:6px solid var(--jade)}
  .cutsteps{grid-template-columns:repeat(3,1fr)}
  .plates{grid-template-columns:repeat(6,1fr)}
  .ph-in{padding:34px 16px}
  .ph h1{font-size:40px}
  .ba.wide{max-width:760px}
  .exs{max-width:640px}
}
@media (max-width:359px){
  .logo b{font-size:18px}
  .tagline{font-size:22px}
  .mark{width:30px;height:30px}
  .hd-in{gap:8px;padding:10px 12px}
  .hero h1{font-size:34px}
  .hero h1 span{font-size:19px}
  .menu a{font-size:13px}
  .cta-inline a,.dock a{font-size:15px;gap:4px}
  .sv{grid-template-columns:94px 1fr}
  .sizes{gap:8px}
  .plates a{font-size:13px}
}