/* ============================================================
   가상 메이크업 · 헤어 스튜디오 (AI 토탈 스타일링 STEP 2)
   검정 · 아이보리 · 골드. 사진이 주인공이 되도록 장식은 얇은 선과 여백으로만.
   ============================================================ */
.vm-studio {
    --vm-ink: #0d0d0f;
    --vm-ink-2: #17171a;
    --vm-line: rgba(197, 160, 89, .28);
    --vm-gold: #c5a059;
    --vm-gold-soft: #e8cf96;
    --vm-ivory: #f6f1e7;
    --vm-mute: #8b8578;
    position: relative;
    color: var(--vm-ivory);
    background: radial-gradient(120% 90% at 50% 0%, #1d1a16 0%, var(--vm-ink) 62%);
    border: 1px solid var(--vm-line);
    padding: 34px 30px 30px;
    font-family: 'Montserrat', 'Pretendard', sans-serif;
    box-sizing: border-box;
}
.vm-studio *, .vm-studio *::before, .vm-studio *::after { box-sizing: border-box; }

/* ---------- 머리 ---------- */
.vm-head { text-align: center; margin-bottom: 26px; }
.vm-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 10.5px; letter-spacing: .42em; text-transform: uppercase; color: var(--vm-gold);
}
.vm-eyebrow::before, .vm-eyebrow::after { content: ''; width: 34px; height: 1px; background: var(--vm-gold); opacity: .7; }
.vm-title {
    margin: 12px 0 6px; font-family: 'Cinzel', 'Playfair Display', serif; font-weight: 500;
    font-size: clamp(22px, 2.6vw, 32px); letter-spacing: .08em; color: #fff;
}
.vm-sub { font-size: 12.5px; color: var(--vm-mute); letter-spacing: .02em; word-break: keep-all; }

/* ---------- 3단 배치 ---------- */
.vm-body { display: grid; grid-template-columns: 168px minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.vm-body > * { min-width: 0; }

/* 왼쪽: 부위 */
.vm-cats { display: flex; flex-direction: column; border-top: 1px solid var(--vm-line); }
.vm-cat {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 15px 4px; background: none; border: 0; border-bottom: 1px solid var(--vm-line);
    color: var(--vm-mute); cursor: pointer; text-align: left; transition: color .2s;
}
.vm-cat:hover { color: var(--vm-ivory); }
.vm-cat.on { color: #fff; }
.vm-cat-dot {
    flex: none; width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22); background: transparent;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.25);
}
.vm-cat-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.vm-cat-en { font-family: 'Cinzel', serif; font-size: 12.5px; letter-spacing: .16em; }
.vm-cat-ko { font-size: 11px; opacity: .75; margin-top: 2px; }
.vm-cat.on .vm-cat-en { color: var(--vm-gold-soft); }
.vm-cat-bar { margin-left: auto; width: 2px; height: 22px; background: transparent; transition: background .2s; }
.vm-cat.on .vm-cat-bar { background: var(--vm-gold); }

/* 가운데: 사진 */
.vm-stage {
    position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
    background: var(--vm-ink-2); border: 1px solid var(--vm-line);
}
.vm-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vm-before { clip-path: inset(0 100% 0 0); pointer-events: none; }
.vm-stage.cmp .vm-before { clip-path: inset(0 calc(100% - var(--vm-split, 50%)) 0 0); }
.vm-split {
    display: none; position: absolute; top: 0; bottom: 0; left: var(--vm-split, 50%); width: 0; z-index: 4;
    border-left: 1px solid rgba(255,255,255,.85); cursor: ew-resize; touch-action: none;
}
.vm-stage.cmp .vm-split { display: block; }
.vm-split i {
    position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
    width: 34px; height: 34px; border-radius: 50%; background: rgba(13,13,15,.75);
    border: 1px solid var(--vm-gold); display: flex; align-items: center; justify-content: center;
    color: var(--vm-gold-soft); font-style: normal; font-size: 12px; letter-spacing: -1px;
}
.vm-split b {
    position: absolute; top: 14px; font-size: 9.5px; font-weight: 600; letter-spacing: .28em; color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,.8); white-space: nowrap;
}
.vm-split b.l { right: 10px; } .vm-split b.r { left: 10px; }
.vm-stage.drop-hot { outline: 1px solid var(--vm-gold); outline-offset: -6px; }

