/* ============================================================
   메인 홈(index.php) 전용 — 보험상담 커뮤니티 레이아웃
   다른 페이지 스타일과 충돌하지 않도록 #mk_home 안에서만, mk_ 접두사 클래스만 사용.
   다크모드: html[data-theme="dark"] #mk_home 블록에서 --mk-* 변수를 재정의해 대응함
   (아래 #mk_home{} 바로 다음 블록 참고). 새 색상을 추가할 때 하드코딩 hex 대신
   변수를 쓰면 자동으로 다크모드도 따라간다 — 부득이하게 hex를 직접 써야 하면
   같은 자리에 html[data-theme="dark"] #mk_home .선택자 재정의를 같이 추가할 것.
   ============================================================ */

#mk_home{
  --mk-navy:#10293B;
  --mk-navy-soft:#1C3D54;
  --mk-mint:#1BA37A;
  --mk-mint-soft:#E4F4EE;
  --mk-mint-deep:#0E7857;
  --mk-cream:#fff;
  --mk-paper:#FFFFFF;
  --mk-ink:#1B1B18;
  --mk-ink-soft:#5B5B55;
  --mk-ink-faint:#9C9C93;
  --mk-line:#E4E1D6;
  --mk-ad:#EFEDE3;
  --mk-ad-line:#C9C6B8;

  background:var(--mk-cream);
  color:var(--mk-ink);
  font-family:'Noto Sans KR', system-ui, sans-serif;
  line-height:1.6;
  margin:-24px 0;
  padding:24px 0;
}

/* 다크모드 대응 — html[data-theme="dark"]일 때 위 #mk_home 로컬 변수를 어두운 팔레트로
   재정의한다. default.css의 --portal-bg/--portal-surface/--portal-text 다크 팔레트와
   톤을 맞췄다. --mk-navy/--mk-mint 자체는 그대로 두되(히어로 배너/버튼처럼 "배경"으로
   쓰이는 곳은 원래도 진한 색 위에 흰 글자라 다크모드에서도 문제없음), --mk-navy를
   "글자색"으로 쓰는 곳(섹션 제목 "HOT 인기글"/"최근 상담후기"/게시판명, 통계 숫자,
   아웃라인 버튼 글자 등)은 카드 배경이 어두워지면 어두운 남색 글자가 안 보이게 되므로
   아래에서 --mk-ink(다크에서 밝은색)로 따로 재정의한다. */
html[data-theme="dark"] #mk_home{
  --mk-mint-soft:rgba(27,163,122,.16);
  --mk-cream:#16181d;
  --mk-paper:#1e2128;
  --mk-ink:#e8e9ec;
  --mk-ink-soft:#9498a2;
  --mk-ink-faint:#767a84;
  --mk-line:#34373f;
  --mk-ad:#23262e;
  --mk-ad-line:#3a3d45;
}
/* 변수로 못 뺀 하드코딩 색상 — 흰 배경을 가정하고 있어 다크에서 따로 재정의해야 함 */
html[data-theme="dark"] #mk_home .mk_ic_upload_btn{ background:var(--mk-paper); color:#aaa; }
html[data-theme="dark"] #mk_home .mk_login_card .mk_btn_outline{ background:var(--mk-paper); }
html[data-theme="dark"] #mk_home .mk_badge.mk_status_wait{ background:rgba(251,239,224,.15); color:#e0b262; }
html[data-theme="dark"] #mk_home .mk_badge.mk_status_done{ background:rgba(234,243,227,.15); color:#8fc26a; }
/* --mk-navy를 글자색으로 쓰던 곳 — 어두워진 카드 배경 위에서 안 보이던 문제 수정
   ("HOT 인기글"/"최근 상담후기" 등 섹션 제목이 다크모드에서 안 보이던 원인) */
html[data-theme="dark"] #mk_home .mk_section_title,
html[data-theme="dark"] #mk_home .mk_my_stats a:hover,
html[data-theme="dark"] #mk_home .mk_my_stats a b,
html[data-theme="dark"] #mk_home .mk_login_card .mk_btn_outline,
html[data-theme="dark"] #mk_home .mk_trust_strip .mk_item b { color: var(--mk-ink); }
html[data-theme="dark"] #mk_home .mk_login_card .mk_btn_outline:hover { border-color: var(--mk-ink); }

#mk_home h1, #mk_home h2, #mk_home h3, #mk_home .mk_serif{ font-family:'Noto Serif KR', serif; }
#mk_home a{ color:inherit; text-decoration:none; }
/* 컨설턴트 배지는 <a>(든든tok 링크)라 위 규칙에 글씨색이 덮여 배경과 같아진다 — 배지 색 복원 */
#mk_home a.pf_grade_badge.pf_grade_consultant{ color:#E7C674; }
#mk_home img, #mk_home svg{ display:block; }
#mk_home *{ box-sizing:border-box; }

/* ---------- ad slots ---------- */
#mk_home .mk_ad_slot{
  background:var(--mk-ad); border:1px dashed var(--mk-ad-line); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:var(--mk-ink-faint); font-size:11px; letter-spacing:.02em;
  padding:16px;
}
#mk_home .mk_ad_slot.mk_banner{ margin:20px 0; }
#mk_home .mk_ad_slot.mk_tall{ height:250px; }

/* ---------- hero ---------- */
#mk_home .mk_hero{ position:relative; overflow:hidden; background:var(--mk-navy); color:#fff; padding:44px 24px 36px; border-radius:10px; margin-bottom:20px; }
#mk_home .mk_hero_slider{ position:absolute; inset:0; }
#mk_home .mk_hero_slider .banner_track{ height:100%; }
#mk_home .mk_hero_slider .banner_slide{ height:100%; }
#mk_home .mk_hero_slider .banner_slide img{ width:100%; height:100%; object-fit:cover; display:block; }
#mk_home .mk_hero_overlay{
    position:absolute; inset:0;
    background:linear-gradient(100deg, rgba(16,41,59,0) 0%, rgba(16,41,59,.15) 35%, rgba(16,41,59,0) 65%);
}
#mk_home .mk_hero_inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; min-height:320px; }
#mk_home .mk_hero_actions_col{ display:flex; align-items:flex-end; height:100%; }
#mk_home .mk_hero .mk_actions{ display:flex; gap:10px; flex-wrap:wrap; }
/* 어떤 밝기의 배경 이미지 위에서도 대비가 유지되도록 pill 배경 + 그림자 */
#mk_home .mk_btn_mint{
    background:var(--mk-mint); color:#fff; border:none; padding:12px 22px; border-radius:999px;
    font-size:14px; font-weight:700; cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.35);
}
#mk_home .mk_btn_mint:hover{ background:var(--mk-mint-deep); }
#mk_home .mk_btn_ghost{
    background:rgba(16,41,59,.55); color:#fff; border:1px solid rgba(255,255,255,.6); padding:12px 22px; border-radius:999px;
    font-size:14px; font-weight:700; cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.35); backdrop-filter:blur(2px);
}
#mk_home .mk_btn_ghost:hover{ background:rgba(16,41,59,.75); }
#mk_home .mk_stat_card{ background:var(--mk-navy-soft); border-radius:12px; padding:24px; }
#mk_home .mk_stat_card .mk_stat{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:13px; }
#mk_home .mk_stat_card .mk_stat:last-child{ border-bottom:none; }
#mk_home .mk_stat_card .mk_stat b{ font-family:'Noto Serif KR',serif; font-size:20px; display:block; color:#fff; }
#mk_home .mk_stat_card .mk_stat span.mk_label{ color:#9FB3AA; }
#mk_home .mk_stat_card_prelaunch{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; height:100%; }
#mk_home .mk_prelaunch_badge{ display:inline-block; margin:0 0 10px; padding:4px 12px; border-radius:20px; background:var(--mk-mint); color:#fff; font-size:12px; font-weight:700; }
#mk_home .mk_prelaunch_text{ margin:0; color:#B9C9C1; font-size:13px; line-height:1.6; }

/* ---------- category strip (히어로 배너와 같은 화살표 슬라이더 방식) ---------- */
#mk_home .mk_categories{ position:relative; background:var(--mk-paper); border:1px solid var(--mk-line); border-radius:10px; margin-top:20px; overflow:hidden; }
#mk_home .mk_cat_viewport{ overflow:hidden; }
#mk_home .mk_cat_row{
    display:flex;
    transition:transform .35s ease;
}
/* 구분선은 gap 대신 border로 처리 — gap(고정 px)을 쓰면 % 기반 flex-basis/transform
   계산과 어긋나서 슬라이드가 넘어갈수록 폭이 누적으로 틀어지고(뒤쪽 페이지일수록
   구분선이 클리핑되어 안 보임), border는 box-sizing:border-box로 각 아이템 자기
   폭 안에 포함되니 몇 개든 정확히 정렬됨 */
#mk_home .mk_cat_item{
    box-sizing:border-box;
    background:var(--mk-paper);
    padding:18px 8px;
    text-align:center;
    cursor:pointer;
    flex:0 0 calc(100% / 6);
    border-right:1px solid var(--mk-line);
}
#mk_home .mk_cat_item:last-child{ border-right:none; }
#mk_home .mk_cat_arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:32px; height:32px; border-radius:50%; border:1px solid var(--mk-line);
    background:var(--mk-paper); color:var(--mk-ink-soft);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; cursor:pointer; z-index:2;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
    transition:opacity .15s, background .15s;
}
#mk_home .mk_cat_arrow:hover{ background:var(--mk-mint-soft); color:var(--mk-mint-deep); }
#mk_home .mk_cat_prev{ left:8px; }
#mk_home .mk_cat_next{ right:8px; }
#mk_home .mk_cat_arrow.mk_cat_arrow_hide{ opacity:0; pointer-events:none; }
#mk_home .mk_cat_item:hover{ background:var(--mk-mint-soft); }
#mk_home .mk_cat_item .mk_ic{ width:38px; height:38px; border-radius:50%; background:var(--mk-mint-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 8px; }
#mk_home .mk_cat_item .mk_ic svg{ width:18px; height:18px; stroke:var(--mk-mint-deep); }
#mk_home .mk_cat_item span{ font-size:12.5px; color:var(--mk-ink-soft); }
#mk_home .mk_cat_item.mk_active{ background:var(--mk-mint-soft); }
#mk_home .mk_cat_item.mk_active .mk_ic{ background:var(--mk-mint); }
#mk_home .mk_cat_item.mk_active .mk_ic i{ color:#fff !important; }
#mk_home .mk_cat_item.mk_active span{ color:var(--mk-mint-deep); font-weight:700; }
#mk_home .mk_cat_item .mk_ic img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
#mk_home .mk_ic_upload_btn{ position:absolute; right:-4px; bottom:-4px; width:18px; height:18px; border-radius:50%; background:#fff; border:1px solid var(--mk-line); display:flex; align-items:center; justify-content:center; font-size:9px; color:#999; cursor:pointer; }
#mk_home .mk_ic_upload_btn:hover{ color:var(--mk-mint-deep); border-color:var(--mk-mint-deep); }

/* ---------- main layout ---------- */
#mk_home .mk_layout{ display:grid; grid-template-columns:1fr 300px; gap:28px; padding:32px 0 8px; }

/* board */
/* 목록/제목이 카드 가장자리에 바로 붙어 보이던 문제 보정 — "전체 최신글" 위젯(.widget_title/.sl_item)과
   동일한 방식: 폭은 줄이지 않고(100%) 좌우 16px 여백만 통일 */
#mk_home .mk_board_head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
#mk_home .mk_board_head .mk_section_title{ padding:0 16px; }
#mk_home .mk_tag_row{ display:flex; gap:8px; margin:14px 0; flex-wrap:wrap; padding:0 16px; }
#mk_home .mk_tag{ font-size:12px; padding:5px 12px; border-radius:20px; border:1px solid var(--mk-line); color:var(--mk-ink-soft); }
#mk_home .mk_tag.mk_active{ background:var(--mk-navy); color:#fff; border-color:var(--mk-navy); }
#mk_home a.mk_tag:hover{ border-color:var(--mk-mint); color:var(--mk-mint-deep); }

#mk_home .mk_post_list{ border-top:1px solid var(--mk-line); padding:0 16px; }
#mk_home .mk_post{ display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--mk-line); }
#mk_home .mk_post .mk_badge{ font-size:11px; padding:2px 8px; border-radius:4px; font-weight:500; flex-shrink:0; }
#mk_home .mk_badge.mk_expert{ background:var(--mk-mint-soft); color:var(--mk-mint-deep); }
#mk_home .mk_badge.mk_status_wait{ background:#FBEFE0; color:#9A6B1F; }
#mk_home .mk_badge.mk_status_done{ background:#EAF3E3; color:#4C7A2E; }
#mk_home .mk_post .mk_title{ flex:1; min-width:0; font-size:14px; color:var(--mk-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mk_home .mk_post:hover .mk_title{ color:var(--mk-mint-deep); }
#mk_home .mk_post .mk_verified{ color:var(--mk-mint-deep); font-size:11px; display:inline-flex; align-items:center; gap:3px; margin-left:6px; }
#mk_home .mk_post .mk_meta{ font-size:12px; color:var(--mk-ink-faint); flex-shrink:0; }
#mk_home .mk_more_link{ display:block; text-align:right; font-size:12.5px; color:var(--mk-ink-faint); padding:12px 16px 0; }
#mk_home .mk_more_link:hover{ color:var(--mk-mint-deep); }
#mk_home .mk_empty{ padding:24px 16px; text-align:center; color:var(--mk-ink-faint); font-size:13px; }

#mk_home .mk_section_title{ font-size:16px; font-weight:700; margin:0 0 12px; padding:0 16px; color:var(--mk-navy); }
#mk_home .mk_section_gap{ margin-top:34px; }

/* sidebar */
#mk_home .mk_side_card{ background:var(--mk-paper); border:1px solid var(--mk-line); border-radius:10px; padding:18px; margin-bottom:16px; }
#mk_home .mk_consultant{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
#mk_home .mk_avatar{ width:44px; height:44px; border-radius:50%; background:var(--mk-mint-soft); color:var(--mk-mint-deep); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; overflow:hidden; }
#mk_home .mk_avatar img{ width:100%; height:100%; object-fit:cover; }
#mk_home .mk_consultant .mk_name{ font-size:14px; font-weight:700; margin:0 0 2px; }
#mk_home .mk_consultant .mk_role{ font-size:12px; color:var(--mk-ink-faint); margin:0; }
#mk_home .mk_cred_list{ list-style:none; margin:0 0 14px; padding:0; font-size:12.5px; color:var(--mk-ink-soft); }
#mk_home .mk_cred_list li{ display:flex; gap:6px; padding:4px 0; }
#mk_home .mk_cred_list li svg{ width:14px; height:14px; stroke:var(--mk-mint-deep); flex-shrink:0; margin-top:2px; }
#mk_home .mk_side_card .mk_btn_mint{ width:100%; }

#mk_home .mk_rank_list{ list-style:none; margin:0; padding:0; counter-reset:mkrank; }
#mk_home .mk_rank_list li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--mk-line); font-size:13px; }
#mk_home .mk_rank_list li:last-child{ border-bottom:none; }
#mk_home .mk_rank_list li::before{ counter-increment:mkrank; content:counter(mkrank); width:18px; height:18px; border-radius:4px; background:var(--mk-navy); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#mk_home .mk_rank_list a{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mk_home .mk_rank_list a:hover{ color:var(--mk-mint-deep); }

#mk_home .mk_review_mini{ border-bottom:1px solid var(--mk-line); padding:10px 0; font-size:12.5px; }
#mk_home .mk_review_mini:last-child{ border:none; }
#mk_home .mk_review_mini .mk_stars{ color:#E0A421; font-size:11px; margin-bottom:3px; }
#mk_home .mk_review_mini p{ margin:0; color:var(--mk-ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* my info card */
#mk_home .mk_my_info{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
#mk_home .mk_my_info .mk_avatar.mk_me{ background:var(--mk-navy); color:#fff; }
#mk_home .mk_my_info .mk_name_row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
#mk_home .mk_my_info .mk_name_row b{ font-size:14px; }
#mk_home .mk_my_info .mk_grade{ font-size:11px; background:var(--mk-mint-soft); color:var(--mk-mint-deep); padding:2px 7px; border-radius:4px; }
#mk_home .mk_my_info .mk_points{ font-size:12px; color:var(--mk-ink-faint); margin-top:2px; }
#mk_home .mk_my_stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; margin-bottom:14px; }
#mk_home .mk_my_stats a{ background:var(--mk-cream); border-radius:8px; padding:10px 4px; font-size:12px; color:var(--mk-ink-soft); }
#mk_home .mk_my_stats a:hover{ color:var(--mk-navy); }
#mk_home .mk_my_stats a b{ display:block; font-size:15px; color:var(--mk-navy); font-family:'Noto Serif KR',serif; margin-bottom:2px; }

#mk_home .mk_login_card{ text-align:center; padding:6px 0 4px; }
#mk_home .mk_login_card p{ font-size:12.5px; color:var(--mk-ink-soft); margin:0 0 12px; }
#mk_home .mk_login_card .mk_row{ display:flex; gap:8px; }
#mk_home .mk_login_card .mk_row a{ flex:1; padding:10px; border-radius:8px; font-size:13px; text-align:center; }
#mk_home .mk_login_card .mk_btn_outline{ background:#fff; border:1px solid var(--mk-line); color:var(--mk-navy); }
#mk_home .mk_login_card .mk_btn_outline:hover{ border-color:var(--mk-navy); }

/* trust strip */
#mk_home .mk_trust_strip{ background:var(--mk-mint-soft); padding:28px 24px; border-radius:10px; margin-top:20px; }
#mk_home .mk_trust_strip .mk_trust_row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
#mk_home .mk_trust_strip .mk_item svg{ width:26px; height:26px; stroke:var(--mk-mint-deep); margin:0 auto 8px; }
#mk_home .mk_trust_strip .mk_item b{ display:block; font-size:13.5px; color:var(--mk-navy); margin-bottom:4px; }
#mk_home .mk_trust_strip .mk_item span{ font-size:12px; color:var(--mk-ink-soft); }

@media (max-width:860px){
  #mk_home .mk_hero_inner{ grid-template-columns:minmax(0,1fr); }
  #mk_home .mk_cat_item{ flex-basis:calc(100% / 3); }
  #mk_home .mk_layout{ grid-template-columns:minmax(0,1fr); } /* 1fr은 내용물 최소폭 밑으로 안 줄어 좁은 폰(360px)에서 사이드바가 화면 밖으로 넘침 */
  #mk_home .mk_trust_strip .mk_trust_row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}