/* 대시보드 스타일: 흰 카드 · 큰 라운드 · 은은한 파란 그림자
   테마: 기본은 운영체제 설정을 따르고, 오른쪽 위 [다크 모드] 버튼으로 바꾸면 <html data-theme>에 저장된다. */
:root {
  color-scheme: light;
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #f5f8fe;
  --line: #e4eaf4;
  --text: #1b2a4e;
  --text-soft: #4a5878;
  --muted: #8a96ad;
  --dim: #b3bdd0;          /* 대기 상태 큰 글씨 */
  --off: #c5cede;          /* 꺼진 점 */
  --switch-off: #d5dceb;
  --thumb-bg: #dfe6f2;     /* 캔버스 미리보기 바탕 */
  --primary: #2b7bff;
  --primary-soft: #e8f1ff;
  --primary-hover: #d9e8ff;
  --ring-2: #d6e6ff;
  --hero-to: #eef5ff;
  --ready: #1fae68;
  --ready-soft: #e4f7ee;
  --alert: #ff8a00;
  --alert-soft: #fff3e3;
  --danger: #e5484d;
  --backdrop: rgba(27, 42, 78, .45);
  --radius-lg: 24px;
  --radius: 14px;
  --shadow: 0 12px 32px rgba(43, 123, 255, .08);
  --shadow-btn: 0 8px 18px rgba(43, 123, 255, .3);
  --shadow-lg: 0 24px 60px rgba(27, 42, 78, .25);
  --card-border: #e6ebf3;   /* 라이트는 그림자에 아주 옅은 테두리를 더하고, 다크는 테두리로 카드 경계를 보인다 */
}
/* 다크 테마 값. 운영체제가 다크이고 라이트를 고르지 않았을 때, 또는 다크를 직접 골랐을 때 적용 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #090c14; --surface: #1a2336; --surface-2: #232e46; --line: #2f3c59; --card-border: #2a3653;
    --text: #e6ecf7; --text-soft: #b4bfd4; --muted: #8b97b0; --dim: #56627c; --off: #3a4560;
    --switch-off: #34405a; --thumb-bg: #26314a;
    --primary: #5b97ff; --primary-soft: rgba(91, 151, 255, .16); --primary-hover: rgba(91, 151, 255, .26);
    --ring-2: rgba(91, 151, 255, .24); --hero-to: #1b2a48;
    --ready: #3ccf88; --ready-soft: rgba(60, 207, 136, .15);
    --alert: #ffa23a; --alert-soft: rgba(255, 162, 58, .15); --danger: #ff6b6f;
    --backdrop: rgba(0, 0, 0, .6);
    --shadow: 0 12px 32px rgba(0, 0, 0, .35); --shadow-btn: 0 8px 18px rgba(91, 151, 255, .3);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #090c14; --surface: #1a2336; --surface-2: #232e46; --line: #2f3c59; --card-border: #2a3653;
  --text: #e6ecf7; --text-soft: #b4bfd4; --muted: #8b97b0; --dim: #56627c; --off: #3a4560;
  --switch-off: #34405a; --thumb-bg: #26314a;
  --primary: #5b97ff; --primary-soft: rgba(91, 151, 255, .16); --primary-hover: rgba(91, 151, 255, .26);
  --ring-2: rgba(91, 151, 255, .24); --hero-to: #1b2a48;
  --ready: #3ccf88; --ready-soft: rgba(60, 207, 136, .15);
  --alert: #ffa23a; --alert-soft: rgba(255, 162, 58, .15); --danger: #ff6b6f;
  --backdrop: rgba(0, 0, 0, .6);
  --shadow: 0 12px 32px rgba(0, 0, 0, .35); --shadow-btn: 0 8px 18px rgba(91, 151, 255, .3);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 "Pretendard Variable", Pretendard, "Malgun Gothic", system-ui, sans-serif; }
button, input, select { font: inherit; color: inherit; }
input[type=range], input[type=checkbox] { accent-color: var(--primary); }

/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); font-weight: 600; cursor: pointer; transition: transform .1s, box-shadow .2s; }
.btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--ring-2); outline-offset: 2px; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-btn); }
.btn.primary:hover:not(:disabled) { color: #fff; filter: brightness(1.05); }
.btn.xs { padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; }
.btn.danger { color: var(--danger); }
.btn.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }

/* ---------- 앱 레이아웃 ---------- */
/* 한 열. 제목 줄 왼쪽은 제목 · 상태, 오른쪽은 도구 모음(좁으면 아래 줄로 내려간다) */
.app { min-height: 100vh; }
.content { max-width: 1680px; margin: 0 auto; padding: 32px 40px; min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.head-text { flex: 1 1 420px; min-width: 0; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 6px 0 0; font-size: 13px; }
.share-state { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.share-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--off); }
.share-state.on { color: var(--ready); font-weight: 600; }
.share-state.on .dot { background: var(--ready); box-shadow: 0 0 0 4px var(--ready-soft); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.tool { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid transparent; border-radius: 12px;
  background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .2s, color .2s; }
.tool svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.tool:hover:not(:disabled) { background: var(--primary-hover); }
.tool:focus-visible { outline: 3px solid var(--ring-2); outline-offset: 2px; }
.tool:disabled { opacity: .4; cursor: not-allowed; }
/* 알림 허용 버튼 상태: 허용됨(초록) · 차단됨(주황) */
.tool.done { background: var(--ready-soft); color: var(--ready); }
.tool.warn { background: var(--alert-soft); color: var(--alert); }

.page-head h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.8px; }
.head-changelog { vertical-align: middle; margin-left: 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; cursor: pointer; }
.head-changelog:hover, .head-changelog:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
.status { color: var(--muted); }
.status.warn { color: var(--alert); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(272px, 22vw, 320px); gap: 24px; align-items: start; }
.col-main, .col-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.card { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 24px; }
.card-title { margin: 0 0 16px; font-size: 16px; font-weight: 700; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.section-title { margin: 8px 0 -4px; font-size: 20px; font-weight: 700; }
.hint { margin: 12px 0 0; font-size: 12px; color: var(--muted); }

.notice { margin-bottom: 20px; border: 1px solid var(--primary-soft); }
.notice ul { margin: 8px 0 12px; padding-left: 20px; color: var(--muted); }

/* ---------- 히어로 ---------- */
.hero { display: flex; align-items: center; gap: 24px; overflow: hidden; position: relative;
  background: linear-gradient(120deg, var(--surface) 55%, var(--hero-to)); }
.hero-text { flex: 1; min-width: 0; }
.hero h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.hero p { margin: 0 0 20px; color: var(--text-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-art { position: relative; width: 150px; height: 150px; flex: none; display: grid; place-items: center; }
.hero-art .ring { position: absolute; border-radius: 50%; background: var(--primary-soft); }
.hero-art .r1 { inset: 0; opacity: .6; }
.hero-art .r2 { inset: 26px; background: var(--ring-2); }
/* 켜 둔 스킬 아이콘(1~3개). 여러 개면 살짝 겹쳐 부채꼴로 놓는다 */
.hero-icons { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-icons img { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 16px;
  box-shadow: 0 10px 24px rgba(43, 123, 255, .25); transition: transform .3s, opacity .3s, filter .3s; }
.hero-icons[data-count="2"] img { width: 56px; height: 56px; }
.hero-icons[data-count="2"] img:nth-child(1) { transform: translate(8px, -10px) rotate(-8deg); }
.hero-icons[data-count="2"] img:nth-child(2) { transform: translate(-8px, 10px) rotate(8deg); }
.hero-icons[data-count="3"] img { width: 48px; height: 48px; margin: 0 -6px; }
.hero-icons[data-count="3"] img:nth-child(1) { transform: translateY(8px) rotate(-10deg); }
.hero-icons[data-count="3"] img:nth-child(2) { transform: translateY(-10px); z-index: 1; }
.hero-icons[data-count="3"] img:nth-child(3) { transform: translateY(8px) rotate(10deg); }
.hero-icons.off img { filter: grayscale(1); opacity: .4; box-shadow: none; }

/* ---------- 기능 묶음 (스킬 · 룬 · 잠수 · 도핑 · 부스터 알리미) ---------- */
.groups { display: flex; flex-direction: column; gap: 20px; }
.group { display: flex; flex-direction: column; gap: 10px; }
.group .section-title { margin: 0; font-size: 18px; }
/* 묶음 제목 줄 안 오른쪽의 글자 버튼(감지 로그 [내보내기]). 제목 띠가 있는 테마에서도 띠 안에 들어간다 */
.section-title.has-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.title-action { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-shadow: none; opacity: .85; cursor: pointer; }
.title-action:hover, .title-action:focus-visible { opacity: 1; text-decoration: underline; outline: none; }

/* ---------- 스킬 · 기능 바 ---------- */
.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.empty { text-align: center; color: var(--muted); }
.empty p { margin: 0 0 12px; }

.skill { border: 2px solid var(--card-border); transition: border-color .3s, background .3s; }
.skill[data-tone=alert] { border-color: var(--alert); }
.skill[data-tone=ready] { border-color: var(--ready-soft); }
.skill.flash { animation: flash 1s ease-out 2; }
@keyframes flash { 0% { background: var(--alert-soft); } 100% { background: var(--surface); } }

/* 한 줄 구성: 아이콘 | 이름·상태 | 남은 시간 | 진행률(스킬만) | 진단 | 스위치 */
.bar { padding: 14px 20px; border-radius: var(--radius); container-type: inline-size; }
.bar-row { display: grid; align-items: center; gap: 18px;
  grid-template-columns: 52px minmax(120px, 170px) minmax(170px, 1fr) minmax(140px, 1fr) minmax(0, 1.3fr) auto; }
.feature .bar-row { grid-template-columns: 52px minmax(120px, 170px) minmax(220px, 1.4fr) minmax(0, 1.8fr) auto; }
/* 아이콘은 게임 아이콘 원본 크기(30~34px) 그대로, 도트가 번지지 않게 그린다. 칸은 모서리만 살짝 둥근 사각형 */
.sk-icon-wrap { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 8px;
  background: var(--primary-soft); flex: none; }
.sk-icon { width: auto; height: auto; max-width: 44px; max-height: 44px; image-rendering: pixelated; border-radius: 4px; }
.sk-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sk-name { max-width: 100%; padding: 3px 0; font-size: 16px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--surface-2); color: var(--muted); }
[data-tone=search] .chip, [data-tone=cooldown] .chip { background: var(--primary-soft); color: var(--primary); }
[data-tone=ready] .chip { background: var(--ready-soft); color: var(--ready); }
[data-tone=alert] .chip { background: var(--alert-soft); color: var(--alert); }

.sk-big { min-width: 0; }
.sk-time { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.6px;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-tone=ready] .sk-time { color: var(--ready); }
[data-tone=cooldown] .sk-time { color: var(--primary); }
[data-tone=alert] .sk-time { color: var(--alert); }
[data-tone=off] .sk-time, [data-tone=idle] .sk-time, [data-tone=search] .sk-time, [data-tone=unknown] .sk-time { font-size: 20px; color: var(--dim); }
/* 꺼진 카드: 아이콘을 흐리게 */
[data-tone=off] .sk-icon { filter: grayscale(1); opacity: .45; }

.sk-progress { display: flex; align-items: center; gap: 10px; }
.sk-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.sk-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--primary);
  transition: width 1s linear; }
[data-tone=ready] .sk-bar i { background: var(--ready); }
[data-tone=alert] .sk-bar i { background: var(--alert); }
.sk-pct { width: 38px; text-align: right; font-size: 12px; font-weight: 700; color: var(--primary); }
[data-tone=ready] .sk-pct { color: var(--ready); }
[data-tone=alert] .sk-pct { color: var(--alert); }

.sk-foot { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 8px 12px;
  border-radius: 12px; background: var(--surface-2); }
.sk-live { width: 28px; height: 28px; image-rendering: pixelated; border-radius: 6px; background: var(--thumb-bg); flex: none; }
.sk-diag { min-width: 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sk-settings { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.sk-settings summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary); }
/* 설정은 가로 폭을 살려 항목(fr)을 여러 열로 놓는다. 긴 항목(wide)은 한 줄을 다 쓴다 */
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px 28px;
  margin-top: 12px; font-size: 13px; }
.fr { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
.fr[hidden] { display: none; }
.fr.wide { grid-column: 1 / -1; align-items: start; }
.fr.wide > label { padding-top: 6px; }
.fr > label { color: var(--muted); word-break: keep-all; }
.fr > input[type=range] { width: 100%; min-width: 0; margin: 0; }
.fr > select { justify-self: start; max-width: 100%; }
/* 입력칸·단위·버튼이 붙지 않게 묶음 안에 간격을 둔다 */
.fr > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.sk-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.form input[type=number], .form select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.form input[type=number] { width: 70px; }
.form input:disabled { opacity: .6; cursor: not-allowed; }
.form input:focus, .form select:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.sk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---------- 스위치 ---------- */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--switch-off); transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); transition: transform .2s; }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- 사이드 패널 ---------- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; }
/* 잠긴 스위치(예: 브라우저 알림이 허용되지 않음): 꺼진 채로 흐리게 두고 아래에 이유를 적는다 */
.toggle.locked { cursor: not-allowed; color: var(--muted); }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + span { opacity: .45; }
.toggle-reason { margin: -4px 0 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tl-empty { padding: 12px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 12px; text-align: center; }
.tl-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 12px; color: var(--muted); }
.tl-item.latest { border-color: var(--primary); color: var(--text); font-weight: 600; }
.tl-item[role=button] { cursor: pointer; transition: background .15s; }
.tl-item[role=button]:hover { background: var(--surface-2); }
.tl-item[role=button]:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.tl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--off); flex: none; }
.tl-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-item time { font-variant-numeric: tabular-nums; }
.tl-used .tl-dot, .tl-found .tl-dot { background: var(--primary); }
.tl-alert .tl-dot { background: var(--alert); }
.tl-ready .tl-dot { background: var(--ready); }
.tl-lost .tl-dot { background: var(--danger); }

