/* =========================================================
   분위기 조합 — 축별 장식 (모든 매장 공용)
   색 · 모양 토큰은 mood.js 가 <html> 의 CSS 변수로 넣는다. 여기는 토큰만으로 안 되는 연출.

   규칙은 html[data-mood-<축>="<id>"] 로 건다. 관리자 미리보기 카드(.look-card)는
   같은 data-mood-* 를 갖지만 html 이 아니므로 사이트 장식에는 걸리지 않는다.
   매장 CSS 의 클래스(.hero-title, .card, .btn …)를 대상으로 하므로 매장마다 같은 구조여야 한다.
   ========================================================= */

/* ---------- 공통 ---------- */
html[data-look="mood"] .ht-line:nth-child(2) { color: var(--accent); }
.mfx-grain { opacity: .35; }
html[data-mood-scheme="dark"] .mfx-grain { mix-blend-mode: overlay; opacity: .28; }

/* =========================================================
   E. 비주얼 / 인터랙션 — 배경 효과(#fx 안)와 화면 연출
   움직임 속도는 B(식사 맥락)의 --m-motion 으로 조절된다
   ========================================================= */

/* E1. 3D 인터랙션/모션 — 원근 바닥 · 떠다니는 큐브 · 마우스 패럴랙스 · 카드 기울이기 */
.mfx-floor {
  left: -50%; right: -50%; bottom: -10%; height: 55%;
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 30%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent2) 22%, transparent) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(520px) rotateX(64deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: mfx-floor calc(4s / var(--m-motion)) linear infinite;
}
@keyframes mfx-floor { to { background-position: 0 64px, 0 0; } }
.mfx-orb { width: 42vmax; height: 42vmax; border-radius: 50%; filter: blur(90px); opacity: calc(.18 + var(--m-glow) * .14);
  transform: translate(calc(var(--m-px, 0) * -40px), calc(var(--m-py, 0) * -40px)); transition: transform .6s ease-out; }
.mfx-orb.o1 { top: -16vmax; left: -10vmax; background: var(--accent); }
.mfx-orb.o2 { bottom: -20vmax; right: -12vmax; background: var(--accent2); }
.mfx-cubes { inset: 0; perspective: 900px; transform: translate(calc(var(--m-px, 0) * 30px), calc(var(--m-py, 0) * 30px)); transition: transform .5s ease-out; }
.mfx-cube { position: absolute; width: 70px; height: 70px; transform-style: preserve-3d; animation: mfx-spin calc(26s / var(--m-motion)) linear infinite; }
.mfx-cube.c0 { right: 9%; top: 20%; }
.mfx-cube.c1 { left: 6%; top: 58%; width: 44px; height: 44px; animation-duration: calc(34s / var(--m-motion)); animation-direction: reverse; }
.mfx-cube.c2 { right: 30%; bottom: 10%; width: 28px; height: 28px; animation-duration: calc(20s / var(--m-motion)); }
.mfx-cube i { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.mfx-cube i:nth-child(1) { transform: translateZ(calc(var(--z, 35px))); }
.mfx-cube.c1 i { --z: 22px; } .mfx-cube.c2 i { --z: 14px; }
.mfx-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(var(--z, 35px)); }
.mfx-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(var(--z, 35px)); }
.mfx-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(var(--z, 35px)); }
.mfx-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(var(--z, 35px)); }
.mfx-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(var(--z, 35px)); }
@keyframes mfx-spin { from { transform: rotateX(-20deg) rotateY(0); } to { transform: rotateX(340deg) rotateY(360deg); } }
html[data-mood-e="E1"] .hero-title { text-shadow: 1px 1px 0 color-mix(in srgb, var(--accent) 40%, transparent), 2px 2px 0 color-mix(in srgb, var(--accent) 28%, transparent), 3px 3px 0 color-mix(in srgb, var(--accent) 16%, transparent); }
html[data-mood-e="E1"] .collage { transform: translate(calc(var(--m-px, 0) * 18px), calc(var(--m-py, 0) * 18px)); transition: transform .5s ease-out; }
html[data-mood-e="E1"] .m-tilt { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-4px) !important; transition: transform .12s ease-out !important; }

