/* ===================== ROOT & THEMES ===================== */
:root {
  /* DARK (Default) */
  --bg:        #09080a;
  --bg2:       #100f12;
  --bg3:       #18161c;
  --gold:      #d4a843;
  --gold2:     #f0c96a;
  --gold3:     #7a5c1e;
  --cream:     #f0e8d5;
  --cream2:    #c8bda8;
  --cream3:    #8a7e6e;
  --red:       #9b3a2a;
  --border:    rgba(212,168,67,.22);
  --border2:   rgba(212,168,67,.45);
  --glow:      rgba(212,168,67,.12);
  --shadow:    rgba(0,0,0,.8);
  
  --msg-phil:  linear-gradient(135deg,rgba(42,32,12,.95),rgba(22,17,6,.98));
  --msg-user:  linear-gradient(135deg,rgba(35,50,110,.9),rgba(20,30,80,.95));
  --msg-text-phil: #f0e4c8;
  --msg-text-user: #d8e4ff;
  
  --btn-glass: rgba(255,255,255,0.03);
  --btn-glass-hover: rgba(212,168,67,0.12);
  
  --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

[data-theme='light'] {
  --bg:        #fdfbf7;
  --bg2:       #f7f2e8;
  --bg3:       #ede6d0;
  --gold:      #8a6d2b;
  --gold2:     #6a5421;
  --gold3:     #a68b4a;
  --cream:     #2a2620;
  --cream2:    #4a453e;
  --cream3:    #7a746a;
  --border:    rgba(138,109,43,.25);
  --border2:   rgba(138,109,43,.5);
  --glow:      rgba(138,109,43,.08);
  --shadow:    rgba(138,109,43,.15);
  
  --msg-phil:  linear-gradient(135deg,#ffffff,#f5f0e1);
  --msg-user:  linear-gradient(135deg,#eef4ff,#dfeaff);
  --msg-text-phil: #2a2620;
  --msg-text-user: #1a2a4a;
  
  --btn-glass: rgba(0,0,0,0.02);
  --btn-glass-hover: rgba(138,109,43,0.08);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--cream);
  font-family:'Noto Serif KR', 'Noto Serif', serif;
  letter-spacing: 0.02em;
  min-height:100vh;
  overflow-x:hidden;
  cursor:default;
  transition: background-color 0.6s ease, color 0.6s ease;
}

/* ── parchment texture ── */
body::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:.8;
}

/* ── premium vignette ── */
body::after{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 40%, transparent 10%, rgba(0,0,0,0.4) 150%);
}

/* ===================== UTILITY BAR ===================== */
.utility-bar {
  position: fixed; top: 1.5rem; right: 1.5rem;
  display: flex; align-items: center; gap: 0.8rem;
  z-index: 1000;
}

.theme-toggle, .lang-select {
  background: var(--btn-glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  color: var(--gold);
  padding: 0.6rem 1rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.theme-toggle:hover, .lang-select:hover {
  background: var(--btn-glass-hover);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--glow);
}

.theme-toggle svg { width: 16px; height: 16px; fill: currentColor; }

/* ===================== BUTTONS (PREMIUM REDESIGN) ===================== */
.btn-premium {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--btn-glass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 0.8rem 1.8rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.btn-premium::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.btn-premium:hover {
  background: var(--btn-glass-hover);
  border-color: var(--gold2);
  color: var(--gold2);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 20px var(--glow);
}

.btn-premium:hover::before { transform: translateX(100%); }

.btn-premium:active { transform: translateY(0) scale(0.98); }

/* ===================== SITE HEADER ===================== */
.site-header {
  text-align: center;
  padding: clamp(5rem, 10vw, 8rem) 1rem clamp(2rem, 5vw, 4rem);
}

.header-ornament {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.6em;
  color: var(--gold3);
  margin-bottom: 1.5rem;
  opacity: 0.8;
}

.site-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(3rem, 10vw, 5.5rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold3) 0%, var(--gold2) 50%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 0.15em;
  margin-bottom: 0.8rem;
  filter: drop-shadow(0 0 50px var(--glow));
}

.site-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: var(--cream2);
  letter-spacing: 0.2em;
  opacity: 0.9;
}

/* ===================== GALLERY GRID ===================== */
.gallery-section {
  padding: 0 clamp(1.5rem, 6vw, 5rem) 8rem;
  max-width: 1500px; margin: 0 auto;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

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

.phil-card {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--bg2);
  border: 1px solid var(--border);
  transition: var(--transition);
  aspect-ratio: 3 / 4.2;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 12px;
}

