/* ============================ 모바일 뷰포트 대응 (≤700px) ============================
   모바일 전용 오버라이드를 한곳에 모은다. 데스크톱 규칙(playground.css)을 좁은 화면에서 덮어쓴다.
   기준: 좌우 여백 모두 16px(--edge). 데스크톱(>700px)에는 어떤 규칙도 적용되지 않는다. */

@media (max-width: 700px) {
  :root {
    /* 모바일 공통 좌우 여백 = 16px (헤더 / tagline / contact / INDEX 행 padding 일괄 적용) */
    --edge: 16px;
    /* 모바일 공통 반응형 텍스트 크기 — 한 번만 정의하고 var(--mobile-fs)로 재사용.
       폭에 비례(4vw)해 13~19px, 태그라인이 어떤 기기에서도 2줄을 유지하도록 산출한 값. */
    --mobile-fs: clamp(13px, 4vw, 19px);
  }

  /* ---- 헤더 / 태그라인 (모든 뷰 공통) ---- */
  /* 태그라인: 헤더 안(가운데)에서 빼내어 헤더 아래 전체폭 블록으로 (줄바꿈 허용, 좌측 정렬).
     → 헤더에는 SHINYOUNG PARK / INDEX 만 남는다. */
  .tagline {
    position: fixed;
    inset: auto;
    top: 51px;
    left: 0;
    right: 0;
    display: block;
    text-align: center;
    white-space: normal;
    line-height: 1.45;
    /* 공통 반응형 크기 토큰 재사용(:root의 --mobile-fs). 좁은 기기에선 작아져 항상 2줄 유지. */
    font-size: var(--mobile-fs);
    letter-spacing: -0.2px;
    text-wrap: balance;
    /* 두 줄 길이를 고르게 배분(긴 줄이 넘쳐 3줄 되는 것 방지에 도움) */
    /* 하단 패딩 0 → 측정되는 박스 bottom = 텍스트 끝. 오벌 상단 여백(+24px)을 텍스트 기준으로 정확히. */
    padding: 22px var(--edge) 0;
    background: var(--bg);
    z-index: 57;
  }

  /* 메인 페이지(가든)에 보이는 모든 텍스트를 같은 크기로 통일 — 헤더(SHINYOUNG PARK/INDEX),
     태그라인, 하단 모드 셀렉터('explore the' + garden/galaxy/perspective).
     모두 공통 토큰 var(--mobile-fs)를 참조(태그라인은 위에서 이미 적용). 모바일 전용. */
  .tag,
  .index,
  .mode-select {
    font-size: var(--mobile-fs);
  }

  /* 모바일: 헤더 라벨 hover 반전 비활성 — 터치에선 탭 후 :hover가 고착돼 반전 상태로 멈추므로. */
  .tag:hover span,
  .index:hover span {
    background: transparent;
    color: #000;
  }

  /* ---- 커스텀 커서 닷: 모바일(터치)에선 숨김 ---- */
  .dot-cursor {
    display: none;
  }

  /* ---- 하단 좌측 연락처: 시안 메인 화면엔 없음 → 숨김 ---- */
  .contact {
    display: none;
  }

  /* ---- 하단 모드 셀렉터: 가운데 정렬 + 3개 옵션 가로 세그먼트(garden/galaxy/perspective) ---- */
  .mode-select {
    left: 0;
    right: 0;
    bottom: 26px;
    justify-content: center;
    gap: 8px;
  }

  /* 'explore the' 라벨이 좁은 폭에서 두 줄로 접히지 않게 */
  .mode-label {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .mode-dropdown {
    position: static;
  }

  /* 닫힘 상태의 단일 박스는 숨기고 3개를 항상 가로로 펼쳐 보여준다 */
  .mode-current {
    display: none;
  }

  .mode-select .mode-list {
    position: static;
    bottom: auto;
    display: flex !important;
  }

  /* 좌→우 순서 = DOM 순서(garden / galaxy / perspective). 별도 order 불필요. */
  .mode-list li {
    min-width: 0;
    padding: 5px 9px;
    margin: 0;
  }

  /* 인접 박스 세로 테두리 겹쳐 1px 공유선으로 */
  .mode-list li+li {
    margin-left: -1px;
  }

  /* ============================ INDEX 뷰 (≤700px) ============================ */
  /* 테이블: 좌 16px / 우 16px 인셋. 우변(border-right)이 곧 척추선 → 화면 우측에서 16px 안쪽.
     별(.ix-star)은 척추선 위에 중앙정렬되어 16px 여백 쪽으로 살짝 걸쳐진다(시안과 동일).
     현재 행 수는 뷰포트 높이에 들어가므로 스크롤 컨테이너로 만들지 않고 overflow:visible —
     화면 밖으로 나가는 별의 끝부분은 body overflow:hidden 이 잘라낸다. */
  body.index-on .index-table {
    left: var(--edge);
    right: var(--edge);
    width: auto;
    top: 196px;
    bottom: auto;
    transform: none;
    overflow: visible;
    border-right: 1px solid #000000;
  }

  /* 모바일 INDEX 컬럼: 이름 + 카테고리만 (키워드/연도 숨김) */
  body.index-on .ix-tags,
  body.index-on .ix-year {
    display: none;
  }

  body.index-on .ix-name {
    flex: 1 1 0;
  }

  body.index-on .ix-cat {
    flex: 0 0 38%;
  }

  /* 행 상하 구분선(가로선)을 화면 좌우 끝까지 풀블리드. 좌우 세로선(행 border-left·테이블 spine)과
     텍스트 여백은 그대로 유지 → 인셋 가로 border를 제거하고 좌우로 넘치는 pseudo 라인으로 대체.
     (-40px 오버슈트 → 화면 밖은 body overflow:hidden 이 잘라냄) */
  body.index-on .ix-row {
    border-top: none;
  }

  body.index-on .index-table {
    border-bottom: none;
  }

  body.index-on .ix-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: -40px;
    right: -40px;
    border-top: 1px solid #000000;
    pointer-events: none;
  }

  body.index-on .index-table::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -40px;
    right: -40px;
    border-top: 1px solid #000000;
    pointer-events: none;
  }

  /* ============================ 상세(detail) 뷰 (≤700px) ============================
     데스크톱의 고정 3컬럼 그리드(좌:맵, 중:본문, 우:이미지) 대신, 헤더 아래 세로 스크롤 1열.
     트랜지션 없이 즉시 표시(JS에서 openDetail 직접 호출). 별은 맵 대신 인라인 SVG로 콘텐츠에 표시. */
  .detail {
    top: 50px;
    /* 헤더(50px) 아래 */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    overflow-y: auto;
    overflow-x: hidden;
    transition: none;
    /* 페이드/슬라이드 트랜지션 없이 즉시 */
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title meta"
      "star  star"
      "body  body"
      "image image"
      "caption caption";
    align-content: start;
    column-gap: 12px;
    padding: 26px var(--edge) 48px;
  }

  /* 상세에선 태그라인 숨김 (태그라인은 headbar(z-78) 자식이라 detail(z-60) 위로 올라오므로) */
  body.detail-on .tagline {
    display: none;
  }

  /* 데스크톱 그리드 잔재(흰 배경/세로 가이드선) 숨김 */
  .detail .dH-white,
  .detail .dH-line {
    display: none;
  }

  /* 모든 컬럼 요소: 흐름(그리드) 배치 + 스테이지 페이드/딜레이 제거(즉시 표시) */
  .detail .dH-lefthead,
  .detail .dH-leftmeta,
  .detail .dH-star,
  .detail .dH-body,
  .detail .dH-image,
  .detail .dH-rightmeta {
    position: static;
    width: auto;
    opacity: 1;
    transition: none;
    padding: 0;
  }

  /* 상단 행: 제목(좌) + 카테고리·연도(우) */
  .detail .dH-lefthead {
    grid-area: title;
  }

  .detail .dH-desc {
    display: none;
    /* 시안 상단엔 부제 없음 */
  }

  .detail .dH-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .2px;
  }

  .detail .dH-leftmeta {
    grid-area: meta;
    align-self: start;
    text-align: right;
    font-size: 16px;
    line-height: 1.45;
  }

  .detail .dH-year {
    margin-top: 2px;
  }

  /* 별: 맵 대신 인라인 SVG, 가운데 정렬 */
  .detail .dH-star {
    grid-area: star;
    justify-self: center;
    width: 150px;
    height: 150px;
    margin: 30px 0 36px;
    pointer-events: none;
    /* 별 탭으로 닫히지 않게 (헤더 SHINYOUNG PARK/INDEX로 닫기) */
  }

  .detail .dH-star svg {
    display: block;
    /* 데스크톱에선 숨김 → 모바일에서 표시 */
    width: 100%;
    height: 100%;
  }

  /* 본문: 위에 구분선 — 음수 마진으로 .detail 좌우 패딩 밖(화면 좌우 끝)까지 풀블리드. 텍스트는 다시 안쪽 패딩. */
  .detail .dH-body {
    grid-area: body;
    border-top: 1px solid var(--ink);
    margin-left: calc(-1 * var(--edge));
    margin-right: calc(-1 * var(--edge));
    padding: 26px var(--edge) 0;
    overflow: visible;
  }

  .detail .dH-body p {
    max-width: none;
  }

  /* 상세 미디어 스택: 세로 흐름(내부 스크롤 없음, .detail 하나만 스크롤) */
  .detail .dH-image {
    grid-area: image;
    margin-top: 28px;
    overflow: visible;
  }

  /* 모바일: figure를 세로로 (미디어 위, 캡션 아래) — 데스크톱의 [미디어|캡션] 가로행을 해제 */
  .detail .dH-media-fig {
    display: block;
    margin-bottom: 22px;
  }

  .detail .dH-media-box {
    flex: none;
    width: 100%;
  }

  .detail .dH-media-cap {
    padding-left: 0;
    margin-top: 6px;
  }

  /* 캡션 컬럼은 데스크톱에서 숨김 → 모바일에선 마지막 마감 구분선으로 재사용(전체폭 풀블리드) */
  .detail .dH-rightmeta {
    display: block;
    grid-area: caption;
    margin: 12px calc(-1 * var(--edge)) 0;
    padding: 0 var(--edge) 18px;
    border-bottom: 1px solid var(--ink);
    font-size: 14px;
  }

  .detail .dH-rightmeta #dFigYear {
    display: none;
    /* 시안엔 이미지 옆 연도 없음 → 라벨만 */
  }
}