/* E2. 시네마틱 비디오 백그라운드 — 흐르는 빛 · 불씨 · 필름 레터박스 · 사진 켄번스 */
.mfx-light { width: 60vmax; height: 40vmax; border-radius: 50%; filter: blur(80px); opacity: calc(.16 + var(--m-glow) * .12); mix-blend-mode: screen; }
html[data-mood-scheme="light"] .mfx-light { mix-blend-mode: multiply; opacity: .12; }
.mfx-light.l1 { left: -20vmax; top: 10vh; background: var(--accent); animation: mfx-drift1 calc(28s / var(--m-motion)) ease-in-out infinite alternate; }
.mfx-light.l2 { right: -20vmax; top: 40vh; background: var(--accent2); animation: mfx-drift2 calc(36s / var(--m-motion)) ease-in-out infinite alternate; }
.mfx-light.l3 { left: 20vw; bottom: -20vmax; background: var(--m-soft1); animation: mfx-drift1 calc(44s / var(--m-motion)) ease-in-out infinite alternate-reverse; }
@keyframes mfx-drift1 { from { transform: translate(0, 0) scale(1); } 50% { opacity: calc(.08 + var(--m-glow) * .1); } to { transform: translate(30vw, -12vh) scale(1.25); } }
@keyframes mfx-drift2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-26vw, 10vh) scale(.9); } }
.mfx-ember { left: var(--x); bottom: -20px; width: calc(var(--s) * 5px); height: calc(var(--s) * 5px); border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 calc(6px + var(--m-glow) * 10px) var(--accent); opacity: 0;
  animation: mfx-ember calc(var(--du) / var(--m-motion)) linear var(--dl) infinite; }
@keyframes mfx-ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 70% { opacity: .5; } 100% { transform: translate(calc(var(--h) * 1px - 20px), -105vh); opacity: 0; } }
html[data-mood-e="E2"] .hero { position: relative; }
html[data-mood-e="E2"] .hero::before, html[data-mood-e="E2"] .hero::after {
  content: ""; position: absolute; left: 50%; width: 100vw; height: 10px; transform: translateX(-50%); pointer-events: none;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--fg) 22%, transparent) 0 14px, transparent 14px 26px);
}
html[data-mood-e="E2"] .hero::before { top: -6px; }
html[data-mood-e="E2"] .hero::after { bottom: 8px; }
html[data-mood-e="E2"] .cc .fig-in > img, html[data-mood-e="E2"] .cc .fig-in > svg,
html[data-mood-e="E2"] .hc-fig .fig-in > img, html[data-mood-e="E2"] .hc-fig .fig-in > svg { animation: mfx-kenburns calc(18s / var(--m-motion)) ease-in-out infinite alternate; }
@keyframes mfx-kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-3%, -2%); } }
html[data-mood-e="E2"] .hero-title { text-shadow: 0 0 calc(20px + var(--m-glow) * 30px) color-mix(in srgb, var(--accent) calc(var(--m-glow) * 45%), transparent); }

/* E3. 타이포그래피 중심 — 배경의 거대한 매장 이름 · 큰 제목 · 넓은 자간 */
.mfx-type { right: -3vw; top: 6vh; font-family: var(--font-display); font-size: 26vw; line-height: .82; font-weight: 800; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 9%, transparent); writing-mode: vertical-rl; text-transform: uppercase; }
.mfx-type.t2 { left: -2vw; right: auto; top: auto; bottom: -4vh; writing-mode: horizontal-tb; font-size: 14vw; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 28%, transparent);
  animation: mfx-slide calc(60s / var(--m-motion)) linear infinite alternate; }
@keyframes mfx-slide { to { transform: translateX(-18vw); } }
.mfx-rule { left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 35%, transparent), transparent); }
html[data-mood-e="E3"] .hero-title { line-height: 1; letter-spacing: calc(var(--title-spacing) - .01em); }
html[data-mood-e="E3"] .eyebrow, html[data-mood-e="E3"] .kicker { letter-spacing: .32em; }
html[data-mood-e="E3"] .page-title { line-height: 1.02; }
html[data-mood-e="E3"] .marquee-track { font-size: calc(clamp(1.5rem, 3.6vw, 2.6rem) * var(--display-scale)); }
html[data-mood-e="E3"] .hero-sub { font-size: 1.12rem; max-width: 40ch; }

