:root {
  --paper: #f7f0e4;
  --paper-deep: #eee2d0;
  --ink: #183c3a;
  --ink-soft: #45615f;
  --red: #c94f38;
  --red-dark: #a83d2b;
  --gold: #dfa94a;
  --white: #fffdf8;
  --line: #d9cdbb;
  --shadow: 0 18px 50px rgba(46, 54, 45, .12);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding: 0 max(18px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(24, 60, 58, .1);
  background: rgba(247, 240, 228, .92);
  backdrop-filter: blur(14px);
}
.header-spacer { width: 58px; }
.brand { display: inline-flex; gap: 9px; align-items: center; color: var(--ink); text-decoration: none; }
.brand-mark {
  display: grid; width: 38px; height: 38px; place-items: center;
  border-radius: 50% 50% 48% 52%; color: var(--white); background: var(--red);
  font-family: "Shippori Mincho", serif; font-size: 19px; font-weight: 700;
  transform: rotate(-4deg);
}
.brand strong { display: block; font-family: "Shippori Mincho", serif; font-size: 17px; letter-spacing: .06em; line-height: 1; }
.brand small { display: block; margin-top: 4px; font-size: 8px; font-weight: 800; letter-spacing: .28em; }
.header-link {
  border: 0; color: var(--ink-soft); background: none; font-size: 12px; font-weight: 700;
}

.hero {
  position: relative;
  min-height: 0;
  padding: 22px 22px 48px;
  overflow: hidden;
}
.hero::before {
  position: absolute; top: 35px; right: -68px; width: 200px; height: 200px;
  border: 1px solid rgba(201, 79, 56, .17); border-radius: 50%; content: "";
}
.hero-image {
  position: relative;
  margin: 0 -6px 28px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--paper-deep);
  box-shadow: var(--shadow);
}
.hero-image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.eyebrow { color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.hero h1, .complete-card h1, .admin-head h1 {
  position: relative; margin: 18px 0 16px; font-family: "Shippori Mincho", serif;
  font-size: clamp(38px, 11vw, 58px); line-height: 1.36; letter-spacing: .03em;
}
.hero h1 em { color: var(--red); font-style: normal; }
.hero > p { position: relative; max-width: 530px; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 2; }
.hero-points { position: relative; display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.hero-points span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.35); font-size: 10px; font-weight: 700; }
.hero-button { position: relative; width: 100%; margin-top: 26px; }

.order-shell { position: relative; max-width: 760px; margin: 0 auto; padding: 0 16px 36px; }
.progress-wrap {
  position: sticky; z-index: 15; top: 68px; margin: 0 -16px 22px; padding: 15px 20px 12px;
  border-bottom: 1px solid rgba(24,60,58,.1); background: rgba(247,240,228,.95); backdrop-filter: blur(12px);
}
.progress-copy { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.progress-copy span { color: var(--red); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.progress-copy strong { font-size: 12px; }
.progress-track { height: 4px; overflow: hidden; border-radius: 4px; background: var(--line); }
.progress-track span { display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--red); transition: width .3s ease; }

.form-step { display: none; animation: stepIn .3s ease; }
.form-step.active { display: block; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } }
.section-heading { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 27px; }
.section-number {
  display: grid; flex: 0 0 42px; height: 42px; place-items: center; border-radius: 50%;
  color: var(--white); background: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .08em;
}
.section-heading h2 { margin: -3px 0 5px; font-family: "Shippori Mincho", serif; font-size: 22px; }
.section-heading p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
fieldset { margin: 0 0 28px; padding: 0; border: 0; }
legend, .field > label { display: block; margin-bottom: 11px; font-size: 13px; font-weight: 700; }
legend span, .field > label span { color: var(--red); font-size: 10px; }
legend small, .field > label small { color: var(--ink-soft); font-size: 10px; font-weight: 500; }

