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

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

  /* 브랜드 */
  --brand: #f26f21;          /* 포인트 컬러 (면·테두리·장식) */
  --brand-ink: #c75300;      /* 글자·버튼용 (흰 바탕 대비 4.5:1) */
  --brand-tint: #fff3ea;     /* 아주 옅은 주황 배경 */
  --navy: #16283c;           /* 짙은 남색 — 제목 */

  /* 중립 */
  --bg: #ffffff;
  --bg-alt: #f6f7f9;
  --surface: #ffffff;
  --border: #e4e7eb;
  --border-strong: #d3d8de;
  --text: #1a1d21;
  --text-mid: #4d545c;
  --text-dim: #868d96;
  --danger: #c0392b;

  --shadow: 0 1px 2px rgba(22, 40, 60, .04);
  --shadow-lift: 0 6px 24px rgba(22, 40, 60, .10);
  --radius: 16px;
  --wrap: 1160px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  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: 16px;
  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;
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* 윗줄 — 작은 이용 링크 (미래에셋 상단 유틸리티 영역과 같은 역할) */
.utility {
  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; }

/* 바깥 도구 바로가기 (텔레그램·지메일) */
.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); color: #fff; }

/* 앱 공유하기 — 홈 주소를 폰 공유창으로 넘깁니다.
   글자가 «주소를 복사했습니다»로 잠깐 바뀌므로 폭을 고정하지 않습니다. */
.utility-inner a.app-share {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-mid);
  font-weight: 600;
  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; }
/* 아랫줄 — 로고 + 큰 게시판 메뉴 */
.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; }
.topbar-actions { display: none; }

/* 로고 자리의 주황 사선 — 미래에셋 심볼의 각도를 참고한 도형 */
.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--brand) 0%, #ffa050 100%);
  position: relative;
  flex: 0 0 auto;
}

.brand-mark::after {
  content: "";
  position: absolute;
  left: 6px; top: 15px;
  width: 14px; height: 3px;
  border-radius: 2px;
  background: #fff;
  transform: rotate(-38deg);
  transform-origin: left center;
}

.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 em { font-style: normal; font-size: 11.5px; color: var(--text-dim); }

/* 미래에셋 GNB 방식 — 크고 굵게, 넉넉한 간격 */
.gnb {
  display: flex;
  align-items: stretch;
  /* flex-start 여야 합니다. flex-end 로 두면 넘치는 항목이 화면 왼쪽 밖으로
     밀려나 스크롤로도 닿을 수 없게 됩니다 (게시판이 늘면 바로 드러납니다) */
  justify-content: flex-start;
  gap: clamp(14px, 2.1vw, 34px);
  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: 8px;
  height: 100%;
  padding: 0 2px;
  font-size: clamp(15.5px, 1.42vw, 19px);
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--navy);
  white-space: nowrap;
  transition: color .15s;
}

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

.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);
}

/* 상단바 오른쪽 끝 «종목분석요청» — 메뉴가 아니라 «행동» 이라 알약 단추로 둡니다.
   메뉴(.gnb)가 flex:1 이라 남는 자리를 다 먹고, 이 단추는 그 끝에 붙습니다. */
.ask-cta {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  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;
}

.ask-cta::before {
  content: "";
  width: 15px; height: 15px;
  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='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%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='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
}

.ask-cta:hover { background: var(--brand-ink); box-shadow: 0 3px 14px rgba(199, 83, 0, .32); }
.ask-cta.active { background: var(--brand-ink); }

/* 전송 뒤에 뜨는 안내 판 — 자바스크립트 없이 화면을 덮습니다 */
.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);
  padding: 60px 0 56px;
}

/* 옅은 격자 — 시세판 느낌의 배경 */
.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;
  align-items: center;
  gap: 40px;
}

.hero-copy { 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);
}

.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;
}

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

.creed-key {
  flex: 0 0 auto;
  min-width: 34px;
  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;
}

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

.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; }

/* 카드 안의 작은 추세선 */
.spark { width: 78px; height: 22px; flex: 0 0 auto; }
.spark polyline { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spark.up polyline { stroke: var(--brand); }
.spark.down polyline { stroke: var(--text-dim); opacity: .55; }

/* 빈 화면 그래픽 */
.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; }

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

.main { padding: 56px 0 88px; flex: 1 0 auto; }
.hero, .topbar, .site-foot { 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;
}

.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);
  border: 1px solid var(--border);
  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-link { 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: 13px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -.01em;
}

.card h2 {
  font-size: 20px;
  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: 14.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: 13px;
  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: #fff;
  vertical-align: 1px;
}

.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: #fff;
  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); }

.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; }

.who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  padding-right: 4px;
}

.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); }

/* 긴 리포트에서도 항상 닿는 떠 있는 버튼 */
.back-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(22, 40, 60, .28);
}

.back-float:hover { background: var(--brand-ink); }

/* 리포트(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: 36px; }
.post-head .card-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; 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;
}

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

.prose { font-size: 17px; 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: 27px; }
.prose h2 { font-size: 23px; padding-left: 14px; border-left: 4px solid var(--brand); }
.prose h3 { font-size: 19px; }
.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); }
.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 { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.prose th, .prose td { border-bottom: 1px solid var(--border); padding: 12px 14px; text-align: left; }
.prose thead th { background: var(--bg-alt); font-weight: 700; color: var(--navy); border-bottom: 2px solid var(--border-strong); }

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

.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); }

.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); }

.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);
}

.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;
}

.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; }

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

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

.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);
}

.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; }
  .ask-cta { order: 1; margin-left: auto; height: 34px; padding: 0 14px; font-size: 13.5px; }
  /* 반드시 flex-start — flex-end 면 앞쪽 메뉴가 화면 밖으로 밀려 스크롤로도 닿지 않습니다 */
  .gnb { order: 2; width: 100%; gap: 20px; justify-content: flex-start; }
  .gnb-item { padding: 4px 2px 12px; font-size: 17px; }
  .topbar-actions { margin-left: auto; }
  .hero { padding: 40px 0 36px; }
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-title { font-size: 30px; }
  .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; }
  .creed-text { font-size: 14px; }
  .main { padding: 36px 0 64px; }
  h1 { font-size: 25px; }
  .post-head h1 { font-size: 27px; }
  .card-grid { grid-template-columns: 1fr; }
  .prose { font-size: 16px; }
}

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

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

  /* 위쪽 이용 링크 — 좁은 화면에서 넘치지 않게 */
  .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: 16px; }
  .gnb-item { font-size: 16px; }
  .ask-cta { height: 32px; padding: 0 12px; font-size: 12.5px; gap: 5px; }
  .ask-cta::before { width: 13px; height: 13px; }

  /* 히어로를 줄여 글 목록이 첫 화면에 들어오게 */
  .hero { padding: 24px 0 22px; }
  .hero-inner { gap: 0; }
  .hero-title { font-size: 23px; }
  .hero-eyebrow { font-size: 12.5px; margin-bottom: 6px; }
  .hero-desc { font-size: 14.5px; margin-top: 10px; }
  .hero-art { display: none; }          /* 장식이므로 휴대폰에서는 숨깁니다 */
  .creed { margin-top: 16px; padding-top: 14px; gap: 9px; }
  .creed-text { font-size: 13.5px; line-height: 1.6; }

  .main { padding: 26px 0 48px; }
  .section-title { font-size: 20px; }
  .page-head { margin-bottom: 18px; }

  .card-grid { gap: 14px; }
  .card-link { padding: 20px 20px 16px; }
  .card h2 { font-size: 18px; margin: 8px 0; }
  .card p { font-size: 14px; margin-bottom: 16px; }
  .spark { width: 60px; }

  .post-head { margin-bottom: 26px; padding-bottom: 20px; }
  .post-head h1 { font-size: 23px; }
  .prose { font-size: 15.5px; line-height: 1.8; }
  .prose h2 { font-size: 20px; }

  /* 리포트 — 좁은 화면에서는 «크게 보기»를 눈에 띄게 */
  .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, .share-tools { flex: 1 1 auto; }
  .share-tools .btn { flex: 1 1 auto; }
  .trash-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; }

  .site-foot { padding: 22px 0; }
  .site-foot .wrap { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* 긴 리포트에서 목록으로 돌아갈 길을 항상 띄워둡니다 */
  .back-float { display: inline-flex; }
  .back-link { margin-bottom: 14px; }
  .main { padding-bottom: 88px; }   /* 떠 있는 버튼에 내용이 가리지 않게 */
}

/* 게시판 안내 상자 — 투자아이디어처럼 성격을 분명히 밝혀야 하는 곳에 띄운다 */
.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) 그 안에 넣으면 판이 잘린다. */
.topbar { position: sticky; }

.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;
}

.megamenu 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 {
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-dim);
}

.megamenu 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 { 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); }

/* 요청 이력의 종류 표시 */
.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; }

.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); }

/* 분석요청 — 종류에 따라 바뀌는 입력칸 묶음 */
.ask-fields[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; }