/* 별 (byul.co.nz). Night-sky single dark theme.
   Layout: sky search band + three "today" cards on the home page; every other route renders into one content column. */
:root {
  --sky-0: #070a12;
  --sky-1: #0d1220;
  --sky-2: #141b2e;
  --sky-3: #1b2440;
  --line: #222b42;
  --line-soft: #1a2236;
  --ink: #e9edf6;
  --ink-2: #a7b0c8;
  --ink-3: #7d88a4;
  --star: #f3c969;
  --star-ink: #1a1405;
  --star-soft: rgba(243, 201, 105, .13);
  --aurora: #5fd4b8;
  --up: #ff8a7a;
  --down: #7fb0ff;
  --danger: #ff8a7a;
  --kakao: #fee500;
  --kakao-ink: #191600;
  --body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --display: var(--body);
  --brand: "Gowun Batang", "Nanum Myeongjo", serif;
  --mono: var(--body);
  --r: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--sky-0); }
body { margin: 0; background: var(--sky-0); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.6; word-break: keep-all; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--sky-0); }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; border-radius: 6px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
i[data-lucide], svg.lucide { width: 18px; height: 18px; stroke-width: 1.7; flex: none; }

.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 13.5px; border: 1px solid var(--line); background: var(--sky-2); color: var(--ink); }
.btn:hover:not(:disabled) { border-color: var(--ink-3); }
.btn svg.lucide { width: 16px; height: 16px; }
.btn-star { background: var(--star); border-color: var(--star); color: var(--star-ink); }
.btn-star:hover:not(:disabled) { background: #f7d58a; border-color: #f7d58a; }
.btn-kakao { background: var(--kakao); border-color: var(--kakao); color: var(--kakao-ink); }
.btn-kakao:hover:not(:disabled) { background: #fff04d; border-color: #fff04d; }
.btn-kakao svg { width: 18px; height: 18px; }
/* Google's sign-in button style: white surface, the four-colour G, dark label */
.btn-google { background: #fff; border-color: #dadce0; color: #1f1f1f; font-weight: 600; }
.btn-google:hover:not(:disabled) { background: #f2f4f7; border-color: #c9ced6; }
.btn-google svg { width: 18px; height: 18px; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); border-color: transparent; }
.btn-danger { color: var(--danger); border-color: rgba(255, 138, 122, .35); background: transparent; }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #2a0a05; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.link { background: none; border: 0; padding: 0; color: var(--star); font-weight: 600; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(7, 10, 18, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); }
.topbar .wrap { display: flex; align-items: center; gap: 28px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand svg { width: 28px; height: 28px; }
.brand-word { font-family: var(--brand); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -.5px; }
.brand-dom { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .3px; padding-top: 6px; }
.nav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: 8px 12px; border-radius: 8px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: var(--sky-2); }
.top-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.me-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--sky-1); font-size: 13px; color: var(--ink-2); }
.me-chip:hover { color: var(--ink); border-color: var(--ink-3); }
.me-chip svg.lucide { width: 15px; height: 15px; }

/* ---------- sky hero ---------- */
.sky { position: relative; overflow: hidden; isolation: isolate; }
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.sky-photo, .sky-photo img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.sky-photo img { object-fit: cover; object-position: 70% 78%; background: var(--sky-0); }
.sky.has-photo canvas { background: transparent; }
/* keep the headline and search readable over the photo, and melt the bottom edge into the page */
.sky.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 10, 18, .55) 0%, rgba(7, 10, 18, .2) 38%, rgba(7, 10, 18, 0) 60%), linear-gradient(180deg, rgba(7, 10, 18, .25) 0%, rgba(7, 10, 18, 0) 25%, rgba(7, 10, 18, 0) 70%, var(--sky-0) 100%); }
@media (max-width: 760px) { .sky-photo img { object-position: 72% 70%; } .sky.has-photo::before { background: linear-gradient(180deg, rgba(7, 10, 18, .45) 0%, rgba(7, 10, 18, .25) 50%, var(--sky-0) 100%); } }
.sky .wrap { padding-block: 56px 132px; display: grid; gap: 18px; }
.eyebrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--ink-2); font-size: 13px; min-height: 21px; }
.eyebrow .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
.eyebrow b { color: var(--star); font-weight: 600; }
.sky h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.25; letter-spacing: -1px; text-wrap: balance; max-width: 18ch; }
.sky h1 em { font-style: normal; color: var(--star); }
.search { display: flex; align-items: center; gap: 8px; width: min(680px, 100%); height: 60px; padding: 0 8px 0 18px; background: rgba(13, 18, 32, .86); border: 1px solid var(--line); border-radius: 16px; transition: border-color .2s ease, box-shadow .2s ease; }
.search:focus-within { border-color: var(--star); box-shadow: 0 0 0 4px var(--star-soft); }
.search > svg.lucide { color: var(--ink-3); width: 20px; height: 20px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16.5px; outline: none; }
.search input::placeholder { color: var(--ink-3); }
.search .btn-star { height: 44px; padding: 0 20px; border-radius: 11px; font-size: 14.5px; }
.trend { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.trend .lbl { color: var(--ink-3); font-weight: 600; letter-spacing: .4px; font-size: 12px; }
.trend a { color: var(--ink-2); }
.trend a:hover { color: var(--star); }

/* ---------- today cards ---------- */
.today { margin-top: -96px; position: relative; z-index: 2; scroll-margin-top: calc(76px + env(safe-area-inset-top, 0px)); }
.today .wrap { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; }
.card { background: var(--sky-1); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; scroll-margin-top: calc(76px + env(safe-area-inset-top, 0px)); }
/* the three "today" cards share one row height; the source line sits at the bottom of each */
.inst { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.inst > .src:last-child { margin-top: auto; }
.inst-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.label { font-size: 12px; font-weight: 600; letter-spacing: .6px; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; }
.label svg.lucide { width: 14px; height: 14px; }
.src { font-size: 11.5px; color: var(--ink-3); }
.src a { text-decoration: underline; text-underline-offset: 2px; }
.src a:hover { color: var(--ink-2); }
.big { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -1px; }
.big small { font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; margin-left: 4px; }
.chg { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.chg.up { color: var(--up); }
.chg.down { color: var(--down); }
.skeleton { color: var(--ink-3); font-size: 13px; }

.city-select { position: relative; }
.city-select select { appearance: none; -webkit-appearance: none; background: var(--sky-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 26px 4px 10px; font-size: 12.5px; font-weight: 600; }
.city-select::after { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.wx-main { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.wx-ic { width: 46px; height: 46px; color: var(--star); }
.wx-ic svg.lucide { width: 46px; height: 46px; stroke-width: 1.3; }
.wx-desc { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.hourly { width: 100%; height: 74px; display: block; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-soft); padding-top: 12px; }
.facts div { display: grid; gap: 2px; padding-right: 8px; min-width: 0; }
.facts div + div { border-left: 1px solid var(--line-soft); padding-left: 12px; }
.facts span { font-size: 11.5px; color: var(--ink-3); }
.facts b { font-size: 13.5px; font-weight: 600; }
.facts .good { color: var(--aurora); }

.fx-sub { display: grid; }
.fx-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-2); }
.fx-row b { color: var(--ink); font-weight: 500; font-size: 13.5px; }
.calc { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: var(--sky-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.calc label { display: grid; min-width: 0; }
.calc label span { font-size: 11px; color: var(--ink-3); }
.calc input { width: 100%; min-width: 0; border: 0; background: transparent; font: 600 16px var(--mono); outline: none; padding: 0; }
.calc output { font: 600 16px var(--mono); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc .arrow { color: var(--ink-3); display: grid; }
.calc .arrow svg.lucide { width: 16px; height: 16px; }

.wx-days { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.wx-days li { display: grid; justify-items: center; gap: 3px; font-size: 12px; color: var(--ink-3); }
.wx-days svg.lucide { width: 18px; height: 18px; color: var(--ink-2); }
.wx-days .hl { font-size: 11.5px; color: var(--ink-3); display: flex; gap: 4px; }
.wx-days .hl b { color: var(--ink); font-weight: 600; }
.wx-days .rp { font-size: 10.5px; color: var(--ink-3); }
.wx-days .rp.wet { color: var(--down); }
.fx-trend { border-top: 1px solid var(--line-soft); padding-top: 10px; display: grid; gap: 6px; }
.fx-trend-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--ink-3); }
.fx-trend-head b { font-size: 12px; font-weight: 600; }
.fx-trend-head .up { color: var(--up); }
.fx-trend-head .down { color: var(--down); }
#fx-spark { width: 100%; height: 64px; display: block; }
.fx-range { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }
.kr-clock { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--ink-3); }
.kr-clock b { color: var(--ink); font-weight: 600; font-size: 13px; }
.kr-clock svg.lucide { width: 13px; height: 13px; }
/* the page is color-scheme: dark; a mismatched scheme makes Chrome paint an opaque white backdrop behind the transparent widget iframe */
.tv-box { flex: 1; min-height: 320px; margin: 0 -8px; border-radius: 10px; overflow: hidden; color-scheme: normal; }
.tv-box .tradingview-widget-container, .tv-box .tradingview-widget-container__widget { height: 100%; }

/* ---------- service dock ---------- */
.dock .wrap { padding-block: 22px 6px; }
.dock-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.dk { border: 1px solid transparent; border-radius: 12px; padding: 10px 4px; display: grid; justify-items: center; gap: 7px; color: var(--ink-2); font-size: 12.5px; text-align: center; transition: background .15s ease, border-color .15s ease; }
.dk .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--sky-2); border: 1px solid var(--line); color: var(--ink); }
.dk:hover { background: var(--sky-1); border-color: var(--line-soft); color: var(--ink); }
.dk:hover .ic { color: var(--star); border-color: rgba(243, 201, 105, .35); }
.dk .ic svg.lucide { width: 20px; height: 20px; }

/* ---------- home body ---------- */
.body .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; padding-block: 18px 56px; align-items: start; }
.col { display: grid; gap: 20px; min-width: 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 20px 22px 0; flex-wrap: wrap; }
.sec-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.5px; display: flex; gap: 10px; align-items: center; }
.sec-title.sm { font-size: 18px; }
.spark-glyph { width: 14px; height: 14px; color: var(--star); flex: none; }
.sec-desc { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }
.more { color: var(--ink-2); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; padding: 5px 10px 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--sky-1); white-space: nowrap; transition: color .15s ease, border-color .15s ease; }
.more:hover { color: var(--star); border-color: rgba(243, 201, 105, .55); }
.more:hover { color: var(--star); }
.more svg.lucide { width: 14px; height: 14px; }

