/* ============================================================
   FlowComps 호스 빌더 — UI v3 (2026-07 리디자인)
   사이트 전체가 2026 디자인 시스템(theme/basic/css/flowcomps-2026.css,
   오렌지 --fc-orange / 네이비 --fc-blue 톤)으로 갱신된 뒤에도 이 페이지만
   예전 스타일로 남아 있어 재정비했다. 색상은 이 파일에서 새로 정의하지
   않고 사이트 공통 :root 토큰(--fc-*)을 그대로 재사용하며, 이 페이지
   전용 값(라운드/그림자/모노폰트)만 --fb- 접두사로 별도 정의한다
   (아래 ".flow-builder" 규칙 참고).

   폭 버그(2026-07-19 이전): 사이트 공통 서브페이지 그리드 규칙
   (#wrapper:not(.fc-front) #container_wr {display:grid;
   grid-template-columns:minmax(0,1fr) 280px}, 특이도 ID 2개+class 1개)이
   이 페이지의 기존 오버라이드(특이도 ID 1개+class 1개+element 1개)보다
   높아서, #aside가 숨겨져 있는데도 280px+32px(약 312px) 트랙이 계속
   예약되어 실제 콘텐츠 폭이 1620px 중 1222px(74%)만 쓰이고 있었다.
   특이도를 ID 2개로 맞춘 아래 규칙으로 고쳤다(#wrapper #container_wr).
   ============================================================ */

/* ---------- 리셋 ---------- */
* { box-sizing: border-box; }

body.flow-builder-page {
    margin: 0;
    background: #fff;
    color: var(--fc-ink);
    font-size: 16px;
    overflow-x: hidden; /* 커넥터 트레이 등 가로 스크롤 영역이 페이지 전체를 밀어내지 않도록 안전장치 */
}

/* 이 페이지는 #aside(로그인/최근글 위젯)를 쓰지 않는다. 사이트 공통 규칙이
   #container_wr를 grid(1fr + 280px aside 트랙)로 만들어서, #aside를 그냥
   display:none만 하면 트랙 자체는 그대로 남아 폭을 잡아먹는다(실제로
   겪은 버그). #container_wr를 block으로 되돌려 트랙 자체를 없앤다.
   특이도: #wrapper(id) #container_wr(id) + .flow-builder-page(class) +
   body(element) = (0,2,1,1) — 사이트 규칙(0,2,1,0)과 id/class 개수는
   같고 element 개수에서 이겨 !important 없이 항상 적용된다. */
body.flow-builder-page #wrapper #container_wr { display: block; }
body.flow-builder-page #aside,
body.flow-builder-page #container_title { display: none; }

button, input, select, textarea { font: inherit; }

/* 그누보드 메인 사이트(default.css)의 구형 HTML5 리셋(article,aside,...,section{display:block})이
   네이티브 [hidden] 속성과 동일한 우선순위라 article/aside/section 태그에는 hidden이 무시될 수 있다.
   .flow-builder 안에서는 항상 [hidden]이 실제로 숨겨지도록 specificity를 높여 명시한다. */
.flow-builder [hidden] { display: none !important; }

.flow-builder {
    /* 이 페이지 전용 토큰. 색상은 새로 만들지 않고 사이트 공통 --fc-* 를
       그대로 쓴다(레이아웃 하단 "핵심 수정 2" 참고) — 라운드/그림자/
       모노폰트만 이 페이지 스코프로 별도 정의한다. */
    --fb-radius-lg: 20px;
    --fb-radius: 16px;
    --fb-radius-sm: 12px;
    --fb-shadow: 0 10px 28px rgba(7, 26, 51, .07);
    --fb-shadow-lift: 0 16px 34px rgba(7, 26, 51, .12);
    --fb-mono: 'JetBrains Mono', 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', monospace;

    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 0 clamp(48px, 4vw, 72px);
}

/* ============================================================
   헤더 — 사이트 홈 히어로(fc26-hero)와 같은 톤(네이비 그라데이션 +
   오렌지 헤어라인 + 옅은 그리드, JetBrains Mono eyebrow)을 서브페이지
   카드 안에 들어가는 축소판으로 재현한다.
   ============================================================ */
/* 서버 데이터 동기화/연동 상태/헤더 견적서 버튼을 뺀 뒤(2026-07-20, 고객 화면에는
   불필요한 내부용 요소였음) 소개 텍스트만 남아, 박스를 더 낮고 정돈되게 다듬었다. */
.builder-header {
    position: relative;
    overflow: hidden;
    margin: 0 0 28px;
    padding: 34px 42px;
    border: 0;
    border-radius: var(--fb-radius-lg);
    background: linear-gradient(155deg, var(--fc-blue-deep), var(--fc-blue));
    box-shadow: var(--fb-shadow-lift);
    color: #fff;
}

.builder-header:before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--fc-orange);
}

.builder-header:after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
    mask-image: linear-gradient(180deg, #000, transparent 85%);
}

.builder-header > * { position: relative; z-index: 1; }

.builder-eyebrow {
    margin: 0 0 10px;
    color: var(--fc-orange);
    font: 700 12px var(--fb-mono);
    letter-spacing: .17em;
    text-transform: uppercase;
}

.builder-header h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 3.2vw, 48px);
    line-height: 1.1;
    font-weight: 950;
}

.builder-lead {
    max-width: 640px;
    margin: 14px 0 0;
    color: rgba(231,236,243,0.75);
    font-size: 17px;
    line-height: 1.6;
    word-break: keep-all;
}

/* ============================================================
   페이지 흐름 — 사양 선택 바(위) → 조립 미리보기(중앙, 대형) →
   결과 영역(아래) 순서로 단순히 위→아래로 쌓인다(2026-07-20 개편).
   예전엔 좌측 STEP 아코디언 / 중앙 미리보기 / 우측 결과 패널 / 하단
   공용 커넥터 트레이 4곳이 3단 그리드로 흩어져 있어, 사양을 고른 뒤
   한참 아래 트레이까지 내려가 커넥터를 끌어와야 했다. 지금은 호환
   커넥터 후보를 조립 미리보기 안, 좌/우 드롭존 바로 옆에 두어(아래
   ".stage-side" 참고) 드래그 거리를 없앴다. 폭 버그를 고쳐 실제로
   쓸 수 있게 된 폭(≥1700px 기준 약 1536px)을 살려 조립 미리보기가
   전체 폭을 다 쓴다.
   ============================================================ */
.builder-specbar,
.builder-panel--stage {
    margin: 0 0 28px;
}

.builder-panel {
    border: 1px solid var(--fc-line);
    border-radius: var(--fb-radius);
    background: #fff;
    padding: 22px;
    box-shadow: var(--fb-shadow);
}

.builder-panel h2 { margin: 0 0 18px; color: var(--fc-blue); font-size: 20px; font-weight: 950; }
.builder-panel h3 { margin: 0 0 12px; color: var(--fc-blue); font-size: 16px; font-weight: 950; }

/* ============================================================
   사양 선택 바 — 호스 기본 사양 6개 필드 + 옵션을 한 화면에,
   접었다 펴는 아코디언 없이 항상 보이게 한다.
   ============================================================ */
.builder-specbar {
    position: relative;
    overflow: hidden;
    padding: 0 28px 28px;
    border: 1px solid #d7e1e9;
    border-top: 4px solid var(--fc-orange);
    border-radius: var(--fb-radius);
    background: linear-gradient(180deg, #f7f9fb 0, #fff 138px);
    box-shadow: 0 18px 44px rgba(7, 26, 51, .09);
}

.builder-specbar__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    margin: 0 -28px 24px;
    padding: 24px 28px 22px;
    border-bottom: 1px solid #dce4eb;
}

.builder-specbar__intro p {
    margin: 0 0 8px;
    color: var(--fc-orange);
    font: 800 11px/1.2 var(--fb-mono);
    letter-spacing: .13em;
}

.builder-specbar__intro h2 {
    margin: 0;
    color: var(--fc-blue);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 950;
    line-height: 1.25;
    letter-spacing: -.035em;
}

.builder-specbar__intro > span {
    display: block;
    margin-top: 8px;
    color: #647587;
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
}