/* 사진이 없을 때 */
.vm-empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px; text-align: center; cursor: pointer; z-index: 5;
    background:
        linear-gradient(var(--vm-line), var(--vm-line)) 50% 50% / 1px 46% no-repeat,
        linear-gradient(var(--vm-line), var(--vm-line)) 50% 50% / 46% 1px no-repeat;
}
.vm-empty-ring {
    width: 108px; height: 132px; border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%;
    border: 1px dashed rgba(232,207,150,.55); background: rgba(13,13,15,.85);
}
.vm-empty strong { font-family: 'Cinzel', serif; font-weight: 500; letter-spacing: .2em; font-size: 13px; color: var(--vm-gold-soft); background: var(--vm-ink-2); padding: 0 8px; }
.vm-empty span { font-size: 12px; color: var(--vm-mute); line-height: 1.7; word-break: keep-all; background: var(--vm-ink-2); padding: 0 8px; }
.vm-busy {
    position: absolute; inset: 0; z-index: 6; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
    background: rgba(13,13,15,.62); backdrop-filter: blur(2px); font-size: 12px; letter-spacing: .08em; color: var(--vm-gold-soft);
}
.vm-busy.on { display: flex; }
.vm-busy::before {
    content: ''; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(232,207,150,.25); border-top-color: var(--vm-gold); animation: vmSpin 1s linear infinite;
}
@keyframes vmSpin { to { transform: rotate(360deg); } }

.vm-tools { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.vm-tool {
    background: transparent; border: 1px solid var(--vm-line); color: var(--vm-ivory);
    font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; padding: 9px 14px; cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.vm-tool:hover, .vm-tool.on { border-color: var(--vm-gold); color: var(--vm-gold-soft); }
.vm-tool:disabled { opacity: .35; cursor: default; }

/* 오른쪽: 컬러 */
.vm-panel { border-top: 1px solid var(--vm-line); padding-top: 18px; }
.vm-panel-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.vm-panel-t { font-family: 'Cinzel', serif; font-size: 15px; letter-spacing: .18em; color: #fff; }
.vm-panel-k { font-size: 11px; color: var(--vm-mute); }
.vm-shades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; }
/* 옆으로 밀면 컬러 줄이 움직이고, 위(사진 쪽)로 끌면 끌어다 놓기가 됩니다 */
.vm-shade { background: none; border: 0; padding: 0; cursor: grab; color: inherit; text-align: center; touch-action: pan-x; }
.vm-shade:active { cursor: grabbing; }
.vm-chip {
    display: block; width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 50%;
    position: relative; transition: transform .25s ease;
    box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 -6px 10px rgba(0,0,0,.18);
}
.vm-chip::after {   /* 둥근 팬에 빛이 맺힌 듯 */
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(60% 50% at 34% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
}
.vm-chip::before {
    content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid transparent; transition: border-color .25s;
}
.vm-shade:hover .vm-chip { transform: translateY(-2px); }
.vm-shade.on .vm-chip::before { border-color: var(--vm-gold); }
.vm-shade-no { display: block; font-size: 9.5px; letter-spacing: .14em; color: var(--vm-gold); }
.vm-shade-nm { display: block; font-size: 11px; color: var(--vm-ivory); margin-top: 2px; line-height: 1.3; }
.vm-none .vm-chip { background: transparent !important; border: 1px dashed rgba(255,255,255,.28); box-shadow: none; }
.vm-none .vm-chip::after { background: linear-gradient(135deg, transparent 47%, rgba(255,255,255,.35) 48%, rgba(255,255,255,.35) 52%, transparent 53%); }

.vm-range { margin-top: 24px; }
.vm-range-h { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .2em; color: var(--vm-mute); text-transform: uppercase; margin-bottom: 10px; }
.vm-range-h b { color: var(--vm-gold-soft); font-weight: 600; letter-spacing: .05em; }
.vm-range input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--vm-line); outline: none; }
.vm-range input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--vm-ink);
    border: 1px solid var(--vm-gold); box-shadow: 0 0 0 4px rgba(197,160,89,.15); cursor: pointer;
}
.vm-range input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--vm-ink); border: 1px solid var(--vm-gold); cursor: pointer; }
.vm-finish { margin-top: 18px; }
.vm-fin-row { display: flex; flex-wrap: wrap; gap: 6px; }
.vm-fin {
    background: none; border: 1px solid var(--vm-line); color: var(--vm-mute);
    padding: 7px 12px; font-size: 11.5px; letter-spacing: .04em; cursor: pointer; transition: color .2s, border-color .2s;
}
.vm-fin:hover { color: var(--vm-ivory); }
.vm-fin.on { color: var(--vm-ink); background: var(--vm-gold); border-color: var(--vm-gold); }
.vm-fin.off { opacity: .45; pointer-events: none; }
.vm-hint { margin-top: 16px; font-size: 11px; color: var(--vm-mute); line-height: 1.7; word-break: keep-all; }

