/* 숙소후기 — 여행 사이트 느낌이되 차분하게. 바탕 흰색, 강조 남색.
   간격 4·8·12·16·24·32·48 / 글자 12·13·15·17·20·28
   화면: ~767 모바일 · 768~1023 태블릿 · 1024~ PC (docs/DESIGN.md 3절) */

[hidden] { display: none !important; } /* 깨진 사진 대신 플레이스홀더(onerror) — .scard__ph 의 display 보다 앞선다 */

:root {
  --bg: #f7f8fa;
  --surf: #fff;
  --ink: #1f2328;
  --mut: #6b7280;
  --line: #e5e7eb;
  --acc: #1e3a8a;
  --acc-l: #eef2ff;
  --good: #15803d; --good-bg: #dcfce7;
  --ok: #a16207; --ok-bg: #fef9c3;
  --low: #4b5563; --low-bg: #e5e7eb;
  --warn-bg: #fff7ed; --warn: #9a3412;
  --high: #fa6262; --high-bg: #fee2e2;  /* 비싼 요금 — 테두리는 그래픽 3:1 이라 #fca5a5(1.90) 로는 못 쓴다 */
  --err: #b91c1c;
  --mark: #ce8408;   /* 요금 분포 중앙값 선 — #f59e0b 은 흰 바탕에 2.15 */
  --acc-h: #172e6e;  /* 버튼 hover */
  --onfill: #fff;    /* 강조색 바탕 위에 얹는 글자 */
  color-scheme: light dark;
  --r-s: 4px; --r-m: 8px; --r-l: 12px;
  --gutter: 48px; --pad: 32px;

  /* famousbros 공용 부품(fb.css) 값 — 기존 토큰을 가리키므로 아래 다크 블록이 그대로 따라간다(G:\workspace\DESIGN.md '토큰').
     실측(2026-10-16, WCAG): 라이트 --ink/--surf 15.80 · --mut/--surf 4.83 · --mut/--bg 4.55 · --onfill/--acc 10.36
                             다크   --ink/--surf 14.09 · --mut/--surf 6.63 · --mut/--bg 7.20 · --onfill/--acc 7.20 */
  --fb-bg: var(--bg);
  --fb-surface: var(--surf);
  --fb-ink: var(--ink);
  --fb-muted: var(--mut);
  --fb-line: var(--line);
  --fb-accent: var(--acc);
  --fb-on-accent: var(--onfill);
  --fb-display: inherit;   /* 웹폰트는 Noto Sans KR 하나 — 제목도 같은 글꼴의 굵기(800)로 */
  --fb-max: 1104px;        /* 본문 .wrap(1200 − 좌우 48) 폭과 같게 */
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.55 "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
/* 키보드 포커스 — 이 사이트에는 링이 아예 없었다(hover 색만 있어 키보드로는 위치를 못 찾는다).
   --acc 는 바탕 9.75 · 카드 10.36, 다크 7.20 · 6.63. 선택된 라디오 테두리(.radio:has(:checked))는
   이미 9.26 / 5.83 이라 손대지 않는다. */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
p, ul, ol, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }
.mut { color: var(--mut); }
.note { font-size: 13px; color: var(--mut); }
.note a { text-decoration: underline; text-underline-offset: 3px; }
.note--warn { color: var(--warn); background: var(--warn-bg); padding: 8px 12px; border-radius: var(--r-s); }
.flash { padding: 12px 16px; border-radius: var(--r-m); background: var(--good-bg); color: var(--good); font-weight: 700; }
.empty { padding: 32px 0; text-align: center; color: var(--mut); }
.empty a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }

/* 상단 — 틀은 fb.css 의 .fb-nav. 로고 글자·검색 칸만 이 사이트 것 */
.mark { display: inline-flex; align-items: center; min-height: 44px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--acc); white-space: nowrap; }
.mark span { color: var(--ink); font-weight: 400; }
.fb-foot a.mark { color: var(--acc); }
.q { flex: 1; display: flex; max-width: 520px; }
.fb-nav .q { margin-inline: 8px; min-width: 0; }  /* min-width 0 이 없으면 폰에서 입력칸 최소폭만큼 막대가 화면 밖으로 밀렸다 */
.fb-nav .q button { white-space: nowrap; }
.fb-nav__logo.mark { gap: 0; }  /* '숙소' 와 <span>후기</span> 사이에 fb.css 의 로고 gap 이 끼지 않게 */
.q input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-right: 0; border-radius: var(--r-s) 0 0 var(--r-s); font: inherit; font-size: 14px; }
.q button, .hero__q button { min-height: 44px; padding: 8px 16px; border: 0; border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--acc); color: var(--onfill); font: inherit; font-weight: 700; cursor: pointer; }

