/* 하얀술 제품 인트로 — 원본: claude.ai artifact 904d5b02 (johan 컨펌본).
   intro.html(단독 열람)과 intro.js(대시보드 오버레이)가 공유한다.
   전 선택자 .ffos-intro 스코프 + 키프레임 in* 접두어 — 대시보드 안에 인라인으로
   올라가므로(X-Frame-Options DENY 라 iframe 불가) 셸 스타일과 충돌하면 안 된다. */
.ffos-intro {
  --cream: #F0E5D2;
  --cream-lt: #FAF5EB;
  --warm: #E8D9C2;
  --gold: #A3863A;
  --gold-lt: #C9A94E;
  --dark: #2A2118;
  --dark-soft: #5C4D3E;
  --stamp: #1C1715;
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--dark);
  color: var(--dark);
  font-family: 'Helvetica Neue','Apple SD Gothic Neo',sans-serif;
}
.ffos-intro, .ffos-intro * { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Cream background bloom ── */
.ffos-intro .bg {
  position: absolute; inset: -15%;
  background: radial-gradient(ellipse 75% 65% at 50% 46%, var(--cream-lt), var(--cream) 60%, var(--warm));
  transform: scale(0); border-radius: 50%; opacity: 0;
  animation: inBloom 2.4s cubic-bezier(.16,1,.3,1) .4s forwards;
}
@keyframes inBloom {
  0%   { transform: scale(0); opacity: 0; border-radius: 50%; }
  35%  { opacity: 1; border-radius: 50%; }
  75%  { border-radius: 15%; }
  100% { transform: scale(1.5); opacity: 1; border-radius: 0; }
}

.ffos-intro .vig {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 75% 65% at 50% 44%, transparent 35%, rgba(180,160,130,.2));
}

.ffos-intro .fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* ── Media center ── */
.ffos-intro .media-wrap {
  position: absolute; left: 50%; top: 43%;
  transform: translate(-50%,-50%); z-index: 5;
  opacity: 0;
  animation: inBUp 1.6s cubic-bezier(.16,1,.3,1) 1.6s forwards;
}
@keyframes inBUp {
  0%   { opacity: 0; transform: translate(-50%,-50%) translateY(40px) scale(.95); }
  100% { opacity: 1; transform: translate(-50%,-50%) translateY(0) scale(1); }
}

.ffos-intro .media-shake { animation: inShake 1.2s ease-in-out 9s 2; }
@keyframes inShake {
  0%,100% { transform: rotate(0); }
  12%  { transform: rotate(-2.5deg); }
  28%  { transform: rotate(2.5deg); }
  42%  { transform: rotate(-1.8deg); }
  58%  { transform: rotate(1.8deg); }
  72%  { transform: rotate(-.8deg); }
  88%  { transform: rotate(.8deg); }
}

.ffos-intro .media-inner {
  position: relative;
  height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ffos-intro .prod-img {
  position: absolute;
  height: 62vh; width: auto; max-width: 86vw; object-fit: contain;
  filter: drop-shadow(0 15px 40px rgba(30,20,10,.25));
  z-index: 2;
  animation: inImgFade 0s ease 4s forwards;
}
@keyframes inImgFade { to { opacity: 0; } }

.ffos-intro .vid-frame {
  position: relative;
  height: 58vh; max-width: 86vw;
  border-radius: 2.5vmin;
  overflow: hidden;
  box-shadow: 0 12px 50px rgba(30,20,10,.2);
  opacity: 0; z-index: 1;
  animation: inVidIn 1.2s ease 3.5s forwards;
}
@keyframes inVidIn { 0% { opacity: 0; } 100% { opacity: 1; } }

.ffos-intro .prod-vid {
  height: 118%; width: auto;
  display: block;
  object-fit: cover;
  object-position: top center;
}

/* ── Top label ── */
/* 애니메이션은 span 에만 — 래퍼에 걸면 inFUp 의 transform 이
   translateX(-50%) 센터링을 덮어써 라벨이 오른쪽으로 밀린다 (원본 잠복 버그). */
.ffos-intro .top-label {
  position: absolute; top: 6vh; left: 50%;
  transform: translateX(-50%); z-index: 6;
  text-align: center; white-space: nowrap;
}
.ffos-intro .top-label span {
  display: inline-block;
  font-size: 1.8vmin; letter-spacing: .5em;
  color: var(--dark-soft); font-weight: 400;
  text-transform: uppercase;
  opacity: 0;
  animation: inFUp .8s ease 5s forwards;
}

/* ── Brand ── */
.ffos-intro .brand {
  position: absolute; bottom: 6vh; left: 50%; width: 100%;
  transform: translateX(-50%); text-align: center; z-index: 6; white-space: nowrap;
}
.ffos-intro .brand h1 {
  font-family: 'Nanum Myeongjo','AppleMyungjo','Batang','Times New Roman',serif;
  font-size: 8vmin; font-weight: 800; letter-spacing: .28em;
  color: var(--stamp);
  clip-path: inset(100% 0 0 0);
  animation: inTRev .9s cubic-bezier(.16,1,.3,1) 5.5s forwards;
}
@keyframes inTRev { to { clip-path: inset(0 0 0 0); } }

.ffos-intro .brand .tag {
  font-size: 2.6vmin; letter-spacing: .2em; opacity: 0;
  margin-top: 1.2vmin; font-weight: 300;
  color: var(--dark-soft);
  font-style: italic;
  animation: inFUp .8s ease 6.5s forwards;
}
.ffos-intro .brand .vars {
  font-size: 1.8vmin; letter-spacing: .35em; opacity: 0;
  margin-top: 1.8vmin; color: var(--gold);
  text-transform: uppercase; font-weight: 500;
  animation: inFUp .8s ease 7.3s forwards;
}
@keyframes inFUp {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: .7; transform: translateY(0); }
}

