/* ============================================================
   truemsg.css — 트루마사지 전용 오버라이드 (tk.css 뒤에 로드)
   목적: msg82(차가운 블루·둥근 카드·큰 그림자·중앙 로고·캐러셀)와
         구조·시각언어를 확실히 분리. 웜 에디토리얼 + 고가독·고시인성.
   ============================================================ */

/* ── 디자인 토큰 재정의(웜·샤프·플랫) ───────────────────── */
:root{
  --ink:#241a14; --ink2:#5a4a40; --mut:#8b7568;
  --paper:#ffffff; --line:#ecddd3; --line2:#f6ece5;
  --wash:#fff8f2;                         /* 웜 오프화이트 */
  --r-s:9px; --r-m:12px; --r-l:16px;      /* msg82(12/18/26)보다 샤프 */
  --sh-1:0 1px 0 rgba(120,70,40,.06);
  --sh-2:0 3px 12px rgba(150,70,35,.08);
  --sh-3:0 12px 34px rgba(150,70,35,.12);
  --sh-brand:0 8px 22px rgba(198,71,42,.26);
  --wrap:1180px;                          /* 폭도 살짝 다르게 */
}

/* ── 타이포: 크게·넉넉한 줄간격(가독성) ─────────────────── */
html{font-size:17px}
body{background:var(--wash);color:var(--ink);line-height:1.72;letter-spacing:-.1px;
  font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,sans-serif}
h1,h2,h3{letter-spacing:-.6px;font-weight:800;color:var(--ink)}
p{color:var(--ink2)}

/* ── 버튼: 알약형(msg82 둥근사각과 구분) ─────────────────── */
.tk-btn{border-radius:999px;font-weight:700;padding:.72em 1.35em;box-shadow:none}
.tk-btn:hover{transform:translateY(-1px)}
.tk-btn-line,.tk-btn-ghost{border-radius:999px}

