/* 현장정보 하단 시트 — field_contribution_redesign.md §4.5
 *
 * 사용자 요청(2026-09-15)에 따라 전체 화면에서 추천과 저장 버튼을 함께 보여준다.
 * 주행 중이 아니라 정차 상태에서 헬멧·장갑으로 쓰는 화면이라 터치 영역은 44px 이상을 지킨다.
 *
 * 요청서 기준: 본문/입력 16px, 보조 정보 13~14px, 주요 버튼 높이 48px, 독립 터치 영역 44×44.
 * 320px 폭·200% 확대·긴 주소·긴 닉네임·다크모드에서 겹치지 않아야 한다.
 *
 * ⚠️ **숨김이 레이아웃을 이긴다.** 이 파일의 여러 요소가 display:flex/grid를 쓰는데, 그 규칙이
 *    [hidden]보다 구체적이라 `el.hidden = true`로 숨겨도 그대로 보인다. 브라우저 기본
 *    `[hidden]{display:none}`은 타입 선택자 하나만큼의 힘밖에 없어서 클래스 선택자에게 진다.
 *    아래 한 줄이 그걸 막는다 — 개별 규칙마다 챙기는 대신 한곳에서 끝낸다.
 */

.fc-sheet [hidden],
.fc-sheet[hidden] {
	display: none !important;
}

.fc-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	box-sizing: border-box;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: var(--dk-bg-surface);
	border-top-left-radius: 18px;
	border-top-right-radius: 18px;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
	/* 높이 예산 (개선안 §6).
	 *
	 * 예전에는 `max-height: 72vh`에 시트 전체가 스크롤러였다. 그래서 `전체 정보`를 펼치면 목록이
	 * 화면 밖 아래에서 열리고 아무도 거기로 데려가 주지 않았다 — 320x568 실측에서 첫 항목이
	 * y=628(시트 바닥 568)이었다. 사용자 눈에는 "눌러도 아무 일이 없다"였다.
	 *
	 * 지금은 헤더/하단을 고정하고 **본문 하나만** 스크롤한다. 높이도 72vh를 고집하지 않는다 —
	 * 낮은 화면에서는 입력 완료가 지도 노출보다 우선이다(§5.1). dvh를 쓰면 모바일 키보드가
	 * 올라올 때 시트가 같이 줄어 저장 버튼이 가려지지 않는다.
	 */
	max-height: min(86dvh, 720px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* 본문 — 세로 스크롤은 **여기 하나뿐**이다. */
.fc-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* min-height:0 이 없으면 flex 자식이 내용만큼 늘어나 헤더/하단을 밀어낸다. */
	min-height: 0;
	flex: 1 1 auto;
	overflow-y: auto;
	/* 스크롤이 본문 안에서 끝나게 — 뒤 지도가 같이 움직이지 않는다. */
	overscroll-behavior: contain;
}

/* 헤더와 하단은 본문에 덮이지 않는다(§6). */
.fc-sheet-header,
.fc-address-row,
.fc-footer {
	flex: 0 0 auto;
}

.fc-sheet-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.fc-sheet-title {
	margin: 0;
	font-size: 16px;
	font-weight: bold;
	color: var(--dk-text-primary);
}

.fc-sheet-close {
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 44px;
	box-sizing: border-box;
	border: none;
	background: none;
	font-size: 18px;
	line-height: 1;
	color: var(--dk-text-secondary);
	cursor: pointer;
}

.fc-sheet-address {
	margin: 0;
	font-size: 13px;
	color: var(--dk-text-secondary);
	overflow-wrap: anywhere;
}

.fc-section-title {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--dk-text-primary);
}

/* ---------------------------------------------------------------- 고르는 칸 */