.builder-specbar__flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(104px, 1fr));
    min-width: 390px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.builder-specbar__flow li {
    position: relative;
    padding: 7px 18px 8px;
    border-left: 1px solid #d8e1e8;
    color: #8695a3;
}

.builder-specbar__flow li:after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 0;
    left: 18px;
    height: 2px;
    background: #d9e1e7;
}

.builder-specbar__flow b,
.builder-specbar__flow span { display: block; }
.builder-specbar__flow b { margin-bottom: 7px; font: 800 10px/1 var(--fb-mono); letter-spacing: .1em; }
.builder-specbar__flow span { color: #526579; font-size: 13px; font-weight: 800; white-space: nowrap; }
.builder-specbar__flow li.is-current b,
.builder-specbar__flow li.is-current span { color: var(--fc-blue); }
.builder-specbar__flow li.is-current:after { background: var(--fc-orange); }

.builder-specbar__fields {
    position: relative;
}

.builder-specbar__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.builder-specbar__fields .field {
    flex: 1 1 160px;
    margin-bottom: 0;
}

.builder-specbar__options {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--fc-line);
}

.builder-specbar__options-label {
    display: block;
    color: var(--fc-ink);
    font-size: 14px;
    font-weight: 900;
}

.builder-specbar__options-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.builder-specbar__options-head small {
    color: #748496;
    font-size: 12px;
}

.builder-specbar__options .option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.builder-specbar__options .option-item { flex: 0 1 auto; }

/* ============================================================
   필드 / 옵션
   ============================================================ */
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }

.field > span {
    color: var(--fc-ink);
    font-size: 13px;
    font-weight: 800;
}

.field select,
.field input,
.customer-card__body textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--fc-line);
    border-radius: var(--fb-radius-sm);
    background: #fff;
    color: var(--fc-ink);
    padding: 9px 12px;
    font-size: 15px;
}

.field select:focus,
.field input:focus,
.customer-card__body textarea:focus {
    border-color: var(--fc-orange);
    outline: 3px solid rgba(240,122,36,0.16);
}

.option-list { display: grid; gap: 8px; }

.option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--fc-line);
    border-radius: var(--fb-radius-sm);
    background: var(--fc-bg);
    color: var(--fc-ink);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.option-item:hover { border-color: var(--fc-orange); background: #fff; transform: translateY(-1px); }
.option-item input { width: 16px; height: 16px; accent-color: var(--fc-blue); }

/* ============================================================
   중앙 — 조립 미리보기 스테이지 (핵심 영역, 가장 크게)
   ============================================================ */
.builder-panel--stage { padding: 26px; border-radius: var(--fb-radius-lg); }

.stage-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.hose-stage {
    --stage-col: minmax(220px, 280px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 420px;
    padding: 40px;
    border: 1px solid var(--fc-line);
    border-radius: var(--fb-radius);
    background: linear-gradient(155deg, #fff, var(--fc-bg));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
    overflow: hidden;
}

/* 조립 행 — 왼쪽 드롭존 / 호스 본체 / 오른쪽 드롭존을 간격 거의 없이 붙여서,
   커넥터를 놓으면(has-part) 실제 사진이 호스 양 끝에 이어붙은 하나의 조합
   이미지처럼 보이게 한다(2026-07-20, 사용자 요청). */
.hose-assembly {
    display: grid;
    grid-template-columns: var(--stage-col) minmax(320px, 1fr) var(--stage-col);
    /* 세 칸의 이미지 프레임 상단을 동일하게 두고 각 프레임의 정중앙을
       조립 축으로 사용한다. 제품명 높이나 줄바꿈은 축 좌표에 영향을 주지 않는다. */
    align-items: start;
    gap: 18px;
}

/* 후보 행 — 좌우 커넥터 사이의 비어 있던 공간에 현재 선택 사양을 배치한다. */
.hose-candidates {
    display: grid;
    grid-template-columns: var(--stage-col) minmax(320px, 1fr) var(--stage-col);
    gap: 18px;
    align-items: start;
}

/* 연한 도면(블루프린트) 그리드 배경 */
.hose-stage:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(22,66,125,0.07) 1px, transparent 1px),
        linear-gradient(180deg, rgba(22,66,125,0.07) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, #000, transparent 85%);
}

.hose-stage > * { position: relative; z-index: 1; }

/* 좌/우 커넥터 드롭존 — 평상시엔 절제된 스타일, 드래그 오버/완료
   상태에서만 오렌지·네이비로 강하게 반응해 "여기 놓으세요"가 눈에
   띄도록 한다(상태별 클래스명은 builder.js 계약이라 그대로 유지). */
.drop-zone {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    min-height: 210px;
    padding: 20px;
    border: 1.5px dashed #a9c0d8;
    border-radius: var(--fb-radius);
    background: var(--fc-bg);
    color: var(--fc-muted);
    text-align: center;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.drop-zone.is-dragover {
    transform: scale(1.015);
    border-color: var(--fc-orange);
    background: #fff;
    box-shadow: 0 0 0 6px rgba(240,122,36,.10);
}

.drop-zone.is-over {
    border-color: var(--fc-blue);
    border-style: solid;
    background: #fff;
    color: var(--fc-blue);
    box-shadow: var(--fb-shadow);
}

/* 커넥터를 놓으면(has-part) 카드처럼 보이던 점선 박스를 걷어내고, 실제 부품 사진을
   크게 채워서 호스 본체 옆에 바로 이어붙은 하나의 조합 이미지처럼 보이게 한다
   (2026-07-20, 사용자 요청 — "호스부터 양쪽 커넥터까지 이미지로"). */
.drop-zone.has-part {
    position: relative;
    z-index: 1;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--fc-blue);
    align-content: start;
}

.drop-zone.has-part .drop-zone__hint { display: none; }

/* 커넥터 이미지가 들어갈 자리 — 비어있을 땐 placeholder 아이콘의 작은 원형 배지,
   실제 부품이 채워지면(.has-part) 실사 이미지를 크게 보여주는 사각 패널로 바뀐다. */
.drop-zone__thumb {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--fc-line);
    box-shadow: var(--fb-shadow);
    color: #9fb3c8;
    font-size: 24px;
    transition: width .2s ease, height .2s ease, border-radius .2s ease;
}

.drop-zone.has-part .drop-zone__thumb {
    width: 100%;
    height: 150px;
    padding: 12px;
    border-radius: var(--fb-radius-sm);
    border-color: var(--fc-line);
    background: #fff;
    box-shadow: var(--fb-shadow);
}

.drop-zone__thumb img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.drop-zone.has-part .drop-zone__thumb img { border-radius: 6px; object-fit: contain; }
.drop-zone[data-side="left"].has-part .drop-zone__thumb img { object-position: right center; }
.drop-zone[data-side="right"].has-part .drop-zone__thumb img { object-position: left center; }

.drop-zone__label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fc-blue);
}

.drop-zone.has-part .drop-zone__label { color: var(--fc-muted); }

.drop-zone strong {
    max-width: 100%;
    word-break: keep-all;
    overflow-wrap: break-word;
    font-size: 16px;
    color: var(--fc-blue);
}

.drop-zone__hint {
    margin: 0;
    font-size: 12px;
    color: var(--fc-muted);
}

/* 호스 본체 — 스테이지의 시각적 중심 */
.hose-body {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    align-content: start;
    gap: 8px;
    min-height: 210px;
    transform: none;
}

.hose-body__visual {
    width: calc(100% - 32px);
    /* 좌우 커넥터 썸네일과 같은 높이. 이미지 자체의 종횡비가 달라도
       object-fit:contain의 중심이 항상 동일한 조립 축에 놓인다. */
    height: 150px;
    margin-inline: auto;
    overflow: visible;
    border-radius: 0;
    transform: none;
}

.hose-body__line {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 1px solid #26394f;
    border-radius: 999px;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,0.16) 0 9px, transparent 9px 18px),
        linear-gradient(90deg, #7f91a8, #18283c);
    box-shadow:
        inset 0 2px 7px rgba(255,255,255,0.18),
        inset 0 -3px 10px rgba(0,0,0,0.24),
        0 18px 38px rgba(9,42,80,0.18);
}

