:root {
    --gw-paper: #f1eee6;
    --gw-paper-deep: #e5e0d5;
    --gw-ink: #11110f;
    --gw-muted: #666157;
    --gw-line: rgba(17, 17, 15, 0.22);
    --gw-accent: #e65333;
    --gw-money: #173d30;
    --gw-saju: #e65333;
    --gw-signal: #d9f26a;
    --gw-shell: 1280px;
    --gw-gutter: clamp(18px, 3vw, 42px);
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body.gw-page {
    min-width: 320px;
    min-height: 100%;
    margin: 0;
    color: var(--gw-ink);
    background-color: var(--gw-paper);
    background-image:
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(17, 17, 15, 0.045) 50%, transparent calc(50% + 0.5px));
    font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

.gw-skip {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 20;
    padding: 10px 14px;
    color: #fff;
    background: var(--gw-ink);
    font-weight: 800;
    text-decoration: none;
    transform: translateY(-160%);
}

.gw-skip:focus {
    transform: translateY(0);
}

.gw-shell {
    width: min(100%, var(--gw-shell));
    margin: 0 auto;
    border-right: 1px solid var(--gw-line);
    border-left: 1px solid var(--gw-line);
}

.gw-header {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.55fr) auto;
    min-height: 88px;
    border-bottom: 1px solid var(--gw-ink);
}

.gw-brand,
.gw-header__edition,
.gw-nav {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 var(--gw-gutter);
}

.gw-brand {
    gap: 12px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.035em;
    text-decoration: none;
}

.gw-brand__mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--gw-paper);
    background: var(--gw-ink);
    font-family: Georgia, serif;
    font-size: 22px;
    font-style: italic;
}

.gw-header__edition {
    border-left: 1px solid var(--gw-line);
    color: var(--gw-muted);
    font-family: "Courier New", monospace;
    font-size: 10px;
    line-height: 1.45;
    text-transform: uppercase;
}

.gw-nav {
    justify-content: flex-end;
    gap: 24px;
    border-left: 1px solid var(--gw-line);
}

.gw-nav a,
.gw-kicker,
.gw-section-number,
.gw-product__meta,
.gw-status,
.gw-note-list time,
.gw-note-list b,
.gw-build-label {
    font-family: "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

.gw-nav a {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
}

.gw-nav a:hover {
    color: var(--gw-accent);
}

.gw-nav a:focus-visible,
.gw-brand:focus-visible,
.gw-product__link:focus-visible,
.gw-footer a:focus-visible {
    outline: 3px solid var(--gw-accent);
    outline-offset: 4px;
}

.gw-hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    min-height: 690px;
    border-bottom: 1px solid var(--gw-ink);
}

.gw-hero__index {
    grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px var(--gw-gutter);
    border-right: 1px solid var(--gw-line);
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;
}

