/* _shell.css — BATU 새 판(batu-landing-next) 공용 뼈대 스타일 정본.
 * ============================================================
 * 이 파일이 무엇인가
 * ------------------------------------------------------------
 * 상단바·하단바는 이제 화면마다 마크업을 복사해 넣지 않는다(옛 판이 망가진 원인).
 * _shell.js 가 이 클래스들로 상단바·하단바를 스스로 그려 넣고, 이 파일이 그 모양을 정한다.
 * 화면 본문(카드·입력칸 등)의 스타일은 각 화면 자체 <style>에 둔다 — 이 파일은 뼈대만.
 *
 * 좌표(값의 출처)
 * ------------------------------------------------------------
 * 상단바 .ts-top/.ts-wordmark/.ts-iconbtn
 *   → batu-landing-next/proto/community.html:37-41 (이미 실물로 쓰이는 값 그대로 — community 세션이 먼저 심어 둔 것)
 *   아이콘: 자료실=batu-prototype/jubo.html:268(3권 책 아이콘, community.html:336 자료실 버튼과 동일 경로)
 *           설정=batu-prototype/jubo.html:254(톱니, §③ "아이콘은 jubo.html 상단 인라인 SVG 그대로" 지시에 따름)
 *   ⚠️ community.html:337 은 살짝 다른(단순화된) 톱니 경로를 쓴다 — 이 파일은 지시대로 jubo.html:254 쪽을 정본으로 삼았다.
 *      두 경로가 갈라져 있다는 사실을 보고에 남긴다(§8.15 A 규약상 상단 아이콘은 이 세션 소유이므로, 다음에
 *      community.html 이 이 셸로 옮겨올 때 하나로 합쳐진다).
 *
 * 하단바 .ts-bnav/.icwrap/.lb
 *   → community.html:89-95,327 값 그대로(마크업 계약 동일: <nav class="ts-bnav"> > <a data-nav> >
 *     <span class="icwrap">svg</span><span class="lb">라벨</span>, 활성=class="on" aria-current="page")
 *   ⚠️ 예외 1곳 — 비활성 라벨 색만 var(--ink-faint) 대신 var(--ink-muted) 로 바꿨다.
 *      --ink-faint 는 라이트에서 배경(--surface) 대비 2.7:1로 WCAG AA 미달(계획서 §③ 지시).
 *      --ink-muted 는 같은 배경에서 약 4.08:1 — 힌트 텍스트치곤 개선됐지만 소문자(10.5px) 기준 AA 4.5:1에는
 *      살짝 못 미친다(계산은 구현 세션 보고 참고). 더 확실히 하려면 --ink-soft(약 9.3:1)까지 올려야 한다.
 * ============================================================ */

/* ── 상단바 ── */
.ts-top{display:flex;align-items:center;gap:6px;padding:20px 20px 0;}
.ts-wordmark{flex:1;min-width:0;display:flex;align-items:center;font-family:var(--sans);font-weight:800;font-size:16px;letter-spacing:-.01em;background:none;border:none;text-align:left;color:var(--ink);padding:0;cursor:pointer;}
.ts-top .sp{flex:1;}
.ts-iconbtn{background:none;border:none;color:var(--ink-soft);padding:11px;border-radius:14px;display:flex;flex:0 0 auto;align-items:center;justify-content:center;cursor:pointer;}
.ts-iconbtn:hover{color:var(--accent-ink);background:var(--accent-wash);}
.ts-iconbtn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;}
/* Aa 조절판 자리 — 묵상 화면 전용(<body data-topextra="aa">). 껍데기만, 실제 동작은 묵상 커스터마이징 세션(med.html) 소유. */
.ts-iconbtn.ts-aa{font-family:var(--serif);font-weight:800;font-size:14px;}

