/* 오늘달공방 공용 스타일 — 모든 페이지가 같이 쓴다 */
/* 직접 넣는 글꼴(Ok단단체·ふんわりラウンド)의 @font-face 는 build.py 가 fonts.css 로 만든다
   — 페이지에 쓰인 글자만 잘라 넣기 때문(fonts_src/ 의 원본은 올리지 않음) */

/* hidden 속성이 붙으면 언제나 숨김(.post-tools·.visits·.pill 처럼 display 를 정한 것도). 관리실도 이 파일을 같이 씀 */
[hidden] { display: none !important; }
/* 키보드로 고른 버튼·링크 테두리도 브라우저 기본 파랑 대신 연보라 */
:focus-visible { outline-color: var(--focus-ring); }

:root {
  --sky-top: #E6DDF7;      /* 연보라 → 크림: 해 질 녘 하늘에 달이 뜨는 느낌 */
  --sky-bottom: #FBF4DF;
  --paper: #FFFFFF;
  --ink: #4A4257;
  --ink-soft: #8E86A0;
  --line: #EEE8F5;
  --moon: #FFD86B;
  --sb-track: #F6F2FC;      /* 스크롤바 바탕·손잡이·손잡이에 마우스(아래 '스크롤바 도구') */
  --sb-thumb: #D8CBF2;
  --sb-thumb-hover: #C9B8F0;
  --focus-ring: #C9B8F0;  /* 입력 칸을 눌렀을 때 테두리(브라우저 기본 파랑 대신). 관리실 admin.css 도 같이 씀 */
  --radius-window: 36px;
  --radius-card: 28px;
  /* 크레용 마우스 커서(tools/make_cursors.py, 사용자 미드저니 그림). 관리실(admin.css)도 같은 것을 쓴다. 숫자는 누르는 점 자리, 그림이 안 오면 뒤의 기본 커서.
     변수 속 url 은 브라우저마다 기준 위치가 달라서 / 로 시작하는 주소로. 그림을 바꾸면 ?v= 숫자를 올릴 것(안 그러면 옛 그림이 남음) */
  --cur: image-set(url("/img/cursor_arrow.png?v=3") 1x, url("/img/cursor_arrow@2x.png?v=3") 2x) 5 1, auto;
  --cur-hand: image-set(url("/img/cursor_hand.png?v=3") 1x, url("/img/cursor_hand@2x.png?v=3") 2x) 6 1, pointer;
  /* 글 쓰는 칸 위: 크레용 I(2026-10-22 사용자 미드저니 그림). 누르는 점은 가운데 */
  --cur-text: image-set(url("/img/cursor_text.png?v=1") 1x, url("/img/cursor_text@2x.png?v=1") 2x) 6 11, text;
}
html { cursor: var(--cur); }
/* 그림은 끌어서 빼거나 꾹 눌러 저장하지 못하게(메뉴는 js/protect-images.js 가 막음, 2026-10-21) */
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
/* 꾸밈·버튼 글자는 눌러도 파랗게 선택되지 않게(앱처럼, 2026-10-21 사용자 결정).
   소개 글·자주 묻는 질문 답·게시판 글·문서·사업자 정보·이메일은 복사할 수 있게 그대로 둔다 */
.titlebar, .top-row, .bgm-bar, .hero, .section-title, .card-top, .tag, .pill, button, summary, .crumb,
.app-hero h1, .actions, .links, .post-tools, .answered, .reply-tag { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
a[href], button, summary, select, label:has(input), [role="button"],
input:is([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]) { cursor: var(--cur-hand); }
/* 글자 쓰는 칸만 글자 커서(소리 조절 막대 같은 range 까지 글자 커서가 되던 것 고침, 2026-10-21) */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), textarea { cursor: var(--cur-text); }
button:disabled { cursor: var(--cur); }
/* 언어마다 어울리는 글꼴 (단단체는 한글 전용, ふんわり는 로마자·가나만 — 한자는 M PLUS 가 받음) */
html[lang="ko"] { --display: "OkDanDan", "Gowun Dodum", sans-serif; --body: "Gowun Dodum", -apple-system, "Apple SD Gothic Neo", sans-serif; }
html[lang="en"] { --display: "Funwari Round", "Zen Maru Gothic", sans-serif; --body: "Zen Maru Gothic", -apple-system, sans-serif; }
html[lang="ja"] { --display: "Funwari Round", "M PLUS Rounded 1c", sans-serif; --body: "Zen Maru Gothic", -apple-system, "Hiragino Maru Gothic ProN", sans-serif; }
html[lang="ja"] .display-weight { font-weight: 800; }
/* 짧은 글자(버튼·꼬리표·뒤로가기·비밀글 체크)도 제목처럼 귀여운 글꼴로(2026-10-19). 긴 글·닉네임·날짜는 본문 글꼴 유지.
   한국어 화면의 로마자(App Store 등)는 단단체 로마자가 각져 보여서 ふんわり가 먼저 받는다 */
html[lang="ko"] { --ui: "Funwari Round", "OkDanDan UI", "Gowun Dodum", sans-serif; }  /* 한글은 키운 단단체(font_subset.py aliases) */
html[lang="en"], html[lang="ja"] { --ui: var(--display); }
/* 버튼은 스토어 버튼까지 모두 같은 귀여운 글꼴(2026-10-19 사용자 결정) */
:is(.pill, .tag, .crumb) { font-family: var(--ui); font-weight: 400; }
html[lang="ja"] :is(.pill, .tag, .crumb) { font-weight: 800; }
/* 귀여운 글꼴은 글자 폭이 넓어 카드 안 버튼 셋이 한 줄에 안 들어가서 카드 버튼만 살짝 좁힌다 */
.card .actions { gap: 6px; }
.card .actions .pill { padding: 8px 12px; letter-spacing: -.01em; }
.card .actions .pill.more, .card .actions .pill.soon { padding: 6px 12px; }
/* 버튼 높이를 글꼴과 상관없이 같게: ふんわり(로마자)와 단단체(한글)는 줄 높이가 달라 스토어 버튼만 커 보였다 */
.actions .pill { height: 36px; padding-top: 0; padding-bottom: 0; line-height: 1; box-sizing: border-box; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--sky-bottom); }
/* 스크롤바 도구: 페이지·관리실·문서 쓰는 창·목록 등 스크롤되는 모든 곳이 같은 모양(2026-10-22 사용자 요청, 색은 하늘과 같은 연보라).
   색은 :root 의 --sb-* 세 개만 바꾸면 전부 바뀐다. 손잡이 테두리를 바탕색으로 둘러 바탕 안에 떠 보이게.
   컴퓨터에서만 보이고 휴대폰은 그대로. 따로 모양이 있는 곳(.shots 가로 줄, 관리실 숨김 줄)은 그쪽 규칙이 이긴다 */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--sb-track); }
