/* 기존 테마에 없는 화면만 덧댄다. 토큰은 운영 테마 값을 그대로 쓴다
   (보라 #6b52e9 = 강조 / 네이비 #31427a = 구조 / 각진 2px / 하드 오프셋 그림자). */

/* 로그아웃 버튼을 tnb 의 링크와 똑같이 보이게 */
#tnb .signout-form, #mo-tnb .signout-form { display: inline; }
#tnb .signout-form button, #mo-tnb .signout-form button {
  padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
}
#tnb .signout-form button:hover, #mo-tnb .signout-form button:hover { text-decoration: underline; }

/* 알림 아이콘에 글꼴 아이콘이 없으므로 숫자만 둔다 (레거시도 Font Awesome 미로드) */
#util_menu li a strong { font-size: 13px; }

/* ── 회원 전용 안내 · 티저 (§7.3) ─────────────────────────────
   레거시는 alert 로 쫓아냈다. 안에 무엇이 있는지 보여주고 로그인으로 보낸다. */
.gate-box {
  border: 1px solid #dddddd; border-top: 2px solid #6b52e9; background: #fafafa;
  padding: 34px 20px; text-align: center; margin: 24px 0;
}
.gate-box h3 { font-size: 17px; font-weight: bold; color: #333333; letter-spacing: -0.05em; margin: 0; }
.gate-box p { color: #666666; font-size: 14px; letter-spacing: -0.03em; margin: 10px 0 0; }
.gate-box__btns { margin-top: 20px !important; }
.gate-box__btns .btn1, .gate-box__btns .btn2 { margin: 0 3px; }

.teaser__body {
  color: #666666; font-size: 15px; line-height: 1.8; letter-spacing: -0.03em;
  white-space: pre-wrap; padding: 26px 0 10px;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .12));
  mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .12));
}

/* ── 첨부 ─────────────────────────────────────────────────────
   첨부 151개의 45%가 hwp/ppt 다. 누르기 전에 무슨 파일인지 보이게 한다. */
.view-file {
  border: 1px solid #eeeeee; background: #fafafa; padding: 14px 16px; margin: 0 0 20px;
}
.view-file > strong {
  display: block; color: #666666; font-size: 13px; letter-spacing: -0.05em; margin-bottom: 8px;
}
.view-file ul { list-style: none; margin: 0; padding: 0; }
.view-file li { display: flex; align-items: center; gap: 9px; padding: 3px 0; font-size: 14px; }
.attach__ext {
  flex: none; min-width: 42px; padding: 1px 6px; border-radius: 2px;
  background: #31427a; color: #ffffff;
  font-size: 11px; font-weight: bold; text-align: center; text-transform: uppercase;
}
.attach__ext--ppt, .attach__ext--pptx { background: #b7472a; }
.attach__ext--pdf { background: #a6241f; }
.attach__ext--xls, .attach__ext--xlsx { background: #1d6f42; }
.attach__ext--jpg, .attach__ext--jpeg, .attach__ext--png, .attach__ext--gif { background: #666666; }
.attach__size { color: #999999; font-size: 12px; }

/* ── 댓글 ─────────────────────────────────────────────────────
   레거시 쓰기 폼은 Phase 2 잔여 작업이라 목록만 보여준다 */
#board-comment { margin-top: 40px; }
#board-comment h4 {
  border-bottom: 1px solid #dddddd; font-size: 15px; font-weight: bold;
  letter-spacing: -0.05em; padding-bottom: 10px; margin: 0;
}
#board-comment h4 strong { color: #6b52e9; }
#board-comment > ul { list-style: none; margin: 0; padding: 0; }
#board-comment > ul > li { border-bottom: 1px solid #f1f1f1; padding: 15px 2px; }
#board-comment .info { color: #999999; font-size: 12px; margin: 0 0 5px; }
#board-comment .info .writer { color: #333333; font-weight: bold; margin-right: 8px; }
#board-comment .txt { font-size: 14px; letter-spacing: -0.03em; white-space: pre-wrap; }
#board-comment .no-data { color: #aaaaaa; font-size: 13px; padding: 24px 0; text-align: center; }
.comment-note {
  background: #fafafa; border: 1px solid #eeeeee; color: #666666;
  font-size: 13px; letter-spacing: -0.03em; margin: 14px 0 0; padding: 12px 14px;
}

/* ── 로그인 오류 · 오류 페이지 ────────────────────────────────
   로그인 화면 자체는 레거시 `#signin` CSS 가 맡는다 */
.form-error {
  background: #fdf2f4; border: 1px solid #f3c6cd; border-left: 2px solid #e4002b;
  color: #9b1024; font-size: 14px; margin-bottom: 16px; padding: 11px 13px;
}
.error-box { padding: 30px 0 60px; }
.error-box p { color: #666666; font-size: 15px; letter-spacing: -0.03em; }
.error-box .btns { margin-top: 24px; }
.error-box .btn1, .error-box .btn2 { margin-right: 6px; }

/* ── 모바일 전체메뉴 (레거시 layout.js 동작을 바닐라로) ───────── */
#slide-bg {
  background: rgba(0, 0, 0, .45); display: none; height: 100%; left: 0;
  position: fixed; top: 0; width: 100%; z-index: 998;
}
#slide-bg.on { display: block; }
body.slide-open { overflow: hidden; }

/* 추천/비추천 버튼은 레거시에서 누를 수 있다. 쓰기 기능은 Phase 2 잔여라 지금은 표시만 한다. */
#board-likes > button[disabled] { cursor: default; opacity: 1; }

/* 글 작성 화면에서 쓰는 몇 가지 (레거시 CSS 가 안 덮는 부분) */
.inline-form { display: inline; }
#board-write textarea {
  border: 1px solid #dddddd; box-sizing: border-box; font: inherit; font-size: 15px;
  line-height: 1.7; padding: 12px; width: 100%; min-height: 320px; resize: vertical;
}
#board-write .write-attach { list-style: none; margin: 0; padding: 0; font-size: 14px; }
#board-write .write-attach li { padding: 2px 0; }
#board-write .bytetxt { color: #999999; font-size: 12px; margin-left: 8px; }

/* 좋아요/싫어요 — 내가 누른 쪽을 표시한다.
   레거시에는 이 상태가 없었다(한 번 누르면 끝이라 표시할 이유도 없었다).
   번복을 허용하면서 "지금 내가 뭘 눌렀는지" 가 보여야 한다. */
#board-likes > button { cursor: pointer; opacity: .55; transition: opacity .15s; }
#board-likes > button:hover { opacity: .85; }
#board-likes > button.on { opacity: 1; }
#board-likes > button.on p { color: #6b52e9; }