/* (주)프리미엄 — 다크 에디토리얼
 * 잉크블랙 + 시그널 오렌지 / 컨덴스드 디스플레이 + 산세리프 본문
 */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&display=swap');

:root {
  --ink: #0b0b0d;
  --ink-2: #131417;
  --ink-3: #1c1e23;
  --line: #2a2d34;
  --paper: #ece9e2;
  --paper-dim: #a9a69f;
  --paper-mute: #6f6d69;
  --signal: #ff5b1f;
  --indigo: #4a63d8;
  --radius: 2px;
  --maxw: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-a-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* 그레인 오버레이 */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- 헤더 ---------- */
header.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,11,13,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
  height: 68px; display: flex; align-items: center; justify-content: space-between;
}
.brandmark { display: flex; align-items: baseline; gap: 10px; }
.brandmark .ko {
  font-family: var(--font-a-impact);
  font-size: 21px; letter-spacing: -.02em; color: var(--paper);
}
.brandmark .sub {
  font-size: 10px; letter-spacing: .22em; color: var(--paper-mute); text-transform: uppercase;
}
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a {
  font-size: 13px; letter-spacing: .04em; color: var(--paper-dim);
  transition: color .25s var(--ease); position: relative; padding: 4px 0;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--signal); transition: width .3s var(--ease);
}
.nav-links a:hover { color: var(--paper); }
.nav-links a:hover::after { width: 100%; }

/* ---------- 히어로 ---------- */
.hero { position: relative; padding: 120px 0 96px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: -30%; right: -12%;
  width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,91,31,.13), transparent 66%);
  filter: blur(30px); pointer-events: none;
}
.hero-eyebrow {
  font-size: 11px; letter-spacing: .3em; color: var(--signal);
  text-transform: uppercase; margin-bottom: 26px;
  opacity: 0; animation: fadeUp .8s var(--ease) .1s forwards;
}
.hero h1 {
  font-family: var(--font-a-impact);
  font-size: clamp(52px, 9.5vw, 148px);
  line-height: .88; letter-spacing: -.035em; margin: 0 0 6px;
  opacity: 0; animation: fadeUp .9s var(--ease) .2s forwards;
}
.hero h1 .out {
  -webkit-text-stroke: 1.5px var(--paper); color: transparent;
}
.hero h1 .sig { color: var(--signal); }
.hero-ko {
  font-size: clamp(17px, 2.1vw, 24px); font-weight: 300; color: var(--paper-dim);
  max-width: 620px; margin: 32px 0 0; line-height: 1.75;
  opacity: 0; animation: fadeUp .9s var(--ease) .38s forwards;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 40px; margin-top: 60px;
  padding-top: 32px; border-top: 1px solid var(--line);
  opacity: 0; animation: fadeUp .9s var(--ease) .5s forwards;
}
.hero-meta .cell .k {
  font-size: 10px; letter-spacing: .2em; color: var(--paper-mute);
  text-transform: uppercase; margin-bottom: 8px;
}
.hero-meta .cell .v { font-size: 15px; color: var(--paper); font-weight: 500; }

@keyframes fadeUp { to { opacity: 1; transform: none; } }
.hero-eyebrow, .hero h1, .hero-ko, .hero-meta { transform: translateY(22px); }

/* ---------- 섹션 ---------- */
section { padding: 96px 0; }
.sec-head { margin-bottom: 52px; }
.sec-num {
  font-family: var(--font-a-impact); font-size: 12px;
  color: var(--signal); letter-spacing: .1em; margin-bottom: 14px;
}
.sec-head h2 {
  font-family: var(--font-a-impact);
  font-size: clamp(30px, 4.4vw, 54px); letter-spacing: -.028em;
  margin: 0 0 16px; line-height: 1.04;
}
.sec-head p { color: var(--paper-dim); max-width: 660px; margin: 0; font-weight: 300; }

/* ---------- 소개 ---------- */
.about { background: var(--ink-2); border-block: 1px solid var(--line); }
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
.about-lead {
  font-size: clamp(20px, 2.6vw, 30px); font-weight: 300;
  line-height: 1.55; letter-spacing: -.015em; margin: 0;
}
.about-lead b { font-weight: 600; color: var(--signal); }
.about-body p { color: var(--paper-dim); margin: 0 0 18px; font-weight: 300; }
.about-body p:last-child { margin-bottom: 0; }

.facts { margin-top: 44px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.fact {
  display: grid; grid-template-columns: 148px 1fr; gap: 20px;
  padding: 17px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.fact dt { font-size: 12px; letter-spacing: .13em; color: var(--paper-mute); text-transform: uppercase; }
.fact dd { margin: 0; font-size: 14.5px; color: var(--paper); }

/* ---------- 브랜드 그리드 ---------- */
.brand-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.bcard {
  background: var(--ink); padding: 40px 32px 34px; position: relative;
  min-height: 300px; display: flex; flex-direction: column;
  transition: background .4s var(--ease); overflow: hidden;
}
.bcard::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 8%, var(--ac), transparent 62%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.bcard:hover { background: var(--ink-3); }
.bcard:hover::before { opacity: .2; }
.bcard-cat {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper-mute); margin-bottom: 22px; position: relative;
}
/* 워드마크 = 공식 로고 확보 전 임시 */
.wordmark {
  font-family: var(--font-a-impact);
  font-size: 27px; line-height: 1.1; letter-spacing: -.03em;
  color: var(--paper); margin-bottom: 8px; position: relative;
  transition: color .3s var(--ease);
}
.bcard:hover .wordmark { color: var(--signal); }
.wordmark-en {
  font-size: 11px; letter-spacing: .13em; color: var(--paper-mute);
  text-transform: uppercase; margin-bottom: 20px; position: relative;
}
.bcard-desc {
  font-size: 13.5px; color: var(--paper-dim); font-weight: 300;
  line-height: 1.72; flex: 1; position: relative; margin: 0 0 22px;
}
.bcard-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; border-top: 1px solid var(--line); position: relative;
}
.bcard-band { font-size: 12.5px; color: var(--paper); font-weight: 500; }
.bcard-go {
  font-size: 11px; letter-spacing: .13em; color: var(--signal);
  text-transform: uppercase; display: flex; align-items: center; gap: 7px;
}
.bcard-go svg { transition: transform .3s var(--ease); }
.bcard:hover .bcard-go svg { transform: translateX(5px); }

