:root {
        color: #172033;
        background: #f5f8fb;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Pretendard, sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
      }

      button,
      input {
        font: inherit;
      }

      button {
        cursor: pointer;
      }

      .app {
        width: min(1440px, calc(100% - 32px));
        margin: 0 auto;
        padding: 32px 0 48px;
      }

      body.is-locked .app {
        display: none;
      }

      .login-screen {
        display: grid;
        min-height: 100vh;
        place-items: center;
        padding: 32px;
        background: linear-gradient(135deg, #eaf4f7 0%, #f6f8fb 44%, #eef4ed 100%);
      }

      body:not(.is-locked) .login-screen {
        display: none;
      }

      .login-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
        gap: 22px;
        width: min(1120px, 100%);
        align-items: stretch;
      }

      .login-copy,
      .login-card {
        border: 1px solid rgba(214, 226, 240, 0.92);
        border-radius: 30px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 28px 80px rgba(83, 111, 148, 0.16);
      }

      .login-copy {
        display: grid;
        align-content: center;
        min-height: 500px;
        padding: 42px;
        background:
          linear-gradient(rgba(20, 54, 75, 0.08) 1px, transparent 1px),
          linear-gradient(90deg, rgba(20, 54, 75, 0.08) 1px, transparent 1px),
          linear-gradient(135deg, #f8fbff, #edf7f2);
        background-size: 28px 28px, 28px 28px, auto;
      }

      .login-copy h1 {
        display: grid;
        gap: 4px;
        max-width: 660px;
        margin-bottom: 16px;
        color: #132033;
        font-size: clamp(40px, 5.4vw, 62px);
        line-height: 1.04;
        letter-spacing: 0;
        word-break: keep-all;
      }

      .login-copy h1 span {
        display: block;
      }

      .login-copy p:not(.eyebrow) {
        max-width: 560px;
        margin-bottom: 24px;
        color: #405168;
        font-size: 18px;
        font-weight: 800;
        line-height: 1.65;
      }

      .login-feature-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .login-feature-list span {
        border: 1px solid #dbe7f4;
        border-radius: 999px;
        padding: 9px 12px;
        background: rgba(255, 255, 255, 0.86);
        color: #225479;
        font-size: 14px;
        font-weight: 900;
      }

      .login-card {
        display: grid;
        align-content: center;
        padding: 34px;
      }

      .login-card-head {
        margin-bottom: 24px;
      }

      .login-card-head h2 {
        margin-bottom: 8px;
        color: #172033;
        font-size: clamp(28px, 5vw, 38px);
      }

      .login-card-head p:not(.eyebrow) {
        margin-bottom: 0;
        color: #64748b;
        font-weight: 800;
      }

      .login-form {
        display: grid;
        gap: 12px;
      }

      .login-form label {
        display: grid;
        gap: 8px;
        color: #405168;
        font-weight: 900;
      }

      .login-form input {
        min-height: 50px;
        border-radius: 16px;
        background: #f8fbff;
      }

      .login-form button {
        min-height: 52px;
        margin-top: 4px;
      }

      .login-error {
        min-height: 20px;
        margin: 0;
        color: #b42342;
        font-size: 14px;
        font-weight: 900;
      }

      .hero,
      .panel {
        border: 1px solid #dbe7f4;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 18px 50px rgba(83, 111, 148, 0.12);
      }

      .hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 28px;
        background: linear-gradient(135deg, #e7f7ff, #fbf0ff);
      }

      .eyebrow {
        margin: 0 0 8px;
        color: #287f76;
        font-size: 13px;
        font-weight: 900;
      }

      h1,
      h2,
      p {
        margin-top: 0;
      }

      h1 {
        margin-bottom: 8px;
        font-size: clamp(32px, 6vw, 56px);
        line-height: 1;
      }

      h2 {
        margin-bottom: 0;
        font-size: 20px;
      }

      .hero p,
      .section-head p,
      #message {
        margin-bottom: 0;
        color: #64748b;
        font-weight: 800;
      }

      .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        gap: 18px;
        margin-top: 18px;
      }

      .panel {
        padding: 20px;
      }

      .wide {
        grid-column: 1 / -1;
      }

      .section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
      }

      .stack {
        display: grid;
        gap: 10px;
      }

      .row {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
      }

      .row span {
        display: grid;
        height: 34px;
        place-items: center;
        border-radius: 50%;
        background: #eef6ff;
        color: #356dff;
        font-weight: 900;
      }

      input {
        width: 100%;
        border: 1px solid #d6e2f0;
        border-radius: 14px;
        padding: 12px 13px;
        background: #fbfdff;
        color: #172033;
        outline: none;
      }

      input:focus {
        border-color: #7bb7ff;
        box-shadow: 0 0 0 4px rgba(123, 183, 255, 0.22);
      }

      button {
        border: 0;
        border-radius: 999px;
        padding: 11px 15px;
        background: #e8f3ff;
        color: #225479;
        font-weight: 900;
      }

      .primary {
        background: #356dff;
        color: white;
      }

      .purple {
        background: #f2ecff;
        color: #5b3aa6;
      }

      .danger {
        background: #fff0f0;
        color: #b42342;
      }

      .board-wrap {
        overflow-x: auto;
        border-radius: 22px;
        padding: 16px;
        background: #f7fbff;
        overscroll-behavior-x: contain;
      }

      svg {
        display: block;
        width: 100%;
        min-width: 680px;
        height: auto;
      }

      .ladder-chip {
        display: -webkit-box;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: 1px solid #dbe7f4;
        border-radius: 14px;
        padding: 7px 8px;
        background: #ffffff;
        color: #172033;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.18;
        text-align: center;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .ladder-name-chip {
        box-shadow: 0 8px 18px rgba(83, 111, 148, 0.1);
      }

      .ladder-name-chip:hover {
        border-color: #9bc6ff;
        background: #eef7ff;
      }

      .ladder-result-chip {
        pointer-events: none;
        background: #f1fbf7;
        color: #16644f;
      }

      .vertical {
        stroke: #9eb0c8;
        stroke-linecap: round;
        stroke-width: 6;
      }

      .rung {
        stroke: #b6c4d8;
        stroke-linecap: round;
        stroke-width: 6;
      }

      .all-path {
        fill: none;
        opacity: 0.22;
        stroke: #7c8cff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 8;
      }

      .active-path {
        fill: none;
        stroke: #ff5f6d;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 10;
        filter: drop-shadow(0 0 8px rgba(255, 95, 109, 0.45));
        animation: drawPath var(--path-duration, 2.2s) ease forwards;
      }

      .active-path.is-complete {
        stroke-dashoffset: 0;
        animation: none;
      }

      @keyframes drawPath {
        to {
          stroke-dashoffset: 0;
        }
      }

      .button-bar,
      .results {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .button-bar {
        margin-top: 16px;
      }

      .speed-control {
        display: grid;
        grid-template-columns: auto minmax(140px, 260px) 56px;
        gap: 10px;
        align-items: center;
        margin-top: 14px;
        color: #405168;
        font-size: 14px;
        font-weight: 900;
      }

      .speed-control input {
        padding: 0;
        accent-color: #356dff;
      }

      .speed-control span {
        color: #64748b;
        text-align: right;
      }

      #buttonBar button {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .page.is-hidden {
        display: none;
      }

      .choice-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        gap: 18px;
        margin-top: 18px;
      }

      .choice-card {
        display: grid;
        min-height: 210px;
        align-content: space-between;
        gap: 18px;
        border: 1px solid #dbe7f4;
        border-radius: 24px;
        padding: 24px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 18px 50px rgba(83, 111, 148, 0.12);
        text-align: left;
      }

      .choice-card strong {
        display: block;
        margin-bottom: 8px;
        color: #172033;
        font-size: 28px;
      }

      .choice-card span {
        color: #64748b;
        font-weight: 800;
        line-height: 1.6;
      }

      .manual-layout {
        display: grid;
        grid-template-columns: minmax(180px, 0.62fr) minmax(300px, 0.9fr) minmax(360px, 1.35fr);
        gap: 18px;
        margin-top: 18px;
      }

      .category-list,
      .manual-list {
        display: grid;
        gap: 8px;
      }

      .category-button,
      .manual-item {
        width: 100%;
        border-radius: 16px;
        text-align: left;
      }

      .category-button.is-active,
      .manual-item.is-active {
        background: #356dff;
        color: #ffffff;
      }

      .manual-item {
        position: relative;
        display: grid;
        gap: 6px;
        border: 1px solid #dbe7f4;
        background: #ffffff;
        color: #172033;
      }

      .manual-item::before {
        content: "";
        position: absolute;
        inset: 12px auto 12px 10px;
        width: 4px;
        border-radius: 999px;
        background: transparent;
      }

      .manual-item span {
        color: inherit;
        opacity: 0.72;
        font-size: 13px;
        overflow-wrap: anywhere;
      }

      .manual-item.is-active {
        box-shadow: 0 14px 28px rgba(53, 109, 255, 0.18);
        transform: translateY(-1px);
      }

      .manual-item.is-active::before {
        background: rgba(255, 255, 255, 0.9);
      }

      .manual-detail {
        display: grid;
        gap: 14px;
        min-width: 0;
      }

      .manual-detail-panel {
        min-width: 0;
      }

      .manual-detail-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        min-width: 0;
      }

      .manual-detail-title {
        flex: 1 1 auto;
        min-width: 0;
      }

      .manual-detail-title h2,
      .manual-detail-title p,
      .step-list li,
      .card strong {
        overflow-wrap: anywhere;
        word-break: keep-all;
      }

      .meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .pill {
        border-radius: 999px;
        padding: 8px 11px;
        background: #eef6ff;
        color: #225479;
        font-size: 13px;
        font-weight: 900;
      }

      .step-list {
        display: grid;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .step-list li {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        border-radius: 16px;
        padding: 14px;
        background: #f7fbff;
        color: #334155;
        font-weight: 800;
        line-height: 1.55;
      }

      .step-number {
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        border-radius: 50%;
        background: #356dff;
        color: #ffffff;
        font-size: 13px;
        font-weight: 900;
      }

      .manual-actions {
        display: flex;
        flex-wrap: wrap;
        flex: 0 0 auto;
        gap: 8px;
      }

      .manual-status {
        display: inline-flex;
        min-height: 28px;
        align-items: center;
        justify-self: start;
        border-radius: 999px;
        padding: 6px 10px;
        background: #eef6ff;
        color: #64748b;
        font-size: 14px;
        font-weight: 900;
      }

      .manual-status.is-ok {
        background: #ecfdf5;
        color: #14724f;
      }

      .manual-status.is-warn {
        background: #fff7ed;
        color: #9a3412;
      }

      .manual-status.is-busy {
        background: #eff6ff;
        color: #1d4ed8;
      }

      .manual-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        width: min(100%, 620px);
      }

      dialog {
        width: min(720px, calc(100% - 24px));
        border: 0;
        border-radius: 24px;
        padding: 0;
        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
      }

      dialog::backdrop {
        background: rgba(15, 23, 42, 0.38);
      }

      .manual-form {
        display: grid;
        gap: 14px;
        padding: 24px;
        background: #ffffff;
      }

      .manual-form label {
        display: grid;
        gap: 8px;
        color: #405168;
        font-weight: 900;
      }

      .manual-form textarea,
      .manual-form select {
        width: 100%;
        border: 1px solid #d6e2f0;
        border-radius: 14px;
        padding: 12px 13px;
        background: #fbfdff;
        color: #172033;
        font: inherit;
        outline: none;
      }

      .manual-form textarea {
        min-height: 120px;
        resize: vertical;
      }

      .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      @media (max-width: 1180px) {
        .manual-layout {
          grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
        }

        .manual-detail-panel {
          grid-column: 1 / -1;
        }
      }

      @media (max-width: 1380px) {
        .manual-detail-head {
          flex-direction: column;
        }

        .manual-detail-head .manual-actions {
          width: 100%;
        }

        .manual-detail-head .manual-actions button {
          flex: 1 1 120px;
        }
      }

      @media (max-width: 900px) {
        .app {
          width: min(100% - 24px, 1180px);
        }

        .login-screen {
          align-items: start;
          padding: 20px;
        }

        .login-shell {
          grid-template-columns: 1fr;
        }

        .login-copy {
          min-height: auto;
          padding: 28px;
        }

        .hero {
          padding: 22px;
        }

        .panel {
          padding: 18px;
        }

        .choice-grid,
        .grid,
        .manual-layout {
          grid-template-columns: 1fr;
        }

        .manual-detail-panel {
          grid-column: auto;
        }

        .manual-toolbar {
          width: 100%;
        }
      }

      .card,
      .empty {
        border-radius: 18px;
        padding: 16px 18px;
        background: #f1fbf7;
        font-weight: 900;
      }

      .card span {
        display: block;
        color: #64748b;
        font-size: 13px;
      }

      .card strong {
        display: block;
        margin-top: 7px;
        color: #16644f;
        font-size: 22px;
      }

      @media (max-width: 760px) {
        .app {
          width: min(100% - 16px, 1180px);
          padding: 12px 0 32px;
        }

        .hero,
        .section-head {
          align-items: flex-start;
          flex-direction: column;
        }

        h1 {
          font-size: clamp(30px, 11vw, 42px);
        }

        .hero,
        .panel,
        .choice-card {
          border-radius: 18px;
        }

        .choice-card {
          min-height: 170px;
          padding: 20px;
        }

        .manual-toolbar,
        .form-grid {
          grid-template-columns: 1fr;
          width: 100%;
        }

        .manual-detail-head {
          flex-direction: column;
        }

        .row {
          grid-template-columns: 30px minmax(0, 1fr);
        }

        .row button {
          grid-column: 2;
          justify-self: start;
        }

        .button-bar,
        .manual-actions {
          width: 100%;
        }

        .speed-control {
          grid-template-columns: 1fr;
          width: 100%;
        }

        .speed-control span {
          text-align: left;
        }

        .button-bar button,
        .manual-actions button {
          flex: 1 1 auto;
        }

        .manual-form {
          padding: 18px;
        }
      }

      @media (max-width: 480px) {
        .login-screen {
          padding: 12px;
        }

        .login-copy,
        .login-card {
          border-radius: 20px;
          padding: 22px;
        }

        .login-copy h1 {
          font-size: clamp(32px, 11vw, 44px);
        }

        .login-copy p:not(.eyebrow) {
          font-size: 15px;
        }

        .section-head {
          gap: 10px;
        }

        .manual-item,
        .category-button,
        button {
          border-radius: 14px;
        }

        .step-list li {
          grid-template-columns: 28px minmax(0, 1fr);
          padding: 12px;
        }

        .step-number {
          width: 28px;
          height: 28px;
        }
      }