@etamong-playground/ui 0.34.2

package/dist/styles.css

@@ -0,0 +1,2312 @@
+/*
+ * @etamong-lab/ui — command-palette + notification styles + namespaced tokens.
+ *
+ * Import once at the app root: `import "@etamong-lab/ui/styles.css"`.
+ *
+ * Components are styled from `--etu-*` tokens (deliberately NAMESPACED so this
+ * file is safe to import into any app — including shadcn/Tailwind apps that
+ * already own `--accent`/`--border`/`--ring`). Defaults below match the etamong
+ * look; an app theming to its own palette overrides just a few, e.g.
+ *   :root { --etu-accent: var(--primary); --etu-surface: var(--popover); }
+ *
+ * Dark mode triggers on EITHER `[data-theme="dark"]` (Vite-family convention)
+ * or the `.dark` class (Next/shadcn convention).
+ */
+
+/* ----------------------------------------------------------------------------
+ * iOS PWA safety reset (v0.22.0). Locks against the standalone-mode quirks
+ * where Korean (and other CJK) body text shrinks because iOS's auto text-size
+ * adjust kicks in without the Safari toolbar; also resets tap-highlight + sets
+ * a sane default body font-size + color-scheme. Safe-area padding is NOT
+ * painted on `body` here on purpose — apps already manage insets on fixed
+ * bars (MobileTabBar, top headers). Apps that need a single-place safe-area
+ * wrapper can use the `.etu-app-shell` utility class below.
+ * See planning wiki: concepts/pwa-cache-and-ios-shell + concepts/ios-pwa-safe-area.
+ * ------------------------------------------------------------------------- */
+:root { color-scheme: light dark; }
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+body {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/* iOS form-control auto-zoom-on-focus guard. */
+input, select, textarea { font-size: max(16px, 1rem); }
+
+/* Opt-in shell wrapper for apps that want a single-place safe-area inset
+ * container. Apps with bespoke chrome (existing fixed headers + MobileTabBar)
+ * should keep their per-bar `env(safe-area-inset-*)` rules and not bother
+ * with this class. */
+.etu-app-shell {
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+.etu-app-shell.etu-no-safe-padding,
+body.etu-no-safe-padding { padding: 0; }
+
+:root {
+  --etu-bg: #ffffff;
+  --etu-surface: #ffffff;
+  --etu-surface-2: #eef0f3;
+  --etu-border: #e3e6ea;
+  --etu-text: #1a1d21;
+  --etu-text-muted: #5c636e;
+  --etu-text-subtle: #8b929c;
+  --etu-accent: #5b8cff;
+  --etu-accent-soft: #eef1f6;
+  --etu-on-accent: #ffffff;
+  --etu-ok: #2faf6b;
+  --etu-err: #e5484d;
+  --etu-r: 12px;
+  --etu-r-sm: 8px;
+  --etu-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", "Noto Sans KR", sans-serif;
+  --etu-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --etu-shadow: 0 16px 40px rgba(16, 19, 26, 0.14);
+}
+
+:root[data-theme="dark"],
+.dark {
+  --etu-bg: #0f1115;
+  --etu-surface: #181b22;
+  --etu-surface-2: #1f232c;
+  --etu-border: #262b35;
+  --etu-text: #e6e8ec;
+  --etu-text-muted: #98a1ad;
+  --etu-text-subtle: #6b7480;
+  --etu-accent: #5b8cff;
+  --etu-accent-soft: #232838;
+  --etu-on-accent: #0b0e13;
+  --etu-ok: #34d399;
+  --etu-err: #ff6b6b;
+  --etu-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
+}
+
+/* ----------------------------------------------------------------------------
+ * Command palette (CommandPalette). cmdk emits the [cmdk-*] attributes.
+ * ------------------------------------------------------------------------- */
+
+.etu-cmdk-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.etu-cmdk-content {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 20vh;
+}
+
+.etu-cmdk {
+  width: 100%;
+  max-width: 32rem;
+  overflow: hidden;
+  border-radius: var(--etu-r);
+  border: 1px solid var(--etu-border);
+  background: var(--etu-surface);
+  box-shadow: var(--etu-shadow);
+  font-family: var(--etu-font);
+}
+
+.etu-cmdk-input {
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid var(--etu-border);
+  background: transparent;
+  padding: 0.85rem 1rem;
+  font-size: 0.9rem;
+  color: var(--etu-text);
+  outline: none;
+}
+
+.etu-cmdk-input::placeholder {
+  color: var(--etu-text-subtle);
+}
+
+.etu-cmdk-list {
+  max-height: 18rem;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.etu-cmdk-empty {
+  padding: 1.5rem 0;
+  text-align: center;
+  font-size: 0.85rem;
+  color: var(--etu-text-muted);
+}
+
+.etu-cmdk [cmdk-group-heading] {
+  padding: 0.5rem 0.5rem 0.35rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--etu-text-subtle);
+}
+
+.etu-cmdk-item {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  border-radius: var(--etu-r-sm);
+  padding: 0.5rem 0.5rem;
+  font-size: 0.875rem;
+  color: var(--etu-text);
+  cursor: pointer;
+}
+
+.etu-cmdk-item[data-selected="true"] {
+  background: var(--etu-accent-soft);
+}
+
+.etu-cmdk-search [cmdk-group-heading] {
+  margin-top: 0.25rem;
+  border-top: 1px solid var(--etu-border);
+  padding-top: 0.6rem;
+}
+
+.etu-cmdk-item-search {
+  color: var(--etu-text-muted);
+}
+
+.etu-cmdk-item-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--etu-text-subtle);
+}
+
+.etu-cmdk-item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.etu-cmdk-item-sub {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  color: var(--etu-text-subtle);
+}
+
+.etu-cmdk-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  border-top: 1px solid var(--etu-border);
+  padding: 0.45rem 1rem;
+  color: var(--etu-text-subtle);
+}
+
+.etu-cmdk-kbd {
+  border-radius: 4px;
+  background: var(--etu-surface-2);
+  padding: 0.1rem 0.35rem;
+  font-family: var(--etu-mono);
+  font-size: 0.65rem;
+  line-height: 1.4;
+}
+
+/* ----------------------------------------------------------------------------
+ * Command palette trigger (CommandPaletteTrigger) — a search-box that opens it.
+ * ------------------------------------------------------------------------- */
+
+.etu-palette-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  border-radius: var(--etu-r-sm);
+  border: 1px solid var(--etu-border);
+  background: var(--etu-surface-2);
+  color: var(--etu-text-subtle);
+  font-family: var(--etu-font);
+  font-size: 0.8rem;
+  padding: 0.4rem 0.6rem;
+  cursor: pointer;
+  transition: background 140ms ease;
+}
+
+.etu-palette-trigger:hover {
+  background: var(--etu-accent-soft);
+}
+
+.etu-palette-trigger-icon {
+  flex-shrink: 0;
+}
+
+.etu-palette-trigger-label {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.etu-palette-trigger-kbd {
+  flex-shrink: 0;
+  font-family: var(--etu-mono);
+  font-size: 0.62rem;
+  opacity: 0.85;
+}
+
+/* ----------------------------------------------------------------------------
+ * Toast (toast() / <Toaster/>)
+ * ------------------------------------------------------------------------- */
+
+.etu-toaster {
+  position: fixed;
+  left: 50%;
+  bottom: 1.5rem;
+  transform: translateX(-50%);
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+  pointer-events: none;
+  padding: 0 1rem;
+  max-width: 100%;
+}
+
+.etu-toast {
+  pointer-events: auto;
+  cursor: pointer;
+  max-width: 32rem;
+  border-radius: var(--etu-r-sm);
+  border: 1px solid var(--etu-border);
+  border-left: 3px solid var(--etu-text-subtle);
+  background: var(--etu-surface);
+  box-shadow: var(--etu-shadow);
+  color: var(--etu-text);
+  font-family: var(--etu-font);
+  font-size: 0.85rem;
+  padding: 0.6rem 0.9rem;
+  animation: etu-toast-in 160ms ease-out;
+}
+
+.etu-toast-ok {
+  border-left-color: var(--etu-ok);
+}
+.etu-toast-err {
+  border-left-color: var(--etu-err);
+}
+.etu-toast-info {
+  border-left-color: var(--etu-accent);
+}
+
+@keyframes etu-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ----------------------------------------------------------------------------
+ * Dialog (DialogHost / uiConfirm / uiPrompt)
+ * ------------------------------------------------------------------------- */
+
+.etu-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.etu-dialog {
+  width: 100%;
+  max-width: 26rem;
+  border-radius: var(--etu-r);
+  border: 1px solid var(--etu-border);
+  background: var(--etu-surface);
+  box-shadow: var(--etu-shadow);
+  color: var(--etu-text);
+  font-family: var(--etu-font);
+  padding: 1.25rem;
+}
+
+.etu-dialog-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.etu-dialog-body {
+  font-size: 0.875rem;
+  color: var(--etu-text-muted);
+  margin-bottom: 0.9rem;
+  white-space: pre-wrap;
+}
+
+.etu-dialog-input {
+  width: 100%;
+  border-radius: var(--etu-r-sm);
+  border: 1px solid var(--etu-border);
+  background: var(--etu-bg);
+  color: var(--etu-text);
+  padding: 0.55rem 0.7rem;
+  font-size: 0.875rem;
+  font-family: var(--etu-font);
+  margin-bottom: 0.9rem;
+  outline: none;
+}
+
+.etu-dialog-input:focus {
+  border-color: var(--etu-accent);
+}
+
+.etu-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.etu-dialog-btn {
+  border-radius: var(--etu-r-sm);
+  border: 1px solid var(--etu-border);
+  background: var(--etu-surface-2);
+  color: var(--etu-text);
+  font-family: var(--etu-font);
+  font-size: 0.85rem;
+  padding: 0.45rem 0.9rem;
+  cursor: pointer;
+}
+
+.etu-dialog-btn-primary {
+  background: var(--etu-accent);
+  border-color: var(--etu-accent);
+  color: var(--etu-on-accent);
+}
+
+.etu-dialog-btn-danger {
+  background: var(--etu-err);
+  border-color: var(--etu-err);
+  color: #ffffff;
+}
+
+/* ----------------------------------------------------------------------------
+ * DeployInfo (<DeployInfo version builtAt />)
+ * ------------------------------------------------------------------------- */
+
+.etu-deploy-info {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-family: var(--etu-font);
+  font-size: 0.72rem;
+  line-height: 1.2;
+  color: var(--etu-text-subtle);
+  white-space: nowrap;
+}
+
+.etu-deploy-info-label {
+  text-transform: lowercase;
+  letter-spacing: 0.01em;
+}
+
+.etu-deploy-info-ver {
+  font-family: var(--etu-mono);
+  font-size: 0.72rem;
+  color: var(--etu-text-muted);
+  text-decoration: none;
+}
+
+a.etu-deploy-info-ver:hover {
+  color: var(--etu-accent);
+  text-decoration: underline;
+}
+
+.etu-deploy-info-time {
+  color: var(--etu-text-subtle);
+}
+
+/* ----------------------------------------------------------------------------
+ * InstallBanner (<InstallBanner />)
+ * Mobile-only PWA install affordance. Hidden on >= 768px.
+ * ------------------------------------------------------------------------- */
+
+.etu-install-banner {
+  position: fixed;
+  left: 0.75rem;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.65rem 0.75rem;
+  border-radius: var(--etu-r);
+  border: 1px solid var(--etu-border);
+  background: var(--etu-surface);
+  box-shadow: var(--etu-shadow);
+  font-family: var(--etu-font);
+  font-size: 0.85rem;
+  color: var(--etu-text);
+}
+
+@media (min-width: 768px) {
+  .etu-install-banner {
+    display: none;
+  }
+}
+
+/* When the same app also renders <MobileTabBar>, lift the banner above it so
+ * it doesn't sit on top of the tab bar. Apps can override
+ * --etu-mobile-tab-bar-h if their bar uses non-default icon/label sizing. */
+body:has(.etu-mobile-tab-bar) .etu-install-banner {
+  bottom: calc(0.75rem + var(--etu-mobile-tab-bar-h, 56px) + env(safe-area-inset-bottom));
+}
+
+.etu-install-banner-icon {
+  flex-shrink: 0;
+  color: var(--etu-accent);
+  display: inline-flex;
+}
+
+.etu-install-banner-body {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 0.78rem;
+  color: var(--etu-text-muted);
+  line-height: 1.3;
+}
+
+.etu-install-banner-cta {
+  flex-shrink: 0;
+  border: none;
+  border-radius: var(--etu-r-sm);
+  background: var(--etu-accent);
+  color: var(--etu-on-accent);
+  font-family: var(--etu-font);
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 0.4rem 0.75rem;
+  cursor: pointer;
+}
+
+.etu-install-banner-cta:hover {
+  filter: brightness(1.08);
+}
+
+.etu-install-banner-close {
+  flex-shrink: 0;
+  border: none;
+  background: transparent;
+  color: var(--etu-text-subtle);
+  border-radius: var(--etu-r-sm);
+  padding: 0.25rem;
+  cursor: pointer;
+  display: inline-flex;
+}
+
+.etu-install-banner-close:hover {
+  background: var(--etu-surface-2);
+  color: var(--etu-text);
+}
+
+/* ----------------------------------------------------------------------------
+ * ErrorPage (<ErrorPage />)
+ * Full-page friendly error surface for boundary / 500 / not-found routes.
+ * Pairs with the httperr `ref` pattern (no raw error / repo links leak).
+ * ------------------------------------------------------------------------- */
+
+.etu-error-page {
+  min-height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: var(--etu-bg);
+  color: var(--etu-text);
+  font-family: var(--etu-font);
+}
+
+.etu-error-page-card {
+  max-width: 32rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 2rem 1.5rem;
+  border-radius: var(--etu-r);
+  border: 1px solid var(--etu-border);
+  background: var(--etu-surface);
+  box-shadow: var(--etu-shadow);
+}
+
+.etu-error-page-icon {
+  color: var(--etu-err);
+  margin-bottom: 0.85rem;
+  display: inline-flex;
+}
+
+.etu-error-page-title {
+  margin: 0 0 0.5rem;
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: var(--etu-text);
+}
+
+.etu-error-page-body {
+  margin: 0 0 1.25rem;
+  font-size: 0.92rem;
+  line-height: 1.5;
+  color: var(--etu-text-muted);
+}
+
+.etu-error-page-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.etu-error-page-cta {
+  border: none;
+  border-radius: var(--etu-r-sm);
+  background: var(--etu-accent);
+  color: var(--etu-on-accent);
+  font-family: var(--etu-font);
+  font-size: 0.88rem;
+  font-weight: 600;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.etu-error-page-cta:hover {
+  filter: brightness(1.08);
+}
+
+.etu-error-page-secondary {
+  border: 1px solid var(--etu-border);
+  border-radius: var(--etu-r-sm);
+  background: transparent;
+  color: var(--etu-text);
+  font-family: var(--etu-font);
+  font-size: 0.88rem;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.etu-error-page-secondary:hover {
+  background: var(--etu-surface-2);
+}
+
+.etu-error-page-ref {
+  margin: 0;
+  font-size: 0.78rem;
+  color: var(--etu-text-subtle);
+}
+
+.etu-error-page-ref-label {
+  text-transform: lowercase;
+  letter-spacing: 0.01em;
+}
+
+.etu-error-page-ref-code {
+  font-family: var(--etu-mono);
+  font-size: 0.78rem;
+  color: var(--etu-text-muted);
+  background: var(--etu-surface-2);
+  border-radius: 0.25rem;
+  padding: 0.1rem 0.35rem;
+  user-select: all;
+}
+
+/* BackButton — small ghost button with chevron + label. Sits left of a
+   page heading or above a detail view. */
+.etu-back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.3rem 0.55rem 0.3rem 0.4rem;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  color: var(--etu-text-muted);
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
+}
+
+.etu-back-button:hover {
+  background: var(--etu-surface-2);
+  color: var(--etu-text);
+  border-color: var(--etu-border);
+}
+
+.etu-back-button:focus-visible {
+  outline: 2px solid var(--etu-accent);
+  outline-offset: 2px;
+}
+
+.etu-back-button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.etu-back-button-label {
+  line-height: 1;
+}
+
+/* EmptyState — centered card for "nothing here yet" views. */
+.etu-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  padding: 3rem 1.5rem;
+  text-align: center;
+  color: var(--etu-text-muted);
+  border: 1px dashed var(--etu-border);
+  border-radius: 0.75rem;
+  background: var(--etu-surface);
+}
+
+.etu-empty-state--compact {
+  padding: 1.4rem 1rem;
+  gap: 0.4rem;
+}
+
+.etu-empty-state-icon {
+  color: var(--etu-text-subtle);
+  margin-bottom: 0.25rem;
+}
+
+.etu-empty-state-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--etu-text);
+}
+
+.etu-empty-state--compact .etu-empty-state-title {
+  font-size: 0.9rem;
+}
+
+.etu-empty-state-body {
+  font-size: 0.85rem;
+  max-width: 28rem;
+  line-height: 1.45;
+}
+
+.etu-empty-state-actions {
+  margin-top: 0.6rem;
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+/* CopyButton — compact ghost button with copy / check icon. */
+.etu-copy-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.25rem 0.5rem;
+  background: transparent;
+  border: 1px solid var(--etu-border);
+  border-radius: 0.4rem;
+  color: var(--etu-text-muted);
+  font: inherit;
+  font-size: 0.78rem;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
+}
+
+.etu-copy-button:hover {
+  background: var(--etu-surface-2);
+  color: var(--etu-text);
+}
+
+.etu-copy-button:focus-visible {
+  outline: 2px solid var(--etu-accent);
+  outline-offset: 2px;
+}
+
+.etu-copy-button--copied {
+  color: var(--etu-ok, var(--etu-accent));
+  border-color: var(--etu-ok, var(--etu-accent));
+}
+
+.etu-copy-button--icon-only {
+  padding: 0.25rem;
+}
+
+.etu-copy-button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.etu-copy-button-label {
+  line-height: 1;
+}
+
+.etu-open-in-browser-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.4rem;
+  font: inherit;
+  font-size: 0.78rem;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
+}
+
+.etu-open-in-browser-button--ghost {
+  background: transparent;
+  border: 1px solid var(--etu-border);
+  color: var(--etu-text-muted);
+}
+
+.etu-open-in-browser-button--ghost:hover {
+  background: var(--etu-surface-2);
+  color: var(--etu-text);
+}
+
+.etu-open-in-browser-button--primary {
+  background: var(--etu-accent);
+  border: 1px solid var(--etu-accent);
+  color: var(--etu-accent-on, #fff);
+}
+
+.etu-open-in-browser-button--primary:hover {
+  filter: brightness(1.05);
+}
+
+.etu-open-in-browser-button:focus-visible {
+  outline: 2px solid var(--etu-accent);
+  outline-offset: 2px;
+}
+
+.etu-open-in-browser-button--icon-only {
+  padding: 0.25rem;
+}
+
+.etu-open-in-browser-button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.etu-open-in-browser-button-label {
+  line-height: 1;
+}
+
+/* Backoffice scaffold — gate + badge + page-head layout. */
+.etu-admin-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.15rem 0.45rem;
+  border: 1px solid var(--etu-border);
+  border-radius: 999px;
+  background: var(--etu-surface-2);
+  color: var(--etu-text-muted);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  vertical-align: middle;
+  line-height: 1.2;
+}
+
+.etu-backoffice {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.etu-backoffice-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.etu-backoffice-head-text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.etu-backoffice-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--etu-text);
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.etu-backoffice-description {
+  margin: 0.35rem 0 0;
+  color: var(--etu-text-muted);
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+.etu-backoffice-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.etu-backoffice-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* AppInfoSection — canonical "앱 정보" card. */
+.etu-app-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.etu-app-info-heading {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--etu-text);
+  margin: 0;
+}
+
+.etu-app-info-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.1rem 1.2rem;
+  background: var(--etu-surface);
+  border: 1px solid var(--etu-border);
+  border-radius: 0.75rem;
+}
+
+.etu-app-info-identity {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+}
+
+.etu-app-info-icon {
+  width: 2.4rem;
+  height: 2.4rem;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  background: var(--etu-surface-2);
+  color: var(--etu-text-muted);
+  font-size: 1.4rem;
+  overflow: hidden;
+}
+
+.etu-app-info-icon img,
+.etu-app-info-icon svg {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.etu-app-info-name {
+  font-size: 1.02rem;
+  font-weight: 600;
+  color: var(--etu-text);
+}
+
+.etu-app-info-description {
+  margin-top: 0.15rem;
+  font-size: 0.82rem;
+  color: var(--etu-text-muted);
+}
+
+.etu-app-info-meta {
+  margin: 0;
+  display: grid;
+  gap: 0.5rem;
+}
+
+.etu-app-info-row {
+  display: grid;
+  grid-template-columns: 5.5rem 1fr;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 0.85rem;
+}
+
+.etu-app-info-row dt {
+  color: var(--etu-text-muted);
+  font-weight: 500;
+  margin: 0;
+}
+
+.etu-app-info-row dd {
+  margin: 0;
+  color: var(--etu-text);
+  min-width: 0;
+}
+
+.etu-app-info-links {
+  display: flex;
+  gap: 0.85rem;
+  flex-wrap: wrap;
+  padding-top: 0.55rem;
+  border-top: 1px solid var(--etu-border);
+  font-size: 0.82rem;
+}
+
+.etu-app-info-link {
+  color: var(--etu-text-muted);
+  text-decoration: none;
+}
+
+.etu-app-info-link:hover {
+  color: var(--etu-text);
+  text-decoration: underline;
+}
+
+/* Legal section primitives — `<LegalMenuItem>` row on `/more` + `<LegalPage>`
+   list on `/more/legal`. Mirrors the legal/contact card shape from
+   planning concepts/mobile-more-page. */
+.etu-legal-card {
+  border: 1px solid var(--etu-border);
+  border-radius: 0.5rem;
+  background: var(--etu-surface);
+  overflow: hidden;
+}
+
+.etu-legal-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 0.875rem;
+  min-height: 3rem;
+  color: var(--etu-text);
+  font-size: 0.875rem;
+  text-decoration: none;
+}
+
+.etu-legal-row--divided {
+  border-top: 1px solid var(--etu-border);
+}
+
+.etu-legal-row:hover {
+  background: var(--etu-surface-2);
+}
+
+.etu-legal-row-icon {
+  width: 1.5rem;
+  text-align: center;
+  font-size: 1.125rem;
+  flex: none;
+}
+
+.etu-legal-row-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.etu-legal-row-trailing {
+  color: var(--etu-text-muted);
+  flex: none;
+}
+
+.etu-legal-empty {
+  padding: 0.75rem 0.875rem;
+  margin: 0;
+  border-top: 1px solid var(--etu-border);
+  color: var(--etu-text-muted);
+  font-size: 0.82rem;
+}
+
+/* Avatar — round profile picture with an initial-letter fallback. */
+.etu-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--etu-surface-2);
+  color: var(--etu-text-muted);
+  font-weight: 600;
+  font-size: 0.8rem;
+  overflow: hidden;
+  flex: none;
+  vertical-align: middle;
+  user-select: none;
+}
+
+.etu-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.etu-avatar-initial {
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+/* UserMenu — avatar trigger + dropdown with profile / 내 정보 / 로그아웃. */
+.etu-user-menu {
+  position: relative;
+  display: inline-block;
+}
+
+.etu-user-menu-trigger {
+  background: transparent;
+  border: none;
+  padding: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.etu-user-menu-trigger:focus-visible {
+  outline: 2px solid var(--etu-accent);
+  outline-offset: 2px;
+}
+
+.etu-user-menu-sign-in {
+  font-size: 0.8rem;
+  color: var(--etu-text-muted);
+  text-decoration: none;
+}
+
+.etu-user-menu-sign-in:hover {
+  color: var(--etu-text);
+}
+
+.etu-user-menu-dropdown {
+  position: absolute;
+  min-width: 14rem;
+  max-width: 18rem;
+  background: var(--etu-surface);
+  border: 1px solid var(--etu-border);
+  border-radius: 0.6rem;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  z-index: 50;
+  padding: 0.6rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.etu-user-menu-dropdown--bottom-right { right: 0; top: calc(100% + 0.4rem); }
+.etu-user-menu-dropdown--bottom-left  { left:  0; top: calc(100% + 0.4rem); }
+.etu-user-menu-dropdown--top-right    { right: 0; bottom: calc(100% + 0.4rem); }
+.etu-user-menu-dropdown--top-left     { left:  0; bottom: calc(100% + 0.4rem); }
+
+.etu-user-menu-header {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.1rem 0.1rem 0.2rem;
+}
+
+.etu-user-menu-header-text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.etu-user-menu-name {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: var(--etu-text);
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.etu-user-menu-email {
+  font-size: 0.75rem;
+  color: var(--etu-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.etu-user-menu-admin {
+  font-size: 0.62rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--etu-surface-2);
+  color: var(--etu-text-muted);
+  padding: 0.05rem 0.35rem;
+  border-radius: 999px;
+}
+
+.etu-user-menu-divider {
+  height: 1px;
+  background: var(--etu-border);
+  margin: 0 -0.6rem;
+}
+
+.etu-user-menu-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.etu-user-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.45rem 0.6rem;
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0.4rem;
+  text-align: left;
+  font: inherit;
+  font-size: 0.85rem;
+  color: var(--etu-text);
+  cursor: pointer;
+  text-decoration: none;
+  transition: background 0.1s ease;
+}
+
+.etu-user-menu-item:hover {
+  background: var(--etu-surface-2);
+}
+
+.etu-user-menu-item:focus-visible {
+  outline: 2px solid var(--etu-accent);
+  outline-offset: -2px;
+}
+
+.etu-user-menu-item--danger {
+  color: var(--etu-text-muted);
+}
+
+.etu-user-menu-item--danger:hover {
+  color: var(--etu-danger, var(--etu-text));
+}
+
+/* ----------------------------------------------------------------------------
+ * NotificationBell — bell trigger + badge + desktop popover / mobile sheet.
+ * ------------------------------------------------------------------------- */
+
+.etu-notif-bell {
+  position: relative;
+  display: inline-block;
+}
+
+.etu-notif-bell-trigger {
+  position: relative;
+  background: transparent;
+  border: none;
+  padding: 0.4rem;
+  border-radius: 999px;
+  cursor: pointer;
+  color: var(--etu-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.etu-notif-bell-trigger:hover {
+  background: var(--etu-surface-2);
+}
+
+.etu-notif-bell-trigger:focus-visible {
+  outline: 2px solid var(--etu-accent);
+  outline-offset: 2px;
+}
+
+.etu-notif-bell-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: var(--etu-danger, #dc2626);
+  color: white;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+  pointer-events: none;
+  box-shadow: 0 0 0 2px var(--etu-surface);
+}
+
+.etu-notif-bell-popover {
+  position: absolute;
+  width: min(360px, calc(100vw - 1rem));
+  max-height: min(70vh, 520px);
+  background: var(--etu-surface);
+  border: 1px solid var(--etu-border);
+  border-radius: 0.6rem;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.etu-notif-bell-popover--bottom-right { right: 0; top: calc(100% + 0.4rem); }
+.etu-notif-bell-popover--bottom-left  { left:  0; top: calc(100% + 0.4rem); }
+.etu-notif-bell-popover--top-right    { right: 0; bottom: calc(100% + 0.4rem); }
+.etu-notif-bell-popover--top-left     { left:  0; bottom: calc(100% + 0.4rem); }
+
+.etu-notif-bell-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 70;
+  animation: etu-notif-bell-fade 0.15s ease-out;
+}
+
+.etu-notif-bell-sheet {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 71;
+  background: var(--etu-surface);
+  border-radius: 1rem 1rem 0 0;
+  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+  animation: etu-notif-bell-slide-up 0.2s ease-out;
+}
+
+.etu-notif-bell-sheet-grabber {
+  width: 36px;
+  height: 4px;
+  background: var(--etu-border);
+  border-radius: 999px;
+  margin: 0.55rem auto 0.25rem;
+  flex: 0 0 auto;
+}
+
+@keyframes etu-notif-bell-fade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes etu-notif-bell-slide-up {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+.etu-notif-bell-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem 0.9rem;
+  border-bottom: 1px solid var(--etu-border);
+  flex: 0 0 auto;
+}
+
+.etu-notif-bell-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--etu-text);
+}
+
+.etu-notif-bell-close {
+  background: transparent;
+  border: none;
+  color: var(--etu-text-muted);
+  font-size: 1.4rem;
+  line-height: 1;
+  padding: 0.1rem 0.4rem;
+  cursor: pointer;
+  border-radius: 0.3rem;
+}
+
+.etu-notif-bell-close:hover {
+  background: var(--etu-surface-2);
+  color: var(--etu-text);
+}
+
+.etu-notif-bell-items {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 0.3rem 0;
+}
+
+.etu-notif-bell-item {
+  padding: 0.7rem 0.9rem;
+  border-bottom: 1px solid var(--etu-border);
+  font-size: 0.85rem;
+  color: var(--etu-text);
+}
+
+.etu-notif-bell-item:last-child {
+  border-bottom: none;
+}
+
+.etu-notif-bell-empty {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--etu-text-muted);
+  font-size: 0.85rem;
+}
+
+.etu-notif-bell-footer {
+  padding: 0.6rem 0.9rem;
+  border-top: 1px solid var(--etu-border);
+  flex: 0 0 auto;
+  font-size: 0.82rem;
+}
+
+/* ----------------------------------------------------------------------------
+ * MobileTabBar — fixed bottom tab bar; hidden at desktop widths.
+ * ------------------------------------------------------------------------- */
+
+/* ----------------------------------------------------------------------------
+ * Liquid Glass utility — translucent depth-aware material (iOS 26 / Tahoe).
+ * Paired with a solid fallback for browsers without backdrop-filter.
+ * ------------------------------------------------------------------------- */
+
+.etu-glass {
+  background: color-mix(in srgb, var(--etu-surface) 65%, transparent);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  backdrop-filter: blur(24px) saturate(180%);
+  border: 0.5px solid color-mix(in srgb, var(--etu-text) 10%, transparent);
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .etu-glass {
+    background: var(--etu-surface);
+  }
+}
+
+/* ----------------------------------------------------------------------------
+ * NavigationBar — iOS-style small-title bar. Single 48px row, optional
+ * sticky + safe-area-inset-top, fade-on-scroll opacity + shadow ramp.
+ * ------------------------------------------------------------------------- */
+
+.etu-navbar {
+  z-index: 35;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--etu-text) 8%, transparent);
+  opacity: 0.92;
+  transition: opacity 160ms ease, box-shadow 160ms ease;
+}
+
+.etu-navbar--sticky {
+  position: sticky;
+  top: 0;
+  padding-top: env(safe-area-inset-top);
+}
+
+/* `safeAreaTop={false}` — for apps that already have a global top chrome
+ * bar above the per-page NavigationBar. Drops the safe-area padding so
+ * the two don't stack into an offscreen title row on notched iOS PWAs. */
+.etu-navbar--no-safe-top {
+  padding-top: 0;
+}
+
+.etu-navbar--borderless {
+  border-bottom: 0;
+}
+
+.etu-navbar--scrolled {
+  opacity: 1;
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--etu-text) 6%, transparent),
+    0 8px 24px color-mix(in srgb, var(--etu-text) 8%, transparent);
+}
+
+.etu-navbar-inner {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 48px;
+  padding: 0 0.5rem;
+}
+
+.etu-navbar-leading,
+.etu-navbar-trailing {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-height: 48px;
+}
+
+.etu-navbar-trailing {
+  justify-content: flex-end;
+}
+
+.etu-navbar-title {
+  margin: 0;
+  /* Hard-coded 17px (HIG default for navigation title) instead of 1rem to
+   * survive any host-side root font-size scaling. iOS PWA report: title
+   * appeared visibly smaller in standalone than in Safari, traced to a
+   * consumer that set html font-size < 16px; rem-based sizing inherited
+   * the shrink. Fixed pixel keeps the title at HIG size in every host. */
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--etu-text);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: var(--etu-font);
+}
+
+.etu-navbar-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  min-width: 48px;
+  min-height: 48px;
+  padding: 0 0.4rem;
+  background: transparent;
+  border: 0;
+  color: var(--etu-accent);
+  font: inherit;
+  cursor: pointer;
+}
+
+.etu-navbar-back:focus-visible {
+  outline: 2px solid var(--etu-accent);
+  outline-offset: -2px;
+  border-radius: 0.4rem;
+}
+
+.etu-navbar-chevron {
+  font-size: 1.5rem;
+  line-height: 1;
+  display: inline-block;
+  transform: translateY(-1px);
+}
+
+.etu-navbar-back-label {
+  font-size: 0.95rem;
+}
+
+/* ----------------------------------------------------------------------------
+ * MobileTabBar — floating pill, iOS 26 Liquid Glass. Hidden at desktop.
+ * ------------------------------------------------------------------------- */
+
+.etu-mobile-tab-bar {
+  position: fixed;
+  left: 0.75rem;
+  right: 0.75rem;
+  bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
+  z-index: 40;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
+  gap: 0.25rem;
+  padding: 0.35rem;
+  border-radius: 28px;
+  box-shadow: 0 12px 32px color-mix(in srgb, var(--etu-text) 14%, transparent);
+}
+
+@media (min-width: 720px) {
+  .etu-mobile-tab-bar {
+    display: none;
+  }
+}
+
+.etu-mobile-tab-bar-item {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.1rem;
+  min-height: 48px;
+  padding: 0.3rem 0.25rem;
+  background: transparent;
+  border: 0;
+  border-radius: 22px;
+  color: var(--etu-text-subtle);
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.etu-mobile-tab-bar-item:focus-visible {
+  outline: 2px solid var(--etu-accent);
+  outline-offset: -2px;
+}
+
+.etu-mobile-tab-bar-item--active {
+  color: var(--etu-on-accent);
+  background: var(--etu-accent);
+}
+
+.etu-mobile-tab-bar-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.etu-mobile-tab-bar-icon > svg {
+  width: 22px;
+  height: 22px;
+}
+
+.etu-mobile-tab-bar-label {
+  font-size: 0.65rem;
+  line-height: 1;
+}
+
+/* ----------------------------------------------------------------------------
+ * Sidebar — desktop nav shell. Hidden at mobile widths; counterpart to
+ * <MobileTabBar>. Composition: AppHeader / Primary / Secondary / Footer.
+ * ------------------------------------------------------------------------- */
+
+.etu-sidebar {
+  width: var(--etu-sidebar-w, 240px);
+  flex: 0 0 var(--etu-sidebar-w, 240px);
+  position: sticky;
+  top: 0;
+  align-self: flex-start;
+  height: 100dvh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.75rem 0.5rem;
+  background: var(--etu-surface);
+  border-right: 1px solid var(--etu-border);
+  box-sizing: border-box;
+}
+
+@media (max-width: 719px) {
+  .etu-sidebar {
+    display: none;
+  }
+}
+
+.etu-sidebar-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem 0.5rem 0.25rem;
+}
+
+.etu-sidebar-header-app {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.etu-sidebar-header-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.etu-sidebar-header-icon > svg {
+  width: 22px;
+  height: 22px;
+}
+
+.etu-sidebar-header-name {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--etu-text);
+  letter-spacing: -0.01em;
+}
+
+.etu-sidebar-header-extra {
+  font-size: 0.8rem;
+  color: var(--etu-text-muted);
+}
+
+.etu-sidebar-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.etu-sidebar-section--secondary {
+  margin-top: 0.25rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--etu-border);
+}
+
+.etu-sidebar-section--secondary + .etu-sidebar-section--secondary {
+  margin-top: 0.5rem;
+  padding-top: 0.25rem;
+  border-top: 0;
+}
+
+.etu-sidebar-caption {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--etu-text-subtle);
+  padding: 0.25rem 0.5rem;
+}
+
+.etu-sidebar-section-caption {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--etu-text-subtle);
+  padding: 0.4rem 0.5rem 0.15rem;
+}
+
+.etu-sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 0.6rem;
+  background: transparent;
+  border: 0;
+  border-radius: var(--etu-r-sm);
+  color: var(--etu-text-muted);
+  font: inherit;
+  font-size: 0.9rem;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.etu-sidebar-item:hover {
+  background: var(--etu-surface-2);
+  color: var(--etu-text);
+}
+
+.etu-sidebar-item:focus-visible {
+  outline: 2px solid var(--etu-accent);
+  outline-offset: -2px;
+}
+
+.etu-sidebar-item--active {
+  background: var(--etu-accent-soft);
+  color: var(--etu-text);
+  font-weight: 600;
+}
+
+.etu-sidebar-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+.etu-sidebar-item-icon > svg {
+  width: 18px;
+  height: 18px;
+}
+
+.etu-sidebar-item-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.etu-sidebar-footer {
+  margin-top: auto;
+  padding: 0.5rem;
+  border-top: 1px solid var(--etu-border);
+  font-size: 0.85rem;
+  color: var(--etu-text-muted);
+}
+
+/* --------------------------------------------------------------------------
+ * StatusBanner — top-of-app strip surfacing service-admin declared incidents.
+ * Outage incidents take origin offline and never reach the banner; the strip
+ * only renders for degraded / maintenance.
+ * -------------------------------------------------------------------------- */
+
+.etu-status-banner {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.45rem 0.85rem;
+  font-family: var(--etu-font);
+  font-size: 0.83rem;
+  line-height: 1.3;
+  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
+}
+
+.etu-status-banner-label {
+  flex-shrink: 0;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.etu-status-banner-msg {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.etu-status-banner-eta {
+  flex-shrink: 0;
+  opacity: 0.85;
+  font-variant-numeric: tabular-nums;
+}
+
+.etu-status-banner-close {
+  flex-shrink: 0;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0.1rem 0.35rem;
+  border-radius: var(--etu-r-sm);
+  opacity: 0.7;
+}
+.etu-status-banner-close:hover { opacity: 1; }
+
+/* Degraded (warning): amber */
+.etu-status-banner-degraded {
+  background: color-mix(in srgb, #f5a524 20%, var(--etu-bg));
+  color: color-mix(in srgb, #f5a524 80%, var(--etu-text));
+}
+/* Maintenance (planned): muted accent */
+.etu-status-banner-maintenance {
+  background: color-mix(in srgb, var(--etu-accent) 18%, var(--etu-bg));
+  color: color-mix(in srgb, var(--etu-accent) 75%, var(--etu-text));
+}
+/* Outage shouldn't reach here, but if a caller forces it, render danger-coloured */
+.etu-status-banner-outage {
+  background: color-mix(in srgb, var(--etu-err) 22%, var(--etu-bg));
+  color: color-mix(in srgb, var(--etu-err) 80%, var(--etu-text));
+}
+
+@media (max-width: 480px) {
+  .etu-status-banner {
+    flex-wrap: wrap;
+  }
+  .etu-status-banner-msg {
+    white-space: normal;
+  }
+}
+
+/* ----------------------------------------------------------------------------
+ * PolicyChangeBanner — hub-driven upcoming legal-change announcement.
+ * ------------------------------------------------------------------------- */
+
+.etu-policy-change-banner {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.45rem 0.85rem;
+  font-family: var(--etu-font);
+  font-size: 0.83rem;
+  line-height: 1.3;
+  background: color-mix(in srgb, #f5a524 18%, var(--etu-bg));
+  color: color-mix(in srgb, #f5a524 82%, var(--etu-text));
+  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
+}
+
+/* Adverse (불리/중대): danger-coloured for stronger emphasis. */
+.etu-policy-change-banner--adverse {
+  background: color-mix(in srgb, var(--etu-err) 20%, var(--etu-bg));
+  color: color-mix(in srgb, var(--etu-err) 82%, var(--etu-text));
+  font-weight: 500;
+}
+
+.etu-policy-change-banner-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.etu-policy-change-banner-body a {
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  color: inherit;
+  white-space: nowrap;
+}
+
+.etu-policy-change-banner-close {
+  flex-shrink: 0;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0.1rem 0.35rem;
+  border-radius: var(--etu-r-sm);
+  opacity: 0.7;
+}
+.etu-policy-change-banner-close:hover { opacity: 1; }
+
+/* ----------------------------------------------------------------------------
+ * DocsHub — in-app docs surface with optional skill download (alpha).
+ * ------------------------------------------------------------------------- */
+
+.etu-docs-hub {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.etu-docs-hub-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.etu-docs-hub-head-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.etu-docs-hub-app-name {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--etu-text);
+}
+
+.etu-docs-hub-description {
+  margin: 0;
+  color: var(--etu-text-muted);
+  font-size: 14px;
+}
+
+.etu-docs-hub-skill-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: var(--etu-r, 10px);
+  border: 1px solid var(--etu-border);
+  background: var(--etu-surface);
+  color: var(--etu-text);
+  font: inherit;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 140ms, border-color 140ms;
+}
+
+.etu-docs-hub-skill-btn:hover {
+  background: var(--etu-surface-2);
+  border-color: var(--etu-accent-soft);
+}
+
+.etu-docs-hub-body {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 24px;
+  align-items: start;
+}
+
+.etu-docs-hub-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  position: sticky;
+  top: 16px;
+}
+
+.etu-docs-hub-nav-item {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: var(--etu-r, 8px);
+  border: none;
+  background: transparent;
+  color: var(--etu-text-muted);
+  font: inherit;
+  font-weight: 500;
+  font-size: 13.5px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 140ms, color 140ms;
+}
+
+.etu-docs-hub-nav-item:hover {
+  background: var(--etu-surface-2);
+  color: var(--etu-text);
+}
+
+.etu-docs-hub-nav-item--active {
+  background: var(--etu-accent-soft);
+  color: var(--etu-text);
+  font-weight: 600;
+}
+
+.etu-docs-hub-section {
+  min-width: 0;
+}
+
+.etu-docs-hub-section-summary {
+  margin: 0 0 16px;
+  color: var(--etu-text-muted);
+  font-size: 14px;
+}
+
+@media (max-width: 768px) {
+  .etu-docs-hub-body {
+    grid-template-columns: 1fr;
+  }
+  .etu-docs-hub-nav {
+    position: static;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 4px;
+    overflow-x: auto;
+  }
+  .etu-docs-hub-nav-item {
+    width: auto;
+  }
+}
+
+.etu-docs-hub-skill-usage h4 {
+  margin: 18px 0 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--etu-text);
+}
+.etu-docs-hub-skill-usage p,
+.etu-docs-hub-skill-usage li {
+  font-size: 13.5px;
+  line-height: 1.6;
+  color: var(--etu-text);
+}
+.etu-docs-hub-skill-usage code {
+  font-family: var(--etu-mono, ui-monospace, "SF Mono", monospace);
+  font-size: 12.5px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--etu-surface-2);
+  color: var(--etu-text);
+}
+.etu-docs-hub-skill-usage ol {
+  padding-left: 20px;
+  margin: 6px 0 12px;
+}
+.etu-docs-hub-skill-install {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  margin: 8px 0 12px;
+  background: var(--etu-surface-2);
+  border: 1px solid var(--etu-border);
+  border-radius: 6px;
+  overflow-x: auto;
+}
+.etu-docs-hub-skill-install-cmd {
+  flex: 1 1 auto;
+  font-family: var(--etu-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 13px;
+  white-space: nowrap;
+  color: var(--etu-text);
+  background: transparent;
+  padding: 0;
+}
+.etu-docs-hub-skill-install-note {
+  font-size: 12px;
+  color: var(--etu-text-muted);
+  margin: 0 0 12px;
+}
+
+/* --- DataTable -------------------------------------------------------- */
+/* Wide = real <table>. Narrow (container < 720px) = row-per-field cards.
+   Container-query driven so an open sidebar collapsing the main area
+   below 720px flips the table to cards on desktop too, not just on
+   phones. Falls back to viewport @media for browsers without
+   container queries. */
+
+.etu-dt {
+  container-type: inline-size;
+  container-name: etu-dt;
+  width: 100%;
+}
+
+/* shared cell styling */
+.etu-dt-cell {
+  text-align: left;
+  vertical-align: top;
+}
+.etu-dt-align-right { text-align: right; }
+.etu-dt-align-center { text-align: center; }
+.etu-dt-nowrap { white-space: nowrap; }
+
+/* WIDE — real table */
+.etu-dt-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+.etu-dt-table thead th {
+  text-align: left;
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--etu-dim, #999);
+  text-transform: none;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--etu-border, #333);
+  white-space: nowrap;
+}
+.etu-dt-table tbody td {
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--etu-border-subtle, #222);
+  color: var(--etu-text, inherit);
+}
+.etu-dt-table tbody tr:last-child td { border-bottom: 0; }
+.etu-dt-actions { text-align: right; }
+.etu-dt-actions > * + * { margin-left: 0.4rem; }
+
+/* CARDS — row-per-field stacked card */
+.etu-dt-cards {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 0.6rem;
+}
+.etu-dt-card {
+  border: 1px solid var(--etu-border, #333);
+  border-radius: 8px;
+  padding: 0.75rem 0.9rem;
+  background: var(--etu-surface, transparent);
+}
+.etu-dt-card-header {
+  font-weight: 600;
+  font-size: 1rem;
+  margin-bottom: 0.4rem;
+  color: var(--etu-text, inherit);
+  word-break: break-word;
+}
+.etu-dt-card-fields {
+  margin: 0;
+  display: grid;
+  gap: 0.35rem;
+}
+.etu-dt-card-field {
+  display: grid;
+  grid-template-columns: minmax(7rem, auto) 1fr;
+  gap: 0.75rem;
+  align-items: baseline;
+}
+.etu-dt-card-label {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--etu-dim, #999);
+  white-space: nowrap;
+}
+.etu-dt-card-value {
+  margin: 0;
+  font-size: 0.9rem;
+  text-align: right;
+  word-break: break-word;
+}
+.etu-dt-card-actions {
+  margin-top: 0.6rem;
+  padding-top: 0.6rem;
+  border-top: 1px solid var(--etu-border-subtle, #222);
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+/* AUTO mode (default): show table on wide, cards on narrow. */
+.etu-dt .etu-dt-cards { display: none; }
+.etu-dt .etu-dt-table { display: table; }
+@container etu-dt (max-width: 720px) {
+  .etu-dt:not(.etu-dt--force-wide) .etu-dt-table { display: none; }
+  .etu-dt:not(.etu-dt--force-wide) .etu-dt-cards { display: grid; }
+}
+/* @container fallback for browsers without support */
+@supports not (container-type: inline-size) {
+  @media (max-width: 720px) {
+    .etu-dt:not(.etu-dt--force-wide) .etu-dt-table { display: none; }
+    .etu-dt:not(.etu-dt--force-wide) .etu-dt-cards { display: grid; }
+  }
+}
+
+/* FORCE modes */
+.etu-dt--force-wide .etu-dt-cards { display: none !important; }
+.etu-dt--force-wide .etu-dt-table { display: table !important; }
+.etu-dt--force-cards .etu-dt-table { display: none !important; }
+.etu-dt--force-cards .etu-dt-cards { display: grid !important; }
+
+/* ----------------------------------------------------------------------------
+ * 3-tier responsive contract (v0.28).
+ *
+ * `data-vp` is set on <html> by `noFlashViewportScript` + the
+ * <ViewportProvider>. Tier names mirror `responsive-3tier.md`:
+ *
+ *   mobile  : <  720px   <MobileTabBar> owns nav; <Sidebar> hidden
+ *   tablet  : 720–1023   <Sidebar tabletMode="rail|drawer|full">
+ *   desktop : ≥ 1024px   <Sidebar> full width
+ *
+ * Media-query fallbacks are kept so apps that haven't injected the
+ * no-flash script still get the right layout (CSS-only, slightly more
+ * verbose since data-vp isn't available).
+ * ------------------------------------------------------------------------- */
+
+/* Tablet tier — rail mode (default). 64px icon-only column. */
+@media (min-width: 720px) and (max-width: 1023px) {
+  .etu-sidebar[data-tablet-mode="rail"] {
+    width: 64px;
+    flex: 0 0 64px;
+    padding: 0.5rem 0.25rem;
+  }
+  .etu-sidebar[data-tablet-mode="rail"] .etu-sidebar-header-name,
+  .etu-sidebar[data-tablet-mode="rail"] .etu-sidebar-header-extra,
+  .etu-sidebar[data-tablet-mode="rail"] .etu-sidebar-item-label,
+  .etu-sidebar[data-tablet-mode="rail"] .etu-sidebar-caption,
+  .etu-sidebar[data-tablet-mode="rail"] .etu-sidebar-section-caption,
+  .etu-sidebar[data-tablet-mode="rail"] .etu-sidebar-footer {
+    display: none;
+  }
+  .etu-sidebar[data-tablet-mode="rail"] .etu-sidebar-item {
+    justify-content: center;
+    padding: 0.5rem 0;
+    gap: 0;
+  }
+  .etu-sidebar[data-tablet-mode="rail"] .etu-sidebar-header {
+    padding: 0.25rem 0;
+    justify-content: center;
+    align-items: center;
+  }
+  .etu-sidebar[data-tablet-mode="rail"] .etu-sidebar-header-app {
+    justify-content: center;
+  }
+
+  /* Drawer mode — hidden by default, slides in over a scrim when open. */
+  .etu-sidebar[data-tablet-mode="drawer"] {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 50;
+    width: 280px;
+    max-width: 86vw;
+    transform: translateX(-100%);
+    transition: transform 200ms ease;
+    box-shadow: 4px 0 24px color-mix(in srgb, var(--etu-text) 18%, transparent);
+  }
+  .etu-sidebar[data-tablet-mode="drawer"][data-open="true"] {
+    transform: translateX(0);
+  }
+  .etu-sidebar-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: 49;
+    background: color-mix(in srgb, var(--etu-text) 32%, transparent);
+    backdrop-filter: blur(2px);
+  }
+
+  /* Toggle button is visible only at the tablet tier. */
+  .etu-sidebar-toggle {
+    display: inline-flex;
+  }
+}
+
+/* Mobile + desktop hide the toggle (mobile uses MobileTabBar, desktop the
+ * full sidebar is already visible). */
+@media (max-width: 719px), (min-width: 1024px) {
+  .etu-sidebar-toggle {
+    display: none;
+  }
+}
+
+/* Drawer in desktop tier — show full inline (defeat tablet's fixed positioning
+ * in case the consumer left tabletMode="drawer" wired up). */
+@media (min-width: 1024px) {
+  .etu-sidebar[data-tablet-mode="drawer"] {
+    position: sticky;
+    top: 0;
+    transform: none;
+    width: var(--etu-sidebar-w, 240px);
+    flex: 0 0 var(--etu-sidebar-w, 240px);
+    box-shadow: none;
+  }
+  .etu-sidebar-scrim {
+    display: none;
+  }
+}
+
+/* Toggle button — chrome-bar hamburger. */
+.etu-sidebar-toggle {
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+  color: var(--etu-text);
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+.etu-sidebar-toggle:hover {
+  background: color-mix(in srgb, var(--etu-text) 8%, transparent);
+}
+.etu-sidebar-toggle:focus-visible {
+  outline: 2px solid var(--etu-accent);
+  outline-offset: 2px;
+}