@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css");

:root{
  --ink:#17222E; --paper:#F3F5F1; --sheet:#FFFFFF;
  --line:#DCE1D9; --muted:#6C7A72;
  --urgent:#B33A2B; --soon:#B07A16; --open:#2E6B4E; --closed:#98A19C;
  --wrap:informed;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:16px; line-height:1.65; font-feature-settings:"tnum";
}
a{color:inherit}
.wrap{max-width:920px;margin:0 auto;padding:0 20px}

/* ── 상단 ── */
.top{border-bottom:1px solid var(--line);background:var(--sheet)}
.top .wrap{display:flex;align-items:baseline;gap:16px;height:60px}
.brand{font-weight:800;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.brand span{color:var(--urgent)}
.top nav{margin-left:auto;display:flex;gap:18px;font-size:14px}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--ink)}

/* ── 헤드 ── */
.head{padding:38px 0 22px}
.head h1{margin:0 0 8px;font-size:30px;line-height:1.3;letter-spacing:-.03em;font-weight:800}
.head p{margin:0;color:var(--muted);max-width:62ch}
.tally{margin:18px 0 0;display:flex;gap:26px;flex-wrap:wrap;font-size:15px}
.tally b{font-size:24px;font-weight:800;margin-right:5px}
.tally .u b{color:var(--urgent)}
.tally .s b{color:var(--soon)}