/* 카드·섹션 */
.page { padding-block: 32px 48px; display: flex; flex-direction: column; gap: 24px; }
.card { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--pad); display: flex; flex-direction: column; gap: 20px; }
.sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.sec__t { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.sec__r { font-size: 13px; color: var(--mut); text-align: right; }
.crumb { font-size: 13px; color: var(--mut); display: flex; gap: 6px; flex-wrap: wrap; }
.crumb a:hover { color: var(--acc); text-decoration: underline; }
.kicker { font-size: 13px; font-weight: 700; color: var(--acc); }
.kicker a:hover { text-decoration: underline; }

/* 홈 히어로 — 틀은 fb.css 의 .fb-hero, 그 안의 주 행동이 검색 폼(.hero__q)이다 */
.hero__q { display: flex; gap: 8px; max-width: 640px; }
.hero__q input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-m); font: inherit; }
.hero__q button { border-radius: var(--r-m); padding: 12px 20px; }

/* 버튼·칩·배지 */
/* min-height 는 44px 탭 대상 — 계산 높이가 43.7px 로 아슬하게 모자랐다. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: var(--r-m); background: var(--acc); color: var(--onfill); font-size: 14px; font-weight: 700; border: 1px solid var(--acc); cursor: pointer; font-family: inherit; white-space: nowrap; }
.btn:hover { background: var(--acc-h); }
.btn--line { background: var(--surf); color: var(--acc); }
.btn--line:hover { background: var(--acc-l); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a, .chips span, .chip { font-size: 13px; font-weight: 700; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); display: inline-flex; gap: 4px; align-items: center; }
/* 누를 수 있는 칩만 44px 로 키운다 — .chips--static 의 span 은 시설 표시라 대상이 아니다. */
.chips a, a.chip { min-height: 44px; }
.chips a:hover, .chip:hover { border-color: var(--acc); color: var(--acc); }
.chips small { font-size: 12px; color: var(--mut); font-weight: 400; }
.chips--static span { font-weight: 400; }
.badge { display: inline-block; min-width: 40px; padding: 2px 8px; border-radius: var(--r-s); text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.badge--good { background: var(--good-bg); color: var(--good); }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--low { background: var(--low-bg); color: var(--low); }

/* 숙소 카드 목록 */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.scard { display: flex; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-m); min-width: 0; }
.scard:hover { border-color: var(--acc); }
.scard__img { flex: none; width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-s); }
.scard__ph { display: inline-flex; align-items: center; justify-content: center; background: var(--low-bg); color: var(--low); font-size: 13px; font-weight: 700; }
.scard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scard__name { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scard__meta, .scard__addr { font-size: 13px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scard__score { font-size: 13px; margin-top: auto; display: flex; gap: 8px; align-items: center; }
.rlist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
/* 줄 전체가 링크다(UIUX.md Fitts). 세로 패딩 10px 에 줄높이 23px 이면 43px 로 44px 에 못 미쳐 12px 로 올렸다. */
.rlist li { display: flex; justify-content: space-between; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-s); position: relative; }
.rlist a { font-weight: 700; }
.rlist a:hover { color: var(--acc); }
/* HTML 을 바꾸지 않고 지역명 앵커를 줄 위에 겹쳐 펼친다 — 앵커 박스를 키우지 않으므로 flex 정렬이 그대로다.
   덮이는 "N곳"은 링크가 아니라 상관없다. 줄 안에 다른 링크가 생기면 position: relative 로 위에 올린다. */
.rlist a::after { content: ""; position: absolute; inset: 0; }
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 14px; }
.filters select { font: inherit; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-s); }
.pager { display: flex; gap: 16px; justify-content: center; align-items: center; font-size: 14px; }
/* 페이징 링크도 탭 대상이다 — 글자 높이 22px 뿐이었다. */
.pager a { color: var(--acc); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

/* 숙소·호실 헤더 */
.shead { flex-direction: row; gap: 24px; align-items: flex-start; }
.shead__img { flex: none; width: 240px; height: 180px; object-fit: cover; border-radius: var(--r-m); }
.shead__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.shead__t { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.info { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--mut); }
.info a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }

/* 점수 타일 */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tile { border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.tile__l { font-size: 12px; font-weight: 700; color: var(--mut); }
.tile__v { font-size: 18px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
/* 큰 숫자는 화면당 하나다(UIUX.md Von Restorff). 주인공은 "종합" — 사람이 이 숙소를 잡을지 말지
   정할 때 보는 값이고, 청결·주변·부대·가성비는 그 하나를 왜 그렇게 봤는지 설명하는 내역이다.
   값은 넷 다 그대로 보여 주고 크기만 내렸다. 공개 화면이라 .tile--sum 의 기존 강조 꼴은 그대로 둔다. */
.tile--sum { background: var(--acc-l); border-color: transparent; }
.tile--sum .tile__v { font-size: 32px; }

/* 요금 */
.fees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fee { border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.fee__l { font-size: 12px; font-weight: 700; color: var(--mut); }
.fee__v { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fee--low { border-color: var(--good); background: var(--good-bg); }
.fee--high { border-color: var(--high); background: var(--high-bg); }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 12px; font-weight: 700; color: var(--mut); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.thin td { color: var(--mut); }
.rlink { font-weight: 700; color: var(--acc); }
.rlink:hover { text-decoration: underline; }
/* 객실 표도 줄 전체가 링크다(UIUX.md Fitts) — 호실 이름 앵커를 줄 위에 겹쳐 펼친다.
   ⚠️ 이 줄은 요금을 비교해 읽는 표라 겹침 때문에 숫자를 끌어 선택하기 어려워진다.
   그래도 "호실을 누르러 온 줄"이라 링크를 넓혔다(section 의 안내 문구가 그렇게 적혀 있다). */
.rooms tbody tr { position: relative; }
.rooms tbody tr:hover { background: var(--acc-l); }
.rooms tbody .rlink::after { content: ""; position: absolute; inset: 0; }
.pchart { width: 100%; height: auto; display: block; }
.pchart text { font-size: 11px; fill: var(--mut); }
.pchart__base { stroke: var(--line); }
.pbar rect { fill: var(--acc); opacity: .75; }
.pbar line { stroke: var(--mark); stroke-width: 2; }
.pbar--thin rect { opacity: .6; }  /* .25 는 바탕 대비 1.57 로 막대가 안 보였다 */

/* 후기 */
.reviews { display: flex; flex-direction: column; }
.review { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
.review:first-child { border-top: 0; padding-top: 0; }
.review__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.review__nick, .review__stay { font-weight: 700; font-size: 14px; }
.review__stay:hover { color: var(--acc); text-decoration: underline; }
.review__scores { font-size: 12px; color: var(--mut); }
.review__body { line-height: 1.65; }
/* 후기 항목별 키-값, 숙소 페이지 "후기에서 모은 팁" */
.review__dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 14px; margin-top: 4px; }
.review__dl div { display: contents; }
.review__dl dt { font-weight: 700; color: var(--acc); white-space: nowrap; }
.review__dl dd { margin: 0; line-height: 1.6; }
.review__dl--wide { font-size: 15px; gap: 10px 16px; }
.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tips__t { font-size: 14px; font-weight: 800; color: var(--acc); margin-bottom: 6px; }
.tips__g ul { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; list-style: disc; font-size: 14px; line-height: 1.6; }

/* 폼 */
.form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.form__row { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }
.form__row label, .form__row legend { font-size: 13px; font-weight: 700; }
.form input, .form select, .form textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); width: 100%; }
.form textarea { resize: vertical; }
.radios { display: flex; gap: 6px; flex-wrap: wrap; }
.radio { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; cursor: pointer; }
.radio input { width: auto; padding: 0; margin: 0; }
.radio:has(input:checked) { border-color: var(--acc); background: var(--acc-l); color: var(--acc); font-weight: 700; }
.err { color: var(--err); font-size: 13px; }
/* honeypot — 사람에게는 보이지 않는다 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 지도 */
.map { height: 0; isolation: isolate; }  /* Leaflet 판(z-index 400~)이 떠 있는 내비(.fb-nav z 50) 위로 올라오지 않게 가둔다 */
.map--on { height: 520px; border-radius: var(--r-m); border: 1px solid var(--line); }
/* 지도 마커: 숫자 원(시도·격자), 썸네일. Leaflet divIcon 의 className 으로 붙는다.
   OSM 타일은 OS 테마와 무관하게 밝다 — 마커 색은 토큰을 쓰지 않고 고정한다(map.html 의 circleMarker 도 같은 값). */
.mk { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #1e3a8a; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); font-weight: 800; font-size: 13px; line-height: 1; cursor: pointer; }
.mk--sido { font-size: 15px; }
.mk small { font-size: 10px; font-weight: 600; margin-top: 3px; }
.mk-img { border-radius: 8px; overflow: hidden; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); background: #fff; }
.mk-img img { display: block; width: 48px; height: 48px; object-fit: cover; }

/* 소개·방침·약관 */
.prose { max-width: 70ch; display: flex; flex-direction: column; gap: 14px; line-height: 1.75; }
.prose h2 { margin-top: 12px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.prose ul { padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 6px; }
.prose a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.prose code { font-size: 13px; background: var(--bg); padding: 1px 5px; border-radius: 3px; }

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scard { flex-direction: column; }
  .scard__img { width: 100%; height: 140px; }
}
@media (max-width: 767px) {
  :root { --gutter: 16px; --pad: 16px; }
  /* 폰: 지역·지도는 아래 탭바로 내려가고(fb.css), 막대에는 로고 + 검색만 남는다 */
  .mark { font-size: 20px; }
  .fb-nav .q { margin-inline: 0; }
  .page { padding-block: 16px 32px; gap: 16px; }
  .hero__q { flex-wrap: wrap; }
  .hero__q .btn { flex-basis: 100%; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .rlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shead { flex-direction: column; }
  .shead__img { width: 100%; height: 180px; }
  .shead__t { font-size: 22px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile--sum { grid-column: 1 / -1; }
  .fees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map--on { height: 380px; }
}

/* 다크 — OS 설정(prefers-color-scheme)만 따른다. 수동 토글은 쿠키·JS 가 필요해서 넣지 않았다.
   브랜드 남색은 색상(H 224°)을 고정한 채 채도를 내리고 명도를 올려 대비만 맞췄다.
   대비는 전부 실측값이다(본문 4.5:1, 그래픽 3:1 기준 실패 0). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216; --surf: #171b21; --ink: #e6e8ec; --mut: #99a1ad; --line: #2b323c;
    --acc: #899fdc; --acc-h: #a9b9e5; --acc-l: #1d2636;
    --good: #5fc97f; --good-bg: #15291c;
    --ok: #d6a93f; --ok-bg: #2b2412;
    --low: #a9b1bd; --low-bg: #252b34;
    --warn: #e08a5a; --warn-bg: #2c1e14;
    --high: #b8574f; --high-bg: #2e1717;
    --err: #f08a84; --mark: #e0a13a;
    --onfill: #0f1216;  /* 라이트와 정반대 — 밝아진 강조색 위에는 어두운 글자라야 읽힌다 */
  }
}

/* 쿠팡 파트너스 칸(coupang.py) — 이 사이트 토큰만 쓴다. */
.cpn { margin: 24px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surf); }
.cpn__h { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.cpn__d { margin: 4px 0 8px; font-size: 12px; color: var(--mut); }
.cpn__l { list-style: none; margin: 0; padding: 0; }
.cpn__l li + li { border-top: 1px solid var(--line); }
.cpn__i { position: relative; display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 12px 0; }
.cpn__img { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #fff; }
.cpn__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpn__a { color: var(--ink); font-weight: 700; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.cpn__a::after { content: ""; position: absolute; inset: 0; }
.cpn__a:focus-visible { outline: none; }
.cpn__a:focus-visible::after { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 8px; }
.cpn__i:hover .cpn__a { text-decoration: underline; }
.cpn__n { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.5; }
.cpn__go { color: var(--acc); font-size: 14px; font-weight: 700; }
.cpn--top { margin: 12px 0 16px; padding: 8px 12px; }
.cpn--top .cpn__h { font-size: 14px; }
.cpn--top .cpn__i { padding: 4px 0; }
.cpn--top .cpn__img { width: 48px; height: 48px; }
.cpn--top .cpn__n { display: none; }
.page > .cpn { margin-block: 0; }  /* .page 가 flex gap 으로 블록 사이를 띄운다 — 바깥 여백을 더하면 두 배가 된다 */