/* ===== Shared styles for 4dist auth/admin/manager/site pages (matches default.html dark theme) ===== */

/* Brand wordmark fonts — 4D: Kanit Black Italic / ist: Montserrat Black Italic */
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,900&family=Montserrat:ital,wght@1,900&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* rem 기준점 — 설정 페이지 표준(user-config/settings: 본문 14px·입력 13px)과 일치.
   rem 단위 전체에 일괄 적용: 1rem=14px, 입력 .92rem≈13px, 보조 .85rem≈12px */
html { font-size: 14px; }

/* 문서 페이지(privacy/terms/copyright) — 약관류 본문은 한 단계 더 작게 */
.page.doc .panel { font-size: .88rem; line-height: 1.6; }
.page.doc .panel h2 { font-size: .98rem; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Apple SD Gothic Neo",
               "Malgun Gothic", sans-serif;
  background: #0b0d10;
  color: #e6e8eb;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: #8ab4f8; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Nav — matches the site-portal topbar (bbadda 등 entrance template) ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 13px clamp(16px, 4vw, 40px);
  background: rgba(10,12,16,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #232830;
}
.nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav .brand img { height: 36px; width: auto; display: block; }
/* 가로형 BI(마크+4Dist) 이미지 — default.html 헤더와 동일 (태그라인은 .tag 텍스트) */
.nav .brand img.brand-bi { height: 18px; }
@media (max-width: 560px) { .nav .brand img.brand-bi { height: 15px; } }
.nav .brand .mark {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;   /* "ist" — i가 1로 안 보이게 */
  font-style: italic; font-weight: 900;
  font-size: 18px; letter-spacing: .5px; line-height: 1;
  color: #eef2f7;
}
.nav .brand .mark b {
  font-family: 'Kanit', 'Segoe UI', Arial, sans-serif;        /* "4D" */
  font-size: 23px;
  color: #d2181f;
}
/* Language combobox — bbadda portal .lang 과 동일 */
.lang-select {
  appearance: auto;
  font: inherit; font-size: 13px;
  background: #14151c; color: #eef2f7;
  border: 1px solid #262b36; border-radius: 999px;
  padding: 8px 12px; outline: none; cursor: pointer;
}
.nav .brand .tag {
  font-size: 11px; color: #9aa3ad; letter-spacing: 2px; text-transform: uppercase;
  border-left: 1px solid #2a2a2e; padding-left: 12px; margin-left: 2px; white-space: nowrap;
}
.nav-right { display: flex; align-items: center; gap: .65rem; }

/* 좁은 화면: bbadda topbar 와 동일한 대응 — 잘리는 대신 줄바꿈 + 축소 */
@media (max-width: 760px) {
  .nav { flex-wrap: wrap; row-gap: 6px; padding: 8px 14px; }
  .nav .brand .tag { display: none; }
  .nav .brand img { height: 30px; }
  .nav .brand .mark { font-size: 15px; }
  .nav .brand .mark b { font-size: 19px; }
  .nav-right { flex-wrap: wrap; gap: .45rem; justify-content: flex-end; margin-left: auto; }
  .nav-right .btn-ghost, .nav-right .btn-primary { padding: 7px 12px; font-size: 13px; }
  .nav .lang-select { padding: 6px 10px; font-size: 12px; }
  .nav a.link { font-size: .85rem; }
}

/* ===== Auth card (login / pending) — Apple-like monochrome minimal ===== */
.auth-card {
  max-width: 460px;
  margin: 6vh auto 4vh;
  padding: 2rem 1.6rem;
  background: #101013;
  border: 1px solid #26262b;
  border-radius: 24px;
}
.auth-card h1 { margin: 0 0 .35rem; font-size: 1.55rem; letter-spacing: -.02em; font-weight: 600; }
.auth-card p  { color: #cfd5dc; margin: 0 0 1.2rem; }
.auth-card .muted { color: #98989d; }
/* Field captions ("SITE TO JOIN", "SIGN-UP NOTE") — small caps, Apple settings style */
.site-field label > span:first-child {
  text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; color: #98989d;
}
.auth-card .small { font-size: .85rem; }
.auth-card .footer { margin-top: 1.5rem; }

/* ===== SSO buttons — hairline outline, brand color only on the icon ===== */
.sso { display: flex; flex-direction: column; gap: .55rem; margin: .5rem 0 1.2rem; }
.btn-sso {
  display: flex; align-items: center; justify-content: center;
  padding: .8rem 1rem;
  font-size: .95rem; font-weight: 500;
  border-radius: 14px;
  border: 1px solid #3a3a3f;
  background: transparent;
  color: #f5f5f7;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn-sso:not(:disabled):hover { background: rgba(255,255,255,.05); border-color: #4a4a50; }
.btn-sso:disabled { opacity: .55; cursor: not-allowed; }

.btn-sso.kakao .icon { color: #ffe812; }
.btn-sso.line  .icon { color: #06c755; }

/* Email = the primary CTA: solid near-white, Apple style */
.btn-sso.email { background: #f5f5f7; color: #101013; border-color: transparent; font-weight: 600; }
.btn-sso.email:not(:disabled):hover { background: #ffffff; border-color: transparent; }

/* Swap link (login ↔ register) — hairline divider + pill CTA */
.swap-link {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  margin: 1.8rem 0 .5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #26262b;
  font-size: .92rem;
}
.swap-link a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .5rem 1.1rem;
  border: 1px solid #3a3a3f; border-radius: 999px;
  color: #f5f5f7; text-decoration: none; font-weight: 600; font-size: .88rem;
  transition: background .15s ease, border-color .15s ease;
}
.swap-link a:hover { background: rgba(255,255,255,.05); border-color: #4a4a50; text-decoration: none; }
/* 강조 변형 — 로그인 화면의 Create an account (브랜드 레드) */
.swap-link a.accent {
  background: linear-gradient(135deg, #e11d2a, #ff4d57);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 18px -8px #e11d2a;
}
.swap-link a.accent:hover { background: linear-gradient(135deg, #e92836, #ff5d66); border-color: transparent; box-shadow: 0 10px 22px -8px #e11d2a; }
/* 강조 변형 — 가입 화면의 Sign in (그린) */
.swap-link a.accent-green {
  background: linear-gradient(135deg, #0a9b4a, #34c759);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 18px -8px #0a9b4a;
}
.swap-link a.accent-green:hover { background: linear-gradient(135deg, #0ca850, #3fd465); border-color: transparent; box-shadow: 0 10px 22px -8px #0a9b4a; }

.divider {
  display: flex; align-items: center; gap: .65rem;
  margin: 1rem 0; color: #6f7782; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #232830; }

/* ===== Forms ===== */
.mock-form, .inline-form { display: flex; flex-direction: column; gap: .65rem; }
.inline-form { flex-direction: row; flex-wrap: wrap; gap: .5rem; align-items: center; }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: #cfd5dc; }
/* 폼 컨트롤 — OMS dashboard 표준 템플릿(web/user-config.html :root 팔레트)과 통일:
   입력 배경 #0b1220 / 테두리 #243045 / 라운드 6px / 포커스 블루 */
input, select, textarea {
  appearance: none; -webkit-appearance: none;
  padding: .5rem .65rem; font-size: .92rem;
  background: #0b1220;
  border: 1px solid #243045;
  border-radius: 6px;
  color: #e5e7eb;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
select { appearance: auto; -webkit-appearance: auto; color-scheme: dark; }  /* 네이티브 화살표 유지 */
input:focus, select:focus, textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
input::placeholder, textarea::placeholder { color: #64748b; }

/* 체크박스 — 위 전역 input 스킨(appearance:none·패딩·radius)이 체크 표시까지
   지워 빈 원으로 보인다. 네이티브 렌더링으로 되돌리고 다크 테마 색만 입힌다. */
input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto;
  width: 16px; height: 16px; padding: 0;
  border: none; border-radius: 0; background: none;
  accent-color: #1e40af; color-scheme: dark;
  cursor: pointer;
}
input[type="checkbox"]:focus { box-shadow: none; }

/* ===== Buttons — dashboard 표준 (블루 #1e40af / radius 10px) ===== */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: #fff;
  background: #1e40af;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .14s ease, border-color .14s ease;
}
.btn-primary:hover { background: #1d4ed8; }
.btn-primary.small { padding: .35rem .8rem; font-size: .82rem; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: #cfd5dc; background: transparent;
  border: 1px solid #243045; cursor: pointer; text-decoration: none;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.btn-ghost:hover { border-color: #3b82f6; color: #e3e8ee; background: #0f172a; }
.btn-ghost.small { padding: .3rem .7rem; font-size: .8rem; font-weight: 500; }
/* anchor 형 버튼은 호버 시에도 밑줄 금지 (global a:hover 보다 우선) */
a.btn-primary:hover, a.btn-ghost:hover { text-decoration: none; }

/* Destructive action — subtle red on hover, neutral by default */
.btn-ghost.danger { color: #cfd5dc; }
.btn-ghost.danger:hover { background: #2a1518; border-color: #6b2a30; color: #f6a3a3; }

.msg { min-height: 1.2em; font-size: .85rem; color: #9aa3ad; margin: .25rem 0 0; }
.msg.err { color: #f6a3a3; }
.msg.ok  { color: #9aebb1; }

/* ===== Page layout (admin / manager) ===== */
.page { max-width: 1080px; margin: 2vh auto 6vh; padding: 0 1.5rem; }
.page-head { margin: 1rem 0 1.8rem; }
.page-head h1 { margin: 0 0 .25rem; font-size: 1.7rem; letter-spacing: -.01em; }
.page-head .muted { margin: 0; color: #9aa3ad; }

/* ===== 공통 페이지 헤더 — 아이콘 박스 + 제목 + 서브타이틀, 액션은 우측, 설명은 하단 tip
   (me.html / site.html / admin.html 통일) ===== */
.page-head .ph-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head .ph-title { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.page-head .ph-icon { flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: #13294b; border: 1px solid #24416e; color: #7da2ff;
  display: flex; align-items: center; justify-content: center; }
.page-head .ph-icon svg { width: 24px; height: 24px; }
.page-head .ph-titletext { min-width: 0; }
.page-head .ph-titletext h1 { margin: 0; }
.page-head .ph-sub { margin-top: .15rem; font-size: 1.05rem; font-weight: 600; color: #e3e8ee; word-break: break-word; }
.page-head .ph-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
/* 페이지 하단 설명(Tip) — 작게, 구분선 위로 */
.page-head-tip { margin: 2.2rem 0 0; padding-top: .9rem; border-top: 1px solid #1d2228;
  font-size: .76rem; color: #7d8794; line-height: 1.65; }
@media (max-width: 560px) {
  .page-head .ph-icon { width: 38px; height: 38px; border-radius: 10px; }
  .page-head .ph-icon svg { width: 20px; height: 20px; }
  .page-head .ph-sub { font-size: .98rem; }
  .page-head .ph-actions { width: 100%; }
}

.panel {
  background: #14181d;
  border: 1px solid #232830;
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.5rem;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; }
.panel-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: .005em; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }

/* ===== Chips ===== */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  padding: .25rem .65rem; border-radius: 999px;
  background: #1a2230; border: 1px solid #243044;
  font-size: .82rem; color: #cfd5dc;
}

/* ===== Tables ===== */
.users { width: 100%; border-collapse: collapse; font-size: .9rem; }
.users th, .users td { text-align: left; padding: .55rem .65rem; border-bottom: 1px solid #1d2228; vertical-align: middle; }
.users th { color: #9aa3ad; font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.users td.small { color: #9aa3ad; font-size: .8rem; }
.users td.actions { display: flex; gap: .3rem; flex-wrap: wrap; }

/* ===== Badge / status ===== */
.badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  background: #1a2230; color: #cfd5dc; border: 1px solid #243044;
}
/* 역할명 전환 3단계: 정본은 신 값(admin/manager). 구 값(supervisor/coach) 별칭은 안전망으로 유지 */
.badge.admin, .badge.supervisor   { color: #c6a3ff; border-color: #3a2a52; background: #1f1729; }
.badge.manager, .badge.coach      { color: #8ab4f8; border-color: #243d65; background: #161f2c; }
.badge.operator   { color: #f5a76b; border-color: #4a3424; background: #2a1d12; }
.badge.user       { color: #9aebb1; border-color: #1f4b2d; background: #152018; }
.badge.guest      { color: #9aa3ad; border-color: #2d3441; background: #14181d; }

/* Provider pill — shown in admin/site tables to indicate which OAuth provider was used */
.provider-pill {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: lowercase;
  font-weight: 600;
  background: #1a1f27;
  color: #cfd5dc;
  border: 1px solid #2d3441;
}
.provider-pill.google { color: #8ab4f8; border-color: #243d65; background: #161f2c; }
.provider-pill.apple  { color: #e6e8eb; border-color: #3a4254; background: #1a1f27; }
.provider-pill.kakao  { color: #fee500; border-color: #4a3f00; background: #2a2400; }
.provider-pill.line   { color: #06c755; border-color: #094d24; background: #0d2418; }
.provider-pill.email  { color: #c6a3ff; border-color: #3a2a52; background: #1f1729; }
.provider-pill.mock   { color: #f5d77f; border-color: #4a3e1a; background: #2a230d; }

.status { font-size: .8rem; color: #9aa3ad; }
.status.approved { color: #9aebb1; }
.status.pending  { color: #f5d77f; }
.status.rejected { color: #f6a3a3; }

/* ===== Dialog ===== */
dialog {
  background: #14181d; color: #e6e8eb;
  border: 1px solid #232830; border-radius: 14px;
  padding: 1.4rem; min-width: 340px;
}
dialog::backdrop { background: rgba(0,0,0,.55); }
dialog h3 { margin: 0 0 .8rem; }
dialog form { display: flex; flex-direction: column; gap: .65rem; }
.dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }

/* ===== 4Dist 공식 드롭다운 템플릿 =====
   언어 선택·사용자 메뉴 등 모든 헤더 드롭다운은 이 구조/스타일을 쓴다.
   (webplayer/landing/assets/portal.css 에 동일 블록 — 수정 시 양쪽 동기화)
   구조: .dd > .dd-btn(.dd-label+.caret) + .dd-menu[hidden] > .dd-item */
.dd { position: relative; display: inline-flex; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 7px;
  box-sizing: border-box; height: 36px; padding: 0 14px; border-radius: 10px;
  font-family: inherit; font-style: normal; font-size: 13px; font-weight: 600;
  white-space: nowrap;
  background: #14151c; color: #eef2f7;
  border: 1px solid #262b36; cursor: pointer;
}
.dd-btn:hover { border-color: #d2181f; }
.dd-btn .caret { font-size: 10px; color: #9aa3ad; }
.dd-menu {
  position: absolute; right: 0; left: auto; top: calc(100% + 8px);
  min-width: 100%; width: max-content;
  display: flex; flex-direction: column; padding: 5px;
  background: #14151c; border: 1px solid #262b36; border-radius: 12px;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.7); z-index: 60;
}
.dd-menu[hidden] { display: none; }
.dd-item {
  display: block; width: 100%; box-sizing: border-box; text-align: right; padding: 8px 14px;
  background: none; border: 0; border-radius: 8px;
  color: #eef2f7; font: inherit; font-size: 13px; font-weight: 600; font-style: normal;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.dd-item:hover { background: rgba(210,24,31,.14); color: #ff4d57; }
.dd-item[aria-selected="true"] { color: #ff4d57; font-weight: 700; }
.dd-role {
  display: block; text-align: right; padding: 7px 14px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: #9aa3ad; border-bottom: 1px solid #262b36; margin-bottom: 4px;
  white-space: nowrap;
}

/* 헤더의 Sign in / Log in / Sign up — 공식 dd-btn 규격과 동일 (언어 버튼과 한 세트).
   (webplayer/landing/assets/portal.css 에 동일 블록 — 수정 시 양쪽 동기화) */
.nav-right .btn-ghost, .nav-right .btn-primary {
  display: inline-flex; align-items: center; box-sizing: border-box;
  height: 36px; padding: 0 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  background: #14151c; color: #eef2f7; border: 1px solid #262b36;
  box-shadow: none;
}
.nav-right .btn-ghost:hover, .nav-right .btn-primary:hover {
  transform: none; border-color: #d2181f; box-shadow: none; background: #14151c;
}
.nav-right .btn-primary { color: #ff4d57; }   /* CTA 구분은 텍스트 컬러만 */

/* [hidden] 속성이 위 display 규칙(.dd inline-flex, .dd-item block 등)에 지지 않게 */
/* HTML hidden 속성은 어떤 display 규칙(.dd/.badge/.btn-* 등)보다 우선한다 */
[hidden] { display: none !important; }

/* 네이티브 date 입력(캘린더) 다크 테마 */
input[type="date"] { color-scheme: dark; }

/* 폼 컨트롤 폰트 통일 — 네이티브 date(생일) 입력 등이 페이지 폰트를 따른다 */
input, select, textarea, button { font-family: inherit; }

/* 공통 헤더 유저 영역(auth-nav.js 렌더 컨테이너) */
.auth-nav { display: inline-flex; align-items: center; gap: .65rem; }

/* ===== 생일 캘린더(페이지 언어를 따르는 자체 달력 — 네이티브 date 는 브라우저
   로케일을 따라 페이지 언어와 어긋난다) ===== */
.bdate { position: relative; display: block; }
.bdate-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: 252px; padding: 10px; box-sizing: border-box;
  background: #14151c; border: 1px solid #262b36; border-radius: 12px;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.7);
}
.bdate-head { display: flex; gap: 6px; margin-bottom: 8px; }
.bdate-head select {
  flex: 1; min-width: 0; padding: 6px 8px;
  background: #0f1117; color: #eef2f7; border: 1px solid #262b36; border-radius: 8px;
}
.bdate-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bdate-grid .dw { font-size: 10px; opacity: .55; text-align: center; padding: 2px 0; }
.bdate-day {
  aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
  font-size: 12px; border-radius: 6px; border: 0; background: none; color: #eef2f7; cursor: pointer;
}
.bdate-day:hover { background: #243042; }
.bdate-day.sel { background: #d2181f; color: #fff; }
.bdate-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.bdate-foot button { background: none; border: 0; color: #9aa3ad; font-size: 12px; cursor: pointer; }
.bdate-foot button:hover { color: #ff4d57; }

/* ===== Mobile (≤560px): admin/site/me 등 .page 페이지 폭 대응 ===== */
@media (max-width: 560px) {
  .page { padding: 0 .8rem; margin: 1vh auto 4vh; }
  .page-head h1 { font-size: 1.4rem; }
  .panel { padding: 1rem .85rem; border-radius: 12px; }
  .panel-head { flex-wrap: wrap; gap: .5rem; }
  /* 다열 테이블(NAME/URL/가입목록/액션 등)은 좁은 폭에서 가로 스크롤 — 칼럼이
     찌부러지거나 화면 밖으로 깨지지 않게. 테이블을 블록으로 바꿔 스크롤 컨테이너화. */
  .users { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .users th, .users td { padding: .5rem .55rem; }
  /* 긴 URL 은 줄바꿈 허용(셀 안에서) */
  .users td a { word-break: break-all; white-space: normal; }
  .users td.actions { white-space: normal; }
  /* 입력/버튼이 한 줄에 안 들어가면 줄바꿈 */
  .row { gap: .5rem; }
}