/* =========================================================================
   가능성.com — Possibility Field
   Palette:
     #edeae2  paper-of-permanence (base)
     #1a1d24  charcoal-of-record
     #6b7380  fog-of-probability
     #b5a88b  dust-of-almost
     #3d5a6c  deep-blue-of-could
     #e8e3d4  warm-whisper
     #c9a45b  single-leaf-gold (accent)
     #7d2b3a  ink-wine (strike accent)
   Fonts: Gowun Batang, Gaegu, JetBrains Mono
   ========================================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    background: #edeae2;
    color: #1a1d24;
    font-family: "Gowun Batang", serif;
    overflow-x: auto;
    overflow-y: auto;
    scroll-behavior: auto;
}

body {
    position: relative;
    width: 8000px;
    height: 6000px;
    font-family: "Gowun Batang", serif;
}

/* The field — a single absolute-sized canvas */
#field {
    position: relative;
    width: 8000px;
    height: 6000px;
    overflow: visible;
}

/* ------------------- Horizon seam ------------------- */
#horizon {
    position: absolute;
    top: 3000px;
    left: 0;
    width: 8000px;
    height: 0;
    border-top: 0.5px solid rgba(26, 29, 36, 0.28);
    z-index: 2;
    pointer-events: none;
}

/* ------------------- Moire of coincidence ------------------- */
#moire {
    position: absolute;
    left: 3640px;
    top: 2640px;
    width: 720px;
    height: 720px;
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}

#moire line {
    stroke: #1a1d24;
    stroke-width: 0.25;
    opacity: 0.28;
}

#moire line.offset {
    stroke: #3d5a6c;
    opacity: 0.22;
}

/* ------------------- Filament layer ------------------- */
#filaments {
    position: absolute;
    left: 0;
    top: 0;
    width: 8000px;
    height: 6000px;
    z-index: 2;
    pointer-events: none;
}

#filaments path {
    fill: none;
    stroke: #6b7380;
    transition: stroke 0.4s ease;
    pointer-events: stroke;
}

#filaments path.filament-gold {
    stroke: #c9a45b !important;
}

#filaments .weight-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    font-weight: 300;
    fill: #6b7380;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
    pointer-events: none;
}

/* ------------------- Drifting hangul ------------------- */
#drift-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 8000px;
    height: 6000px;
    z-index: 1;
    pointer-events: none;
}

.drift {
    position: absolute;
    font-family: "Gowun Batang", serif;
    font-size: 3.2rem;
    color: #1a1d24;
    will-change: transform;
    user-select: none;
}

/* ------------------- Site mark ------------------- */
#sitemark {
    position: absolute;
    left: 3760px;
    top: 180px;
    z-index: 4;
    letter-spacing: 0.02em;
    text-align: left;
}

#sitemark .mark-ko {
    display: block;
    font-family: "Gaegu", "Gowun Batang", serif;
    font-size: 3.2rem;
    color: #1a1d24;
    line-height: 1.1;
}

#sitemark .mark-latin {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    color: #6b7380;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 0.4rem;
    padding-left: 0.2rem;
}

/* ------------------- Stations ------------------- */
.station {
    position: absolute;
    width: 720px;
    max-width: 720px;
    padding: 0;
    z-index: 3;
    color: #1a1d24;
    opacity: 0;
    transition: opacity 1.2s ease, filter 1.2s ease;
    filter: blur(3px);
}

.station.visible {
    opacity: 1;
    filter: blur(0);
}

