@charset "UTF-8";

/*
Theme Name: Seoul Film Center Theme
Author: IFC
Version: 1.0
Description: 서울영화센터 맞춤형 워드프레스 테마입니다.
*/

/* ------------------------------------------------------------------
   ⚠ 병합 안내
   기준: style_백업본.css (충돌/오버라이드 없는 클린 버전)
   추가: product_light.html(협찬상품 페이지) 확정본에서 뽑은 페이지 전용 CSS
        (.phead, .filterbar, .chip, .lookbook, .card, .modal 등)
   기존 style.css에 있던 !important 패치 3곳
   (.modal .mgallery .thumbs / .th, .nav ul 모바일)은 포함하지 않았습니다.
   ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,500&family=IBM+Plex+Mono:wght@400;500&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');

:root{
  --bg:#EDE6D6;
  --panel:#EDE6D6;
  --black:#231D14;
  --paper:#231D14;
  --amber:#A8641F;
  --amber-on-photo:#E3A968;
  --muted:#6E6656;
  --rule: rgba(35,29,20,0.14);
  --overlay-soft: rgba(246,241,231,0.92);
  --on-photo:#F3EEE2;
  --font-kr: 'Gowun Batang', serif;
  --font-lat: 'Fraunces', serif;
  --font-mono: 'IBM Plex Mono', 'Pretendard Variable', monospace;
  --font-body: 'Pretendard Variable', -apple-system, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{background:var(--bg); scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--paper);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* 워드프레스 관리자 툴바 배치 시 상단 여백 수정 */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}

::selection{ background:var(--amber); color:var(--black); }

a{ color:inherit; text-decoration:none; }

/* ---------- sprocket rail : signature element, doubles as scroll progress ---------- */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:34px;
  z-index:60; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  padding:18px 0; gap:14px;
  background:var(--bg);
  border-right:0.5px solid var(--rule);
}
.rail .hole{
  width:12px; height:16px; border-radius:3px;
  background:rgba(35,29,20,0.09);
  transition: background 0.25s ease;
  flex-shrink:0;
}
.rail .hole.lit{ background:var(--amber); }

/* ---------- top nav ---------- */
.nav{
  position:fixed; top:0; left:34px; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px 22px 34px;
  font-family:var(--font-mono);
  font-size:12.5px; letter-spacing:0.08em;
  background:linear-gradient(to bottom, rgba(246,241,231,0.85), rgba(246,241,231,0));
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nav.solid{ background:var(--bg); border-bottom:0.5px solid var(--rule); backdrop-filter: blur(6px); }
.nav .mark-group{ display:flex; align-items:center; gap:16px; }
.nav .mark{ font-weight:500; font-size:15px; letter-spacing:0.12em; }
.nav .mark span{ color:var(--amber); }
.nav ul{ list-style:none; display:flex; gap:34px; }
.nav a{ opacity:0.78; transition:opacity 0.2s ease; position:relative; padding-bottom:2px; }
.nav ul a{ font-size:15px; }
.nav a:hover{ opacity:1; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0;
  background:var(--amber); transition:width 0.25s ease;
}
.nav a:hover::after{ width:100%; }

/* ---------- hamburger trigger : opens full category menu ---------- */
.hamburger{
  width:22px; height:15px; position:relative; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between;
  background:none; border:none; padding:0; flex-shrink:0;
}
.hamburger span{
  display:block; height:2px; width:100%; background:var(--amber);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.active span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- fullscreen menu overlay ---------- */
.menu-overlay{
  position:fixed; inset:0; z-index:90; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 40px 0 56px; gap:16px;
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.menu-overlay.open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}
.menu-overlay .m-label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em; color:var(--amber); margin-bottom:12px;
}
.menu-overlay a{
  font-family:var(--font-kr); font-weight:700; font-size:clamp(21px,3.8vw,41px);
  line-height:1.5; color:var(--paper); display:flex; align-items:baseline; gap:18px;
  opacity:0.9; transition:opacity 0.2s ease, color 0.2s ease;
}
.menu-overlay a .num{ font-family:var(--font-mono); font-size:12px; color:var(--amber); }
.menu-overlay a:hover{ opacity:1; color:var(--amber); }
.menu-overlay .m-close{
  position:absolute; top:22px; right:40px; width:28px; height:28px;
  background:none; border:none; cursor:pointer;
}
.menu-overlay .m-close span{
  position:absolute; top:50%; left:50%; width:22px; height:1.5px; background:var(--amber);
}
.menu-overlay .m-close span:first-child{ transform:translate(-50%,-50%) rotate(45deg); }
.menu-overlay .m-close span:last-child{ transform:translate(-50%,-50%) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100vh;
  margin-left:34px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 40px 0 56px;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(168,100,31,0.13), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(168,100,31,0.07), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--panel) 100%);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:0.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.countdown{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-lat); font-style:italic; font-weight:500;
  font-size:min(22vw, 220px); color:var(--paper); opacity:0;
  z-index:5; pointer-events:none;
}
.hero-inner{
  position:relative; z-index:2; padding-bottom:64px;
  opacity:0; transform:translateY(18px);
}
.hero-inner.reveal{ animation: heroIn 0.9s ease forwards; }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }

.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em;
  color:var(--amber); margin-bottom:22px; display:flex; align-items:center; gap:10px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); }

