:root {
  /* 브랜드 & 핵심 */
  --kbs-blue:#0A4595; --kbs-blue-deep:#06316B; --kbs-blue-light:#E6EEF8;
  --action:#1565C0; --action-pressed:#0D47A1;
  /* 표면 */
  --canvas:#FFFFFF; --surface:#F5F7FA; --surface-featured:#EEF4FC;
  --hairline:#E2E6EC; --hairline-soft:#EDF0F4; --hairline-strong:#CBD2DB;
  /* 텍스트 */
  --ink:#1A1F2B; --charcoal:#2C3340; --slate:#5A6472; --steel:#828B98; --on-dark:#FFFFFF;
  /* 시맨틱 */
  --success:#1E7A45; --warning:#9A6700; --warning-light:#FBF0D9;
  --danger:#B3261E; --danger-light:#FBE9E7;
  /* 모서리 — 버튼은 둥근 사각(8px), pill은 배지/칩만 */
  --r-md:8px; --r-xl:16px; --r-button:8px; --r-full:9999px;
  --shadow-2:rgba(10,69,149,0.08) 0px 4px 12px;
  --maxw:1200px;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body {
  font-family:'Pretendard', -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color:var(--ink); background:var(--canvas);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
  word-break:keep-all;        /* [워드랩①] 한글 단어 중간 끊김 방지 — 전역 상속 */
  overflow-wrap:break-word;   /* [워드랩④] 긴 토큰만 넘침 방지로 끊김 허용 */
}

/* 상단 내비 — 공동 브랜딩: KBS비즈니스 먼저, 제노믹 다음 */
.nav { background:var(--canvas); border-bottom:1px solid var(--hairline); }
.nav-inner { max-width:var(--maxw); margin:0 auto; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.brand-kbs { font-weight:700; color:var(--kbs-blue); letter-spacing:-0.2px; white-space:nowrap; }
.brand-div { width:1px; height:16px; background:var(--hairline-strong); flex:0 0 auto; }
.brand-gn { font-weight:500; color:var(--charcoal); white-space:nowrap; }
.brand-svc { margin-left:6px; padding-left:12px; border-left:1px solid var(--hairline); color:var(--slate); font-size:14px; white-space:nowrap; }
.nav-link { color:var(--action); text-decoration:none; font-weight:500; font-size:15px; white-space:nowrap; flex:0 0 auto; }

/* 히어로 */
.hero { background:var(--surface); padding:96px 24px; }
.hero-inner { max-width:760px; margin:0 auto; text-align:center; }
.hero-title { font-size:44px; line-height:1.2; font-weight:700; letter-spacing:-0.5px; color:var(--ink); margin:0 0 16px; word-break:keep-all; }
.hero-sub { font-size:18px; line-height:1.6; color:var(--slate); margin:0 auto 40px; max-width:620px; word-break:keep-all; }

/* 카드(로그인) */
.card { background:var(--canvas); border:1px solid var(--hairline-soft); border-radius:var(--r-xl); box-shadow:var(--shadow-2); padding:32px; max-width:440px; margin:0 auto; text-align:left; }
.card-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.card-title { font-size:20px; font-weight:500; margin:0; color:var(--ink); word-break:keep-all; }
.card-desc { font-size:14px; color:var(--slate); margin:0 0 20px; line-height:1.55; word-break:keep-all; }
.ico { display:inline-flex; width:24px; height:24px; color:var(--kbs-blue); flex:0 0 auto; }
.ico svg { width:24px; height:24px; }

/* 폼 공통 */
.field { display:block; margin-bottom:16px; }
.field-label { display:block; font-size:13px; font-weight:500; color:var(--charcoal); margin-bottom:6px; white-space:nowrap; }
.input { width:100%; height:44px; padding:0 14px; font-size:16px; font-family:inherit; color:var(--ink); background:var(--canvas); border:1px solid var(--hairline-strong); border-radius:var(--r-md); outline:none; }
.input:focus { border:2px solid var(--action); padding:0 13px; }
select.input { cursor:pointer; }
.error { color:var(--danger); background:var(--danger-light); border-radius:var(--r-md); padding:10px 12px; font-size:14px; margin:0 0 16px; word-break:keep-all; }

/* 버튼 — 8px 둥근 사각(pill 아님) */
.btn { font-family:inherit; font-size:15px; font-weight:500; line-height:1.3; border-radius:var(--r-button); border:0; cursor:pointer; padding:12px 24px; white-space:nowrap; }
.btn-primary { background:var(--action); color:var(--on-dark); width:100%; }
.btn-primary:active { background:var(--action-pressed); }
.btn-secondary { background:transparent; color:var(--kbs-blue); border:1px solid var(--hairline-strong); }
.btn-sm { padding:8px 16px; font-size:14px; width:auto; }

.demo-hint { font-size:12px; color:var(--steel); margin:18px 0 0; line-height:1.6; word-break:keep-all; }

/* 대시보드 */
.dash { background:var(--surface); padding:48px 24px; }
.dash-inner { max-width:920px; margin:0 auto; }
.preview-banner { background:var(--kbs-blue-light); color:var(--kbs-blue-deep); font-size:13px; padding:10px 14px; border-radius:var(--r-md); margin:0 0 20px; text-align:center; word-break:keep-all; }
.dash-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:24px; }
.dash-acct { font-size:16px; font-weight:500; color:var(--ink); margin:0 0 6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dash-scope { font-size:14px; color:var(--slate); margin:0; word-break:keep-all; }

.panel { background:var(--canvas); border:1px solid var(--hairline-soft); border-radius:var(--r-xl); box-shadow:var(--shadow-2); padding:24px; margin-bottom:20px; }
.panel-title { font-size:17px; font-weight:500; margin:0 0 16px; color:var(--ink); word-break:keep-all; }
.panel-sub { font-size:13px; color:var(--steel); font-weight:400; }

/* 등록 폼 그리드 */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.form-grid .field { margin-bottom:0; }

/* confirm-gate 경고 — 차분한 톤(응급실 톤 금지) */
.warn { background:var(--warning-light); border:1px solid #ECDDB0; border-radius:var(--r-md); padding:14px 16px; margin:0 0 16px; }
.warn-text { color:var(--warning); font-size:14px; margin:0 0 12px; line-height:1.55; word-break:keep-all; }
.warn-actions { display:flex; gap:8px; justify-content:flex-end; }

/* 배지 */
.badge { display:inline-block; background:var(--kbs-blue-light); color:var(--kbs-blue-deep); font-size:13px; font-weight:500; border-radius:var(--r-full); padding:4px 12px; white-space:nowrap; }

/* 회원 명단 테이블(table-row) */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th { text-align:left; color:var(--slate); font-weight:500; font-size:13px; padding:10px 12px; border-bottom:1px solid var(--hairline); white-space:nowrap; }
.table td { padding:12px; border-bottom:1px solid var(--hairline-soft); color:var(--ink); vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:0; }
.empty { color:var(--steel); font-size:14px; padding:18px 0; text-align:center; }

/* 푸터 — 공동 브랜딩: KBS비즈니스 먼저 */
.footer { background:var(--ink); color:var(--on-dark); padding:48px 24px; }
.footer-inner { max-width:var(--maxw); margin:0 auto; }
.footer-brand { display:flex; align-items:center; gap:10px; font-size:15px; flex-wrap:nowrap; white-space:nowrap; }
.footer-brand .brand-kbs { color:var(--on-dark); }
.footer-brand .brand-x { color:rgba(255,255,255,0.5); }
.footer-brand .brand-gn { color:rgba(255,255,255,0.85); font-weight:500; }
.footer-meta { color:rgba(255,255,255,0.6); font-size:13px; margin:14px 0 0; word-break:keep-all; }

@media (max-width:560px) {
  .form-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .hero { padding:56px 20px; }
  .hero-title { font-size:32px; }
  .brand-svc { display:none; }
  .footer-brand { font-size:14px; }
  .dash { padding:32px 16px; }
}