:root {
  color-scheme: light;
  --canvas: #f3f6f8;
  --navy: #17324d;
  --teal: #087f8c;
  --orange: #e76828;
  --ink: #253d4c;
  --muted: #586b79;
  --line: #d5e0e6;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 15px/1.65 "Malgun Gothic", "맑은 고딕", "Nanum Gothic", "나눔고딕", sans-serif; }
a { color: var(--teal); text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 10; top: -100px; left: 15px; background: white; padding: 10px 20px; }
.skip-link:focus { top: 10px; }
.site-header { background: var(--navy); color: white; }
.header-inner { max-width: 1320px; margin: auto; min-height: 78px; padding: 16px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 7px; color: white; text-decoration: none; font-size: 20px; letter-spacing: -.7px; }
.demo-badge { margin-left: 6px; border: 1px solid #8097a9; border-radius: 3px; padding: 1px 8px; font-size: 11px; font-weight: 500; letter-spacing: 0; }
nav { display: flex; gap: 26px; font-size: 14px; }
nav a { color: #dbe5ed; text-decoration: none; padding: 7px 0; }
nav a[aria-current] { color: white; border-bottom: 2px solid #59c0c7; }
.demo-strip { border-bottom: 1px solid var(--line); background: #e8eef2; font-size: 12px; color: #455d70; }
.demo-strip > div { max-width: 1320px; padding: 9px 34px; margin: auto; }
.main-wrap { max-width: 1320px; padding: 32px 34px 45px; margin: auto; }
.page-heading { margin-bottom: 27px; }
h1, h2, h3, p { margin-top: 0; }
h1 { color: var(--navy); font-size: 27px; font-weight: 700; line-height: 1.4; letter-spacing: -1px; margin-bottom: 8px; }
.page-heading p { color: var(--muted); margin: 0; font-size: 14px; }
h2 { color: var(--navy); font-size: 17px; letter-spacing: -.4px; line-height: 1.5; margin: 0; }
.heading-with-role { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.current-role { border-left: 3px solid var(--teal); padding-left: 13px; flex-shrink: 0; }
.current-role strong, .current-role span { display: block; }
.current-role span { font-size: 12px; color: var(--muted); }
.home-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; max-width: 1040px; }
.panel { background: white; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.panel-heading { padding: 17px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-body { padding: 22px; }
.role-select-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.role-select { width: 100%; min-height: 46px; padding: 8px 11px; border: 1px solid #b8c8d2; border-radius: 3px; color: var(--ink); background: white; font-size: 14px; }
.role-range { display: grid; grid-template-columns: auto 1fr; gap: 9px 17px; padding: 19px 0 23px; font-size: 13px; }
.role-range strong { font-weight: 600; }
.role-range span { color: var(--muted); }
.button { border-radius: 3px; border: 1px solid transparent; padding: 11px 20px; cursor: pointer; font-weight: 700; font-size: 14px; }
.primary { background: var(--teal); color: white; }
.primary:hover { background: #066a75; }
.role-panel .button { width: 100%; }
.field-help { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 8px 0 0; }
.intro-note { padding-top: 17px; }
.workflow-list { padding: 15px 0 0 23px; margin: 0; }
.workflow-list li { padding-left: 7px; margin-bottom: 22px; }
.workflow-list li::marker { color: var(--teal); font-weight: 700; }
.workflow-list strong { font-size: 15px; }
.workflow-list p { font-size: 14px; color: var(--muted); margin: 5px 0 0; max-width: 38em; }
.scope-note { border-top: 1px solid var(--line); padding-top: 19px; margin-top: 28px; font-size: 13px; }
.scope-note p { color: var(--muted); margin: 5px 0 0; }
.records-layout { display: grid; grid-template-columns: minmax(300px, 355px) minmax(0, 1fr); align-items: start; gap: 24px; }
.section-tag, .count-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.section-tag { background: #edf2f5; padding: 2px 8px; border-radius: 3px; }
.record-form { display: flex; flex-direction: column; }
.record-form > label { font-size: 13px; font-weight: 700; margin-top: 18px; margin-bottom: 6px; }
.record-form > label:first-of-type { margin-top: 0; }
.label-hint { color: var(--muted); font-size: 11px; font-weight: 400; float: right; }
.record-form input, .record-form select { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid #b8c8d2; border-radius: 3px; color: var(--ink); background: white; font-size: 13px; }
.record-form input::placeholder { color: #6b7d8a; font-size: 12px; }
.verification-note { background: #f3f6f8; font-size: 12px; padding: 10px 12px; margin: 21px 0 14px; }
.verification-note strong { font-weight: 700; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
th { color: var(--muted); background: #f6f9fa; font-size: 12px; font-weight: 600; padding: 12px 17px; white-space: nowrap; border-bottom: 1px solid var(--line); }
td { padding: 18px 17px; border-bottom: 1px solid #e3eaee; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td > strong { font-weight: 600; }
.cell-secondary { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; white-space: nowrap; }
.score { color: var(--navy); font-size: 22px; line-height: 1.2; white-space: nowrap; }
.score small { font-size: 11px; font-weight: 400; margin-left: 2px; }
.pain-label { display: block; color: #9d3d15; font-size: 11px; line-height: 1.5; margin-top: 5px; }
.source-label { display: block; overflow-wrap: anywhere; max-width: 240px; }
.status-label { display: inline-block; color: #536572; font-size: 11px; padding: 1px 6px; background: #edf1f4; border-radius: 2px; margin-top: 5px; }
.status-label.confirmed { color: #086873; background: #e4f3f3; }
.table-note { color: var(--muted); font-size: 12px; padding: 13px 20px; border-top: 1px solid var(--line); }
.empty-state { padding: 65px 28px 69px; text-align: center; }
.empty-state h3 { font-size: 16px; margin-bottom: 9px; color: var(--navy); }
.empty-state p { color: var(--muted); font-size: 13px; margin-bottom: 0; }
.empty-state .field-help { font-size: 12px; }
.error-box { border: 1px solid #e2b7a2; border-left: 4px solid var(--orange); background: #fff7f2; padding: 14px 18px; margin-bottom: 23px; color: #823712; font-size: 14px; }
.stage-note { margin-top: 24px; padding: 18px 21px; border-left: 3px solid #98abb8; background: #eaf0f4; font-size: 12px; }
.stage-note strong { color: var(--navy); }
.stage-note p { color: var(--muted); margin: 4px 0 0; }
.site-footer { max-width: 1252px; margin: 0 auto; border-top: 1px solid var(--line); padding: 18px 0 28px; color: var(--muted); font-size: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.button { display: inline-block; text-decoration: none; text-align: center; }
.secondary { color: var(--navy); border-color: #adc2cf; background: white; }
.secondary:hover { background: #edf4f6; }
.management-entry { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 24px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; padding: 18px 20px; margin-bottom: 22px; background: #e7eff3; border-left: 3px solid var(--teal); }
.filter-bar label, .compact-form label, .form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; }
.filter-bar input, .filter-bar select, .compact-form input, .compact-form select, .compact-form textarea, .form-grid input, .form-grid select, .form-grid textarea { min-height: 40px; border: 1px solid #b8c8d2; border-radius: 3px; color: var(--ink); background: white; padding: 8px 10px; font-size: 13px; width: 100%; }
.filter-bar .button { min-height: 40px; padding: 8px 16px; }
.metric-line { display: flex; flex-wrap: wrap; padding: 12px 22px; gap: 24px; border-bottom: 1px solid var(--line); background: #fbfdfe; }
.metric-line > div { display: flex; align-items: baseline; gap: 7px; }
.metric-line strong { font-size: 22px; color: var(--navy); }
.metric-line span { color: var(--muted); font-size: 12px; }
.overview-table { min-width: 890px; }
.overview-table td { padding-top: 15px; padding-bottom: 15px; }
.overview-table .reason-cell { min-width: 220px; max-width: 300px; font-size: 12px; }
.level-badge { display: inline-block; padding: 4px 9px; color: #465e70; background: #edf1f4; border-left: 3px solid #94a6b4; font-size: 12px; font-weight: 700; white-space: nowrap; }
.level-conditional_avoid { color: #8d321b; background: #fff0e8; border-color: #d95322; }
.level-attention { color: #7e530d; background: #fff6dc; border-color: #d29b2a; }
.level-no_signal { color: #11656a; background: #e9f4f4; border-color: #268c91; }
.level-tracking { color: #315d89; background: #edf4fb; border-color: #7199bd; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.compact-form { display: grid; gap: 17px; }
.compact-form textarea, .form-grid textarea { resize: vertical; min-height: 90px; }
.prepare-form { margin-top: 22px; }
.section-gap { margin-top: 24px; }
.detail-list { display: grid; grid-template-columns: minmax(100px,180px) 1fr; gap: 12px 20px; margin: 0; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 22px; }
.form-grid .button { justify-self: start; align-self: end; }
.full-width { grid-column: 1/-1; }
.data-entry-stack { display: grid; gap: 16px; margin: 24px 0; }
details.panel > summary { padding: 18px 22px; font-weight: 700; color: var(--navy); cursor: pointer; }
details.panel[open] > summary { border-bottom: 1px solid var(--line); }
details > summary { cursor: pointer; color: var(--teal); font-size: 14px; }
details .form-grid { margin-top: 12px; }
.inline-empty { color: var(--muted); padding: 24px; margin: 0; font-size: 13px; }
.state-values { display: grid; grid-template-columns: auto auto; gap: 4px 16px; margin: 10px 0; font-size: 12px; min-width: 220px; }
.state-values dt { color: var(--muted); }
.state-values dd { margin: 0; }
.motion-select { border: 1px solid var(--line); margin: 0; padding: 14px 16px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px 16px; }
.motion-select legend { font-size: 12px; font-weight: 700; color: var(--navy); padding: 0 6px; }
.motion-select label { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.motion-select input { min-height: auto; width: 16px; height: 16px; margin: 0; accent-color: var(--teal); }
.record-id { display: block; overflow-wrap: anywhere; color: #71818e; margin-top: 5px; font-size: 10px; }
.finding { padding: 24px; border-bottom: 1px solid var(--line); }
.finding > p { max-width: 78ch; margin: 15px 0; }
.finding-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.finding-heading > strong { font-size: 12px; color: var(--muted); }
.finding-title { margin: 0; color: var(--navy); font-size: 16px; line-height: 1.5; }
.finding-rule-id { font-size: 11px; color: var(--muted); }
.finding-input-summary { margin: 15px 0; padding: 10px 13px; background: #f3f8fa; border-left: 3px solid #a9c6d1; font-size: 13px; }
.finding-input-summary p { margin: 0; }
.finding-input-summary p + p { margin-top: 7px; }
.finding-input-status { display: inline-block; margin-left: 12px; color: #3e6171; font-size: 12px; }
.reason-grid { display: grid; grid-template-columns: 130px 1fr; gap: 12px 22px; margin: 0; font-size: 13px; }
.reason-grid dt { color: var(--muted); }
.reason-grid dd { margin: 0; overflow-wrap: anywhere; }
.reason-grid code { font-size: 11px; color: #527080; }
.linked-input { padding: 10px 12px; border-left: 2px solid #b9d1d9; background: #f5f9fa; }
.linked-input + .linked-input { margin-top: 10px; }
.source-entry + .source-entry { margin-top: 12px; }
.issue-list { padding: 20px 24px; background: #f2f5f7; }
.issue-list h3 { font-size: 14px; }
.issue-list ul { margin-bottom: 0; font-size: 13px; }
.care-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; align-items: start; }
.care-list { display: grid; gap: 20px; }
.care-context { margin-bottom: 20px; }
.care-context .panel-body > p { margin-bottom: 12px; }
.care-context-links, .care-plan-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
.care-scope-note { margin: 0 0 16px; }
.care-status-note { margin: 0 0 20px; color: var(--muted); font-size: 12px; max-width: 85ch; }
.care-plan { scroll-margin-top: 20px; }
.care-plan:target { border-color: var(--teal); box-shadow: 0 0 0 2px #087f8c26; }
.care-plan-meta { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 18px 0; }
.care-plan-meta > div { min-width: 120px; }
.care-plan-meta dt { font-size: 12px; color: var(--muted); }
.care-plan-meta dd { margin: 2px 0 0; font-size: 14px; color: var(--navy); }
.care-plan-meta .next-check dd { font-weight: 700; }
.care-event-entry { margin: 22px 0; padding: 15px 18px; background: #edf5f6; border: 1px solid #bad1d7; border-left: 3px solid var(--teal); }
.care-event-entry > summary { font-weight: 700; }
.care-history-title { font-size: 14px; color: var(--navy); margin: 24px 0 0; }
.care-create > form { max-width: 760px; }
.recommendation-care { margin-bottom: 22px; }
.recommendation-care .care-status-note { margin: 18px 0 0; }
.recommendation-plan + .recommendation-plan { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 22px; }
.recommendation-plan-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.recommendation-plan .plan-text { margin-top: 12px; }
.reason-summary .demo-summary { margin: 0; border: 0; border-radius: 0; }
.reason-evidence { margin-top: 16px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.reason-evidence > .reason-grid { margin-top: 18px; }
.status-pill { display: inline-block; background: #e9f2f4; color: #28606b; padding: 3px 9px; font-size: 12px; white-space: nowrap; }
.plan-text { white-space: pre-wrap; max-width: 78ch; }
.event-timeline { list-style: none; padding: 0 0 0 15px; margin: 25px 0; border-left: 2px solid #bed4dc; }
.event-timeline li { padding: 0 0 18px 12px; font-size: 13px; }
.event-timeline li:last-child { padding-bottom: 0; }
.event-timeline p { margin: 6px 0 0; white-space: pre-wrap; }
.event-date { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.event-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.comparison-pair { display: grid; grid-template-columns: 1fr 1fr; }
.comparison-pair > div { padding: 24px; }
.comparison-pair > div + div { border-left: 1px solid var(--line); }
.comparison-pair .level-badge { margin: 12px 0; }
.comparison-pair p { margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.change-reason { padding: 18px 24px; background: #ecf4f5; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.change-reason strong { color: #11656a; font-size: 13px; }
.change-reason p { margin: 7px 0 0; font-size: 14px; }
.change-list { padding-left: 18px; margin-bottom: 0; font-size: 13px; }
.change-list span { display: block; }
.input-comparison { table-layout: fixed; }
.input-comparison th:first-child { width: 18%; }
.input-comparison th:nth-child(2), .input-comparison th:nth-child(3) { width: 27%; }
.input-comparison td { overflow-wrap: anywhere; }
.comparison-marker { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }
.comparison-marker.marked { color: #9d3d15; }
.unchanged-inputs { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); background: #f7fafb; }
.unchanged-inputs > summary { font-size: 13px; }
.unchanged-inputs .table-wrap { margin-top: 14px; }
.tracking-care + .tracking-care { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 1050px) {
  .header-inner { flex-wrap: wrap; gap: 8px; }
  nav { flex-wrap: wrap; gap: 10px 24px; }
  .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .header-inner { padding: 16px 22px; }
  .main-wrap { padding: 26px 22px 35px; }
  .demo-strip > div { padding-left: 22px; padding-right: 22px; }
  .home-layout { gap: 30px; }
  .records-layout { grid-template-columns: minmax(260px, 310px) minmax(0, 1fr); gap: 18px; }
  .heading-with-role { align-items: start; }
  .site-footer { margin: 0 22px; }
  th, td { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 680px) {
  .header-inner { flex-wrap: wrap; gap: 12px; padding: 16px 18px 12px; }
  .brand { font-size: 19px; }
  nav { width: 100%; gap: 25px; font-size: 12px; }
  nav a { padding: 0 0 5px; }
  .main-wrap { padding: 23px 16px 30px; }
  .demo-strip > div { padding: 8px 18px; font-size: 11px; }
  h1 { font-size: 23px; }
  .page-heading p { font-size: 13px; }
  .home-layout, .records-layout { grid-template-columns: 1fr; gap: 22px; }
  .support-grid, .form-grid, .care-layout { grid-template-columns: 1fr; }
  .motion-select { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .filter-bar { align-items: stretch; }
  .filter-bar label { flex: 1 1 150px; }
  .metric-line { gap: 12px 20px; }
  .reason-grid { grid-template-columns: 1fr; gap: 5px; }
  .reason-grid dd { margin-bottom: 12px; }
  .comparison-pair > div { padding: 18px; }
  .heading-with-role { display: block; }
  .current-role { margin-top: 16px; }
  .intro-note { padding: 3px 7px; }
  .empty-state { padding: 35px 22px; }
  .site-footer { margin: 0 16px; }
  table { min-width: 550px; }
}
.demo-summary { border-left: 3px solid var(--accent, #087f8c); }
.demo-summary > .panel-heading { flex-wrap: wrap; gap: 10px; }
.summary-label { font-size: 11px; color: var(--muted, #526d82); border: 1px solid #c9d9e2; padding: 5px 9px; border-radius: 3px; }
.summary-lead { font-size: 16px; line-height: 1.8; font-weight: 600; margin-top: 0; }
.summary-evidence { margin-top: 18px; }
.summary-evidence > summary, .summary-notes > summary { cursor: pointer; color: #087f8c; padding: 8px 0; }
.summary-list { list-style: none; padding: 0; margin: 8px 0 0; }
.summary-list > li { border-top: 1px solid #e2ebf0; padding: 12px 0; overflow-wrap: anywhere; }
.summary-list p { margin: 0 0 6px; line-height: 1.8; }
.summary-detail-link, .summary-care a { font-size: 12px; }
.summary-care { margin-top: 16px; }
.summary-care h3 { font-size: 14px; margin-bottom: 8px; }
.summary-notes { margin-top: 10px; font-size: 12px; line-height: 1.7; }