/* =========================================================
   안설영 · Clay touch (말랑한 닥종이 질감)
   사진·본문은 그대로 두고, 손이 닿는 작은 요소(버튼·아이콘·안내 카드)에만
   부풀린 점토 같은 입체감을 준다. 모든 페이지 <head> 끝에서 불러온다.
   ========================================================= */
:root{
  /* 점토 표면색 */
  --clay-ivory-1:#FFFDF8; --clay-ivory-2:#EFE7D6;
  --clay-wine-1:#82283E;  --clay-wine-2:#4A1020;
  --clay-navy-1:#26345C;  --clay-navy-2:#101830;
  --clay-ink-1:#3A352D;   --clay-ink-2:#14120F;
  --clay-gold-1:#DDBA67;  --clay-gold-2:#A9822F;
  /* 빛과 그림자 */
  --clay-hi-light:inset 2px 2px 3px rgba(255,255,255,0.95);
  --clay-lo-light:inset -3px -4px 9px rgba(140,104,60,0.20);
  --clay-hi-dark:inset 2px 2px 3px rgba(255,255,255,0.22);
  --clay-lo-dark:inset -3px -4px 9px rgba(0,0,0,0.32);
  --clay-drop:0 10px 20px -10px rgba(52,34,16,0.38), 0 2px 4px rgba(52,34,16,0.07);
  --clay-drop-dark:0 10px 22px -10px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.18);
  --clay-ease:transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s ease, background .25s ease, color .2s ease;
}

/* ---------- 공통 점토 표면 ---------- */
.tag-btn, .lyrics-box summary, .pager a, .work-tag, .btn-line, #exToggle,
.ex-badge, .more-item.is-current .ph::after{
  background:linear-gradient(145deg, var(--clay-ivory-1), var(--clay-ivory-2));
  box-shadow:var(--clay-hi-light), var(--clay-lo-light), var(--clay-drop);
  border:0 !important;
}

/* ---------- 분류 버튼 (작품·노래 목록) ---------- */
.tag-btn{
  border-radius:999px; padding:10px 18px; color:#4A453A;
  transition:var(--clay-ease);
}
.tag-btn:hover{ color:var(--ink); transform:translateY(-2px); }
.tag-btn:active{ transform:translateY(1px) scale(.98); }
.tag-btn.is-active{
  background:linear-gradient(145deg, var(--clay-wine-1), var(--clay-wine-2));
  box-shadow:var(--clay-hi-dark), var(--clay-lo-dark), 0 10px 20px -10px rgba(92,22,38,0.65);
  color:#FBF6EC;
}
.filter-tags{ gap:10px; padding:4px 2px 10px; }
.dye-jjok .tag-btn{ border-color:transparent; }

/* ---------- 헤더: 언어 전환·메뉴 버튼 ---------- */
.lng-sw{
  padding:3px; border-radius:999px; gap:2px;
  background:linear-gradient(145deg, var(--clay-navy-2), var(--clay-navy-1));
  box-shadow:inset 2px 3px 6px rgba(0,0,0,0.45), inset -1px -1px 2px rgba(255,255,255,0.10);
}
.lng-sw button, .lng-sw button + button{
  border:0; border-radius:999px; padding:5px 11px; color:#B9C2D6; background:transparent;
  transition:var(--clay-ease);
}
.lng-sw button.on{
  background:linear-gradient(145deg, var(--clay-gold-1), var(--clay-gold-2));
  box-shadow:var(--clay-hi-dark), inset -2px -3px 5px rgba(80,50,0,0.30), 0 4px 8px -3px rgba(0,0,0,0.5);
  color:var(--navy);
}
.nav-toggle{
  border:0 !important; border-radius:999px;
  background:linear-gradient(145deg, var(--clay-navy-1), var(--clay-navy-2));
  box-shadow:var(--clay-hi-dark), var(--clay-lo-dark), 0 6px 14px -6px rgba(0,0,0,0.7);
  transition:var(--clay-ease);
}
.nav-toggle:active{ transform:scale(.96); }

/* ---------- 작품 페이지: 노래 듣기 버튼 ---------- */
.listen-btn{
  border-radius:22px; padding:18px 18px 18px 26px;
  background:linear-gradient(145deg, var(--clay-ink-1), var(--clay-ink-2));
  box-shadow:var(--clay-hi-dark), var(--clay-lo-dark), var(--clay-drop-dark);
  transition:var(--clay-ease);
}
.listen-btn:hover{
  background:linear-gradient(145deg, var(--clay-wine-1), var(--clay-wine-2));
  transform:translateY(-2px);
}
.listen-btn:active{ transform:translateY(1px); }
.listen-btn .arrow{
  /* 아이콘: 금색 점토 구슬 */
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-size:1.2rem; font-style:normal;
  color:var(--navy);
  background:radial-gradient(circle at 32% 28%, #F4DE9E 0%, var(--clay-gold-1) 38%, var(--clay-gold-2) 100%);
  box-shadow:inset -3px -4px 6px rgba(90,60,0,0.35), inset 2px 2px 3px rgba(255,255,255,0.55), 0 6px 12px -4px rgba(0,0,0,0.5);
}

/* ---------- 작품 페이지: 질문 상자 (QR로 들어온 관람객이 처음 만나는 안내 카드) ---------- */
.work-q{
  position:relative; margin-top:44px; padding:24px 28px 24px 70px;
  border-left:0; border-radius:26px; max-width:580px;
  background:linear-gradient(145deg, #FFFBF4, #F2E7E2);
  box-shadow:var(--clay-hi-light), inset -4px -5px 12px rgba(92,22,38,0.10), var(--clay-drop);
}
.work-q::before{
  /* 아이콘: 와인색 점토 물음표 */
  content:'?'; position:absolute; left:20px; top:22px;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--latin); font-style:italic; font-size:1.25rem; line-height:1; color:#FBF6EC;
  background:radial-gradient(circle at 32% 28%, #B34A62 0%, var(--clay-wine-1) 40%, var(--clay-wine-2) 100%);
  box-shadow:inset -2px -3px 5px rgba(0,0,0,0.30), inset 2px 2px 2px rgba(255,255,255,0.35), 0 5px 10px -4px rgba(92,22,38,0.6);
}
.work-tag{ border-radius:999px; padding:7px 16px; color:var(--wine); }

/* ---------- 작품 페이지: 가사 펼치기 (어두운 바탕) ---------- */
.lyrics-box{ border-top:0; margin-top:40px; }
.lyrics-box summary{
  border-radius:999px; padding:14px 16px 14px 24px; align-items:center;
  background:linear-gradient(145deg, var(--clay-ink-1), #1E1B17);
  box-shadow:var(--clay-hi-dark), var(--clay-lo-dark), var(--clay-drop-dark);
  transition:var(--clay-ease);
}
.lyrics-box summary:hover{ transform:translateY(-2px); }
.lyrics-box summary::after{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  color:var(--navy); font-size:1.1rem;
  background:radial-gradient(circle at 32% 28%, #F4DE9E 0%, var(--clay-gold-1) 40%, var(--clay-gold-2) 100%);
  box-shadow:inset -2px -3px 4px rgba(90,60,0,0.35), inset 1px 1px 2px rgba(255,255,255,0.5);
}
.lyrics-box[open] .lyrics{ padding-top:22px; }
.song-sec audio{ border-radius:999px; box-shadow:var(--clay-drop-dark); }

/* ---------- 작품 페이지: 이전·다음 작품 ---------- */
.pager{ border-top:0; padding-top:0; }
.pager a{ border-radius:22px; padding:16px 22px; transition:var(--clay-ease); }
.pager a:hover{ transform:translateY(-2px); }
.more-item.is-current .ph::after{
  left:10px; bottom:10px; border-radius:999px; padding:5px 12px; color:var(--wine);
}
.more-item.is-current .ph{ outline:0; box-shadow:0 0 0 2px var(--wine); }

/* ---------- 별자리: 조명 켜기 버튼 ---------- */
.light-btn{
  border-radius:999px; padding:14px 28px;
  background:linear-gradient(145deg, var(--clay-navy-1), var(--clay-navy-2));
  box-shadow:var(--clay-hi-dark), var(--clay-lo-dark), var(--clay-drop-dark);
  transition:var(--clay-ease);
}
.light-btn:hover{ background:linear-gradient(145deg, #2E3E6C, #141D38); transform:translateY(-2px); }
.light-btn[aria-pressed="true"]{
  background:linear-gradient(145deg, var(--clay-gold-1), var(--clay-gold-2)); color:var(--navy);
}

/* ---------- 노래 목록: 재생 버튼·재생기 ---------- */
.t-play{
  /* 아이콘: 아이보리 점토 구슬 안에 재생 표시 */
  border:0; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #FFFFFF 0%, var(--clay-ivory-1) 35%, var(--clay-ivory-2) 100%);
  box-shadow:inset -3px -4px 7px rgba(140,104,60,0.22), inset 2px 2px 2px rgba(255,255,255,0.9), 0 6px 12px -6px rgba(52,34,16,0.45);
  transition:var(--clay-ease);
}
.track:hover .t-play{ transform:scale(1.06); }
.track.is-current .t-play{
  background:radial-gradient(circle at 32% 28%, #FFFFFF 0%, #FBEFEF 35%, #EBD3D3 100%);
  box-shadow:inset -3px -4px 7px rgba(92,22,38,0.22), inset 2px 2px 2px rgba(255,255,255,0.9), 0 0 0 2px var(--wine), 0 6px 12px -6px rgba(92,22,38,0.5);
}
.p-btn{
  width:40px; height:40px; padding:0 !important; display:grid; place-items:center;
  border-radius:50% !important; border:0 !important;
  background:linear-gradient(145deg, var(--clay-navy-1), var(--clay-navy-2)) !important;
  box-shadow:var(--clay-hi-dark), var(--clay-lo-dark), 0 6px 12px -6px rgba(0,0,0,0.7);
  transition:var(--clay-ease);
}
.p-btn:active{ transform:scale(.94); }
.p-btn.p-main{
  width:52px; height:52px;
  background:radial-gradient(circle at 32% 28%, #F4DE9E 0%, var(--clay-gold-1) 40%, var(--clay-gold-2) 100%) !important;
  color:var(--navy) !important;
  box-shadow:inset -3px -4px 6px rgba(90,60,0,0.35), inset 2px 2px 3px rgba(255,255,255,0.55), 0 8px 14px -6px rgba(0,0,0,0.6);
}
.btn-gold{
  border:0 !important; border-radius:999px;
  background:linear-gradient(145deg, var(--clay-gold-1), var(--clay-gold-2)) !important;
  box-shadow:var(--clay-hi-dark), inset -3px -4px 8px rgba(80,50,0,0.30), var(--clay-drop);
  transition:var(--clay-ease);
}
.btn-line{
  border-radius:999px; color:#E6E0D2 !important;
  background:linear-gradient(145deg, var(--clay-ink-1), var(--clay-ink-2)) !important;
  box-shadow:var(--clay-hi-dark), var(--clay-lo-dark), var(--clay-drop-dark) !important;
  transition:var(--clay-ease);
}
.btn-gold:hover, .btn-line:hover{ transform:translateY(-2px); }

/* ---------- 전시 이력: 더 보기·배지 ---------- */
#exToggle{ border-radius:999px; transition:var(--clay-ease); }
#exToggle:hover{ transform:translateY(-2px); }
.ex-badge{ border-radius:999px; padding:5px 13px; }

/* ---------- Works Bento: 안내 카드 ---------- */
.bento .b-info{
  border-radius:24px;
  background:linear-gradient(150deg, var(--clay-wine-1), var(--clay-wine-2));
  box-shadow:inset 3px 3px 5px rgba(255,255,255,0.20), inset -6px -8px 16px rgba(0,0,0,0.30), 0 16px 28px -14px rgba(92,22,38,0.7);
  transition:var(--clay-ease);
}
.bento .b-info:hover{ transform:translateY(-3px); background:linear-gradient(150deg, #8E2E46, #521425); }
.bento .info-link{
  border:0; padding:7px 14px; border-radius:999px; color:var(--navy);
  background:linear-gradient(145deg, var(--clay-gold-1), var(--clay-gold-2));
  box-shadow:var(--clay-hi-dark), inset -2px -3px 5px rgba(80,50,0,0.3), 0 5px 10px -5px rgba(0,0,0,0.5);
}

@media (prefers-reduced-motion:reduce){
  .tag-btn, .listen-btn, .pager a, .lyrics-box summary, .light-btn, .p-btn, .btn-gold, .btn-line, #exToggle, .bento .b-info{
    transition:none !important; transform:none !important;
  }
}