/* ============================================================
   app.css — 계정센터 전용. tokens.css → base.css 다음에 로드.
   컨셉·팔레트 근거: web/docs/DESIGN.md (열쇠 대장)
   ============================================================ */

@font-face {
  font-family: "Pretendard Variable";
  src: url("fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-display: swap;
}

/* ── 팔레트 — 태동 브랜드 (2026-08-17)
   전에는 "열쇠 대장" 컨셉의 종이·황동이었다(DESIGN.md §2). 태동이 계정센터의
   주인이 되면서 로고와 같은 색으로 맞췄다. 근거는 TEDONG-CI 로고 가이드 5절이고,
   값은 로고 SVG 안에 실제로 박혀 있는 것과 같다.
   ★ 이 블록은 tokens.css 뒤에 로드돼 토큰을 덮는다 — 색을 고칠 일이 있으면 여기다. */
:root {
  --bg: #F7F8FB;            /* 아주 옅은 남색기 — 순백보다 눈이 편하다 */
  --surface: #FFFFFF;
  --text: #0B0E16;          /* 가이드의 1색 검정 */
  --text-2: #475569;
  --text-3: #475569;
  --stamp: #B03A34;         /* 직인 — 정지·오류·위험만 */
  --border: #E2E8F2;
  --border-strong: #C9D3E4;
  /* 흰 배경 위 글자용. 기본 남색 그대로도 대비 11.5:1 로 넉넉하다. */
  --accent-ink: #16306B;
}

[hidden] { display: none !important; }  /* .login-wrap 같은 display 지정이 hidden을 이기는 것 방지 */
.mono { font-family: var(--font-mono); }
.fade-in { animation: rise 0.24s var(--e-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── 로그인 ── */
.login-wrap {
  min-height: 100svh;
  display: grid; place-items: center;
  padding: var(--sp-6) var(--sp-4);
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-6);
  box-shadow: var(--sh-2);
}
/* 로고 — 가이드 3절 "기본형 최소 200px". 카드 폭 380px 안에 232px 이 들어간다.
   4절 보호 여백(대문자 높이의 1/4)은 아래 여백 24px 로 확보한다. */
.brand-logo { display: block; width: 232px; max-width: 100%; height: auto; margin-bottom: var(--sp-5); }
.login-title { font-size: var(--fs-xl); letter-spacing: var(--ls-heading); }
.login-sub { color: var(--text-2); font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-5); line-height: var(--lh-body); }

/* 어두운 화면에서는 남색 로고가 배경에 묻히므로 밝은 판본으로 갈아끼운다(가이드 2절).
   ★ prefers-color-scheme 은 보지 않는다 — 이 화면은 시스템 설정을 따르지 않고
   항상 밝은 배경이다. 미디어쿼리를 걸었더니 밝은 배경에 밝은 로고가 나와 흐릿했다.
   나중에 다크 테마를 붙이면 [data-theme="dark"] 하나로 배경과 로고가 함께 바뀐다. */
:root[data-theme="dark"] .brand-logo { content: url("brand/logo-full-light.svg"); }
:root[data-theme="dark"] .brand-mark { content: url("brand/wordmark-light.svg"); }

/* 상단 바 — 좁은 자리라 축약형. 가이드 3절 "축약형 최소 90px". */
.brand-mark { display: block; width: 96px; height: auto; }
.brand-name { color: var(--text-2); font-weight: 600; }

.login-foot {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption); color: var(--text-2); text-align: center;
}
/* 글자처럼 보이지만 button 이어야 한다 — 키보드·스크린리더가 닿아야 하므로. */
.linklike {
  background: none; border: 0; padding: 0 2px;
  font: inherit; font-weight: 700; color: var(--accent-ink);
  cursor: pointer; text-underline-offset: 3px;
}
.linklike:hover { text-decoration: underline; }

.field-help { display: block; margin-top: var(--sp-1); font-size: var(--fs-caption); color: var(--text-3); }
.field select {
  width: 100%; min-height: 44px; padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-size: var(--fs-base);
}
.field select:focus { border-color: var(--accent-ink); outline: none; }

