/* BYJEJU · 하위 페이지와 영상 밴드 전용 규칙. styles.css 다음에 읽힌다. */

.nav>a.on{color:var(--violet);font-weight:700}

/* 문단 사이를 끊는 밴드 이미지 */
.band{width:100%;height:clamp(15rem,34vw,28rem);object-fit:cover}

/* ---------- 페이지 헤드 ---------- */
.page-top{padding:clamp(3.5rem,7vw,6.5rem) 0 clamp(2rem,4vw,3.5rem)}
.page-top.tight{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.page-top .mark{height:clamp(56px,7vw,84px);width:auto;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.page-top h1{font-size:clamp(2rem,4.6vw,3.4rem);color:var(--violet)}
.page-top .lead{margin-top:1.15rem;font-size:1.25rem;color:var(--ink-soft)}

.cols{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}

/* ---------- 브랜드소개 ---------- */
.prose{padding:0 0 clamp(3rem,6vw,5rem)}
.prose .body{max-width:36rem;display:grid;gap:1.5rem;line-height:1.95;color:#3d3d44}
.facts{display:grid;gap:1.5rem;align-content:start;border-top:1px solid var(--line);padding-top:1.75rem}
.facts .lb{font-size:.8125rem;font-weight:700;color:var(--violet)}
.facts .vl{margin-top:.3rem;font-size:1rem}
.facts a{border-bottom:1px solid var(--line)}
.facts a:hover{color:var(--violet);border-color:var(--violet)}

.sister{padding:clamp(3.5rem,7vw,6rem) 0}
.sister h2{font-size:clamp(1.55rem,2.8vw,2.2rem);color:var(--violet)}
.sister .body{margin-top:1.6rem;max-width:34rem;display:grid;gap:1.15rem;line-height:1.95;color:#3d3d44}
.sister-side{align-content:start}
.sister-side .shot{margin:0 0 2rem}
.sister-side .shot img{width:100%;aspect-ratio:16/9;object-fit:cover}
.sister-side .shot figcaption{margin-top:.75rem;font-size:.8125rem;color:var(--ink-soft)}
.pair{margin:0;align-content:start}
.pair .row{display:grid;gap:.45rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.pair dt{font-size:1.25rem;font-weight:700;color:var(--violet)}
.pair dd{margin:0;font-size:1rem;color:var(--ink-soft)}

/* ---------- 오션뷰 타일의 버튼 ---------- */
/* CTA 13 · 사진 위 버튼. 코랄 면이 흰색으로 반전되고 화살표가 미끄러진다. */
.block .cta{position:absolute;left:50%;bottom:clamp(1.5rem,4vw,2.5rem);transform:translateX(-50%);
            display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
            border-radius:999px;background:var(--coral);color:var(--ink);
            padding:clamp(.8rem,1.5vw,1rem) clamp(1.6rem,3vw,2.2rem);
            font-size:clamp(1rem,1.4vw,1.1rem);font-weight:700;letter-spacing:-.015em;
            box-shadow:0 14px 32px -18px rgba(0,0,0,.6);
            transition:background-color .28s,color .28s}
.block a:hover .cta{background:#fff}
.block .cta svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.block a:hover .cta svg{transform:translateX(4px)}

/* ---------- 아티클 ---------- */
.arts{padding:0 0 clamp(3.5rem,7vw,6rem)}
.artgrid{display:grid;grid-template-columns:1fr;gap:clamp(2.25rem,4vw,3rem) 1.75rem}
.artgrid figure{margin:0;overflow:hidden;background:#f7f6f9}
.artgrid img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.artgrid a:hover img{transform:scale(1.035)}
.artgrid time{display:block;margin-top:1.1rem;font-size:.8125rem;font-weight:700;color:var(--violet)}
.artgrid .tt{margin-top:.5rem;font-size:1.25rem;font-weight:700;line-height:1.45;letter-spacing:-.02em;transition:color .2s}
.artgrid a:hover .tt{color:var(--violet)}

/* ---------- 매장 사진 격자 ---------- */
.gallery{padding:clamp(3.5rem,7vw,6rem) 0}
.gallery h2{font-size:clamp(1.55rem,2.8vw,2.2rem)}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:2.25rem}
.gal img{width:100%;height:clamp(10rem,22vw,18rem);object-fit:cover}
.gal img:first-child{grid-column:span 2;height:clamp(14rem,30vw,24rem)}

/* ---------- 매장위치 ---------- */
.locate{position:relative;isolation:isolate;overflow:hidden;padding:clamp(3.5rem,7vw,6rem) 0 clamp(3rem,6vw,5rem)}
.locate .bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.locate::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(10,30,50,.5),rgba(10,30,50,.68))}
.locate-in{position:relative}
.locate-head h1{font-size:clamp(2rem,4.6vw,3.4rem);color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.38)}
.locate-head p{margin-top:1rem;font-size:1.25rem;color:rgba(255,255,255,.93)}
/* CTA 11 · 지도 카드. 지도만 확대되고 버튼 면이 코랄로 찬다. */
.mapcard{position:relative;display:block;overflow:hidden;margin-top:clamp(2rem,4vw,3rem);background:#fff;box-shadow:0 26px 60px -30px rgba(0,0,0,.55)}
.mapcard img{width:100%;height:clamp(17rem,42vw,32rem);object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.mapcard:hover img{transform:scale(1.03)}
.mapcta{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;border-radius:999px;background:#fff;color:var(--violet-deep);font-size:1rem;font-weight:700;padding:.85rem 1.6rem;box-shadow:0 12px 30px -14px rgba(0,0,0,.45);transition:background-color .25s,color .25s}
.mapcard:hover .mapcta{background:var(--coral);color:var(--ink)}
.mapcta svg:last-child{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.mapcard:hover .mapcta svg:last-child{transform:translateX(4px)}
.locate-rows{display:grid;gap:1.5rem;margin-top:clamp(2rem,4vw,2.75rem)}
.locate-rows .lb{font-size:.8125rem;font-weight:700;color:var(--lav)}
.locate-rows .vl{margin-top:.3rem;font-size:1rem;color:#fff}
.locate-rows a{border-bottom:1px solid rgba(255,255,255,.45)}

.ways{padding:clamp(3.5rem,7vw,6rem) 0}
.ways h2{font-size:clamp(1.55rem,2.8vw,2.2rem)}
.ways dl{margin:2.5rem 0 0}
.ways .row{display:grid;gap:.5rem;padding:1.6rem 0;border-top:1px solid var(--line)}
.ways dt{font-size:1.25rem;font-weight:700;color:var(--violet)}
.ways dd{margin:0;font-size:1rem;line-height:1.9;color:#3d3d44}

/* ---------- 입점작가 ---------- */
.wall{padding:0 0 clamp(3.5rem,7vw,6rem)}
.brands{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.brands li{display:grid;place-items:center;background:var(--paper);min-height:clamp(6rem,12vw,8.5rem);padding:1rem;transition:background-color .3s}
.brands li:hover{background:var(--lav-soft)}
.brands span{font-size:clamp(1rem,1.9vw,1.3rem);font-weight:700;letter-spacing:-.03em;color:var(--ink);text-align:center;transition:color .3s}
.brands li:hover span{color:var(--violet)}
.wall .note{margin-top:1.75rem;font-size:1rem;color:var(--ink-soft)}

.btn-ghost{display:inline-flex;align-items:center;gap:.6rem;margin-top:2.75rem;border-bottom:2px solid rgba(232,222,255,.55);padding-bottom:.35rem;font-size:1.25rem;font-weight:700;color:#fff;transition:border-color .3s}
.btn-ghost:hover{border-color:#fff}
.btn-ghost svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.btn-ghost:hover svg{transform:translateX(5px)}

/* ---------- 입점문의 ---------- */
.form{padding:0 0 clamp(3.5rem,7vw,6rem)}
.form h2{font-size:clamp(1.4rem,2.4vw,1.85rem)}
.steps{margin:2rem 0 0}
.steps .row{display:grid;gap:.5rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.steps dt{font-size:1.25rem;font-weight:700;color:var(--violet)}
.steps dd{margin:0;font-size:1rem;line-height:1.9;color:#3d3d44}
.formcard{background:var(--lav-soft);padding:clamp(1.75rem,3.5vw,2.75rem);align-content:start}
.fields{margin:1.75rem 0 0}
.fields .row{display:grid;gap:.2rem;padding:.85rem 0;border-top:1px solid rgba(108,74,182,.16)}
.fields dt{font-size:1rem;font-weight:700}
.fields dd{margin:0;font-size:.8125rem;color:var(--ink-soft)}
/* CTA 12 · 메일 쓰기 */
.btn-mail{position:relative;display:inline-flex;align-items:center;gap:.65rem;overflow:hidden;margin-top:2rem;background:var(--violet);color:#fff;font-size:1rem;font-weight:700;padding:1rem 1.9rem;transition:background-color .3s}
.btn-mail:hover{background:var(--violet-deep)}
.mailnote{margin-top:1rem;font-size:.8125rem;color:var(--ink-soft)}
.mailnote a{border-bottom:1px solid var(--line)}
.mailnote a:hover{color:var(--violet)}

@media (min-width:640px){
  .artgrid{grid-template-columns:repeat(2,1fr)}
  .brands{grid-template-columns:repeat(3,1fr)}
  .locate-rows{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .artgrid{grid-template-columns:repeat(3,1fr)}
  .cols{grid-template-columns:1.35fr 1fr}
  .brands{grid-template-columns:repeat(5,1fr)}
  .locate-rows{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .film video{display:none}
  .film{background:#123048}
}