/* ── MoolBoran Self-Host ── */
@font-face{font-family:'MoolBoran';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/moolboran.woff2') format('woff2'),url('/fonts/moolboran.woff') format('woff')}
@font-face{font-family:'MoolBoran';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/moolboran.woff2') format('woff2'),url('/fonts/moolboran.woff') format('woff')}
@font-face{font-family:'MoolBoran';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/moolboran.woff2') format('woff2'),url('/fonts/moolboran.woff') format('woff')}

/* GALLERY JHAK — Stylesheet */

/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box}

/* ── Variables ── */
:root{--white:#fff;--g50:#f5f4f2;--g100:#eae9e6;--g200:#d9d7d4;--g300:#c2c0bc;--g400:#98958f;--g600:#666;--g800:#4a4a4a;--black:#3E3A39;--font-kr:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;--font-ci:'Outfit','Pretendard',sans-serif;--font-serif:'MoolBoran','Cormorant Garamond',Georgia,serif}

/* ── Body ── */
body{letter-spacing:-0.04em;font-family:var(--font-kr);color:var(--black);background:var(--white);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
body.bg-warm{background:#fafaf8}

/* ── Typography ── */
.t-section{font-family:var(--font-serif);font-size:clamp(24px,4vw,32px);font-weight:500;letter-spacing:.04em;line-height:1.25;text-transform:uppercase}
.t-sub{font-size:15px;font-weight:600;letter-spacing:-.025em;line-height:1.45}
.t-body{font-size:14px;font-weight:400;letter-spacing:-.02em;line-height:1.72;color:var(--g800)}
.t-desc{font-size:13px;font-weight:400;letter-spacing:-.01em;line-height:1.6;color:var(--g600)}
.t-note{font-size:11px;font-weight:400;letter-spacing:-.01em;line-height:1.6;color:var(--g400)}
.t-label{font-family:var(--font-ci);font-size:12px;font-weight:500;letter-spacing:.08em;line-height:1;color:var(--g300);text-transform:uppercase}
.t-nav{font-family:var(--font-ci);font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--g600);text-decoration:none;cursor:pointer;transition:color .2s}
.t-nav:hover{color:var(--black)}
.t-nav.active{color:var(--black);font-weight:500}
.desktop-nav .t-nav{position:relative}
.desktop-nav .t-nav.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--black)}

/* ── Layout ── */
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(24px,5vw,56px)}
.line{width:100%;height:1px;background:var(--g100)}

/* ── Header ── */
.header{position:fixed;top:0;left:0;right:0;z-index:50;height:72px;display:flex;align-items:center;padding-top:8px;transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
.header.solid{background:rgba(255,255,255,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:rgba(0,0,0,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 clamp(28px,5vw,56px)}
.header-left{display:flex;align-items:center;gap:16px}
.desktop-nav{display:flex;gap:32px;align-items:center}
.logo-link{cursor:pointer;padding:4px 0;display:block}
.logo-link img{height:28px}

/* ── Burger ── */
.burger{display:none;cursor:pointer;width:24px;height:24px;position:relative;background:none;border:none}
.burger span{display:block;width:18px;height:1px;background:var(--black);position:absolute;left:3px;transition:all .25s}
.burger span:nth-child(1){top:8px}.burger span:nth-child(2){top:12px}.burger span:nth-child(3){top:16px}
.burger.open span:nth-child(1){top:12px;transform:rotate(45deg)}.burger.open span:nth-child(2){opacity:0}.burger.open span:nth-child(3){top:12px;transform:rotate(-45deg)}
@media(max-width:768px){.desktop-nav{display:none}.burger{display:block}}

/* ── Mobile Overlay ── */
.mobile-overlay{position:fixed;inset:0;background:var(--white);z-index:200;display:none;flex-direction:column;padding:80px 32px 40px}
.mobile-overlay.open{display:flex}
.mobile-overlay .m-link{font-family:var(--font-serif);font-size:18px;font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--g600);padding:16px 0;border-bottom:1px solid var(--g100);cursor:pointer;transition:color .2s;text-decoration:none;display:block}
.mobile-overlay .m-link:first-child{border-top:1px solid var(--g100)}
.mobile-overlay .m-link:hover{color:var(--black)}
.mobile-close{position:absolute;top:16px;right:24px;background:none;border:none;font-size:24px;color:var(--g400);cursor:pointer}

/* ── Grids ── */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.g-info{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media(max-width:768px){.g2,.g3,.g4,.g-info{grid-template-columns:1fr}.g-info{gap:32px}}
@media(min-width:769px)and(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}

/* ── Placeholder ── */
.placeholder-box{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px;padding:16px;transition:background .3s;position:relative;background:linear-gradient(155deg,#2a2826 0%,#3d3835 45%,#2f2c29 100%)}
.placeholder-box::before{content:'';position:absolute;inset:0;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px;mix-blend-mode:soft-light;pointer-events:none}
.card:hover .placeholder-box{background:linear-gradient(155deg,#353230 0%,#45403c 45%,#3a3633 100%)}
.card img{transition:opacity .3s}.card:hover img{opacity:.85}
.ph-label{font-size:13px;font-weight:400;letter-spacing:-.01em;color:rgba(255,255,255,.55)}
.ph-sub{font-size:10px;font-weight:400;color:rgba(255,255,255,.3)}

/* ── Cards ── */
.card{cursor:pointer}
.card-ph{margin-bottom:0;overflow:hidden}
.card-meta{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.card-body{padding:12px 14px 16px}

/* ── Card Finish ── */
.card-ex,.card-artist{border-radius:0;overflow:hidden;border:1px solid var(--g100);transition:transform .25s,box-shadow .25s;cursor:pointer}
.card-ex:hover,.card-artist:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.card-ex .card-ph,.card-artist .card-ph{overflow:hidden;position:relative}
.card-ex .card-ph img,.card-artist .card-ph img{transition:transform .5s ease}
.card-ex:hover .card-ph img,.card-artist:hover .card-ph img{transform:scale(1.03)}
.card-ex:hover .card-ph::after,.card-artist:hover .card-ph::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.04);transition:background .3s}

/* ── Featured Card (single exhibition) ── */
.card-featured{display:grid;grid-template-columns:1fr 1fr;border-radius:0;overflow:hidden;border:1px solid var(--g100)}
.card-featured .card-featured-ph{overflow:hidden}
.card-featured .card-featured-ph .placeholder-box{height:100%;aspect-ratio:auto}
.card-featured .card-body{padding:28px 32px;display:flex;flex-direction:column;justify-content:flex-end}
.card-featured .card-meta{margin-bottom:12px}
.card-featured:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06)}
@media(max-width:768px){.card-featured{grid-template-columns:1fr}.card-featured .card-body{padding:16px 14px 20px}}

/* ── Year Filter ── */
.year-filter{display:flex;flex-wrap:wrap;gap:4px 0;margin-bottom:32px}
.ybtn{font-size:13px;font-weight:400;background:none;border:1px solid var(--g100);color:var(--g300);padding:6px 14px;cursor:pointer;transition:color .2s,border-color .2s;text-align:center;font-family:var(--font-kr);white-space:nowrap;flex-shrink:0}
.ybtn:hover{color:var(--g600);border-color:var(--g300)}
.ybtn.on{color:var(--black);font-weight:600;border-color:var(--black)}

/* ── Badge ── */
.badge{display:inline-block;font-family:var(--font-ci);font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--g400);border:1.5px solid var(--g200);padding:6px 16px}

/* ── Timeline ── */
.tl-row{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--g50);transition:background .15s;border-radius:6px;padding-left:8px;padding-right:8px;margin-left:-8px;margin-right:-8px}
.tl-row:last-child{border-bottom:none}
.tl-row:hover{background:var(--g50)}
.tl-year{font-family:var(--font-ci);font-size:14px;font-weight:500;letter-spacing:.03em;color:var(--g300);line-height:1.72}

/* ── Artfairs ── */
.af-row{display:grid;grid-template-columns:56px 1fr auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--g50);align-items:baseline;transition:background .15s;border-radius:6px;padding-left:8px;padding-right:8px;margin-left:-8px;margin-right:-8px}
.af-row:last-child{border-bottom:none}
.af-row:hover{background:var(--g50)}
@media(max-width:520px){.af-row{grid-template-columns:1fr;gap:2px;padding:12px 0}}

/* ── Info Box ── */
.info-box{background:var(--g50);padding:28px;border:1px solid var(--g100)}

/* ── Hours Strip ── */
.hours-strip{background:#f0efec;padding:48px 0}
.hours-strip-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px}
@media(max-width:768px){.hours-strip-inner{flex-direction:column}}

/* ── Detail Views ── */
.detail-back{font-size:13px;color:var(--g400);cursor:pointer;border:none;background:none;padding:4px 0;transition:color .2s;margin-bottom:24px;display:inline-block}
.detail-back:hover{color:var(--black)}
.detail-hero{width:100%;aspect-ratio:16/9;background:linear-gradient(155deg,#2a2826 0%,#3d3835 45%,#2f2c29 100%);border-radius:0;display:flex;align-items:center;justify-content:center;margin-bottom:28px;overflow:hidden}
.detail-hero img{width:100%;height:100%;object-fit:cover}

/* ── Artist Detail ── */
.artist-detail-grid{display:grid;grid-template-columns:240px 1fr;gap:40px}
.artist-portrait{text-align:center}
.artist-portrait-img{width:160px;height:160px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 16px}
.artist-portrait-ph{width:160px;height:160px;border-radius:50%;background:linear-gradient(155deg,#2a2826,#3d3835);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.ex-history-row{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--g50);cursor:pointer;transition:background .15s}
.ex-history-row:hover{background:var(--g50)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.portfolio-item{aspect-ratio:1/1;background:linear-gradient(155deg,#2a2826,#3d3835);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.portfolio-item img{width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.artist-detail-grid{grid-template-columns:1fr}.artist-portrait{padding-bottom:24px;border-bottom:1px solid var(--g100)}}

/* ── Footer ── */
.footer{background:#fff;border-top:1px solid var(--g100);padding:48px 0 40px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding-top:20px;border-top:1px solid var(--g50)}
.footer-sns{display:flex;gap:16px;flex-wrap:wrap}
.footer-sns a,.footer-sns span{font-family:var(--font-ci);font-size:11px;font-weight:400;color:var(--g300);text-decoration:none;letter-spacing:.01em;transition:color .2s;cursor:pointer}
.footer-sns a:hover,.footer-sns span:hover{color:var(--g600)}
@media(max-width:768px){.footer-sns{display:grid;grid-template-columns:repeat(3,auto);gap:8px 16px;justify-content:start}}

/* ── Hero ── */
.hero{position:relative;height:100vh;max-height:900px;display:flex;align-items:flex-end;overflow:hidden;background:#1a1a1a}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s;will-change:opacity}
.hero-slide.active{opacity:1}
.hero-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.2) 75%,rgba(0,0,0,.15) 100%),radial-gradient(ellipse at 20% 80%,rgba(0,0,0,.4) 0%,transparent 70%)}
.hero-content{position:relative;z-index:1;padding-bottom:140px;width:100%}
.hero-wordmark{width:100%;max-width:480px;display:block}
@media(max-width:768px){.hero{height:100vh;height:100svh}.hero-wordmark{max-width:260px}.hero .badge{font-size:10px;padding:5px 12px;letter-spacing:.06em}.hero .t-body{font-size:13px}}

/* ── Hero Typography ── */
.hero .badge{font-family:var(--font-ci);border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.7)}
.hero .t-body{font-size:15px;line-height:1.7;letter-spacing:-.02em;color:rgba(255,255,255,.8)}
.hero .t-nav{font-family:var(--font-ci);font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hero .t-nav:hover{color:#fff}

/* ── Hero Stagger (JS-driven) ── */
.hero-content>*{opacity:0;transition:opacity .8s}
.hero-content>*.vis{opacity:1}
.hero-scroll{opacity:0;transition:opacity .8s}
.hero-scroll.vis{opacity:1}

/* ── Film Grain ── */
.hero::after{content:'';position:absolute;inset:0;z-index:1;opacity:.35;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");background-repeat:repeat;background-size:128px 128px;mix-blend-mode:overlay}

/* ── Scroll Indicator ── */
.hero-scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-scroll-text{font-family:var(--font-ci);font-size:10px;font-weight:500;letter-spacing:.1em;color:rgba(255,255,255,.35);text-transform:uppercase}
.hero-scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);background-size:1px 200%;animation:scrollGlide 2s ease-in-out infinite}
@keyframes scrollGlide{0%{background-position:0 200%}100%{background-position:0 -100%}}
@media(max-width:768px){.hero-scroll{bottom:20px}.hero-scroll-line{height:28px;background-size:1px 200%}.hero-content{padding-bottom:160px}.hero{height:100vh;height:100svh}}

/* ── Header Light Mode ── */
.header.light{background:transparent;border-bottom-color:transparent}
.header.light .logo-dark{display:none!important}
.header.light .logo-light{display:block!important}
.header.light .desktop-nav .t-nav{color:rgba(255,255,255,.7)}
.header.light .desktop-nav .t-nav:hover,.header.light .desktop-nav .t-nav.active{color:#fff}
.header.light .desktop-nav .t-nav.active::after{background:#fff}
.header.light .burger span{background:#fff}
.header.light.solid{background:rgba(255,255,255,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:rgba(0,0,0,.06)}
.header.light.solid .logo-dark{display:block!important}
.header.light.solid .logo-light{display:none!important}
.header.light.solid .desktop-nav .t-nav{color:var(--g600)}
.header.light.solid .desktop-nav .t-nav:hover,.header.light.solid .desktop-nav .t-nav.active{color:var(--black)}
.header.light.solid .desktop-nav .t-nav.active::after{background:var(--black)}
.header.light.solid .burger span{background:var(--black)}

/* ── Scroll Reveal ── */
.sr{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}
.sr.vis{opacity:1;transform:translateY(0)}
.sr-d1{transition-delay:.12s}
.sr-d2{transition-delay:.24s}
.sr-d3{transition-delay:.36s}

/* ── Scroll Progress Bar ── */
.scroll-bar{position:fixed;top:0;left:0;height:1px;width:0;background:var(--black);z-index:9999;opacity:.5}

/* ── CTA Button ── */
.cta-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;font-size:13px;font-weight:500;letter-spacing:-.02em;color:var(--white);background:var(--black);border-radius:10px;text-decoration:none;transition:opacity .2s;cursor:pointer}
.cta-btn:hover{opacity:.8;color:var(--white)}
.cta-btn.outline{background:none;color:var(--black);border:1px solid var(--g200)}
.cta-btn.outline:hover{border-color:var(--g400);color:var(--black)}

/* ── Page Banner ── */
.page-banner{width:100%;height:28vh;min-height:180px;object-fit:cover;display:block}

/* ── Nav Dropdown ── */
.nav-item{position:relative}
.nav-item::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.nav-dropdown{position:absolute;top:calc(100% + 8px);left:-12px;min-width:140px;padding:8px;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,.06);border-radius:0;box-shadow:0 8px 32px rgba(0,0,0,.08);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .2s,transform .2s,visibility .2s}
.nav-item:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown a{display:block;padding:8px 12px;font-family:var(--font-ci);font-size:12px;font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--g400);border-radius:0;transition:color .15s,background .15s;text-decoration:none}
.nav-dropdown a:hover{color:var(--black);background:var(--g50)}
.header.light .nav-dropdown{background:rgba(20,20,20,.9);border-color:rgba(255,255,255,.08)}
.header.light .nav-dropdown a{color:rgba(255,255,255,.5)}
.header.light .nav-dropdown a:hover{color:#fff;background:rgba(255,255,255,.06)}
.header.light.solid .nav-dropdown{background:rgba(255,255,255,.95);border-color:rgba(0,0,0,.06)}
.header.light.solid .nav-dropdown a{color:var(--g400)}
.header.light.solid .nav-dropdown a:hover{color:var(--black);background:var(--g50)}

/* ── Mobile Sub Menu ── */
.mobile-overlay .m-sub{font-family:var(--font-ci);font-size:13px;font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--g400);padding:12px 0 12px 20px;border-bottom:1px solid var(--g100);text-decoration:none;display:block;transition:color .2s}
.mobile-overlay .m-sub:hover{color:var(--black)}

/* ── Intro Slider ── */
.intro-slider{position:relative;width:100%;height:40vh;min-height:240px;overflow:hidden;background:#1a1a1a}
.intro-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.intro-slide.active{opacity:1}
.intro-slide img{width:100%;height:100%;object-fit:cover;display:block}
.intro-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.25);border:none;color:rgba(255,255,255,.7);font-size:24px;width:40px;height:40px;cursor:pointer;transition:background .2s,color .2s;z-index:2;display:flex;align-items:center;justify-content:center}
.intro-arrow:hover{background:rgba(0,0,0,.5);color:#fff}
.intro-prev{left:16px}
.intro-next{right:16px}
.intro-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.intro-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);border:none;cursor:pointer;transition:background .2s;padding:0}
.intro-dot.on{background:rgba(255,255,255,.85)}

/* ── Placeholder Variations ── */
.card:nth-child(2n) .placeholder-box{background:linear-gradient(135deg,#302d2b 0%,#262422 50%,#383432 100%)}
.card:nth-child(3n) .placeholder-box{background:linear-gradient(170deg,#33302e 0%,#2b2826 40%,#3e3a37 100%)}
.card:nth-child(4n) .placeholder-box{background:linear-gradient(120deg,#272524 0%,#3b3734 55%,#302d2a 100%)}
.card:nth-child(2n):hover .placeholder-box{background:linear-gradient(135deg,#3a3735 0%,#302e2c 50%,#423e3c 100%)}
.card:nth-child(3n):hover .placeholder-box{background:linear-gradient(170deg,#3d3a38 0%,#353230 40%,#484442 100%)}
.card:nth-child(4n):hover .placeholder-box{background:linear-gradient(120deg,#312f2e 0%,#45413e 55%,#3a3734 100%)}