/* =========================================
   이음 검색 (시작) — Figma node 254:11376
   공통 리셋·헤더·아이콘·GNB 는 tokens.css 사용
========================================= */
.app{background:var(--white);padding-bottom:calc(96px + env(safe-area-inset-bottom))}

.content{padding:16px;display:flex;flex-direction:column;gap:40px}

/* ---------- 검색 박스 ---------- */
.sbox{background:var(--g50);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:2px}
.sbox__row{height:44px;display:flex;align-items:center;gap:8px;padding:0 16px;color:var(--g400);
  font-size:15px;font-weight:500;letter-spacing:-.375px}
.sbox__row i{color:var(--g500);font-size:20px}
.sbox__div{height:1px;background:var(--g200);margin:0 14px}
.sbox__input{flex:1;min-width:0;border:0;background:none;color:var(--g900);font-family:inherit;
  font-weight:500;letter-spacing:-.375px;height:44px}
.sbox__input::placeholder{color:var(--g400)}
.sbox__input:focus{outline:none}
.sbox__row--split{justify-content:flex-start;gap:0;padding:0 16px}
.sbox__cell{flex:1;display:flex;align-items:center;gap:8px;color:var(--g400);font-size:15px;font-weight:500;letter-spacing:-.375px}
.sbox__cell i{color:var(--g500);font-size:16px}

/* ---------- 섹션 헤더 — 텍스트는 공통 .fs-title/.fs-cap (tokens.css) 사용 ---------- */
.sec-head{display:flex;flex-direction:column;gap:4px}

/* ---------- 테마 추천 — 탭은 공통 .ttab (tokens.css, flex:1 균등폭) 사용 ---------- */
.theme{display:flex;flex-direction:column;gap:12px}
.ttabs{display:flex;border-bottom:1px solid var(--g91);height:44px}
.ttab{padding-bottom:8px}
/* 테마 슬라이더 — 카드 영역을 드래그하면 다음 테마 페이지로 슬라이드 전환 */
.tslider{overflow:hidden;touch-action:pan-y}
.ttrack{display:flex;gap:16px;transition:transform .35s ease}
.ttrack[data-i="1"]{transform:translateX(calc(-100% - 16px))}
.ttrack[data-i="2"]{transform:translateX(calc(-200% - 32px))}
.ttrack .tgrid{flex:0 0 100%;min-width:0}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* 카드 리스트 간격 12px — 앱 공통 */
.tcard{position:relative;height:108px;border-radius:8px;overflow:hidden;background:var(--g50);
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px}
.tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tcard::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.8))}
/* 텍스트는 공통 .fs-label/.fs-cap + .c-white (tokens.css) 사용 — 카드 제목만 16px 로 키움 */
.tcard__txt{position:relative;z-index:2}
.tcard__txt .fs-label{font-size:16px}

/* ---------- 최근 본 고택 — 카드는 공통 .vcard.vcard--scroll (tokens.css), 헤더는 .sechead 사용 ---------- */
.rsec{display:flex;flex-direction:column;gap:16px}
.recent{display:flex;gap:12px;overflow-x:auto}
.recent::-webkit-scrollbar{display:none}

/* ---------- 인기 검색어 — 텍스트는 공통 .fs-title/.fs-cap/.fs-body (tokens.css) 사용 ---------- */
.popsec{display:flex;flex-direction:column;gap:12px}
.popsec__head{height:44px;display:flex;align-items:flex-end;gap:12px}
.popcols{display:flex;gap:8px}
.popcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.popitem{height:36px;display:flex;align-items:center;gap:8px}
.popitem .num{width:20px;flex-shrink:0;font-weight:600}
.popitem--top .num{color:var(--blue-500)}
.popitem .ind{margin-left:auto;flex-shrink:0;width:18px;display:grid;place-items:center;font-size:13px;color:var(--g400)}
.popitem .ind.up{color:var(--red-500)}
.popitem .ind.down{color:var(--blue-500)}
.popitem .ind.new{color:var(--teal-500);font-size:11px;font-weight:700;letter-spacing:-.3px}
.popitem--top{font-weight:600}

/* ---------- 광고 배너 ---------- */
.adbanner{position:relative;background:var(--g50);border-radius:8px;padding:20px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}
/* 텍스트는 공통 .fs-body/.fs-cap (tokens.css) 사용 */
.adbanner__s{margin-top:4px}
.adbanner__ic{position:relative;width:66px;height:67px;flex:none;overflow:hidden}
.adbanner__ic img{position:absolute;max-width:none;height:390.84%;left:-444.4%;top:-77.48%;width:593.05%}

/* =========================================
   태블릿 (600px~) — 테마 카드 확대
========================================= */
@media (min-width:600px){
  .tcard{height:150px}
}