/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* =========================================================
   Dizzt's Shoal
   style.css

   Global styles:
   - Color palette
   - Typography
   - Reset
   - Base elements
   - Common links
   - Common buttons
   - Accessibility helpers
   ========================================================= */


/* =========================================================
   0. Font
   ========================================================= */

/* =========================================================
   1. Design Tokens
   ========================================================= */

:root {

    /* -----------------------------------------------------
       Main Accent Colors
       ----------------------------------------------------- */

    --color-blue: #8CC0EB;
    --color-sky: #BFDDF0;
    --color-green: #ACCFA3;
    --color-sand: #FFEBCC;


    /* -----------------------------------------------------
       Extended Palette
       ----------------------------------------------------- */

    --color-sky-light: #EAF6FC;
    --color-sky-soft: #DCEEF8;

    --color-blue-light: #B9DCF3;
    --color-blue-dark: #669FCF;

    --color-green-light: #D5E7CF;
    --color-green-dark: #83AD79;

    --color-sand-light: #FFF6E8;
    --color-sand-dark: #F2D7AC;

    --color-white: #FFFFFF;

    --color-black: #181818;
    --color-dark: #262626;
    --color-gray: #5F6468;
    --color-gray-light: #8D969B;


    /* -----------------------------------------------------
       Semantic Colors
       ----------------------------------------------------- */

    --color-background: #EAF6FC;

    --color-surface: rgba(255, 255, 255, 0.88);
    --color-surface-solid: #FFFFFF;

    --color-text: #202326;
    --color-text-soft: #536168;
    --color-text-light: #FFFFFF;

    --color-border: rgba(140, 192, 235, 0.28);


    /* -----------------------------------------------------
       Title Gradient
       #BFDDF0 → #ACCFA3
       ----------------------------------------------------- */

    --gradient-title:
        linear-gradient(
            120deg,
            #BFDDF0 0%,
            #BFDDF0 28%,
            #ACCFA3 72%,
            #ACCFA3 100%
        );


    /* -----------------------------------------------------
       Other Gradients
       ----------------------------------------------------- */

    --gradient-sky:
        linear-gradient(
            180deg,
            #356F9F 0%,
            #528FBF 14%,
            #8CC0EB 32%,
            #BFDDF0 58%,
            #EAF7FD 100%
        );

    --gradient-ocean:
        linear-gradient(
            180deg,
            #BFDDF0 0%,
            #8CC0EB 100%
        );

    --gradient-sand:
        linear-gradient(
            180deg,
            #FFF4DF 0%,
            #FFEBCC 100%
        );

    --gradient-soft-green:
        linear-gradient(
            135deg,
            #D7E9D2 0%,
            #ACCFA3 100%
        );

    --gradient-button:
        linear-gradient(
            135deg,
            #8CC0EB 0%,
            #BFDDF0 100%
        );


    /* -----------------------------------------------------
       Font Families
       ----------------------------------------------------- */

    --font-title:
        "Cherry Bomb One",
        system-ui,
        sans-serif;

    --font-body:
        "Gowun Batang",
        system-ui,
        sans-serif;

    --font-mono:
        "Sono",
        monospace;


    /* -----------------------------------------------------
       Font Sizes
       ----------------------------------------------------- */

    --font-size-xs: 0.78rem;
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.35rem;
    --font-size-xl: 1.65rem;
    --font-size-2xl: 2.1rem;
    --font-size-3xl: 2.8rem;
    --font-size-4xl: 4rem;
    --font-size-hero: clamp(3.3rem, 8vw, 6.5rem);


    /* -----------------------------------------------------
       Font Weights
       ----------------------------------------------------- */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /* -----------------------------------------------------
       Border Radius

       Large rounded shapes are part of the visual identity.
       ----------------------------------------------------- */

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-xl: 34px;
    --radius-2xl: 48px;
    --radius-pill: 999px;


    /* -----------------------------------------------------
       Shadows
       ----------------------------------------------------- */

    --shadow-xs:
        0 2px 8px
        rgba(70, 120, 145, 0.08);

    --shadow-sm:
        0 5px 15px
        rgba(70, 120, 145, 0.10);

    --shadow-md:
        0 10px 30px
        rgba(70, 120, 145, 0.14);

    --shadow-lg:
        0 18px 45px
        rgba(70, 120, 145, 0.18);

    --shadow-card:
        0 12px 35px
        rgba(75, 130, 160, 0.13);

    --shadow-button:
        0 5px 0
        rgba(86, 147, 192, 0.34);

    --shadow-button-green:
        0 5px 0
        rgba(103, 151, 94, 0.30);


    /* -----------------------------------------------------
       Spacing
       ----------------------------------------------------- */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 4rem;
    --space-11: 5rem;
    --space-12: 6rem;


    /* -----------------------------------------------------
       Layout
       ----------------------------------------------------- */

    --content-width: 1200px;
    --content-padding: 24px;


    /* -----------------------------------------------------
       Motion
       ----------------------------------------------------- */

    --transition-fast: 160ms ease;
    --transition-base: 240ms ease;
    --transition-slow: 420ms ease;


    /* -----------------------------------------------------
       Layer Order
       ----------------------------------------------------- */

    --z-background: -10;
    --z-decoration: 1;
    --z-content: 10;
    --z-header: 50;
    --z-overlay: 100;
}


/* =========================================================
   2. Basic Reset
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;

    font-size: 16px;

    -webkit-text-size-adjust: 100%;
}


body {
    margin: 0;
    padding: 0;

    min-width: 320px;
    min-height: 100vh;

    overflow-x: hidden;

    background:
        var(--gradient-sky);

    color:
        var(--color-text);

    font-family:
        var(--font-body);

    font-size:
        1.15rem;

    font-weight:
        var(--font-weight-normal);

    line-height:
        1.65;

    letter-spacing:
        0.01em;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


body,
button,
input,
textarea,
select {
    font-family:
        var(--font-body);
}


img,
picture,
svg,
video,
canvas {
    display: block;

    max-width: 100%;
}


img {
    height: auto;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    border: 0;

    cursor: pointer;
}


textarea {
    resize: vertical;
}


ul,
ol {
    margin: 0;
    padding: 0;
}


p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
blockquote {
    margin-top: 0;
}


a {
    color: inherit;
}


table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* =========================================================
   3. Text Selection
   ========================================================= */

::selection {
    background:
        var(--color-green);

    color:
        var(--color-black);
}


::-moz-selection {
    background:
        var(--color-green);

    color:
        var(--color-black);
}


/* =========================================================
   4. Scrollbar
   ========================================================= */

::-webkit-scrollbar {
    width: 12px;
}


::-webkit-scrollbar-track {
    background:
        var(--color-sky-light);
}


::-webkit-scrollbar-thumb {
    background:
        var(--color-blue);

    border:
        3px solid var(--color-sky-light);

    border-radius:
        var(--radius-pill);
}


::-webkit-scrollbar-thumb:hover {
    background:
        var(--color-green);
}


* {
    scrollbar-width: thin;

    scrollbar-color:
        var(--color-blue)
        var(--color-sky-light);
}


/* =========================================================
   5. Typography
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom:
        var(--space-4);

    color:
        var(--color-dark);

    font-family:
        var(--font-title);

    font-weight:
        400;

    line-height:
        1.15;

    letter-spacing:
        0.02em;
}


h1 {
    font-size:
        var(--font-size-4xl);
}


h2 {
    font-size:
        var(--font-size-3xl);
}


h3 {
    font-size:
        var(--font-size-2xl);
}


h4 {
    font-size:
        var(--font-size-xl);
}


h5 {
    font-size:
        var(--font-size-lg);
}


h6 {
    font-size:
        var(--font-size-md);
}


p {
    margin-bottom:
        var(--space-5);
}


strong,
b {
    font-weight:
        var(--font-weight-bold);
}


small {
    font-size:
        var(--font-size-sm);
}


mark {
    padding:
        0.05em 0.28em;

    background:
        var(--color-sand);

    color:
        var(--color-black);

    border-radius:
        5px;
}


/* =========================================================
   6. Cherry Bomb One Utility
   ========================================================= */

.cherry-bomb-one-regular {
    font-family:
        "Cherry Bomb One",
        system-ui;

    font-weight:
        400;

    font-style:
        normal;
}


