/* ========================================================================
 * shell.css — 아파트스쿱 공용 셸
 *   assets/js/shell.js 가 그리는 마크업(사이드바·페이지머리)의 스타일.
 *   두 껍데기가 함께 읽는다 — 실거래 전용 파일에 두면 청약 페이지에서
 *   사이드바가 스타일 없이 렌더된다.
 *   색은 palette.css 만 정의한다. 여기서는 var(--토큰) 만 쓴다.
 * ======================================================================== */

/* ── 셸: 좌측 사이드바 + 본문 ──────────────────────────────────
   .shell 이 body 직계 래퍼. 사이드바는 shell.js 의 renderSidebar() 가 그린다. */
.shell{display:flex;min-height:100vh;align-items:stretch;}
/* 본문은 사이드바에 붙여 좌측 정렬한다 — 가운데 정렬하면 넓은 화면에서 둘 사이가 벌어져
   메뉴와 내용의 연결이 끊긴다. 남는 폭은 오른쪽에 둔다. */
#dashboard-screen{flex:1;min-width:0;max-width:1300px;width:100%;padding:18px 22px 60px;}
/* 페이지 머리 — renderPageHead() 가 그린다. 제목·설명 / 기준일 배지·액션 */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.page-head-main{min-width:0;}
.page-head-side{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
/* 자료가 언제 것인지 밝히는 칩 — 수치 옆에 늘 붙어야 오해가 없다 */
.page-badge{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--badge-fg);
  background:var(--badge-bg);border:1px solid var(--badge-line);border-radius:7px;padding:4px 9px;white-space:nowrap;}

/* 본문 패딩의 4-tier 값 — 위 #dashboard-screen 기본 규칙의 짝 */
@media(max-width:900px){ #dashboard-screen{padding:18px 16px 72px;} }
@media(max-width:720px){ #dashboard-screen{padding:16px 12px 76px;} }
/* 세이프에어리어: 노치·홈 인디케이터 영역 침범 방지(모바일 한정, 데스크톱 여백 보존).
   가로 모드 노치 기기에서 좌우 고정 12px 로는 컷아웃을 못 피한다 — #dashboard-screen 은
   셸 셀렉터라 청약 페이지에도 뜨므로 여기 둔다. #toast 쪽 안전영역은 real 전용이라 app.css 에 남는다. */
@supports (padding:max(0px)){
  @media (max-width:640px){
    #dashboard-screen{
      padding-left:max(12px, env(safe-area-inset-left));
      padding-right:max(12px, env(safe-area-inset-right));
      padding-bottom:max(76px, calc(env(safe-area-inset-bottom) + 44px));
    }
  }
}

/* ── 사이드바 ──────────────────────────────────────────────
   248px 는 청약 트리 라벨이 줄바꿈되지 않는 최소 폭이다(214px 에서 깨졌다).
   면을 쌓지 않는다 — 배경 한 겹 + 우측 헤어라인으로만 본문과 가른다. */
#site-sidebar{width:248px;flex:none;background:var(--sidebar);
  border-right:1px solid var(--rule);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;}
.rail-brand-row{display:flex;align-items:center;gap:9px;padding:20px 18px 16px;}
.rail-brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;}
.rail-mark{width:20px;height:20px;flex:none;display:block;color:var(--accent);}
.rail-mark svg{width:20px;height:20px;display:block;}
.rail-brand-name{font-size:15.5px;font-weight:700;letter-spacing:-.4px;}
.rail-chip{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.3px;color:var(--accent-hover);}
.rail-chip--sub{color:var(--sub-fg);}
/* 검색+전체메뉴를 한 그룹으로 묶어 오른쪽에 붙인다 — /real/* 화면은 검색 모달이 없어
   .header-search-btn 이 안 만들어지기도 하는데(자리표시자만 빈 채 남는다), 이 래퍼가
   오른쪽 정렬을 맡으므로 검색 유무와 무관하게 전체메뉴 버튼 위치가 흔들리지 않는다. */
