/* =========================================================
   BOHEN — Suit & Tuxedo
   Shared stylesheet. Black & white, mobile-first-ish
   responsive rules. Swap tokens below if color is added later.

   FONTS: Pretendard is the primary UI/body font (full Hangul +
   Latin coverage — Inter alone has NO Hangul glyphs, so Korean
   text set in Inter silently falls back to whatever generic
   sans each visitor's OS provides). Inter is scoped ONLY to the
   BOHEN wordmark (.brand-font) per the brand's explicit spec.
   ========================================================= */

:root {
  --ink: #111111;
  --white: #ffffff;
  --gray-050: #f7f7f7;
  --gray-100: #f4f4f4;
  --gray-200: #e5e5e5;
  --gray-400: #b3b3b3;
  --gray-500: #9a9a9a;
  --gray-700: #555555;

  --font: "Pretendard", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-brand: "Inter", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --header-h: 72px;
  --container: 1280px;
  --gutter: 32px;

  --ease: cubic-bezier(.4,0,.2,1);
}

/* BOHEN wordmark only — everything else uses --font (Pretendard) */
.brand-font { font-family: var(--font-brand); }

@media (max-width: 640px) {
  :root {
    --header-h: 60px;
    --gutter: 20px;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* 모바일에서 어떤 요소든(긴 텍스트, 이미지, 표 등) 화면 폭을 넘기면
   페이지 전체가 옆으로 밀리는 경우가 생길 수 있어, 안전장치로 가로
   스크롤 자체를 막아둠 — 콘텐츠는 항상 폭에 맞춰 줄바꿈/축소됨. */
html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--white); padding: 12px 20px;
  font-size: 13px;
}
.skip-link:focus { left: var(--gutter); top: 8px; }

/* =========================================================
   Header / Nav
   ========================================================= */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--gray-200);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* desktop nav, left-aligned */
.main-nav { display: none; }

@media (min-width: 1024px) {
  .main-nav { display: block; }
  .main-nav > ul { display: flex; align-items: center; gap: 30px; }
  .nav-item { position: relative; }
  .nav-item > a {
    display: block; padding: 26px 0;
    font-size: 13px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase;
  }
  .nav-item > a:hover { color: var(--gray-700); }

  .sub-nav {
    position: absolute; top: 100%; left: 0;
    min-width: 180px; padding: 10px 0;
    background: var(--white); border: 1px solid var(--gray-200);
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  }
  .nav-item:hover .sub-nav,
  .nav-item:focus-within .sub-nav {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .sub-nav a {
    display: block; padding: 10px 18px;
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gray-700);
  }
  .sub-nav a:hover { color: var(--ink); background: var(--gray-050); }
}

/* header right actions — 검색 아이콘 + 보헨 로고(홈 이동)가 맨 오른쪽에
   나란히 있음(로고를 왼쪽으로 옮겼다가 다시 오른쪽 끝으로 되돌림). */
.header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }

@media (min-width: 1024px) {
  .header-actions { margin-left: 0; }
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: none; border: none; padding: 0;
  color: var(--ink);
}
.icon-btn svg { width: 20px; height: 20px; }

.brand-mark {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; letter-spacing: 0;
  overflow: hidden; flex-shrink: 0;
}
/* Swap the <span>B</span> for an <img> once a real mark/photo exists:
   <a class="brand-mark" href="index.html"><img src="..." alt="BOHEN"></a> */
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }

/* search panel */
.search-panel {
  border-bottom: 1px solid var(--gray-200);
  background: var(--white);
}
.search-panel[hidden] { display: none; }
.search-panel form {
  max-width: var(--container); margin: 0 auto; padding: 18px var(--gutter);
  display: flex; gap: 12px;
}
.search-panel input {
  flex: 1; border: none; border-bottom: 1px solid var(--ink);
  padding: 8px 2px; font-size: 18px; font-family: var(--font);
  outline: none; background: transparent;
}
.search-panel button {
  border: 1px solid var(--ink); background: var(--white);
  padding: 0 20px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}

/* mobile menu toggle */
.menu-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; background: none; border: none; padding: 0;
}
.menu-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform .2s var(--ease), opacity .2s var(--ease); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}

