/* ═══ iPad 보정 층(2026-10-21) ═══
   iPad Pro 12.9"(세로 1024×1366 / 가로 1366×1024)는 desktop 템플릿을 그대로 받고, <html>(과 <body>)에 ipad-view가
   붙었을 때만 이 파일이 걸림 — 클래스는 _device_detect.html(첫 방문)과 routes.py _is_ipad_request()(재방문)가 붙임.
   desktop·mobile에는 영향 없음: 모든 규칙이 .ipad-view로 시작함.
   - 로드 순서: style.css → theme-space.css → space-3d.css → 이 파일(_theme_css.html). theme-space 규칙(body.theme-space .x =
     0,2,1)·space-3d 규칙(0,2,2)을 이겨야 하는 곳은 .ipad-view body.theme-space .x(0,3,1)로 씀.
   - 920px 이하(Split View 등)는 기존 드로어 규칙이 그대로 맡도록, 사이드바·열 수 규칙은 (min-width:921px)로 감쌈.
   - 세로/가로 사이드바 접힘 상태 자체는 _sidebar_toggle_script.html이 방향으로 정함(여기는 폭·크기만).
   화면 마크업을 바꾸면 iPad에서도 깨지지 않는지 이 파일을 같이 확인할 것(CLAUDE.md). */

/* ── 1. 공통: 문서 스크롤·터치 ── */
/* iPad는 문서(페이지) 자체가 스크롤함(2026-10-22) — desktop처럼 body를 화면 높이로 묶고 .main 안에서만 스크롤하면, iPad
   Safari가 표(Tabulator: transform:translateZ(0) + 안쪽 스크롤 영역)·탭바·카드 위에서 시작한 위아래 제스처를 .main으로
   넘기지 못하고 페이지로 넘겨 "당겨서 새로고침"만 됐음(사용자 제보: 네모 박스 안에서는 스크롤 안 되고 새로고침, 바깥은 됨).
   mobile(/mstock)처럼 문서가 스크롤하면 어디서 시작한 제스처든 문서로 이어지고, 새로고침은 맨 위에서 당길 때만 됨.
   상단바·사이드바는 아래 6-0절에서 sticky로 붙여 둠. 스크롤 위치를 저장·복원하는 화면 JS는 mainScroller()로 문서 스크롤을 씀.
   touch-action: 더블탭 확대를 끄고 탭 반응을 바로 받음(두 손가락 확대는 그대로) */
.ipad-view body{
  height:auto; min-height:100vh; min-height:100dvh; overflow:visible;
  touch-action:manipulation; -webkit-text-size-adjust:100%;
}
.ipad-view .main{ overflow:visible; }
/* 도움말 모달이 열린 동안 뒤 화면 잠금 — 문서가 스크롤하므로 mobile처럼 body를 고정(help_modal.js가 위치를 저장·복원) */
html.help-modal-open.ipad-view body{ position:fixed; left:0; right:0; width:100%; }

/* 입력칸 16px 미만이면 iOS가 포커스 때 화면을 자동 확대함 — 폼·그리드 헤더 필터·셀 편집기·모달 검색·대시보드 프롬프트
   textarea 모두 16px. theme-space의 숫자 입력칸(body.theme-space .form-row input[type="number"], 0,3,2)이나 화면별
   인라인 style이 더 강해서 !important로 고정함(확대 방지는 예외 없이 지켜야 하는 규칙이라) */
.ipad-view input:not([type="checkbox"]):not([type="radio"]),
.ipad-view select,
.ipad-view textarea{ font-size:16px !important; }
.ipad-view .form-row input:not([type="checkbox"]):not([type="radio"]),
.ipad-view .form-row select,
.ipad-view .menu-label-input,
.ipad-view .modal-search{ min-height:44px; }
.ipad-view input[type="checkbox"]{ width:22px; height:22px; }

/* ── 2. 공통: 손가락 크기(44×44px) 터치 영역 ── */
/* <button>은 내용이 원래 세로 가운데라 min-height만 주면 됨. <a>로 된 버튼은 inline-flex로 가운데 맞춤 */
.ipad-view button,
.ipad-view :is(.btn-primary, .btn-secondary, .btn-excel, .btn-danger, .btn-refresh, .btn-delete, .btn-edit,
               .help-btn, .qty-trend-period-btn, .help-retry){ min-height:44px; }
.ipad-view a:is(.btn-primary, .btn-secondary, .btn-edit, .btn-delete){
  display:inline-flex; align-items:center; justify-content:center;
}
.ipad-view .btn-delete, .ipad-view .btn-edit{ padding-left:14px; padding-right:14px; }
.ipad-view .modal-close{ min-width:44px; }
.ipad-view body.theme-space .help-modal .modal-close{ min-width:44px; min-height:44px; }
.ipad-view .tab-item, .ipad-view .subtab-item{ min-height:44px; }
.ipad-view .nav-item{ min-height:48px; }
.ipad-view .avatar-btn{ width:44px; height:44px; }
.ipad-view .avatar-menu-item{ display:flex; align-items:center; min-height:44px; }
.ipad-view .modal-row{ min-height:48px; }
/* "전체 보기 →" 같은 글자 링크: 레이아웃은 그대로 두고 위아래로 손가락 닿는 영역만 넓힘 */
.ipad-view .card-link{ display:inline-block; padding:14px 0; margin:-14px 0; }

/* 탭바가 본문보다 넓어지면(세로 + 사이드바 펼침) .main 전체가 옆으로 밀리지 않고 탭바 안에서만 옆으로 넘김 */
.ipad-view :is(.tab-bar, .subtab-bar){
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ipad-view :is(.tab-bar, .subtab-bar)::-webkit-scrollbar{ display:none; }
.ipad-view :is(.tab-item, .subtab-item){ flex-shrink:0; white-space:nowrap; }

/* safe-area: 홈 화면 앱·전체 화면에서 홈 인디케이터·둥근 모서리에 글자가 닿지 않게(일반 Safari 탭에서는 0) */
.ipad-view .topbar{
  padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right));
}
.ipad-view .sidebar{ padding-bottom:calc(22px + env(safe-area-inset-bottom)); }

/* ── 3. Tabulator 그리드(매수·매도 기록·스냅샷·배당·입금·금융정보·종목등록·글로벌 자산) ── */
/* 행 높이 약 50px(13px 8px → 16px 10px). 편집 중인 셀은 Tabulator가 padding 0으로 편집기를 꽉 채우므로 제외.
   그리드는 <html>에 이미 클래스가 붙은 뒤 만들어져서 행 높이를 다시 잴(redraw) 필요 없음 */
.ipad-view .tabulator{ touch-action:manipulation; }
/* 좌우는 6px — 표 폭에 칸을 다 넣으면서(아래 ipad_grid.js) 큰 숫자("+1,806,923,800")가 "…"로 잘리지 않게 좌우 여백을 줄임 */
.ipad-view .tabulator-row .tabulator-cell:not(.tabulator-editing){ padding:16px 6px; }
.ipad-view .tabulator .tabulator-header-filter :is(input, select){ min-height:44px; padding:8px 10px; }
.ipad-view .tabulator .tabulator-footer .tabulator-page{ min-width:44px; min-height:44px; padding:0 12px; }
/* 가로 스크롤: 컬럼이 많으면 Tabulator 자체 스크롤 영역(.tabulator-tableholder)만 옆으로 밀림 — 감싸는 카드·스택이
   그리드 폭에 맞춰 늘어나 .main까지 밀어내지 않게 최소 폭을 0으로 */
.ipad-view :is(.card, .stack, .grid > *){ min-width:0; }
/* 모든 그리드를 iPad에서 표 폭에 맞춤(static/js/ipad_grid.js, fitColumns) — 좁아진 글자 칸(계좌·종목명·별칭 등)과 제목이
   "…"로 잘리지 않고 줄바꿈되게 함(행·제목 높이는 Tabulator가 내용에 맞춰 늘림). 한글은 단어 중간에서 끊지 않고(keep-all),
   계좌번호처럼 띄어쓰기 없는 긴 덩어리만 어디서든 끊음. 숫자 칸(.cell-num)은 최소 폭을 받아 한 줄 그대로, 비고(.cell-memo)는
   원래의 pre-wrap(입력한 줄바꿈 유지) 그대로 둠 */
