/* Hallmark · genre: editorial · macrostructure: form workbench · design-system: design.md · designed-as-app */
@media (forced-colors: none) {
  body .v2-operation-layer .v2-operation-card { background: var(--color-paper); border-radius: 16px 16px 0 0; border: 0; padding-inline: 24px; }
  body .v2-operation-layer .v2-operation-card header { text-align: left; padding: 0; }
  body .v2-operation-layer .v2-operation-card h2 { font: 30px/1.35 var(--font-display); margin-block: 12px; }
  body .v2-operation-layer .v2-operation-card header p { font: 14px/1.75 var(--font-ui); }
  body .v2-operation-layer .v2-paper-seal { margin: 0; width: 32px; height: 40px; font-size: 22px; border-radius: 3px; }
  body .v2-operation-layer .v2-operation-card input:not([type="checkbox"]), body .v2-operation-layer .v2-operation-card select { border-radius: 4px; border: 1px solid var(--color-rule); background: var(--color-surface); min-height: 48px; }
  body .v2-operation-layer .v2-operation-primary { border-radius: 4px; background: var(--color-accent); color: var(--color-accent-ink); }
  body .v2-operation-layer .v2-consents { border-radius: 4px; background: var(--color-paper-2); }
  body .v2-operation-layer .v2-operation-card :is(button,input,select):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
}
@media (forced-colors: none) {
  .v2-operation-layer .v2-operation-card { border-radius: 18px 18px 9px 9px; background: var(--color-surface); box-shadow: 0 14px 48px var(--color-shadow-soft); }
  .v2-operation-layer .v2-operation-card::after { border: 0; }
  .v2-operation-layer .v2-operation-card header { padding-inline: 12px; }
  .v2-operation-layer .v2-operation-card h2 { font-family: var(--font-display); font-size: 26px; font-weight: 400; }
  .v2-operation-layer .v2-operation-card header p { font: 14px/1.75 var(--font-ui); margin-bottom: 20px; }
  .v2-operation-layer .v2-paper-seal { width: 42px; height: 42px; border-radius: 9px 9px 3px 9px; background: var(--color-accent); box-shadow: none; }
  .v2-operation-layer .v2-operation-card form { font-family: var(--font-ui); }
  .v2-operation-layer .v2-operation-card input:not([type="checkbox"]),
  .v2-operation-layer .v2-operation-card select { border-radius: 7px; font-size: 16px; background: var(--color-surface); }
  .v2-operation-layer .v2-operation-card label > span { font-size: 14px; font-weight: 500; }
  .v2-operation-layer .v2-operation-primary { min-height: 48px; border-radius: 8px; font-size: 14px; box-shadow: none; }
  .v2-operation-layer .v2-operation-switch { font-size: 14px; font-weight: 400; }
  .v2-operation-layer .v2-quiet-button { font-size: 14px; border-radius: 7px; }
  .v2-operation-layer .v2-field-note { font-size: 14px; }
  .v2-operation-layer .v2-consents { padding: 12px; border-radius: 8px; }
  .v2-operation-layer .v2-consents label > span { font-size: 14px; line-height: 1.7; }
  .v2-operation-layer .v2-consents p { font-size: 14px; }
  body .v2-global-toast { border-radius: 10px; font: 14px/1.6 var(--font-ui); overflow-wrap: anywhere; }
  @media (max-width: 480px) {
    .v2-operation-layer .v2-operation-card { border-radius: 18px 18px 0 0; padding-top: 24px; }
  }
}