.gw-hero__index span:first-child {
    font-family: Arial, sans-serif;
    font-size: clamp(72px, 9vw, 124px);
    font-weight: 900;
    letter-spacing: -0.11em;
    line-height: 0.8;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.gw-hero__copy {
    grid-column: 3 / 13;
    align-self: start;
    padding: 80px var(--gw-gutter) 36px;
}

.gw-kicker {
    margin: 0 0 28px;
    color: var(--gw-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.gw-hero h1 {
    max-width: 10.4em;
    margin: 0;
    font-size: clamp(62px, 8.5vw, 120px);
    font-weight: 900;
    letter-spacing: -0.085em;
    line-height: 0.94;
    text-wrap: balance;
    word-break: keep-all;
}

.gw-hero h1 span {
    color: var(--gw-accent);
}

.gw-hero__aside {
    grid-column: 3 / 8;
    align-self: end;
    padding: 20px var(--gw-gutter) 38px;
    border-top: 1px solid var(--gw-line);
}

.gw-hero__aside p {
    max-width: 34em;
    margin: 0;
    color: var(--gw-muted);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.75;
    word-break: keep-all;
}

.gw-hero__aside a {
    display: inline-flex;
    gap: 24px;
    align-items: center;
    margin-top: 22px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--gw-ink);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.gw-proof {
    grid-column: 8 / 13;
    align-self: end;
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    margin: 0;
    border-top: 1px solid var(--gw-line);
    border-left: 1px solid var(--gw-line);
}

.gw-proof div {
    min-height: 124px;
    padding: 20px;
    border-right: 1px solid var(--gw-line);
}

.gw-proof div:last-child {
    border-right: 0;
}

.gw-proof dt {
    color: var(--gw-muted);
    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.gw-proof dd {
    margin: 34px 0 0;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.055em;
}

.gw-section-head {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) minmax(260px, 0.55fr);
    gap: var(--gw-gutter);
    align-items: end;
    min-height: 180px;
    padding: 42px var(--gw-gutter) 30px;
    border-bottom: 1px solid var(--gw-ink);
}

.gw-section-number {
    margin: 0;
    color: var(--gw-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gw-section-head h2 {
    margin: 0;
    font-size: clamp(40px, 5.5vw, 68px);
    font-weight: 900;
    letter-spacing: -0.07em;
    line-height: 0.95;
}

.gw-section-head > p:last-child {
    max-width: 31em;
    margin: 0;
    color: var(--gw-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.65;
    word-break: keep-all;
}

.gw-product {
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
    min-height: 620px;
    border-bottom: 1px solid var(--gw-ink);
}

.gw-product--saju {
    grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr);
}

.gw-product--saju .gw-product__copy {
    grid-column: 2;
    grid-row: 1;
}

.gw-product--saju .gw-preview {
    grid-column: 1;
    grid-row: 1;
}

.gw-product__copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 34px var(--gw-gutter) 38px;
}

.gw-product__meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--gw-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gw-status {
    color: var(--gw-accent);
}

.gw-product h3 {
    margin: 0;
    font-size: clamp(48px, 5vw, 76px);
    font-weight: 900;
    letter-spacing: -0.085em;
    line-height: 0.94;
}

.gw-product__tagline {
    max-width: 18em;
    margin: 22px 0 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.35;
    word-break: keep-all;
}

.gw-product__description {
    max-width: 34em;
    margin: 18px 0 0;
    color: var(--gw-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.75;
    word-break: keep-all;
}

.gw-product__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid var(--gw-ink);
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.gw-product__link:hover {
    color: var(--gw-paper);
    background: var(--gw-ink);
    transform: translateY(-2px);
}

.gw-preview {
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    place-items: center;
    border-left: 1px solid var(--gw-ink);
}

.gw-product--saju .gw-preview {
    border-right: 1px solid var(--gw-ink);
    border-left: 0;
}

.gw-preview--moneybook {
    padding: clamp(28px, 5vw, 72px);
    background:
        radial-gradient(circle at 80% 10%, rgba(217, 242, 106, 0.18), transparent 26%),
        var(--gw-money);
}

.gw-ledger {
    width: min(100%, 620px);
    padding: clamp(22px, 3vw, 38px);
    color: var(--gw-ink);
    background: #f4f1e8;
    box-shadow: 18px 18px 0 rgba(0, 0, 0, 0.24);
    transform: rotate(-1.4deg);
    transition: transform 300ms ease;
}

.gw-preview:hover .gw-ledger {
    transform: rotate(0deg) translateY(-4px);
}

.gw-ledger__head,
.gw-ledger__rows p,
.gw-saju-sheet__head,
.gw-saju-sheet__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.gw-ledger__head {
    padding-bottom: 20px;
    border-bottom: 2px solid var(--gw-ink);
}

.gw-ledger__head div {
    display: grid;
    gap: 4px;
}

.gw-ledger__head span,
.gw-ledger__balance span,
.gw-ledger__balance small,
.gw-ledger__rows,
.gw-saju-sheet__head,
.gw-saju-sheet__label,
.gw-saju-sheet__foot {
    font-family: "Courier New", monospace;
}

.gw-ledger__head span,
.gw-ledger__balance span,
.gw-saju-sheet__head,
.gw-saju-sheet__label,
.gw-saju-sheet__foot {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.gw-ledger__head strong {
    font-size: 18px;
}

.gw-ledger__signal {
    color: #287356;
}

.gw-ledger__balance {
    display: grid;
    gap: 6px;
    padding: 28px 0 20px;
}

.gw-ledger__balance strong {
    font-size: clamp(34px, 4vw, 54px);
    letter-spacing: -0.07em;
}

.gw-ledger__balance small {
    color: var(--gw-muted);
    font-size: 9px;
}

.gw-ledger__chart {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 5px;
    align-items: end;
    height: 110px;
    padding: 12px 0 0;
    border-bottom: 1px solid var(--gw-ink);
    background: repeating-linear-gradient(to bottom, transparent 0 26px, rgba(17, 17, 15, 0.1) 26px 27px);
}

.gw-ledger__chart i {
    display: block;
    height: var(--bar);
    background: var(--gw-money);
}

.gw-ledger__rows {
    padding-top: 12px;
}

.gw-ledger__rows p {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid rgba(17, 17, 15, 0.16);
    font-size: 10px;
}

.gw-preview--saju {
    padding: clamp(28px, 5vw, 68px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 12%, transparent 12% 84%, rgba(17, 17, 15, 0.12) 84%),
        var(--gw-saju);
}

.gw-saju-sheet {
    position: relative;
    width: min(100%, 610px);
    padding: clamp(24px, 3.5vw, 46px);
    color: var(--gw-ink);
    background: #f6f0e5;
    box-shadow: -18px 18px 0 rgba(31, 46, 91, 0.9);
    transform: rotate(1.2deg);
    transition: transform 300ms ease;
}

.gw-preview:hover .gw-saju-sheet {
    transform: rotate(0deg) translateY(-4px);
}

.gw-saju-sheet__head {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--gw-ink);
}

.gw-saju-sheet__head strong {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 900;
}

.gw-saju-sheet__label {
    margin: 42px 0 0;
    color: var(--gw-saju);
}

.gw-saju-sheet h4 {
    max-width: 11em;
    margin: 14px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(35px, 4.2vw, 58px);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.gw-saju-sheet__body {
    max-width: 34em;
    margin: 30px 0 48px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(14px, 1.5vw, 18px);
    line-height: 1.7;
}

.gw-saju-sheet__foot {
    padding-top: 16px;
    border-top: 1px solid var(--gw-ink);
}

.gw-preview__stamp {
    position: absolute;
    right: 4%;
    bottom: 5%;
    display: grid;
    width: 88px;
    height: 88px;
    place-content: center;
    color: var(--gw-ink);
    background: var(--gw-signal);
    font-family: Arial, sans-serif;
    font-size: 38px;
    font-weight: 900;
    line-height: 0.7;
    text-align: center;
    transform: rotate(8deg);
}

.gw-preview__stamp small {
    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
}

.gw-principle {
    display: grid;
    grid-template-columns: 80px minmax(0, 1.2fr) minmax(280px, 0.55fr);
    gap: var(--gw-gutter);
    align-items: end;
    min-height: 500px;
    padding: 70px var(--gw-gutter);
    color: var(--gw-paper);
    background: var(--gw-ink);
}

.gw-principle h2 {
    max-width: 10em;
    margin: 0;
    font-size: clamp(50px, 6.8vw, 88px);
    font-weight: 900;
    letter-spacing: -0.075em;
    line-height: 0.98;
    word-break: keep-all;
}

.gw-principle > div > p:first-child {
    margin: 0;
    color: rgba(241, 238, 230, 0.72);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
    word-break: keep-all;
}

.gw-principle__signature {
    margin: 34px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(241, 238, 230, 0.28);
    font-family: "Courier New", monospace;
    font-size: 10px;
    text-transform: uppercase;
}

.gw-notes {
    border-bottom: 1px solid var(--gw-ink);
}

.gw-note-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gw-note-list li {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 80px;
    gap: var(--gw-gutter);
    align-items: center;
    min-height: 84px;
    padding: 16px var(--gw-gutter);
    border-bottom: 1px solid var(--gw-line);
}

.gw-note-list li:last-child {
    border-bottom: 0;
}

.gw-note-list time,
.gw-note-list b {
    color: var(--gw-muted);
    font-size: 10px;
    letter-spacing: 0.04em;
}

.gw-note-list span {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    word-break: keep-all;
}

.gw-note-list b {
    text-align: right;
}

.gw-footer {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) minmax(220px, 0.4fr);
    gap: var(--gw-gutter);
    align-items: end;
    min-height: 440px;
    padding: 68px var(--gw-gutter) 42px;
}

.gw-footer h2 {
    margin: 0;
    font-size: clamp(46px, 6vw, 78px);
    font-weight: 900;
    letter-spacing: -0.075em;
    line-height: 0.98;
    word-break: keep-all;
}

.gw-footer a {
    display: inline-flex;
    gap: 28px;
    margin-top: 32px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--gw-accent);
    font-family: "Courier New", monospace;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.gw-footer__meta {
    margin: 0;
    color: var(--gw-muted);
    font-family: "Courier New", monospace;
    font-size: 10px;
    line-height: 1.6;
    text-transform: uppercase;
}

.gw-build-label {
    position: fixed;
    right: 10px;
    bottom: 8px;
    z-index: 5;
    color: rgba(17, 17, 15, 0.3);
    font-size: 9px;
    pointer-events: none;
}

@media (max-width: 900px) {
    .gw-header {
        grid-template-columns: 1fr auto;
    }

    .gw-header__edition {
        display: none;
    }

    .gw-nav {
        border-left: 1px solid var(--gw-line);
    }

    .gw-hero__index {
        grid-column: 1 / 2;
    }

    .gw-hero__copy {
        grid-column: 2 / 13;
    }

    .gw-hero__aside {
        grid-column: 2 / 8;
    }

    .gw-proof {
        grid-column: 8 / 13;
    }

    .gw-product,
    .gw-product--saju {
        grid-template-columns: 1fr;
    }

    .gw-product--saju .gw-product__copy,
    .gw-product--saju .gw-preview {
        grid-column: 1;
        grid-row: auto;
    }

    .gw-product__copy {
        min-height: 510px;
    }

    .gw-preview,
    .gw-product--saju .gw-preview {
        min-height: 560px;
        border-top: 1px solid var(--gw-ink);
        border-right: 0;
        border-left: 0;
    }
}

@media (max-width: 680px) {
    body.gw-page {
        background-image: none;
    }

    .gw-shell {
        border-right: 0;
        border-left: 0;
    }

    .gw-header {
        min-height: 70px;
    }

    .gw-brand,
    .gw-nav {
        padding: 0 16px;
    }

    .gw-brand {
        font-size: 14px;
    }

    .gw-brand__mark {
        width: 29px;
        height: 29px;
        font-size: 19px;
    }

    .gw-nav {
        gap: 14px;
    }

    .gw-nav a {
        font-size: 9px;
    }

    .gw-nav a:nth-child(2) {
        display: none;
    }

    .gw-hero {
        display: block;
        min-height: 0;
    }

    .gw-hero__index {
        display: none;
    }

    .gw-hero__copy {
        padding: 68px 18px 42px;
    }

    .gw-kicker {
        max-width: 26em;
        margin-bottom: 20px;
        font-size: 9px;
        line-height: 1.5;
    }

    .gw-hero h1 {
        max-width: 8.5em;
        font-size: clamp(48px, 14vw, 62px);
        letter-spacing: -0.08em;
        line-height: 0.94;
    }

    .gw-hero__aside {
        padding: 28px 18px 34px;
    }

    .gw-proof {
        grid-template-columns: 1fr 1fr;
        border-left: 0;
    }

    .gw-proof div {
        min-height: 108px;
        padding: 16px 18px;
    }

    .gw-proof div:last-child {
        grid-column: 1 / -1;
        min-height: 84px;
        border-top: 1px solid var(--gw-line);
    }

    .gw-proof dd {
        margin-top: 28px;
        font-size: 17px;
    }

    .gw-section-head {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;
        min-height: 155px;
        padding: 34px 18px 24px;
    }

    .gw-section-head > p:last-child {
        grid-column: 2;
    }

    .gw-section-head h2 {
        font-size: 42px;
    }

    .gw-product__copy {
        min-height: 500px;
        padding: 24px 18px 26px;
    }

    .gw-product__meta {
        font-size: 9px;
    }

    .gw-product h3 {
        font-size: 52px;
    }

    .gw-product__tagline {
        font-size: 19px;
    }

    .gw-preview,
    .gw-product--saju .gw-preview {
        min-height: 430px;
    }

    .gw-preview--moneybook,
    .gw-preview--saju {
        padding: 34px 24px;
    }

    .gw-ledger {
        padding: 22px;
        box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.24);
    }

    .gw-ledger__balance strong {
        font-size: 34px;
    }

    .gw-ledger__chart {
        height: 84px;
    }

    .gw-saju-sheet {
        padding: 22px;
        box-shadow: -10px 10px 0 rgba(31, 46, 91, 0.9);
    }

    .gw-saju-sheet__head span {
        display: none;
    }

    .gw-saju-sheet__label {
        margin-top: 28px;
    }

    .gw-saju-sheet h4 {
        font-size: 38px;
    }

    .gw-saju-sheet__body {
        margin: 24px 0 32px;
        font-size: 14px;
    }

    .gw-preview__stamp {
        right: 10px;
        bottom: 12px;
        width: 70px;
        height: 70px;
        font-size: 30px;
    }

    .gw-principle {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;
        min-height: 560px;
        padding: 54px 18px;
    }

    .gw-principle h2 {
        font-size: 50px;
    }

    .gw-principle > div {
        grid-column: 2;
    }

    .gw-note-list li {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 12px;
        min-height: 100px;
        padding: 18px;
    }

    .gw-note-list b {
        grid-column: 2;
        text-align: left;
    }

    .gw-footer {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;
        min-height: 500px;
        padding: 54px 18px 28px;
    }

    .gw-footer h2 {
        font-size: 48px;
    }

    .gw-footer a {
        max-width: 100%;
        gap: 10px;
        overflow-wrap: anywhere;
        font-size: 11px;
    }

    .gw-footer__meta {
        grid-column: 2;
        margin-top: 36px;
    }

    .gw-build-label {
        position: static;
        display: block;
        padding: 0 18px 10px;
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}