/*
  Shell for every test page: the same top bar, phone tab bar and column as the list page.
  Loaded after the page's own styles; every rule is scoped to body.in-shell so it only
  reshapes the frame. The test keeps its own palette and objects inside the panel.
*/
body.in-shell {
  background: #FAF9F7;
  --shell-col: 800px;
  --shell-gutter: 16px;
}
/* the page's own header block is removed by shell.mjs; the shared one comes from chrome.css */
body.in-shell .pc-top { --ground: #FFFFFF; --paper: #FFFFFF; --ink: #1F1B17; --ink-soft: #5B5249; --seal: #A3302A; border-bottom-color: #E6E1D9; }
body.in-shell .pc-top .in { max-width: calc(var(--shell-col) + var(--shell-gutter) * 2); padding: 0 var(--shell-gutter); }
body.in-shell .pc-nav { margin: 0 auto; gap: 8px; }
body.in-shell .pc-nav a { border-radius: 0; height: 60px; padding: 0 10px; }
body.in-shell .pc-nav a[aria-current="page"] { background: none; color: #1F1B17; box-shadow: inset 0 -2px 0 #1F1B17; }
body.in-shell .pc-home { margin-left: 0; min-height: 40px; padding: 0 18px; border-radius: 999px; background: #FFE14D; color: #1F1B17; box-shadow: 0 4px 0 #D9B300; text-decoration: none; }
body.in-shell .pc-home:hover { color: #1F1B17; }
body.in-shell .pc-tabs { --paper: #FFFFFF; --ink: #1F1B17; --ink-soft: #5B5249; --seal: #A3302A; }

/* the test sits in a panel the width of the list column, on its own ground colour */
body.in-shell main {
  max-width: calc(var(--shell-col) + var(--shell-gutter) * 2);
  margin: 16px auto 0;
  padding: 0 var(--shell-gutter);
}
body.in-shell main > * { background: var(--ground); }
body.in-shell main > :first-child { border-top-left-radius: 24px; border-top-right-radius: 24px; padding-top: 16px; }
body.in-shell main > * { min-width: 0; overflow-x: clip; }
body.in-shell main > :last-child { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; padding-bottom: 32px; }
body.in-shell main .wrap, body.in-shell main > .wrap { max-width: none; padding-left: clamp(18px, 3vw, 32px); padding-right: clamp(18px, 3vw, 32px); }
body.in-shell main > section:not(.wrap), body.in-shell main > div:not(.wrap) { padding-left: clamp(18px, 3vw, 32px); padding-right: clamp(18px, 3vw, 32px); }

/* crumbs: a way back to the list, like the reference's 목록으로 */
body.in-shell .shell-crumb { max-width: calc(var(--shell-col) + var(--shell-gutter) * 2); margin: 14px auto -4px; padding: 0 var(--shell-gutter); }
body.in-shell .shell-crumb a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 0.875rem; font-weight: 600; color: #5B5249; text-decoration: none; }
body.in-shell .shell-crumb a::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
@media (hover: hover) { body.in-shell .shell-crumb a:hover { color: #1F1B17; } }

/* ads and footer line up with the column */
body.in-shell .gad { max-width: calc(var(--shell-col) + var(--shell-gutter) * 2); padding: 0 var(--shell-gutter); }
body.in-shell .footer { max-width: calc(var(--shell-col) + var(--shell-gutter) * 2); margin: 32px auto 0; padding: 0 var(--shell-gutter) 48px; }
body.in-shell .footer .made-by, body.in-shell .footer .back-card, body.in-shell .footer .back { max-width: none; background: #FFFFFF; box-shadow: 0 4px 0 rgba(31, 27, 23, 0.06); border-radius: 20px; }
body.in-shell .footer .back { padding: 24px clamp(18px, 3vw, 32px); }

/* the list page's shell has its own tab bar rules; here the Coupang bar sits above the tabs */
@media (max-width: 860px) {
  body.in-shell main { margin-top: 12px; padding: 0 12px; }
  body.in-shell main .wrap, body.in-shell main > section:not(.wrap), body.in-shell main > div:not(.wrap) { padding-left: 16px; padding-right: 16px; }
  body.in-shell main > :first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; }
  body.in-shell main > :last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
  body.in-shell .pc-home { margin-left: auto; padding: 0 14px; font-size: 0.8125rem; }
}