/*
Theme Name: Vovvie
Theme URI: https://vovvie.example.com
Author: Vovvie
Author URI: https://vovvie.example.com
Description: 영상과 이미지로 둘러보는 시네마틱 비주얼 갤러리 테마.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vovvie
*/

:root{color-scheme:dark;--bg:#09090b;--surface:#141417;--line:#29292e;--text:#f5f5f3;--muted:#96969d;--accent:#d9ff74}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}a{color:inherit;text-decoration:none}
.shell{max-width:1600px;margin:auto;padding:0 34px}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #202024}.brand{font:800 25px/1 Manrope,sans-serif;letter-spacing:-.08em}.brand span{color:var(--accent)}.nav{display:flex;align-items:center;gap:35px;font-size:14px;font-weight:600}.nav a{color:#a8a8ad;transition:color .2s}.nav a:hover,.nav a.active{color:#fff}.nav .pill{border:1px solid #4b4b50;border-radius:99px;padding:11px 18px;color:#fff}.nav .pill:hover{border-color:#fff}.mobile-menu{display:none}
.hero{min-height:365px;display:flex;flex-direction:column;justify-content:flex-end;padding-block:48px 41px;position:relative;overflow:hidden}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--accent);font:700 11px Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase}.eyebrow:before{content:"";width:19px;height:1px;background:var(--accent)}h1{font:800 clamp(56px,8.5vw,132px)/.94 Manrope,sans-serif;letter-spacing:-.09em;margin:22px 0 18px;max-width:1100px}h1 em{font-style:normal;color:#6d6d73}.intro{display:flex;justify-content:space-between;align-items:end;gap:30px}.intro p{font-size:16px;line-height:1.6;color:#a5a5aa;margin:0;max-width:490px}.edition{font:600 12px Manrope,sans-serif;letter-spacing:.14em;color:#7e7e84;text-transform:uppercase;white-space:nowrap}.hero-glow{position:absolute;right:-80px;top:0;width:400px;height:270px;background:radial-gradient(ellipse,#3a3b2e55,transparent 65%);pointer-events:none}
.controls{position:sticky;top:0;z-index:10;background:#09090bef;backdrop-filter:blur(16px);border-block:1px solid #242428}.controls-inner{min-height:75px;display:flex;align-items:center;justify-content:space-between;gap:25px}.filters{display:flex;align-items:center;gap:7px}.filter{background:transparent;border:0;color:#898990;padding:12px 19px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s}.filter:hover{color:#fff}.filter.active{background:#f1f1ee;color:#111}.count{font-size:12px;color:#898990;letter-spacing:.08em;text-transform:uppercase}.count strong{color:#eee;font-weight:600}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;padding-block:27px 100px}.card{position:relative;grid-column:span 4;aspect-ratio:4/5;border:1px solid #26262a;border-radius:13px;overflow:hidden;background:#19191b;cursor:pointer;text-align:left;padding:0;color:#fff;isolation:isolate}.card.wide{grid-column:span 7;aspect-ratio:1.57}.card.tall{grid-column:span 5;aspect-ratio:1.12}.card.third{aspect-ratio:4/4.7}.card[hidden]{display:none}.media{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s cubic-bezier(.2,.65,.2,1),filter .7s;filter:saturate(.9)}.card:hover .media,.card:focus-visible .media{transform:scale(1.055);filter:saturate(1.08)}.card.motion .media{animation:drift 12s ease-in-out infinite alternate}.card.motion:hover .media{animation-play-state:paused;transform:scale(1.07)}@keyframes drift{to{transform:scale(1.14) translate(-1.6%,1%)}}.media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0006,transparent 28%,transparent 47%,#000c)}.card .top{position:absolute;left:23px;top:22px;right:23px;display:flex;justify-content:space-between;align-items:start;gap:12px}.tag{display:inline-flex;align-items:center;gap:7px;background:#101012b8;border:1px solid #ffffff32;backdrop-filter:blur(8px);border-radius:99px;padding:8px 12px;font-size:11px;letter-spacing:.1em;font-weight:700;text-transform:uppercase}.tag svg{width:11px;height:11px}.index{font:600 12px Manrope,sans-serif;color:#fff9;text-shadow:0 1px 5px #000}.card .bottom{position:absolute;bottom:23px;left:25px;right:24px;display:flex;justify-content:space-between;align-items:end;gap:15px}.category{display:block;color:#ddd;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}.title{font:700 clamp(22px,2.5vw,37px)/1.12 Manrope,sans-serif;letter-spacing:-.055em}.card:not(.wide) .title{font-size:clamp(21px,2vw,30px)}.open{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid #ffffff70;border-radius:50%;background:#ffffff17;font-size:20px;transition:.2s}.card:hover .open{background:var(--accent);color:#101010;border-color:var(--accent);transform:rotate(45deg)}
.endnote{border-top:1px solid #242428;padding-block:26px 38px;display:flex;justify-content:space-between;gap:20px;color:#77777f;font-size:12px}.endnote strong{color:#eee;font-weight:700}
dialog{border:0;padding:0;background:#111114;color:#fff;width:min(930px,calc(100vw - 32px));max-height:calc(100vh - 32px);border-radius:16px;overflow:hidden;box-shadow:0 20px 90px #000b}dialog::backdrop{background:#000c;backdrop-filter:blur(10px)}.viewer-media{height:min(64vh,620px);background-size:cover;background-position:center;position:relative}.viewer-media.motion{animation:viewer-drift 15s ease-in-out infinite alternate}@keyframes viewer-drift{to{background-size:115% auto;background-position:60% 48%}}.viewer-close{position:absolute;right:20px;top:20px;z-index:2;border:1px solid #fff6;background:#111b;color:white;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:24px;line-height:1}.viewer-body{padding:24px 30px 28px;display:flex;justify-content:space-between;align-items:end;gap:20px}.viewer-body h2{font:700 28px Manrope,sans-serif;letter-spacing:-.05em;margin:5px 0 0}.viewer-body p{color:#9a9aa0;font-size:14px;line-height:1.5;margin:9px 0 0}.viewer-kind{font-size:11px;letter-spacing:.15em;color:var(--accent);font-weight:700;text-transform:uppercase}.viewer-nav{display:flex;gap:8px}.viewer-nav button{background:#27272b;color:#fff;border:1px solid #44444a;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:21px}.viewer-nav button:hover{background:#414148}
@media(max-width:900px){.shell{padding-inline:22px}.hero{min-height:330px}.gallery{gap:12px}.card.wide,.card.tall{grid-column:span 6;aspect-ratio:4/5}.card{grid-column:span 6}.card.third{aspect-ratio:4/5}.title,.card:not(.wide) .title{font-size:24px}}
@media(max-width:600px){.topbar{height:67px}.nav{gap:15px}.nav>a:not(.pill){display:none}.nav .pill{font-size:12px;padding:9px 12px}.hero{min-height:300px;padding-block:40px 30px}h1{font-size:clamp(52px,13vw,78px)}.intro{display:block}.intro p{font-size:14px}.edition{display:none}.controls-inner{min-height:68px}.filter{font-size:13px;padding:10px 13px}.count{font-size:11px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:15px}.card,.card.wide,.card.tall,.card.third{grid-column:span 1;aspect-ratio:3/4}.card:first-child{grid-column:span 2;aspect-ratio:1.25}.card .top{left:10px;top:10px;right:10px}.tag{font-size:9px;padding:6px 8px}.index{display:none}.card .bottom{left:12px;right:12px;bottom:14px}.category{font-size:9px}.title,.card:not(.wide) .title{font-size:19px}.card:first-child .title{font-size:27px}.open{width:27px;height:27px;font-size:16px}.viewer-media{height:58vh}.viewer-body{padding:20px;align-items:start}.viewer-body h2{font-size:23px}.endnote{line-height:1.5}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}