/* ============================================================
   Here Me — 반응형 (태블릿 / 모바일) 최적화
   ※ dc-runtime이 인라인 스타일을 정규화(콜론 뒤 공백)하므로
     값 기반 속성 선택자 대신 "클래스/구조 hook"으로 타깃팅한다.
   적용 순서: fonts.css → <page>.css → responsive.css (마지막)
   그리드 클래스: hm-herogrid(소개 2단) · hm-trust(소개 3단)
                 hm-demogrid(체험 2단) · hm-fields(게시판 2단)
                 hm-statgrid·hm-needgrid(소개 3단) · hm-techgrid(주요기능 3단)
   ============================================================ */

/* 가로 스크롤 방지 안전망 */
html, body { max-width: 100%; overflow-x: hidden; }
#hm-page img { max-width: 100%; }

/* 푸터 약관 링크 hover (정적 페이지 포함 전 페이지) */
.fpolicy:hover { color: #fff !important; }

/* App Store / Google Play 버튼 너비 통일 (자연폭 184/202 → 210 고정)
   아이콘이 두 버튼에서 같은 위치(좌측)에 오도록 flex-start 정렬 */
.hm-dlrow > a { width: 210px; box-sizing: border-box; justify-content: flex-start !important; }

/* 영상 캐러셀: 가로 스크롤 트랙(스크롤바 숨김) + 카드 고정폭(스냅) */
.hm-vidtrack { scrollbar-width: none; -ms-overflow-style: none; }
.hm-vidtrack::-webkit-scrollbar { display: none; }
.hm-vidtrack > .hm-videocard { flex: 0 0 clamp(270px, 30%, 350px); scroll-snap-align: start; }
/* 영상 커스텀 재생 버튼(클릭 전 표시) hover 확대 */
.hm-vidplay span { transition: transform .25s, background .25s; }
.hm-vidplay:hover span { transform: scale(1.08); background: rgba(255,255,255,.3); }

/* 소개 히어로 고정공지 배너 hover */
.hm-pinrow:hover { transform: translateY(-3px); box-shadow: 0 22px 42px -18px rgba(58,107,82,.5) !important; }
.hm-pinrow .hm-pinmore i { transition: transform .3s; }
.hm-pinrow:hover .hm-pinmore i { transform: translateX(3px); }

/* 소개 배너에서 업데이트 항목 딥링크 시 잠깐 강조 */
.hm-flash { animation: hmflash 1.8s ease; border-radius: 20px; }
@keyframes hmflash { 0%, 100% { box-shadow: 0 0 0 0 rgba(95,211,160,0); } 18% { box-shadow: 0 0 0 4px rgba(95,211,160,.55); } }

/* 패치노트 타임라인 세로 연결선 (마지막 항목은 제외) */
.hm-patchitem::before { content: ""; position: absolute; left: 12px; top: 19px; bottom: -2px; width: 2px; background: rgba(58,107,82,.13); }
.hm-patchitem:last-child::before { display: none; }

/* ------------------------------------------------------------
   태블릿 (≤1024px)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* 3단 → 2단 (기술 그리드는 2+1 방지 위해 여기서 제외 — 아래에서 3단 유지→1단 처리) */
  .hm-trust, .hm-videogrid { grid-template-columns: repeat(2, 1fr) !important; }

  /* 소개 다운로드 버튼(App Store / Google Play) 가운데 정렬 */
  .hm-dlrow { justify-content: center !important; }

  /* 섹션 좌우 여백 보강 */
  #hm-page > section { padding-left: clamp(14px, 4vw, 40px) !important; padding-right: clamp(14px, 4vw, 40px) !important; }
}

/* ------------------------------------------------------------
   태블릿 세로 / 큰 폰 (≤820px) : 2단 히어로 스택
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* 왜 Here Me 분할 레이아웃: 제목 ↑ / 리스트 카드 ↓ 로 스택 (가운데 정렬 안 함) */
  .hm-whygrid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Here Me만의 기술: 901px 이상은 3단 한 줄, 이하는 1단 스택 (2+1 배치 방지) */
  .hm-techgrid { grid-template-columns: 1fr !important; }
}

@media (max-width: 820px) {
  .hm-herogrid, .hm-demogrid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    justify-items: center;
    text-align: center;
  }

  /* 어떤 sized 요소도 화면을 넘지 않도록 ("width:"는 정규화 후에도 매칭됨) */
  #hm-page [style*="width:"] { max-width: 100% !important; }
  /* 예외: 지도 위치 마커(#hm-marker)는 0폭 앵커 안의 고정 px 원이라 위 규칙의
     max-width:100%(=부모 0폭=0)에 너비가 뭉개져 정원이 찌그러진다 → 예외 처리 */
  #hm-page #hm-marker span { max-width: none !important; }
}

/* ------------------------------------------------------------
   모바일 (≤640px)
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  /* 모든 다단 그리드 → 1단 (trust 2→1, 게시판 폼 포함) */
  .hm-trust, .hm-fields, .hm-herogrid, .hm-demogrid,
  .hm-statgrid, .hm-needgrid, .hm-techgrid, .hm-videogrid, .hm-rmgrid { grid-template-columns: 1fr !important; }

  /* 푸터 약관 줄(+오른쪽 언어 드롭다운): 한 줄에 모두(줄바꿈 방지). 넓으면 13px, 좁을수록 축소 */
  div:has(> a.fpolicy) { flex-wrap: nowrap !important; column-gap: clamp(4px, 1.6vw, 10px) !important; font-size: clamp(9px, 3vw, 13px) !important; }
  div:has(> a.fpolicy) > a.fpolicy { white-space: nowrap !important; }
  footer .hm-langdd-btn { font-size: clamp(9px, 2.9vw, 13px) !important; padding: 4px 8px !important; gap: 4px !important; }

  /* 필요한 순간 가로 리스트: 큰 인덱스 숫자 숨기고 여백 축소 */
  .hm-neednum { display: none !important; }
  .hm-needrow { padding: 20px !important; gap: 16px !important; }

  /* 헤더 2줄 배치
       1행:  [로고]            [앱 다운로드]
       2행:  소개 주요기능 체험 게시판
     ▸ cluster <div>를 display:contents로 해제해 자식(링크묶음·버튼)을
       nav의 flex 아이템으로 끌어올린 뒤 order/flex-basis로 재배치 (DOM 변경 없음) */
  #hm-nav { flex-wrap: wrap !important; row-gap: 10px !important; padding: 10px 14px !important; align-items: center; }
  #hm-nav img { height: 30px !important; }
  #hm-nav a { font-size: 13px !important; }

  #hm-nav > a:first-child { margin-right: auto !important; order: 1; }            /* 로고: 좌측, 1행 */
  #hm-nav > div { display: contents !important; }                                /* cluster 해제 */
  #hm-nav > div > a[style*="999px"] { order: 2; padding: 9px 13px !important; }   /* 앱 다운로드: 우측, 1행 */
  #hm-nav > div > div { order: 3; flex-basis: 100%; justify-content: space-between !important; padding: 0 10px !important; } /* 네비 링크: 2행 전체폭, 양쪽 정렬 + 양끝 여백 */
  #hm-nav > div > div > a { font-size: 15px !important; }                         /* 메뉴 글자 약간 크게 */

  /* 세로 여백 축소 (상단은 2줄 네비 확보 위해 충분히 유지) */
  #hm-page > section { padding-top: 116px !important; padding-bottom: clamp(48px, 12vw, 80px) !important; }

  /* 폰 목업 위 말풍선(지켜존 도착 / SOS 준비완료): 데스크톱은 폰 밖으로 튀어나와 있는데
     모바일에선 화면 양끝에 잘리므로 폰 안쪽으로 당겨 잘림 방지 */
  .hm-phonefab-l { left: 0 !important; }
  .hm-phonefab-r { right: 0 !important; }

  /* 체험 관제 대시보드: 모바일에선 2열이 눌려 깨지므로 세로 스택(지도 위·정보 아래) */
  .hm-monframe { aspect-ratio: auto !important; }
  .hm-monbody { grid-template-columns: 1fr !important; }
  .hm-monmap { aspect-ratio: 16 / 9 !important; border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
  .hm-monside { padding: 12px !important; gap: 9px !important; }
}

/* ------------------------------------------------------------
   소형 모바일 (≤400px)
   ------------------------------------------------------------ */
@media (max-width: 400px) {
  #hm-nav a { font-size: 12px !important; }
  #hm-page > section { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ------------------------------------------------------------
   커스텀 마우스 커서 (web/cursor 폴더 이미지 사용)
   기본 = 일반 커서 · 선택 = 클릭 가능 요소 · 읽는중 = 로딩/대기
   ※ 원본 .cur 은 256x256 아이콘이라 브라우저 커서 크기 제한을 초과 →
     Pillow 로 64x64 .png 로 변환해 사용한다.
     포인터(화살표/손/I빔) 끝이 왼쪽 위에 있어 초점(hotspot)을 그쪽에 맞춘다.
     파일명이 한글이라 URL 인코딩된 경로를 사용한다.
   ------------------------------------------------------------ */
html, body {
  cursor: url("../cursor/%EA%B8%B0%EB%B3%B8.png") 4 6, auto;
}
/* 클릭 가능한 요소는 '선택' 커서 — 인라인 cursor:pointer 를 덮기 위해 !important */
a, button, select, label,
[role="button"], [onclick],
.hm-vidplay, .hm-vidprev, .hm-vidnext,
.hm-pinrow, .hm-needrow, .fpolicy,
.hm-langdd-btn, .hm-langdd-menu li,
[style*="cursor: pointer"], [style*="cursor:pointer"] {
  cursor: url("../cursor/%EC%84%A0%ED%83%9D.png") 5 5, pointer !important;
}
/* 로딩/대기 상태는 '읽는중' 커서 */
[aria-busy="true"], .hm-loading, .is-loading {
  cursor: url("../cursor/%EC%9D%BD%EB%8A%94%EC%A4%91.png") 4 6, progress !important;
}
/* 텍스트 입력 요소 위에서도 '읽는중' 커서 (버튼류 input 제외) */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea, [contenteditable="true"] {
  cursor: url("../cursor/%EC%9D%BD%EB%8A%94%EC%A4%91.png") 4 6, text !important;
}

/* ------------------------------------------------------------
   언어 선택 커스텀 드롭다운 (네이티브 select 대체 — 펼친 목록까지 스타일)
   마크업은 site-behavior.js 의 initLangSelect() 가 생성한다.
   ------------------------------------------------------------ */
/* 네이티브 select 는 숨김 — JS 가 항상 커스텀 드롭다운으로 대체한다.
   (dc-runtime 이 인라인 style 을 되돌리므로 !important 로 확실히 숨긴다) */
select.hm-lang { display: none !important; }
.hm-langdd { position: relative; display: inline-block; font-family: var(--body); }
.hm-langdd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--muted);
  background: rgba(255,255,255,.6); border: 1px solid rgba(58,107,82,.22);
  border-radius: 9px; padding: 6px 10px; outline: none;
  transition: background .2s, border-color .2s, color .2s;
}
.hm-langdd-btn:hover { background: rgba(255,255,255,.9); border-color: rgba(58,107,82,.4); color: var(--primary); }
.hm-langdd.open .hm-langdd-btn { background: #fff; border-color: var(--primary); color: var(--primary); }
.hm-langdd-caret { transition: transform .25s ease; opacity: .65; }
.hm-langdd.open .hm-langdd-caret { transform: rotate(180deg); opacity: 1; }

.hm-langdd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
  min-width: 134px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid rgba(58,107,82,.16); border-radius: 14px;
  box-shadow: 0 18px 42px -14px rgba(22,41,31,.32);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left;
  pointer-events: none; visibility: hidden;
  transition: opacity .2s ease, transform .22s cubic-bezier(.34,1.56,.64,1), visibility .22s;
}
.hm-langdd.open .hm-langdd-menu {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible;
}
.hm-langdd-menu li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 9px 12px; border-radius: 9px;
  transition: background .18s, color .18s;
}
.hm-langdd-menu li:hover { background: rgba(95,211,160,.16); color: var(--primary); }
.hm-langdd-menu li[aria-selected="true"] { background: rgba(95,211,160,.22); color: var(--primary); }
.hm-langdd-menu li[aria-selected="true"]::after { content: "\2713"; font-size: 12px; font-weight: 800; }

/* 모바일: 언어 드롭다운을 푸터 약관 줄 오른쪽 끝에 배치 (JS _placeLangDD 가 옮김)
   — dd 는 모바일에서만 footer 안으로 들어오므로 아래 규칙은 자연히 모바일에만 적용됨 */
footer .hm-langdd-btn {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.85);
}
footer .hm-langdd-btn:hover,
footer .hm-langdd.open .hm-langdd-btn {
  background: rgba(255,255,255,.16); border-color: var(--glow); color: #fff;
}
/* 푸터(하단)라 메뉴는 위로 + 오른쪽 정렬로 열림 */
footer .hm-langdd-menu {
  top: auto; bottom: calc(100% + 8px); left: auto; right: 0; transform-origin: bottom right;
  transform: translateY(6px) scale(.98);
}
footer .hm-langdd.open .hm-langdd-menu {
  transform: translateY(0) scale(1);
}
/* 푸터 약관 링크 + 언어 드롭다운 수직 가운데 정렬 */
footer div:has(> a.fpolicy) { align-items: center; }

/* =========================================================
   다국어(영어·일본어) 줄바꿈 품질 개선
   ---------------------------------------------------------
   · 제목류(h1~h4)는 CJK 단어 중간에서 끊기지 않도록 keep-all.
     (예: 일본어 "家族がどこにいても、" 가 "…いて / も、" 로 쪼개지던 문제 해결. 한국어에도 이로움)
   · text-wrap: balance 로 여러 줄 제목의 고아 단어(한 단어만 다음 줄) 방지.
   · 히어로 H1 은 en/ja 번역문이 한국어보다 길어 그리드 컬럼 폭을 넘쳐
     3줄로 깨지거나 클리핑되므로, 해당 언어에서만 폰트를 소폭 축소해 의도한 2줄 레이아웃 유지.
     (문단 p / 배너 div 는 길어서 keep-all 시 넘칠 수 있어 손대지 않음)
   ========================================================= */
h1, h2, h3, h4 { word-break: keep-all; }
h1, h2, h3 { text-wrap: balance; }

html[lang="ja"] h1[data-i18n-html] { font-size: clamp(30px, 4.6vw, 54px) !important; letter-spacing: -0.5px !important; }
html[lang="en"] h1[data-i18n-html] { font-size: clamp(30px, 4.2vw, 48px) !important; letter-spacing: -0.4px !important; }