/* hoken.2109.app — reusable UI primitives v0.1
   Naming contract: all shared components use ui-*; page-specific CSS uses auth-* or specimen-*.
   Do not style a shared component from a page file without a page-root prefix. */
.ui-logo { display:inline-flex; gap:12px; align-items:center; line-height:1.05; }
.ui-logo__symbol { width:37px; height:37px; flex:none; }
.ui-logo__name { display:block; font-family:Georgia, 'Times New Roman', serif; font-size:25px; letter-spacing:-.048em; color:var(--ui-ink); }
.ui-logo__sub { display:block; color:var(--ui-muted); letter-spacing:.085em; font-size:10px; margin-top:6px; font-weight:650; }
.ui-button { appearance:none; border:1px solid transparent; border-radius:var(--ui-radius-sm); min-height:48px; padding:12px 18px; font-size:14px; font-weight:750; line-height:1.3; display:inline-flex; justify-content:center; align-items:center; gap:10px; vertical-align:middle; transition:background var(--ui-transition), transform var(--ui-transition), border-color var(--ui-transition); }
.ui-button:hover:not(:disabled) { transform:translateY(-1px); }
.ui-button:active:not(:disabled) { transform:translateY(0); }
.ui-button--primary { background:var(--ui-accent); color:#fff; }
.ui-button--primary:hover:not(:disabled) { background:var(--ui-accent-hover); }
.ui-button--secondary { background:var(--ui-accent-tint); color:var(--ui-accent-hover); border-color:#d7e3d6; }
.ui-button--secondary:hover:not(:disabled) { background:#d5e5d4; }
.ui-button--outline { color:var(--ui-ink); background:transparent; border-color:var(--ui-edge-strong); }
.ui-button--outline:hover:not(:disabled) { background:var(--ui-surface-soft); }
.ui-button--quiet { background:transparent; color:var(--ui-accent); }
.ui-button--quiet:hover:not(:disabled) { background:var(--ui-accent-tint); }
.ui-button--danger { color:#fff; background:var(--ui-danger); }
.ui-button--danger:hover:not(:disabled) { background:#893d3c; }
.ui-button:disabled { opacity:.42; }
.ui-button--small { min-height:36px; padding:8px 13px; border-radius:10px; font-size:12px; }
.ui-button--wide { width:100%; }
.ui-button--icon { width:44px; min-height:44px; padding:0; border-radius:var(--ui-radius-sm); }
.ui-button svg { width:18px; height:18px; flex:none; }
.ui-field { display:grid; gap:7px; min-width:0; }
.ui-field__label { color:var(--ui-ink); font-size:12px; font-weight:750; }
.ui-field__required { font-size:11px; color:var(--ui-danger); margin-inline-start:5px; }
.ui-input,.ui-select,.ui-textarea { display:block; width:100%; min-width:0; border:1px solid var(--ui-edge); background:var(--ui-surface); border-radius:var(--ui-radius-sm); min-height:48px; padding:11px 14px; line-height:1.45; color:var(--ui-ink); outline:none; transition:border-color var(--ui-transition), box-shadow var(--ui-transition); }
.ui-input::placeholder,.ui-textarea::placeholder { color:#89958c; }
.ui-input:hover,.ui-select:hover,.ui-textarea:hover { border-color:var(--ui-edge-strong); }
.ui-input:focus,.ui-select:focus,.ui-textarea:focus { border-color:var(--ui-accent); box-shadow:0 0 0 3px rgba(64,92,77,.12); }
.ui-input[aria-invalid="true"] { border-color:var(--ui-danger); }
.ui-input--invalid { border-color:var(--ui-danger); }
.ui-input--invalid:focus { box-shadow:0 0 0 3px rgba(164,76,75,.12); }
.ui-field__help { margin:0; color:var(--ui-muted); font-size:11px; line-height:1.65; }
.ui-field__error { margin:0; color:var(--ui-danger); font-size:12px; }
.ui-textarea { min-height:94px; resize:vertical; }
.ui-field--inline { grid-template-columns:110px minmax(0,1fr); align-items:center; }
.ui-tablist { display:flex; gap:5px; background:var(--ui-surface-soft); border:1px solid var(--ui-edge); border-radius:var(--ui-radius-sm); padding:4px; }
.ui-tab { flex:1; min-width:0; border:0; background:transparent; color:var(--ui-muted); font-size:13px; min-height:41px; font-weight:700; border-radius:9px; }
.ui-tab[aria-selected="true"] { background:var(--ui-surface); color:var(--ui-ink); box-shadow:0 2px 7px rgba(0,0,0,.04); }
.ui-panel { border:1px solid var(--ui-edge); background:var(--ui-surface); border-radius:var(--ui-radius-lg); box-shadow:var(--ui-shadow-card); padding:24px; min-width:0; }
.ui-panel--soft { background:var(--ui-surface-soft); box-shadow:none; }
.ui-panel__title { margin:0; font-size:17px; font-weight:750; }
.ui-badge { display:inline-flex; align-items:center; width:max-content; gap:6px; min-height:25px; border-radius:var(--ui-radius-pill); font-size:11px; font-weight:750; padding:3px 10px; background:var(--ui-accent-tint); color:var(--ui-accent); }
.ui-badge--warning { background:var(--ui-warning-bg); color:var(--ui-warning); }
.ui-badge--danger { background:var(--ui-danger-bg); color:var(--ui-danger); }
.ui-badge--success { background:var(--ui-success-bg); color:var(--ui-success); }
.ui-badge--muted { background:var(--ui-surface-soft); color:var(--ui-muted); }
.ui-notice { display:flex; align-items:flex-start; gap:12px; border-radius:var(--ui-radius-sm); border:1px solid var(--ui-edge); background:var(--ui-surface-soft); padding:13px 15px; color:var(--ui-ink-mid); font-size:12px; line-height:1.7; }
.ui-notice svg { width:18px; height:18px; flex:none; margin-top:1px; }
.ui-notice--info { background:var(--ui-info-bg); border-color:#d7e4e7; }
.ui-notice--warning { background:var(--ui-warning-bg); border-color:#eee1bf; }
.ui-notice--danger { background:var(--ui-danger-bg); border-color:#ecd3d1; }
.ui-divider { width:100%; border:0; border-top:1px solid var(--ui-edge); margin:0; }
.ui-link { color:var(--ui-accent); text-underline-offset:3px; text-decoration:underline; font-weight:700; }
.ui-link:hover { color:var(--ui-accent-hover); }
.ui-check { display:flex; align-items:flex-start; gap:9px; font-size:12px; line-height:1.6; cursor:pointer; }
.ui-check input { width:16px; height:16px; accent-color:var(--ui-accent); margin:3px 0 0; }
.ui-check span { min-width:0; }
.ui-steps { padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(var(--ui-steps-count,3), minmax(0,1fr)); gap:0; }
.ui-steps__item { min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color:var(--ui-muted); font-size:11px; font-weight:650; }
.ui-steps__item::after { content:''; width:calc(100% - 38px); height:2px; background:var(--ui-edge); position:absolute; left:calc(50% + 19px); top:16px; }
.ui-steps__item:last-child::after { display:none; }
.ui-steps__circle { position:relative; z-index:1; width:34px; height:34px; border:2px solid var(--ui-edge-strong); background:var(--ui-surface); border-radius:50%; display:grid; place-items:center; font-weight:800; color:var(--ui-muted); }
.ui-steps__item[data-step="complete"] .ui-steps__circle { color:var(--ui-surface); background:var(--ui-accent); border-color:var(--ui-accent); }
.ui-steps__item[data-step="current"] .ui-steps__circle { color:var(--ui-accent); background:var(--ui-accent-tint); border-color:var(--ui-accent); }
.ui-steps__item[data-step="complete"]::after { background:var(--ui-accent); }
.ui-data-table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.ui-data-table th { color:var(--ui-muted); font-weight:700; border-bottom:1px solid var(--ui-edge); padding:12px 10px; background:var(--ui-surface-soft); }
.ui-data-table td { border-bottom:1px solid var(--ui-edge); padding:13px 10px; }
.ui-table-scroller { overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; }
.ui-empty { text-align:center; padding:30px 12px; color:var(--ui-muted); display:grid; justify-items:center; gap:9px; }
.ui-empty__icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--ui-sage); color:var(--ui-accent); }
.ui-empty__title { color:var(--ui-ink); font-weight:750; font-size:14px; margin:0; }
.ui-empty__desc { font-size:12px; margin:0; }
.ui-swatch { width:100%; height:74px; border:1px solid rgba(39,54,44,.07); border-radius:var(--ui-radius-sm); }
.ui-toast { position:fixed; inset:auto 20px 20px auto; z-index:50; max-width:min(360px,calc(100vw - 40px)); background:var(--ui-ink); color:#fff; border-radius:var(--ui-radius-sm); box-shadow:var(--ui-shadow-lift); padding:13px 18px; font-size:13px; }
.ui-dialog::backdrop { background:rgba(26,39,32,.35); backdrop-filter:blur(3px); }
.ui-dialog { border:1px solid var(--ui-edge); border-radius:var(--ui-radius-lg); background:var(--ui-surface); box-shadow:var(--ui-shadow-lift); padding:28px; width:min(420px,calc(100vw - 32px)); color:var(--ui-ink); }
.ui-dialog__top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.ui-dialog h2 { font-size:19px; margin:0; }
.ui-dialog p { color:var(--ui-ink-mid); font-size:13px; }
@media (max-width:679px) {
  .ui-panel { padding:18px; border-radius:19px; }
  .ui-field--inline { grid-template-columns:1fr; }
  .ui-data-table { font-size:12px; }
  .ui-tab { font-size:12px; }
}