/* 베르니사주 랜딩 페이지 스타일 (ko/en/ja 공용)
   atelierlabs.co.kr(site.css)와 같은 디자인 토큰·색감을 쓴다 — 흰 바탕 + 얇은 선, 블루/코랄 포인트.
   베이지·크림 계열 배경은 쓰지 않는다. */
:root {
  --paper: #FFFFFF;
  --surface: #FAF8F4;
  --ink: #151515;
  --muted: #5c5c5c;
  --line: rgba(21, 21, 21, .16);
  --line-strong: rgba(21, 21, 21, .32);
  --blue: #153151;
  --coral: #B26634;
  --gutter: clamp(20px, 4.4vw, 72px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Pretendard Variable", "SUIT", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  line-height: 1.7;
  letter-spacing: -0.025em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 일본어 제목이 단어 중간에서 줄바꿈되지 않게 */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .lead { word-break: auto-phrase; }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header-inner { display: flex; align-items: center; gap: 16px; max-width: 1200px; height: 64px; margin: 0 auto; padding: 0 var(--gutter); }
/* 가로 로고(아이콘+워드마크) — atelierlabs 헤더 로고와 같은 높이 */
.site-logo { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; line-height: 0; text-decoration: none; }
/* ko/ja: 로고 옆에 현지어 브랜드명 */
.logo-local { padding-left: 10px; border-left: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; }
@media (max-width: 760px) { .site-logo:has(.logo-local) { margin-right: 6px; } }
@media (max-width: 480px) {
  .site-logo:has(.logo-local) { flex-direction: column; align-items: flex-start; gap: 4px; margin-right: 0; }
  .logo-local { padding-left: 1px; border-left: 0; font-size: 10.5px; line-height: 1; }
}

.site-logo img { height: 30px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--coral); }
/* 언어 선택 — 상단 바 오른쪽의 작은 버튼, 누르면 KO·EN·JA 메뉴가 열린다 (lang-menu.js) */
.lang-switch { position: relative; flex: 0 0 auto; margin-left: 20px; font-size: 12.5px; font-weight: 700; }
.lang-switch summary { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 8px; color: var(--ink); cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover, .lang-switch[open] summary { background: rgba(21, 21, 21, .06); }
.lang-switch summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.lang-switch svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.lang-globe { width: 16px; height: 16px; stroke-width: 1.6; }
.lang-chevron { width: 10px; height: 10px; stroke-width: 1.6; transition: transform .15s; }
.lang-switch[open] .lang-chevron { transform: rotate(180deg); }
.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; display: flex; flex-direction: column; min-width: 152px; padding: 6px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(21, 21, 21, .10); }
.lang-option { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 10px; color: var(--ink); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.lang-option .lang-code { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
a.lang-option:hover { background: rgba(21, 21, 21, .05); color: var(--coral); }
.lang-option[aria-current] { color: var(--coral); }
.lang-option[aria-current] .lang-code { color: var(--coral); }

/* ☰ 메뉴 버튼 — 휴대폰 너비에서만 보인다 */
.nav-toggle { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: -8px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .2s ease, background-color .2s ease; }
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.site-header.nav-open .nav-toggle span { background-color: transparent; }
.site-header.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* hero — 미술관 사진을 배경으로 깔고, 내용은 atelierlabs·keepsake와 같은 위치(위 여백·좌측 정렬)에 둔다 */
.hero { position: relative; display: flex; min-height: max(510px, min(57vw, 680px)); overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-frame { position: absolute; inset: 0; overflow: hidden; }
.hero-frame::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(255, 252, 247, .75) 0%, rgba(255, 252, 247, .48) 43%, rgba(255, 252, 247, .12) 72%, rgba(255, 252, 247, .08) 100%); }
.hero-frame::after {
  content: "V\A E\A R\A N\A I\A S\A S\A A\A G\A E";
  white-space: pre;
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  color: rgba(21, 21, 21, .52);
  font-weight: 800;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: .12em;
  z-index: 2;
}
.hero-frame img { position: relative; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.hero-frame .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; }
.hero-frame .hero-slide.is-active { opacity: 1; }
.tagline-row {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 120px) var(--gutter) clamp(56px, 7vw, 104px);
}
/* 세 사이트 공통 히어로: 아이콘 → 현지어 이름 → 큰 브랜드명 → 슬로건 → 설명 → 버튼 */
.hero-mark { display: block; width: clamp(80px, 9vw, 112px); height: auto; margin: 0 0 36px; }
.hero-reading { margin: 0 0 10px; color: var(--muted); font-size: clamp(15px, 1.5vw, 20px); font-weight: 700; line-height: 1.3; letter-spacing: .02em; }
.tagline-row h1.hero-title { margin: 0 0 clamp(20px, 2.4vw, 32px); font-size: clamp(56px, 10vw, 140px); line-height: .92; letter-spacing: -.05em; }
.hero-title::after { content: "."; color: var(--coral); }
.hero-tagline { margin: 0 0 16px; font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; line-height: 1.35; letter-spacing: -.045em; }
.hero-tagline em { font-style: normal; color: var(--coral); }
:lang(ja) .hero-tagline { word-break: auto-phrase; }
:lang(ko) .hero-tagline, :lang(ko) .hero .lead { word-break: keep-all; }
/* 설명은 최소 두 줄 높이 — 한 줄로 끝나도 버튼 위치가 세 사이트에서 같다 */
.tagline-row .lead { max-width: 560px; min-height: 3.4em; margin: 0; font-size: clamp(16px, 1.45vw, 19px); color: #3a3a3a; }
.tagline-row .cta { margin-top: 40px; }

/* store badges — site.css와 같은 각진 검정 배지 */
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  width: 180px; padding: 14px 24px 14px 18px;
  background: #000; color: #fff; text-decoration: none;
  transition: transform .2s ease;
}
.store-badge:hover { transform: translateY(-2px); }
.store-badge svg { width: 30px; height: 30px; flex-shrink: 0; }
.store-badge .badge-text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.store-badge .eyebrow { font-size: 11px; letter-spacing: .03em; color: rgba(255, 255, 255, .72); }
.store-badge .store-name { font-size: 18px; font-weight: 700; }

/* sections */
main { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); counter-reset: home-section; }
main > section { padding: clamp(80px, 11vw, 160px) 0; border-bottom: 1px solid var(--line); }
main > section:last-child { border-bottom: 0; }
h2 { margin: 0; font-size: clamp(30px, 4vw, 54px); line-height: 1.1; letter-spacing: -.06em; }

