/* ============================ 레이아웃 ============================ */
/* 높이 단위 주의 —
   100vh 는 '주소창·탭바가 접힌 상태'의 큰 뷰포트를 기준으로 한다(= 100lvh).
   태블릿 브라우저는 주소창/탭바가 접히지 않고 늘 떠 있는 경우가 많아, 100vh 로 잡으면
   .app 이 실제 보이는 높이보다 그만큼 길어진다. .app 은 overflow:hidden 이고 사이드바가
   그 높이를 100% 로 채우므로, 사이드바 맨 아래(사용자 메뉴)가 화면 밖으로 밀려 스크롤로도
   닿지 않게 된다. 100dvh 는 '지금 보이는' 높이를 따라가므로 이 문제가 없다.
   (dvh 미지원 구형 브라우저를 위해 100vh 를 앞에 두어 폴백으로 남긴다) */
.app {
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  height: 100vh;
  height: 100dvh;
}
.app-body { display: flex; flex: 1; min-height: 0; align-items: stretch; }

/* 아이콘 버튼 (사이드바 접기 등) */
.icon-btn {
  flex-shrink: 0; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.icon-btn:hover { background: var(--surface); border-color: var(--line); }

/* 접힘 시 다시 펼치는 플로팅 버튼 */
.sidebar-reopen {
  position: fixed; top: 0px; left: 12px; z-index: 50;
  width: 36px; height: 36px; display: none;
  align-items: center; justify-content: center;
  border: 0px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  
}
.sidebar-reopen:hover { background: var(--surface-2); }
/* 데스크톱 축소 시엔 플로팅 버튼 대신 사이드바 내 아이콘 레일을 사용하므로 표시하지 않음 */

/* ── 축소 레일 (ChatGPT/Claude 풍 아이콘 막대) ── */
/* 접었을 때 아이콘이 펼쳤을 때와 같은 높이에 오도록 맞춘 값들 —
   위 여백 14px(토글) · 버튼 34px + 간격 1px(= 메뉴 한 줄 35px) · 구분선 위아래 21px.
   (기준은 모든 그룹이 접힌 상태. 그룹을 펼치면 아래 항목들은 당연히 밀린다) */
.sidebar-rail {
  display: none; /* 기본 숨김 — 데스크톱 축소 시에만 표시 */
  flex-direction: column; align-items: flex-start;
  gap: 1px; padding: 14px 0 0 8px;
}
/* 마지막(최근번역원문)은 펼침 상태에서 구역이 한 칸 더 내려가 있으므로 그만큼 띄운다 */
.sidebar-rail .rail-btn:last-child { margin-top: 8px; }
.rail-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--ink-2);
  cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.rail-btn:hover { background: var(--surface); border-color: var(--line); color: var(--accent); }
.rail-btn .rail-ico { color: var(--title); display: inline-flex; stroke-width: 1.6; }
.rail-sep { width: 26px; height: 1px; background: var(--line); margin: 21px 0; }

/* ============================ 사이드바 ============================ */
/* 사이드바 자체는 스크롤하지 않는다(overflow:hidden). 스크롤은 .sidebar-scroll 만 —
   하단 사용자 메뉴(.user-menu-host)를 스크롤 밖에 두어 항상 맨 아래에 고정하기 위함. */
/* 좌우 여백은 사이드바가 아니라 안쪽 요소가 가진다 —
   스크롤 영역이 사이드바 폭을 꽉 채워야 스크롤바가 오른쪽 구분선에 붙는다 (ChatGPT 풍). */
.sidebar {
  
  width: 257px; flex-shrink: 0;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  padding: 0;
  overflow: hidden; height: 100%;
/*  transition: width .22s cubic-bezier(.4,0,.2,1), padding .22s cubic-bezier(.4,0,.2,1);*/
}
/* 제목 + 옵션 본문만 담는 스크롤 영역 (남는 높이를 모두 차지).
   padding-right(7) + 얇은 스크롤바 폭(≈11) ≒ 왼쪽 여백(18) → 내용은 좌우 대칭으로 보이고
   스크롤바만 오른쪽 구분선에 붙는다. scrollbar-gutter:stable 로 자리를 늘 잡아 두어
   그룹을 펼치고 접을 때 내용 폭이 흔들리지 않게 한다. */
.sidebar-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 20px 7px 0 15px;
  scrollbar-gutter: stable;
  /* 평소엔 숨기고 사이드바에 마우스를 올렸을 때만 보이는 얇은 스크롤바 (Firefox) */
  scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.sidebar:hover .sidebar-scroll { scrollbar-color: var(--line-2) transparent; }
/* WebKit/Chrome/Edge/Safari — 8px 트랙 안에 투명 테두리로 4px 두께 막대를 그려
   구분선에 바짝 붙이면서도 막대가 선에 눌리지 않게 한다 */
.sidebar-scroll::-webkit-scrollbar { width: 8px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
.sidebar:hover .sidebar-scroll::-webkit-scrollbar-thumb { background: var(--line-2); background-clip: content-box; }
.sidebar:hover .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
/* 데스크톱: 토글로 사이드바 접기 → 아이콘 레일로 축소 (ChatGPT/Claude 풍) */
@media (min-width: 901px) {
  .app.sidebar-collapsed .sidebar {
    /* 아래 여백 8px — 접었을 때 사용자 아이콘이 펼쳤을 때와 같은 높이에 오도록 맞춘 값
       (24px 이면 아이콘이 16px 위로 올라가 접고 펼칠 때 툭 튄다) */
    width: 58px; min-width: 58px; padding: 0px 0 8px; overflow: hidden;
  }
  .app.sidebar-collapsed .sidebar-scroll,
  .app.sidebar-collapsed .sidebar-head,
  .app.sidebar-collapsed .sidebar-body { display: none; }
  .app.sidebar-collapsed .sidebar-rail { display: flex; }
}
/* 사이드바 제목 + (오른쪽) 접기 버튼 — 버튼을 상단 기준으로 제목과 나란히 정렬 */
.sidebar-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  /* 토글 버튼이 36px 로 커진 만큼 간격을 좁혀 부제 한 줄이 그대로 들어가게 한다 */
  gap: 4px; margin-bottom: 30px;
}
/* 사이드바 토글(패널) 아이콘 — 색은 테마색(--title)을 그대로 쓰되 투명도로 옅게 깐다.
   (고정 회색을 쓰면 '화면표시 테마 > 색상'을 바꿔도 아이콘만 그대로여서 겉돈다)
   기본 50% ≈ chatgpt.com 토글 밝기, 마우스를 올리면 100% 로 또렷해진다. */
.icon-btn svg, .sidebar-reopen svg, .rail-toggle svg {
  color: var(--title); opacity: .5; transition: opacity .12s ease;
}
.icon-btn:hover svg, .sidebar-reopen:hover svg, .rail-toggle:hover svg { opacity: 1; }
/* 접기 버튼 36×36 / 아이콘 20px — chatgpt.com 의 사이드바 토글과 같은 크기 */
.sidebar-head .icon-btn {
  width: 36px; height: 36px; border-radius: 8px;
  /* 36px 버튼의 가운데가 제목 첫 줄(약 22px)의 가운데에 오도록 위로 당긴다 */
  margin-top: -7px;
  /* 커진 버튼이 제목 폭을 먹지 않도록 오른쪽 여백 쪽으로 당겨 붙인다 */
  margin-right: -7px;
}
/* 로고(아이콘) + 타이틀: 왼쪽 정렬, 로고는 고정 오렌지 → 테마색 타이틀과 대비되어 돋보임 */
/* 로고가 width:0 이라 사이 간격은 제목 폭만 깎는다 → gap 0 (로고를 되살리면 gap 도 함께 되살릴 것) */
.side-brand { display: flex; flex-direction: row; align-items: center; gap: 0; min-width: 0; }
.side-brand-logo {
  width: 0px; height: 42px; flex-shrink: 0;
  object-fit: contain; user-select: none;
  filter: drop-shadow(0 2px 5px rgba(217, 119, 6, .28));
}
.side-brand-text { display: flex; flex-direction: column; min-width: 0; }
/* 제목을 한 줄로 유지한다. 26px 이면 '하루 - PLAYGROUND' 가 감겨 하이픈만 남고 끊긴다.
   서체가 대체 글꼴로 떨어져 더 넓어지는 경우엔 말줄임으로 흘러넘치지 않게 한다. */
