/**********************/
/** Global Variables **/
/**********************/
:root {
  --background-color: white;
  --key-color: #ffd900;
  --text-color: black;
  --border-color: black;
  --highlight-color: dodgerblue;
  --root-tb-padding: 0rem;
  --root-lr-padding: 1rem;
  --header-tb-padding: 0rem;
  --header-lr-padding: 1rem;
  --header-font-size: 1rem;
  --max-width: 1600px;
  --gap: 0;
  --account-field-height: calc(1rem * 1 + 0.5rem * 2 + 1px * 2);
  --header-height: 3rem;
  --navbar-height: 3rem;
  --header-buttons-gap: 1rem;
  --gap-xsmall: 0.5rem;
  --gap-small: 0.75rem;
  --gap-medium: 1rem;
  --gap-large: 1.25rem;
  --gap-xlarge: 2rem;
}


@media screen and (min-width: 900px) {
    :root {
        --root-lr-padding: 3rem;
        --header-lr-padding: 3rem;
    }
}

@media screen and (min-width: 1200px) {
    :root {
        --root-lr-padding: 5rem;
        --header-lr-padding: 5rem;
    }
}

.columns {
    gap: 0 var(--gap-medium);
}
/***************/
/** Components */
/***************/

/** Home Page Animations */
.home-page-element-hidden-left {
    clip-path: inset(0 100% 0 0);
}

.home-page-element-hidden-right {
    clip-path: inset(0 0 0 100%);
}

.home-page-element-wipe-in-left {
    animation: wipeFromLeft 0.5s ease-in-out forwards;
}

.home-page-element-wipe-in-right {
    animation: wipeFromRight 0.5s ease-in-out forwards;
}

@keyframes wipeFromLeft {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes wipeFromRight {
    from {
        clip-path: inset(0 0 0 100%);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/** Header */
#header {
    width: 100%;
    height: var(--header-height);
    padding: 0 var(--header-lr-padding);
    background-color: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 888;
    line-height: 1.5;
    border-bottom: 1px solid black;
}

#header .columns {
    margin: 0 auto;
    max-width: var(--max-width);
    height: 100%;
}

/* #header .column {
    display: flex;
    align-items: center;
} */
/* 
#header-tabs {
    padding-left: 1.25rem;
} */

@media screen and (min-width: 900px) {
    #header .column.is-block-900 {
        display: flex;
        align-items: center;
    }
}

#header .column.is-hidden-900 {
    display: flex;
}

@media screen and (min-width: 900px) {
    #header .column.is-hidden-900 {
        display: none;
    }
}

/** Mobile Hamburger Menu */
.mobile-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: black;
}

.mobile-menu-dropdown {
    position: fixed;
    top: var(--header-height);
    right: 0;
    background-color: var(--key-color, #ffd900);
    border-left: 1px solid black;
    min-width: 200px;
    z-index: 9999 !important;
}

.mobile-menu-item {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid black;
    cursor: pointer;
    text-decoration: none;
    color: black;
    transition: background-color 0.2s;
}

.mobile-menu-item:hover {
    background-color: black;
    color: white;
}

.mobile-menu-divider {
    height: 1px;
    background-color: black;
    margin: 0;
}

@media screen and (min-width: 1200px) {
    #header-tabs {
        padding-left: 0;
    }
}

.container.header-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--header-buttons-gap);
}

/** Buttons */
.button {
    font-family: 'AG Choijeongho Minburi Std. Family', Pretendard, sans-serif;
}

a.button, button.button {
    display: block;
    width: auto;
    border-radius: 3em;
    padding: 0.5rem 0.75rem;
    line-height: 1;
    white-space: nowrap;
}

a.button[data-type='login'] {
    background-color: transparent;
    color: black;
    padding: 0;
}

a.button[data-type='font'], button.button[data-type='font'] {
    background-color: black;
    color: white;
}

button.button[type='submit'] {
    background-color: black;
    color: white;
    width: 200px;
}

/** Footer */
.footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2rem 0;
    background-color: black;
    color: white;
}

.footer .section {
    padding: 0;
}

.footer .column .container {
    gap: 0.5rem;
}

/** Form */
#login, #register, #verify, #verified, #find-password, #verify-reset, #reset-password {
    background-color: var(--key-color, rgb(217,65,65));
}

#login .section.is-center,
#register .section.is-center,
#find-password .section.is-center,
#verify-reset .section.is-center,
#reset-password .section.is-center {
    padding: var(--root-tb-padding) var(--root-lr-padding);
}

