/* 교실 밖 배움여행 100선 (INF-7061)
 * 사이트(탐탐역사) 디자인 시스템에 맞춘 스타일. 값의 출처:
 *  - 색: Tcss 공통 CSS 실측 — 강조 #ef3f3e(하위 탭 활성), 진남색 라벨 #363c4b(전체상품 분류 박스),
 *        본문 #212121·#4e5565, 보조 #666(전체상품 대상 문구), 선 #dedede·#e5e5e5·#ccc
 *  - 모서리 0, 글꼴 Noto Sans KR(사이트 공통) / 카드 제목 18px·500 + 아래 #ccc 선(전체상품 목록)
 *  - 글자 크기는 토큰으로만 지정하고 모바일은 토큰만 다시 정의한다 (playbook 모바일-타이포-스케일)
 *  - 제목 아래 설명글은 한 단계 낮은 회색 --et-dim (playbook 제목-설명글-강약, #666 흰 바탕 5.7:1)
 *  - 사이트 CSS와 섞이지 않게 .edutrip 범위 + et- 클래스만 사용 (playbook CSS-명시도-함정)
 */
.edutrip{
  --et-accent:#ef3f3e;
  --et-navy:#363c4b;
  --et-ink:#212121;
  --et-text:#000;
  --et-sub:#4e5565;
  --et-dim:#666;
  --et-line:#dedede;
  --et-line-soft:#e5e5e5;
  --et-line-strong:#ccc;
  --et-bg-soft:#f7f7f7;
  --et-bg-section:#f6f4f0;                 /* 사이트 섹션 띠 배경(오시는길·강사소개), #666 대비 5.2:1 */

  --et-title:clamp(26px, 2.2vw, 32px);   /* 페이지 제목 */
  --et-modal-title:26px;
  --et-stat:clamp(28px, 2.4vw, 34px);
  --et-card-title:18px;                    /* 전체상품 카드 제목과 동일 */
  --et-h4:17px;
  --et-body:16px;
  --et-lead:15px;
  --et-small:14px;
  --et-xs:13px;
  --et-icon:26px;                          /* 닫기 × 기호 */

  font-family:"Noto Sans KR", sans-serif;
  color:var(--et-ink);
  font-size:var(--et-body);
  line-height:1.6;
  word-break:keep-all;
}
.edutrip *, .edutrip *::before, .edutrip *::after{box-sizing:border-box;}
.edutrip [hidden]{display:none !important;}
.edutrip .et-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

.edutrip .et-wrap{padding:44px 20px 80px;}

/* ---------- 머리말 ---------- */
.edutrip .et-intro-band{padding:64px 20px 56px; background:var(--et-bg-section);}
.edutrip .et-eyebrow{margin:0 0 10px; font-size:var(--et-small); color:var(--et-dim);}
.edutrip .et-title{margin:0 0 14px; font-size:var(--et-title); font-weight:500; color:var(--et-text); line-height:1.3; letter-spacing:-0.02em;}
.edutrip .et-lead{margin:0; font-size:var(--et-lead); color:var(--et-dim); line-height:1.7;}
.edutrip .et-stats{display:flex; gap:40px; margin:28px 0 0; padding:0; list-style:none;}
.edutrip .et-stats li{display:flex; flex-direction:column; gap:2px;}
.edutrip .et-stat-num{font-size:var(--et-stat); font-weight:500; color:var(--et-accent); line-height:1.2;}
.edutrip .et-stat-label{font-size:var(--et-small); color:var(--et-dim);}

/* ---------- 문장 검색 안내 (v6) ---------- */
.edutrip .et-guide-band{padding:0 20px; background:var(--et-bg-section);}
.edutrip .et-guide{max-width:1160px; padding:26px 28px 28px; border-top:1px solid #e3ded4; background:#fff;} /* 아래 검색창·카드 열(1200 - 좌우 20)과 끝선 맞춤 */
.edutrip .et-guide-title{margin:0; font-size:var(--et-h4); font-weight:500; color:var(--et-text);}
.edutrip .et-guide-sub{margin:4px 0 0; font-size:var(--et-small); color:var(--et-dim);}
.edutrip .et-guide-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:18px 0 0; padding:0; list-style:none;}
.edutrip .et-guide-list li{display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1px solid var(--et-line-soft);}
.edutrip .et-guide-list b{font-size:var(--et-small); font-weight:500; color:var(--et-text);}
.edutrip .et-guide-list span{font-size:var(--et-xs); color:var(--et-dim); line-height:1.6;}
.edutrip .et-guide-example{margin-top:16px; padding:10px 16px; border:1px solid var(--et-accent); border-radius:0; background:#fff; color:var(--et-accent); font-family:inherit; font-size:var(--et-small); text-align:left; cursor:pointer;}
.edutrip .et-guide-example:hover{background:var(--et-accent); color:#fff;}

/* ---------- 검색·필터 ---------- */
.edutrip .et-filter{margin-top:0;}
.edutrip .et-search{display:flex; margin-bottom:24px;}
.edutrip .et-search input{flex:1; min-width:0; height:52px; padding:0 20px; border:1px solid var(--et-line); border-right:0; border-radius:0; font-family:inherit; font-size:var(--et-small); color:var(--et-ink); background:#fff; outline:none;}
.edutrip .et-search input:focus{border-color:var(--et-ink);}
.edutrip .et-search-btn{flex:none; width:80px; height:52px; border:0; border-radius:0; background:#282828; color:#fff; font-family:inherit; font-size:var(--et-small); cursor:pointer;}
.edutrip .et-search-btn:hover{background:var(--et-accent);}

.edutrip .et-filter-row{display:flex; align-items:flex-start; gap:16px; margin:0; padding:14px 0; border-top:1px solid var(--et-line-soft);}
.edutrip .et-filter-row:last-child{border-bottom:1px solid var(--et-line-soft);}
.edutrip .et-filter-label{flex:none; width:120px; padding-top:7px; font-size:var(--et-small); font-weight:500; color:var(--et-sub);}
.edutrip .et-chips{display:flex; flex-wrap:wrap; gap:8px; margin:0;}
.edutrip .et-chip{padding:6px 14px; border:1px solid var(--et-line); border-radius:0; background:#fff; color:var(--et-sub); font-family:inherit; font-size:var(--et-small); line-height:1.5; cursor:pointer; white-space:nowrap;}
.edutrip .et-chip:hover{color:var(--et-accent); border-color:var(--et-accent);}
.edutrip .et-chip.is-active{color:var(--et-accent); border-color:var(--et-accent); font-weight:500;}

.edutrip .et-toolbar{display:flex; justify-content:space-between; align-items:center; margin:30px 0 16px;}
.edutrip .et-count{margin:0; font-size:var(--et-lead); color:var(--et-sub);}
.edutrip .et-count b{color:var(--et-accent); font-weight:500;}
.edutrip .et-ai-hint{margin-left:10px; font-size:var(--et-xs); color:var(--et-dim);}
.edutrip .et-refine{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:-4px 0 20px;}
.edutrip .et-refine-label{font-size:var(--et-xs); color:var(--et-dim);}
.edutrip .et-chip-refine{border-style:dashed;}
.edutrip .et-reset{padding:6px 14px; border:1px solid var(--et-line); border-radius:0; background:#fff; color:var(--et-sub); font-family:inherit; font-size:var(--et-small); cursor:pointer;}
.edutrip .et-reset:hover{color:var(--et-accent); border-color:var(--et-accent);}

/* ---------- 결과 카드 ---------- */
.edutrip .et-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:30px 24px;}
.edutrip .et-card{display:flex; flex-direction:column; border:1px solid var(--et-line); background:#fff; transition:border-color .15s ease;}
.edutrip .et-card:hover, .edutrip .et-card:focus-within{border-color:var(--et-sub);}
.edutrip .et-card-main{display:flex; flex-direction:column; align-items:stretch; flex:1; width:100%; padding:0; border:0; border-radius:0; background:none; font-family:inherit; text-align:left; color:var(--et-ink); cursor:pointer;}
.edutrip .et-card-main:focus-visible{outline:2px solid var(--et-ink); outline-offset:-2px;}
/* 카드 머리: 사이트 CI·조직도 섹션 베이지(#e9e7e3) 바탕 + 검정 장소명. 마우스를 올리면 한 단계만 진하게(빨강 강조는 쓰지 않음) */
.edutrip .et-card-head{display:block; padding:16px 20px 18px; background:#e9e7e3; transition:background-color .15s ease;}
.edutrip .et-card-main:hover .et-card-head, .edutrip .et-card-main:focus-visible .et-card-head{background:#dfdcd6;}
.edutrip .et-card-body{display:flex; flex-direction:column; flex:1; padding:16px 20px 20px;}
.edutrip .et-card-meta{display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:var(--et-xs); color:var(--et-sub);}
.edutrip .et-card-district{display:inline-block; padding:3px 8px; background:var(--et-navy); color:#fff; font-size:var(--et-xs); font-weight:500; line-height:1.4;}
.edutrip .et-card-page{margin-left:auto;}
.edutrip .et-card-title{display:block; font-size:var(--et-card-title); font-weight:500; color:var(--et-text); line-height:1.35;}
.edutrip .et-card-q{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:14px; font-size:var(--et-small); color:var(--et-dim); line-height:1.6;}
.edutrip .et-card-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto;}
.edutrip .et-tag{display:inline-block; padding:2px 8px; border:1px solid var(--et-line); color:var(--et-sub); font-size:var(--et-xs); line-height:1.5; white-space:nowrap;}
.edutrip .et-tag--grade{border-color:var(--et-ink); background:var(--et-ink); color:#fff;}
/* 교과 태그: 로고 브랜드 5색(실측) + 사이트 라벨 4색. 연한 바탕 10% + 진한 글자, 글자 대비 모두 4.6:1 이상 */
.edutrip .et-tag--s1{background:#f9ece7; border-color:#e6b39f; color:#bc3f10;} /* 역사·사회 — 로고 적갈 */
.edutrip .et-tag--s2{background:#e7f6fa; border-color:#9fdcec; color:#0b7692;} /* 과학 — 로고 하늘 */
.edutrip .et-tag--s3{background:#e6f5f0; border-color:#99d6c3; color:#007a53;} /* 생태·환경 — 로고 초록 */
.edutrip .et-tag--s4{background:#ebeced; border-color:#afb1b7; color:#363c4b;} /* 정치·민주시민·평화 — 사이트 진남 */
.edutrip .et-tag--s5{background:#f6eef5; border-color:#d9b9d6; color:#9d4e95;} /* 미술·문화예술 — 로고 보라 */
.edutrip .et-tag--s6{background:#fcf1e7; border-color:#f3c69f; color:#aa550c;} /* 음악·국악 — 로고 주황 */
.edutrip .et-tag--s7{background:#fdecec; border-color:#f9b2b2; color:#c43433;} /* 체육·신체활동 — 사이트 빨강 */
.edutrip .et-tag--s8{background:#fef6e8; border-color:#fddba3; color:#966410;} /* 안전교육 — 사이트 노랑주황 */
.edutrip .et-tag--s9{background:#edeef0; border-color:#b8bbc1; color:#4e5565;} /* 진로교육 — 사이트 슬레이트 */
.edutrip .et-card-time{display:block; margin-top:12px; font-size:var(--et-xs); color:var(--et-dim);}
/* ---------- v6 (INF-7259): 관련도·적합도·추천 이유·카드 동작 ---------- */
.edutrip .et-match{align-self:flex-start; margin-bottom:10px; padding:2px 8px; border:1px solid var(--et-sub); color:var(--et-sub); font-size:var(--et-xs); font-weight:500; line-height:1.5;}
.edutrip .et-match.is-high{border-color:var(--et-accent); background:var(--et-accent); color:#fff;}
.edutrip .et-tag--fit{border-color:#e0c78f; background:#fff; color:#8a6300; letter-spacing:1px;} /* 별점, 대비 5.2:1 */
.edutrip .et-card-kw{display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:10px; font-size:var(--et-xs); color:var(--et-dim);}
.edutrip .et-why{display:block; margin-top:12px; padding:8px 10px; background:var(--et-bg-section); font-size:var(--et-xs); color:var(--et-sub); line-height:1.6;}
.edutrip .et-why b{color:var(--et-text); font-weight:500;}
.edutrip .et-card-actions{display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--et-line-soft);}
.edutrip .et-act{padding:9px 6px; border:0; border-radius:0; background:#fff; color:var(--et-sub); font-family:inherit; font-size:var(--et-xs); line-height:1.4; cursor:pointer; white-space:nowrap;}
.edutrip .et-card-actions .et-act + .et-act{border-left:1px solid var(--et-line-soft);}
.edutrip .et-act:hover{color:var(--et-accent);}
.edutrip .et-act.is-on, .edutrip .et-act.is-on:hover{background:var(--et-navy); color:#fff;}
.edutrip .et-modal-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.edutrip .et-modal-actions .et-act{padding:8px 14px; border:1px solid var(--et-line); font-size:var(--et-small);}
.edutrip .et-modal-actions .et-act:hover{border-color:var(--et-accent);}
.edutrip .et-modal-actions .et-act.is-on{border-color:var(--et-navy);}
.edutrip .et-low-wrap{margin-top:30px;}
.edutrip .et-low-wrap:empty{display:none;}
.edutrip .et-low-toggle{display:block; width:100%; margin-bottom:30px; padding:14px; border:1px dashed var(--et-line-strong); border-radius:0; background:#fff; color:var(--et-sub); font-family:inherit; font-size:var(--et-small); cursor:pointer;}
.edutrip .et-low-toggle:hover{color:var(--et-accent); border-color:var(--et-accent);}
.edutrip .et-empty{grid-column:1/-1; margin:0; padding:80px 0; text-align:center; color:var(--et-dim); border:1px solid var(--et-line-soft);}
.edutrip .et-source{margin:40px 0 0; font-size:var(--et-xs); color:var(--et-dim); text-align:center;}

/* ---------- 상세 팝업 ---------- */
.edutrip .et-overlay{position:fixed; inset:0; z-index:300; display:none; align-items:flex-start; justify-content:center; padding:5vh 16px; background:rgba(0,0,0,0.6); overflow-y:auto;}
.edutrip .et-overlay.is-open{display:flex;}
.edutrip .et-modal{position:relative; width:100%; max-width:760px; margin-bottom:5vh; border-top:4px solid var(--et-accent); background:#fff;}
.edutrip .et-modal-close{position:absolute; top:0; right:0; width:48px; height:48px; border:0; border-radius:0; background:var(--et-ink); color:#fff; font-size:var(--et-icon); line-height:1; cursor:pointer;}
.edutrip .et-modal-close:hover{background:var(--et-accent);}
.edutrip .et-modal-head{padding:32px 36px 26px; border-bottom:1px solid var(--et-line-soft);}
.edutrip .et-modal-eyebrow{margin:0 0 12px; padding-right:48px; font-size:var(--et-xs); color:var(--et-dim);}
.edutrip .et-modal-title{margin:10px 0 0; font-size:var(--et-modal-title); font-weight:500; color:var(--et-text); line-height:1.35;}
.edutrip .et-modal-q{margin:12px 0 16px; font-size:var(--et-lead); color:var(--et-dim); line-height:1.7;}
.edutrip .et-modal-body{padding:8px 36px 36px;}
.edutrip .et-modal-h{margin:28px 0 12px; padding-left:10px; border-left:3px solid var(--et-accent); font-size:var(--et-h4); font-weight:500; color:var(--et-text); line-height:1.3;}
.edutrip .et-info{width:100%; border-collapse:collapse; border-top:1px solid var(--et-ink); font-size:var(--et-small);}
.edutrip .et-info th{width:110px; padding:11px 14px; background:var(--et-bg-soft); border-bottom:1px solid var(--et-line-soft); font-weight:500; color:var(--et-sub); text-align:left; vertical-align:top;}
.edutrip .et-info td{padding:11px 14px; border-bottom:1px solid var(--et-line-soft); color:var(--et-ink); line-height:1.6; overflow-wrap:anywhere;} /* 가운뎃점으로만 이어진 긴 값도 줄바꿈 */
.edutrip .et-kw-list{display:flex; flex-wrap:wrap; gap:6px;}
.edutrip .et-kw-list .et-tag{white-space:normal;} /* 문장형 키워드(#38 청령포)도 창 안에서 줄바꿈 */
.edutrip .et-std-list, .edutrip .et-course-list{margin:0; padding:0; list-style:none;}
.edutrip .et-std{padding:10px 0; border-bottom:1px solid var(--et-line-soft); font-size:var(--et-small); color:var(--et-sub); line-height:1.65;}
.edutrip .et-std-code{color:var(--et-accent); font-weight:500;}
.edutrip .et-course{display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:12px 0; border-bottom:1px solid var(--et-line-soft); font-size:var(--et-small);}
.edutrip .et-course-name{font-weight:500; color:var(--et-text);}
.edutrip .et-course-time{color:var(--et-accent); font-weight:500; text-align:right;}
.edutrip .et-course-route{grid-column:1/-1; color:var(--et-dim);}
.edutrip .et-no-data{margin:0; font-size:var(--et-small); color:var(--et-dim);}
.edutrip .et-ext{margin-left:6px; color:var(--et-sub); text-decoration:underline;}
.edutrip .et-ext:hover{color:var(--et-accent);}
.edutrip .et-info-note{margin:8px 0 0; font-size:var(--et-xs); color:var(--et-dim);}
.edutrip .et-rel-list{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; padding:0; list-style:none;}
.edutrip .et-rel{display:flex; flex-direction:column; gap:4px; width:100%; height:100%; padding:12px 14px; border:1px solid var(--et-line); border-radius:0; background:#fff; font-family:inherit; text-align:left; cursor:pointer;}
.edutrip .et-rel:hover{border-color:var(--et-accent);}
.edutrip .et-rel-top{display:flex; justify-content:space-between; gap:8px;}
.edutrip .et-rel-name{font-size:var(--et-small); font-weight:500; color:var(--et-text);}
.edutrip .et-rel-score{flex:none; font-size:var(--et-xs); font-weight:500; color:var(--et-accent);}
.edutrip .et-rel-meta{font-size:var(--et-xs); color:var(--et-dim);}

/* ---------- 비교하기 ---------- */
.edutrip .et-compare{max-width:900px;}
.edutrip .et-compare-scroll{overflow-x:auto;}
.edutrip .et-compare-table{width:100%; min-width:520px; border-collapse:collapse; border-top:1px solid var(--et-ink); font-size:var(--et-small);}
.edutrip .et-compare-table th, .edutrip .et-compare-table td{padding:10px 12px; border-bottom:1px solid var(--et-line-soft); text-align:left; vertical-align:top; line-height:1.6; overflow-wrap:anywhere;}
.edutrip .et-compare-table thead th{position:relative; padding-right:32px; background:var(--et-bg-section); font-weight:500; color:var(--et-text);}
.edutrip .et-compare-table tbody th{width:110px; background:var(--et-bg-soft); font-weight:500; color:var(--et-sub); white-space:nowrap;}
.edutrip .et-compare-remove{position:absolute; top:6px; right:6px; width:24px; height:24px; border:0; background:none; color:var(--et-dim); font-size:18px; line-height:1; cursor:pointer;}
.edutrip .et-compare-remove:hover{color:var(--et-accent);}
.edutrip .et-compare-foot{margin-top:18px; text-align:right;}

/* ---------- 떠 있는 버튼·자료함·공유·알림 ---------- */
.edutrip .et-fab{position:fixed; bottom:24px; z-index:250; display:flex; align-items:center; gap:8px; padding:12px 18px; border:0; border-radius:0; background:var(--et-navy); color:#fff; font-family:inherit; font-size:var(--et-small); font-weight:500; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.2);}
.edutrip .et-fab:hover{background:var(--et-accent);}
.edutrip .et-fab--tray{right:24px;}
.edutrip .et-fab--compare{left:24px;}
.edutrip .et-fab-count{min-width:22px; padding:0 6px; background:#fff; color:var(--et-navy); font-size:var(--et-xs); line-height:22px; text-align:center;}
.edutrip .et-tray-overlay{position:fixed; inset:0; z-index:310; display:none; background:rgba(0,0,0,0.5);}
.edutrip .et-tray-overlay.is-open{display:block;}
.edutrip .et-tray{position:fixed; top:0; right:-380px; z-index:311; display:flex; flex-direction:column; width:360px; max-width:88vw; height:100%; background:#fff; transition:right .22s ease, visibility .22s; visibility:hidden;}
.edutrip .et-tray.is-open{right:0; visibility:visible;}
.edutrip .et-tray-head{display:flex; align-items:center; justify-content:space-between; padding:0 0 0 20px; border-top:4px solid var(--et-accent); border-bottom:1px solid var(--et-line-soft);}
.edutrip .et-tray-head h3{margin:0; font-size:var(--et-h4); font-weight:500; color:var(--et-text);}
.edutrip .et-tray-head button{width:48px; height:48px; border:0; border-radius:0; background:var(--et-ink); color:#fff; font-size:var(--et-icon); line-height:1; cursor:pointer;}
.edutrip .et-tray-head button:hover{background:var(--et-accent);}
.edutrip .et-tray-body{flex:1; overflow-y:auto; padding:6px 20px;}
.edutrip .et-tray-empty{margin:0; padding:40px 0; text-align:center; font-size:var(--et-small); color:var(--et-dim);}
.edutrip .et-tray-item{display:flex; align-items:flex-start; border-bottom:1px solid var(--et-line-soft);}
.edutrip .et-tray-main{display:flex; flex-direction:column; flex:1; min-width:0; padding:12px 0; border:0; background:none; font-family:inherit; text-align:left; cursor:pointer;}
.edutrip .et-tray-main:hover .et-tray-name{color:var(--et-accent);}
.edutrip .et-tray-name{font-size:var(--et-small); font-weight:500; color:var(--et-text);}
.edutrip .et-tray-meta{margin-top:2px; font-size:var(--et-xs); color:var(--et-dim);}
.edutrip .et-tray-remove{flex:none; width:36px; height:44px; border:0; background:none; color:var(--et-dim); font-size:20px; line-height:1; cursor:pointer;}
.edutrip .et-tray-remove:hover{color:var(--et-accent);}
.edutrip .et-tray-foot{padding:14px 20px 20px; border-top:1px solid var(--et-line-soft);}
.edutrip .et-tray-note{margin:0 0 10px; font-size:var(--et-xs); color:var(--et-dim);}
.edutrip .et-tray-foot button{width:100%; padding:12px; border:0; border-radius:0; background:#282828; color:#fff; font-family:inherit; font-size:var(--et-small); cursor:pointer;}
.edutrip .et-tray-foot button:hover{background:var(--et-accent);}
.edutrip .et-share{position:fixed; z-index:400; display:none; width:260px; padding:16px; border:1px solid var(--et-line); border-top:3px solid var(--et-accent); background:#fff; box-shadow:0 8px 24px rgba(0,0,0,0.18);}
.edutrip .et-share.is-open{display:block;}
.edutrip .et-share h4{margin:0 24px 10px 0; font-size:var(--et-small); font-weight:500; color:var(--et-text);}
.edutrip .et-share-close{position:absolute; top:6px; right:6px; width:28px; height:28px; border:0; background:none; color:var(--et-dim); font-size:20px; line-height:1; cursor:pointer;}
.edutrip .et-share-row{display:flex;}
.edutrip .et-share-row input{flex:1; min-width:0; padding:6px 8px; border:1px solid var(--et-line); border-right:0; border-radius:0; font-size:var(--et-xs); color:var(--et-sub);}
.edutrip .et-share-row button{flex:none; padding:6px 10px; border:0; border-radius:0; background:#282828; color:#fff; font-family:inherit; font-size:var(--et-xs); cursor:pointer;}
.edutrip .et-share-row button:hover{background:var(--et-accent);}
.edutrip .et-share-qr{display:flex; justify-content:center; padding:10px 0 4px;}
.edutrip .et-share-qr svg{width:128px; height:128px;}
.edutrip .et-share-cap{margin:0; font-size:var(--et-xs); color:var(--et-dim); text-align:center;}
.edutrip .et-toast{position:fixed; left:50%; bottom:84px; z-index:500; padding:10px 18px; background:var(--et-ink); color:#fff; font-size:var(--et-small); opacity:0; pointer-events:none; transform:translateX(-50%) translateY(12px); transition:opacity .18s ease, transform .18s ease;}
.edutrip .et-toast.is-show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- 1장 인쇄 (상세 팝업의 인쇄 버튼) ---------- */
#printArea{display:none;}
@media print{
  body > *:not(#printArea){display:none !important;}
  #printArea{display:block; padding:24px; font-family:"Noto Sans KR", sans-serif; color:#000; font-size:12px; line-height:1.6;}
  #printArea h1{margin:0 0 4px; font-size:20px;}
  #printArea h2{margin:14px 0 4px; font-size:13px;}
  #printArea .et-p-meta{margin:0 0 10px; color:#555; font-size:13px;}
  #printArea .et-p-q{margin:0 0 10px; font-size:14px; font-weight:600;}
  #printArea table{width:100%; border-collapse:collapse;}
  #printArea th, #printArea td{padding:4px; border:1px solid #ccc; text-align:left;}
  #printArea th{width:80px;}
  #printArea ul{margin:0 0 0 18px; padding:0;}
  #printArea .et-p-foot{margin-top:16px; color:#888; font-size:11px;}
}

/* ---------- 반응형 (사이트 PC 헤더 기준 1600px, 모바일 620px) ---------- */
@media (max-width:1600px){
  /* 사이트 "맨 위로" 버튼(.mtop_btn: right 2%, 폭 12.03%)이 1600px 이하에서 나타나므로 그 왼쪽에 둔다 */
  .edutrip .et-fab--tray{right:calc(14.04vw + 12px);}
}
@media (max-width:1200px){
  .edutrip .et-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:860px){
  .edutrip .et-grid{grid-template-columns:repeat(2, 1fr); gap:20px 16px;}
  .edutrip .et-filter-row{flex-direction:column; gap:8px;}
  .edutrip .et-filter-label{width:auto; padding-top:0;}
  .edutrip .et-guide-list{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .edutrip{
    --et-modal-title:21px;
    --et-card-title:17px;
    --et-h4:16px;
  }
  .edutrip .et-intro-band{padding:36px 16px 32px;}
  .edutrip .et-wrap{padding:28px 16px 50px;}
  .edutrip .et-stats{gap:28px;}
  .edutrip .et-grid{grid-template-columns:1fr;}
  .edutrip .et-modal-head{padding:26px 20px 20px;}
  .edutrip .et-modal-body{padding:4px 20px 28px;}
  .edutrip .et-info th{width:84px; padding:10px;}
  .edutrip .et-info td{padding:10px;}
  .edutrip .et-guide-band{padding:0 16px;}
  .edutrip .et-guide{padding:20px 18px 22px;}
  .edutrip .et-rel-list{grid-template-columns:1fr;}
  .edutrip .et-fab{bottom:16px; padding:10px 14px;}
  .edutrip .et-fab--compare{left:16px;}
  /* 내 자료함: 아이콘+개수만 남겨 사이트 "맨 위로" 버튼(.mtop_btn) 바로 위 오른쪽 끝에 쌓는다 — 가운데 콘텐츠를 가리지 않게 */
  .edutrip .et-fab--tray{right:2%; bottom:calc(5vh + 12.03vw + 8px); width:12.03vw; height:12.03vw; min-width:44px; min-height:44px; padding:0; justify-content:center; font-size:20px;}
  .edutrip .et-fab--tray .et-fab-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .edutrip .et-fab--tray .et-fab-count{position:absolute; top:-8px; right:-6px; min-width:20px; padding:0 4px; line-height:20px; border:1px solid var(--et-navy);}
  .edutrip .et-ai-hint{display:block; margin:4px 0 0;}
}