.tabs { display: flex; gap: 4px; padding: 14px 22px 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { background: none; border: 1px solid transparent; padding: 6px 12px; border-radius: 999px; color: var(--ink-3); font-size: 13px; font-weight: 500; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab:is([aria-selected="true"], [aria-current="true"], [aria-current="page"], [aria-pressed="true"]) { color: var(--ink); background: var(--sky-2); border-color: var(--line); }

/* post list */
.posts { list-style: none; margin: 12px 0 0; padding: 0 22px 8px; }
.post { border-top: 1px solid var(--line-soft); }
.post > a { padding: 16px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; }
.post > a:hover .post-t { color: var(--star); }
.post-top { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.ch { color: var(--aurora); font-weight: 600; }
.post-t { font-size: 15.5px; font-weight: 600; line-height: 1.45; transition: color .15s ease; overflow-wrap: anywhere; }
.post-x { grid-column: 1; color: var(--ink-2); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.post-side { grid-column: 2; grid-row: 2 / span 2; display: grid; justify-items: end; align-content: start; gap: 2px; min-width: 52px; }
.post-side .n { font-family: var(--mono); font-size: 17px; font-weight: 600; }
.post-side .u { font-size: 11px; color: var(--ink-3); }
.post-side .price { font-family: var(--mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.post-meta { grid-column: 1; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.who { display: inline-flex; gap: 5px; align-items: center; color: var(--ink-2); font-weight: 500; }
.mask { font-family: var(--mono); letter-spacing: 1.5px; color: var(--ink-2); }
.who .rg { color: var(--ink-2); }
.who .rg::before { content: "·"; color: var(--ink-3); margin-right: 5px; }
.stats { display: inline-flex; gap: 12px; }
.stats span { display: inline-flex; gap: 4px; align-items: center; }
.stats svg.lucide { width: 13px; height: 13px; }
.tag { font-size: 11px; font-weight: 600; color: var(--aurora); }
.empty { padding: 28px 0; text-align: center; color: var(--ink-3); border-top: 1px solid var(--line-soft); list-style: none; display: grid; gap: 10px; justify-items: center; }
.load-more { display: flex; justify-content: center; padding: 6px 22px 20px; }

/* news */
.news { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-top: 14px; border-top: 1px solid var(--line-soft); }
.lead { padding: 20px 22px 22px; border-right: 1px solid var(--line-soft); display: grid; gap: 10px; align-content: start; }
.lead h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.4; letter-spacing: -.3px; text-wrap: balance; overflow-wrap: anywhere; }
.meta { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.meta b { color: var(--ink-2); font-weight: 600; }
.cat { font-size: 11px; font-weight: 600; letter-spacing: .3px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.nlist { list-style: none; margin: 0; padding: 8px 22px 14px; }
.nlist li + li { border-top: 1px solid var(--line-soft); }
.nlist a { display: grid; gap: 3px; padding: 11px 0; }
.nlist a:hover .t { color: var(--star); }
.nlist .t { font-weight: 500; line-height: 1.5; transition: color .15s ease; overflow-wrap: anywhere; }
.ext { display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; color: var(--star); font-weight: 600; }
.ext svg.lucide { width: 14px; height: 14px; }
.news-note { padding: 0 22px 16px; margin: 0; font-size: 11.5px; color: var(--ink-3); }
.news-topic { margin: 12px 22px 0; font-size: 12.5px; color: var(--ink-2); }
.src-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 22px 0; }
.src-chips:empty { display: none; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3); }
.chip:hover { color: var(--ink); }
.chip.on { color: var(--star-ink); background: var(--star); border-color: var(--star); font-weight: 600; }

/* rail */
.verify { padding: 22px; display: grid; gap: 14px; position: relative; overflow: hidden; }
.verify::before { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(243, 201, 105, .16), transparent 70%); pointer-events: none; }
.verify h3 { margin: 0; font-family: var(--display); font-size: 20px; line-height: 1.35; letter-spacing: -.3px; }
.verify p { margin: 0; color: var(--ink-2); font-size: 13px; }
.sample-who { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--sky-2); border: 1px dashed var(--line); font-size: 13px; }
.sample-who small { color: var(--ink-3); margin-left: auto; font-size: 11.5px; }
.verify .btn { padding: 12px; font-size: 14.5px; }
.verify-links { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.verify-links button, .verify-links a { background: none; border: 0; padding: 0; color: var(--ink-3); }
.verify-links button:hover, .verify-links a:hover { color: var(--ink); }
.status-line { font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 138, 122, .1); color: var(--danger); }

.rank { list-style: none; margin: 0; padding: 10px 22px 16px; counter-reset: r; }
.rank li { counter-increment: r; }
.rank a { padding: 8px 0; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13.5px; }
.rank a::before { content: counter(r); font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.rank li:nth-child(-n+3) a::before { color: var(--star); }
.rank .rt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank a:hover .rt { color: var(--star); }
.rank .rc { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.rank .empty { padding: 12px 0; border: 0; }

.blist { list-style: none; margin: 0; padding: 8px 22px 14px; }
.blist li + li { border-top: 1px solid var(--line-soft); }
.blist a { padding: 10px 0; display: grid; gap: 2px; }
.blist a:hover .bt { color: var(--star); }
.blist .bt { font-weight: 500; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.blist .bm { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-3); }
.blist .bm b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.blist .tag { margin-right: 6px; }
.blist .empty { padding: 14px 0; border: 0; }

.notice { padding: 8px 22px 18px; display: grid; }
.notice a { display: grid; gap: 1px; padding: 9px 0; font-size: 13px; }
.notice a + a { border-top: 1px solid var(--line-soft); }
.notice a span { font-size: 11.5px; color: var(--ink-3); }
.notice a:hover { color: var(--star); }
.notice .empty { padding: 10px 0; border: 0; justify-items: start; text-align: left; }

/* ---------- inner pages ---------- */
.page .wrap { padding-block: 28px 64px; }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.crumbs { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--star); }
.crumbs svg.lucide { width: 13px; height: 13px; }
.page-title { margin: 0; font-family: var(--display); font-size: 28px; letter-spacing: -.6px; display: flex; gap: 10px; align-items: center; }
.page-desc { margin: 6px 0 0; color: var(--ink-2); font-size: 13.5px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 22px 22px 0; }

.article { padding: 24px 26px 26px; display: grid; gap: 16px; }
.article h1 { margin: 0; font-family: var(--display); font-size: 26px; line-height: 1.4; letter-spacing: -.5px; text-wrap: balance; overflow-wrap: anywhere; }
.article .body-text { margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.facts-row { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); padding: 12px 14px; border-radius: 10px; background: var(--sky-2); }
.facts-row b { color: var(--ink); font-weight: 600; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.actions .spacer { flex: 1; }
.liked { color: var(--star); border-color: rgba(243, 201, 105, .45); }
.cmts { list-style: none; margin: 0; padding: 0 26px 6px; }
.cmts li { padding: 14px 0; border-top: 1px solid var(--line-soft); display: grid; gap: 4px; font-size: 14px; }
.cmts .c-top { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.cmts .c-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.cmts .c-act { display: flex; gap: 12px; font-size: 12px; }
.cmts .c-act button { background: none; border: 0; padding: 0; color: var(--ink-3); }
.cmts .c-act button:hover { color: var(--ink); }
.op { font-size: 10.5px; font-weight: 600; padding: 0 6px; border-radius: 999px; background: var(--star-soft); color: var(--star); }
.reply { display: flex; gap: 8px; padding: 6px 26px 24px; }
.reply textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 200px; resize: vertical; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--sky-2); outline: none; }
.reply textarea:focus { border-color: var(--star); }
.notice-bar { margin: 0 26px 18px; padding: 10px 14px; border-radius: 10px; background: var(--sky-2); color: var(--ink-2); font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* forms */
.form { padding: 22px; display: grid; gap: 16px; }
.field { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.field small { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--sky-2); padding: 10px 12px; font-size: 14.5px; font-weight: 400; color: var(--ink); outline: none; }
.field textarea { min-height: 220px; resize: vertical; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--star); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-foot p { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.err { color: var(--danger); font-size: 13px; min-height: 0; }
.ok { color: var(--aurora); font-size: 13px; }
.side-note { padding: 20px 22px; display: grid; gap: 10px; font-size: 13px; color: var(--ink-2); }
.side-note h3 { margin: 0; font-size: 15px; color: var(--ink); }
.side-note ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

/* admin */
.admin-item { border-top: 1px solid var(--line-soft); padding: 16px 22px; display: grid; gap: 8px; }
.admin-item .ai-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--ink-3); }
.admin-item .ai-title { font-weight: 600; overflow-wrap: anywhere; }
.admin-item .ai-x { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.admin-item .ai-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-item .ai-act input { flex: 1; min-width: 160px; border-radius: 8px; border: 1px solid var(--line); background: var(--sky-2); padding: 6px 10px; font-size: 13px; }
.author-box { font-size: 12.5px; padding: 8px 12px; border-radius: 8px; background: var(--sky-2); color: var(--ink-2); }
.pill { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(255, 138, 122, .14); color: var(--danger); }
.word-list { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 22px 20px; }
.word { display: inline-flex; gap: 6px; align-items: center; padding: 3px 6px 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; }
.word button { background: none; border: 0; padding: 0; color: var(--ink-3); display: grid; }
.word button:hover { color: var(--danger); }
.word button svg.lucide { width: 13px; height: 13px; }
.inline-form { display: flex; gap: 8px; padding: 14px 22px 4px; }
.inline-form input { flex: 1; min-width: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--sky-2); padding: 8px 12px; outline: none; }

footer { border-top: 1px solid var(--line-soft); }
footer .wrap { padding-block: 36px 32px; display: grid; gap: 12px; font-size: 13px; color: var(--ink-3); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.foot-brand { display: grid; gap: 10px; align-content: start; }
.foot-brand p { margin: 0; max-width: 36ch; line-height: 1.7; }
.foot-col { display: grid; gap: 8px; align-content: start; }
.foot-col h2 { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.foot-col a { color: var(--ink-3); width: fit-content; }
.foot-col a:hover, .foot-src a:hover { color: var(--star); }
.foot-col b { font-weight: 600; color: var(--ink-2); }
.foot-bottom { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 11.5px; padding-right: 56px; }
.foot-src a { color: var(--ink-2); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; } .foot-brand { grid-column: 1 / -1; } }

/* dialogs */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(3, 5, 10, .72); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.dialog { width: min(480px, 100%); max-height: 100%; overflow: auto; background: var(--sky-1); border: 1px solid var(--line); border-radius: 18px; }
.dialog.wide { width: min(620px, 100%); }
.dlg-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--sky-1); border-bottom: 1px solid var(--line-soft); z-index: 1; }
.dlg-head h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.x { background: none; border: 0; padding: 4px; color: var(--ink-3); display: grid; }
.x:hover { color: var(--ink); }
.dlg-body { padding: 20px 22px 24px; display: grid; gap: 14px; }
.dlg-body h3 { margin: 0; font-family: var(--display); font-size: 21px; line-height: 1.4; letter-spacing: -.4px; text-wrap: balance; }
.dlg-body p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.login-opts { display: grid; gap: 8px; }
.login-opts .btn { padding: 12px; font-size: 14.5px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 10px; background: var(--sky-2); }
.seg button { border: 0; background: none; border-radius: 8px; padding: 7px; font-weight: 600; font-size: 13px; color: var(--ink-3); }
.seg button:is([aria-selected="true"], [aria-current="true"], [aria-current="page"], [aria-pressed="true"]) { background: var(--sky-3); color: var(--ink); }
.rules-mini { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.rules-mini li { display: flex; gap: 8px; align-items: baseline; }
.rules-mini li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--star); flex: none; transform: translateY(-2px); }
.preview { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--star-soft); border: 1px dashed rgba(243, 201, 105, .45); }
.preview small { font-size: 11.5px; color: var(--ink-3); }
.ladder { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ladder th { text-align: left; white-space: nowrap; padding: 11px 16px 11px 0; vertical-align: top; color: var(--star); font-weight: 600; width: 1%; }
.ladder td { padding: 11px 0; }
.ladder tr + tr th, .ladder tr + tr td { border-top: 1px solid var(--line-soft); }
.ladder tr.auto th { color: var(--aurora); }
.ladder tr.ban th { color: var(--up); }
.r-h { margin: 8px 0 0; font-family: var(--display); font-size: 19px; letter-spacing: -.3px; }
.r-list { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 14.5px; line-height: 1.75; }
.r-list b { color: var(--ink); }
.radio-list { display: grid; gap: 6px; }
.radio-list label { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.radio-list label:has(input:checked) { border-color: var(--star); background: var(--star-soft); }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--sky-0); padding: 10px 16px; border-radius: 10px; font-size: 13px; max-width: calc(100% - 32px); }

/* ---------- alerts badge ---------- */
.badged { position: relative; }
.bell { padding: 8px; }
.badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--star); color: var(--star-ink); font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 17px; text-align: center; }
.badged:not(.bell) .badge { top: -6px; right: -8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.alerts { list-style: none; margin: 12px 0 0; padding: 0 22px 12px; }
.alerts li { border-top: 1px solid var(--line-soft); }
.alerts a { display: grid; gap: 3px; padding: 14px 0; }
.alerts a:hover .al-t { color: var(--star); }
.al-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.al-top span:not(.dot-new) { color: var(--ink-3); }
.al-top b { color: var(--star); font-weight: 600; }
.dot-new { width: 7px; height: 7px; border-radius: 50%; background: transparent; flex: none; }
.unread .dot-new { background: var(--star); }
.al-t { font-weight: 600; overflow-wrap: anywhere; }
.al-x { color: var(--ink-3); font-size: 13px; overflow-wrap: anywhere; }
.alerts li:not(.unread) .al-t { color: var(--ink-2); font-weight: 500; }

/* notes on posts and forms */
.note-box { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(95, 212, 184, .28); background: rgba(95, 212, 184, .07); color: var(--ink-2); font-size: 13px; }
.note-box svg.lucide { width: 16px; height: 16px; color: var(--aurora); margin-top: 2px; }
.note-box.in-card { margin: 14px 22px 0; }
.form-btns { display: flex; gap: 8px; }

/* home: next holiday */
.next-holiday { margin: 12px 22px 0; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--star-soft); font-size: 13px; color: var(--ink-2); }
.next-holiday b { color: var(--ink); font-weight: 600; }
.next-holiday svg.lucide { width: 16px; height: 16px; color: var(--star); }
.next-holiday .nh-d { margin-left: auto; font-size: 11.5px; color: var(--star); white-space: nowrap; }
.next-holiday:hover { color: var(--ink); }