/* E4. 라이프스타일 대형 화보 — 사진을 크고 꽉 차게, 틀 없이 */
.mfx-wash { inset: 0; background: radial-gradient(120% 70% at 85% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--accent2) 8%, transparent), transparent 60%); }
@media (min-width: 901px) { html[data-mood-e="E4"] .hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); } }  /* 매장 CSS 의 모바일 1단(≤900px)을 덮지 않게 */
html[data-mood-e="E4"] .collage { max-width: 760px; }
html[data-mood-e="E4"] .cc-frame { padding: 0; border: 0; }
html[data-mood-e="E4"] .cc figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
html[data-mood-e="E4"] .cc-frame { position: relative; overflow: hidden; }
html[data-mood-e="E4"] .hc-fig { aspect-ratio: 4 / 3; }
html[data-mood-e="E4"] .home-cards { gap: 14px; }
html[data-mood-e="E4"] .gallery-grid { gap: 10px; }
html[data-mood-e="E4"] .gitem, html[data-mood-e="E4"] .mcard { border: 0; }
html[data-mood-e="E4"] .ab-fig, html[data-mood-e="E4"] .sig-fig { aspect-ratio: 16 / 11; }

/* E5. 파스텔/일러스트 그래픽 — 파스텔 덩어리 · 둥실 떠다니는 도형 */
.mfx-blob { width: 38vmax; height: 38vmax; filter: blur(50px); opacity: .55; border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%;
  animation: mfx-morph calc(22s / var(--m-motion)) ease-in-out infinite alternate; }
html[data-mood-scheme="dark"] .mfx-blob { opacity: .22; }
.mfx-blob.b1 { left: -10vmax; top: -8vmax; background: var(--m-soft1); }
.mfx-blob.b2 { right: -12vmax; top: 30vh; background: var(--m-soft2); animation-duration: calc(28s / var(--m-motion)); }
.mfx-blob.b3 { left: 30vw; bottom: -18vmax; background: var(--m-soft3); animation-duration: calc(34s / var(--m-motion)); }
@keyframes mfx-morph { from { border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%; transform: rotate(0) scale(1); } to { border-radius: 60% 40% 35% 65% / 55% 62% 38% 45%; transform: rotate(40deg) scale(1.1); } }
.mfx-doodle { left: var(--x); top: var(--y); width: calc(var(--s) * 34px); height: calc(var(--s) * 34px); opacity: .7;
  animation: mfx-bob calc(var(--du) / var(--m-motion)) ease-in-out var(--dl) infinite alternate; }
.mfx-doodle:nth-child(4n) { border-radius: 50%; background: var(--m-soft1); }
.mfx-doodle:nth-child(4n+1) { border: 3px solid var(--m-soft2); border-radius: 50%; }
.mfx-doodle:nth-child(4n+2) { background: var(--m-soft3); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.mfx-doodle:nth-child(4n+3) { height: calc(var(--s) * 12px); border-radius: 99px; background: var(--m-soft2); }
@keyframes mfx-bob { from { transform: translateY(0) rotate(0); } to { transform: translateY(-30px) rotate(30deg); } }
html[data-mood-e="E5"] .card { border-radius: calc(var(--radius-lg) + 8px); }
html[data-mood-e="E5"] .badge { border-radius: 999px; }
html[data-mood-e="E5"] .hero-title .ht-line:nth-child(2) { background: linear-gradient(transparent 62%, var(--m-soft1) 62%); color: var(--fg); display: inline; }

/* =========================================================
   D. 디자인 스타일 — 장식
   ========================================================= */

/* D1. 미니멀 모던 — 가는 선 · 작은 대문자 · 그림자 없음 */
html[data-mood-d="D1"] .main-nav a { font-size: .8rem; letter-spacing: .08em; }
html[data-mood-d="D1"] .eyebrow::before, html[data-mood-d="D1"] .kicker::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: middle; background: currentColor; }
html[data-mood-d="D1"] .card { border-width: 0 0 1px; border-radius: 0; background: transparent; }
html[data-mood-d="D1"] .home-card, html[data-mood-d="D1"] .mcard { background: transparent; }
html[data-mood-d="D1"] .btn { letter-spacing: .06em; }
html[data-mood-d="D1"] .page-head { border-left: 1px solid var(--line-strong); padding-left: 22px; }

/* D2. 클래식 헤리티지 — 가운데 정렬 머리글 · 겹선 장식 · 금테 액자 */
html[data-mood-d="D2"] .page-head { text-align: center; margin-inline: auto; }
html[data-mood-d="D2"] .page-head .page-lead { margin-inline: auto; }
html[data-mood-d="D2"] .page-head::before, html[data-mood-d="D2"] .page-head::after {
  content: ""; display: block; width: min(300px, 70%); height: 7px; margin: 0 auto 18px;
  border-block: 1px solid var(--accent); opacity: .7;
}
html[data-mood-d="D2"] .page-head::after { margin: 18px auto 0; }
html[data-mood-d="D2"] .brand-mark { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent); }
html[data-mood-d="D2"] .eyebrow, html[data-mood-d="D2"] .kicker { font-family: var(--font-display); font-size: .9rem; letter-spacing: .24em; font-weight: 600; }
html[data-mood-d="D2"] .ab-fig, html[data-mood-d="D2"] .sig-fig { outline: 1px solid var(--accent); outline-offset: 6px; }
html[data-mood-d="D2"] .ht-line:nth-child(2) { font-style: italic; }
html[data-mood-d="D2"] .card { position: relative; }
html[data-mood-d="D2"] .btn { letter-spacing: .1em; }

/* D3. 내추럴 오가닉 — 유기적인 사진 모양 · 잎사귀 구분선 */
html[data-mood-d="D3"] .ab-fig, html[data-mood-d="D3"] .sig-fig { border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%; }
html[data-mood-d="D3"] .ab-block:nth-child(even) .ab-fig { border-radius: 44% 56% 58% 42% / 52% 44% 56% 48%; }
html[data-mood-d="D3"] .page-head::after {
  content: ""; display: block; width: 60px; height: 16px; margin-top: 16px;
  background: radial-gradient(ellipse 8px 5px at 25% 50%, var(--accent2) 98%, transparent), radial-gradient(ellipse 8px 5px at 60% 50%, var(--accent) 98%, transparent), radial-gradient(circle 3px at 90% 50%, var(--accent2) 98%, transparent);
}
html[data-mood-d="D3"] .ht-line:nth-child(2) { font-style: italic; }

/* D4. 시네마틱 스토리텔링 — 장면 번호 같은 머리글 · 비네트 · 큰 제목 */
.mfx-vignette { inset: 0; background: radial-gradient(ellipse at center, transparent 50%, color-mix(in srgb, #000 calc(18% + var(--m-glow) * 12%), transparent) 100%); }
html[data-mood-scheme="light"] .mfx-vignette { opacity: .5; }
html[data-mood-d="D4"] .page-head { position: relative; padding-top: 28px; }
html[data-mood-d="D4"] .page-head::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 3px; background: var(--accent); }
html[data-mood-d="D4"] .eyebrow, html[data-mood-d="D4"] .kicker { letter-spacing: .3em; font-weight: 600; }
html[data-mood-d="D4"] .hero-title { line-height: 1.04; }
html[data-mood-d="D4"] .ab-fig, html[data-mood-d="D4"] .sig-fig { aspect-ratio: 21 / 11; }
html[data-mood-d="D4"] .page.enter .page-head { animation: mfx-reveal 1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mfx-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* D5. 팝/힙스터 브루탈리즘 — 굵은 선 · 딱딱한 그림자 · 형광펜 · 기울어진 배지 */
html[data-mood-d="D5"] .btn, html[data-mood-d="D5"] .lang-btn, html[data-mood-d="D5"] .btn-login, html[data-mood-d="D5"] .tabs button { border: 2.5px solid var(--m-ink); font-weight: 700; }
html[data-mood-d="D5"] .btn-primary:hover { transform: translate(-2px, -2px); }
html[data-mood-d="D5"] .page-title { display: inline; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--accent2) 55%, transparent) 60%); }
html[data-mood-d="D5"] .page-lead { margin-top: 16px; }
html[data-mood-d="D5"] .badge { transform: rotate(-5deg); border: 2px solid var(--m-ink); box-shadow: 2px 2px 0 var(--m-ink); }
html[data-mood-d="D5"] .marquee { transform: rotate(-1.2deg); border: 2.5px solid var(--m-ink); margin-inline: -10px; }
html[data-mood-d="D5"] .ab-fig, html[data-mood-d="D5"] .sig-fig, html[data-mood-d="D5"] .map-fig { border: 2.5px solid var(--m-ink); }
html[data-mood-d="D5"] .main-nav a { text-transform: uppercase; font-weight: 700; }
html[data-mood-d="D5"] .site-header { border-bottom: 2.5px solid var(--m-ink); }

/* =========================================================
   C. 메인 톤 — 톤만의 마감
   ========================================================= */
/* C1. 다크/메탈릭 — 금속광 제목 */
html[data-mood-c="C1"] .hero-title .ht-line:nth-child(2) {
  background: linear-gradient(100deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 35%, #fff) 45%, var(--accent) 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-mood-c="C1"][data-mood-e="E5"] .hero-title .ht-line:nth-child(2) { -webkit-background-clip: border-box; background-clip: border-box; color: var(--fg); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 40%, transparent) 62%); }
/* C4. 딥 컬러 — 고급스러운 금빛 테두리 머리 */
html[data-mood-c="C4"] .site-header { border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent); }

/* =========================================================
   B. 식사 맥락 — 분위기 마감
   ========================================================= */
html[data-mood-b="B2"] .ht-line:nth-child(2) { font-style: italic; }
html[data-mood-b="B3"] .eyebrow, html[data-mood-b="B3"] .kicker { display: inline-block; padding: .25em .7em; border: 1px solid currentColor; border-radius: 2px; }
html[data-mood-b="B5"] .brand-name { text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
html[data-mood-b="B5"] .main-nav a[aria-current="page"] { text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); }
html[data-mood-b="B5"] .price, html[data-mood-b="B5"] .sig-meta strong { text-shadow: 0 0 10px color-mix(in srgb, var(--accent2) 50%, transparent); }
html[data-mood-b="B1"] .eyebrow, html[data-mood-b="B1"] .kicker { color: var(--muted); }

/* =========================================================
   관리자 미리보기 카드 — 배경 효과를 작게
   ========================================================= */
.look-card[data-mood-e="E1"] .lc-fx { background: linear-gradient(color-mix(in srgb, var(--accent) 30%, transparent) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, color-mix(in srgb, var(--accent2) 22%, transparent) 1px, transparent 1px) 0 0 / 18px 18px; -webkit-mask-image: linear-gradient(to top, #000, transparent 75%); mask-image: linear-gradient(to top, #000, transparent 75%); }
.look-card[data-mood-e="E2"] .lc-fx { background: radial-gradient(60% 50% at 20% 40%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), radial-gradient(50% 40% at 85% 75%, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 70%); box-shadow: inset 0 14px 0 -6px #000, inset 0 -14px 0 -6px #000; }
.look-card[data-mood-e="E3"] .lc-fx::after { content: "Aa"; position: absolute; right: -6px; bottom: -28px; font-family: var(--font-display); font-size: 110px; line-height: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 16%, transparent); }
.look-card[data-mood-e="E4"] .lc-fx { background: linear-gradient(120deg, transparent 55%, color-mix(in srgb, var(--accent) 22%, transparent) 55% 100%); }
.look-card[data-mood-e="E5"] .lc-fx { background: radial-gradient(circle at 85% 20%, var(--m-soft1) 0 22px, transparent 23px), radial-gradient(circle at 70% 80%, var(--m-soft2) 0 14px, transparent 15px), radial-gradient(circle at 95% 60%, var(--m-soft3) 0 9px, transparent 10px); opacity: .9; }
.look-card[data-mood-c="C1"] .lc-name { background: linear-gradient(100deg, var(--fg), color-mix(in srgb, var(--accent) 60%, #fff), var(--fg)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lc-code { position: relative; align-self: flex-start; padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); border-radius: 4px; color: var(--muted); font: 600 .62rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .mfx-floor, .mfx-cube, .mfx-light, .mfx-ember, .mfx-type, .mfx-blob, .mfx-doodle { animation: none !important; }
  html[data-mood-e="E2"] .fig-in > img, html[data-mood-e="E2"] .fig-in > svg { animation: none !important; }
}