/* =============================================================================
   GoGoSing - community UI (loaded on every page together with site.css)
   All design tokens live in site.css :root (single source).
   Layout: header · left menu (drawer on phones) · main content.
   ============================================================================= */

/* ---------------------------------------------------------------- header --- */
.header-in {
  width: 100%; max-width: var(--wrap-wide); margin: 0 auto;
  display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap;
}
/* #site-header / .brand / #site-footer / .crumb: single source in site.css */
.drawer-btn {
  display: none; align-items: center; justify-content: center;
  min-width: 40px; min-height: 38px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  background: var(--bg2); color: var(--ink); border: 1px solid var(--line); font-weight: 800; font-size: 14px;
}
.topnav { display: flex; align-items: center; gap: 2px; flex: 1; margin-left: 4px; flex-wrap: wrap; }
.topnav a {
  color: var(--ink2); padding: 8px 11px; border-radius: 9px; font-size: 14px;
  min-height: var(--tap); display: inline-flex; align-items: center;
}
.topnav a:hover { background: var(--bg2); color: var(--ink); }
.topnav a[aria-current="page"] { background: var(--amber); color: #241A00; font-weight: 800; }
.topnav .nav-sp { flex: 1; }
.topnav .nav-cta { background: var(--amber); color: #241A00; font-weight: 800; }
.topnav form.inline { display: inline; }
.topnav button.linkish {
  border: 0; background: none; color: var(--sub); font: inherit; font-size: 14px;
  padding: 8px 10px; min-height: var(--tap); cursor: pointer; border-radius: 9px;
}
.topnav button.linkish:hover { color: var(--ink); background: var(--bg2); }
.foot-link { color: var(--sub); text-decoration: underline; }
.foot-link:hover { color: var(--amber2); }

/* ------------------------------------------------------------ layout ------ */
.layout {
  display: flex; align-items: flex-start; gap: 22px;
  width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding: 18px 14px 40px;
}
.layout > main { flex: 1 1 auto; min-width: 0; }
.has-side .wrap { max-width: none; padding: 0 0 24px; }
.page .wrap { padding-top: 10px; }

/* ------------------------------------------------------------ left menu --- */
/* One white panel (reference: macOS-style sidebar): brand, search, numbered
   groups with a sub-caption, row items with icon + count, account card. */
/* Left column wrapper: menu panel + the standalone banner below it. */
.side-col {
  flex: 0 0 var(--side); width: var(--side); align-self: flex-start;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.rail {
  width: 100%; flex: none;
  display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 12px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); font-size: 13.5px;
}
/* Site-wide search lives in the header (.topsearch); the rail keeps the
   account card on top. */
.topsearch { display: flex; gap: 6px; margin: 0 2px 0 12px; flex: none; }
.topsearch input {
  width: min(240px, 26vw); padding: 8px 14px; border-radius: 999px; font: inherit;
  font-size: 13.5px; background: var(--bg3); border: 1px solid var(--line); color: var(--ink);
}
.topsearch button {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--amber); color: #241A00; display: inline-flex; align-items: center; justify-content: center;
}
.rail-group { padding: 10px 6px 8px; }
.rail-group + .rail-group, .rail-group + .rail-group-fold,
.rail-group-fold + .rail-group, .rail-group-fold + .rail-group-fold {
  border-top: 1px solid var(--line); margin-top: 6px;
}
.rail-group > h3, .rail-group-fold > summary {
  display: flex; align-items: center; gap: 7px; margin: 2px 2px 8px;
  font-size: 13px; letter-spacing: .2px; color: var(--ink); font-weight: 800;
}
.rail-group > h3 em, .rail-group-fold > summary em { margin-left: auto; }
.rail-group-fold { padding: 10px 6px 8px; }
.rail-group-fold > summary { list-style: none; cursor: pointer; margin-bottom: 2px; border-radius: 8px; }
.rail-group-fold > summary::-webkit-details-marker { display: none; }
.rail-group-fold > summary::after {
  content: "▾"; margin-left: auto; color: var(--sub); font-size: 11px; transition: transform .15s ease;
}
.rail-group-fold[open] > summary::after { transform: rotate(180deg); }
.rail-group-fold > .rail-sub { margin: 0 2px 8px; }
.rail-group-fold > .rail-kids { padding: 0; }
.rail-num {
  flex: none; width: 18px; height: 18px; border-radius: 50%; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--line); color: var(--ink2);
  font-size: 10px; font-weight: 800;
}
.rail-sub {
  margin: -3px 2px 8px; padding: 0 0 0 9px; border-left: 3px solid var(--bg4);
  font-size: 11px; font-weight: 700; letter-spacing: .2px; color: var(--sub);
}
.rail-node { border-top: 1px solid var(--line); }
.rail-node:first-of-type { border-top: 0; }
.rail-node > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; min-height: 34px; border-radius: 12px; color: var(--ink2); font-weight: 600;
}
.rail-node > summary:hover { background: var(--bg3); color: var(--ink); }
.rail-node > summary::-webkit-details-marker { display: none; }
.rail-node > summary::after { content: "▾"; margin-left: auto; color: var(--sub); font-size: 11px; transition: transform .15s ease; }
.rail-node[open] > summary::after { transform: rotate(180deg); }
.rail-node > summary em, .rail-leaf em, .rail-group > h3 em, .chip-grid a em, .bcard em {
  font-style: normal; font-size: 10.5px; color: var(--sub);
  background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 1px 6px;
}
.rail-leaf em, .rail-node > summary em, .rail-group > h3 em { margin-left: auto; }
.rail-kids { display: grid; gap: 1px; padding: 2px 0 4px 6px; }
.rail-kids .rail-leaf { padding: 5px 8px; min-height: 30px; font-size: 13px; }
.rail-kids .rail-leaf::before {
  content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--line);
}
.rail-leaf {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px;
  min-height: 34px; color: var(--ink2); font-weight: 600;
}
.rail-leaf > .rail-ic, .rail-node > summary > .rail-ic {
  font-size: 14px; width: 18px; text-align: center; flex: none;
}
.rail-leaf > .rail-t, .rail-node > summary > .rail-t {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-leaf:hover { background: var(--bg3); color: var(--ink); }
.rail-leaf.is-on {
  background: var(--bg3); color: var(--ink); font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--line);
}
.rail-leaf.is-on em { color: var(--ink2); background: var(--bg2); border-color: var(--line); }
.rail-account {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 10px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 14px; color: var(--ink);
}
.rail-account:hover { border-color: var(--amber); }
.rail-ava {
  flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg2); border: 1px solid var(--line); font-size: 17px;
}
.rail-ava img.avatar { width: 100%; height: 100%; border: 0; vertical-align: 0; }
.rail-ava .avatar-fallback { width: 100%; height: 100%; border: 0; font-size: 14px; color: var(--ink2); }
.rail-acct { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.rail-acct b { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-acct small { font-size: 11.5px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-account.rail-me { display: flex; align-items: center; gap: 8px; }
.rail-me-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--ink); }
.rail-msg {
  position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sub); background: var(--bg2); border: 1px solid var(--line);
}
.rail-msg svg { width: 16px; height: 16px; }
.rail-msg:hover { color: var(--amber2); border-color: var(--amber); }
.rail-msg.has { color: var(--amber2); border-color: var(--amber); background: var(--amber-soft, #fff4e0); }
.rail-msg-badge { position: absolute; top: -6px; right: -7px; }
.rail-account.rail-login { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.rail-login-form { display: grid; gap: 6px; margin: 0; }
.rail-login-form input { padding: 8px 10px; border-radius: 10px; font: inherit; font-size: 13px; background: var(--bg2); border: 1px solid var(--line); color: var(--ink); width: 100%; }
.rail-login-form .btn { width: 100%; }
.rail-login-links { display: flex; gap: 10px; justify-content: space-between; font-size: 11.5px; }

/* ------------------------------------------------------------- headings --- */
.home-hero h1, .board-head h1, .bbs-home h1, .photos h1, .member h1, .pl h1,
.write h1, .auth h1, .search h1, .mine h1, .admin h1, .support h1, .terms h1 {
  font-size: clamp(21px, 2.6vw, 29px); margin: 0 0 4px; letter-spacing: -.5px; line-height: 1.3;
}
.home-hero .sub, .board-head .sub, .bbs-home .sub, .photos .sub, .member .sub, .profile .sub, .pl .sub, .support .sub, .terms .sub {
  color: var(--sub); margin: 0 0 14px; font-size: 13.5px;
}
.home-hero {
  background: linear-gradient(135deg, var(--bg2), var(--bg3) 60%, var(--bg3));
  border: 1px solid var(--line); border-radius: 18px; padding: 22px clamp(16px, 3vw, 30px);
  margin-bottom: 18px; box-shadow: var(--shadow);
}
.home-hero h1 { font-size: clamp(22px, 3.2vw, 32px); }
.hero-ops { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.board-tools { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.board-tools .grow, .ops .grow { flex: 1; }
.tab {
  padding: 7px 12px; border-radius: 9px; background: var(--bg3); border: 1px solid var(--line);
  color: var(--ink2); font-size: 13px; min-height: 36px; display: inline-flex; align-items: center;
}
.tab:hover { color: var(--ink); border-color: var(--amber); }
.tab.is-on { background: var(--amber); border-color: var(--amber); color: #241A00; font-weight: 800; }
.wikilink { font-size: 13px; color: var(--amber2); }
.wikilink:hover { text-decoration: underline; }

/* --------------------------------------------------------------- photos --- */
.photo-strip { margin-bottom: 18px; }
.photo-strip h2, .photos h2, .two-col h2, .member h2 { font-size: 16px; margin: 0 0 10px; color: var(--amber2); }
.photo-strip .more { float: right; margin-top: -34px; font-size: 12.5px; color: var(--sub); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.photo-grid-mini { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); margin-bottom: 10px; }
.photo-card {
  position: relative; display: block; border-radius: 12px; overflow: hidden;
  background: var(--bg4); border: 1px solid var(--line); aspect-ratio: 1 / 1;
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.photo-card:hover img { transform: scale(1.06); }
.photo-card-cap {
  position: absolute; inset: auto 0 0 0; padding: 16px 8px 7px; font-size: 12.5px; color: #fff;
  background: linear-gradient(transparent, rgba(6, 14, 25, .88));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.photo-card.mini { aspect-ratio: 4 / 3; }
.no-photo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 26px; opacity: .45; }
.pic-count {
  position: absolute; top: 7px; right: 7px; font-style: normal; font-size: 11px; font-weight: 800;
  background: rgba(6, 14, 25, .72); color: #fff; border-radius: 8px; padding: 2px 7px;
}

/* ---------------------------------------------------------- post cards ---- */
/* Compact: 16:10 cover, tighter grid/padding so ~2x more posts fit per screen. */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.post-card {
  display: flex; flex-direction: column; background: var(--bg3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
}
.post-card:hover { border-color: var(--amber); }
.post-card-img { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--bg4); }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-img .badge.pin, .post-card-img .badge.notice { position: absolute; top: 8px; left: 8px; z-index: 1; }
.post-card-body { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px 10px; }
.post-card-title {
  color: var(--ink); font-weight: 800; font-size: 14px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card-meta { color: var(--sub); font-size: 12px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.post-card-stats { display: flex; gap: 8px; color: var(--sub); font-size: 12px; margin-top: auto; }

/* ----------------------------------------------------- region index ------- */
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.region-card {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.region-card:hover { border-color: var(--amber); }
.region-card-main { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.region-card-ic { font-size: 20px; flex: none; }
.region-card-t { display: grid; min-width: 0; line-height: 1.3; }
.region-card-t b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-card-t small { color: var(--sub); font-size: 12px; }

/* 전국 지도 (지역별 여행 메인, 2026-10-15): 앱 지도 팔레트의 파스텔 시도 채움.
   바다색/테두리 없음 (운영자 요청 2026-10-15n) — 지도가 페이지 배경 위에 바로
   놓이고 폭 100%로 크게 렌더된다 (세로로 길어도 무관). 지역 <a> 클릭 = 위키. */
.krmap { margin: 0 0 14px; }
.krmap-view { position: relative; }
.krmap-svg { display: block; width: 82%; height: auto; margin: 0 auto; }
.krmap-region { cursor: pointer; }
.krmap-region path {
  stroke: #14283f; stroke-width: 2; stroke-linejoin: round; transition: filter .12s ease;
}
.krmap-region:hover path, .krmap-region:focus path { filter: brightness(1.07) saturate(1.18); }
.krmap-region:focus { outline: none; }
.krmap-region:focus path { stroke-width: 2.6; }
.krmap-region text {
  font-family: inherit; font-size: 27px; font-weight: 800; fill: #14283f;
  text-anchor: middle; dominant-baseline: middle; pointer-events: none;
  paint-order: stroke; stroke: #ffffff; stroke-width: 5px; stroke-linejoin: round;
}
/* 미니어처 경로/차량 (앱 지도와 동일 톤): 경로선·차량은 클릭을 가로막지 않는다. */
.krmap-route-sea { fill: none; stroke: #98a0a8; stroke-opacity: .4; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.krmap-route-halo { fill: none; stroke: #787f87; stroke-opacity: .18; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.krmap-route-core { fill: none; stroke: #98a0a8; stroke-opacity: .28; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.krmap-airline { fill: none; stroke: none; }
.krmap-stop-halo { fill: #808891; fill-opacity: .35; }
.krmap-stop { fill: #f4f7fa; }
.krmap-route-sea, .krmap-route-halo, .krmap-route-core, .krmap-airline,
.krmap-stop-halo, .krmap-stop, .krmap-mv, .krmap-mv * { pointer-events: none; }

/* --------------------------------------------------------------- lists ---- */
table.board-list {
  width: 100%; border-collapse: collapse; background: var(--bg3);
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px;
}
/* 여행 게시판 전용 목록 (자유게시판과 모양은 같되 trip-* 클래스로 분리) */
table.board-list.trip-list .tlike { width: 52px; text-align: center; color: var(--sub); font-weight: 700; font-variant-numeric: tabular-nums; }
table.board-list.trip-list .tlike.hot { color: #E3455F; }
table.board-list.trip-list .ttitle { position: relative; }
table.board-list.trip-list .ttitle a { display: flex; align-items: center; gap: 6px; color: var(--ink); }
table.board-list.trip-list .ttitle a:hover span { color: var(--amber2); }
table.board-list.trip-list .ttitle > a > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.board-list.trip-list .trip-pop {
  display: none; position: absolute; z-index: 6; left: 50%; top: calc(100% + 4px);
  transform: translateX(-50%); width: 220px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--bg2);
  pointer-events: none;
}
table.board-list.trip-list .ttitle a:hover .trip-pop { display: block; }
.trip-pop img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
table.board-list.trip-list .twho { white-space: nowrap; color: var(--sub); font-size: 12.5px; vertical-align: middle; }
table.board-list.trip-list .tviews { width: 64px; text-align: right; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.board-list.trip-list .twhen { white-space: nowrap; color: var(--sub); font-size: 12.5px; width: 76px; }
table.board-list.trip-list tbody tr:nth-child(even) td { background: var(--bg2); }

table.board-list thead th:first-child { border-top-left-radius: var(--radius); }
table.board-list thead th:last-child { border-top-right-radius: var(--radius); }
table.board-list tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
table.board-list tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }
/* image hover preview on the title (hidden until hover) */
.c-title { position: relative; }
/* one-line titles: the title span ellipsizes; the badge stays beside it */
.c-title a { display: flex; align-items: center; gap: 6px; color: var(--ink); }
.c-title a > span:first-of-type {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.c-title a .thumb-pop {
  display: none; position: absolute; z-index: 6; left: 50%; top: calc(100% + 4px);
  transform: translateX(-50%); width: 220px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--bg2);
  pointer-events: none;
}
.c-title a:hover .thumb-pop { display: block; }
.c-title a:hover .thumb-pop img { display: block; }
.thumb-pop img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
}
/* 숙소 목록 대표 이미지(.stay-thumb): hover 팝업 대신 제목 앞 44px 인라인
 * 썸네일로 항상 표시 (2026-10-17l). order:-1 로 마크업 순서 그대로 앞으로.
 * deal-thumb 와 동일 규격. 표지 미등록 글은 임시 이미지로 채워진다. */
.stay-list .c-title a .thumb-pop {
  display: block; position: static; transform: none; order: -1;
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg4); overflow: hidden;
  box-shadow: none;
}
.stay-list .c-title a .thumb-pop img { width: 100%; height: 100%; aspect-ratio: auto; }
@media (max-width: 720px) {
  .stay-list .c-title a .thumb-pop { flex-basis: 40px; width: 40px; height: 40px; }
}
table.board-list th, table.board-list td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.board-list thead th { background: var(--bg4); color: var(--sub); font-weight: 700; font-size: 12.5px; }
table.board-list tbody tr:last-child td { border-bottom: 0; }
table.board-list tbody tr:hover { background: rgba(255, 176, 32, .06); }
table.board-list .c-num, table.board-list .tnum { width: 62px; text-align: center; color: var(--sub); font-variant-numeric: tabular-nums; }
table.board-list .c-like { width: 52px; text-align: center; color: var(--sub); font-weight: 700; font-variant-numeric: tabular-nums; }
table.board-list .c-like.hot { color: #E3455F; }
table.board-list .c-views { width: 64px; text-align: right; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.board-list .c-who, table.board-list .c-when { white-space: nowrap; color: var(--sub); font-size: 12.5px; }
/* .c-who must stay a table-cell (no display:flex on the td): a flex td stops
   stretching to the row height, exposing the table bg below on tall rows. */
table.board-list .c-who { vertical-align: middle; }
table.board-list tbody tr:nth-child(even) td { background: var(--bg2); }
table.board-list .c-title a { display: flex; align-items: center; gap: 10px; color: var(--ink); }
table.board-list .c-title a:hover span { color: var(--amber2); }
/* 오늘의 날씨 목록 (2026-11-04): 오늘 브리핑 행만 검정(--ink), 지난 날씨 행은 회색. */
table.board-list tr.wx-old .c-title a { color: var(--sub); }
table.board-list .excerpt { display: block; color: var(--sub); font-size: 12px; margin: 2px 0 0 40px; }
.li-thumb {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 7px; background-color: var(--bg4);
  background-size: cover; background-position: center; border: 1px solid var(--line); display: inline-block;
}
.li-thumb-none { background: repeating-linear-gradient(45deg, var(--bg4), var(--bg4) 6px, var(--bg3) 6px, var(--bg3) 12px); }
a.cmt { color: var(--amber); font-weight: 800; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 8px; vertical-align: 2px; margin-right: 4px; }
.badge.pin { background: var(--amber); color: #241A00; font-weight: 800; }
.badge.notice { background: #2E5C8A; color: #fff; font-weight: 800; }
.badge.del-hold { background: #A6402E; color: #fff; font-weight: 800; }
.badge.photo { background: var(--bg4); border: 1px solid var(--line); color: var(--sub); }
/* Empty-state hosts. A td.empty must stay a REAL table-cell: display:block on
   a td invalidates its colspan and collapses it into a shrink-to-fit anonymous
   box that wraps text at a few characters per line. Non-table hosts (p/li/span)
   keep the block display (li.empty inside .feed is flex by .feed li anyway). */
td.empty { color: var(--sub); text-align: center; padding: 28px 0; }
/* board-list 셀 규칙(위 text-align:left · 8px padding, 구체성 0,1,2)이 td.empty
   (0,1,1)보다 높아 문의 목록·내역 등의 빈 내용 문구가 왼쪽에 쏠리고 여백이
   무시됐다 (2026-10-18) — 동일 구체성 규칙으로 덮는다. */
table.board-list td.empty { color: var(--sub); text-align: center; padding: 28px 0; }
.empty { color: var(--sub); text-align: center; padding: 28px 0; display: block; }
.flash {
  background: rgba(255, 176, 32, .12); border: 1px solid rgba(255, 176, 32, .45); color: var(--amber2);
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13.5px; margin: 0 0 12px;
}
.pager { display: flex; gap: 4px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
.pager a {
  min-width: 36px; min-height: 36px; padding: 0 10px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink2); background: var(--bg3); font-size: 13.5px;
}
.pager a:hover { border-color: var(--amber); color: var(--ink); }
.pager a.is-on { background: var(--amber); border-color: var(--amber); color: #241A00; font-weight: 800; }

/* -------------------------------------------------------------- thread ---- */
.thread, .comments, .community, .admin, .write, .auth, .search, .mine, .member, .support, .terms,
.bcard, .two-col section, .photos, .photo-strip {
  background: var(--bg3); border: 1px solid var(--line); border-radius: var(--radius);
}
.thread, .photos, .member { box-shadow: var(--shadow); }
.member { padding: 20px clamp(14px, 2.2vw, 26px) 22px; }
.thread { --thread-pad-x: clamp(14px, 2.2vw, 26px); padding: 20px var(--thread-pad-x) 22px; }
.thread h1 { margin: 4px 0 6px; line-height: 1.35; word-break: break-word; }
.thread .meta { color: var(--sub); font-size: 13px; margin: 0 0 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.thread .meta .who { color: var(--amber2); font-weight: 700; }
/* 작성자 마스킹 IP: 닉네임 옆 괄호 소형 표기 (2026-10-15) */
.who-row { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.post-ip { color: var(--sub); font-size: 11px; white-space: nowrap; }
/* 본문 영역 (2026-10-19 시인성 개선): 스레드 본문만 흰 종이 배경
   (var(--bg2)=다크 테마 대응) + 상하 여백. 약관 등 다른 .tbody 화면은 유지. */
.thread .tbody { background: var(--bg2); border: 1px solid var(--line); border-left: 0; border-right: 0;
  border-radius: 0; padding: 16px clamp(12px, 1.8vw, 20px);
  margin: 4px calc(0px - var(--thread-pad-x)) 16px; }
.thread .tbody > :last-child { margin-bottom: 0; }
.tbody { line-height: 1.78; color: var(--ink2); font-size: 15.5px; word-break: break-word; }
.tbody p { margin: 0 0 14px; }
.tbody h2, .tbody h3 { color: var(--ink); margin: 22px 0 8px; }
/* 본문 h1 (2026-10-19): 페이지 제목과 동급으로 보이지 않게 한 단계 낮춘다. */
.tbody h1 { color: var(--ink); font-size: 1.4em; margin: 18px 0 8px; line-height: 1.35; word-break: break-word; }
.tbody a { color: var(--amber2); text-decoration: underline; }
/* Inline post images: centered, shrunk to the body width (write-editor markers). */
.tbody img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 10px auto; }
.post-credit {
  margin: 0 0 12px; padding: 8px 12px; background: var(--bg4); border: 1px solid var(--line);
  border-radius: 10px; color: var(--sub); font-size: 13px;
}
/* 작성자 서명 — 본문 카드와 배너 사이의 독립 카드 (0035_member_signature). */
.post-sig {
  margin: 14px 0 0; padding: 12px 16px; background: var(--bg3); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--sub); font-size: 13.5px; line-height: 1.6;
  word-break: break-word; text-align: right;
}
.post-sig .sig-t {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--sub); margin: 0 0 2px;
}
/* 여행지/위치 카드 (여행 게시판 글). */
.post-place {
  margin: 0 0 12px; padding: 8px 12px; background: var(--bg4); border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink2); font-size: 13.5px; display: flex;
  align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.post-place .ic { color: var(--amber2); flex: 0 0 auto; }
.post-place-addr { color: var(--sub); }
/* 여행 게시판 글쓰기: 위치는 1..N 번호 카드(trip-stop-row)로 표현 — 1번 =
   대표 위치 카드, 2..N = 코스 정지지행 카드. 위/경도 수동 입력은 카드 안의
   .trip-coord-in 에 감춰져 있다가 지도 미로드(폴백) 시 .is-fall 로 펼쳐짐. */
.trip-write .trip-coord-in { display: none; }
.trip-write .trip-coord-in.is-fall {
  display: grid; gap: 6px; grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
}
.trip-write .trip-lbl { font-weight: 800; color: var(--ink); font-size: 13px; }
.trip-write .trip-coord-in input {
  width: 100%; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 14px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink); box-sizing: border-box;
}
.trip-write .trip-coord-in input:focus {
  outline: none; border-color: var(--amber); box-shadow: var(--ring);
}
/* 여행 게시판 글쓰기: 지도 위치 픽커 (자체 호스팅 Leaflet + OSM 타일). */
.trip-write .trip-map-box { margin: 14px 0 0; display: grid; gap: 8px; }
.trip-write .trip-map {
  position: relative; height: 340px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg2); z-index: 0; isolation: isolate;
}
.trip-write .trip-map-tools {
  margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.trip-write .trip-map-tools #trip-coords {
  font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--ink);
}
.trip-write .trip-map-tools .linkish { cursor: pointer; }
.trip-write .trip-map-fall { color: var(--amber2); font-size: 12px; }
/* 여행 코스 행: 1번(대표)과 정지지행(2..N)이 같은 구조를 쓴다
   (번호 / 여행지 / 주소 / 오른쪽 버튼 칸). + 는 1번 카드의 [행 추가],
   − 는 정지지행 카드의 [행 삭제] — 규격 동일, 색만 의미 구분. */
.trip-write .trip-add-btn {
  align-self: center; justify-self: center; width: 42px; height: 42px; box-sizing: border-box;
  padding: 0; border-radius: 10px; border: 1px solid var(--amber);
  background: transparent; color: var(--amber2); font-size: 20px; font-weight: 700;
  cursor: pointer; line-height: 1;
}
.trip-write .trip-add-btn:hover { background: var(--amber); color: #fff; }
/* 정지지행 삭제(−) 버튼: + 버튼과 동일 규격 · 빨간 강조(호버 fill). */
.trip-write .trip-add-btn.ts-del { border-color: var(--danger); color: var(--danger); }
.trip-write .trip-add-btn.ts-del:hover { background: var(--danger); color: #fff; }
.trip-write #trip-stops { display: grid; gap: 8px; margin-top: 10px; }
.trip-write .trip-stop-row {
  display: grid; gap: 10px; align-items: start;
  grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) auto;
  padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2);
}
.trip-write .ts-seq {
  align-self: center; justify-self: center; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber); color: #fff; font-size: 12.5px; font-weight: 800;
}
.trip-write .ts-name-cell label,
.trip-write .ts-addr-cell label { display: grid; gap: 6px; }
.trip-write .trip-stop-row input {
  width: 100%; padding: 9px 11px; border-radius: 10px; font: inherit; font-size: 13.5px;
  background: var(--bg4); border: 1px solid var(--line); color: var(--ink); box-sizing: border-box;
}
/* 1번(대표) 카드도 동일 카드 스타일을 쓴다(별도 배경 토큰 없음). */
@media (max-width: 720px) {
  .trip-write .trip-stop-row { grid-template-columns: 30px minmax(0, 1fr); }
  .trip-write .ts-addr-cell { grid-column: 2; }
  .trip-write .trip-add-btn { grid-column: 2; justify-self: end; }
  .trip-write .trip-coord-in.is-fall { grid-template-columns: 1fr; }
}
/* 지도 위 번호 핀 (코스 정지지행) — Leaflet divIcon.
   box-sizing: border-box 필수 — border 2px를 포함한 22px 원이 앵커(11,11)와
   정확히 맞고, 숫자가 원의 중앙에 위치한다 (content-box였을 때 2px 표류). */
.stop-pin {
  box-sizing: border-box;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); border: 2px solid #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.stop-pin b { display: none; }
/* itinerary의 정지지행 주소 표시. */
.cs-addr { display: block; color: var(--sub); font-size: 12px; }
/* 주소 -> 좌표 후보 목록 (주소 입력 바로 아래, 단일 결과는 자동 적용). */
/* display:grid 가 [hidden] UA 스타일을 이기므로 [hidden] 규칙이 반드시 필요. */
.trip-write .trip-geo-list[hidden] { display: none; }
.trip-write .trip-geo-list {
  list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
  max-height: 210px; overflow: auto;
}
.trip-write .trip-geo-list button {
  width: 100%; text-align: left; background: none; border: 0; border-radius: 8px;
  padding: 8px 10px; font: inherit; color: var(--ink); display: grid; gap: 2px;
  cursor: pointer; box-sizing: border-box;
}
.trip-write .trip-geo-list button:hover { background: var(--bg4); }
.trip-write .trip-geo-list button small {
  color: var(--sub); font-size: 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.trip-write .trip-geo-list button span {
  font-variant-numeric: tabular-nums; font-size: 12px; color: var(--sub);
}
@keyframes trip-map-pop {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 55%, transparent); }
  to   { box-shadow: 0 0 0 14px color-mix(in srgb, var(--amber) 0%, transparent); }
}
.trip-write .trip-map.is-picked { animation: trip-map-pop .6s ease-out 1; }
/* 지도 내부 요소가 폼/메뉴 오버레이와 겹치지 않도록 폼 컨텍스트에서 제어.
   (2026-10-28: Leaflet → 네이버 지도 — 네이버 panes도 z-index가 높아 같은
   격리 규칙을 컨테이너에 유지한다.) */
.trip-write .trip-map { font: inherit; }
/* 게시글 본문(여행 게시판) 위치 지도. */
.thread-map {
  /* Naver Maps panes use high z-index values. Confine them to this container
     so the phone drawer (z-index 40) is never covered by a map (2026-10-23). */
  position: relative; z-index: 0; isolation: isolate;
  height: 340px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg2); margin: 12px 0;
}
/* 고고트래블 GPS 기록: 통계 칩 + 지도 위 사진핀/안전 이벤트 마커. */
.track-stats {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 4px 0 12px; font-size: 13px; color: var(--sub);
}
.track-stats .track-badge {
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  color: var(--ink); border-radius: 999px; padding: 3px 11px;
  font-weight: 700; font-size: 12px;
}
.track-stats span {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; background: var(--bg2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.track-stats span.track-ev {
  border-color: color-mix(in srgb, var(--amber) 35%, var(--line));
  color: var(--ink);
}
.track-photo-pin {
  box-sizing: border-box; display: block; width: 28px; height: 28px;
  border-radius: 8px; border: 2px solid #fff; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.track-photo-pin img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 사진 핀 번호 배지 — 앱 에디터/기록 화면과 동일 (본문 <img#> 번호). */
.track-photo-no {
  position: absolute; top: -6px; right: -6px;
  min-width: 15px; padding: 0 4px; border-radius: 999px;
  background: #ff9800; color: #fff; font-size: 10px; font-weight: 800;
  line-height: 15px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.track-photo-link img { display: block; max-width: 240px; max-height: 180px; border-radius: 8px; }
/* 트랙 속도 구간 범례 (2026-10-20): 점별 속도가 있을 때만 site.js가 삽입. */
.track-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 2px 0;
  font-size: 12px; color: var(--sub);
}
.track-legend span { display: inline-flex; align-items: center; gap: 5px; }
.track-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; }
/* 목록 제목의 여행지 접두 (여행지 - 글 제목). */
.tplace-name { color: var(--ink); font-weight: 700; }
@media (max-width: 720px) {
  .trip-write .trip-map { height: 260px; }
  .thread-map { height: 260px; }
}
@media (max-width: 720px) { .gov-sites-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .trip-write .trip-place-fields { grid-template-columns: 1fr; } }
.tbody pre { background: var(--bg4); padding: 12px; border-radius: 10px; overflow: auto; border: 1px solid var(--line); }
.tbody blockquote { border-left: 3px solid var(--amber); margin: 14px 0; padding: 4px 14px; color: var(--sub); }
.tbody table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.tbody th, .tbody td { border: 1px solid var(--line); padding: 8px 10px; }
/* 본문 마커 이미지 캡션 (사진N, 2026-10-18): gg_md_to_html 이 alt 있는
   이미지를 figure로 감싼다 - 안쪽 img는 기존 .tbody img 규칙을 그대로 쓴다. */
/* 캡션 아래 한 칸 공백 (2026-10-19): 본문 문단 간격(.tbody p)과 동일. */
.md-fig { margin: 0 0 14px; }
.md-fig figcaption { color: var(--sub); font-size: 12.5px; text-align: center; margin-top: 2px; }
/* 구글 애드센스 수동 단위 (2026-10-18): 본문 하단/홈/목록 중간. 슬롯 미설정이면
   gg_adsense_unit 이 '' 를 반환해 마크업 자체가 없다 (레이아웃 잔여물 없음). */
.gg-ad { margin: 14px 0; }
.gg-ad ins { display: block; }
/* 배너 자리 안에서는 컨테이너가 이미 여백을 갖고 있으므로 광고 여백을 없앤다
   (왼쪽 레일/오른쪽 레일/글 하단/홈 인덱스, 2026-10-24). */
.rail-ad .gg-ad,
.ad-right .gg-ad,
.thread-banner .gg-ad,
.bi-banner .gg-ad { margin: 0; }
/* 광고 미충전 시 고정 크기(오른쪽 160x600)가 빈 공간으로 남지 않도록 접는다.
   AdSense 로더가 ins 에 data-ad-status="unfilled" 를 설정한다. "unfill-optimized"
   도 크리에이티브 없이 빈 박스만 남기므로 함께 접는다 (2026-10-29). */
ins.adsbygoogle[data-ad-status="unfilled"],
ins.adsbygoogle[data-ad-status="unfill-optimized"] { display: none !important; }
.rail-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.rail-ad:has(ins.adsbygoogle[data-ad-status="unfill-optimized"]),
.ad-right:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.ad-right:has(ins.adsbygoogle[data-ad-status="unfill-optimized"]),
.thread-banner:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.thread-banner:has(ins.adsbygoogle[data-ad-status="unfill-optimized"]),
.bi-banner:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.bi-banner:has(ins.adsbygoogle[data-ad-status="unfill-optimized"]) { display: none; }
/* 반응형 크리에이티브가 컨테이너보다 넓게 와도 모바일 가로 스크롤이 생기지
   않게 한다 (2026-10-24 UI fix). */
.bi-banner, .thread-banner { overflow: hidden; }
/* 배너 슬롯 크기 (2026-10-29 운영자 지시): AdSense 래퍼를 사이트 배너와
   같은 폭으로 채운다 (글 하단/홈 index = 본문 폭). 왼쪽 레일은 AdSense
   표준 half banner(234x60)를 쓴다 — 사이드 폭(246px)에 그대로 요청하면
   246x60 비표준 크기가 되어 미충전되기 때문 (2026-10-29 확인). */
.rail-ad .gg-ad {
  width: 234px; max-width: 100%; margin: 0 auto;
}
.thread-banner .gg-ad,
.bi-banner .gg-ad {
  width: 100%; margin: 0 auto;
}
/* 모바일: 정사각형(390x390) 대신 표준 320x100 가로 배너로 제한한다.
   `data-full-width-responsive="false"` 와 함께 적용해야 Google이
   가로 크리에이티브를 선택한다 (2026-10-29 운영자 요청). */
@media (max-width: 720px) {
  .thread-banner .gg-ad,
  .bi-banner .gg-ad { max-width: 320px; }
}
tr.gg-ad-row td { padding: 6px 10px; }
.gallery { display: grid; gap: 8px; margin: 0 0 16px; }
.gallery-1 { grid-template-columns: 1fr; }
.gallery-2 { grid-template-columns: 1fr 1fr; }
/* 3장 이상만 모자이크(자동 열수): 이 규칙이 gallery-1/2 를 덮지 않게
   클래스별로 한정한다 - 기존 .gallery auto-fill 이 바로 위 규칙들을
   소스 순서로 이겨 2장이 4열로 잘리며 작게 보였다 (2026-10-16). */
.gallery-3, .gallery-4, .gallery-5, .gallery-6, .gallery-7, .gallery-8 {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.gallery figure.shot { margin: 0; }
.gallery figure.shot img { width: 100%; height: auto; border: 1px solid var(--line); cursor: zoom-in; }
.gallery figcaption { color: var(--sub); font-size: 12.5px; margin-top: 4px; }
.ops { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.like {
  border: 1px solid var(--line); background: var(--bg2); color: var(--ink2); border-radius: 9px;
  padding: 8px 14px; min-height: 38px; cursor: pointer; font-size: 14px;
}
.like:hover { border-color: var(--amber); }
.like.is-on { background: rgba(255, 176, 32, .16); border-color: var(--amber); color: var(--amber2); font-weight: 800; }
.like.static { border-style: dashed; color: var(--sub); }

/* avatars */
.avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); vertical-align: -6px; }
.avatar-lg { width: 72px; height: 72px; border-radius: 16px; }
.avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg2);
  color: var(--amber2); font-weight: 900; font-size: 12px; text-transform: uppercase;
}
.profile-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

/* ----------------------------------------------------------- comments ---- */
.comments { margin-top: 18px; padding: 4px clamp(14px, 2.2vw, 26px) 20px; }
.comments h2 { font-size: 16px; margin: 16px 0 6px; }
.cmt-item { border-top: 1px solid var(--line); padding: 12px 0; }
.cmt-top { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sub); }
.cmt-top strong { color: var(--amber2); font-size: 13.5px; }
.cmt-body { margin-top: 5px; line-height: 1.7; color: var(--ink2); word-break: break-word; white-space: pre-wrap; }
.cmt-body img { max-width: 100%; border-radius: 10px; }
.reply { margin: 10px 0 0 14px; padding: 8px 0 4px 12px; border-left: 2px solid var(--line); font-size: 14px; }
.reply-form { display: flex; gap: 6px; margin-top: 8px; }
.reply-form input[name="body"] {
  flex: 1; min-width: 0; padding: 9px 11px; border-radius: 10px; font: inherit; font-size: 14px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink);
}
/* 이용후기 사진 슬라이드 (2026-10-17l): 댓글 본문 아래 scroll-snap 트랙.
 * 이미지는 한 장씩 통 폭으로 넘어가고 ‹› 버튼 + n/N 카운터가 겹친다. */
.cmt-gallery { position: relative; margin: 10px 0 2px; }
.cmt-slides {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg4);
  scrollbar-width: none;
}
.cmt-slides::-webkit-scrollbar { display: none; }
.cmt-slide {
  flex: 0 0 100%; scroll-snap-align: start; display: block; cursor: zoom-in;
}
.cmt-slide img {
  width: 100%; height: auto; max-height: 380px; object-fit: cover; display: block;
}
.cmt-gnav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(20, 24, 32, .55); color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cmt-gprev { left: 8px; }
.cmt-gnext { right: 8px; }
.cmt-gnum {
  position: absolute; right: 10px; bottom: 8px; z-index: 2;
  padding: 2px 8px; border-radius: 999px; background: rgba(20, 24, 32, .55);
  color: #fff; font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.login-note { color: var(--sub); font-size: 13.5px; }
.login-note a { color: var(--amber2); text-decoration: underline; }

/* --------------------------------------------------------------- forms ---- */
input, textarea, select, button { font-family: inherit; }
.write form > p, .auth form > p { margin: 0 0 12px; }
.write, .auth, .mine, .search, .admin, .support, .terms { padding: 18px clamp(14px, 2.2vw, 24px) 22px; }
/* 접근 권한 없음 페이지: 본문 로그인 폼 대신 이미지+메시지 안내 (2026-10-16) */
.denied { text-align: center; padding: 46px 20px 50px; }
.denied-ic {
  width: 88px; height: 88px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
  font-size: 44px; background: var(--bg2); border: 1px solid var(--line); border-radius: 50%;
}
.denied h1 { border: 0; margin: 0 0 8px; }
.denied .hint { margin: 0 0 16px; }
.write input[name="title"], .write textarea, .auth input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .auth textarea, .cform textarea, .uploader input[type=text], .uploader input:not([type]),
.support input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .support textarea, .support select,
.account-block input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .account-block textarea, .account-block select {
  width: 100%; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 15px; line-height: 1.6;
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink); resize: vertical;
}
.write input[name="title"]:focus, .write textarea:focus, .auth input:not([type="checkbox"]):focus, .auth textarea:focus, .cform textarea:focus,
.support input:focus, .support textarea:focus, .support select:focus,
.account-block input:focus, .account-block textarea:focus, .account-block select:focus,
.topsearch input:focus, .reply-form input:focus { outline: none; border-color: var(--amber); box-shadow: var(--ring); }
.cform { margin-top: 14px; }
.cform textarea { min-height: 74px; }
.cform button, .reply-form button { margin-top: 8px; }
.uploader { border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px; background: var(--bg4); font-size: 13.5px; color: var(--sub); }
.uploader p { margin: 0 0 8px; }
.uploader strong { color: var(--amber2); }
.uploader input[type="file"] { color: var(--ink2); font-size: 13px; }
.preview { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.preview figure { margin: 0; width: 84px; }
.preview img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.preview figcaption { font-size: 12px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keep-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.keep { display: inline-flex; align-items: center; gap: 5px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 4px 8px 4px 4px; }
.keep img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.form-ops { display: flex; gap: 8px; flex-wrap: wrap; }
.pw-tagbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.pw-taglab { font-size: 12.5px; color: var(--sub); font-weight: 700; }
.pw-tag-btn {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg3); color: var(--ink2); font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.pw-tag-btn:hover { border-color: var(--amber); }
.pw-tag-btn.is-on { background: var(--amber); border-color: var(--amber); color: #241A00; }
.hint { color: var(--sub); font-size: 12.5px; margin: 8px 0 0; }
.agree { font-size: 13px; color: var(--sub); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.agree input { width: auto; flex: none; }
.chk { display: block; margin: 6px 2px 0; font-size: 12.5px; color: var(--sub); min-height: 0; }
.chk.ok { color: #2e8b57; font-weight: 700; }
.chk.bad { color: var(--danger); }
/* 가입 폼 중복 확인 행 (2026-10-22): 입력 + [중복 확인] 버튼 한 줄, 결과 메시지는 아래. */
.duprow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.duprow input { flex: 1; min-width: 0; }
.duprow .btn { flex: none; white-space: nowrap; }
.duprow .chk { flex-basis: 100%; }

/* ------------------------------------------------- register kind (2026-10-19) --- */
.reg-kind { font-size: 13px; color: var(--ink2); margin: 0 0 12px; }
.kindcards { display: grid; gap: 12px; margin: 0 0 14px; }
.kindcard {
  position: relative; display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 12px;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px 10px 10px;
  cursor: pointer; background: var(--bg1); transition: border-color .12s, box-shadow .12s;
}
.kindcard img { width: 132px; height: 66px; object-fit: cover; border-radius: 8px; display: block; }
.kindcard .kc-body { display: grid; gap: 3px; }
.kindcard strong { font-size: 14.5px; }
.kindcard .kc-body > span:last-child { font-size: 12.5px; color: var(--sub); line-height: 1.45; }
.kindcard input { position: absolute; top: 8px; left: 8px; width: 14px; height: 14px; margin: 0; }
.kindcard:has(input:checked) { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.kindcard:hover { border-color: var(--amber); }
.regextra { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; margin: 0 0 12px; }
.regextra legend { font-weight: 800; font-size: 13.5px; padding: 0 6px; }
.regextra .hint { margin: 0 0 10px; }
/* 가입 폼 칩 선택 (2026-10-21): 셀렉트 대체 — 라디오를 투명하게 깔고
   선택 상태를 칩으로 표시. 한 눈에 보고 탭 한 번으로 고른다. */
.chip-label { display: block; font-size: 12px; color: var(--sub); margin: 0 0 2px; }
.chipgroup { display: flex; flex-wrap: wrap; gap: 8px; }
.chipgroup input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chipgroup span {
  display: inline-flex; align-items: center; padding: 8px 15px; border-radius: 999px;
  background: var(--bg3); border: 1px solid var(--line); color: var(--ink);
  font-size: 13.5px; cursor: pointer; user-select: none;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.chipgroup span:hover { border-color: var(--amber); }
.chipgroup input:checked + span {
  background: var(--amber); border-color: var(--amber); color: #241A00; font-weight: 700;
}
.chipgroup input:focus-visible + span { box-shadow: var(--ring); }
.cert-up { display: grid; gap: 8px; margin: 4px 0 0; }
.cert-up input[type="file"] { width: auto; max-width: 100%; }
.cert-up img { border: 1px solid var(--line); border-radius: 8px; }
/* 휴대폰 인증 (2026-10-20) */
.phone-box { display: grid; gap: 8px; margin: 6px 0 0; }
/* [hidden] 무시 방지: 위 display:grid가 UA 숨김을 덮으므로 명시한다 (2026-10-22,
 * 프로필 [번호 변경] 토글 — 펼치기 전 인증 박스 숨김). */
.phone-box[hidden] { display: none; }
.phone-box p { display: flex; gap: 8px; margin: 0; }
.phone-box input { flex: 1; min-width: 0; }
.phone-box .btn { flex: none; white-space: nowrap; }

/* ------------------------------------------------------------ captcha --- */
.cap-box { margin: 0 0 12px; }
.cap-q { color: var(--ink2); font-size: 14px; margin: 0 0 10px; }
.cap-q strong { color: var(--amber2); }
.cap-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 460px; }
.cap-tile {
  position: relative; display: block; cursor: pointer; border-radius: 12px;
  border: 2px solid var(--line); overflow: hidden; background: var(--bg2);
}
.cap-tile img { display: block; width: 100%; height: auto; }
.cap-tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cap-tile:has(input:checked) { border-color: var(--amber); box-shadow: var(--ring); }
.cap-tile:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (max-width: 720px) { .cap-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------- paid services ------ */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 12px 0 20px; }
.promo-card { background: var(--bg3); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.promo-card h2 { margin: 0 0 6px; font-size: 15.5px; color: var(--amber2); }
.promo-card p { margin: 0 0 8px; font-size: 13.5px; color: var(--sub); }
.promo-card input { width: 100%; }
.promo-card select { width: 100%; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 15px; background: var(--bg2); border: 1px solid var(--line); color: var(--ink); }
.promo-card .hint { display: block; margin-bottom: 4px; }
.promo-price { color: var(--ink); font-weight: 800; font-size: 16px; }
.promo-cta { margin: 16px 0 4px; }
.promo-thumb { width: 64px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.promo-preview img { max-width: 420px; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.promo-filter { margin: 0 0 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.member-filter { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; align-items: center; }
.member-filter input { flex: 0 1 260px; padding: 10px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 13.5px; }
.member-filter select { padding: 10px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 13.5px; }
.member-head { display: flex; gap: 14px; align-items: center; background: var(--bg3); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.member-head h1 { margin: 0 0 4px; font-size: 22px; }
.member-id { min-width: 0; }
.member-side { margin-left: auto; }
.member-stats { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0 0 16px; padding: 0; }
.member-stats li { background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--sub); }
.member-stats b { color: var(--ink); }
/* level band (사이트 정책; 앱은 미러): pill tile + thin token bar */
.lvline { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.lvbar { flex: 1; max-width: 240px; height: 6px; border-radius: 4px; background: var(--bg4); overflow: hidden; }
.lvbar i { display: block; height: 100%; border-radius: 4px; background: var(--amber); }
.lvline .lv-say { margin: 0; font-size: 12.5px; color: var(--sub); }
/* 계정 설정(개인정보 탭) 아래 로그아웃 — 앱(embed)에서는 상단 메뉴가
   숨겨지므로 이 버튼이 사실상 유일한 로그아웃 경로다 (POST + CSRF). */
.account-logout { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); text-align: right; }
/* 탈퇴 탭은 앱(embed)에서 숨김 — 모바일웹/PC웹에서만 표시한다. */
body.embed .acc-tabs a[href*="withdraw"] { display: none; }
.top-banner { margin: 0 0 14px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg2); }
.top-banner a { display: block; }
.top-banner img { display: block; width: 100%; height: auto; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 10px 16px; border: 0; border-radius: 11px;
  background: var(--amber); color: #241A00; font-weight: 800; font-size: 14.5px;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--amber2); }
.btn-ghost { background: var(--bg2); color: var(--ink2); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--bg4); color: var(--ink); border-color: var(--amber); }
.btn-danger { background: var(--danger); color: #fff; }
.btn.sm { min-height: 34px; padding: 6px 11px; font-size: 13px; border-radius: 9px; }
form.inline { display: inline; }
.move-form select { padding: 7px 9px; border-radius: 9px; background: var(--bg2); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 12.5px; max-width: 180px; }
button.linkish { border: 0; background: none; color: var(--sub); cursor: pointer; text-decoration: underline; font-size: 13px; }
button.linkish.danger { color: var(--danger); }

/* -------------------------------------------------------- home / feeds ---- */
.bcard { padding: 14px 16px 16px; margin-bottom: 12px; }
.bcard h2 { margin: 0 0 10px; font-size: 15.5px; color: var(--amber2); }
.chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-grid a {
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px;
  color: var(--sub); text-decoration: none; white-space: nowrap;
}
.chip-grid a:hover { border-color: var(--amber); color: var(--ink); }

/* 정부·공공 여행 사이트 모음 (/info 정부·공공 여행 사이트 페이지 + 여행정보 게시판 하단).
   카드 그리드: 썸네일 | 사이트 이름 + 설명. */
.gov-sites { margin: 30px 0 0; }
.gov-sites-h {
  font-size: 18px; border-left: 3px solid var(--amber); padding-left: 10px;
  margin: 0 0 12px;
}
.gov-sites-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gov-site {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg2);
  text-decoration: none;
}
.gov-site:hover { border-color: var(--amber); }
.gs-thumb {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 11px; overflow: hidden;
  background: var(--bg3); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
}
.gs-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gs-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gs-body b { color: var(--ink); font-size: 14px; line-height: 1.3; }
.gs-body small { color: var(--sub); font-size: 12px; line-height: 1.45; }

/* 유튜브 여행 채널 (/yt). 카드 = 채널 헤더(→채널 동영상 페이지) + 최근 영상 5개 목록,
   영상 썸네일은 ytimg 직접 로딩 (RSS 동기화, CSP img-src https: 허용). */
.yt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.yt-ch {
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg2);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.yt-ch-head { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.yt-ch-head:hover .yt-ch-nb b { text-decoration: underline; }
.yt-ch-badge {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px;
  background: #FF0000; color: #fff; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.yt-ch-nb { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.yt-ch-nb b { color: var(--ink); font-size: 15px; line-height: 1.3; }
.yt-ch-nb small {
  color: var(--sub); font-size: 12px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-feeds { display: flex; flex-direction: column; gap: 4px; }
.yt-v {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 4px; border-radius: 8px; min-width: 0;
}
.yt-v:hover { background: var(--bg3); }
.yt-v img {
  flex: 0 0 120px; width: 120px; height: 68px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line); background: var(--bg3);
}
.yt-vt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.yt-vt b {
  color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: keep-all;
}
.yt-vt small { color: var(--sub); font-size: 11px; }

/* 채널 등록/승인 워크플로 UI (/yt): 등록 버튼, 승인 대기 오버레이(투명 검정), 관리자 버튼. */
.yt-ops { margin-top: 10px; }
.yt-ch.is-pending { position: relative; min-height: 120px; }
.yt-ch-badge-off { background: var(--bg4); color: var(--sub); }
.yt-pend {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(0,0,0,.5); border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.yt-pend span { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 2px; }
.yt-pend-ops { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; gap: 6px; }
.yt-pend-ops .btn { margin: 0; }
.yt-ch-ops { display: flex; justify-content: flex-end; margin-top: 2px; }
.yt-ch-ops .btn { margin: 0; }
.yt-form .mf-to { margin-top: 2px; }
/* <meta name="color-scheme" content="dark">(render.php) 때문에 UA 컨트롤이 강제 다크로
   나온다 — 이 폼의 입력 컨트롤은 명시 배경/글자색으로 통일 (msg-form 입력란과 동일 톤). */
.yt-form input, .yt-form textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
  font: inherit; font-size: 14px; line-height: 1.6;
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink);
  resize: vertical; color-scheme: light;
}
.yt-form input:focus, .yt-form textarea:focus { outline: none; border-color: var(--amber); box-shadow: var(--ring); }
.yt-form .yf-note { color: var(--sub); font-size: 12px; margin: 8px 0 0; }
.yt-form .yf-lab { display: block; color: var(--sub); font-size: 12px; margin: 12px 0 4px; }
.yt-form .yt-fields { margin-top: 10px; }
.yt-form .yt-f-head { display: flex; flex-direction: column; gap: 4px; background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.yt-form .yt-f-head b { color: var(--ink); font-size: 14px; }
.yt-form .yt-f-head small { color: var(--sub); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-form .yf-actions { display: flex; gap: 8px; margin-top: 12px; }
.yt-form .yf-msg { color: var(--ink2); font-size: 12px; margin-top: 8px; min-height: 18px; }
@media (max-width: 720px) {
  .yt-grid { grid-template-columns: 1fr; }
  .yt-v img { flex-basis: 104px; width: 104px; height: 59px; }
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.two-col section { padding: 14px 16px 16px; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; justify-content: space-between; align-items: baseline; }
.feed li:last-child { border-bottom: 0; }
.feed a { color: var(--ink); }
.feed a:hover { color: var(--amber2); }
.feed small { color: var(--sub); white-space: nowrap; font-size: 12px; }
.feed li.empty { justify-content: center; color: var(--sub); }
ul.hits { list-style: none; margin: 0; padding: 0; }
ul.hits li { padding: 10px 0; border-bottom: 1px solid var(--line); }
ul.hits li:last-child { border-bottom: 0; }
ul.hits a { color: var(--ink); font-weight: 700; }
ul.hits small { color: var(--sub); }

/* ---------------------------------------------- home board index (clien) -- */
.bbs-index { display: flex; flex-direction: column; gap: 14px; }
.bbs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.bi-banner { display: block; }
.bi-banner img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.bi-box { display: flex; flex-direction: column; min-width: 0; background: var(--bg3); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 16px; }
.bi-box .feed { flex: 1 1 auto; }
.bi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bi-head h2 { margin: 0; font-size: 15.5px; color: var(--amber2); flex: 1; min-width: 0; }
.bi-more { font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.bi-more:hover { color: var(--amber2); }
.feed .cnt { color: var(--amber2); font-weight: 700; }
.bbs-index .feed li { align-items: center; }
.bbs-index .feed a { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbs-index .feed .cnt { flex: 0 0 auto; }
.bi-tag { color: var(--amber2); font-weight: 600; font-size: 11.5px; margin-right: 6px; }

/* --------------------------------------------------------------- admin ---- */
.admin .stats { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 0 0 6px; }
.admin .stats li { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--sub); }
.admin .stats b { color: var(--amber2); font-size: 15px; margin-left: 4px; }
.admin h2 { font-size: 15px; color: var(--amber2); margin: 22px 0 8px; }
.admin code { background: var(--bg4); border: 1px solid var(--line); padding: 2px 5px; border-radius: 6px; font-size: 12.5px; }
.admin .vbar { display: block; height: 7px; min-width: 90px; background: var(--bg2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.admin .vbar span { display: block; height: 100%; background: var(--amber2); }
/* 관리자 편집 테이블: 입력이 셀을 넘치지 않게 + 넓은 표는 섹션 가로 스크롤
   (10열 게시판 표가 컨테이너 밖으로 잘리던 것 방지, 2026-10-16). */
.admin table.board-list input:not([type="checkbox"]):not([type="hidden"]) {
  width: 100%; min-width: 64px; box-sizing: border-box;
}
.admin table.board-list select { max-width: 160px; box-sizing: border-box; }
.admin table.board-list td { white-space: nowrap; }
.admin { overflow-x: auto; }

/* ---------------------------------------------------- destination widget --- */
.community { margin-top: 20px; padding: 16px clamp(14px, 2.2vw, 20px) 18px; }
.community h2 { margin: 0 0 10px; font-size: 18px; border: 0; padding: 0; }
.community .more-row { margin: 12px 0 0; }

/* -------------------------------------------------------------- lightbox -- */
.lightbox {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px; background: rgba(6, 12, 22, .93); padding: 20px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 96vw; max-height: 82vh; border-radius: 12px; box-shadow: var(--shadow); }
.lb-close {
  position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--ink); font-size: 22px; cursor: pointer;
}
.lb-cap { color: var(--sub); font-size: 13px; margin: 0; }

/* -------------------------------------------- share dialog (2026-10-17) --- */
/* Same overlay recipe as .lightbox. The QR canvas keeps its intrinsic pixel
   size (no stretch, stays crisp); only narrow phones cap it via max-width. */
.share-box {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 12, 22, .93); padding: 20px;
}
.share-box[hidden] { display: none; }
.share-card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  padding: 18px 20px; max-width: 320px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.share-t { font-size: 15px; }
.share-qr { max-width: 82vw; height: auto; border-radius: 8px; background: #fff; }
.share-url { font-size: 12px; color: var(--sub); margin: 0; word-break: break-all; }
.share-err { font-size: 12px; color: var(--sub); margin: 0; }
.share-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ---------------------------------------------------- a11y & responsive --- */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .tab:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
::selection { background: rgba(255, 176, 32, .35); }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media (max-width: 1080px) { :root { --side: 234px; } }
@media (max-width: 940px) {
  .drawer-btn { display: inline-flex; }
  /* brand가 숨겨지는 has-side 화면에서 헤더 홈 진입점을 노출. */
  body.has-side .mobile-home { display: inline-flex; }
  .topnav { order: 3; flex-basis: 100%; margin-left: 0; }
  .layout { display: block; padding: 14px 12px 32px; }
  /* 모바일 좌우 여백 0 (2026-10-15 운영자 요청): 게시판 리스트/본문/글쓰기/
     글읽기가 화면 가득 참. main 요소가 .wrap 이라 이중 패딩을 함께 해제. */
  body.has-side .layout { padding-left: 0; padding-right: 0; }
  body.has-side .wrap { padding-left: 0; padding-right: 0; }
  .side-col { display: block; width: auto; }
  .side-col .rail-ad { display: none; }
  /* Phone drawer starts BELOW the header band (its real height via --nav-header-h
     set by bbs.js) so the band can never cover the menu's top (account card). */
  .rail {
    position: fixed; inset: var(--nav-header-h, 54px) auto 0 0;
    width: min(84vw, 320px); max-height: none; z-index: 40;
    transform: translateX(-105%); transition: transform .2s ease; padding: 14px 12px 28px;
    background: var(--bg2); border-right: 1px solid var(--line); border-radius: 0; overflow: auto;
  }
  body.nav-open .rail { transform: translateX(0); box-shadow: 22px 0 60px rgba(0, 0, 0, .5); }
  body.nav-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(4, 10, 18, .6); z-index: 30;
  }
  /* 모바일 헤더: 상단 고정 해제(2026-10-15 운영자 요청) + 메뉴 버튼 옆 페이지
     (게시판) 이름만 노출. topnav(홈/사진/지역별 여행/검색/계정)와 brand 는
     드로어(레일)로 대체되므로 숨김 - 검색은 /search 로 접근. */
  #site-header { position: static; }
  body.has-side .topnav, body.has-side .brand { display: none; }
  body.has-side .theme-toggle { margin-left: auto; }
  .header-title {
    display: block; flex: 1 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 15px;
  }
  body.nav-open { overflow: hidden; }
  /* Keep the header above the scrim while the drawer is open (the header is not
     sticky on phones anymore; the drawer opens from the button near the page
     top, overlay click / Esc close it). */
  body.nav-open #site-header { z-index: 45; }
}
@media (max-width: 720px) {
  .topsearch { margin-left: 0; width: 100%; }
  .topsearch input { width: 100%; }
  .two-col { grid-template-columns: 1fr; }
  .bbs-row { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
  .gallery-2 { grid-template-columns: 1fr; }
  table.board-list thead { position: absolute; left: -9999px; }
  table.board-list, table.board-list tbody { display: block; width: auto; }
  /* 모바일 한 줄 행: 제목(말줄임) | 작성자 | 작성일 - tr 을 flex 행으로, 칸은 아이템. */
  table.board-list tr { display: flex; align-items: center; gap: 8px; width: auto; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  table.board-list td { display: block; width: auto; padding: 0; }
  /* 제목칸이 남는 폭을 흡수해 말줄임, 작성자(+작성일)는 오른쪽 끝 정렬. */
  table.board-list .c-title, table.board-list .ttitle { flex: 0 1 auto; min-width: 0; }
  table.board-list .c-who, table.board-list .twho { margin-left: auto; }
  /* 모바일 카드형: 숫자 열(추천/조회)은 숨기고 제목 + 작성자·작성일 한 줄로. */
  table.board-list .c-like, table.board-list .c-views,
  table.board-list .tlike, table.board-list .tviews { display: none; }
  /* 알뜰구매 deal-list: 종류/가격 전용 칼럼 숨김 - 제목 칸의 inline 배지·가격 사용. */
  table.board-list.deal-list .c-cat, table.board-list.deal-list .c-price { display: none; }
  /* Mobile lists: photo badges keep only the camera icon (no count). */
  .badge.photo .pn, .pic-count .pn { display: none; }
  table.board-list .excerpt { margin-left: 0; }
  /* 보류행(제목 <a> 없음)과 여행 접두어도 한 줄로 유지(말줄임). */
  table.board-list tr.is-blocked .c-title, table.board-list tr.is-blocked .ttitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.board-list.trip-list .tplace-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  table.board-list td.empty { flex: 1 1 auto; }
  table.board-list tr.gg-ad-row td { flex: 1 1 auto; }
  /* 짝수 행 음영: 셀 단위(bg2 사각 조각) 대신 행 전체에. */
  table.board-list tbody tr:nth-child(even) td { background: transparent; }
  table.board-list tbody tr:nth-child(even) { background: var(--bg2); }
  /* 관리자 편집 테이블은 카드 변형 제외 (2026-10-16): input 이 흩어져
     깨지는 게 /admin/boards UI 붕괴의 원인이었다. 목록 화면 전용 변형. */
  .admin table.board-list { display: table; width: 100%; }
  .admin table.board-list thead { position: static; }
  .admin table.board-list tr { display: table-row; width: auto; padding: 0; }
  .admin table.board-list th, .admin table.board-list td { display: table-cell; padding: 8px 10px; }
  .li-thumb { width: 40px; height: 40px; flex-basis: 40px; }
  .thread, .comments, .write, .auth, .mine, .search, .admin, .support, .terms, .bcard, .two-col section,
  .community, .photos, .member { border-radius: 12px; }
}

/* ------------------------------------------------------ write editor ------ */
.write-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.write-main { min-width: 0; display: grid; gap: 12px; align-content: start; }
.write-title input { font-size: 17px !important; font-weight: 700; }
.write-side {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; display: grid; gap: 14px; align-content: start; font-size: 13px; color: var(--sub);
}
.write-side .ws-block { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.write-side .ws-block:first-child { border-top: 0; padding-top: 0; }
.ws-title { margin: 0; font-weight: 800; color: var(--ink); font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.ws-badge {
  background: rgba(255, 176, 32, .18); color: var(--amber2); border-radius: 999px;
  font-size: 11.5px; font-weight: 800; padding: 2px 8px;
}
.ws-field { display: grid; gap: 6px; }
.ws-field > span { font-weight: 800; color: var(--ink); font-size: 13px; }
.ws-field input, .ws-field select, .ws-urlrow input, .ws-attach input[type=file] {
  width: 100%; padding: 9px 12px; border-radius: 10px; font: inherit; font-size: 14px;
  background: var(--bg4); border: 1px solid var(--line); color: var(--ink); box-sizing: border-box;
}
.ws-field input:focus, .ws-field select:focus, .ws-urlrow input:focus {
  outline: none; border-color: var(--amber); box-shadow: var(--ring);
}
.ws-note { margin: 0; font-size: 12px; line-height: 1.6; }
.ws-note b { color: var(--ink2); }
.ws-urlrow { display: flex; gap: 6px; }
.ws-urlrow input { flex: 1; min-width: 0; }
.ws-urlrow .btn { min-height: 0; padding: 8px 14px; }
.ws-ops { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.ws-ops .btn { flex: 1; }

/* inline image dropzone / uploaded thumbnails / keep list */
.ws-uploader { display: grid; gap: 8px; }
.dz {
  border: 1px dashed var(--line); border-radius: 12px; padding: 14px 12px; text-align: center;
  background: var(--bg4); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.dz:hover, .dz.is-over { border-color: var(--amber); background: var(--bg3); }
.dz:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.dz-hint { margin: 0 0 6px; color: var(--ink2); font-size: 13px; }
.dz-note { margin: 0; font-size: 12px; line-height: 1.7; }
.dz-note b { color: #E3455F; }
.ws-files { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-item { position: relative; display: inline-flex; }
.ws-item img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line);
  cursor: pointer; /* 클릭 = <imgN> 마커를 커서 위치에 삽입 (2026-10-16) */
}
.ws-rm { position: absolute; top: -7px; right: -7px; cursor: pointer; }
.ws-rm input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.ws-rm::after {
  content: "\2715"; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--bg2); border: 1px solid var(--line);
  color: var(--danger); font-size: 11px; font-weight: 800; pointer-events: none;
}
.ws-rmbtn {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--line); color: var(--danger); font-size: 11px;
  font-weight: 800; line-height: 1; cursor: pointer; padding: 0;
}
.ws-rmbtn:hover { border-color: var(--danger); background: var(--bg4); }

/* 전용 업로더 큐 카드 (2026-10-23g): 진행 바 + 상태 배지 + 재시도/삭제.
 * 서버 렌더 keep 칩(구형)은 is-card가 없어 기존 콤팩트 모양 그대로다. */
.ws-item.is-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg2); width: 148px; box-sizing: border-box;
}
.ws-item.is-card img, .ws-item.is-card .ws-vicon {
  width: 100%; height: 84px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); cursor: pointer;
}
.ws-item.is-card .ws-vicon {
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: var(--bg3);
}
.ws-item.is-card .ws-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-item.is-card .ws-meta b {
  font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-item.is-card .ws-meta i { font-style: normal; font-size: 11px; color: var(--sub); }
.ws-item.is-card .ws-st { font-size: 11px; font-weight: 700; color: var(--sub); }
.ws-item.is-err .ws-st { color: var(--danger); }
.ws-prog { display: block; height: 5px; border-radius: 3px; background: var(--bg4); overflow: hidden; }
.ws-prog i {
  display: block; width: 0; height: 100%; border-radius: 3px;
  background: var(--amber); transition: width .2s ease;
}
.ws-item.is-err .ws-prog i { background: var(--danger); }
.ws-retry {
  position: absolute; top: -7px; left: -7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink); font-size: 12px;
  font-weight: 800; line-height: 1; cursor: pointer; padding: 0;
}
.ws-retry:hover { border-color: var(--amber2); background: var(--bg4); }
.ws-item.is-err { border-color: var(--danger); }

/* 본문 동영상 플레이어 (2026-10-23g): src는 뷰 시점 토큰 주입, 로드 전엔
 * 종횡비 placeholder(inline style aspect-ratio)로 자리를 잡는다. */
.md-vid { margin: 10px 0; }
.md-vid video {
  display: block; width: 100%; max-width: 720px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #000; aspect-ratio: 16 / 9;
}
.md-vid figcaption { font-size: 12px; color: var(--sub); margin-top: 4px; }
/* 갤러리 동영상 항목: 포스터 + 재생 배지 */
.shot.is-video { position: relative; }
.vid-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; pointer-events: none;
}
/* 라이트박스 동영상 재생 */
.lightbox video {
  display: block; max-width: min(92vw, 960px); max-height: 82vh;
  border-radius: var(--radius-sm); background: #000;
}

/* markdown editor */
.md-editor { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); overflow: hidden; }
/* AI 정리 미니 팝업: 진행(스피너)/완료/실패를 에디터 정중앙에 띄운다 */
.ai-pop {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 6;
  display: flex; align-items: center; gap: 8px;
  max-width: min(460px, calc(100% - 20px));
  padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 700;
  color: var(--ink); background: var(--bg3);
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  box-shadow: var(--shadow); animation: ai-pop-in .18s ease;
}
.ai-pop[hidden] { display: none; }
@keyframes ai-pop-in { from { opacity: 0; } }
.ai-pop-i { flex: none; width: 16px; height: 16px; font-size: 14px; line-height: 16px; text-align: center; }
.ai-pop.is-busy .ai-pop-i {
  border: 2px solid var(--line); border-top-color: var(--amber);
  border-radius: 50%; animation: ai-pop-spin .8s linear infinite;
}
@keyframes ai-pop-spin { to { transform: rotate(360deg); } }
.ai-pop.is-ok .ai-pop-i::before { content: "✅"; }
.ai-pop.is-err .ai-pop-i::before { content: "⚠️"; }
.ai-pop.is-ok { border-left-color: var(--green); }
.ai-pop.is-err { border-left-color: var(--danger); }
.md-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px;
  background: var(--bg3); border-bottom: 1px solid var(--line);
}
.md-tabs { display: inline-flex; background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.md-tab {
  padding: 6px 14px; font-size: 13px; font-weight: 800; color: var(--sub); background: transparent;
  border: 0; cursor: pointer;
}
.md-tab:hover { color: var(--ink); }
.md-tab.is-on { background: var(--amber); color: #241A00; }
.md-tools { display: flex; flex-wrap: wrap; gap: 2px; }
.md-tool {
  min-width: 32px; min-height: 32px; padding: 0 8px; display: inline-flex; align-items: center;
  justify-content: center; border: 0; background: transparent; color: var(--ink2); font-size: 13.5px;
  font-weight: 800; border-radius: 8px; cursor: pointer;
}
.md-tool:hover { background: var(--bg2); color: var(--ink); }
/* 토글 상태 표기 (이모티콘 😊 버튼: 바가 열려 있는 동안 강조, 2026-10-16). */
.md-tool.is-on { background: var(--bg2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
/* AI 자동 정리 진행 중 (✨버튼): 중복 클릭 차단 + 진행 표시. */
.md-tool.is-busy { opacity: .5; pointer-events: none; animation: md-ai-pulse 1s ease infinite; }
@keyframes md-ai-pulse { 50% { opacity: .85; } }
.md-pane textarea {
  display: block; width: 100%; min-height: 420px; padding: 14px 16px; border: 0; background: transparent;
  resize: vertical; font: inherit; font-size: 15px; line-height: 1.7; color: var(--ink); box-sizing: border-box;
}
.md-pane textarea:focus { outline: none; }
.md-pane textarea.is-over { color: var(--danger); }
.md-preview {
  min-height: 420px; padding: 14px 16px; line-height: 1.78; color: var(--ink2);
  font-size: 15px; word-break: break-word; overflow-wrap: anywhere;
}
.md-preview p { margin: 0 0 14px; }
.md-preview h2, .md-preview h3 { color: var(--ink); margin: 22px 0 8px; }
.md-preview a { color: var(--amber2); text-decoration: underline; }
.md-preview img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 10px auto; }
.md-preview pre { background: var(--bg4); padding: 12px; border-radius: 10px; overflow: auto; border: 1px solid var(--line); }
.md-preview blockquote { border-left: 3px solid var(--amber); margin: 14px 0; padding: 4px 14px; color: var(--sub); }
.md-count {
  text-align: right; padding: 6px 10px 8px; color: var(--sub); font-size: 12.5px;
  border-top: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.md-count b { color: var(--ink); }
.md-count.is-over b, .md-count.is-over span { color: #E3455F; }
.md-editor.is-max {
  position: fixed; inset: 0; z-index: 60; border-radius: 0; border: 0; display: flex; flex-direction: column;
}
.md-editor.is-max .md-pane { flex: 1; overflow: auto; }
.md-editor.is-max .md-pane textarea { min-height: 100%; height: 100%; }
.md-editor.is-over { border-color: var(--amber); }

/* editor media strip (toolbar upload + keep chips) */
.md-media { padding: 10px 12px 0; display: grid; gap: 8px; }
.md-media .ws-files { margin: 0; }
.md-up-hint { margin: 0; font-size: 12px; color: var(--sub); min-height: 15px; }
/* 업로드된 이미지 트레이 헤더: 개수 표기 + 재삽입 안내 (2026-10-16) */
.md-up-head { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--sub); }
.md-up-head b { color: var(--ink2); font-weight: 800; }
.md-up-head #md-up-count { color: var(--amber2); font-weight: 800; }
.md-up-sub { font-size: 11.5px; color: var(--sub); }
/* 글쓰기 폼의 독립 이미지 필드 (제목 → 이미지 → 에디터 순서, 2026-10-16) */
.write-media { margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); }
.write-media .md-media { padding: 12px 14px; }
/* 0장 = 필드 숨김 (업로드 시작/실패 시에는 bbs.js가 다시 펼친다, 2026-10-16) */
.write-media.is-empty { display: none; }

/* write-form meta bar: 출처 / CCL / 등록·취소 (editor full width below) */
.write-meta {
  display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: 10px;
  align-items: end; margin: 0 0 12px;
}
.write-meta .ws-ops { flex-wrap: nowrap; }
.write-grid .write-meta { grid-template-columns: 1fr; }
@media (max-width: 720px) { .write-meta { grid-template-columns: 1fr; } }

/* 공지사항 글쓰기/수정 폼: 노출 위치 선택 (공지사항에서만/전체/특정 지정) */
.notice-scope {
  background: var(--bg4); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin: 0 0 12px;
}
.notice-scope .ns-title { margin: 0 0 8px; font-weight: 800; color: var(--ink); font-size: 13.5px; }
.notice-scope .ns-opts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.notice-scope .ns-opt {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700;
  color: var(--ink2); cursor: pointer;
}
.notice-scope .ns-opt input { accent-color: var(--amber); }
.notice-scope .ns-targets { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.notice-scope .ns-hint { margin: 0 0 8px; font-size: 12px; color: var(--sub); }
.notice-scope .ns-grid { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.notice-scope .ns-tgt {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2);
  cursor: pointer;
}
.notice-scope .ns-tgt input { accent-color: var(--amber); }

/* 비게시판 페이지 공지 바 (예: 유튜브 여행 채널) - 게시판 목록과 같은 공지
   마크 + 제목 한 줄(ellipsis). 공지 1건 = 한 행(badge + 제목). */
.notice-bar {
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(46, 92, 138, .10); border: 1px solid rgba(46, 92, 138, .38);
  border-radius: var(--radius); padding: 10px 14px; margin: 0 0 14px;
}
.notice-bar .nb-item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.notice-bar .nb-t {
  color: var(--ink2); font-size: 13.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.notice-bar .nb-item:hover .nb-t { color: var(--amber2); }

/* 알뜰구매: 글쓰기/수정 폼의 가격·상품 링크 입력 */
.deal-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px;
}
@media (max-width: 720px) { .deal-fields { grid-template-columns: 1fr; } }

/* 숙소·민박: 글쓰기/수정 폼의 숙소 정보 입력 (딜 필드와 같은 2열 그리드,
 * 자식 라벨은 ws-field 공용 스타일 재사용). 주소+지도는 .stay-loc 별도 블록
 * (trip-write 지도 스타일을 섹션 클래스로 재사용). */
.stay-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px;
}
.stay-loc { margin: 0 0 12px; }
.stay-loc > .ws-field { margin: 0 0 12px; }
/* 숙소 대표 이미지 전용 업로드 필드 (본문 사진 트레이와 별개). */
.stay-cover-field { margin: 0 0 12px; }
.stay-cover-field .ws-field { margin: 0 0 6px; }
.stay-cover-field input[type=file] { font: inherit; font-size: 13.5px; color: var(--ink2); }
.stay-cover-cur { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.stay-cover-cur img { border-radius: 8px; border: 1px solid var(--line); display: block; }
.stay-cover-rm { font-size: 12.5px; color: var(--danger); cursor: pointer; white-space: nowrap; }
.stay-cover-hint { margin: 0; font-size: 12px; line-height: 1.6; color: var(--sub); }
/* 숙소 본문 위 '이 지역 위키' 정식 버튼 (크럼 텍스트 링크 대체). */
/* 이 지역 위키 + 예약하기 토글: 한 줄 중앙 정렬 (2026-10-18 운영자 지시). */
.stay-wiki { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 12px 0; }
.stay-wiki .btn { margin: 0; }
@media (max-width: 720px) { .stay-fields { grid-template-columns: 1fr; } }

/* 숙소·민박 본문 정보 테이블: 본문 위 spec-sheet 형태 (행: 라벨 120px + 값) */
/* 숙소 대표 이미지: 본문 상단(정보 표 위) 풀와이드 16:9 커버 (2026-10-17f).
 * 상단 히어로이므로 lazy 로딩하지 않는다. */
.stay-cover {
  margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--bg4); aspect-ratio: 16 / 9;
}
.stay-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stay-table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 14px;
  background: var(--bg4); border: 1px solid var(--line); border-radius: 12px;
  font-size: 14px;
}
.stay-table caption {
  caption-side: top; text-align: left; padding: 0 0 6px;
  font-size: 12.5px; font-weight: 800; color: var(--sub);
}
.stay-table th, .stay-table td {
  padding: 9px 14px; border-top: 1px solid var(--line); text-align: left;
  vertical-align: top;
}
.stay-table th { width: 120px; font-weight: 800; color: var(--sub); white-space: nowrap; }
.stay-table td { color: var(--ink); word-break: break-word; }
.stay-table tr:first-child th, .stay-table tr:first-child td { border-top: 0; }
.stay-table td a { color: var(--amber2); font-weight: 700; }
/* 주소 복사 버튼: post-place 위치 카드 + stay-table 주소 행 (2026-10-17k,
 * 지도에서 보기 링크 대체; 복사 로직은 bbs.js initCopyAddr). */
button.copy-addr {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: var(--amber2); font-weight: 700; cursor: pointer;
}
button.copy-addr:hover { text-decoration: underline; }

/* 알뜰구매 본문 카드: 가격 + 상품 링크 + 종료 상태/버튼 */
.deal-box {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--bg4); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; margin: 0 0 12px;
}
.deal-box.is-ended { opacity: .72; }
.deal-box .deal-label { font-size: 12.5px; font-weight: 800; color: var(--sub); }
.deal-box .deal-price { font-size: 15px; font-weight: 800; color: var(--ink); }
.deal-box .btn { margin: 0; }

/* 목록 행: 카테고리(종류) 배지 / 가격 / 종료 */
.badge.cat { background: #FFF4E0; border: 1px solid #F0CE96; color: #8A5A00; font-weight: 800; white-space: nowrap; }
.badge.ended { background: var(--bg4); border: 1px solid var(--line); color: var(--sub); font-weight: 800; }
/* 숙소 목록 지역 배지: 주소에서 추출한 대/소지역 (경기 · 원주시). */
.badge.region { background: #EAF4FF; border: 1px solid #B7D3F0; color: #1E5E9E; font-weight: 700; white-space: nowrap; }
.badge.stay-ok { background: #CDEEDB; border: 1px solid #A8D8BC; color: #177A46; font-weight: 800; white-space: nowrap; }
.badge.ended .ic { width: .9em; height: .9em; vertical-align: -.08em; }
/* 할인율 배지 + 정가 취소선 (2026-10-19): 목록 제목/딜박스 공용. */
.badge.off { background: #E3455F; color: #fff; font-weight: 800; white-space: nowrap; }
.deal-box .deal-list-price { color: var(--sub); font-size: 12.5px; margin-left: 6px; }
.deal-price { font-size: 12px; font-weight: 800; color: #E3455F; white-space: nowrap; }

/* 행사 상태 배지 + 기간 (2026-10-22): 보드 목록 제목 칸과 홈 최근글 박스 공용.
   진행전=예정(파랑), 진행중=진행(초록), 마감=종료(회색, badge.ended와 동일). */
.badge.ev-pre { background: #EAF4FF; border: 1px solid #B7D3F0; color: #1E5E9E; font-weight: 700; white-space: nowrap; }
.badge.ev-on { background: #E8F7EE; border: 1px solid #B2DFC0; color: #1B7A3D; font-weight: 800; white-space: nowrap; }
.badge.ev-end { background: var(--bg4); border: 1px solid var(--line); color: var(--sub); font-weight: 800; white-space: nowrap; }
.ev-period { color: var(--sub); font-size: .82em; white-space: nowrap; }

/* 행사 글 하단 '사이트 연결' 버튼 (2026-10-22): 본문 아래 중앙 정렬. */
.ev-link { text-align: center; margin: 16px 0 2px; }
.ev-link .btn { min-width: 180px; }

/* 알뜰구매 상품형 칼럼(deal-list): 종류/가격 전용 칼럼은 PC 전용(≥721px)이고,
 * 제목 칸 안의 inline 배지·가격은 PC에서 숨긴다. 모바일(≤720px)은 반대로
 * 전용 칼럼을 숨기고 제목 칸의 inline 표기로 카드를 채운다(아래 미디어 블록).
 * 종류 칸은 내용에 맞게 수축(width:1% + nowrap)한다. */
.board-list.deal-list .c-cat { width: 1%; white-space: nowrap; }
.board-list.deal-list .c-price { width: 120px; text-align: right; }
.board-list.deal-list .c-price .deal-price { font-size: 12.5px; }
@media (min-width: 721px) {
  .board-list.deal-list .c-title .badge.cat,
  .board-list.deal-list .c-title .deal-price { display: none; }
}

/* 알뜰구매 카테고리 탭(종류별 보기) - 검색·글쓰기 줄(board-tools)과 같은 줄:
 * board-tools 의 align-items:center 로 세로 중앙 정렬된다. */
.board-head .cat-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cat-tabs .tab { min-height: 30px; padding: 5px 11px; font-size: 12.5px; border-radius: 999px; }

/* 숙소 목록: 대지역/소지역 전용 칸 — PC(≥721px)에서만 보이고 모바일에서는
 * 칸을 숨겨 제목 칸의 지역 배지로 대체 (딜 목록 칼럼/inline 스왑과 동일 규약).
 * 상호 칸은 공용 c-title(제목 칸)을 그대로 쓴다. */
.board-list.stay-list .c-region,
.board-list.stay-list .c-city {
  width: 1%; white-space: nowrap; color: var(--sub); font-weight: 700;
}
@media (min-width: 721px) {
  .board-list.stay-list .c-title .badge.region { display: none; }
}
@media (max-width: 720px) {
  .board-list.stay-list .c-region,
  .board-list.stay-list .c-city { display: none; }
}

/* 알뜰구매 목록 칼럼 셀 세로 중앙 정렬 (종류 배지/가격을 행 중간에) */
table.board-list.deal-list td { vertical-align: middle; }

/* 쇼핑몰 칩: 상품 링크 host에서 판별한 몰 이름 (네이버/쿠팡/...).
 * 알뜰구매 상품명 앞(\"쿠팡 \" + 제목)과 본문 딜 카드의 상품 보기 링크 앞에 붙는다. */
.mall { font-size: 11.5px; font-weight: 700; color: var(--sub); margin-right: 5px; }
.c-title .mall { margin-right: 6px; }
.deal-box .mall { font-size: 12.5px; }

/* 알뜰구매 상품 썸네일: 상품 링크 og:image 를 서버에 1회 캐시 (uploads/dealthumbs).
 * 목록=160px 파생, 본문 카드=원본. 첫 span(first-of-type flex:1) 규칙을 덮어써
 * 44px 고정 카드로 붙는다. */
.c-title a > span.deal-thumb {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg4); overflow: hidden;
}
.c-title a > span.deal-thumb img,
.deal-box .deal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deal-box .deal-thumb {
  display: inline-block; flex: 0 0 72px; width: 72px; height: 72px;
  border-radius: 9px; border: 1px solid var(--line); background: var(--bg4); overflow: hidden;
}
@media (max-width: 720px) {
  .c-title a > span.deal-thumb { flex: 0 0 40px; width: 40px; height: 40px; }
}

/* 본문과 댓글 사이의 가로 배너 (banner_thread 위치; 판매 전엔 기본 이미지) */
.thread-banner { margin: 14px 0; }
.thread-banner img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line); }
@media (max-width: 720px) { .thread-banner { margin: 10px 0; } }

/* 배너 이미지 세트 (1~4장 랜덤 회전): 등록창 미리보기 + 관리 세트 편집 */
.pset-preview { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.pset-preview figure { margin: 0; }
.pset-preview img { width: 120px; height: 72px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; }
.pset-view { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.pset-view img { width: 200px; height: 120px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; }
.pset-box { margin: 12px 0 20px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); }
.pset-box h2 { margin: 0 0 8px; font-size: 14.5px; }
.pset-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pset-item img { width: 160px; height: 96px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; display: block; }
.pset-item .pset-rm { display: block; font-size: 12px; padding: 4px 0; color: var(--sub); }
.pset-item .pset-rm input { accent-color: var(--amber); }
.pset-n { color: var(--sub); }

/* 종료된 알뜰구매 글: 제목/본문 회색 처리 (운영자 요청) */
.thread.is-deal-ended h1 { color: var(--sub); }
.thread.is-deal-ended .meta { opacity: .8; }
.thread.is-deal-ended .tbody { color: var(--sub); }
.thread.is-deal-ended .tbody img { opacity: .7; }

/* moderated (보류) posts: shown in lists but not clickable for members */
.hide-note { color: var(--sub); font-weight: 600; }
tr.is-blocked td { color: var(--sub); }
.post-card.is-blocked { opacity: .62; cursor: default; }
.post-card.is-blocked:hover { border-color: var(--line); }
.prow.is-blocked { opacity: .62; cursor: default; }

/* youtube embed */
.yt-embed { position: relative; padding-top: 56.25%; margin: 14px 0; border-radius: 12px; overflow: hidden; background: var(--bg4); }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 940px) {
  .write-grid { grid-template-columns: 1fr; }
}

/* Account area (개인정보 / 보안 / 쪽지 / 활동내역) - 2026-10-03 */
.acc-tabs{display:flex;gap:6px;margin:0 0 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.acc-tabs a{padding:8px 14px;color:var(--sub);font-size:14px;border-radius:10px 10px 0 0;border:1px solid transparent;border-bottom:0}
.acc-tabs a:hover{color:var(--ink);background:var(--bg4)}
.acc-tabs a.is-on{color:var(--amber2);border-color:var(--line);background:var(--bg2);font-weight:700}
.account-block{padding:18px clamp(14px,2.2vw,24px) 22px}
.account-block h1{margin:0 0 14px}
.form-stack p{margin:0 0 12px}
.form-stack label{display:block;color:var(--ink2);font-size:13px}
.form-stack input:not([type="checkbox"]):not([type="radio"]),.form-stack textarea{width:min(100%,560px)}
.stat-grid{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.stat-grid li{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:center}
.stat-grid b{display:block;font-size:20px;color:var(--amber2)}
.stat-grid span{font-size:12px;color:var(--sub)}
.msg-bar{display:flex;gap:10px;align-items:center;margin:0 0 12px;flex-wrap:wrap}
.msg-list{list-style:none;margin:0;padding:0}
.msg-row{border-bottom:1px solid var(--line)}
.msg-row:last-child{border-bottom:0}
.msg-row a{display:block;padding:10px 8px;color:var(--ink)}
.msg-row a:hover{background:var(--bg2);border-radius:8px}
.msg-row strong{font-size:14px}
.msg-row .msg-user{font-weight:400;color:var(--sub)}
.msg-row .msg-time{float:right;color:var(--sub);font-size:12px}
.msg-row.is-unread a{font-weight:600;background:rgba(255,176,32,.06);border-radius:8px}
.msg-row p{margin:2px 0 0;color:var(--ink2);font-size:13.5px}
.msg-view .msg-meta{margin:0 0 10px}
.msg-view .msg-body{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--bg2);min-height:120px}
.msg-ops{margin:14px 0 0;display:flex;gap:8px}
.pill{display:inline-block;min-width:22px;padding:2px 7px;border-radius:999px;background:var(--danger);color:#fff;font-size:12px;text-align:center}
.msg-badge{display:inline-block;min-width:17px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-size:11px;text-align:center;line-height:17px;margin-left:4px}
.topnav .nav-msg{color:var(--amber2)}
.activity .feed a{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.activity .feed .tag{font-size:11px;color:var(--amber2);background:rgba(255,176,32,.12);border-radius:6px;padding:1px 7px}

/* Nickname popup menu (member-menu) - 2026-10-03 */
.member-menu{position:relative;display:inline-flex;vertical-align:baseline}
.nick-link{border:0;background:none;padding:0;color:var(--amber2);font:inherit;cursor:pointer}
.nick-link:hover{text-decoration:underline}
.nick-link[aria-expanded="true"]{color:var(--ink)}
.mm-pop{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);min-width:150px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.14);padding:6px;z-index:60}
.member-menu[data-open] .mm-pop{display:block}
.mm-pop .mm-id{padding:6px 10px 8px;color:var(--sub);font-size:12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.mm-pop a,.mm-pop form{display:block}
.mm-pop a,.mm-pop button{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:7px;color:var(--ink);font-size:13.5px;text-decoration:none}
.mm-pop a:hover,.mm-pop button:hover{background:var(--bg4);color:var(--ink)}
.mm-pop button.linkish{border:0;background:none;color:var(--danger)}
.mm-pop button.linkish:hover{background:var(--bg4);color:var(--danger)}
@media (max-width:720px){.mm-pop{left:auto;right:0;transform:none}}

/* 쪽지 쓰기 폼 + 모달 - 2026-10-03 */
.msg-form{margin:0}
.msg-form p{margin:0 0 14px}
.msg-form label{display:block;font-size:13px;color:var(--ink2);margin:0 0 6px}
.msg-form input,.msg-form textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:12px;font:inherit;font-size:15px;line-height:1.6;background:var(--bg2);border:1px solid var(--line);color:var(--ink);resize:vertical}
.msg-form input:focus,.msg-form textarea:focus{outline:none;border-color:var(--amber);box-shadow:var(--ring)}
.msg-form textarea{min-height:180px}
.msg-form .mf-hint{font-size:12.5px;color:var(--sub)}
.msg-form .mf-ops{display:flex;gap:8px;margin:16px 0 0}
.msg-modal-overlay{position:fixed;inset:0;background:rgba(15,25,40,.5);z-index:90}
.msg-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(92vw,560px);max-height:88vh;overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 64px rgba(10,20,40,.3);z-index:91}
.msg-modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700;position:sticky;top:0;background:var(--bg2)}
.msg-modal .mm-x{border:0;background:none;font-size:22px;line-height:1;color:var(--sub);cursor:pointer;padding:2px 6px;border-radius:8px}
.msg-modal .mm-x:hover{color:var(--ink);background:var(--bg4)}
.msg-modal-body{padding:16px 18px 18px}

/* 유튜브 영상 재생 모달 (site.js): /yt 카드의 .yt-v 클릭 → youtube-nocookie iframe. */
.yt-modal-overlay{position:fixed;inset:0;background:rgba(15,25,40,.55);z-index:90}
.yt-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(92vw,880px);background:var(--bg2);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 64px rgba(10,20,40,.3);z-index:91;overflow:hidden}
.yt-modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700}
.yt-modal-head strong{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.yt-modal-x{border:0;background:none;font-size:22px;line-height:1;color:var(--sub);cursor:pointer;padding:2px 6px;border-radius:8px}
.yt-modal-x:hover{color:var(--ink);background:var(--bg4)}
.yt-modal-player{aspect-ratio:16/9;background:#0b121c}
.yt-modal-player iframe{display:block;width:100%;height:100%;border:0}

/* 임시 배너 (이미지): 메뉴 하단 가로형 + 오른쪽 세로형 - 광고 코드로 교체 예정 */
.rail-ad {
  border-radius: 12px; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--line);
}
.rail-ad img { display: block; width: 100%; height: auto; }
.ad-right {
  flex: 0 0 160px; width: 160px; align-self: flex-start;
  position: sticky; top: calc(50vh - 300px);
}
.ad-right img {
  width: 160px; height: 600px; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid var(--line);
}
@media (max-width: 1160px) { .ad-right { display: none; } }

/* 오른쪽 레일: 날씨 위젯 + 세로 배너 묶음 (2026-10-21). 위젯이 있으면 배너가
   그 아래로 내려가고, 레일 전체가 스크롤 내려도 헤더 바로 아래(top:68px —
   sticky 헤더 ~56px + 12px 간격)에 고정된다 (2026-10-21f 운영자 요청). */
.rail-right {
  flex: 0 0 160px; width: 160px; align-self: flex-start;
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 68px;
}
.rail-right .ad-right { position: static; }
@media (max-width: 1160px) { .rail-right { display: none; } }

/* 날씨 위젯: 지역을 순차 순환 (site.js). 아이콘 = assets/img/weather/*.png */
.wx-rail {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px 12px;
}
.wx-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.wx-head span { font-weight: 400; color: var(--sub); font-size: 12px; }
.wx-head:hover { color: var(--amber2); }
.wx-now {
  display: grid; grid-template-columns: 52px 1fr; gap: 2px 10px;
  align-items: center; margin-top: 8px;
}
.wx-ic { width: 52px; height: 52px; border-radius: 50%; display: block; }
.wx-loc { font-size: 15px; font-weight: 700; color: var(--ink); }
.wx-vals { display: flex; flex-direction: column; font-size: 12px; color: var(--sub); line-height: 1.5; }
.wx-vals b { font-size: 13px; color: var(--ink); }

/* 환율 위젯 (2026-10-29; 2026-10-30 한국은행 ECOS): 오른쪽 레일 하단, 한국은행 매매기준율 (1달러/100엔 기준) */
.fx-rail {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px 12px;
}
.fx-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.fx-head span { font-weight: 400; color: var(--sub); font-size: 11px; }
.fx-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.fx-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.fx-row .fx-k { color: var(--sub); }
.fx-row .fx-v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-update {
  margin-top: 6px; font-size: 10px; color: var(--sub);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* 본문 상단 전국 날씨 지도 (오늘의 날씨 보드 전용, 2026-10-21) */
.wx-map {
  margin: 0 0 14px; padding: 12px 12px 10px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
}
.wx-map svg { display: block; width: min(100%, 440px); margin: 0 auto; height: auto; }
.wx-map .wx-kr path { fill: var(--bg3); stroke: var(--line); stroke-width: 1.2; }
.wx-map .wx-kr path:hover { fill: var(--amber); }
.wx-map figcaption { margin-top: 8px; text-align: center; font-size: 12px; color: var(--sub); }

/* Board-scoped search (작성자/제목 열의 작은 검색 필드, .board-tools 안) */
.board-search{display:flex;gap:6px;flex:none}
.board-search input{width:min(200px,24vw);padding:7px 12px;border-radius:999px;font:inherit;font-size:13px;background:var(--bg3);border:1px solid var(--line);color:var(--ink)}
.board-search button{flex:none;width:34px;height:34px;border:0;border-radius:999px;cursor:pointer;background:var(--amber);color:#241A00;display:inline-flex;align-items:center;justify-content:center}
.board-search input:focus{outline:none;border-color:var(--amber);box-shadow:var(--ring)}
/* 모바일(≤940): 게시판 제목/소제목·글수는 헤더(메뉴 옆 이름)로 대체되어 숨김.
   검색+글쓰기는 항상 한 줄 - 검색 폼의 flex-basis 를 0 으로 둬야 input 고유 폭이
   줄넘김 가설 폭에 끼어들지 않는다(좁은 폰에서 랩되던 원인). grow 스페이서도
   제거해 검색이 남는 폭 전부를 흡수하고 글쓰기 버튼이 바로 옆에 붙는다. */
@media (max-width:940px){
  .board-head h1, .board-head .sub { display:none }
  .board-tools > .grow { display:none }
  .board-search{flex:1 1 0;min-width:0;margin-top:0}
  .board-search input{width:100%}
}

/* 번호 열 숨김 (삭제 아님 - 마크업/로직 유지, 표시만 off) */
table.board-list th.c-num, table.board-list td.c-num,
table.board-list th.tnum, table.board-list td.tnum { display: none; }

/* 컴팩트 열 폭: 추천/작성자/조회/작성일은 최소, 제목이 남는 폭 (모바일 block 레이아웃은 제외) */
@media (min-width: 721px) {
  table.board-list .c-like { width: 48px; }
  table.board-list .c-views { width: 56px; }
  table.board-list .c-who { width: 110px; }
  table.board-list .c-when { width: 68px; }
  table.board-list .c-title { width: 100%; }
  table.board-list.trip-list .tlike { width: 48px; }
  table.board-list.trip-list .tviews { width: 56px; }
  table.board-list.trip-list .twho { width: 110px; }
  table.board-list.trip-list .twhen { width: 68px; }
  table.board-list.trip-list .ttitle { width: 100%; }
}

table.board-list th { white-space: nowrap; }

/* 글 상세 하단 추천/조작 줄: 수정/목록 묶음은 오른쪽 끝 */
.ops .ops-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------- support --- */
/* 고객센터 1:1 접수 창구 (/support): 접수폼 / 완료 / 내 목록 / 상세 / 관리자 목록. */
.support-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.support-bar h1 { margin: 0 0 4px; }
.support .support-cat select { width: auto; min-width: 160px; }
.support .form-ops { align-items: center; }
.support-guest { border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg4); margin: 0 0 12px; }
.support-guest-t { font-weight: 800; color: var(--ink); font-size: 13px; margin: 0 0 10px; }
.support-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.support-when { color: var(--sub); font-size: 12.5px; }
.pill.st-pending { background: var(--bg4); border: 1px solid var(--line); color: var(--sub); padding: 2px 8px; border-radius: 8px; font-size: 11px; }
.pill.st-answered { background: var(--amber); border: 1px solid var(--amber); color: #241A00; font-weight: 800; padding: 2px 8px; border-radius: 8px; font-size: 11px; }
.support-who { margin-top: 16px; padding: 10px 12px; background: var(--bg4); border: 1px solid var(--line); border-radius: 12px; font-size: 13px; color: var(--sub); }
.support-who ul { margin: 6px 0 0; padding-left: 18px; }
.support-who li { margin: 2px 0; }
.support-answer { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 14px; }
.support-answer-t { font-weight: 800; color: var(--amber2); margin: 0 0 4px; }
.support-answer-form { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 14px; }
.support-done { text-align: center; padding-top: 34px; padding-bottom: 34px; }
.support-done h1 { margin: 0 0 10px; }
.support-done .sub { max-width: 560px; margin: 0 auto 18px; }
.support-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0; }
.support-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.support-filter .linkish { color: var(--sub); }
.support-filter .linkish.is-on { color: var(--amber2); font-weight: 800; text-decoration: underline; }
.support-search { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.support-search input { font-size: 13.5px; }
.support-guest-tag { color: var(--sub); font-size: 11px; border: 1px solid var(--line); border-radius: 8px; padding: 1px 5px; background: var(--bg4); }
.support .hint { margin: 0 0 12px; }
.support .sub { margin: 0 0 14px; }
/* attach: forms reuse .uploader; ticket view shows the download/search link. */
.support .uploader { margin: 0 0 12px; }
.support-file { margin: -4px 0 14px; font-size: 13px; }
.support-file .attach { font-weight: 700; }
/* 번호/유형/상태 열: 전역 c-num/tnum 숨김 정책(1083)과 겹치지 않는 전용 클래스 -
   support 목록에서는 번호 열을 보인다 (운영진/본인 큐 트래킹용). */
.support table.board-list th.s-num, .support table.board-list td.s-num {
  width: 64px; text-align: center; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.support table.board-list th.s-cat, .support table.board-list td.s-cat {
  width: 88px; white-space: nowrap; color: var(--sub); font-size: 13px;
}
.support table.board-list th.s-st, .support table.board-list td.s-st {
  width: 92px; white-space: nowrap;
}
@media (max-width: 720px) {
  .support table.board-list td.s-num, .support table.board-list td.s-cat,
  .support table.board-list td.s-st { display: inline-block; margin-right: 12px; }
}

/* --------------------------------------------------------------- terms --- */
/* 이용약관 (/terms): .tbody 활용, 조항 리스팅 타이포. */
.terms { max-width: 980px; margin: 0 auto; }
.terms .tbody h2 { font-size: 16.5px; margin: 26px 0 8px; }
.terms .tbody ol { margin: 0 0 6px; padding-left: 24px; }
.terms .tbody ol ol { margin: 4px 0 0; padding-left: 18px; font-size: 14.5px; }
.terms .tbody li { margin: 5px 0; line-height: 1.7; color: var(--ink2); }

/* 가입 1단계 동의 화면 (/account/register): 스크롤박스 + 동의 버튼. */
.terms-gate { max-width: 900px; margin: 0 auto; }
.terms-gate .terms-box { border-top: 1px solid var(--line); padding-top: 10px; }
.terms-box {
  max-height: 46vh; min-height: 260px; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg2);
  padding: 6px 18px 12px; margin: 0 0 14px;
}
.terms-gate .tbody h2 { margin: 16px 0 5px; }

/* 회원 탈퇴 (/account/withdraw): 주의사항 박스. */
.withdraw-warn {
  margin: 0 0 14px; padding: 10px 14px 10px 26px; background: var(--bg4);
  border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px;
}
.withdraw-warn li { margin: 5px 0; color: var(--sub); }

/* 홈 상단 한줄 공지 티커 (최근 공지 우→좌 마퀴; hover 시 멈춤). */
.notice-ticker {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px; margin: 0 0 16px;
}
.nt-label { flex: none; font-weight: 700; color: var(--amber2); white-space: nowrap; }
.nt-viewport { flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.nt-items { display: inline-flex; white-space: nowrap; will-change: transform;
  animation: nt-marquee var(--nt-dur, 28s) linear infinite; }
.nt-set { display: inline-flex; gap: 28px; padding-right: 28px; }
.nt-item { color: var(--ink2); }
.nt-item:hover { color: var(--ink); text-decoration: underline; }
.nt-item small { color: var(--sub); margin-left: 3px; }
.nt-sys { color: #8A5A00; background: #FFF4E0; border: 1px solid #F0CE96; padding: 2px 10px; border-radius: 8px; }
.notice-ticker:hover .nt-items { animation-play-state: paused; }
@keyframes nt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nt-items { animation: none; } }

/* 글쓰기 에디터 이모티콘 바: 툴바 아래 한 줄, 클릭 시 커서 위치에 삽입.
   기본 숨김(😊 토글) — display:flex 가 hidden 속성을 덮지 않게 명시 (2026-10-16). */
.emoji-bar {
  display: flex; flex-wrap: wrap; gap: 2px 6px;
  padding: 6px 6px 4px; border-top: 1px dashed var(--line);
}
.emoji-bar[hidden] { display: none; }
.emoji-btn {
  border: 0; background: none; cursor: pointer;
  padding: 2px 5px; border-radius: 8px; font-size: 19px; line-height: 1.45;
}
.emoji-btn:hover { background: var(--bg4); }
.emoji-btn:active { transform: scale(1.1); }

/* 회원 페이지 서명 (계정 설정 '서명'): 닉네임 아래 한 줄. */
.member-sig { margin: 4px 0 0; color: var(--sub); font-size: 13px; }

/* ------------------------------------------------------------ stay 예약 --- */
/* 숙소 예약 (lib/stay.php + 0041): 예약하기 바 → 달력(월 그리드) → 호실 선택
 * → 신청 폼. 예약가능=자유일, 예약마감=전 호실 점유, 과거=비활성. */
.stay-res-bar { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.stay-res-bar .btn { margin: 0; }
.stay-cal {
  margin: 0 0 16px; padding: 18px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg2);
}
.stay-cal-head {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 12px;
}
.stay-cal-month { font-size: 20px; font-weight: 800; min-width: 110px; text-align: center; }
.stay-cal-nav {
  border: 1px solid var(--line); background: var(--bg2); color: var(--ink);
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 19px; line-height: 1;
}
.stay-cal-nav:hover { background: var(--bg3); }
.stay-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 860px; margin: 0 auto;
}
.stay-cal-dow, .stay-cal-blank { min-height: 32px; }
.stay-cal-dow { text-align: center; font-size: 15px; font-weight: 800; color: var(--sub); }
.stay-cal-dow.sun { color: var(--danger); }
.stay-cal-day {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-height: 74px; padding: 8px 3px 5px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg2); cursor: pointer; font: inherit; color: var(--ink);
}
.stay-cal-day b { font-size: 20px; line-height: 1.2; }
.stay-cal-day small { font-size: 13px; line-height: 1.3; color: var(--sub); white-space: nowrap; }
.stay-cal-day.is-free:hover { border-color: var(--amber); }
.stay-cal-day.is-free small { color: var(--green); font-weight: 700; }
.stay-cal-day.is-full { cursor: not-allowed; background: var(--bg3); color: var(--sub); }
.stay-cal-day.is-full small { color: var(--danger); }
.stay-cal-day.is-past { cursor: not-allowed; opacity: .45; background: var(--bg3); }
.stay-cal-day.is-start, .stay-cal-day.is-end {
  background: var(--amber); border-color: var(--amber2); color: #241A00;
}
.stay-cal-day.is-start small, .stay-cal-day.is-end small { color: #241A00; }
.stay-cal-day.is-in { background: #FDF0D5; border-color: var(--amber); }
.stay-cal-day.is-after { border-style: dashed; border-color: var(--amber); }
.stay-cal-noroom { margin: 8px 0 0; text-align: center; color: var(--sub); font-size: 13.5px; }
.stay-rooms h3 { margin: 0 0 8px; font-size: 15px; }
.stay-rooms .stay-room-opts { margin-bottom: 12px; }
.stay-cal-loading { grid-column: 1 / -1; text-align: center; color: var(--sub); font-size: 14px; }
.stay-cal-hint { margin: 10px 0 0; font-size: 14px; color: var(--sub); text-align: center; }
.stay-legend { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 12.5px; }
/* 모바일(≤720px): 좁은 셀을 위해 크기 되돌림 — 데스크톱 확대는 유지. */
@media (max-width: 720px) {
  .stay-cal { padding: 12px; }
  .stay-cal-grid { gap: 3px; }
  .stay-cal-day { min-height: 56px; padding: 4px 1px 3px; border-radius: 8px; }
  .stay-cal-day b { font-size: 14px; }
  .stay-cal-day small { font-size: 9.5px; }
}
.stay-legend i {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  border: 1px solid var(--line); background: var(--bg2);
}
.stay-legend i.is-free { background: #E7F6EC; border-color: var(--green); }
.stay-legend i.is-full { background: var(--bg3); border-color: var(--danger); }
/* 예약 대기 (타 회원 신청 박) — 파랑, 신청 가능(클릭됨). */
.stay-cal-day.is-pend { background: #EAF4FF; border-color: #B7D3F0; cursor: pointer; }
.stay-cal-day.is-pend small { color: #1E5E9E; font-weight: 700; }
.stay-legend i.is-pend { background: #EAF4FF; border-color: #B7D3F0; }
.stay-rooms { margin: 12px 0 0; }
.stay-rooms h3 { margin: 0 0 8px; font-size: 14px; }
/* 호실 카드: 한 줄씩 — 왼쪽 큰 사진(여러 장이면 ‹ › 슬라이더) + 오른쪽 설명·옵션. */
.stay-room-opts { display: grid; grid-template-columns: 1fr; gap: 10px; }
.stay-room-pick {
  display: flex; align-items: stretch; gap: 12px; padding: 8px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13.5px;
}
.stay-room-pick:hover { border-color: var(--amber); }
.stay-room-pick:has(input:checked) { border-color: var(--amber2); background: #FDF0D5; }
.stay-room-pick input[type="radio"] { align-self: center; flex: none; }
.srp-photo {
  position: relative; width: 300px; max-width: 42%; aspect-ratio: 4 / 3; flex: none;
  border-radius: 8px; overflow: hidden; background: var(--bg3); border: 1px solid var(--line);
}
.srp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srp-photo.srp-empty { background: var(--bg3); }
.srp-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer;
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0;
}
.srp-nav:hover { background: rgba(0, 0, 0, .65); }
.srp-prev { left: 6px; }
.srp-next { right: 6px; }
.srp-num {
  position: absolute; right: 6px; bottom: 5px; font-size: 10.5px; line-height: 1.4; color: #fff;
  background: rgba(0, 0, 0, .45); border-radius: 6px; padding: 0 5px;
}
.stay-room-info { display: flex; flex-direction: column; min-width: 0; flex: 1; padding: 4px 2px; gap: 3px; }
.sr-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sr-k { flex: none; width: 40px; font-size: 12px; font-weight: 800; color: var(--sub); }
.sr-v { min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.sr-v b { font-size: 16px; line-height: 1.3; }
.sr-cap { font-style: normal; color: var(--sub); font-size: 12px; }
.stay-room-pick small { color: var(--sub); font-size: 12.5px; line-height: 1.55; }
.stay-room-none { margin: 0; color: var(--sub); font-size: 13px; }
@media (max-width: 720px) {
  .srp-photo { width: 46%; min-width: 132px; aspect-ratio: 1; }
  .stay-room-info b { font-size: 14.5px; }
  .stay-room-pick small { font-size: 11.5px; }
}
.stay-res-form { margin: 12px 0 0; display: grid; gap: 10px; max-width: 860px; margin-left: auto; margin-right: auto; }
.stay-res-form[hidden] { display: none; }
.stay-res-picked { font-size: 15px; font-weight: 800; color: var(--amber2); min-height: 1em; white-space: pre-line; }
.stay-res-field { display: grid; gap: 4px; font-size: 15px; font-weight: 700; color: var(--sub); }
.stay-res-field input, .stay-res-field textarea {
  font: inherit; font-size: 16px; color: var(--ink); padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);
}
.stay-res-form .btn.stay-res-submit { font-size: 16px; padding: 12px 16px; }
.stay-res-msg { margin: 0; font-size: 14px; min-height: 1em; }
.stay-res-msg.ok { color: var(--green); font-weight: 700; }
.stay-res-msg.bad { color: var(--danger); font-weight: 700; }
.stay-login-note { margin: 12px 0 0; font-size: 15px; color: var(--sub); text-align: center; }
.stay-login-note a { color: var(--amber2); font-weight: 700; }

/* 예약 관리 콘솔 (/stay/manage/{post_id}) */
.stay-manage h2 { margin: 26px 0 10px; font-size: 17px; }
.stay-res-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--bg2); }
.stay-res-table th, .stay-res-table td {
  padding: 9px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top;
}
.stay-res-table th { background: var(--bg3); font-size: 12px; color: var(--sub); white-space: nowrap; }
.stay-res-table td small { display: block; color: var(--sub); font-size: 11px; }
.stay-res-pending { background: #FFF8E9; }
.stay-res-ops { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.stay-res-ops input { max-width: 180px; font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; }
.stay-res-done { color: var(--sub); }
.stay-res-memo { max-width: 220px; word-break: break-word; color: var(--ink2); }
.stay-room-head, .stay-room-form {
  display: grid; grid-template-columns: 1.4fr .6fr .5fr .7fr auto 1fr auto;
  gap: 8px; align-items: center;
}
.stay-room-head { padding: 0 2px 6px; font-size: 11.5px; font-weight: 800; color: var(--sub); }
.stay-room-form {
  padding: 8px; margin: 0 0 6px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg2);
}
.stay-room-form input[type="file"] { font-size: 12px; color: var(--ink2); max-width: 180px; }
/* 호실 가격/설명/편의시설 — 폼 그리드 안에서 전체 폭 라벨 행 (0046/0047). */
.sr-price, .sr-amen, .sr-desc {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px;
  font-size: 12.5px; color: var(--ink2); border-top: 1px dashed var(--line); padding: 6px 2px 2px;
}
.sr-price small, .sr-amen small, .sr-desc small { color: var(--sub); font-weight: 800; }
.sr-amen-opt { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }
.sr-price input, .sr-desc input {
  flex: 1; min-width: 200px; font: inherit; font-size: 12.5px; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); color: var(--ink);
}
.stay-room-block { margin: 0 0 10px; }
.stay-room-photos { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 4px 6px; }
.stay-room-photo {
  position: relative; margin: 0; width: 96px;
}
.stay-room-photo img {
  width: 96px; height: 72px; object-fit: cover; display: block;
  border: 1px solid var(--line); border-radius: 8px;
}
.stay-room-photo form { position: absolute; top: 2px; right: 2px; margin: 0; }
.stay-room-photo .btn { padding: 1px 7px; min-height: 0; font-size: 13px; line-height: 1.3; }

/* 객실×일자 그리드 (예약 관리 콘솔) */
.mg-nav { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.mg-nav b { font-size: 15px; }
.stay-grid { border-collapse: collapse; font-size: 11px; background: var(--bg2); }
.stay-grid th, .stay-grid td {
  border: 1px solid var(--line); padding: 3px 4px; text-align: center; min-width: 22px;
}
.stay-grid thead th { background: var(--bg3); font-weight: 800; color: var(--sub); }
.stay-grid thead th.today { color: var(--amber2); text-decoration: underline; }
.stay-grid tbody th {
  font-weight: 700; color: var(--ink); white-space: nowrap; text-align: left; padding: 3px 8px;
}
.stay-grid tbody th small { color: var(--sub); font-weight: 400; }
.stay-grid td.is-pend { background: #FDEBC8; }
.stay-grid td.is-conf { background: #CDEEDB; }
.stay-grid td.is-past { opacity: .4; }
.mg-legend { display: flex; align-items: center; gap: 6px; }
.mg-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); }
.mg-legend i.is-pend { background: #FDEBC8; }
.mg-legend i.is-conf { background: #CDEEDB; }

/* 내 예약 (/account/reservations) */
.stay-mine h1 { margin: 0 0 8px; }
.stay-res-reason { display: block; color: var(--sub); }
.stay-room-form input, .stay-room-form select {
  width: 100%; font: inherit; font-size: 13.5px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); color: var(--ink);
}
.stay-room-form .sr-ops { display: flex; gap: 6px; }
@media (max-width: 720px) {
  .stay-room-head { display: none; }
  .stay-room-form { grid-template-columns: 1fr 1fr; }
  .stay-res-table { display: block; overflow-x: auto; }
}

/* 파트너 허브·공개 랜딩·입금 계좌 (phase 3, lib/stay.php gg_view_stay_partner*) */
.bank-box {
  margin: 10px 0; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 10px;
  background: var(--bg2);
}
.bank-box h2 { margin: 0 0 4px; font-size: 14px; }
.bank-box p { margin: 2px 0; font-size: 14px; }
.bank-box .hint { color: var(--sub); font-size: 12.5px; }
.stay-hub h1 { margin: 0 0 8px; }
.stay-hub-off td { opacity: .55; }
.stay-hub-pend { color: var(--amber2); }
.stay-landing h1 { margin: 0 0 4px; font-size: 20px; }
.stay-land-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px;
}
.stay-land-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg2);
  color: var(--ink); text-decoration: none;
}
.stay-land-card:hover { border-color: var(--amber2); }
.stay-land-card h2 { margin: 0; font-size: 16px; }
.stay-land-card p { margin: 0; color: var(--sub); font-size: 13px; flex: 1; }

/* 가격·일자 설정 (0045): 주말 추가 가격 + 연휴/예약중지 달력. */
.stay-policy { margin: 0 0 10px; }
.sp-fee, .sp-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.sp-fee input[type="number"], .sp-range input[type="date"] {
  font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg2); color: var(--ink);
}
.sp-fee input[type="number"] { width: 140px; }
.sp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 860px; }
.sp-head span { text-align: center; font-size: 12px; font-weight: 800; color: var(--sub); padding: 2px 0; }
.sp-blank { min-height: 56px; }
.sp-day { margin: 0; padding: 0; }
.sp-day button {
  width: 100%; min-height: 56px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; padding: 4px 1px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg2); cursor: pointer; font: inherit; color: var(--ink);
}
.sp-day button:hover { border-color: var(--amber); }
.sp-day b { font-size: 15px; line-height: 1.2; }
.sp-day small { font-size: 10.5px; line-height: 1.2; color: var(--sub); white-space: nowrap; }
.sp-day.sp-holiday button { background: #EAF4FF; border-color: #B7D3F0; }
.sp-day.sp-holiday small { color: #1E5E9E; font-weight: 700; }
.sp-day.sp-closed button { background: #FDEBE9; border-color: #E8B7B0; }
.sp-day.sp-closed small { color: var(--danger); font-weight: 700; }
@media (max-width: 720px) {
  .sp-day button { min-height: 44px; }
  .sp-day small { font-size: 9px; }
  .sp-blank { min-height: 44px; }
}

/* 예약 접수 확인 팝업 (2026-10-18). */
.srp-modal {
  position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45); padding: 20px;
}
.srp-modal-card {
  width: min(440px, 92vw); background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 24px; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); text-align: center;
}
.srp-modal-card h3 { margin: 0 0 10px; font-size: 18px; }
.srp-modal-card p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.65; color: var(--ink); white-space: pre-line; text-align: left; }
.srp-modal-ok { min-width: 130px; }

/* 게시판 관리 표시 플래그 (0043): 보드별 CCL/대지역/소지역/카테고리 체크 2x2. */
.flag-grid { display: inline-grid; grid-template-columns: auto auto; gap: 2px 12px; }

/* 번호판 모자이크 (2026-10-23): 글/댓글 사진 편집 스트립 + 드래그 모달. */
.redact-box {
  margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg2);
}
/* 모자이크 편집 토글 (2026-10-23h): 기본 접힘 — 버튼이 박스를 펼친다. */
.redact-fold { margin: 10px 0; }
.redact-fold .redact-box { margin: 10px 0 0; }
.redact-fold .redact-box.compact { margin: 8px 0 0; }
.redact-box h2, .redact-box h3 { margin: 0 0 6px; font-size: 15px; }
.redact-box .hint { margin: 0 0 10px; color: var(--sub); font-size: 12.5px; }
.redact-box.compact { margin: 10px 0 0; padding: 10px 12px; }
.redact-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.redact-item { width: 118px; margin: 0; }
.redact-item img {
  width: 100%; height: 76px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg3);
}
.redact-item figcaption { margin: 4px 0; font-size: 11.5px; color: var(--sub); }
.media-redact-btn { width: 100%; }
.redact-modal {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
  justify-content: center; padding: 16px; background: rgba(0, 0, 0, .72);
}
.redact-modal[hidden] { display: none; }
.redact-panel {
  width: min(920px, 96vw); max-height: 92vh; overflow: auto;
  background: var(--bg2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.redact-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.redact-close {
  border: 0; background: transparent; color: var(--ink); font-size: 24px;
  line-height: 1; cursor: pointer; padding: 0 4px;
}
.redact-stage {
  position: relative; display: inline-block; max-width: 100%;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.redact-stage img {
  display: block; max-width: 100%; max-height: 68vh; width: auto; height: auto;
  border-radius: 6px;
}
.redact-rects { position: absolute; inset: 0; pointer-events: none; }
.redact-rect {
  position: absolute; border: 2px solid var(--danger);
  background: rgba(220, 38, 38, .22); border-radius: 2px;
}
.redact-rect.is-drawing { border-style: dashed; }
.redact-hint { margin: 8px 0 0; color: var(--sub); font-size: 12.5px; }
.redact-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (max-width: 720px) {
  .redact-item { width: 92px; }
  .redact-item img { height: 64px; }
}