/* =========================================================
   HIGAN ARCHIVE - Dark Fantasy Game Info Site
   Inspired by higaneruthyll.nexon.com/brand
   ========================================================= */

:root{
  /* Bright/blue theme (higaneruthyll.nexon.com brand-site mood): light backgrounds, navy header, blue accent */
  --bg-black: #f4f7fb;
  --bg-deep: #eaf0f9;
  --bg-panel: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #eef4ff;
  --border-dim: #e1e6ee;
  --border-light: #ccd4e2;
  --text-main: #1a2233;
  --text-sub: #5c6675;
  --text-faint: #98a1b1;
  --accent-gold: #3f6df5;
  --accent-gold-bright: #5b86ff;
  --accent-red: #e5484d;
  --tier-s: #e5484d;
  --tier-a: #3f6df5;
  --tier-b: #17a2b8;
  --tier-c: #98a1b1;
  --header-bg: rgba(10,14,26,0.95);
  --text-on-dark: rgba(255,255,255,0.88);
  --text-on-dark-faint: rgba(255,255,255,0.6);
  --font-serif: 'Playfair Display', 'Noto Serif KR', serif;
  --font-body: 'Noto Sans KR', sans-serif;
}

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

/* `overflow-x: clip` (not `hidden`) on purpose -- per the CSS spec, setting overflow-x to any
   value OTHER than visible/clip while overflow-y is left as visible forces the BROWSER to silently
   compute overflow-y as `auto` too (there is no way to opt out of this by explicitly writing
   `overflow-y: visible` -- the spec still overrides it to auto whenever overflow-x is `hidden`).
   That silent promotion turns html/body into a formal scroll container in a way some browser
   engines then use as the reference box for position:sticky, which can make sticky elements (the
   site header, and now the rich-editor toolbar) fail to stick to the real viewport while scrolling.
   `clip` is specifically exempted from this auto-promotion rule while still fully preventing any
   horizontal scrollbar/overflow, so it keeps the original intent (no sideways scrolling) without
   the sticky-breaking side effect. */
html{ scroll-behavior: smooth; overflow-x: clip; max-width: 100%; }

body{
  background: var(--bg-black);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100%;
}

a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
img{ max-width: 100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; }

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width: 8px; }
::-webkit-scrollbar-track{ background: var(--bg-black); }
::-webkit-scrollbar-thumb{ background: var(--border-light); border-radius: 4px; }

/* ---------- Top Utility Bar ---------- */
.utility-bar{
  background: var(--bg-black);
  border-bottom: 1px solid var(--border-dim);
  font-size: 12px;
  color: var(--text-faint);
}
.utility-bar .container{
  display:flex; justify-content: flex-end; gap: 18px; height: 34px; align-items:center;
}
.utility-bar a{ color: var(--text-faint); transition:.2s; }
.utility-bar a:hover{ color: var(--accent-gold-bright); }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 200;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 78px;
  gap: 12px;
  flex-wrap: nowrap;
}
.logo{
  font-family: var(--font-serif);
  font-size: 24px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #fff;
  display:flex; align-items:center; gap:10px;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.logo .logo-mark{
  width:10px;height:10px;background:var(--accent-gold);
  transform: rotate(45deg);
  display:inline-block;
  flex-shrink: 0;
}
.logo .logo-sub{
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-on-dark-faint);
  letter-spacing: 3px;
  font-weight: 400;
  margin-left: 4px;
  white-space: nowrap;
}
.header-actions{ flex-shrink: 0; }

