:root {
  --bg:#f6f7fb;
  --bg-soft:#fafbfd;
  --card:#ffffff;
  --line:#eceef3;
  --line-strong:#e2e5ec;
  --text:#1a1d27;
  --muted:#6b7080;
  --muted-dim:#9aa0b0;
  --pink:#ec4899;
  --purple:#a855f7;
  --grad:linear-gradient(90deg,#ec4899 0%,#a855f7 100%);
  --shadow:0 1px 2px rgba(20,22,40,.04), 0 6px 20px rgba(20,22,40,.05);
}
/* ── 다크모드 (토글 시 :root 변수 덮어쓰기) ── */
[data-theme="dark"]{
  --bg:#0b0b12; --bg-soft:#11111b; --card:#15151f;
  --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.14);
  --text:#eef0f6; --muted:#9aa0b0; --muted-dim:#6b7080;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
}
[data-theme="dark"] .site-header{ background:rgba(11,11,18,.72); }
[data-theme="dark"] .authbox input,[data-theme="dark"] .authbox select,[data-theme="dark"] .authbox textarea{ background:#0e0e16; }
[data-theme="dark"] .post-body{ color:#dfe2ec; }
[data-theme="dark"] .cbody{ color:#cfd2dd; }
[data-theme="dark"] .policy p{ color:#c7cad3; }
[data-theme="dark"] .formerror{ background:#2a1015; border-color:#7f1d2e; color:#fca5b5; }
[data-theme="dark"] .agreebox{ border-color:var(--line-strong); }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; color:var(--text); line-height:1.65;
  font-family:"Pretendard",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(168,85,247,.07), transparent 60%),
    radial-gradient(820px 460px at 12% -6%, rgba(236,72,153,.06), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
}
a { color:#a23bd8; text-decoration:none; transition:color .15s; }
a:hover { color:#7c2bb0; }
.wrap { max-width:920px; margin:0 auto; padding:0 18px; }

/* ── 헤더 ── */
.site-header {
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.8); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap { display:flex; align-items:center; gap:26px; height:60px; }
.logo {
  font-weight:800; font-size:21px; letter-spacing:-.02em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.logo:hover { opacity:.85; }
.topnav { display:flex; gap:20px; }
.topnav a { color:var(--muted); font-size:14.5px; font-weight:500; }
.topnav a:hover { color:var(--text); }

/* ── 히어로 ── */
.hero { padding:44px 0 18px; }
.hero h1 {
  margin:0 0 10px; font-size:34px; font-weight:800; letter-spacing:-.03em; color:var(--text);
}
.hero p { color:var(--muted); margin:0; font-size:15.5px; }

/* ── 게시판 카드 ── */
.board-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:26px 0; }
.board-card {
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:18px; display:flex; flex-direction:column; gap:5px; box-shadow:var(--shadow);
  transition:transform .16s, border-color .16s, box-shadow .16s; position:relative; overflow:hidden;
}
.board-card::before {
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad); opacity:0; transition:opacity .16s;
}
.board-card:hover { transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 8px 28px rgba(20,22,40,.10); }
.board-card:hover::before { opacity:1; }
.board-name { font-weight:700; color:var(--text); font-size:15.5px; }
.board-desc { font-size:13px; color:var(--muted); }

/* ── 글 목록 ── */
.recent h2, .related h2, .comments h2 {
  font-size:17px; margin:30px 0 12px; padding-bottom:10px;
  border-bottom:1px solid var(--line-strong); color:var(--text); font-weight:700;
}
.post-list { list-style:none; padding:0; margin:0; }
.post-list li { padding:13px 4px; border-bottom:1px solid var(--line); transition:background .12s; border-radius:8px; }
.post-list li:hover { background:rgba(168,85,247,.04); }
.post-list a { color:var(--text); font-weight:500; }
.post-list a:hover { color:#7c2bb0; }
.post-list .meta { display:block; font-size:12.5px; color:var(--muted-dim); margin-top:4px; }
.post-list .empty, .empty { color:var(--muted-dim); }

/* ── 브레드크럼 / 게시판 헤더 ── */
.crumbs { font-size:13px; color:var(--muted-dim); margin:20px 0 6px; }
.crumbs a { color:var(--muted); }
.board-title { font-size:26px; margin:10px 0 4px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.board-sub { color:var(--muted); margin:0 0 16px; }

/* ── 글 상세 ── */
.post {
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:28px; margin-top:18px; box-shadow:var(--shadow);
}
.post h1 { font-size:24px; margin:0 0 10px; color:var(--text); font-weight:800; letter-spacing:-.02em; }
.post .meta { font-size:13px; color:var(--muted-dim); margin:0 0 22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.post-body { white-space:pre-wrap; font-size:16px; color:#2b2f3a; }

/* ── 댓글 ── */
.comment {
  background:var(--bg-soft); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-bottom:9px;
}
.cmeta { font-size:12.5px; color:var(--muted-dim); margin-bottom:4px; }
.cbody { color:#3a3e4a; font-size:14.5px; }

/* ── 푸터 ── */
.site-footer { margin-top:64px; border-top:1px solid var(--line); }
.site-footer .wrap { padding:24px 18px; color:var(--muted-dim); font-size:13px; }
.site-footer .small { font-size:12px; color:#bcc1cd; }

/* 버튼(추후 글쓰기/로그인용) */
.btn-grad {
  display:inline-block; padding:11px 20px; border:0; border-radius:12px; cursor:pointer;
  background:var(--grad); color:#fff; font-weight:700; font-size:14.5px;
  box-shadow:0 6px 22px rgba(236,72,153,.28); transition:transform .14s, box-shadow .14s;
}
.btn-grad:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(236,72,153,.4); color:#fff; }
.btn-grad.full { width:100%; margin-top:18px; }

/* ── 헤더 로그인 영역 ── */
.authnav { margin-left:auto; display:flex; align-items:center; gap:14px; font-size:14px; }
.authnav .ghost { color:var(--muted); }
.authnav .ghost:hover { color:var(--text); }
.authnav .join {
  background:var(--grad); color:#fff; padding:7px 15px; border-radius:9px; font-weight:700; font-size:13.5px;
  box-shadow:0 4px 14px rgba(236,72,153,.3);
}
.authnav .join:hover { color:#fff; opacity:.92; }
.authnav .me { display:inline-flex; align-items:center; gap:6px; color:var(--text); font-weight:600; }
.authnav .me em { font-style:normal; font-size:11.5px; font-weight:700; color:#a23bd8;
  background:rgba(168,85,247,.1); padding:2px 7px; border-radius:20px; }
@media(max-width:680px){ .topnav{display:none;} }

/* ── 플래시 메시지 ── */
.flash { background:rgba(168,85,247,.1); border:1px solid rgba(168,85,247,.3); color:#7c2bb0;
  padding:11px 16px; border-radius:10px; margin:18px 0; font-size:14px; }

/* ── 폼 입력 (라이트) ── */
.authbox label, .authbox p.reqnote { font-size:13.5px; color:var(--muted); }
.authbox label { display:block; margin:14px 0 6px; font-weight:600; color:var(--text); }
.authbox input, .authbox select, .authbox textarea {
  width:100%; background:#fff; border:1px solid var(--line-strong); border-radius:10px;
  padding:11px 13px; font-size:14.5px; font-family:inherit; color:var(--text);
}
.authbox input:focus, .authbox select:focus, .authbox textarea:focus { outline:none; border-color:var(--purple); }
.authbox textarea { resize:vertical; line-height:1.6; }

/* ── 가입/로그인 박스 ── */
.authbox { max-width:480px; margin:30px auto; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:30px 28px; box-shadow:var(--shadow); }
.authbox.wide { max-width:720px; }
.authtitle { text-align:center; font-size:24px; font-weight:800; margin:0 0 4px; color:var(--text); }
.authsub { text-align:center; color:var(--muted); margin:0 0 18px; font-size:14px; }
.authfoot { text-align:center; margin-top:18px; color:var(--muted); font-size:14px; }
.formerror { background:#fff0f3; border:1px solid #fca5b5; color:#c11d48; padding:10px 14px;
  border-radius:10px; font-size:14px; margin-bottom:8px; }

/* ── 약관 동의 ── */
.agreebox { margin-top:20px; border:1px solid var(--line-strong); border-radius:12px; padding:14px 16px; }
.agreebox hr { border:0; border-top:1px solid var(--line); margin:10px 0; }
.agree { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text);
  font-weight:400; margin:8px 0; cursor:pointer; }
.agree.all { font-size:14.5px; }
.agree input { width:auto; }
.req-tag { color:#e11d48; font-weight:700; }
.opt-tag { color:var(--muted); font-weight:700; }
.reqnote { color:#e11d48; font-size:12.5px; margin:10px 2px 0; }

/* ── 약관 본문 ── */
.policy h3 { font-size:15px; margin:18px 0 6px; color:var(--text); }
.policy p { font-size:14px; color:#33373f; }
.policy .muted { color:var(--muted-dim); font-size:12.5px; margin-top:20px; }

/* ── 테마 토글 / 출석 버튼 ── */
.theme-btn { background:transparent; border:1px solid var(--line-strong); border-radius:9px;
  width:34px; height:34px; cursor:pointer; font-size:15px; line-height:1; color:var(--text); }
.theme-btn:hover { border-color:var(--purple); }
.attend { background:rgba(168,85,247,.12); color:#a23bd8; border:1px solid rgba(168,85,247,.3);
  border-radius:9px; padding:6px 12px; font-size:13px; font-weight:700; cursor:pointer; }
.attend:hover { background:rgba(168,85,247,.2); }

/* ── 랭킹 ── */
.rank-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:22px 0; }
.rank-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow); }
.rank-card h2 { font-size:15.5px; margin:0 0 12px; color:var(--text); }
.rank-list { list-style:none; margin:0; padding:0; counter-reset:r; }
.rank-list li { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.rank-list li:last-child { border-bottom:0; }
.rank-list .rk { width:22px; height:22px; flex:none; text-align:center; line-height:22px; font-size:12px;
  font-weight:700; border-radius:6px; background:rgba(168,85,247,.1); color:#a23bd8; }
.rank-list li:nth-child(1) .rk { background:var(--grad); color:#fff; }
.rank-list .rk-name { flex:1; color:var(--text); font-weight:500; }
.rank-list .rk-name em { font-style:normal; font-size:11px; color:#a23bd8; background:rgba(168,85,247,.1); padding:1px 6px; border-radius:10px; }
.rank-list .rk-val { color:var(--muted); font-weight:700; font-size:13px; }
.rank-list .empty { color:var(--muted-dim); justify-content:center; }

/* ── 공유/스크랩/신고 ── */
.post-actions { display:flex; gap:10px; margin:16px 0; justify-content:center; }
.act { background:var(--card); border:1px solid var(--line-strong); border-radius:10px;
  padding:9px 16px; font-size:13.5px; font-weight:600; color:var(--text); cursor:pointer; }
.act:hover { border-color:var(--purple); }
.act.on { background:rgba(168,85,247,.12); color:#a23bd8; border-color:rgba(168,85,247,.4); }
.act.danger:hover { border-color:#e11d48; color:#e11d48; }
.report-box { display:none; max-width:420px; margin:0 auto 16px; background:var(--bg-soft);
  border:1px solid var(--line-strong); border-radius:12px; padding:14px 16px; }
.report-box.show { display:block; }
.report-box .rb-title { font-size:13.5px; font-weight:700; margin-bottom:8px; color:var(--text); }
.report-box select, .report-box textarea { width:100%; margin-bottom:8px; padding:9px 11px;
  border:1px solid var(--line-strong); border-radius:9px; background:var(--card); color:var(--text);
  font-family:inherit; font-size:14px; }
.report-box .btn-grad { width:100%; margin-top:2px; padding:9px; }

/* ── 배너 ── */
.bannerzone { display:flex; flex-direction:column; gap:10px; margin:14px auto; }
.bannerzone.top { margin-top:18px; }
.banner { display:block; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.banner img { display:block; width:100%; height:auto; }
.banner-text { display:block; padding:16px; text-align:center; background:var(--grad); color:#fff;
  font-weight:700; border-radius:12px; }

/* ── 고정글 ── */
.post-list li.pinned { background:rgba(168,85,247,.05); border-radius:8px; }
.pin-badge { font-size:11px; font-weight:700; color:#a23bd8; background:rgba(168,85,247,.1); padding:2px 7px; border-radius:6px; }

/* ===== 랭글식 레이아웃 (2단) ===== */
.layout { display:grid; grid-template-columns:1fr 300px; gap:22px; margin-top:22px; align-items:start; }
.col-main { min-width:0; }
@media(max-width:880px){ .layout{ grid-template-columns:1fr; } .col-side{ order:-1; } }

/* 아바타 */
.avatar { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:50%; background:var(--grad); color:#fff;
  font-weight:700; font-size:14px; }
.avatar.sm { width:22px; height:22px; font-size:11px; vertical-align:middle; }
.avatar.lg { width:46px; height:46px; font-size:18px; }

/* 카테고리 칩 */
.cat-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.pill { padding:7px 14px; border-radius:20px; background:var(--card); border:1px solid var(--line-strong);
  font-size:13.5px; color:var(--muted); font-weight:600; }
.pill:hover { color:var(--text); border-color:var(--purple); }
.pill.active { background:var(--grad); color:#fff; border-color:transparent; }

/* 게시판 헤더 */
.board-head { display:flex; align-items:flex-end; justify-content:space-between; margin:8px 0 12px; }
.board-head h2 { font-size:18px; margin:0; color:var(--text); }
.write-btn { background:var(--grad); color:#fff; padding:9px 16px; border-radius:10px;
  font-weight:700; font-size:14px; box-shadow:0 4px 14px rgba(236,72,153,.3); }
.write-btn:hover { color:#fff; opacity:.92; }

/* 게시판 테이블 */
.board-table { width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.board-table th { font-size:12.5px; color:var(--muted); font-weight:600; text-align:left;
  padding:11px 12px; border-bottom:1px solid var(--line-strong); background:var(--bg-soft); }
.board-table td { padding:12px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
.board-table tr:last-child td { border-bottom:0; }
.board-table tr:hover td { background:rgba(168,85,247,.03); }
.board-table tr.pinned td { background:rgba(168,85,247,.05); }
.c-title { width:auto; }
.c-title a { color:var(--text); font-weight:500; }
.c-title a:hover { color:#7c2bb0; }
.c-title .cc { color:var(--pink); font-size:12.5px; font-weight:700; }
.c-board { width:96px; }
.c-author { width:130px; color:var(--muted); white-space:nowrap; }
.c-author .aname { margin-left:6px; font-size:13px; }
.c-date { width:74px; color:var(--muted-dim); font-size:12.5px; white-space:nowrap; }
.c-num { width:50px; text-align:center; color:var(--muted-dim); font-size:13px; }
.c-no { width:54px; text-align:center; color:var(--muted-dim); font-size:13px; }
.btag { font-size:11.5px; color:#a23bd8; background:rgba(168,85,247,.1); padding:3px 8px; border-radius:6px; white-space:nowrap; }
@media(max-width:680px){ .c-board,.c-num,.c-no,.c-date{ display:none; } }

/* 사이드바 카드 */
.col-side { display:flex; flex-direction:column; gap:14px; }
.side-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.side-card h3 { font-size:14px; margin:0 0 12px; color:var(--text); }
.profile .p-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.p-nick { display:block; color:var(--text); font-size:15px; }
.logout { font-size:12px; color:var(--muted-dim); }
.p-stats { display:flex; justify-content:space-between; text-align:center; margin-bottom:10px; }
.p-stats div b { display:block; font-size:15px; color:var(--text); }
.p-stats div span { font-size:11.5px; color:var(--muted); }
.lvbar { height:6px; background:var(--line-strong); border-radius:4px; overflow:hidden; margin-bottom:14px; }
.lvbar span { display:block; height:100%; background:var(--grad); }
.p-links { display:flex; justify-content:space-around; border-top:1px solid var(--line); padding-top:10px; }
.p-links a { font-size:13px; color:var(--muted); font-weight:500; }
.p-links a:hover { color:var(--purple); }
.side-login { color:var(--muted); font-size:13.5px; margin:0 0 12px; }
.p-links2 { display:flex; gap:8px; }
.p-links2 .join { flex:1; text-align:center; background:var(--grad); color:#fff; padding:9px; border-radius:9px; font-weight:700; font-size:13.5px; }
.p-links2 .ghost2 { flex:1; text-align:center; border:1px solid var(--line-strong); padding:9px; border-radius:9px; color:var(--text); font-weight:600; font-size:13.5px; }

/* 사이드 랭킹 */
.side-rank { list-style:none; margin:0 0 10px; padding:0; }
.side-rank li { display:flex; align-items:center; gap:9px; padding:7px 0; font-size:13.5px; }
.side-rank .rk { width:20px; height:20px; flex:none; text-align:center; line-height:20px; font-size:11px;
  font-weight:700; border-radius:5px; background:rgba(168,85,247,.1); color:#a23bd8; }
.side-rank li:nth-child(1) .rk { background:var(--grad); color:#fff; }
.side-rank .nm { flex:1; color:var(--text); }
.side-rank .pt { color:var(--muted); font-weight:700; font-size:12.5px; }
.side-rank .empty { color:var(--muted-dim); }
.more { font-size:12.5px; color:var(--purple); font-weight:600; }

/* 출석 위젯 */
.att-stat { text-align:center; margin-bottom:12px; }
.att-stat b { display:block; font-size:18px; color:var(--text); }
.att-stat span { font-size:12px; color:var(--muted); }
.att-btn { width:100%; background:var(--grad); color:#fff; border:0; border-radius:10px; padding:11px;
  font-weight:700; font-size:13.5px; cursor:pointer; box-shadow:0 4px 14px rgba(236,72,153,.3); }
.att-done { text-align:center; color:#16a34a; font-weight:600; font-size:13.5px; background:rgba(34,197,94,.1); padding:10px; border-radius:10px; }

/* 글 작성자 줄 */
.post-by { display:flex; align-items:center; gap:10px; margin:6px 0 20px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.post-by b { color:var(--text); font-size:14.5px; }
.pby-meta { display:block; font-size:12.5px; color:var(--muted-dim); }

/* 해시태그 */
.hashtags { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.htag { font-size:12.5px; color:#a23bd8; background:rgba(168,85,247,.1); padding:4px 11px; border-radius:16px; }

/* 좋아요 */
.like-wrap { display:flex; justify-content:center; margin:20px 0 10px; }
.like-btn { background:var(--card); border:1px solid var(--line-strong); border-radius:24px;
  padding:11px 26px; font-size:14.5px; font-weight:700; color:var(--text); cursor:pointer; transition:.15s; }
.like-btn:hover { border-color:var(--pink); }
.like-btn.on { background:rgba(236,72,153,.12); color:var(--pink); border-color:rgba(236,72,153,.4); }

/* 액션바 구분선 */
.post-actions .vbar { width:1px; height:18px; background:var(--line-strong); }

/* 댓글 카드 */
.comment { display:flex; gap:10px; padding:14px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; margin-bottom:9px; }
.comment .c-main { flex:1; min-width:0; }
.comment .c-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.comment .c-head b { font-size:13.5px; color:var(--text); }
.comment .c-time { font-size:11.5px; color:var(--muted-dim); }
.comment .cbody { font-size:14px; color:var(--text); }
.comment-form { margin-top:14px; background:var(--card); border:1px solid var(--line-strong); border-radius:12px; padding:12px; }
.comment-form textarea { width:100%; border:0; background:transparent; resize:vertical; font-family:inherit;
  font-size:14px; color:var(--text); outline:none; }
.comment-form .cf-foot { display:flex; justify-content:flex-end; margin-top:8px; }
.comment-form .btn-grad { padding:8px 22px; }
.comment-login { margin-top:14px; text-align:center; color:var(--muted); font-size:13.5px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:16px; }

/* ===== 헤더 검색바 (2줄 구조) ===== */
.hdr-top { gap:18px; }
.searchbar { flex:1; max-width:440px; display:flex; align-items:center;
  background:var(--bg-soft); border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; }
.searchbar input { flex:1; border:0; background:transparent; padding:9px 13px; font-size:14px; color:var(--text); outline:none; }
.searchbar button { border:0; background:transparent; padding:0 13px; cursor:pointer; font-size:15px; }
.hdr-nav { height:46px !important; border-top:1px solid var(--line); }
.hdr-nav .topnav { gap:20px; }
@media(max-width:680px){ .searchbar{ max-width:none; } .authnav .me em{ display:none; } .authnav .ghost{ font-size:13px; } }

/* 작성자 링크 */
.c-author a { color:var(--muted); display:inline-flex; align-items:center; }
.c-author a:hover .aname { color:var(--purple); }
.post-by a { color:inherit; }
.post-by b a:hover { color:var(--purple); }

/* 글 첨부 이미지 */
.post-images { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.post-images img { width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }

/* 프로필 페이지 */
.profile-head { display:flex; align-items:center; gap:18px; margin:24px 0; padding:22px;
  background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.avatar.xl { width:64px; height:64px; font-size:26px; }
.profile-head h1 { font-size:22px; margin:0 0 8px; color:var(--text); }
.ph-badges { display:flex; flex-wrap:wrap; gap:8px; }
.ph-level { background:var(--grad); color:#fff; padding:4px 12px; border-radius:16px; font-size:13px; font-weight:700; }
.ph-stat { background:var(--bg-soft); border:1px solid var(--line); padding:4px 12px; border-radius:16px; font-size:13px; color:var(--muted); }
.ph-note { color:var(--muted-dim); font-size:13px; margin:8px 0 0; }

/* 검색 페이지 */
.search-page { display:flex; gap:8px; margin:14px 0 18px; }
.search-page input { flex:1; padding:11px 14px; border:1px solid var(--line-strong); border-radius:10px;
  background:var(--card); color:var(--text); font-size:15px; outline:none; }
.search-page input:focus { border-color:var(--purple); }
.search-page .btn-grad { padding:11px 22px; }

/* ── 대댓글 ── */
.reply-btn { background:none; border:0; color:var(--muted); font-size:12.5px; cursor:pointer; padding:4px 0; margin-top:2px; }
.reply-btn:hover { color:var(--purple); }
.reply-form { display:none; gap:8px; margin-top:8px; }
.reply-form.show { display:flex; }
.reply-form textarea { flex:1; border:1px solid var(--line-strong); border-radius:8px; padding:8px 10px;
  font-family:inherit; font-size:13.5px; background:var(--card); color:var(--text); resize:vertical; }
.reply-form .btn-grad { padding:8px 16px; white-space:nowrap; align-self:flex-start; }
.comment.reply { margin-left:26px; margin-top:8px; background:var(--bg-soft); }

/* ── 모바일 최적화 ── */
@media(max-width:680px){
  .wrap { padding:0 14px; }
  /* 상단 메뉴: 숨기지 말고 가로 스크롤로 */
  .topnav { display:flex !important; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; gap:16px; }
  .hdr-nav { height:auto !important; padding:8px 0; }
  .site-header .hdr-top { height:auto; padding:10px 14px; flex-wrap:wrap; gap:10px; }
  .searchbar { order:3; flex-basis:100%; max-width:none; }
  .hero { padding:26px 0 8px; } .hero h1 { font-size:25px; }
  .hero p { font-size:14px; }
  .board-title { font-size:21px; }
  .recent h2, .related h2, .comments h2 { font-size:16px; }
  .post { padding:18px; } .post h1 { font-size:20px; } .post-body { font-size:15.5px; }
  .board-table td { padding:11px 8px; font-size:14px; }
  .c-author .aname { display:none; }          /* 모바일 글쓴이: 아바타만 */
  .post-actions { gap:6px; } .act { padding:9px 13px; font-size:13px; }
  .like-btn { padding:11px 22px; }
  .comment.reply { margin-left:14px; }
  .rank-grid { grid-template-columns:1fr; }
  .authbox { padding:22px 18px; margin:18px auto; }
  .profile-head { flex-direction:column; text-align:center; gap:12px; }
  .ph-badges { justify-content:center; }
}

/* 개발모드 인증코드 안내 */
.devcode { background:#fff8e6; border:1px solid #f3d989; border-radius:10px; padding:12px 14px;
  margin-bottom:10px; font-size:14px; color:#8a6d1a; }
.devcode b { font-size:20px; letter-spacing:3px; color:#b8860b; }
.devcode span { font-size:12px; color:#a98a3a; }

/* ===== 가입 위저드 ===== */
.steps { display:flex; justify-content:center; gap:8px; margin-bottom:20px; }
.steps .st { position:relative; font-size:12.5px; color:var(--muted-dim); font-weight:600;
  padding:5px 12px; border-radius:16px; background:var(--bg-soft); border:1px solid var(--line); }
.steps .st.on { color:#fff; background:var(--grad); border-color:transparent; }
.ilabel { font-weight:700; color:var(--text); font-size:14.5px; margin:18px 0 10px; }
.ilabel span { font-weight:400; color:var(--muted); font-size:12.5px; }
.ipills { display:flex; flex-wrap:wrap; gap:8px; }
.ipill { padding:8px 15px; border-radius:20px; background:var(--card); border:1px solid var(--line-strong);
  font-size:13.5px; color:var(--text); cursor:pointer; transition:.14s; }
.ipill:hover { border-color:var(--purple); }
.ipill.sel { background:var(--grad); color:#fff; border-color:transparent; font-weight:700; }
.wbtns { display:flex; gap:10px; margin-top:24px; }
.wbtns .ghost-btn { flex:0 0 30%; border:1px solid var(--line-strong); background:var(--card);
  border-radius:11px; padding:12px; color:var(--text); font-weight:600; cursor:pointer; }
.wbtns .btn-grad { flex:1; }
.wbtns-foot { display:flex; justify-content:space-between; margin-top:16px; font-size:13px; }
.wbtns-foot a { color:var(--muted); }
.codeinput { text-align:center; font-size:24px !important; letter-spacing:10px; font-weight:700; }