/* ==========================================================================
   Avocado Edition — POLISH OVERRIDES (DB-aware, refined)
   - 원본 색/배경 보존: _manager.css.php 의 --avc-* 토큰만 참조
   - 크기, 정렬, 포커스, 모서리, 그림자만 다듬음
   - 중복 제거 / 간결화
   ========================================================================== */

@charset "utf-8";

/* ===== Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-size: var(--avc-fs-14) !important;
  line-height: var(--avc-lh) !important;
  color: var(--avc-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Tailwind-friendly base (scoped) ===== */
.tw-scope :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.tw-scope :where(button, [type="button"], [type="reset"], [type="submit"]) {
  background-image: none;
}

.tw-scope :where(input::placeholder, textarea::placeholder) {
  opacity: 1;
}

.tw-scope .file-input__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-only,
.tw-scope .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tw-scope .file-input {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  height: var(--avc-h-input);
  padding: 0 12px;
  border: 1px solid var(--avc-line);
  border-radius: var(--avc-radius-sm);
  background: var(--avc-input-b);
  color: var(--avc-input-f);
}

.tw-scope .file-input__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--avc-h-input) - 10px);
  padding: 0 14px;
  border-radius: 999px;
  background: var(--avc-primary-bg);
  color: var(--avc-primary-fg);
  font-weight: 600;
  font-size: var(--avc-fs-13);
  cursor: pointer;
  white-space: nowrap;
}

.tw-scope .file-input__text {
  flex: 1;
  color: var(--avc-muted);
  font-size: var(--avc-fs-13);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--avc-accent);
  text-decoration: none;
}

a:hover {
  filter: brightness(1.06);
}

hr.padding {
  height: 50px;
  border: 0;
  margin: 0;
}

.fix-layout {
  width: min(1120px, 96%);
  margin: 0 auto;
}

/* ===== Cards / Boxes ===== */
.theme-box {
  background: var(--avc-surface-1);
  color: var(--avc-text);
  border: 1px solid var(--avc-line);
  border-radius: var(--avc-radius);
  box-shadow: var(--avc-shadow-sm);
  background-clip: padding-box;
}

/* ===== Forms (input/select/textarea) ===== */
:root {
  /* placeholder 기본 톤(필요시 _manager 에서 토큰 제공 가능) */
  --avc-placeholder: color-mix(in srgb, var(--avc-input-f, #9aa3b2) 85%, transparent);
}

body:not(.tw-scope) .form-input,
body:not(.tw-scope) input[type="text"],
body:not(.tw-scope) input[type="password"],
body:not(.tw-scope) input[type="number"],
body:not(.tw-scope) input[type="url"],
body:not(.tw-scope) input[type="email"],
body:not(.tw-scope) input[type="file"],
body:not(.tw-scope) select,
body:not(.tw-scope) textarea {
  height: var(--avc-h-input);
  padding: 0 10px;
  border: 1px solid var(--avc-line);
  border-radius: var(--avc-radius-sm);
  background: var(--avc-input-b);
  color: var(--avc-input-f);
  font-size: var(--avc-fs-14);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}

body:not(.tw-scope) :where(input, select, textarea):focus {
  outline: none;
  border-color: transparent;
  background: color-mix(in srgb, var(--avc-input-b) 92%, #000);
  box-shadow: 0 0 0 3px var(--avc-ring), 0 1px 2px rgba(0, 0, 0, .10);
}

body:not(.tw-scope) :where(input, textarea)::placeholder {
  color: var(--avc-placeholder);
  opacity: 1;
}

body:not(.tw-scope) ::-webkit-input-placeholder {
  color: var(--avc-placeholder);
}

body:not(.tw-scope) ::-moz-placeholder {
  color: var(--avc-placeholder);
  opacity: 1;
}

body:not(.tw-scope) :-ms-input-placeholder {
  color: var(--avc-placeholder);
}

body:not(.tw-scope) textarea {
  height: auto;
  resize: vertical;
  min-height: 96px;
  padding: 8px 10px;
}

.frm_info {
  display: block;
  font-size: var(--avc-fs-12);
  color: var(--avc-muted);
  margin: 0 0 2px;
  padding-bottom: 0;
}

/* Select: 잘림 방지 + 화살표 정돈 */
body:not(.tw-scope) .theme-form {
  table-layout: auto;
}

/* 폭 자동계산 */

body:not(.tw-scope) .theme-form select:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  min-width: 140px;
  width: auto;
  max-width: 100%;
  padding-right: 2.6em;
  /* 화살표 공간 */
  line-height: normal;
  color: var(--avc-input-f);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right .9em center;
  background-size: 1em 1em;
}

body:not(.tw-scope) .theme-form select.w-100 {
  width: 100%;
}

/* File input (Tailwind-like polish, scoped) */
.tw-scope input[type="file"] {
  line-height: var(--avc-h-input);
  overflow: hidden;
  padding: 6px 10px;
  border: 1px solid var(--avc-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--avc-input-b) 92%, transparent);
  color: var(--avc-input-f);
  font-size: var(--avc-fs-14);
}

.tw-scope input[type="file"]::file-selector-button,
.tw-scope input[type="file"]::-webkit-file-upload-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--avc-h-input) - 10px);
  line-height: 1;
  margin: 0 12px 0 4px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: var(--avc-primary-bg);
  color: var(--avc-primary-fg);
  font-weight: 600;
  font-size: 0.875em;
  cursor: pointer;
  transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
}