/* ── 하단바 — community.html:451-456 마크업 계약과 동일 구조(class 이름·중첩 순서 그대로, 갈아 끼울 수 있게) ── */
.ts-bnav{box-sizing:border-box;position:fixed;left:0;right:0;bottom:0;height:74px;padding-bottom:env(safe-area-inset-bottom,0);background:var(--surface);display:flex;z-index:60;border-top:1px solid var(--line-soft);}
.ts-bnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink-muted);text-decoration:none;padding-top:8px;cursor:pointer;position:relative;}
.ts-bnav a svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;}
.ts-bnav a .lb{font-size:10.5px;font-weight:800;}
.ts-bnav a .icwrap{width:44px;height:28px;border-radius:14px;display:flex;align-items:center;justify-content:center;position:relative;}
.ts-bnav a.on{color:var(--accent-ink);}
.ts-bnav a.on .icwrap{background:var(--accent-wash);}
/* 「공동체」 점 뱃지 — data-badge 로 켜고 끈다(지금은 껍데기, 연결은 §M8 다음 판). window.BatuShell.setBadge() 참고. */
.ts-bnav a .bnav-dot{position:absolute;top:0;right:9px;width:7px;height:7px;border-radius:50%;background:var(--accent);}
/* SWAN 위젯 런처(.sw-launch, _swan_widget.js 가 bottom:20px 고정으로 그림)가 셸 하단바(74px)에
   가리지 않게 올린다(2026-08-19 P2-a 촬영에서 발견 · med.html:1508 이 화면 안에서 하던 것을 셸로 옮김).
   데스크탑(min-width:1024px)은 하단바가 사이드바로 바뀌므로 원위치.
   최종 리뷰 항목7: html:not([data-embed]) 로 가둔다(med.html:1508,1545 과 같은 짜임) — 조각(iframe)
   으로 끼워진 화면은 하단바가 아예 없는데(_shell.js 가 <html data-embed> 일 때 셸을 안 그린다) 이
   보정 없이는 런처가 하단바 자리만큼 붕 떠서 그려진다. */
html:not([data-embed]) .sw-launch{ bottom:calc(20px + var(--bnav-h,74px) + env(safe-area-inset-bottom,0px)) !important; }
@media (min-width:1024px){ html:not([data-embed]) .sw-launch{ bottom:20px !important; } }

/* ── 나)안 데스크탑 사이드바 전용 조각 — 워드마크(위) · 자료실·설정(아래).
   _shell.js buildSideHead()/buildSideFoot() 가 <nav class="ts-bnav"> 맨 앞·맨 뒤에 항상 그려 넣는다.
   1023px 이하에서는 마크업을 옮기지 않고 이 두 규칙으로 숨기기만 한다(아래 max-width:1023px 블록) —
   DOM 을 리사이즈마다 재배치하는 것보다 "그리기는 한 번, 보이기만 화면 크기로 전환"이 안전하다. ── */
.ts-side-head, .ts-side-foot{ display:none; }

/* 데스크톱(1024px+) 나)안 — 좌측 세로 사이드바(220px) + 넓은 본문(SWAN님 확정 2026-08-13).
   상단바(.ts-top)는 사라지고(워드마크·자료실·설정이 사이드바로 옮겨감), 하단바(.ts-bnav)는
   가로→세로 사이드바로 바뀐다(같은 마크업, position/flex-direction만 전환). */
@media (min-width:1024px){
  .ts-top{ display:none; }                    /* 상단바는 사이드바가 대신해요 */
  .ts-side-head, .ts-side-foot{ display:flex; }
  .ts-side-head{ padding:4px 10px 22px; }
  .ts-side-head .ts-wordmark{ font-size:17px; }
  /* 2026-09-16 SWAN 「위에거랑 정렬하고 색 맞추는거는?」
     자료실·설정 두 줄이 위 탭 넉 줄과 안 맞았다. 세 군데가 달랐다.
     ①아이콘 자리 — 탭은 아이콘을 44px 짜리 칸(.icwrap)에 넣어 가운데 두는데 발은 그 칸이 없어
       아이콘도 글자도 왼쪽으로 12px 씩 당겨져 있었다. 그래서 svg 좌우에 12px 을 둬 같은 44px 칸을 만든다.
     ②글자 — 13px/600 이라 탭(14px/700)보다 작고 옅었다.
     ③색 — 발은 --ink-soft(진한 쪽), 탭은 --ink-muted(옅은 쪽)였다. 탭에 맞춘다.
     줄 높이도 52px 로 같게 맞춘다(전에는 탭 50 · 발 42). 간격은 눈금 안 값(4·12)만 쓴다. */
  .ts-side-foot{
    flex-direction:column; gap:0; margin-top:auto;
    padding-top:12px; border-top:1px solid var(--line-soft);
  }
  .ts-side-foot .ts-iconbtn{
    justify-content:flex-start; gap:12px; padding:12px; border-radius:12px;
    color:var(--ink-muted);
  }
  .ts-side-foot .ts-iconbtn svg{ width:20px; height:20px; margin:4px 12px; }
  .ts-side-foot .ts-iconbtn .lb{ font-size:14px; font-weight:700; }

  .ts-bnav{
    top:0; bottom:0; left:0; right:auto;
    width:220px; height:auto;
    flex-direction:column;
    /* 2026-09-16 SWAN 「사이드바 색상 다른거」: 사이드바만 --surface 라 본문(--bg)보다 어두웠다.
       폰 탭바는 이미 --bg 를 쓰고 있어(아래 max-width:1023px 블록) 두 자리를 같은 색으로 맞춘다.
       가름은 오른쪽 선(--line-soft)이 맡는다. */
    background:var(--bg);
    border-top:none; border-right:1px solid var(--line-soft);
    padding: 22px 12px 16px;
    border-radius:0; transform:none; max-width:none;
    /* 탭 묶음이 위, 자료실·설정(.ts-side-foot)이 맨 아래로 내려가게 — .ts-side-foot 의 margin-top:auto가 민다 */
  }
  .ts-bnav a{
    flex:0 0 auto; flex-direction:row; justify-content:flex-start;
    /* 11px 은 간격 눈금(4의 배수) 밖 값이었다. 12px 로 올리면 발(.ts-side-foot)과 줄 높이가 52px 로 같아진다. */
    gap:12px; padding:12px; border-radius:12px;
  }
  .ts-bnav a svg{ width:20px; height:20px; }
  .ts-bnav a .lb{ font-size:14px; font-weight:700; }
  /* 사이드바에서는 알약 배경(--accent-wash)을 아이콘(.icwrap)이 아니라 행(<a>) 전체가 그린다
     (모바일은 아이콘만 감싸는 좁은 알약 — 목업 나)프레임 .b-nav a.on 참고). */
  .ts-bnav a.on .icwrap{ background:none; }
  .ts-bnav a.on{ background:var(--accent-wash); }

  body{ padding-left:220px; }                 /* 본문이 사이드바에 안 가리게. 사이드바 자체는 position:fixed
                                                   (뷰포트 기준)이라 이 body 패딩의 영향을 안 받는다 */
}
/* 1023px 이하는 지금 그대로 — 사이드바 조각만 숨긴다(합격 조건: 모바일은 아무것도 안 바뀜) */
@media (max-width:1023px){
  .ts-side-head, .ts-side-foot{ display:none; }
}
/* 2026-09-15 t-882 SWAN 「하단 바 뭔가 좀 짜치는데」 → 토스, 인스타그램, 스레드, 카카오톡 캡처 「그냥 엄청 얇네」 →
   목업 docs/superpowers/mockups/2026-09-15-하단탭바-얇게-3안.html 가안(토스 결). 폰 탭바만 바꾼다(데스크톱 사이드바는 그대로).
   높이 74 → 56, 바탕은 본문과 같은 --bg, 켜진 탭은 알약 없이 채운 아이콘(.ic-on, _shell.js ICON_ON)과 진한 글씨.
   탭바 위에 앉는 것들(위젯 런처, 토스트, 공동체 액션바, 묵상 펜 단추)은 --bnav-h 로 같은 높이를 읽는다. */
:root{ --bnav-h:74px; }
@media (max-width:1023px){
  :root{ --bnav-h:56px; }
  .ts-bnav{ height:var(--bnav-h); background:var(--bg); }
  .ts-bnav a{ gap:var(--sp-1); padding-top:0; }
  .ts-bnav a svg{ width:24px; height:24px; }
  .ts-bnav a .lb{ font-size:11px; font-weight:700; }
  .ts-bnav a .icwrap{ width:auto; height:24px; border-radius:0; }
  .ts-bnav a.on{ color:var(--ink); }
  .ts-bnav a.on .icwrap{ background:none; }
  .ts-bnav a.on .lb{ font-weight:800; }
  .ts-bnav a.on .ic-off{ display:none; }
  .ts-bnav a .bnav-dot{ top:0; right:-4px; }
}
.ts-bnav a .ic-on{ display:none; }
@media (max-width:1023px){ .ts-bnav a.on .ic-on{ display:block; } }
.ts-bnav a svg.ic-on{ fill:currentColor; stroke:currentColor; stroke-width:1; }
.ts-bnav a svg.ic-on .ic-cut{ fill:var(--bg); stroke:none; }
.ts-bnav a svg.ic-on .ic-solid{ stroke:none; }

/* ── 둘러보기(게스트) 띠(태스크4) — batu-prototype/_guest_ribbon.js:21-55 계약 그대로(고정 위치·
   화면 폭 전체·본문을 높이만큼 민다). 색은 컨트롤러 지시(2026-08-18)로 실물 붉은색을 그대로 토큰화
   해 옮긴다(--ribbon-*, _tokens.css) — 다크·navy·sage 모드와 무관하게 항상 같은 색이다. ── */
html.has-guest-ribbon body{ padding-top:var(--sp-9); }
.ts-ribbon{position:fixed;top:0;left:0;right:0;height:var(--sp-9);z-index:70;display:flex;align-items:center;justify-content:center;gap:var(--sp-3);padding:0 14px;box-sizing:border-box;background:var(--ribbon-bg);border-bottom:1px solid var(--ribbon-line);font-family:var(--sans);}
.ts-ribbon .ts-ribbon-msg{font-size:12.5px;color:var(--ribbon-fg);white-space:nowrap;}
.ts-ribbon .ts-ribbon-btn{font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:var(--radius-pill);border:1px solid var(--ribbon-fg);background:var(--ribbon-fg);color:var(--ribbon-ink);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;font-family:inherit;}
@media (min-width:1024px){
  /* 데스크탑 나)안 사이드바(220px)를 안 덮게 — 겹침 규칙(3회차 A3-1-3, 띠 z-index:70 은
     하단바·사이드바 60 보다 위, 위젯 120 보다 아래). */
  .ts-ribbon{ left:220px; }
}

/* ── 공통 푸터(태스크4) — 2회차 B5-1 + SWAN님 결정(2026-08-18) 나안 배치(두 묶음·왼쪽 정렬) +
   접힘 기본(토글 눌러야 펼침). 목업 2026-08-17-새판-공용부품-3안.html 의 .ft-b(나안 내용)·
   .ft-c(다안 접힘) 값을 그대로 옮겼다. <body data-footer> 화면에서만 채워진다(_shell.js 참고). ── */
.ts-footer{margin:var(--sp-9) auto 0;max-width:760px;padding:var(--sp-4) var(--sp-5) calc(74px + var(--sp-6) + env(safe-area-inset-bottom,0));/* 하단바(.ts-bnav 74px+안전영역) 위로 토글이 올라오게 — 2026-08-20 T3 리뷰 */border-top:1px solid var(--line);}
/* 2026-09-09 t-725 · SWAN 「좌측 정렬로 바꿔줘」 — 「사업자 정보」 단추만 가운데였고 그 아래 다섯 줄은 왼쪽이라 축이 둘이었어요. 단추를 왼쪽으로 옮겨 축을 하나로 맞춰요. */
.ts-footer-toggle{display:block;margin:0;background:none;border:none;padding:0;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--ink-muted);text-align:left;cursor:pointer;}
#batu-site-footer-body{margin-top:var(--sp-3);text-align:left;font-size:11.5px;line-height:1.8;color:var(--ink-muted);}
.ts-footer-group + .ts-footer-group{margin-top:var(--sp-3);}
.ts-footer-group a{color:inherit;text-decoration:none;}
.ts-footer-group a:hover{text-decoration:underline;}
.ts-footer-src{color:var(--ink-soft);}

/* ── 약관 변경 배너(태스크4) — SWAN님 선택 다)안(2026-08-18): 상단바 바로 아래 가로 폭 전체 얇은
   띠, 모서리 없음. 목업 2026-08-18-새판-약관배너-3안.html 다안(.tbband) 값을 그대로 옮겼다.
   본문 정상 흐름에 놓여(고정 아님) 데스크탑에선 body 의 padding-left:220px 를 자연히 따라간다. ── */
.ts-tbanner{display:flex;align-items:center;height:var(--sp-9);background:var(--accent-wash);padding:0 var(--sp-4);gap:var(--sp-2);}
/* hidden 이면 숨긴다 — 위 display:flex 가 브라우저 기본 [hidden]{display:none} 을 이겨서, 자기 [hidden] 규칙이 없는
   화면(묵상 med.html 등)에서는 X 를 눌러도 띠가 그대로 보였다(2026-09-16 SWAN 「묵상화면에서는 X 눌러도 안 사라지는데」 · t-179). */
.ts-tbanner[hidden]{display:none;}
.ts-tbanner .ts-tbanner-spacer{flex:0 0 auto;width:var(--sp-8);}
.ts-tbanner .ts-tbanner-nav{flex:1;min-width:0;background:none;border:none;padding:0;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--accent-ink);text-align:center;cursor:pointer;}
.ts-tbanner .ts-tbanner-close{flex:0 0 auto;width:var(--sp-8);height:var(--sp-8);display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--accent-ink);border-radius:var(--radius-1);padding:0;cursor:pointer;}
.ts-tbanner .ts-tbanner-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;}