/* 업소록 */
.biz-list { list-style: none; margin: 12px 0 0; padding: 0 22px 10px; display: grid; }
.biz { border-top: 1px solid var(--line-soft); padding: 16px 0; display: grid; gap: 6px; }
.biz h3 { margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.biz p { margin: 0; color: var(--ink-2); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.biz-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.feat { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 600; color: var(--star); padding: 1px 8px; border-radius: 999px; background: var(--star-soft); }
.feat .spark-glyph { width: 10px; height: 10px; }
.biz-facts { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.biz-facts > * { display: inline-flex; gap: 5px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.biz-facts a:hover { color: var(--star); }
.biz-facts svg.lucide { width: 14px; height: 14px; color: var(--ink-3); }
.verified { display: inline-flex; gap: 3px; align-items: center; font-size: 11px; font-weight: 600; color: var(--aurora); }
.verified svg.lucide { width: 13px; height: 13px; }
.unverified { font-size: 11px; color: var(--ink-3); border: 1px dashed var(--line); padding: 0 7px; border-radius: 999px; cursor: help; }
.biz-req { background: none; border: 0; padding: 0; margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.biz-req:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.region-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 22px 0; }
.region { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--sky-1); font-size: 13px; color: var(--ink-2); }
.region svg.lucide { width: 14px; height: 14px; color: var(--ink-3); }
.region .rc { font-size: 11px; color: var(--ink-3); }
.region:hover { color: var(--ink); border-color: var(--ink-3); }
.region:is([aria-selected="true"], [aria-current="true"], [aria-current="page"], [aria-pressed="true"]) { background: var(--star-soft); border-color: rgba(243, 201, 105, .55); color: var(--ink); font-weight: 600; }
.region:is([aria-selected="true"], [aria-current="true"], [aria-current="page"], [aria-pressed="true"]) svg.lucide, .region:is([aria-selected="true"], [aria-current="true"], [aria-current="page"], [aria-pressed="true"]) .rc { color: var(--star); }
.region.none { opacity: .45; }
.biz-count { margin: 10px 22px 0; font-size: 12px; color: var(--ink-3); }
.sub-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.st-pending { color: var(--star) !important; }
.st-approved { color: var(--aurora) !important; }
.st-rejected { color: var(--danger) !important; }
.tabs.sub { padding-top: 12px; }

/* 생활정보 */
.page-head.bare { padding: 0 0 4px; }
.tabs.bare { padding: 12px 0 16px; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.info-grid > #holidays { grid-column: 1 / -1; }
.info-grid .card { scroll-margin-top: 80px; }
.hd-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; margin-top: 14px; border-top: 1px solid var(--line-soft); }
.hd-cols > div { padding: 14px 22px 8px; min-width: 0; }
.hd-cols > div + div { border-left: 1px solid var(--line-soft); }
.hd-h { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); letter-spacing: .3px; }
.hd { list-style: none; margin: 0; padding: 0; }
.hd li { display: grid; grid-template-columns: minmax(104px, auto) minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; font-size: 13.5px; }
.hd li + li { border-top: 1px solid var(--line-soft); }
.hd-d { color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
.hd-n { font-weight: 500; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hd-tag { font-size: 10.5px; font-weight: 600; color: var(--aurora); padding: 0 6px; border-radius: 999px; border: 1px solid rgba(95, 212, 184, .35); }
.hd-u { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.hd li:first-child .hd-u { color: var(--star); }
.links { list-style: none; margin: 10px 0 0; padding: 0 22px 14px; }
.links li + li { border-top: 1px solid var(--line-soft); }
.links a { display: grid; gap: 2px; padding: 11px 0; }
.lt { display: inline-flex; gap: 4px; align-items: center; font-weight: 600; }
.lt svg.lucide { width: 14px; height: 14px; color: var(--ink-3); }
.links a:hover .lt { color: var(--star); }
.ld { font-size: 12.5px; color: var(--ink-3); }
.info-cta { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 22px 20px; }
.dial { list-style: none; margin: 14px 0 0; padding: 0 22px; display: grid; gap: 8px; }
.dial a { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; background: var(--sky-2); border: 1px solid var(--line); }
.dial a:hover { border-color: var(--ink-3); }
.dial b { font-size: 17px; color: var(--star); }
.dial span { font-size: 12.5px; color: var(--ink-2); }

/* 생활 가이드 */
.info-grid > #guides { grid-column: 1 / -1; }
.g-grid { list-style: none; margin: 14px 0 0; padding: 0 22px 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.g-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 4px; }
.g-card { display: grid; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--sky-2); height: 100%; transition: border-color .15s ease; }
.g-card:hover { border-color: color-mix(in srgb, var(--star) 50%, var(--line)); }
.g-card:hover .g-t { color: var(--star); }
.g-cover { position: relative; aspect-ratio: 16 / 8; background: linear-gradient(180deg, #04060d, #111a33); overflow: hidden; }
.g-cover.big { aspect-ratio: 16 / 5; border-radius: var(--r) var(--r) 0 0; }
.g-cover svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-ic { position: absolute; left: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--hue) 18%, #0d1220); border: 1px solid color-mix(in srgb, var(--hue) 45%, transparent); color: var(--hue); }
.g-ic svg.lucide { width: 22px; height: 22px; }
.g-cover.big .g-ic { width: 56px; height: 56px; left: 26px; bottom: 22px; }
.g-cover.big .g-ic svg.lucide { width: 28px; height: 28px; }
.g-cat { position: absolute; right: 12px; top: 10px; font-size: 11px; font-weight: 600; color: var(--hue); background: rgba(7, 10, 18, .6); padding: 1px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hue) 35%, transparent); }
.g-body { padding: 12px 14px 14px; display: grid; gap: 4px; align-content: start; }
.g-t { font-weight: 600; font-size: 14.5px; line-height: 1.45; transition: color .15s ease; overflow-wrap: anywhere; }
.g-s { font-size: 12.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-m { font-size: 11.5px; color: var(--ink-3); margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.guide { padding: 0; }
.g-head { padding: 22px 28px 0; display: grid; gap: 6px; }
.g-head h1 { margin: 0; font-family: var(--display); font-size: 28px; line-height: 1.35; letter-spacing: -.5px; text-wrap: balance; }
.g-text { padding: 8px 28px 4px; font-size: 15px; line-height: 1.85; }
.g-text h2 { font-family: var(--display); font-size: 21px; letter-spacing: -.3px; margin: 30px 0 8px; scroll-margin-top: 80px; }
.g-text p { margin: 0 0 12px; overflow-wrap: anywhere; }
.g-text ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 4px; }
.g-text b { color: var(--ink); font-weight: 600; }
.g-text .note-box { margin: 6px 0 16px; font-size: 14px; line-height: 1.7; }
.note-box.warn { border-color: rgba(255, 138, 122, .3); background: rgba(255, 138, 122, .07); }
.note-box.warn svg.lucide { color: var(--danger); }
.g-steps { list-style: none; counter-reset: st; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.g-steps li { counter-increment: st; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.g-steps li::before { content: counter(st); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--star-soft); color: var(--star); font-family: var(--mono); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.g-table { overflow-x: auto; margin: 4px 0 16px; border: 1px solid var(--line); border-radius: 10px; }
.g-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.6; }
.g-table th { text-align: left; background: var(--sky-2); color: var(--ink-2); font-weight: 600; padding: 9px 12px; white-space: nowrap; }
.g-table td { padding: 9px 12px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.g-src { margin: 16px 28px 28px; padding: 16px 18px; border-radius: 12px; background: var(--sky-2); font-size: 13px; color: var(--ink-2); }
.g-src h2 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.g-src ul { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 3px; }
.g-src a { display: inline-flex; gap: 3px; align-items: center; }
.g-src a:hover { color: var(--star); }
.g-src a svg.lucide { width: 13px; height: 13px; }
.g-src p { margin: 0; font-size: 12px; color: var(--ink-3); }
.toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.toc a:hover, .g-rel a:hover { color: var(--star); }
.g-rel { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.home-guides { display: grid; padding: 8px 22px 0; }
.home-guides a { display: flex; gap: 10px; align-items: center; padding: 8px 0; font-size: 13px; }
.home-guides a + a { border-top: 1px solid var(--line-soft); }
.home-guides a:hover { color: var(--star); }
.home-guides small { display: block; font-size: 11px; color: var(--ink-3); }
.hg-ic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--hue); background: color-mix(in srgb, var(--hue) 14%, transparent); }
.hg-ic svg.lucide { width: 16px; height: 16px; }

/* site banner */
.site-banner { background: linear-gradient(90deg, rgba(243, 201, 105, .16), rgba(95, 212, 184, .10)); border-bottom: 1px solid var(--line-soft); }
.site-banner .wrap { display: flex; gap: 10px; align-items: center; min-height: 40px; font-size: 13.5px; }
.site-banner svg.lucide { width: 16px; height: 16px; color: var(--star); }
.site-banner a, .site-banner span { flex: 1; min-width: 0; }
.site-banner a:hover { color: var(--star); }
.pin { display: inline-flex; gap: 3px; align-items: center; color: var(--star); font-weight: 600; }
.pin svg.lucide { width: 12px; height: 12px; }

/* admin */
.adm-nav { display: flex; gap: 4px; padding: 14px 22px 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line-soft); }
.adm-nav::-webkit-scrollbar { display: none; }
.adm-tab { display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.adm-tab svg.lucide { width: 15px; height: 15px; }
.adm-tab:hover { color: var(--ink); }
.adm-tab:is([aria-selected="true"], [aria-current="true"], [aria-current="page"], [aria-pressed="true"]) { color: var(--ink); border-bottom-color: var(--star); }
.page-title svg.lucide { width: 24px; height: 24px; color: var(--star); }
.badge-inline { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--star); color: var(--star-ink); font: 600 10.5px var(--mono); }
.adm-pad { padding: 18px 22px 24px; display: grid; gap: 14px; }
.todo { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--star-soft); border: 1px solid rgba(243, 201, 105, .35); font-size: 13.5px; }
.todo b { display: inline-flex; gap: 6px; align-items: center; }
.todo b svg.lucide { width: 16px; height: 16px; color: var(--star); }
.todo a { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); }
.todo a:hover { color: var(--ink); }
.todo.ok { background: rgba(95, 212, 184, .08); border-color: rgba(95, 212, 184, .3); }
.todo.ok svg.lucide { color: var(--aurora); }
.adm-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.stat { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--sky-2); border: 1px solid var(--line); }
a.stat[href]:hover { border-color: var(--ink-3); }
.stat span { font-size: 12px; color: var(--ink-3); }
.stat b { font-size: 22px; font-weight: 600; }
.stat small { font-size: 11px; color: var(--aurora); }
.adm-h { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.chart-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--ink-3); }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.adm-chart { width: 100%; height: auto; max-height: 180px; display: block; background: var(--sky-2); border-radius: 12px; padding: 8px 6px 0; }
.board-bars { display: grid; gap: 6px; }
.board-bars div { display: grid; grid-template-columns: 100px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.board-bars i { height: 8px; border-radius: 4px; background: var(--star); min-width: 2px; opacity: .8; }
.board-bars b { text-align: right; font-weight: 500; }
.tbl-wrap { overflow-x: auto; padding: 4px 22px 20px; }
.adm-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-tbl th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-tbl td { padding: 10px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.adm-tbl td small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.adm-tbl td.acts { white-space: nowrap; text-align: right; }
.adm-tbl td.acts .btn + .btn { margin-left: 4px; }
.adm-tbl tr:hover td { background: rgba(255, 255, 255, .015); }
.link-plain:hover { color: var(--star); }
.ok-dot { font-size: 12px; color: var(--aurora); }
.pill.soft { background: rgba(243, 201, 105, .12); color: var(--star); }
.muted { color: var(--ink-3); font-size: 13px; margin: 0; }
small.muted { font-family: var(--body); font-size: 13px; font-weight: 400; }
.hist { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); max-height: 160px; overflow: auto; }
.hist small { color: var(--ink-3); }
.mm-row { display: flex; gap: 8px; align-items: flex-end; }
.mm-row .field { flex: 1; }
.dlg-actions.multi { flex-wrap: wrap; justify-content: flex-start; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.inline-form select { border-radius: 10px; border: 1px solid var(--line); background: var(--sky-2); padding: 8px 10px; outline: none; }

/* 여행 */
.travel-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.tr-search { padding: 0; min-width: min(380px, 100%); }
.tr-islands { display: flex; gap: 6px; padding: 18px 22px 0; }
.tr-island { padding: 6px 16px; border-radius: 999px; font-weight: 600; font-size: 13.5px; color: var(--ink-3); border: 1px solid var(--line); }
.tr-island:is([aria-selected="true"], [aria-current="true"], [aria-current="page"], [aria-pressed="true"]) { color: var(--star-ink); background: var(--star); border-color: var(--star); }
.tr-island:hover:not(:is([aria-selected="true"], [aria-current="true"], [aria-current="page"], [aria-pressed="true"])) { color: var(--ink); }
.tr-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tr-bar .tabs { flex: 1; min-width: 0; }
.tr-bar .tab { display: inline-flex; gap: 5px; align-items: center; }
.tr-bar .tab svg.lucide { width: 14px; height: 14px; }
.tr-sort { padding: 14px 22px 0; font-size: 12.5px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
.tr-sort select { border-radius: 8px; border: 1px solid var(--line); background: var(--sky-2); padding: 5px 8px; font-size: 13px; }
.tr-top { list-style: none; margin: 10px 0 4px; padding: 0 22px 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 10px; overflow-x: auto; scrollbar-width: thin; }
.tr-top a { display: grid; gap: 4px; position: relative; }
.tt-img { width: 150px; height: 100px; object-fit: cover; border-radius: 10px; display: block; background: var(--sky-2); }
.tt-rank { position: absolute; left: 8px; top: 8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 8px; background: rgba(7, 10, 18, .78); color: var(--star); font-size: 12.5px; font-weight: 700; display: grid; place-items: center; }
.tt-name { font-size: 13px; font-weight: 600; line-height: 1.35; }
.tt-rg { font-size: 11px; color: var(--ink-3); }
.tr-top a:hover .tt-name { color: var(--star); }
.pl-grid { list-style: none; margin: 12px 0 0; padding: 0 22px 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pl-grid > .empty { grid-column: 1 / -1; }
.pl-card { position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--sky-1); transition: border-color .15s ease, transform .15s ease; }
.pl-card:hover { border-color: rgba(243, 201, 105, .45); }
.pl-card > a { display: grid; height: 100%; }
.pl-photo { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--sky-2); overflow: hidden; }
.pl-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.pl-card:hover .pl-img { transform: scale(1.03); }
.noimg { display: grid !important; place-items: center; color: var(--hue, var(--star)); background: radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--hue, #f3c969) 22%, transparent), transparent 60%), linear-gradient(180deg, #04060d, #111a33); }
.noimg svg.lucide { width: 34px; height: 34px; opacity: .85; }
.pl-rank { position: absolute; left: 10px; top: 10px; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 9px; background: rgba(7, 10, 18, .8); color: var(--star); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.pl-feat { position: absolute; left: 10px; bottom: 10px; display: inline-flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 600; color: var(--star-ink); background: var(--star); padding: 2px 8px; border-radius: 999px; }
.pl-feat .spark-glyph { width: 10px; height: 10px; color: var(--star-ink); }
.pl-body { padding: 12px 14px 16px; display: grid; gap: 4px; align-content: start; }
.pl-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); }
.pl-type { display: inline-flex; gap: 4px; align-items: center; color: var(--hue); font-weight: 600; }
.pl-type svg.lucide { width: 13px; height: 13px; }
.pl-name { font-size: 16px; font-weight: 700; line-height: 1.35; padding-right: 40px; }
.pl-card:hover .pl-name { color: var(--star); }
.pl-en { font-size: 12px; color: var(--ink-3); margin-top: -2px; }
.pl-sum { font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tchips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.tc { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.tc.gw { color: var(--star); border-color: rgba(243, 201, 105, .45); }
.d-쉬움 { color: var(--aurora) !important; }
.d-보통 { color: var(--star) !important; }
.d-어려움 { color: var(--up) !important; }
.d-전문가 { color: #ff6b6b !important; }
.pl-save { position: absolute; right: 10px; top: 10px; display: inline-flex; gap: 4px; align-items: center; background: rgba(7, 10, 18, .72); border: 1px solid rgba(233, 237, 246, .18); border-radius: 999px; padding: 4px 9px; color: var(--ink); font-size: 12px; }
.pl-save:hover { border-color: rgba(255, 123, 147, .6); }
.pl-save svg.lucide, .pl-save-btn svg.lucide { width: 14px; height: 14px; }
.pl-save.on, .pl-save-btn.on { color: #ff7b93; border-color: rgba(255, 123, 147, .5); }
.pl-save.on svg.lucide, .pl-save-btn.on svg.lucide { fill: currentColor; }
.place { padding: 0; overflow: hidden; }
.pd-photo { margin: 0; position: relative; background: var(--sky-2); }
.pd-img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; }
.pd-photo figcaption { position: absolute; right: 10px; bottom: 8px; font-size: 10.5px; color: rgba(233, 237, 246, .85); background: rgba(7, 10, 18, .6); padding: 2px 8px; border-radius: 6px; max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-photo figcaption a { text-decoration: underline; text-underline-offset: 2px; }
.pd-head { padding: 20px 28px 4px; display: grid; gap: 6px; }
.pd-head h1 { margin: 0; font-family: var(--display); font-size: 30px; letter-spacing: -.6px; line-height: 1.3; }
.pd-en { margin: -4px 0 0; color: var(--ink-3); font-size: 13.5px; }
.pd-sum { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.pd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pd-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0; margin: 14px 28px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pd-track div { display: grid; gap: 2px; padding: 10px 14px; background: var(--sky-2); }
.pd-track div + div { border-left: 1px solid var(--line-soft); }
.pd-track span { font-size: 11.5px; color: var(--ink-3); }
.pd-track b { font-size: 14.5px; }
.pd-season { display: flex; gap: 6px; align-items: center; color: var(--ink-2); font-size: 14px; }
.pd-season svg.lucide { width: 16px; height: 16px; color: var(--star); }
.pl-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 4px; }
.me-places { padding: 12px 22px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.near { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.near a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; }
.nr-img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; display: block; }
.near b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.near small { font-size: 11.5px; color: var(--ink-3); }
.near a:hover b { color: var(--star); }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .today .wrap { grid-template-columns: 1fr 1fr; }
  .today .wx { grid-column: 1 / -1; }
  .body .wrap, .page-grid { grid-template-columns: minmax(0, 1fr); }
  .g-grid, .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* the menu drops to a scrolling second row instead of disappearing */
  .topbar .wrap { justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; height: auto; padding-block: 8px 0; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -6px; padding-bottom: 6px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 6px 10px; font-size: 13.5px; }
  .badged .lbl { display: none; }
  .info-grid { grid-template-columns: minmax(0, 1fr); }
  .g-grid, .g-grid.compact { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 18px; }
  .pl-grid { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 18px; gap: 12px; }
  .pl-grid.compact, .me-places { grid-template-columns: minmax(0, 1fr); }
  .adm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-pad, .tbl-wrap { padding-left: 16px; padding-right: 16px; }
  .board-bars div { grid-template-columns: 84px minmax(0, 1fr) 32px; }
  .tr-top { padding: 0 16px 6px; grid-auto-columns: 128px; }
  .tt-img { width: 128px; height: 88px; }
  .pd-head { padding: 16px 18px 4px; }
  .pd-head h1 { font-size: 24px; }
  .pd-track { margin: 12px 18px 0; }
  .pd-img { aspect-ratio: 4 / 3; }
  .tr-sort { padding: 10px 16px 0; }
  .g-head { padding: 18px 18px 0; }
  .g-head h1 { font-size: 23px; }
  .g-text { padding: 6px 18px 4px; }
  .g-src { margin: 14px 18px 22px; }
  .g-cover.big { aspect-ratio: 16 / 7; }
  .hd-cols { grid-template-columns: minmax(0, 1fr); }
  .hd-cols > div + div { border-left: 0; border-top: 1px solid var(--line-soft); }
  .hd li { grid-template-columns: minmax(92px, auto) minmax(0, 1fr) auto; }
  .biz-filter { flex-wrap: wrap; }
  .biz-filter input { flex-basis: 140px; }
  .sky .wrap { padding-block: 36px 116px; }
  .today .wrap { grid-template-columns: minmax(0, 1fr); }
  .dock-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .news { grid-template-columns: minmax(0, 1fr); }
  .lead { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .rail { grid-template-columns: minmax(0, 1fr); }
  .fields { grid-template-columns: 1fr; }
  .search .btn-star { padding: 0 14px; }
  .brand-dom { display: none; }
  .article { padding: 20px 18px; }
  .cmts { padding: 0 18px 6px; }
  .reply { padding: 6px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- review fixes ---------- */
.post-side { max-width: 42%; min-width: 0; }
.post-side .price { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.facts-row, .facts-row b, .g-src a, .notice a, .author-box, .biz-facts > *, .ai-x { overflow-wrap: anywhere; min-width: 0; }
.me-chip .who { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.err-state span { display: inline-flex; gap: 6px; align-items: center; color: var(--danger); }
.err-state svg.lucide { width: 16px; height: 16px; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--star); color: var(--star-ink); padding: 8px 14px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }
main:focus, #page:focus { outline: none; }
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 40; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-2); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.to-top:hover { border-color: var(--star); color: var(--star); }
.toast[hidden] { display: none; }
.wx-days .rp, .op, .hd-tag, .badge, .pd-photo figcaption { font-size: 11px; }
@media (max-width: 920px) and (min-width: 761px) {
  .topbar .wrap { gap: 16px; }
  .brand-dom { display: none; }
  .nav a { padding: 8px 9px; }
}
@media (max-width: 760px) {
  /* after scrolling down, the second nav row folds away so the sticky header stays short */
  .topbar.compact .nav { display: none; }
  .topbar.compact .wrap { padding-bottom: 8px; }
  .posts, .blist, .rank, .notice, .tabs, .sec-head, .page-head, .form, .side-note, .verify, .nlist, .alerts, .biz-list, .region-row, .tr-islands, .home-guides, .links, .info-cta, .dial, .adm-nav, .inline-form, .sub-head, .biz-count, .news-note, .news-topic, .src-chips, .load-more, .lead, .note-box.in-card { padding-left: 16px !important; padding-right: 16px !important; }
  .note-box.in-card { margin-left: 16px; margin-right: 16px; padding-left: 12px !important; padding-right: 12px !important; }
  .post-side { max-width: 38%; }
  /* brand, bell, 관리 and the account chip must share one row; the chip shrinks to its icon */
  .me-chip .who { display: none; }
  .me-chip { padding: 7px 9px; }
  .top-actions { gap: 4px; }
  .tr-search, #nf-form { padding-left: 0 !important; padding-right: 0 !important; }
}
.tm { white-space: nowrap; }

/* privacy.html / terms.html: standalone long-form pages */
.legal .wrap { max-width: 760px; padding-block: 36px 72px; }
.legal h1 { margin: 0; font-family: var(--display); font-size: 30px; letter-spacing: -.6px; }
.legal-meta { margin: 6px 0 22px; color: var(--ink-3); font-size: 12.5px; }
.legal h2 { margin: 36px 0 10px; font-family: var(--display); font-size: 20px; letter-spacing: -.3px; scroll-margin-top: 76px; }
.legal h3 { margin: 18px 0 6px; font-size: 14px; color: var(--ink-2); }
.legal p, .legal li { color: var(--ink-2); font-size: 14.5px; line-height: 1.75; }
.legal p { margin: 0 0 10px; }
.legal b { color: var(--ink); font-weight: 600; }
.legal ul { margin: 0 0 10px; padding-left: 20px; }
.legal li { margin-bottom: 4px; }
.legal li::marker { color: var(--star); }
.legal a:not(.brand) { color: var(--star); text-decoration: underline; text-underline-offset: 2px; }
.legal code { font-family: var(--mono); background: var(--sky-2); border-radius: 4px; padding: 1px 5px; }
.legal section { scroll-margin-top: 76px; }
.legal-toc { margin: 22px 0 8px; padding: 16px 20px; background: var(--sky-1); border: 1px solid var(--line-soft); border-radius: var(--r); }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.legal-toc li { font-size: 13.5px; margin: 0 0 4px; break-inside: avoid; }
.legal .legal-toc a { color: var(--ink-2); text-decoration: none; }
.legal .legal-toc a:hover { color: var(--star); }
.legal-table { overflow-x: auto; margin: 12px 0 14px; border: 1px solid var(--line-soft); border-radius: var(--r); }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.legal-table th, .legal-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.legal-table th { background: var(--sky-1); color: var(--ink); font-weight: 600; white-space: nowrap; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-foot { margin-top: 44px !important; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 13px !important; }
@media (max-width: 600px) {
  .legal h1 { font-size: 26px; }
  .legal-toc ol { columns: 1; }
  .legal-table td:first-child { min-width: 120px; }
}
.login-consent { margin: 0; font-size: 12px; color: var(--ink-3); }
.login-consent a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.quick-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 12px 22px 0; }
.quick-row > span { font-size: 12px; color: var(--ink-3); margin-right: 2px; }
.quick { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.quick:hover { color: var(--ink); border-color: var(--ink-3); }
.quick[aria-current="true"] { background: var(--star-soft); border-color: rgba(243, 201, 105, .55); color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .quick-row { padding-left: 16px; padding-right: 16px; } }

/* headings need an explicit weight now that they no longer use a display serif */
.page-title, .article h1, .g-head h1, .g-text h2, .pd-head h1, .legal h1, .legal h2, .verify h3, .dlg-body h3, .r-h { font-weight: 700; }

/* search results: one page, kinds as tabs with counts, and a clear button under each preview */
.s-tabs .tab .num { margin-left: 4px; font-size: 12px; color: var(--ink-3); }
.s-tabs .tab[aria-current="true"] .num { color: var(--star); }
.s-tabs .tab[data-none] { opacity: .45; }
.s-sec { padding: 6px 0 4px; border-top: 1px solid var(--line-soft); margin-top: 14px; }
.s-sec:first-child { border-top: 0; margin-top: 4px; }
.s-h { display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px 22px 4px; font-size: 16px; font-weight: 700; }
.s-h svg.lucide { width: 18px; height: 18px; color: var(--star); }
.s-h .num { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.see-all { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 22px 8px; padding: 12px 16px; border: 1px solid rgba(243, 201, 105, .45); border-radius: 12px; background: var(--star-soft); color: var(--star); font-size: 14px; font-weight: 700; transition: background .15s ease; }
.see-all:hover { background: rgba(243, 201, 105, .22); }
.see-all svg.lucide { width: 16px; height: 16px; }
.btn.see-more { width: 100%; justify-content: center; padding: 12px; font-weight: 600; }
.search-page #s-body { padding-bottom: 14px; }
@media (max-width: 760px) { .s-h { padding-left: 16px; padding-right: 16px; } .see-all { margin-left: 16px; margin-right: 16px; } }

/* tab and chip rows: wrap onto more lines on wider screens; on phones they swipe sideways, with a fade on the side that
   has more (app.js toggles .can-left / .can-right) and mouse-wheel scrolling */
@media (min-width: 761px) { .tabs, .adm-nav { flex-wrap: wrap; row-gap: 6px; overflow-x: visible; } }
.can-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.can-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.can-left.can-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* Google sign-in button slot: 별's own button, enabled once Google's script is ready (see mountGoogle in app.js) */
.gsi-slot { display: flex; justify-content: center; min-height: 44px; }
.gsi-slot > .btn { width: 100%; }