/* ===== 다힘 학생 모바일 셸 — 아이폰 같은 손맛 (2026-10-04) =====
   페이지 로직은 건드리지 않는 순수 표현·제스처 레이어. dh-ios.js 와 짝.
   적용: 터치 하이라이트 제거 · 누름 피드백 · 안전영역 · 바텀시트 · 스와이프 트랙 · 뒤로가기 엣지 표시 */
html{-webkit-text-size-adjust:100%;}
body{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}
@supports (padding:env(safe-area-inset-bottom)){
  body.dh-ios{padding-bottom:calc(env(safe-area-inset-bottom,0px)) !important;}
}
/* 누름 피드백 — 버튼·카드·칩 공통 (호버가 없는 터치 환경에서 '눌렸다'는 느낌) */
.dh-ios button,.dh-ios a.sdh-row,.dh-ios .sdh-cta,.dh-ios .sd4-btn,.dh-ios .sd4-pill,.dh-ios .sd4-recc,
.dh-ios .daily-tile,.dh-ios .btn-ctrl,.dh-ios .bottom-tab-btn,.dh-ios .hdr-btn,.dh-ios .mission-card,.dh-ios .pm-row,.dh-ios .pm-gcard,.dh-ios .pm-chip,.dh-ios .pm-cta{
  transition:transform .12s ease,opacity .12s ease,border-color .15s,background .15s;
}
.dh-ios button:active,.dh-ios a.sdh-row:active,.dh-ios .sdh-cta:active,.dh-ios .sd4-btn:active,.dh-ios .sd4-pill:active,.dh-ios .sd4-recc:active,
.dh-ios .daily-tile:active,.dh-ios .btn-ctrl:active,.dh-ios .bottom-tab-btn:active,.dh-ios .hdr-btn:active,.dh-ios .mission-card:active,.dh-ios .pm-row:active,.dh-ios .pm-gcard:active,.dh-ios .pm-chip:active,.dh-ios .pm-cta:active{
  transform:scale(.97);
}
/* 스와이프 가능한 탭 패널: 손가락을 따라 움직이고, 놓으면 다음 패널이 미끄러져 들어온다 */
.dh-swipe-host{touch-action:pan-y;overflow:hidden;}
.dh-swipe-dragging{transition:none !important;will-change:transform;}
.dh-swipe-snapback{transition:transform .22s cubic-bezier(.2,.8,.2,1) !important;}
@keyframes dhSlideInLeft{from{transform:translateX(42px);opacity:.4}to{transform:translateX(0);opacity:1}}
@keyframes dhSlideInRight{from{transform:translateX(-42px);opacity:.4}to{transform:translateX(0);opacity:1}}
.dh-slide-in-left{animation:dhSlideInLeft .28s cubic-bezier(.2,.8,.2,1) both;}
.dh-slide-in-right{animation:dhSlideInRight .28s cubic-bezier(.2,.8,.2,1) both;}
/* 탭 바에 "옆으로 넘길 수 있음" 힌트 (처음 2회만, js 가 class 를 붙인다) */
.dh-swipe-hint{position:relative;}
.dh-swipe-hint::after{content:'← 옆으로 넘겨 보세요 →';position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;color:#94a3b8;pointer-events:none;animation:dhHintFade 3.2s ease forwards;}
@keyframes dhHintFade{0%,70%{opacity:1}100%{opacity:0}}
/* 바텀시트 — 폰에서는 가운데 모달 대신 아래에서 올라오는 시트(손잡이 · 끌어내려 닫기) */
@media (max-width:640px){
  .dh-ios .modal-ol{align-items:flex-end !important;padding:0 !important;}
  .dh-ios .modal-ol .modal-box{
    width:100% !important;max-width:none !important;margin:0 !important;
    border-radius:18px 18px 0 0 !important;max-height:88vh !important;
    padding-top:26px !important;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px)) !important;
    box-shadow:0 -12px 40px rgba(15,23,42,.18) !important;
    animation:dhSheetUp .3s cubic-bezier(.2,.8,.2,1) both;touch-action:pan-y;
  }
  .dh-ios .modal-ol .modal-box::before{content:'';position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#cbd5e1;}
  .dh-ios .modal-ol .modal-box.dh-sheet-dragging{animation:none;transition:none;}
  .dh-ios .modal-ol .modal-box.dh-sheet-snap{transition:transform .22s cubic-bezier(.2,.8,.2,1);}
  /* 부트스트랩 모달도 같은 규칙 */
  .dh-ios .modal.show .modal-dialog{position:fixed;left:0;right:0;bottom:0;margin:0 !important;max-width:none !important;width:100% !important;transform:none !important;}
  .dh-ios .modal.show .modal-content{border-radius:18px 18px 0 0 !important;max-height:88vh;animation:dhSheetUp .3s cubic-bezier(.2,.8,.2,1) both;padding-bottom:env(safe-area-inset-bottom,0px);}
}
@keyframes dhSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* ===== 모바일 메뉴 패널(.snav-mobile)을 폰 홈 화면처럼 아이콘 그리드로 ===== */
@media (max-width:1023px){
  .snav-mobile .snav-mwrap{max-width:520px;gap:4px;}
  .snav-mobile .snav-macc-head{border-radius:12px;font-size:14px;font-weight:700;}
  .snav-mobile .snav-macc-body{display:none;padding:6px 0 10px;margin:0;border-left:0;}
  .snav-mobile .snav-macc-body.open{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 6px;}
  .snav-mobile .snav-macc-col{grid-column:1 / -1;padding:8px 6px 0;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:#94a3b8;}
  .snav-mobile .snav-macc-link{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;padding:4px 2px;border-radius:12px;font-size:11px;font-weight:500;color:#334155;text-align:center;line-height:1.3;word-break:keep-all;min-height:84px;}
  .snav-mobile .snav-macc-link i{width:52px;height:52px;border-radius:15px;background:#fff;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:22px;color:#475569;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:transform .12s;}
  .snav-mobile .snav-macc-link.active i{background:#f2f5fb;border-color:#5278bd;color:#3f5e9e;}
  .snav-mobile .snav-macc-link:active i{transform:scale(.9);}
  .snav-mobile .snav-macc-link:active{background:transparent;}
}
/* 뒤로가기 엣지 스와이프 표시 */
.dh-back-edge{position:fixed;left:0;top:50%;width:34px;height:64px;margin-top:-32px;border-radius:0 32px 32px 0;background:rgba(15,23,42,.55);color:#fff;display:flex;align-items:center;justify-content:center;transform:translateX(-34px);transition:transform .12s;z-index:100000;pointer-events:none;}
.dh-back-edge svg{width:18px;height:18px;}
/* 스크롤 영역 관성 */
.dh-ios .modal-box,.dh-ios .wm-body,.dh-ios .modal-body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
@media (prefers-reduced-motion:reduce){
  .dh-slide-in-left,.dh-slide-in-right,.dh-ios .modal-ol .modal-box,.dh-ios .modal.show .modal-content{animation:none !important;}
  .dh-ios *:active{transform:none !important;}
}