/* ═══════════════════════════════════════════════════════════════
   안마킹(anmaking.com) 디자인 시스템 — am.css
   kt.css 다음에 로드되는 재정의 레이어.

   ★이 파일의 존재 이유
     이 사이트는 koreatherapy.xyz 의 코드를 토대로 만들었다. 코드를 공유하는
     사이트가 화면까지 같으면 검색엔진에는 '같은 템플릿을 지역만 바꿔 찍어낸
     사이트'로 읽힌다(도어웨이·중복 신호). 그래서 골격(DOM)과 색 체계를
     의도적으로 전부 다르게 만든다.

     - koreatherapy : 쿨 블루그레이 배경 · 3층 헤더(유틸/로고/메뉴) · 좌측 사이드바 2단
                      · 블루(#3a8afd)+핑크(#ff006c) · 둥근 카드(12~16px)
     - 안마킹        : 웜 아이보리 배경 · 1층 스티키 다크 헤더 · 사이드바 없는 전폭 1단
                      · 골드(#e07b1f)+딥네이비(#131d33) · 각진 카드(4px)+좌측 골드 액센트

   ★구조 규칙: 본문 컬럼은 `.kt-main` 클래스를 유지한다.
     게시판 스킨·업소 카드 등 내부 컴포넌트 CSS 가 `.kt-main` 하위 선택자를
     쓰고 있어서, 이 클래스를 없애면 게시판이 통째로 무너진다.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* 팔레트 재정의 — kt.css 의 토큰을 그대로 덮어쓰면 내부 컴포넌트까지 한 번에 갈아입는다 */
  --kt-primary:   #c2610f;   /* 본문 위 링크·강조 (골드를 텍스트 대비 맞춰 어둡게) */
  --kt-primary-d: #9a4c0a;
  --kt-accent:    #1d6b5f;   /* 보조 강조 — 딥 그린 */
  --kt-ink:       #17202e;
  --kt-ink2:      #40495a;
  --kt-mute:      #7b8494;
  --kt-line:      #e6e1d8;
  --kt-soft:      #f4f1ea;

  /* 안마킹 고유 토큰 */
  --am-navy:      #131d33;
  --am-navy-2:    #0b1424;
  --am-navy-3:    #1e2b47;
  --am-gold:      #e07b1f;
  --am-gold-2:    #f59b3c;
  --am-gold-soft: #fbf0e2;
  --am-paper:     #f7f5f1;
  --am-card:      #ffffff;
  --am-line:      #e6e1d8;
  --am-radius:    4px;
  --am-wrap:      1240px;
}

/* ── 페이지 바탕 ─────────────────────────────────────────────
   쿨그레이(#f3f5f9) → 웜 아이보리. 첫인상에서 가장 크게 갈리는 한 줄. */
body {
  background: var(--am-paper);
  color: var(--kt-ink);
  font-family: 'Pretendard', 'Malgun Gothic', dotum, sans-serif;
}

/* 그누보드 기본 골격 무력화(kt.css 와 동일 목적, 새 DOM 기준으로 재선언) */
#wrapper, #container_wr { width: auto; max-width: none; margin: 0; padding: 0; background: none; }
/* ★float 해제가 핵심 — 그누보드 default.css 의 `#container{float:left;width:930px}` 가 남아 있으면
     조상인 <main> 이 높이를 잃고, 뒤따르는 푸터·지역 밴드가 플로트 옆 좁은 틈으로 흘러들어간다.
     (kt.css 는 width 만 풀고 float 는 그대로 둬서 사이드바 그리드 안에서만 우연히 멀쩡했다) */
#container { float: none; width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; }
.am-page, .am-page .kt-main { display: flow-root; }   /* 내부 플로트를 스스로 감싼다 */
#container_title, #aside, #hd, #ft { display: none; }

.am-in { width: 100%; max-width: var(--am-wrap); margin: 0 auto; padding: 0 16px; }

