/* ============================================================
   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 {
    padding: 26px 28px;
    border: 1px solid var(--fc-line);
    border-radius: var(--fb-radius);
    background: #fff;
    box-shadow: var(--fb-shadow);
}

.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;
    margin-bottom: 10px;
    color: var(--fc-ink);
    font-size: 13px;
    font-weight: 800;
}

.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: center;
    gap: 6px;
}

/* 후보 행 — 조립 행과 같은 3열 폭을 공유해 드롭존 바로 아래 정렬되고, 가운데
   칸은 빈 스페이서라 호스 본체 밑에는 아무것도 안 나온다. */
.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 {
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--fc-blue);
}

.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__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;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    min-height: 210px;
}

.hose-body__line {
    width: 100%;
    height: 76px;
    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 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 {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--fc-line);
    border-radius: var(--fb-radius);
    background: #fbfdff;
    box-shadow: var(--fb-shadow);
}

.validation-box strong { display: block; margin-bottom: 6px; color: var(--fc-blue); font-size: 16px; font-weight: 950; }
.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; }

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

.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);
}

/* ============================================================
   결과 영역 — 3열로 나누지 않고 위→아래로 전체 폭을 쓰며 흐른다
   (2026-07-20 재조정): 고객정보(가로 그리드) → 선택한 사양·예상가격·
   주의사항(가로 배치, 좁아지면 wrap) → 액션 버튼(맨 아래, 전체 폭 한 줄).
   ============================================================ */
.builder-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.flange-panel { background: var(--fc-bg); }
.flange-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.customer-card { padding: 0; overflow: hidden; }

.customer-card__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    background: var(--fc-bg);
    color: var(--fc-blue);
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 950;
    text-align: left;
    cursor: pointer;
}

.customer-card__toggle:hover { background: #eef1f5; }
.customer-card__chevron { font-size: 18px; line-height: 1; }

.customer-card__body { padding: 20px; border-top: 1px solid var(--fc-line); }

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

.customer-card__grid .field {
    flex: 1 1 200px;
    margin-bottom: 0;
}

.customer-card__grid .field--full { flex-basis: 100%; }

.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;
}

/* 선택한 사양 / 예상가격 / 주의사항 — 가로 한 줄에 나란히(좁아지면 wrap) */
.builder-results__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.builder-results__summary > * { flex: 1 1 280px; }

.summary-card h3 { color: var(--fc-blue); }
.summary-card dl { display: grid; grid-template-columns: 100px 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; }

.price-card { background: linear-gradient(180deg, #fff, var(--fc-bg)); }
.price-card span { color: var(--fc-blue); font-size: 13px; font-weight: 800; }
.price-card strong { display: block; margin-top: 4px; font-family: var(--fb-mono); color: var(--fc-orange); font-size: 30px; font-weight: 800; line-height: 1.1; }
.price-card p { margin: 6px 0 0; color: var(--fc-muted); font-size: 13px; }

.warning-box { 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; }

/* ============================================================
   액션 버튼 — 결과 영역 맨 아래, 전체 폭 한 줄. 예전엔 검증하기/
   장바구니만 50px+15px이고 스펙시트/견적서는 44px+14px에 테두리도
   거의 안 보이는 색이라 텍스트 링크처럼 보였다(지적받은 "폰트사이즈도
   다르고 올드하다" 문제). 지금은 4개 버튼 전부 같은 높이·폰트로
   맞추고, 아웃라인 버튼도 네이비 테두리를 또렷하게 줘서 확실히
   버튼으로 보이게 했다.
   ============================================================ */
.action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* ============================================================
   버튼 — 클래스명을 .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 {
    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;
}

.fb-btn:hover { border-color: var(--fc-blue); transform: translateY(-1px); box-shadow: var(--fb-shadow); }
.fb-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

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

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

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

.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; }

/* 스펙시트/견적서 인쇄 미리보기(quote.template.php/spec.template.php, "인쇄" 버튼 하나)는
   이번 리디자인 범위 밖이라 원래 쓰던 .btn/.btn--primary 클래스를 그대로 유지한다 —
   위와 같은 코어 충돌이 있지만 그 페이지는 손대지 않기로 한 범위라 원래 모습 그대로 둔다. */
.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-panel { padding: 16px; }

    /* 모바일: 사양 선택 바(위) → 조립 미리보기 → 결과 영역 순서는 DOM 순서 그대로 유지된다.
       조립 미리보기 안에서만 좌 드롭존 → 호스 바디 → 우 드롭존 순으로, 그 아래 좌 후보 →
       우 후보 순으로 세로 스택된다(가운데 스페이서 칸은 숨김). */
    .hose-stage { min-height: 0; padding: 22px; gap: 16px; }
    .hose-assembly,
    .hose-candidates { grid-template-columns: 1fr; gap: 16px; }
    .hose-candidates__spacer { display: none; }

    .drop-zone { min-height: 140px; }
    .drop-zone.has-part .drop-zone__thumb { height: 180px; }
    .hose-body { min-height: 140px; }
    .connector-list { max-height: 220px; }

    .flange-grid { grid-template-columns: 1fr; }
    .action-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .builder-header h1 { font-size: 28px; }
    .builder-lead { font-size: 15px; }
    .action-grid { grid-template-columns: 1fr; }
    .builder-specbar { padding: 18px; }
    .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: 28px;
}

.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;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.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 { max-width: 980px; padding: 22px; border-radius: 0; color: #17212f; font-size: 11px; }
.fc-doc-brand { display: grid; grid-template-columns: 58px 1fr 300px; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 3px solid #16427d; }
.fc-doc-brand__mark { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #b20d18; color: #fff; font-size: 19px; font-weight: 900; }
.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 1fr 180px; align-items: center; min-height: 118px; padding: 12px; border: 1px solid #aeb9c5; }
.fc-doc-connector { min-width: 0; text-align: center; }
.fc-doc-connector img { display: block; width: 100%; height: 62px; object-fit: contain; }
.fc-doc-connector span { display: block; margin-top: 5px; color: #34465a; font-size: 9px; }
.fc-doc-connector--right img { transform: none; }
.fc-doc-hose-line { position: relative; height: 28px; border-top: 8px double #596877; border-bottom: 8px double #596877; background: repeating-linear-gradient(135deg,#d4dbe2 0 3px,#738190 3px 5px); }
.fc-doc-hose-line span { position: absolute; top: -28px; left: 0; right: 0; color: #34465a; font-size: 9px; text-align: center; }
.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 strong { color: #b20d18; font-size: 17px; }
.fc-quote-heading { display: grid; grid-template-columns: 60px 1fr 310px; 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; }

@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: 48px 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; }
}

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

    .document-shell { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; }
    .document-actions { display: none; }

    .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;
    }
}