/* 섹션 번호(01 /, 02 / …)는 카운터로 매긴다 — 서버가 채우는 첫 섹션(도슨트·전시)이 빠져도 번호가 01부터 이어진다.
   atelierlabs의 .eyebrow와 같은 모양(블루, 굵게, 넓은 자간). */
main > .featured-section, main > .about, main > #features, main > .persona-section,
main > .taste-section, main > .gallery-section, main > .faq-section { counter-increment: home-section; }
/* 공개 웹 화면(main.public-main)의 섹션 제목에는 번호를 붙이지 않는다 */
main:not(.public-main) > section > h2::before {
  content: counter(home-section, decimal-leading-zero) " /";
  display: block;
  margin: 0 0 20px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.7;
}

/* 제목 | 본문 2단 섹션 */
.about, .persona-section, .taste-section, .faq-section, .featured-section {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  column-gap: clamp(36px, 9vw, 160px);
  row-gap: 0;
  align-items: start;
}
.about { grid-template-rows: auto; }
.about h2 { grid-row: span 4; max-width: 410px; }
.about-copy { max-width: 620px; margin: 0 0 20px; color: #3a3a3a; font-size: clamp(16px, 1.45vw, 19px); }
.about-copy:last-of-type { margin-bottom: 0; }
.about-story-link { display: inline-block; margin: 8px 0 0; color: var(--blue); font-size: 15px; font-weight: 700; text-decoration: none; }
.about-story-link:hover { color: var(--coral); }

/* features — atelierlabs .principles처럼 흰 칸 + 1px 선 */
#features > h2 { margin: 0 0 clamp(40px, 5vw, 64px); max-width: 600px; }
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.feature { background: var(--paper); padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2vw, 28px) clamp(28px, 3vw, 40px); }
.feature:nth-child(3n + 1) { padding-left: 0; }
.feature:nth-child(3n) { padding-right: 0; }
.feature-icon { margin-bottom: 40px; line-height: 0; }
.feature-icon svg { width: 24px; height: 24px; stroke: var(--coral); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feature-icon svg.filled { fill: var(--coral); stroke: none; }
.feature h3 { margin: 0 0 12px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; letter-spacing: -.045em; }
.feature h3 .accent { display: block; color: var(--blue); }
.feature p { margin: 0; color: #4a4a4a; font-size: 14.5px; }

/* persona */
.persona-section h2 { max-width: 390px; }
.persona-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.persona-list li { position: relative; padding: 16px 38px 16px 0; border-bottom: 1px solid var(--line); font-size: clamp(16px, 1.4vw, 18px); }
.persona-list li::before { content: "↗"; position: absolute; right: 2px; color: var(--blue); font-size: 18px; }

/* art taste — atelierlabs의 contact-band와 같은 블루 블록 */
.taste-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 340px; padding: clamp(28px, 4vw, 52px); background: var(--blue); color: #fff; }
.taste-card .taste-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: rgba(255, 255, 255, .6); }
.taste-card h3 { margin: 24px 0 12px; font-size: clamp(27px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -.06em; }
.taste-card p { max-width: 470px; margin: 0; font-size: 16px; color: rgba(255, 255, 255, .76); }
.taste-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 13px 20px; border: 1px solid #fff; background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 700; text-decoration: none; transition: background .2s ease, color .2s ease; }
.taste-link:hover { background: transparent; color: #fff; }

/* screenshot gallery */
.gallery-section h2 { margin: 0 0 clamp(40px, 5vw, 64px); }
.gallery { display: flex; gap: clamp(14px, 2vw, 28px); overflow-x: auto; padding: 0 0 18px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-thumb { background: var(--line-strong); }
.gallery img { flex: 0 0 auto; width: auto; height: min(52vw, 600px); scroll-snap-align: start; border: 1px solid var(--line); }

/* faq — site.css 고객지원 FAQ와 같은 모양 */
.faq { border-top: 1px solid var(--ink); }
.faq details { position: relative; padding: 18px 40px 18px 0; border-bottom: 1px solid var(--line); }
.faq summary { font-weight: 700; font-size: clamp(16px, 1.4vw, 18px); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; color: var(--blue); font-size: 24px; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 590px; margin: 10px 0 0; color: #4a4a4a; font-size: 15px; }

/* 서버가 채우는 최신 도슨트 글·진행 중 전시(main.py _home_featured_html). 히어로 바로 아래 첫 섹션 */
.featured-section h3 { margin: 0 0 12px; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.featured-list { margin: 0 0 44px; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.featured-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.featured-list a { color: var(--ink); text-decoration: none; font-size: clamp(16px, 1.4vw, 19px); font-weight: 650; letter-spacing: -.03em; }
.featured-list a:hover { color: var(--coral); }
.featured-list .featured-excerpt { margin: 6px 0 0; color: #4a4a4a; font-size: 14.5px; line-height: 1.6; }
.featured-list .featured-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 13.5px; }
.featured-more { display: inline-block; margin: -28px 0 44px; color: var(--blue); font-size: 14px; font-weight: 700; text-decoration: none; }
.featured-more:hover { color: var(--coral); }
.featured-more:last-child { margin-bottom: 0; }

/* 푸터 앱 다운로드 — 홈 본문의 큰 배지 대신 어두운 바탕용 작은 외곽선 버튼 */

@media (max-width: 900px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .feature, .feature:nth-child(3n + 1), .feature:nth-child(3n) { padding: 28px 20px 32px; }
  .feature:nth-child(odd) { padding-left: 0; }
  .feature:nth-child(even) { padding-right: 0; }
}
/* 로고 크기는 atelierlabs·keepsake 헤더와 같은 단계로 줄인다 */
@media (max-width: 760px) { .site-logo img { height: 26px; } }
@media (max-width: 480px) { .site-logo img { height: 22px; } }
@media (max-width: 760px) {
  .hero { min-height: max(570px, 132vw); }
  .hero-frame img { object-position: 80% center; }
  .about, .persona-section, .taste-section, .faq-section, .featured-section { grid-template-columns: 1fr; row-gap: 28px; }
  .about { row-gap: 0; }
  .about h2 { margin-bottom: 28px; }
  .about h2 { grid-row: auto; }
  .gallery img { height: 430px; }
  .cta { flex-wrap: nowrap; gap: 8px; }
  .store-badge { width: auto; flex: 1 1 0; min-width: 0; max-width: 180px; padding: 14px 16px; gap: 10px; }
  .store-badge svg { width: 26px; height: 26px; }
  .store-badge .store-name { font-size: 15px; }
  .store-badge .eyebrow { font-size: 9.5px; }
}
@media (max-width: 560px) {
  .site-header-inner { gap: 8px; }
  /* 휴대폰: 메뉴는 ☰ 버튼(nav.js)으로 여닫는 드롭다운 */
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 6px var(--gutter) 14px; background: var(--paper);
    border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(21, 21, 21, .06);
  }
  .site-header.nav-open .site-nav { display: flex; }
  .site-nav a { padding: 13px 0; font-size: 15px; border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border-bottom: 0; }
  .lang-switch { margin-left: auto; }
  .features { grid-template-columns: 1fr; }
  .feature, .feature:nth-child(n) { padding: 24px 0 28px; }
  .feature-icon { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-frame .hero-slide { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .store-badge, .taste-link, .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { transition: none; }
}

/* footer — 세 사이트 공통, 위치·크기가 같도록 고정 격자를 쓴다.
   위 줄: [로고(오른쪽에 앱 다운로드) 340px | 링크 묶음 4칸 균등 | Made by 100px], 아래 줄: 문의·저작권.
   링크 묶음 수(2~4개)나 Made by 유무와 상관없이 각 칸의 x 위치와 높이가 세 사이트에서 같다. */
.site-footer { padding: 44px max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter))) 26px; background: var(--ink); color: #fff; font-size: 13.5px; }
.footer-top { display: grid; grid-template-columns: 340px minmax(0, 1fr) 100px; align-items: start; column-gap: 32px; }
.footer-brand { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.site-footer .footer-logo { display: block; height: 26px; width: auto; }
.footer-stores { display: flex; gap: 6px; }
.site-footer .footer-store { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 9px; border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: border-color .15s, background-color .15s; }
.site-footer .footer-store:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.site-footer .footer-store svg { width: 14px; height: 14px; flex-shrink: 0; }
.footer-nav { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 12px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.footer-col .links-label { margin-bottom: 4px; color: #888; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; line-height: 1.6; }
.footer-col a { color: #e8e8e8; text-decoration: none; line-height: 1.5; overflow-wrap: break-word; }
/* 줄바꿈은 낱말·구 단위로만: 한국어는 어절, 일본어는 문절(auto-phrase) */
.footer-col a:lang(ko) { word-break: keep-all; }
.footer-col a:lang(ja) { word-break: auto-phrase; }
/* 다른 언어로만 있는 문서 표시 — 괄호 문구 대신 작은 언어 코드 태그 (화면 낭독기는 숨긴 원문을 읽는다) */
.link-note { display: inline-block; margin-left: 6px; padding: 0 4px; border: 1px solid rgba(255, 255, 255, .22); color: #999; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; line-height: 15px; vertical-align: 1px; white-space: nowrap; }
.footer-col a:hover { text-decoration: underline; }
.maker { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-top: 1px; color: #888; text-decoration: none; }
.maker-label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; line-height: 1; text-transform: uppercase; }
.maker img { display: block; height: 22px; width: auto; opacity: .92; transition: opacity .15s; }
.maker:hover img { opacity: 1; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); color: #888; font-size: 12.5px; line-height: 1.6; }
@media (max-width: 1199px) {
  /* 태블릿: 로고·Made by가 첫 줄, 링크 묶음 4칸은 둘째 줄 전체 폭 */
  .footer-top { grid-template-columns: minmax(0, 1fr) 100px; grid-template-rows: minmax(44px, auto) auto; row-gap: 32px; }
  .footer-nav { grid-column: 1 / -1; grid-row: 2; }
  .maker { grid-column: 2; }
}
@media (max-width: 560px) {
  /* 휴대폰: 로고 → 링크 묶음 2열 → Made by 한 줄 → 문의·저작권 */
  .site-footer { padding-top: 36px; }
  .footer-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 28px; min-height: 0; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .maker { grid-column: 1; grid-row: 3; justify-self: start; flex-direction: row; align-items: center; }
  .maker img { height: 18px; }
  .footer-bottom { flex-direction: column; margin-top: 28px; }
}