/* ── 헤더: 로고 좌측 정렬 + 얇은 웜 보더 ─────────────────── */
.tk-util{background:#2a1712;color:#f3ded4}
.tk-util a{color:#f7e6dc}
.tk-hd-main{border-bottom:1px solid var(--line)}
.tk-hd-row{gap:18px}
.tk-logo{order:-1;margin-right:auto}          /* 중앙→좌측 */
.tk-search{max-width:none;flex:1;background:var(--wash);border:1.5px solid var(--line);border-radius:999px}
.tk-search:focus-within{border-color:var(--brand)}
.tk-gnb{background:#fff;border-bottom:1px solid var(--line)}
.tk-gnb-a{font-weight:700}
.tk-gnb-a.is-on{color:var(--brand-d)}
.tk-gnb-a.is-on::after{background:var(--brand)}

/* ── ★히어로: 캐러셀 제거 → 검색 우선 정적 히어로 ───────── */
.tm-hero{background:
  radial-gradient(1200px 380px at 85% -10%,rgba(226,96,63,.14),transparent 60%),
  linear-gradient(180deg,#fff8f2 0%,#fff 100%);
  border-bottom:1px solid var(--line)}
.tm-hero-in{max-width:var(--wrap);margin:0 auto;padding:64px 20px 56px;text-align:center}
.tm-hero-kicker{display:inline-block;font-size:.86rem;font-weight:800;letter-spacing:.4px;
  color:var(--brand-d);background:var(--brand-soft);border:1px solid var(--line);
  padding:.4em 1em;border-radius:999px;margin:0 0 18px}
.tm-hero-h{font-size:clamp(2rem,4.6vw,3.35rem);line-height:1.18;margin:0 0 16px;color:var(--ink)}
.tm-hero-h b{color:var(--brand-d)}
.tm-hero-sub{font-size:1.12rem;color:var(--ink2);max-width:620px;margin:0 auto 30px}
.tm-hero-search{display:flex;gap:8px;max-width:640px;margin:0 auto;background:#fff;
  border:2px solid var(--brand);border-radius:999px;padding:7px 7px 7px 22px;box-shadow:var(--sh-brand)}
.tm-hero-search input{flex:1;border:0;outline:0;background:none;font-size:1.06rem;color:var(--ink)}
.tm-hero-search button{border:0;background:var(--brand);color:#fff;font-weight:800;
  padding:0 1.6em;border-radius:999px;cursor:pointer;font-size:1rem}
.tm-hero-search button:hover{background:var(--brand-d)}
.tm-hero-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:22px auto 0;max-width:720px}
.tm-hero-chips a{font-weight:700;font-size:.95rem;color:var(--ink2);background:#fff;
  border:1.5px solid var(--line);padding:.5em 1.05em;border-radius:999px;transition:.15s}
.tm-hero-chips a:hover{border-color:var(--brand);color:var(--brand-d);background:var(--brand-soft)}

/* ── 신뢰 스트립: 아이콘 좌측 정렬·구분선(카드형 아님) ───── */
.tk-trust{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.tk-trust li{gap:12px}
.tk-trust-ico{background:var(--brand-soft);color:var(--brand-d);border-radius:12px}

/* ── 섹션 헤더: 좌측 코랄 바(에디토리얼) ─────────────────── */
.tk-sec-hd h1,.tk-sec-hd h2{position:relative;padding-left:16px}
.tk-sec-hd h1::before,.tk-sec-hd h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;
  width:5px;border-radius:3px;background:linear-gradient(180deg,var(--brand),var(--brand-d))}
.tk-sec-sub{color:var(--mut)}

/* ── 업종 타일: 보더 카드 + 좌측 정렬 ───────────────────── */
.tk-cats-row li>a,.tk-cat-near>a{border:1.5px solid var(--line);border-radius:var(--r-m);
  background:#fff;box-shadow:none;transition:.15s;text-align:left;align-items:flex-start}
.tk-cats-row li>a:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--sh-2)}
.tk-cat-ico{background:var(--brand-soft);color:var(--brand-d)}

/* ── 카드(매장/추천): 보더 + 코랄 호버(그림자 의존 X) ───── */
.tk-scard>a,.tk-card>a,.tk-card{border:1.5px solid var(--line);border-radius:var(--r-m);
  background:#fff;box-shadow:var(--sh-1);overflow:hidden;transition:.16s}
.tk-scard>a:hover,.tk-card>a:hover{border-color:var(--brand);box-shadow:var(--sh-2);transform:translateY(-2px)}
.tk-scard-t,.tk-card-t{color:var(--ink);font-weight:800}
.tk-scard-area,.tk-card-area{color:var(--brand-d);font-weight:700}
.tk-scard-tags i,.tk-card-tags i{background:var(--brand-soft);color:var(--brand-d);border-radius:999px;border:0}

/* ── 지역 칩·롱테일: 알약 + 웜 ──────────────────────────── */
.tk-regions li>a{border:1.5px solid var(--line);border-radius:999px;background:#fff}
.tk-regions li>a:hover{border-color:var(--brand);color:var(--brand-d);background:var(--brand-soft)}
.tk-lt-grid li>a{border:1.5px solid var(--line);border-radius:var(--r-m);background:#fff}
.tk-lt-grid li>a:hover{border-color:var(--brand)}

/* ── 상세 페이지: 요금/팩트 가독성 ──────────────────────── */
.tk-c-n{font-weight:700;color:var(--ink)}
.tk-c-p{color:var(--brand-d);font-weight:800}
.tk-fact-k{color:var(--mut)}
.tk-crumb a{color:var(--mut)}
.tk-crumb a:hover{color:var(--brand-d)}

/* ── 푸터: 웜 다크 + 코랄 액센트(구조·색 분리) ───────────── */
.tk-ft{background:#241713;color:#e9d5c9;border-top:4px solid var(--brand)}
.tk-ft h3{color:#fff}
.tk-ft a{color:#e4cfc3}
.tk-ft a:hover{color:#fff;text-decoration:underline}
.tk-ft-brand p{color:#cbb2a5}
.tk-ft-policy{color:#b79b8d !important}
.tk-ft-links li>a{border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.03)}
.tk-ft-links li>a:hover{border-color:var(--brand);background:rgba(226,96,63,.14);color:#fff}
.tk-ft-btm{border-top:1px solid rgba(255,255,255,.12);color:#b79b8d}

/* ── 접근성/시인성: 포커스 링 ───────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid rgba(226,96,63,.45);outline-offset:2px}

/* ── 업종 카드: 이미지 대신 아이콘 타일(스톡사진 미사용) ── */
.tk-bene li>a{border:1.5px solid var(--line);border-radius:var(--r-l);background:#fff;overflow:hidden;padding-bottom:16px;box-shadow:var(--sh-1);transition:.16s;display:block}
.tk-bene li>a:hover{border-color:var(--brand);box-shadow:var(--sh-2);transform:translateY(-2px)}
.tm-bene-ico{position:relative;display:flex;align-items:center;justify-content:center;height:132px;
  background:linear-gradient(135deg,var(--brand-soft) 0%,#fff 100%);border-bottom:1px solid var(--line)}
.tm-bene-ico .tk-i{width:52px;height:52px;color:var(--brand-d)}
.tm-bene-ico .tk-badge{position:absolute;left:14px;top:14px;background:var(--brand);color:#fff;
  font-size:.75rem;font-weight:800;padding:.32em .8em;border-radius:999px;line-height:1}
.tk-bene li>a strong{display:block;padding:14px 16px 2px;color:var(--ink);font-weight:800;font-size:1.05rem}
.tk-bene li>a>span{display:block;padding:0 16px;color:var(--mut);font-size:.9rem;line-height:1.5}

/* ── 지역 카드: 이미지 제거 → 코랄 그라데이션 텍스트 카드 ── */
.tk-promo li>a{position:relative;display:flex;align-items:flex-end;min-height:172px;
  border-radius:var(--r-l);overflow:hidden;color:#fff;padding:18px;
  background:linear-gradient(150deg,#E2603F 0%,#A23A21 100%)}
.tk-promo li.is-big>a{min-height:224px}
.tk-promo li:nth-child(3n+2)>a{background:linear-gradient(150deg,#C6472A 0%,#7a2a17 100%)}
.tk-promo li:nth-child(3n)>a{background:linear-gradient(150deg,#d9793f 0%,#b0461f 100%)}
.tk-promo li>a:hover{filter:brightness(1.05)}
.tk-promo-tag{position:absolute;left:16px;top:14px;background:rgba(255,255,255,.22);color:#fff;
  font-size:.75rem;font-weight:800;padding:.3em .8em;border-radius:999px}
.tk-promo-tx strong{display:block;font-size:1.28rem;font-weight:800;line-height:1.2}
.tk-promo-tx em{display:block;font-style:normal;opacity:.92;font-size:.9rem;margin-top:3px}

@media (max-width:760px){
  html{font-size:16px}
  .tm-hero-in{padding:44px 18px 40px}
  .tm-hero-search{flex-wrap:nowrap}
  .tm-bene-ico{height:112px}
}