:root {
        color-scheme: light;
        --bg: #f4f7fb;
        --panel: #ffffff;
        --text: #10233d;
        --muted: #60758f;
        --line: #d8e2ef;
        --accent: #0b6ef3;
        --accent-dark: #0958c5;
        --danger: #c84545;
        --success: #18895a;
        --warn: #a46813;
      }

      * { box-sizing: border-box; }

      [hidden] { display: none !important; }

      body {
        margin: 0;
        font-family: "Segoe UI", sans-serif;
        background: radial-gradient(circle at top, #ffffff 0%, var(--bg) 72%);
        color: var(--text);
      }

      main {
        max-width: 1180px;
        margin: 0 auto;
        padding: 32px 20px 80px;
      }

      .topbar,
      .section-head,
      .filters,
      .table-actions,
      .form-row,
      .button-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
      }

      .topbar {
        justify-content: space-between;
        margin-bottom: 20px;
      }

      .topbar a {
        color: var(--muted);
        text-decoration: none;
        font-weight: 700;
      }

      .panel {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 24px;
        box-shadow: 0 18px 50px rgba(16, 35, 61, 0.08);
        padding: 24px;
      }

      .stack {
        display: grid;
        gap: 18px;
      }

      .grid {
        display: grid;
        gap: 18px;
      }

      .summary-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      }

      .two-up {
        grid-template-columns: 1fr;
      }

      .admin-page-stack {
        display: grid;
        gap: 18px;
      }

      .admin-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .admin-nav a {
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 10px 14px;
        background: #f8fbff;
        color: var(--text);
        text-decoration: none;
        font-weight: 800;
      }

      .admin-nav a.active {
        border-color: var(--accent);
        background: var(--accent);
        color: #fff;
      }

      .admin-toolbar {
        align-items: flex-end;
        background: #f8fbff;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 14px;
      }

      .inline-table-input {
        width: 100%;
        min-width: 96px;
        padding: 8px 10px;
        border-radius: 10px;
      }

      .inline-table-select {
        width: 100%;
        min-width: 92px;
        padding: 8px 10px;
        border-radius: 10px;
      }

      .modal-overlay {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(16, 35, 61, 0.42);
        backdrop-filter: blur(5px);
        z-index: 30;
      }

      .modal-overlay.show {
        display: flex;
      }

      .modal-card {
        width: min(1040px, 100%);
        max-height: 86vh;
        overflow: auto;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 28px 80px rgba(16, 35, 61, 0.22);
        padding: 22px;
      }

      .template-guide {
        border: 1px solid #cfe0f4;
        border-radius: 18px;
        padding: 16px;
        background: #f8fbff;
      }

      .template-guide ul {
        margin: 10px 0 0;
        padding-left: 18px;
        color: var(--muted);
        line-height: 1.7;
      }

      .template-guide code {
        border-radius: 8px;
      }

      .org-admin-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      }

      .compact-list {
        display: grid;
        gap: 8px;
      }

      .compact-list-item {
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 12px;
        background: #fbfdff;
      }

      .inline-note {
        font-size: 13px;
        color: var(--muted);
      }

      .summary-card {
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 18px;
        background: #fbfdff;
      }

      .summary-card span {
        display: block;
        color: var(--muted);
        font-size: 13px;
        margin-bottom: 8px;
      }

      .summary-card strong {
        font-size: 28px;
      }

      .muted { color: var(--muted); }

      h1, h2, h3 { margin: 0; }

      p {
        margin: 0;
        line-height: 1.6;
        color: var(--muted);
      }

      .field {
        display: grid;
        gap: 8px;
        flex: 1 1 180px;
      }

      .check-row {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        color: var(--text);
      }

      .check-row input {
        width: auto;
      }

      label {
        font-size: 13px;
        font-weight: 700;
        color: var(--muted);
      }

      input,
      select,
      button,
      textarea {
        font: inherit;
      }

      input,
      select,
      textarea {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 12px 14px;
        background: #fff;
      }

      button,
      .btn-link {
        appearance: none;
        border: 0;
        border-radius: 14px;
        padding: 12px 16px;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
      }

      .primary {
        background: var(--accent);
        color: #fff;
      }

      .primary:hover { background: var(--accent-dark); }

      .secondary {
        background: #eef4fb;
        color: var(--text);
      }

      .danger {
        background: #fff1f1;
        color: var(--danger);
      }

      .message {
        border-radius: 16px;
        padding: 14px 16px;
        display: none;
      }

      .message.show { display: block; }
      .message.error { background: #fff1f1; color: var(--danger); }
      .message.success { background: #eefaf5; color: var(--success); }
      .message.info { background: #eef4fb; color: var(--text); }

      .tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
      }

      .tag.good { background: #eefaf5; color: var(--success); }
      .tag.warn { background: #fff5e6; color: var(--warn); }
      .tag.muted { background: #eef4fb; color: var(--muted); }

      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
      }

      th, td {
        padding: 12px 10px;
        border-bottom: 1px solid var(--line);
        text-align: left;
        vertical-align: top;
      }

      th {
        color: var(--muted);
        font-size: 12px;
        letter-spacing: 0.02em;
      }

      .table-wrap {
        overflow: auto;
      }

      .table-actions button {
        padding: 8px 11px;
        border-radius: 12px;
        font-size: 12px;
      }

      .login-box {
        max-width: 480px;
        margin: 48px auto 0;
      }

      .empty {
        padding: 20px;
        border: 1px dashed var(--line);
        border-radius: 18px;
        color: var(--muted);
        text-align: center;
      }

      code {
        background: #eef4fb;
        padding: 2px 8px;
        border-radius: 999px;
        color: var(--accent);
      }

      ul.log-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 10px;
      }

      ul.log-list li {
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 14px;
        background: #fbfdff;
      }

      .panel.is-refreshing {
        position: relative;
        min-height: 180px;
      }

      .panel.is-refreshing::after,
      .busy-overlay::before {
        content: "";
        width: 28px;
        height: 28px;
        border-radius: 999px;
        border: 3px solid #cfe0f4;
        border-top-color: var(--accent);
        animation: spin 0.8s linear infinite;
      }

      .panel.is-refreshing::before {
        content: "갱신 중입니다...";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding-top: 52px;
        background: rgba(255, 255, 255, 0.78);
        color: var(--muted);
        font-weight: 700;
        z-index: 2;
      }

      .panel.is-refreshing::after {
        position: absolute;
        top: calc(50% - 24px);
        left: calc(50% - 14px);
        z-index: 3;
      }

      .busy-overlay {
        position: fixed;
        inset: 0;
        display: none;
        place-items: center;
        background: rgba(244, 247, 251, 0.72);
        backdrop-filter: blur(4px);
        z-index: 20;
      }

      .busy-overlay.show {
        display: grid;
      }

      .busy-card {
        min-width: 220px;
        display: grid;
        justify-items: center;
        gap: 12px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #fff;
        padding: 20px;
        box-shadow: 0 18px 50px rgba(16, 35, 61, 0.14);
        color: var(--text);
        font-weight: 800;
      }

      @keyframes spin {
        to { transform: rotate(360deg); }
      }

      @media (max-width: 860px) {
        .two-up {
          grid-template-columns: 1fr;
        }
      }