/* web/public/stores/stores.css — 지점 안내 전용. 기존 테마 CSS는 건드리지 않고 .stores 아래에만 적용한다. */
/* 토큰은 디자인 시스템 v1.0(docs/design-system/design-system.md)에서 그대로 가져온다.
   폰트(고운바탕·프리텐다드)는 default.css/mobile.css가 이미 전역 로드한다. */

.stores {
  /* 디자인 시스템 토큰 */
  --sw-paper: #F7F4EC;
  --sw-paper-deep: #EBE6DE;
  --sw-ink: #4C4541;
  --sw-cream: #F3F0E2;
  --sw-red: #ED1C23;
  --sw-coral: #F0A996;
  --sw-gold: #CCBC98;
  --sw-text-2nd: #6E6863;
  --sw-border: rgba(76, 69, 65, 0.16);
  --sw-focus: #B0453D;
  --sw-display: 'Gowun Batang', 'Nanum Myeongjo', serif;
  --sw-ui: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;

  /* 페이지 자체를 한지 위에 얹는다 */
  background: var(--sw-paper);
  padding: 48px 48px 96px;
  margin-top: 8px;
  font-family: var(--sw-ui);
  color: var(--sw-ink);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
}

/* 테마 CSS가 p/li 색을 덮는 경우가 있어 명시적으로 되찾는다(블로그의 관례). */
.stores p, .stores li, .stores dt, .stores dd, .stores a { color: var(--sw-ink); }
.stores p { margin: 0; }
.stores ul, .stores dl { margin: 0; padding: 0; }
.stores li { list-style: none; }
.stores img { display: block; }
.stores h2, .stores h3 { margin: 0; }

/* 공통 페이지 제목 블록 — 한지 시트 밖(흰 배경), 게시판(scw_4_1) 규격 그대로:
   가운데 정렬, 로고 아래 20px, 제목 40px, 블록 아래 40px. 색은 테마 기본을 상속. */
.ssc .sw-page-head { text-align: center; margin-bottom: 40px; }
.ssc .sw-page-head img { display: inline-block; margin-bottom: 20px; }
.ssc .sw-page-head h2 {
  margin: 0;
  font: 700 40px/1.3 'Gowun Batang', 'Nanum Myeongjo', serif;
}

/* 섹션 제목 — 고운바탕 + 짧은 코랄 헤어라인(디자인 시스템 §4.5) */
.stores .sw-h {
  font: 700 1.75rem/1.35 var(--sw-display);
  letter-spacing: -0.01em;
  color: var(--sw-ink);
  margin: 0;
}
.stores .sw-h::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--sw-coral);
  margin-top: 14px;
}

/* 버튼 — Primary(먹) / Secondary(테두리) / Inverse(다크 위) 셋만 */
.stores .sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 4px;
  border: 1px solid transparent;
  font: 600 0.875rem/1 var(--sw-ui);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.stores .sw-btn-primary { background: var(--sw-ink); color: var(--sw-cream); }
