:root {
  --red: #c62828; --yellow: #f9a825; --line: #ddd; --ink: #222; --dim: #666;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 "맑은 고딕", "Malgun Gothic", sans-serif;
       color: var(--ink); }
header { display: flex; align-items: center; gap: 16px; padding: 10px 16px;
         border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); }
header nav { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.who { color: var(--dim); }
main { padding: 16px; }
.narrow { max-width: 320px; display: grid; gap: 10px; }
.narrow label { display: grid; gap: 4px; }
input, select, button { padding: 6px 8px; font: inherit; }
.flash { margin: 12px 16px; padding: 10px 14px; background: #fff8e1;
         border: 1px solid var(--yellow); list-style: none; }
.hint { color: var(--dim); }
.warn { color: var(--red); font-weight: 700; }
table { border-collapse: collapse; }
th, td { border: 1px solid var(--line); padding: 4px 8px; text-align: right; }
th { background: #fafafa; }
td.name, th.name { text-align: left; }
tr.red td { background: #ffebee; }
tr.yellow td { background: #fffde7; }
tr.excluded td { color: var(--dim); text-decoration: line-through; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
         gap: 16px; }
.card { border: 1px solid var(--line); padding: 12px; }
.card h2 { font-size: 15px; margin: 0 0 8px; }
.card h2 small { color: var(--dim); font-weight: 400; margin-left: 6px; }
.card table { width: 100%; margin-top: 8px; }
.map { height: 300px; }

.dayaction { margin: 12px 0; display: flex; gap: 10px; align-items: center; }
.edit { margin-top: 10px; }
.edit form { display: grid; gap: 6px; margin-top: 8px; }
.flags form { display: flex; gap: 4px; }
.flags input[name="reason"] { width: 110px; }

/* 49점 전체 표. 접혀 있는 게 기본이라 카드가 길어지지 않는다. 열었을 때만
   길어지므로 카드 안에서 따로 스크롤시켜 옆 카드가 밀리지 않게 한다. */
.allpoints { margin-top: 10px; }
.allpoints summary { cursor: pointer; color: var(--dim); }
.allpoints > table { width: 100%; margin-top: 8px; font-size: 12px; }
.allpoints th, .allpoints td { padding: 2px 5px; }
.allpoints form { display: flex; gap: 3px; }
.allpoints input[name="reason"] { width: 90px; padding: 2px 4px; }
.allpoints button { padding: 2px 6px; }

.wafer { border-top: 2px solid var(--line); padding-top: 16px; margin-top: 24px; }
.wafer h2 { font-size: 15px; margin: 0 0 8px; }
.wafer h2 small { color: var(--dim); font-weight: 400; margin-left: 6px; }
.bigmap { height: 520px; }
.copybox { margin: 12px 0; }
.copybox textarea { width: 100%; max-width: 320px; display: block; margin-top: 6px;
                    font-family: monospace; }
.points { margin-top: 12px; }

.scroll { overflow-x: auto; }