/* ── Gold line accent ── */
.ffos-intro .line {
  position: absolute; left: 50%; z-index: 4; pointer-events: none;
  width: 0; height: 1px; background: var(--gold);
  transform: translateX(-50%);
}
.ffos-intro .line-top { top: 12vh; animation: inLineGrow 1s ease 4.5s forwards; }
.ffos-intro .line-bot { bottom: 18vh; animation: inLineGrow 1s ease 4.8s forwards; }
@keyframes inLineGrow { to { width: 25vw; } }

/* ── Replay (단독 열람 전용) ── */
.ffos-intro .rp {
  position: absolute; bottom: 3vmin; right: 3vmin; z-index: 20;
  background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.1);
  color: var(--dark-soft); font-size: 2.5vmin;
  width: 5.5vmin; height: 5.5vmin; border-radius: 50%;
  cursor: pointer; opacity: 0; padding: 0;
  animation: inFUp .5s ease 9s forwards;
  backdrop-filter: blur(8px); display: grid; place-items: center;
  transition: background .2s; line-height: 1;
}
.ffos-intro .rp:hover { background: rgba(0,0,0,.1); }
.ffos-intro .rp:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Skip (오버레이 전용 — intro.js 가 만든다) ── */
.ffos-intro .skip {
  position: absolute; top: max(3vmin, env(safe-area-inset-top)); right: 3vmin; z-index: 20;
  background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.12);
  color: var(--dark-soft); font-size: 13px; letter-spacing: .08em;
  padding: 8px 16px; border-radius: 999px;
  cursor: pointer; opacity: 0;
  animation: inFUp .5s ease 1.2s forwards;
  backdrop-filter: blur(8px);
  font-family: inherit;
}
.ffos-intro .skip:hover { background: rgba(0,0,0,.12); }

/* ── Mobile (세로 폰) — vars 줄이 390px 를 넘쳐 wrap 필수, 병은 폭 우선 ── */
@media (max-width: 640px) {
  .ffos-intro .top-label span { font-size: 11px; letter-spacing: .35em; }
  .ffos-intro .media-wrap { top: 41%; }
  .ffos-intro .media-inner { height: 52vh; }
  .ffos-intro .prod-img { height: 52vh; }
  .ffos-intro .vid-frame { height: 49vh; border-radius: 12px; }
  .ffos-intro .brand { white-space: normal; padding: 0 16px; bottom: 5vh; }
  .ffos-intro .brand h1 { font-size: clamp(30px, 9.5vw, 44px); letter-spacing: .2em; }
  .ffos-intro .brand .tag { font-size: 13px; letter-spacing: .12em; margin-top: 8px; }
  .ffos-intro .brand .vars { font-size: 10px; letter-spacing: .18em; margin-top: 10px; }
  .ffos-intro .line-top { top: 11vh; }
  .ffos-intro .line-bot { bottom: 16vh; }
  .ffos-intro .rp { width: 42px; height: 42px; font-size: 18px; }
}
/* 짧은 가로 화면(폰 랜드스케이프) — 병을 줄여 브랜드와 겹치지 않게 */
@media (max-height: 480px) {
  .ffos-intro .media-inner, .ffos-intro .prod-img { height: 46vh; }
  .ffos-intro .vid-frame { height: 43vh; }
  .ffos-intro .brand h1 { font-size: 6vmin; }
}

@media (prefers-reduced-motion: reduce) {
  .ffos-intro, .ffos-intro *, .ffos-intro *::before, .ffos-intro *::after {
    animation-duration: .01s !important;
    animation-delay: 0s !important;
  }
}