/* =========================================================
   7. Poor Story Utility
   ========================================================= */

.poor-story-regular {
    font-family:
        "Poor Story",
        system-ui;

    font-weight:
        400;

    font-style:
        normal;
}

.gowun-batang-regular {
    font-family:
        "Gowun Batang",
        serif;
        
    font-weight:
        400;
        
    font-style:
        normal;
}

.gowun-batang-bold {
  font-family: "Gowun Batang", serif;
  font-weight: 700;
  font-style: normal;
}



/* =========================================================
   8. Sono Monospace Font
   ========================================================= */

/*
   Use Sono for:
   - visitor counters
   - dates
   - clocks
   - code-like labels
   - status indicators
   - technical information
*/

.sono {
    font-family:
        "Sono",
        monospace;

    font-optical-sizing:
        auto;

    font-weight:
        400;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;
}


.sono-light {
    font-family:
        "Sono",
        monospace;

    font-optical-sizing:
        auto;

    font-weight:
        300;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;
}


.sono-medium {
    font-family:
        "Sono",
        monospace;

    font-optical-sizing:
        auto;

    font-weight:
        500;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;
}


.sono-semibold {
    font-family:
        "Sono",
        monospace;

    font-optical-sizing:
        auto;

    font-weight:
        600;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;
}


.sono-bold {
    font-family:
        "Sono",
        monospace;

    font-optical-sizing:
        auto;

    font-weight:
        700;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;
}


/* =========================================================
   9. Native Code Elements
   ========================================================= */

code,
kbd,
samp,
pre {
    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-variation-settings:
        "MONO" 1;
}


code {
    padding:
        0.16em 0.4em;

    background:
        rgba(140, 192, 235, 0.18);

    color:
        var(--color-dark);

    border-radius:
        7px;

    font-size:
        0.85em;
}


pre {
    overflow-x: auto;

    padding:
        var(--space-6);

    background:
        rgba(255, 255, 255, 0.82);

    color:
        var(--color-dark);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

    line-height:
        1.6;
}


pre code {
    padding: 0;

    background: transparent;

    border-radius: 0;
}


kbd {
    display:
        inline-block;

    padding:
        0.15em 0.45em;

    background:
        var(--color-white);

    border:
        1px solid rgba(0, 0, 0, 0.12);

    border-bottom-width:
        3px;

    border-radius:
        6px;

    font-size:
        0.82em;
}


/* =========================================================
   10. Gradient Titles
   ========================================================= */

.gradient-title {
    display:
        inline-block;

    background:
        linear-gradient(
            110deg,
            #8CC0EB 0%,
            #BFDDF0 32%,
            #DCE7DC 62%,
            #FFEBCC 100%
        );

    background-clip:
        text;

    -webkit-background-clip:
        text;

    color:
        #8CC0EB;

    -webkit-text-fill-color:
        transparent;

    -webkit-text-stroke:
        1.4px rgba(20, 22, 24, 0.94);

    paint-order:
        stroke fill;

    text-shadow:
        none;

    filter:
        drop-shadow(
            0 3px 4px rgba(25, 50, 65, 0.14)
        );
}


/* =========================================================
   11. Global Links
   ========================================================= */

a {
    text-decoration:
        none;

    transition:
        color var(--transition-fast),
        opacity var(--transition-fast),
        transform var(--transition-fast);
}


a:hover {
    color:
        var(--color-blue-dark);
}


a:focus-visible {
    outline:
        3px solid var(--color-green);

    outline-offset:
        4px;

    border-radius:
        5px;
}


/* =========================================================
   12. Text Links
   ========================================================= */

.text-link,
.section-link,
.note-link {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.35rem;

    width:
        fit-content;

    color:
        var(--color-blue-dark);

    font-weight:
        var(--font-weight-semibold);

    text-decoration:
        none;
}


.text-link::after,
.section-link::after,
.note-link::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        100%;

    bottom:
        -2px;

    height:
        2px;

    background:
        var(--color-green);

    border-radius:
        var(--radius-pill);

    transition:
        right var(--transition-base);
}


.text-link:hover::after,
.section-link:hover::after,
.note-link:hover::after {
    right:
        0;
}


.text-link:hover,
.section-link:hover,
.note-link:hover {
    color:
        var(--color-green-dark);
}


/* =========================================================
   13. Common Button Base
   ========================================================= */

.button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.4em;

    min-height:
        46px;

    padding:
        0.72rem 1.45rem;

    border:
        none;

    border-radius:
        var(--radius-pill);

    color:
        var(--color-dark);

    font-family:
        var(--font-body);

    font-size:
        1.08rem;

    font-weight:
        var(--font-weight-bold);

    line-height:
        1;

    text-align:
        center;

    text-decoration:
        none;

    cursor:
        pointer;

    user-select:
        none;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        filter var(--transition-fast);
}


.button:hover {
    transform:
        translateY(-3px);

    color:
        var(--color-dark);
}


.button:active {
    transform:
        translateY(2px);
}


.button:focus-visible {
    outline:
        3px solid var(--color-green);

    outline-offset:
        4px;
}


/* =========================================================
   14. Primary Button
   ========================================================= */

.button-primary {
    background:
        var(--gradient-button);

    color:
        var(--color-dark);

    box-shadow:
        var(--shadow-button);
}


.button-primary:hover {
    filter:
        brightness(1.035);

    box-shadow:
        0 8px 0 rgba(86, 147, 192, 0.27);
}


.button-primary:active {
    box-shadow:
        0 2px 0 rgba(86, 147, 192, 0.34);
}


/* =========================================================
   15. Secondary Button
   ========================================================= */

.button-secondary {
    background:
        var(--gradient-soft-green);

    color:
        var(--color-dark);

    box-shadow:
        var(--shadow-button-green);
}


.button-secondary:hover {
    filter:
        brightness(1.025);

    box-shadow:
        0 8px 0 rgba(103, 151, 94, 0.23);
}


.button-secondary:active {
    box-shadow:
        0 2px 0 rgba(103, 151, 94, 0.30);
}


/* =========================================================
   16. Small Button
   ========================================================= */

.button-small {
    min-height:
        38px;

    padding:
        0.56rem 1.1rem;

    background:
        rgba(140, 192, 235, 0.22);

    color:
        var(--color-dark);

    border:
        1px solid rgba(140, 192, 235, 0.34);

    box-shadow:
        none;

    font-size:
        0.98rem;
}


.button-small:hover {
    background:
        var(--color-blue-light);

    transform:
        translateY(-2px);
}


/* =========================================================
   17. Form Elements
   ========================================================= */

label {
    display:
        block;

    margin-bottom:
        var(--space-2);

    color:
        var(--color-text);

    font-weight:
        var(--font-weight-bold);
}


input,
textarea,
select {
    width:
        100%;

    padding:
        0.82rem 1rem;

    background:
        rgba(255, 255, 255, 0.82);

    color:
        var(--color-text);

    border:
        2px solid rgba(140, 192, 235, 0.28);

    border-radius:
        var(--radius-md);

    outline:
        none;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}


input::placeholder,
textarea::placeholder {
    color:
        var(--color-gray-light);

    opacity:
        1;
}


input:hover,
textarea:hover,
select:hover {
    border-color:
        rgba(140, 192, 235, 0.55);
}


input:focus,
textarea:focus,
select:focus {
    background:
        rgba(255, 255, 255, 0.96);

    border-color:
        var(--color-blue);

    box-shadow:
        0 0 0 4px rgba(140, 192, 235, 0.18);
}


/* =========================================================
   18. Horizontal Rule
   ========================================================= */

hr {
    height:
        2px;

    margin:
        var(--space-8) 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-blue-light),
            var(--color-green-light),
            transparent
        );

    border:
        none;
}


/* =========================================================
   19. Blockquote
   ========================================================= */

blockquote {
    margin:
        var(--space-6) 0;

    padding:
        var(--space-5) var(--space-6);

    background:
        rgba(255, 255, 255, 0.62);

    border-left:
        5px solid var(--color-green);

    border-radius:
        0 var(--radius-lg) var(--radius-lg) 0;

    color:
        var(--color-text-soft);
}


/* =========================================================
   20. Generic Content Container
   ========================================================= */

.content-container {
    width:
        min(
            calc(100% - (var(--content-padding) * 2)),
            var(--content-width)
        );

    margin-inline:
        auto;
}


/* =========================================================
   21. Generic Card Foundation
   ========================================================= */

.card {
    position:
        relative;

    background:
        var(--color-surface);

    border:
        1px solid rgba(255, 255, 255, 0.72);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-card);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


/* =========================================================
   22. General Section Typography
   ========================================================= */

.section-eyebrow {
    display:
        flex;

    align-items:
        center;

    width:
        fit-content;

    margin-bottom:
        0.65rem;

    padding:
        0.28rem 0.7rem;


    color:
        #214C69;


    background:
        rgba(
            255,
            235,
            204,
            0.72
        );


    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.6
        );


    border-radius:
        var(--radius-pill);


    box-shadow:
        0 3px 8px
        rgba(
            45,
            85,
            105,
            0.08
        );


    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-size:
        0.7rem;

    font-weight:
        700;

    font-variation-settings:
        "MONO" 1;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    text-shadow:
        none;

    opacity:
        1;
}

.card-label,
.social-card-label {
    margin-bottom:
        var(--space-2);

    color:
        var(--color-blue-dark);

    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-size:
        0.75rem;

    font-weight:
        600;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;

    letter-spacing:
        0.12em;

    line-height:
        1.3;

    text-transform:
        uppercase;
}


.section-title {
    margin-bottom:
        var(--space-3);

    font-size:
        clamp(2rem, 5vw, 3.25rem);
}


.section-description {
    max-width:
        650px;

    margin-bottom:
        0;

    color:
        var(--color-text-soft);

    font-size:
        1.15rem;
}


/* =========================================================
   23. Dates / Counters / Status Text
   ========================================================= */

time,
.clock-date,
.clock-time,
.clock-zone,
.visitor-count,
.site-history-short,
.footer-history {
    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;
}


.clock-time,
.visitor-count {
    font-weight:
        600;
}


/* =========================================================
   24. Lists Inside Article Content
   ========================================================= */

.site-main ul:not([class]),
.site-main ol:not([class]) {
    margin:
        var(--space-5) 0;

    padding-left:
        1.7em;
}


.site-main li:not([class]) {
    margin-bottom:
        var(--space-2);
}


.site-main li:not([class])::marker {
    color:
        var(--color-blue);
}


/* =========================================================
   25. Utility Classes
   ========================================================= */

.text-center {
    text-align:
        center;
}


.text-left {
    text-align:
        left;
}


.text-right {
    text-align:
        right;
}


.text-dark {
    color:
        var(--color-dark);
}


.text-light {
    color:
        var(--color-white);
}


.text-soft {
    color:
        var(--color-text-soft);
}


.font-title {
    font-family:
        var(--font-title);
}


.font-body {
    font-family:
        var(--font-body);
}


.font-mono {
    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;
}


.no-wrap {
    white-space:
        nowrap;
}


.hidden {
    display:
        none !important;
}


/* =========================================================
   26. Accessible Visually Hidden Content
   ========================================================= */

.visually-hidden {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;
}


/* =========================================================
   27. Keyboard Focus
   ========================================================= */

:focus-visible {
    outline:
        3px solid var(--color-green);

    outline-offset:
        4px;
}


/* =========================================================
   28. Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }
}


/* =========================================================
   29. Fallback for Browsers Without backdrop-filter
   ========================================================= */

@supports not (
    (backdrop-filter: blur(12px))
    or
    (-webkit-backdrop-filter: blur(12px))
) {

    .card {
        background:
            rgba(255, 255, 255, 0.96);
    }

}


/* =========================================================
   30. Small-Screen Base Adjustments
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --content-padding: 18px;
    }


    body {
        font-size:
            1.08rem;
    }


    h1 {
        font-size:
            clamp(2.6rem, 13vw, 4rem);
    }


    h2 {
        font-size:
            clamp(2rem, 10vw, 3rem);
    }


    h3 {
        font-size:
            clamp(1.5rem, 7vw, 2.2rem);
    }


    .button {
        min-height:
            44px;

        padding:
            0.68rem 1.2rem;
    }


    .card {
        border-radius:
            var(--radius-lg);
    }

}