.field { display: block; margin-bottom: var(--sp-4); }
.field-label { display: block; font-size: var(--fs-caption); font-weight: 600; color: var(--text-2); margin-bottom: var(--sp-1); }
.field input {
  width: 100%; min-height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast) var(--e-out);
}
.field input:focus { border-color: var(--accent-ink); outline: none; }

.btn-wide { width: 100%; margin-top: var(--sp-2); }
.btn-sm { min-height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-caption); }
.btn-plain { color: var(--text-2); font-size: var(--fs-caption); font-weight: 600; min-height: 36px; padding: 0 var(--sp-3); }
.btn-plain:hover { color: var(--text); }

.alert {
  background: color-mix(in srgb, var(--stamp) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--stamp) 35%, var(--surface));
  color: var(--stamp);
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* 잘 됐다는 알림. 빨강(--stamp)과 색만 다르고 나머지는 같다. */
.alert-ok {
  background: color-mix(in srgb, var(--ok) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 35%, var(--surface));
  color: var(--ok);
}

/* ── 상단바 ── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 64px;
}
.topbar-in { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--sp-4); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-base); }
.keymark-sm { color: var(--accent-ink); }
.topbar-user { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.me-email { color: var(--text-2); font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip {
  display: inline-flex; align-items: center;
  font-size: var(--fs-caption); font-weight: 700;
  padding: 2px 10px; border-radius: var(--r-full);
  white-space: nowrap;
}
.chip-brass { background: var(--accent-soft); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); }

/* ── 접이식 패널(비번 변경·사이트 등록) ── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-top: var(--sp-4);
}
.panel-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--sp-5); }
.panel-fields .field { margin-bottom: var(--sp-3); }
.panel-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.panel-msg { font-size: var(--fs-caption); color: var(--text-2); min-height: 1.2em; }
.panel-msg.is-error { color: var(--stamp); }

/* ── 본문 ── */
.main { padding-block: var(--sp-6) var(--sp-7); }

.stats { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.stat {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}
.stat strong { display: block; font-size: var(--fs-3xl); line-height: 1.15; letter-spacing: var(--ls-heading); }
.stat span { font-size: var(--fs-caption); color: var(--text-2); font-weight: 600; }
/* 승인 대기 칸만 색을 준다 — 숫자가 0이 아니면 눈에 띄어야 한다. */
.stat-wait strong, .stat-wait span { color: var(--warn); }

.columns { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-6); align-items: start; }
.col-main, .col-side { min-width: 0; }  /* 그리드 항목이 표보다 좁아질 수 있게 — 없으면 페이지가 가로로 밀림 */

.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.sec-head-gap { margin-top: var(--sp-7); }
.sec-title { font-size: var(--fs-xl); }
.sec-count { color: var(--text-2); font-weight: 400; font-size: var(--fs-base); }
.sec-note { color: var(--text-2); font-size: var(--fs-sm); }
/* 한 섹션 안의 소제목 — '고객사 연결' 아래 '고객 로그인 계정' / '발행 채널' */
.sub-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-2); margin: 0 0 var(--sp-2); }
.sub-title-gap { margin-top: var(--sp-5); }

/* ── 사이트 카드 ── */
.sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.site-card { padding: var(--sp-5); }
.site-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.site-meta { list-style: none; padding: 0; font-size: var(--fs-sm); color: var(--text-2); }
.site-meta li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; }
.site-meta .k { flex: none; color: var(--text-2); }
.site-meta a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 열쇠 태그 — slug 칩 (DESIGN.md §4-1) */
.key-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent-soft);
  border-radius: var(--r-full);
  padding: 1px 10px 1px 7px;
  margin-bottom: var(--sp-3);
}
.key-tag::before {
  content: ""; width: 7px; height: 7px;
  border: 1.5px solid var(--accent-ink); border-radius: 50%;
}