.main-nav{ display:flex; gap: 40px; }
.main-nav a{
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--text-on-dark-faint);
  padding: 8px 0;
  position: relative;
  transition: color .25s;
}
.main-nav a::after{
  content:'';
  position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--accent-gold-bright);
  transition: width .25s;
}
.main-nav a:hover, .main-nav a.active{ color: #fff; }
.main-nav a:hover::after, .main-nav a.active::after{ width: 100%; }

.header-actions{ display:flex; align-items:center; gap: 16px; flex-shrink: 0; }
.btn-admin-link{
  display: inline-block;
  font-size: 12px;
  color: var(--text-on-dark-faint);
  background: transparent; /* <button> elements (e.g. the logout button) default to a light/white
    UA background otherwise, which made white text on a white background invisible */
  border: 1px solid rgba(255,255,255,0.25);
  padding: 8px 16px;
  letter-spacing: 1px;
  transition: .25s;
}
.btn-admin-link:hover{ border-color: var(--accent-gold-bright); color: var(--accent-gold-bright); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none;
}
.nav-toggle span{ width:24px; height:2px; background:#fff; }

/* ---------- Header auth box (login/signup or logged-in member) ---------- */
.auth-box{ display:flex; align-items:center; gap:10px; }
.auth-nick{
  font-size:12px; color: var(--text-on-dark); letter-spacing:.5px;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.auth-nick i{ color: var(--accent-gold-bright); font-size:14px; }
.btn-admin-link-primary{ background: var(--accent-gold); color:#fff; border-color: var(--accent-gold); font-weight:700; }
.btn-admin-link-primary:hover{ background: var(--accent-gold-bright); border-color: var(--accent-gold-bright); color:#fff; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  height: 640px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
  background: #0a0e1a;
}
.hero::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(10,14,26,0.25) 0%, rgba(10,14,26,0.5) 60%, rgba(10,14,26,0.68) 100%);
}
.hero-content{ position:relative; z-index:3; padding: 0 20px; }
.hero-eyebrow{
  font-size: 13px;
  letter-spacing: 6px;
  color: var(--accent-gold-bright);
  margin-bottom: 22px;
  text-transform: uppercase;
}
.hero-title{
  font-family: var(--font-serif);
  font-size: 64px;
  letter-spacing: 4px;
  color: #fff;
  margin-bottom: 18px;
  line-height:1.15;
}
.hero-title .accent{ color: var(--accent-gold-bright); font-style: italic; }
.hero-desc{
  font-size: 16px;
  color: var(--text-on-dark);
  max-width: 560px;
  margin: 0 auto 34px;
  letter-spacing: .5px;
}
.hero-actions{ display:flex; gap: 16px; justify-content:center; flex-wrap:wrap; }
.hero-actions .btn:not(.btn-primary){ color: var(--text-on-dark); border-color: rgba(255,255,255,0.4); }
.hero-actions .btn:not(.btn-primary):hover{ color:#fff; border-color: var(--accent-gold-bright); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 34px;
  font-size: 14px;
  letter-spacing: 2px;
  border: 1px solid var(--border-light);
  color: var(--text-main);
  background: transparent;
  transition: .25s;
  white-space: nowrap;
}
.btn:hover{ border-color: var(--accent-gold); color:var(--accent-gold-bright); }
.btn-primary{
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #fff;
  font-weight: 700;
}
.btn-primary:hover{ background: var(--accent-gold-bright); border-color: var(--accent-gold-bright); color:#fff; }
.btn-sm{ padding: 8px 18px; font-size: 12px; }
.btn-danger{ border-color: var(--accent-red); color: var(--tier-s); }
.btn-danger:hover{ background: var(--accent-red); color:#fff; }

/* ---------- Section Heading ---------- */
.section{ padding: 90px 0; }
.section-alt{ background: var(--bg-deep); }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom: 44px; flex-wrap:wrap; gap:16px;
}
.section-eyebrow{
  font-size: 12px; letter-spacing:4px; color: var(--accent-gold);
  text-transform: uppercase; margin-bottom: 10px; display:block;
}
.section-title{
  font-family: var(--font-serif);
  font-size: 36px;
  letter-spacing: 1px;
  color: var(--text-main);
}
.section-link{
  font-size: 13px; letter-spacing:1px; color: var(--text-sub);
  border-bottom: 1px solid var(--border-light); padding-bottom: 4px;
}
.section-link:hover{ color: var(--accent-gold-bright); border-color: var(--accent-gold-bright); }

/* ---------- Character Tier Board (home) ---------- */
.tier-board{ display:flex; flex-direction:column; gap: 26px; }
.tier-row{
  display:flex; align-items:flex-start; gap: 22px;
  background: var(--bg-panel); border:1px solid var(--border-dim); padding: 20px;
}
.tier-row-label{
  flex-shrink:0; width: 84px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding: 14px 6px; border-radius: 2px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-dim);
}
.tier-row-letter{ font-family: var(--font-serif); font-size: 30px; font-weight:800; line-height:1; }
.tier-row-name{ font-size: 11px; letter-spacing:1px; color: var(--text-sub); }
.tier-row-label.tier-S{ border-color: var(--tier-s); }
.tier-row-label.tier-S .tier-row-letter{ color: var(--tier-s); }
.tier-row-label.tier-A{ border-color: var(--tier-a); }
.tier-row-label.tier-A .tier-row-letter{ color: var(--tier-a); }
.tier-row-label.tier-B{ border-color: var(--tier-b); }
.tier-row-label.tier-B .tier-row-letter{ color: var(--tier-b); }
.tier-row-label.tier-C{ border-color: var(--tier-c); }
.tier-row-label.tier-C .tier-row-letter{ color: var(--tier-c); }
.tier-row-chars{
  flex:1; display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px;
}
.tier-char-card{
  position:relative; background: var(--bg-card); border:1px solid var(--border-dim);
  overflow:hidden; transition: transform .3s, border-color .3s;
}
.tier-char-card:hover{ transform: translateY(-4px); border-color: var(--accent-gold); }
.tier-char-card .char-img-wrap{
  position:relative; width:100%; aspect-ratio: 3/4; overflow:hidden; background:#e7ecf3;
}
.tier-char-card img{ width:100%; height:100%; object-fit:cover; transition: transform .5s; }
.tier-char-card:hover img{ transform: scale(1.06); }
.tier-char-card .char-info{ padding: 12px; }
.tier-char-card .char-name{ font-size:14px; font-weight:700; margin-bottom:6px; }
.tier-char-card .char-tags{ display:flex; gap:6px; flex-wrap:wrap; }

/* ---------- Character Grid ---------- */
.char-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.char-card{
  position:relative;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  overflow:hidden;
  transition: transform .3s, border-color .3s;
}
.char-card:hover{ transform: translateY(-6px); border-color: var(--accent-gold); }
.char-card .char-img-wrap{
  position:relative; width:100%; aspect-ratio: 3/4; overflow:hidden;
  background: #e7ecf3;
}
.char-card img{ width:100%; height:100%; object-fit:cover; transition: transform .5s; }
.char-card:hover img{ transform: scale(1.06); }
.char-card .tier-badge{
  position:absolute; top:12px; left:12px;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-family: var(--font-serif); font-weight:700; font-size:15px;
  background: rgba(255,255,255,0.9); border:1px solid var(--border-light);
  color: var(--text-main);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(20,40,80,0.12);
}
.tier-badge.tier-S{ color: var(--tier-s); border-color: var(--tier-s); }
.tier-badge.tier-A{ color: var(--tier-a); border-color: var(--tier-a); }
.tier-badge.tier-B{ color: var(--tier-b); border-color: var(--tier-b); }
.tier-badge.tier-C{ color: var(--tier-c); border-color: var(--tier-c); }
.rarity-badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-serif); font-weight:700;
  font-size: 12px; letter-spacing: 1px;
  padding: 4px 10px;
  border: 1px solid var(--border-light);
  background: rgba(255,255,255,0.9);
  color: var(--text-main);
  box-shadow: 0 2px 6px rgba(20,40,80,0.12);
}
.char-card .rarity-badge{ position:absolute; top:12px; right:12px; z-index:2; }
.rarity-badge.rarity-R{ color:#6b7280; border-color:#b7bfcc; background: rgba(255,255,255,0.9); }
.rarity-badge.rarity-SR{ color:#2f6fd1; border-color:#8fb8ee; background: rgba(255,255,255,0.9); }
.rarity-badge.rarity-SSR{ color:#9c3fd6; border-color:#d3a6f0; background: rgba(255,255,255,0.9); }
.rarity-badge.rarity-UR{
  color:#1a1206; border-color: var(--accent-gold-bright); font-weight:800;
  background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-gold-bright) 50%, #f4d98a 100%);
  box-shadow: 0 0 10px rgba(63,109,245,0.35);
}
.img-broken{ opacity:.55; filter: grayscale(.4); }
.char-card .char-img-wrap::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 60%, rgba(10,20,45,0.12) 100%);
  pointer-events: none;
}
.char-card .char-info{ padding: 16px; }
.char-card .char-name{ font-size:17px; font-weight:700; margin-bottom:4px; }
.char-card .char-name-en{ font-size: 11px; color: var(--text-faint); letter-spacing:1px; margin-bottom:8px; }
.char-card .char-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.tag{
  font-size: 11px; padding: 3px 9px;
  border: 1px solid var(--border-light);
  color: var(--text-sub);
  letter-spacing: .5px;
}

/* ---------- Filters ---------- */
.filter-bar{
  display:flex; gap: 10px; flex-wrap:wrap; margin-bottom: 34px;
  padding: 18px; background: var(--bg-panel); border:1px solid var(--border-dim);
}
.filter-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filter-group label{ font-size:12px; color:var(--text-faint); letter-spacing:1px; margin-right:4px; }
.filter-chip{
  font-size: 12px; padding: 7px 14px;
  border: 1px solid var(--border-light);
  color: var(--text-sub); background:transparent; letter-spacing:.5px;
  transition:.2s;
}
.filter-chip.active, .filter-chip:hover{ border-color: var(--accent-gold); color: var(--accent-gold-bright); }
.search-input{
  flex: 1; min-width: 200px;
  background: var(--bg-black); border:1px solid var(--border-light);
  color: var(--text-main); padding: 10px 14px; font-size:13px;
}
.search-input:focus{ outline:none; border-color: var(--accent-gold); }

/* ---------- Guide / Board list card ---------- */
.list-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.guide-card{
  background: var(--bg-card); border:1px solid var(--border-dim);
  overflow:hidden; transition:.3s;
  display:flex; flex-direction:column;
}
.guide-card:hover{ border-color: var(--accent-gold); transform: translateY(-4px); }
.guide-card .thumb{ width:100%; aspect-ratio:16/9; overflow:hidden; background:#e7ecf3; }
.guide-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.guide-card .g-body{ padding: 20px; flex:1; display:flex; flex-direction:column; }
.guide-card .g-cat{ font-size:11px; color:var(--accent-gold); letter-spacing:1px; margin-bottom:10px; }
.guide-card .g-title{ font-size:17px; font-weight:700; margin-bottom:10px; line-height:1.4; }
.guide-card .g-summary{ font-size:13px; color:var(--text-sub); flex:1; margin-bottom: 14px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.guide-card .g-meta{ font-size:11px; color:var(--text-faint); display:flex; justify-content:space-between; border-top:1px solid var(--border-dim); padding-top:12px; }

/* ---------- Table (board list) ---------- */
.board-tabs{ display:flex; gap:6px; margin-bottom: 24px; flex-wrap:wrap; }
.board-tab{
  padding: 10px 20px; font-size:13px; letter-spacing:1px;
  border:1px solid var(--border-dim); color: var(--text-sub);
}
.board-tab.active{ background: var(--accent-gold); color:#fff; border-color:var(--accent-gold); font-weight:700; }

.post-table{ width:100%; border-collapse: collapse; }
.post-table thead th{
  border-bottom: 2px solid var(--border-light);
  padding: 14px 10px; font-size:12px; color: var(--text-faint); letter-spacing:1px; text-align:left;
}
.post-table tbody tr{ border-bottom: 1px solid var(--border-dim); transition:.2s; }
.post-table tbody tr:hover{ background: var(--bg-card-hover); }
.post-table td{ padding: 14px 10px; font-size: 14px; }
.post-table td.col-title{ max-width: 460px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post-table td.col-title a:hover{ color: var(--accent-gold-bright); }
.post-table td.num, .post-table th.num{ text-align:center; width: 70px; color: var(--text-faint); }
.pin-badge{ color: var(--accent-red); font-weight:700; font-size:11px; border:1px solid var(--accent-red); padding:1px 6px; margin-right:6px; }

.board-toolbar{ display:flex; justify-content:space-between; align-items:center; margin: 20px 0 30px; flex-wrap:wrap; gap: 12px; }
.board-toolbar-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sort-select{
  background: var(--bg-black); border:1px solid var(--border-light); color: var(--text-main);
  padding: 9px 12px; font-size:13px; letter-spacing:.5px;
}
.sort-select:focus{ outline:none; border-color: var(--accent-gold); }

/* ---------- Pagination ---------- */
.pagination{ display:flex; justify-content:center; gap:8px; margin-top: 40px; }
.pagination button{
  width:36px;height:36px; background:transparent; border:1px solid var(--border-dim); color: var(--text-sub);
}
.pagination button.active{ background: var(--accent-gold); color:#fff; border-color:var(--accent-gold); }
.pagination button:hover{ border-color: var(--accent-gold); }

/* ---------- Detail pages ---------- */
.detail-hero{
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--border-dim);
  background: var(--bg-deep);
}
.breadcrumb{ font-size: 12px; color: var(--text-faint); margin-bottom: 20px; letter-spacing: .5px;}
.breadcrumb a:hover{ color: var(--accent-gold-bright); }

.char-detail-layout{ display:grid; grid-template-columns: 360px 1fr; gap: 50px; }
.char-portrait{ position:relative; border: 1px solid var(--border-dim); background:#e7ecf3; overflow:hidden; }
.char-portrait img{ width:100%; }
.char-detail-info .cd-name{ font-family: var(--font-serif); font-size: 40px; color: var(--text-main); margin-bottom:6px; }
.char-detail-info .cd-name-en{ font-size:13px; color:var(--text-faint); letter-spacing:2px; margin-bottom:20px; }
.cd-stat-row{ display:flex; gap: 30px; margin-bottom: 24px; flex-wrap:wrap; }
.cd-stat{ }
.cd-stat .label{ font-size:11px; color:var(--text-faint); letter-spacing:1px; margin-bottom:6px; }
.cd-stat .value{ font-size:16px; font-weight:700; }
.cd-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 10px;}

.content-block{ padding: 50px 0; border-bottom: 1px solid var(--border-dim); }
.content-block:last-child{ border-bottom:none; }
.content-block h3{
  font-family: var(--font-serif); font-size: 24px; color: var(--text-main); margin-bottom:24px;
  display:flex; align-items:center; gap:12px;
}
.content-block h3::before{ content:''; width:6px; height:6px; background:var(--accent-gold); transform:rotate(45deg); }
.rich-content{ color: var(--text-sub); font-size:15px; line-height:1.9; white-space:pre-wrap; }
.rich-content strong, .rich-content b{ color: var(--text-main); }

/* ---------- Guide detail ---------- */
.guide-detail-head{ text-align:center; max-width:800px; margin:0 auto; }
.guide-detail-head .g-cat{ color:var(--accent-gold); font-size:13px; letter-spacing:2px; margin-bottom:16px; }
.guide-detail-head h1{ font-family: var(--font-serif); font-size:38px; margin-bottom:20px; }
.guide-detail-head .g-meta{ font-size:12px; color:var(--text-faint); display:flex; gap:16px; justify-content:center; }
.guide-detail-body{ max-width: 800px; margin: 50px auto 0; font-size:16px; color: var(--text-sub); line-height:2; white-space:pre-wrap;}
.guide-detail-body img{ margin: 20px 0; border:1px solid var(--border-dim); }
.tag-list{ display:flex; gap:8px; flex-wrap:wrap; max-width:800px; margin: 40px auto 0; }

/* ---------- Post detail ---------- */
.post-detail-head{ border-bottom:1px solid var(--border-dim); padding-bottom:24px; margin-bottom:34px; }
.post-detail-head h1{ font-size:26px; margin-bottom: 16px; }
.post-detail-meta{ display:flex; gap:18px; font-size:13px; color:var(--text-faint); }
.post-detail-body{ min-height: 200px; font-size:15px; color:var(--text-main); line-height:1.9; white-space:pre-wrap; padding-bottom: 30px; border-bottom:1px solid var(--border-dim); margin-bottom: 30px;}
.post-actions{ display:flex; justify-content: space-between; margin-bottom: 40px;}

.comment-section h3{ font-size:18px; margin-bottom:20px; }
.comment-item{ padding: 16px 0; border-bottom:1px solid var(--border-dim); }
.comment-item .c-head{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:8px; }
.comment-item .c-author{ font-weight:700; color: var(--accent-gold-bright); }
.comment-item .c-date{ color: var(--text-faint); }
.comment-item .c-content{ font-size:14px; color: var(--text-sub); }
.comment-form{ display:flex; gap:10px; margin-top: 24px; flex-wrap:wrap; }
.comment-form input[type=text], .comment-form input[type=password]{
  background: var(--bg-panel); border:1px solid var(--border-light); color:var(--text-main); padding:10px 12px; font-size:13px;
}
.comment-form textarea{
  width:100%; background: var(--bg-panel); border:1px solid var(--border-light); color:var(--text-main); padding:12px; font-size:14px; resize:vertical; min-height:70px;
}
.comment-login-notice{
  text-align:center; padding: 18px; margin-top:24px; background: var(--bg-card-hover);
  border:1px solid var(--border-dim); font-size:13px; color: var(--text-sub);
}
.comment-login-notice a{ color: var(--accent-gold-bright); font-weight:700; border-bottom:1px solid var(--accent-gold-bright); }

/* ---------- Recommend / Like button ---------- */
.like-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border-light); background: var(--bg-panel); color: var(--text-sub);
  padding: 10px 22px; font-size:13px; letter-spacing:1px; transition:.2s;
}
.like-btn i{ color: var(--accent-red); }
.like-btn:hover{ border-color: var(--accent-red); color: var(--text-main); }
.like-btn.liked{ background: var(--accent-red); border-color: var(--accent-red); color:#fff; font-weight:700; }
.like-btn.liked i{ color:#fff; }
.like-bar{ display:flex; justify-content:center; margin: 30px 0; }

/* ---------- Forms (write page / admin) ---------- */
.form-panel{ max-width: 800px; margin: 0 auto; background: var(--bg-panel); border:1px solid var(--border-dim); padding: 40px; }
.form-row{ margin-bottom: 22px; }
.form-row label{ display:block; font-size:13px; color: var(--text-sub); margin-bottom:8px; letter-spacing:.5px; }
.form-row input[type=text], .form-row input[type=password], .form-row input[type=number],
.form-row select, .form-row textarea{
  width:100%; background: var(--bg-black); border:1px solid var(--border-light);
  color: var(--text-main); padding: 12px 14px; font-size:14px;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color:var(--accent-gold); }
.form-row textarea{ min-height: 140px; resize:vertical; }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap: 22px; }
.form-actions{ display:flex; justify-content:flex-end; gap:12px; margin-top:30px; }

/* ---------- Notice banner (home) ---------- */
.notice-strip{
  background: var(--bg-panel); border:1px solid var(--border-dim);
  display:flex; align-items:center; gap: 16px; padding: 14px 22px; margin-bottom: 40px;
}
.notice-strip .nlabel{
  background: var(--accent-gold); color:#fff; font-size:11px; font-weight:700;
  padding: 4px 10px; letter-spacing:1px; flex-shrink:0;
}
.notice-strip ul{ display:flex; flex-direction:column; gap:6px; overflow:hidden; flex:1; }
.notice-strip li{ font-size:13px; color: var(--text-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notice-strip li:hover{ color: var(--accent-gold-bright); }

/* ---------- Empty state ---------- */
.empty-state{ text-align:center; padding: 60px 20px; color: var(--text-faint); }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--bg-black); border-top:1px solid var(--border-dim);
  padding: 50px 0 30px; margin-top: 60px;
}
.footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap: 30px; margin-bottom: 30px; }
.footer-logo{ font-family: var(--font-serif); font-size:20px; letter-spacing:2px; margin-bottom:12px; }
.footer-desc{ font-size:13px; color:var(--text-faint); max-width: 380px; }
.footer-links{ display:flex; gap: 50px; flex-wrap:wrap; }
.footer-links h4{ font-size:13px; color: var(--text-sub); letter-spacing:1px; margin-bottom:14px; }
.footer-links a{ display:block; font-size:13px; color: var(--text-faint); margin-bottom:10px; }
.footer-links a:hover{ color: var(--accent-gold-bright); }
.footer-bottom{ border-top:1px solid var(--border-dim); padding-top:20px; font-size:12px; color: var(--text-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-admin-link{ color: var(--text-faint); cursor:pointer; transition:.2s; border-bottom: 1px dotted var(--text-faint); padding-bottom: 1px; }
.footer-admin-link:hover{ color: var(--accent-gold-bright); border-bottom-color: var(--accent-gold-bright); }

/* ---------- Admin ---------- */
.admin-login-wrap{ min-height: 70vh; display:flex; align-items:center; justify-content:center; }
.admin-login-box{ width: 380px; background: var(--bg-panel); border:1px solid var(--border-dim); padding: 40px; text-align:center; }
.admin-login-box h2{ font-family: var(--font-serif); font-size:26px; margin-bottom: 8px; }
.admin-login-box p{ font-size:13px; color:var(--text-faint); margin-bottom: 26px; }
.admin-login-box input{ width:100%; margin-bottom:16px; background:var(--bg-black); border:1px solid var(--border-light); color:var(--text-main); padding:12px 14px; font-size:14px; }
.admin-login-box .btn{ width:100%; }
.admin-error{ color: var(--tier-s); font-size:12px; margin-top:10px; min-height:16px; }

.admin-shell{ display:grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 78px); }
.admin-sidebar{ background: var(--bg-panel); border-right:1px solid var(--border-dim); padding: 30px 0; }
.admin-sidebar a{
  display:block; padding: 14px 26px; font-size:14px; color: var(--text-sub); border-left:3px solid transparent;
}
.admin-sidebar a.active, .admin-sidebar a:hover{ color: var(--text-main); border-color: var(--accent-gold); background: var(--bg-card); }
.admin-main{ padding: 34px 40px; }
.admin-main h2{ font-family: var(--font-serif); font-size: 26px; margin-bottom: 24px; }
.admin-toolbar{ display:flex; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }

.admin-table{ width:100%; border-collapse:collapse; background: var(--bg-panel); }
.admin-table th{ text-align:left; font-size:12px; color:var(--text-faint); padding:12px 14px; border-bottom:2px solid var(--border-light); }
.admin-table td{ padding:12px 14px; font-size:13px; border-bottom:1px solid var(--border-dim); vertical-align:middle; }
.admin-table tr:hover{ background: var(--bg-card); }
.admin-actions-cell{ display:flex; gap:8px; }
.member-status-badge{ font-size:11px; padding:3px 9px; border:1px solid var(--border-light); letter-spacing:.5px; }
.member-status-badge.status-active{ color:#1c9c5c; border-color:#1c9c5c; }
.member-status-badge.status-banned{ color: var(--tier-s); border-color: var(--tier-s); }

.modal-overlay{
  position:fixed; inset:0; background: rgba(0,0,0,0.75); z-index: 500;
  display:none; align-items:center; justify-content:center; padding:20px; overflow-y:auto;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background: var(--bg-panel); border:1px solid var(--border-light); max-width: 720px; width:100%;
  max-height: 88vh; overflow-y:auto; padding: 34px;
}
.modal-box h3{ font-family: var(--font-serif); font-size:22px; margin-bottom: 22px; }
.modal-close-row{ display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }

.badge-count{ background: var(--accent-gold); color:#fff; font-size:11px; padding:2px 8px; margin-left:6px; font-weight:700;}

.admin-stat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.admin-stat-card{ background:var(--bg-panel); border:1px solid var(--border-dim); padding:24px; }
.admin-stat-label{ font-size:12px; color:var(--text-faint); margin-bottom:10px; }
.admin-stat-value{ font-size:32px; font-family:var(--font-serif); color:var(--accent-gold-bright); }
@media (max-width: 980px){
  .admin-stat-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 768px){
  .admin-stat-grid{ grid-template-columns: repeat(2,1fr); gap:12px; }
}
@media (max-width: 420px){
  .admin-stat-grid{ grid-template-columns: 1fr; }
}

/* Site content editor cards */
.content-edit-card{
  background: var(--bg-panel); border:1px solid var(--border-dim);
  padding: 24px; margin-bottom: 20px;
}
.content-edit-card h4{
  font-size:15px; color: var(--accent-gold-bright); margin-bottom: 4px; letter-spacing:.5px;
}
.content-edit-card .ce-key{ font-size:11px; color: var(--text-faint); margin-bottom:18px; }
.content-edit-card .form-row{ margin-bottom: 14px; }
.content-edit-card .form-row:last-of-type{ margin-bottom: 0; }
.content-edit-card .ce-save-row{ display:flex; justify-content:flex-end; margin-top: 16px; }
.content-edit-card .ce-saved-msg{ font-size:12px; color: var(--accent-gold-bright); margin-right:14px; align-self:center; opacity:0; transition:.3s; }
.content-edit-card .ce-saved-msg.show{ opacity:1; }

/* ---------- Image upload (file + URL) ---------- */
.image-upload-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.image-upload-row .ce-bgimage,
.image-upload-row input[type=text]{ flex:1; min-width: 180px; }
.file-upload-btn{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding: 12px 16px; font-size:13px; letter-spacing:.5px;
  border:1px solid var(--border-light); color: var(--text-sub); background: var(--bg-black);
  cursor:pointer; transition:.2s; flex-shrink:0;
}
.file-upload-btn:hover{ border-color: var(--accent-gold); color: var(--accent-gold-bright); }
.file-upload-btn input[type=file]{ display:none; }
.image-preview-box{ margin-top:10px; }
.image-preview-box img{
  max-width:220px; max-height:140px; object-fit:cover;
  border:1px solid var(--border-dim); display:none;
}
.image-upload-hint{ font-size:11px; color:var(--text-faint); margin-top:6px; }

/* ---------------- Synergy tag chip input (max 2) ---------------- */
.tag-input-box{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  background: var(--bg-black); border:1px solid var(--border-light);
  padding: 10px 12px; min-height: 48px;
}
.tag-input-box .tag-chip{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--bg-card); border:1px solid var(--accent-gold); color: var(--accent-gold-bright);
  font-size:12px; padding: 5px 10px; letter-spacing:.5px;
}
.tag-input-box .tag-chip button{ background:none; border:none; color:inherit; font-size:12px; padding:0; line-height:1; }
.tag-input-box input{
  flex:1; min-width:100px; background:transparent; border:none; color:var(--text-main); font-size:14px; padding:6px 0;
}
.tag-input-box input:focus{ outline:none; }
.tag-input-hint{ font-size:11px; color:var(--text-faint); margin-top:6px; }

/* ---------------- OCR-assisted content drafting (screenshot -> draft text) ---------------- */
.ocr-assist-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.ocr-assist-btn{
  background: var(--bg-card-hover); border:1px solid var(--accent-gold); color: var(--accent-gold-bright);
  font-weight:700;
}
.ocr-assist-btn:hover{ background: var(--accent-gold); color:#fff; }
.ocr-status{ font-size:12px; color: var(--text-sub); line-height:1.5; }
.ocr-status-waiting{ color: var(--accent-gold-bright); }
.ocr-status-busy{ color: var(--accent-gold-bright); }
.ocr-status-busy::before{ content:''; display:inline-block; width:8px; height:8px; margin-right:6px;
  border-radius:50%; background: var(--accent-gold-bright); animation: ocrBlink 1s infinite; }
@keyframes ocrBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* ---------------- IP-blocked overlay (best-effort client-side gate) ---------------- */
#ip-blocked-overlay{
  position:fixed; inset:0; z-index:999999; background:#0b1830;
  display:flex; align-items:center; justify-content:center; padding:24px; text-align:center;
}
.ip-blocked-box{ color:#fff; max-width:420px; }
.ip-blocked-box i{ font-size:44px; color:#ff6b6b; margin-bottom:18px; display:block; }
.ip-blocked-box h2{ font-family:var(--font-serif); font-size:24px; margin-bottom:14px; }
.ip-blocked-box p{ font-size:14px; line-height:1.7; opacity:.85; }

/* ---------------- Admin: 접속 통계 (visitor stats) ---------------- */
.visitor-summary-row{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.visitor-summary-card{
  flex:1; min-width:160px; background:var(--bg-panel); border:1px solid var(--border-dim); padding:20px 24px;
}
.visitor-summary-card .vs-label{ font-size:12px; color:var(--text-faint); margin-bottom:8px; }
.visitor-summary-card .vs-value{ font-size:30px; font-family:var(--font-serif); color:var(--accent-gold-bright); }
.visitor-chart-wrap{
  background:var(--bg-panel); border:1px solid var(--border-dim); padding:20px; margin-bottom:28px; height:260px;
}
.admin-subheading{ font-size:16px; margin:0 0 14px; color:var(--text-main); font-family:var(--font-serif); }
.ip-chip{
  display:inline-flex; align-items:center; gap:6px; font-family:monospace; font-size:12px;
  background:var(--bg-black); border:1px solid var(--border-light); padding:3px 8px; color:var(--text-sub);
}
.ip-ban-form{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; align-items:center; }
.ip-ban-form input[type=text]{ flex:1; min-width:160px; }
.visitor-table-block{ margin-bottom:30px; }
@media (max-width: 980px){
  .admin-stat-grid{ grid-template-columns: repeat(3,1fr); }
  .visitor-chart-wrap{ height:220px; }
}
.ocr-status-done{ color: #1c9c5c; }

/* ---------------- Gallery editor (multi image + caption, admin) ---------------- */
.gallery-editor{
  border:1px solid var(--border-dim); background: var(--bg-black); padding: 16px; margin-top: 8px;
}
.gallery-rows{ display:flex; flex-direction:column; gap:16px; margin-bottom: 14px; }
.gallery-empty-hint{ font-size:12px; color:var(--text-faint); padding: 10px 2px; }
.gallery-row{
  display:grid; grid-template-columns: 140px 1fr 36px; gap: 12px;
  background: var(--bg-panel); border:1px solid var(--border-dim); padding: 12px; align-items:start;
}
.gallery-row-img{ display:flex; flex-direction:column; gap:8px; }
.gallery-row-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--border-dim); background:#e7ecf3; }
.gallery-file-btn{ justify-content:center; font-size:11px; padding: 8px 10px; }
.gallery-row-cap textarea{
  width:100%; min-height: 88px; resize:vertical;
  background: var(--bg-black); border:1px solid var(--border-light); color: var(--text-main); padding:10px; font-size:13px;
}
.gallery-row-cap textarea:focus{ outline:none; border-color:var(--accent-gold); }
.gallery-remove-btn{
  width:32px; height:32px; background:transparent; border:1px solid var(--border-light); color: var(--text-sub);
  align-self:flex-start;
}
.gallery-remove-btn:hover{ border-color: var(--accent-red); color: var(--tier-s); }
.gallery-add-btn{ width:100%; justify-content:center; }

/* ---------------- Rich text editor (Quill) ---------------- */
.rich-editor-wrap{ margin-top: 6px; }
/* Toolbar used to be a normal in-flow element that scrolled away with the page as soon as the
   author scrolled down into a long document, making it hard to reach for formatting text near the
   bottom (had to scroll all the way back up first, easily losing the current text selection in the
   process). Sticking it to the top of whichever element actually scrolls (the page itself on
   write/detail pages, or the modal's own scrollable box when editing inside a modal) keeps it
   reachable at all times so a selection can be formatted (bold/underline/color/etc, including
   several at once) without ever needing to scroll away from it first. */
.rich-editor-wrap .ql-toolbar.ql-snow{
  background: var(--bg-card-hover); border:1px solid var(--border-light); border-bottom:none;
  position: sticky; top: 78px; z-index: 150;
}
/* Inside an edit modal (.modal-box has its own overflow-y:auto scroll, separate from the page --
   see .modal-box) the site header isn't part of that scroll context at all, so the toolbar should
   stick to the very top of the modal's own scrollable area instead of leaving a large empty gap
   the height of the page header. */
.modal-box .rich-editor-wrap .ql-toolbar.ql-snow{ top: 0; }
.rich-editor-wrap .ql-container.ql-snow{
  border:1px solid var(--border-light); background:#fff; color: var(--text-main);
  font-family: var(--font-body); font-size:14px;
}
.rich-editor-wrap .ql-editor{ min-height:180px; line-height:1.8; }
.rich-editor-wrap .ql-editor.ql-blank::before{ color: var(--text-faint); font-style:normal; }
/* Visual feedback while dragging image file(s) from the OS file explorer over the editor
   (see wireImageDragDrop in common.js) -- dashed accent border + tinted background. */
.rich-editor-wrap.rich-editor-drag-over .ql-container.ql-snow{
  outline: 2px dashed var(--accent-gold-bright); outline-offset: -2px; background: var(--bg-card-hover);
}

/* Rendered rich content (guide/post/character detail pages) now contains real <p>/<ul>/<a>/<span
   style=color> tags produced by the editor above, instead of only plain escaped text, so give
   the common block-level tags sane default spacing. white-space:pre-wrap is kept on the parent
   containers for backward compatibility with old plain-text content saved before this feature. */
.rich-content p, .guide-detail-body p, .post-detail-body p{ margin-bottom: 14px; }
.rich-content p:last-child, .guide-detail-body p:last-child, .post-detail-body p:last-child{ margin-bottom:0; }
.rich-content ul, .rich-content ol, .guide-detail-body ul, .guide-detail-body ol,
.post-detail-body ul, .post-detail-body ol{ margin: 0 0 14px 22px; }
.rich-content a, .guide-detail-body a, .post-detail-body a{ color: var(--accent-gold-bright); text-decoration:underline; }
.rich-content blockquote, .guide-detail-body blockquote, .post-detail-body blockquote{
  border-left:3px solid var(--accent-gold); padding-left:14px; color: var(--text-sub); margin:0 0 14px;
}
.rich-content h1, .rich-content h2, .rich-content h3,
.guide-detail-body h1, .guide-detail-body h2, .guide-detail-body h3,
.post-detail-body h1, .post-detail-body h2, .post-detail-body h3{ margin: 18px 0 10px; color: var(--text-main); }

/* Quill's text-align formatting is applied as a class (not inline style) on the block element --
   these rules must exist on any page that renders saved rich content WITHOUT loading Quill's own
   CSS (i.e. public detail pages, which only load Quill when the viewer is actively editing). */
.ql-align-center{ text-align:center; }
.ql-align-right{ text-align:right; }
.ql-align-justify{ text-align:justify; }
.ql-align-left{ text-align:left; }

/* Photos inserted inline into rich content (guide/post/character body text via the editor's image
   toolbar button) render at a reasonable max width and stay responsive; the caption line the
   editor auto-inserts right below the photo is plain italic text within the same rich content. */
.rich-content img, .guide-detail-body img, .post-detail-body img,
.rich-editor-wrap .ql-editor img{
  max-width:100%; height:auto; display:block; margin: 10px 0; border:1px solid var(--border-dim);
}

/* Multi-photo-in-a-row insert: up to 5 photos selected at once render side by side in one row
   (auto-fit wraps to fewer columns on narrow screens so it stays responsive), each with its own
   caption directly underneath. Used both inside the editor (.ql-editor .img-row) and on public
   detail pages (.rich-content/.guide-detail-body/.post-detail-body .img-row). */
.rich-content .img-row, .guide-detail-body .img-row, .post-detail-body .img-row,
.rich-editor-wrap .ql-editor .img-row{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin: 14px 0;
}
/* Force every photo in a row to the SAME height regardless of its original aspect ratio (a mix of
   portrait/landscape photos in one row would otherwise look uneven/jagged), WITHOUT cropping any
   part of the photo out -- object-fit:contain scales each photo down to fit entirely inside the
   shared fixed-height box (any leftover space is simply padded with a neutral background rather
   than cutting off part of the image, unlike object-fit:cover which crops). A fixed pixel height
   (not the CSS `aspect-ratio` property) is used so this also works on browsers that don't support
   `aspect-ratio` (older mobile Safari/WebView notably doesn't). */
.rich-content .img-row img, .guide-detail-body .img-row img, .post-detail-body .img-row img,
.rich-editor-wrap .ql-editor .img-row img{
  margin:0; width:100%; height:200px; object-fit: contain; object-position:center;
  background: var(--bg-card-hover); border:1px solid var(--border-dim); border-radius:4px; display:block;
}
.rich-content .img-row-item, .guide-detail-body .img-row-item, .post-detail-body .img-row-item,
.rich-editor-wrap .ql-editor .img-row-item{
  display:flex; flex-direction:column; min-width:0;
}
.rich-content .img-caption, .guide-detail-body .img-caption, .post-detail-body .img-caption,
.rich-editor-wrap .ql-editor .img-caption{
  margin-top:6px; font-size:13px; font-style:italic; color: var(--text-faint);
  text-align:center; word-break:break-word; outline:none;
  white-space: pre-line; /* preserve line breaks the author typed with Enter in the caption --
    without this, newlines in the saved <div class="img-caption"> text collapse into a single
    line for viewers even though the author's Enter presses were saved correctly. */
}
/* Editor-only: a caption is now a plain, inert, clickable <div> (see wireImageGroupEditing in
   common.js) -- actual editing happens in a separate floating popover (.caption-edit-popover
   below), never inside this div itself, so it stays visually identical to the read-only caption
   text shown on public pages except for a hover highlight/pointer cursor hinting it's clickable. */
.rich-editor-wrap .ql-editor .img-caption{
  cursor: pointer; border-radius:3px; padding:2px 4px; min-height: 1.4em; transition: background .15s;
}
.rich-editor-wrap .ql-editor .img-caption:hover{
  background: var(--bg-card-hover);
}
.rich-editor-wrap .ql-editor .img-caption.img-caption-empty::before{
  content: attr(data-placeholder); color: var(--text-faint); opacity:0.7;
}

/* The floating caption-editor popover itself -- appended directly to <body> (see
   ensureCaptionPopover in common.js), NEVER inside .rich-editor-wrap/quill.root, so typing in it
   is completely ordinary page-level text input with zero interaction with Quill or contenteditable
   of any kind. Hidden by default; .open shows it positioned over/under whichever caption was
   clicked. */
.caption-edit-popover{
  display:none; position:fixed; z-index:600;
  background:#fff; border:1px solid var(--border-light); border-radius:8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3); padding:10px;
}
.caption-edit-popover.open{ display:block; }
.caption-edit-popover textarea{
  display:block; width:100%; min-height:64px; resize:vertical;
  border:1px solid var(--border-dim); border-radius:5px; padding:8px; font-size:13px;
  font-family:inherit; line-height:1.5; color: var(--text-main); outline:none;
}
.caption-edit-popover textarea:focus{ border-color: var(--accent-gold); }
.caption-edit-popover .cep-actions{ display:flex; justify-content:flex-end; margin-top:8px; }
.caption-edit-popover .cep-done-btn{
  font-size:12px; font-weight:600; padding:5px 14px; background: var(--accent-gold); color:#fff;
  border:none; border-radius:5px; cursor:pointer; transition:.15s;
}
.caption-edit-popover .cep-done-btn:hover{ background: var(--accent-gold-bright); }

/* ---------------- Content section image gallery (public detail page) ---------------- */
.section-gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.section-gallery-item{ background: var(--bg-card); border:1px solid var(--border-dim); overflow:hidden; }
.section-gallery-item img{ width:100%; aspect-ratio: 4/3; object-fit:cover; }
.section-gallery-item .sg-caption{ padding: 12px 14px; font-size:13px; color: var(--text-sub); line-height:1.7; white-space:pre-wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .container{ padding: 0 18px; }
  .char-grid{ grid-template-columns: repeat(3,1fr); gap:16px; }
  .list-grid{ grid-template-columns: repeat(2,1fr); gap:16px; }
  .char-detail-layout{ grid-template-columns: 1fr; gap:30px; }
  .admin-shell{ grid-template-columns: 1fr; }
  .admin-sidebar{ display:flex; overflow-x:auto; padding: 12px; border-right:none; border-bottom:1px solid var(--border-dim); -webkit-overflow-scrolling:touch; }
  .admin-sidebar a{ border-left:none; border-bottom:3px solid transparent; white-space:nowrap; }
  .admin-main{ padding: 26px 20px; }
  .section{ padding: 64px 0; }
  .hero-title{ font-size: 52px; }
  .rich-content .img-row img, .guide-detail-body .img-row img, .post-detail-body .img-row img,
  .rich-editor-wrap .ql-editor .img-row img{ height:160px; }
}

@media (max-width: 768px){
  .site-header .container{ height: 64px; padding-right: 4px; }
  .rich-editor-wrap .ql-toolbar.ql-snow{ top: 64px; } /* matches the shorter mobile header height */
  .modal-box .rich-editor-wrap .ql-toolbar.ql-snow{ top: 0; } /* still 0 inside a modal's own scroll area */
  .logo{ font-size: 18px; gap:7px; }
  .logo .logo-sub{ display:none; }
  .main-nav{ position:fixed; top:64px; left:0; right:0; background: var(--header-bg); flex-direction:column;
    padding: 20px 24px; gap:4px; transform: translateY(-120%); transition:.3s; border-bottom:1px solid rgba(255,255,255,0.08);
    max-height: calc(100vh - 64px); overflow-y:auto; z-index: 199; }
  .main-nav.open{ transform: translateY(0); }
  .main-nav a{ padding: 14px 0; font-size:16px; border-bottom:1px solid rgba(255,255,255,0.08); }
  .nav-toggle{ display:flex; }
  .auth-box{ gap:6px; }
  .auth-nick{ font-size:11px; }
  .btn-admin-link{ padding:7px 10px; font-size:11px; }
  .hero{ height: 460px; background-position: center top; }
  .hero-title{ font-size: 32px; letter-spacing:1px; }
  .hero-eyebrow{ font-size:11px; letter-spacing:3px; margin-bottom:14px; }
  .hero-desc{ font-size:14px; }
  .hero-actions{ flex-direction:column; width:100%; max-width:280px; margin:0 auto; }
  .hero-actions .btn{ width:100%; }
  .section{ padding: 48px 0; }
  .section-head{ margin-bottom: 26px; }
  .section-title{ font-size: 26px; }
  .char-grid{ grid-template-columns: repeat(2,1fr); gap:12px; }
  .list-grid{ grid-template-columns: 1fr; gap:16px; }
  .tier-row{ flex-direction:column; gap:14px; padding:14px; }
  .tier-row-label{ width:100%; flex-direction:row; padding:10px; }
  .tier-row-chars{ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap:10px; width:100%; }
  .char-card .char-info{ padding:10px; }
  .char-card .char-name{ font-size:14px; }
  .form-grid-2{ grid-template-columns:1fr; }
  .form-panel{ padding: 22px 18px; }
  .utility-bar{ display:none; }
  .filter-bar{ padding:14px; gap:12px; }
  .filter-group{ width:100%; }
  .search-input{ width:100%; }
  .board-toolbar{ flex-direction:column; align-items:stretch; }
  .board-toolbar .btn{ width:100%; text-align:center; }
  .board-toolbar-right{ flex-direction:column; align-items:stretch; }
  .board-toolbar-right .sort-select{ width:100%; }
  .board-tabs{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .board-tab{ flex-shrink:0; padding:10px 14px; }
  .post-table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .post-table td.col-title{ max-width: 160px; }
  .footer-top{ flex-direction:column; gap:24px; }
  .footer-links{ gap:30px; width:100%; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:8px; text-align:left; }
  .admin-table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .modal-box{ padding: 22px 18px; max-height: 92vh; }
  .modal-close-row{ flex-direction:column-reverse; }
  .modal-close-row .btn{ width:100%; }
  .image-upload-row{ flex-direction:column; align-items:stretch; }
  .file-upload-btn{ justify-content:center; }
  .gallery-row{ grid-template-columns: 1fr; }
  .gallery-row-img{ flex-direction:row; align-items:center; }
  .gallery-row-img img{ width:80px; aspect-ratio:1/1; flex-shrink:0; }
  .gallery-remove-btn{ width:100%; }
  .section-gallery{ grid-template-columns: 1fr 1fr; gap:12px; }
  .char-detail-info .cd-name{ font-size: 28px; }
  .cd-stat-row{ gap:18px; }
  .content-block{ padding: 34px 0; }
  .content-block h3{ font-size:19px; }
  .guide-detail-head h1{ font-size: 26px; }
  .admin-toolbar{ flex-direction:column; align-items:stretch; gap:14px; }
  .admin-toolbar .btn{ width:100%; text-align:center; }
  .comment-form{ flex-direction:column; }
  .comment-form input[type=text], .comment-form input[type=password]{ width:100%; }
}

@media (max-width: 480px){
  .container{ padding: 0 14px; }
  .hero{ height: 420px; }
  .hero-title{ font-size: 26px; }
  .char-grid{ grid-template-columns: repeat(2,1fr); gap:10px; }
  .section-gallery{ grid-template-columns: 1fr; }
  .char-card .tier-badge{ width:26px; height:26px; font-size:12px; }
  .char-card .rarity-badge{ font-size:10px; padding:3px 7px; top:8px; right:8px; }
  .logo{ font-size: 15px; letter-spacing: 1px; gap:5px; }
  .logo .logo-mark{ width:8px; height:8px; }
  .site-header .container{ gap: 6px; }
  .nav-toggle span{ width:20px; }
  .btn{ padding: 12px 22px; font-size:13px; }
  .section-title{ font-size: 22px; }
  .admin-stat-card{ padding: 16px !important; }
  .auth-nick{ font-size:0; gap:0; }
  .auth-nick i{ font-size:15px; }
  .btn-admin-link{ padding:6px 8px; font-size:10px; }
}