@charset "utf-8";

/* ══════════════════════════════════════════════
   과잠 주문 스킨 — Premium Varsity Design
   write.css  v2.0
══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Sora:wght@400;500;600;700;800&display=swap');

/* ── Design Tokens ── */
:root {
    --navy:          #0f172a;
    --navy-80:       #1e293b;
    --navy-60:       #334155;
    --amber:         #f59e0b;
    --amber-h:       #d97706;
    --amber-light:   #fef3c7;
    --amber-pale:    #fffbeb;

    --primary:       var(--navy-80);
    --primary-h:     var(--navy);
    --accent:        var(--amber);
    --success:       #10b981;
    --success-bg:    #ecfdf5;
    --danger:        #ef4444;
    --danger-bg:     #fef2f2;
    --warn:          #f97316;
    --warn-bg:       #fff7ed;

    --surface:       #ffffff;
    --bg:            #f8f7f4;
    --border:        #e8e5df;
    --text-primary:  #111827;
    --text-secondary:#6b7280;
    --text-muted:    #9ca3af;

    --radius-sm:     6px;
    --radius:        12px;
    --radius-lg:     18px;
    --radius-xl:     24px;

    --shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow:        0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
    --shadow-lg:     0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
    --shadow-amber:  0 4px 20px rgba(245,158,11,.25);

    --ease:          cubic-bezier(.4, 0, .2, 1);
    --duration:      .22s;
}

/* ══ 래퍼 ══════════════════════════════════════ */
.jacket-wrap {
    display: flex;
    gap: 28px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    font-family: 'Sora', 'Noto Sans KR', sans-serif;
    color: var(--text-primary);
}

/* ══ 스텝 인디케이터 ══════════════════════════ */
.step-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    overflow-x: auto;
    padding: 0 0 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0;
}
.step-indicator::-webkit-scrollbar { display: none; }

.step-indicator-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    min-width: 52px;
    cursor: pointer;
    transition: opacity var(--duration) var(--ease);
}
.step-indicator-item:not(.active):not(.done):hover { opacity: .7; }

.step-indicator-item::after {
    content: '';
    position: absolute;
    top: 15px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    height: 2px;
    background: var(--border);
    transition: background var(--duration) var(--ease);
}
.step-indicator-item:last-child::after { display: none; }
.step-indicator-item.done::after { background: var(--amber); }

.step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--bg);
    color: var(--text-muted);
    position: relative;
    z-index: 1;
    border: 2px solid var(--border);
    transition: all var(--duration) var(--ease);
}
.step-indicator-item.active .step-num {
    width: 34px;
    height: 34px;
    background: var(--navy-80);
    color: var(--amber);
    border-color: var(--navy-80);
    box-shadow: 0 0 0 4px rgba(245,158,11,.15), var(--shadow);
    font-size: 13px;
}
.step-indicator-item.done .step-num {
    background: var(--amber);
    color: var(--navy);
    border-color: var(--amber);
}

.step-label {
    font-size: 9.5px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 5px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: .2px;
    transition: color var(--duration) var(--ease);
}
.step-indicator-item.active .step-label { color: var(--navy-80); font-weight: 700; }
.step-indicator-item.done .step-label   { color: var(--amber-h); font-weight: 600; }

/* ══ 폼 패널 ══════════════════════════════════ */
.jacket-form-panel { flex: 1; min-width: 0; }

.step-content {
    display: none;
    background: var(--surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    padding: 36px 36px 28px;
    box-shadow: var(--shadow);
}
.step-content.active {
    display: block;
    animation: stepIn var(--duration) var(--ease) both;
}

@keyframes stepIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.step-title {
    font-family: 'DM Serif Display', 'Noto Sans KR', serif;
    font-size: 26px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -.4px;
    color: var(--navy);
    margin-bottom: 6px;
    line-height: 1.3;
}
.step-desc {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin-bottom: 32px;
    line-height: 1.6;
    font-weight: 400;
}

.section-divider {
    border: none;
    border-top: 1.5px solid var(--border);
    margin: 28px 0;
}
.section-subtitle {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy-60);
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-subtitle::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── 폼 요소 ── */
.form-group { margin-bottom: 22px; }

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
    letter-spacing: -.1px;
}
.form-label .badge-required { color: var(--danger); margin-left: 3px; }

.form-control {
    width: 100%;
    padding: 11px 15px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                background var(--duration) var(--ease);
    background: var(--bg);
    box-sizing: border-box;
    color: var(--text-primary);
    -webkit-appearance: none;
}
.form-control::placeholder { color: var(--text-muted); font-weight: 400; }
.form-control:hover  { border-color: #c5bfb2; background: #fff; }
.form-control:focus  { border-color: var(--amber); background: #fff; box-shadow: 0 0 0 3px rgba(245,158,11,.12); }
textarea.form-control { resize: vertical; min-height: 82px; line-height: 1.6; }

.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; line-height: 1.5; }

/* ── 색상 팔레트 ── */
.color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}
/* 2칸 1줄 팔레트 */
.color-palette.palette-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.color-palette.palette-2col .color-swatch {
    width: 100%;
    height: 44px;
    border-radius: 10px;
}
.color-swatch {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
    border: 2px solid rgba(255,255,255,.6);
    box-shadow: 0 1px 3px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.2);
}
.color-swatch:hover { transform: translateY(-2px) scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.color-swatch.selected { transform: translateY(-2px) scale(1.12); outline: 3px solid var(--amber); outline-offset: 2px; box-shadow: var(--shadow-amber); }
.color-swatch .swatch-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}
.color-swatch .swatch-tip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--navy);
}
.color-swatch:hover .swatch-tip { display: block; }

/* ── 선택 카드 ── */
.option-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.option-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    background: var(--bg);
    min-width: 140px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    user-select: none;
}
.option-card:hover { border-color: var(--amber); background: var(--amber-pale); color: var(--navy-80); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.option-card.selected { border-color: var(--amber); background: var(--amber-light); color: var(--navy); font-weight: 600; box-shadow: 0 0 0 1px var(--amber), var(--shadow-sm); }
.option-card input[type=radio],
.option-card input[type=checkbox] { display: none; }
.option-card-icon { font-size: 20px; line-height: 1; }

/* ── 파일 업로드 ── */
.file-upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    background: var(--bg);
    position: relative;
}
.file-upload-area:hover,
.file-upload-area.drag-over { border-color: var(--amber); background: var(--amber-pale); }
.file-upload-area input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.file-upload-icon { font-size: 38px; display: block; margin-bottom: 8px; }
.file-upload-text { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-top: 6px; }
.file-upload-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.file-preview { margin-top: 14px; }
.file-preview img { max-height: 110px; border-radius: 8px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.file-name-display { margin-top: 10px; padding: 7px 14px; background: var(--amber-pale); border: 1px solid var(--amber-light); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--navy-60); display: none; font-weight: 500; }
.file-name-display.show { display: block; }

/* ── 토글 섹션 ── */
.toggle-section { border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 10px; background: var(--surface); }
.toggle-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--bg); cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--text-primary); transition: background var(--duration) var(--ease); }
.toggle-header:hover { background: var(--amber-pale); }
.toggle-header input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--amber); }
.toggle-body { padding: 18px; display: none; border-top: 1.5px solid var(--border); animation: stepIn .2s var(--ease) both; }
.toggle-body.open { display: block; }

/* ── 네비게이션 버튼 ── */
.step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1.5px solid var(--border);
    gap: 12px;
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 26px;
    border-radius: var(--radius);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--duration) var(--ease);
    font-family: inherit;
    letter-spacing: -.1px;
}
.btn-primary { background: var(--navy-80); color: #fff; box-shadow: 0 2px 8px rgba(30,41,59,.3); }
.btn-primary:hover { background: var(--navy); box-shadow: 0 4px 14px rgba(30,41,59,.4); transform: translateY(-1px); }
.btn-outline { background: var(--surface); color: var(--text-secondary); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--navy-60); color: var(--text-primary); background: var(--bg); }
.btn-success { background: linear-gradient(135deg, #059669, #10b981); color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,.3); }
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(16,185,129,.4); }
.btn-warn { background: var(--warn); color: #fff; }
.btn-sm { padding: 8px 16px; font-size: 12px; border-radius: var(--radius-sm); }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ── 저장 상태 ── */
.save-status { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; font-weight: 500; }
.save-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: background var(--duration) var(--ease); }
.save-status.saved .dot  { background: var(--success); }
.save-status.saving .dot { background: var(--warn); animation: pulse .7s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ── 알림 박스 ── */
.alert-box { display: flex; gap: 12px; padding: 14px 18px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.6; border: 1.5px solid transparent; }
.alert-box.success { background: var(--success-bg); border-color: #a7f3d0; color: #065f46; }
.alert-box.warning { background: var(--warn-bg); border-color: #fed7aa; color: #9a3412; }
.alert-box.info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.info-box { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px 18px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* ── Step 6 ── */
.s6-section { padding: 18px 0; }
.s6-section-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ── Step 7 ── */
.s7-style-card { flex: 1; min-width: 200px; }

/* ── Step 1 전용 레이아웃 ── */
.s1-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}
.s1-info-grid .form-group { margin-bottom: 18px; }

/* 원단/실색 2컬럼 */
.s1-color-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    margin-bottom: 8px;
}

/* 색상 선택 블록 */
.color-picker-block {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.color-picker-block:last-child { border-bottom: none; }

.color-picker-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.color-picker-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

/* 선택된 색상 표시 바 */
.color-selected-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    margin-bottom: 10px;
    transition: border-color var(--duration) var(--ease);
}
.color-selected-dot {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid rgba(0,0,0,.12);
    background: #e0e0e0;
    flex-shrink: 0;
    display: none;
    transition: background var(--duration) var(--ease);
}
.color-selected-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    transition: color var(--duration) var(--ease);
}

/* 색상 팔레트 — step1에서는 좀 더 작게 */
.s1-color-grid .color-palette { gap: 5px; }
.s1-color-grid .color-swatch  { width: 28px; height: 28px; border-radius: 6px; }

@media (max-width: 640px) {
    .s1-info-grid  { grid-template-columns: 1fr; }
    .s1-color-grid { grid-template-columns: 1fr; }
}

/* ══ 미리보기 패널 ════════════════════════════ */
.jacket-preview-panel {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
    height: fit-content;
}
.preview-card {
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(180,185,210,0.5);
    box-shadow: 0 8px 32px rgba(30,50,100,0.10), 0 2px 8px rgba(30,50,100,0.06);
    padding: 22px;
    overflow: hidden;
    position: relative;
}
.preview-canvas-wrap {
    background: #f0f2f7;
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 2px;
}
.preview-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--amber), #fbbf24, var(--amber));
}
.preview-title {
    font-size: 11.5px;
    font-weight: 700;
    margin: 8px 0 14px;
    color: var(--navy-60);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.preview-toggle {
    display: flex;
    gap: 3px;
    margin-bottom: 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 3px;
}
.preview-toggle button {
    flex: 1;
    padding: 6px 4px;
    font-size: 11.5px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    font-family: inherit;
}
.preview-toggle button:hover { color: var(--text-primary); }
.preview-toggle button.active { background: var(--navy-80); color: var(--amber); box-shadow: var(--shadow-sm); }
#jacket-canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .25));
    background: transparent;
    border: none;
    box-sizing: border-box;
}
.preview-legend { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-secondary); font-weight: 500; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.08); }

/* ══ 요약 테이블 ══════════════════════════════ */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.summary-card {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
/* STEP 1은 길어서 2컬럼 전체 차지 */
.summary-card:first-child {
    grid-column: 1 / -1;
}
.summary-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.summary-table th { background: var(--surface); padding: 9px 14px; text-align: left; font-weight: 600; color: var(--navy-60); border-bottom: 1px solid var(--border); white-space: nowrap; width: 120px; font-size: 11.5px; letter-spacing: .2px; }
.summary-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); font-size: 13px; }
.summary-table tr:last-child th,
.summary-table tr:last-child td { border-bottom: none; }
/* 2열 테이블: th는 좁게, td는 넓게, 중간 구분선 */
.summary-table.two-col th { width: 110px; }
.summary-table.two-col td { width: auto; }
.summary-table.two-col .col-divider { width: 1px; background: var(--border); padding: 0; }
/* 그룹 구분선 */
.summary-group-sep td { padding: 6px 14px 4px; background: var(--surface); border-top: 2px solid var(--border); border-bottom: 1px solid var(--border); }
.summary-group-sep span { font-size: 10.5px; font-weight: 700; color: var(--navy-60); letter-spacing: .5px; text-transform: uppercase; }
.summary-section-title { font-size: 11px; font-weight: 700; padding: 11px 14px; color: var(--navy); letter-spacing: .7px; text-transform: uppercase; background: var(--navy-80); color: #fff; display: flex; align-items: center; gap: 6px; }
.summary-section-title::after { display: none; }
.color-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); font-size: 11.5px; font-weight: 500; }
.color-badge-dot { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); }

