@font-face {
    font-family: "SkyhueChukmun";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunKm.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

.chukmun-hero h1 {
    line-height: 1.22;
}

.chukmun-grid {
    display: grid;
    grid-template-columns: 430px 1fr;
    align-items: start;
    gap: 20px;
}

.chukmun-editor {
    position: sticky;
    top: 98px;
}

.chukmun-editor label {
    display: block;
    margin-bottom: 16px;
    color: var(--subtle);
    font-size: 13px;
    font-weight: 600;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.clan-fields[hidden] {
    display: none;
}

.search-line {
    position: relative;
    display: block;
}

.search-line input {
    padding-right: 75px;
}

.lookup {
    position: absolute;
    right: 5px;
    bottom: 5px;
    height: 40px;
    padding: 0 17px;
    border: 0;
    border-radius: 6px;
    color: var(--white);
    background: var(--pine-soft);
    cursor: pointer;
}

.clan-results {
    display: flex;
    max-height: 135px;
    flex-wrap: wrap;
    gap: 6px;
    overflow-y: auto;
    margin: -7px 0 12px;
}

.clan-results:empty {
    display: none;
}

.clan-choice {
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--subtle);
    background: #fffdf8;
    font-size: 13px;
    cursor: pointer;
}

.clan-choice.selected,
.clan-choice:hover {
    color: var(--white);
    background: var(--pine-soft);
}

.clan-status,
.settings-link {
    display: block;
    margin: -3px 0 14px;
    color: var(--subtle);
    font-size: 12px;
    line-height: 1.45;
}

.settings-link {
    margin: -3px 0 16px;
    color: var(--gold);
    font-weight: 700;
}

.date-summary {
    margin: 0 0 18px;
    padding: 14px;
    border-radius: 8px;
    color: var(--subtle);
    background: #f7f5ee;
    font-size: 13px;
    line-height: 1.55;
}

.date-summary strong,
.date-summary span {
    display: block;
}

.preview-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.preview-heading .panel-title {
    margin: 0;
}

.preview-heading > span {
    padding: 7px 12px;
    border-radius: 20px;
    color: var(--pine);
    background: #eef1e7;
    font-size: 13px;
    font-weight: 600;
}

.mode-toggle {
    display: flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #f7f5ee;
}

.mode-toggle button {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 18px;
    color: var(--subtle);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.mode-toggle button.selected,
.mode-toggle button:hover {
    color: var(--white);
    background: var(--pine);
}

.chukmun-stage {
    display: flex;
    justify-content: center;
    min-height: 745px;
    padding: 20px 0;
    overflow-x: auto;
    border-radius: 12px;
    background: #f6f2e9;
}

.preview-caption {
    max-width: 520px;
    margin: 18px auto 0;
    color: var(--subtle);
    font-size: 13px;
    text-align: center;
}

.chukmun-paper,
.chukmun-print-paper,
.hangul-paper,
.hangul-print-paper {
    position: relative;
    box-sizing: border-box;
    max-width: none;
    min-height: 0;
    word-break: break-all;
    line-height: 1;
    color: #111;
    background: #fff;
    font-family: "SkyhueChukmun", "Batang", serif;
    overflow: hidden;
}

.hangul-paper,
.hangul-print-paper {
    color: #17130f;
    border: 1px solid #e2d8c9;
    background:
        linear-gradient(rgba(255, 253, 248, .96), rgba(255, 253, 248, .96)),
        url("/chukmun/test.png") no-repeat top / 100% 100%;
    font-family: "Batang", "Noto Serif KR", serif;
}

.chukmun-paper *,
.chukmun-print-paper * {
    box-sizing: border-box;
    line-height: 1;
}

.chukmun-paper div,
.chukmun-print-paper div {
    display: block;
    grid-template-columns: none;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.chukmun-paper {
    width: 500px;
    height: 704px;
    padding: 110px 55px 30px 0;
    border-radius: 10px 0 0 10px;
    font-size: 20px;
}

.chukmun-print-paper {
    width: 720px;
    height: 1050px;
    padding: 150px 80px 30px 0;
    font-size: 30px;
}

.hangul-paper {
    width: 500px;
    height: 704px;
    padding: 54px 50px;
    font-size: 17px;
}

.hangul-print-paper {
    width: 720px;
    height: 1050px;
    padding: 78px 76px;
    font-size: 25px;
}

.hangul-paper-inner {
    height: 100%;
    white-space: pre-line;
}

.hangul-paper-title {
    margin: 0 0 24px;
    color: var(--pine);
    font-family: Georgia, "Noto Serif KR", serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.05em;
    text-align: center;
}

.hangul-print-paper .hangul-paper-title {
    margin-bottom: 36px;
    font-size: 45px;
}

.hangul-paper-body {
    margin: 0;
    font-size: inherit;
    line-height: 1.82;
    text-align: center;
    word-break: keep-all;
}

.hangul-print-paper .hangul-paper-body {
    line-height: 1.86;
}

.chukmun-paper .bg,
.chukmun-print-paper .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    filter: grayscale(1);
    background: url("/chukmun/test.png") no-repeat top / 100% 100%;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.chukmun-paper .hue,
.chukmun-print-paper .hue {
    float: right;
}

.chukmun-paper .hue {
    width: 57px;
}

.chukmun-print-paper .hue {
    width: 82px;
}

.chukmun-paper .huebox,
.chukmun-print-paper .huebox {
    float: right;
}

.chukmun-paper .huebox {
    width: 20px;
}

.chukmun-print-paper .huebox {
    width: 30px;
}

.chukmun-paper .p,
.chukmun-print-paper .p {
    text-align: center;
}

.chukmun-paper .p {
    width: 16px;
    padding: 0 0 15px;
}

.chukmun-print-paper .p {
    width: 26px;
    padding: 0 0 20px;
}

.chukmun-paper .pd {
    height: 20px;
}

.chukmun-print-paper .pd {
    height: 30px;
}

.chukmun-paper .t span,
.chukmun-print-paper .t span {
    display: block;
    margin: 20px 0;
}

.chukmun-paper.m3 {
    padding-right: 85px;
}

.chukmun-print-paper.m3 {
    padding-right: 120px;
}

.chukmun-paper.m6,
.chukmun-paper.m10,
.chukmun-paper.m17 {
    padding-right: 40px;
}

.chukmun-print-paper.m6,
.chukmun-print-paper.m10,
.chukmun-print-paper.m17 {
    padding-right: 50px;
}

.chukmun-paper.m6 .hue,
.chukmun-paper.m10 .hue,
.chukmun-paper.m17 .hue {
    width: 47px;
}

.chukmun-print-paper.m6 .hue,
.chukmun-print-paper.m10 .hue,
.chukmun-print-paper.m17 .hue {
    width: 69px;
}

.chukmun-paper.m8,
.chukmun-paper.m13,
.chukmun-paper.m18 {
    padding-right: 52px;
}

.chukmun-print-paper.m8,
.chukmun-print-paper.m13,
.chukmun-print-paper.m18 {
    padding-right: 60px;
}

.chukmun-paper.m8 .hue,
.chukmun-paper.m13 .hue,
.chukmun-paper.m18 .hue {
    width: 50px;
}

.chukmun-print-paper.m8 .hue,
.chukmun-print-paper.m13 .hue,
.chukmun-print-paper.m18 .hue {
    width: 76px;
}

.chukmun-paper.m12,
.chukmun-paper.m20 {
    padding-right: 84px;
}

.chukmun-print-paper.m12,
.chukmun-print-paper.m20 {
    padding-right: 118px;
}

.chukmun-paper.m23,
.chukmun-paper.m24,
.chukmun-paper.m25,
.chukmun-paper.m26 {
    padding-right: 190px;
}

.chukmun-print-paper.m23,
.chukmun-print-paper.m24,
.chukmun-print-paper.m25,
.chukmun-print-paper.m26 {
    padding-right: 280px;
}

.chukmun-print-area {
    display: none;
}

.mobile-ritual-button {
    display: inline-flex;
}

.ritual-view {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    color: #f9efe1;
    background:
        radial-gradient(circle at 50% 20%, rgba(117, 73, 32, .32), transparent 34%),
        linear-gradient(180deg, #17110e 0%, #090707 100%);
}

.ritual-view.open {
    display: block;
}

body.ritual-open {
    overflow: hidden;
}

.ritual-panel {
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    flex-direction: column;
}

.ritual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 10px;
}

.ritual-top p {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.ritual-top button {
    min-width: 64px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 19px;
    color: #f9efe1;
    background: rgba(255, 255, 255, .08);
    font-weight: 700;
}

.ritual-stage {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 14px 14px 18px;
}

.ritual-burn-wrap {
    position: relative;
    isolation: isolate;
    transform-origin: center center;
}

.ritual-burn-wrap::before,
.ritual-burn-wrap::after {
    display: none;
    pointer-events: none;
    content: "";
}

.ritual-paper-document {
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.ritual-paper-document::after {
    display: none;
    pointer-events: none;
    content: "";
}

.ritual-paper-document.chukmun-paper,
.ritual-paper-document.hangul-paper {
    border-radius: 12px;
}

.burning-edge,
.ritual-flame-line,
.ritual-smoke,
.ritual-burn-canvas {
    display: none;
    pointer-events: none;
}

.burning-edge {
    position: absolute;
    z-index: 22;
    top: 100%;
    left: 50%;
    width: var(--burn-edge-width, 560px);
    height: var(--burn-edge-height, 996px);
    object-fit: cover;
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(ellipse 60% 64% at 50% 62%, #000 30%, rgba(0, 0, 0, .55) 56%, transparent 78%);
    mask-image: radial-gradient(ellipse 60% 64% at 50% 62%, #000 30%, rgba(0, 0, 0, .55) 56%, transparent 78%);
    filter: brightness(1.06) contrast(1.08) drop-shadow(0 -8px 18px rgba(255, 93, 12, .45));
    transform: translate(-50%, -86%);
    will-change: top, background-position;
}

.ritual-burn-wrap.is-burning .burning-edge.is-active {
    display: block;
    animation: burning-edge-rise var(--burn-duration, 10s) linear forwards;
}

.ritual-burn-canvas {
    position: absolute;
    z-index: 20;
    inset: -70px -45px -55px;
    width: calc(100% + 90px);
    height: calc(100% + 125px);
}

.ritual-burn-canvas.is-active {
    display: block;
}

@property --ritual-burn {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%;
}

.ritual-burn-wrap.is-burning .ritual-paper-document {
    -webkit-mask-image: linear-gradient(to top, transparent var(--ritual-burn), rgba(0, 0, 0, .4) calc(var(--ritual-burn) + 5%), #000 calc(var(--ritual-burn) + 11%));
    mask-image: linear-gradient(to top, transparent var(--ritual-burn), rgba(0, 0, 0, .4) calc(var(--ritual-burn) + 5%), #000 calc(var(--ritual-burn) + 11%));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: ritual-burn-away 10s linear forwards;
}

.ritual-burn-wrap.is-burning .ritual-paper-document::after {
    display: block;
    position: absolute;
    z-index: 8;
    inset: auto 0 0;
    height: 48%;
    opacity: .96;
    background:
        radial-gradient(circle at 12% 82%, rgba(0, 0, 0, .95) 0 2px, transparent 3px),
        radial-gradient(circle at 26% 72%, rgba(18, 13, 9, .9) 0 1px, transparent 2px),
        radial-gradient(circle at 47% 88%, rgba(0, 0, 0, .88) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 76%, rgba(20, 13, 8, .82) 0 1px, transparent 2px),
        radial-gradient(circle at 83% 90%, rgba(0, 0, 0, .9) 0 2px, transparent 3px),
        linear-gradient(0deg, rgba(0, 0, 0, .94) 0 11%, rgba(51, 24, 8, .78) 18%, rgba(120, 55, 16, .38) 34%, transparent 74%);
    mix-blend-mode: multiply;
    animation: ritual-scorch-grow 10s ease-in forwards;
}

.ritual-burn-wrap.is-burning::before {
    display: block;
    position: absolute;
    z-index: 9;
    right: -20px;
    bottom: -12px;
    left: -20px;
    height: 64px;
    opacity: 0;
    background:
        radial-gradient(ellipse at 8% 44%, transparent 0 16px, rgba(6, 5, 4, .92) 17px 22px, transparent 24px),
        radial-gradient(ellipse at 25% 58%, transparent 0 22px, rgba(12, 8, 5, .95) 23px 30px, transparent 32px),
        radial-gradient(ellipse at 48% 39%, transparent 0 18px, rgba(5, 4, 3, .9) 19px 26px, transparent 28px),
        radial-gradient(ellipse at 72% 55%, transparent 0 24px, rgba(10, 7, 5, .94) 25px 32px, transparent 34px),
        radial-gradient(ellipse at 91% 43%, transparent 0 16px, rgba(4, 4, 3, .92) 17px 23px, transparent 25px),
        linear-gradient(0deg, rgba(3, 3, 3, .96), rgba(30, 16, 8, .82) 45%, transparent 80%);
    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, .8));
    animation: ritual-char-edge-rise 10s ease-in forwards;
}

.ritual-burn-wrap.is-burning::after {
    display: block;
    position: absolute;
    z-index: 10;
    right: -28px;
    bottom: -30px;
    left: -28px;
    height: 220px;
    opacity: 0;
    background:
        radial-gradient(circle at 9% 80%, rgba(12, 10, 9, .9) 0 2px, transparent 3px),
        radial-gradient(circle at 18% 56%, rgba(30, 24, 20, .86) 0 1px, transparent 2px),
        radial-gradient(circle at 31% 72%, rgba(8, 7, 6, .9) 0 2px, transparent 3px),
        radial-gradient(circle at 43% 44%, rgba(36, 28, 22, .82) 0 1px, transparent 2px),
        radial-gradient(circle at 58% 68%, rgba(8, 7, 6, .88) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 50%, rgba(34, 26, 20, .84) 0 1px, transparent 2px),
        radial-gradient(circle at 84% 76%, rgba(6, 5, 5, .88) 0 2px, transparent 3px),
        radial-gradient(circle at 94% 42%, rgba(38, 30, 24, .8) 0 1px, transparent 2px);
    animation: ritual-ash-rise 10s ease-out forwards;
}

.ritual-burn-wrap.is-burning .ritual-flame-line {
    animation: ritual-fire-rise 10s ease-in forwards;
}

.ritual-burn-wrap.is-burning .ritual-smoke {
    animation: ritual-smoke-rise 10s ease-out forwards;
}

.ritual-burn-wrap.is-burning .ritual-flame-line {
    display: block;
    position: absolute;
    z-index: 4;
    right: -18px;
    bottom: -18px;
    left: -18px;
    height: 58px;
    opacity: 0;
    filter: blur(1px) drop-shadow(0 -5px 12px rgba(255, 82, 0, .48));
}

.ritual-flame-line::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 18px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(255, 225, 94, .42), rgba(255, 101, 18, .32) 45%, transparent 74%);
    content: "";
}

.ritual-flame-line span {
    display: none;
    position: absolute;
    bottom: 12px;
    width: 26%;
    height: 78px;
    border-radius: 50% 50% 42% 42%;
    background:
        radial-gradient(ellipse at 50% 78%, rgba(255, 246, 173, .95) 0 16%, rgba(255, 165, 42, .92) 38%, rgba(210, 37, 12, .82) 64%, transparent 72%);
    mix-blend-mode: screen;
    transform-origin: bottom center;
    animation: ritual-flame-flicker .24s infinite alternate ease-in-out;
}

.ritual-flame-line span:nth-child(1) {
    left: 4%;
    height: 64px;
}

.ritual-flame-line span:nth-child(2) {
    left: 25%;
    height: 90px;
    animation-delay: -.08s;
}

.ritual-flame-line span:nth-child(3) {
    left: 50%;
    height: 74px;
    animation-delay: -.14s;
}

.ritual-flame-line span:nth-child(4) {
    right: 4%;
    height: 84px;
    animation-delay: -.19s;
}

.ritual-burn-wrap.is-burning .ritual-smoke {
    display: block;
    position: absolute;
    z-index: 5;
    right: -8px;
    bottom: -12px;
    left: -8px;
    height: 130px;
    opacity: 0;
    background:
        radial-gradient(ellipse at 18% 70%, rgba(180, 172, 160, .28), transparent 58%),
        radial-gradient(ellipse at 47% 52%, rgba(220, 213, 201, .22), transparent 60%),
        radial-gradient(ellipse at 82% 65%, rgba(160, 152, 140, .23), transparent 58%);
}

.ritual-burn-wrap.is-burning::before,
.ritual-burn-wrap.is-burning::after,
.ritual-burn-wrap.is-burning .ritual-paper-document::after,
.ritual-burn-wrap.is-burning .ritual-flame-line,
.ritual-burn-wrap.is-burning .ritual-smoke {
    display: none !important;
    animation: none !important;
}

.ritual-finished {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(82vw, 340px);
    margin: 0;
    padding: 22px 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 18px;
    color: #f9efe1;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    transform: translate(-50%, -50%);
}

.ritual-view.is-complete .ritual-finished {
    display: block;
}

.ritual-actions {
    padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
}

.ritual-complete {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    color: #1b1009;
    background: linear-gradient(135deg, #f5d59e, #f59d45 56%, #d9581e);
    box-shadow: 0 14px 34px rgba(207, 77, 21, .3);
    font-size: 17px;
    font-weight: 800;
}

.ritual-complete:disabled {
    cursor: default;
    opacity: .62;
}

@keyframes ritual-burn-away {
    0% {
        --ritual-burn: -12%;
        filter: brightness(1) sepia(0);
        opacity: 1;
    }
    42% {
        filter: brightness(.92) sepia(.36) saturate(1.2);
    }
    90% {
        --ritual-burn: 92%;
        filter: brightness(.74) sepia(.9) saturate(1.4);
        opacity: .95;
    }
    100% {
        --ritual-burn: 112%;
        opacity: 0;
    }
}

@keyframes ritual-scorch-grow {
    0% {
        height: 0;
        opacity: 0;
    }
    12% {
        opacity: .9;
    }
    72% {
        height: 58%;
        opacity: .96;
    }
    100% {
        height: 72%;
        opacity: 0;
    }
}

@keyframes ritual-char-edge-rise {
    0% {
        bottom: -18px;
        opacity: 0;
        transform: scaleX(.98);
    }
    10% {
        opacity: 1;
    }
    82% {
        bottom: 82%;
        opacity: 1;
        transform: scaleX(1.02);
    }
    100% {
        bottom: 102%;
        opacity: 0;
        transform: scaleX(.88);
    }
}

@keyframes ritual-ash-rise {
    0% {
        bottom: -42px;
        opacity: 0;
        transform: translateY(0) scale(.95);
    }
    18% {
        opacity: .85;
    }
    100% {
        bottom: 78%;
        opacity: 0;
        transform: translateY(-110px) scale(1.22);
    }
}

@keyframes ritual-fire-rise {
    0% {
        bottom: -18px;
        opacity: 0;
        transform: scaleX(.96);
    }
    8% {
        opacity: 1;
    }
    82% {
        bottom: 84%;
        opacity: 1;
        transform: scaleX(1.04);
    }
    100% {
        bottom: 102%;
        opacity: 0;
        transform: scaleX(.8);
    }
}

@keyframes ritual-flame-flicker {
    from {
        transform: scaleY(.82) skewX(-4deg);
    }
    to {
        transform: scaleY(1.16) skewX(5deg);
    }
}

@keyframes ritual-smoke-rise {
    0% {
        bottom: -12px;
        opacity: 0;
        transform: translateY(28px) scale(.95);
    }
    16% {
        opacity: .7;
    }
    100% {
        bottom: 82%;
        opacity: 0;
        transform: translateY(-90px) scale(1.38);
    }
}

@keyframes burning-edge-rise {
    from {
        top: 100%;
    }

    to {
        top: 0%;
    }
}

@keyframes burning-edge-sprite {
    from {
        background-position: 0 0;
    }

    to {
        background-position: calc(var(--burn-edge-width, 560px) * -32) 0;
    }
}

@media (max-width: 1080px) {
    .chukmun-grid {
        grid-template-columns: 1fr;
    }

    .chukmun-editor {
        position: static;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    html,
    body {
        width: 210mm;
        height: 297mm;
        margin: 0 !important;
        overflow: hidden;
        background: #fff !important;
    }

    body > header,
    body > main,
    .ritual-view {
        display: none !important;
    }

    .chukmun-print-area {
        display: block;
        position: fixed;
        inset: 0;
        width: 210mm;
        height: 297mm;
        margin: 0;
        overflow: hidden;
    }

    .chukmun-print-paper,
    .hangul-print-paper {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0 !important;
        overflow: hidden;
        transform: translate(-50%, -50%);
        break-after: avoid;
        break-inside: avoid;
        page-break-after: avoid;
        page-break-inside: avoid;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}