/* ============================================
   NADOO_AI — style.css v3.0
   Black + Gold | Dot Pattern | Admin UX
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

:root {
  --bg:       #121214; /* Slightly lighter charcoal */
  --bg2:      #1a1a1c;
  --bg3:      #222225;
  --card:     #1c1c1f;
  --card-b:   rgba(255,255,255,0.08); /* Higher contrast */
  --gold:     #f8d14d; /* Brighter gold */
  --gold-dim: rgba(248,209,77,0.12);
  --gold-b:   rgba(248,209,77,0.4);
  --accent:   #d4af37;
  --white:    #f5f5f7;
  --gray:     #94949a;
  --gray2:    #c1c1c6;
  --red:      #ff5e6c;
  --green:    #4cd964;
  --blue:     #5ac8fa;
  --purple:   #af52de;
  --r:        16px; /* Slightly smoother corners */
  --hh:       86px;
  --sh:       36px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body, html {
  width: 100%;
  height: 100%;
  background-color: var(--bg);
  color: var(--white);
  font-family: 'Noto Sans KR', sans-serif;
  line-height: 1.6;
  overflow: auto; /* ★ 수정: hidden → auto (상세뷰 스크롤 허용) */
}

/* ── 노이즈 텍스처 ── */
.noise::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: 999;
}

/* ===== HEADER ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:900;background:#0e0e0e;border-bottom:1px solid rgba(255,255,255,0.06)}
.header-inner{display:flex;align-items:center;gap:20px;padding:0 28px;height:var(--hh);max-width:1400px;margin:0 auto}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.logo-icon{font-size:32px}
.logo-title{font-size:28px;font-weight:900;color:var(--white);letter-spacing:-1px}
.logo-accent{color:var(--gold)}
.main-nav{display:flex;align-items:center;gap:2px;flex:1}
.main-nav a{color:var(--gray);text-decoration:none;font-size:13px;font-weight:500;padding:6px 12px;border-radius:8px;transition:all .2s}
.main-nav a:hover{color:var(--white);background:rgba(255,255,255,0.06)}
.header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.btn-survival{background:transparent;border:1.5px solid var(--gold);color:var(--gold);padding:7px 16px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:.5px;transition:all .2s}
.btn-survival:hover{background:var(--gold);color:#0e0e0e}

/* 관리/편집 버튼 */
.btn-admin-toggle{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.12);
  color:var(--gray2);padding:7px 14px;border-radius:8px;cursor:pointer;
  font-size:13px;font-weight:600;font-family:inherit;transition:all .2s;white-space:nowrap;
}
.btn-admin-toggle:hover{border-color:var(--gold);color:var(--gold)}
.btn-admin-toggle.active{
  background:var(--gold);border-color:var(--gold);color:#0e0e0e;
  box-shadow:0 0 16px rgba(245,200,66,.45);
  animation:admin-btn-pulse 2s ease-in-out infinite;
}
@keyframes admin-btn-pulse{0%,100%{box-shadow:0 0 16px rgba(245,200,66,.45)}50%{box-shadow:0 0 28px rgba(245,200,66,.75)}}
.mobile-admin{margin-top:12px;width:100%;justify-content:center}

.header-sub-bar{display:none}
.hamburger{display:none}
.hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px}
.mobile-nav{display:none;flex-direction:column;padding:12px 20px 16px;background:#111;border-top:1px solid rgba(255,255,255,.06)}
.mobile-nav a{color:var(--gray);text-decoration:none;padding:9px 0;font-size:15px;border-bottom:1px solid rgba(255,255,255,.04)}
.mobile-nav.open{display:flex}

/* ===== HERO ===== */
/* ===== HERO (Carousel Gallery) ===== */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at center, #2e2e34 0%, #121214 100%);
}

.carousel-wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100vw;
  height: 78vh;           /* ★ 65vh → 78vh */
  transform: translateY(-50%);
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 2;
}

.carousel-track {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 45vw;
  cursor: grab;
  will-change: transform;
}

.carousel-track:active {
  cursor: grabbing;
}

.book-item {
  position: relative;
  width: 9vw;             /* ★ 8.5vw → 9vw */
  min-width: 100px;       /* ★ 80px → 100px */
  max-width: 160px;       /* ★ 140px → 160px */
  height: 80%;            /* ★ 70% → 80% (더 길쭉하게) */
  margin: 0 10px;         /* ★ 8px → 10px */
  background-size: cover;
  background-position: center;
  filter: grayscale(100%) brightness(1.1);
  transition: filter 0.5s ease, transform 0.1s linear, box-shadow 0.5s ease;
  transform-origin: center center;
  will-change: transform, filter;
  border-radius: 8px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.6);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  text-decoration: none;
  z-index: 1000;
}

.book-item:hover {
  filter: grayscale(0%) brightness(1.1);
  box-shadow: 0 20px 50px rgba(245, 197, 24, 0.25);
  border: 1px solid var(--gold);
  z-index: 1001;
}

.book-number {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Playfair Display', serif;
  font-size: 0.85rem;
  color: var(--gold);
  font-weight: 700;
  text-align: center;
  text-shadow: 0 4px 10px rgba(0,0,0,0.5);
  white-space: nowrap;
}

.book-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Noto Sans KR', sans-serif; /* ★ 세로쓰기 완벽 지원 */
  font-size: 1.05rem;
  font-weight: 900;                         /* ★ 최대 굵기 */
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  max-height: 78%;
  letter-spacing: 5px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 0 30px rgba(0,0,0,0.6);
  opacity: 0.95;
  transition: all 0.4s ease;
  pointer-events: none;
}

.book-item:hover .book-title {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(8,8,8,0.7) 100%);
  pointer-events: none !important; /* 어떤 경우에도 클릭을 가로막지 않음 */
  z-index: 2; /* 카드들(z-index 50+)보다 아래에 위치하도록 조정 */
}

.hero-content-fixed {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
  z-index: 1; /* 카드(z-index 1000)보다 아래로 설정 */
}

