/* 투어 페이지(/{country}/{city}/things-to-do) 전용.
*
* 🔴 2026-09-07 — 이 파일은 클로드 디자인 산출물(「카드 채널 로그 눈금」)을 이식한 것이다.
* 원본은 tokens/tokens.css + components/things_to_do.css 두 파일이었고, 옮기면서
* **세 가지만 고쳤다.** 원본을 다시 받아 비교할 일이 생기면 이 셋만 보면 된다:
* ① 원본 tokens.css 의 @import 두 줄을 지웠다.
* · 디자인 시스템 colors_and_type.css → 사이트에 없는 파일이다.
* · fonts.googleapis.com (Noto Sans KR · Nanum Myeongjo) → 폰트는 city.css 의
* --serif/--sans 를 그대로 쓰기로 하고 지웠다.
* 🔴 2026-09-07 정정 — 이 자리에 원래 「CSP(default-src 'self')에 걸린다」고
* 적혀 있었다. **틀렸다.** 라이브 CSP 헤더를 직접 재 보니 구글 폰트를
* 명시적으로 허용한다:
* style-src 'self' 'unsafe-inline' https://fonts.googleapis.com …
* font-src 'self' https://fonts.gstatic.com https://www.gstatic.com data:
* 진짜 문제는 CSP 가 아니라 **things_to_do.html 과 flight.html 만 폰트
* 줄이 빠져 있다**는 것이었다(나머지 10개 템플릿에는 있었다).
* 그래서 이 두 페이지의 한글 제목만 기기 폰트로 그려져
* (맥=애플명조, 윈도우=바탕체) 사이트의 나머지와 자형이 달랐다.
* ✅ 2026-09-07 해결 — 두 템플릿에 를 넣었고, 동시에 사이트 전체의
* 한글 명조를 **나눔명조 → 고운바탕(Gowun Batang)** 으로 교체했다.
* --serif 는 city.css:20 에만 있는 게 아니다 — city.css 를 안 부르는
* index·country·popular·ranking·legal 다섯 템플릿이 :root 에 자기 값을
* 따로 갖는다. **폰트를 또 바꿀 일이 생기면 여섯 곳을 전부 고칠 것.**
* (영문·숫자는 Playfair Display 가 먼저라 안 바뀐다. 바뀌는 건 한글뿐.)
* ② 원본이 :root 에 다시 적어 둔 --ink · --fg1 · --fg2 · --fg3 · --line · --fill-muted ·
* --fill-sunken · --serif · --sans 를 지웠다. 값이 city.css 와 같아서 그대로
* 물려받으면 된다. 두 벌로 두면 언젠가 갈린다.
* 🔴 이 줄에 별표+슬래시(--fill-* 식 줄임표기)를 쓰지 말 것. 그 두 글자가 CSS
* 주석을 여기서 닫아 버려, 아래 :root 블록이 통째로 파서에서 사라진다.
* (2026-09-07 실제로 그렇게 났다 — 토큰 40여 개가 한꺼번에 죽어 화면이
* 디자인과 딴판이 됐는데, CSS 는 에러를 안 내므로 아무 데도 안 남았다.)
* ③ --tx / --tx2 는 남겼다. 🔴 이 둘은 season.css 에서 `.sr-article` 안에만 정의돼 있는데
* 이 페이지는 더 이상 .sr-article 을 쓰지 않아서, 여기서 안 만들면 색이 통째로 죽는다.
*
* 로드 순서: city.css → season.css → 이 파일. 앞의 둘은 사이트 공용이라 고치지 않는다.
* 이 파일은 .td- 클래스만 정의하고 태그 셀렉터를 전역으로 건드리지 않는다(.td-page 하위로만).
* JS 없이 완성된다.
*
* ⚠️ 산출물에 CSS 는 있는데 페이지가 안 쓰는 컴포넌트가 셋 있다 — .td-basis(가격 기준 띠) ·
* .td-catnav/.td-chip(종류 이동 칩) · .td-dist(종류 분포). 디자이너의 최종 페이지에서
* 빠졌다. 지우지 않고 둔 이유는 데이터가 이미 있어서(d.cats 의 name·count) 붙이기로 하면
* 템플릿만 고치면 되기 때문이다. .td-dist 는 막대 규칙이 없어 미완성이다.
*/
:root {
/* ---- 본문 색 ----------------------------------------------------------
🔴 season.css 는 이 둘을 `.sr-article` 안에서만 정의한다. 이 페이지는
.sr-article 을 안 쓰므로 여기서 안 만들면 본문 색이 통째로 죽는다. */
--tx: #3a3a3a; /* 본문 */
--tx2: #6b6b6b; /* 라벨 */
/* ---- 레이아웃 --------------------------------------------------------- */
--td-measure: min(880px, 100% - 80px);
--td-measure-wide: min(1120px, 100% - 80px);
/* ---- 이 페이지의 유일한 유채색 = 네이비 (2026-09-07 사용자 선택) ---------
페이지의 나머지는 흑백이다. 특가·세일 색(빨강/주황)은 여기 존재하지 않는다.
🔴 왜 올리브에서 바꿨나 (되돌릴 생각이 들면 먼저 읽을 것):
① 원래 값 #a8c878/#7aaa48/#508820/#346010/#1a3808 은 내가 고른 게 아니라
city.css 의 --price-1~--price-5 를 그대로 가져온 것이었다. 그 색의 뜻은
「값의 크기」다 — 도시 페이지 달력이 싼 날→비싼 날을 그 5단계로 칠한다.
② 그런데 **이 페이지에는 값을 색으로 칠하는 자리가 하나도 없다.** 유채색이
쓰이는 11곳이 전부 장식이다(배너 획·「종류」 라벨·카드의 「투어」 라벨·
링크 밑줄·다음 카드 호버). 즉 올리브를 지킬 근거가 이 페이지 안엔 없었다.
③ 네이비 #1a3a5f 는 season.css 가 본문 링크색·CTA 에 쓰는 색이고 9번 나온다.
flight.css 도 #2d5478 을 쓴다. 새 색을 만든 게 아니라 사이트에서 가장 널리
쓰이는 색을 가져온 것이다.
④ 골드는 배제했다 — flight.css 가 이미 #7a5426 을 「가격 기준」 라벨에,
#9a6b3f 를 **「가장 비싼 달」** 표식에 쓰고 있다. 투어 대표색을 골드로 잡으면
같은 색이 두 페이지에서 다른 뜻이 된다.
🔴 나중에 이 페이지에 가격 막대나 5단계 색칠을 넣게 되면 그때는 이 토큰이 아니라
city.css 의 --price-* 를 쓸 것. 여기 d1~d5 는 이제 「값의 단계」가 아니라
그냥 명도 단계다. */
--td-d1: #9dbcd8;
--td-d2: #5b8cbb;
--td-d3: #2f5f92;
--td-d4: #1a3a5f;
--td-d5: #0f2338;
--td-track: #ebebeb; /* 눈금 트랙 / 데이터 없음 */
--td-accent: #2f5f92;
/* ---- 상태 ------------------------------------------------------------- */
--td-focus: #0a0a0a;
--td-shadow-1: 0 1px 2px rgba(10, 10, 10, .04), 0 1px 1px rgba(10, 10, 10, .03);
--td-shadow-2: 0 4px 14px rgba(10, 10, 10, .06), 0 1px 3px rgba(10, 10, 10, .04);
/* ---- 라운드 (작고 절제된 값만) ---------------------------------------- */
--td-r-xs: 2px;
--td-r-sm: 4px;
--td-r-md: 6px;
--td-r-pill: 999px;
/* ---- 간격 (4px 베이스) ------------------------------------------------ */
--td-s1: 4px;
--td-s2: 8px;
--td-s3: 12px;
--td-s4: 16px;
--td-s5: 24px;
--td-s6: 32px;
--td-s7: 48px;
--td-s8: 64px;
--td-s9: 96px;
/* ---- 타이포 스케일 ---------------------------------------------------- */
--td-t-h1: clamp(30px, 6vw, 52px);
--td-t-h2: clamp(22px, 3.2vw, 30px);
--td-t-h3: clamp(19px, 2.4vw, 23px);
--td-t-body: 16px; /* 한글 본문은 15px 보다 한 단 올린다 */
--td-t-small: 13.5px;
--td-t-micro: 11.5px;
--td-t-price: clamp(19px, 2.6vw, 26px);
--td-t-rank: 15px;
/* ---- 모션 ------------------------------------------------------------- */
--td-ease: cubic-bezier(.2, .6, .2, 1);
--td-dur: 150ms;
}
/* ---------------------------------------------------------------- 페이지 골격 */
.td-page {
background: #fff;
color: var(--tx);
font-family: var(--sans);
font-size: var(--td-t-body);
line-height: 1.68;
word-break: keep-all; /* 한글 어절 단위 줄바꿈 */
overflow-wrap: break-word;
-webkit-text-size-adjust: 100%;
}
.td-page * { box-sizing: border-box; }
.td-page :where(h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure, blockquote) { margin: 0; }
.td-page :where(ul, ol) { padding: 0; list-style: none; }
.td-wrap { width: var(--td-measure); margin-inline: auto; }
.td-wrap--wide { width: var(--td-measure-wide); }
.td-page a {
color: var(--fg1);
text-decoration-color: var(--line-strong, #cfcfcf);
text-underline-offset: 3px;
}
.td-page a:hover { color: var(--fg1); text-decoration-color: var(--td-d3); }
.td-page a:focus-visible,
.td-page :where(summary, button):focus-visible {
outline: 2px solid var(--td-focus);
outline-offset: 3px;
border-radius: var(--td-r-xs);
}
/* 섹션 --------------------------------------------------------------------- */
/* 🔴 2026-09-07 — 섹션 사이 구분선을 지웠고(원래 `.td-section + .td-section
{ border-top: 1px solid var(--line) }`), 그러면서 여백도 s8(64px) → s7(48px) 로
줄였다. 사용자 요청.
왜 선을 지웠나 — 실측 좌우 끝값이 이 페이지에서 이 선 하나만 다르다:
섹션 구분선 0 → 1200 (화면 전폭)
h2 패널 · 목록 위 잉크선 · 카드 사이 실선 전부 160 → 1040 (본문 기둥)
본문 기둥 안에서 시작하고 끝나는 다른 모든 선과 달리 이것만 화면 끝까지 뻗어
아무 것과도 안 맞물렸다. 게다가 위아래 64px 씩 128px 빈칸 한가운데 혼자 떠 있었다.
선을 넣은 상태와 뺀 상태를 같은 자리에서 찍어 비교했는데 구분이 거의 안 됐다 —
「새 절이 시작한다」는 이미 h2 패널(채운 면 + 왼쪽 네이비 4px 획)이 훨씬 크게
말하고 있어서 1px 헤어라인이 같은 말을 더 작은 목소리로 되풀이하는 꼴이었다.
⚠️ 다시 넣지 말 것. 이 페이지엔 이미 선이 6종(1px 헤어라인 4곳 · 2px 잉크 ·
점선) 돌아다닌다. 종류를 늘릴수록 각 선이 무슨 뜻인지가 흐려진다.
여백을 왜 같이 줄였나 — 선이 사라지면 128px 은 그냥 빈 구멍이다. 96px 로 줄여도
위계는 남는다: 같은 섹션 안 종류칸 사이가 64px(.td-cat:816)이라 섹션 경계가
여전히 1.5배 넓다. 64px 까지 내리면 그 둘이 같아져 경계가 사라지므로 내리지 말 것. */
.td-section { padding-block: var(--td-s7); }
/* 섹션 머리 = 밝은 면 배너 (2026-09-07 사용자 선택 · 「밝은 면 뒤집기」 + 네이비).
before : 검은 띠(#1a1a1a) 안에 흰 세리프 제목, 띠 아래 모서리에 올리브 3px 전폭.
after : 아주 옅은 네이비 면 위에 검은 세리프 제목, 왼쪽 모서리에 네이비 4px 세로 획.
왜 어두운 면을 버렸나:
검은 면이 페이지에 4개 깔리면 히어로(유일하게 어두운 자리)와 무게가 같아진다.
밝은 면은 「구역이 여기서 시작한다」는 뜻은 그대로 주면서 위계는 안 뺏는다.
왜 h3 이 아니라 h2 인가 (되돌릴 생각이 들면 먼저 읽을 것):
① h2 는 4개가 페이지 전체에 흩어져 있고 h3 는 6개가 한 섹션 안에 연달아 온다.
면을 h3 에 주면 그 섹션이 막대 더미가 되고 그 섹션의 머리인 h2 가 자기
자식에게 묻힌다.
② 채워진 면은 선보다 무조건 세게 읽힌다 — 센 쪽이 위여야 위계가 안 뒤집힌다.
🔴 칸 사진(.td-cathead__media)을 넣으면 강한 면이 h2·h3 둘이 된다 —
**그때 이 배너를 다시 볼 것.**
대비 실측(계산값): 글자 #14150f on #e9eef4 = 16.86:1 · 획 #2f5f92 on #e9eef4 = 5.67:1.
🔴 글자색 #14150f 는 따뜻한 먹색이다(시안 6벌이 공유하던 값 그대로 확정). 차가운
먹색으로 바꾸고 싶으면 여기 한 줄만 고치면 된다 — 다른 데 안 퍼져 있다. */
.td-h2 {
position: relative;
overflow: hidden;
margin-bottom: var(--td-s6);
padding: var(--td-s5) var(--td-s5) var(--td-s5) 32px;
background: #e9eef4;
border-radius: var(--td-r-sm);
font-family: var(--serif);
font-size: var(--td-t-h2);
font-weight: 700;
line-height: 1.2;
color: #14150f;
letter-spacing: -.005em;
}
/* 섹션 시작 표식: 네이비 4px 세로 획. 왼쪽 padding 32px 이 이 획의 자리다.
🔴 height: auto 를 지우지 말 것. 이 규칙은 원래 「띠 아래 전폭 3px」이라
height: 3px 였고, inset 만 세로로 바꾸면 top/bottom/height 가 과잉지정돼
bottom 이 무시된다 — 획이 4×3px 점으로 렌더된다. CSS 오류도 안 나고 콘솔도
조용하다. 2026-09-07 시안 작업에서 실제로 당했다. */
.td-h2::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
height: auto;
background: var(--td-d3);
}
/* 🔴 배너가 밝은 면(#e9eef4)으로 바뀌었으므로 아래 color:#fff 는 이제 안 읽힌다.
이 클래스를 실제로 쓰게 되면 --tx2(#6b6b6b) 로 되돌릴 것 — #e9eef4 위에서 5.51:1 이다.
(지금 템플릿은 이 클래스를 안 쓴다) */
.td-h2__sub {
display: block;
margin-top: var(--td-s2);
font-family: var(--sans);
font-size: var(--td-t-small);
font-weight: 400;
line-height: 1.5;
color: #c9c9c9;
letter-spacing: 0;
}
.td-eyebrow {
font-size: var(--td-t-micro);
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--fg3);
}
/* ============================================================== 1. 히어로 */
/* 왜 이 형태인가: 첫 화면에서 「무슨 페이지인가」와 「어디서 온 데이터인가」를
동시에 답해야 한다. 그래서 제목 아래 배지 두 줄(출처·개수 / 조회일)이 사진
위에 함께 서고, 사진은 상단만 살짝, 하단은 진하게 덮어 흰 세리프가 4.5:1을
넘긴다. 높이를 58vh 로 묶어 바로 아래 「가격 기준」 띠가 스크롤 전에 보인다. */
.td-hero {
position: relative;
display: flex;
align-items: flex-end;
min-height: min(58vh, 520px);
padding-block: var(--td-s8) var(--td-s6);
background: #1a1a1a; /* 사진 없을 때의 중성 어두운 판 */
overflow: hidden;
isolation: isolate;
}
.td-hero__media {
position: absolute;
inset: 0;
z-index: -2;
background-position: 50% 55%;
background-size: cover;
background-repeat: no-repeat;
}
.td-hero::after { /* 스크림 */
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(10,10,10,.25) 0%, rgba(10,10,10,.5) 52%, rgba(10,10,10,.82) 100%);
}
.td-hero__inner { display: flex; flex-direction: column; gap: var(--td-s4); }
.td-hero__title {
font-family: var(--serif);
font-size: var(--td-t-h1);
font-weight: 700;
line-height: 1.08;
letter-spacing: -.01em;
color: #fff;
max-width: 20ch;
}
.td-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--td-s3); }
.td-badge {
display: inline-flex;
align-items: center;
gap: var(--td-s2);
padding: 7px 12px;
border: 1px solid rgba(255,255,255,.4);
border-radius: var(--td-r-pill);
font-size: var(--td-t-small);
font-weight: 500;
line-height: 1.3;
color: #fff;
background: rgba(10,10,10,.35);
backdrop-filter: blur(6px);
/* 조회일의 숫자 자리를 고정한다. 날짜가 아닌 칩에서도 해가 없다. */
font-variant-numeric: tabular-nums;
}
.td-badge__dot {
width: 6px; height: 6px; flex: none;
border-radius: 50%;
background: var(--td-d1);
}
/* 🔴 `.td-hero__date` 는 없앴다 (2026-09-08 사용자 지시). 히어로 메타 세 개 중
하나만 테두리가 있어서 셋을 전부 `.td-badge` 로 통일했다.
테두리 얘기만이 아니다 — 칩은 위아래 안쪽 여백이 7px 인데 맨 글씨는 0 이라,
flex `gap` 이 12px 로 같아도 **글자 사이 거리가 19px / 12px 로 어긋나 보였다**
(390px 실측: 칩 높이 34 vs 맨 글씨 23). 셋 다 칩이면 높이가 34 로 같아져
간격이 저절로 맞는다.
⚠️ 여기에 「날짜 전용」 클래스를 다시 만들지 말 것. 모양을 바꿔야 하면 `.td-badge` 를 고친다. */
/* ==================================================== 2. 서론 + 가격 기준 */
/* 왜 이 형태인가: 서론은 한 문단·한 크기라는 조건을 지키되, 계약 고지
「예약 시점에 달라질 수 있습니다.」만 잉크 700 + 2px 밑줄로 조판해 회색
작은 글씨로 묻히지 않게 했다. 색을 쓰지 않은 이유는 특가 톤을 피하기 위함.
문단 위 「가격 기준」 띠는 스크롤 전에 시작가라는 사실을 못 박는 자리다. */
.td-basis {
border-bottom: 1px solid var(--line);
background: var(--fill-sunken);
}
.td-basis__inner {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--td-s2) var(--td-s5);
padding-block: var(--td-s4);
}
.td-basis__key {
font-size: var(--td-t-micro);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--fg3);
flex: none;
}
.td-basis__val { font-size: var(--td-t-small); color: var(--tx); }
.td-basis__val b { font-weight: 700; color: var(--fg1); }
.td-basis__sample {
font-family: var(--serif);
font-size: 15px;
font-weight: 600;
color: var(--fg1);
font-variant-numeric: tabular-nums;
}
/* 🔴 아래 여백을 s7(48px) → s5(24px) 로 줄였다 (2026-09-07 사용자 요청 — "서론과
'가장 많이 팔린 것' 사이가 너무 넓다"). 서론 뒤 첫 섹션의 위 여백도 같이 줄인다
(바로 아래 .td-intro + .td-section 규칙). 둘이 더해져 112px 이던 것이 56px 이 된다.
⚠️ 이때는 .td-section 자체를 안 건드렸다 — 「서론↔첫 섹션」만 가까워지게 하려고.
(그 뒤 같은 날 .td-section 은 구분선 삭제와 함께 48px 로 따로 내렸다 — 위 154행.
이 규칙 32px 은 그것과 무관하게 여전히 서론 전용 값이다.) */
.td-intro { padding-block: var(--td-s7) var(--td-s5); }
.td-intro + .td-section { padding-top: var(--td-s6); }
/* 서론 박스 (2026-09-07 사용자 요청). 모양은 이 페이지에 이미 있는 두 가지를 합친 것이다 —
.td-cathead--nophoto 의 「잉크 4px 위선」 + .td-note 의 「가라앉은 바탕」.
🔴 유채색(--td-d*)을 쓰지 않는다. 이 페이지에서 올리브는 「값의 크기」 자리 전용이고,
계약 고지가 든 상자에 색을 칠하면 특가 배너로 읽힌다. */
.td-intro__box {
padding: var(--td-s6);
background: var(--fill-sunken);
border: 1px solid var(--line);
border-top: 4px solid var(--fg1);
border-radius: 0 0 var(--td-r-sm) var(--td-r-sm);
}
.td-intro__p {
/* 🔴 2026-09-07 — clamp(17px, 1.9vw, 19px) 에서 내렸다. 크게 느껴진다는 지적이 맞았고,
이유가 크기 하나가 아니다. 이 문단은 아래에서 text-align:justify 인데 .td-page 가
word-break:keep-all 이라 늘어날 수 있는 건 어절 사이 공백뿐이다. 글자가 클수록 한 줄에
들어가는 어절이 줄고, 그만큼 남는 폭을 적은 수의 공백이 나눠 가져 사이가 벌어진다.
19px 실측에서 둘째 줄 어절 간격이 눈에 띄게 성겼다. 17px 은 그 벌어짐이 사라진다.
🔴 「서론이니까 커야 한다」는 이유로 다시 올리지 말 것 — 이 문단을 서론으로 만드는 건
크기가 아니라 상자다(가라앉은 바탕 + 위쪽 잉크 4px). 크기는 본문 16px 보다
한 단만 위면 족하다.
모바일 하한도 17px → 16px 로 내렸다. 폭이 좁을수록 위의 공백 벌어짐이 심해진다. */
font-size: clamp(16px, 1.7vw, 17px);
line-height: 1.85;
color: var(--tx);
text-wrap: pretty;
/* 양쪽 정렬 (2026-09-07 사용자 요청). 오른쪽 끝이 들쭉날쭉해 보이던 것을 맞춘다.
⚠️ .td-page 가 word-break:keep-all 이라 어절 중간에서 안 끊는다 = 늘어나는 건
어절 사이 공백뿐이다. 그래서 공백이 적은 줄은 사이가 넓게 벌어질 수 있다.
폭을 더 좁히면(문단 max-width) 더 벌어진다 — 줄이려면 keep-all 을 풀어야 하는데
그건 한글 줄바꿈 품질을 버리는 일이라 안 한다. */
text-align: justify;
}
.td-intro__p b { font-weight: 700; color: var(--fg1); }
/* 🔴 밑줄(border-bottom 2px)을 뺐다 (2026-09-07 사용자 요청).
강조는 굵기(700) + 진한 색(--fg1)만으로 남긴다. 이 문장은 마이리얼트립 계약이
요구하는 고지라 **지우면 안 되지만**, 링크가 아닌 글에 밑줄을 그으면 누를 수 있는
것처럼 보인다 — 이 문단 안의 다른 강조(.td-intro__p b)도 밑줄 없이 굵기만 쓴다.
⚠️ white-space:nowrap 은 남긴다. 고지 문장이 줄바꿈으로 쪼개지면 안 된다
(좁은 화면에서는 927행이 normal 로 되돌린다). */
.td-intro__p .td-notice {
font-weight: 700;
color: var(--fg1);
white-space: nowrap;
}
/* ================================================== 4. 판매 순위 표식 */
/* 왜 이 형태인가: 순번은 우리가 매긴 등급이 아니라 마이리얼트립 판매량순의
원본 값이다. 그래서 메달·별 같은 장식 없이 세리프 숫자 + 「위」로만 쓴다.
종류별 목록에서는 4·17·33처럼 띄엄띄엄 오므로 두 자리에서도 폭이 흔들리지
않게 tabular-nums + 고정 폭 칸을 쓴다. */
/* 🔴 순위 칸은 이제 「숫자 + (있으면) 썸네일」 두 층이다. 세로 스택으로 바꾼 이유는
.td-card__thumb 주석에 있다 — 사진을 새 열로 끼우면 그 행만 글이 밀린다.
숫자와 「위」의 baseline 정렬은 안쪽 .td-rank__n 이 그대로 이어받는다. */
.td-rank {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: var(--td-s2);
font-family: var(--serif);
font-variant-numeric: tabular-nums;
color: var(--fg1);
line-height: 1;
}
.td-rank__n { display: flex; align-items: baseline; gap: 1px; }
.td-rank b { font-size: 22px; font-weight: 700; }
.td-rank i {
font-style: normal;
font-family: var(--sans);
font-size: var(--td-t-micro);
font-weight: 500;
color: var(--fg3);
}
.td-rank--sparse b { font-size: 20px; }
/* ================================================== 3. 상품 카드 (심장) */
/* 왜 이 형태인가: 우리가 가진 필드만 그린다 — 순위·이름·종류·시작가·별점·후기.
한 상품이 한 화면에서 여러 개 비교되어야 하므로 세로 길이를 최소로 줄였다:
종류와 프로모션 태그를 이름 위 한 줄로 합치고, 이름은 2줄에서 말줄임하고,
지표는 오른쪽 칸에서 「가격 → 별점·후기」 두 줄로만 선다.
위계는 활자 크기로만 만든다 — 가격은 세리프 대형, 별점·후기는 13.5px 보조.
카드는 테두리·그림자 없이 헤어라인으로만 나뉜다(설명 박스와 구분되는 근거).
상품명은 대괄호 프로모션 태그를 칩으로 떼어내고, 원문 전체는 링크 title 에 남긴다. */
.td-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
/* 🔴 종류별 칸 안에서는 이 위선이 헤어라인이 아니라 **잉크 2px** 다 — 칸 머리에 있던
선이 여기로 내려온 것이고(2026-09-07 시안 A, .td-cathead--nophoto 주석 참고),
「여기서부터 목록」을 표시한다.
⚠️ 반드시 .td-cat 안으로 한정한다. 범위를 빼면 페이지 맨 위 「판매 상위」 목록
(things_to_do.html:248)까지 같이 굵어진다 — 그쪽은 h2 잉크 배너가 이미 경계를
만들고 있어서 선이 두 겹이 된다. .td-list 를 쓰는 곳은 그 둘뿐이다. */
.td-cat .td-list { border-top: 2px solid var(--fg1); }
.td-card {
position: relative;
display: grid;
/* 🔴 첫 열은 3.5rem(56px) 이다. 2.8rem 이었는데 썸네일 56px 을 순위 칸 안에 넣으면서
넓혔다. 사진이 없는 행도 같은 폭이라 목록 전체의 글 시작점이 하나로 유지된다 —
사진 유무로 줄이 어긋나던 것이 이 한 줄로 해결된다. */
grid-template-columns: 3.5rem minmax(0, 1fr) 11.5rem;
gap: var(--td-s2) var(--td-s5);
align-items: center;
padding: var(--td-s4) 0;
border-bottom: 1px solid var(--line);
transition: background var(--td-dur) var(--td-ease);
}
.td-card:hover { background: var(--fill-muted); box-shadow: 0 0 0 8px var(--fill-muted); }
/* 상품 썸네일(마이리얼트립 실사진).
🔴 **열을 늘리지 않는다.** 처음엔 순위와 글자 사이에 열을 하나 끼웠는데, 사진이 있는
행만 글이 68px 밀려 목록이 무너졌다(실측: 있는 행 x=135 / 없는 행 x=67).
순위 칸은 모든 행에 이미 있으므로 **그 안에 세로로 쌓는다** — 열 구조가 안 변해
사진이 일부 행에만 있어도 글 시작점이 흔들리지 않는다.
🔴 반경은 8px 이 아니라 --td-r-sm(4px) 이다. 이 파일의 반경 토큰은 2px·4px 두 개뿐이라
8px 은 척도 밖이었고, 사진만 다른 언어로 말하게 만든다.
⚠️ 원본 비율이 제각각이라(가로 980x735 · 세로 828x936 둘 다 온다) CDN 축소만으로는
줄이 안 맞는다. **정사각은 여기서 만든다** — aspect-ratio + object-fit:cover. */
.td-card__thumb {
display: block;
width: 56px;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--td-r-sm);
background: var(--fill-muted); /* 로딩 중·실패 시 회색 자리 */
}
.td-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-card__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* 종류 + 프로모션 태그를 한 줄에 합쳐 줄 수를 줄인다 */
.td-meta {
display: flex;
align-items: center;
gap: var(--td-s2);
min-width: 0;
overflow: hidden;
}
/* 줄머리 라벨. 「투어」·「입장권」 같은 종류가 기본이고, **「다녀올 만한 곳」 절에서는
지명이 이 자리에 온다**(매크로 `kind` 인자).
🔴 색이 여기 있는 이유 (2026-09-07 사용자 요청 — 「다 검은색이라 지역이 눈에 안 띈다」):
그 절에서 독자가 찾는 말은 지명 하나인데 지명·상품명·값·지표가 전부 --fg1(#0a0a0a)이면
어디를 먼저 볼지가 활자 크기로만 갈린다. 이 자리가 네이비라 그 문제가 규칙 추가 없이 풀린다.
🔴 새 색이 아니다 — 이 페이지의 유일한 유채색 --td-d4(#1a3a5f)이고
.td-cathead__eyebrow 가 이미 글자색으로 쓴다. 흰 바탕 11.6:1.
🔴 한 단계 밝은 --td-d3(#2f5f92)은 배제했다. 눈에는 더 띄지만 **링크로 읽힌다** —
이 줄에서 진짜 링크는 바로 밑 상품명(검정+호버 밑줄)이라 신호가 거꾸로 선다.
⚠️ 428행의 「위계는 활자 크기로만」 원칙에 대한 의도된 예외다. 이 라벨 한 자리에만 준다 —
상품명까지 물들이면 색이 뜻을 잃는다. */
.td-card__kind {
flex: none;
font-size: var(--td-t-micro);
font-weight: 700;
letter-spacing: .08em;
color: var(--td-d4);
}
.td-tag {
display: block;
flex: none;
max-width: 26ch;
padding: 2px 7px;
border: 1px solid var(--line-strong, #cfcfcf);
border-radius: var(--td-r-xs);
font-size: var(--td-t-micro);
font-weight: 500;
line-height: 1.4;
color: var(--tx2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.td-card__name {
font-size: clamp(15.5px, 1.7vw, 17px);
font-weight: 500;
line-height: 1.45;
letter-spacing: -.003em;
color: var(--fg1);
}
.td-card__name a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
text-decoration: none;
overflow-wrap: anywhere; /* 띄어쓰기 없는 지명 나열 대비 */
}
.td-card__name a::after { /* 카드 전체를 터치 타깃으로 (44px 초과) */
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.td-card:hover .td-card__name a { text-decoration: underline; text-decoration-color: var(--fg2); }
/* 지표 칸: 가격 한 줄 + 별점·후기 한 줄. 막대·축·칸 같은 그래픽은 쓰지 않는다. */
.td-metrics {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
padding-left: var(--td-s4);
border-left: 1px solid var(--line);
}
.td-price {
display: flex;
align-items: baseline;
gap: 1px;
font-family: var(--serif);
font-variant-numeric: tabular-nums;
color: var(--fg1);
line-height: 1.1;
}
.td-price__num { font-size: clamp(19px, 2.2vw, 23px); font-weight: 700; letter-spacing: -.01em; }
.td-price__won { font-size: .6em; font-family: var(--sans); font-weight: 500; }
.td-price__tilde { /* 물결은 계약상 필수 — 절대 제거 금지 */
font-size: .78em;
font-weight: 700;
color: var(--fg1);
margin-left: 1px;
}
.td-price--ask { font-size: 17px; font-weight: 600; color: var(--fg1); font-family: var(--serif); }
/* 별점·후기: 한 줄. 별 글리프는 하나만 쓴다(다섯 개는 4.5와 5.0을 뭉갠다). */
.td-stat {
display: flex;
align-items: baseline;
gap: var(--td-s2);
font-size: var(--td-t-small);
color: var(--tx2);
font-variant-numeric: tabular-nums;
}
.td-stat__rate { color: var(--fg1); font-weight: 700; }
.td-stat__rate i { font-style: normal; font-weight: 400; color: var(--fg2); margin-right: 2px; }
.td-stat__sep { color: var(--line-strong, #cfcfcf); }
.td-stat__rev b { font-weight: 700; color: var(--fg1); }
/* 데이터 없음: 부서져 보이지도, 0점으로 읽히지도 않게 — 글자로 「없음」을 말한다. */
.td-stat--none { color: var(--tx2); }
/* ============================================== 9. 종류 분포 그래픽 */
/* 왜 이 형태인가: 이 페이지에서 대담함을 쓰는 단 한 곳. 119 대 6 이라는 편중이
곧 「후쿠오카는 시내를 도는 도시가 아니라 벗어나는 도시」라는 결론이라서,
섹션 머리에서 막대 길이로 먼저 말한다. 좌표·소요시간이 없으므로 지도나
동선은 그리지 않고 개수만 쓴다. 합계 190 ≠ 194 의 차이도 같이 적어 숨기지
않는다. 막대는 곧 목록 앵커라서 클릭하면 해당 칸으로 간다. */
.td-dist { display: flex; flex-direction: column; gap: var(--td-s5); margin: 0 0 var(--td-s7); }
.td-dist__cap { display: flex; flex-direction: column; gap: var(--td-s2); }
.td-dist__lead {
font-family: var(--serif);
font-size: clamp(15px, 2.25vw, 22px);
font-weight: 400;
line-height: 1.45;
color: var(--fg1);
}
.td-dist__lead b { font-weight: 700; }
/* 종류 이동 칩 ------------------------------------------------------------ */
.td-catnav {
position: sticky;
top: 0;
z-index: 5;
margin-bottom: var(--td-s2);
display: flex;
flex-wrap: wrap;
gap: var(--td-s2);
padding: var(--td-s3) 0;
background: rgba(255,255,255,.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.td-chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--line-strong, #cfcfcf);
border-radius: var(--td-r-pill);
font-size: var(--td-t-small);
font-weight: 500;
color: var(--fg1);
text-decoration: none;
white-space: nowrap;
transition: background var(--td-dur) var(--td-ease), border-color var(--td-dur) var(--td-ease);
}
.td-chip:hover { background: var(--fill-muted); border-color: var(--fg1); }
.td-chip b { font-variant-numeric: tabular-nums; font-weight: 700; }
.td-chip i { font-style: normal; color: var(--fg3); font-size: var(--td-t-micro); }
/* ============================================== 5. 종류 헤더 (사진 자리) */
/* 왜 이 형태인가: 사진은 카드 40장이 아니라 칸 머리 6장에만 온다. 21:9 의 넓고
낮은 띠 위에 제목과 개수 배지를 왼쪽 아래로 앉히면 「무엇에 관한 칸인가」를
한눈에 말하면서도 카드 그리드의 리듬을 흔들지 않는다. 사진이 없는 도시에서는
미디어 박스를 비워 두지 않고 아예 없애고, 잉크 4px 규칙 + 세리프 제목만 남는
텍스트 헤더로 성립하게 했다(53개 도시가 같은 템플릿을 쓴다). */
.td-cathead { margin-bottom: var(--td-s5); }
.td-cathead--nophoto { margin-bottom: var(--td-s6); }
.td-cathead__media {
position: relative;
display: flex;
align-items: flex-end;
aspect-ratio: 32 / 5;
min-height: 104px;
padding: var(--td-s4);
background: #1a1a1a center/cover no-repeat;
border-radius: var(--td-r-sm);
overflow: hidden;
isolation: isolate;
}
.td-cathead__media::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.45) 55%, rgba(10,10,10,.8) 100%);
}
.td-cathead__stack { display: flex; flex-direction: column; gap: var(--td-s2); }
.td-cathead__media .td-cathead__title { color: #fff; }
.td-cathead__media::before { /* 사진 하단의 얇은 올리브 선 — 칸의 시작 표식 */
content: "";
position: absolute;
inset: auto 0 0 0;
height: 3px;
background: var(--td-d3);
z-index: 1;
}
.td-cathead__title {
font-family: var(--serif);
font-size: var(--td-t-h3);
font-weight: 700;
line-height: 1.25;
color: var(--fg1);
letter-spacing: -.005em;
}
/* 🔴 .td-count (h3 오른쪽 검은 개수 배지) 규칙 5줄을 지웠다 — 2026-09-07 사용자 결정.
사진 있는 칸 머리(.td-cathead__media)를 되살릴 때 이 배지를 같이 되살리지 말 것.
종류별 개수는 FAQ 첫 답(faq_kinds)이 갖는다. */
/* 폴백: 사진 없음 = 눈금 라벨 (2026-09-07 사용자 선택 · 시안 5).
before : 잉크 4px 가로선 아래 세리프 제목만 떠 있었다.
after : 자간 넓힌 올리브 라벨 「종류」 + 세리프 제목 + 아래 잉크 2px.
🔴 2026-09-07 — 잉크 2px 선을 여기서 떼어 목록 위선(.td-cat .td-list)으로 옮겼다 (시안 A).
before : 제목 / 2px선 / 24px 빈칸 / 1px선 / 회색 설명박스 / 1px선 / 32px 빈칸 / 1px선 / 목록
after : 제목 / 12px / 들여쓴 설명글 / 2px선 / 목록
90px 안에 가로선이 네 줄 들어가고 그 사이가 전부 빈칸이라 설명 박스가 제목에도
목록에도 안 붙어 혼자 떠 보였다(칸 높이 719px). 선을 하나로 줄이니 630px 이다.
🔴 잉크선은 없어진 게 아니라 자리를 옮긴 것이다 — 여전히 「여기서부터 목록」을
표시한다. 이 선을 지우면 6칸이 이어질 때 칸 경계가 사라진다.
🔴 선을 .td-note 아래에 붙이면 안 된다. 설명은 tours.CITY_OVERRIDE 에 blurbs 가
있는 도시에만 그려지는데(2026-09-07 현재 후쿠오카뿐) 나머지 도시에서는 박스가
통째로 안 나와 잉크선까지 같이 사라진다. 목록은 어느 도시에도 항상 있다.
🔴 h2 는 잉크 배너(어두운 면)다. 여기는 **선으로만** 짓는다 — 면을 쓰면 h3 가
h2 보다 세게 읽혀 위계가 뒤집힌다. 자세한 판단 근거는 .td-h2 주석에 있다.
🔴 라벨 「종류」는 CSS 가 만들어내지 않는다 — 템플릿의 다. 지어낸 말이 아니라 이 섹션 h2(「…종류별로」)가 쓰는 말이다. */
.td-cathead--nophoto {
display: flex;
flex-direction: column;
gap: var(--td-s2);
margin-bottom: var(--td-s3);
}
/* .td-eyebrow 의 기본색은 --fg3(회색)이다. 칸 머리에서는 네이비로 쓴다 —
이 페이지에서 네이비는 「칸의 시작 표식」 색이고(.td-h2::before 와 같다),
여기서는 선 대신 글자가 그 역할을 한다.
🔴 「선」에 쓰는 --td-d3 가 아니라 한 단계 어두운 --td-d4 다. 글자와 선은 기준이 다르다 —
이 글자는 11.5px 굵은 글씨라 WCAG 「큰 글자」 예외(18.66px 이상 굵게)에 못 들어가고
작은 글자 기준 4.5:1 을 넘겨야 한다. 흰 바탕 실측: d3 #2f5f92 는 6.02:1 로 통과하지만
d4 #1a3a5f 는 11.57:1 이다.
그리고 이건 예외 조치가 아니라 이 파일의 관례다 — 같은 크기의 라벨인
.td-card__kind 가 이미 --td-d4 를 쓴다. (같은 예로 들었던 .td-next__card span 은
2026-09-07 에 사라졌다 — 내부 링크가 흰 카드에서 네이비 판으로 바뀌었다, 736행.)
선으로 쓸 때(.td-h2::before)는 글자가 아니므로 d3 그대로 둔다. */
.td-cathead__eyebrow { color: var(--td-d4); }
.td-cathead--nophoto .td-cathead__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--td-s3);
justify-content: space-between;
}
/* ================================================== 6. 칸 설명글 */
/* 왜 이 형태인가: 카드와 절대 헷갈리면 안 된다(누르는 것이 아니다). 링크가 없으니
커서도 안 바뀌고, 라운드·그림자·호버·잉크 제목이 전부 없다.
🔴 2026-09-07 — 회색 박스를 없애고 제목에 딸린 글로 바꿨다 (시안 A, 사용자 선택).
before : sunken 배경 + 위아래 1px 선을 두른 독립 박스. 위 24px·아래 32px 빈칸.
after : 배경도 테두리도 없이 좌우 24px 들여쓴 글. 아래는 목록 위선에 바로 닿는다.
박스를 두르니 오히려 「제목과 목록 사이에 낀 남의 것」으로 보였다.
🔴 좌우 들여쓰기는 **같은 값**이어야 한다(--td-s5 한 토큰을 양쪽에 쓴다).
한쪽만 넣으면 오른쪽 끝이 목록·제목과 맞아 들여쓴 것이 아니라 왼쪽이
밀린 것처럼 보인다.
⚠️ 들여쓰기를 padding 으로 준 이유: 이 요소에 테두리를 다시 붙일 일이 생겨도
선은 padding 바깥이라 폭 전체를 그대로 가로지른다. margin 으로 주면 선까지
같이 짧아진다. */
.td-note {
margin: 0;
padding: 0 var(--td-s5) var(--td-s5);
background: none;
border: none;
}
/* 🔴 색은 --tx 다. --fg2 로 낮추지 말 것 (2026-09-07 에 한 번 그렇게 했다가 되돌렸다).
이 파일에서 --fg2 는 장식 전용이다 — 카드 호버 밑줄 색과 별 글리프 두 군데뿐이고,
읽는 글은 본문·서론·FAQ 답이 전부 --tx 를 쓴다. 이건 3줄짜리 설명 문단이라 읽는 글이다.
흰 바탕 대비: --tx #3a3a3a 는 11.37:1, --fg2 #6b6b6b 는 5.33:1 로 절반 이하다.
규격은 FAQ 답(.td-faq__a)과 같게 맞췄다 — 성격이 같은 글이다. */
.td-note p {
font-size: 15.5px;
line-height: 1.8;
color: var(--tx);
text-wrap: pretty;
}
.td-note p + p { margin-top: var(--td-s3); }
/* ================================================== 7. 내부 링크 */
/* 왜 이 형태인가: 이 섹션은 페이지의 유일한 「다음 행동」이다. 그래서 한 줄짜리
목록 행을 버리고, **같은 무게의 판을 세로로 쌓는다.**
상품 카드와 헷갈리지 않는 근거: 순위·가격·별점 칸이 없다. 특가 톤을 쓰지 않고
「무엇을 볼 수 있는가」라는 사실만 적는다.
🔴 2026-09-07 — 두 가지를 한꺼번에 바꿨다 (사용자 요청).
① 「큰 판 1 + 흰 카드 2열」 → **판 세로 쌓기.** 링크 성격이 다 같은데
(전부 「값이 얼마인가」) 예전 구조는 첫 링크에만 큰 어두운 판을 주고
나머지를 작은 흰 카드로 눌러 놨다. 그래서 .td-next__hero 를
**.td-next__panel 로 이름을 바꿨다** — 이제 「히어로」가 아니다.
⚠️ 그와 함께 .td-next__pair · .td-next__card 규칙 5개를 **지웠다.**
흰 카드는 이 페이지에 더 이상 없다. 되살릴 생각이 들면 git 이력을 볼 것.
② 배경 검정(--ink) → **네이비(--td-d4 #1a3a5f).** 새 색이 아니라 이 페이지가
이미 쓰는 유일한 유채색이다(57행 주석). 흰 글자 대비 11.6:1 로 검정(19.9:1)보다
낮지만 AAA(7:1) 위다.
⚠️ 이제 페이지에서 어두운 면은 히어로(검정)와 이 판들(네이비) 둘이다.
둘을 같은 색으로 맞추지 말 것 — 히어로는 「제목」이고 이 판은 「링크」다.
⚠️ 하단선(::after)을 --td-d3 에서 --td-d1 로 올렸다. d3(#2f5f92)은 네이비
바탕 위에서 거의 안 보인다(대비 1.8:1). d1 은 4.3:1 로 선으로 읽힌다. */
.td-next { display: grid; gap: var(--td-s3); }
.td-next__panel {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--td-s5);
padding: var(--td-s6) var(--td-s6);
background: var(--td-d4);
border-radius: var(--td-r-sm);
text-decoration: none;
overflow: hidden;
transition: background var(--td-dur) var(--td-ease);
}
.td-next__panel::after { /* 하단선 = 이 페이지의 포인트색 */
content: "";
position: absolute;
inset: auto 0 0 0;
height: 3px;
background: var(--td-d1);
}
.td-next__panel:hover { background: var(--td-d5); }
.td-next__stack { display: flex; flex-direction: column; gap: var(--td-s2); min-width: 0; }
.td-next__eyebrow {
font-size: var(--td-t-micro);
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--td-d1);
}
.td-next__title {
font-family: var(--serif);
font-size: clamp(21px, 2.6vw, 27px);
font-weight: 700;
line-height: 1.25;
color: #fff;
letter-spacing: -.005em;
}
.td-next__sub { font-size: var(--td-t-small); color: rgba(255,255,255,.78); }
.td-next__go {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 1px solid rgba(255,255,255,.4);
border-radius: 50%;
color: #fff;
font-size: 17px;
transition: background var(--td-dur) var(--td-ease), border-color var(--td-dur) var(--td-ease);
}
/* ⚠️ 호버 시 원 버튼은 --td-d2 로 채운다. 예전 --td-d3 은 판 배경이 네이비가 된
지금 배경과 거의 같은 색이라 「눌린 느낌」이 사라진다. */
.td-next__panel:hover .td-next__go { background: var(--td-d2); border-color: var(--td-d2); }
/* ================================================== 8. FAQ */
/* 왜 이 형태인가: JSON-LD 와 글자 단위로 같아야 하므로 접지 않는다(아코디언은
색인·동일성 양쪽에서 위험하다). 질문은 세리프, 답은 산세리프 본문으로 두
목소리를 나눠 스캔되게 하고, 질문마다 헤어라인으로만 끊는다. */
.td-faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.td-faq__item { padding-block: var(--td-s5); border-bottom: 1px solid var(--line); }
.td-faq__q {
font-family: var(--serif);
font-size: 19px;
font-weight: 700;
line-height: 1.4;
color: var(--fg1);
margin-bottom: var(--td-s3);
}
/* 🔴 max-width 를 뺐다. 66ch 로 잘라 두면 양쪽 정렬의 오른쪽 끝이 문단마다 다른
자리에 서서 오히려 안 맞아 보인다 — 폭은 부모가 정하게 둔다.
(2026-09-07 에 아래 padding-inline 이 붙어 서론보다 24px 씩 좁아졌다. max-width 를
다시 넣어 맞추려 하지 말 것 — 문단마다 끝이 어긋나는 그 문제가 그대로 돌아온다.) */
/* 🔴 답을 좌우 24px 씩 안으로 들였다 (2026-09-07 사용자 요청 — "질문보다 조금
오른쪽에서 답변이 시작되게, 좌우 여백은 통일"). 종류칸 설명글(.td-note:706)에
같은 날 같은 이유로 넣은 것과 **똑같은 토큰(s5)** 이다 — 성격이 같은 글이니
들여쓰기 깊이도 같아야 한다. 한쪽만 바꾸지 말 것.
⚠️ margin 이 아니라 padding 인 이유: 항목을 끊는 헤어라인은 부모 .td-faq__item 의
border-bottom 이라 자식 padding 에 영향을 안 받는다. 선은 전폭 그대로 남고
글만 들어간다. margin 으로 하면 글만 들어가는 건 같지만 나중에 이 문단에
배경이나 테두리를 붙일 때 안 맞는다. */
.td-faq__a {
padding-inline: var(--td-s5);
font-size: 15.5px;
line-height: 1.8;
color: var(--tx);
text-wrap: pretty;
text-align: justify;
}
.td-faq__a b { font-weight: 700; color: var(--fg1); }
/* ================================================== 종류 섹션 레이아웃 */
.td-cat { padding-top: var(--td-s8); }
.td-cat:first-of-type { padding-top: 0; }
.td-cat + .td-cat { border-top: 1px solid var(--line); }
/* 🔴 .td-cat__more (「이 칸의 나머지 N개…」 줄) 규칙 2벌을 지웠다 — 2026-09-07 사용자 결정.
그 줄이 칸의 아래 경계선도 겸하고 있었으므로, 경계는 .td-cat 이 직접 긋는다. */
/* 데이터 미수집 슬롯: 상위 5개 자리 가운데 아직 받지 못한 줄. 지어낸 상품명을
넣지 않고 자리만 점선으로 표시한다 — 서버 렌더 시 판매량순으로 채워진다. */
.td-slot {
display: flex;
align-items: baseline;
gap: var(--td-s3);
padding: var(--td-s4) 0;
border-bottom: 1px dashed var(--line-strong, #cfcfcf);
font-size: var(--td-t-small);
color: var(--tx2);
}
.td-slot b { color: var(--fg1); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .td-slot { padding-inline: 0; } }
/* ============================================ 1. 다녀올 만한 곳 */
/* 🔴 이 절에는 전용 규칙이 없다 (2026-09-07 사용자 지시 —
*「글자체나 디자인이나 모두 아래와 똑같이 통일해줘. 왜 이 섹션만 다른가」*).
`.td-list` + `.td-card` 를 아래 두 목록과 **그대로** 같이 쓴다.
지웠던 것: `.td-spots` `.td-spot` `.td-spot__thumb/__name/__price/__item/__meta/__rank/__sep`
(109행). 사진 112px·값 자리·별점 줄이 카드와 제각각이던 원인이 전부 그 블록이었다.
⚠️ **여기에 규칙을 다시 만들지 말 것.** 모양을 바꿔야 하면 카드(.td-card, 455행~)를 고친다 —
그래야 세 목록이 같이 움직인다. 눈으로 맞춰 놓으면 다음에 또 갈린다.
· 지명은 카드의 「투어」 라벨 자리(.td-card__kind)로 간다. 그 자리가 이미 네이비라
「지역이 눈에 안 띈다」는 요청의 답이 규칙 추가 없이 나온다.
· 판매 순위는 안 넘긴다(템플릿에서 `rank` 를 비운다). 칸(3.5rem)은 남으므로
글 시작 x 좌표가 아래 목록과 같다. */
/* ================================================== 반응형 */
/* 데스크탑·모바일 양쪽 모두 1급. 880px 폭에서는 지표가 오른쪽 전용 칸을 갖고,
760px 아래에서는 같은 지표가 카드 아래 가로 한 줄로 재배치된다(축소가 아님). */
@media (max-width: 760px) {
:root { --td-measure: calc(100% - 40px); --td-measure-wide: calc(100% - 40px); }
/* 데스크톱이 s8 → s7 로 내려가면서(154행) 이 값이 같아져 무의미해졌다.
한 단 더 내린다 — 좁은 화면에서 96px 빈칸은 한 화면을 통째로 먹는다. */
.td-section { padding-block: var(--td-s6); }
.td-hero { min-height: 400px; padding-block: var(--td-s7) var(--td-s5); }
.td-card {
/* 🔴 2.2rem(35px) 이었는데 썸네일 44px 이 들어가면 칸을 넘친다. 2.75rem = 44px. */
grid-template-columns: 2.75rem minmax(0, 1fr);
gap: var(--td-s2) var(--td-s3);
padding: var(--td-s4) 0;
align-items: start;
}
/* 폰에서는 썸네일을 44px 로 줄인다. 56px 을 그대로 두면 왼쪽 칸이 화면 폭 390px 의
14% 를 먹어 상품명이 2줄에서 3줄로 늘어난다.
🔴 `.td-metrics { grid-column: 2 / -1 }` 은 손대지 않는다 — 사진이 순위 칸 안에
들어가 있어 열 개수가 PC·폰 모두 사진 유무와 무관하게 같기 때문이다. */
.td-card__thumb { width: 44px; }
.td-rank b { font-size: 19px; }
.td-metrics {
grid-column: 2 / -1;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: var(--td-s3);
padding-left: 0;
border-left: none;
}
.td-h2 { padding: var(--td-s4); }
.td-cathead__media { aspect-ratio: 16 / 7; min-height: 88px; padding: var(--td-s3); }
/* 🔴 좁은 화면에서는 둘 다 들여쓰기를 뺀다. 390px 에서 좌우 24px 씩이면 본문 폭이
350 → 302px 로 14% 줄어 한 줄에 들어가는 글자가 눈에 띄게 적어진다.
데스크톱에서 들여쓰는 이유(제목과 답을 층으로 갈라 보이게)는 화면이 좁으면
어차피 성립하지 않는다. 둘은 같은 토큰을 쓰므로 한쪽만 빼지 말 것. */
.td-note { padding: var(--td-s4) 0; }
/* 🔴 좁은 화면에서 답은 양쪽 정렬을 풀고 왼쪽 정렬로 둔다 (2026-09-07 사용자 —
"모바일로 보니 이상하다"). 들여쓰기 얘기가 아니다. 위에서 padding 을 0 으로
되돌려도 390px 화면의 답글은 어절 사이가 뻥뻥 비어 보이는데, 원인은 이것이다:
.td-page 가 word-break:keep-all 이라 한 어절을 쪼갤 수 없으므로 양쪽 정렬이
늘릴 수 있는 건 **어절 사이 공백뿐**이다. 본문 폭이 350px 까지 좁아지면 한 줄에
어절이 4~6개밖에 안 들어가서, 남는 공간이 그 몇 개 틈에 몰려 공백 하나가
4~5칸이 된다. 실제로 「가장 인기 있는 건」 답이 그렇게 벌어져 있었다
(상품명이 길어 어절 수가 특히 적은 문단).
⚠️ 넓은 화면(841행)의 justify 는 그대로 둔다 — 832px 에서는 한 줄 어절 수가
충분해 같은 문제가 안 생기고, 오른쪽 끝이 맞아야 항목이 줄줄이 선 FAQ 가
정돈돼 보인다. 이건 폭에 따라 갈리는 문제이지 취향이 아니다. */
.td-faq__a { padding-inline: 0; text-align: start; }
.td-catnav { gap: 6px; }
.td-chip { min-height: 44px; padding: 0 12px; }
/* 🔴 2026-09-07 — .td-next__hero → .td-next__panel 로 이름이 바뀌었고
.td-next__pair · .td-next__card 두 줄은 지웠다(그 클래스가 없어졌다).
넓은 화면에서 이미 세로 쌓기라 좁은 화면에서 따로 1열로 만들 게 없다. */
.td-next__panel { padding: var(--td-s5) var(--td-s4); gap: var(--td-s4); }
.td-next__go { width: 44px; height: 44px; }
.td-intro__p .td-notice { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
.td-page *, .td-page *::before, .td-page *::after { transition: none !important; animation: none !important; }
}
@media print {
.td-catnav { position: static; }
.td-card:hover { background: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
🔴 여기서부터는 **이식하면서 내가 덧붙인 것**이다 (2026-09-07). 디자인 산출물에는
없었다. 원본과 대조할 때는 위쪽만 보면 된다.
왜 필요했나: 디자이너의 목업은 히어로에 제목·배지·조회일만 뒀는데, 우리 히어로에는
그 밖에 **내부 링크 두 개**(국가 페이지 · 여행 시기)가 원래부터 있었다. 이건 장식이
아니라 색인 경로라 뺄 수 없다. 그런데 `.td-page a` 가 링크를 잉크색(#0a0a0a)으로
칠하고 있어서 어두운 히어로 위에서는 **글자가 보이지 않는다.**
══════════════════════════════════════════════════════════════════════════ */
.td-hero__eb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: var(--td-t-small);
color: rgba(255, 255, 255, .72);
letter-spacing: .02em;
}
.td-page .td-hero__eb a {
color: #fff;
text-decoration-color: rgba(255, 255, 255, .45);
}
.td-page .td-hero__eb a:hover { color: #fff; text-decoration-color: var(--td-d1); }
/* 도시 영문명. 목업에 자리가 없었지만 기존 히어로가 갖고 있던 값이라 살렸다. */
.td-hero__en {
font-family: var(--sans);
font-size: var(--td-t-small);
font-weight: 500;
letter-spacing: .08em;
color: rgba(255, 255, 255, .7);
}
/* 히어로 사진을 폭에 따라 갈아 끼운다. city.css 의 .hero 가 --hero-lg/--hero-sm 두 벌을
받아 같은 일을 하고 있어서 그 방식을 그대로 가져왔다 — 모바일에 1200px 이미지를
내려보내지 않기 위해서다. 값은 템플릿이 인라인 style 로 넣는다. */
.td-hero__media { background-image: var(--hero-lg); }
@media (max-width: 760px) {
.td-hero__media { background-image: var(--hero-sm); }
}