/* LUMiEN MODEL — 공용 디자인 시스템 (2026-09-17)
 *
 * 패션 브랜드 홈페이지처럼 보여야 한다. 사진과 영상이 주인공이고
 * 글자는 짧고 강하다. 검정과 따뜻한 흰을 번갈아 두어 매거진처럼 넘어간다.
 *
 * 색·글꼴·여백을 여기서만 정한다. 페이지에서 색을 직접 적지 않는다. */

:root{
  /* 색 — 브리프: Black / White / Warm Gray / Soft Gold, 포인트 Emerald */
  --black:#0c0c0e;
  --ink:#16161a;
  --ink-soft:#1e1e23;
  --white:#ffffff;
  --paper:#f6f4f1;          /* 따뜻한 흰 */
  --paper-2:#ebe7e1;
  --warm:#a9a29a;           /* warm gray */
  --warm-dark:#6f6a64;
  --gold:#c9a862;           /* soft gold */
  --gold-lit:#e3cd9b;       /* 어두운 바탕 위 */
  --emerald:#1f6f5c;
  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(12,12,14,.12);

  /* 글꼴 — 영문 제목은 하이패션 세리프, 한글은 가독성 산세리프 */
  --serif:'Cormorant Garamond','Apple SD Gothic Neo',Georgia,serif;
  --sans:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;

  /* 여백 — 8 배수 */
  --gut:20px;               /* 화면 좌우 최소 여백 */
  --sec-y:72px;             /* 섹션 상하 */
  --max:1240px;
  --header-h:64px;
}
@media (min-width:768px){
  :root{ --gut:40px; --sec-y:112px; --header-h:76px; }
}
@media (min-width:1200px){
  :root{ --gut:56px; --sec-y:128px; }
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--black);
  color:var(--paper);
  font-size:16px;
  line-height:1.72;
  word-break:keep-all;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--gold);color:var(--black)}
:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ───────── 머리 ───────── */
/* 머리는 늘 읽혀야 한다. 히어로 사진이 밝은 쪽이라 투명하게 두면 메뉴가 사라진다.
   내려가면 조금 더 짙어지고 아래 선이 생긴다. */
.l-hd{
  position:fixed;top:0;left:0;right:0;z-index:90;
  height:var(--header-h);display:flex;align-items:center;
  background:linear-gradient(to bottom,rgba(8,8,10,.86),rgba(8,8,10,.6));
  backdrop-filter:blur(10px);
  transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.l-hd.solid{background:rgba(12,12,14,.93);border-bottom-color:var(--line-dark)}
.l-hd .in{max-width:var(--max);margin:0 auto;padding-inline:var(--gut);width:100%;display:flex;align-items:center;gap:16px}
.mark{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.1em;color:var(--white);white-space:nowrap}
.mark i{font-style:normal;color:var(--gold-lit)}
.l-hd .sp{flex:1}
.l-nav{display:none;gap:19px;align-items:center}
@media (min-width:1280px){ .l-nav{gap:26px} }
.l-nav a{font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--paper);opacity:.82;transition:opacity .2s,color .2s}
.l-nav a:hover{opacity:1;color:var(--gold-lit)}
.hd-cta{
  border:1px solid var(--gold);color:var(--gold-lit);
  font-size:12px;font-weight:700;letter-spacing:.14em;padding:10px 16px;
  transition:background .2s,color .2s;white-space:nowrap;
}
.hd-cta:hover{background:var(--gold);color:var(--black)}
.burger{width:44px;height:44px;display:grid;place-items:center;margin-right:-10px}
.burger span{display:block;width:22px;height:1.5px;background:var(--white);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--white)}
.burger span::before{top:-7px}.burger span::after{top:7px}
@media (min-width:1024px){ .l-nav{display:flex} .burger{display:none} }

