/*
 * MY GREEN — 휴대폰에서 실제로 쓰기 위한 보정
 *
 * styles.css / mobile.css 는 프로토타입에서 그대로 가져온 것이라 손대지 않고,
 * app.css 다음에 이 파일을 마지막으로 불러 덮어쓴다.
 *
 * 목적
 *   1. 글씨 키우기 — 9~12px 로 잡혀 있던 잔글씨를 필드에서 읽을 수 있는 크기로 올린다.
 *   2. 아이폰(사파리) — 입력칸 자동 확대 방지, 노치·홈바 여백, -webkit- 접두사 보완.
 *   3. 안드로이드(크롬) — 확대 허용, 시스템 한글 글꼴, 손가락에 맞는 터치 영역.
 *
 * 두 기기의 처리 방식이 같아서 브라우저를 구분하지 않고 한 벌로 처리한다.
 * (아이패드는 데스크톱으로 위장하기 때문에 UA 판별은 오히려 새는 구멍이 된다.)
 */

/* ── 모든 화면 공통 ─────────────────────────────────────────────── */

/* 가로 모드로 돌렸을 때 사파리가 글씨를 제멋대로 키우는 것을 막는다. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* iOS 18 이전 사파리는 접두사 없는 backdrop-filter 를 모른다.
   그대로 두면 상단바·하단바가 거의 투명해져 글씨가 배경과 겹친다. */
.topbar{-webkit-backdrop-filter:blur(14px)}
.bottom-nav{-webkit-backdrop-filter:blur(18px)}

/* 한 손으로 스크롤할 때 화면 전체가 딸려 나오지 않게 한다. */
body{overscroll-behavior-y:none}

