@font-face {
    font-family: 'JoseonPalace';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunGs.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

.jibang-hero h1 {
    line-height: 1.25;
}

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

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

.religion-tabs .pill {
    flex: 1 1 calc(25% - 7px);
    cursor: pointer;
}

.religion-tabs .pill:hover {
    border-color: var(--pine);
}

.religion-panel[hidden],
#clanFields[hidden],
#generalNameField[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 17px;
}

.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);
}

.check-label {
    display: flex !important;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    margin-top: 6px;
    color: var(--ink) !important;
}

.check-label input {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
}

.print-settings {
    margin: 12px 0 17px;
    padding: 17px 15px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.print-settings legend {
    padding: 0 7px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.setting-grid {
    display: grid;
    grid-template-columns: 1fr 148px;
    gap: 10px;
}

.faith-size-note {
    padding: 9px 10px;
    color: var(--subtle);
    font-size: 12px;
    line-height: 1.45;
}

.faith-size-note strong {
    color: var(--ink);
    font-size: 14px;
}

.quantity-control {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    gap: 4px;
    margin-top: 8px;
}

.quantity-control input {
    height: 50px;
    margin: 0;
    padding: 0 4px;
    text-align: center;
}

.quantity-control button {
    height: 50px;
    border: 1px solid #dcd7cd;
    border-radius: 7px;
    color: var(--pine);
    background: #fffdf8;
    font-size: 19px;
    cursor: pointer;
}

.quantity-control button:hover {
    background: #f1ede2;
}

.layout-summary {
    margin: -3px 0 4px;
    color: var(--subtle);
    font-size: 12px;
}

.print-button {
    border: 0;
}

.jibang-preview {
    min-height: 940px;
}

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

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

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

.preview-stage {
    display: flex;
    min-height: 1010px;
    align-items: flex-start;
    justify-content: center;
    padding: 26px;
    border-radius: 13px;
    background: #f6f2e9;
}

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

.jibang-card {
    position: relative;
    display: flex;
    width: 236px;
    height: 872px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #4a4033;
    color: #1d1813;
    background: #fff;
    font-family: "Noto Serif KR", "Batang", serif;
    font-weight: 600;
}

/* 글꼴 선택 — 조선궁서체(ChosunGs). 이 폰트에 없는 글자(妣 등)는 한양해서체로 보정 */
.jibang-card.font-palace {
    font-family: "JoseonPalace", "HYhaeseo", "한양해서", "Gungsuh", "Batang", serif;
    font-weight: 400;
}

.jibang-card.size-small {
    width: 144px;
    height: 742px;
}

.jibang-card.size-faith {
    width: 324px;
    height: 970px;
}

.custom-size-fields {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.custom-size-fields label {
    flex: 1;
}

.jibang-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.legacy-general {
    box-sizing: border-box;
    padding: 60px 80px 0;
    font-size: 62px;
    line-height: 1.2;
    word-break: break-all;
    text-align: center;
}

.size-small .legacy-general {
    padding: 40px;
    font-size: 55px;
}

.legacy-general.m1 {
    line-height: 1.2;
}

.legacy-general.m2 {
    line-height: 1;
}

.legacy-general.m4,
.legacy-general.m12,
.legacy-general.m14,
.legacy-general.m16,
.legacy-general.m20 {
    line-height: 1.1;
}

.legacy-general.m3,
.legacy-general.m10 {
    line-height: 1.35;
}

.legacy-general.m5,
.legacy-general.m17 {
    line-height: 1.45;
}

.legacy-general.m6,
.legacy-general.m18 {
    line-height: 1.2;
}

.legacy-general.m7,
.legacy-general.m8 {
    line-height: 1.4;
}

.legacy-general.m9,
.legacy-general.m11,
.legacy-general.m13,
.legacy-general.m15,
.legacy-general.m19,
.legacy-general.m21,
.legacy-general.m22 {
    line-height: 1.3;
}

.legacy-general.m01 {
    line-height: 1.41;
}

.legacy-general.m02,
.legacy-general.m03,
.legacy-general.m04 {
    line-height: 1.2;
}

.legacy-general.paired .left {
    position: absolute;
    left: 50px;
    width: 28px;
}

.legacy-general.paired .right {
    position: absolute;
    left: 130px;
    width: 28px;
}

.faith-card {
    position: relative;
    width: 100%;
    height: 100%;
}

.faith-mark {
    position: absolute;
    top: 80px;
    left: 86px;
    width: 150px;
}

.faith-side {
    position: absolute;
    top: 179px;
    width: 20px;
    font-size: 33px;
    line-height: 1;
    word-break: break-all;
    text-align: center;
}

.faith-side span {
    display: block;
    margin-bottom: 14px;
}

.faith-side span:last-child {
    margin-bottom: 0;
}

.faith-side.left {
    left: 27px;
}

.faith-side.right {
    right: 35px;
}

.faith-side.compact {
    top: 340px;
}

.faith-role {
    position: absolute;
    top: 276px;
    right: 0;
    left: 0;
    padding: 0 60px;
    font-size: 40px;
    text-align: center;
}

.faith-name {
    position: absolute;
    top: 380px;
    left: 120px;
    width: 20px;
    font-size: 94px;
    line-height: 1.3;
    word-break: break-all;
    text-align: center;
}

.size-faith .faith-card:has(.compact) .faith-mark {
    top: 60px;
    left: 65px;
    width: 191px;
}

.sgi-card {
    box-sizing: border-box;
    padding: 60px 80px 0;
    font-size: 62px;
    line-height: 1.3;
    text-align: center;
    word-break: break-all;
}

.sgi-copy {
    width: 100%;
}

.sgi-gap {
    padding: 10px;
}

.sgi-name {
    padding: 0;
}

.sgi-mark {
    width: 100px;
    margin: -15px -12px 0;
    vertical-align: top;
}

.size-small .sgi-card {
    padding: 40px;
    font-size: 56px;
}

.size-small .sgi-mark {
    margin: -15px -19px 0;
}

.sgi-card.no-mark {
    line-height: 1.55;
}

.print-area {
    display: none;
}

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

.ritual-view {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    color: #f9efe1;
    background:
        radial-gradient(circle at 50% 16%, 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: flex-end;
    gap: 14px;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 10px;
}

.ritual-top p {
    display: none;
}

.ritual-top button {
    min-width: 56px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 17px;
    color: #f9efe1;
    background: rgba(255, 255, 255, .05);
    font-weight: 700;
    cursor: pointer;
    opacity: .16;
    transition: opacity .2s ease;
}

.ritual-top button:hover,
.ritual-top button:focus-visible {
    opacity: .7;
}

.ritual-stage {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 14px 18px 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-card-document {
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

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

.ritual-card-document.jibang-card {
    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, 320px);
    height: var(--burn-edge-height, 569px);
    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-card-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-card-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-card-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 18px calc(env(safe-area-inset-bottom, 0px) + 16px);
}

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

.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, 320px) * -32) 0;
    }
}

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

    .jibang-editor {
        position: static;
    }
}

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

    body {
        color: #000;
        background: #fff;
    }

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

    .print-area {
        display: block;
    }

    .print-sheet {
        display: flex;
        width: 190mm;
        height: 277mm;
        align-items: flex-start;
        justify-content: center;
        gap: 5mm;
        page-break-after: always;
        break-after: page;
    }

    .print-sheet:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    .jibang-card {
        flex: 0 0 auto;
        box-shadow: none;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* 지방 실제 출력 규격 — 대 5×19.5cm, 소 4×17.5cm (테두리 strip 기준) */
    .jibang-card.size-large {
        width: 5cm;
        height: 19.5cm;
    }

    .jibang-card.size-small {
        width: 4cm;
        height: 17.5cm;
    }

    /* 글자는 디자인 px 비율을 유지한 채 규격에 맞춰 축소(가운데 정렬) */
    .jibang-card .jibang-content {
        flex: none;
        transform-origin: center center;
    }

    .size-large .jibang-content {
        width: 236px;
        height: 872px;
        transform: scale(0.8007);
    }

    .size-small .jibang-content {
        width: 144px;
        height: 742px;
        transform: scale(0.8914);
    }
}