.stores .sw-btn-secondary { background: transparent; color: var(--sw-ink); border-color: var(--sw-ink); }
.stores .sw-btn-inverse { background: var(--sw-cream); color: var(--sw-ink); }
.stores .sw-btn-disabled { background: transparent; color: #A39C93; border-color: var(--sw-border); cursor: default; }
.stores .sw-btn-primary:hover, .stores .sw-btn-inverse:hover { filter: brightness(1.08); }
.stores .sw-btn-secondary:hover { filter: brightness(0.92); }

.stores .sw-link {
  color: var(--sw-ink);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.stores .sw-link:hover { color: var(--sw-text-2nd); }

.stores a:focus-visible, .stores .sw-btn:focus-visible {
  outline: 2px solid var(--sw-focus);
  outline-offset: 2px;
}

/* ---------- 목록 ---------- */

/* 리드: 1열 전폭 — 폭 제한을 두지 않아 오른쪽에 빈 영역이 남지 않는다.
   문단이 2~3줄로 짧아 긴 행길이가 부담되지 않는다(PM 결정: 2단 대신 1열). */
.stores .sw-lead-intro { margin-top: 22px; font-size: 1.125rem; line-height: 1.7; }
.stores .sw-lead p { font-size: 1.0625rem; line-height: 1.8; }
.stores .sw-lead p + p { margin-top: 20px; }

.stores .sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 32px;
  margin-top: 64px;
}

.stores .sw-card-photo { display: block; position: relative; overflow: hidden; }
.stores .sw-card-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
a.sw-card-photo:hover img { transform: scale(1.02); }
.stores .sw-card-title {
  margin-top: 22px;
  font: 700 1.375rem/1.3 var(--sw-display);
  color: var(--sw-ink);
}
.stores .sw-tagline { margin-top: 8px; font-size: 1rem; }

.stores .sw-rows { margin-top: 18px; }
.stores .sw-rows > div {
  display: flex;
  gap: 14px;
  padding: 9px 2px;
  border-top: 1px solid var(--sw-border);
}
.stores .sw-rows dt {
  flex: 0 0 3.2em;
  font-size: 0.875rem;
  color: var(--sw-text-2nd);
}
.stores .sw-rows dd {
  margin: 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.stores .sw-rows dd a { text-decoration: underline; text-underline-offset: 3px; }

.stores .sw-actions { display: flex; gap: 10px; margin-top: 20px; }

/* 어디로 갈까요 — 상황이 지점을 고른다 */
.stores .sw-guide {
  margin-top: 96px;
  background: var(--sw-paper-deep);
  padding: 48px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 8px 64px;
}
.stores .sw-guide .sw-h { grid-row: 1 / span 2; align-self: start; }
.stores .sw-guide-list { margin-top: 4px; }
.stores .sw-guide-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 2px;
  border-top: 1px solid var(--sw-border);
}
.stores .sw-guide-list dt { font-size: 1rem; }
.stores .sw-guide-list dd { margin: 0; font: 700 1.125rem/1.4 var(--sw-display); white-space: nowrap; }
.stores .sw-guide-list dd a { color: var(--sw-ink); text-decoration: underline; text-underline-offset: 4px; }
.stores .sw-guide-list dd a:hover { color: var(--sw-text-2nd); }
.stores .sw-guide-note { margin-top: 20px; font-size: 0.875rem; color: var(--sw-text-2nd); grid-column: 2; }

/* 마무리 — 미션 문구(4년 불변, 프로필 bio와 동일) 한 줄로 페이지를 닫는다 */
.stores .sw-outro-line {
  margin: 96px auto 0;
  text-align: center;
  font: 700 1.125rem/1.6 var(--sw-display);
  color: var(--sw-ink);
}

/* ---------- 상세 ---------- */

.stores .sw-hero { position: relative; }
.stores .sw-hero img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.stores .sw-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
}
.stores .sw-hero-kicker {
  position: absolute;
  left: 28px;
  bottom: 20px;
  z-index: 1;
  color: var(--sw-cream);
  font: 500 0.8125rem/1.4 var(--sw-ui);
  letter-spacing: 0.08em;
}

.stores .sw-hero-block { margin-top: 40px; }
.stores .sw-hero-title {
  font: 700 2.25rem/1.3 var(--sw-display);
  letter-spacing: -0.02em;
  color: var(--sw-ink);
}
/* 하이라이터 마커(§3.4) — 한 화면에 이 한 곳만 */
.stores .sw-mk {
  font-style: normal;
  padding: 0 0.08em;
  background: linear-gradient(100deg, rgba(204, 188, 152, 0) 1%, var(--sw-gold) 3%, rgba(204, 188, 152, 0.82) 97%, rgba(204, 188, 152, 0) 99%) no-repeat;
  background-size: 100% 44%;
  background-position: 0 72%;
}
.stores .sw-hero-sub { margin-top: 12px; font-size: 1.0625rem; color: var(--sw-text-2nd); }

.stores .sw-hero-actions { display: flex; gap: 12px; margin-top: 28px; }

/* 정보 시트 — 인쇄물의 격자 코너(§3.3)를 모서리 악센트로만 */
.stores .sw-sheet {
  position: relative;
  background: var(--sw-paper-deep);
  padding: 56px 64px;
  margin-top: 64px;
}
/* 격자 코너: 프레임 에셋에서 모서리 문양 하나만 추출한 SVG(35x38)를
   비율 고정으로 좌상(180° 회전)·우하에 배치 — 늘리지 않으니 짜부되지 않는다. */