.station .roman {
    font-family: "Gaegu", "Gowun Batang", serif;
    font-size: 1.1rem;
    color: #6b7380;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

.station .title {
    font-family: "Gowun Batang", serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1d24;
    margin-bottom: 1.6rem;
    letter-spacing: 0.02em;
}

.station .title em {
    font-family: "Gowun Batang", serif;
    font-style: italic;
    font-weight: 400;
    color: #6b7380;
    margin-left: 0.4rem;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
}

.station .aphorism {
    font-family: "Gowun Batang", serif;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1.55;
    letter-spacing: 0.005em;
    color: #1a1d24;
    margin-bottom: 1.8rem;
    min-height: 2.8rem;
}

.station .aphorism .cursor {
    display: inline-block;
    width: 0.5em;
    height: 1em;
    vertical-align: text-bottom;
    background: #1a1d24;
    opacity: 0.4;
    animation: cursor-blink 0.9s steps(2, end) infinite;
    margin-left: 0.05em;
}

@keyframes cursor-blink {
    50% {
        opacity: 0;
    }
}

.station .body {
    font-family: "Gowun Batang", serif;
    font-size: 1.05rem;
    line-height: 1.85;
    letter-spacing: 0.005em;
    color: #1a1d24;
    max-width: 640px;
}

.station .body em {
    font-style: italic;
    color: #6b7380;
}

.station .viz {
    display: block;
    margin-top: 2.2rem;
    width: 180px;
    height: 120px;
    overflow: visible;
}

/* Above horizon (what-could-be): deep-blue-of-could register */
.station.above .title,
.station.above .body {
    color: #1a1d24;
}

.station.above .roman {
    color: #3d5a6c;
}

.station.above .aphorism {
    color: #1a1d24;
}

/* Below horizon (what-was-almost): dust-of-almost register */
.station.below {
    color: #6d5f44;
}

.station.below .roman {
    color: #b5a88b;
}

.station.below .title {
    color: #6d5f44;
}

.station.below .title em {
    color: #b5a88b;
}

.station.below .aphorism {
    color: #6d5f44;
    font-style: normal;
}

.station.below .body {
    color: #6d5f44;
}

/* Horizon station — sits on the seam, bridging registers */
.station.horizon-station .title {
    color: #1a1d24;
}

/* Asymmetric placements — stations do not align to a column */
#station-1 {
    transform: translate(-360px, -120px);
}
#station-2 {
    transform: translate(-200px, 0);
}
#station-3 {
    transform: translate(-420px, -60px);
}
#station-4 {
    transform: translate(-160px, 40px);
}
#station-5 {
    transform: translate(-360px, -180px);
}
#station-6 {
    transform: translate(-440px, 20px);
}
#station-7 {
    transform: translate(-240px, 60px);
}
#station-8 {
    transform: translate(-300px, -40px);
}
#station-9 {
    transform: translate(-400px, 80px);
}
#station-10 {
    transform: translate(-340px, -100px);
}

/* ------------------- Struck-through almost-words ------------------- */
.struck {
    position: relative;
    display: inline-block;
    color: #6d5f44;
}

.struck svg.strike {
    position: absolute;
    left: -4%;
    top: 42%;
    width: 108%;
    height: 40%;
    pointer-events: none;
    overflow: visible;
}

.struck svg.strike path {
    stroke: #7d2b3a;
    stroke-width: 1.2;
    fill: none;
    stroke-linecap: round;
}

.struck::after {
    content: "(" attr(data-replacement) ")";
    display: inline;
    font-family: "Gowun Batang", serif;
    font-style: italic;
    font-size: 0.82em;
    color: #6b7380;
    margin-left: 0.35em;
    letter-spacing: 0.01em;
}

/* ------------------- Signature (가) ------------------- */
#signature {
    position: absolute;
    left: 7640px;
    top: 5760px;
    font-family: "Gowun Batang", serif;
    font-size: 4.2rem;
    color: #1a1d24;
    opacity: 0.85;
    z-index: 3;
    line-height: 1;
    letter-spacing: 0;
}

/* ------------------- Compass wheel (fixed to viewport) ------------------- */
#compass {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 20;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 14px;
    pointer-events: none;
    user-select: none;
}

#compass svg {
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.03));
}

#compass-dot-pulse {
    animation: pulse-ring 1s ease-in-out infinite;
}

@keyframes pulse-ring {
    0%, 100% {
        opacity: 0.42;
        r: 4;
    }
    50% {
        opacity: 0.46;
        r: 5;
    }
}

#compass .legend {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    font-weight: 300;
    color: #6b7380;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.5;
    padding-bottom: 4px;
}

#compass .legend > div {
    white-space: nowrap;
}

/* ------------------- Tooltip ------------------- */
#tooltip {
    position: fixed;
    pointer-events: none;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(232, 227, 212, 0.95);
    color: #1a1d24;
    padding: 6px 10px;
    border: 0.5px solid rgba(26, 29, 36, 0.22);
    z-index: 30;
    opacity: 0;
    transition: opacity 0.2s ease;
    transform: translate(-50%, -130%);
    white-space: nowrap;
}

#tooltip.show {
    opacity: 1;
}

/* ------------------- Mobile: scale the field down, do NOT reflow ------------------- */
@media (max-width: 768px) {
    body {
        /* allow pinch-zoom container feel */
        width: auto;
        height: auto;
        min-height: 100vh;
    }
    #field {
        transform: scale(0.55);
        transform-origin: 0 0;
    }
    #compass {
        left: 12px;
        bottom: 12px;
        gap: 8px;
    }
    #compass .legend {
        font-size: 0.62rem;
    }
}

/* ------------------- Selection ------------------- */
::selection {
    background: #c9a45b;
    color: #1a1d24;
}