/* 01 DEVICE — 디바이스/뷰포트 프로필 변수만 정의한다.
   원칙:
   1) 특정 기기명(Samsung/iPhone 등)으로 분기하지 않는다.
   2) 실제 viewport, orientation, input type, height class를 사용한다.
   3) 이 파일은 색상/컴포넌트 선택자를 직접 꾸미지 않고 '환경 변수'만 제공한다.
   4) 개별 오브젝트 반응형은 해당 오브젝트의 소유 CSS에서 이 변수를 읽는다.
*/

:root{
  /* 앱 셸 */
  --device-app-max-width:720px;
  --device-screen-inline:14px;
  --device-screen-top:10px;
  --device-screen-bottom:10px;

  /* 공통 헤더 */
  --device-header-height:78px;
  --device-profile-avatar:53px;
  --device-profile-home-width:78px;
  --device-profile-study-width:72px;
  --device-profile-home-left:4px;
  --device-profile-study-left:34px;
  --device-profile-shift-y:5px;
  --device-nickname-font:14px;
  --device-nickname-line:18px;
  --device-rank-width:15px;
  --device-rank-height:16px;

  /* 메인 타이틀 — 모든 화면에서 동일한 시각 크기 */
  --device-main-title-width:192px;
  --device-main-title-height:64px;
  --device-title-study-left:108px;
  --device-header-control-top:31px;
  --device-settings-right:6px;

  /* 공통 컨트롤 */
  --device-settings-size:42px;
  --device-home-size:38px;
  --device-home-icon-size:22px;

  /* 팝업/입력 */
  --device-dialog-max-width:430px;
  --device-nickname-dialog-max:360px;
  --device-dialog-gutter:18px;

  /* JS가 실측값으로 갱신하며 키보드/팝업 배치에 사용하는 값 */
  --visual-viewport-height:100dvh;
}

/* 작은 스마트폰 */
:root[data-device="phone-compact"]{
  --device-app-max-width:430px;
  --device-screen-inline:10px;
  --device-screen-top:7px;
  --device-screen-bottom:7px;

  --device-header-height:74px;
  --device-profile-avatar:49px;
  --device-profile-home-width:74px;
  --device-profile-study-width:68px;
  --device-profile-home-left:3px;
  --device-profile-study-left:32px;
  --device-nickname-font:12px;
  --device-nickname-line:16px;
  --device-rank-width:13px;
  --device-rank-height:14px;

  --device-main-title-width:174px;
  --device-main-title-height:58px;
  --device-title-study-left:102px;
  --device-header-control-top:29px;
  --device-settings-right:5px;

  --device-settings-size:40px;
  --device-home-size:38px;
  --device-home-icon-size:22px;
  --device-nickname-dialog-max:340px;
  --device-dialog-gutter:12px;
}

/* 현재 기준: Galaxy S25 Ultra 계열과 비슷한 세로형 스마트폰 */
:root[data-device="phone-standard"]{
  --device-app-max-width:720px;
}

/* 넓은 스마트폰 / 폴더블 중간 폭 */
:root[data-device="phone-wide"]{
  --device-app-max-width:620px;
  --device-screen-inline:18px;
  --device-screen-top:12px;
  --device-screen-bottom:12px;

  --device-header-height:82px;
  --device-profile-avatar:55px;
  --device-profile-home-width:82px;
  --device-profile-study-width:76px;
  --device-profile-home-left:6px;
  --device-profile-study-left:38px;
  --device-nickname-font:14px;
  --device-nickname-line:18px;
  --device-rank-width:15px;
  --device-rank-height:16px;

  --device-main-title-width:204px;
  --device-main-title-height:68px;
  --device-title-study-left:116px;
  --device-header-control-top:33px;
  --device-settings-right:8px;
}

/* 태블릿 / 펼친 폴더블 */
:root[data-device="tablet"]{
  --device-app-max-width:780px;
  --device-screen-inline:24px;
  --device-screen-top:16px;
  --device-screen-bottom:16px;

  --device-header-height:88px;
  --device-profile-avatar:58px;
  --device-profile-home-width:88px;
  --device-profile-study-width:84px;
  --device-profile-home-left:8px;
  --device-profile-study-left:44px;
  --device-nickname-font:15px;
  --device-nickname-line:19px;
  --device-rank-width:16px;
  --device-rank-height:17px;

  --device-main-title-width:216px;
  --device-main-title-height:72px;
  --device-title-study-left:132px;
  --device-header-control-top:36px;
  --device-settings-right:10px;

  --device-settings-size:44px;
  --device-home-size:42px;
  --device-home-icon-size:24px;
  --device-dialog-max-width:520px;
  --device-nickname-dialog-max:440px;
  --device-dialog-gutter:24px;
}

/* PC / 큰 화면. 현재는 중앙 앱 레이아웃을 유지하고, 차후 다중 패널로 확장한다. */
:root[data-device="desktop"]{
  --device-app-max-width:860px;
  --device-screen-inline:30px;
  --device-screen-top:18px;
  --device-screen-bottom:18px;

  --device-header-height:92px;
  --device-profile-avatar:60px;
  --device-profile-home-width:92px;
  --device-profile-study-width:88px;
  --device-profile-home-left:10px;
  --device-profile-study-left:48px;
  --device-nickname-font:15px;
  --device-nickname-line:20px;
  --device-rank-width:17px;
  --device-rank-height:18px;

  --device-main-title-width:228px;
  --device-main-title-height:76px;
  --device-title-study-left:144px;
  --device-header-control-top:38px;
  --device-settings-right:12px;

  --device-settings-size:46px;
  --device-home-size:44px;
  --device-home-icon-size:25px;
  --device-dialog-max-width:560px;
  --device-nickname-dialog-max:460px;
  --device-dialog-gutter:28px;
}

/* 세로 여유가 적은 경우. 오브젝트를 직접 움직이지 않고 공통 여백만 압축한다. */
:root[data-height="short"]{
  --device-screen-top:4px;
  --device-screen-bottom:4px;
  --device-header-height:66px;
  --device-profile-avatar:44px;
  --device-main-title-width:162px;
  --device-main-title-height:54px;
  --device-header-control-top:24px;
}


/* 폰 가로 모드는 기기 분류를 바꾸지 않고 여백만 조정한다. */
:root[data-orientation="landscape"][data-device^="phone"]{
  --device-screen-inline:14px;
  --device-screen-top:4px;
  --device-screen-bottom:4px;
  --device-header-height:60px;
  --device-profile-avatar:40px;
  --device-profile-home-width:64px;
  --device-profile-study-width:60px;
  --device-profile-home-left:2px;
  --device-profile-study-left:24px;
  --device-main-title-width:148px;
  --device-main-title-height:48px;
  --device-title-study-left:88px;
  --device-header-control-top:20px;
  --device-settings-size:38px;
  --device-home-size:38px;
}