/* 오스텐 매장 도구 — 사이즈 진단기 · 배송 설치비 계산기 */

.tool{margin:0 0 8px;}
.tool-head{padding-bottom:28px;border-bottom:1px solid var(--ink);}
.tool-kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--red);}
.tool-tit{margin:14px 0 0;font-size:24px;font-weight:700;line-height:32px;letter-spacing:-.5px;}
.tool-sub{margin:14px 0 0;font-size:14px;line-height:23px;color:var(--gray-1);max-width:74ch;}
.tool-warn{margin:14px 0 0;padding:16px 18px;border-radius:8px;background:#F7F7F7;
  font-size:13px;line-height:21px;color:#272727;}
.tool-warn b{color:#272727;}

/* ── 단계 ─────────────────────────────────────────────────── */
.fit-step{margin-top:48px;}
.fit-q{margin:0 0 20px;font-size:15.5px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:10px;}
.fit-q b{width:22px;height:22px;flex:none;border-radius:50%;background:var(--ink);color:#fff;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}

/* 구조 카드 */
.pick-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.pick{display:block;text-align:left;padding:22px 22px 24px;border:1px solid var(--line);border-radius:12px;
  background:#fff;cursor:pointer;font-family:inherit;transition:border-color .25s ease,background .25s ease;}
.pick:hover{border-color:var(--gray-4);}
.pick.on{border-color:var(--ink);background:var(--bg-1);box-shadow:inset 0 0 0 1px var(--ink);}
.pick .pn{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.3px;color:var(--ink);}
.pick .ph{display:block;margin-top:9px;font-size:13px;line-height:21px;color:var(--gray-2);}
.pick .pw{display:block;margin-top:9px;font-size:12px;color:var(--gray-3);font-variant-numeric:tabular-nums;}

/* 치수 입력 — 고쳐 넣는 칸이라는 게 보여야 합니다 */
.mrow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.mfield{display:block;}
.mrow .ml{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px;}
.mrow .ml em{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--gray-3);
  margin-top:2px;line-height:16px;}
.mrow .mi{display:flex;align-items:center;gap:0;height:58px;background:#fff;
  border:1.5px solid var(--gray-4);border-radius:9px;overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease;}
.mrow .mi:hover{border-color:var(--gray-3);}
.mrow .mi:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.10);}
.mstep{flex:none;width:42px;align-self:stretch;border:0;background:var(--bg-1);color:var(--gray-1);
  font-family:inherit;font-size:17px;line-height:1;cursor:pointer;
  transition:background .2s ease,color .2s ease;}
.mstep:hover{background:var(--ink);color:#fff;}
.mrow input{flex:0 0 auto;min-width:0;width:82px;margin-left:auto;border:0;padding:0;font-family:inherit;
  font-size:20px;font-weight:700;letter-spacing:-.4px;color:var(--ink);background:transparent;
  text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield;}
.mrow input::-webkit-outer-spin-button,.mrow input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.mrow input:focus{outline:none;}
.mrow .mi i{font-style:normal;font-size:12.5px;color:var(--gray-2);flex:none;
  padding:0 0 0 5px;margin-right:auto;}

/* 업종 탭 — 다섯 개를 전부 그려 두고 아직 안 파는 곳만 표시합니다 */
.ind-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;}
.itab{display:inline-flex;align-items:center;gap:7px;padding:10px 17px;border:1px solid var(--line);
  border-radius:100px;background:#fff;font-family:inherit;font-size:13.5px;font-weight:700;
  color:var(--gray-1);cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease;}
.itab:hover{border-color:var(--gray-4);}
.itab.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.itab.soon{color:var(--gray-3);border-style:dashed;}
.itab.soon span{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:100px;
  background:var(--bg-1);color:var(--gray-2);}
.itab.soon.on{background:var(--gray-2);border-color:var(--gray-2);color:#fff;border-style:solid;}
.itab.soon.on span{background:rgba(255,255,255,.22);color:#fff;}

/* 준비중 구조 카드 — 완성형과 같은 자리에 같은 모양으로 */
.pick.soon{cursor:default;border-style:dashed;background:var(--bg-1);}
.pick.soon .pn{color:var(--gray-2);display:flex;align-items:center;gap:7px;}
.pick.soon .pn i{font-style:normal;font-size:10.5px;font-weight:700;padding:1px 6px;
  border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--gray-2);}
.pick.soon .ph,.pick.soon .pw{color:var(--gray-3);}

.fit-tip{margin-left:auto;font-size:12px;font-weight:400;color:var(--gray-3);letter-spacing:0;}
.fit-soon{margin:18px 0 0;}
.fit-soon:empty{display:none;}
.fit-soon p{margin:0;padding:17px 19px;border-radius:8px 8px 0 0;background:var(--bg-1);
  font-size:12.5px;line-height:20px;color:var(--gray-1);}
.fit-soon b{color:var(--ink);}
.soon-cta{display:flex;align-items:center;justify-content:center;height:46px;
  border-radius:0 0 8px 8px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;
  letter-spacing:-.2px;transition:background .25s ease;}
.soon-cta:hover{background:var(--red);}

/* 준비중 업종을 고르면 2 · 3 단계와 도면은 잠깁니다 */
.fit.is-soon .fit-step + .fit-step,
.fit.is-soon .fit-out,
.fit.is-soon .fit-rule{opacity:.32;pointer-events:none;filter:saturate(.2);}

/* 폭 칩 */
.width-chips{display:flex;gap:12px;flex-wrap:wrap;}
.wchip{display:flex;align-items:center;gap:9px;padding:13px 20px;border:1px solid var(--line);
  border-radius:100px;background:#fff;cursor:pointer;font-family:inherit;font-size:17px;font-weight:700;
  letter-spacing:-.3px;color:var(--ink);font-variant-numeric:tabular-nums;
  transition:border-color .25s ease,background .25s ease;}
.wchip:hover{border-color:var(--gray-4);}
.wchip.on{border-color:var(--ink);background:var(--ink);color:#fff;}
.wchip i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--gray-4);}
.wchip.ok i{background:#1A5CFF;} .wchip.carry i{background:#767676;} .wchip.no i{background:var(--red);}
.wchip em{font-style:normal;font-size:12px;font-weight:500;color:var(--gray-2);}
.wchip.on em{color:rgba(255,255,255,.72);}

/* 결과 */
.fit-out{display:grid;grid-template-columns:1fr 340px;gap:28px;margin-top:36px;align-items:start;}
.fit-canvas{border:1px solid var(--line);border-radius:12px;background:var(--bg-3);padding:16px 16px 20px;}
.fit-canvas svg{width:100%;height:auto;display:block;max-width:none;max-height:none;}
.c-slot{fill:#fff;stroke:var(--gray-5);stroke-width:1.5;}
.c-floor{stroke:var(--ink);stroke-width:2;}
.c-ceil{stroke:var(--gray-4);stroke-width:1;stroke-dasharray:5 4;}
.c-prd{fill:var(--ink);}
.c-prd.over{fill:var(--red);}
.c-prdlab{fill:#fff;font-size:13px;font-weight:700;text-anchor:middle;}
.c-dim{stroke:var(--red);stroke-width:1;}
.c-dimlab{fill:var(--red);font-size:11px;font-weight:700;text-anchor:middle;font-variant-numeric:tabular-nums;}
.c-dimlab.left{text-anchor:start;}
.c-lab{fill:var(--gray-2);font-size:11px;}
.c-depth{display:flex;align-items:center;gap:10px;margin-top:10px;padding:0 6px;font-size:12px;color:var(--gray-1);}
.c-depth .lab{flex:none;font-weight:700;color:var(--gray-2);}
.c-depth .bar{flex:1;height:8px;border-radius:4px;background:var(--gray-5);overflow:hidden;}
.c-depth .bar i{display:block;height:100%;background:var(--ink);}
.c-depth .bar i.over{background:var(--red);}
.c-depth .v{flex:none;font-variant-numeric:tabular-nums;}
.c-depth .v b{color:var(--red);}

.fit-panel{border:1px solid var(--line);border-radius:12px;padding:26px 24px 28px;background:#fff;}
.fp-name{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.3px;line-height:24px;}
.fp-name a{color:var(--ink);text-decoration:none;}
.fp-name a:hover{text-decoration:underline;}
.fp-name span{display:block;margin-top:6px;font-size:12px;font-weight:400;color:var(--gray-2);
  font-variant-numeric:tabular-nums;}
.fp-verdict{margin:18px 0 0;padding:14px 16px;border-radius:8px;font-size:13.5px;line-height:22px;}
.fp-verdict.ok{background:#F7F7F7;color:#1A5CFF;}
.fp-verdict.warn{background:#F7F7F7;color:#585856;}
.fp-verdict.no{background:#F7F7F7;color:#272727;}
.fp-rows{list-style:none;margin:20px 0 0;padding:0;}
.fp-rows li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line-2);font-size:13.5px;}
.fp-rows li:last-child{border-bottom:0;}
.fp-rows span{color:var(--gray-1);}
.fp-rows b{font-weight:700;font-variant-numeric:tabular-nums;}
.fp-rows b.bad{color:var(--red);}
.fp-rows b.warn{color:#585856;}
.fp-cta{display:flex;align-items:center;justify-content:center;height:48px;margin-top:22px;
  border-radius:100px;border:1px solid var(--ink);color:var(--ink);font-size:14px;font-weight:700;
  text-decoration:none;transition:background .25s ease,color .25s ease;}
.fp-cta:hover{background:var(--ink);color:#fff;}
.fit-rule{margin:26px 0 0;font-size:12.5px;line-height:20px;color:var(--gray-2);}

/* ── 계산기 ───────────────────────────────────────────────── */
.inc-band{margin-top:28px;padding:20px 24px;border-radius:10px;background:var(--bg-1);}
.inc-band h3{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:-.2px;color:var(--ink);}
.inc-band ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px 22px;}
.inc-band li{position:relative;padding-left:16px;font-size:13px;line-height:21px;color:var(--gray-1);}
.inc-band li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:4px;
  border-left:1.5px solid #1A5CFF;border-bottom:1.5px solid #1A5CFF;transform:rotate(-45deg);}
.inc-band + .inc-band{margin-top:8px;}
.inc-band h3 span{margin-left:8px;font-size:11.5px;font-weight:700;color:var(--gray-2);
  letter-spacing:0;vertical-align:1px;}
.inc-prd{background:transparent;border:1px dashed var(--line-2);}

.calc-body{display:grid;grid-template-columns:1fr 400px;gap:36px;margin-top:32px;align-items:start;}
.cf-block{padding:0 0 26px;border-bottom:1px solid var(--line-2);margin-bottom:26px;}
.cf-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.cf-block h3{margin:0 0 16px;font-size:15px;font-weight:700;letter-spacing:-.3px;
  display:flex;align-items:center;gap:9px;}
.cf-block h3 b{width:22px;height:22px;flex:none;border-radius:50%;background:var(--ink);color:#fff;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}

/* 제품은 선택 — 접어 둡니다 */
.cf-prd{border:1px dashed var(--gray-4);border-radius:10px;padding:0 15px;background:#fff;}
.cf-prd[open]{padding-bottom:14px;}
.cf-prd summary{padding:13px 0;font-size:13.5px;font-weight:700;color:var(--gray-1);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:8px;}
.cf-prd summary::-webkit-details-marker{display:none;}
.cf-prd summary::before{content:"+";width:18px;height:18px;flex:none;border-radius:50%;
  background:var(--bg-1);color:var(--gray-1);font-size:13px;line-height:18px;text-align:center;}
.cf-prd[open] summary::before{content:"−";background:var(--ink);color:#fff;}
.cf-prd summary span{font-size:11px;font-weight:700;color:var(--gray-3);border:1px solid var(--line);
  border-radius:100px;padding:1px 7px;}
.cf-prd summary:hover{color:var(--ink);}
.cf-row{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:12px;margin:0 0 10px;}
.cf-row label{font-size:13.5px;color:var(--gray-1);}
.cf-row select{height:44px;padding:0 12px;border:1px solid var(--line);border-radius:6px;
  font-family:inherit;font-size:14px;color:var(--ink);background:#fff;width:100%;}
.cf-row select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.07);}
.stair-row{margin-top:10px;}

.radio-cards{display:grid;gap:8px;}
.radio-cards label{display:grid;grid-template-columns:auto 1fr;column-gap:11px;align-items:start;
  padding:13px 15px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;
  transition:border-color .25s ease,background .25s ease;}
.radio-cards label:hover{border-color:var(--gray-4);}
.radio-cards label:has(input:checked){border-color:var(--ink);background:var(--bg-1);}
.radio-cards input{margin-top:3px;width:17px;height:17px;accent-color:var(--ink);grid-row:span 2;}
.radio-cards b{font-size:14px;font-weight:700;letter-spacing:-.2px;}
.radio-cards em{font-style:normal;font-size:12.5px;color:var(--gray-2);margin-top:2px;}
.cf-checks{list-style:none;margin:12px 0 0;padding:0;}
.cf-checks label{display:flex;align-items:flex-start;gap:10px;padding:9px 0;cursor:pointer;
  font-size:13.5px;line-height:21px;}
.cf-checks input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--red);}
.cf-checks em{display:block;font-style:normal;font-size:12px;color:var(--gray-2);margin-top:1px;}

.calc-out{position:sticky;top:96px;}
.co-card{border:1px solid var(--ink);border-radius:12px;padding:22px 22px 24px;background:#fff;}
.co-tit{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:-.3px;}

/* 이 화면이 답하는 질문 하나를 가장 크게 */
.co-head{padding-bottom:16px;border-bottom:1px solid var(--line-2);margin-bottom:4px;}
.co-q{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--gray-2);}
.co-big{margin:6px 0 0;display:flex;align-items:baseline;gap:8px;}
.co-big em{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:#fff;
  background:var(--red);border-radius:100px;padding:2px 8px;}
.co-big b{font-size:30px;font-weight:700;letter-spacing:-1px;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1;}
.co-big.tbd b{font-size:20px;color:#272727;}
.co-cap{margin:8px 0 0;font-size:12px;line-height:19px;color:var(--gray-2);}
.co-total{margin-top:18px;padding-top:4px;border-top:1px dashed var(--gray-4);}
.co-lines{list-style:none;margin:0;padding:0;}
.co-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;}
.co-lines li.prd .n{font-weight:700;}
.co-lines .n em{display:block;font-style:normal;font-size:12px;color:var(--gray-2);margin-top:2px;}
.co-lines .v{flex:none;font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap;}
.co-sum{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 0;padding-top:14px;
  border-top:1px solid var(--ink);}
.co-sum span{font-size:14px;font-weight:700;}
.co-sum b{font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--red);font-variant-numeric:tabular-nums;}
.co-vat{margin:6px 0 0;font-size:12px;color:var(--gray-2);text-align:right;}
.co-tbd{margin-top:18px;padding:14px 16px;border-radius:8px;background:#F7F7F7;}
.co-tbd h4{margin:0 0 8px;font-size:13px;font-weight:700;color:#272727;}
.co-tbd ul{list-style:none;margin:0;padding:0;}
.co-tbd li{padding:5px 0;font-size:13px;color:#272727;}
.co-tbd .n em{display:block;font-style:normal;font-size:11.5px;color:#767676;margin-top:1px;}
.co-note{margin:12px 0 0;font-size:12.5px;line-height:20px;color:var(--gray-1);}
.co-reply{margin:8px 0 0;padding:9px 12px;border-radius:8px;background:var(--bg-1);
  font-size:12.5px;line-height:19px;color:var(--ink);font-weight:500;}
.co-q em{font-style:normal;font-weight:500;color:var(--gray-2);margin-left:6px;
  font-size:11.5px;letter-spacing:0;}
.co-days{display:flex;justify-content:space-between;margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--line-2);font-size:13.5px;}
.co-days span{color:var(--gray-1);}
.co-cta{display:flex;align-items:center;justify-content:center;height:52px;margin-top:16px;
  border-radius:100px;background:var(--ink);color:#fff;font-size:15px;font-weight:700;
  text-decoration:none;transition:background .3s ease;}
.co-cta:hover{background:var(--red);}

.ship-rule{margin:14px 0 0;padding:13px 16px;border-radius:8px;background:var(--bg-1);
  font-size:13px;line-height:21px;color:var(--gray-1);}
.ship-rule b{color:var(--ink);}
.ship-side .p.tbd{color:var(--gray-2);font-weight:400;}
.ship-table-wrap{margin-top:56px;padding-top:44px;border-top:1px solid var(--line);}

/* 본문(.entry) 안에서 테마 목록·링크 스타일을 덮어씁니다.
   테마 쪽 선택자가 더 세서 도구 자체 장식이 지워지던 문제를 여기서 되살립니다. */
.tool ul,.entry .tool ul,.tool ol,.entry .tool ol,
.tool li,.entry .tool li{list-style:none !important;}
.tool ul > li::before,.tool ol > li::before,.entry .tool li::before{content:none !important;}
.entry .tool p{margin:0;}
.entry .tool .cf-row{margin:0 0 10px;}
.entry .tool h2,.entry .tool h3{margin-top:0;}
.entry .tool table{margin:0;}

/* 되살리는 것 — 포함 목록의 체크 표시 */
.tool .inc-band li::before,.entry .tool .inc-band li::before{
  content:"" !important;position:absolute;left:0;top:8px;width:7px;height:4px;
  border-left:1.5px solid #1A5CFF;border-bottom:1.5px solid #1A5CFF;
  border-top:0;border-right:0;background:none;transform:rotate(-45deg);}

/* 되살리는 것 — 검은 버튼 위 흰 글씨 (테마 .entry a 가 먹고 있었습니다) */
.tool .co-cta,.entry .tool .co-cta{color:#fff !important;text-decoration:none !important;}
.tool .fit-soon .soon-cta,.entry .tool .fit-soon .soon-cta{color:#fff !important;text-decoration:none !important;}
.tool .fp-cta,.entry .tool .fp-cta{color:var(--ink) !important;text-decoration:none !important;}
.tool .fp-cta:hover,.entry .tool .fp-cta:hover{color:#fff !important;}
.tool .fit-soon p a,.entry .tool .fit-soon p a{color:var(--ink) !important;
  text-decoration:underline !important;text-underline-offset:2px;}

@media(max-width:1023px){
  .fit-out,.calc-body{grid-template-columns:1fr;}
  .calc-out{position:static;}
  .pick-cards{grid-template-columns:1fr;}
  .mrow{grid-template-columns:1fr 1fr;gap:20px;}
  .fit-step{margin-top:40px;}
}
@media(max-width:767px){
  .tool-tit{font-size:20px;line-height:28px;}
  .cf-row{grid-template-columns:1fr;gap:6px;}
  .co-card{padding:18px 16px 20px;}
  .width-chips{gap:8px;}
  .wchip{padding:10px 14px;font-size:15px;}
  .mrow{grid-template-columns:1fr;gap:18px;}
  .mrow .mi{height:58px;}
  .mstep{width:50px;font-size:19px;}
  .mrow input{font-size:21px;width:92px;}
  .fit-q{flex-wrap:wrap;margin-bottom:16px;}
  .fit-step{margin-top:38px;}
  .pick{padding:20px 18px 22px;}
  .fit-panel{padding:22px 20px 24px;}
  .fit-canvas{padding:12px 10px 14px;}
  .co-big b{font-size:26px;}
}

/* ── 2.3.0 배송비 계산 ─────────────────────────────────────── */
.cf-hint{margin:2px 0 0 100px;font-size:12.5px;color:var(--gray-2);}
.co-tit em,.co-sum em{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:#fff;background:var(--ink-2);border-radius:100px;padding:2px 8px;margin-left:6px;
  vertical-align:middle;}
.co-sum em{background:var(--red);}
.co-vat{line-height:1.6;}
@media(max-width:767px){ .cf-hint{margin-left:0;} }