/* ==========================================================
   투자한판 모바일 안정화 패치
   2026-08-13
   - 기존 데스크톱 디자인은 유지
   - 720px 이하에서 고정폭/nowrap 때문에 생기는 가로 넘침 방지
========================================================== */

html,body{max-width:100%;overflow-x:hidden}
img,svg,canvas,video{max-width:100%}
button,input,select,textarea{max-width:100%}
.wrap,.shell,.page,main,section,article,.panel{min-width:0}

@media(max-width:720px){
  /* 공통: flex/grid 자식이 내용 폭 때문에 부모를 밀어내지 않도록 */
  .wrap>*,.shell>*,main>*,section>*,article>*,.panel>*{min-width:0}
  .section-head,.sectionHead{min-width:0}
  h1,h2,h3,p,strong,a,button{word-break:keep-all;overflow-wrap:break-word}

  /* 홈 */
  .thought-banner,.tag-list,.quote-card,.hub-card{max-width:100%}
  .tag-list{min-width:0}
  .tag{max-width:100%;white-space:normal}
  .quote-code{white-space:normal;word-break:break-word;overflow-wrap:anywhere}

  /* 시장 흐름 */
  .marketSummaryLayout{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
  }
  .marketSummaryLayout .marketBreadthGrid{display:contents!important}
  .marketSummaryLayout .marketCard,
  .marketSummaryLayout .marketPromptCard,
  .marketSummaryLayout .marketFxCard{
    grid-column:1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .marketSummaryLayout .marketCard{grid-row:auto!important}
  .marketSummaryLayout .marketPromptCard{grid-row:auto!important}
  .marketSummaryLayout .marketFxCard{grid-row:auto!important}
  .marketPromptCard,.marketFxCard{padding:15px!important;overflow:hidden}
  .promptCardHead{min-width:0;flex-wrap:wrap;align-items:flex-start}
  .summaryMiniLabel{white-space:normal!important;text-align:right}
  .marketPromptCard .promptControls{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%;
    min-width:0;
  }
  .marketPromptCard select,
  .marketPromptCard .primaryBtn{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .marketPromptCard .promptResult,
  .marketPromptCard textarea,
  .marketPromptCard .promptResultActions{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .marketPromptCard .promptResultActions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .marketPromptCard .promptResultActions .ghostBtn,
  .marketPromptCard .promptResultActions .primaryBtn{
    width:100%!important;
    min-width:0!important;
  }
  .heroDateControl{min-width:0;max-width:100%}
  .heroDateControl .dateJumpWrap{min-width:0}
  .dateControls{min-width:0;flex-wrap:wrap}
  .dateControls .dateSelect{min-width:0}
  .marketCalendarHead{align-items:flex-start!important;flex-direction:column!important}
  .marketCalendarMore{white-space:normal!important}

  /* 종목 상세: 상단 도구를 2열이 아니라 모바일 안전 그리드로 */
  .selectedStockBar{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  .selectedStockIdentity,.selectedStockRight,.selectedStockTools{min-width:0!important;max-width:100%!important}
  .selectedStockTools{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    width:100%!important;
    justify-content:stretch!important;
    gap:8px!important;
  }
  .detailDateSelect{
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .stockMarketLink,
  .stockPersonalLink,
  .stockDashboardLink,
  .selectedStockTools .favoriteToggleBtn{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding-left:8px!important;
    padding-right:8px!important;
    white-space:normal!important;
    text-align:center;
  }
  .selectedStockTools .favoriteToggleBtn{display:flex!important}
  .sameThemeStock{min-width:0!important}

  /* 대시보드 */
  .dashboardGrid,.dashboardGrid>*{min-width:0}
  .panelHead{min-width:0;flex-wrap:wrap}
  .panelHead>div:first-child{min-width:0;flex:1 1 180px}
  .panelHeadActions{
    width:100%;
    min-width:0;
    justify-content:flex-start!important;
    gap:8px!important;
  }
  .panelHeadActions .textBtn,
  .panelHeadActions .linkBtn{max-width:100%;white-space:normal;text-align:left}
  .promptControls{min-width:0}
  .promptResult,.promptResultActions{min-width:0;max-width:100%}

  /* 국내주식 탐색기 */
  .finderResultHead{align-items:stretch!important;flex-direction:column!important;gap:10px!important}
  .sortToggle{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .sortBtn{width:100%!important;min-width:0!important;padding:8px 6px!important;white-space:normal!important}
  .themeModalDialog{max-width:calc(100vw - 20px)!important}

  /* 지표 랭킹 */
  .hp-page-rank .filterHead{align-items:stretch!important;flex-direction:column!important}
  .hp-page-rank .filterControls{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    min-width:0!important;
  }
  .hp-page-rank .filterControls .topNote{grid-column:1/-1}
  .hp-page-rank .filterControls .input{width:100%!important;min-width:0!important}
  .rankContextRight{flex-wrap:wrap}

  /* 날짜별 시장 상세 */
  .searchRow{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
  }
  .searchInputWrap{grid-column:auto!important;min-width:0}
  .searchRow input,.searchRow select{width:100%!important;min-width:0!important}
  .dateSpinnerPanel,.dateSpinnerWrap{max-width:100%;min-width:0}

  /* ETF 상세 */
  .etfInfo,.summary,.components{grid-template-columns:minmax(0,1fr)!important}
  .grid,.grid>*{min-width:0!important;max-width:100%!important}
  .chartHead{flex-wrap:wrap}

  /* 개인맞춤 */
  .account-hero,.account-content,.tab-panel,.record-row{min-width:0}
  .account-summary,.account-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .record-row>*{min-width:0}
}

@media(max-width:430px){
  /* 아주 좁은 기기에서는 상단 액션도 한 열로 내려 안정성 우선 */
  .selectedStockTools{grid-template-columns:1fr!important}
  .detailDateSelect,.stockDashboardLink{grid-column:auto!important}
  .sortToggle{grid-template-columns:1fr!important}
  .account-summary,.account-stats{grid-template-columns:1fr 1fr}
}

/* 2026-09-01: App Shell 안의 모든 화면에 공통 적용되는 모바일 안전 영역 */
body.hp-embedded{width:100%;max-width:100%;margin-inline:0;overflow-x:hidden}
body.hp-embedded :where(.wrap,.shell,.page,.predictionPage,.upgrade-main,.mypage-main,.analysisToolPage){box-sizing:border-box;max-width:100%;min-width:0}

@media(max-width:700px){
  /* 본문 안쪽에 다시 세로 스크롤을 만들던 주요 목록들입니다. 모바일에서는
     목록을 자연 높이로 펼쳐 App Shell의 한 번짜리 스크롤만 사용합니다. */
  :where(.todayStrategyList,.todayStrategyStockList,.hanpanResultList,
    .findStrategyStockList,.findThemeStockList){
    height:auto!important;
    block-size:auto!important;
    max-height:none!important;
    min-height:0!important;
    min-block-size:0!important;
    overflow-y:visible!important;
    overscroll-behavior:auto!important;
    scrollbar-gutter:auto!important;
  }

  /* 긴 제목·종목명·상태 문구가 카드 너비를 밀어내지 않게 합니다. */
  :where(.predictionRecordReportHead,.predictionLifecycleHeadline,.predictionMethodReport>header,.predictionTrackingReport>header,
    .hanpanResultListHead,.hanpanOriginHead,.hanpanChoiceHead,.hanpanMethodStatsHead,.journeyProgressActions,
    .account-hero,.account-hero-actions,.content-head,.panel-toolbar,.product-heading){min-width:0;max-width:100%}
  :where(.predictionRecordReportHead,.hanpanResultListHead,.hanpanOriginHead,.hanpanChoiceHead,.hanpanMethodStatsHead){align-items:flex-start!important;flex-wrap:wrap}
  :where(.predictionRecordReportHead>div,.predictionLifecycleHeadline>*,.hanpanResultCard>*,.hanpanMethodStat>*,.methodPerformanceCard>*){min-width:0}

  /* 한판 진행 버튼은 화면 가장자리에서 잘리지 않고 손가락으로 누르기 쉬운 크기로 유지합니다. */
  .journeyProgressActions{align-items:stretch!important;flex-direction:column!important}
  .journeyMoveButtons{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;width:100%;gap:8px!important}
  .journeyMoveButtons:has(> :only-child){grid-template-columns:1fr!important}
  .journeyProgressActions button{width:100%;min-width:0;min-height:44px!important;white-space:normal!important}

  /* 차트 상단 OHLC가 말줄임 없이 두 줄까지 자연스럽게 보이게 합니다. */
  .chartHanpanOhlc{right:.65rem!important;max-width:none!important;flex-wrap:wrap!important;overflow:visible!important;white-space:normal!important}

  /* 대시보드 결과와 상세 복기 화면 */
  .hanpanGlobalStats{width:100%;min-width:0;flex-wrap:wrap!important;gap:8px 12px!important}
  .hanpanVerdictFilters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%;gap:8px!important}
  .hanpanVerdictFilter{width:100%;min-width:0;justify-content:space-between!important}
  .hanpanResultCard{grid-template-columns:1fr!important;min-width:0;gap:12px!important}
  .hanpanResultActions,.hanpanResultActions a{width:100%}
  .hanpanResultActions a{justify-content:center;min-height:44px}
  .predictionDetailNav{width:100%;margin-bottom:10px!important}
  .predictionDetailNav a{width:auto;min-height:44px!important;font-size:.8rem!important}
  .predictionRecordReport{width:100%;min-width:0;overflow:hidden}
  .predictionRecordReportHead{gap:12px!important}
  .predictionRecordReportHead>button{width:100%;min-height:44px}
  .predictionLifecycleMetrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .predictionVerdictFlow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;padding:10px!important}
  .predictionMethodReportGrid{grid-template-columns:1fr!important}
  .predictionTrackingEndpoints{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important}
  .predictionIndicatorTable{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .predictionIndicatorTable>div{min-width:390px}

  /* 4열 요약은 좁은 기기에서 읽을 수 있는 2열로 고정합니다. */
  .methodPerformanceGrid,.hanpanMethodStats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .methodPerformanceCard,.hanpanMethodStat{min-width:0!important}

  /* 마이페이지·프리미엄의 긴 버튼/코드/설명 */
  .request-meta{flex-wrap:wrap}
  .check-row{min-width:0}
  .check-row>*{min-width:0}
  .account-hero-actions{display:grid!important;grid-template-columns:1fr!important}
  .account-hero-actions>*{width:100%!important;min-width:0}
  .record-row{min-width:0;max-width:100%}
}

@media(max-width:430px){
  .predictionLifecycleMetrics{grid-template-columns:1fr!important}
  .predictionVerdictFlow{gap:6px!important}
  .predictionVerdictFlow b{font-size:.9rem!important}
  .predictionTrackingEndpoints{gap:6px!important;padding:9px!important}
  .methodPerformanceGrid,.hanpanMethodStats{grid-template-columns:1fr!important}
}