.hero-title-main {
  font-family: 'Playfair Display', serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 12px;
  text-transform: uppercase;
  margin-bottom: 30px;
  opacity: 0.9;
  text-shadow: 0 0 20px rgba(245, 197, 24, 0.3);
}

.hero-scroll-hint {
  font-size: 11px;
  color: var(--gray2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scroll-anim 2s infinite;
}

@keyframes scroll-anim {
  0% { transform: translateY(-10px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}

/* ===== CATALOG ===== */
.catalog-section{padding:80px 28px 120px;background:var(--bg2)}
.container{max-width:1200px;margin:0 auto}

/* ── 카테고리 영역 ── */
.cat-area{margin-bottom:32px}
.cat-area-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.cat-area-title{font-size:22px;font-weight:900;letter-spacing:-0.5px}
.admin-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.admin-hint{font-size:12px;color:var(--gray);background:rgba(245,200,66,.08);border:1px solid var(--gold-b);padding:5px 12px;border-radius:8px}
.btn-add-cat{background:var(--gold);color:#0e0e0e;border:none;padding:8px 18px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;white-space:nowrap}
.btn-add-cat:hover{opacity:.88;transform:translateY(-1px)}

/* ── 카테고리 탭 ── */
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}

/* 탭 래퍼 (탭 + 편집/삭제 버튼) */
.cat-tab-wrap{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .15s;
}
.cat-tab-wrap.tab-drop-target .cat-tab{
  border-color:var(--gold)!important;
  background:var(--gold-dim)!important;
  transform:scale(1.05);
}

.cat-tab{
  display:flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:10px;
  border:1.5px solid var(--gold);background:var(--gold-dim);
  color:var(--gold);font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:all .2s;white-space:nowrap;
  user-select:none;position:relative;
}
.cat-tab:hover{border-color:var(--white);color:var(--white);background:rgba(255,193,7,.15)}
.cat-tab.active{background:var(--gold);color:#0e0e0e;border-color:var(--gold);box-shadow:0 0 15px rgba(255,193,7,.3)}
.cat-tab.active .cat-count{background:rgba(0,0,0,.15);color:#0e0e0e}
.cat-count{background:rgba(255,193,7,.1);color:inherit;border-radius:100px;padding:1px 8px;font-size:11px;font-weight:700}

/* 탭 관리 버튼들 (기본 숨김 → 편집모드에서 표시) */
.cat-tab-actions{
  display:none;  /* 기본: 숨김 */
  align-items:center;gap:3px;
}
.admin-mode .cat-tab-actions{display:flex} /* 편집모드 ON → 표시 */
/* admin-show: admin-mode 클래스 없을 때 숨김 */
.cat-tab-actions.admin-show{ display:none; }
.admin-mode .cat-tab-actions.admin-show{ display:flex; }

.cat-action-btn{
  background:rgba(14,14,14,.9);border:1px solid rgba(255,255,255,.15);
  color:var(--gray2);padding:3px 7px;border-radius:7px;font-size:11px;
  cursor:pointer;transition:all .2s;line-height:1.4;font-family:inherit;
  white-space:nowrap;
}
.cat-action-btn:hover{background:rgba(255,255,255,.12);color:var(--white);border-color:rgba(255,255,255,.3)}
.cat-action-btn.del-btn:hover{background:rgba(255,71,87,.25);border-color:var(--red);color:var(--red)}

/* 탭 드래그 핸들 */
.cat-drag-handle{
  background:rgba(245,200,66,.15);border:1px dashed var(--gold-b);
  color:var(--gold);padding:3px 8px;border-radius:6px;font-size:13px;
  cursor:grab;user-select:none;transition:all .2s;line-height:1;
}
.cat-drag-handle:hover{background:var(--gold-dim);border-color:var(--gold)}
.cat-drag-handle:active{cursor:grabbing}

/* ── 섹션 헤더 ── */
.section-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:26px;gap:16px}
.section-badge{display:inline-block;background:var(--gold-dim);border:1px solid var(--gold-b);color:var(--gold);padding:4px 14px;border-radius:100px;font-size:12px;font-weight:700;margin-bottom:8px}
.section-title{font-size:clamp(18px,2.5vw,26px);font-weight:900;margin-bottom:4px}
.section-desc{font-size:13px;color:var(--gray)}
.btn-add-item{
  background:var(--gold);color:#0e0e0e;border:none;
  padding:10px 20px;border-radius:10px;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;
  transition:all .2s;align-items:center;gap:6px;
  /* JS로 display 제어 */
}
.btn-add-item:hover{opacity:.88;transform:translateY(-1px)}
.btn-add-item-empty{
  background:var(--gold);color:#0e0e0e;border:none;
  padding:10px 22px;border-radius:10px;font-size:14px;font-weight:700;
  cursor:pointer;font-family:inherit;margin-top:16px;transition:all .2s;
}
.btn-add-item-empty:hover{opacity:.88}

/* ── 아이템 그리드 (메인 3열) ── */
.items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  min-height: 80px;
}

@media (max-width: 1100px) {
  .items-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .items-grid { grid-template-columns: 1fr; }
}

/* ── 아이템 카드 ── */
.item-card{
  background:var(--card);border:1.5px solid var(--card-b);border-radius:var(--r);
  padding:22px 18px 18px;transition:all .25s;position:relative;
  cursor:default;display:flex;flex-direction:column;min-height:220px;
  overflow:hidden;
}
.item-card:hover{border-color:rgba(245,200,66,.28);transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,.45)}

/* ★ 프리미엄 배경 이미지 카드 스타일 */
.item-card.has-cover{
  min-height:380px;background-size:cover;background-position:center;
  padding:24px;justify-content:flex-end;border-color:rgba(255,255,255,0.1);
}
.item-card.has-cover .card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  z-index:1;
}
.item-card.has-cover .card-content{
  position:relative;z-index:2;margin-bottom:0;
}
.item-card.has-cover .card-title{
  font-size:18px;font-weight:900;color:var(--white);text-shadow:0 2px 4px rgba(0,0,0,0.5);
  margin-bottom:8px;
}
.item-card.has-cover .card-subtitle{
  font-size:13px;color:rgba(255,255,255,0.7);margin-bottom:20px;
}
.item-card.has-cover .card-btn{
  background:var(--gold);color:#0e0e0e;border:none;font-weight:800;
  box-shadow:0 4px 15px rgba(245,200,66,0.3);position:relative;z-index:2;
}
.item-card.has-cover .card-top{
  position:absolute;top:20px;left:20px;z-index:3;margin:0;
}
.item-card.has-cover .card-badge-wrap{justify-content:flex-start}

/* 모바일 30 -> 100% 한줄 3개 유지를 위해 그리드 조정 */
.items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) {
  .items-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .items-grid { grid-template-columns: 1fr; }
}

