/* 최소 스타일. 디자인 시스템은 사이트마다 갈아끼운다 — 여기선 골격이 보이기만 하면 된다. */
:root{--fg:#0f172a;--muted:#64748b;--bg:#f8fafc;--card:#fff;--line:#e2e8f0;--primary:#2563eb;--danger:#dc2626}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;background:var(--bg);color:var(--fg);line-height:1.6}
.container{max-width:960px;margin:0 auto;padding:28px 20px}
a{color:var(--primary)}
code{background:#eef2f7;padding:1px 5px;border-radius:4px;font-size:.9em}

.site-header,.admin-header{display:flex;align-items:center;gap:16px;padding:14px 20px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{font-weight:700;text-decoration:none;color:var(--fg)}
.admin-nav{display:flex;gap:14px;margin-left:8px}
.admin-header .logout{margin-left:auto;display:flex;align-items:center;gap:10px}
.who{color:var(--muted);font-size:.9rem}
.site-footer{padding:20px;text-align:center;color:var(--muted)}

.btn{padding:9px 16px;border:1px solid var(--line);border-radius:8px;background:var(--card);cursor:pointer;font:inherit}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-ghost{background:transparent}
.btn-block{width:100%;padding:12px}

.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#f1f5f9;font-size:.85rem;color:var(--muted)}

/* 로그인 */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0}
.auth-wrap{width:100%;max-width:380px;padding:20px}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px}
.auth-title{margin:0 0 6px;font-size:1.25rem}
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:.85rem;color:var(--muted)}
.field input[type=text],.field input[type=password]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit}
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:44px!important}
.pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:6px}
.pw-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.check{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted)}
.alert-error{margin:0;padding:10px 12px;background:#fef2f2;color:var(--danger);border:1px solid #fecaca;border-radius:8px;font-size:.9rem}
.sorts{color:var(--muted);font-size:.9rem}

/* ── Platform Admin — 제공자 화면 ─────────────────────────────
   🔴 색은 «상태»에만 쓴다. 장식으로 쓰면 진짜 경고가 묻힌다. */

.page-title { font-size: 1.35rem; margin: 1.25rem 0 1rem; }

.banner { padding: .75rem 1rem; border-radius: 8px; margin: 0 0 1rem; line-height: 1.55; }
.banner-error { background: #fdecec; border: 1px solid #f0b4b4; color: #8a1f1f; }
.banner-warn  { background: #fff6e5; border: 1px solid #f0d9a8; color: #7a5200; }
.banner-hint  { margin: .4rem 0 0; font-size: .875rem; opacity: .85; }

.card { border: 1px solid #e2e5e9; border-radius: 10px; background: #fff; margin: 0 0 1.25rem; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start;
             gap: 1rem; padding: 1rem; border-bottom: 1px solid #eef0f2; }
.card-title { font-size: 1.05rem; margin: 0; display: flex; align-items: baseline; gap: .5rem; }
.caps { margin: .3rem 0 0; font-size: .8rem; color: #6b7280; }
.code { font: .75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
        background: #f3f4f6; color: #4b5563; padding: .1rem .4rem; border-radius: 4px; }

.row { display: flex; gap: 1rem; align-items: flex-start;
       padding: 1rem; border-bottom: 1px solid #f2f4f6; }
.row:last-child { border-bottom: 0; }
.row-main { flex: 1 1 auto; min-width: 0; }
.row-actions { display: flex; gap: .5rem; align-items: center; flex: 0 0 auto; }
.hint { margin: .35rem 0 0; font-size: .875rem; color: #4b5563; line-height: 1.6; }
.detail { margin: .4rem 0 0; font-size: .82rem; color: #6b7280;
          background: #f9fafb; border-left: 3px solid #d1d5db; padding: .4rem .6rem; }
.tail { font: .8rem ui-monospace, Menlo, monospace; color: #6b7280; margin-left: .4rem; }

.badge { display: inline-block; font-size: .75rem; padding: .15rem .5rem;
         border-radius: 999px; border: 1px solid transparent; }
.badge-ok      { background: #e7f6ec; color: #17612f; border-color: #b7e0c4; }
.badge-bad     { background: #fdecec; color: #8a1f1f; border-color: #f0b4b4; }
.badge-unknown { background: #f3f4f6; color: #4b5563; border-color: #dcdfe3; }

/* 🔴 「어디서 얻나」를 접어 둔다 — 펼치지 않아도 화면이 안 시끄럽고,
      필요할 때 화면 «안에서» 답이 나온다. */
.howto { margin: .6rem 0 0; font-size: .875rem; }
.howto > summary { cursor: pointer; color: #2563eb; }
.howto p { margin: .5rem 0 0; line-height: 1.65; color: #374151; }
.howto .example .note { color: #6b7280; font-size: .82rem; }
.howto .caution { color: #7a5200; }

.empty { color: #6b7280; padding: 2rem 0; text-align: center; }

/* 모달 — CRUD 는 모달로(전역 규칙). <dialog> 가 포커스 가둠·ESC 를 브라우저에서 준다. */
.modal { border: 0; border-radius: 12px; padding: 0; width: min(30rem, calc(100vw - 2rem));
         box-shadow: 0 10px 40px rgb(0 0 0 / 18%); }
.modal::backdrop { background: rgb(17 24 39 / 45%); }
.modal form { padding: 1.25rem; }
.modal-title { margin: 0 0 .75rem; font-size: 1.05rem; }
.modal-note { font-size: .85rem; color: #4b5563; line-height: 1.65;
              background: #f9fafb; padding: .6rem .75rem; border-radius: 6px; margin: 0 0 1rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }

/* 토스트 — 오른쪽 위, 시간이 지나면 사라진다. 상태는 여기 담지 않는다(배너가 담는다). */
/* 🔴 헤더 «아래»에 둔다. top:1rem 이면 로그아웃 버튼을 덮고, 토스트가 떠 있는 동안
      그 버튼을 누를 수 없다(2026-08-31 브라우저 검증에서 실제로 겹쳤다). */
.toast-region { position: fixed; top: 5rem; right: 1rem; z-index: 100;
                display: flex; flex-direction: column; gap: .5rem;
                pointer-events: none; max-width: min(26rem, calc(100vw - 2rem)); }
.toast { pointer-events: auto; background: #111827; color: #fff; border-radius: 8px;
         padding: .7rem .9rem; font-size: .9rem; line-height: 1.55;
         display: flex; gap: .6rem; align-items: flex-start;
         box-shadow: 0 6px 24px rgb(0 0 0 / 22%); }
.toast-success { background: #17612f; }
.toast-error   { background: #8a1f1f; }
.toast-close { background: none; border: 0; color: inherit; cursor: pointer;
               font-size: 1rem; line-height: 1; opacity: .8; padding: 0 .1rem; }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in .16s ease-out; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(-4px); } }
}

.admin-nav .is-current { font-weight: 600; text-decoration: underline; }