/* 연휴 최적화 계산기 — 앱 전용 스타일(공통은 css/site.css 사본) */
:root { --accent: #7c3aed; --accent-soft: #ede9fe; --hol: #dc2626; --hol-soft: #fee2e2; --we: #f1f5f9; --lv: #f59e0b; --lv-soft: #fef3c7; --br: #ddd6fe; }
#years.seg button { flex: 1; }
.hol-list { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow: auto; }
.hol-list li { display: grid; grid-template-columns: 96px 1fr; gap: 2px 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .9rem; align-items: baseline; }
.hol-list li .d { font-family: var(--mono); color: var(--muted); font-size: .82rem; white-space: nowrap; }
.hol-list li .d.we { color: var(--hol); }
.hol-list li .n small { display: inline-block; margin-left: 4px; }
.hol-list .chip { font-size: .7rem; padding: 1px 6px; }
.combos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.combos li { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; background: #fff; }
.combos li:hover { border-color: var(--accent); }
.combos li[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.easy { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 14px; }
.easy b { color: var(--accent); }
.combos .len { font-size: 1.85rem; font-weight: 800; color: var(--accent); min-width: 72px; text-align: center; line-height: 1; }
.combos .len small { display: block; font-size: .7rem; font-weight: 600; color: var(--muted); }
.combos .rng { font-weight: 600; }
.combos .meta { grid-column: 2; color: var(--muted); font-size: .85rem; }
.combos .eff { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.combos .empty { border: 0; color: var(--muted); cursor: default; display: block; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.legend .lg::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; }
.legend .hol::before { background: var(--hol-soft); border: 1px solid var(--hol); } .legend .we::before { background: var(--we); border: 1px solid #cbd5e1; } .legend .lv::before { background: var(--lv-soft); border: 1px solid var(--lv); } .legend .br::before { background: var(--br); border: 1px solid var(--accent); }
.cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.month { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; background: #fff; }
.month h4 { margin: 0 0 6px; font-size: .9rem; text-align: center; }
.month .wd, .month .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.month .wd span { font-size: .62rem; text-align: center; color: var(--muted); }
.month .wd span:first-child { color: var(--hol); }
.month .days span { font-size: .72rem; text-align: center; height: 24px; line-height: 24px; border-radius: 5px; position: relative; }
.month .days span.we { background: var(--we); }
.month .days span.br { background: var(--br); }
.month .days span.hol { background: var(--hol-soft); color: var(--hol); font-weight: 700; }
.month .days span.lv { background: var(--lv-soft); color: #92400e; font-weight: 700; box-shadow: inset 0 0 0 1px var(--lv); }
.month .days span.work { text-decoration: underline dotted; }
.month .days span.today { box-shadow: inset 0 0 0 2px var(--accent); }
.month .days span[title] { cursor: help; }
@media (max-width: 860px) { .hol-list { max-height: 260px; } }