/* 기본 뼈대 스타일. 구현본 theme/basic/css/aihub.css 의 톤(따뜻한 갈색 포인트)을 잇는다. M2 에서 확장. */
:root {
  --ink: #1f1b16;
  --ink-2: #5b4a38;
  --ink-3: #8b7a68;
  --line: #e6ddd2;
  --bg: #fffdf9;
  --panel: #fdf6ec;
  --accent: #b45907;
  --accent-2: #8a4406;
  --ok: #256b50;
  --max: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #f1ebe3; --ink-2: #cdbfae; --ink-3: #9d8d7a; --line: #3a322a; --bg: #171311; --panel: #231d18; --accent: #e07a1f; --accent-2: #f0a05a; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.7 -apple-system, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

.site-head { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-head .wrap { display: flex; align-items: center; gap: 20px; min-height: 56px; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.nav { display: flex; gap: 14px; overflow-x: auto; white-space: nowrap; font-size: 14px; color: var(--ink-2); }
.nav a { padding: 6px 0; }

main.wrap { padding: 28px 16px 60px; min-height: 60vh; }
.site-foot { border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.site-foot .wrap { display: flex; gap: 16px; padding: 20px 16px; flex-wrap: wrap; }

.hero h1 { font-size: 26px; margin: 0 0 8px; letter-spacing: -0.02em; }
.hero p { color: var(--ink-2); margin: 0 0 20px; }
.boards { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.boards a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 14px; }

/* ── 머리말 오른쪽: 내 정보 ───────────────────────────── */
.site-head .me { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.me-link .lv { color: var(--accent); font-weight: 600; margin-left: 2px; }
.me-link .pt { color: var(--ink-3); margin-left: 4px; }
.inline { display: inline; }
.btn-text { background: none; border: 0; color: var(--ink-3); cursor: pointer; font: inherit; font-size: 13px; padding: 4px 2px; }
.btn-text:hover { color: var(--accent); }

/* ── 버튼·폼 ──────────────────────────────────────────── */
.btn { display: inline-block; padding: 10px 18px; background: var(--accent); color: #fff; border: 0; border-radius: 4px;
       font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.4; }
.btn:hover { background: var(--accent-2); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--panel); color: var(--ink); }
.btn-kakao { background: #fee500; color: #191919; }
.btn-kakao:hover { background: #f5dc00; color: #191919; }
.btn-google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; }
.btn-google:hover { background: #f6f6f6; color: #1f1f1f; }
.form label { display: block; font-size: 13px; color: var(--ink-2); margin: 14px 0 6px; }
.form .row { display: flex; gap: 8px; flex-wrap: wrap; }
.form input[type=text], .form input[type=email] { flex: 1 1 220px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line);
       border-radius: 4px; background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; }
.form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.alert { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: 2px; font-size: 14px; word-break: break-all; }
.alert.ok { border-left-color: var(--ok); }

/* ── 로그인·가입 ─────────────────────────────────────── */
.auth { max-width: 460px; margin: 20px auto 0; }
.auth h1 { font-size: 24px; margin: 0 0 6px; letter-spacing: -0.02em; }
.auth-buttons { display: flex; flex-direction: column; gap: 10px; margin: 22px 0; }
.auth-buttons .btn { text-align: center; padding: 12px 18px; font-size: 15px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; margin: 18px 0 4px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── 안내 화면 ───────────────────────────────────────── */
.notice { max-width: 560px; margin: 30px auto; text-align: center; }
.notice h1 { font-size: 22px; margin: 0 0 10px; }
.notice-body { color: var(--ink-2); }

/* ── 내 정보 ─────────────────────────────────────────── */
.me-page h1 { font-size: 26px; margin: 10px 0 14px; letter-spacing: -0.02em; }
.me-page h2 { font-size: 16px; margin: 26px 0 10px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stat { padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.stat .k { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.stat b { font-size: 20px; letter-spacing: -0.01em; }
.stat .sub { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.box { margin: 18px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px; }
.box summary { cursor: pointer; font-size: 14px; color: var(--ink-2); }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
table.log { width: 100%; border-collapse: collapse; font-size: 14px; }
table.log td { padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.log .when { color: var(--ink-3); white-space: nowrap; font-size: 12px; width: 1%; }
table.log .amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 1%; }
table.log .amt.pos { color: var(--ok); }
table.log .amt.neg { color: #b42318; }
.logout-row { margin-top: 30px; }