/* =============================================================================
 * 공통 푸터 (메디킷 이식) — templates/partials/footer.html
 * -----------------------------------------------------------------------------
 * 구조·여백·상호작용은 medikit src/ui/footer/footer.tsx(default density)를 그대로 옮기고,
 * 색·타이포만 캐스티 토큰(tokens.css)으로 바꿨다. 색 하드코딩 없음 — 전부 var(--...).
 * 다크가 기본, [data-theme="light"] 는 tokens.css 재정의만으로 자동 대응된다.
 * ========================================================================== */

.site-footer {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--w-08);
  background: var(--bg);
  margin-top: auto;   /* app-body 가 flex-column 이라 콘텐츠가 짧아도 항상 맨 아래로 붙는다 */
}

/* ─── 상시 노출 바 ─── */
.site-footer-bar {
  display: flex;
  flex-wrap: wrap;    /* 좁은 화면에서 로고·컨트롤이 두 줄로 떨어진다 — 가로 스크롤 방지 */
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  min-height: 50px;
  padding: 10px 24px;
}

.site-footer-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-2);   /* 워드마크 fill=currentColor 가 이 색을 따라간다(테마별 자동) */
}
.site-footer-logo:hover { color: var(--text-1); }
.site-footer-logo svg { height: 22px; width: auto; display: block; }

/* 왼쪽 묶음 — 워드마크와 약관을 나란히(기획 지시 2026-09-02). min-width:0 이 있어야
   좁아질 때 약관 줄이 로고를 밀어내지 않고 자기 폭 안에서 줄바꿈한다. */
.site-footer-lead {
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  min-width: 0;
}

.site-footer-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── 약관 링크 (인라인) ─── */
/* 드롭다운에서 꺼내 바 왼쪽에 직접 세운다. 좁은 화면에서는 줄바꿈으로 흐르고,
   구분점은 넣지 않는다 — 링크 이름 자체가 이미 길어 점까지 넣으면 읽기 어렵다. */
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}
.site-footer-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
}
.site-footer-link:hover { color: var(--text-1); text-decoration: underline; }

/* ─── 관련 사이트 드롭다운 ─── */

.site-footer-dd { position: relative; }

.site-footer-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--w-16);
  border-radius: 8px;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.site-footer-dd-trigger:hover { border-color: var(--w-34); color: var(--text-1); }
.site-footer-dd-trigger[aria-expanded="true"] { border-color: var(--b-25); color: var(--text-1); }

.site-footer-dd-caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.site-footer-dd-trigger[aria-expanded="true"] .site-footer-dd-caret { transform: rotate(45deg); }

/* 푸터가 화면 맨 아래라 패널은 위로 열린다(트리거 오른쪽 기준 정렬 — .belt-pop과 같은 관례) */
.site-footer-dd-panel {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 160px;
  width: max-content;
  max-width: min(260px, calc(100vw - 32px));
  background: var(--surface-1);
  border: 1px solid var(--w-12);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 40px var(--shadow-float);
  z-index: 60;
}
.site-footer-dd-panel.open { display: block; }

.site-footer-dd-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-1);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-footer-dd-item:hover { background: var(--w-08); }

/* ─── 회사 정보 (상시 노출) ─── */
.site-footer-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 24px 12px;
  border-top: 1px solid var(--w-08);
}

.site-footer-company { display: flex; align-items: baseline; gap: 6px; }
.site-footer-name { font-size: 12px; font-weight: 600; color: var(--text-2); }
.site-footer-version { font-size: 11px; color: var(--text-muted); }

.site-footer-info { display: flex; flex-direction: column; gap: 4px; }
.site-footer-item {
  margin: 0;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}
.site-footer-copyright {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

/* 대표자명 | 주소 — 720px 미만은 세로로 쌓고 구분선을 없앤다(캐스티 유일 기존 브레이크포인트,
   app.css .opt-grid 720px 와 통일) */
.site-footer-row-rep {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.site-footer-row-rep .site-footer-item { white-space: normal; }
.site-footer-divider-rep { display: none; }
@media (min-width: 720px) {
  .site-footer-row-rep { flex-direction: row; align-items: center; gap: 6px; }
  .site-footer-row-rep .site-footer-item:first-child { white-space: nowrap; }
  .site-footer-divider-rep { display: block; }
}
.site-footer-divider { flex: 0 0 auto; width: 1px; height: 12px; background: var(--w-16); }

/* 사업자등록번호|통신판매업, TEL|MAIL — flex-wrap + overflow 트릭으로 구분선 자동 처리.
 * 같은 줄이면 구분선이 보이고, 줄바꿈되면 overflow:hidden 이 구분선 몫(13px)을 정확히
 * 잘라내 혼자 남지 않는다. 13/6/1/6 은 서로 맞물린 값이라 한쪽만 바꾸면 트릭이 깨진다
 * (medikit InfoPair 그대로 이식).
 */
.site-footer-pair { overflow: hidden; }
.site-footer-pair-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  margin-left: -13px;
}
.site-footer-item-l { margin-left: 13px; }
.site-footer-item-r { display: flex; align-items: center; margin-left: 6px; }
.site-footer-item-r .site-footer-divider { margin-right: 6px; }

/* ─── 좁은 화면 (기획 지시 2026-09-02) ───────────────────────────────────────────────────
   회사 정보는 한 줄로 고정(nowrap)돼 있어 좁은 화면에서 그대로 밖으로 나갔다.
   줄바꿈을 허용하고, 오른쪽에 붙어 있던 저작권 줄도 왼쪽으로 맞춘다.
   ⚠ responsive.css 가 아니라 여기 둔다 — 약관 문서 화면(legal.html)은
      레이아웃을 안 쓰고 이 시트만 부르는데, 푸터는 그 화면에도 선다. */
@media (max-width: 900px) {
  .site-footer-bar { padding: 10px 14px; }
  .site-footer-details { padding: 10px 14px 12px; }
  .site-footer-item { white-space: normal; }
  .site-footer-row-rep .site-footer-item:first-child { white-space: normal; }
  .site-footer-copyright { text-align: left; }
  .site-footer-controls { width: 100%; justify-content: flex-start; }
  .site-footer-dd-panel { right: auto; left: 0; }
}