/* ─── 편집모드 카드 스타일 ─── */
.admin-mode .item-card{
  border-color:rgba(245,200,66,.18);
  outline:none;
}
.admin-mode .item-card:hover{
  border-color:rgba(245,200,66,.45);
  box-shadow:0 4px 24px rgba(245,200,66,.12);
  transform:none; /* hover 이동 비활성 */
}

/* 카드 드래그 시각 */
.item-card.card-dragging{
  opacity:.25;transform:scale(.96);
  border:2px dashed var(--gold)!important;
}
.item-card.card-drop-target{
  border:2px dashed var(--gold)!important;
  background:rgba(245,200,66,.06)!important;
  transform:translateY(-4px);
  box-shadow:0 8px 28px rgba(245,200,66,.2);
}

/* ─── 드래그 핸들 (편집모드에서만 표시) ─── */
.drag-handle{
  display:none; /* 기본 숨김 */
  position:absolute;top:0;left:0;right:0;
  padding:8px 0 5px;text-align:center;
  background:linear-gradient(rgba(245,200,66,.1),transparent);
  border-radius:var(--r) var(--r) 0 0;
  cursor:grab;user-select:none;
}
.admin-mode .drag-handle{display:block} /* 편집모드에서만 보임 */
.drag-handle:active{cursor:grabbing}
.drag-dots{
  font-size:16px;color:var(--gold);letter-spacing:2px;opacity:.7;
  transition:opacity .2s;
}
.drag-handle:hover .drag-dots{opacity:1}

/* ─── 카드 편집/삭제 버튼 (편집모드에서만 표시) ─── */
.card-actions{
  display:none; /* 기본 숨김 */
  position:absolute;top:8px;right:8px;gap:4px;z-index:10;
}
.admin-mode .card-actions{display:flex} /* 편집모드에서만 보임 */

.ca-btn{
  width:32px;height:32px;border-radius:8px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(14,14,14,.9);color:var(--gray2);font-size:14px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;backdrop-filter:blur(4px);
}
.ca-btn:hover{background:rgba(255,255,255,.15);color:var(--white);border-color:rgba(255,255,255,.3);transform:scale(1.1)}
.ca-btn.del:hover{background:rgba(255,71,87,.3);border-color:var(--red);color:var(--red)}

.card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;margin-top:4px}
.card-emoji{font-size:30px;line-height:1}
.card-badge-wrap{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.card-badge{display:none!important;font-size:10px;font-weight:800;padding:3px 9px;border-radius:6px;letter-spacing:.3px}
.card-badge.gold{background:var(--gold);color:#0e0e0e}
.card-badge.blue{background:var(--blue);color:#0e0e0e}
.card-badge.green{background:var(--green);color:#0e0e0e}
.card-badge.purple{background:var(--purple);color:var(--white)}
.card-badge.red{background:var(--red);color:var(--white)}

.card-title{font-size:15px;font-weight:800;margin-bottom:5px;line-height:1.3; word-break:keep-all; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.card-subtitle{font-size:12px;color:var(--gray);margin-bottom:16px;line-height:1.6; word-break:keep-all; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.card-btn{
  display:block;width:100%;
  background:transparent;border:1px solid rgba(255,255,255,.14);
  color:var(--gray2);padding:8px 14px;border-radius:8px;
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  text-decoration:none;text-align:center;transition:all .2s;
}
.card-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}

/* 빈 상태 */
.empty-state{text-align:center;padding:64px 20px;color:var(--gray);display:flex;flex-direction:column;align-items:center}
.empty-icon{font-size:48px;margin-bottom:12px}
.empty-state p{font-size:15px}

/* ===== 관리 하단 바 ===== */
.admin-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:800;
  background:rgba(14,14,14,.97);border-top:2px solid var(--gold);
  backdrop-filter:blur(12px);
}
.admin-bar-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:20px;
  padding:12px 24px;flex-wrap:wrap;
}
.admin-bar-status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--gold);white-space:nowrap}
.admin-bar-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse-dot 1.5s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(245,200,66,.5)}50%{opacity:.7;box-shadow:0 0 0 6px rgba(245,200,66,0)}}
.admin-bar-tips{display:flex;gap:12px;flex:1;flex-wrap:wrap}
.admin-bar-tips span{font-size:12px;color:var(--gray2);background:rgba(255,255,255,.06);padding:5px 12px;border-radius:8px;white-space:nowrap;border:1px solid rgba(255,255,255,.06)}
.admin-bar-exit{
  background:var(--gold);color:#0e0e0e;
  border:none;padding:9px 18px;border-radius:9px;
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:all .2s;white-space:nowrap;margin-left:auto;
}
.admin-bar-exit:hover{opacity:.88;transform:translateY(-1px)}

.btn-admin-util {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.btn-admin-util:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--gold);
  color: var(--gold);
}
.btn-admin-util.btn-danger:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(255,71,87,0.1);
}

/* ===== FAQ ===== */
.faq-section{padding:80px 28px}
.faq-list{margin-top:32px;display:flex;flex-direction:column;gap:10px;max-width:780px;margin-left:auto;margin-right:auto}
.faq-item{background:var(--card);border:1px solid var(--card-b);border-radius:12px;cursor:pointer;overflow:hidden;transition:border-color .2s}
.faq-item:hover{border-color:var(--gold-b)}
.faq-q{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600}
.faq-arrow{color:var(--gold);transition:transform .3s;font-size:11px}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-a{display:none;padding:0 20px 16px;font-size:13px;color:var(--gray);line-height:1.7;border-top:1px solid rgba(255,255,255,.04)}
.faq-item.open .faq-a{display:block}