/* mobile nav panel */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 90;
  background: var(--white);
  transform: translateX(-100%);
  transition: transform .28s var(--ease);
  overflow-y: auto;
  padding: 8px var(--gutter) 40px;
}
.mobile-nav.is-open { transform: translateX(0); }

@media (min-width: 1024px) {
  .mobile-nav { display: none; }
}

.mobile-nav-item { border-bottom: 1px solid var(--gray-200); }
.mobile-nav-row { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav-row > a {
  flex: 1; padding: 18px 0; font-size: 17px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
}
.mobile-sub-toggle {
  width: 44px; height: 44px; background: none; border: none;
  display: flex; align-items: center; justify-content: center;
}
.mobile-sub-toggle svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.mobile-nav-item.is-open .mobile-sub-toggle svg { transform: rotate(180deg); }

.mobile-sub-nav {
  max-height: 0; overflow: hidden; transition: max-height .25s var(--ease);
}
.mobile-nav-item.is-open .mobile-sub-nav { max-height: 240px; }
.mobile-sub-nav a {
  display: block; padding: 12px 0 12px 16px;
  font-size: 14px; color: var(--gray-700); letter-spacing: .04em; text-transform: uppercase;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 32px; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--ink); background: var(--white); color: var(--ink);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: #333; }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-kakao { border-color: #3a2929; }

/* =========================================================
   Page hero / section basics
   ========================================================= */

.page-hero {
  padding: 64px var(--gutter) 40px;
  max-width: var(--container); margin: 0 auto;
  border-bottom: 1px solid var(--gray-200);
}
.eyebrow {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gray-500); margin-bottom: 14px; display: block;
}
.page-title { font-size: clamp(32px, 5vw, 48px); font-weight: 700; letter-spacing: -.01em; }
.page-lede { margin-top: 16px; max-width: 620px; color: var(--gray-700); font-size: 15px; line-height: 1.75; }

section { padding: 64px var(--gutter); max-width: var(--container); margin: 0 auto; }
@media (max-width: 640px) { section, .page-hero { padding-left: var(--gutter); padding-right: var(--gutter); } }

.section-title { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }

/* =========================================================
   Home
   ========================================================= */

.home-hero {
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px var(--gutter);
}
.home-logo-word { font-size: clamp(48px, 9vw, 96px); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.home-logo-sub {
  margin-top: 10px; font-size: clamp(14px, 2vw, 18px); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gray-700);
}
.home-tagline {
  margin-top: 34px; color: var(--gray-500); font-size: 14px; line-height: 1.8;
}

.home-video-section {
  max-width: var(--container); margin: 0 auto 96px; padding: 0 var(--gutter);
}
.home-video {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: #000; object-fit: cover;
}
@media (max-width: 640px) { .home-video-section { margin-bottom: 56px; } }

/* =========================================================
   Cards / Grids
   ========================================================= */

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 36px 28px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 18px; } }
@media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px 28px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

.gallery-card .thumb { aspect-ratio: 3 / 4; background: var(--gray-100); display:flex; align-items:center; justify-content:center; }
.gallery-card .thumb-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-400); }
.gallery-card h3 { margin-top: 14px; font-size: 15px; font-weight: 600; }
.gallery-card .meta { margin-top: 4px; font-size: 12px; color: var(--gray-500); letter-spacing: .02em; }
.gallery-card p { margin-top: 8px; font-size: 13px; color: var(--gray-700); line-height: 1.6; }
/* 저널(JOURNAL)만 카드 자체가 상세 페이지로 이동하는 링크(<a>)라, 링크
   기본 스타일(밑줄 등)을 지우고 다른 카드들과 똑같이 보이게 맞춥니다. */
.gallery-card-link { text-decoration: none; color: inherit; transition: opacity .15s; }
.gallery-card-link:hover { opacity: .8; }
/* 저널 상세 페이지 맨 위 커버 사진 */
.journal-detail-cover { width: 100%; max-width: 720px; height: auto; display: block; margin: 0 0 28px; }

