/* 사이트 공통 모양 — 사이트 화면 기준(CLAUDE.md): 바탕 "나"(오래된 책 종이) + 먹색 글씨, 컴퓨터·휴대폰 공통 */
:root {
  --fs: 1;                /* 글자 배율: 휴대폰 1, 컴퓨터 0.85(아래). "글자 크게" 버튼은 2026-10-05 없앰 */
  --bg: #efe3c8;          /* 바탕 */
  --paper2: #e8d9b8;      /* 맨 위 줄·캐릭터 목록 바탕 */
  --hero: #e9dbbd;        /* 첫 화면 바탕 */
  --card: #f6ecd6;        /* 칸·창 바탕 */
  --field: #fbf5e6;       /* 입력 칸 바탕 */
  --ink: #2a2218;         /* 먹색 글씨 */
  --sub: #4d3f2c;         /* 설명 글씨(진한 갈색) */
  --accent: #6b4a22;      /* 강조 글씨(짙은 황토) */
  --line: #c8b58f;        /* 선 */
  --lineStrong: #a8916a;  /* 입력 칸 테두리 */
  --btn: #4a3520;         /* 큰 버튼 */
  --btnText: #fbf3e2;
  /* 운세 코너·캐릭터 카드·캐릭터 창 색(2026-10-13 저녁 사장님: 캐릭터별 색은 정신없어 모두 뺌, 두 색으로 통일) — 여기 한 곳에서 바꿈 */
  --navy: #1c2a5a;        /* 남색: 맨 위 밤하늘의 남색(--sky-bottom) 그대로 — 캐릭터 이름·창 제목·"무료" 채운 표 */
  --goldbrown: #a8874f;   /* 금갈색: 그림·첫 글자 네모·가격표·카드·창 테두리 */
  --goldink: #7a5a16;     /* 진한 금색 글씨: "운세 코너" 제목(밤하늘 제목 금색 계열, 종이 위에서 읽히게 진하게) */
  --sidepaper: #e2d1ac;   /* 왼쪽 운세 코너 칸 바탕(한 단계 진하게) */
  --cardpaper: #f7eedb;   /* 카드 바탕(밝게) */
}
/* 컴퓨터(폭 769px 이상)는 글씨를 한 단계 작게 — 휴대폰은 그대로(2026-10-05 사장님: 컴퓨터 글씨가 너무 큼) */
@media (min-width: 769px) { :root { --fs: 0.85; } }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; background: var(--bg); color: var(--ink); font-size: calc(18px * var(--fs)); line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }  /* 낱말 중간에서 줄 바꾸지 않기 */
a { color: var(--accent); }
a, button { font-family: inherit; }
.hairline { border: 1px solid var(--line); }

