/* 회사소개 · 오시는길 · 납품실적 · 납품안내 · 견적문의 (pages/company.py)
   틀: 사진 배너(.pbn) → 제목줄(.ptl) → 1100px 본문(.pg). 본문 카드는 각진 4px, 남색 + 파랑 포인트 */
:root{--navy-d:#122A4E;--p-line:#E1E4E9;--p-soft:#F4F6F9;--p-r:4px}
main{background:#fff;display:flow-root}

/* ---------- 사진 배너 + 탭 ---------- */
.pbn{position:relative;height:326px;background:var(--tint) center/cover no-repeat;margin-bottom:20px;display:flex;flex-direction:column}
.pbn::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.78) 34%,rgba(255,255,255,.1) 68%,rgba(255,255,255,0) 100%)}
.pbn-in{position:relative;flex:1;width:min(1200px,calc(100% - 2*var(--gutter)));margin:0 auto;display:flex;flex-direction:column;justify-content:center}
.pbn-h{font-size:44px;font-weight:700;letter-spacing:-1.4px;color:#111;line-height:1.3;padding-bottom:10px}
.pbn-s{font-size:15px;font-weight:600;color:#222}
.pbn-tabs{position:relative;display:flex;justify-content:center;gap:4px;background:rgba(27,58,107,.86)}
.pbn-tabs a{color:rgba(255,255,255,.78);font-size:14px;font-weight:600;padding:9px 16px;position:relative}
.pbn-tabs a:hover{color:#fff}
.pbn-tabs a.on{color:#fff}
.pbn-tabs a.on::after{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;background:#fff}

/* ---------- 제목줄 ---------- */
.ptl{width:min(1200px,calc(100% - 2*var(--gutter)));margin:50px auto 40px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;border-bottom:1px solid #DDD}
.ptl h1{font-size:30px;font-weight:800;color:#4C4C4C;line-height:1;padding:10px 0 12px;letter-spacing:-.8px}
.ptl-nav{display:flex;align-items:center;gap:6px;font-size:12px;color:#666;padding-bottom:12px}
.ptl-nav .ar{color:#AAA;display:inline-flex}
.ptl-nav a{display:inline-flex;color:#666}.ptl-nav a:hover{color:var(--brand)}
.ptl-nav .here{color:var(--brand);font-weight:600}

/* ---------- 본문 ---------- */
.pg{width:min(1100px,calc(100% - 2*var(--gutter)));margin:0 auto;padding:0 0 80px;color:var(--ink);line-height:1.75}
.psec{margin-bottom:60px}
.psec.sm{margin-bottom:50px}

/* 남색 히어로 */
.phero{position:relative;overflow:hidden;padding:60px 50px;margin-bottom:50px;background:linear-gradient(135deg,var(--navy) 0%,#24508F 100%);color:#fff;border-radius:var(--p-r)}
.phero::before{content:"";position:absolute;top:0;right:0;width:340px;height:100%;background:linear-gradient(135deg,transparent 50%,rgba(47,111,228,.35) 100%);pointer-events:none}
.phero .eb{display:inline-block;font-size:14px;font-weight:600;letter-spacing:.3em;color:#9EC2FF;margin-bottom:20px}
.phero h2{font-size:clamp(32px,4.6vw,50px);font-weight:800;line-height:1.2;letter-spacing:-.03em;margin-bottom:20px}
.phero p{font-size:19px;line-height:1.7;opacity:.9;max-width:660px}

/* 섹션 머리: 영문 태그 · 제목 · 짧은 막대 */
.shd{margin-bottom:28px}
.shd-t{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.25em;color:var(--brand);margin-bottom:12px}
.shd h2{font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.3}
.shd-d{display:block;width:40px;height:3px;background:var(--brand);margin-top:16px}
.shd-s{font-size:16px;color:var(--ink2);margin-top:12px}
.shd.c{text-align:center;margin-bottom:36px}
.shd.c .shd-s{margin-top:12px}

/* 정보 카드 4개 (윗선 3px) */
.icards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:60px}
.psec .icards{margin-bottom:0}
.icard{padding:32px 24px;background:#fff;border:1px solid var(--p-line);border-top:3px solid var(--navy);border-radius:var(--p-r);transition:transform .2s,box-shadow .2s,border-color .2s}
.icard:hover{transform:translateY(-3px);box-shadow:0 6px 24px rgba(27,58,107,.08);border-top-color:var(--brand)}
.icard-i{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--p-soft);color:var(--navy);border-radius:8px;margin-bottom:18px}
.icard-l{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--ink3);margin-bottom:8px}
.icard-v{font-size:18px;font-weight:700;color:var(--navy);line-height:1.5;letter-spacing:-.01em}
.icard-v.tel{font-size:22px;letter-spacing:-.02em}
.icard-s{font-size:14px;font-weight:500;color:var(--ink2);margin-top:6px}

/* 방법 카드 (3열 / 4열) */
.dirs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dirs.four{grid-template-columns:repeat(4,1fr);gap:14px}
.dir{display:flex;flex-direction:column;padding:36px 30px;background:#fff;border:1px solid var(--p-line);border-radius:var(--p-r);transition:transform .3s,box-shadow .3s,border-color .3s}
.dirs.four .dir{padding:32px 24px}
.dir:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 6px 24px rgba(27,58,107,.08)}
.dir-i{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--p-soft);color:var(--navy);border-radius:8px;margin-bottom:22px;transition:background .3s,color .3s}
.dir:hover .dir-i{background:var(--navy);color:#fff}
.dir-n{font-size:13px;font-weight:700;letter-spacing:.15em;color:var(--brand);margin-bottom:8px}
.dir h3{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:16px}
.dirs.four .dir h3{font-size:20px;margin-bottom:10px}
.dir-p{font-size:15px;color:var(--ink2);flex:1}
.dir-a{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:14px;font-weight:700;color:var(--navy)}
.dir-a:hover{color:var(--brand)}
.dir ul{list-style:none}
.dir li{position:relative;padding:8px 0 8px 18px;font-size:15px;color:#555;line-height:1.7;border-bottom:1px solid #F0F2F5}
.dir li:last-child{border-bottom:0}
.dir li::before{content:"";position:absolute;left:0;top:18px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.dir li strong{color:var(--navy);font-weight:700}

/* 안내 박스 (왼쪽 파랑 선) */
.pnote{display:flex;align-items:flex-start;gap:18px;margin-top:30px;padding:24px 28px;background:linear-gradient(135deg,#F3F7FE 0%,var(--brand-tint) 100%);border-left:4px solid var(--brand);border-radius:var(--p-r)}
.pnote.wide{gap:20px;padding:28px 32px}
.pnote-i{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff}
.pnote.wide .pnote-i{width:48px;height:48px;border-radius:8px}
.pnote h3{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:8px}
.pnote.wide h3{font-size:18px}
.pnote p{font-size:15px;color:#555;line-height:1.7}
.pnote ul{padding-left:18px;font-size:15px;color:#555;line-height:1.8}
.pnote li::marker{color:var(--brand)}
.pnote strong{color:var(--navy);font-weight:700}
.pnote a{color:var(--brand-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* 어두운 문의 띠 */
.pcta{margin-top:60px;padding:50px 40px;background:#1C1F24;color:#fff;border-radius:var(--p-r);text-align:center}
.pcta-t{font-size:13px;font-weight:700;letter-spacing:.25em;color:#8DB6FF;margin-bottom:16px}
.pcta h2{font-size:clamp(22px,3vw,30px);font-weight:800;line-height:1.4;letter-spacing:-.02em;margin-bottom:28px}
.pcta-act{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.pcta-ph{display:inline-flex;align-items:center;gap:14px;padding:18px 36px;background:var(--brand);color:#fff;border-radius:var(--p-r);font-size:clamp(22px,3vw,28px);font-weight:800;letter-spacing:-.01em;transition:background .2s,transform .2s,box-shadow .2s}
.pcta-ph:hover{background:var(--brand-dark);transform:translateY(-2px);box-shadow:0 6px 24px rgba(47,111,228,.4)}
.pcta-ln{display:inline-flex;align-items:center;gap:8px;padding:18px 26px;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:var(--p-r);font-size:17px;font-weight:700}
.pcta-ln:hover{background:rgba(255,255,255,.1)}
.pcta-s{margin-top:20px;font-size:15px;opacity:.7;line-height:1.7}

/* 작은 버튼 (각진) */
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;font:inherit;font-size:14.5px;font-weight:700;color:#fff;background:var(--navy);border:1px solid var(--navy);border-radius:var(--p-r);cursor:pointer}
.pbtn:hover{background:var(--navy-d)}
.pbtn.line{background:#fff;color:var(--navy);border-color:var(--p-line)}
.pbtn.line:hover{border-color:var(--navy)}

/* ---------- 인사말: 미색 편지지 ---------- */

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:230px;gap:12px}
.pgrid figure{position:relative;overflow:hidden;border-radius:var(--p-r);margin:0}
.pgrid figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.pgrid img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pgrid figure:hover img{transform:scale(1.03)}
.pgrid figcaption{position:absolute;left:0;bottom:0;background:var(--navy);color:#fff;font-size:13px;font-weight:700;padding:7px 14px}

/* ---------- 오시는길 ---------- */
.map{position:relative;border:1px solid var(--p-line);border-radius:var(--p-r);overflow:hidden;background:var(--p-soft)}
.map iframe{display:block;width:100%;height:480px;border:0}
.map-badge{position:absolute;top:16px;left:16px;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 20px;background:#fff;border-radius:var(--p-r);box-shadow:0 4px 16px rgba(0,0,0,.12);pointer-events:none}
.map-pin{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff}
.map-badge div strong{display:block;font-size:16px;font-weight:800;color:var(--navy);line-height:1.4}
.map-badge div span{display:block;font-size:13px;color:#666}
.map-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;padding:18px 22px;background:var(--p-soft);border-radius:var(--p-r)}
.map-bar p{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:15px;color:var(--ink2)}
.map-bar p .ico{color:var(--brand)}
.map-bar b{font-size:17px;color:var(--navy)}
.map-bar span{color:var(--ink3);font-size:14px}
.map-btns{display:flex;gap:8px;flex-wrap:wrap}
.store-ph{position:relative;margin:14px 0 0;border-radius:var(--p-r);overflow:hidden;aspect-ratio:21/8}
.store-ph img{width:100%;height:100%;object-fit:cover}
.store-ph figcaption{position:absolute;left:0;bottom:0;background:var(--navy);color:#fff;font-size:13px;font-weight:700;padding:8px 14px}

/* ---------- 납품실적 ---------- */
.pintro{padding:40px 44px;margin-bottom:60px;background:var(--p-soft);border-radius:var(--p-r);text-align:center}
.pintro p{max-width:760px;margin:0 auto;font-size:18px;line-height:1.85;color:#333}
.pintro p+p{margin-top:14px}
.pintro strong{color:var(--navy);font-weight:700}

.ftiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ftile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 16px 22px;font:inherit;background:#fff;border:1px solid var(--p-line);border-radius:var(--p-r);cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.ftile:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:0 4px 20px rgba(27,58,107,.08)}
.ftile-i{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:10px;background:var(--p-soft);color:var(--navy);border-radius:8px;transition:background .2s,color .2s}
.ftile-n{font-size:16px;font-weight:700;color:var(--navy)}
.ftile-c{font-size:13px;font-weight:600;color:var(--ink3)}
.ftile:hover .ftile-i{background:var(--navy);color:#fff}
.ftile.on{border:2px solid var(--navy);padding:25px 15px 21px}
.ftile.on .ftile-i{background:var(--navy);color:#fff}
.ftile.on .ftile-c{color:var(--brand)}
.ftile:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.rlist{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* 납품 기록: 납품일지 기준 글 상자 (사진 없음) */
.rcard{display:flex;flex-direction:column;padding:22px 24px 20px;background:#fff;border:1px solid var(--p-line);border-radius:12px;transition:border-color .15s}
.rcard:hover{border-color:var(--ink)}
.rcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--p-line)}
.rcard-d{font-size:13px;font-weight:700;color:var(--ink3);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.rcard-tag{font-size:12.5px;font-weight:700;color:var(--brand)}
.rcard h3{margin:14px 0 8px;font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.4}
.rcard ul{list-style:none;margin:0;padding:0}
.rcard li{position:relative;padding:4px 0 4px 12px;font-size:14.5px;color:#4e5968;line-height:1.6}
.rcard li::before{content:"";position:absolute;left:0;top:13px;width:4px;height:1px;background:#8b95a1}

/* ---------- 납품안내 ---------- */
.depart{display:flex;align-items:center;gap:24px;margin-bottom:50px;padding:28px 36px;background:var(--p-soft);border-left:4px solid var(--brand);border-radius:var(--p-r)}
.depart-i{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff}
.depart-l{font-size:13px;font-weight:700;letter-spacing:.15em;color:var(--ink3);margin-bottom:4px}
.depart-a{font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.4}

.phd{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.phd-i{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;border-radius:8px;background:var(--navy);color:#fff}
.phd-t{display:block;font-size:12px;font-weight:700;letter-spacing:.25em;color:var(--brand);margin-bottom:2px}
.phd h2{font-size:clamp(22px,2.8vw,28px);font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.3}

.recv-ph{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.recv-ph figure{position:relative;margin:0;aspect-ratio:16/7;border-radius:var(--p-r);overflow:hidden}
.recv-ph img{width:100%;height:100%;object-fit:cover}
.recv-ph figcaption{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:6px;background:var(--navy);color:#fff;font-size:13px;font-weight:700;padding:7px 14px}

.tbl-wrap{overflow-x:auto;background:#fff;border:1px solid var(--p-line);border-radius:var(--p-r)}
.tbl{width:100%;min-width:580px;border-collapse:collapse}
.tbl thead th{padding:18px 16px;background:var(--navy);color:#fff;font-size:16px;font-weight:700;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.tbl thead th:first-child{background:var(--navy-d);text-align:left;padding-left:24px;width:150px}
.tbl thead th:last-child{border-right:0}
.tbl thead th .ico{display:block;margin:0 auto 8px;color:#9EC2FF}
.tbl thead th span{display:block}
.tbl tbody td{padding:16px 20px;font-size:16px;color:#333;text-align:center;line-height:1.6;border-bottom:1px solid #EEF0F3;border-right:1px solid #F2F4F6}
.tbl tbody td:first-child{background:var(--p-soft);text-align:left;padding-left:24px;font-size:15px;font-weight:700;color:var(--navy)}
.tbl tbody td:last-child{border-right:0}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:#F7FAFF}
.tbl tbody tr:hover td:first-child{background:var(--brand-tint)}
.tbl .ask{color:var(--brand);font-weight:800}
.tbl.two thead th:last-child,.tbl.two tbody td:last-child{text-align:left}
.tbl.two thead th:first-child{width:200px}

.mcards{display:none}
.mcard{background:#fff;border:1px solid var(--p-line);border-radius:var(--p-r);margin-bottom:10px;overflow:hidden}
.mcard-h{background:var(--navy);color:#fff;padding:10px 14px;font-size:14px;font-weight:700}
.mcard-b{display:grid;grid-template-columns:1fr 1fr}
.mcard-b>div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;font-size:14px}
.mcard-b>div+div{border-left:1px solid #EEF0F3}
.mcard-b span{font-size:12px;font-weight:600;color:var(--ink3)}
.mcard-b b{font-weight:700;color:var(--navy);line-height:1.5}
.mcard-b .ask{color:var(--brand)}
.mcard.one .mcard-b{grid-template-columns:1fr}
.mcard.one .mcard-b b{font-weight:500;color:#444}

.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch}
.flow.five{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr}
.flow-st{padding:30px 18px;background:#fff;border:2px solid var(--p-line);border-radius:var(--p-r);text-align:center;transition:border-color .3s,transform .3s}
.flow-st:hover{border-color:var(--navy);transform:translateY(-3px)}
.flow-n{display:inline-block;width:48px;height:48px;line-height:48px;border-radius:50%;background:var(--navy);color:#fff;font-size:20px;font-weight:800;margin-bottom:16px}
.flow-st h3{font-size:18px;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:8px}
.flow-st p{font-size:14.5px;color:#555;line-height:1.65}
.flow-ar{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--brand)}

/* ---------- 견적문의: 가운데 카드 ---------- */
.qv{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.qv-box{background:#fff;border-radius:20px;padding:30px 28px;box-shadow:0 1px 3px rgba(0,0,0,.2),0 4px 14px rgba(0,0,0,.06)}
.qv-h{font-size:24px;font-weight:800;color:var(--brand);margin-bottom:6px;letter-spacing:-.5px}
.qv-p{font-size:14.5px;color:var(--ink2);margin-bottom:8px;line-height:1.6}
.qv-p b{color:var(--ink)}
.qv em{font-style:normal;color:#D93025}
.qv-lb{display:block;font-size:14px;font-weight:800;color:#444746;margin:16px 0 6px}
.qv-in{display:block;width:100%;min-width:0;padding:13px 14px;font:inherit;font-size:17px;color:var(--ink);background:#fff;border:1.5px solid #747775;border-radius:12px}
.qv-in:focus{outline:2px solid rgba(47,111,228,.25);border-color:var(--brand)}
textarea.qv-in{min-height:180px;resize:vertical;line-height:1.6}
.qv-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qv-row>div{min-width:0}
.qv-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qv-seg label{position:relative;cursor:pointer}
.qv-seg input{position:absolute;opacity:0;pointer-events:none}
.qv-seg span{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;font-size:15px;font-weight:700;color:#444746;background:#fff;border:1.5px solid #747775;border-radius:999px}
.qv-seg input:checked+span{background:var(--brand-tint);color:var(--brand-dark);border-color:var(--brand)}
.qv-seg input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.qv-hint{margin-top:6px;font-size:13px;color:var(--ink2)}
.qv-big{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;padding:15px 0;font:inherit;font-size:17px;font-weight:800;color:#fff;background:var(--brand);border:0;border-radius:999px;cursor:pointer;text-align:center}
.qv-big:hover{background:var(--brand-dark)}
.qv-big.line{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}
.qv-big.line:hover{background:var(--brand-tint)}
.qv-help{margin-top:12px;font-size:13.5px;color:var(--ink2)}
.qv-help a{color:var(--brand);font-weight:800}

.qd{background:#fff;border:1px solid #C9CCD1;border-radius:4px;padding:28px 26px 24px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.qd-t{text-align:center;font-size:26px;font-weight:900;letter-spacing:.5em;padding-left:.5em;color:#111}
.qd-no{text-align:center;font-size:13px;color:#555;margin:2px 0 14px;padding-bottom:12px;border-bottom:2px solid #111}
.qd pre{white-space:pre-wrap;word-break:break-all;font-family:inherit;font-size:14.5px;line-height:1.75;color:#111}
.qv-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qv-btns .qv-big{margin-top:14px}

.qv-info{display:grid;gap:4px}
.qv-info .qv-lb{margin:12px 0 4px}
.qv-info>div:first-child .qv-lb{margin-top:0}
.qv-tel a{display:block;font-size:26px;font-weight:800;color:var(--brand);letter-spacing:-.5px}
.qv-tel span{font-size:14px;color:var(--ink2)}
.qv-hrs{list-style:none;font-size:15px}
.qv-hrs li{display:flex;gap:14px;padding:2px 0}
.qv-hrs span{width:60px;color:var(--ink3)}
.qv-steps{padding-left:20px;font-size:15px;color:var(--ink2)}
.qv-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14px;font-weight:700;color:var(--brand)}

/* 견적문의: 위 품목 고르기 · 아래 요청서(좌) + 안내(우, 고정) */
.qpick{min-width:0}
@media (min-width:1025px){
  .qpick .cq-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cq-fab.onq{display:none}
}
@media (min-width:1025px) and (max-width:1240px){
  .qpick .cq-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qpick .cq-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 데스크톱(1025px~): 왼쪽 품목 고르기 + 오른쪽 고정 요청서 패널(내부 스크롤) */
.qpg{width:min(1320px,calc(100% - 2*var(--gutter)))}
@media (min-width:1001px){.qpg{width:min(1320px,calc(100% - 2*max(var(--gutter),112px)))}} /* 오른쪽 빠른메뉴(88px)와 겹치지 않게 */
.qlay{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.qside{position:sticky;top:116px;max-height:calc(100vh - 132px);overflow-y:auto;overscroll-behavior:contain;border-radius:16px;scrollbar-width:thin}
.qside-box{padding:22px 20px 20px;border-radius:16px;box-shadow:none;border:1px solid var(--line)}
.qside-box em{font-style:normal;color:#D93025}
.qside .qv-h{font-size:21px}
.qside .qv-lb{font-size:13.5px;margin:14px 0 5px}
.qside .qv-in{font-size:15px;padding:10px 12px;border-width:1px;border-color:var(--line);border-radius:10px}
.qside .qv-in:focus{border-color:var(--ink);outline:0}
.qside textarea.qv-in{min-height:76px}
.qside .qv-row{gap:8px}
.qside .qv-seg span{font-size:14px;padding:10px 6px;border-width:1px;border-color:var(--line)}
.qside .qv-big{font-size:16px;padding:14px 0;margin-top:16px}
.qside-info{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.qside-info .qv-tel{display:flex;align-items:baseline;gap:10px}
.qside-info .qv-tel span{font-weight:700;color:var(--ink2)}
.qside-info .qv-tel a{display:inline;font-size:19px}
.qside-info .qv-hrs{font-size:13.5px;margin-top:4px}
.qside-info .qv-hrs li{padding:0}
.qside-info .qv-help{margin-top:8px;font-size:12.5px}
.qpick-hd{margin-bottom:14px}
.qpick-hd h2{font-size:clamp(20px,2.8vw,25px);font-weight:800;letter-spacing:-.03em;line-height:1.35}
.qpick-hd p{margin-top:4px;color:var(--ink2);font-size:14.5px;line-height:1.6}
.qv-lb small{font-size:12.5px;font-weight:600;color:var(--ink3);margin-left:4px}
.qv-err{margin-top:6px;font-size:13.5px;font-weight:700;color:#D93025}
.qv-in.bad{border-color:#D93025}
.qc{margin-top:12px;scroll-margin-top:110px}
.qc-list{list-style:none;border-top:1px solid #111}
.qc-list[hidden]{display:none}
.qc-it{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}
.qc-tx{min-width:0}
.qc-tx b{display:block;font-size:14px;font-weight:800;color:#111;line-height:1.35;word-break:break-all}
.qc-tx small{display:block;font-size:12px;color:var(--ink3);word-break:break-all}
.qc-it .cq-step{border-radius:8px}
.qc-it .cq-step button{width:30px;height:32px;font-size:17px}
.qc-it .cq-step input{width:42px;height:32px;font-size:14px}
.qc-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:8px}
.qc-hd .qv-lb{margin:0}
.qc-hd .qv-lb b{color:var(--brand)}
.qc-clear{background:none;border:0;padding:4px 0;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qc-clear:hover{color:var(--ink)}
.qc-clear[hidden]{display:none}
.qc-del{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 9px;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;white-space:nowrap}
.qc-del:hover{border-color:var(--ink);color:var(--ink)}
.qc-empty{padding:18px 0;font-size:14px;color:var(--ink2);border-top:1px solid #111;border-bottom:1px solid var(--line)}
.qc-empty[hidden]{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 견적 요청서 문서 */
.qd-info{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:16px}
.qd-info th{width:92px;padding:6px 8px;text-align:left;font-weight:700;color:#555;background:#F7F8FA;border:1px solid #D5D8DC}
.qd-info td{padding:6px 10px;border:1px solid #D5D8DC;color:#111;word-break:break-all}
.qd-sub{font-size:14px;font-weight:800;color:#111;margin:4px 0 6px}
.qd-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.qd-tbl th{padding:6px 6px;font-weight:700;color:#555;background:#F7F8FA;border:1px solid #D5D8DC;text-align:center;white-space:nowrap}
.qd-tbl td{padding:6px 8px;border:1px solid #D5D8DC;color:#111;word-break:break-all}
.qd-tbl td.c{text-align:center;white-space:nowrap}
.qd-tbl td.r{text-align:right;font-weight:800;white-space:nowrap}
.qd pre{margin-top:2px;padding:10px 12px;border:1px solid #D5D8DC}
.qd-foot{margin-top:14px;font-size:12.5px;color:#555;text-align:right}
.qv-btns.three{grid-template-columns:repeat(3,1fr)}
/* 정리 결과 모달 */
.qres{position:fixed;inset:0;z-index:135;display:flex;align-items:center;justify-content:center;padding:24px}
.qres[hidden]{display:none}
.qres-dim{position:absolute;inset:0;background:rgba(23,28,36,.5)}
.qres-pn{position:relative;display:flex;flex-direction:column;width:min(760px,100%);max-height:calc(100vh - 48px);background:#fff;border-radius:16px;overflow:hidden;outline:0}
.qres-hd{flex:none;display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 22px;border-bottom:1px solid var(--line)}
.qres-hd h2{font-size:18px;font-weight:800;letter-spacing:-.03em}
.qres-x{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.qres-x:hover{background:var(--tint)}
.qres-bd{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 22px;background:var(--surface)}
.qres-ft{flex:none;padding:4px 22px 16px;border-top:1px solid var(--line)}
.qres-ft .qv-big{margin-top:12px;padding:13px 0;font-size:16px}

/* ---------- 반응형 ---------- */
@media (max-width:1000px){
  .pbn{height:240px}
  .pbn-h{font-size:34px}
  .ptl{margin:36px auto 28px}
  .ptl h1{font-size:26px}
  .icards{grid-template-columns:repeat(2,1fr)}
  .dirs,.dirs.four{grid-template-columns:1fr 1fr}
  .dirs .dir:last-child:nth-child(odd){grid-column:span 2}
  .rlist{grid-template-columns:1fr 1fr}
  .ftiles{grid-template-columns:repeat(6,1fr);gap:8px}
  .ftile{padding:18px 6px 16px}.ftile.on{padding:17px 5px 15px}
  .map iframe{height:380px}
  .flow,.flow.five{grid-template-columns:1fr;gap:10px}
  .flow-ar{transform:rotate(90deg);padding:0}
  .flow-st{display:grid;grid-template-columns:48px 1fr;column-gap:16px;text-align:left;padding:20px}
  .flow-n{grid-row:span 2;margin:0;display:flex;align-items:center;justify-content:center;align-self:start;line-height:1}
  .flow-st h3{margin:2px 0 2px}
}
@media (max-width:700px){
  .pbn{height:200px;margin-bottom:0}
  .pbn::before{background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.7) 60%,rgba(255,255,255,.25) 100%)}
  .pbn-h{font-size:28px;padding-bottom:4px}
  .pbn-s{font-size:13.5px}
  .ptl{margin:28px auto 22px}
  .ptl h1{font-size:22px}
  .ptl-nav{display:none}
  .pg{padding-bottom:56px}
  .psec{margin-bottom:44px}
  .phero{padding:40px 24px;margin-bottom:24px}
  .phero .eb{font-size:12px;margin-bottom:14px}
  .phero h2{font-size:30px;margin-bottom:12px}
  .phero p{font-size:15px}
  .icards{margin-bottom:44px}
  .icard{padding:22px 18px}
  .icard-v{font-size:16px}.icard-v.tel{font-size:17px}
  .pgrid{grid-template-columns:1fr 1fr;grid-auto-rows:140px;gap:8px}
  .pgrid figure:nth-child(1){grid-row:auto}
  .pgrid figure:nth-child(6){grid-column:span 2}
  .map iframe{height:320px}
  .map-badge{position:relative;top:0;left:0;margin:12px;max-width:calc(100% - 24px)}
  .map-btns{width:100%}.map-btns .pbtn{flex:1 1 auto}
  .store-ph{aspect-ratio:16/9}
  .pintro{padding:28px 20px;margin-bottom:44px}
  .pintro p{font-size:16px}
  .ftiles{grid-template-columns:repeat(3,1fr)}
  .rlist{grid-template-columns:1fr}
  .pnote,.pnote.wide{flex-direction:column;gap:12px;padding:20px}
  .pnote ul{font-size:14.5px;padding-left:16px}
  .pcta{margin-top:44px;padding:36px 20px}
  .pcta h2{font-size:20px;margin-bottom:22px}
  .pcta-ph{padding:14px 22px;font-size:22px;width:100%;justify-content:center}
  .pcta-ln{width:100%;justify-content:center;padding:14px}
  .pcta-s{font-size:13px}
  .depart{gap:14px;padding:18px;margin-bottom:32px}
  .depart-i{width:40px;height:40px}
  .depart-l{font-size:11px}
  .depart-a{font-size:15px}
  .phd{gap:12px;margin-bottom:16px}
  .phd-i{width:40px;height:40px}
  .phd h2{font-size:19px}
  .recv-ph{gap:8px}
  .recv-ph figure{aspect-ratio:4/3}
  .tbl-wrap{display:none}
  .mcards{display:block}
  .qv-box{padding:24px 18px;border-radius:16px}
  .qv-row{grid-template-columns:1fr;gap:0}
  .qd{padding:20px 14px}
  .qd-t{font-size:21px;letter-spacing:.35em}
  .qd-info th{width:76px}
}
@media (max-width:560px){
  .icards{grid-template-columns:1fr}
  .dirs,.dirs.four{grid-template-columns:1fr}
  .dirs .dir:last-child:nth-child(odd){grid-column:auto}
  .dir{padding:26px 22px}
  .qv-btns,.qv-btns.three{grid-template-columns:1fr}
}

@media (max-width:1024px){
  .qlay{grid-template-columns:1fr;gap:40px}
  .qside{position:static;max-height:none;overflow:visible}
}
@media (max-width:700px){
  .qres{padding:0;align-items:flex-end}
  .qres-pn{max-height:92vh;max-height:92dvh;border-radius:18px 18px 0 0}
  .qres-bd{padding:14px 12px}
  .qres-ft{padding:2px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .qres-ft .qv-btns.three{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .qres-ft .qv-big{font-size:14px;padding:12px 0}
  .qres-ft .qv-big .ico{display:none}
  .qres-ft .qv-help{font-size:12.5px;margin-top:8px}
  .qside-box{padding:20px 16px}
}

/* 인사말: 사진 좌 · 글 우 */
.greet{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start;margin:0 auto 80px}
.greet-ph{position:sticky;top:110px}
.greet-ph img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px}
.greet-ph figcaption{margin-top:10px;font-size:13px;color:var(--ink3)}
.greet-eb{font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--brand);margin-bottom:14px}
.greet-tx h2{font-size:clamp(26px,3vw,36px);font-weight:800;line-height:1.4;letter-spacing:-.03em;color:var(--ink)}
.greet-tx h2 em{font-style:normal;color:var(--brand)}
.greet-tx p{font-size:16.5px;line-height:1.9;color:var(--ink2);margin-top:18px}
.greet-tx .greet-hi{margin-top:32px;padding-top:28px;border-top:1px solid var(--line);font-weight:700;color:var(--ink)}
.greet-tx .greet-sign{margin-top:32px;font-weight:800;font-size:18px;color:var(--ink)}
@media (max-width:1000px){
  .greet{grid-template-columns:1fr;gap:28px;margin-bottom:56px}
  .greet-ph{position:static}
  .greet-ph img{aspect-ratio:16/10}
  .greet-tx p{font-size:15.5px}
}

/* 게시판 · 공지사항 (pages/board.py) — 얇은 선 표 */
.bd-note{font-size:13px;color:var(--ink3);margin-bottom:18px}
.bd-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.bd-total{font-size:14px;color:var(--ink2)}
.bd-total b{color:var(--brand);font-weight:800}
.bd-find{display:flex;align-items:center;width:min(300px,100%);height:42px;border:1px solid var(--line);border-radius:4px;background:#fff}
.bd-find:focus-within{border-color:var(--ink)}
.bd-find input{flex:1;min-width:0;height:100%;padding:0 12px;border:0;outline:0;background:transparent;font-family:inherit;font-size:15px;color:var(--ink)}
.bd-find button{display:flex;align-items:center;justify-content:center;width:42px;height:100%;border:0;background:none;color:var(--ink);cursor:pointer}
.bd-tbl{width:100%;border-collapse:collapse;border-top:1px solid #111;font-size:15px;background:#fff}
.bd-tbl th{padding:13px 10px;font-size:14px;font-weight:700;color:var(--ink2);border-bottom:1px solid var(--line)}
.bd-tbl td{padding:15px 10px;border-bottom:1px solid var(--line);color:var(--ink2);text-align:center}
.bd-tbl .n{width:80px}.bd-tbl .d{width:130px}
.bd-tbl td.t{text-align:left;color:#111;font-weight:600}
.bd-tbl td.t a:hover{text-decoration:underline;text-underline-offset:3px}
.bd-tbl tr[hidden]{display:none}
.bd-empty{padding:40px 0;text-align:center;color:var(--ink2);border-bottom:1px solid var(--line)}
.bd-pager{display:flex;justify-content:center;gap:4px;margin-top:28px}
.bd-pager button{min-width:34px;height:34px;padding:0 8px;border:1px solid transparent;border-radius:4px;background:none;font-family:inherit;font-size:14px;color:var(--ink2);cursor:pointer}
.bd-pager button:hover{border-color:var(--line)}
.bd-pager button.on{border-color:#111;color:#111;font-weight:800}
.bd-view{border-top:1px solid #111;background:#fff}
.bd-vh{padding:22px 16px 16px;border-bottom:1px solid var(--line)}
.bd-vh h2{font-size:22px;font-weight:800;letter-spacing:-.04em;line-height:1.4;color:#111}
.bd-vh p{display:flex;gap:16px;margin-top:8px;font-size:13.5px;color:var(--ink3)}
.bd-body{padding:28px 16px 40px;font-size:15.5px;line-height:1.85;color:#222;border-bottom:1px solid var(--line)}
.bd-body p+p,.bd-body p+ul,.bd-body p+ol,.bd-body ul+p,.bd-body ol+p{margin-top:12px}
.bd-body ul,.bd-body ol{padding-left:1.3em}
.bd-body a{color:var(--brand);font-weight:700}
.bd-nav{width:100%;border-collapse:collapse;margin-top:24px;font-size:14.5px;border-top:1px solid var(--line)}
.bd-nav th{width:90px;padding:12px 14px;text-align:left;font-weight:700;color:var(--ink2);border-bottom:1px solid var(--line)}
.bd-nav td{padding:12px 4px;border-bottom:1px solid var(--line)}
.bd-nav td span{color:var(--ink3)}
.bd-nav a:hover{text-decoration:underline;text-underline-offset:3px}
.bd-act{display:flex;justify-content:center;margin-top:28px}
.bd-btn{display:inline-flex;align-items:center;justify-content:center;min-width:120px;padding:11px 24px;border:1px solid #111;border-radius:4px;font-weight:700;font-size:15px;background:#fff}
.bd-btn:hover{background:#111;color:#fff}
@media (max-width:700px){
  .bd-top{flex-wrap:wrap}
  .bd-find{width:100%}
  .bd-tbl .n{display:none}
  .bd-tbl .d{width:96px;font-size:13px}
  .bd-tbl td{padding:13px 6px}
  .bd-vh h2{font-size:19px}
  .bd-body{font-size:15px;padding:22px 6px 32px}
  .bd-nav th{width:72px;padding:12px 8px}
}

/* 견적문의: PC에서 폭을 넓히고 품목 칸 4열 */
@media (min-width:1001px){
  html body .pg.qpg{width:min(1440px,calc(100vw - 232px));max-width:none}
  html body .qpick .cq-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
}
/* 노트북 폭: 왼쪽 분류 목록을 위쪽 가로 칸으로 올려 품목 칸이 좁아지지 않게 */
@media (min-width:1001px) and (max-width:1600px){
  html body .qpick .cq:not([data-lock]){grid-template-columns:minmax(0,1fr);grid-template-areas:'bar' 'quick' 'tabs' 'grid' 'empty' 'more'}
  html body .qpick .cq-tabs{position:static;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 16px}
  html body .qpick .cq-tabs button{min-height:0;padding:10px 12px;border-right:1px solid #e8edf3}
  html body .qpick .cq-tabs button:nth-child(5n){border-right:0}
  html body .qpick .cq-tabs button .cq-tab-text small{display:none}
}