#user-auth-container {
    width: 100%;
    gap: 1rem;
}

#user-auth-container .container.top {
}

@media screen and (min-width: 600px) {
    #user-auth-container {
        width: 480px;
    }
}

.form#user-auth {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid black;
}

#login .form#user-auth {
    border-bottom: 1px solid black;
}

.form#user-auth .field {
    display: flex;
    width: 100%;
    align-items: start;
    flex-direction: column;
    gap: 0.5rem;
}

.form#user-auth .input {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    border: 1px solid black;
    border-radius: 0;
    color: black;
    font-size: 1rem;
    padding: 1rem 1.25rem;
    background-color: transparent;
}

.form#user-auth .input:focus {
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid black;
    background-color: transparent;
}

.form#user-auth .input::placeholder {
    color: black;
}

.form#user-auth .button, #verified .button {
    width: 100%;
    padding: 1rem;
    background-color: black;
    color: var(--key-color, rgb(217,65,65));
    border-radius: 0;
}

@media screen and (min-width: 600px) {
    .form#user-auth {
        width: 480px;
    }
}

/** Dropdown */
.dropdown-field {
    position: relative;
    width: 100%;
}

.dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
}

.dropdown-toggle .selected-text {
    flex: 1;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--key-color, rgb(217,65,65));
    border: 1px solid black;
    border-top: 0;
    z-index: 1000;
    max-height: 15rem;
    overflow-y: auto;
}

.dropdown-item {
    padding: 1rem 1.5rem;
    cursor: pointer;
    border-bottom: 1px solid black;
    transition: background-color 0.15s ease;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: black;
    color: var(--key-color, rgb(217,65,65));
}

#font-style .dropdown-field {
    background-color: white;
    border: 0;
    min-width: 10rem;
}

#font-style #style-dropdown-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    border: 1px solid black;
    border-radius: 0;
    width: 100%;
    height: 1.875rem;
}

#font-style #style-dropdown-toggle .container.text {
    padding: 0.5rem 1rem;
    border-right: 1px solid black;
    flex: 1;
}

#font-style #style-dropdown-toggle .container.text .selected-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#font-style #style-dropdown-toggle .container.icon {
    padding: 0.5rem;
}

#font-style #style-dropdown-menu {
    background-color: white;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

#font-style .dropdown-item {
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

#font-style .dropdown-item:hover {
    background-color: black;
    color: white;
}

/** Search & Filter & Controls */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

#expand-button {
    cursor: pointer;
}

#fonts-filter > *, #fonts-writer > * {
    padding: var(--root-tb-padding) var(--root-lr-padding);
}

#fonts-filter > * > *, #fonts-writer > * > * {
    max-width: var(--max-width);
    margin: 0 auto;
}

#fonts-writer .icon {
    width: 1.125rem;
    height: 1.125rem;
}

@media screen and (min-width: 900px) {
    #controls .column:has(#fonts-nav-font-size) {
        display: flex;
        justify-content: start;
    }

    #controls #fonts-nav-font-size {
        min-width: 0;
        flex: 1;
    }
    
    #controls #fonts-nav-font-size #font-size {
        flex: 1;
        min-width: 0;
    }
}

#fonts-filter #logo-column,
#font #logo-column {
    display: none;
}

@media screen and (min-width: 1200px) {
    #fonts-filter #logo-column,
    #font #logo-column {
        display: flex;
        align-items: center;
    }
}

#fonts-filter .columns {
    height: 100%;
}

#fonts-filter .container.nav {
    height: var(--navbar-height);
    align-items: center;
}

#fonts-filter .column > .container {
    height: 100%;
    align-items: center;
}

#fonts-filter .button {
    background: none;
    color: white;
    width: auto;
}

#fonts-filter .container.categories {
    gap: 1.25rem;
}

#fonts-filter input[type="search"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 1;
    border: none;
    outline: none;
    background-color: transparent;
    color: white;
}

#fonts-filter input[type="search"]:focus {
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

#fonts-filter .icon {
    width: auto;
    height: 1rem;
}

#fonts-filter .container.expand {
    cursor: pointer;
}

.button.category {
    padding: 0;
    opacity: 0.5;
}

.button.category.active {
    opacity: 1;
}

#fonts-list {
    display: none;
    height: calc(40px * 7);
    overflow-y: auto;
    background-color: white;
    color: black;
    /* Hide scrollbar for Chrome, Safari and Opera */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

#fonts-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

