/*
 * PC_HOME_3D_01 batches 6 and 7 - the PC look of the account pages (login, sign-up, password, delete, account home, 내 음악, 내 숏뮤비 list) and of the support form (the approved 42 and 44 mocks).
 *
 * Linked ONLY by `PcWidePageShell` (src/app/_entry/pc-wide.tsx), on top of `pc-wide.css` (which it never replaces: the header and the page-level wide rules stay that file's), i.e. only for a
 * DESKTOP request FORYOUTUNE_PC_CREATE admits, on a web page that draws its PLUM look. Every rule hangs on `[data-pc-wide=""][data-pc-page="account"|"support"]` and sits inside
 * `@media (min-width: 1024px)`, so a narrow window of such a browser keeps the column it always had, and so does every phone and the app (which never get this shell at all).
 *
 * DISPLAY ONLY. It changes arrangement and paint of elements the pages already draw. It adds no word (the only generated content is empty), no picture, no control and no request; the only
 * thing taken out of sight is the page header's own brand word (a duplicate of the shell's header), visually hidden with the clip technique so assistive technology still reads it.
 * Tokens are the approved 42 mock's values.
 */
@media (min-width: 1024px) {
  /* ---- the stage: paper page, a rose glow on the left, the plate the card stands on ---- */
  [data-pc-wide=""][data-pc-page] {
    --pcp-ink: #281e23; --pcp-muted: #735b66; --pcp-plum: #4e2c3c; --pcp-line: #e0cbd0;
    position: relative; isolation: isolate; overflow: clip; box-sizing: border-box; padding-bottom: 128px; background: #f6f1ec;
    font-family: var(--app-v2-font, var(--mvp-font, system-ui, sans-serif)); color: var(--pcp-ink); word-break: keep-all;
  }
  [data-pc-wide=""][data-pc-page="account"] { background: radial-gradient(ellipse at 21% 38%, #ead1d7 0, transparent 46%), #f6f1ec; }
  [data-pc-wide=""][data-pc-page="account"]::after {
    content: ""; position: absolute; z-index: -1; left: max(40px, calc(50% - 650px)); right: max(40px, calc(50% - 650px)); bottom: 44px; height: 120px; border-radius: 50%;
    background: linear-gradient(#ecd6d4, #d8b9bd); box-shadow: 0 17px 26px #79505724; pointer-events: none;
  }
  /* the web PLUM frame is transparent over the stage (pc-wide.css already makes it so for every shell; this restates it for the page types that scroll with a tab dock) */
  [data-pc-wide=""][data-pc-page] [data-app-design-v2].appV2Frame { background: transparent; min-height: 0; padding-bottom: 0; }

  /* the header (pc-wide.css) names the app font variable; a plain page that loads no app stylesheet (the Shorts list) has no such variable, so the header carries its own fallback */
  [data-pc-wide=""][data-pc-page] [data-pc-wide-brand] { font: 800 21px/1 var(--app-v2-font, var(--mvp-font, system-ui, sans-serif)); }
  [data-pc-wide=""][data-pc-page] [data-pc-wide-talk] { font: 800 13px/1.2 var(--app-v2-font, var(--mvp-font, system-ui, sans-serif)); }
  [data-pc-wide=""][data-pc-page] [data-pc-wide-nav] { font: 600 15px/1 var(--app-v2-font, var(--mvp-font, system-ui, sans-serif)); }

  /* ---- the card: one rule list for every account screen's card ---- */
  :is(
    [data-pc-wide=""][data-pc-page="account"] [data-app-design-v2].appV2Frame .appV2AccountSheet.appV2AccountSheet,
    [data-pc-wide=""][data-pc-page="account"] [data-app-design-v2].appV2Frame main.appV2Library,
    [data-pc-wide=""][data-pc-page="account"] [data-app-design-v2].appV2Frame main.appV2PlumHome,
    [data-pc-wide=""][data-pc-page="account"] > main > div
  ) {
    box-sizing: border-box; position: relative; width: auto; max-width: 740px; min-width: 0; margin: 14px auto 0; padding: 34px 42px 38px;
    background: #fffaf4; border: 1px solid #fff; border-radius: 28px; backdrop-filter: none; max-height: none; overflow: visible;
    box-shadow: 0 8px 0 #e4ced0, 0 10px 0 #cdb1bc, 0 24px 44px #59344722; color: var(--pcp-ink);
  }
  /* the pages' own full-width paper behind the card gives way to the stage */
  [data-pc-wide=""][data-pc-page="account"] > main { display: block; min-height: 0; padding: 0; margin: 0; max-width: none; background: transparent; }

  /* ---- the sign-in family (login, sign-up, password, verify): the plum on the left, the card on the right (the mock's composition) ---- */
  [data-pc-wide=""][data-pc-page="account"] [data-app-design-v2].appV2Frame .appV2AccountLayout {
    display: grid; grid-template-columns: 300px minmax(0, 740px); grid-template-rows: auto auto; column-gap: 40px; justify-content: center; align-content: start;
    min-height: 0; padding: 14px 44px 0; background: transparent;
  }
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountLayout > .appV2AccountTop { grid-column: 2; grid-row: 1; padding: 0 0 4px; }
  /* the page header's brand word repeats the shell's header: visually hidden, still read by assistive technology */
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountLayout > .appV2AccountTop .appV2AccountBrand { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountLayout > .appV2AccountStage {
    grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: 30px; min-height: 0; padding: 90px 0 0; background: transparent;
  }
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountLayout > .appV2AccountStage .appV2Mascot { width: 230px; max-width: 100%; transform: rotate(-4deg); filter: drop-shadow(0 18px 14px #64344625); }
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountLayout > main.appV2AccountPage { grid-column: 2; grid-row: 2; display: block; width: auto; padding: 0; background: transparent; }
  /* the login screen's one sentence under the title (the phone hides it) is the mock's */
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountLogin .appV2AccountSheet .appV2AccountIntro { display: block; }
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountSheet .appV2AccountTitle { font-size: 32px; line-height: 1.3; letter-spacing: -1px; }
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountSheet .appV2AccountIntro { margin: 0; font-size: 16px; line-height: 1.75; color: var(--pcp-muted); }
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountSheet .appV2AccountNote { margin: 0; padding-top: 17px; border-top: 1px solid #e1ced3; font-size: 14px; line-height: 1.7; color: #725d67; }
  /* the two sign-in providers stack at the card's full width, as in the mock */
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountPage .appV2AccountOptions { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountSheet .appV2AccountButton { border-radius: 11px; box-shadow: 0 4px 0 #321b29, 0 7px 12px #59344718; }
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountSheet .appV2AccountSocial { border-radius: 11px; box-shadow: 0 3px 0 #ead9da; }
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountSheet .appV2AccountInput { border-radius: 10px; }
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountSheet .appV2AccountHelp { justify-content: flex-start; border-top: 1px solid var(--pcp-line); padding-top: 8px; }

  /* ---- account deletion (the sheet without the sign-in family's layout): the same card, centred ---- */
  [data-pc-wide=""][data-pc-page="account"] [data-app-design-v2].appV2Frame main.appV2AccountPage:not(.appV2AccountLayout > main) { display: block; width: auto; max-width: none; padding: 0; margin: 0; background: transparent; }
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountDeletion.appV2AccountSheet { gap: 20px; }
  [data-pc-wide=""][data-pc-page="account"] .appV2AccountDeletion .appV2AccountTitle { font-size: 32px; }

  /* ---- 내 음악 (the list) and the account home ---- */
  [data-pc-wide=""][data-pc-page="account"] main.appV2Library .appV2Heading { margin: 0 0 8px; font-size: 32px; line-height: 1.3; letter-spacing: -1px; }
  [data-pc-wide=""][data-pc-page="account"] main.appV2Library .appV2LibraryTop { margin-bottom: 8px; }
  [data-pc-wide=""][data-pc-page="account"] main.appV2Library .appV2LibraryUtilities { max-width: none; }
  [data-pc-wide=""][data-pc-page="account"] [data-app-design-v2].appV2Frame main.appV2PlumHome.appV2Home { max-width: 560px; padding: 34px 40px 38px; overflow: hidden; }

  /* ---- the app's three-link bar (홈 · 노래 만들기 · 마이페이지): the mock's footer row under the card. pc-wide.css hides it (it is the phone's fixed dock); on the account pages it stays, in the page's flow ---- */
  [data-pc-wide=""][data-pc-page="account"] [data-app-design-v2].appV2Frame .appV2TabDock {
    display: flex; position: static; left: auto; bottom: auto; transform: none; box-sizing: border-box; width: auto; max-width: none; height: auto; margin: 26px 0 0; padding: 0; overflow: visible;
    justify-content: center; align-items: center;
  }
  [data-pc-wide=""][data-pc-page="account"] [data-app-design-v2].appV2Frame { padding-bottom: 0; }

  /* ---- 내 숏뮤비 (the plain list page: the page's own <main><div> is the card) ---- */
  [data-pc-wide=""][data-pc-page="account"] > main > div { display: block; }

  /* ---- the support form: one wide paper column, no card (the mock's) ---- */
  [data-pc-wide=""][data-pc-page="support"] [data-app-design-v2].appV2Frame main.appV2SupportPage { box-sizing: border-box; display: block; width: auto; max-width: 940px; min-height: 0; margin: 0 auto; padding: 14px 40px 56px; background: transparent; }
  [data-pc-wide=""][data-pc-page="support"] [data-app-design-v2].appV2Frame .appV2SupportShell { width: 100%; max-width: none; margin: 0; padding: 0; background: transparent; box-shadow: none; border: 0; }
}