/* ==========================================================================
   base — 초기화 · 공통 요소
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  /* 뒤 배경은 사이드바·헤더와 같은 색. 본문 패널을 그 위에 얹어야
     패널의 둥근 모서리가 드러난다. */
  background:var(--surface-1);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-md);
  line-height:var(--lh-md);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,p,figure,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
input,select,textarea{ font:inherit; color:inherit; }
input::placeholder{ color:var(--text-6); }

/* ==========================================================================
   입력칸을 눌러도 화면이 <확대되지 않게> (레드 2026-09-17)

   ★ iOS 사파리는 글자가 <16px 미만>인 입력칸에 초점이 가면 그 칸에 맞춰
     화면을 확대한다. 되돌려 주지 않아서, 회원은 손으로 다시 줄여야 한다.
     막는 길은 하나뿐이다 — <글자를 16px 이상으로> 준다.

   ⚠⚠ viewport 에 maximum-scale=1 · user-scalable=no 를 박는 <옛 방법을 쓰지 않는다.>
     그것은 확대 자체를 막아 버려서, 작은 글씨를 키워 보려는 사람의 길까지 끊는다.
     지금 index.html 에도 그 값이 없다 — 넣지 마라.

   ⚠ 폰에서만 건다. PC 는 애초에 이런 확대가 없고, 거기서 16px 을 강제하면
     촘촘한 표·검색줄의 글자가 커져 배치가 무너진다.

   ⚠ !important 다. 입력칸 글자 크기는 화면마다 제각각 정해져 있어
     (.ex-chat-rate input 은 12.5px) 보통 규칙으로는 진다. 여기서 지면
     그 화면만 조용히 확대되는데, 눈으로는 어디가 원인인지 안 보인다.
     ⚠ select 도 넣는다 — 목록을 여는 순간 같은 확대가 일어난다.
   ========================================================================== */
@media (max-width:1024px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,
  textarea{ font-size:16px !important; }
}

/* 스크롤바 — 얇게, 배경에 묻히게 */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--surface-2); border-radius:var(--r-full); }
::-webkit-scrollbar-thumb:hover{ background:var(--surface-3); }

/* 가로 스크롤 레일 — 스크롤바 감춤 */
.scroll-x{
  display:flex; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-behavior:smooth;
}
.scroll-x::-webkit-scrollbar{ display:none; }

/* 접근성 — 화면에는 안 보이지만 읽어주는 텍스트.
   지금 틀에서는 쓰는 곳이 없지만 라벨 없는 아이콘 버튼을 만들 때 쓰라고 남겨 둔다. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 키보드 초점 */
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* 글자색 도우미 */
.t-4{ color:var(--text-4); }
.t-5{ color:var(--text-5); }
.t-6{ color:var(--text-6); }
.t-win{ color:var(--success); }

/* ---- 앱 뼈대 ------------------------------------------------------------
   PC — 왼쪽 사이드바 고정 + 오른쪽 본문
   모바일 — 사이드바 없음, 아래 탭바
   ------------------------------------------------------------------------- */
.app{
  min-height:100dvh;
  padding-left:var(--sidebar-w);
  padding-bottom:var(--tabbar-h);
}
@media (max-width:1024px){
  .app{ padding-left:0; }
}

/* main 에 여백 24, 안쪽 컨테이너는 1200 을 넘지 않고 가운데 정렬된다.
   창이 좁으면 컨테이너가 그대로 줄어든다. */
/* 헤더 아래 본문은 하나의 패널이다. 사이드바·헤더와 만나는
   왼쪽 위 모서리만 둥글다. */
.content{
  padding:var(--gutter);
  background:var(--bg);
  border-radius:var(--r) 0 0 0;
}
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:var(--gap-sec);
}

/* 모바일은 사이드바가 없으므로 위쪽 두 모서리를 둥글게 한다 */
@media (max-width:1024px){
  .content{ border-radius:var(--r) var(--r) 0 0; padding-inline:var(--gutter); }
}