*::-webkit-scrollbar-thumb { background: var(--sb-thumb); border: 2px solid var(--sb-track); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }
*::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); } }
body {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 70%);
  color: var(--ink);
  font-family: var(--body);
  padding: 56px 16px 40px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.display { font-family: var(--display); font-weight: 400; }
html[lang="ja"] .display { font-weight: 800; }

/* 하늘에 떠 있는 작은 별 */
.stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.stars span {
  position: absolute; color: #fff; font-size: 14px;
  animation: twinkle 3.2s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255, 255, 255, .9);
}
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }

/* 큰 창 (참고: 밀키위키의 맥 창, miniyama의 둥근 흰 판) */
.window {
  position: relative; z-index: 1;
  max-width: 980px; margin: 0 auto;
  background: var(--paper);
  border-radius: var(--radius-window);
  box-shadow: 0 30px 80px rgba(110, 90, 150, .18), 0 0 0 1px rgba(255, 255, 255, .7);
  overflow: hidden;
}
.titlebar { display: flex; align-items: center; gap: 8px; padding: 14px 18px 14px 22px; border-bottom: 1.5px solid var(--line); }
/* 위 막대(주소·언어 버튼)는 어느 언어 페이지든 같은 모양 — 한국어판 모양(Gowun Dodum)이 기준 */
.titlebar { font-family: "Gowun Dodum", -apple-system, sans-serif; }
.titlebar i { width: 13px; height: 13px; border-radius: 50%; display: block; flex: none; }
.titlebar i:nth-child(1) { background: #FF8A80; }
.titlebar i:nth-child(2) { background: #FFD27A; }
.titlebar i:nth-child(3) { background: #9EDB8F; }
.titlebar .addr {
  margin-left: 10px; flex: 1; min-width: 0;
  font-size: 13px; color: var(--ink-soft);
  background: #F7F4FB; border-radius: 999px; padding: 6px 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.langs { display: flex; gap: 2px; flex: none; background: #F7F4FB; border-radius: 999px; padding: 3px; }
.langs a { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; color: var(--ink-soft); }
.langs a[aria-current="true"] { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 1px 4px rgba(80, 60, 110, .12); }

/* 첫 화면 */
.hero { position: relative; text-align: center; padding: 64px 24px 24px; --k: 1; --kx: 1px; }  /* --k: 도트 별 비율, --kx: 가로 자리 한 칸의 길이(휴대폰은 아래 미디어 쿼리) */
/* 말풍선 두둥실(관리실·404). 홈은 맨 위 그림(.hero-art)이 움직이고 말풍선은 가만히 */
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
/* 홈 맨 위 그림(build.py home, static/img/hero_art.webp). 지금은 졸린 강아지라 숨 쉬듯 천천히 부풀었다 가라앉는다.
   다른 시안(달·별 등)은 _versions/ */
.hero-art { display: block; width: 120px; height: auto; margin: 0 auto; transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 10px rgba(110, 90, 150, .16)); animation: art-breathe 3.4s ease-in-out infinite; }
@keyframes art-breathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-3px) scale(1.025, 1.045); } }
/* 둘레의 도트 별(build.py hero_sparkles). --x·--y 는 가운데·위 기준 px, --s 는 크기. 휴대폰은
   크기만 --k 배로 작게, 가로 자리는 --kx 로 카드 폭의 비율(%)을 써서 어떤 폭에서도 카드 안에 들어오게
   (고정 배율이면 폭 360px 갤럭시에서 맨 왼쪽 별이 카드 밖으로 잘렸다), 세로 자리는 hero-stars.js 가 실제 글자·메뉴 자리에 맞춰 넣는 --ym(2026-10-21) */
.hero > :not(.sparkles) { position: relative; z-index: 1; }
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sparkles .px { position: absolute; left: calc(50% + var(--x) * var(--kx)); top: calc(var(--y) * 1px);
  width: calc(var(--s) * var(--k) * 1px); height: calc(var(--s) * var(--k) * 1px); shape-rendering: crispEdges; fill: currentColor;
  animation: px-twinkle 2.6s steps(3) calc(var(--d) * -1s) infinite; }
@keyframes px-twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (max-width: 640px) { .hero { --k: .55; --kx: .13%; } .sparkles .px { top: calc(var(--ym, var(--y)) * 1px); } }
/* 그림 아래 말풍선은 그림이 하는 말: 꼬리가 위로, 움직이지 않는다 */
.hero-art + .bubble { margin-top: 20px; animation: none; }
.hero-art + .bubble::before { top: -10px; bottom: auto; border: 0; border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); }
.bubble {
  display: inline-block; position: relative; margin-top: 10px; animation: bob 4s ease-in-out infinite;
  background: #FFF7D6; border: 2px solid var(--ink); border-radius: 999px; padding: 10px 22px;
  font-family: var(--display); font-size: 17px; line-height: 1.4;
}
html[lang="ja"] .bubble { font-weight: 800; font-size: 15px; }
/* 폭 380px 이하 휴대폰은 한국어 첫 말풍선이 '…만들 / 어요'로 끊겨서, 화면 폭에 맞춰 글자를 줄여 한 줄로(2026-10-21 사용자 선택).
   S25(384px)는 그대로 17px */
@media (max-width: 380px) { html[lang="ko"] .hero-art + .bubble { font-size: 4.1vw; } }
.bubble::before {
  content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 16px; height: 16px; background: #FFF7D6; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.hero h1 { font-size: clamp(40px, 8vw, 68px); letter-spacing: -.01em; margin-top: 26px; line-height: 1.1; }
.hero-art + .bubble + h1 { margin-top: 20px; }
.hero h1 small { display: block; font-family: var(--body); font-weight: 700; font-size: .32em; color: var(--ink-soft); margin-top: 10px; letter-spacing: .2em; }

.nav { display: flex; justify-content: center; gap: 30px; margin: 34px 0 6px; }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--display); font-size: 15px; }
.nav a svg { width: 44px; height: 44px; transition: transform .2s; }
.nav a:hover svg { transform: rotate(-8deg) scale(1.08); }
/* 앱 페이지 메뉴(앱 소개 상자 바로 밑): 홈 메뉴와 같은 크기(2026-10-22 사용자 결정), 자리만 다르게.
   눌러 내려간 칸 제목·글쓰기 칸이 화면 맨 위에 붙지 않게 조금 띄운다 */
.app-nav { margin: 48px 0 26px; } /* 위아래 넉넉하게(2026-10-22 사용자 선택 B) */
#notice, #faq, #ask, #post-form { scroll-margin-top: 16px; }
/* 공지·질문 게시판 목록 밑 '더 보기'(static/js/board.js) */
.more-row { display: flex; justify-content: center; margin-top: 14px; }

/* 섹션 공통 */
.section { padding: 34px clamp(16px, 4vw, 48px) 40px; }
.section + .section { padding-top: 8px; }
.section-title { font-size: 26px; text-align: center; margin-bottom: 26px; }
.section-title::before, .section-title::after { content: "⋆"; color: var(--moon); margin: 0 10px; }

/* 앱 카드 */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card {
  position: relative; border-radius: var(--radius-card); padding: 26px 24px 22px;
  background: var(--bg); border: 2px solid var(--edge);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); min-height: 250px;
}
.card:hover { transform: translateY(-4px) rotate(-.6deg); }
.card-top { display: flex; align-items: center; gap: 16px; }
.card-icon {
  width: 78px; height: 78px; flex: none; border-radius: 22px; background: #fff;
  box-shadow: 0 8px 18px rgba(80, 60, 110, .14); overflow: hidden; transform: rotate(-5deg);
}
.card-icon img { width: 100%; height: 100%; display: block; }
.card h3 { font-size: 25px; line-height: 1.2; }
/* 최근 공지가 있는 앱 표시(static/js/home.js) */
.new-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #FF9DB0; color: #fff;
  font-family: var(--ui); font-size: 11px; line-height: 1.6; letter-spacing: .04em; vertical-align: 5px; animation: new-pop 2.4s ease-in-out infinite; }
