/* 06 · 미드나이트 라운지 — 블랙 · 웜그레이 · 샴페인 골드 헤어라인
   모바일 우선. 사진은 한 장(hero)뿐 — 모바일 전체 폭, PC 는 최대 560px 세로 패널. */

:root {
  --bg: #0E0D0C;
  --bg-2: #141210;
  --bg-3: #1A1816;
  --soft: #2A2724;
  --fg: #EDE7DE;
  --body: #CBC3B7;
  --muted: #ADA497;
  --gold: #D8C3A0;
  --gold-dim: rgba(216, 195, 160, .38);
  --line: rgba(216, 195, 160, .24);
  --line-2: rgba(237, 231, 222, .09);
  --serif: 'Nanum Myeongjo', 'AppleMyungjo', 'Batang', serif;
  --sans: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* 공통 부품 색 */
  --bar-bg: rgba(14, 13, 12, .94);
  --bar-visit-bg: #D8C3A0;
  --bar-visit-fg: #0E0D0C;
  --bar-tg-bg: #2A2724;
  --bar-tg-fg: #EDE7DE;
  --float-bg: #1C1A17;
  --float-fg: #EDE7DE;
  --focus: #D8C3A0;
  --ph-bg: #1A1816;
  --banner-radius: 2px;
  --banner-max: 880px;
  --banner-pad: 8px 20px 0;
}

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(216, 195, 160, .3); color: var(--fg); }

/* 느리고 부드러운 등장 */
.reveal { transform: translateY(12px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.hero .reveal.hero-copy { transition-delay: .15s; }

.wrap { width: min(100% - 44px, 1120px); margin-inline: auto; }
.br-m { display: inline; }

/* ── 머리 ─────────────────────────── */
.top { position: relative; z-index: 5; border-bottom: 1px solid var(--line-2); background: var(--bg); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100% - 32px, 1280px); min-height: 64px; margin-inline: auto; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; color: var(--fg); }
.logo-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--gold-dim); font-family: var(--serif); font-size: 14px; color: var(--gold); }
.logo-text { font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .08em; }
.top-tag { display: none; font-family: var(--serif); font-size: 14px; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }
.top-tag span { color: var(--gold); margin-left: .6em; }
.top-enter { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; font-size: 15px; letter-spacing: .12em; color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; }
.top-enter:hover { border-bottom-color: var(--gold-dim); }

/* ── 첫 화면 ───────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero-in { position: relative; }
.hero-photo { position: relative; }
.hero-ph { aspect-ratio: 4 / 5; background: var(--ph-bg); }
.hero-ph img { filter: saturate(.86) contrast(1.02) brightness(.94); }
.hero-ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(14, 13, 12, .35) 0%, rgba(14, 13, 12, 0) 16%),
    linear-gradient(to top, var(--bg) 0%, rgba(14, 13, 12, .88) 14%, rgba(14, 13, 12, .2) 42%, rgba(14, 13, 12, 0) 60%),
    radial-gradient(120% 90% at 60% 30%, rgba(14, 13, 12, 0) 55%, rgba(14, 13, 12, .45) 100%);
}
.hero-vert { display: none; }

.hero-copy { position: relative; z-index: 2; margin-top: -112px; padding: 0 22px 8px; }
.eyebrow, .sec-no {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--serif); font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
}
.rule { display: inline-block; width: 36px; height: 1px; background: var(--gold-dim); flex: none; }
.hero-title {
  margin-top: 18px;
  font-family: var(--serif); font-weight: 700; color: var(--fg);
  font-size: clamp(34px, 9.6vw, 44px); line-height: 1.32; letter-spacing: .02em;
}
.hero-lead { margin-top: 20px; font-size: 17px; line-height: 1.85; color: var(--body); }
.hero-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 34px; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* 버튼 */
.tg-btn.tg-primary {
  justify-content: center; gap: 14px; min-height: 58px; padding: 12px 30px; border-radius: 2px;
  background: var(--gold); color: #0E0D0C; border: 1px solid var(--gold);
  font-weight: 500; font-size: 16px; letter-spacing: .04em;
  transition: background .6s var(--ease), color .6s var(--ease);
}
.tg-btn.tg-primary svg { width: 22px; height: 22px; }
.tg-btn.tg-primary .tg-text { text-align: center; }
.tg-btn.tg-primary:hover { background: transparent; color: var(--gold); }
.float-tg { border-radius: 2px; border: 1px solid var(--gold-dim); font-weight: 500; font-size: 15px; }
.float-tg svg { color: var(--gold); }
.float-tg .tg-handle { color: var(--muted); opacity: 1; }
.mbar { border-top: 1px solid var(--line-2); box-shadow: none; }
.mbar a { border-radius: 2px; font-weight: 500; }
.mbar .mbar-tg svg { color: var(--gold); }

/* 배너 감싸개 */
.banner-wrap { margin-top: 72px; }
.bw-first { margin-top: 56px; }