#fonts-list.expanded {
    display: flex;
    /* padding-bottom: var(--gap-medium); */
}

/* Mini scrollbar indicator */
.scroll-progress-indicator {
    position: absolute;
    /* right: 1.5rem; */
    bottom: 0;
    width: 3px;
    height: 5rem;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    pointer-events: none;
}

#fonts-list-container:not(.expanded) .scroll-progress-indicator {
    display: none;
}

.scroll-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: black;
    border-radius: 8px;
    transition: top 0.1s ease-out;
}

.fonts-list-controls {
    width: 100%;
    padding: var(--gap-medium) 0;
    gap: var(--gap-large);
}

.fonts-list-controls .button {
    padding: 0;
}

.fonts-list-items {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--gap-medium);
}

.fonts-list-item {
    height: fit-content;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.fonts-list-item span {
    cursor: pointer;
    user-select: none;
}

.fonts-list-item:has(span.inactive) {
    opacity: 0.3;
    /* border-bottom-color: rgba(0, 0, 0, 0.3) !important; */
}

.fonts-list-item:hover {
    opacity: 1;
}

.container.controls {
    height: var(--navbar-height);
    /* padding: 0 var(--root-lr-padding) !important; */
    justify-content: center;
    border-bottom: 1px solid black;
    background-color: white;
    color: black;
}

#controls {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    line-height: 1;
}

#controls #sample-text {
    width: 50%;
    font-weight: 500;
    color: black;
}

#controls #sample-text::placeholder {
    color: black;
    opacity: 0.5;
}

.block-tester .container.controls {
    padding: 0.75rem var(--root-lr-padding) !important;
    height: auto;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 0.5rem 1rem;
}

/* Mobile: font-name and font-style on first line */
.block-tester .container.controls .container.font-name {
    flex: 1 1 100%;
    gap: 1rem;
}

.block-tester .container.controls .container.font-style {
    display: none;
}

/* Mobile: sliders on second line, taking full width */
.block-tester .container.controls .container.font-size,
.block-tester .container.controls .container.line-height,
.block-tester .container.controls .container.letter-spacing {
    flex: 0 0 auto;
}

.block-tester .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.block-tester .container.controls .container.font-name .selected-text.mobile {
    display: inline-block;
}

#font-style #style-dropdown-toggle {
    display: none;
}

/* Desktop: all in one line with space-between */
@media screen and (min-width: 900px) {
    .block-tester .container.controls {
        padding: 0.75rem 0 !important;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 2rem;
        height: var(--navbar-height);
    }
    
    .block-tester .container.controls .container.font-name {
        flex: 0 0 auto;
    }
    .block-tester .container.controls .container.font-style {
        display: flex;
        flex: 0 0 auto;
    }
    
    .block-tester .container.controls .container.font-size,
    .block-tester .container.controls .container.line-height,
    .block-tester .container.controls .container.letter-spacing {
        flex: 1 1 auto;
        min-width: 0;
    }
    .block-tester .container.controls .container.font-name .selected-text.mobile {
        display: none;
    }
    #font-style #style-dropdown-toggle {
        display: flex;
    }
}


.block-tester .container.controls .column {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.block-tester {
    display: flex;
    flex-direction: column;
}

#controls .container.font-size {
    flex-direction: row;
    align-items: center;
    min-width: 0;
}

.block-tester .container.controls .container {
    width: auto;
    flex-direction: row;
    align-items: center;
    min-width: 0;
}


.block-tester .container.align {
    display: none;  /* Hidden on mobile by default */
    flex-direction: row;
    justify-content: end;
    gap: 1rem;
}

@media screen and (min-width: 900px) {
    .block-tester .container.align {
        display: flex;  /* Show on desktop */
    }
}

.block-tester .container.align .button {
    padding: 0;
}

.block-tester .container.align .button img {
    width: 1.75rem !important;
    height: 1.75rem !important;
    max-width: none !important;
    object-fit: contain;
}

.block-tester .container.font-size,
.block-tester .container.line-height,
.block-tester .container.letter-spacing {
    white-space: nowrap;
    gap: 0.5rem;
    flex: 1;
}

#font-size-value,
#line-height-value,
#letter-spacing-value {
    display: inline-block;
}

#font-size-value,
#line-height-value,
#letter-spacing-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#filter #font-size-value {
    display: none;
}

@media screen and (min-width: 1200px) {
    #filter #font-size-value {
        display: inline-block;
    }
}


#controls #font-size,
.block-tester .container.controls input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 2px;
    background: transparent;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
}

