/* Airbnb 디자인 토큰 → Bootstrap 5 / AdminLTE 4 (DESIGN.md 참고) */
:root {
  --c-primary: #ff385c;
  --c-primary-active: #e00b41;
  --c-primary-disabled: #ffd1da;
  --c-ink: #222222;
  --c-body: #3f3f3f;
  --c-muted: #6a6a6a;
  --c-muted-soft: #929292;
  --c-hairline: #dddddd;
  --c-hairline-soft: #ebebeb;
  --c-border-strong: #c1c1c1;
  --c-canvas: #ffffff;
  --c-surface-soft: #f7f7f7;
  --c-surface-strong: #f2f2f2;
  --c-error: #c13515;
  --c-success: #008a05;

  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 32px; --r-full: 9999px;
  --shadow-card: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.04) 0 2px 6px, rgba(0,0,0,.1) 0 4px 8px;
  --font-sans: Inter, 'IBM Plex Sans KR', -apple-system, system-ui, 'Helvetica Neue', sans-serif;

  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 0.9375rem;
  --bs-body-color: var(--c-body);
  --bs-body-bg: var(--c-canvas);
  --bs-emphasis-color: var(--c-ink);
  --bs-heading-color: var(--c-ink);
  --bs-secondary-color: var(--c-muted);
  --bs-tertiary-bg: var(--c-surface-soft);
  --bs-border-color: var(--c-hairline);
  --bs-border-color-translucent: var(--c-hairline);
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-sm: var(--r-xs);
  --bs-border-radius-lg: var(--r-md);
  --bs-border-radius-xl: var(--r-lg);
  --bs-primary: var(--c-primary);
  --bs-primary-rgb: 255, 56, 92;
  --bs-danger: var(--c-error);
  --bs-danger-rgb: 193, 53, 21;
  --bs-link-color: var(--c-ink);
  --bs-link-color-rgb: 34, 34, 34;
  --bs-link-hover-color: var(--c-ink);
  --bs-link-hover-color-rgb: 34, 34, 34;
  --bs-focus-ring-color: rgba(34, 34, 34, .25);
}

html[lang="ja"] { --font-sans: Inter, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, system-ui, sans-serif; }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; letter-spacing: 0; }
a { text-underline-offset: 2px; }
a:not(.btn):not(.nav-link):not(.brand-link) { text-decoration: none; }
a:not(.btn):not(.nav-link):not(.brand-link):hover { text-decoration: underline; }
.text-muted { color: var(--c-muted) !important; }
code { color: var(--c-ink); background: var(--c-surface-strong); padding: 1px 6px; border-radius: var(--r-xs); }

/* 타이포 — 굵기는 절제 */
.page-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--c-ink); }
.card-title { font-size: 1rem; font-weight: 600; color: var(--c-ink); margin: 0; }
.section-title { font-size: 0.875rem; font-weight: 600; color: var(--c-ink); margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--c-hairline-soft); }
.breadcrumb { --bs-breadcrumb-font-size: 0.8125rem; --bs-breadcrumb-divider-color: var(--c-muted-soft); }
.breadcrumb a { color: var(--c-muted); }

/* 레이아웃 */
.app-wrapper { background: var(--c-canvas); }
.app-header { background: var(--c-canvas); border-bottom: 1px solid var(--c-hairline); box-shadow: none; min-height: 64px; }
.app-header .nav-link { color: var(--c-ink); }
.app-main { background: var(--c-canvas); }
.app-content-header { padding: 32px 8px 16px; }
.app-content { padding: 0 8px 48px; }
.app-footer { background: var(--c-canvas); border-top: 1px solid var(--c-hairline); color: var(--c-muted); }

/* 사이드바: 흰 배경 + hairline (Airbnb 에는 어두운 표면이 없음) */
.app-sidebar { background: var(--c-canvas) !important; border-right: 1px solid var(--c-hairline); box-shadow: none !important; }
.sidebar-brand { border-bottom: 1px solid var(--c-hairline) !important; height: 64px; }
.brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-ink) !important; }
.brand-text { font-weight: 600; font-size: 1.0625rem; color: var(--c-ink); }
.brand-mark {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--r-sm); background: var(--c-primary); color: #fff; font-size: 1rem;
}
.brand-mark-lg { width: 48px; height: 48px; border-radius: var(--r-md); font-size: 1.5rem; }
.sidebar-menu { padding: 0 8px; }
.sidebar-menu .nav-link {
  color: var(--c-body) !important; border-radius: var(--r-sm) !important; padding: 10px 12px; margin-bottom: 2px;
  font-weight: 500;
}
.sidebar-menu .nav-link:hover { background: var(--c-surface-soft) !important; color: var(--c-ink) !important; }
.sidebar-menu .nav-link.active { background: var(--c-surface-strong) !important; color: var(--c-ink) !important; font-weight: 600; box-shadow: none !important; }
.sidebar-menu .nav-link.active .nav-icon { color: var(--c-primary); }
.sidebar-menu .nav-icon { color: var(--c-muted); }