.phil-card:hover {
  transform: translateY(-12px) scale(1.02);
  border-color: var(--gold2);
  box-shadow: 0 40px 80px rgba(0,0,0,0.8), 0 0 40px var(--glow);
}

.phil-card-body {
  position: relative; z-index: 2; padding: 2rem 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  width: 100%;
}

.phil-card-name {
  font-family: 'Cinzel', 'Noto Serif KR', serif; font-size: 1.8rem; color: #fff;
  margin-bottom: 0.5rem; letter-spacing: 0.05em;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
[data-theme='light'] .phil-card-name { color: #fff; }

.phil-card-era { font-family: 'Cinzel', serif; font-size: 0.75rem; color: var(--gold2); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.3rem; }

/* ===================== CHAT UI (ADVANCED ALIGNMENT) ===================== */
.chat-screen { height: 100vh; display: flex; flex-direction: column; }

.chat-topbar {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.2rem 2.5rem;
  background: rgba(9,8,10,0.95);
  backdrop-filter: blur(25px);
  border-bottom: 1px solid var(--border);
}

.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 3rem clamp(1.5rem, 15vw, 12rem);
  display: flex; flex-direction: column; gap: 2.5rem;
}

.msg { display: flex; width: 100%; animation: slideIn 0.5s ease forwards; }

@keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ALIGNMENT LOGIC */
.msg.phil { justify-content: flex-start; }
.msg.user { justify-content: flex-end; }

.msg-bubble-wrap { max-width: 80%; display: flex; flex-direction: column; gap: 0.6rem; }
.msg.user .msg-bubble-wrap { align-items: flex-end; }

.msg-name {
  font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.15em;
  color: var(--gold); text-transform: uppercase; margin: 0 0.5rem;
}

.msg-bubble {
  padding: 1.4rem 2rem; border-radius: 4px;
  line-height: 2; font-size: 1.05rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.msg.phil .msg-bubble {
  background: var(--msg-phil);
  border: 1px solid var(--border);
  border-left: 5px solid var(--gold);
  color: var(--msg-text-phil);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
}

.msg.user .msg-bubble {
  background: var(--msg-user);
  border: 1px solid rgba(100,140,255,0.25);
  border-right: 5px solid #6384ff;
  color: var(--msg-text-user);
}

/* ===================== TOPICS GRID ===================== */
.topics-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem; margin: 2.5rem 0;
}

.topic-btn {
  background: var(--btn-glass);
  border: 1px solid var(--border);
  color: var(--cream);
  padding: 1.2rem 1.5rem;
  text-align: left; cursor: pointer;
  transition: var(--transition);
  font-family: 'Noto Serif KR', serif;
  font-size: 0.95rem;
}

.topic-btn:hover {
  background: var(--btn-glass-hover);
  border-color: var(--gold);
  color: var(--gold2);
  transform: translateX(8px);
}

/* ===================== FOOTER ===================== */
.site-footer {
  text-align: center; padding: 6rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

.footer-links { margin-top: 1.5rem; }
.footer-links a { margin: 0 1.2rem; font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--cream3); text-decoration: none; transition: var(--transition); cursor: pointer; }
.footer-links a:hover { color: var(--gold); letter-spacing: 0.2em; }

/* Scrollbar Customization */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ===================== AD OVERLAY ===================== */
.ad-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(20px);
  z-index: 9999;
  display: none; /* Hidden by default */
  align-items: center; justify-content: center;
  padding: 2rem;
}

.ad-overlay.show { display: flex; animation: fadeIn 0.4s ease; }

.ad-modal {
  background: var(--bg2);
  border: 1px solid var(--border2);
  width: 100%; max-width: 400px;
  padding: 2rem; border-radius: 4px;
  box-shadow: 0 30px 100px rgba(0,0,0,0.8);
  text-align: center;
}

.ad-modal-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.ad-modal-label { font-family: 'Cinzel'; font-size: 0.7rem; color: var(--gold3); letter-spacing: 0.2em; }
.ad-modal-countdown { font-family: 'Cinzel'; font-size: 1.2rem; color: var(--gold); font-weight: 700; }

.ad-modal-content {
  height: 250px; background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream3); font-style: italic; margin-bottom: 2rem;
  font-size: 0.9rem;
}