/* BYJEJU · 하위 페이지 규칙. styles.css 다음에 읽힌다.
   같은 시스템을 따른다 — 알약 버튼, 20px 라운드 사진, 교대 밴드, 가벼운 큰 제목. */

/* 문단 사이를 끊는 밴드 이미지. 풀블리드, 라운드 없음. */
.band{width:100%;height:clamp(16rem,36vw,30rem);object-fit:cover}
.band[src*="hero-real"]{object-position:50% 22%}

/* ---------- 페이지 헤드 ---------- */
.page-top{padding:clamp(4.5rem,9vw,7rem) 0 clamp(2rem,4vw,3rem)}
.page-top.tight{padding-bottom:clamp(1.5rem,3vw,2.25rem)}
.page-top .mark{height:clamp(30px,3.4vw,40px);width:auto;margin-bottom:clamp(1.5rem,2.6vw,2rem)}
.page-top .lead{margin-top:1.15rem;max-width:40rem}

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

/* ---------- 브랜드소개 ---------- */
.prose{padding:0 0 clamp(3.5rem,7vw,6rem)}
.prose .body{max-width:36rem;display:grid;align-content:start;gap:1.5rem;line-height:1.9}
/* 본문 핵심어. 굵기와 바이올렛으로만 짚는다 (배경 칠·밑줄 없음).
   크림 배경 위 대비 7.2:1. */
.prose .body b,.sister .body b{font-weight:700;color:var(--pink-deep)}
.facts{display:grid;gap:1.5rem;align-content:start}
/* 사진 네 장이 세로로 넘어간다. 홈 롤링 밴드와 같은 --k/--i 방식을 쓴다. */
.shots{position:relative;overflow:hidden;margin:0 0 .5rem;aspect-ratio:4/5;
       border-radius:var(--r-img);background:var(--lav-soft)}
.shots .roll-track{position:relative;height:100%;margin:0;padding:0;list-style:none}
.shots img{width:100%;height:100%;object-fit:cover;display:block}

.sister{background:var(--lav-soft);padding-block:clamp(4rem,8vw,6.5rem)}
.sister .body{margin-top:1.6rem;max-width:34rem;display:grid;align-content:start;gap:1.15rem;line-height:1.9}
.sister-side{align-content:start}
.sister-side .shot{margin:0 0 2rem;border-radius:var(--r-img);overflow:hidden}
.sister-side .shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* ---------- 아티클 ---------- */
.arts{padding:0 0 clamp(4rem,8vw,6.5rem)}
.artgrid{display:grid;grid-template-columns:1fr;gap:clamp(2.25rem,4vw,3rem) clamp(1.5rem,2.5vw,2rem)}
.artgrid figure{margin:0 0 1.1rem;overflow:hidden;border-radius:var(--r-img);background:var(--lav-soft)}
.artgrid img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;
             transition:transform .6s cubic-bezier(.16,1,.3,1)}
.artgrid a:hover img{transform:scale(1.035)}
.artgrid time{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.32em;
              text-transform:uppercase;color:var(--pink-deep)}
.artgrid .tt{margin-top:.6rem;font-size:1.25rem;font-weight:700;line-height:1.4;
             letter-spacing:-.02em;transition:color .2s}
.artgrid a:hover .tt{color:var(--pink-deep)}

/* ---------- 매장 사진 격자 ---------- */
.gallery{background:var(--lav-soft);padding-block:clamp(4rem,8vw,6.5rem)}
.gallery>.wrap>.lead{margin-top:1rem;max-width:44rem}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
.gal img{width:100%;height:clamp(10rem,22vw,18rem);object-fit:cover;border-radius:var(--r-img)}
/* 사진이 한꺼번에 들어오므로 순서대로 살짝 어긋나게 */
.gal img:nth-child(2).rise-on{transition-delay:.07s}
.gal img:nth-child(3).rise-on{transition-delay:.14s}
.gal img:nth-child(4).rise-on{transition-delay:.21s}
.gal img:nth-child(5).rise-on{transition-delay:.28s}
.gal img:first-child{grid-column:span 2;height:clamp(14rem,32vw,26rem)}

/* ---------- 매장위치 ---------- */
.locate{position:relative;isolation:isolate;overflow:hidden;
        padding:clamp(4.5rem,9vw,7rem) 0 clamp(3.5rem,7vw,5.5rem)}
.locate .bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.locate::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(16,20,34,.52)}
.locate-in{position:relative;z-index:2}
.locate-head h1{color:var(--warm)}
.locate-head .eyebrow{color:var(--lav)}
.locate-head p{margin-top:1.1rem;font-size:clamp(1.05rem,1.6vw,1.25rem);color:rgba(255,249,240,.94)}
.mapcard{display:block;text-align:center;overflow:hidden;border-radius:var(--r-img);
         margin-top:clamp(2rem,4vw,3rem);padding-bottom:1.25rem;
         background:var(--warm);box-shadow:var(--shadow)}
/* 지도는 잘라내지 않는다. 잘리면 지명이 반쯤 끊기고 좌하단 NAVER 로고도 날아간다.
   그래서 높이를 고정하지 않고 이미지 비율(3:2)을 그대로 지킨다. */
.mapcard img{width:100%;aspect-ratio:2/1;height:auto;object-fit:cover;display:block}
/* 지도 이미지 아래에 놓인다. 평소엔 투명, 카드에 마우스를 올리면 색이 차오른다. */
.mapcta{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
        margin-top:1rem;border:2px solid var(--pink);border-radius:var(--r-pill);
        color:var(--pink-deep);font-size:.8125rem;font-weight:700;letter-spacing:.02em;
        padding:.55rem 1.1rem;
        background-color:transparent;
        background-image:linear-gradient(var(--pink-deep),var(--pink-deep));
        background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
        transition:background-size .4s cubic-bezier(.16,1,.3,1),color .28s ease}
.mapcta svg{width:13px;height:13px}
.mapcard:hover .mapcta,.mapcard:focus-visible .mapcta{background-size:100% 100%;color:var(--warm)}
.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:.6875rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
                 color:var(--lav)}
.locate-rows .vl{margin-top:.4rem;font-size:1rem;color:var(--warm)}
.locate-rows a{border-bottom:1px solid rgba(255,249,240,.45)}

.ways{padding-block:clamp(4rem,8vw,6.5rem)}
.ways dl{margin:clamp(2rem,4vw,3rem) 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(--pink-deep);letter-spacing:-.02em}
.ways dd{margin:0;font-size:1rem;line-height:1.8;color:var(--ink-soft)}

/* ---------- 입점작가 ---------- */
.wall{padding:0 0 clamp(4rem,8vw,6.5rem)}
.wall .note{margin-top:1.75rem;font-size:1rem;color:var(--ink-soft)}

/* 입점작가: 가로 롤링 두 줄. 줄마다 같은 목록을 두 벌 이어 붙이고
   -50% 로 밀어 끊김 없이 순환한다. transform 만 움직인다. */
.marquee{display:grid;gap:.75rem;overflow:hidden;
         -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
         mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.mq-row{display:flex;width:max-content;animation:mq 46s linear infinite}
.mq-row.rev{animation-direction:reverse}
.marquee:hover .mq-row{animation-play-state:paused}
.mq-track{display:flex;gap:.75rem;padding-right:.75rem}
.mq-track li{display:grid;place-items:center;background:var(--lav-soft);
             border-radius:var(--r-card);min-width:clamp(9rem,15vw,12rem);
             min-height:clamp(5rem,8vw,6.5rem);padding:1rem 1.5rem;
             transition:background-color .3s}
.mq-track li:hover{background:var(--lav)}
.mq-track span{font-size:clamp(.9375rem,1.5vw,1.15rem);font-weight:700;letter-spacing:-.03em;
               color:var(--ink);text-align:center;white-space:nowrap}
@keyframes mq{from{transform:none} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  /* 전역 규칙이 duration 을 0 으로 만들면 무한 반복이 깜빡인다. 아예 멈춘다. */
  .mq-row{animation:none!important}
  .marquee{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
}

/* ---------- 입점문의 ---------- */
.form{padding:0 0 clamp(4rem,8vw,6.5rem)}
.form h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.steps{margin:clamp(1.75rem,3vw,2.25rem) 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(--pink-deep);letter-spacing:-.02em}
.steps dd{margin:0;font-size:1rem;line-height:1.8;color:var(--ink-soft)}
.formcard{background:var(--lav-soft);border-radius:var(--r-card);
          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,.18)}
.fields dt{font-size:1rem;font-weight:700}
.fields dd{margin:0;font-size:.8125rem;letter-spacing:.017em;color:var(--ink-soft)}
.mailnote{margin-top:1rem;font-size:.8125rem;letter-spacing:.017em;color:var(--ink-soft)}
.mailnote a{border-bottom:1px solid var(--line)}
.mailnote a:hover{color:var(--pink-deep)}

/* ---------- 해녀복 업사이클링: 인트로 ---------- */
.rc-hero{background:var(--lav-soft);padding-block:clamp(4.5rem,9vw,7rem)}
/* eyebrow 의 .32em 자간은 라틴 기준이다. 한글에 그대로 쓰면 글자가 흩어진다. */
.rc-hero .eyebrow{letter-spacing:.14em}
.rc-hero .grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.rc-hero .body{margin-top:1.8rem;max-width:33rem;display:grid;align-content:start;
               gap:1.25rem;line-height:1.9}
.rc-hero img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
             border-radius:var(--r-img)}
.rc-list{padding-block:clamp(4rem,8vw,6.5rem)}
/* 제목 왼쪽, 온라인몰 버튼 오른쪽. 좁은 폭에서는 아래로 접힌다. */
.rc-list .top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
              gap:1.25rem 1.5rem;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.rc-list .note{font-size:.8125rem;letter-spacing:.017em;color:var(--ink-soft)}

