/* 개인 블로그 — 미래에셋증권 홈페이지 디자인 언어를 따른 스타일
   흰 배경 · 상단 가로 메뉴 · 주황 포인트 · 넉넉한 여백 · 라운드 카드 */

:root {
  /* 기기가 다크 모드여도 항상 흰 화면으로 — 누구 폰에서나 같게 보이고,
     리포트 HTML(흰 배경)과 톤이 맞아야 하기 때문이다.
     어두운 화면 규칙은 static/dark-theme.css.disabled 에 보관해 뒀다. */
  color-scheme: light;

  /* 브랜드 */
  --brand: #f26f21;          /* 포인트 컬러 (면·테두리·장식) */
  --brand-ink: #c75300;      /* 흰 바탕 위 «주황 글자» (4.50:1) */
  /* 흰 글자를 «얹는» 자리의 주황. 밝은 --brand 위 흰 글자는 2.97:1 이라
     기준(4.5)에 못 미쳤다 — 분석요청 단추·NEW 딱지가 전부 그랬다.
     이 값은 4.90:1 이다. 글자가 안 얹히는 밑줄·아이콘은 --brand 그대로 쓴다.
     (2026-09-05 지점장 지시로 색 전반을 손보며 넣었다.) */
  --brand-solid: #bd4f00;    /* 주황 «바탕» + 흰 글자 (4.90:1) */
  --brand-tint: #fff3ea;     /* 아주 옅은 주황 배경 */
  --navy: #16283c;           /* 짙은 남색 — 제목 */

  /* 중립 */
  --bg: #ffffff;
  --bg-alt: #faf7f3;
  --surface: #ffffff;
  --border: #e7e1d8;
  --border-strong: #d9d1c7;
  --text: #1f1c19;
  --text-mid: #57504a;
  --text-dim: #78706a;
  --danger: #c0392b;

  --shadow: 0 1px 2px rgba(60, 42, 22, .05);
  --shadow-lift: 0 6px 24px rgba(60, 42, 22, .11);
  --radius: 16px;
  --wrap: 1160px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont,
    "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- 상단바 ---------- */

/* 2026-09-08 지점장 지시로 고정(스크롤에도 안 보이지 않는 것) 범위를 좁혔다 —
   «메뉴는 그대로 유지하는데, 스크롤시 내가 체크한 라인(이용줄)만 상단에 고정».
   그전에는 .topbar 전체(이용줄+로고/메뉴줄)가 position:sticky 였다. 이제는
   .utility 만 sticky이고, .topbar(로고+메뉴줄)는 relative로 내려 스크롤을
   따라 함께 흘러간다 — megamenu(top:100%)가 여전히 .topbar 를 기준으로
   붙어야 하므로 position 은 남겨 둔다(그냥 static 이면 megamenu 가 어긋난다).
   .utility 는 .topbar 밖, .page 의 바로 아래 자식으로 옮겼다(server.py) —
   sticky 의 «고정 범위(containing block)»는 부모 상자 높이만큼인데, .topbar
   안에 있으면 그 상자가 겨우 100px 안팎이라 스크롤 몇 픽셀 만에 풀려 버린다.
   .page(문서 전체 높이) 의 자식이어야 페이지 끝까지 붙어 있는다. */
.topbar {
  position: relative;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* 공유 글(로그인 없이 보는 화면)에는 이용줄이 없다 — 한 줄짜리 로고 헤더뿐이라
   2026-09-08 변경의 영향(두 줄로 늘어나는 모바일 이용줄+메뉴줄)을 받지 않는다.
   그대로 예전처럼 전체가 붙어 있게 둔다. */
.topbar-share { position: sticky; top: 0; z-index: 50; }

/* 윗줄 — 작은 이용 링크 (미래에셋 상단 유틸리티 영역과 같은 역할) */
.utility {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.utility-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  height: 38px;
  font-size: 13px;
}

.utility-inner a { color: var(--text-dim); white-space: nowrap; }
.utility-inner a:hover { color: var(--brand-ink); }
.utility-inner a.strong { color: var(--brand-ink); font-weight: 700; }

/* 뒤로 가기 — 이용줄 맨 앞, 종(알림) 바로 왼쪽에 서는 알약 (2026-08-22 지점장 요청).

   남색 바탕에 흰 볼드 글씨로(2026-09-02 지점장 지시) — 옅은 주황 바탕은
   눈에 덜 띈다는 이유였다. */
.utility-inner a.back-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px 3px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  letter-spacing: -.03em;
}

/* 왼쪽 화살표 — 꼬리(가로획)를 붙인 «←» 다. 홑꺾쇠(«‹»)만으로는 무엇을
   가리키는지 약해서 2026-08-22 지점장 지시로 꼬리를 붙였다.
   글자색을 따라갑니다 */
.utility-inner a.back-pill::before {
  content: "";
  width: 13px; height: 13px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 4.5 12 11 19'/%3E%3Cpath d='M5 12h14.5'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 4.5 12 11 19'/%3E%3Cpath d='M5 12h14.5'/%3E%3C/svg%3E");
}

.utility-inner a.back-pill:hover { background: var(--brand-solid); color: #fff; }

/* 바깥 도구 바로가기 (텔레그램·지메일) */
.utility-inner a.tool-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-mid);
  font-weight: 600;
}

.utility-inner a.tool-link::before {
  content: "↗";
  font-size: 10px;
  opacity: .55;
}

.utility-inner a.tool-link:hover { color: var(--brand-ink); }
.utility-inner a.tool-link:hover::before { opacity: 1; }

/* 관리자만 보는 게시판 (Owner Only 등) */
.utility-inner a.owner-link {
  color: var(--navy);
  font-weight: 700;
  padding: 3px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

.utility-inner a.owner-link:hover { border-color: var(--brand); color: var(--brand-ink); }
.utility-inner a.owner-link.active { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-ink); }

.utility-inner a.alertlink {
  color: var(--brand-ink);
  font-weight: 700;
  background: var(--brand-tint);
  border: 1px solid var(--brand);
  border-radius: 999px;
  padding: 3px 12px;
}

.utility-inner a.alertlink:hover { background: var(--brand-solid); color: #fff; }

/* 앱 공유하기 — 홈 주소를 폰 공유창으로 넘깁니다.
   글자는 화면에서 뺐다(2026-08-26 지점장 지시) — 아이콘만 남긴다.
   JS(APP_SHARE_JS)가 클릭 뒤 «복사했습니다»로 textContent 를 잠깐 바꾸는데,
   그 글자도 같이 font-size:0 이라 안 보인다 — 화면엔 늘 아이콘만 있다.
   완전히 지우지 않고 font-size 로만 줄인 건 스크린리더가 여전히 읽게 하기 위함이다. */
.utility-inner a.app-share {
  display: inline-flex;
  align-items: center;
  color: var(--text-mid);
  font-weight: 600;
  font-size: 0;
  cursor: pointer;
}

.utility-inner a.app-share::before {
  content: "↑";
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px 3px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: .55;
}

.utility-inner a.app-share:hover { color: var(--brand-ink); }
.utility-inner a.app-share:hover::before { opacity: 1; }

/* 네이버 주요뉴스 — 네이버 로고 그대로 «녹색 원 + 흰 N».
   원이 살려면 단추 바탕은 흰색이어야 합니다(녹색 바탕이면 원이 묻힙니다).
   글자색은 #03c75a 가 흰 바탕에서 대비 2.3:1 로 모자라 진한 녹색을 씁니다. */
.utility-inner a.naver-news {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px 3px 5px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #cdebd8;
  color: #03823c;
  font-weight: 700;
  letter-spacing: -.03em;
}

/* 2026-09-12 지점장 지시 — 초록 «N» 배지를 뺐다. 글자 «뉴스»만 남긴다.
   배지가 빠진 만큼 왼쪽 안쪽 여백을 오른쪽과 같게 맞춘다. */
.utility-inner a.naver-news { padding-left: 12px; }

.utility-inner a.naver-news:hover {
  background: #f2fbf6;
  border-color: #03c75a;
  color: #03823c;
}

/* 관리자만 보는 바깥 앱 알약 (지메일·텔레그램) — 주요뉴스 알약과 같은 틀입니다.
   바탕을 흰색으로 두어야 앞의 색 동그라미가 살아납니다.
   글자색은 각 브랜드색을 그대로 쓰면 흰 바탕에서 대비가 모자라 어두운 쪽을 씁니다
   (지메일 #ea4335 → #c5221f, 텔레그램 #229ed9 → #0f6d94). */
/* 글자(«지메일»·«텔레그램»)는 화면에서 뺐다(2026-08-26 지점장 지시) — 아이콘 원만 남긴다.
   완전히 지우지 않고 font-size 로만 줄인 건 스크린리더가 여전히 읽게 하기 위함이다. */
.utility-inner a.tool-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 999px;
  background: #fff;
  font-weight: 700;
  font-size: 0;
  letter-spacing: -.03em;
}

.utility-inner a.tool-pill::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 10.5px;
  line-height: 1;
}

.utility-inner a.tool-pill.gmail {
  border: 1px solid #f3d2ce;
  color: #c5221f;
}

.utility-inner a.tool-pill.gmail::before { content: "M"; background: #ea4335; }

.utility-inner a.tool-pill.gmail:hover {
  background: #fdf4f3;
  border-color: #ea4335;
  color: #c5221f;
}

/* 2026-09-08 낮에 분석요청 알약을 이용줄로 옮기며 이 자리에 크기·색
   override(.utility-inner a.ask-cta)를 뒀었다 — 같은 날 «원래대로
   손대기 전 어저께 버전으로» 되돌리라는 지시로 알약을 topbar-inner로
   다시 옮기면서(server.py ask_cta) 이 override는 필요 없어져 지웠다. */

.utility-inner a.tool-pill.telegram {
  border: 1px solid #cbe6f5;
  color: #0f6d94;
}

/* 텔레그램 표는 종이비행기입니다. 이모지(✈)를 쓰면 기기마다 색 든 비행기로 나와
   동그라미와 따로 놀아서, 흰색 종이비행기를 SVG 로 그려 넣습니다. */
.utility-inner a.tool-pill.telegram::before {
  content: "";
  background: #229ed9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M21.8 4.2 2.9 11.5c-.9.3-.9 1.5.1 1.8l4.7 1.5 1.8 5.4c.2.7 1.1.9 1.6.3l2.5-2.7 4.7 3.5c.6.4 1.4.1 1.6-.6l3-14.9c.2-.8-.6-1.5-1.4-1.2z'/%3E%3C/svg%3E") center/11px 11px no-repeat;
}

.utility-inner a.tool-pill.telegram:hover {
  background: #f2fafd;
  border-color: #229ed9;
  color: #0f6d94;
}

/* 텔레그램·지메일 단추 — 2026-08-26 지점장 지시로 두 알약을 하나로 합쳤다.
   원 하나를 반으로 갈라 왼쪽은 텔레그램 파랑, 오른쪽은 지메일 빨강을 담는다.
   ::before 는 안 쓴다 — 반씩 다른 배경을 담을 자리가 두 곳(.half) 필요하다. */
.utility-inner a.tool-pill.dual {
  position: relative;
  border: 1px solid var(--border-strong, #d8d5cd);
  color: var(--text-dim);
}

/* 마지막으로 이 단추를 눌러 본 뒤 새로 온 텔레그램·지메일 요약이 있다는 표시.
   dual-icon 은 overflow:hidden 인 원이라 점을 그 안에 두면 잘린다 — 아이콘
   오른쪽 위 모서리에 걸치도록 단추 자체에 붙인다(2026-08-26 지점장 지시). */
.utility-inner a.tool-pill.dual .dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
  border: 1.5px solid #fff;
}

.utility-inner a.tool-pill.dual:hover {
  border-color: #229ed9;
  color: var(--text);
}

.utility-inner a.tool-pill.dual .dual-icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

.utility-inner a.tool-pill.dual .half {
  width: 50%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.utility-inner a.tool-pill.dual .half.tg {
  background: #229ed9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M21.8 4.2 2.9 11.5c-.9.3-.9 1.5.1 1.8l4.7 1.5 1.8 5.4c.2.7 1.1.9 1.6.3l2.5-2.7 4.7 3.5c.6.4 1.4.1 1.6-.6l3-14.9c.2-.8-.6-1.5-1.4-1.2z'/%3E%3C/svg%3E") left 2px center/9px 9px no-repeat;
}

.utility-inner a.tool-pill.dual .half.gm {
  background: #ea4335;
  color: #fff;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 8.5px;
  line-height: 1;
}

/* 관리자 메뉴 — 회원 관리·게시판 설정을 접어 둡니다.
   <details> 라서 자바스크립트가 없어도 눌러서 펼쳐집니다. */
.utility-inner details.admin-menu { position: relative; }

.utility-inner details.admin-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
}

/* 사파리·크롬의 기본 삼각형을 지웁니다 */
.utility-inner details.admin-menu > summary::-webkit-details-marker { display: none; }
.utility-inner details.admin-menu > summary::marker { content: ""; }

.utility-inner details.admin-menu > summary::after {
  content: "▾";
  font-size: 9px;
  opacity: .55;
}

.utility-inner details.admin-menu[open] > summary::after { opacity: 1; }
.utility-inner details.admin-menu > summary:hover { color: var(--brand-ink); }

.admin-pop {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 60;
  min-width: 152px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
}

.admin-pop a {
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--text-mid);
  font-weight: 600;
  white-space: nowrap;
}

.admin-pop a:hover { background: var(--bg-alt); color: var(--brand-ink); }
/* 글쓰기는 «관리» 항목과 성격이 달라 실선 하나로 갈라 둡니다. */
.admin-pop a.strong { margin-bottom: 5px; padding-bottom: 9px;
  border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; }

/* 자매앱 메뉴 — 위 admin-menu 만듦새를 그대로 쓰되, 글자 없이 점 9개
   아이콘만 넣은 동그란 단추입니다(2026-09-07 지점장 지시). */
.utility-inner details.admin-menu.apps-menu > summary {
  width: 26px;
  height: 26px;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.utility-inner details.admin-menu.apps-menu > summary::after { content: none; }
.utility-inner details.admin-menu.apps-menu > summary:hover { border-color: var(--brand); }
.chat-head-act details.apps-menu { position: relative; }
.chat-head-act details.apps-menu > summary {
  list-style: none; cursor: pointer; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--border-strong);
  border-radius: 999px; color: var(--brand-ink); background: var(--surface);
}
.chat-head-act details.apps-menu > summary::-webkit-details-marker { display: none; }
.chat-head-act details.apps-menu > summary::marker { content: ""; }
.chat-head-act details.apps-menu .admin-pop { top: calc(100% + 7px); right: 0; }
/* 아랫줄 — 로고 + 큰 게시판 메뉴 */
.topbar-inner {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 3vw, 48px);
  height: 78px;
}

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-logo-image {
  display: block;
  width: 208px;
  height: 64px;
  object-fit: contain;
  object-position: left center;
  border-radius: 8px;
}
.artifact-brand-logo {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 18px;
}
.artifact-brand-logo img {
  display: block;
  width: min(280px, 55vw);
  height: auto;
}
.topbar-actions { display: none; }

@media (max-width: 560px) {
  .brand-logo-image { width: 152px; height: 54px; }
}

/* 로고 자리의 굵은 주황 M — 미래에셋 M-STOCK 앱 아이콘의 M을 참고해 우리 색(#f26f21)
   으로 새로 그렸다(2026-09-10 지점장 지시). **같은 날 지점장이 실제 M-STOCK 아이콘
   사진을 보내며 "그대로 따오라"고 하셔서 끝 모양을 고쳤다** — 사진을 보면 봉우리는
   뾰족하고(miter join) 다리 끝은 잘린 듯 평평하다(butt cap). 처음엔 옛 두 막대
   도형의 «알약»(round cap/join) 정체성을 이었었는데, 실물과 달라 뺐다. 글자체
   파일 없이 stroke 하나로 그리는 것은 그대로다. SVG 를 배경으로 깔았기 때문에
   width/height 만 바꾸면 비율 그대로 줄고 는다.

   **같은 날 지점장이 "왜케 반듯하게 만들었니? 오른쪽으로 살짝 기울었는데,,,
   그냥 그대로 따오라고"라고 다시 지적해 좌표를 고쳤다** — 실물 M-STOCK 로고는
   이탤릭처럼 오른쪽으로 약 13도 기운 모양이다. make_icon.py 의 M_POINTS 와
   같은 shear(층밀림) 계산 결과를 100배해 옮겨 적은 값이다. */
.brand-mark {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  /* 2026-09-25 — 브랜드가 Market Nexus 로 바뀌면서 심벌도 갈았다. 전에는 회사
     MTS(M-STOCK) 로고를 따온 「M」 자였는데, 회사 MTS 이름이 Maps 로 바뀌며
     이름이 겹친 것이 이번 교체의 발단이라 그 심벌을 그대로 둘 수 없었다.
     지금은 Market Nexus 로고 왼쪽의 주황 막대 셋을 그대로 잘라 쓴다. */
  background: url("/static/brand/market-nexus-mark.png") no-repeat center / contain;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text b { font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: -.03em; }
/* 「월간」은 가늘게, 이름은 굵게 — 한 덩어리 안에서 강약을 준다 */
.brand-text b .thin { font-weight: 400; color: #41566e; }
.brand-text em { font-style: normal; font-size: 11.5px; color: var(--text-dim); }

/* MA GNB — MDB와 같은 정돈된 비율, 활성색만 MA 주황으로 구분합니다. */
.gnb {
  display: flex;
  align-items: stretch;
  /* flex-start 여야 합니다. flex-end 로 두면 넘치는 항목이 화면 왼쪽 밖으로
     밀려나 스크롤로도 닿을 수 없게 됩니다 (게시판이 늘면 바로 드러납니다) */
  justify-content: flex-start;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.gnb::-webkit-scrollbar { display: none; }

.gnb-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
  white-space: nowrap;
  transition: color .15s;
}

.gnb-item:hover { color: var(--brand-ink); }

/* 소홧처럼 메뉴 글자 옆에 바로 붙는 빨간 점 — claude-pill 의 점과 달리
   모서리에 얹지 않고 gnb-item 의 gap 을 그대로 씁니다. */
.gnb-item .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5484d;
  flex: none;
}

.gnb-item.active { color: var(--navy); }

.gnb-item.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand);
}

/* «종목분석요청» — 메뉴가 아니라 «행동» 이라 알약 단추로 두되, 자리는
   게시판 메뉴줄 옆(topbar-inner, nav 뒤 {ask_cta} 슬롯)입니다.
   2026-09-08 낮에 이용줄(.utility-inner) 맨 왼쪽으로 옮기고 크기·글자를
   줄였다가, 같은 날 «원래대로 손대기 전 어저께 버전으로» 되돌리라는
   지시로 자리·모양 다 원래대로 되돌렸다. */
.ask-cta {
  flex: 0 0 auto;
  align-self: center;
  margin-top: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  /* 2026-09-22 지점장 「분석요청 컬러를 종목검색에 맞추고」 — 종목검색이 쓰던
     var(--brand) 로 통일합니다(전에는 --brand-solid 로 둘이 조금 달랐습니다). */
  background: var(--brand);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.03em;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(242, 111, 33, .28);
  transition: background .15s, box-shadow .15s;
}

/* 돋보기는 2026-09-22 지점장 지시로 뺐습니다 —「분석요청, 종목분석에 돋보기 제거해줘」.
   두 알약(분석요청·종목검색)이 같은 규칙을 쓰므로 한 곳만 지우면 둘 다 없어집니다. */
.ask-cta:hover { background: var(--brand-ink); box-shadow: 0 3px 14px rgba(199, 83, 0, .32); }
.ask-cta.active { background: var(--brand-ink); }

/* Codex 투자판 — 분석요청 바로 왼쪽. 둘을 한 묶음으로 두어 메뉴 폭이
   달라져도 순서와 간격이 흐트러지지 않는다(2026-09-11 지점장 지시). */
.topbar-ctas {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 8px;
}

.codex-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid #9eb2cc;
  border-radius: 999px;
  background: #f4f7fb;
  color: var(--navy);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -.02em;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}

.codex-cta:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

/* «오너» 알약 — 텔레그램·지메일로 갑니다. 생김새는 Codex 와 같은 한 벌을
   쓰고(.codex-cta), 안 본 것이 있을 때만 점이 하나 붙습니다
   (2026-09-12 지점장 지시 — «코덱스 알약이랑 같은 느낌으로»). */
.owner-cta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #f26f21; margin-left: 6px; flex: none;
}
.owner-cta:hover .dot { background: #fff; }

/* 새로고침 — 분석요청 알약(.ask-cta) 왼쪽(topbar-inner, {ask_cta} 슬롯
   안). 앱으로 설치하면 주소창이 없어 새로고침할 길이 없다(2026-09-09
   지점장 지시). 눌린 페이지를 그대로 다시 부른다. */
.refresh-pill {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  padding: 0;
  border: 1px solid var(--border-strong, #d8d5cd);
  border-radius: 999px;
  background: none;
  color: var(--text-mid);
  transition: border-color .15s, color .15s;
}
.refresh-pill:hover { border-color: var(--brand, #f26f21); color: var(--brand-ink, #c75300); }
.refresh-pill-icon {
  width: 17px; height: 17px;
  flex: 0 0 auto;
  background: currentColor;
  /* 새로고침 화살표 — 아이콘 파일 없이 마스크로 그립니다(ask-cta 돋보기와 같은 방식) */
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E");
}

/* 메뉴얼·오락실 알약 — 회원 전체의 상단고정막대에 서는 글자알약 둘이다
   (2026-09-11 지점장 지시 — «메뉴얼을 글자알약으로, 오락실 알약 설치»).
   메뉴얼은 2026-08-26 지점장 지시로 첫 화면 큰 카드에서 옮겨 왔고, 글자만
   («메뉴얼», 2026-09-04) → 아이콘만(2026-09-08) → 다시 글자알약(2026-09-11)
   으로 돌아왔다. 오락실은 이번에 같은 틀로 새로 단다 — 둘 다 정사각 아이콘
   단추가 아니라 글자 폭만큼 늘어나는 «조용한»(ghost) 알약이다. */
.manual-pill, .arcade-pill {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong, #d8d5cd);
  color: var(--text-mid);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.manual-pill:hover, .arcade-pill:hover { border-color: var(--brand, #f26f21); color: var(--brand-ink, #c75300); }

/* 2026-08-31 지점장 지시로 이용줄(주요뉴스 오른쪽)로 옮겨 왔다. 그 줄은 키가
   26px 이라 원래 크기(38px)면 줄을 꽉 채워 답답하다 — 이웃 알약과 키를 맞춘다.
   아래 좁은 화면 규칙의 margin-left:auto·order 는 아랫줄에 서 있을 때를 위한
   값이라 여기서 되돌린다(선택자가 더 자세해서 미디어쿼리보다 이긴다). */
.utility-inner a.manual-pill, .utility-inner a.arcade-pill {
  height: 26px;
  padding: 0 10px;
  margin-left: 0;
  order: 0;
  font-size: 12px;
}

/* 전송 뒤에 뜨는 안내 판 — 자바스크립트 없이 화면을 덮습니다 */
.modal-back {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(22, 40, 60, .48);
}

.modal-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(22, 40, 60, .3);
  padding: 28px 26px 24px;
  text-align: center;
}

.modal-title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.03em;
}

.modal-text {
  margin: 12px 0 22px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--text-mid);
}

/* 요청 화면 — 내가 넣어 둔 종목 */
.ask-mine { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border); }
.ask-mine h2 { margin: 0 0 12px; font-size: 15px; color: var(--text-mid); }
.ask-mine ul { list-style: none; margin: 0; padding: 0; }

.ask-mine li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}

.ask-mine li b { color: var(--navy); }
.ask-mine li span { margin-left: auto; font-size: 12.5px; color: var(--text-dim); }

/* 관리자 화면에만 나오는 신청자·메모 */
.ask-who {
  font-style: normal;
  font-size: 12.5px;
  color: var(--text-mid);
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-alt);
}

.ask-memo {
  width: 100%;
  margin-top: -4px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.ask-state {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-ink);
}

.ask-state.done { background: var(--bg-alt); color: var(--text-dim); }

.form label i.opt { font-style: normal; font-weight: 400; color: var(--text-dim); }

.lock {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.topbar-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* ---------- 히어로 ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--brand-tint) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  /* 2026-09-04 지점장 지시로 60/56 에서 절반으로 줄였다 — «신조와 지수배너
     상하단 공간을 좀만 줄여보자, 공간 확보». 안쪽(신조 줄 간격·지수 타일)은
     이미 빡빡해서 건드릴 것이 없었고, 남는 것은 이 띠의 위아래뿐이었다. */
  /* 2026-09-05 지점장 지시로 위아래를 차례로 절반씩 줄였다 —
     위 60 → 30 → 15, 아래 56 → 26 → 13. 화면에서 보이는 «띠와
     검색칸 사이 틈»은 이 값 + .main 의 padding-top 이 합쳐진 것이다. */
  padding: 15px 0 13px;
}

/* 옅은 격자 — 시세판 느낌의 배경 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .45;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 85%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.hero-copy { flex: 1 1 auto; min-width: 0; }

/* 제목·태그라인 줄. 설명서 카드는 2026-08-26에 상단 «사용설명서» 알약으로
   옮겼다(manual-pill, topbar-inner 참고) — 이 블록엔 더 이상 aside가 없다. */
.hero-head { display: flex; align-items: flex-start; gap: 32px; }
.hero-head-main { flex: 1 1 auto; min-width: 0; }

.hero-eyebrow {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: .02em;
}

.hero-title {
  margin: 0;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.25;
  color: var(--navy);
}

/* So what? 처럼 제목 옆에 알약 하나가 붙을 때만 씁니다 — title_tab 이 없으면
   h1 혼자라 이 줄이 생기지 않습니다(hero_block 참고). */
.hero-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-desc {
  margin: 14px 0 0;
  font-size: 16px;
  color: var(--text-mid);
  max-width: 46ch;
}

/* 원칙 · 책임 · 투명 */
.creed {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-width: 62ch;
}

/* 홈 화면(hero_block show_head=False)은 위에 신조를 가를 제목이 없어
   .creed 가 .hero-copy 의 첫(유일한) 자식으로 온다 — 그럴 땐 위 여백·
   구분선이 허공에 뜬 줄로만 보이고, PRINCIPLE 첫 줄이 지수 배너
   첫 줄(코스피)보다 그만큼 아래에서 시작해 어긋난다(2026-08-31 지점장
   지시 — «프린시플 윗라인이랑도 맞추자»). .hero-head 뒤에 오는 다른
   화면(landing 등)에서는 .creed 가 첫 자식이 아니라 이 규칙이 안 먹는다.
   선택자 자체가 더 구체적이라 미디어쿼리 순서와 무관하게 항상 이긴다. */
.hero-copy > .creed:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.creed-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.creed-key {
  /* 이름표가 영문이라 길이가 제각각이다(PRINCIPLE / RESPONSIBILITY / AGENTIC AI).
     너비를 고정해야 오른쪽 본문의 시작 줄이 들쭉날쭉하지 않는다. */
  flex: 0 0 auto;
  min-width: 138px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--brand-ink);
  position: relative;
  padding-left: 13px;
}

.creed-key::before {
  content: "";
  position: absolute;
  left: 0;
  top: .32em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

.creed-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-mid);
  letter-spacing: -.01em;
}

/* 문장 안에서 도드라뜨릴 대목. «원칙·책임·투명» 딱지와 같은 굵기로,
   색은 제목에 쓰는 짙은 남색입니다 (2026-08-18 지점장 요청). */
.creed-strong {
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0;
}

/* 굵은 대목이 그 자체로 완결된 문장인 항목(=«원칙»)만 새 줄에서 시작합니다.
   폰에서 «투자원칙을 바로 / 세우겠습니다.» 로 갈라져 한 문장이 두 동강 나
   보였습니다. <br> 을 손으로 넣지 않고 블록으로 두는 것은, 화면 폭이 어떻든
   항상 새 줄에서 시작하기 때문입니다. white-space:nowrap 은 쓰지 않습니다 —
   더 좁은 화면에서 가로로 넘칩니다. */
.creed-newline .creed-strong {
  display: block;
  margin-top: 2px;
}

/* 코스피·코스닥·니케이·상해종합 — 히어로 카드 오른쪽, 제목·신조 옆의 빈
   세로 자리(2026-08-28 지점장 지시 — 화면에서 직접 짚어 주신 자리다).
   .hero-copy 와 나란히 서는 형제 열이라 휴대폰에서도 아래로 안 밀리고
   같은 자리를 지킨다(hero-inner 참고). 너비를 고정하지 않는다 —
   고정폭(118px)을 주면 가장 짧은 숫자(코스닥) 옆에 빈 칸이 남는다.
   폭을 안 주면 가장 긴 줄(니케이 66,682.88)에 맞춰 자동으로 좁혀지고,
   마지막 flex 자식이라 오른쪽 끝에 그대로 붙는다(2026-08-28 지점장
   지시 — «좌우 공간 남기지 말고 줄여서 오른쪽 끝으로»). 누르면
   네이버증권(m.stock.naver.com)으로 이동하므로 통째로 <a> 다.

   2026-08-31 — S&P500선물·원달러가 붙어 3×2(여섯 칸)로 늘면서, 좁은
   화면에서는 글 옆에 나란히 둘 자리가 안 나온다. hero-inner 의
   flex-wrap 덕에 이때는 통째로 다음 줄로 내려간다. margin-left:auto 는
   그 두 경우 모두에서 오른쪽 끝에 붙게 한다 — 글 옆(같은 줄)일 땐
   hero-copy 가 이미 남는 공간을 채우니 효과가 없고, 혼자 다음 줄로
   내려갔을 땐 이게 있어야 왼쪽에 붙지 않고 지점장이 정한 자리(오른쪽
   끝)를 지킨다. */
.market-idx-col {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 「게시판 맵」 단추 — 2026-09-17 지점장 지시로 홈의 «내 게시판» 칸
   아래에 있던 것을 지수 배너 바로 위(이 자리)로 옮겼다. 색은
   «연한 주황색»(brand-tint) — 짙은 남색이던 예전 자리(.hb-all-btn)와
   달리 지수 배너 위에서 튀지 않게 옅은 색으로 둔다. */
.hero-boardmap-btn {
  align-self: stretch;
  padding: 8px 12px;
  border: 1px solid var(--brand);
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.hero-boardmap-btn::after { content: " ▾"; }
.hero-boardmap-btn:active { background: #ffe6d1; }

.market-idx {
  /* 1×4 세로 나열 대신 그리드로 묶는다(2026-08-31 지점장 지시) — 네
     지수를 한 줄씩 내리 쌓으면 왼쪽 신조(PRINCIPLE·RESPONSIBILITY·
     AGENTIC AI) 세 줄보다 세로로 훌쩍 길어져 균형이 안 맞았다.
     S&P500선물·원달러를 더해 여섯 개가 되면서 2×3 으로 늘렸다
     (2026-08-31 지점장 지시 — 처음엔 3×2 였다가 그 자리에서 2×3 으로
     다시 바꿨다). */
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 6px 10px;
  text-decoration: none;
}

/* 신조를 뺀 뒤(2026-09-05 지점장 «아예 제거하고 배너를 확충하자») 홈 화면
   히어로에는 지수 배너만 남는다. 왼쪽에 글이 없으니 오른쪽 끝에 웅크릴
   까닭도 없어, 여섯 지수를 한 줄로 펴고 히어로 폭을 다 쓰게 한다.
   :only-child 로 걸어 두면 «신조가 사라진 홈»에만 적용되고, 글이 함께
   서는 다른 화면은 예전 배치(오른쪽 끝 2열)를 그대로 지킨다. */
.hero-inner.has-market > .market-idx-col:only-child {
  flex: 1 1 auto;
  margin-left: 0;
}

/* 12칸을 4줄×3칸으로 세운다. 4행은 CNN F&G·VIX·하이일드 스프레드. */
.hero-inner.has-market > .market-idx-col:only-child .market-idx {
  grid-template-columns: repeat(3, 1fr);
  /* 줄 사이만 벌린다 — 칸 사이(가로)는 8px 그대로다
     (2026-09-05 지점장 «너무 빡빡, 상하로 조금만 늘리고 여유를 주자»).
     아홉 칸이 3줄로 붙어 서면 숫자 덩어리가 한 판으로 뭉쳐 보인다. */
  gap: 12px 8px;
}

.market-idx-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  /* 위아래를 6px → 9px 로. 가로(9px)는 건드리지 않는다 — 지점장이 「상하로」
     라고 짚으셨고, 칸 폭은 이미 네 칸이 화면을 꽉 채워 늘릴 자리가 없다. */
  padding: 9px;
  min-height: 77px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  transition: border-color .15s ease;
  /* 2026-09-09 — 칸 하나하나가 야후 파이낸스로 가는 링크가 됐다.
     링크 기본 꾸밈(밑줄·파란 글씨)을 지워 보이는 모습은 그대로 둔다. */
  text-decoration: none;
  color: inherit;
}

/* 전에는 배너 전체가 링크라 «어디를 눌러도 같은 곳»이었고, 그래서 하나를
   짚으면 아홉 칸이 다 밝아졌다. 이제는 칸마다 가는 데가 다르므로
   **짚은 칸만** 밝힌다 — 어디로 갈지가 손끝에서 보여야 한다. */
.market-idx-item:hover,
.market-idx-item:focus-visible { border-color: var(--border-strong); }

/* 본문(line-height:1.7)을 그대로 물려받으면 글자 크기는 작아도 줄 자체가
   훌쩍 벌어져 왼쪽 신조 블록보다 카드가 밑으로 처진다 — 글씨 크기는
   그대로 두고 줄간격만 좁혀 왼쪽(지점장~AGENTIC AI) 끝단에 맞춘다
   (2026-08-28 지점장 지시). */
.market-idx-name {
  /* 12칸→9칸으로 줄며 생긴 자리만큼 키운다(2026-09-08 지점장 지시). */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dim);
}

.market-idx-value {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--navy);
  letter-spacing: -.02em;
}

.market-idx-change { font-size: 12px; font-weight: 700; line-height: 1.2; }
/* 상승 빨강 · 하락 파랑 — 사이트 전체 관행과 같다(_brand/theme.css --up/--dn). */
.market-idx-change.up { color: #d02a2a; }
.market-idx-change.down { color: #1560c4; }
.market-idx-change.flat { color: var(--text-dim); }

.market-idx-meta {
  margin: 0;
  /* 2026-09-05 지점장 «잘 안 보여» — 10px 에 옅은 회색(--text-dim var(--text-dim))이라
     읽히지 않았다. 본문 색(var(--text))으로 올리고 굵기도 한 단계 준다.
     2026-09-08 지점장 지시로 글자 크기도 12px 로 키웠다 — 배너가 그 사이
     3x3(9칸)으로 줄며 옆이 아니라 아래에 자리를 잡아, 커져도 지수 타일을
     누르지 않는다. */
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
  font-weight: 600;
  /* 2026-09-05 지점장 지시 — 오른쪽 끝에 붙어 두 줄로 접히던 것을 왼쪽으로
     옮기고 한 줄로 편다. 시각은 «배너 클릭» 바로 오른쪽 괄호에 들어간다. */
  text-align: left;
  /* 2026-09-30 지점장 지시 — 우측 끝에 새로고침 단추를 더한다. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.market-idx-refresh {
  flex: none;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  padding: 3px 5px;
  cursor: pointer;
  border-radius: 6px;
}
.market-idx-refresh:hover,
.market-idx-refresh:focus-visible { color: var(--text); background: var(--bg); }
.market-idx-refresh:disabled { opacity: .55; cursor: default; }
.market-idx-refresh.is-loading { animation: market-idx-spin .8s linear infinite; }
@keyframes market-idx-spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────────────────
   화면 폭 갈림 지도 — 새 규칙을 넣기 전에 여기부터 본다 (2026-09-04)

   갈림 폭이 여섯이라 «왜 이 숫자인가»를 모르면 일곱 번째가 늘어난다.
   각각 다른 지시를 담고 있으니 **함부로 합치지 않는다.**

     900px  태블릿·좁은 PC — 상단바가 두 줄로 접히고 카드가 한 열이 된다
     720px  통계·표 블록이 두 칸에서 한 칸으로
     640px  글 카드가 «게시판 / 제목 / 시간» 석 줄이 된다 (2026-08-27 지시)
     620px  입력칸 글자 16px  ← **절대 건드리지 말 것**
     560px  폰 — 규칙 대부분이 여기 있다
     480px  작은 폰 — 팝업 단추를 세로로

   620px 을 560px 에 합치면 안 되는 이유:
     아이폰은 입력칸 글자가 16px 보다 작으면 «칸을 누를 때 화면을 자동으로
     확대»한다. 이 앱은 손가락으로 화면을 넓히는 것(핀치 줌)을 막아 두었으므로
     (static/nozoom.js), 자동으로 확대되면 **되돌릴 방법이 없다.** 561~620px
     인 기기에서 쓰는 사람이 확대된 화면에 갇힌다. 그래서 이 규칙만 폰보다
     넓은 폭까지 걸어 둔 것이다 — 실수가 아니라 짝이다.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .market-idx-col { gap: 5px; }
  /* 폰에서 열두 칸이 가장 빡빡하다 — 줄 사이와 칸 안쪽 위아래만 벌린다
     (2026-09-05 지점장 «상하로 조금만 늘리고 여유를 주자»).
     가로는 5px·7px 그대로다. 네 칸이 375px 폭을 꽉 채우고 있어 옆으로
     벌리면 숫자가 줄바꿈되거나 칸이 삐져나간다. */
  .market-idx { gap: 9px 5px; }
  .market-idx-item { padding: 8px 7px; min-height: 66px; }
  .market-idx-value { font-size: 14px; }
}

/* ---------- 차트 그래픽 ---------- */

.hero-art {
  flex: 0 1 460px;
  width: 460px;
  max-width: 46%;
  height: auto;
  align-self: stretch;
}

.hero-art .grid line { stroke: var(--border-strong); stroke-width: 1; opacity: .5; }
.hero-art .wick { stroke: var(--text-dim); stroke-width: 1.5; opacity: .55; }
.hero-art .candle.up { fill: var(--brand); opacity: .85; }
.hero-art .candle.down { fill: var(--text-dim); opacity: .3; }
.hero-art .trend {
  stroke: var(--brand-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.hero-art .dot { fill: var(--brand-ink); stroke: var(--bg); stroke-width: 3; }
.hero-art .fade-top { stop-color: var(--brand); stop-opacity: .16; }
.hero-art .fade-bottom { stop-color: var(--brand); stop-opacity: 0; }

/* 빈 화면 그래픽 */
.empty-art { width: 120px; height: 70px; margin-bottom: 18px; }
.empty-art .grid line { stroke: var(--border-strong); stroke-width: 1; opacity: .6; }
.empty-art .bar { fill: var(--border-strong); opacity: .7; }
.empty-art .bar.accent { fill: var(--brand); opacity: .55; }

/* ---------- 본문 영역 ---------- */

/* 세로 기둥. 2026-09-04 이전에는 body 가 이 노릇을 했는데, 그러면 아래
   탭바(.tabbar, position:fixed)가 flex 칸이 되어 아이폰 사파리가 고정 위치를
   잘못 잡았다 — 막대가 화면 한가운데 떨어져 본문을 덮었다. 기둥을 여기로
   옮기고 탭바는 .page 밖(순수한 body 자식)에 두어 끊어 냈다.
   **body 에 display:flex 를 도로 넣지 마라.** 그 순간 증상이 돌아온다. */
.page { min-height: 100vh; display: flex; flex-direction: column; }

/* 위 여백 56 → 18 → 9. 신조 띠 아래와 검색칸 사이를 두 번에 걸쳐 줄였다
   (2026-09-04 «1/3로» → 2026-09-05 «지금의 절반으로»). 아래 88 은 그대로
   둔다 — 탭바에 가리지 않으려고 비워 둔 자리다.
   더 줄이라시면 이 값 말고 .hero 의 padding-bottom(26px)을 함께 봐야 한다 —
   화면에서 보이는 틈은 «이 값 + 띠 아래 여백»이 합쳐진 것이다. */
.main { padding: 9px 0 88px; flex: 1 0 auto; }
.hero, .topbar, .site-foot, .utility { flex: 0 0 auto; }

.page-head { margin-bottom: 26px; }

h1 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.04em;
  color: var(--navy);
  margin: 0 0 10px;
}

.section-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--navy);
  margin: 0;
}

/* 홈 화면의 세 제목(내 게시판 · 읽지 않은 글 · 읽은 글)만 상단 메뉴바와
   같은 크기로 맞춥니다(2026-09-05 지점장 지시 — «상단 메뉴바 사이즈와 일치»).
   값은 .gnb-item 과 똑같은 식을 씁니다 — 한쪽을 고치면 다른 쪽도 같이
   고쳐야 어긋나지 않습니다.
   .section-title 자체를 줄이지 않는 까닭 — 그 이름은 검색·즐겨찾기·발자취
   같은 다른 화면에서도 쓰여, 홈만 보고 줄이면 엉뚱한 화면 제목까지 작아집니다.
   선택자를 «.section-title.home-title» 로 겹쳐 쓰는 까닭 — 아래 900px
   미디어쿼리에 «.section-title { font-size: 20px }» 가 있어, 이름 하나짜리로
   두면 그 폭에서 밀립니다(2026-09-05 실측으로 확인). 둘을 겹치면 자리와
   무관하게 항상 이깁니다. */
.section-title.home-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 0 9px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.section-title.home-title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--brand);
}

.lede { color: var(--text-mid); margin: 0; font-size: 15.5px; }

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  margin-bottom: 12px;
}

.section { font-size: 20px; font-weight: 800; color: var(--navy); margin: 56px 0 18px; letter-spacing: -.03em; }

/* ---------- 글 카드 ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.card {
  background: var(--surface);
  /* 상자형 카드만 한 단 진한 선으로 두른다 (2026-09-05).
     흰 카드가 흰 바탕 위에 있어 1.30:1 로는 밝은 데서 경계가 사라졌다.
     목록(.card-grid)의 «아래 잔선»은 그대로 --border 다 — 아래 규칙이
     border:0 으로 덮으므로 여기 손대도 목록은 안 굵어진다. */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-strong);
}

.card-body { display: flex; flex-direction: column; height: 100%; padding: 24px 28px 22px; }

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cat {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -.01em;
}

.card h2 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.035em;
  color: var(--navy);
  margin: 10px 0 10px;
}

.card p {
  margin: 0 0 20px;
  color: var(--text-mid);
  font-size: 15.5px;
  line-height: 1.65;
  flex: 1 1 auto;
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-dim);
}

.more { font-weight: 600; color: var(--text-mid); }
.more::after { content: " ›"; color: var(--brand); font-weight: 700; }
.card:hover .more { color: var(--brand-ink); }

/* 새 건의 알림 띠 */
.new-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  margin-bottom: 26px;
  border: 1px solid var(--brand);
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  background: var(--brand-tint);
  transition: box-shadow .15s;
}

.new-banner:hover { box-shadow: var(--shadow-lift); }
.new-banner span { font-size: 15.5px; font-weight: 700; color: var(--navy); }
.new-banner .more { font-style: normal; margin-left: auto; font-size: 14px; font-weight: 700; color: var(--brand-ink); }
.new-banner .more::after { content: " ›"; }

/* 새로 올라온 글 표시 (24시간) */
.new-tag {
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--brand);
  color: var(--text);
  vertical-align: 1px;
}

/* 맨 위에 세워 둔 글 (2026-08-31 지점장 지시). HOT·NEW 와 달리 목록 화면에서도
   숨기지 않습니다 — 왜 이 글이 위에 있는지가 거기서 가장 궁금하기 때문입니다 */
.pin-tag {
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f3ece0;
  color: #7a5f2e;
  border: 1px solid #e0d3ba;
  vertical-align: 1px;
}

.pin-tag + .done-tag,
.pin-tag + .hot-tag,
.pin-tag + .new-tag { margin-left: 5px; }

/* 월간조혁진 소게시판 글에 상시로 붙는 딱지 (2026-08-23 지점장 지시) */
.hot-tag {
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--danger);
  color: #fff;
  vertical-align: 1px;
}

.hot-tag + .new-tag,
.done-tag + .hot-tag { margin-left: 5px; }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 56px 24px 60px;
  text-align: center;
  color: var(--text-mid);
  font-size: 15px;
}

.empty p { margin: 0; }

.empty code { background: var(--surface); border: 1px solid var(--border); }

/* ---------- 로그인 안내 (비회원 첫 화면) ---------- */

.gate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

.gate-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 32px 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}

.gate-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-strong);
}

.gate-card.admin { background: var(--bg-alt); border-style: dashed; }
.gate-card.admin .more { color: var(--text-dim); }
.gate-card.admin:hover { border-style: solid; border-color: var(--brand); }
.gate-card.admin:hover .more { color: var(--brand-ink); }

.gate-card strong { font-size: 21px; color: var(--navy); letter-spacing: -.035em; }
.gate-card span { font-size: 14.5px; color: var(--text-mid); }
.gate-card .more { font-style: normal; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--brand-ink); }
.gate-card .more::after { content: " ›"; }

.pending-box {
  max-width: 560px;
  padding: 34px 36px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.pending-box h2 { margin: 0 0 10px; font-size: 22px; color: var(--navy); letter-spacing: -.035em; }
.pending-box p { margin: 0 0 20px; color: var(--text-mid); }

/* ---------- 회원 관리 ---------- */

.admin-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.admin-tabs a {
  padding: 11px 18px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-dim);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.admin-tabs a:hover { color: var(--text); }
.admin-tabs a.active { color: var(--navy); border-bottom-color: var(--brand); }

.pill {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  vertical-align: 2px;
}

.panel.highlight { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.member-row:last-child { border-bottom: none; padding-bottom: 0; }

.member-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.member-id strong { font-size: 16.5px; color: var(--navy); letter-spacing: -.03em; }
.member-id .dim { font-size: 12.5px; color: var(--text-dim); }

/* 같은 이름의 회원이 이미 있을 때 승인 화면에 붙는 꼬리표.
   핀번호를 잊어 다시 가입하는 분 때문에 생깁니다 — 옛 계정을 먼저
   내보내시라는 뜻입니다. (2026-08-19) */
.warn-tag {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: #FDECEC;
  border: 1px solid #F0BDBD;
  color: #B3261E;
  white-space: nowrap;
}

.member-id .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--text-mid);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 1px 8px;
  border-radius: 5px;
}

.role {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-mid);
}

.role.staff { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-ink); }

.member-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.member-actions select { width: auto; min-width: 92px; padding: 8px 10px; font-size: 14px; }

.muted { color: var(--text-dim); font-size: 14.5px; margin: 14px 0 0; }

/* 「MY」 알약 — 회원 이름이 있던 자리. 누르면 「내 발자취」(/mypage)로 간다.
   2026-09-04 지점장 지시로 이름·등급 딱지를 빼고 이 알약만 남겼다.
   .who 규칙은 미리보기 화면이 아직 쓰므로 지우지 않는다. */
.utility-inner a.my-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--navy);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  text-decoration: none;
}
.utility-inner a.my-pill:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
}

.who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  padding-right: 4px;
  text-decoration: none;
}
/* 이름을 누르면 «내 발자취»로 갑니다(2026-08-27 지점장 지시 —
   «자기 이름을 넣으면 내 발자취를 다 끌어오면 좋겠다»). */
a.who:hover { text-decoration: underline; }

.who i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--brand-ink);
  background: var(--brand-tint); padding: 2px 8px; border-radius: 999px; }

/* ---------- 글 본문 ---------- */

.post { max-width: 760px; margin: 0 auto; }
.post.wide { max-width: 100%; }

/* 글 위쪽 되돌아가기 */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-mid);
  padding: 6px 12px 6px 8px;
  border-radius: 8px;
  transition: background .15s, color .15s;
}

.back-link:hover { background: var(--bg-alt); color: var(--brand-ink); }

/* 떠다니던 «뒤로 가기» 단추(position:fixed)의 규칙을 지운 자리다.

   내력: 화면 오른쪽 아래에 띄웠다가 «스크롤 중에 화면 한가운데로 떨어져 본문을
   덮는다»는 제보를 거듭 받았다. translateZ·backface·will-change·sticky 로 네 번
   손봤고 네 번 다 실패했다. 데스크톱·헤드리스 크롬에서는 언제나 정상으로 나와서
   고쳤는지 확인할 방법조차 없었다. 2026-08-21 저녁에 지웠다.

   **떠다니는 단추로는 되살리지 마라.** 걸렸던 것은 «뒤로 가기»가 아니라 «떠 있는
   자리»였다.

   2026-08-22, 지점장 요청으로 «뒤로 가기»가 돌아왔다. 이번에는 떠 있지 않다 —
   상단 이용줄의 알약(.back-pill, 이 파일 위쪽 «뒤로 가기» 규칙)으로 들어가 종(알림)
   왼쪽에 선다. 본문을 덮을 수 없고, .utility 가 position:sticky 라 스크롤을 내려도
   남는다(2026-09-08까지는 .topbar 전체가 sticky 였다).
   글 아래의 «← 목록으로»(.back-link)는 그대로 둔다 — 하는 일이 다르다. */

/* 리포트(HTML 산출물) 보기 */
.report-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}

.report-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.report-bar span { font-size: 13px; font-weight: 700; color: var(--text-dim); letter-spacing: .02em; }

.report-frame {
  display: block;
  width: 100%;
  height: 900px;
  border: 0;
  background: #fff;
}

.post-head { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 2px solid var(--navy); }
.post-head h1 { margin: 12px 0 0; font-size: 38px; }
/* 제목 오른쪽 「링크복사」 (2026-09-09 지점장 지시). 제목이 길어지면 단추가
   먼저 자리를 지키고 제목이 접힙니다 — 반대로 두면 긴 제목에 단추가 밀려
   화면 밖으로 나갑니다. */
.post-title-row { display: flex; align-items: flex-start; gap: 12px; }
.post-title-row h1 { flex: 1; min-width: 0; }
.app-link-copy { flex: 0 0 auto; margin-top: 16px; white-space: nowrap; }
.post-head .card-meta { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-dim); }

.board-pill {
  font-weight: 700;
  color: var(--brand-ink);
  font-size: 13.5px;
}

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }

.tag {
  font-size: 12.5px;
  color: var(--text-mid);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 3px 11px;
  border-radius: 999px;
}

/* 건의사항 평가 점수(0~5) — 지점장 전용, 비공개(2026-08-27 지점장 지시) */
.score-box {
  margin-top: 40px;
  padding: 16px 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.score-box h3 { margin: 0 0 10px; font-size: 13.5px; color: var(--text-mid); }
.score-box h3 .dim { font-weight: 400; color: var(--text-dim); }
.score-box form { display: flex; gap: 6px; flex-wrap: wrap; }
.score-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-mid);
  cursor: pointer;
  background: var(--surface);
}
.score-opt input { position: absolute; opacity: 0; pointer-events: none; }
.score-opt.on, .score-opt:has(input:checked) {
  background: var(--brand-solid); border-color: var(--brand); color: #fff;
}
.score-say { margin: 8px 0 0; font-size: 12px; color: var(--text-dim); }
.score-say:empty { display: none; }

.post-foot { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); }

.prose { font-size: 19px; line-height: 1.9; color: var(--text); }
.prose h1, .prose h2, .prose h3, .prose h4 {
  color: var(--navy);
  letter-spacing: -.035em;
  line-height: 1.4;
  font-weight: 700;
  margin: 2.2em 0 .7em;
}
.prose h1 { font-size: 28px; }
.prose h2 { font-size: 24px; padding-left: 14px; border-left: 4px solid var(--brand); }
.prose h3 { font-size: 20px; }
.prose p { margin: 0 0 1.2em; }
.prose a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 700; color: var(--navy); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--brand); }

/* 체크박스 목록 — 「- [ ] 할 일」로 쓴 것. 점(marker)을 없애고 상자를
   그 자리에 둡니다. 상태는 기기별 localStorage 에만 남습니다(서버 저장 없음,
   TASK_CHECK_JS 참고) — 지점장도 남의 체크는 못 봅니다(2026-08-26). */
ul.task-list { list-style: none; padding-left: 0; }
.task-item { display: flex; align-items: flex-start; gap: 9px; margin-bottom: .55em; }
.task-item::marker { content: none; }
.task-item label { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.task-check {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  margin-top: 2px;
  accent-color: var(--brand);
  cursor: pointer;
}
.task-item span { line-height: 1.55; }
.task-check:checked ~ span {
  color: var(--text-dim);
  text-decoration: line-through;
}
.prose img { max-width: 100%; height: auto; border-radius: 12px; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2.6em 0; }

.prose blockquote {
  margin: 1.6em 0;
  padding: 18px 22px;
  border-left: 3px solid var(--brand);
  background: var(--bg-alt);
  border-radius: 0 10px 10px 0;
  color: var(--text-mid);
}

.prose blockquote p:last-child { margin-bottom: 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .87em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 5px;
}

.prose pre {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  overflow-x: auto;
  margin: 0 0 1.4em;
}

.prose pre code { background: none; border: none; padding: 0; font-size: 13.5px; line-height: 1.7; }

.table-wrap { overflow-x: auto; margin: 0 0 1.5em; }
.prose table, .table-wrap table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.prose th, .prose td, .table-wrap th, .table-wrap td {
  border-bottom: 1px solid var(--border); padding: 12px 14px; text-align: left; white-space: nowrap;
}
.prose thead th, .table-wrap thead th {
  background: var(--bg-alt); font-weight: 700; color: var(--navy); border-bottom: 2px solid var(--border-strong);
}
.table-wrap td .dim { color: var(--text-dim); font-size: 12px; }
.table-wrap td.total { color: var(--navy); font-size: 15px; }

/* ---------- 글쓰기 화면 ---------- */

.editor-wrap { max-width: 860px; margin: 0 auto; }

.editor { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }

.editor-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.editor-meta label { flex: none; }
.editor-meta label.wide { grid-column: 1 / -1; }
.editor-meta input[type=date] {
  font: inherit;
  font-size: 15.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 11px 14px;
  width: 100%;
}

.md-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: var(--bg-alt);
}

.md-tool {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-mid);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.md-tool:hover { background: var(--brand-tint); color: var(--brand-ink); border-color: var(--brand); }

.editor textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, "Apple SD Gothic Neo", monospace;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0 0 10px 10px;
  padding: 18px 20px;
  width: 100%;
  resize: vertical;
  min-height: 320px;
  margin-top: -1px;
}

.editor textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.editor-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.editor-actions .spacer { flex: 1 1 auto; }
.editor-actions .btn { align-self: auto; }

.md-help {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-alt);
  padding: 0 18px;
}

.md-help summary {
  cursor: pointer;
  padding: 13px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-mid);
  list-style: none;
}

.md-help summary::-webkit-details-marker { display: none; }
.md-help summary::before { content: "▸ "; color: var(--brand); }
.md-help[open] summary::before { content: "▾ "; }
.md-help-body { padding-bottom: 16px; }
.md-help table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.md-help th, .md-help td { border-bottom: 1px solid var(--border); padding: 7px 10px; text-align: left; }
.md-help th { color: var(--navy); font-weight: 700; }
.md-help p { font-size: 13.5px; color: var(--text-dim); margin: 12px 0 0; }

/* ---------- 첨부파일 ---------- */

.file-field { gap: 9px; }

.file-field input[type=file] {
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-mid);
  background: var(--bg-alt);
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: 16px;
  width: 100%;
  cursor: pointer;
}

.file-field input[type=file]:hover { border-color: var(--brand); background: var(--brand-tint); }

/* 파일을 끌어다 놓는 동안(드래그 앤 드롭) — FILE_DROP_JS 가 붙였다 뗍니다 */
.file-field.drag-over input[type=file] {
  border-color: var(--brand);
  border-style: solid;
  background: var(--brand-tint);
}

.attach-box {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
  padding: 16px 20px;
}

.attach-box > strong {
  display: block;
  font-size: 13.5px;
  color: var(--navy);
  margin-bottom: 10px;
}

.attach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.attach-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14.5px;
}

.attach-list li::before { content: "📎"; font-size: 13px; }
.attach-list a { color: var(--brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.attach-list .dim { font-size: 12.5px; color: var(--text-dim); }

/* 오디오 첨부는 링크를 눌러 새 화면으로 넘어가지 않고 그 자리에서 튼다
   (2026-08-24 건의 — 오디오·슬라이드를 열면 뒤로가기가 없었다). */
.attach-list li.attach-audio::before { content: "🔊"; }
.attach-list li.attach-audio .nm { font-weight: 600; color: var(--navy); }
.attach-list li.attach-audio audio { flex: 1 1 100%; max-width: 420px; margin-top: 2px; height: 34px; }

/* 사진 첨부는 «바로보기» — 그 자리에 펴 둔다(2026-08-27 지점장 지시).
   폰에서는 내려받아도 열 곳이 없어 «안 열린다»가 됐다. 눌러야 나오는 것이
   아니라 이미 나와 있고, 누르면 원래 크기로 새 탭에 뜬다. */
.attach-list li.attach-img::before { content: "🖼"; }
.attach-list li.attach-img .nm { font-weight: 600; color: var(--navy); }
.attach-list li.attach-img > a { flex: 1 1 100%; margin-top: 2px; }
.attach-list li.attach-img img {
  display: block;
  width: 100%;
  max-width: 560px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

/* PDF 첨부는 «바로보기»(쪽 이미지)와 «내려받기»를 나눠 단다. 이름을 누르면
   폰에서도 열리는 쪽 이미지로 가고, 원본이 필요하면 그 옆에서 받는다. */
.attach-list a.attach-dl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-mid);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}
.attach-list a.attach-dl:hover { border-color: var(--text-mid); color: var(--text); }

/* 분석요청 기록 화면의 사진 첨부도 같은 이치로 그 자리에 편다. */
.ask-file-img { display: inline-block; margin: 6px 8px 0 0; }
.ask-file-img img {
  display: block;
  width: 100%;
  max-width: 320px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.attach-list .rm {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--danger);
  margin-left: auto;
  cursor: pointer;
}

.post .attach-box { margin-top: 36px; }

.tag.author { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-ink); font-weight: 700; }

.check-row {
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
}

.check-row input { width: auto; margin-top: 3px; accent-color: var(--brand); }

.form.inline label.grow { flex: 3 1 260px; }

.steps {
  margin: 16px 0 20px;
  padding-left: 1.3em;
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.75;
}

.steps li { margin-bottom: 9px; }
.steps li::marker { color: var(--brand); font-weight: 700; }
.steps strong { color: var(--navy); }
.steps a { color: var(--brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.code-lines { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 4px; }
.code-lines code { font-size: 12.5px; padding: 5px 10px; word-break: break-all; }
.check-row b { font-weight: 400; }

/* ---------- 소게시판 칩 ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 17px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-mid);
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}

.chip i {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

/* 상단 메뉴 gnb-item 의 안읽음 점과 같은 모양 — 소게시판 칩에도 씁니다. */
.chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5484d;
  flex: none;
}

.chip:hover { border-color: var(--brand); color: var(--brand-ink); }

.chip.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.chip.active i { color: rgba(255, 255, 255, .7); }

.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.list-head-actions { display: inline-flex; align-items: center; gap: 8px; }

/* 여러 글 선택해서 한꺼번에 삭제·이동(2026-08-26 지점장 지시).
   평소엔 체크박스를 숨기고, 「선택」을 누르면(.select-on) 보여준다. */
.card { position: relative; }
.card-select {
  display: none;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.card-select input { margin: 0; width: 16px; height: 16px; }
.card-grid.select-on .card-select { display: flex; }
.card-grid.select-on .card { padding-left: 2px; }

.bulk-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg-alt);
}
.bulk-bar .bulk-count { font-size: 13.5px; font-weight: 700; color: var(--text-mid); }
.bulk-bar select {
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 10px;
}
.bulk-bar .btn[disabled] { opacity: .45; cursor: not-allowed; }
.bulk-bar[hidden] { display: none; }

.post-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.foot-tools { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.trash-form, .unread-form { display: inline; }

/* 공유 단추 묶음 — 관리자·직원에게만 보인다 */
.share-tools { display: inline-flex; align-items: center; gap: 8px; }

/* 회원이 아니어도 이 글 하나만 열리는 공개 링크. 주소칸이 늘어나 남는 자리를
   먹고, 복사 단추는 제 몫만 차지합니다 — 좁은 화면에서 주소칸 따로, 복사
   단추 따로 아래위로 떨어지는 일이 없게 한 줄에 붙여 둡니다(2026-08-26). */
.public-link { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.public-link-url {
  font: inherit;
  font-size: 12.5px;
  color: var(--text-mid);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 8px;
  min-width: 0;
  flex: 1 1 auto;
  width: auto;
}
.public-link .pl-copy {
  flex: 0 0 auto;
  padding: 7px 10px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* ---------- 폼 ---------- */

.narrow { max-width: 480px; margin: 0 auto; }

.form { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }

.form.inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-top: 16px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-mid);
  flex: 0 0 auto;
}

.form.inline label { flex: 1 1 190px; }

.sub { font-weight: 400; color: var(--text-dim); }

input[type=text], input[type=password], select {
  font: inherit;
  font-size: 15.5px;
  font-weight: 400;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
}

input::placeholder { color: var(--text-dim); }

input:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 700;
  font-size: 15.5px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--brand-ink);
  color: #fff;
  cursor: pointer;
  align-self: flex-start;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}

.btn:hover { background: var(--brand); }
.btn.small { font-size: 14px; padding: 9px 16px; }

.btn.ghost {
  background: transparent;
  color: var(--text-mid);
  border-color: var(--border-strong);
}

.btn.ghost:hover { background: var(--bg-alt); color: var(--navy); border-color: var(--text-dim); }

.btn.danger { background: transparent; color: var(--danger); border-color: var(--border-strong); }
.btn.danger:hover { background: transparent; border-color: var(--danger); }

.alert, .notice {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  margin: 20px 0 0;
  border-left: 3px solid;
}

.alert { background: var(--bg-alt); color: var(--danger); border-color: var(--danger); }
.notice { background: var(--brand-tint); color: var(--brand-ink); border-color: var(--brand); }

.hint { font-size: 13.5px; color: var(--text-dim); margin-top: 32px; }
.hint a { color: var(--brand-ink); font-weight: 600; }

/* ---------- 관리 화면 ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 30px 30px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.panel h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
  letter-spacing: -.03em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.panel h2 .count {
  margin-left: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
}

/* «내 발자취» — 최근 읽은 글·나의 건의사항 목록 */
.myfoot-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.myfoot-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
}
.myfoot-list time { flex: 0 0 auto; color: var(--text-dim); font-size: 12.5px; }
.myfoot-list a { color: var(--navy); text-decoration: none; min-width: 0; }
.myfoot-list a:hover { text-decoration: underline; }

.board-row { padding: 22px 0; border-bottom: 1px solid var(--border); }
.board-row:last-child { border-bottom: none; padding-bottom: 0; }

.board-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.board-row-head code { font-size: 12px; }

/* 순서 바꾸기 버튼 */
.order-btns { display: flex; align-items: center; gap: 4px; }

.order-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--text-mid);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.order-btn:hover:not(:disabled) {
  background: var(--brand-tint);
  color: var(--brand-ink);
  border-color: var(--brand);
}

.order-btn:disabled { opacity: .35; cursor: default; }

.order-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  margin-right: 4px;
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.grid label { flex: none; }
.row-actions { display: flex; gap: 8px; margin-top: 16px; }

/* ---------- 푸터 ---------- */

.site-foot {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 30px 0;
  font-size: 13px;
  color: var(--text-dim);
}

.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.foot-name { font-weight: 700; color: var(--text-mid); }

.foot-legal {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 70ch;
}

/* ---------- 반응형 ---------- */

@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .utility-inner { height: 34px; gap: 14px; font-size: 12.5px; }
  .topbar-inner { height: auto; flex-wrap: wrap; gap: 10px; padding-top: 20px; padding-bottom: 0; }
  /* 좁은 화면에서는 로고가 첫 줄, 메뉴는 그 아랫줄로 내려갑니다.
     그래서 로고 폭을 100% 로 두지 않고, 순서(order)로 줄을 나눕니다. */
  .brand { flex: 1 1 auto; min-width: 0; }
  /* 사용설명서는 로고 줄 오른쪽에 붙습니다 — auto 여백을 줍니다. */
  .manual-pill { order: 1; margin-left: auto; height: 34px; padding: 0 12px; font-size: 12.5px; }
  .arcade-pill { order: 1; height: 34px; padding: 0 12px; font-size: 12.5px; }
  /* 반드시 flex-start — flex-end 면 앞쪽 메뉴가 화면 밖으로 밀려 스크롤로도 닿지 않습니다 */
  .gnb { order: 2; width: 100%; gap: 1px; justify-content: flex-start; }
  .gnb-item { padding: 9px 12px 10px; font-size: 16px; }
  /* 분석요청(.ask-cta)은 2026-09-08 낮에 잠깐 이 메뉴줄 안으로 들어왔다가
     같은 날 «어제 있던 자리로» 지시로 topbar-inner 의 {ask_cta} 슬롯(로고
     줄, .gnb 형제)으로 되돌아갔다 — 여기서는 더 손대지 않는다. 크기·정렬은
     기본 .ask-cta 규칙을 그대로 따른다. */
  /* 홈 세 제목은 메뉴바를 그대로 따라간다(2026-09-05 지점장 지시).
     바로 윗줄 값과 늘 같이 고친다. */
  .section-title.home-title { font-size: 16px; }
  .topbar-actions { margin-left: auto; }
  .hero { padding: 12px 0 10px; }   /* 위 24→12 · 아래 20→10 (2026-09-05) */
  /* 지수 열(.market-idx-col)이 hero-copy 와 나란히 서는 형제라, 여기서
     column 으로 바꾸면 그 아래로 떨어진다 — 지점장이 짚으신 자리(제목
     옆)를 지키려면 이 너비에서도 row 를 유지해야 한다(2026-08-28).
     세로 가운데 정렬도 유지한다 — flex-start 로 두면 짧은 지수 열이
     위로 붙어 버린다(2026-08-28 지점장 지시). */
  .hero-inner { flex-direction: row; align-items: center; gap: 20px; }
  .hero-title { font-size: 28px; }
  .hero-art { width: 100%; max-width: 100%; flex: none; margin-bottom: -8px; order: 3; }
  .creed { margin-top: 22px; padding-top: 18px; }
  .creed-item { flex-direction: column; gap: 3px; }
  /* 세 줄(항목당 한 줄)로 끝나도록 문장을 짧게 다듬었으므로(2026-08-26),
     이 너비에서 줄바꿈되지 않게 여유 있는 크기로 잡습니다. */
  .creed-text { font-size: 13px; }
  /* 위 여백 36 → 18 (2026-09-05 지점장 «지금의 절반으로»).
     이 줄이 맨 위 .main 을 덮는다 — 기본값만 고치면 이 폭에서는 안 줄어든다. */
  .main { padding: 18px 0 64px; }
  h1 { font-size: 25px; }
  .post-head h1 { font-size: 29px; }
  .card-grid { grid-template-columns: 1fr; }
  .prose { font-size: 18px; }
}

/* ---------- 휴대폰 ---------- */

@media (max-width: 560px) {
  .wrap { padding: 0 16px; }

  /* 「뒤로」는 글자를 남깁니다(2026-08-26 지점장 지시) — 아이콘만 있으니
     있는 줄 모르고 «뒤로가기를 만들어 달라»는 건의가 들어왔습니다.
     글자가 있어야 눈에 걸립니다. 종·돋보기는 그대로 아이콘만 남깁니다. */
  .utility-inner a.back-pill { font-size: 12.5px; gap: 3px; padding: 3px 10px 3px 7px; }
  .utility-inner a.back-pill::before { width: 12px; height: 12px; }

  /* 위쪽 이용 링크 — 좁은 화면에서 넘치지 않게 */
  .utility-inner {
    height: auto;
    min-height: 34px;
    gap: 10px 14px;
    font-size: 12px;
    flex-wrap: wrap;
    /* 좌우 16px 은 .wrap 이 주는 값입니다. 짧은 shorthand(7px 0 9px)로 쓰면
       그 여백까지 0 으로 지워져 «가입 신청»이 화면 끝에 붙습니다. */
    padding: 7px 16px 9px;
  }
  .who { font-size: 12px; }

  /* 로고 위 숨 — 900px 블록에서 준 padding-top:20px 이 위의 «.wrap { padding: 0 16px }» 에
     덮여 0 이 됩니다(.wrap 과 .topbar-inner 는 우선순위가 같아 나중 것이 이깁니다).
     그래서 휴대폰에서만 구분선에 로고가 붙었습니다. 여기서 다시 명시합니다. */
  .topbar-inner { padding: 18px 16px 0; }

  .brand-text b { font-size: 16px; }
  .brand-text em { font-size: 10.5px; }
  .brand-mark { width: 22px; height: 22px; }
  .gnb { gap: 1px; }
  .gnb-item { padding: 9px 11px 10px; font-size: 16px; }
  /* 폰에서도 홈 세 제목은 메뉴바와 같은 크기(2026-09-05 지점장 지시). */
  .section-title.home-title { font-size: 16px; }
  .ask-cta { height: 32px; padding: 0 12px; font-size: 12.5px; gap: 5px; }
  .topbar-ctas { gap: 6px; }
  .codex-cta { height: 32px; padding: 0 11px; font-size: 12.5px; }
  .refresh-pill { height: 32px; width: 32px; }
  .refresh-pill-icon { width: 14px; height: 14px; }
  /* 휴대폰에서도 «메뉴얼·오락실» 글자를 그대로 둡니다(2026-08-26 지점장
     재지시) — 아이콘만 남기니 뭔지 알아보기 어려웠습니다. 분석요청과 같은
     비율로 줄입니다. */
  .manual-pill, .arcade-pill { height: 32px; padding: 0 12px; font-size: 12.5px; gap: 5px; }

  /* 히어로를 줄여 글 목록이 첫 화면에 들어오게 */
  .hero { padding: 8px 0 7px; }     /* 위 16→8 · 아래 14→7 (2026-09-05) */
  /* gap 을 0으로 두면 지수 열(.market-idx-col)이 글 옆에 바싹 붙는다 —
     이 열이 형제로 들어오면서(2026-08-28) 최소한의 숨 쉴 자리를 준다. */
  .hero-inner { gap: 12px; }
  /* 신조(.hero-copy)와 지수 배너(.market-idx-col)를 한 줄에 나란히
     세운다(2026-08-31 지점장 지시 — «한 화면 배열»). 신조 쪽 폭을 줄여야
     배너가 아래로 안 밀린다 — 안 줄이면 신조가 필요 이상 넓게 자리를
     잡아 flex-wrap 이 배너를 다음 줄로 내린다. align-items 를 위 기준으로
     바꿔 신조 첫 줄과 배너 첫 줄이 같은 높이에서 시작하게 한다(«라인
     맞춰라») — center 로 두면 배너 쪽이 짧아 신조 중간 높이에 떠 보였다. */
  .hero-inner { align-items: flex-start; }
  /* 2026-09-02 지점장 지적 — 이 150px 은 «지수 배너가 있는 홈 화면» 전용이다.
     .hero-copy 전체에 걸어 두었더니 지수 열이 없는 게시판 화면에서도 제목과
     설명이 150px 안에 갇혀 «증권사가 / 무엇을 / 고쳤나…» 처럼 두세 낱말마다
     끊겼다. 지수 열이 실제로 들어간 히어로에만 걸리게 좁힌다
     (has-market 은 server.py 의 hero_block 이 붙인다). */
  .hero-inner.has-market .hero-copy { max-width: 150px; }
  /* 폰에서도 지점장이 정한 3줄×3칸 배열을 지킨다(2026-09-08 — 4칸에서
     줄었다). 칸이 넓어진 만큼 글자도 함께 키운다. */
  .hero-inner.has-market > .market-idx-col:only-child .market-idx {
    grid-template-columns: repeat(3, 1fr);
    /* 줄 사이만 4px → 9px (2026-09-05 지점장 «너무 빡빡, 상하로 조금만
       늘리고 여유를 주자»). 칸 사이는 4px 그대로 둔다.
       ★ 위쪽 @media(max-width:560px) 에도 같은 뜻의 규칙이 있지만 이 선택자가
         더 구체적이라 **폰에서는 여기가 이긴다.** 값을 고칠 때 여기를 고쳐야
         한다(2026-09-05 — 위쪽만 고쳤다가 안 먹혀 이 자리를 찾았다). */
    gap: 9px 4px;
  }
  .hero-inner.has-market > .market-idx-col:only-child .market-idx-item {
    /* 위아래 4px → 8px. 좌우 5px 는 그대로. */
    padding: 8px 5px;
  }
  .hero-inner.has-market > .market-idx-col:only-child .market-idx-name { font-size: 14px; }
  .hero-inner.has-market > .market-idx-col:only-child .market-idx-value { font-size: 14px; }
  .hero-inner.has-market > .market-idx-col:only-child .market-idx-change { font-size: 12px; }
  .hero-title { font-size: 21px; }
  .hero-head { gap: 12px; }
  .hero-eyebrow { font-size: 12.5px; margin-bottom: 6px; }
  .hero-desc { font-size: 15.5px; margin-top: 10px; }
  .hero-art { display: none; }          /* 장식이므로 휴대폰에서는 숨깁니다 */
  .creed { margin-top: 16px; padding-top: 14px; gap: 9px; }
  /* 문장을 항목당 한 줄로 짧게 다듬었으니(2026-08-26), 좁은 화면에서도
     한 줄 안에 들어오도록 이 너비 전용으로 한 번 더 줄입니다.
     nowrap 은 안 씁니다 — 이보다 더 좁은 기기에서 줄바꿈 대신 화면 밖으로
     삐져나가는 것보다는, 드물게 두 줄이 되는 편이 낫습니다. */
  .creed-text { font-size: 12px; line-height: 1.6; }

  /* 위 여백 26 → 13 (2026-09-05 지점장 «지금의 절반으로»).
     **폰에서 보이는 틈은 이 값이 정한다.** 맨 위 .main(9px)이 아니다 —
     2026-09-04 에 기본값만 줄였다가 폰이 그대로여서 다시 잡았다. */
  .main { padding: 13px 0 48px; }
  .section-title { font-size: 20px; }
  .page-head { margin-bottom: 18px; }

  .card-grid { gap: 14px; }
  .card-body { padding: 20px 20px 16px; }
  .card h2 { font-size: 19px; margin: 8px 0; }
  .card p { font-size: 15px; margin-bottom: 16px; }

  .post-head { margin-bottom: 26px; padding-bottom: 20px; }
  .post-head h1 { font-size: 25px; }
  .app-link-copy { margin-top: 8px; }
  .prose { font-size: 17.5px; line-height: 1.8; }
  .prose h2 { font-size: 21px; }

  /* 리포트 — 좁은 화면에서는 «크게 보기»를 눈에 띄게 */
  .report-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; }
  .report-bar .btn { align-self: stretch; justify-content: center; padding: 11px 16px; }

  /* 관리 화면 — 한 줄에 밀어넣지 않고 위아래로 */
  .post-foot { flex-direction: column; align-items: stretch; }
  .post-foot .btn, .foot-tools { width: 100%; justify-content: center; }
  .foot-tools .btn, .trash-form, .unread-form, .share-tools, .public-link { flex: 1 1 auto; }
  .share-tools .btn { flex: 1 1 auto; }
  /* .public-link 내부(주소칸·복사 단추)는 위 CSS의 nowrap 한 줄 배치를 그대로 씁니다 */
  .trash-form .btn, .unread-form .btn { width: 100%; justify-content: center; }
  .member-row, .board-row { flex-direction: column; align-items: stretch; }
  .member-actions, .row-actions { flex-wrap: wrap; }
  .member-actions .btn, .row-actions .btn { flex: 1 1 auto; align-self: stretch; justify-content: center; }
  .editor-actions { flex-wrap: wrap; }
  .editor-actions .btn { flex: 1 1 auto; align-self: stretch; justify-content: center; }
  .editor-actions .spacer { display: none; }
  .panel { padding: 20px 18px 22px; }
  .admin-tabs { gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs a { padding: 10px 12px; font-size: 14.5px; white-space: nowrap; }
  .editor-meta { grid-template-columns: 1fr; }
  .form.inline { flex-direction: column; align-items: stretch; }
  .form.inline .btn { align-self: stretch; justify-content: center; }
  .gate-grid { gap: 14px; }
  .gate-card { padding: 24px 22px; }

  /* 바닥 띠가 꼬리말 마지막 줄을 덮지 않게 — .main 여백만으로는 모자란다 */
  .site-foot { padding: 22px 0 96px; }
  .site-foot .wrap { flex-direction: column; align-items: flex-start; gap: 6px; }

  .back-link { margin-bottom: 14px; }
}

/* 게시판 안내 상자 — 투자아이디어처럼 성격을 분명히 밝혀야 하는 곳에 띄운다 */
.notice-box {
  margin: 0 0 26px;
  padding: 16px 20px;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  background: var(--surface);
}

.notice-box > strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--brand-ink);
}

.notice-box > p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-mid);
}

.post .notice-box { margin-top: 22px; }


/* 관리자 전용 «눈으로 보기» 전환 — 직원·고객 화면을 그대로 확인한다 */
.viewas {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-alt);
  margin-right: 4px;
}

.utility-inner .viewas a.view-link {
  padding: 2px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mid);
  white-space: nowrap;
}

.utility-inner .viewas a.view-link:hover { color: var(--brand-ink); }

.utility-inner .viewas a.view-link.active {
  background: var(--navy);
  color: #fff;
}

/* 미리보기 중임을 놓치지 않도록 상단 줄 자체에 표시를 남긴다 */
.utility-inner .who i { font-style: normal; color: var(--brand-ink); font-weight: 700; }

/* ---------- 큰 메뉴에서 펼쳐지는 소게시판 판 ---------- */

/* 판은 메뉴줄(.gnb) 안이 아니라 상단바 바로 아래에 둔다.
   .gnb 는 좌우로 넘길 수 있어서(overflow-x) 그 안에 넣으면 판이 잘린다.
   megamenu 의 top:100% 가 기준으로 삼는 것은 .topbar 의 위치 지정(position)
   이지 sticky 여부가 아니다 — 2026-09-08 부터 .topbar 는 relative 다. */
.topbar { position: relative; }

.gnb-item .caret {
  font-style: normal;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .45;
  margin-left: 1px;
  transition: transform .15s, opacity .15s;
}

.gnb-item.open .caret { transform: rotate(180deg); opacity: 1; }
.gnb-item.open { color: var(--brand-ink); }

.megamenu {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 60;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
}

.megamenu.on { display: block; }

.mega { display: none; }
.mega.on { display: block; }

.mega-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 32px;
}

/* So what? 제목 옆 알약(.hero-title-row a)도 이 메뉴 알약을 그대로 씁니다 —
   따로 만들지 않고 선택자를 같이 적어 둡니다(2026-08-26 지점장 지시
   「다른 메뉴와 동일하게」. 2026-08-31 지점장 지시로 제목 아래 탭 줄에서
   제목 옆 알약 하나로 바뀌었지만 모양 기준은 그대로다). 여기를 고치면
   So what? 알약도 같이 바뀝니다. */
.megamenu a, .hero-title-row a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-mid);
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}

.megamenu a i, .hero-title-row a i {
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-dim);
}

/* 펼침판 소게시판 줄의 안읽음 점 — 제목 옆 알약의 .dot과 같은 모양입니다. */
.megamenu a .dot, .hero-title-row a .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #e5484d;
  flex: none; align-self: center;
}
.megamenu a.active .dot { background: #fff; }

.megamenu a:hover, .hero-title-row a:hover { border-color: var(--brand); color: var(--brand-ink); }

.megamenu a.mega-all {
  background: var(--bg-alt);
  color: var(--navy);
}

.megamenu a.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.megamenu a.active i { color: rgba(255, 255, 255, .7); }

@media (max-width: 560px) {
  .mega-inner { padding: 13px 16px; gap: 7px; }
  .megamenu a, .hero-title-row a { font-size: 14px; padding: 7px 13px; }
}

/* ---------- 분석요청: 무엇을 살펴볼지 고르기 ---------- */

.kinds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}

@media (max-width: 560px) { .kinds { grid-template-columns: 1fr; } }

.kinds .kind {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.kinds .kind input { position: absolute; opacity: 0; pointer-events: none; }

.kinds .kind b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--navy);
}

.kinds .kind span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

.kinds .kind:hover { border-color: var(--brand); }

.kinds .kind.on {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.kinds .kind.on b { color: var(--brand-ink); }

/* 카드 왼쪽 그림 — 제목과 한 줄로 붙습니다.
   span 이 아니라 i 로 두는 까닭: 위 «.kinds .kind span» 이 설명글용이라
   span 을 쓰면 그림칸까지 흐린 회색 작은 글씨 규칙에 끌려 들어갑니다. */
.kinds .kind b {
  display: flex;
  align-items: center;
  gap: 9px;
}

.kinds .kind .kicon {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  transition: background .15s, color .15s;
}

.kinds .kind .kicon svg { width: 19px; height: 19px; display: block; }

/* 고른 카드는 배경이 이미 brand-tint 라 그림칸이 묻힙니다 — 색을 뒤집습니다 */
.kinds .kind.on .kicon { background: var(--brand-solid); color: #fff; }
.kinds .kind:hover .kicon { background: var(--brand-solid); color: #fff; }

/* 요청 이력의 종류 표시 */
.ask-kind {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-mid);
  white-space: nowrap;
}

/* 홈 — 읽은 글 구역. 이미 본 글이라 조금 물러나 보이게 둡니다 */
.read-head { margin-top: 44px; align-items: baseline; }
.read-head .hint { margin: 0; font-size: 13.5px; color: var(--text-dim); }
.read-head + .card-grid .card { opacity: .72; }
.read-head + .card-grid .card:hover { opacity: 1; }

/* 카드가 아니라 목록으로 폅니다 (2026-08-27 지점장 지시로 홈의 «읽은 글»에서
   시작 — «읽은 글은 목록 형태로 좀 더 컴팩트하게, 과거 자료 전부 표기»).
   카드는 한 편이 화면 한 뼘을 먹어서, 옛 자료를 전부 실으면 스크롤이 끝없이
   길어집니다. 한 편을 한 줄로 줄이면 백 편도 훑을 만합니다.

   2026-08-31 — 홈의 «읽지 않은 글»에 먼저 넓혔고(지점장 지시 — «읽지않은 글
   형식도 읽은 글 형식처럼»), 곧이어 «블로그 전체 메뉴판 게시판에 다
   적용»하라는 지시로 data-zone 유무를 아예 안 가리게 했다 — 그래서 게시판
   목록(page_board)·검색 결과·즐겨찾기 목록까지 card-grid 를 쓰는 곳은 전부
   이 목록 모양을 쓴다. NEW 딱지(.new-tag)는 이 규칙과 무관하게 살아 있다 —
   그걸 지우는 규칙(아래 «.new-tag { display:none }»)은 data-zone="read" 만
   짚고 있어 다른 곳엔 안 먹는다.

   표시는 서버에서 만들지 않고 여기서 접습니다 — 홈에서는 읽음 알약을 누르면
   카드가 그대로 구역만 옮겨 오기 때문입니다(read_js). 옮겨 온 카드가 스스로
   줄이 되어야 «눌렀더니 목록으로 내려갔다»가 한 동작으로 보입니다.

   :not(.sw-wall) 로 좁혀 둡니다 — So what? 벽은 같은 card-grid 클래스를
   쓰는데, 그쪽은 해석 세 줄이 보여야 해서 접으면 안 됩니다. */
.card-grid:not(.sw-wall) {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.card-grid:not(.sw-wall) .card {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  opacity: .78;
}

.card-grid:not(.sw-wall) .card:hover {
  opacity: 1;
  background: var(--bg-alt);
}

/* 읽지 않은 글만 옅은 주황으로 — 지점장이 화면에서 «읽지 않은 글»과
   «읽은 글»을 한눈에 가르고 싶다고 표시(2026-08-31). --brand-tint 는
   NEW 딱지·활성 알약에 이미 쓰는 옅은 주황이라 새 색을 만들지 않고 그대로 썼다. */
.card-grid[data-zone="unread"]:not(.sw-wall) .card {
  background: var(--brand-tint);
  opacity: 1;
}
.card-grid[data-zone="unread"]:not(.sw-wall) .card:hover {
  background: #ffe7d2;
}

/* 고정 글도 같은 옅은 주황 — 2026-09-03 지점장 지시
   («향후 게시판 모든 고정게시물은 주황음영 강조»).
   목록 맨 위에 세워 둔 글은 «가장 새 글»로 오해되기 쉬운데, 「고정」 딱지만으로는
   훑을 때 눈에 안 걸렸다. 홈에서 읽지 않은 글에 쓰는 --brand-tint 를 그대로 쓴다 —
   새 색을 만들면 화면에 주황이 두 가지가 된다.
   선택자 무게를 .card-grid:not(.sw-wall) .card 와 맞춘다. 안 그러면 목록의
   «background: transparent; opacity:.78» 에 눌려 아무 일도 안 일어난다. */
.card-grid:not(.sw-wall) .card.is-pin,
.card.is-pin {
  background: var(--brand-tint);
  opacity: 1;
}
.card-grid:not(.sw-wall) .card.is-pin:hover,
.card.is-pin:hover {
  background: #ffe7d2;
}
/* 대표 고정글은 한 단계 짙은 주황 — 2026-09-19 지점장(server.py PIN_STRONG) */
.card-grid:not(.sw-wall) .card.is-pin.is-pin-strong,
.card.is-pin.is-pin-strong {
  background: #ffd3ad;
}
.card-grid:not(.sw-wall) .card.is-pin.is-pin-strong:hover,
.card.is-pin.is-pin-strong:hover {
  background: #ffc594;
}

/* Owner 계열(지점장만 보이는 게시판) 글은 파란 음영으로 구분 — 2026-09-18
   지점장 지시. 고정 글(주황)과 겹칠 일이 없다 — Owner 계열은 고정을 쓰지 않는다. */
.card-grid:not(.sw-wall) .card.is-owner,
.card.is-owner {
  background: #c3d9ff;
  opacity: 1;
}
.card-grid:not(.sw-wall) .card.is-owner:hover,
.card.is-owner:hover {
  background: #aecafd;
}

.card-grid:not(.sw-wall) .card-body {
  display: flex;
  /* flex-direction 을 반드시 적습니다 — 카드의 기본이 column 이라, 안 적으면
     한 줄로 눕히려던 것이 그대로 세로로 쌓입니다(2026-08-27 실제로 그랬습니다). */
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 10px;
}

/* 게시판 이름 — 줄 맨 앞에 너비를 고정해 세웁니다.
   전에는 min-width 만 주었는데, flex-basis 가 기본값 auto 라 게시판 이름
   글자 수만큼 칸이 늘어나 버렸습니다 — 이름이 짧은 줄과 긴 줄마다 별·제목이
   시작하는 자리가 들쭉날쭉했습니다(2026-08-28 지점장 제보). flex-basis 를
   고정값으로 박아야 칸 너비가 내용과 무관해집니다. 그보다 긴 이름은
   한 줄에 다 못 담고 아래로 접힙니다(white-space: normal). */
.card-grid:not(.sw-wall) .card-top {
  flex: 0 0 150px;
  margin: 0;
}
.card-grid:not(.sw-wall) .card-top .cat {
  display: block;
  font-size: 12.5px;
  white-space: normal;
  line-height: 1.35;
}

.card-grid:not(.sw-wall) .card h2 {
  /* 기본 카드는 align-items:flex-start 로 별 단추(고정 26px)와 큰 제목
     (18~20px)의 «윗변»을 맞췄다. 이 목록 글씨(14.5px)는 그보다 훨씬 얕아서
     윗변을 맞추면 별이 제목보다 훨씬 아래로 처져 보인다(2026-08-31 지점장
     제보 — «별 모양 라인이랑 제목은 그 라인이 맞아야지»). 가운데 정렬로
     바꾸고 별 자체도 줄이면 한 줄 높이에 맞아떨어진다. */
  align-items: center;
  flex: 1 1 220px;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 600;
}

.card-grid:not(.sw-wall) .star {
  width: 18px;
  height: 18px;
  margin: 0 0 0 -2px;
}

.card-grid:not(.sw-wall) .star svg {
  width: 15px;
  height: 15px;
}

/* 요약과 딱지는 목록에서 뺍니다 — 이미 읽은 글이라 제목만으로 찾습니다 */
.card-grid:not(.sw-wall) .card-body > p,
.card-grid:not(.sw-wall) .hot-tag,
.card-grid:not(.sw-wall) .sowhat-tag { display: none; }

/* 2026-09-27 지점장 제보 —「금주의 투자의견 변화 — 9/」 다음 줄에 「27」만 떨어졌다.
   오른쪽이 한참 비어 있는데도 꺾인 것은 제목 링크가 «제 글자 폭»만큼만 자리를 받기
   때문이다 — 글꼴이 늦게 바뀌면(사파리) 그 폭을 옛 글꼴로 재 둔 채 굳어 몇 px 모자란다.
   링크가 제목 줄의 남은 폭을 다 받게 한다. 이름표(.card-who)가 붙는 목록은 이름이
   오른쪽 끝으로 밀려나므로 뺀다. */
.card-grid:not(.sw-wall) .card h2:not(:has(.card-who)) .card-link { flex: 1 1 auto; }

.card-grid:not(.sw-wall) .card-foot {
  flex: 0 0 auto;
  margin-left: auto;
  padding-top: 0;
  border-top: 0;
  font-size: 13px;
}

@media (max-width: 640px) {
  /* 폰에서는 한 편이 석 줄입니다 — 게시판 · 제목 · 게시시간 (2026-08-27
     지점장 지시). 게시판이 맨 위로 올라가야 «어디서 온 글인지»를 먼저 보고
     제목을 읽게 됩니다. 전에는 제목이 먼저고 게시판·시간이 아래 한 줄에
     같이 붙어 있어, 긴 제목 뒤에 붙은 게시판 이름이 눈에 안 걸렸습니다. */
  .card-grid:not(.sw-wall) .card-body {
    flex-direction: column;
    align-items: stretch;
    padding: 9px 4px;
    gap: 2px;
  }
  /* flex-basis 를 반드시 되돌립니다 — 위(가로 배치)에서 준 «flex: 0 0 150px» 은
     가로 폭 고정이었는데, 세로로 눕는 순간 그 150px 이 «높이 최소 150px» 이
     되어 게시판 이름 한 줄 뒤에 빈 칸이 생겼습니다(2026-08-28 지점장 제보). */
  .card-grid:not(.sw-wall) .card-top { order: 1; flex: 0 0 auto; min-width: 0; }
  /* flex 를 반드시 되돌립니다 — 위(가로 배치)에서 준 «flex: 1 1 220px» 이
     세로로 눕는 순간 «남는 세로 공간을 제목이 다 먹으라»는 뜻이 되어,
     제목과 게시시간 사이가 한 뼘씩 벌어졌습니다(2026-08-27 실제로 그랬습니다). */
  .card-grid:not(.sw-wall) .card h2 { order: 2; flex: 0 0 auto; font-size: 15px; }
  .card-grid:not(.sw-wall) .card-foot {
    order: 3;
    margin-left: 0;
    justify-content: flex-start;
  }
}

.all-read {
  padding: 26px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--text-mid);
  font-size: 15px;
}

/* 제목 옆 개수 — 「읽지 않은 글 12」 처럼 붙습니다 */
.section-title .count {
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  margin-left: 9px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  vertical-align: middle;
}

.read-head .section-title .count { background: var(--bg-alt); color: var(--text-dim); }

/* 분석요청 — 종류에 따라 바뀌는 입력칸 묶음 */
/* 고른 카드 바로 밑에 오도록 JS 가 이 블록을 .kinds 안으로 옮깁니다
   (2026-08-27 지점장 지시). 3열 그리드에서 한 줄을 통째로 차지하게 둡니다 —
   안 그러면 한 칸(1/3 폭)에 끼여 입력칸이 짜부라집니다. */
.kinds > .ask-fields { grid-column: 1 / -1; margin: 2px 0 6px; }

.ask-fields[hidden] { display: none; }
.ask-send[hidden] { display: none; }
.ask-fields { display: flex; flex-direction: column; gap: 18px; }

.ask-fields textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  line-height: 1.7;
  resize: vertical;
}

.ask-fields textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.ask-fields label > .opt { display: block; margin-top: 7px; font-size: 13px; color: var(--text-dim); font-style: normal; }

/* --------------------------------------------------------------------------
   공지 팝업 — 로그인 뒤 첫 화면에 한 번 뜹니다.
   블로그 본래 색을 그대로 씁니다(관리자 화면 팔레트가 아닙니다).
   -------------------------------------------------------------------------- */

.notice-pop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;          /* 세로 가운데 */
  justify-content: center;
  padding: 24px 20px;           /* 폰 좌우 여백 20px */
  background: rgba(22, 40, 60, .55);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  backdrop-filter: saturate(120%) blur(2px);
}

.notice-pop[hidden] { display: none; }

.notice-pop-card {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  border-top: 4px solid var(--brand);
  padding: 26px 24px 20px;
}

.notice-pop-card h2 {
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.35;
  color: var(--navy);
  word-break: keep-all;
}

/* 본문이 길면 팝업 안에서만 굴러갑니다 — 뒤 페이지는 움직이지 않습니다 */
.notice-pop-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-mid);
  word-break: break-word;
}

.notice-pop-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

@media (max-width: 480px) {
  .notice-pop-actions { flex-direction: column-reverse; }
  .notice-pop-actions .btn { width: 100%; text-align: center; }
}

/* 관리자 화면의 공지 목록 */
.notice-row { padding: 22px 0; border-bottom: 1px solid var(--border); }
.notice-row:last-of-type { border-bottom: none; }
.notice-row.off { opacity: .62; }

.notice-row-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.notice-row textarea {
  width: 100%;
  font: inherit;
  line-height: 1.6;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  resize: vertical;
}

.pill.live { background: var(--brand-ink); }
.pill.off { background: var(--text-dim); }

.notice-new-head {
  margin: 26px 0 12px;
  font-size: 14px;
  color: var(--navy);
}

/* Admin 모드로 건너가는 단추 (관리자 상단줄). 미리보기 중에는 그려지지 않습니다. */
.topbar .modelink {
  border: 1px solid var(--brand);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--brand);
}
.topbar .modelink:hover { background: var(--brand-solid); color: #fff; }

/* ---------- 휴대폰: 상단 이용줄을 두 줄로 눌러 담기 ----------
   관리자로 로그인하면 이용줄 항목이 열 개까지 늘어 세 줄이 되고, 그만큼
   로고가 화면 아래로 밀립니다(로고 y=142px). «관리자뷰/직원뷰/고객뷰»
   전환이 178px 로 가장 넓어, 이것만 줄여도 한 줄이 사라집니다.

   반드시 파일 끝에 둡니다 — .utility-inner .viewas a.view-link 본 규칙이
   위쪽 @media(max-width:560px) 블록보다 «뒤»에 있어서, 그 안에 써 넣으면
   우선순위가 같아 뒤엣것에 덮입니다. */
@media (max-width: 560px) {
  .utility-inner { gap: 8px 10px; }
  .utility-inner .viewas a.view-link { padding: 3px 8px; font-size: 11px; }
}

/* 분석요청 목록에 딸린 파일 */
.ask-files { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-dim); }
.ask-files a, .ask-files span {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.ask-files a { color: var(--brand-ink); text-decoration: none; }
.ask-files a:hover { background: var(--brand-tint); }

/* ---------- 요청 원문 카드(분석요청 첨부) ---------- */
/* 2026-08-26 지점장 지시 — «유튜브 분석처럼 게시물 상단에 출처 자료를
   첨부파일 형식으로. 유튜브 썸네일처럼.» 그래서 표지 한 장을 세운 카드로 뜹니다.
   쪽 전체를 여기 펼치지는 않습니다 — 그러면 정작 읽어야 할 요약이 묻힙니다
   (2026-08-18 지점장 요청). 나머지 쪽은 새 창(/src/…)에서 봅니다. */
.src-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 28px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.src-card .src-cover {
  flex: 0 0 156px;
  display: block;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  line-height: 0;
}

.src-card .src-cover img { display: block; width: 100%; height: auto; }

.src-card .src-meta { min-width: 0; flex: 1 1 auto; }

.src-card .src-label {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 6px;
}

.src-card .src-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
  margin-bottom: 4px;
  word-break: break-all;
}

.src-card .src-spec {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.src-card .src-acts { display: flex; flex-wrap: wrap; gap: 8px; }

.src-card .src-open {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: var(--brand-solid);
  padding: 8px 14px;
  border-radius: 8px;
}

.src-card .src-open:hover { filter: brightness(1.08); }

@media (max-width: 560px) {
  .src-card { flex-direction: column; padding: 14px; }
  .src-card .src-cover { flex-basis: auto; width: 100%; max-width: 260px; }
}

/* ---------- 이용 통계 (/admin/stats) ---------- */
/* 그림 라이브러리를 쓰지 않고 div 폭·높이로만 그립니다 —
   오프라인에서도 깨지지 않고, 인쇄해도 그대로 나옵니다. */

.range-pick { display: inline-flex; gap: 4px; margin-top: 14px;
  padding: 4px; background: var(--bg-alt); border-radius: 999px; }
.range-pick a { padding: 7px 16px; border-radius: 999px; font-size: 14px;
  font-weight: 700; color: var(--text-dim); }
.range-pick a.active { background: #fff; color: var(--navy);
  box-shadow: 0 1px 4px rgba(0,0,0,.08); }

.statcards { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

.statcard { padding: 16px 18px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-alt); }
.sc-label { display: block; font-size: 13px; font-weight: 700; color: var(--text-dim); }
.sc-num { display: block; margin: 6px 0 4px; font-size: 27px;
  font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.sc-sub { display: block; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }

.statbars { display: flex; flex-direction: column; gap: 9px; }
.statbar { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.sb-name { flex: 0 0 44%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text-mid); }
.sb-name a { color: var(--navy); font-weight: 600; }
.sb-name .dim { color: var(--text-dim); font-size: 12.5px; }
.sb-track { flex: 1 1 auto; height: 10px; border-radius: 999px;
  background: var(--bg-alt); overflow: hidden; }
.sb-track > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #f9a05c, var(--brand)); }
.sb-num { flex: 0 0 58px; text-align: right; font-weight: 700;
  font-size: 13.5px; color: var(--navy); }

.hourchart { display: flex; align-items: flex-end; gap: 3px;
  height: 132px; margin: 6px 0 10px; padding-bottom: 18px; position: relative; }
.hc-col { flex: 1 1 0; height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; position: relative; }
.hc-col > i { display: block; width: 100%; min-height: 2px;
  border-radius: 4px 4px 0 0; background: var(--brand); opacity: .82; }
.hc-col > em { position: absolute; bottom: -17px; left: 0; right: 0;
  font-style: normal; text-align: center; font-size: 11px; color: var(--text-dim); }

.stat-two { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.stat-two-in { display: grid; gap: 22px; grid-template-columns: 1fr 1fr;
  margin-top: 16px; }
.stat-two-in h3 { margin: 0 0 10px; font-size: 14px; color: var(--text-dim); }

@media (max-width: 720px) {
  .stat-two, .stat-two-in { grid-template-columns: 1fr; }
  .sb-name { flex-basis: 50%; }
  .range-pick a { padding: 7px 12px; font-size: 13px; }
}

/* 통계 패널 제목의 곁말 — 「많이 읽힌 글」과 「읽은 사람 수」가
   같은 크기로 붙어 있으면 한 문장으로 읽힙니다. */
.panel h2 .dim { font-size: 13px; font-weight: 500; color: var(--text-dim);
  margin-left: 4px; }

/* ---------- 건의사항 답변 ----------
   파일 끝에 둡니다. 앞쪽에 같은 선택자가 또 있으면 뒤엣것이 이기므로,
   여기가 «반드시 먹히는» 자리입니다. */

.replies {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 2px solid var(--border-strong);
}

.replies > h2 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--navy);
}

.replies > h2 .n {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--text);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  vertical-align: 2px;
}

.reply-empty {
  margin: 0;
  padding: 18px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
}

.reply-list { list-style: none; margin: 0; padding: 0; }

.reply {
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--brand);
  border-radius: 12px;
  background: var(--brand-tint);
}

.reply + .reply { margin-top: 10px; }

.reply-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.reply-head b { color: var(--brand-ink); font-weight: 800; }
.reply-head time { color: var(--text-dim); }

/* 지우기는 관리자에게만 나옵니다 — 눈에 띄지 않게 오른쪽 끝에 둡니다 */
.reply-del { margin-left: auto; }
.reply-del button {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--text-dim); font-size: 12px; text-decoration: underline;
}
.reply-del button:hover { color: #c0392b; }

.reply-body { font-size: 15px; line-height: 1.65; }
.reply-body p { margin: 0 0 8px; }
.reply-body p:last-child { margin: 0; }

.reply-form { margin-top: 14px; }

.reply-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
}

.reply-form textarea:focus {
  outline: none;
  border-color: var(--brand);
}

.reply-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.reply-actions .hint { margin: 0; font-size: 12px; color: var(--text-dim); }

/* ---------- 회원이 보는 «내가 보낸 건의» ---------- */

.mysuggest { margin-top: 28px; }

.mysuggest h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--navy);
}

.mysuggest-list { list-style: none; margin: 0; padding: 0; }

.mysuggest-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
}

.mysuggest-list li + li { margin-top: 8px; }

.mysuggest-list a {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mysuggest-list a:hover { color: var(--brand-ink); text-decoration: underline; }
.mysuggest-list .when { flex: none; font-size: 12px; color: var(--text-dim); }

.reply-badge {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

/* 아직 답이 없는 건의 — 색을 빼서 «기다리는 중»으로 읽히게 합니다 */
.reply-badge.off {
  background: var(--surface-alt, #f1f2f4);
  color: var(--text-dim);
  font-weight: 600;
}

@media (max-width: 560px) {
  .mysuggest-list li { flex-wrap: wrap; }
  .mysuggest-list a { flex: 1 1 100%; white-space: normal; }
  .reply-actions { flex-direction: column; align-items: stretch; }
  .reply-actions .btn { width: 100%; }
}


/* ---------- 휴대폰 알림 ---------- */

.utility-inner a.push-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--brand-ink);
}

.utility-inner a.push-link::before {
  content: "";
  width: 13px; height: 13px;
  flex: none;
  background: currentColor;
  /* 종 모양 — 글자색을 따라갑니다 */
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 0 0-6 6v4.2L4.3 16a1 1 0 0 0 .9 1.5h13.6a1 1 0 0 0 .9-1.5L18 12.2V8a6 6 0 0 0-6-6z'/%3E%3Cpath d='M9.6 19a2.5 2.5 0 0 0 4.8 0z'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 0 0-6 6v4.2L4.3 16a1 1 0 0 0 .9 1.5h13.6a1 1 0 0 0 .9-1.5L18 12.2V8a6 6 0 0 0-6-6z'/%3E%3Cpath d='M9.6 19a2.5 2.5 0 0 0 4.8 0z'/%3E%3C/svg%3E");
}

/* 켜기 전(JS 가 상태를 아직 못 물어봤을 때)에는 눌러도 아무 반응이 없어
   보이면 안 되므로 기본은 «켜진» 아이콘 그대로 둡니다. 실제로 꺼져 있으면
   PUSH_BELL_JS 가 .off 를 붙여 흐리게 만듭니다(2026-08-27). */
.utility-inner a.push-link.on { color: var(--brand-ink); }
/* 꺼져 있을 때는 색만 바꾸지 않고 종에 엑스표를 그어 모양 자체를 다르게
   합니다(2026-08-27 지점장 지시) — 색만으로는 켜졌는지 꺼졌는지 헷갈렸다. */
.utility-inner a.push-link.off {
  color: var(--text-dim);
  font-weight: 400;
}
/* 엑스표 배지 — mask 를 겹쳐 «파내는» 방식은 브라우저마다 다르게 나와
   (2026-08-27 확인) 대신 색이 확실한 작은 배지를 종 오른쪽 아래에 얹습니다.
   :before(종)와 겹치도록 a 자체를 기준(position:relative)으로 놓습니다. */
.utility-inner a.push-link.off::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 9px;
  height: 9px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff' stroke='%23B23A3A' stroke-width='2'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23B23A3A' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 종 버튼 하나 + 상태 한 줄 — 가족방 fm-bell 과 같은 만듦새입니다(2026-08-27). */
.push-bell-box {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 26px;
}

.push-bell {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
}
.push-bell.on { background: var(--brand-solid); border-color: var(--brand); color: #fff; }
.push-bell:disabled { opacity: .5; cursor: default; }
.push-bell-ico {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.push-bell-ico-off { display: block; }
.push-bell-ico-on { display: none; }
.push-bell.on .push-bell-ico-off { display: none; }
.push-bell.on .push-bell-ico-on { display: block; }
.push-bell-x-bg { stroke: none; fill: #b3400f; }
.push-bell-x-mark { stroke: #fff; stroke-width: 1.9; }

.push-say { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.push-say.on   { color: var(--brand-ink); font-weight: 700; }
.push-say.warn { color: #b3400f; }
.push-say:empty { display: none; }

ol.steps { margin: 0; padding-left: 20px; }
ol.steps li { padding: 5px 0; font-size: 15px; line-height: 1.6; }

.push-stat { margin: 0 0 12px; font-size: 15px; }
.push-stat b { color: var(--brand-ink); font-size: 18px; }

.push-log { list-style: none; margin: 0; padding: 0; }

.push-log li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.push-log li b { flex: none; color: var(--brand-ink); font-size: 12px; }
.push-log li span { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.push-log li time { flex: none; font-size: 12px; color: var(--text-dim); }

.push-board-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; }
.push-board-box {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; cursor: pointer;
}
.push-board-box input { margin: 0; }

@media (max-width: 560px) {
  /* 좁은 화면에서는 상단 줄이 빡빡합니다 — 종만 남기고 글자를 뺍니다 */
  .utility-inner a.push-link { font-size: 0; gap: 0; padding: 3px 2px; }
  .utility-inner a.push-link::before { width: 15px; height: 15px; }
}

/* 알림을 눌러 들어왔는데 로그인이 풀려 있을 때, 로그인 화면 맨 위에 붙는 줄 */
.backnote {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: 10px;
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  font-size: 14px;
  color: var(--brand-ink);
}

/* ---------- 로그인 유지 · 자동 로그인 ---------- */

.keeps { display: grid; gap: 10px; margin: 4px 0 6px; }

.keeps .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
  /* 이 안의 input 은 폼의 일반 input 규칙(가로 100%)에 끌려가면 안 됩니다 */
}

.keeps .check input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin: 2px 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}

.keeps .check span { display: block; line-height: 1.5; }
.keeps .check b { display: block; font-size: 14px; font-weight: 700; color: var(--navy); }
.keeps .check i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--text-dim);
}

.keeps .check:hover { border-color: var(--brand); }

/* ---------- 휴지통 (관리자) ---------- */

.trash-table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.trash-table th, .trash-table td {
  border-bottom: 1px solid var(--border);
  padding: 11px 12px;
  text-align: left;
  vertical-align: middle;
}
.trash-table thead th {
  background: var(--bg-alt);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
}
.trash-table td.nowrap { white-space: nowrap; }
.trash-table td b { font-weight: 600; word-break: break-all; }

/* 되살리기·아주 지우기 두 단추를 한 칸에 나란히 */
.trash-tools { white-space: nowrap; }
.trash-tools form { display: inline-block; margin: 0 0 0 6px; }
.trash-tools form:first-child { margin-left: 0; }
.trash-tools .btn[disabled] { opacity: .4; cursor: not-allowed; }

/* 건의사항 «답변 완료» 딱지.
   NEW(주황) 왼쪽에 놓아 먼저 읽히게 한다 — 목록에서 눈에 걸려야 하는 것은
   «아직 답을 안 한 건의»이고, 완료는 그 반대로 조용히 알려 주면 된다. */
.done-tag {
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--navy);
  color: #fff;
  vertical-align: 1px;
}

/* 완료 딱지가 앞에 서면 NEW 는 그 오른쪽으로 밀린다 */
.done-tag + .new-tag { margin-left: 5px; }

/* 자동 로그인 설명 안의 주의 문구. .keeps .check b 가 block 이라 그대로 쓰면
   문장이 줄바꿈되어 버려서, 여기서 다시 inline 으로 되돌립니다. */
.keeps .check i b.warn {
  display: inline;
  font-size: inherit;
  font-weight: 700;
  color: var(--danger);
}

/* ---------- 요즘 많이 읽은 글 (홈 맨 위) ----------
   1위는 크게, 나머지는 한 줄씩. «대표성 있게 크게»라는 직원 건의를 따랐다. */

.hot {
  margin: 0 0 30px;
  padding: 20px 22px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface);
}

.hot-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--navy);
}

.hot-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--navy);
}

.hot-head .dim { font-size: 12.5px; color: var(--text-dim); }

.hot-list { display: flex; flex-direction: column; }

.hot-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}

.hot-item:first-child { border-top: 0; }
.hot-item:hover .body strong { color: var(--brand-ink); text-decoration: underline; }

.hot-item .rank {
  flex: none;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--surface-alt, #f1f2f4);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 800;
}

.hot-item .body { flex: 1 1 auto; min-width: 0; }

.hot-item .where {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 2px;
}

.hot-item .body strong {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 1위 — 크게 세우고 요약 한 줄까지 보여 준다 */
.hot-item.lead { align-items: flex-start; padding: 4px 4px 16px; }
.hot-item.lead .rank {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--brand);
  color: var(--text);
  font-size: 14px;
}
.hot-item.lead .body strong {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.3;
  white-space: normal;
}
.hot-item.lead .sum {
  display: block;
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 560px) {
  .hot { padding: 16px 15px 14px; margin-bottom: 22px; }
  .hot-head { flex-direction: column; gap: 2px; }
  .hot-item.lead .body strong { font-size: 19.5px; }
  .hot-item .body strong { font-size: 16px; }
}

/* ---------- 들어온 요청 열어 보기 (/ask/<번호>) ---------- */
/* 목록에는 앞부분만 나온다. 기사 본문을 통째로 붙여 넣은 요청은
   앞 120자로는 무슨 이야기인지 알 수 없어 여기서 전문을 본다. */

.ask-open { color: var(--navy); }
.ask-open:hover { color: var(--brand); text-decoration: underline; }

.ask-kind.big { font-style: normal; font-size: 14px; vertical-align: middle;
  margin-right: 6px; }

table.kv { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.kv th { width: 132px; padding: 11px 14px; text-align: left;
  background: var(--bg-alt); border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--text-dim);
  vertical-align: top; white-space: nowrap; }
table.kv td { padding: 11px 14px; border-bottom: 1px solid var(--border);
  word-break: break-all; }
table.kv tr:last-child th, table.kv tr:last-child td { border-bottom: 0; }

.ask-files-box { margin-top: 14px; display: flex; align-items: center;
  flex-wrap: wrap; gap: 8px; font-size: 14px; }

pre.ask-text {
  margin: 0;
  max-height: 60vh;
  overflow: auto;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
  font-family: "Apple SD Gothic Neo", Pretendard, system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 560px) {
  table.kv th { width: 92px; padding: 9px 10px; font-size: 12px; }
  table.kv td { padding: 9px 10px; font-size: 13.5px; }
  pre.ask-text { padding: 12px 13px; font-size: 13.5px; }
}

/* ---------- 분석요청 목록 — 줄마다 같은 자리 (2026-08-20) ----------
   예전에는 flex 로 죽 늘어놓고 넘치면 접히게 두어서, 폰에서 요청마다
   접히는 자리가 달라 제각각으로 보였습니다. 격자로 자리를 고정합니다.
      1열 = 종류표, 2열 = 내용, 3열 = 상태
   메모·첨부는 없으면 줄 자체가 안 생깁니다.                        */

.ask-mine li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: start;
  gap: 5px 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}

.ask-mine li > .ask-kind  {
  grid-column: 1; grid-row: 1; margin: 1px 0 0; text-align: center;
  /* 격자칸 안에서 접히게 한다. keep-all 이라야 «물어보세요»가 낱글자로 쪼개지지 않고
     띄어쓰기에서만 갈린다 — 「무엇이든 / 물어보세요」 두 줄이 된다. */
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.3;
  min-width: 0;
  max-width: 100%;
}
.ask-mine li > .ask-title { grid-column: 2; grid-row: 1; min-width: 0; }
.ask-mine li > .ask-state { grid-column: 3; grid-row: 1; margin-top: 1px; }
.ask-mine li > .ask-meta,
.ask-mine li > .ask-memo,
.ask-mine li > .ask-files { grid-column: 2 / -1; }

.ask-title { font-weight: 600; color: var(--navy); line-height: 1.45; word-break: break-word; }
.ask-title b { font-weight: 600; }

.ask-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.ask-meta time { color: var(--text-dim); }

/* 격자 안에서는 예전의 «오른쪽으로 밀기»가 필요 없습니다 */
.ask-mine li span { margin-left: 0; }
.ask-memo { width: auto; margin-top: 0; }

/* 대기 중인 요청을 신청인이 물리는 단추 (2026-08-27 박철승 PB 건의).
   .ask-meta 가 flex 라 시각 옆에 나란히 섭니다. */
.ask-cancel { display: inline-flex; margin: 0; }
.ask-cancel button { font-size: 12px; padding: 1px 10px; line-height: 1.7; }
.ask-kind { margin-right: 0; }

/* 폰에서는 종류표만 조금 좁힙니다. 자리는 그대로 둡니다 —
   화면이 좁다고 배치가 달라지면 다시 «제각각»으로 보입니다. */
@media (max-width: 480px) {
  .ask-mine li { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 4px 8px; }
  .ask-mine li > .ask-state { font-size: 11.5px; padding: 2px 8px; }
  .ask-kind { font-size: 11px; padding: 2px 6px; }
}

/* ---------- 바닥 여백 (2026-08-21) ----------
   여기 있던 «.main{padding-bottom:104px} / .site-foot{padding-bottom:96px}» 는
   화면 아래에 떠 있던 «뒤로 가기» 띠가 마지막 줄을 가리지 않게 비워 둔 자리였다.
   그 단추를 없애면서 같이 걷어냈다 — 띠와 이 여백은 한 몸이었다.
   이제 글 아래에 100px 가까운 빈 자리가 남지 않는다. */

/* ==========================================================================
   즐겨찾기 별 (2026-08-20)
   제목 왼쪽에 빈 별이 서고, 누르면 금색으로 찹니다.

   카드 전체를 감싸던 <a> 를 제목만 감싸도록 줄이고, 카드 어디를 눌러도
   글로 가는 일은 .card-link::after 가 대신합니다. 그래야 그 «위»에 별
   단추를 올릴 수 있습니다 — 단추를 링크 안에 두면 눌러도 링크가 먼저 먹습니다.
   ========================================================================== */
.card { position: relative; }

.card h2 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.card-link {
  color: inherit;
  text-decoration: none;
  min-width: 0;          /* 긴 제목이 별을 밀어내지 않게 */
}

/* 카드 전체를 덮는 보이지 않는 판. 별 단추(z-index:2)만 이 위로 올라옵니다 */
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}

.star {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 1px 0 0 -4px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, background .15s, transform .1s;
}

.star svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.star:hover { background: rgba(240, 165, 0, .13); color: #c98a00; }
.star:active { transform: scale(.86); }
.star:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* 켜진 별 — 금색으로 채웁니다. 테두리를 한 톤 어둡게 둬야 흰 카드에서
   가장자리가 뭉개지지 않습니다. */
.star.on { color: #eda600; }
.star.on svg { fill: #f5b301; stroke: #d99400; }
.star.on:hover { background: rgba(240, 165, 0, .18); }

/* 손가락으로 쓰는 기기에서는 누를 자리를 넓힙니다 */
@media (hover: none) {
  .star { width: 30px; height: 30px; margin-left: -6px; }
}

/* 상단 이용줄의 즐겨찾기 알약 — 주요뉴스 알약과 같은 틀,
   앞의 동그라미 자리에 금색 별이 들어갑니다. */
/* 글자(«즐겨찾기»)는 화면에서 뺐다(2026-08-26 지점장 지시) — 별 아이콘(과 담아 둔
   개수 뱃지)만 남긴다. .pill 뱃지는 자기 font-size 를 따로 갖고 있어 숫자는 그대로 보인다.
   완전히 지우지 않고 font-size 로만 줄인 건 스크린리더가 여전히 읽게 하기 위함이다. */
.utility-inner a.star-pill {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 4px 6px 4px 5px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #f0dca6;
  color: #9a6b00;
  font-weight: 700;
  font-size: 0;
  letter-spacing: -.03em;
}

.utility-inner a.star-pill::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: #f5b301;
  -webkit-mask: var(--star-mask) center / contain no-repeat;
  mask: var(--star-mask) center / contain no-repeat;
}

.utility-inner a.star-pill:hover {
  background: #fffaf0;
  border-color: #edb93f;
  color: #7d5600;
}

:root {
  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.94 5.96 6.58.96-4.76 4.64 1.12 6.56L12 17.62l-5.88 3.1 1.12-6.56L2.48 9.52l6.58-.96z'/%3E%3C/svg%3E");
}

/* 즐겨찾기 알약의 숫자 뱃지 (2026-08-21 지점장 요청).
   기본 .pill 은 주황이라 금색 알약 위에서 튑니다 — 같은 금색 계열로 맞춥니다. */
.utility-inner a.star-pill .pill {
  background: #f5b301;
  color: #5c4000;
  margin-left: 1px;
  vertical-align: 1px;
}

.utility-inner a.star-pill:hover .pill { background: #edb93f; color: #4a3300; }

/* ==========================================================================
   So what? 댓글 (2026-08-21)
   시장 이슈에 클로드가 «그래서 무엇이 달라지나»를 다는 자리.
   지점장 댓글과 한눈에 갈리게 왼쪽 띠와 이름표 색을 달리한다.
   ========================================================================== */
.replies.sowhat h2 { display: flex; align-items: center; gap: 8px; }

.replies.sowhat .reply {
  border-left: 3px solid var(--border-strong, #d8d5cd);
}

/* 클로드가 단 것 — 금색 띠 */
.replies.sowhat .reply.is-sowhat {
  border-left-color: #eda600;
  background: linear-gradient(90deg, rgba(240,165,0,.07), transparent 42%);
}
/* 코칭을 반영해 고친 해석 — 지점장 화면에만 보이는 체크(2026-08-22). */
.sw-fixed {
  font-style: normal; font-weight: 900; color: #1a8f4c;
  margin-right: 5px; font-size: 13px; line-height: 1;
}

/* 지점장 코칭 종류(첨삭·질문·학습지시) 딱지 — 지점장 화면에만(2026-08-26). */
.sw-kind {
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -.01em;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
}
.sw-kind-fix { background: rgba(240, 165, 0, .16); color: #8a5f00; }
.sw-kind-question { background: rgba(31, 58, 138, .12); color: #1f3a8a; }
.sw-kind-learn { background: rgba(26, 143, 76, .14); color: #1a8f4c; }

/* «공개» 딱지 — 이 코칭이 전체 회원에게도 보인다는 표시, 지점장 화면에만(2026-08-27). */
.sw-public {
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -.01em;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  background: rgba(200, 30, 60, .12);
  color: #a3123a;
}

/* 댓글 폼에서 코칭 종류를 고르는 라디오 — 첨삭/질문/학습지시(2026-08-26).
   «공개» 체크박스는 종류와 별개 축이라 왼쪽에 구분선을 두어 갈랐다(2026-08-27). */
.sw-kind-pick {
  display: flex;
  gap: 14px;
  margin-bottom: 8px;
  font-size: 13.5px;
  color: var(--text-mid);
}
.sw-kind-pick label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.sw-kind-pick input { margin: 0; }
.sw-kind-pick .sw-public-pick {
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--hairline, #e0e0e0);
  color: #a3123a;
  font-weight: 600;
}

/* 질문·학습지시 카드 — 해석 대신 지점장 물음/지시와 답을 보여줍니다. */
.sw-qna-card .sw-q, .sw-qna-card .sw-a { margin: 0 0 8px; }
.sw-qna-card .sw-q b, .sw-qna-card .sw-a b {
  color: var(--navy); font-weight: 800; margin-right: 6px;
}
.sw-qna-card .sw-a b { color: #9a6b00; }
.sw-qna-card .sw-pending {
  margin: 0; font-size: 13px; color: var(--text-dim); font-style: italic;
}

.replies.sowhat .reply.is-sowhat .reply-head b {
  color: #9a6b00;
  letter-spacing: -.02em;
}

/* 「오늘의 유튜브 3선」처럼 **클로드가 다는 다른 댓글**(SOWHAT_ALSO).
   2026-09-07 지점장 지적 — 「소홧이 두번 달린 듯해」. So what? 과 같은
   금색을 물려 두었더니 한 글에 같은 댓글이 두 번 달린 것처럼 보였다.
   성격이 다르니 색도 다르게 — 청록으로 가른다. */
.replies.sowhat .reply.is-also {
  border-left-color: #0e8a86;
  background: linear-gradient(90deg, rgba(14,138,134,.07), transparent 42%);
}
.replies.sowhat .reply.is-also .reply-head b {
  color: #0a6360;
  letter-spacing: -.02em;
}
/* 3선 안의 영상 링크 — 눌러서 나가는 자리라 밑줄로 분명히 보인다. */
.replies.sowhat .reply.is-also .reply-body a {
  color: #0a6360;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 「해석」 이름표는 2026-08-21 에 뺐습니다 — 칸 제목이 「So what?」 이고
   글쓴이 이름도 「So what?」 이라 한 줄에 같은 말이 세 번 겹쳤습니다. */

@media (max-width: 560px) {
  .replies.sowhat .reply { border-left-width: 4px; }
}

/* So what? 키워드 알약 — 댓글 줄 끝에 붙는 `종목·섹터` 표시.
   본문에서 백틱(`)으로 감싼 것이 여기로 들어옵니다.
   금색 별 즐겨찾기와 같은 색을 씁니다. */
.replies.sowhat .reply.is-sowhat .reply-body code,
.sw-card-body code {
  display: inline-block;
  background: rgba(240, 165, 0, .13);
  border: 1px solid rgba(240, 165, 0, .35);
  color: #8a5f00;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.5;
  padding: 1px 8px;
  margin: 2px 3px 0 0;
  border-radius: 999px;
  white-space: nowrap;
}

/* ★ 위 금색 규칙 «뒤»에 둔다 — 같은 무게면 뒤엣것이 이긴다. 앞에 두었더니
   3선의 키워드가 금색으로 덮여 색을 가른 뜻이 없었다(2026-09-07). */
.replies.sowhat .reply.is-also .reply-body code {
  display: inline-block;
  background: rgba(14, 138, 134, .12);
  border: 1px solid rgba(14, 138, 134, .32);
  color: #0a6360;
}

/* 「판단은 각자의 몫」 — 제목 옆 작은 글씨 */
.replies.sowhat h2 .sw-note {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: -.01em;
}
@media (max-width: 560px) {
  .replies.sowhat h2 { flex-wrap: wrap; }
  .replies.sowhat h2 .sw-note { flex-basis: 100%; margin-top: 2px; }
}

/* 분석요청 단추의 숫자 — «아직 처리 안 된 요청» 수.
   지점장에게는 전체가, PB 에게는 자기 것만 보입니다. */
.ask-cta .ask-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.ask-cta.active .ask-n { background: rgba(255, 255, 255, .92); }

/* 조렌버핏 알약(.chat-cta) — 분석요청과 같은 틀(.ask-cta)을 쓰되, 돋보기
   마스크 대신 앱 아이콘 이미지를 넣는다(2026-09-18 지점장 지시). */
.ask-cta.chat-cta::before { content: none; }
.ask-cta.chat-cta img {
  width: 20px; height: 20px;
  border-radius: 6px;
  flex: 0 0 auto;
}

/* 「So what?」 알약 — 댓글(해석)이 달린 글의 제목 뒤에 붙습니다.
   NEW 딱지와 달리 테두리만 있는 모양입니다 — NEW 는 «새것»을 알리는 신호라
   눈에 먼저 걸려야 하고, 이쪽은 «더 읽을 것이 있다»는 조용한 표시라
   제목을 이기면 안 됩니다. */
.sowhat-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  vertical-align: 2px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .sowhat-tag { margin-left: 6px; font-size: 10px; padding: 1px 6px; }
}

/* 참여공간 목록의 «올리신 분» (2026-09-04 지점장 지시).
   제목 바로 옆에 괄호로 답니다. 딱지(알약)로 만들지 않은 것은 한 줄에 이미
   게시판·완료·NEW 알약이 서 있어서입니다 — 알약이 하나 더 붙으면 제목이
   밀리고, 이름은 «표시»가 아니라 제목에 딸린 말이라 옅은 글씨가 맞습니다. */
.card-who {
  margin-left: 6px;
  color: var(--text-mid);
  font-size: .82em;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- So what? 대자보 (/b/sowhat) ---------- */
/* 글 목록이 아니라 «해석만 붙여 놓은 벽»입니다. 눌러서 들어가지 않으므로
   카드에 링크도, 「자세히 보기」도 없습니다. 제목은 «어느 글에 붙은
   해석인가»를 알려 주는 표시일 뿐입니다. */

.sw-wall {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

/* 벽도 «안 본 것 / 본 것»으로 갈립니다(2026-08-27 지점장 지시).
   구역 표(card-grid[data-zone])는 홈과 같은 것을 쓰지만, 벽은 한 줄에 한 장씩
   폅니다 — 격자로 깔면 해석 세 줄이 두 칸으로 쪼개져 읽는 흐름이 끊깁니다. */
.sw-wall.card-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 카드는 홈 카드의 읽음 알약을 그대로 쓰느라 .card 를 겸합니다.
   모양은 벽의 것을 지킵니다 — 그림자 없이 왼쪽 굵은 선만. */
.sw-note-card.card {
  box-shadow: none;
  background: #fff;
}

.sw-note-card .card-foot { margin-top: 14px; }

/* «안 본 So what?» 머리글은 탭 줄 바로 아래라 위 여백을 조금 둡니다. */
.sw-zone-head { margin-top: 26px; }

.sw-note-card {
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  background: #fff;
}

.sw-card-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.sw-card-top .cat {
  font-size: 12px;
  font-weight: 800;
  color: var(--brand-ink);
  letter-spacing: .02em;
}

.sw-card-top time { font-size: 12px; color: var(--text-dim); }

.sw-note-card h2 {
  margin: 7px 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy);
  letter-spacing: -.01em;
}

/* 제목을 눌러 원글로 갑니다(2026-08-21). 카드 전체가 아니라 제목만 링크입니다 —
   해석 본문 안의 글씨를 긁어 옮기는 데 방해가 되지 않게.

   **쉬고 있을 때도 링크로 보여야 한다.** 처음에는 hover 에서만 밑줄이 生기게
   했는데, 폰에는 hover 가 없어서 그냥 글자로 보였다(2026-08-21 지점장 제보).
   옅은 밑줄을 늘 깔고, 끝에 «›» 를 붙여 «여기 눌러 들어간다»를 알린다. */
.sw-note-card h2 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--brand-tint, #f6d7bd);
  padding-bottom: 1px;
}

.sw-note-card h2 a::after {
  content: " ›";
  color: var(--brand, #e06c00);
  font-weight: 800;
  border-bottom: 0;
}

.sw-note-card h2 a:hover,
.sw-note-card h2 a:focus-visible {
  color: var(--brand, #e06c00);
  border-bottom-color: currentColor;
}

.sw-card-body { font-size: 15px; line-height: 1.75; color: var(--text-mid); }
.sw-card-body > :first-child { margin-top: 0; }
.sw-card-body > :last-child { margin-bottom: 0; }
.sw-card-body p { margin: 0 0 10px; }
.sw-card-body strong { color: var(--navy); }

.sw-foot { margin-top: 26px; font-size: 12.5px; }

@media (max-width: 560px) {
  .sw-note-card { padding: 16px 17px; }
  .sw-note-card h2 { font-size: 15.5px; }
  .sw-card-body { font-size: 14.5px; }
}

/* ===== 조회수 알약 — 지점장 화면에만 나옵니다 =====
   목록 카드 발치와 글 제목 위에 붙습니다. 누르면 «본 사람» 명단으로 갑니다.
   브랜드색(금색·남색)을 쓰지 않습니다 — So what? 알약이나 게시판 배지와
   같은 색을 쓰면 회원에게 보이는 표시와 헷갈립니다. 이건 나만 보는 숫자입니다. */
.foot-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

@media (max-width: 560px) {
  .foot-left { gap: 6px; }
}

/* 요청함 — «다시 올려주세요» 는 지점장이 손봐야 하는 것이라 눈에 걸리게 둡니다.
   나머지 «건너뜀»(시험·중복)은 회색으로 물러나 있습니다. (2026-08-21) */
.ask-state.needfix {
  background: var(--brand-tint);
  color: var(--brand-ink);
  border: 1px solid var(--brand);
  font-weight: 700;
}

/* ==========================================================================
   검색 (2026-08-21)
   상단 이용줄의 돋보기 알약과 /search 화면.
   알약 모양은 주요뉴스·즐겨찾기와 같은 틀입니다 — 한 줄에 선 것들이
   제각각으로 보이지 않게 합니다.
   ========================================================================== */
.utility-inner a.search-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px 3px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-strong, #d8d5cd);
  color: var(--text-mid);
  font-weight: 700;
  letter-spacing: -.03em;
}

/* 돋보기 — 글자색을 따라갑니다 */
.utility-inner a.search-pill::before {
  content: "";
  width: 14px; height: 14px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.4' y1='15.4' x2='20.5' y2='20.5'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.4' y1='15.4' x2='20.5' y2='20.5'/%3E%3C/svg%3E");
}

.utility-inner a.search-pill:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* 찾는 칸 */
.search-box {
  display: flex;
  gap: 8px;
  margin: 0 0 22px;
}

.search-box input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  /* 높이를 분석요청 알약(.ask-cta, 38px)과 똑같이 맞춥니다
     (2026-09-05 지점장 지시 — «분석요청 알약 상하 사이즈랑 일치»).
     위아래 여백 11px 로 키우던 것을 height 로 못 박고 좌우 여백만 남깁니다.
     box-sizing: border-box 라 테두리를 포함한 값입니다.
     글자 16px 은 그대로 둡니다 — 이보다 작으면 아이폰이 화면을 확대합니다. */
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border-strong, #d8d5cd);
  border-radius: 10px;
  background: var(--surface, #fff);
  font: inherit;
  /* 16px 아래로 내려가면 아이폰이 화면을 확대합니다 */
  font-size: 16px;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}

.search-box input[type="search"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.search-box button {
  flex: 0 0 auto;
  height: 38px;          /* 입력칸과 같은 높이 (2026-09-05) */
  padding: 0 18px;
  border: 1px solid var(--brand);
  border-radius: 10px;
  background: var(--brand-solid);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: -.03em;
  cursor: pointer;
}

.search-box button:hover { filter: brightness(1.06); }

/* 검색창 높이는 분석요청 알약(.ask-cta)을 그대로 따라간다
   (2026-09-05 지점장 지시 — «분석요청 알약 상하 사이즈랑 일치»).
   알약이 폭에 따라 38 → 34 → 32 로 줄므로 여기서도 같이 줄인다.

   ★ 이 두 블록은 반드시 위 기본 규칙 «뒤»에 있어야 한다. 처음엔 화면 폭
   지도가 모여 있는 아래쪽 미디어쿼리(@900 · @560)에 넣었는데, 그 자리가
   기본 .search-box 규칙보다 앞줄이라 뒤엣것에 밀려 아무 효과가 없었다
   (2026-09-05 실측 — 800px·375px 에서 38px 그대로였다). */
@media (max-width: 900px) {
  .search-box input[type="search"], .search-box button { height: 34px; }
}

@media (max-width: 560px) {
  /* 글자는 16px 그대로 둔다 — 줄이면 아이폰이 화면을 확대한다. */
  .search-box input[type="search"], .search-box button { height: 32px; }
}

.search-more {
  margin: -6px 0 16px;
  font-size: 13.5px;
  color: var(--text-dim);
}

/* 좁은 화면 — 종모양과 같이 글자를 빼고 돋보기만 남깁니다 */
@media (max-width: 560px) {
  .utility-inner a.search-pill {
    font-size: 0; gap: 0; padding: 3px 7px;
  }
  .utility-inner a.search-pill::before { width: 15px; height: 15px; }
}

/* PB 관리 — 이름으로 찾기 (2026-08-21)
   서른아홉 줄을 눈으로 훑지 않게, 이름 두 글자로 바로 걸러 냅니다.
   화면에 이미 그려진 줄을 숨겼다 보였다 하는 것이라 서버에 다시 묻지 않습니다. */
.member-find {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}

.member-find input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 320px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong, #d8d5cd);
  border-radius: 9px;
  background: var(--surface, #fff);
  font: inherit;
  font-size: 15px;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}

.member-find input[type="search"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.member-gt-pills {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.gt-pill {
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1px solid var(--border-strong, #d8d5cd);
  border-radius: 999px;
  background: var(--surface, #fff);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
}

.gt-pill:hover { border-color: var(--brand); color: var(--text); }

.gt-pill.active {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-ink, var(--brand));
}

.member-find-n {
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dim);
}

@media (max-width: 560px) {
  .member-find { flex-wrap: wrap; }
  .member-find input[type="search"] { max-width: none; font-size: 16px; flex: 1 1 100%; }
  .member-gt-pills { flex-wrap: wrap; }
  .gt-pill { font-size: 14px; padding: 8px 14px; }
}

/* 홈 조회 칸 — 도구모음 돋보기를 거치지 않고 첫 화면에서 바로 찾습니다(2026-08-22).
   .search-box 는 검색 화면과 같은 모양을 씁니다. 여백만 홈에 맞게 다시 잡습니다. */
.home-search { margin: 2px 0 26px; }
.home-search .search-box { margin: 0; }

@media (max-width: 720px) {
  .home-search { margin: 0 0 20px; }
}

/* ── 읽음 알약 ─────────────────────────────────────────────────────────
   목록 카드 발치, 조회수와 «자세히 보기» 사이에 붙습니다.
   적힌 말은 «지금 상태»입니다 — 읽은 글에는 「읽음」이, 안 읽은 글에는
   「안읽음」이 보입니다. (2026-09-04 지점장 지시로 동작형 라벨에서 되돌림 —
   그전엔 «누르면 무엇이 되는가»를 적었었다.) 누르면 상태가 뒤집히는 동작은
   그대로다. 조회수 알약과 같은 무채색을 씁니다. 브랜드색은 «읽을 거리»를
   가리키는 표시에만 쓰고, 이건 내가 찍는 표시라 조용해야 합니다.
   단, «안읽음»(기본 상태)만은 예외로 브랜드색 음영을 입힙니다 — «아직 안 읽었다»가
   눈에 띄어야 훑다가 빠뜨리지 않는다는 지점장 요청(2026-09-04). 「읽음」이 되면
   무채색으로 가라앉는다. */
.read-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.read-pill.on {
  border-color: var(--border);
  background: transparent;
  color: var(--text-mid);
}
.read-pill::before { content: "\25CB"; font-size: 10px; opacity: .75; }
.read-pill.on::before { content: "\2713"; }
.read-pill:hover { border-color: var(--brand-ink); color: var(--brand-ink); }
.read-pill.on:hover { border-color: var(--text-mid); color: var(--text); }
.read-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.read-pill:disabled { opacity: .5; cursor: default; }

/* 카드 전체를 덮는 투명 링크(.card-link::after, z-index:1) 위로 올립니다.
   안 올리면 알약을 눌러도 글로 넘어가 버립니다 — 조회수·별과 같은 처리입니다. */
.card .read-pill { position: relative; z-index: 2; }
.card .read-pill.on:hover { background: var(--surface, var(--bg-alt)); }

@media (max-width: 560px) {
  .read-pill { font-size: 10px; padding: 1px 6px; }
}

/* «읽은 글» 구역으로 옮겨 간 카드에서는 NEW 를 지웁니다.
   NEW 는 «올라온 지 얼마 안 된 + 아직 안 읽은» 글이라는 뜻이라, 읽음으로 찍어
   구역을 옮긴 카드에 그대로 남아 있으면 말이 어긋납니다. 서버가 그릴 때도
   읽은 글에는 안 붙이므로(fresh_ok=False), 화면에서 옮겼을 때만 쓰이는 규칙입니다. */
.card-grid[data-zone="read"] .new-tag { display: none; }

/* 비어 있는 구역은 hidden 으로 감춥니다. card-grid 는 grid 라서 display 를
   덮어쓰지 않으면 hidden 이 먹지 않습니다. */
.card-grid[hidden], .read-head[hidden], .all-read[hidden] { display: none; }

/* ==========================================================================
   클로드 데스크 (2026-08-23 지점장 지시)
   즉답이 필요 없는 일을 맡겨 두는 채팅방. 지점장에게만 보입니다.
   모양은 카카오톡 대화방을 따랐습니다 — 지점장이 매일 보시는 화면이라
   설명 없이도 «여기에 말을 남기면 되는구나»가 바로 읽힙니다.
   ========================================================================== */

/* 이용줄의 알약 — 글자 없이 클로드 마크만.
   좁은 줄에 글자까지 넣으면 알약이 길어져 휴대폰에서 줄이 넘어갑니다. */
.utility-inner a.claude-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #f0d3c6;
}

/* 2026-09-14 지점장 지시 — 조실장 글자를 독립 앱 아이콘으로 바꾼다. */
.utility-inner a.claude-pill {
  width: 30px;
  height: 26px;
  padding: 2px;
}

.utility-inner a.claude-pill img {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: cover;
}

.utility-inner a.claude-pill:hover {
  background: #fdf4f0;
  border-color: #d97757;
}

/* 아직 못 보신 답이 있다는 표시. 숫자가 아니라 점입니다 —
   몇 개인지보다 «볼 게 있나»가 알고 싶은 자리입니다. */
.utility-inner a.claude-pill .dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
  border: 1.5px solid #fff;
}

:root {
  --claude-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.00 9.80L12.00 1.80M13.19 10.15L16.54 4.93M14.00 11.09L21.28 7.76M14.18 12.31L20.31 13.20M13.66 13.44L19.71 18.68M12.62 14.11L14.37 20.06M11.38 14.11L9.13 21.79M10.34 13.44L5.65 17.50M9.82 12.31L1.90 13.45M10.00 11.09L4.36 8.51M10.81 10.15L6.49 3.42' stroke='%23000' stroke-width='2.7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

@media (max-width: 720px) {
  .utility-inner a.claude-pill { padding: 2px; }
}

/* 유튜브 채널 바로가기 — 글자 없이 공식 재생 아이콘만 보인다. */
.utility-inner a.youtube-channel-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 26px;
  padding: 2px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #f0caca;
}

.utility-inner a.youtube-channel-pill::before {
  content: "";
  width: 22px;
  height: 16px;
  border-radius: 5px;
  background: #ff0033;
}

.utility-inner a.youtube-channel-pill::after {
  content: "";
  position: absolute;
  margin-left: 2px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #fff;
}

.utility-inner a.youtube-channel-pill:hover {
  background: #fff5f5;
  border-color: #ff0033;
}

/* 메모앱 바로가기 — 클로드 알약과 같은 틀, 노트 아이콘만 */
.utility-inner a.memo-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d7e0ee;
}

/* 2026-09-12 지점장 지시 — 노트 아이콘 대신 «메모» 글자만 세운다.
   아이콘은 무엇인지 한 번 배워야 알지만 글자는 바로 읽힌다. */
.utility-inner a.memo-pill {
  padding: 3px 12px;
  color: #2f6be0;
  font-weight: 700;
  letter-spacing: -.03em;
}

.utility-inner a.memo-pill:hover {
  background: #eef3fc;
  border-color: #2f6be0;
}

:root {
  --memo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cline x1='8' y1='8' x2='16' y2='8'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3Cline x1='8' y1='16' x2='12.5' y2='16'/%3E%3C/svg%3E");
}

@media (max-width: 720px) {
  .utility-inner a.memo-pill { padding: 3px 7px; }
  .utility-inner a.memo-pill::before { width: 14px; height: 14px; }
}

/* 작업실 바로가기 — 조실장 옆에 같은 크기의 독립 앱 아이콘으로 둡니다. */
.utility-inner a.work-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 2px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d4dbe6;
}

.utility-inner a.work-pill img {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: cover;
}

.utility-inner a.work-pill:hover {
  background: #eef1f6;
  border-color: #1c3a63;
}

/* 월간조혁진 포트폴리오 — 지점장 전용 주식 아이콘 알약. */
.utility-inner a.portfolio-pill,
.topbar-ctas a.portfolio-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; padding: 0;
  border: 1px solid #b8c9bd; border-radius: 999px;
  color: #31754b; background: #f3faf5; flex: 0 0 auto;
}
.utility-inner a.portfolio-pill span,
.topbar-ctas a.portfolio-pill span {
  width: 15px; height: 15px; background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19h16v2H2V3h2v16zm3-2H5v-5h2v5zm4 0H9V8h2v9zm4 0h-2v-7h2v7zm4 0h-2V5h2v12z'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19h16v2H2V3h2v16zm3-2H5v-5h2v5zm4 0H9V8h2v9zm4 0h-2v-7h2v7zm4 0h-2V5h2v12z'/%3E%3C/svg%3E");
}
.utility-inner a.portfolio-pill:hover,
.topbar-ctas a.portfolio-pill:hover { color: #fff; background: #31754b; border-color: #31754b; }

.portfolio-view { max-width: 700px; margin: 0 auto; padding: 16px 2px 28px; text-align: left; }
.pf-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pf-summary span { color: var(--text-mid); font-size: 13px; font-weight: 700; }
.pf-summary b { color: var(--navy); font-size: 18px; }
.pf-note { margin: 7px 0 18px; color: var(--text-mid); font-size: 13px; }
.pf-sector { margin: 0 0 16px; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.pf-sector header { display: flex; justify-content: space-between; align-items: center; }
.pf-sector header b { color: var(--navy); font-size: 15px; }
.pf-sector header strong { color: #31754b; font-size: 15px; }
.pf-bar { height: 6px; margin: 9px 0 10px; overflow: hidden; border-radius: 99px; background: #e8ede9; }
.pf-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#77a987,#31754b); }
.pf-sector ul { list-style: none; margin: 0; padding: 0; }
.pf-sector li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pf-sector li:last-child { border-bottom: 0; }
.pf-sector li small { color: var(--text-dim); font-size: 11px; }
.pf-sector li em { color: var(--text-mid); font-style: normal; font-variant-numeric: tabular-nums; }
.pf-total { margin: 0 0 18px; padding: 14px 15px; border-radius: 14px; color: #fff; background: #1c3a63; }
.pf-total > div,.pf-sector-return { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 9px; }
.pf-total span,.pf-sector-return span { display: flex; flex-direction: column; gap: 2px; }
.pf-total small,.pf-sector-return small { font-size: 10px; opacity: .72; }
.pf-total b,.pf-sector-return b { font-size: 13px; font-variant-numeric: tabular-nums; }
.pf-sector-return { margin-bottom: 9px; color: var(--navy); }
.pf-head,.pf-sector li { display: grid; grid-template-columns: minmax(120px,1fr) 42px repeat(4,54px); align-items: center; gap: 5px; }
.pf-head { padding: 4px 0; color: var(--text-dim); font-size: 10px; text-align: right; }
.pf-head span:first-child { text-align: left; }.pf-head em { font-style: normal; }
.pf-ret { text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.pf-ret.up { color: #c94747; }.pf-ret.down { color: #3478b8; }
.pf-source { margin: 4px 2px 0; color: var(--text-dim); font-size: 11px; text-align: right; }

@media (max-width: 560px) {
  .portfolio-view { overflow-x: auto; }
  .pf-sector { min-width: 470px; }
}

:root {
  --work-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='2.5' y1='12.5' x2='21.5' y2='12.5'/%3E%3C/svg%3E");
}

@media (max-width: 720px) {
  /* 작업실도 조실장과 같은 아이콘 알약 크기를 유지한다. */
  .utility-inner a.work-pill { padding: 2px; }
}

/* ---- 방 ---------------------------------------------------------------- */

/* 방 전체를 한 화면에 담습니다 — 입력줄이 접혀 내려가면 지점장이 글을 쓰려고
   스크롤을 내려야 합니다. 대화는 안에서 구르고, 입력줄은 늘 바닥에 붙어 있습니다.
   dvh 는 휴대폰 주소창이 접혔다 펴져도 높이가 튀지 않게 합니다. */
.kdesk {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* 아래 값은 «자바스크립트가 막혔을 때»의 어림값입니다. 평소에는 화면에
     남은 높이를 실제로 재서 맞춥니다(화면 스크립트의 fit()) — 상단 메뉴 높이가
     기기마다 다르고, 휴대폰에서는 데스크톱의 두 배가 넘기 때문입니다. */
  height: calc(100vh - 170px);
  height: calc(100dvh - 170px);
  min-height: 300px;
}

.kdesk.kdesk-drop {
  outline: 2px dashed #d97757;
  outline-offset: -4px;
}

.kchat {
  background: #b2c3d4;                       /* 카톡 대화방 바탕 */
  border-radius: 14px;
  padding: 14px 12px;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 0;                             /* 안 주면 flex 가 안 줄어듭니다 */
  overflow-y: auto;
  /* overflow-y:auto 만 쓰면 사파리가 overflow-x 도 auto 로 계산해 대화판을
     옆으로 밀 수 있습니다. 세로 대화방이므로 가로 이동은 처음부터 막습니다. */
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;              /* 끝까지 굴러도 페이지가 안 딸려갑니다 */
  -webkit-overflow-scrolling: touch;
}

/* 날짜 구분선 */
.kday { text-align: center; margin: 12px 0 14px; }
.kday span {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .16);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.kmsg { display: flex; gap: 8px; margin-bottom: 12px; width: 100%; min-width: 0; }
.kmsg[hidden] { display: none; }   /* 2026-09-12 — 필터가 hidden 을 켜도 위 display:flex 가
   같은 우선순위로 이겨 안 숨었다(.kack-box 필터 눌러도 반응 없던 원인) */
.kmsg .kbody { max-width: 81%; min-width: 0; }   /* 2026-09-11 지점장 지시 — 90%에서 10% 줄임(2026-09-06엔 78%→90%로 넓혔었음) */
.kmsg .kline { display: flex; align-items: flex-end; gap: 5px; min-width: 0; max-width: 100%; }
.kmsg time { font-size: 11px; color: rgba(0, 0, 0, .5); white-space: nowrap; }

.kbubble {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 20px;      /* 2026-09-20 지점장 지시 — 조실장·조렌버핏 대화창 통일 */
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* 클로드 — 왼쪽, 흰 말풍선 */
.kmsg.claude .kavatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #d97757;
}
.kmsg.claude .kavatar::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-mask: var(--claude-mask) center / 20px 20px no-repeat;
  mask: var(--claude-mask) center / 20px 20px no-repeat;
}
.kmsg.claude .kwho {
  display: block;
  margin: 0 0 4px 2px;
  font-size: 12px;
  font-weight: 700;
  color: #37414d;
}
.kmsg.claude .kbubble { background: #fff; color: #1c2530; }

/* 지점장 — 오른쪽, 노란 말풍선 */
.kmsg.me { justify-content: flex-end; }
.kmsg.me .kbubble { background: #fbe64d; color: #1c2530; }

/* 아직 클로드가 집어 가지 않은 말. 남겼는데 조용하면 «전달이 안 됐나» 싶어지는데,
   그게 아니라 아직 루틴이 안 돌았을 뿐이라는 것을 알려 줍니다. */
.kwait {
  align-self: flex-end;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #6b4a12;
  background: rgba(255, 255, 255, .7);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

.kempty {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  color: rgba(0, 0, 0, .45);
  font-size: 14px;
  line-height: 1.7;
}

/* ---- 입력줄 ------------------------------------------------------------ */

.kcompose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.kcompose textarea {
  flex: 1 1 auto;
  resize: none;
  padding: 11px 14px;
  border-radius: 20px;
  border: 1px solid var(--line, var(--border));
  background: #f2f4f6;
  font: inherit;
  font-size: 18px;      /* 2026-09-20 지점장 지시 — 세 대화앱 입력창 통일 */
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
}
.kcompose textarea:focus {
  outline: none;
  border-color: #d97757;
  background: #fff;
}

.kcompose .ksend {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #d97757;
  cursor: pointer;
}
.kcompose .ksend::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-mask: var(--send-mask) center / 18px 18px no-repeat;
  mask: var(--send-mask) center / 18px 18px no-repeat;
}
.kcompose .ksend:hover { background: #c9663f; }

/* 사진 추가 — 입력칸 왼쪽(2026-09-05 지점장 지시). 보내기 단추와 크기를
   맞추되 «거드는 단추»라 색을 채우지 않습니다. 고른 장수는 오른쪽 위에
   작은 방울로 붙습니다 — 골랐는지 안 골랐는지가 안 보이면 또 누릅니다. */
.kcompose .kshotbtn {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line, var(--border));
  background: #f2f4f6;
  cursor: pointer;
}
.kcompose .kshotbtn::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #6b7480;
  -webkit-mask: var(--shot-mask) center / 20px 20px no-repeat;
  mask: var(--shot-mask) center / 20px 20px no-repeat;
}
.kcompose .kshotbtn:hover { background: var(--border); }
.kcompose .kshotbtn[data-n]:not([data-n=""]) { border-color: #d97757; }
.kcompose .kshotbtn[data-n]:not([data-n=""])::before { background: #d97757; }
.kcompose .kshotbtn[data-n]:not([data-n=""])::after {
  content: attr(data-n);
  position: absolute;
  top: -3px; right: -3px;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #d97757;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* 말풍선에 얹힌 사진 */
.kshots { display: block; }
.kshots .kshot { display: block; margin-bottom: 4px; }
.kshots .kshot:last-child { margin-bottom: 0; }
.kshots img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 8px;
}

/* 조실장이 답에 붙인 파일 — 파일명 한 줄이 링크 (2026-09-07 지점장 지시로
   «바로보기»·«저장하기» 두 단추를 없애고 파일명 하나로 줄였습니다) */
.kfiles { display: block; }
.kfile {
  padding: 7px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
}
.kfile:last-child { margin-bottom: 0; }
.kfname {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text);
  text-decoration: underline;
}
.kfname:hover { color: var(--brand-ink, #a34400); }

:root {
  --send-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 20.4L21 12 3.4 3.6 3.4 10.1 15.6 12 3.4 13.9z'/%3E%3C/svg%3E");
  --shot-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3l-1.5 2H4a2 2 0 00-2 2v11a2 2 0 002 2h16a2 2 0 002-2V7a2 2 0 00-2-2h-3.5L15 3H9zm3 5.5A4.5 4.5 0 1112 17.5a4.5 4.5 0 010-9zm0 2a2.5 2.5 0 100 5 2.5 2.5 0 000-5z'/%3E%3C/svg%3E");
  --headset-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h4c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z'/%3E%3C/svg%3E");
}

@media (max-width: 720px) {
  .kdesk { height: calc(100vh - 210px); height: calc(100dvh - 210px); }
  .kchat { padding: 12px 10px; border-radius: 12px; }
  .kmsg .kbody { max-width: 85%; }  /* 폰 — 2026-09-11 지점장 지시, 94%에서 10% 줄임(2026-09-06엔 82%→94%로 넓혔었음) */
  /* 폰에서만 14.5px 로 줄이던 것을 없앴습니다 — 작을 이유가 없습니다(2026-09-06). */
}

/* ==========================================================================
   조렌버핏 (2026-09-02 지점장 지시)
   PB·지점장이 매크로 자료에 묻는 방. 방(.kdesk 안쪽)은 클로드 데스크와 같은
   틀을 그대로 씁니다 — 이미 다들 아는 카톡 모양이라 설명이 필요 없습니다.
   위쪽 머리(.chat-head)만 나침반 바늘 로고로 이 방만의 것을 붙였습니다.
   ========================================================================== */

:root {
  --navi-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpolygon points='12,5 15.6,12 12,19 8.4,12'/%3E%3C/svg%3E");
}

/* 이용줄의 알약 — 클로드 알약과 같은 자리. 채팅창 안 아바타(.kmsg.navi
   .kavatar)와 같은 «그라디언트 배지 위 흰 아이콘» 을 점선 알약에 담되,
   «챗봇» 글자를 옆에 남깁니다(2026-09-03 지점장 지시 — 마크만으로는
   무슨 알약인지 안 보인다고). */
.utility-inner a.chat-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  border-radius: 999px;
  background: #fff;
  /* 이웃 알약(클로드·메모·즐겨찾기)이 전부 실선이라 점선은 혼자 튄다 —
     점선 테두리는 «아직 안 만들어진 자리»로 읽힌다(2026-09-03 지점장 지적). */
  border: 1px solid #eec9a4;
  color: var(--brand-ink);
  font-weight: 700;
  /* 본문 줄높이(1.7)를 그대로 물려받으면 글자 줄상자가 마크보다 커져
     알약이 이웃보다 6px 높아진다. 이 알약은 한 줄짜리라 1로 눌러 둔다. */
  line-height: 1;
}
/* 마크 크기는 이웃의 15px 아이콘에 맞춘다. 채운 원이라 같은 15px면 더 커
   보이므로 17px로 둔다 — 20px일 때는 알약 높이가 이웃보다 5px 높아
   이용줄이 울퉁불퉁했다. */
.utility-inner a.chat-pill .badge {
  /* 이 마크는 style.css 앞쪽의 «일반 .badge»(글 목록 라벨)와 클래스 이름이
     같아 그 값을 함께 물려받는다. 좌우 여백 11px 이 동그라미를 타원으로
     늘리고 margin-bottom 12px 이 알약을 혼자 14px 높였다(2026-09-03 지점장
     «어색하네» 의 실제 원인). 여기서 눌러 둔다. */
  padding: 0;
  margin: 0;
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffab5e 0%, #f2617e 100%);
}
.utility-inner a.chat-pill .badge::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  background: #fff;
  -webkit-mask: var(--navi-mask) center / contain no-repeat;
  mask: var(--navi-mask) center / contain no-repeat;
}
.utility-inner a.chat-pill:hover { background: var(--brand-tint); border-color: var(--brand); }
.utility-inner a.chat-pill .dot {
  position: absolute;
  top: -2px;
  left: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
  border: 1.5px solid #fff;
}
@media (max-width: 720px) {
  .utility-inner a.chat-pill { padding: 3px 8px 3px 3px; gap: 5px; font-size: 12px; }
  .utility-inner a.chat-pill .badge { width: 16px; height: 16px; }
  .utility-inner a.chat-pill .badge::before { width: 10px; height: 10px; }
  .utility-inner a.chat-pill .dot { left: 12px; }
}

/* 조렌버핏 답 — 상단과 같은 새 앱 아이콘으로 통일합니다. */
.kmsg.navi .kavatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: url("/static/icon-180-navi-20260913.png") center / contain no-repeat;
}
.kmsg.navi .kavatar::before {
  content: none;
}
.kmsg.navi .kwho {
  display: block;
  margin: 0 0 4px 2px;
  font-size: 12px;
  font-weight: 700;
  color: #37414d;
}
.kmsg.navi .kbubble { background: #fff; color: #1c2530; }

/* 페이지 머리 — 나침반 로고 + 제목 + 안내문. */
.chat-page { max-width: 720px; margin: 0 auto; }

/* 지점장 전용 하위 화면(/chat/all, /chat/room/…)에서만 씁니다 — 단독
   페이지라 사이트 이용줄이 없으니, 오갈 자리를 이 작은 글자 하나로 둡니다. */
.chat-back {
  display: inline-block;
  margin: 0 0 14px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.chat-back:hover { color: var(--brand-ink); }
/* 스크롤이 생겨도 위에 고정됩니다(2026-09-02 지점장 지시) — 배경을
   깔아 둬야 밑에 깔린 대화가 비쳐 보이지 않습니다. */
.chat-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 2px 16px;
  flex-wrap: wrap;
}
.chat-mark {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--brand);
  position: relative;
}
.chat-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 26px;
  height: 26px;
  background: #fff;
  -webkit-mask: var(--navi-mask) center / contain no-repeat;
  mask: var(--navi-mask) center / contain no-repeat;
}
.chat-mark.chat-app-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: url("/static/icon-180-navi-20260913.png") center / contain no-repeat;
}
.chat-mark.chat-app-icon::before { display: none; }
.chat-head-text { flex: 1 1 220px; min-width: 0; }
.chat-head-title { display: flex; align-items: baseline; gap: 8px; }
.chat-head-text h2 {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
}
.chat-head-text p { margin: 0; font-size: 13px; color: var(--text-dim); }

/* 내역 — 지점장 전용, 제목 오른쪽(2026-09-02 지점장 지시). PB 눈에는
   is_admin 이 아니면 아예 안 그려집니다. */
.chat-hist-btn {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}
.chat-hist-btn:hover { color: var(--brand-ink); border-color: var(--brand-ink); }

/* 종 — 조렌버핏 머리줄 오른쪽 끝(2026-09-02 지점장 지시). push-bell 은
   /push 화면과 같은 크기(44px)인데, 여기는 옆에 이미 44px 로고가 있어
   살짝 줄입니다. margin-left:auto 로 줄바꿈 없이도 늘 오른쪽 끝입니다. */
.chat-head .push-bell { width: 38px; height: 38px; margin-left: auto; flex: 0 0 auto; }
.chat-head .push-bell-ico { width: 18px; height: 18px; }
.chat-refresh {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-ink);
  cursor: pointer;
}
.chat-refresh:hover { border-color: var(--brand); background: var(--brand-tint); }
.chat-refresh:active { transform: rotate(20deg); }

/* 지점장 전용 — PB 방 목록 (/chat/all) */
.chat-room-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.chat-room-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.chat-room-row:last-child { border-bottom: none; }
.chat-room-row:hover { background: var(--bg-alt); }
.chat-room-name { flex: 0 0 auto; font-size: 14px; color: var(--text); }
.chat-room-name b { font-weight: 700; }
.chat-room-snip {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-dim);
}
.chat-room-row time { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); }

@media (max-width: 720px) {
  .chat-mark { width: 38px; height: 38px; border-radius: 12px; }
  .chat-mark::before { width: 22px; height: 22px; }
  .chat-head-text h2 { font-size: 18px; }
  .chat-room-snip { display: none; }  /* 좁은 화면에서는 이름·시각만 */
}

/* 소홧 벽 «첨삭 모아보기» — 지점장에게만 붙는 단추. 제목 옆(aside 자리)에 선다. */
.sw-fixed-btn { align-self: center; white-space: nowrap; }

/* ── 글 안에서 여는 «간단 분석요청» 팝업 (2026-08-27 지점장 지시) ──────────
   .modal-back 은 display:flex 라 hidden 속성만으로는 안 숨습니다.
   이 한 줄이 없으면 글을 열자마자 팝업이 떠 있습니다. */
.modal-back[hidden] { display: none; }

.qask-card {
  max-width: 460px;
  text-align: left;
  padding: 24px 22px 20px;
}

.qask-src {
  margin: 6px 0 16px;
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qask-kinds { display: flex; gap: 8px; margin-bottom: 12px; }

/* 라디오 단추는 감추고 글자 알약만 보입니다 — 고른 쪽이 남색으로 찹니다 */
.qask-kind input { position: absolute; opacity: 0; pointer-events: none; }

.qask-kind span {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--text-mid);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}

.qask-kind input:checked + span {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.qask-kind input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.qask-form textarea,
.qask-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 15px;             /* 아이폰에서 16px 미만이면 화면이 확대됩니다 */
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  resize: vertical;
}

.qask-form textarea:focus,
.qask-form input[type="text"]:focus {
  outline: none;
  border-color: var(--brand);
}

.qask-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.qask-more {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.qask-more:hover { color: var(--brand); }
.qask-btns { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 480px) {
  .qask-card { padding: 20px 16px 16px; }
  .qask-foot { flex-direction: column; align-items: stretch; }
  .qask-more { order: 2; text-align: center; }
  .qask-btns { margin-left: 0; order: 1; }
  .qask-btns .btn { flex: 1; text-align: center; }
}

/* 종류가 다섯이 되면서 칩이 한 줄에 안 들어갑니다 — 접히게 둡니다
   (2026-08-27 지점장 지시로 주소 칸·파일 붙이기를 넣으며 같이 손봤습니다) */
.qask-kinds { flex-wrap: wrap; }
.qask-card { max-width: 480px; }

/* 고른 종류에 없는 칸은 hidden 으로 지웁니다. input 은 기본이 inline-block 이라
   hidden 만으로 사라지지만, 여백까지 확실히 없애려고 못을 박아 둡니다. */
.qask-form [hidden] { display: none !important; }

.qask-form input[name="url"] { margin-bottom: 10px; }

.qask-file {
  display: block;
  margin: 0 0 10px;
  padding: 11px 13px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-mid);
  cursor: pointer;
}

.qask-file .sub { color: var(--text-dim); font-size: 12px; }
.qask-file input[type="file"] { display: block; margin-top: 8px; font-size: 12.5px; max-width: 100%; }
.qask-file.is-drop { border-color: var(--brand); background: var(--brand-tint); }

/* 클로드 데스크 팝업 — 분석요청 팝업과 같은 틀(.modal-back/.modal-card)에
   대화방(.kdesk)을 담습니다. .kdesk 는 원래 «화면 전체 페이지»를 기준으로
   높이를 잡던 것이라, 팝업 안에서는 카드 자신의 크기로 다시 잡습니다. */
.qdesk-card {
  max-width: 560px;
  text-align: left;
  padding: 22px 20px 18px;
}
.qdesk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.qdesk-head .modal-title { text-align: left; }
.qdesk-card .kdesk {
  max-width: none;
  margin: 0;
  height: min(64vh, 560px);
  height: min(64dvh, 560px);
  min-height: 280px;
}
@media (max-width: 560px) {
  .qdesk-card { padding: 18px 14px 14px; }
  .qdesk-card .kdesk { height: min(70vh, 560px); height: min(70dvh, 560px); }
}

/* 메모장·작업방 팝업 — 같은 .modal-back/.modal-card 틀에 그 앱 화면을 통째로
   iframe 으로 겁니다(2026-09-08 지점장 지시). 대화가 아니라 화면이라 qdesk보다
   넓고 높게 잡습니다 — 메모장·작업실 자체가 스크롤이 긴 화면입니다. */
.app-popup-card {
  width: min(560px, 92vw);
  height: min(82vh, 82dvh, 720px);
  max-width: 560px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
}
/* 홈 «내 게시판» 팝업은 한 크기로 통일한다(2026-09-14, 2026-09-17 재조정).
   590px에서 100px 줄여 490px로 했다가, 2026-09-18 지점장 지시로 위는 그대로 두고
   아래로 200px 늘려 690px로 했다(「상단은 고정하고 하단으로 200px 늘려줘」). 위치는 화면 가운데에서 임의로 띄우던
   방식(translateY) 대신 align-self: flex-start + margin-top 으로 고정한다.
   .modal-back 의 padding-top(24px)까지 음수 margin 으로 지워, 상단 고정막대
   (.utility)를 지나 로고 라인까지 올라오게 한다(2026-09-17 재조정). */
.app-popup-card.home-board-popup {
  height: min(690px, calc(100vh - 48px));
  height: min(690px, calc(100dvh - 48px));
  align-self: flex-start;
  margin-top: -24px;
}
.app-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.app-popup-head-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app-popup-head .modal-title { text-align: left; }
.app-popup-refresh {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-ink);
  cursor: pointer;
}
.app-popup-refresh:hover { border-color: var(--brand); background: var(--brand-tint); }
.app-popup-refresh:active { transform: rotate(20deg); }
.app-popup-card iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #fff;
}
@media (max-width: 560px) {
  .app-popup-card { width: 96vw; height: min(88vh, 88dvh); }
  .app-popup-card.home-board-popup {
    height: min(690px, calc(100vh - 32px));
    height: min(690px, calc(100dvh - 32px));
    align-self: flex-start;
    margin-top: -24px;
  }
  .app-popup-head { padding: 12px 14px; }
}

/* 조회수 팝업 — 본 사람 명단을 페이지 이동 없이 보여준다(2026-08-27). */
.views-modal-card {
  max-width: 560px;
  text-align: left;
  position: relative;
  max-height: 82vh;
  overflow-y: auto;
}
.views-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2, #f4f1ea);
  color: var(--text-mid);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.views-modal-close:hover { background: var(--border); }
.views-modal-card .modal-title { display: block; margin-bottom: 6px; padding-right: 30px; }
.views-modal-card .modal-text { text-align: left; }
.views-modal-card table { font-size: 14px; }


/* ===== 폰에서 입력칸 글자를 16px 로 (2026-08-28) =====
   핀치 줌을 막으면서 같이 넣어야 하는 짝입니다.
   아이폰은 글자가 16px 보다 작은 입력칸을 누르면 «읽으라고» 저절로 확대합니다.
   평소엔 손가락을 오므려 되돌아 나오면 됐는데, 이제 확대를 막아 놨으므로
   그 길이 없습니다 — 확대된 채로 갇힙니다. 그래서 애초에 확대가 안 일어나게
   16px 로 올려 둡니다. 15.5px 과 16px 은 폰에서 눈으로 구분되지 않습니다.

   !important 인 이유 — 위쪽 규칙들(.editor textarea 등)이 선택자가 더 세서
   그냥 뒤에 적는 것만으로는 지지 않습니다. 이건 «디자인»이 아니라
   기기 동작을 막는 안전장치라 세게 둡니다.
   폰(620px 이하)에서만 적용되므로 맥 화면은 그대로입니다. */
@media (max-width: 620px) {
  input[type="text"], input[type="search"], input[type="password"],
  input[type="email"], input[type="number"], input[type="tel"],
  input[type="url"], input[type="date"], input[type="datetime-local"],
  input:not([type]), textarea, select {
    font-size: 16px !important;
  }

  /* 조실장·조렌버핏 입력칸은 18px — 위 16px 안전장치보다 세게 두어야 이긴다
     (2026-09-20 지점장 지시). 16보다 크므로
     확대 걱정은 없다. */
  .kcompose textarea {
    font-size: 18px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   「내 게시판」 — 홈 맨 위에 그 사람이 볼 게시판만 (2026-09-04 지점장 지시)

   게시판이 38개라 폰에서 목적지까지 가는 길이 멀었다. 자주 보는 4~6개를
   먼저 깔고 나머지는 「전체」 안으로 접는다.

   **2026-09-04 지점장 지시로 PC 에서도 켰다** («PC 버전에서도 동일하게»).
   그전에는 폰 전용이었다 — PC 는 상단 메가메뉴로 찾으니 두 번 둘 필요가
   없다고 봤던 것인데, 「내 게시판」은 «찾는 길»이 아니라 «내가 고른 것»이라
   메가메뉴가 대신하지 못한다.

   아래 블록을 «@media all» 로 두는 것은 일부러다. 규칙 150줄을 통째로
   밖으로 들어내면(중괄호를 옮기면) 관계없는 것이 딸려 나가기 쉽다 —
   조건만 바꾸면 괄호가 그대로라 그럴 일이 없다. 화면 폭에 따라 달라져야
   하는 것은 아래 «(min-width: 561px)» 블록에만 적는다.
   (서버는 화면 폭을 모르므로 마크업은 늘 보낸다. 2.5KB 남짓이다.)         */

@media all {
  .hb-wrap { display: block; margin: 0 0 26px; }
  .hb-head { margin-bottom: 12px; }

  /* 두 칸 격자. 칸 자신에 min-width:0 을 준다 — 안 주면 긴 게시판 이름이
     칸을 밀어 넓혀 격자가 화면 밖으로 삐져나간다(css-grid-minwidth-trap). */
  .hb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .hb-tools {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .hb-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    min-height: 66px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-decoration: none;
    position: relative;
  }
  .hb-card .hb-sub {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hb-card b {
    font-size: 14.5px;
    color: var(--navy);
    line-height: 1.35;
    word-break: keep-all;
  }
  .hb-tools .hb-card.hb-tool {
    justify-content: center;
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
  }
  .hb-tools .hb-card.hb-tool b {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }
  /* 2026-09-21 — 모바일 home-flow.css 에만 있던 제한을 공통 규칙으로
     올립니다. PC·태블릿에서는 앱 아이콘(192px)과 viewBox SVG가 원본 크기로
     늘어나 카드 행을 화면 높이만큼 밀어내고 있었습니다. */
  .hb-tools .hb-card.hb-tool img,
  .hb-tools .hb-card.hb-tool svg {
    display: block;
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    flex: 0 0 20px;
  }
  .hb-tools .hb-card.hb-tool img { border-radius: 6px; object-fit: cover; }

  /* 새 글이 있는 게시판 — 홈의 «읽지 않은 글»과 같은 옅은 주황으로 맞춘다.
     숫자를 세지 않는 것은 뜻이 있다: 아래 「읽지 않은 글」이 이미 숫자를
     보여 주므로 여기서 또 세면 같은 말을 두 번 한다. */
  .hb-card.has-new {
    border-color: var(--brand);
    background: var(--brand-tint);
  }
  .hb-card.has-new::after {
    content: "";
    position: absolute;
    top: 9px; right: 9px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand);
  }

  /* ── 고정 두 칸 (2026-09-08 지점장 지시)
     왼쪽 «읽지 않은 글» · 오른쪽 «지점장 즐겨찾기». 회원이 못 바꾸는 자리라
     아래 네 칸과 눈으로 갈라 둔다 — 옅은 바탕에 실선 테두리다.
     지우는 «+» 도 안 붙는 자리이므로, 왜 안 바뀌는지 그림으로 먼저 읽힌다. */
  /* ── 고정 두 칸 (New·Hot) — 2026-09-08 지점장 지시
     **크기는 아래 네 칸과 똑같이 둔다.** 색만 다르고 상자는 같은 상자다
     (지점장 —「하단 박스 4개와 박스사이즈를 하단 4개 기준으로 일치」).
     그래서 padding·min-height·글꼴을 여기서 건드리지 않는다 — .hb-card 가
     정한 것을 그대로 쓴다. */
  .hb-card.hb-fixed { background: var(--brand-tint); }
  .hb-card.hb-fixed .hb-sub { color: var(--brand); font-weight: 700; }

  /* 숫자 풍선 — 칸 오른쪽에 띄운다.
     **absolute 로 띄우는 것이 핵심이다.** 흐름 안에 두면 숫자가 카드 높이를
     밀어 올려 아래 네 칸과 크기가 어긋난다(2026-09-08 실제로 그랬다). */
  .hb-card .hb-n {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    line-height: 22px;
    text-align: center;
  }
  /* 풍선이 숫자를 말하므로 점(::after)은 끈다 — 같은 말을 두 번 하지 않는다.
     글씨가 풍선 밑으로 들어가지 않게 오른쪽만 비워 준다. */
  .hb-card.hb-new.has-new::after { display: none; }
  .hb-card.hb-new .hb-sub,
  .hb-card.hb-new b { padding-right: 34px; }

  /* 「전체 게시판」 단추(.hb-all-btn)는 2026-09-17 지점장 지시로 여기서
     지수 배너 위(.hero-boardmap-btn, 위쪽 참고)로 옮겨 이 자리에서는 뺐다.
     .hb-all/.hb-all-in 규칙은 옛 산출물이 남아 있을 수 있어 지우지 않는다. */

  .hb-all { margin-top: 10px; }
  .hb-all > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-alt);
    font-size: 13.5px;
    color: var(--text-mid);
    text-align: center;
  }
  .hb-all > summary::-webkit-details-marker { display: none; }
  .hb-all > summary::after { content: " ▾"; color: var(--text-dim); }
  .hb-all[open] > summary::after { content: " ▴"; }

  .hb-all-in { padding: 14px 2px 2px; }
  .hb-group + .hb-group { margin-top: 14px; }
  .hb-group-name {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 6px;
  }
  /* 게시판 맵(board_map_modal)의 알약 — 2026-09-28 카드에서 도로 알약으로, 한 화면에 다 들어오게. */
.hb-links { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-link {
padding: 6px 11px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
font-size: 13px;
line-height: 1.3;
color: var(--text);
text-decoration: none;
word-break: keep-all;
}
.hb-link.has-new {
border-color: var(--brand);
background: var(--brand-tint);
color: var(--brand-ink);
}

  /* ── 「내 게시판」 머리줄 — 제목 왼쪽, 「홈화면 설정」 오른쪽 ── */
  .hb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .hb-set {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px 6px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-mid);
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
  }
  .hb-set svg { width: 15px; height: 15px; flex: 0 0 auto; }
  .hb-set:active { background: var(--bg-alt); }

  /* 하나도 안 고른 사람에게만 나오는 한 줄 */
  .hb-hint {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
  }

  /* 빈 칸 — 카드와 같은 크기, 점선으로 «여기 채우세요»를 보여 준다 */
  .hb-slot {
    min-width: 0;
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--bg-alt);
    cursor: pointer;
  }
  .hb-slot:active { background: var(--border); }
  .hb-plus {
    font-size: 22px;
    line-height: 1;
    color: var(--text-dim);
    font-weight: 300;
  }
}

/* 「홈에 고정」 단추 — 2026-09-04 지점장 지시로 PC 에서도 켰다.
   「내 게시판」이 PC 에도 서게 됐으므로 더는 헛단추가 아니다.  */
.hb-pin { display: inline-flex; }
@media all {
  .hb-pin.on {
    border-color: var(--brand);
    background: var(--brand-tint);
    color: var(--brand-ink);
  }
}

/* 2026-09-21 — 2번 화면은 기기와 관계없이 같은 판을 유지한다.
   게시판 여덟 칸은 2열×4행, 빠른 도구 넷은 그 아래 1열×4칸이다.
   PC에서만 3열로 바꾸면 모바일과 카드 순서·행이 달라지고, 태블릿 분할
   화면에서 열 수가 튀므로 폭이 넓어져도 구조는 바꾸지 않는다. */
@media (min-width: 561px) {
  .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hb-tools { gap: 10px; }
  .hb-card, .hb-slot { min-height: 77px; }
  .hb-set { font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   「홈화면 설정」 팝업 (2026-09-04 지점장 지시)

   여는 문은 「내 게시판」 오른쪽 톱니와 빈 «+» 칸 둘이다. 게시판 안에 있던
   「홈에 고정」 단추(.hb-pin)는 그대로 두었다 — 게시판을 보다가 «이건 홈에
   두자» 싶을 때가 이 팝업을 여는 것보다 빠르다. 두 길이 같은 곳(/homeboard)에
   저장하므로 어긋나지 않는다.
   ───────────────────────────────────────────────────────────────────────── */
.hbpick-card {
  max-width: 460px;
  text-align: left;          /* .modal-card 가 가운데 정렬이라 되돌린다 */
  padding: 22px 20px 18px;
  position: relative;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}
.hbpick-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.03em;
}
.hbpick-note {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-dim);
}
.hbpick-note .hbpick-count { color: var(--brand-ink); font-weight: 700; }

.hbpick-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}
.hbpick-group + .hbpick-group { margin-top: 14px; }
.hbpick-group-name {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.hbpick-items { display: flex; flex-wrap: wrap; gap: 6px; }
.hbpick-item {
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
  word-break: keep-all;
  cursor: pointer;
}
.hbpick-item.on {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-weight: 700;
}
.hbpick-kind { color: #f26f21; font-weight: 800; }
/* 네 칸을 다 고르면 나머지는 눌리지 않는다 — 왜 안 눌리는지는 아래 줄이 말한다 */
.hbpick-item:disabled { opacity: .4; cursor: default; }

.hbpick-full {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--brand-ink);
  line-height: 1.5;
}

/* 「전체 게시판」 팝업 — 고르는 팝업(.hbpick-card)과 같은 뼈대를 쓴다.
   다른 점은 바닥에 「취소·저장」이 없다는 것뿐이다 — 여기는 누르면 바로 간다. */
.hball-card {
  max-width: 460px;
  text-align: left;
  padding: 22px 20px 18px;
  position: relative;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}
.hball-card .hb-group + .hb-group { margin-top: 12px; }

/* 「취소 · 저장」 — 팝업 바닥에 붙는다. 목록이 길어 스크롤돼도 이 줄은
   카드 안 마지막 칸이라 늘 보인다(.hbpick-body 만 스크롤한다). */
.hbpick-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.hbpick-foot .btn { min-width: 76px; }

/* 팝업이 떠 있는 동안 뒤쪽이 따라 움직이지 않게 */
body.modal-open { overflow: hidden; }

/* ─────────────────────────────────────────────────────────────────────────
   아래쪽 탭바 — 폰 전용 (2026-09-04 지점장 지시)

   게시판이 38개인데 «어디로 가는 문»이 전부 위쪽에 몰려 있어, 상단 이용줄이
   두 줄로 접히고 오른쪽이 잘렸다. 가장 많이 쓰는 넷을 엄지 닿는 아래로
   내리고 위에서는 같은 알약을 감춘다 — 옮기는 것이지 늘리는 것이 아니다.

   자리는 이미 비어 있었다: .site-foot 의 아래 여백 96px 은 예전에 떠다니던
   «뒤로» 단추를 위해 비워 둔 자리였고, 그 단추는 진작 없어졌다.          */
/* 2026-09-04 지점장 지시로 PC 에서도 켰다(«PC 버전에서도 동일하게»).
   맨 위 「뒤로」 알약을 뗐으므로, PC 에서 이 막대까지 감추면 「뒤로」가
   어디에도 없어진다 — 켜는 것이 맞다.  */
@media all {
  .tabbar {
    display: grid;
    /* 2026-09-21 분석요청·So what?을 홈 2번 화면 도구줄로 옮기고,
       상단의 유튜브·뉴스를 내려 여섯 칸 — 2026-10-02 뉴스 옆에 So what?을
       더해 일곱 칸(지점장 지시).
       칸 수를 여기서만 정한다 — bottom_tabbar() 의 tabs 목록과
       **개수가 같아야** 한다. 어긋나면 마지막 칸이 잘리거나 빈칸이 남는다. */
    grid-template-columns: repeat(7, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;               /* 팝업(200)보다 낮게 — 공지가 뜨면 덮인다 */
    background: var(--surface);
    border-top: 1px solid var(--border);
    /* 아이폰 아래쪽 가로줄(홈 인디케이터)에 글자가 가리지 않게.
       2026-09-05 지점장 지시로 인디케이터 여백에 10px 을 더해 아이콘·글자를
       올렸다(처음 6px → 같은 날 «10px로 해봐»). **폰은 막대를 바닥에 붙인
       채로 둔다** — «모바일은 하단바로 두고»(지점장). bottom 을 띄우면 그
       틈으로 본문이 비쳐 잘못 만든 것처럼 보인다. PC 는 가운데 알약이라
       사정이 다르다(아래 min-width:561px 블록). */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    box-shadow: 0 -1px 12px rgba(22, 40, 60, .06);
  }
  .tabbar-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 1px 7px;
    text-decoration: none;
    color: var(--text-dim);
    font-size: 9px;           /* 일곱 칸이 되면서 10 → 9 (2026-10-02) */
    line-height: 1.15;
  }
  .tabbar-item svg { width: 18px; height: 18px; }

  /* 아이콘과 빨간 점을 함께 담는 칸 — 점을 아이콘 오른쪽 위에 얹는다 */
  .tab-ico { position: relative; display: inline-flex; }
  /* 조렌버핏 칸 — 선 아이콘 대신 앱 아이콘 이미지(2026-09-17). 라벨이 없어
     세로 중앙정렬이면 다른 칸의 아이콘(위)+글자(아래) 무게중심보다 아래로
     처지고 커 보였다(지점장 지시 — 「사이즈 맞게 조절해서 올려야지」).
     svg 아이콘과 같은 20px 로 맞추고 칸을 위쪽 정렬했었는데, 그 뒤
     「지금보다 1.6배 확대」 지시로 20px → 32px 로 키운다. */
  .tab-ico-app img { width: 28px; height: 28px; border-radius: 7px; display: block; }
  .tabbar-item:has(.tab-ico-app) { justify-content: flex-start; }
  .tab-dot {
    position: absolute;
    top: -1px; right: -3px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand);
  }
  .tabbar-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tabbar-item.on { color: var(--brand-ink); font-weight: 700; }

  /* 위쪽 이용줄에서 같은 알약을 뺀다 — 아래로 내려갔으므로 두 벌이 된다.
     .utility-inner 안으로 한정한다: 같은 이름의 알약이 본문 안에 쓰이는
     자리가 있어(즐겨찾기 안내 등) 통째로 감추면 그것까지 사라진다.

     **«a»를 반드시 붙인다.** 기존 규칙이 «.utility-inner a.chat-pill» 이라
     0-2-1 이고, «.utility-inner .chat-pill»(0-2-0)로 쓰면 뒤에 와도 진다.
     — 2026-09-04, 실제로 이것 때문에 한 번 안 먹었다. */
  /* 아래 탭바로 «내려간 것만» 위에서 감춘다.
     - 조렌버핏(.chat-pill) — 탭바에 있으므로 감춘다.
     - 즐겨찾기(.star-pill) — 2026-09-04 지점장 지시로 탭바에서 빼고 맨 위
       알약으로 되돌렸다. **감추지 않는다.** 여기 다시 넣지 마라.
     - 돋보기(.search-pill) — 같은 날 서버가 아예 안 그린다. 감출 것이 없다.
       검색으로 가는 문은 이제 홈의 찾기 칸 하나뿐이다. */
  .utility-inner a.chat-pill { display: none; }

  /* 탭바에 가리지 않게 바닥을 조금 더 비운다. 위 560px 블록이 이미 96px 을
     주고 있어 대부분 충분하지만, 인디케이터가 있는 기기에서는 모자란다. */
  .site-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* PC 에서의 탭바 — **바닥에 붙인다.**

   2026-09-05 지점장 «하단 막대가 또 떠다닌다. 하단에 딱 고정해야는데».
   «자꾸 풀리는» 것이 아니라 **PC 만 다르게 만들어 두었던 것**이다 —
   2026-09-04 에 「가운데로 모아 알약처럼」 띄우면서 `bottom: 18px` 을 줬고,
   그 18px 이 떠 보이는 정체였다. 폰은 처음부터 바닥에 붙어 있었다.

   이제 폰과 같이 **화면 끝에서 끝까지 바닥에 붙인 막대**로 두되,
   넓은 화면에서 다섯 칸이 양끝까지 벌어지지 않도록 **안쪽 여백으로 내용만
   가운데로 모은다.** 막대는 바닥에 붙고 아이콘은 가운데 580px 안에 선다.

   **`bottom` 에 0 아닌 값을 도로 넣지 마라.** 그 순간 다시 떠 보인다.

   **이 블록은 반드시 위 «@media all» 뒤에 두어야 한다.** 앞에 두면 특정도가
   같아서 뒤에 오는 기본 규칙(left:0·right:0)에 져서 막대가 왼쪽으로 밀려
   잘린다 — 2026-09-04 에 실제로 그렇게 났다(blog-css-cascade-trap). */
@media (min-width: 561px) {
  .tabbar {
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    bottom: 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 -1px 12px rgba(22, 40, 60, .06);
    overflow: hidden;
    /* 여섯 칸을 가운데 580px 안에 모은다 — 막대 자체는 끝에서 끝까지다. */
    padding-left: max(0px, calc(50% - 290px));
    padding-right: max(0px, calc(50% - 290px));
    padding-bottom: 0;
  }
  .tabbar-item { padding: 10px 2px 9px; }
  .site-foot { padding-bottom: 96px; }
}

/* ===== 게시판 화면 글씨 크기 맞추기 (2026-09-05 지점장 지시) =====
   «게시판마다 글씨크기가 뒤죽박죽»이라 하셔서, 한 화면 안에서 서로 견줘 보이는
   네 자리를 기준 하나씩에 붙였습니다. 기준은 전부 **이미 있던 값**이고 새로
   고른 숫자가 아닙니다 — 새 값을 만들면 다음에 또 어긋납니다.

   ① 「글 37개」  → 상단 메뉴바(.gnb-item)와 같은 식
   ②③ 알약·단추 → 분석요청 모달의 알약(.qask-kind span, 13.5px / 7px 14px)
   ④ 게시판 설명 → 게시물 목록 글씨(14.5px)                                */

/* ① 목록 머리의 「글 N개」. .section-title 은 검색·즐겨찾기 같은 다른 화면도
   쓰므로 이름 하나로 줄이지 않고, 게시판 목록(.list-head) 안에서만 줄입니다.
   두 이름을 겹쳐 900px 미디어쿼리의 «.section-title { font-size: 20px }» 를
   이깁니다 — 홈 제목(.section-title.home-title)과 같은 방식입니다. */
.list-head .section-title {
  font-size: clamp(15.5px, 1.42vw, 19px);
}

/* ②③ 소게시판 알약과 머리의 단추 셋(홈에서 빼기·새 글 쓰기·선택).
   .btn.small 은 앱 곳곳에서 쓰므로 **이 머리 줄 안에서만** 바꿉니다. */
.chip,
.list-head-actions .btn.small {
  font-size: 13.5px;
  padding: 7px 14px;
}

/* ④ 게시판 설명 한 줄. 바로 아래 목록 글씨와 같은 크기라야 «설명이 목록보다
   커서 먼저 읽히는» 일이 없습니다. */
.hero-desc { font-size: 14.5px; }

/* ★ 메뉴바는 폭에 따라 세 값을 갖는다 — 기본 clamp · 900px 17px · 560px 16px.
   「글 N개」도 **셋을 그대로** 따라가야 어느 폭에서든 나란히 보인다.
   메뉴바(.gnb-item) 값을 고칠 때는 아래 셋도 같이 고친다. */
@media (max-width: 900px) {
  .hero-desc { font-size: 14px; }   /* 이 폭에서 목록 글씨(.card p)가 14px 다 */
  .list-head .section-title { font-size: 17px; }
}
@media (max-width: 560px) {
  .list-head .section-title { font-size: 16px; }
}

/* ==========================================================================
   폰에서 아래 막대를 «붙이지» 않고 «맨 아래 칸»으로 둔다
   2026-09-05 지점장 지시 —「수술해봐」
   ==========================================================================

   지금까지는 막대를 position:fixed 로 화면에 «붙여» 두었다. 그런데 아이폰은
   자판이 접힌 뒤 fixed 로 붙여 둔 것의 자리를 다시 계산하지 않는다 — 막대가
   자판이 있던 자리에 그대로 멈춰 서서 화면 한가운데에 뜬다. 2026-08-21 에
   그리기 힌트(translateZ·backface·will-change·sticky)로 네 번 고치려다 네 번
   실패했고, 2026-09-05 에 자바스크립트로 «다시 그려라»를 찔러 봤지만 그것도
   자판 속도를 좇는 임시방편이었다.

   **그래서 붙이는 것을 그만둔다.** 화면 전체를 100dvh 한 통으로 만들고,
   본문(.page)만 그 안에서 굴린다. 막대는 그 통의 «맨 아래 칸»이다 —
   붙여 놓은 것이 아니라 원래 거기 있는 것이라, 아이폰이 다시 그릴 일 자체가
   없어진다. 자판이 오르내려도 통의 높이는 그대로다.

   ## 왜 이 자리에 이렇게 두었나 — 셋 다 이유가 있다

   ① **폰(560px 이하)에서만 한다.** PC 는 지금도 멀쩡하고 자판이 없다.
      건드릴 이유가 없는 곳을 건드리면 그것이 다음 사고가 된다.
   ② **위쪽 «@media all» 의 position:fixed 는 그대로 남긴다.** 100dvh 를
      모르는 옛 사파리(15.4 이전)는 이 블록을 못 읽고 예전처럼 동작한다.
      이 블록은 «덮어쓰는» 것이지 «갈아치우는» 것이 아니다.
   ③ **파일 맨 끝이어야 한다.** 같은 선택자가 뒤에 또 있으면 진다
      (blog-css-cascade-trap). 뒤에 아무것도 두지 마라.

   ## 왜 body 를 flex 로 만들어도 되나 (예전에 이걸로 사고가 났다)

   2026-09-04 에 body 를 flex 로 두었다가 막대가 화면 한가운데로 떨어졌다.
   그때는 **막대가 fixed 인 채로** flex 칸이 되어 아이폰이 자리를 잘못 잡았다.
   지금은 막대를 static 으로 내려 **진짜 flex 칸**으로 만든다 — 어정쩡한
   조합이 아니다.

   body 의 다른 자식(게시판지도·분석요청·조렌버핏·클로드데스크·조회수·
   홈화면설정 팝업)은 **전부 .modal-back 이라 position:fixed** 이고, flex 흐름
   밖이라 칸을 차지하지 않는다. 2026-09-05 에 여섯 개를 하나씩 확인했다.
   **새 팝업을 body 바로 밑에 붙일 일이 생기면 반드시 .modal-back 을 쓴다.**

   ## 딸려 오는 것 하나 — 당겨서 새로고침이 없어진다

   바깥을 안 굴리므로 폰에서 «화면을 아래로 당겨 새로고침»이 사라진다.
   앱처럼 쓰는 화면이라 없는 편이 자연스럽지만, 알아 두어야 할 값이다.     */

/* 조우팔(/desk) — 머리줄 마크. 조렌버핏은 주황 나침반, 조우팔은 진한 주황
   말풍선이라 홈 화면에서도 화면 안에서도 둘이 안 헷갈립니다
   (2026-09-06 지점장 지시 — 「클로드데스크를 /desk 로 독립」). */
/* 건별 답장 — 카톡과 같은 모양입니다(2026-09-06 지점장 지시
   「비서가 보내는 메시지 건별로 답장 기능을… 카톡 기능 참고」·
   「답장 알약은 해당 메시지 상자 하단 우측에 배열」). */

/* 말풍선 안에 접혀 들어가는 인용 줄 */
.kquote {
  display: block;
  margin: -2px 0 6px;
  padding: 6px 9px;
  border-left: 3px solid var(--brand-solid);
  border-radius: 6px;
  background: rgba(0, 0, 0, .045);
  font-size: 12.5px;
  line-height: 1.45;
}
.kquote span { color: var(--text-mid); word-break: break-all; }
.kmsg.me .kquote { background: rgba(0, 0, 0, .07); }

/* 「답장」 알약 — 말풍선 «아래 오른쪽 끝». 시각 옆에 글자로 두었더니
   눌러야 하는 줄 모르십니다. 알약으로 세워 누르는 것임을 보이게 합니다. */
/* 말풍선과 알약을 한 칸에 세로로 담습니다 — 그래야 알약이 **말풍선의**
   오른쪽 끝에 붙습니다. 예전에는 시각까지 품은 바깥 칸에 맞춰져 시각 밑으로
   삐져나왔습니다(2026-09-06 지점장 지적 —「지금은 시간 밑」). */
.kcol { display: flex; flex-direction: column; min-width: 0; }
.kfoot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 5px; }

/* 확인 체크박스 — 조실장 말풍선 «왼쪽». 체크한 것은 봤다는 표시, 안 한
   것은 나중에 다시 보려고 남겨 둔 것입니다(2026-09-09 지점장 지시 —
   «내가 보고받은거 체크하려고. 체크 안한건 나중에 다시 볼수 있게»). */
.kack {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
}
.kack-box {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand-ink, #a34400);
  cursor: pointer;
}
.kreply {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-mid);
  border-radius: 999px;
  padding: 3px 12px;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}
.kreply:hover { color: var(--brand-ink, #a34400); border-color: var(--brand-ink, #a34400); }
.kreply:active { background: var(--bg-alt); }

/* 들려주기 — 글자 단추 대신 마이크 단추와 같은 만듦새의 헤드셋 아이콘
   (2026-09-07 지점장 지시 —「들려주기를 헤드셋 모양 아이콘」). 재생 중에는
   색이 바뀌어(.playing) 지금 나오고 있음을 보입니다. */
.ktts {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  padding: 0;
  cursor: pointer;
}
.ktts::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--text-mid);
  -webkit-mask: var(--headset-mask) center / 15px 15px no-repeat;
  mask: var(--headset-mask) center / 15px 15px no-repeat;
}
.ktts:hover { border-color: var(--brand-ink, #a34400); }
.ktts:hover::before { background: var(--brand-ink, #a34400); }
.ktts:active { background: var(--bg-alt); }
.ktts.playing { border-color: var(--brand-ink, #a34400); }
.ktts.playing::before { background: var(--brand-ink, #a34400); }

/* «쿡» 눌러 복사 — 아이폰의 선택 확대경을 끕니다. 긴 답을 손가락으로
   끝까지 끌어 고르기보다, 눌러서 통째로 가져가는 편이 낫습니다
   (2026-09-06 지점장 지시). 링크는 그대로 눌러 열립니다. */
.kmsg.claude .kbubble, .kmsg.me .kbubble, .kmsg.navi .kbubble {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.kmsg.claude .kbubble a, .kmsg.me .kbubble a, .kmsg.navi .kbubble a { -webkit-user-select: auto; user-select: auto; }

.kcopy-say {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%) translateY(6px);
  z-index: 60;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(31, 28, 25, .92);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.kcopy-say.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* «쿡» 눌렀을 때 뜨는 복사하기·삭제하기 메뉴 (2026-09-07 지점장 지시 —
   «길게 눌렀을 때 복사하기 삭제하기 선택할 수 있게». 예전엔 쿡 누르면
   바로 복사됐는데, 지우기도 여기서 고를 수 있게 메뉴로 바꿨다). */
.kactions {
  position: fixed; z-index: 70;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 120px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.kactions button {
  display: block; width: 100%; padding: 9px 12px; border: 0; background: none;
  border-radius: 9px; font-size: 14px; font-weight: 600; text-align: left;
  color: var(--text); -webkit-tap-highlight-color: transparent;
}
.kactions button:active { background: var(--bg-alt); }
.kactions button.kact-del { color: #c0392b; }

/* 입력칸 위에 서는 인용 띠 */
.kreply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 -2px;
  padding: 7px 10px;
  border-left: 3px solid var(--brand-solid);
  border-radius: 8px;
  background: var(--bg-alt);
  font-size: 12.5px;
}
/* ★ display:flex 가 hidden 속성을 이깁니다 — 이 한 줄이 없으면 답장하지
   않을 때도 빈 띠가 떠 있습니다(2026-09-06 미리보기에서 잡았습니다). */
.kreply-bar[hidden] { display: none; }
.kreply-to { flex: 1 1 auto; min-width: 0; color: var(--text-mid);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kreply-to b { color: var(--text); font-weight: 600; }
.kreply-x {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--text-dim); padding: 0 2px;
}
.kreply-x:hover { color: var(--text); }

/* 조우팔 머리줄 — 설명 줄과 닫기를 걷어낸 «얇은» 판입니다
   (2026-09-06 지점장 지시 「상단 설명은 없애죠~ 나만 보는거야」·
   「상단 닫기도 없어도 됨. 단독 앱이라서」). 마크와 이름만 남습니다. */
/* 2026-09-06 지점장 지시 — 「상단 고정막대가 두툼한거 같아, 하단(입력줄)에
   맞춰 상단도 줄여줘」. 위쪽 틈(margin-top 음수)과 마크 크기를 함께 줄인다 —
   패딩만 줄이면 .main 의 기본 위 여백이 그대로 남아 효과가 작다. */
.chat-head-slim { padding: 2px 2px 8px; margin-top: -6px; }
.chat-head-slim .chat-head-title { align-items: center; }

/* 별도 가로 로고가 없는 조실장은 홈 화면 앱 아이콘을 내부 좌측 상단에도
   그대로 씁니다. 작업실·조렌버핏과 같은 크기 흐름입니다. */
.chat-mark-desk {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #21438d url("/static/icon-180-desk.png?v=20260913") center / contain no-repeat;
}
.chat-mark-desk::before { content: none; }

@media (max-width: 560px) {
  body {
    height: 100vh;              /* dvh 를 모르는 브라우저용 — 아래 줄이 이긴다 */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;           /* 굴리는 것은 .page 안뿐이다 */
  }

  .page {
    flex: 1 1 auto;
    min-height: 0;              /* 위쪽 min-height:100vh 를 푼다.
                                   이게 없으면 칸이 내용만큼 부풀어 안 굴러간다 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;   /* 끝에서 더 당겨도 화면째 딸려오지 않게 */
  }

  /* ★ 수술의 핵심 한 줄 — 더는 «붙이지» 않는다 */
  .tabbar {
    position: static;
    flex: 0 0 auto;
    z-index: auto;
  }

  /* 88px 은 «붙어 있던 막대에 안 가리려고» 비워 둔 자리였다. 이제 막대가
     본문을 덮지 않으므로 그만큼 되돌려 준다 — 화면이 그만큼 넓어진다. */
  .main { padding-bottom: 16px; }
  .site-foot { padding-bottom: 0; }
}

/* 조렌버핏 「닫기」 — 가족방 대화 팝업과 같은 모양 (2026-09-06 지점장 지시).
   조렌버핏은 껍데기 없는 단독 화면이라 아래 탭바가 없어, 블로그에서 바로
   들어오면 돌아갈 길이 없었다. 머리줄 오른쪽 끝에 세운다. */
/* 종과 「닫기」는 머리줄 오른쪽 끝에 «세로로» 선다 — 종이 위, 닫기가 아래다
   (2026-09-06 지점장 지시 「닫기를 지금 종 위치에 / 로고를 지금 닫기 위치에 /
   종은 바뀔 닫기 위로」). 로고는 맨 왼쪽 첫 자리 그대로다.
   좁은 화면에서 이 덩어리가 아래로 밀려 내려가지 않게 머리줄은 줄바꿈을 끈다. */
.chat-head { flex-wrap: nowrap; }
.chat-head-act {
  margin-left: auto; display: flex; flex-direction: row;
  align-items: center; gap: 7px; flex: 0 0 auto;
}
.chat-x {
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
  padding: 7px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text);
}
.chat-x:active { background: var(--bg-alt); }

/* 조우팔 머리줄은 «닫기» 가 없어(아래 탭바로 나간다) 종·닫기를 세로로 쌓는
   .chat-head-act 의 기본값이 필요 없다 — 종을 왼쪽, 알약을 그 오른쪽에
   가로로 나란히 세운다(2026-09-07 지점장 「상단 막대 종 오른쪽으로 배열 수정」). */
.desk-head-act { flex-direction: row; align-items: center; }

/* 조우팔 머리줄의 «다른 앱» 알약 — 블로그·메모장·작업실·조렌버핏·가족앱으로
   가는 팝업(2026-09-07 지점장 지시). /desk 는 스코프가 따로 있어 눌러 나가면
   사파리로 튕기는데, 그건 다른 자매앱 이동 단추(작업실↔블로그)와 같은 동작이다. */
.desk-apps { position: relative; }
.desk-apps-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 128px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.desk-apps-pop[hidden] { display: none; }
.desk-apps-item {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  color: var(--text); text-decoration: none;
}
.desk-apps-item:active { background: var(--bg-alt); }

/* 내 말풍선 필터 — 새로고침 왼쪽 체크박스 알약(2026-09-12 지점장 지시).
   켜져 있으면(전체 보기가 아니면) .push-bell.on 규칙으로 주황 배경이 된다. */
.desk-filter { position: relative; }
.desk-filter-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 128px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.desk-filter-pop[hidden] { display: none; }
.desk-filter-item {
  display: block; width: 100%; padding: 9px 12px; border: 0; background: none;
  border-radius: 9px; font: inherit; font-size: 14px; font-weight: 600;
  text-align: left; white-space: nowrap; color: var(--text); cursor: pointer;
}
.desk-filter-item:active { background: var(--bg-alt); }
@media (max-width: 640px) {
  .chat-head { gap: 10px; }
  .chat-mark.chat-app-icon { width: 48px; height: 48px; border-radius: 12px; }
  .chat-mark-desk { width: 48px; height: 48px; border-radius: 12px; }
  .chat-head-text { flex: 1 1 auto; }
  .chat-head-act { gap: 5px; }
  .chat-x { padding: 6px 12px; font-size: 13.5px; }
  .chat-head .push-bell { width: 34px; height: 34px; }
  .chat-head .push-bell-ico { width: 16px; height: 16px; }
}

/* ── 팝업(bare) 목록은 늘 꽉 채운다 (2026-09-11 지점장 —「왜 또 좁아진거니?」
   ·「인기글 팝업처럼 해」) ───────────────────────────────────────────────
   원인 — 9/9 스크롤 고치며 넣은 .page 가 **세로 flex** 다. 그 안의 .wrap 은
   margin: 0 auto 라서, flex 안에서는 꽉 차지 않고 **내용 폭만큼 오그라든다.**
   글 목록은 minmax(340px,1fr) 격자라 글이 1건이면 내용 폭이 한 칸(약 400px)
   뿐이라, 새로운 글이 가운데 좁게 섰다. 인기글은 글이 많아 넓어 보였을 뿐
   같은 틀이라 글이 적은 날엔 똑같이 좁아진다 — 그래서 bare 팝업 전부에 건다.
   ★ width:100% 를 빼면 증상이 돌아온다. .page 의 flex 를 풀면 폰 스크롤이
   다시 막히니(9/9) 그쪽은 건드리지 마라. */
.bare-popup .wrap.bare-wrap {
  width: 100%;
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────
   인쇄 공통 규격 (2026-09-15 지점장 지시 — «게시물을 인쇄최적화된 html로»,
   «모든 산출물에 공통 적용사항», «잘 학습시켜~ 조직 전체»)

   게시물 화면의 «출력하기»(window.print)가 이 규칙을 그대로 탄다 — 새 창을
   따로 만들지 않는다. 화면 틀(상단바·탭바·팝업·단추류)을 걷어내고 본문만
   흰 바탕·고대비로 남긴다. 표·카드가 인쇄용으로 새로 그려진 report·daily
   산출물 HTML 은 이미 자기 완결형(print-a4 스킬)이라 이 규칙과 부딪히지
   않는다 — 여기는 «블로그 화면을 그대로 인쇄»하는 경우만 다룬다. */
@media print {
  /* 화면 틀 — 눌러서 가는 문·설정·팝업은 종이에 옮길 이유가 없다 */
  .topbar, .utility, .tabbar, .megamenu,
  .modal-back, .app-popup-box, .qask-box, .navi-box, .qdesk-box,
  .hb-pick-box,
  .share-tools, .list-head-actions, .bulk-bar,
  .hb-wrap, .chips, .page-head.hb-head,
  .site-foot { display: none !important; }

  html, body {
    background: #fff;
    color: #000;
    height: auto;
    overflow: visible;
  }
  body { display: block; }
  .page { overflow: visible; display: block; }

  .main { padding: 0; }
  .wrap { max-width: 100%; padding: 0; margin: 0; }

  /* 히어로 띠의 시세판 느낌 격자·그라데이션은 화면 장식이라 종이에선 뺀다 */
  .hero { background: #fff; border-bottom: 1px solid #999; }
  .hero::before { display: none; }

  a { color: inherit; text-decoration: underline; }

  /* 카드·배지의 옅은 배경·그림자는 잉크만 먹고 종이에서는 안 보인다 —
     테두리로 구분한다(print-a4 스킬과 같은 원칙). */
  .card, .card-grid .card {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    background: #fff !important;
    break-inside: avoid;
  }
  .card-grid { display: block; }
  .card-grid .card { margin-bottom: 12px; }

  .tag, .badge, .cat, .hot-tag, .sowhat-tag {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #999 !important;
  }

  h1, h2, h3 { break-after: avoid; }
  table { break-inside: auto; }
  tr, td, th { break-inside: avoid; }
}

/* 2026-09-18 — 폰 화면 높이를 스크립트가 잰 실제 높이(--app-h)로 둔다.
   아이폰이 새 화면을 열 때 100dvh 를 크게 잡아 탭바가 화면 밖으로 밀리던 일
   (지점장 제보: 홈 로고를 누르면 하단 고정바가 사라짐). 값이 없으면 100dvh.
   html 도 굴리지 않는다 — 아이폰은 body 의 overflow:hidden 만으로는 문서째
   밀리는 것을 막지 못한다. 굴리는 것은 여전히 .page 안뿐이다. */
@media (max-width: 560px) {
  html { height: 100%; overflow: hidden; }
  body { height: var(--app-h, 100dvh); }
}

/* 조렌버핏 머리줄 안내 한 줄 (2026-09-18 지점장 지시 —「조렌버핏이 좋은 답변을 줄 수
   있게 시간을 주세요 라는 취지로」). 폰에서도 한 줄로 끝나게 작게. */
.chat-head-sub { margin: 1px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--text-dim);
                 word-break: keep-all; }

/* 종목검색 알약 — 투자챗봇(진한 주황) 오른쪽, 한 톤 밝은 주황(2026-09-18). 돋보기는
   .ask-cta 기본 ::before 를 그대로 쓴다. */
.ask-cta.stock-cta { background: var(--brand); }
.ask-cta.stock-cta:hover { background: var(--brand-ink); }

/* 투자챗봇 알약 — 오른쪽 종목검색 알약과 같은 주황으로 (2026-09-18 지점장 지시 —
   「홈 화면 챗봇 알약을 그 오른쪽에 있는 종목 검색 알약과 같은 색깔로」). */
.ask-cta.chat-cta { background: var(--brand); }
.ask-cta.chat-cta:hover { background: var(--brand-ink); }

/* ── 팝업 크기·자리 하나로 (2026-09-18 지점장 지시 — 「작업실 팝업도 모두 동일하게,
   블로그에서 쓰는 다른 팝업도 모두 동일하게」) ──
   기준은 홈 «내 게시판» 팝업: 폭 560px(폰 96vw), 높이 690px, 위쪽 고정.
   대상은 «화면을 담는» 팝업 — 앱 팝업(내 게시판·작업실·메모장·포트폴리오)·조실장·
   조렌버핏·분석요청·게시판 맵·홈화면 설정. «접수되었습니다» 같은 짧은 확인 창은
   그대로 둔다 — 한 줄 알림을 690px 로 키우면 빈 상자만 커진다. */
.modal-back > .modal-card.app-popup-card,
.modal-back > .modal-card.qdesk-card,
.modal-back > .modal-card.qask-card,
.modal-back > .modal-card.hball-card,
.modal-back > .modal-card.hbpick-card {
  width: min(560px, 92vw) !important;
  max-width: 560px !important;
  height: min(690px, calc(100vh - 48px)) !important;
  height: min(690px, calc(100dvh - 48px)) !important;
  max-height: none !important;
  align-self: flex-start !important;
  margin-top: -24px !important;
  box-sizing: border-box;
  overflow-y: auto;
}
/* 조실장 — 대화칸이 상자 높이를 채우게 */
.modal-back > .modal-card.qdesk-card { display: flex; flex-direction: column; }
.modal-back > .modal-card.qdesk-card .kdesk { flex: 1 1 auto; height: auto !important; min-height: 0; }
@media (max-width: 560px) {
  .modal-back > .modal-card.app-popup-card,
  .modal-back > .modal-card.qdesk-card,
  .modal-back > .modal-card.qask-card,
  .modal-back > .modal-card.hball-card,
  .modal-back > .modal-card.hbpick-card {
    width: 96vw !important;
    /* 2026-09-21 지점장 지시 — 팝업 아래에 남던 32px 여백까지 채운다.
       TABBAR_JS가 실제 모바일 화면 높이를 --app-h로 재므로 주소창 변화에도
       입력창·하단이 화면 끝에 정확히 맞는다. 모든 주요 팝업이 같은 규격이다. */
    height: 100vh !important;
    height: 100dvh !important;
    height: var(--app-h, 100dvh) !important;
  }
}

/* 조렌버핏 지점장 닫기(X) — 종과 같은 크기, 종 오른쪽에 붙는다(2026-09-19) */
.chat-head .push-bell.chat-close-x{margin-left:0}

/* 분석요청 팝업 — «요청내역»을 제목줄 맨 오른쪽으로(2026-09-19 지점장 지시) */
.qask-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qask-head .qask-more{order:0;text-align:right;margin-left:auto}
@media (max-width:480px){.qask-head .qask-more{order:0;text-align:right}}

/* 형광펜 — 2026-09-24 지점장 지시(「밑줄, 볼드에 형광펜도」).
   종이에 그은 자국처럼 **글자 뒤만** 칠한다 — 줄 전체를 칠하면 강조가 아니라 소음이다.
   노란 바탕에 검은 글씨라 인쇄(PDF)에서도 그대로 보인다. */
mark, .prose mark, .wr-prose mark {
  background: linear-gradient(transparent 58%, #ffe680 58%);
  color: inherit; padding: 0 1px; border-radius: 2px;
}
@media print { mark { background: #ffe680; -webkit-print-color-adjust: exact;
  print-color-adjust: exact; } }