/* ---------- 브랜드 상세 ---------- */
.detail-hero { padding: 76px 0 56px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.detail-hero::before {
  content: ""; position: absolute; top: -160px; right: -100px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, var(--ac), transparent 65%);
  opacity: .17; filter: blur(24px);
}
.crumb { font-size: 12px; color: var(--paper-mute); margin-bottom: 30px; position: relative; }
.crumb a { color: var(--paper-dim); }
.crumb a:hover { color: var(--signal); }
.detail-hero .wordmark-lg {
  font-family: var(--font-a-impact);
  font-size: clamp(38px, 6.4vw, 82px); letter-spacing: -.035em;
  line-height: 1; margin: 0 0 12px; position: relative;
}
.detail-hero .en-lg {
  font-size: 13px; letter-spacing: .2em; color: var(--paper-mute);
  text-transform: uppercase; margin-bottom: 30px; position: relative;
}
.moods { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; position: relative; }
.mood {
  font-size: 11.5px; letter-spacing: .06em; padding: 7px 15px;
  border: 1px solid var(--line); border-radius: 100px; color: var(--paper-dim);
}

/* 취급 고지 블록 */
.disclosure {
  background: var(--ink-2); border: 1px solid var(--line);
  border-left: 3px solid var(--ac, var(--signal));
  padding: 26px 30px; margin: 44px 0 0; position: relative;
}
.disclosure h3 {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--signal); margin: 0 0 13px; font-weight: 600;
}
.disclosure p {
  margin: 0 0 11px; font-size: 14px; line-height: 1.75;
  color: var(--paper-dim); font-weight: 300;
}
.disclosure p:last-child { margin-bottom: 0; }
.disclosure b { color: var(--paper); font-weight: 500; }

/* 상품 테이블 */
.items { margin-top: 12px; }
.item-row {
  display: grid; grid-template-columns: 1fr 108px 200px 150px;
  gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line);
  align-items: center; transition: background .3s var(--ease);
}
.item-row:hover { background: var(--ink-2); }
.item-head {
  border-bottom: 1px solid var(--paper-mute); padding-bottom: 13px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper-mute);
}
.item-head:hover { background: none; }
.item-name { font-size: 15.5px; font-weight: 500; color: var(--paper); }
.item-cat { font-size: 12.5px; color: var(--paper-dim); }
.item-mat { font-size: 13px; color: var(--paper-dim); font-weight: 300; }
.item-price {
  font-family: var(--font-a-brand); font-size: 16px; font-weight: 600;
  text-align: right; color: var(--paper); letter-spacing: -.01em;
}
.item-price .won { font-size: 12px; font-weight: 400; color: var(--paper-dim); margin-left: 2px; }
.item-price.ask { font-size: 13px; font-weight: 500; color: var(--signal); }

.price-note {
  margin-top: 26px; font-size: 12.5px; color: var(--paper-mute);
  font-weight: 300; line-height: 1.7;
}

/* ---------- 매장 안내 ---------- */
.visit { background: var(--ink-2); border-block: 1px solid var(--line); }
.visit-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; }
.visit-cta {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 30px;
  background: var(--signal); color: #12100e; padding: 15px 30px;
  font-weight: 600; font-size: 14.5px; letter-spacing: .01em;
  border-radius: var(--radius); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.visit-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,91,31,.28); }