/* journal / blog list */
.journal-item {
  display: grid; grid-template-columns: 300px 1fr; gap: 32px;
  padding: 32px 0; border-bottom: 1px solid var(--gray-200);
}
.journal-item .thumb { aspect-ratio: 4 / 3; background: var(--gray-100); display:flex; align-items:center; justify-content:center; }
.journal-item .thumb-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-400); }
.journal-item .date { font-size: 12px; color: var(--gray-500); letter-spacing: .04em; }
.journal-item h3 { margin-top: 10px; font-size: 20px; font-weight: 700; }
.journal-item p { margin-top: 12px; color: var(--gray-700); font-size: 14px; line-height: 1.75; }
.journal-item .read-more { margin-top: 14px; display:inline-block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }

@media (max-width: 720px) {
  .journal-item { grid-template-columns: 1fr; }
}

/* 헤더 맨 위 검정 슬라이딩 배너 — 문구가 여러 개면 js/main.js가 몇 초마다
   자동으로 다음 문구로 전환합니다. 그냥 순간적으로 바뀌면 "깜빡이는 것"처럼
   보인다는 피드백이 있어서, opacity만이 아니라 실제로 옆으로 밀려
   들어오고(오른쪽→가운데) 나가는(가운데→왼쪽) 슬라이드 애니메이션을
   씁니다. 좌우 화살표를 누르면 수동으로도 이전/다음 소식으로 넘어갑니다
   (몇 번째인지 보여주는 점 표시 대신 화살표 방식). 문구 하나하나가 전체
   폭 링크라 화살표·닫기 버튼이 아닌 곳을 눌러도 지정한 링크로 이동합니다. */
.top-banner {
  position: relative; background: #000; color: #fff;
  padding: 12px 44px; text-align: center;
  overflow: hidden;
}
/* prev 화살표 + track(문구) + next 화살표를 하나의 그룹으로 묶어서 가운데
   정렬 — 화살표가 배너 양 끝(전체 폭 기준)이 아니라 항상 문구 바로 옆에
   붙어 보이도록 함(예전엔 화살표가 배너 맨 끝에 고정돼 있어서 문구랑
   너무 멀리 떨어져 보인다는 피드백이 있었음). */
.top-banner-inner {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  max-width: 560px; margin: 0 auto;
}
.top-banner-track { position: relative; min-height: 1.4em; overflow: hidden; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.top-banner-slide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; font-size: 13px; letter-spacing: .03em;
  opacity: 0; pointer-events: none; transform: translateX(16px);
  transition: opacity .5s ease, transform .5s ease;
  white-space: nowrap;
}
/* is-active 상태일 때만 position:relative로 바꿔서(다른 슬라이드는 기본
   position:absolute 그대로) track의 실제 너비가 "지금 보이는 문구의 실제
   글자 길이"에 맞춰지도록 함 — 이래야 화살표가 항상 문구 바로 옆에
   붙어 보임(고정된 넓은 박스가 아니라 글자 길이만큼만 차지). */
.top-banner-slide.is-active { position: relative; opacity: 1; pointer-events: auto; transform: translateX(0); }
.top-banner-slide.is-leaving { position: absolute; opacity: 0; transform: translateX(-16px); }
.top-banner-slide:hover { text-decoration: underline; }
/* 좌(이전)/우(다음) 화살표 — 이제 배너 전체 기준이 아니라 top-banner-inner
   그룹 안에서 문구 바로 옆에 나란히 놓임(flex, position:static). */
.top-banner-arrow {
  position: static; flex: 0 0 auto;
  background: none; border: none; color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 4px 6px; opacity: .7;
}
.top-banner-arrow:hover { opacity: 1; }
.top-banner-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 6px; opacity: .7;
}
.top-banner-close:hover { opacity: 1; }
@media (max-width: 640px) {
  .top-banner { padding: 10px 34px; }
  .top-banner-inner { max-width: 100%; gap: 2px; }
  .top-banner-slide { font-size: 12px; white-space: normal; }
  .top-banner-arrow { font-size: 16px; padding: 4px 4px; }
}

/* notice board — 사진 썸네일 + 제목 + 본문 미리보기가 같이 보이는 예전
   스타일 그대로 유지 (요청에 따라 REVIEW만 압축 게시판 스타일을 씁니다). */