.block-tester .container.controls input[type="range"] {
    display: none;
}

@media screen and (min-width: 900px) {
    .block-tester .container.controls input[type="range"] {
        display: block;
    }
}

#controls #font-size::-webkit-slider-runnable-track,
.block-tester .container.controls input[type="range"]::-webkit-slider-runnable-track {
    height: 2px;
    background: var(--track-bg, linear-gradient(to right, black 50%, #999 50%));
}

#controls #font-size::-webkit-slider-thumb,
.block-tester .container.controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4px;
    height: 16px;
    border: none;
    background: black;
    margin-top: -8px;
}

#font-name {
    display: flex;
}

#font-size-value, #line-height-value, #letter-spacing-value {
    display: inline-block;
}

@media screen and (min-width: 900px) {
    #font-name, #font-size-value, #line-height-value, #letter-spacing-value {
        display: none;
    }
}

@media screen and (min-width: 1500px) {
    #font-name {
        display: flex;
    }
    
}

@media screen and (min-width: 1200px) {
    #font-size-value, #line-height-value, #letter-spacing-value {
        display: inline-block;
    }
}

.block-tester .container.controls > .container.align {
    gap: 0.5rem;
}

.block-tester .container.controls > .container.align .button {
    padding: 0;
}

.block-tester .button.style-switcher {
    padding: 0;
    text-align: left;
    border: 1px solid black;
    border-radius: 0;
    padding: 0.5rem 1rem;
}

.block-tester .content-text {
    padding: 2.5rem var(--root-lr-padding);
}

@media screen and (min-width: 900px) {
    .block-tester .content-text {
        padding: 2.5rem 0;
    }
}

.block-tester .content-text:focus {
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

input.sample-text {
    width: 100%;
    border: none;
    font-weight: 700;
}

input.sample-text::placeholder {
    opacity: 0.25;
}

input.sample-text:focus {
    outline: none;
}


/** Section */
.section.has-max {
    gap: var(--gap);
}

.section.has-max > * {
    padding: var(--root-tb-padding) var(--root-lr-padding);
}

.section.has-max > * > * {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
}


.section.has-max .column.is-6-8.is-center,
.section.has-max .column.is-6-8-600.is-center {
    grid-column: span 8;
}

.section.has-max .column.is-8-12.is-center,
.section.has-max .column.is-8-12-900.is-center,
.section.has-max .column.is-10-12.is-center {
    grid-column: span 12;
}

@media screen and (min-width: 900px) {
    .section.has-max .column.is-8-12-900.is-center {
        grid-column: 3/ span 8;
    }
}

@media screen and (min-width: 1200px) {
    .section.has-max .column.is-6-8.is-center,
    .section.has-max .column.is-6-8-600.is-center {
        grid-column: 4 / span 6;
    }

    .section.has-max .column.is-8-12.is-center {
        grid-column: 3 / span 8;
    }

    .section.has-max .column.is-10-12.is-center {
        grid-column: 3 / span 10;
    }
}

.section.fullscreen {
    height: calc(100dvh - var(--header-height) - var(--navbar-height)); 
    background-color: var(--key-color, rgb(217,65,65));
}

/** Container */
.container.main {
    flex-direction: column;
    flex: 1 1 auto;
}

/** Home */
#home #header {
    border-bottom: 1px solid black;
    background-color: var(--key-color, rgb(217,65,65));
}

#news-header {
    transition: opacity 0.75s ease-out;
}

#news-header {
    padding-top: var(--gap-medium);
}

#news-header a {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#news-header a span {
    line-height: 1;
}

#news-header a span:not(:first-child) {
    border-left: 1px solid black;
    margin-left: var(--gap-medium);
    padding-left: var(--gap-medium);
}

#news {
    height: 100%;
}

#news img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#filter {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: black;
    color: white;
    gap: 0;
}

/** Font */
#font #header {
    background-color: var(--key-color, rgb(217,65,65));
    border-bottom: 1px solid black;
}

#font .section.fullscreen {
    min-height: calc(100dvh - var(--header-height) - var(--navbar-height));
    height: auto;
}

@media screen and (min-width: 900px) {
    #font .section.fullscreen {
        min-height: calc(100dvh - var(--header-height) - var(--navbar-height));
    }
}

#font .section.fullscreen .container.main {
    background-color: var(--key-color, rgb(217,65,65));
}

#font .section.fullscreen .container.main .container.font-name {
    justify-content: start;
    align-items: center;
    padding-top: calc(var(--header-height) - var(--root-tb-padding));
}

#font .section.fullscreen .container.main .container.font-name .title {
    color: black;
    font-size: 2.5rem;
    line-height: 1.125;
    text-align: left;
}

@media screen and (min-width: 900px) {
    #font .section.fullscreen .container.main .container.font-name .title {
        font-size: 5rem;
    }
}

#font .section.fullscreen .container.main .container.font-description {
    padding-bottom: var(--header-height);
}

#font .section.fullscreen .container.main .container.font-description .description {
    color: black;
    text-align: start;
    line-height: 1.625;
}

#font .section.fullscreen .container.main .container.credit {

}

#font .main .section:not(.fullscreen) {
    margin-bottom: 2rem;
}

#font #logo {
    opacity: 0;
}

.section#nav {
    position: fixed;
    top: calc(100% - var(--navbar-height));
    background-color: black;
    color: white;
    z-index: 999;
    line-height: 1.5;
    height: var(--navbar-height);
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 900px) {
    .section#nav {
        position: sticky;
        top: 0;
    }
}

.section#nav .container.nav {
    flex-direction: row;
    justify-content: space-between;
}

.section#nav .container.nav .nav {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: nowrap;
}

.section#nav .container.nav .nav * {
    white-space: nowrap;
}

.section#nav .container.nav .container.price {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    gap: 1rem;
}

@media screen and (min-width: 900px) {
    .section#nav .container.nav .container.price {
        justify-content: end;
        /* padding-left: 1.5rem; */
    }
}

#options .container.buttons {
    flex-direction: row;
    gap: 0.5rem;
}

@media screen and (min-width: 900px) {
    #options .container.buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media screen and (min-width: 1200px) {
    #options .container.buttons {
        flex-direction: row;
        justify-content: end;
    }
}

.section#nav .container.nav .container.price .container.licenses,
#font .container.options .container.licenses {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

@media screen and (min-width: 900px) {
    #font .container .options .container.licenses {
        border-left: 1px solid white;
        border-right: 1px solid white;
        padding: 0 1rem;
    }
}

.section#nav .container.nav .container.price .license-option,
#font .container.options .license-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.section#nav .container.nav .container.price .license-radio,
#font .container.options .license-radio,
#user-auth input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid white;
    border-radius: 50%;
    background-color: transparent;
    position: relative;
    cursor: pointer;
}

#user-auth input[type="checkbox"] {
    border: 1px solid black;
}

.section#nav .container.nav .container.price .license-radio:checked,
#font .container.options .license-radio:checked {
    background-image: radial-gradient(circle, white 40%, transparent 40%);
}

#user-auth input[type="checkbox"]:checked {
    background-image: radial-gradient(circle, black 40%, transparent 40%);
}

.section#nav .container.nav .container.price a {
    background-color: #222;
    color: #dcdcdc;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    vertical-align: middle;
}

.section#nav .container.nav .container.price button {
    background-color: transparent;
    /* border: 1px solid #222; */
    /* padding: 0.5rem 1rem; */
    /* border-radius: 0.5rem; */
    /* font-size: 1rem; */
    padding: 0;
    font-weight: 700;
}

#font .container.options {
    position: absolute;
    bottom: var(--navbar-height);
    left: 0;
    max-width: 100%;
    margin-bottom: 0;
    background-color: black;
    color: white;
    padding: 1rem var(--root-lr-padding);
    border-bottom: 1px solid white;
    display: none;
}

@media screen and (min-width: 900px) {
    #font .container.options {
        top: -8rem;
        left: 0;
    }
}

#font .container.options.active {
    display: block;
}

#options-content {
    flex-direction: column;
    height: 100%;
    gap: 1.5rem;
}

@media screen and (min-width: 900px) {
    #options-content {
        flex-direction: row;
        justify-content: space-between;
    }
}

#font .container.options a {
    background-color: white;
    color: black;
    padding: 1rem 2rem;
    border-radius: 0;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
}

#font .container.options button {
    background-color: transparent;
    padding: 1rem 2rem;
    border: 1px solid white;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#font .container.options button,
#font .container.options a {
    width: 100%;
}

@media screen and (min-width: 1200px) {
    #font .container.options button,
    #font .container.options a {
        width: 50%;
    }
}

#font .container.nav #nav-links-column {
    display: none;
    align-items: center;
    line-height: 1.5;
}

@media screen and (min-width: 900px) {
    #font .container.nav #nav-links-column {
        display: flex;
    }
}

