/* =====================================================================
   사이트 공통 디자인 (헤더·히어로·섹션 카드·버튼·푸터) + 계산기 페이지 요소
   - body.calc-page 범위에서만 적용 (홈·소개·원단·부자재 페이지 모두 이 클래스를 씀)
   - 홈·소개 전용 요소는 home.css
   - PDF 출력은 인라인 스타일로 별도 생성되므로 영향 없음
   ===================================================================== */

body.calc-page{
  --ink:#0f172a;
  --ink-2:#1e293b;
  --slate:#334155;
  --muted:#64748b;
  --line:#e2e8f0;
  --line-2:#cbd5e1;
  --bg:#f3f5f9;
  --soft:#f8fafc;
  --accent:#2563eb;
  --accent-dark:#1d4ed8;
  --accent-soft:#eff6ff;
  --page-glow:rgba(37,99,235,.45);
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12);

  font-family:'Pretendard Variable', Pretendard, 'Segoe UI', 'Malgun Gothic', Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
body.calc-page.page-trims{ --page-glow:rgba(99,102,241,.45); }

.calc-page .icon{
  width:16px;height:16px;flex:none;
  stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* ===================== 상단 내비게이션 ===================== */
.calc-page .site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,22,40,.92);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.calc-page .site-header-inner{max-width:1400px;padding:12px 24px;}
.calc-page .site-logo{display:inline-flex;align-items:center;gap:9px;font-size:15px;}
.calc-page .logo-mark{
  width:28px;height:28px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#3b82f6,#6366f1);
  box-shadow:0 4px 12px -2px rgba(59,130,246,.55);
}
.calc-page .logo-mark .icon{width:15px;height:15px;color:#fff;}
.calc-page .site-nav a{border-radius:8px;transition:background .15s,color .15s;}
.calc-page .site-nav a.active{
  background:rgba(59,130,246,.18);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(96,165,250,.45);
}

/* ===================== 히어로 ===================== */
.calc-page .page-hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(900px 380px at 85% -10%, var(--page-glow), transparent 60%),
    radial-gradient(600px 300px at 0% 120%, rgba(14,165,233,.22), transparent 60%),
    linear-gradient(160deg,#0b1628 0%,#15243a 55%,#1b2f4d 100%);
}
.calc-page .page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 95%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 95%);
}
.calc-page .page-hero-inner{
  position:relative;
  max-width:1400px;margin:0 auto;
  padding:36px 24px 92px;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:40px;
  align-items:center;
}
.calc-page .breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:#94a3b8;margin-bottom:18px;
}
.calc-page .breadcrumb a{color:#cbd5e1;text-decoration:none;}
.calc-page .breadcrumb a:hover{color:#fff;}
.calc-page .breadcrumb .sep{opacity:.5;}
.calc-page .hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px 5px 8px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;
  color:#bfdbfe;
  background:rgba(59,130,246,.14);
  border:1px solid rgba(96,165,250,.35);
}
.calc-page .hero-eyebrow .dot{
  width:7px;height:7px;border-radius:50%;background:#60a5fa;
  box-shadow:0 0 0 4px rgba(96,165,250,.2);
}
.calc-page .page-hero h1{
  margin:14px 0 12px;
  font-size:34px;line-height:1.2;font-weight:800;letter-spacing:-.02em;
}
.calc-page .page-hero h1 .grad{
  background:linear-gradient(90deg,#93c5fd,#c4b5fd);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.calc-page .page-hero .hero-desc{
  margin:0;max-width:600px;
  font-size:14.5px;line-height:1.7;color:#cbd5e1;
}
.calc-page .hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px;}
.calc-page .chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:#e2e8f0;
  padding:6px 11px;border-radius:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.calc-page .chip .icon{width:13px;height:13px;color:#86efac;}
.calc-page .hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.calc-page .guide-btn{
  margin:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:10px;
  background:#fff;color:var(--ink);border:none;
  font-size:13.5px;font-weight:700;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
  transition:transform .15s, box-shadow .15s;
}
.calc-page .guide-btn:hover{background:#fff;transform:translateY(-1px);box-shadow:0 12px 24px -8px rgba(0,0,0,.55);}
.calc-page .hero-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 14px;border-radius:10px;
  color:#e2e8f0;text-decoration:none;font-size:13.5px;font-weight:600;
  border:1px solid rgba(255,255,255,.18);
  transition:background .15s;
}
.calc-page .hero-link:hover{background:rgba(255,255,255,.08);}

/* 오른쪽 흐름 카드 */
.calc-page .hero-flow{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:22px 22px 10px;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
}
.calc-page .hero-flow-title{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#94a3b8;margin:0 0 14px;
}
.calc-page .flow-step{
  position:relative;
  display:flex;gap:14px;align-items:flex-start;
  padding:0 0 18px;
}
.calc-page .flow-step:not(:last-child)::after{
  content:"";position:absolute;left:17px;top:38px;bottom:4px;width:2px;
  background:linear-gradient(180deg,rgba(96,165,250,.6),rgba(96,165,250,.08));
}
.calc-page .flow-icon{
  flex:none;width:36px;height:36px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(59,130,246,.18);
  border:1px solid rgba(96,165,250,.4);
  color:#bfdbfe;
}
.calc-page .flow-icon .icon{width:17px;height:17px;}
.calc-page .flow-step h4{margin:2px 0 3px;font-size:14px;font-weight:700;color:#fff;}
.calc-page .flow-step p{margin:0;font-size:12.5px;line-height:1.55;color:#94a3b8;}

/* ===================== 본문 래퍼 ===================== */
.calc-page .wrap{
  position:relative;
  max-width:1400px;
  margin:-60px auto 0;
  padding:0 24px 40px;
}

/* ===================== 섹션 카드 ===================== */
.calc-page .section{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:0;
  margin-bottom:22px;
  overflow:hidden;
}
.calc-page .section-head{
  display:flex;align-items:center;gap:14px;
  padding:20px 26px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fbfcfe);
}
.calc-page .section-head .num{
  flex:none;
  width:38px;height:38px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#3b82f6,#6366f1);
  box-shadow:0 6px 14px -6px rgba(59,130,246,.7);
}
.calc-page .section-head h2{
  margin:0;padding:0;border:none;
  font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
  display:block;
}
.calc-page .section-head .section-desc{margin:3px 0 0;font-size:12.5px;color:var(--muted);}
.calc-page .section-head .head-tag{
  margin-left:auto;
  font-size:11.5px;font-weight:700;color:var(--accent-dark);
  background:var(--accent-soft);border:1px solid #dbeafe;
  padding:5px 10px;border-radius:999px;white-space:nowrap;
}
.calc-page .section-body{padding:24px 26px 26px;}

/* 서브 블록 */
.calc-page .sub-block{
  margin-top:26px;padding-top:24px;
  border-top:1px dashed var(--line-2);
}
.calc-page .sub-title{
  display:flex;align-items:center;gap:10px;margin:0 0 6px;
}
.calc-page .sub-title h3{
  margin:0;font-size:14.5px;font-weight:800;color:var(--ink);
}
.calc-page .sub-title .sub-icon{
  width:28px;height:28px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
}
.calc-page .sub-title .sub-icon .icon{width:15px;height:15px;}
.calc-page .hint{margin:0 0 14px 38px;font-size:12.5px;line-height:1.6;color:var(--muted);}
.calc-page .hint kbd{
  display:inline-block;min-width:20px;padding:0 5px;
  font:inherit;font-size:11px;font-weight:700;line-height:18px;text-align:center;
  color:var(--slate);background:#fff;
  border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;
}

/* ===================== 기본 정보 입력 ===================== */
.calc-page .info-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.calc-page .info-field{gap:7px;}
.calc-page .info-field label{
  font-size:12px;font-weight:700;color:var(--slate);letter-spacing:.02em;
}
.calc-page .info-field input,
.calc-page .info-field.narrow input{
  width:100%;height:42px;
  padding:0 13px;
  border:1px solid var(--line-2);border-radius:10px;
  font-size:14px;font-family:inherit;color:var(--ink);
  background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.calc-page .info-field input:hover{border-color:#94a3b8;}
.calc-page .info-field input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(37,99,235,.14);
}
.calc-page .info-note{
  display:flex;align-items:flex-start;gap:8px;
  margin:14px 0 0;padding:10px 12px;
  font-size:12px;line-height:1.55;color:#475569;
  background:var(--soft);border:1px solid var(--line);border-radius:10px;
}
.calc-page .info-note .icon{width:15px;height:15px;color:var(--accent);margin-top:1px;}

/* ===================== 표 공통 ===================== */
.calc-page .section .table-scroll{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.calc-page .section table{font-size:13px;}
.calc-page .section th,
.calc-page .section td{
  border:none;
  border-bottom:1px solid var(--line);
  border-right:1px solid #eef2f6;
  padding:8px 10px;
}
.calc-page .section tr > :last-child{border-right:none;}
.calc-page .section tbody tr:last-child > td{border-bottom:none;}
.calc-page .section thead th{
  background:var(--ink-2);
  color:#e2e8f0;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  padding:11px 10px;
  border-right-color:rgba(255,255,255,.06);
  border-bottom:none;
}
.calc-page .section tbody tr.data-color-row:hover td{background:#fafcff;}

.calc-page .qty-input{
  height:34px;border-radius:7px;background:var(--soft);
  font-family:inherit;color:var(--ink);
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.calc-page .qty-input:hover{background:#f1f5f9;}
.calc-page .qty-input:focus{box-shadow:0 0 0 3px rgba(37,99,235,.14);}

.calc-page .size-header-input{
  width:64px;height:28px;border-radius:6px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  font-family:inherit;
}
.calc-page .size-header-input:focus{outline:none;border-color:#60a5fa;background:rgba(255,255,255,.14);}
.calc-page .col-del-btn{border-radius:5px;padding:0;}

.calc-page .row-del-btn{
  width:28px;height:28px;padding:0;border-radius:8px;
  background:#fff;color:#94a3b8;border:1px solid var(--line);
  font-size:15px;
  transition:all .15s;
}
.calc-page .row-del-btn:hover{background:#fef2f2;color:var(--danger);border-color:#fecaca;}

.calc-page .empty-table-msg{
  padding:22px 14px;
  font-size:12.5px;color:#94a3b8;
  background:repeating-linear-gradient(135deg,#fbfcfe 0 10px,#f6f8fb 10px 20px);
  border:1px dashed var(--line-2);border-radius:10px;
}
.calc-page td.empty-table-msg{border:none;border-radius:0;}

/* ===================== 원단/자재 입력 행 ===================== */
.calc-page .fabric-row-head,
.calc-page .material-row-head{
  font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);
  padding:0 12px;margin-bottom:8px;
}
.calc-page #fabric-list,
.calc-page #material-list{display:flex;flex-direction:column;gap:8px;}
.calc-page .fabric-row,
.calc-page .material-row{
  margin:0;
  padding:10px 12px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.calc-page .fabric-row:hover,
.calc-page .material-row:hover{background:#fff;border-color:var(--line-2);box-shadow:var(--shadow-sm);}
.calc-page .fabric-row:focus-within,
.calc-page .material-row:focus-within{
  background:#fff;border-color:#93c5fd;
  box-shadow:0 0 0 4px rgba(37,99,235,.08);
}
.calc-page .fabric-row input, .calc-page .fabric-row select,
.calc-page .material-row input, .calc-page .material-row select{
  height:36px;padding:0 10px;
  border:1px solid var(--line-2);border-radius:8px;
  font-size:13px;font-family:inherit;color:var(--ink);background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.calc-page .fabric-row input:focus, .calc-page .fabric-row select:focus,
.calc-page .material-row input:focus, .calc-page .material-row select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
.calc-page .fabric-row .row-del-btn,
.calc-page .material-row .row-del-btn{width:36px;height:36px;}

/* ===================== 버튼 ===================== */
.calc-page button{font-family:inherit;}
.calc-page .btn-group{margin-top:14px;gap:8px;}
.calc-page .btn-add{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:9px;
  background:#fff;color:var(--accent-dark);
  border:1px solid #bfdbfe;
  font-size:13px;font-weight:700;
  transition:all .15s;
}
.calc-page .btn-add:hover{background:var(--accent-soft);border-color:#93c5fd;}
.calc-page .btn-add .icon{width:15px;height:15px;}
.calc-page .btn-add.ghost{color:var(--slate);border-color:var(--line-2);}
.calc-page .btn-add.ghost:hover{background:var(--soft);border-color:#94a3b8;}

/* 계산 툴바 */
.calc-page .calc-bar{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
  margin:0 0 22px;padding:16px;
  background:linear-gradient(180deg,#f8fafc,#f1f5f9);
  border:1px solid var(--line);
  border-radius:14px;
}
.calc-page .calc-bar .bar-sep{width:1px;height:28px;background:var(--line-2);margin:0 4px;}
.calc-page .calc-bar button{
  display:inline-flex;align-items:center;gap:8px;
  height:44px;padding:0 20px;border-radius:10px;
  font-size:14px;font-weight:700;
  transition:transform .12s, box-shadow .15s, background .15s;
}
.calc-page .calc-bar button:not(:disabled):active{transform:translateY(1px);}
.calc-page .btn-primary{
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  box-shadow:0 10px 20px -10px rgba(37,99,235,.8);
  padding:0 26px !important;
}
.calc-page .btn-primary:hover{background:linear-gradient(135deg,#1d4ed8,#4338ca);box-shadow:0 12px 24px -10px rgba(37,99,235,.9);}
.calc-page .btn-excel{background:#16a34a;box-shadow:0 8px 18px -10px rgba(22,163,74,.8);}
.calc-page .btn-excel:hover{background:#15803d;}
.calc-page #pdf-btn{background:var(--ink-2) !important;box-shadow:0 8px 18px -10px rgba(15,23,42,.8);}
.calc-page #pdf-btn:hover{background:#0f172a !important;}
.calc-page .btn-excel:disabled,
.calc-page #pdf-btn:disabled{
  background:#e2e8f0 !important;color:#94a3b8;box-shadow:none;cursor:not-allowed;
}
.calc-page .btn-clear{
  background:#fff;color:#dc2626;border:1px solid #fecaca;
}
.calc-page .btn-clear:hover{background:#fef2f2;border-color:#fca5a5;}

/* ===================== 결과 ===================== */
.calc-page .result-empty{
  padding:54px 20px 48px;
  font-size:13.5px;color:var(--muted);
  border:1.5px dashed var(--line-2);border-radius:14px;
  background:
    radial-gradient(400px 160px at 50% 0%, rgba(37,99,235,.06), transparent 70%),
    #fcfdfe;
}
.calc-page .result-empty::before{
  content:"";display:block;margin:0 auto 14px;
  width:56px;height:56px;border-radius:16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M8 6h8M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01'/%3E%3C/svg%3E") center/26px no-repeat,
    #eff6ff;
  box-shadow:inset 0 0 0 1px #dbeafe;
}
.calc-page .loss-hint{
  display:block;
  margin:0 0 12px;padding:9px 12px;text-align:left;
  font-size:12px;color:#92400e;
  background:#fffbeb;border:1px solid #fde68a;border-radius:10px;
}
.calc-page .loss-hint[style*="none"]{display:none !important;}

.calc-page #result-table thead th{
  background:linear-gradient(180deg,#1e3a8a,#1e40af);
  color:#fff;
}
.calc-page #result-table tbody tr.data-row td{background:#fff;}
.calc-page #result-table tbody tr.data-row:nth-of-type(even) td{background:#fafbfd;}
.calc-page #result-table tbody tr.data-row:hover td{background:#f5f8ff;}
.calc-page .order-qty{
  font-weight:800;color:var(--accent-dark);
  font-variant-numeric:tabular-nums;
}
.calc-page .row-amount{font-variant-numeric:tabular-nums;}
.calc-page .row-krw{color:#15803d;font-weight:800;font-variant-numeric:tabular-nums;}
.calc-page .summary-row td{
  background:#eef2ff !important;
  color:#1e3a8a;font-weight:800;
  border-bottom:1px solid #c7d2fe;
}
.calc-page .summary-row td:first-child{box-shadow:inset 3px 0 0 #4f46e5;}

.calc-page .loss-edit{
  height:30px;border-radius:7px;
  background:#fffbeb;border:1px solid #fcd34d;color:#92400e;
  font-family:inherit;
}
.calc-page .loss-edit:focus{box-shadow:0 0 0 3px rgba(245,158,11,.18);border-color:#f59e0b;}
.calc-page .price-edit{
  height:30px;border-radius:7px;background:var(--soft);font-family:inherit;
  border:1px solid var(--line);
}
.calc-page .price-edit:focus{box-shadow:0 0 0 3px rgba(37,99,235,.14);}
.calc-page .order-color-input{height:30px;}

/* 총합 — JS가 display:block으로 표시하므로 flex로 덮어씀 */
.calc-page .grand-totals{
  margin-top:18px;padding:18px 22px;
  border-radius:14px;
  background:
    radial-gradient(500px 160px at 100% 0%, rgba(99,102,241,.35), transparent 70%),
    linear-gradient(135deg,#0f172a,#1e293b);
  box-shadow:0 16px 32px -18px rgba(15,23,42,.7);
  gap:10px;
}
.calc-page .grand-totals[style*="block"]{display:flex !important;}
.calc-page .grand-total-line{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:9px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  color:#cbd5e1;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.calc-page .grand-total-line::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#60a5fa;
}
.calc-page .grand-total-krw{
  margin-left:auto;
  padding:10px 16px;
  background:linear-gradient(135deg,rgba(34,197,94,.22),rgba(34,197,94,.1));
  border-color:rgba(74,222,128,.4);
  color:#fff;font-size:17px;font-weight:800;
}
.calc-page .grand-total-krw::before{background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.2);}

/* ===================== 알림 배너 ===================== */
.calc-page .draft-banner{
  margin-bottom:18px;padding:14px 18px;
  background:#fff;
  border:1px solid #fde68a;
  border-left:4px solid #f59e0b;
  border-radius:12px;
  box-shadow:var(--shadow);
}
.calc-page .draft-banner-text{color:#78350f;font-weight:600;}
.calc-page .calc-warnings{
  padding:14px 18px;border-radius:12px;
  background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid #f97316;
}

/* ===================== 설명서 모달 ===================== */
.calc-page .modal-overlay{background:rgba(2,6,23,.6);backdrop-filter:blur(3px);}
.calc-page .modal-box{
  max-width:620px;border-radius:18px;padding:0;
  box-shadow:0 30px 60px -20px rgba(2,6,23,.5);
}
.calc-page .modal-head{
  padding:24px 28px 20px;
  color:#fff;
  background:
    radial-gradient(400px 140px at 100% 0%, var(--page-glow), transparent 70%),
    linear-gradient(160deg,#0b1628,#1b2f4d);
}
.calc-page .modal-head .hero-eyebrow{font-size:10.5px;}
.calc-page .modal-box h2{margin:10px 0 0;color:#fff;font-size:19px;font-weight:800;}
.calc-page .modal-close{
  top:16px;right:16px;width:32px;height:32px;padding:0;
  background:rgba(255,255,255,.12);color:#fff;
}
.calc-page .modal-close:hover{background:rgba(255,255,255,.22);color:#fff;}
.calc-page .guide-steps{
  list-style:none;margin:0;padding:22px 28px 26px;gap:4px;
  counter-reset:gstep;
}
.calc-page .guide-steps li{
  position:relative;counter-increment:gstep;
  padding:12px 0 12px 46px;
  font-size:13.5px;line-height:1.65;color:#334155;
  border-bottom:1px solid #f1f5f9;
}
.calc-page .guide-steps li:last-child{border-bottom:none;}
.calc-page .guide-steps li::before{
  content:counter(gstep);
  position:absolute;left:0;top:12px;
  width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:var(--accent-dark);
  background:var(--accent-soft);box-shadow:inset 0 0 0 1px #dbeafe;
}
.calc-page .guide-steps li strong{display:block;color:var(--ink);font-size:14px;margin-bottom:1px;}

/* ===================== 푸터 ===================== */
.calc-page .site-footer{
  margin:0 auto;padding:26px 24px 36px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  color:#64748b;font-size:12px;
}
.calc-page .site-footer a{color:#475569;text-decoration:none;font-weight:600;}
.calc-page .site-footer a:hover{color:var(--accent);}

/* ===================== 반응형 ===================== */
@media (max-width:1100px){
  .calc-page .page-hero-inner{grid-template-columns:1fr;gap:26px;}
  .calc-page .hero-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px;}
  .calc-page .hero-flow-title{grid-column:1/-1;margin:0;}
  .calc-page .flow-step{flex-direction:column;gap:10px;padding:0;}
  .calc-page .flow-step::after{display:none;}
  .calc-page .info-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:1000px){
  .calc-page .fabric-row-head{display:none;}
}
@media (max-width:900px){
  .calc-page .material-row-head{display:none;}
}
@media (max-width:640px){
  .calc-page .site-header{position:static;}
  .calc-page .site-header-inner{padding:12px 16px;}
  .calc-page .page-hero-inner{padding:26px 16px 80px;}
  .calc-page .page-hero h1{font-size:26px;}
  .calc-page .hero-flow{grid-template-columns:1fr;}
  .calc-page .flow-step{flex-direction:row;}
  .calc-page .wrap{padding:0 16px 32px;}
  .calc-page .section-head{padding:16px 18px;}
  .calc-page .section-head .head-tag{display:none;}
  .calc-page .section-body{padding:18px;}
  .calc-page .info-grid{grid-template-columns:1fr;}
  .calc-page .hint{margin-left:0;}
  .calc-page .calc-bar .bar-sep{display:none;}
  .calc-page .calc-bar button{flex:1 1 calc(50% - 10px);justify-content:center;}
  .calc-page .grand-total-krw{margin-left:0;width:100%;}
}

/* ===================== 인쇄 ===================== */
@media print{
  .calc-page .page-hero, .calc-page .site-footer, .calc-page .section-head{display:none !important;}
  .calc-page .wrap{margin:0;}
  .calc-page .section{box-shadow:none;border:none;}
  .calc-page .section-body{padding:0;}
  .calc-page .grand-totals{background:#eef2ff !important;box-shadow:none;}
  .calc-page .grand-total-line{background:none;border:none;}
}

/* 고정 헤더 높이만큼 스크롤 여백 (앵커 이동·Tab 포커스가 헤더 밑에 가려지지 않게) */
html:has(body.calc-page){scroll-behavior:smooth;scroll-padding-top:84px;}
@media (max-width:900px){ html:has(body.calc-page){scroll-padding-top:124px;} }
@media (max-width:640px){ html:has(body.calc-page){scroll-padding-top:12px;} }
/* 가로로 눕힌 폰처럼 높이가 낮은 화면: 두 줄 헤더가 화면을 많이 가리므로 고정하지 않음 */
@media (max-width:900px) and (max-height:520px){
  .calc-page .site-header{position:static;}
  html:has(body.calc-page){scroll-padding-top:12px;}
}

/* ===================== 언어·통화 선택 (헤더 오른쪽, 모든 페이지 공통) ===================== */
.calc-page .site-header-inner{gap:14px;}
.calc-page .site-nav{margin-left:auto;}
.calc-page .site-header .lang-toggle{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  padding:3px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
}
.calc-page .lang-toggle .lang-globe{width:15px;height:15px;color:#94a3b8;margin:0 4px 0 6px;}
.calc-page .lang-toggle [data-lang]{
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  height:30px;padding:0 11px;border-radius:7px;
  background:transparent;color:#cbd5e1;border:none;
  font-size:12.5px;font-weight:700;box-shadow:none;
  transition:background .15s,color .15s;
}
.calc-page .lang-toggle [data-lang] em{
  font-style:normal;font-size:10px;font-weight:800;letter-spacing:.05em;
  padding:2px 5px;border-radius:4px;
  background:rgba(255,255,255,.08);color:#cbd5e1;
}
.calc-page .lang-toggle [data-lang]:hover{background:rgba(255,255,255,.08);color:#fff;}
.calc-page .lang-toggle [data-lang].active{
  background:#fff;color:var(--ink);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.5);
}
.calc-page .lang-toggle [data-lang].active em{background:var(--accent-soft);color:var(--accent-dark);}
.calc-page .lang-toggle [data-lang]:focus-visible{outline:2px solid #60a5fa;outline-offset:1px;}

/* 좁은 화면: 로고와 언어 선택을 한 줄에, 메뉴는 아래 줄에서 가로 스크롤
   (영어 메뉴 기준 한 줄에 약 850px가 필요해서 900px 이하부터 적용) */
@media (max-width:900px){
  .calc-page .site-header-inner{row-gap:10px;}
  .calc-page .site-logo{order:1;}
  .calc-page .site-header .lang-toggle{order:2;margin-left:auto;}
  .calc-page .site-nav{
    order:3;width:100%;margin-left:0;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  }
  .calc-page .site-nav::-webkit-scrollbar{display:none;}
  .calc-page .site-nav a{white-space:nowrap;flex:none;}
}
@media (max-width:480px){
  .calc-page .lang-toggle [data-lang] em,
  .calc-page .lang-toggle .lang-globe{display:none;}
}
@media (max-width:420px){
  .calc-page .site-nav a{padding:7px 8px;font-size:12.5px;}
}

/* English(USD) 모드: 환율 입력·원화환산 숨김 */
.calc-page.lang-en .fx-field,
.calc-page.lang-en .fx-note,
.calc-page.lang-en #result-table .col-krw,
.calc-page.lang-en #result-table .row-krw,
.calc-page.lang-en #result-table .subtotal-krw{display:none !important;}
@media (min-width:1101px){
  .calc-page.lang-en .info-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}


/* ===================== 영어 안내 배너 (브라우저 언어가 한국어가 아닌 첫 방문자) ===================== */
.calc-page .lang-suggest{
  position:relative;z-index:40;
  background:linear-gradient(90deg,#1d4ed8,#4f46e5);
  color:#fff;
}
.calc-page .lang-suggest-inner{
  max-width:1400px;margin:0 auto;padding:9px 24px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;font-weight:600;
}
.calc-page .lang-suggest-inner .icon{width:16px;height:16px;color:#c7d2fe;}
.calc-page .lang-suggest-go{
  margin-left:auto;
  height:30px;padding:0 12px;border-radius:7px;
  background:#fff;color:#1e3a8a;
  font-size:12.5px;font-weight:800;
}
.calc-page .lang-suggest-go:hover{background:#eef2ff;}
.calc-page .lang-suggest-close{
  width:30px;height:30px;padding:0;border-radius:7px;
  background:rgba(255,255,255,.14);color:#fff;
  font-size:16px;line-height:1;
}
.calc-page .lang-suggest-close:hover{background:rgba(255,255,255,.26);}
.calc-page .lang-suggest button:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media (max-width:640px){
  .calc-page .lang-suggest-inner{padding:9px 16px;}
}
@media print{
  .calc-page .lang-suggest{display:none !important;}
}