/* ============================================================
   saas 공유 테마 — 본체(블로그원고_화면.html)와 100% 동일 토큰
   페이지ID: SAAS-공유테마-2026-06-08
   localStorage 'simtheme'(다크/라이트/시스템) 동기 → 본체에서 고른 테마가
   모든 saas 페이지에 그대로 따라감. (_theme.js 가 적용)
   ※ 초안, 라이브 픽셀 검증 필요.
   ============================================================ */

/* 다크(기본) — 본체 :root 값 그대로 */
:root{
  color-scheme:dark;
  --bg:#0e1320; --panel:#161d2e; --card:#1c2435; --line:#2a3450;
  --ink:#e8ecf5; --mut:#8b96b0; --accent:#ffc83d; --accent2:#ffd86e;
  --orange:#ff8a3d; --green:#3ddc84; --blue:#4ea3ff; --warn:#ff5a5a;
}

/* 라이트 — 본체 body[data-theme="light"] 값 그대로 (★[세션26] 순백 톤다운: 배경 살짝 눌러 흰 박스가 떠 보이게) */
body[data-theme="light"]{
  color-scheme:light;
  --bg:#eceef2; --panel:#ffffff; --card:#ffffff; --line:#dde1e8;
  --ink:#222b38; --mut:#69727f; --accent:#f0a500; --accent2:#ffc83d;
  --orange:#e8730f; --green:#1f9d57; --blue:#1f7ae0; --warn:#d33b3b;
}

/* 본체와 같은 기본 바탕 */
body{background:var(--bg);color:var(--ink);transition:background .18s ease,color .18s ease;}

/* ★[세션26] 라이트 전용 — 공통 박스(패널·카드류)에 미묘한 그림자+경계로 구간 분리(모던). 다크엔 영향 없음.
   saas 화면들의 흔한 박스 클래스 + var(--panel)/var(--card) 배경 요소를 폭넓게 살짝 띄움. */
body[data-theme="light"] .panel,
body[data-theme="light"] .card,
body[data-theme="light"] .box,
body[data-theme="light"] .pcard,
body[data-theme="light"] .sec,
body[data-theme="light"] section,
body[data-theme="light"] .tile{
  box-shadow:0 1px 2px rgba(20,28,44,.04), 0 2px 8px -2px rgba(20,28,44,.08);
  border-color:#e4e7ed;
}

/* 공통 테마 토글(우상단 미니 1개 — _theme.js 가 자동 삽입) */
.saas_themebtn{
  position:fixed;top:10px;right:12px;z-index:99990;
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:7px 12px;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.20);
}
.saas_themebtn:hover{border-color:var(--accent)}
body[data-theme="light"] .saas_themebtn{box-shadow:0 2px 10px rgba(0,0,0,.10)}

/* ============================================================
   모바일 터치영역 — 손가락 최소 44x44px (Apple HIG 기준)
   페이지ID: SAAS-터치영역-2026-06-08 / 🕸️ 본진: 모바일 고객 이탈↓→직거래 유입
   768px 이하에서만 적용. 인라인 텍스트 링크는 건드리지 않음(레이아웃 보호).
   ============================================================ */
@media (max-width:768px){
  /* 누르는 컨트롤은 최소 높이 보장 */
  button, select,
  input[type="submit"], input[type="button"], input[type="reset"],
  input[type="text"], input[type="number"], input[type="password"],
  input[type="email"], input[type="tel"], input[type="search"], input[type="date"]{
    min-height:44px;
  }
  /* 표·캘린더 셀 — 위아래 여백으로 탭 영역 확보(폭은 유지) */
  td, th{ padding-top:12px; padding-bottom:12px; }
  /* 버튼처럼 쓰는 링크(클래스에 btn/button 포함)만 키움 — 텍스트 링크 제외 */
  a[class*="btn"], a[class*="button"], a[role="button"]{
    min-height:44px; display:inline-flex; align-items:center;
  }
}