/* ===== FOOTER ===== */
.site-footer{background:#0a0a0a;border-top:1px solid rgba(255,255,255,.05);padding:56px 28px 0}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1.5fr 1fr 1fr;gap:36px;padding-bottom:44px}
.footer-logo{font-size:20px;font-weight:900;margin-bottom:12px}
.footer-col p{font-size:13px;color:var(--gray);line-height:1.8;margin-bottom:5px}
.footer-col h4{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:14px}
.footer-link{display:block;color:var(--gray);text-decoration:none;font-size:13px;padding:5px 0;transition:color .2s}
.footer-link:hover{color:var(--white)}
.footer-link-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gold);color:#0e0e0e!important;
  padding:10px 18px;border-radius:10px;
  font-size:13px;font-weight:800;
  transition:all .2s;margin-bottom:4px;
}
.footer-link-cta:hover{opacity:.88;transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,200,66,.35)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.05);padding:18px 0;text-align:center;font-size:12px;color:var(--gray)}

/* ===== CHAT ===== */
.chat-widget{position:fixed;bottom:84px;right:22px;width:320px;background:#141414;border:1px solid rgba(245,200,66,.2);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.7);z-index:990;display:none;flex-direction:column;overflow:hidden}
.chat-widget.open{display:flex;animation:chat-pop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes chat-pop{from{transform:scale(.8) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.chat-header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(245,200,66,.05)}
.chat-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#f5c842,#ff9900);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.chat-header strong{font-size:13px}
.online-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-left:6px;animation:blink 1.5s infinite;vertical-align:middle}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.chat-close{margin-left:auto;background:none;border:none;color:var(--gray);cursor:pointer;font-size:15px}
.chat-messages{flex:1;overflow-y:auto;padding:14px;min-height:180px;max-height:260px;display:flex;flex-direction:column;gap:10px}
.chat-msg{display:flex}
.chat-msg.bot{justify-content:flex-start}
.chat-msg.user{justify-content:flex-end}
.msg-bubble{max-width:82%;padding:9px 13px;border-radius:12px;font-size:13px;line-height:1.5}
.chat-msg.bot .msg-bubble{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:var(--gray2);border-radius:3px 12px 12px 12px}
.chat-msg.user .msg-bubble{background:var(--gold);color:#0e0e0e;font-weight:600;border-radius:12px 3px 12px 12px}
.chat-input-area{display:flex;gap:7px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.05)}
.chat-input-area input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--white);font-family:inherit;outline:none}
.chat-input-area input:focus{border-color:rgba(245,200,66,.4)}
.chat-input-area input::placeholder{color:var(--gray)}
.chat-input-area button{background:var(--gold);color:#0e0e0e;border:none;border-radius:8px;width:34px;cursor:pointer;font-size:15px;transition:opacity .2s}
.chat-fab{position:fixed;bottom:22px;right:22px;width:54px;height:54px;border-radius:50%;background:var(--gold);border:none;font-size:24px;cursor:pointer;box-shadow:0 4px 20px rgba(245,200,66,.4);z-index:988;transition:transform .2s,box-shadow .2s}
.chat-fab:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(245,200,66,.6)}

/* ===== MODALS ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);z-index:9999999;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-box{background:#161616;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:34px;width:100%;max-width:500px;position:relative;animation:modal-in .28s cubic-bezier(.34,1.56,.64,1);max-height:90vh;overflow-y:auto}
@keyframes modal-in{from{transform:scale(.85) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.08);border:none;color:var(--gray);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;transition:all .2s}
.modal-close:hover{background:rgba(255,255,255,.15);color:var(--white)}
.modal-title{font-size:20px;font-weight:800;margin-bottom:22px}

.form-group{margin-bottom:15px}
.form-row2{display:flex;gap:12px}
.form-row2 .form-group{flex:1}
.form-group label{display:block;font-size:11px;font-weight:700;color:var(--gray);margin-bottom:7px;text-transform:uppercase;letter-spacing:.4px}
.required{color:var(--gold)}
.form-group input,
.form-group select,
.form-group textarea{width:100%;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--white);font-family:inherit;outline:none;transition:border-color .2s}
.form-group select option{background:#1a1a1a;color:var(--white)}
.form-group input:focus,
.form-group select:focus{border-color:rgba(245,200,66,.55)}

.modal-footer{display:flex;align-items:center;margin-top:20px;gap:10px}
.btn-cancel{background:rgba(255,255,255,.07);color:var(--gray2);border:1px solid rgba(255,255,255,.1);padding:10px 20px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.btn-cancel:hover{background:rgba(255,255,255,.12);color:var(--white)}
.btn-submit{background:var(--gold);color:#0e0e0e;border:none;padding:10px 24px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .2s}
.btn-submit:hover{opacity:.88}
.btn-delete-cat{background:rgba(255,71,87,.15);color:var(--red);border:1px solid rgba(255,71,87,.3);padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.btn-delete-cat:hover{background:rgba(255,71,87,.3)}
.btn-delete-confirm{background:var(--red);color:var(--white);border:none;padding:10px 24px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .2s}
.btn-delete-confirm:hover{opacity:.85}
.btn-convert-cat {
  background: rgba(30, 144, 255, 0.1);
  border: 1.5px solid rgba(30, 144, 255, 0.4);
  color: #1e90ff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  margin-right: auto;
}
.btn-convert-cat:hover {
  background: #1e90ff;
  color: #fff;
  border-color: #1e90ff;
  box-shadow: 0 4px 15px rgba(30, 144, 255, 0.3);
}

/* ===== Toast ===== */
.toast{
  position:fixed;bottom:90px;left:50%;
  transform:translateX(-50%) translateY(16px);
  background:#1c1c1c;border:1.5px solid var(--gold-b);
  color:var(--white);padding:11px 24px;border-radius:12px;
  font-size:14px;font-weight:500;z-index:9999999;
  opacity:0;transition:all .28s;
  pointer-events:none;white-space:nowrap;max-width:88vw;
  box-shadow:0 4px 24px rgba(0,0,0,.5);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 🔍 검색 시스템 ===== */

/* 라이브러리 헤더 */
.library-header{margin-bottom:28px}
.library-title-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;flex-wrap:wrap;gap:12px;
}

/* 검색 래퍼 */
.search-wrap{display:flex;flex-direction:column;gap:10px}

/* 검색 박스 */
.search-box{
  position:relative;display:flex;align-items:center;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.12);
  border-radius:14px;
  transition:border-color .25s, box-shadow .25s;
  overflow:hidden;
}
.search-box:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(245,200,66,.12);
}
.search-icon{
  padding:0 14px 0 16px;font-size:16px;
  color:var(--gray);flex-shrink:0;pointer-events:none;
}
.search-input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--white);font-size:15px;font-family:'Noto Sans KR',sans-serif;
  padding:14px 0;line-height:1;
}
.search-input::placeholder{color:var(--gray);font-size:14px}
.search-clear{
  background:rgba(255,255,255,.08);border:none;
  color:var(--gray2);width:28px;height:28px;
  border-radius:50%;cursor:pointer;font-size:13px;
  margin-right:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.search-clear:hover{background:rgba(255,71,87,.25);color:var(--red)}

/* 검색 메타 (결과 수 + 전체보기) */
.search-meta{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--gray2);
  padding:0 4px;
}
.search-meta-sep{color:rgba(255,255,255,.15)}
.search-reset-btn{
  background:none;border:none;color:var(--gold);
  font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;padding:0;
  transition:opacity .2s;
}
.search-reset-btn:hover{opacity:.75}

/* 태그 필터 행 */
.tag-filter-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  min-height:0;
}
.tag-filter-label{
  font-size:12px;color:var(--gray);
  white-space:nowrap;flex-shrink:0;
}
.tag-filter-chip{
  display:flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:var(--gray2);padding:5px 11px;border-radius:100px;
  font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .2s;
  white-space:nowrap;
}
.tag-filter-chip:hover{border-color:var(--gold);color:var(--gold)}
.tag-filter-chip.active{
  background:var(--gold);color:#0e0e0e;
  border-color:var(--gold);font-weight:700;
}
.tag-chip-cnt{
  background:rgba(0,0,0,.2);border-radius:100px;
  padding:1px 5px;font-size:10px;
}
.tag-filter-chip.active .tag-chip-cnt{background:rgba(0,0,0,.25)}

/* ── 검색 결과 영역 ── */
.search-results{margin-top:4px}
.search-group{margin-bottom:36px}
.search-group-label{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--gold);
  margin-bottom:14px;
  padding-bottom:8px;border-bottom:1px solid rgba(245,200,66,.15);
}
.search-group-cnt{
  background:var(--gold-dim);border:1px solid var(--gold-b);
  color:var(--gold);padding:2px 8px;border-radius:100px;font-size:11px;
}
.search-grid{margin-top:0}

/* 검색 하이라이트 */
.search-highlight{
  background:rgba(245,200,66,.3);color:var(--white);
  border-radius:3px;padding:0 2px;font-weight:700;
}

/* 검색 결과 카드 (hover 시 살짝 강조) */
.search-result-card{
  transition:all .25s;
}
.search-result-card:hover{
  border-color:var(--gold)!important;
  transform:translateY(-3px);
  box-shadow:0 10px 32px rgba(245,200,66,.12);
}

/* 태그 매칭 강조 */
.tag-match{
  background:rgba(245,200,66,.2)!important;
  border-color:rgba(245,200,66,.4)!important;
  color:var(--gold)!important;font-weight:700;
}

/* 검색 결과 없음 */
.search-empty{
  text-align:center;padding:80px 20px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.search-empty-icon{font-size:56px;opacity:.4}
.search-empty-title{font-size:16px;font-weight:700;color:var(--gray2)}
.search-empty-sub{font-size:13px;color:var(--gray)}

/* cat-area (검색 중 숨길 영역) */
.cat-area{margin-bottom:24px}

/* ===== 아이템 타입 토글 ===== */
.type-toggle{display:flex;gap:8px;margin-top:6px}
.type-btn{
  flex:1;padding:9px 14px;border-radius:10px;
  border:1.5px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--gray2);font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .2s;
}
.type-btn:hover{border-color:rgba(255,255,255,.25);color:var(--white)}
.type-btn.active{background:var(--gold);color:#0e0e0e;border-color:var(--gold);font-weight:700}

/* ===== 프롬프트 카드 스타일 ===== */
.card-prompt-preview{
  font-size:11px;color:var(--gray);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;padding:8px 10px;
  margin-bottom:10px;line-height:1.6;
  font-family:'Noto Sans KR',monospace;
  word-break:break-all;
}
.card-copy-btn{
  display:flex;align-items:center;justify-content:center;gap:5px;
  width:100%;background:var(--gold-dim);
  border:1px solid var(--gold-b);color:var(--gold);
  padding:8px 14px;border-radius:8px;
  font-size:12px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:all .2s;
}
.card-copy-btn:hover{background:var(--gold);color:#0e0e0e;border-color:var(--gold)}

/* 프롬프트 태그들 */
.card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.card-tag{
  font-size:10px;color:var(--blue);
  background:rgba(0,180,216,.1);
  border:1px solid rgba(0,180,216,.2);
  padding:2px 7px;border-radius:100px;
}

/* textarea 스타일 */
.form-group textarea{
  width:100%;background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:10px;padding:10px 14px;
  font-size:13px;color:var(--white);
  font-family:'Noto Sans KR',sans-serif;
  outline:none;transition:border-color .2s;
  line-height:1.6;
}
.form-group textarea:focus{border-color:rgba(245,200,66,.55)}

/* ===== Utility ===== */
.hidden{display:none!important}

/* ===== REVEAL ANIMATIONS ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Delay Helpers */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── Detail View Modal — 통합 라이브러리 관리자 ── */
.detail-view {
  position: fixed;
  inset: 0;
  background: #080808;
  z-index: 999999; /* 히어로 섹션(z-index 10)보다 훨씬 높게 설정 */
  display: none;
  flex-direction: column;
  opacity: 0;
  transform: scale(1.05);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
}

.detail-view.active {
  display: flex;
  opacity: 1;
  transform: scale(1);
}

/* 상단 헤더 바 */
.dv-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(0,0,0,0.7);
  border-bottom: 1px solid rgba(245,197,24,0.15);
  backdrop-filter: blur(20px);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.dv-back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  letter-spacing: 1.5px;
  background: rgba(255,255,255,0.08);
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.25s;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.dv-back-btn:hover { background: var(--gold); color: #000; }

.dv-header-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dv-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.dv-action-btn {
  background: rgba(245,197,24,0.1);
  border: 1px solid rgba(245,197,24,0.3);
  color: var(--gold);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
  transition: all 0.2s;
  white-space: nowrap;
}
.dv-action-btn:hover { background: var(--gold); color: #000; }
.dv-action-btn.ghost { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: var(--gray2); }
.dv-action-btn.ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }
.dv-action-btn.danger { background: rgba(255,71,87,0.1); border-color: rgba(255,71,87,0.3); color: var(--red); }
.dv-action-btn.danger:hover { background: var(--red); color: #fff; }

/* 본문 2컬럼 */
.dv-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* 왼쪽 사이드바: 카테고리 목록 */
.dv-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.5);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(20px);
  transition: width 0.3s;
}

.dv-sidebar-head {
  padding: 14px 16px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.dv-cat-add-btn {
  background: rgba(245,197,24,0.1);
  border: 1px solid rgba(245,197,24,0.25);
  color: var(--gold);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Noto Sans KR', sans-serif;
}
.dv-cat-add-btn:hover { background: var(--gold); color: #000; }

.dv-cat-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,197,24,0.2) transparent;
}

.dv-cat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid transparent;
  position: relative;
}
.dv-cat-item:hover { background: rgba(255,255,255,0.04); }
.dv-cat-item.active {
  background: rgba(245,197,24,0.08);
  border-left-color: var(--gold);
}
.dv-cat-emoji { font-size: 15px; flex-shrink: 0; width: 22px; text-align: center; }
.dv-cat-name { font-size: 13px; font-weight: 600; color: #ddd; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-cat-item.active .dv-cat-name { color: var(--gold); }
.dv-cat-count { font-size: 10px; color: var(--gray); flex-shrink: 0; }
.dv-cat-actions { display: none; gap: 3px; flex-shrink: 0; }
.dv-cat-item:hover .dv-cat-actions { display: flex; }
.dv-cat-act {
  background: none;
  border: none;
  color: var(--gray);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.15s;
  font-family: 'Noto Sans KR', sans-serif;
}
.dv-cat-act:hover { background: rgba(255,255,255,0.1); color: #fff; }
.dv-cat-act.del:hover { color: var(--red); }

/* 오른쪽 메인 영역 */
.dv-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* 배경 이미지 */
.dv-main-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  z-index: 0;
  transition: background-image 0.5s;
}
.dv-main-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8,8,8,0.4) 0%, rgba(8,8,8,0.85) 100%);
}

/* 메인 헤더 (선택된 카테고리 정보) */
.dv-main-head {
  position: relative;
  z-index: 2;
  padding: 24px 32px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.dv-main-cat-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.dv-main-cat-title {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
  font-family: 'Playfair Display', serif;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.dv-main-cat-desc {
  font-size: 13px;
  color: var(--gray2);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.dv-main-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* 아이템 스크롤 영역 */
.dv-items-scroll {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 32px;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,197,24,0.3) transparent;
}

/* 아이템 격자 컨테이너 (한 줄에 5개) */
.dv-items-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-bottom: 20px;
}
@media (max-width: 1400px) { .dv-items-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .dv-items-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .dv-items-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .dv-items-row { grid-template-columns: 1fr; } }

/* 아이템 카드 (격자 대응) */
.dv-item-card {
  width: 100%;
  height: 280px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.dv-item-card.no-cover {
  height: 280px; /* 고정 높이 유지 (커버 있는 카드와 통일감) */
  flex-direction: column;
  padding: 20px;
  gap: 12px;
  justify-content: center;
}
.dv-item-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.6); border-color: rgba(245,197,24,0.4); }

/* 🛠️ 상세 보기 내 아이템 관리 버튼 (편집/이동/삭제) */
.dv-card-manage {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  z-index: 10;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dv-item-card:hover .dv-card-manage {
  opacity: 1;
  transform: translateY(0);
}

.dv-card-m-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.dv-card-m-btn:hover {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
  transform: scale(1.1);
}

.dv-card-m-btn.del:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.dv-card-cover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.dv-card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0.1) 100%);
}
.dv-card-body {
  position: relative;
  z-index: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dv-card-emoji { font-size: 22px; margin-bottom: 4px; }
.dv-card-title { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.3; word-break: keep-all; overflow-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dv-card-sub { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.4; word-break: keep-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dv-card-btn {
  margin-top: 6px;
  padding: 5px 12px;
  background: rgba(245,197,24,0.15);
  border: 1px solid rgba(245,197,24,0.4);
  color: var(--gold);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
  width: fit-content;
  transition: all 0.2s;
  font-family: 'Noto Sans KR', sans-serif;
  cursor: pointer;
}
.dv-item-card:hover .dv-card-btn { background: var(--gold); color: #000; }

/* 아이템 관리 버튼 (편집모드) */
.dv-card-manage {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.2s;
}
.dv-item-card:hover .dv-card-manage { opacity: 1; }
.dv-card-m-btn {
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  backdrop-filter: blur(5px);
  font-family: 'Noto Sans KR', sans-serif;
}
.dv-card-m-btn:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.dv-card-m-btn.del:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* 소분류 헤더 */
.dv-subcat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 10px;
}
.dv-subcat-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
}
.dv-subcat-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(245,197,24,0.4), transparent);
}

/* 빈 상태 */
.dv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 200px;
  color: var(--gray);
  font-size: 14px;
}
.dv-empty-icon { font-size: 40px; }

@media (max-width: 900px) {
  .dv-sidebar { width: 180px; }
  .dv-main-head { padding: 16px 20px 12px; }
  .dv-items-scroll { padding: 16px 20px; }
}
@media (max-width: 640px) {
  .dv-sidebar { display: none; }
  .dv-main-cat-title { font-size: 20px; }
}

/* 레거시: 구 detail-info, detail-bg 숨김 */
.detail-bg, .detail-info { display: none !important; }

.detail-back {
  position: absolute;
  top: 40px;
  left: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--white);
  z-index: 3010;
  letter-spacing: 2px;
  background: rgba(0,0,0,0.6);
  padding: 10px 20px;
  border-radius: 100px;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s;
}

.detail-back:hover {
  background: var(--gold);
  color: var(--black);
  transform: translateX(-5px);
}

.detail-title {
  font-size: 3.5rem;
  font-family: 'Playfair Display', serif;
  margin-bottom: 16px;
  line-height: 1.1;
  color: var(--white);
}

.detail-desc {
  font-size: 1rem;
  color: var(--gray2);
  margin-bottom: 32px;
  line-height: 1.8;
}

/* ── 내부 아이템 리스트 (메뉴판 스타일) ── */
.detail-items-section {
  margin-top: 20px;
}


/* 📚 상세 보기 내 아이템 긴 로우 (가로 스크롤) */
.detail-items-grid {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,197,24,0.4) rgba(255,255,255,0.05);
  margin-top: 10px;
}
.detail-items-grid::-webkit-scrollbar {
  height: 5px;
}
.detail-items-grid::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}
.detail-items-grid::-webkit-scrollbar-thumb {
  background: rgba(245,197,24,0.4);
  border-radius: 10px;
}
/* 소분류 헤더는 전체 ꮨ 차지 */
.detail-subcat-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 📚 상세 보기 내 아이템 카드 (기본 리스트 스타일) */
.detail-item-card {
  flex-shrink: 0;
  width: 280px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  border-radius: 16px;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

/* 커버 이미지가 있는 카드: 프리미엄 세로형 */
.detail-item-card.has-cover {
  width: 220px;
  height: 340px;
  background-size: cover;
  background-position: center;
  border: none;
}
.detail-item-card.has-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 40%, rgba(0,0,0,0.2) 100%);
  border-radius: 16px;
}
.detail-item-card .d-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}

.dv-item-card:hover .dv-card-btn {
  background: var(--gold);
  color: #000;
}

.d-item-emoji {
  font-size: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  flex-shrink: 0;
}

.d-item-info {
  flex: 1;
}

.d-item-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.d-item-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.dv-card-btn {
  padding: 6px 14px;
  background: rgba(245, 197, 24, 0.15);
  border: 1px solid rgba(245, 197, 24, 0.4);
  color: #f5c518;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.2s;
  cursor: pointer;
}

.dv-item-card {
  cursor: pointer;
}

/* 📂 상세 보기 내 소분류 헤더 (격자에서 전체 너비 차지) */
.detail-subcat-header {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 40px;
  margin-bottom: 20px;
}

.detail-subcat-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #f5c518;
  opacity: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
}

.detail-subcat-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(245, 197, 24, 0.4), transparent);
}

/* 🔗 공식 사이트 바로가기 버튼 */
.detail-direct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: rgba(245, 197, 24, 0.08);
  border: 1px solid rgba(245, 197, 24, 0.4);
  color: #f5c518;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 20px;
  margin-bottom: 30px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  width: fit-content;
}

.detail-direct-btn:hover {
  background: #f5c518;
  color: #000;
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 40px rgba(245, 197, 24, 0.3);
}

/* ── 갤러리 어드민 UI ── */
.book-admin-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  flex-direction: column;
  gap: 5px;
  z-index: 100;
}

.admin-mode .book-admin-actions {
  display: flex;
}

.book-item.add-new {
  border: 2px dashed rgba(245,197,24,0.3);
  background: rgba(245,197,24,0.05);
  filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 3rem;
}

.book-item.add-new:hover {
  background: rgba(245,197,24,0.1);
  border-color: var(--gold);
}

/* Button Hover Enhancements */
.btn-primary, .btn-outline, .btn-survival, .card-btn {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: rgba(255,255,255,0.2);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  transition: transform 0.5s;
}

.btn-primary:active::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  transition: 0s;
}

/* card hover extra glow */
.item-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(245,200,66,0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.item-card:hover::before {
  opacity: 1;
}

/* ===== RESPONSIVE ===== */
@media(max-width:960px){
  .footer-inner{grid-template-columns:1fr 1fr}
  .main-nav{display:none}
  .header-right .btn-survival{display:none}
  .hamburger{display:flex}
  .header-inner{gap:10px}
  .cat-tab{font-size:12px;padding:7px 12px}
}

@media(max-width:700px){
  .items-grid{grid-template-columns:1fr}
  .detail-items-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .chat-widget{width:calc(100vw - 44px)}
}

/* ━━━ Grid Section Header ━━━ */
.grid-section-title {
  width: 100%;
  grid-column: 1 / -1;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
  margin: 40px 0 16px;
  padding: 10px 16px;
  border-left: 4px solid var(--gold);
  background: linear-gradient(90deg, rgba(245,200,66,0.08), transparent);
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.01em;
  border-radius: 4px;
}
.grid-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.1), transparent);
}

/* ===== 관리자 센터 스타일 ===== */
.admin-fab-container {
  position: fixed;
  right: 25px;
  bottom: 100px; /* 채팅 버튼 위에 위치 */
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.admin-fab {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #141416;
  border: 2px solid #f8d14d;
  color: #f8d14d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.admin-fab:hover {
  transform: scale(1.1) rotate(90deg);
  background: #f8d14d;
  color: #000;
}
.admin-menu {
  background: #141416;
  border: 1px solid rgba(248,209,77,0.3);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 15px;
  display: none;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  width: 180px;
  animation: adminFadeIn 0.3s ease;
}
.admin-menu.active { display: flex; }
.admin-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-menu a:hover {
  background: rgba(248,209,77,0.08);
  color: #f8d14d;
}
@keyframes adminFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 프리미엄 피아노 갤러리 (모든 AI 부동산 전용) ===== */
.piano-gallery {
  display: flex;
  gap: 12px;
  height: 550px;
  width: 100%;
  padding: 20px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.piano-gallery::-webkit-scrollbar { display: none; }

.piano-card {
  flex: 0 0 80px;
  height: 100%;
  background: #141416;
  border: 1px solid rgba(248,209,77,0.2);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: column;
}

.piano-card:hover {
  flex: 0 0 350px;
  background: linear-gradient(180deg, #1d1d20 0%, #0c0c0e 100%);
  border-color: #f8d14d;
  box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

.piano-card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(248,209,77,0.05) 0%, transparent 100%);
  z-index: 0;
}

.piano-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.piano-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.piano-num {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #f8d14d;
  opacity: 0.6;
}

.piano-emoji {
  font-size: 24px;
}

.piano-title-v {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 4px;
  margin-top: 20px;
  opacity: 1;
  transition: opacity 0.3s;
}

.piano-card:hover .piano-title-v {
  opacity: 0;
  display: none;
}

.piano-info {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
  flex: 1;
  justify-content: flex-end;
}

.piano-card:hover .piano-info {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: translateY(0);
}

.piano-title-h {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
  font-family: 'Playfair Display', serif;
}

.piano-sub {
  font-size: 14px;
  color: #a0a0a5;
  line-height: 1.6;
  margin-bottom: 24px;
}

.piano-btn {
  width: fit-content;
  padding: 12px 24px;
  background: #f8d14d;
  color: #000;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s;
}

}

/* ===== 상세 뷰 사이드바 프리미엄 블랙 & 골드 스타일 ===== */
.dv-sidebar {
  width: 280px;
  background: #0c0c0e !important; /* 다시 블랙 배경으로 */
  border-right: 1px solid rgba(248, 209, 77, 0.1);
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}

.dv-sidebar-head {
  padding: 0 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--gold);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.5px;
}

.dv-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  margin-bottom: 4px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #a0a0a5 !important;
}

.dv-cat-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff !important;
}

.dv-cat-item.active {
  background: rgba(248, 209, 77, 0.1) !important;
  color: #f8d14d !important; /* 골드 컬러 복구 */
  font-weight: 800;
  border: 1px solid rgba(248, 209, 77, 0.2);
}

.dv-cat-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dv-cat-emoji {
  font-size: 20px;
}

.dv-cat-name {
  font-size: 15px;
}

.dv-cat-count {
  font-size: 12px;
  color: #666;
  font-weight: 600;
}

.dv-cat-item.active .dv-cat-count {
  color: #f8d14d;
}

/* 관리자 모드 버튼 (어두운 배경용) */
.dv-cat-admin-btns {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.dv-cat-item:hover .dv-cat-admin-btns {
  opacity: 1;
}

.dv-cat-m-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #1a1a1c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.dv-cat-m-btn:hover { 
  transform: translateY(-2px);
  border-color: var(--gold);
  color: var(--gold);
}

.dv-cat-m-btn.del:hover { 
  background: #2a1214; 
  color: #ff4757;
  border-color: #ff4757;
}

.dv-cat-add-btn {
  background: rgba(248, 209, 77, 0.1);
  color: var(--gold);
  border: 1px solid var(--gold);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

/* ===== [최종 완성] 사진 2번 스타일: 사이드바 없는 입체 책 갤러리 ===== */

/* 사이드바 숨김 로직 (재복구) */
.detail-view.full-screen .dv-sidebar {
  display: none !important;
}
.detail-view.full-screen .dv-main {
  flex: 1 !important;
  background: #000;
}

.realty-book-gallery {
  display: flex;
  height: 80vh; 
  gap: 20px;
  padding: 40px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: flex-end;
  background: transparent;
  perspective: 1500px;
  width: 100%;
}

/* 메인 화면 그리드 제약 해제 */
.items-grid.full-width-gallery {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin-top: -30px;
}

.realty-book-gallery.main-pg {
  height: 70vh;
  padding: 20px 0;
}

.realty-book {
  flex: 0 0 140px; /* 메인 책장과 유사한 슬림한 넓이 */
  position: relative;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
  transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(5deg); /* 입체감 있는 기본 각도 */
  margin-right: 15px;
}

.realty-book:hover {
  transform: rotateY(0deg) rotateX(0deg) translateY(-25px) scale(1.1); /* 정면 부각 효과 */
  z-index: 100;
}

.realty-book-cover {
  position: absolute;
  inset: 0;
  border-radius: 4px 12px 12px 4px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 10px 10px 30px rgba(0,0,0,0.6);
  z-index: 2;
  border-left: 2px solid rgba(255,255,255,0.1); /* 책등 경계선 */
}

.realty-book-side {
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: -15px; /* 더 두꺼운 입체감 */
  width: 35px; /* 책 두께 최적화 */
  background: #2a2a2a;
  transform: rotateY(90deg);
  border-radius: 0 8px 8px 0;
  box-shadow: inset 5px 0 15px rgba(0,0,0,0.8);
  z-index: 1;
}

.realty-book-content {
  position: absolute;
  inset: 0;
  padding: 30px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.realty-book-num {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: var(--gold);
  font-weight: 900;
  opacity: 0.7;
}

.realty-book-title-v {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 16px; /* ★ 수정: 26px → 16px (책 폭 140px 기준) */
  font-weight: 900;
  color: #fff;
  letter-spacing: 3px;
  margin: auto 0;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
  white-space: normal; /* ★ 수정: nowrap → normal */
  overflow: hidden;
  max-height: 60%; /* ★ 추가: 높이 제한 */
  word-break: keep-all;
}

.realty-book-footer {
  text-align: center;
}

.realty-book-emoji {
  font-size: 28px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}

/* 스크롤바 디자인 (메인 테마에 맞춤) */
.realty-book-gallery::-webkit-scrollbar {
  height: 8px;
}
.realty-book-gallery::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 10px;
}
.realty-book-gallery::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}