.choice-list { display: grid; gap: 10px; }
.choice-card {
  position: relative; display: flex; align-items: center; min-height: 92px; padding: 12px 44px 12px 12px;
  border: 1.5px solid var(--line); border-radius: 16px; background: rgba(255,253,248,.7); transition: .2s ease;
}
.choice-card:has(input:checked) { border-color: var(--red); background: var(--white); box-shadow: 0 7px 22px rgba(201,79,56,.09); }
.choice-card input, .pill-grid input, .color-options input { position: absolute; opacity: 0; pointer-events: none; }
.plan-image {
  display: block;
  flex: 0 0 96px;
  height: 112px;
  margin-right: 13px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--paper-deep);
}
.plan-image img { width: 100%; height: 100%; object-fit: cover; }
.choice-visual {
  position: relative; display: grid; flex: 0 0 68px; height: 66px; margin-right: 13px; place-items: center;
  overflow: hidden; border-radius: 10px; background: var(--paper-deep);
}
.single-photo i { width: 38px; height: 44px; border: 2px solid var(--ink); transform: rotate(-4deg); }
.single-photo i::after { display: block; width: 19px; height: 11px; margin: 19px auto 0; border-radius: 50% 50% 0 0; background: var(--red); content: ""; }
.collage { grid-template: 1fr 1fr / 1fr 1fr; gap: 3px; padding: 12px; transform: rotate(2deg); }
.collage i { width: 100%; height: 100%; background: var(--ink); opacity: .82; }
.collage i:nth-child(2), .collage i:nth-child(3) { background: var(--red); }
.poster { display: block; padding: 12px 7px; color: var(--paper); background: var(--red); text-align: center; }
.poster b { display: block; font-family: serif; font-size: 12px; letter-spacing: .08em; }
.poster i { display: block; width: 45px; height: 25px; margin: 4px auto 0; border-radius: 50% 50% 0 0; background: var(--gold); }
.choice-copy strong { display: block; margin-bottom: 5px; font-size: 13px; }
.choice-copy small { display: block; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.radio-mark { position: absolute; right: 16px; width: 19px; height: 19px; border: 1.5px solid var(--line); border-radius: 50%; }
input:checked ~ .radio-mark { border: 5px solid var(--red); }

.pill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pill-grid label span {
  display: grid; min-height: 48px; padding: 8px; place-items: center; border: 1.5px solid var(--line);
  border-radius: 12px; background: rgba(255,253,248,.7); font-size: 11px; font-weight: 600; text-align: center;
}
.pill-grid input:checked + span { border-color: var(--red); color: var(--red); background: var(--white); }
.layout-image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.layout-image-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 15px;
  background: var(--white);
  transition: .2s ease;
}
.layout-image-card:has(input:checked) { border-color: var(--red); box-shadow: 0 8px 20px rgba(201,79,56,.12); }
.layout-image-card input, .logo-image-grid input { position: absolute; opacity: 0; pointer-events: none; }
.layout-image-card > img { display: block; width: 100%; aspect-ratio: 1.32; object-fit: cover; background: #ddd; }
.layout-image-card > span { display: block; padding: 11px 28px 12px 10px; }
.layout-image-card strong, .layout-image-card small { display: block; }
.layout-image-card strong { font-size: 12px; }
.layout-image-card small { margin-top: 3px; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.layout-image-card > i, .logo-image-grid label > i {
  position: absolute; top: 8px; right: 8px; width: 19px; height: 19px;
  border: 1.5px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.94);
}
.layout-image-card input:checked ~ i, .logo-image-grid input:checked ~ i { border: 5px solid var(--red); }
.logo-choice-section {
  position: relative; padding: 22px 12px 12px; border: 1px solid #e2bb72;
  border-radius: 17px; background: #fff7e7; animation: stepIn .25s ease;
}
.conditional-label {
  position: absolute; top: -11px; left: 12px; padding: 4px 9px;
  border-radius: 99px; color: #fff; background: var(--gold); font-size: 10px; font-weight: 700;
}
.logo-image-grid { display: grid; gap: 10px; }
.logo-image-grid label {
  position: relative; display: grid; min-height: 128px; padding: 12px 38px 12px 12px;
  place-items: center; overflow: hidden; border: 1.5px solid var(--line);
  border-radius: 13px; background: #fff;
}
.logo-image-grid label:has(input:checked) { border-color: var(--red); box-shadow: 0 7px 18px rgba(201,79,56,.1); }
.logo-image-grid img { display: block; width: 100%; height: 104px; object-fit: contain; }
.back-logo-grid img { height: 82px; }
.two-column { display: grid; gap: 2px; }
.color-options { display: flex; gap: 22px; }
.color-options { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 15px; }
.color-options label { position: relative; display: grid; gap: 5px; justify-items: center; }
.color-options .color { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--paper); }
.color-options input:checked + .color { outline: 2px solid var(--red); outline-offset: 3px; }
.color.white { background: #fff; } .color.black { background: #202322; }
.color.dark-green { background: #426951; } .color.brown { background: #60453a; }
.color.dark-gray { background: #71777a; } .color.cream { background: #f0e1bf; }
.color-options small { font-size: 10px; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
.text-link {
  display: inline-flex; gap: 7px; align-items: center; margin-top: 11px; padding: 0;
  border: 0; color: var(--red); background: none; font-size: 13px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.shirt-preview-section {
  margin: 8px 0 30px; padding: 16px; border: 1px solid var(--line);
  border-radius: 18px; background: var(--white);
}
.preview-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.preview-heading strong, .preview-heading small { display: block; }
.preview-heading strong { font-size: 15px; }
.preview-heading small { margin-top: 3px; color: var(--ink-soft); font-size: 11px; }
.preview-heading > span { padding: 5px 8px; border-radius: 99px; color: var(--red); background: #fff0eb; font-size: 10px; font-weight: 700; }
.shirt-preview-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 8px; border-radius: 13px; background: var(--paper-deep); }
.shirt-preview-item { display: grid; gap: 7px; justify-items: center; }
.shirt-preview-item > span { color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.preview-shirt {
  --shirt-color: #fff;
  position: relative; width: 130px; height: 150px; overflow: hidden;
  border: 1px solid rgba(24,60,58,.18); border-radius: 15px 15px 9px 9px;
  background: var(--shirt-color);
  box-shadow: 0 7px 15px rgba(24,60,58,.1);
  clip-path: polygon(20% 5%,35% 0,65% 0,80% 5%,100% 19%,88% 38%,78% 30%,78% 100%,22% 100%,22% 30%,12% 38%,0 19%);
}
.shirt-neck {
  position: absolute; z-index: 4; top: -1px; left: 39%; width: 22%; height: 11%;
  border: 1px solid rgba(24,60,58,.18); border-radius: 0 0 50% 50%; background: var(--paper-deep);
}
.front-neck { height: 12%; border-radius: 0 0 52% 52%; }
.front-collar-seam {
  position: absolute; z-index: 3; top: 6%; left: 36%; width: 28%; height: 10%;
  border-bottom: 1px solid rgba(24,60,58,.2); border-radius: 0 0 50% 50%;
}
.back-neck { top: -2px; left: 40%; width: 20%; height: 7%; border-radius: 0 0 45% 45%; }
.back-yoke-seam {
  position: absolute; z-index: 3; top: 17%; left: 24%; width: 52%; height: 7%;
  border-top: 1px solid rgba(24,60,58,.2); border-radius: 50%;
}
.back-shirt::after {
  position: absolute; z-index: 1; top: 22%; left: 50%; width: 1px; height: 68%;
  background: linear-gradient(rgba(24,60,58,.1), transparent 74%); content: "";
}
.image-placeholder {
  position: absolute; z-index: 2; top: 29%; left: 29%; display: grid; width: 42%; height: 43%;
  padding: 5px; place-items: center; border: 1.5px dashed var(--red); color: var(--red);
  background: rgba(255,255,255,.42); font-size: 7px; line-height: 1.35; text-align: center;
}
.preview-logo { position: absolute; z-index: 3; object-fit: contain; }
.front-preview-logo { top: 25%; left: 56%; width: 16%; height: 18%; }
.back-preview-logo { top: 27%; left: 25%; width: 50%; height: 18%; }
.shirt-preview-section > p { margin: 10px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.6; text-align: center; }
.quantity-price-card {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; align-items: center;
  margin-top: 15px; padding: 15px; border-radius: 14px; color: #fff; background: var(--ink);
}
.quantity-price-card label { display: block; margin-bottom: 8px; color: rgba(255,255,255,.76); font-size: 11px; font-weight: 700; }
.quantity-stepper { display: grid; grid-template-columns: 38px 54px 38px; gap: 5px; }
.quantity-stepper button {
  min-height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 9px;
  color: #fff; background: rgba(255,255,255,.1); font-size: 20px;
}
.quantity-stepper input {
  min-height: 40px !important; padding: 5px !important; border: 0 !important; border-radius: 9px !important;
  color: var(--ink); background: #fff !important; font-size: 16px; font-weight: 800; text-align: center;
  box-shadow: none !important; appearance: textfield;
}
.quantity-stepper input::-webkit-inner-spin-button { appearance: none; }
.price-total { text-align: right; }
.price-total span, .price-total > strong, .price-total small { display: block; }
.price-total span { color: rgba(255,255,255,.72); font-size: 10px; }
.price-total span strong { color: #fff; }
.price-total > strong { margin: 3px 0; color: #ffd889; font-size: 20px; letter-spacing: .02em; }
.price-total small { color: rgba(255,255,255,.7); font-size: 9px; line-height: 1.5; }

.field { position: relative; margin-bottom: 23px; }
input:not([type="radio"], [type="checkbox"], [type="file"]), select, textarea {
  width: 100%; min-height: 52px; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px;
  outline: 0; color: var(--ink); background: var(--white); transition: border .2s, box-shadow .2s;
}
textarea { resize: vertical; line-height: 1.7; }
input:focus, select:focus, textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(201,79,56,.09); }
.field > small { display: block; margin-top: 7px; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
.line-guide-link {
  display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; padding: 0;
  border: 0; color: var(--red); background: none; font-size: 12px; font-weight: 700;
}
.line-guide-link span { font-size: 16px; }
.conditional-field { padding: 14px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: #fff7e7; }
.char-count { position: absolute; right: 10px; bottom: 9px; color: var(--ink-soft); font-size: 9px; }
.invalid { border-color: var(--red) !important; }
.add-design-link {
  display: inline-flex; gap: 7px; align-items: center; padding: 0; border: 0;
  color: var(--red); background: none; font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px;
}
.add-design-link span { font-size: 18px; }
.add-design-help { margin: 7px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
.added-designs { display: grid; gap: 8px; margin: 0 0 16px; }
.added-design-card {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 13px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--white);
}
.added-design-card strong, .added-design-card small { display: block; }
.added-design-card strong { font-size: 12px; }
.added-design-card small { margin-top: 4px; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.added-design-card button { padding: 4px 6px; border: 0; color: var(--red); background: none; font-size: 10px; font-weight: 700; }

.upload-zone {
  display: grid; min-height: 190px; padding: 24px; place-items: center; align-content: center;
  border: 1.5px dashed var(--red); border-radius: var(--radius); background: rgba(255,253,248,.65); text-align: center;
}
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-requirement {
  display: flex; justify-content: space-between; margin-bottom: 12px; padding: 13px 14px;
  border-radius: 12px; background: var(--paper-deep); font-size: 13px;
}
.photo-requirement span { color: var(--red); font-weight: 700; }
.compact-upload { display: flex; min-height: 120px; gap: 14px; align-items: center; justify-content: center; text-align: left; }
.compact-upload .upload-icon { flex: 0 0 54px; margin: 0; font-size: 25px; }
.compact-upload > span:last-child { display: grid; margin: 0; }
.compact-upload small { margin-top: 5px; color: var(--ink-soft); font-size: 11px; }
.input-error {
  margin-top: 10px; padding: 10px 12px; border: 1px solid #d66a55;
  border-radius: 10px; color: #8e2e20; background: #fff0ec; font-size: 12px; font-weight: 700;
}
.collage-guide { margin-bottom: 14px; padding: 16px; border-radius: 14px; color: #fff; background: var(--ink); }
.collage-guide strong { font-size: 15px; }
.collage-guide p { margin: 5px 0 0; color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.65; }
.photo-group {
  margin-bottom: 14px; padding: 15px; border: 1.5px solid var(--line);
  border-radius: 15px; background: var(--white);
}
.photo-group.has-error { border-color: var(--red); background: #fff9f7; }
.photo-group.complete { border-color: #5d8b72; }
.photo-group-head { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; margin-bottom: 12px; }
.photo-group-head > b {
  display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%;
  color: #fff; background: var(--red); font-size: 9px;
}
.photo-group-head > b.sub-badge { background: var(--gold); }
.photo-group-head span strong, .photo-group-head span small { display: block; }
.photo-group-head span strong { font-size: 14px; }
.photo-group-head span small { margin-top: 2px; color: var(--ink-soft); font-size: 11px; }
.photo-group-head em { color: var(--red); font-size: 12px; font-style: normal; font-weight: 700; }
.add-photo-button { display: block; }
.add-photo-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.add-photo-button span {
  display: grid; min-height: 46px; padding: 9px; place-items: center;
  border: 1px dashed var(--red); border-radius: 10px; color: var(--red);
  background: #fff8f5; font-size: 12px; font-weight: 700;
}
.add-photo-note { margin: 7px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.group-preview { margin-top: 10px; margin-bottom: 0; }
.single-preview { grid-template-columns: 110px; margin-top: 12px; }
.preview-item button { font-size: 16px; }
.upload-icon { display: grid; width: 54px; height: 54px; margin-bottom: 11px; place-items: center; border-radius: 50%; color: var(--white); background: var(--red); }
.upload-icon svg { width: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.upload-zone strong { font-size: 15px; }
.upload-zone > span:last-child { margin-top: 6px; color: var(--ink-soft); font-size: 10px; }
.upload-note { margin: 12px 0 18px; padding: 13px 15px; border-radius: 12px; background: var(--paper-deep); }
.upload-note strong { font-size: 11px; }
.upload-note p { margin: 4px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
.photo-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 22px; }
.preview-item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--paper-deep); }
.preview-item img { width: 100%; height: 100%; object-fit: cover; }
.preview-item button { position: absolute; top: 5px; right: 5px; display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: white; background: rgba(24,60,58,.78); }
.preview-item small { position: absolute; right: 5px; bottom: 5px; left: 5px; overflow: hidden; color: #fff; font-size: 8px; text-overflow: ellipsis; text-shadow: 0 1px 3px #000; white-space: nowrap; }

.order-summary { overflow: hidden; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.summary-group { padding: 17px; border-bottom: 1px solid var(--line); }
.summary-group:last-child { border: 0; }
.summary-group h3 { margin: 0 0 12px; color: var(--red); font-size: 10px; letter-spacing: .12em; }
.summary-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; margin: 8px 0; font-size: 11px; line-height: 1.55; }
.summary-row span { color: var(--ink-soft); }
.summary-row strong { text-align: right; overflow-wrap: anywhere; }
.price-summary-group { color: #fff; background: var(--ink); }
.price-summary-group h3, .price-summary-group .summary-row strong { color: #ffd889; }
.price-summary-group .summary-row span { color: rgba(255,255,255,.75); }
.agreement { position: relative; display: flex; gap: 11px; align-items: flex-start; margin: 20px 0; color: var(--ink-soft); font-size: 10px; line-height: 1.7; }
.agreement input { position: absolute; opacity: 0; }
.checkmark { display: grid; flex: 0 0 22px; height: 22px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--white); }
.agreement input:checked + .checkmark { border-color: var(--red); background: var(--red); }
.agreement input:checked + .checkmark::after { margin: 4px 0 0 7px; width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0; content: ""; transform: rotate(45deg); }
.agreement-error { margin: -10px 0 17px; padding: 10px 12px; border: 1px solid #d66a55; border-radius: 10px; color: #8e2e20; background: #fff0ec; font-size: 12px; font-weight: 700; }
.final-note { padding: 16px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: #f1e4c8; }
.final-note strong { font-size: 11px; }
.final-note p { margin: 5px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }

.form-actions {
  position: sticky; z-index: 10; bottom: 0; display: flex; gap: 10px; margin: 27px -16px 0; padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(24,60,58,.1); background: rgba(247,240,228,.96); backdrop-filter: blur(12px);
}
.primary-button, .secondary-button {
  min-height: 54px; padding: 13px 20px; border: 0; border-radius: 13px; font-size: 13px; font-weight: 700; transition: transform .15s, background .15s;
}
.primary-button { flex: 1; color: white; background: var(--red); box-shadow: 0 8px 20px rgba(201,79,56,.22); }
.primary-button:active, .secondary-button:active { transform: scale(.98); }
.primary-button:hover { background: var(--red-dark); }
.secondary-button { color: var(--ink); background: var(--paper-deep); }
#prevButton, .submit-button { display: none; }

.complete-view { min-height: calc(100vh - 68px); padding: 32px 16px; background: var(--ink); }
.complete-card { max-width: 520px; margin: 0 auto; padding: 38px 22px; border-radius: 28px; background: var(--paper); text-align: center; box-shadow: var(--shadow); }
.complete-mark { display: grid; width: 62px; height: 62px; margin: 0 auto 22px; place-items: center; border-radius: 50%; color: white; background: var(--red); font-size: 28px; }
.complete-card h1 { margin: 13px 0; font-size: 34px; }
.complete-card > p { color: var(--ink-soft); font-size: 12px; line-height: 1.8; }
.screenshot-button { width: 100%; margin-bottom: 10px; }
.order-number { margin: 25px 0; padding: 14px; border: 1px dashed var(--red); border-radius: 12px; background: var(--white); }
.order-number span { display: block; color: var(--ink-soft); font-size: 9px; }
.order-number strong { display: block; margin-top: 3px; color: var(--red); font-size: 20px; letter-spacing: .08em; }
.complete-flow { display: grid; grid-template-columns: repeat(4, 1fr); margin: 28px 0; }
.complete-flow div { position: relative; display: grid; gap: 7px; justify-items: center; color: var(--ink-soft); font-size: 8px; }
.complete-flow div:not(:last-child)::after { position: absolute; top: 13px; left: 65%; width: 70%; height: 1px; background: var(--line); content: ""; }
.complete-flow i { position: relative; z-index: 1; display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); font-style: normal; }
.complete-flow .done i { border-color: var(--red); color: white; background: var(--red); }

.size-guide-view { min-height: calc(100vh - 68px); padding-bottom: 90px; }
.size-guide-head { padding: 42px 20px 35px; color: #fff; background: var(--ink); text-align: center; }
.size-guide-head h1 { margin: 10px 0 8px; font-family: "Shippori Mincho", serif; font-size: 30px; line-height: 1.45; }
.size-guide-head p { margin: 0; color: rgba(255,255,255,.74); font-size: 13px; }
.size-guide-content { max-width: 760px; margin: auto; padding: 20px 16px; }
.size-guide-content > img { display: block; width: 100%; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.size-guide-content section { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); }
.size-guide-content h2 { margin: 0 0 12px; font-family: "Shippori Mincho", serif; font-size: 21px; }
.size-guide-content section > p { color: var(--ink-soft); font-size: 13px; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spec-grid div { padding: 11px; border-radius: 9px; background: var(--paper); }
.spec-grid span, .spec-grid strong { display: block; }
.spec-grid span { color: var(--ink-soft); font-size: 12px; }
.spec-grid strong { margin-top: 3px; font-size: 14px; }
.readable-size-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
.readable-size-table table { min-width: 680px; border-collapse: collapse; background: #fff; font-size: 13px; text-align: center; }
.readable-size-table th, .readable-size-table td { padding: 12px 9px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
.readable-size-table thead th { color: #fff; background: var(--ink); }
.readable-size-table tbody th { position: sticky; left: 0; background: var(--paper-deep); text-align: left; }
.size-guide-action {
  position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: flex;
  max-width: 760px; margin: auto; padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(24,60,58,.1); background: rgba(247,240,228,.96); backdrop-filter: blur(12px);
}

.line-guide-view { min-height: calc(100vh - 68px); padding-bottom: 92px; background: var(--paper); }
.line-guide-head { padding: 42px 20px 34px; color: #fff; background: var(--ink); text-align: center; }
.line-guide-head h1 { margin: 10px 0 9px; font-family: "Shippori Mincho", serif; font-size: 29px; line-height: 1.45; }
.line-guide-head p { max-width: 560px; margin: auto; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.8; }
.line-guide-content { max-width: 680px; margin: auto; padding: 20px 16px 30px; }
.line-notice, .line-caution { padding: 17px; border-radius: 15px; }
.line-notice { border: 1px solid #c5ddd2; background: #edf7f2; }
.line-caution { margin-top: 16px; border: 1px solid #ead6a4; background: #fff7df; }
.line-notice strong, .line-caution strong { display: block; margin-bottom: 5px; font-size: 15px; }
.line-notice p, .line-caution p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.line-steps { display: grid; gap: 11px; margin: 16px 0 0; padding: 0; list-style: none; }
.line-steps li { display: flex; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); }
.line-steps li > span {
  flex: 0 0 32px; display: grid; width: 32px; height: 32px; place-items: center;
  border-radius: 50%; color: #fff; background: #06c755; font-size: 14px; font-weight: 800;
}
.line-steps strong { display: block; padding-top: 4px; font-size: 15px; }
.line-steps p { margin: 5px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.line-guide-action {
  position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: flex;
  max-width: 680px; margin: auto; padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(24,60,58,.1); background: rgba(247,240,228,.96); backdrop-filter: blur(12px);
}

.admin-view { min-height: calc(100vh - 68px); max-width: 980px; margin: auto; padding: 32px 16px 60px; }
.admin-head { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; }
.admin-head h1 { margin: 7px 0 2px; font-size: 34px; }
.admin-head p { margin: 0; color: var(--ink-soft); font-size: 11px; }
.admin-head .secondary-button { flex: 0 0 auto; min-height: 44px; font-size: 11px; }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 27px 0 20px; }
.stat-card { padding: 15px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.stat-card span { display: block; color: var(--ink-soft); font-size: 9px; }
.stat-card strong { display: block; margin-top: 3px; font-size: 24px; }
.admin-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.admin-toolbar label { display: flex; gap: 8px; align-items: center; color: var(--ink-soft); font-size: 10px; }
.admin-toolbar select { width: auto; min-height: 38px; padding: 7px 32px 7px 10px; font-size: 10px; }
.order-list { display: grid; gap: 10px; }
.admin-order { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.admin-order-head { display: flex; align-items: center; justify-content: space-between; padding: 14px; border-bottom: 1px solid var(--line); }
.admin-order-head strong { display: block; font-size: 12px; }
.admin-order-head small { color: var(--ink-soft); font-size: 9px; }
.status-select { width: auto; min-height: 36px; padding: 6px 28px 6px 9px; border-color: transparent; color: var(--red); background: #f9e8e3; font-size: 9px; font-weight: 700; }
.admin-order-body { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; padding: 14px; }
.admin-order-body div { font-size: 10px; }
.admin-order-body span { display: block; margin-bottom: 2px; color: var(--ink-soft); font-size: 8px; }
.empty-state { padding: 48px 20px; border: 1px dashed var(--line); border-radius: 16px; color: var(--ink-soft); text-align: center; font-size: 12px; }

footer { padding: 42px 20px 55px; color: var(--paper); background: var(--ink); text-align: center; }
.footer-brand { justify-content: center; color: var(--paper); }
footer p { margin: 13px 0 0; font-family: "Shippori Mincho", serif; font-size: 11px; letter-spacing: .12em; opacity: .7; }
.toast {
  position: fixed; z-index: 100; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); left: 16px;
  max-width: 480px; margin: auto; padding: 13px 16px; border-radius: 12px; color: white; background: var(--ink);
  box-shadow: var(--shadow); font-size: 11px; text-align: center; opacity: 0; pointer-events: none; transform: translateY(12px); transition: .25s;
}
.toast.show { opacity: 1; transform: translateY(0); }

@media (min-width: 720px) {
  .site-header { padding-right: 32px; padding-left: 32px; }
  .hero { display: grid; grid-template-columns: minmax(360px, 1.15fr) minmax(320px, .85fr); column-gap: 50px; align-items: center; padding: 55px max(6vw, 40px) 65px; }
  .hero-image { grid-row: 1 / 7; grid-column: 1; margin: 0; }
  .hero > .eyebrow, .hero > h1, .hero > p, .hero-points, .hero-button { grid-column: 2; }
  .hero h1 { font-size: 62px; }
  .hero > p { font-size: 15px; }
  .hero-button { width: 300px; }
  .order-shell { padding-top: 38px; }
  .progress-wrap { top: 68px; margin-right: 0; margin-left: 0; border: 1px solid var(--line); border-radius: 14px; }
  .form-step { padding: 28px 36px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,253,248,.62); }
  .two-column { grid-template-columns: 1fr 1fr; gap: 42px; }
  .form-actions { margin-right: 0; margin-left: 0; }
  .photo-preview { grid-template-columns: repeat(5, 1fr); }
  .logo-image-grid { grid-template-columns: repeat(3, 1fr); }
  .layout-image-grid { grid-template-columns: repeat(4, 1fr); }
  .preview-shirt { width: 170px; height: 194px; }
  .shirt-preview-stage { padding: 20px 50px; }
}

@media (max-width: 430px) {
  body { font-size: 16px; }
  .section-heading p, .choice-copy small { font-size: 12px; }
  .image-plan-card { min-height: 178px; }
  .plan-image { flex-basis: 130px; height: 176px; }
  .layout-image-grid { grid-template-columns: 1fr; }
  .layout-image-card { display: grid; grid-template-columns: 48% 1fr; min-height: 128px; }
  .layout-image-card > img { height: 100%; aspect-ratio: auto; }
  .layout-image-card > span { align-self: center; padding: 14px 34px 14px 12px; }
  .quantity-price-card { grid-template-columns: 1fr; }
  .price-total { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); text-align: left; }
}