/* 카드: 한 단계 그림자 */
.card { border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-card); --bs-card-cap-bg: transparent; overflow: hidden; }
.card-header::after { display: none; } /* AdminLTE clearfix 가 flex 정렬을 깨뜨림 */
.card-header { border-bottom: 1px solid var(--c-hairline-soft); padding: 16px 24px; }
.card-body { padding: 24px; }
.card-footer { background: var(--c-surface-soft); border-top: 1px solid var(--c-hairline-soft); padding: 16px 24px; }
.stat-card .card-body { padding: 20px 24px; }
.stat-label { display: flex; align-items: center; gap: 8px; color: var(--c-muted); font-size: 0.875rem; font-weight: 500; }
.stat-value { font-size: 1.75rem; font-weight: 600; color: var(--c-ink); letter-spacing: -0.02em; margin-top: 4px; }
.empty-state { padding: 48px 24px; text-align: center; color: var(--c-muted); }

/* 버튼: 높이 48 · 반경 8 (작은 버튼은 비율 유지) */
.btn { --bs-btn-font-weight: 500; --bs-btn-border-radius: var(--r-sm); --bs-btn-padding-y: 11px; --bs-btn-padding-x: 20px; --bs-btn-focus-box-shadow: 0 0 0 2px var(--c-ink); }
.btn-sm { --bs-btn-padding-y: 6px; --bs-btn-padding-x: 12px; --bs-btn-font-size: 0.875rem; --bs-btn-border-radius: var(--r-sm); }
.btn-primary {
  --bs-btn-bg: var(--c-primary); --bs-btn-border-color: var(--c-primary);
  --bs-btn-hover-bg: var(--c-primary-active); --bs-btn-hover-border-color: var(--c-primary-active);
  --bs-btn-active-bg: var(--c-primary-active); --bs-btn-active-border-color: var(--c-primary-active);
  --bs-btn-disabled-bg: var(--c-primary-disabled); --bs-btn-disabled-border-color: var(--c-primary-disabled); --bs-btn-disabled-opacity: 1;
}
.btn-outline-secondary {
  --bs-btn-color: var(--c-ink); --bs-btn-border-color: var(--c-ink);
  --bs-btn-hover-color: var(--c-ink); --bs-btn-hover-bg: var(--c-surface-soft); --bs-btn-hover-border-color: var(--c-ink);
  --bs-btn-active-color: var(--c-ink); --bs-btn-active-bg: var(--c-surface-strong); --bs-btn-active-border-color: var(--c-ink);
}
.btn-outline-danger {
  --bs-btn-color: var(--c-error); --bs-btn-border-color: var(--c-hairline);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--c-error); --bs-btn-hover-border-color: var(--c-error);
}
.btn-danger {
  --bs-btn-bg: var(--c-error); --bs-btn-border-color: var(--c-error);
  --bs-btn-hover-bg: #b32505; --bs-btn-hover-border-color: #b32505;
  --bs-btn-disabled-bg: var(--c-error); --bs-btn-disabled-border-color: var(--c-error); --bs-btn-disabled-opacity: .35;
}
.btn-link { --bs-btn-color: var(--c-muted); --bs-btn-hover-color: var(--c-ink); }

/* 입력란: 1px hairline, focus 시 2px ink, glow 없음 */
.form-label { font-size: 0.875rem; font-weight: 500; color: var(--c-ink); margin-bottom: 6px; }
.form-control, .form-select, .input-group-text {
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); min-height: 48px; color: var(--c-ink);
}
.form-control-sm, .form-select-sm { min-height: 36px; }
.input-group-text { background: var(--c-surface-soft); color: var(--c-muted); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); outline: 0;
}
.form-control[readonly] { background: var(--c-surface-soft); color: var(--c-muted); }
.form-text { color: var(--c-muted); font-size: 0.8125rem; }
.form-check-input:checked { background-color: var(--c-ink); border-color: var(--c-ink); }
.form-switch .form-check-input { width: 2.5em; height: 1.375em; margin-top: 0; }
.form-check-label { padding-left: 4px; }

/* 표 */
.table { --bs-table-color: var(--c-body); --bs-table-hover-bg: var(--c-surface-soft); --bs-table-border-color: var(--c-hairline-soft); }
.table > thead th { font-size: 0.8125rem; font-weight: 500; color: var(--c-muted); background: var(--c-canvas); border-bottom-color: var(--c-hairline); white-space: nowrap; }
.table > :not(caption) > * > * { padding: 14px 24px; }
.table-sm > :not(caption) > * > * { padding: 8px 12px; }
.table a { color: var(--c-ink); }
.dns-table td { vertical-align: top; }
.col-w-25 { width: 25%; }
.col-w-40 { width: 40%; }
.col-w-50 { width: 50%; }
.min-w-0 { min-width: 0; }