/* 빠른 선택 — 320px에서도 두 칸이 들어가고 가로로 넘치지 않는다. */
.fc-quick-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	/* 예전에는 min-height:184px으로 빈 자리를 잡아 뒀다. 추천이 6개 미만이거나 아직 안 왔을 때
	   그만큼이 **빈 채로 남아** 낮은 화면에서 저장 버튼을 밀어냈다(§5.1 "빈 자리를 고정 높이로
	   강제하지 않는다"). 지금은 본문만 스크롤하므로 내용이 늦게 와도 헤더·하단은 안 움직인다. */
	align-content: start;
}

.fc-pick {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	box-sizing: border-box;
	min-height: 56px;
	padding: 8px 12px;
	border: 1px solid var(--dk-border);
	border-radius: 12px;
	background: var(--dk-bg-surface);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

/* 고른 항목 — 색만이 아니라 테두리 두께로도 구분한다(색만으로 뜻을 전하지 않는다). */
.fc-pick.is-picked {
	border: 2px solid #1957d6;
	background: rgba(25, 87, 214, 0.06);
}

.fc-pick-label {
	font-size: 16px;
	font-weight: 600;
	color: var(--dk-text-primary);
	overflow-wrap: anywhere;
}

.fc-pick-meta {
	font-size: 13px;
	color: var(--dk-text-secondary);
}

/* ---------------------------------------------------------------- 다른 라이더의 팁 (5장) */

.fc-tips {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fc-tip-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* **중첩 스크롤을 만들지 않는다**(§6 "팁·분류별 목록에 별도의 세로 스크롤을 넣지 않는다").
	   안쪽에 스크롤이 또 있으면 손가락이 어디를 움직이는지 알 수 없다. 길이는 JS가 처음 3개만
	   그리고 `N개 더 보기`로 잇는다. */
}

.fc-tip-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 8px;
	border: 1px solid var(--dk-border);
	border-radius: 12px;
}

.fc-tip-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}

.fc-tip-author {
	font-size: 13px;
	font-weight: 600;
	color: var(--dk-text-primary);
	overflow-wrap: anywhere;
}

.fc-tip-time {
	font-size: 13px;
	color: var(--dk-text-secondary);
}

.fc-tip-note {
	margin: 0;
	font-size: 14px;
	color: var(--dk-text-primary);
	/* 띄어쓰기 없는 긴 덩어리가 가로로 삐져나가지 않게. */
	overflow-wrap: anywhere;
}

.fc-tip-helpful {
	box-sizing: border-box;
	min-height: 44px;
	padding: 6px 12px;
	border: 1px solid var(--dk-border);
	border-radius: 999px;
	background: var(--dk-bg-surface);
	font-family: inherit;
	font-size: 13px;
	color: var(--dk-text-primary);
	cursor: pointer;
}

.fc-tip-helpful.is-picked {
	border: 2px solid #1957d6;
	background: rgba(25, 87, 214, 0.06);
	font-weight: 600;
}

.fc-tip-helpful[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* ---------------------------------------------------------------- 내가 남긴 정보 */

.fc-mine {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	border: 1px solid var(--dk-border);
	border-radius: 12px;
}

.fc-mine-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fc-mine-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fc-mine-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}

.fc-mine-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--dk-text-primary);
	overflow-wrap: anywhere;
}

.fc-mine-state {
	font-size: 13px;
	font-weight: 600;
	color: #b45309;
}

.fc-mine-meta {
	font-size: 13px;
	color: var(--dk-text-secondary);
}

/* 세 갈래(맞아요/달라졌어요/철회)는 320px에서 줄바꿈된다 — 가로로 밀어내지 않는다. */
.fc-mine-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.fc-mine-action {
	box-sizing: border-box;
	min-height: 44px;
	padding: 6px 12px;
	border: 1px solid var(--dk-border);
	border-radius: 999px;
	background: var(--dk-bg-surface);
	font-family: inherit;
	font-size: 13px;
	color: var(--dk-text-primary);
	cursor: pointer;
}

.fc-mine-action.is-picked {
	border: 2px solid #1957d6;
	background: rgba(25, 87, 214, 0.06);
	font-weight: 600;
}

/* ---------------------------------------------------------------- 더보기·팁 */