/* ---------- 상품 격자 (해녀복 업사이클링) ---------- */
.top{margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.pg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,3.5vw,2.75rem) clamp(1.25rem,2.5vw,1.75rem)}
.pg figure{margin:0 0 1rem;overflow:hidden;border-radius:var(--r-img)}
/* 원본 여백을 잘라 제품 크기를 맞춰 두었으므로 정사각 타일에 그대로 채운다 */
.pg img{aspect-ratio:1/1;width:100%;height:auto;object-fit:cover;background:var(--lav-soft)}
.pg .nm{font-size:1rem;font-weight:500;line-height:1.5}

.cate{display:inline-flex;align-items:center;gap:.55rem;font-size:1.125rem;font-weight:700;
      letter-spacing:-.02em;color:var(--pink-deep)}
.cate u{text-decoration:none;border-bottom:2px solid var(--lav);padding-bottom:.2rem;
        transition:border-color .3s}
.cate:hover u{border-color:var(--pink)}
.cate svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.cate:hover svg{transform:translateX(5px)}
.rc-close{width:100%;height:clamp(15rem,32vw,26rem);object-fit:cover}

@media (min-width:640px){
  .artgrid{grid-template-columns:repeat(2,1fr)}
    .locate-rows{grid-template-columns:repeat(2,1fr)}
  .pg{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1024px){
  .artgrid{grid-template-columns:repeat(3,1fr)}
  .cols{grid-template-columns:1.3fr 1fr}
    .locate-rows{grid-template-columns:repeat(4,1fr)}
  .pg{grid-template-columns:repeat(4,1fr)}
  .rc-hero .grid{grid-template-columns:1.15fr 1fr}
}

/* ---------- 테디제주: 바이제주가 만든 캐릭터 인형 브랜드 ----------
   앞뒤가 웜/연보라 밴드라 이 구간은 바탕색 그대로 두고,
   캐릭터 카드에만 연보라를 얹어 리듬을 만든다. */
.teddy{padding-block:clamp(3.5rem,7vw,5.5rem)}
.teddy-top{display:grid;gap:clamp(2rem,4vw,3rem);align-items:center}
.teddy-shot{margin:0;border-radius:var(--r-img);overflow:hidden}
.teddy-shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.teddy-top .body{display:grid;align-content:start;gap:1.15rem;line-height:1.9}
.teddy-top .body b{font-weight:700;color:var(--pink-deep)}
.teddy-top .btn-line{justify-self:start;margin-top:.5rem}
/* 캐릭터 카드: 세로로 쌓으면 화면을 길게 먹는다.
   지점 카드와 같은 방식으로, 좁은 화면에서는 가로 스냅 레일로 넘겨 본다. */
.teddy-cast{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) calc(var(--pad) * -1) 0;
            padding:0 var(--pad) .5rem;
            display:grid;gap:1rem;grid-auto-flow:column;grid-auto-columns:78%;
            overflow-x:auto;scroll-snap-type:x mandatory;
            scrollbar-width:none;-ms-overflow-style:none}
.teddy-cast::-webkit-scrollbar{display:none}
.teddy-cast>li{scroll-snap-align:start}
.teddy-cast li{background:var(--lav-soft);border-radius:var(--r-card);
               padding:clamp(1.5rem,3vw,2rem) clamp(1.25rem,2.5vw,1.75rem);
               display:grid;justify-items:center;text-align:center;gap:.45rem}
/* 얼굴은 배경이 없는 그림이라 높이만 맞춰 세운다 */
.teddy-cast img{height:clamp(5rem,10vw,7rem);width:auto;margin-bottom:.4rem}
.teddy-cast h3{font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:500;
               color:var(--pink-deep);letter-spacing:.01em}
/* 코랄은 작은 글씨에 못 쓴다(연보라 위 2.44:1, AA 미달).
   진한 바이올렛으로 7.58:1 을 확보하고 제목 바이올렛과도 층이 갈린다. */
.teddy-cast .tag{font-size:.8rem;font-weight:700;letter-spacing:.03em;
                 color:var(--pink-deep)}
.teddy-cast li>p:last-child{font-size:.95rem;line-height:1.75;color:var(--ink-soft)}
.teddy-cast li:nth-child(2).rise-on{transition-delay:.08s}
.teddy-cast li:nth-child(3).rise-on{transition-delay:.16s}
@media (min-width:768px){
  .teddy-cast{grid-auto-columns:46%}
}
@media (min-width:1024px){
  /* 셋 다 한눈에 들어오는 폭에서는 레일을 풀고 3단으로 세운다 */
  .teddy-cast{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);
              grid-auto-columns:auto;gap:1.25rem;overflow:visible;
              margin-inline:0;padding:0}
}
@media (min-width:1024px){
  .teddy-top{grid-template-columns:1.1fr .9fr;gap:clamp(2.5rem,4vw,3.5rem)}
}