/* Only the app create host owns this root scroll clearance; the dock stays in flow. */
html:has([data-app-design-v2] .appV2CreatePage .appV2CreateDock) {
  scroll-padding-bottom: var(--app-v2-create-dock-clearance, calc(100px + env(safe-area-inset-bottom, 0px)));
}
[data-app-design-v2] .appV2CreatePage { box-sizing: border-box; max-width: 480px; margin: auto; padding: 24px 20px calc(32px + env(safe-area-inset-bottom, 0px)); color: var(--app-v2-ink); font: 400 1rem/1.75 var(--app-v2-font); overflow-wrap: anywhere; }
[data-app-design-v2] .appV2CreateTitle { font: 700 clamp(1.625rem, 8vw, 2.5rem)/1.5 var(--app-v2-font-display); color: var(--app-v2-ink); margin: 12px 0 24px; }
[data-app-design-v2] .appV2CreateProgress { color: var(--app-v2-plum); letter-spacing: .12em; font-weight: 700; border-bottom: 3px solid var(--app-v2-plum); padding-bottom: 12px; }
[data-app-design-v2] .appV2CreateSection { border: 0; padding: 0; margin: 28px 0; min-width: 0; }
[data-app-design-v2] .appV2CreateGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
[data-app-design-v2] .appV2CreateChoice { box-sizing: border-box; width: 100%; min-width: 44px; min-height: 56px; padding: 14px 12px; border: 1px solid var(--app-v2-rule); border-radius: 20px; color: var(--app-v2-ink); background: var(--app-v2-surface); font: 600 1rem/1.6 var(--app-v2-font); overflow-wrap: anywhere; cursor: pointer; }
[data-app-design-v2] .appV2CreateChoice[aria-pressed="true"] { border: 2px solid var(--app-v2-plum); padding: 13px 11px; color: var(--app-v2-plum); background: var(--app-v2-panel); }
[data-app-design-v2] .appV2CreateChoice:disabled { opacity: .55; cursor: default; }
[data-app-design-v2] .appV2CreateDescription { font-size: .875rem; margin-block: 8px; }
[data-app-design-v2] .appV2CreateSummaryControl { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
[data-app-design-v2] .appV2CreateLabel { display: grid; gap: 8px; margin: 18px 0; }
[data-app-design-v2] .appV2CreateLetterInput { width: 100%; min-height: 15rem; resize: vertical; scroll-margin-block: 6rem; font-family: var(--app-v2-font-display); }
[data-app-design-v2] .appV2CreateLetter, [data-app-design-v2] .appV2CreateLyrics { white-space: pre-wrap; padding: 24px 20px; border: 1px solid var(--app-v2-rule); border-radius: 24px; background: var(--app-v2-surface); font: 500 1.125rem/2 var(--app-v2-font-display); overflow-wrap: anywhere; }
[data-app-design-v2] .appV2CreateConsents { min-width: 0; border: 1px solid var(--app-v2-rule); border-radius: 24px; background: var(--app-v2-surface); padding: 20px; margin-block: 24px; }
[data-app-design-v2] .appV2CreateConsentRow { margin-block: 16px; }
[data-app-design-v2] .appV2CreateCheck { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; }
[data-app-design-v2] .appV2CreateCheckbox { flex: 0 0 44px; width: 44px; height: 44px; margin: 0; accent-color: var(--app-v2-plum); }
[data-app-design-v2] .appV2CreateLink { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 10px 12px; border: 0; background: transparent; color: var(--app-v2-plum); font: 600 .9375rem/1.6 var(--app-v2-font); text-underline-offset: 4px; cursor: pointer; }
[data-app-design-v2] .appV2CreateNotice { padding: 16px; margin-block: 20px; border: 1px solid var(--app-v2-rule); border-radius: 16px; background: var(--app-v2-panel); color: var(--app-v2-ink); }
[data-app-design-v2] .appV2CreateHint { color: var(--app-v2-muted); font-size: .875rem; }
[data-app-design-v2] .appV2CreateLegal.appV2CreateLegal { background: var(--app-v2-paper); color: var(--app-v2-ink); font-family: var(--app-v2-font); }
[data-app-design-v2] .appV2CreateLegalArticle.appV2CreateLegalArticle { background: var(--app-v2-paper); color: var(--app-v2-ink); }
[data-app-design-v2] .appV2CreateChoice:focus-visible, [data-app-design-v2] .appV2CreateLink:focus-visible, [data-app-design-v2] .appV2CreateSummaryControl:focus-visible, [data-app-design-v2] .appV2CreateCheckbox:focus-visible { outline: var(--app-v2-focus); outline-offset: 3px; }
[data-app-design-v2] .appV2BetaPage.appV2BetaPage { background: var(--app-v2-paper); color: var(--app-v2-ink); font-family: var(--app-v2-font); height: auto; min-height: 100dvh; overflow: visible; }
[data-app-design-v2] .appV2BetaScene { max-width: 480px; margin: auto; padding: 24px 20px calc(32px + env(safe-area-inset-bottom, 0px)); }
[data-app-design-v2] .appV2BetaTitle.appV2BetaTitle { color: var(--app-v2-ink); font-family: var(--app-v2-font-display); line-height: 1.5; overflow-wrap: anywhere; }
[data-app-design-v2] .appV2BetaText.appV2BetaText { color: var(--app-v2-ink); font-family: var(--app-v2-font); overflow-wrap: anywhere; }
[data-app-design-v2] .appV2BetaCard.appV2BetaCard { background: var(--app-v2-surface); border-color: var(--app-v2-rule); color: var(--app-v2-ink); font-family: var(--app-v2-font); }
[data-app-design-v2] .appV2BetaButton.appV2BetaButton { min-height: 44px; min-width: 44px; color: var(--app-v2-on-night); background: var(--app-v2-gradient); border-radius: 28px; border-color: var(--app-v2-rule); font: 600 1rem/1.6 var(--app-v2-font); padding: 12px 18px; overflow-wrap: anywhere; }
[data-app-design-v2] .appV2BetaInput.appV2BetaInput { min-height: 48px; background: var(--app-v2-surface); color: var(--app-v2-ink); border-color: var(--app-v2-rule); font: 400 1rem/1.6 var(--app-v2-font); }
[data-app-design-v2] .appV2BetaActions { margin-block: 24px; display: grid; gap: 12px; }
[data-app-design-v2] .appV2BetaButton:focus-visible, [data-app-design-v2] .appV2BetaInput:focus-visible { outline: var(--app-v2-focus); outline-offset: 3px; }
[data-app-design-v2] .appV2BetaIntro { min-height: 100dvh; display: grid; place-items: center; background: var(--app-v2-night); color: var(--app-v2-on-night); }
[data-app-design-v2] .appV2BetaIntroSkip { min-width: 44px; min-height: 44px; padding: 36px 20px; border: 0; background: transparent; color: inherit; font: 500 1.75rem/1.7 var(--app-v2-font-display); }
[data-app-design-v2] .appV2BetaIntroSkip:focus-visible { outline: var(--app-v2-focus); outline-offset: 3px; }
@media (max-width: 360px) { [data-app-design-v2] .appV2CreatePage { padding-inline: 16px; } }
@media (max-width: 320px) { [data-app-design-v2] .appV2CreateGrid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 430px) { [data-app-design-v2] .appV2CreatePage { padding-inline: 24px; } }

/* PX-N prototype composition. All decoration is inert; controllers stay upstream. */
[data-app-design-v2] .appV2CreatePage { padding-top: 12px; }
[data-app-design-v2] .appV2CreateTitle { font-size: clamp(1.625rem, 7vw, 2rem); line-height: 1.35; margin: 10px 0 20px; word-break: keep-all; }
[data-app-design-v2] .appV2CreateHeading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
[data-app-design-v2] .appV2CreateHeading .appV2Mascot { position:static; width:84px; height:auto; flex:none; transform:rotate(-4deg); }
[data-app-design-v2] .appV2CreateTracks { display:flex; gap:6px; }
[data-app-design-v2] .appV2CreateTracks .appV2CreateTrack { flex:1; height:4px; border-radius:2px; background:var(--app-v2-rule); }
[data-app-design-v2] .appV2CreateTracks .appV2CreateTrack[data-filled="true"] { background:var(--app-v2-plum); }
[data-app-design-v2] .appV2CreateProgress { border:0; padding:0; margin:16px 0; color:var(--app-v2-muted); font-size:.8125rem; letter-spacing:0; font-weight:500; }
[data-app-design-v2] .appV2CreateSection { margin:24px 0; }
[data-app-design-v2] .appV2CreateSection .appV2CreateLegend { font-weight:700; font-size:1rem; }
[data-app-design-v2] .appV2CreateSection .appV2CreateOptional { color:var(--app-v2-muted); font-size:.75rem; font-weight:400; }
[data-app-design-v2] .appV2CreateChoice { border:0; border-radius:18px; background:#fff; text-align:left; font-size:.9375rem; padding:12px; }
[data-app-design-v2] .appV2CreateChoice[aria-pressed="true"] { border:0; padding:12px; background:var(--app-v2-plum); color:var(--app-v2-on-night); box-shadow:0 8px 18px #4e2c3c26; }
[data-app-design-v2] .appV2CreateRelations .appV2CreateChoice { display:flex; align-items:center; gap:10px; }
[data-app-design-v2] .appV2CreateRelations .appV2CreateChoice:last-child { grid-column:1 / -1; }
[data-app-design-v2] .appV2CreateEmblem { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#764c63; background:#f1dce5; }
[data-app-design-v2] .appV2CreateRelations .appV2CreateChoice:nth-child(2) .appV2CreateEmblem { background:#f5dcc2; }
[data-app-design-v2] .appV2CreateRelations .appV2CreateChoice:nth-child(3) .appV2CreateEmblem { background:#dbe6d1; }
[data-app-design-v2] .appV2CreateRelations .appV2CreateChoice:nth-child(4) .appV2CreateEmblem { background:#d3e0f2; }
[data-app-design-v2] .appV2CreateEmblem .appV2Icon { width:20px; height:20px; }
[data-app-design-v2] .appV2CreateOccasions { display:flex; flex-wrap:wrap; gap:8px; }
[data-app-design-v2] .appV2CreateOccasions .appV2CreateChoice { width:auto; min-height:44px; padding:10px 14px; border-radius:24px; font-size:.8125rem; }
[data-app-design-v2] .appV2CreateGenres .appV2CreateChoice { position:relative; height:100%; padding:14px; }
[data-app-design-v2] .appV2CreateGenres .appV2CreateGenreName { display:block; padding-right:20px; font:700 1rem/1.4 var(--app-v2-font-display); }
[data-app-design-v2] .appV2CreateGenres .appV2CreateGenreHint { display:block; margin-top:6px; font-size:.75rem; font-weight:400; }
[data-app-design-v2] .appV2CreateRadio { position:absolute; right:10px; top:10px; width:18px; height:18px; border:2px solid var(--app-v2-rule); border-radius:50%; }
[data-app-design-v2] .appV2CreateChoice[aria-pressed="true"] .appV2CreateRadio { border-color:#ff6038; background:#ff6038; box-shadow:inset 0 0 0 4px var(--app-v2-plum); }
[data-app-design-v2] .appV2CreateDescription { font-size:.75rem; margin:0; }
[data-app-design-v2] .appV2CreateGenres > .appV2CreateGenre { display:flex; flex-direction:column; }
[data-app-design-v2] .appV2CreateSummary { display:inline; border-radius:20px; background:#fff; padding:8px 12px; font-size:.8125rem; }
[data-app-design-v2] .appV2CreateWriting { background:#fffdfb; padding:20px; border-radius:22px; box-shadow:0 1px 0 var(--app-v2-rule),0 18px 36px #4e2c3c19; }
[data-app-design-v2] .appV2CreateWriting .appV2CreateLabel { margin:12px 0; font-family:var(--app-v2-font-display); }
[data-app-design-v2] .appV2CreateWriting .appV2Input { background:transparent; border:0; border-bottom:1px solid var(--app-v2-rule); border-radius:0; padding:8px 0; }
[data-app-design-v2] .appV2CreateWriting .appV2CreateLetterInput { background:repeating-linear-gradient(transparent 0 31px,var(--app-v2-rule) 31px 32px); font:400 1rem/32px var(--app-v2-font); padding:0; min-height:15rem; }
[data-app-design-v2] .appV2CreateMeter { color:var(--app-v2-muted); font-size:.75rem; text-align:right; }
[data-app-design-v2] .appV2CreateDock { position:sticky; z-index:4; bottom:8px; padding:14px; margin:20px -12px 0; border:1px solid #fff; border-radius:30px; background:#faf6f2f2; backdrop-filter:blur(24px); box-shadow:0 8px 30px #4e2c3c1a; max-height:60dvh; overflow:auto; padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
[data-app-design-v2] .appV2CreateDock > .appV2Button { width:100%; }
[data-app-design-v2] .appV2CreateConsents { border:0; border-radius:0; padding:0; margin:0 0 12px; background:transparent; font-size:.8125rem; line-height:1.5; }
[data-app-design-v2] .appV2CreateConsents > .appV2CreateConsentDisclosure { color:var(--app-v2-muted); font-size:.75rem; }
[data-app-design-v2] .appV2CreateConsentRow { margin:8px 0; border-bottom:1px solid var(--app-v2-rule); }
[data-app-design-v2] .appV2CreateCheck { align-items:center; }
[data-app-design-v2] .appV2CreateCheckbox { flex-basis:24px; width:24px; height:24px; }
[data-app-design-v2] .appV2CreateConsentRow .appV2CreateLink { font-size:.75rem; text-decoration:underline; padding:4px 0; }
[data-app-design-v2] .appV2CreateLyricCover { background:#eed6cc; border-radius:24px; padding:24px 20px; min-height:150px; }
[data-app-design-v2] .appV2CreateLyricCover .appV2Mascot { position:static; float:right; width:100px; height:auto; margin:8px 0 12px 16px; }
[data-app-design-v2] .appV2CreateLyrics { background:#fffdfb; border:0; font-size:1rem; line-height:2; }
[data-app-design-v2] .appV2BetaScene { padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px)); min-height:100dvh; box-sizing:border-box; }
[data-app-design-v2] .appV2SceneBrand { display:flex; justify-content:center; padding:8px 0 20px; }
[data-app-design-v2] .appV2PlumStage { position:relative; display:grid; place-items:center; min-height:230px; isolation:isolate; }
[data-app-design-v2] .appV2PlumStage::before { content:""; position:absolute; width:230px; height:230px; border-radius:50%; background:radial-gradient(closest-side,#ffffffd9,#ffffff00); z-index:-1; }
[data-app-design-v2] .appV2PlumStage .appV2Mascot { position:static; width:150px; height:auto; transform:rotate(-4deg); filter:drop-shadow(0 14px 20px #4e2c3c38); }
[data-app-design-v2] .appV2Scene-welcome, [data-app-design-v2] .appV2Scene-login { background:linear-gradient(180deg,#f3d9cd,var(--app-v2-paper) 70%); display:flex; flex-direction:column; }
[data-app-design-v2] .appV2Scene-welcome .appV2PlumStage { flex:1; min-height:310px; }
[data-app-design-v2] .appV2Scene-welcome .appV2PlumStage .appV2Mascot { width:220px; }
/* WELCOME_SHEET_01 (owner: "겹침도 같이 고쳐줘"): the welcome's first view ends ABOVE the fixed tab
   dock. The scene fills the viewport below the top inset and reserves the dock clearance, so
   the sheet rests just above the dock and the business footer starts below the fold (it never
   peeks half-hidden behind the dock). Short phones give up stage height first, never the sheet. */
[data-app-design-v2] .appV2BetaScene.appV2BetaScene.appV2Scene-welcome { min-height:calc(100dvh - env(safe-area-inset-top, 0px)); padding-bottom:var(--app-v2-clearance); }
/* Short phones (e.g. 360x640): the stage takes only what is left above the sheet. The mascot is sized
   from the viewport height (no script, no shift after load), so sheet + dock always fit first. */
[data-app-design-v2] .appV2Scene-welcome .appV2PlumStage.appV2PlumStage { min-height:auto; }
[data-app-design-v2] .appV2Scene-welcome .appV2PlumStage .appV2Mascot.appV2Mascot { width:clamp(80px, min(26dvh, 100dvh - 550px), 220px); }
[data-app-design-v2] .appV2Scene-welcome .appV2ScenePanel, [data-app-design-v2] .appV2Scene-login .appV2ScenePanel { padding:20px 16px; margin:0 -8px; border:1px solid #fff; border-radius:34px; background:#fffaf5e6; backdrop-filter:blur(24px); box-shadow:0 12px 36px #4e2c3c1a; }
[data-app-design-v2] .appV2Scene-welcome .appV2ScenePanel::before { content:""; display:block; width:38px; height:5px; background:#231a1e29; border-radius:3px; margin:0 auto 16px; }
[data-app-design-v2] .appV2ScenePanel > .appV2BetaTitle { font-size:1.5rem; line-height:1.4; margin:0 0 12px; word-break:keep-all; }
[data-app-design-v2] .appV2Scene-welcome .appV2Beta_logoGlow, [data-app-design-v2] .appV2Scene-login .appV2Beta_logoGlow { display:none; }
[data-app-design-v2] .appV2Beta_welcomeActions { display:grid; gap:8px; padding:0; background:none; border:0; }
[data-app-design-v2] .appV2Beta_welcomeProductsLink { background:#ffffffb3; color:var(--app-v2-ink); }
/* WELCOME_SHEET_01 (owner decision A): plumBetaStyles also puts appV2BetaButton on the welcome actions
   WRAPPER and on the products LINK (their keys match /action|link/), and `.appV2BetaButton.appV2BetaButton`
   (0,3,0) beat the two resets above (0,2,0), so both controls sat in one gradient box. Welcome only:
   the wrapper is a plain stack, 시작하기 is the solid gradient primary (appV2Solid family: no rule
   border), and 상품·가격 보기 is an underlined ink text link with a 44px tap target. */
[data-app-design-v2] .appV2Scene-welcome .appV2Beta_welcomeActions.appV2BetaButton { display:grid; gap:4px; min-height:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
[data-app-design-v2] .appV2Scene-welcome .appV2Beta_welcomeActions > .appV2BetaButton:not(.appV2Beta_welcomeProductsLink) { border-color:transparent; }
[data-app-design-v2] .appV2Scene-welcome .appV2Beta_welcomeActions > .appV2Beta_welcomeProductsLink.appV2BetaButton { min-height:44px; padding:10px 12px; border:0; border-radius:12px; background:none; box-shadow:none; color:var(--app-v2-ink); font:600 .9375rem/1.5 var(--app-v2-font); text-decoration:underline; text-underline-offset:3px; }
[data-app-design-v2] .appV2Scene-login .appV2BetaActions { margin:12px 0 0; }
[data-app-design-v2] .appV2Beta_loginActions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; background:none; border:0; padding:0; }
[data-app-design-v2] .appV2Beta_oauthBtn { min-height:48px; padding:10px 8px; font-size:.8125rem; border:1px solid var(--app-v2-rule); background:#fff; color:var(--app-v2-ink); box-shadow:none; }
[data-app-design-v2] .appV2Beta_signupOption, [data-app-design-v2] .appV2Beta_oauthHelper { grid-column:1 / -1; }
[data-app-design-v2] .appV2Beta_oauthHelper { color:var(--app-v2-muted); font-size:.75rem; }
/* plumBetaStyles gives the login actions WRAPPER appV2BetaButton (its key matches /action/), and the doubled
   `.appV2BetaButton.appV2BetaButton` rule then painted the whole wrapper with the button gradient, hiding the dark
   "이메일로 가입하기" link and helper line. Same reset as the welcome actions wrapper above. */
[data-app-design-v2] .appV2Beta_loginActions.appV2BetaButton { min-height:0; min-width:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:inherit; }
[data-app-design-v2] .appV2Beta_naverMark { background:#03c75a; color:#fff; border-radius:4px; }
[data-app-design-v2] .appV2BetaIntro { position:fixed; inset:0; z-index:3000; background:radial-gradient(120% 80% at 50% 40%,#5e3346,#4e2c3c 45%,#2a1820); }
/* PF7B: entry-only background, identical to S01; ordinary moving screens stay light. */
[data-app-design-v2] .appV2EntryLoading, [data-app-design-v2] .appV2EntryReveal { background:radial-gradient(120% 80% at 50% 40%,#5e3346,#4e2c3c 45%,#2a1820); }
[data-app-design-v2] .appV2CreateMoving.appV2EntryLoading { box-sizing:border-box; min-height:100dvh; padding:24px 20px; color:#f6f1ec; }
[data-app-design-v2] .appV2EntryLoading .appV2Mascot { position:static; width:100px; height:auto; }
[data-app-design-v2] .appV2EntryLoading .appV2Mascot [fill] { fill:#4e2c3c; }
[data-app-design-v2] .appV2EntryLoading .appV2Mascot [fill]:first-child { fill:#f6f1ec; }
[data-app-design-v2] .appV2EntryReveal { position:fixed; inset:0; z-index:50; pointer-events:none; opacity:0; }
@media (prefers-reduced-motion: no-preference) {
  [data-app-design-v2] .appV2EntryReveal { animation:appV2EntryReveal 240ms ease-out; }
  @keyframes appV2EntryReveal { from { opacity:1; } to { opacity:0; } }
}
[data-app-design-v2] .appV2PlumIntroWord { position:relative; font:600 clamp(1.75rem,8vw,2.5rem)/1.5 var(--app-v2-font-display); text-align:center; color:#f6f1ec; text-shadow:0 0 22px #ffd6be47; }
[data-app-design-v2] .appV2BetaIntroSkip { position:absolute; top:calc(16px + env(safe-area-inset-top,0px)); right:16px; padding:10px 14px; font:500 .8125rem/1.5 var(--app-v2-font); background:#f6f1ec14; border:1px solid #f6f1ec24; border-radius:24px; }
[data-app-design-v2] .appV2PlumDust { position:absolute; inset:0; pointer-events:none; }
[data-app-design-v2] .appV2PlumDust .appV2PlumParticle { position:absolute; width:2px; height:2px; border-radius:50%; background:#fff6ec; opacity:.65; box-shadow:0 0 6px 1px #ffecd6b3; }
/* Same ease-out/timing as home 9f3a9ce; app-only rise is .35em (home has no translate). */
@media (prefers-reduced-motion: no-preference) {
  [data-app-design-v2] .appV2PlumIntroWord { animation:appV2IntroWord 1.2s ease-out both; }
  [data-app-design-v2] .appV2BetaIntro[data-intro-phase="exit"] { animation:appV2IntroOut .9s ease-out both; }
  @keyframes appV2IntroWord { from { opacity:0; transform:translateY(.35em); } to { opacity:1; transform:translateY(0); } }
  @keyframes appV2IntroOut { from { opacity:1; } to { opacity:0; } }
}
/* WELCOME_SHEET_01: the whole welcome glass sheet rises from below once the welcome is visible.
   The lowered pose lives ONLY in keyframes (fill: backwards, finite), so a missing or failed
   animation leaves the static layout, and the end state is always that layout. Transform and
   opacity only: no layout shift, no tap blocking. "held" = still under the fading S01. */
@media (prefers-reduced-motion: no-preference) {
  [data-app-design-v2] .appV2Scene-welcome .appV2ScenePanel[data-welcome-sheet="held"] { animation:appV2WelcomeSheetHold 4s linear; }
  [data-app-design-v2] .appV2Scene-welcome .appV2ScenePanel[data-welcome-sheet="rise"] { animation:appV2WelcomeSheetRise 560ms cubic-bezier(.33,1,.68,1) backwards; }
  @keyframes appV2WelcomeSheetHold { from, to { opacity:0; transform:translateY(72px); } }
  @keyframes appV2WelcomeSheetRise { from { opacity:0; transform:translateY(72px); } 50% { opacity:1; } to { opacity:1; transform:translateY(0); } }
}
/* Reduced motion: no travel, a short fade only. */
@media (prefers-reduced-motion: reduce) {
  [data-app-design-v2] .appV2Scene-welcome .appV2ScenePanel[data-welcome-sheet="rise"] { animation:appV2WelcomeSheetFade 200ms ease-out backwards; }
  @keyframes appV2WelcomeSheetFade { from { opacity:0; } to { opacity:1; } }
}

[data-app-design-v2] .appV2CreateLegal.appV2CreateLegal { inset:auto 0 0; margin:0 auto; width:min(100%,480px); max-width:100%; height:88dvh; max-height:88dvh; border:1px solid #fff; border-radius:32px 32px 0 0; box-shadow:0 -12px 50px #231a1e33; }
[data-app-design-v2] .appV2CreateLegal::backdrop { background:#231a1e66; backdrop-filter:blur(3px); }
[data-app-design-v2] .appV2CreateLegalArticle.appV2CreateLegalArticle { padding:20px; }
@media (prefers-reduced-motion: reduce) { [data-app-design-v2] .appV2PlumDust { display:none; } }
@media (max-width: 320px) { [data-app-design-v2] .appV2Beta_loginActions, [data-app-design-v2] .appV2CreateOccasions { display:grid; grid-template-columns:minmax(0,1fr); } }

[data-app-design-v2] .appV2CreateGenres > .appV2CreateChoice:disabled { min-height:44px; padding:8px; border:1px dashed var(--app-v2-rule); background:transparent; border-radius:24px; font-size:.75rem; }

/* PX-N2: actual fields share one sheet; lyric text keeps its original bytes. */
[data-app-design-v2] .appV2CreateSrOnly { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
[data-app-design-v2] .appV2CreateSelectionRow { display:flex; align-items:center; gap:8px; }
[data-app-design-v2] .appV2CreateSummary { display:flex; flex:1; flex-wrap:wrap; gap:6px; padding:0; background:none; }
[data-app-design-v2] .appV2CreateSelectionChip { padding:5px 9px; border-radius:18px; background:#fff; font-size:.75rem; }
[data-app-design-v2] .appV2CreateSelectionRow > .appV2CreateLink { flex-shrink:0; padding:4px; font-size:.75rem; }
[data-app-design-v2] .appV2CreateTemplate { margin:0 0 16px; }
[data-app-design-v2] .appV2CreateNames + .appV2CreateTemplate { margin-top:14px; }
[data-app-design-v2] .appV2CreateTemplate .appV2CreateGrid { display:flex; flex-wrap:wrap; gap:6px; }
[data-app-design-v2] .appV2CreateTemplate .appV2CreateChoice { width:auto; min-height:44px; padding:8px 12px; border-radius:24px; font-size:.8125rem; }
[data-app-design-v2] .appV2CreateWriting .appV2CreateName { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--app-v2-rule); font:700 1.125rem/1.3 var(--app-v2-font-display); color:var(--app-v2-plum); }
[data-app-design-v2] .appV2CreateName .appV2Input { flex:1; min-width:0; width:0; min-height:44px; border:0; font:600 1.125rem/1.3 var(--app-v2-font); }
[data-app-design-v2] .appV2CreateWriting .appV2CreateFrom { width:72%; margin-left:auto; }
[data-app-design-v2] .appV2CreateLyricCover { min-height:220px; padding:20px; background:linear-gradient(150deg,#f3d9cd,#ead0c8); }
[data-app-design-v2] .appV2CreateCoverRecipient { display:block; color:#6c4858; font:600 .6875rem/1.5 var(--app-v2-font); letter-spacing:.08em; }
[data-app-design-v2] .appV2CreateLyricCover .appV2CreateTitle { font-size:1.875rem; line-height:1.25; margin:10px 0 24px; }
[data-app-design-v2] .appV2CreateCoverTags { display:flex; flex-wrap:wrap; gap:6px; clear:both; }
[data-app-design-v2] .appV2CreateCoverTag { padding:5px 11px; border-radius:14px; background:#ffffffb3; color:var(--app-v2-plum); font:500 .75rem/1.5 var(--app-v2-font); }
[data-app-design-v2] .appV2CreateLyricPart { margin:0 0 20px; }
[data-app-design-v2] .appV2CreateLyricPart:last-child { margin-bottom:0; }
[data-app-design-v2] .appV2CreateLyricLabel { display:inline-block; padding:2px 10px; border-radius:12px; background:#eee8e4; color:#674555; font:700 .6875rem/1.8 var(--app-v2-font); text-transform:uppercase; letter-spacing:.08em; }
[data-app-design-v2] .appV2CreateChorus { display:block; border-left:3px solid #bc482e; padding-left:14px; font:700 1.25rem/1.8 var(--app-v2-font-display); }
[data-app-design-v2] .appV2CreateChorusLabel { background:#f9e1d5; color:#83351f; }

/* PF3: names remain in the page flow; consent is a modal only after Next. */
/* PF5: one name card, with a reserved full-width reason below each underline. */
[data-app-design-v2] .appV2CreateNames { display:grid; gap:8px; padding:16px; border:1px solid var(--app-v2-rule); border-radius:20px; background:#fffdfb; }
[data-app-design-v2] .appV2CreateNames .appV2CreateNameRow { display:grid; grid-template-columns:4.5em minmax(0,1fr); align-items:center; gap:0 12px; margin:0; }
[data-app-design-v2] .appV2CreateNames .appV2Input { width:100%; min-width:0; min-height:44px; padding:8px 4px; border:0; border-bottom:1px solid var(--app-v2-rule); border-radius:0; font-size:1.125rem; background:transparent; box-shadow:none; }
[data-app-design-v2] .appV2CreateNames .appV2Input[aria-invalid="true"] { border-bottom-color:var(--app-v2-error); }
/* WELCOME_SHEET_01 (owner capture): each row sized its own "auto" label column, so 받는 분 / 보내는 분
   started their underlines at different x. One fixed label column for both rows aligns start, end
   and height. Browser autofill paints the field light blue; an inset card-colour shadow and the ink
   text colour keep the same card look in the autofilled state too. Values/validation untouched. */
[data-app-design-v2] .appV2CreateNames .appV2Input:-webkit-autofill { -webkit-text-fill-color:var(--app-v2-ink); caret-color:var(--app-v2-ink); box-shadow:inset 0 0 0 1000px #fffdfb; }
[data-app-design-v2] .appV2CreateNames .appV2Input:autofill { -webkit-text-fill-color:var(--app-v2-ink); caret-color:var(--app-v2-ink); box-shadow:inset 0 0 0 1000px #fffdfb; }
/* The reason sits under its own underline, right-aligned, in the warm accent so it reads as a hint. */
[data-app-design-v2] .appV2CreateNameReason { grid-column:2; justify-self:end; min-height:1.5em; padding-top:4px; color:#b4532f; font-size:.8125rem; line-height:1.5; text-align:right; }
[data-app-design-v2] .appV2CreateNameReason[aria-hidden="true"] { visibility:hidden; }
[data-app-design-v2] .appV2CreateMode { margin-block:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:4px; border:1px solid var(--app-v2-rule); border-radius:16px; background:#eae3df; }
[data-app-design-v2] .appV2CreateMode .appV2CreateChoice { min-height:44px; padding:10px 4px; border:0; border-radius:12px; background:transparent; box-shadow:none; text-align:center; font-size:.9375rem; }
[data-app-design-v2] .appV2CreateMode .appV2CreateChoice[aria-pressed="true"] { background:var(--app-v2-plum); color:var(--app-v2-on-night); box-shadow:none; }
[data-app-design-v2] .appV2CreateWriting .appV2CreateLetterInput { min-height:40dvh; }
/* WELCOME_SHEET_01: the no-occasion guidance placeholder reads as a soft, muted hint on the ruled paper. */
[data-app-design-v2] .appV2CreateWriting .appV2CreateLetterInput::placeholder { color:var(--app-v2-muted); opacity:1; }
[data-app-design-v2] .appV2CreateConsentSheet { box-sizing:border-box; position:fixed; inset:auto 0 0; margin:0 auto; width:min(100%,480px); max-width:100%; max-height:90dvh; overflow-y:auto; overscroll-behavior:contain; padding:16px 20px calc(24px + env(safe-area-inset-bottom,0px)); border:1px solid #fff; border-radius:32px 32px 0 0; background:#faf6f2f5; backdrop-filter:blur(24px); color:var(--app-v2-ink); font:400 1rem/1.75 var(--app-v2-font); box-shadow:0 -12px 40px #231a1e26; }
[data-app-design-v2] .appV2CreateConsentSheet::backdrop { background:#231a1e66; }
[data-app-design-v2] .appV2CreateConsentSheet .appV2CreateConsents { border:0; padding:0; background:none; margin:12px 0; }
[data-app-design-v2] .appV2CreateConsentSheet > .appV2Button { width:100%; }

/* Hand-off to payment: a calm centred wait instead of a bare line and button. */
[data-app-design-v2] .appV2CreateMoving { min-height:60dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; }

/* During S01 fade, paint S35 in its final modal geometry without taking the top layer/focus. */
[data-app-design-v2] .appV2EventDialog[inert] { position:fixed; inset:0; z-index:51; box-shadow:0 0 0 100vmax rgba(18,11,22,.8); }

/* APP_SAMPLE_PREVIEW_01: per-genre 미리듣기, a sibling pill laid over the card's foot (never inside it). */
[data-app-design-v2] .appV2CreateGenres > .appV2CreateGenrePreviewable { position:relative; }
[data-app-design-v2] .appV2CreateGenres .appV2CreateGenrePreviewable .appV2CreateChoice { padding-bottom:66px; }
[data-app-design-v2] .appV2CreatePreview { position:absolute; left:10px; right:10px; bottom:10px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:6px; min-width:44px; min-height:44px; padding:0 12px; overflow:hidden; border:1px solid transparent; border-radius:22px; color:var(--app-v2-plum); background:var(--app-v2-panel); font:600 .8125rem/1.2 var(--app-v2-font); cursor:pointer; }
[data-app-design-v2] .appV2CreatePreview[aria-pressed="true"] { color:var(--app-v2-on-night); background:var(--app-v2-plum); }
[data-app-design-v2] .appV2CreateChoice[aria-pressed="true"] + .appV2CreatePreview { color:var(--app-v2-on-night); border-color:#f6f1ec66; background:#ffffff1f; }
[data-app-design-v2] .appV2CreateChoice[aria-pressed="true"] + .appV2CreatePreview[aria-pressed="true"] { color:var(--app-v2-plum); border-color:transparent; background:var(--app-v2-on-night); }
[data-app-design-v2] .appV2CreatePreview:disabled { opacity:.55; cursor:default; }
[data-app-design-v2] .appV2CreatePreview:focus-visible { outline:var(--app-v2-focus); outline-offset:2px; }
[data-app-design-v2] .appV2CreatePreviewIcon { display:grid; place-items:center; }
[data-app-design-v2] .appV2CreatePreviewIcon .appV2Icon { width:16px; height:16px; }
[data-app-design-v2] .appV2CreatePreviewTrack { position:absolute; left:14px; right:14px; bottom:5px; height:3px; overflow:hidden; border-radius:2px; background:transparent; }
[data-app-design-v2] .appV2CreatePreview[aria-pressed="true"] .appV2CreatePreviewTrack { background:#f6f1ec40; }
[data-app-design-v2] .appV2CreatePreviewFill { display:block; width:100%; height:100%; border-radius:inherit; background:var(--app-v2-action); transform-origin:left center; }
@media (prefers-reduced-motion: no-preference) {
  [data-app-design-v2] .appV2CreatePreviewFill { transition:transform .25s linear; }
}
/* DISS_GENRE_01 (owner 10-30): 장난 디스랩 sits first on its own full row with a small NEW mark; the other four stay 2×2 below. */
[data-app-design-v2] .appV2CreateGenres > .appV2CreateGenreDiss { grid-column:1 / -1; }
[data-app-design-v2] .appV2CreateNewBadge { display:inline-block; margin-bottom:6px; padding:1px 8px; border-radius:999px; background:#ff6038; color:#fff; font:800 .6875rem/1.5 var(--app-v2-font); letter-spacing:.04em; }