#font .container.title {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: var(--gap-small) var(--root-lr-padding);
}

#font .container.main .title {
    font-size: 1.25rem;
    font-weight: 400;
}

#font .section#family {
    margin-top: 0;
}

#font .section#family .container.family {
    gap: 1.5rem;
}

#font .section#family .container.family .subtitle {
    font-size: 1rem;
    font-weight: 400;
}

#font .section#family .container.family .placeholder {
    font-size: 2rem;
    word-break: break-all;
}

@media screen and (min-width: 900px) {
    #font .section#family .container.family .placeholder {
        font-size: 4rem;
    }
}

/** Font Responsive Layout */

#font .section.has-max:not(.fullscreen) > * {
    gap: 1rem;
    padding: 0 !important;
}

#font .container.family,
#font .container.glyphs,
#font .container.info,
#font .container.license,
#font .container.images {
    padding: var(--root-tb-padding) var(--root-lr-padding) !important;
}

@media screen and (min-width: 900px) {
    #font .section.has-max:not(.fullscreen) > * {
        padding: var(--root-tb-padding) var(--root-lr-padding) !important;
    }
    #font .container.family,
    #font .container.glyphs,
    #font .container.info,
    #font .container.license,
    #font .container.images {
        padding: 0 !important;
    }
}




#font .section#prototype .container.testers {
    gap: 2.5rem;
}

#family, #prototype, #glyphs, #images, #license {
    scroll-margin-top: 3.5rem;
}

#credit, #info {
    scroll-margin-top: 3.5rem;
}

/** Tester */
.tester-wrapper {
    width: 100%;
}

.tester {
    width: 100%;
    height: auto;
    background-color: white;
    overflow-y: hidden;
    line-height: 1;
}

.tester.home {
    height: 500px;
}

.tester:focus {
    outline: none;
}

.control {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.control button {
    font-size: 1rem;
    padding: 0;
}

.control a.button {
    padding: 0;
}

.control.dropdown {
    position: relative;
    display: inline-block;
}

.toggle.noclick {
    cursor: default;
}

.options {
    position: absolute;
    bottom: 100%;
    left: 0;
}

.options li {
    border-bottom: 1px solid black;
    cursor: pointer;
}

/** Tester Buttons */
.tester-buttons-wrapper {
    width: 100%;
    transition: background-color 0.125s ease, color 0.125s ease;
    transition: opacity 0.3s ease;
    border-bottom: 1px solid black;
}

.tester-buttons-wrapper .controls {
    padding: 0 0 1.5rem 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    line-height: 1;
    background-color: transparent;
}

.tester-buttons-wrapper .controls .container.metadata {
    flex-direction: row;
    gap: 0.75rem;
    flex: 1 1 auto;
}

.tester-buttons-wrapper .controls .container.metadata > span:not(:last-child)::after {
    content: "|";
    margin-left: 0.75rem;
}

.tester-buttons-wrapper .controls .container.purchase {
    width: auto;
}

.tester-buttons-wrapper .controls .container.purchase a {
    background-color: #dcdcdc;
    color: black;
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
}

.tester-buttons-wrapper .tester {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    transition: background-color 0.125s ease;
    padding-bottom: 1.5rem;
    min-height: 5rem;
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 4rem;
}

@media screen and (min-width: 900px) {
    .tester-buttons-wrapper .tester {
        font-size: 6.75rem;
        min-height: 10rem;
    }
}

/** Glyphs */
.container.glyphs {
    gap: 3rem;
}

.glyphs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    border-left: 1px solid black;
    border-top: 1px solid black;
}

.glyph-container {
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glyph-container {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.glyph-container.category {
    font-family: 'AG Choijeongho Minburi Std. Family', Pretendard, sans-serif;
    font-weight: 700;
    background-color: #dcdcdc;
}

.glyph-container:not(.category) {
    position: relative;
}

.glyph-container:not(.category):hover {
    z-index: 9999;
    background-color: var(--page-color, dodgerblue);
}

.glyph-container:not(.category):hover .glyph {
    position: absolute;
    width: 160%;
    height: 160%;
    bottom: -30%;
    left: -30%;
    background-color: var(--page-color, white);
    border: 1px solid black;
    font-size: 5rem;
}

.glyph {
    font-size: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.glyph-category {
    font-weight: 400;
}

@media screen and (min-width: 900px) {
    .glyph {
        font-size: 1.5rem;
    }
}

/**********/
/** Pages */
/**********/

/** Default */
.section .tester-wrapper {
    margin-bottom: 2rem;
}

.section .container.buttons {
    justify-content: center;
}




/** Font */
.section.metadata, .section.credit {
    gap: calc(var(--gap) / 2);
}

.section.credit .columns {
    row-gap: 0.25rem;
}


/** Account */
#account {
    background-color: #dcdcdc;
    line-height: 1;
}

#account .columns {
    gap: 2.5rem;
}

#account .container.main .column-header {
    border-bottom: 1px solid black;
    padding-bottom: var(--gap-small);
}