/* ── 태블릿·휴대폰 (터치 기기) ──────────────────────────────────── */
@media (max-width:1024px){

  /* 기기에 이미 들어 있는 한글 글꼴을 쓴다.
     아이폰은 Apple SD Gothic Neo, 안드로이드는 system-ui 가 Roboto/본고딕으로 잡힌다.
     Arial 로 시작하던 기존 스택은 한글이 대체 글꼴로 밀려 흐릿하게 보였다. */
  body{
    font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',
      system-ui,'Malgun Gothic',sans-serif;
    -webkit-font-smoothing:antialiased;
    letter-spacing:-.01em;
  }

  /* 사파리는 글씨가 16px 보다 작은 입력칸을 누르면 화면을 확대해 버린다.
     한 칸 채울 때마다 화면이 튀지 않도록 모든 입력 요소를 16px 이상으로 맞춘다.
     아래 줄은 기존 css 가 클래스로 크기를 지정해 둔 칸까지 확실히 덮기 위한 것이다. */
  input,select,textarea,
  .course-search input,.filter-bar input,.pick-grid select,.memo-row textarea,
  .round-meta input,.round-meta select,.score-input,.score-turn .score-input{font-size:16px}

  /* 손가락으로 정확히 누를 수 있는 높이(48px)를 입력칸 전반에 맞춘다. */
  .course-search input,.course-search button,.filter-bar input,
  .pick-grid select,.round-meta input,.round-meta select{min-height:48px}
  .score-input,.score-turn .score-input{height:44px}
  .pager a{display:inline-flex;align-items:center;min-height:44px}

  /* 아이폰이 입력칸에 제멋대로 넣는 안쪽 그림자와 둥근 모서리를 지운다. */
  input[type=text],input[type=search],input[type=number],
  input[type=date],input[type=tel],textarea{
    -webkit-appearance:none;appearance:none;border-radius:9px;
  }
  /* 날짜 칸은 아이폰에서 글자가 가운데로 몰리고 높이가 줄어든다. */
  input[type=date]{text-align:left;min-height:48px;line-height:normal}

  /* 스코어 칸의 위·아래 화살표(스피너)를 지운다. 손가락으로 누르기엔 너무 작고
     좁은 화면에서는 숫자가 들어갈 자리를 빼앗는다. 숫자 자판은 그대로 뜬다. */
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
  input[type=number]{-moz-appearance:textfield;appearance:textfield}

  /* 화살표까지 지워지지 않도록 선택칸은 직접 그려 넣는다.
     .pick-grid select / .round-meta select 은 기존 css 에서 background 를
     한 번에 지정하고 있어, 화살표가 지워지지 않도록 같이 적어 준다. */
  select,.pick-grid select,.round-meta select{
    -webkit-appearance:none;appearance:none;
    background-color:white;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23718078' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;
    padding-right:36px;
  }

  /* 스코어 선택칸은 9개가 한 줄에 들어가야 해서 화살표를 넣을 자리가 없다.
     위 규칙에서 화살표와 오른쪽 여백을 다시 빼고 숫자만 가운데에 남긴다. */
  .score-select,.score-turn .score-select{
    background-image:none;padding:0;
    text-align:center;text-align-last:center;
  }

  /* 장갑 낀 손으로도 눌리도록 최소 44px 을 지킨다. */
  a.nav-item,.bottom-nav-item,.pager a,.ghost-btn,.danger-btn,.primary-btn{
    touch-action:manipulation;
  }

  /* 본문 잔글씨 키우기 ------------------------------------------- */
  .hero p{font-size:15px;line-height:1.85}
  .eyebrow,.section-label{font-size:12px}
  .panel h2,.card-title h2{font-size:21px}
  .card-title p{font-size:13px;line-height:1.6}
  .empty{font-size:14px;line-height:1.7}

  .stats p{font-size:13px}
  .stats small{font-size:12px}

  .date-box{width:52px;height:52px}
  .date-box b{font-size:18px}
  .date-box small{font-size:12px}
  .recent-item{padding:13px 2px}
  .recent-info b{font-size:15px;line-height:1.45}
  .recent-info small{font-size:12px;line-height:1.6}
  .recent-score b{font-size:21px}
  .recent-score small{font-size:12px}
  .record-card .recent-info b{font-size:16px}
  .record-card .recent-score b{font-size:25px}

  .round-heading p,.page-title p{font-size:15px;line-height:1.7}
  .steps li{font-size:12px}
  .steps span{width:27px;height:27px}
  .number{font-size:12px}
  .number small{font-size:11px}

  .course-item b{font-size:15px}
  .course-item small{font-size:12px;line-height:1.6}
  .course-item .course-segments em{font-size:11px}
  .course-search>span{font-size:26px}
  .course-search button{font-size:15px;padding:0 22px}

  .round-meta label{font-size:12px}
  .pick-grid label,.filter-bar span{font-size:12px}
  .pick-note{font-size:13px;line-height:1.7}

  .score-table th{font-size:12px}
  .score-table td{font-size:13px}
  .score-turn h3{font-size:14px}
  .score-turn .score-table tbody th{font-size:12px}
  /* 코스 이름 줄만은 9칸이 한 줄에 들어가야 해서 11px 로 둔다. */
  .score-turn .course-row td,.score-table .course-row td{font-size:11px}
  .score-summary span,.score-summary small{font-size:12px}
  .score-summary strong{font-size:25px}
  .score-summary .total strong{font-size:30px}

  .memo-row label{font-size:14px}
  .save-row p{font-size:13px;line-height:1.6}
  .notice-bar,.form-error,.restore-bar p{font-size:14px;line-height:1.75}

  .detail-table td:first-child{font-size:12px}
  .chip span{font-size:12px}
  .chip strong{font-size:18px}
  .memo-box h3{font-size:13px}
  .memo-box p{font-size:15px}
  .meta-line{font-size:12px}
  .pager{font-size:14px}
  .toast{font-size:15px;padding:15px 24px}
  .empty-lg{font-size:15px}

  /* 버튼 글씨도 함께 올린다. 작은 글씨는 눌러도 되는지 헷갈리게 만든다. */
  .primary-btn{font-size:15px}
  .ghost-btn,.danger-btn{font-size:14px}
  .bottom-nav-item{font-size:12px}
}