/* ---------- 푸터 ---------- */
footer {
  background: var(--ink); border-top: 1px solid var(--line);
  padding: 62px 0 40px; font-size: 13px;
}
.foot-top {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px;
  padding-bottom: 34px; border-bottom: 1px solid var(--line);
}
.foot-logo {
  font-family: var(--font-a-impact); font-size: 19px;
  letter-spacing: -.02em; margin-bottom: 14px;
}
.biz {
  display: grid; grid-template-columns: repeat(2, auto); gap: 8px 30px;
  color: var(--paper-mute); font-size: 12.5px; line-height: 1.6;
  justify-content: start;
}
.biz .row { display: flex; gap: 9px; }
.biz .row .k { color: var(--paper-mute); flex-shrink: 0; }
.biz .row .v { color: var(--paper-dim); }
.foot-bottom {
  padding-top: 26px; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; color: var(--paper-mute); font-size: 12px;
}
.foot-note { color: var(--paper-mute); font-size: 11.5px; line-height: 1.75; margin-top: 14px; max-width: 620px; }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .visit-grid { grid-template-columns: 1fr; gap: 40px; }
  .item-row { grid-template-columns: 1fr 92px 130px; }
  .item-row .item-mat { display: none; }
  .item-head .item-mat { display: none; }
}
@media (max-width: 720px) {
  .wrap, .nav-in { padding: 0 18px; }
  section { padding: 64px 0; }
  .hero { padding: 76px 0 60px; }
  .nav-links { gap: 17px; }
  .nav-links a { font-size: 12px; }
  .brand-grid { grid-template-columns: 1fr; }
  .item-row { grid-template-columns: 1fr auto; gap: 6px 14px; padding: 18px 0; }
  .item-row .item-cat { grid-column: 1; font-size: 11.5px; }
  .item-row .item-price { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .item-head { display: none; }
  .hero-meta { gap: 26px; }
  .foot-top { grid-template-columns: 1fr; gap: 32px; }
  .biz { grid-template-columns: 1fr; }
  .fact { grid-template-columns: 104px 1fr; gap: 12px; }
}


/* ===== 인터랙션 이펙트 (agy) ===== */
/* ==========================================================================
   [A] CLOTHING SITE — DARK EDITORIAL INTERACTION STYLES
   Accent: #ff5b1f | Background: #0b0b0d | Text: #ece9e2
   ========================================================================== */

/* 1. Scroll Reveal (Sharp Mask & Slide) */
.sec-head,
.bcard,
.wordmark,
.item-row {
  opacity: 0;
  will-change: transform, opacity, clip-path;
}

.sec-head.is-revealed,
.bcard.is-revealed,
.wordmark.is-revealed {
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: translateY(0);
  transition: 
    clip-path 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}

html.fx-on .sec-head:not(.is-revealed),
html.fx-on .bcard:not(.is-revealed) {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transform: translateY(40px);
}

html.fx-on .wordmark:not(.is-revealed) {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-30px);
}

/* 2. Brand Card Hover (Diagonal Signal Orange Sweep) */
.bcard {
  position: relative;
  overflow: hidden;
}

.bcard::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 220%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 91, 31, 0.12) 46%,
    rgba(255, 91, 31, 0.85) 50%,
    rgba(255, 91, 31, 0.15) 54%,
    transparent 65%
  );
  transform: translate3d(-100%, 100%, 0) rotate(-15deg);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .bcard:hover::after {
    transform: translate3d(100%, -100%, 0) rotate(-15deg);
    transition: transform 0.65s cubic-bezier(0.19, 1, 0.22, 1);
  }

  .bcard:hover {
    border-color: rgba(255, 91, 31, 0.4);
    box-shadow: 0 0 25px rgba(255, 91, 31, 0.15);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
}

/* 3. Hero Title Staggered Reveal */
.hero h1 {
  overflow: hidden;
}

.hero h1 .char-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.hero h1 .char-unit {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--char-index, 0) * 0.032s);
}

.hero h1.is-loaded .char-unit {
  transform: translateY(0%);
}

/* 4. Product Table Rows & Price Highlight */
.item-row {
  transform: translateX(-25px);
  clip-path: inset(0 100% 0 0);
  transition: 
    clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease,
    background-color 0.25s ease;
  transition-delay: calc(var(--row-index, 0) * 0.06s);
}

.item-row.is-revealed {
  opacity: 1;
  transform: translateX(0);
  clip-path: inset(0 0 0 0);
}

.item-price {
  display: inline-block;
  position: relative;
  transition: 
    color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .item-row:hover {
    background-color: rgba(255, 91, 31, 0.05);
  }

  .item-row:hover .item-price {
    color: #ff5b1f;
    transform: scale(1.08) translateX(6px);
    text-shadow: 0 0 12px rgba(255, 91, 31, 0.6);
  }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .sec-head,
  .bcard,
  .wordmark,
  .item-row,
  .hero h1 .char-unit {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }

  .bcard::after {
    display: none !important;
  }
}



/* ===== 이미지 레이어 (의류) ===== */
.hero {
  background-image:
    linear-gradient(90deg, rgba(11,11,13,.97) 0%, rgba(11,11,13,.88) 42%, rgba(11,11,13,.55) 100%),
    url('img/hero.jpg');
  background-size: cover;
  background-position: center right;
}
.about { position: relative; }
.about::before {
  content: ""; position: absolute; inset: 0;
  background: url('img/about.jpg') center/cover;
  opacity: .04; pointer-events: none;
}
.about > .wrap { position: relative; }
.visit {
  background-image:
    linear-gradient(90deg, rgba(19,20,23,.96) 0%, rgba(19,20,23,.9) 55%, rgba(19,20,23,.62) 100%),
    url('img/store.jpg');
  background-size: cover;
  background-position: center;
}
@media (max-width: 720px) {
  .hero, .visit { background-position: center; }
  .hero { background-image: linear-gradient(180deg, rgba(11,11,13,.93), rgba(11,11,13,.97)), url('img/hero.jpg'); }
}


/* ===== 리빌 안전장치 =====
 * fx.js가 <html>에 .fx-on을 달았을 때만 초기 은닉을 적용한다.
 * JS 실패·차단·크롤러 환경에서는 콘텐츠가 그대로 보이도록.
 */
.sec-head:not(.is-revealed),
.bcard:not(.is-revealed),
.wordmark:not(.is-revealed),
.item-row:not(.is-revealed) {
  opacity: 1;
  transform: none;
  clip-path: none;
}
html.fx-on .sec-head:not(.is-revealed),
html.fx-on .bcard:not(.is-revealed),
html.fx-on .wordmark:not(.is-revealed) {
  opacity: 0;
}
html.fx-on .sec-head:not(.is-revealed),
html.fx-on .bcard:not(.is-revealed) { transform: translateY(40px); }
html.fx-on .wordmark:not(.is-revealed) { transform: translateX(-30px); }

/* 안전 타이머: 3초 안에 리빌 안 되면 무조건 보이게 */
html.fx-timeout .sec-head,
html.fx-timeout .bcard,
html.fx-timeout .wordmark,
html.fx-timeout .item-row {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}


/* ===== 고아줄 방지 ===== */
.hero h1 .nb { white-space: nowrap; display: inline-block; }
.hero h1 { word-break: keep-all; }
.hero-ko, .about-lead, .about-body p, .bcard-desc, .sec-head p, .disclosure p, .foot-note {
  word-break: keep-all;
  text-wrap: pretty;
}
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(38px, 12vw, 52px); }
  .nav-links a { white-space: nowrap; }
}


/* ===== 상품 갤러리 (의류) ===== */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin-top: 10px;
}
.gitem {
  background: var(--ink); display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.gthumb {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(135deg, var(--ink-2), var(--ink-3));
}
.gthumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease), filter .5s var(--ease);
  filter: saturate(.92);
}
.gitem:hover .gthumb img { transform: scale(1.05); filter: saturate(1.05); }
/* 이미지 없을 때 대체 */
.gthumb.noimg::after {
  content: attr(data-cat);
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-a-impact); font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--paper-mute);
}
.gcat {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(11,11,13,.82); backdrop-filter: blur(6px);
  padding: 5px 11px; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper-dim);
}
.gbody { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.gname {
  font-size: 14.5px; font-weight: 500; color: var(--paper);
  line-height: 1.45; margin-bottom: 7px; word-break: keep-all;
}
.gmat {
  font-size: 12px; color: var(--paper-mute); font-weight: 300;
  line-height: 1.6; margin-bottom: 14px; flex: 1; word-break: keep-all;
}
.gprice {
  font-family: var(--font-a-brand); font-size: 17px; font-weight: 600;
  color: var(--paper); letter-spacing: -.01em;
  padding-top: 13px; border-top: 1px solid var(--line);
}
.gprice .won { font-size: 12px; font-weight: 400; color: var(--paper-dim); margin-left: 2px; }
.gprice.ask { font-size: 13px; font-weight: 500; color: var(--signal); }

@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; }
  .gthumb { aspect-ratio: 16 / 10; }
}


