@charset "UTF-8";
/* =========================================================================
   Factory / Showroom 페이지 전용 스타일
   - Views/Factory/Showroom.cshtml 인라인 <style> 에서 분리(정적).
   - .css 이므로 Razor '@' 이스케이프 불필요 → @media 그대로 사용.
   ========================================================================= */

/* 이 페이지에서는 공용 푸터만 숨김(헤더는 노출해 다른 페이지로 이동 가능) */
.site-footer { display: none !important; }

/* 쇼룸 전용 헤더: 밝은 3D 화면 위에서 읽히도록 컴팩트 화이트 톤으로 고정 */
.site-header { background: #fff !important; height: 60px !important; border-bottom: 1px solid var(--c-line); }
.site-header::before { opacity: 0 !important; }
/* 쇼룸 헤더는 항상 흰 배경 → 스크롤 상태처럼 컬러 로고로 표시.
   (흰 로고는 레이아웃 자리를 유지해 컨테이너 너비가 무너지지 않도록 opacity로만 숨김) */
.site-header .logo-img-white { opacity: 0; }
.site-header .logo-img-color { opacity: 1; }
/* Site.css의 img{max-width:100%} 가 flex 컨테이너 안에서 폭을 0으로 붕괴시키는 것 방지 */
.site-header .logo-img { max-width: none; }
.site-header .hnav-link { color: var(--c-ink); }
.site-header .hnav-link:hover { color: var(--c-accent); }
.site-header .lang-btn { border-color: var(--c-line); color: var(--c-ink); }
.site-header .lang-btn:hover { background: var(--c-bg-soft); }
.site-header .hamburger span { background: var(--c-ink); }

.sr-root {
    --sr-bg: #f4f5f7;
    --sr-ink: #1a1d21;
    --sr-sub: #6b7178;
    --sr-line: #e3e6ea;
    --sr-accent: #2b6cff;
    -webkit-font-smoothing: antialiased;
}

/* ===== 화면 고정 레이어: 세로 9:1 분할 ===== */
.sr-fixed {
    position: fixed;
    inset: 60px 0 0 0; /* 상단 공용 헤더(60px) 아래로 배치 */
    z-index: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 9fr 1fr;
    background: #0f1318;
}

/* ----- 위(80%): Three.js 캔버스 ----- */
.sr-visual {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fbfcfd 0%, #eceef1 100%);
}
.sr-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ----- 아래(10%): 설명 패널 (다크 글래스 톤 통일, 컴팩트) ----- */
.sr-panel {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: #12161c;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0 clamp(20px, 4vw, 64px);
    color: #e8edf3;
}
.sr-eyebrow {
    font: 800 var(--fs-micro)/1 var(--font-kr);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6fb1ff;
    margin: 0;
}
.sr-title {
    font: 800 var(--fs-lg)/1.2 var(--font-kr);
    color: #fff;
    margin: 0;
    word-break: keep-all;
}
.sr-title em { font-style: normal; color: #6fb1ff; }
.sr-desc {
    font: 400 var(--fs-xs)/1.45 var(--font-kr);
    color: #9aa6b2;
    margin: 0;
    max-width: 96ch;
    word-break: keep-all;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;   /* 10% 높이에 맞게 2줄 제한 */
}

/* ===== 카메라 구도 HUD (우측 상단) ===== */
.sr-cam {
    position: absolute;
    top: 12px; right: 14px;
    z-index: 6;
    padding: 8px 11px 10px;
    border-radius: 8px;
    background: rgba(20, 24, 30, .72);
    color: #e8edf3;
    font: 600 var(--fs-2xs)/1.5 "Cascadia Code", Consolas, "D2Coding", monospace;
    letter-spacing: .2px;
    pointer-events: none;          /* 컨테이너는 클릭 통과(드래그 회전 유지) */
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.sr-cam b { color: #6fb1ff; font-weight: 700; }
#srCamVals {
    white-space: pre;
    pointer-events: auto;          /* 값 텍스트는 드래그 선택 가능 */
    user-select: text; -webkit-user-select: text; cursor: text;
}
#srCamCopy {
    pointer-events: auto;
    margin-top: 6px;
    width: 100%;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px;
    background: rgba(111,177,255,.18);
    color: #cfe3ff;
    font: 700 var(--fs-2xs)/1 var(--font-kr);
    padding: 5px 0;
    cursor: pointer;
    transition: background .15s;
}
#srCamCopy:hover { background: rgba(111,177,255,.38); color: #fff; }

/* ===== 타임라인 스크럽(재생) 바 — 다크 글래스 테마로 통일 ===== */
.sr-scrub {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;          /* 2줄: 위=재생구간, 아래=컨트롤 */
    align-items: stretch;
    gap: 9px;
    padding: 11px 18px 13px;
    background: linear-gradient(180deg, rgba(16,20,26,0) 0%, rgba(16,20,26,.90) 48%);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    font: 600 var(--fs-xs)/1 var(--font-kr);
    color: #e8edf3;
    user-select: none;
}
.sr-scrub-track { display: flex; align-items: center; gap: 12px; }              /* 위: 슬라이더 + 시간 */
.sr-scrub-ctrl  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }  /* 아래: 재생·정지·라디오 */
.sr-scrub button {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: #e8edf3;
    font-size:var(--fs-sm);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
}
.sr-scrub button:hover, .sr-scrub button.on { background: var(--sr-accent); border-color: var(--sr-accent); color: #fff; }
/* 모드/속도 — 라디오(세그먼트 버튼) */
.sr-radio {
    flex: 0 0 auto; display: inline-flex; align-items: stretch;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; overflow: hidden;
}
.sr-radio label {
    display: inline-flex; align-items: center; padding: 8px 12px; cursor: pointer; white-space: nowrap;
    color: #cdd6df; font: 700 var(--fs-xs)/1 var(--font-kr);
    transition: background .15s, color .15s;
}
.sr-radio label + label { border-left: 1px solid rgba(255, 255, 255, .12); }
.sr-radio input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.sr-radio label:hover { background: rgba(111, 177, 255, .14); color: #fff; }
.sr-radio label:has(input:checked) { background: var(--sr-accent); color: #fff; }
.sr-radio .lbl-sm { display: none; }   /* 짧은 라벨은 모바일에서만 */

/* 모바일: 재생바 컴팩트 + 라벨 축약 → 컨트롤 한 줄, 프리셋과 겹침 방지 */
@media (max-width: 640px) {
    .sr-scrub { padding: 9px 12px 11px; gap: 7px; }
    .sr-scrub-ctrl { gap: 6px; justify-content: center; }
    .sr-scrub button { width: 30px; height: 30px; font-size:var(--fs-sm); }
    .sr-radio label { padding: 6px 9px; font-size:var(--fs-2xs); }
    .sr-radio .lbl-lg { display: none; }
    .sr-radio .lbl-sm { display: inline; }
    .sr-time { min-width: 74px; font-size:var(--fs-2xs); }
}
.sr-scrub input[type=range] {
    flex: 1 1 auto;
    height: 6px;
    -webkit-appearance: none; appearance: none;
    background: rgba(255, 255, 255, .18);
    border-radius: 99px;
    outline: none;
    cursor: pointer;
}
.sr-scrub input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--sr-accent);
    border: 2px solid #e8edf3;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    cursor: pointer;
}
.sr-scrub input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--sr-accent); border: 2px solid #e8edf3; cursor: pointer;
}
.sr-time {
    flex: 0 0 auto;
    min-width: 104px; text-align: right;
    color: #9aa6b2;
    font-variant-numeric: tabular-nums;
}
.sr-stage {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(43,108,255,.22);
    color: #9fc1ff;
    font-weight: 700;
    white-space: nowrap;
}

