* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #F3F4F6; color: #16181D; font-family: 'IBM Plex Sans KR', system-ui, sans-serif; font-size: 14px; }
button, input, select { font-family: inherit; }
a { color: #2449D8; } a:hover { color: #1A35A3; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.muted { color: #4A5060; font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #8CA0E8; outline-offset: 2px; }
/* 한 화면 구성: 헤더 + (입력 | 추천) */
.app { max-width: 1360px; margin: 0 auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 100vh; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.titles { display: flex; align-items: baseline; gap: 12px; }
.brand { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #4A5060; letter-spacing: .08em; }
h1 { margin: 0; font-size: 20px; font-weight: 700; }
.top-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pills { display: flex; gap: 6px; }
.pill { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: #E6ECFF; color: #1D3BB3; font-size: 12px; font-weight: 500; }
.ghost { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #CDD2DB; background: #FFF; color: #16181D; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ghost:hover { border-color: #8CA0E8; }
.ghost.warn { border-color: #F2C79B; background: #FFF6EC; color: #6B3400; }
.count { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #4A5060; }
.count:empty { display: none; }
.alert { border-radius: 10px; background: #FFEBD6; color: #6B3400; padding: 10px 14px; font-size: 13px; }
.layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
/* 입력 */
.inputs { background: #FFF; border: 1px solid #DDE1E7; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.group { display: flex; flex-direction: column; gap: 5px; }
.group h2 { margin: 0; font-size: 12px; font-weight: 600; color: #4A5060; display: flex; gap: 6px; align-items: baseline; }
.hint { font-weight: 400; color: #4A5060; font-size: 11px; }
.hint:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #CDD2DB; background: #FFF; color: #1B1E24; font-size: 13px; font-weight: 500; cursor: pointer; }
.chip:hover { border-color: #8CA0E8; }
.chip[aria-pressed="true"] { border-color: #2449D8; background: #2449D8; color: #FFF; font-weight: 600; }
.plan-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #F3F5F9; }
.plan-label { font-size: 11px; font-weight: 600; color: #4A5060; flex-shrink: 0; }
.chips.sub { gap: 4px; }
.chips.sub .chip { min-height: 28px; padding: 0 8px; font-size: 12px; }
.budget { flex-direction: row; align-items: center; justify-content: space-between; }
.budget label { font-size: 12px; font-weight: 600; color: #4A5060; }
.money-input { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #CDD2DB; border-radius: 8px; padding: 0 10px; height: 32px; background: #FFF; }
.money-input input { border: 0; width: 80px; font-size: 14px; outline: none; background: transparent; }
.money-input:focus-within { outline: 3px solid #8CA0E8; outline-offset: 2px; }
/* 추천 카드 */
.main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rec { background: #16181D; color: #FFF; border-radius: 14px; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.rec-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.rec-title { min-width: 0; }
.rec-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #B8BECC; }
.rec h2 { margin: 4px 0 0; font-size: 24px; font-weight: 700; line-height: 1.3; }
.cost { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; text-align: right; flex-shrink: 0; }
.cost-label { font-size: 12px; color: #B8BECC; }
.cost-value { font-family: 'IBM Plex Mono', monospace; font-size: 28px; font-weight: 500; line-height: 1.2; }
.cost-delta { font-size: 13px; font-weight: 600; color: #FFB774; }
.cost-sub { font-size: 12px; color: #C9D6FF; }
.note { border-radius: 8px; padding: 8px 12px; font-size: 13px; line-height: 1.45; }
.note.warn { background: #3A2A12; color: #FFD9AE; }
.note.info { background: #1E2A4A; color: #C9D6FF; }
.steps { display: flex; align-items: stretch; gap: 10px; }
.step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; background: #23262E; border: 1px solid #343844; border-radius: 10px; padding: 12px 14px; }
.step.swapped { border-color: #FFB774; }
.step-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #B8BECC; }
.step-share { font-family: 'IBM Plex Mono', monospace; font-size: 11px; white-space: nowrap; }
.step-model { font-size: 16px; font-weight: 600; display: flex; flex-direction: column; }
.step-orig { font-size: 12px; font-weight: 400; color: #B8BECC; }
.swap { display: flex; gap: 6px; }
.swap select.eff { flex: 0 0 112px; width: 112px; }
.swap select:disabled { opacity: .5; }
.swap select { width: 100%; min-width: 0; flex: 1 1 auto; min-height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid #4A4F5C; background: #16181D; color: #FFF; font-size: 12px; }
.arrow { align-self: center; flex-shrink: 0; }
.tabs { display: flex; gap: 4px; align-items: center; border-bottom: 1px solid #343844; }
.tab { height: 32px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #B8BECC; font-size: 13px; font-weight: 600; cursor: pointer; }
.tab[aria-selected="true"] { color: #FFF; border-bottom-color: #FFB774; }
.tab-hint { font-size: 12px; color: #9DA3B2; margin-left: 8px; }
.tabpanel { min-height: 0; }
.why { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; }
.compare { display: flex; flex-direction: column; gap: 10px; }
.reset { margin-left: auto; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid #FFB774; background: transparent; color: #FFD9AE; font-size: 12px; cursor: pointer; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { background: #23262E; border: 1px solid #343844; border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: 11px; color: #B8BECC; }
.stat-val { font-size: 14px; color: #FFF; }
.stat-diff { font-size: 13px; color: #B8BECC; font-weight: 600; }
.stat-diff.better { color: #8FE0B0; }
.stat-diff.worse { color: #FFB774; }
table.cmp { width: 100%; border-collapse: collapse; }
table.cmp th { text-align: left; font-size: 12px; font-weight: 600; color: #B8BECC; padding: 4px 8px; border-bottom: 1px solid #343844; }
table.cmp td { padding: 6px 8px; font-size: 13px; color: #FFF; border-bottom: 1px solid #2A2D35; }
table.cmp td.better { color: #8FE0B0; font-weight: 600; }
table.cmp td.worse { color: #FFB774; font-weight: 600; }
.cmp-lines { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.5; color: #E3E6EC; }
.cmp-warn { color: #FFB774; }
.verdict { font-size: 13px; font-weight: 600; color: #FFD9AE; }
.assume summary { cursor: pointer; font-size: 12px; color: #9DA3B2; }
.assume p { margin: 6px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #9DA3B2; line-height: 1.6; }
/* 다른 선택지 */
.alts { display: flex; gap: 10px; align-items: stretch; }
.alt { flex: 1 1 0; min-width: 0; text-align: left; background: #FFF; border: 1px solid #DDE1E7; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; color: #16181D; }
.alt:hover { border-color: #8CA0E8; }
.alt-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #4A5060; }
.alt-top .mono { color: #16181D; font-size: 13px; }
.alt-title { font-size: 15px; font-weight: 600; }
.alt-note { font-size: 12px; color: #8A4300; }
/* 팝업 */
dialog { border: 0; border-radius: 14px; padding: 20px 22px; width: min(1180px, 94vw); max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); color: #16181D; }
dialog#dlg-changes, dialog#dlg-review { width: min(720px, 94vw); }
dialog::backdrop { background: rgba(15, 17, 21, .45); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.dlg-head h2 { margin: 0; font-size: 18px; }
.close { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #DDE1E7; background: #FFF; cursor: pointer; font-size: 14px; }
.ev-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ev-bar p { margin: 8px 0 0; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #16181D; cursor: pointer; white-space: nowrap; }
.check input { width: 16px; height: 16px; margin: 0; }
.tag-legacy { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; color: #FFD9AE; border: 1px solid #FFB774; border-radius: 999px; padding: 0 6px; vertical-align: middle; }
.table-box { overflow-x: auto; margin-top: 8px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: #4A5060; padding: 8px 10px; border-bottom: 1px solid #DDE1E7; white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid #EDEFF3; font-size: 13px; white-space: nowrap; }
td.note-cell { white-space: normal; font-size: 12px; color: #4A5060; min-width: 160px; }
td.num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
td.num.hot { color: #9A3F00; font-weight: 600; }
tr.used { background: #EEF2FF; }
tr.off { background: #F7F8FA; }
.name { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.tag { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px; }
.tag.used { color: #1D3BB3; background: #DCE4FF; }
.tag.off { color: #4A5060; background: #E4E7EC; }
.barcell { display: flex; align-items: center; gap: 8px; }
.bar { width: 90px; height: 7px; background: #E4E7EC; border-radius: 4px; overflow: hidden; }
.bar > i { display: block; height: 7px; border-radius: 4px; background: #8CA0E8; }
tr.used .bar > i { background: #2449D8; }
.foot { margin: 10px 0 0; font-size: 12px; color: #4A5060; line-height: 1.6; }
.list { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.list .when { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #4A5060; margin-right: 8px; }
.list code { font-family: 'IBM Plex Mono', monospace; font-size: 12px; background: #FFEBD6; color: #6B3400; padding: 2px 6px; border-radius: 6px; word-break: break-all; }
/* 좁은 화면: 세로로 쌓고 스크롤 허용 */
@media (max-width: 960px) {
.layout { grid-template-columns: 1fr; }
.steps { flex-direction: column; }
.arrow { transform: rotate(90deg); }
.alts { flex-direction: column; }
.stats { grid-template-columns: 1fr; }
.rec-head { flex-direction: column; }
.cost { align-items: flex-start; text-align: left; }
}
#effort { gap: 4px; }
#effort .chip { padding: 0 8px; }
.ghost.primary { border-color: #2449D8; color: #1D3BB3; background: #EEF2FF; }
table.ov td { white-space: normal; vertical-align: top; min-width: 170px; }
table.ov td.ov-name { min-width: 150px; font-weight: 600; }
.ov-title { font-size: 13px; font-weight: 600; line-height: 1.4; }
.ov-meta { font-size: 11px; color: #4A5060; margin-top: 2px; }
.linkish { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: #2449D8; cursor: pointer; text-align: left; }
.linkish:hover { text-decoration: underline; }
.frontier { display: flex; flex-direction: column; gap: 6px; }
.fr-head { margin: 0; font-size: 12px; color: #9DA3B2; }
table.fr { width: 100%; border-collapse: collapse; }
table.fr td { padding: 3px 8px; font-size: 12px; color: #E3E6EC; border-bottom: 1px solid #2A2D35; white-space: nowrap; }
table.fr td:nth-child(3) { white-space: normal; width: 100%; }
table.fr tr.pick td { color: #FFF; font-weight: 600; }
.fr-eff { margin-left: 8px; font-weight: 400; color: #9DA3B2; font-size: 11px; }
.fr-tag { display: inline-block; margin-left: 4px; font-size: 11px; color: #16181D; background: #FFB774; border-radius: 999px; padding: 0 7px; }
.credit { font-size: 11px; color: #6A7080; line-height: 1.4; border-top: 1px solid #EDEFF3; padding-top: 6px; }
.credit a { color: #4A5060; }
/* 작업별 예시 페이지 (guide.html) — 이 페이지는 스크롤 허용 */
a.ghost, a.chip { text-decoration: none; }
a.chip { color: #1B1E24; }
.guide { gap: 16px; }
.g-intro { background: #FFF; border: 1px solid #DDE1E7; border-radius: 14px; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.g-intro p { margin: 0; line-height: 1.6; }
.g-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.g-card { background: #FFF; border: 1px solid #DDE1E7; border-radius: 14px; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.g-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.g-head h2 { margin: 0; font-size: 18px; }
.g-head p { margin: 4px 0 0; }
.g-head .ghost { flex-shrink: 0; }
.g-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.g-ex h3 { margin: 0 0 6px; font-size: 13px; color: #4A5060; }
.g-ex ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; }
.g-tip { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #F3F5F9; font-size: 13px; line-height: 1.5; color: #2A2F3A; }
.g-card .table-box { margin-top: 0; }
.g-card table.ov td { min-width: 150px; }
.g-card table.ov td.ov-name a { font-weight: 600; color: #2449D8; text-decoration: none; }
.g-credit { border-top: 0; padding: 0 4px 12px; }
@media (max-width: 960px) {
.g-body { grid-template-columns: 1fr; }
.g-head { flex-direction: column; }
}
/* 작업 칩은 10개라 조금 작게 (한 화면 유지) */
#task { gap: 4px; }
#task .chip { min-height: 28px; padding: 0 8px; font-size: 12px; }
.rec-empty h2 { font-size: 18px; line-height: 1.5; }
.rec-empty p { margin: 6px 0 0; color: #B8BECC; font-size: 13px; }
.chips.sub:has(.plan-line) { flex-direction: column; align-items: stretch; gap: 4px; }
.plan-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.plan-group { font-size: 11px; font-weight: 600; color: #6A7080; width: 26px; flex-shrink: 0; }
/* 서비스 이름·부제 */
.brand-name { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: #16181D; text-decoration: none; }
a.brand-name:hover { color: #2449D8; }
.tagline { font-size: 13px; color: #4A5060; }
/* 소개 팝업 */
dialog#dlg-about { width: min(680px, 94vw); }
.about { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.65; }
.about-lead { margin: 4px 0 6px; font-size: 15px; }
.about h3 { margin: 10px 0 2px; font-size: 14px; color: #2449D8; }
.about ol, .about ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.about p { margin: 0; }
.about-foot { margin-top: 10px !important; font-size: 12px; color: #6A7080; }
.about-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.ubar { width: 132px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; margin: 2px 0 1px; }
.ubar span { display: block; height: 100%; background: #FFB774; border-radius: 3px; }
@media (max-width: 760px) { .ubar { width: 100%; max-width: 220px; } }
.prio-desc { margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: #B8BECC; }