.hose-body__image {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin-left: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    object-fit: contain;
    box-shadow: none;
}

.hose-body__image[hidden] { display: none; }

/* 코어 이미지는 엑셀 원본에서 제품별로 이미 분리했으므로 브레이드처럼 양 끝을
   확대·절단하지 않는다. 체결되는 좌우 끝까지 100% 보이게 표시한다. */
.hose-body__image[data-part-code^="A-"] {
    width: 100%;
    margin-left: 0;
    object-fit: contain;
}

.hose-body span {
    border-radius: 999px;
    border: 1px solid var(--fc-line);
    background: #fff;
    color: var(--fc-blue);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    padding: 8px 16px;
    box-shadow: var(--fb-shadow);
    word-break: keep-all;
    overflow-wrap: break-word;
}

#hose-body-label { max-width: 90%; }

.hose-body__length {
    font-family: var(--fb-mono);
    color: var(--fc-orange-deep) !important;
    font-variant-numeric: tabular-nums;
}

.validation-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding: 15px 16px 15px 18px;
    border: 1px solid var(--fc-line);
    border-radius: var(--fb-radius);
    background: #fbfdff;
    box-shadow: var(--fb-shadow);
}

.validation-box__content { display: flex; min-width: 0; align-items: center; gap: 13px; }
.validation-box__icon {
    display: grid;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: #edf3fa;
    color: var(--fc-blue);
    font-size: 16px;
}
.validation-box strong { display: block; margin-bottom: 4px; color: var(--fc-blue); font-size: 15px; font-weight: 900; }
.validation-box p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fc-muted); }
.validation-box.is-error { border-color: #f2a6a6; background: #fff5f5; }
.validation-box.is-error strong { color: #b42318; }
.validation-box.is-error .validation-box__icon { background: #fee9e7; color: #b42318; }

/* ============================================================
   드롭존 바로 아래 호환 커넥터 후보 리스트 — 예전엔 하단 공용
   트레이 하나(가로 스크롤)에 다 몰아 놓고 위 드롭존까지 끌어와야
   했지만, 지금은 좌/우 칸 안에서 세로로 스크롤되는 짧은 목록이라
   드래그 거리가 거의 없다.
   ============================================================ */
.connector-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: var(--candidate-panel-height, auto);
    max-height: var(--candidate-panel-height, 300px);
    min-height: 0;
    overflow-y: auto;
    padding: 0 6px 0 0;
    scrollbar-gutter: stable;
}

.empty-text { margin: 0; padding: 10px 2px; color: var(--fc-muted); font-size: 12px; }

.connector-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 1px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--fc-line);
    border-radius: var(--fb-radius-sm);
    background: #fff;
    box-shadow: var(--fb-shadow);
    cursor: grab;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.connector-card:hover { border-color: var(--fc-orange); transform: translateX(2px); box-shadow: var(--fb-shadow-lift); }
.connector-card:active { cursor: grabbing; }
.connector-card.is-dragging { opacity: 0.4; }

/* 이미지 영역 — image_url 이 있으면 <img>, 없으면 placeholder 아이콘. 3행(이름/규격/메타)에
   걸쳐 왼쪽에 붙는다. */
.connector-card__thumb {
    grid-row: 1 / 4;
    grid-column: 1;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--fc-bg);
    border: 1px solid var(--fc-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9fb3c8;
    font-size: 16px;
    overflow: hidden;
}

.connector-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.connector-card__name { grid-column: 2; font-size: 13px; color: var(--fc-blue); font-weight: 800; line-height: 1.3; }
.connector-card__spec { grid-column: 2; display: block; font-size: 11px; color: var(--fc-muted); line-height: 1.3; }

.connector-card__meta {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
}

.connector-card__type {
    font-family: var(--fb-mono);
    color: var(--fc-muted);
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--fc-bg);
}

/* 결과 영역 — 고객 정보와 예상 가격/작업 버튼을 같은 높이의 2열 카드로 구성한다. */
.builder-results {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
    align-items: stretch;
    gap: 20px;
}

.flange-panel,
.warning-box,
.customer-card,
.quote-actions-card {
    border: 1px solid var(--fc-line);
    border-radius: var(--fb-radius);
    background: #fff;
    box-shadow: var(--fb-shadow);
    padding: 20px;
}