/* 진행 막대 */
.progress { height: 6px; background: var(--c-surface-strong); border-radius: var(--r-full); }
.progress-thin { height: 4px; }
.progress-bar { background: var(--c-ink); border-radius: var(--r-full); }
.progress-bar.bg-danger { background: var(--c-error) !important; }

/* 배지 */
.badge { font-weight: 600; font-size: 0.75rem; border-radius: var(--r-full); padding: 4px 10px; }
.badge-soft-success { background: #e8f5e9; color: var(--c-success); }
.badge-soft-warning { background: #fff4e0; color: #8a5300; }
.badge-soft-danger { background: #fdecea; color: var(--c-error); }
.text-bg-secondary { background: var(--c-surface-strong) !important; color: var(--c-muted) !important; }
.text-bg-light { background: var(--c-surface-strong) !important; color: var(--c-ink) !important; }

/* 알림 */
.alert { border-radius: var(--r-md); border: 1px solid var(--c-hairline); background: var(--c-canvas); color: var(--c-ink); box-shadow: var(--shadow-card); }
.alert-danger { border-color: #f3c1b5; background: #fff5f2; color: var(--c-error); }
.alert-success { border-color: #b9e0bb; background: #f3faf3; color: #1d5e20; }

/* 정의 목록 */
.detail-list dt { font-size: 0.8125rem; font-weight: 500; color: var(--c-muted); }
.detail-list dd { color: var(--c-ink); margin-bottom: 16px; }
.detail-list dd:last-child { margin-bottom: 0; }

/* 모달 */
.modal-content { border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-card); }

/* 로그인 */
.login-page { min-height: 100vh; display: grid; place-items: center; background: var(--c-surface-soft); padding: 16px; }
.login-card { width: 100%; max-width: 400px; background: var(--c-canvas); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 40px 32px; }

/* 진행 막대 폭 (CSP 로 인라인 style 을 쓰지 않음) */
.pw-0{width:0}.pw-5{width:5%}.pw-10{width:10%}.pw-15{width:15%}.pw-20{width:20%}.pw-25{width:25%}.pw-30{width:30%}
.pw-35{width:35%}.pw-40{width:40%}.pw-45{width:45%}.pw-50{width:50%}.pw-55{width:55%}.pw-60{width:60%}.pw-65{width:65%}
.pw-70{width:70%}.pw-75{width:75%}.pw-80{width:80%}.pw-85{width:85%}.pw-90{width:90%}.pw-95{width:95%}.pw-100{width:100%}

/* 언어 전환 */
.lang-switch { display: inline-flex; border: 1px solid var(--c-hairline); border-radius: var(--r-full); padding: 2px; }
.lang-switch a { font-size: 0.8125rem; font-weight: 500; color: var(--c-muted); padding: 4px 10px; border-radius: var(--r-full); text-decoration: none !important; }
.lang-switch a:hover { color: var(--c-ink); }
.lang-switch a.active { background: var(--c-ink); color: #fff; }
.login-lang { position: fixed; top: 16px; right: 16px; }

/* 대시보드 사용률 목록 */
.usage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.usage-list a { color: var(--c-ink); }

/* DNS */
.dns-table > :not(caption) > * > * { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.dns-value { display: block; font-size: 0.8125rem; white-space: pre-wrap; word-break: break-all; padding: 4px 8px; }
.dns-value-long { max-height: 4.8em; overflow: auto; }
.dns-status { min-width: 160px; max-width: 280px; }
.dns-current { color: var(--c-body); }

/* 삭제 확인 */
.confirm-target { background: var(--c-surface-strong); border-radius: var(--r-xs); padding: 6px 10px; color: var(--c-ink); word-break: break-all; user-select: all; }

/* 좁은 화면: 표는 줄바꿈 대신 가로 스크롤 (긴 값 열은 .text-break 로 예외) */
.table-responsive .table:not(.dns-table) :is(td, th):not(.text-break) { white-space: nowrap; }
.dns-current { max-height: 4.8em; overflow: auto; word-break: break-all; }
.table-responsive .table:not(.dns-table) td.text-break { min-width: 200px; }

/* 좁은 화면: DNS 표는 레코드별 블록으로 쌓는다 */
@media (max-width: 767.98px) {
  .dns-table thead { display: none; }
  .dns-table, .dns-table tbody, .dns-table tr, .dns-table td { display: block; width: 100%; }
  .dns-table tr { padding: 12px 0; border-bottom: 1px solid var(--c-hairline-soft); }
  .dns-table > :not(caption) > * > * { padding: 4px 0; border: 0; }
  .dns-table td:first-child { display: flex; gap: 8px; align-items: center; }
  .dns-status { max-width: none; }
}

/* 체크박스 목록 */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset legend.form-label { font-size: 0.875rem; float: none; padding: 0; width: auto; }
.alert-warning { border-color: #f5d9a8; background: #fffaf0; color: #6b4300; }

.login-hint { text-align: left; background: var(--c-surface-soft); border-radius: var(--r-sm); padding: 10px 12px; color: var(--c-body); }
.otp-input { font-size: 1.375rem; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }