/* 하루마사지 — masshouse풍 클린·플랫 정보형 디렉토리.
   네이비+골드 아이덴티티 유지, 샤프 모서리·플랫·넉넉한 여백·텍스트 중심 카드그리드. */
:root{
  --brand:#1F2E4D; --brand2:#33477A; --brand-d:#141E38; --brand-soft:#EEF1F7;
  --grad-brand:linear-gradient(135deg,#33477A,#1F2E4D);
  --gold:#C9A24B; --gold-d:#A9843A;
  --ink:#1A2030; --ink2:#4A5568; --mut:#8A93A5;
  --wash:#F6F8FB; --line:#E4E9F1; --line2:#EEF1F7; --paper:#fff;
  --r-s:4px; --r-m:6px; --r-l:8px;
  --sh-1:none; --sh-2:0 1px 2px rgba(20,30,56,.05); --sh-3:0 4px 16px rgba(20,30,56,.08);
}
body{background:#fff;color:var(--ink)}

/* 헤더 — 플랫(그림자 제거·얇은 라인) */
.tk-hd{box-shadow:none;border-bottom:1px solid var(--line)}
.tk-util{background:var(--brand-d)}
.tk-util-l,.tk-util-r a{color:#C3CBDC}
.tk-gnb{border-top:1px solid var(--line2)}
.tk-gnb-a{color:var(--ink2);font-weight:600}
.tk-gnb-a.is-on,.tk-gnb-a:hover{color:var(--brand)}
.tk-logo img{filter:none}

/* 히어로 — 클린 라이트 밴드(masshouse식 텍스트+검색+칩) */
.ha-hero{background:var(--wash);border-bottom:1px solid var(--line);padding:40px 0 36px;overflow:visible}
.ha-hero::after{display:none}
.ha-hero-kick{color:var(--gold-d);font-weight:700;font-size:12.5px;letter-spacing:.03em;margin:0 0 10px}
.ha-hero-h{font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--brand-d);margin:0 0 10px}
.ha-hero-h b{color:var(--gold-d)}
.ha-hero-sub{color:var(--ink2);font-size:15px;line-height:1.7;margin:0 0 18px;max-width:600px}
.ha-hero-search{display:flex;gap:8px;max-width:600px;background:#fff;border:1.5px solid var(--brand);border-radius:var(--r-s);box-shadow:none;padding:5px 5px 5px 16px}
.ha-hero-search input{flex:1;min-width:0;border:0;outline:0;font-size:15px;background:transparent}
.ha-hero-search button{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:var(--r-s);background:var(--brand);color:#fff;font-weight:700;padding:11px 20px;cursor:pointer;white-space:nowrap}
.ha-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ha-hero-chips a{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink2)}
.ha-hero-chips a:hover{border-color:var(--gold);color:var(--brand)}

/* 홈 인트로 밴드 */
.tk-home-intro{padding:26px 0 6px}
.tk-home-intro h1{display:none} /* 히어로에 h1 있음 */
.tk-home-intro p{color:var(--ink2);line-height:1.75;font-size:14.5px;max-width:820px}

/* 섹션 — 넉넉한 여백·얇은 하단라인 헤더 */
.tk-sec{padding:34px 0}
.tk-band{background:var(--wash)}
.tk-sec-hd{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:18px;align-items:baseline}
.tk-sec-hd h2{font-size:20px;font-weight:800;letter-spacing:-.02em;padding-left:0;color:var(--brand-d)}
.tk-sec-hd h2::before{display:none}
.tk-sec-hd .tk-more{color:var(--gold-d);font-weight:600}
.tk-sec-sub{color:var(--mut)}

/* ★매장 카드 — masshouse식 텍스트 그리드(사진 없음·샤프·플랫·3열) */
.tk-scards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:none}
.tk-scard{border-bottom:0}
.tk-scard>a{display:block;border:1px solid var(--line);border-radius:var(--r-s);padding:16px;box-shadow:none;background:#fff;transition:border-color .15s,box-shadow .15s}
.tk-scard>a::before{display:none}
.tk-scard>a:hover{border-color:var(--brand);box-shadow:var(--sh-3)}
.tk-scard-th{display:none}
.tk-scard-b{display:block;min-width:0}
.tk-scard-area{display:inline-block;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:11.5px;padding:2px 8px;border-radius:var(--r-s);margin-bottom:8px}
.tk-scard-t{display:block;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.tk-scard-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.tk-scard-tags i{background:var(--wash);color:var(--ink2);border:1px solid var(--line2);border-radius:var(--r-s);padding:2px 7px;font-size:11px}
.tk-scard-meta{display:block;color:var(--mut);font-size:12.5px;margin-top:2px}
.tk-scard-rate{display:block;color:var(--gold-d);margin-top:4px}

/* 업종 — 클린 심플 아이콘 그리드(작게) */
.tk-cats .tk-cats-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;border:0}
.tk-cats-row li a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;border:1px solid var(--line);border-radius:var(--r-s)}
.tk-cats-row li a:hover{border-color:var(--gold)}
.tk-cats-row .tk-cat-ico{width:26px;height:26px;background:transparent;color:var(--brand);box-shadow:none}
.tk-cats-row .tk-cat-sub{display:block;color:var(--mut);font-size:11px}
.tk-cats-row .tk-cat-lb{font-weight:700;font-size:14px}

/* 지역 — 클린 텍스트 박스 그리드 */
.tk-regions{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.tk-regions a{border:1px solid var(--line);border-radius:var(--r-s);justify-content:center;padding:12px 6px;background:#fff;font-weight:600;color:var(--ink2)}
.tk-regions a:hover{border-color:var(--gold);color:var(--brand);background:#fff}

/* 버튼 */
.tk-btn{border-radius:var(--r-s);background:var(--brand);color:#fff;border:0;font-weight:700}
.tk-btn:hover{background:var(--brand-d)}
.tk-btn-line{background:#fff;border:1.5px solid var(--brand);color:var(--brand)}

/* 롱테일 — 텍스트 인덱스(지역 출장마사지 앞, 업종 뒤 muted) */
.tk-lt-grid{grid-template-columns:repeat(3,1fr);gap:8px}
.tk-lt-grid a{border:1px solid var(--line);border-radius:var(--r-s);display:flex;align-items:center;gap:8px;padding:12px 14px;box-shadow:none}
.tk-lt-grid a:hover{border-color:var(--gold);transform:none;box-shadow:none}
.tk-lt-gu{order:2;color:var(--mut);font-weight:500;margin-left:auto;white-space:nowrap}

/* 혜택·기획전 타일 — 플랫 네이비 */
.ha-tile{aspect-ratio:4/3;width:100%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.ha-tile .tk-i{width:40px;height:40px}
.ha-ptile{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:var(--brand)}
.ha-ptile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,16,32,.35))}
.ha-ptile .tk-i{width:44px;height:44px;position:relative;z-index:1;color:var(--gold)}
.ha-pg0,.ha-pg2,.ha-pg4{background:#1F2E4D}
.ha-pg1,.ha-pg3,.ha-pg5{background:#263861}

/* 추천 레일 카드도 플랫 */
.tk-card{border:1px solid var(--line);border-radius:var(--r-s);box-shadow:none}
.tk-card:hover{box-shadow:var(--sh-3);border-color:var(--brand)}

/* 반응형 */
@media(max-width:900px){.tk-scards{grid-template-columns:repeat(2,1fr)}.tk-cats .tk-cats-row,.tk-regions{grid-template-columns:repeat(3,1fr)}.tk-lt-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tk-scards{grid-template-columns:1fr}.tk-cats .tk-cats-row,.tk-regions{grid-template-columns:repeat(2,1fr)}.ha-hero-search{flex-wrap:wrap;padding:10px}.ha-hero-search button{width:100%;justify-content:center}}

/* ★히어로 재구성 — 지역 브라우저(시·도 버튼 그리드 주인공, 검색 보조) */
.ha-hero{background:var(--wash);border-bottom:1px solid var(--line);padding:36px 0}
.ha-hero-in{max-width:1180px;margin:0 auto;padding:0 18px;display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center}
.ha-hero-lead{min-width:0}
.ha-hero-h{font-size:clamp(22px,3.2vw,31px);line-height:1.32}
.ha-hero-sub{font-size:14px}
.ha-hero-mini{display:flex;gap:6px;max-width:400px;background:#fff;border:1.5px solid var(--brand);border-radius:var(--r-s);padding:4px 4px 4px 14px}
.ha-hero-mini input{flex:1;min-width:0;border:0;outline:0;font-size:14px;background:transparent}
.ha-hero-mini button{border:0;border-radius:var(--r-s);background:var(--brand);color:#fff;padding:9px 13px;cursor:pointer;display:grid;place-items:center}
.ha-hero-mini button .tk-i{width:18px;height:18px}
.ha-regnav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ha-regnav a{border:1px solid var(--line);background:#fff;border-radius:var(--r-s);padding:14px 6px;text-align:center;font-weight:700;font-size:14px;color:var(--brand);transition:border-color .15s,background .15s,color .15s}
.ha-regnav a:hover{border-color:var(--brand);background:var(--brand);color:#fff}
@media(max-width:820px){.ha-hero-in{grid-template-columns:1fr;gap:22px}}
@media(max-width:560px){.ha-regnav{grid-template-columns:repeat(3,1fr)}}

/* ★타일 채움 — 진한 네이비 그라디언트 + 큰 골드 아이콘(비어보임 해결) */
.ha-tile{aspect-ratio:16/10;background:linear-gradient(135deg,#33477A 0%,#1F2E4D 100%);color:var(--gold)}
.ha-tile .tk-i{width:54px;height:54px;opacity:.95;stroke-width:1.4}
.tk-bene-img .tk-badge{background:var(--gold);color:#1F2E4D;font-weight:800}
.ha-ptile{background:linear-gradient(135deg,#33477A,#141E38)}
.ha-ptile .tk-i{width:52px;height:52px}