/* 에이스홈픽스 싱크대 하부장 교체 — 주방 가구 도면처럼.
   자작나무 합판 바탕·호두나무 갈색·세이지 청회색·겨자색, Song Myung(제목) + Nanum Gothic Coding(치수·꼬리표) + 시스템 고딕(본문).
   로고 아래 손잡이 달린 '서랍 앞판 메뉴', 치수선으로 잇는 시공전·시공후 첫 화면, 칸마다 링크인 '주방 정면도',
   서랍 모양 서비스 카드, 호두나무 테두리 문짝 사례 카드(합판 단면 띠·줄자 꼬리표), 색인 카드 질문, 줄자 눈금 작업 순서,
   모눈종이 작업지시서 문의 영역, 가격표 꼬리표 지역 목록, 상판 띠 하단 고정 버튼.
   휴대폰(390px) 기준으로 쓰고 넓은 화면에서 칸을 늘린다. 가로로 넘기거나 눌러야 바뀌는 조작은 없다. */
:root{
  --birch:#f4ecde; --birch2:#eadfca; --paper:#fffdf8; --walnut:#4a3423; --walnut-d:#2f2117; --walnut-l:#7a5a40;
  --sage:#46636c; --sage-d:#304a52; --sage-l:#e2ebed; --mustard:#e2a82a; --mustard-l:#fbefcf;
  --ink:#1f1a16; --muted:#51463c; --line:#dccfb8; --red:#c62417;
  --head:'Song Myung','AppleMyungjo','Batang',serif;
  --code:'Nanum Gothic Coding','D2Coding',monospace;
  --body:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  --ply:repeating-linear-gradient(180deg,#d9c39c 0 3px,#c8ad80 3px 5px,#e8d7b6 5px 8px);
  --ticks:repeating-linear-gradient(90deg,var(--walnut-d) 0 1.5px,transparent 1.5px 8px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;background:var(--birch);color:var(--ink);font:400 17px/1.75 var(--body);word-break:keep-all;overflow-wrap:anywhere;padding-bottom:80px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 12px}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:700}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.35;margin:0;letter-spacing:-.01em}
h2{font-size:27px;margin-bottom:10px;color:var(--walnut-d)}
h3{font-size:20px}
:focus-visible{outline:4px solid var(--mustard);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:8px;top:8px;z-index:90;background:var(--mustard);color:var(--ink);padding:10px 14px;font-weight:700}

/* 머리: 합판 바탕 로고 + 겨자색 키워드 꼬리표, 아래 호두나무 틀 안 서랍 앞판 메뉴 */
.hd{background:var(--paper);border-bottom:1px solid var(--line)}
.hd-in{max-width:1080px;margin:0 auto;padding:12px 16px 8px}
.logo{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px;text-decoration:none;max-width:100%}
.logo b,.tag-kw{white-space:nowrap}
.logo svg{width:32px;height:32px;flex:none}
.lg-bd{fill:var(--birch2);stroke:var(--walnut);stroke-width:3}.lg-ln{stroke:var(--walnut);stroke-width:2.5}.lg-hd{stroke:var(--mustard);stroke-width:3.5;stroke-linecap:round}
.logo b{font-family:var(--head);font-weight:400;font-size:22px;color:var(--walnut-d)}
.tag-kw{position:relative;font-family:var(--code);font-weight:700;font-size:14px;line-height:1;padding:7px 9px 7px 16px;background:var(--mustard);color:var(--ink);border-radius:3px 8px 8px 3px}
.tag-kw::before{content:"";position:absolute;left:5px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--paper)}
.drawers{background:var(--walnut);padding:5px 5px 9px;border-top:4px solid var(--walnut-d)}
.drawers ul{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.drawers a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:54px;background:var(--birch);border-radius:3px;text-decoration:none;font-family:var(--code);font-weight:700;font-size:14px;line-height:1.2;text-align:center;padding:6px 2px;box-shadow:inset 0 -4px 0 var(--birch2),inset 0 0 0 1px #c9b187}
.hdl{display:block;width:30px;height:6px;border-radius:3px;background:linear-gradient(#a3845f,var(--walnut-l));box-shadow:0 2px 0 rgba(47,33,23,.25)}
.drawers a:hover,.drawers a:focus-visible{background:var(--mustard-l)}
.drawers a:hover .hdl{background:var(--mustard)}

/* 문의 버튼 [문자보내기][번호] */
.cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 6px}
.cta a{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:4px;font-weight:700;font-size:18px;text-decoration:none;white-space:nowrap;padding:0 6px}
.b-sms{background:var(--mustard);color:var(--ink);box-shadow:0 4px 0 #a67713}
.b-call{background:var(--walnut);color:#fff;box-shadow:0 4px 0 var(--walnut-d);font-family:var(--code);letter-spacing:-.02em}

/* 첫 화면 */
.hero{background:var(--birch)}
.hero-in{max-width:1080px;margin:0 auto;padding:18px 16px 22px}
.kick{display:inline-block;font-family:var(--code);font-size:14px;font-weight:700;color:var(--sage-d);margin:0 0 6px;border-bottom:2px solid var(--mustard)}
.hero h1{font-size:34px;color:var(--walnut-d)}
.hero h1 span{display:block;font-family:var(--body);font-weight:700;font-size:18px;color:var(--sage-d);letter-spacing:0;margin-top:6px}
.hero-pair{display:block;text-decoration:none;margin:14px 0 8px}
.hp-cap{display:block;font-weight:700;font-size:15px;color:var(--sage-d);margin-top:6px;text-decoration:underline;text-underline-offset:3px}
.lead{font-size:18px}
.lead b{background:linear-gradient(transparent 62%,var(--mustard-l) 62%)}

/* 전후 사진: 위에 도면 치수선(양 끝 꺾쇠) */
.bp{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:16px}
.dim{position:absolute;left:0;right:0;top:4px;height:2px;background:var(--sage)}
.dim::before,.dim::after{content:"";position:absolute;top:-6px;width:2px;height:14px;background:var(--sage)}
.dim::before{left:0}.dim::after{right:0}
.bp figure{position:relative;margin:0;overflow:hidden;background:var(--line);aspect-ratio:4/5;border-radius:2px}
.bp img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;left:0;top:10px;z-index:1;font-family:var(--code);font-size:14px;font-weight:700;padding:3px 10px 3px 8px;line-height:1.4;border-radius:0 12px 12px 0}
.t-b{background:var(--paper);color:var(--ink)}
.t-a{background:var(--sage);color:#fff}
.bp.big{gap:10px}
.bp.big figure{border:6px solid var(--walnut);border-radius:3px}

/* 섹션 공통 */
.sec{max-width:1080px;margin:0 auto;padding:30px 16px 6px}
.sub{color:var(--muted)}
.answer b{color:var(--walnut-d)}
.more{display:flex;align-items:center;justify-content:center;min-height:52px;margin:16px 0 4px;background:var(--paper);border:2px solid var(--walnut);border-radius:4px;font-weight:700;text-decoration:none;color:var(--walnut-d)}
.more::after{content:"→";margin-left:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 0 6px}
.wrap>.bp,.wrap>.pts,.wrap>.toc{margin-left:16px;margin-right:16px}
.wrap>.bp{margin-top:20px}

/* 주방 정면도: 위 상부장 줄, 오른쪽 키큰장, 가운데 상판, 아래 하부장 칸 */
.elev{position:relative;display:grid;grid-template-columns:1fr 1fr 78px;grid-template-rows:auto 14px auto auto;gap:6px;background:var(--paper);border:3px solid var(--walnut);border-radius:4px;padding:8px;margin-top:6px}
.cell{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:96px;padding:22px 8px 8px;background:var(--birch);border:2px solid var(--walnut-l);border-radius:2px;text-decoration:none}
.cell .hdl{position:absolute;left:50%;top:8px;margin-left:-15px}
.cell b{font-family:var(--head);font-weight:400;font-size:20px;line-height:1.25;color:var(--walnut-d)}
.cell small{font-size:14px;line-height:1.4;color:var(--muted)}
.cell.up{grid-column:1/3;grid-row:1;background:var(--sage-l)}
.cell.tall{grid-column:3;grid-row:1/5;justify-content:center;align-items:center;text-align:center;padding:26px 4px 8px}
.cell.tall b{font-size:18px}.cell.tall small{font-size:13px}
.cell.l0{grid-column:1;grid-row:3}.cell.l1{grid-column:2;grid-row:3}.cell.l2{grid-column:1;grid-row:4}.cell.l3{grid-column:2;grid-row:4}
.ctop{grid-column:1/3;grid-row:2;background:var(--walnut);border-radius:2px}
.cell:hover,.cell:focus-visible{background:var(--mustard-l);border-color:var(--walnut)}

/* 서비스 카드: 손잡이 달린 서랍 앞판 */
.dws{display:grid;gap:12px}
.dw{position:relative;display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;background:var(--paper);border:2px solid var(--walnut-l);border-bottom-width:6px;border-radius:3px;padding:20px 12px 12px;text-decoration:none}
.dw .hdl{position:absolute;left:50%;top:7px;margin-left:-15px;width:30px}
.dw-img{width:96px;height:96px;overflow:hidden;border-radius:2px}
.dw-img img{width:100%;height:100%;object-fit:cover}
.dw-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.dw-k{font-family:var(--code);font-size:13px;font-weight:700;color:var(--sage-d)}
.dw-t strong{font-family:var(--head);font-weight:400;font-size:21px;color:var(--walnut-d);line-height:1.3}
.dw-w{font-size:15px;color:var(--muted);line-height:1.5}
.dw:hover{background:var(--mustard-l)}

/* 사례 카드: 호두나무 테두리 문짝, 사진 → 합판 단면 → 작업 종류(줄자) → 제목 → 증상 → 작업 범위 */
.doors{display:grid;gap:18px}
.door{display:block;background:var(--paper);border:6px solid var(--walnut);border-radius:4px;overflow:hidden;text-decoration:none}
.door .bp{padding:18px 8px 0}
.door .dim{left:8px;right:8px;top:8px}
.door .bp figure{aspect-ratio:1/1}
.ply{display:block;height:8px;margin-top:8px;background:var(--ply)}
.door-b{display:block;padding:12px 14px 14px}
.kind{display:inline-block;position:relative;font-family:var(--code);font-weight:700;font-size:13px;padding:5px 10px 9px;background:var(--mustard);color:var(--ink);margin-bottom:8px}
.kind::after{content:"";position:absolute;left:4px;right:4px;bottom:2px;height:5px;background:var(--ticks)}
.door-t{display:block;font-family:var(--head);font-weight:400;font-size:21px;line-height:1.4;color:var(--walnut-d);margin-bottom:8px}
.row{display:grid;grid-template-columns:74px 1fr;gap:8px;font-size:15px;line-height:1.55;padding:6px 0;border-top:1px solid var(--line)}
.row b{font-family:var(--code);color:var(--sage-d);font-size:13px;padding-top:2px}
.door:hover{border-color:var(--sage)}

/* 질문 카드: 색인 카드 */
.ixs{display:grid;gap:16px}
.ix{position:relative;background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--sage);padding:16px 14px 12px;margin-top:12px;background-image:repeating-linear-gradient(180deg,transparent 0 29px,#efe5d3 29px 30px)}
.ix-tab{position:absolute;left:12px;top:-19px;margin:0;background:var(--sage);color:#fff;font-family:var(--code);font-weight:700;font-size:13px;padding:2px 12px;border-radius:5px 5px 0 0}
.ix h3{font-size:21px;color:var(--walnut-d);margin-bottom:8px}
.ix-a{font-weight:700;font-size:17px;background:var(--mustard-l);padding:8px 10px}
.ix-more{color:var(--muted);font-size:16px}
.ix-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--sage-d);text-underline-offset:4px}
.ix-link::after{content:"→";margin-left:6px}

/* 바꾸는 방법 고르기 */
.ways{display:grid;gap:12px}
.way{display:grid;grid-template-columns:110px 1fr;background:var(--paper);border:2px solid var(--line);border-left:8px solid var(--walnut);text-decoration:none;min-height:110px}
.way-img{display:block;height:100%;min-height:110px;overflow:hidden}
.way-img img{width:100%;height:100%;object-fit:cover}
.way-t{display:flex;flex-direction:column;gap:4px;padding:10px 12px;font-size:15px;line-height:1.5;min-width:0}
.way-t strong{font-family:var(--head);font-weight:400;font-size:20px;color:var(--walnut-d);line-height:1.3}
.way-t b{font-family:var(--code);color:var(--sage-d);font-size:12px;margin-right:6px}
.way:hover{border-color:var(--mustard)}

/* 작업 순서: 왼쪽 줄자 눈금 띠 */
.tape{position:relative;display:grid;gap:14px;margin-top:6px;padding-left:34px}
.tape::before{content:"";position:absolute;left:0;top:0;bottom:0;width:22px;background:repeating-linear-gradient(180deg,var(--walnut-d) 0 2px,transparent 2px 12px) right/9px 100% no-repeat,var(--mustard);border-radius:3px}
.tape li{position:relative;display:grid;grid-template-columns:118px 1fr;column-gap:12px;background:var(--paper);border:1px solid var(--line);padding:10px}
.tape .num{position:absolute;left:-40px;top:10px;width:34px;text-align:center;font-family:var(--code);font-weight:700;font-size:13px;background:var(--walnut);color:#fff;padding:2px 0}
.tape figure{margin:0;overflow:hidden;aspect-ratio:3/4;align-self:start}
.tape figure img{width:100%;height:100%;object-fit:cover}
.tape .stage{font-family:var(--code);font-size:13px;font-weight:700;color:var(--sage-d);margin:0 0 2px}
.tape h3{font-size:19px;color:var(--walnut-d);margin-bottom:4px}
.tape li p:last-child{margin:0;font-size:15px;line-height:1.65}

/* 문의 영역: 모눈종이 작업지시서 */
.os-wrap{padding:34px 16px 10px}
.os{max-width:760px;margin:0 auto;background:#fff;background-image:linear-gradient(#e3edf0 1px,transparent 1px),linear-gradient(90deg,#e3edf0 1px,transparent 1px);background-size:16px 16px;border:3px solid var(--sage-d);padding:20px 16px 14px;position:relative}
.os::before{content:"작업지시서";position:absolute;right:12px;top:-14px;background:var(--sage-d);color:#fff;font-family:var(--code);font-weight:700;font-size:13px;padding:2px 10px}
.os-k{font-family:var(--code);font-weight:700;color:var(--sage-d);font-size:14px;margin:0 0 4px}
.os h2{font-size:25px}
.os-lead{background:rgba(255,255,255,.85)}
.os-tb{border:2px solid var(--walnut);background:#fff;margin:6px 0 12px}
.os-r{display:grid;grid-template-columns:92px 1fr;border-top:1px solid var(--line)}
.os-r:first-child{border-top:0}
.os-r b{background:var(--birch2);padding:8px 10px;font-size:15px;border-right:1px solid var(--line)}
.os-r span{padding:8px 10px;color:var(--muted);font-size:15px;border-bottom:1px dashed transparent}
.os-sub{font-family:var(--code);font-weight:700;font-size:14px;color:var(--walnut-d);margin:0 0 6px}
.os-shots{display:grid;gap:8px;margin-bottom:12px}
.os-shots li{display:grid;grid-template-columns:30px 1fr;gap:10px;background:#fff;border:1px solid var(--line);padding:8px 10px}
.os-shots .no{width:28px;height:28px;border:2px solid var(--walnut);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--code);font-weight:700}
.os-shots b{display:block;font-size:17px;color:var(--walnut-d)}
.os-shots li span:last-child{font-size:15px;line-height:1.6}
.os-note{font-size:15px;color:var(--muted);margin:0;background:rgba(255,255,255,.85)}

/* 자주 묻는 질문: 손잡이 모양 더하기 */
.qa{display:grid;gap:8px}
.qa details{background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--walnut)}
.qa summary{display:flex;align-items:flex-start;gap:10px;cursor:pointer;list-style:none;padding:14px;font-weight:700;font-size:17px;line-height:1.55;min-height:54px}
.qa summary::-webkit-details-marker{display:none}
.pl{position:relative;flex:none;width:26px;height:26px;margin-left:auto;border-radius:3px;background:var(--mustard)}
.pl::before,.pl::after{content:"";position:absolute;left:6px;right:6px;top:12px;height:2px;background:var(--ink)}
.pl::after{transform:rotate(90deg)}
.qa details[open] .pl::after{display:none}
.qa details p{margin:0;padding:0 16px 16px;font-size:16px;line-height:1.75}
.qa details[open]{background:var(--sage-l)}

/* 출장 지역: 선반마다 가격표 꼬리표 */
.area-red{color:var(--red);font-size:18px}
.shelves{display:grid;gap:18px;margin-top:10px}
.shelf{background:var(--paper);border:1px solid var(--line);border-bottom:8px solid var(--walnut);padding:0 10px 12px}
.shelf h3{display:inline-block;background:var(--walnut);color:#fff;font-size:20px;padding:6px 14px;margin:0 0 10px -10px}
.shelf h3 small{font-family:var(--code);font-size:13px;opacity:.9}
.shelf ul{display:flex;flex-wrap:wrap;gap:8px}
.shelf a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:4px 12px 4px 22px;background:var(--birch);border:1px solid var(--walnut-l);border-radius:3px 12px 12px 3px;text-decoration:none;font-size:16px;line-height:1.3}
.shelf a::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;border:1.5px solid var(--walnut-l);background:var(--paper)}
.shelf a:hover{background:var(--mustard-l)}

/* 하단 고정 [번호][문자보내기]: 상판 띠 */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--walnut);border-top:6px solid var(--birch2);box-shadow:0 -2px 0 var(--walnut-l);transition:transform .2s}
.dock a{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:3px;font-weight:700;font-size:18px;text-decoration:none;white-space:nowrap}
.dk-call{background:var(--paper);color:var(--walnut-d);font-family:var(--code)}
.dk-sms{background:var(--mustard);color:var(--ink)}
.dock.hide{transform:translateY(115%);visibility:hidden}

/* 하위 페이지 머리: 세이지 판 + 합판 단면 띠 */
.ph{background:var(--sage);color:#fff;border-bottom:10px solid transparent;border-image:var(--ply) 10}
.ph-in{max-width:1080px;margin:0 auto;padding:14px 16px 18px}
.crumb{font-size:14px;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.crumb a{color:#fff}
.ph-label{display:inline-block;background:var(--mustard);color:var(--ink);font-family:var(--code);font-weight:700;font-size:13px;padding:3px 10px;margin-bottom:8px}
.ph h1{font-size:29px;color:#fff}
.ph .lead{margin-top:12px;font-size:17px}
.upd{font-size:14px;opacity:.92;margin:0}
.ph .b-call{background:var(--paper);color:var(--walnut-d);box-shadow:0 4px 0 var(--sage-d)}

/* 하위 페이지 본문 요소 */
.pts{counter-reset:p;display:grid;gap:8px;margin-top:18px}
.pts li{counter-increment:p;position:relative;background:var(--paper);border:1px solid var(--line);padding:10px 12px 10px 50px;font-weight:700;font-size:16px;line-height:1.55}
.pts li::before{content:counter(p,decimal-leading-zero);position:absolute;left:8px;top:10px;font-family:var(--code);font-size:13px;background:var(--walnut);color:#fff;padding:1px 5px}
.toc{background:var(--paper);border:2px dashed var(--sage);padding:14px 16px;margin-top:18px}
.toc p{font-family:var(--code);font-weight:700;margin:0 0 6px;color:var(--sage-d);font-size:14px}
.toc ol{list-style:decimal;padding-left:22px}
.toc li{padding:3px 0}
.toc a{color:var(--walnut-d);font-size:16px;text-underline-offset:3px}
.facts{display:grid;gap:10px}
.facts div{background:var(--sage-l);padding:12px 14px;border-left:5px solid var(--sage)}
.facts h3{font-size:19px;color:var(--walnut-d);margin-bottom:4px}
.facts p{margin:0;font-size:16px}
.cmp{display:grid;gap:10px}
.cmp-r{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--walnut);padding:12px 14px}
.cmp-r strong{display:block;font-family:var(--head);font-weight:400;font-size:20px;color:var(--walnut-d);margin-bottom:4px}
.cmp-r p{margin:4px 0 0;font-size:16px}
.cmp-r b{display:inline-block;font-family:var(--code);background:var(--mustard-l);font-size:12px;padding:0 6px;margin-right:6px}
.chk{display:grid;gap:8px}
.chk li{background:var(--paper);border:1px solid var(--line);padding:10px 14px 10px 40px;position:relative}
.chk li::before{content:"";position:absolute;left:12px;top:15px;width:16px;height:16px;border:2px solid var(--walnut);border-radius:2px}
.chk b{display:block;color:var(--walnut-d);font-size:17px}
.chk span{font-size:16px}
.sum{background:var(--paper);border:2px solid var(--walnut);padding:6px 14px;margin:0}
.sum div{padding:10px 0;border-bottom:1px dashed var(--line)}
.sum div:last-child{border-bottom:0}
.sum dt{font-family:var(--code);font-weight:700;color:var(--sage-d);font-size:13px}
.sum dd{margin:0;font-size:16px}
.sum dd ul{list-style:disc;padding-left:20px}
.sum a{color:var(--sage-d);font-weight:700}
.links h2{margin-top:22px}
.rl{display:flex;flex-wrap:wrap;gap:8px}
.rl a{display:inline-flex;align-items:center;min-height:44px;padding:4px 14px;border:1px solid var(--walnut-l);border-radius:3px 12px 12px 3px;background:var(--paper);text-decoration:none;font-size:16px}
.ex{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ex figure{margin:0;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.ex img{width:100%;aspect-ratio:1/1;object-fit:cover}
.ex figcaption{padding:10px;font-size:15px;line-height:1.55}
.ex figcaption b{display:block;color:var(--walnut-d);font-size:17px}
.tip{background:var(--mustard-l);padding:12px 14px;margin-top:12px}
.flow{counter-reset:f;display:grid;gap:8px}
.flow li{counter-increment:f;position:relative;padding:10px 12px 10px 50px;background:var(--paper);border:1px solid var(--line);font-size:16px}
.flow li::before{content:counter(f,decimal-leading-zero);position:absolute;left:10px;top:11px;font-family:var(--code);font-weight:700;font-size:13px;background:var(--mustard);padding:1px 5px}
.local p{font-size:17px}
.rqs{display:grid;gap:12px}
.rq{display:grid;grid-template-columns:92px 1fr;gap:12px;background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--sage);padding:10px;text-decoration:none}
.rq-img{width:92px;height:116px;overflow:hidden}
.rq-img img{width:100%;height:100%;object-fit:cover}
.rq-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.rq-t strong{font-family:var(--head);font-weight:400;font-size:19px;color:var(--walnut-d);line-height:1.4}
.rq-t span{font-size:15px;line-height:1.6}
.rq-t em{font-style:normal;font-family:var(--code);font-size:12px;font-weight:700;color:var(--sage-d)}
.warn{display:grid;gap:8px;margin-top:8px}
.warn li{position:relative;padding:8px 12px 8px 42px;background:var(--mustard-l);font-size:16px}
.warn li::before{content:"!";position:absolute;left:12px;top:9px;width:22px;height:22px;background:var(--red);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.why-pick{background:var(--sage-l);padding:10px 14px}
.p-home .sec h2{font-size:28px}

/* 좁은 화면(320~359px) */
@media (max-width:359px){
  body{font-size:16px}
  .logo b{font-size:19px}.tag-kw{font-size:12px;padding:6px 7px 6px 14px}.logo svg{width:28px;height:28px}.logo{gap:6px}
  .drawers a{font-size:13px}
  .hero h1{font-size:29px}
  .cta a{font-size:16px;min-height:54px}
  .dock a{font-size:16px}
  .elev{grid-template-columns:1fr 1fr 64px}
  .cell b{font-size:18px}.cell small{font-size:13px}.cell.tall b{font-size:16px}
  .dw{grid-template-columns:78px 1fr;gap:10px}.dw-img{width:78px;height:78px}
  .tape li{grid-template-columns:90px 1fr}
  .way{grid-template-columns:88px 1fr}
  .rq{grid-template-columns:76px 1fr}.rq-img{width:76px;height:100px}
  .row{grid-template-columns:64px 1fr}
}

/* 넓은 화면에서 칸을 늘린다 */
@media (min-width:700px){
  body{font-size:18px}
  .hero h1{font-size:46px}
  .hero-in{display:grid;grid-template-columns:1.1fr 1fr;column-gap:32px;align-items:start}
  .hero-in>.kick,.hero-in>h1{grid-column:1}
  .hero-pair{grid-column:2;grid-row:1/5;margin-top:0}
  .hero-in>.lead,.hero-in>.cta{grid-column:1}
  .hero-in>.cta{grid-row:3}
  .drawers a{font-size:17px;flex-direction:row;gap:10px}
  .elev{grid-template-columns:repeat(4,1fr) 120px;grid-template-rows:auto 16px auto;padding:12px;gap:8px}
  .cell{min-height:120px}
  .cell.up{grid-column:1/5}
  .cell.tall{grid-column:5;grid-row:1/4}
  .ctop{grid-column:1/5}
  .cell.l0{grid-column:1;grid-row:3}.cell.l1{grid-column:2;grid-row:3}.cell.l2{grid-column:3;grid-row:3}.cell.l3{grid-column:4;grid-row:3}
  .dws{grid-template-columns:repeat(3,1fr)}
  .dw{grid-template-columns:1fr}.dw-img{width:100%;height:auto;aspect-ratio:4/3}
  .links .dws{grid-template-columns:1fr 1fr}
  .doors{grid-template-columns:1fr 1fr}
  .ixs{grid-template-columns:1fr 1fr}
  .ways{grid-template-columns:1fr 1fr}
  .tape{grid-template-columns:1fr 1fr}
  .facts,.cmp{grid-template-columns:repeat(3,1fr)}
  .chk{grid-template-columns:1fr 1fr}
  .rqs{grid-template-columns:repeat(3,1fr)}
  .rq{grid-template-columns:1fr}.rq-img{width:100%;height:auto;aspect-ratio:4/3}
  .ph h1{font-size:38px}
  .ph-in>.cta{max-width:520px}
  .dock{left:50%;right:auto;width:560px;margin-left:-280px}
  .wrap>.bp.big{max-width:720px}
}
@media (min-width:1000px){
  .doors{grid-template-columns:repeat(3,1fr)}
}