.stores .sw-sheet::before, .stores .sw-sheet::after {
  content: '';
  position: absolute;
  width: 19px;
  height: 21px;
  background: url('/stores/assets/motif-lattice-corner-single.svg') no-repeat center / contain;
  pointer-events: none;
}
.stores .sw-sheet::before { top: 12px; left: 12px; transform: rotate(180deg); }
.stores .sw-sheet::after { bottom: 12px; right: 12px; }

.stores .sw-sheet-row {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 6px 28px;
  padding: 14px 0;
  border-top: 1px solid var(--sw-border);
}
.stores .sw-sheet-row:first-child { border-top: 0; padding-top: 0; }
.stores .sw-sheet-row:last-child { padding-bottom: 0; }
.stores .sw-sheet-row dt { font: 700 0.9375rem/1.6 var(--sw-display); }
.stores .sw-sheet-row dd { margin: 0; font-size: 1rem; font-variant-numeric: tabular-nums; }
.stores .sw-sheet-row dd a { text-decoration: underline; text-underline-offset: 3px; }
.stores .sw-maplinks { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: 18px; vertical-align: middle; }
.stores .sw-mapbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--sw-border);
  border-radius: 4px;
  background: #fff;
  font: 600 0.8125rem/1 var(--sw-ui);
  color: var(--sw-ink);
  text-decoration: none;
  transition: filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.stores .sw-mapbtn:hover { filter: brightness(0.95); }
/* 정보 시트의 dd a 밑줄 규칙(전화 링크용)이 버튼류를 덮지 않게 해제 */
.stores .sw-sheet-row dd .sw-mapbtn,
.stores dd a.sw-btn { text-decoration: none; }

/* 앱 아이콘 — 각 서비스의 공식 앱 아이콘(파비콘·PWA 아이콘 출처, 36px@2x) */
.stores img.sw-appic {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex: 0 0 auto;
  display: inline-block;
}
.stores .sw-btn .sw-appic { margin-right: 8px; }

.stores .sw-btn-sm { padding: 9px 16px; font-size: 0.8125rem; }

/* 이야기 — 좁은 본문 컬럼(§5.2) */
.stores .sw-story, .stores .sw-transit { margin-top: 96px; }
.stores .sw-story p, .stores .sw-transit p { margin-top: 16px; font-size: 1.0625rem; line-height: 1.4; }
.stores .sw-story-btn { margin-top: 28px; }

/* 지점 한정 별미 */
.stores .sw-specials { margin-top: 96px; }
.stores .sw-specials-lead { margin-top: 20px; font-size: 1rem; }
.stores .sw-specials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  margin-top: 32px;
}
.stores .sw-specials-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stores .sw-special-name { margin-top: 14px; font: 700 1.125rem/1.4 var(--sw-display); }
.stores .sw-special-note { margin-top: 6px; font-size: 0.875rem; line-height: 1.6; color: var(--sw-text-2nd); }
.stores .sw-specials > .sw-btn { margin-top: 32px; }

/* 예약 밴드 — 먹빛 위 크림(푸터 톤 차용, §4.3) */
.stores .sw-cta {
  margin-top: 96px;
  background: var(--sw-ink);
  text-align: center;
  padding: 72px 32px;
}
.stores .sw-cta-heading { font: 700 1.75rem/1.35 var(--sw-display); color: var(--sw-cream); }
.stores .sw-cta-body { margin-top: 12px; font-size: 0.9375rem; color: rgba(243, 240, 226, 0.85); }
.stores .sw-cta .sw-btn { margin-top: 28px; }

/* 다른 지점 */
.stores .sw-others { margin-top: 96px; }
.stores .sw-others-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.stores .sw-others-grid > li { border-top: 1px solid var(--sw-border); padding-top: 16px; }
.stores .sw-others-name { font: 700 1.125rem/1.4 var(--sw-display); }
.stores .sw-others-tagline { margin: 6px 0 12px; font-size: 0.875rem; color: var(--sw-text-2nd); }
.stores .sw-others .sw-back { display: inline-block; margin-top: 36px; }

/* 모바일 하단 고정 예약 바 — CSS만으로 동작, JS 없음 */
.stores .sw-sticky { display: none; }