:root {
  color-scheme: light;
  --v2-layer-ink: #233129;
  --v2-layer-muted: #667168;
  --v2-layer-paper: #f7f0e2;
  --v2-layer-pine: #263f34;
  --v2-layer-cinnabar: #9d3f32;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; color: var(--v2-layer-ink); background: #e9eadf; font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif; }
button, input, select { font: inherit; }
button { min-height: 44px; }
[hidden] { display: none !important; }

.v2-boot {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 28px;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, rgba(255, 251, 238, .96), transparent 34%), linear-gradient(160deg, #f3ecdd, #dfe8dd);
}
.v2-boot img { width: 64px; height: 64px; margin-bottom: 18px; border-radius: 18px; box-shadow: 0 16px 36px rgba(34, 49, 41, .16); }
.v2-boot small, .v2-operation-card header small, .v2-service-layer small { color: var(--v2-layer-cinnabar); font-size: .72rem; font-weight: 700; letter-spacing: .2em; }
.v2-boot h1 { margin: 10px 0 8px; font-size: clamp(1.65rem, 7vw, 2.2rem); }
.v2-boot p { max-width: 30rem; margin: 0; color: var(--v2-layer-muted); line-height: 1.8; }
.v2-boot-skip {
  min-width: 88px;
  min-height: 44px;
  margin-top: 24px;
  border: 1px solid rgba(35, 49, 41, .22);
  border-radius: 999px;
  padding: 0 20px;
  color: var(--v2-layer-ink);
  background: rgba(255, 250, 239, .58);
  box-shadow: 0 8px 22px rgba(35, 49, 41, .09);
}
.v2-boot-skip:focus-visible { outline: 2px solid var(--v2-layer-cinnabar); outline-offset: 3px; }
.v2-boot-skip:disabled { opacity: .58; cursor: wait; }

.v2-operation-layer, .v2-service-layer {
  position: fixed;
  z-index: 120;
  inset: var(--v2-operation-viewport-offset-top, 0px) 0 auto;
  height: var(--v2-operation-viewport-height, 100dvh);
  display: grid;
  place-items: center;
  overflow: auto;
  padding: max(22px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
  background: rgba(19, 31, 25, .68);
  backdrop-filter: blur(11px);
}
.v2-operation-card, .v2-service-layer > div {
  position: relative;
  width: min(100%, 460px);
  padding: 30px clamp(20px, 6vw, 34px) 26px;
  border: 1px solid rgba(137, 102, 59, .3);
  border-radius: 28px 28px 20px 20px;
  background: linear-gradient(90deg, transparent 0 7%, rgba(118, 90, 52, .055) 7% 7.4%, transparent 7.4%), var(--v2-layer-paper);
  box-shadow: 0 28px 90px rgba(15, 24, 20, .35);
}
.v2-operation-card::after, .v2-service-layer > div::after { position: absolute; inset: 10px; border: 1px solid rgba(137, 102, 59, .13); border-radius: 20px 20px 14px 14px; content: ""; pointer-events: none; }
.v2-operation-card header, .v2-service-layer > div { text-align: center; }
.v2-paper-seal { display: grid; width: 50px; height: 50px; place-items: center; margin: 0 auto 14px; border-radius: 16px 16px 12px 12px; color: #fff8ea; background: var(--v2-layer-cinnabar); box-shadow: 0 9px 20px rgba(157, 63, 50, .2); }
.v2-operation-card h2, .v2-service-layer h2 { margin: 8px 0; font-size: clamp(1.45rem, 6vw, 2rem); }
.v2-operation-card header p, .v2-service-layer p { margin: 0 0 20px; color: var(--v2-layer-muted); line-height: 1.75; }
.v2-layer-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 44px; border: 0; color: var(--v2-layer-muted); background: transparent; font-size: 1.65rem; }

.v2-operation-card form, .v2-phone-fields { display: grid; gap: 14px; text-align: left; }
.v2-operation-card label { display: grid; gap: 7px; }
.v2-operation-card label > span { color: #4a574e; font-size: .84rem; font-weight: 700; }
.v2-operation-card label > small { color: var(--v2-layer-muted); font-size: .74rem; line-height: 1.55; }
.v2-operation-card input:not([type="checkbox"]), .v2-operation-card select { width: 100%; min-height: 48px; border: 1px solid rgba(61, 78, 65, .26); border-radius: 12px; padding: 0 13px; color: var(--v2-layer-ink); background: rgba(255, 253, 246, .76); outline: 0; }
.v2-operation-card input:focus-visible, .v2-operation-card select:focus-visible, .v2-operation-card button:focus-visible, .v2-service-layer button:focus-visible { outline: 3px solid rgba(157, 63, 50, .24); outline-offset: 2px; }
.v2-code-line { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }
.v2-quiet-button, .v2-operation-switch { border: 0; color: var(--v2-layer-pine); background: transparent; font-weight: 700; }
.v2-quiet-button { border: 1px solid rgba(38, 63, 52, .22); border-radius: 12px; padding: 0 12px; background: rgba(255, 255, 255, .34); }
.v2-field-note, .v2-consents p, .v2-permission-copy p { margin: -4px 0 0; color: var(--v2-layer-muted); font-size: .78rem; line-height: 1.65; }
.v2-permission-copy { display: grid; gap: 13px; padding: 14px; border: 1px solid rgba(137, 102, 59, .18); border-radius: 14px; background: rgba(255, 250, 239, .44); }
.v2-permission-copy .v2-station-status { margin: 0; color: var(--v2-layer-pine); font-weight: 700; }
.v2-arrival-notice { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid rgba(137, 102, 59, .18); }
.v2-arrival-notice .v2-quiet-button { min-height: 42px; justify-self: start; }
.v2-arrival-notice small { color: var(--v2-layer-muted); line-height: 1.55; }
.v2-consents { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(137, 102, 59, .18); border-radius: 14px; background: rgba(255, 250, 239, .44); }
.v2-consents label { display: flex; align-items: flex-start; gap: 9px; line-height: 1.55; }
.v2-consents input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--v2-layer-cinnabar); }
.v2-consents a { color: var(--v2-layer-cinnabar); }
.v2-operation-primary { width: 100%; border: 0; border-radius: 14px 14px 11px 11px; padding: 0 18px; color: #fffaf0; background: var(--v2-layer-pine); box-shadow: 0 10px 24px rgba(38, 63, 52, .18); font-weight: 700; letter-spacing: .05em; }
.v2-operation-primary:disabled, .v2-quiet-button:disabled { opacity: .56; cursor: wait; }
.v2-account-card[data-operation="delete"] .v2-operation-primary { background: var(--v2-layer-cinnabar); }
.v2-global-toast { position: fixed; z-index: 160; left: 50%; bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px)); width: min(calc(100% - 36px), 420px); transform: translateX(-50%); border: 1px solid rgba(255, 245, 222, .22); border-radius: 14px; padding: 13px 16px; color: #fff8e9; background: rgba(26, 44, 35, .94); box-shadow: 0 18px 48px rgba(15, 24, 20, .28); text-align: center; line-height: 1.55; }

@media (max-width: 480px) {
  .v2-operation-layer, .v2-service-layer { align-items: end; overflow: hidden; padding: 0; }
  .v2-operation-card, .v2-service-layer > div {
    max-height: calc(var(--v2-operation-viewport-height, 100dvh) - max(18px, env(safe-area-inset-top)));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 18px;
    border-radius: 28px 28px 0 0;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .v2-boot img { animation: v2-breathe 1.8s ease-in-out infinite; }
  .v2-operation-card { animation: v2-layer-rise 220ms ease-out both; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-boot, .v2-boot * { animation: none !important; transition: none !important; }
}
@keyframes v2-breathe { 50% { transform: translateY(-4px); } }
@keyframes v2-layer-rise { from { opacity: 0; transform: translateY(14px); } }