@media (max-width: 700px) {
    .summary-grid { grid-template-columns: 1fr; }
    .summary-card:first-child { grid-column: auto; }

    /* STEP 1 요약 2열 → 1열 전환 */
    .summary-table.two-col { display: block; }
    .summary-table.two-col tbody { display: block; }
    .summary-table.two-col tr.summary-group-sep { display: block; }
    .summary-table.two-col tr:not(.summary-group-sep) {
        display: grid;
        grid-template-columns: 100px 1fr 0 100px 1fr;
        border-bottom: 1px solid var(--border);
    }
    /* 모바일에서 오른쪽 열을 다음 줄로 내림 */
    .summary-table.two-col tr:not(.summary-group-sep) {
        grid-template-columns: 100px 1fr;
        grid-template-rows: auto auto;
    }
    .summary-table.two-col tr:not(.summary-group-sep) > th:nth-child(1) { grid-column:1; grid-row:1; }
    .summary-table.two-col tr:not(.summary-group-sep) > td:nth-child(2) { grid-column:2; grid-row:1; }
    .summary-table.two-col tr:not(.summary-group-sep) > .col-divider    { display:none; }
    .summary-table.two-col tr:not(.summary-group-sep) > th:nth-child(4) { grid-column:1; grid-row:2; border-top: 1px solid var(--border); }
    .summary-table.two-col tr:not(.summary-group-sep) > td:nth-child(5) { grid-column:2; grid-row:2; border-top: 1px solid var(--border); }
    /* 오른쪽이 비어있을 때(마지막 홀수 행) */
    .summary-table.two-col tr:not(.summary-group-sep) > th:nth-child(4):empty,
    .summary-table.two-col tr:not(.summary-group-sep) > td:nth-child(5):empty { display:none; }
}

