/* 호암 AI — 단일 CSS. 모바일 우선, 최소 요소 · 색은 성성모두 CI (보라 #DB2777 · 진보라 #1A1226 · 배경 #F7F6FB) */
:root {
  --p: #DB2777; --p-dark: #831843; --p-bg: #FDF0F6;
  --ink: #1A1226; --muted: #6B7280; --line: #E8E5F0; --bg: #F7F6FB;
  --ok: #059669; --warn: #B45309; --warn-bg: #FFFBEB; --err: #DC2626; --err-bg: #FEF2F2;
  --r: 14px;
  /* 표면 색 (다크 모드에서 바뀜) */
  --card: #fff; --soft: #FAFAFC; --soft2: #F1F0F5; --ok-bg: #ECFDF5; --track: #C9C4D8; --bubble: #FBEFF4; --top: #fff;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', sans-serif; color: var(--ink); background: var(--bg); line-height: 1.55; }
a { color: var(--p); }
h1 { font-size: 20px; margin: 0 0 10px; }
h2 { font-size: 16px; margin: 18px 0 8px; }
.wrap { max-width: 560px; margin: 0 auto; padding: 12px 14px 40px; }
.top { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); }
.brand { font-size: 18px; font-weight: 800; color: var(--ink); }
.brand b { color: var(--p); }
.top-link { font-size: 13px; text-decoration: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot { text-align: center; font-size: 11px; color: var(--muted); padding: 24px 12px calc(24px + env(safe-area-inset-bottom)); }

.card { background: var(--card); border: 1px solid var(--line); padding: 18px; margin: 12px 0; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.alert { background: var(--err-bg); color: var(--err); padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.notice { background: var(--p-bg); color: var(--p-dark); padding: 10px 12px; border-radius: 10px; font-size: 14px; }

.btn { display: inline-block; background: var(--p); color: #fff; border: 0; border-radius: 12px; padding: 12px 18px; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:disabled { opacity: .6; }
.btn.wide { width: 100%; margin-top: 8px; }
.btn.ghost { background: var(--card); color: var(--p); border: 1px dashed var(--p); }
.btn.small { padding: 8px 12px; font-size: 13px; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13px; padding: 6px; }
.link.danger { color: var(--err); }

.form label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 0; }
.form input:not([type=checkbox]):not([type=radio]):not([type=file]) { display: block; width: 100%; margin-top: 6px; padding: 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.form input:focus { outline: 2px solid var(--p-bg); border-color: var(--p); }
.form .check { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.form .check input[type=radio], .form .check input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--p); }

.pick-list { border: 1px solid var(--line); border-radius: 10px; max-height: 260px; overflow-y: auto; }
.pick-list li { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pick-list li:last-child { border-bottom: 0; }
.pick-list li small { display: block; color: var(--muted); font-size: 12px; }
.picked { font-size: 14px; color: var(--ok); margin: 6px 0 0; }

.menu3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.menu-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 6px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 14px; background: var(--card); }
.menu-btn .ic { font-size: 26px; }
.menu-btn small { font-weight: 400; color: var(--muted); font-size: 11px; }
.menu-btn.disabled { opacity: .45; pointer-events: none; }

.list { list-style: none; margin: 0; padding: 0; }
.list li a, .list.plain li { display: flex; justify-content: space-between; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--line); white-space: nowrap; }
.badge.s-done { background: var(--warn-bg); color: var(--warn); }
.badge.s-confirmed { background: var(--ok-bg); color: var(--ok); }

.drop { display: block; border: 2px dashed var(--line); border-radius: var(--r); padding: 22px; text-align: center; cursor: pointer; background: var(--card); }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop span { font-weight: 700; color: var(--p); }
.drop img { display: block; max-width: 100%; max-height: 320px; margin: 12px auto 0; border-radius: 10px; }

.review { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .wrap:has(.review) { max-width: 1100px; } .review { grid-template-columns: 1fr 1fr; } .review-photo { position: sticky; top: 72px; align-self: start; } }
.review-photo img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); }
.uncertain { background: var(--warn-bg); border: 1px solid #FCD34D; color: var(--warn); border-radius: var(--r); padding: 12px 14px; font-size: 14px; }
.uncertain ul { margin: 6px 0 0; padding-left: 18px; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px 12px; margin: 12px 0; background: var(--card); }
legend { font-weight: 800; font-size: 15px; padding: 0 6px; }
.row { border-bottom: 1px dashed var(--line); padding: 8px 0; display: grid; gap: 6px 8px; }
.row .mini { margin: 0; font-size: 11px; font-weight: 600; color: var(--muted); }
.row .mini input { margin-top: 2px; padding: 9px; font-size: 15px; }
.row .mini:first-child { grid-column: 1 / -1; }
.row .link.danger { grid-column: 1 / -1; justify-self: end; }

.spinner { width: 34px; height: 34px; margin: 6px auto 10px; border: 4px solid var(--p-bg); border-top-color: var(--p); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Phase 2 — 쿠폰 관리 */
.head-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.head-row h1 { margin: 0; }
.head-row .btn-pair { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }   /* [+ 일반 쿠폰][+ 팔로우 쿠폰] (2026-10-15) */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.from-ai { background: var(--p-bg); border-radius: var(--r); padding: 10px 12px; margin: 10px 0; }
.from-ai summary { font-weight: 700; color: var(--p-dark); cursor: pointer; }
.coupon-admin { list-style: none; padding: 0; margin: 12px 0; }
.coupon-admin li { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin-bottom: 8px; }
.ca-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.ca-actions { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; }
.ca-actions form { margin: 0; }

/* Phase 2 — 주민 쿠폰 목록 */
.search input { width: 100%; padding: 13px 14px; font-size: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-size: 14px; }
.tab small { color: var(--muted); }
.tab.on { background: var(--p); border-color: var(--p); color: #fff; }
.tab.on small { color: #FCE0EE; }
.tabs-sub { padding-top: 2px; }
.tabs-sub .tab { padding: 5px 10px; font-size: 13px; }
.coupons, .stores { list-style: none; margin: 8px 0; padding: 0; }
.coupon { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 12px 12px 14px; margin-bottom: 8px; }
.coupon-body { flex: 1; min-width: 0; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.c-store { font-size: 13px; color: var(--muted); }
.c-store small { color: #9CA3AF; }
.c-title { font-size: 16px; line-height: 1.35; }
.c-meta { font-size: 12px; color: var(--muted); }
.c-meta .hot { color: var(--err); font-weight: 700; }
.btn.qr { flex: 0 0 auto; padding: 10px 12px; font-size: 13px; }
.btn.qr.got { background: var(--line, #e5e7eb); color: var(--muted, #6b7280); border-color: transparent; box-shadow: none; }
.empty { text-align: center; padding: 30px 10px; }
.sec { margin-top: 22px; }
.stores li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; font-size: 14px; }
.coupon-detail h1 { margin-top: 4px; }
.kv { display: grid; grid-template-columns: 80px 1fr; gap: 6px 10px; font-size: 14px; margin: 14px 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
/* ── Phase 3: 카카오 로그인 · QR ── */
[hidden] { display: none !important; }
.btn.kakao { background: #FEE500; color: #191919; text-align: center; }
.btn.naver { background: #03C75A; color: #fff; text-align: center; }   /* 가게 로그인 — 네이버 초록 (2026-10-10) */
.list li a.dim { opacity: .55; }
.qr-card h1 { margin-top: 4px; }
.qr-box { background: var(--card); padding: 8px; margin: 10px auto; max-width: 300px; }
.qr-box svg { display: block; width: 100%; height: auto; }
.qr-help { font-size: 17px; font-weight: 800; margin: 6px 0 2px; }
.result { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; margin: 12px 0; border-radius: var(--r); text-align: center; }
.result .big { font-size: 64px; }
.result b { font-size: 24px; }
.result small { font-size: 15px; color: var(--ink); }
.result.ok { background: var(--ok-bg); color: var(--ok); }
.result.no { background: var(--err-bg); color: var(--err); }
/* 쿠폰 사용 완료 — 움직이는 시계·'n초 전 사용' (2026-11-05: 캡처한 화면을 다시 보여 주는 것과 구별) */
.used-live { margin: 6px 0 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.used-live.is-old { color: var(--err); }
.used-hint { margin: 2px 0 0; font-size: 13px; color: var(--ink); opacity: .8; }
.reader { width: 100%; max-width: 420px; margin: 8px auto; border-radius: var(--r); overflow: hidden; background: #111; min-height: 1px; }
.reader:empty { background: none; }
.reader video { display: block; width: 100%; }
.list.plain li small { white-space: nowrap; }
/* 메뉴: 긴 설명은 줄바꿈, 가격은 늘 오른쪽 한 줄 (2026-10-11 — 설명이 길면 가격이 화면 밖으로 밀렸음) */
.list.plain.menu-list li > span { min-width: 0; }
.list.plain.menu-list li small { white-space: normal; }
.list.plain.menu-list li > b { flex: none; white-space: nowrap; }
/* ── Phase 4: 대화형 검색 · 업체 목록 ── */
.pre { white-space: pre-line; }
.form select { display: block; width: 100%; margin-top: 6px; padding: 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
fieldset.kind { margin: 0 0 6px; }
.chat { padding-bottom: 96px; }
.hello { text-align: center; padding: 28px 4px 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0; }
.chip { border: 1px solid var(--line); border-radius: 99px; cursor: pointer; }
.chip:active { background: var(--p-bg); }
.hello-links { color: var(--muted); }
.clear-chat { display: block; margin: 0 0 0 auto; }
.chat-log { display: flex; flex-direction: column; }
.msg { max-width: 92%; }
.msg p { margin: 0; }
.msg.me { align-self: flex-end; }
.msg.bot { align-self: flex-start; width: 100%; }
.msg.typing p { color: var(--muted); }
.msg .cards { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.msg .route { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }
.more-link { display: inline-block; margin-top: 8px; font-size: 14px; }
.chat-input { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 8px; align-items: center; max-width: 560px; margin: 0 auto;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
.chat-input input { flex: 1; min-width: 0; font-size: 16px; border: 1px solid var(--line); }
.chat-input input:focus { outline: 2px solid var(--p-bg); border-color: var(--p); }
.chat-input .send, .chat-input .mic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; font-size: 20px; cursor: pointer; }
.chat-input .send { background: var(--p); color: #fff; font-weight: 800; }
.chat-input .send:disabled { opacity: .5; }
.chat-input .mic { border: 1px solid var(--line); }
.chat-input .mic.on { background: var(--err-bg); border-color: var(--err); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.quota { position: fixed; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 19; text-align: center; font-size: 11px; margin: 0; pointer-events: none; }
.quota a { pointer-events: auto; }
.store-cards { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.store-card { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); }
.sc-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 대표 사진이 있는 가게 카드 — 오른쪽에 작은 사진 (2026-10-11) */
.store-card.has-cover { display: grid; grid-template-columns: 1fr 64px; column-gap: 12px; row-gap: 3px; align-items: start; }
.store-card.has-cover > :not(.sc-thumb) { grid-column: 1; }
.sc-thumb { grid-column: 2; grid-row: 1 / span 3; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--line); }
.sc-top b { font-size: 15px; }
.sc-meta { font-size: 12px; color: var(--muted); }
.sc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-tags:empty { display: none; }
.tag { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--line); color: var(--ink); }
.tag.open { background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.tag.closed { background: var(--soft2); color: var(--muted); }
.tag.coupon { background: var(--p-bg); color: var(--p-dark); }
.tag.sig { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.like-row { margin-top: 6px; }
.aca-nudge { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0 0 10px; border: 1px solid var(--p); border-radius: 12px; background: var(--p-bg); color: var(--ink); text-decoration: none; font-size: 14px; }
.aca-demand { background: var(--p-bg); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.course-list { list-style: none; padding: 0; margin: 0 0 8px; }
.course-list li { border-bottom: 1px solid var(--line); padding: 10px 0; }
.course-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.course-tbl th, .course-tbl td { border-bottom: 1px solid var(--line); padding: 7px 4px; text-align: left; vertical-align: top; }
.course-tbl th { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.pos-list li { padding: 8px 0; }
.pop-ads .ad-banner { margin: 6px 0 4px; padding: 10px 12px; }
.pop-ads .ad-banner b { font-size: 14px; }
.pop-ads .ad-banner span { font-size: 12px; }
/* 접혀 있을 땐 배너를 숨기고, 펼치면 보임 (사용자 2026-10-12) — 펼칠 때 app.js 가 resize 를 보내 높이를 다시 맞춤 */
.pop-q.folded .pop-ads { display: none; }
.course-photo { border: 1px dashed var(--line); border-radius: 12px; padding: 4px 12px 8px; margin: 10px 0 14px; }
.course-photo .check span { display: block; }
.home-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.home-card { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; }
.hc-price { font-weight: 700; color: var(--p-dark); }
.hc-price.big { font-size: 20px; margin: 4px 0 8px; }
.deal-cmp { background: var(--p-bg); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.pre-line { white-space: pre-line; }
.homes-filter { margin-bottom: 6px; }
.demo-cat { display: flex; flex-wrap: wrap; align-items: end; gap: 6px; }
.demo-bar { border: 1px dashed var(--p); border-radius: 10px; padding: 6px 10px; margin: 0 0 10px; align-items: center; }
.crowd-img { display: block; max-width: 220px; max-height: 220px; border-radius: 8px; border: 1px solid var(--line); margin: 6px 0; }
.dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.dl-links { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 4px; margin: 4px 0 8px; }
.dl-links legend { padding: 0 4px; font-weight: 600; }
.coupon-mini { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--p-bg); text-decoration: none; color: var(--p-dark); }
.coupon-mini small { color: var(--muted); }
/* 가게 대표 사진 (2026-10-11) — 카드 위쪽 끝까지 꽉 차게 */
.sd-cover { display: block; width: calc(100% + 36px); max-width: none; margin: -18px -18px 14px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 15px 15px 0 0; background: var(--line); }
.cover-now { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--line); }
.cover-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.cover-pick { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.cover-pick button { display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; }
.cover-pick button:focus-visible, .cover-pick button:hover { border-color: var(--p); }
.cover-pick img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.store-detail h1 { margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd-open { margin: 0 0 6px; }
.map-links { display: flex; gap: 8px; flex-wrap: wrap; }
.head-row h1 small { font-size: 14px; font-weight: 400; }
/* ── Phase 5: 관리자 · 영업시간 입력 ── */
.menu4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; }
.hours-row { padding: 8px 12px 10px; }
.hours-row.is-off .hours-times { opacity: .4; }
.hours-times { display: grid; gap: 0 8px; }
.hours-times label { margin-top: 6px; font-size: 12px; }
.hours-times input { padding: 9px !important; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.stat small { color: var(--muted); font-size: 12px; }
.stat b { font-size: 22px; }
.stat span { font-size: 11px; color: var(--muted); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { border-collapse: collapse; font-size: 12px; width: 100%; white-space: nowrap; }
.tbl th, .tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.tbl th:first-child, .tbl td:first-child, .tbl td:nth-child(3) { text-align: left; }
.tbl th { color: var(--muted); font-weight: 600; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 520px) { .two-col { grid-template-columns: 1fr 1fr; } .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.rank { margin: 0; padding-left: 22px; font-size: 14px; }
.rank li span { display: inline-block; min-width: 60%; }
.rank li b { float: right; color: var(--muted); font-weight: 600; }
.inline-form { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.inline-form input { flex: 1; min-width: 0; padding: 8px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; }
.coupon-admin li form.confirm-submit { display: inline-block; margin-top: 6px; }
/* ── 사장님 화면: 왼쪽 업데이트 항목 메뉴 (모든 화면 너비에서 왼쪽) ── */
.wrap.wide { max-width: 1000px; }
.owner-layout { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; align-items: start; }
/* 좁은 화면: 아이콘 + 짧은 이름의 세로 메뉴 */
.owner-side { position: sticky; top: 60px; margin: 12px 0; border-radius: var(--r); padding: 6px 4px;
  max-height: calc(100vh - 72px); overflow-y: auto; scrollbar-width: none; }
.owner-side::-webkit-scrollbar { display: none; }
.side-title, .side-sep, .side-link .sl { display: none; }
.owner-side nav { display: flex; flex-direction: column; gap: 2px; }
.side-link { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; color: var(--ink); text-decoration: none; text-align: center; }
.side-link .si { font-size: 20px; line-height: 1; }
.side-link .ss { font-size: 10.5px; line-height: 1.2; word-break: keep-all; }
.side-link.on { font-weight: 700; }
.side-link.disabled { opacity: .4; pointer-events: none; }
/* 넓은 화면: 이름까지 보이는 사이드바 */
@media (min-width: 760px) {
  .owner-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .owner-side { top: 72px; }
  .side-title { display: block; font-weight: 800; margin: 2px 8px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-sep { display: block; font-size: 11px; color: var(--muted); margin: 12px 8px 4px; }
  .side-link { flex-direction: row; gap: 8px; text-align: left; font-size: 14px; }
  .side-link .si { font-size: 16px; }
  .side-link .sl { display: inline; }
  .side-link .ss { display: none; }
}
.autofill { background: var(--p-bg); color: var(--p-dark); border-radius: var(--r); padding: 12px 14px; font-size: 14px; margin: 12px 0; }
.autofill .btn { margin-left: 4px; vertical-align: middle; }
.checklist { list-style: none; margin: 8px 0; padding: 0; }
.checklist li a { display: flex; justify-content: space-between; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.checklist li b { font-size: 13px; color: var(--warn); font-weight: 600; white-space: nowrap; }
.checklist li.done b { color: var(--ok); }
.form textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; resize: vertical; }

/* ── 성성모두 CI 로고 · 단색 아이콘 (이모지 대신, lib/icons.js) ── */
.brand { display: inline-flex; align-items: center; }
.brand { gap: 8px; text-decoration: none; }
.brand img { display: block; }
.brand-name { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; stroke-width: 2; }
.top-link { display: inline-flex; align-items: center; gap: 4px; }
.result .big { display: block; line-height: 0; }
.result .big .ico { width: 64px; height: 64px; stroke-width: 1.8; vertical-align: 0; }
.side-link .si { display: inline-flex; }
.side-link .si .ico { width: 22px; height: 22px; vertical-align: 0; }
@media (min-width: 760px) { .side-link .si .ico { width: 18px; height: 18px; } }
.chat-input .send, .chat-input .mic { display: inline-flex; align-items: center; justify-content: center; }
.chat-input .send .ico, .chat-input .mic .ico { width: 22px; height: 22px; vertical-align: 0; }
.chat-input .send .ico { stroke-width: 2.6; }
.checklist .ico, .autofill .ico { color: var(--p); }
.tag .ico { width: 1em; height: 1em; vertical-align: -0.15em; }
.drop .ico { width: 22px; height: 22px; color: var(--p); vertical-align: -0.3em; }

/* ── 가입·로그인 안내 ── */
.top-cta { font-size: 13px; font-weight: 700; color: #fff; background: var(--p); padding: 7px 12px; border-radius: 99px; text-decoration: none; white-space: nowrap; }
.join-cta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 0; }
.join-cta .btn { display: inline-flex; align-items: center; gap: 6px; }
.join-cta p { flex-basis: 100%; margin: 2px 0 0; }
.join-box { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin: 12px 0; }
.join-box h2 { margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.join-box h2 .ico { color: var(--p); }
.join-list { margin: 6px 0 10px; padding-left: 18px; }
.chat-input .mic { color: var(--p); }

.row .mini textarea { display: block; width: 100%; margin-top: 2px; padding: 9px; font-size: 15px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; resize: vertical; }
.notice-list { padding-left: 18px; }
.notice-list li { margin-bottom: 12px; }

/* ── 배너 광고 ── */
.ad-banner { position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; margin: 10px 0 4px; padding: 14px 16px 14px;
  border-radius: var(--r); background: linear-gradient(135deg, #831843, #DB2777); color: #fff; text-decoration: none; }
.ad-banner b { font-size: 16px; line-height: 1.35; padding-right: 36px; }
.ad-banner span { font-size: 13px; opacity: .9; }
.ad-banner .ad-tag { position: absolute; top: 10px; right: 10px; font-size: 10.5px; padding: 1px 6px; border: 1px solid rgba(255,255,255,.7); border-radius: 4px; opacity: 1; }
.banner-offer { display: flex; flex-direction: column; gap: 4px; background: var(--p-bg); color: var(--p-dark); border-radius: var(--r); padding: 12px 14px; margin: 8px 0; }
.banner-offer > b { font-size: 18px; }
.inline-form input[type=date] { flex: 0 0 auto; }

/* ── 가게 이용권 상태 ── */
.plan-box { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin: 10px 0; font-size: 13px; background: var(--card); }
.plan-box b { font-size: 14px; }
.plan-box.paid { background: var(--ok-bg); border-color: #A7F3D0; }
.plan-box.paid b { color: var(--ok); }
.plan-box .up { color: var(--p-dark); }

.pay-form { display: inline-block; margin: 6px 6px 0 0; }
.badge.s-failed { background: var(--err-bg); color: var(--err); }

/* ── 쿠폰 사용 방법 ── */
.howto { background: var(--p-bg); border-radius: var(--r); padding: 10px 14px; margin: 10px 0 14px; font-size: 14px; text-align: left; }
.howto summary { font-weight: 800; color: var(--p-dark); cursor: pointer; }
.howto summary .ico { color: var(--p); }
.howto ol { margin: 8px 0 6px; padding-left: 20px; }
.howto ol li { margin-bottom: 6px; }
.howto ul { margin: 4px 0 2px; padding-left: 18px; }

/* ── 업체 상세 지도 ── */
.store-map { width: 100%; height: 240px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); margin: 10px 0 4px; background: var(--soft2); }
.map-note { margin: 0 0 6px; }

/* ── 쿠폰 번호 4자리 ── */
.coupon-pin { margin: 10px 0 0; }
.coupon-pin b { font-size: 28px; letter-spacing: .3em; color: var(--p); font-variant-numeric: tabular-nums; margin-left: 6px; }
.pin-entry { margin: 14px 0 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.pin-entry label { font-size: 14px; display: block; margin-bottom: 6px; }
.pin-entry input { letter-spacing: .4em; font-size: 20px; text-align: center; max-width: 150px; }
.result.ask { background: var(--p-bg); color: var(--p-dark); }
.result .btn + .btn { margin-top: 6px; }

/* ── 내 대화 기록 ── */
.msg .msg-at { display: block; font-size: 10.5px; opacity: .75; margin-top: 2px; text-align: right; }
.history-more { display: block; margin: 0 auto 10px; }

/* ── 업체 상세: 소개 · 이벤트·공지 ── */
.intro .tb-p:first-child { font-size: 15.5px; font-weight: 600; }
.tb-p { margin: 0 0 8px; }
.tb-list { margin: 4px 0 10px; padding-left: 0; list-style: none; }
.tb-list li { position: relative; padding: 3px 0 3px 14px; font-size: 14px; line-height: 1.5; }
.tb-list li::before { content: ''; position: absolute; left: 2px; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--p); }
.notice-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: var(--soft); }
.nc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.nc-tag { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--line); color: var(--ink); }
.nc-tag.event { background: var(--p-bg); color: var(--p-dark); }
.nc-tag.job { background: var(--ok-bg); color: var(--ok); }
.nc-title { font-size: 15px; flex-basis: 100%; line-height: 1.4; }
.nc-period { font-size: 12px; color: var(--muted); }
.nc-more summary { font-size: 13px; color: var(--p); cursor: pointer; margin: 2px 0 6px; }
.notice-card .tb-p { font-size: 14px; }

.greet { margin: 14px 0 0; font-size: 15px; }
.greet b { color: var(--p-dark); }
.greet .muted { display: block; font-size: 13px; }

/* ── 하단 사업자 정보 · 약관 문서 ── */
.foot { line-height: 1.6; }
.foot p { margin: 0 0 6px; }
.foot a { color: var(--muted); }
.foot-links a { text-decoration: none; }
.wrap:has(.chat) + .foot { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }   /* 첫 화면은 아래 입력창에 가리지 않게 */
.doc h1 { font-size: 22px; margin-top: 6px; }
.doc h2 { font-size: 16px; margin: 22px 0 6px; }
.doc p, .doc li { font-size: 14px; line-height: 1.65; }
.doc ol, .doc ul { padding-left: 20px; }
.doc-draft { background: var(--warn-bg); color: var(--warn); border: 1px solid #FCD34D; border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.doc-table { border-collapse: collapse; font-size: 13px; margin: 6px 0 10px; }
.doc-table th, .doc-table td { border: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
.doc-table thead th { background: var(--p-bg); color: var(--p-dark); }
.kv-table th { width: 32%; background: var(--soft); font-weight: 600; }

/* ── 대화 여러 개 ── */
.thread-bar { display: flex; gap: 8px; margin: 8px 0 0; }
.thread-panel { margin: 10px 0; }
.thread-list { list-style: none; margin: 6px 0; padding: 0; }
.thread-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.thread-open { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 9px 2px; text-decoration: none; color: var(--ink); }
.thread-open b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-threads { text-align: left; margin: 12px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; }
.recent-threads p { margin: 0 0 2px; }

/* ── 헤더: AI 남은 횟수 ── */
.top-right { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ai-badge { font-size: 12px; color: var(--p-dark); background: var(--p-bg); white-space: nowrap; }
.ai-badge b { color: var(--p); }

/* ── 사장님: 검색 상위 노출 강조 ── */
.rank-box { background: linear-gradient(135deg, #831843, #DB2777); color: #fff; border-radius: var(--r); padding: 14px 16px; margin: 12px 0; }
.rank-box .muted { color: #FCE0EE; }
.rank-lead { margin: 0 0 10px; font-size: 16px; }
.rank-lead .ico { color: #FDE68A; }
.rank-now { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 8px; }
.rank-now div { background: rgba(255,255,255,.12); border-radius: 10px; padding: 8px; text-align: center; display: flex; flex-direction: column; }
.rank-now b { font-size: 22px; line-height: 1.2; }
.rank-now small { font-size: 11px; opacity: .85; }
.rank-todo { list-style: none; margin: 6px 0; padding: 0; background: var(--card); border-radius: 10px; color: var(--ink); }
.rank-todo li { border-bottom: 1px solid var(--line); }
.rank-todo li:last-child { border-bottom: 0; }
.rank-todo li > a, .rank-todo li:not(:has(a)) { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: var(--ink); text-decoration: none; font-size: 14px; }
.rank-todo .rt-label { flex: 1; }
.rank-todo .rt-pts { color: var(--p); }
.rank-todo .rt-mark .ico { color: var(--err); }
.rank-todo li.done { opacity: .6; }
.rank-todo li.done .rt-mark .ico { color: var(--ok); }
.rank-todo li:not(.done) > a .rt-label { font-weight: 700; }
.rank-hint { font-size: 13px; margin: 12px 0 0; color: var(--p-dark); }
.rank-hint .ico { color: var(--p); }

/* ── 대화: 오른쪽 위 '새 대화', 왼쪽 '대화 목록' ── */
.chat-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 0 0; }
.greet-row { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 0; }
.greet-row .greet { margin: 0; min-width: 0; }
.greet-row .new-chat { flex: none; white-space: nowrap; }
@media (min-width: 1100px) { .chat-top:not(:has(.btn:not(.side-toggle))) { display: none; } }
.thread-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: 270px; max-width: 82vw; background: var(--card); border-right: 1px solid var(--line);
  padding: calc(14px + env(safe-area-inset-top)) 12px 16px; overflow-y: auto; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 4px 0 20px rgba(0,0,0,.08); }
.thread-side.open { transform: none; }
.side-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; }
.side-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.3); }
.thread-list li.on { background: var(--p-bg); border-radius: 8px; }
.thread-list li.on .thread-open b { color: var(--p-dark); }
.thread-list li { padding: 0 4px; }
.thread-list .empty-li { padding: 8px 2px; border: 0; }
/* 넓은 화면: 왼쪽에 항상 펼침 */
@media (min-width: 1100px) {
  .thread-side { top: 57px; transform: none; box-shadow: none; padding-top: 14px; }
  .side-toggle, .side-close { display: none; }
  .side-backdrop { display: none !important; }
}

/* ── 업그레이드 ── */
.up-btn { font-size: 12px; font-weight: 700; color: #fff; background: var(--p); border-radius: 99px; padding: 4px 10px; text-decoration: none; white-space: nowrap; }
.ai-badge { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; padding: 3px 9px; border-radius: 10px; }
.ai-badge .db-free { font-size: 10.5px; color: var(--muted); }
.plan-table th, .plan-table td { text-align: center; }
.plan-table tbody th { text-align: left; font-weight: 600; background: var(--soft); }
.plan-table .hl { background: var(--p-bg); color: var(--p-dark); font-weight: 700; }
.plan-table thead .hl { background: var(--p); color: #fff; }

/* ── 사장님: 메뉴 접기 · 업데이트/검색 탭 · 업데이트 대화창 ── */
.side-fold { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 4px 0 0; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer; }
.side-fold:hover { color: var(--p); border-color: var(--p); }
.side-fold .ico { width: 22px; height: 22px; }
.side-fold .when-hidden, .side-hidden .side-fold .when-shown { display: none; }
.side-hidden .side-fold .when-hidden { display: inline-block; }
.owner-layout.side-hidden { grid-template-columns: minmax(0, 1fr); }
.owner-layout.side-hidden .owner-side { display: none; }
.mode-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.mode-tab.on { border-color: var(--p); }
.photo-btn { cursor: pointer; }
.msg-photo { display: block; max-width: 220px; max-height: 260px; border-radius: 10px; }
.prop-sec { margin: 8px 0; }
.prop-sec b { font-size: 13px; color: var(--p-dark); }
.prop-sec ul { margin: 2px 0 0; padding-left: 18px; font-size: 14px; }
.prop-warn { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 6px 10px; font-size: 13px; margin: 8px 0; }
.prop-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.prop-actions .link { align-self: center; }
.prop-done { color: var(--ok); font-weight: 700; margin: 0; }
.shop-status { text-align: left; margin: 14px 0 0; }
.shop-status summary { font-weight: 700; color: var(--p-dark); cursor: pointer; }
.logout-form { margin-bottom: 90px; }

/* ── 좁은 화면 넘침 고침 (2026-10-06, 영업시간 칸이 상자 밖으로 나감) ──
   fieldset 은 기본 min-width: min-content 라 내용보다 좁아지지 않는다 / 아이폰 time 입력칸은 최소 폭이 크다 */
fieldset { min-width: 0; }
.hours-times { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hours-times label { min-width: 0; }
.hours-times input[type="time"] { width: 100%; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; text-align: left; }
.row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.row .mini, .form label, .owner-main, .card { min-width: 0; }
.form input, .form select, .form textarea { max-width: 100%; }
/* 가게 PIN · 쿠폰 사용 확인 화면 (v0.11.1) */
.store-pin { margin: 6px 0 8px; text-align: center; }
.store-pin b { font-size: 40px; letter-spacing: .35em; color: var(--p); font-variant-numeric: tabular-nums; padding-left: .35em; }
.pin-change summary { cursor: pointer; color: var(--p); font-size: 14px; margin: 6px 0; }
.redeem-form { display: flex; flex-direction: column; gap: 10px; text-align: left; margin: 12px 0; }
.redeem-form input[name=pin] { font-size: 32px; text-align: center; letter-spacing: .4em; padding: 10px; }
.big-btn { font-size: 18px; padding: 14px; }
/* 주민 헤더 [더보기] · 내 정보 (v0.12.0) */
.more-menu { position: relative; }
.more-menu > summary { list-style: none; cursor: pointer; color: var(--p); font-weight: 600; padding: 6px 2px; max-width: none; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu > summary .ico { width: 16px; height: 16px; transition: transform .15s; }
.more-menu[open] > summary .ico { transform: rotate(180deg); }
.more-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(26, 18, 38, .12); padding: 6px; display: flex; flex-direction: column; }
.more-pop a, .more-pop button { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; font-size: 15px;
  color: var(--ink); text-decoration: none; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.more-pop a:hover, .more-pop button:hover { background: var(--p-bg); }
.more-pop .ico { width: 18px; height: 18px; color: var(--p); }
.more-pop form { margin: 0; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.mm-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.mm-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 더보기 창이 화면 왼쪽으로 잘리던 것 (베타 의견 #11, 2026-10-11 — 가게 이름 + 프리미엄 + 레벨 배지 둘이 한 줄이라 창이 화면보다 넓어짐)
   → 창은 화면 안으로, 배지는 가게 이름 아래 줄로 */
.more-pop { max-width: calc(100vw - 24px); }
.mm-head { flex-wrap: wrap; justify-content: flex-start; row-gap: 6px; }
.mm-head b { flex: 1 1 100%; min-width: 0; }
.more-pop .mm-head button.badge.lv { display: inline-flex; width: auto; padding: 2px 10px; border-radius: 999px; font-size: 12px; }   /* .more-pop button(줄 전체 폭)이 배지까지 늘이지 않게 */
.tier { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--soft2); color: var(--muted); white-space: nowrap; }
.tier.premium { background: var(--p); color: #fff; }
.tier .ico { width: 13px; height: 13px; }
.me-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.me-name { font-size: 20px; }
.me .kv { grid-template-columns: 110px minmax(0, 1fr); }
/* 관리자 왼쪽 메뉴 (사장님 메뉴와 같은 모양) — 로그아웃 버튼 */
.side-form { margin: 0; }
.side-form .side-link { width: 100%; background: none; border: 0; font: inherit; cursor: pointer; }
/* 업종별 매장 현황 (성성모두 정보 탭과 같은 3단 펼침) */
.cat-tree { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.ct-main { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cat-tree summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cat-tree summary::-webkit-details-marker { display: none; }
.ct-main > summary { padding: 14px 14px; font-weight: 700; font-size: 16px; }
.ct-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--p-bg); color: var(--p); flex: none; }
.ct-icon .ico { width: 20px; height: 20px; }
.ct-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-n { font-size: 13px; font-weight: 600; color: var(--p-dark); background: var(--p-bg); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.ct-cp { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); font-weight: 500; }
.ct-cp .ico { width: 13px; height: 13px; }
.ct-arrow { display: inline-flex; color: var(--muted); transition: transform .15s; }
.ct-arrow .ico { width: 18px; height: 18px; }
.cat-tree details[open] > summary .ct-arrow { transform: rotate(90deg); }
.ct-main[open] > summary { border-bottom: 1px solid var(--line); background: var(--soft); }
.ct-subs { padding: 4px 0 8px; }
.ct-all { display: block; padding: 8px 16px 6px 60px; font-size: 13px; color: var(--p); text-decoration: none; }
.ct-sub > summary { padding: 11px 14px 11px 60px; font-size: 15px; }
.ct-sub > summary .ct-n { background: var(--soft2); color: var(--ink); font-weight: 500; }
.ct-sub[open] > summary { color: var(--p-dark); font-weight: 600; }
.ct-leaves { list-style: none; margin: 0 12px 6px 60px; padding: 4px 0; border-left: 2px solid var(--p-bg); }
.ct-leaves a { display: flex; align-items: center; gap: 8px; padding: 8px 4px 8px 12px; font-size: 14px; color: var(--ink); text-decoration: none; }
.ct-leaves a > span:first-child { flex: 1; min-width: 0; }
.ct-leaves .ct-n { background: none; color: var(--muted); padding: 0; font-weight: 400; }
.ct-go { font-size: 12px; color: #fff; background: var(--p); border-radius: 8px; padding: 3px 9px; }
.ct-leaves a:hover { background: var(--p-bg); border-radius: 8px; }
.crumbs { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.crumbs a { color: var(--p); text-decoration: none; }
@media (max-width: 380px) { .ct-sub > summary, .ct-all { padding-left: 16px; } .ct-leaves { margin-left: 16px; } }
/* 호암지구 소식 */
.news-mini { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.news-mini b { font-size: 15px; }
.news-mini p { margin: 2px 0; font-size: 14px; }
.news-mini a { font-size: 13px; color: var(--p); text-decoration: none; }
.news-list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.news-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.news-item p { margin: 0; font-size: 14px; }
.news-item.old { opacity: .65; }
.news-meta { display: flex; align-items: center; gap: 6px; }
/* 사실 바로잡기 */
.fix { margin-top: 6px; }
.fix-link { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 12px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.fix-link:hover { color: var(--p); }
.fix-form { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.fix-form textarea { width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; resize: vertical; }
.fix-actions { display: flex; gap: 10px; align-items: center; }
.fix-done { color: var(--ok); }
/* 관리자 경계 미리보기 */
.boundary-map { width: 100%; height: 70vh; min-height: 420px; border-radius: var(--r); border: 1px solid var(--line); margin: 10px 0; }
.bmark { display: inline-block; background: var(--card); border: 2px solid var(--p); color: var(--ink); font-size: 11px; padding: 1px 5px; border-radius: 8px; white-space: nowrap; }
.bmark.warn { border-color: #E8590C; color: #E8590C; font-weight: 700; }
.bmark.out { border-color: #9CA3AF; color: #6B7280; }
.lg-cur { color: #DB2777; } .lg-prop { color: #E8590C; }
/* 첫 화면 대화: 위(인사·대화 목록·배너)는 고정, 아래 칸 안에서만 대화가 쌓이고 위로 밀려 올라감 */
body.chat-app { overflow: hidden; }
.chat.app { position: fixed; z-index: 5; background: var(--bg); left: 0; right: 0; top: var(--top-h, 57px); bottom: 0; max-width: 560px; margin: 0 auto; padding: 0 14px;
  display: flex; flex-direction: column; }
.chat.app > .chat-head, .chat.app > .history-more, .chat.app > .clear-chat { flex: none; }
.chat.app > .chat-head { padding-top: 4px; padding-bottom: 8px; background: var(--bg); }
.chat.app > .chat-head .ad-banner { margin: 8px 0 0; }
.chat.app > .chat-head .greet-row, .chat.app > .chat-head > .greet { margin-top: 8px; }
.chat.app > .chat-log { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 10px 0 calc(96px + env(safe-area-inset-bottom)); }
.wrap:has(.chat.app) ~ .foot { display: none; }
.foot.foot-inline { padding: 16px 0 0; border-top: 1px solid var(--line); }
@media (min-width: 1100px) { .chat.app:has(.thread-side) { left: 270px; } }
/* 답 글자 써 내려가기 */
.type-wait { display: none !important; }
.type-show { animation: typeShow .35s ease both; }
@keyframes typeShow { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.typing-now::after { content: '▍'; color: var(--p); animation: caret 1s steps(1) infinite; margin-left: 1px; }
@keyframes caret { 50% { opacity: 0; } }
/* 검색 방식 토글 — 끄면 DB 검색, 켜면 AI 검색 (입력창 위) */
.chat-input { flex-wrap: wrap; }
.mode-switch { flex: 0 0 100%; display: flex; gap: 10px; justify-content: center; align-items: center; margin-bottom: 2px; font-size: 13px; }
.ms-label { color: var(--muted); cursor: pointer; user-select: none; }
.ms-label small { font-size: 11px; opacity: .85; }
.mode-switch:not(.on) .ms-db, .mode-switch.on .ms-ai { color: var(--p); font-weight: 700; }
.ms-toggle { position: relative; width: 46px; height: 26px; border-radius: 99px; border: 0; padding: 0; cursor: pointer; background: var(--track); transition: background .2s; }
.ms-toggle .ms-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.ms-toggle[aria-checked="true"] { background: linear-gradient(135deg, #DB2777, #F472B6); }
.ms-toggle[aria-checked="true"] .ms-knob { transform: translateX(20px); }
.ms-toggle:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
/* 팔로우 · 알림 */
.bell { position: relative; display: inline-flex; align-items: center; color: var(--p); padding: 4px; }
.bell .ico { width: 22px; height: 22px; }
.bell-n { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--err); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.mm-n { background: var(--err); color: #fff; border-radius: 99px; font-size: 11px; padding: 0 6px; margin-left: auto; }
.follow-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 2px; }
.follow-row form { margin: 0; }
.follow-row .btn .ico { width: 16px; height: 16px; vertical-align: -3px; }
.follow-row .btn.following { color: var(--p); border-color: var(--p); }
.follower-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--p-dark); background: var(--p-bg); border-radius: 99px; padding: 2px 9px; margin-left: 6px; vertical-align: 2px; }
.follower-chip .ico { width: 14px; height: 14px; }
.follow-hint { display: block; }
.push-box .btn { margin: 6px 0; }
.badge.new { background: var(--err); color: #fff; }
/* 인사 줄 오른쪽: [대화 목록] [새 대화] */
.greet-btns { display: flex; gap: 6px; flex: none; }
.greet-btns .btn { white-space: nowrap; }
@media (max-width: 380px) { .greet-btns .btn { padding-left: 9px; padding-right: 9px; } }
/* 소식 분류: 옆으로 밀지 않고 줄 바꿔 전부 보이게 */
.tabs.tabs-wrap { flex-wrap: wrap; overflow: visible; gap: 6px; }
.tabs.tabs-wrap .tab { flex: none; padding: 6px 12px; font-size: 14px; }

/* 프리미엄 대화 다 참 — 지울 대화 고르기 */
.pick-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.pick-list .btn { width: 100%; text-align: left; justify-content: flex-start; }

/* 주민 헤더 — 좁은 휴대폰에서 '호암AI'가 세로로 접히고 종이 잘리던 문제 (2026-10-07) */
.brand { flex-shrink: 0; }
.brand-name { white-space: nowrap; }
/* 로고 이름 아래 동네 이름 (regions areaDongs — 사용자 2026-10-12) */
.brand-text { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.brand-area { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.top { gap: 8px; }
.user-badge { text-decoration: none; }
.user-badge .db-free b { color: var(--p-dark); font-weight: 700; }
@media (max-width: 430px) {
  .top { padding-left: 12px; padding-right: 12px; }
  .top-right { gap: 6px; }
  .ai-badge { padding: 3px 8px; }
}

/* ── 다크 모드 (사용자 요청 2026-10-07: Claude 앱처럼 깔끔하게 · 다크가 눈에 잘 보임) ──
   기본은 휴대폰 설정을 따른다(auto). [더보기 → 화면] 또는 아래쪽 '화면 모드'로 밝게·어둡게 고정 — 쿠키 ssai_theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p: #EC6FA8; --p-dark: #F9CDE2; --p-bg: #4A2236;
    --ink: #F2F0EA; --muted: #A5A29A; --line: #3C3B37; --bg: #262624;
    --ok: #34D399; --ok-bg: #133229; --warn: #FBBF24; --warn-bg: #3A3014; --err: #F87171; --err-bg: #3D2020;
    --card: #30302E; --soft: #2C2B29; --soft2: #393835; --track: #4A4945; --bubble: #3A3936; --top: #262624;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --p: #EC6FA8; --p-dark: #F9CDE2; --p-bg: #4A2236;
  --ink: #F2F0EA; --muted: #A5A29A; --line: #3C3B37; --bg: #262624;
  --ok: #34D399; --ok-bg: #133229; --warn: #FBBF24; --warn-bg: #3A3014; --err: #F87171; --err-bg: #3D2020;
  --card: #30302E; --soft: #2C2B29; --soft2: #393835; --track: #4A4945; --bubble: #3A3936; --top: #262624;
  color-scheme: dark;
}
.top { background: var(--top); }
input, select, textarea { background: var(--card); color: var(--ink); border-color: var(--line); }

/* 대화 — Claude 앱처럼: 내 말은 은은한 말풍선, 답은 바탕 위에 글로 */
.msg.me { background: var(--bubble); color: var(--ink); border-radius: 18px 18px 6px 18px; padding: 10px 15px; }
.msg.me .msg-at { color: var(--muted); }
.msg.bot { background: transparent; border: 0; border-radius: 0; padding: 4px 2px 6px; font-size: 15.5px; line-height: 1.7; }
.msg.bot .cards > :not([class*="cd-bg-"]) { background: var(--card); }   /* 사장님 카드 배경(cd-bg-*)이 있으면 덮지 않음 (2026-10-21) */
.chat-log { gap: 18px; }
.chat-input { border-top: 0; background: var(--bg); }
.chat-input input { border-radius: 26px; padding: 14px 18px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.chat-input .mic { background: var(--card); }
.hello h1 { letter-spacing: -0.02em; }
.chat.app > .chat-head { border-bottom-color: var(--line); }

/* 화면 모드 고르기 */
.theme-pick { display: flex; gap: 4px; padding: 6px 10px 8px; }
.theme-pick button { flex: 1; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; padding: 6px 0; font-size: 12.5px; cursor: pointer; }
.theme-pick button.on { border-color: var(--p); color: var(--p); font-weight: 700; }
.theme-pick-label { font-size: 12px; color: var(--muted); padding: 6px 12px 0; }
.foot .theme-pick { justify-content: center; max-width: 260px; margin: 6px auto 0; }

/* 로고: 밝은 화면은 원래 심볼(흰 바탕), 어두운 화면은 투명 바탕 밝은 심볼 */
.brand .logo-dark { display: none; }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-light { display: none; }
  :root:not([data-theme="light"]) .brand .logo-dark { display: block; }
}

/* ── Claude 앱처럼 단순하게 (사용자 요청 2026-10-07) ── */
/* 헤더: 로고 · 알림 · 더보기만 — AI 남은 횟수는 입력칸의 [AI ○회]와 '내 정보'에 */
.user-badge { display: none !important; }
.top { border-bottom: 0; }
/* 인사 줄: [≡ 대화 목록]  ○○님, 안녕하세요  [새 대화] — 아이콘 버튼 */
.greet-row { gap: 6px; }
.greet-row .greet { flex: 1; text-align: center; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.icon-btn:hover, .icon-btn:active { background: var(--soft2); }
.icon-btn .ico { width: 22px; height: 22px; }
@media (min-width: 1100px) { .greet-row .side-toggle { visibility: hidden; } }
.chat.app > .chat-head { border-bottom: 0; }
.chat.app > .chat-head .ad-banner { padding: 11px 14px; }
/* 첫 화면: 큰 인사 + 예시는 조용하게 */
.hello { padding-top: 36px; }
.hello h1 { font-size: 24px; font-weight: 700; }
.chip { border-color: var(--line); background: transparent; font-size: 13.5px; padding: 8px 13px; color: var(--ink); }
/* 입력칸: 둥근 상자 하나 — 위에 글, 아래 줄에 [DB | AI ○회] · 마이크 · 보내기 */
.chat-input.composer { display: block; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 0; }
.composer-box { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 10px 10px 8px 14px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.composer-box:focus-within { border-color: var(--p); }
.chat-input.composer input { display: block; width: 100%; border: 0; outline: 0; background: transparent; padding: 4px 2px 8px; font-size: 16px; box-shadow: none; border-radius: 0; color: var(--ink); }
.chat-input.composer input:focus { outline: 0; }
.composer-row { display: flex; align-items: center; gap: 6px; }
.composer-gap { flex: 1; }
.mode-switch.seg { flex: none; display: inline-flex; gap: 0; margin: 0; padding: 2px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); }
.mode-switch.seg .ms-label { border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--muted); padding: 5px 12px; border-radius: 99px; cursor: pointer; font-weight: 600; }
.mode-switch.seg .ms-label small { font-size: 11.5px; font-weight: 500; opacity: .85; }
.mode-switch.seg:not(.on) .ms-db, .mode-switch.seg.on .ms-ai { background: var(--p-bg); color: var(--p); }
.chat-input.composer .mic { width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); }
.chat-input.composer .send { width: 36px; height: 36px; }
.chat-input.composer .send .ico, .chat-input.composer .mic .ico { width: 20px; height: 20px; }
.chat.app > .chat-log { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }

/* 사업자 정보 — 한 줄로 접기 */
.biz-fold > summary { list-style: none; cursor: pointer; }
.biz-fold > summary::-webkit-details-marker { display: none; }
.biz-open { text-decoration: underline; }
.biz-fold[open] .biz-open { font-weight: 700; }
.biz-detail { margin-top: 8px; }
.biz-detail p { margin: 0 0 6px; }
.foot.foot-inline { margin-top: 20px; padding-top: 12px; }

/* 도움말 — 오른쪽에서 밀려 나오는 예시 질문 */
.help-open { margin: 14px auto 0; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 99px; padding: 8px 14px; font: inherit; font-size: 13.5px; cursor: pointer; }
.help-open .ico { width: 16px; height: 16px; }
.help-side { position: fixed; top: 0; bottom: 0; right: 0; z-index: 40; width: 300px; max-width: 86vw; background: var(--card); border-left: 1px solid var(--line);
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto;
  transform: translateX(100%); transition: transform .22s ease, visibility .22s; visibility: hidden; text-align: left; }
.help-side.open { transform: none; visibility: visible; box-shadow: -4px 0 20px rgba(0,0,0,.12); }
#helpBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.3); }
.help-side .side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.help-side .side-head b { display: inline-flex; align-items: center; gap: 6px; }
.help-side .side-head b .ico { width: 18px; height: 18px; color: var(--p); }
.help-cap { margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.help-side .chips { justify-content: flex-start; gap: 6px; margin: 0; }
.help-links { list-style: none; margin: 0; padding: 0; }
.help-links a { display: flex; align-items: center; gap: 8px; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; }
.help-links .ico { width: 18px; height: 18px; color: var(--p); }
#helpBackdrop { z-index: 39; }

.composer-row .help-btn { width: 34px; height: 34px; color: var(--p); border: 1px solid var(--line); }
.composer-row .help-btn .ico { width: 18px; height: 18px; }

/* ── 가게·관리자 화면도 같은 느낌으로 (2026-10-07) ──
   휴대폰: 아이콘 줄 대신 [≡] 버튼 → 왼쪽에서 밀려 나오는 메뉴 · 넓은 화면: 테두리 없는 사이드바 */
.side-menu-btn { display: none; margin-right: 2px; }
.owner-side { border: 0; background: transparent; box-shadow: none; }
.side-link { border-radius: 10px; }
.side-link.on { background: var(--soft2); color: var(--ink); }
.side-link.on .ico { color: var(--p); }
.side-link:hover { background: var(--soft2); }
#ownerBackdrop { z-index: 49; }
@media (max-width: 759px) {
  .side-menu-btn { display: inline-flex; }
  .top.has-side { justify-content: flex-start; gap: 4px; }
  .top.has-side .top-right, .top.has-side > .top-link { margin-left: auto; }
  .owner-layout { grid-template-columns: minmax(0, 1fr); }
  .owner-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: 260px; max-width: 82vw; margin: 0; border-radius: 0;
    background: var(--card); border-right: 1px solid var(--line); padding: calc(16px + env(safe-area-inset-top)) 10px 20px; overflow-y: auto;
    transform: translateX(-100%); transition: transform .2s ease; visibility: hidden; max-height: none; height: auto; }
  .owner-side.open { transform: none; visibility: visible; box-shadow: 4px 0 20px rgba(0,0,0,.18); }
  .owner-side .side-title { display: block; font-weight: 800; margin: 2px 8px 10px; }
  .owner-side .side-sep { display: block; font-size: 11px; color: var(--muted); }
  .owner-side .side-link { flex-direction: row; gap: 10px; text-align: left; }
  .owner-side .side-link .sl { display: inline; }
  .owner-side .side-link .ss { display: none; }
  .owner-side .side-link .si .ico { width: 20px; height: 20px; }
  .side-fold { display: none; }
}
@media (min-width: 760px) {
  .owner-side { padding: 8px 4px; }
  .owner-layout { gap: 28px; }
}
.card { border-radius: 16px; }

/* CI (2026-10-07 사용자 선택 13번): 궤도(2시 방향 열림 + 위성 점) + 고딕 ^^ — img/mark.svg · mark-dark.svg · mark-app.svg */
.brand img { width: 32px; height: 32px; }
.brand-name b { background: linear-gradient(90deg, #DB2777, #22D3EE); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 가게 첫 화면 단순하게 · 휴대폰 메뉴가 '접기' 기억에 막히지 않게 (2026-10-07) */
@media (max-width: 759px) { .owner-layout.side-hidden .owner-side { display: block; } }
.owner-greet .greet { min-width: 0; }
.mode-tabs { display: flex; width: fit-content; margin: 12px auto 4px; gap: 0; padding: 2px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); }
.mode-tab { flex: none; border: 0; background: transparent; color: var(--muted); border-radius: 99px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; }
.mode-tab .ico { width: 16px; height: 16px; }
.mode-tab.on { background: var(--p-bg); color: var(--p); border: 0; }
.shop-status-in .checklist, .shop-status-in .list { margin-top: 6px; }
.help-side h2 { font-size: 14px; margin: 14px 0 6px; }

.mm-quota { margin: 0 0 4px; padding: 0 12px 8px; font-size: 12.5px; color: var(--ink); border-bottom: 1px solid var(--line); }
.mm-quota b { color: var(--p); }



/* 탈퇴 */
.withdraw-list { padding-left: 18px; margin: 10px 0 16px; line-height: 1.7; font-size: 14px; }
.danger-btn { background: var(--err); }
.more-pop a.mm-small { font-size: 12px; color: var(--muted); justify-content: flex-end; padding: 6px 12px; }

/* [더보기] 안 화면 모드 버튼 — 메뉴 버튼 규칙(왼쪽 정렬·넓은 여백)을 덮어 가운데로 */
.more-pop .theme-pick button { flex: 1; width: auto; display: flex; align-items: center; justify-content: center; text-align: center; padding: 7px 0; gap: 0; border: 1px solid var(--line); border-radius: 8px; }
.more-pop .theme-pick button.on { border-color: var(--p); color: var(--p); }

/* 약관·처리방침 위쪽 [닫기] */
.doc-close-bar { position: sticky; top: calc(var(--top-h, 57px) + 4px); z-index: 5; display: flex; justify-content: flex-end; margin: 8px 0 -4px; }
.doc-close { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 7px 14px; font: inherit; font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.doc-close .ico { width: 16px; height: 16px; }

/* 약관·처리방침 표 — 휴대폰에서 첫 칸이 한 글자씩 세로로 깨지던 것: 한글은 낱말 단위로 줄바꿈, 첫 칸 최소 너비 */
.doc-table { width: 100%; table-layout: auto; }
.doc-table th, .doc-table td { word-break: keep-all; overflow-wrap: break-word; }
.doc-table tr > :first-child { min-width: 5.5em; }
@media (max-width: 560px) {
  .doc-table { font-size: 13px; }
  .doc-table th, .doc-table td { padding: 6px 6px; }
  .doc-table tr > :nth-child(2) { min-width: 5em; }
}
.pre-wrap { white-space: pre-wrap; }
.src-line { margin-top: 4px; }

/* 배너 플립 — 5초마다 다음 배너로 뒤집기 */
.ad-flip { position: relative; perspective: 900px; }
.chat.app > .chat-head .ad-flip { margin: 8px 0 0; }
.chat.app > .chat-head .ad-flip .ad-banner { margin: 0; }
.ad-flip .ad-banner { backface-visibility: hidden; transform-origin: 50% 50%; }
.ad-flip.rotating .ad-banner { transition: transform .6s ease, opacity .6s ease; }
/* 위로 플립: 지금 배너는 위로 굴러 올라가고, 다음 배너가 아래에서 굴러 올라온다 */
.ad-flip.rotating .ad-banner:not(.on) { position: absolute; inset: 0; transform: translateY(50%) rotateX(-90deg); opacity: 0; pointer-events: none; }
.ad-flip.rotating .ad-banner.out { transform: translateY(-50%) rotateX(90deg); opacity: 0; }
.ad-banner.house { background: linear-gradient(135deg, #0E7490, #DB2777 60%, #EC6FA8); }
@media (prefers-reduced-motion: reduce) { .ad-flip.rotating .ad-banner { transition: opacity .3s; transform: none !important; } }
/* 배너 글이 줄바꿈되며 깨지지 않게 — 한 줄로, 넘치면 … */
.ad-flip .ad-banner b, .ad-flip .ad-banner > span:not(.ad-tag) { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; }
.ad-flip .ad-banner b { padding-right: 52px; }

/* 업그레이드 버튼 — 주민·가게 모두 더보기 옆 (2026-10-07: 결제 유도) */
.top-up { display: inline-flex; align-items: center; padding: 5px 11px; font-size: 12.5px; }
.top.has-side .ai-badge { display: none; }
/* 프리미엄 가게 안내 */
.pm-tag { font-size: 10px; font-weight: 700; color: var(--p); background: var(--p-bg); border-radius: 99px; padding: 1px 6px; margin-left: 4px; vertical-align: 1px; }
.side-up { color: var(--p); font-weight: 700; }
.premium-card .pm-eyebrow { display: inline-flex; align-items: center; gap: 4px; color: var(--p); font-weight: 700; font-size: 13px; margin: 0 0 6px; }
.premium-card .pm-eyebrow .ico { width: 16px; height: 16px; }
.pm-list { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; }
.pm-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.pm-list .ico { flex: none; width: 20px; height: 20px; color: var(--p); margin-top: 1px; }
.pm-price { font-size: 18px; margin: 14px 0 10px; }
.btn.danger-text { color: var(--err); border-color: var(--err); }
.err-text { color: var(--err); font-size: 13px; }
.doc-table tr.warn-row td { background: color-mix(in srgb, var(--err) 8%, transparent); }
.places-map { height: 260px; }
.news-item.flash { outline: 2px solid var(--p); outline-offset: 2px; transition: outline-color .3s; }
.msg .in-link { color: var(--p); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.cam-list { display: grid; gap: 6px; margin-top: 8px; }
.cam-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.cam-row small { white-space: nowrap; }
.cam-box { margin: 2px 0 6px; }
.cam-video { width: 100%; max-height: 260px; border-radius: 10px; background: #000; display: block; }
.cam-note { display: block; margin-top: 4px; }
.help-acc { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 6px; background: var(--card); }
.help-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; font-size: 14px; font-weight: 600; }
.help-acc > summary::-webkit-details-marker { display: none; }
.help-acc > summary small { margin-left: auto; margin-right: 8px; color: var(--muted); font-weight: 500; }
.help-acc > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; margin-top: -4px; }
.help-acc[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.help-acc > .chips { padding: 0 10px 12px; }
.map-wrap { margin-top: 8px; }
.map-btn { display: inline-flex; align-items: center; gap: 4px; }
.map-btn .ico { width: 16px; height: 16px; }
.chat-map { margin-top: 8px; height: 260px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.map-pin { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #DB2777; color: #fff; font: 700 13px/1 sans-serif; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.map-legend { margin: 6px 0 0; padding-left: 22px; font-size: 13px; }
.map-legend a { color: var(--ink); }
.detail-top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: flex-end; padding: 6px 0; background: var(--bg); }
.detail-top .close-doc { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.detail-top .close-doc .ico { width: 16px; height: 16px; }
/* 대화 위 가게 시트 */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--bg); animation: sheet-up .18s ease-out; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-bar { display: flex; justify-content: flex-end; align-items: center; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--card); }
.sheet-close { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 8px 14px; font-size: 14px; cursor: pointer; }
.sheet-close .ico { width: 16px; height: 16px; }
.sheet-frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
body.sheet-open { overflow: hidden; }
/* 시트 안(iframe)에서는 머리·바닥·자체 닫기 숨김 */
body.embed > header.top, body.embed footer.foot, body.embed .detail-top, body.embed .back-ask { display: none !important; }
body.embed main.wrap { padding-top: 8px; }
/* 배너 손가락으로 넘기기 — 이전(아래로 쓸기)은 위에서 내려오고 지금 것은 아래로 */
.ad-flip.rotating { touch-action: pan-x; }
.ad-flip.rotating .ad-banner.from-top { transition: none; transform: translateY(-50%) rotateX(90deg); opacity: 0; }
.ad-flip.rotating .ad-banner.out-down { transform: translateY(50%) rotateX(-90deg); opacity: 0; }
/* 답 기다리는 중 — 점 세 개 통통 · 글 반짝임 · 단계 바뀔 때 살짝 올라옴 */
.msg.wait p { display: inline-flex; align-items: center; gap: 10px; }
.wait-dots { display: inline-flex; gap: 4px; }
.wait-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--p); opacity: .35; animation: wait-bounce 1.1s ease-in-out infinite; }
.wait-dots i:nth-child(2) { animation-delay: .15s; }
.wait-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes wait-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-6px); opacity: 1; } }
.wait-text { background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--p) 50%, var(--muted) 60%, var(--muted) 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: wait-shine 1.8s linear infinite; }
.wait-text.swap { animation: wait-shine 1.8s linear infinite, wait-in .35s ease-out; }
@keyframes wait-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes wait-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wait-ai .wait-dots i { background: linear-gradient(135deg, #DB2777, #22D3EE); }
@media (prefers-reduced-motion: reduce) { .wait-dots i, .wait-text, .wait-text.swap { animation: none; opacity: 1; color: var(--muted); background: none; } }
.thread-list li > .link { font-size: 12px; white-space: nowrap; padding: 6px 2px; }

/* 자판이 열리면(--kb, app.js) 입력칸·대화 칸을 자판 위로 — 아이폰은 자판이 화면을 덮기만 해서 (2026-10-08) */
body.chat-app .chat-input { bottom: var(--kb, 0px); }
body.chat-app .chat.app { bottom: var(--kb, 0px); }
body.chat-app .quota { bottom: calc(66px + env(safe-area-inset-bottom) + var(--kb, 0px)); }

/* 답 아래 다음 질문 버튼 (2026-10-09) */
.next-asks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.next-asks .chip { font-size: 13px; padding: 7px 12px; }

/* 카드가 하나씩 나타남 (2026-10-09) */
.card-wait { opacity: 0; transform: translateY(6px); }
.card-show { animation: typeShow .32s ease both; }
@media (prefers-reduced-motion: reduce) { .card-wait { opacity: 1; transform: none; } }

/* 관리자 목록(동네 소식·바로잡기) — 긴 출처 줄이 줄바꿈 안 돼 버튼이 카드 밖으로 밀리던 것 (2026-10-09) */
.admin-rows li { align-items: flex-start; }
.admin-rows li > span { flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.list.plain.admin-rows li small { white-space: normal; }
.admin-rows li > form { flex: none; }
.admin-rows li > form .btn { white-space: nowrap; }
.list.admin-rows li a.link { display: inline; padding: 0; border: 0; font-size: inherit; color: var(--p); }

/* 첫 화면 스플래시 — 마스코트 비서 (2026-10-09). 한 세션에 한 번, splash-gate.js 가 본 적 있으면 숨김 */
.splash { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; transition: opacity .45s ease; }
.splash-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; animation: typeShow .5s ease both; }
.splash-brand img { width: 60px; height: 60px; }
.splash-brand .brand-name { font-size: 38px; }
.splash-brand .brand-area { font-size: 15px; max-width: 70vw; margin-top: 2px; }   /* 스플래시·잠금 화면 동네 이름 (2026-10-12) */
.splash-ttori img { width: min(44vw, 200px); height: auto; animation: splashPop .7s .2s cubic-bezier(.2, .9, .3, 1.2) both; }
.splash p { margin: 0; font-size: 15px; color: var(--muted); letter-spacing: -.2px; animation: typeShow .5s .5s ease both; }
.splash p b { color: var(--ink); font-weight: 800; }
.splash-collab { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.splash-collab .splash-ttori img { width: min(62vw, 280px); }
.splash-collab p { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.splash-collab p b { font-size: 18px; letter-spacing: -.3px; }
.splash-collab p span { font-size: 13px; color: var(--muted); letter-spacing: .2px; }
.splash-collab .ad-tag { display: inline-block; font-size: 10.5px; padding: 0 5px; margin-right: 4px; border: 1px solid var(--line); border-radius: 4px; vertical-align: 1px; }
.splash.splash-out { opacity: 0; pointer-events: none; }
html.splash-seen .splash { display: none; }
@keyframes splashPop { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .splash img, .splash p, .splash-brand { animation: none; } }
/* 네이버 지도 안의 확대 버튼·로고가 더보기 메뉴 위로 올라오던 것 — 지도 안 겹침 순서를 지도 상자 안에 가둔다 (2026-10-09) */
.store-map, .places-map, .chat-map, #bannerMap { position: relative; z-index: 0; isolation: isolate; }

/* 대화창 전구 버튼만 형광으로 — 사진(카메라) 버튼은 같은 크기 클래스를 쓰지만 제외 (2026-10-09 사용자 요청): 밝은 화면은 빨간빛, 어두운 화면은 노란빛 */
.composer-row .help-btn[data-help-open] { color: #FF1F4B; border-color: rgba(255, 31, 75, .55); box-shadow: 0 0 6px rgba(255, 31, 75, .45), inset 0 0 4px rgba(255, 31, 75, .18); animation: bulbGlowRed 2.4s ease-in-out infinite; }
.composer-row .help-btn[data-help-open] .ico { filter: drop-shadow(0 0 3px rgba(255, 31, 75, .9)); }
@keyframes bulbGlowRed { 50% { box-shadow: 0 0 12px rgba(255, 31, 75, .7), inset 0 0 6px rgba(255, 31, 75, .25); } }
:root[data-theme="dark"] .composer-row .help-btn[data-help-open] { color: #FFE81A; border-color: rgba(255, 232, 26, .55); box-shadow: 0 0 6px rgba(255, 232, 26, .45), inset 0 0 4px rgba(255, 232, 26, .15); animation-name: bulbGlowYellow; }
:root[data-theme="dark"] .composer-row .help-btn[data-help-open] .ico { filter: drop-shadow(0 0 3px rgba(255, 232, 26, .9)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .composer-row .help-btn[data-help-open] { color: #FFE81A; border-color: rgba(255, 232, 26, .55); box-shadow: 0 0 6px rgba(255, 232, 26, .45), inset 0 0 4px rgba(255, 232, 26, .15); animation-name: bulbGlowYellow; }
  :root:not([data-theme="light"]) .composer-row .help-btn[data-help-open] .ico { filter: drop-shadow(0 0 3px rgba(255, 232, 26, .9)); }
}
@keyframes bulbGlowYellow { 50% { box-shadow: 0 0 12px rgba(255, 232, 26, .75), inset 0 0 6px rgba(255, 232, 26, .22); } }
@media (prefers-reduced-motion: reduce) { .composer-row .help-btn[data-help-open] { animation: none; } }

/* 앱·홈 화면 호암AI: 두 번 눌러 확대·벌려 확대 막기 (지도 안은 지도가 직접 확대) (2026-10-09) */
html.no-zoom, html.no-zoom body { touch-action: pan-x pan-y; }
html.no-zoom .chat-map, html.no-zoom .store-map, html.no-zoom .places-map, html.no-zoom #bannerMap { touch-action: none; }

/* 관리자 경계 그리기 (2026-10-09) */
.be-card { max-width: 1100px; }
.be-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 10px 0; }
.be-search { display: flex; gap: 6px; flex: 1 1 260px; }
.be-search input { flex: 1; min-width: 0; }
.be-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.be-found { list-style: none; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); max-height: 180px; overflow: auto; font-size: 13.5px; }
.be-found li { padding: 4px 0; }
.be-map { height: 68vh; min-height: 380px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); position: relative; z-index: 0; isolation: isolate; }
.be-v { background: #DB2777; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; color: #fff; font: 700 10px/1 sans-serif; cursor: grab; }
.be-v.sel { background: #FF1F4B; transform: scale(1.25); }
.be-mid { background: #fff; border: 2px solid #DB2777; border-radius: 50%; opacity: .7; cursor: copy; }
.be-save { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: space-between; margin-top: 10px; }
.be-save label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 240px; }

/* 답 평가 [도움됐어요 / 아니에요] (2026-10-10) */
.answer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.answer-tools .fix { margin: 0; }
.fb { display: inline-flex; gap: 6px; align-items: center; }
.fb-btn { font: inherit; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.fb-btn:hover { color: var(--p); border-color: var(--p); }
.fb-btn:disabled { opacity: .5; cursor: default; }
.fb-done { color: var(--muted); }

/* 영업시간 알려 주기 (가게 화면, 2026-10-10) */
.hours-slot { margin: 10px 0 4px; }
.hours-slot > p { margin: 0 0 6px; }
.hours-form { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.hours-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 4px 6px; }
.hours-row b { grid-column: 1 / -1; font-size: 14px; }
.hours-row input[type=time] { width: 100%; min-width: 0; }
.hours-row input[type=time] { font: inherit; font-size: 14px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit; }
.hours-row input[type=time]:disabled { opacity: .4; }
.hours-off { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--muted); }
.hours-form input[type=text] { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit; }

/* 관리자 결제 막기/열기 (2026-10-10) */
.pay-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-acts .btn { flex: 1 1 140px; }
.badge.beta-badge { background: var(--p-bg); color: var(--p-dark); font-weight: 600; }
/* 베타테스터 의견 (2026-10-10) */
.fb-kinds { border: 0; padding: 0; margin: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.fb-kinds legend { padding: 0; margin-bottom: 8px; }
.form .fb-kinds .check { margin: 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: 99px; align-items: center; font-size: 14px; cursor: pointer; }
.form .fb-kinds .check input { margin: 0; }
.form .fb-kinds .check:has(input:checked) { border-color: var(--p); background: var(--p-bg); color: var(--p-dark); font-weight: 600; }
.fb-body { white-space: pre-wrap; word-break: break-word; margin: 6px 0; }
.fb-img { display: block; max-width: 100%; max-height: 240px; border-radius: 8px; border: 1px solid var(--line); margin: 6px 0; }
.fb-reply { background: var(--p-bg); color: var(--p-dark); padding: 8px 10px; border-radius: 10px; font-size: 14px; white-space: pre-wrap; margin: 6px 0 0; }
.fb-admin textarea { min-height: 60px; }
.fb-chat .msg.me .fb-body { color: #fff; }
.fb-chat .fb-time { display: block; margin-top: 4px; font-size: 11px; opacity: .75; text-align: right; }
.fb-chat .msg.me .fb-img { border-color: rgba(255,255,255,.4); }
.chat-input.composer textarea { display: block; width: 100%; border: 0; outline: 0; background: transparent; padding: 4px 2px 8px; font: inherit; font-size: 16px; color: var(--ink); resize: none; max-height: 160px; }
.fb-file { white-space: nowrap; }
.fb-title { display: flex; align-items: center; gap: 8px; font-size: 22px; margin: 4px 0 14px; }
.fb-title .ico { width: 24px; height: 24px; color: var(--p); }
.fb-title .badge { font-size: 13px; }
.fb-attach { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--p); border-radius: 99px; color: var(--p); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fb-attach .ico { width: 18px; height: 18px; }
.fb-file { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 45%; font-size: 13px; color: var(--muted); }
.fb-file[hidden] { display: none; }
.fb-file > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-file-x { flex: none; border: 0; background: transparent; color: var(--muted); padding: 4px; cursor: pointer; }
.fb-file-x .ico { width: 16px; height: 16px; }
.fb-file-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: inherit; text-decoration: underline; word-break: break-all; }
.fb-file-link .ico { flex: none; width: 18px; height: 18px; }
.side-fb { margin-bottom: 6px; }
/* 사이트 잠금 화면 (2026-10-10) */
.gate { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 16px; text-align: center; }
.gate .splash-brand { margin-bottom: 4px; }
.gate-ttori img { width: min(40vw, 180px); height: auto; }
.gate-msg { margin: 0; font-size: 16px; color: var(--muted); }
.gate-form { display: flex; gap: 8px; width: 100%; max-width: 320px; }
.gate-form input { flex: 1; min-width: 0; padding: 13px 14px; font-size: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.gate-form input:focus { outline: 2px solid var(--p-bg); border-color: var(--p); }
.gate-form .btn { flex: none; }
.gate-err { width: 100%; max-width: 320px; }
/* 초보 가이드 (2026-10-11) */
.guide-steps { margin: 12px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.guide-cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.guide-q { border-top: 1px solid var(--line); }
.guide-q summary { cursor: pointer; padding: 13px 2px; font-weight: 600; list-style: none; }
.guide-q summary::-webkit-details-marker { display: none; }
.guide-q summary::after { content: '+'; float: right; color: var(--muted); font-weight: 400; }
.guide-q[open] summary::after { content: '−'; }
.guide-a { padding: 0 2px 14px; color: var(--ink); }
.guide-a p { margin: 0 0 6px; }
/* AI 활용 레벨 (2026-10-11) */
.badge.lv { font-weight: 700; }
.badge.lv-beginner { background: var(--line); color: var(--ink); }
.badge.lv-intermediate { background: rgba(34, 211, 238, .18); color: #0E7490; }
.badge.lv-advanced { background: var(--p-bg); color: var(--p-dark); }
.lv-chip b.lv-advanced { color: var(--p); }
.lv-chip b.lv-intermediate { color: #0891B2; }
.lv-steps { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.lv-steps li { text-align: center; font-size: 11px; line-height: 1.3; color: var(--muted); }
.lv-steps li::before { content: ''; display: block; height: 6px; border-radius: 99px; background: var(--line); margin-bottom: 4px; }
.lv-steps li.done::before { background: var(--p-bg); }
.lv-steps li.now::before { background: var(--p); }
.lv-steps li.now { color: var(--ink); font-weight: 700; }
.lv-now, .lv-next { margin: 0 0 4px; }
.lv-box { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.lv-box summary { cursor: pointer; font-size: 14px; }
.lv-box[open] summary { margin-bottom: 8px; }
button.badge.lv { cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
button.badge.lv:hover { filter: brightness(.95); }
.mm-head .badge.lv { margin-left: 6px; }
.lv-dialog { border: 0; border-radius: 16px; padding: 16px; width: min(92vw, 420px); max-height: 85vh; overflow: auto; background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.lv-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.lv-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 17px; }
.lv-table { margin: 10px 0; }
.lv-table tr.lv-me td { background: var(--p-bg); }
.lv-box { font-size: 14px; }

/* 레벨 두 가지 (가게 레벨 + 사장님 레벨, 2026-10-11) */
.lv-line { margin: 2px 0; }
.lv-sec + .lv-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.lv-sec-h { font-size: 15px; margin: 0 0 6px; }
.mm-head .badge.lv + .badge.lv { margin-left: 4px; }

/* 레벨 배지 = 대화창 전구와 같은 강조색 (사용자 2026-10-11): 밝은 화면 빨간빛, 어두운 화면 노란빛 — 단계와 상관없이 같은 색 */
.badge.lv, button.badge.lv { background: rgba(255, 31, 75, .08); color: #E0103A; border: 1px solid rgba(255, 31, 75, .55); box-shadow: 0 0 6px rgba(255, 31, 75, .35); }
:root[data-theme="dark"] .badge.lv, :root[data-theme="dark"] button.badge.lv { background: rgba(255, 232, 26, .08); color: #FFE81A; border-color: rgba(255, 232, 26, .55); box-shadow: 0 0 6px rgba(255, 232, 26, .35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge.lv, :root:not([data-theme="light"]) button.badge.lv { background: rgba(255, 232, 26, .08); color: #FFE81A; border-color: rgba(255, 232, 26, .55); box-shadow: 0 0 6px rgba(255, 232, 26, .35); }
}
button.badge.lv { padding: 1px 9px; }

/* 가운데 [이렇게 물어보세요]·도움말 머리의 전구도 대화창 전구와 같은 색 (사용자 2026-10-11) */
.help-open .ico, #helpSide .side-head b .ico { color: #FF1F4B; filter: drop-shadow(0 0 2px rgba(255, 31, 75, .6)); }
:root[data-theme="dark"] .help-open .ico, :root[data-theme="dark"] #helpSide .side-head b .ico { color: #FFE81A; filter: drop-shadow(0 0 2px rgba(255, 232, 26, .6)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .help-open .ico, :root:not([data-theme="light"]) #helpSide .side-head b .ico { color: #FFE81A; filter: drop-shadow(0 0 2px rgba(255, 232, 26, .6)); }
}

/* 실시간 인기 질문 (시작 화면, 2026-10-11) */
.pop-q { max-width: 440px; margin: 18px auto 0; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.pop-live { width: 8px; height: 8px; border-radius: 50%; background: #FF1F4B; box-shadow: 0 0 6px rgba(255, 31, 75, .7); animation: popLive 1.6s ease-in-out infinite; }
@keyframes popLive { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pop-live { animation: none; } }
.pop-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 10px; }
.pop-item { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; padding: 7px 2px; cursor: pointer; border-radius: 8px; }
.pop-item:hover { background: var(--line); }
.pop-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pop-n { flex: none; width: 18px; text-align: center; color: var(--p); font-size: 13px; }
.pop-list li:nth-child(-n+3) .pop-n { color: #FF1F4B; }
:root[data-theme="dark"] .pop-list li:nth-child(-n+3) .pop-n { color: #FFE81A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pop-list li:nth-child(-n+3) .pop-n { color: #FFE81A; } }
@media (max-width: 380px) { .pop-list { grid-template-rows: none; grid-auto-flow: row; } }

/* 인기 질문 접기·펴기 + 접혔을 때 한 줄씩 올라가기 (2026-10-11) */
.pop-q { padding: 6px 10px; }
.pop-h { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; padding: 4px 2px; cursor: pointer; text-align: left; }
.pop-title { flex: none; font-size: 13.5px; }
.pop-when { flex: none; font-size: 12px; font-weight: 400; display: none; }
.pop-chev { flex: none; margin-left: auto; display: inline-flex; color: var(--muted); transition: transform .2s; }
.pop-q:not(.folded) .pop-chev { transform: rotate(180deg); }
.pop-q:not(.folded) .pop-when { display: inline; margin-left: auto; }
.pop-q:not(.folded) .pop-chev { margin-left: 0; }
.pop-tick { flex: 1; min-width: 0; height: 1.5em; line-height: 1.5em; overflow: hidden; position: relative; }
.pop-q:not(.folded) .pop-tick { display: none; }
.pop-tick-in { display: flex; flex-direction: column; transition: transform .45s ease; will-change: transform; }
.pop-tick-in.no-anim { transition: none; }
.pop-tick-row { display: block; height: 1.5em; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.pop-tick-row .pop-n { display: inline-block; width: auto; margin-right: 6px; }
.pop-q:not(.folded) .pop-list { margin: 4px 0 4px; }
@media (prefers-reduced-motion: reduce) { .pop-tick-in { transition: none; } }

/* ── 내 대화 목록 다시 디자인 (2026-10-11) — 머리 · [새 대화] · 날짜 묶음 · [⋯] 메뉴 · 아래 보관 안내 ── */
.thread-side { display: flex; flex-direction: column; padding-left: 10px; padding-right: 10px; }
.ts-head { display: flex; align-items: center; gap: 6px; padding: 2px 4px 10px; }
.ts-head b { font-size: 16px; }
.ts-count { font-size: 12px; }
.ts-head .side-close { margin-left: auto; width: 34px; height: 34px; }
.ts-new { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--soft, transparent); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ts-new:hover { border-color: var(--p); color: var(--p); }
.ts-new .ico { width: 17px; height: 17px; }
.ts-body { flex: 1; min-height: 0; overflow-y: auto; margin: 6px -2px 0; padding: 0 2px; }
.ts-group { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.ts-body .thread-list { margin: 0; }
.ts-body .thread-list li { position: relative; display: flex; align-items: center; gap: 2px; border: 0; border-radius: 10px; padding: 0 2px 0 0; }
.ts-body .thread-list li:hover { background: var(--line); }
.ts-body .thread-list li.on { background: var(--p-bg); }
.ts-body .thread-list li.on .ts-title { color: var(--p-dark); font-weight: 700; }
.ts-title { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-sub { font-size: 11.5px; color: var(--muted); }
.ts-more { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; opacity: .75; }
.ts-more:hover, .ts-more[aria-expanded="true"] { background: var(--card); color: var(--ink); opacity: 1; }
@media (hover: hover) { .ts-body .thread-list li:not(:hover):not(.on) .ts-more:not([aria-expanded="true"]) { opacity: 0; } .ts-body .thread-list li:focus-within .ts-more { opacity: .75; } }
.ts-menu { position: absolute; right: 4px; top: calc(100% - 4px); z-index: 5; min-width: 140px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 4px; display: flex; flex-direction: column; }
.ts-menu button { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.ts-menu button:hover { background: var(--line); }
.ts-menu button.danger { color: var(--err); }
.ts-menu .ico { width: 16px; height: 16px; }
.ts-empty { text-align: center; padding: 36px 10px; color: var(--muted); }
.ts-empty .ico { width: 30px; height: 30px; opacity: .5; }
.ts-empty p { margin: 8px 0 2px; color: var(--ink); font-weight: 600; }
.ts-foot { border-top: 1px solid var(--line); margin-top: 8px; padding: 10px 6px 0; display: flex; flex-direction: column; gap: 4px; }
.ts-foot p { margin: 0; }
.ts-up { font-size: 13px; color: var(--p); text-decoration: none; font-weight: 600; }
.ts-clear { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; padding: 6px 0; cursor: pointer; }
.ts-clear:hover { color: var(--err); }
.ts-clear .ico { width: 14px; height: 14px; }

/* 자체 홍보 배너 — 구인·행사 글 (services/ai/promo.js, 2026-10-11 호암AI 크루 모집) */
.ad-banner.promo { background: linear-gradient(135deg, #0F766E, #0E7490 45%, #DB2777); }
.pop-promo { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; margin: 6px 0 4px; padding: 9px 12px;
  border-radius: 12px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #0F766E, #0E7490 45%, #DB2777); }
.pop-promo .pp-tag { grid-row: 1 / 3; font-size: 10.5px; padding: 2px 6px; border: 1px solid rgba(255,255,255,.75); border-radius: 4px; }
.pop-promo b { font-size: 14px; line-height: 1.3; }
.pop-promo .pp-sub { grid-column: 2; font-size: 12px; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pop-promo .pp-go { grid-column: 3; grid-row: 1 / 3; font-size: 20px; opacity: .85; }

/* 가게 레벨은 초록, 개인 레벨(AI 활용·사장님)은 전구와 같은 강조색 (사용자 2026-10-11) */
.badge.lv.lv-k-owner, button.badge.lv.lv-k-owner { background: rgba(16, 185, 129, .1); color: #047857; border-color: rgba(16, 185, 129, .6); box-shadow: 0 0 6px rgba(16, 185, 129, .35); }
:root[data-theme="dark"] .badge.lv.lv-k-owner, :root[data-theme="dark"] button.badge.lv.lv-k-owner { background: rgba(52, 211, 153, .1); color: #34D399; border-color: rgba(52, 211, 153, .6); box-shadow: 0 0 6px rgba(52, 211, 153, .35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge.lv.lv-k-owner, :root:not([data-theme="light"]) button.badge.lv.lv-k-owner { background: rgba(52, 211, 153, .1); color: #34D399; border-color: rgba(52, 211, 153, .6); box-shadow: 0 0 6px rgba(52, 211, 153, .35); }
}
/* 인기 질문 아래 홍보 배너는 펼쳤을 때만 (사용자 2026-10-11) */
.pop-q.folded .pop-promo { display: none; }

/* 배너 앞쪽 사진 (2026-10-11) — 첫 화면 배너·인기 질문 배너·신청 미리보기 */
.ad-banner.has-img { flex-direction: row; align-items: center; gap: 12px; }
.ad-banner .ad-img { flex: none; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; }
.ad-banner .ad-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-banner .ad-img.ci { background: none; }   /* 사진 없는 배너는 CI 앱 아이콘(mark-app.svg) (2026-10-11) */
.ad-banner .ad-img.ci img { object-fit: contain; }
.ad-banner .ad-img-ph { font-size: 11px; opacity: .8; }
.ad-banner .ad-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ad-banner .ad-txt b { padding-right: 36px; }
.pop-promo.paid { background: linear-gradient(135deg, #DB2777, #EC6FA8); }
.pop-promo.has-img { grid-template-columns: auto 1fr auto; }
.pop-promo .pp-img { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.bn-places { display: grid; gap: 8px; }
.bn-place { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.bn-place input { grid-row: 1 / 4; }
.bn-place:has(input:checked) { border-color: var(--p); background: var(--p-bg); }
.ban-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; margin: 4px 0; }

/* 호암AI 크루 (2026-10-11) */
.crew-eye { margin: 0; font-size: 11px; letter-spacing: .2em; color: var(--p); font-weight: 700; }
.crew h1 { margin: 2px 0 6px; }
.crew-lead { margin: 0 0 12px; color: var(--ink); }
.crew-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
.crew-grid div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.crew-grid b { display: inline-flex; align-items: center; gap: 6px; color: var(--p-dark); }
.crew-grid span { font-size: 13px; color: var(--muted); }
@media (max-width: 420px) { .crew-grid { grid-template-columns: 1fr; } }
.crew-facts { font-size: 14px; }
.crew-facts b { display: inline-block; min-width: 42px; color: var(--p-dark); }
.crew-how { border: 0; padding: 0; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.crew-how legend { font-weight: 600; margin-bottom: 4px; }
.crew-state { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 10px 0; }
.crew-state.on { border-color: var(--ok); color: var(--ok); }
.crew-photos { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.crew-photos li { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.crew-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--line); }
.crew-photos .badge { align-self: flex-start; }
.crew-reward { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.crew-reward > b { display: inline-flex; align-items: center; gap: 6px; color: var(--p-dark); }
.crew-reward ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; }

/* 방금 들어온 기사 (자동 수집, 2026-10-11) */
.live-news { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 10px 0 14px; background: var(--card); }
.live-news h2 { font-size: 15px; margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.live-news h2 small { font-weight: 400; font-size: 12px; margin-left: auto; }
.live-news ul { list-style: none; margin: 0; padding: 0; }
.live-news li a { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 8px 2px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.live-news li:first-child a { border-top: 0; }
.live-news .ln-area { grid-row: 1 / 3; align-self: start; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--p-bg); color: var(--p-dark); white-space: nowrap; }
.live-news b { font-size: 14px; font-weight: 600; }
.live-news small { font-size: 12px; }
.ln-count { display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 99px; background: #FF1F4B; color: #fff; vertical-align: 1px; }
.ln-more { margin: 0 0 6px 2px; font-size: 13px; }
.ln-more summary { cursor: pointer; color: var(--muted); }
.ln-more ul { list-style: none; padding: 0 0 0 10px; margin: 4px 0; }
.ln-more li a { display: block; border: 0; padding: 4px 0; grid-template-columns: none; }

/* 실시간 소식 칸 (시작 화면, 2026-10-11) — 인기 질문 칸과 같은 모양, 점은 하늘색 */
.pop-q + .pop-q { margin-top: 8px; }
.pop-live.news { background: #22D3EE; box-shadow: 0 0 6px rgba(34, 211, 238, .7); }
.live-q .pop-list { grid-template-rows: none; grid-auto-flow: row; }
.live-q .pop-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; text-decoration: none; }
.live-q .pop-item span:not(.ln-area) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.live-q .ln-area { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--p-bg); color: var(--p-dark); white-space: nowrap; }
.live-q .pop-tick-row .pop-n { font-size: 11px; color: #fff; background: #FF1F4B; border-radius: 99px; }
.pop-more { display: none; font-size: 13px; color: var(--p); text-decoration: none; padding: 4px 2px 6px; }
.pop-q:not(.folded) .pop-more { display: block; }

/* 실시간 두 칸을 나란히 (사용자 2026-10-11 '두 줄이 아니라 두 칸') — 접혀 있으면 반씩: 위 제목 · 아래 한 줄씩 올라가는 글.
   펼친 칸은 한 줄 전체를 씀 */
.rt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 440px; margin: 18px auto 0; text-align: left; }
.rt-grid .pop-q { margin: 0; max-width: none; min-width: 0; padding: 6px 8px; }
.rt-grid .pop-q + .pop-q { margin-top: 0; }
.rt-grid .pop-q.folded .pop-h { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 2px; align-items: center; }
.rt-grid .pop-q.folded .pop-live { grid-column: 1; grid-row: 1; }
.rt-grid .pop-q.folded .pop-title { grid-column: 2; grid-row: 1; font-size: 13px; }
.rt-grid .pop-q.folded .pop-chev { grid-column: 3; grid-row: 1; margin-left: 0; }
.rt-grid .pop-q.folded .pop-tick { grid-column: 1 / -1; grid-row: 2; }
.rt-grid .pop-q.folded .pop-tick-row { font-size: 12.5px; }
.rt-grid .pop-q:not(.folded) { grid-column: 1 / -1; }
@media (max-width: 300px) { .rt-grid { grid-template-columns: 1fr; } }
/* 한 칸만 있을 때(실시간 인기 질문이 아직 없을 때 등) — 남은 칸이 가로 전체를 쓰고 접힌 머리는 한 줄로 (2026-10-12) */
/* 짝이 없는 칸은 한 줄로 길게 (2026-10-13 네 칸: 질문·소식 / 모임·날씨) */
.rt-grid:has(> #popQ[hidden]) #liveQ, .rt-grid:has(> #liveQ[hidden]) #popQ, .rt-grid:has(> #grpQ[hidden]) .wx-q, .rt-grid:not(:has(> .wx-q)) #grpQ { grid-column: 1 / -1; }
.rt-grid:has(> #popQ[hidden]) #liveQ.folded .pop-h, .rt-grid:has(> #liveQ[hidden]) #popQ.folded .pop-h, .rt-grid:not(:has(> .wx-q)) #grpQ.folded .pop-h { display: flex; }

/* 관리자 가게 사진 검증 (2026-10-12) */
.verify-thumb { display: block; max-width: 160px; height: auto; border-radius: 10px; margin: 8px 0; border: 1px solid var(--line, #e5e5e5); }
.verify-up { margin-top: 12px; }
.verify-up input[type=file] { display: block; margin-top: 6px; }
.sign-one { border-top: 1px solid var(--line, #e5e5e5); padding-top: 10px; margin-top: 10px; }
.sign-one > p { margin: 0 0 6px; }
/* 주민 모임 (2026-10-13, 10-13 다시 — 심플하게) */
.grp-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.grp-intro { margin: 10px 0 0; font-size: 15px; line-height: 1.55; }
.grp-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.grp-cta .btn { display: inline-flex; align-items: center; gap: 6px; }
.grp-cats { display: flex; gap: 6px; overflow-x: auto; margin: 16px -16px 10px; padding: 0 16px; scrollbar-width: none; }
.grp-cats::-webkit-scrollbar { display: none; }
.grp-cats a { flex: none; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line); font-size: 14px; color: var(--ink); text-decoration: none; }
.grp-cats a.on { background: var(--p); border-color: var(--p); color: #fff; font-weight: 600; }
.grp-search { display: flex; gap: 6px; margin: 0 0 6px; }
.grp-search input { flex: 1; min-width: 0; padding: 11px 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; }
.grp-search .btn { display: inline-flex; align-items: center; padding: 0 14px; }
.grp-list { list-style: none; margin: 4px 0; padding: 0; }
.grp-list li { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.grp-list li > a { flex: 1; min-width: 0; display: flex; align-items: center; padding: 14px 0; color: var(--ink); text-decoration: none; }
.grp-list li > a .ico { color: var(--muted); flex: none; }
.gl-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.gl-main b { font-size: 16px; }
.gl-intro { font-size: 14px; color: var(--ink); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-meta { font-size: 12.5px; color: var(--muted); }
.grp-share { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; margin-left: 6px; padding: 6px 8px; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.grp-share.shared { color: var(--p); }
.grp-find { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 15px; }
.grp-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; align-items: flex-start; }
.grp-bar form { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); font-size: 13.5px; text-decoration: none; cursor: pointer; list-style: none; }
.pill::-webkit-details-marker { display: none; }
.pill.on { border-color: var(--p); color: var(--p); }
.pill .ico { width: 15px; height: 15px; }
.grp-alias { flex-basis: auto; }
.grp-alias[open] { flex-basis: 100%; }
.grp-alias form { display: flex; gap: 6px; margin-top: 8px; }
.grp-alias input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; }
.grp-alias p { margin: 6px 2px 0; }
.grp-compose { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px; margin: 6px 0 14px; }
.grp-compose textarea { display: block; width: 100%; border: 0; resize: vertical; font: inherit; font-size: 16px; padding: 4px; background: transparent; color: var(--ink); outline: none; }
.gc-row { justify-content: space-between; margin-top: 6px; }
.grp-post { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 10px 0; }
.grp-post header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.grp-post header time { font-size: 12px; color: var(--muted); }
.grp-post > p { margin: 0; font-size: 15px; line-height: 1.6; }
.gp-img { display: block; max-width: 100%; max-height: 420px; border-radius: 10px; margin: 10px 0 0; }
.gp-tools { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.gp-tools .ico { width: 14px; height: 14px; vertical-align: -2px; }
.gp-tools form { display: inline; margin: 0; }
.gp-comments { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; font-size: 14px; }
.gp-comments li { background: var(--bg); border-radius: 10px; padding: 7px 10px; line-height: 1.5; }
.gp-comments b { margin-right: 4px; }
.gp-comments form.inline { display: inline; }
.gp-comments .link { padding: 0 2px; vertical-align: middle; }
.gp-comments .ico { width: 13px; height: 13px; }
.gp-cform { display: flex; gap: 6px; margin-top: 8px; }
.gp-cform input { flex: 1; min-width: 0; padding: 9px 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); }
.grp-form label { margin-top: 14px; }
.grp-label { font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
.grp-choice { display: flex; gap: 8px; }
.form .grp-choice label { flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 8px; border: 1px solid var(--line); border-radius: 10px; font-weight: 500; font-size: 14px; cursor: pointer; }
.form .grp-choice label:has(input:checked) { border-color: var(--p); background: var(--p-bg); color: var(--p-dark); font-weight: 700; }
.grp-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.form .grp-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; margin: 16px 0 4px; }
.form .grp-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--p); }
.grp-check small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.grp-privacy { display: flex; gap: 6px; align-items: flex-start; margin: 14px 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.grp-privacy .ico { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.grp-h2 { font-size: 16px; margin: 22px 0 6px; }
.grp-members { list-style: none; margin: 0; padding: 0; }
.grp-members li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.grp-members li > span:first-child { display: grid; gap: 2px; }
.grp-members small { color: var(--muted); font-size: 12px; }
.grp-members form { margin: 0; }
.gm-act { display: flex; gap: 6px; }
.grp-join .grp-privacy { margin-top: 10px; }

/* 더보기 메뉴 — 묶음 제목 + 두 칸 (2026-10-13) */
.more-pop { width: min(330px, calc(100vw - 24px)); max-height: calc(100dvh - 150px); overflow-y: auto; }
.mm-sec { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 8px 12px 0; letter-spacing: .02em; }
.mm-sec:first-of-type { padding-top: 2px; }
.mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; padding: 0 4px; }
.more-pop .mm-grid a { padding: 6px 8px; min-height: 0; line-height: 1.3; font-size: 14.5px; gap: 7px; min-width: 0; white-space: nowrap; }
.more-pop .mm-grid .ico { width: 17px; height: 17px; flex: none; }
.more-pop .mm-grid .mm-n { margin-left: 2px; }
.more-pop .theme-pick-label { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.more-pop .mm-head { padding: 4px 12px 8px; }

/* 가게 ↔ 주민 전환 (2026-10-13) */
.more-pop form.mm-switch { border-top: 0; margin: 0 0 4px; padding: 0; }
.more-pop .mm-switch button { width: 100%; background: var(--p-bg); color: var(--p-dark); font-weight: 700; border-radius: 10px; }
.more-pop .mm-switch small { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--muted); }

/* 가게 화면 단순하게 (2026-10-13) */
.owner-greet { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; }
.owner-greet .greet { margin: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-chips { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.og-chips .badge.lv { margin: 0; }
.beta-line { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); text-decoration: none; margin: 2px 0 10px; }
.beta-line .ico { width: 14px; height: 14px; margin-left: auto; }
.pm-lock { display: inline-flex; margin-left: 6px; color: var(--muted); vertical-align: -2px; }
.pm-lock .ico { width: 13px !important; height: 13px !important; }
.demo-cat { margin: 0 8px 8px; }
.demo-cat select { width: 100%; padding: 7px 8px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
@media (max-width: 759px) {
  .owner-side .side-link { padding: 8px 10px; font-size: 15px; }
  .owner-side .side-sep { margin: 10px 8px 2px; }
}
@media (min-width: 760px) { .side-link { padding: 7px 10px; } }
/* 대표 사진 화면 (2026-10-13 다시) */
.cover-form { margin: 12px 0 6px; }
.cover-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--card); border: 2px dashed var(--line); }
.cover-frame.has, .cover-frame.picked { border-style: solid; border-color: transparent; }
.cover-frame input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cover-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); }
.cf-empty .ico { width: 34px; height: 34px; color: var(--p); }
.cf-empty b { color: var(--ink); font-size: 15px; }
.cf-empty small { font-size: 12px; }
.cf-change { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; }
.cf-change .ico { width: 15px; height: 15px; }
.cover-pick { grid-template-columns: repeat(4, 1fr); gap: 6px; }
/* 가게 소개 화면 (2026-10-13 다시) */
.field-tip { margin: 5px 2px 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.field-tip.warn { color: var(--warn); }
.info-form > input { display: block; width: 100%; margin-top: 4px; padding: 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.link-rows { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.form .link-rows label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 12px; font-weight: 600; font-size: 14px; }
.form .link-rows label + label { border-top: 1px solid var(--line); }
.link-rows span { flex: none; width: 62px; }
.form .link-rows label input:not([type=checkbox]):not([type=radio]):not([type=file]) { flex: 1; margin: 0; border: 0; border-radius: 0; padding: 13px 0; background: transparent; min-width: 0; outline: none; }
.save-btn { margin-top: 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 가게(사장님) 화면 전반 단순하게 (2026-10-13) ── */
/* 겉 카드 없애고 평평하게 — 안쪽 항목 카드만 남김 */
.owner-main > section.card { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 8px 0 18px; border-radius: 0; }
.owner-main > section.card + section.card { border-top: 1px solid var(--line); padding-top: 16px; }
.owner-main > section.card > h1, .owner-main .head-row h1 { font-size: 22px; }
.owner-main > section.card > .muted.small:first-of-type { margin-top: 4px; }
.owner-foot-tip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.owner-foot-tip .ico { width: 15px; height: 15px; color: var(--p); }
.owner-foot-tip a { color: var(--p); font-weight: 600; text-decoration: none; }
/* 메뉴·안내 줄 */
.rows .row { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 40px 10px 12px; margin: 8px 0; }
.rows .row label.mini { margin: 0; }
.form .rows .row input:not([type=checkbox]):not([type=radio]):not([type=file]), .form .rows .row textarea { margin: 0; border: 0; padding: 4px 0; background: transparent; border-radius: 0; font-size: 15px; outline: none; }
.menu-rows .row { display: grid; grid-template-columns: 110px 1fr; gap: 2px 10px; }
.menu-rows .f-name { grid-column: 1 / -1; }
.form .menu-rows .f-name input:not([type=checkbox]) { font-weight: 700; font-size: 16px; }
.form .menu-rows .f-price input:not([type=checkbox]) { color: var(--p); font-weight: 600; }
.form .menu-rows .f-description input:not([type=checkbox]) { font-size: 13.5px; color: var(--muted); }
.row-del { position: absolute; top: 8px; right: 6px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.row-del:hover { background: var(--err-bg); color: var(--err); }
.row-del .ico { width: 16px; height: 16px; }
#listAdd { margin: 4px 0 4px; }
/* 영업시간 — 요일 한 줄 */
.hours-list { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; margin-top: 10px; }
.hours-row.hr2 { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 2px 8px; margin: 0; padding: 8px 12px; border: 0; border-radius: 0; background: none; }
.hours-row.hr2 + .hours-row.hr2 { border-top: 1px solid var(--line); }
.hr-day { font-weight: 800; font-size: 15px; }
.hr-main, .hr-break { display: flex; align-items: center; gap: 4px; min-width: 0; }
.hr-main i, .hr-break i { font-style: normal; color: var(--muted); }
.form .hours-row.hr2 input[type=time] { flex: 1; min-width: 0; width: auto; margin: 0; padding: 7px 6px !important; font-size: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); text-align: center; }
.hr-break { grid-column: 2 / 3; }
.hr-break small { flex: none; font-size: 11.5px; color: var(--muted); margin-right: 2px; }
.form .hours-row.hr2 .hr-break input[type=time] { padding: 4px 6px !important; font-size: 13px; }
.form .hr-off { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.hr-off input { width: 18px; height: 18px; accent-color: var(--p); }
.hours-row.hr2.is-off .hr-main, .hours-row.hr2.is-off .hr-break { opacity: .35; }
/* 사진 올리기·요금 상자 작게 */
.owner-main .plan-box { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 9px 12px; font-size: 12.5px; }
.owner-main .plan-box.paid { background: var(--card); border-color: var(--line); }
.owner-main .plan-box.paid b { color: var(--ok); }
/* 광고 자리 고르기 */
.bn-places { border: 0; padding: 0; margin: 10px 0; background: none; }
.bn-places legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 6px; }
.bn-place b { font-size: 15px; }
.bn-place span { display: block; font-size: 13.5px; color: var(--p); font-weight: 600; margin-top: 2px; }
.bn-place small { display: block; font-size: 12px; margin-top: 2px; }
/* 가게 위쪽 횟수 배지는 좁은 화면에서 숨김 (더보기 안에 있음) */
@media (max-width: 560px) { .top-right > .ai-badge:not(.user-badge) { display: none; } }
.owner-main .hours-form { padding: 0; border: 0; background: none; }
/* 파일 고르기 단추 — 기본 회색 단추 대신 (2026-10-13) */
input[type=file] { font-size: 13px; color: var(--muted); max-width: 100%; }
input[type=file]::file-selector-button { margin-right: 10px; padding: 8px 14px; border: 1px solid var(--p); border-radius: 99px; background: var(--card); color: var(--p); font: inherit; font-weight: 600; cursor: pointer; }
.form label input[type=file] { display: block; margin-top: 8px; }
/* 학원 과정·매물·영업시간 다듬기 (2026-10-13) */
.owner-main .aca-demand { background: none; border: 0; padding: 0; margin: 6px 0 14px; font-size: 13px; color: var(--muted); }
.owner-main .aca-demand b { color: var(--ink); }
.owner-main .aca-demand .ico { width: 15px; height: 15px; color: var(--p); vertical-align: -2px; }
.owner-main .course-photo { border: 0; border-radius: 0; padding: 14px 0; margin: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; }
.owner-main .course-photo h2 { font-size: 16px; }
.form input[type=file], .course-photo-form input[type=file] { background: transparent !important; border: 0 !important; padding: 0 !important; }
.form .hours-row.hr2 input[type=time] { -webkit-appearance: none; appearance: none; min-height: 36px; line-height: 1.2; }
.form .hours-row.hr2 .hr-break input[type=time] { min-height: 30px; }

/* 주민 화면 다듬기 — 크루·알림·내 쿠폰 (2026-10-13) */
.card.flat { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 8px 0; border-radius: 0; }
.crew .crew-grid > div { padding: 12px 14px; }
.crew-facts { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.crew-facts li { position: relative; padding-left: 58px; font-size: 14px; line-height: 1.55; }
.crew-facts li > b:first-child { position: absolute; left: 0; top: 0; color: var(--p); }
.crew-facts li > b:not(:first-child) { color: var(--ink); }
.form .crew-how { border: 0; padding: 0; margin: 14px 0 6px; background: none; display: flex; flex-wrap: wrap; gap: 8px; }
.form .crew-how legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 6px; width: 100%; }
.form .crew-how label { flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; padding: 11px 6px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; }
.form .crew-how label:has(input:checked) { border-color: var(--p); background: var(--p-bg); color: var(--p-dark); font-weight: 700; }
.form .crew-how input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.form .c-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 13px; color: var(--muted); margin: 12px 0; }
.form .c-check input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--p); }
.push-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.pl-text { flex: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.pl-text .ico { width: 16px; height: 16px; color: var(--p); }
.pl-text b { font-weight: 600; color: var(--muted); }
.push-line p { flex-basis: 100%; margin: 0; font-size: 12px; }
.noti-list { list-style: none; margin: 4px 0; padding: 0; }
.noti-list li + li { border-top: 1px solid var(--line); }
.noti { display: grid; gap: 3px; padding: 13px 2px; color: var(--ink); text-decoration: none; }
.noti b { font-size: 15px; line-height: 1.4; }
.nt-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.nt-kind { color: var(--p); font-weight: 700; }
.nt-other { color: var(--muted); font-weight: 600; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; }
.nt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--err); display: inline-block; }
.nt-body { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.noti-list li.old .noti b { font-weight: 500; }
.my-cps { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.my-cps a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; }
.my-cps a.dim { opacity: .55; }
.mc-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--p-bg); color: var(--p); display: inline-flex; align-items: center; justify-content: center; }
.mc-ico .ico { width: 20px; height: 20px; }
.mc-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mc-main b { font-size: 15px; line-height: 1.35; }
.mc-main small { font-size: 12.5px; color: var(--muted); }
.my-cps .badge { flex: none; align-self: center; }
.btn.wide { text-align: center; }

/* 모임 대화창 (2026-10-13) */
.gc-notice { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin: 6px 0 8px; border-radius: 12px; background: var(--p-bg); color: var(--p-dark); font-size: 14px; position: sticky; top: 64px; z-index: 5; }
.gc-notice > .ico { flex: none; width: 17px; height: 17px; margin-top: 2px; }
.gc-notice > div { flex: 1; min-width: 0; max-height: 4.6em; overflow: auto; }
.gc-notice form { margin: 0; }
.gc-notice .link { padding: 0; color: inherit; }
.gc-log { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 12px; }
.gc-day { text-align: center; margin: 8px 0 2px; }
.gc-day span { font-size: 11.5px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; }
.gc-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.gc-msg.me { align-items: flex-end; }
.gc-who { font-size: 12px; color: var(--muted); margin: 0 0 3px 4px; }
.gc-row { display: flex; align-items: flex-end; gap: 4px; max-width: 86%; }
.gc-msg.me .gc-row { flex-direction: row-reverse; }
.gc-bubble { display: grid; gap: 6px; padding: 9px 12px; border-radius: 16px 16px 16px 4px; background: var(--card); border: 1px solid var(--line); font-size: 15px; line-height: 1.5; word-break: break-word; min-width: 0; }
.gc-msg.me .gc-bubble { background: var(--p); color: #fff; border-color: var(--p); border-radius: 16px 16px 4px 16px; }
.gc-bubble.pinned { box-shadow: 0 0 0 2px var(--p-bg); }
.gc-img { display: block; max-width: 220px; max-height: 260px; border-radius: 10px; }
.gc-cm { font-size: 13px; opacity: .85; border-top: 1px solid rgba(127,127,127,.25); padding-top: 4px; }
.gc-meta { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 11px; color: var(--muted); }
.gc-more { position: relative; }
.gc-more summary { list-style: none; cursor: pointer; padding: 2px; display: inline-flex; }
.gc-more summary::-webkit-details-marker { display: none; }
.gc-more summary .ico { width: 15px; height: 15px; }
.gc-more > div { position: absolute; bottom: 100%; z-index: 6; min-width: 110px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.gc-msg:not(.me) .gc-more > div { right: 0; }   /* ⋯ 가 말풍선 오른쪽 → 왼쪽(화면 안쪽)으로 펼침 */
.gc-msg.me .gc-more > div { left: 0; }         /* 내 것은 ⋯ 가 왼쪽 → 오른쪽으로 펼침 */
.gc-more form { margin: 0; }
.gc-more button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; color: var(--ink); font-size: 13.5px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.gc-more button:hover { background: var(--p-bg); }
.gc-more a.gc-edit { display: block; padding: 8px 10px; color: var(--ink); font-size: 13.5px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.gc-more a.gc-edit:hover { background: var(--p-bg); }
.gc-edited { font-size: 10px; color: var(--muted); }   /* 고친 글 (2026-10-18) */
.gc-input { bottom: 0; z-index: 5; }
.gc-asnotice { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 0 0 6px 4px; }
.gc-asnotice input { accent-color: var(--p); }
.gc-box { display: flex; align-items: flex-end; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.gc-box textarea { flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding: 7px 4px; max-height: 120px; }
.gc-photo { position: relative; flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--p); cursor: pointer; }
.gc-photo.on { background: var(--p-bg); }
.gc-photo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gc-photo .ico { width: 20px; height: 20px; }
.gc-box .send { flex: none; width: 36px; height: 36px; }
.gc-leave { margin: 6px 0; }
.gc-box .send { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--p); color: #fff; cursor: pointer; } .gc-box .send .ico { width: 18px; height: 18px; }

/* 내 모임 목록 — 모임마다 알림 켜고 끄기 (2026-10-13) */
.gl-noti { margin: 0; }
.gl-noti button { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 6px; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.gl-noti button.on { color: var(--p); }
.gl-noti .ico { width: 18px; height: 18px; }
.gl-noti button:not(.on) .ico { opacity: .6; }

/* 내 모임 — 모임마다 카드 (2026-10-13 '모임 리스트가 명확하게 안 보여') */
.grp-cta .btn.ghost { border-style: solid; display: inline-flex; align-items: center; gap: 6px; }
.gcard-list { list-style: none; margin: 6px 0 16px; padding: 0; display: grid; gap: 10px; }
.gcard { border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; }
.gc-link { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 10px; color: var(--ink); text-decoration: none; }
.gc-av { flex: none; width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--p), #22D3EE); }
.gc-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.gc-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gc-name b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-name .badge { flex: none; font-size: 11px; }
.gc-last { font-size: 14px; color: var(--ink); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-sub { font-size: 12px; color: var(--muted); }
.gc-time { flex: none; font-size: 12px; color: var(--muted); margin-top: 2px; }
.gc-acts { display: flex; justify-content: flex-end; gap: 4px; padding: 0 10px 6px; border-top: 1px solid var(--line); }
.gc-acts .gl-noti button, .gc-acts .grp-share { flex-direction: row; gap: 5px; font-size: 13px; padding: 8px 10px; }
.gc-acts .ico { width: 16px; height: 16px; }

/* 모임 화면 위쪽 — 이름 줄 + 공유·⋯ 두 단추 (2026-10-13) */
.grp-top { display: flex; align-items: center; gap: 6px; margin: 10px 0 8px; }
.grp-back { flex: none; display: inline-flex; color: var(--muted); transform: rotate(180deg); padding: 4px; }
.grp-back .ico { width: 22px; height: 22px; }
.grp-title { flex: 1; min-width: 0; }
.grp-title h1 { margin: 0; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-title .grp-sub { margin: 2px 0 0; }
.grp-ibtn { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; list-style: none; }
.grp-ibtn::-webkit-details-marker { display: none; }
.grp-ibtn.shared { color: var(--p); border-color: var(--p); }
.grp-ibtn .ico { width: 18px; height: 18px; }
.grp-menu { position: relative; flex: none; }
.gm-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(290px, calc(100vw - 32px)); padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.gm-pop form { margin: 0; }
.gm-pop > form > button, .gm-pop > a, .gm-alias > summary { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; text-decoration: none; cursor: pointer; list-style: none; }
.gm-alias > summary::-webkit-details-marker { display: none; }
.gm-pop .ico { width: 17px; height: 17px; color: var(--p); flex: none; }
.gm-pop b { font-weight: 700; }
.gm-pop small { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.gm-pop > form > button:hover, .gm-pop > a:hover, .gm-alias > summary:hover { background: var(--p-bg); }
.gm-alias form { display: flex; gap: 6px; padding: 4px 10px 10px; }
.gm-alias input { flex: 1; min-width: 0; padding: 9px 10px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.gm-pop .gm-danger, .gm-pop .gm-danger .ico { color: var(--err); }
.grp-toast { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--p-bg); color: var(--p-dark); font-size: 13px; }

.gc-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.gc-unread { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--err); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* 모임 대문 사진 (2026-10-13) */
.grp-cover-pick { margin: 6px 0 4px; }
.gc-av-img { object-fit: cover; padding: 0; background: var(--line); }
.gl-cover { flex: none; width: 58px; height: 58px; border-radius: 14px; object-fit: cover; background: var(--line); }
.gl-cover-txt { display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--p), #22D3EE); }
.grp-list li > a { gap: 12px; }
.grp-cover { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 16px; margin: 8px 0 0; background: var(--line); }

.gc-pending { display: flex; align-items: center; gap: 6px; margin: 0 14px 10px; padding: 8px 12px; border-radius: 10px; background: var(--p-bg); color: var(--p-dark); font-size: 13.5px; text-decoration: none; }
.gc-pending .ico { width: 16px; height: 16px; }

/* 시작 화면 네 칸 — 인기 질문·실시간 소식·새로운 모임·오늘 날씨 (2026-10-13) */
.pop-live.grp { background: var(--p); }
.pop-live.wx { background: #22D3EE; }
.wx-q { display: grid; gap: 3px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.rt-grid .wx-q { margin: 0; padding: 6px 8px; }
.wx-top { display: flex; align-items: center; gap: 6px; }
.wx-top .pop-title { font-size: 13px; }
.wx-main { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.wx-t { font-size: 16px; }
.wx-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rt-grid .wx-q.pop-q:not(.folded) { grid-column: auto; }
.rt-grid:has(> #grpQ[hidden]) .wx-q.pop-q { grid-column: 1 / -1; }
.wx-top .wx-t { margin-left: auto; font-size: 14px; }
.wx-sky { font-size: 12.5px; color: var(--muted); }
.wx-q .wx-sub { font-size: 12.5px; }

/* 대화 목록 한 줄로 (2026-10-13) */
.ts-body .thread-open { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 7px 6px 7px 8px; min-width: 0; flex: 1; }
.ts-body .ts-title { flex: 1; min-width: 0; font-size: 14px; }
.ts-body .ts-sub { flex: none; font-size: 11px; }
.ts-body .ts-more { width: 28px; height: 28px; }
.ts-group { margin: 10px 6px 2px; }

/* 모임 대화 속 링크·카드 (2026-10-13) */
.gc-bubble a { color: inherit; text-decoration: underline; word-break: break-all; }
.gc-card { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--bg); color: var(--ink) !important; text-decoration: none !important; border: 1px solid var(--line); min-width: 200px; }
.gc-msg.me .gc-card { background: rgba(255,255,255,.95); color: #1A1226 !important; border-color: transparent; }
.gcc-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--p-bg); color: var(--p); display: inline-flex; align-items: center; justify-content: center; }
.gcc-ico .ico { width: 18px; height: 18px; }
.gcc-av { flex: none; width: 64px; height: 64px; border-radius: 16px; background: #F1EEFA; overflow: hidden; display: block; }   /* 모임 글 속 가게·쿠폰 카드 캐릭터 (2026-10-22) */
.gcc-av img { display: block; width: 100%; height: 100%; }
.gcc-txt { display: grid; gap: 1px; min-width: 0; }
.gcc-txt small { font-size: 11px; color: var(--p); font-weight: 700; }
.gcc-txt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcc-txt span { font-size: 12px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cd-title h1 { margin: 0; }
.share-btn { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.share-btn .ico { width: 15px; height: 15px; }
.copy-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 99px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; }
.copy-btn.done { color: var(--p); border-color: var(--p); }

/* 모임 입력칸 — 화면에 붙이지 않고 대화 끝에 (2026-10-13 아이폰에서 사진이 입력칸 아래로 비쳐 보이던 것) */
.gc-input { position: static; padding: 10px 0 6px; background: none; }

/* 사진 크게 보기 (2026-10-13) */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 56px 12px 24px; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lb-close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; padding: 9px 16px; border: 0; border-radius: 99px; background: rgba(255,255,255,.18); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
body.lb-open { overflow: hidden; }

/* 가게 화면 아래 사진 제보 — 한 줄 (2026-10-13) */
.crowd-row { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 6px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.cr-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--p-bg); color: var(--p); display: inline-flex; align-items: center; justify-content: center; }
.cr-ico .ico { width: 19px; height: 19px; }
.cr-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cr-main b { font-size: 14.5px; }
.cr-main small { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.cr-form { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.cr-pick { position: relative; align-self: flex-start; }
.cr-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
a.cr-pick { margin-top: 6px; justify-self: start; }
.cr-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* ── 날씨 배경 (시작 화면 대화창, 2026-10-13) ── 은은하게: 위쪽 하늘빛 + 비·눈은 아주 옅게 움직임 */
.wx-layer { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.wx-layer ~ .chat.app, .wx-layer ~ .chat.app .chat-head { background: transparent; }   /* 대화창(z 5)은 투명하게 — 배경 층(z 1)이 비쳐 보이게 */
.wx-layer::before, .wx-layer::after { content: ''; position: absolute; inset: 0; }
/* 맑음 — 낮: 하늘색 위쪽 + 오른쪽 위 햇빛 / 밤: 남색 + 별 */
.wx-clear::before { background: radial-gradient(circle at 88% 4%, rgba(255, 200, 70, .55), rgba(255, 214, 102, .18) 22%, transparent 40%), linear-gradient(180deg, rgba(110, 185, 255, .45), rgba(125, 196, 255, .12) 45%, transparent 70%); }
.wx-clear.night::before { background: linear-gradient(180deg, rgba(40, 52, 120, .45), transparent 60%); }
.wx-clear.night::after { opacity: 1; background-image: radial-gradient(2px 2px at 12% 14%, #fff, transparent), radial-gradient(1px 1px at 32% 8%, rgba(255,255,255,.7), transparent), radial-gradient(2px 2px at 58% 18%, #fff, transparent), radial-gradient(1px 1px at 78% 10%, rgba(255,255,255,.8), transparent), radial-gradient(1.2px 1.2px at 90% 24%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 45% 28%, rgba(255,255,255,.5), transparent); }
/* 구름 — 회청색 구름 덩어리 */
.wx-cloud::before { background: radial-gradient(ellipse 55% 14% at 18% 9%, rgba(140, 155, 178, .5), transparent 70%), radial-gradient(ellipse 60% 16% at 78% 15%, rgba(130, 146, 170, .45), transparent 70%), radial-gradient(ellipse 40% 10% at 50% 3%, rgba(150, 165, 185, .4), transparent 70%), linear-gradient(180deg, rgba(140, 155, 178, .3), transparent 65%); }
.wx-cloud.night::before { background: radial-gradient(ellipse 45% 18% at 20% 8%, rgba(90, 100, 125, .4), transparent 70%), radial-gradient(ellipse 50% 20% at 75% 14%, rgba(80, 92, 118, .38), transparent 70%), linear-gradient(180deg, rgba(40, 48, 70, .4), transparent 60%); }
/* 비 — 회청색 하늘 + 가는 빗줄기 */
.wx-rain::before { background: linear-gradient(180deg, rgba(110, 130, 160, .35), transparent 65%); }
.wx-rain.night::before { background: linear-gradient(180deg, rgba(35, 45, 70, .55), transparent 65%); }
.wx-rain::after { inset: -100% 0 0 0; opacity: .22; background-image: repeating-linear-gradient(105deg, transparent 0 22px, rgba(120, 160, 210, .9) 22px 23px, transparent 23px 46px); background-size: 46px 120px; animation: wxRain .9s linear infinite; }
@keyframes wxRain { to { transform: translateY(50%); } }
/* 눈 — 흰 점이 천천히 */
.wx-snow::before { background: linear-gradient(180deg, rgba(170, 195, 230, .5), transparent 65%); }
.wx-snow::after { inset: -100% 0 0 0; opacity: .9; filter: drop-shadow(0 0 1px rgba(120,140,170,.6)); background-image: radial-gradient(2px 2px at 10% 10%, #fff, transparent), radial-gradient(2.5px 2.5px at 40% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 45%, #fff, transparent), radial-gradient(2px 2px at 25% 60%, #fff, transparent); background-size: 220px 220px; animation: wxSnow 12s linear infinite; }
@keyframes wxSnow { to { transform: translateY(50%); } }
@media (prefers-reduced-motion: reduce) { .wx-layer::after { animation: none; } }
/* 어두운 화면에선 더 옅게 (빗줄기·별은 그대로 보이게) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wx-clear:not(.night)::before, :root:not([data-theme="light"]) .wx-cloud:not(.night)::before, :root:not([data-theme="light"]) .wx-rain:not(.night)::before { opacity: .55; } }
:root[data-theme="dark"] .wx-clear:not(.night)::before, :root[data-theme="dark"] .wx-cloud:not(.night)::before, :root[data-theme="dark"] .wx-rain:not(.night)::before { opacity: .55; }

/* 움직이는 날씨 (canvas, 2026-10-13) — 그리기가 되면 CSS 빗줄기·눈은 끔 */
.wx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wx-layer.live::after { display: none; }

/* 날씨 사진 배경 (사용자가 준 사진 4장, 2026-10-13) — 사진은 아주 천천히 확대·이동, 위에 비·눈·반짝이 그림 */
.wx-photo { position: absolute; inset: -4%; background: center top / cover no-repeat; animation: wxPan 48s ease-in-out infinite alternate; }
.wx-clear .wx-photo { background-image: url('img/wx/clear.webp'); }
.wx-clear.night .wx-photo { background-image: url('img/wx/clear-night.webp'); }   /* 맑은 밤 — 노을빛 하늘 (2026-10-15 PC에서 '맑은 배경이 안 나옴': 밤엔 사진 없이 옅은 별만이라 밝은 화면에선 거의 안 보이던 것) */
.wx-cloud .wx-photo { background-image: url('img/wx/cloud.webp'); }
.wx-rain .wx-photo { background-image: url('img/wx/rain.webp'); }
.wx-snow .wx-photo { background-image: url('img/wx/snow.webp'); }
@keyframes wxPan { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-2%, 1.5%); } }
@media (prefers-reduced-motion: reduce) { .wx-photo { animation: none; } }
/* 글자가 잘 보이게 덮는 막 — 사진이 있을 땐 ::before 를 막으로 */
.wx-layer:has(.wx-photo)::before { z-index: 1; background: linear-gradient(180deg, rgba(247,246,251,.10), rgba(247,246,251,.28) 45%, rgba(247,246,251,.55)); }
.wx-rain:has(.wx-photo)::before { background: linear-gradient(180deg, rgba(247,246,251,.30), rgba(247,246,251,.45) 45%, rgba(247,246,251,.65)); }
.wx-layer.night:has(.wx-photo)::before { background: linear-gradient(180deg, rgba(225,228,242,.45), rgba(236,238,248,.62) 45%, rgba(247,246,251,.75)); }   /* 밝은 화면 밤 — 글자가 보이게 밝은 막 */
.wx-layer:has(.wx-photo) .wx-canvas { z-index: 2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wx-layer:has(.wx-photo)::before { opacity: 1; background: linear-gradient(180deg, rgba(24,24,28,.45), rgba(24,24,28,.62) 50%, rgba(24,24,28,.75)); } }
:root[data-theme="dark"] .wx-layer:has(.wx-photo)::before { opacity: 1; background: linear-gradient(180deg, rgba(24,24,28,.45), rgba(24,24,28,.62) 50%, rgba(24,24,28,.75)); }
.wx-photo-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.wx-layer.photo-live::before { z-index: 1; }
.wx-layer.photo-live .wx-canvas { z-index: 2; }
/* 긴 인기 질문이 칸 밖으로 넘치던 것 (2026-10-13) — 칸 폭을 내용이 아니라 반반으로, 넘치면 … */
.pop-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pop-list li { min-width: 0; }
.pop-item { min-width: 0; overflow: hidden; }
.pop-item .pop-n { flex: none; }
.rt-grid, .rt-grid > * { min-width: 0; }
.pop-q { overflow: hidden; }
@media (max-width: 380px) { .pop-list { grid-template-columns: minmax(0, 1fr); } }
.live-q .pop-list { grid-template-columns: minmax(0, 1fr); }
/* 시작 화면 '새로운 모임' 펼친 목록 (2026-10-13 깨짐) — 한 줄씩: 이름 … · 오른쪽 작은 회색 카테고리·회원 수 */
.grp-q .pop-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
.grp-q .pop-item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.grp-q .pop-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.grp-q .pop-item .ln-count { flex: none; background: none; color: var(--muted); font-weight: 500; font-size: 12px; padding: 0; white-space: nowrap; }
.grp-q .pop-more, .live-q .pop-more { text-decoration: none; }
/* 실시간 소식 '언론 n' 빨간 표시가 줄 높이보다 커 아래가 잘리던 것 (2026-10-13) */
.pop-tick-row { line-height: 1.5em; }
.live-q .pop-tick-row .pop-n { display: inline-block; line-height: 1.45; padding: 0 6px; vertical-align: 1px; font-weight: 700; }
.rt-grid .pop-q.folded .pop-tick { font-size: 12.5px; }   /* 칸 높이 = 줄 높이 (다음 줄이 아래로 비치던 것) */
/* 동네 AI 라디오 (2026-10-13) */
.radio-btn { display: inline-flex; align-items: center; gap: 7px; margin: 12px auto 0; padding: 8px 16px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.radio-btn .ico { width: 17px; height: 17px; color: var(--p); }
.radio-btn.on { border-color: var(--p); background: var(--p-bg); color: var(--p-dark); }
.rb-eq { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.radio-btn.on .rb-eq { display: inline-flex; }
.rb-eq i { display: block; width: 3px; height: 4px; background: var(--p); border-radius: 2px; animation: rbEq 1s ease-in-out infinite; }
.rb-eq i:nth-child(2) { animation-delay: .2s; } .rb-eq i:nth-child(3) { animation-delay: .45s; }
@keyframes rbEq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.radio-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(118px + env(safe-area-inset-bottom)); z-index: 40; width: min(440px, calc(100vw - 24px)); display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-radius: 14px; background: rgba(30, 24, 52, .92); color: #fff; font-size: 13.5px; box-shadow: 0 6px 22px rgba(0,0,0,.25); }
.rbar-ico { flex: none; width: 18px; height: 18px; color: #22D3EE; animation: rbPulse 1.6s ease-in-out infinite; }
@keyframes rbPulse { 50% { opacity: .45; } }
.rbar-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbar-off { flex: none; border: 0; border-radius: 99px; padding: 6px 12px; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .rb-eq i, .rbar-ico { animation: none; } }
.radio-bar.low { bottom: calc(16px + env(safe-area-inset-bottom)); }
/* 인터넷이 끊겼을 때 화면 (offline.html, 안드로이드 앱 2026-10-13) */
.offline-page { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.offline-page img { border-radius: 18px; }
.offline-page h1 { font-size: 20px; margin: 8px 0 0; }
/* 동네 라디오 시간표·사연 (2026-10-14) */
.radio-sched { display: block; width: fit-content; margin: 8px auto 0; font-size: 13px; color: var(--muted); text-decoration: none; }
.radio-sched .ico { width: 14px; height: 14px; vertical-align: -2px; }
.rbar-link { flex: none; color: #fff; opacity: .85; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.radio-page h1 .ico { width: 24px; height: 24px; vertical-align: -3px; }
.rs-list { list-style: none; margin: 8px 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rs-list li { display: flex; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); }
.rs-list li:first-child { border-top: 0; }
.rs-list li.rs-now { background: color-mix(in srgb, var(--p) 9%, var(--card)); }
.rs-time { flex: none; width: 104px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.rs-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-body b { font-size: 15px; }
.rs-body > span { font-size: 13px; color: var(--muted); }
.rs-on { font-style: normal; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--p); border-radius: 99px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.radio-rules { margin: 4px 0 10px; padding-left: 18px; }
.radio-mine { list-style: none; margin: 0; padding: 0; }
.radio-mine li { padding: 12px 0; border-top: 1px solid var(--line); }
.radio-mine p { margin: 6px 0 4px; white-space: pre-line; }
.rm-st { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 99px; padding: 2px 9px; background: var(--line); margin-right: 6px; }
.rm-st.st-approved { background: color-mix(in srgb, var(--p) 16%, var(--card)); color: var(--p); }
.rm-st.st-aired { background: #dcfce7; color: #166534; }
.radio-body { white-space: pre-line; }
@media (max-width: 400px) { .rs-time { width: 86px; font-size: 12px; } }
/* 라디오 블록 방식 시간표·다시 듣기 (2026-10-14) */
.rs-week { overflow-x: auto; margin: 8px 0; }
.rs-table { width: 100%; font-size: 13.5px; }
.rs-table td, .rs-table th { padding: 8px 8px; vertical-align: top; }
.rs-aired { border-top: 1px solid var(--line); padding: 10px 0; }
.rs-aired summary { cursor: pointer; }
.rs-script { white-space: pre-line; font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.radio-audio { width: 100%; margin: 8px 0; }
.radio-script { font-size: 14px; line-height: 1.6; }
/* 배경음악 단추 — 오른쪽 작은 알약 (사용자 2026-10-14 '더보기 메뉴 뒤에·덜 촌스럽게') — 더보기 메뉴가 든 .top(z-index 10) 아래라 메뉴가 덮음 */
.radio-fab { position: fixed; right: 14px; bottom: calc(180px + env(safe-area-inset-bottom)); z-index: 9; height: 34px; padding: 0 12px 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .08em;
  color: var(--ink); background: color-mix(in srgb, var(--card) 72%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 2px 10px rgba(0,0,0,.08); transition: background .2s, color .2s, box-shadow .2s; }
.radio-fab .ico { width: 15px; height: 15px; color: var(--p); }
.radio-fab .rf-lab { line-height: 1; }
.radio-fab:active { transform: scale(.96); }
.radio-fab.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #DB2777, #22D3EE); box-shadow: 0 4px 14px rgba(107,44,245,.32); }
.radio-fab.on .ico { display: none; }
.radio-fab.on .rb-eq { display: inline-flex; height: 12px; gap: 2px; }
.radio-fab.on .rb-eq i { width: 2.5px; background: #fff; }
@media (min-width: 900px) { .radio-fab { right: 28px; bottom: 120px; } }
/* 라디오를 켠 채 다른 화면 — 안쪽 틀 (2026-10-14) */
.radio-shell { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 38; background: var(--bg); }
html.radio-shell-on .radio-fab { display: none; }
html.radio-shell-on body { overflow: hidden; }
html.in-radio-shell .radio-fab { display: none; }
html.radio-shell-on .radio-shell { height: calc(100% - 68px - env(safe-area-inset-bottom)); }
html.radio-shell-on .radio-bar { bottom: calc(10px + env(safe-area-inset-bottom)); }
/* 안쪽 틀이 열려 있는 동안 바깥 화면은 감춤(재생 막대만) — 대화창이 두 개 보이던 것 (2026-10-14) */
html.radio-shell-on body > *:not(.radio-shell):not(.radio-bar) { visibility: hidden; }
/* 아침 브리핑 카드 (2026-10-14) */
.brief-card { margin: 14px 0 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); text-align: left; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.bc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bc-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; }
.bc-title .ico { width: 18px; height: 18px; color: #f59e0b; }
.bc-title small { font-weight: 600; color: var(--muted); font-size: 12.5px; }
.bc-play { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--p); color: var(--p); background: transparent; border-radius: 99px; padding: 5px 11px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.bc-play .ico { width: 15px; height: 15px; }
.bc-play.on { background: var(--p); color: #fff; }
.bc-hl { margin: 6px 0 2px; font-size: 14.5px; }
.bc-more summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.bc-more h3 { font-size: 13.5px; margin: 10px 0 2px; }
.bc-more ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
.bc-more li { margin: 2px 0; }
/* 브리핑 카드 전체를 누르는 단추로 (2026-10-14) */
.bc-tap { display: block; width: 100%; border: 0; background: transparent; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.bc-tap .bc-hl { display: block; }
.bc-tap.on .bc-play { background: var(--p); color: #fff; }
.bc-text { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 4px; }
.bc-text h3 { font-size: 13.5px; margin: 10px 0 2px; }
.bc-text ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
.bc-text li { margin: 2px 0; }
.bc-text a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--p) 45%, transparent); text-underline-offset: 3px; }
.bc-close { display: block; margin: 10px auto 2px; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 99px; padding: 5px 16px; font: inherit; font-size: 13px; cursor: pointer; }
.map-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
/* 배경음악 단추 — 대화창 바로 위 오른쪽에 붙임 (사용자 2026-10-14 '위치가 어중간해서'). app.js 가 옮기기 전엔 숨김
   켜지면 단추 대신 아래 음악 줄(곡 이름·끄기)이 같은 자리에 — 둘이 겹치지 않게 */
.radio-fab:not(.in-chat) { visibility: hidden; }
.chat-input .radio-fab.in-chat { position: absolute; right: 12px; bottom: calc(100% + 8px); z-index: 1; }
.radio-fab.in-chat.on { display: none; }
/* 더보기 메뉴가 열리면 단추를 숨김 — 대화창(z-index 20)이 메뉴(.top 10)보다 위라 메뉴를 가리던 것 */
body:has(#moreMenu[open]) .radio-fab { visibility: hidden; }
/* 배경음악 막대 — 대화 입력칸 바로 위(높이는 app.js 가 --cf-h 로), 대화 칸 아래 여백도 막대만큼 (사용자 2026-10-15 '대화창이 플레이 창에 가려져') */
html.radio-bar-on .radio-bar:not(.low) { bottom: calc(var(--cf-h, 118px) + 8px); }
html.radio-bar-on .chat.app > .chat-log { padding-bottom: calc(128px + var(--rbar-h, 48px) + 12px + env(safe-area-inset-bottom)); }

/* 이번 달 남은 질문 수 (검색창 — DB/AI 고르기 대신, 2026-10-15) */
.q-left { flex: none; font-size: 12.5px; color: var(--muted); padding: 5px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); white-space: nowrap; }
.q-left b { color: var(--p); font-weight: 700; }

/* 검색 순위 칸 짧게 (2026-10-15) */
.rank-lead small { font-size: 12px; font-weight: 400; opacity: .8; margin-left: 4px; }
.rank-now b { font-size: 20px; }
.rank-now div { padding: 6px 4px; }
.rank-sub { margin: 10px 0 4px; font-size: 13px; font-weight: 700; color: #F5EFFF; }
.rank-done { margin-top: 8px; }
.rank-done summary { cursor: pointer; font-size: 13px; color: #FCE0EE; list-style: none; }
.rank-done summary::-webkit-details-marker { display: none; }
.rank-done summary::after { content: ' ›'; }
.rank-done[open] summary::after { content: ' ⌄'; }
.quick-edit { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.quick-edit a { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 13px; color: var(--ink); text-decoration: none; background: var(--card); }
.quick-edit a .ico { width: 14px; height: 14px; color: var(--p); }
/* 관리자 첫 화면 — 오늘 할 일·접는 칸 (2026-10-15) */
.admin-todo h2 { display: flex; align-items: center; gap: 6px; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-list li a { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.todo-list li:last-child a { border-bottom: 0; }
.todo-list li b { min-width: 28px; text-align: center; padding: 2px 8px; border-radius: 99px; background: var(--p); color: #fff; font-size: 13px; }
.todo-list li.warn b { background: var(--err); }
.card.fold > summary { cursor: pointer; font-weight: 700; font-size: 16px; list-style: none; }
.card.fold > summary::-webkit-details-marker { display: none; }
.card.fold > summary::after { content: ' ›'; color: var(--muted); }
.card.fold[open] > summary { margin-bottom: 10px; }
.card.fold[open] > summary::after { content: ' ⌄'; }
.collect-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.collect-list li { padding: 7px 2px; border-bottom: 1px solid var(--line); }
.collect-list li:last-child { border-bottom: 0; }
.collect-list li.warn { background: color-mix(in srgb, var(--err) 8%, transparent); }
/* 관리자 폐업 확인 (2026-10-15) */
.closure-list { list-style: none; margin: 10px 0; padding: 0; }
.closure-list li { padding: 12px 4px; border-bottom: 1px solid var(--line); }
.closure-list li.flash { background: var(--p-bg); }
.cl-head b { font-size: 15px; }
.cl-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.cl-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 0; }
.btn.small.danger { background: var(--err); border-color: var(--err); color: #fff; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* 휴대폰 인증 줄 (2026-10-15) */
.sms-row { display: flex; gap: 8px; align-items: center; }
.sms-row input { flex: 1; min-width: 0; }
/* 로그인 전 첫 화면 한 줄 안내 (2026-10-15 — 큰 가입 단추 대신) */
.join-line { text-align: center; color: var(--muted); margin: -4px 0 12px; }
.join-line .link { font-weight: 700; }
.join-line .muted-link { font-weight: 500; color: var(--muted); }
.join-line .ico { width: 14px; height: 14px; vertical-align: -2px; }
/* 우리 동네 분석 (2026-10-15) */
.ins-bars { width: 100%; max-width: 480px; height: auto; display: block; margin: 4px 0 10px; }
.ins-bars rect.b { fill: color-mix(in srgb, var(--p) 35%, transparent); }
.ins-bars rect.b.top { fill: var(--p); }
.ins-bars text { font-size: 9px; fill: var(--muted); }
.ins-list { margin: 6px 0; padding-left: 20px; }
.ins-list li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ins-tips ul { list-style: none; margin: 0; padding: 0; }
.ins-tips li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ins-tips li:last-child { border-bottom: 0; }
.ins-tips .btn { flex: none; }
.card h3 { font-size: 14px; margin: 12px 0 2px; }

/* 광고 신청 — 첫 화면 스플래시 미리보기 (2026-10-15) */
.pv-splash { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); text-align: center; max-width: 280px; margin: 0 auto 12px; }
.pv-splash[hidden], .ad-banner[hidden] { display: none; }
.pv-splash-brand { display: flex; align-items: center; gap: 6px; font-size: 15px; margin-bottom: 4px; }
.pv-splash-brand i { font-style: normal; color: var(--p); }
.pv-splash-img { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--p-bg); color: var(--muted); font-size: 13px; overflow: hidden; }
.pv-splash-img img { width: 100%; height: 100%; object-fit: contain; }
.pv-splash > b { font-size: 16px; letter-spacing: -.3px; word-break: keep-all; }
.pv-splash-sub { font-size: 12.5px; color: var(--muted); }
.pv-splash .ad-tag { display: inline-block; font-size: 10px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; }
.pv-splash small { font-size: 11px; color: var(--muted); }
.pv-splash-img:has(img:not([hidden])) { background: none; }   /* 사진을 고르면 실제 스플래시처럼 바탕 없이 */
/* 학원 과정·교습비 화면 다듬기 (2026-10-15) — 숫자 칸·사진 고르기 칸·입력 묶음·단위 */
.aca-lead { margin: 4px 0 0; }
.aca-stats { margin: 12px 0 2px; }
.form .course-drop { position: relative; margin-top: 10px; padding: 20px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.course-drop .ico { width: 26px; height: 26px; }
.course-drop span { font-size: 16px; }
.course-drop small { font-size: 12px; font-weight: 400; }
.course-drop.is-busy { opacity: .6; pointer-events: none; }
.form .form-group-h { margin: 18px 0 -4px; font-size: 12px; font-weight: 700; color: var(--p); letter-spacing: .02em; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.form .unit { position: relative; display: block; margin-top: 6px; }
.form .unit input:not([type=checkbox]):not([type=radio]):not([type=file]) { margin-top: 0; padding-right: 34px; }
.form .unit i { position: absolute; right: 12px; top: calc(50% + 2px); transform: translateY(-50%); font-style: normal; font-size: 14px; font-weight: 500; color: var(--muted); pointer-events: none; }
.form .switch-row { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-weight: 500; }

/* 사장님 [손님처럼 검색] 탭의 날씨 배경 (2026-10-15) — 화면 맨 아래 층(z -1)에 깔아 카드·글씨는 그대로 위에 */
.wx-layer.wx-under { z-index: -1; }
.wx-layer[hidden] { display: none; }

/* 주민 첫 화면 — 대화 목록·새 대화를 머리줄로 (2026-10-15) */
.top .top-chats { flex: none; margin-right: -4px; }
.top .top-chats + .brand { margin-right: auto; }   /* 로고는 ☰ 바로 옆에 */
.top .top-new { flex: none; color: var(--p); }

/* 스플래시 협업 — 영문 줄 대신 두 CI (호암AI 마크 x Dear.Rep, 2026-10-15) */
.splash-collab p .collab-ci { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; }
.collab-ci > img { width: 44px; height: 44px; }
.collab-ci i { font-style: normal; font-size: 14px; color: var(--muted); }
.collab-ci .dr-ci { height: 52px; width: auto; }   /* 흰색을 모두 뺀 CI, 어두운 화면은 연두빛(dearrep-ci-dark) */
.collab-ci .logo-dark { display: none; }
:root[data-theme="dark"] .collab-ci .logo-light { display: none; }
:root[data-theme="dark"] .collab-ci .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .collab-ci .logo-light { display: none; }
  :root:not([data-theme="light"]) .collab-ci .logo-dark { display: block; }
}

/* 앱 받기 안내 (로그인 안 한 안드로이드, 2026-10-15) — 가운데 정사각형, 카드 전체가 Play 스토어 링크 */
.app-pop { position: fixed; inset: 0; z-index: 900; background: rgba(15, 10, 35, .5); display: flex; align-items: center; justify-content: center; padding: 24px; }
.app-pop[hidden] { display: none; }
.app-pop-box { position: relative; width: min(78vw, 320px); aspect-ratio: 1 / 1; animation: appPopIn .3s cubic-bezier(.2, .9, .3, 1.15) both; }
.app-pop-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px; text-align: center; text-decoration: none; color: var(--ink);
  background: var(--card); border-radius: 26px; box-shadow: 0 18px 50px rgba(20, 10, 60, .35); -webkit-tap-highlight-color: transparent; }
.app-pop-card:active { transform: scale(.98); }
.app-pop-card img { border-radius: 20px; box-shadow: 0 0 0 1px var(--line); }
.app-pop-card b { font-size: 18px; margin-top: 6px; letter-spacing: -.3px; }
.app-pop-card > span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.app-pop-card .app-pop-cta { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; background: var(--p); color: #fff; font-weight: 700; font-size: 14.5px; }
.app-pop-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; }
@keyframes appPopIn { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* 아이폰 '홈 화면에 추가' 안내 — 방법이 들어가 정사각형보다 조금 길게 (2026-10-15) */
.app-pop-box.ios { width: min(86vw, 340px); aspect-ratio: auto; }
.app-pop-box.ios .app-pop-card { position: relative; inset: auto; padding: 26px 20px 20px; }
.a2hs { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; text-align: left; display: grid; gap: 8px; }
.a2hs li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; padding: 10px 12px; border-radius: 12px; background: var(--p-bg); }
.a2hs li i { font-style: normal; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--p); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.a2hs li .ico { width: 17px; height: 17px; color: var(--p); }
.a2hs li small { color: var(--muted); font-size: 12px; }
.a2hs li b { font-size: inherit; margin: 0; letter-spacing: 0; }
.a2hs li small { flex-basis: 100%; padding-left: 26px; }
.a2hs li small .ico { width: 13px; height: 13px; vertical-align: -2px; }
/* 더보기·대화 목록·도움말을 열면 BGM 바·버튼이 그 아래로 (2026-10-15 — BGM 바(z 40)가 메뉴를 덮던 것) */
body:has(.more-menu[open]) .radio-bar, body:has(.thread-side.open) .radio-bar, body:has(.help-side.open) .radio-bar, body:has(.side-backdrop:not([hidden])) .radio-bar { z-index: 4; }
body:has(.more-menu[open]) .radio-fab, body:has(.thread-side.open) .radio-fab, body:has(.help-side.open) .radio-fab { z-index: 0; }
.top:has(.more-menu[open]) { z-index: 45; }

/* 관리자 폐업 확인 지도 — 이름을 지도에 바로, 누르면 지도 위 카드 (2026-10-15) */
.closure-map { height: min(72vh, 680px); position: relative; }
.cl-pin { display: inline-block; max-width: 140px; padding: 2px 7px; border-radius: 10px; background: #fff; border: 1.5px solid #E03131; color: #1B1033; font-size: 11.5px; font-weight: 600; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; }
.cl-pin.on { background: #E03131; color: #fff; z-index: 10; position: relative; }
.cl-card { position: absolute; left: 10px; bottom: 10px; z-index: 20; width: min(360px, calc(100% - 20px)); background: var(--card); color: var(--ink); border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); display: grid; gap: 4px; }
.cl-card[hidden] { display: none; }
.cl-card .cl-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; }
.cl-card .cl-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.cl-card .cl-acts { display: flex; gap: 6px; margin-top: 6px; }
.closure-map.far .cl-pin:not(.on) { width: 12px; height: 12px; padding: 0; border-radius: 50%; background: #E03131; border-color: #fff; font-size: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }

/* 시작 화면 두 칸 — 왼쪽 실시간 인기 질문 · 오른쪽 [소식][모임][날씨] 한 칸, 누르면 아래에 펼침 (2026-10-15) */
.rt-grid > .rt-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); align-self: stretch; }
.rt-grid:has(> #popQ[hidden]) > .rt-tabs { grid-column: 1 / -1; }
.rt-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px 2px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; min-width: 0; white-space: nowrap; }
.rt-tab:hover { background: var(--line); }
.rt-tab .pop-live { animation: none; }
.rt-tab .rt-t { font-weight: 500; font-size: 12px; color: var(--muted); }
.rt-tab.on { background: var(--p-bg); color: var(--p-dark); }
.rt-tab.on .rt-t { color: inherit; }
.rt-panel { max-width: 440px; margin: 8px auto 0; padding: 6px 10px; text-align: left; }
.rt-panel .pop-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
.rt-panel .rt-empty { margin: 8px 2px; }
.rt-wx .rt-wx-now { margin: 6px 2px 2px; font-size: 15px; }
.rt-wx .rt-wx-now b { font-size: 20px; margin-right: 4px; }
.rt-wx > p.muted { margin: 0 2px 4px; }
.rt-ask { border: 0; background: transparent; font: inherit; cursor: pointer; padding-left: 2px; }
/* 브리핑 카드와 좌우 맞춤 (2026-10-15) — 두 칸·펼친 칸도 브리핑과 같은 폭 */
.rt-grid, .rt-panel { max-width: none; }
.pop-list .pop-none { padding: 8px 2px; grid-column: 1 / -1; }
/* 시작 화면에서 [소식]·인기 질문을 펼쳐 길어져도 오른쪽 스크롤바는 안 보이게 — 스크롤은 그대로 됨 (사용자 2026-10-15) */
.chat-log:has(> #hello:not([hidden])) { scrollbar-width: none; }
.chat-log:has(> #hello:not([hidden]))::-webkit-scrollbar { display: none; }
/* 가게 화면 팔로우·추천·공유 한 줄 — SNS 처럼 (2026-10-16) : 팔로우 보라 테두리 → 팔로잉 채운 보라, 추천 하트(누르면 빨강으로 채움), 공유 테두리 */
.sns-row { display: flex; gap: 8px; margin: 10px 0 4px; }
.sns-row form { margin: 0; display: flex; flex: 1 1 0; min-width: 0; }
.sns-row > .sns-btn { flex: 1 1 0; }
.sns-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 38px; padding: 0 8px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.sns-btn .ico { width: 17px; height: 17px; flex: none; }
.sns-btn b { font-weight: 700; }
.sns-follow { color: var(--p); border-color: var(--p); }   /* 꺼짐 = 테두리만 (사용자 2026-10-16 '팔로잉에 색이 칠해져야') */
.sns-follow.on { background: var(--p); border-color: var(--p); color: #fff; }
.sns-like.on { color: #FF1F4B; border-color: #FF1F4B; }
.sns-like.on .ico { fill: currentColor; }
.sns-btn:active { transform: scale(.97); }
.sns-note { margin: 2px 0 6px; }
.sns-note b { color: var(--ink); font-weight: 700; }
/* 가게 카드 쿠폰·이벤트·구인 배지 — 누르면 가게 화면 그 칸 (2026-10-16) */
.sc-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.sc-badge.coupon { background: #FFE8EC; color: #D3123A; }
.sc-badge.event { background: var(--p-bg); color: var(--p-dark); }
.sc-badge.job { background: #E3F7FB; color: #0E7490; }
.sc-badge:hover { filter: brightness(.95); }
/* 가게 화면 영업시간 표 (2026-10-16) — 이어지는 같은 시간은 묶음, 오늘 줄 강조, 휴무 흐리게 */
.hrs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.hrs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--line) 45%, transparent); }
.hrs-day { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.hrs-day em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--p); color: #fff; }
.hrs-time { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .2px; text-align: right; }
.hrs-time small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.hrs-row.today { background: var(--p-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p) 35%, transparent); }
.hrs-row.today .hrs-time { color: var(--p-dark); }
.hrs-row.off .hrs-time { color: var(--muted); font-weight: 600; }
/* 가게 화면 메뉴판 (2026-10-16) — 이름 굵게·설명 작게, 값 오른쪽 보라, 8개 넘으면 펼쳐 보기 */
.mn { list-style: none; margin: 2px 0 0; padding: 0; }
.mn-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 2px; border-bottom: 1px dashed var(--line); }
.mn-row:last-child { border-bottom: 0; }
.mn-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mn-name b { font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--ink); word-break: keep-all; }
.mn-name small { font-size: 12.5px; color: var(--muted); line-height: 1.4; word-break: keep-all; }
.mn-price { flex: none; font-weight: 800; font-size: 15px; color: var(--p-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mn-price i { font-style: normal; font-weight: 600; font-size: 12.5px; margin-left: 1px; }
.mn-more { margin-top: 2px; }
.mn-more > summary { list-style: none; cursor: pointer; text-align: center; padding: 10px; margin-top: 4px; border-radius: 10px; background: color-mix(in srgb, var(--line) 45%, transparent); font-size: 13.5px; font-weight: 700; color: var(--p); }
.mn-more > summary::-webkit-details-marker { display: none; }
.mn-more[open] > summary { display: none; }
.mn-more .mn { border-top: 1px dashed var(--line); }

/* 궁금해요/알아요 (2026-10-16) — 이웃 의견은 주황(--warn), 사실(AI·DB) 답은 보라. 위쪽 탭 [질문하기 | 알려주기] */
.top.has-tabs { min-height: calc(62px + env(safe-area-inset-top)); }   /* 두 탭 화면의 머리줄 높이를 같게 — 탭 자리가 같아지게 */
.top.has-tabs ~ .wrap { padding-top: 74px; }   /* 탭은 머리줄 아래 본문 맨 위에 떠 있음 — 그 자리만큼 내림 */
.top.has-tabs ~ .wrap .chat.app { padding-top: 70px; }
/* 위쪽 탭 [질문하기 | 알려주기] — 2026-10-16 사용자 '투박하다 → 심플하고 팬시하게': 가운데 얇은 알약 모양 한 줄, 설명 줄은 숨김 */
.nb-tabs { position: fixed; z-index: 9; top: calc(var(--top-h, 57px) + 18px); left: 50%; transform: translateX(-50%); width: min(300px, calc(100% - 32px)); display: flex; padding: 3px; border-radius: 99px;
  background: color-mix(in srgb, var(--soft2) 70%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nb-tabs a { flex: 1; display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 99px; color: var(--muted); text-decoration: none; transition: color .2s; }
.nb-tab-t { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.nb-tabs a small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb-tabs a .ico { width: 15px; height: 15px; }
.nb-tabs a:not(.on):hover { color: var(--ink); }
.nb-tabs { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.nb-tab-pill { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 99px; background: linear-gradient(135deg, #7C3AED 0%, #DB2777 55%, #4F7CF7 100%);
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--p) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .26s cubic-bezier(.3, .7, .3, 1); }
.nb-tabs[data-at="tell"] .nb-tab-pill { transform: translateX(100%); }
.nb-tabs.dragging .nb-tab-pill { transition: none; }
.nb-tabs a { position: relative; z-index: 1; }
.nb-tabs a.on { color: #fff; }
@media (prefers-reduced-motion: reduce) { .nb-tab-pill { transition: none; } }
.nb-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 6px; }
.nb-roles form { margin: 0; display: flex; }
.nb-role { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; }
.nb-role .ico { width: 22px; height: 22px; color: var(--p); }
.nb-role b { font-size: 15px; }
.nb-role small { font-size: 12px; color: var(--muted); }
.nb-role.off { opacity: .75; }
.nb-head .btn { display: inline-flex; align-items: center; gap: 4px; }
.nb-cats a.on { background: var(--p); border-color: var(--p); }
.nb-list { list-style: none; margin: 4px 0; padding: 0; }
.nb-item { border-bottom: 1px solid var(--line); padding: 12px 0; }
.nb-q { display: flex; flex-direction: column; gap: 3px; color: var(--ink); text-decoration: none; }
.nb-q b { font-size: 15.5px; }
.nb-cat { font-size: 12px; color: var(--p); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.nb-cat .ico, .nb-badge .ico { width: 13px; height: 13px; }
.nb-prev { list-style: none; margin: 8px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--warn-bg); font-size: 13.5px; }
.nb-prev li { margin: 3px 0; }
.nb-who { font-weight: 600; font-size: 12.5px; color: var(--muted); }
.nb-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 99px; background: var(--warn-bg); color: var(--warn); }
.nb-ans-btn, .nb-done { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 13px; }
.nb-ans-btn { color: var(--p); font-weight: 600; text-decoration: none; }
.nb-ans-btn .ico, .nb-done .ico { width: 15px; height: 15px; }
.nb-title { margin: 6px 0 2px; font-size: 19px; }
.nb-metoo { margin: 8px 0; }
.nb-answers { margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.nb-note { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12.5px; color: var(--warn); font-weight: 600; }
.nb-note .ico { width: 15px; height: 15px; flex: none; }
.nb-summary { background: var(--card); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; font-size: 14px; }
.nb-summary p { margin: 4px 0 0; }
.nb-alist { list-style: none; margin: 0; padding: 0; }
.nb-alist li { padding: 10px 0; border-top: 1px dashed color-mix(in srgb, var(--warn) 30%, transparent); }
.nb-alist li:first-child { border-top: 0; }
.nb-alist p { margin: 4px 0 0; white-space: pre-line; }
.nb-ok { color: var(--ok); display: inline-flex; align-items: center; gap: 2px; }
.nb-ok .ico { width: 13px; height: 13px; }
.nb-answer-box label b { display: inline-flex; align-items: center; gap: 4px; color: var(--p); }
.nb-radios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.nb-radios label { position: relative; margin: 0; }
.nb-radios input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nb-radios span { display: block; text-align: center; padding: 9px 4px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; background: var(--card); cursor: pointer; }
.nb-radios input:checked + span { border-color: var(--p); background: var(--p-bg); color: var(--p-dark); font-weight: 700; }
.nb-radios input:focus-visible + span { outline: 2px solid var(--p); }
.nb-store-picked { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.nb-store-list { list-style: none; margin: 0; padding: 0; }
.nb-store-list button { width: 100%; text-align: left; padding: 9px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; cursor: pointer; }
.nb-store-list small { color: var(--muted); margin-left: 6px; }
/* 질문하기 답 아래 접힌 '이웃 의견' — 사실 답(보라)과 다른 주황 칸 */
.nb-block { margin: 10px 0 2px; border-radius: 12px; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.nb-block > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 700; font-size: 14px; color: var(--warn); }
.nb-block > summary::-webkit-details-marker { display: none; }
.nb-block > summary::after { content: '▸'; margin-left: auto; transition: transform .15s; }
.nb-block[open] > summary::after { transform: rotate(90deg); }
.nb-tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--warn); color: var(--card); }
.nb-block > :not(summary) { margin-left: 12px; margin-right: 12px; }
.nb-block .nb-note { margin-top: 0; }
.nb-sum { font-size: 14px; margin: 0 12px 8px; }
.nb-block .nb-alist { font-size: 13.5px; }
.nb-block .more-link { display: inline-block; margin-bottom: 10px; }
.nb-block .nb-q { font-size: 13px; font-weight: 600; margin: 0 12px 6px; }
.nb-more { list-style: none; padding: 0; margin: -4px 12px 10px; font-size: 13px; }
.nb-more li { padding: 3px 0; }
.nb-more a { color: var(--muted); }
/* 이웃 레벨 호칭 · 도움됐어요 (4단계) */
.nb-title-badge { font-size: 11.5px; padding: 1px 7px; border-radius: 99px; background: var(--card); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.nb-title-badge.lv4, .nb-title-badge.lv5 { background: var(--warn); color: var(--card); border-color: var(--warn); }
.nb-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nb-acts form { margin: 0; }
.nb-act { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.nb-act .ico { width: 14px; height: 14px; }
.nb-act.done { cursor: default; color: var(--warn); }
.nb-act.pick { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); font-weight: 600; }
.nb-alist li.nb-picked { background: color-mix(in srgb, var(--card) 60%, transparent); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
/* 5단계 — 여러 이웃이 같은 의견 · 가게가 확인한 이웃 답(사실 쪽, 보라) */
.nb-consensus { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--warn); }
.nb-consensus .ico { width: 15px; height: 15px; }
.nb-confirmed { margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; background: var(--p-bg); color: var(--ink); font-size: 14px; }
.nb-confirmed b { color: var(--p-dark); font-size: 13px; }
.nb-confirmed p { margin: 4px 0 0; }
.nb-owner h2 { display: flex; align-items: center; gap: 6px; margin-top: 0; }
/* 알려주기 왼쪽 메뉴(카테고리·질문 수) · 내 궁금해요 탭 (2026-10-16) */
.nb-side .ts-new { text-decoration: none; }
.nb-side-sec { margin: 14px 4px 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.nb-side-sec small { font-weight: 400; margin-left: 4px; }
.nb-side-cats { display: flex; flex-direction: column; }
.nb-side-cats a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 15px; }
.nb-side-cats a span { display: inline-flex; align-items: center; gap: 6px; }
.nb-side-cats a .ico { width: 16px; height: 16px; color: var(--muted); }
.nb-side-cats a b { font-size: 13px; color: var(--muted); font-weight: 600; min-width: 22px; text-align: right; }
.nb-side-cats a.on { background: var(--p-bg); color: var(--p-dark); font-weight: 700; }
.nb-side-cats a.on b { color: var(--p-dark); }
.nb-subtabs { display: flex; gap: 6px; margin: 12px 0 8px; }
.nb-subtabs a { flex: 1; text-align: center; padding: 8px 0; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.nb-subtabs a.on { border-color: var(--p); background: var(--p-bg); color: var(--p-dark); }
.nb-cat-pick { width: 100%; display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; text-align: left; }
.nb-cat-pick .ico { width: 18px; height: 18px; color: var(--p); }
.nb-cat-pick-r { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--muted); }
.nb-cat-pick-r .ico { width: 14px; height: 14px; color: var(--muted); }
.nb-checks input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* 브리핑 한 줄 — 입력창 바로 위 (2026-10-16 사용자 '가운데는 빼고 대화창 위에 1줄로'), 누르면 위로 글이 펼쳐짐 */
.brief-bar { margin: 6px 0 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: hidden; }
.brief-bar .bc-tap { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; }
.brief-bar .bc-title { flex: none; font-size: 13.5px; }
.brief-bar .bc-title .ico { width: 16px; height: 16px; }
.brief-bar .bc-hl { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief-bar .bc-play { flex: none; padding: 3px 9px; font-size: 12px; }
.brief-bar .bc-play .ico { width: 13px; height: 13px; }
/* 펼친 브리핑 글 — 입력창 위 카드 (2026-10-16 한 줄은 입력창 아래로) */
.bc-text.brief-text { margin: 0 0 6px; padding: 4px 14px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 2px 10px rgba(0,0,0,.05); max-height: 42vh; overflow-y: auto; }
.brief-text .bc-close { margin-top: 8px; }
/* 알려주기 날씨 배경 위에서 읽기 쉽게 — 질문마다 카드 (2026-10-16) */
.wx-layer.wx-under ~ main .nb-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.wx-layer.wx-under ~ main .nb-subtabs a:not(.on) { background: var(--card); }
.wx-layer.wx-under ~ main > .muted, .wx-layer.wx-under ~ main .empty { text-shadow: 0 1px 2px color-mix(in srgb, var(--bg) 80%, transparent); }
/* 알려주기 첫 화면 인사 (2026-10-16) — 질문하기 첫 화면과 같은 크기, 제목을 누르면 그 질문으로 궁금해요 쓰기 */
.nb-hello { text-align: center; padding: 26px 8px 8px; }
.nb-hello h1 { font-size: 26px; margin: 0 0 8px; }
.nb-hello h1 a { color: var(--ink); text-decoration: none; }
.nb-hello .btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; }
.nb-ask-btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 10px; }
/* 알려주기 목록 가볍게 (2026-10-16 사용자 '디자인이 너무 투박하고 답답해') — 앞의 상자형 탭·큰 카테고리 단추·긴 카드를 덮어씀 */
.nb-bar { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.nb-bar .nb-subtabs { flex: 1; display: flex; gap: 18px; margin: 0; }
.nb-bar .nb-subtabs a { flex: none; padding: 8px 0 9px; border: 0; border-radius: 0; background: none !important; color: var(--muted); font-size: 15px; font-weight: 700; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.nb-bar .nb-subtabs a.on { color: var(--ink); border-bottom-color: var(--p); }
.nb-bar .nb-subtabs small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.nb-bar .nb-subtabs a.on small { color: var(--p); }
.nb-chip { flex: none; display: inline-flex; align-items: center; gap: 3px; margin-bottom: 6px; padding: 5px 11px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: color-mix(in srgb, var(--card) 80%, transparent); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.nb-chip .ico { width: 14px; height: 14px; }
.nb-chip.primary { background: var(--p); border-color: var(--p); color: #fff; }
.nb-chip[hidden] { display: none; }
.nb-login { margin: 4px 0 12px; }
.nb-list { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.nb-item, .wx-layer.wx-under ~ main .nb-item { margin: 0; padding: 14px 16px 12px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 8px rgba(0,0,0,.04); }
.nb-item .nb-q { gap: 4px; }
.nb-item .nb-q b { font-size: 16px; font-weight: 700; line-height: 1.45; }
.nb-item .nb-cat { font-size: 12px; font-weight: 700; }
.nb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.nb-foot .nb-meta { font-size: 12.5px; color: var(--muted); }
.nb-foot .nb-ans-btn { margin: 0; padding: 5px 12px; border-radius: 99px; background: var(--p-bg); color: var(--p-dark); font-size: 13px; font-weight: 700; }
.nb-foot .nb-ans-btn .ico { width: 14px; height: 14px; }
.nb-state { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 99px; background: var(--soft2); color: var(--muted); font-size: 12px; font-weight: 600; }
.nb-state.done { background: var(--ok-bg); color: var(--ok); }
.nb-state .ico { width: 13px; height: 13px; }
.nb-item .nb-prev { margin-top: 8px; }
/* 글자 크기·여백을 질문하기 첫 화면에 맞춤 (2026-10-16 사용자 '폰트 사이즈 이질감') — 제목 24 · 설명 13 · 탭 13.5 · 카드 질문 14.5 */
.nb-hello { padding: 42px 4px 8px; }   /* 질문하기 제목과 같은 높이 (위 여백 차이 6px) */
.nb-hello h1 { font-size: 24px; margin: 0 0 10px; }
.nb-bar .nb-subtabs a { font-size: 13.5px; }
.nb-bar .nb-subtabs small { font-size: 11.5px; }
.nb-chip { font-size: 12.5px; }
.nb-item .nb-q b { font-size: 14.5px; line-height: 1.5; }
.nb-item .nb-cat { font-size: 11.5px; }
.nb-foot .nb-meta { font-size: 12px; }
.nb-foot .nb-ans-btn { font-size: 12.5px; padding: 4px 11px; }
.nb-state { font-size: 11.5px; }
.nb-item { padding: 12px 14px 11px; }
/* 목록을 짧은 줄로 (2026-10-16 사용자 '박스가 너무 커서 답답해') — 한 상자 안에 줄로 나누고, 누르면 상세에서 답 보기·알려 주기 */
.nb-rows { display: block; gap: 0; border-radius: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nb-rows .nb-item, .wx-layer.wx-under ~ main .nb-rows .nb-item { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nb-rows .nb-item + .nb-item, .wx-layer.wx-under ~ main .nb-rows .nb-item + .nb-item { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.nb-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 14px; color: var(--ink); text-decoration: none; }
.nb-row:active { background: color-mix(in srgb, var(--p-bg) 60%, transparent); }
.nb-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nb-row-main .nb-cat { font-size: 11px; font-weight: 600; }
.nb-row-main b { font-size: 14px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-row-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.nb-count { font-size: 12px; font-weight: 700; color: var(--p); }
.nb-count.zero { color: var(--muted); font-weight: 500; }
.nb-curious { font-size: 11px; color: var(--muted); }
.nb-row-side .nb-state { padding: 2px 8px; font-size: 11px; }
.nb-state.wait { background: transparent; color: var(--warn); border: 1px dashed color-mix(in srgb, var(--warn) 60%, transparent); }
.nb-row-side .nb-state.done { font-weight: 700; }
.nb-mine-a { font-size: 11px; color: var(--ok); }
.nb-row > .ico { flex: none; width: 16px; height: 16px; color: var(--muted); }
/* 질문 상세 다시 그림 (2026-10-16 사용자 '디자인이 필요하고 사진 업로드도') — 질문 카드 · 대화처럼 이웃 답 · 아래 붙은 입력창 */
.nbq { padding-top: 6px; }
.nbq.has-composer { padding-bottom: 150px; }
.nbq-back { display: inline-block; margin: 2px 0 8px; font-size: 13px; color: var(--muted); text-decoration: none; }
.nbq-card { padding: 14px 16px 12px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nbq-card .nb-cat { font-size: 11.5px; font-weight: 600; }
.nbq-title { margin: 4px 0 8px; font-size: 18px; line-height: 1.45; letter-spacing: -0.01em; }
.nbq-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); }
.nbq-meta form { margin: 0; }
.nbq-meta .nb-chip { margin: 0; }
.nbq-msg { margin: 10px 0 0; }
.nbq-answers { margin-top: 16px; }
.nbq-ahead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 2px 10px; }
.nbq-ahead b { font-size: 14px; }
.nbq-note { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--warn); }
.nbq-note .ico { width: 13px; height: 13px; }
.nbq-summary { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); font-size: 13.5px; }
.nbq-summary b { font-size: 12px; color: var(--warn); }
.nbq-summary p { margin: 3px 0 0; }
.nbq-empty { display: flex; align-items: center; gap: 6px; margin: 4px 2px 0; font-size: 13px; color: var(--muted); }
.nbq-empty .ico { width: 15px; height: 15px; }
.nbq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nbq-list li { display: flex; align-items: flex-start; gap: 9px; }
.nbq-ava { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 700; border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
.nbq-ava.store { background: var(--p-bg); color: var(--p); border-color: color-mix(in srgb, var(--p) 25%, transparent); }
.nbq-ava .ico { width: 15px; height: 15px; }
.nbq-bubble { flex: 1; min-width: 0; padding: 9px 12px 8px; border-radius: 4px 16px 16px 16px; background: color-mix(in srgb, var(--card) 90%, transparent); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.nbq-list li.picked .nbq-bubble { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.nbq-who { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; color: var(--muted); }
.nbq-who b { color: var(--ink); font-size: 12.5px; }
.nbq-bubble p { margin: 3px 0 0; font-size: 14px; line-height: 1.55; white-space: pre-line; }
.nbq-photo { display: block; margin-top: 8px; }
.nbq-photo img { display: block; max-width: 100%; max-height: 260px; border-radius: 12px; object-fit: cover; }
.nbq-bubble .nb-acts { margin-top: 6px; }
.nbq-bubble .nb-act { padding: 3px 9px; font-size: 11.5px; }
.nbq-composer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-width: 560px; margin: 0 auto; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.nbq-composer textarea { display: block; width: 100%; border: 0; outline: 0; background: transparent; padding: 4px 2px 8px; font: inherit; font-size: 16px; color: var(--ink); resize: none; max-height: 140px; }
.nbq-composer .composer-row { display: flex; align-items: center; gap: 6px; }
.nbq-composer .send { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--p); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nbq-composer .send .ico { width: 20px; height: 20px; }
.nbq-photo-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--p); cursor: pointer; }
.nbq-photo-btn .ico { width: 18px; height: 18px; }
.nbq-hint { font-size: 11.5px; color: var(--muted); }
.nbq-as { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--p); }
.nbq-as .ico { width: 13px; height: 13px; }
.nbq-preview { position: relative; display: inline-block; margin: 0 0 6px; }
.nbq-preview[hidden] { display: none; }
.nbq-preview img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.nbq-preview-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nbq-preview-x .ico { width: 13px; height: 13px; }
.nbq-composer > .btn.kakao { display: block; }
/* 더보기 이름 줄 '답변 레벨' 배지 (2026-10-16) — 알려주기 점수로, 누르면 내 궁금해요 */
.mm-head .badge.nb-lv { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; text-decoration: none; background: var(--soft2); color: var(--muted); white-space: nowrap; }
.mm-head .badge.nb-lv .ico { width: 12px; height: 12px; }
.mm-head .badge.nb-lv-2 { background: var(--p-bg); color: var(--p-dark); }
.mm-head .badge.nb-lv-3 { background: color-mix(in srgb, var(--p) 22%, var(--card)); color: var(--p-dark); }
.mm-head .badge.nb-lv-4, .mm-head .badge.nb-lv-5 { background: var(--p); color: #fff; }
.more-pop .mm-head a.badge.nb-lv { flex: none; width: auto; min-height: 0; margin: 0 0 0 4px; padding: 2px 8px; border: 0; justify-content: flex-start; line-height: 1.5; }
/* 내 활동 점수 (2026-10-16) */
.score-card h2 { display: flex; align-items: center; gap: 6px; margin-top: 0; font-size: 16px; }
.score-card h2 .ico { width: 18px; height: 18px; color: var(--p); }
.score-card h2 .muted { font-weight: 400; }
.nbs-top { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; }
.nbs-top .badge.nb-lv { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; background: var(--soft2); color: var(--muted); }
.nbs-top .badge.nb-lv .ico { width: 13px; height: 13px; }
.nbs-top .nb-lv-2 { background: var(--p-bg) !important; color: var(--p-dark) !important; }
.nbs-top .nb-lv-3 { background: color-mix(in srgb, var(--p) 22%, var(--card)) !important; color: var(--p-dark) !important; }
.nbs-top .nb-lv-4, .nbs-top .nb-lv-5 { background: var(--p) !important; color: #fff !important; }
.nbs-pts { font-size: 22px; color: var(--p); }
.nbs-bar { display: block; width: 100%; height: 8px; border: 0; border-radius: 99px; overflow: hidden; background: var(--soft2); -webkit-appearance: none; appearance: none; }
.nbs-bar::-webkit-progress-bar { background: var(--soft2); border-radius: 99px; }
.nbs-bar::-webkit-progress-value { background: var(--p); border-radius: 99px; }
.nbs-bar::-moz-progress-bar { background: var(--p); border-radius: 99px; }
.nbs-table { margin: 10px 0; font-size: 13.5px; }
.nbs-table tr.lv-me td { background: var(--p-bg); }
/* 질문하기 '내 대화'·'이렇게 물어보세요' 서랍이 위쪽 머리줄 뒤에 깔리던 것 (2026-10-16 사용자 '질문하기는 뒤에 있어 앞으로') — 서랍은 대화창(z 5) 안이라, 열린 동안 대화창을 머리줄(z 10) 위로 */
body:has(.thread-side.open) .chat.app, body:has(.help-side.open) .chat.app { z-index: 30; }
/* 알려주기 질문 검색 (2026-10-16) */
.nb-search { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; padding: 0 12px; height: 44px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nb-search:focus-within { border-color: var(--p); }
.nb-search > .ico { width: 17px; height: 17px; color: var(--muted); flex: none; }
.nb-search input[type=search] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); padding: 0; }
.nb-search input[type=search]::-webkit-search-cancel-button { display: none; }
.nb-search-x { flex: none; display: inline-flex; color: var(--muted); }
.nb-search-x .ico { width: 16px; height: 16px; }
.nb-found { margin-top: 12px; }
.nb-found-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 2px 10px; font-size: 13.5px; }
.nb-found-intent { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--p); }
.nb-found-intent .ico { width: 13px; height: 13px; }
.nb-found-ask { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; padding: 11px 14px; border-radius: 14px; background: var(--p-bg); color: var(--p-dark); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.nb-found-ask .ico { width: 15px; height: 15px; }
.nb-found-back { display: inline-block; margin: 4px 2px; font-size: 13px; color: var(--muted); text-decoration: none; }
/* 궁금해요 쓰기 — 질문 속 가게 이름 추천 (2026-10-16) */
.nb-store-suggest { margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; background: var(--p-bg); }
.nb-store-suggest[hidden] { display: none; }
.nb-store-suggest p { display: flex; align-items: center; gap: 4px; margin: 0 0 2px; }
.nb-store-suggest p .ico { width: 13px; height: 13px; color: var(--p); }
.nb-store-suggest .nb-store-list button { border-bottom-color: color-mix(in srgb, var(--p) 15%, transparent); font-weight: 600; }
.nb-store-suggest .nb-store-list li:last-child button { border-bottom: 0; }
/* 운영팀 답 · 창립 답변자 배지 (2026-10-16) */
.nbq-ava.staff { background: var(--p); color: #fff; border-color: var(--p); }
.nb-staff { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 99px; background: var(--p); color: #fff; font-size: 11px; font-weight: 700; }
.nb-founder { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 99px; background: linear-gradient(90deg, #f59e0b, #f97316); color: #fff; font-size: 11px; font-weight: 700; }
.nb-founder .ico { width: 12px; height: 12px; }
/* 더보기 배지 = 링크 (2026-10-16 '뱃지 누르면 해당 정보로') — 회원 등급 → 이용권, 앱 사용 등급·답변 레벨 → 활동 점수 */
.more-pop .mm-head a.tier, .more-pop .mm-head a.badge.lv { display: inline-flex; flex: none; width: auto; min-height: 0; padding: 2px 8px; margin: 0; border-radius: 99px; text-decoration: none; justify-content: flex-start; line-height: 1.5; }
.more-pop .mm-head a.badge.lv { margin-left: 6px; }
/* 답변 레벨 1(이웃)은 연두색으로 시작 (2026-10-16 사용자 '불이 꺼져 있을 필요 없어') */
.mm-head .badge.nb-lv-1, .nbs-top .badge.nb-lv-1 { background: color-mix(in srgb, #84cc16 24%, var(--card)) !important; color: #3f6212 !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mm-head .badge.nb-lv-1, :root:not([data-theme="light"]) .nbs-top .badge.nb-lv-1 { color: #d9f99d !important; } }
:root[data-theme="dark"] .mm-head .badge.nb-lv-1, :root[data-theme="dark"] .nbs-top .badge.nb-lv-1 { color: #d9f99d !important; }
.more-pop .mm-head a.tier { background: var(--soft2); color: var(--muted); font-size: 12px; font-weight: 600; gap: 3px; }
.more-pop .mm-head a.tier.premium { background: var(--p); color: #fff; }
/* 더보기 이름 줄 배지 세 개를 같은 크기·같은 모양으로 (2026-10-16 사용자 '뱃지가 이상해' — 링크가 된 '달인'이 메뉴 글자 15px 를 받아 커졌고, 어두운 화면 '이웃'이 탁한 올리브색) */
.more-pop .mm-head { gap: 6px; }
.more-pop .mm-head a.tier, .more-pop .mm-head a.badge.lv, .more-pop .mm-head a.badge.nb-lv { box-sizing: border-box; height: 26px; margin: 0; padding: 0 10px; font-size: 12px; font-weight: 700; line-height: 1; align-items: center; border: 1px solid transparent; }
.more-pop .mm-head a.tier { border-color: transparent; }
/* 답변 레벨 — 앱 사용 등급처럼 빛나는 테두리, 레벨 1 연두 · 2~3 보라 테두리 · 4~5 보라 꽉 참 */
.more-pop .mm-head a.badge.nb-lv { background: rgba(132, 204, 22, .10) !important; color: #4d7c0f !important; border-color: rgba(132, 204, 22, .65); box-shadow: 0 0 6px rgba(132, 204, 22, .35); }
.more-pop .mm-head a.badge.nb-lv-2, .more-pop .mm-head a.badge.nb-lv-3 { background: rgba(107, 44, 245, .08) !important; color: var(--p) !important; border-color: color-mix(in srgb, var(--p) 60%, transparent); box-shadow: 0 0 6px color-mix(in srgb, var(--p) 35%, transparent); }
.more-pop .mm-head a.badge.nb-lv-4, .more-pop .mm-head a.badge.nb-lv-5 { background: var(--p) !important; color: #fff !important; border-color: var(--p); box-shadow: 0 0 6px color-mix(in srgb, var(--p) 45%, transparent); }
.more-pop .mm-head a.badge.nb-lv .ico { width: 12px; height: 12px; color: currentColor; }   /* 메뉴 아이콘 보라(.more-pop .ico)를 덮어 배지 글자색(연두 등)과 같게 */
:root[data-theme="dark"] .more-pop .mm-head a.badge.nb-lv-1 { color: #bef264 !important; border-color: rgba(190, 242, 100, .6); box-shadow: 0 0 6px rgba(190, 242, 100, .35); background: rgba(190, 242, 100, .08) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .more-pop .mm-head a.badge.nb-lv-1 { color: #bef264 !important; border-color: rgba(190, 242, 100, .6); box-shadow: 0 0 6px rgba(190, 242, 100, .35); background: rgba(190, 242, 100, .08) !important; } }
.nbq-owner-login { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; background: var(--card); }
/* 주민으로 보는 중 — 가게 이름으로 답하기 (2026-10-16) */
.nbq-as-store { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 8px 12px; border-radius: 14px; background: var(--p-bg); color: var(--p-dark); font-size: 13px; text-decoration: none; }
.nbq-as-store .ico { width: 15px; height: 15px; }
.nbq-as-store span { color: var(--muted); font-size: 12px; }

/* 가게 이벤트·할인 (쿠폰 모아보기 아래, 2026-10-18) */
.sec-title{font-size:17px;margin:26px 0 4px}
.sec-title small{color:var(--muted,#888);font-weight:500;font-size:13px;margin-left:4px}
.coupon.ev .coupon-body{flex:1}
.coupon.ev .c-title{font-weight:600}

/* 신고·이웃 글 안내 (2026-10-18 법적 점검) */
.rep{display:inline-block;margin-left:auto}
.rep>summary{list-style:none;cursor:pointer;font-size:12px;color:var(--muted,#888);display:inline-flex;gap:3px;align-items:center}
.rep>summary::-webkit-details-marker{display:none}
.rep .icon{width:13px;height:13px}
.rep-form{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;padding:8px;border:1px solid var(--line,#e5e5e5);border-radius:10px;background:var(--card,#fff)}
.rep-form select,.rep-form input[type=text]{flex:1 1 180px;min-width:0;font-size:13px;padding:6px 8px;border:1px solid var(--line,#ddd);border-radius:8px}
.nb-warn{margin:8px 0 0;padding:8px 10px;border-radius:10px;background:#FFF7E6;color:#8A5A00;font-size:13px;display:flex;gap:6px;align-items:flex-start}
.nb-warn .icon{flex:0 0 auto;width:15px;height:15px;margin-top:2px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .nb-warn{background:#3a2e14;color:#f3d48a}}
:root[data-theme="dark"] .nb-warn{background:#3a2e14;color:#f3d48a}
.nb-rules .icon{width:13px;height:13px;vertical-align:-2px}
.consent .consent-check{display:flex;gap:8px;align-items:flex-start;margin:10px 0;font-size:15px;line-height:1.5}
.consent .consent-check input{margin-top:4px;flex:0 0 auto}
.ai-notice{margin:6px 4px 0;font-size:11px;line-height:1.45;color:var(--muted,#888);text-align:center}
.ai-notice a{color:inherit;text-decoration:underline}
.src-note{max-width:640px;margin:6px auto 0;line-height:1.55}

/* 모임 게시판 (2026-10-18 — 대화창 대신 글 목록 → 글 보기·리액션·댓글) */
.gp-notice { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 6px 0 10px; border-radius: 12px; background: var(--p-bg); color: var(--p-dark); font-size: 14px; text-decoration: none; }
.gp-notice > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-notice .ico { flex: none; width: 16px; height: 16px; }
.gp-write { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.gp-write > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 600; color: var(--p); }
.gp-write > summary::-webkit-details-marker { display: none; }
.gp-write > summary .ico { width: 18px; height: 18px; }
.gp-write[open] > summary { border-bottom: 1px solid var(--line); }
.gp-write form { padding: 12px 14px; gap: 10px; }
.gp-write textarea { width: 100%; min-height: 110px; }
.gp-write-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gp-write-row .btn { margin-left: auto; }
.gp-photo { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--muted); cursor: pointer; }
.gp-photo input { display: none; }
.gp-photo.on { color: var(--p); border-color: var(--p); }
.gp-photo .ico { width: 17px; height: 17px; }
.gp-list { display: grid; gap: 10px; }
.gp-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; }
.gp-card.pinned { border-color: var(--p); }
.gp-head { display: flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0; }
.gp-head time { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.gp-me, .gp-tag, .gp-new { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--soft2); color: var(--muted); }
.gp-tag { background: var(--p-bg); color: var(--p-dark); }
.gp-new { background: var(--p); color: #fff; }
.gp-main { display: flex; gap: 10px; align-items: flex-start; }
.gp-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.5; white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
.gp-thumb { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--soft2); }
.gp-foot { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.gp-foot .ico { width: 15px; height: 15px; }
.gp-rx, .gp-cm { display: inline-flex; align-items: center; gap: 4px; }
.gp-rx.on { color: var(--p); }
.gp-post { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.gp-post .gp-head .gc-more > div, .gp-cmt .gc-more > div { right: 0; bottom: auto; top: 100%; }
.gp-body { font-size: 16px; line-height: 1.65; word-break: break-word; }
.gp-imgwrap { display: block; }
.gp-img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; background: var(--soft2); }
.gp-react { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--line); }
.gp-react form { margin: 0; }
.gp-rbtn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 13.5px; cursor: pointer; }
.gp-rbtn .ico { width: 16px; height: 16px; }
.gp-rbtn.on { border-color: var(--p); background: var(--p-bg); color: var(--p-dark); }
.gp-rbtn b:empty { display: none; }
.gp-comments { margin-top: 16px; }
.gp-comments h2 { font-size: 15px; margin: 0 0 8px; }
.gp-cmt { padding: 10px 0; border-bottom: 1px solid var(--line); }
.gp-cmt-head { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.gp-cmt-head time { margin-left: auto; font-size: 12px; color: var(--muted); }
.gp-cmt p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; word-break: break-word; }
.gp-cform { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.gp-cform textarea { flex: 1; min-height: 44px; }

/* 모임 투표 (2026-10-18) */
.gp-poll { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.gp-poll-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.gp-poll-head .ico { width: 17px; height: 17px; color: var(--p); }
.gp-opt { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; overflow: hidden; }
.gp-opt.on { border-color: var(--p); }
.gp-opt input { margin: 0; accent-color: var(--p); }
.gp-opt-label { font-size: 15px; word-break: break-word; position: relative; z-index: 1; }
.gp-opt-n { font-size: 12.5px; color: var(--muted); white-space: nowrap; position: relative; z-index: 1; }
.gp-opt.top .gp-opt-n { color: var(--p); font-weight: 700; }
.gp-opt-bar { position: absolute; inset: 0; pointer-events: none; }
.gp-opt-bar i { display: block; height: 100%; background: var(--p-bg); }
.gp-poll-row { display: flex; align-items: center; gap: 12px; }
.gp-poll-close { margin: -4px 0 0; }
.gp-poll-close .link { font-size: 13px; color: var(--muted); }
.gp-poll-add { display: grid; gap: 8px; }
.gp-poll-add > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--p); }
.gp-poll-add > summary::-webkit-details-marker { display: none; }
.gp-poll-add > summary .ico { width: 16px; height: 16px; }
.gp-poll-add[open] { padding: 10px; border: 1px dashed var(--line); border-radius: 10px; }
.gp-poll-add input:not([type]) { width: 100%; }
.gp-poll-end { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.gp-opt-bar i.w0 { width: 0%; }
.gp-opt-bar i.w5 { width: 5%; }
.gp-opt-bar i.w10 { width: 10%; }
.gp-opt-bar i.w15 { width: 15%; }
.gp-opt-bar i.w20 { width: 20%; }
.gp-opt-bar i.w25 { width: 25%; }
.gp-opt-bar i.w30 { width: 30%; }
.gp-opt-bar i.w35 { width: 35%; }
.gp-opt-bar i.w40 { width: 40%; }
.gp-opt-bar i.w45 { width: 45%; }
.gp-opt-bar i.w50 { width: 50%; }
.gp-opt-bar i.w55 { width: 55%; }
.gp-opt-bar i.w60 { width: 60%; }
.gp-opt-bar i.w65 { width: 65%; }
.gp-opt-bar i.w70 { width: 70%; }
.gp-opt-bar i.w75 { width: 75%; }
.gp-opt-bar i.w80 { width: 80%; }
.gp-opt-bar i.w85 { width: 85%; }
.gp-opt-bar i.w90 { width: 90%; }
.gp-opt-bar i.w95 { width: 95%; }
.gp-opt-bar i.w100 { width: 100%; }
.gp-opt input { position: relative; z-index: 1; }
.gp-write .gp-photo input[type=file] { display: none; }
.gp-write .gp-photo { display: inline-flex; flex-direction: row; width: auto; }

/* 모임 위쪽 대화창 (2026-10-18 '아래는 게시판, 위는 최근 글 대화창') */
.gt { display: grid; gap: 0; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--bubble); overflow: hidden; }
.gt-post { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.gt-label { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--p); }
.gt-label .ico { width: 14px; height: 14px; }
.gt-q { font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-more { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.gt-more .ico { width: 14px; height: 14px; }
.gt-log { display: flex; flex-direction: column; gap: 8px; height: 260px; overflow-y: auto; padding: 12px; overscroll-behavior: contain; }
.gt-log .gc-msg { flex: none; }
.gt-empty { margin: auto; text-align: center; }
.gt-input { margin: 0 10px 10px; }
.gp-list-title { font-size: 15px; margin: 4px 0 8px; }

/* 모임 게시판 — 최신 글 펼침 + 나머지 한 줄 (2026-10-18) */
.gp-latest { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--p); border-radius: 14px; background: var(--card); }
.gp-tag-new { background: var(--p); color: #fff; }
.gp-latest-body { margin: 0; font-size: 15.5px; line-height: 1.6; word-break: break-word; }
.gp-latest-poll { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--p-bg); color: var(--p-dark); text-decoration: none; font-size: 14px; }
.gp-latest-poll .ico { flex: none; width: 16px; height: 16px; }
.gp-latest-poll span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-latest-poll b { white-space: nowrap; font-size: 13px; }
.gp-latest-foot { padding-top: 8px; border-top: 1px solid var(--line); text-decoration: none; }
.gp-go { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: var(--p); font-weight: 600; }
.gp-rows { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.gp-line { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14.5px; min-width: 0; }
.gp-line:last-child { border-bottom: 0; }
.gp-line .ico { flex: none; width: 15px; height: 15px; color: var(--muted); }
.gp-line .gp-tag { flex: none; }
.gp-line-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-line-cm { flex: none; color: var(--p); font-size: 13px; font-weight: 600; }
.gp-line-meta { flex: none; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.gp-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--p); }
.gt-log { height: auto; min-height: 72px; max-height: 260px; }   /* 말이 없을 땐 작게 (2026-10-18) */

/* 모임 — 최신 글 칸 강조·전체 대비 올림 (2026-10-18 '힘이 없어 흐리멍텅, 최신 글은 메인 보라색') */
.gt { border: 2px solid var(--p); background: var(--card); box-shadow: 0 6px 20px rgba(107,44,245,.14); }
.gt-band { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg, #DB2777, #8B5CF6); color: #fff; font-size: 13px; }
.gt-band .ico { width: 16px; height: 16px; flex: none; }
.gt-band b { font-size: 14.5px; font-weight: 800; }
.gt-band span { opacity: .9; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-band a { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.gt-band a .ico { width: 14px; height: 14px; }
.gt-body { display: grid; gap: 12px; padding: 14px; }
.gt-text { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.6; color: var(--ink); word-break: break-word; }
.gt-foot { padding-top: 10px; border-top: 1px solid var(--line); text-decoration: none; }
.gt-log { background: var(--bubble); border-top: 1px solid var(--line); }
.gt-input { margin: 0; border-radius: 0; border: 0; border-top: 1px solid var(--line); padding: 8px 10px; }
.gt .gp-poll { background: var(--p-bg); border-color: transparent; }
.gt .gp-poll-head b { color: var(--p-dark); }
.gp-list-title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 18px 2px 8px; }
.gp-rows { border: 1.5px solid var(--line); }
.gp-line { font-weight: 500; color: var(--ink); }
.gp-line-meta { color: var(--muted); }
.gp-write { border-width: 1.5px; }
.gp-write > summary { font-weight: 800; }
.gp-notice { font-weight: 600; border: 1.5px solid var(--p); }
.gt-band { position: relative; }
.gt-more { margin-left: auto; }
.gt-more > summary { color: #fff; padding: 2px 4px; }
.gt-more > summary .ico { width: 18px; height: 18px; }
.gt-more > div { right: 0; left: auto; top: 100%; bottom: auto; color: var(--ink); }
.gt-more > div > button, .gt-more > div > a { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; color: var(--ink); font-size: 13.5px; border-radius: 8px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.gt-react { padding-top: 10px; border-top: 1px solid var(--line); }
.gt { overflow: visible; }
.gt-band { border-radius: 14px 14px 0 0; }
.gt-input { border-radius: 0 0 14px 14px; }
.gt-more > div > a, .gc-more a.gc-edit { font-weight: 400; }

/* 투표 칸 작게 (2026-10-18 '투표창은 크지 않게') */
.gp-poll { gap: 5px; padding: 10px; border-radius: 10px; }
.gp-poll-head { font-size: 13px; }
.gp-poll-head b { font-size: 13.5px; }
.gp-poll-head .ico { width: 15px; height: 15px; }
.gp-opt { padding: 6px 10px; gap: 6px; border-radius: 8px; }
.gp-opt-label { font-size: 14px; }
.gp-opt-n { font-size: 12px; }
.gp-opt input { width: 15px; height: 15px; }
.gp-poll-row { margin-top: 2px; }
.gp-poll-row .btn.small { padding: 6px 14px; font-size: 13px; min-height: 0; }
.gp-poll-links { display: flex; gap: 14px; margin: -2px 2px 0; }
.gp-poll-links .gp-poll-close { margin: 0; }
.gp-poll-links .link { font-size: 12.5px; padding: 0; }
.gp-poll-edit { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1.5px solid var(--p); border-radius: 12px; }
.gp-poll-edit legend { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font-weight: 800; color: var(--p-dark); }
.gp-poll-edit legend .ico { width: 16px; height: 16px; }
.gp-opt-edit { display: flex; align-items: center; gap: 8px; }
.gp-opt-edit input { flex: 1; }
.gp-danger { color: #B42318; }
.form .gp-opt-edit { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.form .gp-opt-edit input { flex: 1; margin: 0; }
.form .gp-opt-edit small { flex: none; min-width: 32px; text-align: right; }
.gp-poll-edit > p { margin: 0; }
.gc-unread { font-size: 11px; font-weight: 800; color: #E8A400; line-height: 1; min-height: 11px; }   /* 안 읽은 회원 수 (2026-10-18) */
.gt-band em { font-style: normal; font-weight: 800; }
.gc-meta b.gc-unread { all: unset; display: block; font-size: 11px; font-weight: 800; color: #E8A400; line-height: 1.1; text-align: center; }
.gc-meta b.gc-unread:empty { display: none; }

/* 모임에 보내기 (2026-10-18) */
.gs-label { font-weight: 800; margin: 4px 0 6px; }
.gs-groups { display: grid; gap: 8px; }
.gs-group { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; margin: 0 !important; }
.gs-group:has(input:checked) { border-color: var(--p); background: var(--p-bg); }
.gs-group input { margin: 0; accent-color: var(--p); flex: none; width: auto !important; }
.gs-group img { width: 56px; height: 32px; object-fit: cover; border-radius: 6px; flex: none; }
.gs-ico { width: 56px; height: 32px; border-radius: 6px; background: var(--soft2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gs-group > span:last-child { display: grid; min-width: 0; }
.gs-group b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 대화·댓글 사진 붙이기 (2026-10-18) */
.gt-photo { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--muted); cursor: pointer; }
.gt-photo .ico { width: 20px; height: 20px; }
.gt-photo input { display: none; }
.gt-photo.on { color: #fff; background: var(--p); }
.gp-cform { align-items: center; }
.gp-cmt-img { display: block; max-width: 220px; margin-top: 6px; border-radius: 10px; }
.gt-log .gc-bubble { min-width: 0; }
.gt-log .gp-imgwrap { display: block; max-width: 200px; }
.gt-log img.gc-img, .gp-cmt img.gp-cmt-img { display: block; width: auto; height: auto; max-width: 200px; max-height: 220px; object-fit: cover; border-radius: 10px; }
.gt { min-width: 0; max-width: 100%; }
.gt { grid-template-columns: minmax(0, 1fr); }
.gt > * { min-width: 0; }
.gt-log .gc-bubble:has(> .gp-imgwrap:only-child) { padding: 0; background: none; border: 0; }
.gt-log .gc-bubble > .gp-imgwrap + .pre-line { margin-top: 2px; }

/* 좁은 휴대폰 머리줄 넘침 (2026-10-18 '알려주기에 스크롤이 생김' — 가로 360 에서 ☰ 가 더해지면 더보기가 밀려 가로 스크롤) */
.top { min-width: 0; }
.top .brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.top .brand-text { min-width: 0; overflow: hidden; }
.top .brand-name, .top .brand-area { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .top-right { flex: none; }
@media (max-width: 380px) { .top.has-tabs .brand-area { display: none; } }
.grp-cats { margin: 16px 0 10px; padding: 0; }   /* 화면 밖 2px 넘침 (2026-10-18) */
/* 알려주기 하위 탭이 줄 밖으로 삐져나가 가로로 밀리던 것 (2026-10-18) */
.nb-bar { overflow: hidden; }
.nb-bar .nb-subtabs { min-width: 0; gap: 14px; overflow: hidden; }
.nb-bar .nb-subtabs a { white-space: nowrap; }
.nb-bar .nb-chip { flex: none; }
@media (max-width: 360px) { .nb-bar .nb-subtabs { gap: 10px; } .nb-bar .nb-subtabs a { font-size: 13px; } }

/* PC·휴대폰에 설치한 앱 창에서는 스크롤 막대 숨김 — 휠·손가락으로 내리기는 그대로 (사용자 2026-10-18 'PC 설치용에서 스크롤이 보임') */
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: window-controls-overlay) {
  html, body, .thread-side, .nb-side, .more-pop { scrollbar-width: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar, .thread-side::-webkit-scrollbar, .more-pop::-webkit-scrollbar { width: 0; height: 0; display: none; }
}

/* 알려주기 — 모임 탭 (2026-10-18 '보이는 모임을 카테고리별로') */
.nbg-cat { font-size: 15px; font-weight: 800; margin: 16px 2px 8px; }
.nbg-cat small { color: var(--p); font-size: 13px; }
.nbg-list { display: grid; border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.nbg-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
.nbg-item:last-child { border-bottom: 0; }
.nbg-item img, .nbg-ico { flex: none; width: 64px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--soft2); display: inline-flex; align-items: center; justify-content: center; }
.nbg-txt { flex: 1; min-width: 0; display: grid; }
.nbg-txt b, .nbg-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbg-txt small { color: var(--muted); font-size: 12.5px; }
.nbg-meta { flex: none; text-align: right; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
@media (max-width: 340px) { .nb-bar .nb-subtabs small { display: none; } .nb-bar .nb-subtabs { gap: 10px; } }
.nbg-item[hidden], .nbg-group[hidden] { display: none; }
.nbg-make { text-align: center; margin: 14px 0 4px; }
.nbg-find { flex: 0 1 132px; min-width: 96px; display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); }
.nbg-find[hidden] { display: none; }
.nbg-find:focus-within { border-color: var(--p); }
.nbg-find .ico { width: 15px; height: 15px; color: var(--muted); flex: none; }
.nbg-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink); padding: 0; }

/* 알려주기 통합 검색 (2026-10-18) */
.uf-sum { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--p); }
.uf-sum p { margin: 0; font-size: 15px; line-height: 1.65; }
.uf-ai { justify-self: start; font-size: 11px; font-weight: 800; color: var(--p); background: var(--p-bg); padding: 2px 8px; border-radius: 99px; }
.uf-sec { display: grid; gap: 8px; margin-top: 14px; }
.uf-sec h3 { margin: 0; font-size: 15px; font-weight: 800; }
.uf-sec h3 small { color: var(--p); font-size: 13px; }
.uf-info { padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.uf-info p { margin: 4px 0 0; font-size: 14px; }
.grp-store { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: var(--p); padding: 1px 7px; border-radius: 99px; margin-right: 2px; }
.og-quota { display: grid; gap: 8px; }
.og-quota p { margin: 0; }
.og-packs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.og-list { margin: 12px 0; }
.og-new { margin-top: 12px; }
.nbg-type { display: inline-flex; align-items: center; gap: 8px; margin: 10px 2px 2px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.nbg-type select { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-weight: 600; }
/* CCTV — 검색어 줄 (2026-10-18) */
.cam-row:has(.cam-kw) { grid-template-columns: 1fr auto; row-gap: 2px; }
.cam-row .cam-kw { grid-column: 1; grid-row: 2; white-space: normal; color: var(--p-dark); font-weight: 600; }
.cam-row:has(.cam-kw) > a { grid-column: 2; grid-row: 1 / span 2; }

/* 플로팅 줄 [브리핑][BGM] + 아래에서 올라오는 브리핑 패널 (2026-10-18) */
.fab-row { position: absolute; right: 12px; bottom: calc(100% + 8px); z-index: 2; display: flex; align-items: center; gap: 8px; }
/* 배경음악 줄이 켜지면 같은 자리라 브리핑 단추를 그 위로 올림 (2026-10-18 — 줄이 단추를 덮던 것) */
html.radio-bar-on .fab-row { bottom: calc(100% + 16px + var(--rbar-h, 50px)); }
.fab-row.loose { position: fixed; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20; }
.fab-row .radio-fab, .chat-input .fab-row .radio-fab.in-chat { position: static; right: auto; bottom: auto; }
.fab-pill { height: 34px; padding: 0 12px 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800;
  color: var(--ink); background: color-mix(in srgb, var(--card) 72%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 2px 10px rgba(0,0,0,.08); white-space: nowrap; }
.fab-pill .ico { width: 15px; height: 15px; }
.brief-pill > .ico:first-child { color: #f59e0b; }
.brief-pill .bp-short { display: none; }
.brief-pill .bp-play { display: inline-flex; color: var(--p); }
.brief-pill .bp-time { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.brief-pill.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #DB2777, #8B5CF6); }
.brief-pill.on .bp-play, .brief-pill.on .bp-time, .brief-pill.on > .ico:first-child { color: #fff; }
.brief-pill.loading { opacity: .6; }
.brief-tip { position: absolute; right: 0; bottom: calc(100% + 8px); padding: 6px 10px; border-radius: 10px; background: var(--ink); color: var(--card); font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.brief-tip::after { content: ''; position: absolute; right: 60%; top: 100%; border: 6px solid transparent; border-top-color: var(--ink); }
@media (max-width: 380px) { .brief-pill .bp-lab, .brief-pill .bp-time { display: none; } .brief-pill .bp-short { display: inline; } .fab-row .radio-fab .rf-lab { display: none; } .fab-row .radio-fab { padding: 0 10px; } }
.bs-dim { position: fixed; inset: 0; z-index: 60; background: rgba(10, 6, 20, .45); opacity: 0; transition: opacity .3s ease-out; }
.bs-dim.open { opacity: 1; }
.bs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-width: 640px; margin: 0 auto; max-height: 85vh; max-height: 85dvh; display: flex; flex-direction: column;
  background: var(--card); color: var(--ink); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.2); transform: translateY(100%); transition: transform .3s ease-out; padding-bottom: env(safe-area-inset-bottom); outline: none; }
.bs.open { transform: translateY(0); }
.bs-grab { width: 40px; height: 5px; border-radius: 99px; background: var(--line); margin: 8px auto 2px; flex: none; }
.bs-head { display: flex; align-items: center; gap: 8px; padding: 6px 16px 10px; flex: none; }
.bs-head h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 800; }
.bs-x { border: 0; background: var(--soft2); color: var(--ink); width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bs-x .ico { width: 18px; height: 18px; }
.bs-body { overflow-y: auto; padding: 0 16px 8px; display: grid; gap: 14px; overscroll-behavior: contain; }
.bs-player { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--p-bg); }
.bs-playbtn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--p); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bs-playbtn .ico { width: 22px; height: 22px; }
.bs-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--p) 22%, transparent); overflow: hidden; cursor: pointer; }
.bs-bar i { display: block; height: 100%; width: 0; background: var(--p); border-radius: 99px; }
.bs-time { font-size: 12.5px; font-weight: 700; color: var(--p-dark); font-variant-numeric: tabular-nums; }
.bs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-chip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.bs-sec h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.bs-sec ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; }
.bs-sec a { color: var(--ink); }
.bs-script summary { cursor: pointer; font-weight: 700; color: var(--p); }
.bs-script p { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
.bs-foot { padding: 10px 16px 14px; border-top: 1px solid var(--line); flex: none; }
.bs-share .ico { width: 16px; height: 16px; vertical-align: -3px; }
html.bs-on body { overflow: hidden; }
.rd-brief { display: grid; gap: 8px; margin-bottom: 14px; }
.rd-brief h2 { margin: 0; font-size: 17px; }
.rd-brief audio { width: 100%; }
.rd-script { font-size: 14px; color: var(--muted); }

/* 아래 안내 줄 (2026-10-18 '이쁘게, 유하게') */
.biz-fold > summary { display: grid; justify-items: center; gap: 5px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 0; }
.foot-links > a, .foot-links > .biz-open { color: var(--muted); text-decoration: none; font-size: 11.5px; padding: 2px 8px; border-radius: 99px; }
.foot-links > * + *::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, transparent); margin: 0 8px 0 -8px; vertical-align: middle; }
.foot-links > a:hover, .foot-links > .biz-open:hover { background: var(--p-bg); color: var(--p-dark); }
.foot-links b { color: var(--ink); font-weight: 700; }
.biz-private { font-size: 11px; color: color-mix(in srgb, var(--muted) 85%, transparent); letter-spacing: -.01em; }
.foot-review { font-size: 11px; color: var(--muted); }
/* 버스 도착 페이지 /bus (2026-10-18) — 동별 정류장 칸, 펼치면 쪽(방면)마다 도착 줄 */
.bus-page .head-row h1 { display: inline-flex; align-items: center; gap: 8px; }
.bus-page .head-row h1 .ico { width: 24px; height: 24px; color: var(--p); }
.bus-lead { margin: 4px 0 12px; }
.bus-find { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 46px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); position: sticky; top: 8px; z-index: 3; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.bus-find .ico { width: 18px; height: 18px; color: var(--muted); flex: none; }
.bus-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15.5px; color: var(--ink); }
.bus-sec { margin-top: 18px; }
.bus-sec h2 { font-size: 15px; margin: 0 0 8px; display: flex; align-items: baseline; gap: 6px; }
.bus-sec h2 small { font-weight: 500; font-size: 12.5px; }
.bus-list { display: grid; gap: 8px; }
.bus-stop { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.bus-stop.fav { border-color: color-mix(in srgb, var(--p) 35%, var(--line)); }
.bus-stop > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 12px 8px 12px 14px; cursor: pointer; }
.bus-stop > summary::-webkit-details-marker { display: none; }
.bst-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.bst-name { font-size: 15.5px; font-weight: 700; overflow-wrap: anywhere; }
.bst-rt { display: flex; flex-wrap: wrap; gap: 4px; }
.bst-rt i { font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--p-bg); color: var(--p); font-variant-numeric: tabular-nums; }
.bst-rt i.more { background: var(--soft2); color: var(--muted); }
.bst-star { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 99px; color: var(--track); cursor: pointer; }
.bst-star .ico { width: 20px; height: 20px; }
.bst-star[aria-pressed="true"] { color: #f59e0b; }
.bst-star[aria-pressed="true"] .ico { fill: currentColor; }
.bst-chev { flex: none; color: var(--muted); display: grid; place-items: center; transition: transform .2s; }
.bst-chev .ico { width: 18px; height: 18px; }
.bus-stop[open] .bst-chev { transform: rotate(180deg); }
.bus-arr { padding: 0 14px 4px; border-top: 1px solid var(--line); }
.ba-side { padding-top: 10px; }
.ba-dir { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.ba-list { list-style: none; margin: 0; padding: 0; }
.ba-list li { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.ba-list li:last-child { border-bottom: 0; }
.ba-no { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ba-min { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ba-min.soon { color: #e11d48; }
.ba-prev { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ba-times { margin: 4px 0 6px; padding-left: 18px; font-size: 13.5px; color: var(--muted); }
.bus-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 10px 14px; }
.bus-ref { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.bus-ref .ico { width: 14px; height: 14px; }
.bus-src { margin-top: 18px; }
.bus-empty { margin-top: 14px; }
/* 첫 화면 [버스] 칸 */
.rt-bus .pop-item { display: flex; justify-content: space-between; gap: 8px; }
/* 모임 이름 줄 알림 단추 (2026-10-18) — 켜짐은 보라, 꺼짐은 흐리게 */
.grp-noti { display: contents; }
.grp-noti .grp-ibtn { color: var(--muted); }
.grp-noti .grp-ibtn.on { color: var(--p); border-color: color-mix(in srgb, var(--p) 40%, var(--line)); }
.grp-noti .grp-ibtn .ico { width: 19px; height: 19px; }
/* 휴대폰 알림 [켜기] 위 말풍선 (2026-10-18) — 꺼져 있을 때만, 살짝 위아래로 */
.push-line { position: relative; }
.push-tip { position: absolute; right: 8px; bottom: calc(100% + 2px); z-index: 2; padding: 6px 11px; border-radius: 10px; background: var(--p); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 12px rgba(107,44,245,.28); pointer-events: none; animation: pushTip 1.6s ease-in-out infinite; }
.push-tip::after { content: ''; position: absolute; right: 22px; top: 100%; border: 6px solid transparent; border-top-color: var(--p); }
@keyframes pushTip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .push-tip { animation: none; } }
.push-line:has(> .push-tip:not([hidden])) { margin-top: 46px; }   /* 말풍선이 위 글을 덮지 않게 */
/* 끌어내릴 때 화면이 늘어나거나(아이폰 — 머리줄이 같이 내려옴) 새로 고침되던 것(안드로이드 앱) 막기 — 둘 다 (2026-10-18 사용자) */
html, body { overscroll-behavior-y: none; }
/* 첫 화면 [소식][버스][날씨] 칸 위 선 아이콘 (2026-10-18 — 빛나던 점 자리, 한 가지 색) — 천천히 살짝 떠오름 */
.rt-emo { display: inline-flex; line-height: 1; color: var(--p); animation: rtEmo 2.4s ease-in-out infinite; }
.rt-emo .ico { width: 19px; height: 19px; }
.rt-tab.on .rt-emo { color: var(--p-dark); }
.rt-tab:nth-child(2) .rt-emo { animation-delay: .4s; }
.rt-tab:nth-child(3) .rt-emo { animation-delay: .8s; }
@keyframes rtEmo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .rt-emo { animation: none; } }
/* 소식 NEW · 버스 BUS 글자 배지 — 선 아이콘과 같은 높이·한 가지 색 테두리 (2026-10-18 사용자) */
.rt-word { height: 19px; padding: 0 5px; align-items: center; border: 1.5px solid currentColor; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; font-family: inherit; }
/* 날씨 칸만 색 있는 날씨 이모지 (사용자 2026-10-18 '날씨는 색이 있는 구름·태양·비') */
.rt-wxe { font-size: 19px; height: 19px; align-items: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
/* 첫 화면 [날씨] 칸 일주일 (2026-10-18) — 날짜 · 그림 · 하늘 · 비 확률(30% 이상) · 최저/최고 */
.wx-week { list-style: none; margin: 8px 0 4px; padding: 0; }
.wx-week li { display: grid; grid-template-columns: 58px 26px minmax(0, 1fr) 40px 70px; align-items: center; gap: 6px; padding: 7px 2px; border-top: 1px solid var(--line); font-size: 14px; }
.wx-week li.today { font-weight: 700; }
.ww-day { display: inline-flex; align-items: baseline; gap: 4px; }
.ww-day small { font-size: 12px; color: var(--muted); }
.ww-day small.sat { color: #2563eb; } .ww-day small.sun { color: #e11d48; }
.ww-emo { font-size: 18px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ww-sky { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.ww-pop { color: #2563eb; font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ww-t { display: inline-flex; justify-content: flex-end; gap: 8px; font-variant-numeric: tabular-nums; }
.ww-t i { font-style: normal; } .ww-t .lo { color: #2563eb; } .ww-t .hi { color: #e11d48; font-weight: 700; }
/* 가게 화면 단추 줄 — 좁은 폰에서 '추천해요 1'이 넘치던 것 (2026-10-19): 모임에·공유는 아이콘만 정사각, 팔로우·추천이 나머지를 나눔 */
.sns-row > .sns-group, .sns-row > .sns-share { flex: 0 0 40px; padding: 0; }
.sns-row > .sns-group span, .sns-row > .sns-share [data-share-tip] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sns-btn { white-space: nowrap; overflow: hidden; }
.sns-row > .sns-group, .sns-row > .sns-share { position: relative; }
.sns-share.shared { color: var(--p); border-color: var(--p); }   /* 링크 복사됨 — 글자가 숨어 있어 색으로 */
@media (max-width: 380px) { .sns-btn { font-size: 13.5px; gap: 3px; padding: 0 6px; } .sns-btn .ico { width: 16px; height: 16px; } .sns-row { gap: 6px; } }
@media (max-width: 340px) { .sns-like .lk-lab { display: none; } }   /* 아주 좁은 폰은 하트·수만 */
.wx-later { color: #2563eb; font-weight: 700; font-size: .9em; }   /* '21시부터 비' (2026-10-20) */
/* 날씨 칸 시간대별 12시간 (2026-10-20) — 옆으로 미는 줄 */
.wx-hours { list-style: none; margin: 8px 0 2px; padding: 2px 0 6px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.wx-hours::-webkit-scrollbar { display: none; }
.wx-hours li { flex: none; width: 50px; display: grid; justify-items: center; gap: 3px; padding: 7px 0; border-radius: 12px; background: var(--soft2); font-size: 12.5px; }
.wx-hours li.wet { background: color-mix(in srgb, #2563eb 12%, var(--card)); }
.wh-t { color: var(--muted); font-size: 12px; }
.wh-c { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.wh-p { color: #2563eb; font-weight: 700; font-size: 11.5px; min-height: 14px; }
/* ── PC 화면 다듬기 (사용자 2026-10-20 'PC 화면도 잘 다듬어야') ──
   ① 넓은 화면은 내용 폭 560 → 720 ② 왼쪽 메뉴(1100px 이상 늘 보임)가 있으면 입력창·알려주기 목록도 남은 공간 가운데로(전엔 화면 전체 가운데라 위 내용과 어긋남)
   ③ 입력창 뒤 불투명 네모 → 반투명·흐림 (날씨 사진 배경 위에서 네모가 떠 보이던 것) */
@media (min-width: 1100px) {
  body:has(.thread-side) .chat-input, body:has(.thread-side) .nbq-composer { left: 270px; }
  body:has(.thread-side) main.wrap:not(.wide) { margin-left: calc(270px + (100vw - 270px - min(560px, 100vw - 302px)) / 2); margin-right: 0; }
  .chat-input.composer { background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 22px 22px 0 0; }
}
@media (min-width: 1200px) {
  .wrap, .chat.app, .chat-input, .nbq-composer { max-width: 720px; }
  .rt-grid, .pop-q { max-width: none; }
  body:has(.thread-side) main.wrap:not(.wide) { margin-left: calc(270px + (100vw - 270px - min(720px, 100vw - 302px)) / 2); }
}
/* 질문하기/알려주기 단추 — 왼쪽 메뉴가 있으면 남은 공간 가운데로 (2026-10-20 '한쪽으로 쏠림') */
@media (min-width: 1100px) { body:has(.thread-side) .nb-tabs { left: calc(270px + (100% - 270px) / 2); } }
.kakao-only { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--soft2); font-size: 13px; color: var(--ink); }   /* 카카오에서 받는 정보 알림 (2026-10-20) */
.kakao-only .ico { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--p); }
/* ── 사장님·관리자 화면 PC (사용자 2026-10-20 '가게 페이지도 PC에서 다듬어야') ──
   메뉴를 화면 왼쪽 끝에 붙이고(전엔 가운데 1000px 안에 메뉴·내용이 몰림), 내용·입력창은 남은 공간 가운데로(입력창이 화면 전체 가운데라 대화와 어긋나던 것) */
@media (min-width: 1100px) {
  main.wrap.wide:has(> .owner-layout) { max-width: none; margin: 0; padding: 0; }
  .owner-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 0; }
  .owner-layout > .owner-side { position: sticky; top: var(--top-h, 0px); margin: 0; height: calc(100vh - var(--top-h, 0px)); max-height: none; padding: 18px 12px; border-radius: 0; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .owner-layout > .owner-main { width: 100%; max-width: 780px; margin: 0 auto; padding: 12px 24px 40px; }
  .owner-layout:has(> .owner-side[aria-label="관리자 메뉴"]) > .owner-main { max-width: 1100px; }   /* 관리자 표는 넓게 */
  .owner-layout.side-hidden { grid-template-columns: minmax(0, 1fr); }
  body:has(.owner-layout:not(.side-hidden)) .chat-input { left: 250px; }
}
/* 사장님 [가게 업데이트]/[손님처럼 검색] — 시작 화면 질문하기/알려주기와 같은 스위치 (2026-10-20) */
.mode-tabs { position: relative; width: min(320px, calc(100% - 16px)); padding: 3px; margin: 12px auto 6px; border-radius: 99px;
  background: color-mix(in srgb, var(--soft2) 70%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mode-tabs .mode-tab { flex: 1; position: relative; z-index: 1; height: 34px; padding: 0 6px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: -.01em; transition: color .2s; white-space: nowrap; }
.mode-tabs .mode-tab .ico { width: 15px; height: 15px; }
.mode-tabs .mode-tab.on { background: transparent; color: #fff; }
.mode-tabs .mode-tab:not(.on):hover { color: var(--ink); }
.mode-tabs[data-at="search"] .nb-tab-pill { transform: translateX(100%); }
/* 관리자 홍보 현황 (2026-10-20) */
.promo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.promo-cards .pc { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.promo-cards .pc span { font-size: 12.5px; color: var(--muted); }
.promo-cards .pc b { font-size: 24px; font-variant-numeric: tabular-nums; }
.promo-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.promo-table th, .promo-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.promo-table th:first-child, .promo-table tbody th { text-align: left; }
.promo-table .bar-col { width: 30%; }
.pbar { display: block; height: 8px; border-radius: 99px; background: var(--soft2); overflow: hidden; }
.pbar i { display: block; height: 100%; background: linear-gradient(90deg, #DB2777, #22D3EE); border-radius: 99px; }
.promo-help code { font-size: 12.5px; background: var(--soft2); padding: 1px 5px; border-radius: 6px; }

/* 입력창 위 작은 말풍선 — 로그인 안 했을 때 (2026-10-20, 사용자 '검정에 노란 글씨, 작게 떠 있게') — 자리를 차지하지 않고 입력창 위에 뜸 */
.composer-box { position: relative; }
.ask-bubble { position: absolute; left: 14px; top: -17px; z-index: 3; display: inline-flex; align-items: center; gap: 0;
  padding: 1px 2px 1px 11px; border-radius: 999px; background: #111; color: #FFD400; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); animation: askBob 2.4s ease-in-out infinite; }
.ask-bubble[hidden] { display: none; }
.ask-bubble::after { content: ''; position: absolute; left: 20px; bottom: -4px; width: 8px; height: 8px; background: #111; transform: rotate(45deg); border-radius: 2px; }
.ask-bubble-go { border: 0; background: transparent; color: #FFD400; font-size: 12.5px; font-weight: 800; padding: 4px 0; cursor: pointer; white-space: nowrap; }
.ask-bubble-go span { font-weight: 500; color: #FFE680; }
.ask-bubble-x { width: 22px; height: 22px; display: grid; place-items: center; border: 0; background: transparent; color: #FFE680; border-radius: 50%; cursor: pointer; }
.ask-bubble-x svg { width: 14px; height: 14px; }
@keyframes askBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ask-bubble { animation: none; } }

/* 가게 '우리 동네 분석' 검색어 순위 (2026-10-21) */
.topq-find { width: 100%; margin: 6px 0 4px; font-size: 15px; }
.topq-list li[hidden] { display: none; }
.topq-list .topq-no { font-style: normal; font-weight: 800; color: var(--p); display: inline-block; min-width: 1.8em; }
.topq-list .chip.warn { font-size: 11px; padding: 1px 6px; background: #FFF3C4; color: #7A5A00; border-color: transparent; }
.ins-topq .topq-list { padding-left: 0; list-style: none; max-height: 560px; overflow: auto; }

/* 관리자 — 우리AI 동네 관리자 바로 가기 (2026-10-21) */
.region-go { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.region-go form { margin: 0; }
.region-btn { width: 100%; display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; }
.region-btn:hover { border-color: var(--p); }
.region-btn small { color: var(--muted); font-size: 12px; }

/* 실시간 인기 질문 — 오늘의 추천 질문 표시 (2026-10-21) */
.pop-pick { margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--p); background: var(--p-bg); flex: 0 0 auto; }

/* 가게 카드 맨 앞 기본 캐릭터 (2026-10-21, services/ai/avatar.js) */
.store-card.has-av { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: start; }
.store-card.has-av.has-cover { grid-template-columns: 76px minmax(0, 1fr) 64px; }
.store-card.has-av > :not(.sc-av):not(.sc-thumb):not(.cd-photo):not(.cd-veil):not(.cd-ribbon) { grid-column: 2; }
.store-card.has-av .sc-thumb { grid-column: 3; grid-row: 1 / span 3; }
.sc-av { grid-column: 1; grid-row: 1 / span 3; width: 76px; height: 76px; border-radius: 18px; background: var(--av-bg, #F1EEFA); align-self: center; position: relative; overflow: hidden; display: block; z-index: 1; }
.sc-av img { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
.sc-av img.sc-av-photo { position: absolute; inset: 0; object-fit: cover; z-index: 0; }
/* 인기 가게 순위 (2026-10-22) — 캐릭터 왼쪽 위 'n위', 1~3위는 금·은·동, 팔로워 수 태그 */
.sc-rank { position: absolute; left: 0; top: 0; z-index: 2; font-size: 12px; font-weight: 800; line-height: 1; padding: 3px 5px; border-radius: 0 0 8px 0; background: #DB2777; color: #fff; }
.sc-rank.r1 { background: #E8B100; color: #3A2A00; } .sc-rank.r2 { background: #A9B2BF; color: #1E2530; } .sc-rank.r3 { background: #C98A55; color: #2E1A08; }
.sc-fol { font-size: 12px; color: var(--muted, #6b6878); }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; margin: 4px 0 10px; max-width: 420px; }
.podium:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); max-width: 280px; }
.pd-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: inherit; min-width: 0; }
.pd-av { display: block; width: 88px; height: 88px; border-radius: 20px; background: #F1EEFA; overflow: hidden; }
.pd-av img { display: block; width: 100%; height: 100%; }
.pd-1 .pd-av { width: 118px; height: 118px; border-radius: 26px; box-shadow: 0 0 0 3px #E8B100; }
.pd-2 .pd-av { box-shadow: 0 0 0 3px #A9B2BF; } .pd-3 .pd-av { box-shadow: 0 0 0 3px #C98A55; }
.pd-rank { font-size: 13px; } .pd-1 .pd-rank { color: #B88A00; font-size: 15px; }
.pd-name { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 사장님 카드 꾸미기 (2026-10-21, 프리미엄) — 정해 둔 모양만 (CSP: style 속성 안 씀) */
.store-card { position: relative; overflow: hidden; }
.store-card > :not(.cd-photo):not(.cd-veil) { position: relative; z-index: 1; }
.cd-bg-lav { background: linear-gradient(135deg, #F4EEFF, #E8FBFF); } .cd-bg-peach { background: linear-gradient(135deg, #FFF1E6, #FFE3EC); } .cd-bg-mint { background: linear-gradient(135deg, #E6FFF4, #EAF6FF); }
.cd-bg-dots { background: #FFFDF5 radial-gradient(#F2C94C55 1.6px, transparent 1.7px) 0 0 / 14px 14px; } .cd-bg-stripe { background: repeating-linear-gradient(135deg, #F7F4FF 0 12px, #FFFFFF 12px 24px); }
.cd-bg-check { background: #fff conic-gradient(#EEF7EE 25%, #fff 0 50%, #EEF7EE 0 75%, #fff 0) 0 0 / 20px 20px; }
.cd-bg-lav, .cd-bg-peach, .cd-bg-mint, .cd-bg-dots, .cd-bg-stripe, .cd-bg-check { color: #1D1A2B; }
.cd-bg-lav .sc-meta, .cd-bg-peach .sc-meta, .cd-bg-mint .sc-meta, .cd-bg-dots .sc-meta, .cd-bg-stripe .sc-meta, .cd-bg-check .sc-meta { color: #6E6A80; }
.cd-bg-night { background: linear-gradient(135deg, #241B47, #0E3A4A); color: #fff; } .cd-bg-night .sc-meta { color: #CFC8EA; }
.cd-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cd-veil { position: absolute; inset: 0; z-index: 0; }
.cd-veil-soft .cd-veil { background: linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.8) 55%, rgba(255,255,255,.4) 100%); }
.cd-veil-soft { color: #1D1A2B; } .cd-veil-soft .sc-meta { color: #55506A; }
.cd-veil-dark .cd-veil { background: linear-gradient(90deg, rgba(20,16,40,.84) 0%, rgba(20,16,40,.62) 60%, rgba(20,16,40,.28) 100%); }
.cd-veil-dark { color: #fff; } .cd-veil-dark .sc-meta { color: #E4DFF5; }
.cd-veil-none .cd-veil { display: none; }
.cd-fx-shadow { box-shadow: 0 6px 18px rgba(107, 44, 245, .18); }
.cd-fx-glow { border-color: transparent; box-shadow: 0 0 0 2px var(--bg, #fff), 0 0 0 4px #DB2777, 0 6px 22px rgba(34, 211, 238, .35); }
.cd-fx-rainbow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient(90deg, #FF6B6B, #FFC93C, #4ADE80, #22D3EE, #DB2777); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; }
.cd-fx-sparkle::after { content: "✦  ✧   ✦"; position: absolute; right: 10px; top: 4px; font-size: 12px; color: #F2B705; letter-spacing: 2px; animation: cdTwinkle 2.2s ease-in-out infinite; z-index: 2; }
.cd-ribbon { position: absolute !important; right: -30px; top: 10px; transform: rotate(35deg); background: #FF5A7A; color: #fff; font-size: 10.5px; font-weight: 800; padding: 2px 30px; letter-spacing: .5px; z-index: 3 !important; grid-column: auto !important; }
.sc-av.cd-avbg-sky, .h1-av.cd-avbg-sky, .pd-av.cd-avbg-sky { background: linear-gradient(#BEE7FF, #EAF7FF); } .sc-av.cd-avbg-sunset, .h1-av.cd-avbg-sunset, .pd-av.cd-avbg-sunset { background: linear-gradient(#FFC3A0, #FFE6D1); } .sc-av.cd-avbg-grass, .h1-av.cd-avbg-grass, .pd-av.cd-avbg-grass { background: linear-gradient(#DFF3FF 0 62%, #8ED88A 62%); } .sc-av.cd-avbg-stage, .h1-av.cd-avbg-stage, .pd-av.cd-avbg-stage { background: radial-gradient(circle at 50% 30%, #FFF6C9, #F5C26B 60%, #B7791F); }
@keyframes cdTwinkle { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .cd-fx-sparkle::after { animation: none; } }
.h1-av { display: inline-block; flex: none; position: relative; overflow: hidden; width: 96px; height: 96px; border-radius: 24px; background: var(--av-bg, #F1EEFA); vertical-align: middle; margin-right: 10px; }
/* 캐릭터를 크게 (사용자 2026-10-22 '캐릭이 좋아서 좀 더 키우면') — 카드 52→76, 가게 화면 48→96, 좁은 휴대폰은 조금 작게 */
.store-detail h1:has(> .h1-av) { display: block; } h1 > .h1-av { display: block; margin: 6px 0 12px; } .store-detail h1 > .badge { margin-left: 6px; vertical-align: middle; }   /* 가게 화면: 이름 위에 큰 캐릭터 (이름 길이에 따라 옆·아래로 왔다 갔다 하지 않게) */
@media (max-width: 380px) { .store-card.has-av { grid-template-columns: 64px minmax(0, 1fr); } .store-card.has-av.has-cover { grid-template-columns: 64px minmax(0, 1fr) 56px; } .sc-av { width: 64px; height: 64px; border-radius: 16px; } .h1-av { width: 80px; height: 80px; border-radius: 20px; } }
.h1-av img { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
.h1-av img.sc-av-photo { position: absolute; inset: 0; object-fit: cover; z-index: 0; }
.sd-head { position: relative; }
.sd-head.has-deco { overflow: hidden; border-radius: 14px; padding: 12px 14px; margin: 4px 0 10px; }
.sd-head.has-deco > :not(.cd-photo):not(.cd-veil):not(.cd-ribbon) { position: relative; z-index: 1; }
.sd-head.cd-bg-night .c-store, .sd-head.cd-veil-dark .c-store { color: #CFC8EA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --av-bg: #2D2546; } }
:root[data-theme="dark"] { --av-bg: #2D2546; }

/* 사장님 [가게 카드 꾸미기] (2026-10-21) */
.card-editor { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 12px; }
@media (max-width: 760px) { .card-editor { grid-template-columns: 1fr; } }
.ce-preview { position: sticky; top: 12px; display: grid; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; z-index: 2; }
@media (max-width: 760px) { .ce-preview { top: 0; } }
.ce-big.sc-av { width: 150px; height: 150px; margin: 0 auto; border-radius: 22px; grid-column: auto; grid-row: auto; }
.ce-controls { display: grid; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 4px 14px 14px; }
.ce-group { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 10px 0 4px; display: grid; gap: 8px; }
.ce-group:first-child { border-top: 0; }
.ce-group legend { font-weight: 700; font-size: 14px; padding: 0; display: flex; gap: 6px; align-items: center; }
.ce-group .lvl { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0 7px; }
.ce-group .lvl.free { color: #0E7A55; background: #E3F7EF; } .ce-group .lvl.prem { color: #8A5A00; background: #FFF1CC; }
.ce-group.locked { opacity: .55; }
.ce-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-opt { appearance: none; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; position: relative; }
.ce-opt[aria-pressed="true"] { border-color: var(--p); background: var(--p-bg); font-weight: 700; }
.ce-opt:disabled { cursor: not-allowed; }
.ce-opt:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.ce-upl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ce-upl form { margin: 0; }
.ce-upl label.ce-opt { overflow: hidden; }
.ce-upl input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ce-upl small { font-size: 12px; flex-basis: 100%; }
@media (max-width: 760px) { .ce-big.sc-av { width: 128px; height: 128px; border-radius: 20px; } .ce-preview { padding: 10px; gap: 8px; } }

/* 가게 이름 글꼴 (2026-10-22, public/ai/fonts/fonts.css — 프리미엄 가게, 이름 한 줄에만) */
.cd-font-jua .sc-top > b, .cd-font-jua h1, .ce-opt[data-k="font"][data-v="jua"] { font-family: 'Jua', sans-serif; font-weight: 400; }
.cd-font-dohyeon .sc-top > b, .cd-font-dohyeon h1, .ce-opt[data-k="font"][data-v="dohyeon"] { font-family: 'Do Hyeon', sans-serif; font-weight: 400; }
.cd-font-blackhansans .sc-top > b, .cd-font-blackhansans h1, .ce-opt[data-k="font"][data-v="blackhansans"] { font-family: 'Black Han Sans', sans-serif; font-weight: 400; }
.cd-font-nanumpen .sc-top > b, .cd-font-nanumpen h1, .ce-opt[data-k="font"][data-v="nanumpen"] { font-family: 'Nanum Pen Script', cursive; font-weight: 400; font-size: 1.25em; }
[class*="cd-font-"] h1 .badge { font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', sans-serif; font-size: 12px; }
.cd-font-nanumpen h1 { font-size: 2em; }

/* 콜 (2026-10-22) — 팔로우한 가게 카드 아래 버튼·상태, 사장님 콜 목록 */
.call-bar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 6px 4px 2px; }
.call-bar form { margin: 0; }
.call-st { margin-right: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.call-st .ico { width: 16px; height: 16px; }
.call-st.st-received, .call-st.st-visiting { color: var(--warn); }
.call-st.st-done { color: var(--ok); }
.call-btn .ico { width: 16px; height: 16px; }
.call-agree { background: var(--soft); border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px; }
.call-agree p { margin: 0 0 8px; }
.call-label { margin-top: 10px; }
.call-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.call-item p { margin: 4px 0; }
.call-item.st-done, .call-item.st-cancelled { opacity: .7; }
.call-addr { display: flex; gap: 6px; align-items: flex-start; word-break: break-all; }
.call-addr .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.call-memo { color: var(--muted); }
.call-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.call-acts form { margin: 0; }

/* 위쪽 탭 세 칸 [위젯 | 질문하기 | 알려주기] (2026-10-22) */
.nb-tabs.nb-tabs-3 { width: min(360px, calc(100% - 24px)); }
.nb-tabs-3 .nb-tab-pill { width: calc((100% - 6px) / 3); }
.nb-tabs-3[data-at="widget"] .nb-tab-pill { transform: none; }
.nb-tabs-3[data-at="ask"] .nb-tab-pill { transform: translateX(100%); }
.nb-tabs-3[data-at="tell"] .nb-tab-pill { transform: translateX(200%); }
@media (max-width: 360px) { .nb-tabs-3 .nb-tab-t { font-size: 13px; gap: 3px; } }

/* 위젯 화면 — 팔로우한 가게 바로 부르기 (2026-10-22) */
.wg-page { padding-top: 64px; }
.wg-grid { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .wg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wg-tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.wg-tile .wg-av { width: 52px; height: 52px; border-radius: 50%; background: var(--soft2); overflow: hidden; display: block; }
.wg-tile .wg-av img { width: 100%; height: 100%; display: block; }
.wg-name { font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-cat { font-size: 12px; color: var(--muted); margin-top: -4px; }
.wg-tile .btn { width: 100%; justify-content: center; }
.wg-tile form { margin: 0; width: 100%; }
.wg-st { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; color: var(--warn); }
.wg-st.st-done { color: var(--ok); } .wg-st.st-cancelled { color: var(--muted); }
.wg-st .ico, .wg-tile .btn .ico { width: 15px; height: 15px; }
.wg-h2 { font-size: 15px; margin: 18px 0 4px; }
.call-intro .call-lead { font-size: 15px; line-height: 1.6; }
.call-h2 { font-size: 15px; margin: 16px 0 6px; }
.call-steps { padding-left: 20px; margin: 4px 0 8px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
.call-apply { margin-top: 12px; }

/* 가게 툴 모음 (2026-10-22) — 가운데 툴 버튼들 */
.tool-grid { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool-btn { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); text-decoration: none; height: 100%; box-sizing: border-box; transition: border-color .15s, transform .15s; }
.tool-btn:hover { border-color: var(--p); transform: translateY(-1px); }
.tool-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7C3AED 0%, #DB2777 55%, #4F7CF7 100%); }
.tool-ico .ico { width: 26px; height: 26px; }
.tool-btn b { font-size: 15px; }
.tool-btn small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.tool-tag { margin-top: auto; font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--soft2); color: var(--muted); }
.tool-tag.on { background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.tool-tag .ico { width: 12px; height: 12px; vertical-align: -1px; }

/* 쿠폰 도장·예약 (2026-10-22) */
.stp-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 120px; }
.stp-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--track); display: block; }
.stp-dots i.on { background: var(--p); border-color: var(--p); }
.stp-big { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 280px; margin: 10px auto; }
.stp-big i { aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--track); display: grid; place-items: center; }
.stp-big i.on { border: 2px solid var(--p); background: color-mix(in srgb, var(--p) 14%, transparent); color: var(--p); }
.stp-big i .ico { width: 60%; height: 60%; }
.stp-qr { max-width: 240px; margin: 8px auto; background: #fff; border-radius: 12px; padding: 6px; }
.stp-qr svg { width: 100%; height: auto; display: block; }
.stp-rw { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.stp-rw li { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.stp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 10px; }
.bk-mine { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.bk-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; padding: 10px 12px; }
.bk-item form { margin: 0; }
.bk-dates, .bk-slots { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; }
.bk-slots { flex-wrap: wrap; overflow: visible; }
.bk-chip { flex: none; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-size: 14px; }
.bk-chip.on { background: var(--p); border-color: var(--p); color: #fff; }
label.bk-chip { cursor: pointer; }
label.bk-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.bk-chip:has(input:checked) { background: var(--p); border-color: var(--p); color: #fff; }
.bk-chip.full { opacity: .4; text-decoration: line-through; pointer-events: none; }
.bk-days { display: flex; flex-wrap: wrap; gap: 6px; }

/* 도장판 — 8·10·12칸, 찍힌 칸은 가게 이름 든 빨간 도장 (2026-10-22) */
.stp-board { display: grid; gap: 8px; max-width: 300px; margin: 12px auto; padding: 12px; border-radius: 16px; background: var(--soft); border: 1px dashed var(--track); }
.stp-board.stp-n8, .stp-board.stp-n12 { grid-template-columns: repeat(4, 1fr); }
.stp-board.stp-n10 { grid-template-columns: repeat(5, 1fr); }
.stp-cell { aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--track); display: grid; place-items: center; position: relative; }
.stp-cell i { font-style: normal; font-size: 12px; color: var(--muted); }
.stp-cell.on { border-color: transparent; }
.seal { --ink-red: #D7263D; width: 92%; height: 92%; border-radius: 50%; border: 2.5px solid var(--ink-red); box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3.5px var(--ink-red);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-red); line-height: 1.05; font-weight: 800; letter-spacing: -.04em; opacity: .9; }
.seal b { font-size: clamp(10px, 3.2vw, 14px); font-weight: 800; }
.seal-r0 { transform: rotate(-8deg); } .seal-r1 { transform: rotate(5deg); } .seal-r2 { transform: rotate(-3deg); } .seal-r3 { transform: rotate(9deg); }
.stamp-new .seal { animation: seal-in .55s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes seal-in { 0% { transform: scale(2.4) rotate(-20deg); opacity: 0; } 60% { transform: scale(.9) rotate(-6deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .stamp-new .seal { animation: none; } }
.stp-flash { display: inline-flex; align-items: center; gap: 6px; color: #D7263D; font-weight: 700; margin: 4px 0 0; }
.stp-flash .ico { width: 18px; height: 18px; }
.stp-table-wrap { overflow-x: auto; }
.stp-table { min-width: 460px; font-size: 13px; }
.stp-table td, .stp-table th { white-space: nowrap; }

/* 위젯 = 앱 아이콘처럼 작게 (사용자 2026-10-22 '작게 앱처럼') — 둥근 네모 아이콘 + 짧은 이름, 오른쪽 위 작은 표시 */
.wg-box { margin-top: 6px; }
.wg-box .wg-h2 { font-size: 13px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 5px; margin: 14px 2px 4px; }
.wg-box .wg-h2 .ico { width: 14px; height: 14px; }
.wg-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; padding: 6px 0; }
@media (min-width: 520px) { .wg-apps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.wg-app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--ink); min-width: 0; -webkit-tap-highlight-color: transparent; }
.wg-ico { position: relative; width: 58px; height: 58px; border-radius: 16px; background: var(--soft2); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent), 0 4px 10px -6px color-mix(in srgb, var(--ink) 35%, transparent);
  display: grid; place-items: center; transition: transform .12s; }
.wg-ico img { width: 100%; height: 100%; border-radius: 16px; display: block; object-fit: cover; }
.wg-ico-plain { color: var(--p); } .wg-ico-plain .ico { width: 26px; height: 26px; }
.wg-app:active .wg-ico { transform: scale(.93); }
.wg-app:focus-visible .wg-ico { outline: 2px solid var(--p); outline-offset: 2px; }
.wg-glyph { position: absolute; left: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--p); color: #fff; display: grid; place-items: center; border: 2px solid var(--bg); }
.wg-glyph .ico { width: 12px; height: 12px; }
.wg-badge { position: absolute; top: -5px; left: calc(50% + 16px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; border: 2px solid var(--bg); }
.wg-badge.warn { background: #E8590C; color: #fff; } .wg-badge.ok { background: var(--ok); color: #fff; }
.wg-lbl { font-size: 12px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.wg-sub { font-size: 10.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }

/* ── 가게 툴 화면 간결하게 (사용자 2026-10-22 '심플하고 간결하게 눈에 들어오도록') — 콜·쿠폰 도장·예약 공통 ── */
.tl { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.tl-back { font-size: 13px; color: var(--muted); text-decoration: none; }
.tl-hero { display: flex; gap: 14px; align-items: center; }
.tl-hero-ico { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7C3AED, #4F7CF7); }
.tl-hero-ico .ico { width: 28px; height: 28px; }
.tl-hero h1 { font-size: 22px; margin: 0; line-height: 1.25; }
.tl-hero p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.tl-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tl-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.tl-points .ico { flex: none; width: 20px; height: 20px; color: var(--p); margin-top: 1px; }
.tl-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--soft); }
.tl-price b { font-size: 22px; } .tl-price span { color: var(--muted); font-size: 13px; }
.tl-apply { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.tl-apply .check { font-size: 13px; line-height: 1.5; color: var(--muted); }
.tl-big { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px 18px; border-radius: 14px; border: 0; background: var(--p); color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; cursor: pointer; font-family: inherit; }
.tl-big .ico { width: 20px; height: 20px; }
.tl-big.alt { background: var(--ok); }
.tl-more { border-top: 1px solid var(--line); padding-top: 8px; }
.tl-more > summary { cursor: pointer; color: var(--muted); font-size: 13.5px; font-weight: 700; list-style: none; padding: 6px 0; }
.tl-more > summary::-webkit-details-marker { display: none; }
.tl-more > summary::after { content: ' ›'; }
.tl-more[open] > summary::after { content: ' ⌄'; }
.tl-more p, .tl-more li { font-size: 13.5px; line-height: 1.6; }
.tl-notice { padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); color: var(--ink); font-size: 14px; }
.tl-notice.warn { background: var(--warn-bg); }

/* 관리 화면 머리 — 이름 · 숫자 · ⚙ */
.tl-top { display: flex; align-items: center; gap: 10px; }
.tl-top h1 { font-size: 20px; margin: 0; flex: 1; min-width: 0; }
.tl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tl-chip { padding: 5px 11px; border-radius: 99px; background: var(--soft2); font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.tl-chip.on { background: var(--p); color: #fff; }
.tl-chip.hot { background: #E8590C; color: #fff; }
.tl-h { font-size: 14px; color: var(--muted); margin: 6px 0 0; font-weight: 800; }
.tl-empty { padding: 26px 12px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; font-size: 14px; }

/* 처리 카드 — 왼쪽 색 띠 = 상태, 큰 단추 하나 + 전화 + ⋯ */
.tl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tl-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 12px 18px; display: grid; gap: 6px; overflow: hidden; }
.tl-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--track); }
.tl-card.s-new::before { background: #E8590C; } .tl-card.s-go::before { background: #3B82F6; } .tl-card.s-ok::before { background: var(--ok); }
.tl-card.s-end { opacity: .62; }
.tl-card-top { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--muted); }
.tl-card-top b { color: var(--ink); font-size: 14px; }
.tl-card-top .tl-st { margin-left: auto; font-weight: 800; font-size: 12px; }
.s-new .tl-st { color: #E8590C; } .s-go .tl-st { color: #3B82F6; } .s-ok .tl-st { color: var(--ok); }
.tl-addr { font-size: 17px; font-weight: 800; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.tl-time { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tl-memo { font-size: 14px; color: var(--ink); background: var(--soft); border-radius: 8px; padding: 6px 9px; }
.tl-acts { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.tl-acts form { margin: 0; }
.tl-acts .tl-go { flex: 1; } .tl-acts .tl-go button { width: 100%; }
.tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 14px; border-radius: 12px; border: 0; background: var(--p); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit; text-decoration: none; }
.tl-btn.alt { background: var(--ok); } .tl-btn.blue { background: #3B82F6; }
.tl-ibtn { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--soft2); color: var(--ink); text-decoration: none; border: 0; cursor: pointer; }
.tl-ibtn .ico { width: 20px; height: 20px; }
details.tl-kebab { position: relative; flex: none; }
details.tl-kebab > summary { list-style: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--soft2); cursor: pointer; font-size: 20px; font-weight: 800; color: var(--muted); }
details.tl-kebab > summary::-webkit-details-marker { display: none; }
details.tl-kebab > .tl-pop { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; min-width: 150px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ink) 40%, transparent); padding: 6px; display: grid; gap: 2px; }
.tl-pop button { width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--ink); cursor: pointer; font-family: inherit; }
.tl-pop button:hover { background: var(--soft); } .tl-pop button.danger { color: var(--err); }
.tl-day { font-size: 13px; font-weight: 800; color: var(--muted); margin: 8px 0 -2px; }

/* ⚙ 설정 접힘 */
details.tl-set { border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
details.tl-set > summary { list-style: none; cursor: pointer; padding: 12px 14px; font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px; }
details.tl-set > summary::-webkit-details-marker { display: none; }
details.tl-set > summary .ico { width: 18px; height: 18px; color: var(--muted); }
details.tl-set > summary small { margin-left: auto; color: var(--muted); font-weight: 600; }
details.tl-set > .tl-set-in { padding: 0 14px 14px; display: grid; gap: 12px; }
.tl-set-in .form { margin: 0; }
.tl-sub { font-size: 13px; color: var(--muted); }
.tl-sub button { font-size: 13px; }

/* 주민 — 진행 단계 */
.tl-steps { display: flex; align-items: center; gap: 0; padding: 4px 0; }
.tl-steps span { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); position: relative; padding-top: 22px; }
.tl-steps span::before { content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--track); z-index: 1; }
.tl-steps span::after { content: ''; position: absolute; top: 10px; left: -50%; width: 100%; height: 3px; background: var(--track); }
.tl-steps span:first-child::after { display: none; }
.tl-steps span.done { color: var(--ink); } .tl-steps span.done::before, .tl-steps span.done::after { background: var(--p); }
.tl-steps span.now::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--p) 25%, transparent); }
.tl-store { display: flex; gap: 10px; align-items: center; }
.tl-store img { width: 44px; height: 44px; border-radius: 12px; background: var(--soft2); }
.tl-store b { font-size: 17px; display: block; } .tl-store small { color: var(--muted); font-size: 13px; }
.tl-form { display: grid; gap: 10px; }
.tl-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.tl-form input, .tl-form select { font-size: 16px; }
.tl-agree { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.tl-agree input { margin-top: 3px; }
.tl-fine { font-size: 12px; color: var(--muted); line-height: 1.55; margin: -4px 0 0 26px; }

/* 쿠폰 손님 — 표 대신 줄 + 작은 막대 */
.tl-cus { list-style: none; padding: 0; margin: 0; display: grid; }
.tl-cus li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.tl-cus li:last-child { border-bottom: 0; }
.tl-cus b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-cus .tl-cus-r { font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.tl-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--soft2); overflow: hidden; }
.tl-bar i { display: block; height: 100%; background: #D7263D; border-radius: 3px; }
.tl-rw { font-size: 11px; font-weight: 800; color: #fff; background: var(--ok); border-radius: 99px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.tl-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tl-sub form.inline, .tl form.inline { display: inline; margin: 0; }
.tl-bar i.w0 { width: 0%; }
.tl-bar i.w5 { width: 5%; }
.tl-bar i.w10 { width: 10%; }
.tl-bar i.w15 { width: 15%; }
.tl-bar i.w20 { width: 20%; }
.tl-bar i.w25 { width: 25%; }
.tl-bar i.w30 { width: 30%; }
.tl-bar i.w35 { width: 35%; }
.tl-bar i.w40 { width: 40%; }
.tl-bar i.w45 { width: 45%; }
.tl-bar i.w50 { width: 50%; }
.tl-bar i.w55 { width: 55%; }
.tl-bar i.w60 { width: 60%; }
.tl-bar i.w65 { width: 65%; }
.tl-bar i.w70 { width: 70%; }
.tl-bar i.w75 { width: 75%; }
.tl-bar i.w80 { width: 80%; }
.tl-bar i.w85 { width: 85%; }
.tl-bar i.w90 { width: 90%; }
.tl-bar i.w95 { width: 95%; }
.tl-bar i.w100 { width: 100%; }
.tl-list > li.tl-day { list-style: none; } .tl-go.tl-sub { align-self: center; }
.tl-notice .ico, .tl-sub .ico { width: 16px; height: 16px; vertical-align: -3px; } .tl .stp-qr { margin: 0 auto; }

/* 관리자 지금 현황 (2026-10-22) */
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.lv-box { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.lv-box span { font-size: 12px; color: var(--muted); font-weight: 700; }
.lv-box b { font-size: 24px; font-variant-numeric: tabular-nums; }
.lv-box small { font-size: 12px; color: var(--muted); }
.lv-box.hot b { color: var(--p); }
.lv-hours { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.lv-hours span { background: var(--soft2); border-radius: 99px; padding: 2px 9px; font-size: 12px; }
.lv-h { font-size: 15px; margin: 16px 0 6px; }
.lv-list { list-style: none; padding: 0; margin: 0; display: grid; }
.lv-list li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.lv-list time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.lv-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 첫 화면 노란 카카오 단추 (2026-10-22) — 카카오 로그인 디자인 가이드: 배경 #FEE500, 검은 말풍선, 글자 85% 검정, 모서리 12px */
.kakao-start { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 14px; font-weight: 700; color: rgba(0, 0, 0, .85); text-decoration: none; }
.kakao-start .kakao-sym { width: 16px; height: 16px; fill: #000; flex: none; }
.join-line .join-sub { margin: 6px 0 0; }
/* 우린모두 쿠폰 '프리미엄 1개월 체험' (2026-10-22) — 답 아래 도착 카드 · 체험 끝 '계속 쓸래요?' */
.gift-card { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 4px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed var(--p); background: var(--soft2); color: var(--ink); text-decoration: none; }
.gift-card b { display: flex; align-items: center; gap: 6px; color: var(--p); }
.gift-card b .ico { width: 18px; height: 18px; }
.gift-card span { font-size: 14px; color: var(--muted); }
.trial-ask { margin: 10px auto 4px; max-width: 420px; padding: 12px 14px; border-radius: 14px; background: var(--card, #fff); border: 1px solid var(--line); text-align: center; font-size: 14px; }
.trial-ask p { margin: 0 0 8px; }
.trial-ask-btns { display: flex; gap: 8px; justify-content: center; }
.trial-ask.said { padding: 8px 12px; }
/* 위젯 화면 — 늘 보이는 기본 위젯 + 주민 맞춤 (2026-10-22 밤) */
.wg-top { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 0; }
.wg-top b { font-size: 16px; }
.wg-edit-btn .ico { width: 15px; height: 15px; }
.wg-edit-help { margin: 6px 2px 0; }
.wg-box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 4px 14px 12px; margin-top: 10px; }
.wg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wg-box .wg-head .wg-h2 { margin: 10px 0 6px; }
.wg-ctl { display: inline-flex; align-items: center; gap: 2px; }
.wg-ctl .icon-btn { width: 32px; height: 32px; }
.wg-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 30px; border-radius: 15px; border: 1px solid var(--line); background: var(--soft2); color: var(--p); cursor: pointer; }
.wg-toggle .ico { width: 16px; height: 16px; }
.wg-toggle .ico-eye-off, .wg-toggle[aria-pressed="false"] .ico-eye { display: none; }
.wg-toggle[aria-pressed="false"] .ico-eye-off { display: inline; color: var(--muted); }
.wg-off { display: none; }
.wg-editing .wg-off { display: block; opacity: .45; }
.wg-editing .wg-off .wg-body { display: none; }
.wg-editing .wg-box:first-child [data-wg-up], .wg-editing .wg-box:last-child [data-wg-down] { visibility: hidden; }
.wg-fab .fab-row { position: static; justify-content: flex-start; margin: 4px 0 8px; }
html.radio-bar-on .wg-fab .fab-row { bottom: auto; }
.wg-fab .brief-tip { display: none; }
.wg-wx { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); padding: 4px 0; }
.wg-wx-emo { font-size: 34px; line-height: 1; }
.wg-wx-txt { display: flex; flex-direction: column; gap: 2px; }
.wg-wx-txt b { font-size: 17px; }
.wg-list-plain { margin: 0; }
.wg-ico-line { display: flex; align-items: center; justify-content: center; color: var(--p); }
.wg-ico-line .ico { width: 26px; height: 26px; }
.wg-app .wg-lbl { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 질문하기 첫 화면 맨 아래 작은 한 줄 (전체 줄은 위젯 화면 아래) */
.foot.foot-mini { padding: 10px 0 0; font-size: 10.5px; border-top: 0; }
.foot-mini summary { list-style: none; cursor: pointer; color: var(--muted); }
.foot-mini summary::-webkit-details-marker { display: none; }
.foot-mini summary a { color: inherit; }
.wg-page ~ .foot, .wrap:has(.wg-page) + .foot { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.wg-page { padding-top: 56px; }
.wg-list-plain { display: block; }
.wg-list-plain .pop-item { text-decoration: none; padding: 8px 2px; }
.wg-bus .pop-item { justify-content: space-between; }
.wg-bus .ln-count { background: var(--soft2); color: var(--muted); font-weight: 600; flex: none; }
.wg-box .pop-more { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--p); text-decoration: none; }
.foot.foot-mini .biz-fold > summary { display: block; text-align: center; }
.foot.foot-mini .biz-fold > summary > * { display: inline; }
.wg-box .wg-bus .ln-count { background: var(--soft2); color: var(--muted); }
.wg-box .news-list-1 .ln-area { flex: none; max-width: none; overflow: visible; }
.wg-page { padding-top: 46px; }
/* 위젯도 질문하기·알려주기와 같은 날씨 배경 (2026-10-22) — 칸은 알려주기 글 칸처럼 살짝 비치게 */
.wx-layer.wx-under ~ main .wg-box { border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 8px rgba(0,0,0,.04); }
.wx-layer.wx-under ~ main .wg-top b, .wx-layer.wx-under ~ main .wg-edit-help { text-shadow: 0 1px 2px color-mix(in srgb, var(--bg) 80%, transparent); }
.wx-layer.wx-under ~ main .wg-edit-btn { background: var(--card); }
/* 위젯 = 휴대폰 위젯처럼 (사용자 2026-10-22 '크게 차지하지 않게') — 두 줄 격자, 작은 네모(wg-s) 한 칸 · 넓은 칸(wg-m) 두 칸, 높이는 같음 */
.wg-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; margin-top: 10px; }
.wg-list .wg-box { margin: 0; padding: 10px 12px; border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; }
.wg-list .wg-s { aspect-ratio: 1 / 1; }
.wg-list .wg-m { grid-column: span 2; aspect-ratio: 2.12 / 1; }
.wg-list .wg-box .wg-head { flex: none; }
.wg-list .wg-box .wg-head .wg-h2 { margin: 0 0 4px; font-size: 11.5px; gap: 4px; }
.wg-list .wg-box .wg-h2 .ico { width: 12px; height: 12px; }
.wg-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wg-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.wg-list .wg-wx { flex-direction: column; align-items: flex-start; gap: 0; padding: 0; }
.wg-list .wg-wx-emo { font-size: 26px; }
.wg-big { font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -1px; }
.wg-line { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wg-rows { gap: 4px; justify-content: flex-start; }
.wg-row { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink); padding: 2px 0; }
.wg-row b, .wg-row span, .wg-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-row b { font-size: 13px; }
.wg-row small { font-size: 11px; }
.wg-q { flex-direction: row; align-items: baseline; gap: 6px; font-size: 12.5px; }
.wg-q .pop-n { flex: none; font-size: 12px; color: var(--p); }
.wg-tag { flex: none; font-size: 10.5px; color: var(--p); background: var(--soft2); border-radius: 6px; padding: 0 5px; }
.wg-more { margin-top: auto; font-size: 11.5px; color: var(--p); text-decoration: none; }
.wg-empty { justify-content: center; gap: 4px; }
.wg-empty b { color: var(--p); font-size: 14px; }
.wg-apps-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 2px 0 0; flex: 1; align-content: center; }
.wg-links.wg-apps-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wg-apps-row .wg-ico { width: 50px; height: 50px; border-radius: 14px; }
.wg-apps-row .wg-ico img { border-radius: 14px; }
.wg-apps-row .wg-ico-line .ico { width: 22px; height: 22px; }
.wg-apps-row .wg-lbl { font-size: 11px; font-weight: 600; }
.wg-dot { position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok, #12B76A); border: 2px solid var(--card); }
.wg-list .wg-fab .fab-row { flex-direction: column; align-items: stretch; gap: 8px; margin: auto 0; }
.wg-list .wg-fab .fab-row > * { justify-content: center; width: 100%; }
.wg-list .wg-fab .brief-pill .bp-lab { display: none; } .wg-list .wg-fab .brief-pill .bp-short { display: inline; }
/* 툴 위젯(콜·도장·예약)도 넓은 칸 안에서 한 줄 */
.wg-list .wg-m .wg-apps:not(.wg-apps-row) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0; }
.wg-list .wg-m .wg-apps:not(.wg-apps-row) > :nth-child(n+5) { display: none; }
/* 편집 — 칸 오른쪽 위 작은 단추 */
.wg-list .wg-ctl { position: absolute; top: 4px; right: 4px; z-index: 2; background: var(--card); border-radius: 14px; padding: 1px; box-shadow: 0 1px 6px rgba(0,0,0,.12); }
.wg-list .wg-ctl .icon-btn { width: 26px; height: 26px; }
.wg-list .wg-ctl .wg-toggle { width: 30px; height: 26px; }
.wg-editing .wg-list .wg-off { display: flex; }
.wg-editing .wg-list .wg-box { animation: wgWiggle .3s ease-in-out infinite alternate; }
@keyframes wgWiggle { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .wg-editing .wg-list .wg-box { animation: none; } }
.wg-list .wg-box.wg-off { display: none; }
.wg-editing .wg-list .wg-box.wg-off { display: flex; }
/* 휴대폰 홈 화면처럼 네 칸 (사용자 2026-10-22) — 앱 아이콘(wg-i) 한 칸 · 위젯(wg-s) 2x2 까지 */
.wg-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
.wg-list .wg-s { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
.wg-list .wg-box.wg-i, .wx-layer.wx-under ~ main .wg-list .wg-box.wg-i { grid-column: span 1; background: transparent; border: 0; padding: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; border-radius: 0; align-items: center; }
.wg-i .wg-head { position: absolute; inset: 0 0 auto auto; }
.wg-i .wg-body { align-items: center; }
.wg-i .wg-app { width: 100%; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.wg-i .wg-ico { width: 58px; height: 58px; border-radius: 16px; background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wg-i .wg-ico-line { color: var(--p); }
.wg-i .wg-ico-line .ico { width: 26px; height: 26px; }
.wg-i .wg-lbl { font-size: 11.5px; font-weight: 600; margin-top: 4px; text-shadow: 0 1px 2px color-mix(in srgb, var(--bg) 85%, transparent); }
.wg-i .wg-lbl small { font-weight: 500; }
/* 가게 폴더 — 작은 그림 3x3 */
.wg-folder { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 7px; align-content: start; }
.wg-folder img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 4px; background: var(--soft2); display: block; }
.wg-folder > .ico { grid-column: 1 / -1; margin: auto; width: 24px; height: 24px; color: var(--p); align-self: center; }
.wg-folder-pop { position: fixed; inset: 0; z-index: 60; background: rgba(20, 16, 40, .35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.wg-folder-pop[hidden] { display: none; }
.wg-folder-card { width: min(360px, 100%); max-height: 80vh; overflow: auto; background: color-mix(in srgb, var(--card) 92%, transparent); border-radius: 28px; padding: 14px 16px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.wg-folder-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wg-folder-head b { font-size: 17px; }
.wg-folder-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.wg-folder-apps .wg-ico { position: relative; }
/* 편집 — 아이콘은 작은 단추 */
.wg-list .wg-i .wg-ctl { top: -8px; right: -6px; transform: scale(.82); transform-origin: top right; }
.wg-editing .wg-list .wg-box.wg-i.wg-off { opacity: .4; }
/* 크기는 내용에 맞게 (사용자 2026-10-22 '모두 2x2 이면 안 됨') — 2x1 가로 · 브리핑·BGM 줄은 질문하기에 있던 모양 그대로 */
.wg-list .wg-w { grid-column: span 2; grid-row: span 1; aspect-ratio: auto; min-height: 86px; padding: 8px 12px; }
.wg-list .wg-box.wg-row, .wx-layer.wx-under ~ main .wg-list .wg-box.wg-row { grid-column: 1 / -1; background: transparent; border: 0; padding: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; border-radius: 0; }
.wg-list .wg-row .wg-head { position: absolute; inset: 0 0 auto auto; }
.wg-list .wg-row .wg-fab .fab-row { flex-direction: row; justify-content: flex-end; align-items: center; margin: 0; }
.wg-list .wg-row .wg-fab .fab-row > * { width: auto; }
.wg-list .wg-row .wg-fab .brief-pill .bp-lab { display: inline; } .wg-list .wg-row .wg-fab .brief-pill .bp-short { display: none; }
@media (max-width: 380px) { .wg-list .wg-row .wg-fab .brief-pill .bp-lab, .wg-list .wg-row .wg-fab .brief-pill .bp-time { display: none; } .wg-list .wg-row .wg-fab .brief-pill .bp-short { display: inline; } }
.wg-wx2 { flex-direction: row; align-items: center; gap: 10px; }
.wg-wx2 .wg-wx-emo { font-size: 30px; }
.wg-wx-t { display: flex; flex-direction: column; min-width: 0; }
.wg-wx2 .wg-big { font-size: 30px; }
.wg-wx-r { margin-left: auto; font-size: 11.5px; text-align: right; line-height: 1.5; }
.wg-w .wg-rows { gap: 2px; }
.wg-list .wg-row .wg-fab .fab-row { position: relative; }
.wg-list .wg-row .wg-fab .brief-tip { display: block; }
.wg-list .wg-row .wg-fab .brief-tip[hidden] { display: none; }
.wg-list .wg-row .wg-fab .fab-row, html.radio-bar-on .wg-list .wg-row .wg-fab .fab-row { bottom: auto; right: auto; top: auto; }
/* 위젯 맨 위 — 질문하기에 있던 실시간 인기 질문·소식·버스·날씨 칸 그대로 (2026-10-22) */
.wg-list .wg-row .rt-block { width: 100%; }
.wg-list .wg-row .rt-block .rt-grid { margin: 0; }
/* 위젯이 시작 화면 (2026-10-22) — 맨 위 실시간 칸 고정, 맨 아래 브리핑·BGM 단추 줄은 화면 아래에 떠 있음(질문하기 때와 같은 단추), 가운데만 편집 */
.wg-pin-top { margin-top: 10px; }
.wg-pin-top .rt-grid { margin: 0; }
.wg-pin-bottom .wg-fab .fab-row.loose { position: fixed; right: 14px; left: auto; bottom: calc(16px + env(safe-area-inset-bottom)); top: auto; z-index: 20; flex-direction: row; margin: 0; }
html.radio-bar-on .wg-pin-bottom .wg-fab .fab-row.loose { bottom: calc(24px + var(--rbar-h, 50px) + env(safe-area-inset-bottom)); }
.wg-pin-bottom .wg-fab .brief-pill .bp-lab { display: inline; } .wg-pin-bottom .wg-fab .brief-pill .bp-short { display: none; }
@media (max-width: 380px) { .wg-pin-bottom .wg-fab .brief-pill .bp-lab, .wg-pin-bottom .wg-fab .brief-pill .bp-time { display: none; } .wg-pin-bottom .wg-fab .brief-pill .bp-short { display: inline; } }
.wg-pin-bottom .wg-fab .brief-tip { display: block; } .wg-pin-bottom .wg-fab .brief-tip[hidden] { display: none; }
.wg-page:has(.wg-pin-bottom) { padding-bottom: 76px; }
/* 브리핑·BGM 은 떠 있지 않고 이용약관 바로 위 한 줄 (사용자 2026-10-22) */
.wg-pin-bottom { margin-top: 18px; }
.wg-pin-bottom .wg-fab .fab-row, html.radio-bar-on .wg-pin-bottom .wg-fab .fab-row { position: relative; right: auto; bottom: auto; top: auto; left: auto; z-index: 1; display: flex; flex-direction: row; justify-content: center; margin: 0; }
.wg-page:has(.wg-pin-bottom) { padding-bottom: 0; }
.wg-page ~ .foot, .wrap:has(.wg-page) + .foot { padding-top: 10px; }
/* 이용약관 묶음은 화면 바닥, 브리핑·BGM 은 그 바로 위 (내용이 적어도 바닥에 붙게) */
.wg-page { display: flex; flex-direction: column; min-height: calc(100dvh - var(--top-h, 62px) - 92px - env(safe-area-inset-bottom)); }
.wg-pin-bottom { margin-top: auto; padding-top: 18px; }
.wrap:has(.wg-page) + .foot, .wg-page ~ .foot { padding-top: 8px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.wrap:has(.wg-page) { padding-bottom: 0; }
.wg-page { min-height: calc(100dvh - var(--top-h, 62px) - 168px - env(safe-area-inset-bottom)); }
/* 위젯 움직임 (사용자 2026-10-22 '눌렀을 때 전환 애니메이션 — 지금은 딱딱함') — 휴대폰 홈 화면처럼
   ① 누르는 동안 살짝 들어감 ② 아이콘이 화면 가득 커지며 열림(app.js) ③ 폴더는 아이콘 자리에서 커지며 열림 ④ 소식·버스·날씨 칸은 아래로 스르륵 */
.wg-app .wg-ico, .wg-list .wg-box:not(.wg-i), .rt-tab, .pop-h { transition: transform .16s cubic-bezier(.3, .7, .4, 1); }
.wg-app:active .wg-ico, .wg-list .wg-box:not(.wg-i):active, .rt-tab:active, .pop-h:active { transform: scale(.93); }
.wg-launch { position: fixed; z-index: 90; pointer-events: none; border-radius: 16px; background: var(--card); box-shadow: 0 10px 40px rgba(20, 10, 60, .25);
  transition: left .32s cubic-bezier(.2, .8, .2, 1), top .32s cubic-bezier(.2, .8, .2, 1), width .32s cubic-bezier(.2, .8, .2, 1), height .32s cubic-bezier(.2, .8, .2, 1), border-radius .32s ease; display: flex; align-items: center; justify-content: center; color: var(--p); overflow: hidden; }
.wg-launch .ico, .wg-launch img { width: 56px; height: 56px; transition: opacity .2s ease, transform .32s ease; }
.wg-launch.go .ico, .wg-launch.go img { opacity: 0; transform: scale(1.6); }
.wg-page.wg-leaving { transition: transform .32s ease, opacity .32s ease; transform: scale(.94); opacity: .6; }
.wg-folder-pop:not([hidden]) { animation: wgFade .22s ease both; }
.wg-folder-pop:not([hidden]) .wg-folder-card { animation: wgPop .34s cubic-bezier(.2, .9, .25, 1.15) both; transform-origin: var(--fx, 50%) var(--fy, 30%); }
.wg-folder-pop.closing { animation: wgFade .18s ease reverse both; }
.wg-folder-pop.closing .wg-folder-card { animation: wgPop .18s ease reverse both; }
@keyframes wgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wgPop { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: scale(1); } }
.wg-page .rt-panel:not([hidden]) { animation: wgDrop .26s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes wgDrop { from { opacity: 0; transform: translateY(-8px) scaleY(.96); } to { opacity: 1; transform: none; } }
.wg-list .wg-box { animation: wgIn .38s cubic-bezier(.2, .8, .2, 1) both; }
.wg-list .wg-box:nth-child(2) { animation-delay: .02s; } .wg-list .wg-box:nth-child(3) { animation-delay: .04s; } .wg-list .wg-box:nth-child(4) { animation-delay: .06s; }
.wg-list .wg-box:nth-child(n+5) { animation-delay: .08s; }
@keyframes wgIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.wg-editing .wg-list .wg-box { animation: wgWiggle .3s ease-in-out infinite alternate; }
/* 다른 화면으로 넘어갈 때 부드럽게 (지원하는 브라우저만 — 크롬·안드로이드 앱) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  .wg-launch, .wg-page.wg-leaving, .wg-folder-pop:not([hidden]), .wg-folder-pop:not([hidden]) .wg-folder-card, .wg-page .rt-panel:not([hidden]), .wg-list .wg-box { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}
/* 다섯 칸 격자 (사용자 2026-10-22 '그리드를 보기 좋게, 5칸') — 아이콘이 칸을 꽉 채워 위 실시간 칸과 양 끝이 맞음, '내 위젯' 글자 없이 위젯 편집은 아래 */
.wg-page { padding-top: 6px; }
.wg-pin-top { margin-top: 4px; }
.wg-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 8px; margin-top: 14px; }
.wg-list .wg-s { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.wg-list .wg-w { grid-column: span 2; }
.wg-i .wg-ico { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 62px; border-radius: 15px; }
.wg-i .wg-folder { padding: 6px; gap: 2px; }
.wg-i .wg-lbl { font-size: 11px; max-width: 100%; }
.wg-edit-row { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; text-align: center; }
.wg-edit-row .wg-edit-btn { background: color-mix(in srgb, var(--card) 80%, transparent); }
.wg-edit-row .wg-edit-help { margin: 0; max-width: 340px; }
.wg-list .wg-box.wg-i { align-items: stretch; }
.wg-i .wg-body { width: 100%; align-self: stretch; align-items: stretch; }
.wg-i .wg-app { width: 100%; display: flex; flex-direction: column; align-items: center; }
.wg-i .wg-ico { width: min(100%, 60px); height: auto; aspect-ratio: 1 / 1; flex: none; }
.wg-folder:has(> .ico) { display: flex !important; align-items: center; justify-content: center; }
/* 5x5 칸 자유 배치 + 옆으로 넘기는 쪽 (사용자 2026-10-22) — 칸 자리는 app.js 가 grid-row/column 으로 */
.wg-pager { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -2px; padding: 0 2px; }
.wg-pager::-webkit-scrollbar { display: none; }
.wg-pager > .wg-list { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, var(--wg-cell, 90px)); grid-auto-flow: row; gap: 14px 8px; margin-top: 14px; align-content: start; }
.wg-pager > .wg-list[hidden] { display: none; }
.wg-pager > .wg-list .wg-s, .wg-pager > .wg-list .wg-w { aspect-ratio: auto; min-height: 0; }
.wg-dots { display: flex; justify-content: center; gap: 6px; min-height: 8px; margin-top: 8px; }
.wg-dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 25%, transparent); transition: background .2s, transform .2s; }
.wg-dots i.on { background: var(--p); transform: scale(1.25); }
.wg-editing .wg-box { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wg-box { -webkit-touch-callout: none; }
.wg-box.wg-dragging { z-index: 30; animation: none !important; transition: none !important; opacity: .95; filter: drop-shadow(0 10px 18px rgba(30, 10, 80, .28)); }
.wg-drop { border: 2px dashed color-mix(in srgb, var(--p) 70%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--p) 10%, transparent); pointer-events: none; }
.wg-drop.bad { border-color: color-mix(in srgb, #E5484D 70%, transparent); background: color-mix(in srgb, #E5484D 8%, transparent); }
.wg-editing .wg-pager > .wg-list { outline: 1px dashed color-mix(in srgb, var(--p) 25%, transparent); outline-offset: 4px; border-radius: 12px; }
.wg-pager > .wg-list { grid-template-rows: repeat(var(--wg-rows, 5), var(--wg-cell, 90px)); }
/* 빼기는 × (휴대폰처럼 왼쪽 위 작은 동그라미), 뺀 위젯은 편집 중에도 안 보임 — [위젯 추가]로 다시 (사용자 2026-10-22) */
.wg-editing .wg-list .wg-box.wg-off, .wg-list .wg-box.wg-off { display: none; }
.wg-list .wg-ctl { background: none; box-shadow: none; padding: 0; }
.wg-list .wg-i .wg-ctl, .wg-list .wg-ctl { top: -7px; left: -5px; right: auto; transform: none; }
.wg-del { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; background: color-mix(in srgb, var(--ink) 70%, transparent); color: var(--card); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.wg-del .ico { width: 13px; height: 13px; stroke-width: 3; }
.wg-editing .wg-pager > .wg-list { outline: none; }
.wg-edit-btns { display: flex; gap: 8px; justify-content: center; }
.wg-add-pop { position: fixed; inset: 0; z-index: 60; background: rgba(20, 16, 40, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.wg-add-pop[hidden] { display: none; }
.wg-add-card { width: min(420px, 100%); max-height: 70vh; overflow: auto; background: var(--card); border-radius: 24px; padding: 14px 16px 16px; animation: wgPop .28s cubic-bezier(.2, .9, .25, 1.1) both; transform-origin: 50% 100%; }
.wg-add-list { display: flex; flex-direction: column; gap: 6px; }
.wg-add-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 6px; border: 0; border-radius: 14px; background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.wg-add-item:hover { background: var(--soft2); }
.wg-add-item > span:nth-child(2) { flex: 1; }
.wg-add-item > .ico { color: var(--p); width: 18px; height: 18px; }
.wg-add-item .wg-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--soft2); display: flex; align-items: center; justify-content: center; }
.wg-add-item .wg-ico .ico { width: 20px; height: 20px; }
.wg-add-item[hidden] { display: none; }
.wg-list .wg-box .wg-head { position: absolute; inset: 0 auto auto 0; z-index: 3; }
.wg-list .wg-box .wg-head .wg-h2 { position: static; }
.wg-list .wg-box:not(.wg-i) .wg-head { position: static; }
.wg-list .wg-box:not(.wg-i) .wg-ctl { position: absolute; top: -7px; left: -5px; }
.wg-list .wg-i .wg-ctl { position: absolute; top: -6px; left: 0; }
/* 꾹 누르면 휴대폰이 띄우는 링크 미리보기·메뉴·글자 선택 막기 (위젯은 꾹 = 편집) */
.wg-box, .wg-box a, .wg-box img, .wg-box button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
/* 위젯 맨 위 실시간·소식·버스·날씨 — 펼치면 아래 앱을 밀지 않고 위에 떠서 (사용자 2026-10-22) */
.rt-block { position: relative; z-index: 25; }
.rt-block .rt-grid .pop-q { position: static; }
.rt-block .pop-q.folded .pop-drop { display: none; }
.rt-block .pop-q:not(.folded) .pop-drop, .rt-block .rt-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2; margin: 0; max-width: none; max-height: 62vh; overflow: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 6px 10px; box-shadow: 0 14px 40px rgba(25, 12, 70, .22); -webkit-overflow-scrolling: touch; }
.rt-block .pop-q:not(.folded) .pop-drop { animation: wgDrop .24s cubic-bezier(.2, .8, .2, 1) both; }
.rt-block .pop-drop .pop-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
.rt-block .rt-grid .pop-q:not(.folded) { grid-column: auto; }
.rt-block .pop-q:not(.folded) .pop-when { display: none; }
.rt-block .pop-q:not(.folded) .pop-chev { margin-left: auto; }
/* 내 모임 폴더 (2026-10-22) — 대문 사진 없으면 첫 글자, 안 읽은 글 수는 빨간 숫자 */
.wg-gini { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 4px; background: color-mix(in srgb, var(--p) 18%, var(--card)); color: var(--p); font-style: normal; font-size: 9px; font-weight: 800; }
.wg-gico { display: flex !important; align-items: center; justify-content: center; position: relative; background: color-mix(in srgb, var(--p) 14%, var(--card)); }
.wg-gico b { font-size: 22px; color: var(--p); }
.wg-gico img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.wg-folder-btn { position: relative; }
.wg-badge-n { position: absolute; top: -6px; right: calc(50% - 36px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #FF3B30; color: #fff; font-size: 11px; font-weight: 800; font-style: normal; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--card); z-index: 2; }
.wg-gico .wg-badge-n { top: -6px; right: -6px; }
/* 가게 상세 머리 정리 (사용자 2026-10-22 '카드가 잘 정리가 안 됨') — 대표 사진은 잘리지 않게(흐린 배경 + 통째로), 카드는 사진에 살짝 걸치고 캐릭터 왼쪽·이름 오른쪽 */
.sd-cover-wrap { position: relative; overflow: hidden; width: calc(100% + 36px); margin: -18px -18px 0; aspect-ratio: 2 / 1; max-height: 240px; border-radius: 15px 15px 0 0; background: var(--line); }
.sd-cover-wrap .sd-cover-bg { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(18px) saturate(1.2); opacity: .55; transform: scale(1.05); }
.sd-cover-wrap .sd-cover { position: relative; display: block; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; object-fit: contain; border-radius: 0; background: none; }
.sd-cover-wrap + .sd-head { margin-top: 14px; }
/* 대표 사진과 꾸민 카드가 겹치지 않게 (사용자 2026-10-24 '이렇게 안 나오도록 정리') — 예전엔 -26px 로 사진 위에 걸쳤는데 사진이 카드 윗부분을 덮었음 */
.sd-cover-wrap + .sd-head.has-deco { margin-top: 14px; position: relative; z-index: 1; box-shadow: 0 6px 18px rgba(20, 10, 60, .12); }
.sd-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sd-id .h1-av { width: 84px; height: 84px; border-radius: 22px; margin: 0; flex: none; }
.sd-id-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sd-id-txt .c-store { font-size: 12.5px; line-height: 1.35; }
.sd-id-txt h1 { margin: 0; font-size: 22px; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; }
.sd-id-txt h1 .badge { display: inline-block; margin: 4px 0 0; vertical-align: middle; font-size: 12px; }
.sd-head.has-deco { padding: 14px 16px; }
.sd-head.has-deco .cd-ribbon { z-index: 2; }
.sd-head.has-deco .sd-id-txt { padding-right: 28px; }   /* 오른쪽 위 '우리 동네 추천' 띠와 안 겹치게 */
@media (max-width: 380px) { .sd-id .h1-av { width: 70px; height: 70px; border-radius: 18px; } .sd-id-txt h1 { font-size: 20px; } }
.store-detail .sd-head + .sns-row { margin-top: 14px; }
/* 위로 올릴 때 위젯이 위쪽 스위치를 가리던 것 (2026-10-22) — 스위치가 늘 맨 위, 펼친 칸은 아래 앱들만 덮음 */
.nb-tabs { z-index: 40; }
.rt-block { z-index: 8; }
.wg-pager { position: relative; z-index: 1; }
/* 업종별 가게 폴더 — 안에 업종 선 아이콘 3x3 */
.wg-cfold i { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 4px; background: color-mix(in srgb, var(--p) 12%, var(--card)); color: var(--p); }
.wg-cfold i .ico { width: 10px; height: 10px; }
.wg-folder-apps .wg-ico-line { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--p) 10%, var(--card)); color: var(--p); }
.wg-folder-apps .wg-ico-line .ico { width: 26px; height: 26px; }
/* 위젯 화면 — 위로 올려도 스위치 밑으로 올라가지 않음 (사용자 2026-10-22 '올라가지 말아야 하는 게 답')
   스위치 아래부터 바닥까지가 따로 스크롤되는 상자, 화면 전체는 움직이지 않음. 약관 묶음은 상자 안 맨 아래 */
html:has(.wg-page), html:has(.wg-page) body { height: 100%; overflow: hidden; overscroll-behavior: none; }
main.wrap:has(.wg-page) { position: fixed; top: calc(var(--top-h, 62px) + 68px); bottom: 0; left: 0; right: 0; margin: 0 auto; padding-top: 0; padding-bottom: env(safe-area-inset-bottom); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
main.wrap:has(.wg-page) > .wg-page { flex: 1 0 auto; min-height: 0; padding-top: 4px; }
main.wrap:has(.wg-page) > .foot { display: block; flex: none; padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); }
main.wrap:has(.wg-page) ~ .foot { display: none; }   /* 상자 밖(원래 자리)의 약관 줄은 숨김 — 상자 안 것만 */
.wg-pin-bottom { margin-top: auto; }
.top.has-tabs ~ .wrap:has(.wg-page), html body main.wrap:has(.wg-page) { padding-top: 0; }
/* 층 오류 고침 (2026-10-22 릴리스 뒤 사용자) — 위젯 상자(main)가 따로 층을 만들어 그 안의 스플래시·앱 받기·위젯 추가 창이 스위치 아래로 깔리던 것:
   그런 창이 떠 있는 동안만 상자를 맨 위 층으로 */
main.wrap:has(> #splash), main.wrap:has(#splash), main.wrap:has(.app-pop:not([hidden])), main.wrap:has(.wg-add-pop:not([hidden])) { z-index: 1001; }
/* 편집 × 가 아이콘 뒤로 숨던 것 (아이폰 사파리는 흐림 효과 칸을 위로 그림) — 아이콘 칸은 바닥 층, × 는 따로 위 층 */
.wg-list .wg-box .wg-body { position: relative; z-index: 0; }
.wg-list .wg-box .wg-head { z-index: 5; }
.wg-list .wg-ctl { z-index: 6; -webkit-transform: translateZ(1px); transform: translateZ(1px); }
.wg-editing .wg-list .wg-box .wg-ico { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* 미니게임 (2026-10-22) — 테트리스·벽돌깨기·스도쿠, 휴대폰 손가락으로 */
.game-page { max-width: 420px; margin: 0 auto; padding: 4px 0 20px; display: flex; flex-direction: column; gap: 10px; -webkit-user-select: none; user-select: none; }
.game-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.game-title { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; }
.game-title .ico { width: 20px; height: 20px; color: var(--p); }
.game-switch { display: flex; gap: 6px; }
.game-switch a { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; background: var(--soft2); color: var(--p); }
.game-switch .ico { width: 18px; height: 18px; }
.game-stats { display: flex; justify-content: space-between; font-size: 14px; padding: 0 2px; }
.game-stats b { font-size: 17px; color: var(--p); }
.game-stage { position: relative; display: flex; justify-content: center; touch-action: none; }
.game-stage canvas { display: block; max-width: 100%; border-radius: 14px; background: #15122A; box-shadow: 0 6px 20px rgba(20, 10, 60, .18); touch-action: none; }
.game-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(15, 10, 35, .72); color: #fff; border-radius: 14px; text-align: center; }
.game-over b { font-size: 22px; }
.game-ctl { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.game-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 62px; height: 54px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.game-btn:active { transform: scale(.94); background: var(--soft2); }
.game-btn .ico { width: 24px; height: 24px; color: var(--p); }
.game-btn.wide { min-width: 120px; }
.game-help { text-align: center; margin: 0; }
/* 스도쿠 */
.sdk { display: grid; grid-template-columns: repeat(9, 1fr); width: min(100%, 396px); aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; background: var(--card); }
.sdk button { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; color: var(--p); font: inherit; font-size: clamp(16px, 5.2vw, 22px); font-weight: 600; padding: 0; cursor: pointer; aspect-ratio: 1; }
.sdk button.given { color: var(--ink); font-weight: 800; }
.sdk button.c3 { border-right: 2px solid var(--ink); }
.sdk button.r3 { border-bottom: 2px solid var(--ink); }
.sdk button.same { background: color-mix(in srgb, var(--p) 8%, transparent); }
.sdk button.eq { background: color-mix(in srgb, var(--p) 20%, transparent); }
.sdk button.sel { background: color-mix(in srgb, var(--p) 32%, transparent); }
.sdk button.bad { color: #E5484D; }
.sdk-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: min(100%, 396px); }
.sdk-pad .game-btn { min-width: 0; height: 48px; font-size: 20px; }
.sdk-lv { display: flex; gap: 6px; justify-content: center; }
.sdk-lv button.on { background: var(--p); color: #fff; border-color: var(--p); }
/* 미니게임 이번 주 동네 랭킹 */
.game-rank { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.rank-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rank-list li { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 10px; font-size: 14px; }
.rank-list li.me { background: color-mix(in srgb, var(--p) 12%, transparent); font-weight: 700; }
.rank-list .rk { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--soft2); color: var(--muted); flex: none; }
.rank-list .rk.top1 { background: #FACC15; color: #5B4300; } .rank-list .rk.top2 { background: #CBD5E1; color: #334155; } .rank-list .rk.top3 { background: #F59E0B; color: #4A2600; opacity: .85; }
.rank-list span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list em { font-style: normal; font-weight: 800; color: var(--p); }
.rank-me { margin: 8px 4px 0; font-size: 13px; font-weight: 700; color: var(--p); }
.rank-login { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--p); }
.rank-line { font-size: 15px; font-weight: 700; color: #FDE68A; }
.game-stage { width: fit-content; max-width: 100%; margin: 0 auto; }
.game-page[data-game="tetris"] .game-ctl .game-btn { min-width: 0; flex: 1 1 0; padding: 0 6px; }
.game-page[data-game="tetris"] .game-ctl { flex-wrap: nowrap; gap: 6px; }
.game-over .game-btn { flex: none; height: 50px; min-width: 140px; }
/* 게임 배경 음악 단추 (2026-10-22) — 켜지면 보라 바탕 */
.game-music { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; border: 0; background: var(--soft2); color: var(--muted); cursor: pointer; }
.game-music .ico { width: 18px; height: 18px; }
.game-music.on { background: var(--p); color: #fff; }
/* 스도쿠 판이 아이폰에서 찌그러지던 것 — 판 상자는 너비 가득, 칸은 9줄 고르게 (2026-10-22) */
.game-page[data-game="sudoku"] .game-stage { width: 100%; }
.sdk { width: min(100%, 396px); margin: 0 auto; grid-template-rows: repeat(9, minmax(0, 1fr)); aspect-ratio: 1 / 1; height: auto; }
.sdk button { aspect-ratio: auto; min-width: 0; min-height: 0; width: 100%; height: 100%; line-height: 1; display: flex; align-items: center; justify-content: center; -webkit-appearance: none; appearance: none; border-radius: 0; }
@supports not (aspect-ratio: 1) { .sdk { height: min(calc(100vw - 28px), 396px); } }
/* 음악 스위치 */
.game-music { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; width: auto; height: 34px; padding: 0 6px 0 12px; border-radius: 17px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.game-music .ico { width: 16px; height: 16px; }
.game-music .gm-sw { position: relative; width: 40px; height: 24px; border-radius: 12px; background: #CBD5E1; transition: background .2s; }
.game-music .gm-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.game-music.on { color: var(--p); background: var(--card); }
.game-music.on .gm-sw { background: var(--p); }
.game-music.on .gm-sw::after { transform: translateX(16px); }
/* 스도쿠 시작 전에는 판을 흐리게 가림 */
.sdk.sdk-veil { filter: blur(6px); pointer-events: none; }
.game-page[data-game="sudoku"] .game-stage { position: relative; }
.wg-edit-row { margin-top: 10px; }
.wg-dots { margin-top: 10px; }
/* 편집 중 줄이 낮아지면 아이콘도 같이 작게 — 한 화면 안에 */
.wg-i .wg-ico { width: min(100%, 60px, calc(var(--wg-cell, 90px) - 26px)); }
.wg-editing .wg-pager > .wg-list { row-gap: 8px; }
@media (max-height: 700px) {
  .wg-i .wg-lbl { font-size: 10.5px; margin-top: 2px; }
  .wg-edit-row, .wg-dots { margin-top: 6px; }
  .wg-pin-bottom { padding-top: 8px; }
  main.wrap:has(.wg-page) > .foot { padding-top: 4px; font-size: 10px; }
  .wg-pager > .wg-list { margin-top: 10px; }
}
/* 사다리타기 (2026-10-23) */
.ld-setup { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.ld-count { display: flex; align-items: center; justify-content: center; gap: 18px; }
.ld-count b { font-size: 22px; min-width: 56px; text-align: center; }
.ld-count .game-btn { min-width: 52px; height: 46px; }
.ld-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ld-col { display: flex; flex-direction: column; gap: 6px; }
.ld-col input { height: 40px; padding: 0 10px; border-radius: 10px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 15px; min-width: 0; }
.ld-p-h { margin-top: 2px; }
.ld-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.ld-presets .game-btn { height: 40px; min-width: 0; flex: 1; font-size: 13px; }
.ld-go { width: 100%; max-width: 360px; background: var(--p); color: #fff; border-color: var(--p); }
.ld-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.ld-row { display: grid; width: calc(min(100vw, 420px) - 28px); gap: 4px; }
.ld-name { height: 38px; border-radius: 10px; border: 2px solid; background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ld-name.done { opacity: .55; }
.ld-canvas { background: #1E1A3A; border-radius: 12px; }
.ld-res-cell { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 2px; border-radius: 10px; border: 2px dashed var(--line); background: var(--soft2); color: var(--muted); font-size: 13px; font-weight: 800; text-align: center; word-break: keep-all; }
.ld-res-cell.open { border-style: solid; background: var(--card); animation: wgPop .3s cubic-bezier(.2, .9, .25, 1.2) both; }
.ld-sum { width: 100%; margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.ld-sum ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ld-sum li { display: flex; justify-content: space-between; padding: 6px 10px; border-left: 4px solid; border-radius: 6px; background: var(--soft2); }
.game-page[data-game="ladder"] .game-stage { width: 100%; flex-direction: column; }
.game-page[data-game="ladder"] .game-ctl .game-btn.wide { min-width: 0; flex: 1; font-size: 13px; }
.ld-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ld-col input { width: 100%; box-sizing: border-box; }
.ld-setup { max-width: 100%; min-width: 0; }
/* 광고 아이콘 표시 (2026-10-23 우린모두 누리집) */
.wg-ico { position: relative; }
.wg-ad { position: absolute; top: -5px; right: -5px; padding: 1px 5px; border-radius: 6px; background: #64748B; color: #fff; font-size: 9.5px; font-weight: 800; font-style: normal; line-height: 15px; box-shadow: 0 0 0 2px var(--card); z-index: 2; }
.wg-ico-img { overflow: visible; background: none !important; }
.wg-ico-img img { width: 100%; height: 100%; border-radius: 15px; display: block; }
/* 버튼(흰 칸) 안에 로고 — 다른 아이콘과 같은 칸 (2026-10-23 우린모두) */
.wg-ico-logo img { width: 54%; height: 54%; border-radius: 0; object-fit: contain; display: block; }
/* 층 고침 (2026-10-23) — 내 대화·도움말·알려주기 옆 칸과 그 뒤 어둡게가 위쪽 스위치보다 위에 */
.thread-side, .help-side, .nb-side { z-index: 46; }
.side-backdrop { z-index: 45; }
/* 위젯 ☰ 메뉴 */
.wg-menu { position: fixed; z-index: 60; min-width: 168px; padding: 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(20, 10, 60, .2); display: flex; flex-direction: column; animation: wgPop .18s ease both; transform-origin: 0 0; }
.wg-menu[hidden] { display: none; }
.wg-menu button { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.wg-menu button:hover, .wg-menu button:active { background: var(--soft2); }
.wg-menu .ico { width: 18px; height: 18px; color: var(--p); }
.wg-edit-row[hidden] { display: none; }
/* 옆 칸(내 대화·도움말·알려주기 메뉴)이 열려 있는 동안엔 위쪽 스위치를 숨김 — 옆 칸이 대화 칸 층 안에 있어 위로 못 올라가서 (2026-10-23) */
body:has(.thread-side.open) .nb-tabs, body:has(.help-side.open) .nb-tabs { opacity: 0; visibility: hidden; transition: opacity .15s; }
@media (min-width: 1100px) { body:has(.thread-side.open) .nb-tabs { opacity: 1; visibility: visible; } }
/* 위젯 위아래 간격 고르게 (2026-10-23) — 실시간 칸 ↔ 첫 줄, 줄 ↔ 줄 모두 18px */
.wg-pager > .wg-list { margin-top: 18px; row-gap: 14px; }
.wg-editing .wg-pager > .wg-list { row-gap: 14px; }
/* 이름 줄 때문에 아이콘끼리 위아래가 멀어 보이던 것 — 이름 아래 → 다음 아이콘을 좁게, 위 칸 ↔ 첫 줄도 맞춤 (2026-10-23) */
.wg-pager > .wg-list, .wg-editing .wg-pager > .wg-list { row-gap: 2px; margin-top: 12px; }
.wg-i .wg-lbl { margin-top: 3px; line-height: 1.25; }
/* (2026-10-23 다시) 아이콘 위아래 간격을 넓게 되돌리고, 실시간 칸 ↔ 첫 줄 아이콘도 아이콘↔아이콘 거리만큼 넓힘 */
.wg-pager > .wg-list, .wg-editing .wg-pager > .wg-list { row-gap: 14px; margin-top: 30px; }
/* 위젯 목록 시트 (☰, 2026-10-23) — 줄마다 스위치 */
.wg-sheet-acts { display: inline-flex; align-items: center; gap: 6px; }
.wg-sheet-acts .btn .ico { width: 15px; height: 15px; }
.wg-add-item .gm-sw { position: relative; flex: none; width: 42px; height: 26px; border-radius: 13px; background: #CBD5E1; transition: background .2s; }
.wg-add-item .gm-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.wg-add-item.on .gm-sw { background: var(--p); }
.wg-add-item.on .gm-sw::after { transform: translateX(16px); }
.wg-add-item > .ico { display: none; }
.wg-add-item .wg-ico img { width: 24px; height: 24px; object-fit: contain; }
.wg-add-card { max-height: 78vh; }
/* 질문하기 가운데 전등 단추 (2026-10-23) */
.hello-help { display: inline-flex; align-items: center; gap: 6px; margin: 14px auto 4px; padding: 9px 16px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--p) 35%, transparent); background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--p); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(108, 44, 245, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hello-help .ico { width: 18px; height: 18px; color: #F59E0B; }
.hello-help:active { transform: scale(.96); }
.hello-help { margin-bottom: 16px; }
/* 위젯 ☰ — 왼쪽에서 밀려 나오는 메뉴 (내 대화 칸과 같은 모양, 2026-10-23) */
.wg-add-pop { align-items: stretch; justify-content: flex-start; padding: 0; background: rgba(0, 0, 0, .3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.wg-add-pop .wg-add-card { width: 280px; max-width: 84vw; height: 100%; max-height: none; border-radius: 0 18px 18px 0; padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; box-shadow: 4px 0 24px rgba(0, 0, 0, .18); animation: wgSlideIn .26s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 0 50%; }
.wg-add-pop.closing { animation: wgFade .18s ease reverse both; }
.wg-add-pop.closing .wg-add-card { animation: wgSlideIn .18s ease reverse both; }
@keyframes wgSlideIn { from { transform: translateX(-100%); } to { transform: none; } }
.wg-add-pop .wg-folder-head { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.wg-add-pop .wg-folder-head b { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .wg-add-pop .wg-add-card, .wg-add-pop.closing, .wg-add-pop.closing .wg-add-card { animation: none; } }
body:has(.wg-add-pop:not([hidden])) .nb-tabs { opacity: 0; visibility: hidden; }
/* 위젯 메뉴 줄을 작게 (2026-10-23) — 한 화면에 다 보이게 */
.wg-add-pop .wg-add-card { width: 248px; }
.wg-add-pop .wg-add-list { gap: 2px; }
.wg-add-pop .wg-add-item { padding: 5px 4px; gap: 10px; font-size: 14px; border-radius: 10px; }
.wg-add-pop .wg-add-item .wg-ico { width: 32px; height: 32px; border-radius: 9px; }
.wg-add-pop .wg-add-item .wg-ico .ico { width: 17px; height: 17px; }
.wg-add-pop .wg-add-item .wg-ico img { width: 19px; height: 19px; }
.wg-add-pop .wg-add-item .gm-sw { width: 36px; height: 22px; border-radius: 11px; }
.wg-add-pop .wg-add-item .gm-sw::after { width: 16px; height: 16px; }
.wg-add-pop .wg-add-item.on .gm-sw::after { transform: translateX(14px); }
.wg-add-pop .wg-folder-head b { font-size: 16px; }
.wg-add-pop .wg-sheet-acts .btn { height: 32px; padding: 0 10px; font-size: 12.5px; }
/* 광고 아이콘 밝은/어두운 그림 (2026-10-23 디어렙) */
.wg-ico .logo-dark { display: none; }
:root[data-theme="dark"] .wg-ico .logo-light { display: none; }
:root[data-theme="dark"] .wg-ico .logo-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wg-ico .logo-light { display: none; } :root:not([data-theme="light"]) .wg-ico .logo-dark { display: block; } }
.wg-i .wg-ico { width: min(100%, 60px, max(48px, calc(var(--wg-cell, 90px) - 26px))); min-width: 48px; }
/* 편집 중엔 브리핑·BGM 줄과 약관 줄을 숨겨 자리 확보 (2026-10-23) */
.wg-editing .wg-pin-bottom, main.wrap:has(.wg-editing) > .foot { display: none; }
/* 앱 받기 /app (2026-10-23) */
.app-get { max-width: 420px; margin: 20px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.app-get-ttori { width: 140px; height: 140px; border-radius: 32px; box-shadow: 0 10px 30px rgba(108, 44, 245, .25); }
.app-get h1 { margin: 6px 0 0; font-size: 26px; }
.app-get-play { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; height: 52px; font-size: 16px; }
.app-get-play.main { background: var(--p); color: #fff; border-color: var(--p); }
.app-get-play small { opacity: .75; font-weight: 500; }
.app-get-ios { width: 100%; text-align: left; background: var(--soft2); border-radius: 14px; padding: 12px 14px; font-size: 14px; }
.app-get-ios.main { border: 2px solid var(--p); }
.app-get-ios ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.app-get-ios .ico { width: 15px; height: 15px; vertical-align: -2px; color: var(--p); }
/* 광고 아이콘 밝은/어두운 그림 — 다른 그림 규칙(display:block)에 밀려 둘 다 보이던 것 (2026-10-23) */
.wg-ico img.logo-dark { display: none !important; }
:root[data-theme="dark"] .wg-ico img.logo-light { display: none !important; }
:root[data-theme="dark"] .wg-ico img.logo-dark { display: block !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wg-ico img.logo-light { display: none !important; } :root:not([data-theme="light"]) .wg-ico img.logo-dark { display: block !important; } }

/* ── 주유소 기름값 지도 (/fuel, 2026-10-24) ── */
.fm-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 6px; }
.fm-sum > div { background: var(--card, #fff); border: 1px solid var(--line, #e7e5ef); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.fm-sum b { font-size: 1.15rem; }
.fm-low { color: #059669; } .fm-high { color: #DC2626; }
.fuel-map { height: 340px; border-radius: 16px; overflow: hidden; margin: 8px 0 4px; }
.fm-pin { display: inline-block; padding: 3px 7px; border-radius: 10px; font: 700 12px/1.2 Pretendard, system-ui, sans-serif; color: #fff; background: #6B7280; box-shadow: 0 1px 4px rgba(0,0,0,.3); white-space: nowrap; position: relative; }
.fm-pin::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: inherit; }
.fm-pin.low { background: #059669; border-color: #059669; } .fm-pin.mid { background: #6B7280; border-color: #6B7280; } .fm-pin.high { background: #DC2626; border-color: #DC2626; }
.fm-pin.low::after { border-top-color: #059669; } .fm-pin.mid::after { border-top-color: #6B7280; } .fm-pin.high::after { border-top-color: #DC2626; }
.fm-pin.on { transform: scale(1.25); outline: 2px solid #fff; z-index: 10; }
.fm-legend { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 2px 0 6px; }
.fm-dot.low { background: #059669; } .fm-dot.mid { background: #6B7280; } .fm-dot.high { background: #DC2626; }
.fm-sort { display: flex; gap: 6px; margin: 10px 0; }
.fm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fm-item { background: var(--card, #fff); border: 1px solid var(--line, #e7e5ef); border-left: 4px solid #6B7280; border-radius: 14px; padding: 10px 12px; cursor: pointer; }
.fm-item.lv-low { border-left-color: #059669; } .fm-item.lv-high { border-left-color: #DC2626; }
.fm-item.flash { box-shadow: 0 0 0 3px rgba(107,44,245,.35); }
.fm-row { display: flex; align-items: center; gap: 10px; }
.fm-rank { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--soft, #f1effa); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.fm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-price { flex: none; text-align: right; display: flex; flex-direction: column; }
.fm-price b { font-size: 1.1rem; }
.fm-acts { display: flex; gap: 14px; margin-top: 6px; padding-left: 36px; }
.fm-acts .ico { width: 14px; height: 14px; vertical-align: -2px; }

/* 가게 화면 툴 단추 (콜·예약·쿠폰 도장, 2026-10-24) */
.sd-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.sd-tool { flex: 1 1 140px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--accent-soft, #f1ebff); color: inherit; text-decoration: none; border: 1px solid var(--line, #e7e5ef); }
.sd-tool .ico { width: 22px; height: 22px; color: var(--accent, #DB2777); flex: none; }
.sd-tool span { display: flex; flex-direction: column; line-height: 1.25; }
.sd-tool small { color: var(--muted, #6b7280); font-size: .78rem; }

/* 질문하기 화면 — 인기 질문 칸만 (2026-10-24) */
.rt-pop-only .rt-grid { grid-template-columns: 1fr; }
.rt-no-pop .rt-grid { grid-template-columns: 1fr; }   /* 위젯 — 인기 질문 없이 소식·버스·날씨만 (2026-10-30) */
.rt-pop-only { margin: 14px 0 6px; }
.rt-pop-only .pop-q:not(.folded) .pop-drop { position: static; margin-top: 6px; max-height: none; box-shadow: none; animation: none; }

/* ── 가게 상담 대화방 (2026-10-24) ── */
.cs-page { max-width: 640px; margin: 0 auto; }
.cs-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.cs-head b { flex: 1; font-size: 1.05rem; }
.cs-head .tl-back { margin: 0; }
.cs-intro { margin: 2px 0 8px; }
.cs-chat { background: var(--card, #fff); border: 1px solid var(--line, #e7e5ef); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.cs-list { height: min(60vh, 520px); overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--soft, #f7f6fb); }
.cs-empty { text-align: center; margin: auto; }
.cs-msg { display: flex; flex-direction: column; max-width: 80%; }
.cs-msg.mine { align-self: flex-end; align-items: flex-end; }
.cs-msg.theirs { align-self: flex-start; align-items: flex-start; }
.cs-bub { padding: 9px 12px; border-radius: 16px; background: var(--card, #fff); color: var(--ink, #1f2937); border: 1px solid var(--line, #e7e5ef); word-break: break-word; }   /* 바탕·글자색을 화면 모드에 맞춤 — 흰 바탕이 박혀 있어 어두운 화면에서 상대 답이 안 보였음 (사용자 2026-11-05) */
:root[data-theme="dark"] .cs-msg.theirs .cs-bub { background: var(--bubble); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cs-msg.theirs .cs-bub { background: var(--bubble); } }
.cs-msg.mine .cs-bub { background: var(--accent, #DB2777); color: #fff; border-color: transparent; }
.cs-bub p { margin: 0; white-space: pre-wrap; }
.cs-bub img { display: block; max-width: 220px; max-height: 260px; border-radius: 10px; margin-bottom: 4px; }
.cs-meta { display: flex; gap: 6px; font-size: .72rem; color: var(--muted, #6b7280); margin-top: 2px; }
.cs-read { color: var(--accent, #DB2777); font-weight: 700; }
.cs-rep { background: none; border: 0; padding: 0; font: inherit; color: var(--muted, #6b7280); text-decoration: underline; cursor: pointer; }
.cs-form { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line, #e7e5ef); background: var(--card, #fff); }
.cs-form textarea { flex: 1; resize: none; border: 1px solid var(--line, #e7e5ef); border-radius: 14px; padding: 9px 12px; font: inherit; max-height: 140px; background: var(--bg, #fff); color: inherit; }
.cs-photo, .cs-send { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 0; }
.cs-photo { background: var(--soft, #f1effa); color: var(--accent, #DB2777); }
.cs-send { background: var(--accent, #DB2777); color: #fff; }
.cs-send:disabled { opacity: .5; }
.cs-pic, .cs-note { margin: 0; padding: 6px 12px 10px; }
.cs-threads { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.cs-th { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n t" "l b"; gap: 2px 8px; padding: 12px 14px; border-radius: 14px; background: var(--card, #fff); border: 1px solid var(--line, #e7e5ef); color: inherit; text-decoration: none; }
.cs-th b { grid-area: n; } .cs-th small { grid-area: t; } .cs-last { grid-area: l; color: var(--muted, #6b7280); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-th.new { border-color: var(--accent, #DB2777); }
.cs-badge { grid-area: b; justify-self: end; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #EF4444; color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.cs-tag { margin-left: 6px; font-size: .72rem; color: #DC2626; }
.cs-agree { display: flex; gap: 6px; align-items: flex-start; padding: 0 12px 10px; margin: 0; }
.cs-wish { text-align: center; padding: 22px 16px; display: flex; flex-direction: column; gap: 10px; }
.cs-wish h1 { font-size: 1.15rem; margin: 0; }
.cs-wish-ico .ico { width: 40px; height: 40px; color: var(--accent, #DB2777); }
.cs-wish-done { color: #059669; font-weight: 700; }
/* 도장판·동의 칸 바로잡기 (2026-10-24 사용자 화면 — 5·10번 칸이 상자 밖으로, 체크 칸이 큰 검은 네모로 따로 한 줄) */
.stp-board { width: 100%; box-sizing: border-box; }
.tl-form .tl-agree { display: flex; flex-direction: row; gap: 8px; align-items: flex-start; font-size: 13.5px; font-weight: 600; color: var(--fg, inherit); text-align: left; }
.tl-form .tl-agree input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--p); font-size: inherit; }
.tl-form .tl-fine { text-align: left; margin: -4px 0 0 28px; }
/* 가게 툴 입력 화면(콜·예약·도장) 칸 바로잡기 (2026-10-24 사용자 화면 — '(선택)'이 따로 한 줄, 전화 칸이 화면 밖으로) */
.tl-form label:not(.tl-agree) { display: block; }
.tl-form label:not(.tl-agree) > input, .tl-form label:not(.tl-agree) > select, .tl-form label:not(.tl-agree) > textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.tl-form label:not(.tl-agree) .muted { font-weight: 400; }
.tl-row2 { align-items: end; }
.tl-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .tl-form select, .tl-form textarea { padding: 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: inherit; font-weight: 400; }
.tl-form input:focus, .tl-form select:focus, .tl-form textarea:focus { outline: 2px solid var(--p-bg); border-color: var(--p); }
/* 아이콘 위 작은 표(도장 0/10·접수·날짜·새 답)는 아이콘 오른쪽 위 모서리 안에 — 옆 아이콘을 덮지 않게 (2026-10-24) */
.wg-ico .wg-badge { left: auto; right: -6px; top: -6px; max-width: calc(100% + 4px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 5px; font-size: 10.5px; box-shadow: 0 0 0 2px var(--card); }
/* 가게 툴 내 위젯 — 위젯 그림 (2026-10-24) */
.wgt-img { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0 8px; padding: 14px; border-radius: 16px; background: var(--soft2); }
.wgt-img .wgt-prev { flex: none; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--card); display: flex; align-items: center; justify-content: center; }
.wgt-img .wgt-prev img { width: 100%; height: 100%; object-fit: cover; }
.wgt-img p { margin: 2px 0 8px; }
.wgt-img form.inline { display: inline; margin-left: 8px; }
/* 가게 한 칸 위젯의 로고 — 가운데, 잘리지 않게 (2026-10-24 사용자 'CI 가 중앙에, 디어렙 깨짐') */
.wg-ico-store img { width: 76%; height: 76%; object-fit: contain; border-radius: 0; }
/* 위젯 목록 시트 묶음 제목 (2026-10-24 '카테고리화') */
.wg-add-grp { border-bottom: 1px solid var(--line, rgba(0,0,0,.06)); }
.wg-add-grp:last-child { border-bottom: 0; }
.wg-add-grp > .wg-add-item:last-child { margin-bottom: 8px; }
.wg-add-cat { display: flex; align-items: center; gap: 8px; padding: 14px 6px; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.wg-add-cat::-webkit-details-marker { display: none; }
.wg-add-cat span { flex: 1; }
.wg-add-cat small { color: var(--muted); font-weight: 600; font-size: 13px; }
.wg-add-cat .ico { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
.wg-add-grp[open] > .wg-add-cat .ico { transform: rotate(180deg); }
.wg-add-list { gap: 0; }
.wg-add-item .wg-ico img { object-fit: contain; }
.wg-add-grp > .wg-add-item + .wg-add-item { margin-top: 4px; }
/* 내 위젯 단추 넣기 (2026-10-24) */
.wgt-sec { margin: 16px 0 6px; }
.wgt-sec small { font-weight: 400; margin-left: 4px; }
.wgt-row.wgt-fixed { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--soft2); margin-bottom: 10px; }
.wgt-row.wgt-fixed .ico { width: 18px; height: 18px; color: var(--p); }
.wgt-row.wgt-fixed small { margin-left: auto; }
.wgt-etc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; margin-bottom: 8px; }
.wgt-etc input { min-width: 0; width: 100%; }
/* 가게 카드 높이 고정 (사용자 2026-10-24 '정보가 많아져도 위아래 폭이 넓어지지 않게') — 줄마다 한 줄로: 넘치는 배지·꼬리표는 옆으로 밀어 보기, 주소는 말줄임 */
.store-card .sc-top { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.store-card .sc-top::-webkit-scrollbar { display: none; }
.store-card .sc-top > b { flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 이름이 먼저 — 넘치는 배지는 옆으로 밀어 봄 */
.store-card .sc-top > .badge, .store-card .sc-top > .sc-badge { flex: none; }
.store-card .sc-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.store-card .sc-tags { flex-wrap: nowrap; align-items: center; overflow-x: auto; scrollbar-width: none; min-width: 0; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.store-card .sc-tags::-webkit-scrollbar { display: none; }
.store-card .sc-tags > * { flex: none; white-space: nowrap; }
/* 구인·행사 카드 목록·상세 (2026-10-24 '카드로 정리') */
.pl-cards { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pl-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; }
.pl-card:active { transform: scale(.99); }
.pl-date { flex: none; width: 48px; height: 52px; border-radius: 12px; background: var(--p-bg); color: var(--p-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.pl-date b { font-size: 20px; }
.pl-date small { font-size: 11px; font-weight: 600; }
.pl-date .ico { width: 22px; height: 22px; }
.pl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-title { font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-when { font-size: 12px; color: var(--p-dark); font-weight: 600; }
.pl-av { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--soft2); }
.pd-post h1 { font-size: 20px; line-height: 1.35; margin: 4px 0 6px; }
.pd-when { display: flex; align-items: center; gap: 6px; color: var(--p-dark); font-weight: 600; margin: 0 0 10px; }
.pd-when .ico { width: 16px; height: 16px; }
.pd-body { margin: 12px 0; line-height: 1.6; }
.pd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
/* 모임 화면 위 '내 별명' 줄 (2026-10-24) */
.grp-alias-line { margin: 6px 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.grp-alias-line > summary { font-size: 13.5px; padding: 9px 12px; }
.grp-alias-line > summary b { margin-left: 2px; }
.grp-alias-line > summary small { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--p); font-weight: 600; }
.grp-alias-line > summary .ico { width: 15px; height: 15px; }
.grp-alias-line > p { margin: 0; padding: 0 12px 10px; }
/* 메뉴·안내 순서 바꾸기 ▲▼ (2026-10-24) — 오른쪽 아래 두 단추, × 는 오른쪽 위 */
.rows .row { padding-right: 74px; }
.row-mv { position: absolute; bottom: 6px; width: 32px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--p); cursor: pointer; }
.row-mv.row-up { right: 40px; } .row-mv.row-dn { right: 6px; }
.row-mv .ico { width: 17px; height: 17px; }
.row-mv:active { background: var(--p-bg); }
.rows .row:first-child .row-up, .rows .row:last-child .row-dn { opacity: .3; pointer-events: none; }
@keyframes rowMoved { from { box-shadow: 0 0 0 3px var(--p); } to { box-shadow: 0 0 0 0 transparent; } }
.rows .row.row-moved { animation: rowMoved .7s ease-out; }
/* 모임 화면 깔끔하게 (사용자 2026-10-24 '좀 더 팬시한 디자인 — 복잡해서 안 읽혀') — 상자 테두리를 줄이고 한 덩어리처럼 */
.grp-cover { border-radius: 22px; aspect-ratio: 16 / 6; box-shadow: 0 10px 30px rgba(20, 10, 60, .12); }
.grp-top { margin: 14px 2px 4px; }
.grp-top h1 { font-size: 21px; letter-spacing: -.02em; }
.grp-alias-line { margin: 0 2px 14px; border: 0; background: none; border-radius: 0; }
.grp-alias-line > summary { padding: 2px 0 2px 34px; font-size: 12.5px; color: var(--muted); gap: 4px; }
.grp-alias-line > summary:hover { background: none; }
.grp-alias-line > summary b { color: var(--ink); font-weight: 600; }
.grp-alias-line > summary > .ico { display: none; }
.grp-alias-line > summary small { margin-left: 6px; font-size: 12px; }
.grp-alias-line[open] { background: var(--card); border-radius: 14px; padding: 6px 0 2px; box-shadow: 0 4px 16px rgba(20, 10, 60, .08); }
.grp-alias-line[open] > summary { padding-left: 14px; }
.gp-write, .gp-write[open] { border: 0; border-width: 0; border-radius: 18px; background: var(--card); box-shadow: 0 2px 12px rgba(20, 10, 60, .06); }
.gp-write > summary { font-weight: 500; color: var(--muted); padding: 14px 16px; }
.gp-write > summary .ico { color: var(--p); }
.gp-write[open] > summary { border-bottom-color: var(--soft2); }
.gp-notice { border: 0 !important; background: linear-gradient(90deg, var(--p-bg), transparent); border-radius: 14px; padding: 11px 14px; font-weight: 600; }
.gt { border: 0; border-radius: 22px; box-shadow: 0 8px 28px rgba(20, 10, 60, .10); }
.gt-band { background: var(--p-bg); color: var(--p-dark); padding: 12px 16px; }
.gt-band span { opacity: .75; }
.gt-band a { color: var(--p-dark); }
.gt-post { border-bottom-color: var(--soft2); padding: 14px 16px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gt, :root:not([data-theme="light"]) .gp-write, :root:not([data-theme="light"]) .grp-cover { box-shadow: none; } }
:root[data-theme="dark"] .gt, :root[data-theme="dark"] .gp-write, :root[data-theme="dark"] .grp-cover { box-shadow: none; }
.grp-push { border: 0 !important; border-radius: 18px; background: var(--card); box-shadow: 0 2px 12px rgba(20, 10, 60, .06); }
/* 모임 댓글 고치기·삭제 (2026-10-24) */
.gp-cedit { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; }
.gp-cedit textarea { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; }
.gp-cedit-acts { display: flex; justify-content: flex-end; gap: 6px; }
.gc-own { align-self: flex-end; margin: -2px 4px 4px 0; }
.gc-own > summary { list-style: none; cursor: pointer; display: inline-flex; padding: 0 6px; color: var(--muted); opacity: .7; }
.gc-own > summary::-webkit-details-marker { display: none; }
.gc-own > summary .ico { width: 16px; height: 16px; }
.gc-own[open] { width: 100%; background: var(--card); border-radius: 14px; padding: 8px; box-shadow: 0 4px 16px rgba(20, 10, 60, .08); }
.gc-own-edit { display: flex; gap: 6px; align-items: flex-end; margin-bottom: 4px; }
.gc-own-edit textarea { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; }
.gc-own-del { color: var(--err) !important; }
.gc-msg.me { display: flex; flex-direction: column; }
/* 최신 글 칸 더 잘 보이게 (사용자 2026-10-24 '색을 진하게') — 보라 테두리 + 진한 보라 띠 */
.gt { border: 2px solid var(--p); box-shadow: 0 10px 30px rgba(107, 44, 245, .18); }
.gt-band { background: linear-gradient(135deg, #DB2777, #8B5CF6); color: #fff; }
.gt-band span { opacity: .9; }
.gt-band a, .gt-band .ico { color: #fff; }
/* 소식 화면 정돈 (2026-10-24) — 분류 사각 단추 그리드 + 제목 목록 */
.nc-all { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 4px; padding: 12px; border-radius: 14px; background: var(--card); color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: 0 2px 10px rgba(20, 10, 60, .05); }
.nc-all.on { background: linear-gradient(135deg, #DB2777, #8B5CF6); color: #fff; }
.nc-all .ico { width: 18px; height: 18px; }
.nc-group { margin: 14px 2px 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.nc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nc-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 70px; padding: 8px 4px; border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 12.5px; font-weight: 600; text-align: center; box-shadow: 0 2px 10px rgba(20, 10, 60, .05); }
.nc-btn .ico { width: 20px; height: 20px; color: var(--p); }
.nc-btn small { position: absolute; top: 5px; right: 7px; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.nc-btn.on { background: var(--p); color: #fff; } .nc-btn.on .ico, .nc-btn.on small { color: #fff; }
.nc-btn.empty { opacity: .45; }
.live-news .ln-rest > summary { cursor: pointer; padding: 8px 2px; color: var(--p); font-size: 13.5px; font-weight: 600; list-style: none; }
.live-news .ln-rest > summary::-webkit-details-marker { display: none; }
.nc-list-h { margin: 20px 2px 8px; font-size: 17px; }
.nl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nl-item { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; box-shadow: 0 2px 10px rgba(20, 10, 60, .05); }
.nl-item.old { opacity: .7; }
.nl-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--p-bg); display: flex; align-items: center; justify-content: center; }
.nl-ico .ico { width: 18px; height: 18px; color: var(--p); }
.nl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nl-body b { font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nl-body small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-cat { color: var(--p-dark); font-weight: 600; }
.nl-item > .ico { flex: none; width: 16px; height: 16px; color: var(--muted); }
.nc-foot { margin: 14px 2px; }
/* 소식 분류 작게 (2026-10-24 '카테고리가 페이지 전부를 차지해') — 접히는 칸 + 한 줄 작은 단추 */
.nc-cats { margin: 8px 0 4px; border-radius: 16px; background: var(--card); box-shadow: 0 2px 10px rgba(20, 10, 60, .05); }
.nc-cats > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 14.5px; }
.nc-cats > summary::-webkit-details-marker { display: none; }
.nc-cats > summary > span { flex: 1; } .nc-cats > summary b { color: var(--p); margin-left: 4px; }
.nc-cats > summary small { color: var(--muted); font-size: 12.5px; }
.nc-cats > summary .ico { width: 17px; height: 17px; color: var(--p); }
.nc-cats > summary > .ico:last-child { color: var(--muted); transition: transform .2s; }
.nc-cats[open] > summary > .ico:last-child { transform: rotate(180deg); }
.nc-cats .nc-grid { padding: 0 10px 10px; gap: 6px; }
.nc-cats .nc-group { margin: 2px 14px 6px; font-size: 11.5px; }
.nc-cats .nc-btn { flex-direction: row; justify-content: flex-start; gap: 5px; min-height: 36px; padding: 0 8px; border-radius: 10px; background: var(--soft2); box-shadow: none; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.nc-cats .nc-btn .ico { width: 15px; height: 15px; flex: none; }
.nc-cats .nc-btn span { overflow: hidden; text-overflow: ellipsis; }
.nc-cats .nc-btn small { position: static; margin-left: auto; font-size: 10.5px; }
.nc-cats .nc-btn.on { background: var(--p); }
.nc-cats .nc-btn small { display: none; }   /* 이름이 잘리지 않게 수는 뺌 */
.nc-cats .nc-btn { justify-content: center; }
.nc-cats .nc-btn { padding: 0 3px; gap: 3px; font-size: 12px; letter-spacing: -.03em; }
.nc-cats .nc-btn .ico { width: 14px; height: 14px; }
/* 소식 목록 아코디언 (2026-10-24) */
details.nl-item { display: block; padding: 0; }
details.nl-item > summary { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; cursor: pointer; list-style: none; }
details.nl-item > summary::-webkit-details-marker { display: none; }
details.nl-item > summary > .ico { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform .2s; }
details.nl-item[open] > summary > .ico { transform: rotate(180deg); }
details.nl-item[open] { opacity: 1; box-shadow: 0 6px 20px rgba(107, 44, 245, .12); }
details.nl-item[open] .nl-body b { -webkit-line-clamp: unset; }
.nl-more { padding: 0 14px 14px 62px; }
.nl-more p { margin: 0 0 10px; line-height: 1.6; font-size: 14.5px; }
.nl-more .btn .ico { width: 15px; height: 15px; }
@media (max-width: 380px) { .nl-more { padding-left: 14px; } }
/* 소식 [개업] — 새로 문 연 가게 (2026-10-24) */
.op-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.op-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; box-shadow: 0 2px 10px rgba(20, 10, 60, .05); }
.op-item img { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--soft2); }
.op-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.op-body b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-body small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-tag { color: var(--ok); font-weight: 700; } .op-tag.soon { color: var(--p-dark); }
.op-note { color: var(--ink) !important; opacity: .75; }
.op-item > .ico { flex: none; width: 16px; height: 16px; color: var(--muted); }
/* 위젯 위 창 (2026-10-24) — 제목 + 닫기 */
.wg-sheet-bar { justify-content: space-between; gap: 10px; }
.wg-sheet-bar b { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 4px; }
.wg-sheet { z-index: 1200; }
/* 버스 정류장 지도 (2026-10-24) — 보라 점, 누르면 이름 */
.bus-map { height: 300px; border-radius: 16px; margin: 6px 0 4px; }
.bm-pin { display: block; width: 18px; height: 18px; border-radius: 50%; background: #DB2777; border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.35); position: relative; cursor: pointer; }
.bm-pin b { display: none; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 3px 8px; border-radius: 8px; background: #1F1B2E; color: #fff; font: 700 12px/1.3 Pretendard, system-ui, sans-serif; white-space: nowrap; }
.bm-pin.on { background: #22D3EE; transform: scale(1.25); }
.bm-pin.on b { display: block; }
.bus-map-tip { margin: 0 2px 10px; }
.bus-stop.flash { box-shadow: 0 0 0 3px var(--p); transition: box-shadow .3s; }
/* 버스 — 지도 + 누른 정류장 하나만 (2026-10-24) · 내 정류장(별)은 그대로 */
.map-mode .bus-find, .map-mode .bus-lead, .map-mode #busNone { display: none !important; }
.map-mode .bus-sec[data-dong] > h2 { display: none; }
.map-mode .bus-sec[data-dong] .bus-stop:not(.picked) { display: none; }
.map-mode .bus-sec[data-dong]:not(:has(.bus-stop.picked)) { display: none; }
.map-mode .bus-stop.picked { box-shadow: 0 0 0 2px var(--p); }
.map-mode .bus-map-tip { text-align: center; padding: 14px; border-radius: 14px; background: var(--card); margin: 8px 0 12px; }
.map-mode #busFav > h2 { font-size: 14px; color: var(--muted); }
/* 가게 칸 창 — 이름 옆 로고(없으면 캐릭터) (2026-10-24) */
.wg-st-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wg-st-head > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-st-logo { flex: none; width: 38px; height: 38px; border-radius: 11px; overflow: hidden; background: var(--card); box-shadow: 0 1px 6px rgba(20, 10, 60, .12); display: flex; align-items: center; justify-content: center; }
.wg-st-logo img { width: 100%; height: 100%; object-fit: cover; }
.wg-st-logo.is-logo img { width: 80%; height: 80%; object-fit: contain; }
.wg-st-logo .logo-dark { display: none; }
:root[data-theme="dark"] .wg-st-logo .logo-light { display: none; } :root[data-theme="dark"] .wg-st-logo .logo-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wg-st-logo .logo-light { display: none; } :root:not([data-theme="light"]) .wg-st-logo .logo-dark { display: block; } }
/* 내 궁금해요 고치기·지우기 (2026-10-24) */
.nbq-own { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.nbq-edit { flex: 1 1 100%; } .nbq-edit:not([open]) { flex: 0 0 auto; }
.nbq-edit > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; color: var(--p); font-weight: 600; font-size: 14px; }
.nbq-edit > summary::-webkit-details-marker { display: none; }
.nbq-edit .ico, .nbq-del .ico { width: 15px; height: 15px; }
.nbq-edit form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.nbq-edit textarea { width: 100%; }
.nbq-del { display: inline-flex; align-items: center; gap: 4px; color: var(--err) !important; font-size: 14px; }
/* 버스 노선 (2026-10-24) — 번호를 누르면 지도에 선, 아래 칸에 방향·첫차·막차·정류장 */
.bst-rt i:not(.more), .ba-no { cursor: pointer; }
.bst-rt i:not(.more):hover, .ba-no:hover { text-decoration: underline; }
.br-stop { display: block; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #DB2777; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.br-stop.home { background: #DB2777; }
.br-stop.end { width: 14px; height: 14px; background: #1F1B2E; border-color: #fff; }
.bus-route { margin: 8px 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: 0 2px 12px rgba(20, 10, 60, .07); }
.br-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.br-head b { font-size: 17px; color: var(--p-dark); }
.br-dir { padding: 8px 0; border-top: 1px dashed var(--line); }
.br-line { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-weight: 700; font-size: 14.5px; }
.br-sw { flex: none; width: 18px; height: 5px; border-radius: 3px; }
.br-stops > summary { cursor: pointer; color: var(--p); font-size: 13px; margin-top: 6px; }
.br-stops ol { margin: 6px 0 0; padding-left: 22px; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.br-stops li.home { color: var(--ink); font-weight: 700; }
.route-on .bm-pin:not(.on) { opacity: .25; transform: scale(.7); }
.bst-rt i.more { cursor: pointer; }
/* 대화 속 버스 길 지도 (2026-10-24) */
.bp-wrap { margin: 10px 0 4px; }
.bp-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.bp-tabs::-webkit-scrollbar { display: none; }
.bp-tab { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.bp-tab b { font-size: 14px; } .bp-tab small { font-size: 11.5px; color: var(--muted); }
.bp-tab.on { border-color: var(--p); background: var(--p-bg); } .bp-tab.on b { color: var(--p-dark); }
.bp-map { height: 260px; border-radius: 14px; overflow: hidden; margin: 8px 0 6px; }
.bp-steps { margin: 4px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.7; }
.bp-no { color: var(--p-dark); }
.bp-tag { display: inline-block; padding: 3px 8px; border-radius: 9px; font: 700 12px/1.3 Pretendard, system-ui, sans-serif; color: #fff; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.bp-tag.on { background: #059669; } .bp-tag.tr { background: #F59E0B; } .bp-tag.off { background: #DC2626; }
.ev-find { margin: 10px 0; }
/* 위젯 아이콘 새 글 빨간 숫자 (2026-10-24) */
.wg-ico { position: relative; }
.wg-new { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #EF4444; color: #fff; font: 700 11.5px/20px Pretendard, system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--card); z-index: 3; }
.wg-new[hidden] { display: none; }
.pl-new { display: inline-block; padding: 1px 6px; margin-right: 2px; border-radius: 6px; background: #EF4444; color: #fff; font: 800 10.5px/1.5 Pretendard, system-ui, sans-serif; font-style: normal; vertical-align: 2px; }
/* 대화 답 속 위젯 같은 단추 (2026-10-24) */
.chat-apps { display: flex; gap: 18px; margin: 12px 0 4px; }
.chat-apps .wg-app { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 88px; text-decoration: none; color: var(--ink); }
.chat-apps .wg-ico { width: 60px; height: 60px; border-radius: 18px; background: var(--card); box-shadow: 0 3px 12px rgba(20, 10, 60, .1); display: flex; align-items: center; justify-content: center; color: var(--p); }
.chat-apps .wg-ico > .ico { width: 28px; height: 28px; }
.chat-apps .wg-lbl { font-size: 12.5px; font-weight: 600; text-align: center; white-space: normal; overflow: visible; line-height: 1.3; }
/* 버스 — 내 정류장이 있으면 첫 화면은 내 정류장만 (2026-10-24) */
.map-mode.fav-first #busFav > h2 { font-size: 16px; color: var(--ink); }
.bus-map-open { margin: 6px 0 12px; }

/* 교통 CCTV 지도 (위젯, 2026-10-24) — 점만, 누르면 지도 아래 영상 */
.cc-map { height: 360px; margin: 4px 0 10px; }
.cc-now { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; min-height: 48px; }
.cc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-main b { font-size: 15px; }
.cc-head .btn { flex: 0 0 auto; white-space: nowrap; }
.cc-now .cam-video { max-height: none; }

/* 첫 화면 [버스] 칸 — 내 정류장 실시간 도착 (2026-10-24) */
.bf-list { list-style: none; margin: 0; padding: 0; }
.bf-stop { padding: 8px 0; border-top: 1px solid var(--line); }
.bf-stop:first-child { border-top: 0; }
.bf-name { display: flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; font-size: 15px; }
.bf-name b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-more { color: var(--muted); }
.bf-arr { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.bf-side { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.bf-dir { flex: 0 0 auto; max-width: 42%; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-items { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.bf-bus { white-space: nowrap; }
.bf-bus b { color: var(--p, #DB2777); }
.bf-bus small { color: var(--muted); font-size: 11.5px; }
.bf-bus.soon { color: #DC2626; font-weight: 700; }
.bf-at { font-size: 11px; }

/* 브랜드 단추 (2026-10-26 사용자 '배민은 배민 단추로, 카카오맵·로드뷰는 그 아이콘으로') — 그 앱의 색 + 왼쪽 작은 앱 아이콘 칸 */
.btn.small.brand { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border: 0; font-weight: 700; }
.btn.brand .bi { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 7px; font-size: 11px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
.btn.brand .bi .ico { width: 15px; height: 15px; }
.btn.brand > .ico { width: 16px; height: 16px; margin-left: 4px; }
.btn.brand.dl-baemin { background: #2AC1BC; color: #fff; } .dl-baemin .bi { background: #fff; color: #2AC1BC; }
.btn.brand.dl-coupangeats { background: #00A5F0; color: #fff; } .dl-coupangeats .bi { background: #fff; color: #00A5F0; }
.btn.brand.dl-yogiyo { background: #FA0050; color: #fff; } .dl-yogiyo .bi { background: #fff; color: #FA0050; }
.btn.brand.dl-ddangyo { background: #FF5E1A; color: #fff; } .dl-ddangyo .bi { background: #fff; color: #FF5E1A; }
.btn.brand.dl-ddocdoc { background: #2B6CF6; color: #fff; padding-left: 10px; }
.btn.brand.km-map { background: #FEE500; color: #191919; } .km-map .bi { background: #191919; color: #FEE500; }
.btn.brand.km-rv { background: #fff; color: #258FFF; box-shadow: inset 0 0 0 1.5px #258FFF; } .km-rv .bi { background: #258FFF; color: #fff; }
.btn.brand:hover { filter: brightness(.95); }
.admin-rows li > .row-acts { flex: none; display: flex; gap: 6px; }   /* 자가 학습 승인·거절 (2026-10-27) */

/* 질문 달성 이벤트 팝업 (2026-10-27 '위쪽 뚜레쥬르, 아래쪽 모리커피 동시에') — 위·아래 두 장 + 아래 단추 줄 */
.ev-pop { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 10, 35, .86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; }
.ev-pop[hidden] { display: none; }
.ev-pop-stack { display: flex; flex-direction: column; gap: 10px; width: min(92vw, 380px); max-height: calc(100dvh - 150px); overflow-y: auto; }
.ev-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 16px; border-radius: 20px; text-decoration: none; text-align: center; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: appPopIn .3s cubic-bezier(.2, .9, .3, 1.15) both; flex: none; justify-content: center; overflow: hidden; }
.ev-card-0 { background: linear-gradient(150deg, #0b5d3b, #13865a); }   /* 위 — 뚜레쥬르 초록 */
.ev-card-1 { background: linear-gradient(150deg, #3b2a1e, #6b4a32); animation-delay: .08s; }   /* 아래 — 커피 갈색 */
.ev-card.has-img { padding: 0; background: #000; }
.ev-card.has-img img { display: block; width: 100%; height: auto; max-height: calc((100dvh - 110px) / 2); object-fit: contain; }
.ev-tag { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.ev-store { font-size: 21px; letter-spacing: -.4px; line-height: 1.25; }
.ev-tiers { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.ev-tiers b { font-size: 17px; }
.ev-note { font-size: 12px; opacity: .85; }
.ev-cta { margin-top: 4px; padding: 8px 16px; border-radius: 999px; background: #fff; color: #222; font-weight: 800; font-size: 14px; }
.ev-pop-acts { display: flex; gap: 8px; width: min(92vw, 380px); }
.ev-pop-acts button { flex: 1; height: 42px; border: 0; border-radius: 12px; font-weight: 700; font-size: 14px; background: rgba(255, 255, 255, .92); color: #333; }
.ev-pop-acts .ev-x { background: #fff; color: #111; }
.ev-pick { display: flex; gap: 8px; margin: 8px 0; }   /* 질문 달성 이벤트 가게 고르기 (2026-10-27) */
.ev-pick .btn { flex: 1; line-height: 1.3; padding: 10px; }
.ev-pick .btn small { font-weight: 500; opacity: .85; }
.ev-picked { margin: 6px 0; }
.ev-pop-head { color: #fff; font-size: 15px; margin: 0; text-align: center; }

/* 답 모양 (2026-10-27 '프리젠테이션이 핵심') — 결론 줄·점 목록·출처 줄·표·그래프 */
.msg.bot .ans { margin: 0; }
.msg.bot .ans p { margin: 0 0 6px; line-height: 1.6; white-space: pre-wrap; }
.msg.bot .ans .ans-lead { font-weight: 800; font-size: 16px; letter-spacing: -.2px; margin-bottom: 8px; }
.msg.bot .ans .ans-points { margin: 2px 0 8px; padding-left: 18px; }
.msg.bot .ans .ans-points li { margin: 3px 0; line-height: 1.55; }
.msg.bot .ans .ans-note { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.ans-cap { display: block; font-size: 13px; margin: 0 0 6px; }
.ans-table-box, .ans-chart { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.ans-table-scroll { overflow-x: auto; }
.ans-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ans-table th, .ans-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ans-table thead th { font-size: 12px; color: var(--muted); font-weight: 600; text-align: right; }
.ans-table tbody th, .ans-table thead th:first-child { text-align: left; font-weight: 700; white-space: normal; }
.ans-table tr:last-child th, .ans-table tr:last-child td { border-bottom: 0; }
.ans-chart-svg { width: 100%; height: auto; display: block; }
.ans-chart-svg .ch-axis { stroke: var(--line); stroke-width: 1; }
.ans-chart-svg .ch-line { fill: none; stroke: var(--p); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ans-chart-svg .ch-dot { fill: var(--card); stroke: var(--p); stroke-width: 2; }
.ans-chart-svg .ch-bar { fill: var(--p); opacity: .8; }
.ans-chart-svg .ch-val { font-size: 10px; fill: var(--ink); text-anchor: middle; font-weight: 700; }
.ans-chart-svg .ch-lbl { font-size: 10px; fill: var(--muted); text-anchor: middle; }
/* 이웃 의견 — 버튼으로 열고 닫기 */
.nb-block > summary.nb-btn .nb-open { margin-left: auto; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 14%, transparent); }
.nb-block[open] > summary.nb-btn .nb-open { font-size: 0; }
.nb-block[open] > summary.nb-btn .nb-open::after { content: '닫기'; font-size: 12.5px; }
.ans-table tbody th { min-width: 7.5em; word-break: keep-all; white-space: pre-line; font-size: 12.5px; line-height: 1.35; }
.ans-table thead th:first-child { white-space: nowrap; }

/* 질문 달성 이벤트 — 쿠폰까지 남은 질문, 입력칸 위 오른쪽에 떠 있음 (2026-10-27) */
.ev-badge { position: absolute; right: 12px; top: -19px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px;
  background: linear-gradient(90deg, #DB2777, #8B5CF6); color: #fff; font-size: 12.5px; line-height: 1.2; text-decoration: none; box-shadow: 0 4px 14px rgba(107, 44, 245, .35); white-space: nowrap; max-width: calc(100% - 24px); }
.ev-badge svg { width: 14px; height: 14px; flex: none; }
.ev-badge b { font-size: 14px; color: #FDE047; }
.ev-badge-day { opacity: .8; font-size: 11.5px; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, .35); }
.ev-badge.bump { animation: evBump .5s ease; }
@keyframes evBump { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.composer-box:has(.ev-badge) .ask-bubble { display: none; }

/* 이벤트 참여 화면 /event/:id */
.ev-join { max-width: 520px; margin: 0 auto; padding: 12px 16px 40px; }
.ev-join-img { width: 100%; border-radius: 16px; display: block; }
.ev-join h1 { font-size: 22px; margin: 18px 0 6px; }
.ev-join .ev-gift { margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: var(--card, #f6f3ff); }
.ev-join .ev-gift b { color: #DB2777; }
.ev-join ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; font-size: 14px; }
.ev-join .ev-go { display: block; width: 100%; margin-top: 16px; padding: 15px; border: 0; border-radius: 14px; font-size: 17px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.ev-join .ev-go.kakao { background: #FEE500; color: #191919; }
.ev-join .ev-go.main { background: #DB2777; color: #fff; }
.ev-join .ev-need { font-size: 13px; opacity: .75; margin-top: 8px; text-align: center; }
.ev-join .ev-done { padding: 14px 16px; border-radius: 14px; background: #ECFDF5; color: #065F46; margin: 14px 0; }
.ev-join .ev-bar { height: 10px; border-radius: 99px; background: rgba(107, 44, 245, .15); overflow: hidden; margin: 8px 0 4px; }
.ev-join .ev-bar i { display: block; height: 100%; background: #DB2777; }

.ev-join .ev-bar i.w0 { width: 0%; } .ev-join .ev-bar i.w10 { width: 10%; } .ev-join .ev-bar i.w20 { width: 20%; } .ev-join .ev-bar i.w30 { width: 30%; } .ev-join .ev-bar i.w40 { width: 40%; } .ev-join .ev-bar i.w50 { width: 50%; } .ev-join .ev-bar i.w60 { width: 60%; } .ev-join .ev-bar i.w70 { width: 70%; } .ev-join .ev-bar i.w80 { width: 80%; } .ev-join .ev-bar i.w90 { width: 90%; } .ev-join .ev-bar i.w100 { width: 100%; }
/* 오픈 이벤트 팝업 제목·VS (2026-10-27) */
.ev-pop-title { margin: 0; color: #fff; font-size: 24px; font-weight: 900; letter-spacing: -.5px; text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.ev-pop-title::before { content: ''; display: block; width: 44px; height: 4px; margin: 0 auto 8px; border-radius: 4px; background: linear-gradient(90deg, #DB2777, #22D3EE); }
.ev-pop-stack .ev-vs { position: relative; align-self: center; margin: -16px 0 -18px; z-index: 2; width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #DB2777, #22D3EE); color: #fff; font-weight: 900; font-size: 30px; font-style: italic; letter-spacing: -1px; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); flex: none; }
/* 오픈 이벤트 팝업 — 어느 휴대폰이든 스크롤 없이 한 화면에, 두 그림 가깝게 (사용자 2026-10-27) — 그림 높이를 화면 높이에 맞춤 */
.ev-pop { gap: 8px; padding: max(10px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom)); }
.ev-pop-title { font-size: clamp(18px, 3dvh, 24px); }
.ev-pop-title::before { margin-bottom: 5px; }
.ev-pop-head { font-size: clamp(13px, 1.9dvh, 15px); }
.ev-pop-stack { max-height: none; overflow: visible; align-items: center; gap: 0; width: auto; max-width: min(92vw, 380px); }
.ev-card.has-img { width: auto; max-width: 100%; background: transparent; }
.ev-card.has-img img { width: auto; max-width: min(92vw, 380px); height: auto; max-height: calc((100dvh - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2); }
.ev-pop-stack .ev-vs { width: 70px; height: 70px; font-size: 28px; margin: -23px 0 -23px; }
.ev-pop-acts button { height: 40px; }
.ev-join .ev-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--card, #f3f0fb); color: inherit; font-weight: 700; font-size: 14px; text-decoration: none; }
.ev-join .ev-back svg { width: 18px; height: 18px; }

/* 버스 칸 — 정류장 아이콘·버스 모양 번호·내 버스 (사용자 2026-10-28) */
.bf-pin { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #2563EB; color: #fff; }
.bf-pin svg { width: 14px; height: 14px; }
.bus-no { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; min-width: 40px; height: 24px; padding: 0 6px 3px; margin-bottom: 3px; box-sizing: border-box;
  border-radius: 8px 8px 4px 4px; background: linear-gradient(#BFDBFE 0 7px, #2563EB 7px); color: #fff; font-weight: 800; font-size: 12.5px; line-height: 1; vertical-align: middle;
  box-shadow: inset 0 0 0 1.5px #1D4ED8; }
.bus-no::before, .bus-no::after { content: ''; position: absolute; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: #1F2937; border: 1.5px solid #fff; box-sizing: border-box; }
.bus-no::before { left: 5px; }
.bus-no::after { right: 5px; }
.bus-no-t { position: relative; z-index: 1; padding-bottom: 1px; }
.bf-bus { display: inline-flex; align-items: center; gap: 4px; }
.bf-star { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.bf-star svg { width: 16px; height: 16px; }
.bf-star.on { color: #F59E0B; }
.bf-star.on svg { fill: currentColor; }
.bf-mine { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(37, 99, 235, .08); }
.bf-mine-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bf-mine-row .muted { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-mine-min { font-size: 16px; color: #1D4ED8; white-space: nowrap; }
.bf-mine-row.soon .bf-mine-min { color: #DC2626; }
.bf-tip { font-size: 11.5px; }
/* 버스 페이지도 같게 (사용자 2026-10-28) — 정류장 핀·버스 모양 번호·별 */
.bus-stop summary .bf-pin { margin-right: 8px; align-self: center; }
.ba-list li { grid-template-columns: 58px 1fr auto 30px; }
.ba-list .bus-no { justify-self: start; }
.bus-no.ba-no, .bus-no.ba-no:hover { font-size: 13px; text-decoration: none; }
.ba-times { list-style: none; padding-left: 0; }
.ba-times li { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.bus-arr .bf-mine { margin: 4px 0 8px; }
/* 정류장 줄의 지나는 버스 번호도 작은 버스 모양 */
.bst-rt i:not(.more) { position: relative; padding: 2px 7px 3px; margin-bottom: 3px; border-radius: 6px 6px 3px 3px; background: linear-gradient(#BFDBFE 0 4px, #2563EB 4px); color: #fff; box-shadow: inset 0 0 0 1px #1D4ED8; }
.bst-rt i:not(.more)::before, .bst-rt i:not(.more)::after { content: ''; position: absolute; bottom: -2px; width: 5px; height: 5px; border-radius: 50%; background: #1F2937; border: 1px solid #fff; box-sizing: border-box; }
.bst-rt i:not(.more)::before { left: 4px; }
.bst-rt i:not(.more)::after { right: 4px; }
/* 버스 칸 기본 목록(내 정류장 없을 때)도 핀·버스 모양 (사용자 2026-10-28) */
.bt-item { display: flex; align-items: center; gap: 8px; }
.bt-item .bt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-item .bst-rt { display: inline-flex; flex-wrap: nowrap; gap: 3px; flex: none; }
.bt-item .bst-rt i { font-style: normal; font-size: 11.5px; font-weight: 800; }
.bt-item .bst-rt i.more { padding: 1px 6px; border-radius: 99px; background: var(--soft2, #eee); color: var(--muted); }
.bt-tip { margin: 6px 2px 0; font-size: 12px; }
.bt-item .bf-pin { flex: 0 0 26px; width: 26px; height: 26px; padding: 0; }
.bt-item .bt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.bt-item .bt-name { flex: none; max-width: 100%; }
.bt-item .bst-rt { flex-wrap: wrap; gap: 4px 4px; }
.grp-q .bt-item > .bf-pin { flex: 0 0 26px; }
.grp-q .bt-item > .bt-main { flex: 1; overflow: visible; white-space: normal; }
/* 정류장 표지판 아이콘 — 동그라미 없이 그림 그대로 (2026-10-28) */
.bf-pin, .grp-q .bt-item > .bf-pin { width: 28px; height: 28px; flex: 0 0 28px; background: transparent; border-radius: 0; }
.bf-pin svg, .bf-pin .ico-bus-stop { width: 28px; height: 28px; }
.bf-pin, .grp-q .bt-item > .bf-pin { width: 34px; height: 34px; flex: 0 0 34px; }
.bf-pin svg, .bf-pin .ico-bus-stop { width: 34px; height: 34px; }
/* 위젯 창 맨 위 [‹ 뒤로] — 늘, 크게 (사용자 2026-10-28) */
.wg-sheet-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); min-height: 56px; box-sizing: border-box; }
.wg-sheet-bar b { text-align: center; padding: 0; }
.sheet-back { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 14px 0 8px; border: 0; border-radius: 99px; background: #DB2777; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 10px rgba(107, 44, 245, .3); }
.sheet-back .ico { width: 22px; height: 22px; stroke-width: 2.6; }
.wg-sheet-bar .sheet-close { width: 40px; height: 40px; padding: 0; justify-content: center; }
.wg-sheet-bar .sheet-close .ico { width: 20px; height: 20px; }
/* 관리자 업종 분석 (2026-10-28) */
.bizgap .bg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 12px 0 16px; }
.bizgap .bg-facts div { padding: 10px 12px; border-radius: 12px; background: var(--soft2, #f4f2fb); display: flex; flex-direction: column; gap: 2px; }
.bizgap .bg-facts b { font-size: 20px; }
.bizgap .bg-facts span { font-size: 12px; color: var(--muted); }
.bizgap .bg-top li { margin: 6px 0; line-height: 1.5; }
.bizgap .tbl-wrap { overflow-x: auto; }
.bizgap .bg-tbl td, .bizgap .bg-tbl th { white-space: nowrap; font-size: 13px; }
.bg-st { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.bg-short { background: #DCFCE7; color: #166534; } .bg-ok { background: #E0E7FF; color: #3730A3; } .bg-over { background: #FEE2E2; color: #991B1B; } .bg-few { background: #F3F4F6; color: #6B7280; }
.bizgap .bg-find { display: flex; gap: 8px; margin: 12px 0; }
.bizgap .bg-find input { flex: 1; min-width: 0; }
.bizgap .bg-cands { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.bizgap .bg-cands a { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; }
.bizgap .bg-cands span { font-size: 12px; color: var(--muted); }
.bg-future { background: #FEF3C7; color: #92400E; }
.bizgap .bg-radius { display: inline-flex; gap: 4px; padding: 3px; border-radius: 99px; background: var(--soft2, #f1eefa); margin: 4px 0 10px; }
.bizgap .bg-radius a { padding: 6px 14px; border-radius: 99px; text-decoration: none; color: inherit; font-weight: 700; font-size: 14px; }
.bizgap .bg-radius a.on { background: #DB2777; color: #fff; }
.bizgap .bg-send { margin-top: 18px; padding: 14px; border-radius: 14px; background: var(--soft2, #f6f3ff); display: flex; flex-direction: column; gap: 8px; }
.bizgap .bg-send label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.bizgap .bg-mine { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bizgap .bg-mine a { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; }
.bizgap .bg-mine span { font-size: 12px; color: var(--muted); }
.bizgap .bg-link code { word-break: break-all; font-size: 13px; }
.bizgap .bg-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.bg-report .bg-office { margin: 0; font-weight: 800; color: #DB2777; }
.bg-report .bg-note { padding: 12px 14px; border-radius: 12px; background: #FFFBEB; margin: 10px 0; }
.bg-report .bg-note p { margin: 4px 0 0; white-space: pre-wrap; }
.bg-report .bg-contact { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
@media print { .head-row, .foot, .bg-acts, .bg-send { display: none !important; } .bizgap { box-shadow: none; border: 0; } }
.bizgap .bg-mapbox { position: relative; margin: 8px 0 12px; }
.bizgap .bg-map { height: 320px; border-radius: 14px; overflow: hidden; }
.bizgap .bg-map-tip { margin: 6px 2px 0; }
.bizgap .bg-map-go { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 5; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
/* 툴 모음 — 추천 위·쓰는 중 아래 흐리게 (2026-10-28) */
.tool-grid .tool-sec { grid-column: 1 / -1; list-style: none; margin: 10px 2px 0; font-size: 13px; font-weight: 800; color: var(--muted); }
.tool-grid .tool-sec:empty { display: none; }
.tool-btn.tool-rec { border-color: #DB2777; box-shadow: 0 0 0 1px #DB2777 inset; }
.tool-rec-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: #DB2777; color: #fff; font-size: 11px; vertical-align: middle; }
.tool-btn.tool-using { opacity: .5; filter: grayscale(.6); cursor: default; pointer-events: none; }

/* 상권 분석 보고서 (2026-10-28 '보고서 형식으로') */
.rp { display: flex; flex-direction: column; gap: 14px; }
.rp-verdict { padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, #DB2777, #4F46E5); color: #fff; }
.rp-verdict .rp-kicker { font-size: 12px; opacity: .8; font-weight: 700; }
.rp-verdict p { margin: 6px 0 0; font-size: 17px; font-weight: 800; line-height: 1.5; }
.rp-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .rp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rp-kpis div { padding: 12px; border-radius: 14px; background: var(--card, #fff); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-kpis span { font-size: 12px; color: var(--muted); font-weight: 700; }
.rp-kpis b { font-size: 22px; line-height: 1.2; }
.rp-kpis b small { font-size: 13px; margin-left: 1px; }
.rp-kpis em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.rp-short { color: #15803D; } .rp-ok { color: #4338CA; } .rp-over { color: #B91C1C; }
.rp-sec h3 { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 17px; }
.rp-no { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: #DB2777; color: #fff; font-size: 13px; align-items: center; justify-content: center; flex: none; }
.rp-opps { display: grid; gap: 10px; }
@media (min-width: 720px) { .rp-opps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rp-opp { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card, #fff); }
.rp-opp header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-opp header b { font-size: 16px; }
.rp-rank { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; background: #EDE9FE; color: #DB2777; font-weight: 900; font-size: 12px; align-items: center; justify-content: center; }
.rp-gauge { height: 8px; border-radius: 99px; background: #E5E7EB; margin: 12px 0 4px; overflow: hidden; }
.rp-gauge i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #22C55E, #86EFAC); min-width: 4px; }
.rp-gauge-t { margin: 0; font-size: 13px; }
.rp-opp ul { margin: 8px 0 0; padding-left: 16px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.rp-crowd { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-crowd li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #FEF2F2; }
.rp-crowd span { font-size: 12.5px; color: var(--muted); }
.rp-crowd em { font-style: normal; font-weight: 900; color: #B91C1C; }
.rp-bars { display: flex; flex-direction: column; gap: 6px; }
.rp-bar { display: grid; grid-template-columns: minmax(0, 8.5em) 1fr 3.4em; gap: 8px; align-items: center; font-size: 12.5px; }
.rp-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-bar-t { position: relative; height: 12px; border-radius: 99px; background: #F3F4F6; overflow: hidden; }
.rp-bar-t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; padding: 0; }
.rp-bar-t i.bg-short { background: #4ADE80; } .rp-bar-t i.bg-ok { background: #818CF8; } .rp-bar-t i.bg-over { background: #F87171; } .rp-bar-t i.bg-future { background: #FBBF24; } .rp-bar-t i.bg-few { background: #D1D5DB; }
.rp-bar-t s { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: #111827; opacity: .55; }
.rp-bar-n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-timeline { list-style: none; padding: 0 0 0 12px; margin: 8px 0; border-left: 2px solid #C4B5FD; display: flex; flex-direction: column; gap: 8px; }
.rp-timeline li { position: relative; display: flex; gap: 10px; font-size: 13.5px; }
.rp-timeline li::before { content: ''; position: absolute; left: -18px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #DB2777; }
.rp-timeline b { flex: none; color: #DB2777; }
.rp-more summary { cursor: pointer; font-weight: 700; padding: 8px 0; }

.rp-gauge i.w0, .rp-bar-t i.w0 { width: 0%; } .rp-gauge i.w5, .rp-bar-t i.w5 { width: 5%; } .rp-gauge i.w10, .rp-bar-t i.w10 { width: 10%; } .rp-gauge i.w15, .rp-bar-t i.w15 { width: 15%; } .rp-gauge i.w20, .rp-bar-t i.w20 { width: 20%; } .rp-gauge i.w25, .rp-bar-t i.w25 { width: 25%; } .rp-gauge i.w30, .rp-bar-t i.w30 { width: 30%; } .rp-gauge i.w35, .rp-bar-t i.w35 { width: 35%; } .rp-gauge i.w40, .rp-bar-t i.w40 { width: 40%; } .rp-gauge i.w45, .rp-bar-t i.w45 { width: 45%; } .rp-gauge i.w50, .rp-bar-t i.w50 { width: 50%; } .rp-gauge i.w55, .rp-bar-t i.w55 { width: 55%; } .rp-gauge i.w60, .rp-bar-t i.w60 { width: 60%; } .rp-gauge i.w65, .rp-bar-t i.w65 { width: 65%; } .rp-gauge i.w70, .rp-bar-t i.w70 { width: 70%; } .rp-gauge i.w75, .rp-bar-t i.w75 { width: 75%; } .rp-gauge i.w80, .rp-bar-t i.w80 { width: 80%; } .rp-gauge i.w85, .rp-bar-t i.w85 { width: 85%; } .rp-gauge i.w90, .rp-bar-t i.w90 { width: 90%; } .rp-gauge i.w95, .rp-bar-t i.w95 { width: 95%; } .rp-gauge i.w100, .rp-bar-t i.w100 { width: 100%; }
.rp-bar-gap { text-align: center; color: var(--muted); line-height: 1; }
/* 툴 모음 — 휴대폰은 아이콘만 4칸, 누르면 아래 설명 (사용자 2026-10-28) */
@media (max-width: 719px) {
  .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; }
  .tool-grid .tool-btn { padding: 4px 0; border: 0; background: transparent; box-shadow: none; gap: 6px; }
  .tool-grid .tool-btn.tool-rec { box-shadow: none; }
  .tool-grid .tool-btn small, .tool-grid .tool-btn .tool-tag, .tool-grid .tool-rec-tag { display: none; }
  .tool-grid .tool-btn b { font-size: 12.5px; line-height: 1.25; text-align: center; word-break: keep-all; }
  .tool-grid .tool-ico { width: 54px; height: 54px; border-radius: 16px; position: relative; }
  .tool-grid .tool-ico svg { width: 26px; height: 26px; }
  .tool-grid li[data-rec="1"] .tool-ico::after { content: '추천'; position: absolute; top: -6px; right: -10px; padding: 1px 5px; border-radius: 99px; background: #F59E0B; color: #fff; font-size: 10px; font-weight: 800; }
  .tool-grid li[data-using="1"] .tool-btn { pointer-events: auto; cursor: pointer; }
}
.tool-sheet { position: fixed; inset: 0; z-index: 1300; background: rgba(15, 10, 35, .45); display: flex; align-items: flex-end; }
.tool-sheet[hidden] { display: none; }
.tool-sheet-box { width: 100%; background: var(--card, #fff); border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); animation: sheet-up .18s ease-out; }
.tool-sheet-head { display: flex; align-items: center; gap: 10px; }
.tool-sheet-head b { flex: 1; font-size: 18px; }
.tool-sheet-head .tool-ico { width: 44px; height: 44px; border-radius: 12px; }
.tool-sheet-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--soft2, #f1f1f4); display: inline-flex; align-items: center; justify-content: center; }
.tool-sheet-price { font-weight: 800; color: #DB2777; }
.tool-sheet-go { display: block; text-align: center; padding: 14px; font-size: 16px; }
/* 오픈 이벤트 — 세지 않는 질문 (사용자 2026-10-28 '동일 질문과 실시간 검색 질문은 카운트 안 된다고 명시') */
.ev-join .ev-nocount { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: #FEF2F2; border: 1px solid #FECACA; }
.ev-join .ev-nocount > b { color: #B91C1C; }
.ev-join .ev-nocount ul { margin: 6px 0 4px; }
.ev-join .ev-nocount small { color: var(--muted); }
.ev-pop-rule { margin: 0; color: #fff; font-size: 12.5px; text-align: center; opacity: .92; }
.ev-pop-rule b { color: #FDE68A; }
.ev-pop { gap: 6px; }
.ev-pop-left { display: inline-block; margin-bottom: 3px; padding: 2px 10px; border-radius: 99px; background: #F59E0B; color: #fff; font-weight: 800; font-size: 13px; }
.ev-join .ev-left b { color: #B45309; font-size: 16px; }

/* 시외·고속·공항버스 → 버스타고 단추 (2026-10-28) */
.bustago-link { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; }
.bustago-link .bustago-ico .ico { width: 34px; height: 34px; display: block; }
.bustago-link .bustago-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.bustago-link .bustago-txt b { font-size: 14px; }
.bustago-link .bustago-txt small { font-size: 12px; color: var(--muted); }
.bustago-link > .ico-external-link { width: 16px; height: 16px; color: var(--muted); }
.chat-apps .wg-app.ext .wg-ico { background: transparent; box-shadow: none; }
.chat-apps .wg-app.ext .wg-ico > .ico { width: 60px; height: 60px; }

/* 휴대폰 알림 켜기 말풍선 — 머리줄 종 아래 (2026-10-28) */
.push-float { position: fixed; z-index: 1100; top: calc(var(--top-h, 57px) + 6px); right: 10px; width: min(340px, calc(100vw - 20px)); display: flex; align-items: center; gap: 10px; padding: 11px 10px 11px 12px; border-radius: 16px; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(20, 10, 60, .18); animation: pfIn .25s ease-out both; }
.push-float::before { content: ''; position: absolute; top: -7px; right: var(--pf-tail, 22px); width: 12px; height: 12px; background: var(--card); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.push-float .pf-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--p); color: #fff; display: flex; align-items: center; justify-content: center; }
.push-float .pf-ico .ico { width: 18px; height: 18px; }
.push-float .pf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.push-float .pf-txt b { font-size: 14px; }
.push-float .pf-txt span { font-size: 12.5px; color: var(--muted); }
.push-float .pf-on { flex: none; }
.push-float .pf-x { flex: none; border: 0; background: none; color: var(--muted); padding: 4px; cursor: pointer; }
.push-float .pf-x .ico { width: 16px; height: 16px; }
@keyframes pfIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 개인비서 '내 할 일' (2026-10-29) */
.todo-page { max-width: 640px; margin: 0 auto; }
.todo-add { display: flex; gap: 8px; align-items: stretch; margin: 6px 0 6px; }
.todo-add textarea { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); resize: vertical; }
.todo-add .btn { flex: none; align-self: stretch; }
.todo-btns { display: flex; flex-direction: column; gap: 6px; flex: none; }
.todo-btns .btn { flex: 1; }
.todo-mic { flex: none; width: 100%; min-height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--p); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.todo-mic .ico { width: 22px; height: 22px; }
.todo-mic.on { background: var(--err-bg); border-color: var(--err); color: var(--err); animation: pulse 1s ease-in-out infinite; }
.todo-how { margin: 4px 0 12px; padding-left: 18px; line-height: 1.55; }
.todo-sec { margin: 14px 0; }
.todo-sec h2 { font-size: 15px; margin: 0 0 6px; }
.todo-sec.late h2 { color: var(--err); }
.todo-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.todo-item { display: flex; align-items: center; gap: 8px; padding: 10px 8px; }
.todo-item + .todo-item { border-top: 1px solid var(--line); }
.todo-item form { margin: 0; flex: none; }
.todo-check, .todo-del { border: 0; background: none; padding: 4px; cursor: pointer; color: var(--muted); display: flex; }
.todo-check .ico { width: 24px; height: 24px; }
.todo-check:hover, .todo-check.on { color: var(--p); }
.todo-del .ico { width: 16px; height: 16px; }
.todo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.todo-text { font-size: 15px; line-height: 1.4; word-break: break-word; }
.todo-meta .ico { width: 13px; height: 13px; vertical-align: -2px; }
.todo-auto { color: var(--p); }
.todo-item.is-done .todo-text { text-decoration: line-through; color: var(--muted); }
.todo-done summary { cursor: pointer; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.todo-privacy { margin-top: 16px; }
/* 음성 인식 시험 (2026-10-29) */
.vt-page { max-width: 640px; margin: 0 auto; }
.vt-env { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.vt-box { display: block; margin: 10px 0; }
.vt-in { display: flex; gap: 8px; align-items: stretch; margin-top: 4px; }
.vt-in input, .vt-in textarea { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.vt-in .todo-mic { width: 52px; min-height: 44px; }
.vt-log { list-style: none; padding: 0; margin: 6px 0 12px; font-size: 13px; }
.vt-log li { padding: 6px 2px; border-top: 1px solid var(--line); }
.vt-log b { color: var(--p); margin-right: 6px; }
.vt-log .vt-alt { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
/* 음성 막대 — 화면 아래 (2026-10-29) */
.vbar { position: fixed; z-index: 1500; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); width: min(460px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 22px; background: rgba(28, 20, 56, .94); color: #fff; box-shadow: 0 10px 30px rgba(20, 10, 60, .35); animation: vbarIn .2s ease-out both; }
.vbar[hidden] { display: none; }
.vbar-wave { flex: none; display: flex; align-items: center; gap: 3px; height: 26px; }
.vbar-wave i { display: block; width: 4px; height: 6px; border-radius: 3px; background: #A78BFA; transition: height .2s; }
.vbar.is-wait .vbar-wave i { background: #6B7280; animation: vbarWait 1.2s ease-in-out infinite; }
.vbar.is-ready .vbar-wave i { background: #22D3EE; animation: vbarReady 1.1s ease-in-out infinite; }
.vbar.is-hear .vbar-wave i { background: #A78BFA; animation: vbarHear .7s ease-in-out infinite; }
.vbar-wave i:nth-child(2) { animation-delay: .1s !important; } .vbar-wave i:nth-child(3) { animation-delay: .2s !important; } .vbar-wave i:nth-child(4) { animation-delay: .3s !important; } .vbar-wave i:nth-child(5) { animation-delay: .4s !important; }
.vbar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.vbar-state { font-size: 15px; }
.vbar.is-ready .vbar-state { color: #67E8F9; }
.vbar-heard { font-size: 13px; color: #D4D4F7; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vbar-stop { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: #fff; color: #2A1B5C; font-weight: 700; font-size: 14px; cursor: pointer; }
@keyframes vbarIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes vbarWait { 0%, 100% { height: 6px; opacity: .5; } 50% { height: 10px; opacity: 1; } }
@keyframes vbarReady { 0%, 100% { height: 8px; } 50% { height: 16px; } }
@keyframes vbarHear { 0%, 100% { height: 8px; } 50% { height: 26px; } }
@media (prefers-reduced-motion: reduce) { .vbar-wave i { animation: none !important; height: 12px; } }
.todo-preview { margin: 4px 0 10px; padding: 10px 12px; border: 1px dashed var(--p); border-radius: 14px; background: var(--card); }
.todo-preview ul { margin: 6px 0; padding-left: 18px; }
.todo-preview li { margin: 3px 0; }
.todo-item { flex-wrap: wrap; }
.todo-edit { flex: none; }
.todo-edit summary { list-style: none; }
.todo-edit summary::-webkit-details-marker { display: none; }
.todo-edit[open] { flex-basis: 100%; order: 5; }
.todo-edit-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px 36px; }
.todo-edit-form input[name=body] { flex: 1 1 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.todo-edit-when { display: flex; gap: 6px; flex: 1; }
.todo-edit-when input { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); min-width: 0; }
/* 내비서 (2026-10-29) */
.nb-tab-face { width: 18px; height: 18px; vertical-align: -3px; border-radius: 50%; }
.tt-chat { margin: 4px 0 14px; padding: 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 4px 16px rgba(20, 10, 60, .06); }
.tt-log { max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 6px; }
.tt-msg { display: flex; gap: 8px; align-items: flex-start; }
.tt-msg.me { justify-content: flex-end; }
.tt-face { width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--bg); }
.tt-msg > p, .tt-bub { margin: 0; max-width: 82%; padding: 8px 12px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; background: var(--bg); }
.tt-msg.me .tt-bub { background: var(--p); color: #fff; border-bottom-right-radius: 6px; }
.tt-msg.bot .tt-bub, .tt-msg.bot > p { border-top-left-radius: 6px; }
.tt-bub p { margin: 0; }
.tt-link { display: inline-block; margin-top: 6px; margin-right: 8px; font-size: 13px; font-weight: 700; color: var(--p); text-decoration: none; }
.tt-wait .tt-bub { color: var(--muted); }
.tt-chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
.tt-chips .chip { flex: none; }
.tt-form { display: flex; gap: 6px; align-items: center; }
.tt-form input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); }
.tt-mic, .tt-send { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--p); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tt-send { background: var(--p); color: #fff; border-color: var(--p); }
.tt-mic .ico, .tt-send .ico { width: 20px; height: 20px; }
.tt-mic.on { background: var(--err-bg); border-color: var(--err); color: var(--err); animation: pulse 1s ease-in-out infinite; }
/* 위쪽 스위치 [위젯 | 비서 | 묻고 답하기] + 묻고 답하기 안 [AI 물어보기 | 주민 물어보기] (사용자 2026-10-29 '완전 개정') */
.nb-tabs-3[data-at="ttori"] .nb-tab-pill { transform: translateX(100%); }
.nb-tabs-3[data-at="qa"] .nb-tab-pill { opacity: 0; }   /* 묻고 답하기는 탭에서 빠짐 (2026-11-05) — 그 화면에선 알약 없음 */
.nb-tabs-3[data-at="kiosk"] .nb-tab-pill { transform: translateX(200%); }   /* 키오스크 칸으로 옮긴 알약이 위젯 자리로 되돌아가던 것 (2026-11-05) */
.nb-tabs-3 .nb-tab-kiosk .nb-tab-t { white-space: nowrap; }
/* 옆으로 밀어 칸을 바꿀 때 — 내용이 손가락 쪽으로 미끄러지며 흐려진 뒤 다음 화면 (2026-11-05) */
body.nb-leave-left main.wrap, body.nb-leave-right main.wrap { transition: transform .16s ease-in, opacity .16s ease-in; opacity: .35; }
body.nb-leave-left main.wrap { transform: translateX(-32px); }
body.nb-leave-right main.wrap { transform: translateX(32px); }
.nb-tab-face { border-radius: 50%; }
.qa-sub { position: fixed; z-index: 39; top: calc(var(--top-h, 57px) + 60px); left: 50%; transform: translateX(-50%); display: flex; gap: 18px; padding: 0 4px; }
.qa-sub a { position: relative; display: inline-flex; align-items: center; height: 30px; font-size: 13.5px; font-weight: 700; color: var(--muted); text-decoration: none; white-space: nowrap; }
.qa-sub a.on { color: var(--p); }
.qa-sub a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--p); }
.top.has-tabs ~ .qa-sub ~ .wrap, body:has(.qa-sub) .top.has-tabs ~ .wrap { padding-top: 104px; }
body:has(.qa-sub) .top.has-tabs ~ .wrap .chat.app { padding-top: 100px; }
body:has(.thread-side.open) .qa-sub, body:has(.help-side.open) .qa-sub { opacity: 0; visibility: hidden; }
@media (min-width: 1100px) { body:has(.thread-side) .qa-sub { left: calc(270px + (100% - 270px) / 2); } body:has(.thread-side.open) .qa-sub { opacity: 1; visibility: visible; } }
/* 비서 화면 — 대화창이 화면 대부분 */
.tt-page { max-width: 640px; margin: 0 auto; }
.tt-page .tt-chat { margin-top: 6px; }
.tt-page .tt-log { max-height: none; min-height: 34vh; height: calc(100dvh - 380px); }
.tt-today { display: block; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); text-decoration: none; }
.tt-today-h { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14.5px; }
.tt-today-h .ico { width: 17px; height: 17px; color: var(--p); }
.tt-today-h b { color: var(--p); }
.tt-today ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
/* 내비서 화면 (물어보기와 같은 대화창, 2026-10-29) */
.tt-hello-face { display: block; width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; }
.hello .tt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px auto 6px; max-width: 420px; overflow: visible; }
.tt-links { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.nb-tabs-3 .nb-tab-ttori .nb-tab-t { white-space: nowrap; }
@media (max-width: 400px) { .nb-tabs-3 .nb-tab-t { font-size: 13px; gap: 3px; } .nb-tabs-3 .nb-tab-t .ico { display: none; } }
/* 대화창마다 하는 일 한 줄 (2026-10-29) */
.pane-role { display: table; margin: 8px auto 14px; padding: 3px 12px; border-radius: 99px; background: color-mix(in srgb, var(--p) 10%, transparent); color: var(--p); font-size: 12.5px; font-weight: 600; line-height: 1.5; }
/* 궁금해요 — 누구에게 물을까 (2026-10-29) */
.nb-to { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.nb-to label { display: block; cursor: pointer; }
.nb-to input { position: absolute; opacity: 0; pointer-events: none; }
.nb-to span { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); }
.nb-to b { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; }
.nb-to b .ico { width: 16px; height: 16px; color: var(--p); }
.nb-to small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.nb-to input:checked + span { border-color: var(--p); background: color-mix(in srgb, var(--p) 8%, var(--card)); }
.nb-to input:disabled + span { opacity: .5; cursor: not-allowed; }
.nb-to input:focus-visible + span { outline: 2px solid var(--p); outline-offset: 2px; }
/* 묻고 답하기 — 물어보기 단추 (2026-10-29) */
.nb-ask-btn { display: inline-flex; align-items: center; gap: 6px; margin: 4px auto 0; padding: 10px 22px; border-radius: 99px; font-size: 15px; font-weight: 800; }
.nb-ask-btn .ico { width: 18px; height: 18px; }
.nb-ask-fab { position: fixed; z-index: 30; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; border-radius: 99px;
  background: linear-gradient(135deg, #7C3AED 0%, #DB2777 55%, #4F7CF7 100%); color: #fff; font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--p) 70%, transparent); }
.nb-ask-fab .ico { width: 18px; height: 18px; }
body:has(.nb-side.open) .nb-ask-fab { display: none; }
.nb-ask-fab[hidden] { display: none; }
.pl-prem { display: inline-block; padding: 0 6px; margin-right: 2px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7C3AED, #4F7CF7); vertical-align: 1px; }

/* 위쪽 [이벤트] 단추 (2026-10-29) — CI 와 로그인 사이, 오른쪽 묶음 바로 왼쪽 */
.ev-top { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: -.3px; color: #4A2600; background: linear-gradient(135deg, #FDE68A, #F59E0B); border: 0; box-shadow: none; padding: 6px 10px; border-radius: 99px; text-decoration: none; white-space: nowrap; cursor: pointer; flex-shrink: 1; min-width: 0; overflow: hidden; }   /* 이벤트 그림처럼 노랑·주황 + 진한 갈색 (사용자 '보라색 말고') */
.ev-top svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 380px) { .ev-top { font-size: 11.5px; padding: 5px 8px; gap: 3px; } .ev-top svg { display: none; } }
/* 로그인한 화면·왼쪽 메뉴 단추가 있는 화면(위젯 등)은 자리가 좁아 '호암AI / 오픈 이벤트' 두 줄로 작게 */
.ev-top-2, .top:has(.side-toggle) .ev-top { flex-shrink: 0; padding: 3px 9px; border-radius: 12px; line-height: 1.15; }
.ev-top-2 svg, .top:has(.side-toggle) .ev-top svg { display: none; }
.ev-top-2 .ev-t, .top:has(.side-toggle) .ev-top .ev-t { display: flex; flex-direction: column; align-items: center; font-size: 10.5px; }
.ev-top-2 .ev-t > span:first-child, .top:has(.side-toggle) .ev-top .ev-t > span:first-child { font-size: 9.5px; font-weight: 700; opacity: .85; }
@media (max-width: 400px) { .top:has(.ev-top-2) { gap: 4px; } }
@media (max-width: 380px) {   /* 좁은 휴대폰 + 로그인 — CI 로고가 가려지지 않게 오른쪽 묶음을 조금씩 줄임 */
  .top:has(.ev-top-2) .brand { min-width: 34px; }
  .top:has(.ev-top-2) .ev-top-2 { padding: 2px 7px; }
  .top:has(.ev-top-2) .ev-top-2 .ev-t { font-size: 10px; } .top:has(.ev-top-2) .ev-top-2 .ev-t > span:first-child { font-size: 9px; }
  .top:has(.ev-top-2) .top-right { gap: 4px; }
  .top:has(.ev-top-2) .top-up { padding: 6px 9px; font-size: 12px; }
}
@media (max-width: 340px) { .ev-top-2 .ev-t { display: none; } .ev-top-2 svg { display: block; } .ev-top-2 { padding: 6px; border-radius: 99px; } .top:has(.ev-top-2) .top-up { padding: 5px 7px; font-size: 11px; } .top:has(.ev-top-2) { padding-left: 10px; padding-right: 10px; } }   /* 아주 좁은 화면은 선물 아이콘만 (이름은 aria-label) */
.ev-top + * { margin-left: 0 !important; }

/* 가게 캐릭터 그림을 못 불러왔을 때 — 이름 첫 글자 (2026-10-30) */
.sc-av.av-fail { display: inline-flex; align-items: center; justify-content: center; }
.sc-av-txt { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #DB2777, #22D3EE); color: #fff; font-size: 22px; font-weight: 800; }
/* 비서 화면 — 음악·브리핑 장치는 안 보이게(말로 틀기만, 2026-10-30) */
.tt-fab-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }

/* 내 일정 — 달력(월)·주·그날 시간표 (사용자 2026-10-31 '투두 리스트가 아니라 일정 관리') */
.cal { margin: 10px 0 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 10px 10px 8px; }
.cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cal-title { font-size: 16px; }
.cal-nav { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; color: var(--ink); }
.cal-nav:hover { background: var(--bg2, rgba(127,127,127,.12)); }
.cal-views { margin-left: auto; display: flex; gap: 4px; }
.cal-views a { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); font-size: 13px; color: var(--ink); text-decoration: none; }
.cal-views a.on { background: var(--p); border-color: var(--p); color: #fff; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { text-align: center; font-size: 12px; color: var(--muted); padding: 2px 0 4px; }
.cal-wd.sun, .cal-day.sun .cal-n { color: #e5484d; }
.cal-wd.sat, .cal-day.sat .cal-n { color: #3e7bfa; }
.cal-day { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 46px; padding: 5px 0 4px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.cal-day.out { opacity: .38; }
.cal-day:hover { background: var(--bg2, rgba(127,127,127,.1)); }
.cal-n { font-size: 14px; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%; }
.cal-day.today .cal-n { border: 1.5px solid var(--p); font-weight: 700; }
.cal-day.sel .cal-n { background: var(--p); color: #fff !important; font-weight: 700; }
.cal-dots { display: flex; gap: 3px; min-height: 6px; }
.cal-dots .dot { width: 6px; height: 6px; border-radius: 50%; display: block; }
.cal-dots .dot.ev { background: var(--p); }
.cal-dots .dot.tk { background: var(--muted); opacity: .6; }
.cal-week { display: flex; flex-direction: column; gap: 8px; }
.cw-head { display: block; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; margin: 2px 2px 4px; }
.cw-head.sun { color: #e5484d; } .cw-head.sat { color: #3e7bfa; }
.cw-day.today .cw-head small { color: var(--p); }
.cw-empty { margin: 0 4px 4px; }
.day-sec h2 { font-size: 16px; }
.day-sub { font-size: 13px; color: var(--muted); margin: 10px 2px 4px; font-weight: 600; }
.todo-item.is-ev .todo-check { color: var(--p); }
.ev-time { font-size: 13px; font-weight: 700; color: var(--p); }
.todo-item.is-done .todo-text { text-decoration: line-through; opacity: .6; }
.todo-rm { white-space: nowrap; }
.todo-edit-form select, .todo-edit-form input[name="place"] { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.todo-ev-tog { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.todo-how-box { margin: 14px 0 6px; }
.todo-how-box summary { cursor: pointer; }
.todo-page .todo-item { flex-wrap: wrap; }
.todo-page .todo-edit[open] { order: 5; flex: 1 1 100%; min-width: 0; }
.todo-page .todo-edit-form { margin: 6px 0 2px; width: 100%; box-sizing: border-box; }
.todo-page .todo-edit-form > * { max-width: 100%; box-sizing: border-box; }
.todo-page .todo-edit-form input[name="place"], .todo-page .todo-edit-form select { flex: 1 1 100%; min-width: 0; }
.todo-page .todo-edit-when { display: flex; align-items: center; gap: 4px; flex: 1 1 100%; min-width: 0; }
.todo-page .todo-edit-when input { flex: 1 1 0; min-width: 0; font: inherit; font-size: 14px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.todo-page .todo-edit-when input[type="date"] { flex: 1.4 1 0; }
.ev-allday { font-size: 12px; font-weight: 700; color: var(--p); }
.up-day { font-size: 13px; color: var(--muted); margin: 10px 2px 4px; font-weight: 600; }
/* 비서 [대화하기] 단추 (2026-10-31) */
.tt-talk-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; }
.tt-talk-btn .ico { width: 14px; height: 14px; }
.tt-talk-btn.on { background: var(--p); border-color: var(--p); color: #fff; }
/* 지난 일정 (2026-11-01) — 날짜가 지나 저절로 정리된 일정은 흐리게(줄 긋지 않음) */
.todo-item.is-past { opacity: .55; }
.todo-donetag { font-weight: 600; }