/* =====================================================================
   AGIT skin · "Ink & Signal" (design C 2.0) — 2026-10-25
   tokens.css 다음에 로드. 레이아웃은 건드리지 않고 색·유리·반경·글꼴만.
   색 역할: cyan = 행동 · violet = Anima/창작 · gold = 희귀/보상 전용 · pink = 🔞/특별 전용
   유리(blur): 상단바 · 마을 하단 독 · 모달만. 나머지 패널은 단색. 반경 12px.
   되돌리기: base.html / login.html 의 agit-skin.css 링크 한 줄 삭제.
   ===================================================================== */
:root {
  --bg-base: #06070d;
  --bg-raised: #0b0d18;
  --bg-panel: #0e1120;
  --bg-hover: #151a2e;
  --bg-input: #090b16;
  --border-subtle: rgba(140, 160, 255, 0.07);
  --border-default: rgba(140, 160, 255, 0.12);
  --border-strong: rgba(140, 160, 255, 0.22);

  --cyan: #5ee7ff;
  --cyan-hover: #8aeeff;
  --violet: #b57bff;
  --gold: #f2c45a;
  --pink: #ff6fae;
  --accent: var(--cyan);
  --accent-hover: var(--cyan-hover);
  --accent-muted: rgba(94, 231, 255, 0.12);
  --accent-glow: rgba(94, 231, 255, 0.24);
  --accent-2: var(--violet);
  --accent-grad: linear-gradient(120deg, #5ee7ff, #b57bff);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --r: 12px;

  --glass-bg: rgba(9, 11, 22, 0.72);
  --glass-blur: blur(16px) saturate(1.25);
  --hairline: linear-gradient(90deg, transparent, rgba(94, 231, 255, 0.45), rgba(181, 123, 255, 0.45), transparent);

  --font-num: "JetBrains Mono", "Space Mono", ui-monospace, monospace;
  --shadow-panel: 0 1px 0 var(--border-subtle), 0 10px 30px rgba(0, 0, 0, 0.32);
}
body.fd-body { background: var(--bg-base); }

/* ---- glass: 상단바 · 모달만 ---- */
.fd-nav { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.fd-nav-flyout-panel, .fd-nav-mobile { background: rgba(10, 12, 24, 0.94); backdrop-filter: var(--glass-blur); }
.fd-panel, .fd-gallery-toolbar, .fd-gallery-advanced, .fd-console, .fd-console-main, .fd-console-forge, .fd-console-mem {
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.fd-panel { background: var(--bg-panel); border-color: var(--border-default); border-radius: var(--r); }
.fd-gallery-modal > div, dialog[open] {
  background: rgba(12, 14, 26, 0.92); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-strong); border-radius: var(--r);
}

/* ---- 버튼 · 칩 · 입력: 행동 = cyan ---- */
.fd-btn-primary { background: var(--accent-grad); color: #06070d; }
.fd-btn, .fd-input, .fd-select, textarea.fd-input { border-radius: 10px; }
.fd-input:focus, .fd-select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(94, 231, 255, 0.14); }
.fd-chip.is-active { border-color: var(--cyan); color: var(--text-primary); background: rgba(94, 231, 255, 0.08); }
.fd-badge { border-radius: 999px; }

/* ---- 숫자 ---- */
.fd-mono, .fd-console-mem b, .fd-console-meta b { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---- 모바일 상단바: 로고 + 현재 위치 + 자주 쓰는 3개 + ☰ ---- */
.fd-nav-loc, .fd-nav-quick { display: none; }
@media (max-width: 1100px) {
  .fd-nav-loc {
    display: inline-flex; align-items: center; height: 22px; padding: 0 0.55rem; margin-left: 0.15rem;
    border-radius: 999px; border: 1px solid var(--border-strong); color: #eaffff;
    font: 600 0.72rem/1 var(--font-body); white-space: nowrap; max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis;
  }
  .fd-nav-loc:empty { display: none; }
  .fd-nav-quick { display: flex; gap: 0.1rem; margin-left: auto; min-width: 0; }
  .fd-nav-quick a {
    position: relative; padding: 0.35rem 0.5rem; border-radius: 8px; color: #8d94b8;
    font-size: 0.82rem; white-space: nowrap; text-decoration: none;
  }
  .fd-nav-quick a.is-active { color: #eaffff; }
  .fd-nav-quick a.is-active::after {
    content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 2px; border-radius: 2px;
    background: var(--cyan); box-shadow: 0 0 8px rgba(94, 231, 255, 0.7);
  }
  .fd-nav-left { flex: 1; min-width: 0; }
}
@media (max-width: 480px) {
  .fd-brand > span { display: none; }            /* 로고 아이콘만 */
  .fd-nav-quick a { padding: 0.35rem 0.4rem; font-size: 0.78rem; }
  .fd-nav-right .fd-nav-link[href="/logout"] { display: none; }   /* 로그아웃은 ☰ 메뉴 하단 */
}
.fd-nav-mobile .fd-nav-logout { color: var(--text-muted); }

/* ---- 갤러리 카드: 이미지 우선 · 메타 한 줄 · 출처 점 ---- */
.fd-gallery-card { border-radius: var(--r); background: var(--bg-raised); border-color: var(--border-subtle); }
.fd-gallery-card:hover { border-color: rgba(94, 231, 255, 0.35); box-shadow: 0 0 0 1px rgba(94, 231, 255, 0.12), 0 10px 26px rgba(0, 0, 0, 0.45); }
.fd-gallery-card .fd-gallery-card-body, .fd-gallery-card.is-overlay .fd-gallery-card-body {
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.4rem; padding: 0.4rem 0.55rem 0.45rem; min-width: 0;
}
.fd-gallery-card.is-overlay .fd-gallery-card-body > .font-medium { flex: 1 1 auto; min-width: 2.5em; font-size: 0.78rem; }
.fd-gallery-card.is-overlay .fd-gallery-card-body > .font-medium + .fd-gallery-theme-row { flex: 0 1 auto; max-width: 55%; min-width: 0; margin: 0; flex-wrap: nowrap; overflow: hidden; }
.fd-gallery-card.is-overlay .fd-gallery-card-body > .font-medium + .fd-gallery-theme-row .fd-chip { border: 0; background: none; padding: 0; color: var(--text-muted); font-size: 0.7rem; }
.fd-gallery-card.is-overlay .fd-gallery-card-body > .font-medium + .fd-gallery-theme-row .fd-chip::before { content: "· "; }
.fd-gallery-card.is-overlay .fd-gallery-card-body > .font-medium + .fd-gallery-theme-row .is-helper,
.fd-gallery-card.is-overlay .fd-gallery-card-body > .font-medium + .fd-gallery-theme-row .fd-faint,
.fd-gallery-card.is-overlay .fd-gallery-card-body > .fd-gallery-theme-row + .fd-gallery-theme-row,
.fd-gallery-card.is-overlay .fd-gallery-card-body > .fd-faint { display: none; }
/* 출처 표시 → 작은 점 (색: anima violet · illustrious cyan · duo 라벤더 · lab green) */
.fd-gallery-card > .fd-src-mark {
  top: auto; bottom: 0.62rem; left: 0.55rem; width: 7px; height: 7px; min-width: 0; padding: 0; border-radius: 50%;
  font-size: 0; line-height: 0; overflow: hidden; box-shadow: 0 0 0 2px var(--bg-raised);
}
.fd-gallery-card.is-overlay > .fd-src-mark { position: absolute; }
.fd-gallery-card > .fd-src-mark ~ .fd-gallery-card-body { padding-left: 1.25rem; }
.is-src-anima > .fd-src-mark, .fd-src-mark.is-src-anima { background: var(--violet); color: #1a0f2e; }
.is-src-illustrious > .fd-src-mark, .fd-src-mark.is-src-illustrious { background: var(--cyan); color: #04202a; }
.is-src-duo > .fd-src-mark, .fd-src-mark.is-src-duo { background: #9aa8ff; color: #10163a; }
.is-src-lab > .fd-src-mark, .fd-src-mark.is-src-lab { background: #5ecf8e; color: #082a17; }
.fd-gallery-card.is-kept { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.fd-kept-corner { color: var(--gold); }
.fd-gallery-id { font-family: var(--font-num); }

/* ---- 🔞 / 특별 = pink 전용 ---- */
a[href="/gallery/special"].is-active { color: #ffd6ea; text-shadow: 0 0 14px rgba(255, 111, 174, 0.55); }
a[href="/gallery/special"].is-active::after { background: var(--pink); box-shadow: 0 0 10px rgba(255, 111, 174, 0.7); }

/* ---- 로그인 ---- */
.fd-login-card, .login-card { border-radius: var(--r); }