:root {
  color-scheme: light dark;
  --color-bg: #f2f2f7;
  --color-surface: #ffffff;
  --color-surface-high: #f2f2f7;
  --color-border: #c6c6c8;
  --color-text: #000000;
  --color-text-muted: #6c6c70;
  --color-text-disabled: #aeaeb2;
  --color-primary: #ff6b4a;
  --color-primary-pressed: #d94a2f;
  --color-on-primary: #221008;
  --color-metric-volume: #998ae6;
  --color-metric-time: #4dc3ff;
  --color-metric-count: #c4ff4d;
  --color-success: #32b67a;
  --color-danger: #ff3b30;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-xxl: 2rem;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --layout-screen-padding: 1.25rem;
  --layout-tab-bar-clearance: 6rem;
  --layout-row: 0.875rem;
  --layout-row-large: 1.125rem;
  --layout-field: 0.75rem;
  --layout-field-inset: 0.875rem;
  --type-display-size: 2.125rem;
  --type-display-weight: 700;
  --type-title-size: 1.5rem;
  --type-title-weight: 700;
  --type-heading-size: 1.1875rem;
  --type-heading-weight: 700;
  --type-headline-size: 1.0625rem;
  --type-headline-weight: 600;
  --type-body-size: 1.0625rem;
  --type-label-size: 0.9375rem;
  --type-caption-size: 0.875rem;
  --type-mono-size: 0.9375rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #000000;
    --color-surface: #1c1c1e;
    --color-surface-high: #2c2c2e;
    --color-border: #38383a;
    --color-text: #ffffff;
    --color-text-muted: #98989f;
    --color-text-disabled: #5a5a5f;
    --color-primary: #ff6b4a;
    --color-primary-pressed: #d94a2f;
    --color-on-primary: #221008;
    --color-metric-volume: #998ae6;
    --color-metric-time: #4dc3ff;
    --color-metric-count: #c4ff4d;
    --color-success: #32b67a;
    --color-danger: #ff453a;
  }
}

