/* 영덕 로컬픽 택슐랭 (관광정보 > 택슐랭) 전용 CSS
   - 모든 클래스는 tsl- 접두어, 기존 CSS와 충돌하지 않도록 .tsl-wrap 안에서만 적용
   - 색상은 .tsl-wrap 의 변수만 바꾸면 전체 반영 */
.tsl-wrap{
  --tsl-primary:#0047a5;
  --tsl-accent:#ffb547;
  --tsl-text:#1f2937;
  --tsl-muted:#5b6676;
  --tsl-line:#e5e7eb;
  --tsl-soft:#f4f8fc;
}
.tsl-wrap .tsl-section{padding:20px 0 60px;}
/* 기존 사이트 base.css(a{width:100%;display:block})와 content-box 조합으로 링크·버튼이 넘치는 것을 방지 */
.tsl-wrap .tsl-section,.tsl-wrap .tsl-section *{box-sizing:border-box;}
.tsl-wrap a{text-decoration:none;}

/* 빈 소개 페이지 */
.tsl-wrap .tsl-empty{
  padding:80px 20px; text-align:center; background:var(--tsl-soft);
  border:1px dashed var(--tsl-line); border-radius:12px;
}
.tsl-wrap .tsl-empty-tit{font-size:20px; font-weight:700; color:var(--tsl-text);}
.tsl-wrap .tsl-empty-txt{margin-top:10px; font-size:16px; color:var(--tsl-muted);}

/* 목록 머리말 */
.tsl-wrap .tsl-lead{margin:12px 0 28px; text-align:center; font-size:17px; line-height:1.5; color:var(--tsl-muted); word-break:keep-all;}
.tsl-wrap .tsl-total{margin:22px 0 14px; font-size:16px; color:var(--tsl-text);}
.tsl-wrap .tsl-total b{color:var(--tsl-primary);}

/* 카드 목록 */
.tsl-wrap .tsl-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none;}
.tsl-wrap .tsl-card{margin:0; padding:0; list-style:none;}
.tsl-wrap .tsl-card-link{
  display:block; height:100%; background:#fff; color:var(--tsl-text);
  border:1px solid var(--tsl-line); border-radius:12px; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.tsl-wrap .tsl-card-link:hover{transform:translateY(-4px); box-shadow:0 10px 24px rgba(15,40,80,.12);}
.tsl-wrap .tsl-card-img{position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--tsl-soft);}
.tsl-wrap .tsl-card-img img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.tsl-wrap .tsl-card-link:hover .tsl-card-img img{transform:scale(1.04);}
.tsl-wrap .tsl-pill{
  position:absolute; top:12px; left:12px; padding:5px 11px; border-radius:999px;
  background:var(--tsl-accent); color:#3b2a00; font-size:12px; font-weight:700; line-height:1.2;
}
.tsl-wrap .tsl-card-body{padding:16px 18px 18px;}
.tsl-wrap .tsl-card-tit{margin:0; font-size:19px; font-weight:700; line-height:1.35; color:var(--tsl-text);}
.tsl-wrap .tsl-card-txt{
  margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--tsl-muted); min-height:3.2em; word-break:keep-all;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tsl-wrap .tsl-card-meta{display:flex; align-items:center; justify-content:space-between; margin-top:14px; font-size:13px;}
.tsl-wrap .tsl-loc{display:inline-flex; align-items:center; gap:4px; color:var(--tsl-muted);}
.tsl-wrap .tsl-loc img{width:14px; height:14px;}
.tsl-wrap .tsl-more{color:var(--tsl-primary); font-weight:700;}

/* 상세 */
.tsl-wrap .tsl-detail-head{padding:10px 0 20px; text-align:center;}
.tsl-wrap .tsl-detail-head .tsl-pill{position:static; display:inline-block; margin-bottom:10px;}
.tsl-wrap .tsl-detail-tit{margin:0; font-size:28px; font-weight:700; line-height:1.3; color:var(--tsl-text);}
.tsl-wrap .tsl-detail-short{margin:10px auto 0; max-width:720px; font-size:16px; line-height:1.6; color:var(--tsl-muted);}
.tsl-wrap .tsl-gallery{max-width:860px; margin:0 auto;}
.tsl-wrap .tsl-gallery-main{overflow:hidden; aspect-ratio:16/10; border-radius:12px; background:var(--tsl-soft);}
.tsl-wrap .tsl-gallery-main img{display:block; width:100%; height:100%; object-fit:cover;}
.tsl-wrap .tsl-thumbs{display:flex; gap:10px; margin-top:10px;}
.tsl-wrap .tsl-thumb{
  width:96px; height:68px; padding:0; border:2px solid transparent; border-radius:8px;
  overflow:hidden; background:var(--tsl-soft); cursor:pointer; opacity:.7;
}
.tsl-wrap .tsl-thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.tsl-wrap .tsl-thumb.on{border-color:var(--tsl-primary); opacity:1;}
.tsl-wrap .tsl-detail-body{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; max-width:860px; margin:32px auto 0;}
.tsl-wrap .tsl-desc p{margin:0 0 14px; font-size:16px; line-height:1.8; color:var(--tsl-text); word-break:keep-all;}
.tsl-wrap .tsl-info{align-self:start; padding:20px; background:var(--tsl-soft); border-radius:12px;}
.tsl-wrap .tsl-info dl{margin:0;}
.tsl-wrap .tsl-info dt{margin:0 0 4px; font-size:13px; font-weight:700; color:var(--tsl-primary);}
.tsl-wrap .tsl-info dd{margin:0 0 16px; font-size:15px; line-height:1.6; color:var(--tsl-text);}
.tsl-wrap .tsl-info dd span{display:block;}
.tsl-wrap .tsl-btn{
  display:block; padding:12px 16px; border-radius:10px; text-align:center;
  font-size:15px; font-weight:700; line-height:1.3;
}
.tsl-wrap .tsl-btn-map{background:var(--tsl-primary); color:#fff;}
.tsl-wrap .tsl-btn-list{width:140px; margin:40px auto 0; background:#fff; color:var(--tsl-text); border:1px solid #cdcdcd;}

/* 태블릿 */
@media screen and (max-width:1023px){
  .tsl-wrap .tsl-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;}
}
/* 모바일 */
@media screen and (max-width:767px){
  .tsl-wrap .tsl-detail-body{grid-template-columns:minmax(0,1fr); gap:20px;}
}
@media screen and (max-width:560px){
  .tsl-wrap .tsl-grid{grid-template-columns:minmax(0,1fr);}
  .tsl-wrap .tsl-lead{font-size:15px;}
  .tsl-wrap .tsl-detail-tit{font-size:24px;}
  .tsl-wrap .tsl-thumb{width:calc((100% - 20px) / 3); height:60px;}
}
@media (prefers-reduced-motion:reduce){
  .tsl-wrap .tsl-card-link, .tsl-wrap .tsl-card-img img{transition:none;}
  .tsl-wrap .tsl-card-link:hover{transform:none;}
  .tsl-wrap .tsl-card-link:hover .tsl-card-img img{transform:none;}
}

/* ===== 13: 상세 레이아웃 (스와이퍼 / 정보목록 / 지도) ===== */
.tsl-wrap .tsl-slider{position:relative; max-width:860px; margin:0 auto;}
.tsl-wrap .tsl-slider .swiper{border-radius:12px; overflow:hidden; background:var(--tsl-soft);}
.tsl-wrap .tsl-slide{aspect-ratio:16/10; background:var(--tsl-soft);}
.tsl-wrap .tsl-slide img{display:block; width:100%; height:100%; object-fit:cover;}
.tsl-wrap .tsl-slider .swiper-button-next,.tsl-wrap .tsl-slider .swiper-button-prev{color:#fff; --swiper-navigation-size:26px; text-shadow:0 1px 4px rgba(0,0,0,.45);}
.tsl-wrap .tsl-slider .swiper-pagination{position:static; margin-top:10px;}
.tsl-wrap .tsl-slider .swiper-pagination-bullet-active{background:var(--tsl-primary);}

.tsl-wrap .tsl-detail-main{max-width:860px; margin:28px auto 0;}
.tsl-wrap .tsl-infolist{margin:0 0 28px; padding:18px 22px; list-style:none; background:var(--tsl-soft); border-radius:12px;}
.tsl-wrap .tsl-infolist li{display:flex; gap:14px; margin:0; padding:6px 0; font-size:15px; line-height:1.6; color:var(--tsl-text);}
.tsl-wrap .tsl-infolist strong{flex:0 0 72px; color:var(--tsl-primary); font-weight:700;}
.tsl-wrap .tsl-infolist span{flex:1; min-width:0; word-break:keep-all;}
.tsl-wrap .tsl-infolist span em{display:block; font-style:normal;}
.tsl-wrap .tsl-infolist a{display:inline; color:inherit; text-decoration:underline;}

.tsl-wrap .tsl-map{margin-top:32px;}
.tsl-wrap .tsl-map-tit{margin:0 0 12px; font-size:18px; font-weight:700; color:var(--tsl-text);}
.tsl-wrap .tsl-map-box{width:100%; min-height:120px; overflow:hidden; border-radius:12px;}
.tsl-wrap .tsl-map-box .root_daum_roughmap{width:100% !important;}
.tsl-wrap .tsl-map .tsl-btn-map{display:inline-block; margin-top:12px; padding:10px 18px;}
@media screen and (max-width:560px){
  .tsl-wrap .tsl-infolist li{flex-direction:column; gap:0;}
  .tsl-wrap .tsl-infolist strong{flex:none;}
}

/* ===== 18: 카카오맵 퍼가기 영역 보정 (사이트 공통 CSS와의 충돌 방지) ===== */
.tsl-wrap .tsl-section .root_daum_roughmap,
.tsl-wrap .tsl-section .root_daum_roughmap *{box-sizing:content-box;}
/* 19: 지도 아래 하단 박스(kakaomap 로고, 로드뷰/길찾기 링크)와 주소·전화 영역 제거. 지도 자체와 지도 안의 kakao 로고는 유지 */
.tsl-wrap .root_daum_roughmap .wrap_controllers,
.tsl-wrap .root_daum_roughmap .cont{display:none !important;}

/* ===== 20: 소개 페이지 ===== */
.tsl-wrap .tsl-intro-hero{
  padding:56px 24px; text-align:center; border-radius:16px; color:#fff;
  background:linear-gradient(135deg,#0047a5 0%,#0a6bd6 100%);
}
.tsl-wrap .tsl-intro-hero-label{display:inline-block; margin:0 0 14px; padding:5px 14px; border-radius:999px; background:var(--tsl-accent); color:#3b2a00; font-size:13px; font-weight:700;}
.tsl-wrap .tsl-intro-hero-tit{margin:0; font-size:38px; font-weight:800; line-height:1.25; color:#fff;}
.tsl-wrap .tsl-intro-hero-txt{margin:14px 0 0; font-size:18px; line-height:1.6; color:rgba(255,255,255,.92); word-break:keep-all;}

.tsl-wrap .tsl-intro-block{max-width:860px; margin:56px auto 0;}
.tsl-wrap .tsl-intro-tit{margin:0 0 16px; font-size:26px; font-weight:700; line-height:1.35; color:var(--tsl-text); text-align:center; word-break:keep-all;}
.tsl-wrap .tsl-intro-tit::after{content:""; display:block; width:40px; height:4px; margin:14px auto 0; border-radius:2px; background:var(--tsl-accent);}
.tsl-wrap .tsl-intro-sub{margin:0 0 10px; font-size:19px; font-weight:700; text-align:center; color:var(--tsl-primary); word-break:keep-all;}
.tsl-wrap .tsl-intro-txt{margin:0 0 14px; font-size:16px; line-height:1.85; color:var(--tsl-text); text-align:center; word-break:keep-all;}

.tsl-wrap .tsl-steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:28px 0 0; padding:0; list-style:none;}
.tsl-wrap .tsl-step{margin:0; padding:26px 22px; background:var(--tsl-soft); border:1px solid var(--tsl-line); border-radius:14px; list-style:none;}
.tsl-wrap .tsl-step-no{display:block; font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--tsl-primary);}
.tsl-wrap .tsl-step-tit{margin:8px 0 0; font-size:19px; font-weight:700; line-height:1.4; color:var(--tsl-text); word-break:keep-all;}
.tsl-wrap .tsl-step-txt{margin:10px 0 0; font-size:15px; line-height:1.7; color:var(--tsl-muted); word-break:keep-all;}

.tsl-wrap .tsl-intro-links{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:28px 0 0;}
.tsl-wrap .tsl-intro-link{
  display:block; padding:30px 26px; background:#fff; color:var(--tsl-text);
  border:1px solid var(--tsl-line); border-radius:14px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.tsl-wrap .tsl-intro-link:hover{transform:translateY(-4px); box-shadow:0 10px 24px rgba(15,40,80,.12);}
.tsl-wrap .tsl-intro-link-num{display:block; font-size:34px; font-weight:800; line-height:1; color:var(--tsl-primary);}
.tsl-wrap .tsl-intro-link-num small{font-size:18px; font-weight:700;}
.tsl-wrap .tsl-intro-link-tit{display:block; margin-top:12px; font-size:20px; font-weight:700; color:var(--tsl-text);}
.tsl-wrap .tsl-intro-link-txt{display:block; margin-top:8px; font-size:15px; line-height:1.7; color:var(--tsl-muted); word-break:keep-all;}
.tsl-wrap .tsl-intro-link-go{display:block; margin-top:16px; font-size:14px; font-weight:700; color:var(--tsl-primary);}

.tsl-wrap .tsl-intro-end{max-width:860px; margin:56px auto 0; padding:36px 24px; text-align:center; background:var(--tsl-soft); border-radius:16px;}
.tsl-wrap .tsl-intro-end-tit{margin:0; font-size:22px; font-weight:700; line-height:1.4; color:var(--tsl-text); word-break:keep-all;}
.tsl-wrap .tsl-intro-end-txt{margin:12px 0 0; font-size:16px; line-height:1.75; color:var(--tsl-muted); word-break:keep-all;}

@media screen and (max-width:767px){
  .tsl-wrap .tsl-steps{grid-template-columns:minmax(0,1fr);}
  .tsl-wrap .tsl-intro-links{grid-template-columns:minmax(0,1fr);}
}
@media screen and (max-width:560px){
  .tsl-wrap .tsl-intro-hero{padding:40px 18px;}
  .tsl-wrap .tsl-intro-hero-tit{font-size:28px;}
  .tsl-wrap .tsl-intro-hero-txt{font-size:16px;}
  .tsl-wrap .tsl-intro-block,.tsl-wrap .tsl-intro-end{margin-top:40px;}
  .tsl-wrap .tsl-intro-tit{font-size:22px;}
  .tsl-wrap .tsl-intro-txt{text-align:left;}
}
@media (prefers-reduced-motion:reduce){
  .tsl-wrap .tsl-intro-link{transition:none;}
  .tsl-wrap .tsl-intro-link:hover{transform:none;}
}

/* ===== 21: 소개 페이지 보강 (사진·아이콘·버튼) ===== */
.tsl-wrap .tsl-intro-hero{padding:72px 24px 60px; background-size:cover; background-position:center;}
.tsl-wrap .tsl-intro-hero-txt{text-shadow:0 1px 6px rgba(0,0,0,.25);}
.tsl-wrap .tsl-intro-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:28px 0 0; padding:0; list-style:none;}
.tsl-wrap .tsl-intro-chips li{margin:0; padding:9px 18px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); font-size:14px; color:#fff; list-style:none;}
.tsl-wrap .tsl-intro-chips b{margin-right:6px; font-size:18px; font-weight:800; color:var(--tsl-accent);}

.tsl-wrap .tsl-intro-strip{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; max-width:860px; margin:40px auto 0;}
.tsl-wrap .tsl-intro-strip img{display:block; width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px; background:var(--tsl-soft);}
.tsl-wrap .tsl-intro-strip img:nth-child(odd){transform:translateY(14px);}
.tsl-wrap .tsl-intro-strip{padding-bottom:14px;}

.tsl-wrap .tsl-step{position:relative; padding-top:30px; background:#fff; box-shadow:0 4px 14px rgba(15,40,80,.06);}
.tsl-wrap .tsl-step::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; border-radius:14px 14px 0 0; background:linear-gradient(90deg,var(--tsl-primary),var(--tsl-accent));}
.tsl-wrap .tsl-step-ico{display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:14px; border-radius:14px; background:var(--tsl-soft); color:var(--tsl-primary);}

.tsl-wrap .tsl-intro-link{padding:0; overflow:hidden;}
.tsl-wrap .tsl-intro-link-photos{display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:3px; height:180px; background:var(--tsl-soft);}
.tsl-wrap .tsl-intro-link-photos img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.tsl-wrap .tsl-intro-link-photos img:first-child{grid-row:1 / 3;}
.tsl-wrap .tsl-intro-link:hover .tsl-intro-link-photos img{transform:scale(1.05);}
.tsl-wrap .tsl-intro-link-photos{overflow:hidden;}
.tsl-wrap .tsl-intro-link-num,.tsl-wrap .tsl-intro-link-tit,.tsl-wrap .tsl-intro-link-txt,.tsl-wrap .tsl-intro-link-go{margin-left:24px; margin-right:24px;}
.tsl-wrap .tsl-intro-link-num{margin-top:22px;}
.tsl-wrap .tsl-intro-link-go{margin-bottom:24px;}

.tsl-wrap .tsl-intro-end{padding:44px 24px; background:linear-gradient(135deg,#0047a5 0%,#0a6bd6 100%);}
.tsl-wrap .tsl-intro-end-tit{color:#fff; font-size:24px;}
.tsl-wrap .tsl-intro-end-txt{color:rgba(255,255,255,.92);}
.tsl-wrap .tsl-intro-end-btns{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px;}
.tsl-wrap .tsl-intro-btn{display:inline-block; width:auto; min-width:170px; padding:13px 24px; border-radius:999px; font-size:15px; font-weight:700; line-height:1.3;}
.tsl-wrap .tsl-intro-btn-main{background:var(--tsl-accent); color:#3b2a00;}
.tsl-wrap .tsl-intro-btn-sub{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.7);}

@media screen and (max-width:767px){
  .tsl-wrap .tsl-intro-strip{grid-template-columns:repeat(3,minmax(0,1fr));}
  .tsl-wrap .tsl-intro-strip img:nth-child(n+4){display:none;}
  .tsl-wrap .tsl-intro-strip img:nth-child(odd){transform:none;}
}
@media screen and (max-width:560px){
  .tsl-wrap .tsl-intro-hero{padding:48px 18px 40px;}
  .tsl-wrap .tsl-intro-link-photos{height:150px;}
  .tsl-wrap .tsl-intro-btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .tsl-wrap .tsl-intro-link-photos img{transition:none;}
  .tsl-wrap .tsl-intro-link:hover .tsl-intro-link-photos img{transform:none;}
}

/* ===== 22: 목록 상단(탭 아래) 소개 영역 ===== */
.tsl-wrap .tsl-listhead{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  margin:0 0 8px; padding:28px 32px; border-radius:16px; color:#fff;
  background:linear-gradient(135deg,#0047a5 0%,#0a6bd6 100%);
}
.tsl-wrap .tsl-listhead-main{flex:1; min-width:0;}
.tsl-wrap .tsl-listhead-label{display:inline-block; margin:0 0 10px; padding:4px 12px; border-radius:999px; background:var(--tsl-accent); color:#3b2a00; font-size:12px; font-weight:700;}
.tsl-wrap .tsl-listhead-tit{margin:0; font-size:26px; font-weight:800; line-height:1.3; color:#fff;}
.tsl-wrap .tsl-listhead-txt{margin:10px 0 0; font-size:15px; line-height:1.7; color:rgba(255,255,255,.92); word-break:keep-all;}
.tsl-wrap .tsl-listhead-steps{display:flex; gap:10px; margin:0; padding:0; list-style:none;}
.tsl-wrap .tsl-listhead-steps li{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:96px; margin:0; padding:14px 6px; border-radius:12px; list-style:none; text-align:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
}
.tsl-wrap .tsl-listhead-steps b{font-size:18px; font-weight:800; color:var(--tsl-accent);}
.tsl-wrap .tsl-listhead-steps span{font-size:12px; line-height:1.4; color:#fff; word-break:keep-all;}
.tsl-wrap .tsl-listhead-go{
  display:block; flex:0 0 auto; width:auto; padding:14px 22px; border-radius:999px; text-align:center;
  background:var(--tsl-accent); color:#3b2a00; font-size:14px; font-weight:700; line-height:1.4;
}
@media screen and (max-width:767px){
  .tsl-wrap .tsl-listhead{flex-direction:column; align-items:stretch; gap:20px; padding:24px 20px;}
  .tsl-wrap .tsl-listhead-steps li{flex:1; width:auto;}
  .tsl-wrap .tsl-listhead-go{align-self:stretch; padding:15px 20px; font-size:15px;}
  .tsl-wrap .tsl-listhead-go .tsl-pc-br{display:none;}
}
@media screen and (max-width:560px){
  .tsl-wrap .tsl-listhead-tit{font-size:22px;}
}

/* ===== 24: 파란 박스 색상 보정 (탁한 남색 → 맑은 파랑) + 배너 사진 제거 ===== */
.tsl-wrap{--tsl-grad:linear-gradient(135deg,#0a58c8 0%,#1597e6 100%);}
.tsl-wrap .tsl-intro-hero,
.tsl-wrap .tsl-intro-end,
.tsl-wrap .tsl-listhead{background:var(--tsl-grad);}
.tsl-wrap .tsl-intro-hero{padding:64px 24px 56px;}
.tsl-wrap .tsl-intro-chips li{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5);}
.tsl-wrap .tsl-listhead-steps li{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5);}
@media screen and (max-width:560px){
  .tsl-wrap .tsl-intro-hero{padding:44px 18px 36px;}
}