/* 261009_ 전역 원컬럼: 모든 페이지 콘텐츠는 최대 450px 가운데 정렬, 페이지 배경은 컬럼 안에만 칠하고 바깥은 배경 없음 */
:root { background: #fff; }
body { box-sizing: border-box; width: 100%; max-width: 450px; margin-left: auto; margin-right: auto; isolation: isolate; }

/* 261008_ 공통 헤더 */
.hw-header { position: relative; z-index: 5; box-sizing: border-box; width: 100%; max-width: 450px; height: 70px; margin: 0 auto; }
/* 261012_ 공통 헤더 검정 그라데이션 */
.hw-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 130px; background: linear-gradient(180deg, #000 0, rgba(0,0,0,.96) 40px, rgba(0,0,0,.9) 70px, rgba(0,0,0,.62) 88px, rgba(0,0,0,.32) 104px, rgba(0,0,0,.12) 118px, rgba(0,0,0,0) 130px); pointer-events: none; }
.native-purchase[data-checkout=common] .hw-header::before { content: none; }
header.hw-header .hw-header-logo { position: absolute; z-index: 1; top: 50%; display: flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; transform: translateY(-50%); }
header.hw-header--main .hw-header-logo { left: 20px; }
header.hw-header--sub .hw-header-logo, header.hw-header--checkout .hw-header-logo, header.hw-header--loading .hw-header-logo { left: 50%; transform: translate(-50%, -50%); }
.hw-header-logo img { display: block; width: 36px; height: 36px; object-fit: cover; }
/* Designer's outlined SVG: keep the existing wordmark space and use the header's light/dark colour. */
.hw-header-logo .hw-header-wordmark { display: block; flex: 0 0 68.125px; width: 68.125px; height: 31.2px; color: #fff; background-color: currentColor; -webkit-mask: url("/static/img/header-wordmark.svg?v=261013-1") center / contain no-repeat; mask: url("/static/img/header-wordmark.svg?v=261013-1") center / contain no-repeat; }
header.hw-header :is(.hw-header-back, .hw-header-search, .hw-header-menu) { position: absolute; z-index: 2; top: 50%; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; transform: translateY(-50%); }
.hw-header-back { left: 1.5px; }
.hw-header img { display: block; max-width: none; margin: 0; }
.hw-header-back img { width: 11.3px; height: 17.9471px; }
.hw-header-search img { width: 16.7695px; height: 16.785px; }
.hw-header-search { right: 49.27px; }
header.hw-header .hw-header-menu { right: 12.18px; flex-direction: column; gap: 4.471px; }
.hw-header-menu span { display: block; width: 22.353px; height: 2.235px; border-radius: 1.118px; background: #ececef; }
.hw-header--sub .hw-header-menu span { background: #fcfcff; }
header.hw-header--checkout .hw-header-menu { display: none; }
.hw-header a:focus-visible, .hw-header button:focus-visible { outline: 2px solid #c8cdd1; outline-offset: 2px; }

/* 261008_ 사이드메뉴·검색 공통 레이어 */
html.hw-drawer-locked { overflow: hidden; }
.hw-drawer-backdrop { position: fixed; inset: 0; z-index: 90; max-width: 450px; margin: 0 auto; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.hw-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.hw-drawer-frame { position: fixed; top: 0; bottom: 0; left: 50%; z-index: 100; width: min(100%, 450px); transform: translateX(-50%); overflow: hidden; pointer-events: none; }
.hw-drawer-panel { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; background: #fff; color: #131314; font-family: "Pretendard Variable", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; pointer-events: auto; transition: transform .28s ease; }
.hw-drawer-panel.is-open { transform: none; }
.hw-drawer-topbar { display: flex; justify-content: flex-end; padding: 32px 40px 0; }
.hw-drawer-close { padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; color: #131314; font-size: 20px; line-height: 1.3; cursor: pointer; }
.hw-drawer-rule { height: 1px; margin: 6px 40px; background: #f2f2f2; }

/* 261008_ 사이드메뉴 */
.hw-aside-panel { transform: translateX(100%); }
.hw-aside-login { padding: 40px 40px 20px; }
.hw-aside-login-card { display: flex; flex-direction: column; gap: 18px; padding: 18px 0; }
.hw-aside-login-title { margin: 0; color: #131314; font: 700 20px/1.3 "HW Serif KR Bold", "HW Serif KR Bold Ext", "Noto Serif KR", Batang, serif; }
.hw-aside-login-sub { margin: 4px 0 0; color: #757575; font: 400 12px/1.3 "Pretendard Variable", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; letter-spacing: -0.02em; }
.hw-aside-logout { display: block; margin: 4px 0 0; padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; color: #757575; font: 400 12px/1.3 "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; letter-spacing: -0.02em; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.hw-aside-logout[hidden], .hw-login-cta[hidden], .hw-aside-login-sub[hidden] { display: none; }
/* 261010_ 회원: 인사말과 로그아웃을 한 줄 아래쪽 정렬, 로그아웃은 채널 추가 CTA 오른쪽 끝에 맞춤. 비회원 안내 문구는 다음 줄 */
.hw-aside-login-copy { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 12px; }
.hw-aside-login-title { flex: 1 1 0; min-width: 0; }
.hw-aside-login-sub { flex-basis: 100%; }
.hw-aside-login-copy .hw-aside-logout { flex-shrink: 0; margin: 0; white-space: nowrap; }
.hw-login-cta { display: flex; align-items: center; justify-content: center; gap: 16px; box-sizing: border-box; height: 52px; padding: 0 16px; border-radius: 4px; background: #f8e106; color: #3b1e1f; font: 600 16px/18px "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; text-decoration: none; white-space: nowrap; }
.hw-login-cta img { display: block; flex-shrink: 0; width: 30.8281px; height: 24px; max-width: none; margin: 0; }

/* 261009_ 카카오 채널 CTA(메인 플로팅·aside 공용) */
.kakao-cta { position: relative; display: flex; align-items: center; box-sizing: border-box; height: 52px; padding: 0 16px; border-radius: 4px; background: #f8e106; color: #000; text-decoration: none; }
.kakao-cta[hidden] { display: none; }
.kakao-cta-icon { display: block; flex-shrink: 0; width: 32px; height: 32px; max-width: none; margin: 0 10px 0 0; object-fit: cover; }
.kakao-cta-text { font: 600 16px/15px "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; letter-spacing: -0.4px; white-space: nowrap; }
.kakao-cta-text strong { font-weight: 700; }
.kakao-cta-arrow { position: absolute; top: 20px; right: 16px; display: flex; align-items: center; justify-content: center; width: 12px; height: 12px; }
.kakao-cta-arrow img { display: block; width: 6.36872px; height: 11.7187px; max-width: none; margin: 0; }
.kakao-cta-notice { position: relative; box-sizing: border-box; min-height: 72px; margin: 0 0 10px; padding: 20px 44px 20px 16px; transition: opacity .3s ease, transform .3s ease; border-radius: 4px; background: rgba(18,18,18,.92); color: #fcfcff; font: 500 14px/1.45 "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; }
.kakao-cta-notice[hidden] { display: none; }
.kakao-cta-notice.is-leaving { opacity: 0; transform: translateY(6px); }
.kakao-cta-notice-close { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; color: #fcfcff; font-size: 14px; line-height: 32px; text-align: center; opacity: .8; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .kakao-cta-notice { transition: none; } }
.kakao-cta-notice a { color: #f8e106; font-weight: 700; }
.kakao-cta-notice.is-issued { font-weight: 300; }
.kakao-cta-notice.is-issued strong { font-weight: 500; }
.hw-aside-stash { display: flex; align-items: center; justify-content: space-between; padding: 16px 40px; color: inherit; text-decoration: none; }
.hw-aside-stash-label { color: #131314; font: 700 20px/1.3 "HW Serif KR Bold", "HW Serif KR Bold Ext", "Noto Serif KR", Batang, serif; }
.hw-aside-category { padding: 4px 40px; }
.hw-aside-category-head { margin: 0; padding: 14px 0; color: #131314; font: 700 20px/1.3 "HW Serif KR Bold", "HW Serif KR Bold Ext", "Noto Serif KR", Batang, serif; }
.hw-aside-sublist { display: flex; flex-direction: column; gap: 12px; padding-bottom: 10px; }
.hw-aside-sublist a { color: #757575; font: 500 16px/1.3 "Pretendard Variable", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .hw-drawer-backdrop, .hw-drawer-panel { transition: none; }
}

/* 261011_ 모바일 공통 메뉴 터치 영역 */
@media (hover: none) and (pointer: coarse) {
  header.hw-header :is(.hw-header-back, .hw-header-search, .hw-header-menu) { width: 44px; height: 44px; }
  header.hw-header .hw-header-search { right: 60px; }
  .hw-header-logo { min-height: 44px; }
  .hw-drawer-close { min-width: 44px; min-height: 44px; }
  .hw-aside-sublist { gap: 0; }
  .hw-aside-sublist a { display: flex; align-items: center; min-height: 44px; }
  .hw-drawer-panel { padding-bottom: env(safe-area-inset-bottom); }
}

/* 261015_ iOS 사이드메뉴 명조 통일: Noto Serif KR Bold 웹폰트(자주 쓰는 한글 + 나머지 한글) */
@font-face { font-family: "HW Serif KR Bold"; src: url("/static/fonts/noto-serif-kr-700-common.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "HW Serif KR Bold Ext"; src: url("/static/fonts/noto-serif-kr-700-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }