/*
 * TASK:T1335 — /kakao/ 오픈채팅 커뮤니티 랜딩 전용.
 * 색·간격·타이포는 전부 style.css 의 토큰(--bg/--paper/--gold/--pad/--max ...)을 쓰고,
 * 카카오 브랜드 노랑(#fee500)만 이 파일에서 변수로 한 번 정의한다 — style.css 의
 * .mah-contact-cta 가 이미 쓰던 값과 같은 값이며, 두 곳이 갈라지지 않게 여기서도 같은
 * 리터럴을 쓴다(토큰화는 전역 tokens 소유권 밖이라 하지 않음).
 */
.mah-kakao{--kakao:#fee500;--kakao-hover:#f5dc00;--kakao-ink:#191919}

/* ── 히어로 ─────────────────────────────────────────── */
.mah-kakao-hero{position:relative;padding:calc(var(--header) + 90px) var(--pad) 110px;background:radial-gradient(120% 90% at 12% 0,rgba(254,229,0,.10),transparent 58%),var(--bg)}
.mah-kakao-hero-inner{width:min(100%,var(--max));margin:0 auto}
/* TASK:T1335 보충2 — 제목이 다시 짧아졌다(긴 줄 21자). 1440px 에서 3.8vw=54.7px × 21자 ≈
   1150px 로 max-width 1240px 안에 들어온다. 하한 30px 은 섹션 h2 하한(25px)보다 커야
   모바일에서도 위계가 유지되기 때문 — 두 값은 함께 움직인다. */
.mah-kakao-hero h1{max-width:1240px;margin:16px 0 24px;font-size:clamp(30px,3.8vw,56px);line-height:1.24;letter-spacing:-.045em;word-break:keep-all}
.mah-kakao-hero h1 span{color:var(--kakao)}
.mah-kakao-hero-intro{max-width:700px;margin:0;color:#b5c7d6;font-size:clamp(15px,1.5vw,20px);line-height:1.85;word-break:keep-all}
.mah-kakao-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.mah-kakao-hero-note{margin:20px 0 0;color:#748da2;font-size:var(--mah-text-small,14px)}

/* 카카오 CTA — .button 의 크기 규격(min-height 52px)을 따르되 브랜드 색을 쓴다. */
.mah-kakao-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 32px;border-radius:999px;background:var(--kakao);color:var(--kakao-ink);font-size:16px;font-weight:900;transition:transform .25s var(--ease),background .25s}
.mah-kakao-cta:hover{background:var(--kakao-hover);transform:translateY(-2px)}
.mah-kakao-cta-icon{display:inline-flex;font-size:22px;line-height:1}

/* ── 공통 섹션 래퍼 ──────────────────────────────────── */
.mah-kakao-inner{width:min(100%,var(--max));margin:0 auto}
/* TASK:T1335 보충 — 교체된 h1 이 한 문장이라 더 키울 수 없다. 섹션 h2 가 h1 보다 커지면
   위계가 뒤집혀 보이므로(실측: h1 43px vs h2 60px) h2 상한을 h1 아래로 내린다. */
.mah-kakao section>.mah-kakao-inner>h2{margin:14px 0 48px;font-size:clamp(25px,3vw,46px);line-height:1.12;letter-spacing:-.05em;word-break:keep-all}

/* ── 02 주제 카드 ───────────────────────────────────── */
.mah-kakao-topics{padding:120px var(--pad);background:#07121d}
.mah-kakao-topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mah-kakao-topic{padding:30px 26px 34px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.025)}
.mah-kakao-topic-no{color:#5e7487;font-size:var(--mah-text-small,14px);font-weight:900;letter-spacing:.14em}
.mah-kakao-topic h3{margin:16px 0 12px;font-size:22px;line-height:1.3;letter-spacing:-.035em;word-break:keep-all}
.mah-kakao-topic p{margin:0;color:#879bad;font-size:15px;line-height:1.8;word-break:keep-all}

/* ── 03 참여 단계 ───────────────────────────────────── */
.mah-kakao-steps{padding:120px var(--pad);background:var(--paper);color:#0a151e}
.mah-kakao-steps .eyebrow{color:var(--blue-on-paper)}
.mah-kakao-step-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0;list-style:none;counter-reset:none}
.mah-kakao-step-list li{padding:32px 28px;border-top:2px solid var(--kakao);background:#f2f4f2;border-radius:0 0 18px 18px}
.mah-kakao-step-label{color:#6f8088;font-size:var(--mah-text-small,14px);font-weight:900;letter-spacing:.14em}
.mah-kakao-step-list h3{margin:14px 0 10px;font-size:24px;letter-spacing:-.04em;word-break:keep-all}
.mah-kakao-step-list p{margin:0;color:#56696f;font-size:15px;line-height:1.82;word-break:keep-all}

/* ── 04 규칙 ────────────────────────────────────────── */
.mah-kakao-rules{padding:120px var(--pad);background:#07121d}
.mah-kakao-rule-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.mah-kakao-rule-list li{display:grid;grid-template-columns:96px 1fr;gap:26px;align-items:start;padding:26px 0;border-bottom:1px solid var(--line)}
.mah-kakao-rule-tag{display:inline-grid;place-items:center;min-height:30px;padding:0 14px;border-radius:999px;font-size:var(--mah-text-small,14px);font-weight:900}
.mah-kakao-rule-list .is-do .mah-kakao-rule-tag{background:rgba(98,226,194,.14);color:var(--mint)}
.mah-kakao-rule-list .is-dont .mah-kakao-rule-tag{background:rgba(255,120,120,.14);color:#ff9a9a}
.mah-kakao-rule-list h3{margin:0 0 8px;font-size:20px;letter-spacing:-.035em;word-break:keep-all}
.mah-kakao-rule-list p{margin:0;color:#879bad;font-size:15px;line-height:1.8;word-break:keep-all}

/* ── 05 비교표 ──────────────────────────────────────── */
.mah-kakao-compare{padding:120px var(--pad);background:var(--paper2);color:#0a151e}
.mah-kakao-compare .eyebrow{color:var(--blue-on-paper)}
.mah-kakao-table-scroll{overflow-x:auto}
.mah-kakao-table{width:100%;min-width:600px;border-collapse:collapse;font-size:15px}
.mah-kakao-table th,.mah-kakao-table td{padding:16px 18px;border:1px solid #d8dede;text-align:left;vertical-align:top;word-break:keep-all}
.mah-kakao-table thead th{background:#eceeea;font-weight:900}
.mah-kakao-table tbody th{width:120px;color:#4b5f6a;font-weight:800}
.mah-kakao-table td{color:#56696f}
.mah-kakao-compare-note{margin:26px 0 0;color:#56696f;font-size:15px;line-height:1.85;word-break:keep-all}
.mah-kakao-compare-note a{color:#0a6cad;text-decoration:underline}

/* ── 06 FAQ ─────────────────────────────────────────── */
.mah-kakao-faq{padding:120px var(--pad);background:#07121d}
.mah-kakao-faq-list{border-top:1px solid var(--line)}
.mah-kakao-faq-list details{border-bottom:1px solid var(--line)}
.mah-kakao-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;font-size:clamp(17px,1.8vw,21px);font-weight:800;letter-spacing:-.03em;cursor:pointer;list-style:none;word-break:keep-all}
.mah-kakao-faq-list summary::-webkit-details-marker{display:none}
.mah-kakao-faq-list summary::after{content:"+";flex:none;color:var(--kakao);font-size:26px;font-weight:400;line-height:1;transition:transform .25s var(--ease)}
.mah-kakao-faq-list details[open] summary::after{transform:rotate(45deg)}
.mah-kakao-faq-list p{margin:0 0 26px;max-width:860px;color:#879bad;font-size:15px;line-height:1.85;word-break:keep-all}

/* ── 07 최종 CTA ────────────────────────────────────── */
.mah-kakao-final{padding:130px var(--pad);text-align:center;background:radial-gradient(90% 120% at 50% 0,rgba(254,229,0,.10),transparent 62%),var(--bg)}
/* 제목 크기·자간은 위의 공용 섹션 h2 규칙이 이미 잡는다(더 높은 명시도라 여기서 다시
   선언해도 적용되지 않는 죽은 코드가 된다 — 실측 확인). 간격만 덮어쓴다. */
.mah-kakao section.mah-kakao-final>.mah-kakao-inner>h2{margin:0 0 14px}
.mah-kakao-final p{margin:0 0 34px;color:#879bad;font-size:16px}

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width:1180px){
  .mah-kakao-topic-grid{grid-template-columns:repeat(2,1fr)}
  .mah-kakao-step-list{grid-template-columns:1fr}
}
@media (max-width:760px){
  .mah-kakao-hero{padding:calc(var(--header) + 60px) var(--pad) 80px}
  .mah-kakao-topics,.mah-kakao-steps,.mah-kakao-rules,.mah-kakao-compare,.mah-kakao-faq,.mah-kakao-final{padding:80px var(--pad)}
  .mah-kakao-topic-grid{grid-template-columns:1fr}
  .mah-kakao-rule-list li{grid-template-columns:1fr;gap:12px}
  .mah-kakao-cta{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .mah-kakao-cta,.mah-kakao-faq-list summary::after{transition:none}
  .mah-kakao-cta:hover{transform:none}
}