/* Streamlit 기본 테마(라이트·다크)에 가깝게. <html data-theme>은 index.html 머리 스크립트가 정한다:
   우측 상단 버튼으로 고른 값(브라우저에 기억), 없으면 기기 설정 — 관세청 사이트(customs)와 같은 방식 */
:root {
  --bg: #ffffff; --bg2: #f0f2f6; --fg: #31333f; --muted: rgba(49, 51, 63, .6); --line: rgba(49, 51, 63, .2);
  --primary: #ff4b4b; --red: #ff2b2b; --blue: #1c83e1; --green: #21c354; --link: #0068c9;
  --info-bg: rgba(28, 131, 225, .1); --info-fg: #004280; --warn-bg: rgba(255, 227, 18, .1); --warn-fg: #926c05;
  --ok-bg: rgba(33, 195, 84, .1); --ok-fg: #177233; --err-bg: rgba(255, 43, 43, .09); --err-fg: #7d353b;
  --cal-fg: #1f2937; --cal-line: rgba(0, 0, 0, .15); --sel: rgba(28, 131, 225, .12);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e1117; --bg2: #262730; --fg: #fafafa; --muted: rgba(250, 250, 250, .6); --line: rgba(250, 250, 250, .2);
  --red: #ff6c6c; --blue: #3d9df3; --green: #3dd56d; --link: #58a6ff;
  --info-bg: rgba(61, 157, 243, .2); --info-fg: #c7ebff; --warn-bg: rgba(255, 227, 18, .2); --warn-fg: #ffffc2;
  --ok-bg: rgba(61, 213, 109, .2); --ok-fg: #dffde9; --err-bg: rgba(255, 108, 108, .2); --err-fg: #ffdede;
  --cal-fg: #e5e7eb; --cal-line: rgba(255, 255, 255, .18); --sel: rgba(61, 157, 243, .2);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 16px/1.6 "Source Sans Pro", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
a { color: var(--link); }
h1 { font-size: 2.6rem; font-weight: 700; margin: 0 0 .5rem; line-height: 1.2; padding-top: 3rem; }  /* 위에 ☰·다크 버튼 자리 */
h3.sub { font-size: 1.6rem; font-weight: 600; margin: 1.2rem 0 .6rem; line-height: 1.3; }
.md h1 { font-size: 2rem; padding: 0; } .md h2 { font-size: 1.6rem; margin: 1.2rem 0 .5rem; } .md h3 { font-size: 1.3rem; margin: 1rem 0 .4rem; }
.md h4 { font-size: 1.15rem; margin: .4rem 0; }
.md p { margin: 0 0 .6rem; } .md ul, .md ol { margin: 0 0 .6rem; padding-left: 1.4rem; } .md li { margin: .1rem 0; }
.md code { background: var(--bg2); border-radius: 4px; padding: .05rem .3rem; font-size: .88em; }
.md pre { background: var(--bg2); padding: .8rem; border-radius: 6px; overflow-x: auto; }
.md table { border-collapse: collapse; margin: .5rem 0 1rem; font-size: .9rem; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line); padding: .25rem .6rem; text-align: left; }
.md blockquote { border-left: 3px solid var(--line); margin: 0 0 .6rem; padding-left: 1rem; color: var(--muted); }
.md > :last-child { margin-bottom: 0; }
.cap { font-size: .875rem; color: var(--muted); margin: 0 0 .8rem; }
.cap p { margin: 0 0 .3rem; }
.muted { color: var(--muted); }
.c-red { color: var(--red); } .c-blue { color: var(--blue); } .c-green { color: var(--green); } .c-gray { color: var(--muted); } .c-orange { color: #ffa421; }
hr.div { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

#layout { display: flex; min-height: 100vh; }
#sidebar { width: 336px; flex: 0 0 336px; background: var(--bg2); padding: 3.2rem 1.25rem 2rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; font-size: .95rem; }
#sidebar h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
#sidebar.closed { display: none; }
#main { flex: 1 1 auto; min-width: 0; padding: 0 3rem 6rem; max-width: 100%; position: relative; }
.icon-btn { border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1.4; padding: .15rem .5rem; }
.icon-btn:hover { border-color: var(--primary); color: var(--primary); }
#theme-btn { position: absolute; right: .8rem; top: .8rem; }
#side-close { position: absolute; right: .8rem; top: .8rem; }
#side-open { position: absolute; left: .8rem; top: .8rem; display: none; }
#sidebar.closed ~ #main #side-open { display: block; }
@media (max-width: 900px) {
  #layout { display: block; }
  #sidebar { position: fixed; z-index: 1000; left: 0; top: 0; width: min(336px, 90vw); box-shadow: 2px 0 12px rgba(0, 0, 0, .3); }
  #main { padding: 0 16px 5rem; }
  #side-open { display: block; }
  h1 { font-size: 2rem; padding-top: 3rem; }
}

#tabs { display: flex; gap: 1.2rem; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 1rem 0 1.2rem; scrollbar-width: thin; }
#tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--fg); font: inherit; font-size: .95rem; padding: .5rem 0; cursor: pointer; white-space: nowrap; }
#tabs button[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.panel[hidden] { display: none; }

.cols { display: flex; gap: 1rem; align-items: flex-start; }
.cols > .col { min-width: 0; }
.cols.gap-m { gap: 2rem; }
@media (max-width: 640px) { .cols { flex-direction: column; } .cols > .col { width: 100% !important; flex: none !important; } }
.box { border: 1px solid var(--line); border-radius: .5rem; padding: 1rem; margin: 0 0 1rem; }
.blk { margin: 0 0 1rem; }
details.exp { border: 1px solid var(--line); border-radius: .5rem; margin: 0 0 1rem; }
details.exp > summary { cursor: pointer; padding: .6rem 1rem; font-size: .95rem; list-style: none; }
details.exp > summary::before { content: "▸ "; } details.exp[open] > summary::before { content: "▾ "; }
details.exp > .exp-body { padding: .2rem 1rem 1rem; }
.note { border-radius: .5rem; padding: .9rem 1rem; margin: 0 0 1rem; }
.note.info { background: var(--info-bg); color: var(--info-fg); } .note.warning { background: var(--warn-bg); color: var(--warn-fg); }
.note.success { background: var(--ok-bg); color: var(--ok-fg); } .note.error { background: var(--err-bg); color: var(--err-fg); }
.note p { margin: 0; }

.metric { margin: 0 0 .6rem; }
.metric .m-label { font-size: .875rem; }
.metric .m-value { font-size: 2.25rem; line-height: 1.3; font-weight: 400; }
.metric .m-delta { font-size: .875rem; display: inline-block; border-radius: 1rem; padding: 0 .5rem; }
.metric .m-delta.off { color: var(--muted); background: rgba(128, 128, 128, .12); }
.metric .m-delta.up { color: var(--ok-fg); background: var(--ok-bg); } .metric .m-delta.down { color: var(--err-fg); background: var(--err-bg); }
.help { cursor: help; color: var(--muted); font-size: .85em; margin-left: .3rem; }

.wlabel { font-size: .875rem; margin: 0 0 .25rem; }
select, input[type=number], input[type=text], input:not([type]) { font: inherit; font-size: .95rem; color: var(--fg); background: var(--bg2); border: 1px solid transparent; border-radius: .5rem; padding: .45rem .6rem; max-width: 100%; }
select { width: 100%; cursor: pointer; }
select:focus, input:focus { outline: 1px solid var(--primary); }
.radio { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .95rem; }
.radio label { cursor: pointer; display: inline-flex; gap: .35rem; align-items: center; }
.radio input { accent-color: var(--primary); }
.pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.pills button, .btn { border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 1rem; padding: .2rem .75rem; cursor: pointer; font: inherit; font-size: .875rem; }
.pills button[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); background: rgba(255, 75, 75, .08); }
.btn { border-radius: .5rem; padding: .35rem .8rem; font-size: .95rem; white-space: nowrap; }
.btn:hover, .pills button:hover { border-color: var(--primary); color: var(--primary); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { color: #fff; opacity: .9; }
.btn[disabled] { opacity: .5; cursor: default; }
a.btn { text-decoration: none; display: inline-block; }

.tbl-wrap { overflow: auto; max-height: 420px; border: 1px solid var(--line); border-radius: .5rem; margin: 0 0 1rem; }
.tbl-wrap.tall { max-height: none; }
table.df { border-collapse: separate; border-spacing: 0; font-size: .875rem; width: 100%; }
table.df th, table.df td { padding: .3rem .55rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); white-space: nowrap; }
table.df th { position: sticky; top: 0; background: var(--bg2); font-weight: 400; color: var(--muted); text-align: left; z-index: 1; }
table.df td.num, table.df th.num { text-align: right; }
table.df td.ix { color: var(--muted); background: var(--bg2); }
table.df tr:last-child td { border-bottom: 0; }
table.df th:last-child, table.df td:last-child { border-right: 0; }
table.df td.hot { cursor: pointer; text-decoration: underline dotted; }
table.df td.hot:hover { background: var(--sel); }
table.df td.wrap { white-space: normal; min-width: 14rem; }

.chart { width: 100%; min-height: 60px; margin: 0 0 1rem; }
.chart .vega-embed { width: 100%; }
img.pic { max-width: 100%; border-radius: .3rem; display: block; margin: 0 0 .6rem; }

/* 멀티셀렉트 */
.ms { border: 1px solid var(--line); border-radius: .5rem; padding: .4rem; background: var(--bg2); }
.ms .chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .3rem; }
.ms .chip { background: var(--primary); color: #fff; border-radius: .3rem; padding: 0 .2rem 0 .5rem; font-size: .85rem; display: inline-flex; align-items: center; gap: .2rem; }
.ms .chip button { background: none; border: 0; color: #fff; cursor: pointer; font-size: .9rem; padding: 0 .2rem; }
.ms input { width: 100%; background: var(--bg); }

/* 달력 (app.py custom_css를 옮김) */
#cal { --fc-border-color: var(--cal-line); --fc-page-bg-color: transparent; --fc-neutral-bg-color: transparent; }
#cal .fc { color: var(--cal-fg); font-size: 12px; }
#cal .fc .fc-daygrid-day.fc-day-today { background: transparent; }
#cal .fc .fc-day-sat, #cal .fc .fc-day-sun { background: rgba(128, 128, 128, .08); }
#cal .fc-daygrid-day-top { justify-content: center; }
#cal .fc-daygrid-day-number { font-weight: 600; font-size: 13px; color: var(--cal-fg); text-decoration: none; }
#cal .fc-day-sun .fc-daygrid-day-number { color: #ef4444; }
#cal .fc-day-sat .fc-daygrid-day-number { color: #3b82f6; }
#cal .fc-day-other .fc-daygrid-day-number { opacity: .4; }
#cal .fc-col-header-cell-cushion { font-size: 0; text-decoration: none; }
#cal .fc-col-header-cell-cushion::after { font-size: 13px; font-weight: 700; color: var(--cal-fg); }
#cal .fc-day-sun .fc-col-header-cell-cushion::after { content: "일"; color: #ef4444; }
#cal .fc-day-mon .fc-col-header-cell-cushion::after { content: "월"; }
#cal .fc-day-tue .fc-col-header-cell-cushion::after { content: "화"; }
#cal .fc-day-wed .fc-col-header-cell-cushion::after { content: "수"; }
#cal .fc-day-thu .fc-col-header-cell-cushion::after { content: "목"; }
#cal .fc-day-fri .fc-col-header-cell-cushion::after { content: "금"; }
#cal .fc-day-sat .fc-col-header-cell-cushion::after { content: "토"; color: #3b82f6; }
#cal .fc-event { cursor: pointer; font-size: 11px; }
#cal .fc-daygrid-event .fc-event-title, #cal .fc-daygrid-event { white-space: normal; overflow: visible; line-height: 1.15; }
#cal .exec .fc-event-title { font-weight: 700; }
#cal .fc-daygrid-day { cursor: pointer; }
#cal .fc-more-link { color: var(--cal-fg); }
#cal .fc-popover { background: var(--bg); }
.cal-nav { display: grid; grid-template-columns: 4fr 3fr 3fr; align-items: center; margin-bottom: .4rem; }
.cal-nav .btns { display: flex; gap: .4rem; }
.cal-nav .title { text-align: center; font-size: 20px; font-weight: 700; }
@media (max-width: 640px) { .cal-nav { grid-template-columns: auto 1fr; } .cal-nav > :last-child { display: none; } .cal-nav .title { font-size: 17px; } }
.legend span { border-left: 4px solid; padding: 0 6px; font-size: 12px; display: inline-block; margin: 2px 0; }

#to-top { position: fixed; right: 1.5rem; bottom: 4rem; z-index: 999; padding: .5rem .9rem; border: 0; border-radius: 2rem;
  background: var(--primary); color: #fff; font: 600 .85rem/1 sans-serif; letter-spacing: .05em; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .2s; }  /* 관세청 사이트와 같은 모양 */
#to-top.on { opacity: .9; pointer-events: auto; }
#to-top.on:hover { opacity: 1; }

#modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
#modal[hidden] { display: none; }
.modal-box { background: var(--bg); color: var(--fg); border-radius: .6rem; padding: 1.6rem 1.6rem 1rem; width: min(900px, 100%); position: relative; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.modal-box h2 { font-size: 1.4rem; margin: 0 0 1rem; }
.modal-x { position: absolute; right: .8rem; top: .8rem; }
.refresh-msg { font-size: .9rem; margin-top: .6rem; }