/* pro_forma — 단일 페이지 (입력 + 결과) 스타일 */ * { box-sizing: border-box; } body { font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; margin: 0; padding: 0; color: #1f2328; line-height: 1.55; background: #fafbfc; } /* ═══ 레이아웃: 메인 (입력) + 우측 (옵티마이저 + 결과) ═══ */ .layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(420px, 1fr); gap: 1.5rem; max-width: 1500px; margin: 0 auto; padding: 1.25rem 1rem 4rem; align-items: start; } .main { min-width: 0; } .right { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow-y: auto; } @media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } .right { position: static; max-height: none; } } /* ─── 결과 패널 좌측 배치 토글 ─────────────────────────────── 가 있으면 결과 카드를 좌측, 입력 폼을 우측에 둔다. body 클래스만 빼면 원래(우측 결과)로 복귀. 모바일(<1100px) 에서는 둘 다 상-하 스택 — 폼 먼저, 결과 나중. */ @media (min-width: 1101px) { body.layout-result-left .layout { grid-template-columns: minmax(420px, 1fr) minmax(0, 1.4fr); } body.layout-result-left .right { order: -1; } body.layout-result-left .main { order: 0; } } .card { background: #ffffff; border: 1px solid #d0d7de; border-radius: 6px; padding: 1rem 1.1rem; } .card h2 { margin: 0 0 .55rem; font-size: 1.05rem; color: #2a5a8a; border-bottom: 1px solid #e1e4e8; padding-bottom: .35rem; } /* ═══ 옵티마이저 영역 (메인 하단 fieldset) ═══ */ fieldset.opt-card { border-color: #b9c8d8; background: #f7faff; } fieldset.opt-card legend { color: #2a5a8a; } .opt-header { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .8rem 1rem; margin: .2rem 0 1rem; padding-bottom: .8rem; border-bottom: 1px dashed #c5d3e1; } .opt-select { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .92rem; margin: 0; min-width: 240px; } .opt-header .run-opt-btn { margin: 0; flex: 0 0 auto; } .opt-header .opt-status { margin: 0 0 .35rem; flex: 1 1 auto; min-width: 12rem; } .opt-desc { font-size: .87rem; color: #3a434d; background: #ffffff; border-left: 3px solid #2a5a8a; padding: .5rem .75rem; margin: .3rem 0 .8rem; border-radius: 3px; } .opt-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .55rem 1rem; } .opt-fields > .hint, .opt-fields > .hint-block, .opt-fields > .per-plan-n-range { grid-column: 1 / -1; margin: 0; } .per-plan-n-range h5 { margin: .3rem 0 .35rem; font-size: .88rem; color: #3a434d; } .per-plan-n-range table.plans { font-size: .85rem; } .per-plan-n-range .plan-name-label { font-weight: 600; text-align: left; padding-left: .5rem; } .opt-row { display: flex; flex-direction: column; gap: .2rem; margin: 0; font-size: .88rem; } .opt-row.check { flex-direction: row; align-items: center; gap: .5rem; } .hint-block { background: #fff8dc; padding: .55rem .7rem; border-radius: 3px; border: 1px solid #f0e3a3; font-size: .82rem; } .run-opt-btn { padding: .55rem 1.4rem; font-size: .95rem; } .opt-status { font-size: .85rem; color: #50595f; } /* ═══ 결과 카드 ═══ */ .result-card section { margin-bottom: 1rem; padding: 0; border: 0; background: transparent; } .result-card h3 { margin: 1rem 0 .35rem; padding-bottom: .25rem; font-size: .98rem; color: #24292f; border-bottom: 1px solid #e1e4e8; } .result-card h4 { margin: .8rem 0 .3rem; font-size: .9rem; color: #3a434d; } .result-meta { font-size: .85rem; color: #50595f; margin: .25rem 0 .5rem; } .error-box { background: #fff0f3; border: 1px solid #f7b3c1; border-left: 4px solid #cc3355; padding: .65rem .85rem; border-radius: 4px; color: #82273f; font-size: .9rem; } .error-box strong { display: block; margin-bottom: .25rem; } .error-box p { margin: 0; } /* ═══ 헤더 / 본문 ═══ */ header h1 { margin: 0 0 .3rem; font-size: 1.6rem; border-bottom: 2px solid #2a5a8a; padding-bottom: .4rem; } .brand { display: inline-block; font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; background: #2a5a8a; color: white; padding: .15rem .5rem; font-size: .8rem; border-radius: 4px; vertical-align: middle; margin-left: .4rem; } .hint { color: #656d76; font-size: .88rem; margin: .3rem 0 .6rem; } fieldset { margin: 1rem 0; padding: .9rem 1.3rem 1.1rem; border: 1px solid #d0d7de; border-radius: 6px; background: #ffffff; } legend { font-weight: 700; padding: 0 .55rem; color: #1f2328; font-size: 1rem; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .55rem 1rem; } label { display: flex; flex-direction: column; font-size: .88rem; color: #24292f; gap: .2rem; } input[type=number], input[type=text], select { padding: .35rem .5rem; font-size: .92rem; border: 1px solid #c5ccd2; border-radius: 4px; background: white; color: #1f2328; font-family: inherit; } /* 입력란 아래 단위 환산값 / 법정 한도 표시 */ .unit-conv { display: block; font-size: .78rem; color: #50595f; margin-top: .15rem; min-height: .9rem; font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; } .unit-conv.warn { color: #cc3355; font-weight: 600; } input:focus, select:focus { border-color: #2a5a8a; outline: 2px solid rgba(42, 90, 138, .15); } /* ═══ 평형 표 ═══ */ table.plans { width: 100%; border-collapse: collapse; margin-top: .4rem; font-size: .87rem; } table.plans th, table.plans td { border: 1px solid #d0d7de; padding: .3rem .35rem; text-align: center; } table.plans th { background: #f0f3f6; font-weight: 600; font-size: .82rem; } table.plans input[type=number], table.plans input[type=text] { width: 100%; padding: .22rem .28rem; font-size: .87rem; } /* ═══ key-value 표 ═══ */ table.kv { width: 100%; border-collapse: collapse; margin: .25rem 0 .55rem; font-size: .87rem; } table.kv th, table.kv td { border: 1px solid #d0d7de; padding: .35rem .55rem; text-align: left; vertical-align: top; } table.kv th { background: #f0f3f6; font-weight: 500; color: #24292f; width: 40%; } table.kv tr.total th, table.kv tr.total td { background: #fff8dc; font-size: .92rem; } td.money { font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; text-align: right; white-space: nowrap; } td.num { font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; text-align: right; } .minus { color: #cc3355; } .muted { color: #656d76; font-size: .9em; } .badge { display: inline-block; font-size: .78rem; padding: .15rem .55rem; background: #2a5a8a; color: white; border-radius: 12px; vertical-align: middle; } .ok { color: #117733; font-weight: 600; margin-left: .5rem; font-size: .82em; } .fail { color: #cc3355; font-weight: 600; margin-left: .5rem; font-size: .82em; } details { margin: 1rem 0; } details summary { cursor: pointer; font-weight: 600; padding: .45rem .75rem; background: #f0f3f6; border: 1px solid #d0d7de; border-radius: 4px; user-select: none; } details[open] summary { margin-bottom: .5rem; } button { padding: .55rem 1.2rem; font-size: .95rem; font-weight: 600; background: #2a5a8a; color: white; border: 0; border-radius: 5px; cursor: pointer; font-family: inherit; } button:hover { background: #1f4870; } button:disabled { background: #8a9ba8; cursor: progress; } footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e1e4e8; }