/* ══ 로딩 오버레이 ════════════════════════════ */
.jacket-loading { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.6); backdrop-filter: blur(4px); z-index: 9999; align-items: center; justify-content: center; flex-direction: column; gap: 18px; color: #fff; font-size: 15px; font-weight: 600; }
.jacket-loading.show { display: flex; }
.spinner { width: 44px; height: 44px; border: 3px solid rgba(245,158,11,.3); border-top-color: var(--amber); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══ 토스트 ══════════════════════════════════ */
.jacket-toast { position: fixed; bottom: 28px; right: 28px; z-index: 9998; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast-item { padding: 12px 20px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; color: #fff; box-shadow: var(--shadow-lg); animation: toastIn .3s var(--ease) both; max-width: 320px; }
.toast-item.success { background: linear-gradient(135deg, #059669, #10b981); }
.toast-item.error   { background: linear-gradient(135deg, #dc2626, #ef4444); }
.toast-item.info    { background: linear-gradient(135deg, var(--navy), var(--navy-80)); border-left: 3px solid var(--amber); }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ══ 반응형 ═══════════════════════════════════ */
@media (max-width: 960px) {
    .jacket-wrap { flex-direction: column; gap: 20px; }
    .jacket-preview-panel { width: 100%; position: static; }
    #jacket-canvas { max-height: none; }
}
@media (max-width: 640px) {
    .jacket-wrap { padding: 16px 12px 48px; }
    .step-content { padding: 24px 20px 20px; }
    .option-cards { flex-direction: column; }
    .step-nav { flex-wrap: wrap; gap: 10px; }
    .step-title { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════
   직자수 실 팔레트 (embroidery thread color picker) — 414색
══════════════════════════════════════════════════════════════ */

/* 팔레트 루트 컨테이너 */
.emb-palette {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fdfdfc;
    overflow: hidden;
}

/* 검색 바 */
.emb-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.emb-search-input {
    flex: 1;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-family: inherit;
    background: #fff;
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--duration) var(--ease);
}
.emb-search-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,158,11,.12); }
.emb-search-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 52px;
    text-align: right;
}

/* 선택 현황 칩 */
.emb-selected-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    min-height: 38px;
}
.emb-selected-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.emb-selected-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.2px;
    transition: background .15s, color .15s;
    min-width: 60px;
    text-align: center;
    justify-content: center;
}
.emb-selected-chip.emb-no-sel {
    background: #f1f0ed;
    color: var(--text-muted);
}
.emb-selected-hex {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
    letter-spacing: .5px;
}

/* 스크롤 박스 */
.emb-scroll-box {
    max-height: 340px;
    overflow-y: auto;
    padding: 10px 12px 14px;
    scrollbar-width: thin;
    scrollbar-color: #d0cdc7 transparent;
}
.emb-scroll-box::-webkit-scrollbar { width: 5px; }
.emb-scroll-box::-webkit-scrollbar-thumb { background: #d0cdc7; border-radius: 3px; }

/* 색상 계열 그룹 */
.emb-group {
    margin-bottom: 10px;
}
.emb-group-title {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 0 5px;
    border-bottom: 1px solid #eeece8;
    margin-bottom: 6px;
}

/* 스와치 행 */
.emb-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 개별 스와치 */
.emb-swatch {
    width: 46px;
    height: 46px;
    border-radius: 7px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    border: 1.5px solid transparent;
    transition: transform .12s var(--ease), box-shadow .12s var(--ease), border-color .1s;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    user-select: none;
    flex-shrink: 0;
}
.emb-swatch.light {
    border-color: #d8d4cc;
}
.emb-swatch:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    z-index: 2;
}
.emb-swatch.selected {
    border-color: var(--amber) !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,.3), 0 4px 12px rgba(0,0,0,.15);
    transform: scale(1.1);
    z-index: 3;
}
.emb-swatch.selected::after {
    content: '✓';
    position: absolute;
    top: 3px;
    right: 4px;
    width: 13px;
    height: 13px;
    background: var(--amber);
    color: #fff;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 스와치 번호 */
.emb-swatch-no {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.3px;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* 반응형 */
@media (max-width: 640px) {
    .emb-swatch { width: 40px; height: 40px; }
    .emb-swatch-no { font-size: 8px; }
    .emb-scroll-box { max-height: 280px; }
}


/* ══════════════════════════════════════════════════════════════
   몸통 원단 색상 팔레트 (fabric-palette) — 직자수 실 스타일
══════════════════════════════════════════════════════════════ */

.color-palette.fabric-palette {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fdfdfc;
    overflow: hidden;
    margin-top: 10px;
}

/* 선택 현황 바 */
.fabric-sel-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    min-height: 38px;
}
.fabric-sel-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
.fabric-sel-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    min-width: 44px;
}
.fabric-sel-chip.fabric-no-sel {
    background: #f1f0ed;
    color: var(--text-muted);
}
.fabric-sel-name {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 스크롤 박스 */
.fabric-scroll-box {
    max-height: 340px;
    overflow-y: auto;
    padding: 10px 12px 14px;
    scrollbar-width: thin;
    scrollbar-color: #d0cdc7 transparent;
}
.fabric-scroll-box::-webkit-scrollbar { width: 5px; }
.fabric-scroll-box::-webkit-scrollbar-thumb { background: #d0cdc7; border-radius: 3px; }

/* 스와치 행 */
.fabric-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 개별 스와치 — emb-swatch 와 동일한 크기/스타일 */
.fabric-swatch {
    width: 46px;
    height: 46px;
    border-radius: 7px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    border: 1.5px solid transparent;
    transition: transform .12s var(--ease), box-shadow .12s var(--ease), border-color .1s;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    user-select: none;
    flex-shrink: 0;
}
.fabric-swatch.light,
.fabric-swatch.has-border {
    border-color: #d8d4cc;
}
.fabric-swatch:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    z-index: 2;
}
.fabric-swatch.selected {
    border-color: var(--amber) !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,.3), 0 4px 12px rgba(0,0,0,.15);
    transform: scale(1.1);
    z-index: 3;
}
.fabric-swatch.selected::after {
    content: '✓';
    position: absolute;
    top: 3px;
    right: 4px;
    width: 13px;
    height: 13px;
    background: var(--amber);
    color: #fff;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 번호 텍스트 — emb-swatch-no 와 동일 */
.fabric-num {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.3px;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* 내부 한글 이름 및 tooltip 숨김 */
.fabric-name { display: none; }
.fabric-swatch .swatch-tip { display: none; }

@media (max-width: 640px) {
    .fabric-swatch { width: 40px; height: 40px; }
    .fabric-scroll-box { max-height: 280px; }
}


/* ── 팔 아플리케(가죽) 팔레트 그룹 레이블 ── */
.sleeve-group-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 8px 0 5px;
    border-bottom: 1px solid #eeece8;
    margin-bottom: 6px;
    margin-top: 4px;
}
.sleeve-group-label:first-child { margin-top: 0; padding-top: 2px; }