:root {
  --bg: #ffffff; --ink: #16181d; --sub: #5d636c; --line: #e4e6ea; --soft: #f4f5f7;
  /* 외교부 여행경보 단계색: 1 파랑, 2 노랑, 3 빨강, 4 검정 */
  --lv1: #2563c9; --lv2: #e3b10b; --lv3: #d33a2c; --lv4: #111111; --lvn: #9aa0a8;
  --warn: #c2410c; --ok: #15803d;
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111214; --ink: #eceef1; --sub: #a1a7b0; --line: #2b2e33; --soft: #1b1d21; --lv4: #e6e6e6; --warn: #fb923c; --ok: #4ade80; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font); }
a { color: inherit; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }

.top { padding: 22px 0 10px; }
.top .home { font-size: 14px; color: var(--sub); text-decoration: none; font-weight: 600; }
.top h1 { margin: 2px 0 0; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; }
.top h1.home { font-size: 30px; color: var(--ink); }
.lede { margin: 4px 0 0; color: var(--sub); }

/* trip form */
.trip { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin: 12px 0 14px; }
.trip label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trip label > span { font-size: 12px; color: var(--sub); font-weight: 600; }
.trip select, .trip input { font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 6px;
  height: 46px; padding: 0 10px; width: 100%; min-width: 0; }
.trip select:focus, .trip input:focus { outline: 2px solid var(--lv1); outline-offset: 1px; border-color: transparent; }

/* travel alarm strip */
.alarm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 6px;
  background: var(--soft); border-left: 6px solid var(--lvn); font-size: 15px; }
.alarm b { font-weight: 700; }
.alarm small { color: var(--sub); }
.alarm a { margin-left: auto; font-size: 13px; color: var(--sub); }
.lv-1 { border-left-color: var(--lv1); } .lv-2 { border-left-color: var(--lv2); }
.lv-3 { border-left-color: var(--lv3); } .lv-4 { border-left-color: var(--lv4); }

/* plan */
.plan { margin-top: 18px; min-height: 60px; }
.hint { color: var(--sub); font-size: 14px; }
.count { margin: 0 0 8px; font-size: 15px; color: var(--sub); }
.count b { color: var(--ink); font-size: 18px; }
.days { list-style: none; margin: 0; padding: 0; }
.day { display: grid; grid-template-columns: 104px 1fr; gap: 0 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.day h3 { margin: 0; display: flex; flex-direction: column; font-size: 14px; font-weight: 600; color: var(--sub); }
.day h3 .dd { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.day.late h3 .dd { color: var(--warn); }
.day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item { display: grid; gap: 2px; }
.item label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.item input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.item .t { font-weight: 700; }
.item.warn .t { color: var(--warn); }
.item.done .t { text-decoration: line-through; color: var(--sub); }
.item .d { margin-left: 28px; color: var(--sub); font-size: 14px; }
.item .ln { margin-left: 28px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; }
.item .src { color: var(--sub); }
.item .apply, .item .buy { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 5px;
  text-decoration: none; font-weight: 700; font-size: 13px; }
.item .apply { background: var(--ink); color: var(--bg); }
.item .buy { border: 1.5px solid var(--ink); }
.item .buy::before { content: "사러 가기 "; font-weight: 500; }

.tools { display: flex; gap: 8px; margin: 14px 0 0; }
.tools button, .fbf button { font: inherit; font-weight: 700; height: 42px; padding: 0 14px; border-radius: 6px; border: 1.5px solid var(--ink);
  background: var(--bg); color: var(--ink); cursor: pointer; }
.tools button:first-child, .fbf .primary { background: var(--ink); color: var(--bg); }

/* facts */
.facts { margin-top: 28px; }
.facts h2, .recent h2 { font-size: 18px; margin: 0 0 8px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 8px 6px; border-top: 1px solid var(--line); }
th { width: 30%; font-weight: 600; color: var(--sub); }
th[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
td.src { width: 22%; font-size: 13px; color: var(--sub); white-space: nowrap; }
table.log th { width: auto; }

/* home */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 24px; }
.tile { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px; border: 1.5px solid var(--line); border-left-width: 6px;
  border-radius: 6px; text-decoration: none; font-weight: 700; }
.tile:hover { border-color: var(--ink); }
.tile.lv-none { border-left-color: var(--line); }
.tile .flag { font-size: 22px; line-height: 1; }
.recent ul { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.recent li { padding: 6px 0; border-top: 1px solid var(--line); }
.recent time { color: var(--sub); font-size: 13px; margin-right: 6px; }

.foot { max-width: 760px; margin: 0 auto; padding: 18px 16px 40px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--sub);
  border-top: 1px solid var(--line); }
.foot .built { margin-left: auto; }
.linkish { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

dialog { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); width: min(520px, calc(100vw - 32px)); }
.fbf h2 { margin: 0 0 8px; font-size: 18px; }
.fbf textarea { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 6px; padding: 8px; }
.fbf .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.prose li { margin: 6px 0; }

@media (max-width: 640px) {
  .top h1, .top h1.home { font-size: 26px; }
  .trip { grid-template-columns: 1fr 1fr; }
  .trip .f-country { grid-column: 1 / -1; }
  .day { grid-template-columns: 1fr; gap: 6px; }
  .day h3 { flex-direction: row; align-items: baseline; gap: 8px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  th { width: 34%; }
  td.src { white-space: normal; width: 24%; }
  .alarm a { margin-left: 0; }
}

@media print {
  ivel-bar, .trip, .tools, .foot, .facts, .buy, .apply, .home { display: none !important; }
  body { font-size: 12px; color: #000; background: #fff; }
  .top { padding-top: 0; }
  .day { break-inside: avoid; padding: 6px 0; }
  .item .src::after { content: " " attr(href); font-size: 10px; }
}