@charset "utf-8";
/* =============================================================================
   가맹점 인수 (클린양도양수) — 매물 리스트 · 상세

   startup/transfer/index.php · detail.php 가 함께 씁니다.
   두 화면이 카드·필터·버튼을 공유하므로 파일 하나로 모아 둡니다.

   [색] 사이트 팔레트를 그대로 씁니다. 새로 만들지 않습니다.
        #fdd000  브랜드 노랑 — 선택된 항목과 주요 버튼에만
        #1c1c1b  본문 · 강조 텍스트
        #e0e0e0  테두리
        #f4f6f8  연한 배경

   [폰트] style.css 의 Noto Sans KR 을 그대로 물려받습니다. 여기서 지정하지 않습니다.
============================================================================= */

.tr_wrap{ padding:0 20px; }


/* ── 필터 ────────────────────────────────────────────────────────────── */
.tr_filter{
	display:flex; gap:8px; align-items:center; flex-wrap:wrap;
	padding:0 0 22px; position:relative;
}
.tr_chip{
	border:1px solid #ddd; border-radius:40px; padding:10px 20px;
	font-size:15px; font-weight:400; color:#1c1c1b; background:#fff;
	cursor:pointer; display:inline-flex; align-items:center; gap:6px;
	transition:all .18s ease;
}
.tr_chip:after{ content:"▾"; font-size:10px; opacity:.5; }
.tr_chip:hover{ border-color:#1c1c1b; }
.tr_chip.on{ background:#1c1c1b; border-color:#1c1c1b; color:#fff; }
.tr_chip.on:after{ opacity:.7; }

.tr_reset{
	background:none; border:none; padding:8px 4px; margin-left:2px;
	font-size:14px; color:#999; cursor:pointer;
}
.tr_reset:hover{ color:#1c1c1b; }

.tr_panel{
	display:none; position:absolute; top:60px; left:0; z-index:60;
	width:min(560px, 100%); background:#fff;
	border:1px solid #e0e0e0; border-radius:10px;
	box-shadow:0 10px 34px rgba(0,0,0,.13); padding:22px 24px;
}
.tr_panel h4{
	margin:0 0 10px; font-size:13px; font-weight:400; color:#999; letter-spacing:0;
}
.tr_panel h4 + .tr_opts{ margin-bottom:20px; }
.tr_opts{ display:flex; flex-wrap:wrap; gap:7px; }
.tr_opt{
	border:1px solid #e0e0e0; border-radius:5px; padding:8px 14px;
	font-size:14px; color:#555; background:#fff; cursor:pointer;
	transition:all .15s ease;
}
.tr_opt:hover{ border-color:#1c1c1b; color:#1c1c1b; }
/* 선택된 항목에만 브랜드 노랑을 씁니다. 노랑 위에는 검정 글씨가 가장 잘 읽힙니다. */
.tr_opt.sel{ background:#fdd000; border-color:#fdd000; color:#1c1c1b; font-weight:500; }
.tr_opt_none{ font-size:14px; color:#bbb; padding:8px 2px; }

.tr_note{
	margin-top:16px; padding-top:14px; border-top:1px solid #f1f1f1;
	font-size:13px; color:#999; line-height:1.75;
}
.tr_note b{ color:#666; font-weight:500; }

.tr_panel_foot{ display:flex; justify-content:flex-end; margin-top:16px; }
.tr_btn{
	border:none; background:#1c1c1b; color:#fff; border-radius:5px;
	padding:11px 28px; font-size:14px; cursor:pointer;
}
.tr_btn:hover{ background:#000; }


/* ── 건수 ────────────────────────────────────────────────────────────── */
.tr_count{
	font-size:14px; color:#999;
}
.tr_count b{ color:#1c1c1b; font-weight:500; }


/* ── 매물 표 ───────────────────────────────────────────────────────────
   [1차 피드백] 사진과 매장명을 빼고 금액 위주의 표로 바꿨습니다.
   줄 끝의 버튼으로 상세를 거치지 않고 바로 접수합니다.                    */
.tr_tbl_wrap{ margin-top:10px; }

.tr_tbl{
	width:100%; border-collapse:collapse; table-layout:fixed;
	border-top:2px solid #1c1c1b;
}
.tr_tbl th{
	padding:16px 10px; font-size:15px; font-weight:500; color:#777;
	background:#fafbfc; border-bottom:1px solid #e6e8eb; text-align:center;
	white-space:nowrap;
}
.tr_tbl td{
	padding:20px 10px; font-size:16px; color:#1c1c1b;
	border-bottom:1px solid #eee; text-align:center; vertical-align:middle;
}
.tr_tbl tbody tr:hover{ background:#fcfcfd; }

.tr_c_no{ color:#aeb2b7; font-size:15px; }
.tr_c_loc{ font-weight:500; }
.tr_c_num{ color:#555; }
/* 권리금이 고객이 가장 먼저 보는 값이라 눈에 띄게 둡니다. */
.tr_c_key{ font-weight:700; letter-spacing:-.5px; }
.tr_c_date{ color:#b4b4b4; font-size:14.5px; }
.tr_c_act{ padding-right:0; }

.tr_apply{
	display:inline-block; padding:11px 20px; border-radius:7px;
	background:#fdd000; color:#1c1c1b; font-size:15px; font-weight:700;
	text-decoration:none; white-space:nowrap; transition:background .15s ease;
}
.tr_apply:hover{ background:#f0c500; }


/* ── 페이지 번호 ───────────────────────────────────────────────────── */
.tr_page{
	display:flex; justify-content:center; align-items:center; gap:5px;
	margin-top:40px;
}
.tr_page a,
.tr_page span{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:38px; height:38px; padding:0 12px; border-radius:7px;
	font-size:15px; line-height:1; text-decoration:none; box-sizing:border-box;
}
.tr_page a{ color:#555; border:1px solid #e2e4e7; background:#fff; }
.tr_page a:hover{ border-color:#1c1c1b; color:#1c1c1b; }
.tr_page .now{ background:#1c1c1b; color:#fdd000; font-weight:700; border:1px solid #1c1c1b; }
.tr_page .off{ color:#cdd0d4; border:1px solid #f1f2f4; background:#fff; }
.tr_page .dot{ color:#c4c4c4; min-width:0; padding:0 2px; }

/* ── 상태 표시 ───────────────────────────────────────────────────────── */
.tr_empty{
	text-align:center; padding:90px 20px; font-size:15px; color:#999; line-height:1.9;
	background:#f4f6f8; border-radius:10px; margin-top:36px;
}


/* =============================================================================
   매물 상세
============================================================================= */

.tr_notice{
	background:#fffdf0; border:1px solid #f5e6a8; border-radius:8px;
	padding:18px 22px; font-size:14.5px; color:#7a6a1a; line-height:1.7;
	margin:0 0 40px;
}

.tr_dt_top{ display:flex; gap:56px; align-items:flex-start; }
.tr_dt_left{ flex:0 0 40%; max-width:40%; }
.tr_dt_right{ flex:1; min-width:0; }

/* 사진 */
.tr_slide{
	position:relative; width:100%; aspect-ratio:1 / 1;
	border-radius:10px; overflow:hidden; background:#f4f6f8;
}
/* Swiper — 컨테이너가 .tr_slide 의 정사각 영역을 그대로 채웁니다.

   [주의] style.css 가 전역으로 아래 두 줄을 걸어 둡니다.
            .swiper-container{ overflow:visible !important; }
            .swiper-slide{ opacity:0.25; margin-right:15px; }
          메인 슬라이드용이라 이 화면에서는 사진이 흐려지고 간격이 벌어집니다.
          클래스를 두 개 겹쳐 특이도를 높여 되돌립니다.                       */
.tr_slide .tr_swiper{ width:100%; height:100%; overflow:hidden !important; }
.tr_slide .swiper-wrapper{ height:100%; }
.tr_slide .swiper-slide{ height:100%; opacity:1; margin-right:0; overflow:hidden; }
.tr_slide .swiper-slide img{ width:100%; height:100%; display:block; object-fit:cover; }
/* 등록된 사진이 없을 때 — 로고를 작게, 흐리게 놓아 사진처럼 보이지 않게 합니다. */
.tr_slide .swiper-slide img.tr_logo{ object-fit:contain; padding:26%; opacity:.28; box-sizing:border-box; }

.tr_arrow{
	position:absolute; top:50%; transform:translateY(-50%);
	width:40px; height:40px; border:none; border-radius:50%;
	background:rgba(255,255,255,.92); color:#1c1c1b;
	font-size:35px; line-height:1; cursor:pointer;
	box-shadow:0 2px 10px rgba(0,0,0,.14);
	z-index:10;
	font-family: monospace;
}
.tr_arrow:hover{ background:#fff; }
.tr_arrow.prev{ left:14px; }
.tr_arrow.next{ right:14px; }

/* 도트 — Swiper 페이지네이션입니다.

   [주의] swiper.min.css 가 .swiper-pagination 을 absolute 로 잡습니다.
          이 화면은 도트를 사진 아래에 두므로 static 으로 되돌립니다.
   [주의] style.css 의 .swiper-pagination-bullet 은 !important 로 크기·색을
          고정합니다. 그래서 여기도 !important 를 씁니다.
          클래스가 하나 더 많아 이쪽이 이깁니다.                            */
.tr_dots{
	position:static; display:flex; gap:7px; justify-content:center; margin-top:16px;
}
.tr_dots .swiper-pagination-bullet{
	width:8px !important; height:8px !important; margin:0;
	background:#ddd !important; border-radius:50% !important; opacity:1 !important;
	cursor:pointer; transition:width .18s ease, background .18s ease, border-radius .18s ease;
}
.tr_dots .swiper-pagination-bullet-active{
	background:#1c1c1b !important; width:22px !important; border-radius:4px !important;
}

/* 정보 */
.tr_dt_name{
	font-size:30px; font-weight:700; color:#1c1c1b;
	margin:0 0 8px; line-height:1.25; letter-spacing:-1px;
}
.tr_dt_loc{ font-size:15px; color:#999; margin:0 0 30px; }

.tr_dt_table{ width:100%; border-collapse:collapse; border-top:1px solid #1c1c1b; }
.tr_dt_table th,
.tr_dt_table td{ padding:17px 2px; border-bottom:1px solid #eee; text-align:left; }
.tr_dt_table th{ width:110px; font-size:14px; font-weight:400; color:#999; }
.tr_dt_table td{ font-size:16px; font-weight:500; color:#1c1c1b; }
/* 권리금은 이 화면에서 가장 중요한 값이라 한 단계 키웁니다. */
.tr_dt_table tr.tr_dt_key td{ font-size:22px; font-weight:700; letter-spacing:-.5px; }

.tr_dt_note{
	margin-top:26px; padding:18px 20px; background:#f4f6f8; border-radius:8px;
	font-size:14.5px; color:#666; line-height:1.8; white-space:pre-wrap;
}

/* 버튼 — 두 칸 아래에 가운데로 둡니다. 화면 폭을 다 쓰면 버튼이 지나치게 길어집니다. */
.tr_cta{ margin-top:56px; text-align:center; }
.tr_cta a{
	display:inline-block; width:100%; max-width:420px; padding:20px 0; border-radius:8px;
	background:#fdd000; color:#1c1c1b; font-size:17px; font-weight:700;
	text-align:center; text-decoration:none; transition:filter .18s ease;
}
.tr_cta a:hover{ filter:brightness(.94); }

.tr_back{ text-align:center; padding:44px 0 0; }
.tr_back button{
	background:none; border:none; font-size:14px; color:#999;
	cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.tr_back button:hover{ color:#1c1c1b; }


/* =============================================================================
   반응형 — style.css 의 기준(1280 / 1024 / 760)을 따릅니다.
============================================================================= */

@media screen and (max-width:1280px){
	.tr_wrap{ padding:0 40px; }
	.tr_dt_top{ gap:40px; }
}

@media screen and (max-width:1024px){
	/* 중간 폭 — 칸 사이를 좁혀 표가 한 화면에 들어오게 합니다. */
	.tr_tbl th{ padding:14px 6px; font-size:14px; }
	.tr_tbl td{ padding:17px 6px; font-size:15px; }
	.tr_apply{ padding:10px 14px; font-size:14px; }

	.tr_dt_top{ flex-direction:column; gap:36px; }
	.tr_dt_left,
	.tr_dt_right{ flex:none; width:100%; max-width:100%; }
	.tr_slide{ max-width:460px; margin:0 auto; }
	.tr_dt_name{ font-size:26px; }
}

@media screen and (max-width:760px){
	.tr_wrap{ padding:0; }

	.tr_chip{ padding:9px 16px; font-size:14px; }
	.tr_reset{ font-size:13px; }
	.tr_panel{ position:fixed; top:auto; bottom:0; left:0; width:100%; border-radius:14px 14px 0 0; padding:22px 20px 26px; max-height:76vh; overflow-y:auto; }
	.tr_panel_foot{ justify-content:stretch; }
	.tr_panel_foot .tr_btn{ width:100%; padding:14px 0; font-size:15px; }

	/* 좁은 화면 — 표를 그대로 두면 칸이 잘립니다.
	   줄마다 상자로 쌓고, 칸 왼쪽에 제목을 붙여 무슨 값인지 알 수 있게 합니다.
	   제목은 _card.php 의 data-l 값입니다. */
	/* [주의] table-layout:fixed 와 colgroup 이 남아 있으면 칸 폭이 그대로 걸려
	         세로로 쌓아도 글자가 한 줄로 눌립니다. 둘 다 풀어야 합니다. */
	.tr_tbl{ border-top:0; display:block; table-layout:auto; }
	.tr_tbl colgroup{ display:none; }
	.tr_tbl thead{ display:none; }
	.tr_tbl tbody, .tr_tbl tr, .tr_tbl td{ display:block; width:auto; }
	.tr_tbl tr{
		border:1px solid #e6e8eb; border-radius:10px;
		padding:6px 16px 16px; margin-bottom:12px;
	}
	.tr_tbl tbody tr:hover{ background:none; }
	.tr_tbl td{
		padding:9px 0; text-align:right; font-size:15px;
		border-bottom:1px solid #f4f5f6;
	}
	.tr_tbl td:before{
		content:attr(data-l); float:left; color:#999; font-size:14px; font-weight:400;
	}
	.tr_c_key{ font-size:18px; }
	.tr_c_act{ border-bottom:0; padding:14px 0 2px; }
	.tr_apply{ display:block; padding:14px 0; font-size:16px; text-align:center; }
	.tr_page{ margin-top:26px; gap:4px; }
	.tr_page a, .tr_page span{ min-width:34px; height:34px; padding:0 9px; font-size:14px; }

	.tr_notice{ padding:15px 17px; font-size:13.5px; margin-bottom:28px; }
	.tr_slide{ max-width:none; }
	.tr_dt_name{ font-size:23px; }
	.tr_dt_loc{ margin-bottom:22px; }
	.tr_dt_table th{ width:88px; font-size:13.5px; }
	.tr_dt_table td{ font-size:15px; }
	.tr_dt_table tr.tr_dt_key td{ font-size:19px; }
	.tr_cta a{ padding:17px 0; font-size:16px; }
	.tr_empty{ padding:60px 16px; font-size:14px; }
}