/* VIVA ORDER MADE — main page, composition mirrored from boffi.com/en (2026-08-25).
   RULE: all values come from /design-system/tokens.css variables. Raw px only for 1px hairlines,
   media-query breakpoints and min-height guards. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--color-bg);color:var(--color-fg);font-family:var(--font-body);font-weight:var(--weight-light);font-size:var(--text-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:var(--weight-regular)}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}

.label{font-family:var(--font-heading);font-weight:var(--weight-regular);font-size:var(--text-sm);line-height:1.22;text-transform:uppercase;letter-spacing:var(--tracking-caps)}
.label--xs{font-size:var(--text-xs)}
.meta{font-family:var(--font-heading);font-size:var(--text-xs);line-height:1.4;color:var(--color-fg-muted)}

/* ── header: solid white fixed bar (Boffi style) ───────────────── */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;gap:var(--space-7);height:var(--space-8);padding-inline:var(--space-5);background:var(--color-bg);border-bottom:1px solid var(--color-gray-200)}
.hdr .logo img{height:var(--logo-h,var(--space-5));width:auto}
.hdr nav{display:flex;gap:var(--space-5)}
.hdr nav a,.hdr .util a{font-family:var(--font-heading);font-size:var(--text-sm);line-height:1.15;text-transform:none;position:relative}
.hdr nav a::after,.hdr .util a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.hdr nav a:hover::after,.hdr .util a:hover::after{transform:scaleX(1)}
.hdr .util{margin-left:auto;display:flex;gap:var(--space-5);align-items:center}
.hdr .util a{font-size:var(--text-xs)}
.hdr .burger{display:none;margin-left:auto}
@media(max-width:991px){.hdr nav,.hdr .util{display:none}.hdr .burger{display:block}}
.mnav{position:fixed;inset:var(--space-8) 0 0 0;z-index:59;background:var(--color-bg);display:none;flex-direction:column;gap:var(--space-5);padding:var(--space-7) var(--space-5)}
.mnav.open{display:flex}
.mnav a{font-family:var(--font-heading);font-size:var(--text-lg);text-transform:uppercase;letter-spacing:var(--tracking-caps);border-bottom:1px solid var(--color-gray-200);padding-bottom:var(--space-4)}
main{padding-top:var(--space-8)}

/* section shell: bottom padding + hairline separator, centered labels (Boffi rhythm) */
.sec{padding-block:var(--space-8);border-bottom:1px solid var(--color-gray-200)}
.sec-label{display:block;text-align:center;margin-bottom:var(--space-6);font-size:var(--text-lg);line-height:1.1}
.sec-cta{text-align:center;margin-top:var(--space-7)}

/* buttons — outline pill */
.btn{display:inline-block;font-family:var(--font-heading);font-weight:var(--weight-regular);font-size:var(--btn-font-size);line-height:1.22;text-transform:var(--btn-transform);letter-spacing:var(--tracking-caps);padding:var(--btn-padding);border:1px solid currentColor;border-radius:var(--btn-radius);background:transparent;color:inherit;transition:transform .25s ease,background .25s ease}
.btn:hover{transform:scale(var(--btn-hover-scale))}
.btn--solid{background:var(--color-black);color:var(--color-white);border-color:var(--color-black)}

/* ── 1. hero slider ────────────────────────────────────────────── */
.hero{position:relative;height:calc(100svh - var(--space-8));min-height:520px;background:var(--color-gray-900);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.hero:active{cursor:grabbing}
.hero .slide img{-webkit-user-drag:none;pointer-events:none}
.hero .track.vert{touch-action:pan-x}
.hero .track{display:flex;height:100%;transition:transform .8s cubic-bezier(.4,0,.2,1);will-change:transform}
.hero .track.noanim{transition:none}
.hero .slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.hero .slide img,.hero .slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* caption content: fadeInUp on slide activation (boffi data-animation=fadeInUp) */
@keyframes capUp{from{opacity:0;transform:translateY(var(--space-5))}to{opacity:1;transform:none}}
.hero .slide .cap>*{opacity:0}
/* text rises only AFTER the slide transition (.8s) has settled */
.hero .slide.on .cap>*{animation:capUp .8s ease .95s both}
.hero .slide.on .cap>p{animation-delay:1.15s}
.hero .slide.on .cap>.btn{animation-delay:1.35s}
/* stack modes transition ~1-1.2s — push text later accordingly */
.hero .track.stack .slide.on .cap>*{animation-delay:1.35s}
.hero .track.stack .slide.on .cap>p{animation-delay:1.55s}
.hero .track.stack .slide.on .cap>.btn{animation-delay:1.75s}
.hero .cap{position:absolute;inset:auto 0 0 0;padding:var(--space-8) var(--space-7);color:var(--color-white);background:linear-gradient(to top,rgba(0,0,0,.5),transparent 70%)}
.hero .cap h2{font-size:var(--text-2xl);line-height:var(--leading-tight);font-weight:var(--weight-medium);text-transform:none}
.hero .cap p{margin-top:var(--space-3);max-width:none;font-size:clamp(var(--text-base),2.3vw,var(--text-hero-sub));line-height:var(--leading-tight);font-weight:var(--weight-light);white-space:pre}
.hero .cap h2{white-space:pre}
@media(max-width:768px){.hero .cap p{font-size:var(--text-lg);white-space:pre-line}}
.hero .cap .btn{margin-top:var(--space-5);font-size:var(--text-base);padding:var(--btn-padding-lg)}
.hero .arr{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:var(--space-7);height:var(--space-7);border:0;background:none;color:rgba(237,237,237,.9);display:flex;align-items:center;justify-content:center;transition:opacity .25s,transform .25s;opacity:.9}
.hero .arr:hover{opacity:1;transform:translateY(-50%) scale(1.08)}
.hero .arr--l{left:var(--space-5)}.hero .arr--r{right:var(--space-5)}
.hero .dots{position:absolute;bottom:var(--space-5);right:var(--space-7);z-index:5;display:flex;gap:var(--space-2)}
.hero .dots button{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);border:1px solid var(--color-white);opacity:.9}
.hero .dots button.on{background:var(--color-white)}
.hero .dots.ind-bars{gap:var(--space-1)}
.hero .dots.ind-bars button{width:var(--space-6);height:2px;border-radius:0;border:0;background:rgba(255,255,255,.4);opacity:1}
.hero .dots.ind-bars button.on{background:var(--color-white)}
.hero .dots.ind-num{color:var(--color-white);font-family:var(--font-heading);font-size:var(--text-sm);letter-spacing:var(--tracking-caps);text-shadow:0 0 4px rgba(0,0,0,.4);font-variant-numeric:tabular-nums}
.hero .dots.ind-progress{left:0;right:0;bottom:0;padding:0;display:block;height:2px;background:rgba(255,255,255,.25)}
.hero .dots.ind-progress i{display:block;height:100%;width:0;background:var(--color-white);transition:width .6s ease}
@media(max-width:768px){.hero .cap{padding:var(--space-7) var(--space-5)}.hero .arr{display:none}}

/* ── 2. statement + category slider ────────────────────────────── */
.cats .statement{max-width:44ch;margin:0 auto var(--space-7);text-align:center;text-transform:uppercase;font-family:var(--font-heading);font-size:var(--text-lg);line-height:1.1;font-weight:var(--weight-regular)}
.cats .row{display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--space-5);scrollbar-width:none}
.cats [data-carousel] .car-row{gap:var(--space-4)}
@media(min-width:768px) and (max-width:991px){.cats [data-carousel] .car-row{gap:var(--cats-gap-t,103px)}}
@media(min-width:992px){.cats [data-carousel] .car-row{gap:var(--cats-gap-d,166px)}}
.cats .row::-webkit-scrollbar{display:none}
.cats .card{flex:0 0 auto;width:min(460px,78vw)} /* boffi 실측 460px */
.cats .card .img{aspect-ratio:4/5;overflow:hidden;background:var(--color-gray-100)}
.cats .card img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.cats .card:hover img{transform:scale(1.04)}
.cats .card figcaption{margin-top:var(--space-2);font-family:var(--font-heading);font-size:var(--text-sm);line-height:1.23;text-transform:none}

/* ── 3. film band ──────────────────────────────────────────────── */
.film video{width:100%;height:min(calc(var(--space-9) * 8), 86svh);object-fit:cover;background:var(--color-black)}

/* ── 4. philosophy ─────────────────────────────────────────────── */
.philo{text-align:center;padding-inline:var(--space-5)}
.philo p{max-width:40ch;margin:0 auto;font-size:var(--text-lg);line-height:1.25;font-weight:var(--weight-light)}
.philo .btn{margin-top:var(--space-6)}

/* ── 5. brand / pillar cards ───────────────────────────────────── */
.tri{display:grid;gap:var(--space-4);grid-template-columns:1fr;padding-inline:var(--space-5)}
@media(min-width:768px){.tri{grid-template-columns:repeat(3,1fr)}}
.tri .img{aspect-ratio:16/10;overflow:hidden;background:var(--color-gray-100)}
.tri img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.tri figure:hover img{transform:scale(1.03)}
.tri h3{margin-top:var(--space-3);font-size:var(--text-sm);line-height:1.15;text-transform:none;font-weight:var(--weight-regular)}
.tri figcaption p{margin-top:var(--space-1);font-size:var(--text-sm);line-height:1.15;font-weight:var(--weight-light);color:var(--color-fg-muted);max-width:44ch}

/* ── 6. projects ───────────────────────────────────────────────── */
.projgrid{display:grid;gap:var(--space-4);grid-template-columns:1fr;padding-inline:var(--space-5)}
@media(min-width:768px){.projgrid{grid-template-columns:1fr 1fr}}
.projgrid .img{aspect-ratio:4/3;overflow:hidden;background:var(--color-gray-100)}
.projgrid img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.projgrid a:hover img{transform:scale(1.03)}
.projgrid figcaption{margin-top:var(--space-2);font-family:var(--font-heading);font-size:var(--text-sm);line-height:1.23;text-transform:uppercase}

/* ── 7. catalogues ─────────────────────────────────────────────── */
.cata{display:flex;justify-content:center;gap:var(--space-8);flex-wrap:wrap;padding-inline:var(--space-5)}
.cata figure{width:calc(var(--space-9) * 3)}
.cata .img{aspect-ratio:3/4;overflow:hidden;background:var(--color-black);box-shadow:var(--shadow-lg)}
.cata img{width:100%;height:100%;object-fit:cover;opacity:.85}
.cata .cover{position:relative}
.cata .cover span{position:absolute;inset:var(--space-4);color:var(--color-white);font-family:var(--font-heading);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-caps)}
.cata figcaption{margin-top:var(--space-3);text-align:center;font-family:var(--font-heading);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-caps)}

/* ── 8. news / journal ─────────────────────────────────────────── */
.news{display:grid;gap:var(--space-6);grid-template-columns:1fr;padding-inline:var(--space-5)}
@media(min-width:768px){.news{grid-template-columns:repeat(3,1fr)}}
.news .img{aspect-ratio:3/2;overflow:hidden;background:var(--color-gray-100)}
.news img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.news a:hover img{transform:scale(1.03)}
.news h3{margin-top:var(--space-3);font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-regular);line-height:var(--leading-normal);text-transform:none}
.news p{margin-top:var(--space-2);font-family:var(--font-body);font-size:var(--text-lg);line-height:1.1;font-weight:var(--weight-light);color:var(--color-fg-muted)}

/* ── 9. footer (Boffi mega-footer) ─────────────────────────────── */
footer{padding:var(--space-8) var(--space-5) var(--space-5)}
.ft-grid{display:grid;gap:var(--space-7);grid-template-columns:1fr}
@media(min-width:768px){.ft-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.ft-grid{grid-template-columns:2fr 1fr 1fr 1fr 2fr}}
.ft-grid .logo img{height:var(--logo-ft,var(--space-4));width:auto;margin-bottom:var(--space-4)}
.ft-grid .co{font-family:var(--font-heading);font-size:var(--text-xs);line-height:1.6;color:var(--color-fg-muted)}
.ft-grid h4{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--color-fg-muted);margin-bottom:var(--space-4)}
.ft-grid ul{display:grid;gap:var(--space-2)}
.ft-grid ul a{font-family:var(--font-heading);font-size:var(--text-sm)}
.ft-grid ul a:hover{text-decoration:underline;text-underline-offset:3px}
.nl input[type=email]{font:inherit;font-size:var(--text-sm);width:100%;background:transparent;border:0;border-bottom:var(--border-hairline);border-radius:0;padding:var(--space-1) 0;outline:0}
.nl input[type=email]:focus{border-bottom-width:2px}
.nl .agree{display:flex;gap:var(--space-2);align-items:flex-start;margin-top:var(--space-4);font-family:var(--font-heading);font-size:var(--text-xs);color:var(--color-fg-muted)}
.nl .agree input{margin-top:var(--space-1);accent-color:var(--color-black)}
.nl .btn{margin-top:var(--space-5);font-size:var(--text-xs);padding:var(--space-2) var(--space-6)}
.ft-bottom{margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--color-gray-200);display:flex;flex-wrap:wrap;gap:var(--space-5);justify-content:space-between;font-family:var(--font-heading);font-size:var(--text-xs);color:var(--color-fg-muted)}
.ft-bottom nav{display:flex;gap:var(--space-5);align-items:center}
.ft-bottom a:hover{color:var(--color-fg)}
/* 푸터 SNS 아이콘 (설정에 입력한 채널만) */
.ft-sns{display:inline-flex;gap:var(--space-2);align-items:center;margin-right:var(--space-3);padding-right:var(--space-5);border-right:1px solid var(--color-gray-200)}
.ft-ic{display:inline-flex;align-items:center;justify-content:center;width:var(--space-6);height:var(--space-6);color:var(--color-fg-muted);border:1px solid var(--color-gray-200);border-radius:var(--radius-full);transition:color .2s,border-color .2s,transform .2s}
.ft-ic:hover{color:var(--color-fg);border-color:var(--color-fg);transform:translateY(-1px)}
.ft-ic svg{width:var(--space-4);height:var(--space-4)}
@media(max-width:640px){.ft-bottom nav{flex-wrap:wrap}.ft-sns{border-right:0;padding-right:0}}

/* reveal */
.rv{opacity:0;transform:translateY(var(--space-4));transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero .slide{transition:none}}

/* ═══ sub-pages (v3) ═══ */
/* page head: breadcrumb + centered title (boffi pattern) */
.page-head{position:relative;padding:var(--space-6) var(--space-5);border-bottom:1px solid var(--color-gray-200);text-align:center}
.page-head .crumb{position:absolute;left:var(--space-5);top:var(--space-3)}
.page-head .crumb a:hover{text-decoration:underline}
.page-head h1{font-weight:var(--weight-regular);font-size:var(--text-lg);line-height:1.1}
.intro-copy{max-width:70ch;margin:0 auto;text-align:center;padding:var(--space-7) var(--space-5) 0;font-size:var(--text-base)}
/* slide fit variants */
.hero .slide picture{position:absolute;inset:0;display:block}
.hero .slide picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .slide.fit-blur .bgblur{position:absolute;inset:calc(var(--space-5) * -1);width:auto;height:auto;min-width:110%;min-height:110%;object-fit:cover;filter:blur(24px) brightness(.7);transform:scale(1.1)}
.hero .slide.fit-blur picture img{object-fit:contain}
@media(min-width:992px){
  .hero .slide.fit-split picture{left:55%;right:0;width:auto}
  .hero .slide.fit-split{background:var(--color-gray-900)}
  .hero .slide.fit-split .cap{right:auto;left:0;width:55%;background:none;padding-right:var(--space-8)}
}
/* hero stack variants (fade / zoom / cover) */
.hero .track.stack{display:block;transition:none}
.hero .track.stack .slide{position:absolute;inset:0;pointer-events:none}
.hero .track.fade .slide,.hero .track.zoom .slide{opacity:0;transition:opacity 1.2s ease}
.hero .track.fade .slide.on,.hero .track.zoom .slide.on{opacity:1;pointer-events:auto}
.hero .track.zoom .slide.on img{animation:kb 8s ease-out both}
@keyframes kb{from{transform:scale(1.1)}to{transform:scale(1)}}
.hero .track.cover .slide{transform:translateX(100%);transition:transform 1s cubic-bezier(.4,0,.2,1);z-index:0}
.hero .track.cover .slide.on{transform:none;z-index:2;pointer-events:auto}
.hero .track.cover .slide.prev{transform:none;z-index:1;transition:none}
/* vertical track */
.hero .track.vert{flex-direction:column}
.hero .track.vert .slide{flex:0 0 100%;width:100%}
/* carousel arrows (light bg) */
[data-carousel]{position:relative;overflow:hidden}
[data-carousel="marquee"] .car-row{transition:none !important;will-change:transform}
.car-row{display:flex;gap:var(--space-4);will-change:transform;touch-action:pan-y;user-select:none}
.car-row img,.car-row a{-webkit-user-drag:none;user-select:none}
.car-row{cursor:grab}
.car-row.grabbing{cursor:grabbing}
.car-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:var(--space-7);height:var(--space-7);border:0;background:none;color:var(--color-black);display:flex;align-items:center;justify-content:center;transition:opacity .3s;filter:drop-shadow(0 0 3px rgba(255,255,255,.9))}
.car-arr:hover{transform:translateY(-50%) scale(1.08)}
.car-arr.dis{opacity:.2;pointer-events:none}
[data-carousel].noscroll .car-arr{display:none}
[data-carousel].noscroll .car-row{cursor:default}
.car-arr--l{left:var(--space-5)}.car-arr--r{right:var(--space-5)}
.cats .card{cursor:grab}
/* filters */
.filters{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;padding:var(--space-6) var(--space-5)}
.filters select{font-family:var(--font-heading);font-size:var(--text-sm);padding:var(--space-2) var(--space-5);border:1px solid var(--color-gray-200);border-radius:var(--radius-sm);background:var(--color-white)}
.filters .btn{font-size:var(--text-xs);padding:var(--space-2) var(--space-5)}
.chips{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap;padding:var(--space-6) var(--space-5)}
.chip{font-family:var(--font-heading);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);padding:var(--space-2) var(--space-4);border:1px solid var(--color-gray-200);border-radius:var(--radius-pill);cursor:pointer;background:var(--color-white)}
.chip.is-active{background:var(--color-black);color:var(--color-white);border-color:var(--color-black)}
/* collection editorial rows */
.mat{display:grid;gap:var(--space-5);padding:var(--space-8) var(--space-5);border-bottom:1px solid var(--color-gray-200)}
@media(min-width:992px){.mat{grid-template-columns:7fr 5fr;gap:var(--space-8);align-items:center}.mat:nth-child(even){grid-template-columns:5fr 7fr}.mat:nth-child(even) .mat-img{order:2}}   /* 짝수 행은 사진을 오른쪽에 두되 사진 칸 폭(7fr)은 동일하게 */
.mat-img{aspect-ratio:4/3;overflow:hidden;background:var(--color-gray-100)}
.mat-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.mat:hover .mat-img img{transform:scale(1.03)}
.mat-txt h2{font-size:var(--text-lg);text-transform:uppercase;letter-spacing:var(--tracking-caps);margin-bottom:var(--space-3)}
.mat-txt .sub{font-size:var(--text-base);font-weight:var(--weight-medium);margin-bottom:var(--space-3)}
.mat-txt p{color:var(--color-fg-muted);max-width:48ch}
/* about */
.about-hero{padding:var(--space-6) var(--space-5) 0}
.about-hero img{width:100%;max-height:70svh;object-fit:cover}
.prose{max-width:72ch;margin:0 auto;padding:var(--space-7) var(--space-5)}
.tworow{display:grid;gap:var(--space-5);padding:var(--space-7) var(--space-5);max-width:1100px;margin:0 auto}
@media(min-width:768px){.tworow{grid-template-columns:220px 1fr}}
.tworow .k{font-family:var(--font-heading);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-caps)}
.tworow p{color:var(--color-fg-muted);max-width:60ch}
.gal-car .car-row>div{flex:0 0 72%;aspect-ratio:16/10;overflow:hidden;background:var(--color-gray-100)}
@media(min-width:768px){.gal-car .car-row>div{flex-basis:44%}}
.gal-car img{width:100%;height:100%;object-fit:cover}
/* timeline (big years, boffi our-story pattern) */
.timeline .car-row>div{flex:0 0 70%;padding-right:var(--space-6)}
@media(min-width:768px){.timeline .car-row>div{flex-basis:24%}}
.timeline .yr{font-family:var(--font-heading);font-weight:var(--weight-medium);font-size:calc(var(--text-2xl) * 2);line-height:1;letter-spacing:-0.02em}
.timeline p{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-fg-muted)}
/* project detail */
.pmeta{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-6);font-family:var(--font-heading);font-size:var(--text-sm);max-width:520px;margin:var(--space-5) auto 0;padding:0 var(--space-5)}
.pmeta dt{color:var(--color-fg-muted);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:var(--text-xs)}
.pgal{columns:1;gap:var(--space-4);padding:var(--space-7) var(--space-5)}
@media(min-width:640px){.pgal{columns:2}}
@media(min-width:1200px){.pgal{columns:3}}
.pgal img{width:100%;margin-bottom:var(--space-4);cursor:zoom-in;background:var(--color-gray-100)}
.pnav{display:flex;justify-content:space-between;padding:var(--space-6) var(--space-5);border-top:1px solid var(--color-gray-200)}
/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:88svh;object-fit:contain}
.lb-fig{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin:0}
.lb-cap{color:var(--color-white);font-family:var(--font-heading);font-size:var(--text-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;text-align:center;max-width:80vw;opacity:.85}
.lb button{position:absolute;color:var(--color-white);font-size:var(--text-xl);width:var(--space-8);height:var(--space-8);display:flex;align-items:center;justify-content:center}
.lb-x{top:var(--space-3);right:var(--space-3)}
.lb-p{left:var(--space-2);top:50%;transform:translateY(-50%)}
.lb-n{right:var(--space-2);top:50%;transform:translateY(-50%)}
/* article */
.article{max-width:76ch;margin:0 auto;padding:var(--space-7) var(--space-5)}
.article .aimg{aspect-ratio:16/9;overflow:hidden;background:var(--color-gray-100);margin-bottom:var(--space-6)}
.article .aimg img{width:100%;height:100%;object-fit:cover}
.article h1{font-size:var(--text-xl);line-height:var(--leading-snug);font-weight:var(--weight-medium);margin:var(--space-2) 0 var(--space-5)}
.article .body p{margin-bottom:var(--space-4);color:var(--color-fg-muted)}
/* contact */
.c-grid{display:grid;gap:var(--space-7);max-width:1100px;margin:0 auto;padding:var(--space-7) var(--space-5)}
@media(min-width:992px){.c-grid{grid-template-columns:1fr 1fr}}
.c-grid .cimg{aspect-ratio:16/10;overflow:hidden;background:var(--color-gray-100)}
.c-grid .cimg img{width:100%;height:100%;object-fit:cover}
.c-grid h2{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-caps);margin-bottom:var(--space-4)}
.c-grid .co{font-family:var(--font-heading);font-size:var(--text-sm);line-height:1.8;color:var(--color-fg-muted)}
/* form generic */
.vform .field{display:grid;gap:var(--space-2)}
.vform .field label{font-family:var(--font-heading);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--color-fg-muted)}
.vform .input{font-family:var(--font-body);font-weight:var(--weight-light);font-size:var(--text-base);background:transparent;border:0;border-bottom:var(--border-hairline);border-radius:0;padding:var(--space-1) 0;color:var(--color-fg);outline:0;width:100%;appearance:none}
.vform .input:focus{border-bottom-width:2px}
.vform .input::placeholder{color:var(--color-gray-500)}
.vform select.input{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000'/%3E%3C/svg%3E") no-repeat right center;padding-right:var(--space-4)}
.vform textarea.input{resize:vertical;min-height:calc(var(--space-8))}
.vform{display:grid;gap:var(--space-5);max-width:560px}
.vform .hp{position:absolute;left:-9999px;opacity:0}
.vform .agree{display:flex;gap:var(--space-2);align-items:center;font-family:var(--font-heading);font-size:var(--text-xs);color:var(--color-fg-muted)}
.vform .agree input{accent-color:var(--color-black)}
.form-msg{padding:var(--space-3) 0;color:var(--color-fg)}
.form-msg.err{color:var(--color-fg);text-decoration:underline}
.vform--compact{gap:var(--space-4)}
.hdr nav a.on{text-decoration:underline;text-underline-offset:4px}
/* catalogues page */
.cata-grid{display:flex;justify-content:center;gap:var(--space-8);flex-wrap:wrap;padding:var(--space-7) var(--space-5)}

/* 캡션 자동 줄바꿈 모드 */
.hero.wrap-auto .cap p{white-space:normal;max-width:56ch}
.hero.wrap-auto .cap h2{white-space:normal}

/* ── 헤더 드롭다운 서브메뉴 ── */
.hdr nav .has-sub{position:relative;display:flex;align-items:center}
.hdr nav .has-sub>a{display:inline-flex;align-items:center;gap:var(--space-1)}
/* 캐럿은 ::before 사용 (::after는 호버 밑줄 전용) — flex order로 텍스트 오른쪽 배치 */
.hdr nav .has-sub>a::before{content:"";order:2;width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55;flex:0 0 auto}
.hdr nav .sub{position:absolute;top:100%;left:calc(var(--space-3) * -1);padding-top:var(--space-3);display:none;flex-direction:column;min-width:calc(var(--space-9) * 2)}
.hdr nav .sub-in{background:var(--color-bg);border:1px solid var(--color-gray-200);padding:var(--space-3) 0;display:flex;flex-direction:column}
.hdr nav .sub a{padding:var(--space-2) var(--space-4);white-space:nowrap}
.hdr nav .sub a::after{display:none}
.hdr nav .has-sub:hover .sub,.hdr nav .has-sub:focus-within .sub{display:flex}
.mnav .sub-item{padding-left:var(--space-5);font-size:var(--text-base);color:var(--color-fg-muted)}
/* ── 전역 로더 ── */
#ldr{position:fixed;inset:0;z-index:999;background:var(--color-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-5);transition:opacity .5s ease}
#ldr.done{opacity:0;pointer-events:none}
#ldr img{height:var(--logo-ldr,var(--space-6));width:auto}
#ldr .bar{width:calc(var(--space-9) * 2);height:1px;background:var(--color-gray-200);overflow:hidden}
#ldr .bar i{display:block;height:100%;width:0;background:var(--color-black);transition:width .25s ease}
#ldr .pct{font-family:var(--font-heading);font-size:var(--text-xs);letter-spacing:.08em;color:var(--color-fg-muted);font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){#ldr{display:none}}
/* ── 갤러리 순차 로딩 플레이스홀더 ── */
.pgal img.lz{aspect-ratio:3/2;background:var(--color-gray-100)}
.pgal img{opacity:1;transition:opacity .6s ease}
.pgal img.lz{opacity:.001}

/* ── 방문 예약 위젯 ── */
.bkw{max-width:860px;margin:0 auto;padding-inline:var(--space-5)}
.bk-days{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-3);scrollbar-width:none}
.bk-days::-webkit-scrollbar{display:none}
.bk-day{flex:0 0 auto;font-family:var(--font-heading);font-size:var(--text-xs);text-align:center;padding:var(--space-3) var(--space-3);border:1px solid var(--color-gray-200);border-radius:var(--radius-sm);background:var(--color-white);cursor:pointer;min-width:calc(var(--space-8) + var(--space-2))}
.bk-day b{display:block;font-size:var(--text-sm);font-weight:var(--weight-medium)}
.bk-day small{display:block;color:var(--color-fg-muted);margin-top:2px;font-size:10px}
.bk-day.sel{background:var(--color-black);color:var(--color-white);border-color:var(--color-black)}
.bk-day.sel small{color:var(--color-gray-200)}
.bk-day:disabled{opacity:.45;cursor:not-allowed;background:var(--color-gray-50)}
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--space-2);margin-top:var(--space-5)}
.bk-slot{font-family:var(--font-heading);font-size:var(--text-sm);padding:var(--space-3) 0;border:1px solid var(--color-gray-200);border-radius:var(--radius-sm);background:var(--color-white);cursor:pointer;text-align:center}
.bk-slot.sel{background:var(--color-black);color:var(--color-white);border-color:var(--color-black)}
.bk-slot:disabled{cursor:not-allowed;background:var(--color-gray-50);color:var(--color-gray-500)}
.bk-slot:disabled small{display:block;font-size:9px;letter-spacing:.05em;margin-top:2px}
.bk-form{margin-top:var(--space-6)}
.bk-note{font-family:var(--font-heading);font-size:var(--text-xs);color:var(--color-fg-muted);margin-top:var(--space-3);text-align:center}

/* SNS 아이콘 링크 · 항목 비율 */
.sns-row{display:flex;gap:var(--space-2);margin-top:var(--space-3)}
.sns-row a{color:var(--color-fg-muted);transition:color .2s,transform .2s;padding:var(--space-3);margin:calc(var(--space-3) * -1) 0;display:inline-flex}
.sns-row a:hover{color:var(--color-fg);transform:scale(1.1)}
.tri .img{position:relative}
.tri .img img{position:absolute;inset:0}
.tri .img[style*="aspect-ratio:auto"]{aspect-ratio:auto}

/* 그리드 열 수 지정 (관리자 선택) */
.tri.gcols-1{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
.tri.gcols-2{grid-template-columns:repeat(2,1fr)}
.tri.gcols-3{grid-template-columns:repeat(3,1fr)}
.tri.gcols-4{grid-template-columns:repeat(4,1fr)}
.tri.gcols-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:991px){.tri.gcols-4,.tri.gcols-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.tri.gcols-2,.tri.gcols-3,.tri.gcols-4,.tri.gcols-5{grid-template-columns:repeat(2,1fr)}}

/* ── 폼 결과 모달 ── */
.vmodal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:rgba(0,0,0,.35);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease}
.vmodal.on{opacity:1}
.vmodal .card{background:var(--color-bg);width:min(420px,92vw);padding:var(--space-8) var(--space-6) var(--space-6);text-align:center;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);transform:translateY(var(--space-5)) scale(.96);transition:transform .45s cubic-bezier(.2,.9,.3,1.2)}
.vmodal.on .card{transform:none}
.vmodal .logo{height:var(--space-5);width:auto;margin:0 auto var(--space-5);display:block}
.vmodal .mark{width:calc(var(--space-8) + var(--space-2));height:calc(var(--space-8) + var(--space-2));margin:0 auto var(--space-5)}
.vmodal .mark circle{stroke-dasharray:214;stroke-dashoffset:214}
.vmodal .mark .tick{stroke-dasharray:44;stroke-dashoffset:44}
.vmodal .mark .ex{stroke-dasharray:30;stroke-dashoffset:30}
.vmodal.on .mark circle{animation:vdraw 0.7s ease .15s forwards}
.vmodal.on .mark .tick,.vmodal.on .mark .ex{animation:vdraw 0.45s ease .65s forwards}
@keyframes vdraw{to{stroke-dashoffset:0}}
.vmodal h4{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--weight-medium);line-height:1.25;margin-bottom:var(--space-3)}
.vmodal p{font-size:var(--text-base);color:var(--color-fg-muted);white-space:pre-line}
.vmodal .btn{margin-top:var(--space-6)}
@media(prefers-reduced-motion:reduce){.vmodal,.vmodal .card{transition:none}.vmodal .mark circle,.vmodal .mark .tick,.vmodal .mark .ex{stroke-dashoffset:0;animation:none}}

/* ── 메인: 에디토리얼 소개 (비대칭 2단) ── */
.eyebrow{display:block;font-family:var(--font-heading);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--color-fg-muted)}
.intro{display:grid;gap:var(--space-6);padding-inline:var(--space-5);max-width:1400px;margin:0 auto}
@media(min-width:992px){.intro{grid-template-columns:7fr 5fr;gap:var(--space-8);align-items:start}}
.intro .big{aspect-ratio:3/2;overflow:hidden;background:var(--color-gray-100)}
.intro .big img,.intro .small img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.intro .big:hover img,.intro .small:hover img{transform:scale(1.02)}
@media(min-width:992px){.intro .txt{padding-top:var(--space-6)}}
.intro .txt h2{font-size:var(--text-xl);line-height:var(--leading-snug);font-weight:var(--weight-regular);max-width:22ch;margin:var(--space-3) 0 var(--space-5)}
.intro .txt p{color:var(--color-fg-muted);max-width:44ch;margin-bottom:var(--space-3)}
.intro .txt .btn{margin-top:var(--space-3)}
.intro .small{width:62%;aspect-ratio:4/5;overflow:hidden;background:var(--color-gray-100);margin-top:var(--space-7)}
/* ── 메인: 공간 그리드 ── */
.spaces{display:grid;gap:var(--space-4) var(--space-4);grid-template-columns:repeat(2,1fr);padding-inline:var(--space-5)}
@media(min-width:768px){.spaces{grid-template-columns:repeat(3,1fr);gap:var(--space-5) var(--space-4)}}
.spaces .img{aspect-ratio:4/3;overflow:hidden;background:var(--color-gray-100)}
.spaces img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.spaces a:hover img{transform:scale(1.03)}
.spaces a.lbx{cursor:zoom-in}
.spaces.no-text figure{margin-bottom:0}
.spaces figcaption{margin-top:var(--space-2);display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);font-family:var(--font-heading);font-size:var(--text-sm);line-height:1.23}
.spaces figcaption b{font-weight:var(--weight-regular)}
.spaces figcaption .num{color:var(--color-fg-muted);font-size:var(--text-xs);margin-right:var(--space-1)}
.spaces figcaption span:last-child{color:var(--color-fg-muted);font-size:var(--text-xs);text-align:right}
/* ── 메인: 프로젝트 3열 + 메타 ── */
@media(min-width:768px){.projgrid.three{grid-template-columns:repeat(3,1fr)}}
.projgrid .pm{display:block;margin-top:var(--space-1);font-size:var(--text-xs);color:var(--color-fg-muted);text-transform:none;letter-spacing:0}
/* ── 메인: 쇼룸 안내 밴드 ── */
.shband{display:grid;gap:var(--space-6);padding-inline:var(--space-5);max-width:1400px;margin:0 auto;align-items:center}
@media(min-width:992px){.shband{grid-template-columns:5fr 7fr;gap:var(--space-8)}}
.shband .img{aspect-ratio:16/10;overflow:hidden;background:var(--color-gray-100)}
.shband .img img{width:100%;height:100%;object-fit:cover}
.shband .txt h2{font-size:var(--text-xl);line-height:var(--leading-snug);font-weight:var(--weight-regular);max-width:20ch;margin:var(--space-3) 0 var(--space-4)}
.shband .txt p{color:var(--color-fg-muted);max-width:44ch}
.shband .meta-list{margin-top:var(--space-5);font-family:var(--font-heading);font-size:var(--text-xs);line-height:1.9}
.shband .txt .btn{margin-top:var(--space-5)}
@media(max-width:991px){.shband .img{order:-1}}
/* 뉴스 카드 메타 */
.news .meta{display:block;margin-top:var(--space-3)}
.news .meta+h3{margin-top:var(--space-1)}
/* 카탈로그 PDF 표시 */
.cata-pdf{position:absolute;right:var(--space-3);bottom:var(--space-3);inset-inline-start:auto!important;inset-block-start:auto!important;font-family:var(--font-heading);font-size:var(--text-xs);letter-spacing:var(--tracking-caps);color:var(--color-white);border:1px solid var(--color-white);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}
/* 프로젝트 상세 영상 */
.pvideo{padding:var(--space-6) var(--space-5) 0;max-width:1400px;margin:0 auto}
.pvideo video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--color-black)}
/* 소재 상세 페이지 (collection detail) */
.mat-detail-intro{max-width:64ch;margin:0 auto;padding:var(--space-7) var(--space-5) var(--space-5);text-align:center}
.mat-detail-intro .lead{font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--color-fg-muted);line-height:var(--leading-normal);margin-bottom:var(--space-3)}
.mat-detail-intro .body{color:var(--color-fg-muted);line-height:var(--leading-normal)}
.mat-detail-hero{padding:0 var(--space-5)}
.mat-detail-hero img{width:100%;max-height:80svh;object-fit:cover;background:var(--color-gray-100)}
/* 좌우 여백(관리자 설정 --cgpad)을 둔 그리드 · 가로전체(wide)는 여백을 넘어 꽉 채움 */
.cgal{display:grid;grid-template-columns:1fr;gap:var(--cgg,24px);padding:var(--space-6) var(--cgpad,40px)}
@media(min-width:760px){.cgal{grid-template-columns:repeat(var(--cgc,2),1fr)}}
.cgal figure{margin:0}
.cgal figure.wide{grid-column:1/-1;margin-inline:calc(var(--cgpad,40px) * -1)}
@media(max-width:640px){.cgal{padding-inline:max(16px,calc(var(--cgpad,40px) * .4))}.cgal figure.wide{margin-inline:calc(max(16px,calc(var(--cgpad,40px) * .4)) * -1)}}
/* 섞인 가로·세로 사진을 동일 비율로 통일 (중앙 크롭) → 정돈된 그리드 */
.cgal img{width:100%;aspect-ratio:var(--cratio,3/2);object-fit:cover;display:block;cursor:zoom-in;background:var(--color-gray-100);opacity:1;transition:opacity .6s ease}
.cgal figure.wide img{aspect-ratio:2/1}
@media(max-width:640px){.cgal figure.wide img{aspect-ratio:3/2}}
.cgal img.lz{opacity:.001}
.cgal figcaption{margin-top:var(--space-2);font-family:var(--font-heading);font-size:var(--text-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-fg-muted)}
.mat-img{display:block}

/* 개인정보처리방침 */
.policy .lead{color:var(--color-fg-muted);margin-bottom:var(--space-6)}
.policy section{padding:var(--space-5) 0;border-top:1px solid var(--color-gray-200)}
.policy h2{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-caps);margin-bottom:var(--space-3)}
.policy h2 span{color:var(--color-fg-muted);margin-right:var(--space-2)}
.policy p{color:var(--color-fg-muted);font-size:var(--text-sm);line-height:var(--leading-normal)}

[hidden]{display:none!important}

/* ── About · Our Story 스크롤 연동 타임라인 (4개 이상) ── */
.tl-scroll{position:relative}
.tl-pin .tl-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.tl-parallax .tl-flow{overflow:hidden;padding-block:var(--space-6)}   /* 페럴랙스: 페이지 흐름 그대로, 지나가는 동안 옆으로 이동 */
.tl-scroll .sec-label{padding-inline:var(--space-5);margin-bottom:var(--tl-gap,40px)}
.timeline:not(.tl-scroll) .sec-label{margin-bottom:var(--tl-gap,40px)}
.tl-row{display:flex;gap:var(--tl-item-gap,64px);padding-inline:var(--space-5);will-change:transform;align-items:flex-start}
.timeline .car-row{gap:var(--tl-item-gap,64px)}
.tl-list{list-style:none;margin:0;padding:0;font-size:var(--text-sm);color:var(--color-fg-muted);line-height:1.8;word-break:keep-all}
.tl-list li{margin:0}
.tl-entry+.tl-entry{margin-top:var(--space-3)}
.tl-entry h4{margin:0 0 var(--space-1)}
.tl-item{flex:0 0 min(360px,72vw)}
.tl-item .tl-img,.timeline .tl-img{aspect-ratio:4/3;overflow:hidden;background:var(--color-gray-100);margin-bottom:var(--space-3)}
.tl-item .tl-img img,.timeline .tl-img img{width:100%;height:100%;object-fit:cover;display:block}
.tl-item .yr{font-family:var(--font-heading);font-size:var(--text-2xl);letter-spacing:.04em;line-height:1;margin-bottom:var(--space-2)}
.tl-item h4,.timeline h4{font-size:var(--text-base);font-weight:var(--weight-medium);margin:0 0 var(--space-1)}
.tl-item p{font-size:var(--text-sm);color:var(--color-fg-muted);line-height:1.7;margin:0;word-break:keep-all}
.tl-bar{height:1px;background:var(--color-gray-200);margin:var(--space-6) var(--space-5) 0;position:relative}
.tl-bar i{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--color-black);transition:width .1s linear}
.tl-hint{padding-inline:var(--space-5);margin-top:var(--space-3);color:var(--color-fg-muted);font-size:var(--text-xs);letter-spacing:.06em}
.tl-scroll.done .tl-hint{opacity:0;transition:opacity .4s}
@media(prefers-reduced-motion:reduce){.tl-scroll .tl-sticky{position:static;height:auto}.tl-row{overflow-x:auto}.tl-hint{display:none}}