/* 로그인 상태 nav CTA와 계정 서랍(nav-account.js 의 짝). 옛 랜딩 2026-09-08, 09-09 → 새 랜딩 이식 09-26.
   로그인했으면 '시작하기' 나무판이 아바타 + '내 숲으로'가 되고, 올리면(터치는 탭) 서랍(내 프로필, 로그아웃)이 열린다. 나무판은 그대로 두고 안에 아바타만 들인다.
   판정 전 감춤 = 각 페이지 부트 한 줄이 붙이는 html[data-auth="1"](직전 방문에 로그인이었을 때만). 판정 후 스크립트가 뗀다.
   새 랜딩의 CTA 는 두 언어 이름을 겹쳐 두는 grid(.lang-fixed)라, 칩일 때는 가로로 늘어놓도록 flex 로 바꾼다.
   자리: 이 파일 한 곳. 하위 페이지, 약관, 블로그는 theme.css 의 @import 로, 메인(index.html, theme.css 를 읽지 않음)은 <link> 로 읽는다.
   09-26 에 이 규칙이 theme.css 에만 있어 메인에서 프로필 사진이 원본 크기로 떴고, 메인 인라인 사본으로 막았다가 두 벌을 여기로 합쳤다(운영자 "두 곳에 있는 칩 스타일 하나로 합쳐줘").
   nav-account.js 를 붙이는 페이지는 이 파일도 읽어야 한다(verify_landing.py 가 아바타 실제 크기로 확인). */
html[data-auth="1"] .nav-cta { visibility: hidden; }
.top .page-nav a.nav-cta.nav-me { display: inline-flex; align-items: center; gap: 7px; padding-left: 5px; }
@media (max-width: 560px) { .top .page-nav a.nav-cta.nav-me { justify-content: center; padding-left: 16px; } }
.nav-me-av { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; background: rgba(255, 255, 255, .92); color: #5a3c1e; font-size: 11px; font-weight: 720; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(90, 60, 30, .35); }
.nav-me-av.has-img { background: #fff; }
.nav-me-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 계정 서랍: 칩 아래 고정 위치. 열려 있는 동안만 body 에 존재한다(언어 전환의 DOM 대조 불변식, nav-account.js 머리말) */
.nav-me-menu { position: fixed; z-index: 120; min-width: 168px; padding: 6px; background: #fdfcf9; border: 1px solid #e1ddd5; border-radius: 12px 12px 6px 12px;
  box-shadow: 0 14px 36px rgba(28, 35, 30, .14); font-size: 13.5px; }
html[data-theme="dark"] .nav-me-menu { background: #222523; border-color: #33382f; box-shadow: 0 14px 36px rgba(0, 0, 0, .45); }
.nav-me-item { display: block; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left;
  font: inherit; font-size: 13.5px; font-weight: 600; color: #151613; text-decoration: none; cursor: pointer; }
.nav-me-item:hover, .nav-me-item:focus-visible { background: #f0ece5; outline: none; }
.nav-me-item.out { color: #8a5a3c; } .nav-me-item.out:disabled { opacity: .5; cursor: default; }
html[data-theme="dark"] .nav-me-item { color: #eceee6; } html[data-theme="dark"] .nav-me-item:hover, html[data-theme="dark"] .nav-me-item:focus-visible { background: #2c302b; }
html[data-theme="dark"] .nav-me-item.out { color: #e0b8a4; }
.nav-me-wait { padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid #e1ddd5; font-size: 12px; font-weight: 600; color: #686a63; }
html[data-theme="dark"] .nav-me-wait { border-bottom-color: #33382f; color: #a9ada2; }
/* 언어 목록(09-28, J "지구본 아이콘 누르면 영어 한국어 일본어 독일어 프랑스어 순으로 드롭다운 … 국기는 넣지 마", lang-menu.js).
   계정 서랍과 같은 모양. 페이지 HTML 의 .lang-menu 는 링크 원본이라 늘 숨기고, 누를 때 스크립트가 .lang-pop 을 body 에 붙인다 */
.lang-menu { display: none !important; }
.lang-pop { position: fixed; z-index: 130; min-width: 150px; padding: 6px; background: #fdfcf9; border: 1px solid #e1ddd5; border-radius: 12px 12px 6px 12px;
  box-shadow: 0 14px 36px rgba(28, 35, 30, .14); font-family: "Jost", system-ui, sans-serif; font-size: 14px; }
html[data-theme="dark"] .lang-pop { background: #222523; border-color: #33382f; box-shadow: 0 14px 36px rgba(0, 0, 0, .45); }
.lang-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; border-radius: 8px; color: #151613;
  font-weight: 600; text-decoration: none; white-space: nowrap; }
.lang-item:hover, .lang-item:focus-visible { background: #f0ece5; outline: none; }
.lang-item.on { color: #2f6b46; }
.lang-item svg { width: 15px; height: 15px; flex: none; }
.lang-item:lang(ja) { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui, sans-serif; }
.lang-item:lang(ko) { font-family: "Noto Sans KR", system-ui, sans-serif; }
html[data-theme="dark"] .lang-item { color: #eceee6; }
html[data-theme="dark"] .lang-item.on { color: #8fd3a8; }
html[data-theme="dark"] .lang-item:hover, html[data-theme="dark"] .lang-item:focus-visible { background: #2c302b; }
/* 일본어판(09-28): 한국어를 위한 word-break: keep-all(띄어쓰기에서만 줄바꿈)이 띄어쓰기 없는 일본어에서는 문장 전체를 한 덩어리로 만들어
   좁은 화면에서 글이 화면 밖으로 나갔다(390px 설명서 문단 438px). 일본어는 글자 사이에서 줄을 바꾸되 금칙(。、」 앞)은 지킨다 */
html:lang(ja) body, html:lang(ja) body * { word-break: normal !important; word-break: auto-phrase !important; line-break: strict; }   /* auto-phrase: 어절 단위(크롬 119+), 못 알아듣는 브라우저는 앞의 normal */