/* 왼쪽 메뉴 전용 글꼴. 메뉴에 쓰는 글자만 담은 작은 파일이라 메뉴가 가장 먼저 그려진다.
   메뉴 이름을 바꿔서 없는 글자가 생겨도 전체 Pretendard(fonts/pretendard)로 표시되므로 다시 만들 필요는 없다. */
@font-face { font-family: "Pretendard Side"; font-weight: 600; font-display: swap; src: url(/static/fonts/PretendardSide-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Pretendard Side"; font-weight: 700; font-display: swap; src: url(/static/fonts/PretendardSide-Bold.woff2) format("woff2"); }

:root {
  --band: #21242e;
  --plate: #3f434e;
  --page: #eceef2;
  --cell: #dcdfe5;
  --line: #bfc4cd;
  --paper: #fbfcfd;
  --ink: #23262f;
  --soft: #4b5262;
  --sky: #7fabff;
  --action: #2556c9;
  --coral: #e06666;
  --coral-ink: #a32f2f;
  --gold: #e3b341;
  --normal: #2f6fb5;
  --hard: #c2571a;
  --night: #7a3fb0;
  --on-gold: #21242e;
  --outline: #21242e;
  --btn-line: #3f434e;
  --chip-on-bg: #21242e;
  --chip-on-ink: #fff;
  --chip-off-bg: #f0f1f4;
  --chip-off-ink: #a3a9b6;
  --head: #f4f5f7;
  --surface: #fff;
  --support-row: #e6eefc;
  --stripe: #f0f2f5;
  --box-hover: #fff3cf;
  --focus: #2556c9;
  --name-bg: #fbfcfd;
  --name-ink: #23262f;
  --name-soft: #4b5262;
  --role-support: #1f4fbe;
  --role-unknown: #b3261e;
  --side-bg: #c9cdd6;
  --side-ink: #2c303a;
  --side-strong: #1b1e26;
  --side-hover: rgba(0, 0, 0, .07);
  --side-active-bg: #fbfcfd;
  --side-active-ink: #1b1e26;
  --side-brand: #1f4fbe;
  --side-line: rgba(0, 0, 0, .22);
  --side-count: #1f4fbe;
  --side-w: 240px;
  --side-gap: 14px;
  --side-edge: transparent;
  --bid4-bg: #e6eefc;
  --bid4-ink: #1f4fbe;
  --bid8-bg: #fbf0d3;
  --bid8-ink: #8a6210;
  --r-panel: 16px;
  --r-control: 10px;
  --r-box: 9px;
  /* 제목(화면 제목, 상자 제목, 레이드 이름)만 맑은 고딕, 나머지는 모두 Pretendard */
  --display: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --body: "Pretendard Variable", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/1.55 var(--body); }
h1, h2, h3, p { margin: 0; }
h1, h2, .head h3, .section-head h3, .people > strong, .roster > strong, .problems > strong { font-family: var(--display); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hidden { display: none !important; }

/* 블랙 테마 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --band: #0d0f15;
  --plate: #2d313d;
  --page: #14161d;
  --cell: #252934;
  --line: #3b404d;
  --paper: #1c1f28;
  --ink: #eef0f5;
  --soft: #aab1c0;
  --action: #3a6fe6;
  --coral: #b94f4f;
  --coral-ink: #ff9d9d;
  --normal: #7cb8f5;
  --hard: #f29a63;
  --night: #c89cf0;
  --outline: #aeb5c4;
  --btn-line: #586072;
  --chip-on-bg: #e3b341;
  --chip-on-ink: #21242e;
  --chip-off-bg: #20232c;
  --chip-off-ink: #6a7180;
  --head: #232732;
  --surface: #1c1f28;
  --support-row: #23304a;
  --stripe: #232733;
  --box-hover: #3a3320;
  --focus: #7fabff;
  --name-bg: #2d313d;
  --name-ink: #fff;
  --name-soft: #e0e3ea;
  --role-support: #9dc1ff;
  --role-unknown: #ffc9c9;
  --side-bg: #0d0f15;
  --side-ink: #c9cfdb;
  --side-strong: #fff;
  --side-hover: rgba(255, 255, 255, .07);
  --side-active-bg: rgba(227, 179, 65, .16);
  --side-active-ink: #e3b341;
  --side-brand: #7fabff;
  --side-line: rgba(255, 255, 255, .16);
  --side-count: #7fabff;
  --side-edge: rgba(255, 255, 255, .09);
  --bid4-bg: #1f2a40;
  --bid4-ink: #9dc1ff;
  --bid8-bg: #2e2a1d;
  --bid8-ink: #e3b341;
}

/* 왼쪽 메뉴 */
/* 메뉴는 화면 가장자리에서 띄운 둥근 패널 */
.shell { display: grid; grid-template-columns: calc(var(--side-w) + var(--side-gap)) minmax(0, 1fr); column-gap: var(--side-gap); min-height: 100vh; }
.side {
  font-family: "Pretendard Side", var(--body); -webkit-font-smoothing: antialiased; position: sticky; top: var(--side-gap);
  height: calc(100vh - var(--side-gap) * 2); margin: var(--side-gap) 0 var(--side-gap) var(--side-gap); border-radius: 20px; border: 1px solid var(--side-edge);
  background: var(--side-bg); color: var(--side-strong); display: flex; flex-direction: column; padding: 18px 12px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; }
.brand img { width: 36px; height: 36px; }
.gate-logo { display: block; width: 72px; height: 72px; margin-bottom: 14px; }
.brand strong { font-size: 19px; font-weight: 700; color: var(--side-brand); }
.side nav { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; overflow-y: auto; }
.side nav button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-left: 3px solid transparent;
  border-radius: var(--r-control); background: none; color: var(--side-ink); cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-align: left; white-space: nowrap;
}
.side nav button:hover { background: var(--side-hover); color: var(--side-strong); }
.side nav button[aria-current="page"] { background: var(--side-active-bg); border-left-color: var(--gold); color: var(--side-active-ink); }
.side nav svg { width: 21px; height: 21px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reset-card { border: 1px solid var(--side-line); border-radius: var(--r-panel); padding: 12px; text-align: center; margin-top: 12px; }
.reset-card small { display: block; font-weight: 600; color: var(--side-ink); font-size: 13px; margin-bottom: 2px; }
.reset-card b { color: var(--side-count); font-size: 18px; font-variant-numeric: tabular-nums; }
.clock-row + .clock-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--side-line); }
.content { min-width: 0; }
.topbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 22px 32px 16px 18px; border-bottom: 1px solid var(--line); }
.topbar h1 { font-size: 25px; font-weight: 700; margin: 0; }
.top-date { color: var(--soft); }
.who { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.theme-pick { display: inline-flex; align-items: center; gap: 7px; margin-right: 6px; font-size: 14px; color: var(--soft); }
.theme-label { line-height: 30px; margin-right: 7px; }
.theme-swatch { width: 56px; height: 30px; padding: 0; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; }
.theme-swatch.white { background: #fff; color: #21242e; border: 1px solid #bfc4cd; }
.theme-swatch.black { background: #000; color: #fff; border: 1px solid #586072; }
.theme-swatch[aria-pressed="true"] { outline: 2px solid #2f7bf0; outline-offset: 2px; }
.link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

main { max-width: 1400px; padding: 24px 32px 110px 18px; }
.head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
/* 구성하기 버튼 줄: 아래로 내려도 화면 위에 붙어 있다 */
.sticky-head { position: sticky; top: 0; z-index: 20; background: var(--page); margin-top: -10px; padding: 10px 0; }
.mobile-lead { display: none; margin: 0 0 4px; }
h2 { font: 700 24px/1.25 var(--display); }
.sub { color: var(--soft); }
.grow { flex: 1 1 auto; }

.btn {
  border: 1px solid var(--btn-line); background: var(--paper); padding: 8px 16px; cursor: pointer; border-radius: var(--r-control);
}
.btn:hover:not(:disabled) { background: var(--cell); }
.btn.main { background: var(--action); border-color: var(--action); color: #fff; font-weight: 600; }
.btn.main:hover:not(:disabled) { background: #1c47ab; }
.btn.danger { border-color: var(--coral-ink); color: var(--coral-ink); }
.btn:disabled { opacity: .5; cursor: default; }
input[type=text], input[type=password], input[type=search], select {
  border: 1px solid var(--line); background: var(--paper); padding: 8px 12px; border-radius: var(--r-control); min-width: 0;
}
label.check { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; }
label.check input { width: 17px; height: 17px; accent-color: var(--action); }

/* 로그인 */
.gate { min-height: 100vh; background: var(--band); color: #fff; display: flex; align-items: center; padding: 24px; }
.gate-in { width: 100%; max-width: 460px; margin: 0 auto; }
.gate h1 { font: 700 clamp(46px, 11vw, 68px)/1.08 var(--display); color: var(--sky); }
.gate p { color: #d6dbe6; margin: 12px 0 24px; }
.gate label { display: block; margin-bottom: 14px; }
.gate label span { display: block; margin-bottom: 4px; }
.gate input { width: 100%; padding: 10px 12px; color: var(--ink); }
.gate .btn.main { width: 100%; padding: 11px; margin-top: 4px; }
.gate small { display: block; margin-top: 16px; color: #aeb5c4; }
.err { color: #ffb4b4; min-height: 1.5em; margin-bottom: 6px; }

/* 현황표 */
/* 스크롤 상자는 둥글게 자르지 않는다(그래픽 드라이버에 따라 화면이 까맣게 깜빡이는 원인).
   둥근 모서리와 테두리는 표의 모서리 칸에 직접 그린다. */
.sheet-wrap { width: fit-content; max-width: 100%; overflow-x: auto; max-height: calc(100vh - 160px); overflow-y: auto; }
table.sheet { border-collapse: separate; border-spacing: 0; width: max-content; background: var(--paper); border-radius: var(--r-panel); }
.sheet thead tr:first-child th { border-top: 1px solid var(--line); }
.sheet tr > :first-child { border-left: 1px solid var(--line); }
.sheet thead tr:first-child th:first-child { border-top-left-radius: var(--r-panel); }
.sheet thead tr:first-child th:last-child { border-top-right-radius: var(--r-panel); }
.sheet tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-panel); }
.sheet tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-panel); }
.sheet th, .sheet td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; padding: 0; }
.sheet thead th { position: sticky; background: var(--head); z-index: 2; font-weight: 600; }
.sheet thead tr:nth-child(1) th { top: 0; height: 26px; }
.sheet thead tr:nth-child(2) th { top: 26px; height: 38px; padding: 2px 4px; width: 92px; min-width: 92px; line-height: 1.2; font-size: 14px; }
.sheet th.lv { width: 70px; padding: 0 4px; }
.sheet th.memo-head { width: 44px; padding: 0 4px; }
.sheet thead th { font-size: 14px; line-height: 1.2; }
.sheet th.corner { left: 0; z-index: 4; }
.sheet td.name {
  position: sticky; left: 0; z-index: 1; background: var(--name-bg); color: var(--name-ink); text-align: left;
  padding: 0 10px; white-space: nowrap; line-height: 1.2;
}
.name b { font-weight: 700; font-size: 15px; margin-right: 8px; }
.name span { font-size: 13.5px; color: var(--name-soft); }
.sheet td.num { font-size: 14.5px; padding: 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet td.memo { padding: 0 8px; white-space: nowrap; font-size: 14px; color: var(--soft); }
.sheet td.raid { background: var(--cell); height: 31px; line-height: 0; }
.sheet .box { width: 72px; height: 24px; font-size: 13px; border-width: 1.5px; border-radius: 12px; vertical-align: middle; }
.sheet td.raid.no { background: var(--coral); }
.sheet tr.owner td {
  position: static; background: var(--page); text-align: left; padding: 3px 10px; font-size: 14px; font-weight: 700; border-right: 0;
}
.owner-left { position: sticky; left: 10px; display: inline-block; }
.owner em { font-style: normal; font-weight: 400; color: var(--soft); margin-left: 10px; }
.role { display: inline-block; font-size: 12px; font-style: normal; padding: 0 7px; margin-left: 5px; border: 1px solid currentColor; line-height: 1.5; border-radius: 999px; }
.mlv { display: none; }
.sheet thead th { word-break: keep-all; }
.name .role.support { color: var(--role-support); }
.name .role.unknown { color: var(--role-unknown); }

/* 체크 상자: 이 사이트의 중심 요소 */
.box {
  width: 32px; height: 32px; border: 2px solid var(--outline); background: var(--paper); border-radius: var(--r-box);
  font: 700 16px/1 var(--body); padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.box.노 { color: var(--normal); } .box.하 { color: var(--hard); } .box.나 { color: var(--night); }
.box.d1 { color: var(--normal); } .box.d2 { color: var(--hard); } .box.d3 { color: var(--night); }
button.box { cursor: pointer; }
button.box:hover { background: var(--box-hover); }
.box.done { background: var(--gold); color: var(--on-gold); }
.box.bad { border-color: var(--coral-ink); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; color: var(--soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .box { width: 42px; height: 24px; font-size: 13px; border-width: 1.5px; border-radius: 12px; }
.legend i { width: 24px; height: 24px; display: inline-block; border: 1px solid var(--line); border-radius: 7px; }
.legend i.no { background: var(--coral); } .legend i.free { background: var(--cell); }

.empty { background: var(--paper); border: 1px dashed var(--line); padding: 28px; border-radius: var(--r-panel); }
.empty .btn { margin-top: 12px; }

/* 내 숙제 */
.finder { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.finder input { flex: 1 1 200px; max-width: 320px; }
.roster { border-radius: var(--r-panel); background: var(--paper); border: 1px solid var(--line); padding: 12px 14px; margin-bottom: 18px; }
.roster-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 3px 22px; margin: 8px 0 12px; }
.roster-list small { color: var(--soft); }
.char { border-radius: var(--r-panel); overflow: hidden; display: grid; grid-template-columns: 210px minmax(0, 1fr); background: var(--paper); border: 1px solid var(--line); margin-bottom: 8px; }
.plate { background: var(--plate); color: #fff; padding: 10px 12px; }
.plate h3 { font-weight: 600; font-size: 16px; }
.plate p { color: #e0e3ea; font-size: 15px; }
.plate select, .plate input { width: 100%; margin-top: 6px; font-size: 15px; padding: 5px 9px; color: var(--ink); }
.plate .link { color: #e0e3ea; font-size: 14px; margin-top: 7px; }
.plate .warn { color: #ffc9c9; margin-top: 5px; }
.picks { padding: 8px 12px; }
.picks-top { display: flex; gap: 12px; align-items: baseline; margin-bottom: 4px; color: var(--soft); }
.picks-top strong { color: var(--ink); font-weight: 600; }
.picks-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 0 26px; }
.raid-row { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; padding: 4px 0; border-top: 1px solid var(--cell); }
.raid-row .rn { width: 124px; flex: 0 0 auto; white-space: nowrap; }
.raid-row small { color: var(--soft); }
.diff { display: flex; gap: 4px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--paper); padding: 4px 13px; cursor: pointer; font-size: 15px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.chip:hover:not(:disabled) { border-color: var(--outline); }
.chip[aria-pressed="true"] { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-ink); font-weight: 600; }
.chip:disabled { color: var(--chip-off-ink); background: var(--chip-off-bg); cursor: not-allowed; text-decoration: line-through; }
.dock {
  border-radius: 16px 16px 0 0; position: fixed; left: calc(var(--side-w) + var(--side-gap) * 2); right: 0; bottom: 0; background: var(--band); color: #fff; z-index: 10;
}
.dock-in { max-width: 1320px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
.dock .btn.main { padding: 9px 26px; }

.paste { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: flex-start; }
.paste textarea { flex: 1 1 280px; border: 1px solid var(--line); background: var(--paper); padding: 9px 12px; border-radius: var(--r-control); font: inherit; resize: vertical; }
.roster .plain select { width: 100%; min-width: 110px; padding: 4px 6px; }
.manual-fold { margin-bottom: 12px; }
.manual-fold summary { cursor: pointer; margin-bottom: 8px; }
.lv-edit { display: block; font-size: 14px; color: #e0e3ea; margin-top: 4px; }
.lv-edit input { margin-top: 2px; }

/* 구성하기 */
.people { border-radius: var(--r-panel); background: var(--paper); border: 1px solid var(--line); padding: 10px 14px; margin-bottom: 14px; }
.people-list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.meta { color: var(--soft); margin-bottom: 12px; }
.section { margin-bottom: 26px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; border-bottom: 3px solid var(--outline); padding-bottom: 4px; margin-bottom: 10px; }
.section-head h3 { font: 700 21px/1.3 var(--display); }
.raidgroups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; align-items: start; }
.raidgroup h4 { margin: 0 0 5px; font-size: 15px; font-weight: 600; }
.parties { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.party { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.party-title { background: var(--plate); color: #fff; padding: 6px 14px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.party-title span { font-weight: 400; color: #e4e7ee; }
.party-title span.has { color: #ffc9c9; }
.slot { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 7px 14px; border-top: 1px solid var(--cell); }
.slot:first-of-type { border-top: 0; }
.slot.support { background: var(--support-row); }
.slot b { font-weight: 600; }
.slot small { color: var(--soft); grid-column: 1; }
.tags { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 3px; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 124px; }
.tag { font-size: 13.5px; padding: 1px 9px; background: var(--cell); border-radius: 999px; }
.tag.dup { background: var(--coral); color: #fff; font-weight: 600; }
.tag.sup { background: var(--action); color: #fff; }
.tag.bus { background: var(--gold); color: var(--on-gold); font-weight: 700; }

/* 버스 캐릭터 고르기: 오늘 참여하는 사람 바로 밑 */
.bus-box { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.bus-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-weight: 600; }
.bus-head small { font-weight: 400; color: var(--soft); }
.seg { display: inline-flex; border: 1px solid var(--btn-line); border-radius: 999px; padding: 2px; background: var(--surface); }
.seg button { border: 0; background: none; color: var(--soft); padding: 5px 14px; border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--chip-on-bg); color: var(--chip-on-ink); font-weight: 600; }
.bus-row { display: flex; align-items: baseline; gap: 4px 12px; margin-top: 8px; }
.bus-row > b { flex: 0 0 auto; min-width: 4.5em; }
.bus-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.bus-chips .chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }

/* 클리어 자동 체크 */
.auto-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 10px 16px; margin-bottom: 14px; }
.auto-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.auto-body { margin-top: 8px; display: grid; gap: 8px; }
.auto-char { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.auto-char select { width: auto; min-width: 220px; }
.auto-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.auto-log li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.auto-log small { color: var(--soft); font-variant-numeric: tabular-nums; }

/* 임의 레이드 구성 */
.adhoc-group { margin-top: 10px; max-width: 680px; }
.adhoc-group > small { display: block; margin-bottom: 4px; }
.adhoc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.adhoc-group > small + .adhoc-row { border-top: 0; }
.adhoc-name { flex: 0 1 300px; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.adhoc-name small { color: var(--soft); }
.adhoc-row select { width: auto; max-width: 210px; }
.adhoc-power { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--soft); }
.adhoc-power input { width: 92px; }
.adhoc-row .chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.adhoc-raids { margin-top: 8px; }
/* 난이도는 레이드 버튼과 구분되게 다른 바탕의 칸에 */
.adhoc-diffs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--page); border: 1px dashed var(--btn-line); }
.adhoc-diffs-label { font-size: 14px; font-weight: 600; color: var(--soft); }
.adhoc-bus { margin-top: 8px; }
.fold { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.fold small { font-weight: 400; color: var(--soft); }
.fold-mark { display: inline-block; width: 1em; color: var(--soft); }
.slot.open { display: block; color: var(--soft); background: repeating-linear-gradient(135deg, transparent 0 8px, var(--stripe) 8px 16px); }
.waiting { background: var(--surface); border-left: 5px solid var(--gold); padding: 9px 14px; margin-top: 8px; border-radius: var(--r-control); }
.problems { background: var(--surface); border-left: 5px solid var(--coral); padding: 10px 14px; margin-bottom: 18px; border-radius: var(--r-control); }
.problems ul { margin: 4px 0 0; padding-left: 18px; }

/* 쌀산기 */
.bid-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 14px; }
.bid-form input { flex: 0 1 240px; font: 700 22px/1.2 var(--body); padding: 9px 12px; }
/* 인원별 카드: 위에서부터 경매 추천 금액, 손익분기 금액, 순이익 */
.bid-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1040px; }
.bid-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.bid-head { display: flex; align-items: center; gap: 9px; padding: 13px 18px; font-weight: 700; border-bottom: 1px solid var(--line); }
.bid-card.p4 .bid-head { background: var(--bid4-bg); color: var(--bid4-ink); }
.bid-card.p8 .bid-head { background: var(--bid8-bg); color: var(--bid8-ink); }
.bid-head svg, .bid-value svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.bid-head svg { width: 20px; height: 20px; }
.bid-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; }
.bid-line + .bid-line { border-top: 1px dashed var(--line); }
.bid-label { font-weight: 600; }
.bid-line.even .bid-label, .bid-line.even .bid-value { color: var(--hard); }
.bid-value {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 12px; border: 1px dashed var(--btn-line); border-radius: 8px;
  background: var(--surface); cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bid-value b { font-size: 19px; font-weight: 700; }
.bid-value svg { width: 15px; height: 15px; opacity: .65; }
.bid-value:hover:not(:disabled) { border-style: solid; border-color: var(--outline); }
.bid-value:disabled { cursor: default; }
.bid-line.first .bid-value { background: var(--gold); border: 1px solid var(--gold); color: var(--on-gold); }
.bid-line.first .bid-value:hover:not(:disabled) { background: #d7a52f; border-color: #d7a52f; }
.bid-line.profit { color: var(--soft); font-size: 14.5px; }
.bid-line.profit b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bid-note { margin-top: 14px; max-width: 72ch; }

/* 설정 */
.block { margin-bottom: 30px; }
.table-wrap { border-radius: var(--r-panel); overflow-x: auto; background: var(--paper); border: 1px solid var(--line); }
table.plain { border-collapse: collapse; width: 100%; }
.plain th, .plain td { border-bottom: 1px solid var(--cell); padding: 5px 8px; text-align: left; white-space: nowrap; }
.plain th { background: var(--head); font-weight: 600; }
.plain input[type=text] { width: 100%; min-width: 72px; padding: 5px 9px; }
.plain td.c, .plain th.c { text-align: center; }
.plain td.wide input { min-width: 210px; }
.rowbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }

#toast {
  position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); background: var(--band); color: #fff;
  padding: 10px 20px; border-radius: 999px; z-index: 30; opacity: 0; pointer-events: none; transition: opacity .15s; max-width: calc(100vw - 32px);
}
#toast.show { opacity: 1; }
#toast.bad { background: var(--coral-ink); }

@media (max-width: 860px) {
  .shell { display: block; }
  .side { position: static; height: auto; margin: 0; border-radius: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 12px; }
  .brand { padding: 0; }
  .brand { grid-row: 1; grid-column: 1; }
  .reset-card { grid-row: 1; grid-column: 2; margin: 0; padding: 4px 10px; border-radius: var(--r-control); }
  .reset-card small { font-size: 11px; margin: 0; }
  .reset-card b { font-size: 14px; }
  .clock-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .clock-row + .clock-row { margin-top: 0; padding-top: 0; border-top: 0; }
  .side nav { grid-row: 2; grid-column: 1 / -1; flex-direction: row; overflow-x: auto; }
  .side nav button { width: auto; padding: 8px 11px; font-size: 15px; gap: 6px; border-left: 0; border-bottom: 3px solid transparent; border-radius: 10px 10px 0 0; }
  .side nav button[aria-current="page"] { border-bottom-color: var(--gold); }
  .side nav svg { width: 18px; height: 18px; }
  .dock { left: 0; }
  .topbar, main { padding-left: 28px; }
}

@media (max-width: 1000px) {
  .raidgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .raidgroups { grid-template-columns: minmax(0, 1fr); }
  main { padding: 14px 16px 110px; }
  .topbar { padding: 12px 16px; }
  .bid-list { grid-template-columns: minmax(0, 1fr); }
  .bus-row { flex-direction: column; gap: 6px; }
  .mobile-lead { display: block; }
  .sticky-head > .sub { display: none; }
  .sticky-head { gap: 6px; flex-wrap: nowrap; }
  .sticky-head .btn { padding: 8px 10px; font-size: 14px; white-space: nowrap; }
  .adhoc-name { flex-basis: 100%; }
  .adhoc-row select { flex: 1 1 120px; max-width: none; min-width: 0; }
  .adhoc-power { font-size: 13px; }
  .adhoc-power input { width: 70px; }
  .adhoc-row .link { margin-left: auto; }
  .bid-line { padding: 11px 14px; }
  .bid-value b { font-size: 17px; }
  .char { grid-template-columns: minmax(0, 1fr); }
  .picks-list { grid-template-columns: minmax(0, 1fr); }
  .raid-row .rn { width: 100%; }
  .sheet th.corner, .sheet td.name { min-width: 124px; max-width: 124px; padding: 3px 8px; overflow: hidden; }
  .name b { display: block; margin-right: 0; }
  .name .role { display: none; }
  .sheet th.lv, .sheet td.num { display: none; }
  .mlv { display: inline; margin-left: 5px; }
  .sheet thead tr:nth-child(2) th { width: 66px; min-width: 66px; }
  .sheet .box { width: 52px; }
  .name b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
  .name span { font-size: 12px; }
  .sheet-wrap { max-height: calc(100vh - 300px); }
  .dock-in { padding: 10px 16px; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }
.people .bus-head > strong { font-family: var(--display); }