.help summary { cursor: pointer; font-weight: 700; }
.help h4 { margin: 16px 0 0; font-size: 13px; font-weight: 700; color: var(--primary); }
.help ol, .help ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-soft); font-size: 13px; word-break: keep-all; }
.help li + li { margin-top: 6px; }

/* ---------- 사냥 도우미 카드 ---------- */
.fe-name { font-size: 16px; font-weight: 700; }
.fe-live { display: none; max-width: 120px; max-height: 40px; width: auto; height: auto; flex: none;
  border-radius: 6px; image-rendering: pixelated; background: var(--thumb-bg); }
.fe-live.on { display: block; }
.form .stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.form .muted { font-size: 12px; color: var(--muted); }
.form .checks { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.form .check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.form .check img { width: 20px; height: 20px; image-rendering: pixelated; border-radius: 4px; }

/* ---------- 영역 지정 창 ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: var(--backdrop); backdrop-filter: blur(2px); }
.modal[hidden] { display: none; }
.modal-card { width: min(1400px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 12px;
  padding: 20px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-title { margin: 0; font-size: 18px; }
.modal-hint { margin: 0; color: var(--muted); font-size: 13px; }
.picker-wrap { min-height: 0; overflow: auto; border-radius: var(--radius); background: #0f1932; }
.picker-canvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.picker-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.picker-zoom { max-width: 360px; max-height: 90px; border-radius: 8px; background: var(--surface-2); image-rendering: pixelated; }
.picker-info { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }

/* ---------- 안내 대화상자 ---------- */
.dialog-modal { z-index: 110; }
.modal-card.dialog { width: min(440px, 100%); align-items: center; text-align: center; gap: 10px; padding: 28px 28px 24px; }
.dialog-art { width: 100%; display: grid; place-items: center; padding: 16px; margin-bottom: 4px;
  border-radius: var(--radius); background: var(--primary-soft); }
.dialog-art svg { width: 220px; height: 120px; }
.dialog-art[hidden] { display: none; }
.dialog-kicker { font-size: 12px; font-weight: 700; color: var(--primary); }
.dialog-kicker:empty { display: none; }
.dialog-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.dialog-body p { margin: 6px 0 0; color: var(--text-soft); font-size: 14px; word-break: keep-all; }
.dialog-dots { display: flex; gap: 6px; margin-top: 6px; }
.dialog-dots span { width: 7px; height: 7px; border-radius: 999px; background: var(--off); transition: width .2s, background .2s; }
.dialog-dots span.on { width: 20px; background: var(--primary); }
.dialog-actions { display: flex; gap: 8px; justify-content: center; width: 100%; margin-top: 10px; }
.dialog-actions .btn { flex: 1; }

/* 대화상자 그림 */
.a-surface { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.a-soft { fill: var(--surface-2); }
.a-primary { fill: var(--primary); opacity: .35; }
.a-primary-dark { fill: var(--primary); }
.a-line { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.a-cursor { fill: var(--text); stroke: var(--surface); stroke-width: 1.5; stroke-linejoin: round; }
.a-select { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-dasharray: 7 5; }
.a-soft-stroke { fill: var(--surface); stroke: var(--muted); stroke-width: 2.5; }
.art-row { display: flex; align-items: center; gap: 14px; height: 120px; }
.art-row img { width: 48px; height: 48px; border-radius: 12px; image-rendering: pixelated;
  background: var(--surface); box-shadow: var(--shadow); }
.art-row img[src$=".svg"] { padding: 8px; image-rendering: auto; }
.art-toggle { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--primary); }
.art-toggle i { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }

/* ---------- 토스트 ---------- */
/* 오른쪽 아래 고정: 저작권 고지 · 버전. 둘 다 같은 모양의 작은 글자 버튼(.app-version) */
.app-foot { position: fixed; right: 8px; bottom: 4px; z-index: 5; display: flex; align-items: center; gap: 2px; }
.app-version { padding: 4px 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-variant-numeric: tabular-nums; cursor: pointer; }
.app-version:hover, .app-version:focus-visible { background: var(--surface-2); color: var(--primary); text-decoration: underline; outline: none; }
/* 저작권 · 이용 안내 창: 긴 문단이라 왼쪽 정렬 */
.legal-dialog .dialog-body p { text-align: left; }

/* 새 버전 안내줄: 화면 위쪽 가운데에 고정 */
.update-bar { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 18px; border: 1px solid var(--primary); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 600; word-break: keep-all; }
.update-bar[hidden] { display: none; }

/* ---------- 패치 내역 ---------- */
.modal-card.dialog.changelog-dialog { width: min(560px, 100%); align-items: stretch; text-align: left; }
.changelog-dialog .dialog-kicker, .changelog-dialog .dialog-title { text-align: center; }

/* 감지 로그 상세 */
.modal-card.dialog.log-dialog { width: min(480px, 100%); align-items: stretch; text-align: left; }
.log-dialog .dialog-kicker, .log-dialog .dialog-title { text-align: center; }
.log-detail { display: flex; flex-direction: column; gap: 12px; }
.log-detail p { margin: 0; }
.log-raw { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); font-size: 13px; color: var(--text); word-break: break-all; }
.log-desc { color: var(--text-soft); font-size: 14px; line-height: 1.6; word-break: keep-all; }
.log-actions { padding: 12px 14px; border-radius: 10px; background: var(--primary-soft); }
.log-actions.problem { background: var(--alert-soft); }
.log-actions h4 { margin: 0 0 6px; font-size: 13px; color: var(--primary); }
.log-actions.problem h4 { color: var(--alert); }
.log-actions ol { margin: 0; padding-left: 18px; }
.log-actions li { margin: 4px 0; color: var(--text-soft); font-size: 13px; line-height: 1.55; word-break: keep-all; }
.changelog { max-height: min(60vh, 520px); overflow-y: auto; padding-right: 4px; }
.changelog section + section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.changelog h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.cl-version { font-size: 15px; font-weight: 800; color: var(--text); }
.cl-date { font-size: 12px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.changelog ul { margin: 0; padding-left: 18px; }
.changelog li { margin: 4px 0; color: var(--text-soft); font-size: 13px; line-height: 1.55; word-break: keep-all; }
/* 잠깐 떴다 사라지는 안내: 화면 위쪽 가운데에서 내려온다(아래쪽은 알리미 칸에 가려 잘 안 보였다) */
.toasts { position: fixed; left: 50%; top: 32px; transform: translateX(-50%); z-index: 120;
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  background: var(--text); color: var(--bg); font-size: 13px; box-shadow: var(--shadow-lg); word-break: keep-all;
  animation: toast-in .25s ease-out; transition: opacity .3s, transform .3s; }
.toast img { width: 22px; height: 22px; border-radius: 6px; image-rendering: pixelated; flex: none; }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

/* 처음 방문 안내(js/guide.js showShareHint): [화면 공유 시작]을 가리키는 화살표 + 말풍선. 화면을 막지 않는다 */
.coach { position: absolute; z-index: 50; width: min(300px, calc(100vw - 32px)); pointer-events: none; }
.coach-arrow { position: relative; width: 24px; height: 30px; color: var(--coach-color, var(--primary)); animation: coach-bob 1s ease-in-out infinite; }
.coach-arrow svg { display: block; width: 24px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.coach-bubble { margin-top: 2px; padding: 12px 14px; border-radius: var(--radius); background: var(--primary); color: #fff;
  box-shadow: var(--shadow-lg); pointer-events: auto; }
.coach-bubble strong { font-size: 15px; }
.coach-bubble p { margin: 4px 0 10px; font-size: 13px; line-height: 1.5; opacity: .92; word-break: keep-all; }
.coach-actions { display: flex; justify-content: flex-end; gap: 6px; }
.coach-bubble .btn { border-color: rgba(255, 255, 255, .45); background: transparent; color: #fff; box-shadow: none; }
.coach-bubble .btn.primary { border-color: #fff; background: #fff; color: var(--primary); }
.coach-bubble .btn:hover:not(:disabled) { border-color: #fff; background: rgba(255, 255, 255, .18); color: #fff; }
.coach-bubble .btn.primary:hover:not(:disabled) { background: #fff; color: var(--primary); filter: brightness(.95); }
/* 가리키는 버튼 둘레로 퍼지는 고리 */
.coach-target { animation: coach-ring 1.4s ease-out infinite; }
@keyframes coach-bob { 50% { transform: translateY(-6px); } }
@keyframes coach-ring { 0% { box-shadow: 0 0 0 0 var(--ring-2); } 100% { box-shadow: 0 0 0 16px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .coach-arrow, .coach-target { animation: none; }
  .coach-target { outline: 3px solid var(--primary); outline-offset: 3px; }
}

/* 화면에 보이지 않지만 프레임 디코딩은 유지되도록 display:none 대신 최소 크기로 둔다 */
#video { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

/* ---------- 반응형 ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}
/* 바 배치는 창 너비가 아니라 카드 너비로 정한다(노트북에서는 오른쪽 패널 때문에 카드가 좁다).
   중간 폭: 진행률만 아래 줄로 내려 남은 시간·진단 칸을 넓힌다. 기능 카드는 진행률이 없어 한 줄 그대로 */
@container (max-width: 940px) {
  .bar-row, .feature .bar-row { grid-template-columns: 52px minmax(110px, 160px) minmax(150px, 1fr) minmax(150px, 1fr) auto; row-gap: 10px; }
  .bar-row .sk-progress { grid-column: 2 / -1; grid-row: 2; }
}
/* 좁은 폭: 첫 줄은 아이콘·이름·스위치, 남은 시간·진행률·진단은 아래 줄로 */
@container (max-width: 600px) {
  .bar-row, .feature .bar-row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px 14px; }
  .bar-row .switch { grid-column: 3; grid-row: 1; }
  .bar-row .sk-big, .bar-row .sk-progress, .bar-row .sk-foot { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 760px) {
  .hero p br { display: none; }
  /* 도구 모음은 아이콘만(이름은 마우스를 올리면 보이는 설명으로) */
  .tool { padding: 8px 10px; }
  .tool span { display: none; }
  .content { padding: 20px 16px; }
  .hero-art { display: none; }
  .page-head h1 { font-size: 28px; }
  .foot-long { display: none; }
}

/* ---------- 업무 프로그램 스타일 테마(엑셀 · 아웃룩) ----------
   배치는 그대로 두고 색·모양만 바꾼다. <html data-skin="excel|outlook">일 때 적용되며(js/skins.js), 밝은 화면만 있다.
   색 값은 위 :root 값을 덮어쓰고(다크 설정보다 뒤에 두어 우선), 모서리·그림자·글꼴 등 공통 모양은 :root:is(엑셀, 아웃룩)로 바꾼다. */
:root[data-skin="excel"] {
  color-scheme: light;
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f3f3f3; --line: #d4d4d4; --card-border: #c6c6c6;
  --text: #1f1f1f; --text-soft: #404040; --muted: #6b6b6b; --dim: #a6a6a6; --off: #c8c8c8;
  --switch-off: #c8c8c8; --thumb-bg: #ececec;
  --primary: #217346; --primary-soft: #e3f1e9; --primary-hover: #cfe6d8; --ring-2: #b7dcc6; --hero-to: #ffffff;
  /* 상태 색은 조건부 서식 색(좋음 초록 · 보통 노랑 · 나쁨 빨강) */
  --ready: #006100; --ready-soft: #c6efce; --alert: #9c5700; --alert-soft: #ffeb9c; --danger: #9c0006;
  --side-bg: #217346; --grid: #e2e2e2;
}
:root[data-skin="outlook"] {
  color-scheme: light;
  --bg: #f0f0f0; --surface: #ffffff; --surface-2: #f5f5f5; --line: #e0e0e0; --card-border: #e0e0e0;
  --text: #242424; --text-soft: #424242; --muted: #616161; --dim: #a3a3a3; --off: #c7c7c7;
  --switch-off: #c7c7c7; --thumb-bg: #ebebeb;
  --primary: #0f6cbd; --primary-soft: #ebf3fc; --primary-hover: #cfe4fa; --ring-2: #b4d6fa; --hero-to: #ffffff;
  /* 상태 색은 메일 표시 색(완료 초록 · 플래그 빨강) */
  --ready: #107c10; --ready-soft: #dff6dd; --alert: #c4314b; --alert-soft: #fdf3f4; --danger: #c50f1f;
  --side-bg: #0f6cbd;
}
:root:is([data-skin="excel"], [data-skin="outlook"]) {
  --radius-lg: 0; --radius: 0;
  --shadow: none; --shadow-btn: none; --shadow-lg: 0 8px 28px rgba(0, 0, 0, .22);
  --backdrop: rgba(0, 0, 0, .3);
}
:root:is([data-skin="excel"], [data-skin="outlook"]) body { font: 13px/1.5 "Malgun Gothic", "맑은 고딕", "Segoe UI", system-ui, sans-serif; }
/* 엑셀·아웃룩 스타일은 밝은 화면만 있어 라이트·다크 전환 버튼을 숨긴다(메이플 스타일은 둘 다 있다) */
:root:is([data-skin="excel"], [data-skin="outlook"]) #btnTheme { display: none; }

/* 공통: 각진 모양 · 얇은 테두리 · 그림자 없음 */
:root:is([data-skin="excel"], [data-skin="outlook"]) .card { box-shadow: none; }   /* 테두리는 --card-border(회색)로 보인다 */
:root:is([data-skin="excel"], [data-skin="outlook"]) .btn { border-radius: 2px; font-weight: 400; padding: 6px 14px; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .btn.xs { border-radius: 2px; padding: 2px 8px; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .btn.primary { box-shadow: none; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .skill { border-width: 1px; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .sk-icon-wrap { border-radius: 0; background: var(--surface-2); border: 1px solid var(--line); }
:root:is([data-skin="excel"], [data-skin="outlook"]) .sk-icon { border-radius: 0; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .sk-time { font-weight: 600; font-size: 26px; letter-spacing: 0; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .chip { border-radius: 0; font-weight: 400; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .sk-bar, :root:is([data-skin="excel"], [data-skin="outlook"]) .sk-bar i { border-radius: 0; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .sk-foot { border-radius: 0; border: 1px solid var(--line); background: #fafafa; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .sk-live, :root:is([data-skin="excel"], [data-skin="outlook"]) .fe-live { border-radius: 0; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .tl-item, :root:is([data-skin="excel"], [data-skin="outlook"]) .tl-empty { border-radius: 0; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .form input[type=number], :root:is([data-skin="excel"], [data-skin="outlook"]) .form select { border-radius: 0; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .head-changelog { border-radius: 2px; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .hero h2, :root:is([data-skin="excel"], [data-skin="outlook"]) .page-head h1 { letter-spacing: 0; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .hero-art .ring { border-radius: 0; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .hero-icons img { border-radius: 0; box-shadow: none; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .modal-card, :root:is([data-skin="excel"], [data-skin="outlook"]) .update-bar, :root:is([data-skin="excel"], [data-skin="outlook"]) .toast,
:root:is([data-skin="excel"], [data-skin="outlook"]) .dialog-art, :root:is([data-skin="excel"], [data-skin="outlook"]) .log-raw, :root:is([data-skin="excel"], [data-skin="outlook"]) .log-actions, :root:is([data-skin="excel"], [data-skin="outlook"]) .picker-zoom { border-radius: 0; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .toast { background: #323232; color: #fff; }

/* 공통: 도구 모음은 프로그램 테마색 띠(리본 메뉴처럼) */
:root:is([data-skin="excel"], [data-skin="outlook"]) .toolbar { gap: 2px; padding: 4px; background: var(--side-bg); }
:root:is([data-skin="excel"], [data-skin="outlook"]) .tool { border-radius: 2px; background: transparent; color: #fff; font-weight: 400; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .tool:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }
:root:is([data-skin="excel"], [data-skin="outlook"]) .tool:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* 색 띠 위라 상태 색 대신 글자 앞 표시로 구분한다 */
:root:is([data-skin="excel"], [data-skin="outlook"]) .tool:is(.done, .warn) { background: transparent; color: #fff; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .tool.done #notifyLabel::before { content: "\2713  "; }
:root:is([data-skin="excel"], [data-skin="outlook"]) .tool.warn #notifyLabel::before { content: "! "; }

/* 엑셀: 셀 격자 바탕 · 수식 입력줄 같은 상태줄 · 시트 탭 같은 묶음 제목 */
:root[data-skin="excel"] body {
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 72px 22px; }
:root[data-skin="excel"] .page-head h1 { font-size: 20px; font-weight: 600; }
:root[data-skin="excel"] .status-line { flex-wrap: nowrap; gap: 10px; margin-top: 8px; padding: 4px 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); }
:root[data-skin="excel"] .status-line::before { content: "fx"; padding-right: 10px; border-right: 1px solid var(--line);
  color: var(--muted); font-style: italic; font-family: "Times New Roman", serif; }
:root[data-skin="excel"] .status { color: var(--text); }
:root[data-skin="excel"] .status.warn { color: var(--alert); }
:root[data-skin="excel"] .section-title, :root[data-skin="excel"] .group .section-title {
  align-self: flex-start; padding: 3px 16px; border: 1px solid var(--line); border-bottom: 3px solid var(--primary);
  background: var(--surface); color: var(--primary); font-size: 13px; font-weight: 600; }
:root[data-skin="excel"] .card-title { font-size: 14px; font-weight: 600; }
:root[data-skin="excel"] .hero { background: var(--surface); }

/* 아웃룩: 연회색 바탕 위 흰 메일 목록 · 폴더 이름 같은 묶음 제목 · 진행 중인 알리미는 읽지 않은 메일처럼 왼쪽 파란 띠 */
:root[data-skin="outlook"] body { font-family: "Segoe UI", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif; }
:root[data-skin="outlook"] .page-head h1 { font-size: 20px; font-weight: 600; }
:root[data-skin="outlook"] .card { border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
:root[data-skin="outlook"] .section-title, :root[data-skin="outlook"] .group .section-title { font-size: 14px; font-weight: 600; }
:root[data-skin="outlook"] .section-title::before { content: "\25BE"; margin-right: 6px; color: var(--muted); }   /* 펼친 폴더 ▾ */
/* 오른쪽에 버튼이 있는 제목(감지 로그)은 양 끝 정렬이라, 폴더 표시를 제목 글자 앞에 붙인다 */
:root[data-skin="outlook"] .section-title.has-action::before { content: none; }
:root[data-skin="outlook"] .section-title.has-action > span::before { content: "\25BE"; margin-right: 6px; color: var(--muted); }
:root[data-skin="outlook"] .card-title { font-size: 14px; font-weight: 600; }
:root[data-skin="outlook"] .bar { border-left: 3px solid transparent; }
:root[data-skin="outlook"] .bar[data-tone=cooldown] { border-left-color: var(--primary); }
:root[data-skin="outlook"] .bar[data-tone=cooldown] .sk-name, :root[data-skin="outlook"] .bar[data-tone=cooldown] .fe-name { font-weight: 700; }
:root[data-skin="outlook"] .bar[data-tone=alert] { border-left-color: var(--alert); }
:root[data-skin="outlook"] .bar[data-tone=ready] { border-left-color: var(--ready); }
:root[data-skin="outlook"] .hero { border-radius: 4px; background: var(--surface); }
:root[data-skin="outlook"] .toolbar { border-radius: 4px; }

/* ---------- 메이플 스타일 테마 ----------
   게임 UI 분위기를 CSS로만 흉내 낸다(게임 그림·글꼴 파일은 쓰지 않는다).
   색은 나무위키 메이플스토리 틀 색 조합을 따른다: 회청색 머리줄(#4a5863→#363e46) · 어두운 제목 띠(#313d4a→#252d35) ·
   밝은 회색 칸(#e2e2e2 · #d0d4d6) · 강조 살구색(#ffe1be→#e0b694, 글자 #111) · 형광 연두 제목 글자(#ecff00).
   다크(처음 모습)는 어두운 바탕에 밝은 창, 라이트(<html data-theme="light">)는 바탕 · 히어로만 밝게 바꾼다.
   창 · 머리줄 · 버튼은 두 모드가 같고, 바탕에 따라 달라지는 색은 --m-page-* 등 변수로 둔다. */
:root[data-skin="maple"] {
  color-scheme: light;
  --bg: #252d35; --surface: #e2e2e2; --surface-2: #d0d4d6; --line: #9aa3a7; --card-border: #9aa3a7;
  --text: #292f37; --text-soft: #3d4651; --muted: #606a77; --dim: #a6a6a6; --off: #9aa3a7;
  --switch-off: #9aa3a7; --thumb-bg: #c3c9cc;
  --primary: #36505d; --primary-soft: #d5dee3; --primary-hover: #c5d2d9; --ring-2: #a9bcc6; --hero-to: #e2e2e2;
  --ready: #5d8a0b; --ready-soft: #e1efc4; --alert: #c4416f; --alert-soft: #f6d9e4; --danger: #c62f2f;
  --radius-lg: 8px; --radius: 6px;
  --shadow: 0 6px 16px rgba(0, 0, 0, .35); --shadow-btn: none; --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);
  --backdrop: rgba(10, 14, 20, .6);
  --m-frame: #2d343c; --m-frame-edge: #7a939f; --m-title: #ecff00; --m-light: #f3f3f3;
  --m-bar: linear-gradient(to right, #313d4a, #252d35); --m-bar-edge: #516476;
  --m-head: linear-gradient(#4a5863, #363e46); --m-head-edge: #2d343c;
  --m-panel: linear-gradient(#2f3e4b, #2f3e4b, #36505d);
  --m-accent: linear-gradient(#ffe1be, #ffe1be, #e0b694); --m-accent-edge: #252d39;
  --m-pill: #4a5863;
  /* 바탕(페이지 · 히어로)과 그 위 글자 */
  --m-page-bg: radial-gradient(ellipse at 50% -10%, #36505d, #252d35 65%);
  --m-page-text: var(--m-light); --m-page-muted: #a6a6a6; --m-page-warn: #ffe1be;
  --m-page-shadow: rgba(0, 0, 0, .45);
  --m-live: var(--m-title); --m-live-glow: rgba(236, 255, 0, .2);   /* 화면 공유 중 표시 */
  --m-hero: var(--m-panel); --m-hero-title: var(--m-title); --m-hero-text: var(--m-light); --m-ring: rgba(243, 243, 243, .1); --m-ring-2: rgba(243, 243, 243, .14);
  /* 테두리: 창 두 겹 테두리 두께(안쪽) · 알리미 행 그림자 */
  --m-frame-w: 2px; --m-row-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
:root[data-skin="maple"][data-theme="light"] {
  --bg: #dfe6ea;
  --shadow: 0 6px 16px rgba(37, 45, 53, .18); --shadow-lg: 0 18px 50px rgba(37, 45, 53, .35);
  --backdrop: rgba(37, 45, 53, .45);
  --m-page-bg: radial-gradient(ellipse at 50% -10%, #f4f8fa, #d4dde2 65%);
  --m-page-text: #292f37; --m-page-muted: #606a77; --m-page-warn: #c4416f;
  --m-page-shadow: rgba(255, 255, 255, .7);
  --m-live: #5d8a0b; --m-live-glow: rgba(93, 138, 11, .2);
  --m-hero: linear-gradient(#f6f9fa, #f6f9fa, #dde6ea); --m-hero-title: #36505d; --m-hero-text: #292f37; --m-ring: rgba(54, 80, 93, .07); --m-ring-2: rgba(54, 80, 93, .1);
  /* 밝은 바탕에서는 어두운 두 겹 테두리가 도드라져, 바탕에 가까운 회청색 한 줄과 옅은 그림자로 경계를 보인다 */
  --line: #bfc8cd; --card-border: #c9d1d5;
  --m-frame: #c3cdd2; --m-frame-edge: rgba(255, 255, 255, .6); --m-frame-w: 1px;
  --m-row-shadow: 0 1px 3px rgba(37, 45, 53, .12);
}
:root[data-skin="maple"] body { background: var(--m-page-bg) fixed; }

/* 도구 모음: 회청색 단추 */
:root[data-skin="maple"] .tool { border-radius: 6px; border-color: var(--m-head-edge); background: var(--m-head); color: var(--m-light);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
:root[data-skin="maple"] .tool:hover:not(:disabled) { background: var(--m-head); filter: brightness(1.2); }
:root[data-skin="maple"] .tool.done { color: #c8f07a; }
:root[data-skin="maple"] .tool.warn { color: #ffe1be; }
/* 처음 방문 안내: 어두운 바탕에서 화살표가 묻히지 않게 형광 연두(라이트는 회청색), 말풍선은 제목 띠 색 */
:root[data-skin="maple"] { --coach-color: var(--m-title); }
:root[data-skin="maple"][data-theme="light"] { --coach-color: #36505d; }
:root[data-skin="maple"] .coach-bubble { border: 1px solid var(--m-bar-edge); background: #313d4a; }
:root[data-skin="maple"] .coach-bubble strong { color: var(--m-title); }
:root[data-skin="maple"] .share-state { color: var(--m-page-muted); }
:root[data-skin="maple"] .share-state.on { color: var(--m-live); }
:root[data-skin="maple"] .share-state.on .dot { background: var(--m-live); box-shadow: 0 0 0 4px var(--m-live-glow); }

/* 바탕 위 글자 */
:root[data-skin="maple"] .page-head h1 { color: var(--m-page-text); text-shadow: 0 2px 0 var(--m-page-shadow); }
:root[data-skin="maple"] .status { color: var(--m-page-muted); }
:root[data-skin="maple"] .status.warn { color: var(--m-page-warn); }
:root[data-skin="maple"] .app-version { color: var(--m-page-muted); }
:root[data-skin="maple"] .app-version:hover, :root[data-skin="maple"] .app-version:focus-visible { background: var(--m-bar); color: var(--m-title); }

/* 창: 어두운 테두리 + 밝은 회청 테두리 두 겹(테두리는 그림자로 그려 상태별 테두리 색을 쓰는 알리미 행과 겹치지 않게) */
:root[data-skin="maple"] .card:not(.bar), :root[data-skin="maple"] .modal-card {
  border: 0; box-shadow: 0 0 0 var(--m-frame-w) var(--m-frame), 0 0 0 calc(var(--m-frame-w) + 1px) var(--m-frame-edge), var(--shadow); }
/* 회청색 머리줄: 묶음 제목(스킬 알리미 등)과 창 제목(감지 로그 등) */
:root[data-skin="maple"] .section-title, :root[data-skin="maple"] .group .section-title, :root[data-skin="maple"] .card-title {
  padding: 6px 14px; border: 1px solid var(--m-head-edge); border-radius: 6px; background: var(--m-head);
  color: var(--m-light); font-size: 15px; font-weight: 800; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
/* 큰 묶음 제목은 어두운 제목 띠 */
:root[data-skin="maple"] .section-title, :root[data-skin="maple"] .group .section-title {
  border-color: var(--m-bar-edge); background: var(--m-bar); color: var(--m-title); }
:root[data-skin="maple"] .card-head .card-title { flex: 1; }
:root[data-skin="maple"] .title-action { color: var(--m-light); }
:root[data-skin="maple"] .help summary { color: var(--text); }
:root[data-skin="maple"] .help h4 { color: var(--primary); }

/* 히어로: 다크는 어두운 회청 패널 · 형광 연두 제목, 라이트는 밝은 회청 패널 · 회청 제목 */
:root[data-skin="maple"] .hero { background: var(--m-hero); color: var(--m-hero-text); }
:root[data-skin="maple"] .hero h2 { color: var(--m-hero-title); text-shadow: 0 2px 0 var(--m-page-shadow); }
:root[data-skin="maple"] .hero p { color: var(--m-hero-text); }
:root[data-skin="maple"] .hero-art .ring { background: var(--m-ring); }
:root[data-skin="maple"] .hero-art .r2 { background: var(--m-ring-2); }
:root[data-skin="maple"] .hero-icons img { border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
:root[data-skin="maple"] .hero .btn:not(.primary):disabled { opacity: .55; }

/* 알리미 행: 밝은 회색 칸 · 어두운 아이콘 칸 · 회청색 알약 이름표 */
:root[data-skin="maple"] .bar { background: linear-gradient(#e8e8e8, #d6d9db); box-shadow: var(--m-row-shadow); }
:root[data-skin="maple"] .sk-icon-wrap { border-radius: 6px; background: var(--m-head); border: 1px solid var(--m-head-edge); }
:root[data-skin="maple"] .sk-icon { border-radius: 4px; }
:root[data-skin="maple"] .sk-name, :root[data-skin="maple"] .fe-name { padding: 2px 14px; border-radius: 999px;
  background: var(--m-pill); color: var(--m-light); font-size: 14px; }
:root[data-skin="maple"] .chip { border-radius: 999px; background: #7d868d; color: #fff; font-weight: 800; }
:root[data-skin="maple"] [data-tone=search] .chip, :root[data-skin="maple"] [data-tone=cooldown] .chip { background: #36505d; color: var(--m-light); }
:root[data-skin="maple"] [data-tone=ready] .chip { background: #7aa612; color: #fff; }
:root[data-skin="maple"] [data-tone=alert] .chip { background: var(--m-accent); color: #111; box-shadow: inset 0 0 0 1px #c9966d; }
:root[data-skin="maple"] .sk-bar { background: #9aa3a7; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
:root[data-skin="maple"] .sk-bar i { background: var(--m-head); }
:root[data-skin="maple"] [data-tone=ready] .sk-bar i { background: #7aa612; }
:root[data-skin="maple"] [data-tone=alert] .sk-bar i { background: var(--m-accent); }
:root[data-skin="maple"] .sk-foot { border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
:root[data-skin="maple"] .tl-item { border-radius: 6px; border-color: var(--line); background: var(--surface-2); color: var(--text-soft); }
:root[data-skin="maple"] .tl-item.latest { border-color: #e0b694; background: #fff3e4; color: var(--text); }
:root[data-skin="maple"] .tl-empty { border-radius: 6px; background: var(--surface-2); }

/* 버튼: 밝은 회색 알약 · 주요 버튼은 살구색 강조 상자 */
:root[data-skin="maple"] .btn { border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(#f3f3f3, #d0d4d6);
  color: var(--text); font-weight: 700; box-shadow: 0 2px 0 #7a939f; }
:root[data-skin="maple"] .btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
:root[data-skin="maple"] .btn.primary, :root[data-skin="maple"] .btn.primary:hover:not(:disabled) {
  border-color: var(--m-accent-edge); background: var(--m-accent); color: #111; box-shadow: 0 2px 0 var(--m-accent-edge); }
:root[data-skin="maple"] .head-changelog { border-color: var(--line); background: linear-gradient(#f3f3f3, #d0d4d6); color: var(--text); }
:root[data-skin="maple"] .switch input:checked + span { background: #e0b694; }
:root[data-skin="maple"] .form input[type=number], :root[data-skin="maple"] .form select { border-radius: 6px; border-color: var(--line); }
:root[data-skin="maple"] .toast { background: #313d4a; color: var(--m-light); box-shadow: 0 0 0 1px var(--m-bar-edge), var(--shadow-lg); }
:root[data-skin="maple"] .dialog-kicker { color: var(--primary); }


/* 버튼이 4개인 창(테마 고르기 · 설정 불러오기/내보내기): 두 줄로 */
.two-col .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
/* 설정 코드 칸 */
.code-box { width: 100%; }
.code-box p { margin: 0 0 8px; color: var(--text-soft); font-size: 14px; word-break: keep-all; }
.code-box textarea { box-sizing: border-box; width: 100%; min-height: 110px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text); font: 12px/1.5 Consolas, "Courier New", monospace; word-break: break-all; resize: vertical; }
.code-box textarea:focus { outline: 3px solid var(--ring-2); outline-offset: 1px; }