/* ===== 브랜드 역사 블록 (의류) ===== */
.history {
  margin: 46px 0 0; position: relative;
  padding: 30px 34px; background: var(--ink-2);
  border: 1px solid var(--line); border-left: 3px solid var(--ac, var(--signal));
}
.history h3 {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--signal); margin: 0 0 15px; font-weight: 600;
}
.history p {
  margin: 0; font-size: 14.5px; line-height: 1.85;
  color: var(--paper-dim); font-weight: 300; word-break: keep-all;
}
.history-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-top: 22px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.hmetas { display: flex; gap: 26px; flex-wrap: wrap; }
.hmeta { display: flex; align-items: baseline; gap: 8px; }
.hmeta .k {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-mute);
}
.hmeta .v { font-size: 14px; color: var(--paper); font-weight: 500; }
.official-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: .03em; color: var(--signal);
  padding: 8px 15px; border: 1px solid var(--signal);
  transition: background .28s var(--ease), color .28s var(--ease);
}
.official-link:hover { background: var(--signal); color: #12100e; }
.official-link svg { flex-shrink: 0; }

/* ===== 고지 밴드 (푸터 위) ===== */
.notice-band {
  padding: 26px 0 !important;
  background: var(--ink); border-top: 1px solid var(--line);
}
.notice-band p {
  margin: 0; font-size: 11.5px; line-height: 1.85;
  color: var(--paper-mute); font-weight: 300;
  max-width: 900px; word-break: keep-all;
}
.notice-band b { color: var(--paper-dim); font-weight: 500; }

@media (max-width: 720px) {
  .history { padding: 24px 20px; }
  .history-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
}


/* ===== Ox: 갤러리 보강 ===== */

/* ---------- 공통 갤러리 보강 ---------- */
.gallery{
  display:grid;
  /* 상품 6개가 3+3으로 떨어지도록 3열 고정 (auto-fill은 넓은 화면서 4열이 됨) */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,32px);
}
.gitem{
  position:relative;
  background:#101014;
  border:1px solid #1d1d22;
  border-radius:2px;
  overflow:hidden;
  transition:border-color .35s ease, transform .45s cubic-bezier(.22,.8,.24,1);
}
/* 다크 배경에 사진이 붕 뜨지 않게: 카드 자체가 '베이스' 역할 */
.gthumb{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 30%, #17171c 0%, #0e0e11 70%);
}
.gthumb::after{ /* 비네트로 이미지를 카드에 '앉혀' 줌 */
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(100% 100% at 50% 45%, transparent 55%, rgba(11,11,13,.55) 100%);
  pointer-events:none;
  mix-blend-mode:multiply;
}
.gthumb img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.04) brightness(.96);
  transition:transform .6s cubic-bezier(.22,.8,.24,1), filter .4s ease;
}
.gitem:hover .gthumb img{ transform:scale(1.05); filter:saturate(1) contrast(1.06) brightness(1); }
.gcat{
  position:absolute; top:10px; left:10px; z-index:2;
  font:600 10px/1 var(--font-a-body);
  letter-spacing:.12em; text-transform:uppercase;
  padding:6px 9px;
  color:var(--ac,#ece9e2);
  background:rgba(11,11,13,.72);
  backdrop-filter:blur(4px);
  border:1px solid rgba(236,233,226,.14);
  border-radius:1px;
}
.gbody{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:4px; }
.gname{ font-weight:600; font-size:.95rem; letter-spacing:-.01em; }
.gmat{ font-size:.78rem; color:#8f8c85; }
.gprice{
  margin-top:auto; padding-top:10px;
  font-family:var(--font-a-impact);
  font-size:.85rem; color:#ece9e2;
  display:flex; justify-content:space-between; align-items:center;
}
.gprice::after{ /* 가격 뒤 액센트 틱 */
  content:""; width:14px; height:3px;
  background:var(--ac,#ff5b1f);
  opacity:.55;
  transition:opacity .3s, width .3s;
}
.gitem:hover .gprice::after{ opacity:1; width:26px; }

/* 스크롤 리빌 연동용 */
.gitem.reveal-init{ opacity:0; transform:translateY(24px); transition:none; }



/* ===== Ox: 브랜드별 커스터마이즈 ===== */

/* ============ 01 covernat — 워시드 네이비 아메카지 ============ */
main[data-brand="covernat"]{
  --ac:#3d4f6b;
  background:
    radial-gradient(80% 60% at 15% 0%, rgba(61,79,107,.28), transparent 60%),
    radial-gradient(60% 50% at 90% 100%, rgba(233,225,208,.07), transparent 65%),
    #0b0b0d;
}
main[data-brand="covernat"] .detail-hero h1{
  text-shadow:0 0 40px rgba(61,79,107,.5);
}
main[data-brand="covernat"] .detail-hero::before{ /* 워시드 세로 스트라이프(데님 셀비지 느낌) */
  content:""; position:absolute; inset:0 auto 0 0; width:min(120px,12vw); pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(61,79,107,.25) 0 2px, transparent 2px 14px);
  opacity:.5;
}
main[data-brand="covernat"] .moods span{
  background:rgba(61,79,107,.18);
  border-color:rgba(61,79,107,.5);
  color:#c9d3e2;
  border-radius:999px;
}
main[data-brand="covernat"] .gitem:hover{ border-color:#3d4f6b; }
main[data-brand="covernat"] .gitem:hover .gthumb img{ filter:saturate(.8) sepia(.08) brightness(1.02); }

/* ============ 02 thisisneverthat — 로열블루 스트릿 ============ */
main[data-brand="thisisneverthat"]{
  --ac:#1f3fa8;
  background:
    linear-gradient(180deg, rgba(31,63,168,.16), transparent 40%),
    #0b0b0d;
}
main[data-brand="thisisneverthat"] .detail-hero h1{
  -webkit-text-stroke:1px #ece9e2;
}
main[data-brand="thisisneverthat"] .detail-hero::after{
  content:"NEVERTHAT—NEVERTHAT—NEVERTHAT"; /* 흐르는 마퀴 밴드 */
  position:absolute; left:0; right:0; bottom:-1px;
  white-space:nowrap; pointer-events:none;
  font-family:var(--font-a-impact); font-size:11px; letter-spacing:.4em;
  color:#0b0b0d; background:#ffd60a;
  padding:6px 0;
  animation:tint-marquee 18s linear infinite;
}
@keyframes tint-marquee{
  from{ transform:translateX(0); } to{ transform:translateX(-50%); }
}
main[data-brand="thisisneverthat"] .moods span{
  background:#ffd60a; color:#0b0b0d; border-color:#ffd60a;
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
main[data-brand="thisisneverthat"] .gitem{ border-radius:0; }
main[data-brand="thisisneverthat"] .gitem:hover{ border-color:#ffd60a; box-shadow:6px 6px 0 #1f3fa8; transform:translate(-3px,-3px); }

/* ============ 03 marithe — 프렌치 걸리시 ============ */
main[data-brand="marithe"]{
  --ac:#8b6f9e;
  background:
    radial-gradient(70% 50% at 75% 10%, rgba(139,111,158,.20), transparent 60%),
    radial-gradient(50% 40% at 20% 90%, rgba(255,214,224,.06), transparent 60%),
    #0b0b0d;
}
main[data-brand="marithe"] .detail-hero h1{ font-style:normal; letter-spacing:-.02em; }
main[data-brand="marithe"] .en-lg{
  background:linear-gradient(90deg,#e8dff0,#8b6f9e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
main[data-brand="marithe"] .moods span{
  border-radius:999px 999px 999px 2px; /* 꽃잎 형태 칩 */
  background:rgba(139,111,158,.15);
  border-color:rgba(232,223,240,.35); color:#e8dff0;
}
main[data-brand="marithe"] .gitem{ border-radius:6px; }
main[data-brand="marithe"] .gitem:hover{
  border-color:#b9a4cc;
  box-shadow:0 12px 32px -12px rgba(139,111,158,.45);
}

/* ============ 04 discovery — 라이프스타일 아웃도어 ============ */
main[data-brand="discovery"]{
  --ac:#c96a2b;
  background:
    linear-gradient(180deg, rgba(201,106,43,.10), transparent 45%),
    #0b0b0d;
}
main[data-brand="discovery"] .contour{ /* 등고선 SVG 배경(JS 패럴랙스 대상) */
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.16;
  will-change:transform;
}
main[data-brand="discovery"] .detail-hero > *{ position:relative; z-index:1; }
main[data-brand="discovery"] .detail-hero h1{
  background:linear-gradient(90deg,#ece9e2 40%,#c96a2b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
main[data-brand="discovery"] .moods span{
  background:rgba(201,106,43,.14);
  border-color:rgba(201,106,43,.5); color:#f0b48a;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
main[data-brand="discovery"] .gitem:hover{ border-color:#c96a2b; }
main[data-brand="discovery"] .gitem:hover .gthumb::after{ background:radial-gradient(100% 100% at 50% 45%, transparent 40%, rgba(201,106,43,.18) 100%); mix-blend-mode:normal; }

/* ============ 05 kolonsport — 정통 아웃도어 ============ */
main[data-brand="kolonsport"]{
  --ac:#2f4a3c;
  background:
    repeating-linear-gradient(-45deg,
      rgba(47,74,60,.06) 0 1px, transparent 1px 12px),
    radial-gradient(60% 40% at 50% 0%, rgba(47,74,60,.22), transparent 70%),
    #0b0b0d;
}
main[data-brand="kolonsport"] .altimeter{
  display:flex; align-items:center; gap:12px;
  margin-top:18px; font:600 11px/1 monospace; letter-spacing:.2em; color:#7fa88f;
}
main[data-brand="kolonsport"] .altimeter .bar{
  width:min(280px,40vw); height:4px; background:#1c1c21; overflow:hidden;
}
main[data-brand="kolonsport"] .altimeter .bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#2f4a3c,#9fd4ae);
  transition:width .2s linear;
}
main[data-brand="kolonsport"] .moods span{
  background:rgba(47,74,60,.2); border-color:rgba(159,212,174,.4); color:#9fd4ae;
  border-radius:2px;
}
main[data-brand="kolonsport"] .gitem:hover{ border-color:#9fd4ae; }
main[data-brand="kolonsport"] .gitem:hover .gcat{ background:#9fd4ae; color:#0b0b0d; border-color:#9fd4ae; }

/* ============ 06 musinsa standard — 베이직 ============ */
main[data-brand="musinsa-standard"]{
  --ac:#6b6b6b;
  background:#0b0b0d; /* 무장식. 구조만으로 말한다 */
}
main[data-brand="musinsa-standard"] .detail-hero h1{ letter-spacing:-.03em; }
main[data-brand="musinsa-standard"] .detail-hero::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,#ece9e2,transparent 60%);
}
main[data-brand="musinsa-standard"] .moods span{
  background:transparent; border-color:#33333a; color:#b5b2ab;
  border-radius:0;
}
main[data-brand="musinsa-standard"] .gitem{
  background:transparent; border-color:#222228;
}
main[data-brand="musinsa-standard"] .gitem:hover{
  border-color:#ece9e2;
}
main[data-brand="musinsa-standard"] .gname{ position:relative; display:inline-block; }
main[data-brand="musinsa-standard"] .gname::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:#ece9e2; transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.22,.8,.24,1);
}
main[data-brand="musinsa-standard"] .gitem:hover .gname::after{ transform:scaleX(1); }
main[data-brand="musinsa-standard"] .gitem:hover .gthumb img{ transform:none; filter:brightness(1.05); }

/* ============ 07 matin kim — 여성 캐주얼, 애시드 ============ */
main[data-brand="matin-kim"]{
  --ac:#D9FF00;
  background:
    conic-gradient(from 200deg at 80% -10%, rgba(217,255,0,.10), transparent 30%),
    #0b0b0d;
}
main[data-brand="matin-kim"] .detail-hero h1{
  text-shadow:2px 2px 0 #D9FF00;
}
main[data-brand="matin-kim"] .moods span{
  background:transparent; border:1px solid #D9FF00; color:#D9FF00;
  border-radius:0;
  animation:mk-flicker 4s steps(1) infinite;
}
main[data-brand="matin-kim"] .moods span:nth-child(2){ animation-delay:1.3s; }
main[data-brand="matin-kim"] .moods span:nth-child(3){ animation-delay:2.6s; }
@keyframes mk-flicker{
  0%,93%,97%,100%{ opacity:1; }
  94%,96%{ opacity:.25; }
}
main[data-brand="matin-kim"] .gitem:hover{
  border-color:#D9FF00;
  outline:1px solid #D9FF00; outline-offset:4px;
}
main[data-brand="matin-kim"] .gitem:hover .gprice{ color:#D9FF00; }

/* ============ 08 frizmworks — 워크웨어 ============ */
main[data-brand="frizmworks"]{
  --ac:#596F4E;
  background:
    repeating-linear-gradient(0deg,
      rgba(89,111,78,.05) 0 1px, transparent 1px 28px),
    #0b0b0d;
}
main[data-brand="frizmworks"] .detail-hero h1{
  -webkit-text-stroke:1px rgba(89,111,78,.9); color:transparent;
  transition:color .5s ease;
}
main[data-brand="frizmworks"].hero-stamped .detail-hero h1{
  color:#ece9e2; -webkit-text-stroke:0;
}
main[data-brand="frizmworks"] .moods span{
  background:rgba(89,111,78,.16); border-color:rgba(89,111,78,.6); color:#a9bd9d;
  clip-path:polygon(2% 0,100% 0,98% 100%,0 100%); /* 스텐실 컷 */
  text-transform:uppercase; font-weight:700; letter-spacing:.15em; font-size:.68rem;
}
main[data-brand="frizmworks"] .gitem:hover{ border-color:#a9bd9d; transform:rotate(-.4deg); }
main[data-brand="frizmworks"] .gcat{
  clip-path:polygon(0 0,100% 0,95% 100%,0 100%);
}

/* ============ 09 andersson bell — 디자이너 실험 ============ */
main[data-brand="andersson-bell"]{
  --ac:#5B3CFF;
  background:
    radial-gradient(60% 45% at 50% 110%, rgba(91,60,255,.25), transparent 65%),
    #0b0b0d;
}
main[data-brand="andersson-bell"] .detail-hero h1{
  position:relative;
}
main[data-brand="andersson-bell"] .detail-hero h1:hover{
  animation:ab-glitch .45s steps(2,end) infinite;
}
@keyframes ab-glitch{
  0%  { text-shadow:-3px 0 rgba(255,0,80,.7), 3px 0 rgba(0,220,255,.7); transform:translateX(0); }
  50% { text-shadow:3px 0 rgba(91,60,255,.8), -3px 0 rgba(0,255,170,.6); transform:translateX(2px); }
  100%{ text-shadow:-2px 0 rgba(0,220,255,.6), 2px 0 rgba(255,0,80,.6); transform:translateX(-1px); }
}
main[data-brand="andersson-bell"] .moods span{
  background:rgba(91,60,255,.15); border-color:#5B3CFF; color:#cabdff;
  border-radius:999px; transform:skewX(-12deg);
}
main[data-brand="andersson-bell"] .gitem:hover{
  border-color:#5B3CFF;
  animation:ab-item-glitch .35s steps(3,end) 1;
}
@keyframes ab-item-glitch{
  25%{ transform:translate(3px,-2px); }
  50%{ transform:translate(-3px,2px); }
  75%{ transform:translate(1px,-1px); }
  100%{ transform:translate(0,0); }
}

/* ============ 10 brown breath — 워밍 스트릿웨어 ============ */
main[data-brand="brown-breath"]{
  --ac:#6E5A4B;
  background:
    radial-gradient(70% 55% at 50% -10%, rgba(110,90,75,.28), transparent 65%),
    #0b0b0d;
}
main[data-brand="brown-breath"] .detail-hero h1{
  background:linear-gradient(90deg,#ece9e2,#b09477,#ece9e2);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:bb-breathe 6s ease-in-out infinite;
}
@keyframes bb-breathe{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
main[data-brand="brown-breath"] .moods span{
  background:rgba(176,148,119,.14); border-color:rgba(176,148,119,.5); color:#d8c4ad;
  border-radius:3px;
}
main[data-brand="brown-breath"] .gitem{
  transition:box-shadow .5s ease, border-color .5s ease;
}
main[data-brand="brown-breath"] .gitem:hover{
  border-color:#b09477;
  box-shadow:0 0 0 1px #b09477, 0 16px 44px -16px rgba(176,148,119,.4);
}

/* ============ 11 lee — 데님 헤리티지 ============ */
main[data-brand="lee"]{
  --ac:#1B3A5C;
  background:
    repeating-linear-gradient(90deg,
      rgba(27,58,92,.10) 0 1px, transparent 1px 3px), /* 데님 트윌 */
    repeating-linear-gradient(0deg,
      rgba(27,58,92,.08) 0 1px, transparent 1px 3px),
    #0b0b0d;
}
main[data-brand="lee"] .detail-hero{ position:relative; }
main[data-brand="lee"] .stitch-svg{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible;
}
main[data-brand="lee"] .stitch-path{
  fill:none; stroke:#e8c56a; stroke-width:2;
  stroke-dasharray:8 7; stroke-dashoffset:1400;
}
main[data-brand="lee"].stitched .stitch-path{
  animation:lee-stitch 2.2s ease-out forwards;
}
@keyframes lee-stitch{ to{ stroke-dashoffset:0; } }
main[data-brand="lee"] .moods span{
  background:rgba(27,58,92,.25); border:1px dashed #e8c56a; color:#e8c56a;
  border-radius:0;
}
main[data-brand="lee"] .gitem{ border-style:dashed; border-color:#2a3040; }
main[data-brand="lee"] .gitem:hover{ border-color:#e8c56a; }
main[data-brand="lee"] .history{ color:#9fb4cc; font-style:italic; }

/* ============ 12 yeseyesee — 스케이트 스트릿 ============ */
main[data-brand="yeseyesee"]{
  --ac:#C4342E;
  background:
    repeating-linear-gradient(115deg,
      rgba(196,52,46,.07) 0 3px, transparent 3px 26px),
    #0b0b0d;
}
main[data-brand="yeseyesee"] .detail-hero h1{
  text-transform:uppercase;
  transform:rotate(-2deg);
}
main[data-brand="yeseyesee"] .moods span{
  background:#C4342E; color:#0b0b0d; border-color:#C4342E;
  clip-path:polygon(0 0,100% 0,100% 70%,92% 100%,0 100%); /* 데크 노즈 컷 */
}
main[data-brand="yeseyesee"] .gitem{ border-radius:10px 10px 4px 4px; }
main[data-brand="yeseyesee"] .gitem:hover{
  border-color:#C4342E;
  animation:yy-ollie .5s cubic-bezier(.34,1.6,.4,1) 1;
}
main[data-brand="yeseyesee"] .gitem:hover .gcat{ background:#C4342E; color:#fff; }
@keyframes yy-ollie{
  0%{ transform:translateY(0) rotate(0); }
  30%{ transform:translateY(-14px) rotate(3deg); }
  60%{ transform:translateY(2px) rotate(-1deg); }
  100%{ transform:translateY(0) rotate(0); }
}

/* ---------- 공통: 모션 최소화 ---------- */
@media (prefers-reduced-motion:reduce){
  main [class]{ animation:none !important; transition-duration:.01ms !important; }
  main .contour{ transform:none !important; }
}
@media (max-width:640px){
  main .contour{ display:none; }
  main[data-brand="thisisneverthat"] .detail-hero::after{ animation-duration:30s; }
}



/* ===== 갤러리 반응형 — 3열 고정보다 뒤에 와야 적용됨 ===== */
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: minmax(0,1fr); }
}


/* ===== 타이포그래피 시스템 (sol 설계 · 로컬 서브셋 폰트) ===== */

/*
 * 기존 Google Fonts @import에서는 IBM Plex Sans KR를 제거하고
 * Archivo Black + Archivo만 유지한다.
 *
 * @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&display=swap');
 */

@font-face {
  font-family: "Paperlogy Impact";
  src: url("./fonts/Paperlogy-9Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 400; /* Archivo Black의 고정 weight와 폴백 매칭 */
  font-display: swap;
}

@font-face {
  font-family: "Paperlogy";
  src: url("./fonts/Paperlogy-7Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("./fonts/PretendardVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-a-impact:
    "Archivo Black",
    "Paperlogy Impact",
    "Arial Black",
    "Pretendard",
    sans-serif;

  --font-a-brand:
    "Archivo",
    "Paperlogy",
    "Pretendard",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    sans-serif;

  --font-a-mixed:
    "Archivo",
    "Pretendard",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    sans-serif;

  --font-a-body:
    "Pretendard",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    Arial,
    sans-serif;
}

body {
  font-family: var(--font-a-body);
  font-weight: 400;
  line-height: 1.7;
  word-break: keep-all;
  font-synthesis: none;
}

.hero h1 {
  font-family: var(--font-a-impact);
  font-weight: 400;
  font-size: clamp(46px, 9.5vw, 148px);
  line-height: .88;
  letter-spacing: -.035em;
}

.sec-head h2 {
  font-family: var(--font-a-impact);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.wordmark-lg,
.detail-hero .wordmark-lg {
  font-family: var(--font-a-impact);
  font-weight: 400;
  font-size: clamp(34px, 6.4vw, 82px);
  line-height: .98;
  letter-spacing: -.035em;
}

.wordmark {
  font-family: var(--font-a-brand);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.gname {
  font-family: var(--font-a-mixed);
  font-weight: 500;
  font-size: clamp(14px, 1.1vw, 15.5px);
  line-height: 1.45;
  letter-spacing: -.01em;
}

.bcard-cat,
.en-lg {
  font-family: var(--font-a-mixed);
  font-weight: 600;
  font-size: clamp(9px, .75vw, 12px);
  line-height: 1.3;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero-ko {
  font-family: var(--font-a-body);
  font-weight: 300;
  font-size: clamp(17px, 2.1vw, 24px);
  line-height: 1.75;
  letter-spacing: -.015em;
}

.about-lead {
  font-family: var(--font-a-body);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.55;
  letter-spacing: -.02em;
}

.history p {
  font-family: var(--font-a-body);
  font-weight: 400;
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.78;
  letter-spacing: -.01em;
}

.gmat,
.mood {
  font-family: var(--font-a-body);
  font-weight: 400;
  font-size: clamp(12px, .9vw, 13px);
  line-height: 1.6;
  letter-spacing: 0;
}

.gprice,
.item-price {
  font-family: var(--font-a-mixed);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.1;
  letter-spacing: -.015em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.gprice .won,
.item-price .won {
  font-family: var(--font-a-body);
  font-size: 12px;
  font-weight: 400;
}

.notice-band p {
  font-family: var(--font-a-body);
  font-weight: 400;
  font-size: clamp(11px, .85vw, 12px);
  line-height: 1.72;
  letter-spacing: 0;
}



/* ===== 우측 플로팅 문의 버튼 (의류) ===== */
.floatcall {
  position: fixed; right: 22px; bottom: 26px; z-index: 900;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.fc-btn {
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 20px 0 18px;
  background: var(--signal); color: #12100e;
  border-radius: 999px; font-weight: 700; font-size: 15px;
  letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 8px 26px rgba(255,91,31,.34), 0 2px 6px rgba(0,0,0,.4);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.fc-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(255,91,31,.44); }
.fc-btn:active { transform: translateY(-1px); }
.fc-btn svg { flex-shrink: 0; }
.fc-num { font-family: 'Archivo', var(--font-a-body); font-variant-numeric: tabular-nums; }
.fc-top {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28,30,35,.9); backdrop-filter: blur(8px);
  border: 1px solid var(--line); color: var(--paper-dim);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), color .25s var(--ease);
  transform: translateY(8px);
}
.fc-top.show { opacity: 1; pointer-events: auto; transform: none; }
.fc-top:hover { color: var(--signal); border-color: var(--signal); }

@media (max-width: 720px) {
  .floatcall { right: 14px; bottom: 16px; gap: 8px; }
  .fc-btn { height: 52px; padding: 0 17px 0 15px; font-size: 14px; }
  .fc-top { width: 42px; height: 42px; }
}
@media (max-width: 400px) {
  .fc-btn .fc-label { display: none; }
  .fc-btn { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-btn, .fc-top { transition: none; }
  .fc-btn:hover { transform: none; }
}