* { box-sizing: border-box; }

/* modern-v2를 위해 추가된 요소들은 classic에서는 항상 숨김.
   (아래 modern-v2 섹션에서만 다시 보이게 한다) */
.modern-icon,
.hero-greeting,
.event-marker,
.event-time-modern {
  display: none;
}

body {
  margin: 0;
  padding: 16px;
  background: #2e2a24;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  color: #3a2e22;
}

.console {
  max-width: 720px;
  margin: 0 auto;
  background: #d8c9a3;
  border: 6px solid #6b5638;
  border-radius: 18px;
  box-shadow: 0 8px 0 #1c1712;
  overflow: hidden;
}

.console-header {
  background: #6b5638;
  color: #f3e9d2;
  padding: 12px 16px;
}

.console-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.console-title {
  font-size: 1.3em;
  font-weight: bold;
}

.theme-toggle {
  background: transparent;
  border: 1px solid #f3e9d2;
  color: #f3e9d2;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72em;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.theme-toggle:hover {
  background: rgba(243, 233, 210, 0.15);
}

.console-nav a {
  color: #f3e9d2;
  text-decoration: none;
  margin-right: 12px;
  font-size: 0.85em;
  border-bottom: 1px dashed transparent;
}

.console-nav a:hover {
  border-bottom-color: #f3e9d2;
}

.console-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.console-tabs a {
  color: #d8c9a3;
  text-decoration: none;
  font-size: 0.85em;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 999px;
  background: #4d3f28;
}

.console-tabs a.active {
  color: #6b5638;
  background: #f3e9d2;
}

.console-screen {
  padding: 16px;
  background: #efe4c8;
}

.panel {
  background: #f7f0dc;
  border: 3px solid #b89a6a;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.panel h2 {
  margin-top: 0;
  font-size: 1.05em;
  color: #6b5638;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel h2 .btn.small {
  display: inline-block;
}

input[type="text"],
input[type="password"],
select {
  font-family: inherit;
  border: 2px solid #b89a6a;
  border-radius: 6px;
  padding: 6px 8px;
  background: #f7f0dc;
  color: #3a2e22;
}

.nickname-form {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.add-mushroom-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.muted {
  color: #8a7b5c;
  font-size: 0.9em;
}

.stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.9em;
}

