/* =============================================================================
   DAMONG 관리자 — 2026 브랜드 리디자인
   -----------------------------------------------------------------------------
   common.css/main.css를 지우거나 구조를 바꾸지 않고(기존 30여개 관리 화면의
   레이아웃·드래그앤드롭·업로드 등 자바스크립트 훅은 전부 클래스명 기준이라
   손대면 회귀 위험이 큼), 이 파일을 항상 "마지막"에 불러와 색상·타이포·여백
   토큰만 새 브랜드(테라코타 #C0472C, 따뜻한 오프화이트)로 겹쳐 그린다.
   홈페이지 신규 개편(static/tailwind/input.css)과 동일한 톤앤매너.
   ========================================================================== */

:root {
  --bg: #FAFAF8;
  --bg-raised: #FFFFFF;
  --ink: #14161A;
  --ink-soft: #5B6270;
  --line: #E6E4DE;
  --accent: #C0472C;
  --accent-soft: #FBEEE9;
  --accent-ink: #8A3220;

  --sb-bg: #1C1917;
  --sb-bg-raised: #262220;
  --sb-text: #C9C4BE;
  --sb-text-soft: #8D8680;
  --sb-text-active: #FFFFFF;
  --sb-accent: #E9A088;
  --sb-line: rgba(255,255,255,.08);
}

body { background: var(--bg); color: var(--ink); }

/* -----------------------------------------------------------------------
   좌측 사이드바
----------------------------------------------------------------------- */
/* common.css/main.css는 예전에 있던 80px 짜리 상단 nav를 기준으로 높이를 계산하는데
   (calc(100% - 80px)) 지금 레이아웃엔 그 nav가 없어서 사이드바 하단에 빈 여백이
   생긴다. nav가 없는 현재 구조에 맞춰 뷰포트 전체 높이를 쓰도록 바로잡는다. */
.left-menu, .main-area { height: 100% !important; }
.left-menu {
  background: var(--sb-bg) !important;
  border-right: none !important;
  padding: 0 12px 20px !important;
  display: flex;
  flex-direction: column;
}
.left-menu .logo {
  height: auto !important;
  padding: 22px 10px 18px !important;
  margin-bottom: 6px;
}
.left-menu .logo img {
  width: auto !important;
  max-width: 100%;
  height: 34px !important;
  object-fit: contain !important;
  display: block;
  background: #fff;
  border-radius: 8px;
  padding: 5px 10px;
}
.left-menu > button {
  height: 46px !important;
  border-bottom: none !important;
  border-radius: 10px !important;
  color: var(--sb-text) !important;
  font-size: 14.5px !important;
  padding: 0 12px !important;
  margin-bottom: 2px !important;
  position: relative;
}
.left-menu > button > i {
  height: 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  font-size: 15px !important;
  color: var(--sb-text-soft) !important;
  margin-right: 10px;
  transition: color .15s ease;
}
.left-menu > button > span { flex: 1; text-align: left; }
.left-menu > button .chevron {
  font-size: 11px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  color: var(--sb-text-soft) !important;
  margin-right: 0 !important;
  transition: transform .2s ease, color .15s ease;
}
.left-menu > button.on .chevron { transform: rotate(180deg); }

.left-menu > button:hover,
.left-menu > button.on {
  background: var(--sb-bg-raised) !important;
  color: var(--sb-text-active) !important;
  border-bottom: none !important;
}
.left-menu > button:hover > i,
.left-menu > button.on > i,
.left-menu > button:hover .chevron,
.left-menu > button.on .chevron { color: var(--sb-accent) !important; }

/* 대시보드/구글애널리스틱처럼 서브메뉴 없는 1뎁스 버튼의 활성 상태는
   좌측 강조바 + 포인트컬러 텍스트로 더 뚜렷하게 표시 */
.left-menu > button.menu1.on,
.left-menu > button.menu2.on {
  background: rgba(233,160,136,0.12) !important;
  color: var(--sb-accent) !important;
}
.left-menu > button.menu1.on > i,
.left-menu > button.menu2.on > i { color: var(--sb-accent) !important; }
.left-menu > button.menu1.on::before,
.left-menu > button.menu2.on::before {
  content: '';
  position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  background: var(--sb-accent); border-radius: 0 3px 3px 0;
}

.sub-menu {
  background: var(--sb-bg-raised) !important;
  border-radius: 10px !important;
  margin: 0 0 4px !important;
  overflow: hidden;
}
.sub-wrap { padding: 4px 0; }
/* 접힌 서브메뉴는 안쪽 여백까지 없애야 빈 막대가 안 보인다 */
.sub-menu:not(.on) { margin: 0 !important; }
.sub-menu:not(.on) .sub-wrap { padding: 0; }
.sub-wrap > a {
  color: var(--sb-text) !important;
  font-size: 13.5px !important;
  padding-left: 44px !important;
  font-weight: 500 !important;
}
.sub-menu.on .sub-wrap > a { height: 42px !important; }
.sub-wrap > a::before,
.sub-wrap > a::after { background: var(--sb-line) !important; left: 24px !important; }
.sub-wrap > a:hover,
.sub-wrap > a.on {
  background: rgba(233,160,136,0.1) !important;
  color: var(--sb-text-active) !important;
  padding-left: 48px !important;
}

