/* =============================================================
   디자인 실험은 이 파일에서 시작하세요.
   style.css 다음에 적용되어 기존 화면 위에 원하는 스타일을 덮어씁니다.
   초기 상태는 비워 두어 운영 R16 화면과 동일하게 표시합니다.

   주요 선택자:
   .site-header               상단 메뉴
   .hero / .hero-content      대문 전체 / 안쪽 배치
   #heroTitle                 대문 제목
   .hero-lead                 대문 설명
   .hero-portal-intro         PLATFORM OVERVIEW 영역
   .platform-copy             목록 왼쪽 설명 패널
   .platform-title-group      플랫폼 제목 영역
   .platform-body-group       설명 / 주요 기능 영역
   .platform-controls         플랫폼 버튼 묶음
   #company / #expertise      02 / 03 섹션
   #notice / .site-footer     공지 / 하단

   특정 언어만 바꾸려면 html[lang="en"] 또는 html[lang="ko"]를 앞에 붙이세요.
   기존 스타일에 !important가 있다면 같은 속성에 !important가 필요할 수 있습니다.
   ============================================================= */

/* v2 — 플랫폼 영역만 라운드 적용
   색상, 글꼴, 크기, 간격, 콘텐츠 및 동작은 원본 유지
   큰 묶음 16/20px → 조작 요소 10px → 작은 표시 8px */
#platforms,
#platformModal {
  --round-panel: 20px;
  --round-card: 16px;
  --round-control: 10px;
  --round-label: 8px;
}

/* 하나의 패널 안에 담긴 선택기: 활성 항목만 둥근 배경으로 강조 */
#platforms .platform-directory:not(.is-card-mode) {
  border-radius: var(--round-card);
  overflow: clip;
}
#platforms .platform-directory.is-card-mode .platform-directory-head {
  border-radius: var(--round-card);
}

/* 목록형 미리보기: 회색 통짜 배경 없이 두 개의 독립된 프레임 */
#platforms .platform-stage {
  background: transparent;
  gap: 20px;
  border-radius: 0;
  overflow: visible;
  align-items: start;
}
#platforms .platform-stage > .platform-copy,
#platforms .platform-stage > .platform-visual,
#platforms .platform-stage > .platform-empty {
  border-radius: var(--round-panel);
}
#platforms .platform-stage > .platform-copy {
  align-self: stretch;
}
#platforms .platform-stage > .platform-visual {
  align-self: start;
  overflow: clip;
}

/* 내부 칸 테두리 없이 5/3/2열 유지, 외곽과 활성 배경 사이 여백 확보 */
#platforms .platform-tabs {
  padding: 10px;
  gap: 6px;
}
#platforms .platform-tabs > .platform-tab {
  position: relative;
  --vertical-divider: block;
  --horizontal-divider: none;
  border: 0;
  border-radius: 12px;
  background: transparent;
}
/* 간격 안에만 구분선 표시: 세로선은 위아래를 비워 가로선과 연결하지 않음 */
#platforms .platform-tabs > .platform-tab::before,
#platforms .platform-tabs > .platform-tab::after {
  content: '';
  position: absolute;
  background: #c3ceca;
  pointer-events: none;
}
#platforms .platform-tabs > .platform-tab::before {
  display: var(--vertical-divider);
  width: 1px;
  top: 22px;
  bottom: 22px;
  left: -3px;
}
#platforms .platform-tabs > .platform-tab::after {
  display: var(--horizontal-divider);
  height: 1px;
  top: -3px;
  left: 0;
  width: var(--divider-row-width);
}
@media (min-width: 1101px) {
  #platforms .platform-tabs { --divider-row-width: calc(500% + 24px); }
  #platforms .platform-tab:nth-child(5n+1 of :not([hidden])) { --vertical-divider: none; }
  #platforms .platform-tab:nth-child(5n+1 of :not([hidden])):nth-child(n+6 of :not([hidden])) { --horizontal-divider: block; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  #platforms .platform-tabs { --divider-row-width: calc(300% + 12px); }
  #platforms .platform-tab:nth-child(3n+1 of :not([hidden])) { --vertical-divider: none; }
  #platforms .platform-tab:nth-child(3n+1 of :not([hidden])):nth-child(n+4 of :not([hidden])) { --horizontal-divider: block; }
}
@media (max-width: 700px) {
  #platforms .platform-tabs { --divider-row-width: calc(200% + 4px); }
  #platforms .platform-tab:nth-child(2n+1 of :not([hidden])) { --vertical-divider: none; }
  #platforms .platform-tab:nth-child(2n+1 of :not([hidden])):nth-child(n+3 of :not([hidden])) { --horizontal-divider: block; }
  #platforms .platform-tabs > .platform-tab::before { left: -2px; }
  #platforms .platform-tabs > .platform-tab::after { top: -2px; }
}
#platforms .platform-tabs > .platform-tab:not(:disabled):hover {
  background: #e2e8e5;
}
#platforms .platform-tabs > .platform-tab[aria-selected="true"],
#platforms .platform-tabs > .platform-tab[aria-selected="true"]:hover {
  background: var(--ink);
  color: white;
}
#platforms .platform-tabs > .platform-tab:disabled {
  background: transparent;
}
@media (max-width: 700px) {
  #platforms .platform-stage { gap: 16px; }
  #platforms .platform-tabs { padding: 8px; gap: 4px; }
  #platforms .platform-tabs > .platform-tab { padding-inline: 10px; }
}

/* 카드와 이미지의 위쪽 모서리가 정확히 맞물리도록 처리 */
#platforms .platform-card {
  border-radius: var(--round-card);
  overflow: clip;
}
#platforms .platform-card-media {
  border-radius: calc(var(--round-card) - 1px) calc(var(--round-card) - 1px) 0 0;
}

#platforms .search-box,
#platforms .platform-view-toggle,
#platforms .platform-actions > a,
#platforms .platform-actions > button,
#platforms .platform-card-actions > a,
#platforms .platform-card-actions > button,
#platforms .platform-pagination button,
#platforms .empty-state button,
#platformModal #modalClose,
#platformModal #modalLink {
  border-radius: var(--round-control);
}
#platforms .platform-view-toggle button {
  border-radius: 7px;
}
#platforms .chip,
#platforms .status-label,
#platforms .stage-status,
#platforms .platform-highlights li {
  border-radius: var(--round-label);
}
#platforms .empty-state {
  border-radius: var(--round-card);
}
#platformModal .modal-dialog {
  border-radius: var(--round-panel);
}

/* 외곽 클리핑에 키보드 포커스 표시가 잘리지 않도록 안쪽에 표시 */
#platforms .platform-tab:focus-visible,
#platforms .platform-visual:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -4px;
}

/* v4 list-view comparison: preview left, description right.
   The card directory and the existing mobile stack are unchanged. */
@media (min-width: 701px) {
  #platforms .platform-stage {
    grid-template-columns: minmax(0, 1.65fr) minmax(340px, .8fr);
  }
  #platforms .platform-stage > .platform-copy {
    grid-column: 2;
    grid-row: 1;
  }
  #platforms .platform-stage > .platform-visual,
  #platforms .platform-stage > .platform-empty {
    grid-column: 1;
    grid-row: 1;
  }
}
@media (min-width: 701px) and (max-width: 1100px) {
  #platforms .platform-stage {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  }
}