:root {
  --page: var(--color-primary);
  --on-ink: #ffffff;
  --message: #2b2b2e;
  --pressed: #2b2b2e;
  --ink: #0c0c0e;
  --cream: #fff6ef;
  --paper: #ffffff;
  --orange: #ff6b4a;
  --sky: #4dc3ff;
  --rule: #efe7df;
  --line: #e6dcd2;
  --card-edge: 0 12px 32px rgba(110, 30, 10, 0.16), 0 1px 3px rgba(110, 30, 10, 0.1);
  --lift: 0 1px 2px rgba(60, 30, 10, 0.05);
  --text-2: #48484a;
  --text-3: #6e6e73;
  --danger: #d70015;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: var(--color-bg);
    --on-ink: var(--color-bg);
    --message: var(--color-text);
    --pressed: var(--color-text-muted);
    --ink: var(--color-text);
    --cream: var(--color-surface);
    --paper: var(--color-surface-high);
    --rule: var(--color-border);
    --line: var(--color-border);
    --card-edge: 0 0 0 1px var(--color-border);
    --lift: 0 0 0 0 transparent;
    --text-2: var(--color-text-muted);
    --text-3: var(--color-text-muted);
    --danger: #ff6961;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--page); }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 500 1rem/1.5 -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Hiragino Sans", "Noto Sans KR", "Noto Sans JP", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
html:lang(ja) body { word-break: normal; line-break: strict; }
h1, h2, p { margin: 0; }
h1, h2, .message, .hint, .lead, .empty, .action-note, .alert p, .section-footer { text-wrap: balance; }
a { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1.75rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.75rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}
.card {
  width: 100%;
  max-width: 28.75rem;
  background: var(--cream);
  border-radius: 28px;
  box-shadow: var(--card-edge);
  padding: 2.25rem 1.75rem 2rem;
}
.card.wide { max-width: 31.25rem; padding: 1.5rem; }
@media (max-width: 26rem) {
  .card { padding: 1.75rem 1.25rem 1.5rem; }
  .card.wide { padding: 1.25rem; }
}

.top { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; margin-bottom: 1.5rem; }
.top h1 { font-size: 1.875rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.045em; }
.app-icon { width: 4rem; height: 4rem; border-radius: 22%; display: block; flex: none; }
.lead { color: var(--text-2); font-size: 1rem; line-height: 1.6; text-align: center; margin: -0.625rem 0 0; }

.stack > * + * { margin-top: 1rem; }
.group { background: var(--paper); border-radius: 18px; box-shadow: 0 0 0 1px var(--line), var(--lift); overflow: hidden; }
section > .group + .section-footer { margin-top: 0.375rem; }
.section-header { margin: 0 0 0.375rem 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--text-3); }
.section-footer { margin: 0.375rem 0 0 0.25rem; font-size: 0.8125rem; color: var(--text-3); }
.row { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.6875rem 1rem; font-size: 1rem; }
.row + .row, details .row, details[open] summary + .row { border-top: 1px solid var(--rule); }
.row-label { flex: 1 1 auto; min-width: 0; }
.row-value { flex: 0 1 auto; max-width: 62%; text-align: right; color: var(--text-2); }
.row-icon { flex: none; width: 1.875rem; height: 1.875rem; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #0c0c0e; }
.row-icon svg { width: 1.125rem; height: 1.125rem; display: block; stroke-width: 2; }
.row-icon.read { background: var(--sky); }
.row-icon.write { background: var(--orange); }
.row-icon ~ .row-label ~ .row-value { max-width: none; white-space: nowrap; color: var(--text-3); font-size: 0.9375rem; }
.row.has-icon { padding-top: 0.5625rem; padding-bottom: 0.5625rem; }

.head { display: flex; align-items: center; gap: 0.875rem; }
.head .app-icon { width: 3.5rem; height: 3.5rem; }
.head h1 { font-size: 1.625rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.045em; }
.head p { color: var(--text-3); font-size: 0.9375rem; margin-top: 2px; }
.head-text { min-width: 0; }
.info-card { padding: 1rem; }
.info-card h1 { font-size: 1.375rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.04em; }
.info-card p { color: var(--text-3); font-size: 0.9375rem; margin-top: 2px; }
.info-card h1 + p { margin-top: 4px; }

.link-row { color: var(--ink); text-decoration: none; }
.link-row .row-label { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.link-row small { color: var(--text-3); font-size: 0.875rem; font-weight: 600; }
.chevron { flex: none; width: 1rem; height: 1rem; color: var(--text-3); }
.center-row { justify-content: center; text-align: center; width: 100%; min-height: 3rem; background: none; border: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-decoration: none; }
.center-row.danger { color: var(--danger); font-weight: 800; }
button.center-row { appearance: none; }
.group > form { margin: 0; }

.text-button { display: inline; padding: 0; margin: 0; background: none; border: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.inline-note { margin: 0.5rem 0 0 0.25rem; font-size: 0.875rem; }
form.inline { margin: 0; }
.back { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0 0 0.875rem; font-size: 1rem; font-weight: 600; text-decoration: none; }
.back svg { width: 1rem; height: 1rem; transform: rotate(180deg); }

summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.5625rem 1rem; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary .row-label { flex: 1; }
summary .chevron { transition: transform .15s; }
details[open] summary .chevron { transform: rotate(90deg); }
details .row { flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; padding: 0.5rem 1rem; font-size: 0.9375rem; }
details .row-term { color: var(--text-3); font-size: 0.8125rem; font-weight: 800; }
details .row-def { overflow-wrap: anywhere; }
.legal-link { text-decoration: underline; text-underline-offset: 3px; display: block; margin: 0.5rem 0 0 0.25rem; font-size: 0.875rem; }

.warning { background: var(--paper); box-shadow: 0 0 0 1px var(--line); padding: 0.75rem 1rem; border-radius: 14px; font-size: 0.9375rem; line-height: 1.55; text-align: left; margin: 0 0 1rem; }
.lead + .warning { margin: 1.125rem 0 0; }
.notice { display: flex; align-items: center; gap: 0.625rem; background: var(--paper); box-shadow: 0 0 0 1px var(--line); border-radius: 14px; padding: 0.625rem 0.875rem; font-size: 0.9375rem; margin: 0 0 1rem; }
.notice svg { flex: none; width: 1.5rem; height: 1.5rem; padding: 3px; border-radius: 8px; background: #c4ff4d; stroke-width: 2.4; color: #0c0c0e; }

.sign-in { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; }
.brand-button { display: flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 3.25rem; padding: 0.625rem 1rem; border-radius: 14px; font-size: 1.0625rem; font-weight: 600; text-align: center; text-decoration: none; }
.brand-logo { width: 1.25rem; height: 1.25rem; flex: none; }
.brand-button.apple { background: #000; color: #fff; border: 1px solid #000; }
.brand-button.google { background: #fff; color: #1f1f1f; border: 1px solid #747775; }
@media (prefers-color-scheme: dark) { .brand-button.apple { background: #fff; color: #000; border-color: #fff; } }

.message { text-align: center; color: var(--message); font-size: 1.0625rem; line-height: 1.6; margin: -0.625rem 0 0; }
.hint { color: var(--text-3); text-align: center; font-size: 0.9375rem; line-height: 1.55; margin-top: 1.375rem; }
.empty { text-align: center; color: var(--text-3); padding: 1.5rem 1rem; font-size: 0.9375rem; }
.empty strong { display: block; color: var(--ink); font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.25rem; }

.alert { background: var(--paper); border-radius: 22px; box-shadow: 0 0 0 1px var(--line), var(--lift); text-align: center; overflow: hidden; }
.alert-body { padding: 1.625rem 1.25rem 1.25rem; }
.alert h1 { font-size: 1.375rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.04em; margin-bottom: 0.5rem; }
.alert p { color: var(--text-2); font-size: 0.9375rem; line-height: 1.55; }
.alert form { margin: 0; }
.alert .center-row { min-height: 3.25rem; border-top: 1px solid var(--rule); font-size: 1.0625rem; border-radius: 0; }

.error-actions { display: flex; flex-direction: column; margin-top: 1.625rem; }
.primary-button, .secondary-button { display: flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.625rem 1rem; border-radius: 14px; border: 0; font: inherit; font-size: 1.0625rem; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; }
.primary-button { background: var(--ink); color: var(--on-ink); }
.primary-button:active { background: var(--pressed); }
.secondary-button { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

.action-bar { position: sticky; bottom: 0; margin-top: 0.875rem; padding: 0.875rem 0 max(0.25rem, env(safe-area-inset-bottom)); background: var(--cream); border-top: 1px solid var(--rule); }
.action-note { text-align: center; color: var(--text-2); font-size: 0.8125rem; margin-bottom: 0.625rem; }
.actions { display: flex; gap: 0.75rem; }
.actions > * { flex: 1 1 0; }