.hero h1{
  font-family:var(--font-kr); font-weight:700;
  font-size:clamp(48px, 9vw, 128px);
  line-height:1.02; letter-spacing:-0.01em;
  color:var(--paper);
}
.hero .tagline{
  margin-top:26px; max-width:560px;
  font-family:var(--font-kr); font-size:clamp(16px,2vw,20px);
  line-height:1.7; color:var(--muted);
}
.hero .tagline em{ font-style:normal; color:var(--paper); }

/* slate strip */
.slate{
  margin-top:48px; display:flex; flex-wrap:wrap; gap:0;
  border-top:0.5px solid var(--rule);
}
.slate div{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em;
  color:var(--muted); padding:14px 26px 14px 0; border-right:0.5px solid var(--rule);
}
.slate div b{ color:var(--paper); font-weight:500; }
.slate div:last-child{ border-right:none; }

/* ---------- sections shared ---------- */
section{ margin-left:34px; }
.section-pad{ padding:120px 40px 120px 56px; }
.reveal-up{ opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal-up.in{ opacity:1; transform:translateY(0); }

/* ---------- about ---------- */
.about{ background:var(--bg); border-top:0.5px solid var(--rule); }
.about .grid{ display:grid; grid-template-columns: 1fr 1.4fr; gap:80px; align-items:start; }
.about .label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em; color:var(--amber);
}
.about h2{
  font-family:var(--font-kr); font-weight:700; font-size:clamp(26px,3vw,38px);
  line-height:1.4; margin-top:18px; max-width:480px;
}
.about p{
  font-size:15.5px; line-height:1.85; color:var(--muted); max-width:460px;
}
.about .stat-row{ margin-top:40px; display:flex; gap:48px; flex-wrap:wrap; }
.about .stat b{ font-family:var(--font-lat); font-style:italic; font-size:34px; color:var(--paper); font-weight:500; display:block; }
.about .stat span{ font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:0.06em; }

/* ---------- entry banner ---------- */
.doors{
  position:relative;
  display:block;
  border-top:0.5px solid var(--rule);
  overflow:hidden;
}
.door{
  position:relative;
  width:100%;
  min-height:80vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  cursor:pointer;
}
.door .field{
  position:absolute; inset:0;
  filter: brightness(0.82) saturate(0.9);
}
.door.product .field{
  background:
    radial-gradient(ellipse at 70% 20%, rgba(201,138,62,0.28), transparent 55%),
    radial-gradient(ellipse at 20% 85%, rgba(198,168,118,0.4), transparent 60%),
    linear-gradient(160deg, #E6DBBE 0%, #DCCEAA 70%);
}
.door .photo{
  position:absolute; inset:0;
  filter: brightness(0.82) saturate(0.9);
  background-size:cover; background-position:center;
  background-image:var(--pc-banner-image, none);
}
@media (max-width:600px){
  .door .photo{
    background-image:var(--mobile-banner-image, var(--pc-banner-image, none));
  }
}
.door .scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(20,16,10,0.75) 0%, rgba(20,16,10,0.2) 42%, transparent 68%);
}
.door .grain{
  position:absolute; inset:0; opacity:0.06; mix-blend-mode:overlay; pointer-events:none;
  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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.door .content{
  position:relative; z-index:2; padding:0 56px 72px; width:100%;
}
.door .tc{
  position:absolute; top:42px; left:56px; z-index:2;
  font-family:var(--font-mono); font-size:11px; color:rgba(243,238,226,0.72); letter-spacing:0.06em;
}
.door .slug{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.12em; color:var(--amber-on-photo);
  margin-bottom:14px;
}
.door h3{
  font-family:var(--font-kr); font-weight:700; font-size:clamp(34px,5.2vw,76px);
  line-height:1.08; margin-bottom:20px; color:var(--on-photo);
}
.door p{
  font-size:15.5px; line-height:1.8; color:rgba(243,238,226,0.78); max-width:460px; margin-bottom:30px;
}
.door .link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em;
  color:var(--on-photo); border-top:0.5px solid rgba(243,238,226,0.25); padding-top:14px;
}
.door .link .arrow{ color:var(--amber); }

@media (hover:hover) and (pointer:fine){
  .door .field, .door .photo{ transition: filter 0.35s ease; }
  .door:hover .field, .door:hover .photo{ filter: brightness(1) saturate(1); }
}
@media (max-width: 860px){
  .door{ min-height:80vh; }
  .door .content{ padding:0 20px 44px; }
  .door .tc{ top:20px; left:20px; font-size:10px; }
  .door .slug{ font-size:11px; margin-bottom:12px; }
  .door h3{ font-size:clamp(34px,10vw,48px); margin-bottom:16px; }
  .door p{ font-size:13.5px; line-height:1.7; max-width:none; margin-bottom:22px; }
  .door .link{ font-size:11px; gap:8px; padding-top:12px; }
}
@media (max-width: 480px){
  .door .content{ padding:0 16px 34px; }
}

/* ---------- process : 협찬상품 신청 프로세스 (footer 위 영역) ---------- */
.process{ background:var(--bg); border-top:0.5px solid var(--rule); }
.process .head{ max-width:640px; }
.process .label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em; color:var(--amber);
}
.process h2{
  font-family:var(--font-kr); font-weight:700; font-size:clamp(26px,3vw,38px);
  line-height:1.4; margin-top:18px;
}