.ipad-view .tabulator-row .tabulator-cell:not(.cell-num):not(.cell-memo){
  white-space:normal; word-break:keep-all; overflow-wrap:anywhere; line-height:1.45;
}
/* 칸 제목은 "리밸런싱비율"·"소유자"처럼 한 단어가 칸보다 넓을 수 있어 글자 사이 어디서든 줄을 바꾸고, theme-space의 넓은
   자간(1.5px)도 좁힘(920px 이하 화면의 표 제목 자간 축소와 같은 이유) */
/* Tabulator 기본 규칙(.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{white-space:nowrap},
   0,5,0)보다 강해야 해서 같은 깊이 + .ipad-view로 씀 */
.ipad-view .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{
  white-space:normal; word-break:normal; overflow-wrap:anywhere; text-overflow:clip;
}
.ipad-view body.theme-space .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{ letter-spacing:.5px; }

/* 글자를 줄여서라도 한 화면에(ipadGrid.scaleToFit) — 글자·여백 축소 규칙은 desktop과 같이 쓰므로 style.css의 .grid-scaled에 있음.
   iPad만: 헤더 필터 입력칸은 iOS 확대 방지로 16px 그대로라, 좁아진 칸(자산군 "전체")에서 글자가 잘리지 않게 좌우 여백만 줄임 */
.ipad-view .tabulator.grid-scaled .tabulator-header-filter :is(input, select){ padding-left:4px; padding-right:2px; }

/* ── 4. 로그인 ── */
/* 화면 높이 가운데 정렬은 유지하되 내용이 길거나 키보드가 올라오면 문서가 스크롤해서 로그인 버튼이 가려지지 않게 함 */
.ipad-view .auth-page{ min-height:100vh; min-height:100dvh; height:auto; overflow:visible; padding-bottom:env(safe-area-inset-bottom); }
.ipad-view .auth-card .btn-primary{ min-height:48px; }

/* ── 5. 도움말 모달(❓) — desktop 모달을 그대로 쓰되 닫기 버튼만 키우고(2번), 세로에서 여백을 줄임 ── */

/* ── 6-0. 문서 스크롤 중 상단바·사이드바 고정(1절) ──
   상단바는 맨 위에 붙이고, 사이드바는 상단바 아래(84px = .topbar min-height)에 화면 높이만큼 붙여 둠 — 메뉴가 길면 사이드바
   안에서만 스크롤(원래 overflow-y:auto). 920px 이하(Split View 등)는 기존 position:fixed 드로어가 맡으므로 제외 */
@media (min-width:921px){
  /* scrollIntoView(Enter로 아래 행 이동 등)가 칸을 붙어 있는 상단바 밑으로 숨기지 않게, 문서 스크롤 기준 위쪽 여백을 상단바 높이로 */
  html.ipad-view{ scroll-padding-top:84px; }
  .ipad-view .topbar{ position:sticky; top:0; z-index:30; }
  .ipad-view .app{ align-items:flex-start; }
  .ipad-view .sidebar{ position:sticky; top:84px; height:calc(100vh - 84px); height:calc(100dvh - 84px); }
}

/* ── 6-1. 가로 나열 지표(.stat-row)를 격자로(세로·가로 공통, 열 수는 6·7절) ──
   데스크톱은 flex-wrap이라 줄이 넘어가면 둘째 줄 첫 칸만 왼쪽 선이 남아 열이 들쭉날쭉함 → 열 수를 고정한 격자로 바꾸고,
   첫 칸만 왼쪽 여백 0 + 카드 바깥 선이던 것을 다른 칸과 같은 모양(여백 30px + 안쪽 왼쪽 선)으로 맞춰 열을 가지런히 함.
   3D 슬랩(.s3-kpis, 공포탐욕 신용 게이트)은 space-3d.css가 자체 격자로 배치하므로 제외 */
@media (min-width:921px){
  .ipad-view .stat-row:not(.s3-kpis){ display:grid; row-gap:18px; }
  .ipad-view .stat-row:not(.s3-kpis) > .stat:first-child{ padding-left:30px; }
  .ipad-view body.theme-space .stat-row:not(.s3-kpis) > .stat:first-child{ box-shadow:inset 1px 0 0 rgba(var(--sp-cyan-rgb), .5); }
  .ipad-view body.theme-space .stat-row:not(.s3-kpis) > .stat:first-child::before{ left:-2px; }
  .ipad-view body.theme-space .stat-row:not(.s3-kpis) > .stat:first-child::after{ content:none; }
}

/* ── 6. 세로(1024px): 사이드바 아이콘 레일 + 카드·지표 2열 ── */
@media (min-width:921px) and (orientation:portrait){
  .ipad-view .main{ padding:24px 24px calc(48px + env(safe-area-inset-bottom)); }

  /* 접힌 레일 68px → 76px: 메뉴 항목이 52px 폭이 되게(44px 이상). 상단바 브랜드 칸도 같은 폭으로 맞춤 */
  .ipad-view .sidebar.collapsed{ width:76px; padding-left:12px; padding-right:12px; }
  .ipad-view body.sidebar-collapsed .topbar-brand{ width:76px; }

  /* KPI 밴드(.stats, 3칸) → 2열, 남는 마지막 칸은 한 줄 전체. 줄 사이 간격만 추가하고 선·점 장식은 데스크톱 그대로 */
  .ipad-view .stats{ grid-template-columns:repeat(2, 1fr); row-gap:22px; }
  .ipad-view .stats > .stat:last-child:nth-child(odd){ grid-column:1 / -1; }

  /* 가로 나열 지표(.stat-row) → 2열 격자(6-1절 공통 규칙 + 열 수만) */
  .ipad-view .stat-row:not(.s3-kpis){ grid-template-columns:repeat(2, 1fr); }

  /* 시스템현황·공포탐욕 지표 카드·환율 KPI → 2열 */
  .ipad-view .status-grid,
  .ipad-view .fg-indicator-grid{ grid-template-columns:repeat(2, 1fr); }
  .ipad-view .kpi-box{ flex-basis:calc(50% - 8px); }

  /* 도움말 모달: 상자 좌우 여백·본문 여백 축소, 카드 격자 2열 */
  .ipad-view .help-modal{ padding:16px; }
  .ipad-view .help-modal-body{ padding:4px 18px 24px; }
  .ipad-view .help-cards{ grid-template-columns:repeat(2, 1fr); }

  /* 대시보드 보유종목 표 + 도넛(.grid)은 2열 유지 — 10열 표에 가로 스크롤 래퍼가 없어 카드 안에서만 옆으로 넘김 */
  .ipad-view .grid > .card:has(table){ overflow-x:auto; }
}

/* ── 7. 가로(1366px): 사이드바 펼침 + 카드·지표 3~4열 ── */
@media (min-width:921px) and (orientation:landscape){
  .ipad-view .main{ padding:32px 32px calc(48px + env(safe-area-inset-bottom)); }

  .ipad-view .stat-row:not(.s3-kpis){ grid-template-columns:repeat(4, 1fr); }
  .ipad-view .status-grid{ grid-template-columns:repeat(4, 1fr); }
  .ipad-view .fg-indicator-grid,
  .ipad-view .help-cards{ grid-template-columns:repeat(3, 1fr); }
  .ipad-view .kpi-box{ flex-basis:calc(33.333% - 11px); }
  .ipad-view .grid > .card:has(table){ overflow-x:auto; }
}

/* ── 8. 손가락 전용(마우스 없음): 탭한 뒤 남는 hover 정리 + 누름 표시 ── */
/* iOS는 탭한 요소에 :hover를 남겨 둠 — "떠오른 카드"·"마우스 올린 탭 밑줄"·"편집 가능 셀 강조"가 계속 남아 선택된 것처럼
   보이는 것만 기본 모습으로 되돌림(색만 살짝 바뀌는 메뉴·버튼 hover는 누른 직후라 그대로 둠) */
@media (hover:none) and (pointer:coarse){
  .ipad-view .card:hover{ box-shadow:0 1px 2px rgba(22,51,44,0.04); }
  .ipad-view body.theme-space :is(.card, .stats):hover{
    box-shadow:var(--s3-thick), var(--s3-rim), var(--sp-glass-shadow), var(--s3-drop);   /* space-3d.css 10절 기본값 */
  }
  .ipad-view .tab-item:hover:not(.active),
  .ipad-view .subtab-item:hover:not(.active){ border-bottom-color:transparent; }
  .ipad-view .tabulator-row .tabulator-cell.tabulator-editable:hover{ background:transparent; }
  .ipad-view :is(button, .btn-primary, .btn-secondary, .btn-excel, .btn-danger, .btn-refresh, .btn-delete, .btn-edit):active:not(:disabled){
    filter:brightness(0.88);
  }
}