/* 맨 위 줄 */
/* 휴대폰 번호 칸: 연한 010-0000-0000 틀 위에 누른 숫자가 차례로(common.js phoneMask) */
.nw-phonewrap { position: relative; display: block; flex: 1; min-width: 0; width: 100%; }
.nw-phonewrap input { position: relative; z-index: 1; width: 100%; }
.nw-phoneghost { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; white-space: pre; pointer-events: none; box-sizing: border-box; overflow: hidden; }
.nw-phoneghost .typed { visibility: hidden; }
.nw-phoneghost .rest { color: #9c8a6a; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; padding: 18px 56px; background: var(--paper2); border-bottom: 1px solid var(--line); }
.brand { font-family: 'Noto Serif KR', serif; font-size: calc(22px * var(--fs)); font-weight: 700; color: var(--btn); letter-spacing: 1px; text-decoration: none; white-space: nowrap; }
.topright { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: flex-end; }
.navlink { color: var(--ink); font-size: calc(18px * var(--fs)); font-weight: 700; text-decoration: none; white-space: nowrap; }
.navlink:hover { color: var(--accent); }


/* 맨 아래(푸터) */
.footer { padding: 40px 48px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.footbrand { font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: calc(20px * var(--fs)); color: var(--btn); }
.footlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.footlinks a { color: var(--ink); font-weight: 700; font-size: calc(17px * var(--fs)); min-height: 44px; display: inline-flex; align-items: center; }
.footnote { font-size: calc(17px * var(--fs)); color: var(--sub); line-height: 1.6; max-width: 720px; }
.bizinfo { font-size: calc(16px * var(--fs)); color: var(--sub); line-height: 1.7; }
/* 2026-10-28: 사업자 정보를 채우니 주소가 휴대폰 한 줄보다 길어 양옆이 잘림 → 칸 안에서 낱말 단위로 줄바꿈 */
.bizinfo span { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.footdomain { font-size: calc(16px * var(--fs)); color: var(--sub); }

/* 안쪽 페이지(스토어·약관 등) */
.page { max-width: 880px; margin: 0 auto; padding: 36px 24px 60px; }
.page h1 { font-family: 'Noto Serif KR', serif; font-size: calc(30px * var(--fs)); margin: 0 0 10px; line-height: 1.4; }
.page h2 { font-family: 'Noto Serif KR', serif; font-size: calc(23px * var(--fs)); margin: 36px 0 10px; line-height: 1.4; }
.page h3 { font-size: calc(20px * var(--fs)); margin: 22px 0 6px; }
.page p, .page li { font-size: calc(18px * var(--fs)); }
.page table { width: 100%; border-collapse: collapse; font-size: calc(17px * var(--fs)); background: var(--card); }
.page th, .page td { border: 1px solid var(--line); padding: 10px; text-align: left; vertical-align: top; }
.page th { background: var(--paper2); }
.draftnote { padding: 14px 16px; border: 2px solid var(--accent); border-radius: 8px; background: var(--card); color: var(--ink); font-weight: 700; }
.backbtn { display: flex; align-items: center; justify-content: center; margin-top: 36px; min-height: 56px; border-radius: 8px; border: 2px solid var(--ink); color: var(--ink); font-weight: 700; font-size: calc(20px * var(--fs)); text-decoration: none; background: transparent; }

@media (max-width: 768px) {
  .topbar { padding: 10px 16px; }
  .brand { font-size: calc(21px * var(--fs)); letter-spacing: 0; }
  .topright { gap: 12px; }
  .navlink { font-size: calc(17px * var(--fs)); }
  .footer { padding: 28px 16px 40px; }
  .page { padding: 24px 16px 48px; }
  .page h1 { font-size: calc(26px * var(--fs)); }
  /* 표는 휴대폰에서 한 줄씩 위아래로 쌓기(옆으로 밀리지 않게) */
  .page table, .page tbody, .page tr, .page td { display: block; width: 100%; }
  .page tr.thead { display: none; }
  .page tr { margin-bottom: 12px; border: 1px solid var(--line); }
  .page td { border: none; border-bottom: 1px solid var(--line); }
  .page td:last-child { border-bottom: none; }
  .page td[data-label]::before { content: attr(data-label); display: block; font-weight: 700; color: var(--accent); }
}

/* ===== 풀이 결과(코너 창·결과 주소 페이지 공통) ===== */
/* 풀이 종이: 맑은 상아 + 금 이중 테두리(2026-10-16 사장님 "나" 안 — 예전 누런 한지·갈색 그림자·줄무늬는 빛바래 보여 뺌, 계산표 카드와 한 벌) */
.nw-paper { position: relative; width: 100%; padding: 26px 20px 18px; border-radius: 4px; text-align: left; color: var(--ink);
  background: #fbf7ef; border: 4px double #a8874f; outline: 1px solid #c8b58f; outline-offset: 3px; margin: 4px 0;
  box-shadow: 0 6px 18px rgba(74,53,32,.10); }
.nw-paper .nw-title { margin: 0 0 16px; text-align: center; font-weight: 400; font-size: calc(34px * var(--fs)); line-height: 1.35; color: var(--ink); word-break: keep-all; }
.nw-body { white-space: pre-wrap; font-size: calc(20px * var(--fs)); line-height: 1.85; font-weight: 500; }
.nw-body .nw-sec { font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 1.08em; color: var(--navy); }
/* 소제목 붉은 인장 번호(2026-10-15 (나) 안) */
.nw-secseal { display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.45em; margin-right: .45em; vertical-align: -.2em;
  font: 700 .78em 'Noto Serif KR', serif; color: #fbf3e2; background: #a83a2c; border-radius: 3px; box-shadow: inset 0 0 0 2px #a83a2c, inset 0 0 0 3px #f1e2bf; }
/* 연출: 제목이 금빛 테두리로 새겨짐 → 먹빛으로 가라앉는 순간 본문이 한꺼번에 */
.nw-anim .nw-ink { display: inline-block; clip-path: inset(0 100% 0 0); color: transparent; -webkit-text-stroke: 1.2px #b8892e; text-shadow: 0 0 10px rgba(214,170,70,.55); }
.nw-anim .nw-body, .nw-anim .nw-tables, .nw-anim ~ .nw-actions, .nw-anim ~ .nw-closewrap { opacity: 0; }
.nw-anim.go .nw-ink { animation: nwCarve var(--carve, 2.4s) ease-out forwards, nwSettle .9s ease-in var(--carve, 2.4s) forwards; }
.nw-anim.go .nw-body, .nw-anim.go .nw-tables, .nw-anim.go ~ .nw-actions, .nw-anim.go ~ .nw-closewrap { animation: nwShow .35s ease-out calc(var(--carve, 2.4s) + .6s) forwards; }
@keyframes nwCarve { to { clip-path: inset(0 0 0 0); } }
@keyframes nwSettle { from { color: rgba(42,34,24,0); } to { color: #2a2218; -webkit-text-stroke-color: rgba(184,137,46,0); text-shadow: 0 0 0 rgba(0,0,0,0); } }
@keyframes nwShow { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nw-anim .nw-ink, .nw-anim .nw-body, .nw-anim .nw-tables, .nw-anim ~ .nw-actions, .nw-anim ~ .nw-closewrap { animation: none !important; clip-path: none; opacity: 1; color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; } }
/* 늦어짐 안내·결과 주소 */
.nw-pending { width: 100%; padding: 18px; border: 2px solid var(--lineStrong); border-radius: 8px; background: var(--field); }
/* 결제가 취소된 주문 안내(결과 화면·코너 창, 2026-11-03 작업 17) */
.nw-refundnote { margin: 0 0 16px; padding: 18px; border: 2px solid var(--lineStrong); border-radius: 8px; background: var(--field); font-size: calc(19px * var(--fs)); font-weight: 700; line-height: 1.7; }
.nw-pendingmsg { margin: 0; font-size: calc(20px * var(--fs)); font-weight: 700; line-height: 1.7; text-align: left; }
.nw-pendingsub { margin: 10px 0 0; font-size: calc(18px * var(--fs)); color: var(--sub); font-weight: 700; line-height: 1.6; text-align: left; }
/* 풀이 아래 버튼: [확인] [내 카톡으로 보내기] — 엄지가 닿게 아래에 붙어 있음 */
/* 풀이 아래 버튼: 글을 가리지 않게 맨 끝에만(2026-10-04 사장님 지시, 예전엔 화면 아래에 붙어 따라다님) */
.nw-actions { display: flex; gap: 10px; width: 100%; margin-top: 18px; padding: 12px 0 calc(4px + env(safe-area-inset-bottom)); }
.nw-actions button { min-height: 64px; border-radius: 10px; font-size: calc(21px * var(--fs)); font-weight: 700; cursor: pointer; }
.nw-okbtn { flex: 1; border: 2px solid var(--ink); background: var(--card); color: var(--ink); }
.nw-kakaobtn { flex: 1.8; border: none; background: #fee500; color: #191600; box-shadow: 0 4px 14px rgba(42,34,24,0.25); }
.nw-kakaobtn:disabled { opacity: .6; }
/* 결과 주소 페이지 아래: 다시 오시라는 말 + 사이트로 가기 */
.nw-comeback { margin-top: 22px; text-align: center; }
.nw-comeback p { margin: 0 0 12px; font-size: calc(19px * var(--fs)); font-weight: 700; color: var(--sub); }
.nw-bigbtn { display: flex; align-items: center; justify-content: center; min-height: 64px; border-radius: 10px; background: var(--btn); color: var(--btnText); font-size: calc(22px * var(--fs)); font-weight: 700; text-decoration: none; box-shadow: 0 4px 14px rgba(42,34,24,0.25); }
.nw-comeback button.nw-bigbtn { width: 100%; border: 0; cursor: pointer; font-family: inherit; }   /* 결과 페이지 [확인](2026-10-14) */
.nw-toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 200; transform: translate(-50%, 12px); padding: 12px 20px; border-radius: 999px; background: var(--btn); color: var(--btnText); font-weight: 700; font-size: calc(18px * var(--fs)); opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.nw-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* 결과 주소 페이지: 컴퓨터 양옆 바탕을 옅은 남회색으로(종이가 떠 보이게, 2026-10-15 (나) 안). 휴대폰은 그대로 */
@media (min-width: 769px) {
  body.rpage { background: linear-gradient(180deg, #d5d9e4 0%, #e1e2e4 100%) fixed; }
  body.rpage .rlabel { color: var(--navy); }
  body.rpage .nw-paper { box-shadow: 0 8px 28px rgba(28,42,90,.18); }
}
@media (max-width: 768px) { .nw-paper { padding: 22px 14px 14px; } .nw-paper .nw-title { font-size: calc(30px * var(--fs)); } }

/* 캐릭터 공연 무대(assets/perform.js): 기본 그림 위에 ②·③ 영상을 겹쳐 두고 차례로 앞으로 */
.nwp-stage { position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 72vh; overflow: hidden; border-radius: 6px; background: var(--hero) center top / cover no-repeat; }
.nwp-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; }
.nwp-v.on { opacity: 1; }
/* 영상 안 기다림 글(2026-11-07): 상자 없이 아래쪽에 은은하게 */
.nwp-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 76px 18px 20px; text-align: center; background: linear-gradient(to top, rgba(8,12,34,.66), rgba(8,12,34,0)); transform: translateZ(0); pointer-events: none; }
.nwp-cap span { display: inline-block; color: #f6ecd0; font-size: calc(19px * var(--fs)); font-weight: 500; line-height: 1.5; word-break: keep-all; text-shadow: 0 1px 6px rgba(0,0,0,.8); transition: opacity .6s ease; }
.nwp-cap span.off { opacity: 0; }
/* ③이 끝난 그 자리에서 금빛 제목(2026-11-07 사장님). 끝 장면의 흰빛 위로 종이색이 번지고 제목이 왼쪽부터 새겨짐 */
.nwp-title { position: absolute; inset: 0; z-index: 3; transform: translateZ(0); will-change: opacity; display: flex; align-items: center; justify-content: center; padding: 0 22px; text-align: center; background: #fbf7ef; opacity: 0; }
.nwp-title.go { animation: nwShow .6s ease-out forwards; }
.nwp-title span { display: inline-block; font-size: calc(38px * var(--fs)); line-height: 1.4; word-break: keep-all; text-wrap: balance; color: #b8892e; text-shadow: 0 0 14px rgba(214,170,70,.6); clip-path: inset(0 100% 0 0); }
.nwp-title.go span { animation: nwCarve 1.7s ease-out .35s forwards; }
/* 무대에서 이미 새겨진 제목: 결과 종이에서는 금빛으로 시작해 먹빛으로 가라앉음 */
.nw-anim.nw-carved { animation: nwShow2 .5s ease-out; }
.nw-anim.nw-carved .nw-ink { clip-path: none; color: #b8892e; -webkit-text-stroke: 0; text-shadow: 0 0 14px rgba(214,170,70,.6); }
.nw-anim.nw-carved.go .nw-ink { animation: nwSettleGold 1s ease-in var(--carve, .7s) forwards; }
@keyframes nwSettleGold { to { color: #2a2218; text-shadow: 0 0 0 rgba(0,0,0,0); } }
@keyframes nwShow2 { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nwp-title, .nwp-title span { animation: none !important; opacity: 1; clip-path: none; } }

/* 풀이 속 강조 상자(▣ 줄, 2026-10-06 캐릭터 말투 변경): 한지 위 금빛 테두리, 노안 기준 큰 글씨 */
.nw-box { margin: 14px 0 6px; padding: 14px 16px 16px; border: 2px solid #b8913f; border-radius: 10px; background: #fbf3dc; box-shadow: inset 0 0 0 3px #fbf3dc, inset 0 0 0 4px #d9bf7f; white-space: normal; }
.nw-boxname { display: inline-block; max-width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 2px 12px; border-radius: 999px; background: var(--navy); color: #f1dca6; font-family: 'Noto Serif KR', serif; font-size: calc(17px * var(--fs)); font-weight: 700; }
.nw-boxname::before { content: '「'; }
.nw-boxname::after { content: '」'; }
.nw-boxtext { white-space: pre-wrap; font-size: calc(20px * var(--fs)); font-weight: 700; line-height: 1.75; color: var(--ink); }

/* ===== 위쪽 "개운 스토어" 반짝임(2026-10-07 [B]): 몇 초에 한 번 금빛이 글자 위를 스르륵 한 번(깜빡임·번쩍임 없음) ===== */
.nw-shine { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; padding: 2px 0; }
.nw-shine::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(214,170,70,var(--shine-alpha, .45)) 50%, transparent 100%);
  transform: translateX(-130%); animation: nwShine var(--shine-every, 7s) ease-in-out infinite; mix-blend-mode: multiply; }
@keyframes nwShine { 0% { transform: translateX(-130%); } 22% { transform: translateX(230%); } 100% { transform: translateX(230%); } }
@media (prefers-reduced-motion: reduce) { .nw-shine::after { animation: none; display: none; } }

/* ===== 위쪽 안내 문구 줄(2026-10-07 [C]) — 메뉴 바로 아래 가느다란 한 줄, 차분한 색(광고 띠처럼 보이지 않게) ===== */
.nw-ticker { position: relative; z-index: 9; overflow: hidden; white-space: nowrap; background: var(--hero); border-bottom: 1px solid var(--line);
  color: var(--sub); font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: calc(17px * var(--fs)); line-height: 1.5; padding: 6px 56px; }
.nw-ticker { text-align: center; }
.nw-ticker.long { text-align: left; }
.nw-tickerline { display: inline-block; vertical-align: bottom; }
.nw-tickertext { display: inline-block; }
/* 나타날 때: 아래에서 살짝 올라오며 흐림 → 또렷 */
.nw-tickerline.in { animation: nwTkIn var(--tk-in, .6s) ease-out both; }
@keyframes nwTkIn { from { opacity: 0; transform: translateY(var(--tk-rise, 6px)); filter: blur(1.5px); } to { opacity: 1; transform: none; filter: none; } }
/* 사라질 때: 글자 윗부분부터 아래로 싹 지워짐(경계는 살짝 번지게) */
.nw-tickerline.wipe { -webkit-mask-image: linear-gradient(to bottom, transparent 44%, #000 56%); mask-image: linear-gradient(to bottom, transparent 44%, #000 56%);
  -webkit-mask-size: 100% 260%; mask-size: 100% 260%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: nwTkWipe var(--tk-out, .6s) linear forwards; }
/* 지우는 경계가 글자 윗부분에서 시작해 아랫부분에서 끝나게(위아래 빈 자리에서 시간을 쓰지 않게) */
@keyframes nwTkWipe { from { -webkit-mask-position: 0 78%; mask-position: 0 78%; } to { -webkit-mask-position: 0 12%; mask-position: 0 12%; } }
/* 휴대폰에서 긴 문구: 끝까지 천천히 밀어 보여 줌 */
.nw-tickertext.slide { animation: nwSlideLong linear forwards; }
@keyframes nwSlideLong { from { transform: translateX(0); } to { transform: translateX(var(--over, 0)); } }
/* 움직임 줄이기 설정이어도 지워짐·밀기는 그대로(글을 다 읽게 하는 동작이라). 나타날 때 올라오는 움직임만 끔 */
@media (prefers-reduced-motion: reduce) { .nw-tickerline.in { animation: none; } }
@media (max-width: 768px) { .nw-ticker { padding: 4px 16px; font-size: calc(16px * var(--fs)); } }

/* ===== 손님 후기 목록(2026-10-07 [A]) — 메인 화면 맨 아래, 사업자 정보 바로 위 한 곳 ===== */
.nw-reviews { padding: 32px 48px 8px; border-top: 1px solid var(--line); }
.nw-reviews[hidden] { display: none; }
.nw-revhead { margin: 0 0 16px; font-family: 'Noto Serif KR', serif; font-size: calc(22px * var(--fs)); font-weight: 700; color: var(--ink); }
.nw-revhead .nw-revavg { color: #a07418; margin-left: 6px; }
.nw-revhead .nw-revcount { color: var(--sub); font-family: 'Noto Sans KR', sans-serif; font-size: calc(18px * var(--fs)); }
.nw-revgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nw-rev { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); min-width: 0; }
.nw-revtop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.nw-revstars { color: #a07418; font-size: calc(19px * var(--fs)); letter-spacing: 1px; }
.nw-revwho { color: var(--sub); font-size: calc(16px * var(--fs)); font-weight: 700; }
.nw-revtext { margin: 8px 0 0; font-size: calc(18px * var(--fs)); line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.nw-revtext.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-revmore, .nw-revmoreall { background: none; border: none; padding: 6px 0; color: var(--accent); font: inherit; font-weight: 700; font-size: calc(17px * var(--fs)); cursor: pointer; text-decoration: underline; }
.nw-revmoreall { display: block; margin: 16px auto 0; min-height: 52px; padding: 0 28px; border: 2px solid var(--ink); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--card); font-size: calc(19px * var(--fs)); }
@media (max-width: 1100px) { .nw-revgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .nw-reviews { padding: 24px 16px 4px; } .nw-revgrid { grid-template-columns: 1fr; gap: 10px; } }

/* ===== 후기 쓰기(유료 결과 맨 아래) ===== */
.nw-reviewslot { width: 100%; margin-top: 18px; text-align: left; }
/* 풀이 아래 버튼(2026-10-14 사장님): [후기 남기기]·[내 카톡으로 보내기] 한 줄 + 맨 아래 [닫기]. 휴대폰은 위아래로 */
.nw-actions2 { flex-wrap: wrap; align-items: stretch; }
.nw-actions2 .nw-reviewslot { flex: 1 1 0; width: auto; margin-top: 0; min-width: 0; }
.nw-actions2 .nw-reviewslot:empty { display: none; }
.nw-actions2 .nw-reviewslot.nw-revwide { flex-basis: 100%; order: 2; }
.nw-actions2 .nw-revopen { height: 100%; min-height: 64px; font-size: calc(21px * var(--fs)); }
.nw-actions2 .nw-kakaobtn { flex: 1 1 0; }
.nw-closewrap { width: 100%; margin-top: 14px; text-align: center; }
.nw-closewrap p { margin: 0 0 12px; font-size: calc(19px * var(--fs)); font-weight: 700; color: var(--sub); }
.nw-closewrap .nw-closebtn { width: 100%; min-height: 60px; border-radius: 10px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: calc(20px * var(--fs)); cursor: pointer; }
@media (max-width: 768px) { .nw-actions2 { flex-direction: column; } .nw-actions2 .nw-reviewslot, .nw-actions2 .nw-kakaobtn { flex: none; width: 100%; } .nw-actions2 .nw-reviewslot.nw-revwide { order: 0; } }
.nw-revopen { width: 100%; min-height: 60px; border-radius: 10px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: calc(20px * var(--fs)); cursor: pointer; }
.nw-revform { padding: 18px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); display: flex; flex-direction: column; gap: 14px; }
.nw-revform h4 { margin: 0; font-family: 'Noto Serif KR', serif; font-size: calc(21px * var(--fs)); }
.nw-revlabel { font-weight: 700; color: var(--sub); font-size: calc(18px * var(--fs)); }
.nw-starpick { display: flex; gap: 6px; }
.nw-starpick button { width: 56px; height: 56px; border: none; background: none; padding: 0; font-size: calc(36px * var(--fs)); line-height: 1; color: #cbb68a; cursor: pointer; }
.nw-starpick button.on { color: #a07418; }
.nw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-chips button { min-height: 48px; min-width: 72px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--lineStrong); background: var(--field); color: var(--ink); font: inherit; font-weight: 700; font-size: calc(18px * var(--fs)); cursor: pointer; }
.nw-chips button.on { background: var(--btn); border-color: var(--btn); color: var(--btnText); }
.nw-revform textarea { width: 100%; box-sizing: border-box; min-height: 150px; padding: 12px; border: 2px solid var(--lineStrong); border-radius: 8px; background: var(--field); color: var(--ink); font: inherit; font-size: calc(18px * var(--fs)); line-height: 1.6; resize: vertical; scroll-margin-bottom: 40vh; }
.nw-revhint { color: var(--sub); font-size: calc(17px * var(--fs)); line-height: 1.6; margin-top: -8px; }
.nw-revform textarea::placeholder { color: var(--sub); opacity: .6; }
.nw-revcount2 { align-self: flex-end; color: var(--sub); font-size: calc(16px * var(--fs)); margin-top: -8px; }
.nw-revsend { min-height: 60px; border-radius: 10px; border: none; background: var(--btn); color: var(--btnText); font: inherit; font-weight: 700; font-size: calc(20px * var(--fs)); cursor: pointer; }
.nw-revsend:disabled { opacity: .6; }
.nw-revmsg { margin: 0; font-weight: 700; color: var(--accent); font-size: calc(18px * var(--fs)); }
.nw-revthanks { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-weight: 700; font-size: calc(19px * var(--fs)); text-align: center; }
.nw-revmore[hidden], .nw-revmoreall[hidden] { display: none; }

/* ===== 맨 위 줄 밤하늘 (2026-10-13 작업 11-①, 같은 날 "한 칸 하나로" 다시 만듦) — 맨 아래에 두어 위의 .topbar·.nw-ticker 설정을 덮음 =====
   - 밤하늘(남색 하늘·별·별똥별·초승달)은 .topbar 한 요소에 한 번만 그림. 제목·문구는 그 칸 안에 올라가는 글자일 뿐(칸 사이 경계 없음)
   - 첫 화면(문구 줄이 있으면 .nw-big): 휴대폰 = 위 줄 제목·아래 줄 문구, 컴퓨터 = 왼쪽 제목·오른쪽 문구. 둘 다 위아래 가운데
   - 화면을 내리면 같은 칸이 얇아져 제목만 남은 줄로 위에 붙음: 칸 높이는 그대로 두고 sticky top 을 음수로 해서
     위쪽이 화면 밖으로 밀려 나가게 함(아래 글이 덜컹거리지 않음). 제목·달은 그만큼 내려와 얇은 줄 가운데에, 문구는 흐려져 사라짐
     — 움직임 값(--dy·--mdy·--tko·--sh)은 common.js 맨 아래가 스크롤에 맞춰 넣음
   - 문구 줄이 없는 페이지(문의·스토어·약관·방침·결과)는 처음부터 얇은 줄
   - 별·별똥별·문구는 동작 줄이기 설정과 상관없이 늘 움직임(2026-10-13 사장님, 갤럭시 "애니메이션 제거")
   - 남색·금색은 나중에 사이트 전체 색을 정할 때 후보로 참고 */
:root { --sky-top: #0b1230; --sky-bottom: #1c2a5a; --sky-title: #f0bf4c; --sky-line: #f1dca6; --sky-gold: #e8c77a;
  --bar-thin: 64px; --bar-full: 128px; }
.topbar {
  position: sticky; top: 0; z-index: 10; overflow: hidden; flex-wrap: nowrap;
  height: var(--bar-thin); padding: 0 64px 0 56px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M17 3a10 10 0 1 0 6 17 8.5 8.5 0 1 1-6-17z' fill='%23e8c77a' fill-opacity='.92'/%3E%3C/svg%3E") no-repeat right 14px top calc(10px + var(--mdy, 0px)) / 32px 32px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='68' viewBox='0 0 220 68'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='12' cy='14' r='.7' fill-opacity='.55'/%3E%3Ccircle cx='38' cy='46' r='.6' fill-opacity='.45'/%3E%3Ccircle cx='61' cy='9' r='.8' fill-opacity='.6'/%3E%3Ccircle cx='84' cy='33' r='.5' fill-opacity='.4'/%3E%3Ccircle cx='109' cy='55' r='.7' fill-opacity='.5'/%3E%3Ccircle cx='131' cy='20' r='.6' fill-opacity='.5'/%3E%3Ccircle cx='158' cy='42' r='.8' fill-opacity='.55'/%3E%3Ccircle cx='183' cy='11' r='.5' fill-opacity='.45'/%3E%3Ccircle cx='204' cy='31' r='.7' fill-opacity='.5'/%3E%3Ccircle cx='27' cy='60' r='.5' fill-opacity='.35'/%3E%3C/g%3E%3Cg fill='%23e8c77a'%3E%3Ccircle cx='97' cy='12' r='.8' fill-opacity='.6'/%3E%3Ccircle cx='171' cy='58' r='.7' fill-opacity='.5'/%3E%3Ccircle cx='50' cy='27' r='.6' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E") repeat left top / 220px 68px,
    linear-gradient(180deg, var(--sky-top) 0%, #121c42 55%, var(--sky-bottom) 100%);
  border-bottom: 1px solid rgba(232, 199, 122, 0.35);
  /* 그림자는 얇아져 위에 붙어 있을 때만 */
  box-shadow: 0 9px 10px -7px rgba(28, 42, 90, calc(0.45 * var(--sh, 0)));
  transition: box-shadow .25s;
}
.topbar .brand, .topbar .topright, .topbar .nw-ticker { position: relative; z-index: 1; transform: translateY(var(--dy, 0px)); }
/* 컴퓨터에서 문구 줄(칸 전체 폭)이 오른쪽 메뉴를 덮어 "개운 스토어"가 안 눌리던 것 → 메뉴를 한 겹 위로 (2026-10-29) */
.topbar .topright { z-index: 2; }
/* 제목: 누가 봐도 금색, 글씨가 뭉개지지 않게 아주 은은한 빛 번짐 */
.topbar .brand { color: var(--sky-title); line-height: 1.5; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55), 0 0 8px rgba(240, 191, 76, 0.35); }
.topbar .navlink { color: var(--sky-line); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.topbar .navlink:hover { color: #ffe3a1; }

/* 첫 화면: 큰 한 칸(제목 + 문구), 내리면 위쪽이 화면 밖으로 → 아래 얇은 줄만 붙어 있음 */
.topbar.nw-big { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand tk nav"; align-items: center; column-gap: 44px;
  height: var(--bar-full); top: calc(var(--bar-thin) - var(--bar-full)); }
.topbar.nw-big .brand { grid-area: brand; font-size: calc(28px * var(--fs)); }
.topbar.nw-big .topright { grid-area: nav; }
/* 컴퓨터: 문구는 밤하늘 칸 가운데(2026-10-13 사장님). 칸 전체 폭에 두고 양옆을 제목·메뉴 자리만큼 비움 */
@media (min-width: 769px) {
  .topbar.nw-big .nw-ticker { grid-column: 1 / -1; grid-row: 1; padding: 0 210px; text-align: center; }
  .topbar.nw-big .nw-ticker.long { text-align: left; }
}
/* 문구: 칸 안의 글자일 뿐(따로 바탕·선 없음) */
.topbar .nw-ticker { grid-area: tk; min-width: 0; padding: 0; background: none; border: none; text-align: left;
  color: var(--sky-line); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); font-size: calc(19px * var(--fs)); line-height: 1.5;
  opacity: var(--tko, 1); }

.nw-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.nw-star { --k: 1; position: absolute; width: calc(var(--s, 2) * var(--k) * 1px); height: calc(var(--s, 2) * var(--k) * 1px);
  border-radius: 50%; background: #fff7e2; opacity: 0.35;
  box-shadow: 0 0 4px 1px rgba(255, 236, 190, 0.55); animation: nwTwinkle var(--d, 4s) ease-in-out var(--w, 0s) infinite; }
.nw-star.gold { background: #f1cf82; box-shadow: 0 0 5px 1px rgba(232, 199, 122, 0.6); }
@keyframes nwTwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1.2); } }

/* 별똥별: 18초에 한 번, 칸 왼쪽 위에서 오른쪽 아래로 칸 전체를 가로질러(기울기 --sa 는 칸 모양에 맞춰 common.js 가 넣음) */
.nw-shoot { position: absolute; left: -8%; top: 8%; width: 80px; height: 1.5px; border-radius: 1px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 244, 214, 0), rgba(255, 244, 214, 0.9));
  transform: rotate(var(--sa, 6deg)); transform-origin: right center; animation: nwShoot 18s linear 4s infinite; }
@keyframes nwShoot {
  0% { opacity: 0; left: -8%; top: 8%; }
  1% { opacity: 0.9; }
  7% { opacity: 0.8; }
  8.5% { opacity: 0; left: 104%; top: 78%; }
  100% { opacity: 0; left: 104%; top: 78%; }
}

@media (max-width: 768px) {
  :root { --bar-thin: 56px; --bar-full: 112px; }
  .topbar { padding: 0 46px 0 16px; background-position: right 10px top calc(8px + var(--mdy, 0px)), left top, 0 0; background-size: 24px 24px, 220px 68px, auto; }
  /* 휴대폰: 위 줄 제목(+메뉴), 아래 줄 문구가 한 줄 폭을 다 씀. 두 줄 묶음이 칸 위아래 가운데 */
  .topbar.nw-big { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand nav" "tk tk"; align-content: center; row-gap: 4px; column-gap: 12px; }
  .topbar.nw-big .brand { font-size: calc(23px * var(--fs)); }
  .topbar .nw-ticker { font-size: calc(17px * var(--fs)); text-align: center; }
  .topbar .nw-ticker.long { text-align: left; }
  /* 휴대폰: 반짝이는 별 14개, 더 크고 밝게, 밝을 때·어두울 때 차이 크게 */
  .nw-star { --k: 1.7; box-shadow: 0 0 6px 2px rgba(255, 236, 190, 0.7); animation-name: nwTwinkleM; }
  .nw-star.gold { box-shadow: 0 0 7px 2px rgba(240, 200, 110, 0.75); }
  .nw-star:nth-child(n+15) { display: none; }
  .nw-shoot { width: 64px; height: 2px; background: linear-gradient(90deg, rgba(255, 244, 214, 0), rgba(255, 248, 225, 1)); }
}
@keyframes nwTwinkleM { 0%, 100% { opacity: 0.12; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.4); } }

/* ===== 눌린 표시 (2026-10-29 사장님: "눌렀으면 눌린 표시가 나도록") — 모든 페이지 공통 =====
   누르는 순간 조금 어두워지고 안쪽으로 들어간 그림자. 모양·자리(transform)는 건드리지 않음(밤하늘 칸 움직임과 안 부딪히게) */
button, a, [role="button"], label.checkline { -webkit-tap-highlight-color: rgba(168, 135, 79, 0.28); }
button, a.gobtn, a.backbtn, a.navlink { transition: filter .06s, box-shadow .06s; }
button:not(:disabled):active,
a.gobtn:active, a.backbtn:active, a.navlink:active, .footer a:active,
[role="button"]:active {
  filter: brightness(0.82);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.28) !important;
}