@charset "utf-8";

/*
 * Todo 9: public community, help/content, auth/member and popup geometry.
 * This file consumes the canonical tokens owned by glowkiki-final.css.
 */

:where(
    #gk-notice-list,
    #gk-board-list,
    #gk-board-view,
    #gk-board-write,
    #gk-lookbook,
    #gk-gallery-detail,
    #gk-events.gk-board-event-detail,
    #bo_list,
    #bo_v,
    #bo_w,
    #gk-faq,
    .customer-wrap.faq-page,
    #gk-new,
    #gk-bbs-search,
    #ctt,
    #content.wrapper.layout-page,
    .latest_wr
) {
    width: min(calc(100% - (var(--gk-page-gutter) * 2)), var(--gk-page-max)) !important;
    max-width: var(--gk-page-max) !important;
    min-width: 0;
    margin-inline: auto !important;
    box-sizing: border-box;
    overflow-x: visible !important;
}

:where(
    #gk-notice-list,
    #gk-board-list,
    #gk-board-view,
    #gk-board-write,
    #gk-lookbook,
    #gk-gallery-detail,
    #gk-events.gk-board-event-detail,
    #bo_list,
    #bo_v,
    #bo_w,
    #gk-faq,
    .customer-wrap.faq-page,
    #gk-new,
    #gk-bbs-search,
    #content.wrapper.layout-page,
    .latest_wr,
    .gk-popup-page,
    #profile.new_win,
    #formmail.new_win,
    #validation_check,
    #confirm_check,
    .bbs-view-image,
    #poll_result
) *,
:where(
    #gk-notice-list,
    #gk-board-list,
    #gk-board-view,
    #gk-board-write,
    #gk-lookbook,
    #gk-gallery-detail,
    #gk-events.gk-board-event-detail,
    #bo_list,
    #bo_v,
    #bo_w,
    #gk-faq,
    .customer-wrap.faq-page,
    #gk-new,
    #gk-bbs-search,
    #content.wrapper.layout-page,
    .latest_wr,
    .gk-popup-page,
    #profile.new_win,
    #formmail.new_win,
    #validation_check,
    #confirm_check,
    .bbs-view-image,
    #poll_result
) *::before,
:where(
    #gk-notice-list,
    #gk-board-list,
    #gk-board-view,
    #gk-board-write,
    #gk-lookbook,
    #gk-gallery-detail,
    #gk-events.gk-board-event-detail,
    #bo_list,
    #bo_v,
    #bo_w,
    #gk-faq,
    .customer-wrap.faq-page,
    #gk-new,
    #gk-bbs-search,
    #content.wrapper.layout-page,
    .latest_wr,
    .gk-popup-page,
    #profile.new_win,
    #formmail.new_win,
    #validation_check,
    #confirm_check,
    .bbs-view-image,
    #poll_result
) *::after {
    box-sizing: border-box;
}

:where(
    #gk-notice-list,
    #gk-board-list,
    #gk-board-view,
    #gk-board-write,
    #gk-lookbook,
    #gk-gallery-detail,
    #gk-events.gk-board-event-detail,
    #bo_list,
    #bo_v,
    #bo_w,
    #gk-faq,
    .customer-wrap.faq-page,
    #gk-new,
    #gk-bbs-search,
    #content.wrapper.layout-page,
    .latest_wr,
    .gk-popup-page,
    #profile.new_win,
    #formmail.new_win,
    #validation_check,
    #confirm_check,
    .bbs-view-image,
    #poll_result
) :where(img, picture, video, svg, canvas, object, embed) {
    max-width: 100%;
    height: auto;
}