/* 빈 상태 */
.empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--sp-7) var(--sp-5);
  text-align: center; color: var(--text-2);
}
.empty strong { display: block; color: var(--text); font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.empty p { font-size: var(--fs-sm); }

/* ── 도장 상태 (DESIGN.md §4-3) ── */
.stamp { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 600; }
.stamp::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.stamp-on { color: var(--accent-ink); }
.stamp-on::before { background: var(--accent); }
.stamp-off { color: var(--stamp); }
.stamp-off::before { background: var(--stamp); }
/* 승인 대기 — 정지와 다른 색을 쓴다. 새로 온 사람이 쫓겨난 사람처럼 보이면 안 된다. */
.stamp-wait { color: var(--warn); }
.stamp-wait::before { background: var(--warn); }
/* 대기 중인 줄은 옅게 강조해 마스터 눈에 먼저 들어오게 한다. */
.row-wait { background: color-mix(in srgb, var(--warn) 6%, transparent); }

/* ── 괘선 표 (가로줄만) ── */
.table-card { padding: var(--sp-2) var(--sp-5); }
/* 넓은 화면에선 표가 카드 안에 다 들어가므로 넘침을 풀어 「관리」 메뉴가 잘리지 않게 한다.
   좁은 화면(<900px)만 가로 스크롤을 유지한다. */
@media (min-width: 900px) { .table-card.scroll-x { overflow: visible; } }
.ledger { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-sm); }
.ledger th {
  text-align: left; font-size: var(--fs-caption); color: var(--text-2);
  font-weight: 600; padding: var(--sp-3) var(--sp-3) var(--sp-2) 0;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.ledger td { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ledger tr:last-child td { border-bottom: none; }
.ledger .t-name { font-weight: 600; color: var(--text); white-space: nowrap; }
.ledger td.t-dim { white-space: nowrap; }
.ledger td { white-space: nowrap; }
.ledger .t-dim { color: var(--text-2); }
/* 발행 연결 계정 상태색 — 만료 임박(warn)·만료/해제(bad) */
.ledger td.is-warn { color: #c9862a; font-weight: 600; }
.ledger td.is-bad  { color: #c0392b; font-weight: 600; }
.row-action { color: var(--stamp); font-size: var(--fs-caption); font-weight: 600; }
.row-action:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.row-action.is-restore { color: var(--accent-ink); }
.row-action.is-danger { color: var(--bad); }
.stamp { white-space: nowrap; }
.t-email { font-size: var(--fs-caption); font-weight: 400; margin-top: 2px; white-space: nowrap; }
/* 계정 한 줄에 단추가 여럿 붙는다(승인·종류·등급). 줄바꿈되면 표가 흐트러진다. */
.t-act { text-align: right; white-space: nowrap; }
.menu { position: relative; display: inline-block; }
.menu-btn {
  font-size: var(--fs-caption); font-weight: 600; color: var(--text-2);
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); padding: 5px 10px;
}
.menu-btn::after { content: ' \25BE'; font-size: 0.85em; }
.menu-btn:hover, .menu-btn:focus-visible { color: var(--text); border-color: var(--text-2); }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 132px;
  background: #FFFFFF; opacity: 1; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .16), 0 1px 3px rgba(15, 23, 42, .08); padding: 6px; text-align: left;
}
.menu-list .row-action { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; margin: 0; white-space: nowrap; }
.menu-list .row-action:hover { background: #F1F4F9; text-decoration: none; }
.menu-list .row-action.is-danger { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; border-radius: 0 0 6px 6px; }

/* ── 활동 ── */
.activity-card { padding: var(--sp-3) var(--sp-5); }
.activity { list-style: none; padding: 0; }
.activity li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.activity li:last-child { border-bottom: none; }
.activity .a-line { display: flex; justify-content: space-between; gap: var(--sp-3); }
.activity .a-what { color: var(--text); font-weight: 600; }
.activity .a-time { color: var(--text-2); font-size: var(--fs-caption); flex: none; }
.activity .a-detail { color: var(--text-2); font-size: var(--fs-caption); margin-top: 2px; }
.activity .a-empty { color: var(--text-2); padding: var(--sp-5) 0; text-align: center; }

.foot { padding-block: var(--sp-5) var(--sp-7); color: var(--text-2); font-size: var(--fs-caption); }

/* ── 모바일 ── */
@media (max-width: 860px) {
  .columns { grid-template-columns: 1fr; }
  .stats { flex-direction: column; gap: var(--sp-3); }
  .stat { display: flex; align-items: baseline; gap: var(--sp-3); }
  .stat strong { font-size: var(--fs-2xl); }
  .me-email { display: none; }
  .topbar { height: auto; }
  .topbar-in { flex-wrap: wrap; padding-block: var(--sp-3); row-gap: var(--sp-2); }
  .brand { white-space: nowrap; }
  /* 손가락 대상 44px — 데스크톱은 마우스라 36px 유지 */
  .btn-sm { min-height: 44px; }
  .row-action { padding: 12px 10px; margin: -12px -10px; }
  .site-meta li { padding: var(--sp-2) 0; }
}

/* ── 고객 계정 세팅 (2026-09-03) ─────────────────────────────
   표 안에서 누를 수 있는 것은 링크처럼 보여야 한다 — 이름과 '주소 지정'.
   글씨색만 바꾸면 눌러도 되는지 모른다(대표 지적 패턴)이라 밑줄을 깔아 둔다. */
.cell-link {
  font: inherit; color: var(--link); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent);
}
.cell-link:hover { text-decoration-color: var(--link); }
.cell-link.is-todo { color: var(--warn); }
.cell-link.is-todo:hover { text-decoration-color: var(--warn); }
.t-url { white-space: nowrap; font-size: var(--fs-caption); color: var(--text-2); }
/* 승인·반려는 「관리」 목록에 숨기지 않는다 — 두 개뿐이고 매번 누르는 것이다. */
.t-act-pair { display: flex; gap: var(--sp-3); justify-content: flex-end; }

/* ── 팝업 ────────────────────────────────────────────────── */
.dlg {
  width: min(520px, calc(100vw - 2 * var(--sp-4)));
  /* margin:auto 를 다시 적어 준다 — 전역 리셋이 margin 을 0 으로 눌러 팝업이 좌상단에 붙는다. */
  margin: auto;
  padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--sh-3);
}
.dlg::backdrop { background: color-mix(in srgb, var(--n-950) 45%, transparent); }
.dlg-body { display: grid; gap: var(--sp-4); padding: var(--sp-5); }
.dlg-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.dlg-title { margin: 0; font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-heading); }
.dlg-x { font-size: var(--fs-base); color: var(--text-3); padding: 4px 6px; margin: -4px -6px; border-radius: var(--r-sm); }
.dlg-x:hover { color: var(--text); background: var(--bg-subtle); }

.dlg-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: 0; }
.dlg-facts dt { font-size: var(--fs-caption); color: var(--text-3); }
.dlg-facts dd { margin: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* 사이트 쪽 env 에 넣을 값 — 길어서 반드시 자기 칸 안에서 줄바꿈/스크롤 되게 한다. */
.dlg-note {
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3); display: grid; gap: var(--sp-2); justify-items: start;
}
.dlg-note-t { margin: 0; font-size: var(--fs-caption); color: var(--text-2); line-height: var(--lh-body); }
.dlg-code {
  display: block; width: 100%; overflow-x: auto; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px 8px;
}
.dlg-actions { display: flex; gap: var(--sp-2); }

@media (max-width: 560px) {
  .dlg { width: calc(100vw - 2 * var(--sp-3)); }
  .dlg-body { padding: var(--sp-4); }
  .dlg-facts { grid-template-columns: 1fr; gap: 0; }
  .dlg-facts dd { margin-bottom: var(--sp-2); }
  .t-act-pair { gap: var(--sp-4); }
}