.flange-panel { grid-column: 1 / -1; background: var(--fc-bg); }
.flange-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flange-side-fields { display: contents; }
.flange-side-fields[hidden] { display: none; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.pressure-select-trigger { width:100%; min-height:44px; padding:10px 36px 10px 12px; border:1px solid #cbd8e5; border-radius:8px; background:#fff; color:#17334f; font:inherit; text-align:left; cursor:pointer; }
.pressure-select-trigger:hover,.pressure-select-trigger:focus-visible { border-color:#f07a24; outline:3px solid rgba(240,122,36,.16); }

.name-tag-panel {
    grid-column: 1 / -1;
    padding: 20px;
    border: 1px solid var(--fc-line);
    border-radius: var(--fb-radius);
    background: #fff;
    box-shadow: var(--fb-shadow);
}
.name-tag-panel__heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.name-tag-panel__heading span { color: #7c8da2; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.name-tag-panel__heading h3 { margin: 3px 0 0; color: var(--fc-blue); font-size: 17px; }
.name-tag-panel__heading p { margin: 0; color: var(--fc-muted); font-size: 12px; }
.name-tag-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

.customer-card { display: flex; min-width: 0; flex-direction: column; padding: 0; overflow: hidden; }

.customer-card__header,
.price-card__heading,
.summary-card__heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customer-card__header { padding: 18px 20px; border-bottom: 1px solid var(--fc-line); background: #fbfcfe; }
.customer-card__header span:not(.result-card__icon),
.price-card__heading div > span,
.summary-card__heading div > span { color: #7c8da2; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.customer-card__header h3,
.price-card__heading h3,
.summary-card__heading h3 { margin: 2px 0 0; color: var(--fc-blue); font-size: 17px; }

.result-card__icon,
.summary-card__icon {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #dce6f2;
    border-radius: 11px;
    background: #f2f6fb;
    color: var(--fc-blue);
    font-size: 15px;
}

.customer-card__body { flex: 1; padding: 20px; }

/* 고객정보 입력칸을 세로로 한 줄씩 쌓지 않고 사양 선택 바처럼 가로로 wrap해서
   훨씬 짧고 컴팩트하게 — "가로로 만들자"는 요청 반영. 요청사항(textarea)만
   한 줄 전체를 쓴다(.field--full). */
.customer-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.customer-card__grid .field { min-width: 0; margin-bottom: 0; }

.customer-card__grid .field--full { grid-column: 1 / -1; }

.customer-card__hint { margin: 0 0 16px; color: var(--fc-muted); font-size: 12px; line-height: 1.5; }

.customer-card__error {
    margin: 14px 0 0;
    padding: 8px 10px;
    border: 1px solid #f2a6a6;
    border-radius: var(--fb-radius-sm);
    background: #fff5f5;
    color: #b42318;
    font-size: 12px;
}

.summary-card--stage {
    align-self: stretch;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(179,196,215,.85);
    border-radius: var(--fb-radius);
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 32px rgba(9,42,80,.08);
    backdrop-filter: blur(8px);
}
.summary-card__heading { margin-bottom: 15px; padding-bottom: 14px; border-bottom: 1px solid var(--fc-line); }
.summary-card dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.summary-card dt { color: var(--fc-muted); font-size: 12px; font-weight: 800; }
.summary-card dd { margin: 0; color: var(--fc-ink); font-size: 13px; word-break: keep-all; overflow-wrap: break-word; }

.quote-actions-card { display: flex; min-width: 0; flex-direction: column; padding: 0; overflow: hidden; }
.price-card { flex: 1; padding: 22px; background: linear-gradient(145deg, #fbfcfe 0%, #fff 55%, #f5f8fc 100%); }
.price-card__heading { margin-bottom: 24px; }
.price-card__quantity { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 22px; padding:14px 15px; border:1px solid #dbe4ee; border-radius:12px; background:#fff; }
.price-card__quantity>div:first-child>span { display:block; color:var(--fc-blue); font-size:14px; font-weight:850; }
.price-card__quantity small { display:block; margin-top:3px; color:var(--fc-muted); font-size:11px; }
.quantity-stepper { display:grid; grid-template-columns:38px 58px 38px; height:40px; border:1px solid #cbd8e6; border-radius:10px; overflow:hidden; background:#f7f9fc; }
.quantity-stepper button { display:grid; place-items:center; border:0; background:#f2f6fa; color:var(--fc-blue); font-size:19px; font-weight:800; cursor:pointer; }
.quantity-stepper button:hover { background:var(--fc-blue); color:#fff; }
.quantity-stepper input { width:100%; min-width:0; padding:0 4px; border:0; border-right:1px solid #d7e1eb; border-left:1px solid #d7e1eb; background:#fff; color:var(--fc-blue-deep); font:800 15px/1 var(--fb-mono); text-align:center; appearance:textfield; }
.quantity-stepper input::-webkit-inner-spin-button,.quantity-stepper input::-webkit-outer-spin-button { margin:0; appearance:none; }
.price-card strong { display: block; font-family: var(--fb-mono); color: var(--fc-orange-deep); font-size: clamp(30px, 3vw, 42px); font-weight: 850; line-height: 1.1; letter-spacing: -.035em; }
.price-card p { margin: 10px 0 0; color: var(--fc-muted); font-size: 13px; line-height: 1.55; }

.warning-box { grid-column: 1 / -1; border-color: #f4c46d; background: #fff9ec; }
.warning-box h3 { color: #7a4c00; }
.warning-box ul { margin: 0; padding-left: 18px; }
.warning-box li { margin: 6px 0; color: #7a4c00; font-size: 13px; }

.pressure-modal[hidden] { display: none; }

/* 스펙시트·견적서는 작업 흐름을 벗어나지 않는 대형 문서 미리보기로 연다. */
.document-modal[hidden] { display: none; }
.document-modal { position: fixed; z-index: 10060; inset: 0; display: grid; place-items: center; padding: 22px; }
.document-modal__backdrop { position: absolute; inset: 0; background: rgba(3,15,29,.68); backdrop-filter: blur(8px); }
.document-modal__dialog { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr); width: min(1500px, 96vw); height: min(930px, 94vh); overflow: hidden; border: 1px solid rgba(255,255,255,.55); border-radius: 22px; background: #fff; box-shadow: 0 36px 110px rgba(2,18,38,.42); outline: 0; }
.document-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; padding: 18px 22px 17px 26px; border-top: 4px solid var(--fc-orange); border-bottom: 1px solid #dbe4eb; background: #fff; }
.document-modal__header span { display: block; margin-bottom: 5px; color: var(--fc-orange); font: 900 10px/1 var(--fb-mono); letter-spacing: .14em; }
.document-modal__header h2 { margin: 0; color: var(--fc-blue); font-size: 22px; font-weight: 950; letter-spacing: -.035em; }
.document-modal__header p { margin: 5px 0 0; color: #718193; font-size: 12px; }
.document-modal__close { display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; border: 1px solid #d4dee7; border-radius: 12px; background: #f5f8fa; color: #23496d; font-size: 17px; cursor: pointer; transition: .18s ease; }
.document-modal__close:hover,.document-modal__close:focus-visible { border-color: var(--fc-orange); background: var(--fc-orange); color: #fff; transform: translateY(-1px); }
.document-modal__body { position: relative; min-height: 0; background: #edf2f6; }
.document-modal__body iframe { display: block; width: 100%; height: 100%; border: 0; background: #edf2f6; }
.document-modal__loading { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: #f2f5f7; color: #53697d; font-size: 14px; font-weight: 750; }
.document-modal__loading[hidden] { display: none; }
.document-modal__loading i { color: var(--fc-orange); font-size: 18px; }
body.is-modal-open { overflow: hidden; }
.pressure-modal { position: fixed; z-index: 10050; inset: 0; display: grid; place-items: center; padding: 24px; }
.pressure-modal__backdrop { position: absolute; inset: 0; background: rgba(3,15,29,.72); backdrop-filter: blur(8px); }
.pressure-modal__dialog { position: relative; width: min(1120px, 94vw); max-height: 91vh; overflow: auto; padding: 0 34px 30px; border: 1px solid rgba(255,255,255,.5); border-radius: 24px; background: #fff; box-shadow: 0 34px 100px rgba(2,18,38,.38); }
.pressure-modal__dialog:before { content:""; display:block; height:5px; margin:0 -34px; background:linear-gradient(90deg,#f07a24 0 18%,#174474 18% 100%); }
.pressure-modal__close { position: absolute; z-index:2; top:22px; right:24px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #d7e1e9; border-radius: 12px; background: #f7f9fb; color: #21486f; cursor: pointer; transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; }
.pressure-modal__close:hover,.pressure-modal__close:focus-visible { border-color:#f07a24; background:#f07a24; color:#fff; transform:translateY(-1px); }
.pressure-modal__header { display:grid; grid-template-columns:52px minmax(0,1fr); gap:18px; align-items:center; padding:28px 64px 23px 0; border-bottom:1px solid #e0e7ed; }
.pressure-modal__title-mark { display:grid; place-items:center; width:52px; height:52px; border:1px solid #d8e3eb; border-radius:14px; background:#f2f6f9; color:#164b7c; font-size:19px; }
.pressure-modal__eyebrow { display:block; margin-bottom:7px; color: #e7630d; font:900 10px/1 'JetBrains Mono',monospace; letter-spacing: .15em; }
.pressure-modal h2 { margin:0; color: #0d2844; font-size:clamp(24px,2.2vw,31px); line-height:1.22; letter-spacing:-.04em; }
.pressure-modal__header p { margin:7px 0 0; color:#65788b; font-size:14px; line-height:1.6; }
.pressure-modal__reference { margin-top:24px; border:1px solid #d7e1e9; border-radius:16px; background:#f5f8fa; overflow:hidden; }
.pressure-choice { padding:20px; border-bottom:1px solid #dce5eb; background:#fff; }
.pressure-choice__heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:13px; }
.pressure-choice__heading strong { color:#102d49; font-size:15px; }
.pressure-choice__heading span { color:#687b8d; font-size:12px; }
.pressure-choice__options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pressure-choice__button { min-height:46px; padding:9px 11px; border:1px solid #ccd9e4; border-radius:9px; background:#f7f9fb; color:#27435d; font-size:12px; font-weight:750; line-height:1.35; cursor:pointer; }
.pressure-choice__button:hover,.pressure-choice__button:focus-visible,.pressure-choice__button.is-selected { border-color:#f07a24; background:#fff4eb; color:#9a3d05; outline:none; }
.pressure-choice__empty { grid-column:1/-1; margin:0; padding:12px; color:#6c7d8e; text-align:center; }
.pressure-modal__alert { margin:16px 20px 0; padding:15px 17px; border:2px solid #ef8a3e; border-radius:10px; background:#fff6ed; color:#733507; font-size:13px; font-weight:750; line-height:1.75; white-space:pre-line; }
.pressure-modal__reference-bar { display:flex; align-items:center; justify-content:space-between; min-height:46px; padding:0 18px; border-bottom:1px solid #dce5eb; background:#eef3f6; color:#29435d; font-size:12px; font-weight:800; }
.pressure-modal__reference-bar span { display:inline-flex; align-items:center; gap:8px; }.pressure-modal__reference-bar span i { color:#e96d17; }
.pressure-modal__reference-bar b { padding:6px 9px; border:1px solid #d3dde5; border-radius:7px; background:#fff; color:#748596; font-size:10px; letter-spacing:.04em; }
.pressure-modal__data { padding:20px; background:#f7f9fb; }
.pressure-data__summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.pressure-data__summary span { display:flex; min-height:54px; padding:10px 13px; align-items:flex-start; justify-content:center; flex-direction:column; border:1px solid #dbe4eb; border-radius:10px; background:#fff; color:#243b52; font-size:13px; font-weight:750; line-height:1.45; box-shadow:0 5px 16px rgba(13,40,68,.035); }
.pressure-data__summary b { display:block; margin-bottom:3px; color:#8595a4; font:800 9px/1 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.pressure-data__section + .pressure-data__section { margin-top:22px; }
.pressure-data__section-title { display:flex; align-items:center; gap:11px; margin:0 0 10px; }
.pressure-data__section-title>b { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:#e9f0f5; color:#164b7c; font:800 10px/1 'JetBrains Mono',monospace; }
.pressure-data__section-title div { display:flex; align-items:baseline; gap:9px; }.pressure-data__section-title strong { color:#17334f; font-size:14px; }.pressure-data__section-title span { color:#81909f; font-size:11px; }
.pressure-data__scroll { max-width:100%; border:1px solid #d6e0e8; border-radius:12px; background:#fff; overflow:auto; box-shadow:0 8px 24px rgba(13,40,68,.045); }
.pressure-data__table { width:100%; min-width:720px; border-collapse:separate; border-spacing:0; color:#2c4155; font-size:12px; font-variant-numeric:tabular-nums; }
.pressure-data__table--technical { min-width:1280px; }
.pressure-data__table--technical thead th { min-width:105px; white-space:normal; line-height:1.35; }
.pressure-data__table--technical thead th:first-child { min-width:125px; }.pressure-data__table--technical tbody th { min-width:125px; }
.pressure-data__table th,.pressure-data__table td { height:47px; padding:8px 12px; border-right:1px solid #e1e7ec; border-bottom:1px solid #e1e7ec; background:#fff; text-align:center; white-space:nowrap; }
.pressure-data__table tr:last-child th,.pressure-data__table tr:last-child td { border-bottom:0; }.pressure-data__table th:last-child,.pressure-data__table td:last-child { border-right:0; }
.pressure-data__table thead th { position:sticky; top:0; z-index:2; height:50px; background:#102d49; color:#fff; font-size:11px; font-weight:800; }
.pressure-data__table thead th:first-child { left:0; z-index:3; min-width:130px; background:#0a2138; }
.pressure-data__table tbody th { position:sticky; left:0; z-index:1; min-width:130px; background:#f1f5f8; color:#1c3b58; font-weight:800; }
.pressure-data__table tbody tr:nth-child(even) td { background:#f9fbfc; }
.pressure-data__table tbody tr:hover td { background:#fff7f0; color:#a74508; }
.pressure-modal__original { border-top:1px solid #dce5eb; background:#fff; }
.pressure-modal__original summary { display:flex; min-height:48px; padding:0 18px; align-items:center; justify-content:space-between; color:#617487; font-size:12px; font-weight:750; cursor:pointer; list-style:none; }
.pressure-modal__original summary::-webkit-details-marker { display:none; }.pressure-modal__original summary:after { content:"원본 보기 +"; color:#d65b0b; font-size:11px; }
.pressure-modal__original[open] summary:after { content:"원본 닫기 −"; }
.pressure-modal__image-wrap { padding:18px; background:#f8fafb; }
.pressure-modal__dialog img { display: block; width: 100%; height: auto; margin:0; border:0; border-radius:10px; background: #fff; box-shadow:0 8px 28px rgba(13,40,68,.07); }
.pressure-modal__note { display:grid; grid-template-columns:24px 1fr; gap:11px; margin:16px 0 0; padding:15px 17px; border:1px solid #dbe5ec; border-left:3px solid #f07a24; border-radius:10px; background: #f7f9fb; color:#66798b; font-size:12px; line-height:1.65; }
.pressure-modal__note>i { color:#e76711; font-size:16px; line-height:1.45; }.pressure-modal__note b { display:block; margin-bottom:2px; color:#29425a; font-size:12px; }
@media (max-width:700px) {
    .pressure-modal__dialog { padding-right:18px; padding-left:18px; }
    .pressure-modal__dialog:before { margin-right:-18px; margin-left:-18px; }
    .pressure-modal__header { grid-template-columns:42px minmax(0,1fr); gap:13px; padding-right:48px; }
    .pressure-modal__title-mark { width:42px; height:42px; border-radius:11px; font-size:16px; }
    .pressure-modal__data { padding:13px; }.pressure-data__summary { grid-template-columns:1fr; gap:7px; }.pressure-data__summary span { min-height:48px; }
    .pressure-data__table { font-size:11px; }.pressure-data__table th,.pressure-data__table td { height:44px; padding:7px 10px; }
    .pressure-choice__heading { align-items:flex-start; flex-direction:column; gap:5px; }
    .pressure-choice__options { grid-template-columns:1fr; }
}

/* 문서 작업과 구매 작업을 두 줄로 명확히 구분한다. */
.action-sections {
    display: grid;
    gap: 18px;
    padding: 20px 22px 22px;
    border-top: 1px solid var(--fc-line);
    background: #fbfcfe;
}
.action-section { display: grid; gap: 8px; }
.action-section__label { color: #8190a3; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ============================================================
   버튼 — 클래스명을 .btn이 아니라 .fb-btn으로 쓴다. 그누보드 코어
   CSS(theme/basic/css/default.css)에 이미 "a.btn,.btn{border:0;
   height:35px;font-size:1.4em;...}"라는 완전히 다른 버튼 스타일이
   있는데, 이 파일 이름이 우연히 겹쳐서(둘 다 특이도가 같은 클래스
   선택자 1개) default.css가 나중에 로드되는 바람에 border/높이/
   폰트크기가 부분적으로 덮어써지고 있었다 — "스펙시트/견적서 버튼
   테두리가 마우스오버 때만 보인다"는 실제로 겪은 버그의 원인이었다.
   코어 파일은 못 고치니 이름 충돌 자체를 피하는 게 맞다(2026-07-20).
   ============================================================ */
.fb-btn {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    background: #fff;
    color: var(--fc-blue);
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(9,42,80,.04);
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.fb-btn i { font-size: 15px; }
.fb-btn:hover { border-color: var(--fc-blue); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(9,42,80,.10); }
.fb-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.fb-btn--primary { border-color: var(--fc-orange); background: linear-gradient(135deg, var(--fc-orange), var(--fc-orange-deep)); color: #fff; }
.fb-btn--primary:hover { background: var(--fc-orange-deep); border-color: var(--fc-orange-deep); }

.fb-btn--validate {
    flex: 0 0 auto;
    min-width: 132px;
    min-height: 44px;
    border-color: var(--fc-blue);
    background: var(--fc-blue);
    color: #fff;
    box-shadow: none;
}
.fb-btn--validate:hover { border-color: var(--fc-blue-deep); background: var(--fc-blue-deep); color: #fff; }

/* 보조 액션(스펙시트/견적서) — 검증하기(오렌지)와 장바구니(네이비) 사이의
   중립 톤. 두 개가 나란히 있어도 서로 경쟁하지 않도록 아웃라인으로. */
.fb-btn--outline { border-color: var(--fc-blue); background: #fff; color: var(--fc-blue); }
.fb-btn--outline:hover { background: var(--fc-blue); color: #fff; }

.fb-btn--document { justify-content: flex-start; border-color: #d7e1ed; background: #fff; color: var(--fc-blue); padding-inline: 16px; }
.fb-btn--document:hover { border-color: #aebfd3; background: #f3f7fb; color: var(--fc-blue-deep); }
.fb-btn--document > i:first-child { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #edf3fa; }
.fb-btn__arrow { margin-left: auto; color: #8ba0b8; font-size: 13px !important; }

.fb-btn--buy { border-color: var(--fc-blue); background: var(--fc-blue); color: #fff; }
.fb-btn--buy:hover { border-color: var(--fc-blue-deep); background: var(--fc-blue-deep); color: #fff; }

/* 장바구니에 담기 — 오렌지(검증하기)와 겹치지 않는 네이비 보조 CTA. */
.fb-btn--cart { border-color: #cbd8e6; background: #fff; color: var(--fc-blue); }
.fb-btn--cart:hover { border-color: var(--fc-blue); background: #f3f7fb; color: var(--fc-blue-deep); }

.fb-btn--light { min-height: 38px; border-radius: 999px; color: var(--fc-blue); background: #fff; padding: 6px 14px; }

.fb-btn--ghost {
    border-color: rgba(255,255,255,0.34);
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.fb-btn--ghost:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.16); box-shadow: none; }
.fb-btn--ghost i { margin-right: 6px; }

/* 스펙시트/견적서의 문서 작업 버튼 기본형. */
.btn {
    min-height: 52px;
    border: 1.5px solid var(--fc-line);
    border-radius: var(--fb-radius-sm);
    background: #fff;
    color: var(--fc-blue);
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.btn--primary { border-color: var(--fc-orange); background: var(--fc-orange); color: #fff; }
.btn--primary:hover { background: var(--fc-orange-deep); border-color: var(--fc-orange-deep); }

/* ============================================================
   반응형 — 사이트 자체 기준 브레이크포인트(1200px/900px/600px)에
   맞춘 3단. 예전엔 고정폭(280/320px) + 고정 마진(150px) 핵을
   보정하려 1600/1280/1100/900/560의 5단이 필요했지만, 지금은 폭을
   사이트 공통 --fc-page 토큰이 반응형으로 처리하고 컬럼도
   clamp()라서 더 단순해졌다.
   ============================================================ */
@media (max-width: 1200px) {
    .hose-stage { --stage-col: minmax(180px, 220px); }
}

@media (max-width: 900px) {
    .builder-header { padding: 28px 24px; }

    .builder-specbar__head { grid-template-columns: 1fr; gap: 18px; }
    .builder-specbar__flow { width: 100%; min-width: 0; }

    .builder-panel { padding: 16px; }

    /* 모바일: 조립 미리보기와 후보 목록, 선택 사양을 읽기 순서대로 세로 배치한다. */
    .hose-stage { min-height: 0; padding: 22px; gap: 16px; }
    .hose-assembly,
    .hose-candidates { grid-template-columns: 1fr; gap: 16px; }

    .drop-zone { min-height: 140px; }
    .drop-zone.has-part .drop-zone__thumb { height: 180px; }
    .hose-body { min-height: 140px; transform: none; }
    .hose-body__visual { width: 100%; margin-inline: 0; transform: none; }
    .hose-body__image { width: 100%; margin-left: 0; }
    .hose-body__image[data-part-code^="A-"] { width: 100%; margin-left: 0; }
    .connector-list { height: auto; max-height: 220px; }

    .builder-results { grid-template-columns: 1fr; }
    .flange-grid { grid-template-columns: 1fr; }
    .name-tag-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .builder-header h1 { font-size: 28px; }
    .builder-lead { font-size: 15px; }
    .customer-card__grid { grid-template-columns: 1fr; }
    .customer-card__grid .field--full { grid-column: auto; }
    .validation-box { align-items: stretch; flex-direction: column; }
    .fb-btn--validate { width: 100%; }
    .action-sections { padding: 18px; }
    .name-tag-panel__heading { align-items: flex-start; flex-direction: column; }
    .name-tag-grid { grid-template-columns: 1fr; }
    .pressure-modal { padding: 12px; }
    .pressure-modal__dialog { padding: 24px 18px; border-radius: 14px; }
    .document-modal { padding: 0; }
    .document-modal__dialog { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
    .document-modal__header { min-height: 78px; padding: 14px 14px 13px 18px; }
    .document-modal__header h2 { font-size: 19px; }
    .document-modal__header p { display: none; }
    .builder-specbar { padding: 0 18px 20px; }
    .builder-specbar__head { margin: 0 -18px 20px; padding: 20px 18px 18px; }
    .builder-specbar__flow { grid-template-columns: 1fr; }
    .builder-specbar__flow li { padding: 8px 0 10px; border-left: 0; border-bottom: 1px solid #dfe6ec; }
    .builder-specbar__flow li:last-child { border-bottom: 0; }
    .builder-specbar__flow li:after { display: none; }
    .builder-specbar__flow b,.builder-specbar__flow span { display: inline; }
    .builder-specbar__flow b { margin-right: 8px; }
    .builder-specbar__options-head { align-items: flex-start; flex-direction: column; gap: 5px; }
    .builder-specbar__fields { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .drop-zone, .connector-card, .fb-btn { transition: none; }
}

/* ============================================================
   스펙시트 / 견적서 미리보기 (PDF) — 기존 그대로 유지
   ============================================================ */
:root {
    /* 위 빌더 UI는 전부 사이트 공통 --fc-blue(#16427d)를 쓰도록 정리했지만,
       PDF 미리보기(quote.template.php/spec.template.php, 아래 섹션)는
       이번 리디자인 범위 밖이라 원래 쓰던 --fc-blue-dark 값을 그대로
       유지한다(값 자체는 예전 이 파일의 로컬 :root 정의와 동일). */
    --fc-blue-dark: #0c2c57;
}

.document-preview-page {
    background: #f1f6fb;
    padding: 12px 20px 24px;
}

.document-shell {
    max-width: min(90vw, 1180px);
    margin: 0 auto;
    padding: 34px;
    border: 1px solid #d7e5f2;
    border-radius: 8px;
    background: #fff;
    color: #17212f;
    box-shadow: 0 24px 70px rgba(18,55,94,0.10);
}

.document-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.document-actions a { text-decoration: none; }
.document-preview-toolbar { display: flex; width: 210mm; max-width: 100%; margin: 0 auto 8px; gap: 8px; justify-content: flex-end; }
.document-preview-toolbar a { text-decoration: none; }
.document-preview-toolbar .btn--email { border-color: #f47a20; background: #f47a20; color: #fff; }
.document-preview-toolbar .btn--email:hover { border-color: #dc6510; background: #dc6510; color: #fff; }
.document-preview-toolbar .btn--email:disabled { opacity: .62; cursor: wait; }
.document-preview-toolbar__status { align-self: center; margin: 0 4px 0 0; color: #53697d; font-size: 12px; line-height: 1.45; word-break: keep-all; overflow-wrap: break-word; }
.document-preview-page .document-shell > .document-actions { display: none; }

/* 문서 미리보기는 사이트 공통 테마 CSS를 불러오지 않으므로 --fc-* 변수에
   의존하지 않고 여기서 버튼의 크기와 색상을 완결한다. */
.document-preview-toolbar .btn,
.document-actions .btn {
    display: inline-flex;
    min-width: 108px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border: 1px solid #16427d;
    border-radius: 8px;
    background: #fff;
    color: #16427d;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(22,66,125,.08);
    cursor: pointer;
}

.document-preview-toolbar .btn--secondary:hover,
.document-actions .btn--secondary:hover { background: #eef4fb; color: #0c2c57; }
.document-preview-toolbar .btn--primary,
.document-actions .btn--primary { border-color: #16427d; background: #16427d; color: #fff; }
.document-preview-toolbar .btn--primary:hover,
.document-actions .btn--primary:hover { border-color: #0c2c57; background: #0c2c57; color: #fff; }

.document-header {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--fc-blue-dark);
}

.document-kicker {
    margin: 0 0 6px;
    color: var(--fc-orange);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.document-header h1 { margin: 0; color: var(--fc-blue-dark); font-size: 30px; font-weight: 950; }

.document-header dl {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 6px 10px;
    margin: 0;
    font-size: 13px;
}

.document-header dt { color: #64748b; font-weight: 700; }
.document-header dd { margin: 0; text-align: right; }

.document-section { margin-top: 22px; }
.document-section h2 { margin: 0 0 10px; font-size: 16px; }
.document-section p { margin: 4px 0; line-height: 1.55; }

.document-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.document-strong { font-weight: 700; }

.document-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.document-table th,
.document-table td { border: 1px solid #d8e0ea; padding: 9px 10px; vertical-align: top; }
.document-table th { width: 32%; background: #f3f6fa; color: #344256; text-align: left; }

.quote-table th,
.quote-table td { text-align: right; }
.quote-table th:first-child,
.quote-table td:first-child,
.quote-table th:nth-child(2),
.quote-table td:nth-child(2) { text-align: left; }
.quote-table thead th { background: #17212f; color: #fff; }

.document-assembly {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(220px, 2fr) minmax(120px, 1fr);
    gap: 12px;
    align-items: center;
    padding: 18px;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    background: #f8fafc;
    text-align: center;
}

.document-assembly span { padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }
.document-assembly strong { padding: 14px; border-radius: 999px; background: #263241; color: #fff; }

.document-list { margin: 0; padding-left: 20px; }
.document-list li { margin: 6px 0; line-height: 1.5; }

.document-footer {
    display: grid;
    gap: 4px;
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid #d8e0ea;
    color: #526071;
    font-size: 12px;
}

/* 원본 엑셀의 Specification/Quotation 양식을 기준으로 한 A4 업무 문서. */
.fc-form-document { width: 210mm; min-height: 297mm; max-width: 210mm; box-sizing: border-box; padding: 10mm 14mm 14mm; border-radius: 0; color: #17212f; font-size: 11px; }
.fc-doc-brand { display: grid; grid-template-columns: 90px 1fr 270px; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 3px solid #16427d; }
.fc-doc-brand__mark { display: grid; place-items: center; width: 86px; height: 50px; overflow: hidden; background: transparent url('/img/flowcomps-logo.png') center / contain no-repeat; color: transparent; font-size: 0; }
.fc-doc-brand__mark img { display: block; width: 86px; height: 46px; object-fit: contain; }
.fc-doc-brand h1 { margin: 0 0 5px; color: #123a6b; font-size: 20px; }
.fc-doc-brand p { margin: 0; color: #59697d; font-size: 10px; }
.fc-doc-brand address { color: #4b5b6e; font-size: 10px; font-style: normal; line-height: 1.55; text-align: right; }
.fc-doc-meta { width: 100%; margin-top: 14px; border-collapse: collapse; table-layout: fixed; }
.fc-doc-meta th,.fc-doc-meta td { border: 1px solid #718094; padding: 5px 7px; line-height: 1.3; vertical-align: middle; }
.fc-doc-meta th { width: 12%; background: #eaf0f7; color: #183b65; text-align: center; }
.fc-doc-meta td { width: 38%; }
.fc-doc-titlebar { margin-top: 12px; padding: 8px 12px; border-left: 5px solid #f07a24; background: #f2f5f8; }
.fc-doc-titlebar span { color: #f07a24; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.fc-doc-titlebar h2 { margin: 3px 0; color: #142c49; font-size: 18px; }
.fc-doc-titlebar p { margin: 0; color: #637083; font-size: 10px; }
.fc-doc-block { margin-top: 10px; }
.fc-doc-block h3 { margin: 0 0 7px; padding-bottom: 5px; border-bottom: 1px solid #8d9baa; color: #173f70; font-size: 13px; }
.fc-doc-product-summary { min-height: 28px; padding: 8px 10px; border: 1px solid #c2ccd7; line-height: 1.55; }
.fc-doc-spec-table th { width: 24%; background: #eaf0f7; color: #183b65; }
.fc-doc-spec-table td { width: 76%; }
.fc-doc-spec-table th,.fc-doc-spec-table td { padding: 5px 7px; }
.fc-doc-assembly { display: grid; grid-template-columns: 180px minmax(0,1fr) 180px; grid-template-rows:auto 54px; gap:7px 12px; align-items:center; min-height:118px; padding:16px 12px 30px; border:1px solid #aeb9c5; }
.fc-doc-assembly>tbody,.fc-doc-assembly>tbody>tr { display:contents; }
.fc-doc-assembly td { padding:0; border:0; }
.fc-doc-connector:first-child { grid-column:1; grid-row:2; }
.fc-doc-connector--right { grid-column:3; grid-row:2; }
.fc-doc-hose-group { display:contents; }
.fc-doc-hose-axis-spacer { display:none; }
.fc-doc-dimension-cell { grid-column:1 / 4; grid-row:1; width:100%!important; padding:0 64px; box-sizing:border-box; caption-side:top; }
.fc-doc-dimension-cell--left-hole { padding-left:101px!important; }
.fc-doc-dimension-cell--right-hole { padding-right:96px!important; }
.fc-doc-dimension { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; width:100%; margin:0; color:#173f70; font-size:9px; text-align:center; }
.fc-doc-dimension strong { white-space:nowrap; }
.fc-doc-dimension__line { position:relative; display:block; height:1px; overflow:visible; border-top:1px solid #718094; color:#718094; font-size:8px; line-height:1px; }
.fc-doc-dimension__line--left { text-align:left; }
.fc-doc-dimension__line--right { text-align:right; }
.fc-doc-dimension small { font-size:8px; font-weight:700; }
.fc-doc-connector { position:relative; z-index:1; min-width:0; height:54px; text-align:center; transform:none; }
.fc-doc-connector img { display: block; width: 100%; height: 54px; object-fit: contain; }
.fc-doc-connector:first-child img { object-position: right center; }
.fc-doc-connector span { position: absolute; top: 60px; left: 0; right: 0; display: block; margin: 0; color: #34465a; font-size: 9px; line-height: 1.2; text-align: center; }
.fc-doc-connector--right img { object-position: left center; transform: none; }
.fc-doc-hose-line { position:relative; z-index:1; grid-column:2; grid-row:2; width:100%; height:54px; margin-inline:0; overflow:visible; border:0; border-radius:0; background:transparent; }
.fc-doc-connector,
.fc-doc-hose-line { align-self:center; }
.fc-doc-hose-line img { display: block; width: 100%; max-width: none; height: 100%; margin-left: 0; border-radius: 0; background: #fff; object-fit: contain; }
.fc-doc-hose-line img[data-part-code^="A-"] { width: 100%; margin-left: 0; object-fit: contain; }
.fc-doc-notice ul,.fc-quote-terms ul { margin: 0; padding-left: 18px; }
.fc-doc-notice li,.fc-quote-terms li { margin: 4px 0; line-height: 1.45; }
.fc-doc-sign { display: flex; justify-content: space-between; align-items: end; margin-top: 22px; padding-top: 10px; border-top: 1px solid #9aa8b6; }
.fc-doc-sign p { margin: 0; }
.fc-doc-sign__logo { display: block; width: 94px; height: auto; }
.fc-quote-heading { display: grid; grid-template-columns: 90px 1fr 280px; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 3px double #243c59; }
.fc-quote-heading h1 { margin: 0; color: #111d2b; font-size: 28px; text-align: center; }
.fc-quote-company { display: grid; gap: 3px; color: #4a596b; font-size: 9px; text-align: right; }
.fc-quote-company strong { color: #173f70; font-size: 16px; }
.fc-quote-items { margin-top: 16px; table-layout: fixed; }
.fc-quote-items th,.fc-quote-items td { text-align: center; }
.fc-quote-items thead th { width: auto; background: #dfe8f2; color: #173f70; }
.fc-quote-items thead th:nth-child(1) { width: 5%; }.fc-quote-items thead th:nth-child(2) { width: 40%; }.fc-quote-items thead th:nth-child(3) { width: 16%; }
.fc-quote-items tbody td:nth-child(2) { text-align: left; line-height: 1.55; }
.fc-quote-empty td { height: 50px; color: #778496; }
.fc-quote-items tfoot th { background: #edf2f7; text-align: right; }
.fc-quote-total th,.fc-quote-total td { color: #b20d18; font-weight: 900; }
.fc-quote-terms { min-height: 90px; padding: 12px; border: 1px solid #c3cdd8; background: #f8fafc; }
.fc-quote-footer { display: grid; gap: 4px; margin-top: 20px; padding-top: 12px; border-top: 2px solid #173f70; color: #526174; font-size: 10px; text-align: right; }
.fc-quote-footer strong { color: #173f70; font-size: 15px; }
.fc-quotation-v1 .fc-quote-heading { display: block; width: 100%; padding-bottom: 16px; border-bottom: 3px double #173f70; text-align: center; }
.fc-quote-heading-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fc-quote-heading-table td { border: 0; vertical-align: middle; }
.fc-quote-heading-table td:first-child { width: 220px; }.fc-quote-heading-table td:last-child { width: 220px; }
.fc-quotation-v1 .fc-quote-heading h1 { font-size: 34px; letter-spacing: .08em; }
.fc-quote-docno { display: grid; gap: 5px; color: #526174; font-size: 11px; text-align: right; }
.fc-quote-docno span { color: #f07a24; font-weight: 900; letter-spacing: .12em; }
.fc-quote-docno strong { color: #173f70; font-size: 13px; }
.fc-quote-company-panel { width: 100%; margin-top: 12px; border: 1px solid #718094; border-collapse: collapse; table-layout: fixed; }
.fc-quote-company-panel > tbody > tr > td { padding: 14px; border: 0; vertical-align: top; }
.fc-quote-company-panel__brand { width: 176px; }
.fc-quote-company-name { text-align: center; }
.fc-quote-company-name img { display: block; width: 148px; height: auto; margin: 0 auto; }
.fc-quote-slogan { margin: 0 0 12px; color: #111; font-size: 14px; font-style: italic; font-weight: 800; line-height: 1.2; text-align: center; white-space: nowrap; }
.fc-quote-slogan .fc-quote-slogan__red { color: #ed1c24 !important; }
.fc-quote-slogan .fc-quote-slogan__blue { color: #0054a6 !important; }
.fc-quote-company-detail table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fc-quote-company-detail th,.fc-quote-company-detail td { padding: 5px 7px; border: 0; text-align: left; }
.fc-quote-company-detail__label { width: 14%; }
.fc-quote-company-detail__value { width: 39%; }
.fc-quote-company-detail__value-right { width: 33%; }
.fc-quote-company-detail th { width: auto; color: #173f70; font-weight: 800; white-space: nowrap; }
.fc-quote-company-detail .fc-quote-address { white-space: nowrap; }
.fc-quote-company-detail .fc-quote-confirm { position: relative; height: 30px; padding-right: 36px; text-align: left; white-space: nowrap; }
.fc-quote-confirm strong { font-size: 14px; white-space: nowrap; }
.fc-quote-confirm img { position: absolute; right: 4px; top: -4px; width: 30px; height: 30px; opacity: .78; }
.fc-quotation-v1 .fc-quote-meta { margin-top: 12px; }
.fc-quotation-v1 .fc-quote-meta__label-left { width: 12%; }
.fc-quotation-v1 .fc-quote-meta__value-left { width: 34%; }
.fc-quotation-v1 .fc-quote-meta__label-right { width: 17%; }
.fc-quotation-v1 .fc-quote-meta__value-right { width: 37%; }
.fc-quotation-v1 .fc-quote-meta th { width: auto; white-space: nowrap; }
.fc-quotation-v1 .fc-quote-items { margin-top: 14px; }
.fc-quotation-v1 .fc-quote-items thead th { background: #dce8f3; }
.fc-quotation-v1 .fc-quote-items tbody tr:first-child td { min-height: 58px; }
.fc-quote-handled { margin-top: 14px; padding: 12px 15px; border: 1px solid #aeb9c5; }
.fc-quote-handled h3 { margin: 0 0 7px; color: #173f70; font-size: 13px; }
.fc-quote-handled ul { margin: 0; padding-left: 18px; color: #526174; font-size: 10px; line-height: 1.55; }
.fc-quotation-v1 .fc-quote-terms { min-height: 0; margin-top: 10px; }
.fc-quotation-v1 .fc-quote-footer { margin-top: 12px; }

@media (max-width: 760px) {
    .document-preview-page { padding: 12px; }
    .document-shell { padding: 18px; }

    .document-header,
    .document-two-col,
    .document-assembly { grid-template-columns: 1fr; }

    .document-header dd { text-align: left; }

    .quote-table { display: block; overflow-x: auto; }
    .fc-doc-brand,.fc-quote-heading { grid-template-columns: 90px 1fr; }
    .fc-doc-brand address,.fc-quote-company { grid-column: 1 / -1; text-align: left; }
    .fc-doc-assembly { grid-template-columns: 1fr; gap: 18px; }
    .fc-doc-connector--right img { transform: none; }
    .fc-doc-meta { font-size: 10px; }
    .fc-doc-meta th,.fc-doc-meta td { padding: 6px; overflow-wrap: anywhere; }
    .fc-quote-items { display: table; min-width: 720px; }
    .fc-form-document { overflow-x: auto; }
}

@page { size: A4 portrait; margin: 12mm; }

@media print {
    body,
    .document-preview-page { background: #fff; padding: 0; }

    .document-shell,
    .fc-form-document {
        width: 100% !important;
        min-height: 0;
        max-width: 100% !important;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
    }
    .document-preview-toolbar { display: none; }
    .document-actions { display: none; }

    /* 모바일 미디어 규칙의 720px 최소 폭과 overflow-x:auto가 브라우저 인쇄에도
       남으면 A4 오른쪽이 잘리고 스크롤바가 출력된다. 인쇄에서는 가용 폭 100%로
       고정하고 7개 열을 명시적으로 배분한다. */
    .fc-form-document { overflow: visible !important; font-size: 8.5pt; }

    /* 인쇄 미리보기의 가상 viewport가 760px 이하인 브라우저에서도 위의 모바일
       2열 규칙을 사용하지 않는다. A4용 견적서 헤더는 항상 로고/제목/회사정보
       3열로 유지한다. */
    .fc-quote-heading {
        display: grid !important;
        grid-template-columns: 28mm minmax(0, 1fr) 64mm !important;
        gap: 3mm !important;
        align-items: center !important;
    }
    .fc-quote-company {
        grid-column: auto !important;
        text-align: right !important;
    }
    .fc-doc-brand__mark {
        display: grid !important;
        width: 26mm !important;
        height: 14mm !important;
        place-items: center !important;
        overflow: visible !important;
        background: none !important;
    }
    .fc-doc-brand__mark img {
        display: block !important;
        width: 26mm !important;
        height: 14mm !important;
        object-fit: contain !important;
    }
    .fc-doc-brand {
        display: grid !important;
        grid-template-columns: 28mm minmax(0, 1fr) 58mm !important;
        gap: 3mm !important;
        align-items: center !important;
    }
    .fc-doc-brand address {
        grid-column: auto !important;
        text-align: right !important;
    }
    .fc-doc-assembly {
        display: grid !important;
        grid-template-columns: 42mm minmax(0, 1fr) 42mm !important;
        gap: 3mm !important;
        align-items: center !important;
        min-height: 31mm !important;
        padding: 3mm !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .fc-doc-connector {
        min-width: 0 !important;
        height: 14mm !important;
        align-self: center !important;
        transform: none !important;
    }
    .fc-doc-connector img,
    .fc-doc-hose-line {
        width: 100% !important;
        height: 14mm !important;
        max-width: 100% !important;
    }
    .fc-doc-hose-group { align-self: center !important; min-width: 0 !important; }
    .fc-doc-dimension { margin: 0 0 1.5mm !important; }
    .fc-doc-hose-line img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    .fc-doc-meta { font-size: 8pt !important; }
    .fc-doc-meta th,
    .fc-doc-meta td { padding: 1.3mm 1.8mm !important; }
    .fc-quote-items {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    .fc-quote-items th,
    .fc-quote-items td {
        padding: 4px 3px !important;
        font-size: 7.5pt !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    .fc-quote-items th:nth-child(1),.fc-quote-items td:nth-child(1) { width: 5% !important; }
    .fc-quote-items th:nth-child(2),.fc-quote-items td:nth-child(2) { width: 37% !important; }
    .fc-quote-items th:nth-child(3),.fc-quote-items td:nth-child(3) { width: 15% !important; }
    .fc-quote-items th:nth-child(4),.fc-quote-items td:nth-child(4) { width: 7% !important; }
    .fc-quote-items th:nth-child(5),.fc-quote-items td:nth-child(5) { width: 7% !important; }
    .fc-quote-items th:nth-child(6),.fc-quote-items td:nth-child(6) { width: 14% !important; }
    .fc-quote-items th:nth-child(7),.fc-quote-items td:nth-child(7) { width: 15% !important; }

    .document-table th {
        background: #f1f3f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .quote-table thead th,
    .document-assembly strong {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}