/* 메뉴판 복귀 버튼과 우하단이 겹치지 않게, 지점 상세에서는 복귀 버튼을 숨긴다 */
body:has(.sw-sticky) #mb_return { display: none !important; }

@media (max-width: 767px) {
  body:has(.sw-sticky) #top_btn { bottom: 92px !important; }
}

@media (max-width: 767px) {
  /* 섹션 래퍼(scw_5_1)의 모바일 하단 패딩 15%가 한지와 푸터 사이 흰 띠로 남는다 —
     지점 페이지에서만 제거해 한지가 푸터에 붙게 한다(이 CSS는 지점 페이지에만 로드). */
  .scw_5_1 .ssc { padding-bottom: 0; }

  /* 모바일 테마는 .inner가 90% 폭이라 한지 배경이 이중 프레임처럼 보인다.
     음수 마진으로 뷰포트 전폭까지 빼내고, 본문은 자체 패딩(18px)만 남긴다. */
  .stores {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 28px 18px 64px;
  }
  .stores .sw-h { font-size: 1.5rem; }
  .ssc .sw-page-head { margin-bottom: 30px; }
  .ssc .sw-page-head h2 { font-size: 1.833em; }

  .stores .sw-grid { grid-template-columns: 1fr; gap: 48px; margin-top: 44px; }
  .stores .sw-lead-intro { font-size: 1.0625rem; }
  .stores .sw-guide { margin-top: 64px; padding: 28px 20px; grid-template-columns: 1fr; gap: 0; }
  .stores .sw-guide .sw-h { grid-row: auto; }
  .stores .sw-guide-list { margin-top: 24px; }
  .stores .sw-guide-note { grid-column: 1; }
  .stores .sw-outro-line { margin-top: 64px; font-size: 1rem; }
  .stores .sw-guide-list dd { font-size: 1.0625rem; white-space: normal; text-align: right; }

  .stores .sw-hero img { aspect-ratio: 4 / 3; }
  .stores .sw-hero-kicker { left: 18px; bottom: 14px; }
  .stores .sw-hero-block { margin-top: 28px; }
  .stores .sw-hero-title { font-size: 1.625rem; }
  .stores .sw-hero-sub { font-size: 1rem; }
  .stores .sw-hero-actions { flex-direction: column; align-items: stretch; }

  .stores .sw-sheet { padding: 28px 20px; margin-top: 44px; }
  .stores .sw-sheet::before, .stores .sw-sheet::after { display: none; }
  .stores .sw-sheet-row { grid-template-columns: 1fr; padding: 12px 0; }
  /* 지도 앱 버튼 3개가 한 줄에 들어가게 좌우를 슬림하게. 다만 줄바꿈은 허용한다 —
     nowrap이면 라벨이 긴 언어(일본어 "ネイバー地図/カカオマップ/Google マップ")에서 버튼이
     화면 밖으로 밀려났다(2026-09-15 사전 점검, 비트리 디자인팀). 한국어는 그대로 한 줄이다. */
  .stores .sw-maplinks { display: flex; margin: 8px 0 0; gap: 6px; flex-wrap: wrap; }
  .stores .sw-mapbtn { padding: 7px 8px; gap: 5px; font-size: 0.75rem; white-space: nowrap; }
  .stores .sw-mapbtn .sw-appic { width: 16px; height: 16px; }

  .stores .sw-story, .stores .sw-transit, .stores .sw-specials, .stores .sw-others { margin-top: 64px; }
  .stores .sw-specials-grid { grid-template-columns: 1fr; gap: 32px; }
  .stores .sw-others-grid { grid-template-columns: 1fr; }
  /* CTA 밴드는 화면 좌우 끝까지 — .stores 패딩(18px)을 상쇄해 풀블리드 */
  .stores .sw-cta { margin-top: 64px; margin-left: -18px; margin-right: -18px; padding: 48px 20px; }

  .stores .sw-detail { padding-bottom: 72px; }
  .stores .sw-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(247, 244, 236, 0.96);
    border-top: 1px solid var(--sw-border);
    backdrop-filter: blur(4px);
  }
  .stores .sw-sticky .sw-btn-secondary { flex: 0 0 auto; }
  .stores .sw-sticky .sw-btn-primary { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stores .sw-btn, .stores .sw-card-photo img { transition: none; }
  a.sw-card-photo:hover img { transform: none; }
}