/*
 * PC_CREATE_FLOW_01 B - the desktop (>= 1024px) layout of the pages after the message card (checkout, waiting / finished song, Shorts pick,
 * login-return wait). Linked ONLY by `PcWideShell` (src/app/_entry/pc-wide.tsx), i.e. only for a request FORYOUTUNE_PC_CREATE admits, and every
 * rule is under `[data-pc-wide=""]`, so with the switch off nothing here is loaded or can apply. It changes only arrangement and paint: the
 * pages' elements, words, buttons and requests are the ones the phone has. Below 1024px nothing here applies (the shell's own header and
 * step line are hidden), so a narrow window shows the 480px column exactly as before.
 * Tokens are the app design tokens' values (foundation.css), as in the approved mocks (p3 / p4 / p5 / p5b).
 */
[data-pc-wide-header], [data-pc-wide-steps], [data-pc-wide=""] [data-pc-summary] { display: none; }

@media (min-width: 1024px) {
  /* the 480px card of the web PLUM document gives way to the page tone, as the promotional home does (web-plum.css, `:not(:has(...))`) */
  [data-app-design-v2].appV2Document.appV2Document.appV2Document[data-plum-web]:is(:has([data-pc-wide=""]), :has([data-pc-wide="moving"] .appV2CreateMoving), :has([data-pc-wide="journey"] [data-journey])) {
    max-inline-size: none; margin: 0; border-radius: 0; box-shadow: none; overflow: visible; min-block-size: 100svh; background: #f6f1ec; padding-bottom: 0;
    --app-v2-canvas: #f6f1ec; --app-v2-canvas-ink: #231a1e;
  }
  [data-app-design-v2].appV2Document.appV2Document.appV2Document[data-plum-web]:is(:has([data-pc-wide=""]), :has([data-pc-wide="moving"] .appV2CreateMoving), :has([data-pc-wide="journey"] [data-journey]))::before { background: #f6f1ec; }
  /* the app's bottom tab bar is the phone's navigation; the header above is the wide one */
  :is([data-pc-wide=""], [data-pc-wide="moving"]:has(.appV2CreateMoving), [data-pc-wide="journey"]:has([data-journey])) .appV2TabDock, :is([data-pc-wide=""], [data-pc-wide="moving"]:has(.appV2CreateMoving), [data-pc-wide="journey"]:has([data-journey])) .appV2TabSpace { display: none; }
  :is([data-pc-wide=""], [data-pc-wide="moving"]:has(.appV2CreateMoving), [data-pc-wide="journey"]:has([data-journey])) { --pc-paper: #f6f1ec; --pc-ink: #231a1e; --pc-muted: #6f6166; --pc-body: #5d4f55; --pc-plum: #4e2c3c; --pc-secondary: #7a3a52; --pc-hero: #f3d9cf;
    --pc-rule: #e6ddd6; --pc-night: #2a1820; --pc-action: #ff6038; --pc-gradient: linear-gradient(100deg, #4e2c3c 0%, #7a3a52 55%, #c4513c 100%);
    font-family: var(--app-v2-font, system-ui, sans-serif); color: var(--pc-ink); }
  :is([data-pc-wide=""], [data-pc-wide="moving"]:has(.appV2CreateMoving), [data-pc-wide="journey"]:has([data-journey])) { width: 100%; box-sizing: border-box; }
  :is([data-pc-wide=""], [data-pc-wide="moving"]:has(.appV2CreateMoving), [data-pc-wide="journey"]:has([data-journey])), :is([data-pc-wide=""], [data-pc-wide="moving"]:has(.appV2CreateMoving), [data-pc-wide="journey"]:has([data-journey])) [data-app-design-v2] { --app-v2-max: 1160px; }
  :is([data-pc-wide=""], [data-pc-wide="moving"]:has(.appV2CreateMoving), [data-pc-wide="journey"]:has([data-journey])) [data-app-design-v2].appV2Frame { max-width: none; background: transparent; min-height: 0; }

  /* header and the four-step line */
  [data-pc-wide-header] { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 40px; height: 72px; }
  [data-pc-wide-brand] { display: inline-flex; align-items: center; gap: 10px; color: var(--pc-ink); font: 800 21px/1 var(--app-v2-font); letter-spacing: -.02em; text-decoration: none; }
  [data-pc-wide-mark] { width: 34px; height: 34px; border-radius: 10px; background: var(--pc-plum); display: grid; place-items: center; }
  [data-pc-wide-mark] svg { width: 24px; height: 24px; }
  [data-pc-wide-talk] { margin-left: 4px; padding: 5px 11px; border-radius: 999px; background: var(--pc-hero); color: var(--pc-secondary); font: 800 13px/1.2 var(--app-v2-font); }
  [data-pc-wide-nav] { display: flex; align-items: center; gap: 24px; font: 600 15px/1 var(--app-v2-font); }
  [data-pc-wide-nav] a { color: var(--pc-muted); text-decoration: none; }
  [data-pc-wide-nav] a:hover { color: var(--pc-ink); }
  [data-pc-wide-steps] { display: flex; align-items: center; justify-content: center; margin: 0 auto; padding: 6px 0 26px; list-style: none; width: 100%; }
  [data-pc-wide-step] { display: flex; align-items: center; gap: 10px; font: 700 15px/1 var(--app-v2-font); color: var(--pc-muted); }
  [data-pc-wide-step] + [data-pc-wide-step]::before { content: ""; width: 64px; height: 2px; margin: 0 4px 0 14px; background: var(--pc-rule); }
  [data-pc-wide-step="done"] + [data-pc-wide-step]::before, [data-pc-wide-step="on"]::before { background: var(--pc-plum); }
  [data-pc-wide-step] i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 14px/1 var(--app-v2-font); background: #fff; box-shadow: inset 0 0 0 1.5px var(--pc-rule); color: var(--pc-muted); }
  [data-pc-wide-step="done"] { color: var(--pc-plum); }
  [data-pc-wide-step="done"] i { background: var(--pc-plum); color: #fff; box-shadow: none; }
  [data-pc-wide-step="on"] { color: var(--pc-ink); }
  [data-pc-wide-step="on"] i { background: var(--pc-gradient); color: #fff; box-shadow: 0 4px 10px #4e2c3c33; }
  [data-pc-wide-step] { position: relative; }
  [data-pc-wide-step]::before { order: -1; }

  /* ---- checkout: products at the left, the summary card (amount, the one consent, the pay button) at the right ---- */
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2AppBar { display: none; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout.appV2Play_page.appV2Play_page { box-sizing: border-box; max-width: 1160px; margin: 0 auto; padding: 0 40px 64px; min-height: 0; background: transparent; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_shell.appV2Play_shell { max-width: none; padding: 0; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_title.appV2PlayTitle { margin: 6px 0 6px; font-size: 38px; letter-spacing: -.025em; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2PlaySubtitle { margin: 0 0 26px; font-size: 16px; }
  /* The summary card is NOT row-addressed: the products take column 1 whole, every other child of the purchase section (amount, notices, consents,
     the short flow's notice and disclosure, a failure sentence, the pay button, the Toss line) stacks in column 2 in DOM ORDER, whatever
     combination is there; the white card is one absolutely placed panel behind column 2. Same rules for the full checkout and the short flow. */
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 28px; row-gap: 0; align-items: start; }
  [data-pc-wide=""] > main [data-short-flow="true"] { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 28px; row-gap: 0; align-items: start; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase::before { content: ""; position: absolute; grid-column: 2; top: 0; bottom: 0; left: 0; right: 0; border-radius: 28px; background: #fff; box-shadow: 0 1px 2px #231a1e14, 0 0 0 1px var(--pc-rule); }
  [data-pc-wide=""] > main [data-short-flow="true"]::before { content: ""; position: absolute; grid-column: 2; top: 0; bottom: 0; left: 0; right: 0; border-radius: 28px; background: #fff; box-shadow: 0 1px 2px #231a1e14, 0 0 0 1px var(--pc-rule); }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase > * { position: relative; z-index: 1; grid-column: 2; margin: 0 28px 14px; min-width: 0; }
  [data-pc-wide=""] > main [data-short-flow="true"] > * { position: relative; z-index: 1; grid-column: 2; margin: 0 28px 14px; min-width: 0; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase > :first-child { grid-column: 1; grid-row: 1 / span 30; margin: 0; padding: 0; }
  [data-pc-wide=""] > main [data-short-flow="true"] > :first-child { grid-column: 1; grid-row: 1 / span 30; margin: 0; padding: 0; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase > :first-child + * { margin-top: 28px; }
  [data-pc-wide=""] > main [data-short-flow="true"] > :first-child + * { margin-top: 28px; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase > :last-child { margin-bottom: 28px; }
  [data-pc-wide=""] > main [data-short-flow="true"] > :last-child { margin-bottom: 28px; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase > [type="button"] { width: auto; justify-self: stretch; margin-top: 6px; }
  [data-pc-wide=""] > main [data-short-flow="true"] > [type="button"] { width: auto; justify-self: stretch; margin-top: 6px; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase > .appV2Play_payButton { background: var(--pc-gradient); }
  [data-pc-wide=""] > main [data-short-flow="true"] > .appV2Play_payButton { background: var(--pc-gradient); }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_backLink.appV2PlayLink { justify-content: flex-start; margin-top: 18px; }
}

@media (min-width: 1024px) {
  /* ---- the song page (waiting and finished): the page's dark scene becomes a rounded dark panel on the paper page, in two columns ---- */
  [data-pc-wide="journey"] [data-app-design-v2].appV2Frame .appV2DetailPage.appV2DetailPage[data-journey] {
    box-sizing: border-box; max-width: 1080px; margin: 0 auto 56px; min-height: 0; padding: 0; border-radius: 36px; overflow: hidden;
    background: radial-gradient(120% 70% at 70% 20%, #8a3f58 0%, #4e2c3c 45%, #2a1820 100%);
  }
  [data-pc-wide="journey"] [data-app-design-v2].appV2Frame .appV2DetailPage[data-journey="WAITING"] { background: #2a1820; }
  [data-pc-wide="journey"] [data-app-design-v2].appV2Frame .appV2DetailPage[data-journey] .appV2Journey_shell.appV2Journey_shell { max-width: none; padding: 44px 56px 48px; }
  [data-pc-wide="journey"] [data-app-design-v2].appV2Frame .appV2DetailPage[data-journey] .appV2Journey_shell > .appV2AppBar { display: none; }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey] .appV2Journey_hero { margin: 0 0 18px; }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey] .appV2Journey_title { font-size: 40px; line-height: 1.25; }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey] .appV2Journey_contentStack { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: 32px; row-gap: 20px; align-items: start; max-width: none; }
  /* finished: song title + player + lyrics at the left, the delivery menu at the right under the cover */
  [data-pc-wide="journey"] .appV2DetailPage[data-journey] .appV2DetailSongTitle { grid-column: 1; grid-row: 1; margin: 0; font-size: 30px; }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey] .appV2PlumCover { grid-column: 2; grid-row: 1 / span 2; justify-self: center; align-self: start; margin: 0; }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey] .appV2Journey_playerShell { grid-column: 1; grid-row: 2; margin: 0; }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey] .appV2Journey_card { grid-column: 1; grid-row: 3; margin: 0; }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey] .appV2DeliverySheet { grid-column: 2; grid-row: 3 / span 2; margin: 0; position: static; width: auto; }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey] .appV2DeliveryMenu { grid-template-columns: minmax(0, 1fr); }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey] .appV2DetailSupportRow { grid-column: 1 / -1; margin: 8px 0 0; }
  /* waiting: the stage (mascot, title, progress) at the left, the notification card at the right */
  [data-pc-wide="journey"] .appV2DetailPage[data-journey="WAITING"] .appV2Journey_shell { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey="WAITING"] .appV2Journey_shell > .appV2PlumStage { grid-column: 1; grid-row: 1; justify-self: center; }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey="WAITING"] .appV2Journey_shell > .appV2Journey_hero { grid-column: 1; grid-row: 2; text-align: center; }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey="WAITING"] .appV2Journey_contentStack { display: contents; }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey="WAITING"] .appV2Journey_waitingProgress { grid-column: 1; grid-row: 3; }
  [data-pc-wide="journey"] .appV2DetailPage[data-journey="WAITING"] .appV2Journey_notificationPanel { grid-column: 2; grid-row: 1 / span 3; }
}

@media (min-width: 1024px) {
  /* ---- the Shorts pick page (the web page's own module-styled main): the two candidates side by side ---- */
  [data-pc-wide=""] > main { min-height: 0; background: transparent; }
  [data-pc-wide=""] > main > div { box-sizing: border-box; width: auto; max-width: 1080px; padding: 0 40px 56px; margin: 0 auto; }
  [data-pc-wide=""] > main [role="radiogroup"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  /* one screen: both candidates and their buttons without scrolling (9:16 kept; the video height follows the window: 100vh minus the header and button rows, 280-620px, never wider than its card) */
  [data-pc-wide=""] > main [role="radiogroup"] video { display: block; width: auto; max-width: 100%; max-height: clamp(280px, calc(100vh - 560px), 620px); aspect-ratio: 9 / 16; margin: 0 auto; object-fit: contain; }
}

@media (min-width: 1024px) {
  /* ---- the login-return page (/mvp/new): its forms stay the 480px column; only the "이동 중" wait becomes this centred stage ---- */
  [data-pc-wide="moving"]:not(:has(.appV2CreateMoving)) [data-pc-wide-header], [data-pc-wide="moving"]:not(:has(.appV2CreateMoving)) [data-pc-wide-steps],
  [data-pc-wide="journey"]:not(:has([data-journey])) [data-pc-wide-header], [data-pc-wide="journey"]:not(:has([data-journey])) [data-pc-wide-steps] { display: none; }
  [data-pc-wide="moving"]:has(.appV2CreateMoving) .appV2Header, [data-pc-wide="moving"]:has(.appV2CreateMoving) .appV2AppBar,
  [data-pc-wide="moving"]:has(.appV2CreateMoving) .appV2CreateTracks, [data-pc-wide="moving"]:has(.appV2CreateMoving) .appV2CreateProgress { display: none; }
  [data-pc-wide="moving"]:has(.appV2CreateMoving) [data-app-design-v2].appV2Frame .appV2CreatePage { max-width: none; padding: 0 40px; }
  [data-pc-wide="moving"] .appV2CreateMoving.appV2CreateMoving { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; max-width: 1080px; min-height: 560px; margin: 0 auto 56px;
    border-radius: 36px; background: radial-gradient(60% 60% at 50% 42%, #4a2736 0%, #2a1820 70%); color: #f6f1ec; text-align: center; }
  [data-pc-wide="moving"] .appV2CreateMoving.appV2CreateMoving svg { width: 140px; height: auto; margin: 0; opacity: 1; position: static; }
  [data-pc-wide="moving"] .appV2CreateMoving p { margin: 0; font: 700 28px/1.4 var(--app-v2-font-display, serif); color: #f6f1ec; }
}

@media (min-width: 1024px) {
  /* ---- PC_CREATE_FLOW_01 D: the checkout as payment mock 2 - a picture tile on each product, the song summary at the top of the card, the amount joined
     to it, a taller pay button, a lock before the Toss line, a pale pink page. Arrangement and paint only: no word of the screen is added here except
     the "✓ 선택" mark and the quote marks (the summary itself is markup, written by the page). Below 1024px the summary is not drawn at all (see the top). ---- */
  [data-app-design-v2].appV2Document.appV2Document.appV2Document.appV2Document[data-plum-web]:has([data-pc-wide=""] :is(.appV2PlayCheckout, [data-short-flow="true"])) {
    background: radial-gradient(70% 60% at 100% 0%, #f8dcd3 0%, transparent 60%), radial-gradient(60% 50% at 0% 100%, #f7e2da 0%, transparent 60%), #f6f1ec;
  }
  [data-app-design-v2].appV2Document.appV2Document.appV2Document.appV2Document[data-plum-web]:has([data-pc-wide=""] :is(.appV2PlayCheckout, [data-short-flow="true"]))::before {
    background: radial-gradient(70% 60% at 100% 0%, #f8dcd3 0%, transparent 60%), radial-gradient(60% 50% at 0% 100%, #f7e2da 0%, transparent 60%), #f6f1ec;
  }
  /* the checkout page paints itself paper in the web PLUM document (play-payment.css, one specificity step above B's `transparent`); the pink page shows through only if it does not */
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout.appV2Play_page.appV2Play_page.appV2Play_page { background: transparent; }
  /* the white card of the right column */
  :is([data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase, [data-pc-wide=""] > main [data-short-flow="true"])::before { box-shadow: 0 26px 54px #4e2c3c1f, 0 0 0 1px #efe4dc; }

  /* products (the full checkout's cards; the short flow's cards keep their B look): tile | name + description | price */
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_products.appV2Play_products { gap: 12px; margin: 0; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout [data-product] { position: relative; grid-template-columns: 24px 76px minmax(0, 1fr) auto; column-gap: 18px; align-items: center; padding: 20px 24px; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px #231a1e0f, 0 0 0 1px #efe4dc; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout [data-product]::before { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 76px; height: 76px; border-radius: 18px; background-color: #fbe7e0; background-position: center; background-repeat: no-repeat; background-size: 46px 46px; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout [data-product="link_30d"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Ccircle%20cx='24'%20cy='24'%20r='17'%20fill='%234e2c3c'/%3E%3Ccircle%20cx='24'%20cy='24'%20r='11'%20fill='none'%20stroke='%237a3a52'%20stroke-width='1'/%3E%3Ccircle%20cx='24'%20cy='24'%20r='6'%20fill='%23f3d9cf'/%3E%3Ccircle%20cx='24'%20cy='24'%20r='1.8'%20fill='%234e2c3c'/%3E%3Cpath%20d='M36%209v11.5a3%203%200%201%201-2-2.8V12l6-1.5'%20fill='%23c4513c'/%3E%3C/svg%3E"); }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout [data-product="link_30d_with_download"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Cpath%20d='M14%208h14l8%208v24a2%202%200%200%201-2%202H14a2%202%200%200%201-2-2V10a2%202%200%200%201%202-2z'%20fill='%23fff'%20stroke='%23d9c3b8'%20stroke-width='1.5'/%3E%3Cpath%20d='M28%208v8h8'%20fill='%23f3d9cf'%20stroke='%23d9c3b8'%20stroke-width='1.5'/%3E%3Ccircle%20cx='24'%20cy='28'%20r='8'%20fill='%234e2c3c'/%3E%3Cpath%20d='M24%2023.5v8m-3.5-3.5L24%2031.5l3.5-3.5'%20stroke='%23fff'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout [data-product="link_30d_with_download_shorts"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Crect%20x='8'%20y='16'%20width='32'%20height='24'%20rx='3'%20fill='%234e2c3c'/%3E%3Cpath%20d='M8%2016l30-7%201.6%205.6L9.6%2021.6z'%20fill='%23fff'%20stroke='%234e2c3c'%20stroke-width='1.5'/%3E%3Cpath%20d='M15%2014.4l3%205M23%2012.6l3%205M31%2010.8l3%205'%20stroke='%234e2c3c'%20stroke-width='2'/%3E%3Cpath%20d='M21%2024v10l9-5z'%20fill='%23fff'/%3E%3C/svg%3E"); }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout [data-product] [type="radio"] { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout [data-product] .appV2Play_productName.appV2Play_productName { grid-column: 3; grid-row: 1; align-self: end; font: 700 19px/1.35 var(--app-v2-font-display, serif); letter-spacing: -.01em; }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout [data-product] .appV2Play_productPrice.appV2Play_productPrice { grid-column: 4; grid-row: 1 / span 2; align-self: center; font: 800 19px/1 var(--app-v2-font); }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout [data-product] .appV2Play_productDesc.appV2Play_productDesc { grid-column: 3; grid-row: 2; align-self: start; margin: 6px 0 0; font: 400 14px/1.55 var(--app-v2-font); color: var(--pc-muted); }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout [data-product][data-selected="true"] { background: #fff7f4; box-shadow: 0 10px 24px #4e2c3c14, inset 0 0 0 2px var(--pc-plum); }
  [data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout [data-product][data-selected="true"]::after { content: "✓ 선택"; position: absolute; right: 20px; top: -11px; padding: 5px 10px; border-radius: 999px; background: var(--pc-plum); color: #fff; font: 800 11.5px/1 var(--app-v2-font); }

  /* the song summary (cover | kicker, title, two chorus lines, chosen product) and the amount line joined under it */
  [data-pc-wide=""] [data-pc-summary] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; box-sizing: border-box; padding: 16px 18px; border-radius: 18px; background: var(--pc-paper); }
  :is([data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase, [data-pc-wide=""] > main [data-short-flow="true"]) > [data-pc-summary] { margin: 28px 28px 14px; }
  :is([data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase, [data-pc-wide=""] > main [data-short-flow="true"]) > [data-pc-summary]:has(+ .appV2Play_selectedAmount) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 12px; }
  [data-pc-wide=""] [data-pc-summary-text] { min-width: 0; }
  [data-pc-wide=""] [data-pc-summary-kicker] { display: block; font: 800 12.5px/1.3 var(--app-v2-font); letter-spacing: .02em; color: var(--pc-secondary); }
  [data-pc-wide=""] [data-pc-summary-title] { margin: 6px 0 0; font: 700 22px/1.3 var(--app-v2-font-display, serif); letter-spacing: -.02em; color: var(--pc-ink); overflow-wrap: anywhere; }
  [data-pc-wide=""] [data-pc-summary-line] { margin: 6px 0 0; font: 500 13px/1.5 var(--app-v2-font-display, serif); color: var(--pc-muted); overflow-wrap: anywhere; }
  [data-pc-wide=""] [data-pc-summary-line]::before { content: "“"; }
  [data-pc-wide=""] [data-pc-summary-line]::after { content: "”"; }
  [data-pc-wide=""] [data-pc-summary-product] { margin: 8px 0 0; font: 400 14px/1.5 var(--app-v2-font); color: var(--pc-muted); }
  [data-pc-wide=""] [data-pc-summary-product] b { margin-left: 6px; font-weight: 700; color: var(--pc-ink); }
  :is([data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase, [data-pc-wide=""] > main [data-short-flow="true"]) > [data-pc-summary] + .appV2Play_selectedAmount.appV2Play_selectedAmount { margin-top: 0; padding: 12px 18px 16px; border-top: 1px dashed #dccfc6; border-radius: 0 0 18px 18px; background: var(--pc-paper); box-shadow: inset 0 1px 0 var(--pc-paper); }
  :is([data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase, [data-pc-wide=""] > main [data-short-flow="true"]) > [data-pc-summary] + .appV2Play_selectedAmount .appV2Play_selectedAmountStrong { display: block; text-align: right; font: 800 26px/1 var(--app-v2-font); letter-spacing: -.02em; }
  :is([data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase, [data-pc-wide=""] > main [data-short-flow="true"]) > [data-pc-summary] + .appV2Play_selectedAmount .appV2Play_selectedAmountNote { display: block; margin: 6px 0 0; text-align: right; }

  /* the pay button and the Toss line */
  :is([data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase, [data-pc-wide=""] > main [data-short-flow="true"]) > .appV2Play_payButton { min-height: 62px; border-radius: 20px; font: 800 19px/1 var(--app-v2-font); box-shadow: 0 12px 24px #4e2c3c38; }
  :is([data-pc-wide=""] [data-app-design-v2].appV2Frame .appV2PlayCheckout .appV2Play_purchase.appV2Play_purchase, [data-pc-wide=""] > main [data-short-flow="true"]) > .appV2Play_payNote::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Crect%20x='5'%20y='11'%20width='14'%20height='10'%20rx='2.5'%20fill='%239a8d93'/%3E%3Cpath%20d='M8%2011V8a4%204%200%200%201%208%200v3'%20fill='none'%20stroke='%239a8d93'%20stroke-width='2.2'%20stroke-linecap='round'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: contain; }
}