/**
 * 전북 아이여행 — 새 UI.
 *
 * 원칙
 *   카드 높이는 어떤 경우에도 변하지 않는다. 상세는 따로 뜨는 층(패널)이다.
 *   모바일 = 전체 화면, PC = 오른쪽 패널.
 */

.ifs-jb {
	--jb-bg: #FFFDFC;
	--jb-surface: #fff;
	--jb-ink: #2E2A26;
	--jb-muted: #6E655F;
	--jb-line: #E9E0D9;
	--jb-cream: #FBF3EC;
	--jb-main: #1F7A5C;          /* 전북 = 초록 계열, 대비 5.0:1 */
	--jb-main-ink: #17614A;
	--jb-warn: #B8442A;
	--jb-r: 18px;
	color: var(--jb-ink);
	font-size: 15px;
	line-height: 1.6;
}
.ifs-jb *, .ifs-jb *::before, .ifs-jb *::after { box-sizing: border-box; }
.ifs-jb [hidden], .ifs-jb[hidden] { display: none !important; }
/* 시트·패널은 자기 자신이 .ifs-jb 이므로 따로 못 숨긴다. 여기서 확실히 숨긴다. */
.jb-sheet[hidden], .jb-panel[hidden] { display: none !important; }
.ifs-jb button { cursor: pointer; font-family: inherit; }

/* 예전 인라인 확장 UI 는 새 화면이 준비되면 감춘다 (JS 가 직접 숨긴다).
   혹시 새 화면을 못 만들면 다시 보여 주므로 빈 화면이 남지 않는다. */
.ifs-jbtrip-page #jbfinder .jt5-boot { color: #6E655F; font-size: 14px; }

/* ── 검색 줄 ─────────────────────────────────────────────── */
.jb-search {
	background: var(--jb-bg);
	display: flex; gap: 8px; padding: 12px 0 8px;
	position: sticky; top: 0; z-index: 5;
}
.jb-qwrap { flex: 1 1 auto; position: relative; }
.jb-q {
	background: var(--jb-surface); border: 0; border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px var(--jb-line);
	color: var(--jb-ink); font-size: 15px; height: 48px;
	padding: 0 16px 0 42px; width: 100%;
}
.jb-q:focus { box-shadow: inset 0 0 0 2px var(--jb-main); outline: none; }
.jb-qic {
	color: var(--jb-muted); left: 15px; position: absolute; top: 50%;
	transform: translateY(-50%); pointer-events: none;
}
.jb-qic svg { height: 18px; width: 18px; }
.jb-fbtn {
	align-items: center; background: var(--jb-ink); border: 0; border-radius: 999px;
	color: #fff; display: inline-flex; font-size: 14px; font-weight: 700; gap: 6px;
	min-height: 48px; padding: 0 16px; white-space: nowrap;
}
.jb-fbtn .n {
	background: #fff; border-radius: 999px; color: var(--jb-ink);
	font-size: 12px; min-width: 20px; padding: 1px 6px; text-align: center;
}

