/* OBLIQUE Shop — the store. After shop.formapilates.co (user, 2026-10-25: "the shop should look like a separate service"):
   its own header (OBLIQUE Studio · Shop all · Collections — logo — search · account · bag) and footer (Email address line +
   columns), white and plain, small sans text, edge-to-edge product grids. Loaded after style.css on the store pages
   (/shop, /shop/collections, product pages, cart, checkout, order) and tones down the brand-site components they use.
   Images are placeholders (neutral photo tones) until generated images arrive. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }

body.shop {
  --sg: 16px;              /* store gutter (32 from 768px) */
  --s-ink: #1d1c1a;
  --s-text: #45423d;
  --s-muted: #8a857e;
  --s-line: #e7e4df;
  --s-soft: #f4f2ef;
  background: #fff; color: var(--s-text); font-size: 14px;
}
.shop .wrap, .shop .demo-bar .wrap, .shop .demo-notice .wrap { max-width: none; padding-inline: var(--sg); }

/* ---------- Header ---------- */
.sh-header { position: sticky; top: 0; z-index: 30; background: #fff; }
.sh-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: 60px; padding-inline: var(--sg); }
.sh-left { display: flex; align-items: center; }
.sh-nav { display: none; }
.sh-nav a { font-size: 13px; color: var(--s-ink); text-decoration: none; }
.sh-nav a:hover, .sh-nav a[aria-current] { text-decoration: underline; text-underline-offset: 0.45em; text-decoration-thickness: 1px; }
.sh-nav .sh-back { color: var(--s-muted); }
.sh-logo { display: grid; justify-items: center; gap: 4px; color: var(--s-ink); text-decoration: none; }
.sh-logo span { font: 400 24px/1 "Cormorant Garamond", "AppleMyungjo", serif; letter-spacing: 0.1em; text-transform: uppercase; }
.sh-logo small { padding-left: 0.4em; font: 500 8.5px/1 var(--sans); letter-spacing: 0.4em; text-transform: uppercase; color: var(--s-muted); }
.sh-right { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.sh-icon, .sh-search summary { position: relative; display: grid; place-items: center; width: 38px; height: 38px; color: var(--s-ink); cursor: pointer; }
.sh-search summary, .sh-menu summary, .sh-drop summary { list-style: none; }
.sh-search summary::-webkit-details-marker, .sh-menu summary::-webkit-details-marker, .sh-drop summary::-webkit-details-marker { display: none; }
.sh-count { position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--s-ink); color: #fff; font: 600 10px/16px var(--sans); text-align: center; }
.sh-search-form { position: absolute; left: 0; right: 0; top: 100%; padding: 6px var(--sg) 18px; background: #fff; border-bottom: 1px solid var(--s-line); }
.sh-search-form input { width: 100%; height: 48px; padding: 0; border: 0; border-bottom: 1px solid var(--s-ink); border-radius: 0; background: none; font: 400 20px/1 var(--sans); color: var(--s-ink); }
.sh-search-form input:focus { outline: none; border-bottom-width: 2px; }
.sh-menu summary { display: grid; place-items: center; width: 38px; height: 38px; margin-left: -9px; cursor: pointer; }
.sh-menu summary span { position: relative; display: block; width: 18px; height: 1px; background: var(--s-ink); box-shadow: 0 -5px 0 var(--s-ink), 0 5px 0 var(--s-ink); }
.sh-menu[open] summary span { box-shadow: none; transform: rotate(45deg); }
.sh-menu[open] summary span::after { content: ""; position: absolute; inset: 0; background: var(--s-ink); transform: rotate(-90deg); }
.sh-sheet { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 4px var(--sg) 18px; background: #fff; border-bottom: 1px solid var(--s-line); }
.sh-sheet a { padding: 14px 0; border-bottom: 1px solid var(--s-line); font-size: 15px; color: var(--s-ink); text-decoration: none; }
.sh-sheet .sh-sheet-back { border-bottom: 0; color: var(--s-muted); }

/* ---------- Store front (/shop): one full-screen campaign image, the wordmark, Shop now ---------- */
.shop-front .sh-header { position: relative; margin-bottom: -60px; background: transparent; color: #fff; }
.shop-front .sh-nav a, .shop-front .sh-nav .sh-back, .shop-front .sh-icon, .shop-front .sh-search summary { color: #fff; }
.shop-front .sh-menu summary span, .shop-front .sh-menu summary span::after { background: #fff; box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff; }
.shop-front .sh-menu[open] summary span { box-shadow: none; }
.shop-front .sh-logo { visibility: hidden; }
.shop-front .sh-count { background: #fff; color: var(--s-ink); }
.shop-front .sh-footer { margin-top: 0; padding-top: 40px; }
.sh-front { position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; height: max(560px, calc(100svh - var(--demo-h, 34px))); padding: 80px var(--sg) 44px; color: #fff; isolation: isolate; }
.sh-front::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(24, 22, 20, 0.22), rgba(24, 22, 20, 0) 30%, rgba(24, 22, 20, 0) 62%, rgba(24, 22, 20, 0.28)); }
.sh-front .sh-ph { display: none; right: var(--sg); left: auto; bottom: 14px; color: rgba(255, 255, 255, 0.55); }
.sh-front-mark { display: grid; justify-items: center; gap: 10px; margin: 0; font: 400 clamp(64px, 17vw, 260px)/0.9 "Cormorant Garamond", "AppleMyungjo", serif; letter-spacing: 0.06em; text-transform: uppercase; }
.sh-front-mark small { padding-left: 0.5em; font: 500 clamp(10px, 0.9vw, 13px)/1 var(--sans); letter-spacing: 0.5em; }
.sh-front .sh-pill-line { min-width: min(340px, 80vw); border-color: rgba(255, 255, 255, 0.9); background: transparent; color: #fff; }
.sh-front .sh-pill-line:hover { background: #fff; color: var(--s-ink); }
.sh-t-front { background: radial-gradient(34% 44% at 62% 52%, rgba(196, 170, 150, 0.75), rgba(196, 170, 150, 0) 72%), radial-gradient(60% 30% at 40% 74%, rgba(236, 232, 226, 0.55), rgba(236, 232, 226, 0) 70%), radial-gradient(40% 50% at 20% 20%, rgba(150, 146, 140, 0.4), rgba(150, 146, 140, 0) 70%), linear-gradient(180deg, #9c9894 0%, #a9a49e 55%, #c9c4bd 100%); }

/* ---------- Toolbar ---------- */
.sh-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 8px var(--sg) 16px; }
.sh-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.sh-title { margin: 0; font: 500 13px/1 var(--sans); color: var(--s-ink); }
.sh-total { font-size: 13px; color: var(--s-muted); }
.sh-drop { position: relative; }
.sh-drop summary { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--s-ink); cursor: pointer; }
.sh-drop summary::after { content: ""; width: 5px; height: 5px; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); opacity: 0.55; }
.sh-drop[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
.sh-drop-list { position: absolute; z-index: 25; top: calc(100% + 10px); left: 0; display: grid; min-width: 220px; padding: 8px 0; background: #fff; border: 1px solid var(--s-line); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.28); }
.sh-drop.is-right .sh-drop-list { left: auto; right: 0; }
.sh-drop-list a { padding: 9px 16px; font-size: 13px; color: var(--s-text); text-decoration: none; white-space: nowrap; }
.sh-drop-list a:hover, .sh-drop-list a[aria-current] { background: var(--s-soft); color: var(--s-ink); }
.sh-drop-list small { margin-left: 6px; font-size: 12px; color: var(--s-muted); }
.sh-views { display: inline-flex; gap: 2px; }
.sh-views a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--s-muted); fill: currentColor; }
.sh-views a[aria-current] { background: var(--s-soft); color: var(--s-ink); }

/* ---------- Product grid (edge to edge, no gaps) ---------- */
.sh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sh-grid.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh-item a { display: block; color: inherit; text-decoration: none; }
.sh-img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background-color: #ece9e4; }
.sh-img::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.3s; }
.sh-item a:hover .sh-img::after, .sh-collections a:hover .sh-img::after { background: rgba(0, 0, 0, 0.035); }
.sh-ph { position: absolute; left: 12px; right: 12px; bottom: 10px; font: 500 8.5px/1.45 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(29, 28, 26, 0.3); }
.sh-badge { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 5px 8px; background: #fff; font: 500 10.5px/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--s-ink); }
.sh-badge.is-dark { background: var(--s-ink); color: #fff; }
.sh-info { display: grid; gap: 3px; padding: 12px 12px 28px; font-size: 13px; line-height: 1.45; }
.sh-name, .sh-price { color: var(--s-ink); }
.sh-price { font-variant-numeric: tabular-nums; }
.sh-opts { margin-top: 3px; font-size: 12px; color: var(--s-muted); }
.is-compact .sh-info { padding: 8px 8px 20px; font-size: 12px; }
.is-compact .sh-opts, .is-compact .sh-ph { display: none; }
/* neutral photo tones */
.sh-t1 { background: radial-gradient(60% 50% at 70% 25%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #ece8e2 0%, #ddd6cc 100%); }
.sh-t2 { background: radial-gradient(28% 46% at 58% 56%, rgba(86, 74, 64, 0.42), rgba(86, 74, 64, 0) 72%), linear-gradient(180deg, #e8ecec 0%, #d9dcda 100%); }
.sh-t3 { background: radial-gradient(34% 30% at 48% 52%, rgba(52, 50, 48, 0.55), rgba(52, 50, 48, 0) 70%), linear-gradient(180deg, #e9e7e3 0%, #d6d2cb 100%); }
.sh-t4 { background: radial-gradient(40% 50% at 40% 40%, rgba(214, 186, 164, 0.7), rgba(214, 186, 164, 0) 70%), linear-gradient(160deg, #e3d8cf 0%, #c9b8aa 100%); }
.sh-t5 { background: radial-gradient(26% 22% at 50% 50%, #3a3836 0, #2b2a28 62%, rgba(43, 42, 40, 0) 64%), linear-gradient(180deg, #f1ede9 0%, #e3ddd6 100%); }
.sh-t6 { background: radial-gradient(50% 40% at 50% 85%, rgba(120, 108, 96, 0.3), rgba(120, 108, 96, 0) 70%), linear-gradient(180deg, #f2f0ec 0%, #e2ddd5 100%); }
.sh-t7 { background: radial-gradient(24% 56% at 54% 54%, rgba(40, 38, 36, 0.6), rgba(40, 38, 36, 0) 72%), linear-gradient(180deg, #d9d6d1 0%, #bdb8b0 100%); }
.sh-t8 { background: radial-gradient(40% 40% at 52% 48%, rgba(196, 150, 150, 0.55), rgba(196, 150, 150, 0) 70%), linear-gradient(180deg, #f0ebe8 0%, #e2d9d4 100%); }
.sh-t5 .sh-ph, .sh-t7 .sh-ph { color: rgba(29, 28, 26, 0.36); }

/* ---------- Collections ---------- */
.sh-page-title { margin: 0; padding: 22px var(--sg) 34px; text-align: center; font: 400 22px/1.2 var(--sans); letter-spacing: -0.01em; color: var(--s-ink); }
.sh-collections { display: grid; margin: 0; padding: 0; list-style: none; }
.sh-collections a { position: relative; display: block; color: inherit; text-decoration: none; }
.sh-collections .sh-ph { top: 12px; bottom: auto; }
.sh-chip { position: absolute; left: 14px; bottom: 14px; padding: 6px 9px; background: #fff; font: 500 12.5px/1 var(--sans); color: var(--s-ink); }
.sh-chip small { margin-left: 6px; font-weight: 400; font-size: 11.5px; color: var(--s-muted); }

.sh-empty { display: grid; justify-items: center; gap: 12px; padding: 96px var(--sg); text-align: center; color: var(--s-text); }
.sh-empty a { color: var(--s-ink); text-underline-offset: 0.3em; }

/* ---------- Footer ---------- */
.sh-footer { margin-top: 80px; color: var(--s-text); }
.sh-news-note { margin: 0 var(--sg) 10px; font-size: 13px; color: var(--s-ink); }
.sh-news { display: flex; align-items: center; gap: 12px; margin: 0 var(--sg); border-bottom: 1px solid var(--s-ink); }
.sh-news input { flex: 1; min-width: 0; height: 64px; padding: 0; border: 0; border-radius: 0; background: none; font: 400 22px/1 var(--sans); color: var(--s-ink); }
.sh-news input::placeholder { color: var(--s-text); }
.sh-news input:focus { outline: none; }
.sh-news:focus-within { border-bottom-width: 2px; }
.sh-news button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--s-ink); cursor: pointer; }
.sh-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding: 44px var(--sg) 44px; font-size: 13px; }
.sh-cols p { margin: 0 0 14px; color: var(--s-ink); }
.sh-cols a, .sh-cols span { display: block; padding: 3px 0; color: var(--s-text); text-decoration: none; }
.sh-cols a:hover { color: var(--s-ink); text-decoration: underline; text-underline-offset: 0.3em; }
.sh-cols small { display: block; margin-top: 6px; font-size: 11.5px; color: var(--s-muted); }
.sh-base { margin: 0; padding: 0 var(--sg) 40px; font-size: 12px; color: var(--s-muted); }

/* ---------- Brand-site components on store pages (product, cart, checkout, order): plain store type ---------- */
.shop .crumbs { padding-top: 4px; font: 400 12px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--s-muted); }
.shop .caption, .shop .kicker, .shop .option-group legend, .shop .terms dt, .shop .option small { font-family: var(--sans); letter-spacing: 0.06em; }
.shop .kicker::before { display: none; }
.shop .display { font-family: var(--sans); font-stretch: normal; font-weight: 400; text-transform: none; letter-spacing: -0.015em; line-height: 1.15; }
.shop .display-l, .shop .display-m { font-size: clamp(24px, 3vw, 32px); }
.shop .display-s { font-size: 20px; }
.shop .page-hero { padding-block: 18px 24px; }
.shop .section-head { border-top-color: var(--s-line); }
.shop .buybox h1 { font: 400 clamp(22px, 2.2vw, 28px)/1.25 var(--sans); font-stretch: normal; letter-spacing: -0.01em; text-transform: none; }
.shop .buybox .price { font-size: 17px; font-weight: 400; }
.shop .gallery { gap: 2px; }
.shop .gallery .ph { aspect-ratio: 4 / 5; }
.shop .gallery .ph:first-child { grid-column: auto; }
.shop .gallery .ph:first-child:nth-last-child(2n + 1) { grid-column: 1 / -1; aspect-ratio: 1; }   /* odd count: the first one spans */
.shop .ph { background-image: none; color: rgba(29, 28, 26, 0.34); }
.shop .ph::before { content: none; }
.shop .ph-label { font: 500 8.5px/1.45 var(--sans); letter-spacing: 0.12em; }
.shop .ph-ratio { display: none; }
.shop .btn { letter-spacing: 0.02em; }
.shop .summary, .shop .option span, .shop .terms, .shop .terms div, .shop .cart-line { border-color: var(--s-line); }
.shop .cart-lines { border-top-color: var(--s-ink); }
.shop .mock-note { border-style: solid; border-color: var(--s-line); }

/* ---------- Product page: gallery 2-up on the left, sticky details on the right ---------- */
.sh-pdp { display: grid; }
.sh-pdp-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sh-pdp-gallery::-webkit-scrollbar { display: none; }
.sh-pdp-shot { aspect-ratio: 1; scroll-snap-align: start; }
.sh-pdp-info { display: grid; align-content: start; gap: 14px; padding: 22px var(--sg) 8px; }
.sh-crumbs { display: flex; gap: 8px; font-size: 12px; color: var(--s-muted); }
.sh-crumbs a { color: var(--s-muted); text-decoration: none; }
.sh-crumbs a:hover { color: var(--s-ink); }
.sh-pdp-title { margin: 6px 0 0; font: 400 26px/1.2 var(--sans); letter-spacing: -0.015em; color: var(--s-ink); }
.sh-pdp-price { margin: 0; font-size: 14px; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.sh-pdp-ko { margin: 6px 0 4px; font-size: 13px; line-height: 1.7; color: var(--s-muted); }
.sh-pdp-warn { margin: 0; padding: 10px 12px; background: var(--s-soft); font-size: 13px; color: var(--s-ink); }
.sh-pdp-form { display: grid; gap: 22px; margin-top: 8px; }
.sh-pdp-one { margin: 0; font-size: 13px; color: var(--s-text); }
/* Options: colour swatches + small size chips; the colour shows its own sizes (CSS :has) */
.sh-opts { display: grid; gap: 18px; }
.sh-opt-row { display: grid; gap: 10px; }
.sh-opt-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 13px; color: var(--s-ink); }
.sh-opt-picked > span { display: none; color: var(--s-muted); }
.sh-opt-hint { font-size: 12.5px; color: var(--s-muted); }
.sh-opt-hint[hidden] { display: none; }
.sh-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-sw { position: relative; }
.sh-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sh-sw .sw { display: block; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); transition: box-shadow 0.2s; }
.sh-sw:hover .sw { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 2px #fff, 0 0 0 3px var(--s-line); }
.sh-sw input:checked + .sw { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 2px #fff, 0 0 0 3px var(--s-ink); }
.sh-sw input:focus-visible + .sw { outline: 2px solid var(--s-ink); outline-offset: 4px; }
.sh-sw.is-out .sw, .sh-sw input:disabled + .sw { background-image: linear-gradient(135deg, transparent 47%, rgba(255, 255, 255, 0.9) 47% 53%, transparent 53%); opacity: 0.55; }
.sw-stone { background-color: #cdc4b7; } .sw-soft-black { background-color: #2c2b29; } .sw-graphite { background-color: #4b4946; }
.sw-fog { background-color: #d9d9d5; } .sw-ash { background-color: #a6a19a; } .sw-natural { background-color: #e7dccb; }
.sh-sizes { display: none; flex-wrap: wrap; gap: 6px; }
.sh-sizes.is-on, .sh-opts:has(#oc0:checked) .sh-sizes-0, .sh-opts:has(#oc1:checked) .sh-sizes-1, .sh-opts:has(#oc2:checked) .sh-sizes-2,
.sh-opts:has(#oc3:checked) .sh-sizes-3, .sh-opts:has(#oc4:checked) .sh-sizes-4, .sh-opts:has(#oc5:checked) .sh-sizes-5 { display: flex; }
.sh-opts:has(#oc0:checked) .sh-cn-0, .sh-opts:has(#oc1:checked) .sh-cn-1, .sh-opts:has(#oc2:checked) .sh-cn-2,
.sh-opts:has(#oc3:checked) .sh-cn-3, .sh-opts:has(#oc4:checked) .sh-cn-4, .sh-opts:has(#oc5:checked) .sh-cn-5 { display: inline; }
.sh-size { position: relative; }
.sh-size input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sh-size span { position: relative; display: inline-grid; place-items: center; min-width: 46px; height: 36px; padding: 0 12px; border: 1px solid var(--s-line); border-radius: 999px; font-size: 12.5px; color: var(--s-ink); transition: border-color 0.2s; }
.sh-size:hover span { border-color: var(--s-muted); }
.sh-size input:checked + span { border-color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink); }
.sh-size input:focus-visible + span { outline: 2px solid var(--s-ink); outline-offset: 2px; }
.sh-size input:disabled + span { color: #b8b3ac; text-decoration: line-through; cursor: not-allowed; }
.sh-low { position: absolute; top: 5px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: #9b8f82; }
.sh-opt-note { display: flex; align-items: center; gap: 6px; height: 18px; margin: 2px 0 0; font-size: 11.5px; line-height: 18px; color: var(--s-muted); }
.sh-opt-note .sh-low { position: static; }
/* with JS the legend gives way to "n개 남았어요" for the picked option only; the line's height stays reserved */
.sh-opt-left { display: none; }
.js .sh-opt-legend { display: none; }
.js .sh-opt-left { display: inline-flex; align-items: center; gap: 6px; color: #7d6447; }
.js .sh-opt-left:not(:empty)::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #9b8f82; }
.sh-sw .sh-low { top: -1px; right: -1px; }
.sh-opts.has-error .sh-size span, .sh-opts.has-error .sh-sw .sw { border-color: var(--s-muted); }
.sh-buy { display: flex; gap: 10px; }
.sh-qty { display: inline-flex; align-items: center; height: 52px; padding: 0 6px; border: 1px solid var(--s-line); border-radius: 999px; }
.sh-qty input { width: 40px; height: 100%; padding: 0; border: 0; background: none; text-align: center; font: 400 15px/1 var(--sans); color: var(--s-ink); -moz-appearance: textfield; appearance: textfield; }
.sh-qty input::-webkit-outer-spin-button, .sh-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sh-qty-step { display: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; font: 300 18px/1 var(--sans); color: var(--s-ink); cursor: pointer; }
.js .sh-qty-step { display: grid; place-items: center; }
.sh-qty-step:hover { background: var(--s-soft); }
.sh-pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 1px solid var(--s-ink); border-radius: 999px; background: #fff; font: 500 13px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-ink); text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s; }
.sh-pill:hover { background: var(--s-soft); }
.sh-pill.is-dark { background: var(--s-ink); color: #fff; }
.sh-pill.is-dark:hover { background: #3a3835; }
.sh-pill.is-off, .sh-pill[disabled] { border-color: var(--s-line); background: var(--s-soft); color: #a9a49d; cursor: not-allowed; }
.sh-buy .sh-pill { flex: 1; }
.sh-pill.is-dark.is-added { background: #3c3a36; }
.sh-accs { margin-top: 18px; border-top: 1px solid var(--s-ink); }
.sh-acc { border-bottom: 1px solid var(--s-ink); }
.sh-acc summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; list-style: none; font: 500 12px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-ink); cursor: pointer; }
.sh-acc summary::-webkit-details-marker { display: none; }
.sh-acc summary::after { content: "+"; font: 300 18px/1 var(--sans); }
.sh-acc[open] summary::after { content: "−"; }
.sh-acc p, .sh-acc ul { margin: 0 0 18px; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.75; color: var(--s-text); }
.sh-acc li + li { margin-top: 4px; }
.sh-related { padding: 72px var(--sg) 0; }
.sh-related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; padding-top: 18px; border-top: 1px solid var(--s-line); }
.sh-related-head h2 { margin: 0; font: 400 20px/1.2 var(--sans); color: var(--s-ink); }
.sh-related-head p { margin: 0; font-size: 12.5px; color: var(--s-muted); }
.sh-related-head a { color: var(--s-ink); }

/* ---------- Cart drawer (#cart, CSS :target — no script needed) ---------- */
.sh-drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; transition: visibility 0s 0.35s; }
.sh-drawer:target { visibility: visible; transition: visibility 0s; }
.sh-drawer-scrim { position: absolute; inset: 0; background: rgba(20, 19, 17, 0); transition: background 0.35s; }
.sh-drawer:target .sh-drawer-scrim { background: rgba(20, 19, 17, 0.38); }
.sh-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(480px, 100%); padding: 22px 24px 24px; background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.21, 1); }
.sh-drawer:target .sh-drawer-panel { transform: none; }
.sh-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; }
.sh-drawer-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 26px/1 var(--sans); letter-spacing: -0.01em; color: var(--s-ink); }
.sh-drawer-n { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--s-soft); font: 500 13px/1 var(--sans); }
.sh-drawer-close { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--s-ink); border-radius: 50%; color: var(--s-ink); }
.sh-drawer-close:hover { background: var(--s-soft); }
.sh-drawer-note { margin: 0 0 6px; padding: 10px 12px; background: var(--s-soft); font-size: 13px; color: var(--s-ink); }
.sh-lines { flex: 1; margin: 0; padding: 0; list-style: none; }
.sh-line { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--s-ink); }
.sh-line:last-child { border-bottom: 0; }
.sh-line-img { display: block; aspect-ratio: 1; }
.sh-line-main { display: grid; align-content: start; gap: 4px; font-size: 13px; }
.sh-line-name { font-size: 14.5px; line-height: 1.35; color: var(--s-ink); text-decoration: none; }
.sh-line-meta { color: var(--s-muted); }
.sh-line-warn { font-size: 12.5px; color: #a3301f; }
.sh-line-act { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.sh-line-act form { margin: 0; }
.sh-step { display: inline-flex; align-items: center; height: 42px; border: 1px solid var(--s-line); border-radius: 6px; background: #faf9f7; }
.sh-step button { width: 38px; height: 100%; padding: 0; border: 0; background: none; font: 300 17px/1 var(--sans); color: var(--s-ink); cursor: pointer; }
.sh-step button:disabled { color: #c7c2bb; cursor: not-allowed; }
.sh-step span { min-width: 26px; text-align: center; font-size: 14px; color: var(--s-ink); }
.sh-trash { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--s-ink); cursor: pointer; }
.sh-trash:hover { background: var(--s-soft); }
.sh-line-total { font-size: 14px; color: var(--s-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-drawer-foot { display: grid; gap: 12px; padding-top: 6px; border-top: 1px solid var(--s-ink); }
.sh-drawer-foot .sh-acc { border-bottom-color: var(--s-ink); }
.sh-drawer-foot .sh-acc p { margin-bottom: 16px; }
.sh-drawer-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 14px; color: var(--s-ink); }
.sh-drawer-total strong { font: 400 26px/1 var(--sans); font-variant-numeric: tabular-nums; }
.sh-drawer-sub { margin: 0 0 6px; font-size: 12px; line-height: 1.6; color: var(--s-muted); }
.sh-drawer-foot .sh-pill { width: 100%; }
.sh-drawer-empty { display: grid; justify-items: start; gap: 18px; padding-top: 24px; font-size: 14px; }
.sh-pill.is-sm { min-height: 40px; padding: 0 18px; font-size: 12px; }

/* ---------- Order status (/shop/order/:code): status · steps · details on the left, what was ordered on the right ---------- */
.sh-order { display: grid; border-top: 1px solid var(--s-line); }
.sh-order-main { padding: 18px var(--sg) 48px; }
.sh-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--s-muted); }
.sh-crumbs a { color: var(--s-ink); text-decoration: none; }
.sh-crumbs a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.sh-order-head { display: flex; align-items: center; gap: 16px; margin: 26px 0 24px; }
.sh-order-mark { display: grid; flex: none; place-items: center; width: 50px; height: 50px; border: 1px solid var(--s-ink); border-radius: 50%; color: var(--s-ink); }
.sh-order-mark.is-off { border-color: var(--s-muted); color: var(--s-muted); }
.sh-order-code { margin: 0 0 6px; font-size: 12.5px; color: var(--s-muted); font-variant-numeric: tabular-nums; }
.sh-order-title { margin: 0; font: 400 clamp(23px, 2.4vw, 30px)/1.2 var(--sans); letter-spacing: -0.015em; color: var(--s-ink); }
.sh-order-notice { margin: 0 0 14px; padding: 12px 16px; border-radius: 10px; background: var(--s-soft); font-size: 13px; line-height: 1.6; color: var(--s-ink); }
.sh-order-notice.is-error { background: #f8ece9; color: #8a2a1b; }
.sh-order-box { padding: 22px 22px 24px; border: 1px solid var(--s-line); border-radius: 12px; }
.sh-order-box + .sh-order-box { margin-top: 14px; }
.sh-order-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 500 15px/1.3 var(--sans); color: var(--s-ink); }
.sh-order-h span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #fff; font-size: 11.5px; font-weight: 500; }
.sh-order-box > p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--s-text); }
.sh-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 20px 0 0; padding: 0; list-style: none; }
.sh-steps li { padding-top: 12px; border-top: 3px solid var(--s-line); font-size: 12.5px; color: var(--s-muted); }
.sh-steps li.is-done { border-top-color: var(--s-ink); }
.sh-steps li.is-now { border-top-color: var(--s-ink); font-weight: 500; color: var(--s-ink); }
.sh-order-cancel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--s-line); font-size: 13px; color: var(--s-text); }
.sh-order-info { display: grid; gap: 16px; margin: 16px 0 0; }
.sh-order-info dt { margin-bottom: 4px; font-size: 12px; color: var(--s-muted); }
.sh-order-info dd { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--s-ink); overflow-wrap: anywhere; }
.sh-order-sim { margin: 18px 2px 0; font-size: 12.5px; line-height: 1.7; color: var(--s-muted); }
.sh-order-sim strong { margin-right: 6px; font-weight: 500; color: var(--s-text); }
.sh-order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.sh-order-link { display: inline-flex; gap: 8px; font-size: 13px; font-weight: 500; color: var(--s-ink); text-decoration: none; }
.sh-order-link:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.sh-order-guest { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--s-muted); }
.sh-order-side { padding: 26px var(--sg) 36px; border-top: 1px solid var(--s-line); background: var(--s-soft); }
.sh-order-lines { margin: 14px 0 0; padding: 0; list-style: none; }
.sh-order-lines li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; }
.sh-order-img { position: relative; display: block; aspect-ratio: 1; border: 1px solid var(--s-line); border-radius: 8px; }
.sh-order-img b { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(29, 28, 26, 0.78); font: 500 11.5px/22px var(--sans); color: #fff; text-align: center; }
.sh-order-item { display: grid; gap: 3px; min-width: 0; font-size: 12.5px; color: var(--s-muted); }
.sh-order-name { font-size: 14px; line-height: 1.35; color: var(--s-ink); }
.sh-order-name a { color: inherit; text-decoration: none; }
.sh-order-name a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.sh-order-amt { font-size: 14px; color: var(--s-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-order-sum { display: grid; gap: 10px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--s-line); }
.sh-order-sum div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.sh-order-sum dt { color: var(--s-text); }
.sh-order-sum dd { margin: 0; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.sh-order-sum .is-total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--s-line); }
.sh-order-sum .is-total dt { font-size: 15px; font-weight: 500; color: var(--s-ink); }
.sh-order-sum .is-total dd { font: 400 26px/1 var(--sans); letter-spacing: -0.01em; }
.sh-order-note { margin: 10px 0 0; font-size: 12px; color: var(--s-muted); text-align: right; }
@media (min-width: 600px) {
  .sh-order-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
}
@media (min-width: 960px) {
  .sh-order { grid-template-columns: minmax(0, 1.25fr) minmax(380px, 1fr); }
  .sh-order-main { justify-self: end; width: 100%; max-width: 720px; padding: 26px clamp(32px, 4vw, 72px) 80px var(--sg); }
  .sh-order-side { border-top: 0; border-left: 1px solid var(--s-line); padding: 40px clamp(32px, 4vw, 72px) 64px; }
  .sh-order-side-in { position: sticky; top: 100px; max-width: 440px; }
}

@media (min-width: 768px) {
  body.shop { --sg: 32px; }
  .sh-row { height: 76px; }
  .shop-front .sh-header { margin-bottom: -76px; }
  .sh-front .sh-ph { display: block; }
  .sh-front { padding-top: 110px; padding-bottom: 56px; }
  .sh-menu { display: none; }
  .sh-nav { display: flex; align-items: center; gap: 26px; }
  .sh-logo span { font-size: 30px; }
  .sh-right { gap: 8px; }
  .sh-search-form { left: auto; right: var(--sg); width: 420px; padding: 6px 0 18px; border-bottom: 0; box-shadow: 0 1px 0 #fff; }
  .sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-grid.is-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sh-collections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-page-title { padding: 30px var(--sg) 44px; font-size: 26px; }
  .sh-info { padding: 14px 14px 32px; }
  .sh-news input { height: 84px; font-size: 30px; }
  .sh-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 56px var(--sg) 64px; }
  .shop .buybox, .shop .summary { top: 100px; }   /* below the sticky store header */
  .sh-pdp { grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); align-items: start; }
  .sh-pdp-gallery { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
  .sh-pdp-info { position: sticky; top: 76px; padding: 40px clamp(32px, 3.4vw, 64px) 40px; }
  .sh-pdp-title { font-size: clamp(26px, 2.1vw, 34px); }
  .sh-drawer-panel { padding: 28px 36px 32px; }
}
@media (min-width: 1024px) {
  .sh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sh-grid.is-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .sh-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sh-grid.is-compact { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ---------- Uploaded product images (admin, R2 via /media): fill the placeholder frame wherever one exists ---------- */
.sh-img > img, .sh-line-img > img, .sh-order-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-line-img { position: relative; overflow: hidden; }
.sh-order-img > img { border-radius: inherit; }
.sh-order-img b, .sh-img .sh-badge { z-index: 1; }
/* Colour chips from a hex (a colour name outside the brand six, or a colour picked in the admin): an SVG circle inside .sw */
.sw.sw-hex { position: relative; overflow: hidden; }
.sw-hex > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sh-sw.is-out .sw-hex::after, .sh-sw input:disabled + .sw-hex::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background-image: linear-gradient(135deg, transparent 47%, rgba(255, 255, 255, 0.9) 47% 53%, transparent 53%); }

/* ---------- Admin product editor (/admin/catalog/new · /admin/catalog/:id): the store product page, editable ----------
   The same sh-pdp markup and rules as /shop/<slug>; only editable states are added (a dashed line = still empty). */
.sh-editor { --sg: 16px; --s-ink: #1d1c1a; --s-text: #45423d; --s-muted: #8a857e; --s-line: #e7e4df; --s-soft: #f4f2ef;
  border: 1px solid var(--s-line); background: #fff; color: var(--s-text); font-size: 14px; }
.pe-note { margin: 0 0 12px; }
.sh-editor .sh-pdp-gallery { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
/* Gallery slots: the whole slot is the click target; the native file input is hidden but stays focusable. */
.pe .pe-slot { position: relative; }
.pe .pe-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; }
.pe .pe-slot.is-dropped .pe-img { opacity: 0.22; }
.pe .pe-file { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 0; }
.pe .pe-drop { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; color: var(--s-ink); background: rgba(244, 241, 236, 0.72); cursor: pointer; transition: background 0.2s; }
.pe .pe-drop::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(29, 28, 26, 0.22); pointer-events: none; transition: border-color 0.2s; }
.pe .pe-drop:hover { background: rgba(250, 248, 245, 0.86); }
.pe .pe-drop:hover::before, .pe .pe-drop:focus-within::before { border-color: var(--s-ink); }
.pe .pe-drop:focus-within::before { border-style: solid; }
/* A file picked but not saved yet: the picture shows as it is (no veil, no frame, no "추가" text); the whole slot stays the
   click target to pick another, with a quiet "바꾸기" on hover. */
.pe .pe-slot.is-filled .pe-drop { background: transparent; }
.pe .pe-slot.is-filled .pe-drop::before, .pe .pe-slot.is-filled .pe-drop-t, .pe .pe-slot.is-filled .pe-drop-s { display: none; }
.pe .pe-slot.is-filled .pe-drop::after { content: "바꾸기"; position: absolute; top: 12px; right: 12px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); font: 500 11.5px/28px var(--sans); color: var(--s-ink); opacity: 0; transition: opacity 0.2s; }
.pe .pe-slot.is-filled .pe-drop:hover::after, .pe .pe-slot.is-filled .pe-drop:focus-within::after { opacity: 1; }
.pe .pe-drop-t { display: block; font: 500 12px/1 var(--sans); letter-spacing: 0.06em; color: var(--s-ink); }
.pe .pe-drop-s { display: block; font: 400 11px/1 var(--sans); letter-spacing: 0.04em; color: var(--s-muted); }
.pe .pe-acts { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; gap: 6px; }
.pe .pe-act { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); font: 500 11.5px/1 var(--sans); color: var(--s-ink); cursor: pointer; }
.pe .pe-act:hover { background: #fff; }
.pe .pe-act:focus-within { outline: 2px solid var(--s-ink); outline-offset: 2px; }
.pe .pe-act input[type="checkbox"] { width: 13px; height: 13px; margin: 0; accent-color: var(--s-ink); }
/* The role line = the store's caption (.sh-ph), editable in place. */
.pe input.pe-role { z-index: 2; width: auto; min-height: 0; padding: 2px 0; border: 0; border-bottom: 1px dashed transparent; border-radius: 0; background: transparent; box-shadow: none; }
.pe input.pe-role:hover, .pe input.pe-role:focus { border-bottom-color: rgba(29, 28, 26, 0.4); outline: none; color: var(--s-ink); }
.pe .pe-slot.is-filled input.pe-role { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.pe .pe-slot.is-filled input.pe-role:hover, .pe .pe-slot.is-filled input.pe-role:focus { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.7); }
.pe .pe-msg { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 4px 9px; border-radius: 999px; background: #fff; font-size: 11.5px; color: var(--s-ink); }
.pe .pe-msg:empty { display: none; }
/* Info column: text that is editable — no box until focus, a dashed line while empty. */
.pe .pe-in { display: block; width: 100%; min-height: 0; padding: 2px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; }
.pe .pe-in:placeholder-shown { border-bottom: 1px dashed #cfc8be; }
.pe .pe-in:hover { border-bottom-color: #cfc8be; }
.pe .pe-in:focus { outline: none; border-bottom: 1px solid var(--s-ink); }
.pe .pe-in::placeholder { color: #b5afa6; }
/* The inputs carry the store's own classes; give them the store's type back (they don't inherit it from themselves). */
.pe input.sh-pdp-title { margin: 6px 0 0; font: 400 26px/1.25 var(--sans); letter-spacing: -0.015em; color: var(--s-ink); }
.pe .sh-pdp-ko.pe-intro { margin: 6px 0 4px; font-size: 13px; line-height: 1.7; color: var(--s-muted); resize: none; overflow: hidden; field-sizing: content; }
.pe .pe-price { display: flex; align-items: baseline; gap: 1px; }
.pe .pe-price .pe-in { width: 12ch; }
.pe .pe-crumb, .pe .pe-optlabel { appearance: none; padding: 0 14px 1px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 4px center, right 0 center; background-size: 4px 4px; font: inherit; color: var(--s-ink); cursor: pointer; }
.pe .pe-crumb { font-size: 12px; color: var(--s-muted); }
.pe .pe-crumb:hover, .pe .pe-optlabel:hover { color: var(--s-ink); border-bottom-color: #cfc8be; }
.pe .pe-crumb:focus-visible, .pe .pe-optlabel:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 2px; }
/* Options: the store label + chips preview, then a tidy editing grid (swatch · value · size · stock · ×). */
.pe .pe-opt-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.pe .pe-type { display: inline-flex; align-items: baseline; gap: 8px; font-size: 11.5px; color: var(--s-muted); }
.pe .pe-optlabel { font-size: 12px; }
.pe .pe-preview-chips { display: grid; gap: 10px; min-height: 36px; }
.pe .pe-preview-chips .sh-sw .sw { width: 26px; height: 26px; }
.pe .pe-rows { display: grid; gap: 6px; margin-top: 4px; }
.pe .pe-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 28px; align-items: center; gap: 0 8px; }
.pe .pe-opts.is-color .pe-row, .pe .pe-opts:has(.pe-optlabel option[value="색상"]:checked) .pe-row { grid-template-columns: 26px minmax(0, 1fr) 76px 28px; }
.pe .pe-row[hidden] { display: none; }
.pe .pe-row-head { font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-muted); }
.pe .pe-row-head .pe-h-stock { text-align: right; padding-right: 12px; }
.pe .pe-cell { width: 100%; height: 36px; min-height: 0; padding: 0 12px; border: 1px solid var(--s-line); border-radius: 999px; background: #fff; box-shadow: none; font: inherit; font-size: 12.5px; color: var(--s-ink); }
.pe .pe-row.is-new .pe-cell:placeholder-shown { border-style: dashed; }
.pe .pe-cell:hover { border-color: #cfc8be; }
.pe .pe-cell:focus { outline: none; border-color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink); }
.pe .pe-cell::placeholder { color: #b5afa6; }
.pe .pe-stock { text-align: right; -moz-appearance: textfield; appearance: textfield; }
.pe .pe-stock::-webkit-outer-spin-button, .pe .pe-stock::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* One list or the colour × size grid, by the option type (class from the server / JS; :has for the no-JS select). */
.pe .pe-matrix { display: none; }
.pe .pe-opts.is-two .pe-matrix, .pe .pe-opts:has(.pe-optlabel option[value="색상 · 사이즈"]:checked) .pe-matrix { display: grid; }
.pe .pe-opts.is-two .pe-single, .pe .pe-opts:has(.pe-optlabel option[value="색상 · 사이즈"]:checked) .pe-single { display: none; }
.pe .pe-single { display: grid; gap: 6px; }
/* The colour chip: one click opens a small palette (brand six · common · already used) and a quiet "직접 입력 #HEX" line. */
.pe .pe-swc, .pe .pe-h-sw { display: none; }
.pe .pe-opts.is-color .pe-swc, .pe .pe-opts.is-color .pe-h-sw, .pe .pe-opts:has(.pe-optlabel option[value="색상"]:checked) .pe-swc,
.pe .pe-opts:has(.pe-optlabel option[value="색상"]:checked) .pe-h-sw, .pe .pe-matrix .pe-swc { display: block; }
.pe .pe-pal { position: relative; }
.pe .pe-pal-sum { display: block; width: 26px; height: 26px; list-style: none; border-radius: 50%; cursor: pointer; }
.pe .pe-pal-sum::-webkit-details-marker { display: none; }
.pe .pe-chip-sw, .pe .pe-gchip .sw, .pe .pe-pal-sw .sw, .pe .pe-preview-chips .sw { display: block; border-radius: 50%; }
.pe .pe-pal-sum .sw { width: 26px; height: 26px; }
.pe .sw.sw-hex { box-shadow: none; }
.pe .pe-pal-sum:hover .sw, .pe .pe-pal[open] .pe-pal-sum .sw { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 2px #fff, 0 0 0 3px var(--s-ink); }
.pe .pe-pal-sum:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 3px; }
.pe .sw.sw-none { box-shadow: none; background: repeating-conic-gradient(#f1eee9 0 25%, #fff 0 50%) 50% / 8px 8px; outline: 1px dashed #cfc8be; outline-offset: -1px; }
.pe .pe-pal-panel { position: absolute; left: -6px; top: calc(100% + 8px); z-index: 8; display: grid; gap: 6px; width: 252px; padding: 12px; border: 1px solid var(--s-line); background: #fff; box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.32); }
.pe .pe-pal-h { margin: 2px 0 0; font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-muted); }
.pe .pe-pal-row { display: grid; grid-template-columns: repeat(8, 22px); gap: 6px; }
.pe .pe-pal-sw { position: relative; width: 22px; height: 22px; cursor: pointer; }
.pe .pe-pal-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pe .pe-pal-sw .sw { width: 22px; height: 22px; }
.pe .pe-pal-sw:hover .sw, .pe .pe-pal-sw input:checked + .sw { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--s-ink); }
.pe .pe-pal-sw input:focus-visible + .sw { outline: 2px solid var(--s-ink); outline-offset: 3px; }
.pe .pe-pal-more { position: relative; display: flex; align-items: center; gap: 10px; margin: 6px 0 0; padding: 10px 0 2px; border-top: 1px solid #f0ede8; font-size: 12.5px; color: var(--s-ink); cursor: pointer; }
.pe .pe-pal-more:hover { color: var(--s-muted); }
.pe .pe-wheel { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(#e05252, #e0c152, #6cc56a, #52c1e0, #5a62e0, #d052e0, #e05252); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.pe .pe-wheel::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
/* The system colour window: the native input sits over the swatch, transparent; the row is its label, so one click opens it. */
.pe .pe-wheel-in { position: absolute; inset: -4px; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.pe .pe-pal-more:focus-within .pe-wheel { outline: 2px solid var(--s-ink); outline-offset: 2px; }
.pe .pe-help-color { display: none; }
.pe .pe-opts.is-color .pe-help-color, .pe .pe-opts.is-two .pe-help-color,
.pe .pe-opts:has(.pe-optlabel option[value*="색상"]:checked) .pe-help-color { display: block; }
/* 색상 · 사이즈: each colour once, each size once, then the stock grid (empty = that combination is not sold). */
.pe .pe-matrix { gap: 16px; }
.pe .pe-axis { display: grid; gap: 8px; }
.pe .pe-axis-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font: 500 10.5px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-muted); }
.pe .pe-axis-h span { font-size: 11px; letter-spacing: 0; text-transform: none; color: #a9a39a; }
.pe .pe-clist { display: grid; gap: 6px; }
.pe .pe-crow { display: grid; grid-template-columns: 26px minmax(0, 1fr) 28px; align-items: center; gap: 0 8px; }
.pe .pe-crow[hidden], .pe .pe-schip[hidden] { display: none; }
.pe .pe-crow.is-new .pe-cell:placeholder-shown { border-style: dashed; }
.pe .pe-crow:has(.pe-x input:checked) .pe-cell { text-decoration: line-through; color: var(--s-muted); background: var(--s-soft); }
.pe .pe-crow:has(.pe-x input:checked) .pe-x { background: var(--s-ink); color: #fff; }
.pe .pe-slist { display: flex; flex-wrap: wrap; gap: 6px; }
.pe .pe-schip { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 4px 0 12px; border: 1px solid var(--s-line); border-radius: 999px; background: #fff; }
.pe .pe-schip.is-new:has(.pe-sin:placeholder-shown) { border-style: dashed; }
.pe .pe-schip:focus-within { border-color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink); }
.pe .pe-sin { width: 3.4em; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font: inherit; font-size: 12.5px; text-align: center; color: var(--s-ink); field-sizing: content; min-width: 2.2em; }
.pe .pe-sin:focus { outline: none; }
.pe .pe-sin::placeholder { color: #b5afa6; }
.pe .pe-sx { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; font: 300 15px/1 var(--sans); color: var(--s-muted); cursor: pointer; }
.pe .pe-sx:hover { background: var(--s-soft); color: var(--s-ink); }
.pe .pe-sx input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pe .pe-sx.is-locked { opacity: 0.3; cursor: not-allowed; }
.pe .pe-schip:has(.pe-sx input:checked) { background: var(--s-soft); }
.pe .pe-schip:has(.pe-sx input:checked) .pe-sin { text-decoration: line-through; color: var(--s-muted); }
.pe .pe-grid-wrap { overflow-x: auto; border: 1px solid var(--s-line); }
.pe .pe-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pe .pe-grid th, .pe .pe-grid td { padding: 6px 8px; border-bottom: 1px solid #f0ede8; text-align: center; white-space: nowrap; }
.pe .pe-grid thead th { font: 500 11.5px/1.2 var(--sans); color: var(--s-ink); background: #faf9f7; }
.pe .pe-grid tbody th { text-align: left; font-weight: 400; color: var(--s-ink); }
.pe .pe-grid tr:last-child > * { border-bottom: 0; }
.pe .pe-grid-corner { font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-muted); }
.pe .pe-gchip { display: inline-block; vertical-align: middle; margin-right: 8px; }
.pe .pe-gchip .sw { width: 16px; height: 16px; }
.pe .pe-gcell { width: 58px; height: 32px; min-height: 0; padding: 0 8px; border: 1px solid var(--s-line); border-radius: 999px; background: #fff; box-shadow: none; font: inherit; font-size: 12.5px; text-align: center; color: var(--s-ink); -moz-appearance: textfield; appearance: textfield; }
.pe .pe-gcell::-webkit-outer-spin-button, .pe .pe-gcell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pe .pe-gcell:placeholder-shown { border-style: dashed; background: transparent; }
.pe .pe-gcell:focus { outline: none; border-color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink); }
.pe .pe-grid .is-off, .pe .pe-grid [hidden] { display: none; }
.pe .pe-sadd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px; border: 1px solid var(--s-line); background: #fff; box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.3); }
.pe .pe-sadd[hidden], .pe .pe-preset[hidden] { display: none; }
.pe .pe-preset { width: auto; min-width: 44px; height: 32px; min-height: 0; padding: 0 12px; border: 1px solid var(--s-line); border-radius: 999px; background: #fff; box-shadow: none; font: 500 12px/1 var(--sans); color: var(--s-ink); cursor: pointer; }
.pe .pe-preset:hover { border-color: var(--s-ink); }
.pe .pe-preset:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 2px; }
.pe .pe-sadd-own { display: inline-flex; flex: 1 1 200px; align-items: center; gap: 6px; }
.pe .pe-sadd-in { flex: 1; min-width: 0; height: 32px; min-height: 0; padding: 0 12px; border: 1px dashed #cfc8be; border-radius: 999px; background: #fff; box-shadow: none; font: inherit; font-size: 12.5px; color: var(--s-ink); }
.pe .pe-sadd-in:focus { outline: none; border: 1px solid var(--s-ink); }
.pe .pe-grid .is-dim { opacity: 0.35; }
.pe .pe-x { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; font: 300 18px/1 var(--sans); color: var(--s-muted); cursor: pointer; }
.pe .pe-x:hover { background: var(--s-soft); color: var(--s-ink); }
.pe .pe-x input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pe .pe-x:focus-within, .pe button.pe-x:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 1px; }
.pe .pe-x.is-locked { opacity: 0.3; cursor: not-allowed; }
.pe .pe-x.is-locked input { cursor: not-allowed; }
.pe .pe-row:has(.pe-x input:checked) .pe-cell { text-decoration: line-through; color: var(--s-muted); background: var(--s-soft); }
.pe .pe-row:has(.pe-x input:checked) .pe-x { background: var(--s-ink); color: #fff; }
.pe button.pe-x[hidden] { display: none; }
.pe .pe-add { justify-self: start; width: auto; min-height: 0; margin-top: 2px; padding: 4px 0; border: 0; background: none; box-shadow: none; font: 500 12.5px/1.4 var(--sans); color: var(--s-ink); text-decoration: underline; text-underline-offset: 0.3em; cursor: pointer; }
.pe .pe-add[hidden] { display: none; }
.pe .pe-add:hover { color: var(--s-muted); }
.pe .pe-help { margin: 2px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--s-muted); }
/* Accordions: the copy fields fill the column, borderless on a light ground, growing with the text. */
.pe .pe-area { display: block; width: 100%; min-height: 0; margin: 0 0 18px; padding: 10px 12px; border: 0; border-radius: 4px; background: var(--s-soft); box-shadow: none; font: inherit; font-size: 13.5px; line-height: 1.75; color: var(--s-text); resize: vertical; field-sizing: content; }
.pe .pe-area::placeholder { color: #a9a39a; }
.pe .pe-area:focus { outline: none; box-shadow: inset 0 0 0 1px var(--s-ink); background: #fff; }
.sh-editor .sh-acc ul + .pe-help { margin: -10px 0 16px; }
/* "Use it in class": linked classes as chips + "+ 클래스 연결" (a dialog), with the 수업에서 쓰는 도구 switch beside the label. */
.pe .sh-pdp-info:has(.pe-pal[open]) { z-index: 6; }
.pe .pe-pal.is-up .pe-pal-panel { top: auto; bottom: calc(100% + 8px); }
.pe .pe-use { display: grid; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--s-line); }
.pe .pe-use-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pe .pe-use-h { margin: 3px 0 0; font: 500 12px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-ink); }
.pe .pe-use .pe-practice { flex: 0 1 auto; min-width: 0; margin: 0; font-size: 12.5px; }
.pe .pe-use-h { flex: none; }
.pe .pe-use-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pe .pe-use-chips:empty { display: none; }
.pe .pe-uchip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 12px; border: 1px solid var(--s-line); border-radius: 999px; font-size: 12.5px; color: var(--s-ink); }
.pe .pe-uchip:has(input:checked) { opacity: 0.4; text-decoration: line-through; }
.pe .pe-uchip-x { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; font: 300 15px/1 var(--sans); color: var(--s-muted); cursor: pointer; }
.pe .pe-uchip-x:hover { background: var(--s-soft); color: var(--s-ink); }
.pe .pe-uchip-x input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pe .pe-uchip-x:focus-within { outline: 2px solid var(--s-ink); outline-offset: 1px; }
.pe a.pe-add { justify-self: start; }
/* The class dialog (#classes, CSS :target): a bottom sheet on phones, centred from 768px; only its list scrolls. */
.pe-dlg { position: fixed; inset: 0; z-index: 90; display: grid; align-items: end; visibility: hidden; transition: visibility 0s 0.25s; }
.pe-dlg:target { visibility: visible; transition: visibility 0s; }
:root:has(.pe-dlg:target) { overflow: hidden; }
.pe-dlg-scrim { position: absolute; inset: 0; background: rgba(20, 19, 17, 0); transition: background 0.25s; }
.pe-dlg:target .pe-dlg-scrim { background: rgba(20, 19, 17, 0.42); }
.pe-dlg-panel { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: min(86vh, 720px); border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, 0.4); transform: translateY(24px); opacity: 0; transition: transform 0.25s, opacity 0.25s; }
.pe-dlg:target .pe-dlg-panel { transform: none; opacity: 1; }
.pe-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 12px; }
.pe-dlg-k { margin: 0 0 6px; font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #8a857e; }
.pe-dlg-title { margin: 0; font: 400 22px/1.2 var(--sans); color: #1d1c1a; }
.pe-dlg-close { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #e7e4df; border-radius: 50%; font: 300 20px/1 var(--sans); color: #1d1c1a; text-decoration: none; }
.pe-dlg-close:hover { border-color: #1d1c1a; }
.pe-dlg-search { padding: 0 20px 10px; border-bottom: 1px solid #f0ede8; }
.pe-dlg-search input { width: 100%; height: 38px; min-height: 0; padding: 0 14px; border: 1px solid #e7e4df; border-radius: 999px; background: #fff; box-shadow: none; font: inherit; font-size: 14px; color: #1d1c1a; }
.pe-dlg-search input:focus { outline: none; border-color: #1d1c1a; }
.pe-dlg-search input[hidden] { display: none; }
.pe-dlg-body { display: grid; align-content: start; gap: 2px; padding: 6px 10px 12px; overflow-y: auto; overscroll-behavior: contain; }
.pe-dlg-foot { padding: 12px 20px 18px; border-top: 1px solid #f0ede8; }
.pe-dlg-done { display: flex; justify-content: center; width: 100%; min-height: 44px; align-items: center; text-decoration: none; }
.pe .pe-mg { display: grid; padding: 4px 0; border-top: 1px solid #f0ede8; }
.pe .pe-mg:first-child { border-top: 0; }
.pe .pe-mg[hidden] { display: none; }
.pe .pe-mg-h { margin: 4px 10px 2px 30px; font-size: 11px; letter-spacing: 0.04em; color: var(--s-muted); }
.pe .pe-mi { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 7px 10px 7px 30px; font-size: 13px; line-height: 1.4; color: var(--s-text); cursor: pointer; }
.pe .pe-mi[hidden] { display: none; }
.pe .pe-mi:hover { background: var(--s-soft); }
.pe .pe-mi input { position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; margin: -7px 0 0; opacity: 0; cursor: pointer; }
.pe .pe-mi::before { content: ""; position: absolute; left: 10px; top: 50%; width: 14px; margin-top: -9px; font-size: 13px; line-height: 18px; text-align: center; color: var(--s-ink); }
.pe .pe-mi:has(input:checked)::before { content: "✓"; }
.pe .pe-mi:has(input:checked) { color: var(--s-ink); font-weight: 500; }
.pe .pe-mi:focus-within { outline: 2px solid var(--s-ink); outline-offset: -2px; }
.pe .pe-mi-t { flex: 1 1 auto; }
.pe .pe-mi-s { flex: none; font-size: 11.5px; font-weight: 400; color: var(--s-muted); }
.pe .pe-mi.is-series .pe-mi-t { font-weight: 600; color: var(--s-ink); }
/* One switch component: 숨김/게시 in the page header (form="pe-form") and "수업에서 쓰는 도구" under the class crumb. */
.pe-mini { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: #2a2825; cursor: pointer; }
.pe-mini input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pe-mini input:focus-visible + .pe-switch { outline: 2px solid #1d1c1a; outline-offset: 2px; }
.pe-mini small { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.45; color: #8a857e; }
.pe-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: #d6d1c9; transition: background 0.2s; }
.pe-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); transition: transform 0.2s; }
.pe-mini input:checked + .pe-switch { background: #1d1c1a; }
.pe-mini input:checked + .pe-switch::after { transform: translateX(16px); }
.pe-status { padding: 4px 4px 4px 4px; }
.pe-status > span:last-child { width: 10.5em; }   /* a fixed text box: switching never moves the button beside it */
/* Header: "← 상품 목록" above the title (beside it on phones), the address under it; the switch and the submit on the right.
   The form ends with the same submit and the quiet 삭제 — there is no fixed bar. */
.page-head.has-lead { align-items: flex-end; }
.page-head-main { display: grid; gap: 4px; min-width: 0; }
.pe-back { justify-self: start; font-size: 12.5px; color: #8a857e; text-decoration: none; }
.pe-back:hover { color: #1d1c1a; text-decoration: underline; text-underline-offset: 0.25em; }
.pe-head-meta { margin: 0; font-size: 12.5px; color: #8a857e; overflow-wrap: anywhere; }
.pe-head-meta a { color: #45423d; }
.pe-head-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pe-head-submit { min-height: 40px; padding: 0 22px; }
.pe .pe-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 18px; margin-top: 18px; }
.pe .pe-end .btn { min-height: 42px; padding: 0 26px; }
.pe .pe-end-del { order: -1; font-size: 12.5px; color: #8a857e; }
@media (max-width: 767px) {
  .page-head.has-lead .page-head-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
  .page-head.has-lead .pe-head-meta { flex-basis: 100%; }
  .page-head.has-lead .pe-head-acts { width: 100%; justify-content: space-between; }
}
/* the label + hint change with the switch: a fixed text box, so the switch never moves (the header row is right-aligned) */
.pe-status > span:last-child { width: 176px; white-space: nowrap; }
.pe-status strong { font-size: 13px; font-weight: 600; color: #1d1c1a; }
.pe .pe-practice { margin-top: 14px; align-items: flex-start; }
.pe .pe-practice .pe-switch { margin-top: 1px; }
.pe .pe-del-link { width: auto; min-height: 0; padding: 4px 0; border: 0; background: none; box-shadow: none; font: inherit; font-size: 12.5px; color: #8a857e; text-decoration: underline; text-underline-offset: 0.3em; cursor: pointer; }
.pe .pe-del-link:hover { color: var(--bad, #a33); }
.pe .pe-del-link:focus-visible { outline: 2px solid #1d1c1a; outline-offset: 2px; }
@media (min-width: 768px) {
  .sh-editor { --sg: 32px; }
  .sh-editor .sh-pdp-info { top: 16px; }
  .pe input.sh-pdp-title { font-size: clamp(26px, 2.1vw, 34px); }
  .pe-dlg { align-items: center; justify-items: center; padding: 32px; }
  .pe-dlg-panel { width: min(520px, 100%); border-radius: 18px; }
}