/* ── 목록: D-day가 시각적 척추 ── */
.board{border-top:1px solid var(--line);margin:26px 0 0}
.row{
  display:grid;grid-template-columns:64px 1fr;gap:16px;
  padding:15px 4px;border-bottom:1px solid var(--line);
  text-decoration:none;background:var(--sheet);
}
.row:hover{background:#FAFBF8}
.row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.dday{
  text-align:right;font-weight:800;font-size:19px;letter-spacing:-.03em;
  padding-top:1px;line-height:1.3;
}
.dday small{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:0}
.d-u{color:var(--urgent)} .d-s{color:var(--soon)}
.d-o{color:var(--open)} .d-c{color:var(--closed)}
.row h3{margin:0 0 4px;font-size:16px;font-weight:600;line-height:1.45;letter-spacing:-.01em}
.meta{font-size:13px;color:var(--muted)}
.meta i{font-style:normal}
.meta i+i:before{content:"·";margin:0 6px;color:var(--line)}
.amt{color:var(--ink);font-weight:600}

/* ── 탐색 ── */
.nav-block{margin:40px 0;padding:22px 0;border-top:1px solid var(--line)}
.nav-block h2{margin:0 0 14px;font-size:15px;font-weight:700}
.nav-block-top{margin:22px 0 0;border-top:0;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips a{
  display:inline-block;padding:6px 12px;background:var(--sheet);
  border:1px solid var(--line);border-radius:2px;
  font-size:14px;text-decoration:none;
}
.chips a:hover{border-color:var(--ink)}
.chips a em{font-style:normal;color:var(--muted);font-size:12px;margin-left:5px}

/* ── 상세 ── */
.detail{background:var(--sheet);border:1px solid var(--line);padding:28px;margin:22px 0}
.detail h1{margin:0 0 14px;font-size:25px;line-height:1.35;letter-spacing:-.03em}
.facts{border-top:1px solid var(--line);margin:20px 0 0}
.facts div{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts dt{color:var(--muted);font-weight:500}
.facts dd{margin:0}
.sec{margin:32px 0}
.sec h2{font-size:17px;margin:0 0 10px;font-weight:700;letter-spacing:-.02em}
.sec ul{margin:0;padding-left:19px}
.sec li{margin:5px 0}
.cta{
  display:inline-block;margin-top:6px;padding:11px 20px;
  background:var(--ink);color:#fff;text-decoration:none;font-weight:600;border-radius:2px;
}
.note{font-size:13px;color:var(--muted);border-left:2px solid var(--line);padding-left:12px;margin:24px 0}

/* ── 광고 슬롯 ── */
.ad{margin:30px 0;min-height:90px;display:flex;align-items:center;justify-content:center}
.ad:empty:before{content:"";}

/* ── 하단 ── */
footer{border-top:1px solid var(--line);margin-top:56px;padding:26px 0 50px;font-size:13px;color:var(--muted);background:var(--sheet)}
footer nav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

.prose{max-width:68ch}
.prose h2{font-size:18px;margin:28px 0 8px}
.prose p,.prose li{color:#2C3A33}

@media(max-width:560px){
  .head h1{font-size:24px}
  .row{grid-template-columns:54px 1fr;gap:12px}
  .dday{font-size:17px}
  .detail{padding:20px}
  .facts div{grid-template-columns:88px 1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── 필터 ── */
.filter{background:var(--sheet);border:1px solid var(--line);margin:22px 0 0;display:none}
.filter.ready{display:block}

.f-toggle{
  width:100%;display:flex;align-items:center;gap:10px;
  font:inherit;font-size:15px;font-weight:600;color:var(--ink);
  background:none;border:0;padding:13px 16px;cursor:pointer;text-align:left;
}
.f-toggle:hover{background:#FAFBF8}
.f-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.f-badge{
  flex:0 0 auto;padding:3px 8px;border-radius:2px;border:1px solid var(--line);
  color:var(--muted);font-size:11px;font-weight:700;letter-spacing:-.01em;
}
.f-summary{flex:1}
.filter.has-pick .f-summary{color:var(--urgent)}
.f-caret{
  flex:0 0 auto;width:9px;height:9px;margin-right:2px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);
}
.filter.open .f-caret{transform:rotate(-135deg) translate(-3px,-3px)}

.f-body{border-top:1px solid var(--line);padding:6px 16px 12px}
.f-line{display:flex;gap:12px;align-items:flex-start;padding:9px 0}
.f-line+.f-line{border-top:1px solid var(--line)}
.f-label{flex:0 0 34px;font-size:13px;color:var(--muted);font-weight:600;padding-top:6px}
.f-set{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.f-set button{
  font:inherit;font-size:14px;padding:5px 11px;cursor:pointer;
  background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:2px;
}
.f-set button:hover{border-color:var(--muted)}
.f-set button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.f-set button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.f-foot{align-items:center;gap:16px;font-size:13px;padding-top:11px}
.f-open{display:flex;align-items:center;gap:6px;cursor:pointer}
.f-open input{accent-color:var(--ink);width:15px;height:15px}
#f-reset{font:inherit;font-size:13px;background:none;border:0;cursor:pointer;
  color:var(--muted);text-decoration:underline;padding:2px 0;margin-left:auto}
#f-reset:hover{color:var(--ink)}

.f-bar{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--line)}
#f-q{
  flex:1;min-width:0;font:inherit;font-size:15px;padding:8px 11px;
  border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink);
}
#f-q:focus{outline:none;border-color:var(--ink);background:var(--sheet)}
#f-sort{
  font:inherit;font-size:14px;padding:8px 9px;border:1px solid var(--line);
  border-radius:2px;background:var(--paper);color:var(--ink);cursor:pointer;
}

.f-count{margin:11px 2px 0;font-size:14px;font-weight:600;color:var(--ink)}

.more{
  display:block;width:100%;font:inherit;font-size:15px;font-weight:600;
  padding:15px;background:var(--sheet);color:var(--ink);
  border:0;border-bottom:1px solid var(--line);cursor:pointer;
}
.more:hover{background:#FAFBF8;color:var(--urgent)}

@media(max-width:560px){
  .f-body{padding:4px 12px 10px}
  .f-line{flex-direction:column;gap:6px}
  .f-label{padding-top:0}
  .f-set button{font-size:13px;padding:5px 9px}
  .f-bar{padding:9px 12px}
  .f-toggle{padding:12px}
}

/* ── 스크랩 ── */
.row{position:relative;grid-template-columns:64px 1fr 34px;align-items:start}
.star{
  width:32px;height:32px;padding:0;margin:-3px -4px 0 0;
  background:none;border:0;cursor:pointer;border-radius:2px;
  color:var(--line);line-height:1;
}
.star:before{content:"★";font-size:19px}
.star:hover{color:var(--muted)}
.star[aria-pressed="true"]{color:var(--soon)}
.star:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

.nav-scrap{display:inline-flex;align-items:center;gap:5px}
#scrap-count{
  min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--urgent);color:#fff;font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}

.alert{
  margin:18px 0 0;padding:11px 14px;font-size:14px;font-weight:600;
  background:#FBF2EF;border-left:3px solid var(--urgent);color:var(--urgent);
}
.today-bar{
  margin:18px 0 0;padding:12px 14px;display:block;text-decoration:none;
  background:var(--ink);color:#fff;font-size:14px;font-weight:600;
}
.today-bar b{color:#FFC9A8}

.beginner-cta{
  margin:18px 0 0;padding:14px 16px;display:block;text-decoration:none;
  background:var(--open);color:#fff;border-radius:2px;
}
.beginner-cta b{display:block;font-size:15px;font-weight:800;margin-bottom:3px}
.beginner-cta span{font-size:13px;opacity:.92}
.beginner-cta:hover{opacity:.94}

.snote{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:50;max-width:460px;
  margin:0 auto;background:var(--ink);color:#fff;padding:14px 16px;
  box-shadow:0 6px 24px rgba(0,0,0,.22);border-radius:3px;
  opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s;
}
.snote.in{opacity:1;transform:none}
.snote.warn{background:var(--urgent)}
.snote p{margin:0;font-size:14px;line-height:1.55}
.snote-act{display:flex;gap:6px;justify-content:flex-end;margin-top:11px}
.snote-act button{
  font:inherit;font-size:13px;font-weight:600;padding:7px 13px;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:2px;
}
.snote-act button:hover{background:rgba(255,255,255,.26)}
.snote-act button[data-a="close"]{background:#fff;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.snote{transition:none}}
@media(max-width:560px){
  .row{grid-template-columns:54px 1fr 30px}
  .star{width:28px;height:28px}
}

/* ── 캘린더 구독 / 신규 ── */
.sub-cal{
  display:block;margin:20px 0 0;padding:14px 16px;text-decoration:none;
  background:var(--sheet);border:1px solid var(--ink);border-left-width:3px;
}
.sub-cal b{display:block;font-size:15px;color:var(--ink)}
.sub-cal span{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.sub-cal:hover{background:#FAFBF8}
.newbar{
  margin:18px 0 0;padding:10px 14px;font-size:14px;
  background:#EEF4EF;border-left:3px solid var(--open);color:var(--open);font-weight:600;
}
.newbar b{font-weight:800}
.tag-new{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:2px;
  background:var(--open);color:#fff;font-size:11px;font-weight:700;vertical-align:2px;
}
.badge-ai{
  display:inline-block;margin-right:7px;padding:2px 7px;border-radius:2px;
  background:var(--ink);color:#fff;font-size:11px;font-weight:700;vertical-align:2px;
}
.stats-row{display:flex;gap:28px;flex-wrap:wrap;margin:20px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-row div{font-size:13px;color:var(--muted)}
.stats-row b{display:block;font-size:24px;color:var(--ink);letter-spacing:-.02em;line-height:1.3}

.guide-list{display:flex;flex-direction:column;gap:10px}
.guide-card{
  display:block;padding:16px 18px;background:var(--sheet);border:1px solid var(--line);
  border-radius:2px;text-decoration:none;color:inherit;
}
.guide-card:hover{border-color:var(--ink)}
.guide-card b{display:block;font-size:16px;font-weight:700;margin-bottom:4px;letter-spacing:-.01em}
.guide-card span{font-size:13px;color:var(--muted)}

.chips.cal a{padding:8px 14px;font-size:15px}
.top nav{gap:14px}
@media(max-width:560px){.top nav{gap:11px;font-size:13px}.brand{font-size:17px}}

/* ── 섹션 구분 (메인 요약판) ── */
.sec-head{
  display:flex;align-items:baseline;gap:10px;
  padding:22px 2px 9px;border-bottom:1px solid var(--line);
}
.board .sec-head:first-child{padding-top:6px}
.sec-head h2{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em}
.sec-head span{margin-left:auto;font-size:13px;color:var(--muted);font-weight:600}
a.more{text-align:center;text-decoration:none;display:block}
a.more:hover{color:var(--urgent)}

.d-a{color:var(--muted);font-size:15px}
.d-a small{font-weight:500}