@font-face { font-family: Pretendard; src: url('/assets/pretendard.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Do Hyeon'; src: url('/assets/dohyeon.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
:root {
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text: #191D27;
  --color-muted: #595B61;
  --color-action: #30352F;
  --color-border: #888B86;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --radius-control: 8px; --radius-media: 12px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding-bottom: calc(var(--space-20) + var(--space-8)); background: var(--color-background); color: var(--color-text); font-family: Pretendard; font-size: 18px; font-weight: 400; line-height: 1.6; text-align: start; }
body, input, textarea, select, button { font-family: Pretendard; }
body:not(.font-ready) #app { visibility: hidden; }
a { color: inherit; text-underline-offset: var(--space-1); }
button, input, textarea, select { font-size: 16px; line-height: 1.5; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled, input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; opacity: 1; }
:focus-visible { outline: 2px solid var(--color-action); outline-offset: var(--space-1); }
h1[tabindex="-1"]:focus { outline: none; }
h1, h2, p, figure, dl, dd { margin: 0; }
h1 { font-size: 36px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; overflow-wrap: anywhere; }
h2 { font-size: 24px; font-weight: 600; line-height: 1.4; }
main { padding: var(--space-8) 6vw var(--space-20); }
.site-header { padding: var(--space-6) 6vw; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.wordmark { font-size: 24px; font-weight: 700; text-decoration: none; }
.site-header nav { display: flex; align-items: center; gap: var(--space-6); font-size: 16px; font-weight: 600; }
.site-header nav a { padding-block: var(--space-2); }
.product-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 8vw; }
.product-media { min-width: 0; }
.product-media img { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 1440; object-fit: contain; border-radius: var(--radius-media); }
.product-media figcaption { padding-top: var(--space-3); color: var(--color-muted); font-size: 16px; font-weight: 500; line-height: 1.5; }
.product-copy { padding-block: var(--space-12); display: flex; flex-direction: column; gap: var(--space-8); align-items: stretch; }
.eyebrow { font-size: 16px; font-weight: 600; color: var(--color-muted); }
.price { font-size: 36px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.muted { color: var(--color-muted); font-size: 18px; font-weight: 400; }
.product-description { font-size: 18px; line-height: 1.8; }
.product-notes { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-2); }
.product-notes div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); }
.product-notes dt { font-weight: 600; }
.product-notes dd { color: var(--color-muted); overflow-wrap: anywhere; }
.button { min-height: 52px; padding: var(--space-3) var(--space-6); border: 1px solid var(--color-action); border-radius: var(--radius-control); display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); font-size: 16px; font-weight: 700; line-height: 1.5; text-align: center; text-decoration: none; }
.primary { background: var(--color-action); color: var(--color-surface); }
.secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.button:disabled { background: var(--color-background); color: var(--color-muted); border-color: var(--color-border); }
@media (hover: hover) { .primary:hover { background: var(--color-text); } .secondary:hover { background: var(--color-background); border-color: var(--color-action); } }
.stack { display: flex; flex-direction: column; }
.gap-8 { gap: var(--space-2); } .gap-12 { gap: var(--space-3); } .gap-16 { gap: var(--space-4); }
.gap-20 { gap: var(--space-5); } .gap-24 { gap: var(--space-6); } .gap-32 { gap: var(--space-8); }
.content-page { width: 100%; padding-inline: 16vw; display: flex; flex-direction: column; gap: var(--space-8); }
.operator-page { display: flex; flex-direction: column; gap: var(--space-8); }
.back-link { width: fit-content; font-size: 16px; font-weight: 600; padding-block: var(--space-2); }
.page-intro { display: flex; flex-direction: column; gap: var(--space-3); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field label { font-size: 16px; font-weight: 600; }
input, textarea, select { width: 100%; min-width: 0; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); font-weight: 500; min-height: 52px; }
textarea { resize: vertical; min-height: 124px; }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; font-weight: 500; }
.field-help { font-size: 16px; line-height: 1.5; color: var(--color-muted); font-weight: 500; }
.full { grid-column: 1 / -1; }
.form-end { display: flex; flex-direction: column; gap: var(--space-6); }
.lookup-form { display: flex; align-items: end; gap: var(--space-4); }
.lookup-form .field { flex: 1; }
.lookup-form .button { flex-shrink: 0; }
.empty-state { padding-block: var(--space-8); display: flex; flex-direction: column; align-items: start; gap: var(--space-6); }
.operator-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 8vw; }
.operator-controls { min-width: 0; padding: var(--space-8); background: var(--color-surface); border-radius: var(--radius-media); }
.order-summary { display: flex; flex-direction: column; gap: var(--space-6); }
.summary-heading { display: flex; flex-direction: column; gap: var(--space-2); }
.order-number { color: var(--color-muted); font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.summary-price { font-size: 32px; line-height: 1.3; font-weight: 600; }
.summary-list { display: flex; flex-direction: column; gap: var(--space-5); }
.summary-list div { display: flex; flex-direction: column; gap: var(--space-1); }
.summary-list dt { font-size: 16px; font-weight: 600; color: var(--color-muted); }
.summary-list dd { white-space: pre-wrap; overflow-wrap: anywhere; }
.action-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.text-link { width: fit-content; min-height: 44px; display: inline-flex; align-items: center; font-size: 16px; font-weight: 600; }
pre { margin: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-control); font: 500 16px/1.7 Pretendard; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; }
.feedback, .connection-notice, .font-error { margin-inline: 6vw; margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-control); font-size: 16px; font-weight: 500; }
.connection-notice { border-color: var(--color-action); }
.site-footer { padding: var(--space-8) 6vw; display: flex; justify-content: space-between; gap: var(--space-6); color: var(--color-muted); font-size: 16px; font-weight: 500; }
.site-footer nav { display: flex; flex-direction: column; align-items: start; gap: var(--space-4); flex-shrink: 0; }
.business-details { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.business-details div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.business-details dd { overflow-wrap: anywhere; }
.business-details a { overflow-wrap: anywhere; }
.availability-note { color: var(--color-muted); font-size: 18px; }
#availability-note { padding-inline-end: var(--space-20); word-break: keep-all; }
#product-details-form label, #product-details-form .field-help { padding-inline-end: var(--space-20); }
#product-details-form input, #product-details-form select { padding-inline-end: var(--space-20); }
.consent-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.consent-group legend { padding: 0 0 var(--space-4); font-size: 20px; font-weight: 600; }
.check-row { display: flex; align-items: start; gap: var(--space-3); min-height: 44px; cursor: pointer; font-size: 18px; font-weight: 400; }
.check-row input { width: 24px; height: 24px; min-height: 24px; flex: 0 0 24px; margin: var(--space-1) 0 0; padding: 0; accent-color: var(--color-action); }
.check-row span { min-width: 0; overflow-wrap: anywhere; }
.session-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.inbox-rows { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-control); overflow: hidden; }
.inbox-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-5) var(--space-6); border: 0; border-top: 1px solid transparent; background: var(--color-surface); color: var(--color-text); text-align: start; font-size: 16px; font-weight: 500; line-height: 1.5; min-height: 52px; }
.inbox-row + .inbox-row { border-top-color: var(--color-border); }
.inbox-row > span { min-width: 0; overflow-wrap: anywhere; }
.inbox-id, .inbox-status { font-weight: 600; }
.inbox-status { word-break: keep-all; min-height: 3em; align-content: center; }
.inbox-open { text-decoration: underline; text-underline-offset: var(--space-1); font-weight: 600; }
.policy-body { display: flex; flex-direction: column; gap: var(--space-6); white-space: pre-wrap; overflow-wrap: anywhere; }
.policy-body dl { display: flex; flex-direction: column; gap: var(--space-5); }
.policy-body dt { font-weight: 600; }
.policy-body dd { margin-top: var(--space-1); }
details > summary { cursor: pointer; font-weight: 600; }
details[open] { display: flex; gap: var(--space-4); }
details > p, details > button { margin-top: var(--space-4); }
.consultation { position: fixed; inset-inline-end: var(--space-6); bottom: var(--space-6); max-width: calc(100vw - var(--space-10)); z-index: 2; }
.consultation .button { max-width: 100%; }
.consultation-icon { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.checkout-header { display: flex; align-items: center; gap: var(--space-4); }
.checkout-header h1 { flex: 1; text-align: center; font-size: 24px; }
.checkout-header .back-link { margin: 0; font-size: 28px; text-decoration: none; }
.checkout-header .back-link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.back-chevron { width: 24px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: miter; stroke-miterlimit: 12; stroke-linecap: butt; }
.checkout-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.quantity-control { display: flex; align-items: stretch; border: 1px solid var(--color-border); border-radius: var(--radius-control); overflow: hidden; }
.quantity-control button, .quantity-control output { display: grid; place-items: center; min-width: 44px; min-height: 44px; background: var(--color-surface); color: var(--color-text); border: 0; }
.quantity-control output { border-inline: 1px solid var(--color-border); }
.checkout-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.checkout-section { padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-border); }
.checkout-product { display: flex; align-items: center; gap: var(--space-4); }
.checkout-thumbnail { display: block; flex: 0 0 var(--space-20); width: var(--space-20); height: var(--space-20); object-fit: contain; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.checkout-total { font-weight: 700; padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.checkout-page .summary-list div, #quantity-panel .summary-list div { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.checkout-page .summary-list dt, #quantity-panel .summary-list dt { color: var(--color-text); font-size: inherit; font-weight: inherit; }
.checkout-page .summary-list dd, #quantity-panel .summary-list dd { text-align: end; }
.checkout-page { padding-bottom: var(--space-20); }
.checkout-pay, #address-save-button { position: sticky; bottom: var(--space-4); width: 100%; z-index: 2; }
.checkout-policies { font-size: 16px; }
.checkout-policies a { align-self: start; }
.entry-options { min-inline-size: 0; padding: 0; margin: 0; border: 0; }
.entry-options legend { padding: 0; margin-bottom: var(--space-6); font-size: 18px; }
#entry-password-note { padding: var(--space-4); background: var(--color-background); border-radius: var(--radius-control); }
#cart-button { align-self: start; color: var(--color-text); background: transparent; border: 0; }
body[data-route="order"] .site-footer, body[data-route="address"] .site-footer { display: none; }
.consultation[data-available="false"] { position: static; display: flex; justify-content: end; padding-inline: 6vw; }
@media (min-width: 1800px) { h1, .price { font-size: 44px; } .product-copy { gap: var(--space-10); } }
@media (max-width: 760px) {
  .site-header { padding: var(--space-5) var(--space-5); }
  .site-header nav { gap: var(--space-4); font-size: 14px; font-weight: 700; }
  main { padding: var(--space-3) var(--space-5) var(--space-12); }
  .product-layout, .operator-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .product-copy { padding: 0; gap: var(--space-6); }
  h1 { font-size: 28px; } .price { font-size: 32px; }
  .product-description br { display: none; }
  .content-page { padding-inline: 0; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .lookup-form { flex-direction: column; align-items: stretch; }
  .inbox-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--space-5) var(--space-4); gap: var(--space-2) var(--space-4); }
  .inbox-row > span:nth-child(2), .inbox-row > span:nth-child(3) { grid-column: 1 / -1; }
  .inbox-status { grid-column: 2; grid-row: 1; }
  .inbox-open { grid-column: 1 / -1; }
  .operator-controls { padding: var(--space-6) var(--space-4); }
  .feedback, .connection-notice, .font-error { margin-inline: var(--space-5); }
  .site-footer { padding: var(--space-6) var(--space-5); font-size: 16px; flex-direction: column; }
  .site-footer nav { flex-direction: row; flex-wrap: wrap; }
  .consultation { inset-inline-end: var(--space-5); bottom: var(--space-4); }
  .consultation[data-available="true"] .button { width: 56px; min-height: 56px; padding: 0; border-radius: 50%; }
  .consultation[data-available="true"] .button span { display: none; }
  .consultation-icon { display: block; }
  .site-footer { padding-bottom: var(--space-20); }
  .consultation[data-available="false"] { padding-inline: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

.entry-lock { width: 20px; height: 20px; vertical-align: middle; }

/* ===== 2026-11-06 redesign v1 (Claude) — product page clarity + gift rebate ===== */
:root { --color-subtle: #F6F6F4; --color-hairline: #E4E4E0; --color-gift: #FFF7D1; --color-kakao: #FEE500; --radius-card: 16px; --content-max: 1120px; }
.site-header { max-width: calc(var(--content-max) + 12vw); margin-inline: auto; border-bottom: 1px solid var(--color-hairline); }
.wordmark { font-size: 20px; letter-spacing: -.02em; }
.site-header nav a { text-decoration: none; color: var(--color-muted); }
@media (hover: hover) { .site-header nav a:hover { color: var(--color-text); } }
main { max-width: calc(var(--content-max) + 12vw); margin-inline: auto; padding-top: var(--space-10); }
.product-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-16); }
.product-media { position: sticky; top: var(--space-6); }
.product-media img { aspect-ratio: 1 / 1; border-radius: var(--radius-card); background: transparent; }
.product-media figcaption { font-size: 14px; }
.product-copy { padding-block: 0; gap: var(--space-6); }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--color-muted); letter-spacing: -.01em; }
h1 { font-size: 30px; line-height: 1.35; }
.price-block { display: flex; flex-direction: column; gap: var(--space-1); }
.price { font-size: 34px; font-weight: 700; }
.price-block .muted { font-size: 15px; }
.price-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.price-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.price-badges li { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-2); border-radius: 6px; background: #EEEDFE; color: #554FF5; font-size: 15px; font-weight: 700; line-height: 1; }
.gift-banner { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-gift); border-radius: var(--radius-card); }
.gift-icon { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--color-kakao); color: var(--color-text); }
.gift-title { font-size: 16px; font-weight: 700; line-height: 1.4; }
.gift-note { font-size: 14px; line-height: 1.5; color: var(--color-muted); }
.value-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--color-hairline); }
.value-list li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-hairline); font-size: 15px; line-height: 1.5; }
.value-list strong { font-weight: 600; }
.value-list span { color: var(--color-muted); }
.order-card { padding: var(--space-6); background: var(--color-subtle); border-radius: var(--radius-card); }
.order-card-title { font-size: 17px; font-weight: 700; }
.order-card .field label { font-size: 16px; }
.order-card .field-help { font-size: 14px; }
.order-card .form-grid { gap: var(--space-3); }
#product-details-form label, #product-details-form .field-help, #product-details-form input, #product-details-form select, #availability-note { padding-inline-end: 0; }
#product-details-form input, #product-details-form select { padding-inline-end: var(--space-4); }
#product-order-button { min-height: 56px; font-size: 17px; }
#cart-button { font-size: 14px; color: var(--color-muted); min-height: 40px; }
.site-footer { max-width: none; margin-top: var(--space-16); background: var(--color-subtle); padding: var(--space-10) max(6vw, calc((100vw - var(--content-max)) / 2)); font-size: 14px; }
.site-footer #business-name { color: var(--color-text); font-weight: 700; font-size: 15px; }
.consultation .button { min-height: 44px; padding: var(--space-2) var(--space-4); border-radius: 999px; background: var(--color-kakao); color: var(--color-text); border-color: var(--color-kakao); font-size: 15px; box-shadow: 0 4px 16px rgba(25, 29, 39, .16); }
@media (hover: hover) { .consultation .primary:hover { background: #F5DC00; } }
@media (min-width: 761px) { .consultation .consultation-icon { display: block; width: 18px; height: 18px; } }
@media (max-width: 760px) {
  main { padding-top: 0; }
  .site-header { border-bottom: 0; }
  .product-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .product-media { position: static; margin-inline: calc(var(--space-5) * -1); }
  .product-media img { border-radius: 0; }
  .product-media figcaption { padding-inline: var(--space-5); }
  h1 { font-size: 24px; } .price { font-size: 28px; }
  .value-list li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .order-card { padding: var(--space-5) var(--space-4); margin-inline: calc(var(--space-1) * -1); }
  .order-card .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consultation[data-available="true"] .button { width: 56px; min-height: 56px; }
  .site-footer { padding: var(--space-8) var(--space-5) var(--space-20); }
}
.feedback, .connection-notice, .font-error { max-width: var(--content-max); margin-inline: auto; margin-top: var(--space-4); }
@media (max-width: 760px) { .feedback, .connection-notice, .font-error { margin-inline: var(--space-5); } }
@media (max-width: 760px) {
  #product-details-form input, #product-details-form select { padding-inline-end: 72px; }
  #product-details-form .field-help, #availability-note { padding-inline-end: 72px; }
  .gift-banner { padding-inline-end: 72px; }
}

/* 2026-11-06 select chevron: native arrow hugged the border; one owned chevron inset = control padding */
select { -webkit-appearance: none; appearance: none; background-image: url('/assets/select-chevron.svg'); background-repeat: no-repeat; background-position: right var(--space-4) center; background-size: 16px 16px; padding-inline-end: calc(var(--space-4) + 16px + var(--space-3)); }
#product-details-form select { padding-inline-end: calc(var(--space-4) + 16px + var(--space-3)); }

/* 2026-11-06 header: bigger brand + value proposition, cart in top menu */
.brand-block { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.wordmark { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.brand-tagline { font-size: 15px; font-weight: 500; color: var(--color-muted); line-height: 1.4; }
.site-header { align-items: center; }
.site-header nav { gap: var(--space-5); }
.cart-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--color-text); font-size: 16px; font-weight: 600; }
.cart-count { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--color-action); color: var(--color-surface); font-size: 13px; font-weight: 700; line-height: 1; }
@media (max-width: 760px) {
  .site-header { align-items: start; gap: var(--space-3); }
  .wordmark { font-size: 24px; }
  .brand-tagline { font-size: 13px; }
  .site-header nav { gap: var(--space-3); font-size: 14px; }
  .cart-link { font-size: 14px; }
}
.site-header nav { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 760px) {
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand nav" "tag tag"; row-gap: var(--space-1); }
  .brand-block { display: contents; }
  .wordmark { grid-area: brand; align-self: center; }
  .brand-tagline { grid-area: tag; }
  .site-header nav { grid-area: nav; align-self: center; }
}

/* 2026-11-06 photo caption is a supplier notice, not product copy: lighter and smaller (#73767C on #FFFFFF = 4.55:1) */
.product-media figcaption { color: #73767C; font-size: 13px; font-weight: 400; }

/* 2026-11-06 round 3: bigger value prop, tighter cart badge, footer links in one row, official Kakao consult button */
.wordmark { font-size: 26px; }
.brand-tagline { font-size: 22px; font-weight: 700; color: var(--color-text); line-height: 1.35; letter-spacing: -.02em; }
.cart-link { gap: var(--space-1); }
.site-footer { flex-direction: column; justify-content: start; }
.site-footer nav { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); order: -1; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-hairline); }
.site-footer nav a[href="#privacy"] { color: var(--color-text); font-weight: 700; }
.consultation .kakao-official { display: block; line-height: 0; border-radius: 999px; }
.consultation .kakao-official img { display: block; width: 112px; height: 50px; }
.consultation .kakao-official:focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; }
@media (max-width: 760px) {
  .wordmark { font-size: 22px; }
  .brand-tagline { font-size: 17px; }
  .consultation .kakao-official { padding: 2px; }
  .consultation .kakao-official img { width: 90px; height: 40px; }
  #product-details-form input, #product-details-form select, #product-details-form .field-help, #availability-note, .gift-banner { padding-inline-end: 104px; }
}
@media (max-width: 760px) { .order-card .form-grid { grid-template-columns: minmax(0, 1fr); } }
.brand-tagline, .gift-banner { word-break: keep-all; text-wrap: balance; }