/* 모바일 전체화면 메뉴 */
.l-menu{
  position:fixed;inset:0;z-index:95;background:var(--black);
  display:flex;flex-direction:column;padding:calc(var(--header-h) + 18px) var(--gut) 32px;
  opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
/* 키 작은 화면(구형 폰)에서 여덟 줄이 다 들어가게 */
@media (max-height:740px){
  .l-menu a{font-size:24px;padding:10px 0}
  .l-menu .foot{padding-top:18px}
}
.l-menu.open{opacity:1;visibility:visible}
.l-menu .x{position:absolute;top:10px;right:calc(var(--gut) - 10px);width:44px;height:44px;font-size:26px;color:var(--white);line-height:1}
.l-menu a{
  font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:.04em;
  color:var(--paper);padding:13px 0;border-bottom:1px solid var(--line-dark);
  display:flex;align-items:baseline;gap:12px;
}
.l-menu a em{font-family:var(--sans);font-style:normal;font-size:12.5px;font-weight:500;color:var(--warm);letter-spacing:.06em}
.l-menu .foot{margin-top:auto;padding-top:24px;font-size:13px;color:var(--warm)}

/* ───────── 섹션 공통 ───────── */
.l-sec{padding-block:var(--sec-y)}
.l-sec.paper{background:var(--paper);color:var(--ink)}
.l-sec.ink{background:var(--ink)}
.l-sec.flush{padding-block:0}

.sec-head{margin-bottom:38px}
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--gold);margin-bottom:16px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.3}
.paper .eyebrow{color:var(--warm-dark)}
h1,h2,h3{font-weight:500;letter-spacing:-.02em;text-wrap:balance}
.h-en{font-family:var(--serif);font-weight:500;letter-spacing:.02em}
h2{font-size:clamp(27px,5.4vw,42px);line-height:1.26}
h3{font-size:clamp(19px,2.4vw,23px);line-height:1.34}
.sec-head p{margin-top:14px;color:var(--warm);font-size:16.5px;max-width:40em}
.paper .sec-head p{color:var(--warm-dark)}

/* ───────── 단추 ───────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:16px 28px;font-size:15px;font-weight:700;letter-spacing:.04em;
  transition:background .22s,color .22s,border-color .22s;text-align:center;
}
.btn-gold{background:var(--gold);color:var(--black)}
.btn-gold:hover{background:var(--gold-lit)}
.btn-line{border:1px solid rgba(255,255,255,.4);color:var(--white)}
.btn-line:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.paper .btn-line{border-color:rgba(12,12,14,.35);color:var(--ink)}
.paper .btn-line:hover{background:rgba(12,12,14,.05);border-color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:var(--black)}
.btn-full{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btns .btn{flex:1 1 220px}

.arrow{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--gold);display:inline-flex;gap:9px;align-items:center}
.arrow:hover{color:var(--gold-lit)}
.paper .arrow{color:var(--warm-dark)}
.paper .arrow:hover{color:var(--ink)}

/* ───────── 사진 슬롯 ─────────
 * 사진이 아직 없는 자리는 깨진 이미지가 아니라 의도된 빈 판으로 보이게 한다.
 * 사진이 들어오면 <img> 를 넣으면 그대로 덮인다. */
.slot{position:relative;overflow:hidden;background:var(--ink-soft);isolation:isolate;
  border:1px solid rgba(201,168,98,.2)}
