/* 우림타일: 콘크리트 회색 + 안전 노랑. 굵은 격자, 규격표 중심. */
:root {
  --bg: #DAD9D4;
  --paper: #F2F1ED;
  --white: #FFFFFF;
  --ink: #161615;
  --ink2: #383835;
  --mute: #686762;
  --hair: #B9B8B2;
  --soft: #E7E6E1;
  --y: #FFC400;
  --y-soft: #FFF1BF;
  --red: #C4321C;
  --green: #2E7A4A;
  --en: "Oswald", "Spoqa Han Sans Neo", sans-serif;
  --head: "Oswald", "Sunflower", "Spoqa Han Sans Neo", sans-serif;
  --ko: "Spoqa Han Sans Neo", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --band: 34px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink); font-family: var(--ko); font-size: 15px; line-height: 1.6; word-break: keep-all; -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; outline: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.mono { font-family: var(--en); letter-spacing: .02em; }
.strong { font-weight: 700; }
.muted { color: var(--mute); }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
small { font-size: .82em; }
:focus-visible { outline: 3px solid var(--y); outline-offset: 1px; }

/* SDE 데모 띠 (sde.kr/web 예시 공통) */
.demo { background: #111418; color: #C9CCD1; font-size: 13px; text-align: center; padding: 8px 16px; }
.demo a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.demo b { color: #FF5A36; font-family: Menlo, monospace; }
.demo button { background: none; border: 0; color: #fff; text-decoration: underline; text-underline-offset: 2px; font-size: 13px; }

/* 머리 */
.top { background: var(--paper); border-bottom: 3px solid var(--ink); position: sticky; top: 0; z-index: 30; }
.top-in { max-width: 1280px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 28px; height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.mark rect { fill: var(--ink); }
.mark rect.y { fill: var(--y); }
.lw { display: flex; flex-direction: column; line-height: 1; }
.lw b { font-family: "Sunflower", var(--ko); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.lw small { font-family: var(--en); font-size: 10px; font-weight: 500; letter-spacing: .26em; margin-top: 4px; color: var(--ink2); }
.nav { display: flex; gap: 2px; flex: 1; }
.nav a { text-decoration: none; font-weight: 700; padding: 0 14px; height: 66px; display: flex; align-items: center; gap: 6px; position: relative; color: var(--ink2); }
.nav a:hover { color: var(--ink); background: var(--soft); }
.nav a.on { color: var(--ink); }
.nav a.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -3px; height: 5px; background: var(--y); border-bottom: 0; }
.nav a i { font-style: normal; font-family: var(--en); font-size: 12px; background: var(--red); color: #fff; min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 5px; }
.tools { display: flex; align-items: center; gap: 10px; flex: none; }
.admin-tg { border: 2px solid var(--ink); background: transparent; height: 36px; padding: 0 12px; font-weight: 700; font-size: 14px; }
.admin-tg:hover { background: var(--ink); color: var(--y); }
.is-admin .admin-tg { background: var(--ink); color: var(--y); }
.adminbar { background: var(--ink); color: #E8E7E2; position: relative; padding-top: 6px; }
.adminbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--y) 0 10px, var(--ink) 10px 20px); }
.adminbar .top-in { height: 38px; gap: 14px; font-size: 13px; }
.adminbar b { color: var(--y); font-family: var(--ko); }

/* 공통 조각 */
.seg { display: inline-flex; border: 2px solid var(--ink); background: var(--white); flex: none; }
.seg button, .seg a { border: 0; background: none; padding: 0 12px; height: 34px; display: inline-flex; align-items: center; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; color: var(--ink2); }
.seg > * + * { border-left: 2px solid var(--ink) !important; }
.seg .on { background: var(--ink); color: var(--y); }
.seg.sm button, .seg.sm a { height: 30px; padding: 0 10px; font-size: 13px; }
.seg.wide { display: flex; }
.seg.wide button { flex: 1; justify-content: center; height: 42px; }
.vat button { font-family: var(--en); font-weight: 500; letter-spacing: .02em; font-size: 13px; height: 32px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 0 20px; border: 2px solid var(--ink); font-weight: 700; text-decoration: none; background: var(--white); white-space: nowrap; }
.btn.y { background: var(--y); }
.btn.y:hover { background: var(--ink); color: var(--y); }
.btn.line { background: transparent; }
.btn.line:hover { background: var(--ink); color: var(--white); }
.btn.sm { height: 36px; padding: 0 12px; font-size: 14px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; background: var(--soft); color: var(--mute); }

input, select, textarea { border: 2px solid var(--ink); background: var(--white); border-radius: 0; padding: 0 10px; height: 40px; width: 100%; min-width: 0; }
textarea { height: auto; padding: 10px; resize: vertical; }
select { padding-right: 28px; appearance: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23161615'/%3E%3C/svg%3E") no-repeat right 10px center; text-overflow: ellipsis; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--y); outline-offset: 0; }
input.bad, select.bad, textarea.bad { border-color: var(--red); background-color: #FFF2EE; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.num { display: flex; align-items: stretch; min-width: 0; }
.num input { font-family: var(--en); font-size: 16px; text-align: right; border-right: 0; }
.num i { font-style: normal; display: grid; place-items: center; padding: 0 8px; border: 2px solid var(--ink); border-left: 0; background: var(--soft); font-family: var(--en); font-size: 13px; color: var(--ink2); }
.num input.bad + i { border-color: var(--red); }
.num.sm input { height: 34px; width: 64px; font-size: 15px; }
.num.sm i { padding: 0 6px; }
.ck { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.err { color: var(--red); font-size: 13px; font-weight: 500; font-style: normal; }
.hint { color: var(--mute); font-size: 13px; }
.fine { color: var(--mute); font-size: 12px; margin-top: 8px; }
.eyebrow { font-family: var(--en); font-size: 13px; letter-spacing: .08em; font-weight: 500; color: var(--mute); }

.page { padding-top: 34px; padding-bottom: 72px; }
.ph { margin-bottom: 22px; }
.ph.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.ph h1 { font-family: var(--head); font-size: 38px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.ph p { color: var(--mute); margin-top: 4px; }
.sec { margin-top: 48px; }
.sec.first { margin-top: 8px; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 3px solid var(--ink); padding-bottom: 8px; margin-bottom: 0; }
.sec-h h2 { font-family: var(--head); font-size: 22px; font-weight: 700; }
.sec-h span { color: var(--mute); font-size: 13px; }
.sec.two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.block { background: var(--paper); border: 2px solid var(--ink); padding: 18px; }
.block h2 { font-family: var(--head); font-size: 18px; margin-bottom: 10px; }
.block + .block { margin-top: -2px; }

/* 재고 표시 */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; white-space: nowrap; padding: 2px 8px 2px 6px; border: 1.5px solid currentColor; line-height: 1.5; }
.st::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; }
.st.in { color: var(--green); }
.st.low { color: var(--ink); background: var(--y); border-color: var(--ink); }
.st.inc { color: var(--ink); background: var(--white); border-style: dashed; }
.st.inc::before { background: transparent; border: 1.5px solid currentColor; }
.st.out, .st.off { color: var(--mute); }
.st.out::before, .st.off::before { background: transparent; border: 1.5px solid currentColor; }

/* 견본 그림 */
.tex { display: block; width: 100%; height: 100%; }
.dimln { stroke: var(--ink); }
.dim { fill: var(--ink); font-family: var(--en); font-weight: 500; }
.mini-sw { display: block; width: 34px; height: 34px; border: 1.5px solid var(--ink); flex: none; overflow: hidden; }

/* 처음 화면 */
.home-a { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .22 0 0 0 -.08'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); color: #ECEBE6; border-bottom: 3px solid var(--ink); }
.ha { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; padding-top: 52px; padding-bottom: 52px; align-items: center; }
.ha .eyebrow { color: #A5A49E; }
.ha h1 { font-family: var(--head); font-size: clamp(38px, 5vw, 60px); line-height: 1.32; margin-top: 12px; letter-spacing: -.01em; }
.ha h1 em { font-style: normal; color: var(--ink); background: var(--y); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ha .lead { margin-top: 14px; color: #BDBCB6; font-size: 17px; }
.quick { margin-top: 26px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 0; background: var(--paper); color: var(--ink); border: 2px solid var(--y); }
.quick label { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-right: 2px solid var(--ink); }
.quick label:nth-child(3) { border-right: 0; }
.quick label > span:first-child { font-size: 12px; font-weight: 700; color: var(--mute); }
.qk-out { grid-column: 1 / -1; border-top: 2px solid var(--ink); background: var(--white); padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; min-height: 58px; }
.qk-out .qo-f { color: var(--mute); font-size: 14px; width: 100%; }
.qk-out .qo-b b { font-family: var(--en); font-size: 34px; font-weight: 600; line-height: 1; }
.qk-out .qo-b, .qk-out .qo-w { font-weight: 700; }
.qk-out .qo-w { font-family: var(--en); font-size: 20px; font-weight: 500; }
.qk-out small { font-family: var(--ko); font-size: 12px; color: var(--mute); font-weight: 400; }
.ha-btns { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.ha-btns .btn.line { color: #fff; border-color: #ECEBE6; }
.ha-btns .btn.line:hover { background: #ECEBE6; color: var(--ink); }
.ha-r { margin: 0; }
.sizes-svg { width: 100%; height: auto; display: block; }
.grid-ln { stroke: #3A3A37; stroke-width: 2; fill: none; }
.sizes-svg .dl { stroke: #ECEBE6; stroke-width: 4; fill: none; }
.sizes-svg .dt { fill: #fff; font-family: var(--en); font-size: 64px; font-weight: 500; }
.sizes-svg .dn { fill: var(--y); font-family: var(--ko); font-size: 48px; font-weight: 700; }
.sizes-svg .sz-hit { fill: transparent; stroke: transparent; stroke-width: 10; transition: stroke .15s; }
.sizes-svg .sz:hover .sz-hit, .sizes-svg .sz:focus .sz-hit { stroke: var(--y); }
.ha-r figcaption { margin-top: 8px; font-size: 12px; color: #A5A49E; text-align: right; }

table { border-collapse: collapse; width: 100%; }
.spec-t th, .spec-t td { padding: 12px 10px; border-bottom: 1.5px solid var(--hair); text-align: left; vertical-align: middle; }
.spec-t thead th { font-size: 12px; color: var(--mute); font-weight: 700; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.spec-t tbody th { font-family: var(--en); font-size: 22px; font-weight: 500; white-space: nowrap; }
.spec-t tbody th a { text-decoration: none; }
.spec-t td { font-size: 14px; }
.spec-t td.r { font-family: var(--en); font-size: 17px; white-space: nowrap; }
.spec-t .go a { font-weight: 700; font-size: 13px; text-decoration: none; border: 2px solid var(--ink); padding: 3px 10px; white-space: nowrap; }
.spec-t .go a:hover { background: var(--y); }
.spec-t tbody tr:hover { background: var(--paper); }
.inc-list { list-style: none; }
.inc-list a { display: grid; grid-template-columns: 34px 110px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1.5px solid var(--hair); text-decoration: none; }
.inc-list a:hover { background: var(--paper); }
.il-c { font-family: var(--en); font-weight: 500; }
.il-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-t > div { display: grid; grid-template-columns: 90px 1fr; padding: 12px 0; border-bottom: 1.5px solid var(--hair); }
.info-t dt { color: var(--mute); font-size: 13px; font-weight: 700; padding-top: 2px; }
.info-t dd { font-weight: 700; }
.info-t dd small { display: block; font-weight: 400; color: var(--mute); }

/* 제품 목록 */
.cat { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.filters { border: 2px solid var(--ink); background: var(--paper); position: sticky; top: 88px; }
.filters summary { list-style: none; font-weight: 700; padding: 12px 14px; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; cursor: pointer; font-family: var(--head); font-size: 17px; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary b { font-family: var(--en); background: var(--y); padding: 0 7px; font-size: 14px; }
.filters summary b:empty { display: none; }
.f-in { padding: 4px 14px 14px; }
.fg { border: 0; border-bottom: 1.5px solid var(--hair); padding: 12px 0; }
.fg legend { font-size: 12px; font-weight: 700; color: var(--mute); padding: 0; margin-bottom: 4px; float: left; width: 100%; }
.fg .ck { padding: 4px 0; clear: both; font-size: 14px; }
.fg .ck i { margin-left: auto; font-style: normal; font-family: var(--en); color: var(--mute); font-size: 13px; }
.fg .ck input:checked + span { font-weight: 700; }
.f-in .btn { margin-top: 12px; width: 100%; }
.cat-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.search { flex: 1 1 260px; }
.sort { flex: 0 0 170px; }
.cnt { font-size: 14px; color: var(--mute); margin-left: auto; }
.cnt b { font-family: var(--en); font-size: 20px; color: var(--ink); font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.grid.g4 { grid-template-columns: repeat(4, 1fr); }
.grid > .empty { grid-column: 1 / -1; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.card { border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--paper); text-decoration: none; display: flex; flex-direction: column; transition: background .12s; }
.card:hover { background: var(--white); }
.card:hover .c-code { background: var(--y); }
.c-sw { aspect-ratio: 5 / 4; padding: 18px 14px 10px 18px; display: grid; place-items: center; border-bottom: 1.5px solid var(--hair); background: var(--soft); }
.c-sw .tex { max-height: 170px; }
.c-b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.c-code { font-family: var(--en); font-size: 15px; font-weight: 600; letter-spacing: .04em; align-self: flex-start; padding: 0 4px; margin-left: -4px; }
.c-name { font-weight: 700; font-size: 15px; }
.c-spec { display: flex; flex-wrap: wrap; font-family: var(--en); font-size: 13px; color: var(--ink2); }
.c-spec span + span::before { content: "/"; color: var(--hair); margin: 0 6px; }
.c-price { margin-top: 6px; display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; font-size: 13px; }
.c-price b { font-family: var(--en); font-size: 24px; font-weight: 600; line-height: 1.1; }
.c-price small { width: 100%; color: var(--mute); font-size: 12.5px; }
.c-b .st { align-self: flex-start; margin-top: auto; }
.c-b .c-price + .st { margin-top: 8px; }
.empty { padding: 48px 24px; text-align: center; background: var(--paper); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty b { font-family: var(--head); font-size: 22px; }
.empty p { color: var(--mute); }
.empty .btn { margin-top: 8px; }
.empty.big { border: 2px solid var(--ink); padding: 72px 24px; }

/* 제품 상세 */
.crumb { display: flex; gap: 8px; font-size: 14px; color: var(--mute); margin-bottom: 18px; flex-wrap: wrap; }
.crumb a { text-decoration: none; font-weight: 700; color: var(--ink2); }
.crumb a:hover { text-decoration: underline; }
.crumb b { font-family: var(--en); font-weight: 500; color: var(--ink); }
.det-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: start; }
.det-sw { background: var(--soft); border: 2px solid var(--ink); padding: 28px 22px 18px 28px; }
.det-sw .tex { max-height: 440px; }
.prev { border: 2px solid var(--ink); border-top: 0; background: var(--paper); padding: 14px; }
.prev-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.prev-h h2 { font-family: var(--head); font-size: 17px; margin-right: auto; }
.g-chips { display: flex; gap: 4px; }
.g-chips a { width: 30px; height: 30px; border: 2px solid transparent; display: grid; place-items: center; }
.g-chips a i { width: 20px; height: 20px; border: 1.5px solid var(--ink); }
.g-chips a.on { border-color: var(--ink); }
.prev-box { border: 1.5px solid var(--ink); aspect-ratio: 8 / 5; overflow: hidden; background: var(--soft); }
.prev-box .lay { width: 100%; height: 100%; display: block; }
.d-code { font-family: var(--en); font-size: 20px; font-weight: 500; letter-spacing: .05em; background: var(--ink); color: var(--y); display: inline-block; padding: 2px 10px; }
.d-name { font-family: var(--head); font-size: 40px; line-height: 1.15; margin-top: 10px; }
.d-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.d-tags span { border: 2px solid var(--ink); padding: 1px 9px; font-size: 13px; font-weight: 700; }
.d-tags span:first-child { font-family: var(--en); font-weight: 500; font-size: 14px; }
.d-price { margin-top: 18px; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: 14px 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.d-price p b { font-family: var(--en); font-size: 48px; font-weight: 600; line-height: 1; }
.d-price p span { font-weight: 700; margin-left: 4px; }
.d-price dl { display: flex; gap: 18px; }
.d-price dt { font-size: 12px; color: var(--mute); font-weight: 700; }
.d-price dd { font-family: var(--en); font-size: 17px; }
.d-stock { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.d-stock small { color: var(--mute); }
.spec-t.kv { margin-top: 16px; }
.spec-t.kv th { font-family: var(--ko); font-size: 13px; color: var(--mute); font-weight: 700; width: 130px; padding: 8px 10px 8px 0; }
.spec-t.kv td { font-size: 15px; padding: 8px 0; }
.spec-t.kv td small { color: var(--mute); margin-left: 6px; }
.spec-t.kv tr:first-child th, .spec-t.kv tr:first-child td { font-family: var(--en); }
.mini { margin-top: 18px; border: 2px solid var(--ink); background: var(--paper); padding: 14px; }
.mini-h { font-weight: 700; margin-bottom: 8px; }
.mini-in { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mini-in .num input { width: 110px; border-right: 2px solid var(--ink); }
.mini-in .num input.bad { border-color: var(--red); }
.mini-l { font-size: 13px; color: var(--mute); }
#mout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 10px; }
.mo-f { width: 100%; font-size: 13px; color: var(--mute); font-family: var(--en); letter-spacing: .01em; }
.mo-b b { font-family: var(--en); font-size: 30px; font-weight: 600; }
.mo-b, .mo-w { font-weight: 700; }
.mo-w { font-family: var(--en); font-size: 19px; font-weight: 500; }
#mout small { font-family: var(--ko); font-size: 12px; color: var(--mute); font-weight: 400; }
.d-btns { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.d-btns .btn { flex: 1; min-width: 140px; }

/* 셀프견적 */
.cust { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.cust input { width: 240px; }
.est-grid { display: grid; grid-template-columns: 1fr 370px; gap: 24px; align-items: start; }
.est .block { padding: 0; }
.rooms { font-size: 14px; }
.room { display: grid; grid-template-columns: 26px minmax(80px, 1fr) 96px 84px 10px 84px 80px minmax(150px, 1.6fr) 62px 26px; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1.5px solid var(--hair); }
.room-h { font-size: 12px; font-weight: 700; color: var(--mute); background: var(--soft); border-bottom: 2px solid var(--ink); padding-top: 8px; padding-bottom: 8px; }
.room .lb { display: none; }
.room input, .room select { height: 36px; font-size: 14px; }
.room .num input { font-size: 15px; }
.room .num i { padding: 0 5px; font-size: 12px; }
.room .f-surf { width: 96px; }
.room .f-surf button { flex: 1; justify-content: center; padding: 0; }
.ri { font-family: var(--en); font-weight: 500; color: var(--mute); }
.f-x { text-align: center; color: var(--mute); }
.f-area { text-align: right; font-family: var(--en); font-size: 16px; font-weight: 500; }
.f-area small { font-family: var(--ko); font-size: 11px; color: var(--mute); margin-left: 1px; }
.f-del { border: 0; background: none; width: 26px; height: 26px; display: grid; place-items: center; color: var(--mute); }
.f-del:hover { background: var(--ink); color: var(--y); }
.r-err { grid-column: 2 / -1; color: var(--red); font-size: 13px; font-weight: 500; display: none; }
.room.has-err { background: #FFF6F3; }
.room.has-err .r-err { display: block; }
.room.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--y); } to { background: transparent; } }
.row-act { display: flex; gap: 8px; padding: 12px; align-items: center; flex-wrap: wrap; }
.conv { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.conv .num.sm input { width: 72px; }
.opts { display: grid; grid-template-columns: 1.2fr 1.25fr 1fr 1fr; gap: 0; margin-top: 18px; border: 2px solid var(--ink); background: var(--paper); }
.opts fieldset { border: 0; border-right: 1.5px solid var(--hair); padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.opts fieldset:nth-of-type(4) { border-right: 0; }
.opts legend { font-weight: 700; font-size: 13px; color: var(--mute); float: left; padding: 0; margin-bottom: 2px; }
.opts .jr { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.opts .jr span { width: 30px; font-weight: 700; }
.opts .jr select { height: 32px; font-size: 13px; width: 78px; padding-left: 8px; padding-right: 22px; background-position: right 7px center; }
.opts .jr select + select { width: 100px; }
.opts .ck { font-size: 14px; }
.opts .clear { grid-column: 1 / -1; justify-self: start; margin: 0 14px 14px; }
.est-sum { position: sticky; top: 86px; background: var(--white); border: 2px solid var(--ink); }
.sum-h { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; background: var(--ink); color: #fff; }
.sum-h h2 { font-family: var(--head); font-size: 20px; }
.sum-h span { font-size: 12px; color: var(--y); font-family: var(--en); letter-spacing: .03em; }
.steps { list-style: none; padding: 4px 16px; }
.steps > li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1.5px solid var(--hair); }
.sn { font-family: var(--en); font-weight: 600; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--ink); font-size: 12px; margin-top: 1px; }
.sl { font-size: 12.5px; color: var(--mute); font-weight: 700; }
.sl em { font-style: normal; color: var(--red); }
.sv { font-size: 14px; }
.sv b { font-family: var(--en); font-size: 24px; font-weight: 600; }
.sv small { color: var(--mute); margin-left: 4px; }
.sv.sm { display: flex; gap: 6px; align-items: baseline; font-weight: 700; }
.sv.sm em { margin-left: auto; font-style: normal; font-family: var(--en); font-weight: 500; font-size: 15px; }
.sg { padding: 8px 0 6px; }
.sg + .sg { border-top: 1px dashed var(--hair); }
.sg-h { font-size: 13.5px; font-weight: 700; }
.sg-h a { font-family: var(--en); font-weight: 500; text-decoration: none; background: var(--soft); padding: 0 4px; }
.sf { font-family: var(--en); font-size: 12.5px; color: var(--ink2); letter-spacing: .01em; }
.sg-r { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.sg-r b { font-family: var(--en); font-size: 19px; font-weight: 600; background: var(--y); padding: 0 5px; }
.sg-r small { color: var(--mute); font-family: var(--en); }
.sg-r em { margin-left: auto; font-style: normal; font-family: var(--en); font-size: 13.5px; }
.warn { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--y-soft); border-left: 4px solid var(--y); padding: 3px 8px; }
.ex { list-style: none; }
.ex li { display: grid; grid-template-columns: 1fr auto auto; gap: 0 10px; align-items: baseline; padding: 3px 0; font-size: 13.5px; }
.ex li > span:first-child { font-weight: 700; }
.ex .sf { grid-column: 1 / -1; grid-row: 2; }
.ex b { font-family: var(--en); font-weight: 600; }
.ex em { font-style: normal; font-family: var(--en); font-size: 13.5px; min-width: 64px; text-align: right; }
.tot { padding: 10px 16px 6px; border-top: 2px solid var(--ink); }
.tot > div { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 14px; }
.tot dd { font-family: var(--en); font-size: 16px; }
.tot .big { border-top: 1.5px solid var(--hair); margin-top: 6px; padding-top: 8px; }
.tot .big dt { font-weight: 700; font-size: 15px; }
.tot .big dt small { color: var(--mute); font-weight: 400; }
.tot .big dd { font-size: 32px; font-weight: 600; line-height: 1.1; }
.tot .big dd span { font-family: var(--ko); font-size: 15px; font-weight: 700; margin-left: 2px; }
.tot .alt { color: var(--mute); font-size: 13px; }
.tot .alt dd { font-size: 14px; }
.est-sum > .btn { margin: 8px 16px 0; width: calc(100% - 32px); height: 52px; font-size: 17px; }
.est-sum > .fine { padding: 0 16px 14px; }
.mbar { display: none; }

/* 견적서 */
.q-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.back { text-decoration: none; font-weight: 700; }
.q-st { font-weight: 700; padding: 4px 10px; border: 2px solid var(--ink); font-size: 14px; }
.q-st.ok { background: var(--y); }
.q-st.exp { background: var(--red); border-color: var(--red); color: #fff; }
.q-btns { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.doc-wrap { overflow: hidden; }
.doc { position: relative; max-width: 820px; margin: 0 auto; background: var(--white); padding: 44px 46px 36px; box-shadow: 0 1px 0 var(--ink), 8px 8px 0 rgba(22,22,21,.18); border: 1.5px solid var(--ink); font-size: 13px; color: #111; }
.d-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; border-bottom: 4px double #111; padding-bottom: 14px; }
.d-top h1 { font-family: "Sunflower", var(--ko); font-size: 36px; letter-spacing: .5em; font-weight: 700; }
.d-meta { width: auto; font-size: 12.5px; }
.d-meta th { text-align: left; color: #555; font-weight: 500; padding: 1px 12px 1px 0; white-space: nowrap; }
.d-meta td { font-family: var(--en); font-size: 14px; white-space: nowrap; }
.d-parties { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; margin-top: 18px; align-items: start; }
.to { font-size: 18px; border-bottom: 1.5px solid #111; padding-bottom: 4px; margin-bottom: 6px; }
.to b { font-size: 20px; }
.d-sum { margin-top: 14px; border: 2px solid #111; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.d-sum span:first-child { font-size: 12px; color: #555; font-weight: 700; }
.d-sum b { font-size: 16px; }
.d-sum span:last-child { font-family: var(--en); font-size: 14px; }
.d-from { font-size: 12.5px; }
.d-from th, .d-from td { border: 1px solid #111; padding: 5px 7px; text-align: left; }
.d-from th { background: #F1F0EC; font-weight: 500; white-space: nowrap; width: 1%; }
.d-from th.vert { text-align: center; line-height: 1.5; }
.d-from .rep { position: relative; }
.seal { position: absolute; right: 2px; top: 50%; width: 44px; height: 44px; transform: translateY(-50%) rotate(-4deg); opacity: .85; font-family: "Sunflower", var(--ko); }
.d-items { margin-top: 20px; font-size: 12.5px; }
.d-items th, .d-items td { border: 1px solid #111; padding: 6px 6px; vertical-align: top; }
.d-items thead th { background: #F1F0EC; font-weight: 700; white-space: nowrap; text-align: center; }
.d-items td small { display: block; color: #666; font-size: 11px; }
.d-items td.r { font-family: var(--en); font-size: 13px; white-space: nowrap; }
.d-items .pad td { height: 28px; }
.d-items tfoot th { text-align: right; background: #F8F7F4; font-weight: 700; }
.d-items tfoot td { font-family: var(--en); font-size: 14px; }
.d-items tfoot .grand th, .d-items tfoot .grand td { background: #FFF1BF; font-size: 15px; }
.d-rooms, .d-notes { margin-top: 18px; }
.d-rooms h2, .d-notes h2 { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.d-rooms table { font-size: 12px; }
.d-rooms th, .d-rooms td { border-bottom: 1px solid #BBB; padding: 4px 6px; text-align: left; }
.d-rooms th { border-bottom: 1.5px solid #111; font-weight: 700; }
.d-rooms td.r { font-family: var(--en); }
.d-rooms .r { text-align: right; }
.d-calc { margin-top: 6px; font-size: 12px; color: #333; }
.d-notes ol { padding-left: 18px; font-size: 12px; color: #333; }
.d-foot { margin-top: 22px; border-top: 1px solid #111; padding-top: 8px; font-size: 11px; color: #666; text-align: center; }
.doc.void > *:not(.void-stamp) { opacity: .55; }
.void-stamp { position: absolute; top: 210px; left: 50%; transform: translateX(-50%) rotate(-12deg); border: 5px solid var(--red); color: var(--red); font-family: "Sunflower", var(--ko); font-size: 44px; font-weight: 700; padding: 6px 22px; letter-spacing: .1em; background: rgba(255,255,255,.7); white-space: nowrap; }

/* 목록 표 */
.list-t { background: var(--paper); border: 2px solid var(--ink); font-size: 14px; }
.list-t th, .list-t td { padding: 11px 12px; text-align: left; border-bottom: 1.5px solid var(--hair); vertical-align: middle; }
.list-t thead th { background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.list-t thead th small { color: var(--y); }
.list-t td.r { font-family: var(--en); font-size: 15px; white-space: nowrap; }
.list-t td small { display: block; color: var(--mute); font-size: 12px; }
.list-t td a.mono { text-decoration: none; }
.list-t tbody tr:hover { background: var(--white); }
.list-t .items { font-size: 13px; }
.list-t .items .mono + .mono::before { content: " "; }
.list-t.log td { padding: 7px 12px; font-size: 13px; }

/* 상담 */
.con-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.form { border: 2px solid var(--ink); background: var(--paper); padding: 20px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 20px; }
.fgrid > label, .fgrid > div { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.fgrid > label > span:first-child, .lab { font-weight: 700; font-size: 13px; }
.fgrid i { font-style: normal; color: var(--mute); font-weight: 400; font-size: 12px; margin-left: 4px; }
.fgrid .full { grid-column: 1 / -1; }
.fgrid label.ck { flex-direction: row; font-size: 14px; }
.fgrid .err:empty { display: none; }
.chips { display: flex; flex-direction: column; gap: 6px; }
.chips:empty { display: none; }
.chip { display: flex; align-items: center; gap: 10px; background: var(--white); border: 2px solid var(--ink); padding: 4px 4px 4px 4px; font-size: 14px; }
.chip .mini-sw { width: 30px; height: 30px; }
.chip b { font-weight: 500; }
.chip button { margin-left: auto; width: 30px; height: 30px; border: 0; background: none; font-size: 18px; }
.chip button:hover { background: var(--ink); color: var(--y); }
.con-side h2 { font-family: var(--head); font-size: 17px; }
.con-side p { font-size: 14px; color: var(--ink2); }
.flow { list-style: none; counter-reset: f; }
.flow li { counter-increment: f; display: grid; grid-template-columns: 26px 1fr; padding: 6px 0; column-gap: 8px; }
.flow li::before { content: counter(f); grid-row: span 2; font-family: var(--en); font-weight: 600; width: 22px; height: 22px; display: grid; place-items: center; background: var(--ink); color: var(--y); font-size: 12px; }
.flow span { color: var(--mute); font-size: 13px; }
.my-r { padding: 8px 0; border-top: 1.5px solid var(--hair); }
.my-r p { font-size: 14px; margin-bottom: 6px; }
.trk { list-style: none; display: flex; gap: 0; }
.trk li { flex: 1; font-size: 12px; position: relative; padding-top: 14px; min-width: 70px; }
.trk li::before { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border: 2px solid var(--hair); background: var(--white); }
.trk li::after { content: ""; position: absolute; top: 5px; left: 12px; right: 2px; height: 2px; background: var(--hair); }
.trk li:last-child::after { display: none; }
.trk li span { font-weight: 700; color: var(--mute); display: block; white-space: nowrap; }
.trk li small { color: var(--mute); font-family: var(--en); font-size: 11px; white-space: nowrap; }
.trk li.done::before { background: var(--ink); border-color: var(--ink); }
.trk li.done::after { background: var(--ink); }
.trk li.done span, .trk li.cur span { color: var(--ink); }
.trk li.cur::before { background: var(--y); border-color: var(--ink); }
.done-card { border: 2px solid var(--ink); background: var(--paper); padding: 28px; }
.done-card h2 { font-family: var(--head); font-size: 28px; margin: 6px 0; }
.done-card > p { margin-bottom: 18px; }

/* 관리자 */
.live { border: 2px solid var(--ink); background: var(--ink); color: #fff; display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: 13px; }
.live b { font-family: var(--en); font-size: 20px; font-weight: 500; color: var(--y); }
.live b small { font-family: var(--ko); font-size: 12px; color: #BDBCB6; font-weight: 400; margin-left: 4px; }
.live a { color: #fff; font-weight: 700; }
.adm-bar { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.bulk { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.bulk b { font-family: var(--en); font-size: 17px; }
.pt { background: var(--paper); border: 2px solid var(--ink); font-size: 14px; }
.pt th, .pt td { padding: 6px 10px; border-bottom: 1.5px solid var(--hair); text-align: left; vertical-align: middle; position: relative; }
.pt thead th { background: var(--ink); color: #fff; font-size: 12.5px; white-space: nowrap; padding-top: 10px; padding-bottom: 10px; }
.pt td a { text-decoration: none; }
.pt td.pm2, .pt td.ppy { font-family: var(--en); font-size: 15px; white-space: nowrap; }
.pt tbody tr:hover { background: var(--white); }
.pt tr.is-off td { color: var(--mute); }
.pt tr.is-off td:nth-child(2) a { text-decoration: line-through; }
.cell { height: 34px; width: 108px; text-align: right; font-family: var(--en); font-size: 15px; border-width: 1.5px; background: var(--white); }
.cell.sm { width: 78px; }
.cell.xs { width: 64px; height: 30px; display: inline-block; margin-left: 6px; }
.cell.date { width: 148px; text-align: left; font-size: 14px; }
.cell.date::placeholder { color: var(--hair); }
input.cell:not(:focus):not(.bad) { border-color: var(--hair); }
td.saved, p.saved { animation: flash 1.4s ease-out; }
.pt th.r, .pt td.r, .list-t th.r, .list-t td.r, .spec-t th.r, .spec-t td.r { text-align: right; }
.cell-err { display: block; font-style: normal; color: var(--red); font-size: 11.5px; font-weight: 500; text-align: right; }
.cell-err:empty { display: none; }
.sw { display: inline-flex; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw span { width: 40px; height: 22px; border: 2px solid var(--ink); background: var(--white); position: relative; }
.sw span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--hair); transition: transform .15s; }
.sw input:checked + span { background: var(--y); }
.sw input:checked + span::after { background: var(--ink); transform: translateX(18px); }
.sw input:focus-visible + span { outline: 3px solid var(--y); outline-offset: 2px; }
.ship-t { max-width: 640px; }
.ship-t .cell:not(.sm) { width: 120px; }
.ship-t input[data-f="label"] { text-align: left; font-family: var(--ko); }
.formula { margin-top: 14px; border: 2px solid var(--ink); background: var(--white); padding: 14px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.formula b { background: var(--y); padding: 0 6px; margin-right: 6px; }
.tabs { display: flex; border: 2px solid var(--ink); background: var(--white); flex-wrap: wrap; }
.tabs a { padding: 7px 14px; text-decoration: none; font-weight: 700; font-size: 14px; }
.tabs a + a { border-left: 2px solid var(--ink); }
.tabs a i { font-style: normal; font-family: var(--en); font-weight: 500; color: var(--mute); margin-left: 4px; }
.tabs a.on { background: var(--ink); color: var(--y); }
.tabs a.on i { color: var(--y); }
.adm .search { flex: 0 1 280px; }
.req td { vertical-align: top; }
.req .items a { display: inline-block; margin-right: 6px; font-size: 13px; background: var(--soft); padding: 0 4px; }
.req .memo { margin-top: 4px; max-width: 280px; }
.req .act { white-space: nowrap; }
.req .send { display: flex; gap: 6px; }
.req .send select { height: 36px; width: 150px; font-size: 13px; }
.undo { display: block; margin-top: 6px; border: 0; background: none; color: var(--mute); font-size: 12px; text-decoration: underline; }
.req .trk { min-width: 230px; }

/* 꼬리 */
.foot { border-top: 3px solid var(--ink); background: var(--paper); }
.foot-in { max-width: 1280px; margin: 0 auto; padding: 26px 28px 40px; display: flex; gap: 40px; flex-wrap: wrap; }
.f-logo b { font-family: "Sunflower", var(--ko); font-size: 22px; display: block; }
.f-logo small { color: var(--mute); }
.f-info { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 28px; font-size: 13px; }
.f-info dt { color: var(--mute); font-size: 12px; }
.f-info dd { font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); background: var(--ink); color: var(--y); padding: 11px 18px; font-weight: 700; font-size: 14px; border: 2px solid var(--y); opacity: 0; pointer-events: none; transition: .2s; z-index: 50; max-width: calc(100% - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 중간 폭 */
@media (max-width: 1180px) {
  .est-grid { grid-template-columns: 1fr; }
  .est-sum { position: static; }
  .opts { grid-template-columns: 1fr 1fr; }
  .opts fieldset:nth-of-type(2) { border-right: 0; }
  .opts fieldset:nth-of-type(-n+2) { border-bottom: 1.5px solid var(--hair); }
  .grid.g4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .top-in { gap: 14px; }
  .nav a { padding: 0 9px; }
  .ha { grid-template-columns: 1fr; gap: 28px; }
  .det-grid { grid-template-columns: 1fr; }
  .con-grid { grid-template-columns: 1fr; }
  .sec.two { grid-template-columns: 1fr; gap: 40px; }
  .f-info { grid-template-columns: repeat(2, auto); }
}
/* 휴대폰 */
@media (max-width: 760px) {
  .wrap, .top-in, .foot-in { padding-left: 16px; padding-right: 16px; }
  .top-in { flex-wrap: wrap; height: auto; padding-top: 8px; gap: 8px 10px; }
  .logo { order: 1; }
  .tools { order: 2; margin-left: auto; gap: 6px; }
  .nav { order: 3; flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 -16px; border-top: 1.5px solid var(--hair); }
  .is-admin .nav { grid-template-columns: repeat(3, 1fr); }
  .nav a { height: 42px; justify-content: center; padding: 0 4px; font-size: 14px; white-space: nowrap; }
  .nav a.on::after { left: 4px; right: 4px; }
  .lw b { font-size: 19px; }
  .lw small { display: none; }
  .mark { width: 26px; height: 26px; }
  .vat button { padding: 0 7px; font-size: 12px; height: 30px; }
  .admin-tg { height: 34px; padding: 0 8px; font-size: 12.5px; }
  .adminbar .top-in { height: auto; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; }
  .top { position: static; }
  .page { padding-top: 22px; padding-bottom: 56px; }
  .ph h1 { font-size: 30px; }
  .ha { padding-top: 30px; padding-bottom: 30px; }
  .quick { grid-template-columns: 1fr 1fr; }
  .quick .qk-p { grid-column: 1 / -1; border-right: 0; border-bottom: 2px solid var(--ink); }
  .quick label:nth-child(2) { border-right: 2px solid var(--ink); }
  .qk-out .qo-b b { font-size: 30px; }
  .ha-btns .btn { flex: 1; }
  .spec-t tbody th { font-size: 18px; }
  .spec-t th, .spec-t td { padding: 10px 6px; }
  .spec-t .hide-m { display: none; }
  .inc-list a { grid-template-columns: 34px 1fr auto; }
  .inc-list .il-c { grid-column: 2; grid-row: 1; }
  .inc-list .il-n { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--mute); }
  .inc-list .st { grid-column: 3; grid-row: 1 / span 2; }
  .cat { grid-template-columns: 1fr; gap: 14px; }
  .filters { position: static; }
  .f-in { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .f-in .btn { grid-column: 1 / -1; }
  .grid { grid-template-columns: 1fr 1fr; }
  .grid.g4 { grid-template-columns: 1fr 1fr; }
  .c-sw { padding: 12px 8px 6px 12px; }
  .c-b { padding: 10px; }
  .c-code { font-size: 13.5px; }
  .c-name { font-size: 14px; }
  .c-spec { font-size: 12px; }
  .c-spec span + span::before { margin: 0 3px; }
  .c-price b { font-size: 20px; }
  .c-b .st { font-size: 11.5px; padding: 1px 5px 1px 4px; white-space: normal; }
  .sort { flex: 1 1 140px; }
  .cnt { margin-left: 0; }
  .det-sw { padding: 18px 12px 10px 18px; }
  .d-name { font-size: 32px; }
  .d-price p b { font-size: 40px; }
  .prev-h h2 { width: 100%; }
  .cust { width: 100%; }
  .cust input { width: auto; flex: 1; }
  .room-h { display: none; }
  .room { grid-template-columns: 22px 1fr 1fr 1fr auto; grid-template-areas: "ri name name surf del" "ri w h cut cut" "ri code code code area" ". err err err err"; gap: 8px 6px; padding: 12px 10px; }
  .room .lb { display: block; font-size: 11.5px; font-weight: 700; color: var(--mute); margin-bottom: 2px; }
  .ri { grid-area: ri; align-self: start; padding-top: 22px; }
  .f-name { grid-area: name; } .f-surf { grid-area: surf; align-self: end; }
  .room .f-surf { width: auto; }
  .f-w { grid-area: w; } .f-h { grid-area: h; } .f-cut { grid-area: cut; }
  .f-x { display: none; }
  .f-code { grid-area: code; } .f-area { grid-area: area; align-self: end; padding-bottom: 6px; min-width: 64px; }
  .f-del { grid-area: del; align-self: end; height: 30px; width: 30px; }
  .r-err { grid-area: err; }
  .conv { margin-left: 0; width: 100%; }
  .opts { grid-template-columns: 1fr; }
  .opts fieldset { border-right: 0; border-bottom: 1.5px solid var(--hair); }
  .opts fieldset:nth-of-type(4) { border-bottom: 0; }
  .est-sum { margin-bottom: 70px; }
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ink); color: #fff; padding: 10px 12px; gap: 8px; align-items: center; border-top: 4px solid var(--y); }
  .mbar > div { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; min-width: 0; }
  .mbar > div b { font-family: var(--en); font-size: 19px; font-weight: 500; color: var(--y); }
  .mbar > div span { font-size: 12.5px; font-family: var(--en); white-space: nowrap; }
  .mbar .btn.line { color: #fff; border-color: #fff; }
  .mbar .btn { height: 38px; padding: 0 10px; }
  .q-btns { margin-left: 0; width: 100%; }
  .q-btns .btn { flex: 1 1 auto; }
  .doc { padding: 22px 14px; font-size: 11.5px; box-shadow: 4px 4px 0 rgba(22,22,21,.18); }
  .d-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .d-top h1 { font-size: 26px; }
  .d-parties { grid-template-columns: 1fr; gap: 14px; }
  .d-items { font-size: 11px; }
  .d-items th, .d-items td { padding: 4px 3px; }
  .d-items td.r { font-size: 11.5px; }
  .d-items .tax { display: none; }
  .d-items th:nth-child(4), .d-items td:nth-child(4), .d-items th:nth-child(5), .d-items td:nth-child(5) { display: none; }
  .d-items tfoot th { font-size: 11px; }
  .d-items tfoot td { font-size: 12.5px; }
  .d-items .pad { display: none; }
  .void-stamp { font-size: 28px; top: 150px; }
  .fgrid { grid-template-columns: 1fr; }
  .form { padding: 14px; }
  .seg.wide button { font-size: 13px; padding: 0 4px; }
  .foot-in { gap: 16px; }
  .f-info { grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .adm-bar { flex-direction: column; align-items: stretch; }
  .adm .search { flex: 1 1 auto; }
  .live { width: 100%; flex-wrap: wrap; }
  .list-t th, .list-t td { padding: 8px; }
  .pt th, .pt td { white-space: nowrap; }
  .prices thead { display: none; }
  .prices, .prices tbody { display: block; }
  .prices tr { display: grid; grid-template-columns: 26px 1fr 1fr 1fr; grid-template-areas: "sel code code on" "sel name name name" "sel spec spec spec" "sel price pm2 ppy" "sel stock inc inc"; gap: 2px 10px; padding: 12px 12px 14px; border-bottom: 2px solid var(--ink); align-items: end; }
  .prices td { display: block; padding: 0; border: 0; text-align: left !important; }
  .prices td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; font-weight: 700; color: var(--mute); margin: 6px 0 2px; }
  .prices td:nth-child(1) { grid-area: sel; align-self: start; padding-top: 2px; }
  .prices td:nth-child(2) { grid-area: code; font-size: 16px; }
  .prices td:nth-child(3) { grid-area: name; }
  .prices .c-spec2 { grid-area: spec; font-size: 13px; color: var(--ink2); }
  .prices .c-box { display: none; }
  .prices .c-spec2::after { content: " · " attr(data-box); }
  .prices .c-price2 { grid-area: price; } .prices .pm2 { grid-area: pm2; padding-bottom: 8px; } .prices .ppy { grid-area: ppy; padding-bottom: 8px; }
  .prices .c-stock { grid-area: stock; } .prices .c-inc { grid-area: inc; } .prices .c-on { grid-area: on; justify-self: end; align-self: start; }
  .prices .cell { width: 100%; }
  .prices .cell-err { text-align: left; }
  .list-t:not(.req) th, .list-t:not(.req) td { white-space: nowrap; }
  .req thead { display: none; }
  .req, .req tbody { display: block; }
  .req tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px; border-bottom: 2px solid var(--ink); }
  .req td { display: block; padding: 0; border: 0; }
  .req td:nth-child(3) { grid-column: 1 / -1; }
  .req td.items { grid-column: 1 / -1; }
  .req td:nth-child(5), .req td.act { grid-column: 1 / -1; }
  .req .trk { min-width: 0; }
  .req .send { flex-wrap: wrap; }
  .req .send select { flex: 1; }
  .req .memo { max-width: none; }
}

/* 인쇄: 견적서만 */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; display: block; }
  .demo, .top, .foot, .no-print, .toast, .mbar { display: none !important; }
  .page { padding-top: 0; padding-bottom: 0; }
  .wrap { max-width: none; padding: 0; }
  .doc-wrap { overflow: visible; }
  .doc { max-width: none; border: 0; box-shadow: none; padding: 0; font-size: 11.5px; }
  .doc .tax, .d-items th, .d-items td { display: table-cell !important; }
  .d-items .pad { display: table-row !important; }
  .d-top { flex-direction: row !important; align-items: flex-end !important; }
  .d-parties { grid-template-columns: 1fr 1.15fr !important; }
  .d-items thead th, .d-from th, .d-items tfoot th, .d-items tfoot .grand td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .seal, .void-stamp { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}