/* ============================================================
   BATU 반응형 공용 레이어  ·  _responsive.css
   ------------------------------------------------------------
   한 곳에서 모바일·태블릿·데스크탑 결을 같이 관리해요.
   각 화면이 이 파일을 <link> 한 줄로 같이 써요.

   · 모바일 (≤767)    : 기존 세로 1열 그대로 — 아무것도 안 바뀌어요
   · 태블릿 (768~1023): 읽기 ↔ 쓰기처럼 2열로 펼쳐져요
   · 데스크탑 (1024↑) : 좌 레일 · 중앙 본문 · 우 요약까지 3열로 펴져요

   끼우는 법:
     1) <head> 의 인라인 <style> 뒤에  <link rel="stylesheet" href="_responsive.css" />
     2) <body> 에 결을 적어요  →  data-rwd="read|flow|list|dash|chat"
     3) 펼칠 영역을 .rwd-grid 로 감싸고, 그 안에
        .rwd-rail(좌) · .rwd-main(중) · .rwd-side(우) 로 나눠요
   토큰(--bg·--ink·--line·--accent…)만 써요. hex 직접 안 써요.
   ============================================================ */

:root{
  --rwd-gap:   clamp(1.4rem, 2.6vw, 2.6rem);  /* 열 사이 숨 */
  --rwd-rail:  14.5rem;   /* 좌측 네비·맥락 레일 폭 */
  --rwd-aside: 22rem;     /* 우측 쓰기·요약 패널 폭 */
}

/* ── 1) 컨테이너 폭 : 큰 화면에서만 넉넉히 ──────────────── */
/* 기존 .page / .app / .wrap 은 그대로 두고 폭만 단계별로 키워요 */
@media (min-width:768px){
  body[data-rwd] .page,
  body[data-rwd] .app,
  body[data-rwd] .wrap{ max-width:min(92vw, 60rem); }
}
@media (min-width:1024px){
  body[data-rwd="read"] .page{ max-width:min(94vw, 78rem); }
  body[data-rwd="list"] .page{ max-width:min(94vw, 70rem); }
  body[data-rwd="dash"] .wrap,
  body[data-rwd="dash"] .page{ max-width:min(95vw, 84rem); }
  body[data-rwd="chat"] .app{ max-width:min(90vw, 62rem); }
  body[data-rwd="flow"] .page{ max-width:min(90vw, 58rem); }
}
/* 큰 화면에선 바닥 여백을 줄여 화면을 알뜰히 써요 */
@media (min-width:768px){
  body[data-rwd] .page{ padding-bottom:12vh; }
}
/* 작은 폰(≤480) — 좌우 여백을 줄여 본문이 답답하지 않게요 (가로만 손대요) */
@media (max-width:480px){
  body[data-rwd] .page,
  body[data-rwd] .app,
  body[data-rwd] .wrap{ padding-left:.8rem; padding-right:.8rem; }
}

/* ── 2) 반응형 그리드 래퍼 ──────────────────────────────
   모바일: 그냥 위에서 아래로 쌓여요 (기존과 똑같아요)
   768↑ : 2열,  1024↑ + .has-rail : 좌·중·우 3열 */
.rwd-grid{ display:block; }

@media (min-width:768px){
  .rwd-grid{
    display:grid;
    gap:var(--rwd-gap);
    grid-template-columns:repeat(2, minmax(0,1fr));
    align-items:start;
  }
  /* 좌측 레일은 태블릿에선 위에 가로 띠로 얹혀요 */
  .rwd-grid > .rwd-rail{ grid-column:1 / -1; }
  /* 한 열로만 쓰고 싶을 때 */
  .rwd-grid.cols-1{ grid-template-columns:minmax(0,1fr); }
  /* 본문을 살짝 넓게 (목록 ↔ 상세) */
  .rwd-grid.main-wide{ grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr); }
  /* 스크롤해도 따라오는 패널 */
  .rwd-sticky{ position:sticky; top:1.4rem; }
}

@media (min-width:1024px){
  .rwd-grid.has-rail{
    grid-template-columns:var(--rwd-rail) minmax(0,1fr) var(--rwd-aside);
  }
  .rwd-grid.has-rail > .rwd-rail{ grid-column:auto; }
}

/* ── 3) 좌측 레일 : 무카드 · 선과 여백으로만 나눠요 ──────── */
.rwd-rail{ font-family:var(--sans); }
@media (min-width:1024px){
  .rwd-rail{
    padding-right:1.1rem;
    border-right:1px solid var(--line);
    align-self:stretch;
  }
  .rwd-rail.rwd-sticky{ position:sticky; top:1.6rem; align-self:start; }
}
.rwd-railnav{ display:flex; flex-direction:column; gap:2px; }
.rwd-railnav a{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--ink-muted); font-size:13.5px; font-weight:600;
  padding:9px 11px; border-radius:10px; cursor:pointer;
  transition:background .15s, color .15s;
}
.rwd-railnav a:hover{ color:var(--accent); background:var(--accent-wash); }
.rwd-railnav a.on{ color:var(--accent); background:var(--accent-wash); }
.rwd-railnav .ix{ width:1.4em; text-align:center; flex:0 0 auto; }
.rwd-rail-cap{
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 .8rem .2rem;
}
/* 레일은 데스크탑 전용 — 작은 화면에선 기존 네비가 대신해요 */
@media (max-width:1023px){ .rwd-rail.desk-only{ display:none; } }

/* ── 4) 우측 요약/쓰기 패널 톤 ──────────────────────────── */
.rwd-side-cap{
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
@media (min-width:1024px){
  /* 본문과 쓰기 사이를 옅은 선으로만 가름 (카드 없이) */
  .rwd-grid.has-rail > .rwd-side{ padding-left:1.4rem; border-left:1px solid var(--line); }
}

/* ── 5) 스크롤바 — 가늘고 옅게, 테마에 녹아들게 ──────────── */
*{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--ink) 22%, transparent) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius:999px; border:3px solid transparent; background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb, var(--ink) 34%, transparent); background-clip:padding-box;
}
*::-webkit-scrollbar-corner{ background:transparent; }

/* ── 6) 작은 도우미 ─────────────────────────────────────── */
/* 내부 디자인 미리보기 바(색 스와치+다크 토글)는 사용자에게 안 보여요 — 요소는 두고 화면에서만 숨겨요(스크립트 보존) */
.preview{ display:none !important; }
@media (max-width:560px){ .preview .label{ display:none; } }
/* 큰 화면에서만 보일/숨길 것 */
.rwd-deskshow{ display:none; }
@media (min-width:1024px){ .rwd-deskshow{ display:block; } }
@media (min-width:768px){ .rwd-tabhide{ display:none; } }
