/* =============================================================
   Bar.Kor.D — styles
   레퍼런스 레이아웃: Topgolf (다크 + 인터랙티브 요일 가격).
   색상: 바코드 로고 팔레트 (차콜 / 오렌지 / 소주 그린 / 크림).
   모바일 우선.
   ============================================================= */

/* ---- 브랜드 색상 (로고 확정) ---- */
:root {
  --charcoal:   #2a2a2a;   /* 헤더 / 다크 섹션 */
  --charcoal-2: #1b1b1b;   /* 인터랙티브 가격 위젯 배경 */
  --charcoal-3: #333333;   /* 카드 / 탭 배경 */
  --gray:       #565656;   /* 로고 그레이 */
  --orange:     #ee8b22;   /* 주 강조 / CTA / 할인 하이라이트 */
  --orange-dk:  #d4761a;
  --green:      #5fb23c;   /* 소주 그린, 보조 강조 */
  --cream:      #faf7f1;   /* 밝은 배경 */
  --ink:        #222222;   /* 본문 텍스트 */
  --line:       rgba(255,255,255,0.14);

  --maxw: 1120px;
  --gap: 1rem;
  --header-h: 64px;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", sans-serif;
  --font-head: "Arial Black", "Segoe UI", system-ui, sans-serif; /* TODO: 브랜드 폰트 확정 */
}

/* ---- 최소 리셋 ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 0.5em; }
ul { margin: 0; padding: 0; list-style: none; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }
.section { padding: 3rem 0; }
.section--dark { background: var(--charcoal); color: var(--cream); }
.section__title { font-size: clamp(1.6rem, 5vw, 2.4rem); text-align: center; }
.eyebrow {
  display: block; text-align: center; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.8rem; font-weight: 700; color: var(--orange);
}

/* ---- 버튼 ---- */
.btn {
  display: inline-block; padding: 0.7rem 1.4rem; border-radius: 4px;
  font-weight: 700; text-decoration: none; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 0.9rem; cursor: pointer; border: 2px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-dk); }
.btn--ghost { background: transparent; color: #fff; border-color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--charcoal); }

/* ---- 헤더 (흰색 · 중앙 로고 · 스크롤 시 로고 사라지고 내비만 고정) ---- */
.topbar {
  text-align: center; background: #fff; color: #555;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 0.5rem 1rem; border-bottom: 1px solid #ececec;
}
.site-masthead { background: #fff; text-align: center; padding: 1.1rem 1rem 0.9rem; }
.brand { display: inline-block; text-decoration: none; }
.brand__logo { height: 56px; width: auto; }

/* 스티키 내비: 매스트헤드(로고)가 위로 스크롤되어 사라지면 이 바가 상단에 고정됨 */
.site-nav {
  position: sticky; top: 0; z-index: 100; text-align: center;
  background: #fff; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec;
  transition: box-shadow .2s ease;
}
.site-nav.is-stuck { box-shadow: 0 2px 12px rgba(0,0,0,0.12); }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 11px; background: transparent; border: 0; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: #333; }

.nav-menu { display: none; flex-direction: column; padding: 0.25rem 1rem 0.75rem; margin: 0; }
.nav-menu.is-open { display: flex; }
.nav-menu a {
  display: block; padding: 0.7rem 0.25rem; text-decoration: none; color: #3a3a3a;
  text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; font-size: 0.9rem;
}
.nav-menu a[aria-current="page"], .nav-menu a:hover { color: var(--orange); }

/* ---- 히어로 ---- */
.hero {
  position: relative; min-height: 72vh; display: flex; align-items: flex-end;
  color: #fff; background: var(--charcoal-2) center/cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.75) 100%);
}
.hero__inner { position: relative; z-index: 1; padding: 2.5rem 1rem 3rem; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.hero .eyebrow { text-align: left; }
.hero__title { font-size: clamp(2rem, 8vw, 4rem); margin-bottom: 0.25em; }
.hero__sub { font-size: clamp(1rem, 3.5vw, 1.4rem); max-width: 46ch; margin: 0 0 1.4rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* =============================================================
   인터랙티브 요일 가격 위젯 (Topgolf 스타일)
   ============================================================= */
.daypricing { background: var(--charcoal-2); color: var(--cream); padding: 3rem 0; }
.daypricing__head { text-align: center; margin-bottom: 1.5rem; }
.daypricing__head h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); margin-bottom: 0.25rem; }
.daypricing__head p { margin: 0; opacity: 0.8; }

.day-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 1.25rem; }
.day-tab {
  appearance: none; border: 1px solid var(--line); background: var(--charcoal-3);
  color: var(--cream); padding: 0.6rem 0.2rem; border-radius: 6px; cursor: pointer;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.78rem;
  transition: background .15s ease, border-color .15s ease;
}
.day-tab:hover { border-color: var(--orange); }
.day-tab.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }

.day-panel {
  display: grid; gap: 1rem; grid-template-columns: 1fr;
  background: var(--charcoal-3); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem;
}
.day-special__badge {
  display: inline-block; background: var(--orange); color: #fff; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem;
  padding: 0.3rem 0.7rem; border-radius: 4px; margin-bottom: 0.6rem;
}
.day-special__window { font-size: 1.05rem; font-weight: 700; color: var(--orange); margin: 0 0 0.75rem; }
.day-special__title { font-size: 1.5rem; margin: 0 0 0.4rem; }
.day-special__desc { margin: 0; opacity: 0.92; }
.day-special__img { width: 100%; border-radius: 8px; margin-top: 0.25rem; display: block; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }

/* Karaoke special: 50%-off window line above the room rates */
.karaoke-window, .daily-window { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem; font-size: 1.05rem; font-weight: 700; color: var(--orange); }
.karaoke-window .day-special__badge, .daily-window .day-special__badge { margin: 0; }

/* 좌우 대칭: Daily Special 박스도 세로 중앙 정렬 */
.day-special { display: flex; flex-direction: column; }
.day-special .day-special__img { margin-top: auto; margin-bottom: auto; }
.day-special .ds-slot { margin-top: auto; margin-bottom: auto; }
.ds-cutout { width: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45)); }

/* ---- Daily Special HTML 카드 (포스터 대체) ---- */
.ds-card {
  --head: #333; --body: #eee; --name: #fff; --chip: #fff; --chipText: #222; --ink: #1a1a1a;
  border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  color: var(--ink); font-family: var(--font-body);
}
.ds-card__head { background: var(--head); padding: 1rem 1.15rem 1rem; }
.ds-chip {
  display: inline-block; background: var(--chip); color: var(--chipText);
  font-weight: 800; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.28rem 0.7rem; border-radius: 6px; vertical-align: middle;
}
.ds-tag { margin-left: 0.6rem; font-weight: 800; color: var(--name); vertical-align: middle; }
.ds-name { margin: 0.7rem 0 0; font-size: clamp(1.35rem, 4.5vw, 1.7rem); color: var(--name); font-weight: 800; }
.ds-card__body { background: var(--body); padding: 1.1rem 1.15rem 1.25rem; display: flex; align-items: center; gap: 0.9rem; }
.ds-body-text { flex: 1; min-width: 0; }
.ds-emoji { flex-shrink: 0; font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
.ds-deal { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 5vw, 1.9rem); font-weight: 800; line-height: 1.1; }
.ds-desc { margin: 0; font-size: 0.95rem; line-height: 1.5; }