.logout { position: static !important; transform: none !important; margin-top: auto; padding: 14px 12px 4px; }
.logout a { color: var(--sb-text-soft) !important; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.logout a:hover { color: var(--sb-accent) !important; }

/* -----------------------------------------------------------------------
   콘텐츠 영역 공통 — 보드/테이블/브레드크럼
----------------------------------------------------------------------- */
.main-area { background: var(--bg) !important; }
.breadcrumb {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px !important;
}
.breadcrumb > p { color: var(--ink); font-weight: 700; font-size: 15px; }
.breadcrumb > p > i { color: var(--accent); font-size: 15px; }

.board {
  background: var(--bg-raised) !important;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20,22,26,.04), 0 4px 16px rgba(20,22,26,.05) !important;
  border-radius: 18px !important;
}
.board-title { color: var(--ink); }
.board-title-sub { color: var(--ink-soft) !important; }

.t-title > ul {
  background: var(--bg) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}
.t-title > ul > li { color: var(--ink-soft); font-size: 13px !important; }
.t-title > ul > li::after { background: var(--line) !important; }
.t-index > ul { border-bottom: 1px solid var(--line) !important; }
.t-index > ul:hover { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.title > ul { background: var(--bg) !important; }
.title > ul > li { color: var(--ink-soft); }
.index > ul { border-bottom: 1px solid var(--line) !important; }
.index > ul:hover { background: var(--accent-soft) !important; }
.index > ul > li button {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  font-weight: 600;
}
.index > ul > li button:hover { background: var(--accent) !important; color: #fff !important; }
.index > ul > li input[type=checkbox] { accent-color: var(--accent) !important; }

.board-table { border: 1px solid var(--line) !important; }
.table-inner { border-bottom: 1px solid var(--line) !important; }

/* 폼 요소 */
input, select, textarea {
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  border: 1px solid var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
::placeholder { color: #A6A29B; }

/* 버튼류 (기존 클래스 구조 유지, 색만 브랜드 톤으로) */
.btn a, .btn-01, .p-btn button {
  color: var(--accent-ink) !important;
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  font-weight: 600;
}
.btn a:hover, .btn-01:hover { background: var(--accent) !important; color: #fff !important; }
.p-btn button:hover { background: var(--accent-soft) !important; }
.p-btn button span { background: var(--accent) !important; }
.p-btn button span > i { color: #fff !important; }
.on-btn button.on, .radio-chk input[type=radio] { accent-color: var(--accent) !important; }
.tab-btn a { border-color: var(--line) !important; color: var(--ink) !important; }
.tab-btn a:hover, .tab-btn a.on { border-color: var(--accent) !important; background: var(--accent-soft) !important; color: var(--accent-ink) !important; }

.draggable { border: 1px solid var(--line) !important; border-radius: 8px; }
.container > .draggable.on { background: var(--accent-soft) !important; border-color: var(--accent) !important; }
.add-btn, .area-in > p { border: 1px dashed var(--line) !important; color: var(--ink-soft) !important; border-radius: 8px; }
.add-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.save-btn { background: var(--bg) !important; border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; }

.upload-in, .upload { border: 1px solid var(--line) !important; border-radius: 10px; }
.upload-in > label { color: #A6A29B !important; }
.upload-in:hover { border-color: var(--accent) !important; }

.f-btn > button { border-radius: 8px !important; }
.f-btn > button:hover, .f-btn > button.on {
  background: var(--accent-soft) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important;
}

.new-icon { color: var(--accent) !important; }
.search-item > input:focus, .search-item > button:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* -----------------------------------------------------------------------
   로그인 화면 (templates/admin/로그인.html 전용 신규 클래스)
----------------------------------------------------------------------- */
.admin-login-screen {
  width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(680px 420px at 12% -8%, rgba(192,71,44,.10), transparent 60%),
    radial-gradient(620px 420px at 108% 108%, rgba(192,71,44,.08), transparent 55%),
    var(--bg);
  padding: 24px;
}
.admin-login-card {
  width: 100%; max-width: 380px; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: 20px; padding: 40px 36px 32px;
  box-shadow: 0 1px 2px rgba(20,22,26,.04), 0 20px 48px rgba(20,22,26,.08);
}
.admin-login-logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; text-align: center; }
.admin-login-logo img { height: 36px; object-fit: contain; margin-bottom: 14px; }
.admin-login-logo strong { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.admin-login-logo span { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.admin-login-field { position: relative; margin-bottom: 12px; }
.admin-login-field i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-size: 14px; pointer-events: none;
}
.admin-login-field input {
  width: 100%; height: 46px; padding: 0 14px 0 40px; border-radius: 10px !important;
  border: 1px solid var(--line) !important; background: var(--bg); font-size: 14px;
}
.admin-login-field input:focus { background: var(--bg-raised); }
.admin-login-submit {
  width: 100%; height: 46px; border-radius: 10px; margin-top: 8px;
  background: var(--accent); color: #FFF9F6; font-weight: 700; font-size: 14.5px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border: none; transition: filter .15s ease;
}
.admin-login-submit:hover { filter: brightness(.93); }
.admin-login-foot { text-align: center; margin-top: 22px; font-size: 12px; color: var(--ink-soft); }

/* -----------------------------------------------------------------------
   대시보드 (templates/admin/대시보드.html 전용 신규 클래스)
----------------------------------------------------------------------- */
.dash-stat-icon {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-size: 18px; margin-bottom: 14px;
}
.dash-chart-wrap { position: relative; height: 320px; }
@media (max-width: 640px) { .dash-chart-wrap { height: 260px; } }