/* ── 섹션 공통 ─────────────────────── */
.sec { position: relative; padding-top: 104px; }
.sec + .sec::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 56px; background: linear-gradient(var(--line), rgba(216, 195, 160, 0));
}
.sec-no .num { min-width: 1.4em; font-size: 15px; letter-spacing: .12em; }
.sec-title {
  margin-top: 20px;
  font-family: var(--serif); font-weight: 700; color: var(--fg);
  font-size: clamp(27px, 7.4vw, 34px); line-height: 1.42; letter-spacing: .03em;
}
.sub-title { margin-top: 12px; font-family: var(--serif); font-size: 17px; line-height: 1.7; color: var(--gold); letter-spacing: .02em; }
.sec p + p { margin-top: 14px; }
.sec-head.center { text-align: center; }
.vip::before { display: none; }
p, h3 { text-wrap: pretty; }
.sec-head.center .sec-no { justify-content: center; }
.small { font-size: 14px; color: var(--muted); }

.link-line {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 26px;
  color: var(--gold); text-decoration: none; font-size: 15px; letter-spacing: .1em;
  border-bottom: 1px solid var(--gold-dim);
  transition: border-color .6s var(--ease), gap .6s var(--ease);
}
.link-line svg { width: 18px; height: 18px; }
.link-line:hover { border-bottom-color: var(--gold); gap: 18px; }

/* I. 라운지 소개 */
.intro .sec-head .lead { margin-top: 28px; }
.intro-body { margin-top: 8px; }
.intro .lead { font-size: 17px; color: var(--fg); line-height: 1.9; }
.guide { margin-top: 44px; border-top: 1px solid var(--line); }
.guide-title { padding: 16px 0 6px; font-family: var(--serif); font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.guide li { border-bottom: 1px solid var(--line-2); }
.guide a {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 8px;
  align-items: baseline; padding: 14px 0; min-height: 56px; text-decoration: none; color: var(--fg);
  transition: padding-left .7s var(--ease), color .6s var(--ease);
}
.guide .g-no { grid-row: span 2; font-family: var(--serif); font-size: 15px; color: var(--gold); letter-spacing: .08em; }
.guide .g-name { font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: .03em; }
.guide .g-en { font-size: 14px; color: var(--muted); letter-spacing: .14em; }
.guide a:hover { padding-left: 8px; color: var(--gold); }

/* II. VIP사진관 */
.vip { background: linear-gradient(to bottom, var(--bg), var(--bg-2) 30%, var(--bg-2) 70%, var(--bg)); padding-bottom: 16px; }
.vip-art { width: min(100%, 340px); margin: 0 auto 40px; }
.vip-art svg { width: 100%; height: auto; }
.vip-copy { position: relative; }

/* III. 일반사진관 */
.daily-art { margin-top: 48px; padding: 28px 12px 18px; border: 1px solid var(--line-2); background: var(--bg-2); }
.daily-art svg { width: 100%; height: auto; }

/* IV. 메뉴판 */
.menu-card {
  position: relative; margin-top: 44px; padding: 34px 22px 30px;
  border: 1px solid var(--line); background: var(--bg-2);
}
.menu-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line-2); pointer-events: none; }
.menu-cap { text-align: center; font-family: var(--serif); font-size: 14px; letter-spacing: .36em; text-transform: uppercase; color: var(--muted); }
.menu-cap::before, .menu-cap::after { content: "—"; margin: 0 .8em; color: var(--gold-dim); letter-spacing: 0; }
.menu-list { margin-top: 18px; }
.menu-list li + li { border-top: 1px solid var(--line-2); }
.m-item { display: block; padding: 20px 0; }
.m-row { display: flex; align-items: baseline; gap: 10px; }
.m-name { font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--fg); letter-spacing: .03em; transition: color .6s var(--ease); }
.m-dots { flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted var(--gold-dim); transform: translateY(-5px); }
.m-tag { flex: none; font-family: var(--serif); font-size: 14px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.m-desc { display: block; margin-top: 8px; font-size: 16px; line-height: 1.75; color: var(--body); }
.menu-link { margin-top: 8px; }
.notice { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.7; color: var(--muted); }
.notice.center { text-align: center; border-top: 0; }

/* V. 입장 안내 */
.steps { margin-top: 44px; border-top: 1px solid var(--line); }
.steps li { position: relative; padding: 26px 0 26px 58px; border-bottom: 1px solid var(--line-2); }
.steps .s-no { position: absolute; left: 0; top: 26px; font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--gold); letter-spacing: .04em; }
.steps h3 { font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.5; color: var(--fg); letter-spacing: .03em; }
.steps p { margin-top: 6px; }

.final { margin-top: 64px; padding: 52px 0 8px; text-align: center; border-top: 1px solid var(--line); position: relative; }
.final::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; background: var(--bg); border: 1px solid var(--gold); transform: translateX(-50%) rotate(45deg); }
.final-title { font-family: var(--serif); font-weight: 700; font-size: clamp(25px, 7vw, 36px); line-height: 1.45; color: var(--fg); letter-spacing: .04em; }
.final-lead { margin-top: 12px; color: var(--body); }
.final-actions { display: flex; flex-direction: column; gap: 12px; margin: 34px auto 0; max-width: 420px; }