#account .column-header .title {
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
}

#account .container.info > *,
#account .container.plan > * {
    padding: var(--gap-large) 0;
    border-bottom: 1px solid black;
}

#account .container.fonts {
    /* border-bottom: 1px solid black; */
}

#account .container.fonts > * {
    padding: var(--gap-large) 0;
}

#account .container.agfonts,
#account .container.nonagfonts {
    flex-direction: column;
    align-items: start;
    gap: var(--gap-large);
    border-bottom: 1px solid black;
}

#account .subcolumn-header {
    justify-content: space-between;
    padding-bottom: var(--gap-large);
    border-bottom: 1px solid black;
    /* text-indent: 2rem; */
}

#account .container.agfont,
#account .container.nonagfont {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


#account .container.email-pw {
    gap: var(--gap-large);
}

#account .container.pw .container.top {
    flex-direction: row;
    justify-content: space-between;
}

#account #pw-edit {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-top: var(--gap-xsmall);
}

#account #pw-edit .container {
    width: 100%;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    padding: var(--gap-xsmall) 0;
    border-top: 1px solid black;
}

#account #pw-edit .container .input {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    background-color: transparent;
    border: none;
    padding: 0;
    padding-left: var(--gap-medium);
}

#account #pw-edit .container .input:focus {
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}




#account .container.email,
#account .container.name,
/* #account .container.pw, */
#account .container.payment,
#account .container.discount,
#account .container.date,
#account .container.interval,
#account .container.font {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* min-height: var(--account-field-height); */
}

#account .container.discount input {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: right;
}

#account .container.discount input:focus {
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
}

#account .form ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

#account .form ul li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

#account .button {
    width: auto;
    height: auto;
    padding: 0;
    background-color: transparent;
    color: black;
    border-radius: 0;
    font-weight: 400;
    line-height: 1;
}

#account .container.info,
#account .container.plan,
#account .container.fonts {
    gap: 0rem;
}



#account .container.status {
    padding: var(--gap-xsmall) 0;
    text-align: right;
}

/** Checkout */
#checkout, #checkout-cart, #checkout-billing, #payment-success, #payment-fail, #payment-billing-success {
    background-color: var(--key-color, rgb(255, 196, 70));
}

#checkout .mobile-menu-dropdown,
#checkout-cart .mobile-menu-dropdown,
#checkout-billing .mobile-menu-dropdown,
#payment-success .mobile-menu-dropdown,
#payment-fail .mobile-menu-dropdown,
#payment-billing-success .mobile-menu-dropdown {
    background-color: var(--key-color, rgb(255, 196, 70));
}

#checkout .columns {
    gap: 1rem 0;
}

@media screen and (min-width: 600px) {
    #checkout .columns {
        gap: 1rem 2.5rem;
    }
}

.container.checkout {
    gap: 2.5rem;
}

.container.checkout .container.top {
    /* gap: 0.5rem; */
}

.container.checkout .container.top > *,
.container.checkout .container.bottom > * {
    padding: 1rem 0;
    border-bottom: 1px solid black;
}

.container.checkout .container.bottom {
    /* gap: 1.5rem; */
}

.container.checkout .container.info,
.container.checkout .container.total,
.container.checkout .container.price,
.container.checkout .container.discount {
    flex-direction: row;
    justify-content: space-between;
}

.container.checkout .container.price {
    border-bottom: none;
}

.container.checkout .container.left {
    flex-direction: row;
    gap: 2.5rem;
    align-items: start;
}

.container.checkout .container.right {
    flex-direction: row;
    text-align: right;
    justify-content: end;
}

.container.checkout .container.items {
    gap: 0.75rem;
}

.container.checkout .container.item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.container.checkout .container.item .container.left {
    gap: 2.5rem;
    align-items: center;
}

.container.checkout .container.item .container.right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 1rem;
}

.container.checkout .delete-cart-item {
    cursor: pointer;
    padding: 0;
    position: relative;
    top: 1px;
}


.container.checkout .container.name {
    gap: 0.25rem;
}

.container.checkout .container.name .title {
    font-size: 1rem;
    font-weight: 700;
}

.container.checkout .container.total {
    display: flex;
    justify-content: space-between;
    align-items: end;

}

.container.checkout #payment-button,
.container.checkout #disclaimer-button,
.container.checkout #card-register-button,
#mypage-link {
    width: fit-content;
    background-color: black;
    color: var(--key-color, rgb(255, 196, 70));
    border-radius: 0;
    padding: 1rem 2.5rem;
    font-weight: 700;
    align-self: flex-end;
    margin-top: 1rem;
}

.container.checkout #disclaimer-button {
    color: black;
    background-color: transparent;
    border: 1px solid black;
}

.container.checkout .container.disclaimer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
    padding-top: 1rem;
    border-top: 1px solid black;
}

.container.checkout #discount-code-input {
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background-color: transparent;
}



.container.checkout #apply-discount-btn {
    width: fit-content;
    padding: 0;
}

.container.checkout #payment-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

#error-box {
    color: red;
}

#error-box[aria-hidden="true"] {
    display: none;
}

.container.checkout .container.method {
    gap: 1rem;
}

.payment-method-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.container.method .label:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.container.method .label {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    cursor: pointer;
}

.payment-method-button {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid black;
    border-radius: 50%;
    background-color: transparent;
    position: relative;
    top: 1px;
}

.payment-method-button:checked {
    background-image: radial-gradient(circle, black 40%, transparent 40%);
}

/** Typography **/
.content.metadata {
    font-size: 0.875rem;
}

/** Cloud */
#cloud header {
    background-color: var(--key-color, rgb(255, 196, 70));
    border-bottom: 1px solid black;
}

#cloud main {
    background-color: var(--key-color, rgb(255, 196, 70));
}

#cloud .section.fullscreen {
    height: auto;
    min-height: calc(100dvh - var(--header-height));
    background-color: var(--key-color, rgb(255, 196, 70));
}

#cloud .section.fullscreen .container.main {
    justify-content: center;
    gap: 3rem;
}

#cloud .section#nav {
    min-height: 3rem;
}

#cloud .section#nav .container.main {
    justify-content: center;
}

#cloud .container.install {
    justify-content: center;
    align-items: center;
}

#cloud .button.install {
    width: fit-content;
    border: 1px solid black;
    border-radius: 0;
    padding: 1rem 1.5rem;
    display: flex;
    gap: 1rem;
}

#cloud .container.subscription .columns.cards {
    /* border-top: 1px solid black; */
    padding-top: 3rem;
}

/** Billing Card */
.billing-card {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 0;
}

.billing-card > *:not(:first-child) {
    /* border-top: 1px solid black; */
    /* padding-top: 0.75rem; */
}

.billing-card .title {
    font-family: 'AG Superblack Gothic';
}

.billing-card .description {
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    white-space: pre-wrap;
    padding: 0.875rem 0;
}

@media screen and (min-width: 900px) {
    .billing-card .description {
        min-height: 91px;
    }
}

.billing-card .field {
    width: 100%;
}

.billing-card .field .control {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 0;
}

.billing-card .field .control .subscription-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 1rem 0;
}

.billing-card .field .control .subscription-option:not(:last-child) {
    border-bottom: 1px solid black;
}

.billing-card .field .control .subscription-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid black;
    border-radius: 50%;
    background-color: transparent;
    position: relative;
    cursor: pointer;
}

.billing-card .field .control .subscription-radio:checked {
    background-image: radial-gradient(circle, black 40%, transparent 40%);
}

.billing-card .button {
    width: 100%;
    margin-top: 0.75rem;
    border-radius: 0;
    border: 1px solid black;
    padding: 1rem;
    font-size: 1rem;
}

.billing-card .button.subscribe {
    background-color: black;
    color: var(--key-color, rgb(255, 196, 70));
}

.billing-card .button.subscribe.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/** Terms */
#terms, #privacy {
    background-color: #dcdcdc;
}

/** Swiper */
.container.images {
    width: 100%;
    position: relative;
}

.swiper {
    width: 100%;
    height: 500px;
    background-color: #f5f5f5;
    user-select: none;
    -webkit-user-select: none;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    max-width: 100%;
    width: auto;
    height: 100%;
    object-fit: contain;
}

.swiper-button-prev,
.swiper-button-next {
    color: black;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    font-size: 2rem;
}