@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700&family=Noto+Sans+KR:wght@400;500;700&family=Nunito:wght@700;800&display=swap");

      :root {
        --bg-1: #edf3f8;
        --bg-2: #f8f2e8;
        --card: #f5f8fc;
        --text: #1c2840;
        --muted: #5f708a;
        --primary: #1f8d70;
        --accent: #f2a95d;
        --border: #cfddea;
        --success: #17603b;
        --error: #9f2d2d;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-height: 100vh;
        font-family: "Plus Jakarta Sans", "Noto Sans KR", sans-serif;
        color: var(--text);
        background:
          radial-gradient(circle at 16% 12%, #d8eaf8 0%, transparent 32%),
          radial-gradient(circle at 86% 20%, #f6dfcc 0%, transparent 34%),
          linear-gradient(130deg, var(--bg-1), var(--bg-2));
        display: grid;
        place-items: center;
        padding: 20px;
      }

      .app-shell {
        width: min(820px, 100%);
      }

      .title-wrap {
        position: relative;
        text-align: center;
        margin-bottom: 16px;
      }

      .title-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 10px 12px;
      }

      .brand-side {
        grid-column: 1;
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding-left: 4px;
        opacity: 0.94;
      }

      .brand-side-mark {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        object-fit: cover;
        object-position: center;
        border: 1px solid rgba(167, 191, 216, 0.68);
        background: #ffffff;
        box-shadow: 0 8px 14px rgba(38, 65, 95, 0.14);
        flex: 0 0 auto;
      }

      .brand-side-copy {
        text-align: left;
      }

      .brand-side-name {
        color: #34516f;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.35px;
        line-height: 1.2;
      }

      .brand-side-note {
        margin-top: 2px;
        color: #6b839f;
        font-size: 0.72rem;
        letter-spacing: 0.2px;
        line-height: 1.2;
      }

      .brand-home {
        grid-column: 2;
        justify-self: center;
        display: inline-block;
        border: 0;
        outline: none;
        background: transparent;
        padding: 0;
        margin: 0;
        font-size: 40px;
        font-family: "Nunito", "SUIT Variable", "Pretendard Variable", "Plus Jakarta Sans", "Noto Sans KR", sans-serif;
        letter-spacing: 0.5px;
        font-weight: 800;
        line-height: 1.08;
        color: #334155;
        text-shadow: 0 4px 14px rgba(63, 109, 152, 0.16);
        text-rendering: optimizeLegibility;
        cursor: pointer;
      }

      @supports ((-webkit-background-clip: text) or (background-clip: text)) {
        .brand-home {
          background-image: linear-gradient(90deg, #4ade80 0%, #60a5fa 100%);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
          text-shadow: 0 6px 18px rgba(57, 106, 151, 0.2);
        }
      }

      .brand-home:focus {
        outline: none;
      }

      .brand-home:focus-visible {
        outline: 2px solid rgba(83, 129, 178, 0.35);
        outline-offset: 8px;
        border-radius: 10px;
      }

      .title-controls-shell {
        grid-column: 3;
        justify-self: end;
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
      }

      .title-controls {
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        min-width: 220px;
        max-width: min(280px, calc(100vw - 36px));
        padding: 10px;
        border: 1px solid rgba(207, 221, 234, 0.9);
        border-radius: 16px;
        background: rgba(247, 251, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 18px 34px rgba(29, 50, 80, 0.18);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        z-index: 70;
      }

      .title-controls.mobile-open {
        display: flex;
      }

      .mobile-menu-toggle {
        display: inline-flex;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(48, 72, 102, 0.14);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        padding: 0;
      }

      .title-controls .type-map-btn,
      .title-controls .lang-select {
        width: 100%;
        max-width: none;
      }

      .mobile-menu-toggle-bar {
        width: 17px;
        height: 2px;
        background: #334155;
        border-radius: 999px;
        transition: transform 0.2s ease, opacity 0.2s ease;
      }

      .mobile-menu-toggle.open .mobile-menu-toggle-bar:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
      }

      .mobile-menu-toggle.open .mobile-menu-toggle-bar:nth-child(2) {
        opacity: 0;
      }

      .mobile-menu-toggle.open .mobile-menu-toggle-bar:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
      }

      .mobile-menu-toggle:focus {
        outline: none;
      }

      .mobile-menu-toggle:focus-visible {
        box-shadow: 0 0 0 2px rgba(94, 146, 197, 0.35), 0 8px 18px rgba(24, 51, 86, 0.08);
      }

      .type-map-wrap {
        position: relative;
      }

      .type-map-btn {
        border: 1px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 999px;
        padding: 6px 12px;
        color: #334155;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(48, 72, 102, 0.14);
        transition: background-color 0.16s ease, transform 0.16s ease;
      }

      .type-map-btn:hover {
        background: rgba(255, 255, 255, 0.24);
      }

      .type-map-btn:focus {
        outline: none;
      }

      .type-map-btn:focus-visible {
        box-shadow: 0 0 0 2px rgba(94, 146, 197, 0.35), 0 8px 18px rgba(24, 51, 86, 0.08);
      }

      .tools-priority-btn {
        border-color: rgba(139, 204, 172, 0.42);
        background: linear-gradient(135deg, rgba(117, 214, 166, 0.28), rgba(122, 175, 234, 0.24));
      }

      .tools-priority-btn:hover {
        background: linear-gradient(135deg, rgba(117, 214, 166, 0.36), rgba(122, 175, 234, 0.3));
      }

      .type-map-popover {
        position: absolute;
        right: 0;
        top: calc(100% + 12px);
        width: min(860px, 95vw);
        z-index: 40;
      }

      .type-map-popover[hidden] {
        display: none;
      }

      .type-map-panel {
        border: 1px solid #d4e2ef;
        border-radius: 20px;
        background: #ffffff;
        box-shadow:
          0 22px 40px rgba(24, 42, 67, 0.16),
          0 10px 20px rgba(24, 42, 67, 0.08);
        padding: 14px;
      }

      .type-map-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
      }

      .type-map-title {
        margin: 0;
        color: #213a59;
        font-size: 1rem;
      }

      .type-map-desc {
        margin: 0;
        color: #5f7692;
        font-size: 0.86rem;
      }

      .type-map-hint {
        margin: 8px 0 0;
        color: #3c688f;
        font-size: 0.8rem;
        font-weight: 700;
      }

      .type-map-close {
        border: 1px solid #c9daeb;
        border-radius: 999px;
        background: #f2f8ff;
        color: #36577b;
        font-size: 0.82rem;
        font-weight: 800;
        padding: 5px 11px;
        cursor: pointer;
      }

      .type-map-groups {
        margin-top: 8px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .type-map-group {
        border: 1px solid #d7e4f1;
        border-radius: 14px;
        background: #f8fbff;
        padding: 11px;
      }

      .type-map-group-title {
        margin: 0;
        color: #1f3f62;
        font-size: 0.92rem;
      }

      .type-map-group-desc {
        margin: 5px 0 0;
        color: #607896;
        font-size: 0.82rem;
        line-height: 1.45;
      }

      .type-map-chip-grid {
        margin-top: 8px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }

      .type-map-chip {
        appearance: none;
        -webkit-appearance: none;
        border: 1px solid #c9dbec;
        border-radius: 10px;
        background: #ffffff;
        padding: 6px 8px;
        text-align: left;
        width: 100%;
        cursor: pointer;
        transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
      }

      .type-map-chip:hover {
        border-color: #7ba7d3;
        box-shadow: 0 10px 18px rgba(50, 86, 128, 0.12);
        transform: translateY(-1px);
      }

      .type-map-chip:focus {
        outline: none;
      }

      .type-map-chip:focus-visible {
        box-shadow: 0 0 0 2px rgba(94, 146, 197, 0.35), 0 8px 18px rgba(24, 51, 86, 0.08);
      }

      .type-map-chip-code {
        margin: 0;
        color: #23466c;
        font-size: 0.84rem;
        font-weight: 800;
        line-height: 1.2;
      }

      .type-map-chip-role {
        margin: 3px 0 0;
        color: #68809d;
        font-size: 0.76rem;
        line-height: 1.25;
      }

      .type-detail-modal[hidden] {
        display: none;
      }

      .type-detail-backdrop {
        position: fixed;
        inset: 0;
        z-index: 120;
        background: rgba(12, 22, 38, 0.56);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        display: grid;
        place-items: center;
        padding: 20px;
      }

      .type-detail-card {
        width: min(980px, 100%);
        max-height: min(88vh, 860px);
        overflow: auto;
        border-radius: 24px;
        border: 1px solid #c9dbec;
        background: linear-gradient(160deg, #fafdff 0%, #f4f9ff 100%);
        box-shadow:
          0 26px 42px rgba(24, 42, 67, 0.26),
          0 10px 20px rgba(24, 42, 67, 0.15);
        padding: 20px;
      }

      .type-detail-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: start;
      }

      .type-detail-code {
        margin: 0;
        color: #163352;
        font-size: clamp(1.8rem, 4vw, 2.6rem);
        line-height: 1.05;
      }

      .type-detail-role {
        margin: 6px 0 0;
        color: #21466d;
        font-size: 1.06rem;
        font-weight: 800;
      }

      .type-detail-group {
        margin: 8px 0 0;
        color: #517192;
        font-size: 0.9rem;
      }

      .type-detail-close {
        border: 1px solid #c2d5e9;
        border-radius: 999px;
        background: #eff6ff;
        color: #2f537a;
        font-weight: 800;
        font-size: 0.82rem;
        padding: 8px 14px;
        cursor: pointer;
        white-space: nowrap;
      }

      .type-detail-quote {
        margin: 14px 0 0;
        border: 1px solid #cdddef;
        border-radius: 16px;
        background: linear-gradient(145deg, rgba(123, 170, 230, 0.14), rgba(128, 217, 176, 0.16));
        padding: 12px 14px;
      }

      .type-detail-quote-text {
        margin: 0;
        color: #25466b;
        line-height: 1.58;
        font-size: 0.96rem;
        font-weight: 700;
      }

      .type-detail-quote-author {
        margin: 6px 0 0;
        color: #5d7896;
        font-size: 0.83rem;
      }

      .type-detail-intro {
        margin: 14px 0 0;
        color: #304f72;
        font-size: 0.95rem;
        line-height: 1.68;
      }

      .type-detail-grid {
        margin-top: 14px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .type-detail-section {
        border: 1px solid #d3e2f0;
        border-radius: 14px;
        background: #ffffff;
        padding: 12px;
      }

      .type-detail-section-title {
        margin: 0;
        color: #1f3e62;
        font-size: 0.95rem;
      }

      .type-detail-section-text {
        margin: 7px 0 0;
        color: #4a6584;
        font-size: 0.9rem;
        line-height: 1.62;
      }

      .type-detail-axis-grid {
        margin-top: 14px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .type-detail-axis-card {
        border: 1px solid #d4e1ef;
        border-radius: 14px;
        background: #f8fcff;
        padding: 11px;
      }

      .type-detail-axis-title {
        margin: 0;
        color: #25476e;
        font-size: 0.9rem;
      }

      .type-detail-axis-text {
        margin: 7px 0 0;
        color: #537190;
        font-size: 0.85rem;
        line-height: 1.56;
      }

      .type-detail-note {
        margin: 14px 0 0;
        padding: 11px 12px;
        border-radius: 12px;
        border: 1px dashed #c5d6ea;
        color: #5b7392;
        background: #f8fbff;
        font-size: 0.84rem;
        line-height: 1.5;
      }

      .lang-select {
        border: 1px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 999px;
        padding: 6px 12px;
        color: #334155;
        font-weight: 700;
        font-size: 13px;
        box-shadow: 0 6px 16px rgba(48, 72, 102, 0.14);
      }

      .session-btn {
        border: 1px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 999px;
        padding: 5px 11px 5px 8px;
        color: #334155;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(48, 72, 102, 0.14);
        max-width: 240px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
      }

      .session-btn.logged-in {
        max-width: 280px;
      }

      .session-avatar {
        width: 24px;
        height: 24px;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid rgba(158, 178, 203, 0.68);
        background: #ffffff;
        box-shadow: 0 4px 10px rgba(49, 79, 116, 0.16);
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .session-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .session-avatar.default {
        background: linear-gradient(145deg, #7ce2b2, #7caee7);
        border-color: rgba(122, 171, 214, 0.6);
        color: #ffffff;
        font-size: 11px;
        font-weight: 800;
      }

      .session-label {
        display: inline-block;
        min-width: 0;
        max-width: 178px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .lang-select:hover,
      .session-btn:hover {
        background: rgba(255, 255, 255, 0.24);
      }

      .lang-select:focus,
      .session-btn:focus {
        outline: none;
      }

      .lang-select:focus-visible,
      .session-btn:focus-visible {
        box-shadow: 0 0 0 2px rgba(94, 146, 197, 0.35), 0 8px 18px rgba(24, 51, 86, 0.08);
      }

      @media (max-width: 768px) {
        .brand-home {
          font-size: 28px;
        }

        .title-top {
          grid-template-columns: 1fr;
          gap: 8px;
          position: relative;
        }

        .brand-side {
          display: none;
        }

        .brand-home {
          grid-column: 1;
          justify-self: center;
          padding: 0 50px;
        }

        .title-controls-shell {
          grid-column: 1;
          justify-self: end;
          position: absolute;
          right: 0;
          top: 0;
          gap: 6px;
        }

        .mobile-menu-toggle {
          display: inline-flex;
        }

        .title-controls {
          position: absolute;
          right: 0;
          top: calc(100% + 8px);
          min-width: 220px;
          max-width: calc(100vw - 36px);
          padding: 10px;
          border: 1px solid rgba(207, 221, 234, 0.9);
          border-radius: 16px;
          background: rgba(247, 251, 255, 0.95);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 18px 34px rgba(29, 50, 80, 0.18);
          display: none;
          flex-direction: column;
          align-items: stretch;
          gap: 8px;
          z-index: 70;
        }

        .title-controls.mobile-open {
          display: flex;
        }

        .type-map-wrap {
          display: block;
          width: 100%;
          order: 1;
        }

        .type-map-btn,
        .lang-select {
          width: 100%;
          max-width: none;
        }

        .session-btn {
          min-width: 112px;
          max-width: 188px;
          padding: 5px 10px 5px 8px;
          justify-content: flex-start;
        }

        .session-btn.logged-in {
          max-width: 188px;
        }

        .tools-priority-btn {
          order: 0;
          font-size: 14px;
          font-weight: 800;
          padding: 10px 14px;
          border-radius: 14px;
          text-align: center;
          border-color: rgba(120, 185, 153, 0.55);
          background: linear-gradient(125deg, rgba(117, 214, 166, 0.4), rgba(125, 175, 234, 0.34));
          box-shadow: 0 10px 18px rgba(48, 90, 122, 0.2);
        }

        .tools-priority-btn:hover {
          background: linear-gradient(125deg, rgba(117, 214, 166, 0.5), rgba(125, 175, 234, 0.42));
        }

        .type-map-popover {
          position: fixed;
          left: 12px;
          right: 12px;
          top: 86px;
          width: auto;
          z-index: 95;
        }

        .type-map-panel {
          max-height: min(72vh, 560px);
          overflow: auto;
        }

        .type-detail-backdrop {
          padding: 12px;
          align-items: end;
        }

        .type-detail-card {
          max-height: min(90vh, 760px);
          border-radius: 20px;
          padding: 15px;
        }

        .type-detail-axis-grid {
          grid-template-columns: 1fr;
        }

        .landing-screen {
          max-height: none;
          overflow: visible;
          padding-right: 0;
        }

        .landing-quick-start {
          margin: 2px 0 4px;
        }
      }

      @media (prefers-color-scheme: dark) {
        .brand-home {
          color: #e2e8f0;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
        }

        @supports ((-webkit-background-clip: text) or (background-clip: text)) {
          .brand-home {
            background-image: linear-gradient(90deg, #6ee7b7 0%, #93c5fd 100%);
            -webkit-text-fill-color: transparent;
            color: transparent;
          }
        }

        .lang-select,
        .type-map-btn,
        .session-btn,
        .mobile-menu-toggle {
          color: #e2e8f0;
          background: rgba(15, 23, 42, 0.45);
          border-color: rgba(148, 163, 184, 0.36);
          box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
        }

        .lang-select:hover,
        .type-map-btn:hover,
        .session-btn:hover {
          background: rgba(30, 41, 59, 0.65);
        }

        .tools-priority-btn {
          border-color: rgba(103, 197, 163, 0.48);
          background: linear-gradient(135deg, rgba(38, 129, 95, 0.62), rgba(53, 104, 183, 0.66));
        }

        .tools-priority-btn:hover {
          background: linear-gradient(135deg, rgba(52, 151, 114, 0.72), rgba(70, 123, 208, 0.76));
        }

        .mobile-menu-toggle-bar {
          background: #e2e8f0;
        }

        .title-controls {
          border-color: rgba(148, 163, 184, 0.42);
          background: rgba(15, 23, 42, 0.92);
        }

        .brand-side-name {
          color: #e2e8f0;
        }

        .brand-side-note {
          color: #b9cbe0;
        }

        .landing-hero {
          border-color: rgba(148, 163, 184, 0.35);
          background: linear-gradient(135deg, rgba(61, 146, 113, 0.34), rgba(70, 114, 183, 0.34), rgba(147, 96, 58, 0.3));
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 14px 26px rgba(3, 9, 19, 0.32);
        }

        .landing-eyebrow {
          color: #d9f8ee;
          background: rgba(15, 23, 42, 0.45);
        }

        .landing-title {
          color: #e2e8f0;
        }

        .landing-lead,
        .landing-note,
        .landing-step p {
          color: #bdd0e6;
        }

        .landing-step {
          border-color: rgba(148, 163, 184, 0.34);
          background: rgba(15, 23, 42, 0.45);
        }

        .landing-method {
          border-color: rgba(148, 163, 184, 0.34);
          background: rgba(15, 23, 42, 0.45);
        }

        .landing-step h3 {
          color: #e2e8f0;
        }

        .landing-method h3,
        .landing-method-kicker {
          color: #e2e8f0;
        }

        .landing-method-item {
          border-color: rgba(148, 163, 184, 0.34);
          background: rgba(30, 41, 59, 0.7);
        }

        .landing-method-item p {
          color: #bdd0e6;
        }

        .landing-quick-start {
          border-color: rgba(148, 163, 184, 0.45);
          background: rgba(15, 23, 42, 0.38);
        }

        .landing-recommend {
          border-color: rgba(148, 163, 184, 0.44);
          background: rgba(15, 23, 42, 0.42);
        }

        .landing-recommend-title {
          color: #e2e8f0;
        }

        .landing-recommend-list {
          color: #bfd2e7;
        }

        .landing-scroll-btn {
          border-color: rgba(148, 163, 184, 0.45);
          background: rgba(15, 23, 42, 0.5);
          color: #d8e5f4;
        }

        .profile-panel {
          border-color: rgba(148, 163, 184, 0.34);
          background: #0f172a;
        }

        .profile-title,
        .profile-item-name,
        .profile-item-type {
          color: #e2e8f0;
        }

        .profile-subtitle,
        .profile-item-meta,
        .profile-empty,
        .profile-loading,
        .profile-select-all {
          color: #b8c9de;
        }

        .profile-item {
          border-color: rgba(148, 163, 184, 0.32);
          background: rgba(30, 41, 59, 0.7);
        }

        .profile-item-clickable:hover {
          border-color: rgba(148, 210, 182, 0.54);
          box-shadow: 0 10px 20px rgba(4, 10, 20, 0.35);
        }

        .profile-item-clickable.selected {
          border-color: rgba(101, 196, 161, 0.62);
          background: linear-gradient(135deg, rgba(47, 118, 91, 0.55), rgba(56, 95, 164, 0.54));
        }

        .profile-item-type,
        .profile-kind,
        .profile-close-btn,
        .profile-delete-btn {
          border-color: rgba(148, 163, 184, 0.42);
          background: rgba(15, 23, 42, 0.6);
          color: #d9e4f5;
        }

        .profile-empty,
        .profile-loading {
          border-color: rgba(148, 163, 184, 0.34);
          background: rgba(30, 41, 59, 0.55);
        }

        .profile-feedback.ok {
          border-color: rgba(16, 185, 129, 0.35);
          background: rgba(16, 185, 129, 0.17);
          color: #b9f3df;
        }

        .profile-feedback.fail {
          border-color: rgba(248, 113, 113, 0.4);
          background: rgba(248, 113, 113, 0.18);
          color: #ffd8d8;
        }

        .tool-panel {
          border-color: rgba(148, 163, 184, 0.34);
          background: #0f172a;
        }

        .tool-title,
        .tool-menu-btn-title {
          color: #e2e8f0;
        }

        .tool-subtitle,
        .tool-menu-btn-desc,
        .tool-note,
        .routine-progress-label,
        .routine-item-text,
        .security-list {
          color: #b8c9de;
        }

        .tool-close-btn,
        .tool-menu-btn,
        .routine-item,
        .routine-day-btn {
          border-color: rgba(148, 163, 184, 0.34);
          background: rgba(30, 41, 59, 0.72);
          color: #dce8f6;
        }

        .tool-menu-btn-primary {
          border-color: rgba(110, 202, 164, 0.5);
          background: linear-gradient(135deg, rgba(46, 128, 97, 0.56), rgba(58, 109, 189, 0.6));
        }

        .routine-day-btn.active {
          border-color: rgba(116, 212, 171, 0.6);
          background: linear-gradient(135deg, rgba(46, 128, 97, 0.62), rgba(58, 109, 189, 0.66));
          color: #eaf5ff;
        }

        .tool-note {
          border-color: rgba(148, 163, 184, 0.34);
          background: rgba(30, 41, 59, 0.52);
        }

        .faq-item {
          border-color: rgba(148, 163, 184, 0.34);
          background: rgba(30, 41, 59, 0.72);
        }

        .faq-question {
          color: #e2e8f0;
        }

        .faq-q-label {
          color: #98b7dc;
        }

        .faq-chevron {
          color: #b8c9de;
        }

        .faq-answer {
          color: #bdd0e6;
        }

        .faq-contact-title {
          color: #e2e8f0;
        }

        .faq-contact-lead {
          color: #b8c9de;
        }

        .collapsible-detail {
          border-color: rgba(148, 163, 184, 0.34);
          background: rgba(30, 41, 59, 0.66);
        }

        .collapsible-detail > summary {
          background: rgba(30, 41, 59, 0.82);
        }

        .collapsible-title {
          color: #e2e8f0;
        }

        .collapsible-toggle {
          color: #a9c2de;
        }

        .card-save-preview img {
          border-color: rgba(148, 163, 184, 0.34);
          background: rgba(30, 41, 59, 0.9);
        }

        .routine-progress-track {
          background: rgba(148, 163, 184, 0.34);
        }

        .type-map-panel {
          border-color: rgba(148, 163, 184, 0.42);
          background: rgba(15, 23, 42, 0.96);
        }

        .type-map-title {
          color: #e2e8f0;
        }

        .type-map-desc,
        .type-map-hint,
        .type-map-group-desc,
        .type-map-chip-role {
          color: #bdd0e6;
        }

        .type-map-group,
        .type-map-chip {
          border-color: rgba(148, 163, 184, 0.34);
          background: rgba(30, 41, 59, 0.7);
        }

        .type-map-group-title,
        .type-map-chip-code {
          color: #e2e8f0;
        }

        .type-map-close {
          border-color: rgba(148, 163, 184, 0.42);
          background: rgba(30, 41, 59, 0.82);
          color: #e2e8f0;
        }

        .type-detail-card {
          border-color: rgba(148, 163, 184, 0.4);
          background: rgba(15, 23, 42, 0.96);
        }

        .type-detail-code,
        .type-detail-role,
        .type-detail-section-title,
        .type-detail-axis-title {
          color: #e2e8f0;
        }

        .type-detail-group,
        .type-detail-intro,
        .type-detail-section-text,
        .type-detail-axis-text,
        .type-detail-note,
        .type-detail-quote-author {
          color: #bed0e5;
        }

        .type-detail-close {
          border-color: rgba(148, 163, 184, 0.45);
          background: rgba(30, 41, 59, 0.78);
          color: #e2e8f0;
        }

        .type-detail-quote {
          border-color: rgba(148, 163, 184, 0.35);
          background: linear-gradient(150deg, rgba(88, 120, 178, 0.26), rgba(58, 130, 111, 0.24));
        }

        .type-detail-quote-text {
          color: #e2e8f0;
        }

        .type-detail-section,
        .type-detail-axis-card {
          border-color: rgba(148, 163, 184, 0.32);
          background: rgba(30, 41, 59, 0.74);
        }

        .type-detail-note {
          border-color: rgba(148, 163, 184, 0.38);
          background: rgba(30, 41, 59, 0.7);
        }

        .start-science-panel,
        .start-form-panel,
        .question-side-card,
        .compat-card,
        .trend-card,
        .rx-card {
          border-color: rgba(148, 163, 184, 0.34);
          background: rgba(15, 23, 42, 0.52);
        }

        .start-science-title,
        .detail-heading,
        .rx-card-title {
          color: #e2e8f0;
        }

        .start-science-lead,
        .start-science-list,
        .question-side-text,
        .question-side-tip,
        .owner-help,
        .detail-desc,
        .guide-item,
        .compat-summary,
        .compat-row,
        .trend-item,
        .trend-delta-item,
        .rx-card-text,
        .rx-card-evidence {
          color: #bdd0e6;
        }

        .question-side-axis {
          color: #e2e8f0;
        }

        .question-side-kicker,
        .question-side-tag {
          border-color: rgba(148, 163, 184, 0.45);
          background: rgba(30, 41, 59, 0.72);
          color: #d8e5f4;
        }

        .owner-select,
        .name-input {
          background: rgba(30, 41, 59, 0.78);
          color: #e2e8f0;
          border-color: rgba(148, 163, 184, 0.38);
        }

        .owner-mbti-btn {
          border-color: rgba(148, 163, 184, 0.42);
          background: rgba(30, 41, 59, 0.7);
          color: #d9e5f5;
        }

        .owner-mbti-btn.active {
          border-color: rgba(110, 231, 183, 0.45);
          background: rgba(15, 23, 42, 0.86);
          color: #d8f8ec;
        }

        .owner-clear-btn {
          border-color: rgba(148, 163, 184, 0.42);
          background: rgba(30, 41, 59, 0.7);
          color: #d7e5f6;
        }

        .trend-item,
        .evidence-item,
        .detail-item,
        .guide-item {
          border-color: rgba(148, 163, 184, 0.33);
          background: rgba(30, 41, 59, 0.7);
        }

        .result-vibe-summary,
        .result-flow,
        .flow-step,
        .behavior-plan-card {
          border-color: rgba(148, 163, 184, 0.35);
          background: rgba(30, 41, 59, 0.72);
        }

        .result-vibe-label,
        .result-vibe-text,
        .result-flow-title,
        .flow-step-name,
        .behavior-plan-card h4 {
          color: #e2e8f0;
        }

        .flow-step-state,
        .behavior-plan-lead,
        .behavior-plan-list {
          color: #bfd2e7;
        }

        .flow-step.done {
          border-color: rgba(94, 200, 154, 0.58);
          background: rgba(35, 109, 82, 0.42);
        }

        .flow-step.done .flow-step-name,
        .flow-step.done .flow-step-state {
          color: #ccf3e4;
        }

        .flow-step.locked {
          border-color: rgba(222, 181, 117, 0.52);
          background: rgba(124, 90, 44, 0.38);
        }

        .flow-step.locked .flow-step-name,
        .flow-step.locked .flow-step-state {
          color: #ffe5c4;
        }
      }

      h1 {
        margin: 0;
        font-size: clamp(1.6rem, 3.6vw, 2.2rem);
        letter-spacing: 0.3px;
      }

      .subtitle {
        margin-top: 10px;
        color: var(--muted);
        font-size: 1.05rem;
        text-align: center;
      }

      .hero-visual {
        margin: 0 auto 16px;
        width: min(230px, 64%);
        border-radius: 24px;
        overflow: hidden;
        border: 1px solid #cfdbe9;
        box-shadow:
          0 16px 28px rgba(36, 53, 77, 0.16),
          0 6px 14px rgba(36, 53, 77, 0.08);
        background: #fff;
      }

      .hero-image {
        --hero-zoom: 1.2;
        --hero-y: 52%;
        --hero-switch-scale: 1;
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: 50% var(--hero-y);
        transform: scale(calc(var(--hero-zoom) * var(--hero-switch-scale)));
        transition: opacity 0.28s ease, transform 0.28s ease;
      }

      .hero-image.kind-dog {
        --hero-zoom: 1.50;
        --hero-y: 52%;
      }

      .hero-image.kind-cat {
        --hero-zoom: 1.50;
        --hero-y: 52%;
      }

      .hero-image.switching {
        opacity: 0.45;
        --hero-switch-scale: 0.97;
      }

      .card {
        background: var(--card);
        border: 1px solid #d4dfec;
        border-radius: 26px;
        box-shadow:
          0 22px 44px rgba(21, 37, 63, 0.16),
          0 8px 20px rgba(21, 37, 63, 0.07);
        padding: clamp(20px, 4vw, 34px);
      }

      .screen {
        animation: fadeUp 0.3s ease;
      }

      .screen.no-anim {
        animation: none;
      }

      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .input-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
      }

      .pet-type-wrap {
        margin-bottom: 14px;
      }

      .pet-type-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .pet-type-btn {
        border: 1px solid #c7d6e7;
        background: #f6f9fc;
        color: #2a3f5f;
        border-radius: 14px;
        padding: 10px 12px;
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
        transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
      }

      .pet-type-btn:hover {
        transform: translateY(-1px);
      }

      .pet-type-btn.active {
        border-color: #8cb5d8;
        background: linear-gradient(140deg, #eef6ff, #f3f8ff);
        box-shadow: 0 8px 16px rgba(45, 84, 129, 0.14);
      }

      .name-input {
        width: 100%;
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 15px 16px;
        font-size: 1rem;
        outline: none;
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
        background: #ffffff;
      }

      .name-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(17, 120, 100, 0.15);
      }

      .owner-select {
        width: 100%;
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 12px 14px;
        font-size: 0.96rem;
        font-weight: 700;
        color: #2a3f5f;
        background: #ffffff;
        outline: none;
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
      }

      .owner-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(17, 120, 100, 0.14);
      }

      .owner-help {
        margin: 6px 0 0;
        color: #5f7490;
        font-size: 0.84rem;
        line-height: 1.5;
      }

      .owner-picker {
        margin-top: 2px;
      }

      .owner-chip-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
      }

      .owner-mbti-btn {
        border: 1px solid #c6d8ea;
        border-radius: 11px;
        background: #f7fbff;
        color: #2d4a6d;
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.25px;
        padding: 7px 8px;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
      }

      .owner-mbti-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 14px rgba(38, 63, 92, 0.12);
      }

      .owner-mbti-btn:active {
        transform: scale(0.98);
      }

      .owner-mbti-btn.active {
        border-color: #4fa488;
        background: linear-gradient(145deg, #e8f8f0 0%, #eef7ff 100%);
        color: #20576e;
        box-shadow: 0 10px 16px rgba(35, 90, 95, 0.12);
      }

      .owner-picker-controls {
        margin-top: 8px;
        display: flex;
        justify-content: flex-end;
      }

      .owner-clear-btn {
        border: 1px solid #c8d8e9;
        border-radius: 999px;
        background: #f7fbff;
        color: #486786;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.2px;
        padding: 6px 11px;
        cursor: pointer;
      }

      .owner-clear-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
      }

      .button {
        border: 0;
        border-radius: 16px;
        padding: 14px 18px;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.14s ease, filter 0.14s ease, opacity 0.14s ease, box-shadow 0.14s ease;
      }

      .button:active {
        transform: translateY(1px);
      }

      .button:disabled {
        opacity: 0.62;
        cursor: not-allowed;
      }

      .button-primary {
        width: 100%;
        margin-top: 12px;
        background: linear-gradient(90deg, #7fdca8 0%, #c9d585 50%, #f2b66d 100%);
        box-shadow: 0 10px 18px rgba(123, 167, 119, 0.28);
        color: #ffffff;
      }

      .button-primary#start-btn {
        position: relative;
        overflow: hidden;
        transition:
          transform 0.16s ease,
          box-shadow 0.2s ease,
          filter 0.2s ease;
      }

      .button-primary#start-btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.03);
        box-shadow: 0 14px 24px rgba(123, 167, 119, 0.35);
      }

      .button-primary#start-btn:active {
        transform: translateY(1px) scale(0.995);
        filter: brightness(0.96);
      }

      .button-primary#start-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(92, 140, 194, 0.28), 0 14px 24px rgba(123, 167, 119, 0.35);
      }

      .button-primary[id="save-btn"] {
        background: linear-gradient(90deg, #1f9b76 0%, #147c62 100%);
        box-shadow: 0 10px 18px rgba(21, 120, 96, 0.26);
        color: #fff;
      }

      .button-primary:hover {
        filter: brightness(0.98);
      }

      .button-secondary {
        background: #edf2f8;
        border: 1px solid #d2ddea;
        color: #273956;
      }

      .progress-wrap {
        margin-bottom: 16px;
      }

      .progress-text {
        font-size: 0.98rem;
        font-weight: 700;
        color: var(--muted);
        margin-bottom: 8px;
      }

      .bar {
        height: 10px;
        border-radius: 999px;
        background: #dde7f1;
        overflow: hidden;
      }

      .bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--primary), var(--accent));
        transition: width 0.26s ease;
      }

      .question {
        font-size: clamp(1.2rem, 3.2vw, 1.62rem);
        line-height: 1.55;
        color: #1f2e46;
        margin: 0 0 18px;
      }

      .question-layout {
        display: grid;
        gap: 14px;
      }

      .question-main,
      .question-side {
        min-width: 0;
      }

      .question-side {
        display: grid;
        gap: 10px;
      }

      .question-side-card {
        border: 1px solid #d4e2f0;
        border-radius: 14px;
        background: #f8fbff;
        padding: 12px 13px;
      }

      .question-side-card.muted {
        background: #f4f8fd;
      }

      .question-side-kicker {
        margin: 0;
        width: fit-content;
        border-radius: 999px;
        border: 1px solid #c8dced;
        background: #ecf5ff;
        color: #2f5c88;
        font-size: 0.72rem;
        letter-spacing: 0.35px;
        font-weight: 800;
        padding: 5px 9px;
      }

      .question-side-axis {
        margin: 10px 0 0;
        color: #1e3a5d;
        font-size: 1.04rem;
        line-height: 1.35;
      }

      .question-side-text {
        margin: 8px 0 0;
        color: #4f6a88;
        font-size: 0.87rem;
        line-height: 1.5;
      }

      .question-side-tag {
        margin-top: 9px;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        border: 1px solid #bfd8e8;
        background: #ebf7ff;
        color: #296184;
        font-size: 0.77rem;
        font-weight: 800;
        padding: 6px 10px;
      }

      .question-side-tip {
        margin: 9px 0 0;
        color: #4d6987;
        font-size: 0.84rem;
        line-height: 1.48;
      }

      .question-window-hint {
        margin: -10px 0 14px;
        padding: 8px 10px;
        border-radius: 12px;
        border: 1px solid #d5e3f1;
        background: #f5f9ff;
        color: #4f6784;
        font-size: 0.84rem;
        line-height: 1.45;
      }

      .question-visual {
        margin: 0 0 16px;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid #d1deec;
        background: #eef4fa;
      }

      .question-visual img {
        width: 100%;
        display: block;
        height: auto;
      }

      .scale-legend {
        display: flex;
        justify-content: space-between;
        color: var(--muted);
        font-size: 0.93rem;
        font-weight: 600;
        margin-bottom: 12px;
      }

      .scale-row {
        display: grid;
        grid-template-columns: repeat(7, minmax(30px, 1fr));
        gap: clamp(4px, 1.5vw, 9px);
        align-items: center;
      }

      .scale-btn {
        justify-self: center;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 2px solid transparent;
        background: #fff;
        cursor: pointer;
        outline: none;
        box-shadow: 0 3px 10px rgba(30, 44, 66, 0.08);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          border-color 0.18s ease,
          background-color 0.18s ease,
          color 0.18s ease;
      }

      .scale-btn::before {
        content: "";
        width: 58%;
        height: 58%;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.2);
        transform: scale(0.72);
        opacity: 0;
        transition: transform 0.18s ease, opacity 0.18s ease;
      }

      .scale-btn::after {
        content: "✓";
        position: absolute;
        font-size: clamp(0.67rem, 2.2vw, 0.95rem);
        font-weight: 800;
        line-height: 1;
        color: #fff;
        opacity: 0;
        transform: scale(0.55);
        transition: opacity 0.18s ease, transform 0.18s ease;
      }

      .scale-btn:hover {
        transform: translateY(-1px) scale(1.03);
        box-shadow: 0 8px 15px rgba(22, 35, 56, 0.16);
      }

      .scale-btn:active {
        transform: scale(0.94);
      }

      .scale-btn:disabled {
        cursor: not-allowed;
      }

      .scale-btn:focus-visible {
        box-shadow: 0 0 0 4px rgba(37, 86, 127, 0.2), 0 10px 20px rgba(30, 44, 66, 0.12);
      }

      .scale-btn.selected {
        transform: scale(1.08);
        box-shadow: 0 14px 24px rgba(28, 37, 51, 0.26);
        animation: selectPop 0.24s ease;
      }

      .scale-btn.selected::before {
        opacity: 1;
        transform: scale(1);
      }

      .scale-btn.selected::after {
        opacity: 1;
        transform: scale(1);
      }

      .step-0,
      .step-6 {
        width: 46px;
        height: 46px;
      }

      .step-1,
      .step-5 {
        width: 40px;
        height: 40px;
      }

      .step-2,
      .step-4 {
        width: 34px;
        height: 34px;
      }

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

      .scale-btn.agree {
        border-color: #1d9f83;
        background: rgba(29, 159, 131, 0.1);
        color: #0e6a55;
      }

      .scale-btn.disagree {
        border-color: #da7a3f;
        background: rgba(218, 122, 63, 0.11);
        color: #9a4f21;
      }

      .scale-btn.neutral {
        border-color: #adb8c7;
        background: #f3f7fb;
        color: #4d607b;
      }

      .scale-btn.agree.selected {
        border-color: #0d7d65;
        background: #16997c;
      }

      .scale-btn.disagree.selected {
        border-color: #bf642f;
        background: #d8763a;
      }

      .scale-btn.neutral.selected {
        border-color: #5f7087;
        background: #7a8ba2;
      }

      @keyframes selectPop {
        0% {
          transform: scale(0.9);
        }
        65% {
          transform: scale(1.12);
        }
        100% {
          transform: scale(1.08);
        }
      }

      .scale-hint {
        margin-top: 10px;
        color: var(--muted);
        font-size: 0.85rem;
      }

      .result-type {
        margin: 4px 0 4px;
        font-size: clamp(2rem, 8vw, 2.9rem);
        letter-spacing: 1.5px;
      }

      .result-title {
        margin: 8px 0 8px;
        color: #344d6b;
        font-size: 1.14rem;
        font-weight: 700;
      }

      .result-desc {
        margin: 0;
        color: var(--muted);
        line-height: 1.62;
        font-size: 0.98rem;
      }

      .result-nickname {
        margin: 0;
        color: #24537b;
        font-weight: 800;
        font-size: clamp(1.42rem, 3.9vw, 2rem);
        letter-spacing: -0.2px;
      }

      .result-summary {
        margin: 8px 0 0;
        color: #5c6f87;
        line-height: 1.52;
        font-size: 1.08rem;
      }

      .result-top {
        margin-bottom: 16px;
        border: 1px solid #c8d8e8;
        background: #f2f7fd;
        border-radius: 18px;
        padding: clamp(16px, 3vw, 22px);
      }

      .result-top-label {
        margin: 0;
        width: fit-content;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        border: 1px solid #f2c3a1;
        background: #fff5ee;
        padding: 7px 12px;
        font-size: 0.93rem;
        letter-spacing: 0;
        color: #c77b4e;
        font-weight: 700;
        text-transform: none;
      }

      .result-top-type {
        margin: 14px 0 0;
        font-size: clamp(3rem, 11vw, 4.25rem);
        line-height: 1;
        letter-spacing: 0.8px;
        color: #1f2d46;
      }

      .result-top-name {
        margin: 8px 0 0;
        font-size: clamp(1.08rem, 3.8vw, 1.35rem);
        font-weight: 800;
        color: #2b4568;
      }

      .result-top-desc {
        margin: 10px 0 0;
        color: #5b6f8a;
        line-height: 1.58;
        font-size: 0.93rem;
      }

      .share-card {
        margin-top: 16px;
        border-radius: 24px;
        overflow: hidden;
        position: relative;
        isolation: isolate;
        min-height: clamp(320px, 56vw, 470px);
        color: #fff;
        background: linear-gradient(145deg, #1c9a83 0%, #4f7bc6 54%, #ef904d 100%);
        box-shadow:
          0 24px 40px rgba(31, 41, 55, 0.2),
          0 10px 22px rgba(31, 41, 55, 0.15);
      }

      .share-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: none;
        z-index: 0;
      }

      .share-fallback {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        z-index: 0;
      }

      .share-card.has-photo .share-photo {
        display: block;
      }

      .share-card.has-photo .share-fallback {
        display: none;
      }

      .share-card.has-photo::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.52) 60%, rgba(0, 0, 0, 0.76) 100%);
      }

      .share-card.no-photo::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        right: -80px;
        top: -120px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.16);
        z-index: 0;
      }

      .share-card.no-photo::after {
        content: "";
        position: absolute;
        width: 190px;
        height: 190px;
        left: -45px;
        bottom: -85px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        z-index: 0;
      }

      .share-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: clamp(16px, 3vw, 24px);
      }

      .share-badge-row {
        display: flex;
        gap: 8px;
        align-items: center;
      }

      .share-top {
        display: flex;
        align-items: flex-start;
        gap: 10px;
      }

      .share-meta {
        display: grid;
        gap: 3px;
      }

      .share-name {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        opacity: 0.97;
      }

      .share-type {
        margin: 12px 0 0;
        font-size: clamp(2.35rem, 10vw, 3.8rem);
        letter-spacing: 1.7px;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
      }

      .share-nickname {
        margin: 8px 0 0;
        font-size: clamp(1.02rem, 3.2vw, 1.34rem);
        font-weight: 700;
        color: #fff;
        line-height: 1.33;
      }

      .share-label {
        margin: 0;
        display: inline-flex;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.45);
        background: rgba(255, 255, 255, 0.19);
        color: #fff;
        padding: 6px 10px;
        font-size: 0.72rem;
        letter-spacing: 0.5px;
        font-weight: 700;
      }

      .share-line {
        margin: 7px 0 0;
        font-size: 0.92rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.94);
      }

      .share-metrics {
        margin-top: 14px;
        display: grid;
        gap: 8px;
      }

      .share-metric-row {
        background: rgba(255, 255, 255, 0.17);
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 10px;
        padding: 7px 9px;
      }

      .share-metric-head {
        font-size: 0.82rem;
        font-weight: 700;
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        color: rgba(255, 255, 255, 0.98);
      }

      .share-track {
        height: 7px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.28);
        overflow: hidden;
      }

      .share-fill {
        height: 100%;
        border-radius: 999px;
        background: #fff;
      }

      .share-footer {
        margin-top: 12px;
        font-size: 0.75rem;
        opacity: 0.92;
        text-align: right;
      }

      .photo-uploader {
        margin-top: 0;
        padding: 12px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: #fff;
      }

      .photo-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .photo-note {
        margin-top: 8px;
        color: #677995;
        font-size: 0.84rem;
      }

      .photo-preview {
        margin-top: 10px;
        display: block;
        border-radius: 12px;
        background: #fff;
        border: 1px solid #e2eaf4;
        padding: 8px;
      }

      .photo-preview-img {
        width: 100%;
        height: auto;
        max-height: 260px;
        border-radius: 8px;
        object-fit: contain;
        object-position: center;
        border: 0;
        box-shadow: none;
        background: #fff;
      }

      .photo-preview-text {
        margin-top: 8px;
        min-width: 0;
      }

      .photo-preview-title {
        font-size: 0.86rem;
        color: #38536e;
        font-weight: 700;
      }

      .photo-preview-name {
        margin-top: 2px;
        color: #5e7088;
        font-size: 0.81rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .photo-preview-empty {
        margin-top: 10px;
        border-radius: 12px;
        border: 1px dashed #cad9ea;
        padding: 10px;
        color: #68809b;
        font-size: 0.83rem;
        background: #f8fbff;
      }

      .detail-wrap {
        margin-top: 18px;
        border-top: 1px solid #dbe6f1;
        padding-top: 16px;
      }

      .result-tab-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
      }

      .result-tab-btn {
        border: 1px solid #cfe0ef;
        background: #f8fbff;
        border-radius: 12px;
        padding: 10px 12px;
        color: #4f6886;
        font-size: 0.86rem;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.18s ease;
      }

      .result-tab-btn:hover {
        border-color: #95bad9;
        color: #234e78;
        background: #f2f8ff;
      }

      .result-tab-btn.is-active {
        border-color: #5f90c2;
        background: linear-gradient(130deg, #eef6ff 0%, #e9f8ef 100%);
        color: #1f4f79;
        box-shadow: inset 0 0 0 1px #c5dcf0;
      }

      .result-tab-panel {
        display: none;
        gap: 10px;
      }

      .result-tab-panel.is-active {
        display: grid;
      }

      .insight-hero-card {
        border: 1px solid #cfe0ef;
        border-radius: 14px;
        background: linear-gradient(128deg, #f3f9ff 0%, #eef8f3 100%);
        padding: 12px 14px;
      }

      .insight-hero-title {
        margin: 0;
        color: #23486b;
        font-size: 1rem;
        font-weight: 800;
      }

      .insight-hero-text {
        margin: 7px 0 0;
        color: #4f6783;
        font-size: 0.91rem;
        line-height: 1.58;
      }

      .insight-hero-note {
        margin: 7px 0 0;
        color: #59708b;
        font-size: 0.83rem;
        font-weight: 700;
      }

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

      .insight-card {
        border: 1px solid #d8e5f2;
        border-radius: 12px;
        background: #ffffff;
        padding: 10px 11px;
      }

      .insight-card-title {
        margin: 0;
        color: #244e78;
        font-size: 0.84rem;
        font-weight: 800;
      }

      .insight-card-text {
        margin: 6px 0 0;
        color: #546d88;
        font-size: 0.86rem;
        line-height: 1.54;
      }

      .life-index-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
      }

      .life-index-card {
        border: 1px solid #d2e3f2;
        border-radius: 14px;
        background: #ffffff;
        padding: 11px;
        display: grid;
        gap: 7px;
      }

      .life-index-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .life-index-title {
        margin: 0;
        color: #294d73;
        font-size: 0.83rem;
        font-weight: 800;
      }

      .life-index-score {
        color: #215682;
        font-size: 1.1rem;
        font-weight: 800;
        line-height: 1;
      }

      .life-index-track {
        height: 8px;
        border-radius: 999px;
        background: #e4edf6;
        overflow: hidden;
      }

      .life-index-fill {
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, #57c8a0 0%, #5b8ee0 100%);
      }

      .life-index-text {
        margin: 0;
        color: #607892;
        font-size: 0.83rem;
        line-height: 1.48;
      }

      .detail-section + .detail-section {
        margin-top: 12px;
      }

      .collapsible-detail {
        border: 1px solid #d3e2f0;
        border-radius: 16px;
        background: #ffffff;
        overflow: hidden;
      }

      .collapsible-detail > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px;
        background: #f8fbff;
      }

      .collapsible-detail > summary::-webkit-details-marker {
        display: none;
      }

      .collapsible-title {
        color: #1f3350;
        font-size: 0.98rem;
        font-weight: 800;
      }

      .collapsible-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #4f6b8d;
        font-size: 0.78rem;
        font-weight: 700;
        white-space: nowrap;
      }

      .collapsible-toggle::before {
        content: attr(data-open);
      }

      .collapsible-detail[open] .collapsible-toggle::before {
        content: attr(data-close);
      }

      .collapsible-toggle::after {
        content: "▾";
        font-size: 0.9rem;
        line-height: 1;
        transition: transform 0.2s ease;
      }

      .collapsible-detail[open] .collapsible-toggle::after {
        transform: rotate(180deg);
      }

      .collapsible-body {
        padding: 14px;
      }

      .detail-heading {
        margin: 0 0 8px;
        font-size: 1rem;
        color: #1f3350;
      }

      .detail-lead {
        margin: 0;
        color: var(--muted);
        line-height: 1.62;
        font-size: 0.94rem;
      }

      .detail-list {
        margin-top: 10px;
        display: grid;
        gap: 8px;
      }

      .detail-item {
        border: 1px solid var(--border);
        background: #ffffff;
        border-radius: 14px;
        padding: 12px 14px;
      }

      .detail-item-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        font-size: 0.92rem;
        color: #334a67;
        font-weight: 700;
      }

      .detail-track {
        margin-top: 8px;
        height: 9px;
        border-radius: 999px;
        background: #eaf0f5;
        overflow: hidden;
      }

      .detail-fill {
        height: 100%;
        width: var(--w, 50%);
        background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #ffffff), var(--c));
      }

      .detail-desc {
        margin: 8px 0 0;
        line-height: 1.52;
        color: #445872;
        font-size: 0.9rem;
      }

      .evidence-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
        flex-wrap: wrap;
      }

      .evidence-badge {
        display: inline-flex;
        align-items: center;
        border: 1px solid #c7d9ec;
        border-radius: 999px;
        padding: 6px 10px;
        font-size: 0.82rem;
        font-weight: 800;
        color: #315a84;
        background: #edf6ff;
      }

      .evidence-badge.tier-high {
        color: #1b7f5b;
        border-color: #bfe8d6;
        background: #e8f8ef;
      }

      .evidence-badge.tier-mid {
        color: #365f89;
        border-color: #c6d9ef;
        background: #eef5ff;
      }

      .evidence-badge.tier-low {
        color: #8a6432;
        border-color: #e9d6b7;
        background: #fff7ea;
      }

      .evidence-grid {
        margin-top: 10px;
        display: grid;
        gap: 8px;
      }

      .evidence-item {
        border: 1px solid #d5e2f0;
        background: #f7fbff;
        border-radius: 12px;
        padding: 10px 12px;
      }

      .evidence-item-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: 0.88rem;
        font-weight: 800;
        color: #2f4f72;
      }

      .evidence-item-head strong {
        color: #213f63;
      }

      .evidence-item-meta {
        margin-top: 4px;
        color: #5f7895;
        font-size: 0.82rem;
        line-height: 1.45;
      }

      .evidence-observation-wrap {
        margin-top: 10px;
        border: 1px dashed #c8daec;
        background: #f9fcff;
        border-radius: 12px;
        padding: 10px 12px;
      }

      .evidence-subtitle {
        margin: 0;
        color: #274667;
        font-size: 0.86rem;
        font-weight: 800;
      }

      .evidence-observation-list {
        margin: 8px 0 0;
        padding-left: 18px;
        color: #3f5d7e;
        font-size: 0.86rem;
        line-height: 1.5;
      }

      .evidence-observation-list li + li {
        margin-top: 5px;
      }

      .evidence-empty {
        margin: 8px 0 0;
        color: #68809b;
        font-size: 0.85rem;
        line-height: 1.45;
      }

      .guide-list {
        margin-top: 10px;
        display: grid;
        gap: 8px;
      }

      .guide-item {
        border: 1px solid #d6e5f3;
        background: #f6fbff;
        border-radius: 14px;
        padding: 11px 13px;
        line-height: 1.52;
        color: #38516f;
        margin-bottom: 8px;
        font-size: 0.9rem;
      }

      .result-vibe-summary {
        margin: 0 0 14px;
        border: 1px solid #cfe0f1;
        background: linear-gradient(130deg, #f1f8ff 0%, #edf7f2 100%);
        border-radius: 14px;
        padding: 10px 12px;
      }

      .result-vibe-label {
        margin: 0;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.34px;
        color: #2f5d86;
      }

      .result-vibe-text {
        margin: 4px 0 0;
        font-size: 1rem;
        font-weight: 700;
        color: #1d3f63;
      }

      .result-flow {
        margin-top: 12px;
        border: 1px solid #d5e2f0;
        border-radius: 14px;
        background: #f8fbff;
        padding: 10px 11px;
      }

      .result-flow-title {
        margin: 0;
        color: #304d70;
        font-size: 0.86rem;
        font-weight: 800;
      }

      .result-flow-steps {
        margin-top: 8px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
      }

      .flow-step {
        border: 1px solid #d6e2ef;
        border-radius: 12px;
        padding: 8px 8px;
        background: #ffffff;
        display: grid;
        gap: 4px;
      }

      .flow-step-name {
        color: #2b4d73;
        font-size: 0.82rem;
        font-weight: 800;
      }

      .flow-step-state {
        color: #6a7f97;
        font-size: 0.77rem;
        font-weight: 700;
      }

      .flow-step.done {
        border-color: #bfe5d6;
        background: #eefaf4;
      }

      .flow-step.done .flow-step-name {
        color: #1f7354;
      }

      .flow-step.done .flow-step-state {
        color: #288e66;
      }

      .flow-step.locked {
        border-color: #e5d7bf;
        background: #fff8eb;
      }

      .flow-step.locked .flow-step-name {
        color: #78592d;
      }

      .flow-step.locked .flow-step-state {
        color: #9b7640;
      }

      .behavior-plan-grid {
        margin-top: 10px;
        display: grid;
        gap: 8px;
      }

      .behavior-plan-card {
        border: 1px solid #d4e2f0;
        border-radius: 14px;
        background: #ffffff;
        padding: 11px 12px;
      }

      .behavior-plan-card h4 {
        margin: 0;
        color: #204163;
        font-size: 0.9rem;
      }

      .behavior-plan-lead {
        margin: 6px 0 0;
        color: #5a7390;
        font-size: 0.82rem;
        line-height: 1.45;
      }

      .behavior-plan-list {
        margin: 8px 0 0;
        padding-left: 18px;
        color: #3e5c7d;
        font-size: 0.86rem;
        line-height: 1.5;
      }

      .behavior-plan-list li + li {
        margin-top: 4px;
      }

      .button-area {
        margin-top: 18px;
      }

      .share-card-wrap {
        margin-top: 18px;
      }

      .share-card-controls {
        margin-top: 10px;
      }

      .share-card-tools {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
      }

      .result-screen .result-layout {
        display: grid;
        gap: 16px;
      }

      .result-main-column {
        min-width: 0;
      }

      .result-side-column {
        min-width: 0;
      }

      .compat-grid,
      .trend-grid,
      .rx-grid {
        margin-top: 10px;
        display: grid;
        gap: 8px;
      }

      .compat-card,
      .trend-card,
      .rx-card {
        border: 1px solid #d4e2f0;
        border-radius: 14px;
        background: #ffffff;
        padding: 11px 12px;
      }

      .compat-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
      }

      .compat-score {
        font-size: 1.05rem;
        font-weight: 800;
        color: #1f4d7c;
      }

      .compat-band {
        border-radius: 999px;
        border: 1px solid #c9dbee;
        background: #eef6ff;
        color: #355d87;
        font-weight: 800;
        font-size: 0.76rem;
        padding: 4px 8px;
      }

      .compat-band.high {
        border-color: #bde8d5;
        background: #ebfaf2;
        color: #1c7c58;
      }

      .compat-band.mid {
        border-color: #cde0f3;
        background: #f2f8ff;
        color: #2f5a84;
      }

      .compat-band.growth {
        border-color: #ecd9bc;
        background: #fff7ea;
        color: #8a6534;
      }

      .compat-row {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        color: #425f80;
        font-size: 0.85rem;
      }

      .compat-summary {
        margin: 8px 0 0;
        color: #46607f;
        font-size: 0.89rem;
        line-height: 1.5;
      }

      .compat-tip-list {
        margin: 8px 0 0;
        padding-left: 18px;
        color: #476382;
        font-size: 0.86rem;
        line-height: 1.48;
      }

      .trend-timeline {
        display: grid;
        gap: 6px;
      }

      .trend-item {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        font-size: 0.84rem;
        color: #456280;
        padding: 6px 8px;
        border-radius: 10px;
        border: 1px solid #dbe6f2;
        background: #f8fbff;
      }

      .trend-delta-list {
        margin-top: 8px;
        display: grid;
        gap: 6px;
      }

      .trend-delta-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        font-size: 0.84rem;
        color: #456280;
      }

      .trend-delta-value {
        font-weight: 800;
      }

      .trend-delta-value.up {
        color: #1f8f6d;
      }

      .trend-delta-value.down {
        color: #c9683a;
      }

      .trend-delta-value.flat {
        color: #5f748e;
      }

      .rx-card-title {
        margin: 0;
        color: #1f3350;
        font-size: 0.92rem;
      }

      .rx-card-text {
        margin: 7px 0 0;
        color: #476181;
        font-size: 0.88rem;
        line-height: 1.55;
      }

      .rx-card-evidence {
        margin: 7px 0 0;
        color: #607892;
        font-size: 0.8rem;
      }

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

      .actions .button {
        margin-top: 0;
      }

      .status {
        min-height: 22px;
        margin-top: 12px;
        font-size: 0.94rem;
      }

      .status.ok {
        color: var(--success);
      }

      .status.fail {
        color: var(--error);
      }

      .resume-box {
        margin: 0 0 12px;
        padding: 14px;
        border-radius: 16px;
        border: 1px solid #cedeed;
        background: #f2f7fd;
      }

      .resume-title {
        margin: 0;
        font-size: 0.94rem;
        font-weight: 800;
        color: #2b4568;
      }

      .resume-desc {
        margin: 6px 0 10px;
        font-size: 0.88rem;
        color: #5e7088;
      }

      .landing-screen {
        max-width: 620px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }

      .landing-hero {
        position: relative;
        overflow: hidden;
        border-radius: 24px;
        border: 1px solid #cfe0f1;
        padding: 22px 20px 18px;
        background: linear-gradient(135deg, rgba(125, 220, 178, 0.26), rgba(103, 170, 245, 0.24) 55%, rgba(246, 189, 120, 0.22));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.7),
          0 14px 26px rgba(47, 70, 99, 0.14);
      }

      .landing-bubbles {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .landing-bubble {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.34);
        filter: blur(0.2px);
        animation: bubbleFloat 8s ease-in-out infinite;
      }

      .landing-b1 {
        width: 110px;
        height: 110px;
        left: -18px;
        top: -28px;
      }

      .landing-b2 {
        width: 84px;
        height: 84px;
        right: -10px;
        top: 14px;
        animation-delay: -1.8s;
      }

      .landing-b3 {
        width: 120px;
        height: 120px;
        right: 12%;
        bottom: -58px;
        animation-delay: -3.4s;
      }

      .landing-b4 {
        width: 66px;
        height: 66px;
        left: 38%;
        bottom: -24px;
        animation-delay: -5.3s;
      }

      .landing-b5 {
        width: 54px;
        height: 54px;
        left: 12%;
        bottom: 28%;
        animation-delay: -2.5s;
      }

      .landing-b6 {
        width: 44px;
        height: 44px;
        right: 34%;
        top: -12px;
        animation-delay: -4.2s;
      }

      @keyframes bubbleFloat {
        0% {
          transform: translateY(0) scale(1);
        }
        50% {
          transform: translateY(-10px) scale(1.04);
        }
        100% {
          transform: translateY(0) scale(1);
        }
      }

      .landing-eyebrow {
        margin: 0;
        display: inline-block;
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.5px;
        color: #1f7c67;
        background: rgba(255, 255, 255, 0.68);
        padding: 6px 10px;
        border-radius: 999px;
      }

      .landing-title {
        margin: 12px 0 8px;
        color: #1f2f4a;
        font-size: clamp(1.34rem, 4vw, 1.8rem);
        line-height: 1.35;
        letter-spacing: 0.3px;
      }

      .landing-lead {
        margin: 0;
        color: #47607f;
        line-height: 1.62;
        font-size: 0.96rem;
      }

      .landing-recommend {
        margin-top: 12px;
        border: 1px solid rgba(164, 187, 212, 0.5);
        background: rgba(255, 255, 255, 0.55);
        border-radius: 16px;
        padding: 11px 12px;
      }

      .landing-recommend-title {
        margin: 0;
        font-size: 0.9rem;
        color: #1f3a58;
        font-weight: 800;
      }

      .landing-recommend-list {
        margin: 8px 0 0;
        padding-left: 18px;
        display: grid;
        gap: 5px;
        color: #48617e;
        font-size: 0.87rem;
        line-height: 1.45;
      }

      .landing-buttons {
        margin-top: 14px;
        display: grid;
        gap: 8px;
      }

      .landing-quick-start {
        border: 1px dashed #bdd1e6;
        background: #f9fbff;
        border-radius: 16px;
        padding: 14px;
        display: grid;
        gap: 10px;
      }

      .landing-quick-start .landing-enter-btn {
        width: min(420px, 100%);
        justify-self: center;
      }

      .landing-enter-btn {
        width: 100%;
        background: linear-gradient(92deg, #6dd9a0 0%, #87cfd8 45%, #79a8f4 100%);
        color: #f8fbff;
        box-shadow: 0 12px 22px rgba(70, 116, 170, 0.24);
      }

      .landing-enter-btn:hover {
        filter: brightness(1.03);
        transform: translateY(-1px);
      }

      .landing-enter-btn:active {
        transform: translateY(1px) scale(0.996);
      }

      .landing-scroll-btn {
        border: 1px solid #c4d7ea;
        background: rgba(255, 255, 255, 0.66);
        color: #2d476a;
        border-radius: 999px;
        padding: 9px 12px;
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
      }

      .landing-scroll-btn:hover {
        background: rgba(255, 255, 255, 0.85);
      }

      .landing-story {
        display: grid;
        gap: 10px;
      }

      .landing-story-start {
        display: grid;
        justify-items: center;
        gap: 10px;
        margin-top: 2px;
        margin-bottom: 2px;
      }

      .landing-story-start .landing-enter-btn {
        width: min(420px, 100%);
      }

      .landing-story-start .landing-note {
        width: min(560px, 100%);
        text-align: center;
      }

      .landing-step {
        border: 1px solid #d1dfed;
        background: #f4f9ff;
        border-radius: 16px;
        padding: 12px;
      }

      .landing-step.pulse {
        animation: landingStepPulse 0.7s ease;
      }

      .detail-section.pulse {
        animation: landingStepPulse 0.7s ease;
      }

      @keyframes landingStepPulse {
        0% {
          transform: translateY(0);
          box-shadow: 0 0 0 rgba(92, 136, 185, 0);
        }
        50% {
          transform: translateY(-1px);
          box-shadow: 0 0 0 4px rgba(92, 136, 185, 0.22);
        }
        100% {
          transform: translateY(0);
          box-shadow: 0 0 0 rgba(92, 136, 185, 0);
        }
      }

      .landing-step h3 {
        margin: 0 0 6px;
        color: #203554;
        font-size: 1rem;
      }

      .landing-step p {
        margin: 0;
        color: #4c6482;
        line-height: 1.58;
        font-size: 0.93rem;
      }

      .landing-method {
        border: 1px solid #d1dfed;
        background: #f4f9ff;
        border-radius: 16px;
        padding: 12px;
      }

      .landing-method h3 {
        margin: 0 0 8px;
        color: #203554;
        font-size: 1rem;
      }

      .landing-method-grid {
        display: grid;
        gap: 8px;
      }

      .landing-method-item {
        border: 1px dashed #c9daec;
        border-radius: 12px;
        background: #fbfdff;
        padding: 8px 10px;
      }

      .landing-method-kicker {
        margin: 0 0 4px;
        color: #2d547d;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.35px;
      }

      .landing-method-item p {
        margin: 0;
        color: #4d6685;
        line-height: 1.52;
        font-size: 0.86rem;
      }

      .landing-note {
        margin: 0;
        color: #5b7391;
        font-size: 0.9rem;
        line-height: 1.55;
      }

      .landing-resume {
        margin: 0 0 8px;
        color: #2f5d89;
        font-size: 0.88rem;
        font-weight: 700;
      }

      .auth-wrap {
        max-width: 470px;
        margin: 0 auto;
        text-align: center;
      }

      .auth-title {
        margin: 0 0 8px;
        color: #1e2f4b;
        font-size: 1.44rem;
      }

      .auth-desc {
        margin: 0 0 14px;
        color: #5d728d;
        font-size: 0.98rem;
      }

      .auth-actions {
        display: grid;
        gap: 10px;
      }

      .oauth-btn {
        width: 100%;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding-left: 44px;
        overflow: hidden;
        transition:
          transform 0.16s ease,
          box-shadow 0.2s ease,
          border-color 0.2s ease,
          filter 0.2s ease,
          background-color 0.2s ease;
      }

      .oauth-btn .oauth-text {
        width: 100%;
        text-align: center;
        padding-right: 0;
      }

      .oauth-btn:hover {
        transform: translateY(-1px);
      }

      .oauth-btn:active {
        transform: translateY(1px) scale(0.995);
        filter: brightness(0.97);
      }

      .oauth-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(82, 127, 183, 0.25);
      }

      .oauth-icon {
        width: 22px;
        height: 22px;
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.18s ease;
      }

      .oauth-icon img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
      }

      .oauth-btn:hover .oauth-icon {
        transform: translateY(-50%) scale(1.08);
      }

      .oauth-btn:active .oauth-icon {
        transform: translateY(-50%) scale(0.94);
      }

      .oauth-google {
        background: #ffffff;
        color: #1a1a1a;
        border: 1px solid #d9e1ea;
        box-shadow: 0 7px 14px rgba(48, 72, 102, 0.1);
      }

      .oauth-google:hover {
        border-color: #c4d5e7;
        box-shadow: 0 12px 20px rgba(48, 72, 102, 0.16);
      }

      .oauth-kakao {
        background: #fee500;
        color: #1c1b1f;
        box-shadow: 0 8px 14px rgba(254, 229, 0, 0.28);
      }

      .oauth-kakao:hover {
        background: #ffe934;
        box-shadow: 0 12px 22px rgba(212, 190, 9, 0.3);
      }

      .oauth-facebook {
        background: #1877f2;
        color: #fff;
        box-shadow: 0 8px 14px rgba(24, 119, 242, 0.24);
      }

      .oauth-facebook:hover {
        background: #2a85f5;
        box-shadow: 0 12px 22px rgba(24, 119, 242, 0.32);
      }

      .auth-guest-btn {
        width: 100%;
        margin-top: 10px;
        transition:
          transform 0.16s ease,
          box-shadow 0.2s ease,
          border-color 0.2s ease,
          background-color 0.2s ease;
      }

      .auth-guest-btn:hover {
        transform: translateY(-1px);
        border-color: #c1d3e7;
        background: #f2f7fd;
        box-shadow: 0 10px 18px rgba(66, 95, 129, 0.12);
      }

      .auth-guest-btn:active {
        transform: translateY(1px) scale(0.996);
      }

      .auth-guest-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(82, 127, 183, 0.24);
      }

      .auth-note {
        margin-top: 8px;
        color: #6a7e96;
        font-size: 0.86rem;
        line-height: 1.45;
      }

      .profile-overlay {
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(15, 23, 42, 0.42);
        display: grid;
        place-items: center;
        padding: 20px;
      }

      .profile-panel {
        width: min(560px, 100%);
        max-height: min(82vh, 760px);
        overflow: auto;
        border-radius: 24px;
        border: 1px solid #cddded;
        background: #f7fbff;
        box-shadow:
          0 30px 56px rgba(17, 31, 54, 0.32),
          0 10px 22px rgba(17, 31, 54, 0.16);
        padding: 18px;
      }

      .profile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .profile-title {
        margin: 0;
        color: #1f2f49;
        font-size: 1.24rem;
      }

      .profile-subtitle {
        margin: 6px 0 0;
        color: #5f7490;
        font-size: 0.9rem;
      }

      .profile-close-btn {
        border: 1px solid #c8d8ea;
        background: #fff;
        color: #335173;
        border-radius: 999px;
        padding: 7px 12px;
        font-weight: 700;
        cursor: pointer;
      }

      .profile-close-btn:hover {
        background: #f4f9ff;
      }

      .profile-list {
        margin-top: 14px;
        display: grid;
        gap: 8px;
      }

      .profile-toolbar {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
      }

      .profile-select-all {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        color: #3e5777;
        font-weight: 700;
        user-select: none;
      }

      .profile-check {
        width: 16px;
        height: 16px;
        accent-color: #2f8ee6;
        cursor: pointer;
      }

      .profile-delete-btn {
        border: 1px solid #e9b6b6;
        background: #fff1f1;
        color: #a33d3d;
        border-radius: 12px;
        padding: 9px 12px;
        font-size: 0.9rem;
        font-weight: 800;
        cursor: pointer;
      }

      .profile-delete-btn:hover {
        background: #ffe6e6;
      }

      .profile-delete-btn:disabled {
        opacity: 0.58;
        cursor: not-allowed;
      }

      .profile-feedback {
        margin-top: 8px;
        border-radius: 10px;
        padding: 8px 10px;
        font-size: 0.86rem;
        line-height: 1.45;
      }

      .profile-feedback.ok {
        background: #eaf9f1;
        color: #1f7b56;
        border: 1px solid #bfebd1;
      }

      .profile-feedback.fail {
        background: #fff2f2;
        color: #a03f3f;
        border: 1px solid #f0c3c3;
      }

      .profile-item {
        border: 1px solid #d5e3f1;
        background: #ffffff;
        border-radius: 14px;
        padding: 11px 12px;
      }

      .profile-item-clickable {
        cursor: pointer;
        transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
      }

      .profile-item-clickable:hover {
        border-color: #82a9d3;
        box-shadow: 0 10px 18px rgba(47, 84, 130, 0.12);
        transform: translateY(-1px);
      }

      .profile-item-clickable.selected {
        border-color: rgba(96, 166, 136, 0.75);
        box-shadow: 0 10px 20px rgba(46, 106, 83, 0.14);
        background: linear-gradient(135deg, rgba(119, 214, 166, 0.12), rgba(125, 175, 234, 0.1));
      }

      .profile-item-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .profile-item-main {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

      .profile-item-check {
        flex: 0 0 auto;
      }

      .profile-item-name {
        margin: 0;
        color: #213a5b;
        font-weight: 800;
        font-size: 1rem;
      }

      .profile-item-type {
        font-size: 0.95rem;
        font-weight: 800;
        color: #23466f;
        border: 1px solid #c4d7ec;
        border-radius: 999px;
        padding: 4px 10px;
        background: #eef6ff;
      }

      .profile-item-meta {
        margin: 7px 0 0;
        color: #5b7391;
        font-size: 0.86rem;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
      }

      .profile-kind {
        display: inline-flex;
        align-items: center;
        border: 1px solid #cbddef;
        border-radius: 999px;
        padding: 2px 8px;
        background: #f2f8ff;
        font-weight: 700;
        font-size: 0.8rem;
        color: #3a587a;
      }

      .profile-empty,
      .profile-loading,
      .profile-error {
        margin-top: 12px;
        border: 1px dashed #c9daec;
        border-radius: 14px;
        background: #f5faff;
        padding: 14px;
        color: #5c7492;
        font-size: 0.92rem;
        line-height: 1.5;
      }

      .profile-error {
        border-style: solid;
        border-color: #e6b7b7;
        background: #fff3f3;
        color: #a24141;
      }

      .profile-actions {
        margin-top: 14px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      @media (max-width: 560px) {
        .profile-actions {
          grid-template-columns: 1fr;
        }
      }

      .tool-overlay {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(15, 23, 42, 0.42);
        display: grid;
        place-items: center;
        padding: 18px;
      }

      .tool-panel {
        width: min(560px, 100%);
        max-height: min(84vh, 820px);
        overflow: auto;
        border-radius: 24px;
        border: 1px solid #cddded;
        background: #f7fbff;
        box-shadow:
          0 30px 56px rgba(17, 31, 54, 0.3),
          0 10px 22px rgba(17, 31, 54, 0.14);
        padding: 18px;
      }

      .tool-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .tool-title {
        margin: 0;
        color: #1f2f49;
        font-size: 1.2rem;
      }

      .tool-subtitle {
        margin: 6px 0 0;
        color: #5f7490;
        font-size: 0.9rem;
      }

      .tool-close-btn {
        border: 1px solid #c8d8ea;
        background: #fff;
        color: #335173;
        border-radius: 999px;
        padding: 7px 12px;
        font-weight: 700;
        cursor: pointer;
      }

      .tool-close-btn:hover {
        background: #f4f9ff;
      }

      .tool-menu-list {
        margin-top: 14px;
        display: grid;
        gap: 8px;
      }

      .tool-menu-btn {
        border: 1px solid #cfe0f0;
        background: #ffffff;
        border-radius: 14px;
        padding: 11px 12px;
        text-align: left;
        cursor: pointer;
        transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
      }

      .tool-menu-btn:hover {
        border-color: #84aad2;
        box-shadow: 0 10px 18px rgba(47, 84, 130, 0.12);
        transform: translateY(-1px);
      }

      .tool-menu-btn-primary {
        border-color: rgba(111, 188, 160, 0.55);
        background: linear-gradient(135deg, rgba(114, 214, 165, 0.2), rgba(112, 173, 235, 0.18));
        box-shadow: 0 10px 20px rgba(53, 98, 140, 0.14);
      }

      .tool-menu-btn-primary:hover {
        border-color: rgba(89, 163, 137, 0.65);
        background: linear-gradient(135deg, rgba(114, 214, 165, 0.28), rgba(112, 173, 235, 0.26));
      }

      .tool-menu-btn-title {
        margin: 0;
        color: #1f3b5f;
        font-size: 0.95rem;
        font-weight: 800;
      }

      .tool-menu-btn-desc {
        margin: 4px 0 0;
        color: #5f7896;
        font-size: 0.84rem;
        line-height: 1.45;
      }

      .tool-note {
        margin-top: 10px;
        border: 1px dashed #c9daec;
        border-radius: 12px;
        background: #f4f9ff;
        padding: 10px;
        color: #5b7391;
        font-size: 0.84rem;
        line-height: 1.45;
      }

      .nickname-form {
        margin-top: 14px;
        display: grid;
        gap: 10px;
      }

      .nickname-label,
      .board-label {
        margin: 0;
        color: #355274;
        font-size: 0.86rem;
        font-weight: 800;
      }

      .nickname-input,
      .board-input,
      .board-select,
      .board-textarea {
        width: 100%;
        border: 1px solid #c8daec;
        border-radius: 12px;
        padding: 10px 12px;
        font: inherit;
        color: #1f3b5f;
        background: #ffffff;
      }

      .nickname-input:focus,
      .board-input:focus,
      .board-select:focus,
      .board-textarea:focus {
        outline: none;
        border-color: #7aa8d7;
        box-shadow: 0 0 0 3px rgba(123, 171, 225, 0.2);
      }

      .board-select {
        cursor: pointer;
      }

      .board-textarea {
        min-height: 120px;
        resize: vertical;
        line-height: 1.5;
      }

      .nickname-actions,
      .board-compose-actions {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
      }

      .nickname-status,
      .board-status {
        margin: 0;
        min-height: 1.2em;
        color: #5f7896;
        font-size: 0.82rem;
      }

      .nickname-status.ok,
      .board-status.ok {
        color: #2f7a5a;
      }

      .nickname-status.fail,
      .board-status.fail {
        color: #b64848;
      }

      .board-wrap {
        margin-top: 14px;
        display: grid;
        gap: 10px;
      }

      .board-compose {
        border: 1px solid #d1e1f1;
        border-radius: 14px;
        background: #ffffff;
        padding: 12px;
        display: grid;
        gap: 8px;
      }

      .board-category-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
      }

      .board-tab-btn {
        border: 1px solid #cfe0f0;
        background: #fff;
        border-radius: 999px;
        padding: 8px 10px;
        color: #4f6886;
        font-size: 0.82rem;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.16s ease;
      }

      .board-tab-btn:hover {
        border-color: #9dc0df;
        background: #f7fbff;
        color: #274f75;
      }

      .board-tab-btn.is-active {
        border-color: rgba(95, 145, 194, 0.62);
        color: #21557f;
        background: linear-gradient(130deg, rgba(114, 214, 165, 0.2) 0%, rgba(112, 173, 235, 0.2) 100%);
      }

      .board-list {
        display: grid;
        gap: 8px;
        max-height: 360px;
        overflow-y: auto;
        padding-right: 2px;
      }

      .board-empty {
        border: 1px dashed #c9daec;
        border-radius: 12px;
        background: #f4f9ff;
        padding: 12px;
        color: #5b7391;
        font-size: 0.86rem;
      }

      .board-card {
        border: 1px solid #d0e0f0;
        border-radius: 14px;
        background: #ffffff;
        padding: 11px 12px;
        display: grid;
        gap: 6px;
      }

      .board-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
      }

      .board-card-title {
        margin: 0;
        color: #1f3b5f;
        font-size: 0.9rem;
        font-weight: 800;
      }

      .board-card-meta {
        margin: 0;
        color: #5f7896;
        font-size: 0.79rem;
        line-height: 1.4;
      }

      .board-card-content {
        margin: 0;
        color: #46607d;
        font-size: 0.86rem;
        line-height: 1.58;
        white-space: pre-wrap;
        word-break: break-word;
      }

      .board-tag-row {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
      }

      .board-tag {
        border: 1px solid #c9daec;
        border-radius: 999px;
        padding: 2px 8px;
        background: #f4f9ff;
        color: #456180;
        font-size: 0.76rem;
        font-weight: 700;
      }

      .board-delete-btn {
        border: 1px solid #e0c0c0;
        border-radius: 999px;
        background: #fff5f5;
        color: #a54949;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 4px 9px;
        cursor: pointer;
      }

      .board-delete-btn:hover {
        background: #ffecec;
      }

      @media (max-width: 620px) {
        .board-category-tabs {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .board-compose-actions,
        .nickname-actions {
          grid-template-columns: 1fr;
        }
      }

      .ai-coach-wrap {
        margin-top: 14px;
        display: grid;
        gap: 10px;
      }

      .ai-coach-log {
        border: 1px solid #cfe0f0;
        border-radius: 14px;
        background: #ffffff;
        min-height: 220px;
        max-height: 360px;
        overflow-y: auto;
        padding: 12px;
        display: grid;
        gap: 8px;
      }

      .ai-msg {
        max-width: 92%;
        border-radius: 12px;
        padding: 8px 10px;
        font-size: 0.86rem;
        line-height: 1.5;
        white-space: pre-wrap;
        word-break: break-word;
      }

      .ai-msg.assistant {
        justify-self: start;
        background: #f2f8ff;
        border: 1px solid #d2e2f2;
        color: #2d4768;
      }

      .ai-msg.user {
        justify-self: end;
        background: linear-gradient(135deg, rgba(114, 214, 165, 0.25), rgba(112, 173, 235, 0.24));
        border: 1px solid rgba(98, 162, 136, 0.45);
        color: #21425f;
      }

      .ai-coach-input-wrap {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
      }

      .ai-coach-input {
        min-height: 90px;
        border: 1px solid #c9daec;
        border-radius: 12px;
        padding: 10px 12px;
        font: inherit;
        color: #1f3b5f;
        background: #fff;
        resize: vertical;
      }

      .ai-coach-input:focus {
        outline: none;
        border-color: #7aa8d7;
        box-shadow: 0 0 0 3px rgba(123, 171, 225, 0.2);
      }

      .ai-coach-send {
        align-self: end;
        border: none;
        border-radius: 12px;
        padding: 10px 16px;
        font-weight: 800;
        font-size: 0.86rem;
        cursor: pointer;
        color: #ffffff;
        background: linear-gradient(90deg, #5fcf9c 0%, #6a9ce8 100%);
        box-shadow: 0 10px 18px rgba(53, 98, 140, 0.2);
      }

      .ai-coach-send:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        box-shadow: none;
      }

      .ai-coach-status {
        margin: 0;
        min-height: 1.2em;
        color: #5f7896;
        font-size: 0.82rem;
      }

      .ai-coach-status.fail {
        color: #b64848;
      }

      .ai-coach-status.ok {
        color: #2f7a5a;
      }

      .faq-accordion {
        margin-top: 12px;
        display: grid;
        gap: 8px;
      }

      .faq-item {
        border: 1px solid #cfe0f0;
        border-radius: 14px;
        background: #ffffff;
        overflow: hidden;
      }

      .faq-question {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 11px 12px;
        cursor: pointer;
        color: #1f3b5f;
        font-size: 0.9rem;
        font-weight: 700;
      }

      .faq-question::-webkit-details-marker {
        display: none;
      }

      .faq-q-label {
        color: #2f5d86;
        font-weight: 800;
      }

      .faq-chevron {
        margin-left: auto;
        color: #6a819d;
        transition: transform 0.18s ease;
      }

      .faq-item[open] .faq-chevron {
        transform: rotate(180deg);
      }

      .faq-answer {
        padding: 0 12px 12px;
        color: #4b6483;
        font-size: 0.86rem;
        line-height: 1.5;
      }

      .faq-answer p {
        margin: 0;
      }

      .site-footer {
        margin-top: 16px;
        border: 1px solid #d3e0ed;
        border-radius: 20px;
        background: rgba(248, 251, 255, 0.82);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow:
          0 20px 38px rgba(22, 39, 63, 0.14),
          0 8px 18px rgba(22, 39, 63, 0.08);
        padding: 14px;
      }

      .site-footer-top {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 14px;
        align-items: start;
      }

      .footer-contact-title {
        margin: 0;
        color: #203958;
        font-size: 0.97rem;
        font-weight: 800;
      }

      .footer-contact-lead {
        margin: 6px 0 0;
        color: #607894;
        font-size: 0.84rem;
      }

      .footer-contact-actions {
        margin-top: 10px;
        display: inline-flex;
        align-items: center;
        gap: 9px;
      }

      .footer-icon-btn {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        border: 1px solid #c9d8e8;
        background: #ffffff;
        color: #335476;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        text-decoration: none;
        box-shadow: 0 8px 15px rgba(41, 72, 107, 0.1);
        transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
      }

      .footer-icon-btn:hover {
        border-color: #87add5;
        box-shadow: 0 10px 18px rgba(41, 72, 107, 0.16);
        transform: translateY(-1px);
      }

      .footer-icon-btn:focus {
        outline: none;
      }

      .footer-icon-btn:focus-visible {
        box-shadow: 0 0 0 2px rgba(94, 146, 197, 0.34), 0 10px 18px rgba(41, 72, 107, 0.16);
      }

      .footer-icon-btn svg {
        width: 17px;
        height: 17px;
      }

      .footer-contact-lines {
        margin-top: 10px;
        display: grid;
        gap: 5px;
      }

      .footer-contact-line {
        margin: 0;
        color: #4f6886;
        font-size: 0.84rem;
      }

      .footer-contact-line-label {
        color: #294a70;
        font-weight: 800;
      }

      .footer-contact-line a {
        color: #2f5f93;
      }

      .footer-contact-status {
        margin: 6px 0 0;
        min-height: 1.1em;
        color: #2d7a56;
        font-size: 0.8rem;
      }

      .footer-legal-title {
        margin: 0;
        color: #203958;
        font-size: 0.92rem;
        font-weight: 800;
      }

      .footer-legal-actions {
        margin-top: 9px;
        display: grid;
        gap: 8px;
      }

      .footer-legal-btn {
        border: 1px solid #c9daeb;
        background: #ffffff;
        border-radius: 12px;
        padding: 9px 11px;
        color: #35567b;
        font-size: 0.84rem;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
        transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
      }

      .footer-legal-btn:hover {
        border-color: #84abd4;
        box-shadow: 0 10px 18px rgba(41, 72, 107, 0.12);
        transform: translateY(-1px);
      }

      .footer-seo-links {
        margin-top: 9px;
        display: grid;
        gap: 8px;
      }

      .footer-seo-link {
        display: inline-flex;
        align-items: center;
        border: 1px solid #c9daeb;
        background: #ffffff;
        border-radius: 12px;
        padding: 9px 11px;
        color: #35567b;
        font-size: 0.84rem;
        font-weight: 700;
        text-decoration: none;
        transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
      }

      .footer-seo-link:hover {
        border-color: #84abd4;
        box-shadow: 0 10px 18px rgba(41, 72, 107, 0.12);
        transform: translateY(-1px);
      }

      .footer-bottom {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid #d6e2ef;
        color: #67819e;
        font-size: 0.78rem;
      }

      .legal-content {
        margin-top: 12px;
        display: grid;
        gap: 10px;
      }

      .legal-content p {
        margin: 0;
        color: #4b6584;
        font-size: 0.88rem;
        line-height: 1.6;
      }

      .restart-choice-grid {
        margin-top: 12px;
        display: grid;
        gap: 8px;
      }

      .card-save-preview {
        margin-top: 14px;
        display: grid;
        gap: 10px;
      }

      .card-save-preview img {
        width: 100%;
        height: auto;
        border-radius: 16px;
        border: 1px solid #ccdded;
        background: #ffffff;
      }

      .card-save-preview-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
      }

      .card-save-preview-link {
        text-decoration: none;
      }

      .routine-progress {
        margin-top: 12px;
      }

      .routine-progress + .routine-progress {
        margin-top: 10px;
      }

      .routine-progress-label {
        margin: 0 0 6px;
        color: #2b4d73;
        font-size: 0.9rem;
        font-weight: 700;
      }

      .routine-progress-track {
        width: 100%;
        height: 10px;
        background: #dbe7f3;
        border-radius: 999px;
        overflow: hidden;
      }

      .routine-progress-fill {
        height: 100%;
        width: var(--w, 0%);
        background: linear-gradient(90deg, #67cb96 0%, #80bfd6 50%, #79a7ef 100%);
        border-radius: inherit;
      }

      .routine-list {
        margin-top: 12px;
        display: grid;
        gap: 8px;
      }

      .routine-day-grid {
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 6px;
      }

      .routine-day-btn {
        border: 1px solid #d4e2ef;
        border-radius: 999px;
        background: #ffffff;
        color: #365779;
        font-size: 0.8rem;
        font-weight: 800;
        padding: 7px 6px;
        cursor: pointer;
        transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
      }

      .routine-day-btn:hover {
        border-color: #86abd3;
        transform: translateY(-1px);
      }

      .routine-day-btn.active {
        border-color: rgba(108, 176, 151, 0.8);
        background: linear-gradient(125deg, rgba(117, 214, 166, 0.26), rgba(118, 177, 236, 0.24));
        box-shadow: 0 8px 15px rgba(47, 84, 130, 0.14);
      }

      .routine-item {
        border: 1px solid #d4e2ef;
        border-radius: 12px;
        background: #ffffff;
        padding: 10px;
      }

      .routine-item label {
        display: flex;
        gap: 9px;
        align-items: flex-start;
        cursor: pointer;
      }

      .routine-item input {
        margin-top: 2px;
        width: 16px;
        height: 16px;
        accent-color: #2f8ee6;
      }

      .routine-item-text {
        color: #304e70;
        font-size: 0.9rem;
        line-height: 1.5;
      }

      .routine-actions {
        margin-top: 12px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .routine-actions.routine-actions-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      @media (max-width: 560px) {
        .routine-actions {
          grid-template-columns: 1fr;
        }

        .routine-day-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .routine-actions.routine-actions-3 {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 680px) {
        .ai-coach-input-wrap {
          grid-template-columns: 1fr;
        }

        .ai-coach-send {
          width: 100%;
        }
      }

      .security-list {
        margin: 12px 0 0;
        padding-left: 18px;
        color: #425f80;
        font-size: 0.9rem;
        line-height: 1.58;
      }

      .security-list li + li {
        margin-top: 6px;
      }

      .start-screen {
        max-width: 560px;
        margin: 0 auto;
      }

      .start-layout {
        display: grid;
        gap: 16px;
      }

      .start-science-panel {
        border: 1px solid #d2e0ee;
        border-radius: 20px;
        padding: 14px;
        background: linear-gradient(145deg, #f8fcff 0%, #f3f8ff 100%);
      }

      .start-form-panel {
        border: 1px solid #d5e2ef;
        border-radius: 20px;
        background: #ffffff;
        padding: 14px;
      }

      .start-panel-eyebrow {
        margin: 0;
        width: fit-content;
        display: inline-flex;
        border-radius: 999px;
        padding: 5px 10px;
        border: 1px solid #bde3d4;
        background: #edf9f3;
        color: #23775a;
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.45px;
      }

      .start-science-title {
        margin: 10px 0 6px;
        color: #1d3656;
        font-size: 1.06rem;
      }

      .start-science-lead {
        margin: 0;
        color: #52708f;
        font-size: 0.89rem;
        line-height: 1.56;
      }

      .start-science-list {
        margin: 10px 0 0;
        padding-left: 18px;
        color: #3d5f83;
        font-size: 0.87rem;
        line-height: 1.52;
      }

      .start-science-list li + li {
        margin-top: 6px;
      }

      .question-nav {
        margin-top: 14px;
        display: flex;
        gap: 8px;
      }

      .question-nav .button {
        margin-top: 0;
        flex: 1;
        padding: 11px 12px;
        font-size: 0.92rem;
      }

      @media (max-width: 560px) {
        .landing-hero {
          padding: 18px 16px 14px;
        }

        .landing-title {
          font-size: 1.24rem;
        }

        .landing-step {
          padding: 10px;
        }

        .actions {
          grid-template-columns: 1fr;
        }

        .result-flow-steps {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .question-nav {
          flex-direction: column;
        }

        .photo-preview {
          padding: 8px;
        }

        .photo-preview-img {
          width: 100%;
          height: auto;
          max-height: 220px;
        }

        .step-0,
        .step-6 {
          width: 40px;
          height: 40px;
        }

        .step-1,
        .step-5 {
          width: 35px;
          height: 35px;
        }

        .step-2,
        .step-4 {
          width: 31px;
          height: 31px;
        }

        .share-card {
          min-height: 390px;
        }

        .site-footer-top {
          grid-template-columns: 1fr;
        }
      }

      @media (min-width: 1024px) {
        .app-shell {
          width: min(1180px, 100%);
        }

        .card {
          padding: clamp(22px, 3vw, 34px);
        }

        .landing-screen {
          max-width: none;
          max-height: none;
          overflow: visible;
          display: grid;
          grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
          gap: 18px;
          align-items: start;
        }

        .landing-hero {
          position: sticky;
          top: 12px;
        }

        .start-screen {
          max-width: none;
        }

        .start-layout {
          grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
          gap: 18px;
          align-items: start;
        }

        .question-layout {
          grid-template-columns: minmax(0, 1.18fr) minmax(260px, 0.82fr);
          gap: 16px;
          align-items: start;
        }

        .question-side {
          position: sticky;
          top: 12px;
        }

        .result-screen .result-layout {
          grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
          gap: 18px;
          align-items: start;
        }

        .result-side-column {
          position: sticky;
          top: 12px;
        }

        .share-card-wrap {
          margin-top: 0;
        }
      }