/* ---------- 아래: 나의 룩 ---------- */
.vm-look { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--vm-line); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.vm-look-t { font-family: 'Cinzel', serif; letter-spacing: .24em; font-size: 12px; color: var(--vm-gold-soft); flex: none; }
.vm-look-list { display: flex; gap: 8px 16px; flex-wrap: wrap; flex: 1; min-width: 0; }
.vm-look-item { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--vm-ivory); }
.vm-look-item i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.vm-look-item em { font-style: normal; color: var(--vm-mute); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.vm-look-empty { font-size: 11.5px; color: var(--vm-mute); }
.vm-cta {
    flex: none; background: var(--vm-gold); color: var(--vm-ink); border: 0; padding: 14px 26px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .22em; cursor: pointer; transition: background .2s;
}
.vm-cta:hover { background: var(--vm-gold-soft); }
.vm-cta:disabled { opacity: .4; cursor: default; }
.vm-privacy { margin-top: 16px; font-size: 10.5px; color: var(--vm-mute); text-align: center; letter-spacing: .02em; word-break: keep-all; }

/* 끌어다 놓을 때 손가락 아래 따라오는 컬러 */
.vm-ghost {
    position: fixed; z-index: 99999; width: 40px; height: 40px; border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -50%); box-shadow: 0 8px 20px rgba(0,0,0,.45), 0 0 0 2px rgba(232,207,150,.8);
}