.fc-more-toggle,
.fc-note-toggle {
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 4px;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 14px;
	text-align: left;
	color: #1957d6;
	cursor: pointer;
}

.fc-more {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fc-more-search {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--dk-border);
	border-radius: 10px;
	background: var(--dk-bg-surface);
	color: var(--dk-text-primary);
	font-family: inherit;
	/* 16px 미만이면 iOS가 입력 시 화면을 확대한다 — 지도가 틀어진다. */
	font-size: 16px;
}

.fc-more-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fc-more-group {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--dk-text-secondary);
}

.fc-more-group-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.fc-more-empty {
	margin: 0;
	font-size: 13px;
	color: var(--dk-text-secondary);
}

.fc-note-hint {
	margin: 0;
	font-size: 13px;
	color: var(--dk-text-secondary);
}

.fc-note {
	box-sizing: border-box;
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--dk-border);
	border-radius: 10px;
	background: var(--dk-bg-surface);
	color: var(--dk-text-primary);
	font-family: inherit;
	font-size: 16px;
	resize: vertical;
	/* **본문 flex가 입력칸을 눌러 납작하게 만들지 않는다.**
	 *
	 * 실측에서 높이가 18px로 찌그러졌다 — .fc-body가 flex column이라 rows=2를 무시하고
	 * 자식을 줄여버린다. 사용자 제보 "한 줄 팁 추가를 눌러도 정상적으로 입력할 수 없다"가
	 * 이것이다: 칸이 열리긴 하는데 글자 한 줄도 안 보인다. */
	flex: 0 0 auto;
	min-height: 72px;
}

/* ---------------------------------------------------------------- 마무리 */

.fc-footer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* 목록을 스크롤하는 동안에도 저장 버튼이 보여야 한다 — 키보드가 열려도 마찬가지다(§4.5). */
	position: sticky;
	bottom: 0;
	padding-top: 8px;
	background: var(--dk-bg-surface);
}

.fc-selected {
	margin: 0;
	min-height: 18px;   /* 문구가 생겼다 사라져도 시트 높이가 흔들리지 않게 자리를 잡아 둔다 */
	font-size: 13px;
	color: var(--dk-text-primary);
	overflow-wrap: anywhere;
}

.fc-public-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 13px;
	color: var(--dk-text-secondary);
	cursor: pointer;
}

.fc-public {
	width: 20px;
	height: 20px;
}

.fc-submit {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	border: none;
	border-radius: 12px;
	background: #1957d6;
	color: #ffffff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.fc-submit[disabled] {
	opacity: 0.7;
	cursor: default;
}

.fc-status {
	margin: 0;
	min-height: 18px;
	font-size: 13px;
	color: var(--dk-text-secondary);
}

.fc-status--ok {
	color: #166534;
	font-weight: 600;
}

.fc-status--error {
	color: #b91c1c;
	font-weight: 600;
}

/* ---------------------------------------------------------------- 문제 신고 (6장)
 * 기여와 다른 일이므로 시각적으로도 눈에 덜 띄게 둔다 — 다만 찾을 수 없을 만큼 숨기지는 않는다.
 */

.fc-report-toggle {
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 4px;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 13px;
	text-align: left;
	color: var(--dk-text-secondary);
	text-decoration: underline;
	cursor: pointer;
}

.fc-report {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--dk-border);
	border-radius: 12px;
}

.fc-report-hint {
	margin: 0;
	font-size: 13px;
	color: var(--dk-text-secondary);
}

.fc-report-reasons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.fc-report-reason {
	box-sizing: border-box;
	min-height: 44px;
	padding: 6px 12px;
	border: 1px solid var(--dk-border);
	border-radius: 999px;
	background: var(--dk-bg-surface);
	font-family: inherit;
	font-size: 13px;
	color: var(--dk-text-primary);
	cursor: pointer;
}

.fc-report-reason.is-picked {
	border: 2px solid #b91c1c;
	background: rgba(185, 28, 28, 0.06);
	font-weight: 600;
}

