/* ==========================================================================
   msg-intro.css — 첫 화면(인트로, data/skin/front/intro.htm)
   그림·햇살·잎 그림자·먼지는 원본(LODELLA-intro v8 style.css)의 최종 값 그대로 옮겼다.
   글자·단추는 MSG 토큰(msg-tokens.css, 회원 = data-age="mid")을 쓴다.
   색은 그림에서 한 벌: 벽 #ECE5DB · 글자 #3F3D37 · 보조 글자 #4E4B43(벽 위 7:1) · 올리브 녹색 #344A3E · 단추 바탕 #F8F4E9
   ========================================================================== */

.intro {
  --in-wall: #ECE5DB;
  --in-ink: #3F3D37;
  --in-ink-2: #4E4B43;
  --in-leaf: #344A3E;
  --in-leaf-2: #2A3D33;
  --in-paper: #F8F4E9;
  --in-line: rgba(78, 75, 67, .30);
  --focus-ring: var(--in-leaf);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body.intro { background: var(--in-wall); color: var(--in-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}

/* ---------- 그림 (원본 값) ----------
   .picture = 그림이 실제로 그려지는 사각형(그림 비율 1672:941 그대로). 나비·먼지는 이 사각형을 잰다(msg-intro.js).
   PC  : 화면 안에 전체가 들어가게(잘림 없음). 남는 위아래(또는 좌우) 띠는 같은 그림을 흐리게 깔아 메우고 경계는 흐린다.
   폰  : 아래 @media 에서 제품 부분만 크게, 제목 부분은 .scene-title 로 따로. */
.morning { position: fixed; inset: 0; isolation: isolate; overflow: hidden; }
.scene-bg {
  position: absolute; left: -40px; top: -40px; z-index: -3;
  width: calc(100% + 80px); height: calc(100% + 80px);
  object-fit: cover; filter: blur(30px); opacity: .92; pointer-events: none;
}
.scene-title { display: none; }
.picture {
  position: absolute; left: 50%; top: 50%; z-index: -2;
  width: min(100vw, 177.68vh); height: min(56.28vw, 100vh);
  transform: translate(-50%, -50%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--in-wall);
}
.foliage-window {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 81%, #000 87%);
  mask-image: linear-gradient(90deg, transparent 81%, #000 87%);
}
.foliage-window img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: 87% 52%; animation: leaf-wind 5.5s ease-in-out infinite alternate;
}
@keyframes leaf-wind {
  0%   { transform: rotate(-.6deg) translate(-3px, 2px); }
  55%  { transform: rotate(.25deg) translate(2px, -1px); }
  100% { transform: rotate(.8deg) translate(5px, -3px); }
}

.sunlight {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .72;
  background: radial-gradient(ellipse at 76% 16%, #fff8dc77 0%, #fff3ca25 27%, transparent 58%);
  animation: morning-light 9s ease-in-out infinite alternate;
}
@keyframes morning-light { from { opacity: .32; } to { opacity: .8; } }

.rays {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 22%, #fffbe33b 38%, #fffceb25 45%, transparent 53%, transparent 62%, #fff6d630 70%, transparent 79%);
  animation: morning-rays 12s ease-in-out infinite alternate;
}
@keyframes morning-rays {
  from { opacity: .35; background-position: -30px 0; }
  to   { opacity: .85; background-position: 30px 0; }
}

.leaf-shadows {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .16; mix-blend-mode: multiply; pointer-events: none;
}
.branch { transform-origin: 85% 0; animation: breeze 5.5s ease-in-out infinite alternate; }
.branch.two { animation-duration: 7.4s; animation-delay: -5s; transform-origin: 100% 10%; }
@keyframes breeze {
  from { transform: rotate(-4deg) translateX(-13px); }
  to   { transform: rotate(4deg) translateX(16px); }
}

#air { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.edge-light {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .3;
  background: radial-gradient(ellipse at 76% 45%, #fffff913, transparent 24%);
  animation: gleam 10s ease-in-out infinite alternate;
}
@keyframes gleam { to { opacity: .8; transform: translateX(6px); } }

/* 움직임 줄이기 (단추 또는 기기 설정) */
.reduced .morning *, .reduced .morning { animation: none !important; }
.reduced .foliage-window, .reduced #air, .reduced .msg-bf { display: none; }
.reduced .sunlight { background: radial-gradient(ellipse at 75% 15%, #fff8dc44, transparent 55%); }

/* ---------- 그림 위 손잡이 ---------- */
.intro-ui {
  position: fixed; inset: 0; z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "logo lang login"
    ".    .    .    "
    "foot foot foot";
  column-gap: var(--sp-3);
  padding: 28px clamp(16px, 4.5vw, 64px) calc(24px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.intro-ui > * { pointer-events: auto; }

.intro-logo { grid-area: logo; justify-self: start; align-self: center; border-radius: var(--r-sm); }
.intro-logo img { width: auto; height: 44px; }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: var(--r-pill);
  border: 1px solid var(--in-line);
  font-family: var(--ff); font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: 1.2;
  color: var(--in-ink); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.pill:active { transform: scale(.97); }
.pill-ico, .pill-chev {
  flex: none; width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.pill-chev { width: 16px; height: 16px; transition: transform var(--dur-ui) var(--ease-out); }
.pill[aria-expanded="true"] .pill-chev { transform: rotate(180deg); }
.pill-glass {
  background: rgba(255, 250, 241, .55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pill-login {
  grid-area: login; align-self: center;
  background: var(--in-leaf); border-color: var(--in-leaf); color: #FFFDF4;
  box-shadow: 0 6px 20px rgba(37, 52, 43, .18);
}
.pill-text { display: inline-block; }
.pill-text::first-letter { text-transform: uppercase; }   /* 영어 번역 'log in' → Log in (다른 글자엔 영향 없음) */
@media (hover: hover) {
  .pill-glass:hover { background: rgba(255, 250, 241, .88); border-color: rgba(78, 75, 67, .5); }
  .pill-login:hover { background: var(--in-leaf-2); border-color: var(--in-leaf-2); }
}

/* 언어 고르기 */
.intro-lang { grid-area: lang; position: relative; align-self: center; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow-y: auto;
  padding: var(--sp-3); border-radius: var(--r-lg);
  background: rgba(251, 248, 242, .95);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(78, 75, 67, .18);
  box-shadow: 0 18px 48px rgba(52, 46, 36, .18);
  transform-origin: top right; animation: menu-in var(--dur-ui) var(--ease-out);
}
.lang-menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.lang-menu-title { margin: 2px 8px 8px; font-size: var(--fs-cap); color: var(--in-ink-2); }
.lang-menu ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.lang-menu button {
  width: 100%; min-height: 48px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--in-ink); text-align: left; cursor: pointer;
  font-family: var(--ff); font-size: var(--fs-body); line-height: 1.2;
  transition: background-color var(--dur-ui) var(--ease-out);
}
.lang-menu button[aria-current="true"] { background: var(--in-leaf); color: #FFFDF4; font-weight: var(--fw-strong); }
@media (hover: hover) {
  .lang-menu button:not([aria-current="true"]):hover { background: rgba(52, 74, 62, .09); }
}

/* 아래 줄: 한 줄 글 · 움직임 · 나비 · 새소리 */
.intro-foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.signature { margin: 0; font-size: var(--fs-cap); color: var(--in-ink-2); text-wrap: balance; }
.controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid rgba(52, 74, 62, .55); background: rgba(248, 244, 233, .8); color: var(--in-leaf);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--ff); font-size: var(--fs-cap); font-weight: var(--fw-strong); line-height: 1.2; cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--in-leaf); border-color: var(--in-leaf); color: #FFFDF4; }
.chip { position: relative; }
.chip-ico {
  display: none; flex: none; width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* 폰에서 글이 두 줄로 넘어가는 언어(러시아어·독일어 등): 그림 단추 한 줄로. 이름은 화면 읽기용으로 남긴다(msg-intro.js 가 줄 수를 재서 붙임) */
.controls.compact { gap: 12px; }
.controls.compact .chip { width: 48px; padding: 0; justify-content: center; }
.controls.compact .chip-ico { display: block; }
.controls.compact .sound-bars { display: none; }
.controls.compact .chip-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.sound-bars { display: flex; align-items: center; gap: 3px; height: 12px; }
.sound-bars i { width: 1.5px; height: 3px; background: currentColor; border-radius: 1px; }
.sound-bars i:nth-child(2) { height: 8px; }
.sound-bars i:nth-child(3) { height: 5px; }
#sound[aria-pressed="true"] .sound-bars i { animation: meter 1s ease-in-out infinite alternate; }
#sound[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: -.4s; }
#sound[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: -.7s; }
@keyframes meter { to { height: 12px; } }

.intro a:focus-visible, .intro button:focus-visible { outline: 2px solid var(--in-leaf); outline-offset: 3px; }

/* ---------- 폰·세로 화면 : 같은 그림을 두 부분으로 — 위는 제목(LODELLA), 아래는 제품을 크게. 로그인은 엄지 닿는 아래 넓은 단추 ----------
   제목 칸 = 그림의 가로 3~47% · 세로 17~47% (가로:세로 2.606)
   제품    = 그림을 화면 폭(최대 560px)의 199% 로 키워 가로 45.5~95.7% 가 보이게. 제목 글자(가로 44% 앞)는 가림막으로 지운다
   아래 값은 기본값이고, msg-intro.js(fit)가 보이는 높이·단추 줄 수를 재서 px 로 다시 넣는다(이 @media 조건 문자열도 거기와 같다) */
@media (max-width: 699.98px), (max-aspect-ratio: 1/1) {
  .intro {
    --tile-w: calc(min(100vw, 560px) - 32px); --tile-top: 80px;
    --pw: calc(min(100vw, 560px) * 1.99);
    --pic-top: calc(var(--tile-top) + var(--tile-w) / 2.606 - var(--pw) * .02814);   /* 제목 칸 밑에서 그림 높이의 5% 겹침 */
    --pic-left: calc(50vw - var(--pw) * .7064);                                      /* 보이는 범위 가운데(그림 가로 70.6%)를 화면 가운데로 */
  }
  .scene-bg { display: none; }
  .scene-title {
    display: block; position: absolute; z-index: -2;
    left: 50%; top: var(--tile-top); width: var(--tile-w); height: calc(var(--tile-w) / 2.606);
    transform: translateX(-50%);
    background: url('/data/skin/common/intro/lodella-morning.webp') 5.357% 24.29% / 227.27% auto no-repeat;
    /* 좌우 흐림은 글자 바로 앞까지(글자 = 칸 가로 8.2~92.8%) — 칸이 좁아져도 네모 테두리가 보이지 않게 */
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(90deg, transparent, #000 8%, #000 93%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(90deg, transparent, #000 8%, #000 93%, transparent);
    mask-composite: intersect;
  }
  .picture {
    left: var(--pic-left); top: var(--pic-top);
    width: var(--pw); height: calc(var(--pw) * .5628); transform: none;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 90%, transparent), linear-gradient(90deg, transparent 44%, #000 47%, #000 97%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent, #000 6%, #000 90%, transparent), linear-gradient(90deg, transparent 44%, #000 47%, #000 97%, transparent);
    mask-composite: intersect;
  }

  .intro-ui {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "logo  lang "
      ".     .    "
      "login login"
      "foot  foot ";
    row-gap: var(--sp-4);
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .intro-logo img { height: 36px; }
  .pill { padding: 0 16px; }
  .pill-login { justify-content: center; justify-self: center; width: min(100%, 440px); min-height: 56px; font-size: var(--fs-lead); }
  .intro-foot { flex-direction: column; gap: var(--sp-3); }
  .signature { text-align: center; }
  .controls { justify-content: center; gap: 8px; }
  .chip { padding: 0 14px; }
}
/* 폰: 그림이 화면보다 좁아지면(키 작은 화면) msg-intro.js 가 그림 오른쪽 끝을 화면 끝에 붙인다(--mask-r: 100%).
   왼쪽은 제목 글자 칸(그림 가로 44% 앞 · 세로 16~46%)만 가려서, 글자 위아래 벽과 돌 선반이 화면 왼쪽 끝까지 이어진다
   → 그림 가장자리가 화면 안에 세로줄로 드러나지 않는다. 겹치는 방법: 위아래 ∩ (오른쪽 ∩ (글자 오른쪽 ∪ 글자 위아래)) */
@media (max-width: 699.98px) {
  .picture {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 90%, transparent), linear-gradient(90deg, #000 var(--mask-r, 97%), transparent), linear-gradient(90deg, transparent 44%, #000 47%), linear-gradient(180deg, #000 12%, transparent 16%, transparent 46%, #000 50%);
    -webkit-mask-composite: source-in, source-in, source-over;
    mask-image: linear-gradient(180deg, transparent, #000 6%, #000 90%, transparent), linear-gradient(90deg, #000 var(--mask-r, 97%), transparent), linear-gradient(90deg, transparent 44%, #000 47%), linear-gradient(180deg, #000 12%, transparent 16%, transparent 46%, #000 50%);
    mask-composite: intersect, intersect, add;
  }
}
/* 키 작은 폰(아이폰 SE, 주소창 보이는 폰): 한 줄 글을 빼서 제품 자리를 늘린다 */
@media (max-width: 699.98px) and (max-height: 740px) {
  .intro { --tile-w: calc((100vw - 32px) * .72); --tile-top: 70px; }
  .signature { display: none; }
}
/* 가로로 눕힌 폰(키 520 이하): 그림을 위 줄 아래로 내리고, 아래 단추는 제품 왼쪽 빈 돌 위로(한 줄 글은 뺀다)
   단추 줄 폭 = 제품 왼쪽 끝(그림 왼쪽 + 그림 폭 47%) - 왼쪽 여백 - 16px. 그림 폭 = min(100vw, 177.68vh) */
@media (min-width: 700px) and (max-height: 520px) {
  .intro-ui { padding-top: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .picture { top: calc(50% + 42px); }
  .signature { display: none; }
  .intro-foot { justify-content: flex-start; }
  .controls { justify-content: flex-start; max-width: calc(50vw - min(50vw, 88.84vh) + min(47vw, 83.51vh) - clamp(16px, 4.5vw, 64px) - 16px); }
}