@keyframes new-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.tag { font-size: 12.5px; color: var(--accent); margin-top: 4px; letter-spacing: .02em; }
.card p { font-size: 15.5px; line-height: 1.6; flex: 1; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 15px;
  font-size: 13.5px; font-weight: 700; transition: transform .15s; white-space: nowrap;
}
.pill:hover { transform: scale(1.05); }
.pill svg { width: 15px; height: 15px; fill: currentColor; }
.pill.store { background: var(--ink); color: #fff; }
.os-android .pill.store.android { order: -1; } /* 안드로이드 폰은 Google Play 먼저(build.py OS_MARK_JS) */
.pill.more { background: #fff; color: var(--accent); border: 2px solid var(--edge); padding: 6px 14px; }
/* 링크 복사: '링크 복사' → 누르면 2초 '복사했어요'. 폭은 글자 따라 바뀐다
   (아이콘만 두는 안·긴 문구에 폭 고정하는 안은 빈 자리가 어색해 2026-10-20 되돌림) */
.pill.share { cursor: var(--cur-hand); }
.pill.share .share-done, .pill.share.done .share-idle { display: none; }
.pill.share.done .share-done { display: inline; }
.pill.soon { background: #fff; color: var(--accent); border: 2px dashed var(--accent); padding: 6px 15px; }

/* 앱마다 색 (아이콘에서 뽑음) */
/* 앱 카드 색(.c-lavender 등)은 dist/colors.css — content/studio_content.py 의 APP_COLORS 로 build.py 가 만든다 */

/* 점점: 아이콘이 아직 없어 캐릭터 셋이 줄지어 섬 */
.chars { display: flex; align-items: flex-end; gap: 4px; height: 78px; flex: none; }
.chars img { height: 100%; width: auto; animation: hop 1.6s ease-in-out infinite; }
.chars img:nth-child(2) { height: 82%; animation-delay: .2s; }
.chars img:nth-child(3) { height: 86%; animation-delay: .4s; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }

/* 앱 페이지 */
.crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-soft); padding: 22px clamp(16px, 4vw, 48px) 0; }
.crumb:hover { color: var(--ink); }
.app-hero { margin: 18px clamp(16px, 4vw, 48px) 0; border-radius: var(--radius-card); background: var(--bg); border: 2px solid var(--edge); padding: 34px 26px; text-align: center; }
.app-hero .card-icon { width: 108px; height: 108px; border-radius: 30px; margin: 0 auto; }
.app-hero .chars { justify-content: center; height: 100px; }
.app-hero h1 { font-size: clamp(32px, 6vw, 46px); margin-top: 18px; line-height: 1.15; }
.app-hero .tag { font-size: 14px; margin-top: 8px; }
.app-hero p { font-size: 16px; line-height: 1.7; margin: 14px auto 20px; max-width: 520px; }
.app-hero .actions { justify-content: center; }

.box { border: 2px solid var(--line); border-radius: 22px; background: #FCFBFE; }
.empty { text-align: center; padding: 26px 16px; color: var(--ink-soft); font-size: 15px; }
.empty::before { content: "☾"; display: block; font-size: 22px; color: var(--moon); margin-bottom: 6px; }
.faq details { border-bottom: 1.5px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none; cursor: var(--cur-hand); padding: 18px 52px 18px 22px; position: relative;
  font-weight: 700; font-size: 15.5px; line-height: 1.5;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--body); font-weight: 800; color: var(--accent, var(--ink-soft)); margin-right: 8px; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--ink-soft); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .answer { padding: 0 22px 20px 44px; font-size: 15px; line-height: 1.7; color: #5D566B; }
.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.links a { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; font-weight: 700; font-size: 15px; transition: transform .15s; }
.links a:hover { transform: translateY(-2px); }
.links a::after { content: "→"; color: var(--ink-soft); }
.contact { text-align: center; padding: 30px 20px; }  /* 버튼만 있어도 테두리 상자는 둔다(사용자 선호) */
.contact p { font-size: 15px; line-height: 1.7; margin-bottom: 16px; color: #5D566B; white-space: pre-line; }  /* 문구 속 줄바꿈(\n) 살림 */
.contact .pill { font-size: 15px; padding: 11px 22px; background: var(--ink); color: #fff; }
.contact .pill .mail-icon { width: 30px; height: 30px; margin: -7px 2px -7px -6px; }
.contact .mail { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-soft); }

/* 앱 화면 사진(build.py shots_section): 옆으로 넘겨 보는 줄. 높이를 맞추고 폭은 사진 비율대로 */
.shots { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 24px; }
/* 몇 장 안 돼 한 줄에 다 들어가면 가운데, 넘치면 앞(왼쪽)부터 붙어 옆으로 넘김(SNS 카드처럼, 2026-10-20 사용자 결정).
   justify-content:center 는 넘칠 때 앞쪽이 잘려 못 넘겨 보므로 양 끝 auto 여백으로 */
.shots > :first-child { margin-left: auto; }
.shots > :last-child { margin-right: auto; }
/* 스크롤 막대: 얇은 연보라 막대(2026-10-20 사용자 결정 A). 크롬·사파리는 -webkit- 로 모양까지, 그 밖(파이어폭스)은 색만 */
.shots::-webkit-scrollbar { height: 6px; }
.shots::-webkit-scrollbar-track { background: var(--line); border-radius: 999px; margin: 0 20%; }
.shots::-webkit-scrollbar-thumb { background: var(--edge); border: 0; border-radius: 999px; }
.shots::-webkit-scrollbar-thumb:hover { background: var(--accent, var(--edge)); }
@supports not selector(::-webkit-scrollbar) { .shots { scrollbar-width: thin; scrollbar-color: var(--edge) var(--line); } }
.shots img { flex: none; height: 420px; width: auto; border-radius: 22px; border: 2px solid var(--edge); background: #fff;
  scroll-snap-align: start; box-shadow: 0 6px 18px rgba(80, 60, 120, .08); }
.shots img { cursor: zoom-in; }
@media (max-width: 600px) { .shots img { height: 360px; } }
/* 유튜브 영상 표지(맨 앞): 사진과 같은 높이 + 가운데 ▶ 동그라미 */
.shot-video { position: relative; flex: none; display: block; scroll-snap-align: start; border-radius: 22px; }
.shot-video img { cursor: var(--cur-hand); }
.shot-video i { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px rgba(40, 32, 56, .25); transition: scale .15s; }
.shot-video i::before { content: ""; position: absolute; inset: 0; margin: auto; translate: 3px 0; width: 22px; height: 24px;
  background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.shot-video:hover i { scale: 1.08; }

/* 홈 '여기서도 만나요' SNS 카드(build.py sns_section). 관리실에서 켠 것만 */
/* 카드 폭은 몇 개를 켜도 같게(5개가 한 줄을 채우는 폭) — 1~2개만 켜도 길게 늘어나지 않고 가운데 모인다(2026-10-20 사용자 요청) */
.sns-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sns-cards a { flex: 0 0 166px; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #fff; border: 2px solid var(--line); border-radius: 22px; color: var(--ink); transition: transform .15s; }
.sns-cards a:hover { transform: translateY(-2px); }
.sns-cards i { width: 38px; height: 38px; flex: none; border-radius: 50%; background: #F7F4FB; display: grid; place-items: center; }
.sns-cards svg { width: 18px; height: 18px; fill: currentColor; }
.sns-cards b { display: block; font-size: 14px; }
.sns-cards small { display: block; font-size: 12px; color: var(--ink-soft); }
@media (max-width: 600px) { .sns-cards a { flex-basis: calc(50% - 6px); } } /* 휴대폰은 한 줄에 둘 */

/* 확인창·알림창(static/js/dialog.js). 홈페이지와 관리실이 같이 쓴다 */
.app-dialog { margin: auto; border: 0; padding: 26px 24px 20px; width: min(340px, calc(100vw - 32px)); border-radius: var(--radius-card); background: #fff;
  color: var(--ink); text-align: center; box-shadow: 0 20px 50px rgba(40, 32, 56, .25); }
.app-dialog::backdrop { background: rgba(40, 32, 56, .45); }
.app-dialog p { margin: 4px 0 20px; font-size: 15.5px; line-height: 1.6; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.app-dialog .dlg-row { display: flex; gap: 8px; justify-content: center; }
.app-dialog .pill { background: var(--ink); color: #fff; border: 0; cursor: var(--cur-hand); font-size: 13.5px; padding: 7px 18px; }
/* 홈 문의 창(static/js/contact.js, 2026-10-22). 맨 아래 메일 주소 줄은 뺐다(주소는 맨 아래 사업자 정보에 있음) */
/* 크기는 홈 큰 창(.window 980px) 안에 얼추 맞게 넉넉히(2026-10-22 사용자 요청, 전엔 420px 라 작았다) */
.contact-dialog { width: min(620px, calc(100vw - 32px)); padding: 32px 40px 26px; text-align: center; }
.contact-dialog h3 { font-size: 22px; margin: 0 0 4px; }
.contact-dialog .post-form textarea { resize: none; } /* 끌어서 칸 크기 바꾸기 없음(창 안에서 늘어나지 않게) */
@media (max-width: 640px) { .contact-dialog { padding: 24px 20px 20px; } } /* 휴대폰은 화면 폭을 거의 다 쓰니 안쪽 여백만 줄임 */
.contact-dialog .contact-sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 14px; }
.contact-dialog .post-form { margin: 0; padding: 0; text-align: left; }
.contact-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-soft); }
.contact-kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 8px; }
/* 숨긴 동그라미는 칩 안에 붙잡아 둔다(안 그러면 창 밖으로 밀려 가로 스크롤이 생김, 2026-10-22) */
.contact-kinds label { position: relative; cursor: var(--cur-hand); }
.contact-kinds input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.contact-kinds span { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-size: 13px; }
.contact-kinds input:checked + span { border-color: var(--focus-ring); background: #F6F2FC; font-weight: 700; }
.contact-kinds input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.contact-tip { font-size: 13px; line-height: 1.55; color: #6E6680; background: #F6F2FC; border-radius: 12px; padding: 9px 12px; margin: 0; }
.contact-tip a { color: #7A5FC0; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.contact-dialog .dlg-row { margin-top: 4px; }
.contact-dialog .form-status { text-align: center; margin: 0; }

/* 사진·영상 크게 보기(static/js/lightbox.js). 홈페이지와 관리실(admin/index.html 도 이 파일을 씀)이 같이 쓴다 */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(40, 32, 56, .85); }
.lightbox img { max-width: min(92vw, 560px); max-height: 88dvh; border-radius: 22px; user-select: none; touch-action: pan-y; }
/* 영상: 영상 비율(--ar, lightbox.js)대로 화면에 들어가는 만큼 크게. 가로 영상은 960px 까지 */
.lightbox iframe { aspect-ratio: var(--ar); width: min(92vw, 960px, calc(84dvh * (var(--ar)))); height: auto; border: 0; border-radius: 22px; background: #000; }
.lightbox button { position: fixed; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92);
  color: var(--ink); font-size: 24px; line-height: 1; display: grid; place-items: center; cursor: var(--cur-hand); }
.lightbox button:disabled { opacity: .3; cursor: var(--cur); }
.lb-close { top: 16px; right: 16px; font-size: 18px; }
.lb-prev { left: 16px; top: 50%; translate: 0 -50%; }
.lb-next { right: 16px; top: 50%; translate: 0 -50%; }
.lb-count { position: fixed; bottom: 18px; left: 50%; translate: -50% 0; color: #fff; font-size: 13px; letter-spacing: .06em; }
@media (max-width: 600px) { .lightbox .lb-prev, .lightbox .lb-next { display: none; } } /* 휴대폰은 옆으로 밀어서 넘김 */

/* 공지(제목+날짜) · 질문 게시판 */
.notices summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* 공지 줄의 날짜·+ 를 왼쪽 딱지·제목과 같은 높이로(날짜가 2px 떠 있고 + 가 1px 내려앉아 있었음, 실측 2026-10-20) */
.notices .notice-date { line-height: 1; }
.notices summary::after { transform: translateY(calc(-50% - 1px)); }
.notices details[open] summary::after { transform: translateY(calc(-50% - 1px)) rotate(45deg); }
.notices summary::before { content: "☾"; color: var(--moon); }
/* 공지 제목 줄: 종류 딱지·제목·NEW 를 같은 높이 가운데에(딱지마다 따로 띄우던 값 때문에 NEW 가 4px 떠 있었음, 2026-10-20) */
.notice-title { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
/* 두 딱지를 같은 키·같은 글자 크기로(높이가 21px·19.6px 로 달라 NEW 가 떠 보였음) */
.notice-title .kind, .notice-title .new-badge { margin: 0; vertical-align: 0; display: inline-flex; align-items: center;
  height: 20px; padding: 0 9px; font-size: 11.5px; line-height: 1; box-sizing: border-box; }
.notice-title .kind { padding-bottom: 2px; } /* 단단체 한글은 상자 안에서 1px 아래로 앉아서 살짝 올림(실측) */
/* 공지 종류 딱지(content/studio_content.py 의 NOTICE_KINDS). 관리실도 같은 색을 쓴다 */
.kind { display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 999px; font-family: var(--ui); font-size: 12px; line-height: 1.6; vertical-align: 1px; white-space: nowrap; }
.kind-update { background: #DDF2E3; color: #3F7A55; }
.kind-notice { background: #ECE4FA; color: #6A55A0; }
.kind-maintenance { background: #FDE5D6; color: #A35E37; }
.kind-event { background: #FCE0EA; color: #AE4870; }
.notice-date, .post-date { font-size: 13px; color: var(--ink-soft); font-weight: 400; white-space: nowrap; }
.answer, .post-body, .post-reply p { white-space: pre-wrap; }
.posts { display: flex; flex-direction: column; gap: 12px; }
.post { padding: 16px 20px; }
.post-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 15px; }
.post-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* 닉네임과 답변 완료 딱지를 같은 높이 가운데에 */
/* 답이 달린 글(board.js) */
.answered { padding: 1px 9px; border-radius: 999px; background: #DDF2E3; color: #3F7A55; font-family: var(--ui); font-size: 12px; line-height: 1.6; white-space: nowrap; }
.post-body { font-size: 15px; line-height: 1.7; color: #5D566B; }
.post-reply { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg, #F7F4FB); font-size: 14.5px; line-height: 1.6; }
/* 답 이름표: 앱 색 동그란 딱지(공지 종류 딱지와 같은 모양) */
.post-reply .reply-tag { display: inline-block; margin-bottom: 6px; padding: 2px 11px; border-radius: 999px; background: var(--accent, var(--ink)); color: #fff; font-family: var(--ui); font-size: 12.5px; line-height: 1.6; }
.post-reply .reply-tag::before { content: "☾ "; }
.post-form { margin-top: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.post-form input, .post-form textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: #fff;
  border: 2px solid var(--line); border-radius: 14px; padding: 10px 14px; resize: vertical; width: 100%;
}
.post-form input:focus, .post-form textarea:focus { outline: none; border-color: var(--accent, var(--ink-soft)); }
.post-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* 자동 등록 프로그램 거르기용 숨은 칸 */
.post-form .pill { background: var(--ink); color: #fff; border: 0; cursor: var(--cur-hand); font-size: 15px; padding: 10px 22px; }
/* 글쓰기 아랫줄: 왼쪽에 비밀글 체크·안내, 오른쪽에 남기기 버튼(한 덩어리로) */
.form-foot { display: flex; align-items: center; gap: 14px; }
.form-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.post-form .form-foot .pill { flex: none; }
/* '비밀글로 남기기'는 버튼이 아니라 글쓰기 칸의 선택지라 본문 글꼴(2026-10-22 사용자 결정, 체크 모양은 그대로) */
.secret-check { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 14.5px; cursor: var(--cur-hand); }
.secret-hint { display: none; font-size: 12.5px; color: var(--accent, var(--ink-soft)); }
.secret-check:has(input:checked) .secret-hint { display: inline; }
.secret-hint::before { content: "— "; }
.form-status { font-size: 13.5px; color: var(--accent, var(--ink-soft)); line-height: 1.6; }
.form-status:empty { display: none; }

.post-form .pill:disabled { opacity: .5; }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 게시판 사진(static/js/board.js): 고르는 칸과 글 아래 사진 줄 */
.photo-list { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-item, .photo-add { position: relative; width: 72px; height: 72px; box-sizing: border-box; }
.photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px dashed var(--line);
  border-radius: 14px; background: #fff; color: var(--ink-soft); font-size: 11.5px; cursor: var(--cur-hand); }
.photo-add[hidden] { display: none; }
.photo-add svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.photo-add:hover { border-color: var(--accent, var(--ink-soft)); color: var(--ink); }
.photo-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; border: 2px solid var(--line); }
.photo-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 11px; line-height: 22px; cursor: var(--cur-hand); padding: 0; }
.post-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.post-photo { padding: 0; border: 0; background: none; cursor: zoom-in; }
.post-photo img { display: block; width: 110px; height: 110px; object-fit: cover; border-radius: 14px; border: 1.5px solid var(--line); }
/* 계정 삭제 요청 칸(앱 문서 '계정 삭제'): 로그인 방법 고르기 */
.delete-form { margin: 14px 0 6px; }
.del-provider { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; border: 0; margin: 0; padding: 2px 4px; font-size: 14.5px; }
.del-provider legend { float: left; margin-right: 6px; padding: 0; color: var(--ink-soft); }
.del-provider label { display: inline-flex; align-items: center; gap: 6px; cursor: var(--cur-hand); }
.del-provider input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.del-apple-hint { display: none; margin: -4px 4px 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.delete-form:has(input[value="apple"]:checked) .del-apple-hint { display: block; }  /* Apple 을 고를 때만 */
.secret-check input { width: 18px; height: 18px; accent-color: var(--accent, var(--ink)); }
.post.secret { background: #FCFBFE; }
.post-body.locked { color: var(--ink-soft); }
.post-tools { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--ink-soft); cursor: var(--cur-hand); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--ink); }
.pw-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1.5px dashed var(--line); }
.pw-ask input { flex: 1 1 100px; min-width: 0; font: inherit; font-size: 14px; border: 2px solid var(--line); border-radius: 12px; padding: 7px 12px; }
/* 입력 칸을 누르면 연보라 테두리만(옅은 빛은 빼기로 2026-10-20 사용자 결정, 관리실과 같은 색) */
.post-form :is(input, textarea):focus, .pw-ask input:focus { outline: none; border-color: var(--focus-ring); }
.pw-ask .pill { background: var(--ink); color: #fff; border: 0; cursor: var(--cur-hand); font-size: 13.5px; padding: 7px 16px; }
/* 취소 같은 둘째 버튼: 같은 알약·같은 글씨에 흰 바탕 + 연한 테두리(테두리 2px 만큼 안쪽 여백을 줄여 높이를 맞춤) */
.pw-ask .pill.ghost, .app-dialog .pill.ghost { background: #fff; color: var(--ink); border: 2px solid var(--line); padding: 5px 14px; }
.pw-msg { width: 100%; font-size: 13px; color: #C9483D; }
.pw-msg:empty { display: none; }
.muted { color: var(--ink-soft); }
@media (max-width: 720px) {
  .form-two { grid-template-columns: 1fr; }
  /* 폰에선 좁아서 버튼을 아래로 넓게 */
  .form-foot { flex-direction: column; align-items: stretch; }
  .post-form .form-foot .pill { justify-content: center; }
}

/* 없는 주소(404) */
.notfound { padding: 90px 24px 100px; }
.notfound h1 { font-size: clamp(72px, 14vw, 120px); margin-top: 24px; font-family: var(--ui); }  /* 숫자는 단단체가 각져 보여 ふんわり로 */
.nf-body { color: var(--ink-soft); font-size: 15.5px; margin: 14px 0 26px; }
.notfound .pill { height: 42px; padding: 0 24px; font-size: 15px; }
.notfound .bubble { animation: nf-bob 4s ease-in-out infinite; }
@keyframes nf-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }

/* 약관·정책 문서 */
.doc { padding: 10px clamp(18px, 5vw, 64px) 48px; max-width: 820px; margin: 0 auto; font-size: 15.5px; line-height: 1.8; }
.doc-title { font-size: clamp(28px, 5vw, 38px); text-align: center; margin: 22px 0 6px; }
.doc-app { text-align: center; color: var(--ink-soft); font-size: 14px; margin-bottom: 26px; }
.note { background: #FFF7D6; border-radius: 14px; padding: 12px 16px; font-size: 14px; margin-bottom: 22px; }
/* 큰 제목 앞 막대: 아주 연한 파스텔 분홍 단색, 끝은 둥글게(2026-10-22 사용자 선택. 노랑 직선·연보라→노랑·진한 분홍은 별로였음) */
.doc h2 { position: relative; font-size: 18px; margin: 30px 0 8px; padding-left: 14px; line-height: 1.5; }
.doc h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 5px; border-radius: 3px; background: #FDE0EA; }
.doc h3 { font-size: 16px; margin: 22px 0 6px; }
.doc p { margin: 10px 0; }
.doc ul, .doc ol { margin: 8px 0 12px 1.3em; }
.doc li { margin: 4px 0; }
.doc a, .answer a { color: #7A5FC0; text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.doc hr { border: 0; border-top: 1.5px dashed var(--line); margin: 30px 0; }
.doc table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 14.5px; }
.doc th, .doc td { border: 1.5px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.doc th { background: #F7F4FB; }
.doc .generated { font-size: 13px; color: var(--ink-soft); }

footer { text-align: center; padding: 24px 16px 30px; border-top: 1.5px solid var(--line); font-size: 13px; color: var(--ink-soft); }
footer .moon-mini { font-size: 18px; display: block; margin-bottom: 6px; }
footer a { text-decoration: underline; text-underline-offset: 3px; }
/* 맨 아래 칸은 끌어서 글자가 잡히지 않게(링크는 그대로 눌림, 2026-10-22 사용자 요청).
   이메일만은 복사해 갈 수 있게 남긴다 */
footer { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
footer .biz-email { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
.biz { font-size: 10.5px; line-height: 1.7; color: var(--ink-soft); opacity: .6; max-width: 640px; margin: 0 auto; }
.biz b { font-weight: 400; margin-right: 2px; }
/* 좁은 화면에서 "통신판/매업"처럼 항목 중간이 끊기지 않게 항목째 다음 줄로 */
.biz span { display: inline-block; }
.biz .biz-address { display: inline; } /* 긴 주소만은 글자 단위로 자연스럽게 줄바꿈 */
.biz a { color: inherit; }
footer .copy { margin-top: 8px; font-size: 12.5px; }

@media (max-width: 720px) {
  body { padding-top: 28px; }
  .grid { grid-template-columns: 1fr; }
  .hero { padding-top: 40px; }
  .nav { gap: 22px; }
  .card { min-height: 0; }
  .titlebar .addr { display: none; }
  .titlebar .langs { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 창 위 작은 음악 플레이어(static/js/bgm.js, 곡 목록은 content/studio_content.py 의 BGM_TRACKS) */
/* 창 위 한 줄: 왼쪽 음악 플레이어, 오른쪽 방문자 수 */
.top-row { position: relative; z-index: 3; max-width: 980px; margin: -46px auto 12px; display: flex; align-items: center; gap: 10px; padding: 0 6px; min-height: 34px; }
.bgm-bar { position: relative; display: flex; align-items: center; gap: 10px; }
/* 방문자 수(visits.js): 테두리 없이 글자만(2026-10-20 사용자 결정). 숫자가 오기 전엔 숨김 */
.visits { margin: 0 0 0 auto; height: 34px; padding: 0 14px;
  font-family: var(--ui); font-size: 11.5px; line-height: 31px; letter-spacing: .06em; white-space: nowrap; color: #8E86A0; }
.visits b { font-weight: 400; color: #6E6680; margin-left: 2px; }
.visits i { font-style: normal; margin: 0 9px; color: #B9AFCF; }
/* 플레이어 맨 앞 웃는 별 스티커(build.py bgm_icon). 재생 중엔 노랗게 빛나며 흔들림 */
.bgm-icon { width: 24px; height: 24px; flex: none; }
.bgm-bar.playing .bgm-icon { filter: drop-shadow(0 0 6px rgba(255, 216, 107, .9)); animation: bgm-rock 2.4s ease-in-out infinite; }
@keyframes bgm-rock { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.bgm-pill { position: relative; display: flex; align-items: center; height: 34px; border-radius: 11px; border: 1.5px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(110, 90, 150, .10); }
.bgm-play, .bgm-more { height: 100%; border: 0; background: none; color: #6E6680; cursor: var(--cur-hand); display: grid; place-items: center; }
.bgm-play { width: 36px; }
.bgm-play, .bgm-more { flex: none; }  /* 휴대폰에서 칸이 좁아져도 버튼은 안 찌그러지게(줄어드는 건 제목 칸만) */
.bgm-play svg { width: 13px; height: 13px; fill: currentColor; }
.bgm-play .i-pause, .bgm-bar.playing .bgm-play .i-play { display: none; }
.bgm-bar.playing .bgm-play .i-pause { display: block; }
.bgm-more { width: 30px; font-size: 14px; letter-spacing: 1px; color: #7A7290; }
/* 곡 이름은 한글이라 영어·일본어 페이지에서도 단단체가 받게(그 페이지 글꼴엔 한글이 없음) */
.bgm-title { width: 132px; overflow: hidden; white-space: nowrap; font-family: "Funwari Round", "OkDanDan UI", var(--ui); font-size: 11.5px; color: #7A7290; letter-spacing: .02em;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.bgm-title span { display: inline-block; }
/* 곡 이름: 멈춰 있을 땐 가만히, 재생할 때만 흐른다(흐르면 "소리 나는 중"으로 읽혀서, 2026-10-21 사용자 결정).
   멈춤은 왼쪽 가장자리 흐림(10%)을 비켜 14px 띄운다 — 2px 로 붙였을 땐 앞 글자가 잘려 보였고 가운데는 어색해 되돌림.
   흐를 땐 창 오른쪽 밖(--box)에서 들어와 자기 너비만큼 왼쪽 밖으로 나간다(bgm.js fitMarquee) */
.bgm-title span { padding-left: 14px; }
.bgm-bar.playing .bgm-title span { padding: 0 2px; animation: bgm-marquee 9s linear infinite; }
@keyframes bgm-marquee { from { transform: translateX(var(--box, 132px)); } to { transform: translateX(-100%); } }
/* 목록 창은 플레이어 줄과 같은 폭으로 양쪽 끝을 맞춘다(2026-10-21). 휴대폰은 플레이어가 좁아서 최소 폭만큼 오른쪽으로 펼친다
   — 예전엔 폭 220 을 오른쪽 끝에 붙여서 휴대폰에서 왼쪽이 화면 밖으로 나갔다 */
/* 펼침 목록 모양: 플레이리스트와 관리실 문서 '크게 보기'의 앱·문서 고르기(admin-doc-editor.js)가 같이 쓴다(2026-10-21).
   목록 칸 = .pop-list, 한 줄 = .pop-item. 고른 줄: 연한 파스텔 핑크(소리 막대와 같은 계열), 글자는 읽히게 한 단계 진하게(2026-10-20 사용자 결정 ②+) */
.pop-list { padding: 8px; border-radius: 16px; background: #fff; border: 1.5px solid #fff; box-shadow: 0 10px 30px rgba(110, 90, 150, .18); }
.pop-item { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 10px;
  font-family: "Funwari Round", "OkDanDan UI", var(--ui); font-size: 12.5px; color: #5D566B; text-align: center; cursor: var(--cur-hand); }
.pop-item:hover, .pop-item:focus-visible { background: #F7F4FB; outline: none; }
.pop-item[aria-current="true"], .pop-item[aria-selected="true"] { background: #FFF0F5; color: #D97399; }
.bgm-list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 190px; z-index: 5; }
/* 맨 위 'PLAYLIST': 장식 없이 가운데에. 첫 곡 칸과는 16px(10px 땐 칸에 눌려 보였음, 2026-10-20 사용자 결정) */
.bgm-list p { display: flex; align-items: center; justify-content: center; min-height: 15px; margin: 2px 10px 10px; padding: 6px 0 4px;
  font-family: var(--ui); font-size: 11px; color: #A49CB5; letter-spacing: .04em; }
.bgm-list ul { list-style: none; margin: 0; padding: 0; }
/* 곡 이름은 가운데(위 PLAYLIST 제목과 줄 맞춤, 번호 없이, 2026-10-21 사용자 결정). 모양은 .pop-item, 오른쪽 소리 막대 자리만 */
.bgm-list li button { position: relative; }
/* 재생 막대는 칸 오른쪽 끝에 따로 떠 있어서 곡 이름이 밀리지 않는다 */
.bgm-list .eq { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; align-items: flex-end; height: 10px; }
.bgm-bar.playing .bgm-list [aria-current="true"] .eq { display: inline-flex; }
.bgm-list .eq i { width: 2.5px; background: #FF9DB0; border-radius: 2px; animation: bgm-eq .9s ease-in-out infinite; }
.bgm-list .eq i:nth-child(2) { animation-delay: .2s; }
.bgm-list .eq i:nth-child(3) { animation-delay: .4s; }
@keyframes bgm-eq { 0%, 100% { height: 3px; } 50% { height: 10px; } }
/* 소리 조절: 목록과의 점선은 뺌. 곡 사이 간격만큼만 떨어지고, 아래 여백은 PLAYLIST 위 여백과 같게(2026-10-20 사용자 결정) */
.bgm-vol { display: flex; align-items: center; gap: 8px; margin: 6px 10px 7px; padding-top: 3px; color: #A49CB5; font-size: 12px; }
/* 소리 크기 양옆 스피커(build.py 의 BGM_SPEAKER_SVG·BGM_SPEAKER_LOUD_SVG) */
.bgm-speaker { flex: none; width: 16px; height: 16px; color: #7A7290; }
/* min-width:0 — range 는 기본 폭(약 129px) 밑으로 안 줄어 목록 창을 좁히면 오른쪽 스피커가 밖으로 밀려남 */
.bgm-vol input { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: #EEE8F5; accent-color: #FF9DB0; }
.bgm-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #FF9DB0; }
.bgm-vol input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #FF9DB0; }
/* 휴대폰: 위 여백이 28px 라 플레이어가 잘리지 않게 */
@media (max-width: 720px) { .top-row { margin: -14px 0 10px; padding: 0 4px; } }
/* 휴대폰: 옆으로 놓으면 플레이어와 합쳐 화면을 넘쳐서, 두 줄로 쌓은 작은 계기판(숫자 칸 정렬, 2026-10-20 사용자 결정) */
@media (max-width: 720px) {
  .visits { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-content: center; align-items: baseline;
    padding: 0 10px; font-size: 9.5px; line-height: 13px; }
  .visits b { margin: 0; text-align: right; }
  .visits i { display: none; }
  /* 숫자가 커져도 넘치지 않게 플레이어 곡 제목 칸이 대신 줄어든다(최소 36px, 제목은 흘러가니 짧아도 읽힘) */
  .bgm-bar, .bgm-pill { min-width: 0; }
  /* width 132px 는 그대로 두고 줄어들 수만 있게. width:auto 로 두면 플레이어 폭이 곡 이름 길이를 따라가
     "솜사탕"처럼 짧은 곡은 방문자 칸이 없어도 칸이 쪼그라들었다(제목 흘러가기를 한 줄로 바꾼 뒤, 2026-10-21) */
  .bgm-title { flex: 0 1 auto; min-width: 36px; }
  .visits { flex: none; }
}
}
}
@media (prefers-reduced-motion: reduce) { .bgm-bar.playing .bgm-title span, .bgm-bar.playing .bgm-icon, .bgm-list .eq i { animation: none; } .bgm-bar.playing .bgm-title span { padding-left: 14px; } }