@charset "UTF-8";
/* =========================================================================
   도장통 djt2026 — calculator.php (도료 소모량 계산기) 전용 스타일
   -------------------------------------------------------------------------
   · 2026-07-01: calculator.php 인라인 <style id="djt-calc-style"> 를 분리.
   · 반응형은 Tailwind CSS 기본 브레이크포인트 기준: md 768 / sm 640
     (기존 860px 임의 분기점을 md 768 로 재정렬 + sm 640 단계 추가)
   ========================================================================= */
:root{
  --c-bg:#F4F6F9; --c-surface:#FFFFFF; --c-line:#E3E8EF; --c-navy:#0B2A4A;
  --c-blue:#1D5FBF; --c-blue-dark:#154C9E; --c-teal:#0FA3A3; --c-ink:#16212E;
  --c-ink60:#6B7686; --c-tint:#F4F8FF; --c-danger:#D8453A;
}
.djt-calc{max-width:1280px;margin:0 auto;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;color:var(--c-ink);}
.djt-calc *{box-sizing:border-box;}
.djt-calc-head{margin:0 0 22px;}
.djt-calc-head h1{font-size:24px;font-weight:800;color:var(--c-navy);margin:0 0 6px;letter-spacing:-.01em;}
.djt-calc-head p{font-size:14px;color:var(--c-ink60);margin:0;}
/* 탭 */
.djt-calc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.djt-calc-tabs button{flex:1;min-width:140px;height:46px;padding:0 14px;border:1px solid var(--c-line);border-radius:10px;
  background:var(--c-surface);color:var(--c-ink);font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:background-color .15s,border-color .15s,color .15s;}
.djt-calc-tabs button:hover{border-color:var(--c-blue);color:var(--c-blue);}
.djt-calc-tabs button.active{background:var(--c-blue);border-color:var(--c-blue);color:#fff;box-shadow:0 8px 18px -10px rgba(29,95,191,.5);}
/* 패널 */
.djt-calc-panel{display:none;}
.djt-calc-panel.active{display:block;}
.djt-calc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start;}
.djt-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:14px;padding:22px 24px;}
.djt-card h2{font-size:16px;font-weight:800;color:var(--c-navy);margin:0 0 16px;display:flex;align-items:center;gap:8px;}
.djt-card h2 .num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;background:#E8F0FE;color:var(--c-blue);font-size:13px;font-weight:800;}
/* 입력 */
.djt-field{margin-bottom:16px;}
.djt-field:last-child{margin-bottom:0;}
.djt-field label{display:block;font-size:13.5px;font-weight:700;color:var(--c-ink);margin-bottom:7px;}
.djt-field label .opt{font-weight:600;color:var(--c-ink60);font-size:12px;margin-left:4px;}
.djt-field input,.djt-field select{width:100%;height:44px;padding:0 14px;border:1px solid var(--c-line);border-radius:9px;
  font-size:14px;font-family:inherit;color:var(--c-ink);background:var(--c-bg);transition:border-color .15s,box-shadow .15s;}
.djt-field input:focus,.djt-field select:focus{outline:none;border-color:var(--c-blue);background:#fff;box-shadow:0 0 0 3px rgba(29,95,191,.12);}
.djt-field .hint{font-size:12px;color:var(--c-ink60);margin-top:6px;line-height:1.45;}
.djt-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.djt-btn-calc{width:100%;height:48px;margin-top:4px;border:none;border-radius:10px;background:var(--c-blue);color:#fff;
  font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;transition:background-color .15s;}
.djt-btn-calc:hover{background:var(--c-blue-dark);}
/* 결과 */
.djt-result{margin-top:18px;border:1px solid #CFE0F5;background:var(--c-tint);border-radius:12px;padding:18px 20px;}
.djt-result h3{font-size:13px;font-weight:800;color:var(--c-blue-dark);margin:0 0 12px;letter-spacing:.02em;}
.djt-result .line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px dashed #CFE0F5;}
.djt-result .line:last-child{border-bottom:none;}
.djt-result .line .k{font-size:13.5px;color:var(--c-ink60);font-weight:600;}
.djt-result .line .v{font-size:16px;font-weight:800;color:var(--c-navy);white-space:nowrap;}
.djt-result .line.main .k{color:var(--c-ink);}
.djt-result .line.main .v{font-size:20px;color:var(--c-blue);}
.djt-result .err{color:var(--c-danger);font-weight:700;font-size:13.5px;}
.djt-result .placeholder{color:var(--c-ink60);font-size:13.5px;}
/* 공식·참고 */
.djt-note h2{margin-bottom:14px;}
.djt-formula{background:var(--c-bg);border:1px solid var(--c-line);border-radius:10px;padding:14px 16px;margin-bottom:14px;}
.djt-formula .ft{font-size:12.5px;font-weight:700;color:var(--c-navy);margin-bottom:6px;}
.djt-formula code{display:block;font-family:'Pretendard',monospace;font-size:13px;color:var(--c-blue-dark);line-height:1.6;word-break:keep-all;}
.djt-note ul{list-style:none;margin:0;padding:0;}
.djt-note li{position:relative;padding-left:16px;font-size:13px;color:var(--c-ink60);line-height:1.55;margin-bottom:9px;}
.djt-note li:last-child{margin-bottom:0;}
.djt-note li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--c-blue);}
.djt-note li b{color:var(--c-ink);font-weight:700;}
.djt-calc-foot{margin-top:18px;font-size:12px;color:var(--c-ink60);line-height:1.5;text-align:center;}

/* ════════════════════════════════════════════════════════════════════════
   반응형 (Tailwind CSS 브레이크포인트 기준: md 768 / sm 640)
════════════════════════════════════════════════════════════════════════ */

/* ---- md 미만 (<768px): 입력폼/결과 카드 세로 스택, 탭 2열 ---- */
@media (max-width:767px){
  .djt-calc{padding:0 4px;}
  .djt-calc-head h1{font-size:20px;}
  .djt-calc-grid{grid-template-columns:1fr;gap:16px;}
  .djt-calc-tabs button{min-width:calc(50% - 4px);flex:none;height:42px;font-size:13.5px;}
  .djt-card{padding:18px;}
  .djt-row2{grid-template-columns:1fr 1fr;gap:10px;}
}

/* ---- sm 미만 (<640px): 폰 화면 — 탭 1열, 입력행도 1열 ---- */
@media (max-width:639px){
  .djt-calc-tabs{flex-direction:column;}
  .djt-calc-tabs button{min-width:0;width:100%;}
  .djt-row2{grid-template-columns:1fr;}
  .djt-card{padding:16px 14px;}
  .djt-result{padding:14px 16px;}
  .djt-result .line.main .v{font-size:18px;}
}