/* ─────────────────────────────────────────────────────────────────────
   design-request.css — Phase 3 (2026-05-14)
   /factoryb/design-request.php 전용 스타일.
   - 카테고리 선택 화면 (cat 미지정)
   - 옵션 입력 화면 (cat 지정 시 좌우 2단 + sticky 견적 패널)

   폰트 스타일은 preview.php / list.php 와 동일하게 통일.
   - body: Pretendard, 14px, color #333
   - 카드/패널 제목: 16px 600
   - 페이지 타이틀: 24px 300 (preview.php .page-title 와 동일)
   - 보조 텍스트: 13px #666 / 12px #888
   ───────────────────────────────────────────────────────────────────── */

/* 펙토리B 표준 콘텐츠 너비 1000px + 가운데 정렬 (.page-wrap 과 동일). */
.dr-wrap {
    width: min(1000px, calc(100% - 48px));
    margin: 0 auto;
    padding: 0 0 80px;
    box-sizing: border-box;
    font-family: Pretendard, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fb-color_text_primary, #333);
}
.dr-breadcrumb { font-size: 14px; color: var(--fb-color_text_secondary, #666); padding-top: 20px; margin-bottom: 12px; }
.dr-breadcrumb a { color: var(--fb-color_text_secondary, #666); text-decoration: none; }
.dr-breadcrumb a:hover { color: var(--request-ink); }
.dr-breadcrumb-sep { margin: 0 6px; color: #ccc; }
.dr-breadcrumb-current { color: var(--fb-color_text_primary, #333); font-weight: 500; }

/* preview.php .page-title 와 동일: 24px / 300 / line-height 120% / padding 30px 0 10px */
.dr-page-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 120%;
    color: var(--fb-color_text_primary, #333);
    padding: 30px 0 10px;
    margin: 0;
}
.dr-page-sub {
    font-size: 14px;
    color: var(--fb-color_text_secondary, #666);
    margin: 0 0 32px;
    line-height: 1.6;
}

/* ── 카테고리 선택 그리드 (cat 미지정) ── */
.dr-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}
.dr-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 16px;
    background: #fff;
    border: 1px solid var(--fb-color_border, #e5e5e5);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.dr-cat-card:hover {
    border-color: var(--request-ink);
    box-shadow: none;
    transform: none;
}
.dr-cat-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
    color: var(--request-ink);
}
/* preview.php 카드 제목과 동일: 16px 600 */
.dr-cat-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--fb-color_text_primary, #333);
    margin-bottom: 4px;
}
.dr-cat-price {
    font-size: 14px;
    color: var(--fb-color_text_secondary, #666);
}

/* ── 옵션 입력 화면 (cat 지정 시) ──
   preview.php 의 .content-area (flex, gap:20) + .content-right (320px) 와 동일 비율. */
.dr-form-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}
.dr-form-main {
    flex: 1;
    min-width: 0;
}
.dr-form-side {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
}

/* 옵션 그룹 카드 — preview.php 옵션 카드와 통일 */
.dr-opt-group {
    background: #fff;
    border: 1px solid var(--fb-color_border, #e5e5e5);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.dr-opt-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--fb-color_text_primary, #333);
    margin-bottom: 12px;
    line-height: 1.2;
}
.dr-opt-required {
    font-size: 14px;
    background: #ffe5e5;
    color: #c00;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 500;
}
.dr-opt-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dr-opt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--fb-color_border, #ddd);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    color: var(--fb-color_text_primary, #333);
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
    user-select: none;
}
.dr-opt-chip:hover { border-color: var(--request-ink); }
.dr-opt-chip.is-selected {
    background: var(--request-ink);
    border-color: var(--request-ink);
    color: #fff;
    font-weight: 600;
}
/* preview.php 의 보조 텍스트(.qty-per-unit) 와 동일: 12px / #999 */
.dr-opt-chip-delta {
    font-size: 14px;
    color: #999;
    font-weight: 400;
}
.dr-opt-chip.is-selected .dr-opt-chip-delta { color: rgba(255,255,255,0.9); }
.dr-opt-chip.is-quote {
    border-style: dashed;
    color: var(--fb-color_text_secondary, #666);
}
.dr-opt-chip.is-quote.is-selected {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

/* 요청 텍스트 / 첨부파일 */
.dr-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid var(--fb-color_border, #ddd);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
    font-family: inherit;
    color: var(--fb-color_text_primary, #333);
    resize: vertical;
    box-sizing: border-box;
}
.dr-textarea:focus { border-color: var(--request-ink); outline: 0; }
.dr-textarea::placeholder { color: #aaa; }

.dr-file-zone {
    border: 1px dashed #ccc;
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    color: var(--fb-color_text_secondary, #666);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}
.dr-file-zone:hover { border-color: var(--request-ink); background: var(--request-stage); }
.dr-file-zone.is-disabled { opacity: 0.5; cursor: not-allowed; }
.dr-file-list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; color: #555; }
.dr-file-list li { display: flex; justify-content: space-between; padding: 4px 0; }
.dr-file-list a { color: var(--request-ink); text-decoration: none; cursor: pointer; }

/* ── 사진 업로드 (Phase 5) — 드래그&드롭 + progress + 썸네일 ── */
.dr-photo-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.dr-photo-slot {
    flex: 1 1 200px;
    min-width: 200px;
}
.dr-photo-side-label {
    font-size: 14px;
    color: var(--fb-color_text_secondary, #666);
    margin-bottom: 6px;
}
.dr-photo-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 16px;
    border: 1px dashed #c8d4e8;
    border-radius: 8px;
    background: #fafbfd;
    color: var(--fb-color_text_secondary, #666);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, transform 100ms ease;
}
/* 아이콘 → 텍스트 간격: gap 14px (전체) + text 와 hint 는 더 가깝게 그룹핑 */
.dr-photo-zone .dr-photo-zone-text + .dr-photo-zone-hint { margin-top: -8px; }
/* 옵션 칩 행 ↔ nested 업로드 영역 (사진/로고) 사이 여백 */
.dr-nested-section { margin-top: 12px; }
.dr-photo-zone:hover {
    border-color: var(--request-ink);
    background: var(--request-stage);
    color: var(--request-ink);
}
.dr-photo-zone.is-dragover {
    border-color: var(--request-ink);
    border-style: solid;
    background: var(--request-stage);
    color: var(--request-ink);
    transform: scale(1.02);
}
.dr-photo-zone-icon {
    color: #b0c0d8;
    transition: color 150ms ease;
}
.dr-photo-zone:hover .dr-photo-zone-icon,
.dr-photo-zone.is-dragover .dr-photo-zone-icon { color: var(--request-ink); }
.dr-photo-zone-text {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}
.dr-photo-zone-hint {
    font-size: 14px;
    color: #999;
}

/* 썸네일 미리보기 + 삭제 버튼 */
.dr-photo-preview {
    position: relative;
    border: 1px solid var(--fb-color_border, #e5e5e5);
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    aspect-ratio: 16 / 10;
}
.dr-photo-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.dr-photo-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    transition: background 150ms ease;
}
.dr-photo-remove:hover { background: rgba(0,0,0,0.8); }

/* 진행률 + 상태 텍스트 */
.dr-photo-status {
    margin-top: 8px;
    font-size: 14px;
}
.dr-photo-progress {
    height: 4px;
    background: #eee;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}
.dr-photo-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--request-ink);
    border-radius: 2px;
    transition: width 200ms ease, background 150ms ease;
}
.dr-photo-status-text {
    font-size: 14px;
    color: var(--fb-color_text_secondary, #666);
}
.dr-photo-status.is-uploading .dr-photo-status-text { color: var(--request-ink); }
.dr-photo-status.is-analyzing .dr-photo-progress-bar { background: #f0ad4e; }
.dr-photo-status.is-analyzing .dr-photo-status-text { color: #d97706; }
.dr-photo-status.is-done .dr-photo-progress-bar { background: #1a8754; }
.dr-photo-status.is-done .dr-photo-status-text { color: #1a8754; font-weight: 600; }
.dr-photo-status.is-error .dr-photo-progress-bar { background: #d9534f; }
.dr-photo-status.is-error .dr-photo-status-text { color: #d9534f; }

.dr-photo-hint {
    font-size: 14px;
    color: #888;
    margin-top: 12px;
    line-height: 1.6;
}

/* ── 우측 견적 패널 — preview.php 주문 패널과 동일 톤 ── */
.dr-quote {
    background: #fff;
    border: 1px solid var(--fb-color_border, #e5e5e5);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* 제목 — preview.php .order-summary-head 와 동일: padding 0 0 10px + border-bottom #f0f0f0 */
.dr-quote-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--fb-color_text_primary, #333);
    margin: 0 0 0;
    padding: 0 0 10px;
    border-bottom: 1px solid #f0f0f0;
}
/* 행 — preview.php .order-detail-row 와 동일: border-bottom #ededed + padding 12px 4px.
   외부 /card/css.css 의 글로벌 * { font-size:12px } 룰이 자식 span 에 우선 적용되므로
   각 요소에 font-size 명시 (그렇지 않으면 부모 13px 가 상속되지 않음). */
.dr-quote-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 12px 4px;
    color: var(--fb-color_text_primary, #333);
    border-bottom: 1px solid #ededed;
}
/* 마지막 행 (총금액 위 divider 직전) 은 border 제거 — divider 와 중복 방지 */
.dr-quote-row:has(+ .dr-quote-divider),
.dr-quote-row:last-child { border-bottom: 0; }
.dr-quote-row > span:first-child {
    font-size: 14px;
    font-weight: 400;
    color: var(--fb-color_text_primary, #333);
}
.dr-quote-row strong {
    font-size: 14px;
    color: var(--fb-color_text_primary, #333);
    font-weight: 600;
}
.dr-quote-row.is-discount,
.dr-quote-row.is-discount strong {
    color: #d9534f;
}
/* divider — 행과 총금액 사이 진한 구분선 (preview.php 합계 위 분리와 동일 톤) */
.dr-quote-divider {
    height: 1px;
    background: #ededed;
    margin: 0;
}
.dr-quote-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    padding: 14px 4px 4px;
    color: var(--fb-color_text_primary, #333);
}
.dr-quote-total > span:first-child {
    font-size: 14px;
    font-weight: 600;
    color: var(--fb-color_text_primary, #333);
}
.dr-quote-total-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--request-ink);
}
.dr-quote-total-amount.is-quote {
    font-size: 14px;
    color: var(--fb-color_text_secondary, #666);
    font-weight: 600;
}

.dr-submit-btn {
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    background: var(--request-ink);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 150ms ease, transform 100ms ease;
}
.dr-submit-btn:hover { background: var(--request-ink); }
.dr-submit-btn:active { transform: translateY(1px); }
.dr-submit-btn:disabled {
    background: #c2d4ec;
    cursor: not-allowed;
    transform: none;
}

/* 보조 안내 텍스트 — preview.php .qty-per-unit (12px / #999) 와 동일 톤 */
.dr-quote-note {
    font-size: 14px;
    color: #999;
    line-height: 1.6;
    margin-top: 10px;
}

/* Phase notice (placeholder 잔존물 — 다른 카테고리에 옵션 미정의 시) */
.dr-phase-notice {
    margin: 24px 0;
    padding: 24px;
    background: #fafafa;
    border: 1px dashed #ccc;
    border-radius: 8px;
    text-align: center;
}
.dr-phase-notice-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--fb-color_text_primary, #333);
    margin-bottom: 8px;
}
.dr-phase-notice-desc {
    font-size: 14px;
    color: var(--fb-color_text_secondary, #666);
    line-height: 1.7;
}

/* Request flow: sections have one structural divider; controls own their border. */
.dr-wrap, .dr-wrap * { box-sizing: border-box; }
.dr-page-sub { font-size:16px; line-height:1.6; max-width:660px; color:var(--request-muted); }
.dr-opt-group { border:0; border-bottom:1px solid var(--request-line); border-radius:0; padding:24px 0; margin:0; }
.dr-opt-group:first-child { padding-top:0; }
.dr-opt-label { font-size:16px; line-height:1.5; color:var(--request-ink); margin-bottom:12px; }
.dr-opt-required { background:none; color:var(--request-muted); padding:0; font-size:14px; }
.dr-opt-group summary, .dr-quote-details summary { display:flex; align-items:center; gap:8px; min-height:44px; font-size:16px; font-weight:600; line-height:1.5; cursor:pointer; list-style:none; color:var(--request-ink); }
.dr-opt-group summary::-webkit-details-marker, .dr-quote-details summary::-webkit-details-marker { display:none; }
.dr-opt-group summary::after, .dr-quote-details summary::after { content:''; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); flex-shrink:0; margin:0 4px; }
.dr-opt-group[open] summary::after, .dr-quote-details[open] summary::after { transform:rotate(225deg); }
.dr-opt-group summary [data-dr-summary] { margin-left:auto; max-width:60%; text-align:right; color:var(--request-muted); font-size:14px; font-weight:400; }
.dr-opt-group[open] summary { margin-bottom:16px; }
.dr-option-details { padding:12px 0; }
.dr-photo-slot { min-width:0; }
.dr-photo-zone { padding:20px 12px; gap:12px; background:var(--request-stage); }
.dr-photo-zone-hint, .dr-photo-hint, .dr-quote-note { color:var(--request-muted); font-size:16px; line-height:1.6; }
.dr-photo-zone-text { font-size:15px; }
.dr-quote { border:1px solid var(--request-line); box-shadow:none; border-radius:8px; padding:24px; }

.dr-quote-details > summary { display:none; }
.dr-quote-title { font-size:16px; }
.dr-quote-row { word-break:keep-all; overflow-wrap:anywhere; gap:16px; padding:12px 0; align-items:flex-start; }
.dr-quote-row > span:first-child, .dr-quote-row strong { font-size:15px; line-height:1.5; }
.dr-quote-row strong { flex-shrink:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.dr-quote-total { padding:16px 0; gap:16px; }
.dr-quote-total-amount { font-size:24px; color:var(--request-ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.dr-submit-btn { margin-top:0; }
.dr-quote-note { margin-top:16px; }
.dr-cat-price { font-size:15px; }
@media(max-width:767px) {
    .dr-wrap { width:100%; padding:0 16px 200px; }
    .dr-page-title { font-size:24px; padding:24px 0 8px; }
    .dr-page-sub { margin-bottom:24px; }
    .dr-cat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .dr-cat-card { padding:24px 12px; }
    .dr-form-layout { display:block; }
    .dr-form-side { width:auto; position:fixed; inset:auto 0 0; z-index:1000; padding:12px 16px max(12px,env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--request-line); box-shadow:0 -4px 16px #1818170a; }
    .dr-quote { border:0; padding:0; border-radius:0; }
    .dr-quote-details { max-height:40dvh; overflow:auto; }
    .dr-quote-details > summary { display:flex; justify-content:space-between; min-height:32px; font-size:14px; }
    .dr-quote-details:not([open]) > :not(summary) { display:none; }
    .dr-quote-details .dr-quote-title { display:none; }
    .dr-quote-total { padding:8px 0 12px; }
    .dr-quote-note { display:none; }
    .dr-quote-details[open] ~ .dr-quote-note { display:block; }
    .dr-opt-group summary { flex-wrap:wrap; }
    .dr-opt-group summary [data-dr-summary] { flex:1; }
    .dr-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dr-photo-zone-text { font-size:14px; }
    .dr-photo-zone-hint { font-size:14px; overflow-wrap:anywhere; }
}

.dr-fixed-option{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-size:16px;color:var(--request-ink)}
.dr-fixed-option strong{font-size:16px;font-weight:500}
.dr-option-details summary:focus-visible{outline:2px solid var(--request-ink);outline-offset:4px;border-radius:4px}

.dr-photo-grid.is-single{grid-template-columns:minmax(0,1fr)}