/* ── 빠른 조건 ───────────────────────────────────────────── */
.jb-quick {
	display: flex; gap: 8px; margin: 0 -16px 10px; overflow-x: auto;
	padding: 2px 16px 6px; scrollbar-width: none; touch-action: pan-x;
}
.jb-quick::-webkit-scrollbar { display: none; }
.jb-chip {
	background: var(--jb-surface); border: 0; border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px var(--jb-line); color: var(--jb-ink);
	font-size: 14px; font-weight: 600; min-height: 44px; padding: 0 15px;
	white-space: nowrap;
}
.jb-chip[aria-pressed="true"] { background: var(--jb-main); box-shadow: none; color: #fff; }

/* 선택한 조건 (삭제 가능) */
.jb-active { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.jb-tag {
	align-items: center; background: var(--jb-cream); border: 0; border-radius: 999px;
	color: var(--jb-main-ink); display: inline-flex; font-size: 13.5px; font-weight: 700;
	gap: 6px; min-height: 44px; padding: 0 8px 0 14px;
}
.jb-tag .x {
	align-items: center; background: rgba(31, 122, 92, .12); border-radius: 999px;
	display: inline-flex; height: 28px; justify-content: center; width: 28px;
}
.jb-tag .x svg { height: 12px; width: 12px; }
.jb-clear {
	background: none; border: 0; color: var(--jb-muted); font-size: 13.5px;
	min-height: 44px; text-decoration: underline;
}

/* ── 결과 ───────────────────────────────────────────────── */
.jb-count { color: var(--jb-muted); font-size: 13.5px; margin: 0 0 12px; }
.jb-count b { color: var(--jb-ink); }

.jb-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }

.jb-card {
	background: var(--jb-surface); border-radius: var(--jb-r);
	box-shadow: inset 0 0 0 1px var(--jb-line);
	display: flex; gap: 12px; overflow: hidden; padding: 10px;
	position: relative; text-align: left; width: 100%;
}
.jb-card:focus-visible { box-shadow: inset 0 0 0 2px var(--jb-main); outline: none; }
.jb-th {
	background: var(--jb-cream); border-radius: 14px; flex: 0 0 auto;
	height: 104px; object-fit: cover; width: 104px;
}
.jb-cb { flex: 1 1 auto; min-width: 0; padding-right: 40px; }
.jb-rg { color: var(--jb-main-ink); font-size: 12.5px; font-weight: 700; }
.jb-nm {
	color: var(--jb-ink); font-size: 16.5px; font-weight: 800; letter-spacing: -.01em;
	margin: 2px 0 4px;
}
.jb-sm {
	color: var(--jb-muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 8px;
	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.jb-ms { display: flex; flex-wrap: wrap; gap: 5px; }
.jb-m {
	background: var(--jb-cream); border-radius: 999px; color: var(--jb-main-ink);
	font-size: 11.5px; font-weight: 700; padding: 3px 9px;
}
.jb-m.u { background: #F4F1EE; color: var(--jb-muted); }
.jb-go {
	align-items: center; color: var(--jb-main-ink); display: inline-flex;
	font-size: 13px; font-weight: 800; gap: 2px; margin-top: 8px;
}
.jb-go svg { height: 13px; width: 13px; }

/* 저장 버튼은 카드 클릭과 분리한다 */
.jb-save {
	background: rgba(255, 255, 255, .92); border: 0; border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--jb-line); color: var(--jb-muted);
	height: 44px; padding: 0; position: absolute; right: 8px; top: 8px; width: 44px;
}
.jb-save svg { height: 19px; width: 19px; }
.jb-save[aria-pressed="true"] { color: #D2453B; }

.jb-more {
	background: var(--jb-surface); border: 0; border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px var(--jb-line); color: var(--jb-ink);
	display: block; font-size: 15px; font-weight: 700; margin: 16px auto 0;
	min-height: 48px; padding: 0 22px;
}
.jb-empty {
	background: var(--jb-cream); border-radius: var(--jb-r); color: var(--jb-muted);
	padding: 22px 18px; text-align: center;
}

/* ── 추천 테마 바로가기 ──────────────────────────────────── */
.jb-themes { margin: 26px 0 4px; }
.jb-th2 { font-size: 17px; font-weight: 800; margin: 0 0 4px; }
.jb-thd { color: var(--jb-muted); font-size: 13.5px; margin: 0 0 12px; }
.jb-trail {
	display: flex; gap: 10px; margin: 0 -16px; overflow-x: auto;
	padding: 2px 16px 8px; scrollbar-width: none; touch-action: pan-x;
}
.jb-trail::-webkit-scrollbar { display: none; }
.jb-tcard {
	background: var(--jb-surface); border: 0; border-radius: 16px;
	box-shadow: inset 0 0 0 1.5px var(--jb-line); color: var(--jb-ink);
	flex: 0 0 auto; min-height: 84px; padding: 12px 14px; text-align: left; width: 138px;
}
.jb-tcard .e { display: block; font-size: 20px; line-height: 1.1; }
.jb-tcard .t { display: block; font-size: 14px; font-weight: 800; margin-top: 6px; }
.jb-tcard .c { color: var(--jb-muted); display: block; font-size: 12px; margin-top: 2px; }

/* ── 필터 하단 시트 ─────────────────────────────────────── */
.jb-sheet {
	background: rgba(46, 42, 38, .45); bottom: 0; display: flex; left: 0;
	position: fixed; right: 0; top: 0; z-index: 100050;
}
.jb-sheet { align-items: flex-end; }
.jb-sheet-panel {
	background: var(--jb-surface); border-radius: 22px 22px 0 0;
	display: flex; flex-direction: column; margin: 0 auto;
	max-height: 88vh; max-height: 88dvh; max-width: 640px; width: 100%;
}
.jb-sheet-top {
	align-items: center; border-bottom: 1px solid var(--jb-line); display: flex;
	justify-content: space-between; padding: 10px 16px;
}
.jb-sheet-t { font-size: 16px; font-weight: 800; margin: 0; }
.jb-sheet-body {
	flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
	padding: 6px 16px 16px; touch-action: pan-y;
}
.jb-fgrp { border-bottom: 1px solid var(--jb-line); padding: 14px 0; }
.jb-fgrp:last-child { border-bottom: 0; }
.jb-flb { display: block; font-size: 13px; font-weight: 800; margin: 0 0 8px; }
.jb-fnote { color: var(--jb-muted); font-size: 12.5px; margin: 6px 0 0; }
.jb-fopts { display: flex; flex-wrap: wrap; gap: 8px; }
.jb-fgrp.is-off .jb-fopts { opacity: .45; }
.jb-sheet-bot {
	border-top: 1px solid var(--jb-line); display: flex; gap: 10px;
	padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
.jb-reset {
	background: var(--jb-surface); border: 0; border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px var(--jb-line); color: var(--jb-ink);
	flex: 0 0 auto; font-size: 15px; font-weight: 700; min-height: 50px; padding: 0 20px;
}
.jb-apply {
	background: var(--jb-main); border: 0; border-radius: 999px; color: #fff;
	flex: 1 1 auto; font-size: 16px; font-weight: 800; min-height: 50px;
}
.jb-xbtn {
	background: var(--jb-cream); border: 0; border-radius: 999px; color: var(--jb-ink);
	height: 44px; width: 44px;
}
.jb-xbtn svg { height: 16px; width: 16px; }

/* ── 상세 패널 ───────────────────────────────────────────── */
.jb-panel { position: fixed; inset: 0; z-index: 100060; }
.jb-panel-dim { background: rgba(46, 42, 38, .5); position: absolute; inset: 0; }
.jb-panel-box {
	background: var(--jb-bg); display: flex; flex-direction: column;
	height: 100vh; height: 100dvh; position: absolute; inset: 0;
}
.jb-panel-top {
	align-items: center; background: var(--jb-bg); border-bottom: 1px solid var(--jb-line);
	display: flex; flex: 0 0 auto; gap: 8px;
	padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px;
}
.jb-back, .jb-fav {
	align-items: center; background: var(--jb-cream); border: 0; border-radius: 999px;
	color: var(--jb-ink); display: inline-flex; flex: 0 0 auto; height: 44px;
	justify-content: center; width: 44px;
}
.jb-back svg, .jb-fav svg { height: 19px; width: 19px; }
.jb-fav[aria-pressed="true"] { color: #D2453B; }
.jb-panel-t {
	flex: 1 1 auto; font-size: 16px; font-weight: 800; margin: 0; min-width: 0;
	overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap;
}
.jb-panel-body {
	flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
	padding: 0 0 18px; touch-action: pan-y; -webkit-overflow-scrolling: touch;
}
.jb-hero { background: var(--jb-cream); display: block; margin: 0; }
/* 사진이 너무 크면 장소명·추천 이유가 첫 화면에서 밀린다. 높이를 묶는다. */
.jb-hero img {
	display: block; height: auto; max-height: 38vh; max-height: 38dvh;
	object-fit: cover; width: 100%;
}
.jb-hero figcaption { color: var(--jb-muted); font-size: 11.5px; padding: 6px 16px 0; }
.jb-pin { padding: 14px 16px 0; }
.jb-prg { color: var(--jb-main-ink); font-size: 13px; font-weight: 700; }
.jb-pnm { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 8px; }
.jb-pwhy {
	background: var(--jb-cream); border-radius: 14px; color: var(--jb-ink);
	font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; padding: 12px 14px;
}
.jb-pms { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }

.jb-dl { border-top: 1px solid var(--jb-line); margin: 0; padding: 0; }
.jb-row {
	border-bottom: 1px solid var(--jb-line); display: grid;
	gap: 4px 12px; grid-template-columns: 96px 1fr; padding: 12px 16px;
}
.jb-row dt { color: var(--jb-muted); font-size: 13px; font-weight: 700; margin: 0; }
.jb-row dd { font-size: 14px; margin: 0; word-break: break-word; }
.jb-row dd.u { color: var(--jb-muted); }
.jb-row dd small { color: var(--jb-muted); display: block; font-size: 12.5px; margin-top: 3px; }

.jb-sec { padding: 16px; }
.jb-sect { font-size: 15px; font-weight: 800; margin: 0 0 8px; }
.jb-tips { list-style: none; margin: 0; padding: 0; }
.jb-tips li {
	background: var(--jb-surface); border-radius: 12px;
	box-shadow: inset 0 0 0 1px var(--jb-line); font-size: 13.5px; line-height: 1.55;
	margin: 0 0 8px; padding: 10px 12px;
}
.jb-note {
	background: #FFF6F2; border-radius: 12px; color: var(--jb-warn);
	font-size: 13px; line-height: 1.55; margin: 0 16px; padding: 12px 14px;
}
.jb-official {
	align-items: center; background: var(--jb-surface); border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px var(--jb-line); color: var(--jb-main-ink);
	display: flex; font-size: 14.5px; font-weight: 800; justify-content: center;
	margin: 14px 16px 0; min-height: 50px; text-decoration: none;
}

.jb-panel-bot {
	background: var(--jb-bg); border-top: 1px solid var(--jb-line);
	display: flex; flex: 0 0 auto; gap: 8px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}
.jb-act {
	align-items: center; background: var(--jb-surface); border: 0; border-radius: 14px;
	box-shadow: inset 0 0 0 1.5px var(--jb-line); color: var(--jb-ink);
	display: flex; flex: 1 1 0; flex-direction: column; font-size: 12.5px;
	font-weight: 700; gap: 3px; justify-content: center; min-height: 52px;
	padding: 6px 4px; text-decoration: none;
}
.jb-act svg { height: 18px; width: 18px; }
.jb-act.is-main { background: var(--jb-main); box-shadow: none; color: #fff; }

/* 배경 스크롤 잠금 */
html.jb-lock, body.jb-lock { overflow: hidden !important; }

/* ── PC ─────────────────────────────────────────────────── */
@media (min-width: 900px) {
	.ifs-jb { font-size: 16px; }
	.jb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.jb-th { height: 118px; width: 118px; }
	.jb-quick { margin: 0 0 12px; padding: 2px 0 6px; }
	.jb-trail { margin: 0; padding: 2px 0 8px; }
	.jb-region { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

	.jb-panel-box {
		border-radius: 0; height: 100vh; height: 100dvh;
		inset: 0 0 0 auto; max-width: 560px; min-width: 480px; width: 46vw;
		box-shadow: -18px 0 50px rgba(0, 0, 0, .18);
	}
	.jb-panel-top { padding-top: 10px; }
	.jb-panel-bot { padding-bottom: 12px; }
}

@media (min-width: 1200px) {
	.jb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jb-card { flex-direction: column; }
	.jb-th { height: 150px; width: 100%; }
	.jb-cb { padding-right: 0; }
}

/* 움직임을 줄이는 설정 존중 */
@media (prefers-reduced-motion: reduce) {
	.ifs-jb *, .jb-panel * { animation: none !important; transition: none !important; }
}

/* ── 테마(Astra)가 우리 버튼·입력칸을 덮어쓰지 못하게 ──────────
   운영 화면에서 뒤로가기 단추가 테마의 파란 버튼 색으로 바뀌고,
   검색창의 왼쪽 여백(돋보기 자리)과 필터 버튼 글자색이 사라졌다.
   테마 CSS 가 나중에 실려 우선순위가 높아서 생긴 문제라 여기서 못 박는다. */
.ifs-jb input.jb-q {
	background-color: var(--jb-surface) !important;
	border: 0 !important; border-radius: 999px !important;
	box-shadow: inset 0 0 0 1.5px var(--jb-line) !important;
	color: var(--jb-ink) !important; font-size: 15px !important;
	height: 48px !important; line-height: 48px !important;
	margin: 0 !important; padding: 0 16px 0 42px !important; width: 100% !important;
}
.ifs-jb input.jb-q:focus { box-shadow: inset 0 0 0 2px var(--jb-main) !important; }

.ifs-jb button.jb-chip,
.ifs-jb button.jb-chip:hover,
.ifs-jb button.jb-chip:focus,
.ifs-jb button.jb-chip:active {
	background-color: var(--jb-surface) !important; color: var(--jb-ink) !important;
	border: 0 !important; box-shadow: inset 0 0 0 1.5px var(--jb-line) !important;
}
.ifs-jb button.jb-chip[aria-pressed="true"],
.ifs-jb button.jb-chip[aria-pressed="true"]:hover,
.ifs-jb button.jb-chip[aria-pressed="true"]:focus,
.ifs-jb button.jb-chip[aria-pressed="true"]:active {
	background-color: var(--jb-main) !important; box-shadow: none !important; color: #fff !important;
}
.ifs-jb button.jb-chip[disabled] { color: var(--jb-muted) !important; }

.ifs-jb button.jb-fbtn,
.ifs-jb button.jb-fbtn:hover,
.ifs-jb button.jb-fbtn:focus,
.ifs-jb button.jb-fbtn:active {
	background-color: var(--jb-ink) !important; border: 0 !important; color: #fff !important;
}
.ifs-jb button.jb-fbtn .n { background-color: #fff !important; color: var(--jb-ink) !important; }

.jb-panel button.jb-back, .jb-panel button.jb-fav,
.jb-panel button.jb-back:hover, .jb-panel button.jb-fav:hover,
.jb-panel button.jb-back:focus, .jb-panel button.jb-fav:focus,
.jb-panel button.jb-back:active, .jb-panel button.jb-fav:active,
.ifs-jb button.jb-xbtn, .ifs-jb button.jb-xbtn:hover, .ifs-jb button.jb-xbtn:focus {
	background-color: var(--jb-cream) !important; border: 0 !important; border-radius: 999px !important;
	color: var(--jb-ink) !important; height: 44px !important; min-width: 0 !important;
	padding: 0 !important; width: 44px !important;
}
.jb-panel button.jb-fav[aria-pressed="true"] { color: #D2453B !important; }

.ifs-jb button.jb-save,
.ifs-jb button.jb-save:hover,
.ifs-jb button.jb-save:focus,
.ifs-jb button.jb-save:active {
	background-color: rgba(255, 255, 255, .94) !important; border: 0 !important;
	box-shadow: inset 0 0 0 1px var(--jb-line) !important; color: var(--jb-muted) !important;
	height: 44px !important; padding: 0 !important; width: 44px !important;
}
.ifs-jb button.jb-save[aria-pressed="true"] { color: #D2453B !important; }

.ifs-jb button.jb-more, .ifs-jb button.jb-more:hover, .ifs-jb button.jb-more:focus,
.ifs-jb button.jb-reset, .ifs-jb button.jb-reset:hover, .ifs-jb button.jb-reset:focus,
.ifs-jb button.jb-tcard, .ifs-jb button.jb-tcard:hover, .ifs-jb button.jb-tcard:focus,
.ifs-jb a.jb-official, .ifs-jb a.jb-official:hover, .ifs-jb a.jb-official:focus,
.jb-panel a.jb-act, .jb-panel a.jb-act:hover, .jb-panel a.jb-act:focus {
	background-color: var(--jb-surface) !important; border: 0 !important; color: var(--jb-ink) !important;
	text-decoration: none !important;
}
.ifs-jb a.jb-official, .ifs-jb a.jb-official:hover { color: var(--jb-main-ink) !important; }
.jb-panel a.jb-act.is-main, .jb-panel a.jb-act.is-main:hover, .jb-panel a.jb-act.is-main:focus {
	background-color: var(--jb-main) !important; box-shadow: none !important; color: #fff !important;
}
.ifs-jb button.jb-apply, .ifs-jb button.jb-apply:hover, .ifs-jb button.jb-apply:focus {
	background-color: var(--jb-main) !important; border: 0 !important; color: #fff !important;
}
.ifs-jb button.jb-tag, .ifs-jb button.jb-tag:hover, .ifs-jb button.jb-tag:focus {
	background-color: var(--jb-cream) !important; border: 0 !important; color: var(--jb-main-ink) !important;
}
.ifs-jb button.jb-clear, .ifs-jb button.jb-clear:hover, .ifs-jb button.jb-clear:focus {
	background: none !important; color: var(--jb-muted) !important;
}
/* 카드 안 제목·본문에 테마 여백이 끼지 않게 */
.ifs-jb .jb-nm, .ifs-jb .jb-pnm, .ifs-jb .jb-th2, .ifs-jb .jb-sect { padding: 0 !important; }
.ifs-jb .jb-sm, .ifs-jb .jb-count, .ifs-jb .jb-thd { padding: 0 !important; }
.jb-panel .jb-panel-t { padding: 0 !important; }