/* 2026-11-06 round 4: taller header, larger wordmark, Shampoo purple value prop (#554FF5 on #FFFFFF = 5.49:1) */
.site-header { padding-block: var(--space-8); }
.wordmark { font-size: 34px; }
.brand-tagline { font-size: 22px; color: #554FF5; margin-top: var(--space-1); }
.cart-link, .site-header nav a { font-size: 17px; }
/* desktop: bigger official consult button pinned to the bottom-right corner */
.consultation { inset-inline-end: var(--space-8); bottom: var(--space-8); }
.consultation .kakao-official img { width: 150px; height: 67px; }
@media (max-width: 760px) {
  .site-header { padding-block: var(--space-6) var(--space-5); }
  .wordmark { font-size: 27px; }
  .brand-tagline { font-size: 18px; }
  .cart-link, .site-header nav a { font-size: 15px; }
  .consultation { inset-inline-end: var(--space-5); bottom: var(--space-4); }
  .consultation .kakao-official img { width: 90px; height: 40px; }
  /* native calendar icon follows the content box (pushed inward by the button gutter); own it at the same right inset as the select chevron */
  input[type="date"] { -webkit-appearance: none; appearance: none; background-image: url('/assets/calendar-icon.svg'); background-repeat: no-repeat; background-position: right var(--space-4) center; background-size: 16px 16px; }
  input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
}
/* desktop consult button: as large as the side gutter allows without entering the 1120px column */
.consultation { inset-inline-end: var(--space-6); bottom: var(--space-6); }
.consultation .kakao-official img { width: 112px; height: 50px; }
@media (min-width: 1420px) { .consultation { inset-inline-end: var(--space-4); } .consultation .kakao-official img { width: 128px; height: 57px; } }
@media (min-width: 1480px) { .consultation { inset-inline-end: var(--space-6); bottom: var(--space-8); } .consultation .kakao-official img { width: 150px; height: 67px; } }
@media (max-width: 760px) { .consultation { inset-inline-end: var(--space-5); bottom: var(--space-4); } .consultation .kakao-official img { width: 90px; height: 40px; } }
#cart-button.cart-link { font-size: 17px; font-weight: 600; color: var(--color-muted); }
@media (hover: hover) { #cart-button.cart-link:hover { color: var(--color-text); } }
@media (max-width: 760px) { #cart-button.cart-link { font-size: 15px; } }

/* 2026-11-07: BM Hanna Pro for display text (wordmark, product title, price); forms and body stay Pretendard */
.wordmark, #product-title, .price { font-family: 'BM Hanna Pro', Pretendard, sans-serif; font-weight: 400; letter-spacing: 0; }
.brand-tagline { font-weight: 600; }
@media (max-width: 760px) {
  .consultation .kakao-official img { width: 108px; height: 48px; }
  #product-details-form input, #product-details-form select, #product-details-form .field-help, #availability-note, .gift-banner { padding-inline-end: 124px; }
}
/* Korean copy wraps at word boundaries; very long tokens (emails, codes) can still break */
body { word-break: keep-all; overflow-wrap: anywhere; }
.brand-tagline { font-weight: 500; }

/* supplier-sourced product notes (오만플라워 BTOM_1-1-1-1 상세 안내, 2026-11-08) */
.supplier-notes { display: grid; gap: var(--space-2); margin: 0; font-size: 14px; color: var(--color-muted); }
.supplier-notes div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3); }
.supplier-notes dt { font-weight: 600; color: var(--color-text); }
.supplier-notes dd { margin: 0; }
/* wordmark: 배민 한나체 Pro */
@font-face { font-family: 'BM Hanna Pro'; src: url('/assets/bm-hanna-pro.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }

/* 2026-11-09 주문서·배송지: 헤더·카카오 상담 유지, 확인 버튼은 주문서 폭에 맞춤. 모바일에선 상담 버튼을 확인 버튼 위로 */
@media (max-width: 760px) { body[data-route="order"] .consultation[data-available="true"], body[data-route="address"] .consultation[data-available="true"] { bottom: calc(var(--space-4) + 52px + var(--space-3)); } }
.field .field-label { font-size: 16px; font-weight: 600; }
.price-original { display: block; font-size: 20px; font-weight: 500; color: var(--color-muted); text-decoration: line-through; }
#quantity-discount { color: var(--color-text); }
.date-field { position: relative; }
.date-display { display: flex; align-items: center; min-height: 52px; padding: var(--space-3) calc(var(--space-4) * 2 + 16px) var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface) url('/assets/calendar-icon.svg') no-repeat right var(--space-4) center / 16px 16px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--color-muted); }
.date-display.has-value { color: var(--color-text); }
.date-field > input { position: absolute; inset: 0; opacity: 0; cursor: pointer; caret-color: transparent; }
.date-field:focus-within .date-display { outline: 2px solid var(--color-action); outline-offset: var(--space-1); }
.date-picker { position: absolute; z-index: 20; top: calc(100% + var(--space-2)); inset-inline-start: 0; width: min(340px, 100%); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-media); box-shadow: 0 8px 24px rgba(25, 29, 39, .12); }
.date-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); font-size: 16px; font-weight: 700; }
.date-picker-head button { width: 40px; height: 40px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text); font-size: 20px; cursor: pointer; }
.date-picker-head button:disabled { color: #B9BBB7; cursor: default; }
.date-picker-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); text-align: center; }
.date-picker-grid .dow { font-size: 14px; font-weight: 600; color: var(--color-muted); padding-block: var(--space-1); }
.date-picker-grid .dow.sun, .date-picker-grid button.sun:not(:disabled) { color: #C0392B; }
.date-picker-grid button { aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text); font-size: 15px; font-weight: 500; cursor: pointer; }
.date-picker-grid button:hover:not(:disabled) { background: #EEEFEC; }
.date-picker-grid button:disabled { color: #B9BBB7; cursor: default; }
.date-picker-grid button.selected { background: var(--color-action); color: var(--color-surface); font-weight: 700; }

.category-nav { display: flex; gap: var(--space-2); max-width: calc(var(--content-max) + 12vw); margin-inline: auto; padding: var(--space-3) 6vw; overflow-x: auto; scrollbar-width: none; }
.category-nav a:first-child { margin-inline-start: calc(var(--space-3) * -1); }
.category-nav::-webkit-scrollbar { display: none; }
.category-nav a { flex: none; padding: var(--space-2) var(--space-3); border-radius: 999px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.category-nav a:hover { color: var(--color-text); background: #F2F2EF; }
.category-nav a.active { color: var(--color-surface); background: var(--color-action); }
.shop-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.shop-card a { display: flex; flex-direction: column; gap: var(--space-3); color: inherit; text-decoration: none; }
.shop-card-media { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-media); background: #F7F7F7; }
.shop-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-badge { position: absolute; top: var(--space-3); inset-inline-start: var(--space-3); padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); background: var(--color-action); color: var(--color-surface); font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .02em; }
.shop-card-text { display: flex; flex-direction: column; gap: var(--space-1); }
.shop-card-category { font-size: 14px; font-weight: 500; color: var(--color-muted); }
.shop-card-name { font-size: 17px; font-weight: 600; line-height: 1.4; }
.shop-card-price { font-size: 18px; font-weight: 700; }
.content-page.shop-page { padding-inline: 0; }
@media (max-width: 1100px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); } .category-nav { padding-inline: var(--space-5); } .content-page.shop-page { padding-top: var(--space-4); } .shop-card-name { font-size: 16px; } }

/* 2026-11-09 콤팩트 주문서 · 상품 화면 금액 요약 · 동의 체크박스 */
.summary-list.price-box { border-top: 1px solid #E4E5E2; padding-top: var(--space-4); gap: var(--space-2); }
.summary-list.price-box div { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.summary-list.price-box dt { font-size: 16px; font-weight: 500; }
.summary-list.price-box dd { margin: 0; font-size: 16px; font-weight: 600; }
.summary-list.price-box #quantity-discount { color: #B83A0B; }
.summary-list.price-box .checkout-total { border-top: 1px solid #E4E5E2; padding-top: var(--space-3); margin-top: var(--space-1); }
.summary-list.price-box .checkout-total dt { color: var(--color-text); font-weight: 700; font-size: 17px; }
.summary-list.price-box .checkout-total dd { font-size: 22px; font-weight: 800; }
.consent-group { margin: 0; padding: var(--space-4); border: 1px solid #E4E5E2; border-radius: var(--radius-media); display: flex; flex-direction: column; gap: var(--space-2); }
.consent-group .check-row { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; font-weight: 500; min-height: 32px; }
.consent-group .check-row input { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--color-action); }
.consent-group .consent-all { font-size: 16px; font-weight: 700; padding-bottom: var(--space-2); border-bottom: 1px solid #E4E5E2; margin-bottom: var(--space-1); }
.consent-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.consent-row .text-link { font-size: 14px; color: var(--color-muted); flex: none; }
#consent-help:empty { display: none; }
#consent-help { color: #B42318; font-size: 14px; }
#order-view { padding-inline: 6vw; max-width: 1180px; margin-inline: auto; gap: var(--space-5); }
#order-view .checkout-header { justify-content: flex-start; gap: var(--space-2); }
#order-view h1 { font-size: 22px; }
.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-4) var(--space-6); align-items: start; }
.order-main, .order-side { min-width: 0; }
.order-side { position: sticky; top: var(--space-4); }
#order-view .checkout-section { border: 1px solid #E4E5E2; border-radius: var(--radius-media); padding: 18px 20px; gap: var(--space-3); }
#order-view h2 { font-size: 17px; font-weight: 700; line-height: 1.4; }
#order-view .summary-list { gap: var(--space-2); }
#order-view .summary-list div { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
#order-view .summary-list dt { font-size: 15px; } #order-view .summary-list dd { margin: 0; font-size: 15px; font-weight: 600; text-align: end; }
#order-view .checkout-total { border-top: 1px solid #E4E5E2; padding-top: 10px; margin-top: 2px; }
#order-view .checkout-total dt { color: var(--color-text); font-weight: 700; font-size: 16px; }
#order-view .checkout-total dd { font-size: 21px; font-weight: 800; }
#order-view #checkout-discount-amount { color: #B83A0B; }
#order-view input { min-height: 44px; padding: var(--space-2) var(--space-3); font-size: 15px; }
#order-view .field label { font-size: 14px; }
#order-view .field-help { font-size: 13px; }
.orderer-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.orderer-fields #orderer-phone-help { grid-column: 1 / -1; }
#order-view .checkout-thumbnail { width: 64px; height: 64px; border-radius: var(--radius-control); object-fit: contain; }
#order-view .checkout-product { gap: var(--space-3); align-items: center; }
#order-view .checkout-product .stack { gap: 2px; font-size: 15px; }
#order-view #checkout-recipient p { font-size: 15px; line-height: 1.55; }
.order-consent-note { padding-inline: var(--space-1); }
#order-view .checkout-pay { width: 100%; font-size: 17px; }
@media (max-width: 720px) {
  #order-view { padding-inline: var(--space-4); }
  .order-grid { grid-template-columns: 1fr; }
  .order-side { position: static; }
  .orderer-fields { grid-template-columns: 1fr; }
}

/* 2026-11-09 비회원 주문 추적 */
.track-note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-muted); background: #F6F7F5; border-radius: 10px; padding: var(--space-3) 14px; }
.track-note strong, .track-foot strong { color: var(--color-text); }
.track-card { border: 1px solid #E4E5E2; border-radius: var(--radius-media); padding: var(--space-5); display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.track-card h2 { font-size: 18px; font-weight: 700; margin: 0; }
.track-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.track-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.track-steps .dot { width: 24px; height: 24px; border-radius: 50%; background: #E4E5E2; color: #595B61; font-size: 13px; font-weight: 700; line-height: 24px; text-align: center; }
.track-steps li[data-done="true"] .dot { background: var(--color-action); color: #FFFFFF; }
.track-steps strong { display: block; font-size: 15px; }
.track-steps span:not(.dot) { display: block; color: var(--color-muted); font-size: 14px; line-height: 1.5; }
.track-foot { margin: 0; font-size: 14px; color: var(--color-muted); border-top: 1px solid #E4E5E2; padding-top: var(--space-3); }
.link-request { max-width: 640px; }
.link-request h2 { font-size: 18px; font-weight: 700; margin: 0; }
.link-request-row { display: flex; gap: var(--space-2); }
.link-request-row input { flex: 1; }
.link-request-result { margin: 0; font-size: 14px; color: #1B6B3A; background: #EEF7F0; border-radius: 10px; padding: 10px var(--space-3); }
.legacy-lookup { max-width: 640px; font-size: 14px; color: var(--color-muted); }
.legacy-lookup summary { cursor: pointer; padding-block: var(--space-2); }