/* ─────────────────────────────────────────────────────────────
   문성전자 — 상세 이미지 갤러리 (파스텔 스테이지, ms-gal)
   시안: docs/design/gallery-stage-draft.html (2026-09-08 확정) · PC + 모바일
   ───────────────────────────────────────────────────────────── */
.ms-gal{--ms-navy:#0f1c6e;--ms-ink:#1b2440;--ms-mute:#5d6680;--ms-line:#e6e9f2;--ms-blue:#1a6ad0;--ms-tile:#e9ecf3;--ms-en:'Samsung Sharp Sans','Samsung One Korean',sans-serif;
  display:block;line-height:1.5}   /* 2026-09-16 삼성 피드백 3번: 세로 레일(76px 열) → 무대 아래 가로 줄. 무대가 열 전체 폭 */
.ms-gal *{box-sizing:border-box}
.ms-gal .ms-gal-stage.fridge,.ms-gal .ms-mstage.fridge{--ms-tile:#e3efff}.ms-gal .ms-gal-stage.kimchi,.ms-gal .ms-mstage.kimchi{--ms-tile:#e4f7ee}.ms-gal .ms-gal-stage.dish,.ms-gal .ms-mstage.dish{--ms-tile:#ffe9d6}.ms-gal .ms-gal-stage.induct,.ms-gal .ms-mstage.induct{--ms-tile:#ece8ff}
/* 상세 좌측 열 — 스킨 인라인 width(de_item_medium_wpx=400px)를 넘어 남는 폭을 갤러리가 채우도록 (시안: 1fr + 460px) */
.vi_info .vi_img_bx{width:auto !important;min-width:0}   /* 2026-09-18: flex·오른쪽 여백은 상위 래퍼 .ms-vi-left 로 이관 (css/ms-quote.css) */
.vi_info .vi_txt_bx{flex:none}   /* 오른쪽 열은 스킨 폭(540px) 유지 */
/* 썸네일 레일(무대 아래 가로 줄) — 클래스명은 ms-live(.ms-rail)·ms-hero(.ms-stage)와 충돌하지 않도록 ms-gal- 접두 */
.ms-gal-rail{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:12px}
.ms-gal-rail button{width:72px;height:72px;border-radius:16px;border:1.5px solid var(--ms-line);background:#fff;padding:0;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,box-shadow .15s}
.ms-gal-rail button img{width:100% !important;height:100% !important;object-fit:cover;display:block}
.ms-gal-rail button.cut img{width:80% !important;height:80% !important;object-fit:contain;mix-blend-mode:multiply}
.ms-gal-rail button:hover{border-color:#b9d3ff}
.ms-gal-rail button.on{border-color:var(--ms-blue);box-shadow:0 0 0 2px rgba(31,124,240,.2)}
/* 스테이지 */
.ms-gal-stage{position:relative;aspect-ratio:1/1;border-radius:24px;background:var(--ms-tile);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ms-gal-stage.photo{background:#fff;border:1px solid var(--ms-line)}
.ms-gal-stage:before{content:'';position:absolute;left:16%;right:16%;bottom:9%;height:8%;border-radius:50%;background:rgba(15,28,110,.10);filter:blur(12px);transition:opacity .3s}
.ms-gal-stage.photo:before{opacity:0}
.ms-gal-stage img{position:relative;width:90% !important;height:90% !important;object-fit:contain;mix-blend-mode:multiply;transition:opacity .35s,transform .35s;cursor:zoom-in;display:block}
.ms-gal-stage.photo img{width:100% !important;height:100% !important;object-fit:cover;mix-blend-mode:normal}
.ms-gal-stage.fade img{opacity:0;transform:scale(.98)}
.ms-gal .labels{position:absolute;left:16px;top:16px;display:flex;flex-direction:column;gap:6px;z-index:2}
.ms-gal .label{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:6px;font-size:11.5px;font-weight:700;background:#fff;color:var(--ms-navy);box-shadow:0 2px 8px rgba(15,28,110,.08)}
.ms-gal .label.sale{background:var(--ms-blue);color:#fff}
.ms-gal .label.partner:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ms-blue)}
.ms-gal .color{position:absolute;right:16px;top:16px;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:9999px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-size:11.5px;color:var(--ms-ink);z-index:2}
.ms-gal .color i{width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.ms-gal-stage .ctl{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:8px;z-index:2}
.ms-gal-stage .ctl button{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ms-navy);cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 12px rgba(15,28,110,.12);font-size:14px;transition:background .15s;font-family:inherit}
.ms-gal-stage .ctl button:hover{background:#fff}
.ms-gal-stage .ctl .cnt{font-family:var(--ms-en);font-size:12px;color:var(--ms-navy);background:rgba(255,255,255,.85);border-radius:9999px;padding:6px 10px;letter-spacing:.04em}
.ms-gal-stage .ctl .zoom{margin-left:auto;width:auto;padding:0 12px;border-radius:9999px;display:inline-flex;gap:6px;font-size:12px;font-weight:700}
.ms-gal-stage .ctl .zoom svg{width:14px;height:14px}
/* 모바일 스테이지 */
.ms-gal.m{display:block}
.ms-mstage{position:relative;aspect-ratio:1/1;background:var(--ms-tile);overflow:hidden;touch-action:pan-y}
.ms-track{display:flex;height:100%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ms-track figure{flex:none;width:100%;height:100%;margin:0;display:flex;align-items:center;justify-content:center;position:relative}
.ms-track figure:before{content:'';position:absolute;left:18%;right:18%;bottom:10%;height:8%;border-radius:50%;background:rgba(15,28,110,.10);filter:blur(10px)}
.ms-track img{position:relative;width:76% !important;height:76% !important;object-fit:contain;mix-blend-mode:multiply;display:block}
.ms-track figure.photo{background:#fff}.ms-track figure.photo img{width:100% !important;height:100% !important;object-fit:cover;mix-blend-mode:normal}.ms-track figure.photo:before{display:none}
.ms-mstage .labels{left:12px;top:12px}.ms-mstage .label{height:22px;font-size:11px;padding:0 8px}
.ms-mstage .dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px;z-index:2;background:rgba(255,255,255,.7);border-radius:9999px;padding:6px 10px}
.ms-mstage .dots i{width:6px;height:6px;border-radius:9999px;background:#b9c4dc;transition:width .25s}
.ms-mstage .dots i.on{width:18px;background:var(--ms-blue)}
.ms-mstage .zoom{position:absolute;right:12px;bottom:10px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.9);display:grid;place-items:center;z-index:2;cursor:pointer}
.ms-mstage .zoom svg{width:14px;height:14px}
/* 라이트박스 */
.ms-lb{position:fixed;inset:0;background:rgba(10,19,48,.86);display:none;align-items:center;justify-content:center;z-index:9999;padding:40px}
.ms-lb.open{display:flex}
.ms-lb img{max-width:min(1100px,90vw);max-height:84vh;border-radius:20px;background:#fff;object-fit:contain}
.ms-lb .x{position:absolute;right:24px;top:20px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer}
.ms-lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:18px;cursor:pointer}
.ms-lb .prev{left:24px}.ms-lb .next{right:24px}
.ms-lb .cap{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;display:flex;gap:10px;align-items:center;white-space:nowrap}
.ms-lb .cap b{font-family:var(--ms-en);letter-spacing:.06em}
@media (max-width:640px){.ms-lb{padding:16px}.ms-lb .x{right:12px;top:12px}.ms-lb .nav{width:40px;height:40px}.ms-lb .prev{left:10px}.ms-lb .next{right:10px}.ms-lb img{max-width:96vw;border-radius:12px}}
@media (prefers-reduced-motion:reduce){.ms-gal-stage img,.ms-track,.ms-mstage .dots i{transition:none}}

/* ── AI 브리핑 하단 배치 (2026-09-16 삼성 피드백 4번) — 스킨에서 이미지·옵션 영역 아래로 옮기고 .ms-brief-wrap 으로 감쌈.
   sop.ai.php 의 폭 맞춤 스크립트(inline width)를 무력화해 전체 폭 사용, 기능 설명은 한 기능당 한 줄(1열) ── */
.ms-brief-wrap{max-width:1280px;margin:8px auto 0}   /* 2026-09-18: 왼쪽 열 펼쳐보기 안으로 들어간 다음에도 sop.ai.php 의 inline width 무력화는 그대로 필요 */
.ms-brief-wrap .sab{width:auto !important;max-width:none;margin:0 0 8px}
.ms-brief-wrap .sab-ft{grid-template-columns:1fr;gap:8px}
@media (max-width:880px){.ms-brief-wrap{margin:0}.ms-brief-wrap .sab{margin:14px 15px 6px}}