/* 색: 어두운 화면은 Night Owl, 밝은 화면은 Light Owl (VS Code 테마) 색을 따릅니다.
   흐린 글자 색은 배경과 대비가 충분하도록 테마보다 조금 진하게/밝게 맞췄습니다. */
:root {
  color-scheme: light dark; /* 스크롤바, 입력칸 같은 브라우저 기본 부품도 밝기에 맞춥니다 */
  --bg: #f0f0f0;
  --surface: #ffffff;
  --text: #403f53;
  --muted: #5f6f7c;
  --border: #d9d9d9;
  --accent: #4876d6;
  --accent-text: #ffffff;
  --topbar: #011627;
  --topbar-text: #d6deeb;
  --topbar-muted: #8badc1;
  --topbar-line: #1d3b53;
  --thumb: #e4e9ee;
  --badge: #994cc3;
  --badge-text: #ffffff;
  --good: #08916a;
  --bad: #de3d3b;
  --warn: #a8690a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #011627;
    --surface: #0b2942;
    --text: #d6deeb;
    --muted: #8badc1;
    --border: #1d3b53;
    --accent: #82aaff;
    --accent-text: #011627;
    --topbar: #000c1d;
    --thumb: #13344f;
    --badge: #c792ea;
    --badge-text: #011627;
    --good: #addb67;
    --bad: #ef5350;
    --warn: #ecc48d;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
}

/* 화면 전체: 메뉴 / 배너 / (필터 + 목록). 목록만 스크롤됩니다. */
.app {
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

/* ---- 메뉴 ---- */

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  height: 56px;
  background: var(--topbar);
  color: var(--topbar-text);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
}

.logo-mark {
  display: grid;
  grid-template-columns: repeat(2, 9px);
  gap: 2px;
}
.logo-mark i { width: 9px; height: 9px; border-radius: 2px; background: #ef5350; }
.logo-mark i:nth-child(2), .logo-mark i:nth-child(3) { background: #82aaff; }

.menu { display: flex; gap: 20px; flex: 1; }
.menu a, .menu .soon { color: var(--topbar-muted); text-decoration: none; font-size: 15px; white-space: nowrap; }
.menu a:hover { color: var(--topbar-text); }
.menu a[aria-current="page"] { color: var(--topbar-text); font-weight: 600; }
.menu .soon { opacity: 0.5; cursor: default; }

.langs { display: flex; border: 1px solid var(--topbar-line); border-radius: 6px; overflow: hidden; }
.langs button {
  padding: 5px 10px;
  border: 0;
  background: transparent;
  color: var(--topbar-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.langs button:hover { color: var(--topbar-text); }
.langs button[aria-pressed="true"] { background: var(--topbar-line); color: var(--topbar-text); }

.logo { white-space: nowrap; }

.login, .logout {
  padding: 6px 14px;
  border: 1px solid var(--topbar-line);
  border-radius: 6px;
  background: transparent;
  color: var(--topbar-text);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.logout { padding: 4px 10px; color: var(--topbar-muted); font-size: 13px; }
.login:hover:not(:disabled), .logout:hover { border-color: var(--topbar-muted); color: var(--topbar-text); }
.login:disabled { opacity: 0.5; cursor: default; }
.login[hidden], .logout[hidden], .me[hidden], .login-menu[hidden] { display: none; }

/* 로그인 방법 고르기: 로그인 버튼 아래로 펼칩니다 */
.login-box { position: relative; }
.login-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: 240px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
}
.login-menu a {
  display: block;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
}
.login-menu a:hover, .login-menu a:focus-visible { border-color: var(--accent); color: var(--accent); }
.login-hint { margin: 0; color: var(--muted); font-size: 12px; }
.login-error { margin: 0; color: var(--bad); font-size: 13px; }
/* 지금 신원: "게스트 4821" 또는 계정 이름 */
.me { color: var(--topbar-muted); font-size: 14px; white-space: nowrap; text-decoration: none; }
.me:hover, .me[aria-current="page"] { color: var(--topbar-text); text-decoration: underline; }

/* ---- 배너 ---- */

.banner { position: relative; }

.slide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 140px;
  padding: 0 40px;
  color: #fff;
}
.slide[hidden], fieldset[hidden] { display: none; }
.slide h2 { margin: 0 0 6px; font-size: 24px; }
.slide p { margin: 0; opacity: 0.9; }
.tone-a { background: linear-gradient(120deg, #4b2f99, #7e57c2 55%, #b0407f); }
.tone-b { background: linear-gradient(120deg, #0b2942, #1f5f99 55%, #12756d); }

.cta {
  flex: none;
  padding: 10px 18px;
  border-radius: 8px;
  background: #fff;
  color: #011627;
  font-weight: 600;
  text-decoration: none;
}

.dots {
  position: absolute;
  left: 40px;
  bottom: 12px;
  display: flex;
  gap: 6px;
}
.dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}
.dots button[aria-selected="true"] { background: #fff; width: 20px; border-radius: 4px; }

/* ---- 필터 + 목록 ---- */

.body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 0;
}

.filters {
  overflow-y: auto;
  padding: 20px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

fieldset { margin: 20px 0 0; padding: 0; border: 0; }
legend { margin-bottom: 6px; font-weight: 600; font-size: 14px; }
fieldset label { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
fieldset small { color: var(--muted); }
fieldset label.sub { margin-top: 2px; padding-left: 4px; font-size: 13px; color: var(--muted); }
fieldset label:has(input:disabled) { opacity: 0.5; cursor: default; }

/* ---- 게임 창 ---- */

.game-dialog {
  width: min(960px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 48px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
.game-dialog[open] { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.game-dialog::backdrop { background: rgba(1, 22, 39, 0.7); }

.gd-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
/* 창이 낮으면 그림이 줄어들어 왼쪽 칸이 스크롤되지 않습니다 */
.gd-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 248px;
  min-height: 96px;
  padding: 12px;
  border-radius: 10px;
  background: var(--thumb);
}
.gd-thumb canvas {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.gd-thumb.no-thumb canvas { display: none; }
.gd-side h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 19px; }
.gd-meta { margin: -4px 0 4px; color: var(--muted); font-size: 13px; }
.gd-side .btn { flex: none; padding: 11px 0; font-size: 15px; }
.gd-side button.btn { cursor: pointer; }
.gd-side .btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* 의견 칸: 왼쪽 버튼들 아래의 남은 자리를 채웁니다 */
.gd-talk {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-height: 84px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.gd-talk:hover, .gd-talk[aria-pressed="true"] { border-style: solid; border-color: var(--accent); }
.gd-talk[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.gd-talk-head { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.gd-talk-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.gd-talk-go { margin-left: auto; color: var(--muted); font-size: 18px; line-height: 1; }
.gd-talk-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.gd-main { display: flex; flex-direction: column; min-height: 0; }
.gd-head { position: relative; padding: 14px 56px; border-bottom: 1px solid var(--border); text-align: center; }
.gd-head h3 { margin: 0; font-size: 15px; letter-spacing: 0.03em; }
.gd-head form { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
.gd-head .back { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); font-size: 26px; line-height: 1; }
.gd-head .back[hidden] { display: none; }
.game-dialog .close,
.game-dialog .back {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
}
.game-dialog .close:hover,
.game-dialog .back:hover { background: var(--surface); color: var(--text); }
.gd-body { flex: 1; overflow-y: auto; padding: 20px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

.gd-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.gd-card[hidden] { display: none; }
.gd-field { padding: 16px 20px; border-top: 1px solid var(--border); }
.gd-field:first-child { border-top: 0; }
.gd-field[hidden] { display: none; }
.gd-field h4 { margin: 0 0 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.gd-field.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gd-field.row h4 { flex: none; margin: 0; }
.gd-field.row span { text-align: right; }

/* 접는 칸: 세모를 누르면 펼칩니다 */
.gd-fold summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.gd-fold summary::-webkit-details-marker { display: none; }
.gd-fold summary::before {
  content: '';
  flex: none;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--muted);
  transition: transform 0.15s;
}
.gd-fold[open] summary::before { transform: rotate(90deg); }
.gd-fold summary h4 { margin: 0; }
.gd-fold summary:hover h4 { color: var(--text); }
.gd-fold[open] summary { margin-bottom: 10px; }
.gd-desc { margin: 0; line-height: 1.6; }
.gd-desc.muted { color: var(--muted); font-size: 14px; }
.btn.gd-register { display: inline-block; margin-top: 12px; padding: 8px 18px; text-decoration: none; }

.rulebook-notes { margin: 0; color: var(--muted); font-size: 13px; }
.rulebook-text p { margin: 12px 0 0; white-space: pre-line; line-height: 1.7; }

.create-picks { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.create-picks[hidden] { display: none; }
.pick { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.pick:has(input[type="number"]:disabled) { color: var(--muted); }
#create-minutes {
  width: 72px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.gd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gd-actions .btn { flex: none; padding: 10px 22px; }

/* ---- 의견과 신고 ---- */

.comment-form textarea,
#report-detail {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}
/* 계정만 되는 곳(의견, 방 만들기)에서 게스트에게 보여주는 로그인 안내 */
.need-login p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
#create-login { margin: 12px 0; }
.need-login[hidden], .login-links[hidden], .comment-form[hidden] { display: none; }
.login-links { display: flex; flex-wrap: wrap; gap: 8px; }
.login-links a {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.login-links a:hover, .login-links a:focus-visible { border-color: var(--accent); color: var(--accent); }
.comment-form-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.comment-as { color: var(--muted); font-size: 13px; }
.comment-len { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.comment-len.over { color: var(--bad); }
.comment-form-row .btn { flex: none; padding: 8px 20px; }
.comment-error { margin: 10px 0 0; color: var(--bad); font-size: 13px; }
.comment-error[hidden], .comments-note[hidden], .gd-desc[hidden] { display: none; }
.comments-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--good) 12%, transparent); font-size: 14px; }

.comments { margin: 0; padding: 0; list-style: none; }
.comment { padding: 12px 0; border-top: 1px solid var(--border); }
.comment:first-child { padding-top: 0; border-top: 0; }
.comment-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.comment-head small { color: var(--muted); font-size: 12px; }
.comment-text { margin: 6px 0 0; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.comment.hidden .comment-text { color: var(--muted); font-style: italic; }
.comment-actions { margin-left: auto; display: flex; gap: 10px; }

.text-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.text-btn:hover { color: var(--text); text-decoration: underline; }
.text-btn:disabled { cursor: default; text-decoration: none; opacity: 0.7; }
.comments-foot { text-align: right; }

.report-quote {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--border);
  color: var(--muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
  max-height: 8em;
  overflow: auto;
}
.report-quote:empty { display: none; }
.report-reasons { display: flex; flex-direction: column; gap: 8px; }
.report-lead { margin-top: 10px; }

@media (max-width: 760px) {
  .game-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .game-dialog[open] { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; }
  .gd-side { border-right: 0; border-bottom: 1px solid var(--border); overflow: visible; }
  .gd-thumb { flex: none; height: 180px; }
  .gd-talk { flex: none; }
  .gd-main { min-height: auto; }
  .gd-body { overflow: visible; padding: 16px; }
  /* 닫기 버튼은 화면 위에 붙여 둡니다 (오른쪽 칸이 아래로 내려가므로) */
  .gd-head form { position: fixed; top: 8px; right: 8px; transform: none; z-index: 1; }
  .game-dialog .close { background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
}

.link {
  margin-top: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.list {
  overflow-y: auto;
  padding: 20px 24px 32px;
}

.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.list-head h1 { margin: 0; font-size: 20px; }
.count { color: var(--muted); font-weight: 400; font-size: 16px; }
.sort { color: var(--muted); font-size: 14px; }
.sort select {
  margin-left: 6px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.card:not(.broken):hover { border-color: var(--accent); transform: translateY(-2px); }
.card:has(.card-open:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .card:not(.broken):hover { transform: none; }
}
/* 카드 이름 버튼이 카드 전체를 덮어서, 어디를 눌러도 게임 창이 뜹니다 */
.card-open {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.card-open::after { content: ""; position: absolute; inset: 0; }
.card-open:focus-visible { outline: none; }
.card.broken { border-color: var(--bad); }

.thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 196px;
  background: var(--thumb);
}
.thumb canvas { border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.thumb.no-thumb canvas { display: none; }

.card-body { padding: 14px 16px 16px; flex: 1; }
.card-body h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 17px; }
.desc { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.card .desc { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.badge {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--badge);
  color: var(--badge-text);
  font-size: 12px;
  font-weight: 500;
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}
/* 난이도 태그는 하/중/상을 색으로도 구분합니다. */
.tags li.diff-easy { border-color: var(--good); color: var(--good); }
.tags li.diff-normal { border-color: var(--warn); color: var(--warn); }
.tags li.diff-hard { border-color: var(--bad); color: var(--bad); }
.tags li.lang-tag { border-style: dashed; }
.tags li.lang-tag.full { border-style: solid; color: var(--text); }
.badge.warn { background: var(--warn); }

.btn {
  flex: 1;
  padding: 8px 0;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.btn.ghost { background: transparent; color: var(--accent); }
.btn:disabled { opacity: 0.45; }

.empty { color: var(--muted); }

/* ---- 좁은 화면: 한 장의 긴 페이지로 ---- */

@media (max-width: 760px) {
  .app { display: block; height: auto; }
  /* 메뉴는 둘째 줄로: 로고 · 언어 · 로그인 / 메뉴 */
  .topbar { flex-wrap: wrap; height: auto; gap: 8px 12px; padding: 10px 16px; }
  /* 로그인 버튼이 어느 줄에 오든 메뉴는 상단 바 아래에 화면 폭으로 펼칩니다 */
  .topbar { position: relative; }
  .login-box { position: static; }
  .login-menu { top: 100%; left: 16px; right: 16px; width: auto; max-width: none; }
  .logo { white-space: nowrap; }
  .langs { margin-left: auto; }
  /* 메뉴가 화면보다 길면 페이지 전체가 넓어지지 않게 메뉴 안에서 옆으로 밉니다 */
  .menu { order: 3; flex-basis: 100%; min-width: 0; gap: 16px; overflow-x: auto; scrollbar-width: none; }
  .slide { height: auto; min-height: 120px; padding: 20px 16px 32px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .slide h2 { font-size: 19px; }
  .dots { left: 16px; }
  .body { display: block; }
  .filters { border-right: 0; border-bottom: 1px solid var(--border); padding: 16px; }
  .filters fieldset { display: inline-block; margin: 12px 20px 0 0; vertical-align: top; }
  .link { display: block; margin-top: 8px; }
  .list { overflow: visible; padding: 16px; }
}