/* 홈페이지 틀 공통(2026-11-04 마스터 「이런 형식으로도 만들 수 있게」 — <body data-look="grand|plain|night|bold"> 일 때만 읽음, src/page_render.php · 값 = src/page.php PAGE_TEMPLATES).
   틀 한 장(look-<값>.css)이 --t-* 값만 정하고, 여기서 그 값을 화면 곳곳에 건다: 바탕·글자·단추·띠 색·제목 글꼴·이름 크기·모서리.
   색은 틀이 정한다(가게 색 data-palette·data-brand 는 html 에 남아 있어도 body 에서 덮음). 손님 흐름 화면도 같은 값(<html class=cust> + <body data-look>, page.php guest_look — 11-05). 글은 처음부터 보임 */
.cust body[data-look]{--bg:var(--t-bg);--gs1:var(--t-btn);--gs2:var(--t-btn2)} /* 손님 흐름 화면(예약·견적·내 예약·줄서기, 11-05 「예약 화면도 그 가게 홈페이지 틀을 따라가야」) — 아래 값 묶음을 같이 받고 바탕·작은 단추만 더 */
body.pg,.cust body[data-look]{
  --t-display:"Hahmlet","Noto Serif KR","Noto Serif JP","Noto Serif SC","Noto Serif TC",serif;
  --t-dw:400; --t-ls:-.02em; --t-btn2:var(--t-btn); --t-name-lh:1.02; --t-name-xl:var(--t-name); --t-title-l:var(--t-title); --t-h2:24px;
  background:var(--t-bg); color:var(--t-ink);
  --ink:var(--t-ink); --sub:var(--t-sub); --muted:var(--t-sub); --faint:var(--t-sub); --pl:var(--t-line); --line:var(--t-line); --line-2:var(--t-line);
  --surface:var(--t-card); --surface-2:var(--t-soft);
  --brand:var(--t-btn); --brand-ink:var(--t-btn-ink); --brand-soft:var(--t-soft); --brand-text:var(--t-ink);
  --g1:var(--t-btn); --g2:var(--t-btn2); --g-ink:var(--t-btn-ink);
  --s1:var(--t-soft); --s2:var(--t-soft);
  --p-sh:var(--t-shadow); --p-sub:var(--t-sub); --p-line:var(--t-line); --p-cover:var(--t-soft);
  --r-l:var(--t-r); --r:var(--t-r);
  --pg-section-title:var(--t-h2);
}
body.pg .glass{background:var(--t-glass);border-color:var(--t-glass-line);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.pg .pg-langslot .langbtn{background:var(--t-glass);border-color:var(--t-glass-line);color:var(--t-ink);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.pg .pg-chip:not(.first){background:var(--t-card)}
/* 작은 표시 = 틀 색으로(가게 색 그대로면 노랑 위 흰 글 · 남색 위 남색 글 — 코덱스 11-04). 낮은 특이성 = 틀 한 장이 다시 덮을 수 있게 */
.pg-chip.first{color:var(--t-btn-ink)}
.pg-chip.first small{color:var(--t-btn-ink);opacity:.85}
.pg-live{color:var(--t-ink);background:var(--t-soft)}
.pg-new{background:var(--t-card);color:var(--t-ink)}
.pg-pvmark{background:var(--t-band);color:var(--t-band-ink)}
body.pg .pg-head.pg-stuck{background:color-mix(in srgb,var(--t-bg) 88%,transparent);color:var(--t-ink)}
body.pg .pg-navp{background:var(--t-card)}
body.pg .pg-bar{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--t-bg) 94%,transparent) 40%)}
@media (min-width:600px){body.pg .pg-bar{background:none}}

/* 제목 글꼴 — 본문은 지금 글꼴 그대로(작은 글은 고딕이 잘 읽힘) */
body.pg :is(.pg-nm,.pg-sh h2,.pg-custom h2,.pg-bnc h2,.pg-brand){font-family:var(--t-display);font-weight:var(--t-dw);letter-spacing:var(--t-ls)}
body.pg .pg-nm{font-size:max(min(24px,var(--t-name-sm)),min(var(--t-name-sm),calc((100vw - 56px) / var(--nw,1))))}  /* --nw = 가장 긴 낱말 어림 폭(page_render pg_name_em) — 낱말 중간에 안 끊기게 화면 폭에 맞춰 줄임 · 바닥 크기 아래로는 안 줄임(띄어쓰기 없는 아주 긴 한글 이름 = 줄 바꿈, 11-05) */

/* 모서리 = 틀 하나로(곳곳에 박힌 22·26·28px 를 덮음) · 넓은 첫 화면은 네모(화면 끝까지) */
body.pg :is(.pg-cover,.pg-tile,.pg-about,.pg-where,.pg-faq,.pg-menu,.pg-next,.pg-bn,.pg-bsl,.pg-bph,.pg-sec[data-bg=soft]){border-radius:var(--t-r)}
body.pg .pg-cover .pg-hcap{border-radius:0 0 var(--t-r) var(--t-r)}
body.pg .pg-hero{border-radius:0}

