/*
Theme Name: Textboard
Author: Yong Ha
Description: A minimal, text-first forum theme. Members register, start topics in forums and reply to each other. No plugins required — forums, topics and replies are built in.
Version: 0.26.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: textboard
*/

:root {
	--bg: #ecece6;
	--panel: #ffffff;
	--line: #c4c4b8;
	--head: #263552;
	--head-text: #ffffff;
	--sub: #dde2ea;
	--row: #ffffff;
	--row-alt: #f5f5f0;
	--text: #1c1c1a;
	--muted: #57574f;
	--link: #183c8c;
	--visited: #563887;
	--hover: #9a3412;
	--warn-bg: #fff6e8;
	--warn-line: #b45309;
	--head-muted: #c9d1e0;
	--input-bg: #ffffff;
	--input-line: #8f8f84;
	--btn-line: #7f8794;
	--btn-hover: #cdd5e1;
	--font: Verdana, Tahoma, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 12px/1.5 var(--font);
}

a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: var(--hover); }

.wrap { max-width: var(--wrap-max, none); margin: 0 auto; padding: 0 16px; }
@media (min-width: 1600px) { .wrap { padding: 0 24px; } }

.sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Header ---------- */
.site-head { background: var(--head); color: var(--head-text); padding: 8px 0; }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.site-title { color: var(--head-text) !important; font-size: 16px; font-weight: bold; text-decoration: none; }
.site-desc { color: var(--head-muted); font-size: 11px; margin-left: 8px; }
.search { display: flex; gap: 4px; }
.search input { width: 180px; }

.userbar { background: var(--sub); border-bottom: 1px solid var(--line); padding: 4px 0; }
.userbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; }

/* Main menu (Appearance → Menus → "Main menu (top bar)") */
.tb-menu, .tb-menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.tb-menu { display: flex; flex-wrap: wrap; align-items: center; }
.tb-menu > li { position: relative; }
.tb-menu > li + li::before { content: "|"; color: var(--muted); padding: 0 6px; }
.tb-menu .current-menu-item > a, .tb-menu .current-menu-ancestor > a { font-weight: bold; }
.tb-menu .menu-item-has-children > a::after { content: " \25BE"; font-size: 10px; }
.tb-menu .sub-menu {
	display: none; position: absolute; top: 100%; left: 0; z-index: 20; min-width: 190px;
	background: var(--panel); border: 1px solid var(--line); padding: 3px 0;
}
.tb-menu li:hover > .sub-menu, .tb-menu li:focus-within > .sub-menu { display: block; }
.tb-menu .sub-menu a { display: block; padding: 4px 10px; white-space: nowrap; }
.tb-menu .sub-menu a:hover { background: var(--row-alt); }

/* Footer menu */
.foot-menu { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; }
.foot-menu li + li::before { content: "\00B7"; padding: 0 6px; }
.sep { color: var(--muted); padding: 0 4px; }

main.wrap { padding-top: 12px; padding-bottom: 20px; }

.crumbs { margin: 0 0 8px; }
.page-title { font-size: 15px; margin: 0 0 4px; }
.page-desc { color: var(--muted); margin: 0 0 8px; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin: 6px 0; }

/* ---------- Tables ---------- */
table.tb { width: 100%; border-collapse: collapse; background: var(--row); border: 1px solid var(--line); margin: 0 0 12px; }
.tb th, .tb td { padding: 4px 6px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.tb thead th { background: var(--head); color: var(--head-text); font-weight: bold; }
.tb tr.group th { background: var(--sub); color: var(--text); font-weight: bold; }
.tb tbody tr:nth-child(even) td { background: var(--row-alt); }
.tb .num { width: 64px; text-align: center; white-space: nowrap; }
/* Last activity: only as wide as its longest line; the first column gets the rest. */
.tb .last { width: 1%; white-space: nowrap; font-size: 11px; }
.tb .forum-name { font-weight: bold; }
.tb .topic-title { font-weight: bold; }
.tb .empty { color: var(--muted); text-align: center; padding: 12px; }

.small { font-size: 11px; color: var(--muted); }
.tag { font-size: 11px; font-weight: bold; color: var(--hover); }
.pages-inline { font-size: 11px; margin-left: 4px; }

/* ---------- Forum index grid ---------- */
.forum-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 0 12px; }
.forum-grid table.tb { margin: 0; }
.tb tr.cat-head th { font-size: 13px; padding: 5px 6px; }
.forum-grid .tb tr.cat-head th { text-align: center; } /* category titles on the index */
.tb tr.cat-head a, .tb tr.cat-head a:visited { color: var(--head-text); text-decoration: none; }
.tb tr.cat-head a:hover { text-decoration: underline; }
.tb tr.col-head th { background: var(--sub); color: var(--text); font-weight: bold; font-size: 11px; }
@media (min-width: 1100px) {
	.forum-grid.cols-2, .forum-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
	.forum-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sub-forums shown under their parent on the index (and on category pages) */
.tb tr.sub-row td:first-child { padding-left: 22px; }
.tb tr.depth-2 td:first-child { padding-left: 40px; }
.tb tr.depth-3 td:first-child { padding-left: 58px; }
.tb tr.depth-4 td:first-child { padding-left: 76px; }
.tb tr.sub-row .forum-name { font-weight: bold; font-size: 11px; }
.tb .branch { color: var(--muted); margin-right: 4px; }

/* ---------- Thread ---------- */
.thread { margin: 0 0 12px; }
.post { display: grid; grid-template-columns: 170px 1fr; background: var(--row); border: 1px solid var(--line); margin-top: -1px; }
.post-user { background: var(--row-alt); border-right: 1px solid var(--line); padding: 6px; font-size: 11px; }
.post-user .name { font-size: 12px; font-weight: bold; }
.post-user .role { color: var(--hover); font-weight: bold; }
.post-main { min-width: 0; }
.post-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; background: var(--sub); border-bottom: 1px solid var(--line); padding: 3px 6px; font-size: 11px; }
.post-body { padding: 8px; overflow-wrap: anywhere; }
.post-body p { margin: 0 0 8px; }
.post-body p:last-child { margin-bottom: 0; }
.post-body blockquote { margin: 6px 0; padding: 4px 8px; background: var(--row-alt); border: 1px solid var(--line); }
.post-body pre, .post-body code { font-family: "Courier New", Consolas, monospace; font-size: 12px; }
.post-body pre { background: var(--row-alt); border: 1px solid var(--line); padding: 6px; overflow-x: auto; }
.post-body img { max-width: 100%; height: auto; }

.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--hover); }

/* ---------- Boxes & forms ---------- */
.box { background: var(--panel); border: 1px solid var(--line); margin: 0 0 12px; }
.box > h2 { margin: 0; padding: 4px 6px; background: var(--head); color: var(--head-text); font-size: 12px; }
.box .in { padding: 8px; }
.narrow { max-width: 460px; }
.narrow.wide-narrow { max-width: 620px; }

label { display: block; font-weight: bold; margin: 8px 0 2px; }
label.inline { display: flex; align-items: center; gap: 6px; font-weight: normal; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea {
	font: inherit; color: var(--text); background: var(--input-bg);
	border: 1px solid var(--input-line); padding: 3px 5px; max-width: 100%;
}
.field { width: 100%; }
textarea { width: 100%; min-height: 180px; resize: vertical; }
.btn {
	font: inherit; font-weight: bold; color: var(--text) !important; text-decoration: none;
	background: var(--sub); border: 1px solid var(--btn-line); padding: 3px 10px; cursor: pointer; display: inline-block;
}
.btn:hover { background: var(--btn-hover); }
.actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hp { position: absolute; left: -9999px; }
.tb-turnstile { margin: 10px 0 4px; min-height: 65px; }

.notice { background: var(--warn-bg); border: 1px solid var(--warn-line); padding: 6px 8px; margin: 0 0 10px; }
.notice ul { margin: 0; padding-left: 16px; }
.info { background: var(--panel); border: 1px solid var(--line); padding: 8px; margin: 0 0 12px; }

/* Kakao / Naver buttons (brand colours) */
.social { display: flex; flex-direction: column; gap: 6px; }
.social .btn { text-align: center; padding: 8px 10px; border: 0; }
.btn-kakao { background: #fee500; color: #191919 !important; }
.btn-kakao:hover { background: #f0d800; }
.btn-naver { background: #03c75a; color: #fff !important; }
.btn-naver:hover { background: #02b351; }
.btn-naver:visited { color: #fff !important; }

/* ---------- Rooms ---------- */
.sm-only { display: none; }
.room { margin: 0 0 12px; }
.room-log {
	height: 60vh; min-height: 280px; overflow-y: auto; background: var(--panel);
	border: 1px solid var(--line); padding: 6px 8px;
}
/* Newest at the bottom: a short chat sits at the bottom and grows upward. */
.room-log { display: flex; flex-direction: column; }
.room-log > :first-child { margin-top: auto; }
.msg.new { animation: tb-msg-in .25s ease-out; }
@keyframes tb-msg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msg.new { animation: none; } }
/* The admin's messages and clips sit on the right, apart from everyone else's. */
.msg.from-admin { align-self: flex-end; max-width: 85%; text-align: right; }
.msg.from-admin .msg-text { text-align: left; display: inline-block; vertical-align: top; }
.msg.from-admin .vbox { text-align: left; }
.msg { padding: 3px 0; border-bottom: 1px solid var(--row-alt); line-height: 1.5; overflow-wrap: anywhere; }
.msg-time { color: var(--muted); font-size: 11px; margin-right: 6px; }
.msg-who { font-weight: bold; margin-right: 4px; }
.msg-who::after { content: ":"; }
.msg-who.member { color: var(--link); }
.msg-badge { font-size: 10px; font-weight: bold; color: var(--hover); margin-right: 4px; }
.msg-text { white-space: pre-wrap; }
.msg.mine .msg-who { text-decoration: underline; }
.msg-voice { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; padding: 2px 0; }
.vbox { display: inline-flex; flex-direction: column; gap: 2px; vertical-align: middle; max-width: 100%; }
.vp-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; line-height: 0; cursor: pointer; background: transparent; color: var(--text); border: 1px solid var(--btn-line); border-radius: 50%; flex: none; }
.vp-btn svg { display: block; }
.vp-btn:hover { background: var(--btn-hover); border-color: var(--text); }
.vp-wave { width: 260px; height: 34px; cursor: pointer; touch-action: none; vertical-align: middle; }
.vp-wave:focus-visible { outline: 1px dotted var(--link); outline-offset: 2px; }
.msg-acts { display: inline-flex; gap: 3px; vertical-align: middle; margin: 0 6px 0 0; white-space: nowrap; }
.icon-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; line-height: 0;
	color: var(--muted) !important; background: transparent; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; text-decoration: none;
}
.icon-btn svg { display: block; }
.icon-btn:hover { color: var(--text) !important; background: var(--btn-hover); border-color: var(--btn-line); }
.icon-btn.icon-del:hover { color: #b91c1c !important; }
.msg-edited { font-size: 10px; color: var(--muted); margin-left: 4px; }
.msg-editbox { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; width: 100%; }
.msg-editbox textarea { flex: 1 1 260px; min-height: 44px; }
.vp-memo-wrap { align-self: flex-end; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; max-width: 100%; text-align: right; }
.vp-memo-add { font: inherit; font-size: 11px; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.vp-memo-add::before { content: "+ "; }
.vp-memo-add:hover { color: var(--link); text-decoration: underline; }
.vp-memo {
	display: inline-block; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.4;
	padding: 2px 8px; background: var(--row-alt); border: 1px solid var(--line); border-radius: 6px; max-width: 100%;
}
.vp-memo.editable { cursor: pointer; }
.vp-memo.editable:hover { border-color: var(--btn-line); }
.vp-memo-in { width: 240px; max-width: 100%; font: inherit; font-size: 12px; padding: 2px 8px; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-line); border-radius: 6px; }
.vp-memo-in::placeholder { color: var(--muted); }
.vp-memo-note { font-size: 10px; color: var(--muted); }
.is-locked .vp-memo-add { display: none; }
.is-locked .vp-memo.editable { cursor: default; }
.vp-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.room-send { margin-top: 6px; }
.room-send textarea { width: 100%; min-height: 54px; }
.room-buttons { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; margin-top: 4px; min-width: 0; }
.room-buttons .btn { flex: none; white-space: nowrap; }
.room-status { margin: 3px 0 0; min-height: 1.4em; }
#tb-send.recording { background: #b91c1c; color: #fff !important; border-color: #8f1515; font-variant-numeric: tabular-nums; }
#tb-send.recording:hover { background: #991b1b; }
.rec-wave { flex: 0 1 260px; width: 260px; min-width: 40px; max-width: 100%; height: 36px; background: var(--head); border-radius: 10px; vertical-align: middle; }
.room-tools .in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.room-code, .code-field { font-family: "Courier New", Consolas, monospace; font-size: 16px; letter-spacing: 2px; font-weight: bold; }
.code-field { text-transform: uppercase; }
.room-note { margin: 4px 0 0; }

/* Password-protected topics: red padlock before the title */
.lock-icon { display: inline-block; color: #d62828; vertical-align: -1px; margin-right: 1px; line-height: 0; }
.lock-icon svg { display: inline-block; }
.page-title .lock-icon { vertical-align: -2px; }
th .lock-icon { color: #ff5c5c; vertical-align: -2px; } /* brighter on dark header rows */
.page-title .lock-icon svg { width: 16px; height: 16px; }

/* Divider lines in posts */
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; height: 0; }

/* Images in posts */
.post-body img { display: block; width: auto; height: auto; max-width: 100%; max-height: 80vh; margin: 8px 0; border: 1px solid var(--line); cursor: zoom-in; }
/* Desktop: about half the width (and never taller than ~45% of the screen); tap/click opens full size */
@media (min-width: 769px) {
	.post-body img { max-width: 50%; max-height: 45vh; }
}
.img-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.btn-small { padding: 2px 9px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.img-note { color: var(--muted); }
textarea.img-drop { outline: 2px dashed var(--link); outline-offset: -4px; }

/* Pinning */
.inline-form { display: inline; margin-left: 8px; }
.inline-form .btn { padding: 1px 8px; font-size: 11px; }
.tag-pin { color: var(--link); }

/* Edit page */
.post-edited { padding: 0 8px 6px; font-style: italic; }
.btn-danger { margin-left: auto; color: #fff !important; background: #9b1c1c; border-color: #7a1515; }
.btn-danger:hover { background: #7a1515; }

/* Pagination */
.pager, .nav-links { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.pager a, .pager span, .nav-links a, .nav-links span { padding: 1px 6px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; }
.pager .current, .nav-links .current { background: var(--head); color: var(--head-text); border-color: var(--head); font-weight: bold; }
.navigation.pagination { margin: 6px 0 12px; }
.navigation .screen-reader-text { position: absolute; left: -9999px; }

/* Plain content (pages) */
.content { background: var(--panel); border: 1px solid var(--line); padding: 10px 12px; }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--sub); padding: 8px 0 14px; font-size: 11px; color: var(--muted); }
.site-foot p { margin: 2px 0; }

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
	input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea { font-size: 16px; }
	.btn { padding: 10px 14px; }
}
@media (max-width: 640px) {
	.hide-sm { display: none; }
	.sm-only { display: block; }
	.room-log { height: 55vh; }
	.vp-wave { width: 170px; }
	/* Memo: about half the size it was on phones */
	.room .vp-memo-in { width: 170px; font-size: 11px; padding: 0 6px; height: 22px; line-height: 20px; }
	.vp-memo-note { font-size: 9px; }
	.vp-memo { font-size: 11px; padding: 1px 6px; }
	/* Recording row stays on one line: the waveform shrinks to fit */
	.room-buttons { gap: 5px; }
	.room-buttons .btn { padding: 8px 10px; }
	.rec-total { display: none; }
	.tb .last { width: 42%; white-space: normal; }
	.post { grid-template-columns: 1fr; }
	.post-user { border-right: 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 2px 10px; }
	.search { width: 100%; }
	/* Phones: sub-items sit inline after their parent instead of in a dropdown. */
	.tb-menu .sub-menu { display: flex; flex-wrap: wrap; position: static; min-width: 0; background: none; border: 0; padding: 0; }
	.tb-menu .sub-menu li::before { content: "\203A"; color: var(--muted); padding: 0 4px 0 6px; }
	.tb-menu .sub-menu a { display: inline; padding: 0; }
	.tb-menu .menu-item-has-children > a::after { content: ""; }
	.tb-menu > li { display: flex; flex-wrap: wrap; align-items: baseline; padding: 2px 0; }
	.main-nav { width: 100%; }
	.search input { flex: 1; width: auto; }
}