/* 폰트 = Galmuri 단일(galmuri.css CDN, OFL). 외부 Google Fonts(DM Mono·Noto·Press Start·Silkscreen) 제거 — Hana: 갈무리 통일·라이선스 깔끔하게 */

:root {
  --bg:           #0f0b08;
  --surface:      #17110c;
  --surface2:     #1f1710;
  --border:       #2c2118;
  --border-hi:    #3d2d20;
  --text:         #ece1d3;
  --text-dim:     #8c7660;
  --text-dimmer:  #534234;
  --accent:       #f5a97a;
  --accent-hi:    #ffc49a;   /* hover/active 강조(더 밝은 주황) — 버튼 hover */
  --accent-dim:   rgba(245,169,122,0.07);
  --accent-border: rgba(245,169,122,0.2);   /* ★S4 수선#13: 의도색(faint accent) 복구 — 구 S3 currentColor(계산값 박제)에서 THEME.accentBorder(common.js:21)·hacked-mode(:1052 rgba .2) 토큰과 정합. 유일 라이브 소비자 = .lang-btn.on border-color(:226·구 currentColor=full accent → faint 20%). .tr-tap(:803)는 :994가 --accent-shadow로 override = dead. */
  --hara:         #e8896b;
  --hara-dim:     rgba(232,137,107,0.07);
  --reasoning-bg: #140f0a;   /* ★S4 수선#14: 일반모드 --reasoning-bg CSS 정의(구:applyTheme 인라인만 → :root 부재). THEME.reasoningBg와 동일·hacked-mode(:1054)가 override. applyTheme 인라인 제거 전제. */
  --shadow-hard:  #0a0705;   /* 픽셀 베벨 하드그림자 (box-shadow) — 양 테마 동일(hacked 미override) */
  --on-accent:    #1a0e08;   /* accent 배경 위 텍스트(짙은 갈색) */
  --ok:           #86efac;   /* 검수 OK·녹색 */
  --bad:          #fca5a5;   /* 검수 bad·빨강 */
  --line:         #5f4a37;   /* 커뮤니티 답글 tree 글리프 라인색(├─└─│) */
  --sidebar-w:    240px;
  --header-h:     52px;
  --mono: 'GalmuriMono11', 'Galmuri11', monospace;
  --sans: 'Galmuri11', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
}

/* ─── NOISE ─────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0;
}

/* ══════════════════════════════════════════
   LOGIN
══════════════════════════════════════════ */
#login-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); z-index: 100;
  transition: opacity .35s, transform .35s;
  min-height: -webkit-fill-available;
}
#login-screen.hidden { opacity: 0; transform: translateY(-10px); pointer-events: none; }

/* 햄버거 — 전 화면폭에서 표시(슬라이드 드로어 토글, 클로드/챗GPT식) */
.menu-btn {
  display: flex;
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; padding: 6px; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn svg { display: block; }

.login-box {
  width: min(360px, 90vw);
  background: var(--surface);
  border: 1px solid var(--border-hi);
  padding: 36px 32px 32px;
  position: relative;
}
.login-box::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
}
/* 단독 워드마크 (디자이너 §4) — 고양이 위 + 세로 아크로스틱. KO=하/라+옆 2줄 / EN=HARA+gloss. 전부 Galmuri11(통일) */
.login-wordmark { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: fit-content; margin: 0; }
.login-wordmark .wm-row { display: flex; align-items: center; gap: 10px; }
.login-wordmark.ko .wm-big { font-family: 'Galmuri11', var(--mono); font-weight: 700; font-size: 38px; color: var(--accent); line-height: 1; }
.login-wordmark.en .wm-big { font-family: 'Galmuri11', var(--mono); font-weight: 700; font-size: 30px; color: var(--accent); line-height: 1; }
.login-wordmark .wm-gloss { display: flex; flex-direction: column; gap: 2px; font-family: 'Galmuri11', var(--mono); font-size: 12px; color: #7a6450; line-height: 1.2; }
.login-wordmark .wm-small { font-family: 'Galmuri11', var(--mono); font-size: 13px; color: #7a6450; }
.login-wordmark.ko .wm-row:nth-child(2) { margin-left: 9px; }
.login-wordmark.en .wm-row:nth-child(2) { margin-left: 8px; }
.login-wordmark.en .wm-row:nth-child(3) { margin-left: 14px; }
.login-wordmark.en .wm-row:nth-child(4) { margin-left: 20px; }
.login-sub {
  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 32px;
}
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 8px; padding: 12px;
  background: #fff; color: #1f1f1f; text-decoration: none;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  border: none; cursor: pointer; transition: opacity .2s;
}
.google-btn:hover { opacity: .9; }
.google-btn svg { display: block; flex-shrink: 0; }
.login-note {
  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
  margin-top: 14px; text-align: center; letter-spacing: .02em;
}
#login-error {
  font-family: var(--mono); font-size: 11px; color: var(--hara);
  margin-top: 10px; min-height: 14px;
}

/* ══════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════ */
#app {
  display: none; width: 100vw;
  height: 100vh;
  height: 100dvh; /* iOS Safari 주소창 포함 문제 수정 */
  position: relative; z-index: 1;
}
#app.visible { display: flex; }

/* ─── SIDEBAR ────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  position: fixed; top: 0; left: 0;
  height: 100vh; height: 100dvh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  transform: translateX(-100%);            /* 기본 접힘 — ☰로 펼침(클로드식 고정 펼침, 상태 영구) */
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 30;
}
html.sb-open #sidebar { transform: translateX(0); }

.sidebar-top {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* 메뉴 로고 락업: [고양이 + 워드마크] 좌 / [2줄 태그라인] 우측정렬 (Galmuri11 픽셀) */
.sidebar-logo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: inherit; text-decoration: none; margin-bottom: 0; cursor: pointer;   /* 터치=EN↔KO 토글 */
}
.sidebar-logo .logo-left { display: flex; align-items: center; gap: 10px; }
.sidebar-logo .logo-wordmark { font-family: 'Galmuri11', var(--mono); font-weight: 700; font-size: 22px; color: var(--accent); line-height: 1; }
.sidebar-logo .logo-tagline { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: 'Galmuri11', var(--mono); font-size: 9px; color: #7a6450; line-height: 1.25; text-align: right; }

.new-chat-btn {
  width: 100%; padding: 8px 10px;
  background: var(--accent-dim);
  border: 1px solid rgba(245,169,122,.2);
  color: var(--accent);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, border-color .2s;
  display: flex; align-items: center; gap: 7px;
  -webkit-appearance: none; border-radius: 0;
  text-decoration: none;   /* <a> 링크 — 밑줄 제거 */
}
.new-chat-btn:hover { background: rgba(245,169,122,.13); border-color: rgba(245,169,122,.4); }
.new-chat-btn:active { opacity: .75; }
.new-chat-btn svg { flex-shrink: 0; }
/* 하단 섹션 메뉴 (BTC Analysis) — 세션리스트와 유저영역 사이, 구분선 위/아래, 중앙정렬 */
.sidebar-menu-top { padding: 10px 14px; flex-shrink: 0; }
.sidebar-spacer { flex: 1 1 auto; }   /* 분석·피드백 + 계정 footer를 하단으로 밀어냄 */
.sidebar-menu-bottom { border-top: 1px solid var(--border); padding: 10px 14px; flex-shrink: 0; }
.btc-menu-btn { justify-content: flex-start; }   /* 아이콘 슬롯(54px) + 라벨 좌정렬 */
.menu-ico { width: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 5px; }
.menu-ico .mi-prm { height: 20px; width: auto; }
.menu-ico .mi-lico { width: 20px; height: 20px; }

/* ─── Hana 디자인 아이콘(.ic) — inline SVG·1색 currentColor·24그리드 (icons.js hicon) ─── */
/*   기본 = dim. .on = accent. 자체 색을 가진 컨트롤(칩/메뉴/버튼) 안에서는 그 색을 상속(거동 무회귀). */
.ic { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.16em; flex-shrink: 0; color: var(--text-dim); }
.ic.on { color: var(--accent); }
.new-chat-btn .ic, .menu-btn .ic, .fb-chip .ic, .fb-fav .ic, .fb-rtoggle .ic, .dict-sbtn .ic, .fb-iconbtn .ic, .fb-actbtn .ic { color: inherit; }
/* Phase B rollout — 컨테이너 색 상속(거동 무회귀) */
.dict-star .ic, .dict-favchev .ic, .dict-chev .ic, .wc-star .ic, .trans-bigbtn .ic, .tv-analyze .ic,
.trans-correct-link .ic, .trans-correct-msg .ic, .writing-wip-badge .ic, .code-title .ic,
.header-session-title .ic, .fb-tab .ic, .fb-thread-toggle .ic, .fb-chev .ic { color: inherit; }
/* warning/색 텍스트 컨테이너 — 아이콘이 컨테이너/상위 <b> 색 상속(회색 dim 회귀 방지):
   trans-deepnote=coral <b>(번역+BTC 공용) · tv-freshness.stale=amber · tv-analysis/tv-read=본문색 maint
   · code-status=dim maint · wc-toast=green(--ok) saved 별 */
.trans-deepnote .ic, .tv-freshness .ic, .tv-analysis .ic, .tv-read .ic, .code-status .ic, .wc-toast .ic { color: inherit; }
.fb-chev { display: inline-flex; align-items: center; }
.fb-chev.collapsed .ic { transform: rotate(-90deg); }
/* 아이콘+라벨 버튼 간격(아이콘 있을 때만) */
.dict-sbtn-ic:not(:empty), .an-ic:not(:empty), .bigbtn-ic:not(:empty) { margin-right: 5px; display: inline-flex; }
/* chevron 회전 — 펼침=아래(기본 chevron) / 접힘=오른쪽(-90°). ★2026-07-23 규격화: FavTerm 기준 전 터미널 통일 */
.dict-favchev, .dict-chev, .tb-chev { display: inline-flex; align-items: center; }
.tb-chev { margin-left: auto; color: var(--text-dim); flex-shrink: 0; }
.tb-chev .ic { width: 1em; height: 1em; }
.dict-favbar:not(.open) .dict-favchev .ic,
.dict-card.collapsed .dict-chev .ic,
.trans-top-wrap.collapsed .tb-chev .ic,
.trans-src-wrap.collapsed .tb-chev .ic,
.writing-term.collapsed .tb-chev .ic,
.writing-review.collapsed .tb-chev .ic,
.writing-orig.collapsed .tb-chev .ic,
.writing-relay-tab.collapsed .tb-chev .ic,
.trans-teach.h2-teach-collapsed .tb-chev .ic { transform: rotate(-90deg); }
.exp-tag { font-size: 8px; text-transform: none; letter-spacing: 0; color: var(--text-dimmer); opacity: .85; }


.sidebar-user {
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; flex-wrap: wrap; row-gap: 8px;
}
/* ─── 언어 토글 (EN / 한국어) ─────────────── */
.lang-toggle { flex-basis: 100%; display: flex; gap: 6px; }
.lang-btn {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dimmer);
  background: none; border: 1px solid var(--border);
  padding: 3px 8px; cursor: pointer; transition: color .2s, border-color .2s;
  -webkit-appearance: none; border-radius: 0;
}
.lang-btn:hover { color: var(--text-dim); border-color: var(--border-hi); }
.lang-btn.on { color: var(--accent); border-color: var(--accent-border); }
.logout-btn {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dimmer);
  background: none; border: 1px solid var(--border);
  padding: 3px 8px; cursor: pointer; transition: color .2s, border-color .2s;
  -webkit-appearance: none; border-radius: 0;
}
.logout-btn:hover { color: var(--text-dim); border-color: var(--border-hi); }

/* ─── 계정 (아바타 클릭 → 팝오버: 언어 토글 + 로그아웃) ─── */
.sidebar-user { position: relative; }
.acct-btn {
  display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
}
.acct-avatar {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 20px; color: var(--accent);
  background: rgba(245,169,122,0.10); border: 2px solid var(--accent);
}
.acct-btn-text { display: flex; flex-direction: column; min-width: 0; }
.acct-name { font-family: var(--mono); font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-email { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% - 6px);
  background: var(--surface2); border: 1px solid var(--border-hi); border-radius: 10px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 30;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.acct-menu[hidden] { display: none; }
.acct-menu .lang-toggle { flex-basis: auto; }
.acct-menu .logout-btn { align-self: flex-start; }
/* 라이선스(CC BY-SA 출처표시) — 계정메뉴 내 */
.acct-lic { border-top: 1px solid var(--border); padding-top: 8px; }
.acct-lic-ttl { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
.acct-lic-body { font-size: 10.5px; color: var(--text-dimmer); line-height: 1.55; }
.acct-lic-body a { color: var(--accent); text-decoration: underline; }

/* ─── MAIN AREA ──────────────────────────── */
#main {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; height: 100%;
  transition: margin-left .28s cubic-bezier(.4,0,.2,1);   /* 사이드바 펼침 시 콘텐츠 옆으로(데스크탑) */
}
/* 데스크탑/태블릿: 사이드바 펼치면 오버레이 없이 콘텐츠를 옆으로 밀어 — 클로드처럼 옆에서 계속 작업 */
@media (min-width: 641px) {
  html.sb-open #main { margin-left: var(--sidebar-w); }
}

header {
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; padding: 0 20px;
  gap: 12px; flex-shrink: 0;
}
.header-session-title {
  font-family: var(--mono); font-size: 12px; color: var(--text-dim);
  flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  cursor: pointer;   /* 터치=EN↔KO 토글 */
}
.header-status { display: flex; align-items: center; gap: 8px; }
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 6px var(--accent);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }



/* ── 고양이 마스코트 ── */
@keyframes catBreathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.sidebar-logo .logo-cat { display: inline-block; vertical-align: middle; line-height: 0; }
.sidebar-logo .logo-cat svg { width: 26px; height: auto; image-rendering: pixelated; }
/* 로그인 로고 락업 — 고양이 + 아크로스틱 워드마크 가로 나란히(고양이 옆에 로고) */
.login-lockup { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; }
.login-cat { line-height: 0; flex-shrink: 0; }
.login-cat svg { width: 84px; height: auto; }


/* ─── REASONING BOX ──────────────────────── */
.review-2col { display:flex; gap:10px; align-items:flex-start; }
.review-col { flex:1; min-width:0; }
.review-h { font-size:11px; color:var(--text-dim); font-weight:600; margin:4px 0 2px; }
.review-col .reasoning-pre, .rev-round > .reasoning-pre { max-height:70px; overflow-y:auto; font-size:11px; }   /* 각 영역 작게·독립 스크롤(빠르게 흐름) */
.rev-round { margin-bottom:6px; }
.rev-round > summary { font-size:11px; color:var(--text-dim); cursor:pointer; padding:3px 0; font-weight:600; list-style:none; }
.rev-round > summary::-webkit-details-marker { display:none; }
.rev-round > summary::before { content:'▸ '; }
.rev-round[open] > summary::before { content:'▾ '; }
.trans-style { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:2px 0 4px; }
.trans-style-label { font-size:11px; color:var(--text-dim); margin-right:2px; }
.style-chip { font-size:11px; padding:4px 11px; border:1px solid var(--border-hi); background:var(--surface2); color:var(--text-dim); cursor:pointer; border-radius:12px; font-family:inherit; }
.style-chip:hover { border-color:var(--accent); color:var(--accent); }
.style-chip.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
/* ★헤아림 모드 바(스펙 rev2 §5.1·§5.5) — .mode-chip = 축 요약 칩 변형(축라벨 dim 스팬 포함).
   manual=accent fill(내가 정했다) / auto=outline(맡겼다) / 락=dim+🔒(탭 무반응·rev2 힌트 배너 없음) / open=확장 중 축 강조. 신규 변수 없음. */
.mode-chip { display:inline-flex; align-items:center; gap:5px; }
.mode-chip .mc-ax { color:var(--text-dimmer); }
.mode-chip .mc-v { color:var(--text); }
.mode-chip.manual { background:var(--accent); border-color:var(--accent); }
.mode-chip.manual .mc-ax { color:var(--on-accent); opacity:.6; }
.mode-chip.manual .mc-v { color:var(--on-accent); font-weight:600; }
.mode-chip.open { border-color:var(--accent); }
.mode-chip.locked { opacity:.55; cursor:default; }
.mode-chip.locked:hover { border-color:var(--border-hi); color:var(--text-dim); }
.trans-modes-expand { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:2px 0 4px; padding:8px 10px; border:2px solid var(--border-hi); background:var(--surface2); }
/* Talk 패널(§6·웹=확장 row 자리 인라인 카드) — 화자/독자 2열 grid·모바일 1열 */
.talk-panel { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; width:100%; }
.talk-col { display:flex; flex-direction:column; gap:7px; min-width:0; }
.talk-sec { font-size:11px; font-weight:700; color:var(--accent); }
.talk-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.talk-lbl { font-size:11px; color:var(--text-dim); }
.talk-input { flex:1; min-width:120px; background:var(--surface2); border:2px solid var(--border-hi); border-radius:0; padding:6px 9px; color:var(--text); font-size:12px; font-family:inherit; }
.talk-foot { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.talk-preview { font-size:11.5px; color:var(--text-dim); border-left:2px solid var(--hara); padding-left:8px; }
.talk-preview b { color:var(--accent); }
@media (max-width:640px){ .talk-panel { grid-template-columns:1fr; } }
/* .reasoning-box base = 단일 규칙(S3 수술5 병합). 옛 아코디언 자식(header/icon/label/chevron/body)은 제거됨.
   구 중복(margin-bottom 규칙 + 아래 details 규칙)에서 border/bg는 항상 아래 규칙이 override(소스순)라 dead였음 → margin-bottom을 아래로 접어 단일화(계산값 동일). */

/* ─── ERROR ──────────────────────────────── */
#error-banner {
  font-family: var(--mono); font-size: 11px; color: var(--hara);
  background: var(--hara-dim); border: 1px solid rgba(232,137,107,.2);
  padding: 7px 20px; display: none;
}
#error-banner.visible { display: block; }

/* ─── MOBILE OVERLAY ─────────────────────── */
/* 오버레이 = 모바일 드로어에서만(데스크탑 펼침은 push라 오버레이 없음). 드로어 오른쪽만 덮어 사이드바 클릭 안 막음. */
#sidebar-overlay {
  display: none; position: fixed;
  top: 0; bottom: 0; right: 0; left: var(--sidebar-w);
  background: rgba(0,0,0,.6); z-index: 25;
}
@media (max-width: 640px) {
  html.sb-open #sidebar-overlay { display: block; }
}

/* ══════════════════════════════════════════
   MOBILE (≤ 640px)
══════════════════════════════════════════ */
@media (max-width: 640px) {
  :root { --sidebar-w: 80vw; }
  /* 모바일: 사이드바=오버레이 드로어(push 아님). fixed/transform/오버레이는 base + html.sb-open 이 처리. */

  #messages { padding: 16px 0; }

  /* iOS 홈바 safe area */
  #input-area {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  header {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--header-h) + env(safe-area-inset-top));
  }
}

