:root {
  --kg-bg: #ffffff;
  --kg-paper: #faf8f5;
  --kg-ink: #24282b;
  --kg-muted: #616569;
  --kg-brand: #970018;
  --kg-brand-dark: #750013;
  --kg-brand-soft: #fff1f1;
  --kg-line: #dedbd7;
  --kg-error: #a31725;
  --kg-error-bg: #fff4f4;
  --kg-focus: #235d78;
  --kg-good: #246045;
  --kg-good-bg: #edf5ef;
  --kg-disabled-bg: #eeece9;
  --kg-note-bg: #fff7da;
  --kg-note-ink: #51451c;
  --kg-xs: .375rem;
  --kg-sm: .75rem;
  --kg-gap: 1rem;
  --kg-md: 1.5rem;
  --kg-lg: 2rem;
  --kg-xl: 3rem;
  --kg-radius: .75rem;
  --kg-radius-sm: .375rem;
  --kg-body: 1.125rem;
  --kg-input: 1rem;
  --kg-small: .875rem;
  --kg-title: clamp(1.75rem, 4vw, 2.75rem);
  --kg-h2: 1.5rem;
  --kg-control: 3rem;
  --kg-shell: 72rem;
  --kg-reading: 48rem;
  --kg-side: 20rem;
  --kg-border: .0625rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--kg-ink); background: var(--kg-bg); font: var(--kg-body)/1.75 -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif; overflow-wrap: anywhere; }
