/* JESTORY
   구조·리듬은 바이제주 시스템과 같고, 컬러 계층만 제스토리 브랜드 팔레트로 바꾼다.
   출처: DESIGN.md v2.0.0 (jestory-brand-guide v1.0.0 §4)

   역할 대응
     Petal White   -> --warm       페이지 바탕
     Jestory Pink  -> --pink       구조색 (로고·큰 제목·테두리)
     Pink Deep     -> --pink-deep  24px 미만 글자의 핑크는 전부 이 값
     Soft Coral    -> --coral      단 하나의 액션색. 항상 '면 채움 + 잉크 글자'로만
     Soft Lavender -> --lav        교대 밴드 1 · 바이제주와의 연결고리
                     --lav-soft    교대 밴드 2 · 카드 바탕
     Charcoal      -> --chrome     푸터 전용 구조색
     Dark Charcoal -> --ink        본문 (순흑을 쓰지 않는다)

   원칙
     - 핑크 위 흰 글씨는 24px 이상에만. 그 아래는 --pink-deep (3.44:1 미달)
     - 코랄은 면 채움 + 잉크 글자로만. 작은 글씨에 절대 쓰지 않는다 (2.16:1)
     - 라운드는 0 / 2px / 999px 세 단계뿐. 중간 라운드를 만들지 않는다
     - 제2 폰트 패밀리를 쓰지 않는다. 세리프 없음
     - 24px 미만 글자에는 양의 자간을 준다
*/
@font-face{font-family:"Gmarket Sans";src:url("fonts/GmarketSansLight.subset.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Gmarket Sans";src:url("fonts/GmarketSansMedium.subset.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Gmarket Sans";src:url("fonts/GmarketSansBold.subset.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --pink:#e8558a; --pink-deep:#9e2f57;
  --coral:#ff8fa3;
  --canvas:#fff;
  --warm:#fff5f7;
  --lav:#f0dcff; --lav-soft:#faf2ff;
  --chrome:#1b1c20;
  --ink:#2d2d2d; --ink-soft:#6f6a76;
  --line:#efe3e8;
  --sans:"Gmarket Sans","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;

  --max:1440px;
  --pad:clamp(1.25rem,4vw,2rem);
  --gap-sec:clamp(4.5rem,9vw,7.5rem);

  --r-card:0; --r-img:2px; --r-input:0; --r-pill:9999px;
  --shadow:rgba(45,45,45,.4) 3px 3px 32px -10px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--warm);color:var(--ink);font-family:var(--sans);
     font-weight:300;font-size:1rem;line-height:1.7;letter-spacing:.012em;
     -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
p{margin:0;word-break:keep-all}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 타이포 ---------- */
/* 한글은 라틴처럼 0.85 리딩을 못 쓴다 (받침이 겹친다).
   두 줄짜리 제목이 많아 1.2 로 띄워 둔다. */
h1,h2,h3{margin:0;word-break:keep-all}
h1,h2{font-weight:300;line-height:1.2;letter-spacing:-.035em}
h1{font-size:clamp(2.5rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4.4vw,3.25rem)}
h3{font-weight:700;font-size:1.375rem;line-height:1.3;letter-spacing:-.02em}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.65;letter-spacing:.02em;color:var(--ink-soft)}
/* eyebrow 는 페이지당 3개를 넘기지 않는다 (brand.css 규칙) */
.eyebrow{font-size:.6875rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
         color:var(--pink-deep);margin:0 0 1.1rem}

::selection{background:var(--lav);color:var(--pink-deep)}
:where(a,button):focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:2px}
html{scrollbar-color:var(--lav) var(--warm)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--warm)}
::-webkit-scrollbar-thumb{background:var(--lav);border:3px solid var(--warm);border-radius:99px}