/* ===== 좌측 조작 안내 패널 (좌상단, 우측 카메라 HUD와 대칭) ===== */
.sr-guide {
    position: absolute;
    top: 12px; left: 14px;
    z-index: 6;
    display: flex; flex-direction: column; gap: 11px;
    padding: 13px 15px 14px;
    border-radius: 12px;
    background: rgba(20, 24, 30, .60);
    backdrop-filter: blur(9px) saturate(125%);
    -webkit-backdrop-filter: blur(9px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
    color: #e8edf3;
    pointer-events: none;       /* 드래그 회전 방해 안 함 */
    user-select: none;
}
.sr-guide .g-group { display: flex; flex-direction: column; gap: 8px; }
.sr-guide .g-head {
    margin: 0;
    display: flex; align-items: center; gap: 6px;
    font: 800 var(--fs-micro)/1 var(--font-kr);
    letter-spacing: .16em; text-transform: uppercase;
    color: #6fb1ff;
}
.sr-guide .g-head svg { width: 13px; height: 13px; opacity: .9; }
.sr-guide .g-row {
    display: flex; align-items: center; gap: 10px;
    font: 600 var(--fs-xs)/1.15 var(--font-kr);
    color: #dfe6ee;
}
.sr-guide .g-row .ic {
    flex: 0 0 auto; width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #cfe0f2;
}
.sr-guide .g-row b { color: #fff; font-weight: 700; }
.sr-guide .g-row em { font-style: normal; color: #95a1ae; font-weight: 500; margin-left: auto; padding-left: 10px; }
/* ----- 토글(접기/펼치기) 헤더 ----- */
.sr-guide .g-toggle {
    pointer-events: auto;       /* 컨테이너는 클릭 통과지만, 이 버튼만은 클릭 가능 */
    display: flex; align-items: center; gap: 8px; width: 100%;
    margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
    color: #eaf0f6;
    font: 800 var(--fs-2xs)/1 var(--font-kr); letter-spacing: .04em;
}
.sr-guide .g-toggle .g-grip { flex: 0 0 auto; width: 15px; height: 15px; color: #6fb1ff; }
.sr-guide .g-toggle .g-toggle-tx { margin-right: auto; }
.sr-guide .g-toggle .g-chev { flex: 0 0 auto; width: 16px; height: 16px; opacity: .8; transition: transform .2s ease; }
.sr-guide .g-toggle:hover .g-chev { opacity: 1; }
.sr-guide.collapsed .g-toggle .g-chev { transform: rotate(180deg); }   /* 접힘: 화살표 아래로 */

.sr-guide .g-body { display: flex; flex-direction: column; gap: 11px; }
.sr-guide.collapsed .g-body { display: none; }                          /* 접힘: 본문 숨김 → 헤더만 남음 */

/* ----- 접속 기기에 맞는 그룹만 노출 ----- */
.sr-guide .g-group[data-dev] { display: none; }                         /* 기본 숨김 → 아래 미디어쿼리로 하나만 표시 */
@media (pointer: fine), (pointer: none) {                               /* 마우스 = 데스크탑 */
    .sr-guide .g-group[data-dev="desktop"] { display: flex; }
}
@media (pointer: coarse) {                                              /* 터치 = 모바일/태블릿 */
    .sr-guide .g-group[data-dev="mobile"] { display: flex; }
}

@media (max-width: 640px) {
    .sr-guide { top: 10px; left: 10px; padding: 10px 12px; gap: 8px; border-radius: 10px; }
    .sr-guide .g-row { font-size:var(--fs-2xs); gap: 8px; }
    .sr-guide .g-row .ic { width: 20px; height: 20px; }
}

/* ===== 로딩 오버레이 ===== */
.sr-loading {
    position: absolute; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #11151b 0%, #1b2129 100%);
    transition: opacity .5s ease;
}
.sr-loading.hidden { opacity: 0; pointer-events: none; }
.sr-load-box { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sr-load-spin {
    width: 46px; height: 46px; border-radius: 50%;
    border: 3px solid rgba(111,177,255,.25); border-top-color: #6fb1ff;
    animation: sr-spin .9s linear infinite;
}
@keyframes sr-spin { to { transform: rotate(360deg); } }
.sr-load-brand {
    margin: 0; color: #eef3f8;
    font: 800 var(--fs-md)/1 var(--font-kr); letter-spacing: .22em;
}
.sr-load-brand em { font-style: normal; color: #6fb1ff; }
.sr-load-tx { margin: 0; color: #8c98a6; font: 500 var(--fs-xs)/1 var(--font-kr); letter-spacing: .04em; }

/* ===== 카메라 프리셋 바 (하단 중앙, 재생바 위) — 강조 ===== */
.sr-presets {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 8; display: flex; align-items: center; gap: 4px;
    padding: 7px 8px; border-radius: 13px;
    background: rgba(16, 20, 26, .82);
    backdrop-filter: blur(11px) saturate(130%); -webkit-backdrop-filter: blur(11px) saturate(130%);
    border: 1px solid rgba(120, 170, 255, .30);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: sr-presets-pulse 1.7s ease-out 3;   /* 로드 시 3회 주목 펄스 */
}
@keyframes sr-presets-pulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06); }
    50%      { box-shadow: 0 10px 30px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px rgba(111,177,255,.40); }
}
.sr-presets-lead {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px 0 8px; margin-right: 4px;
    color: #6fb1ff; font: 800 var(--fs-2xs)/1 var(--font-kr); letter-spacing: .06em;
    border-right: 1px solid rgba(255, 255, 255, .14); white-space: nowrap;
}
.sr-presets-lead svg { width: 15px; height: 15px; }
.sr-presets button {
    border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: #e3e9f0; cursor: pointer;
    font: 800 var(--fs-xs)/1 var(--font-kr);
    padding: 9px 15px; transition: background .15s, color .15s, border-color .15s, transform .1s;
    white-space: nowrap;
}
.sr-presets button:hover { background: rgba(111, 177, 255, .18); color: #fff; }
.sr-presets button:active { transform: translateY(1px); }
.sr-presets button.on {
    background: linear-gradient(180deg, #3b79ff, #2b6cff); border-color: #2b6cff; color: #fff;
    box-shadow: 0 2px 10px rgba(43, 108, 255, .5);
}

/* 좁은 창(≤1024px): 프리셋 바가 화면폭을 넘으면 가로 스크롤 */
@media (max-width: 1024px) {
    .sr-presets { max-width: calc(100vw - 20px); overflow-x: auto; }
}
/* 모바일(≤640px): 추가 컴팩트화 — 리드 라벨 숨김, 버튼 축소 */
@media (max-width: 640px) {
    .sr-presets { gap: 2px; padding: 5px; bottom: 96px; }
    .sr-presets-lead { display: none; }
    .sr-presets button { padding: 7px 9px; font-size:var(--fs-xs); }
}