@media (max-width: 1040px) {/* withplan 로고 전용 모바일 보정 */

  .wp_login_page { display: block; height: auto; min-height: 100vh; min-height: 100svh; padding: 0; overflow: auto; background-color: #E8EFC8; background-image: radial-gradient(ellipse 115% 64% at -10% 2%, rgba(174,238,218,0.94) 0%, rgba(193,239,211,0.68) 38%, rgba(211,240,202,0) 74%), radial-gradient(ellipse 105% 58% at 108% 82%, rgba(255,229,174,0.90) 0%, rgba(251,235,181,0.56) 42%, rgba(247,239,190,0) 78%), linear-gradient(180deg, #C5EFD8 0%, #DAF0CD 34%, #E9EFC5 64%, #F8ECBA 100%); }
  .wp_login_hero { width: 100%; height: clamp(400px, 54svh, 520px); min-height: 400px; background-position: center top; background-size: auto clamp(760px, 105vw, 980px); -webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 76%, rgba(0,0,0,0.90) 84%, rgba(0,0,0,0.48) 93%, transparent 100%); mask-image: linear-gradient(180deg, #000000 0%, #000000 76%, rgba(0,0,0,0.90) 84%, rgba(0,0,0,0.48) 93%, transparent 100%); }
  .wp_login_hero::after { display: none; }
  .wp_login_panel { margin-top: -66px; padding: 0 20px 26px; background: transparent; box-shadow: none; backdrop-filter: none; }
  .wp_login_card { position: relative; z-index: 1; width: min(440px, 100%); }
  .wp_login_brand { display: none; }
  .wp_login_about { display: none; }
  .wp_login_tagline { margin-top: 20px; }

  /* 계정관리(AUTH_ACCOUNT — 회원가입·아이디/비밀번호 찾기·회원탈퇴) 보정 (2026-08-24):
     위 .wp_login_page 의 block 전환으로 카드의 margin:auto 세로 중앙정렬이 무효가 되어
     탈퇴 박스가 상단에 붙던 것을 flex 복원으로 다시 중앙에 둔다(내용이 화면보다 길면 그대로 스크롤).
     로그인 히어로용 브랜드 숨김도 계정 카드에는 해당 없음 — 로고·제목을 복원한다. */
  .wp_account_page { display: flex; flex-direction: column; }
  .wp_account_card .wp_login_brand { display: flex; }
}

@media (max-width: 768px) {
  .wp_logo img { width: 22px; height: 22px; }
  .wp_logo_txt { font-size: 15px; }
  .wp_account_page { padding: 18px 8px; }
  .wp_account_card { width: calc(100% - 16px); padding: 30px 20px 24px; }
  /* 폭도 em — 글자만 커지면 메뉴가 접혀 항목 높이가 제각각이 된다(§1-1 ④-3·moca §15-3-4).
     30em 으로 넓힌 것은 큰 배율에서 "구글 캘린더 가져오기"가 한 줄에 들어가게 하기 위함이다(2026-08-30 지적).
     좁은 폰에서는 98vw 가 잡으므로 화면을 넘지 않는다 — 메뉴 드로어는 화면을 거의 덮어도 무방하다. */
  /* 오른쪽에 닫기용 여백을 **고정 폭**(엄지 하나 56px)으로 남긴다 — 종전 98vw 는 글자 배율에 따라 남는 띠가 들쭉날쭉했고 큰 글자에선 눌러 닫을 수 없었다(2026-09-02 지적) */
  .wp_side { width: min(30em, calc(100vw - 56px)); }
  

  
  
  

  /* POP_DAYLIST — 모바일에서는 460px 고정 레이아웃을 팝업 바디 높이로 늘린다. */
  .moca_popup_body .wpl_daylist_layout.moca_layout_fixed { flex: 1 1 auto !important; height: 100% !important; min-height: 0; }

  /* POP_DAYLIST 챌린지 트레이 — 작은 팝업에서 일정 영역을 과도하게 덩지 않는다. */
  .wpl_clg_body { max-height: 220px; max-height: min(220px, 34dvh); }
}

@media (max-width: 480px) {
  .wp_login_hero { height: 410px; min-height: 410px; background-size: auto 740px; }
  .wp_login_panel { margin-top: -54px; padding-right: 12px; padding-left: 12px; }
  .wp_login_card { padding: 28px 22px 24px; border-radius: 27px; }
  .wp_login_intro { margin-bottom: 17px; }
  .wp_login_intro strong { font-size: 17px; }
  .wp_login_intro span { font-size: 12px; }
  .wp_login_card .wp_auth_field input { height: 47px; }
  .wp_login_card .wp_auth_links a { padding: 0 8px; }
}

@media (max-width: 359px) {/* 아주 좁은 화면(구형 폰 등)만 1열로 되돌린다 — 2열이 성립하지 않는 폭이다. */

  .wp_side { width: 300px; }
  
  
  
}

@media (max-width: 480px), (max-width: 768px) and (hover: none) and (pointer: coarse) {/* 설정 팝업의 가로형 카드는 PC에서 제목과 컨트롤을 나란히 둔다.
   실제 터치 모바일 또는 480px 이하에서는 카드 내부도 한 열로 전환한다. */

  .wps_body { overflow: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-right: 0; }
  .wps_sec { gap: 10px; padding: 12px; }
  .wps_sec_inline { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .wps_grid_actions { grid-template-columns: auto minmax(0, 1fr); }   /* 좁은 폭은 한 줄에 하나·칩 전체 폭 — 2열이면 3개째가 혼자 남는다(2026-09-06 지시 "한 줄로 안 되면 3줄로, 가로로 채우게") */
  .wps_group .moca_checkbox_label { min-height: 40px; padding: 0 9px 0 9px; font-size: 14px; }   /* 칩 안쪽 여백 — 폰에서 4px 로 덮어 글자가 테두리에 붙었다 → 18px 은 과해 절반 9px(2026-09-06 지적 2회) */
  .wps_font_control { grid-template-columns: minmax(0, 1fr); }
  .wps_font_reset { width: 100%; min-height: 40px; }
  .wps_withdraw_action, .wps_withdraw_buttons { display: grid; grid-template-columns: minmax(0, 1fr); }
  .wps_withdraw_btn, .wps_withdraw_cancel, .wps_withdraw_submit { width: 100%; min-height: 44px; }
}

/* MDI 분할로 좁아진 패널도 모바일과 같은 설정 배치를 쓴다. */
.mdi_ly.mdi_narrow .wps_body { overflow: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-right: 0; }
.mdi_ly.mdi_narrow .wps_sec { gap: 10px; padding: 12px; }
.mdi_ly.mdi_narrow .wps_sec_inline { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.mdi_ly.mdi_narrow .wps_grid_actions { grid-template-columns: auto minmax(0, 1fr); }
.mdi_ly.mdi_narrow .wps_group .moca_checkbox_label { min-height: 40px; padding: 0 9px 0 9px; font-size: 14px; }
.mdi_ly.mdi_narrow .wps_font_control { grid-template-columns: minmax(0, 1fr); }
.mdi_ly.mdi_narrow .wps_font_reset { width: 100%; min-height: 40px; }

@media (max-width: 540px) {/* CAL001 — 540px 이하는 엔진 page_wrap 패딩이 15px→12px 이므로 뷰포트 채움 계산도 24px 로 맞춘다. */

  .wp_cal_shell { --wp-cal-page-gutter: 24px; }
}

@media (max-width: 480px) {/* POP_MYCAL / POP_SUBCAL / POP_CALCOLOR — 좁은 폭에서 행이 겹치지 않게 줄바꿈·터치영역 확대 */

  .wp_pop_toolbar { padding: 10px; }
  /* 터치 타깃 최소 34px — 단, 글자 배율이 더 크면(--wp-control-h) 그쪽을 따른다(34 고정으로 되레 줄이지 않게 max) */
  .wpm_mini { min-height: max(34px, var(--wp-control-h)); }
  .wp_pop_icon_btn { width: max(34px, var(--wp-control-h)); height: max(34px, var(--wp-control-h)); }
  .wpc_found_row { flex-wrap: wrap; }
  .wcl_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }   /* 3열 유지 — 줄이 곧 색상(파스텔|진한|선명한). 상자는 글자에 맞춰 자라 좁아도 넘치지 않는다 */
}
.mdi_ly.mdi_narrow .wp_pop_toolbar { padding: 10px; }
.mdi_ly.mdi_narrow .wp_pop_icon_btn { width: max(34px, var(--wp-control-h)); height: max(34px, var(--wp-control-h)); }

@media (max-width: 768px) {/* POP_SCHVIEW / POP_SCHEDULE — 모바일 뷰포트: 팝업이 화면 세로를 쓰게 한다.
   기준높이(data-m-height) 고정 레이아웃 그대로면 위아래 여백만 크게 남는다(2026-08-10 지적).
   호출측이 height 90dvh 로 열고(POP_DAYLIST 와 같은 패턴), 레이아웃이 그 높이를 채운다. */

  .moca_popup_body .wsv_layout.moca_layout_fixed, .moca_popup_body .wsc_layout.moca_layout_fixed, .moca_popup_body .wss_layout.moca_layout_fixed, .moca_popup_body .wps_layout.moca_layout_fixed { flex: 1 1 auto !important; height: 100% !important; min-height: 0; }
}

@media (max-width: 480px), (max-width: 768px) and (hover: none) and (pointer: coarse) {/* withplan 팝업 공통 — 모바일에서 푸터 버튼은 전체폭 균등 분할(POP_SETTING 과 통일 — 2026-08-10 지적).
   우측정렬 고정폭 버튼은 좁은 화면에서 터치 영역이 작다. 4버튼(일정 상세)은 50% 기준으로 2×2 로 감긴다. */

  .moca_popup_body .pop_btn_area { flex-wrap: wrap; gap: 8px; }
  .moca_popup_body .pop_btn_area button { flex: 1 1 calc(50% - 8px); height: auto; min-height: max(44px, var(--wp-control-h)); font-size: 14px; }
}
.mdi_ly.mdi_narrow .pop_btn_area { flex-wrap: wrap; gap: 8px; }
.mdi_ly.mdi_narrow .pop_btn_area button { flex: 1 1 calc(50% - 8px); height: auto; min-height: max(44px, var(--wp-control-h)); font-size: 14px; }

@media (max-width: 480px) {/* POP_SCHVIEW / POP_SCHEDULE — 좁은 폭: 정보행 세로 전환·알림 2열·시간콤보 줄바꿈·버튼 터치영역 */

  .wsv_row { flex-direction: column; gap: 2px; }
  .wsv_th { flex-basis: auto; min-width: 0; }
  .wsc_notice { grid-template-columns: repeat(2, auto minmax(0, 1fr)); }
  .wsc_cal { grid-template-columns: auto minmax(0, 1fr); }
  .wsc_when:has(> .wsc_time) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .wsc_when:has(> .wsc_time) > .moca_ica { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .wsc_when:has(> .wsc_time) > .wsc_time { width: 100%; min-width: 0; }
  #div_repeatPick { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 8px; }
  #div_repeatPick[hidden] { display: none !important; }
  #div_repeatPick > .wsc_repeat, #div_repeatPick > #div_repeatCnt, #div_repeatPick > #div_repeatCnt > .wsc_repeat { width: 100%; min-width: 0; }
}

/* (2026-09-02) 좁은 폭 + 큰 글자에서 알림 체크를 1열로 낮추던 규칙은 뺐다 — 10줄이 되어 「사용자지정」과
   그 입력줄이 팝업 스크롤 밖으로 밀렸다(실측 지적). 2열(≤768 규칙)을 유지하고, 라벨이 안 들어가면 그 칸 안에서만 꺾는다. */

@media (max-width: 480px) {/* POP_CLG / POP_CLGHIST — 좁은 폭: 폼 한 줄→세로, 이모지 6열·터치영역 확대, 랭킹 회수 3칸 축소 */

  .wcg_form_row { flex-direction: column; }
  .wcg_emos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wcg_emo { min-height: max(38px, var(--wp-control-h)); font-size: 18px; }
  .wcg_parti input { width: 20px; height: 20px; }
  .wph_rank_cnt { min-width: 38px; }
}

@media (max-width: 480px) {/* 하루기록 달력 표식 — 좁은 칸에서 펜과 일정 제목이 부딪히는 것을 막는다(2026-09-14).
   390px 뷰포트면 칸이 53px 밖에 안 돼 첫 줄 일정 제목이 칸 끝까지 찬다. 그 자리에 펜이 앉으므로,
   ★ 기록이 있는 칸만 첫 줄에 오른쪽 여백을 준다 — 제목은 그만큼 일찍 말줄임되고 펜은 늘 온전히 보인다.
   기록이 없는 칸은 여백 없이 폭을 다 쓴다(대다수 날이 여기 해당한다). */
  /* 종전엔 칸 우측 상단의 펜(10px 고정)을 피하려고 첫 줄에 오른쪽 여백을 줬다. 기록이 «줄»로
     내려오면서 그 자리를 다투지 않으므로 여백을 없앤다 — 제목이 칸 폭을 다 쓴다(2026-09-15 「시안 3」).
     .wp_diary_mark 는 달력에서 더 쓰지 않는다(일자목록 카드 아이콘으로만 남는다). */
  .wp_cal_shell .msc_bar:has(.wp_diary_ico) em { font-weight: 700; }
}