/* 바닥 */
.foot { margin-top: 96px; border-top: 1px solid var(--line-2); padding-top: 40px; padding-bottom: 32px; text-align: center; }
.foot-logo { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: .1em; color: var(--fg); }
.foot-sub { margin-top: 6px; font-family: var(--serif); font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.foot-copy { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* ── 작은 폰 ── */
@media (max-width: 374px) {
  .wrap { width: min(100% - 36px, 1120px); }
  .hero-copy { padding-inline: 18px; }
  .eyebrow, .sec-no { letter-spacing: .24em; }
  .menu-card { padding-inline: 16px; }
  .tg-btn.tg-primary { padding-inline: 16px; }
}

/* ── 태블릿 ── */
@media (min-width: 600px) {
  .br-m { display: none; }
  .hero-ph { aspect-ratio: auto; height: min(78vh, 760px); width: min(100%, 560px); margin-inline: auto; }
  .hero-copy { width: min(100% - 64px, 560px); margin-inline: auto; padding-inline: 0; }
  .hero-actions, .final-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .hero-actions { justify-content: flex-start; }
  .menu-card { padding: 44px 44px 36px; }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; border-top: 0; }
  .steps li { padding: 30px 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
  .steps .s-no { position: static; display: block; margin-bottom: 14px; }
  .final-actions { max-width: none; }
}

/* ── PC ── */
@media (min-width: 900px) {
  body { font-size: 17px; }
  .top-tag { display: block; }
  .top-in { min-height: 76px; }
  .top { position: absolute; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; }

  .hero-in {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: center; column-gap: clamp(40px, 5vw, 88px);
    width: min(100% - 80px, 1200px); margin-inline: auto; min-height: min(100vh, 940px); padding-top: 76px;
  }
  .hero-photo { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; align-items: center; }
  .hero-ph { width: 100%; height: clamp(620px, calc(100vh - 110px), 830px); margin: 0; }
  .hero-ph::after {
    background:
      linear-gradient(to right, var(--bg) 0%, rgba(14, 13, 12, .55) 12%, rgba(14, 13, 12, 0) 34%),
      linear-gradient(to top, var(--bg) 0%, rgba(14, 13, 12, .6) 12%, rgba(14, 13, 12, 0) 34%),
      linear-gradient(to bottom, var(--bg) 0%, rgba(14, 13, 12, 0) 14%),
      linear-gradient(to left, rgba(14, 13, 12, .5) 0%, rgba(14, 13, 12, 0) 14%);
  }
  .hero-photo::before {
    content: ""; position: absolute; z-index: 1; top: 50%; left: 28%; right: -18px; height: calc(clamp(620px, calc(100vh - 110px), 830px) + 36px);
    transform: translateY(-50%); border: 1px solid var(--line); border-left: 0; pointer-events: none;
  }
  .hero-vert {
    display: block; position: absolute; z-index: 2; right: -52px; top: 50%; transform: translateY(-50%);
    writing-mode: vertical-rl; font-family: var(--serif); font-size: 14px; letter-spacing: .42em; text-transform: uppercase; color: var(--muted);
  }
  .hero-copy { grid-column: 1; grid-row: 1; width: auto; margin: 0; padding: 0 0 20px; }
  .hero-title { font-size: clamp(46px, 4.6vw, 66px); line-height: 1.26; margin-top: 26px; }
  .hero-lead { font-size: 19px; margin-top: 28px; }
  .hero-actions { margin-top: 44px; }

  .banner-wrap { margin-top: 110px; }
  .bw-first { margin-top: 40px; }
  .sec { padding-top: 168px; }
  .sec + .sec::before { height: 88px; }
  .sec-title { font-size: clamp(34px, 3.2vw, 44px); }
  .sub-title { font-size: 19px; }

  .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .intro-body { margin-top: 0; padding-top: 6px; }
  .intro .guide { margin-top: 0; }
  .banner-wrap { --banner-max: 720px; }

  .vip-grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 96px; align-items: center; max-width: 1040px; }
  .vip-art { width: 100%; margin: 0; }
  .vip-copy { max-width: 460px; }

  .daily-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 96px; align-items: center; max-width: 1040px; }
  .daily-art { margin-top: 0; padding: 40px 28px 24px; }

  .menu .wrap { max-width: 760px; }
  .menu-card { padding: 52px 64px 44px; margin-top: 56px; }
  .m-name { font-size: 22px; }

  .enter .wrap { max-width: 980px; }
  .steps { margin-top: 60px; gap: 0 44px; }
  .final { margin-top: 80px; padding-top: 72px; }
  .final-actions { margin-top: 42px; }
  .foot { margin-top: 120px; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .hero-vert { display: none; }
  .hero-photo::before { right: 0; }
}

@media (hover: none) {
  .guide a:hover { padding-left: 0; }
}