@charset "utf-8";
/* ============================================================
   타요폰 메인페이지 전용 CSS (2026-09-30 재설계)
   - tm- 접두사만 사용, 기존 .max-layout/.item-title/.template-wrapper/.item-list/.goods-box 셀렉터는
     override하지 않음 (단, 타요 PICK/RANKING 섹션은 #template36/#template2 스코프 안에서만
     기존 상품카드(.item-list.list-style1) 레이아웃을 재배치 - PHP/JS 변경 없이 CSS Grid/flex로만 처리)
   - 이 파일은 홈페이지에서만 로드됨 (skin.index.php 에서 add_stylesheet)
   ============================================================ */

/* ---------- HERO ---------- */
.tm-hero{ position:relative; background:linear-gradient(150deg,var(--fontbasic,#18243A) 0%,#0F1728 78%); color:#EAEDF3; overflow:hidden; margin-bottom:0; }
.tm-hero-inner{ display:flex; align-items:center; gap:24px; padding:40px; }
.tm-hero-text{ flex:0 0 55%; max-width:55%; }
.tm-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; letter-spacing:.12em; color:var(--accent2,#43cc27); margin-bottom:16px; }
.tm-eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent2,#43cc27); }
.tm-hero-text h1{ font-size:52px; line-height:1.28; font-weight:800; letter-spacing:-.02em; margin:0 0 18px; }
.tm-hero-text p{ font-size:17px; line-height:1.7; color:#98A2B8; max-width:440px; margin:0 0 28px; }
.tm-hero-ctas{ display:flex; gap:12px; }
.tm-btn-lime{ display:inline-flex; align-items:center; gap:6px; background:var(--accent2,#43cc27); color:#0F1728; font-weight:800; font-size:15.5px; padding:15px 26px; border-radius:12px; }
.tm-btn-lime:hover{ opacity:.9; }
.tm-btn-ghost{ display:inline-flex; align-items:center; gap:6px; background:transparent; color:#EAEDF3; font-weight:700; font-size:15.5px; padding:15px 24px; border-radius:12px; border:1px solid rgba(255,255,255,.16); }
.tm-hero-visual{ flex:0 0 45%; max-width:45%; position:relative; height:400px; }
.tm-hero-visual .ph{ position:absolute; border-radius:24px; box-shadow:0 30px 60px rgba(0,0,0,.35); background-size:cover; background-position:center; }
.tm-hero-visual .ph-1{ width:215px; height:400px; right:26px; bottom:-16px; background:linear-gradient(160deg,#3a4a68,#1c2740); z-index:3; }
.tm-hero-visual .ph-2{ width:180px; height:340px; right:160px; bottom:-24px; background:linear-gradient(160deg,#5c1f2e,#2c0f16); transform:rotate(-8deg); z-index:2; opacity:.92; }
.tm-hero-visual .ph-3{ width:168px; height:318px; right:-24px; bottom:6px; background:linear-gradient(160deg,#8a8fa0,#41475c); transform:rotate(9deg); z-index:1; opacity:.7; }
.tm-float-chip{ position:absolute; background:#fff; color:#17191C; font-size:11.5px; font-weight:700; padding:8px 13px; border-radius:20px; box-shadow:0 10px 24px rgba(0,0,0,.2); z-index:4; white-space:nowrap; }
.tm-chip-a{ top:6px; left:0; }
.tm-chip-b{ top:120px; right:150px; }
@media (max-width:900px){
  .tm-hero-inner{ flex-direction:column; align-items:flex-start; padding:32px 20px 26px; gap:0; }
  .tm-hero-text{ flex:1 1 auto; max-width:100%; }
  .tm-hero-text h1{ font-size:32px; }
  .tm-hero-text p{ font-size:15px; max-width:100%; }
  /* [수정] 태블릿폭에서 width:100%가 너무 넓어져 우측 고정(right:Npx) 폰 이미지들이 왼쪽에 큰 여백을 남기고 쏠려 보이던 문제 → 모바일 카드 폭으로 상한 */
  .tm-hero-visual{ flex:1 1 auto; max-width:420px; width:100%; height:200px; margin:16px 0 20px; }
  .tm-hero-visual .ph-1{ width:120px; height:200px; right:30px; }
  .tm-hero-visual .ph-2{ width:100px; height:176px; right:120px; }
  .tm-hero-visual .ph-3{ display:none; }
  .tm-hero-ctas{ width:100%; }
  .tm-hero-ctas a{ flex:1 1 0; justify-content:center; }
}

/* ---------- TRUST BAR (compact, LIVE 카드/롤링 리스트 대체) ---------- */
.tm-trustbar{ display:flex; align-items:center; justify-content:center; gap:26px; padding:14px 20px; background:#fff; border-bottom:1px solid #ececef; font-size:13px; color:#7B8492; flex-wrap:wrap; }
.tm-trustbar .tm-tb-item{ display:flex; align-items:center; gap:7px; white-space:nowrap; }
.tm-trustbar .tm-tb-item b{ color:#17191C; font-weight:800; }
.tm-trustbar .tm-tb-dot{ width:7px; height:7px; border-radius:50%; background:#ff4444; box-shadow:0 0 0 3px rgba(255,68,68,.16); }
.tm-trustbar .tm-tb-sep{ width:1px; height:13px; background:#e5e7eb; }
@media (max-width:600px){
  .tm-trustbar{ gap:14px; padding:11px 14px; overflow-x:auto; justify-content:flex-start; font-size:12px; }
  .tm-trustbar .tm-tb-sep{ display:none; }
}

/* ---------- SECTION 공통 ---------- */
.tm-section{ padding:36px 40px; max-width:1280px; margin:0 auto; }
.tm-section-tight{ padding-top:0; }
@media (max-width:900px){
  .tm-section{ padding:26px 20px; }
}

/* ---------- TAYO FINDER ---------- */
.tm-finder{ background:#F6F8FA; border-radius:28px; padding:30px; }
.tm-finder-head{ text-align:center; margin-bottom:20px; }
.tm-finder-head h2{ font-size:28px; font-weight:800; color:#17191C; margin:0; }
.tm-finder-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.tm-step .tm-step-num{ font-size:13px; font-weight:800; color:#7B8492; letter-spacing:.06em; margin-bottom:10px; }
.tm-step .tm-step-q{ font-size:16.5px; font-weight:700; color:#17191C; margin-bottom:14px; }
.tm-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.tm-pill{ padding:10px 17px; border-radius:20px; border:1px solid #e2e5ea; background:#fff; font-size:14.5px; font-weight:600; color:#17191C; cursor:pointer; transition:background .12s ease, color .12s ease, border-color .12s ease; }
.tm-pill:hover{ border-color:var(--fontbasic,#18243A); }
.tm-pill.is-sel{ background:var(--fontbasic,#18243A); border-color:var(--fontbasic,#18243A); color:#fff; }
.tm-pill.is-sel::after{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent2,#43cc27); margin-left:6px; vertical-align:middle; }
.tm-finder-cta{ text-align:center; margin-top:24px; }
.tm-finder-result{ margin-top:20px; }
.tm-finder-hint{ text-align:center; font-size:12.5px; color:#9aa2b1; margin-top:12px; }
@media (max-width:900px){
  .tm-finder{ padding:24px 18px; border-radius:22px; }
  .tm-finder-steps{ grid-template-columns:1fr; gap:20px; }
}

/* ---------- 공통 섹션 헤더 (타요 PICK / RANKING / WHY / REVIEW 타이틀은 기존 .item-title 시스템 그대로 사용,
   여기서는 간격만 살짝 보정) ---------- */
#template36 .item-title, #template2 .item-title{ margin-bottom:16px; }
#template36 .item-title_subject, #template2 .item-title_subject{ font-size:13.5px; font-weight:800; letter-spacing:.1em; color:#43cc27; text-transform:uppercase; }
#template36 .item-title_copytext, #template2 .item-title_copytext{ display:block; font-size:36px; font-weight:800; color:#17191C; letter-spacing:-.02em; margin-top:6px; }

/* ---------- 타요 PICK: 완성형 카드 (좌 메인 55/45 분할 + 우 서브 3개) ----------
   PHP/JS 변경 없이 template/widget/mshop_goods/basic 출력(.item-list.list-style1)을
   #template36 스코프 안에서 CSS Grid로 재배치. 브랜드/추천문구는 skin.index.php 하단 JS가
   상품명 텍스트를 읽어 .tm-brand-label 등으로 주입 (데이터 구조 변경 없음) */
#template36 .goods-list-wrapper{ display:grid; grid-template-columns:1.15fr 1fr; grid-template-rows:repeat(3,1fr); gap:16px; }
#template36 .item-list{ width:auto !important; max-width:none !important; flex:none !important; padding:0 !important; margin-bottom:0 !important; }
#template36 .item-list:nth-child(1){ grid-column:1; grid-row:1 / span 3; }
#template36 .item-list:nth-child(2){ grid-column:2; grid-row:1; }
#template36 .item-list:nth-child(3){ grid-column:2; grid-row:2; }
#template36 .item-list:nth-child(4){ grid-column:2; grid-row:3; }
#template36 .item-list:nth-child(n+5){ display:none; }

/* 카드 공통 디자인 시스템 */
#template36 .goods-box{ border:1px solid #E9EBEF !important; border-radius:20px !important; box-shadow:0 4px 18px rgba(24,36,58,.05) !important; transition:transform .18s ease, box-shadow .18s ease; }
#template36 .goods-box:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(24,36,58,.09) !important; }

/* ---- 메인카드 (1번): 좌 55% 이미지 / 우 45% 정보, 좌우 분할 ---- */
#template36 .item-list:nth-child(1) .goods-box{
    /* [수정] %+gap 조합은 20px가 100%에 더해져 우측 패딩을 먹어버림(26px→7px) → fr 단위로 교체 */
    display:grid; grid-template-columns:55fr 45fr; align-items:stretch; height:100%; padding:26px; gap:20px;
}
#template36 .item-list:nth-child(1) .list-image{ grid-column:1; grid-row:1; display:flex; align-items:center; justify-content:center; padding:0; }
#template36 .item-list:nth-child(1) .list-image img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; }
/* 혜택 chip은 스펙상 "메인 상품에서는 너무 눈에 띄지 않게" → 가격/CTA 위계에 집중하기 위해 숨김 */
#template36 .item-list:nth-child(1) .feat-row,
#template36 .item-list:nth-child(1) .list-tags.tag-pc{ display:none; }
#template36 .item-list:nth-child(1) .list-item{ grid-column:2; grid-row:1; display:flex; flex-direction:column; justify-content:center; padding:0; }
#template36 .item-list:nth-child(1) .list-name{ margin:0; order:3; }
#template36 .item-list:nth-child(1) .modelname a{ font-size:24px; font-weight:800; white-space:normal; line-height:1.3; color:#17191C; }
#template36 .item-list:nth-child(1) .list-sale{ margin-top:16px; order:5; }
#template36 .item-list:nth-child(1) .list-sale li.icn{ margin-bottom:2px; }
#template36 .item-list:nth-child(1) .list-sale li.icn > span{ font-size:12.5px; color:#9aa2b1; }
#template36 .item-list:nth-child(1) .list-sale li.icn > b.strike{ font-size:13px; font-weight:400; color:#aaa; }
#template36 .item-list:nth-child(1) .list-sale li.icp > span{ font-size:12.5px; color:#7B8492; }
#template36 .item-list:nth-child(1) .list-sale li.icp > b{ font-size:28px; font-weight:800; color:#2e9e17; }
#template36 .item-list:nth-child(1) .card-cta{
    display:inline-flex !important; order:6; align-self:flex-start; margin-top:20px;
    background:var(--fontbasic,#18243A) !important; color:#fff !important;
    padding:13px 22px; border-radius:10px; font-size:14px; font-weight:700;
    transition:background .18s ease, color .18s ease;
}
#template36 .item-list:nth-child(1) .card-cta:hover{ background:var(--accent2,#43cc27) !important; color:#17191C !important; }
#template36 .item-list:nth-child(1) .card-cta .arrow{ margin-left:2px; }
#template36 .item-list:nth-child(1) .per_ico{ top:16px !important; left:16px !important; }
#template36 .item-list:nth-child(1) .wish-ico{ top:16px !important; right:16px !important; }
/* JS가 주입하는 eyebrow/브랜드/추천문구 라벨 */
#template36 .item-list:nth-child(1) .tm-pick-eyebrow{ order:1; font-size:11.5px; font-weight:800; letter-spacing:.1em; color:#43cc27; text-transform:uppercase; margin-bottom:8px; }
#template36 .item-list:nth-child(1) .tm-brand-label{ order:2; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:#7B8492; margin-bottom:6px; }
#template36 .item-list:nth-child(1) .tm-pick-reason{ order:4; font-size:13px; color:#7B8492; margin-top:6px; }

/* ---- 서브카드 (2~4번): 좌 이미지 / 중앙 정보 / 우 가격+CTA 3열 ----
   list-item을 display:contents로 풀어서 내부 요소를 goods-box의 grid 칸에 직접 배치.
   각 요소마다 grid-row를 명시해서 auto-placement로 인한 겹침 위험을 없앰 */
#template36 .item-list:nth-child(n+2) .goods-box{
    display:grid; grid-template-columns:100px 1fr auto; grid-template-rows:auto auto auto;
    align-items:center; column-gap:16px; padding:20px;
}
#template36 .item-list:nth-child(n+2) .list-image{ grid-column:1; grid-row:1 / span 3; width:100px; padding:0; }
#template36 .item-list:nth-child(n+2) .list-image img{ width:100px; height:100px; aspect-ratio:1/1; object-fit:contain; }
#template36 .item-list:nth-child(n+2) .list-image .item-color{ display:none; }
#template36 .item-list:nth-child(n+2) .feat-row,
#template36 .item-list:nth-child(n+2) .list-tags.tag-pc{ display:none; }
#template36 .item-list:nth-child(n+2) .list-item{ display:contents; }
#template36 .item-list:nth-child(n+2) .list-name{ grid-column:2; grid-row:2; margin:0; }
#template36 .item-list:nth-child(n+2) .modelname a{ font-size:15.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; color:#17191C; }
#template36 .item-list:nth-child(n+2) .list-sale{ grid-column:3; grid-row:1 / span 3; margin:0; text-align:right; align-self:center; }
#template36 .item-list:nth-child(n+2) .list-sale li{ justify-content:flex-end; }
#template36 .item-list:nth-child(n+2) .list-sale li.icn{ display:none; }
#template36 .item-list:nth-child(n+2) .list-sale li.icp > span{ display:none; }
#template36 .item-list:nth-child(n+2) .list-sale li.icp > b{ font-size:17px; font-weight:800; color:#2e9e17; }
#template36 .item-list:nth-child(n+2) .card-cta{
    display:inline-flex !important; grid-column:3; grid-row:1 / span 3; align-self:end; justify-self:end; margin-top:4px;
    background:transparent !important; padding:0 !important; border-radius:0 !important;
    font-size:11.5px; font-weight:700; color:#7B8492 !important; gap:2px;
}
#template36 .item-list:nth-child(n+2) .card-cta:hover{ color:var(--fontbasic,#18243A) !important; }
#template36 .item-list:nth-child(n+2) .per_ico{ top:10px !important; left:10px !important; padding:4px 8px !important; font-size:10.5px !important; }
#template36 .item-list:nth-child(n+2) .per_ico b{ font-size:11.5px !important; }
#template36 .item-list:nth-child(n+2) .wish-ico{ top:10px !important; right:10px !important; width:26px !important; height:26px !important; }
/* JS가 주입하는 브랜드/역할 라벨: row1/row3에 명시적으로 배치해서 상품명(row2)과 겹치지 않음 */
#template36 .item-list:nth-child(n+2) .tm-brand-label-sm{ grid-column:2; grid-row:1; align-self:end; font-size:11px; font-weight:700; letter-spacing:.04em; color:#9aa2b1; margin:0; }
#template36 .item-list:nth-child(n+2) .tm-role-label{ grid-column:2; grid-row:3; align-self:start; font-size:11px; font-weight:600; color:#43cc27; margin:0; }

@media (max-width:900px){
    /* 래퍼 div 없이 flat 형제 li 구조라 진짜 가로스크롤은 만들 수 없어, 대신 큰 픽 아래 3개를 가로 3분할로 배치 */
    #template36 .goods-list-wrapper{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; gap:10px; }
    #template36 .item-list:nth-child(1){ grid-column:1 / -1; grid-row:1; }
    #template36 .item-list:nth-child(2){ grid-column:1; grid-row:2; }
    #template36 .item-list:nth-child(3){ grid-column:2; grid-row:2; }
    #template36 .item-list:nth-child(4){ grid-column:3; grid-row:2; }
    #template36 .item-list:nth-child(1) .goods-box{ display:flex; flex-direction:column; padding:20px; }
    #template36 .item-list:nth-child(1) .list-image{ width:100%; }
    #template36 .item-list:nth-child(1) .list-item{ padding:0; margin-top:14px; }
    #template36 .item-list:nth-child(1) .modelname a{ font-size:19px; }
    #template36 .item-list:nth-child(1) .list-sale li.icp > b{ font-size:22px; }
    #template36 .item-list:nth-child(1) .feat-row{ display:none; }
    #template36 .item-list:nth-child(n+2) .goods-box{ display:flex; flex-direction:column; align-items:flex-start; padding:10px; gap:6px; }
    #template36 .item-list:nth-child(n+2) .list-image{ width:100%; }
    #template36 .item-list:nth-child(n+2) .list-image img{ width:100%; height:84px; }
    #template36 .item-list:nth-child(n+2) .modelname a{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; width:100%; font-size:13px; }
    #template36 .item-list:nth-child(n+2) .list-sale{ text-align:left; }
    #template36 .item-list:nth-child(n+2) .list-sale li{ justify-content:flex-start; }
    #template36 .item-list:nth-child(n+2) .list-sale li.icp > b{ font-size:14.5px; white-space:nowrap; }
    #template36 .item-list:nth-child(n+2) .card-cta{ justify-self:start; }
    #template36 .item-list:nth-child(n+2) .tm-role-label{ display:none; }
}

/* ---------- RANKING: 4열 그리드 (순위 | 이미지 | 정보(브랜드/상품명/역할) | 가격+CTA) ----------
   PHP/JS 변경 없이 template/widget/mshop_goods/basic 출력을 #template2 스코프 안에서
   display:contents + CSS Grid로 재배치. 각 요소 grid-row를 명시해서 겹침 방지.
   브랜드/역할 라벨은 skin.index.php 하단 JS가 상품명 텍스트를 읽어 주입 */
#template2 .goods-list-wrapper{ display:flex; flex-direction:column; gap:0; counter-reset:tmrank; }
#template2 .item-list{ width:100% !important; max-width:100% !important; flex:none !important; padding:0 !important; margin-bottom:0 !important; }
#template2 .item-list:nth-child(n+5){ display:none; }
#template2 .goods-box{
    display:grid !important; grid-template-columns:60px 84px 1fr auto; grid-template-rows:auto auto auto;
    align-items:center; column-gap:20px; border:0; border-bottom:1px solid #ececef; border-radius:12px; box-shadow:none;
    padding:22px 10px; position:relative; transition:background .15s ease;
}
#template2 .goods-box:hover{ background:#FAFBFC; }
#template2 .goods-box::before{
    grid-column:1; grid-row:1 / span 3; counter-increment:tmrank; content:counter(tmrank, decimal-leading-zero);
    font-size:38px; font-weight:800; font-style:italic; color:#e2e5ea; line-height:1;
}
#template2 .item-list:first-child .goods-box::before{ color:#43cc27; }
#template2 .list-image{ grid-column:2; grid-row:1 / span 3; width:84px; padding:0; }
#template2 .list-image img{ width:84px; height:84px; object-fit:contain; }
#template2 .list-image .item-color{ display:none; }
#template2 .feat-row,
#template2 .list-tags.tag-pc{ display:none; }
#template2 .list-item{ display:contents; }
#template2 .list-name{ grid-column:3; grid-row:2; margin:0; }
#template2 .modelname a{ font-size:18px; font-weight:700; white-space:nowrap; color:#17191C; }
#template2 .list-sale{ grid-column:4; grid-row:2; margin:0; text-align:right; }
#template2 .list-sale li{ justify-content:flex-end; }
#template2 .list-sale li.icn{ display:none; }
#template2 .list-sale li.icp > span{ display:none; }
#template2 .list-sale li.icp > b{ font-size:22px; font-weight:800; color:#2e9e17; }
#template2 .card-cta{
    display:inline-flex !important; grid-column:4; grid-row:3; justify-self:end; margin-top:2px;
    background:transparent !important; padding:0 !important; border-radius:0 !important;
    font-size:11.5px; font-weight:700; color:#7B8492 !important; gap:2px;
}
#template2 .card-cta:hover{ color:var(--fontbasic,#18243A) !important; }
#template2 .wish-ico{ display:none; }
#template2 .per_ico{ grid-column:4; grid-row:1; justify-self:end; align-self:end; position:static !important; display:inline-flex !important; box-shadow:none !important; }
/* JS가 주입하는 브랜드/역할 라벨 */
#template2 .tm-brand-label-sm{ grid-column:3; grid-row:1; align-self:end; font-size:11px; font-weight:700; letter-spacing:.04em; color:#9aa2b1; margin:0; }
#template2 .tm-role-label{ grid-column:3; grid-row:3; align-self:start; font-size:11.5px; font-weight:600; color:#43cc27; margin:0; }
@media (max-width:640px){
    #template2 .goods-box{ grid-template-columns:40px 60px 1fr auto; column-gap:12px; padding:18px 4px; }
    #template2 .goods-box::before{ font-size:26px; }
    #template2 .list-image{ width:60px; }
    #template2 .list-image img{ width:60px; height:60px; }
    #template2 .modelname a{ font-size:15px; }
    #template2 .list-sale li.icp > b{ font-size:17px; }
    #template2 .tm-brand-label-sm,
    #template2 .tm-role-label{ display:none; }
    #template2 .card-cta{ display:none !important; }
}

/* ---------- 실시간 주문내역(#template13, ct_id=26) - 메인에서는 숨김 (기존에도 CSS로 숨겨져 있던 위젯) ---------- */
#template13{ display:none; }

/* ---------- 구매후기(#template8): 큰 에디토리얼 카드 느낌으로 restyle (기존 마크업/데이터 그대로) ---------- */
#template8 .item-title_subject{ font-size:13.5px; font-weight:800; letter-spacing:.1em; color:#43cc27; text-transform:uppercase; }
#template8 .item-title_copytext{ display:block; font-size:36px; font-weight:800; color:#17191C; margin-top:6px; }
#template8 .goods-list-wrapper{ gap:16px; }
#template8 .item-list-box{ border-radius:20px !important; }
#template8 .list-item-cont .content{ font-size:15.5px !important; line-height:1.6; }

/* ---------- WHY TAYOPHONE ---------- */
.tm-why-head{ text-align:center; margin-bottom:24px; }
.tm-why-head .tm-eyebrow-dark{ font-size:12.5px; font-weight:800; letter-spacing:.1em; color:#43cc27; text-transform:uppercase; margin-bottom:10px; }
.tm-why-head h2{ font-size:36px; font-weight:800; color:#17191C; line-height:1.4; margin:0; }
.tm-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.tm-why-item{ padding:0 26px; border-left:1px solid #ececef; }
.tm-why-item:first-child{ border-left:0; padding-left:0; }
.tm-why-item .tm-why-num{ font-size:13.5px; font-weight:800; color:#43cc27; margin-bottom:16px; }
.tm-why-item h3{ font-size:18.5px; font-weight:800; color:#17191C; margin:0 0 10px; }
.tm-why-item p{ font-size:14.5px; color:#7B8492; line-height:1.6; margin:0; }
@media (max-width:900px){
  .tm-why-grid{ grid-template-columns:1fr 1fr; row-gap:28px; }
  .tm-why-item{ border-left:0; padding:0; }
  .tm-why-item:nth-child(2n){ padding-left:20px; border-left:1px solid #ececef; }
}

/* ---------- SUPPORT / FAQ CTA ---------- */
.tm-support{ background:#F6F8FA; border-radius:28px; padding:36px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.tm-support h3{ font-size:22px; font-weight:800; color:#17191C; margin:0 0 8px; }
.tm-support p{ font-size:14.5px; color:#7B8492; margin:0; }
.tm-support .tm-btn-navy{ display:inline-block; background:var(--fontbasic,#18243A); color:#fff; font-weight:700; font-size:15px; padding:15px 28px; border-radius:24px; white-space:nowrap; }
@media (max-width:700px){
  .tm-support{ flex-direction:column; align-items:flex-start; padding:30px 24px; border-radius:22px; }
  .tm-support .tm-btn-navy{ width:100%; text-align:center; }
}


/* ---------- TAYO FINDER 결과 (조건 선택 시 바로 아래 표시) ---------- */
.tm-res{ margin-top:22px; }
.tm-res-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.tm-res-count{ font-size:15px; font-weight:800; color:#17191c; }
.tm-res-all{ font-size:13px; font-weight:700; color:#2e9e17; }
.tm-res-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tm-res-card{ display:flex; flex-direction:column; padding:16px 14px 14px; background:#fff; border:1px solid #eef0f2; border-radius:16px; box-shadow:0 2px 10px rgba(20,20,40,.05); color:#17191c; transition:transform .15s ease, border-color .15s ease; }
.tm-res-card:hover{ transform:translateY(-3px); border-color:#43cc27; }
.tm-res-img{ height:150px; display:flex; align-items:center; justify-content:center; }
.tm-res-img img{ max-width:100%; max-height:150px; object-fit:contain; }
.tm-res-brand{ margin-top:8px; font-size:10.5px; font-weight:800; letter-spacing:.08em; color:#9aa2b1; }
.tm-res-name{ font-size:15px; font-weight:800; margin-top:2px; line-height:1.3; }
.tm-res-tag{ margin-top:4px; font-size:11.5px; color:#7b8492; }
.tm-res-price{ margin-top:10px; display:flex; align-items:baseline; justify-content:space-between; }
.tm-res-price span{ font-size:11.5px; color:#888; }
.tm-res-price b{ font-size:18px; font-weight:800; color:#2e9e17; letter-spacing:-.02em; }
.tm-res-empty{ grid-column:1/-1; text-align:center; padding:36px 0; color:#7b8492; background:#fff; border:1px dashed #dee2e6; border-radius:16px; }
@media (max-width:900px){ .tm-res-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } .tm-res-img{ height:120px; } .tm-res-img img{ max-height:120px; } .tm-res-name{ font-size:13.5px; } .tm-res-price b{ font-size:16px; } }

/* ===== 메인 배너 슬라이더 (2026-10-26) ===== */
.tm-bn{ position:relative; width:100%; overflow:hidden; background:#f4f6f8; }
.tm-bn-track{ position:relative; width:100%; aspect-ratio:1920/500; }
.tm-bn-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s ease; display:block; }
.tm-bn-slide.on{ opacity:1; visibility:visible; }
.tm-bn-slide picture, .tm-bn-slide img{ display:block; width:100%; height:100%; object-fit:cover; }
.tm-bn-nav{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; border-radius:50%; background:rgba(0,0,0,.35); color:#fff; font-size:26px; line-height:1; cursor:pointer; z-index:3; }
.tm-bn-prev{ left:14px; } .tm-bn-next{ right:14px; }
.tm-bn-dots{ position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:7px; z-index:3; }
.tm-bn-dots button{ width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.28); cursor:pointer; }
.tm-bn-dots button.on{ width:22px; border-radius:8px; background:#43CC27; }
.tm-kstrip{ display:block; width:100%; background:#fff; }
.tm-kstrip img{ display:block; width:100%; max-width:1200px; height:auto; margin:0 auto; }
@media (max-width:768px){
  .tm-bn-track{ aspect-ratio:1200/590; }
  .tm-bn-nav{ display:none; }
  .tm-bn-dots{ bottom:8px; }
}