:where(
    #gk-notice-list,
    #gk-board-list,
    #gk-board-view,
    #gk-board-write,
    #gk-lookbook,
    #gk-gallery-detail,
    #gk-events.gk-board-event-detail,
    #bo_list,
    #bo_v,
    #bo_w,
    #gk-faq,
    .customer-wrap.faq-page,
    #gk-new,
    #gk-bbs-search,
    #content.wrapper.layout-page,
    .latest_wr,
    .gk-popup-page,
    #profile.new_win,
    #formmail.new_win,
    #validation_check,
    #confirm_check,
    .bbs-view-image,
    #poll_result
) :where(iframe, table, form, fieldset, input, select, textarea, button) {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

:where(
    #gk-notice-list,
    #gk-board-list,
    #gk-board-view,
    #gk-board-write,
    #gk-lookbook,
    #gk-gallery-detail,
    #gk-events.gk-board-event-detail,
    #bo_list,
    #bo_v,
    #bo_w,
    #gk-faq,
    .customer-wrap.faq-page,
    #gk-new,
    #gk-bbs-search,
    #content.wrapper.layout-page,
    .latest_wr,
    .gk-popup-page,
    #profile.new_win,
    #formmail.new_win,
    #validation_check,
    #confirm_check,
    .bbs-view-image,
    #poll_result
) iframe {
    width: 100%;
}

:where(
    #gk-notice-list,
    #gk-board-list,
    #gk-board-view,
    #gk-board-write,
    #gk-lookbook,
    #gk-gallery-detail,
    #gk-events.gk-board-event-detail,
    #bo_list,
    #bo_v,
    #bo_w,
    #gk-faq,
    .customer-wrap.faq-page,
    #gk-new,
    #gk-bbs-search,
    #content.wrapper.layout-page,
    .latest_wr,
    .gk-popup-page,
    #profile.new_win,
    #formmail.new_win,
    #validation_check,
    #confirm_check,
    .bbs-view-image,
    #poll_result
) :where(.row, [class*="grid"], [class*="layout"], [class*="shell"]) > * {
    min-width: 0;
    max-width: 100%;
}

/* Keep the server-provided board width while ensuring it cannot exceed its parent. */
:where(#bo_v, #bo_w, #fwrite)[style*="width"] {
    max-width: 100% !important;
}

:where(#bo_v_con, .gk-article-prose, .gk-event-content-prose) {
    width: 100% !important;
    max-width: var(--gk-width-readable) !important;
    min-width: 0;
    margin-inline: auto;
    font-family: var(--gk-font-ui);
    font-style: normal;
    overflow-wrap: anywhere;
}

:where(#bo_v_con, .gk-article-prose, .gk-event-content-prose) :where(em, cite, blockquote),
:where(#bo_v_con, .gk-article-prose, .gk-event-content-prose) [style*="font-family" i]:not(.fa, .fas, .far, .fab, .bi, [class*="icon-"]),
:where(#bo_v_con, .gk-article-prose, .gk-event-content-prose) [style*="font-style" i]:not(.fa, .fas, .far, .fab, .bi, [class*="icon-"]) {
    font-family: var(--gk-font-ui) !important;
    font-style: normal !important;
}

:where(#bo_v_con, .gk-article-prose, .gk-event-content-prose) :where(table, img, iframe, video, object, embed) {
    max-width: 100%;
}

:where(#bo_v_con, .gk-article-prose, .gk-event-content-prose) table {
    width: 100%;
    table-layout: fixed;
}

:where(#bo_v_con, .gk-article-prose, .gk-event-content-prose) :where(th, td),
:where(#bo_vc, .gk-post-comments) :where(p, a, span) {
    overflow-wrap: anywhere;
}

:where(#bo_vc, .gk-post-comments) :where(article, .cm_wrap, form, textarea) {
    min-width: 0;
    max-width: 100%;
}

:where(#gk-board-write, #bo_w) :where(form[name="fwrite"], #fwrite, .gk-write-form) {
    width: min(100%, var(--gk-width-dialog));
    max-width: var(--gk-width-dialog) !important;
    min-width: 0;
    margin-inline: auto;
}

:where(#gk-faq, .customer-wrap.faq-page) :where(.gk-faq-shell, .container, .list-wrap, .search-wrap) {
    min-width: 0;
    max-width: 100%;
}

#gk-faq .gk-faq-shell {
    width: auto !important;
    max-width: 100% !important;
    grid-template-columns: minmax(220px, 320px) minmax(0, var(--gk-width-readable)) !important;
    justify-content: center !important;
}

:where(#gk-faq .gk-faq-list, .customer-wrap.faq-page > .container) {
    width: 100% !important;
    max-width: var(--gk-width-readable) !important;
}

#content.wrapper.layout-page > :where(.gk-auth, .container, .container-xxl),
#content.wrapper.layout-page .gk-auth > .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin-inline: auto;
}

:where(.gk-auth-login, .gk-auth-find, .gk-auth-register-result, .gk-auth-confirm) :where(.gk-auth-form, .gk-confirm-form, #find_info, #reg_result) {
    width: 100% !important;
    max-width: var(--gk-width-narrow) !important;
}

:where(.gk-auth-register-agree, .gk-auth-register-form) :where(.gk-auth-card > *, .gk-auth-form, .gk-auth-register-form-body) {
    width: 100% !important;
    max-width: var(--gk-width-readable) !important;
}

#ctt_con.ctt_con_gk_info {
    width: 100%;
    max-width: var(--gk-width-b2b) !important;
}

#ctt_con:not(.ctt_con_gk_info) {
    width: 100%;
    max-width: var(--gk-width-readable) !important;
    min-width: 0;
    margin-inline: auto;
    overflow-wrap: anywhere;
}

:where(#ctt_con, .gk-faq-html) > :where(table, iframe, img, video, object, embed) {
    max-width: 100%;
}

:where(#ctt_con, .gk-faq-html) > table {
    width: 100%;
    table-layout: fixed;
}

:where(#gk-point, #gk-memo, #gk-memo-view, #gk-scrap) {
    width: min(calc(100% - (var(--gk-page-gutter) * 2)), var(--gk-width-readable));
    max-width: var(--gk-width-readable);
    min-width: 0;
    margin-inline: auto;
}

:where(#gk-memo-write, #gk-scrap-popin, #profile.new_win, #formmail.new_win, #validation_check, #confirm_check, .bbs-view-image, #poll_result) {
    width: min(calc(100% - (var(--gk-page-gutter) * 2)), var(--gk-width-modal));
    max-width: var(--gk-width-modal) !important;
    min-width: 0;
    margin-inline: auto;
    box-sizing: border-box;
}

:where(#profile.new_win, #formmail.new_win) :where(.new_win_con, form, table),
:where(.gk-popup-page) :where(.gk-popup-list, .gk-popup-detail, .gk-popup-form, table) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

:where(
    #gk-notice-list,
    #gk-board-list,
    #gk-board-view,
    #gk-board-write,
    #gk-lookbook,
    #gk-gallery-detail,
    #gk-events.gk-board-event-detail,
    #bo_list,
    #bo_v,
    #bo_w,
    #gk-faq,
    .customer-wrap.faq-page,
    #gk-new,
    #gk-bbs-search,
    #ctt,
    #content.wrapper.layout-page,
    .latest_wr,
    #gk-point,
    #gk-memo,
    #gk-memo-view,
    #gk-scrap,
    #gk-memo-write,
    #gk-scrap-popin,
    .gk-popup-page,
    #profile.new_win,
    #formmail.new_win,
    #validation_check,
    #confirm_check,
    .bbs-view-image,
    #poll_result
) :where(.tbl_wrap, .gk-auth-legal-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

:where(.gk-newwin-modal, #hd_pop_overlay .gk-newwin-modal) {
    width: min(calc(100% - (var(--gk-page-gutter) * 2)), var(--gk-width-dialog));
    max-width: var(--gk-width-dialog);
}

:where(.gk-newwin-copy h2, .gk-newwin-body) {
    max-width: var(--gk-width-narrow);
}

@media (max-width: 767px) {
    #gk-faq .gk-faq-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :where(#bo_vc, .gk-post-comments) article[style*="margin-left"] {
        margin-left: min(12vw, 40px) !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    #gk-faq .gk-faq-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #gk-lookbook .gk-lb-tabs {
        display: flex;
        flex-wrap: wrap;
    }

    #gk-lookbook .gk-lb-tabs a {
        flex: 1 1 20%;
        min-width: 0;
        white-space: normal;
    }

    #gk-lookbook .gk-lb-tabs .write {
        flex-basis: 100%;
        margin-left: 0;
    }
}