.notice-list { display: flex; flex-direction: column; }
.notice-item {
  display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center;
  padding: 36px 0; border-bottom: 1px solid var(--gray-200);
  text-decoration: none; color: inherit; transition: opacity .15s;
}
.notice-item:hover { opacity: .72; }
.notice-item .thumb { aspect-ratio: 3 / 4; background: var(--gray-100); display:flex; align-items:center; justify-content:center; }
.notice-item .thumb-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); }
.notice-item h3 { margin-top: 8px; font-size: 19px; font-weight: 700; }
.notice-item p { margin-top: 10px; color: var(--gray-700); font-size: 14px; line-height: 1.7; }
.notice-item .date { margin-top: 12px; font-size: 12px; color: var(--gray-500); }

@media (max-width: 640px) {
  .notice-item { grid-template-columns: 140px 1fr; gap: 20px; }
}

/* review 게시판 — 실제 게시판처럼 제목 위주 한 줄 행으로 표시(사진 없이
   제목·작성자·날짜만, 한 화면에 여러 글이 한번에 보이도록). */
.board-list { display: flex; flex-direction: column; border-top: 1px solid var(--gray-200); }
.board-row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 4px; border-bottom: 1px solid var(--gray-200);
  text-decoration: none; color: inherit; transition: opacity .15s;
}
.board-row:hover { opacity: .6; }
.board-row:hover .board-row-title { text-decoration: underline; }
.board-row-title {
  flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board-row-author { flex: 0 0 auto; font-size: 13px; color: var(--gray-500); }
.board-row-date { flex: 0 0 auto; font-size: 13px; color: var(--gray-500); }
.board-pin { margin-right: 6px; }
/* "BEST 리뷰" 체크박스로 표시된 글 — 제목 자체에 "[BEST REVIEW] "가 포함돼
   있어서 별도 뱃지는 없지만, 살짝 더 눈에 띄도록 굵게 처리합니다. */
.board-row-best .board-row-title { font-weight: 700; }

@media (max-width: 640px) {
  .board-row { flex-wrap: wrap; gap: 4px 12px; padding: 14px 4px; }
  .board-row-title { flex-basis: 100%; white-space: normal; }
}

/* REVIEW·NOTICE·저널 본문은 관리자가 블로그 에디터(굵게/링크/사진 버튼,
   또는 붙여넣기)로 작성한 HTML을 그대로 출력하므로, 안에 들어있는 이미지가
   폭을 넘치지 않게 잡아줍니다. */
.board-rich-body img { max-width: 100%; height: auto; display: block; margin: 16px 0; }
.board-rich-body p { margin: 0 0 1em; }
.board-rich-body a { color: inherit; text-decoration: underline; }
/* align-center/right(REVIEW만 지원)일 때 텍스트뿐 아니라 이미지도 같이
   가운데/오른쪽으로 옮겨줍니다 — text-align만으로는 block 이미지가 안 움직임. */
.board-rich-body.align-center img { margin-left: auto; margin-right: auto; }
.board-rich-body.align-right img { margin-left: auto; margin-right: 0; }

/* notice detail page (blog-style bulletin: back link, body text, then all
   images stacked full-width so long promotional images scroll naturally) */
.notice-detail-date { margin-top: 10px; font-size: 13px; color: var(--gray-500); }
.notice-back-link {
  display: inline-block; margin-bottom: 32px; font-size: 13px; color: var(--gray-700);
  text-decoration: none;
}
.notice-back-link:hover { color: var(--ink); }
.notice-detail-body {
  max-width: 720px; margin: 0 0 40px; font-size: 15px; line-height: 1.9; color: var(--gray-700);
}
.notice-detail-body.align-center { text-align: center; }
.notice-detail-body.align-right { text-align: right; }
.notice-detail-images { display: flex; flex-direction: column; gap: 4px; }
.notice-detail-images.align-left { align-items: flex-start; }
.notice-detail-images.align-center { align-items: center; }
.notice-detail-images.align-right { align-items: flex-end; }
.notice-detail-images img { width: 100%; max-width: 550px; display: block; }

/* pricing / promo cards */
.price-card { border: 1px solid var(--gray-200); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.price-card .name { font-size: 20px; font-weight: 700; }
.price-card .desc { font-size: 13px; color: var(--gray-700); line-height: 1.7; }
.price-card .price { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--gray-200); font-size: 15px; font-weight: 600; }
.price-card .price .from { font-size: 11px; color: var(--gray-500); font-weight: 500; letter-spacing:.04em; display:block; margin-bottom:4px; }

.sub-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.sub-tabs a { padding: 10px 22px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--gray-200); text-align: center; }
.sub-tabs a[aria-current="page"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
/* ARCHIVE(룩북/웨딩스냅/셀러브리티/저널) 탭은 4개라 좁은 화면에서 한 줄에
   다 안 들어가 옆으로 드래그해야 하고, 특히 JOURNAL이 화면 밖으로 밀려나가
   눌리지 않는 문제가 있었음 — 모바일에서는 가로 스크롤 대신 2x2 그리드로
   바꿔서 4개 카테고리가 항상 스크롤 없이 한눈에, 큼직하게 눌리도록 함. */
@media (max-width: 640px) {
  .sub-tabs-archive {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .sub-tabs-archive a {
    padding: 12px 6px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* store */
.store-photo-wide { aspect-ratio: 21/9; background: var(--gray-100); overflow: hidden; margin-bottom: 40px; }
.store-photo-wide .thumb, .store-photo-wide .thumb.has-photo { width: 100%; height: 100%; }
.store-photo-wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-info-card { max-width: 640px; margin-bottom: 40px; }
.store-info-card h3 { font-size: 22px; font-weight: 700; margin: 0 0 14px; }
.store-info-card .row { font-size: 14px; color: var(--gray-700); display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.store-info-card .row .k { color: var(--gray-500); min-width: 64px; flex-shrink: 0; }
.store-map-wrap { position: relative; }
.store-map-edit-label { display: none; font-size: 12px; color: var(--gray-500); background: var(--gray-050); border: 1px dashed var(--gray-200); border-radius: 3px; padding: 6px 10px; margin-bottom: 8px; cursor: pointer; width: fit-content; }
.store-map { aspect-ratio: 16/9; border: 1px solid var(--gray-200); overflow: hidden; }
.store-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .store-photo-wide { aspect-ratio: 4/3; } .store-map { aspect-ratio: 4/3; } }

/* reservation */
.reservation-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.reservation-hero .thumb { aspect-ratio: 4/5; background: var(--gray-100); display:flex; align-items:center; justify-content:center; }
.reservation-hero .thumb-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-400); }
.reservation-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 800px) { .reservation-hero { grid-template-columns: 1fr; } }

/* generic content block for About etc. */
.content-block + .content-block { margin-top: 64px; }
.content-block h2 { font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.content-block p { color: var(--gray-700); font-size: 15px; line-height: 1.8; max-width: 720px; }
.stat-strip { display: flex; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); margin-top: 56px; }
.stat-strip div { flex: 1; padding: 24px var(--gutter); border-right: 1px solid var(--gray-200); }
.stat-strip div:last-child { border-right: none; }
.stat-strip .k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-500); }
.stat-strip .v { margin-top: 6px; font-size: 15px; font-weight: 600; }
@media (max-width: 640px) { .stat-strip { flex-direction: column; } .stat-strip div { border-right:none; border-bottom:1px solid var(--gray-200); } .stat-strip div:last-child{border-bottom:none;} }

