/* 여행시기 페이지 전용 — city.css 의 :root 토큰 위에 얹는다.
city.css 를 먼저 불러야 --ink/--serif/--price-* 가 산다. */
/* 글자색은 city.css 의 --fg2(#6b6b6b)/--fg3(#9a9a9a)를 쓰지 않는다.
그 값은 카드와 표를 훑어보는 화면용이라, 문단을 끝까지 읽어야 하는
이 페이지에서는 흐려서 눈이 아프다. 여기서만 두 단계 진하게 쓴다. */
.sr-article {
--tx: #3a3a3a; /* 본문·표 값 (흰 배경 대비 10.4:1) */
--tx2: #6b6b6b; /* 라벨·주석 (흰 배경 대비 5.3:1) */
width: 100%; max-width: min(880px, 100% - 80px);
margin: 0 auto; padding: 44px 0 64px;
}
.sr-article > section { margin-top: 52px; }
.sr-article h2 {
font-family: var(--serif); font-size: 1.55rem; font-weight: 600;
color: #1a3a5f; letter-spacing: -0.01em; line-height: 1.35;
padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
/* h3 은 h2 바로 아래 단계다. h2 가 가로 밑줄을 쓰니 여기는 세로 막대를 쓴다 —
같은 밑줄을 크기만 줄여 반복하면 두 단계가 한 층으로 보여 위계가 사라진다.
막대에 그라데이션을 준 건 3px 단색 선이 표 테두리처럼 읽히기 때문이다. */
.sr-article h3 {
position: relative;
font-family: var(--serif); font-size: 1.12rem; font-weight: 600;
color: #1a3a5f; letter-spacing: -0.005em; line-height: 1.5;
padding-left: 15px; margin: 34px 0 14px; word-break: keep-all;
}
.sr-article h3::before {
content: ''; position: absolute; left: 0; top: 0.2em; bottom: 0.2em;
width: 3px; border-radius: 2px;
background: linear-gradient(#2f5f92, #9cc3e6);
}
.sr-article p { font-size: 0.96rem; line-height: 1.85; color: var(--tx); }
/* 한국어 본문에는 keep-all 이 필수다. 기본값(normal)은 음절 아무 데서나 끊어서
390px 에서 '숙박비는'이 '숙박 / 비는'으로, '갈립니다.'가 '갈립 / 니다.'로 넘어갔다
— 실측으로 본문에서 16곳. 제목·CTA 에만 걸려 있고 정작 긴 문단이 빠져 있었다.
break-word 를 같이 두는 이유는 keep-all 이 URL 같은 긴 영문 토큰까지 안 끊어
가로 스크롤을 만들기 때문이다. */
.sr-article p, .sr-article li, .pick-who, .pick-why, .note, .leaf-s, .leaf-t {
word-break: keep-all; overflow-wrap: break-word;
}
.sr-article p + p { margin-top: 12px; }
.sr-article p strong, .sr-article li strong { color: var(--fg1); font-weight: 600; }
.sr-article a { color: #1a3a5f; }
/* 리드 — 이 페이지가 어떤 질문에 답하는지 한 문단으로.
`.sr-article p` 보다 특정도를 높여 놔야 본문 회색에 묻히지 않는다. */
.sr-article p.lede { font-size: 1.06rem; line-height: 1.9; color: #2c2c2c; font-weight: 400; margin: 0; }
.sr-article p.lede b { font-weight: 600; color: var(--ink); }
/* ─── 서론 액자 ─── */
/* 흰 카드로 만들지 않는다. 아래 답 카드·표가 전부 흰 카드라 하나 더 얹으면
서론이 그것들과 같은 무게가 돼 '읽고 들어가는 글'로 안 읽힌다.
옅게 깔아서 종이 한 장 아래에 있는 것처럼 둔다. */
.lede-box {
background: #f7fafc; border: 1px solid #e3eaf1;
border-radius: 12px; padding: 30px 32px; margin-top: 10px;
}
/* 근거 범위 두 줄. 이 페이지에서 오해가 가장 잦은 지점이라 첫 화면에 못 박는다 —
날씨는 12개월 전부인데 가격은 6개월뿐이고, 그 6개월이 언제인지가 안 보인다.
두 줄의 색은 아래 답 카드의 배지 색과 맞춰 뒀다(파랑=날씨, 초록=가격). */
.lede-scope {
display: grid; grid-template-columns: 1fr 1fr; gap: 11px 26px;
margin-top: 22px; padding-top: 18px; border-top: 1px solid #e3eaf1;
}
.ls-item { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
/* min-width 는 '날씨'(2자)와 '숙박비'(3자)의 폭을 맞추려는 것이다.
모바일에서 두 줄이 세로로 쌓이는데, 라벨 폭이 다르면 값이 계단처럼 어긋난다. */
.ls-k {
flex: 0 0 auto; font-size: 0.7rem; font-weight: 700;
letter-spacing: 0.04em; border-radius: 4px; padding: 3px 8px;
min-width: 46px; text-align: center;
}
.ls-weather .ls-k { background: #e5eff8; color: #2d5478; }
.ls-price .ls-k { background: #edf3e2; color: #3f6018; }
.ls-v { font-size: 0.8rem; color: var(--tx2); line-height: 1.6; word-break: keep-all; }
.ls-v b { color: var(--tx); font-weight: 600; }
/* ─── 답 두 칸 (연중 기준 / 예약 창 기준) ─── */
/* 리드 바로 아래에 있던 '핵심 수치 4칸'(.keyfacts/.kf-*)은 마크업과 함께 지웠다.
근거 범위를 배지로 갈라 보여 주는 일은 아래 .answer .scope 가 이미 하고 있고,
숫자 셋이 이 두 카드와 겹쳤다. */
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.answer {
background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px;
}
/* 회색이었다. 두 카드가 근거 범위가 다르다는 게 이 페이지의 뼈대인데, 배지가
둘 다 회색이면 '같은 종류의 두 값'으로 읽힌다. 색으로 갈라 놓는다 —
파랑은 이 페이지에서 비·날씨 쪽에 이미 쓰는 색(.sea.wet)이고,
초록은 가격 쪽에 이미 쓰는 색(--price-*)이다. 새 색을 들이지 않는다.
서론 액자의 '날씨/숙박비' 라벨과도 같은 색이라, 위에서 본 구분이 여기로 이어진다. */
.answer.window { background: #f9fbf5; }
.answer .scope {
display: inline-block; font-size: 0.68rem; letter-spacing: 0.08em; font-weight: 600;
border-radius: 999px; padding: 3px 10px; margin-bottom: 12px;
background: #e5eff8; border: 1px solid #bfd5e7; color: #2d5478;
}
.answer.window .scope { background: #edf3e2; border-color: #cbdcae; color: #3f6018; }
.answer .big {
font-family: var(--serif); font-size: 1.9rem; font-weight: 600;
color: var(--ink); line-height: 1.2; margin-bottom: 8px;
}
.answer p { font-size: 0.9rem; line-height: 1.75; }
/* ─── 성향별 추천 ─── */
.picks { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.pick { display: flex; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.pick:last-child { border-bottom: none; }
.pick.on { background: #f7faf3; box-shadow: inset 3px 0 0 var(--price-3); }
.pick-m {
flex: 0 0 78px; font-family: var(--serif); font-size: 1.7rem; font-weight: 600;
color: var(--ink); line-height: 1.1;
}
.pick-m span { display: block; font-family: var(--sans); font-size: 0.72rem;
font-weight: 500; color: var(--tx2); margin-top: 5px; letter-spacing: 0.02em; }
.pick-who { font-size: 0.95rem; font-weight: 600; color: var(--fg1); margin-bottom: 5px; }
.pick-why { font-size: 0.88rem; line-height: 1.7; color: var(--tx); }
.pick.avoid { background: var(--fill-sunken); }
.pick.avoid .pick-m { color: var(--tx2); }
/* ─── 표 공통 ─── */
/* 320px 같은 좁은 화면에서 표가 페이지 자체를 옆으로 밀지 않게 감싼다.
위아래 여백은 표 그림자를 위한 것이다 — overflow 컨테이너라 여백이 없으면
그림자가 경계에서 싹둑 잘려 오히려 더 조잡해 보인다. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
padding: 3px 3px 12px; margin: 0 -3px; }
/* 평평한 1px 상자는 '표를 그렸다'로 읽히고, 아주 옅은 그림자 두 겹은 '종이에
얹혀 있다'로 읽힌다. 값을 세게 만들지 않고 깊이만 준다. CTA 배너와 같은 원리인데
세기는 훨씬 낮췄다 — 본문 안의 표가 스스로 튀면 글의 흐름을 끊는다.
collapse 대신 separate 를 쓰는 이유는 둥근 모서리에서 테두리가 삐져나오지 않게
하기 위해서다(border-spacing:0 이라 보이는 결과는 같다). */
.sr-table {
width: 100%; border-collapse: separate; border-spacing: 0; background: #fff;
border: 1px solid #e4eaf1; border-radius: 14px; overflow: hidden;
box-shadow: 0 1px 1px rgba(26,58,95,0.035), 0 14px 30px -24px rgba(26,58,95,0.5);
}
/* 머리글은 회색 판이 아니라 아주 옅은 세로 그라데이션이다. 단색 회색은 위아래가
똑같이 밝아 판때기로 보이는데, 위가 반 톤 밝으면 빛을 받은 면처럼 보인다. */
.sr-table th {
font-size: 0.68rem; font-weight: 600; color: #7c8b9b; text-align: right;
padding: 13px 16px; letter-spacing: 0.05em; white-space: nowrap;
background: linear-gradient(#fbfcfe, #f3f7fa);
border-bottom: 1px solid #e4eaf1;
}
.sr-table td {
font-size: 0.88rem; color: var(--tx); text-align: right;
padding: 13px 16px; border-bottom: 1px solid #f1f4f8; white-space: nowrap;
/* 표가 조잡해 보이는 첫 번째 원인은 숫자 폭이 제각각이라 열이 흔들리는 것이다.
26.3° 와 32.8°, 96,233원 과 190,919원 이 세로로 줄을 서려면 이 한 줄이 있어야 한다. */
font-variant-numeric: tabular-nums;
}
.sr-table tr:last-child td { border-bottom: none; }
/* 모서리가 둥근 만큼 양 끝 칸은 안쪽으로 더 들여야 값이 곡선에 붙지 않는다. */
.sr-table th:first-child, .sr-table td:first-child { text-align: left; padding-left: 18px; }
.sr-table th:last-child, .sr-table td:last-child { padding-right: 18px; }
.sr-table .m { font-weight: 600; color: var(--fg1); }
/* 단위는 값이 아니다. 한 단계 작고 옅게 두면 눈이 숫자만 훑고 지나간다.
회색으로 칠하지 않고 opacity 로 죽이는 이유는, 같은 규칙이 답 카드의 1.9rem 짜리
'원'에도 걸리는데 거기서 회색을 먹이면 큰 글자가 탁해지기 때문이다.
em 단위라 어느 크기에 얹혀도 비율이 유지된다. */
/* display:inline 을 못 박아 둔다. 추천 카드가 `.pick-m span { display:block }` 으로
가격 줄을 만드는데, 그 안에 들어간 이 span 까지 블록이 되면서 '원'이 아래 줄로
떨어졌다. .sr-article .u(0,2,0) 가 .pick-m span(0,1,1) 을 이겨 되돌린다. */
.sr-article .u { display: inline; font-size: 0.82em; font-weight: 400; opacity: 0.55; margin-left: 1px; }
/* 답 카드의 1.9rem 짜리 숫자에서는 0.82em 이 너무 커서 '94,829 원'처럼 벌어져 보인다.
큰 글자일수록 단위는 더 작아야 한 덩어리로 읽힌다. */
.answer .big .u { font-size: 0.55em; opacity: 0.5; margin-left: 2px; }
/* 이번 달 줄. 배경만 옅게 깔면 화면 밝기에 따라 사라진다. 왼쪽에 실선을 세워
형태로도 표시한다(추천 카드 .pick.on 과 같은 장치).
색은 페이지의 약속을 따른다 — 파랑은 날씨, 초록은 가격. */
.sr-table tr.now td { background: #f9fbfd; }
.t-weather tr.now td:first-child { box-shadow: inset 3px 0 0 #7ea6cd; }
.t-price tr.now td { background: #f9fcf5; }
.t-price tr.now td:first-child { box-shadow: inset 3px 0 0 var(--price-3); }
/* 커서를 올려도 아무 반응이 없으면 죽은 표로 느껴진다. 아주 옅게만 —
.now 줄까지 덮도록 선택자를 한 단계 더 길게 잡았다. */
@media (hover: hover) {
.sr-table tbody tr:hover td { background: #f7fafd; }
.t-price tbody tr:hover td { background: #f7fbf2; }
}
/* 값 아래 막대 — 숫자와 같은 쪽(오른쪽)에서 자라야 눈이 크기를 바로 읽는다.
왼쪽에서 자라면 오른쪽 정렬된 숫자와 따로 놀아 별개의 열처럼 보인다.
왼쪽 끝을 흐리게 뺀 건 단색 3px 선이 밑줄로 읽히기 때문이다 —
한쪽이 사라지면 '밑줄'이 아니라 '길이'로 읽힌다. */
.sr-table td.bar-cell { position: relative; padding-bottom: 18px; }
.bar-cell .bar {
position: absolute; right: 16px; bottom: 9px; height: 3px; border-radius: 999px;
background: linear-gradient(90deg, rgba(122,154,184,0.16), #8fadc9);
}
.price-cell .bar { background: linear-gradient(90deg, rgba(122,170,72,0.16), var(--price-2)); }
/* 표 안 링크는 밑줄만 그으면 각주로 보인다. 옆 칸이 전부 숫자라 글자까지 값으로
읽히기도 한다. 알약 모양 테두리로 '누르는 것'임을 형태로 먼저 알린다.
.sr-article a(0,1,1)보다 .sr-table a.go(0,2,1)가 세므로 본문 링크 스타일을 덮는다. */
.sr-table a.go {
display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
font-size: 0.79rem; font-weight: 500; color: #2f5f92; text-decoration: none;
border: 1px solid #cddced; background: #f4f8fc;
padding: 5px 11px; border-radius: 999px;
transition: background .15s ease, border-color .15s ease;
}
.sr-table a.go:hover { background: #e7f0f9; border-color: #a9c6e2; text-decoration: none; }
/* 링크가 알약이라 셀 높이가 늘어난다. 위아래 여백을 줄여 표 리듬을 맞춘다. */
.sr-table td:has(a.go) { padding-top: 7px; padding-bottom: 7px; }
/* 계절 배지 — 회색 테두리(--line-strong)를 걷어냈다. 표의 다른 선이 전부
푸른 기가 도는 옅은 회색인데 여기만 중성 회색이라 배지가 따로 놀았다. */
.sea { display: inline-block; font-size: 0.71rem; font-weight: 500; letter-spacing: 0.01em;
padding: 3px 9px; border-radius: 999px;
border: 1px solid #dde4ec; color: var(--tx); background: #fff; }
.sea.wet { border-color: #b7cde0; background: #eef5fb; color: #2d5478; }
.sea.semiwet{ border-color: #cfdde9; background: #f5f9fc; color: #52708a; }
.sea.dry { border-color: #e3d5b8; background: #fbf7ee; color: #7a6234; }
.sea.semidry{ border-color: #ebe2cf; background: #fdfbf6; color: #8a7856; }
/* 값의 성격 표시 — 알약으로 만들지 않는다. 같은 줄 오른쪽에 이미 알약 버튼이 있어서
둘이 나란히 서면 어느 쪽이 눌리는 것인지 헷갈린다. 색과 굵기로만 가른다. */
.tag-lo { color: var(--price-4); font-weight: 600; }
.tag-hi { color: #a04b3c; font-weight: 600; }
.note { font-size: 0.78rem; color: var(--tx2); line-height: 1.7; margin-top: 12px; }
/* 앵커로 뛸 때 제목이 sticky 네비(56px) 밑에 깔린다. 그만큼 미리 띄운다. */
.sr-article > section[id] { scroll-margin-top: 74px; }
/* ─── 도시 페이지로 보내는 CTA ─── */
/* 도시 페이지 하단의 여행시기 띠(city.css 의 .season-link)와 같은 모양으로 맞춘다.
두 페이지는 서로를 가리키는 한 쌍이라, 왕복하는 사람이 같은 물건임을 알아봐야 한다.
예전 남색 그라데이션 배너는 혼자서는 잘 보였지만 반대편 링크와 닮은 데가 없었다.
흰 카드가 성립하는 조건은 배경이 흰색이 '아니어야' 한다는 것 하나다.
이 페이지 body 는 --fill-sunken(#fafafa)이라 성립한다. 본문 배경을 흰색으로
바꾸는 날에는 이 카드도 같이 죽으므로 그때는 배경을 다시 잡아야 한다. */
.cta {
display: flex; align-items: center; gap: 20px;
background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
/* margin-top 은 56px 였다. 남색 배너였을 땐 앞 문단과 확실히 떼어 놓을 이유가
있었지만, 흰 카드가 되면서 위쪽 표·문단과 한 흐름으로 읽히는 게 맞다.
56px 는 그냥 빈 구멍으로 보였다. */
padding: 26px 28px; text-decoration: none; margin-top: 32px;
box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 18px rgba(0,0,0,0.045);
transition: border-color .15s, box-shadow .18s, transform .18s;
}
.cta:hover {
border-color: var(--line-strong); transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 12px 28px rgba(0,0,0,0.09);
}
/* 아이콘 타일. hover 에서 검정으로 반전돼 카드 전체가 눌리는 느낌을 준다. */
.cta-ic {
flex-shrink: 0; width: 54px; height: 54px; border-radius: 13px;
background: var(--fill-muted); color: #1a3a5f;
display: inline-flex; align-items: center; justify-content: center;
transition: background .18s, color .18s;
}
.cta:hover .cta-ic { background: #1a3a5f; color: #fff; }
.cta-l { min-width: 0; flex: 1; }
/* 눈썹 라벨. 제목만 덩그러니 있으면 광고 배너로 읽히는데,
이 한 줄이 '글의 다음 순서'라는 맥락을 준다. */
.cta-eb {
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
color: var(--tx2); margin-bottom: 6px;
}
/* keep-all — 안 주면 '최저가를'이 '최저가 / 를'로 잘려 넘어간다.
한국어는 어절 안에서 끊기면 눈에 바로 걸린다.
색은 본문 h2·h3 와 같은 #1a3a5f 다. 카드가 흰색이 되면서 이 페이지의
제목 색 체계 안으로 들어왔다 — 여기만 검정을 쓰면 혼자 떠 보인다. */
.cta-t { font-family: var(--serif); font-size: 1.32rem; font-weight: 600;
color: #1a3a5f; line-height: 1.45; letter-spacing: -0.01em; word-break: keep-all; }
/* '날짜별 최저가'가 통째로 넘어가게 묶는 상자. 이유는 season.html 쪽 주석에. */
.cta-nb { display: inline-block; }
/* 줄바꿈은
·.mobile-br 로 직접 지정한다(season.html 주석 참고).
text-wrap: balance 를 썼다가 뺐다 — 줄 길이는 고르게 맞춰 주지만 어디서
끊을지는 브라우저가 정해서, 원하는 자리에서 끊이지 않았다.
max-width 는 44ch 였는데 지정한 둘째 줄(26자)이 안 들어가 한 번 더 접혔다. */
.cta-s { font-size: 0.85rem; color: var(--tx2);
margin-top: 7px; line-height: 1.7; max-width: 56ch; word-break: keep-all; }
/* 채운 알약. 흰 카드 위에서 가장 어두운 덩어리라 시선이 마지막에 여기로 떨어진다. */
.cta-go {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
font-size: 0.86rem; font-weight: 700; color: #fff; white-space: nowrap;
background: #1a3a5f; border-radius: 999px; padding: 13px 22px;
transition: opacity .15s;
}
/* 배너가 라서 위쪽 `.sr-article a { color:#1a3a5f }` 가 이긴다(0,1,1 > 0,1,0).
알약 글씨가 남색 바탕에 남색으로 깔리므로 태그까지 짚어 되돌린다. */
.sr-article a.cta .cta-go { color: #fff; }
.cta:hover .cta-go { opacity: 0.88; }
.cta-go svg { transition: transform .18s ease; }
.cta:hover .cta-go svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.cta, .cta-go svg { transition: none; }
.cta:hover { transform: none; }
}
/* ─── 잎 글 목록(발행 전에는 서버가 통째로 감춘다) ─── */
.leaves { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.leaf { display: block; background: #fff; border: 1px solid var(--line);
border-radius: 10px; padding: 16px 18px; text-decoration: none; }
.leaf:hover { border-color: var(--line-strong); }
.leaf-t { font-size: 0.94rem; font-weight: 600; color: var(--fg1); }
.leaf-s { font-size: 0.82rem; color: var(--tx); margin-top: 5px; line-height: 1.6; }
@media (max-width: 760px) {
.sr-article { max-width: 100%; padding: 28px 16px 44px; }
.sr-article > section { margin-top: 38px; }
.sr-article h2 { font-size: 1.2rem; }
.sr-article h3 { font-size: 1.02rem; margin: 28px 0 12px; padding-left: 13px; }
.lede { font-size: 0.98rem; }
.lede-box { padding: 22px 20px; border-radius: 10px; }
.lede-scope { grid-template-columns: 1fr; gap: 9px; margin-top: 18px; padding-top: 15px; }
.answers, .leaves { grid-template-columns: 1fr; }
.answer { padding: 18px 18px; }
.answer .big { font-size: 1.5rem; }
.pick { gap: 14px; padding: 16px 16px; }
.pick-m { flex-basis: 58px; font-size: 1.4rem; }
/* 390px 에 6열짜리 날씨 표가 가로 스크롤 없이 들어가야 한다. 그래서 데스크탑에서
넓힌 가로 여백(16/18px)은 여기서 되돌리고, 대신 머리글 글자를 줄여 폭을 번다.
세로 여백만 데스크탑 리듬을 따라 조금 키운다. */
.sr-table { border-radius: 12px; }
.sr-table th, .sr-table td { padding: 11px 8px; font-size: 0.8rem; }
.sr-table th { font-size: 0.64rem; letter-spacing: 0.02em; }
.sr-table th:first-child, .sr-table td:first-child { padding-left: 10px; }
.sr-table th:last-child, .sr-table td:last-child { padding-right: 10px; }
/* 세로 여백을 데스크탑보다 오히려 키운다. 글자를 줄이면 알약 높이가 25px까지
떨어져 엄지로 누르기 어렵다. 탭 영역만 32px대로 올린다. */
.sr-table a.go { font-size: 0.74rem; padding: 7px 10px; }
.sr-table td.bar-cell { padding-bottom: 15px; }
.sr-table .bar-cell .bar { right: 8px; } /* left 로 두면 숫자와 따로 논다 */
/* 세로로 다 쌓지 않는다(도시 페이지 띠와 같은 처리) — 아이콘은 글 옆에 두고
알약만 아래로 내린다. 넷을 전부 쌓으면 카드가 화면 높이만큼 길어진다. */
/* align-items 를 center 로 두면 안 된다. 좁은 화면에서 제목이 2줄·부제가 3줄로
늘어나는데, 그러면 아이콘이 글 덩어리 한가운데에 혼자 떠 있는 것처럼 보인다.
눈썹 줄에 맞춰 위로 붙인다(2px 은 아이콘 광학 중심 보정). */
.cta { flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 22px 20px; margin-top: 26px; }
.cta-ic { width: 44px; height: 44px; border-radius: 11px; margin-top: 2px; }
.cta-ic svg { width: 22px; height: 22px; }
.cta-t { font-size: 1.16rem; }
.cta-s { font-size: 0.83rem; }
/* 좁은 화면에서는 알약을 폭 전체로 늘린다 — 오른쪽에 남는 여백이 없어야
이게 '누르는 것'이라는 게 분명해진다. */
.cta-go { width: 100%; justify-content: center; }
}