@font-face {
  font-family: 'GMarketSans';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'GMarketSans';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'GMarketSans';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

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

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: #1a1a2a;
  color: #e0e0e0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ── */
.header {
  background: #1f1f1f;
  border-bottom: 1px solid #3a3a3a;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.header-title {
  font-size: 16px;
  color: #3a96dd;
  font-family: 'Segoe UI', sans-serif;
  font-weight: bold;
}
.header-title span { color: #8a8a8a; font-size: 13px; }
.header-sub { font-size: 12px; color: #8a8a8a; max-width: 260px; line-height: 1.35; }

/* ── Progress bar ── */
.progress-bar { height: 3px; background: #1f1f1f; flex-shrink: 0; }
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0078d4, #3a96dd);
  transition: width 0.6s ease;
  width: 0%;
}

/* ── Main layout ── */
.main { display: flex; flex: 1; overflow: hidden; }

/* ── Terminal panel ── */
.terminal-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #012456;
  border-right: 1px solid #0a3a7a;
  min-width: 0;
}

/* Windows-style title bar */
.terminal-titlebar {
  background: #012456;
  padding: 0 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #0a3a7a;
  flex-shrink: 0;
  height: 32px;
}
.ps-logo {
  background: #3a96dd;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 2px;
  font-family: 'Segoe UI', sans-serif;
  letter-spacing: 0.5px;
  user-select: none;
}
.term-title {
  flex: 1;
  font-size: 12px;
  color: #cccccc;
  font-family: 'Segoe UI', sans-serif;
  user-select: none;
}
.win-btns { display: flex; height: 32px; }
.win-btn {
  width: 42px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #cccccc;
  cursor: default; transition: background 0.15s;
  user-select: none;
}
.win-btn:hover { background: rgba(255,255,255,0.12); }
.w-cls:hover   { background: #c42b1c; color: #fff; }

.terminal-output {
  flex: 1;
  min-height: 0;
  padding: 12px 16px;
  overflow-y: auto;
  font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
  font-size: 13.5px;
  line-height: 1.65;
  color: #eeedf0;
  background: #012456;
}
.terminal-output::-webkit-scrollbar { width: 5px; }
.terminal-output::-webkit-scrollbar-track { background: #012456; }
.terminal-output::-webkit-scrollbar-thumb { background: #1a4a8a; border-radius: 3px; }

.l-prompt { color: #ffff00; }
.l-out    { color: #eeedf0; }
.l-err    { color: #ff6b6b; }
.l-ok     { color: #3ddc84; }
.l-info   { color: #7fd4f0; }
.l-dir    { color: #ffff00; font-weight: bold; }

/* inline input line — no separator, part of the output flow */
.cur-line {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}
#promptText {
  font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
  font-size: 13.5px;
  color: #ffff00;
  white-space: nowrap;
  user-select: none;
}
#termInput {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #eeedf0;
  font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
  font-size: 13.5px;
  caret-color: #ffffff;
  padding: 0;
  margin-left: 6px;
}
/* ── Right panel ── */
.right-panel {
  width: 550px;
  display: flex;
  flex-direction: column;
  background: #1e1e1e;
  flex-shrink: 0;
  font-family: 'GMarketSans', 'Segoe UI', sans-serif;
  font-weight: 500;
}
.tab-bar { display: flex; border-bottom: 1px solid #3a3a3a; flex-shrink: 0; }
.tab {
  flex: 1; padding: 11px 6px;
  text-align: center; cursor: pointer;
  font-size: 16px; font-weight: 700; color: #8a8a8a;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  user-select: none;
}
.tab.active { color: #3a96dd; border-bottom-color: #3a96dd; }
.tab:hover:not(.active) { color: #d4d4d4; }

.tab-pane {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: none;
}
.tab-pane.active { display: block; }
.tab-pane::-webkit-scrollbar { width: 5px; }
.tab-pane::-webkit-scrollbar-track { background: #1e1e1e; }
.tab-pane::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }

/* ── Mission pane ── */
#pane-m.tab-pane.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mission-meta {
  font-size: 12px; color: #8a8a8a;
  text-align: center; margin-bottom: 14px;
}
#missionList {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
}
.mission-item {
  background: #252526;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 11px 12px;
  margin-bottom: 9px;
  transition: all 0.3s;
}
.mission-item.done   { border-color: #4a9960; opacity: 0.65; }
.mission-item.now    { border-color: #3a96dd; background: #0d2235; }
.mission-item.locked {
  opacity: 0.42;
  padding: 7px 10px;
  margin-bottom: 5px;
}
.mission-item.done {
  padding: 8px 10px;
  margin-bottom: 6px;
}
.mission-item.locked .mission-desc,
.mission-item.done .mission-desc { display: none; }
.mission-item.locked .mission-hd { margin-bottom: 0; }
.mission-contact {
  margin: 10px -14px -14px;
  padding: 11px 14px 16px;
  border-top: 1px solid #333;
  background: #1e1e1e;
  font-size: 12px;
  color: #8a8a8a;
  text-align: center;
  margin-top: auto;
}

.path-notice {
  font-size: 11px;
  color: #9a9a9a;
  line-height: 1.45;
  padding: 8px 10px;
  margin-bottom: 12px;
  background: #222;
  border-radius: 4px;
  border: 1px solid #333;
  white-space: pre-line;
}

.gloss-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.gloss-tag {
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 3px;
  border: 1px solid #3a3a3a;
  background: #2a2a2a;
  color: #8fbcbb;
  cursor: pointer;
  font-family: 'Cascadia Code', Consolas, monospace;
}
.gloss-tag:hover { border-color: #3a96dd; color: #d4d4d4; }

.gloss-tags-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.gloss-tags-row .gloss-tags {
  flex: 1;
  margin-bottom: 0;
}
.gloss-pdf-btn {
  background: #264026;
  border: 1px solid #3d6a3d;
  color: #d4efd4;
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Segoe UI', sans-serif;
  white-space: nowrap;
}
.gloss-pdf-btn:hover { background: #335c33; color: #fff; }
.gloss-pdf-btn:disabled { opacity: 0.45; cursor: wait; }

.gloss-pdf-wrap { position: relative; }
.gloss-pdf-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #2a2a2a;
  border: 1px solid #3d6a3d;
  border-radius: 3px;
  z-index: 100;
  min-width: 110px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
.gloss-pdf-menu.open { display: block; }
.gloss-pdf-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #d4efd4;
  font-size: 12px;
  padding: 7px 12px;
  cursor: pointer;
  font-family: 'Segoe UI', sans-serif;
  white-space: nowrap;
}
.gloss-pdf-option:hover { background: #335c33; color: #fff; }

.mission-hd {
  display: flex; align-items: center; gap: 9px; margin-bottom: 5px;
}
.mission-ico { font-size: 15px; width: 22px; text-align: center; }
.mission-ttl {
  flex: 1; font-size: 14px; font-weight: 700; color: #d4d4d4;
}
.mission-item.done .mission-ttl { text-decoration: line-through; color: #4a9960; }
.mission-item.now  .mission-ttl { color: #3a96dd; }

.mission-desc {
  font-size: 14px; color: #8a8a8a;
  margin-left: 31px; line-height: 1.5;
}
.mission-auto-row {
  margin-left: 31px;
  margin-top: 8px;
}
.mission-auto-row .auto-btn { margin-left: 0; }
.auto-btn {
  background: #0078d4;
  border: none; color: #fff;
  font-size: 12px; padding: 3px 10px;
  border-radius: 3px; cursor: pointer;
  margin-left: 5px; transition: background 0.2s;
}
.auto-btn:hover { background: #106ebe; }
.auto-btn:disabled { background: #555; cursor: default; }

/* ── Completion screen ── */
.done-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
}
.done-screen.show { display: flex; }
.done-emoji { font-size: 52px; margin-bottom: 10px; }
.done-title { font-size: 22px; color: #3a96dd; margin-bottom: 8px; }
.done-desc  { font-size: 14px; color: #8a8a8a; line-height: 1.6; margin-bottom: 18px; }
.restart-btn {
  background: #0078d4; color: #fff;
  border: none; padding: 9px 20px;
  border-radius: 3px; cursor: pointer;
  font-size: 14px; transition: background 0.2s;
}
.restart-btn:hover { background: #106ebe; }

/* ── Glossary pane ── */
.gloss-search {
  width: 100%;
  background: #252526;
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  padding: 8px 11px;
  color: #d4d4d4; font-size: 14px;
  outline: none; margin-bottom: 14px;
}
.gloss-search:focus { border-color: #3a96dd; }

.gloss-section { margin-bottom: 18px; }
.gloss-sec-title {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.2px; color: #8a8a8a;
  margin-bottom: 7px; padding-bottom: 4px;
  border-bottom: 1px solid #3a3a3a;
}
.gloss-item {
  padding: 7px 8px; border-radius: 3px;
  margin-bottom: 4px; transition: background 0.15s;
}
.gloss-item:hover { background: #252526; }
.gloss-term {
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 14px; color: #3a96dd; font-weight: bold;
}
.gloss-meaning { font-size: 13px; color: #d4d4d4; margin-top: 2px; }
.gloss-example {
  font-size: 12px; color: #8fbcbb; margin-top: 4px;
  font-family: 'Cascadia Code', 'Consolas', monospace;
}
.gloss-example::before { content: "예: "; color: #8a8a8a; font-family: inherit; }
.gloss-example.no-example-prefix::before { content: none; }
.gloss-abbr-inline {
  font-size: 12px; color: #8a8a8a; font-style: italic; margin-right: 6px;
}

/* ── Toast ── */
.toast {
  position: fixed; top: 56px; right: 18px;
  background: #0078d4; color: #fff;
  padding: 10px 18px; border-radius: 4px;
  font-size: 13px; font-weight: 600;
  z-index: 999; display: none;
  animation: slideIn 0.3s ease;
}
@keyframes slideIn {
  from { transform: translateX(80px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Mode toggle ── */
.mode-toggle {
  display: flex; gap: 4px;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  padding: 3px;
}
.mode-btn {
  padding: 4px 14px;
  border: none; border-radius: 4px;
  font-size: 12px; cursor: pointer;
  background: none; color: #8a8a8a;
  transition: all 0.2s;
}
.mode-btn.active { background: #3a3a3a; color: #ffffff; }
.mode-btn:hover:not(.active) { color: #d4d4d4; }

/* ── Mac titlebar ── */
#mac-titlebar {
  width: 100%; align-items: center; gap: 0;
}
.mac-dots { display: flex; gap: 7px; padding: 0 4px; }
.mac-dot {
  width: 12px; height: 12px; border-radius: 50%; cursor: default;
}
.mac-close { background: #ff5f57; }
.mac-min   { background: #febc2e; }
.mac-max   { background: #28c840; }
.mac-title {
  flex: 1; text-align: center;
  font-size: 12px; color: #cccccc;
  font-family: 'Segoe UI', sans-serif;
}
/* space to balance dots on the right */
.mac-right-pad { width: 60px; }

/* ── Responsive: Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  .right-panel { width: 360px; }
  .header-sub  { display: none; }
}

/* ── Responsive: Mobile (≤ 767px) ── */
@media (max-width: 767px) {
  .header {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
  }
  .header-title { font-size: 13px; }
  .header-sub   { display: none; }
  .mode-toggle  { width: 100%; }
  .mode-btn     { flex: 1; padding: 5px 4px; font-size: 11px; }

  .main { flex-direction: column; }

  .terminal-panel {
    flex: none;
    height: 52vh;
    border-right: none;
    border-bottom: 1px solid #0a3a7a;
  }
  .terminal-panel.mac { border-bottom-color: #3a3a3a; }

  /* hide Win buttons on mobile to save space */
  .win-btns { display: none; }
  .mac-right-pad { display: none; }

  .terminal-output {
    font-size: 12px;
    padding: 8px 10px;
    line-height: 1.5;
    overflow-x: auto;
  }
  #promptText, #termInput { font-size: 12px; }
  .cur-line { padding-bottom: 6px; }

  .right-panel { width: 100%; flex: 1; min-height: 0; }

  .tab { font-size: 12px; padding: 9px 4px; }
  .tab-pane { padding: 10px; }

  .mission-item { padding: 9px 10px; }
  .mission-auto-row { margin-left: 0; margin-top: 8px; }
  .mission-auto-row .auto-btn { width: 100%; text-align: center; }

  .gloss-search { font-size: 12px; }
  .gloss-term   { font-size: 12px; }
}

/* ── Mac theme overrides ── */
.terminal-panel.mac,
.terminal-panel.mac .terminal-output { background: #1a1a1a; }
.terminal-panel.mac .terminal-titlebar {
  background: #2d2d2d;
  border-bottom: 1px solid #444;
}
.terminal-panel.mac { border-right: 1px solid #3a3a3a; }
.terminal-panel.mac .terminal-output::-webkit-scrollbar-track { background: #1a1a1a; }
.terminal-panel.mac .terminal-output::-webkit-scrollbar-thumb { background: #4a4a4a; }
.terminal-panel.mac .terminal-inputrow { background: #1a1a1a; border-top: none; }
.terminal-panel.mac .l-prompt { color: #5af78e; }
.terminal-panel.mac .l-out    { color: #f8f8f2; }
.terminal-panel.mac .l-dir    { color: #57c7ff; }
.terminal-panel.mac #promptText { color: #5af78e; }
.terminal-panel.mac #termInput  { color: #f8f8f2; caret-color: #f8f8f2; }