.paper .slot{background:var(--paper-2);border-color:rgba(12,12,14,.1)}
/* 사진이 없는 자리는 깨진 칸이 아니라 잡아둔 프레임으로 읽히게 안쪽 선을 하나 더 둔다 */
.slot::before{content:"";position:absolute;inset:9px;border:1px solid rgba(201,168,98,.13);pointer-events:none;z-index:1}
.paper .slot::before{border-color:rgba(12,12,14,.07)}
.slot.has-img{border-color:transparent}
.slot.has-img::before{display:none}
.slot::after{
  content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--serif);font-size:13px;letter-spacing:.24em;color:var(--warm);
  opacity:.5;text-align:center;padding:12px;
}
.slot.has-img::after{display:none}
.slot img,.slot video{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.slot video{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.slot video.on{opacity:1}
.slot:hover img{transform:scale(1.035)}
.r-11{aspect-ratio:1/1}
.r-34{aspect-ratio:3/4}
.r-45{aspect-ratio:4/5}
.r-916{aspect-ratio:9/16}
.r-169{aspect-ratio:16/9}

/* ───────── 격자 ───────── */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){ .tiles{gap:18px;grid-template-columns:repeat(3,1fr)} }
.tile{position:relative;display:block}
.tile .cap{padding-top:14px}
.tile .no{font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:5px}
.paper .tile .no{color:var(--warm-dark)}
.tile b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.06em}
.tile span{display:block;font-size:14px;color:var(--warm);margin-top:4px;line-height:1.55}
.paper .tile span{color:var(--warm-dark)}