.stat {
  background: #ecdfc0;
  border-radius: 8px;
  padding: 6px 10px;
  white-space: nowrap;
}

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-item {
  padding: 6px 10px;
  margin-bottom: 6px;
  border-left: 4px solid #b89a6a;
  background: #ecdfc0;
  border-radius: 6px;
  font-size: 0.92em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.event-item.category-갈등 { border-left-color: #c0503f; }
.event-item.category-화해-도움 { border-left-color: #4f8f6b; }
.event-item.category-만남-친분 { border-left-color: #d9a441; }
.event-item.category-특수 { border-left-color: #a35fc9; }
.event-item.category-신규등장 { border-left-color: #4d8fd1; }

.event-body {
  flex: 1 1 auto;
  min-width: 0;
}

.event-time { color: #8a7b5c; font-size: 0.8em; margin-right: 6px; }
.event-category { font-weight: bold; margin-right: 4px; }

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

.mushroom-card {
  position: relative;
  display: block;
  background: #ecdfc0;
  border: 3px solid #b89a6a;
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  text-decoration: none;
  color: #3a2e22;
}

.pin-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.9em;
}

.mushroom-emoji {
  font-size: 1.8em;
  white-space: nowrap;
}

.mushroom-name { font-weight: bold; margin-top: 4px; }
.mushroom-species { font-size: 0.75em; color: #8a7b5c; }
.mushroom-action { font-size: 0.75em; margin-top: 4px; min-height: 2.2em; }
.mushroom-happiness { font-size: 0.8em; margin-top: 4px; }

.btn {
  background: #6b5638;
  color: #f3e9d2;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  cursor: pointer;
  font-size: 0.9em;
}

.btn:hover { background: #4d3f28; }
.btn.small { padding: 4px 8px; font-size: 0.8em; }

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.action-list {
  list-style: none;
  padding: 0;
}

.action-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.sort-row {
  margin-bottom: 10px;
  font-size: 0.85em;
}

.sort-row a {
  color: #6b5638;
  text-decoration: none;
  margin-right: 8px;
}

.sort-row a.active {
  font-weight: bold;
  text-decoration: underline;
}

.relation-list {
  list-style: none;
  padding: 0;
}

.relation-list li {
  padding: 4px 0;
}

.relation-list a {
  color: #4d6fd1;
  text-decoration: none;
}

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

.dex-card {
  background: #ecdfc0;
  border: 3px solid #b89a6a;
  border-radius: 10px;
  padding: 10px;
  font-size: 0.85em;
}

.dex-card.hidden {
  text-align: center;
  color: #8a7b5c;
}

.dex-silhouette {
  font-size: 2em;
}

.dex-box {
  margin-top: 6px;
  padding: 6px;
  border-radius: 6px;
}

.dex-box.origin {
  background: #d8d2c2;
  color: #4a453a;
}

.dex-box.game {
  color: #3a2e22;
}

.flash {
  background: #dcefdc;
  border: 2px solid #4f8f6b;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 12px;
}

.flash.error {
  background: #f5dcdc;
  border-color: #c0503f;
}

/* =========================================================================
   모던 디자인 v2 (data-theme="modern-v2")
   classic 규칙은 여기서도 전혀 건드리지 않는다.
   ========================================================================= */

:root[data-theme="modern-v2"] {
  --m-canvas: #f7f8f3;
  --m-surface: #ffffff;
  --m-surface-2: #eef2e8;
  --m-ink: #181b18;
  --m-ink-soft: #737971;
  --m-accent: #b9d84a;
  --m-accent-2: #ff6b57;
  --m-soft-accent: #d8e6d0;
  --m-highlight: #ffd95a;
  --m-dark: #1c211c;
  --m-line: rgba(24, 27, 24, 0.08);
  --m-shadow: 0 8px 30px rgba(24, 27, 24, 0.07);
}

/* emoji -> line icon 교체 (UI 기능 아이콘만. 나메코 캐릭터 emoji는 그대로 둔다) */
[data-theme="modern-v2"] .modern-icon {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

[data-theme="modern-v2"] .emoji-icon {
  display: none;
}

/* ---- 공용 셸 (모든 페이지에 영향 — 이번 패스에서 승인된 범위) ---- */

[data-theme="modern-v2"] body {
  background: var(--m-canvas);
}

[data-theme="modern-v2"] .console {
  max-width: 1200px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

[data-theme="modern-v2"] .console-header {
  background: var(--m-canvas);
  color: var(--m-ink);
  padding: 18px 8px;
  border-bottom: 1px solid var(--m-line);
}

[data-theme="modern-v2"] .console-title-row {
  margin-bottom: 12px;
}

[data-theme="modern-v2"] .console-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.15em;
  color: var(--m-ink);
}

[data-theme="modern-v2"] .theme-toggle {
  border-color: var(--m-line);
  color: var(--m-ink-soft);
}

[data-theme="modern-v2"] .theme-toggle:hover {
  background: var(--m-surface-2);
}

[data-theme="modern-v2"] .console-tabs {
  gap: 4px;
}

[data-theme="modern-v2"] .console-tabs a {
  background: transparent;
  color: var(--m-ink-soft);
  font-weight: 600;
  padding: 5px 4px;
  border-radius: 0;
}

[data-theme="modern-v2"] .console-tabs a.active {
  background: transparent;
  color: var(--m-ink);
  box-shadow: inset 0 -2px 0 var(--m-accent);
}

[data-theme="modern-v2"] .console-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

[data-theme="modern-v2"] .console-nav a {
  color: var(--m-ink-soft);
  font-weight: 600;
  font-size: 0.9em;
  margin-right: 0;
  border-bottom: none;
  transition: color 0.15s ease;
}

[data-theme="modern-v2"] .console-nav a:hover {
  color: var(--m-ink);
}

[data-theme="modern-v2"] .console-screen {
  background: var(--m-canvas);
  padding: 24px 20px 48px;
}

[data-theme="modern-v2"] .flash {
  background: var(--m-soft-accent);
  border: none;
  border-radius: 14px;
  color: var(--m-ink);
}

[data-theme="modern-v2"] .flash.error {
  background: #ffe3de;
}

/* ---- 인사 히어로 ---- */

[data-theme="modern-v2"] .hero-greeting {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 4px 28px;
}

[data-theme="modern-v2"] .hero-greeting h1 {
  margin: 0;
  font-size: 1.6em;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--m-ink);
}

[data-theme="modern-v2"] .hero-greeting p {
  margin: 4px 0 0;
  color: var(--m-ink-soft);
}

[data-theme="modern-v2"] .hero-residents {
  text-align: right;
  font-size: 1.4em;
  font-weight: 800;
  color: var(--m-ink);
}

[data-theme="modern-v2"] .hero-residents-label {
  display: block;
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-ink-soft);
}

/* ---- 대시보드 섹션 순서: 캐릭터 → 상태 → 일지 → 관리 ---- */

[data-theme="modern-v2"] .dashboard-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 880px;
  margin: 0 auto;
}

[data-theme="modern-v2"] .panel-mushrooms { order: -3; }
[data-theme="modern-v2"] .panel-stats { order: -2; }
[data-theme="modern-v2"] .panel-log { order: -1; }
[data-theme="modern-v2"] .panel-actions { order: 0; }

/* .panel 등 공유 클래스는 .dashboard-layout 안에서만 override한다
   (도감/나메코 목록/사건 기록/재배 관리 페이지는 다음 패스에서 작업) */
[data-theme="modern-v2"] .panel {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}

[data-theme="modern-v2"] .panel h2 {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m-ink-soft);
  margin-bottom: 16px;
}

[data-theme="modern-v2"] .panel h2 .btn.small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 1em;
  background: none;
  color: var(--m-accent-2);
  padding: 0;
}

/* ---- 캐릭터가 있는 무대 (Living Stage) ---- */

[data-theme="modern-v2"] .terrarium {
  position: relative;
  margin-top: 0;
  padding: 28px 20px;
  border-radius: 24px;
  background: var(--m-surface-2);
  border: none;
  box-shadow: none;
  overflow: hidden;
}

[data-theme="modern-v2"] .terrarium::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--m-soft-accent);
  opacity: 0.5;
  top: -80px;
  right: -60px;
  background-image: none;
}

[data-theme="modern-v2"] .mushroom-grid {
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 4px 8px;
}

[data-theme="modern-v2"] .mushroom-card {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 20px;
  padding: 10px 4px;
  box-shadow: none;
  transition: transform 0.2s ease;
}

[data-theme="modern-v2"] .mushroom-card:hover {
  transform: scale(1.02);
}

[data-theme="modern-v2"] .mushroom-card:nth-child(even) {
  margin-top: 18px;
}

[data-theme="modern-v2"] .mushroom-card:nth-child(3n) {
  margin-top: 6px;
}

[data-theme="modern-v2"] .mushroom-emoji {
  background: none;
  box-shadow: none;
  width: auto;
  height: auto;
  font-size: 2.6em;
  filter: drop-shadow(0 4px 6px rgba(24, 27, 24, 0.12));
  animation: m-float 4.5s ease-in-out infinite;
}

[data-theme="modern-v2"] .mushroom-card:nth-child(3n) .mushroom-emoji {
  animation-delay: -1.5s;
}

[data-theme="modern-v2"] .mushroom-card:nth-child(3n+1) .mushroom-emoji {
  animation-delay: -3s;
}

@keyframes m-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

[data-theme="modern-v2"] .mushroom-name {
  color: var(--m-ink);
  font-weight: 700;
  margin-top: 8px;
  font-size: 0.95em;
}

[data-theme="modern-v2"] .mushroom-species {
  color: var(--m-ink-soft);
  font-size: 0.68em;
  text-transform: none;
  letter-spacing: 0;
}

[data-theme="modern-v2"] .mushroom-action {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--m-surface);
  color: var(--m-ink-soft);
  font-size: 0.66em;
  box-shadow: var(--m-shadow);
}

[data-theme="modern-v2"] .mushroom-happiness {
  display: none;
}

[data-theme="modern-v2"] .pin-badge {
  top: 2px;
  right: 8px;
}

/* ---- HUD 상태 스트립 ---- */

[data-theme="modern-v2"] .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0;
  background: var(--m-surface);
  border-radius: 20px;
  box-shadow: var(--m-shadow);
  padding: 18px 8px;
}

[data-theme="modern-v2"] .stat {
  background: none;
  border: none;
  border-left: 1px solid var(--m-line);
  border-radius: 0;
  padding: 2px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: normal;
}

[data-theme="modern-v2"] .stat:first-child {
  border-left: none;
}

[data-theme="modern-v2"] .stat .modern-icon {
  width: 16px;
  height: 16px;
  color: var(--m-ink-soft);
  margin-bottom: 2px;
}

[data-theme="modern-v2"] .stat-label {
  order: -1;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--m-ink-soft);
}

[data-theme="modern-v2"] .stat b {
  font-size: 1.15em;
  font-weight: 800;
  color: var(--m-ink);
}

/* ---- 관찰 일지 피드 ---- */

[data-theme="modern-v2"] .panel-log h2 {
  display: flex;
}

[data-theme="modern-v2"] .panel-log .event-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

[data-theme="modern-v2"] .panel-log .event-item {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: flex-start;
  animation: m-fade-in 0.3s ease;
}

@keyframes m-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

[data-theme="modern-v2"] .event-marker {
  display: block;
  font-size: 1.3em;
  line-height: 1.3;
  flex: none;
}

[data-theme="modern-v2"] .event-time-modern {
  display: block;
  font-size: 0.78em;
  color: var(--m-ink-soft);
  font-weight: 600;
  margin-bottom: 2px;
}

[data-theme="modern-v2"] .panel-log .event-item > span:not(.event-marker):not(.event-time-modern),
[data-theme="modern-v2"] .panel-log .event-item > form {
  color: var(--m-ink);
  line-height: 1.5;
}

[data-theme="modern-v2"] .panel-log .event-item .btn.small {
  margin-top: 6px;
}

/* ---- 재배 관리: 액션 독 (대시보드의 button-row만. village.html/mushrooms.html의
   item-btn은 다음 패스에서 작업) ---- */

[data-theme="modern-v2"] .button-row {
  gap: 10px;
}

[data-theme="modern-v2"] .btn.item-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--m-surface);
  color: var(--m-ink);
  border: 1px solid var(--m-line);
  border-radius: 18px;
  box-shadow: none;
  padding: 14px 16px;
  min-width: 76px;
  font-weight: 600;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

[data-theme="modern-v2"] .btn.item-btn .emoji-icon {
  font-size: 1.4em;
}

[data-theme="modern-v2"] .btn.item-btn .modern-icon {
  width: 24px;
  height: 24px;
  color: var(--m-ink);
}

[data-theme="modern-v2"] .btn.item-btn .btn-label {
  font-size: 0.72em;
}

[data-theme="modern-v2"] .btn.item-btn:hover {
  background: var(--m-soft-accent);
  border-color: var(--m-soft-accent);
  transform: scale(1.02);
}

[data-theme="modern-v2"] .btn.item-btn:active {
  transform: scale(0.98);
  box-shadow: none;
}

[data-theme="modern-v2"] .btn.item-btn-accent {
  border-color: var(--m-accent-2);
}

[data-theme="modern-v2"] .btn.item-btn-accent .modern-icon,
[data-theme="modern-v2"] .btn.item-btn-accent .btn-label {
  color: var(--m-accent-2);
}

[data-theme="modern-v2"] .btn.item-btn-accent:hover {
  background: #ffece9;
  border-color: var(--m-accent-2);
}

/* =========================================================================
   modern-v2 — 2차 패스: 도감 / 나메코 목록 / 사건 기록 / 재배 관리 톤 통일
   대시보드에서 확정된 팔레트·컴포넌트를 나머지 페이지에도 적용한다.
   ========================================================================= */

/* 필터/정렬 탭 = pill (스펙상 필터·태그는 pill 허용) */
[data-theme="modern-v2"] .sort-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

[data-theme="modern-v2"] .sort-row a {
  background: var(--m-surface-2);
  color: var(--m-ink-soft);
  margin-right: 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85em;
  transition: background 0.15s ease, color 0.15s ease;
}

[data-theme="modern-v2"] .sort-row a:hover {
  background: var(--m-soft-accent);
}

[data-theme="modern-v2"] .sort-row a.active {
  background: var(--m-ink);
  color: var(--m-canvas);
  text-decoration: none;
}

/* 사건 기록 페이지: 카드 목록이 아니라 얇은 구분선 피드 */
[data-theme="modern-v2"] .event-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

[data-theme="modern-v2"] .event-item {
  background: none;
  border: none;
  border-bottom: 1px solid var(--m-line);
  border-radius: 0;
  padding: 12px 2px;
  margin-bottom: 0;
  display: block;
}

[data-theme="modern-v2"] .event-item:last-child {
  border-bottom: none;
}

[data-theme="modern-v2"] .event-time {
  color: var(--m-ink-soft);
  font-weight: 600;
  margin-right: 8px;
}

[data-theme="modern-v2"] .event-category {
  color: var(--m-accent-2);
  font-weight: 600;
  margin-right: 6px;
}

/* 도감 */
[data-theme="modern-v2"] .dex-grid {
  gap: 12px;
}

[data-theme="modern-v2"] .dex-card {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 16px;
  box-shadow: none;
}

[data-theme="modern-v2"] .dex-card summary {
  font-weight: 700;
  color: var(--m-ink);
}

[data-theme="modern-v2"] .dex-card.hidden {
  background: var(--m-surface-2);
  color: var(--m-ink-soft);
}

[data-theme="modern-v2"] .dex-box {
  border-radius: 12px;
}

[data-theme="modern-v2"] .dex-box.origin {
  background: var(--m-canvas);
  color: var(--m-ink-soft);
}

[data-theme="modern-v2"] .dex-box.game {
  background: var(--m-soft-accent);
  color: var(--m-ink);
}

/* 나메코 목록: 직접 추가 폼 */
[data-theme="modern-v2"] .add-mushroom-form select {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 10px;
  color: var(--m-ink);
}

/* 관계 목록 */
[data-theme="modern-v2"] .relation-list a {
  color: var(--m-ink);
  font-weight: 600;
}

/* 재배 관리 페이지의 개별 액션 행 (action-list는 dock이 아니라 세로 목록이라
   버튼만 톤을 맞추고 레이아웃은 유지한다) */
[data-theme="modern-v2"] .action-list li {
  border-bottom: 1px solid var(--m-line);
  padding-bottom: 10px;
}

[data-theme="modern-v2"] .action-list .btn.item-btn {
  flex-direction: row;
  min-width: 0;
  background: var(--m-surface);
  color: var(--m-ink);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  box-shadow: none;
  padding: 8px 14px;
  font-weight: 600;
}

[data-theme="modern-v2"] .action-list .btn.item-btn .modern-icon {
  width: 18px;
  height: 18px;
}

[data-theme="modern-v2"] .action-list .btn:hover {
  background: var(--m-soft-accent);
  border-color: var(--m-soft-accent);
}

[data-theme="modern-v2"] .muted {
  color: var(--m-ink-soft);
}