h1, h2, h3, p, dl { margin-top: 0; }
h1 { font-size: var(--kg-title); line-height: 1.4; letter-spacing: -.03em; }
h2 { font-size: var(--kg-h2); line-height: 1.5; }
h3 { font-size: var(--kg-body); line-height: 1.5; }
p { margin-bottom: var(--kg-gap); }
a { color: var(--kg-brand); text-underline-offset: .2em; }
a:hover { color: var(--kg-brand-dark); }
a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; }
:is(a, button, input, select, textarea, summary):focus-visible { outline: .1875rem solid var(--kg-focus); outline-offset: .1875rem; }
[hidden] { display: none !important; }
.kg-shell { width: min(calc(100% - var(--kg-lg)), var(--kg-shell)); margin-inline: auto; }
.kg-skip { position: absolute; inset-inline-start: var(--kg-gap); top: -8rem; z-index: 10; padding: var(--kg-sm); color: var(--kg-bg); background: var(--kg-brand); }
.kg-skip:focus { top: var(--kg-gap); }
.kg-header { border-bottom: var(--kg-border) solid var(--kg-line); background: var(--kg-bg); }
.kg-header-inner { min-height: 5.5rem; padding-block: var(--kg-gap); display: flex; align-items: center; justify-content: space-between; gap: var(--kg-gap); }
.kg-brand { min-height: var(--kg-control); display: inline-flex; align-items: center; text-decoration: none; color: var(--kg-ink); font-size: 1.5rem; font-weight: 750; line-height: 1.35; }
.kg-brand img { width: var(--kg-control); height: var(--kg-control); border-radius: 50%; margin-right: var(--kg-sm); }
.kg-brand small { display: block; font-size: .75rem; color: var(--kg-muted); font-weight: 500; margin-top: var(--kg-xs); }
.kg-nav { display: flex; gap: var(--kg-gap); flex-wrap: wrap; justify-content: flex-end; }
.kg-nav a, .kg-link, .kg-footer a, .kg-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--kg-control); font-size: var(--kg-small); }
.kg-count { margin-left: var(--kg-xs); min-width: 1.5rem; border-radius: 1rem; background: var(--kg-brand-soft); color: var(--kg-brand); text-align: center; font-size: var(--kg-small); }
.kg-main { padding-block: var(--kg-xl); min-height: 28rem; }
.kg-page-heading { max-width: var(--kg-reading); margin-bottom: var(--kg-lg); }
.kg-page-heading h1 { margin-bottom: var(--kg-gap); }
.kg-eyebrow { color: var(--kg-brand); font-size: var(--kg-small); font-weight: 700; letter-spacing: .08em; margin-bottom: var(--kg-sm); }
.kg-lead, .kg-hint { color: var(--kg-muted); }
.kg-hint { font-size: var(--kg-small); line-height: 1.7; margin: var(--kg-xs) 0 0; }
.kg-breadcrumb { margin-bottom: var(--kg-md); font-size: var(--kg-small); display: flex; align-items: center; gap: var(--kg-sm); flex-wrap: wrap; }
.kg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--kg-gap); flex-wrap: wrap; padding-block: var(--kg-gap); margin-bottom: var(--kg-md); border-block: var(--kg-border) solid var(--kg-line); }
.kg-tabs { display: flex; gap: var(--kg-sm); flex-wrap: wrap; }
.kg-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--kg-control); padding-inline: var(--kg-gap); border: var(--kg-border) solid var(--kg-line); border-radius: var(--kg-radius-sm); text-decoration: none; color: var(--kg-ink); font-size: var(--kg-input); }
.kg-tabs a[aria-current] { border-color: var(--kg-brand); color: var(--kg-brand); background: var(--kg-brand-soft); font-weight: 700; }
.kg-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kg-md); }
.kg-product-card { min-width: 0; padding: var(--kg-md); border: var(--kg-border) solid var(--kg-line); border-radius: var(--kg-radius); background: var(--kg-bg); display: flex; flex-direction: column; }
.kg-product-card h2 { font-size: 1.375rem; margin-bottom: var(--kg-sm); }
.kg-product-card h2 a { display: inline-flex; align-items: center; min-height: var(--kg-control); }
.kg-card-actions { margin-top: auto; padding-top: var(--kg-md); display: flex; flex-wrap: wrap; gap: var(--kg-sm); }
.kg-badges { display: flex; flex-wrap: wrap; gap: var(--kg-xs); margin-bottom: var(--kg-gap); }
.kg-badge { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: .25rem; font-size: var(--kg-small); font-weight: 600; color: var(--kg-muted); background: var(--kg-paper); }
.kg-badge-ready { color: var(--kg-good); background: var(--kg-good-bg); }
.kg-badge-hold { color: var(--kg-brand); background: var(--kg-brand-soft); }
.kg-spec { margin: 0 0 var(--kg-gap); }
.kg-spec > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--kg-gap); padding-block: .5rem; border-bottom: var(--kg-border) solid var(--kg-line); font-size: var(--kg-input); }
.kg-spec dt { color: var(--kg-muted); }
.kg-spec dd { margin: 0; min-width: 0; }
.kg-price { margin-block: var(--kg-gap); }
.kg-price strong { font-size: 1.5rem; font-weight: 750; }
.kg-price span, .kg-price small { display: block; color: var(--kg-muted); font-size: var(--kg-small); }
.kg-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--kg-side)); align-items: start; gap: var(--kg-lg); }
.kg-layout > * { min-width: 0; }
.kg-panel { padding: var(--kg-md); border: var(--kg-border) solid var(--kg-line); border-radius: var(--kg-radius); margin-bottom: var(--kg-md); }
.kg-summary { padding: var(--kg-md); background: var(--kg-paper); border: var(--kg-border) solid var(--kg-line); border-top: .25rem solid var(--kg-brand); border-radius: var(--kg-radius); }
.kg-summary h2 { font-size: 1.25rem; }
.kg-totals { margin: 0; font-size: var(--kg-input); }
.kg-totals > div { display: flex; justify-content: space-between; gap: var(--kg-gap); padding-block: .5rem; }
.kg-totals dt { color: var(--kg-muted); }
.kg-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.kg-totals .kg-total { margin-top: var(--kg-sm); padding-top: var(--kg-gap); border-top: .125rem solid var(--kg-line); font-weight: 750; }
.kg-totals .kg-total dt { color: var(--kg-ink); }
.kg-total dd { font-size: 1.5rem; }
.kg-section { margin-bottom: var(--kg-lg); }
.kg-section h2 { margin-bottom: var(--kg-md); }
.kg-cart-item { padding-block: var(--kg-md); border-bottom: var(--kg-border) solid var(--kg-line); }
.kg-cart-item:first-child { padding-top: 0; }
.kg-cart-item h2, .kg-cart-item h3 { margin-bottom: var(--kg-sm); }
.kg-cart-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--kg-sm); margin-top: var(--kg-gap); }
.kg-cart-controls .kg-field { width: 8rem; margin-bottom: 0; }
.kg-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--kg-sm); min-height: var(--kg-control); min-width: var(--kg-control); padding: var(--kg-sm) var(--kg-md); border: var(--kg-border) solid transparent; border-radius: var(--kg-radius-sm); text-decoration: none; font-size: var(--kg-input); font-weight: 700; line-height: 1.6; text-align: center; cursor: pointer; }
.kg-button-primary { color: var(--kg-bg); background: var(--kg-brand); }
.kg-button-primary:hover { color: var(--kg-bg); background: var(--kg-brand-dark); }
.kg-button-secondary { color: var(--kg-ink); border-color: var(--kg-line); background: var(--kg-bg); }
.kg-button-secondary:hover { color: var(--kg-brand); border-color: var(--kg-brand); }
.kg-button:disabled { color: var(--kg-muted); border-color: var(--kg-line); background: var(--kg-disabled-bg); cursor: not-allowed; }
.kg-button[aria-busy='true'] { cursor: wait; }
.kg-wide { width: 100%; }
.kg-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kg-gap); margin-block: var(--kg-md); }
.kg-field { margin-bottom: var(--kg-md); min-width: 0; }
.kg-field label { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kg-sm); margin-bottom: var(--kg-xs); font-size: var(--kg-input); font-weight: 650; }
.kg-field :is(input, select, textarea) { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: var(--kg-control); border: var(--kg-border) solid var(--kg-line); border-radius: var(--kg-radius-sm); background: var(--kg-bg); color: var(--kg-ink); padding: var(--kg-sm); font-size: var(--kg-input); line-height: 1.6; }
.kg-field textarea { resize: vertical; }
.kg-field :is(input, select, textarea)[aria-invalid='true'] { border: .125rem solid var(--kg-error); }
.kg-required { padding: .125rem var(--kg-xs); font-weight: 500; font-size: .75rem; color: var(--kg-brand); background: var(--kg-brand-soft); border-radius: .1875rem; }
.kg-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kg-gap); }
.kg-check { display: flex; align-items: flex-start; gap: var(--kg-sm); min-height: var(--kg-control); margin-bottom: var(--kg-gap); padding-block: var(--kg-sm); font-size: var(--kg-input); line-height: 1.7; }
.kg-check input { flex: none; width: 1.375rem; height: 1.375rem; margin-top: .1875rem; accent-color: var(--kg-brand); }
.kg-check a { display: inline-flex; align-items: center; min-height: var(--kg-control); }
.kg-payment { min-width: 0; margin: 0 0 var(--kg-lg); padding: 0; border: 0; }
.kg-payment legend { font-size: var(--kg-h2); font-weight: 700; margin-bottom: var(--kg-md); }
.kg-payment-option { display: flex; align-items: flex-start; gap: var(--kg-sm); min-height: var(--kg-control); padding: var(--kg-md); margin-bottom: var(--kg-sm); border: var(--kg-border) solid var(--kg-line); border-radius: var(--kg-radius-sm); font-size: var(--kg-input); }
.kg-payment-option input { flex: none; width: 1.375rem; height: 1.375rem; margin-top: .1875rem; accent-color: var(--kg-brand); }
.kg-payment-option strong, .kg-payment-option small { display: block; }
.kg-payment-option small { color: var(--kg-muted); font-size: var(--kg-small); }
.kg-payment-option:has(input:checked) { border-color: var(--kg-brand); background: var(--kg-brand-soft); }
.kg-payment-option:has(input:disabled) { background: var(--kg-paper); color: var(--kg-muted); }
.kg-steps { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kg-sm); margin: 0 0 var(--kg-lg); font-size: var(--kg-small); }
.kg-steps li { border-bottom: .125rem solid var(--kg-line); color: var(--kg-muted); padding-bottom: var(--kg-sm); }
.kg-steps li[aria-current] { border-color: var(--kg-brand); color: var(--kg-brand); font-weight: 700; }
.kg-notice, .kg-alert { padding: var(--kg-md); margin-bottom: var(--kg-md); border-radius: var(--kg-radius-sm); font-size: var(--kg-input); }
.kg-notice { background: var(--kg-paper); border-left: .1875rem solid var(--kg-brand); }
.kg-alert { background: var(--kg-error-bg); border: var(--kg-border) solid var(--kg-error); color: var(--kg-error); }
.kg-alert h2 { font-size: var(--kg-body); margin-bottom: var(--kg-sm); }
.kg-alert ul { margin-bottom: 0; padding-left: var(--kg-md); }
.kg-alert a { display: inline-flex; align-items: center; min-height: var(--kg-control); color: var(--kg-error); }
.kg-notice p:last-child, .kg-alert p:last-child { margin-bottom: 0; }
.kg-field-error { margin: var(--kg-xs) 0 0; color: var(--kg-error); font-weight: 600; font-size: var(--kg-small); }
.kg-empty { padding-block: var(--kg-xl); text-align: center; }
.kg-status { max-width: var(--kg-reading); }
.kg-status h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.kg-status-success { border-top: .25rem solid var(--kg-good); }
.kg-order-number { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.kg-table-scroll { overflow-x: auto; max-width: 100%; }
.kg-footer { border-top: var(--kg-border) solid var(--kg-line); padding-block: var(--kg-lg); font-size: var(--kg-small); }
.kg-footer strong { display: block; font-size: 1.375rem; }
.kg-footer nav { display: flex; flex-wrap: wrap; gap: var(--kg-gap) var(--kg-md); margin-block: var(--kg-gap); }
.kg-footer p:last-child { color: var(--kg-muted); margin: 0; }
.kg-design-only { padding: var(--kg-sm) var(--kg-gap); border-bottom: var(--kg-border) solid var(--kg-line); background: var(--kg-note-bg); color: var(--kg-note-ink); font-size: var(--kg-small); }
@media (max-width: 920px) {
  .kg-layout { grid-template-columns: minmax(0, 1fr); }
  .kg-summary { max-width: var(--kg-reading); }
}
@media (max-width: 600px) {
  .kg-header-inner { align-items: flex-start; }
  .kg-brand { font-size: 1.25rem; }
  .kg-brand small { max-width: 9rem; }
  .kg-nav { gap: var(--kg-xs); max-width: 8rem; }
  .kg-nav a { font-size: .8125rem; }
  .kg-main { padding-block: var(--kg-lg); }
  .kg-product-grid, .kg-fields { grid-template-columns: minmax(0, 1fr); }
  .kg-product-card, .kg-panel, .kg-summary { padding: var(--kg-gap); }
  .kg-spec > div { grid-template-columns: 6.25rem minmax(0, 1fr); gap: var(--kg-sm); }
  .kg-actions { align-items: stretch; flex-direction: column; }
  .kg-actions .kg-button { width: 100%; }
  .kg-payment-option { padding: var(--kg-gap); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }