:root {
    /* color */
    --SS-black: rgba(30, 30, 40, 1);
    --SS-grey: rgba(140, 140, 150, 1);
    --SS-sky: rgba(70, 180, 255, 1);
    --SS-thunder: rgba(245, 255, 0, 1);
    --SS-white: rgba(245, 245, 250, 1);
    --SS-input: rgba(140, 140, 150, 0.5);
    --SS-stroke-desktop: 0.1em;
    --SS-stroke-desktop-bold: 0.15em;
    --SS-stroke-mobile: 0.0625em;
}

@font-face {
    font-family: "Freesentation";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-7Bold.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    unicode-range: U+AC00-D7A3; /* 한글 */
}

@font-face {
    font-family: "Freesentation-light";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-5Medium.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    unicode-range: U+AC00-D7A3; /* 한글 */
}

@font-face {
    font-family: "authentic-sans-150";
    src: url("font/AUTHENTICSans-Condensed-150.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    unicode-range: U+0000-00FF; /* 영문, 숫자, 기타 */
}
@font-face {
    font-family: "authentic-sans-130";
    src: url("font/AUTHENTICSans-Condensed-130.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    unicode-range: U+0000-00FF; /* 영문, 숫자, 기타 */
}

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

html {
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
    border: 0;
    overflow-x: hidden; /* X축 스크롤 방지 */
}

.wrapper {
    padding-left: 1em;
    padding-right: 1em;
    max-width: 50em;
}

body {
    font-size: clamp(16px, 5vw, 24px);
    font-family: "Freesentation", "authentic-sans-150",  arial, sans-serif;
    color: var(--SS-black);
    background-color: var(--SS-white);
    width: 100%;
    overflow-x: hidden; /* X축 스크롤 방지 */
    transition: background-color 0.2s ease-in-out;
}

a {
    text-decoration: none;
    color: inherit;
}

.privacy:hover {
    padding-bottom: 0.125em;
    border-bottom: solid var(--SS-stroke-desktop) var(--SS-black);
    cursor: pointer;
}

.privacy-text {
    text-align: center;
    font-size: 0.75em;
    width: auto;
    border-top: solid var(--SS-stroke-desktop) var(--SS-black);
    border-left: solid var(--SS-stroke-desktop) var(--SS-black);
    border-right: solid var(--SS-stroke-desktop) var(--SS-black);
    margin-bottom: -1em;
    /* Initial state (hidden) */
    opacity: 0;
    max-height: 0;
    padding: 0 1em; /* Set initial padding to 0 for top/bottom, keep side padding */
    overflow: hidden; /* Crucial for max-height animation */
    box-sizing: border-box; /* Good practice to include padding in width/height calculations */

    /* Add padding to the transition properties */
    transition:
        opacity 0.5s ease-out,
        max-height 0.5s ease-out,
        padding 0.5s ease-out; /* Add padding to the transition */
}

.privacy-text.is-visible {
    /* Final state (visible) */
    opacity: 1;
    max-height: 300px; /* IMPORTANT: Ensure this is large enough to contain all content + final padding */
    padding: 1em 1em 0 1em; /* Set final padding values for top, right, bottom, left */
    /* Note: padding-bottom: 0 in your original was correct if you literally want no bottom padding in visible state.
             If you want a slight bottom padding, adjust this. For a smooth transition, the values should be consistent.
             I've used 1em for top/right/left and 0 for bottom to match your original intent. */
}
a:visited {
    text-decoration: none;
    color: inherit;
}
a:hover {
    text-decoration: none;
}
a:focus {
    text-decoration: none;
}
a:hover,
a:active {
    text-decoration: none;
}

div {
    max-width: 50em;
    min-width: 288px;
    margin: 0 auto;
    display: block;
}

img {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}


svg {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.my-form {
    display: grid;
    grid-gap: 0.5em;
    margin: 0;
    width: auto;
    grid-auto-rows: 2.125em auto;
    grid-template-columns: 25% auto 25%;
    grid-template-areas:
        "name email button"
        "policy msg ad" ;
}

.my-form > .name {
    grid-area: name;
    grid-column: span 1;
}
.my-form > .email {
    grid-area: email;
    grid-column: span 2;
}
.my-form > .policy {
    grid-column: span 2;
    grid-area: policy;
}
.my-form > .ad{
    grid-column: span 2;
    grid-area: ad;
}

.my-form > .msg {
    grid-area: msg;
    grid-column: span 4;
    height: 2rem;
    font-size: 0.75em;
    line-height: 2rem;
    width: 100%;
    text-align: center;
    display: none;
}
.checkbox{
    height: 1em;
    font-size: 0.75em;
}
.checkbox span {
    padding-top: 0.2em;
}
.my-form > .submit-button {
    grid-area: button;
    grid-column: span 1;
    vertical-align: middle;
}

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;

    background-color: var(--SS-black);
    font-family: "Freesentation", "authentic-sans-150", arial, sans-serif;
    font-size: 0.9em;
    color: var(--SS-white);
    padding: 0.55em 0.5em 0.45em 0.5em;
    display: inline-block;
    line-height: 1em;
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;

    background-color: transparent;
    font-family: "Freesentation-light", "authentic-sans-130", arial, sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    color: var(--SS-input);
    border: solid var(--SS-stroke-desktop) var(--SS-black);
    padding: 0.41em 0.5em 0.29em 0.5em;
    line-height: 1em;
    box-sizing: border-box;
}

.checkbox input {
    /* Hide the default checkbox */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox label {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center content */
    cursor: pointer;
}

.checkbox label::before {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    border: solid var(--SS-stroke-desktop) var(--SS-black);
    margin-right: 0.5em;
    flex-shrink: 0; /* Prevent the pseudo-element from shrinking */
}

.checkbox input:checked + label::before {
    content: "✔"; /* This is where the checkmark goes */
    font-size: 1em; /* Adjust font size as needed */
    text-align: center;
    line-height: 1.5em; /* Match height for vertical centering */
    color: var(--SS-white); /* Color of the checkmark */
    background-color: var(--SS-black); /* Or whatever color you want the background to be */
}

input:placeholder-shown {
    color: var(--SS-input);
    border: solid var(--SS-stroke-desktop) var(--SS-black);
}

input:focus {
    outline: none;
    color: var(--SS-black);
    background-color: transparent;
}

input:not(:focus):not(:placeholder-shown):invalid {
    border-color: red;
}

input:valid {
    color: var(--SS-black);
}

/* 타이포그래피 */

p {
    text-align: justify;
    line-height: 1.5em;
    width: 100%;
    letter-spacing: 0.75px;
    hanging-punctuation: first last;
}

li {
    line-height: 1.5em;
    text-align: justify;
}

h1 {
    font-size: 1.8em;
    line-height: 1.25em;
    text-align: center;
    margin-inline: 0;
    margin-block: 0;
    font-weight: normal;
}

.t-center {
    text-align: center;
    line-height: 1.5em;
}

.indent {
    padding-left: 3em;
    margin-bottom: 0 !important;
}

/* 레이아웃 */

.header {
    padding: 2.4em 0 2.4em 0;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.header.second{
    padding: 1em 0; 
}

.nav {
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: center;
    margin-top: 0.3em;
}

.nav li {
    width: fit-content;
    border-bottom: solid var(--SS-stroke-desktop) var(--SS-black);
    list-style: none;
    cursor: pointer;
}

.contents_wrapper {
    width: 100%;
}

.main {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.section p {
    margin-bottom: 0.75em;
}

.section ol {
    padding-left: 3em;
    list-style-position: inside;
}

.section li {
    margin-bottom: 0.25em;
}

.title {
    border-bottom: solid var(--SS-stroke-desktop-bold) var(--SS-black);
    padding: 1em 0 1em 0;
    margin-bottom: 1.5em;
}

.box {
    max-width: 50%;
    min-width: 288px;
    margin-top: 1em;
    margin-bottom: 1.5em;
}

.box-title {
    display: flex;
    flex-direction: row;
    height: 2em;
    flex: 1 1 0;
    width: 100%;
}

.box-title div {
    min-width: 0;
}

.box-title-1 {
    margin-top: 0.5em;
    border-top: solid var(--SS-stroke-desktop) var(--SS-black);
    border-left: solid var(--SS-stroke-desktop) var(--SS-black);
    width: 100%;
}
.box-title-2 {
    text-align: center;
    width: 100%;
    padding: 0 0.5em 0 0.5em;
    white-space: nowrap;
}
.box-title-3 {
    margin-top: 0.5em;
    border-top: solid var(--SS-stroke-desktop) var(--SS-black);
    border-right: solid var(--SS-stroke-desktop) var(--SS-black);
    width: 100%;
}

.box-content {
    border-left: solid var(--SS-stroke-desktop) var(--SS-black);
    border-right: solid var(--SS-stroke-desktop) var(--SS-black);
    border-bottom: solid var(--SS-stroke-desktop) var(--SS-black);
    margin: 0;
}

.box-content ol {
    padding: 0 1.5em 1.5em 1.5em;
}

.box-content li {
    margin-bottom: 0.25em;
}

.two-column {
    display: grid;
    grid-template-rows: repeat(2, minmax(10px, auto));
    grid-template-columns: repeat(2, minmax(288px, auto));
    row-gap: 1em;
    column-gap: 2em;
    align-content: start;
    margin-bottom: 2em;
}

.two-column-item {
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.two-column-title {
    border-bottom: solid var(--SS-stroke-desktop) var(--SS-black);
    width: 100%;
}

.two-column-title p {
    padding: 0 0 0 3em;
}

.pad {
    width: 50em;
    height: 25em;
}
.svg-container {
    position: relative;
    width: 100%;
    max-width: 50em;
    background-color: var(--SS-black);
    border-radius: 2em;
    overflow: hidden;
    padding: 0;
    line-height: 0;
}
.svg-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
}

.footer {
    background-color: var(--SS-black);
    color: var(--SS-white) !important; /* This is the rule for .footer */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-top: 4em;
}

.footer_main {
    display: flex;
    flex-direction: row;
    padding: 2em 1em 2em 1em;
    gap: 2em;
}

.footer_main div {
    flex: 1 1 0;
    min-width: 200px;
}

.footer_main div:first-child {
    flex: 2 1 0;
}

.footer_main div p {
    font-size: clamp(12px, 0.8em, 16px);
    line-height: 1.5em;
    margin-bottom: 0.5em;
    color: var(--SS-white); /* Added this line for explicit color setting */
}

#logo {
    margin-top:-15rem; width: calc(100% + 40rem); margin-left: -20rem; margin-right: -20rem;
    }

/* 모바일 스타일 */
@media (width <= 1024px) {
    body {
        max-width: none;
        min-width: 0;
        margin: 0 auto;
    }
    
    #logo {
    width: calc(100vw + 7em);
    min-width: 0;
    margin-top: -4rem;
    margin-left: -5rem; margin-right: -5rem;
    }

    button {
        font-size: 1em;
    }

    div {
        min-width: 0;
    }

    .nav {
        justify-content: space-between;
    }

    input {
        width: 100%;
    }
    .form-wrapper {
        width: 100%;
    }
    .my-form {
        display: grid;
        grid-template-columns: 100%; /* Single column for all items */
        grid-template-areas:
            "name"
            "email"
            "policy"
            "ad"
            "button"; /* Stack items vertically */
        width: 100%; /* Full width */
        grid-auto-rows: auto; /* Let rows adjust their height automatically */
    }

    .my-form > .name,
    .my-form > .email,
    .my-form > .submit-button {
        grid-column: span 1; /* Ensure all items span the single column */
        /* You might want to adjust heights/margins for mobile if needed */
        height: 2.25em;
    }
    .my-form > .checkbox {
        min-width: 0;
        grid-column: span 1;
        height: 1.25em;
        justify-self: left;
        margin: 0;
    }

    .box {
        width: 100%;
        max-width: none !important;
    }

    .two-column {
        grid-template-columns: repeat(1, minmax(288px, auto));
        grid-template-rows: repeat(4, minmax(0, auto));
    }

    .pad {
        width: calc(100vw - 2em);
        height: 25em;
    }
    .footer {
        width: 100vw;
    }
    .footer_main {
        flex-direction: column;
        gap: 0.75em;
        padding-top: 1em;
    }

    .footer_main div { width: 100%; }
}