:root {
        color-scheme: light;
        --ink: #171830;
        --body: #5f6377;
        --muted: #8a8ea3;
        --line: #e8e9f1;
        --panel: rgba(255, 255, 255, 0.86);
        --purple: #8238d7;
        --purple-2: #b16cf0;
        --teal: #13bdbd;
        --green: #33ad5e;
        --pink: #e72f78;
        --blue: #3162c7;
        --orange: #ff8a21;
        --shadow: 0 18px 50px rgba(36, 37, 62, 0.12);
        --radius: 8px;
        --max: 1160px;
      }

      * { box-sizing: border-box; }

      html {
        scroll-behavior: smooth;
        background-color: #fbfbfd;
        color: #171830;
      }

      body {
        margin: 0;
        overflow-x: clip;
        background:
          radial-gradient(circle at 82% 18%, rgba(19, 189, 189, 0.15), transparent 18rem),
          radial-gradient(circle at 96% 32%, rgba(177, 108, 240, 0.14), transparent 13rem),
          radial-gradient(circle at 88% 50%, rgba(19, 189, 189, 0.08), transparent 20rem),
          #fbfbfd;
        color: var(--ink);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
        letter-spacing: 0;
      }

      a { color: inherit; }

      .page {
        width: min(100% - 48px, var(--max));
        margin: 0 auto;
      }

      .site-header {
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgba(251, 251, 253, 0.82);
        backdrop-filter: blur(18px);
      }

      .nav {
        display: flex;
        min-height: 78px;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
      }

      .brand,
      .nav-links,
      .nav-actions {
        display: flex;
        align-items: center;
      }

      .brand {
        gap: 13px;
        font-size: 26px;
        font-weight: 820;
        text-decoration: none;
      }

      .logo-mark {
        display: grid;
        width: 32px;
        gap: 5px;
      }

      .logo-mark span {
        display: block;
        height: 6px;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--purple-2), var(--teal));
      }

      .logo-mark span:nth-child(1) { width: 30px; }
      .logo-mark span:nth-child(2) { width: 20px; }
      .logo-mark span:nth-child(3) { width: 26px; }
      .logo-mark span:nth-child(4) { width: 12px; }

      .nav-links {
        gap: 42px;
        font-weight: 680;
      }

      .nav-links a {
        position: relative;
        color: var(--ink);
        text-decoration: none;
      }

      .nav-links a.active {
        color: #008c78;
      }

      .nav-links a.active::after {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -15px;
        height: 2px;
        border-radius: 99px;
        background: #008c78;
        content: "";
      }

      .nav-actions { gap: 12px; }

      .button {
        display: inline-flex;
        min-height: 58px;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 0 34px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 9px 22px rgba(36, 37, 62, 0.06);
        color: var(--ink);
        font-size: 17px;
        font-weight: 780;
        text-decoration: none;
        white-space: nowrap;
      }

      .button.primary {
        border-color: transparent;
        background: linear-gradient(135deg, #7f37d6, #b15fea);
        color: #fff;
      }

      .github-icon {
        display: inline-grid;
        width: 24px;
        height: 24px;
        place-items: center;
        border-radius: 50%;
        background: #050507;
        color: #fff;
        font-size: 14px;
        font-weight: 900;
        line-height: 1;
      }

      .hero {
        position: relative;
        display: grid;
        grid-template-columns: minmax(520px, 1fr) minmax(410px, 0.98fr);
        gap: clamp(30px, 4vw, 42px);
        align-items: center;
        min-height: 590px;
        padding: 18px 0 18px;
        overflow: hidden;
      }

      .hero-copy {
        position: relative;
        z-index: 2;
        max-width: 620px;
      }

      .eyebrow {
        display: inline-flex;
        margin: 0 0 25px;
        padding: 11px 22px;
        border-radius: 999px;
        background: #f0e4ff;
        color: #3f355b;
        font-size: 17px;
        font-weight: 650;
      }

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

      h1 {
        display: inline-block;
        margin-bottom: 16px;
        padding-bottom: 0.18em;
        background: linear-gradient(90deg, #241447 0%, #6c3bc3 34%, #008c80 62%, #15163d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-size: clamp(58px, 8vw, 92px);
        font-weight: 860;
        line-height: 1.2;
        overflow: visible;
      }

      .hero h2 {
        max-width: 620px;
        margin-bottom: 23px;
        color: #24253d;
        font-size: clamp(28px, 2.6vw, 34px);
        line-height: 1.2;
        overflow-wrap: normal;
        text-wrap: balance;
        word-break: keep-all;
      }

      .lead {
        max-width: 500px;
        margin-bottom: 30px;
        color: var(--body);
        font-size: 18px;
        line-height: 1.68;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 22px;
        margin-bottom: 24px;
      }

      .quick-note {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--body);
        font-size: 16px;
      }

      .spark {
        color: #a876ef;
        font-size: 21px;
      }

      .phone-stage {
        position: relative;
        min-height: 560px;
        overflow: visible;
      }

      .blob {
        position: absolute;
        border-radius: 48% 52% 55% 45%;
        opacity: 0.68;
        filter: blur(0.1px);
      }

      .blob.teal {
        inset: 52px 12px 52px 82px;
        background: rgba(187, 235, 224, 0.62);
        transform: rotate(-11deg);
      }

      .blob.mint {
        right: 250px;
        bottom: 56px;
        width: 270px;
        height: 250px;
        background: rgba(219, 247, 240, 0.72);
        transform: rotate(18deg);
      }

      .blob.lilac {
        right: -18px;
        bottom: 70px;
        width: 190px;
        height: 170px;
        background: rgba(229, 207, 255, 0.62);
        transform: rotate(-25deg);
      }

      .character {
        position: absolute;
        right: -40px;
        bottom: -10px;
        z-index: 3;
        width: 240px;
        height: auto;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
      }

      .phone {
        position: relative;
        z-index: 2;
        width: min(360px, 78vw);
        min-height: 555px;
        margin: 0 auto;
        padding: 15px;
        border: 7px solid #151515;
        border-radius: 45px;
        background: #fff;
        box-shadow: 0 24px 60px rgba(18, 20, 38, 0.26);
      }

      .phone::before {
        position: absolute;
        top: 14px;
        left: 50%;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #09090c;
        content: "";
        transform: translateX(-50%);
      }

      .phone-screen {
        padding: 42px 20px 20px;
        color: #777183;
      }

      .phone-title {
        margin-bottom: 12px;
        color: #b896d2;
        font-size: 16px;
        font-weight: 830;
      }

      .phone-subtitle {
        margin-bottom: 25px;
        font-size: 13px;
        font-weight: 700;
      }

      .report-list {
        display: grid;
        gap: 17px;
      }

      .report-row {
        display: grid;
        grid-template-columns: 46px 1fr 78px;
        gap: 13px;
        align-items: center;
        font-size: 14px;
      }

      .report-track {
        height: 9px;
        overflow: hidden;
        border-radius: 99px;
        background: #e5e5ea;
      }

      .report-fill {
        display: block;
        width: var(--w);
        height: 100%;
        border-radius: inherit;
        background: var(--c);
      }

      .weekly {
        margin-top: 32px;
      }

      .weekly-title {
        margin-bottom: 13px;
        color: #b896d2;
        font-size: 15px;
        font-weight: 820;
      }

      .week-bars {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 16px;
        align-items: end;
        height: 92px;
      }

      .week-item {
        display: grid;
        gap: 7px;
        justify-items: center;
        color: #777183;
        font-size: 11px;
      }

      .stack {
        display: flex;
        width: 15px;
        height: 62px;
        flex-direction: column-reverse;
        overflow: hidden;
        border-radius: 2px;
        background: #e8e8ed;
      }

      .stack i {
        display: block;
        height: var(--h);
        background: var(--c);
      }

      .legend {
        display: flex;
        flex-wrap: wrap;
        gap: 9px 13px;
        margin-top: 18px;
        color: #837c8c;
        font-size: 10px;
      }

      .legend span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

      .legend span::before {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--c);
        content: "";
      }

      .summary-strip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        overflow: hidden;
        margin-top: 2px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--line);
        box-shadow: var(--shadow);
      }

      .summary-card {
        display: grid;
        grid-template-columns: 68px 1fr;
        gap: 18px;
        align-items: center;
        min-height: 128px;
        padding: 24px;
        background: rgba(255, 255, 255, 0.9);
      }

      .round-icon {
        display: inline-flex;
        width: 62px;
        height: 62px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--a), var(--b));
        color: #fff;
        font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", sans-serif;
        font-size: 31px;
        font-weight: 900;
        line-height: 1;
        text-align: center;
      }

      .round-icon > span {
        display: block;
        width: 1em;
        line-height: 1;
        transform: translateY(-0.02em);
      }

      .round-icon .icon-lightning {
        transform: translateY(0.02em);
      }

      .round-icon .icon-bars {
        transform: translateY(-0.01em);
      }

      .round-icon .icon-star {
        transform: translateY(-0.03em);
      }

      .summary-card h3,
      .feature h3,
      .preview h3 {
        margin-bottom: 7px;
        font-size: 20px;
        line-height: 1.26;
      }

      .summary-card p,
      .feature p,
      .preview p {
        margin-bottom: 0;
        color: var(--body);
        line-height: 1.52;
      }

      .section {
        padding: 26px 0 0;
      }

      .section-title {
        margin-bottom: 18px;
        font-size: 23px;
        font-weight: 840;
      }

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

      .feature {
        min-height: 134px;
        padding: 23px 20px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--panel);
        box-shadow: 0 13px 34px rgba(36, 37, 62, 0.07);
      }

      .feature-head {
        display: grid;
        grid-template-columns: 55px 1fr;
        gap: 15px;
        align-items: center;
      }

      .feature .round-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
      }

      .previews {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
        align-items: stretch;
      }

      .preview {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        text-align: center;
      }

      .preview-figure {
        display: block;
        aspect-ratio: 3 / 4;
        margin: 0 0 14px;
        padding: 12px;
        overflow: hidden;
        border: 1px solid rgba(216, 214, 231, 0.9);
        border-radius: 28px;
        background:
          linear-gradient(180deg, rgba(250, 248, 255, 0.98), rgba(241, 239, 250, 0.98)),
          radial-gradient(circle at top, rgba(169, 140, 255, 0.12), transparent 52%);
        box-shadow: 0 18px 42px rgba(36, 37, 62, 0.08);
      }

      .mock {
        position: relative;
        display: flex;
        height: 284px;
        min-height: 284px;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 12px;
        overflow: hidden;
        padding: 18px;
        border: 1px solid rgba(112, 103, 143, 0.16);
        border-radius: 18px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 249, 253, 0.96)),
          radial-gradient(circle at 20% 0%, rgba(177, 108, 240, 0.12), transparent 46%),
          radial-gradient(circle at 90% 20%, rgba(19, 189, 189, 0.12), transparent 42%);
        box-shadow: 0 18px 42px rgba(36, 37, 62, 0.09);
        transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
      }

      .preview:hover .mock {
        border-color: rgba(130, 56, 215, 0.22);
        box-shadow: 0 24px 52px rgba(36, 37, 62, 0.13);
        transform: translateY(-4px);
      }

      .preview-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        background: transparent;
      }

      .preview h3 {
        margin-bottom: 6px;
        color: #202238;
        font-size: 18px;
        font-weight: 840;
        letter-spacing: 0;
      }

      .preview p {
        margin-bottom: 0;
        color: #6d7082;
        font-size: 14px;
        line-height: 1.45;
        word-break: keep-all;
      }

      .preview-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        color: #777a91;
        font-size: 11px;
        font-weight: 820;
        letter-spacing: 0;
        text-align: left;
      }

      .preview-topbar span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

      .preview-topbar span::before {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent, var(--purple));
        content: "";
      }

      .preview-surface {
        display: grid;
        min-height: 0;
        flex: 1;
        align-content: center;
        gap: 12px;
        overflow: hidden;
        padding: 12px;
        border: 1px solid rgba(232, 233, 241, 0.9);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.74);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
      }

      .mock-list {
        display: grid;
        gap: 8px;
      }

      .mock-row {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        min-height: 42px;
        padding: 6px 7px;
        border: 1px solid rgba(232, 233, 241, 0.86);
        border-radius: 12px;
        background: #fff;
        text-align: left;
      }

      .mock-row b {
        display: grid;
        width: 31px;
        height: 31px;
        place-items: center;
        border-radius: 10px;
        background: var(--c);
        color: #fff;
        font-size: 11px;
        font-weight: 840;
      }

      .mock-row span {
        display: block;
        overflow: hidden;
        color: #34364d;
        font-size: 12px;
        font-weight: 760;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mock-row em {
        display: block;
        margin-top: 3px;
        color: #9ca0b3;
        font-size: 11px;
        font-style: normal;
        font-weight: 650;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mock-time {
        color: #7e8295;
        font-size: 11px;
        font-weight: 760;
      }

      .timeline-mock {
        display: grid;
        gap: 14px;
      }

      .timeline-slot {
        display: grid;
        grid-template-columns: 34px 1fr;
        gap: 9px;
        align-items: center;
        color: #8d91a4;
        font-size: 10px;
        font-weight: 760;
        text-align: left;
      }

      .timeline-line {
        height: 18px;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--c1) 0 var(--p1), var(--c2) var(--p1) var(--p2), var(--c3) var(--p2) 100%);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
      }

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

      .choice-grid span {
        display: grid;
        min-height: 48px;
        place-items: center;
        border-radius: 13px;
        background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 72%, #ffffff));
        color: #fff;
        font-size: 12px;
        font-weight: 840;
        box-shadow: 0 8px 16px color-mix(in srgb, var(--c) 20%, transparent);
      }

      .timer {
        display: grid;
        justify-items: center;
        gap: 10px;
        color: #25263f;
      }

      .timer-badge {
        display: inline-flex;
        padding: 7px 12px;
        border-radius: 999px;
        background: #eef7ff;
        color: #2176d8;
        font-size: 12px;
        font-weight: 820;
      }

      .timer strong {
        color: #24253d;
        font-size: 18px;
      }

      .timer time {
        font-size: 30px;
        font-weight: 840;
      }

      .timer .timer-button {
        display: grid;
        width: 100%;
        min-height: 42px;
        place-items: center;
        border: 0;
        border-radius: 13px;
        background: linear-gradient(90deg, #7f37d6, #b15fea);
        color: #fff;
        font-size: 14px;
        font-weight: 820;
      }

      .mini-report {
        display: grid;
        gap: 12px;
        text-align: left;
      }

      .mini-report-total {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        color: #25263f;
        font-size: 13px;
        font-weight: 820;
      }

      .mini-report-total strong {
        color: #7f37d6;
        font-size: 22px;
      }

      .mini-report .barline {
        display: grid;
        grid-template-columns: 38px 1fr 42px;
        gap: 8px;
        align-items: center;
        color: #777a91;
        font-size: 11px;
        font-weight: 720;
      }

      .mini-report i {
        display: block;
        width: var(--w);
        height: 9px;
        border-radius: 99px;
        background: var(--c);
      }

      .bar-track {
        overflow: hidden;
        border-radius: 999px;
        background: #ececf2;
      }

      .belief {
        display: grid;
        grid-template-columns: 330px 1fr 260px;
        gap: 38px;
        align-items: center;
        margin-top: 34px;
        padding: 28px 34px;
        border-radius: 16px;
        background: linear-gradient(110deg, #e9fbf7, #f6fffb);
      }

      .landscape {
        min-height: 150px;
        border-radius: 12px;
        background:
          radial-gradient(circle at 67% 26%, #ffd183 0 18px, transparent 19px),
          radial-gradient(circle at 18% 32%, #fff 0 20px, transparent 21px),
          radial-gradient(circle at 39% 25%, #fff 0 13px, transparent 14px),
          linear-gradient(145deg, transparent 52%, #dca65b 53% 55%, transparent 56%),
          linear-gradient(150deg, #6bc8a9 0 34%, transparent 35%),
          linear-gradient(30deg, #8dd7bd 0 44%, #c6efe2 45%);
      }

      .belief h2 {
        margin-bottom: 14px;
        color: #068c6f;
        font-size: 27px;
      }

      .belief p {
        margin-bottom: 0;
        color: #363a4f;
        font-size: 16px;
        line-height: 1.7;
      }

      .check-list {
        display: grid;
        gap: 18px;
        color: #4b5265;
        font-weight: 720;
      }

      .check-list span {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .check-list span::before {
        display: grid;
        width: 24px;
        height: 24px;
        place-items: center;
        border-radius: 50%;
        background: #1b9d7d;
        color: #fff;
        content: "✓";
      }

      .cta {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 22px;
        align-items: center;
        margin: 22px auto 22px;
        padding: 28px 36px;
        border: 1px solid #d8c1ff;
        border-radius: 16px;
        background: linear-gradient(100deg, #8946df, #e9d5ff);
        color: #fff;
      }

      .cta h2 {
        margin-bottom: 7px;
        font-size: 24px;
      }

      .cta p {
        margin-bottom: 0;
        opacity: 0.86;
      }

      .site-footer {
        display: flex;
        min-height: 58px;
        align-items: center;
        justify-content: space-between;
        color: #717589;
        font-size: 14px;
      }

      .footer-links {
        display: flex;
        gap: 45px;
      }

      .footer-links a {
        text-decoration: none;
      }

      @media (max-width: 980px) {
        .nav-links { gap: 22px; }

        .hero {
          grid-template-columns: 1fr;
          min-height: 0;
          padding-top: 34px;
        }

        .hero-copy {
          max-width: 680px;
        }

        .phone-stage {
          min-height: 520px;
        }

        .summary-strip,
        .feature-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

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

        .belief,
        .cta {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 700px) {
        .page { width: min(100% - 28px, var(--max)); }

        .nav {
          min-height: 68px;
        }

        .brand {
          font-size: 22px;
        }

        .nav-links {
          display: none;
        }

        .nav-actions .button {
          min-height: 44px;
          padding: 0 16px;
          font-size: 14px;
        }

        h1 {
          font-size: 56px;
        }

        .hero h2 {
          font-size: clamp(24px, 7vw, 29px);
          line-height: 1.22;
        }

        .hero-actions,
        .site-footer {
          align-items: stretch;
          flex-direction: column;
        }

        .button {
          width: 100%;
        }

        .phone {
          width: min(330px, 94vw);
          min-height: 530px;
        }

        .character {
          right: -20px;
          bottom: -8px;
          width: 160px;
        }

        .summary-strip,
        .feature-grid,
        .previews {
          grid-template-columns: 1fr;
        }

        .summary-card {
          grid-template-columns: 58px 1fr;
          padding: 20px;
        }

        .belief {
          padding: 22px;
        }
      }