/* ============================================================
   LYSC Comments — Neo-Brutalism comment widget
   Mounted inside a white box (.bg-white) on game detail pages.
   ============================================================ */

.lysc-comments {
  --lc-border: #000000;
  --lc-bg: #ffffff;
  --lc-text: #111111;
  --lc-muted: #6b7280;
  --lc-accent: #00d1c1;
  --lc-danger: #e11d48;
  font-family: 'Pretendard', ui-sans-serif, system-ui, sans-serif;
  color: var(--lc-text);
  width: 100%;
}

.lysc-comments * {
  box-sizing: border-box;
}

/* ---------- Header ---------- */
.lc-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}

.lc-head h3 {
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.lc-count {
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--lc-muted);
}

/* ---------- Form ---------- */
.lc-form {
  border: 3px solid var(--lc-border);
  box-shadow: 5px 5px 0 var(--lc-border);
  background: #fafafa;
  padding: 14px;
  margin-bottom: 24px;
}

.lc-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.lc-row .lc-input {
  flex: 1;
  min-width: 0;
}

.lc-input,
.lc-textarea {
  width: 100%;
  border: 2px solid var(--lc-border);
  background: #fff;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--lc-text);
  outline: none;
}

.lc-input:focus,
.lc-textarea:focus {
  box-shadow: 3px 3px 0 var(--lc-accent);
}

.lc-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}

.lc-form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.lc-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lc-counter {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--lc-muted);
}

.lc-submit {
  border: 3px solid var(--lc-border);
  background: var(--lc-accent);
  color: #000;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--lc-border);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.lc-submit:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--lc-border);
}

.lc-submit:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--lc-border);
}

.lc-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 4px 4px 0 var(--lc-border);
}

/* ---------- Notice / status ---------- */
.lc-notice {
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 10px;
  min-height: 1.1em;
}

.lc-notice.is-error { color: var(--lc-danger); }
.lc-notice.is-ok { color: #059669; }

/* ---------- List ---------- */
.lc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lc-item {
  border: 2px solid var(--lc-border);
  box-shadow: 4px 4px 0 var(--lc-border);
  background: #fff;
  padding: 12px 14px;
}

.lc-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.lc-nick {
  font-weight: 900;
  font-size: 0.92rem;
}

.lc-date {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--lc-muted);
  white-space: nowrap;
}

.lc-body {
  font-size: 0.9rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.lc-empty {
  text-align: center;
  color: var(--lc-muted);
  font-size: 0.85rem;
  padding: 24px 0;
}

/* ---------- Turnstile widget spacing ---------- */
.lc-turnstile { min-height: 0; }

@media (max-width: 520px) {
  .lc-row { flex-direction: column; }
  .lc-form-bottom { flex-direction: column; align-items: stretch; }
  .lc-submit { width: 100%; }
}

/* Turnstile 로드 실패 안내 */
.lc-turnstile-fail { display:inline-block; font-size:.85rem; font-weight:700; color:#b00020;
                     border:2px solid #b00020; padding:6px 10px; background:#fff5f5; }
html[data-theme="dark"] .lc-turnstile-fail { color:#ff8a8a; border-color:#ff8a8a; background:#2a1414; }

/* ==========================================================================
   다크 모드 (theme.css 와 같은 팔레트)
   --------------------------------------------------------------------------
   theme.css 와 같은 규칙을 따른다:
     · 항상 `html[data-theme="dark"]` 를 앞에 붙여 명시도로 이긴다 → 로드 순서 무관
     · 테두리는 밝게 뒤집고, 그림자는 검정을 유지한다
       (면 --surface 가 배경 --bg 보다 밝아서 검은 그림자가 그대로 읽힌다)
   ========================================================================== */

html[data-theme="dark"] .lysc-comments {
  --lc-border: #f4f1e8;   /* theme.css --line   */
  --lc-bg:     #201c16;   /* theme.css --surface */
  --lc-text:   #f4f1e8;   /* theme.css --ink     */
  --lc-muted:  #b6b0a2;   /* theme.css --ink-dim */
  --lc-danger: #ff8a8a;
}

/* ── 면 ─────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .lc-form { background: #201c16; }
html[data-theme="dark"] .lc-item { background: #201c16; }

html[data-theme="dark"] .lc-input,
html[data-theme="dark"] .lc-textarea {
  background: #2a251d;            /* theme.css --surface-2 */
  color: var(--lc-text);
}

html[data-theme="dark"] .lc-input::placeholder,
html[data-theme="dark"] .lc-textarea::placeholder { color: #a49d8d; }

/* ── 그림자는 검정 유지 (테두리만 밝게 뒤집혔으므로 따로 지정한다) ────────────── */
html[data-theme="dark"] .lc-form { box-shadow: 5px 5px 0 #000; }
html[data-theme="dark"] .lc-item { box-shadow: 4px 4px 0 #000; }
html[data-theme="dark"] .lc-submit { box-shadow: 4px 4px 0 #000; }
html[data-theme="dark"] .lc-submit:hover { box-shadow: 6px 6px 0 #000; }
html[data-theme="dark"] .lc-submit:active { box-shadow: 1px 1px 0 #000; }
html[data-theme="dark"] .lc-submit:disabled { box-shadow: 4px 4px 0 #000; }

/* 등록 버튼은 밝은 강조색 위라 검은 글자를 유지한다 */
html[data-theme="dark"] .lc-submit { color: #000; }

/* ── 상태 문구 ───────────────────────────────────────────────────────────── */
html[data-theme="dark"] .lc-notice.is-ok { color: #4ade80; }