html { font-size:17px; }
:root {
--font:"Nanum Myeongjo","Gowun Batang","Apple SD Gothic Neo",serif; /* ← 문단·본문 글자(명조) */
--font-work:"Nanum Myeongjo","Gowun Batang",serif; /* ← 작품(전시품) 글자(명조) */
--font-head:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif; /* ← 제목·메뉴 글꼴(고딕) */
--black:#0e0e0d; --dark:#1c1c1a; --beige:#f3f1ec; --gray:#e3e1db; --ink:#222;
--line-d:rgba(255,255,255,.25); --line-l:rgba(0,0,0,.25);
}
* { box-sizing:border-box; }
body { margin:0; line-height:1.65;
font-family:var(--font); }
body.dark { background:var(--black); color:#fff; }
body.light { background:var(--beige); color:var(--ink); }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4,p { margin:0; }
.wrap { max-width:1200px; margin:0 auto; padding:0 28px; }
.sec { padding:56px 0 8px; }
.sec-title { font-size:2.3rem; line-height:1.2; margin-bottom:28px; }
.dark .sec-title { font-weight:700; }
.light .sec-title { font-weight:400; }
hr.line { border:0; border-top:1px solid var(--line-d); margin:48px 0 0; }
.light hr.line { border-color:var(--line-l); }
/* 헤더 (항상 검정) */
#site-header { background:#000; color:#fff; }
.bar { display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
padding-top:22px; padding-bottom:18px; flex-wrap:wrap; }
.brand { font-family:var(--font); font-size:1.7rem; line-height:1.05; }
.brand small { display:block; font-size:.78rem; letter-spacing:.08em; opacity:.7; font-family:var(--font); margin-top:4px; }
.bar-right { display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.utils a { margin-left:22px; font-size:.9rem; font-weight:600; }
nav { display:flex; flex-wrap:wrap; gap:6px 26px; }
nav a { font-weight:700; font-size:.95rem; padding-bottom:3px; border-bottom:2px solid transparent; }
nav a.on { border-color:#fff; }
.chev { display:inline-grid; place-items:center; width:18px; height:18px; margin-left:6px;
border-radius:50%; background:#fff; color:#000; font-size:.7rem; font-style:normal; line-height:1; }
/* 카드 */
.grid3 { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px; }
.card { display:block; }
.card .pic { aspect-ratio:3/2; overflow:hidden; }
.card .pic img, .swatch { width:100%; height:100%; object-fit:cover; display:block; position:relative; }
.swatch::after { content:""; position:absolute; inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(0,0,0,.28)); }
.card .body { padding:24px 24px 28px; min-height:250px; display:flex; flex-direction:column; }
.dark .card .body { background:var(--dark); }
.light .card .body { background:var(--gray); }
.kicker { font-size:.82rem; font-weight:700; margin-bottom:6px; }
.card h3 { font-size:1.3rem; line-height:1.35; margin-bottom:10px; }
.light .card h3 { font-weight:400; }
.card .body > p:not(.kicker) { opacity:.85; font-size:.95rem; }
.bar-btn { margin-top:auto; padding-top:0; display:flex; justify-content:space-between; align-items:center;
background:#000; color:#fff; padding:13px 16px; font-weight:700; font-size:.95rem; cursor:pointer; }
.card .body > p + .bar-btn { margin-top:22px; }
.light .bar-btn { background:#3a3a38; }
.circ { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
background:#fff; color:#000; font-style:normal; font-size:.95rem; line-height:1; }
.card:hover .bar-btn, .bar-btn:hover { background:#fff; color:#000; }
.card:hover .circ, .bar-btn:hover .circ { background:#000; color:#fff; }
/* 컬러 전시 블록 */
.feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); background:var(--c); color:var(--ink); min-height:400px; }
.f-text { padding:36px; display:flex; flex-direction:column; justify-content:space-between; position:relative; }
.f-text h2 { font-size:2rem; line-height:1.25; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; font-weight:500; }
.f-meta { display:flex; justify-content:space-between; align-items:flex-end; font-size:.88rem; font-weight:600; }
.badge { display:grid; place-items:center; width:88px; height:88px; border-radius:50%;
background:var(--b,var(--ink)); color:var(--bt,var(--c)); font-size:.85rem; font-weight:700; text-align:center; flex:none; }
.f-pic { padding:14px; }
.f-pic .swatch, .f-pic img { height:100%; min-height:300px; }
.feature.small { min-height:360px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.feature.small h2 { font-size:1.55rem; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.feature:hover .badge { transform:scale(1.06); transition:.15s; }
/* 필터 박스 / 탭 */
.filters { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin:8px 0 8px; }
.sel { position:relative; border:2px solid #fff; }
.light .sel { border-color:var(--ink); }
.sel select, .sel input { width:100%; appearance:none; -webkit-appearance:none; background:transparent; border:0; color:inherit;
font:700 1rem inherit; font-family:inherit; padding:16px 52px 16px 16px; outline:0; }
.sel select option { color:#000; }
.sel::after { content:"⌄"; position:absolute; right:14px; top:50%; transform:translateY(-55%);
width:24px; height:24px; border-radius:50%; background:#fff; color:#000; display:grid; place-items:center; font-size:.8rem; pointer-events:none; }
.light .sel::after { background:var(--ink); color:#fff; }
.sel.plain::after { content:"⌕"; }
.count { margin:14px 0 28px; opacity:.7; }
.tabs { display:flex; gap:30px; flex-wrap:wrap; border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d); margin:28px 0 40px; padding:0; }
.tabs button { background:none; border:0; color:inherit; font:700 1rem inherit; font-family:inherit; padding:18px 0; cursor:pointer; opacity:.8; border-bottom:3px solid transparent; }
.tabs button.on { opacity:1; border-color:#fff; }
/* 소제목 영역 */
.page-title { font-size:clamp(2.2rem,5vw,3.4rem); font-weight:700; padding:64px 0 8px; }
.page-sub { max-width:640px; opacity:.85; margin-bottom:8px; }
/* 블로그 대표글 */
.lead { display:grid; grid-template-columns:1.6fr 1fr; gap:28px; align-items:start; margin-bottom:48px; }
.lead .pic { aspect-ratio:16/9; }
.lead h2 { font-size:2rem; line-height:1.3; margin:8px 0 14px; }
.lead .bar-btn { margin-top:28px; }
/* 이미지 히어로 (갤러리 페이지) */
.hero-img { position:relative; height:360px; overflow:hidden; }
.hero-img .swatch { height:100%; }
.hero-img h1 { position:absolute; left:max(28px, calc((100% - 1200px)/2 + 28px)); bottom:26px; color:#fff;
font-size:3.2rem; font-weight:700; text-shadow:0 2px 14px rgba(0,0,0,.5); z-index:2; }
/* 빵부스러기 + 공유 */
.crumbs { display:flex; justify-content:space-between; align-items:center; padding-top:26px; padding-bottom:26px;
border-bottom:1px solid var(--line-l); font-size:.95rem; }
.crumbs a { text-decoration:underline; }
.share button { width:40px; height:40px; border-radius:50%; border:0; background:#111; color:#fff; font-size:1.1rem; cursor:pointer; margin-left:10px; }
/* 이 페이지에서 */
.toc { background:#d9d7d0; padding:26px 30px; margin:40px 0; }
.toc h3 { font-weight:400; font-size:1.15rem; margin-bottom:6px; }
.toc a { text-decoration:underline; margin-right:30px; }
/* 본문 2단 (본문 + 옆 상자) */
.two { display:grid; grid-template-columns:2fr 1fr; gap:72px; padding-bottom:40px; }
.two h2 { font-size:1.7rem; font-weight:500; line-height:1.4; margin-bottom:16px; }
.two p { margin-bottom:14px; }
.aside h3 { font-size:1.45rem; font-weight:400; padding-bottom:14px; border-bottom:1px solid var(--line-l); margin-bottom:18px; }
.aside .bar-btn { margin-top:16px; }
/* 층별 목록 */
.zone-title { font-size:2.3rem; font-weight:400; padding:48px 0 18px; }
.row { display:grid; grid-template-columns:230px 1fr auto; gap:28px; align-items:start;
padding:30px 0; border-top:1px solid var(--line-l); }
.row .thumb { aspect-ratio:4/3; background:#111; overflow:hidden; }
.row h3 { font-size:1.4rem; font-weight:400; }
.row p { opacity:.8; margin-top:6px; }
.btn-dark { background:#3d3d3b; color:#fff; padding:12px 20px; font-weight:700; font-size:.92rem; white-space:nowrap; }
.btn-dark:hover { background:#000; }
/* 상세 */
.detail { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; padding:48px 0 0; }
.detail-pic { aspect-ratio:4/3; overflow:hidden; }
.detail h1 { font-size:2.4rem; font-weight:400; margin:6px 0 14px; }
dl { display:grid; grid-template-columns:80px 1fr; gap:10px 14px; margin:28px 0; border-top:1px solid var(--line-l); padding-top:22px; }
dt { opacity:.65; } dd { margin:0; }
.dot { display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:8px; vertical-align:-2px; }
.pager { display:flex; justify-content:space-between; gap:12px; font-weight:700; text-decoration:underline; }
/* 푸터 (항상 검정) */
#site-footer { background:#000; color:#fff; margin-top:80px; padding:56px 0 36px; }
.f-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; border-top:1px solid var(--line-d); padding-top:40px; }
#site-footer h4 { font-size:1.1rem; margin-bottom:14px; }
#site-footer a { display:block; margin-bottom:10px; opacity:.9; }
#site-footer a:hover { text-decoration:underline; }
#site-footer .copy { margin-top:48px; opacity:.55; font-size:.85rem; }
@media (max-width:820px) {
.feature, .feature.small, .lead, .two, .detail, .pair { grid-template-columns:1fr; }
.filters { grid-template-columns:1fr; }
.row { grid-template-columns:120px 1fr; }
.row .btn-dark { grid-column:1 / -1; text-align:center; }
.f-grid { grid-template-columns:1fr 1fr; }
.bar-right { align-items:flex-start; }
.hero-img h1 { font-size:2.2rem; }
}
/* 역사 페이지: 왼쪽 위 큰 사진, 글은 오른쪽과 아래로 흐름 */
.hist { padding-top:24px; font-size:1.05rem; line-height:1.9; }
.hist figure { float:left; width:56%; margin:0 44px 28px 0; }
.hist .h-pic { aspect-ratio:4/3; overflow:hidden; }
.hist figcaption { font-size:.85rem; opacity:.7; margin-top:10px; }
.hist .h-lead { font-size:1.35rem; line-height:1.6; font-weight:500; margin-bottom:28px; }
.hist h2 { font-size:1.6rem; margin:36px 0 12px; }
.hist p { margin-bottom:16px; opacity:.92; }
.hist .h-end { clear:both; }
@media (max-width:820px) { .hist figure { float:none; width:100%; margin:0 0 24px; } }
/* 역사: 연표 / 참고 자료 */
.hist .h-block { margin-top:56px; padding-top:8px; border-top:1px solid var(--line-d); }
.timeline, .sources { list-style:none; padding:0; margin:0; }
.timeline li { display:grid; grid-template-columns:110px 1fr; gap:24px; padding:16px 0; border-bottom:1px solid var(--line-d); }
.timeline b { font-size:1.15rem; }
.sources li { padding:10px 0; border-bottom:1px solid var(--line-d); opacity:.9; }
/* 역사: 오른쪽 아래 긴 사진 */
.hist figure.side { float:right; clear:left; width:34%; margin:36px 0 24px 44px; }
.hist .h-pic.tall { aspect-ratio:2/3; }
@media (max-width:820px) { .hist figure.side { float:none; width:100%; margin:24px 0; } }
/* 역사: 네모난 칸 */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:24px; }
.tile { position:relative; aspect-ratio:1/1; display:flex; flex-direction:column; justify-content:space-between;
padding:24px; color:#fff; isolation:isolate; }
.tile::before { content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(0,0,0,.55)); }
.t-no { font-weight:700; opacity:.85; }
.t-body { padding-top:56px; }
.t-body strong { display:block; font-size:1.5rem; line-height:1.3; margin-bottom:8px; }
.t-body small { display:block; font-size:.92rem; opacity:.9; line-height:1.5; }
.tile .circ { position:absolute; right:20px; top:20px; }
.tile:hover { outline:3px solid #fff; outline-offset:-3px; }
.tile:hover .circ { background:#000; color:#fff; }
/* 어두운 페이지의 빵부스러기/페이저 */
.dark .crumbs { border-bottom-color:var(--line-d); }
.dark .share button { background:#fff; color:#000; }
.dark .pager { margin-top:56px; padding-top:24px; border-top:1px solid var(--line-d); text-decoration:none; }
.dark .pager a { text-decoration:underline; }
/* 역사 상세: 2열 격자 (왼쪽 위 큰 사진 / 오른쪽 위 글 / 왼쪽 아래 글 / 오른쪽 아래 긴 사진) */
.hist.grid2 { display:grid; grid-template-columns:56fr 44fr; column-gap:44px; row-gap:8px; align-items:start; }
.hist.grid2 .g-pic { grid-column:1; grid-row:1; margin:0; }
.hist.grid2 .g-a { grid-column:2; grid-row:1; }
.hist.grid2 .g-b { grid-column:1; grid-row:2; }
.hist.grid2 .g-side { grid-column:2; grid-row:2; margin:12px 0 0; width:80%; justify-self:end; }
.hist.grid2 h2:first-child { margin-top:0; }
@media (max-width:820px) {
.hist.grid2 { display:block; }
.hist.grid2 .g-side { width:100%; margin:24px 0; }
}
.hist.grid2 figure.g-pic { float:none; width:auto; }
.hist.grid2 figure.g-side { float:none; }
/* 소개 페이지 */
.video-band { background:#000; padding:28px 0 18px; }
.v-frame { aspect-ratio:16/7; max-height:460px; width:100%; background:#111; overflow:hidden; }
.v-frame video, .v-frame iframe { width:100%; height:100%; display:block; border:0; background:#000; }
.v-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#fff; text-align:center; padding:16px; }
.v-empty b { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:#fff; color:#000; font-size:1.4rem; }
.v-empty small { opacity:.65; }
.v-caption { color:#fff; opacity:.75; font-size:.85rem; margin-top:10px; }
.grid4 { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px; }
.grid4 .card .body { min-height:200px; }
.steps { list-style:none; margin:0; padding:0; counter-reset:s; }
.steps li { counter-increment:s; display:grid; grid-template-columns:72px 1fr; gap:20px; padding:24px 0; border-top:1px solid var(--line-l); }
.steps li::before { content:counter(s); display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#222; color:#fff; font-weight:700; }
.steps h3 { font-size:1.3rem; font-weight:500; margin-bottom:4px; }
.steps p { opacity:.85; }
.kv { display:grid; grid-template-columns:130px 1fr; gap:0; margin:0; border-top:1px solid var(--line-l); }
.kv dt, .kv dd { padding:16px 0; border-bottom:1px solid var(--line-l); margin:0; }
.kv dt { font-weight:700; opacity:1; }
.faq details { border-top:1px solid var(--line-l); padding:6px 0; }
.faq details:last-child { border-bottom:1px solid var(--line-l); }
.faq summary { cursor:pointer; font-size:1.15rem; padding:16px 0; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::after { content:"+"; font-size:1.4rem; line-height:1; }
.faq details[open] summary::after { content:"−"; }
.faq summary::-webkit-details-marker { display:none; }
.faq details p { padding:0 0 18px; max-width:760px; opacity:.9; }
.thanks { max-width:760px; font-size:1.1rem; line-height:1.9; }
@media (max-width:820px) { .steps li { grid-template-columns:56px 1fr; } .kv { grid-template-columns:100px 1fr; } .v-frame { aspect-ratio:16/9; } }
/* 소개: 큰 제목 + 글 (+ 선택 사진) */
.a-sec { padding:48px 0 8px; }
.a-sec .sec-title { margin-bottom:24px; }
.a-text { max-width:780px; }
.a-text p { font-size:1.08rem; line-height:1.95; margin-bottom:18px; }
.a-photo { margin:0 0 28px; }
.a-pic { aspect-ratio:21/9; overflow:hidden; background:#ddd; }
.a-pic img { width:100%; height:100%; object-fit:cover; display:block; }
.a-photo figcaption { font-size:.85rem; opacity:.7; margin-top:10px; }
/* 긴 글자 대응: 띄어쓰기 없이 길게 써도 칸 안에서 줄바꿈 */
.f-text, .f-meta p, .f-text h2, .card .body, .t-body { min-width:0; overflow-wrap:anywhere; }
.f-meta p { flex:1; padding-right:12px; }
/* 전체 명조체 */
h1, h2, .brand, .page-title, .sec-title, .f-text h2, .t-body strong, .card h3, .lead h2, .zone-title, .row h3 { font-family:var(--font-head); font-weight:700; letter-spacing:0; }
.brand small { font-family:var(--font); }
/* 홈 맨 위: 동영상이 큰 글자 뒤에 깔린 영역 */
.hero-vid { position:relative; min-height:min(78vh,620px); display:flex; align-items:flex-end; overflow:hidden; background:#000; isolation:isolate; }
.hv-media { position:absolute; inset:0; z-index:-2; }
.hv-media video, .hv-media img { width:100%; height:100%; object-fit:cover; display:block; }
.hv-media iframe { position:absolute; top:50%; left:50%; width:max(100%,177.78vh); height:max(100%,56.25vw); transform:translate(-50%,-50%); border:0; pointer-events:none; }
.hv-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.25) 60%,rgba(0,0,0,.45)); }
.hv-text { padding-bottom:56px; padding-top:140px; width:100%; }
.hv-text .page-title { padding-top:0; }
.hv-text .page-sub { max-width:720px; opacity:.95; }
/* 어두운 홈 배경에서 자주 묻는 질문 선 색 */
.dark .faq details { border-color:var(--line-d); }
.dark .faq details:last-child { border-bottom-color:var(--line-d); }
/* 홈 대표 전시품: 빨간 블록은 악보에 딱 붙이고, 오른쪽 옆에 가로 사진 2칸 */
.feat-row { display:flex; height:440px; }
.feat-row .feature.tight { display:flex; flex:1; min-width:0; height:100%; min-height:0; }
.feat-row .feature.tight .f-text { flex:1; min-width:0; }
.feat-row .feature.tight .f-pic { flex:none; height:100%; padding:12px 12px 12px 0; }
.feat-row .feature.tight .f-pic img { height:100%; width:auto; max-width:none; min-height:0; display:block; }
.feat-row .feature.tight .f-pic .swatch { height:100%; width:240px; min-height:0; }
@media (max-width:820px) {
.feat-row { flex-direction:column; height:auto; }
.feat-row .feature.tight { flex-direction:column; height:auto; }
.feat-row .feature.tight .f-text { min-height:200px; }
.feat-row .feature.tight .f-pic { height:360px; padding:0 12px 12px; display:flex; justify-content:center; }
}
/* 스토어 */
.card .pic { position:relative; }
.sold { position:absolute; left:12px; top:12px; z-index:2; background:#000; color:#fff; font-weight:700; font-size:.85rem; padding:4px 12px; }
.card .price { font-weight:700; opacity:1; font-size:1.05rem; margin-bottom:6px; }
.price.big { font-size:1.7rem; margin:4px 0 18px; font-weight:700; }
.dark dl { border-top-color:var(--line-d); }
.detail h1 { font-weight:700; }
.buy-btn { display:inline-flex; align-items:center; gap:12px; background:#f1e4c8; color:#2b1d12; padding:16px 28px; font-weight:700; font-size:1.05rem; }
a.buy-btn:hover { background:#fff; }
.buy-btn.off { background:#3a3a38; color:#aaa; cursor:default; }
.buy-note { font-size:.85rem; opacity:.65; margin-top:10px; }
.buy-btn .circ { background:#2b1d12; color:#f1e4c8; }
/* ── 고풍 배경 (약하게) ─────────────────────────────
색을 바꾸려면 아래 변수만 고치면 된다.
--black: 어두운 페이지 배경 / --dark: 카드 배경 / --beige: 밝은 페이지(양피지) 배경 */
:root {
--black:#0d0907; --dark:#17110d; --beige:#cfc19f; --gray:#bfb08a; --ink:#2b1d12;
--line-d:rgba(241,228,200,.28); --line-l:rgba(43,29,18,.3);
--paper-grain: url("data:image/svg+xml;utf8,");
}
body.dark { background-color:var(--black);
background-image: radial-gradient(ellipse at 50% 30%, rgba(120,80,40,.05), transparent 60%), radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.6)), var(--paper-grain);
background-attachment: fixed, fixed, scroll; color:#f1e4c8; }
body.light { background-color:var(--beige);
background-image: radial-gradient(ellipse at center, transparent 55%, rgba(60,40,10,.35)), var(--paper-grain);
background-attachment: fixed, scroll; }
#site-header, #site-footer { background:#070504; color:#f1e4c8; }
.dark .page-title, .dark .sec-title, .dark h1, .dark h2 { color:#f6ead0; }
.toc { background:#b9aa85; }
hr.line { border-top-color:var(--line-d); }
.light hr.line { border-color:var(--line-l); }
/* ══ 고서(古書) 스타일 ═════════════════════════════
금색 이중선 · 액자 같은 카드 · 가운데 정렬 제목 · 세피아 사진
끄고 싶으면 이 블록(여기부터 맨 아래까지)을 지우면 된다. */
:root { --gold:#b8934a; --gold-l:#e0c487; --line-d:rgba(184,147,74,.6); --line-l:rgba(122,90,42,.5); }
/* 위/아래 띠: 금색 이중선 */
#site-header { border-bottom:4px double var(--gold); }
#site-footer { border-top:4px double var(--gold); }
nav a { letter-spacing:.06em; }
nav a.on { border-color:var(--gold-l); }
/* 제목: 가운데 정렬 + 양옆 이중선 */
.dark .page-title { text-align:center; letter-spacing:.05em; }
/* 큰 제목 아래 금색 로고 (images/logo-gold.png). 크기는 height 숫자만 바꾸면 된다 */
.dark .page-title::after { content:""; display:block; height:84px; margin:18px auto 6px; background:url(../images/logo-gold.png) center/contain no-repeat; }
.dark .page-sub { margin-left:auto; margin-right:auto; text-align:center; }
.sec-title { display:flex; align-items:center; gap:22px; justify-content:center; text-align:center; letter-spacing:.04em; font-size:2rem; }
.sec-title::before, .sec-title::after { content:""; flex:1; border-top:4px double var(--gold); opacity:.8; min-width:24px; }
hr.line, .light hr.line { border:0; border-top:4px double var(--gold); }
/* 카드: 금색 테두리 액자 */
.card { border:1px solid var(--gold); padding:9px; }
.dark .card { background:var(--dark); } .light .card { background:var(--gray); }
.dark .card .body, .light .card .body { background:transparent; padding:22px 16px 20px; }
.card .pic { border:1px solid rgba(184,147,74,.7); }
.card:hover { border-color:var(--gold-l); }
.card h3 { letter-spacing:.02em; }
/* 버튼: 검은 막대 대신 금색 테두리 */
.bar-btn, .light .bar-btn { background:transparent; color:inherit; border:1px solid var(--gold); letter-spacing:.06em; }
.card:hover .bar-btn, .bar-btn:hover { background:var(--gold); color:#1b1511; }
.circ { background:var(--gold); color:#1b1511; }
.card:hover .circ, .bar-btn:hover .circ { background:#1b1511; color:var(--gold-l); }
.btn-dark { background:transparent; color:inherit; border:1px solid var(--gold); }
.btn-dark:hover { background:var(--gold); color:#1b1511; }
.buy-btn { border:1px solid var(--gold); }
/* 대표 전시 블록: 안쪽 금색 선 + 사진 액자 */
.feature { outline:1px solid var(--gold-l); outline-offset:-10px; }
.f-pic img { border:6px solid #efe2c6; box-shadow:0 8px 20px rgba(0,0,0,.45); }
/* 사진: 아주 약한 세피아 (오래된 인쇄 느낌). 원래 색으로 보려면 이 줄을 지우세요 */
.card .pic img, .f-pic img, .a-pic img, .detail-pic img, .slot img, .h-pic img { filter:sepia(.25) contrast(1.02); }
/* 상세 사진 · 역사 칸 · 탭 */
.detail-pic { outline:1px solid var(--gold); outline-offset:8px; }
.tile { outline:1px solid rgba(255,255,255,.55); outline-offset:-10px; border:1px solid var(--gold); }
.tabs { border-top:4px double var(--gold); border-bottom:4px double var(--gold); }
.tabs button.on { border-color:var(--gold-l); }
.faq summary::after { color:var(--gold-l); }
.dark .crumbs, .light .crumbs { border-bottom-color:var(--gold); }
.hv-text { text-align:center; }
.hv-text .page-sub { margin-left:auto; margin-right:auto; }
/* ══ 움직이는 연출 ═════════════════════════════════
(js/main.js 맨 아래 initFX 와 짝). 전부 끄려면 이 블록과 initFX 줄을 지운다. */
.fx { opacity:0; transform:translateY(30px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); }
.fx.in { opacity:1; transform:none; }
@keyframes rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@keyframes slowzoom { to { transform:scale(1.09); } }
@keyframes sway { 0%,100% { transform:rotate(-4deg); } 50% { transform:rotate(4deg) translateY(-4px); } }
/* 큰 제목: 떠오르며 등장, 아래 로고는 살짝 흔들림 */
.dark .page-title { animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hv-text .page-sub { animation:rise 1.1s .35s cubic-bezier(.2,.7,.2,1) both; }
.dark .page-title::after { transform-origin:50% 85%; animation:sway 5s ease-in-out infinite; }
/* 홈 맨 위: 영상이 천천히 확대 + 금빛 눈 */
.hv-media { top:-15%; bottom:-15%; will-change:transform; }
.hv-media video, .hv-media img { animation:slowzoom 26s ease-in-out infinite alternate; }
.snow { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hv-text { position:relative; z-index:1; }
/* 카드: 올리면 떠오르고 사진이 살짝 커짐 */
.card { transition:transform .35s ease, box-shadow .35s ease, border-color .25s; }
.card:hover { transform:translateY(-6px); box-shadow:0 16px 32px rgba(0,0,0,.5); }
.card .pic img, .card .swatch { transition:transform .7s ease; }
.card:hover .pic img, .card:hover .swatch { transform:scale(1.06); }
.tile { transition:transform .3s ease; } .tile:hover { transform:translateY(-5px); }
.feature .f-pic img { transition:transform .6s ease; } .feature:hover .f-pic img { transform:scale(1.025); }
.bar-btn, .btn-dark, .buy-btn { transition:background .25s, color .25s, transform .25s; }
a.buy-btn:hover, .btn-dark:hover { transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation:none !important; transition:none !important; }
.fx { opacity:1; transform:none; }
}
/* 제목·큰 글자·위쪽 메뉴는 고딕체 (본문은 명조 그대로) */
.brand, .brand small, nav a, .utils a, .tabs button, .zone-title, .badge, .sold { font-family:var(--font-head); }
h1, h2, h3, .page-title, .sec-title, .f-text h2, .t-body strong, .card h3, .lead h2, .row h3 { font-weight:700; letter-spacing:-.01em; }
.brand { font-weight:700; }
nav a { font-weight:500; letter-spacing:.02em; }
.page-title { font-weight:700; }
/* 작품(전시품·소장품) 글자만 명조체: 대표 전시품 블록, 전시품 카드, 전시품 상세 페이지 */
.feature, .feature *, .work, .work *, .detail.work, .detail.work * { font-family:var(--font-work) !important; }
.feature h2, .work h3, .detail.work h1, .work .kicker, .feature .f-meta p { font-weight:400 !important; }
.detail p { margin:0 0 1em; }
/* ══ 전시 및 주요행사: 작품 배치 (번갈아 보기) ══ */
/* 2) 번갈아 보기 */
.alt { display:flex; flex-direction:column; gap:64px; }
.alt-row { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; align-items:center; }
.alt-row.rev { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
.alt-row.rev .a-img { order:2; }
.alt-row .a-img { aspect-ratio:4/3; border:10px solid #e8d9b5; outline:1px solid var(--gold); box-shadow:0 10px 24px rgba(0,0,0,.5); overflow:hidden; background:#111; }
.alt-row .a-img img, .alt-row .a-img .swatch { width:100%; height:100%; object-fit:cover; display:block; }
.alt-row h3 { font-size:1.9rem; line-height:1.3; margin:6px 0 14px; }
.alt-row p:not(.kicker) { opacity:.9; font-size:1.02rem; line-height:1.85; }
.alt-more { display:inline-flex; align-items:center; gap:12px; margin-top:22px; padding:11px 18px; border:1px solid var(--gold); font-weight:700; letter-spacing:.06em; transition:.25s; }
.alt-row:hover .alt-more { background:var(--gold); color:#1b1511; }
.alt-row:hover .alt-more .circ { background:#1b1511; color:var(--gold-l); }
@media (max-width:820px) {
.alt-row, .alt-row.rev { grid-template-columns:1fr; gap:22px; }
.alt-row.rev .a-img { order:0; }
}
@media (max-width:820px) { .feature:not(.tight) .f-pic { min-width:0; } .feature:not(.tight) .f-pic img { max-width:100%; width:100%; object-fit:cover; } }
/* 확대 효과 없음: 올려도 사진·버튼이 커지지 않는다 (위로 살짝 뜨는 효과만 유지) */
.card:hover .pic img, .card:hover .swatch, .feature:hover .f-pic img, .pg:hover img { transform:none !important; }
.feature:hover .badge, a.buy-btn:hover, .btn-dark:hover { transform:none !important; }
/* 상세 페이지 사진: 확대·잘림 없이 사진 전체가 칸에 맞게 보인다 */
.detail-pic { aspect-ratio:auto; overflow:visible; align-self:start; }
.detail-pic img { display:block; width:auto; max-width:100%; height:auto; max-height:80vh; object-fit:contain; }
.detail-pic .swatch { aspect-ratio:4/3; height:auto; }
/* ══ 처음 접속 팝업 ══ */
.popup { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.7); animation:rise .5s both; }
.popup-box { position:relative; width:min(420px,100%); max-height:90vh; overflow:auto; background:var(--dark); color:#f1e4c8; border:1px solid var(--gold); outline:1px solid var(--gold-l); outline-offset:-8px; box-shadow:0 20px 50px rgba(0,0,0,.7); }
.popup-x { position:absolute; right:10px; top:8px; z-index:2; background:none; border:0; color:#f1e4c8; font-size:1.8rem; line-height:1; cursor:pointer; }
.popup-img img { display:block; width:100%; height:auto; }
.popup-body { padding:34px 30px 22px; text-align:center; }
.popup-body h3 { font-family:var(--font-head); font-size:1.4rem; margin-bottom:12px; color:#f6ead0; }
.popup-body p { line-height:1.8; opacity:.92; }
.popup-link { display:inline-block; margin-top:20px; padding:11px 22px; border:1px solid var(--gold); font-family:var(--font-head); font-weight:700; letter-spacing:.06em; }
.popup-link:hover { background:var(--gold); color:#1b1511; }
.popup-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid var(--line-d); font-size:.85rem; }
.popup-foot label { cursor:pointer; opacity:.85; }
.popup-close { background:none; border:1px solid var(--gold); color:inherit; padding:6px 14px; cursor:pointer; font-family:var(--font-head); }
.popup-img, .popup-body { cursor:pointer; }
/* 상세 페이지의 두 번째(긴) 사진 */
.detail-side { margin:28px 0 0; width:80%; }
.detail-side .ds-pic { aspect-ratio:2/3; overflow:hidden; }
.detail-side .ds-pic img { width:100%; height:100%; object-fit:cover; display:block; }
.detail-side .ds-pic .swatch { height:100%; }
.detail-side figcaption { font-size:.85rem; opacity:.7; margin-top:10px; }
@media (max-width:820px) { .detail-side { width:100%; } }
/* 전시 및 주요행사 페이지: 밤하늘 배경 */
body.sky { background:#0b1224 url(../images/night.jpg) center / cover no-repeat fixed; color:#f1e4c8; }
body.sky .page-title::after { background-image:url(../images/logo-sky.png); }