/* ---------- 휴대폰 ---------- */
@media (max-width: 900px) {
    .vm-studio { padding: 24px 14px 22px; }
    .vm-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .vm-body > * { min-width: 0; }
    .vm-stage-wrap { order: 1; }
    .vm-cats { order: 2; flex-direction: row; overflow-x: auto; border-top: 0; margin: 18px -14px 0; padding: 0 14px; gap: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .vm-cats::-webkit-scrollbar { display: none; }
    .vm-cat { flex: none; width: auto; padding: 9px 14px; border: 1px solid var(--vm-line); border-radius: 999px; gap: 8px; }
    .vm-cat.on { border-color: var(--vm-gold); }
    .vm-cat-ko, .vm-cat-bar { display: none; }
    .vm-cat-en { font-size: 11px; }
    .vm-cat-dot { width: 11px; height: 11px; }
    .vm-panel { order: 3; border-top: 0; padding-top: 16px; }
    .vm-panel-h { margin-bottom: 12px; }
    .vm-shades { display: flex; overflow-x: auto; gap: 14px; margin: 0 -14px; padding: 4px 14px 6px; scrollbar-width: none; }
    .vm-shades::-webkit-scrollbar { display: none; }
    .vm-shade { flex: none; width: 64px; }
    .vm-chip { width: 44px; height: 44px; }
    .vm-range { margin-top: 16px; }
    .vm-hint { display: none; }
    .vm-look { flex-direction: column; align-items: stretch; gap: 12px; }
    .vm-cta { width: 100%; }
}

/* ---------- 좁은 칸 (STEP 2 오른쪽 상자) ----------
   화면이 넓어도 담긴 칸이 좁으면 휴대폰과 같은 한 줄 배치를 씁니다 */
.vm-studio.vm-compact { padding: 24px 14px 22px; }
.vm-studio.vm-compact .vm-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
.vm-studio.vm-compact .vm-body > * { min-width: 0; }
.vm-studio.vm-compact .vm-stage-wrap { order: 1; }
.vm-studio.vm-compact .vm-cats { order: 2; flex-direction: row; overflow-x: auto; border-top: 0; margin: 18px -14px 0; padding: 0 14px; gap: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.vm-studio.vm-compact .vm-cats::-webkit-scrollbar { display: none; }
.vm-studio.vm-compact .vm-cat { flex: none; width: auto; padding: 9px 14px; border: 1px solid var(--vm-line); border-radius: 999px; gap: 8px; }
.vm-studio.vm-compact .vm-cat.on { border-color: var(--vm-gold); }
.vm-studio.vm-compact .vm-cat-ko, .vm-studio.vm-compact .vm-cat-bar { display: none; }
.vm-studio.vm-compact .vm-cat-en { font-size: 11px; }
.vm-studio.vm-compact .vm-cat-dot { width: 11px; height: 11px; }
.vm-studio.vm-compact .vm-panel { order: 3; border-top: 0; padding-top: 16px; }
.vm-studio.vm-compact .vm-panel-h { margin-bottom: 12px; }
.vm-studio.vm-compact .vm-shades { display: flex; overflow-x: auto; gap: 14px; margin: 0 -14px; padding: 4px 14px 6px; scrollbar-width: none; }
.vm-studio.vm-compact .vm-shades::-webkit-scrollbar { display: none; }
.vm-studio.vm-compact .vm-shade { flex: none; width: 64px; }
.vm-studio.vm-compact .vm-chip { width: 44px; height: 44px; }
.vm-studio.vm-compact .vm-range { margin-top: 16px; }
.vm-studio.vm-compact .vm-hint { display: none; }
.vm-studio.vm-compact .vm-look { flex-direction: column; align-items: stretch; gap: 12px; }
.vm-studio.vm-compact .vm-cta { width: 100%; }
.vm-studio.vm-compact .vm-head { margin-bottom: 16px; }
.vm-studio.vm-compact .vm-title { font-size: 24px; }
/* 넓은 화면의 좁은 칸: 사진이 칸을 다 차지하지 않도록 폭을 줄입니다 */
@media (min-width: 901px) {
    .vm-studio.vm-compact .vm-stage { max-width: 400px; margin-left: auto; margin-right: auto; }
}
.vm-shine-h { margin-top: 14px; }

/* 지금 판매 중인 실제 제품 호수: 금색 점 + 브랜드 이름 */
.vm-real .vm-chip::before { border-color: rgba(197,160,89,.35); }
.vm-real .vm-shade-no::after { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--vm-gold); margin-left: 4px; vertical-align: 2px; }
.vm-shade-br { display: block; font-size: 9.5px; color: var(--vm-mute); margin-top: 1px; line-height: 1.2; max-width: 64px; margin-left: auto; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-real-note { grid-column: 1 / -1; font-size: 10.5px; color: var(--vm-mute); line-height: 1.5; }
.vm-studio.vm-compact .vm-real-note { flex: 0 0 110px; align-self: center; }
@media (max-width: 760px) { .vm-real-note { flex: 0 0 110px; align-self: center; } }