.rail-brand-tools{display:flex;align-items:center;gap:9px;margin-left:auto;}
.header-search-btn{display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:26px;height:26px;padding:0;
  border:1px solid var(--rule);border-radius:4px;background:none;
  color:var(--ink-2);cursor:pointer;}
.header-search-btn:hover{border-color:var(--ink);color:var(--ink);}
.header-search-btn svg{width:15px;height:15px;}
.rail-fullmenu{display:none;align-items:center;gap:7px;padding:7px 12px;
  border:1px solid var(--rule);border-radius:4px;background:none;font-family:inherit;
  font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;}
.rail-fullmenu:hover{border-color:var(--ink);color:var(--ink);}
/* site.config.json 로드 실패 시 빈 사이드바 대신 뜨는 최소 안내 — shell.js renderSidebar 의 .catch */
.rail-error{margin:4px 18px;font-size:12.5px;color:var(--ink-2);line-height:1.6;}
.rail-error a{color:var(--accent-hover);}

.rail-nav{flex:1;overflow:auto;padding:6px 10px 14px;display:flex;flex-direction:column;}
.rail-seclabel{margin:16px 10px 6px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  font-weight:500;letter-spacing:.8px;color:var(--micro);}
.rail-link{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:5px;
  color:var(--ink-2);font-weight:500;font-size:13.5px;text-decoration:none;}
.rail-link:hover{background:var(--fill);color:var(--ink);}
.rail-link.active{background:var(--active);color:var(--ink);font-weight:600;}
/* 활성 표시는 좌측 2px 악센트 바 하나로. 반복되는 행에 색 띠를 두르지 않는다 */
.rail-bar{width:2px;height:13px;background:transparent;flex:none;}
.rail-link.active .rail-bar{background:var(--accent);}
.rail-subnav{display:flex;flex-direction:column;padding:1px 0 1px 21px;}
.rail-sub{padding:6px 10px;border-radius:5px;color:var(--ink-2);font-size:12.5px;
  text-decoration:none;}
.rail-sub:hover{background:var(--fill);color:var(--ink);}
.rail-sub.active{background:var(--active);color:var(--ink);font-weight:600;}

/* 들여쓰기는 감싸는 쪽이 맡는다 — 버튼마다 margin-left 를 주면 width:100% 와 겹쳐 칸을 넘친다 */
.rail-accnav{display:flex;flex-direction:column;padding:1px 0 1px 21px;}
.rail-acc-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:6px 10px;border:none;border-radius:5px;background:none;
  font-family:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer;text-align:left;}
.rail-acc-btn:hover{background:var(--fill);color:var(--ink);}
.rail-acc-sign{font-size:10px;color:var(--micro);}
.rail-acc-panel{display:flex;flex-direction:column;padding:1px 0 5px 12px;
  margin-left:10px;border-left:1px solid var(--rule-soft);}
/* display:flex 는 [hidden] 의 display:none 을 이긴다 — 접힘을 명시적으로 되돌린다 */
.rail-acc-panel[hidden]{display:none;}
.rail-acc-link{padding:5px 9px;border-radius:5px;color:var(--ink-3);font-size:12px;
  text-decoration:none;}
.rail-acc-link:hover{color:var(--ink);}
.rail-acc-link.active{color:var(--ink);font-weight:600;}

.rail-foot{padding:13px 18px 16px;border-top:1px solid var(--rule-soft);}
.rail-theme-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px;}
.rail-theme-row .rail-seclabel{margin:0;}
.btn-theme{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  padding:0;border:1px solid var(--rule);border-radius:4px;background:none;
  color:var(--ink-2);cursor:pointer;}
.btn-theme:hover{border-color:var(--ink);color:var(--ink);}
.btn-theme svg{width:15px;height:15px;}
.rail-policy{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px;}
.rail-policy a,.rail-policy .active{font-size:11px;color:var(--micro);text-decoration:none;}
.rail-policy a:hover{color:var(--ink);}
.rail-policy .active{color:var(--ink-2);}
.rail-stamp{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--micro);
  line-height:1.7;}