/* ═══ 헤더 — 1층 스티키 다크바 ═══════════════════════════════
   koreatherapy 는 유틸바/로고줄/메뉴바 3층이라 상단이 150px 넘게 잡아먹는다.
   여기서는 로고·내비·CTA 를 한 줄에 넣고 스크롤에 붙여 둔다. */
.am-hd {
  position: sticky; top: 0; z-index: 900;
  background: var(--am-navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.am-hd-in {
  display: flex; align-items: center; gap: 22px;
  height: 68px;
  width: 100%; max-width: var(--am-wrap); margin: 0 auto; padding: 0 16px;
}

.am-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.am-brand img { height: 38px; width: auto; display: block; }
.am-brand .am-bt { display: flex; flex-direction: column; line-height: 1.15; }
.am-brand .am-bt b { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.am-brand .am-bt em {
  font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--am-gold-2);
}

/* 내비 — 밑줄 대신 골드 상단 마커. koreatherapy 는 가운데서 펼쳐지는 하단 언더라인이다. */
.am-nav { display: flex; align-items: center; gap: 2px; margin-left: 6px; flex: 1 1 auto; }
.am-nav a {
  position: relative; display: inline-flex; align-items: center; height: 68px; padding: 0 14px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.02em; color: #c3ccdd;
  transition: color .15s;
}
.am-nav a:before {
  content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 3px;
  background: var(--am-gold); transform: scaleX(0); transform-origin: center;
  transition: transform .18s ease;
}
.am-nav a:hover { color: #fff; }
.am-nav a.on { color: #fff; font-weight: 700; }
.am-nav a.on:before, .am-nav a:hover:before { transform: scaleX(1); }

.am-hd-act { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.am-tel { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.am-tel em { font-style: normal; font-size: 10.5px; font-weight: 600; color: #8b97ac; }
.am-tel strong { font-size: 15.5px; font-weight: 800; color: var(--am-gold-2); letter-spacing: -.02em; }
.am-cta {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border-radius: var(--am-radius);
  background: var(--am-gold); color: #1a0f04;
  font-size: 13.5px; font-weight: 800; letter-spacing: -.02em;
  transition: background .15s, transform .15s;
}
.am-cta:hover { background: var(--am-gold-2); transform: translateY(-1px); }

.am-burger {
  display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer;
  color: #fff; font-size: 20px; line-height: 1;
}

/* ── 지역 띠 — 사이드바에 있던 시도 목록을 헤더 아래 가로 띠로 옮겼다.
      좌측 사이드바를 없앤 대신 어느 페이지에서나 지역 이동이 1클릭이 된다. */
.am-geobar { background: var(--am-navy-3); border-bottom: 1px solid rgba(255,255,255,.07); }
.am-geobar .am-in { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-top: 9px; padding-bottom: 9px; }
.am-geobar .am-in::-webkit-scrollbar { height: 0; }
.am-geobar b {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--am-gold-2);
  letter-spacing: .04em; padding-right: 6px;
}
.am-geobar a {
  flex: 0 0 auto; padding: 5px 11px; border-radius: 2px;
  font-size: 13px; font-weight: 600; letter-spacing: -.02em; color: #b9c3d6;
  border: 1px solid transparent;
}
.am-geobar a:hover, .am-geobar a.on { color: #fff; background: rgba(224,123,31,.20); border-color: rgba(224,123,31,.5); }

/* ═══ 본문 — 사이드바 없는 전폭 1단 ═══ */
.am-page { padding: 26px 0 56px; }
.am-page .kt-main { width: 100%; }

/* ═══ 홈 ═══════════════════════════════════════════════════════
   koreatherapy 홈은 '가운데 정렬 히어로 + 칩 나열'이다.
   여기서는 좌우 2분할(카피 / 안내 카드)로 완전히 다른 구성을 쓴다. */
.am-hero {
  position: relative; overflow: hidden;
  border-radius: var(--am-radius);
  background:
    radial-gradient(760px 300px at 92% -30%, rgba(224,123,31,.28), transparent 60%),
    linear-gradient(160deg, #1a2540 0%, #0b1424 100%);
  color: #fff;
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  gap: 28px; padding: 40px 36px;
}
.am-hero:before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--am-gold), transparent);
}
.am-hero .am-kicker {
  display: inline-block; margin-bottom: 14px; padding: 5px 10px;
  border: 1px solid rgba(224,123,31,.55); border-radius: 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--am-gold-2);
}
.am-hero h1 { font-size: 33px; font-weight: 800; letter-spacing: -.045em; line-height: 1.28; color: #fff; }
.am-hero h1 span { color: var(--am-gold-2); }
.am-hero > div > p { margin-top: 14px; font-size: 15px; line-height: 1.8; color: #aab6cd; max-width: 40rem; }
.am-hero-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.am-hero-tags a {
  padding: 7px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 2px;
  font-size: 13px; font-weight: 600; color: #dbe3f2; background: rgba(255,255,255,.05);
  transition: border-color .15s, background .15s, color .15s;
}
.am-hero-tags a:hover { color: #fff; border-color: var(--am-gold); background: rgba(224,123,31,.18); }

.am-hero-card {
  align-self: start;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--am-radius);
  background: rgba(255,255,255,.05); padding: 22px;
}
.am-hero-card h2 { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.am-hero-card ul { margin-top: 14px; display: flex; flex-direction: column; gap: 11px; }
.am-hero-card li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.65; color: #b6c1d6; }
.am-hero-card li i {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; border-radius: 2px;
  background: rgba(224,123,31,.22); color: var(--am-gold-2);
  font-style: normal; font-size: 10.5px; font-weight: 800; text-align: center; line-height: 17px;
}
.am-hero-card .am-hc-tel {
  display: block; margin-top: 18px; padding: 12px; border-radius: var(--am-radius);
  background: var(--am-gold); color: #1a0f04; text-align: center;
  font-size: 15px; font-weight: 800; letter-spacing: -.02em;
}
.am-hero-card .am-hc-tel em { display: block; font-style: normal; font-size: 11px; font-weight: 700; opacity: .75; }

@media (max-width: 960px) {
  .am-hero { grid-template-columns: 1fr; padding: 30px 22px; gap: 22px; }
  .am-hero h1 { font-size: 25px; }
}

/* 홈 섹션 스택 */
.am-stack { display: flex; flex-direction: column; gap: 34px; }

/* ═══ 섹션 타이틀 — 좌측 3px 바(koreatherapy) → 상단 골드 룰 + 대문자 라벨 ═══ */
.kt-sectitle, .am-sect > h2 {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px;
  padding-top: 12px; border-top: 2px solid var(--am-navy);
  font-size: 19px; font-weight: 800; letter-spacing: -.035em; color: var(--kt-ink);
}
.kt-sectitle:before { display: none; }        /* 기존 좌측 바 제거 */
.am-sect > h2 .am-en {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--am-gold);
}
.kt-sectitle .kt-morelink, .am-sect > h2 .kt-morelink { margin-left: auto; }
.kt-morelink { font-size: 13px; font-weight: 700; color: var(--kt-primary); }

/* ═══ 카드·패널 — 둥근 흰 카드 → 각진 카드 + 좌측 골드 액센트 ═══ */
.kt-panel, .am-card {
  border: 1px solid var(--am-line); border-radius: var(--am-radius);
  background: var(--am-card); box-shadow: none; overflow: hidden;
}
.kt-panel > h3 {
  height: 48px; padding: 0 18px; border-bottom: 1px solid var(--am-line);
  font-size: 14.5px; font-weight: 800; letter-spacing: -.03em;
}
.kt-empty {
  padding: 46px 18px; border: 1px dashed var(--am-line); border-radius: var(--am-radius);
  background: #fdfcfa; color: #9aa2b0; font-size: 14px;
}
.kt-hubgrid a {
  height: 46px; border: 1px solid var(--am-line); border-radius: var(--am-radius);
  background: var(--am-card); color: var(--kt-ink2); font-weight: 700;
}
.kt-hubgrid a:hover, .kt-hubgrid a.on {
  border-color: var(--am-gold); color: var(--kt-primary); background: var(--am-gold-soft);
}
.kt-hubnote { border-radius: var(--am-radius); background: #fbf9f5; border-color: var(--am-line); }
.kt-pagehead h1 { font-size: 27px; letter-spacing: -.045em; }
.kt-pagehead { padding-bottom: 14px; border-bottom: 2px solid var(--am-navy); margin-bottom: 18px; }

/* 업소 카드 — 라운드/그림자 축소, 호버 시 골드 라인 */
.kt-shopcard, .kt-card, .kt-shop-card {
  border-radius: var(--am-radius) !important;
  box-shadow: none !important;
  border-color: var(--am-line) !important;
}
.kt-shopcard:hover, .kt-card:hover, .kt-shop-card:hover {
  border-color: var(--am-gold) !important;
  box-shadow: 0 6px 18px -12px rgba(19,29,51,.5) !important;
}

/* 매거진 카드 */
.kt-magcard { border-radius: var(--am-radius) !important; box-shadow: none !important; }
.kt-magcard:hover { border-color: var(--am-gold) !important; }

/* ═══ 하단 지역 인덱스 밴드 — 푸터 바로 위 ═══
   사이드바를 없앤 대신 여기서 지역·프로그램 내부링크를 회수한다. */
.am-index { background: #efeae0; border-top: 1px solid var(--am-line); padding: 34px 0; }
.am-index h2 { font-size: 14px; font-weight: 800; letter-spacing: -.03em; color: var(--kt-ink); margin-bottom: 14px; }
.am-index h2 em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--am-gold); margin-left: 8px; }
.am-index-grid { display: grid; grid-template-columns: repeat(9, minmax(0,1fr)); gap: 7px; }
.am-index-grid a {
  display: flex; align-items: center; justify-content: center; height: 40px;
  border: 1px solid var(--am-line); border-radius: 2px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--kt-ink2);
}
.am-index-grid a:hover { border-color: var(--am-gold); color: var(--kt-primary); background: var(--am-gold-soft); }
@media (max-width: 900px) { .am-index-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (max-width: 520px) { .am-index-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ═══ 푸터 — 5열 사일로(koreatherapy) → 2열 + 하단 법적고지 블록 ═══ */
.am-ft { background: var(--am-navy-2); color: #8e99ad; padding: 40px 0 30px; }
.am-ft-top { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1.9fr); gap: 34px; }
.am-ft-brand a.am-ft-logo { display: inline-block; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.04em; }
.am-ft-brand a.am-ft-logo em { font-style: normal; color: var(--am-gold-2); }
.am-ft-brand p { margin-top: 12px; font-size: 13px; line-height: 1.85; color: #7d879a; max-width: 34rem; }
.am-ft-brand .am-ft-tel {
  display: inline-block; margin-top: 16px; padding: 10px 16px; border-radius: var(--am-radius);
  border: 1px solid rgba(224,123,31,.45); color: var(--am-gold-2); font-size: 14px; font-weight: 800;
}
.am-ft-navs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.am-ft-navs h3 { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--am-gold); margin-bottom: 12px; }
.am-ft-navs ul { display: flex; flex-direction: column; gap: 9px; }
.am-ft-navs a { font-size: 13px; color: #8e99ad; }
.am-ft-navs a:hover { color: #fff; }
.am-ft-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.09); }
.am-ft-org { display: flex; flex-wrap: wrap; gap: 6px 18px; font-style: normal; font-size: 12px; color: #79839a; }
.am-ft-org b { font-weight: 700; color: #98a3b8; }
.am-ft-note { margin-top: 14px; font-size: 12px; line-height: 1.85; color: #6b7488; max-width: 62rem; }
.am-ft-copy { margin-top: 12px; font-size: 11.5px; color: #5d6679; }
@media (max-width: 860px) {
  .am-ft-top { grid-template-columns: 1fr; gap: 26px; }
  .am-ft-navs { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ═══ 모바일 ═══ */
.am-fab { display: none; }
@media (max-width: 1080px) {
  .am-nav { display: none; position: absolute; left: 0; right: 0; top: 68px;
            flex-direction: column; align-items: stretch; gap: 0;
            background: var(--am-navy); border-bottom: 1px solid rgba(255,255,255,.1); padding: 6px 0; }
  .am-nav.open { display: flex; }
  .am-nav a { height: 46px; padding: 0 20px; }
  .am-nav a:before { display: none; }
  .am-burger { display: block; order: 9; }
  .am-hd-in { gap: 12px; }
  .am-tel { display: none; }
}
@media (max-width: 720px) {
  .am-hd-in { height: 60px; }
  .am-nav { top: 60px; }
  .am-brand img { height: 32px; }
  .am-brand .am-bt b { font-size: 15px; }
  .am-cta { display: none; }
  .am-page { padding: 18px 0 84px; }

  /* 하단 고정 전화 바 — 모바일에서 전환 경로를 하나로 고정한다 */
  .am-fab {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    background: var(--am-navy); border-top: 1px solid rgba(255,255,255,.12);
  }
  .am-fab a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px;
              height: 54px; font-size: 14px; font-weight: 700; color: #cbd4e4; }
  .am-fab a.pri { background: var(--am-gold); color: #1a0f04; font-weight: 800; }
}

/* ── 정보 문서(약관·소개·정책) 타이포 ──
   ★한 줄 길이를 46rem 으로 묶는다. 전폭으로 뽑으면 한 줄에 한글 70자가 넘어가 읽히지 않는다. */
.kt-main .ctt_txt, .kt-main #bo_v_con, .am-doc { max-width: 46rem; }
.kt-main .ctt_txt p, .kt-main #bo_v_con p { line-height: 1.9; }

.am-doc { font-size: 15px; line-height: 1.9; color: var(--kt-ink2); padding-bottom: 8px; }
.am-doc h2 {
  margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--am-navy);
  font-size: 23px; font-weight: 800; letter-spacing: -.04em; color: var(--kt-ink);
}
.am-doc h3 {
  margin: 30px 0 10px; padding-left: 11px; border-left: 3px solid var(--am-gold);
  font-size: 16.5px; font-weight: 800; letter-spacing: -.03em; color: var(--kt-ink);
}
.am-doc p { margin: 0 0 12px; }
.am-doc ul, .am-doc ol { margin: 0 0 14px; padding-left: 2px; list-style: none; }
.am-doc ol { counter-reset: amdoc; }
.am-doc li { position: relative; padding-left: 17px; margin-bottom: 7px; }
.am-doc ul > li:before {
  content: ''; position: absolute; left: 2px; top: 12px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--am-gold);
}
.am-doc ol > li { counter-increment: amdoc; padding-left: 24px; }
.am-doc ol > li:before {
  content: counter(amdoc); position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 2px; background: var(--am-navy); color: #fff;
  font-size: 11px; font-weight: 800; text-align: center; line-height: 18px;
}
.am-doc b { color: var(--kt-ink); font-weight: 700; }
.am-doc a { color: var(--kt-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.am-doc-date {
  margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--am-line);
  font-size: 13px; color: var(--kt-mute);
}
@media (max-width: 640px) {
  .am-doc { font-size: 14.5px; }
  .am-doc h2 { font-size: 20px; }
  .am-doc h3 { font-size: 15.5px; }
}