/* 돈 도구 2종(예·적금 이자·해외직구 관세) 전용 스타일. 색은 app.css 의 CSS 변수만 쓴다 */
/* 산식·근거 상자 */
.fn-form{background:var(--soft);border-radius:12px;padding:11px 13px;margin-top:12px;font-size:13.5px;line-height:1.75;color:var(--ink2);overflow-wrap:anywhere}
.fn-form b{color:var(--ink);font-weight:700}
.fn-form em{font-style:normal;color:var(--muted);font-size:12.5px;display:block;margin-top:3px}
.fn-form div+div{margin-top:7px;padding-top:7px;border-top:1px dashed var(--line)}
/* 좁은 화면에서 표가 그리드 칸을 밀지 않게 한다. 그리드 칸은 기본 최소 너비가 min-content 라
   안에 넓은 표가 있으면 칸이 화면 밖으로 커진다. 표는 .tbl-wrap 이 가로로 굴려 준다. */
.fn-body>*,.fn-body>.stack>*{min-width:0}
/* 고른 항목이 길어도 좁은 화면에서 패널을 밀지 않게 한다(select 는 기본 너비가 가장 긴 항목만큼이다) */
.fn-sel{min-width:0}
/* 작은 배지 */
.fn-tag{display:inline-block;font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 11px;white-space:nowrap}
.fn-tag.ok{background:color-mix(in srgb,var(--mint) 18%,var(--card));color:var(--mint);border:1px solid color-mix(in srgb,var(--mint) 45%,transparent)}
.fn-tag.no{background:color-mix(in srgb,var(--red) 15%,var(--card));color:var(--red);border:1px solid color-mix(in srgb,var(--red) 45%,transparent)}
/* 목록통관 배제 품목 같은 촘촘한 목록 */
.fn-list{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--ink2);line-height:1.7}
.fn-list li{margin:2px 0}
.fn-list li.hit{font-weight:700;color:var(--red)}
/* 비교 표(공용 tr.hl 과 함께 쓴다). 좁은 화면에서는 이름 칸만 줄바꿈을 허용해
   가로로 굴리지 않고도 금액 칸까지 다 보이게 한다. 숫자 칸은 계속 한 줄로 둔다. */
.fn-sm{font-size:13px;white-space:nowrap}
@media(max-width:420px){
 .fn-form{font-size:13px}
 .fn-sm{font-size:12.5px;white-space:normal}
 .fn-sm th,.fn-sm td{padding:8px 5px}
 .fn-sm th+th,.fn-sm td+td{white-space:nowrap}
 /* 열이 넷이면 좁은 화면에 다 들어가지 않는다. 세율은 고른 구분 아래 안내와 세목 표에도 있으므로 여기서만 숨긴다 */
 .fn-sm .fn-wide{display:none}
}