/* ───────── 가로 스크롤 레일 ───────── */
.rail{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{flex:0 0 min(62vw,260px);scroll-snap-align:start}
@media (min-width:860px){ .rail{gap:18px} .rail > *{flex:0 0 288px} }

/* ───────── 회원 카드 ───────── */
.mcard .cap{padding-top:13px}
.mcard b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.mcard span{display:block;font-size:13px;color:var(--warm);margin-top:3px;letter-spacing:.04em}

/* ───────── 넓은 사진 + 글 ───────── */
.split{display:grid;gap:26px;align-items:center}
@media (min-width:900px){ .split{grid-template-columns:1fr 1fr;gap:56px} .split.wide{grid-template-columns:1.25fr 1fr} }

/* ───────── 인용 ───────── */
.quote{
  font-family:var(--serif);font-size:clamp(21px,3.4vw,31px);line-height:1.5;
  font-weight:500;letter-spacing:.01em;
}
.quote b{color:var(--gold-lit);font-weight:600}
.paper .quote b{color:var(--gold)}
.quote-by{margin-top:16px;font-size:12.5px;letter-spacing:.18em;color:var(--warm)}

/* ───────── 표 같은 목록 ───────── */
.rows{border-top:1px solid var(--line-dark)}
.paper .rows{border-top-color:var(--line-light)}
.row{display:flex;gap:18px;padding:19px 0;border-bottom:1px solid var(--line-dark);align-items:flex-start}
.paper .row{border-bottom-color:var(--line-light)}
.row .k{flex:0 0 84px;font-family:var(--serif);font-size:13.5px;letter-spacing:.18em;color:var(--gold);padding-top:4px}
.paper .row .k{color:var(--warm-dark)}
.row .v b{display:block;font-size:17.5px;font-weight:700;letter-spacing:-.01em}
.row .v p{color:var(--warm);font-size:15px;margin-top:4px}
.paper .row .v p{color:var(--warm-dark)}
@media (min-width:768px){ .row .k{flex-basis:132px;font-size:14.5px} }

/* ───────── 푸터 ───────── */
.l-ft{background:var(--black);border-top:1px solid var(--line-dark);padding-block:52px 40px}
.l-ft .top{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
.l-ft .mark{font-size:22px}
.l-ft nav{display:grid;grid-template-columns:repeat(2,minmax(120px,auto));gap:10px 34px}
.l-ft nav a{font-size:13.5px;color:var(--warm);letter-spacing:.04em}
.l-ft nav a:hover{color:var(--paper)}
.l-ft .bot{margin-top:38px;padding-top:22px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:var(--warm-dark)}
.l-ft .sns{display:flex;gap:14px}
.l-ft .sns a{color:var(--warm);font-size:12.5px;letter-spacing:.14em}
.l-ft .sns a:hover{color:var(--gold-lit)}

/* ───────── 상세 창 (모달) ─────────
 * 메뉴를 누르면 뜨는 창. 좁은 화면에서는 아래에서 올라오는 시트,
 * 넓은 화면에서는 가운데 카드로 뜬다.
 * 키보드로도 닫히고(Esc), 창 안에서만 초점이 돌게 가둔다. */
.l-modal{position:fixed;inset:0;z-index:100;visibility:hidden;opacity:0;
  transition:opacity .22s ease,visibility .22s ease}
.l-modal.open{visibility:visible;opacity:1}
.l-modal .veil{position:absolute;inset:0;background:rgba(6,6,8,.8);backdrop-filter:blur(7px)}
/* 자리잡기용 칸이다. 눌림은 받지 않는다 — 창 바깥을 누르면 아래 막이 받아서 닫힌다. */
.l-modal .pos{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;
  padding:0;pointer-events:none}
.l-modal .l-sheet{pointer-events:auto}
.l-sheet{position:relative;width:100%;max-width:640px;max-height:92vh;overflow-y:auto;
  background:var(--ink);border:1px solid var(--line-dark);border-bottom:0;
  border-radius:18px 18px 0 0;padding:26px 20px calc(30px + env(safe-area-inset-bottom,0px));
  transform:translateY(14px);transition:transform .26s cubic-bezier(.2,.8,.2,1);
  -webkit-overflow-scrolling:touch}
.l-modal.open .l-sheet{transform:none}
@media (min-width:768px){
  .l-modal .pos{align-items:center;padding:24px}
  .l-sheet{border-radius:16px;border-bottom:1px solid var(--line-dark);
    padding:34px 34px 32px;max-height:86vh}
}
.l-sheet .x{position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;
  font-size:26px;line-height:1;color:var(--warm);border-radius:50%}
.l-sheet .x:hover{color:var(--paper);background:rgba(255,255,255,.06)}
.l-sheet .x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.l-sheet .eyebrow{margin:0 40px 12px 0}
.l-sheet h3{font-family:var(--sans);font-size:clamp(21px,4.4vw,27px);font-weight:700;
  line-height:1.3;letter-spacing:-.4px;margin-right:36px}
.l-sheet .lead{margin-top:14px;color:#d9d4cd;font-size:16.5px;line-height:1.72}
.l-sheet .lead b{color:var(--paper);font-weight:700}
.l-sheet .rows{margin-top:22px}
.l-sheet .row{padding:15px 0}
.l-sheet .row .k{flex-basis:78px;font-size:12.5px;letter-spacing:.14em}
.l-sheet .row .v b{font-size:16px}
.l-sheet .row .v p{font-size:14.5px;margin-top:3px}
.l-sheet ul{margin-top:18px;display:flex;flex-direction:column;gap:9px;list-style:none}
.l-sheet ul li{position:relative;padding-left:18px;color:var(--warm);font-size:15.5px;line-height:1.6}
.l-sheet ul li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--gold)}
.l-sheet ul li b{color:var(--paper);font-weight:700}
.l-sheet .soon{margin-top:20px;padding:14px 15px;border:1px dashed var(--line-dark);
  background:rgba(201,168,98,.07);font-size:14.5px;color:var(--gold-lit);line-height:1.6}
.l-sheet .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.l-sheet .acts .btn{flex:1 1 200px;min-height:52px;font-size:15.5px;padding:14px 20px}
body.locked{overflow:hidden}

/* 누를 수 있는 것은 누를 수 있게 보인다 */
.tile.tap{cursor:pointer;text-align:left;width:100%;background:none;border:0;
  transition:transform .16s ease}
.tile.tap:hover{transform:translateY(-3px)}
.tile.tap:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.tile.tap .more{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--gold)}
.paper .tile.tap .more{color:var(--warm-dark)}

/* ───────── 스크롤 등장 ─────────
 * 브리프: 과한 효과 금지. Fade 와 8px 상승까지만.
 * 자바스크립트가 죽어도 글이 보여야 하므로 .js 가 붙은 뒤에만 숨긴다. */
.js .reveal{opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .slot img{transition:none}
  .slot:hover img{transform:none}
  *{animation:none!important}
}