.tw-scope input[type="file"]:hover::file-selector-button,
.tw-scope input[type="file"]:hover::-webkit-file-upload-button {
  filter: brightness(1.05);
}

.tw-scope input[type="file"]:active::file-selector-button,
.tw-scope input[type="file"]:active::-webkit-file-upload-button {
  transform: translateY(1px);
}

/* Range (slider) — 단일 규칙으로 정리 */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: color-mix(in srgb, var(--avc-line) 45%, transparent);
  border: 1px solid var(--avc-line);
  border-radius: 999px;
  --range-thumb: var(--avc-accent);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--range-thumb);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  /* margin-top: -7px; */
  /* 트랙 중앙 보정(브라우저별) */
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--range-thumb);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

input[type="range"]:active::-webkit-slider-thumb,
input[type="range"]:active::-moz-range-thumb {
  filter: brightness(1.05);
  transform: scale(1.03);
}

/* Switch */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch .switch__ui {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #0f172a;
  border: 1px solid var(--avc-line);
  position: relative;
  transition: background .18s, border-color .18s;
}

.switch .switch__ui::after {
  content: "";
  position: absolute;
  inset: 2px auto auto 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1f2937;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .04);
  transition: transform .18s, background .18s;
}

.switch input:checked+.switch__ui {
  background: var(--avc-accent);
  border-color: color-mix(in srgb, var(--avc-accent) 55%, var(--avc-line));
}

.switch input:checked+.switch__ui::after {
  transform: translateX(20px);
  background: var(--avc-primary-fg);
}

/* ===== Buttons ===== */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--avc-h-btn);
  line-height: var(--avc-h-btn);
  padding: 0 12px;
  border: 1px solid var(--avc-btn-bd, var(--avc-line));
  border-radius: var(--avc-radius);
  background: var(--avc-btn-bg);
  color: var(--avc-btn-fg) !important;
  font-size: var(--avc-fs-14);
  box-shadow: var(--avc-shadow-sm);
  cursor: pointer;
  transition: transform .06s, box-shadow .15s, filter .15s, background .15s;
}

a.ui-btn {
  line-height: calc(var(--avc-h-btn) - 2px);
}

.ui-btn:hover {
  filter: brightness(1.04);
  box-shadow: var(--avc-shadow);
}

.ui-btn:active {
  transform: translateY(1px);
}

.ui-btn.small {
  height: 30px;
  line-height: 30px;
  font-size: var(--avc-fs-13);
  border-radius: var(--avc-radius-sm);
}

.ui-btn.full {
  width: 100%;
}

.ui-btn.disable,
.ui-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* Variants */
.ui-btn.point,
.ui-btn.primary {
  background: var(--avc-primary-bg);
  color: var(--avc-primary-fg) !important;
  border-color: var(--avc-primary-bd);
}

.ui-btn.etc {
  background: transparent;
  color: var(--avc-muted) !important;
  border-color: var(--avc-line);
  backdrop-filter: blur(5px);
}

.ui-btn.etc:hover {
  background: color-mix(in srgb, var(--avc-line) 18%, transparent);
  color: var(--avc-text) !important;
}

/* Icon alignment */
.material-icons,
.material-symbols-outlined {
  font-size: 17px;
  line-height: 1;
  transform: translateY(.5px);
}

/* Button row */
.btn_confirm {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 4px;
}

/* ===== Tables (theme-form) ===== */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* backdrop-filter: blur(5px); */
}

body:not(.tw-scope) .theme-form {
  background: transparent;
  border-radius: var(--avc-radius);
  box-shadow: var(--avc-shadow-sm);
  overflow: hidden;
}

.theme-form th,
.theme-form td {
  border-bottom: 0px solid var(--avc-line);
  vertical-align: middle;
  font-weight: 600;
}

.theme-form tbody tr:last-child>* {
  border-bottom: 0;
}

.theme-form th {
  background: linear-gradient(color-mix(in srgb, var(--avc-surface-1) 86%, #000),
      color-mix(in srgb, var(--avc-surface-1) 96%, #000));
  color: var(--avc-muted);
  font-size: var(--avc-fs-13);
  text-align: center;
  padding: 8px 10px;
}

.theme-form td {
  background: var(--avc-surface-0);
  color: var(--avc-text);
  padding: 5px 10px;
}

.theme-form td.no-data {
  text-align: center;
  line-height: 160px;
  color: var(--avc-muted);
}

.theme-form td i.material-symbols-outlined {
  font-size: 18px;
  opacity: .85;
}

/* form_option toggle (원본 JS 호환) */
.form_option {
  display: none;
}

.form_option.on {
  display: table-row;
}

/* ===== Tabs ===== */
#tab_list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--avc-line);
}

#tab_list li {
  list-style: none;
  float: none;
}

#tab_list li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  color: var(--avc-muted);
  position: relative;
}

#tab_list li a:hover {
  color: var(--avc-text);
}

#tab_list li.on a,
#tab_list li.active a {
  color: var(--avc-text);
  font-weight: 600;
}

#tab_list li.on a::after,
#tab_list li.active a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px;
  background: var(--avc-accent);
}

/* ===== Ajax list ===== */
.ajax-list-box {
  max-height: 220px;
  overflow-y: auto;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid var(--avc-line);
  border-radius: var(--avc-radius);
  background: color-mix(in srgb, var(--avc-surface-0) 92%, transparent);
}

.ajax-list-box li a {
  color: inherit;
  padding: 8px 10px 8px 60px;
  min-height: 38px;
  border-radius: var(--avc-radius-sm);
  transition: background .12s, transform .06s;
}

.ajax-list-box li a:hover {
  background: color-mix(in srgb, var(--avc-line) 16%, transparent);
}

.ajax-list-box li a:active {
  transform: translateY(1px);
}

.ajax-list-box li a .ui-thumb {
  position: absolute;
  top: 8px;
  left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* ===== Pagination ===== */
.pg_wrap {
  text-align: center;
  padding: 16px 0;
}

.pg_wrap .pg_page {
  display: inline-block;
  min-width: 32px;
  height: 32px;
  line-height: 32px;
  margin: 0 3px;
  padding: 0 6px;
  font-size: 13px;
  color: var(--avc-muted);
  background: color-mix(in srgb, var(--avc-surface-0) 85%, #000);
  border: 1px solid var(--avc-line);
  border-radius: 12px;
  transition: transform .06s, box-shadow .15s, filter .15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.pg_wrap .pg_page:hover {
  color: var(--avc-text);
  filter: brightness(1.06);
  box-shadow: var(--avc-shadow-sm);
}

.pg_wrap .pg_page:active {
  transform: translateY(1px);
}

/* ===== Thumbnail preview ===== */
#defaultBodyPreview,
.thumb-preview {
  width: 140px;
  aspect-ratio: 1/1;
  /* border: 1px solid var(--avc-line); */
  border-radius: 10px;
  box-shadow: var(--avc-shadow-sm);
  background: var(--avc-surface-0) center/cover no-repeat;
}

.thumb-preview.is-spoiler {
  filter: blur(10px) brightness(.75);
  transition: filter .18s ease;
}

/* ===== Compact tokens (density) =====
   필요 시 _manager 에서 값을 바꾸면 전체 밀도 변경됨 */
:root {
  --avc-h-input: 30px;
  /* 입력 높이 */
  --avc-h-btn: 30px;
  /* 버튼 높이 */
  --avc-fs-14: 11px;
  /* 본문 폰트 */
  --avc-lh: 1.5;
  /* 줄간격 */
}

/* ================================
   Frost + Glow FX (toggle by )
   - 투명 배경 + 블러 + 은은한 글로우
   - 색상은 전부 --avc-* 토큰 기반
   ================================ */

html{
  --fx-blur: 8px;              /* 유리감 블러 강도 */
  --fx-alpha: .72;             /* 패널 투명도(0~1) */
  --fx-shadow: 0 18px 50px rgba(0,0,0,.35);
  --fx-ring: color-mix(in srgb, var(--avc-accent) 45%, transparent);
}

/* 패널류: theme-box / theme-form / ajax-list */
html .theme-box,
html .theme-form,
html .ajax-list-box{
  background: color-mix(in srgb, var(--avc-surface-0) calc(var(--fx-alpha)*100%), transparent);
  backdrop-filter: blur(var(--fx-blur)) saturate(1.05);
  border-color: color-mix(in srgb, var(--avc-line) 70%, transparent);
  box-shadow: var(--fx-shadow);
}

/* 폼 헤더 그라데이션 더 매끈하게 */
html .theme-form th{
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--avc-surface-1) 78%, transparent),
      color-mix(in srgb, var(--avc-surface-1) 96%, transparent)
    );
}

/* 포커스 링 + 살짝 글로우 */
html :where(input,select,textarea):focus{
  box-shadow: 0 0 0 3px var(--fx-ring), 0 8px 24px rgba(0,0,0,.25);
}

/* 버튼 호버 글로우 */
html .ui-btn:hover{
  filter: brightness(1.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.25),
              inset 0 0 0 1px color-mix(in srgb, var(--avc-line) 60%, transparent);
}

/* 탭 활성 언더라인 네온 느낌 */
html #tab_list li.on a::after,
html #tab_list li.active a::after{
  box-shadow: 0 0 10px color-mix(in srgb, var(--avc-accent) 70%, transparent);
}

/* 슬라이더 트랙 살짝 그라데이션 */
html input[type="range"]{
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--avc-line) 30%, transparent),
    color-mix(in srgb, var(--avc-line) 50%, transparent)
  );
}

/* 파일 선택 버튼도 보송한 광택 */
html input[type="file"]::file-selector-button,
html input[type="file"]::-webkit-file-upload-button{
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.theme-form .frm_info {
  padding-bottom: 0;
}

/* ---- GLOBAL SWITCH: 완전 중앙 정렬 고정 ---- */
/* 트랙/노브 치수 토큰(원하면 숫자만 바꿔도 전체가 따라감) */
.switch {
  --sw-w: 44px;
  /* 트랙 폭 */
  --sw-h: 24px;
  /* 트랙 높이(시각적) */
  --sw-pad: 2px;
  /* 트랙 안쪽 여백(노브와 트랙 가장자리 간격) */
}

/* 기존 .switch .switch__ui 의 width/height 값은 지우거나 이 블록이 나중에 오도록 */
.switch .switch__ui {
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;
  position: relative;
}

/* 노브는 항상 세로 중앙(top:50% + translateY(-50%)) */
.switch .switch__ui::after {
  content: "";
  position: absolute;
  left: var(--sw-pad);
  top: 50%;
  width: calc(var(--sw-h) - var(--sw-pad) * 2);
  height: calc(var(--sw-h) - var(--sw-pad) * 2);
  border-radius: 50%;
  transform: translateY(-50%);
  /* 디자인 색/그림자는 네가 기존에 쓰던 값을 유지 */
}

/* 체크 시 가로 이동 거리 = (트랙폭 - 트랙높이) */
.switch input:checked+.switch__ui::after {
  transform: translate(calc(var(--sw-w) - var(--sw-h)), -50%);
}

label {
  margin-left: 3px;
  margin-right: 10px;
}