/* content block with a real photo beside it (About) */
.content-block.with-photo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.content-block.with-photo.reverse .photo { order: 2; }
.content-block.with-photo .photo img { width: 100%; height: 100%; object-fit: cover; }
.content-block.with-photo .photo { aspect-ratio: 4/5; background: var(--gray-100); overflow: hidden; }
@media (max-width: 800px) {
  .content-block.with-photo { grid-template-columns: 1fr; }
  .content-block.with-photo.reverse .photo { order: 0; }
}

.timeline { margin-top: 18px; border-top: 1px solid var(--gray-200); }
.timeline-row {
  display: flex; gap: 28px; padding: 14px 0; border-bottom: 1px solid var(--gray-200);
  font-size: 14px;
}
.timeline-row .year { width: 56px; flex-shrink: 0; font-weight: 700; }
.timeline-row .event { color: var(--gray-700); }

.rating-row { display: flex; gap: 28px; margin-top: 18px; flex-wrap: wrap; }
.rating-card { border: 1px solid var(--gray-200); padding: 18px 24px; min-width: 180px; }
.rating-card .platform { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); }
.rating-card .score { margin-top: 6px; font-size: 26px; font-weight: 800; }
.rating-card .score span { font-size: 14px; font-weight: 500; color: var(--gray-500); }

