/*
 * DEMO_VIDEO_01 — the "20초 시연" menu card (plum-demo-card.tsx) and its full-screen player.
 * Loaded only when a host shows the card (FORYOUTUNE_PRELOGIN open), always after promo.css:
 * the card is built from the home promo card's own classes so width, radius and padding
 * scale are the Halloween card's; everything here is scoped to .appV2Demo / .appV2DemoSheet
 * or to a host carrying [data-has-demo].
 */
[data-app-design-v2] .appV2Demo { margin-block: 0 20px; }
[data-app-design-v2] .appV2DemoCard {
  grid-template-areas: "copy art";
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 12px;
  border: 1px solid rgb(255 255 255 / 14%);
  background: radial-gradient(ellipse at 80% 30%, rgb(255 132 31 / 28%) 0%, transparent 58%),
    linear-gradient(120deg, #4e2c3c 0%, #7a3a52 100%);
  color: #f6f1ec;
  box-shadow: 0 8px 20px rgb(68 35 40 / 16%);
}
[data-app-design-v2] .appV2DemoBadge { background: #ff841f; color: #3b192f; }
[data-app-design-v2] .appV2DemoTitle {
  margin-block: 10px 6px;
  color: #f6f1ec;
  font-size: clamp(20px, 6.4cqi, 30px);
  line-height: 1.25;
}
[data-app-design-v2] .appV2DemoSub { color: #dccbd2; font-size: clamp(12px, 3.3cqi, 15px); }
[data-app-design-v2] .appV2DemoArt { justify-content: flex-end; }
[data-app-design-v2] .appV2DemoThumb {
  position: relative;
  display: block;
  /* The whole 9:16 poster; 194px + the card's 2 × 18px padding = the Halloween card's ~230px height. */
  block-size: 194px;
  inline-size: auto;
  max-inline-size: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 14px;
  background: #f6f1ec;
  box-shadow: 0 6px 16px rgb(18 11 22 / 35%);
}
[data-app-design-v2] .appV2DemoPoster { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
[data-app-design-v2] .appV2DemoPlayMark {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #ff841f;
  color: #3b192f;
  box-shadow: 0 4px 12px rgb(18 11 22 / 40%);
}
[data-app-design-v2] .appV2DemoPlayMark .appV2Icon { inline-size: 20px; block-size: 20px; margin-inline-start: 2px; }
/* The whole card is one real button stretched over it. */
[data-app-design-v2] .appV2DemoOpen {
  position: absolute;
  inset: 0;
  z-index: 2;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
[data-app-design-v2] .appV2DemoOpen:focus-visible { outline: 3px solid #ff841f; outline-offset: -4px; }
[data-app-design-v2] .appV2DemoSrOnly { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The full-screen player. */
[data-app-design-v2] .appV2DemoSheet {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  margin: 0;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100dvh;
  max-block-size: none;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #120b16;
  color: #f6f1ec;
  font: 400 1rem/1.5 var(--app-v2-font);
}
[data-app-design-v2] .appV2DemoSheet::backdrop { background: rgb(18 11 22 / 94%); }
[data-app-design-v2] .appV2DemoStage {
  box-sizing: border-box;
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  padding: calc(max(12px, env(safe-area-inset-top, 0px)) + 56px) 0 max(16px, env(safe-area-inset-bottom, 0px));
}
[data-app-design-v2] .appV2DemoVideo {
  display: block;
  inline-size: min(100%, calc((100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 9 / 16));
  block-size: auto;
  aspect-ratio: 9 / 16;
  background: #000;
  object-fit: contain;
}
[data-app-design-v2] .appV2DemoClose {
  position: absolute;
  inset: max(12px, env(safe-area-inset-top, 0px)) 16px auto auto;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 10px 16px;
  border: 1px solid currentColor;
  border-radius: 24px;
  background: transparent;
  color: inherit;
  font: 700 1rem/1.5 var(--app-v2-font);
  cursor: pointer;
}
[data-app-design-v2] .appV2DemoClose:focus-visible { outline: 3px solid #ff841f; outline-offset: 3px; }

/*
 * Plain welcome screen: the card sits in the slot directly under the brand row and keeps the home card's size
 * where the screen is tall enough (>= 800px high); below that it is compacted and the mascot stage yields, so
 * nothing below it (the sheet, 시작하기) is pushed off the first screen. The scene carries [data-has-demo].
 */
[data-app-design-v2] .appV2Scene-welcome[data-has-demo] .appV2Demo { margin-block: 8px; }
@media (max-height: 799px) {
  [data-app-design-v2] .appV2Scene-welcome[data-has-demo] .appV2DemoCard { padding: 12px; gap: 10px; }
  [data-app-design-v2] .appV2Scene-welcome[data-has-demo] .appV2DemoTitle { margin-block: 8px 4px; font-size: clamp(18px, 5.6cqi, 24px); }
  [data-app-design-v2] .appV2Scene-welcome[data-has-demo] .appV2DemoSub { font-size: clamp(11px, 3cqi, 14px); }
  [data-app-design-v2] .appV2Scene-welcome[data-has-demo] .appV2DemoThumb { block-size: 112px; }
  [data-app-design-v2] .appV2Scene-welcome[data-has-demo] .appV2DemoPlayMark { inline-size: 32px; block-size: 32px; }
  [data-app-design-v2] .appV2Scene-welcome[data-has-demo] .appV2DemoPlayMark .appV2Icon { inline-size: 16px; block-size: 16px; }
}
@media (min-height: 800px) {
  [data-app-design-v2] .appV2Scene-welcome[data-has-demo] .appV2PlumStage .appV2Mascot.appV2Mascot { width: clamp(56px, calc(100dvh - 770px), 220px); }
}
@media (min-height: 746px) and (max-height: 799px) {
  [data-app-design-v2] .appV2Scene-welcome[data-has-demo] .appV2PlumStage .appV2Mascot.appV2Mascot { width: clamp(56px, calc(100dvh - 690px), 220px); }
}
@media (max-height: 745px) {
  [data-app-design-v2] .appV2Scene-welcome[data-has-demo] .appV2PlumStage.appV2PlumStage { display: none; }
}

/*
 * The COMPACT size: a slim banner (about 100px) — small poster at the left, badge + title at the right. Used on the
 * seasonal (Halloween) welcome dialog, directly under its top bar. Same single stretched button as the full size.
 */
[data-app-design-v2] .appV2DemoCompact { margin-block: 0; }
[data-app-design-v2] .appV2DemoCompact .appV2DemoCard {
  grid-template-areas: "art copy";
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  min-block-size: 0;
  align-items: center;
}
[data-app-design-v2] .appV2DemoCompact .appV2DemoArt { justify-content: flex-start; }
[data-app-design-v2] .appV2DemoCompact .appV2DemoThumb {
  block-size: 72px;
  inline-size: 58px;
  aspect-ratio: auto;
  border-radius: 10px;
}
[data-app-design-v2] .appV2DemoCompact .appV2DemoPlayMark { inline-size: 26px; block-size: 26px; }
[data-app-design-v2] .appV2DemoCompact .appV2DemoPlayMark .appV2Icon { inline-size: 13px; block-size: 13px; margin-inline-start: 1px; }
[data-app-design-v2] .appV2DemoCompact .appV2DemoTitle {
  margin-block: 6px 0;
  font-size: clamp(16px, 5.2cqi, 20px);
  line-height: 1.3;
}

/* Seasonal welcome (S35 dialog): the slim banner under the top bar; the stage gives up the height it uses. */
[data-app-design-v2] .appV2EventDialog[data-has-demo] .appV2Demo { inline-size: auto; margin: 8px 8px 0; }
[data-app-design-v2] .appV2EventDialog[data-has-demo] {
  --app-v2-demo-space: 106px;
  --app-v2-event-stage-max: calc(100dvh - 354px - var(--app-v2-demo-space) - max(12px, env(safe-area-inset-top, 0px)) + 2.8 * (2.5rem - clamp(1.625rem, 8vw, 2.5rem)));
}
[data-app-design-v2] .appV2EventDialog[data-has-demo] .appV2EventStage { max-height: min(440px, max(96px, var(--app-v2-event-stage-max))); }
[data-app-design-v2] .appV2EventDialog[data-has-demo] .appV2EventMascot { width: min(46%, calc((min(440px, max(96px, var(--app-v2-event-stage-max))) - 16%) * 1.06)); }

/* HOME_MESSAGE_SNS_01 — the home's "20초면 이해돼요" picture card (PlumDemoArtCard); the player above is shared. */
[data-app-design-v2] .appV2HomeDemo { margin-block: 26px 0; }
[data-app-design-v2] .appV2HomeDemoCard { position: relative; box-sizing: border-box; aspect-ratio: 1170 / 480; overflow: hidden; padding: 12px 14px; border-radius: 20px; background: var(--app-v2-surface); box-shadow: 0 1px 2px #231a1e14, 0 0 0 1px var(--app-v2-rule); }
[data-app-design-v2] .appV2HomeDemoArt { position: absolute; inset: 0; z-index: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; user-select: none; }
[data-app-design-v2] .appV2HomeDemoCard > :not(.appV2HomeDemoArt):not(.appV2DemoOpen):not(.appV2HomeDemoPlay) { position: relative; z-index: 1; }
[data-app-design-v2] .appV2HomeDemoTag { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #c4513c1f; color: var(--app-v2-secondary); font: 800 11.5px/1.4 var(--app-v2-font); }
[data-app-design-v2] .appV2HomeDemoTitle { margin: 6px 0 0; font: 700 19px/1.25 var(--app-v2-font-display); color: var(--app-v2-ink); }
[data-app-design-v2] .appV2HomeDemoSub { margin: 4px 0 0; color: var(--app-v2-muted); font: 400 11.5px/1.4 var(--app-v2-font); }
[data-app-design-v2] .appV2HomeDemoCard > .appV2HomeDemoPlay { position: absolute; z-index: 1; left: 64.5%; top: 52%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--app-v2-plum); color: #fff; transform: translate(-50%, -50%); box-shadow: 0 6px 14px #4e2c3c55; }
[data-app-design-v2] .appV2HomeDemoPlay .appV2Icon { width: 16px; height: 16px; margin-left: 2px; }