.side-brand-name {
  font-family: var(--font-ui); font-weight: 800; font-size: 19px; color: var(--title);
  line-height: 1.15; letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-brand-sub {
  font-size: 11.5px; color: var(--ink); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
/*  font-weight:600;*/
}
.sidebar-body { display: block; }
.side-group { margin-bottom: 20px; }
.side-divider { height: 1px; background: var(--line); margin: 20px 0; border: 0; }

/* ============================ 메인 ============================ */
.main { flex: 1; min-width: 0; overflow-y: auto; }
.main-inner { max-width: 1240px; margin: 0 auto; padding: 36px 48px 140px; }
/* 기관 정보가 보이는 첫 화면 —
   세로 플렉스 + height:100% 로 화면 한 판에 맞춘다. 내용이 짧으면 기관 정보가 맨 아래로 밀리고,
   길면 아래 용례 예시 영역이 먼저 줄어들어(잘려서) 기관 정보가 늘 화면 안에 남는다.
   아래 여백(140px)은 기관 정보가 화면 밑에 놓이도록 줄인다. */
.main-inner.has-org-info {
  display: flex; flex-direction: column;
  /* 아래 여백 36px → 24px : 사업자 정보를 작은 글자 한 자(12px)만큼 더 아래로 */
  height: 100%; min-height: 100%; padding-bottom: 24px;
}
/* 예시를 다 걷어내도 한 판에 담기지 않는 작은 화면 — 눌러 담기를 포기하고 자연스럽게 흐르게 한다
   (억지로 height:100% 를 유지하면 섹션이 찌그러져 사업자 정보와 글이 겹친다) */
.main-inner.has-org-info.no-fit { height: auto; }
/* 섹션(제목) 사이 간격은 평소 그대로 둔다. 첫 화면에서 좁히는 곳은
   마지막 섹션과 사업자 정보 사이, 그리고 예시 카드 안쪽 여백뿐이다. */
.main-inner.has-org-info .examples-section { margin-bottom: 12px; }
.main-inner.has-org-info .org-info { padding-top: 20px; }
.main-inner.has-org-info .demo-examples .ex-card { padding: 10px 2px; }
/* 높이가 모자랄 때 줄어드는 쪽은 용례 예시뿐 — 원문·번역 결과는 제 크기를 지킨다 */
.main-inner.has-org-info > .section:not(.examples-section) { flex-shrink: 0; }
.main-inner.has-org-info .examples-section,
.main-inner.has-org-info .examples-body {
  display: flex; flex-direction: column; min-height: 0;
}
.main-inner.has-org-info .demo-examples { flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* 기관 정보 — chatgpt.com 첫 화면 하단 안내문과 같은 결: 아주 작게·가운데·흐린 글자 */
.org-info {
  margin-top: auto; padding-top: 48px;
  text-align: center; font-size: 12px; line-height: 1.75;
  color: var(--ink-3); word-break: keep-all;
}
.org-info p { margin: 0; }
/* 기관명만 진하게 — 굵기와 함께 색도 한 단계 진하게 해 흐린 안내문 속에서 또렷하게 */
.org-info .org-name { font-weight: 700; color: var(--ink-2); }
.org-info a { color: inherit; text-decoration: none; }
.org-info a:hover { color: var(--ink-2); text-decoration: underline; }
/* 섹션 간격을 넓혀 구분 (구분선 없음) */
.section { margin-bottom: 56px; }
.section-head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.section-head .sh-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--title); display: inline-flex; }
.section-head h2 {
  font-family: var(--font-ui); font-size: 18px; font-weight: 700;
  color: var(--title); margin: 0; letter-spacing: -0.01em; white-space: nowrap;
}
.section-head .sh-aux { margin-left: auto; font-size: 12px; color: var(--ink-3); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

/* 반응형 */
@media (max-width: 900px) {
  .examples-grid { grid-template-columns: 1fr !important; }
  .parallel-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  .main-inner { padding: 39px 20px 100px; }
  .sidebar-reopen { display: inline-flex; }
  /* 사이드바가 열리면 플로팅 펼치기 아이콘 숨김 (상단 중첩 방지) */
  .app.sidebar-open .sidebar-reopen { display: none; }
  /* 슬라이드오버 사이드바도 보이는 높이만 차지하게 한다.
     bottom:0 은 브라우저 UI 가 떠 있을 때 화면 밖에 놓일 수 있어 dvh 로 높이를 못 박는다. */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: auto; z-index: 40;
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%); transition: transform .25s ease;
  }
  /* 그림자는 열렸을 때만 — 숨김 상태에서 왼쪽 화면 가장자리로 새어 회색 기둥처럼 보이는 것 방지 */
  .app.sidebar-open .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.18); }
  .scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 35; }
  .app.sidebar-open .scrim { display: block; }
  /* 첫 진입 안내로 잠깐 나왔다 들어가는 동안(.sidebar-peek)에는 본문을 어둡게 덮지 않는다 —
     사용자가 연 것이 아니라 알려 주기만 하는 것이라 화면을 가릴 이유가 없다. */
  .app.sidebar-peek .scrim { display: none; }
}
/* 휴대전화·태블릿(터치가 주 입력)은 스크롤바가 내용 위에 겹쳐 뜨므로(overlay) 자리를 차지하지 않는다.
   데스크톱에서 스크롤바 폭(≈11px)이 메워 주던 오른쪽 여백이 그대로 비어 접기 버튼과 펼친 하위 메뉴가
   오른쪽 벽에 붙어 보인다 → 이런 환경에서만 왼쪽과 같은 18px 을 직접 준다.
   (좁게 줄인 데스크톱 창은 스크롤바가 자리를 차지하므로 기존 7px 그대로 두어야 좌우가 맞는다) */
@media (pointer: coarse) {
  .sidebar-scroll { padding-right: 18px; }
}