@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Regular.subset.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap }
:root {
--bg: #FFFFFF; --bg-soft: #F5F7F3; --grey: #F4F5F3; --tint: #EDF5EF; --tint-2: #DCEBDF;
--ink: #17211B; --ink-2: #434D46; --ink-3: #59645C;
--line: #E1E6E0; --line-2: #C8D1C9; --field: #7A867D;
--green: #1E5C38; --green-strong: #154529; --fresh: #3E9A60; --fresh-text: #237447;
--danger: #B42323; --danger-tint: #FCEEEE; --warn-tint: #FFF6DD;
--radius-sm: 10px; --radius: 12px; --radius-lg: 16px;
--font-body: 21px; --font-lead: 22px; --font-h3: 24px; --font-name: 23px; --font-price: 27px; --font-h2: 30px; --font-title: 32px; --font-hero: 46px;
--space-unit: 8px; --btn-h: 60px; --control-h: 56px; --gutter: 24px; --max: 1050px; --header-h: 76px;
}
*,*::before,*::after { box-sizing: border-box }
[hidden] { display: none !important }
html { color-scheme: light; background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px) }
body { margin: 0; min-width: 0; background: var(--bg); color: var(--ink); font: 400 var(--font-body)/1.65 "Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif; letter-spacing: -0.01em; font-synthesis: weight; word-break: keep-all; overflow-wrap: anywhere }
h1,h2,h3,p,ul,ol,dl,dd,figure { margin: 0 }
ul,ol { padding: 0; list-style: none }
img,svg { display: block; max-width: 100%; height: auto }
a { color: var(--green); text-underline-offset: 4px }
button,input,select,textarea { font: inherit; color: inherit; letter-spacing: inherit }
button,a,input,select,summary,label { touch-action: manipulation }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.wrap { width: min(100%,calc(var(--max) + 2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter); min-width: 0 }
.skip-link { position: absolute; left: 8px; top: -120px; z-index: 30; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--bg); color: var(--ink) }
.skip-link:focus { top: 8px }
.review-banner { padding: 10px var(--gutter); background: var(--warn-tint); color: var(--ink); text-align: center; font-weight: 600; line-height: 1.5 }
.site-header { z-index: 20; border-bottom: 1px solid var(--line); background: var(--bg) }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 40px; min-height: var(--header-h) }
.brand { display: inline-flex; align-items: center; min-height: 56px; color: var(--green); font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -0.05em; text-decoration: none }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 32px }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--header-h); color: var(--ink-2); font-size: var(--font-lead); font-weight: 600; text-decoration: none }
.site-nav a:hover { color: var(--green) }
.site-nav a[aria-current="page"] { color: var(--green); box-shadow: inset 0 -4px 0 var(--green) }
@media (min-height: 521px) { .site-header { position: sticky; top: 0; box-shadow: 0 3px 4px rgba(0,0,0,0.07) } }
.site-footer { padding-block: 48px 64px; background: var(--grey); color: var(--ink-2); border-top: 1px solid var(--line) }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2) }
.footer-brand { color: var(--green); font-size: 28px; font-weight: 700; letter-spacing: -0.05em }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 24px }
.footer-nav a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink); font-weight: 600; text-decoration: none }
.footer-nav a:hover { color: var(--green); text-decoration: underline }
.footer-title { margin: 20px 0 8px; color: var(--ink); font-size: var(--font-body); font-weight: 600 }
.biz { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-bottom: 12px }
.biz div { display: flex; flex-wrap: wrap; gap: 0 10px; min-width: 0 }
.biz dt { color: var(--ink-3) }
.biz dd { min-width: 0; color: var(--ink) }
.eyebrow { color: var(--fresh-text); font-weight: 600 }
.page-title { font-size: var(--font-title); font-weight: 700; line-height: 1.3; letter-spacing: -0.03em }
.page-lede,.lede { color: var(--ink-2); font-size: var(--font-lead); line-height: 1.6 }
.fine { color: var(--ink-3) }
.center { text-align: center }
.text-link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600 }
.tags { display: flex; flex-wrap: wrap; gap: 8px }
.tags li { padding: 2px 14px; border-radius: 999px; background: var(--tint); color: var(--green); font-weight: 600 }
.checks { display: grid; gap: 12px }
.checks li { position: relative; padding-left: 36px }
.checks li::before { content: ""; position: absolute; left: 4px; top: 0.42em; width: 16px; height: 9px; border-left: 3px solid var(--fresh); border-bottom: 3px solid var(--fresh); transform: rotate(-45deg) }
.notice { padding: 16px 20px; border-radius: var(--radius); background: var(--tint); color: var(--ink-2) }
.notice.is-warning { background: var(--danger-tint); color: var(--danger); font-weight: 600 }
.badge { display: inline-block; padding: 4px 16px; border-radius: 999px; background: var(--tint); color: var(--green); font-weight: 600 }
.fold { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 0; font-weight: 600; cursor: pointer; list-style: none }
.fold > summary::-webkit-details-marker,.faq summary::-webkit-details-marker { display: none }
.fold > summary::after,.faq summary::after { content: ""; flex: none; width: 11px; height: 11px; margin-right: 6px; border-right: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(45deg) }
.fold[open] > summary::after,.faq details[open] summary::after { transform: rotate(-135deg) }
.fold > :not(summary) { margin-bottom: 20px }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 12px 28px; border: 1.5px solid transparent; border-radius: var(--radius); font-size: var(--font-lead); font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer }
.btn-primary { background: var(--green); color: #fff }
.btn-primary:hover { background: var(--green-strong) }
.btn-primary:disabled { background: var(--line-2); color: var(--ink); cursor: progress }
.btn-secondary { border-color: var(--green); background: var(--bg); color: var(--green) }
.btn-secondary:hover { background: var(--tint) }
.btn-block { width: 100% }
.btn-small { min-height: 56px; padding: 8px 20px; font-size: var(--font-body) }
.hero { position: relative; border-bottom: 1px solid var(--line) }
.hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain }
.hero-track::-webkit-scrollbar { display: none }
.hero-slide { position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0,1fr); background: var(--tint); scroll-margin-top: calc(var(--header-h) + 8px) }
.hero-slide.is-soft { background: var(--bg-soft) }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50% }
.hero-copy { display: grid; align-content: center; justify-items: start; gap: 14px; min-width: 0 }
.hero-title { font-size: var(--font-hero); font-weight: 700; line-height: 1.2; letter-spacing: -0.04em }
.hero-line { color: var(--ink-2); font-size: var(--font-lead) }
.hero-copy .btn { margin-top: 10px }
.hero-nav { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); color: var(--ink) }
.hero-nav a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 18px; color: var(--ink); font-weight: 600; text-decoration: none }
.hero-nav a:hover { color: var(--green); text-decoration: underline }
.hero-nav a:focus-visible { outline-offset: -4px }
.hero-count { padding: 0 6px; font-variant-numeric: tabular-nums }
.section { padding-block: 64px }
.section + .section { border-top: 8px solid var(--grey) }
.section-tight,.section + .section-tight { padding-block: 0 56px; border-top: 0 }
.sec-head { display: grid; justify-items: center; gap: 6px; margin-bottom: 32px; text-align: center }
.sec-head h2 { font-size: var(--font-h2); font-weight: 700; line-height: 1.3; letter-spacing: -0.03em }
.sec-head p { color: var(--ink-3) }
.goods { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px }
.size-card { display: grid; gap: 4px; height: 100%; color: var(--ink); text-decoration: none }
.goods-art { position: relative; display: block; aspect-ratio: 1 / 1; margin-bottom: 12px; border-radius: var(--radius-lg); background: var(--tint); overflow: hidden }
.goods-name { font-size: var(--font-name); line-height: 1.4 }
.goods-price { font-size: var(--font-price); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums }
.goods-unit { color: var(--ink-3) }
.goods-cta { display: flex; align-items: center; justify-content: center; min-height: var(--btn-h); margin-top: 12px; border: 1.5px solid var(--green); border-radius: var(--radius); color: var(--green); font-size: var(--font-lead); font-weight: 600 }
.size-card:hover .goods-cta { background: var(--green); color: #fff }
.size-card:hover .goods-name { text-decoration: underline }
.strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-radius: var(--radius-lg); background: var(--grey) }
.strip li { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 112px; padding: 12px 16px; font-size: var(--font-lead); font-weight: 600; text-align: center }
.strip li + li { border-left: 1px solid var(--line-2) }
.strip svg { flex: none; width: 40px; height: 40px; color: var(--green) }
.photo-banner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg) }
.photo-banner img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover }
.photo-copy { display: grid; align-content: center; justify-items: start; gap: 12px; padding: 40px; background: var(--tint) }
.photo-copy h2 { font-size: var(--font-h2); font-weight: 700; line-height: 1.3; letter-spacing: -0.03em }
.photo-copy p { color: var(--ink-2) }
.photo-copy .btn { margin-top: 8px }
.faq { max-width: 860px; margin-inline: auto; border-top: 2px solid var(--ink) }
.detail .faq { max-width: none; margin-inline: 0 }
.detail .faq summary { padding-inline: 0 4px }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 12px 4px; font-size: var(--font-lead); font-weight: 600; cursor: pointer; list-style: none }
.faq details p { padding: 0 4px 20px; color: var(--ink-2) }
.faq-more { margin-top: 20px; text-align: center }
.field { display: grid; gap: 8px; min-width: 0 }
.field + .field,.choice-set + .field,.field + .choice-set { margin-top: 24px }
.field-label { display: block; color: var(--ink); font-size: var(--font-lead); font-weight: 600 }
.field-hint { color: var(--ink-3) }
.field-error { color: var(--danger); font-weight: 600 }
.field-error::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 2px 2px; border-radius: 50%; background: currentColor }
.input { display: block; width: 100%; min-height: var(--control-h); padding: 12px 16px; border: 1px solid var(--field); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink) }
.input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-color: var(--green) }
.has-error .input { border: 2px solid var(--danger); padding: 11px 15px }
.select { appearance: none; padding-right: 48px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%231E5C38' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center }
.choice-set { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 10px }
.choice-set legend { padding: 0; margin-bottom: 10px }
.error-summary { display: grid; gap: 8px; margin-bottom: 24px; padding: 20px 24px; border: 2px solid var(--danger); border-radius: var(--radius); background: var(--danger-tint) }
.error-summary-title { color: var(--danger); font-size: var(--font-lead); font-weight: 600 }
.error-summary ul { display: grid; gap: 4px; padding-left: 4px }
.error-summary a { color: var(--danger); font-weight: 600 }
.radio-list { display: grid; gap: 8px }
.radio,.check { display: flex; align-items: flex-start; gap: 14px; cursor: pointer }
.radio { min-height: 60px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--radius) }
.radio:has(input:checked) { border: 2px solid var(--green); padding: 13px 15px; background: var(--tint) }
.radio input,.check input { flex: 0 0 24px; width: 24px; height: 24px; margin: 5px 0 0; accent-color: var(--green) }
.check input { flex-basis: 28px; width: 28px; height: 28px; margin-top: 3px }
.consent { display: grid; gap: 8px; padding: 16px; border-radius: var(--radius); background: var(--bg-soft) }
.consent.has-error { background: var(--danger-tint); outline: 2px solid var(--danger) }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; width: min(100%,calc(var(--max) + 2 * var(--gutter))); margin: 0 auto; padding: 16px var(--gutter) 4px; color: var(--ink-3) }
.crumbs a { color: var(--ink-3) }
.pdp { padding-bottom: 72px }
.pdp-grid { width: min(100%,calc(var(--max) + 2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter) }
.gallery { overflow: hidden; border-radius: var(--radius-lg); background: var(--tint) }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover }
.buy { display: flex; flex-direction: column; gap: 28px; min-width: 0 }
.buy-head { display: grid; gap: 8px }
.buy-title { font-size: var(--font-title); font-weight: 700; line-height: 1.3; letter-spacing: -0.03em }
.buy-sub { color: var(--ink-3) }
.buy-price { margin-top: 8px }
.buy-price strong { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums }
.buy-info { display: grid; margin-top: 12px; border-top: 1px solid var(--line) }
.buy-info div { display: grid; grid-template-columns: 6em minmax(0,1fr); gap: 0 16px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.buy-info dt { color: var(--ink-3) }
.qty { display: grid; gap: 10px }
.qty-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px }
.stepper-btn:hover:enabled { background: var(--tint) }
.stepper-btn:focus-visible { outline-offset: 3px }
.d-full { color: var(--danger) }
.buy-cta { display: grid; gap: 12px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg) }
.buy-pick { display: grid; gap: 6px; padding: 16px 20px; border-radius: var(--radius); background: var(--bg-soft) }
.buy-pick div { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 16px }
.buy-pick dt { color: var(--ink-3) }
.buy-amount { display: grid; gap: 4px; min-width: 0 }
.buy-ship { font-size: var(--font-buy-meta); font-weight: 600; line-height: 1.4 }
.buy-total { display: grid; line-height: 1.3 }
.buy .buy-total .buy-label { font-size: var(--font-buy-meta); font-weight: 600; color: var(--ink-3) }
.buy-total strong { font-size: var(--font-price); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums }
.buy-cta .btn { font-size: var(--font-name); padding-inline: 12px }
.pdp-info { min-width: 0 }
.detail-tabs { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100px,100%),1fr)); margin-top: 48px; border: 1px solid var(--line); background: var(--grey) }
.detail-tabs a { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 4px 6px; border-left: 1px solid var(--line); color: var(--ink-2); font-weight: 600; text-align: center; text-decoration: none }
.detail-tabs a:first-child { border-left: 0 }
.detail-tabs a:hover { background: var(--bg); color: var(--green); box-shadow: inset 0 -4px 0 var(--green) }
.detail { display: grid; gap: 18px; padding-block: 48px 8px; scroll-margin-top: calc(var(--header-h) + 72px) }
.detail + .detail { border-top: 1px solid var(--line); margin-top: 40px }
.detail h2 { font-size: var(--font-h2); font-weight: 700; line-height: 1.3; letter-spacing: -0.03em }
.facts-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 32px }
.facts-grid div { padding: 14px 0; border-top: 1px solid var(--line); min-width: 0 }
.facts-grid dt { color: var(--ink-3) }
.info-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left }
.info-table th,.info-table td { padding: 14px 0; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere }
.info-table th { width: 34%; padding-right: 16px; color: var(--ink-3); font-weight: 400 }
.checkout,.result,.legal { width: min(100%,calc(var(--max) + 2 * var(--gutter))); margin-inline: auto; padding: 32px var(--gutter) 80px }
.page-head { display: grid; gap: 12px; padding-bottom: 24px }
.steps { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 8px; color: var(--ink-3) }
.steps li { display: inline-flex; align-items: center; gap: 8px }
.steps-no { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 18px; line-height: 1 }
.steps .is-done { color: var(--green) }
.steps .is-done .steps-no { border-color: var(--fresh); background: var(--tint) }
.steps .is-current { color: var(--ink); font-weight: 600 }
.steps .is-current .steps-no { border-color: var(--green); background: var(--green); color: #fff }
.panel { display: grid; gap: 20px; align-content: start; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg) }
.panel h2 { font-size: var(--font-h3); font-weight: 700; letter-spacing: -0.03em }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px }
.co-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px }
.co-main { display: grid; gap: 16px; min-width: 0 }
.co-product { display: flex; align-items: center; gap: 16px }
.co-name { font-size: var(--font-lead); font-weight: 600 }
.thumb { display: inline-flex; flex: none; align-items: baseline; justify-content: center; width: 80px; height: 80px; padding-top: 16px; border-radius: var(--radius); background: var(--tint); color: var(--green); font-size: 18px }
.thumb b { font-size: 30px; font-weight: 700; letter-spacing: -0.04em }
.rows { display: grid }
.rows .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 10px 0; border-top: 1px solid var(--line) }
.rows .row:first-child { border-top: 0 }
.rows dt { color: var(--ink-3) }
.rows dd { min-width: 0; text-align: right }
.rows .is-total { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line-2) }
.rows .is-total dt { color: var(--ink); font-weight: 600 }
.rows .is-total dd { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums }
.memo-custom { margin-top: 16px }
.address-picked { padding: 14px 16px; border-radius: var(--radius); background: var(--tint) }
.address-picked b { color: var(--green); margin-right: 6px }
.postcode { min-height: 420px; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden }
.pay-widget:empty { display: none }
.result { max-width: 784px; display: grid; grid-template-columns: minmax(0,1fr); gap: 20px }
.result-head { display: grid; justify-items: center; gap: 10px; padding: 24px 0 12px; text-align: center }
.result-mark { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--tint); color: var(--green) }
.result-mark .icon { width: 36px; height: 36px }
.va { border-color: var(--green) }
.va-account { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 28px; letter-spacing: -0.02em; user-select: all }
.va-account b { font-weight: 700 }
.va-due { font-weight: 600 }
.actions { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); gap: 12px }
.actions form { display: grid }
.inline-form { display: grid; gap: 12px }
.legal { max-width: 832px; display: grid; grid-template-columns: minmax(0,1fr); gap: 16px }
.legal h1 { font-size: var(--font-title); font-weight: 700; letter-spacing: -0.03em; line-height: 1.3 }
.legal article { display: grid; gap: 10px; padding-top: 28px; margin-top: 12px; border-top: 1px solid var(--line) }
.legal h2 { font-size: var(--font-h3); font-weight: 700; letter-spacing: -0.03em }
.gallery-page { display: grid; gap: 32px; padding-block: 40px }
.ui-sample { max-width: 480px }
@media (min-width: 720px) {
.hero-slide { grid-template-columns: minmax(0,5fr) minmax(0,7fr); height: 440px }
.hero-copy { padding: 48px 40px 96px max(var(--gutter),calc(50vw - var(--max) / 2)) }
.hero-nav { position: absolute; right: max(var(--gutter),calc(50vw - var(--max) / 2)); bottom: 24px }
}
@media (min-width: 960px) {
.pdp-grid { display: grid; grid-template-columns: minmax(0,1fr) 460px; grid-template-areas: "media buy" "info buy"; align-items: start; column-gap: 48px }
.pdp-media { grid-area: media; padding-top: 12px }
.pdp-info { grid-area: info }
.pdp-buy { grid-area: buy; align-self: stretch; display: flex; flex-direction: column; padding-top: 12px }
.pdp-buy .buy { flex: 1 }
.buy-cta { position: sticky; bottom: 16px; z-index: 2; margin-top: auto; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); align-items: center; box-shadow: 0 8px 20px -14px rgba(23,33,27,0.3) }
.detail-tabs { position: sticky; top: var(--header-h); z-index: 3 }
.co-grid { grid-template-columns: minmax(0,1fr) 420px; grid-template-rows: auto 1fr; align-items: start; column-gap: 32px }
.co-summary { grid-column: 2; grid-row: 1 }
.co-main { grid-column: 1; grid-row: 1 / span 2 }
.co-pay { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--header-h) + 16px) }
.pay .co-main,.pay .co-pay { grid-row: 1 }
}
@media (max-width: 959px) {
.pdp-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 28px }
.pdp-media,.pdp-buy,.pdp-info { min-width: 0 }
.gallery img { aspect-ratio: 4 / 3 }
.detail-tabs { margin-top: 24px }
.buy-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; grid-template-columns: minmax(0,1fr) minmax(104px,.6fr); align-items: center; padding: 12px var(--gutter) max(12px,env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: 0 -4px 12px -8px rgba(23,33,27,0.25) }
.pdp ~ .site-footer { padding-bottom: 160px }
}
@media (max-width: 959px) and (max-height: 520px) {
.buy-cta { position: static; border-radius: var(--radius-lg); border: 1px solid var(--line) }
.pdp ~ .site-footer { padding-bottom: 64px }
}
@media (max-width: 719px) {
:root { --gutter: 20px; --font-h2: 28px; --font-title: 30px; --font-hero: 32px; --header-h: 64px }
.header-inner { gap: 0 24px }
.brand { font-size: 30px }
.site-nav { gap: 0 20px }
.site-nav a { font-size: var(--font-body) }
.hero-img { order: -1; height: auto; aspect-ratio: 16 / 9 }
.hero-copy { padding: 24px var(--gutter) 16px; gap: 10px }
.hero-nav { justify-self: start; margin: 0 var(--gutter) 24px }
.section { padding-block: 48px }
.sec-head { margin-bottom: 24px }
.goods { grid-template-columns: minmax(0,1fr); gap: 16px }
.size-card { grid-template-columns: 120px minmax(0,1fr); column-gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line) }
.goods-art { grid-row: span 3; margin: 0 }
.goods-cta { grid-column: 1 / -1 }
.strip,.photo-banner,.facts-grid { grid-template-columns: minmax(0,1fr) }
.strip li { justify-content: flex-start; min-height: 72px; padding-inline: 20px; text-align: left }
.strip li + li { border-left: 0; border-top: 1px solid var(--line-2) }
.section-tight,.section + .section-tight { padding-bottom: 40px }
.photo-copy { padding: 24px 20px 28px }
.biz { display: grid; gap: 4px }
.panel { padding: 22px 20px }
.rows dd { text-align: left }
}
@media (max-width: 519px) {
.buy-cta { grid-template-columns: minmax(0,1fr) 104px }
.buy-cta .btn { font-size: var(--font-body); padding-inline: 8px }
.steps li:not(.is-current) .steps-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.steps { gap: 6px 12px }
.hero-copy .btn,.photo-copy .btn { align-self: stretch; justify-self: stretch }
}
@media (max-width: 359px) {
:root { --gutter: 14px }
.buy-cta { grid-template-columns: minmax(0,1fr) }
.size-card { grid-template-columns: minmax(0,1fr) }
.goods-art { grid-row: auto; max-width: 200px }
.panel,.error-summary,.buy-pick,.consent { padding-inline: 14px }
.buy-pick div,.buy-info div { grid-template-columns: minmax(0,1fr); gap: 0 }
.hero-nav a { padding: 0 12px }
}
@media (prefers-reduced-motion: no-preference) {
.hero-track { scroll-behavior: smooth }
.btn,.line,.stepper-btn,.goods-cta,.radio { transition: background-color 120ms ease-out,border-color 120ms ease-out,color 120ms ease-out }
}
.goods-art img { width: 100%; height: 100%; object-fit: cover; display: block }
.goods-badge { position: absolute; left: 12px; top: 12px; padding: 6px 14px; border-radius: 999px; background: var(--green); color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -0.02em }
:root { --font-buy-label: 26px; --font-qty: 26px; --qty-minus: #B42323; --qty-minus-hover: #941D1D; --qty-plus: #1B64DA; --qty-plus-hover: #1551B3; --font-buy-meta: 18px }
.buy .buy-label { font-size: var(--font-buy-label); font-weight: 700; color: var(--ink) }
.buy legend.buy-label { margin-bottom: 12px }
.buy .qty-head { margin-bottom: 12px }
.buy .stepper { display: grid; gap: 8px; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr) }
.buy .stepper-btn { padding: 4px; cursor: pointer; border-radius: var(--radius-sm); min-height: 64px; font-weight: 700 }
.buy .stepper-minus { background: var(--qty-minus); color: var(--bg); border: 2px solid var(--qty-minus) }
.buy .stepper-minus:hover:enabled,.buy .stepper-minus:active:enabled { background: var(--qty-minus-hover) }
.buy .stepper-plus { background: var(--qty-plus); color: var(--bg); border: 2px solid var(--qty-plus) }
.buy .stepper-plus:hover:enabled,.buy .stepper-plus:active:enabled { background: var(--qty-plus-hover) }
.buy .stepper-btn:disabled { cursor: not-allowed; background: var(--grey); color: var(--ink-3); border-color: var(--line-2) }
.buy .stepper-value { display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; font-size: var(--font-qty); font-weight: 700; border: 2px solid var(--field); border-radius: var(--radius-sm); background: var(--bg); min-height: 64px; line-height: 1.2 }
.ship-open { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 64px; padding: 12px 16px; border: 2px solid var(--green); border-radius: var(--radius); background: var(--bg); color: var(--green); font-size: var(--font-lead); font-weight: 700; text-align: center; cursor: pointer }
.ship-open:hover,.has-date .ship-open { background: var(--tint) }
.ship-direct > summary { cursor: pointer; min-height: 64px; padding: 14px 16px; border: 2px solid var(--green); border-radius: var(--radius); color: var(--green); font-size: var(--font-lead); font-weight: 700 }
.ship-fallback { margin-top: 12px }
.ship-dialog { width: min(560px,calc(100% - 16px)); max-height: calc(100dvh - 32px); padding: 24px; border: 2px solid var(--field); border-radius: var(--radius-lg); background: var(--bg); color: var(--ink); overflow-y: auto }
.ship-dialog::backdrop { background: rgba(23,33,27,.3) }
.ship-top,.ship-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px }
.ship-top h2,.ship-month-title { font-size: var(--font-buy-label); font-weight: 700 }
.ship-nav { margin-top: 16px }
.ship-nav .btn { padding: 8px 12px }
.ship-month-title { text-align: center; margin-bottom: 16px }
.ship-week,.ship-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; text-align: center }
.ship-week { color: var(--ink-3); margin-bottom: 8px }
.ship-day { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 64px; padding: 4px 0; border: 2px solid var(--green); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: var(--font-lead); font-weight: 700; line-height: 1.2; cursor: pointer }
.ship-day[aria-pressed="true"] { background: var(--green); color: var(--bg) }
.ship-day:disabled { border: 1px solid var(--line); background: var(--grey); color: var(--ink-3); font-weight: 400; cursor: not-allowed }
.ship-mark { color: var(--danger); font-size: var(--font-buy-meta); font-weight: 600 }
.ship-mark:empty { display: none }
@media (min-width: 960px) { .ship-dialog { margin-right: max(16px,calc((100vw - var(--max)) / 2)) } }
@media (max-width: 519px) { .ship-dialog { padding: 12px } .ship-grid,.ship-week { gap: 2px } }
@media (max-width: 359px) { .buy .stepper { grid-template-columns: minmax(0,1fr) } }
@media (max-width: 240px) { .ship-grid { grid-template-columns: repeat(2,minmax(0,1fr)) } .ship-week,.ship-grid > span { display: none } }
.ship-nav .btn:disabled { background: var(--grey); color: var(--ink-3); border-color: var(--line-2); cursor: not-allowed }
@media (max-width: 959px) {
.buy-cta { grid-template-columns: minmax(0,1fr) 112px; grid-template-rows: auto auto; column-gap: 12px; row-gap: 10px; padding: 16px var(--gutter) max(16px,env(safe-area-inset-bottom)) }
.buy-cta .buy-amount { display: contents }
.buy-cta .buy-ship,.buy-cta .buy-lines { grid-column: 1 / -1; margin: 0; font-size: 20px; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.buy-cta .buy-total { display: flex; align-items: baseline; gap: 8px; margin: 0; min-width: 0; white-space: nowrap }
.buy .buy-cta .buy-total .buy-label { font-size: 20px }
.buy-cta .buy-total strong { font-size: 25px; overflow: hidden; text-overflow: ellipsis }
.buy-cta .btn { min-height: var(--btn-h); font-size: 21px }
.pdp ~ .site-footer { padding-bottom: 180px }
}
.is-prompt,.buy-cta .buy-ship.is-prompt,.buy-cta .buy-lines.is-prompt,.buy-total strong.is-prompt { color: var(--danger) }
.pick-alert { max-width: min(92vw,420px); padding: 28px 24px 24px; border: 0; border-radius: var(--radius-lg); text-align: center }
.pick-alert::backdrop { background: rgba(17,24,20,0.45) }
.pick-alert-msg { margin: 0 0 20px; color: var(--danger); font-size: 24px; font-weight: 700 }
.pick-alert .btn { width: 100% }
#date-set .field-hint { margin-top: 8px }

.field-error:empty{display:none}
.lines { gap: 12px }
.line { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg) }
.line.is-on { padding: 13px 15px; border: 2px solid var(--green); background: var(--tint) }
.line-name { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; font-size: var(--font-name) }
.line-name b { font-size: var(--font-buy-label) }
.buy .line .stepper-value { gap: 4px }
.buy .line .stepper-value:focus-within { outline: 3px solid var(--green); outline-offset: 2px }
.line-qty { width: 2.6ch; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: right; -moz-appearance: textfield; appearance: textfield }
.line-qty:focus { outline: 0 }
.line-qty::-webkit-inner-spin-button,.line-qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
.buy-lines { font-size: 20px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere }