/* ============================================================
   제1회 김혜인 개인전 — 꽃과 고양이를 주제로 한 감성 회화이야기

   포스터의 짙은 갈흑색 + 파랑/노랑에 샴페인 골드를 세 번째 색으로 더했다.
   그림이 주인공이므로 배경은 끝까지 물러서고, 채도는 캔버스 안에서만 올라온다.
   작품마다 --ac 변수에 그 그림에서 뽑아낸 지배색이 들어 있고,
   액자 테두리·라벨 괘선·호버 광채가 전부 그 색을 쓴다.
   ============================================================ */

:root{
  --bg:      #12100e;
  --bg-2:    #181410;
  --bg-3:    #201a15;
  --bg-4:    #262019;

  --line:    rgba(226,208,180,.11);
  --line-2:  rgba(226,208,180,.22);

  --tx:      #f5efe6;
  --tx-2:    #ddd3c6;
  --mut:     #b2a695;

  --blue:    #58a8de;
  --yellow:  #ffdf55;
  --gold:    #c9a86a;
  --gold-lt: #e3cb9a;

  --ac:      var(--gold);   /* 작품별로 덮어씀 */

  --ko: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --lat: "Cormorant Garamond", "Times New Roman", serif;

  /* 글자 크기 단계. 손으로 정한 값 열대여섯 개가 .93 / .94 / .95 처럼
     서로 구별되지 않는 채로 흩어져 있었다. 일곱 단으로 묶어 리듬을 만든다.
     전부 rem 이라 관람객이 '글자 크기' 를 키우면 같이 커진다. */
  --t-3xs: .78rem;   /* 자간 넓은 최소 라벨 — 섹션 번호, 티켓 머리말 */
  --t-2xs: .84rem;   /* 정의어(dt), 라벨 */
  --t-xs:  .9rem;    /* 보조 설명, 출처 */
  --t-sm:  .97rem;   /* 메뉴, 안내 문구 */
  --t-md:  1.08rem;  /* 본문 */
  --t-lg:  1.22rem;  /* 소제목, 라틴 이탤릭 */
  --t-xl:  1.44rem;  /* 약력 연도 */

  /* 한글 본문 한 줄. 30자 안팎이 가장 덜 지친다. */
  --measure: 33em;

  --wrap: 1280px;
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-o: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

/* 본문 글자 크기의 기준. 관람객이 우측 상단 버튼으로 직접 키울 수 있고,
   읽기용 텍스트는 전부 rem 이라 여기 하나만 바뀌면 같이 따라 커진다. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-size:16px; }
html[data-fs="l"]{ font-size:18px; }
html[data-fs="xl"]{ font-size:20px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--ko);
  font-size:var(--t-md); line-height:1.85; font-weight:400; letter-spacing:-.011em;
  overflow-x:hidden; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,p,figure,dl,dd,blockquote,ol,ul{ margin:0; }
ol,ul{ padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:2px; }
::selection{ background:rgba(201,168,106,.3); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.dot{ color:var(--gold); margin:0 .5em; opacity:.7; }
.mut{ color:var(--mut); }

.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--gold); color:#1a1409; padding:12px 20px; border-radius:2px;
  font-weight:700; transition:top .2s;
}
.skip:focus{ top:16px; }

/* 캔버스 결 */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 읽은 만큼 차오르는 금선 */
.progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:110; pointer-events:none; }
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--gold-lt), var(--gold) 45%, var(--blue));
  box-shadow:0 0 12px rgba(201,168,106,.55);
  transition:width .1s linear;
}

/* ───────────────────────── 내비게이션 ───────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(18,16,14,.86);
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  border-bottom-color:var(--line);
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--pad);
  height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__brand{ display:flex; align-items:center; gap:11px; }
.nav__mark{ width:20px; height:20px; color:var(--gold); flex:none; }
.nav__mark svg{ width:100%; height:100%; display:block; }
.nav__brand-txt{ display:flex; align-items:baseline; gap:9px; }
.nav__brand-txt b{ font-weight:800; font-size:17px; letter-spacing:.01em; }
.nav__brand-txt i{
  font-family:var(--lat); font-style:normal; font-size:12.5px;
  letter-spacing:.26em; color:var(--gold); text-transform:uppercase;
}
.nav__links{ display:flex; gap:34px; }
.nav__links a{ font-size:var(--t-sm); color:var(--tx-2); position:relative; padding:8px 0; transition:color .25s; }
.nav__links a span{ position:relative; }
.nav__links a span::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0;
  background:var(--gold); transition:width .35s var(--ease-o);
}
.nav__links a:hover{ color:var(--tx); }
.nav__links a:hover span::after{ width:100%; }

/* 지금 보고 있는 섹션. 밑줄이 장식으로만 있었는데 위치 표시 역할을 맡는다. */
.nav__links a.is-here{ color:var(--tx); }
.nav__links a.is-here span::after{ width:100%; }
.nav__drawer a.is-here{ color:var(--gold-lt); }

/* 글자 크기 조절 — 이 전시의 관람객 상당수가 50~60대다.
   브라우저 설정을 찾아 들어가지 않아도 화면에서 바로 키울 수 있게 둔다. */
.fs{ display:flex; align-items:center; gap:2px; margin-left:6px; }
.fs__lbl{ font-size:var(--t-3xs); letter-spacing:.14em; color:var(--mut); margin-right:8px; }
.fs button{
  width:34px; height:34px; line-height:1; color:var(--mut);
  border:1px solid transparent; border-radius:3px;
  transition:color .25s, border-color .25s, background .25s;
}
.fs button:nth-child(2){ font-size:.86rem; }
.fs button:nth-child(3){ font-size:1.04rem; }
.fs button:nth-child(4){ font-size:1.24rem; }
.fs button:hover{ color:var(--tx); }
.fs button[aria-pressed="true"]{
  color:var(--gold); border-color:var(--line-2); background:rgba(201,168,106,.10);
}

/* 서랍(모바일) 안의 글자 크기 조절 */
.fs--drawer{ display:flex; padding:16px 2px; border-bottom:1px solid var(--line); margin-left:0; }
.fs--drawer .fs__lbl{ margin-right:12px; }
@media (max-width:820px){ .fs--drawer{ display:flex !important; } }

.nav__toggle{ display:none; width:40px; height:40px; padding:9px 7px; }
.nav__toggle span{ display:block; height:1.5px; background:var(--tx); margin:5px 0; transition:transform .3s var(--ease), opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.nav__drawer{
  display:none; flex-direction:column; padding:6px var(--pad) 24px;
  background:rgba(18,16,14,.97); backdrop-filter:blur(16px); border-top:1px solid var(--line);
}
.nav__drawer a{ padding:15px 2px; border-bottom:1px solid var(--line); font-size:var(--t-md); }
.nav__drawer a:last-child{ border-bottom:0; }

/* ───────────────────────── 액자 ───────────────────────── */
.frame{
  display:block; position:relative; padding:10px;
  background:linear-gradient(150deg, var(--bg-4), var(--bg-3) 62%);
  box-shadow:
    0 0 0 1px var(--line),
    inset 0 1px 0 rgba(240,228,206,.07),    /* 매트 윗면이 받는 빛 */
    inset 0 -1px 0 rgba(0,0,0,.42),         /* 아래로 지는 그늘 */
    0 30px 60px -34px rgba(0,0,0,.95);
  transition:box-shadow .55s var(--ease-o);
}
.frame::after{           /* 매트 안쪽 금색 실선 */
  content:""; position:absolute; inset:10px; pointer-events:none; z-index:2;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ac) 42%, transparent),
    inset 0 4px 9px -5px rgba(0,0,0,.6);    /* 매트가 그림에 드리우는 그림자 */
  transition:box-shadow .55s var(--ease-o);
}
.frame img{ width:100%; height:auto; position:relative; z-index:1; }
.frame--hero{ padding:14px; }

/* ───────────────────────── 미술관 라벨 ───────────────────────── */
.plate{
  display:block; padding:16px 2px 0; text-align:left;
  border-top:1px solid var(--line); margin-top:16px; position:relative;
}
.plate::before{
  content:""; position:absolute; left:0; top:-1px; width:32px; height:1px;
  background:var(--ac); transition:width .55s var(--ease-o);
}
.plate em{
  display:block; font-family:var(--lat); font-style:normal; font-size:var(--t-2xs);
  font-weight:600; letter-spacing:.28em; font-variant-numeric:tabular-nums; color:var(--gold); margin-bottom:7px;
}
.plate b{
  display:block; font-size:var(--t-md); font-weight:700; letter-spacing:-.022em;
  color:var(--tx); line-height:1.5; text-wrap:balance;
}
/* 규격은 세리프로 두되 무게와 크기를 올린다. 얇은 세리프를 작게 쓰면
   나이 든 눈에는 거의 안 읽힌다. */
.plate i{
  display:block; font-family:var(--lat); font-style:normal; font-size:var(--t-md);
  font-weight:500; letter-spacing:.055em; color:var(--tx-2); margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.plate--hero{ max-width:340px; }

/* ───────────────────────── 히어로 ───────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:130px 0 100px; overflow:hidden;
}
.hero__glow{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(58% 62% at 76% 44%, rgba(30,153,215,.22), transparent 68%),
    radial-gradient(48% 50% at 10% 82%, rgba(201,168,106,.10), transparent 66%),
    radial-gradient(90% 80% at 50% 0%, rgba(255,223,85,.04), transparent 60%);
}
.hero__in{
  position:relative; z-index:3;
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(30px,5vw,84px); align-items:center;
}
.hero__eyebrow{
  display:block; font-size:var(--t-2xs); font-weight:400; line-height:1.6;
  letter-spacing:.42em; color:var(--gold); margin-bottom:30px;
}
.hero__eyebrow span{ display:inline-block; }
.hero__eyebrow::before{
  content:""; display:inline-block; width:38px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
  vertical-align:middle; margin-right:16px;
}
.hero__title{
  font-size:clamp(2.7rem, 7vw, 5.6rem);
  font-weight:800; line-height:1.04; letter-spacing:-.042em; margin-bottom:30px;
  text-wrap:balance;
}
.hero__title span{ display:block; }
.hero__title em{ font-style:normal; }
.hero__title .l2{ color:var(--blue); font-size:.8em; }
.hero__title .l3{
  background:linear-gradient(96deg, var(--blue) 8%, #7cc3ee 52%, var(--blue) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__rule{ margin-bottom:26px; }
.hero__rule i{
  display:block; width:88px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.hero__dates{
  font-size:clamp(1.4rem,2.7vw,2.1rem); font-weight:700; letter-spacing:-.025em;
  color:var(--yellow); margin-bottom:14px; font-variant-numeric:tabular-nums;
}
.hero__dates .w{
  font-family:var(--lat); font-weight:400; color:var(--tx-2);
  font-size:.62em; letter-spacing:.16em; margin-left:.4em;
}
.hero__dates .tilde{ color:var(--gold); margin:0 .42em; font-weight:300; }
.hero__meta{ font-size:var(--t-sm); color:var(--mut); letter-spacing:.02em; }
.hero__badge{
  display:inline-block; padding:9px 20px;
  border:1px solid var(--line-2); border-radius:100px;
  font-size:var(--t-xs); letter-spacing:.14em; color:var(--tx-2);
  font-variant-numeric:tabular-nums;
  background:rgba(201,168,106,.05);
}
.hero__badge b{ color:var(--yellow); font-weight:700; letter-spacing:.06em; }
.hero__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.hero__badge--free{
  border-color:rgba(255,223,85,.32);
  background:rgba(255,223,85,.07);
}

/* 전시 기간에 들어서면 점이 뛴다. 날짜만 적힌 안내와 '지금 열려 있다' 는
   다른 정보다. 색은 팔레트 안의 노랑을 그대로 쓴다. */
.hero__badge .live{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--yellow); margin-right:10px; vertical-align:1px;
  animation:livePulse 2.4s var(--ease) infinite;
}
@keyframes livePulse{
  0%{   box-shadow:0 0 0 0 rgba(255,223,85,.5); }
  70%{  box-shadow:0 0 0 9px rgba(255,223,85,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,223,85,0); }
}

.hero__art{ position:relative; }
.hero__art .frame{ animation:floaty 11s ease-in-out infinite; }
.hero__art .plate{ margin-top:22px; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

.hero__scroll{
  position:absolute; left:50%; bottom:32px; transform:translateX(-50%);
  z-index:3; width:22px; height:38px; border:1px solid var(--line-2); border-radius:12px;
}
.hero__scroll span{
  position:absolute; left:50%; top:8px; width:3px; height:6px; margin-left:-1.5px;
  background:var(--gold); border-radius:2px; animation:wheel 2s var(--ease) infinite;
}
@keyframes wheel{ 0%{opacity:0;transform:translateY(0);} 30%{opacity:1;} 100%{opacity:0;transform:translateY(15px);} }

/* 그림 속 흰 꽃이 화면에 흩날리듯 */
.petals{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.petals i{
  position:absolute; display:block; width:var(--s); height:var(--s);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='12' cy='5' rx='3.1' ry='4.4'/%3E%3Cellipse cx='12' cy='19' rx='3.1' ry='4.4'/%3E%3Cellipse cx='5' cy='12' rx='4.4' ry='3.1'/%3E%3Cellipse cx='19' cy='12' rx='4.4' ry='3.1'/%3E%3Cellipse cx='7.2' cy='7.2' rx='3.6' ry='2.7' transform='rotate(-45 7.2 7.2)'/%3E%3Cellipse cx='16.8' cy='16.8' rx='3.6' ry='2.7' transform='rotate(-45 16.8 16.8)'/%3E%3Cellipse cx='16.8' cy='7.2' rx='3.6' ry='2.7' transform='rotate(45 16.8 7.2)'/%3E%3Cellipse cx='7.2' cy='16.8' rx='3.6' ry='2.7' transform='rotate(45 7.2 16.8)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='3' fill='%23ffdf55'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0; animation:drift var(--dur) linear var(--delay) infinite;
}
@keyframes drift{
  0%{ opacity:0; transform:translate3d(0,-8vh,0) rotate(0); }
  12%{ opacity:var(--op); } 88%{ opacity:var(--op); }
  100%{ opacity:0; transform:translate3d(var(--dx),108vh,0) rotate(320deg); }
}

/* ───────────────────────── 섹션 공통 ───────────────────────── */
.sec{ position:relative; z-index:3; padding:clamp(88px,12vw,168px) 0; }
.sec--about{ background:var(--bg-2); }
.sec--info{ background:var(--bg-2); border-block:1px solid var(--line); }
.sec--cv{ background:var(--bg-2); border-top:1px solid var(--line); }

.sec__head{ margin-bottom:clamp(46px,6vw,84px); }
.sec__no{
  display:block; font-family:var(--lat); font-size:var(--t-3xs);
  letter-spacing:.4em; color:var(--gold); margin-bottom:18px;
}
.sec__no::after{
  content:""; display:inline-block; width:44px; height:1px; margin-left:16px;
  background:linear-gradient(90deg, var(--gold), transparent); vertical-align:middle;
}
.sec__title{
  font-size:clamp(1.85rem,3.8vw,2.9rem); font-weight:800;
  letter-spacing:-.038em; line-height:1.18; text-wrap:balance;
}
.sec__lat{
  font-family:var(--lat); font-style:italic; font-size:var(--t-lg);
  color:var(--mut); margin-top:10px; letter-spacing:.03em;
}
.sec__note{ font-size:var(--t-sm); color:var(--mut); margin-top:20px; max-width:var(--measure); text-wrap:pretty; }

/* 데이지 구분선 */
.orn{
  position:relative; z-index:3; display:flex; align-items:center; justify-content:center;
  gap:22px; padding:0 var(--pad); color:var(--gold);
  background:var(--bg-2);
}
.orn i{ display:block; height:1px; width:min(190px,22vw); background:linear-gradient(90deg,transparent,var(--line-2)); }
.orn i:last-child{ background:linear-gradient(90deg,var(--line-2),transparent); }
.orn svg{ width:15px; height:15px; opacity:.65; flex:none; }

/* ───────────────────────── 소개 ───────────────────────── */
.about{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(32px,5vw,84px); align-items:start; }
.about__body p{ color:var(--tx-2); margin-bottom:22px; max-width:var(--measure); text-wrap:pretty; }
.about__body .lead{
  font-size:clamp(1.25rem,2.3vw,1.7rem); line-height:1.6; color:var(--tx);
  font-weight:700; letter-spacing:-.035em; margin-bottom:30px; text-wrap:balance;
}
.about__body strong{ color:var(--gold-lt); font-weight:600; }

.quote{
  position:relative; margin:40px 0 0; padding:34px 34px 30px;
  background:linear-gradient(150deg, rgba(201,168,106,.09), rgba(201,168,106,.02));
  border:1px solid var(--line);
}
.quote::before, .quote::after{
  content:""; position:absolute; width:16px; height:16px; border:1px solid var(--gold); opacity:.55;
}
.quote::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.quote::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.quote__mark{
  position:absolute; top:6px; left:20px; font-family:var(--lat);
  font-size:4.4rem; line-height:1; color:var(--gold); opacity:.22;
}
.quote p{
  position:relative; font-size:clamp(1.12rem,1.8vw,1.32rem); line-height:1.72;
  color:var(--tx); margin-bottom:16px; letter-spacing:-.028em; font-weight:500;
  text-wrap:pretty;
}
.quote cite{
  font-style:normal; font-size:var(--t-xs); color:var(--gold); letter-spacing:.16em;
}
.quote cite::before{ content:"— "; }

.facts{ display:flex; flex-wrap:wrap; margin-top:40px; border-top:1px solid var(--line); }
.facts > div{ flex:1 1 150px; padding:20px 22px 20px 0; border-bottom:1px solid var(--line); }
.facts dt{ font-size:var(--t-2xs); letter-spacing:.22em; color:var(--gold); margin-bottom:8px; }
.facts dd{ font-size:var(--t-md); color:var(--tx); font-variant-numeric:tabular-nums; }

/* ───────────────────────── 대표작 ───────────────────────── */
.sec--feat{ padding-bottom:clamp(70px,9vw,120px); }
.feat{ display:grid; gap:clamp(72px,10vw,150px); }
.feat__row{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,5vw,76px); align-items:center;
}
.feat__row--rev .feat__art{ order:2; }
.feat__no{
  display:block; font-family:var(--lat); font-size:var(--t-3xs); letter-spacing:.36em;
  color:var(--gold); margin-bottom:20px;
}
.feat__no::before{
  content:""; display:inline-block; width:30px; height:1px; margin-right:14px;
  background:var(--ac); vertical-align:middle;
}
.feat__txt h3{
  font-size:clamp(1.6rem,3.2vw,2.5rem); font-weight:800;
  letter-spacing:-.04em; line-height:1.2; margin-bottom:14px; text-wrap:balance;
}
.feat__txt h3 em{ font-family:var(--lat); font-style:italic; font-weight:400; color:var(--ac); }
.feat__spec{
  font-family:var(--lat); font-size:var(--t-lg); font-weight:500; letter-spacing:.09em;
  color:var(--tx-2); margin-bottom:24px; font-variant-numeric:tabular-nums;
}
.feat__desc{ font-size:var(--t-md); color:var(--tx-2); line-height:1.85; max-width:var(--measure); text-wrap:pretty; }

/* ───────────────────────── 출품작 그리드 ───────────────────────── */
.grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(34px,4vw,54px) clamp(20px,2.4vw,34px); align-items:start;
}
.card{ display:block; width:100%; padding:0; margin:0; text-align:left; }
.card .frame{ overflow:hidden; }
.card img{ transition:transform .9s var(--ease-o), filter .6s; filter:saturate(.94) brightness(.94); }
.card:hover .frame, .card:focus-visible .frame{
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ac) 45%, transparent),
    0 34px 66px -30px rgba(0,0,0,.95),
    0 0 62px -14px color-mix(in srgb, var(--ac) 52%, transparent);
}
.card:hover .frame::after, .card:focus-visible .frame::after{
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ac) 80%, transparent),
    inset 0 4px 9px -5px rgba(0,0,0,.6);
}
.card:hover img, .card:focus-visible img{ transform:scale(1.055); filter:saturate(1.06) brightness(1.02); }
.card:hover .plate::before, .card:focus-visible .plate::before{ width:100%; }
.card:hover .plate b, .card:focus-visible .plate b{ color:#fff; }

/* ───────────────────────── 전시 안내 ───────────────────────── */
.info{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(30px,4.5vw,72px); align-items:start; }

.ticket{
  position:relative; border:1px solid var(--line-2);
  background:
    linear-gradient(158deg, rgba(201,168,106,.13), rgba(88,168,222,.05) 55%, transparent 85%),
    var(--bg-3);
  box-shadow:0 34px 70px -38px rgba(0,0,0,.95);
}
.ticket__top{ padding:clamp(32px,4vw,48px) clamp(26px,3.4vw,42px) clamp(28px,3.4vw,40px); }
.ticket__eyebrow{ font-size:var(--t-3xs); letter-spacing:.4em; color:var(--gold); margin-bottom:22px; }
.ticket__ttl{
  font-size:clamp(1.5rem,2.9vw,2.05rem); font-weight:800;
  line-height:1.24; letter-spacing:-.04em; color:#fff; text-wrap:balance;
}
.ticket__ttl em{ font-style:normal; color:var(--blue); }
.ticket__perf{
  position:relative; height:1px;
  background:repeating-linear-gradient(90deg, var(--line-2) 0 7px, transparent 7px 15px);
}
.ticket__perf::before, .ticket__perf::after{
  content:""; position:absolute; top:-9px; width:18px; height:18px; border-radius:50%;
  background:var(--bg-2); border:1px solid var(--line-2);
}
.ticket__perf::before{ left:-10px; }
.ticket__perf::after{ right:-10px; }
.ticket__bot{
  padding:clamp(26px,3.4vw,38px) clamp(26px,3.4vw,42px);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.ticket__date{ text-align:center; }
.ticket__date b{
  display:block; font-family:var(--lat); font-size:clamp(1.55rem,3vw,2.15rem);
  font-weight:500; letter-spacing:.06em; color:#fff; line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.ticket__date span{
  display:block; font-family:var(--lat); font-size:var(--t-2xs);
  letter-spacing:.34em; color:var(--gold); margin-top:4px;
}
.ticket__free{
  width:100%; margin-top:20px; padding-top:17px;
  border-top:1px dashed var(--line-2); text-align:center;
}
.ticket__free em{
  display:block; font-family:var(--lat); font-style:normal; font-size:var(--t-3xs);
  font-weight:600; letter-spacing:.42em; color:var(--gold); margin-bottom:8px;
}
.ticket__free b{
  font-size:var(--t-xl); font-weight:800; letter-spacing:-.02em; color:var(--yellow);
}
.ticket__to{ font-family:var(--lat); font-size:var(--t-lg); color:var(--gold); opacity:.7; margin:4px 0; }

.info__list > div{
  display:grid; grid-template-columns:104px 1fr; gap:18px;
  padding:19px 0; border-bottom:1px solid var(--line);
}
.info__list > div:first-child{ border-top:1px solid var(--line); }
.info__list dt{ font-size:var(--t-2xs); letter-spacing:.18em; color:var(--gold); padding-top:4px; }
.info__list dd{ font-size:var(--t-md); color:var(--tx); font-variant-numeric:tabular-nums; }
.info__list dd .free{ color:var(--yellow); font-weight:700; letter-spacing:-.01em; }
.info__list dd .mut{ font-size:var(--t-xs); margin-left:6px; }

/* ───────────────────────── 굿즈 ───────────────────────── */
.goods{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.2vw,30px); }
.good{
  background:var(--bg-2); border:1px solid var(--line); padding:14px 14px 20px;
  transition:border-color .35s, background .35s, transform .5s var(--ease-o);
}
.good:hover{ border-color:var(--line-2); background:var(--bg-3); transform:translateY(-4px); }

/* 사진이 오기 전까지의 자리. 실물이 없는데 있는 척하지 않으려고
   일부러 점선 테두리에 '사진 준비 중' 을 그대로 보여준다. */
.good__ph{
  position:relative; display:grid; place-content:center; gap:11px;
  aspect-ratio:1; margin-bottom:17px; padding:10px;
  background:linear-gradient(135deg,rgba(226,208,180,.05),transparent 62%),var(--bg-3);
  border:1px dashed var(--line-2); color:var(--gold); text-align:center;
}
.good__ph svg{ width:32px; height:32px; margin:0 auto; opacity:.5; }
.good__ph em{ font-style:normal; font-size:var(--t-2xs); letter-spacing:.16em; color:var(--mut); }
/* <img> 를 넣는 순간 점선이 사라지고 사진 모드로 바뀐다 */
.good__ph:has(img){ display:block; padding:0; border-style:solid; border-color:var(--line); }
.good__ph img{ width:100%; height:100%; object-fit:cover; }

.good__txt{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.good__txt b{ font-size:var(--t-md); font-weight:700; letter-spacing:-.025em; }
.good__txt i{
  font-style:normal; font-family:var(--lat); font-size:var(--t-lg);
  font-variant-numeric:tabular-nums;
  color:var(--gold); letter-spacing:.03em; white-space:nowrap;
}
.good.is-out{ opacity:.5; }
.good.is-out:hover{ transform:none; }
.good.is-out .good__ph::after{
  content:"품절"; position:absolute; inset:auto 0 0 0; padding:7px 0;
  background:rgba(18,16,14,.86); color:var(--tx-2);
  font-size:var(--t-2xs); letter-spacing:.24em;
}

.buy{
  margin-top:clamp(38px,5vw,64px); padding:clamp(24px,3.4vw,40px);
  background:var(--bg-2); border:1px solid var(--line); border-left:2px solid var(--gold);
}
.buy__lead{ font-size:var(--t-md); color:var(--tx-2); margin-bottom:24px; text-wrap:pretty; }
.buy__lead b{ color:var(--yellow); font-weight:700; }
.buy__list{ display:flex; flex-wrap:wrap; gap:0 clamp(28px,4vw,64px); }
.buy__list > div{ flex:1 1 190px; padding:16px 0 4px; border-top:1px solid var(--line); }
.buy__list dt{ font-size:var(--t-2xs); letter-spacing:.22em; color:var(--gold); margin-bottom:8px; }
.buy__list dd{ font-size:var(--t-md); color:var(--tx); font-variant-numeric:tabular-nums; }
.buy__tel{ border-bottom:1px solid rgba(201,168,106,.45); padding-bottom:2px; transition:color .3s, border-color .3s; }
.buy__tel:hover{ color:var(--yellow); border-bottom-color:rgba(255,223,85,.6); }

/* 자주 묻는 질문 — 전시 안내 안에 딸린 블록.
   인사말의 아코디언을 그대로 쓰므로 여기서는 자리만 잡는다. */
.faq{ margin-top:clamp(46px,6vw,78px); display:grid; gap:12px; }
.faq__ttl{
  font-size:var(--t-lg); font-weight:800; letter-spacing:-.03em;
  margin-bottom:6px; text-wrap:balance;
}

/* ───────────────────────── 축하 방명록 ───────────────────────── */
.sec--guest{ background:var(--bg-2); border-block:1px solid var(--line); }

.gb__form{
  background:var(--bg-3); border:1px solid var(--line); border-radius:2px;
  padding:clamp(22px,3vw,32px); max-width:940px;
}
.gb__grid{ display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:18px; }
.gb__row{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.gb__lb{ font-size:var(--t-2xs); letter-spacing:.18em; color:var(--gold); }
.gb__form input, .gb__form textarea{
  width:100%; padding:12px 14px; background:var(--bg); color:var(--tx);
  border:1px solid var(--line-2); border-radius:2px;
  font-family:inherit; font-size:var(--t-md); line-height:1.7; resize:vertical;
}
.gb__form input::placeholder, .gb__form textarea::placeholder{ color:var(--mut); opacity:.7; }
.gb__form input:focus, .gb__form textarea:focus{ outline:none; border-color:var(--gold); }

/* 사람에게는 보이지 않지만 화면낭독기에는 '비워 두라'고 알려 줍니다. */
.gb__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.gb__foot{ display:flex; align-items:center; gap:16px; margin-top:20px; flex-wrap:wrap; }
.gb__btn{
  padding:13px 34px; background:var(--gold); color:#1a1409; border:0; border-radius:2px;
  font-family:inherit; font-size:var(--t-md); font-weight:700; letter-spacing:-.01em;
  cursor:pointer; transition:background .25s;
}
.gb__btn:hover{ background:var(--gold-lt); }
.gb__btn:disabled{ opacity:.5; cursor:default; }
.gb__msg{ flex:1; font-size:var(--t-xs); color:var(--mut); min-width:140px; }
.gb__msg.ok{ color:var(--yellow); }
.gb__msg.no{ color:#e9a49e; }

.gb__list{ display:grid; gap:12px; margin-top:clamp(30px,4vw,48px); max-width:940px; }
.gb__list li{
  border:1px solid var(--line); background:var(--bg-2); padding:20px 24px;
  transition:border-color .35s;
}
.gb__list li:hover{ border-color:var(--line-2); }
.gb__who{ display:flex; align-items:baseline; gap:12px; margin-bottom:9px; flex-wrap:wrap; }
.gb__who b{ font-size:var(--t-md); font-weight:700; color:var(--tx); letter-spacing:-.02em; }
.gb__who time{ font-family:var(--lat); font-size:var(--t-2xs); letter-spacing:.1em;
  color:var(--mut); font-variant-numeric:tabular-nums; }
.gb__txt{ color:var(--tx-2); white-space:pre-wrap; max-width:var(--measure); text-wrap:pretty; }
.gb__none{ color:var(--mut); font-size:var(--t-sm); }

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

/* ───────────────────────── 인사말 ───────────────────────── */
.greet{ display:grid; gap:14px; max-width:940px; }
.msg{
  border:1px solid var(--line); background:var(--bg-2);
  transition:border-color .35s, background .35s;
}
.msg[open]{ border-color:var(--line-2); background:var(--bg-3); }
.msg summary{
  list-style:none; cursor:pointer; padding:24px 60px 24px 26px; position:relative;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
}
.msg summary::-webkit-details-marker{ display:none; }
.msg summary::after{
  content:""; position:absolute; right:26px; top:50%; width:9px; height:9px; margin-top:-6px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg); transition:transform .35s var(--ease), opacity .3s; opacity:.6;
}
.msg[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; opacity:1; }
.msg summary:hover .msg__kind{ color:var(--gold-lt); }
.msg__kind{ font-size:var(--t-lg); font-weight:700; letter-spacing:-.025em; transition:color .25s; }
.msg__who{ font-size:var(--t-xs); color:var(--mut); letter-spacing:.02em; }
.msg__who b{ color:var(--tx-2); font-weight:600; }
.msg__body{ padding:0 26px 30px; border-top:1px solid var(--line); }
.msg__body p{ color:var(--tx-2); font-size:var(--t-md); margin-top:20px; max-width:var(--measure); text-wrap:pretty; }
.msg__body p:first-child{ margin-top:22px; }

/* ───────────────────────── 약력 ───────────────────────── */
.cv{ max-width:900px; }
.cv li{
  display:grid; grid-template-columns:130px 1fr; gap:24px; align-items:baseline;
  padding:21px 0; border-bottom:1px solid var(--line); transition:padding-left .4s var(--ease-o);
}
.cv li:first-child{ border-top:1px solid var(--line); }
.cv li:hover{ padding-left:10px; }
.cv li:hover .cv__d{ color:var(--tx); }
.cv__y{ font-family:var(--lat); font-size:var(--t-xl); color:var(--gold); letter-spacing:.055em;
  font-variant-numeric:tabular-nums; }
.cv__y small{ font-size:.66em; color:var(--mut); letter-spacing:.02em; }
.cv__d{ font-size:var(--t-md); color:var(--tx-2); transition:color .3s; max-width:var(--measure); text-wrap:pretty; }
.cv__d small{ display:block; margin-top:6px; font-size:var(--t-xs); color:var(--mut); }

/* 관리자에서 넣는 코드 조각 자리. 내용이 없으면 자리도 차지하지 않는다. */
.snippet:empty{ display:none; }
.snippet{
  position:relative; z-index:3; background:var(--bg-2);
  border-top:1px solid var(--line);
  padding:clamp(28px,4vw,48px) var(--pad);
  color:var(--tx-2);
}
.snippet > *{ max-width:var(--wrap); margin-inline:auto; }

/* ───────────────────────── 푸터 ───────────────────────── */
.foot{
  position:relative; z-index:3; overflow:hidden;
  padding:clamp(72px,9vw,120px) 0 48px; border-top:1px solid var(--line); text-align:center;
}
.foot__glow{
  position:absolute; inset:auto 0 -40% 0; height:80%;
  background:radial-gradient(50% 100% at 50% 100%, rgba(88,168,222,.13), transparent 70%);
}
.foot .wrap{ position:relative; }
.foot__mark{ width:26px; height:26px; margin:0 auto 30px; color:var(--gold); opacity:.85; }
.foot__mark svg{ width:100%; height:100%; }
.foot__title{ font-size:clamp(1.5rem,3.4vw,2.4rem); font-weight:800; letter-spacing:-.04em; line-height:1.2; text-wrap:balance; }
.foot__title span{ display:block; }
.foot__title .l1{ color:#fff; }
.foot__title .l1 em{ font-style:normal; }
.foot__title .l2{ color:var(--blue); font-size:.56em; margin-top:8px; letter-spacing:-.03em; }

.foot__contact{ margin:clamp(40px,5vw,60px) 0; }
.foot__label{ font-size:var(--t-3xs); letter-spacing:.34em; color:var(--gold); margin-bottom:12px; }
.foot__tel{
  display:inline-block; font-family:var(--lat); font-size:clamp(1.6rem,3.4vw,2.3rem);
  color:var(--yellow); letter-spacing:.08em; padding-bottom:4px; font-variant-numeric:tabular-nums;
  border-bottom:1px solid transparent; transition:border-color .35s;
}
.foot__tel:hover{ border-bottom-color:rgba(255,223,85,.55); }

.foot__bot{
  padding-top:30px; border-top:1px solid var(--line);
  font-size:var(--t-xs); color:var(--mut); display:grid; gap:8px;
}

/* 관리자 들어가는 문. 관람객이 누를 것이 아니므로 끝까지 물러서 있는다. */
.foot__admin{ margin-top:14px; }
.foot__admin a{
  font-size:var(--t-3xs); letter-spacing:.2em; color:var(--mut);
  opacity:.45; padding:4px 2px; transition:opacity .3s, color .3s;
}
.foot__admin a:hover{ opacity:1; color:var(--gold); }

/* ───────────────────────── 라이트박스 ───────────────────────── */
.lb{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  padding:clamp(58px,8vh,88px) clamp(58px,7vw,120px) clamp(22px,4vh,40px);
  background:rgba(10,8,7,.97); backdrop-filter:blur(8px);
  animation:lbIn .35s var(--ease-o);
}
@keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } }

/* 그림이 남는 높이를 전부 가져가고 라벨은 제 높이만 쓴다.
   이미지에 고정 max-height 를 주면 화면이 낮을 때 위가 잘린다. */
.lb__fig{
  width:100%; height:100%; min-height:0;
  display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.6vh,26px);
}
.lb__frame{
  flex:1 1 auto; min-height:0; max-width:100%;
  padding:clamp(8px,1.1vw,14px);
  background:linear-gradient(150deg, var(--bg-4), var(--bg-3));
  box-shadow:
    0 0 0 1px var(--line-2),
    inset 0 1px 0 rgba(240,228,206,.07),
    inset 0 -1px 0 rgba(0,0,0,.42),
    0 40px 90px -34px rgba(0,0,0,1);
  display:flex; align-items:center; justify-content:center;
}
.lb__frame img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.lb__plate{
  flex:none; text-align:center; display:flex; flex-direction:column; align-items:center; gap:7px;
}
.lb__plate em{ font-family:var(--lat); font-style:normal; font-size:var(--t-2xs); font-weight:600;
  letter-spacing:.32em; color:var(--gold); font-variant-numeric:tabular-nums; }
.lb__plate b{ font-size:var(--t-xl); font-weight:700; letter-spacing:-.025em; line-height:1.35;
  text-wrap:balance; }
.lb__plate i{ font-family:var(--lat); font-style:normal; font-size:var(--t-lg); font-weight:500;
  color:var(--tx-2); letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.lb__count{ font-family:var(--lat); font-size:var(--t-xs); color:var(--mut); letter-spacing:.2em;
  margin-top:6px; font-variant-numeric:tabular-nums; }
.lb__close{
  position:absolute; top:22px; right:24px; width:46px; height:46px; font-size:18px;
  color:var(--tx-2); border:1px solid var(--line); border-radius:50%;
  transition:background .3s, color .3s, border-color .3s;
}
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; font-size:30px; line-height:1; color:var(--tx-2);
  border:1px solid var(--line); border-radius:50%;
  transition:background .3s, color .3s, border-color .3s;
}
.lb__close:hover, .lb__nav:hover{ background:rgba(201,168,106,.14); color:#fff; border-color:var(--gold); }
.lb__nav--prev{ left:clamp(10px,2.6vw,34px); }
.lb__nav--next{ right:clamp(10px,2.6vw,34px); }
body.lb-open{ overflow:hidden; }

/* ───────────────────────── 등장 ───────────────────────── */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .95s var(--ease-o), transform .95s var(--ease-o); }
.reveal.is-in{ opacity:1; transform:none; }
.st{ opacity:0; transform:translateY(24px); animation:stIn .95s var(--ease-o) var(--d,0s) forwards; }
@keyframes stIn{ to{ opacity:1; transform:none; } }

/* ───────────────────────── 반응형 ───────────────────────── */
@media (max-width:1080px){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nav__links{ gap:24px; }
  .goods{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero__in{ grid-template-columns:1fr; gap:48px; }
  .hero{ min-height:auto; padding:140px 0 96px; }
  .hero__art{ max-width:480px; }
  .hero__scroll{ display:none; }
  .about{ grid-template-columns:1fr; }
  .about__photo{ max-width:420px; }
  .info{ grid-template-columns:1fr; }
  .ticket{ max-width:480px; }
  .feat__row{ grid-template-columns:1fr; gap:32px; }
  .feat__row--rev .feat__art{ order:0; }
  .feat__art{ max-width:560px; }
}
@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
  .nav__drawer{ display:flex; }
  .nav__drawer[hidden]{ display:none; }
  .nav.is-open{ background:rgba(18,16,14,.97); backdrop-filter:blur(16px); }
}
@media (max-width:640px){
  body{ font-size:15.5px; }
  .goods{ gap:14px; }
  .good{ padding:10px 10px 16px; }
  .good__txt{ display:block; }
  .good__txt i{ display:block; margin-top:4px; }
  .grid{ grid-template-columns:1fr; gap:40px; }
  .frame{ padding:8px; }
  .frame::after{ inset:8px; }
  .info__list > div{ grid-template-columns:82px 1fr; gap:14px; }
  .cv li{ grid-template-columns:1fr; gap:5px; padding:18px 0; }
  .cv li:hover{ padding-left:0; }
  .cv__y{ font-size:1.16rem; }
  .msg summary{ padding:20px 48px 20px 20px; }
  .msg__body{ padding:0 20px 24px; }
  .quote{ padding:28px 22px 24px; }
  /* 좁은 화면에서 좌우 화살표가 그림 폭을 잡아먹지 않도록 아래로 내린다 */
  .lb{ padding:58px 14px 76px; }
  .lb__nav{ width:46px; height:46px; font-size:26px; top:auto; bottom:14px; transform:none; }
  .lb__nav--prev{ left:20px; } .lb__nav--next{ right:20px; }
  .lb__plate b{ font-size:1.24rem; }
  .fs{ display:none; }
  .orn i{ width:22vw; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal,.st{ opacity:1; transform:none; }
  .petals{ display:none; }
}

@media print{
  .nav,.petals,.hero__scroll,.lb,.grain,.progress,.hero__glow,.foot__glow{ display:none !important; }
  body{ background:#fff; color:#000; }
}