.review-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.review-quotes blockquote { margin: 0; padding: 22px 22px 18px; background: var(--gray-050); border-left: 2px solid var(--ink); }
.review-quotes p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink); }
.review-quotes cite { display: block; margin-top: 12px; font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); }
@media (max-width: 900px) { .review-quotes { grid-template-columns: 1fr; } }

/* real photo variant of .thumb (used once actual JPGs exist) */
.thumb.has-photo { background: none; }
.thumb.has-photo img { width: 100%; height: 100%; object-fit: cover; }

/* package card (Wedding Bespoke / Rental) */
.package-card {
  border: 1px solid var(--gray-200); padding: 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
@media (max-width: 720px) { .package-card { grid-template-columns: 1fr; gap: 28px; } }
.package-card h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 16px; }
.package-price-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--gray-100); font-size: 15px; }
.package-price-row .label { color: var(--gray-700); }
.package-price-row .amount { font-weight: 700; }
.package-note { margin-top: 14px; font-size: 12px; color: var(--gray-500); }

/* FAMILY page: 3-column variant (Price / Package / Benefits) and the two
   stacked 맞춤/렌트 sections */
.package-card.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .package-card.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .package-card.cols-3 { grid-template-columns: 1fr; gap: 28px; } }
.family-section { margin-top: 56px; }
.family-section:first-of-type { margin-top: 0; }
.family-section-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.package-compose { font-size: 14px; color: var(--gray-700); line-height: 1.9; }

/* process steps (Wedding Bespoke) */
.process-section { margin-top: 56px; }
.process-section h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 8px; }
.process-step { display: flex; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--gray-100); }
.process-step:last-child { border-bottom: none; }
.process-step .num { flex-shrink: 0; width: 36px; font-size: 20px; font-weight: 700; color: var(--gray-400); font-variant-numeric: tabular-nums; }
.process-step .content h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.process-step .content p { margin: 0; font-size: 13px; color: var(--gray-700); line-height: 1.75; max-width: 640px; }
@media (max-width: 640px) { .process-step { gap: 16px; padding: 18px 0; } .process-step .num { width: 28px; font-size: 17px; } }

/* lineup gallery (Rental labels) */
.lineup-block + .lineup-block { margin-top: 40px; }
.lineup-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.lineup-head .label-name { font-size: 18px; font-weight: 700; }
.lineup-head .label-note { font-size: 12px; color: var(--gray-500); }
.lineup-gallery { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px 14px; }
.lineup-item .thumb { aspect-ratio: 3 / 4; background: var(--gray-100); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lineup-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lineup-item .thumb-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); }
.lineup-item .name { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .03em; text-align: center; color: var(--gray-700); }
@media (max-width: 720px) { .lineup-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 14px; } }

/* =========================================================
   Footer
   ========================================================= */

.site-footer { background: var(--gray-100); margin-top: 80px; }
.footer-inner {
  max-width: var(--container); margin: 0 auto; padding: 56px var(--gutter) 32px;
  display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 40px;
}
@media (max-width: 800px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}
.footer-logo { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.footer-tagline { margin-top: 14px; font-size: 13px; color: var(--gray-500); line-height: 1.8; }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  width: 36px; height: 36px; border: 1px solid var(--gray-400);
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.footer-social svg { width: 16px; height: 16px; }
.footer-nav { display: flex; flex-direction: column; gap: 12px; }
.footer-nav a { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-700); }
.footer-info { font-size: 12px; color: var(--gray-500); line-height: 1.9; }
.footer-copy {
  max-width: var(--container); margin: 0 auto; padding: 20px var(--gutter) 32px;
  font-size: 11px; color: var(--gray-400); border-top: 1px solid var(--gray-200);
}

/* floating kakao button */
.floating-kakao {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: flex; align-items: center; gap: 10px;
  background: #191919; color: var(--white);
  padding: 14px 18px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.floating-kakao svg { width: 20px; height: 20px; flex-shrink: 0; }
.floating-kakao span { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 560px) {
  .floating-kakao span { display: none; }
  .floating-kakao { padding: 14px; border-radius: 50%; }
}