@font-face {
  font-family: "CPE Noto Sans KR";
  src: url("../fonts/NotoSansKR-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CPE Noto Sans KR";
  src: url("../fonts/NotoSansKR-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
    --ink: #18212f; --muted: #647184; --line: #dfe5eb; --paper: #ffffff;
    --canvas: #f3f6f8; --navy: #102a43; --navy-2: #173f5f; --teal: #087f8c;
    --cyan: #1ca6b7; --green: #198754; --amber: #b76e00; --red: #b42318;
    --blue-soft: #e9f5f7; --green-soft: #eaf7ef; --amber-soft: #fff6df; --red-soft: #fff0ee;
    --radius: 12px; --shadow: 0 8px 28px rgba(16, 42, 67, .08);
}
* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--canvas); }
body { margin: 0; min-height: 100vh; font-size: 15px; line-height: 1.5; }
[dir="rtl"] { text-align: start; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--navy-2); }
button, input, select, textarea { font: inherit; }
button, .button { cursor: pointer; }
.shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 16px; background: linear-gradient(180deg, #0c263d, #102f49); color: #dce8ef; display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; gap: 11px; align-items: center; padding: 0 8px 22px; color: #fff; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #22b8c7, #0b7a85); font-weight: 800; letter-spacing: -.04em; }
.brand strong { display: block; font-size: 17px; letter-spacing: -.02em; }
.brand small { display: block; color: #9db4c3; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.workspace-card { padding: 12px; margin-bottom: 18px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.05); }
.workspace-card small { display: block; color: #9db4c3; font-size: 11px; text-transform: uppercase; }
.workspace-card strong { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-label { padding: 10px 11px 5px; color: #86a1b2; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav { display: grid; gap: 3px; }
.nav a { display: flex; gap: 10px; align-items: center; min-height: 40px; padding: 9px 11px; border-radius: 8px; color: #cbdbe4; font-weight: 600; }
.nav a:hover, .nav a.active { background: rgba(46, 181, 194, .16); color: #fff; }
.nav-icon { width: 18px; text-align: center; opacity: .85; }
.sidebar-footer { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-footer strong, .sidebar-footer small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer small { color: #9db4c3; }
.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; justify-content: space-between; align-items: center; min-height: 64px; padding: 10px 30px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
.topbar-left { display: flex; gap: 12px; align-items: center; }
.mobile-toggle { display: none; border: 0; background: none; font-size: 22px; }
.breadcrumbs { color: var(--muted); font-size: 13px; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.locale-switcher { display: flex; gap: 6px; align-items: center; margin: 0; }
.locale-switcher select { width: auto; min-width: 115px; min-height: 32px; padding-block: 5px; }
.guest-language { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.language-options { display: flex; flex-wrap: wrap; gap: 10px 24px; }
fieldset { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 8px; }
legend { padding-inline: 5px; color: #39485a; font-size: 12px; font-weight: 800; }
[dir="auto"] { unicode-bidi: plaintext; }
.content { width: min(1540px, 100%); margin: 0 auto; padding: 28px 30px 70px; }
.page-head { display: flex; justify-content: space-between; gap: 22px; align-items: flex-start; margin-bottom: 24px; }
.page-head h1 { margin: 0; font-size: clamp(25px, 3vw, 34px); line-height: 1.15; letter-spacing: -.035em; }
.page-head p { max-width: 760px; margin: 7px 0 0; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 39px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--navy); font-weight: 700; line-height: 1; box-shadow: 0 1px 2px rgba(16,42,67,.04); }
.button:hover { border-color: #aebbc5; color: var(--navy); background: #f8fafb; }
.button.primary { border-color: var(--teal); background: var(--teal); color: #fff; }
.button.primary:hover { background: #076c76; color: #fff; }
.button.danger { border-color: #f3c8c3; color: var(--red); background: #fff; }
.button.small { min-height: 32px; padding: 6px 10px; font-size: 13px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.card-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.card-head h2, .card-head h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.card-body { padding: 20px; }
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.stat { padding: 18px; }
.stat .label { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.stat .value { margin-top: 7px; font-size: 28px; font-weight: 800; letter-spacing: -.04em; color: var(--navy); }
.stat .context { margin-top: 3px; color: var(--muted); font-size: 12px; }
.stat .value.compact { font-size: 20px; line-height: 1.15; text-transform: capitalize; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); background: #f8fafb; font-size: 11px; text-align: left; text-transform: uppercase; letter-spacing: .07em; }
html[dir="rtl"] th { text-align: right; }
td { padding: 13px 14px; border-bottom: 1px solid #edf1f4; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfd; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: #eef2f5; color: #445264; font-size: 11px; font-weight: 800; text-transform: capitalize; white-space: nowrap; }
.badge.on_track, .badge.active, .badge.done, .badge.approved, .badge.closed { color: #12643b; background: var(--green-soft); }
.badge.at_risk, .badge.high, .badge.on_hold, .badge.monitoring, .badge.submitted { color: #875307; background: var(--amber-soft); }
.badge.off_track, .badge.critical, .badge.blocked, .badge.rejected { color: var(--red); background: var(--red-soft); }
.badge.in_progress, .badge.ready, .badge.proposed, .badge.under_review { color: #066b78; background: var(--blue-soft); }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: #8795a4; }
.on_track .health-dot { background: var(--green); } .at_risk .health-dot { background: #e29a18; } .off_track .health-dot { background: var(--red); }
.progress { width: 100%; height: 7px; overflow: hidden; border-radius: 99px; background: #e8edf1; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--cyan)); }
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.field { grid-column: span 6; }
.field.full { grid-column: 1 / -1; }
.field.third { grid-column: span 4; }
.field.quarter { grid-column: span 3; }
label { display: block; margin-bottom: 6px; color: #39485a; font-size: 12px; font-weight: 800; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea { width: 100%; min-height: 41px; padding: 9px 11px; border: 1px solid #cbd5dd; border-radius: 8px; background: #fff; color: var(--ink); }
textarea { min-height: 105px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(28,166,183,.15); border-color: var(--cyan); }
.help { margin-top: 5px; color: var(--muted); font-size: 11px; }
.error { margin-top: 5px; color: var(--red); font-size: 12px; font-weight: 600; }
.alert { margin-bottom: 18px; padding: 12px 15px; border: 1px solid #b9dedf; border-radius: 9px; background: #eefafa; color: #075d66; }
.alert.error-alert { border-color: #f1c8c4; background: var(--red-soft); color: var(--red); }
.filterbar { display: grid; grid-template-columns: 2fr repeat(3, 1fr) auto; gap: 10px; padding: 14px; margin-bottom: 18px; }
.filterbar input, .filterbar select { min-height: 38px; }
.project-nav { display: flex; gap: 4px; overflow-x: auto; padding: 5px; margin: -8px 0 22px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.project-nav a { padding: 8px 12px; border-radius: 7px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.project-nav a.active, .project-nav a:hover { color: var(--navy); background: #edf5f6; }
.detail-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 22px; }
.detail-list dt { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.detail-list dd { margin: 3px 0 0; font-weight: 650; }
.empty { padding: 42px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; margin-bottom: 5px; color: var(--navy); font-size: 17px; }
.list { display: grid; gap: 10px; }
.list-item { padding: 13px 0; border-bottom: 1px solid #edf1f4; }
.list-item:last-child { border-bottom: 0; }
.list-item-head { display: flex; justify-content: space-between; gap: 12px; }
.list-item p { margin: 4px 0 0; color: var(--muted); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-weight: 700; }
.tabs button.active { border-color: var(--teal); background: var(--blue-soft); color: var(--navy); }
[data-tab-panel] { display: none; } [data-tab-panel].active { display: block; }
.risk-score { display: inline-grid; place-items: center; min-width: 34px; height: 30px; border-radius: 7px; color: #fff; background: var(--amber); font-weight: 800; }
.risk-score.high { background: var(--red); }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.guest { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .85fr) 1.15fr; background: #fff; }
.guest-main { display: grid; place-items: center; padding: 40px; }
.guest-panel { width: min(470px, 100%); }
.guest-panel h1 { margin: 20px 0 8px; font-size: 31px; letter-spacing: -.04em; }
.guest-aside { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(38px, 8vw, 90px); color: #fff; background: radial-gradient(circle at 20% 20%, #168e9a 0, transparent 34%), linear-gradient(145deg, #102a43, #071d2d); }
.guest-aside h2 { max-width: 720px; margin: 0; font-size: clamp(34px, 5vw, 65px); line-height: 1.03; letter-spacing: -.055em; }
.guest-aside p { max-width: 660px; color: #bad0dd; font-size: 18px; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin: 13px 0; font-size: 13px; }
.checkbox { display: flex; gap: 8px; align-items: center; }
.checkbox input { width: auto; }
.welcome { min-height: 100vh; color: #fff; background: radial-gradient(circle at 70% 20%, rgba(25,180,193,.28), transparent 32%), linear-gradient(145deg, #071d2d, #123b58); }
.welcome-nav { display: flex; justify-content: space-between; align-items: center; width: min(1200px, calc(100% - 48px)); margin: auto; padding: 24px 0; }
.welcome-hero { width: min(1200px, calc(100% - 48px)); margin: auto; padding: 90px 0 130px; }
.welcome-hero h1 { max-width: 980px; margin: 0; font-size: clamp(48px, 8vw, 96px); line-height: .96; letter-spacing: -.065em; }
.welcome-hero p { max-width: 760px; margin: 30px 0; color: #c4d8e3; font-size: 20px; }
.welcome .button { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.09); }
.welcome .button.primary { border-color: #22b8c7; background: #1595a1; }
.pagination { display: flex; justify-content: space-between; align-items: center; padding: 14px; color: var(--muted); }
.source-content { padding: 14px; border-inline-start: 4px solid var(--teal); border-radius: 7px; background: var(--blue-soft); white-space: pre-wrap; }
.translation-block { padding: 16px; border: 1px solid var(--line); border-radius: 9px; }
.method-ribbon { display: grid; grid-template-columns: repeat(10, minmax(100px, 1fr)); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.method-ribbon span { min-width: 110px; padding: 13px 9px; border-inline-end: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 750; line-height: 1.25; }
.method-ribbon b { display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 7px; border-radius: 50%; color: #fff; background: var(--teal); }
.case-stage-list { display: grid; gap: 18px; }
.case-stage { overflow: hidden; }
.case-stage.current { border-color: #5ebdc5; box-shadow: 0 0 0 3px rgba(28,166,183,.10), var(--shadow); }
.case-stage > .progress { border-radius: 0; }
.stage-heading { display: flex; gap: 13px; align-items: flex-start; }
.stage-heading h2, .stage-heading p { margin: 2px 0; }
.stage-heading p { color: var(--muted); font-size: 13px; }
.stage-number { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 850; }
.case-tasks { padding: 8px 20px 18px; }
.task-row { border-bottom: 1px solid #edf1f4; }
.task-row summary { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; cursor: pointer; }
.task-row summary strong, .task-row summary small { display: block; }
.task-row summary small { margin-top: 3px; color: var(--muted); }
.task-check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #edf1f4; color: var(--muted); font-weight: 800; }
.task-check.complete { background: var(--green-soft); color: var(--green); }
.task-check.in_progress { background: var(--blue-soft); color: var(--teal); }
.task-form { padding: 14px; margin-bottom: 12px; border-radius: 9px; background: #f8fafb; }
.gate-panel { padding: 20px; border-top: 1px solid var(--line); background: #f8fafb; }
.advance-form { display: flex; gap: 10px; margin-top: 16px; }
.advance-form input { flex: 1; }
.workshop-clock { position: sticky; top: 64px; z-index: 10; display: flex; gap: 20px; align-items: center; padding: 12px 16px; border-radius: 9px; background: var(--navy); color: #fff; box-shadow: var(--shadow); }
.workshop-clock span { color: #c8dbe5; font-size: 13px; }
.timeline { display: grid; gap: 0; }
.timeline > div { display: grid; grid-template-columns: 60px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid #edf1f4; }
.timeline time { color: var(--teal); font-weight: 800; }
.timeline strong, .timeline small { display: block; }
.timeline small { color: var(--muted); }
.workshop-board { display: grid; gap: 18px; }
.team-panel { padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfd; }
.team-panel .actions select { flex: 1; width: auto; }
html:lang(oj) { font-family: "CPE Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; }
html:lang(oj-Latn) { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.section-gap { margin-top: 20px; }
.metrics-grid { margin-top: 20px; }
.reference-banner { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border: 1px solid #addbe0; border-inline-start: 5px solid var(--teal); border-radius: 9px; color: #164e55; background: #edf9fa; }
.reference-banner strong { flex: 0 0 auto; }
.disclosure > summary, .inline-disclosure > summary { padding: 15px 18px; cursor: pointer; color: var(--navy); font-weight: 800; }
.disclosure[open] > summary, .inline-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.inline-disclosure { margin-top: 16px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfd; }
.inline-disclosure form { padding: 16px; }
.workbook-wrap { max-height: 68vh; overflow: auto; }
.workbook { min-width: 1420px; font-size: 13px; }
.workbook thead { position: sticky; top: 0; z-index: 4; }
.workbook th { position: sticky; top: 0; z-index: 4; }
.workbook td { padding: 4px; background: #fff; }
.workbook tbody tr.is-dirty td { background: #fff9e8; }
.workbook input, .workbook select { min-width: 132px; min-height: 35px; padding: 5px 7px; border-color: transparent; border-radius: 4px; background: transparent; }
.workbook input:focus, .workbook select:focus { border-color: var(--cyan); background: #fff; }
.workbook input:disabled, .workbook select:disabled { color: inherit; opacity: 1; -webkit-text-fill-color: currentColor; }
.workbook td:nth-child(1), .workbook th:nth-child(1) { position: sticky; left: 0; z-index: 3; min-width: 145px; background: #f8fafb; }
.workbook td:nth-child(2), .workbook th:nth-child(2) { min-width: 300px; }
.strategy-list, .decision-list { display: grid; gap: 20px; }
.strategy-goal h2, .strategy-goal h3, .card-head h2 { margin: 0; }
.objective { padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfd; }
.objective-head { display: flex; justify-content: space-between; gap: 14px; }
.objective h3 { margin: 3px 0 10px; font-size: 15px; }
.objective ul { display: grid; gap: 7px; padding: 0; list-style: none; }
.objective li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid #e9eef2; }
.objective li small { color: var(--muted); white-space: nowrap; }
.record-boundary { display: flex; gap: 7px; margin-top: 14px; }
.record-boundary span, .status-count { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: #eef2f5; color: var(--muted); font-size: 11px; font-weight: 700; }
.observation-list { display: grid; gap: 7px; margin-top: 15px; }
.observation-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 7px; background: #f3f7f8; }
.observation-list span { color: var(--muted); font-size: 12px; }
.recommendation { padding: 14px; border-inline-start: 4px solid var(--amber); border-radius: 7px; background: var(--amber-soft); }
.recommendation strong, .recommendation span { display: block; }
.decision-event { padding: 12px 0; border-bottom: 1px solid var(--line); }
.decision-event > span { float: right; color: var(--muted); font-size: 12px; }
.status-count { margin: 2px; }
.status-count.success { color: var(--green); background: var(--green-soft); }
.status-count.warning { color: var(--amber); background: var(--amber-soft); }
.status-count.danger { color: var(--red); background: var(--red-soft); }
.badge.reference { color: #075d66; background: var(--blue-soft); }
.badge.critical { color: var(--red); background: var(--red-soft); }
.token-banner { display: grid; margin-bottom: 20px; }
.token-banner code { display: block; overflow-wrap: anywhere; padding: 10px; border-radius: 6px; color: #fff; background: var(--navy); user-select: all; }
@media (max-width: 1050px) { .grid.four { grid-template-columns: repeat(2,1fr); } .grid.three { grid-template-columns: repeat(2,1fr); } .filterbar { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 820px) {
    .shell { grid-template-columns: 1fr; } .sidebar { position: fixed; inset-inline-start: -270px; width: 250px; transition: inset-inline-start .2s; } body.sidebar-open .sidebar { inset-inline-start: 0; }
    .mobile-toggle { display: block; } .topbar { padding: 10px 16px; } .content { padding: 22px 16px 55px; }
    .page-head { display: grid; } .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; } .span-2, .span-3 { grid-column: auto; }
    .field, .field.third, .field.quarter { grid-column: 1 / -1; } .guest { grid-template-columns: 1fr; } .guest-aside { display: none; }
    .workshop-clock { position: static; flex-wrap: wrap; }
    .task-row summary { grid-template-columns: 28px 1fr; }
    .task-row summary .badge { grid-column: 2; justify-self: start; }
    .advance-form { display: grid; }
}
@media (max-width: 620px) { .top-actions .locale-switcher .button { display: none; } .top-actions .locale-switcher select { min-width: 92px; } }
@media print { .sidebar, .topbar, .actions, .project-nav, .tabs, .disclosure { display: none !important; } .shell { display: block; } .content { padding: 0; } .card { box-shadow: none; break-inside: avoid; } }