/* ---------- 버튼: 전부 알약 ---------- */
/* 코랄은 면으로만 쓰고 글자는 잉크. 흰 글자를 얹으면 2.8:1 로 떨어진다. */
.btn{display:inline-flex;align-items:center;gap:.55rem;border:0;cursor:pointer;
     border-radius:var(--r-pill);background:var(--coral);color:var(--ink);
     font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.017em;
     padding:1rem 1.5rem;box-shadow:var(--shadow);
     transition:background-color .25s,transform .25s}
.btn:hover{background:#ff7c94;transform:translateY(-1px)}
.btn svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.btn:hover svg{transform:translateX(4px)}

.btn-line{--fill:var(--pink-deep);
          display:inline-flex;align-items:center;gap:.55rem;border:2px solid var(--pink);
          border-radius:var(--r-pill);color:var(--pink-deep);
          font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.017em;
          padding:.75rem 1.25rem;cursor:pointer;
          background-color:transparent;
          background-image:linear-gradient(var(--fill),var(--fill));
          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}
.btn-line:hover,.btn-line:focus-visible{background-size:100% 100%;color:#fff}


/* ---------- 헤더 ---------- */
/* 히어로가 있는 페이지는 사진 위 투명, 스크롤하면 크림 면이 깔린다.
   하위 페이지는 처음부터 크림 면 고정. */
.hd{position:sticky;top:0;z-index:50;background:var(--warm);border-bottom:1px solid var(--line);
    transition:transform .34s ease,background-color .3s ease,border-color .3s}
.hd.ov{position:absolute;left:0;right:0;background:transparent;border-color:transparent}
.hd.up{transform:translateY(-100%)}
.hd.ov.stuck{position:fixed;background:var(--warm);border-color:var(--line)}

.hd-in{max-width:var(--max);margin:0 auto;padding:.85rem var(--pad);
       display:grid;grid-template-columns:1fr auto;align-items:center;
       column-gap:1rem;row-gap:.55rem}
.brand{justify-self:start;display:grid}
.brand img{height:22px;width:auto}
/* 오버레이 상태에서는 흰 로고, 면이 깔리면 원색 로고. 두 장을 겹쳐 두고 보이기만 바꾼다. */
.hd .lg-w,.hd .lg-c{grid-area:1/1}
.hd:not(.ov) .lg-w,.hd.ov.stuck .lg-w{visibility:hidden}
.hd.ov:not(.stuck) .lg-c{visibility:hidden}

.menu{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
      column-gap:.25rem;row-gap:.1rem}
.menu a{display:grid;place-items:center;text-align:center;padding:.35rem .15rem;
        font-size:.8125rem;font-weight:700;letter-spacing:.03em;color:var(--pink-deep);
        word-break:keep-all;transition:color .2s,opacity .2s}
.hd.ov:not(.stuck) .menu a{color:#fff}
.menu a:hover{opacity:.6}
.menu a.on{text-decoration:underline;text-underline-offset:6px}

.hd-end{grid-row:1;grid-column:2;justify-self:end;display:flex;align-items:center;gap:.5rem}
.hd-end .pill{border:2px solid var(--pink);border-radius:var(--r-pill);
              padding:.42rem 1rem;font-size:.75rem;font-weight:700;letter-spacing:.05em;
              color:var(--pink-deep);transition:background-color .25s,color .25s}
.hd-end .pill:hover{background:var(--pink-deep);color:#fff}
.hd-end .ico{display:grid;place-items:center;width:2rem;height:2rem;color:var(--pink);
             transition:opacity .2s}
.hd-end .ico:hover{opacity:.6}
.hd.ov:not(.stuck) .hd-end .pill{border-color:rgba(255,255,255,.7);color:#fff}
.hd.ov:not(.stuck) .hd-end .pill:hover{background:#fff;color:var(--ink)}
.hd.ov:not(.stuck) .hd-end .ico{color:#fff}

/* ---------- 히어로: 풀블리드 사진 + 사진 위 카피 ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(38rem,78vh,52rem);
      display:grid;grid-template-columns:minmax(0,1fr);align-items:end;
      padding:clamp(4rem,9vw,7rem) 0 clamp(3rem,6vw,5rem)}
.hero .bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(22,18,30,.22);pointer-events:none}
.hero>.wrap{position:relative;z-index:2;width:100%}
.hero-copy{max-width:46rem}
/* 제2 폰트 패밀리를 쓰지 않는다 (DESIGN.md §Typography).
   목소리를 가르는 건 서체가 아니라 웨이트와 자간이다. */
.hero-copy .eyebrow{font-weight:500;
                    text-transform:none;font-size:clamp(1rem,1.6vw,1.25rem);
                    letter-spacing:.12em;color:#fff;margin-bottom:1.15rem;
                    text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.65)}
.hero-copy h1{color:#fff;font-weight:500;font-size:clamp(2.1rem,5.2vw,4.25rem);
              text-shadow:0 1px 2px rgba(0,0,0,.55),0 3px 14px rgba(0,0,0,.6),
                          0 8px 40px rgba(0,0,0,.45)}
.hero-note{margin-top:1.5rem;color:rgba(255,255,255,.9);font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.65;letter-spacing:.01em;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero-actions{display:flex;align-items:center;gap:1.35rem;margin-top:1.8rem}
.hero-actions .btn{box-shadow:0 8px 28px rgba(25,17,31,.28)}
.hero-link{display:inline-flex;align-items:center;gap:.55rem;color:#fff;font-size:.95rem;font-weight:700;letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.65);padding:.35rem 0;transition:border-color .2s,opacity .2s}
.hero-link:hover{border-color:#fff;opacity:.75}
.hero-link svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.hero-link:hover svg{transform:translateX(4px)}
.hero-meta{display:flex;align-items:center;gap:.75rem;margin-top:clamp(2.5rem,6vw,5rem);color:rgba(255,255,255,.8);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero-meta i{width:3px;height:3px;border-radius:50%;background:var(--coral)}
.hero-scroll{position:absolute;right:var(--pad);bottom:clamp(2rem,5vw,4rem);z-index:3;display:flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.82);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;writing-mode:vertical-rl;transition:color .2s}
.hero-scroll:hover{color:#fff}
.hero-scroll svg{animation:scrollNudge 1.8s ease-in-out infinite}
@keyframes scrollNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* 카피가 사진에 묻히지 않도록 순서대로 올라온다.
   .ready 는 JS 가 히어로 사진 로드 후 붙인다 (JS 없으면 그냥 보인다). */
.hero-copy h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero-copy h1 .ln>span{display:block}
.hero.ready h1 .ln>span{animation:lnUp .9s cubic-bezier(.16,1,.3,1) both}
.hero.ready h1 .ln:nth-child(2)>span{animation-delay:.14s}
.hero.ready .rv{animation:rvUp .8s cubic-bezier(.16,1,.3,1) both}
.hero.ready .rv-0{animation-delay:0s}
.hero.ready .hero-note{animation-delay:.2s}
.hero.ready .hero-actions{animation-delay:.28s}
.hero.ready .hero-meta{animation-delay:.38s}
@keyframes lnUp{from{transform:translateY(115%);opacity:0} to{transform:none;opacity:1}}
@keyframes rvUp{from{transform:translateY(14px);opacity:0} to{transform:none;opacity:1}}

/* ---------- 섹션 제목 스크롤 등장 ---------- */
/* rise-on 은 JS 가 붙인다. JS 가 없으면 아무 규칙도 안 걸려 그냥 보인다.
   transform 과 opacity 만 움직인다. */
.rise-on{opacity:0;transform:translateY(18px);
         transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.rise-on.in{opacity:1;transform:none}

/* ---------- 섹션 밴드 ---------- */
section{padding-block:var(--gap-sec)}
.band-lav{background:var(--lav)}
.sec-head{max-width:44rem;margin-bottom:clamp(2.25rem,4vw,3.5rem)}
.sec-head .lead{margin-top:1.1rem}


/* ---------- 방문: 세로 영상 + 지도 ---------- */
.visit-film{margin:0;border-radius:var(--r-img);overflow:hidden;background:#141416;
            box-shadow:var(--shadow)}
.visit-film video,.visit-film img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.visit-map{position:relative;display:block;overflow:hidden;border-radius:var(--r-img);
           background:var(--lav-soft);box-shadow:var(--shadow)}
.visit-map img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block;
               transition:transform .7s cubic-bezier(.16,1,.3,1)}
/* 지도는 확대하지 않는다. 좌하단 NAVER 로고가 잘리면 안 된다 */
.visit-map:hover .mz{transform:none}
.visit-map:hover img:not(.mz){transform:scale(1.03)}
/* 키를 넣으면 iframe 으로 바뀐다 */
iframe.visit-map{width:100%;aspect-ratio:4/5;border:0}

/* ---------- 지도 섹션: 제주 배경을 옅게 깔고 그 위에 ---------- */
.mapsec{position:relative;isolation:isolate;overflow:hidden}
.mapsec .bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
/* 배경은 거의 지워질 만큼 눌러 둔다. 읽히는 건 글과 지도여야 한다. */
.mapsec::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(243,238,255,.86)}
.mapsec>.wrap{position:relative;z-index:2}

/* 지도 카드: 줌인/줌아웃 두 장을 겹쳐 두고 보이는 쪽만 바꾼다 */
.visit-map .mz{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.visit-map .mz.on{opacity:1;position:relative}
.mapwrap{display:grid;gap:.75rem}
.mapshot{position:relative}
.map-tools{display:flex;align-items:center;justify-content:flex-end}
/* 지도 위에 얹는 +- 컨트롤. 지도 서비스의 관례대로 우하단에 세로로. */
.map-zoom{position:absolute;right:.75rem;bottom:.75rem;z-index:2;
          display:grid;border-radius:10px;overflow:hidden;
          box-shadow:0 6px 18px -8px rgba(20,16,40,.5)}
.map-zoom button{display:grid;place-items:center;width:2.25rem;height:2.25rem;
                 border:0;background:rgba(255,249,240,.96);color:var(--ink);
                 cursor:pointer;transition:background-color .2s,color .2s}
.map-zoom button+button{border-top:1px solid var(--line)}
.map-zoom button:hover:not(:disabled){background:var(--pink-deep);color:#fff}
.map-zoom button:disabled{color:rgba(45,45,45,.28);cursor:default}
.map-more{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--pink);
          border-radius:var(--r-pill);padding:.4rem .9rem;font-size:.75rem;font-weight:700;
          letter-spacing:.03em;color:var(--pink-deep);
          transition:background-color .25s,color .25s}
.map-more:hover{background:var(--pink-deep);color:#fff}
.map-more svg{width:13px;height:11px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.map-more:hover svg{transform:translateX(3px)}
/* ---------- 2단 스플릿 ---------- */
.split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.split .body{display:grid;align-content:start;gap:1.25rem;max-width:34rem;line-height:1.85}
/* 라벤더 밴드 위에서는 보라 강조가 배경과 붙어 읽기 어렵다. 굵기만 남기고 잉크로. */
.split .body b{font-weight:700;color:var(--ink)}
/* 지도 섹션은 연보라 위라 브랜드색이 또렷하게 읽힌다 */
.mapsec .body b{color:var(--pink-deep)}
.split h2{margin-bottom:.4rem}
/* 버튼은 필(999px), 사진만 2px. 이미지 라운드를 버튼에 같이 걸면 2px 사각 버튼이 된다. */
.split .btn,.split .btn-line{margin:0;border-radius:var(--r-pill);overflow:hidden}
.split .split figure{margin:0;border-radius:var(--r-img);overflow:hidden}
.split figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

/* ---------- 카드 그리드: 사진이 곧 카드 ---------- */
/* 배경도 테두리도 그림자도 없다. 사진과 글자만 남긴다. */
.cards{display:grid;gap:clamp(2.25rem,4vw,3rem) clamp(1.5rem,2.5vw,2rem)}
.cards figure{margin:0 0 1.25rem;border-radius:var(--r-img);overflow:hidden}
.cards img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
           transition:transform .6s cubic-bezier(.16,1,.3,1)}
.cards a:hover img{transform:scale(1.035)}
.cards h3{margin-bottom:.5rem}
.cards p{font-size:1rem;line-height:1.6;color:var(--ink-soft);margin-bottom:1rem}

/* 매장 카드: 설명 길이가 제각각이라 지도 버튼이 들쭉날쭉해진다.
   카드를 세로 플렉스로 세우고 버튼만 아래로 밀어 한 줄에 맞춘다. */
.cards.four li{display:flex}
.cards.four>li>a{display:flex;flex-direction:column;width:100%}

/* 네이버 지도: 핀 아이콘을 단 알약. 카드에 올리면 보라로 채워진다 */

/* 지점 카드는 모바일에서 세로로 쌓으면 3000px 가 넘는다.
   가로 스냅 레일로 바꿔 한 화면에 한 장씩 넘겨 보게 한다. */
@media (max-width:1023px){
  .cards.four{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74%;
              overflow-x:auto;scroll-snap-type:x mandatory;
              margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) .5rem;
              scrollbar-width:none;-ms-overflow-style:none}
  .cards.four::-webkit-scrollbar{display:none}
  .cards.four>li{scroll-snap-align:start}
}

/* ---------- 세로 롤링 밴드 ---------- */
.roll{padding:0}
.roll-media{position:relative;overflow:hidden;width:100%;aspect-ratio:4/3;background:#141416}
.roll-track{position:relative;height:100%;margin:0;padding:0;list-style:none}
.roll-track li{position:absolute;inset:0;
               transform:translateY(calc((var(--k) - var(--i,0)) * 100%));
               transition:transform .62s cubic-bezier(.16,1,.3,1)}
.roll.noanim .roll-track li{transition:none}
.roll-media img{width:100%;height:100%;object-fit:cover;display:block}
.roll-side{display:grid;gap:clamp(1.1rem,2.2vw,1.75rem);align-items:center;
           padding-top:clamp(1.75rem,3.5vw,2.5rem);padding-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.roll-words{position:relative;overflow:hidden;height:clamp(3.5rem,6.5vw,5rem)}
.roll-words .roll-track li{display:grid;align-content:center}
.roll-words p{font-size:clamp(1.2rem,2.6vw,1.9rem);font-weight:300;line-height:1.35;
              letter-spacing:-.03em;color:var(--ink)}
.roll-ctrl{display:flex;align-items:center;gap:.9rem}
.roll-ctrl button{display:grid;place-items:center;width:2.75rem;height:2.75rem;
                  border:2px solid var(--pink);border-radius:var(--r-pill);
                  background:none;color:var(--pink);cursor:pointer;
                  transition:background-color .25s,color .25s}
.roll-ctrl button:hover{background:var(--pink-deep);color:#fff}
.roll-ctrl svg{transform:rotate(90deg)}
.roll-no{font-size:.875rem;letter-spacing:.06em;color:var(--ink-soft)}
.roll-no b{color:var(--ink);font-size:1.05rem;font-weight:700}
.roll-no span{margin-left:.35rem}

/* ---------- 작가: 핑크 면 ---------- */
/* 본문(16px)이 얹히는 면이라 pink 가 아니라 pink-deep 이다.
   pink 위 흰 글씨는 3.44:1 로 미달하고, pink-deep 은 7.0:1 로 통과한다. */
.art{position:relative;isolation:isolate;overflow:hidden;background:var(--pink-deep);color:#fff}
.art .bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.art::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(158,47,87,.93)}
.art>.wrap{position:relative;z-index:2}
.art h2{color:#fff;max-width:22ch}
.art dl{margin:clamp(2.5rem,5vw,3.5rem) 0 0;display:grid;gap:0}
.art .row{display:grid;gap:.5rem;padding:1.75rem 0;border-top:1px solid rgba(255,255,255,.34)}
/* 세 항목이 같이 들어오므로 살짝 어긋나게 올린다 */
.art .row:nth-child(2).rise-on{transition-delay:.09s}
.art .row:nth-child(3).rise-on{transition-delay:.18s}
.art dt{font-size:1.25rem;font-weight:700;color:#fff;letter-spacing:-.02em}
.art dd{margin:0;font-size:1rem;line-height:1.8;color:rgba(255,255,255,.92)}
.art .btn-line{--fill:#fff;margin-top:clamp(2rem,4vw,3rem);
               border-color:rgba(255,255,255,.75);color:#fff}
.art .btn-line:hover,.art .btn-line:focus-visible{color:var(--pink-deep)}

/* ---------- 푸터 ---------- */
.ft{background:var(--chrome);color:var(--warm);padding:clamp(4rem,7vw,5.5rem) 0 2.5rem}
.ft-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 1.25rem}
.ft-brand{grid-column:1/-1}
.ft-brand img{height:40px;width:auto}
.ft-brand p{margin-top:1.25rem;font-size:1.25rem;font-weight:300;line-height:1.45;letter-spacing:-.02em}
.ft-since{margin-top:.8rem;font-size:.8125rem;letter-spacing:.017em;color:rgba(232,222,255,.7)}
.ft h2{font-size:.6875rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
       color:rgba(232,222,255,.72)}
.ft-grid li{margin-top:.7rem}
.ft-grid li a,.ft address p{font-size:1rem;letter-spacing:.012em;color:rgba(232,222,255,.88);
                            transition:color .2s}
.ft-grid li a:hover,.ft address a:hover{color:var(--warm)}
.ft address{font-style:normal;margin-top:1.15rem;display:grid;gap:.3rem}
.ft .ig{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;
        font-size:1rem;color:rgba(232,222,255,.88)}
.ft .ig:hover{color:var(--warm)}
.ft hr{border:0;border-top:1px solid rgba(232,222,255,.22);margin:clamp(2.5rem,5vw,3.5rem) 0 1.5rem}
.ft .biz{font-size:.8125rem;line-height:1.8;letter-spacing:.012em;color:rgba(232,222,255,.6)}

/* ---------- 반응형 ---------- */
@media (min-width:640px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .roll-media{aspect-ratio:16/9}
}
@media (min-width:1024px){
  /* 한 줄로 읽혀야 하는 소개문. 좁은 화면에서는 원래대로 접힌다 */
  .sec-head.wide{max-width:none}
  .hd-in{grid-template-columns:auto 1fr auto;column-gap:clamp(1.5rem,3vw,3rem);row-gap:0;
         padding-block:1.1rem}
  .brand img{height:26px}
  .menu{grid-column:2;grid-row:1;grid-template-columns:repeat(6,auto);
        justify-content:center;column-gap:clamp(1rem,2.2vw,2rem)}
  .menu a{font-size:.875rem;padding:.2rem 0}
  .roll-media{aspect-ratio:21/9}
  .roll-side{grid-template-columns:1fr auto;column-gap:clamp(2rem,4vw,4rem)}
    .split{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5rem)}
  .split.wide{grid-template-columns:1.15fr 1fr}
  .cards{grid-template-columns:repeat(3,1fr)}
  .cards.four{grid-template-columns:repeat(4,1fr)}
  .ft-grid{grid-template-columns:1.6fr 1fr 1.2fr;gap:2rem}
  .ft-brand{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}