/* per-day themes (포스터 색상 근사) */
.ds-card--mon     { --head:#ef5b4c; --body:#f8ddca; --name:#ffffff; --chip:#57d2a6; --chipText:#0a3b2c; }
.ds-card--tue     { --head:#6e5e2f; --body:#ddc88e; --name:#f3ead0; --chip:#c77dd6; --chipText:#3a1540; }
.ds-card--wed     { --head:#2f5a7a; --body:#c4ddef; --name:#f3d7ff; --chip:#ef8a3c; --chipText:#ffffff; }
.ds-card--thu     { --head:#c83b9e; --body:#f5cbe7; --name:#fdf3c0; --chip:#6aa0e0; --chipText:#ffffff; }
.ds-card--weekend { --head:#565a2c; --body:#d3eaa6; --name:#eef0e0; --chip:#e23b2e; --chipText:#ffffff; }
.ds-card--sun     { --head:#f0a030; --body:#f7f2ac; --name:#ffffff; --chip:#3f8f3f; --chipText:#ffffff; }

.room-rates__box { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; }
.room-rates__box h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green); margin-bottom: 0.75rem; }
.room-rates { display: flex; flex-direction: column; gap: 0.5rem; }
.room-rates li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 0.6rem;
  padding-bottom: 0.5rem; border-bottom: 1px dashed var(--line);
}
.room-rates li:last-child { border-bottom: 0; padding-bottom: 0; }
.room-rates .room-name { font-weight: 600; }
.room-rates .room-name small { display: block; font-weight: 400; opacity: 0.6; font-size: 0.78rem; }
.room-rates .reg { text-decoration: line-through; opacity: 0.55; font-size: 0.9rem; }
.room-rates .disc { font-weight: 800; color: var(--orange); font-size: 1.15rem; }
.rates-note { margin: 0.85rem 0 0; font-size: 0.82rem; opacity: 0.7; }

@media (min-width: 768px) {
  .day-panel { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* ---- About ---- */
.about { display: grid; gap: 1.5rem; align-items: center; }
.about__text { text-align: center; }
.about__text p { margin-top: 0; }
.about__img img { border-radius: 10px; }
@media (min-width: 768px) { .about { grid-template-columns: 1fr 1fr; } }

/* ---- 섹션 카드 (Bar / Korean Dining / Karaoke) ---- */
.feature-cards { display: grid; gap: 1.25rem; }
.feature-card {
  position: relative; min-height: 240px; display: flex; align-items: flex-end;
  color: #fff; border-radius: 10px; overflow: hidden; background: var(--charcoal-3) center/cover no-repeat;
}
.feature-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.8)); }
.feature-card__body { position: relative; z-index: 1; padding: 1.25rem; text-align: center; }
.feature-card__body h3 { font-size: 1.4rem; margin-bottom: 0.25rem; }
.feature-card__body p { margin: 0; opacity: 0.92; font-size: 0.95rem; }
@media (min-width: 768px) { .feature-cards { grid-template-columns: repeat(3, 1fr); } }

/* ---- Get in touch ---- */
.contact { display: grid; gap: 1.5rem; }
.contact__info { text-align: left; }
.contact__info p { margin: 0.2rem 0; }
.contact__info a { color: var(--orange); }
.contact__info .social { justify-content: flex-start; }
.contact__map { border: 0; width: 100%; min-height: 280px; border-radius: 10px; }
@media (min-width: 768px) { .contact { grid-template-columns: 1fr 1.2fr; align-items: start; } }

/* ---- Experience 페이지 (Private Room / Open Karaoke) ---- */
.exp { background: #fff; }
.exp-hero { text-align: center; padding: 2.5rem 1rem 0.5rem; }
.exp-hero img { width: 100%; max-width: 520px; margin: 0 auto; height: auto; }

.exp-intro { max-width: 760px; margin: 0 auto; text-align: center; padding: 1.5rem 1rem 2rem; }
.exp-intro h2 { font-size: clamp(1.4rem, 4.5vw, 2rem); }
.exp-intro .lead { font-size: 1.1rem; font-weight: 700; color: var(--orange); margin: 0.25rem 0 1rem; }

.step { display: grid; gap: 1.25rem; align-items: center; margin: 0 auto 2.75rem; max-width: var(--maxw); padding: 0 1rem; }
.step__label { max-width: 320px; }
.step__label img { width: 100%; height: auto; }
.step__body h3 { font-size: 1.3rem; margin: 0.75rem 0 0.5rem; }
.step__body ul { list-style: disc; padding-left: 1.2rem; }
.step__body li { margin-bottom: 0.35rem; }
.step__media img { width: 100%; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }

.img-placeholder {
  width: 100%; aspect-ratio: 16 / 10; border-radius: 12px;
  background: #f3efe6; border: 1px dashed #cdc4b2;
  display: flex; align-items: center; justify-content: center;
  color: #a59c8a; font-size: 0.85rem; text-align: center; padding: 1rem;
}
@media (min-width: 768px) {
  .step { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .step--reverse .step__media { order: 2; }
}

/* Discover our rooms */
.rooms { display: grid; gap: 1.25rem; max-width: var(--maxw); margin: 0 auto; padding: 0 1rem 1rem; }
.room-card { text-align: center; }
.room-card .img-placeholder { aspect-ratio: 4 / 3; margin-bottom: 0.6rem; }
.room-card .room-photo { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; margin-bottom: 0.6rem; box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
.room-card h4 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.room-card p { margin: 0; color: var(--gray); font-size: 0.92rem; }
.room-card .price { color: var(--orange); font-weight: 800; font-size: 1.15rem; }
@media (min-width: 600px) { .rooms { grid-template-columns: repeat(4, 1fr); } }

/* Experience CTA */
.exp-cta { text-align: center; max-width: 720px; margin: 0 auto; padding: 2rem 1rem 3rem; }
.exp-cta .booking { background: #f6f2ea; border-radius: 12px; padding: 1.25rem; margin: 1rem 0; }
.exp-cta .booking strong { color: var(--ink); }

/* ---- 메뉴 페이지 이미지 ---- */
.menu-pages { display: grid; gap: 1rem; margin-top: 1.5rem; }
.menu-pages figure { margin: 0; }
.menu-pages img { width: 100%; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
@media (min-width: 768px) { .menu-pages { grid-template-columns: 1fr 1fr; } }

/* ---- 예약 임베드 ---- */
/* ---- 예약 부킹 바 (Topgolf 스타일) ---- */
.book-bar {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  background: var(--charcoal); border-radius: 10px; overflow: hidden;
  margin: 1.5rem auto 0; max-width: 920px; box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.book-field {
  display: flex; flex-direction: column; gap: 0.15rem; justify-content: center;
  padding: 0.8rem 1.1rem; flex: 1 1 150px; min-width: 0;
  border-right: 1px solid rgba(255,255,255,0.12); color: var(--cream);
}
.book-field__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange); font-weight: 700; }
.book-field input, .book-field select {
  background: transparent; border: 0; color: #fff; font-size: 1rem; font-weight: 600;
  padding: 0.15rem 0; outline: none; width: 100%; font-family: inherit;
}
.book-field select option { color: #1a1a1a; }
.book-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
.book-search {
  flex: 0 0 auto; border: 0; background: var(--orange); color: #fff;
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0 1.9rem; cursor: pointer; font-size: 1rem;
}
.book-search:hover { background: var(--orange-dk); }
@media (max-width: 620px) {
  .book-bar { flex-direction: column; }
  .book-field { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .book-search { padding: 0.95rem; }
}

/* ---- 생일 패키지 카드 (좌 $250 / 우 $500, 대칭) ---- */
.bday-intro { max-width: 720px; margin: 0.5rem auto 2rem; text-align: center; opacity: 0.92; }
.bday-intro strong { color: var(--orange); }
.bday-cards { display: grid; gap: 1.5rem; max-width: 760px; margin: 0 auto; }
.bday-card { border-radius: 14px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,0.35); }
.bday-card__head { position: relative; padding: 1.5rem 1rem 1.25rem; text-align: center; color: #fff; }
.bday-emoji { position: absolute; top: 0.7rem; right: 1rem; font-size: 2.1rem; line-height: 1; }
.bday-price { display: block; font-size: 2.6rem; font-weight: 800; line-height: 1; font-family: var(--font-head); }
.bday-tier { display: inline-block; margin-top: 0.55rem; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; opacity: 0.95; }
.bday-card__body { background: #fbf4e2; padding: 1.1rem 1.25rem 1.3rem; }
.bday-card__body ul { list-style: none; padding: 0; margin: 0; }
.bday-card__body li { padding: 0.55rem 0; border-bottom: 1px dashed #e3d9c2; color: #2a2a2a; font-weight: 700; text-align: center; }
.bday-card__body li:last-child { border-bottom: 0; }
.bday-card--premium .bday-card__head { background: linear-gradient(135deg, #b65c98, #7e5aa8); }
.bday-card--vip .bday-card__head { background: linear-gradient(135deg, #5e3b9e, #c9a227); }
@media (min-width: 700px) { .bday-cards { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.bday-fireshow { display: block; margin: 1.75rem auto 0; max-width: 360px; width: 100%; border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,0.45); }

/* 예약 정책 리스트 */
.policy-list { list-style: none; padding: 0; margin: 1rem auto 0; max-width: 760px; }
.policy-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.65rem; line-height: 1.55; }
.policy-list li::before { content: "•"; position: absolute; left: 0.35rem; color: var(--orange); font-weight: 800; }

/* ---- 푸터 ---- */
.site-footer { display: grid; gap: 1.5rem; padding: 2.5rem 1rem; background: var(--charcoal); color: var(--cream); border-top: 1px solid rgba(255,255,255,0.14); }
.site-footer .footer__grid { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 1.5rem; width: 100%; }
.site-footer a { color: var(--cream); }
.footer__heading { margin: 0 0 0.5rem; font-size: 1rem; color: var(--orange); text-transform: uppercase; letter-spacing: 0.05em; }
.site-footer address { font-style: normal; }
.social { display: flex; gap: 1rem; margin-top: 0.5rem; }
.footer__copy { max-width: var(--maxw); margin: 1rem auto 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; opacity: 0.8; width: 100%; }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav-menu { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1.5rem; padding: 0.9rem 1rem; }
  .nav-menu a { padding: 0.2rem 0; }
  .brand__logo { height: 72px; }
  .site-footer .footer__grid { grid-template-columns: repeat(3, 1fr); }
}