/* 바르셀로나 생존 키트 — 거리 세라믹 표지판(street plaque)의 시각 언어.
 *
 * 주제: QR 로 열리는 생존 키트. 잡지가 아니라 길찾기 도구다.
 * 대상: 폰 하나 든 피곤한 여행자, 3일 체류, 대낮 햇빛 아래.
 * 하는 일: 오늘 쓸 정보를 3초 안에 훑게 한다.
 *
 * 시그니처는 '날짜 명패' 하나뿐이다(.plaque). 나머지는 전부 조용하게 둔다 —
 * 동행 매칭의 축이 '언제'이고 정렬 키가 meet_date 이므로, 그 사실을 형태가 말하게 했다.
 *
 * 모바일 우선. 고정 px 폭을 쓰지 않는다(375px 가로 오버플로 0 — NFR2).
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  color-scheme: light dark;

  /* 바르셀로나 거리 표지판: 코발트 유약 타일에 흰 글씨.
     크림/테라코타를 피해 중성은 푸른 쪽으로 살짝 기울였다 — 코발트와 같은 편에 서게. */
  --ink:    #0f1419;   /* 본문 */
  --paper:  #f2f3f1;   /* 배경 — 종이이자 유약 흰 */
  --card:   #ffffff;
  --plaque: #14477d;   /* 표지판 코발트. 링크·강조·명패 */
  /* 헤더 배경. --plaque 와 값은 같지만 쓰임이 반대라 토큰을 나눈다.
     --plaque 는 '바탕 위에 얹는 글씨'라 다크 모드에서 밝게 뒤집혀야 하고,
     --header 는 '글씨를 얹는 바탕'이라 두 테마 모두 어두워야 한다.
     하나로 묶여 있어서 다크 모드 헤더가 밝은 파랑 위 흰 글씨(2.08:1)가 됐다. */
  --header: #14477d;
  --glaze:  #dce4ec;   /* 옅은 유약 — 경계선 */
  --safety: #b3401b;   /* 안전(소매치기) 전용. 장식으로 쓰지 않는다 */
  --muted:  #5a6673;

  --space: 1rem;
  --radius: 3px;       /* 타일의 각. 둥근 카드는 이 주제가 아니다 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:    #e8ebee;
    --paper:  #12161b;
    --card:   #1a1f26;
    --plaque: #7fb0e8;  /* 어두운 바탕에서 대비 확보 */
    --header: #0e3157;  /* 밝히지 않는다 — 흰 글씨가 올라가는 바탕이다 */
    --glaze:  #2a323c;
    --safety: #ff8a5c;
    --muted:  #93a0ad;
  }
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0 auto;
  max-width: 40rem;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.62;
  overflow-wrap: break-word;
  word-break: keep-all;   /* 한국어는 어절 단위로 끊어야 읽힌다 */
}

img, table, pre { max-width: 100%; }
table, pre { display: block; overflow-x: auto; }

a { color: var(--plaque); text-underline-offset: 0.18em; }