.fc-report-detail {
	box-sizing: border-box;
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--dk-border);
	border-radius: 10px;
	background: var(--dk-bg-surface);
	color: var(--dk-text-primary);
	font-family: inherit;
	font-size: 16px;
	resize: vertical;
}

/* 신고는 주된 행동이 아니다 — [정보 남기기]처럼 꽉 찬 파란 버튼으로 만들지 않는다. */
.fc-report-submit {
	box-sizing: border-box;
	align-self: flex-start;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid #b91c1c;
	border-radius: 10px;
	background: var(--dk-bg-surface);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #b91c1c;
	cursor: pointer;
}

.fc-report-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* 시트가 열린 동안 뒤 배경이 스크롤되지 않게 — 지도 조작은 그대로 둔다. */
body.fc-sheet-open {
	overscroll-behavior: contain;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .fc-status--ok { color: #bbf7d0; }
	:root:not([data-theme="light"]) .fc-status--error { color: #fecaca; }
	:root:not([data-theme="light"]) .fc-pick.is-picked,
	:root:not([data-theme="light"]) .fc-mine-action.is-picked { background: rgba(25, 87, 214, 0.22); }
	:root:not([data-theme="light"]) .fc-more-toggle,
	:root:not([data-theme="light"]) .fc-note-toggle { color: #93b4f5; }
	:root:not([data-theme="light"]) .fc-report-reason.is-picked { background: rgba(185, 28, 28, 0.25); }
	:root:not([data-theme="light"]) .fc-report-submit,
	:root:not([data-theme="light"]) .fc-report-reason.is-picked { border-color: #fca5a5; }
	:root:not([data-theme="light"]) .fc-report-submit { color: #fca5a5; }
	:root:not([data-theme="light"]) .fc-mine-state { color: #fcd34d; }
	:root:not([data-theme="light"]) .fc-tip-helpful.is-picked { background: rgba(25, 87, 214, 0.22); }
}

:root[data-theme="dark"] .fc-status--ok { color: #bbf7d0; }
:root[data-theme="dark"] .fc-status--error { color: #fecaca; }
:root[data-theme="dark"] .fc-pick.is-picked,
:root[data-theme="dark"] .fc-mine-action.is-picked { background: rgba(25, 87, 214, 0.22); }
:root[data-theme="dark"] .fc-more-toggle,
:root[data-theme="dark"] .fc-note-toggle { color: #93b4f5; }
:root[data-theme="dark"] .fc-report-reason.is-picked { background: rgba(185, 28, 28, 0.25); }
:root[data-theme="dark"] .fc-report-submit,
:root[data-theme="dark"] .fc-report-reason.is-picked { border-color: #fca5a5; }
:root[data-theme="dark"] .fc-report-submit { color: #fca5a5; }
:root[data-theme="dark"] .fc-mine-state { color: #fcd34d; }
:root[data-theme="dark"] .fc-tip-helpful.is-picked { background: rgba(25, 87, 214, 0.22); }

/* ---------------------------------------------------------------- 장소 확정 (4.1) */

.fc-address-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

/* 주소가 길어도 "장소 변경"을 밀어내지 않는다. */
.fc-address-row .fc-sheet-address {
	flex: 1 1 auto;
	min-width: 0;
}

.fc-change-place {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 8px;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 13px;
	color: #1957d6;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------------------------------------------------------------- 초안 되살림 (7.4) */

/* 말없이 되살리면 "내가 안 고른 게 골라져 있다"로 읽힌다. 무엇이 일어났는지 말하고
   버릴 길을 바로 옆에 둔다. 눈에 띄되 경고는 아니다 — 잘못된 일이 아니기 때문이다. */
.fc-draft {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--dk-border);
	border-radius: 12px;
	background: var(--dk-bg-subtle, rgba(25, 87, 214, 0.06));
}

.fc-draft-text {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	color: var(--dk-text-secondary);
	overflow-wrap: anywhere;
}

.fc-draft-discard {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 12px;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 13px;
	color: #1957d6;
	text-decoration: underline;
	cursor: pointer;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .fc-draft { background: rgba(25, 87, 214, 0.16); }
	:root:not([data-theme="light"]) .fc-draft-discard { color: #93b4f5; }
}

:root[data-theme="dark"] .fc-draft { background: rgba(25, 87, 214, 0.16); }
:root[data-theme="dark"] .fc-draft-discard { color: #93b4f5; }

/* 후보를 찾는 동안 시트 안에서 기다린다 — 화면을 붙잡아두지 않는다(4.5). */
.fc-lookup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px dashed var(--dk-border);
	border-radius: 12px;
}

.fc-lookup-text {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	color: var(--dk-text-secondary);
	overflow-wrap: anywhere;
}

.fc-lookup-retry {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--dk-border);
	border-radius: 10px;
	background: var(--dk-bg-surface);
	font-family: inherit;
	font-size: 13px;
	color: var(--dk-text-primary);
	cursor: pointer;
}

/* 건물 후보가 여럿일 때만 나온다 — 가까운 한 곳을 무조건 확정하지 않는다(3.2 P1). */
.fc-picker {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fc-picker-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fc-picker-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	box-sizing: border-box;
	min-height: 56px;
	padding: 8px 12px;
	border: 1px solid var(--dk-border);
	border-radius: 12px;
	background: var(--dk-bg-surface);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.fc-picker-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--dk-text-primary);
	overflow-wrap: anywhere;
}

.fc-picker-address {
	font-size: 13px;
	color: var(--dk-text-secondary);
	overflow-wrap: anywhere;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .fc-change-place { color: #93b4f5; }
}

:root[data-theme="dark"] .fc-change-place { color: #93b4f5; }

/* ---------------------------------------------------------------- 데스크톱 측면 패널 (§4.5) */

/* "모바일은 화면 하단 시트 하나, 데스크톱은 지도 옆 패널로 **같은 상태 모델**을 사용한다."
 *
 * 상태 모델은 건드리지 않는다 — 같은 DOM, 같은 열기/닫기 경로, 같은 세션 번호다. 바뀌는 건
 * 배치뿐이라 JS가 이 분기를 알 필요가 없다.
 *
 * ⚠️ **미디어쿼리가 아니라 `body.is-desktop-view`를 본다.** 이 앱은 햄버거 메뉴로 PC/모바일
 *    보기를 강제 전환할 수 있고(main.html의 applyViewMode), 그 선택이 화면 폭보다 우선이다.
 *    폭만 보면 넓은 화면에서 모바일 보기를 고른 사용자에게 480px 컬럼과 따로 노는 패널이 붙는다.
 *    main.css의 데스크톱 규칙이 전부 이 클래스 하나만 보는 것과 같은 이유다.
 *
 * 왼쪽 420px은 #tabSheet(채팅·랭킹 오버레이)가 쓴다. 그래서 오른쪽에 붙인다 — 가운데 지도가
 * 둘 사이에 그대로 남아, 어느 쪽 패널을 열어도 지도 맥락을 잃지 않는다.
 */
body.is-desktop-view .fc-sheet {
	top: 0;
	bottom: 0;
	left: auto;
	right: 0;
	width: 420px;
	max-width: 45vw;
	/* 화면 높이를 다 쓰므로 72vh 상한을 푼다. 넘치면 패널 안에서만 스크롤한다. */
	max-height: none;
	padding: 16px 20px;
	border-radius: 0;
	border-left: 1px solid var(--dk-border);
	box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
}

/* 좁은 창에서는 max-width가 이겨 패널이 얇아진다. 그때 빠른 선택 2열은 글자가 잘리므로 1열로.
   (420px일 때는 2열 그대로다 — 이 규칙은 창을 줄였을 때만 걸린다.) */
@media (max-width: 900px) {
	body.is-desktop-view .fc-quick-grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}
}

/* ================================================================ MAP-02 (개선안 §5·§6) */

/* ---------------------------------------------------------------- 탭 */

/* `추천`은 바로가기일 뿐 정보 종류의 상한이 아니다(§5.1). 예전의 `다른 정보 찾기` 토글은
   접었다 펴는 구조라 목록이 추천 아래로 계속 이어졌고, 낮은 화면에서는 화면 밖에서 열렸다. */
.fc-tabs {
	display: flex;
	gap: 6px;
	border-bottom: 1px solid var(--dk-border);
}

.fc-tab {
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 14px;
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--dk-text-secondary);
	cursor: pointer;
}

.fc-tab.is-active {
	border-bottom-color: #1957d6;
	color: var(--dk-text-primary);
}

.fc-quick-hint {
	margin: 0;
	font-size: 13px;
	color: var(--dk-text-secondary);
}

.fc-quick-empty {
	margin: 0;
	padding: 14px 12px;
	border: 1px dashed var(--dk-border);
	border-radius: 12px;
	font-size: 14px;
	color: var(--dk-text-secondary);
}

/* ---------------------------------------------------------------- 전체 정보 */

.fc-search-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.fc-search-row .fc-more-search {
	flex: 1 1 auto;
	min-width: 0;
}

.fc-search-clear {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 10px;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 13px;
	color: #1957d6;
	text-decoration: underline;
	cursor: pointer;
}

/* 분류는 아코디언이 아니라 **필터**다(§5.2). 전체 → 분류 → 하위를 강제하지 않는다. */
/* **한 줄로 두고 가로로 민다.**
 *
 * 줄바꿈으로 두면 320px에서 칩이 세 줄(=132px)이 되어 본문(185px)을 거의 다 먹는다. 실측에서
 * 전체 정보 첫 항목이 화면 밖으로 밀렸다 — 이 화면에서 고치려던 바로 그 증상이다.
 * 가로 스크롤은 본문의 세로 스크롤과 축이 달라 "이중 스크롤"이 되지 않는다(§6). */
.fc-cat-filters {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	/* 칩이 눌려 글자가 잘리지 않게 — 줄어들지 말고 넘치게 둔다. */
	padding-bottom: 2px;
}

.fc-cat-filters::-webkit-scrollbar {
	display: none;
}

.fc-cat {
	flex: 0 0 auto;
	white-space: nowrap;
}

.fc-cat {
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--dk-border);
	border-radius: 999px;
	background: var(--dk-bg-surface);
	font-family: inherit;
	font-size: 13px;
	color: var(--dk-text-primary);
	cursor: pointer;
}

.fc-cat.is-active {
	border-color: #1957d6;
	background: rgba(25, 87, 214, 0.1);
	font-weight: 600;
	color: #1957d6;
}

.fc-all-meta {
	margin: 0;
	font-size: 13px;
	color: var(--dk-text-secondary);
}

.fc-more-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 14px 12px;
	border: 1px dashed var(--dk-border);
	border-radius: 12px;
	font-size: 14px;
	color: var(--dk-text-secondary);
}

.fc-more-empty p {
	margin: 0;
	overflow-wrap: anywhere;
}

.fc-more-retry,
.fc-more-to-tip,
.fc-more-clear {
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--dk-border);
	border-radius: 10px;
	background: var(--dk-bg-surface);
	font-family: inherit;
	font-size: 13px;
	color: var(--dk-text-primary);
	cursor: pointer;
}

/* ---------------------------------------------------------------- 선택 표시 */

/* 선택을 **색 말고도** 알 수 있게 한다(§7 항목 5-B). 체크 자리는 늘 차지하고 보이기만
   토글한다 — 선택할 때 글자가 밀려 버튼 크기가 달라지면 목록 전체가 출렁인다. */
.fc-pick-check {
	flex: 0 0 auto;
	width: 14px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #1957d6;
	visibility: hidden;
}

.fc-pick.is-picked .fc-pick-check {
	visibility: visible;
}

.fc-pick-badge {
	align-self: flex-start;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(25, 87, 214, 0.1);
	font-size: 13px;
	color: #1957d6;
}

/* ---------------------------------------------------------------- 보상 (§12.3) */

.fc-summary-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 10px;
}

.fc-reward-preview {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #1957d6;
}

/* 보상이 없다고 행동을 막지 않는다. 이유만 조용히 알린다(§12.4). */
.fc-reward-preview.is-muted {
	font-weight: normal;
	color: var(--dk-text-secondary);
}

/* 확인을 눌러야 닫히는 모달로 만들지 않는다(§12.3). 읽을 시간을 준 뒤 스스로 접힌다. */
.fc-outcome {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(25, 87, 214, 0.1);
}

.fc-outcome-reward {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #1957d6;
}

.fc-outcome-note {
	margin: 0;
	font-size: 13px;
	color: var(--dk-text-secondary);
}

.fc-next-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fc-next-map,
.fc-next-another {
	flex: 1 1 auto;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--dk-border);
	border-radius: 10px;
	background: var(--dk-bg-surface);
	font-family: inherit;
	font-size: 14px;
	color: var(--dk-text-primary);
	cursor: pointer;
}

/* ---------------------------------------------------------------- 좁은 화면 */

/* 320px에서는 글자를 잘라 2열을 유지하지 않는다 — 1열로 바꾼다(§6). */
@media (max-width: 360px) {
	.fc-quick-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .fc-tab.is-active { border-bottom-color: #93b4f5; }
	:root:not([data-theme="light"]) .fc-search-clear,
	:root:not([data-theme="light"]) .fc-pick-check,
	:root:not([data-theme="light"]) .fc-pick-badge,
	:root:not([data-theme="light"]) .fc-reward-preview,
	:root:not([data-theme="light"]) .fc-outcome-reward,
	:root:not([data-theme="light"]) .fc-cat.is-active { color: #93b4f5; }
	:root:not([data-theme="light"]) .fc-cat.is-active { border-color: #93b4f5; background: rgba(25, 87, 214, 0.22); }
	:root:not([data-theme="light"]) .fc-pick-badge,
	:root:not([data-theme="light"]) .fc-outcome { background: rgba(25, 87, 214, 0.22); }
}

:root[data-theme="dark"] .fc-tab.is-active { border-bottom-color: #93b4f5; }
:root[data-theme="dark"] .fc-search-clear,
:root[data-theme="dark"] .fc-pick-check,
:root[data-theme="dark"] .fc-pick-badge,
:root[data-theme="dark"] .fc-reward-preview,
:root[data-theme="dark"] .fc-outcome-reward,
:root[data-theme="dark"] .fc-cat.is-active { color: #93b4f5; }
:root[data-theme="dark"] .fc-cat.is-active { border-color: #93b4f5; background: rgba(25, 87, 214, 0.22); }
:root[data-theme="dark"] .fc-pick-badge,
:root[data-theme="dark"] .fc-outcome { background: rgba(25, 87, 214, 0.22); }

/* 탭 줄을 본문 위에 붙여 둔다 — 목록을 훑는 동안에도 "지금 어느 탭인지"가 보이고,
   전환할 때 시작 위치가 항상 화면 안이다(§5.2). */
.fc-body {
	scroll-padding-top: 56px;
}

.fc-tabs {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--dk-bg-surface);
}

.fc-tips-toggle {
	box-sizing: border-box;
	align-self: flex-start;
	min-height: 44px;
	padding: 0 4px;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 14px;
	color: #1957d6;
	text-decoration: underline;
	cursor: pointer;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .fc-tips-toggle { color: #93b4f5; }
}

:root[data-theme="dark"] .fc-tips-toggle { color: #93b4f5; }

/* 낮은 화면에서는 **지도 노출량보다 입력 완료가 우선**이다(§5.1).
 *
 * 320x568 실측: 86dvh면 시트 488px, 헤더(136)와 하단(93)을 빼면 본문이 185px밖에 안 남아
 * `전체 정보`의 첫 항목(y=191)이 화면 밖이었다. 이 화면에서 고치려던 바로 그 증상이라,
 * 낮은 화면에서만 시트를 더 준다. 지도는 어차피 이 높이에서 거의 안 보인다. */
@media (max-height: 640px) {
	.fc-sheet {
		max-height: 94dvh;
	}

	/* 제목 줄은 닫기 버튼만 남기고 얇게 — 본문에 줄 수 있는 픽셀이 여기밖에 없다. */
	.fc-sheet-title {
		font-size: 15px;
	}
}

/* 무엇으로 바뀌는지 알려주는 줄 — 내부 값(TRUE/FALSE) 대신 문장으로 말한다(§5.3). */
.fc-mine-explain {
	margin: 0;
	font-size: 13px;
	color: var(--dk-text-secondary);
	overflow-wrap: anywhere;
}
/* 2026-09-15: 등록 화면은 전체 화면, 추천은 2열 3행으로 한눈에 고른다. */
.fc-sheet {
  top: 0;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  padding: max(4px, env(safe-area-inset-top)) 12px max(6px, env(safe-area-inset-bottom));
  gap: 4px;
}
.fc-body { gap: 4px; }
.fc-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fc-quick-grid .fc-pick { min-height: 58px; padding: 6px 8px; }
.fc-quick-grid .fc-pick-label { font-size: 15px; line-height: 1.25; }
.fc-quick-grid .fc-pick-meta { font-size: 12px; line-height: 1.2; }
.fc-quick-grid .fc-pick-badge { display: none; }
.fc-quick-hint { margin: 0 0 4px; }
.fc-footer { gap: 4px; padding-top: 0; }
.fc-summary-row:has(.fc-selected:empty):has(.fc-reward-preview[hidden]) { display: none; }
.fc-mine-title {
  min-height: 44px;
  padding: 0 4px;
  border: none;
  background: none;
  color: var(--dk-text-primary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.fc-mine-title::after { content: ' 보기'; }
.fc-mine-title[aria-expanded='true']::after { content: ' 접기'; }
/* 분류 탭과 페이지 이동: 모바일에서 가로 스와이프 없이 전체 분류에 접근한다. */
.fc-category-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.fc-category-tab {
  min-width: 0; min-height: 40px; padding: 4px 2px; border: 0;
  border-bottom: 2px solid var(--dk-border-soft); border-radius: 0;
  background: var(--dk-bg-surface); color: var(--dk-text-secondary); font: inherit; font-size: 13px;
}
.fc-category-tab.is-active { color: #1957d6; border-bottom-color: #1957d6; font-weight: 700; }
.fc-page-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fc-page-button { min-height: 44px; padding: 4px 16px; border: 1px solid var(--dk-border); border-radius: 8px; background: var(--dk-bg-surface); color: var(--dk-text-primary); font: inherit; }
.fc-page-button:disabled { opacity: .4; }
.fc-page-number { font-size: 13px; color: var(--dk-text-secondary); }
.fc-sheet.is-all .fc-mine,
.fc-sheet.is-all .fc-note-toggle,
.fc-sheet.is-all .fc-note,
.fc-sheet.is-all .fc-note-hint,
.fc-sheet.is-all .fc-report,
.fc-sheet.is-all .fc-next-row { display: none; }
.fc-sheet.is-all .fc-more-group-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fc-sheet.is-all .fc-pick { min-height: 66px; padding: 6px 8px; }
.fc-sheet.is-all .fc-pick-label { font-size: 14px; line-height: 1.3; }
.fc-sheet.is-all .fc-pick-meta { font-size: 12px; }
.fc-sheet.is-all .fc-pick-badge { display: none; }
.fc-sheet.is-all .fc-panel-all { gap: 6px; }
.fc-sheet.is-all .fc-all-meta { margin: 0; }
.fc-sheet.is-all .fc-report-toggle { display: none; }