/* 저택 현관(2026-09-25) — 첫 화면이 곧 저택 안 로비판과 같은 메뉴다. Unity 를 받지 않는다. */
@font-face { font-family: 'MaruBuri'; src: url('/welcome/assets/MaruBuri-Regular.otf') format('opentype'); font-display: swap; }
:root { --ink: #f4ead3; --muted: #aeb4c4; --gold: #e3c07c; --bg: #05070f; --panel: #11182a; --line: #2a3350; }
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; min-height: 100dvh; color: var(--ink); background: radial-gradient(120% 60% at 50% 0%, #141d3a 0%, var(--bg) 60%) fixed;
  font: 16px/1.55 system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ja"] body { word-break: normal; line-break: strict; }
a { color: inherit; }

.foyer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid #1c2440; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: 'MaruBuri', serif; font-size: 18px; }
.brand img { border-radius: 10px; }
.brand small { display: block; font: 10px/1.2 system-ui, sans-serif; letter-spacing: .18em; color: var(--muted); }
.header-account { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid #4a557a; border-radius: 12px;
  text-decoration: none; font-size: 15px; color: var(--ink); background: #0d1322; }
/* data-member-hint = 로그인 쿠키가 있거나(home.mjs) 지난번 이 기기에서 회원이었다(foyer.js). 확인이 오기 전부터 회원 머리줄 모양으로 그려 단추가 밀리지 않게 한다.
   foyer.js 가 지난 모습을 그려 넣고 data-ready 를 세울 때까지는 방과 단추를 감춘다 — 손님 모양이 먼저 그려졌다가 바뀌지 않게. 스크립트가 끝내 안 오면 3초 뒤 그냥 보인다.
   손님(표시 없음)은 감추지 않는다 — 첫 그림이 곧 화면이다. */
body[data-member-hint]:not([data-ready]) .foyer, body[data-member-hint]:not([data-ready]) .header-actions { visibility: hidden; animation: foyer-reveal 0s linear 3s forwards; }
@keyframes foyer-reveal { to { visibility: visible; } }
body[data-member="true"] .header-account, body[data-member-hint] .header-account { background: var(--gold); color: #182030; border-color: var(--gold); font-weight: 700; }

.foyer { width: min(1180px, 100%); margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-left)) 32px; }
.foyer-heading h1 { margin: 0; font: 400 clamp(28px, 6.4vw, 44px)/1.2 'MaruBuri', serif; letter-spacing: -.01em; }
.foyer-heading p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

.member-enter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 0; min-height: 56px; padding: 0 20px;
  border-radius: 14px; background: var(--gold); color: #182030; font-weight: 700; font-size: 18px; text-decoration: none; }
.member-enter[hidden] { display: none; }

.rooms { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rooms { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .rooms { grid-template-columns: repeat(3, 1fr); } }
.room { --accent: #c9a86b; }
.room[data-room="saju"] { --accent: #99c9a6; } .room[data-room="lucian"] { --accent: #d4a86b; } .room[data-room="cat"] { --accent: #ebb373; }
.room[data-room="obang"] { --accent: #eb976e; } .room[data-room="dream"] { --accent: #b9a6e8; } .room[data-room="crystal"] { --accent: #91bdf5; } .room[data-room="books"] { --accent: #d9b382; }
.room[data-room="card"] { --accent: #9ec2f0; }
.room-card { position: relative; display: grid; grid-template-columns: minmax(112px, 40%) 1fr; gap: 14px; align-items: stretch; min-height: 150px;
  padding: 8px; border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); border-left: 4px solid var(--accent); border-radius: 14px;
  background: linear-gradient(135deg, #161f35, #0f1526); text-decoration: none; transition: transform .12s ease, border-color .12s ease; }
.room-card:hover { transform: translateY(-1px); border-color: var(--accent); }
.room-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.room-card img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; display: block; }
.room-text { display: flex; flex-direction: column; gap: 4px; padding: 8px 6px 8px 0; min-width: 0; }
.room-title { font: 400 clamp(24px, 6vw, 30px)/1.2 'MaruBuri', serif; }
.room-detail { color: #c9cedb; font-size: 15px; }
.room-free { align-self: flex-start; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent); font-size: 13px; font-weight: 700; }
.room-action { margin-top: auto; color: var(--gold); font: 400 18px/1.3 'MaruBuri', serif; }
.room.free .room-card { background: linear-gradient(135deg, #16283a, #0f1a26); }

#door { width: min(400px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px 22px 20px;
  border: 1px solid #b6975c; border-radius: 18px; color: #f0e6ce; background: #111a30; box-shadow: 0 18px 60px #0008; text-align: center; }
#door::backdrop { background: #020511c0; }
.door-room { margin: 0; color: var(--gold); font-size: 14px; letter-spacing: .02em; }
#saju-door { width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px 22px 20px;
  border: 1px solid #b6975c; border-radius: 18px; color: var(--ink); background: #111a30; box-shadow: 0 18px 60px #0008; }
#saju-door::backdrop { background: #020511c0; }
#saju-door h2 { margin: 8px 0 18px; font: 400 23px/1.4 'MaruBuri', serif; }
.saju-choice { display: grid; gap: 6px; margin: 10px 0; padding: 16px; border: 1px solid #5f6e84; border-radius: 12px; background: #1b2940; text-decoration: none; }
.saju-choice b { color: var(--gold); font-size: 17px; }
.saju-choice span { color: #ccd4df; font-size: 13px; line-height: 1.6; }
.saju-choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#door h2 { margin: 6px 0 8px; font: 400 clamp(20px, 5.4vw, 24px)/1.4 'MaruBuri', serif; }
#door-description { margin: 0 0 12px; color: #d7dbe4; }
/* 구슬 문의 생일 칸(2026-10-04) — 가입 없이 듣는 길. 현관 맨 위 생일 칸(.hook-*)과 같은 생김새를 쓴다. */
.door-birth { display: grid; gap: 8px; margin: 4px 0 14px; padding: 12px; border: 1px solid #e3c07c80; border-radius: 12px; background: #0b1326; text-align: left; }
.door-birth[hidden] { display: none; }
.door-birth > input { width: 100%; min-width: 0; min-height: 48px; padding: 0 12px; border: 1px solid #8b93ad; border-radius: 10px; background: #f7f0e1; color: #141a2a;
  font: 18px/1.2 system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; letter-spacing: .03em; }
.door-birth > input::placeholder { color: #8b8576; font-size: 16px; letter-spacing: 0; }
.door-birth .hook-note { margin: -3px 2px 0; }
.door-birth .hook-calendar span { min-width: 52px; min-height: 36px; }
.door-birth-stack { display: grid; gap: 5px; }
.door-birth-time { display: flex; gap: 6px; min-width: 0; }
.door-birth select { min-width: 0; min-height: 40px; padding: 0 8px; border: 1px solid #4a557a; border-radius: 8px; background: #0d1322; color: #f0e6ce;
  font: 15px/1.2 system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
.door-birth select:disabled { opacity: .45; }
#door-birth-hour { flex: 1 1 auto; }
#door-birth-minute { flex: 0 0 88px; }
#door-birth-go { min-height: 50px; margin-top: 2px; border: 0; border-radius: 12px; background: var(--gold); color: #182030; cursor: pointer;
  font: 700 16px/1.2 system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
/* 낮은 화면에서 현관 생일 칸의 빈 안내 줄을 접는 규칙(.hook-note:not([data-state]))이 이 판의 안내까지 접지 않게 한다. */
#door-birth-note, #door-birth-status { display: block; }
#door-birth-status { margin: 0; text-align: center; }
.door-perk { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #3a4560; border-radius: 12px; background: #0b1326; color: #cfd4df; font-size: 13px; line-height: 1.65; }
#door-kakao, #door-google, #door-naver, #door-line { margin: 0; }
#door-kakao, #door-naver, #door-line { margin-top: 8px; }
#door-kakao button, #door-google button, #door-naver button, #door-line button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; border: 0; border-radius: 12px;
  background: #fee500; color: #191600; font: 700 16px/1 system-ui, sans-serif; cursor: pointer; }
#door-kakao button:disabled, #door-google button:disabled, #door-naver button:disabled, #door-line button:disabled { opacity: .6; }
#door-naver button { background: #03c75a; color: #fff; }
/* LINE 로그인 버튼 기본색 #06C755 + 흰 LINE 마크(2026-09-28). 일본어 화면에서는 foyer.js 가 맨 위로 올린다 */
#door-line button { background: #06c755; color: #fff; }
#door-line.lead { margin-top: 0; }
#door-line.lead + #door-google { margin-top: 8px; }
.line-mark { flex: 0 0 20px; }
/* 검수 중 제공자(2026-09-28): 문 안에서 제 구역으로 — 선 + 딱지 + 아래 한 줄 */
#door-naver.reviewing, #door-google.reviewing, #door-line.reviewing { margin-top: 4px; }
.review-head { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; }
.review-head::before, .review-head::after { content: ""; flex: 1; height: 1px; background: #56637d; }
.review-badge { padding: 5px 12px; border-radius: 999px; background: #f2c94c; color: #1b2230; font: 800 12px/1.3 system-ui, sans-serif; letter-spacing: .06em; white-space: nowrap; }
.door-review { display: block; margin: 8px 2px 0; color: #c9cfdb; font-size: 13px; line-height: 1.5; text-align: center; }
#door-google button { border: 1px solid #dadce0; background: #fff; color: #1f1f1f; font-weight: 600; }
.google-mark { flex: 0 0 18px; }
/* 네이버 공식 심볼(흰 N, 브랜드 리소스 Logotype 의 N 폴리곤) — 2026-09-28 검수 준비. 상자·글자 흉내 없음 */
.naver-mark { width: 18px; height: 18px; flex: 0 0 18px; }
.kakao-mark { width: 18px; height: 16px; border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%; background: #191600; }
.door-email { display: inline-block; margin: 14px 0 4px; color: #d7dbe4; font-size: 14px; }
.door-close { display: block; width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid #758099; border-radius: 10px; background: transparent;
  color: #e0d6bf; font: inherit; cursor: pointer; }
#door :focus-visible { outline: 2px solid #f4da9f; outline-offset: 3px; }

.foyer-footer { width: min(1180px, 100%); margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-left)) max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid #1c2440; color: #8e95a8; font-size: 12px; }
.footer-links { margin: 0 0 8px; font-size: 13px; }
.business { font-style: normal; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.copyright { margin: 10px 0 0; letter-spacing: .12em; }
.no-script { text-align: center; padding: 16px; }
@media (prefers-reduced-motion: reduce) { .room-card { transition: none; } }
.room-free[hidden] { display: none; }
/* 루넬이 드는 방 표시(2026-10-13 사용자 「루넬이 소모되는 것만 따로 · 모든 손님에게」) — 사주·타로 카드 오른쪽 위 작은 띠. 값은 점사 한 번에 1루넬(정찰). */
.room-cost { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: #0d1322e6; border: 1px solid #b6975c99; color: #e8d9b5; font: 600 12px/1.2 system-ui, sans-serif; white-space: nowrap; pointer-events: none; }
/* 카드 그림 규칙(.room-card img — 절대 위치로 카드를 채움)이 띠의 아이콘에도 걸려서 여기서 되돌린다. */
.room-card .room-cost img { position: static !important; inset: auto !important; width: 14px !important; height: 14px !important; min-height: 0 !important; aspect-ratio: auto !important; object-fit: contain !important; border-radius: 0 !important; z-index: auto !important; }
body[data-layout="list"] .room-cost { display: none; }
#cat-card { width: min(380px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px 20px 18px;
  border: 1px solid #b6975c; border-radius: 18px; color: #f0e6ce; background: #111a30; box-shadow: 0 18px 60px #0008; text-align: center; }
#cat-card::backdrop { background: #020511c0; }
#cat-card-image { display: block; width: min(200px, 56vw); height: auto; aspect-ratio: 2 / 3; margin: 10px auto 12px; border-radius: 10px; box-shadow: 0 8px 30px #0009; }
#cat-card-image[hidden] { display: none; }
#cat-card h2 { margin: 0 0 8px; font: 400 22px/1.3 'MaruBuri', serif; letter-spacing: .02em; }
#cat-card-message { margin: 0 0 6px; color: #e6e1d2; line-height: 1.7; }
#cat-card :focus-visible { outline: 2px solid #f4da9f; outline-offset: 3px; }
/* 회원 머리줄(2026-09-25) — 저택 안 위쪽 줄에서 나온 것들 */
.header-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.invite-button { display: grid; gap: 1px; min-height: 44px; padding: 4px 12px; border: 1px solid #b6975c; border-radius: 12px; background: #111a30; color: var(--ink); font: inherit; cursor: pointer; text-align: center; }
.invite-button[hidden], .lunel-count[hidden], .foyer-menu[hidden] { display: none; }
.invite-title { font-size: 13px; font-weight: 700; }
.invite-pair { display: flex; gap: 10px; justify-content: center; color: #c9cedb; font-size: 11px; }
.lunel-count { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; border: 1px solid #4a557a; border-radius: 12px; background: #0d1322; color: #c9cedb; font-size: 14px; white-space: nowrap; text-decoration: none; }
.lunel-count:hover { border-color: #b6975c; }
.lunel-short { display: none; }
.menu-shop { display: inline-flex; align-items: center; gap: 8px; }
.lunel-count b { color: var(--ink); font-weight: 600; }
.foyer-menu { position: relative; }
.foyer-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid #4a557a; border-radius: 12px; background: #0d1322; cursor: pointer; font-size: 15px; }
.foyer-menu summary::-webkit-details-marker { display: none; }
.menu-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ff5f55; }
.menu-dot[hidden], .menu-note[hidden] { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: grid; min-width: 220px; padding: 6px; border: 1px solid #b6975c; border-radius: 14px; background: #111a30; box-shadow: 0 16px 40px #000a; }
.menu-panel a, .menu-panel button { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; text-decoration: none; text-align: left; cursor: pointer; }
.menu-panel a:hover, .menu-panel button:hover { background: #1b2542; }
.menu-note { padding: 1px 8px; border-radius: 999px; background: #ff5f5533; color: #ffb3ad; font-size: 12px; }
#foyer-notice { position: fixed; z-index: 30; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100% - 32px); margin: 0; padding: 12px 16px; border: 1px solid #b6975c; border-radius: 12px; background: #111a30; color: var(--ink); }
#foyer-notice:empty { display: none; }
@media (max-width: 520px) {
  .brand span { display: none; }
  .foyer-header { gap: 6px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .header-actions { gap: 6px; }
  .invite-button { padding: 3px 8px; }
  .menu-label { display: none; }
  .header-account { padding: 0 12px; font-size: 14px; }
  /* 휴대폰 머리: 회원은 초대·루넬·계정·메뉴가 한 줄이라 390×1.3 에서, 손님은 상호 168 + 「ルネルショップ」 칩 + ログイン 이 390 에서 넘친다.
     손님 칩은 아이콘 아래 짧은 글씨 「상점」(폭 44 — 아이콘만이면 상점인 줄 모른다는 2026-09-28 피드백), 회원 칩은 예전처럼 아이콘+수. */
  #lunel-label { display: none; }
  body:not([data-member="true"]):not([data-member-hint]) .lunel-count { flex-direction: column; justify-content: center; gap: 1px; padding: 0 5px; }
  body:not([data-member="true"]):not([data-member-hint]) .lunel-short { display: block; font: 10px/1.1 system-ui, sans-serif; color: var(--ink); }
  body[data-member="true"] .lunel-count, body[data-member-hint] .lunel-count { padding: 0; border: 0; background: none; }
  /* 회원 칩에도 「상점」 글씨(2026-10-13 사용자 「루넬 아이콘만으론 상점인 줄 모른다 · 대놓고 상점이라고」) — 아이콘·수를 윗줄, 「상점」을 아랫줄에. 폭은 그대로. */
  body[data-member="true"] .lunel-count, body[data-member-hint] .lunel-count { display: grid; grid-template-columns: auto auto; grid-template-areas: 'icon value' 'short short'; justify-items: center; align-items: center; column-gap: 3px; row-gap: 0; padding: 0 6px; border: 1px solid #4a557a; border-radius: 12px; background: #0d1322; }
  /* 「상점」 글씨는 손님·회원 모두 12px 굵게(대표 「너무 조그맣다」, 2026-10-13). */
  .lunel-short { font: 600 12px/1.1 system-ui, sans-serif !important; letter-spacing: 0.02em; }
  body[data-member="true"] .lunel-count img, body[data-member-hint] .lunel-count img { grid-area: icon; }
  body[data-member="true"] .lunel-count b, body[data-member-hint] .lunel-count b { grid-area: value; }
  body[data-member="true"] .lunel-short, body[data-member-hint] .lunel-short { grid-area: short; display: block; font: 10px/1.1 system-ui, sans-serif; color: var(--ink); }
}
.invite-pair span, .header-account, .menu-note, .menu-panel a, .menu-panel button { white-space: nowrap; }
.menu-panel { min-width: 240px; }
@media (max-width: 380px) {
  /* 일본어 「ショップ」 네 글자는 320px 회원 머리줄(초대·상점·アカウント·☰)을 두 줄로 밀어 세로가 넘친다 — 좁은 폰에서만 10px 로. 한국어 「상점」은 12px 그대로. */
  html[lang="ja"] .lunel-short { font-size: 10px !important; letter-spacing: 0; }
  html[lang="ja"] body[data-member="true"] .lunel-count, html[lang="ja"] body[data-member-hint] .lunel-count { padding: 0 1px; column-gap: 1px; border: 0; background: none; }
  .invite-pair { display: none; }
  .invite-button { min-height: 44px; padding: 0 10px; }
  .foyer-menu summary { padding: 0 10px; }
  .brand img { width: 34px; height: 34px; }
}
/* 오늘의 행운지수 · 회원 고양이 주제판(2026-09-25) */
.luck-box { margin: 10px 0 12px; padding: 12px 14px; border: 1px solid #b6975c66; border-radius: 12px; background: #0b1326; text-align: center; }
.luck-box[hidden] { display: none; }
.luck-label { margin: 0; color: var(--gold); font-size: 13px; letter-spacing: .04em; }
.luck-score { margin: 2px 0 4px; font: 400 18px/1.1 'MaruBuri', serif; }
.luck-score b { font-size: 44px; font-weight: 400; margin-right: 2px; color: #f7e3ad; }
.luck-box[data-band="high"] .luck-score b { color: #ffd76a; text-shadow: 0 0 18px #ffcf5a66; }
.luck-box[data-band="low"] .luck-score b { color: #b9c3d8; }
.luck-line { margin: 0 0 6px; color: #e6e1d2; font-size: 14px; line-height: 1.6; }
.luck-item { margin: 0; color: #aeb4c4; font-size: 13px; }
#cat-topics { width: min(400px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px 20px 18px;
  border: 1px solid #b6975c; border-radius: 18px; color: #f0e6ce; background: #111a30; box-shadow: 0 18px 60px #0008; text-align: center; }
#cat-topics::backdrop { background: #020511c0; }
#cat-topics h2 { margin: 6px 0 2px; font: 400 21px/1.3 'MaruBuri', serif; }
.cat-topics-hint { margin: 0 0 12px; color: #aeb4c4; font-size: 13px; }
.cat-topic-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-topic-list a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 8px; border: 1px solid #e0c387aa; border-radius: 12px;
  background: #1a2238; color: var(--ink); font: 400 17px/1.3 'MaruBuri', serif; text-decoration: none; }
.cat-topic-list a.done { opacity: .45; border-color: #758099; cursor: default; }
.cat-topic-list a.done::after { content: '✓'; font: 14px system-ui, sans-serif; margin-left: 2px; }

#cat-topics :focus-visible { outline: 2px solid #f4da9f; outline-offset: 3px; }
#invite-dialog { width: min(400px, calc(100% - 32px)); padding: 24px 22px 20px; border: 1px solid #b6975c; border-radius: 18px; color: #f0e6ce; background: #111a30; box-shadow: 0 18px 60px #0008; text-align: center; }
#invite-dialog::backdrop { background: #020511c0; }
#invite-dialog h2 { margin: 6px 0 8px; font: 700 clamp(20px, 5.2vw, 24px)/1.45 system-ui, sans-serif; }
#invite-dialog-description { margin: 0 0 14px; color: #d7dbe4; }
.invite-yes { display: block; width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: #e0c387; color: #182030; font: 700 16px/1 system-ui, sans-serif; cursor: pointer; }
.cat-topic-list a { gap: 6px; }
.cat-topic-list a img { width: 34px; height: 34px; flex: none; }
.luck-icon { display: block; width: 44px; height: 44px; margin: 0 auto 2px; }
.cat-topic-list a span { white-space: nowrap; }

/* 현관 배치 선택: 기본은 2안(그림으로). 화면의 남는 높이를 그림에 배분한다. */
body { display: flex; flex-direction: column; min-height: 100svh; }
.foyer-header { flex: none; position: relative; z-index: 3; }
.foyer { width: min(620px, 100%); height: calc(100svh - var(--header-h, 65px) - 44px - env(safe-area-inset-bottom));
  min-height: 440px; padding: 12px 18px 6px; display: flex; flex-direction: column; }
.foyer-heading { flex: none; margin-bottom: 12px; }
.foyer-heading h1 { font-size: clamp(20px, 4.9vw, 28px); line-height: 1.35; }
.foyer-heading p { display: none; }
/* 가입 없이 내 자리 보기(2026-09-26) — 손님에게만, 제목 줄 자리에 선다. 회원(과 지난번에 회원이던 브라우저)은 제목 줄 그대로.
   방 칸은 남는 높이를 나눠 가지므로 이 칸이 커질수록 그림이 작아진다 — 줄 수를 늘리지 말 것. */
.foyer-hook { flex: none; margin: 0 0 10px; padding: 9px 12px 7px; border: 1px solid #e3c07c80; border-radius: 14px;
  background: linear-gradient(160deg, #1f2948 0%, #121a2f 100%); }
body[data-member="true"] .foyer-hook, body[data-member-hint] .foyer-hook { display: none; }
body:not([data-member="true"]):not([data-member-hint]) .foyer-heading { display: none; }
.hook-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hook-label { margin: 0; color: #c3c9d7; font-size: 13px; font-weight: 700; }
.hook-calendar { display: flex; gap: 0; margin: 0; padding: 0; border: 1px solid #4a557a; border-radius: 8px; overflow: hidden; }
.hook-calendar label { position: relative; display: flex; }
.hook-calendar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hook-calendar span { min-width: 46px; min-height: 30px; display: flex; align-items: center; justify-content: center; padding: 0 8px;
  color: #c7cddb; font-size: 13px; cursor: pointer; }
.hook-calendar input:checked + span { background: #e3c07c; color: #182030; font-weight: 700; }
.hook-calendar input:focus-visible + span { outline: 2px solid #fff1c4; outline-offset: -2px; }
.hook-title { margin: 5px 0 8px; font: 400 clamp(18px, 4.8vw, 22px)/1.35 'MaruBuri', serif; color: var(--ink); letter-spacing: -.01em; }
.hook-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.hook-form input, .hook-form button { min-height: 48px; border-radius: 10px; font: 16px/1.2 system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
.hook-form input { width: 100%; min-width: 0; padding: 0 12px; border: 1px solid #8b93ad; background: #f7f0e1; color: #141a2a; font-size: 18px; letter-spacing: .03em; }
.hook-form input::placeholder { color: #8b8576; font-size: 16px; letter-spacing: 0; }
.hook-form button { padding: 0 14px; border: 0; background: var(--gold); color: #182030; font-weight: 700; white-space: nowrap; cursor: pointer; }
.hook-form input:focus-visible, .hook-form button:focus-visible { outline: 2px solid #fff1c4; outline-offset: 2px; }
.hook-note { margin: 5px 2px 0; min-height: 1.45em; color: #c3c9d7; font-size: 13px; line-height: 1.45; }
.hook-note[data-state="ok"] { color: #f2d998; font-weight: 700; }
.hook-note[data-state="invalid"] { color: #ffb3a6; }
/* 낮은 화면(카카오톡 안 브라우저 대부분)은 칸을 줄여 방 그림 몫을 남긴다 — 맛보기 줄은 접고, 적는 동안의 읽어 주기·오류만 보인다. */
@media (max-width: 719px) and (max-height: 640px) {
  .foyer-hook { padding: 7px 10px 5px; margin-bottom: 8px; }
  .hook-title { margin: 3px 0 6px; font-size: 17px; }
  .hook-form input, .hook-form button { min-height: 44px; }
  .hook-note:not([data-state]) { display: none; }
}
@media (max-width: 360px) { .hook-form button { padding: 0 11px; font-size: 15px; } .hook-form input { padding: 0 10px; } }
.rooms { flex: 1; min-height: 0; margin: 0; gap: 11px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 72px 56px;
  grid-template-areas: 'saju lucian' 'crystal obang' 'cat cat' 'books card'; }
.room { min-height: 0; min-width: 0; }
.room[hidden], .gallery-tabs[hidden], .gallery-controls[hidden] { display: none; }
.room[data-room="saju"] { grid-area: saju; } .room[data-room="lucian"] { grid-area: lucian; }
.room[data-room="crystal"] { grid-area: crystal; } .room[data-room="obang"], .room[data-room="dream"] { grid-area: obang; }
.room[data-room="cat"] { grid-area: cat; } .room[data-room="books"] { grid-area: books; } .room[data-room="card"] { grid-area: card; }
.room-card { height: 100%; min-height: 44px; padding: 0; gap: 0; border: 1px solid #cbb07866; border-radius: 13px; overflow: hidden;
  background: #131c2d; position: relative; display: block; isolation: isolate; }
.room-card > picture { display: contents; }
.room-card source { display: none; }
.room-card:hover { transform: none; filter: brightness(1.08); }
.room-card img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; object-position: 50% 33%; border-radius: 0; }
.room-card::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, #070d1c 0%, #070d1cb3 24%, transparent 66%); }
.room-card img { z-index: -2; }
.room-text { position: absolute; bottom: 12px; left: 13px; right: 10px; padding: 0; gap: 0; display: flex; flex-direction: column; }
.room-title { font: 400 22px/1.35 'MaruBuri', serif; }
.room-detail, .room-action { display: none; }
.room-caption { margin-top: 3px; font-size: 12px; line-height: 1.4; color: #d8dce5; }
.room-free { order: -1; margin: 0 0 4px; padding: 2px 5px; font-size: 10px; line-height: 1.4; background: #142f2fe8; color: #d7ead8; border-radius: 4px; }
.room[data-room="cat"] .room-card { display: grid; grid-template-columns: 74px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 14px; align-items: center; background: #241e29; }
.room[data-room="cat"] .room-card img { position: static; width: 74px; height: 100%; z-index: auto; }
.room[data-room="cat"] .room-card::after { display: none; }
.room[data-room="cat"] .room-text { position: static; padding-right: 10px; display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 8px; align-items: center; }
.room[data-room="cat"] .room-title { font-size: 18px; }
.room[data-room="cat"] .room-title { grid-column: 1; grid-row: 1; }
.room[data-room="cat"] .room-caption { grid-column: 1 / -1; grid-row: 2; }
.room[data-room="cat"] .room-free:not([hidden]) { display: inline-block; grid-column: 2; grid-row: 1; align-self: center; margin: 0; white-space: nowrap; }
/* 영시 야화(만화, 2026-09-29) — 보일 때는 책·카드 아래 한 줄(56px). 공개 전에는 운영자에게만 보인다. */
.rooms { grid-auto-rows: 56px; }
.room[data-room="toon"] { grid-column: 1 / -1; --accent: #e3a6b8; }
.room[data-room="toon"] .room-caption { margin-top: 0; }
.room[data-room="books"] .room-card, .room[data-room="card"] .room-card, .room[data-room="toon"] .room-card { display: flex; gap: 10px; align-items: center; padding: 6px 8px; background: #141b2b; border-color: #e3c07c35; }
.room[data-room="books"] .room-card img, .room[data-room="card"] .room-card img, .room[data-room="toon"] .room-card img { position: static; z-index: auto; width: 39px; height: 39px; border-radius: 7px; }
.room[data-room="books"] .room-text, .room[data-room="card"] .room-text, .room[data-room="toon"] .room-text { position: static; padding: 0; }
.room[data-room="books"] .room-title, .room[data-room="card"] .room-title, .room[data-room="toon"] .room-title { font-size: 16px; white-space: nowrap; }
.room[data-room="books"] .room-card::after, .room[data-room="card"] .room-card::after, .room[data-room="toon"] .room-card::after { display: none; }
/* 2026-10-13 책장 칸 이름 「나의 책장 / わたしの本棚」 — 일본어 여섯 글자가 좁은 칸(목록 배치 320px)에서 넘쳐, 일본어일 때만 그림·여백을 줄여 글자 크기는 그대로 둔다. */
html[lang="ja"] .room[data-room="books"] .room-card { gap: 6px; padding: 6px 3px; }
html[lang="ja"] .room[data-room="books"] .room-card img { width: 30px; height: 30px; }
.foyer-info-bar { flex: none; text-align: center; min-height: 44px; padding-bottom: env(safe-area-inset-bottom); }
.foyer-info-bar button { min-height: 44px; border: 0; padding: 0 10px; background: none; color: #a4aec1; font: 11px/1.5 system-ui, sans-serif; cursor: pointer; }
/* 사업자 정보는 단추 뒤 대화상자에만 있었다 → 전자상거래법 표시·PG 심사가 첫 화면 바닥에서 바로 보게 늘 노출(2026-09-28). 휴대폰·낮은 화면은 한 화면 맞춤이 먼저라(390×680 에서 넘쳤다) 대화상자로만. */
.foyer-info-bar .business { justify-content: center; gap: 0 10px; padding: 0 14px 8px; color: #7f8aa1; font: 10px/1.6 system-ui, sans-serif; }
.foyer-info-bar .business a { color: inherit; }
@media (max-width: 719px), (max-height: 620px) { .foyer-info-bar .business { display: none; } }
/* 현관은 바닥 막대 44px 에 맞춰 한 화면으로 짜여 있어, 줄을 더하면 그만큼 접히는 선 아래로 밀린다(실측 1047 → 1071). 단추 14 + 사업자 줄 최대 두 줄 28 = 42 로 44 안에(전화번호가 붙자 1047 폭에서 두 줄이 됐다). 단추는 block — inline-block 이면 막대의 16px 글줄 상자에 얹혀 8px 가 더 생긴다(실측 52.8). */
@media (min-width: 720px) and (min-height: 621px) { .foyer-info-bar button { display: block; margin: 0 auto; min-height: 0; padding: 0 10px; font-size: 10px; line-height: 1.4; } .foyer-info-bar .business { padding: 0 14px; line-height: 1.4; } }
/* 주소를 등록증대로 괄호까지 적자(2026-09-29, 토스 심사 「완전히 동일」) 일본어는 상호·대표 번역이 길어 720~899 폭에서 세 줄(56px)이 됐다 — 그 폭의 일본어만 조금 작게. */
@media (min-width: 720px) and (max-width: 899px) and (min-height: 621px) { :lang(ja) .foyer-info-bar .business { gap: 0 6px; font-size: 9px; } }
#foyer-notice { width: max-content; max-width: calc(100% - 32px); font-size: 13px; line-height: 1.5; text-align: center; }
#foyer-information { width: min(480px, calc(100% - 28px)); max-height: calc(100svh - 28px); overflow-y: auto; padding: 20px;
  border: 1px solid #b6975c; border-radius: 16px; color: var(--ink); background: #111a30; }
#foyer-information::backdrop, #layout-dialog::backdrop { background: #020511cc; }
#foyer-information h2 { margin: 0 0 16px; font: 400 24px/1.4 'MaruBuri', serif; }
#foyer-information .foyer-footer { padding: 0; border: 0; font-size: 13px; color: #b9c2d3; }
#foyer-information .business { display: grid; gap: 6px; }
#foyer-information .copyright { margin-bottom: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 1안: 같은 일곱 링크를 세로 목록 다섯 개와 기록 두 개로. */
body[data-layout="list"] .rooms { gap: 8px; grid-template-rows: repeat(5, minmax(44px, 1fr)) 48px;
  grid-template-areas: 'saju saju' 'lucian lucian' 'crystal crystal' 'obang obang' 'cat cat' 'books card'; }
body[data-layout="list"] .room:not([data-room="books"]):not([data-room="card"]):not([data-room="toon"]) .room-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 13px; align-items: center; background: #131c2d; border-color: #34415b; }
body[data-layout="list"] .room-card::after { display: none; }
body[data-layout="list"] .room-card img { position: static; width: 64px; height: 100%; z-index: auto; }
body[data-layout="list"] .room-text { position: static; padding-right: 10px; }
body[data-layout="list"] .room-title { font-size: 19px; }
body[data-layout="list"] .room-free { display: none; }
body[data-layout="list"] .room-caption { font-size: 12px; }

/* 3안: 선택한 방 하나와 앞뒤 이동, 기록은 항상 아래에. */
body[data-layout="gallery"] .foyer { max-width: 500px; }
.gallery-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0 0 10px; flex: none; }
.gallery-tabs button { min-height: 44px; padding: 0 2px; border: 0; border-bottom: 1px solid #44516b; background: transparent; color: #bac3d4; font: 13px/1.3 system-ui, sans-serif; cursor: pointer; }
.gallery-tabs button[aria-pressed="true"] { border-bottom: 2px solid var(--gold); color: var(--gold); }
body[data-layout="gallery"] .rooms { grid-template-areas: 'featured featured' 'controls controls' 'books card'; grid-template-rows: minmax(0, 1fr) 44px 56px; }
body[data-layout="gallery"] .room[data-featured] { grid-area: featured; }
body[data-layout="gallery"] .room[data-featured] .room-card { display: block; padding: 0; border-radius: 70px 70px 13px 13px; }
body[data-layout="gallery"] .room[data-featured] .room-card img { position: absolute; width: 100%; height: 100%; z-index: -2; }
body[data-layout="gallery"] .room[data-featured] .room-card::after { display: block; }
body[data-layout="gallery"] .room[data-featured] .room-text { position: absolute; left: 16px; right: 16px; bottom: 20px; padding: 0; text-align: center; }
body[data-layout="gallery"] .room[data-featured] .room-title { font-size: 28px; }
body[data-layout="gallery"] .room-free { display: none; }
.gallery-controls { grid-area: controls; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; }
.gallery-controls button { min-width: 0; min-height: 44px; padding: 0 4px; border: 1px solid #495775; border-radius: 12px; background: #151d30; color: var(--ink); font: 24px/1.2 system-ui, sans-serif; cursor: pointer; }
#gallery-enter { background: #e3c07c; color: #172137; border-color: #e3c07c; font: 400 16px/1.3 'MaruBuri', serif; }

/* 설정창: 선택 단계에서는 미리보기만 바꾸고 적용할 때 저장한다. */
#layout-dialog { width: min(440px, calc(100% - 24px)); max-height: calc(100svh - 24px); overflow-y: auto; padding: 16px 18px;
  border: 1px solid #b39967; border-radius: 17px; color: var(--ink); background: #111a30; }
#layout-dialog[open] { display: grid; gap: 8px; }
.layout-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.layout-dialog-heading h2 { margin: 0; font: 400 22px/1.4 'MaruBuri', serif; }
.layout-close { height: 44px; width: 44px; flex: none; border: 0; background: transparent; color: var(--ink); font-size: 26px; cursor: pointer; }
#layout-help { margin: 0; font-size: 13px; color: #c8cedb; }
.layout-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border: 0; padding: 0; margin: 4px 0; }
.layout-options label { position: relative; display: flex; }
.layout-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.layout-options span { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 4px;
  border: 1px solid #4a5772; border-radius: 9px; color: #ccd3e0; background: #19233a; font-size: 13px; white-space: nowrap; cursor: pointer; }
.layout-options input:checked + span { background: #e3c07c; border-color: #e3c07c; color: #182137; }
.layout-options input:focus-visible + span { outline: 2px solid #fff1c4; outline-offset: 2px; }
.layout-preview-wrap { display: flex; justify-content: center; padding: 4px 0; }
.layout-preview { height: min(42svh, 320px); aspect-ratio: 390 / 680; padding: 8px; display: flex; flex-direction: column;
  border: 1px solid #536080; border-radius: 12px; background: radial-gradient(ellipse at top, #1b2946, #080c17 65%); }
.preview-header { flex: none; font: 10px/1.4 'MaruBuri', serif; padding-bottom: 5px; border-bottom: 1px solid #344059; }
.preview-heading { flex: none; font: 9px/1.4 'MaruBuri', serif; margin: 6px 0; }
.preview-rooms { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr .45fr .32fr; gap: 4px;
  grid-template-areas: 'saju lucian' 'crystal obang' 'cat cat' 'books card'; }
.preview-room { min-width: 0; min-height: 0; position: relative; overflow: hidden; border: 1px solid #b99d6366; border-radius: 5px; background: #182139; }
.preview-room img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.preview-room > span { position: absolute; bottom: 0; left: 0; right: 0; padding: 3px; color: #fff0d4; background: #080e1bb8; font-size: 8px; line-height: 1.2; }
.preview-room[data-key="saju"] { grid-area: saju; } .preview-room[data-key="lucian"] { grid-area: lucian; }
.preview-room[data-key="crystal"] { grid-area: crystal; } .preview-room[data-key="obang"], .preview-room[data-key="dream"] { grid-area: obang; }
.preview-room[data-key="cat"] { grid-area: cat; } .preview-room[data-key="books"] { grid-area: books; } .preview-room[data-key="card"] { grid-area: card; }
.preview-room[data-key="cat"], .preview-room[data-key="books"], .preview-room[data-key="card"] { display: flex; align-items: center; gap: 5px; }
.preview-room[data-key="cat"] img, .preview-room[data-key="books"] img, .preview-room[data-key="card"] img { width: 30%; }
.preview-room[data-key="cat"] span, .preview-room[data-key="books"] span, .preview-room[data-key="card"] span { position: static; background: none; padding: 0; }
.preview-tabs, .preview-control { display: none; }
.layout-preview[data-preview="list"] .preview-rooms { grid-template-rows: repeat(5, 1fr) .7fr; grid-template-areas: 'saju saju' 'lucian lucian' 'crystal crystal' 'obang obang' 'cat cat' 'books card'; }
.layout-preview[data-preview="list"] .preview-room { display: flex; align-items: center; gap: 7px; }
.layout-preview[data-preview="list"] .preview-room img { width: 28%; }
.layout-preview[data-preview="list"] .preview-room span { position: static; background: none; padding: 0; }
.layout-preview[data-preview="gallery"] .preview-tabs { display: block; font-size: 7px; color: #dac69b; margin-bottom: 5px; white-space: nowrap; }
.layout-preview[data-preview="gallery"] .preview-rooms { grid-template-rows: 1fr .13fr .15fr; grid-template-areas: 'lucian lucian' 'controls controls' 'books card'; }
.layout-preview[data-preview="gallery"] .preview-room:not([data-key="lucian"]):not([data-key="books"]):not([data-key="card"]) { display: none; }
.layout-preview[data-preview="gallery"] .preview-room[data-key="lucian"] { border-radius: 32px 32px 6px 6px; }
.layout-preview[data-preview="gallery"] .preview-control { display: grid; place-items: center; grid-area: controls; background: #d6b777; color: #121a2b; font-size: 7px; border-radius: 4px; }
#layout-description { margin: 0; min-height: 2.9em; font-size: 13px; line-height: 1.45; color: #e0e3eb; }
#layout-storage-note { margin: 0; color: #aeb9cc; font-size: 11px; }
.layout-dialog-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.layout-dialog-actions button { min-height: 44px; padding: 5px 8px; border: 1px solid #56637e; border-radius: 9px; background: #1a253b; color: #e4e8f0; font: 14px/1.4 system-ui, sans-serif; cursor: pointer; }
#layout-apply { background: #e3c07c; color: #182137; border-color: #e3c07c; }
#layout-dialog :focus-visible, .gallery-controls button:focus-visible, .gallery-tabs button:focus-visible { outline: 2px solid #f5d694; outline-offset: 2px; }
@media (max-width: 719px) {
  .foyer { min-height: 360px; padding: 9px 14px 3px; }
  .foyer-heading { margin-bottom: 10px; }
  body:not([data-member="true"]):not([data-member-hint]) .brand span { display: block; font-size: 16px; }
  body:not([data-member="true"]):not([data-member-hint]) .brand small { font-size: 9px; }
  .rooms { gap: 9px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 64px 52px; }
  .room-title { font-size: 21px; }
  .room-caption { font-size: 11px; }
  .room[data-room="cat"] .room-card { grid-template-columns: 65px minmax(0, 1fr); }
  .room[data-room="cat"] .room-card img { width: 65px; }
  html[lang="ja"] .foyer-heading h1 { font-size: clamp(17px, 4.6vw, 24px); }
}
@media (max-width: 719px) and (max-height: 640px) {
  .foyer { min-height: 350px; padding-top: 5px; }
  .foyer-heading { margin-bottom: 8px; }
  .foyer-heading h1 { font-size: 20px; }
  .rooms { gap: 8px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 54px 48px; }
  .room-text { left: 10px; bottom: 7px; }
  .room-title { font-size: 18px; }
  .room-caption { margin-top: 0; font-size: 11px; }
  .room-free { padding: 1px 4px; margin-bottom: 1px; font-size: 9px; }
  .room[data-room="cat"] .room-card { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
  .room[data-room="cat"] .room-card img { width: 54px; }
  .room[data-room="cat"] .room-title { font-size: 16px; }
  .room[data-room="books"] .room-card img, .room[data-room="card"] .room-card img, .room[data-room="toon"] .room-card img { width: 32px; height: 32px; }
  body[data-layout="list"] .room-title { font-size: 17px; }
  body[data-layout="list"] .room-caption { font-size: 11px; }
  body[data-layout="gallery"] .rooms { grid-template-rows: minmax(0, 1fr) 44px 48px; }
  body[data-layout="gallery"] .room[data-featured] .room-text { bottom: 10px; }
  body[data-layout="gallery"] .room[data-featured] .room-title { font-size: 22px; }
  .gallery-tabs { margin-bottom: 8px; }
}
@media (max-height: 620px) {
  #layout-dialog { padding: 10px 14px; }
  #layout-dialog[open] { gap: 6px; }
  #layout-help { display: none; }
  .layout-preview { height: 180px; }
  .layout-preview-wrap { padding: 0; }
  #layout-description { font-size: 12px; }
  .layout-options { margin: 0; }
}

/* 빨간 점(2026-09-26) — 새 점사가 적힌 「내 책」 칸. 세 레이아웃 모두 같은 칸이라 칸 위에 그린다.
   ::after 는 레이아웃이 그림 그늘막으로 쓰고 책·카드 칸에서는 꺼 두므로 빌리지 않는다 — 점 전용 요소를 둔다. */
.room-dot { position: absolute; top: 7px; right: 7px; z-index: 3; width: 11px; height: 11px; border-radius: 50%;
  background: #ff5f55; box-shadow: 0 0 0 2px #0b1020; pointer-events: none; }
.room-dot[hidden] { display: none; }
.room-new[hidden] { display: none; }

/* 지난 점사 설문 권유(2026-09-26) — 제목 아래 한 줄. 누르면 책장의 그 판이 설문과 함께 열린다. */
.survey-nudge { flex: none; display: flex; align-items: stretch; gap: 6px; margin: 0 0 10px; border: 1px solid #e3c07c88; border-radius: 12px; background: #19203a; }
.survey-nudge[hidden] { display: none; }
/* 지난 모습으로 자리만 맡아 둔 설문 띠(2026-10-03) — 계정 기록을 보기 전에는 글도 단추도 보이지 않는다. */
#survey-nudge[data-pending] > *, #today-line-nudge[data-pending] > * { visibility: hidden; }
/* 오늘 한 줄(2026-10-15) — 설문 띠와 같은 틀, 닫는 단추 없음. 줄을 다 싣되 휴대폰에서는 두 줄까지만 보이고(전문은 계정 화면의 오늘의 운세),
   방 칸이 남는 높이를 나눠 갖는 현관이 한 화면을 넘지 않게 한다. */
.today-line-nudge a { white-space: normal; }
.today-line-nudge #today-line-text { color: #f3e3b6; }
@media (max-width: 719px) { .today-line-nudge #today-line-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.45; } }
/* 키 작은 화면(320×480 같은)은 한 줄만 — 방 칸의 몫을 지킨다. */
@media (max-width: 719px) and (max-height: 600px) { .today-line-nudge { margin-bottom: 6px; } .today-line-nudge a { min-height: 40px; padding-top: 4px; padding-bottom: 4px; } .today-line-nudge #today-line-text { -webkit-line-clamp: 1; } }
.survey-nudge a { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 4px 6px 14px;
  color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.4; }
.survey-nudge-go { flex: none; color: var(--gold); font-weight: 700; white-space: nowrap; }
.survey-nudge button { flex: none; width: 40px; border: 0; border-left: 1px solid #e3c07c33; background: transparent; color: #aeb4c4; font-size: 18px; cursor: pointer; border-radius: 0 12px 12px 0; }
.survey-nudge a:focus-visible, .survey-nudge button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }