/* ============================================
   AI갤러리 메인 스타일시트
   assets/css/aigal-main.css
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

:root {
  --bg: #c0c0c0;
  --window-bg: #ffffff;
  --titlebar: #000080;
  --titlebar-text: #ffffff;
  --border-light: #ffffff;
  --border-dark: #808080;
  --border-darker: #404040;
  --btn-face: #c0c0c0;
  --text: #000000;
  --link: #0000cc;
  --link-visited: #800080;
  --table-header: #000080;
  --table-header-text: #ffffff;
  --table-row-even: #f0f0f0;
  --table-row-odd: #ffffff;
  --table-row-hover: #c8e0ff;
  --notice: #ff0000;
  --hot: #ff6600;
  --accent: #000080;
  --scrollbar: #808080;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Noto Sans KR', '굴림', Gulim, 'MS Sans Serif', sans-serif;
  font-size: 12px;
  background-color: #008080;
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.03) 2px,
      rgba(0,0,0,0.03) 4px
    );
  min-height: 100vh;
  padding: 8px;
  cursor: default;
}

/* ========================
   WINDOW STYLE
   ======================== */
.window {
  background: var(--btn-face);
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  box-shadow: 2px 2px 0 var(--border-darker);
}

.titlebar {
  background: linear-gradient(to right, #000080, #1084d0);
  color: white;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 11px;
  user-select: none;
}

.titlebar-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.titlebar-icon {
  width: 16px;
  height: 16px;
  font-size: 12px;
  line-height: 1;
}

.titlebar-buttons {
  display: flex;
  gap: 2px;
}

.tb-btn {
  width: 16px;
  height: 14px;
  background: var(--btn-face);
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  font-size: 9px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: black;
  font-weight: 900;
}

.tb-btn:active {
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
}

.window-content {
  padding: 4px;
}

/* ========================
   MENU BAR
   ======================== */
.menubar {
  background: var(--btn-face);
  border-bottom: 1px solid var(--border-dark);
  padding: 2px 4px;
  display: flex;
  gap: 0;
  font-size: 11px;
}

.menu-item {
  padding: 2px 8px;
  cursor: pointer;
  border: 1px solid transparent;
}

.menu-item:hover {
  background: var(--titlebar);
  color: white;
  border-color: transparent;
}

/* ========================
   BUTTONS
   ======================== */
.btn {
  background: var(--btn-face);
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  padding: 2px 8px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  color: black;
  white-space: nowrap;
}

.btn:active, .btn.active {
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  padding: 3px 7px 1px 9px;
}

.btn-primary {
  background: var(--titlebar);
  color: white;
  font-weight: 700;
}

.separator {
  width: 2px;
  height: 20px;
  border-left: 1px solid var(--border-dark);
  border-right: 1px solid var(--border-light);
  margin: 0 2px;
}

/* ========================
   ADDRESS BAR
   ======================== */
.addressbar {
  background: white;
  border: 2px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  padding: 2px 4px;
  font-size: 11px;
  flex: 1;
  font-family: 'Courier New', monospace;
  min-width: 200px;
}

/* ========================
   MAIN LAYOUT
   ======================== */
.aigal-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

.aigal-layout {
  display: flex;
  gap: 4px;
  padding: 4px;
}

/* ========================
   SIDEBAR
   ======================== */
.aigal-sidebar {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-section {
  background: var(--btn-face);
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
}

.sidebar-title {
  background: var(--titlebar);
  color: white;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-dark);
}

.sidebar-list {
  list-style: none;
  padding: 2px 0;
}

.sidebar-list li {
  padding: 2px 8px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sidebar-list li:hover {
  background: var(--titlebar);
  color: white;
}

.sidebar-list li.active {
  background: var(--table-row-hover);
  font-weight: 700;
}

.sidebar-list a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.badge {
  background: #ff0000;
  color: white;
  font-size: 9px;
  padding: 0 3px;
  border-radius: 2px;
  margin-left: auto;
}

.badge-new {
  background: #ff6600;
}

/* ========================
   CONTENT AREA
   ======================== */
.aigal-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ========================
   TICKER
   ======================== */
.ticker {
  background: #ffff00;
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  padding: 2px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.ticker-label {
  background: #ff0000;
  color: white;
  font-weight: 900;
  font-size: 10px;
  padding: 1px 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ticker-text {
  font-size: 11px;
  color: #000000;
  white-space: nowrap;
  animation: aigal-ticker 30s linear infinite;
}

@keyframes aigal-ticker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-200%); }
}

/* ========================
   BOARD TABLE
   ======================== */
.board-window {
  background: var(--btn-face);
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
}

.board-toolbar {
  background: var(--btn-face);
  border-bottom: 1px solid var(--border-dark);
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.board-title-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.board-icon {
  font-size: 16px;
}

.board-title-text {
  font-weight: 900;
  font-size: 13px;
  color: var(--accent);
}

.board-desc {
  font-size: 10px;
  color: #666;
}

.aigal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.aigal-table thead tr {
  background: var(--table-header);
  color: var(--table-header-text);
}

.aigal-table th {
  padding: 4px 6px;
  text-align: center;
  font-weight: 700;
  border-right: 1px solid rgba(255,255,255,0.2);
  white-space: nowrap;
}

.aigal-table th:last-child { border-right: none; }

.aigal-table tbody tr:nth-child(even) { background: var(--table-row-even); }
.aigal-table tbody tr:nth-child(odd)  { background: var(--table-row-odd); }
.aigal-table tbody tr:hover           { background: var(--table-row-hover); cursor: pointer; }

.aigal-table td {
  padding: 3px 6px;
  border-bottom: 1px solid #e0e0e0;
  border-right: 1px solid #e8e8e8;
}

.aigal-table td:last-child { border-right: none; }

.td-num    { text-align: center; color: #666; width: 40px; }
.td-cat    { text-align: center; width: 60px; }
.td-writer { text-align: center; width: 70px; }
.td-date   { text-align: center; width: 65px; color: #444; }
.td-view   { text-align: right; width: 45px; color: #888; }
.td-rec    { text-align: right; width: 35px; color: #cc0000; font-weight: 700; }

/* ========================
   POST TAGS & CATEGORIES
   ======================== */
.tag {
  display: inline-block;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 1px;
  margin-right: 3px;
  vertical-align: middle;
}

.tag-notice { background: #000080; color: white; }
.tag-hot    { background: #ff6600; color: white; }
.tag-new    { background: #009900; color: white; }
.tag-best   { background: #cc0000; color: white; }

.post-cat {
  display: inline-block;
  padding: 1px 4px;
  font-size: 10px;
  background: #e8e8e8;
  border: 1px solid #ccc;
  border-radius: 1px;
}

.cat-llm     { background: #dde8ff; border-color: #99aadd; color: #000066; }
.cat-image   { background: #ffe8dd; border-color: #ddaa99; color: #663300; }
.cat-news    { background: #ddffdd; border-color: #99dd99; color: #003300; }
.cat-discuss { background: #fff0dd; border-color: #ddcc99; color: #663300; }
.cat-tool    { background: #f0ddff; border-color: #cc99dd; color: #440066; }
.cat-humor   { background: #ffffcc; border-color: #cccc66; color: #444400; }
.cat-meme    { background: #ffddee; border-color: #dd9999; color: #660033; }

.title-link {
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.title-link:hover {
  color: var(--link);
  text-decoration: underline;
}

.comment-count {
  color: #cc0000;
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
}

/* ========================
   PAGINATION
   ======================== */
.aigal-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px;
  border-top: 1px solid var(--border-dark);
}

.page-btn {
  min-width: 22px;
  height: 20px;
  background: var(--btn-face);
  border: 1px solid var(--border-dark);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-family: inherit;
}

.page-btn:hover   { background: var(--table-row-hover); }
.page-btn.current { background: var(--titlebar); color: white; font-weight: 700; }

/* WP Pagination override */
.aigal-pagination .page-numbers {
  min-width: 22px;
  height: 20px;
  background: var(--btn-face);
  border: 1px solid var(--border-dark);
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-family: inherit;
  color: black;
  text-decoration: none;
}

.aigal-pagination .page-numbers:hover   { background: var(--table-row-hover); }
.aigal-pagination .page-numbers.current { background: var(--titlebar); color: white; font-weight: 700; }

/* ========================
   WRITE + SEARCH AREA
   ======================== */
.write-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  background: var(--btn-face);
  border-top: 2px solid var(--border-dark);
}

.search-area {
  display: flex;
  gap: 2px;
  align-items: center;
}

.search-select {
  font-size: 11px;
  font-family: inherit;
  border: 2px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  background: white;
  padding: 1px 2px;
  height: 20px;
}

.search-input {
  font-size: 11px;
  font-family: inherit;
  border: 2px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  background: white;
  padding: 1px 4px;
  height: 20px;
  width: 150px;
}

/* ========================
   STATUS BAR
   ======================== */
.aigal-statusbar {
  background: var(--btn-face);
  border-top: 2px solid var(--border-light);
  padding: 2px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: space-between;
  font-size: 10px;
  color: #444;
  margin-top: 4px;
}

.statusbar-item {
  border-right: 1px solid var(--border-dark);
  padding-right: 8px;
  margin-right: 2px;
}

.statusbar-item:last-child {
  border-right: none;
  margin-left: auto;
}

/* ========================
   SCROLLBAR
   ======================== */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--btn-face); border: 1px solid var(--border-dark); }
::-webkit-scrollbar-thumb {
  background: var(--btn-face);
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
}
::-webkit-scrollbar-button {
  background: var(--btn-face);
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  display: block;
  height: 16px;
}

/* ========================
   SITE HEADER
   ======================== */
.aigal-site-header {
  background: var(--btn-face);
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  margin-bottom: 4px;
}

.header-top {
  background: linear-gradient(to right, #000080 0%, #1084d0 50%, #000080 100%);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.site-logo {
  font-size: 22px;
  font-weight: 900;
  color: white;
  text-shadow: 2px 2px 0 #000040, -1px -1px 0 rgba(255,255,255,0.3);
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.logo-sub {
  font-size: 11px;
  font-weight: 400;
  color: #aaccff;
  margin-top: 2px;
  letter-spacing: 0;
  display: block;
}

.header-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.user-info {
  color: #aaccff;
  font-size: 11px;
}

.user-info strong {
  color: #ffff99;
  font-weight: 700;
}

.header-btns {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.header-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
}

.header-btn:hover {
  background: rgba(255,255,255,0.3);
  color: white;
}

/* ========================
   NAV TABS
   ======================== */
.nav-tabs {
  display: flex;
  background: var(--btn-face);
  border-top: 1px solid var(--border-dark);
  padding: 0 4px;
  gap: 1px;
  align-items: flex-end;
  flex-wrap: wrap;
  overflow-x: auto;
}

.nav-tab {
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid;
  border-bottom: none;
  background: var(--btn-face);
  border-color: var(--border-light) var(--border-dark) transparent var(--border-light);
  margin-bottom: 0;
  color: var(--text);
  font-family: inherit;
  margin-top: 3px;
  text-decoration: none;
  display: inline-block;
}

.nav-tab:hover {
  background: var(--table-row-hover);
  color: var(--text);
}

.nav-tab.active, .nav-tab.current-menu-item {
  background: var(--titlebar);
  color: white;
  font-weight: 700;
  border-color: var(--border-light) var(--border-dark) transparent var(--border-light);
  margin-top: 0;
  padding-top: 5px;
}

/* ========================
   MINI BOARDS
   ======================== */
.mini-boards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.mini-board {
  background: var(--btn-face);
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
}

.mini-board-title {
  background: var(--titlebar);
  color: white;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}

.mini-board-title a {
  color: #aaccff;
  font-size: 10px;
  font-weight: 400;
  text-decoration: none;
}

.mini-list {
  list-style: none;
  padding: 2px 0;
}

.mini-list li {
  padding: 2px 6px;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  gap: 4px;
}

.mini-list li:hover { background: var(--table-row-hover); }

.mini-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
  color: var(--text);
  text-decoration: none;
}

.mini-title:hover { color: var(--link); text-decoration: underline; }

.mini-meta {
  color: #888;
  white-space: nowrap;
  font-size: 10px;
}

/* ========================
   BLINK + ANIMATIONS
   ======================== */
.blink {
  animation: aigal-blink 1s step-end infinite;
}

@keyframes aigal-blink {
  50% { visibility: hidden; }
}

/* ========================
   POPUP OVERLAY
   ======================== */
.aigal-popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.aigal-popup-overlay.show { display: flex; }

.popup-window {
  background: var(--btn-face);
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  width: 380px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
}

.popup-content {
  padding: 16px;
  text-align: center;
}

.popup-content p {
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.8;
}

.popup-btns {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

/* ========================
   MARQUEE BAR
   ======================== */
.marquee-bar {
  background: #000000;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 2px 6px;
  overflow: hidden;
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  margin-bottom: 4px;
}

.marquee-text {
  display: inline-block;
  animation: aigal-marquee 20s linear infinite;
  white-space: nowrap;
}

@keyframes aigal-marquee {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ========================
   VISITOR COUNTER
   ======================== */
.counter-box {
  background: #000000;
  border: 2px inset #808080;
  padding: 2px 6px;
  display: inline-flex;
  gap: 1px;
  align-items: center;
}

.counter-digit {
  background: #000000;
  color: #ff4400;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: 700;
  padding: 1px 2px;
  border: 1px solid #333;
  min-width: 12px;
  text-align: center;
}

/* ========================
   SPECIAL ROWS
   ======================== */
.hot-post    { color: #ff0000; font-weight: 700; }
.notice-row  { background: #ffffc0 !important; }
.notice-row:hover { background: var(--table-row-hover) !important; }
.new-dot     { color: #ff0000; font-weight: 900; font-size: 14px; line-height: 1; }

/* ========================
   SINGLE POST PAGE
   ======================== */
.post-view-header {
  background: var(--btn-face);
  border-bottom: 2px solid var(--border-dark);
  padding: 8px 10px;
}

.post-view-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 6px;
}

.post-view-meta {
  font-size: 11px;
  color: #666;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.post-view-body {
  padding: 12px 10px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text);
  min-height: 200px;
  background: white;
  border: 2px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  margin: 6px;
}

.post-view-body img {
  max-width: 100%;
  border: 1px solid #ccc;
}

.post-actions {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-top: 1px solid var(--border-dark);
  justify-content: center;
}

/* ========================
   COMMENTS
   ======================== */
.aigal-comments {
  background: var(--btn-face);
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  margin-top: 4px;
}

.comments-header {
  background: var(--titlebar);
  color: white;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
}

.comment-item {
  border-bottom: 1px solid #e0e0e0;
  padding: 6px 8px;
  font-size: 12px;
}

.comment-item:hover { background: var(--table-row-hover); }

.comment-author {
  font-weight: 700;
  color: var(--accent);
  margin-right: 8px;
}

.comment-date {
  color: #888;
  font-size: 10px;
}

.comment-text {
  margin-top: 4px;
  line-height: 1.6;
}

.comment-form-area {
  padding: 6px;
  border-top: 2px solid var(--border-dark);
  display: flex;
  gap: 4px;
}

.comment-textarea {
  flex: 1;
  font-family: inherit;
  font-size: 12px;
  border: 2px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  padding: 4px;
  resize: vertical;
  min-height: 60px;
  background: white;
}

/* ========================
   USER AUTH FORMS
   ======================== */
.aigal-form-window {
  max-width: 400px;
  margin: 20px auto;
}

.aigal-form-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.aigal-form-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}

.aigal-form-input {
  font-family: inherit;
  font-size: 12px;
  border: 2px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  padding: 3px 6px;
  background: white;
  height: 24px;
}

.aigal-form-input:focus {
  outline: 1px dotted var(--accent);
}

/* ========================
   RESPONSIVE (Mobile)
   ======================== */
@media (max-width: 768px) {
  body { padding: 4px; }

  .aigal-layout {
    flex-direction: column;
    padding: 2px;
  }

  .aigal-sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
  }

  .sidebar-section {
    flex: 1;
    min-width: 140px;
  }

  .mini-boards {
    grid-template-columns: 1fr;
  }

  .header-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-user {
    align-items: flex-start;
  }

  .aigal-table .td-num,
  .aigal-table .td-view,
  .aigal-table .td-rec {
    display: none;
  }

  .nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .write-area {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
}