/* 키보드 초점은 항상 보이게 (품질 바닥선) */
:focus-visible { outline: 2px solid var(--plaque); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { position: static; display: block; padding: var(--space); background: var(--header); color: #fff; }

/* ── 표지판 머리 ── 파란 타일 띠. 이 앱이 무엇인지 한 번에 말한다 */
.site-header {
  background: var(--header);
  color: #fff;
  padding: 0.95rem var(--space) 0.85rem;
}
.brand {
  display: block;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
}
/* 메뉴는 목록 글씨와 같은 크기로 둔다. 여기가 작으면 '누를 곳'으로 안 읽힌다.
   흰색을 반투명으로 낮추지 않는다 — 밝은 데서 읽으라고 만든 화면이다. */
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.05rem;
  margin-top: 0.55rem;
  font-size: 1rem;
}
.site-header nav a { color: #fff; text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }
.site-header :focus-visible { outline-color: #fff; }

main { padding: var(--space); }

.tagline {
  margin: 0.2rem 0 1.6rem;
  color: var(--muted);
  font-size: 0.94rem;
}

/* ── 타이포 스케일 ── 표제는 좁고 단단하게, 본문은 편하게 */
/* 화면 제목은 대체로 위 메뉴 항목을 그대로 반복한다("게시판" 위에 "게시판").
   크게 둘 이유가 없다 — 그 자리는 첫 글에 준다. */
h1 { font-size: 1.24rem; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 0.35rem; }
h2 {
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 2.2rem 0 0.7rem;
}
h2:first-of-type { margin-top: 0.6rem; }

/* ── 목록 ──
   상자 스무 개가 아니라 줄 스무 개로 그린다. 카드 테두리는 하나를 들여다볼 때 쓰는 형태고,
   여기서 하는 일은 훑기다. 배경과 테두리를 걷으면 한 화면에 3건이 7건이 된다.
   표지판은 카드로 나오지 않는다는 점에서도 이쪽이 주제에 맞다. */
.cards {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  border-top: 1px solid var(--glaze);
}
.card {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0.15rem;
  border-bottom: 1px solid var(--glaze);
}
.card a { font-weight: 600; text-decoration: none; }
.card a:hover { text-decoration: underline; }
.card > a { flex: 1 1 12rem; }

/* 날짜가 있는 카드는 명패를 고정 열에 세운다.
   플렉스로 두면 제목 길이에 따라 명패가 좌우로 떠다녀 '기둥처럼 훑기'가 성립하지 않는다. */
.card--dated {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.7rem;
  align-items: start;
}
.card-body { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: baseline; }
.card-body > a { flex-basis: 100%; }

/* ── 시그니처: 날짜 명패 ──
   거리 표지판의 형태를 그대로 빌려왔다. 숫자는 tabular 로 자릿수를 맞춰
   목록을 세로로 훑을 때 날짜가 기둥처럼 정렬되게 한다(동행 목록의 정렬 키가 날짜다). */
.plaque {
  flex: 0 0 auto;
  background: var(--plaque);
  color: #fff;
  padding: 0.12rem 0.42rem;
  border-radius: 2px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .plaque { color: #0f1419; }
}

.meta, .empty { color: var(--muted); font-size: 0.8rem; }
.meta { font-variant-numeric: tabular-nums; }

.badge {
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--glaze);
  border-radius: 2px;
  padding: 0.05rem 0.4rem;
  white-space: nowrap;
}
.more { display: inline-block; margin-top: 0.7rem; font-size: 0.9rem; }

/* ── 글쓰기 진입 ──
   명패와 같은 코발트를 쓰되 역할이 다르다: 명패는 작고 반복되는 '표지', 이건 화면당 하나인 '행동'.
   목록 위·아래 두 곳에 둔다 — 모바일에서 길게 훑고 난 뒤가 정작 쓰고 싶어지는 순간인데,
   그때 위로 되돌아가게 만들면 대부분 그냥 나간다. */
.cta {
  display: block;
  margin: 0.55rem 0 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--plaque);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius);
}
.cta:hover { filter: brightness(1.08); }
/* 목록 아래 것은 길게 훑고 난 뒤 눌리는 자리다. 위쪽 것과 달리 크기를 유지한다. */
.cta-tail { margin-top: 1.4rem; padding: 0.62rem 1rem; }
.cta-sm {
  display: inline-block;
  margin: 0;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) { .cta { color: #0f1419; } }

/* 비로그인에게 벽이 아니라 안내를 준다 — 초안이 보존되므로 먼저 써도 된다는 사실을 알린다 */
.cta-hint { margin: -0.35rem 0 0.6rem; color: var(--muted); font-size: 0.8rem; }

.row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.7rem 0 0; }
.row .more { margin-top: 0; }

/* ── 분류 칩 ── 지하철 노선표처럼 납작하게.
   아홉 개가 두 줄을 차지해 첫 글을 화면 밖으로 밀어냈다. 한 줄로 눕히고 옆으로 흐르게 둔다. */
.chips {
  display: flex; flex-wrap: nowrap; gap: 0.35rem;
  margin-block: 0.55rem; padding-bottom: 0.15rem;
  overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  white-space: nowrap;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--glaze);
  border-radius: 2px;
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
}
.chip-on { background: var(--plaque); border-color: var(--plaque); color: #fff; }
@media (prefers-color-scheme: dark) { .chip-on { color: #0f1419; } }

/* ── 본문·상세 ── */
.bodytext { white-space: pre-wrap; margin: 0.9rem 0; }

.contact {
  padding: 0.75rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--glaze);
  border-left: 3px solid var(--plaque);
  border-radius: var(--radius);
}

/* 면책·안전 고지는 색이 아니라 위치와 여백으로 무게를 준다.
   빨간 배너로 겁주면 매번 보는 사람은 곧 무시한다. */
.disclaimer {
  margin-top: 1.2rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--glaze);
  color: var(--muted);
  font-size: 0.82rem;
}

/* ── 폼 ── */
.stack { display: grid; gap: 0.9rem; margin-top: 1.2rem; }
.stack label { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.92rem; }
.stack small { font-weight: 400; color: var(--muted); font-size: 0.82rem; }

input, textarea, button, select {
  font: inherit;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--glaze);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
}
input:focus, textarea:focus, select:focus { border-color: var(--plaque); }
textarea { resize: vertical; }

button {
  width: auto;
  padding-inline: 1.1rem;
  background: var(--plaque);
  border-color: var(--plaque);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
@media (prefers-color-scheme: dark) { button { color: #0f1419; } }

.search { display: flex; flex-wrap: nowrap; gap: 0.4rem; align-items: center; margin-block: 0.55rem; }
.search input { flex: 1 1 6rem; min-width: 0; }
/* 범위 선택은 검색창에 딸린 작은 부속이다 — 한 줄 안에서 자리를 적게 차지하게 둔다. */
.search select { flex: 0 0 auto; width: auto; max-width: 6.4rem; padding-inline: 0.4rem; font-size: 0.85rem; }
.search button { flex: 0 0 auto; }

.inline { display: inline; }
/* 어두운 헤더와 밝은 카드 양쪽에서 쓰인다. 색을 못박으면 한쪽에서 반드시 안 보인다
   — 실제로 댓글 삭제와 관리자 로그아웃 버튼이 흰 배경에 흰 글씨로 사라져 있었다. */
.inline button {
  padding: 0 0.4rem; background: none; border: none;
  color: inherit; opacity: 0.88; font-weight: 400;
}

.formerror { color: var(--safety); font-weight: 600; }
.notice {
  color: var(--muted); font-size: 0.9rem;
  padding: 0.6rem 0.75rem; background: var(--card);
  border: 1px solid var(--glaze); border-radius: var(--radius);
}

.owner-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: var(--space); }
.pager { display: flex; gap: var(--space); margin-top: var(--space); }

/* ── 댓글 ── */
.comments { margin-top: 2rem; border-top: 1px solid var(--glaze); padding-top: var(--space); }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.comment { padding: 0.7rem 0.8rem; background: var(--card); border: 1px solid var(--glaze); border-radius: var(--radius); }
.comment-author { font-size: 0.8rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.comment .bodytext { margin: 0.2rem 0 0; }

/* 신고는 있어야 하지만 눈에 띌 필요는 없다 — 필요할 때 찾을 수 있으면 된다 */
/* 신고. 있어야 하지만 눈에 띌 필요는 없다 — 읽는 사람의 시선을 가져가면 안 된다. */
.reportbar { margin-top: 0.9rem; }
.reportlink {
  padding: 0; background: none; border: none;
  color: var(--muted); font-size: 0.8rem; font-weight: 400;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.reportpop {
  width: min(22rem, calc(100vw - 2rem));
  padding: 1rem; border: 1px solid var(--glaze); border-radius: var(--radius);
  background: var(--card); color: var(--ink);
}
.reportpop::backdrop { background: rgb(15 20 25 / 0.35); }
.reportpop-title { margin: 0; font-weight: 700; }
.reportpop-actions { display: flex; align-items: center; gap: 0.8rem; }
.comment-actions { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.4rem; }
.comment-actions .reportbar { margin-top: 0; }
.comment-actions .inline button { font-size: 0.8rem; color: var(--muted); text-decoration: underline; }

/* popover 를 모르는 브라우저에서는 폼이 늘 펼쳐진다. 그때는 여는 버튼이 군더더기다. */
@supports not selector(:popover-open) {
  .reportlink { display: none; }
}

.site-footer {
  margin-top: 2.5rem;
  padding: var(--space);
  border-top: 1px solid var(--glaze);
  color: var(--muted);
  font-size: 0.8rem;
}
.site-footer p { margin: 0.4rem 0; }

/* 이 앱에는 애니메이션이 없다 — 피곤한 여행자에게 움직임은 방해다.
   상태 변화만 즉각적으로 보이면 된다. 그래도 선호는 존중한다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* 사진 — 본문 폭을 넘지 않게만 두고, 비율은 원본 그대로 둔다. */
.photo, .preview {
  display: block; width: 100%; height: auto;
  margin-block: 0.7rem; border: 1px solid var(--glaze); border-radius: var(--radius);
  background: var(--glaze);
}
.imagefield { display: grid; gap: 0.35rem; }
.imagefield input[type=file] { font-size: 0.9rem; }
.imagefield .hint { min-height: 1.2em; margin: 0; font-size: 0.85rem; color: var(--muted); }
.imagefield .preview { max-height: 40vh; object-fit: contain; }
.linkish {
  justify-self: start; padding: 0.2rem 0; background: none; border: none;
  color: var(--muted); font-size: 0.85rem; text-decoration: underline; cursor: pointer;
}

/* 새 댓글 표시. 숫자가 붙는 작은 알약. */
.pip {
  display: inline-block; padding: 0.05rem 0.4rem; border-radius: 999px;
  background: var(--plaque); color: #fff;
  font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; vertical-align: middle;
}
@media (prefers-color-scheme: dark) { .pip { color: #0f1419; } }
.site-header .pip { background: #fff; color: var(--header); }

/* 좋아요. 누르기 전에는 조용하고, 누르면 명패색으로 채워진다. */
.likebar { display: flex; align-items: center; gap: 0.5rem; margin-block: var(--space); }
.like {
  background: none; color: var(--plaque);
  border: 1px solid var(--plaque); border-radius: var(--radius);
  padding: 0.35rem 0.9rem; font-weight: 600; cursor: pointer;
}
.like-on { background: var(--plaque); color: #fff; }
/* --plaque 는 어두운 테마에서 밝게 뒤집힌다. 바탕으로 쓴 자리는 글씨도 같이 뒤집어야 한다 */
@media (prefers-color-scheme: dark) { .like-on { color: #0f1419; } }
.likecount { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

/* 올린 시각. 읽는 데 방해가 되지 않게 낮추되, 숫자는 자리를 지키게 한다. */
.ago { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.comment .meta { margin-left: 0.4rem; font-size: 0.82rem; }

/* 목록의 반응 수. 제목을 밀어내지 않게 작고 붙어 있는다. */
.cnt { margin-left: 0.3rem; font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cnt-c { color: var(--plaque); font-weight: 700; }
.cnt-l { color: var(--muted); }
.badge-hot { background: var(--plaque); color: #fff; border-color: var(--plaque); }
@media (prefers-color-scheme: dark) { .badge-hot { color: #0f1419; } }

/* 목록 한 줄: [좋아요 또는 날짜] [작은 그림] [제목·정보].
   레퍼런스(에펨/디시 계열)의 구조다 — 훑을 때 눈이 왼쪽 숫자로 먼저 간다. */
.card--row {
  display: grid;
  grid-template-columns: 2.3rem 2.6rem minmax(0, 1fr);
  gap: 0 0.6rem;
  align-items: center;
}
.card--row .card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
/* 세로로 쌓으므로 '제목은 한 줄 통째로' 규칙(flex-basis:100%)은 여기서 필요 없다. */
.card--row .card-body > a { flex-basis: auto; }
/* 제목과 댓글 수는 한 줄이다. 숫자가 아래로 떨어지면 어느 글의 것인지 흐려진다. */
.card-head { display: block; }
/* 동행 목록은 첫 칸이 숫자가 아니라 날짜 명패라 폭이 다르다. */
.card--row.card--dated { grid-template-columns: auto 2.6rem minmax(0, 1fr); }

/* 목록에 사진이 한 장도 없으면 그 칸은 빈 회색 타일만 스무 번 반복한다 — 정보량이 0 이다.
   그럴 때만 칸을 접는다. 사진이 한 장이라도 올라오면 저절로 되돌아온다(손댈 필요 없다).
   :has() 를 모르는 옛 브라우저에서는 지금까지의 모습 그대로다. */
.cards:not(:has(img.thumb)) .thumb-none { display: none; }
.cards:not(:has(img.thumb)) .card--row { grid-template-columns: 2.3rem minmax(0, 1fr); }
.cards:not(:has(img.thumb)) .card--row.card--dated { grid-template-columns: auto minmax(0, 1fr); }

.score {
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.score-mark { font-size: 0.7rem; }
.score-n { font-size: 0.95rem; font-weight: 700; color: var(--ink); }

.thumb {
  width: 2.6rem; height: 2.6rem; border-radius: 2px;
  object-fit: cover; background: var(--paper); border: 1px solid var(--glaze);
}
/* 사진이 섞여 있을 때, 사진 없는 글도 줄 높이가 흔들리지 않게 같은 자리를 차지한다.
   자리만 지키면 되므로 무늬는 그리지 않는다 — 반복되면 그 자체가 소음이다. */
.thumb-none { display: block; background: none; border-color: transparent; }

/* 헤더의 브랜드와 설명. 로마자 이름이 먼저 서고 한글 설명이 뒤를 받친다.
   좁은 화면에서는 아래로 내려가되 이름이 잘리지 않는다. */
.brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
.brand-sub {
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0;
  opacity: 0.82; white-space: nowrap;
}