/* 모바일 청첩장 v3 — Claude Design 「모바일 청첩장 v3.dc.html」 의 helmet <style> 을 그대로 옮긴 것.
   v3 는 _ds/ 디자인 시스템을 쓰지 않습니다(인라인 팔레트 + Google Fonts).
   v2(Modernist) 는 v2/ 에, v1(Broadsheet) 은 v1/ 에 보존되어 있습니다. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Noto+Serif+KR:wght@200;300;400;500&family=Noto+Serif+JP:wght@200;300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #f7f5f1; text-wrap: pretty; }
a { color: #a97b76; }
a:hover { color: #8c625e; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* 강조 톤 — 원본 accentTone 속성(rose / sage) */
.tone-rose { --accent:#b98a86; --accent-deep:#8c625e; --accent-soft:#f3e9e6; }
.tone-sage { --accent:#8d9d8a; --accent-deep:#657463; --accent-soft:#e9eee8; }

.pill { transition: background .18s ease, box-shadow .18s ease; }
.pill:hover { background: #fff; box-shadow: 0 4px 16px rgba(58,58,56,.10); }
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.f-input {
  width: 100%; font: inherit; font-size: 14.5px; color: #3a3a38;
  background: #fdfcfa; border: 1px solid #e4ded6; border-radius: 22px;
  padding: 11px 16px; text-align: center;
}
.f-input:focus-visible { outline: none; border-color: var(--accent); }
textarea.f-input { border-radius: 16px; resize: vertical; text-align: left; }
.f-input::placeholder { color: #6f6a62; }

/* ── 사진 슬롯 ──────────────────────────────────────────────
   원본 <image-slot> 대신. 비율은 자리마다 다르고(3/4·1/1·4/5) object-fit 이 채웁니다. */
.ph { position: relative; width: 100%; height: 100%; overflow: hidden; background: #efece7; display: block; }
.ph > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 전신 세로컷을 정사각으로 자를 때 얼굴이 남도록 위쪽을 기준으로 자릅니다 */
.ph.crop-top > img { object-position: center 28%; }
.ph[data-empty="1"]::after {
  content: attr(data-placeholder);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 12px; text-align: center;
  font-family: 'Cormorant Garamond', serif; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: #a9a49c; border: 1px dashed #e0d9d0;
}

/* ── 대표 사진 크로스페이드 (준호님 지시: 5초 간격 자동 전환) ── */
.crossfade { position: relative; width: 100%; height: 100%; overflow: hidden; background: #efece7; }
.crossfade img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease-in-out;
}
.crossfade img.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .crossfade img { transition: none; } }

/* 대표 사진 위 인디케이터 — v3 톤에 맞춘 작은 점 */
.dots { display: flex; gap: 6px; justify-content: center; }
.dot {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(58,58,56,.22); transition: background .2s;
}
.dot[aria-selected="true"] { background: var(--accent-deep); }

/* 일본어판은 일본어 세리프로 — 한국어 폰트로 일본 한자를 그리면 자형이 어긋납니다 */
html[lang="ja"] body,
html[lang="ja"] .f-input { font-family: 'Noto Serif JP', serif; }

/* ── 인물 소개 팝업 (준호님 지시 2026-08-25: About us 고정 섹션 → 사진 탭 라이트박스) ──
   <dialog> 를 씁니다 — ESC 닫기·포커스 가둠·배경 레이어를 브라우저가 처리해 줍니다. */
.portrait-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; position: relative; border-radius: 6px; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.portrait-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 탭할 수 있다는 힌트 — 사진 아래쪽에 은은하게 */
.tap-hint {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 0 8px; pointer-events: none;
  font-family: 'Cormorant Garamond', serif; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(58,58,56,.55) 0%, rgba(58,58,56,0) 100%);
}
.portrait-btn:hover .tap-hint { color: #fff; }

.bio-dialog {
  border: 0; padding: 0; background: transparent;
  width: min(88vw, 340px); max-height: 88vh; overflow: visible;
}
.bio-dialog::backdrop { background: rgba(58,58,56,.55); }
.bio-card {
  background: #f7f5f1; border-radius: 20px; overflow: hidden; text-align: left;
  box-shadow: 0 18px 48px rgba(58,58,56,.28);
  max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.bio-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.bio-body { padding: 20px 22px 24px; }
.bio-close {
  position: absolute; top: -14px; right: -6px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: #fdfcfa; color: #3a3a38; box-shadow: 0 2px 10px rgba(58,58,56,.22);
}
.bio-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 열릴 때만 살짝 떠오르게. 움직임을 줄이도록 설정한 기기에서는 그냥 나타납니다. */
@media (prefers-reduced-motion: no-preference) {
  .bio-dialog[open] { animation: bio-in .22s ease-out; }
  @keyframes bio-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
/* 팝업이 열려 있는 동안 뒤 본문이 밀려 스크롤되지 않도록 */
body.bio-open { overflow: hidden; }

/* 팝업 안 소개문 조판 */
.bio-name { margin: 0; font-size: 16px; letter-spacing: .02em; }
.bio-name .kana { font-size: 11.5px; color: #8a857c; }
.bio-date { font-family: 'Cormorant Garamond', serif; font-size: 13px; letter-spacing: .08em;
  color: #6f6a62; margin: 5px 0 16px; }
.bio-lines { margin: 0; font-size: 13.5px; line-height: 2; }
.bio-lines .pre { color: #a9a49c; }
.bio-lines .now { color: var(--accent-deep); }
.bio-lines .sub { color: #6f6a62; }
.bio-lines .ind { display: inline-block; padding-left: 1.5em; }
.bio-lines b { font-weight: 500; }

/* 갤러리 라이트박스 — Portraits 팝업과 같은 dialog 를 재사용합니다(사진만 크게) */
.bio-dialog.photo-only .bio-body { display: none; }
/* 🔴 소개 팝업(=photo-only 아님)에서는 좌우 이동·장수 표시를 **완전히** 가립니다.
   `hidden` 속성만 믿으면 안 됩니다 — `.lb-nav{display:flex}` 가 브라우저 기본 `[hidden]` 을 덮어
   버튼이 그대로 눌렸고, 소개 팝업에서 화살표를 누르면 갤러리 사진으로 넘어갔습니다(2026-08-25 실사고). */
.bio-dialog:not(.photo-only) .lb-nav,
.bio-dialog:not(.photo-only) .lb-count { display: none !important; }
.lb-nav[hidden], .lb-count[hidden] { display: none !important; }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(253,252,250,.92); color: #3a3a38; box-shadow: 0 2px 10px rgba(58,58,56,.22);
}
.lb-prev { left: -8px; }
.lb-next { right: -8px; }
.lb-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-count {
  position: absolute; left: 0; right: 0; bottom: -26px; text-align: center;
  font-family: 'Cormorant Garamond', serif; font-size: 12px; letter-spacing: .16em;
  color: #f7f5f1;
}
/* 갤러리 타일도 탭 가능 — 버튼이지만 그리드 칸처럼 보이게 */
.gal-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  aspect-ratio: 1; border-radius: 4px; overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.gal-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* BGM 토글 — 우상단 고정. v3 톤에 맞춰 작고 은은하게. */
.bgm-btn {
  position: fixed; top: 14px; right: 14px; z-index: 9;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(253,252,250,.82); color: var(--accent-deep);
  box-shadow: 0 2px 10px rgba(58,58,56,.16);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: background .18s ease, color .18s ease;
}
.bgm-btn:hover { background: #fff; }
.bgm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 꺼져 있을 때는 색을 빼서 상태가 눈에 보이게 */
.bgm-btn[aria-pressed="false"] { color: #a9a49c; }
.bgm-btn .off-slash { display: none; }
.bgm-btn[aria-pressed="false"] .off-slash { display: block; }
/* 본문이 440px 로 가운데 정렬되므로, 넓은 화면에서는 그 안쪽 우상단에 붙입니다 */
@media (min-width: 468px) { .bgm-btn { right: calc(50vw - 206px); } }