/* ==============================
   모바일 반응형 CSS (추가용)
   - 기존 코드 수정/삭제 없이, style.css 맨 아래에 "추가"로 붙여넣기
   - 대상: app-layout / sidebar / main-content / card-grid / modal 등
   ============================== */

/* 태블릿/모바일 공통 (768px 이하) */
@media (max-width: 768px) {

    /* 모바일에서는 화면 전체 스크롤이 필요하므로 overflow 제한 해제 */
    body {
      height: auto;
      overflow: auto;
    }
  
    /* 레이아웃: 좌우(사이드바+메인) -> 상하(사이드바 위, 메인 아래) */
    .app-layout {
      flex-direction: column;
      height: auto;
      min-height: 100vh;
    }
  
    /* 사이드바를 상단 섹션처럼 */
    .sidebar {
      width: 100%;
      border-right: none;
      border-bottom: 1px solid var(--border);
      padding: 18px 16px;
      position: sticky; /* 상단 고정 */
      top: 0;
      z-index: 50;
      max-height: none;
    }
  
    /* 브랜드 영역: 과하게 커 보이지 않게 조절 */
    .brand h2 {
      font-size: 20px;
    }
    .brand .subtitle {
      font-size: 11px;
      letter-spacing: 1.5px;
    }
  
    /* 캐릭터 추가 버튼: 모바일 터치 영역 확보 */
    .btn-new-char {
      margin-top: 14px;
      padding: 14px;
      border-radius: 10px;
      font-size: 15px;
    }
  
    /* 로그인 섹션: 상단에서 길어지지 않게 간격 조절 */
    .auth-section {
      margin-top: 16px; /* 기존 auto를 모바일에서는 자연스러운 흐름으로 */
      margin-bottom: 0;
      padding-top: 16px;
    }
  
    .auth-guide {
      font-size: 12px;
      margin-bottom: 10px;
    }
  
    .btn-auth {
      padding: 12px 0;
      font-size: 14px;
      border-radius: 10px;
    }
  
    /* 유저 프로필 영역 */
    .user-info {
      padding: 12px;
      border-radius: 12px;
    }
    #display-username {
      font-size: 15px;
    }
  
    .btn-mini-sync,
    .btn-mini-logout {
      padding: 12px 0;
      border-radius: 10px;
    }
  
    /* 메인 컨텐츠 패딩 축소 */
    .main-content {
      padding: 16px;
      overflow: visible; /* 모바일에서는 body 스크롤을 쓰는 편이 안정적 */
    }
  
    .top-bar {
      margin-bottom: 16px;
    }
    .top-bar h1 {
      font-size: 22px;
    }
  
    .login-required-note {
      font-size: 14px;
      margin-top: 8px;
    }
  
    /* 카드 그리드: 1열 고정 */
    .card-grid {
      grid-template-columns: 1fr;
      gap: 14px;
      padding-bottom: 24px;
    }
  
    /* 카드 내부 여백 살짝 줄이기 */
    .char-card {
      padding: 16px;
      border-radius: 14px;
    }
  
    .card-header {
      gap: 12px;
      margin-bottom: 14px;
      padding-bottom: 12px;
    }
  
    .char-img {
      width: 56px;
      height: 56px;
      border-radius: 12px;
    }
  
    .header-info h3 {
      font-size: 16px;
    }
    .header-info p {
      font-size: 12px;
    }
  
    /* 재료 그리드: 모바일에서 너무 촘촘하면 터치 불편 -> 최소 폭 확대 */
    .material-grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
    }
  
    .mat-item {
      padding: 12px 10px;
      min-height: 118px;
    }
  
    .mat-img {
      width: 44px;
      height: 44px;
    }
  
    .mat-name {
      font-size: 12px;
      margin-bottom: 8px;
    }
  
    /* 입력바(재화 입력) 터치용으로 높이/간격 최적화 */
    .control-bar {
      height: 44px;
      padding: 6px 10px;
      border-radius: 10px;
    }
  
    .inline-input {
      font-size: 16px;
      padding: 10px 10px;
      height: 44px;     /* control-bar 높이에 맞춤 */
      line-height: 20px;
    }
  
    .target-text {
      font-size: 12px;
      margin: 0 8px;
    }
  
    .btn-fill {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      font-size: 11px;
    }
  
    /* 모달: 모바일 화면에 맞게 폭 제한 */
    .modal-content {
      width: min(92vw, 520px);
      padding: 18px;
      border-radius: 14px;
    }
  
    .modal-header {
      margin-bottom: 16px;
    }
    .modal-header h2 {
      font-size: 18px;
    }
  
    /* 에디터 모달 내부 입력 간격 */
    .row-inputs {
      gap: 8px;
    }
  
    /* 스킬 입력 표: 모바일에서 너무 빡빡하면 가독성↓ */
    .skill-row {
      grid-template-columns: 52px 1fr 18px 1fr;
      gap: 6px;
      font-size: 12px;
    }
  
    /* 로그인/회원가입 모달 */
    .auth-content {
      width: min(92vw, 460px);
    }
  
    .auth-form input[type="text"],
    .auth-form input[type="password"] {
      padding: 14px 14px;
      border-radius: 12px;
      font-size: 15px;
    }
  
    .auth-form .btn-save {
      padding: 14px;
      border-radius: 12px;
      font-size: 16px;
    }
  
    /* 작은 화면에서 credits는 너무 길면 숨김/축소 */
    .credits {
      display: none;
    }
  }
  
  /* 더 작은 폰 (480px 이하) */
  @media (max-width: 480px) {
  
    .sidebar {
      padding: 16px 14px;
    }
  
    .btn-new-char {
      padding: 13px;
      font-size: 14px;
    }
  
    .top-bar h1 {
      font-size: 20px;
    }
  
    .char-card {
      padding: 14px;
    }
  
    .material-grid {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
  
    .modal-content {
      width: 94vw;
      padding: 16px;
    }
  
    .skill-row {
      grid-template-columns: 48px 1fr 16px 1fr;
    }
  }
  
  /* mobile.css - 맨 아래에 추가 (종합 계산기 모바일 최적화) */

/* 1. [중요] 계산기 모달 크기 및 스크롤 설정 (덮어쓰기) */
@media (max-width: 768px) {
    
    /* 모달 전체 크기를 화면에 꽉 차게 조정 */
    .planner-content, 
    .planner-content.expanded {
        width: 95% !important;      /* 화면 너비 95% */
        max-width: none !important; /* PC용 최대 너비 제한 해제 */
        height: 85vh !important;    /* 높이는 화면의 85% */
        display: flex;
        flex-direction: column;
    }

    /* 내부 레이아웃: 세로 정렬(Column)로 강제 변경 */
    .planner-layout {
        display: flex;
        flex-direction: column !important;
        overflow-y: auto !important; /* 세로 스크롤 허용 */
        padding-bottom: 40px;        /* 하단 여백 확보 */
    }

    /* 2. 왼쪽 패널 (입력창) 스타일 수정 */
    .planner-left-panel,
    .planner-content.expanded .planner-left-panel {
        width: 100% !important;      /* [핵심] 450px 고정을 해제하고 100%로 변경 */
        border-right: none !important; /* PC용 세로 구분선 제거 */
        margin-right: 0 !important;
        padding-right: 0 !important;
        
        /* 모바일용 가로 구분선 추가 */
        border-bottom: 2px dashed #333; 
        padding-bottom: 25px;
        margin-bottom: 25px;
        flex-shrink: 0;
    }

    /* 3. 오른쪽 패널 (결과창) 스타일 수정 */
    .planner-right-panel {
        width: 100% !important;      /* 너비 100% */
        opacity: 1 !important;       /* 투명도 문제 해결 */
        height: auto !important;     /* 높이 자동 */
        padding-left: 0 !important;
        overflow: visible !important; /* 내부 스크롤 대신 전체 스크롤 사용 */
        display: block !important;    /* Flex 대신 Block으로 안정화 */
    }

    /* 계산 전에는 숨김 (JS가 hidden 클래스를 제어함) */
    .planner-right-panel.hidden {
        display: none !important;
    }

    /* 결과 아이템 그리드 (작은 화면에 맞춰 크기 조정) */
    .result-grid-layout {
        display: grid !important;
        /* 아이템 최소 크기를 70px로 줄여서 한 줄에 3~4개씩 나오게 함 */
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
        gap: 8px;
        max-height: none !important; /* PC용 높이 제한 해제 */
    }

    /* 결과 카드 내부 폰트 사이즈 미세 조정 */
    .result-card-item {
        padding: 10px 4px;
    }
    .result-card-item img {
        width: 36px; height: 36px; /* 이미지 약간 축소 */
    }
    .result-card-item .name {
        font-size: 10px;
    }
    .result-card-item .count {
        font-size: 14px;
    }

    /* 모바일에서는 '계산하기' 버튼 누르면 결과창이 바로 아래 뜨므로 강조 */
    .result-header {
        margin-top: 10px;
        border-bottom: 2px solid var(--accent);
    }
}