/* ══════════════════════════════════════════
   TABLET (641–900px): sidebar auto-collapse
══════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 900px) {
  :root { --sidebar-w: 200px; }
  .sidebar-logo { font-size: 12px; }
}



/* ── 비트코인 분석 (통합메뉴) ── */
#trading-view { display:none; flex:1; min-height:0; overflow-y:auto; padding:16px; flex-direction:column; gap:14px; }
#trading-view.visible { display:flex; }
/* 버튼 위치: 초기엔 게이지 바로 아래(order 3), 분석 누르면 indicators 다음으로 내려감(order 6) */
#tv-chart-box { order:1; }
#trading-view .tv-gauge { order:2; }
#trading-view #tv-analyze-btn { order:3; }
#trading-view #tv-analysis { order:4; }
#trading-view #tv-indicators { order:5; }
#trading-view #tv-reasoning { order:7; }
#trading-view.analyzed #tv-analyze-btn { order:6; }
#tv-chart-box { display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.tv-top-row { display:flex; gap:8px; height:150px; }                 /* 위쪽 2개: 절반폭씩, 작게 (각 아래의 1/4 크기) */
.tv-sub { flex:1; min-width:0; height:100%; border:1px solid var(--border); }
#tv_chart.tv-main { height:300px; border:1px solid var(--border); } /* 아래: 5분봉, 풀폭·길게 */
.tv-gauge { display:flex; flex-direction:column; gap:14px; align-items:stretch; margin:6px 0 0; }
/* 섹션 헤더 — 작은 흰 글씨 (기술적 분석 결과 라벨). 구분선 없음, 바로 아래 결과와 한 세트 */
.tv-sec-head { font-family:var(--mono); font-size:11px; color:#fff; letter-spacing:1px; text-align:center; }
/* 신호 막대 (7단계 색띠 — 규칙 레벨은 lit 세그먼트로, 정확한 수치는 아래 텍스트로) */
.tv-bar { position:relative; width:100%; height:22px; border-radius:3px; overflow:visible; background:var(--surface2); }
.tv-seg2 { position:absolute; top:0; bottom:0; opacity:.28; transition:opacity .25s; }
.tv-seg2.lit { opacity:.95; box-shadow:0 0 12px currentColor; }
/* 하라 판단 = 메인 게이지에 통합된 흰색 직선 마커 */
.tv-mark.hara { position:absolute; top:-4px; bottom:-4px; width:3px; margin-left:-1.5px; background:#fff; border-radius:2px; box-shadow:0 0 6px rgba(0,0,0,.6); z-index:5; transition:left .3s; }
/* 하라의 판단 — 게이지 바로 아래 ▲ + 작은 고양이 + 라벨 */
.tv-haratrack { position:relative; width:100%; height:30px; margin-top:-8px; }
.tv-haramark { position:absolute; top:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; transition:left .3s; }
.tv-tri { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:6px solid var(--accent); }
.tv-haracat { line-height:0; filter:drop-shadow(0 0 2px rgba(245,169,122,.6)); margin-top:1px; }
.tv-haracat svg { display:block; }
.tv-haralbl { font-family:var(--mono); font-size:9px; color:var(--accent); white-space:nowrap; margin-top:1px; letter-spacing:.5px; }
.tv-haranum { color:#fff; }
.tv-sig-label { font-family:var(--mono); font-size:18px; font-weight:500; color:var(--text-dim); text-align:center; margin-top:-10px; }
.tv-freshness { font-family:var(--mono); font-size:10px; color:var(--text-dimmer); text-align:center; margin-top:-10px; }
.tv-freshness.stale { color:#e8a13a; font-weight:600; }   /* 데이터 stale(웹훅 끊김) = 앰버 경고 */
.tv-indicators { font-family:var(--mono); font-size:11px; color:var(--text-dim); display:flex; flex-direction:column; gap:5px; }
.tv-indicators .tv-tf { padding:7px 11px; background:var(--surface); border:1px solid var(--border); }
.tv-indicators .tv-tf b { color:var(--accent); }
.tv-nodata { color:var(--text-dim); font-size:12px; padding:8px 0; }
.tv-analyze { background:var(--accent); color:var(--on-accent); border:none; font-family:var(--mono); font-size:13px; font-weight:500; padding:13px; cursor:pointer; }
.tv-analyze:hover { background:var(--accent-hi); }
.tv-analyze:disabled { opacity:.5; cursor:default; }
.tv-analysis { font-size:14px; line-height:1.7; color:var(--text); text-align:center; }
.tv-analysis:empty { display:none; }
/* 하라 애널리스트 평결 — 점수 바로 아래, 7단계 색상으로 크게 (월스트리트 매수/매도 의견 느낌). 전부 대문자 강조 */
.tv-verdict { font-family:var(--mono); font-size:22px; font-weight:600; letter-spacing:.5px; line-height:1.2; margin:2px 0 10px; text-transform:uppercase; }
.tv-vby { color:var(--accent); }   /* "HARA" — 뒤 verdict와 같은 단어 간격(공백)으로 한 세트 */
.tv-read { white-space:pre-wrap; }
/* 분석 중: 점수 바로 아래에 자는 하라 픽셀 고양이 + analyzing */
.tv-analysis.analyzing { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-dim); font-family:var(--mono); font-size:12px; padding:8px 0; }
.tv-analysis.analyzing svg { width:60px; height:auto; animation:catBreathe 2.4s ease-in-out infinite; }

/* 추론(think) 접이식 박스 — 비트코인 분석 / 코딩 공용 */
.reasoning-box { margin-top:10px; margin-bottom:9px; border:1px solid var(--border); background:var(--surface); }
.reasoning-box summary { cursor:pointer; padding:8px 12px; font-family:var(--mono); font-size:12px; color:var(--text-dim); user-select:none; list-style:none; }
.reasoning-box summary::-webkit-details-marker { display:none; }
.reasoning-box summary::before { content:'▸ '; color:var(--accent); }
.reasoning-box[open] summary::before { content:'▾ '; }
.reasoning-box summary:hover { color:var(--accent); }
.reasoning-box[open] summary { border-bottom:1px solid var(--border); }
.reasoning-pre { margin:0; padding:12px; font-family:var(--mono); font-size:12px; line-height:1.55; color:var(--text-dim); white-space:pre-wrap; word-break:break-word; max-height:360px; overflow:auto; }

/* 생성 중 자는 하라 고양이 표시 (번역/코딩 공용) */
.busy-cat { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:8px; color:var(--text-dim); font-family:var(--mono); font-size:12px; }
.busy-cat svg, .busy-overlay svg { width:60px; height:auto; animation:catBreathe 2.4s ease-in-out infinite; }
/* 디자이너 추론 연출 — 원형 점 .→..→... 1.5s 반복(말풍선/인라인 공용) */
.hdots { display:inline-flex; gap:4px; align-items:center; vertical-align:middle; margin-left:2px; }
.hdots .hdot { width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; }
.hdots .hdot:nth-child(1) { animation:haraDot1 1.5s steps(1,end) infinite; }
.hdots .hdot:nth-child(2) { animation:haraDot2 1.5s steps(1,end) infinite; }
.hdots .hdot:nth-child(3) { animation:haraDot3 1.5s steps(1,end) infinite; }
@keyframes haraDot1 { 0%,100%{opacity:0} 12%,99%{opacity:1} }
@keyframes haraDot2 { 0%,37%{opacity:0} 50%,99%{opacity:1} }
@keyframes haraDot3 { 0%,62%{opacity:0} 75%,99%{opacity:1} }
.busy-overlay { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:rgba(12,9,7,.72); z-index:6; color:var(--text-dim); font-family:var(--mono); font-size:12px; }
.busy-overlay.show { display:flex; }
/* 코드 에이전트 작업 중 — 가운데 큰 하라 고양이(반투명, 코드 뒤로 보임) */
.busy-overlay.agent-working { background:rgba(12,9,7,.32); pointer-events:none; }
.busy-overlay.agent-working svg { width:130px; opacity:.5; }

.code-toolbar { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.code-title { font-family:var(--mono); font-size:13px; color:var(--accent); font-weight:500; margin-right:auto; }
.code-status { font-family:var(--mono); font-size:11px; color:var(--text-dim); min-height:14px; flex-shrink:0; }

/* ── Translator (experimental) ── */
#translator-view { display:none; flex:1; min-height:0; padding:14px; flex-direction:column; gap:10px; }
#translator-view.visible { display:flex; }
.trans-dir { display:flex; gap:0; margin-right:auto; }
.trans-dir-btn { background:var(--surface2); border:1px solid var(--border-hi); color:var(--text-dim); font-family:var(--mono); font-size:11px; padding:5px 12px; cursor:pointer; -webkit-appearance:none; border-radius:0; }
.trans-dir-btn + .trans-dir-btn { border-left:none; }
.trans-dir-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
/* ★방향+번역 통합 단일버튼(primary CTA·glyph=방향로고 currentColor·탭=번역). 빈입력/완료=disabled 중립. */
.dir-glyph-btn { display:inline-flex; align-items:center; gap:7px; padding:5px 13px; background:var(--accent); border:1px solid var(--accent); color:var(--on-accent); cursor:pointer; }
.dir-glyph-btn:hover:not(:disabled) { background:var(--accent-hi); border-color:var(--accent-hi); }
.dir-glyph-btn:disabled { opacity:.42; cursor:default; }
.dir-glyph { display:inline-flex; width:34px; height:17px; }
.dir-glyph svg { width:100%; height:100%; display:block; }
.dir-label { font-size:12px; font-weight:600; letter-spacing:.2px; }
.trans-bigbtn { font-family:var(--mono); font-size:13px; font-weight:500; padding:8px 22px; cursor:pointer; -webkit-appearance:none; border-radius:0; border:1px solid var(--border-hi); background:none; color:var(--text-dim); transition:background .15s, color .15s, border-color .15s; }
.trans-bigbtn:hover { color:var(--text); border-color:var(--accent); }
.trans-bigbtn.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.trans-bigbtn.primary:hover { background:var(--accent-hi); }
.trans-bigbtn.copied { background:#9ad87f !important; border-color:#9ad87f !important; color:var(--on-accent) !important; }
.trans-actions { display:flex; gap:10px; align-items:center; }   /* 액션버튼(Clear/Paste/Translate/Copy) 묶음 */
/* 모바일: 액션버튼을 EN-KO 방향버튼 아래 줄(전체폭)로 — 좁은 화면서 Translate 가려지던 것 해결 */
@media (max-width: 640px) {
  #translator-view .code-toolbar { flex-wrap: wrap; }
  #translator-view .code-title .exp-tag { display: none; }
  #translator-view .trans-actions { flex-basis: 100%; gap: 8px; margin-top: 2px; }
  #translator-view .trans-actions .trans-bigbtn { flex: 1; padding: 9px 0; text-align: center; }
}
/* 정밀검토(Deep Review) 토글 — 헤더 점등구슬 옆. 단순 선택/비선택만(hover 없음) */
.header-deep-btn { display:none; background:var(--surface2); border:1px solid var(--border-hi); color:var(--text-dim); font-family:var(--mono); font-size:11px; padding:4px 10px; cursor:pointer; -webkit-appearance:none; border-radius:0; white-space:nowrap; line-height:1.3; }
.header-deep-btn.visible { display:inline-flex; align-items:center; }
.header-deep-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.trans-deepnote { font-family:var(--mono); font-size:11px; color:var(--text-dim); line-height:1.5; padding:2px 0 0; }
.trans-deepnote b { color:var(--accent); }
.trans-top-wrap { position:relative; flex:2; min-height:0; display:flex; box-shadow: 0 0 14px rgba(245,169,122,.12); }   /* 입출력 터미널 외곽 발광(은은) */
.trans-box { width:100%; resize:none; background:#0c0907; color:var(--text); border:1px solid var(--border); padding:15px; font-size:15px; line-height:1.7; outline:none; white-space:pre-wrap; word-break:break-word; overflow:auto; font-family:var(--sans, inherit); }
.trans-box:focus { border-color:rgba(245,169,122,.5); }
.trans-top { flex:1; min-height:0; }
.trans-top[readonly] { color:var(--text); }
/* 원문 입력칸(번역 완료 후에만 노출 = 출력 위 / 입력 아래로 분리). 번역 중엔 숨겨 한 박스로 통합. */
.trans-src-wrap { position:relative; flex:0 0 auto; height:92px; min-height:0; display:flex; }
.trans-src { flex:1; min-height:0; font-size:14px; color:var(--text-dim); }
.trans-anim { flex:1; min-height:0; cursor:default; }
.trans-anim .tr-del { background:rgba(239,68,68,0.5); color:#ffe0e0; border-radius:2px; }
.trans-anim .tr-add { background:rgba(134,239,172,0.85); color:#0c0907; border-radius:2px; }
/* 검수 통과/수정필요 ✓ 마커 */
.trans-anim .tr-ok { color:var(--ok); font-weight:700; font-size:.82em; margin:0 4px 0 1px; }
.trans-anim .tr-no { color:var(--bad); font-weight:700; font-size:.82em; margin:0 4px 0 1px; }   /* 빨강 체크(수정필요) */
/* 통합 뷰 문장 쌍 — 분리/검수 동일. 좌측 막대 색 + 번역문 음영으로 상태 표시. */
.trans-anim .tr-pair { margin-bottom:9px; padding-left:9px; border-left:2px solid var(--border-hi); transition:border-color .2s; }
.trans-anim .tr-pair.watch { border-left-color:var(--hara,#e8896b); }
.trans-anim .tr-pair.watch .tr-pair-tgt { background:rgba(245,169,122,.22); border-radius:2px; }
.trans-anim .tr-pair.ok { border-left-color:var(--ok); }
.trans-anim .tr-pair.changed { border-left-color:var(--ok); }
.trans-anim .tr-pair.changed .tr-pair-tgt { background:rgba(134,239,172,0.75); color:#0c0907; border-radius:2px; }
.trans-anim .tr-pair.bad { border-left-color:var(--bad); }
.trans-anim .tr-pair.bad .tr-pair-tgt { background:rgba(239,68,68,0.28); border-radius:2px; }
.trans-anim .tr-pair.revising { border-left-color:var(--hara,#e8896b); }   /* 문장 수정 중(빨강→녹색 span) */
.trans-anim .tr-pair.arguing { border-left-color:#f5d442; }   /* Paw가 반박·주장 중 → 옆 바 노랑 */
.trans-anim .tr-arg { background:rgba(245,212,66,.45); border-radius:2px; }   /* 노란 음영(좌→우로 채워짐) */
.trans-anim .tr-arguing { color:#f5d442; font-weight:700; font-size:.82em; margin:0 4px 0 1px; }
.trans-anim .tr-pair-src { display:block; font-size:12px; color:var(--text-dimmer,#8c7660); margin-bottom:2px; }
.trans-anim .tr-pair-tgt { display:inline; }
/* R1 verdict bad 문장 — 👁️Eye(파랑)/👂Ear(보라) 토론자 교정노트 두 줄 */
.tr-pair-eye, .tr-pair-ear { font-size:12px; color:var(--text-dimmer); margin:2px 0 0 12px; padding-left:8px; border-left:2px solid var(--border-hi); }
.tr-pair-eye { border-left-color:#7fc4e0; }
.tr-pair-ear { border-left-color:#caa6f0; }
/* 연출1: Eye/Ear 두 줄 첫 등장 시 부드러운 fade-in(+위로 살짝). JS가 .tr-pair-enter를 다음 프레임에 제거 → transition 발동. */
.tr-pair-eye, .tr-pair-ear { transition:opacity .3s ease, transform .3s ease; }
.tr-pair-enter { opacity:0; transform:translateY(-4px); }
/* 연출2: 심판 수렴 — final과 가까운 쪽 선택(녹색 강조 유지) / 다른 쪽 페이드아웃(.4s) 후 제거.
   .tr-pair-dropped는 보이는 상태로 렌더 → JS가 다음 프레임에 .is-out 추가 = opacity 1→0 transition. */
.tr-pair-picked { border-left-color:var(--ok) !important; color:#bdf0cf; }
.tr-pair-dropped { transition:opacity .4s ease; pointer-events:none; }
.tr-pair-dropped.is-out { opacity:0; }
/* 연출3: 출력 스타일 diff — 스타일 전→후로 바뀐 종결어미 토큰만 흰색(밝은회색) 음영. 단어 탭(.tr-tap)과 공존. */
.tr-style-diff { background:rgba(255,255,255,0.18); border-radius:3px; padding:0 2px; }
/* 연출4: 스타일 변경 과정 — 빨강(.old) 잠깐 표시 → .gone으로 fade-out(쓰르륵 지움) → 새 어미(.new) 타이핑 등장. */
.tr-style-old { background:rgba(239,68,68,.22); border-radius:3px; padding:0 2px; transition:opacity .35s; }
.tr-style-old.gone { opacity:0; }
.tr-style-new { background:rgba(134,239,172,.18); border-radius:3px; padding:0 2px; animation:styleNewIn .3s ease; }
@keyframes styleNewIn { from{opacity:0;transform:translateY(-3px);} to{opacity:1;transform:none;} }
/* 연출4 문장별 순차 — 아직 연출 안 한 뒤 문장(before 상태 대기). 흐릿하게 차례 기다림. */
.tr-style-wait { color:var(--text-dim); opacity:.5; }
.trans-anim .tr-seg-ok { color:var(--text-dim); font-size:.8em; margin-left:5px; opacity:.55; }   /* 분리됨 */
/* 🔴 수정필요(위) / 🟢 통과(아래) 구역 분리 — 빨강만 위로 빼서 거기서 수정·토론 연출, 끝나면 녹색으로 내려감. */
.trans-anim .tr-zone { border-radius:8px; padding:8px 10px 4px; margin-bottom:10px; transition:background .3s; }
.trans-anim .tr-zone-red { background:rgba(239,68,68,0.07); border:1px solid rgba(239,68,68,0.28); }
.trans-anim .tr-zone-green { background:rgba(134,239,172,0.05); border:1px solid rgba(134,239,172,0.18); }
.trans-anim .tr-zone-head { font-family:var(--mono); font-size:11px; letter-spacing:.4px; margin-bottom:6px; opacity:.85; }
.trans-anim .tr-zone-red .tr-zone-head { color:var(--bad); }
.trans-anim .tr-zone-green .tr-zone-head { color:var(--ok); }
/* 리뷰창 = 화면 1/3, 내부 스크롤(번역문을 가리지 않게). 내용 없으면/접히면 공간 차지 X.
   <details>+flex 가 pre 높이를 안 잡아서 #trans-reasoning 자체를 스크롤 컨테이너로 둔다. */
#trans-reasoning { flex:0 0 auto; max-height:150px; min-height:0; overflow-y:auto; }   /* ★1/5 작은 박스 — 번역창 크게, 추론은 작게 빠르게 흐름(수정연출이 핵심) */
#trans-reasoning:empty { flex:0 0 0; }
#trans-reasoning .reasoning-box { margin-top:6px; }
/* ── phase-based 레이아웃 (Claude Design 시안): 완료=결과 hero 좌 + 원문 우(2-pane) / 진행 중=검수 무대. 결과는 항상 좌(자리 고정). ── */
.trans-main { display:flex; flex-direction:column; flex:1; min-height:0; gap:10px; }
.trans-pane { display:flex; flex-direction:column; min-height:0; }
.trans-pane-main { flex:1; min-height:0; gap:8px; }
.trans-pane-main .trans-top-wrap { flex:1; }
.trans-pane-side { display:none; }   /* idle/busy 숨김 — 완료 시 우 pane */
#translator-view.tv-done .trans-main { flex-direction:row; gap:14px; align-items:stretch; }
#translator-view.tv-done .trans-pane-main { flex:1.25; overflow-y:auto; }   /* ★8c: 완료 후 좌 pane 스크롤 — 최하단 추론 탭 접근(2026-07-23 Hana 실기) */
/* ★버그1 수리(2026-07-23 Hana 실기): 추론 ON 시 하단 박스(teach/리조닝/추론탭)가 결과·입력 영역을 flex 압축으로 접어버림
   → 결과 박스 최소높이 보장 + 하단 박스 shrink 금지(pane이 스크롤 담당) */
#translator-view.tv-done .trans-pane-main .trans-top-wrap,
#translator-view.tv-2col .trans-pane-main .trans-top-wrap { min-height: 180px; flex-shrink: 0; }
.trans-pane-main .trans-teach, .trans-pane-main .trans-relay, .trans-pane-main #trans-reasoning { flex-shrink: 0; }
#translator-view.tv-done .trans-pane-side { display:flex; flex:1; }
#translator-view.tv-done .trans-pane-side .trans-src-wrap { flex:1; height:auto; }
.trans-anim .tr-result { font-size:22px; line-height:1.75; }   /* 결과 hero (15→22) */
#translator-view.tv-busy #trans-reasoning { max-height:34vh; }   /* 검수 무대가 주인공 → 추론 1/5 압축(150) 해제 */
/* 데스크탑 진행 중 = 검수 무대 2-col (좌 검수 sweep 1.3 / 우 Eye·Ear·Brain 추론 1). deep+추론토글ON일 때만(_tvState가 tv-2col 부여). */
#translator-view.tv-2col .trans-main { flex-direction:row; gap:14px; align-items:stretch; }
#translator-view.tv-2col .trans-pane-main { flex:1.3; overflow-y:auto; }   /* ★8c: busy(추론 ON 2col)도 스크롤 허용 */
#translator-view.tv-2col .trans-pane-side { display:flex; flex:1; }
#translator-view.tv-2col #trans-reasoning { max-height:none; flex:1; min-height:0; }
@media (max-width:640px){
  #translator-view.tv-done .trans-main { flex-direction:column; }   /* 모바일 웹 = 세로 스택(결과 위·원문 아래, 자리 고정) */
  #translator-view.tv-done .trans-pane-side .trans-src-wrap { height:92px; flex:0 0 auto; }
  #translator-view.tv-2col .trans-main { flex-direction:column; }   /* 좁은 화면 = 검수↑·추론↓ 스택 */
  #translator-view.tv-2col #trans-reasoning { max-height:34vh; flex:0 0 auto; }
}
/* ✏️ 교정 캡처(검수 LoRA) — 결과 카드 하단 한 줄 + 펼침 편집 */
.trans-correct { flex:0 0 auto; }
.trans-correct-link { background:none; border:none; color:var(--accent); font-size:12px; cursor:pointer; padding:3px 0; text-decoration:underline; }
.trans-correct-link:hover { color:var(--accent-hi,var(--accent)); }
.trans-correct-ta { width:100%; min-height:90px; margin-top:6px; resize:vertical; }
.trans-correct-note { width:100%; margin-top:6px; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:8px 10px; font-size:13px; outline:none; }
.trans-correct-btns { display:flex; gap:8px; margin-top:6px; }
.trans-correct-btns .trans-bigbtn { flex:0 0 auto; }
.trans-correct-msg { color:var(--accent); font-size:12px; }
/* 작업 중 = 반투명 하라 오버레이(코딩처럼 뒤 내용 비침), 출력↔리조닝 경계쯤(하단)에 */
#trans-busy.agent-working { justify-content:flex-start; padding-bottom:6px; overflow-y:auto; }   /* ★flex-end→flex-start+margin-top:auto(.h2-stage): 콘텐츠 짧으면 종전처럼 바닥 정렬·길면 위 탈출 대신 내부 스크롤(실기: 질문카드·phase 스트립이 헤더 위로 탈출 2026-07-18) */
#trans-busy.agent-working .busy-cat { height:auto; justify-content:flex-end; }
/* 🐈 Tail 단어 분해 — 핵심 순우리말 + 우리말샘 정의 칩이 하나씩 fade-in. 검수 동안 참조용으로 유지. */
.trans-words { display:flex; flex-direction:column; gap:5px; width:92%; max-width:560px; max-height:44%; overflow-y:auto; margin-bottom:10px; pointer-events:auto; }
.trans-words:empty { display:none; }
.trans-words .tr-words-head { font-family:var(--mono); font-size:11px; color:var(--hara,#e8896b); text-align:center; letter-spacing:.4px; margin-bottom:1px; }
.tr-word { display:flex; align-items:baseline; gap:7px; padding:4px 11px; background:rgba(28,22,18,.86); border:1px solid var(--border-hi); border-left:2px solid var(--hara,#e8896b); border-radius:6px; opacity:0; transform:translateY(7px); transition:opacity .28s ease, transform .28s ease; }
.tr-word.in { opacity:1; transform:none; }
.tr-word .tr-word-ko { font-weight:700; color:#ffd9c2; white-space:nowrap; font-size:13px; }
.tr-word .tr-word-arrow { color:var(--text-dim); }
.tr-word .tr-word-def { color:var(--text-dim); font-family:var(--mono); font-size:11px; line-height:1.35; }

/* ══════════════════════════════════════════
   COMMUNITY (소통하라) — 셸 세션 게시판
   게시글=root@code:~# 터미널박스 · 입력=input@HARA:/community$ · 답글=tree(├─└─)
   ★기존 컴포넌트 재사용: .win8-titlebar/.tb-* · chamfer(아래 retro 블록) · favicon.svg 고양이
══════════════════════════════════════════ */
#community-view { display:none; flex:1; min-height:0; overflow-y:auto; padding:16px; flex-direction:column; gap:14px; }
#community-view.visible { display:flex; }
/* 박스 타이틀바 = in-flow(번역기용 절대배치 회피, dict 패턴). ★프롬프트(root@·:~#·user@·:~$)=흰(tb-w, 번역/사전 터미널 통일), 코드네임/HARA=주황+인광. padding=dict(6px 10px) 통일 */
#community-view .win8-titlebar { position:static; height:auto; padding:6px 10px; z-index:auto; }
#community-view .win8-titlebar .tb-o { text-shadow:0 0 7px rgba(245,169,122,.55); }
.fb-barsp { flex:1; }

/* ── 입력 터미널 (input@HARA:/community$) ── */
.fb-compose { background:var(--surface); border:2px solid var(--border-hi); display:flex; flex-direction:column; flex-shrink:0; box-shadow:0 0 14px rgba(245,169,122,.12); }   /* ★#2 터미널 박스 외곽 발광(번역/사전과 동일) */
.fb-compose-body { display:flex; gap:9px; align-items:flex-start; padding:11px 13px 4px; }
.fb-cprompt { color:var(--accent); font-family:var(--mono); font-size:15px; line-height:1.7; flex-shrink:0; text-shadow:0 0 7px rgba(245,169,122,.55); }
/* ★contenteditable compose (인라인 단어칩 + 텍스트). placeholder = :empty::before(data-ph, JS가 t()로 세팅). */
.fb-editable { flex:1; min-width:0; min-height:46px; max-height:210px; overflow-y:auto; background:transparent; border:0; outline:none; color:#fff6ea; padding:0; font-size:15px; line-height:1.7; font-family:var(--sans); white-space:pre-wrap; word-break:break-word; caret-color:var(--accent); }
.fb-editable:empty::before { content:attr(data-ph); color:var(--text-dimmer); pointer-events:none; }
/* 인라인 단어칩(compose·contenteditable=false 원자) + 글 안 렌더 칩(.fb-wchip 탭→카드). 출신색: 일반=주황·슬랭=빨강(사전 카드와 통일). */
.fb-chip-inline, .fb-wchip { display:inline-block; border:1.5px solid var(--accent); color:var(--accent); background:rgba(245,169,122,.08); padding:0 6px; margin:0 1px; font-size:14px; line-height:1.5; vertical-align:baseline; white-space:nowrap; }
.fb-chip-inline { user-select:none; }
.fb-chip-inline.slang, .fb-wchip.slang { border-color:#ff5c5c; color:#ff5c5c; background:rgba(255,92,92,.08); }
.fb-wchip { cursor:pointer; }
.fb-wchip:hover { background:rgba(245,169,122,.18); }
.fb-wchip.slang:hover { background:rgba(255,92,92,.18); }
/* 즐겨찾기 = compose 안 nested 서브패널(입력 터미널 헤더 아님) — dict-favbar/dict-favword-btn 재사용(칩=탭→커서 칩 삽입).
   ★인셋(좌우 margin) + 좌측 accent 바 + 고양이 아이콘 없음 = win8-titlebar(input@HARA)와 명확히 구별 → 헤더 2개 스택 착시 제거. */
.fb-favstrip { margin:10px 13px 2px; }
#community-view .fb-favbar { background:rgba(245,169,122,.06); border:1px solid var(--border); border-left:3px solid var(--accent); padding:6px 10px; }
#community-view .fb-favbar.open { border-bottom:1px solid var(--border); }   /* dict-favbar.open 2px override(서브패널 톤 유지) */
.fb-favbody { padding:10px; background:var(--surface2); border:1px solid var(--border); border-left:3px solid var(--accent); border-top:0; }
.fb-favchips { display:flex; flex-wrap:wrap; gap:7px; }
.fb-favempty { color:var(--text-dimmer); font-size:12px; font-family:var(--mono); }
/* 단어 카드 모달(글 안 칩 탭 → _dictCardHTML → 별=collect) */
.fb-cardmodal { position:fixed; inset:0; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; }
.fb-cardwrap { max-width:440px; width:100%; max-height:82vh; overflow-y:auto; }
/* 인앱 GIF 피커(KLIPY /api/gif/search·앱 GifPicker parity) — 하단 시트 패널·검색·3열 그리드·Load more·KLIPY attribution */
.fb-gifmodal { position:fixed; inset:0; background:rgba(0,0,0,.62); display:flex; align-items:flex-end; justify-content:center; z-index:220; }
.fb-gifpanel { width:100%; max-width:560px; max-height:82vh; display:flex; flex-direction:column; background:var(--surface); border:2px solid var(--border-hi); box-shadow:0 0 18px rgba(245,169,122,.18); }
.fb-gifbar { flex-shrink:0; }
.fb-gifx { background:none; border:none; color:var(--text-dim); cursor:pointer; padding:0 2px; margin-left:auto; display:flex; align-items:center; }
.fb-gifx:hover { color:var(--accent); }
.fb-gifx .ic { color:inherit; }
.fb-gifsearch { display:flex; align-items:center; gap:8px; padding:10px 13px; border-bottom:1px solid var(--border); flex-shrink:0; }
.fb-gifprompt { color:var(--accent); font-family:var(--mono); font-size:14px; text-shadow:0 0 6px rgba(245,169,122,.5); }
.fb-gifinput { flex:1; min-width:0; background:var(--surface2); border:2px solid var(--border); color:#fff6ea; padding:6px 10px; font-size:13px; font-family:var(--sans); caret-color:var(--accent); }
.fb-gifinput::placeholder { color:var(--text-dimmer); }
.fb-gifinput:focus { outline:none; border-color:var(--accent); box-shadow:0 0 8px rgba(245,169,122,.35); }
.fb-gifgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; padding:10px 13px; overflow-y:auto; flex:1; }
.fb-gifcell { padding:0; border:1px solid var(--border-hi); background:var(--surface2); cursor:pointer; aspect-ratio:1 / 1; overflow:hidden; }
.fb-gifcell:hover { border-color:var(--accent); }
.fb-gifcell img { width:100%; height:100%; object-fit:cover; display:block; }
.fb-gifstate { grid-column:1 / -1; text-align:center; color:var(--text-dim); font-size:13px; font-family:var(--mono); padding:30px 0; }
.fb-gifmorewrap { display:flex; justify-content:center; padding:2px 0 6px; flex-shrink:0; }
.fb-gifby { flex-shrink:0; text-align:center; color:var(--text-dimmer); font-size:10px; font-family:var(--mono); padding:6px 0 10px; }
.fb-previews { display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:10px 13px 0; }
.fb-compose-foot { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.fb-compose-foot { padding:10px 13px; border-top:2px solid var(--border); background:var(--surface2); }
.fb-as { font-size:11px; color:var(--text-dimmer); margin-left:auto; font-family:var(--mono); }

/* ── 셸 칩(.fb-chip) — 전송/이미지/지우기/# edit/# rm/답글. 하드 오프셋 그림자 + 눌림. ── */
.fb-chip { font-size:12px; color:var(--text-dim); background:none; border:2px solid var(--border-hi); padding:6px 12px; cursor:pointer; font-family:'Galmuri9', var(--mono); box-shadow:3px 3px 0 var(--shadow-hard); transition:transform .05s, box-shadow .05s, border-color .12s, color .12s; }
.fb-chip:hover { color:var(--text); border-color:var(--accent); box-shadow:1px 1px 0 var(--shadow-hard); transform:translate(2px,2px); }
.fb-chip:active { transform:translate(3px,3px); box-shadow:none; }
.fb-chip .h { color:var(--text-dimmer); }
.fb-chip.primary { background:var(--accent); color:var(--on-accent); border-color:#17110c; box-shadow:3px 3px 0 var(--accent-shadow); }
.fb-chip.primary:hover { background:var(--accent-hi); box-shadow:1px 1px 0 var(--accent-shadow); }
.fb-chip.primary:active { box-shadow:none; }
.fb-chip.primary:disabled { opacity:.5; }
.fb-chip.sh { padding:4px 10px; }
.fb-chip.primary.sh .ic { width:16px; height:16px; }   /* 답글 전송(send) — 작은 primary 칩 안 아이콘 */
.fb-chip.danger:hover { color:var(--bad); border-color:var(--bad); }

/* ── 아이콘 버튼 오버홀(Hana) — 박스 제거·아이콘 자체가 버튼(탭영역 충분). ── */
/*  .fb-iconbtn = 첨부(이미지/GIF, 확대 아이콘) · .fb-actbtn = 수정/삭제/답글(작은 인라인 아이콘) */
.fb-iconbtn { display:inline-flex; align-items:center; justify-content:center; background:none; border:none; padding:5px; margin:0; cursor:pointer; color:var(--text-dim); line-height:0; }
.fb-iconbtn .ic { width:24px; height:24px; }
.fb-iconbtn:hover { color:var(--accent); }
.fb-actbtn { display:inline-flex; align-items:center; justify-content:center; background:none; border:none; padding:3px; margin:0; cursor:pointer; color:var(--text-dim); line-height:0; }
.fb-actbtn .ic { width:18px; height:18px; }
.fb-actbtn:hover { color:var(--accent); }
.fb-actbtn.danger:hover { color:var(--bad); }

/* ── 첨부 미리보기 썸네일(오버홀) — compose/reply/edit 공통. GIF=<img>로 애니 재생·각 썸네일 개별 삭제(우상단 X). ── */
.fb-prevs { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.fb-prevthumb { position:relative; width:60px; height:60px; border:2px solid var(--border-hi); background:var(--surface2); flex-shrink:0; }
.fb-prevthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.fb-prevthumb-x { position:absolute; top:-8px; right:-8px; width:20px; height:20px; border-radius:50%; background:var(--bad); border:2px solid var(--surface); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; color:#fff; line-height:0; }
.fb-prevthumb-x .ic { width:10px; height:10px; color:#fff; }
.fb-prevthumb-x:hover { filter:brightness(1.15); }

/* ── 게시글 = 터미널 박스 ── */
.fb-list { display:flex; flex-direction:column; gap:14px; }
.fb-post { background:var(--surface); border:2px solid var(--border-hi); box-shadow:0 0 14px rgba(245,169,122,.12); }   /* ★#2 터미널 박스 외곽 발광(번역/사전과 동일) */
.fb-bar .fb-when { color:var(--text-dimmer); font-size:11px; white-space:nowrap; }   /* 프롬프트 뒤 inline 풀date(M/D/YYYY, HH:MM:SS) */
.fb-fav { background:none; border:none; color:var(--text-dimmer); font-size:15px; line-height:1; cursor:pointer; padding:0 2px; flex-shrink:0; }
.fb-fav:hover { color:#f5c542; }
.fb-fav.on { color:#f5c542; }
.fb-body { padding:13px 15px 12px; }
.fb-text { color:var(--text); font-size:15px; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
/* 상태 배지 = 타이틀바 최우측(딱지만 색·박스 테두리 틴트 없음 — border-hi 기본 유지) */
.fb-badge { font-size:9px; font-weight:700; padding:2px 7px; color:#1a1410; letter-spacing:.04em; flex-shrink:0; }
.fb-badge.fb-st-planned  { background:#cfcfcf; }
.fb-badge.fb-st-progress { background:#f5e08a; }
.fb-badge.fb-st-hold     { background:#f0a0a0; }
.fb-badge.fb-st-done     { background:#a6e3b0; }

/* ── 이미지 = [img] dim 라벨 + 픽셀 프레임 썸네일 (탭=새 탭, 전체화면 lightbox는 §7 후속) ── */
.fb-imgs { margin-top:11px; }
.fb-imgs.sm { margin-top:6px; }
.fb-imgline { font-size:11px; color:var(--text-dim); margin-bottom:5px; }
.fb-imgrow { display:flex; flex-wrap:wrap; gap:8px; }
.fb-img { max-width:220px; max-height:220px; border:2px solid var(--border-hi); cursor:pointer; object-fit:cover; }
.fb-imgs.sm .fb-img { max-width:170px; max-height:170px; }

/* ── 답글 tree (├─ └─ │, --line) · ★P3b = parent_id 다단계 nested(웹 무캡). 답글줄 = (글리프) CODE···· [시간] 본문 — $/# 프롬프트 없음(op=accent 색만, Hana 확정) ── */
.fb-tree { margin:0 15px 13px; border-top:2px solid var(--border); padding-top:11px; display:flex; flex-direction:column; gap:8px; }
.fb-thread-toggle { font-size:12px; color:var(--text-dim); background:none; border:none; width:fit-content; padding:0; cursor:pointer; font-family:'Galmuri9', var(--mono); }
.fb-thread-toggle:hover { color:var(--accent); }
.fb-trow { display:flex; align-items:flex-start; font-size:13px; }
.fb-tglyph { white-space:pre; color:var(--line); flex-shrink:0; line-height:1.6; font-family:var(--mono); }
.fb-tnode { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.fb-tline1 { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; line-height:1.6; }
.fb-rcode { color:var(--accent); text-shadow:0 0 7px rgba(245,169,122,.55); font-size:13px; }   /* ★#3 코드네임=accent 주황(op/user 통일·HANA/HARA처럼). op=이름(HANA)으로 식별 */
.fb-rcode.op { color:var(--accent); text-shadow:0 0 7px rgba(245,169,122,.55); }
.fb-rtime { color:var(--text-dimmer); font-size:11px; }
.fb-rtext { color:var(--text); font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.fb-rtext.fb-deleted { color:var(--text-dimmer); font-style:italic; }   /* tombstone "[삭제된 댓글]" */
/* 가지 접기 토글(▾/▸ 답글 N) + 답글 버튼(↩) — 작은 dim 인라인 */
.fb-rtoggle { font-size:11px; color:var(--text-dim); background:none; border:none; padding:0; cursor:pointer; font-family:'Galmuri9', var(--mono); }
.fb-rtoggle:hover { color:var(--accent); }
/* 인라인 답글 컴포저 (└─ + 입력박스 안 '>' 프롬프트, 주황·캐럿. $ 없음 — Hana 확정) */
.fb-rcompose { display:flex; align-items:center; gap:8px; }
.fb-rfield { position:relative; flex:1; min-width:0; display:flex; }
.fb-rprompt-in { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--accent); font-family:var(--mono); font-size:13px; pointer-events:none; text-shadow:0 0 6px rgba(245,169,122,.5); }
.fb-cmt-input { flex:1; min-width:0; background:var(--surface2); border:2px solid var(--border); color:#fff6ea; padding:6px 10px 6px 24px; font-size:13px; font-family:var(--sans); caret-color:var(--accent); caret-shape:block; }
.fb-cmt-input::placeholder { color:var(--text-dimmer); }
/* ★focus = 강한 흰/빨강 대신 주황 테두리 + 약한 글로우(터미널 톤, Hana 트윅) */
.fb-cmt-input:focus, .fb-edit-text:focus { outline:none; border-color:var(--accent); box-shadow:0 0 8px rgba(245,169,122,.35); }

/* ── 편집 폼 ── */
.fb-edit { display:flex; flex-direction:column; gap:7px; margin-top:4px; }
.fb-edit-text { width:100%; min-height:54px; resize:vertical; background:var(--surface2); border:2px solid var(--border-hi); color:var(--text); padding:8px; font-size:13px; font-family:var(--sans); box-sizing:border-box; caret-color:var(--accent); }
.fb-edit-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── 필터 탭 + 페이지 네비 ── */
.fb-tabs { display:flex; flex-wrap:wrap; gap:6px; flex-shrink:0; }
.fb-tab { font-size:12px; border:2px solid var(--border); padding:5px 12px; cursor:pointer; background:transparent; color:var(--text-dim); font-family:'Galmuri9', var(--mono); }
.fb-tab:hover { color:var(--text); border-color:var(--border-hi); }
.fb-tab.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.fb-pager { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:6px 0 4px; flex-shrink:0; }
.fb-pg { min-width:30px; font-size:12px; border:2px solid var(--border); padding:6px 9px; cursor:pointer; background:var(--surface); color:var(--text-dim); font-family:var(--mono); }
.fb-pg:hover:not(:disabled) { color:var(--text); border-color:var(--border-hi); }
.fb-pg.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.fb-pg:disabled { opacity:.4; cursor:default; }

/* ── 상태(빈/로딩/오프라인) = 터미널 톤 ── */
.fb-state .fb-statebody { display:flex; flex-direction:column; align-items:center; gap:13px; text-align:center; padding:26px 18px; }
.fb-state .fb-statebody.left { align-items:flex-start; text-align:left; padding:18px; }
.fb-statecat { width:54px; image-rendering:pixelated; opacity:.92; }
.fb-state-msg { font-size:14px; color:var(--text); line-height:1.65; white-space:pre-line; }
.fb-state-sub { font-size:12px; color:var(--text-dim); }
.fb-state-tag { font-size:11px; color:var(--text-dimmer); }
.fb-errline { font-size:13px; color:var(--bad); line-height:1.6; }
.fb-errline .pf { color:var(--text-dim); }
.fb-dots { display:inline-flex; gap:6px; align-items:center; }
.fb-dots i { width:8px; height:8px; background:var(--accent); display:inline-block; opacity:.25; animation:wcdot 1.05s infinite; }
.fb-dots i:nth-child(2) { animation-delay:.18s; }
.fb-dots i:nth-child(3) { animation-delay:.36s; }
.fb-flash { border-color:var(--accent); }   /* 해시 점프 강조 (챔퍼가 box-shadow 클립 → border-color로) */

/* ── 단어 사전뷰 (번역 후 한글 단어 탭 → 카드[한글+RR+영어뜻]) ── */
.tr-result { white-space: pre-wrap; line-height: 1.95; font-size: 15px; color: var(--text); }
.tr-tap { cursor: pointer; border-bottom: 1px dotted var(--accent-border); border-radius: 3px; padding: 0 1px; transition: background .12s; }
.tr-tap:hover { background: var(--accent-dim); }
.word-card { position: absolute; z-index: 1000; min-width: 150px; max-width: 280px; background: var(--surface); border: 1px solid var(--border-hi); border-radius: 10px; padding: 11px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.wc-ko { font-size: 20px; font-weight: 400; color: var(--text); letter-spacing: .2px; }
.wc-rr { font-size: 13px; color: var(--text-dim); margin-top: 2px; font-style: italic; }
.wc-sep { height: 1px; background: var(--border); margin: 9px 0; }
/* 형태소 분해 단어카드 — 어절 → 형태소별(내용어 krdict 영어뜻 / 조사 문법글로서리). 뜻 없을 때만 coming soon. */
.wc-morph { display: flex; flex-direction: column; gap: 9px; }
.wc-m + .wc-m { border-top: 1px solid var(--border); padding-top: 9px; }
.wc-m-h { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.wc-m-word { font-size: 15px; color: var(--text); font-weight: 700; }
.wc-m-pos { font-size: 10px; color: var(--accent); font-family: var(--mono); }
.wc-m-en { font-size: 13px; color: var(--text); line-height: 1.45; margin-top: 3px; }
.wc-m-en b { color: var(--text); font-weight: 700; }
.wc-m-soon { font-size: 12px; color: var(--text-dimmer); font-style: italic; margin-top: 3px; }
/* 단어카드 ★ 사전 저장 진입점 */
.wc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wc-star { font-size: 15px; color: var(--text-dimmer); cursor: pointer; line-height: 1; padding: 1px 1px 4px; flex-shrink: 0; }
.wc-star.on { color: var(--accent); }
.wc-toast { margin-top: 9px; font-size: 11px; color: var(--ok); border: 2px solid var(--border); background: #140f0a; padding: 5px 9px; opacity: 0; transition: opacity .2s; }
.wc-toast.show { opacity: 1; }
/* 단어카드 로딩 — krdict 불러오는 중 점 3개 */
.wc-loading { display: flex; gap: 5px; padding: 6px 2px; }
.wc-loading i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .25; animation: wcdot 1.05s infinite; }
.wc-loading i:nth-child(2) { animation-delay: .18s; }
.wc-loading i:nth-child(3) { animation-delay: .36s; }
@keyframes wcdot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ===== 사전(Dictionary) — 레트로 터미널. 레이아웃 B: 웹 2-pane(좌 검색+즐겨찾기 / 우 상세) · 모바일 세로 스택 ===== */
.boxHi { box-shadow: 0 0 14px rgba(245,169,122,.12); }   /* 외곽 발광 — 은은하게 */
.dict-view { display: flex; flex-direction: column; gap: 13px; padding: 14px; }   /* ★max-width 제거 + 좌우 여백 14px=번역기 뷰와 통일(Hana) */
.dict-srch { order: 1; } .dict-detail { order: 2; } .dict-fav { order: 3; }
@media (min-width: 640px) {
  .dict-view { display: grid; grid-template-columns: 300px 1fr; grid-template-areas: "srch detail" "fav detail"; column-gap: 22px; row-gap: 13px; align-items: start; }   /* 좌 검색/즐겨찾기 레일 확대 244→300 */
  .dict-srch { grid-area: srch; } .dict-fav { grid-area: fav; } .dict-detail { grid-area: detail; min-width: 0; }
}
.dict-srch { border: 2px solid var(--border-hi); background: var(--surface); box-shadow: 0 0 14px rgba(245,169,122,.12); }   /* 검색 터미널 외곽 발광(은은) */
/* ★dict 박스에선 타이틀바를 in-flow로(번역기용 절대배치가 헤더 덮는 버그 방지) */
.dict-srch .win8-titlebar, .dict-card .win8-titlebar { position: static; height: auto; padding: 6px 10px; z-index: auto; }
.dict-srow { display: flex; align-items: center; gap: 8px; padding: 9px 11px; }
.dict-prompt { color: var(--accent); font-family: var(--mono); font-size: 15px; text-shadow: 0 0 7px rgba(245,169,122,.55); }
.dict-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff6ea; font-family: var(--sans); font-size: 15px; caret-color: var(--accent); }
.dict-input::placeholder { color: var(--text-dimmer); }
.dict-sbtn { flex-shrink: 0; border: 2px solid var(--accent); background: var(--accent); color: var(--surface); font-family: var(--sans); font-size: 12px; padding: 6px 12px; cursor: pointer; box-shadow: 3px 3px 0 var(--accent-shadow); }
.dict-sbtn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--accent-shadow); }
/* 즐겨찾기 = 앱처럼 터미널 박스(타이틀바 접기 ▾/▸ + 필터 row + 단어칩) */
.dict-fav { border: 2px solid var(--border-hi); background: var(--surface); box-shadow: 0 0 14px rgba(245,169,122,.12); }
.dict-favbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface2); cursor: pointer; font-family: 'Galmuri9', var(--mono); font-size: 12px; letter-spacing: .06em; }   /* 검색바 win8-titlebar와 폰트 통일(앱과 동일 룩) */
.dict-favbar .tb-o { color: var(--accent); }   /* HARA·개수 = 주황(앱 tbO) */
.dict-favbar .tb-w { color: var(--text); }     /* root@·:/krdict# = 흰(앱 tbW) */
.dict-favbar.open { border-bottom: 2px solid var(--border); }
.dict-favbar .tb-cat { width: 15px; height: auto; image-rendering: pixelated; flex-shrink: 0; }
.dict-favttl { font-size: 12px; color: var(--text-dim); }
.dict-favsp { flex: 1; }
.dict-favchev { color: var(--text-dim); font-size: 11px; flex-shrink: 0; }
.dict-favbody { padding: 12px; display: flex; flex-direction: column; gap: 11px; }
.dict-favsrch { display: flex; align-items: center; gap: 7px; }
.dict-favfilter { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff6ea; font-family: var(--sans); font-size: 14px; caret-color: var(--accent); }
.dict-favfilter::placeholder { color: var(--text-dimmer); }
.dict-fchip { font-size: 10px; color: var(--text-dim); border: 2px solid var(--border); padding: 3px 7px; cursor: pointer; flex-shrink: 0; }
.dict-fchip.on { color: var(--surface); background: var(--accent); border-color: var(--accent); }
.dict-favbtns { display: flex; flex-wrap: wrap; gap: 7px; }
.dict-favword-btn { border: 2px solid var(--border); background: #140f0a; color: var(--accent); font-size: 13px; padding: 7px 11px; cursor: pointer; }
.dict-favword-btn:hover { border-color: var(--border-hi); }
.dict-star { font-size: 13px; color: var(--text-dimmer); flex-shrink: 0; cursor: pointer; }
.dict-star.on { color: var(--accent); }
.dict-hint { color: var(--text-dim); font-size: 13px; padding: 20px 6px; text-align: left; line-height: 1.6; }
.dict-loading { display: flex; gap: 5px; padding: 20px; justify-content: center; }
.dict-loading i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .25; animation: wcdot 1.05s infinite; }
.dict-loading i:nth-child(2) { animation-delay: .18s; } .dict-loading i:nth-child(3) { animation-delay: .36s; }
.dict-card { border: 2px solid var(--border-hi); background: var(--surface); margin-bottom: 13px; }
/* 슬랭 카드 = 출신색 빨강(웹은 hacked 색 시스템 없어 하드코딩) — 교차검색으로 일반 화면서도 슬랭은 빨강 */
.dict-card.slang { border-color: #ff5c5c; box-shadow: 0 0 14px rgba(255,92,92,.18); }
.dict-card.slang .dict-hw { color: #ff5c5c; text-shadow: 0 0 7px rgba(255,92,92,.55); }
.dict-card.slang .dict-snum, .dict-card.slang .dict-spos { color: #ff5c5c; }
.dict-card.slang .win8-titlebar .tb-o { color: #ff5c5c; }
.dict-chd .dict-star { margin-left: auto; }
.dict-cbody { padding: 14px 15px 8px; }
.dict-chd { cursor: pointer; }   /* 타이틀바 탭=접기/펼치기 */
.dict-chev { margin-left: 8px; color: var(--text-dim); font-size: 11px; flex-shrink: 0; }
.dict-card.collapsed .dict-cbody { display: none; }
.dict-card.collapsed .win8-titlebar { border-bottom: none; }   /* ★2026-07-23 규격화: 접힘 시 하단 보더 소거(FavTerm 접힘=뭉뚝 방지) */
.dict-hwrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.dict-hw { font-size: 21px; color: var(--accent); text-shadow: 0 0 7px rgba(245,169,122,.55); }
.dict-romaja { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
/* register(어원) 뱃지 — 방언/옛말/문화어. sense 앞 작은 칩(은은) */
.dict-reg { font-size: 10px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 2px; padding: 0 5px; margin-right: 4px; white-space: nowrap; }
/* cross-reference 링크 — 뜻풀이 속 단어(‘역사’ 등) 탭=재검색 */
.dict-xref { color: var(--accent); text-decoration: underline; cursor: pointer; }
.dict-sense { display: flex; gap: 9px; padding: 11px 0; border-top: 1px solid #261d15; }
.dict-snum { color: var(--accent); font-size: 14px; flex-shrink: 0; line-height: 1.5; }
.dict-sbody { flex: 1; min-width: 0; }
.dict-spos { font-size: 11px; color: var(--accent); font-weight: 700; margin-bottom: 2px; }   /* sense별 품사 인라인(headword 칩 폐지) */
.dict-sdef { font-size: 14px; line-height: 1.55; color: var(--text); }
.dict-enw { color: var(--accent); font-weight: 400; }
/* HARA 생성 영어뜻 배지 — krdict 공식과 구분(작고 은은). generated sense만. */
.dict-ai-badge { font-size: 9px; color: var(--accent); border: 1px solid var(--border); border-radius: 2px; padding: 0 4px; margin-left: 5px; white-space: nowrap; opacity: .72; vertical-align: middle; }
/* 교육뜻 예문 쌍 — 뜻 아래 은은한 인용 블록 */
.dict-ex { margin-top: 6px; padding: 2px 0 2px 8px; border-left: 2px solid var(--border); }
.dict-ex-ko { display: block; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.dict-ex-en { display: block; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.dict-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 14px 26px; gap: 13px; }
.dict-ebubble { position: relative; border: 2px solid var(--border); background: var(--surface); padding: 11px 15px; font-size: 13px; color: var(--text); line-height: 1.55; }
.dict-etail { position: absolute; left: 50%; top: -6px; margin-left: -3px; width: 6px; height: 6px; background: var(--surface); border-left: 2px solid var(--border); border-top: 2px solid var(--border); }
.dict-edim { color: var(--text-dim); font-size: 12px; line-height: 1.7; }

/* ════════════════════════════════════════════════════════════════════════
   레트로 "카트리지 OS" SKIN  (2026-06-25 · HARA_RETRO_CARTRIDGE_SPEC)
   표면 처리만(레이아웃 불변). 색=기존 토큰 + --accent-shadow 1개.
   ★박스=각진 rect(2px border·챔퍼 제거, Hana 2026-07-01 전 웹 통일) / 버튼·칩=하드 오프셋 그림자(blur0)
     — (구: clip-path 챔퍼는 box-shadow를 잘라 버튼 그림자와 공존 불가라 박스엔 그림자X였음. 이제 챔퍼 없음 → boxHi 발광 자유.)
   ★폰트=Galmuri(라벨·버튼·칩·메뉴) / 본문·번역결과=Noto 유지.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --accent-shadow: #5e3a25;
  /* ★전 UI 폰트 Galmuri 통일 (Hana 2026-06-25) — 토큰 재정의 → 토큰 쓰는 전 컴포넌트 자동 적용
     (본문·입력·결과=Galmuri11 / 수치·모노=GalmuriMono11[정렬 유지]). 외부 폰트 0(Galmuri 단일). */
  --sans: 'Galmuri11', sans-serif;
  --mono: 'GalmuriMono11', 'Galmuri11', monospace;
}

/* ── 프리미티브 ── */
.prompt { color: var(--accent); font-family: var(--mono); margin-right: 7px; }
.cur { display:inline-block; width:10px; height:1.05em; background:var(--accent); box-shadow:0 0 8px rgba(245,169,122,.7); vertical-align:-3px; margin-left:3px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* ── 사이드바: 6px 체커 디더 + 2px 경계 ── */
#sidebar { background-image: repeating-conic-gradient(var(--bg) 0% 25%, #110c09 0% 50%); background-size: 6px 6px; border-right-width: 2px; }
.sidebar-menu-bottom, .sidebar-user { border-top-width: 2px; }
.sidebar-top { border-bottom-width: 2px; }
/* 메뉴 아이템 = 픽셀 칩 (Galmuri9 + 2px 테두리 + 하드 오프셋 그림자 + 눌림) */
.new-chat-btn { font-family:'Galmuri9', var(--mono); font-size:13px; letter-spacing:0; text-transform:none; border-width:2px; border-color:var(--border); background:var(--surface2); color:var(--text-dim); box-shadow:3px 3px 0 var(--shadow-hard); }
.new-chat-btn:hover { background:var(--surface2); border-color:var(--accent); color:var(--accent); box-shadow:1px 1px 0 var(--shadow-hard); transform:translate(2px,2px); }
.new-chat-btn:active { transform:translate(3px,3px); box-shadow:0 0 0 var(--shadow-hard); opacity:1; }

/* ── 헤더 ── */
header { border-bottom-width: 2px; }
.header-session-title { font-family: 'Galmuri11', var(--mono); }   /* "번역하라/분석하라" 브랜드 폰트(로고 워드마크와 통일) */
.header-deep-btn { font-family:'Galmuri9', var(--mono); font-size:11px; letter-spacing:0; border-width:2px; box-shadow:2px 2px 0 var(--shadow-hard); }
.header-deep-btn.active { box-shadow:2px 2px 0 var(--accent-shadow); }

/* ── 번역기 toolbar: Galmuri 라벨 + 픽셀칩 버튼 ── */
.code-title { font-family:'Galmuri11', var(--mono); }
.exp-tag { font-family:'Galmuri9', var(--mono); }
.trans-style-label { font-family:'Galmuri9', var(--mono); }
.trans-dir-btn { font-family:'Galmuri9', var(--mono); border-width:2px; }
.style-chip { font-family:'Galmuri9', var(--mono); border-width:2px; border-radius:0; }
.trans-bigbtn { font-family:'Galmuri9', var(--mono); border-width:2px; border-color:var(--border-hi); background:var(--surface2); color:var(--text-dim); box-shadow:3px 3px 0 var(--shadow-hard); }
.trans-bigbtn:hover { color:var(--text); box-shadow:1px 1px 0 var(--shadow-hard); transform:translate(2px,2px); }
.trans-bigbtn:active { transform:translate(3px,3px); box-shadow:none; }
.trans-bigbtn.primary { border-color:#17110c; background:var(--accent); color:var(--on-accent); box-shadow:3px 3px 0 var(--accent-shadow); }
.trans-bigbtn.primary:hover { background:var(--accent-hi); box-shadow:1px 1px 0 var(--accent-shadow); transform:translate(2px,2px); }

/* ── 번역 박스 = 각진 rect + 타이틀바(CSS ::before, favicon 고양이 16px) ★챔퍼 제거(Hana: 웹=앱처럼 각진 rect·전 웹 통일) ── */
.trans-top-wrap, .trans-src-wrap {
  border: 2px solid var(--border-hi); background: var(--surface); padding-top: 28px;
}
/* 터미널 타이틀바 — 셸 프롬프트 풍 INPUT@HARA:~$ (단어=주황 .tb-o / @·:~$=흰 .tb-w). 고양이 16px. */
.win8-titlebar {
  position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 2;
  background: var(--surface2); border-bottom: 2px solid var(--border);
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  font-family: 'Galmuri9', var(--mono); font-size: 12px; letter-spacing: .06em;
}
.win8-titlebar .tb-cat { width: 15px; height: auto; image-rendering: pixelated; }
.win8-titlebar .tb-o { color: var(--accent); }
.win8-titlebar .tb-w { color: var(--text); }
.win8-titlebar .tb-out { display: none; }   /* 메인 박스: 기본 입력(tb-in), 결과 시 출력(tb-out) */
#translator-view.tv-done .trans-pane-main .tb-in,
#translator-view.tv-2col .trans-pane-main .tb-in { display: none; }
#translator-view.tv-done .trans-pane-main .tb-out,
#translator-view.tv-2col .trans-pane-main .tb-out { display: inline; }
/* 창이 테두리 담당 → 안쪽 textarea/anim 테두리 제거 */
.trans-box { border: none; background: transparent; }
.trans-box:focus { border: none; }
.busy-overlay { top: 28px; }   /* 타이틀바 아래로 */
/* ★2026-07-23 규격화: 번역 in/out 박스 접힘 (탭 클릭 토글=toggleTransBox·auto-expand=requestTranslate) — 접힘 시 타이틀바만(높이=padding-top 28px) */
.trans-top-wrap .win8-titlebar, .trans-src-wrap .win8-titlebar { cursor: pointer; }
.trans-top-wrap.collapsed .trans-box, .trans-top-wrap.collapsed .term-cur,
.trans-src-wrap.collapsed .trans-box, .trans-src-wrap.collapsed .term-cur { display: none; }
.trans-top-wrap.collapsed::after, .trans-src-wrap.collapsed::after { display: none; }   /* 접힘=탭만 → '>' 프롬프트 숨김 */
.trans-top-wrap.collapsed .win8-titlebar, .trans-src-wrap.collapsed .win8-titlebar { border-bottom: none; }   /* 접힘=뭉뚝 방지 */
.trans-top-wrap.collapsed, .trans-src-wrap.collapsed { padding-top: 28px; }   /* body 소거 시 박스=타이틀바 높이(26+border2)로 수렴 */

/* 터미널 프롬프트: 결과 hero 앞 '>' + busy 메시지 끝 깜빡 커서 */
.tr-result::before { content: '> '; color: var(--accent); font-family: var(--mono); }
#trans-busy-msg::after { content: ''; display: inline-block; width: 9px; height: 1em; background: var(--accent); margin-left: 5px; vertical-align: -2px; box-shadow: 0 0 8px rgba(245,169,122,.7); animation: blink 1s steps(1) infinite; }

/* 단어 칩 = Galmuri + 좌 coral 보더 · 단어 탭 밑줄 = 굵은 점선 */
.tr-word, .tr-words-head { font-family: 'Galmuri9', var(--mono); }
.tr-word { border-left: 3px solid var(--hara,#e8896b); padding-left: 7px; }
.tr-tap { border-bottom: 2px dotted var(--accent-shadow); }

/* ════ 롤아웃: 나머지 화면(BTC·피드백·로그인) ════ */
/* 박스=각진 rect(2px border·챔퍼 제거) / 버튼=하드 그림자(2px). */

/* ── BTC 분석 ── */
.tv-sub { border-width: 2px; }
.tv-indicators .tv-tf { border-width: 2px; }
.tv-analyze { font-family:'Galmuri9', var(--mono); border:2px solid #17110c; box-shadow:3px 3px 0 var(--accent-shadow); }
.tv-analyze:hover { background:var(--accent-hi); box-shadow:1px 1px 0 var(--accent-shadow); transform:translate(2px,2px); }
.tv-analyze:active:not(:disabled) { transform:translate(3px,3px); box-shadow:none; }

/* ── 커뮤니티(소통하라): 박스 = 번역/사전 터미널과 동일 plain rect(★Hana: 챔퍼 제거·100% 일관). 칩/입력/tree는 위 메인 블록서 스타일. ── */
.fb-compose, .fb-post {
  border-width:2px; border-radius:0;
}

/* ── 로그인 ── */
.login-box {
  border-width:2px;   /* ★챔퍼 제거 = 각진 rect(전 웹 통일) */
}
.google-btn { border-radius:0; border:2px solid var(--border-hi); box-shadow:3px 3px 0 var(--shadow-hard); }
.google-btn:hover { box-shadow:1px 1px 0 var(--shadow-hard); transform:translate(2px,2px); opacity:1; }

/* ── (실험적) 태그 제거: 번역·분석(사이드바 메뉴 + 번역 타이틀). 피드백 'share bugs' 태그는 유지 ── */
.new-chat-btn .exp-tag, .code-title .exp-tag { display: none; }

/* ════ 터미널 프롬프트 '>' + 주황 깜빡 커서 (번역·피드백·사전·작문) ════ */
/* 네이티브 캐럿 숨기고 커스텀 글로우 블록(.term-caret)으로 통일 — 번역/사전/작문/커뮤니티 입력 전부.
   부착: 번역=translation.js attachTermCaret(뷰 진입), 그 외=main.js 전역 focusin delegation. */
.fb-cmt-input, .fb-edit-text,
.dict-input, .dict-favfilter, .writing-input,
.trans-box { caret-color: transparent; }   /* 네이티브 캐럿 숨김 → JS가 캐럿 위치에 글로우 블록 오버레이 (compose는 contenteditable=네이티브 accent 캐럿 유지) */
.term-caret { position: fixed; width: 9px; background: var(--accent); box-shadow: 0 0 9px rgba(245,169,122,.85); display: none; z-index: 60; pointer-events: none; animation: blink 1s steps(1) infinite; }
.term-mirror { position: fixed; visibility: hidden; pointer-events: none; z-index: -1; margin: 0; color: transparent; }

/* 번역 입력/결과 박스: 좌상단 '>' 오버레이 (textarea는 inline 불가 → 절대배치, textarea 첫 줄과 line-height 맞춤) */
.trans-top-wrap::after, .trans-src-wrap::after {
  content: '>'; position: absolute; top: 43px; left: 15px; z-index: 1; pointer-events: none;
  color: var(--accent); font-family: var(--mono); font-weight: 700; font-size: 15px; line-height: 1.7;
}
textarea.trans-box { padding-left: 28px; }   /* '>' 자리 확보(textarea만 — div 결과는 자체 inline '>') */
.trans-top-wrap:has(.tr-result)::after { display: none; }   /* div 결과는 .tr-result::before '>' 사용 → 오버레이 중복 숨김 */
/* 입력창 블록 커서: 비었고 비포커스일 때만 '> █'(placeholder 숨김) → 포커스/타이핑하면 주황 블록 캐럿 */
.term-cur { position: absolute; top: 46px; left: 28px; width: 9px; height: 18px; z-index: 1; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 8px rgba(245,169,122,.7); display: none; animation: blink 1s steps(1) infinite; }
.trans-top-wrap:has(.trans-top:placeholder-shown:not(:focus)) .term-cur,
.trans-src-wrap:has(.trans-src:placeholder-shown:not(:focus)) .term-cur { display: block; }
.trans-top::placeholder, .trans-src::placeholder { color: var(--text-dimmer); }   /* 안내문 어두운 톤 통일(dict 서치/필터와 동일) */
.trans-top:placeholder-shown:not(:focus)::placeholder,
.trans-src:placeholder-shown:not(:focus)::placeholder { color: transparent; }
/* 결과 끝 = 주황 글로우 블록 커서(깜빡) */
.tr-result::after { content: ''; display: inline-block; width: 10px; height: 1.05em; background: var(--accent); box-shadow: 0 0 8px rgba(245,169,122,.7); vertical-align: -3px; margin-left: 4px; animation: blink 1s steps(1) infinite; }

/* (커뮤니티 입력 프롬프트 = compose .fb-cprompt '>' + 답글 컴포저 .fb-rprompt-in '>'(입력박스 안) — 답글과 일관·타이틀바 input@HARA:/community$ 락업은 불변. 옛 .term-field 제거) */

/* ═══ hacked(H4R4) 모드 — 코랄레드 테마(앱 theme.ts hackedPal 대응). 부팅 html.hacked-mode(FOUC 방지) — :root + 이 블록이 테마 단일 소유(수선#14·JS applyTheme 인라인 제거) ═══ */
html.hacked-mode {
  --accent: #ff5c5c; --accent-hi: #ff8a7a; --accent-dim: rgba(255,92,92,0.09); --accent-border: rgba(255,92,92,0.2);   /* ★S4 수선#14: --accent-dim 0.07→0.09 = 라이브 실거동(JS THEME_HACKED.accentDimBg=0.09가 applyTheme 인라인으로 override하던 값)과 CSS 정합 */
  --hara: #ff8a7a; --hara-dim: rgba(255,138,122,0.07); --accent-shadow: #7a2a2a;
  --bg: #100707; --surface: #1a0d0c; --surface2: #241210; --border: #3a1f1c; --border-hi: #4d2825; --reasoning-bg: #170b0a;
  --text-dim: #9c6f64; --text-dimmer: #5e3a32;   /* 흐린 텍스트(메뉴 라벨·디폴트) 붉은 갈색 */
}
html.hacked-mode .logo-tagline { color: var(--accent); }   /* 태그라인 빨강 (일반=갈색 유지) */
html.hacked-mode .new-chat-btn[href="/"] { display: none; }   /* hacked=번역 메뉴 숨김 (번역 route=/, 일반하라=번역기) */
html:not(.hacked-mode) .new-chat-btn[href="/analysis-btc"] { display: none; }   /* 일반=분석 메뉴 숨김 (분석은 hacked 전용, 해킹하라=분석) */
/* H4R4 토글 버튼 (계정 팝오버, 언어토글 아래) */
.hacked-btn { flex-basis: 100%; margin-top: 6px; padding: 5px 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--text-dimmer); background: transparent; border: 1px solid var(--border); cursor: pointer; transition: all .15s; }
.hacked-btn:hover { color: #ff5c5c; border-color: #ff5c5c; }
html.hacked-mode .hacked-btn { color: #fff; background: #ff5c5c; border-color: #ff5c5c; box-shadow: 0 0 10px rgba(255,92,92,.4); }

/* ===== 작문(Writing HARA) — Phase 1 웹 셸. 3겹 세로 스택. dict 즐겨찾기 칩·win8-titlebar·.trans-bigbtn 재사용, 없는 것만 추가. ===== */
.writing-view { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; gap: 13px; padding: 14px; }   /* 서버 라우팅=뷰 1개만 주입 → dict-view처럼 항상 표시. ★flex:1+min-height:0+overflow-y:auto=세로 스크롤 컨테이너(html/body overflow:hidden이라 이게 없으면 긴 검토결과가 잘리고 스크롤 불가·Hana 실기 2026-07-18·#trading/#community 동일 패턴) */
.writing-view .win8-titlebar { position: static; height: auto; padding: 6px 10px; z-index: auto; }   /* dict처럼 in-flow(번역기용 절대배치 버그 회피) */
/* 1. 즐겨찾기 스트립 */
.writing-favstrip { border: 2px solid var(--border-hi); background: var(--surface); box-shadow: 0 0 14px rgba(245,169,122,.12); }
.writing-favbody { padding: 11px 12px; }
.writing-favstrip-chips { display: flex; flex-wrap: nowrap; gap: 7px; overflow-x: auto; padding-bottom: 3px; }
.writing-favchip { flex: 0 0 auto; white-space: nowrap; }   /* 가로 스크롤 스트립(사전 즐겨찾기 칩=wrap과 달리 한 줄) */
/* 슬랭 칩 = 빨강(register/severity 보유) — 사전 슬랭 카드와 동일 색계열 */
.dict-favword-btn.slang { border-color: #ff5c5c; color: #ff5c5c; box-shadow: 0 0 10px rgba(255,92,92,.18); }
.dict-favword-btn.slang:hover { border-color: #ff8a7a; }
/* 2. 작문 터미널 */
.writing-term { border: 2px solid var(--border-hi); background: var(--surface); box-shadow: 0 0 14px rgba(245,169,122,.12); display: flex; flex-direction: column; }
.writing-input { width: 100%; min-height: 220px; resize: vertical; background: #0c0907; color: var(--text); border: 0; border-bottom: 2px solid var(--border); padding: 15px; font-size: 15px; line-height: 1.7; outline: none; white-space: pre-wrap; word-break: break-word; font-family: var(--sans, inherit); }   /* caret-color = 위 통합 규칙(.term-caret 글로우 블록) */
.writing-input::placeholder { color: var(--text-dimmer); }
.writing-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex-wrap: wrap; }
.writing-actions { display: flex; gap: 10px; align-items: center; }
.writing-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
/* ★2026-07-23 규격화: 작문 input/review 접힘(탭 클릭 토글) + '>' 프롬프트(다른 입력 터미널 정합·relay 탭 제외) */
.writing-term, .writing-orig { position: relative; }
.writing-term > .win8-titlebar, .writing-review > .win8-titlebar { cursor: pointer; }
.writing-term.collapsed .writing-input, .writing-term.collapsed .writing-foot,
.writing-review.collapsed .writing-review-body { display: none; }
.writing-term.collapsed > .win8-titlebar, .writing-review.collapsed > .win8-titlebar,
.writing-orig.collapsed .win8-titlebar { border-bottom: none; }   /* 접힘=뭉뚝 방지(FavTerm 접힘 정합) */
.writing-term:not(.writing-relay-tab)::after, .writing-orig::after {
  content: '>'; position: absolute; top: 44px; left: 15px; z-index: 1; pointer-events: none;
  color: var(--accent); font-family: var(--mono); font-weight: 700; font-size: 15px; line-height: 1.7;
}
.writing-term.collapsed::after, .writing-orig.collapsed::after { display: none; }
.writing-input { padding-left: 28px; }   /* '>' 자리 확보(작문/원문 공용 textarea) */
/* 3. review 영역 — 공사중(Whisker down) + 검토 결과(up·2026-07-10 배선: 교정문 블록+edits 목록+raw 폴백) */
.writing-review { border: 2px solid var(--border-hi); background: var(--surface); }
.writing-review-body { padding: 16px; }
/* ★리빌드 완료 = 외곽 리뷰 터미널 크롬 제거 → 결과 카드(자체 rebuild# 터미널)가 리뷰 터미널 자리를 통째로 차지 */
.writing-review.rebuilt { border: none; background: none; }
.writing-review.rebuilt > .win8-titlebar { display: none; }
.writing-review.rebuilt .writing-review-body { padding: 0; }
/* ★2026-07-24: 결과 카드 자체 접힘(rebuilt = 외곽 크롬 없음 → collapsed 대신 카드 바 유지·바디만 접힘) */
.writing-review.rebuilt .w-result-bar { cursor: pointer; }
.writing-review.result-folded .w-result-body { display: none; }
.writing-review.result-folded .w-result-bar { border-bottom: none; }   /* 접힘=뭉뚝 방지(FavTerm 규격) */
.writing-review.result-folded .w-result-bar .tb-chev .ic { transform: rotate(-90deg); }
.writing-review-out { display: flex; flex-direction: column; gap: 10px; }
.writing-review-ok { color: var(--ok); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.writing-review-corrected { background: #0c0907; border: 1px solid var(--border); padding: 11px 12px; font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.writing-review-corrected .we-lbl { display: block; font-family: var(--mono); font-size: 10px; color: var(--accent); margin-bottom: 5px; letter-spacing: .4px; }
.writing-edit { font-size: 13px; line-height: 1.6; }
.writing-edit .we-orig { color: var(--bad); text-decoration: line-through; }
.writing-edit .we-corr { color: var(--ok); }
.writing-edit .we-type { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
.writing-edit .we-reason { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.writing-review-raw { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.writing-wip { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.writing-wip-badge { font-family: var(--mono); font-size: 11px; color: var(--surface); background: var(--accent); padding: 3px 9px; box-shadow: 3px 3px 0 var(--accent-shadow); }
.writing-wip-note { color: var(--text-dim); font-size: 13px; line-height: 1.6; }

/* ══ ★Task A: 붕괴 의도 질문 플로우 (스펙 writing-intent-flow.md §3~§5·§12·기존 토큰 재사용) ══ */
/* corrected 전문 속 붕괴 span = muted 점선 + "(재구성 필요)" 태그(정직성 §2.4) */
.w-collapse-muted { color: var(--text-dimmer, #8c7660); border-bottom: 1px dashed var(--text-dimmer, #8c7660); opacity: .8; }
.w-collapse-tag { font-family: var(--mono); font-size: 10px; color: var(--accent); opacity: .85; }
.w-collapse-log { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12px; padding: 4px 2px; }
/* 질문 카드 = 헤아림 .ask-card 셸 미러(accent 보더·surface) */
.w-intent-card { border: 1px solid var(--accent); border-radius: 8px; background: var(--surface); padding: 11px 13px; display: flex; flex-direction: column; gap: 9px; }
.w-intent-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.w-intent-head .logo-cat, .w-intent-head img { flex: 0 0 auto; }
.w-intent-intro { color: var(--text-dim); font-size: 13px; line-height: 1.55; }
.w-intent-q { color: var(--text); font-size: 13.5px; line-height: 1.5; }
.w-intent-ta { width: 100%; min-height: 60px; resize: vertical; background: #0c0907; color: var(--text); border: 1px solid var(--border-hi); padding: 9px 11px; font-size: 14px; line-height: 1.6; outline: none; font-family: var(--sans, inherit); border-radius: 4px; }
.w-intent-ta:focus { border-color: var(--accent); }
.w-intent-ta::placeholder { color: var(--text-dimmer); }
.w-intent-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.w-intent-chip { font-family: var(--mono); font-size: 12px; padding: 6px 12px; cursor: pointer; -webkit-appearance: none; border-radius: 0; border: 1px solid var(--border-hi); background: var(--surface2); color: var(--text-dim); }
.w-intent-chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.w-intent-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.w-intent-btn { font-family: var(--mono); font-size: 13px; font-weight: 500; padding: 8px 18px; cursor: pointer; -webkit-appearance: none; border-radius: 0; border: 1px solid var(--border-hi); background: none; color: var(--text-dim); }
.w-intent-btn:hover { color: var(--text); border-color: var(--accent); }
.w-intent-btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.w-intent-btn.primary:hover { background: var(--accent-hi); }
.w-intent-skiplink { align-self: flex-start; background: none; border: none; color: var(--text-dimmer); font-size: 12px; cursor: pointer; padding: 2px 0; text-decoration: underline; }
.w-intent-skiplink:hover { color: var(--text-dim); }
.w-intent-rebuilding { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 13px; }
.w-intent-rebuilding svg { width: 40px; height: auto; }
/* 결과 카드 = review 박스 톤 + rebuild# 터미널(win8-titlebar는 .writing-view서 이미 static=Task D 무이슈) */
.w-result-card { border: 2px solid var(--border-hi); background: var(--surface); box-shadow: 0 0 14px rgba(245,169,122,.12); }
.w-result-bar { display: flex; align-items: center; }
.w-result-bar .tb-chev { margin-left: 0; }   /* ★2026-07-24: copy(auto)+chev(auto) 이중 auto 마진 = copy가 중앙에 뜨는 버그 — 우측 정렬은 copy의 auto가 담당(teach 바와 동일 수법) */
.w-result-copy { margin-left: auto; background: none; border: none; color: var(--text); cursor: pointer; padding: 0 4px; display: inline-flex; }
.w-result-copy.copied { color: var(--ok); }
.w-result-body { padding: 13px 14px; display: flex; flex-direction: column; gap: 9px; }
.w-result-title { color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: .4px; }
.w-result-recon { background: #0c0907; border: 1px solid var(--border); padding: 12px 13px; font-size: 15px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; }
/* ★작성문→재구성 빨강→초록 diff rows(기존 .writing-edit idiom 재사용) — 결과 카드 내 재구성문 아래·설명 위 그룹 */
.w-result-diff { display: flex; flex-direction: column; gap: 6px; }
.w-result-expl { color: var(--text-dim); font-size: 13px; line-height: 1.6; }
/* ★칭찬(praise) 결과 = 초록 톤(작성문이 원문 의도 잘 표현) */
.w-result-card.w-result-praise { border-color: var(--ok, #86efac); box-shadow: 0 0 14px rgba(134,239,172,.14); }
.w-result-praise .w-result-title { color: var(--ok, #86efac); }
.w-result-praise .w-result-recon { border-color: rgba(134,239,172,.4); }

/* ══ ★상시 원문 터미널 (Hana rev3.1) — 접힘 기본·auto-grow·주황 하이라이트·동적버튼 ══ */
/* auto-grow(writing 입력·원문 입력 공용): 최소 2줄·내용 비례(JS가 height 설정)·resize/overflow off */
.writing-grow { min-height: 3.4em; resize: none; overflow: hidden; }
.writing-orig { border: 2px solid var(--border-hi); background: var(--surface); box-shadow: 0 0 14px rgba(245,169,122,.12); display: flex; flex-direction: column; }
.writing-orig .win8-titlebar { cursor: pointer; }   /* 탭 클릭 = 접기/펼치기 */
.writing-orig.collapsed .writing-input, .writing-orig.collapsed .writing-orig-foot { display: none; }   /* 접힘 = 탭만(값은 DOM 보존) */
/* ★2026-07-23 규격화: 접힘 chevron = FavTerm SVG(.tb-chev·회전은 상단 통일 블록) — 구 ▾/▸ ::after 폐기 */
/* 빈원문 Review 유도 = 밝은 주황 하이라이트(어디 쓰는지 시각 유도) */
.writing-orig.orig-highlight { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(245,169,122,.32); }
.writing-orig-foot { display: flex; flex-direction: column; gap: 9px; padding: 11px 12px; border-top: 2px solid var(--border); }
.writing-orig-ask { color: var(--text); font-size: 13.5px; line-height: 1.55; }
.writing-orig-foot .trans-bigbtn { align-self: flex-start; }

@media (max-width: 640px) {
  .writing-actions { flex: 1 1 100%; }
  .writing-actions .trans-bigbtn { flex: 1; padding: 9px 0; text-align: center; }
  .writing-count { margin-left: 0; flex-basis: 100%; }
}

/* ══ 헤아림 2.0 관람/질문/설명 (③단계·스펙 §7·§5.4·§7.4) — 기존 토큰 재사용·신규 자산 0 ══ */
.h2-stage { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; width: 100%; max-width: 560px; margin-top: auto; }   /* margin-top:auto = 공간 남으면 바닥 정렬(종전 flex-end 등가)·오버플로 시 0으로 붕괴 → 스크롤 컨테이너(#trans-busy.agent-working) 안에 갇힘 */
.h2-phases { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 12px; font-family: 'Galmuri9', monospace; }
.h2-ph { white-space: nowrap; }
.h2-ph-cur { color: var(--accent); font-weight: 700; }
.h2-ph-done { color: var(--ok); }
.h2-ph-todo { color: var(--text-dim); opacity: .7; }
.h2-ph-sep { color: var(--text-dim); opacity: .5; margin: 0 3px; }
.h2-checklist { display: flex; flex-direction: column; gap: 3px; }
.h2-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 2px 0; animation: h2fade .28s ease; }
.h2-line-ax { color: var(--text); }
.h2-line-src { color: var(--text-dim); font-size: 11px; white-space: nowrap; }
@keyframes h2fade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
/* verdict 시각(§7.3): pass ✓ok / patch ✎accent / retrans ↻hara */
.h2-verdict { border-left: 3px solid var(--border); padding: 5px 9px; border-radius: 4px; background: var(--surface2); font-size: 13px; animation: h2fade .3s ease; }
.h2-v-pass { border-left-color: var(--ok); }
.h2-v-patch { border-left-color: var(--accent); }
.h2-v-retrans { border-left-color: var(--hara); }
.h2-v-badge { font-weight: 700; }
.h2-v-pass .h2-v-badge { color: var(--ok); }
.h2-v-patch .h2-v-badge { color: var(--accent); }
.h2-v-retrans .h2-v-badge { color: var(--hara); }
.h2-v-note { color: var(--text-dim); }
.h2-edit { font-size: 12px; margin-top: 3px; color: var(--text-dim); }
.h2-edit-span { color: var(--bad); } .h2-edit-fix { color: var(--ok); }
/* 질문 카드(§5.4): PixelCat + 백엔드 텍스트 + 풀폭 옵션 스택 + 타임아웃/대기 */
.h2-question { border: 1px solid var(--accent); border-radius: 8px; padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; animation: h2fade .3s ease; pointer-events: auto; }   /* ★부모 오버레이(.busy-overlay.agent-working)가 pointer-events:none — 질문 카드만 클릭 복원(.trans-words 선례·실기 무반응 2026-07-18) */
.h2-question.h2-q-await { opacity: .55; }
.h2-q-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; }
.h2-q-seq { margin-left: auto; color: var(--text-dim); font-size: 11px; font-weight: 400; }
.h2-q-text { font-size: 15px; color: var(--text); }
.h2-q-opts { display: flex; flex-direction: column; gap: 6px; }
.h2-opt { width: 100%; min-height: 44px; text-align: left; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 14px; cursor: pointer; }
.h2-opt-rec { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.h2-opt-back { color: var(--text-dim); border-style: dashed; }
.h2-opt-subtask { color: var(--text-dim); }
.h2-opt:disabled { opacity: .5; cursor: default; }
.h2-q-foot { font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.h2-q-wait { font-style: italic; }
.h2-q-bar { flex: 1; height: 4px; background: var(--surface2); border-radius: 2px; overflow: hidden; }
.h2-q-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transition: width .1s linear; }
/* teach 탭(§7.4): win8-titlebar 규격 + 기본 펼침 + copy/chevron */
.trans-teach { margin: 8px 0; border: 2px solid var(--border-hi); border-radius: 0; overflow: hidden; }   /* ★2026-07-24 Hana: 각진 정규 터미널 규격(.writing-term 동일) — 둥근 모서리 이탈 수리 */
/* ★teach 타이틀바 = in-flow(static) — base .win8-titlebar(position:absolute; top:0)를 그대로 두면 .trans-teach가
   position:relative가 아니라 절대배치 바가 nearest positioned ancestor(#app)로 탈출→앱 헤더에 박혀 클리핑
   (Hana 실기 2026-07-18: 헤아림 결과 화면 터미널탭이 타이틀 영역에 박힘). writing-view/community/dict 동일 패턴. */
.trans-teach .win8-titlebar { position: static; height: auto; padding: 6px 10px; z-index: auto; cursor: pointer; }   /* ★2026-07-23 규격화: 바 전체 클릭=토글(FavTerm 거동) */
.h2-teach-bar { display: flex; align-items: center; gap: 6px; }
.h2-teach-acts { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.h2-teach-copy { background: none; border: none; color: var(--text); cursor: pointer; font-size: 15px; padding: 0 4px; line-height: 1; }
.trans-teach .tb-chev { margin-left: 0; }   /* acts가 우측 정렬 담당 → 자체 auto 불필요 */
.h2-teach-body { padding: 9px 12px; }
.h2-teach-head { color: var(--text-dim); font-size: 11px; margin-bottom: 5px; }
.h2-teach-text { white-space: pre-wrap; font-size: 14px; line-height: 1.55; color: var(--text); }
.h2-teach-collapsed .h2-teach-body { display: none; }
.trans-teach.h2-teach-collapsed .win8-titlebar { border-bottom: none; }   /* 접힘=뭉뚝 방지 */
/* ★8c/9a 추론 터미널 탭(개발용·최하단·기본 접힘) — teach 탭 규격 재사용 컨테이너 */
.trans-relay { margin-top: 6px; }
.trans-relay .trans-relay-tab { margin: 6px 0; }
/* ★9a 작문 추론 탭 = writing 터미널 정규격(writing-orig 접힘 관례 미러·2026-07-23 규격화) */
.writing-relay-tab { margin-top: 8px; }
.writing-relay-tab .win8-titlebar { cursor: pointer; }
.writing-relay-tab.collapsed .writing-relay-body { display: none; }
/* ★2026-07-23 규격화: 접힘 chevron = FavTerm SVG(.tb-chev·회전은 상단 통일 블록) — 구 ▾/▸ ::after 폐기 */
.writing-relay-body { padding: 10px 12px; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; color: var(--text); }
/* ★9b 장르 추정 확인 카피(스텝 카드) */
.w-intent-guess { display: flex; align-items: center; gap: 6px; font-size: .85em; color: var(--accent); margin: 4px 0 2px; }
/* ★W1(2026-07-23): 헤아림 관람 분리 — 진행상황 = 터미널 바깥 스트립 / 오버레이 = 질문 카드만 */
.h2-progress { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 6px 2px; }
.h2-progress .h2-checklist:empty { display: none; }
.h2-prog-cat { display: flex; align-items: center; gap: 8px; height: auto; }
#trans-busy.h2-clear { background: transparent; pointer-events: none; align-items: center; justify-content: center; }
#trans-busy.h2-clear .h2-stage-q { pointer-events: auto; margin: auto; background: var(--surface); border: 2px solid var(--border-hi); box-shadow: 0 0 18px rgba(0,0,0,.45); }
/* ★W2(2026-07-23): 글자 단위 wave 연출 — 빨간 음영 소거 → 녹색 음영 타이핑 */
.tr-wave-old { background: rgba(239,68,68,.28); border-radius: 3px; }
.tr-wave-new { background: rgba(134,239,172,.22); border-radius: 3px; }
.tr-wave-caret { display: inline-block; width: 9px; height: 1em; background: var(--accent); vertical-align: -2px; box-shadow: 0 0 8px rgba(245,169,122,.7); animation: blink 1s steps(1) infinite; }
/* ★8b 강화: 스테이지 연출 판정자 배지(🌊 너울 / ✨ 맵시) — 결과창 위 칩 */
.h2-anim-badge { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 6px; padding: 3px 10px;
  border: 1px solid var(--border); border-radius: 12px; font-size: .82em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); animation: styleNewIn .3s ease;
  flex-shrink: 0; align-self: flex-start; }   /* ★2026-07-24: 터미널 바깥(pane flex column 직속) 이동 — stretch/압착 방지 */