/* 페이지 머리 브레드크럼 */
.page-crumbs{display:flex;align-items:center;gap:7px;margin-bottom:10px;
  font-size:11.5px;color:var(--ink-3);}
.page-crumbs a{color:var(--ink-3);text-decoration:none;}
.page-crumbs a:hover{color:var(--accent-hover);}
.page-crumbs i{color:var(--muted);font-style:normal;}

/* ≤1080 — 사이드바가 상단 가로 바로 눕는다.
   하위 트리는 접히되 '전체 메뉴' 로 반드시 도달 가능해야 한다.
   display:none 으로 통째로 죽이면 청약 진입점이 사라진다(회귀). */
@media(max-width:1080px){
  .shell{flex-direction:column;}
  #site-sidebar{width:100%;height:auto;position:static;flex-direction:column;
    align-items:stretch;border-right:none;border-bottom:1px solid var(--rule);}
  .rail-brand-row{padding:12px 16px;flex:none;}
  .rail-fullmenu{display:inline-flex;}
  .rail-nav{flex-direction:row;align-items:center;overflow-x:auto;padding:0 12px 8px;}
  .rail-subnav,.rail-accnav,.rail-foot,.rail-seclabel{display:none;}
  .shell[data-menu="open"] .rail-nav{flex-direction:column;align-items:stretch;
    padding:0 12px 10px;max-height:60vh;overflow-y:auto;}
  .shell[data-menu="open"] .rail-subnav,
  .shell[data-menu="open"] .rail-accnav{display:flex;}
  .shell[data-menu="open"] .rail-seclabel{display:block;}
  .shell[data-menu="open"] .rail-foot{display:block;}
}
@media(max-width:720px){ .rail-chip{display:none;} }

/* ── 페이지 머리말 (renderPageHead 가 그리는 제목·설명) ── */
.page-title{font-size:25px;font-weight:700;letter-spacing:-.8px;}
/* 문단 폭은 '한 줄에 몇 글자'로 잡는다. 70ch 는 라틴 기준이라 한글로는 35자쯤에서 끊겨
   화면 한가운데서 줄이 바뀌었다. 한글은 45자 안팎이 편해 92ch 로 둔다. */
.page-desc{margin-top:4px;font-size:13.5px;color:var(--muted2);line-height:1.65;max-width:92ch;text-wrap:pretty;}
.page-desc b{color:var(--accent);font-weight:700;}
/* 각주는 항목마다 한 줄로 세운다 — 한 문단에 '·' 로 이어 붙이면 줄이 아무 데서나 바뀌어
   화면 한가운데서 끊긴 것처럼 보인다. 넘칠 때는 글머리 아래로 들여쓴다. */
.page-desc.notes{display:flex;flex-direction:column;gap:5px;}
.page-desc.notes > span{display:block;padding-left:12px;text-indent:-12px;}
@media(max-width:640px){ .page-title{font-size:20px;} .page-intro{padding:18px 0 2px;} }

/* ── 터치 기기(hover 없음): 셸 버튼 탭 타깃 ≥44px ──
   폭·모양(디자인 치수)은 데스크톱 기준 그대로 두고 min-height 만 올린다 — 손가락으로
   못 맞추는 26~31px 버튼 넷:
   · .btn-theme(26px) — real/assets/app.css 의 나머지 버튼용 터치 블록에서 이관.
   · .header-search-btn(26px) — 통합검색의 유일한 진입점.
   · .rail-fullmenu(≈31px) — ≤1080px 에서만 보이므로 뜨는 순간은 전부 터치 화면이다.
   · .rail-acc-btn(≈27px) — 좁은 화면에서 청약 37개 링크로 가는 유일한 경로. */
@media (hover:none) and (pointer:coarse){
  .btn-theme,.header-search-btn,.rail-fullmenu,.rail-acc-btn{ min-height:44px; }
  .btn-theme:active,.header-search-btn:active,.rail-fullmenu:active,.rail-acc-btn:active{ transform:scale(0.97); opacity:.9; }
}