/* ── 휴대폰 ────────────────────────────────────────────────────── */
@media (max-width:700px){

  /* 아이폰 노치·다이내믹 아일랜드에 상단바가 가리지 않게 한다. */
  .topbar{
    height:auto;min-height:64px;
    padding-top:env(safe-area-inset-top);
    padding-left:max(18px,env(safe-area-inset-left));
    padding-right:max(18px,env(safe-area-inset-right));
  }

  /* 홈 인디케이터(막대) 위로 본문이 끝나도록 여백을 잡는다. */
  main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}

  .hero h1{font-size:31px;line-height:1.3}
  .hero p{font-size:14px}
  .round-heading h1,.page-title h1{font-size:29px}

  /* 스코어 입력칸 — 15px 이면 사파리가 누를 때마다 화면을 확대한다.
     16px 로 올리고 높이도 손가락에 맞춰 키운다. */
  .score-turn .score-input,.score-input{font-size:16px;height:44px}
  .score-turn .score-table tbody th{font-size:11px;padding:8px 2px}
  .score-table th{padding:9px 2px}

  /* 스코어 칸에 들어가는 가장 긴 글자는 세 자리(+10)다. 글씨를 16px 밑으로 내리면
     사파리가 누를 때마다 화면을 확대하므로, 글씨를 줄이는 대신 칸을 넓혀서 맞춘다.
     표를 카드 좌우 여백(16px)만큼 바깥으로 빼고 칸 사이 간격을 1px 로 줄였다.
     왼쪽 이름 칸(PAR·SCORE)은 글자가 잘리지 않도록 그대로 둔다. */
  .round-page .score-table-wrap{margin-left:-16px;margin-right:-16px}
  .score-turn .score-table th:first-child{width:40px}
  .score-turn .score-table td{padding-left:1px;padding-right:1px}
  .score-select{letter-spacing:-.02em}

  /* 메모칸도 확대 방지 기준(16px)을 지킨다. */
  .memo-row textarea{font-size:16px;line-height:1.7;min-height:100px}

  /* 검색·필터 입력칸 */
  .course-search input,.filter-bar input,.pick-grid select,
  .round-meta input,.round-meta select{font-size:16px;min-height:48px}

  /* 코스 추가 화면 — 좁은 화면에서는 입력칸을 한 줄에 하나씩 놓는다. */
  .field-grid{grid-template-columns:1fr}
  .field input,.field select{font-size:16px;min-height:48px}
  .segment-name{font-size:16px;height:44px}
  .segment-head h3{font-size:12px}
  .segment-remove{width:38px;height:38px}

  /* 요약 숫자는 이 화면에서 가장 먼저 보는 정보다. */
  .score-summary span,.score-summary small{font-size:12px}
  .score-summary strong{font-size:24px}
  .score-summary .total strong{font-size:28px}

  /* 홀별 점수 동그라미가 작아 숫자가 뭉개지던 것을 키운다. */
  .hole-score{width:30px;height:30px;font-size:13px}

  .chip{padding:10px 13px}
  .chip strong{font-size:17px}
  .detail-actions .ghost-btn,.detail-actions .danger-btn{font-size:14px;padding:12px 16px}
}

/* ── 아주 좁은 화면 (아이폰 SE 등 360px 이하) ───────────────────── */
@media (max-width:360px){
  /* 9홀이 한 줄에 들어가야 하므로 좌우 여백만 줄이고
     글씨(16px)와 누르는 높이(44px)는 그대로 지킨다. */
  .score-turn .score-table th:first-child{width:34px}
  .score-turn .score-table td{padding-left:0;padding-right:1px}
  /* 이 폭에서는 SCORE 라는 글자가 이름 칸에 다 들어가지 못해 끝이 잘려 보였다.
     좌우 여백을 없애고 글씨를 한 단계만 줄여 온전히 보이게 한다. */
  .score-turn .score-table tbody th{font-size:10px;padding-left:0;padding-right:0}

  /* 기록 상세의 스코어 동그라미가 칸보다 커서 살짝 삐져나오던 것을 맞춘다. */
  .hole-score{width:28px;height:28px}
  .recent-info b{font-size:14px}
}