/* 넓은 첫 화면 + 이름 사진 위 = 이름을 크게. 높이는 「최소」로 바꿔 긴 이름·큰 글자가 잘리지 않고 사진이 늘어남 */
body.pg .pg-hcin{container-type:inline-size}  /* 큰 이름 = 실제 이름 상자 폭(100cqi)에 맞춤 — 화면 폭보다 좁은 넓은 화면·카드 배치(코덱스 11-05) */
body.pg .pg-hero .pg-hcap .pg-nm{font-size:max(32px,min(var(--t-name),calc(100cqi / var(--nw,1))));line-height:var(--t-name-lh)}
body.pg .pg-hero:has(.pg-hcap){display:flex;flex-direction:column;justify-content:flex-end;height:auto;min-height:clamp(220px,64vw,340px)}
body.pg[data-hh=l] .pg-hero:has(.pg-hcap){min-height:min(120vw,520px);min-height:min(120vw,78svh)}
body.pg .pg-hero .pg-hcap{position:relative;inset:auto}
@media (min-width:720px){body.pg .pg-hero:has(.pg-hcap){min-height:360px}body.pg[data-hh=l] .pg-hero:has(.pg-hcap){min-height:min(560px,78svh)}}
@media (min-width:1024px){body.pg .pg-hero:has(.pg-hcap){min-height:420px}body.pg[data-hh=l] .pg-hero:has(.pg-hcap){min-height:min(680px,82svh)}body.pg .pg-hero .pg-hcap .pg-nm{font-size:max(48px,min(var(--t-name-xl),calc(100cqi / var(--nw,1))))}}
body.pg[data-htop=over] .pg-hero:has(.pg-hcap){padding-top:calc(var(--hh) + 24px)}

/* 단추 줄을 사진 위에(명조 틀 + 넓게 + 이름 사진 위 — page_render $actsOver) = 단추는 글 길이만큼, 늘이지 않음 */
body.pg .pg-hcap .pg-acts{margin-top:20px;flex-wrap:wrap}
body.pg .pg-hcap .pg-acts .btn{flex:0 1 auto;min-width:min(220px,100%)}
body.pg .pg-hcap .pg-circ{color:var(--t-ink);text-shadow:none}

/* 반복 구역 = 틀 색 띠 · 제목 크기 */
body.pg .pg-main>.pg-custom[data-sec-bg=dark]{background:var(--t-band);color:var(--t-band-ink)}
body.pg .pg-custom[data-sec-bg=dark] .pg-custom-action{background:var(--t-band-ink);color:var(--t-band);border-color:var(--t-band-ink)}
body.pg .pg-main>.pg-custom[data-sec-bg=soft]{background:var(--t-soft)}
body.pg .pg-main>.pg-custom[data-sec-text=m]{--sec-title:var(--t-title)}
body.pg .pg-main>.pg-custom[data-sec-text=l]{--sec-title:var(--t-title-l)}
body.pg .pg-custom .pg-custom-copy h2{max-width:20ch}

/* 크게·굵게 틀: 소식 = 사진 위 · 설명 아래 카드(두 줄) — 새 자료 없이 소식 칸 그대로 */
:is([data-look=grand],[data-look=bold]) .pg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
:is([data-look=grand],[data-look=bold]) .pg-grid .pg-tile:not(.txt){flex-direction:column;align-items:stretch;aspect-ratio:auto;padding:0;background:var(--t-card);color:var(--t-ink)}
:is([data-look=grand],[data-look=bold]) .pg-grid .pg-tile:not(.txt) img{position:static;width:100%;height:auto;aspect-ratio:4/3}
:is([data-look=grand],[data-look=bold]) .pg-grid .pg-tile:not(.txt)::after{display:none}
:is([data-look=grand],[data-look=bold]) .pg-grid .pg-cap{padding:12px 14px 14px;font-size:16px;font-weight:650;text-shadow:none}
@media (max-width:359px){:is([data-look=grand],[data-look=bold]) .pg-grid{grid-template-columns:minmax(0,1fr)}}

/* ── 손님 흐름 화면(예약·견적·내 예약·줄서기 — 11-05 「예약 화면도 그 가게 홈페이지 틀을 따라가야」). 값은 위 묶음 그대로, 여기는 이 화면에만 있는 자리 ── */
.cust body[data-look] :is(#shopName,.wl-id h1,.ws-wrap>h1,.sthead b){font-family:var(--t-display);font-weight:var(--t-dw);letter-spacing:var(--t-ls)}
.cust body[data-look] .sthead b{color:var(--t-ink)}
/* 모서리 = 틀 값(작은 칸은 16px 까지만 — 차분 틀 28px 이 시간 칸을 알약으로 만들지 않게) */
.cust body[data-look]{--r-s:min(var(--t-r),12px)}
.cust body[data-look] :is(.slots button,.pick){border-radius:min(var(--t-r),16px)}
/* 상태 글자(영업 중·쉼·확정 날짜·취소·오류 안내·연결 끊김) = 상태색을 틀 글자색과 섞음 — 상태색만으로는 어두운 틀 바탕에서 안 읽힘(밤 틀 2.2) · 색 기운은 남김 */
.cust body[data-look] :is(.meta .open,.ncard .non){color:color-mix(in srgb,var(--st-seat) 55%,var(--t-ink))}
.cust body[data-look] :is(.meta .shut,.btn.danger:not(.fill),.err,.quick button.bad,.wl-asof){color:color-mix(in srgb,var(--st-bad) 55%,var(--t-ink))}
.cust body[data-look] .pop.ok .pop-when{color:color-mix(in srgb,var(--st-ok) 55%,var(--t-ink))}