/* 스텝 자체가 화살표 도형 : PC는 오른쪽을 가리키는 화살표, 안에 텍스트가 들어간다 */
.process .steps{
  margin-top:56px;
  display:flex;
  align-items:stretch;
  gap:6px;
}
.process .step{
  position:relative;
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:linear-gradient(160deg, rgba(168,100,31,0.09), rgba(168,100,31,0.03));
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  padding:30px 40px 30px 26px;
}
.process .step:last-child{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  padding-right:26px;
}
.process .step-num{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.14em; color:var(--amber);
  display:flex; align-items:center; gap:8px; margin-bottom:16px; white-space:nowrap;
}
.process .step-num .dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); flex-shrink:0; }
.process .step-title{
  font-family:var(--font-kr); font-weight:700; font-size:clamp(17px,1.7vw,21px);
  color:var(--paper); margin-bottom:12px; line-height:1.3;
}
.process .step-desc{
  font-size:13px; line-height:1.6; color:var(--muted);
}

@media (max-width: 860px){
  /* 모바일 : 아래쪽을 가리키는 화살표로 방향 전환, 세로로 쌓임 + 폭 축소·중앙 정렬 */
  .process .steps{ flex-direction:column; align-items:center; gap:14px; }
  .process .step{
    width:88%;
    max-width:420px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
    padding:24px 24px 42px;
  }
  .process .step:last-child{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    padding-bottom:24px;
  }
  .process .step-num{ margin-bottom:12px; }
  .process .step-title{ margin-bottom:8px; }
}

@media (max-width: 480px){
  .process .step{ width:94%; }
}

/* ---------- contact ---------- */
.contact{ border-top:0.5px solid var(--rule); background:var(--bg); }
.contact .grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:start; }
.contact .label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em; color:var(--amber); margin-bottom:20px;
}
.contact .lead{
  font-family:var(--font-kr); font-size:clamp(16px,1.8vw,19px); color:var(--muted);
  line-height:1.6; margin-bottom:40px; max-width:520px;
}
.contact .tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:var(--muted);
  margin-bottom:6px;
}
.contact .big-line{
  display:block; font-family:var(--font-lat); font-style:italic; font-weight:500;
  font-size:clamp(26px,3vw,38px); line-height:1.4; color:var(--paper);
  border-bottom:0.5px solid var(--rule); padding-bottom:8px; margin-bottom:22px;
  transition:color 0.2s ease; width:fit-content;
}
.contact .big-line:hover{ color:var(--amber); }

.contact .info-panel{ padding-top:2px; }
.contact .info-panel dl{
  display:grid; grid-template-columns:98px 1fr; row-gap:14px; column-gap:16px;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.7;
}
.contact .info-panel dt{ color:var(--muted); }
.contact .info-panel dd{ color:var(--paper); }
.contact .info-panel .note{
  margin-top:26px; padding-top:18px; border-top:0.5px solid var(--rule);
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted); line-height:1.7;
}
.contact .foot{
  margin-top:90px; padding-top:22px; border-top:0.5px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:0.04em;
}
.contact .foot .end{ color:var(--amber); }

/* ---------- responsive ---------- */
@media (max-width: 1200px){
  .rail{ width:26px; padding:14px 0; gap:10px; }
  .rail .hole{ width:9px; height:12px; }
  .nav{ left:26px; }
  .hero{ margin-left:26px; }
  section{ margin-left:26px; }
  .process .step{ padding:26px 32px 26px 22px; }
}
@media (max-width: 860px){
  .rail{ width:18px; padding:10px 0; gap:7px; }
  .rail .hole{ width:6px; height:9px; }
  .nav{ left:18px; padding:16px 18px; }
  .nav ul{ display:none; }
  .nav .mark{ font-size:17px; }
  .hero{ margin-left:18px; padding:0 20px; }
  section{ margin-left:18px; }
  .section-pad{ padding:80px 20px; }
  .about .grid{ grid-template-columns:1fr; gap:36px; }
  .about .stat-row{ gap:32px; }
  .contact .grid{ grid-template-columns:1fr; gap:44px; }
  .contact .info-panel dl{ grid-template-columns:88px 1fr; }
}
@media (max-width: 480px){
  .nav{ padding:14px 14px; }
  .nav .mark .full{ display:inline; }
  .about .stat-row{ gap:24px 32px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ============================================================
   ⬇ 페이지 고유 컨텐츠 CSS는 이 아래에 추가하세요
   (예: 협찬상품 페이지의 카드 그리드, ABOUT 페이지의 텍스트 블록 등)
   ============================================================ */

:root{
  --panel-2:#E4DBC6;
  --amber-dim:#C99A5E;
  --good:#4F7A3E;
  --on-amber:#FFFFFF;
}

.nav a.current{ opacity:1; color:#A8641F; }
.menu-overlay a.current{ color:#A8641F; opacity:1; }

button{ font-family:inherit; }
/* ---------- page header : 2뎁스용 슬레이트, 히어로보다 가벼운 버전 ---------- */
.phead{
  margin-left:34px;
  padding:150px 40px 56px 56px;
  background:var(--bg);
  border-bottom:0.5px solid var(--rule);
}
.phead .crumb{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.08em; color:var(--muted);
  margin-bottom:22px; display:flex; align-items:center; gap:8px;
}
.phead .crumb a:hover{ color:var(--amber); }
.phead .crumb .sep{ color:var(--rule); }
.phead .eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em; color:var(--amber);
  margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.phead .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); }
.phead h1{
  font-family:var(--font-kr); font-weight:700; font-size:clamp(36px,5.5vw,64px);
  line-height:1.1; letter-spacing:-0.01em;
}
.phead p{
  margin-top:18px; max-width:none; font-family:var(--font-kr); font-size:15.5px;
  line-height:1.8; color:var(--muted); word-break:keep-all; overflow-wrap:normal; white-space:normal;
}
.phead .count{
  margin-top:34px; font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:0.06em;
}
.phead .count b{ color:var(--paper); font-weight:500; }

/* ---------- 필터 chip 바 : sticky ---------- */
.filterbar{
  position:sticky; top:64px; z-index:40;
  margin-left:34px;
  padding:18px 40px 18px 56px;
background:var(--bg); backdrop-filter:blur(8px);
  border-bottom:0.5px solid var(--rule);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.filterbar .flabel{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:var(--muted);
  margin-right:6px;
}
.chip{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em;
  padding:8px 16px; border:0.5px solid var(--rule); border-radius:100px;
  color:var(--muted); background:transparent; cursor:pointer;
  transition:all 0.2s ease; white-space:nowrap;
}
.chip:hover{ color:var(--paper); border-color:var(--amber-dim); }
.chip.active{ background:var(--amber); color:var(--on-amber); border-color:var(--amber); font-weight:500; }
.chip.reset{ color:var(--amber); border-color:var(--amber-dim); }
.chip.reset.active{ background:var(--amber); color:var(--on-amber); }

/* ---------- 룩북 그리드 ---------- */
.lookbook{
  margin-left:34px; padding:56px 40px 140px 56px; background:var(--bg);
}
.lookbook .grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:28px 22px;
}
@media (max-width:1180px){ .lookbook .grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:860px){ .lookbook .grid{ grid-template-columns:repeat(2,1fr); gap:22px 16px; } }
@media (max-width:560px){ .lookbook .grid{ grid-template-columns:1fr; } }

.card{
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(16px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.card.show{ opacity:1; transform:translateY(0); }
.card.hide{ display:none; }

.card .imgwrap{
  position:relative; aspect-ratio: 1/1; overflow:hidden; background:var(--panel); cursor:pointer;
}
.card .imgwrap .field{ position:absolute; inset:0; filter:brightness(0.88) saturate(0.92); transition:transform 0.5s ease, filter 0.4s ease; }
.card .imgwrap .photo{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:brightness(0.88) saturate(0.92); transition:opacity 0.25s ease, transform 0.5s ease;
}
.card .imgwrap:hover .field, .card .imgwrap:hover .photo{ transform:scale(1.04); filter:brightness(1) saturate(1); }
.card .imgwrap .grain{
  position:absolute; inset:0; opacity:0.05; mix-blend-mode:overlay; pointer-events:none;
  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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.card .swatches{
  position:absolute; left:14px; bottom:14px; z-index:3; display:flex; gap:7px;
}
.card .swatches .dot{
  position:relative; width:6px; height:6px; border-radius:50%; background:rgba(35,29,20,0.3);
  border:0.5px solid rgba(255,255,255,0.5); transition:background 0.2s ease, transform 0.2s ease;
}
.card .swatches .dot::before{
  content:""; position:absolute; top:50%; left:50%; width:22px; height:22px; transform:translate(-50%,-50%);
}
.card .swatches .dot.active{ background:var(--amber); transform:scale(1.25); }

.card .tagpills{
  position:absolute; top:14px; left:14px; z-index:3;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.card .tagpill{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.08em; color:var(--on-photo);
  background:rgba(20,16,10,0.55); backdrop-filter:blur(3px);
  padding:5px 10px; border:0.5px solid rgba(243,238,226,0.18);
}

.card .info{ padding-top:16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card .brand{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:var(--amber); }
.card .name{ font-family:var(--font-kr); font-weight:700; font-size:18px; line-height:1.35; }
.card .refno{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em; color:var(--muted); }
.card .desc{
  font-size:13px; line-height:1.7; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card .meta{
  margin-top:2px; font-family:var(--font-mono); font-size:11.5px; color:var(--muted);
  display:flex; align-items:center; gap:7px; letter-spacing:0.02em;
}
.card .meta .dot{ width:5px; height:5px; border-radius:50%; background:var(--good); flex-shrink:0; }
.card .meta.unavailable .dot{ background:var(--amber-dim); }
.card .meta.available b{ color:var(--good); font-weight:500; }
.card .meta.unavailable b{ color:var(--amber); font-weight:500; }

.card .btnrow{ margin-top:12px; display:flex; gap:8px; }
.card .btn{
  flex:1; text-align:center; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.04em;
  padding:11px 10px; border:0.5px solid var(--rule); cursor:pointer; background:transparent; color:var(--paper);
  transition:all 0.2s ease;
}
.card .btn.primary{ background:var(--amber); color:var(--on-amber); border-color:var(--amber); font-weight:500; }
.card .btn.primary:hover{ background:#dda152; }
.card .btn.ghost:hover{ border-color:var(--amber-dim); color:var(--amber); }

.empty-state{
  grid-column:1/-1; text-align:center; padding:100px 20px;
  font-family:var(--font-mono); font-size:13px; color:var(--muted); letter-spacing:0.04em;
}

/* ---------- 모달 ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(35,29,20,0.5); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:40px;
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.modal-overlay.show{ opacity:1; pointer-events:auto; }
/* 모달 전체 크기: 내부 갤러리(정방형 이미지 기준)로 결정되며, 설명이 길어져도 커지지 않음.
   태블릿/노트북에서도 화면을 꽉 채우지 않도록 max-width/max-height로 상하좌우 여백을 확보. */
.modal{
  position:relative;
  background:var(--panel); border:0.5px solid var(--rule); max-width:940px; width:100%;
  max-height:88vh; overflow:hidden; display:flex; flex-direction:column;
  transform:translateY(18px); transition:transform 0.3s ease;
}
.modal-overlay.show .modal{ transform:translateY(0); }
.modal .minner{ overflow:hidden; display:grid; grid-template-columns:1fr 1fr; }
.modal .mgallery{ position:relative; display:flex; flex-direction:column; overflow:hidden; }
.modal .mgallery .main{
  position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--panel-2); flex-shrink:0;
}
.modal .mgallery .main .field,
.modal .mgallery .main .photo{ position:absolute; inset:0; background-size:cover; background-position:center; }
.modal .mgallery .thumbs{ display:flex; gap:1px; background:var(--rule); flex-shrink:0; }
.modal .mgallery .thumbs .th{
  position:relative; flex:1; aspect-ratio:1/1; cursor:pointer; overflow:hidden; background:var(--panel-2);
}
.modal .mgallery .thumbs .th .field,
.modal .mgallery .thumbs .th .photo{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0.55; transition:opacity 0.2s ease; }
.modal .mgallery .thumbs .th.active .field,
.modal .mgallery .thumbs .th.active .photo{ opacity:1; }
.modal .mgallery .thumbs .th:hover .field,
.modal .mgallery .thumbs .th:hover .photo{ opacity:0.85; }

/* ============================================================
   TEMP FIX — 흰 배경 상품컷 톤보정 (2026-07 추가)
   브랜드 제공 이미지 중 흰 배경(누끼컷) 비중이 높아, 원본을
   일일이 편집하는 대신 mix-blend-mode(multiply)로 흰 영역만
   웜톤에 맞게 눌러주는 임시 처리.
   → 추후 원본 사진을 배경색 통일해서 교체하게 되면
     이 주석 사이 블록(TEMP FIX 시작~끝) 전체를 삭제할 것.
   적용 대상: 리스팅 카드 썸네일 + 모달 메인/서브 이미지
   (PC/태블릿/모바일 동일 클래스 재사용 → 반응형 전 구간 자동 적용)
   ============================================================ */
:root{
  --photo-tone-fix:#EFEAE0;   /* 톤보정 컬러 */
  --photo-tone-strength:0.55; /* 보정 강도 0~1, 값 낮출수록 원본에 가까움 */
}
.card .imgwrap,
.modal .mgallery .main,
.modal .mgallery .thumbs .th{
  isolation:isolate; /* 블렌드가 이 박스 밖으로 새어나가지 않도록 격리 */
}
.card .imgwrap::after,
.modal .mgallery .main::after,
.modal .mgallery .thumbs .th::after{
  content:"";
  position:absolute; inset:0;
  background:var(--photo-tone-fix);
  opacity:var(--photo-tone-strength);
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:1;
}
/* TEMP FIX 끝 ============================================== */

/* mbody: 헤더(브랜드/상품명/REF NO/태그)와 버튼은 고정, 설명·메타 영역(.mscroll)만 스크롤 */
.modal .mbody{
  padding:40px 40px 40px 36px; display:flex; flex-direction:column;
  overflow:hidden; box-sizing:border-box;
}
.modal .mtop{ flex-shrink:0; }
.modal .mclose{
  position:absolute; top:14px; right:14px; z-index:20;
  width:34px; height:34px; border-radius:50%; border:0.5px solid var(--rule);
  background:rgba(20,16,10,0.7); color:var(--on-photo); cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center; transition:all 0.2s ease;
}
.modal .mclose:hover{ border-color:var(--amber); color:var(--amber); }
.modal .mbrand{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; color:var(--amber); }
.modal .mname{ font-family:var(--font-kr); font-weight:700; font-size:30px; line-height:1.25; margin-top:10px; }
.modal .mrefno{ margin-top:8px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.05em; color:var(--muted); }
.modal .mtags{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.modal .mtags span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em; color:var(--muted);
  border:0.5px solid var(--rule); padding:4px 10px;
}
/* 설명 + 대여 상태만 담당하는 스크롤 영역 */
.modal .mscroll{
  flex:1; min-height:0; overflow-y:auto; margin-top:22px; padding-right:6px;
}
.modal .mdesc{ font-size:14.5px; line-height:1.9; color:var(--muted); white-space:pre-line; }
.modal .mmeta{
  margin-top:26px; padding-top:22px; border-top:0.5px solid var(--rule);
  display:flex; flex-direction:column; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; color:var(--muted);
}
.modal .mmeta .row{ display:flex; justify-content:space-between; }
.modal .mmeta .row b{ color:var(--paper); font-weight:500; }
.modal .mmeta .avail{ display:flex; align-items:center; gap:7px; }
.modal .mmeta .avail .dot{ width:5px; height:5px; border-radius:50%; background:var(--good); }
.modal .mmeta.unavailable .avail .dot{ background:var(--amber-dim); }
.modal .mmeta.available .avail b{ color:var(--good); }
.modal .mmeta.unavailable .avail b{ color:var(--amber); }
.modal .mbtnrow{ margin-top:22px; padding-top:22px; border-top:0.5px solid var(--rule); display:flex; gap:10px; flex-shrink:0; }
.modal .mbtnrow .btn{
  flex:1; text-align:center; font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.04em;
  padding:15px 10px; border:0.5px solid var(--rule); cursor:pointer; background:transparent; color:var(--paper);
  transition:all 0.2s ease;
}
.modal .mbtnrow .btn.primary{ background:var(--amber); color:var(--on-amber); border-color:var(--amber); font-weight:500; }
.modal .mbtnrow .btn.primary:hover{ background:#dda152; }
.modal .mbtnrow .btn.ghost:hover{ border-color:var(--amber-dim); color:var(--amber); }
/* 담기 완료 상태: 채워진 amber 대신 톤다운된 outline + 체크로 "이미 담김"을 표시 */
.modal .mbtnrow .btn.primary.added{
  background:transparent; color:var(--good); border-color:var(--good); font-weight:500;
}
.modal .mbtnrow .btn.primary.added:hover{ background:rgba(79,122,62,0.08); }

body.lock{ overflow:hidden; }

/* ---------- 카드 : 담긴 상품 표시 ---------- */
.card .cart-tag{
  display:none; align-items:center; gap:6px; margin-top:10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; color:var(--good);
}
.card .cart-tag::before{ content:'✓'; font-weight:700; }
.card.in-cart .cart-tag{ display:flex; }

/* ---------- 네비 장바구니 버튼 ---------- */
.nav-right{ display:flex; align-items:center; gap:26px; }
.cart-btn{
  position:relative; display:flex; align-items:center; gap:7px;
  background:transparent; border:0.5px solid var(--rule); cursor:pointer;
  padding:8px 13px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; color:var(--paper);
  transition:border-color 0.2s ease, color 0.2s ease;
}
.cart-btn:hover{ border-color:var(--amber-dim); color:var(--amber); }
.cart-btn .cart-count{
  display:grid; place-items:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px; box-sizing:border-box;
  background:var(--amber); color:var(--on-amber);
  font-family:var(--font-mono); font-size:10px; font-weight:700; line-height:1; text-align:center;
  transform:scale(1); transition:transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.cart-btn .cart-count.empty{ display:none; }
.cart-btn .cart-count.bump{ transform:scale(1.35); }
@media (max-width:760px){
  .nav-right{ gap:10px; }
  .cart-btn{ padding:7px 9px; gap:5px; font-size:10.5px; }
}
@media (max-width:400px){
  .cart-btn{ padding:6px 8px; font-size:10px; }
}

/* ---------- 토스트 ---------- */
.toast-wrap{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:130; display:flex; flex-direction:column; gap:10px; align-items:center;
  pointer-events:none;
}
.toast{
  pointer-events:auto; display:flex; align-items:center; gap:14px;
  background:var(--black); color:var(--on-photo); border:0.5px solid rgba(255,255,255,0.12);
  padding:13px 16px 13px 18px; min-width:300px; max-width:92vw;
  font-family:var(--font-body); font-size:13.5px; box-shadow:0 12px 32px rgba(0,0,0,0.28);
  opacity:0; transform:translateY(14px); transition:opacity 0.28s ease, transform 0.28s ease;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast .t-icon{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--amber);
  color:var(--on-amber); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}
.toast .t-body{ flex:1; line-height:1.5; }
.toast .t-title{ font-weight:500; }
.toast .t-sub{ margin-top:2px; font-size:12px; color:var(--muted); }
.toast .t-action{
  flex-shrink:0; background:transparent; border:0.5px solid rgba(255,255,255,0.25); color:var(--on-photo);
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; padding:8px 12px; cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.toast .t-action:hover{ border-color:var(--amber); color:var(--amber); }
.toast .t-close{
  flex-shrink:0; background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; padding:2px 4px;
}
.toast .t-close:hover{ color:var(--on-photo); }
@media (max-width:520px){
  .toast{ min-width:0; width:calc(100vw - 32px); flex-wrap:wrap; }
  .toast .t-action{ order:3; width:100%; text-align:center; margin-top:4px; }
}

/* ---------- 장바구니 드로어 ---------- */
.cart-overlay{
  position:fixed; inset:0; z-index:120; background:rgba(35,29,20,0.5); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity 0.3s ease;
}
.cart-overlay.show{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:420px; max-width:92vw;
  background:var(--bg); border-left:0.5px solid var(--rule);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform 0.35s cubic-bezier(.16,1,.3,1);
}
.cart-overlay.show .cart-drawer{ transform:translateX(0); }
.cart-drawer .cd-head{
  flex-shrink:0; padding:26px 24px 18px; border-bottom:0.5px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between;
}
.cart-drawer .cd-head-left{ display:flex; align-items:baseline; gap:12px; }
.cart-drawer .cd-head h2{ font-family:var(--font-kr); font-size:20px; font-weight:700; }
.cart-drawer .cd-clear{
  background:none; border:none; cursor:pointer; color:var(--muted); font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.02em; text-decoration:underline; text-underline-offset:2px;
  transition:color 0.2s ease;
}
.cart-drawer .cd-clear:hover{ color:var(--amber); }
.cart-drawer .cd-clear[hidden]{ display:none; }
.cart-drawer .cd-head .cd-close{
  width:30px; height:30px; border:0.5px solid var(--rule); background:transparent; cursor:pointer;
  color:var(--paper); font-size:14px; transition:border-color 0.2s ease, color 0.2s ease;
}
.cart-drawer .cd-head .cd-close:hover{ border-color:var(--amber); color:var(--amber); }
.cart-drawer .cd-list{ flex:1; overflow-y:auto; padding:8px 24px; }
.cart-drawer .cd-empty{
  padding:60px 10px; text-align:center; font-family:var(--font-mono); font-size:12.5px;
  color:var(--muted); line-height:1.9;
}
.cart-drawer .cd-item{
  display:flex; gap:14px; padding:18px 0; border-bottom:0.5px solid var(--rule);
}
.cart-drawer .cd-thumb{
  flex-shrink:0; width:74px; height:74px; background-size:cover; background-position:center; background-color:var(--panel-2);
}
.cart-drawer .cd-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.cart-drawer .cd-brand{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; color:var(--amber); }
.cart-drawer .cd-name{ font-size:14px; line-height:1.4; }
.cart-drawer .cd-refno{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); }
.cart-drawer .cd-row{ margin-top:4px; display:flex; align-items:center; justify-content:space-between; }
.cart-drawer .cd-qty{ display:flex; align-items:center; border:0.5px solid var(--rule); }
.cart-drawer .cd-qty button{
  width:26px; height:26px; background:transparent; border:none; cursor:pointer; font-size:13px; color:var(--paper);
}
.cart-drawer .cd-qty button:hover{ color:var(--amber); }
.cart-drawer .cd-qty span{ min-width:24px; text-align:center; font-family:var(--font-mono); font-size:12.5px; }
.cart-drawer .cd-remove{
  background:none; border:none; cursor:pointer; color:var(--muted); font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.02em; text-decoration:underline; text-underline-offset:2px;
}
.cart-drawer .cd-remove:hover{ color:var(--amber); }
.cart-drawer .cd-foot{
  flex-shrink:0; padding:20px 24px 26px; border-top:0.5px solid var(--rule);
}
.cart-drawer .cd-total{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;
  font-family:var(--font-mono); font-size:12.5px; color:var(--muted);
}
.cart-drawer .cd-total b{ color:var(--paper); font-size:15px; font-weight:500; }
.cart-drawer .cd-submit{
  width:100%; padding:16px 10px; background:var(--amber); color:var(--on-amber); border:none;
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.05em; font-weight:500; cursor:pointer;
  transition:background 0.2s ease;
}
.cart-drawer .cd-submit:hover{ background:#dda152; }
.cart-drawer .cd-submit:disabled{ background:var(--rule); color:var(--muted); cursor:not-allowed; }
.cart-drawer .cd-hint{ margin-top:10px; font-size:11.5px; color:var(--muted); text-align:center; line-height:1.6; }
@media (max-width:520px){
  .cart-drawer{ width:100%; max-width:100%; }
}

/* 태블릿/작은 노트북: 화면을 꽉 채우지 않고 상하좌우 여백 확보 */
@media (max-width:1180px) and (min-width:761px){
  .modal-overlay{ padding:32px; }
  .modal{ max-width:820px; max-height:82vh; }
}

/* 모바일: 사이즈 제약 없이 세로 1열.
   중요: 스크롤은 .modal이 아니라 안쪽 .minner에서만 일어나야 X 버튼이 고정된다.
   .mclose는 .modal의 직계 자식(position:absolute, .modal 기준 좌표)인데,
   만약 .modal 자체가 overflow-y:auto로 스크롤되면 .mclose도 그 스크롤 콘텐츠에
   포함되어 함께 밀려 올라가버린다. 반대로 .modal은 스크롤되지 않는 "틀"로 고정하고
   .minner만 내부에서 스크롤되게 하면, .mclose는 움직이지 않는 .modal 기준으로
   계속 같은 자리(우측 상단)에 남는다.
   .minner가 실제로 줄어들어 스크롤이 걸리게 하려면 flex-item 기본값인
   min-height:auto(=콘텐츠 크기만큼 안 줄어듦)를 min-height:0으로 풀어줘야 한다.
   이게 빠지면 .minner가 콘텐츠 크기만큼 계속 커지고, 넘치는 부분은
   .modal의 overflow:hidden에 의해 스크롤 없이 그냥 잘려버린다(이전 버그의 원인). */
@media (max-width:760px){
  .modal-overlay{
    padding:16px;
    align-items:center;
  }
  .modal{
    max-height:92vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .modal .minner{
    grid-template-columns:1fr;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    flex:1 1 auto;
    min-height:0;
  }
  .modal .mgallery{
    flex-shrink:0;
    overflow:visible;
  }
  .modal .mgallery .main{
    aspect-ratio:auto;
    height:clamp(260px, 56vh, 430px);
  }
  .modal .mgallery .main .field,
  .modal .mgallery .main .photo{
    background-size:cover;
    background-position:center top;
  }
  .modal .mgallery .thumbs{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
  }
  .modal .mgallery .thumbs .th{
    aspect-ratio:1/1;
    min-height:64px;
  }
  .modal .mclose{
    position:absolute;
    top:14px;
    right:14px;
    z-index:30;
  }
  .modal .mbody{ padding:30px 24px; overflow:visible; height:auto !important; }
  .modal .mscroll{ overflow-y:visible; flex:none; }
}

@media (max-width:860px){
  .rail{ width:18px; }
  .nav{ left:18px; padding:16px 18px; }
  .nav ul{ gap:16px; font-size:10.5px; }
  section{ margin-left:18px; }
  .phead{ padding:130px 20px 44px; }
  .filterbar{ margin-left:18px; padding:14px 20px; top:52px; }
  .lookbook{ margin-left:18px; padding:36px 20px 100px; }
}

@media (max-width:480px){
  .nav{ padding:14px 14px; }
  .nav .mark .full{ display:inline; }
  .nav ul{ gap:11px; font-size:9.5px; }
  .filterbar{ gap:8px; top:48px; }
  .filterbar .flabel{ display:none; }
  .chip{ padding:7px 12px; font-size:11px; }
  .phead{ padding:120px 18px 36px; }
  .phead h1{ font-size:clamp(30px,9vw,40px); }
}


@media (max-width:1200px){
  .phead{ margin-left:26px; }
  .filterbar{ margin-left:26px; }
  .lookbook{ margin-left:26px; }
}
@media (max-width:860px){
  .phead{ margin-left:18px; }
}



/* ============================================================
   FINAL MOBILE ALIGNMENT FIX
   모바일에서 좌측 필름 레일을 제외한 본문 영역을 하나의 기준으로 고정합니다.
   PC/태블릿 레이아웃에는 영향이 없도록 860px 이하에서만 적용합니다.
   ============================================================ */
@media (max-width:860px){
  :root{
    --mobile-rail-w:18px;
    --mobile-content-pad:20px;
  }

  .phead,
  .filterbar,
  .lookbook,
  .contact{
    margin-left:var(--mobile-rail-w) !important;
    width:calc(100vw - var(--mobile-rail-w)) !important;
    max-width:calc(100vw - var(--mobile-rail-w)) !important;
  }

  .phead,
  .filterbar,
  .lookbook{
    padding-left:var(--mobile-content-pad) !important;
    padding-right:var(--mobile-content-pad) !important;
  }

  .lookbook .grid,
  .card,
  .card .imgwrap{
    width:100% !important;
    max-width:100% !important;
  }
}

@media (max-width:480px){
  :root{
    --mobile-content-pad:20px;
  }
}



/* ============================================================
   Mobile 2-column product grid version
   - PC/Tablet layout remains unchanged
   - On mobile, product cards are shown in 2 columns
   ============================================================ */
@media (max-width:860px){
  .lookbook .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:26px 12px !important;
  }

  .card{
    min-width:0 !important;
  }

  .card .info{
    padding-top:12px !important;
    gap:5px !important;
  }

  .card .brand{
    font-size:10px !important;
  }

  .card .name{
    font-size:15px !important;
    line-height:1.35 !important;
    word-break:keep-all;
  }

  .card .refno{
    font-size:9px !important;
    letter-spacing:0.02em !important;
    word-break:break-word;
  }

  .card .desc{
    font-size:12px !important;
    line-height:1.55 !important;
    -webkit-line-clamp:1 !important;
  }

  .card .meta{
    font-size:10.5px !important;
    gap:5px !important;
    flex-wrap:wrap;
  }

  .card .tagpills{
    top:10px !important;
    left:10px !important;
    gap:4px !important;
  }

  .card .tagpill{
    font-size:8.5px !important;
    padding:4px 7px !important;
  }

  .card .swatches{
    left:10px !important;
    bottom:10px !important;
    gap:6px !important;
  }

  .card .btnrow{
    margin-top:9px !important;
    gap:5px !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
  }

  .card .btn{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    padding:9px 3px !important;
    font-size:9.5px !important;
    white-space:nowrap !important;
  }
}

@media (max-width:360px){
  .lookbook{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .lookbook .grid{
    gap:24px 10px !important;
  }

  .card .name{
    font-size:14px !important;
  }
}
@media (max-width:480px){
  .modal .mname{
    font-size:20px;
    line-height:1.35;
    letter-spacing:-0.02em;
  }
}

/* ==========================================
   🚨 PC 화면 햄버거 카테고리 팝업 미노출 버그 최종 패치
   ========================================== */
@media (min-width: 861px) {
  .menu-overlay {
    top: 0 !important;
    bottom: 0 !important;
    left: 34px !important; /* 왼쪽 레일 바(34px) 바로 옆에 밀착 */
    right: auto !important;
    width: fit-content !important;
    min-width: 480px !important;
    max-width: 90vw !important;
    box-shadow: 0 30px 70px rgba(35,29,20,0.22) !important;
  }
}

/* Header menu behavior overrides */