/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ==========================================================================
   Google Fonts - Noto Serif KR
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&display=swap');

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */
:root {
    /* Font Family */
    --sg-font-serif: 'Noto Serif KR', serif;

    /* Text Colors */
    --sg-color-text-primary: #333333;
    --sg-color-text-secondary: #666666;
    --sg-color-text-tertiary: #999999;
    --sg-color-text-disabled: #d0d0d0;
    --sg-color-text-white: #ffffff;
    --sg-color-text-black: #000000;

    /* Point Colors */
    --sg-color-solar-amber: #ffc84a;
    --sg-color-solar-amber-hover: #e6b23f;
    --sg-color-cosmic-blue: #3a4bff;
    --sg-color-cosmic-blue-hover: #2f3edb;
    --sg-color-inferno-orange: #ff5a3c;
    --sg-color-inferno-orange-hover: #e94e34;

    /* Component Colors */
    --sg-color-box-fill-light: #f3f3f3;
    --sg-color-box-stroke: #d0d0d0;
    --sg-color-box-fill-dark: #333333;

    /* Background Colors */
    --sg-color-bg-light: #fafaf8;
    --sg-color-bg-dark: #222222;

    /* Typography - Desktop (Default) */
    --sg-h1-size: 32px;
    --sg-h1-weight: 700;
    --sg-h1-line-height: 41.6px;

    --sg-h2-size: 28px;
    --sg-h2-weight: 700;
    --sg-h2-line-height: 37.8px;

    --sg-h3-size: 24px;
    --sg-h3-weight: 700;
    --sg-h3-line-height: 33.6px;

    --sg-h4-size: 20px;
    --sg-h4-weight: 700;
    --sg-h4-line-height: 28px;

    --sg-body-size: 16px;
    --sg-body-weight: 400;
    --sg-body-line-height: 32px;

    --sg-sub-size: 14px;
    --sg-sub-weight: 400;
    --sg-sub-line-height: 22.4px;

    --sg-caption-size: 12px;
    --sg-caption-weight: 400;
    --sg-caption-line-height: 16.8px;

    /* Spacing */
    --sg-spacing-xs: 4px;
    --sg-spacing-sm: 8px;
    --sg-spacing-md: 12px;
    --sg-spacing-lg: 16px;
    --sg-spacing-xl: 24px;

    /* Border Radius */
    --sg-radius-sm: 2px;
    --sg-radius-md: 5px;
}

/* ==========================================================================
   Mobile Typography (Max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
    :root {
        --sg-h1-size: 24px;
        --sg-h1-line-height: 31.2px;

        --sg-h2-size: 20px;
        --sg-h2-line-height: 27px;

        --sg-h3-size: 18px;
        --sg-h3-line-height: 25.2px;

        --sg-h4-size: 18px;
        --sg-h4-line-height: 25.2px;

        --sg-body-line-height: 25.6px;
    }
}

/* ==========================================================================
   Base Typography Styles (Non-Elementor Areas Only)
   Excludes: Elementor widgets, Elementor editor, elements with Elementor classes
   ========================================================================== */

/* Apply font-family to body (Elementor can override when needed) */
body {
    font-family: var(--sg-font-serif);
    color: var(--sg-color-text-primary);
     -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.single-post .e-con>.e-con-inner {
    max-width: 640px;
}


:root {
    --real-header-h: 58px;
}


/* 기본(PC 포함) */
body:not(.home):not(.error404) #main-container .site-main {
    margin-top: 58px;
}

body.error404 #main-container .site-main {
    margin-top: 0px !important;
}

body.blog #main-container .site-main,
body.archive #main-container .site-main {
    margin-top: 58px;
}

body.single-post #main-container .site-main,
body.page-template:not(.home) #main-container .site-main {
    margin-top: 58px;
}

/* 모바일 오버라이드 */
@media (max-width: 767px) {

    body:not(.home):not(.error404) #main-container .site-main,
    body.blog #main-container .site-main,
    body.archive #main-container .site-main,
    body.single-post #main-container .site-main,
    body.page-template:not(.home) #main-container .site-main {
        margin-top: 40px;
    }
}



#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .wpd-editor-buttons-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    position: relative !important;
    top: -35px!important;
    right: 15px!important;
}
	
	.wpd-form-row{
    display: inline-flex;
    justify-content: space-between;

    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
        top: -20px !important;
    position: relative;
}

#wpdcom .wpd-form-row .wpd-form-col-right , #wpdcom .wpd-form-row .wpd-form-col-right {
    width: 50%;
}

/* ==========================================================================
   Login Button Styles (Top Header)
   - Bright: for light backgrounds
   - Dark: for dark backgrounds
   ========================================================================== */

/* Bright Login Button (Light Background) - Default */
.login_top_bright {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    font-family: "Noto Serif KR", serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    /* 140% = 16.8px */
    color: #666666;
    background-color: transparent;
    border: 1px solid #666666;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Bright Login Button - Hover */
.login_top_bright:hover {
    background-color: #e8e8e8;
    text-decoration: none !important;
}

/* Bright Login Button - Link Styles */
.login_top_bright a {
    color: #666666 !important;
    font-style: normal !important;
    text-decoration: none;
}

.login_top_bright:hover a {
    color: #666666 !important;
    text-decoration: none !important;
}

/* Dark Login Button (Dark Background) - Default */
.login_top_dark {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    font-family: "Noto Serif KR", serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    /* 140% = 16.8px */
    color: #999999;
    background-color: transparent;
    border: 1px solid #999999;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Dark Login Button - Hover */
.login_top_dark:hover {
    background-color: #4a4a4a;
    text-decoration: none !important;
}

/* Dark Login Button - Link Styles */
.login_top_dark a {
    color: #999999 !important;
    font-style: normal !important;
    text-decoration: none;
}

.login_top_dark:hover a {
    color: #999999 !important;
    text-decoration: none !important;
}

body.home #main-container .site-main {
    padding-top: var(--real-header-h);
}


/* H1 - Applies only outside Elementor context */
.entry-content h1:not([class*="elementor"]),
.site-content h1:not([class*="elementor"]),
article h1:not([class*="elementor"]) {
    font-family: var(--sg-font-serif);
    font-size: var(--sg-h1-size);
    font-weight: var(--sg-h1-weight);
    line-height: var(--sg-h1-line-height);
    color: var(--sg-color-text-primary);
}

/* H2 - Applies only outside Elementor context */
.entry-content h2:not([class*="elementor"]),
.site-content h2:not([class*="elementor"]),
article h2:not([class*="elementor"]) {
    font-family: var(--sg-font-serif);
    font-size: var(--sg-h2-size);
    font-weight: var(--sg-h2-weight);
    line-height: var(--sg-h2-line-height);
    color: var(--sg-color-text-primary);
}

/* H3 - Applies only outside Elementor context */
.entry-content h3:not([class*="elementor"]),
.site-content h3:not([class*="elementor"]),
article h3:not([class*="elementor"]) {
    font-family: var(--sg-font-serif);
    font-size: var(--sg-h3-size);
    font-weight: var(--sg-h3-weight);
    line-height: var(--sg-h3-line-height);
    color: var(--sg-color-text-primary);
}

/* H4 - Applies only outside Elementor context */
.entry-content h4:not([class*="elementor"]),
.site-content h4:not([class*="elementor"]),
article h4:not([class*="elementor"]) {
    font-family: var(--sg-font-serif);
    font-size: var(--sg-h4-size);
    font-weight: var(--sg-h4-weight);
    line-height: var(--sg-h4-line-height);
    color: var(--sg-color-text-primary);
}

/* Body text */
.entry-content p:not([class*="elementor"]),
.site-content p:not([class*="elementor"]),
article p:not([class*="elementor"]) {
    font-family: var(--sg-font-serif);
    font-size: var(--sg-body-size);
    font-weight: var(--sg-body-weight);
    line-height: var(--sg-body-line-height);
    color: var(--sg-color-text-primary);
}

/* ==========================================================================
   Typography Utility Classes (Use explicitly in templates/Elementor)
   Prefix: .sg- (Style Guide)
   ========================================================================== */

/* Heading Classes */
.sg-h1 {
    font-family: var(--sg-font-serif) !important;
    font-size: var(--sg-h1-size) !important;
    font-weight: var(--sg-h1-weight) !important;
    line-height: var(--sg-h1-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

.sg-h2 {
    font-family: var(--sg-font-serif) !important;
    font-size: var(--sg-h2-size) !important;
    font-weight: var(--sg-h2-weight) !important;
    line-height: var(--sg-h2-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

.sg-h3 {
    font-family: var(--sg-font-serif) !important;
    font-size: var(--sg-h3-size) !important;
    font-weight: var(--sg-h3-weight) !important;
    line-height: var(--sg-h3-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

.sg-h4 {
    font-family: var(--sg-font-serif) !important;
    font-size: var(--sg-h4-size) !important;
    font-weight: var(--sg-h4-weight) !important;
    line-height: var(--sg-h4-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

/* Text Classes */
.sg-body {
    font-family: var(--sg-font-serif) !important;
    font-size: var(--sg-body-size) !important;
    font-weight: var(--sg-body-weight) !important;
    line-height: var(--sg-body-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

.sg-sub {
    font-family: var(--sg-font-serif) !important;
    font-size: var(--sg-sub-size) !important;
    font-weight: var(--sg-sub-weight) !important;
    line-height: var(--sg-sub-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

.sg-caption {
    font-family: var(--sg-font-serif) !important;
    font-size: var(--sg-caption-size) !important;
    font-weight: var(--sg-caption-weight) !important;
    line-height: var(--sg-caption-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

/* ==========================================================================
   Color Utility Classes
   ========================================================================== */

/* Text Colors */
.sg-text-primary {
    color: var(--sg-color-text-primary) !important;
}

.sg-text-secondary {
    color: var(--sg-color-text-secondary) !important;
}

.sg-text-tertiary {
    color: var(--sg-color-text-tertiary) !important;
}

.sg-text-disabled {
    color: var(--sg-color-text-disabled) !important;
}

.sg-text-white {
    color: var(--sg-color-text-white) !important;
}

.sg-text-black {
    color: var(--sg-color-text-black) !important;
}

/* Point Colors */
.sg-text-amber {
    color: var(--sg-color-solar-amber) !important;
}

.sg-text-blue {
    color: var(--sg-color-cosmic-blue) !important;
}

.sg-text-orange {
    color: var(--sg-color-inferno-orange) !important;
}

/* Background Colors */
.sg-bg-light {
    background-color: var(--sg-color-bg-light) !important;
}

.sg-bg-dark {
    background-color: var(--sg-color-bg-dark) !important;
}

.sg-bg-box-light {
    background-color: var(--sg-color-box-fill-light) !important;
}

.sg-bg-box-dark {
    background-color: var(--sg-color-box-fill-dark) !important;
}

.sg-bg-amber {
    background-color: var(--sg-color-solar-amber) !important;
}

.sg-bg-blue {
    background-color: var(--sg-color-cosmic-blue) !important;
}

.sg-bg-orange {
    background-color: var(--sg-color-inferno-orange) !important;
}

/* ==========================================================================
   Button Styles
   ========================================================================== */

/* Base Button */
.sg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sg-spacing-md);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-family: var(--sg-font-serif);
    font-size: 12px;
    font-weight: 700;
    line-height: 16.8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Primary Button (Solar Amber) */
.sg-btn-primary {
    padding: 12px 24px;
    background-color: var(--sg-color-solar-amber);
    color: var(--sg-color-text-white);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--sg-radius-sm);
}

.sg-btn-primary:hover {
    background-color: var(--sg-color-solar-amber-hover);
}

/* Dark Button */
.sg-btn-dark {
    padding: 10px 20px;
    background-color: var(--sg-color-box-fill-dark);
    color: var(--sg-color-text-white);
    border-radius: var(--sg-radius-sm);
}

.sg-btn-dark:hover {
    background-color: #1a1a1a;
}

/* Chip Button */
.sg-btn-chip {
    padding: 8px 16px;
    background-color: transparent;
    color: var(--sg-color-text-secondary);
    border: 1px solid var(--sg-color-box-stroke);
    border-radius: var(--sg-radius-md);
    font-size: 14px;
    font-weight: 400;
}

.sg-btn-chip:hover {
    background-color: var(--sg-color-text-secondary);
    color: var(--sg-color-text-white);
}

.sg-btn-chip.active {
    background-color: var(--sg-color-text-white);
    color: var(--sg-color-text-primary);
    border-color: var(--sg-color-text-primary);
}

/* Text Button */
.sg-btn-text {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--sg-font-serif);
    font-size: 14px;
    font-weight: 400;
    color: var(--sg-color-text-primary);
    text-decoration: underline;
    padding: 0;
}

.sg-btn-text:hover {
    color: var(--sg-color-text-secondary);
}

/* Icon Button */
.sg-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-spacing-xs);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    color: var(--sg-color-text-primary);
    padding: 0;
}

/* ==========================================================================
   Form Input Styles
   ========================================================================== */

/* Comment/Search Input */
.sg-form-input {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--sg-color-box-fill-light);
    border-radius: var(--sg-radius-sm);
    gap: var(--sg-spacing-md);
}

.sg-form-input input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--sg-font-serif);
    font-size: 14px;
    color: var(--sg-color-text-tertiary);
    outline: none;
}

.sg-form-input input:focus {
    color: var(--sg-color-text-primary);
}

.sg-form-input input::placeholder {
    color: var(--sg-color-text-tertiary);
}

.sg-form-input button {
    padding: 4px 12px;
    background: transparent;
    border: none;
    font-family: var(--sg-font-serif);
    font-size: 12px;
    font-weight: 400;
    color: var(--sg-color-text-tertiary);
    cursor: pointer;
}

.sg-form-input.filled input {
    color: var(--sg-color-text-primary);
}

.sg-form-input.filled button {
    color: var(--sg-color-text-primary);
}

/* Text Input with Label */
.sg-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--sg-spacing-sm);
}

.sg-input-label {
    font-family: var(--sg-font-serif);
    font-size: 14px;
    font-weight: 400;
    color: var(--sg-color-text-secondary);
}

.sg-input {
    padding: 12px;
    border: 1px solid var(--sg-color-box-stroke);
    border-radius: var(--sg-radius-sm);
    font-family: var(--sg-font-serif);
    font-size: 14px;
    color: var(--sg-color-text-primary);
    outline: none;
    background: transparent;
    transition: border-color 0.2s ease;
}

.sg-input:focus {
    border-color: var(--sg-color-cosmic-blue);
}

.sg-input::placeholder {
    color: var(--sg-color-text-tertiary);
}

/* ==========================================================================
   Link Styles (Non-Elementor)
   ========================================================================== */
.entry-content a:not([class*="elementor"]),
.site-content a:not([class*="elementor"]),
article a:not([class*="elementor"]) {
    color: var(--sg-color-cosmic-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

.entry-content a:not([class*="elementor"]):hover,
.site-content a:not([class*="elementor"]):hover,
article a:not([class*="elementor"]):hover {
    color: var(--sg-color-cosmic-blue-hover);
    text-decoration: underline;
}

/* ==========================================================================
   Article / Card Components
   ========================================================================== */

/* Article Chip (Menu Button Style) */
.sg-article-chip {
    display: flex;
    flex-direction: column;
    gap: var(--sg-spacing-lg);
    padding: 20px;
    transition: background-color 0.2s ease;
}

.sg-article-chip-title {
    font-family: var(--sg-font-serif);
    font-size: 24px;
    font-weight: 700;
    line-height: 33.6px;
    color: var(--sg-color-text-disabled);
    transition: color 0.2s ease;
}

.sg-article-chip-subtitle {
    font-family: var(--sg-font-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 25.2px;
    color: var(--sg-color-text-primary);
    transition: color 0.2s ease;
}

.sg-article-chip:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.sg-article-chip:hover .sg-article-chip-title,
.sg-article-chip:hover .sg-article-chip-subtitle {
    color: var(--sg-color-text-white);
}

/* ==========================================================================
   Utility Spacing Classes
   ========================================================================== */
.sg-mt-xs {
    margin-top: var(--sg-spacing-xs) !important;
}

.sg-mt-sm {
    margin-top: var(--sg-spacing-sm) !important;
}

.sg-mt-md {
    margin-top: var(--sg-spacing-md) !important;
}

.sg-mt-lg {
    margin-top: var(--sg-spacing-lg) !important;
}

.sg-mt-xl {
    margin-top: var(--sg-spacing-xl) !important;
}

.sg-mb-xs {
    margin-bottom: var(--sg-spacing-xs) !important;
}

.sg-mb-sm {
    margin-bottom: var(--sg-spacing-sm) !important;
}

.sg-mb-md {
    margin-bottom: var(--sg-spacing-md) !important;
}

.sg-mb-lg {
    margin-bottom: var(--sg-spacing-lg) !important;
}

.sg-mb-xl {
    margin-bottom: var(--sg-spacing-xl) !important;
}

.sg-pt-xs {
    padding-top: var(--sg-spacing-xs) !important;
}

.sg-pt-sm {
    padding-top: var(--sg-spacing-sm) !important;
}

.sg-pt-md {
    padding-top: var(--sg-spacing-md) !important;
}

.sg-pt-lg {
    padding-top: var(--sg-spacing-lg) !important;
}

.sg-pt-xl {
    padding-top: var(--sg-spacing-xl) !important;
}

.sg-pb-xs {
    padding-bottom: var(--sg-spacing-xs) !important;
}

.sg-pb-sm {
    padding-bottom: var(--sg-spacing-sm) !important;
}

.sg-pb-md {
    padding-bottom: var(--sg-spacing-md) !important;
}

.sg-pb-lg {
    padding-bottom: var(--sg-spacing-lg) !important;
}

.sg-pb-xl {
    padding-bottom: var(--sg-spacing-xl) !important;
}

/* ==========================================================================
   Elementor Global Override - Force Style Guide Typography
   All Elementor elements will use Noto Serif KR with style guide specs
   ========================================================================== */

/* Global font-family for all Elementor elements */
.elementor,
.elementor-widget,
[class*="elementor-element"],
[class*="elementor-widget"] {
    font-family: 'Noto Serif KR', serif !important;
}

/* Elementor Heading Widget - H1 */
.elementor-widget-heading h1.elementor-heading-title,
.elementor h1,
.elementor-widget h1 {
    font-family: 'Noto Serif KR', serif !important;
    font-size: var(--sg-h1-size) !important;
    font-weight: var(--sg-h1-weight) !important;
    line-height: var(--sg-h1-line-height) !important;
    /* color: var(--sg-color-text-primary) !important;*/
}

/* Elementor Heading Widget - H2 */
.elementor-widget-heading h2.elementor-heading-title,
.elementor h2,
.elementor-widget h2 {
    font-family: 'Noto Serif KR', serif !important;
    font-size: var(--sg-h2-size) !important;
    font-weight: var(--sg-h2-weight) !important;
    line-height: var(--sg-h2-line-height) !important;
    /*color: var(--sg-color-text-primary) !important;*/
}

/* Elementor Heading Widget - H3 */
.elementor-widget-heading h3.elementor-heading-title,
.elementor h3,
.elementor-widget h3 {
    font-family: 'Noto Serif KR', serif !important;
    font-size: var(--sg-h3-size) !important;
    font-weight: var(--sg-h3-weight) !important;
    line-height: var(--sg-h3-line-height) !important;

    /* color: var(--sg-color-text-primary) !important; */
}

/* Elementor Heading Widget - H4 */
.elementor-widget-heading h4.elementor-heading-title,
.elementor h4,
.elementor-widget h4 {
    font-family: 'Noto Serif KR', serif !important;
    font-size: var(--sg-h4-size) !important;
    font-weight: var(--sg-h4-weight) !important;
    line-height: var(--sg-h4-line-height) !important;
    /*color: var(--sg-color-text-primary) !important;*/
}

/* Elementor Text Editor Widget - Body Text */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor p,
.elementor-widget p {
    /* font-family: 'Noto Serif KR', serif !important;
    font-size: var(--sg-body-size) !important;
    font-weight: var(--sg-body-weight) !important;
    line-height: var(--sg-body-line-height) !important;*/
    /*color: var(--sg-color-text-primary) !important;*/
}

/* Elementor Button Widget */
.elementor-widget-button .elementor-button,
.elementor-button {
    font-family: 'Noto Serif KR', serif !important;
}

/* Elementor Icon Box, Image Box, etc. */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-image-box .elementor-image-box-title {
    font-family: 'Noto Serif KR', serif !important;
    font-size: var(--sg-h4-size) !important;
    font-weight: var(--sg-h4-weight) !important;
    line-height: var(--sg-h4-line-height) !important;
}

.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-image-box .elementor-image-box-description {
    font-family: 'Noto Serif KR', serif !important;
    font-size: var(--sg-body-size) !important;
    font-weight: var(--sg-body-weight) !important;
    line-height: var(--sg-body-line-height) !important;
}

/* Elementor Tabs, Accordion, Toggle */
.elementor-widget-tabs .elementor-tab-title,
.elementor-widget-accordion .elementor-accordion-title,
.elementor-widget-toggle .elementor-toggle-title {
    font-family: 'Noto Serif KR', serif !important;
    font-size: var(--sg-h4-size) !important;
    font-weight: var(--sg-h4-weight) !important;
}

.elementor-widget-tabs .elementor-tab-content,
.elementor-widget-accordion .elementor-accordion-content,
.elementor-widget-toggle .elementor-toggle-content {
    font-family: 'Noto Serif KR', serif !important;
    font-size: var(--sg-body-size) !important;
    line-height: var(--sg-body-line-height) !important;
}

/* Elementor List Widget */
.elementor-widget-icon-list .elementor-icon-list-text {
    font-family: 'Noto Serif KR', serif !important;
    font-size: var(--sg-body-size) !important;
    line-height: var(--sg-body-line-height) !important;
}

/* Elementor Counter Widget */
.elementor-widget-counter .elementor-counter-number-wrapper,
.elementor-widget-counter .elementor-counter-title {
    font-family: 'Noto Serif KR', serif !important;
}

/* Elementor Testimonial Widget */
.elementor-widget-testimonial .elementor-testimonial-content,
.elementor-widget-testimonial .elementor-testimonial-name,
.elementor-widget-testimonial .elementor-testimonial-job {
    font-family: 'Noto Serif KR', serif !important;
}

/* ==========================================================================
   Elementor Mobile Override (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {

    .elementor-widget-heading h1.elementor-heading-title,
    .elementor h1,
    .elementor-widget h1 {
        font-size: var(--sg-h1-size) !important;
        line-height: var(--sg-h1-line-height) !important;
    }

    .elementor-widget-heading h2.elementor-heading-title,
    .elementor h2,
    .elementor-widget h2 {
        font-size: var(--sg-h2-size) !important;
        line-height: var(--sg-h2-line-height) !important;
    }

    .elementor-widget-heading h3.elementor-heading-title,
    .elementor h3,
    .elementor-widget h3 {
        font-size: var(--sg-h3-size) !important;
        line-height: var(--sg-h3-line-height) !important;
    }

    .elementor-widget-heading h4.elementor-heading-title,
    .elementor h4,
    .elementor-widget h4 {
        font-size: var(--sg-h4-size) !important;
        line-height: var(--sg-h4-line-height) !important;
    }

    .elementor-widget-text-editor,
    .elementor-widget-text-editor p,
    .elementor p {
        line-height: var(--sg-body-line-height) !important;
    }
}

/* ==========================================================================
   Off Canvas Side Menu - FIGMA MIGRATION (Strict Styling - Ultra High Specificity)
   ========================================================================== */

/* Main Panel Container - Using body prefix to beat theme bundles */
body div#offcanvas.ct-panel.ct-header {
    --panel-width: 393px !important;
    background-color: #222222 !important;
    color: #ffffff !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;
    border: none !important;

}

body div#offcanvas.ct-panel.ct-header .ct-panel-inner {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #222222 !important;
    height: 100% !important;
}

/* Header/Close Button Area */
body div#offcanvas.ct-panel.ct-header .ct-panel-actions {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 1.125rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body div#offcanvas.ct-panel.ct-header .ct-toggle-close {
    color: #ffffff !important;
    padding: 0 !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    position: static !important;
    margin: 0 !important;
}

body div#offcanvas.ct-panel.ct-header .ct-toggle-close svg {
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.5 !important;
}

/* Content Layout */
body div#offcanvas.ct-panel.ct-header .ct-panel-content {
    padding: 2.5rem 2rem !important;
    background-color: transparent !important;
    flex-grow: 1 !important;
    overflow-y: auto !important;
}

body div#offcanvas.ct-panel.ct-header .ct-panel-content-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 3.375rem !important;
}

/* Navigation List Base */
body div#offcanvas.ct-panel.ct-header ul#menu-new-main-offcanvas,
body div#offcanvas.ct-panel.ct-header ul#menu-mobile-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body div#offcanvas.ct-panel.ct-header .menu-item {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Main Menu Links (Large) */
body div#offcanvas.ct-panel.ct-header .ct-menu-link {
    font-family: 'Noto Serif KR', serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* Sub-menu styling */
body div#offcanvas.ct-panel.ct-header ul.sub-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
}

body div#offcanvas.ct-panel.ct-header ul.sub-menu .ct-menu-link {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 2.0 !important;
    color: #ffffff !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s ease !important;
    padding: 0 !important;
}

body div#offcanvas.ct-panel.ct-header ul.sub-menu .ct-menu-link:hover {
    opacity: 1 !important;
    background: transparent !important;
    color: #ffffff !important;
}

/* Breadcrumb/Dropdown toggle adjustments */
body div#offcanvas.ct-panel.ct-header .ct-sub-menu-parent {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body div#offcanvas.ct-panel.ct-header .ct-toggle-dropdown-mobile {
    color: #ffffff !important;
    margin-left: 10px !important;
    opacity: 0.8 !important;
    background: transparent !important;
    border: none !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
}

/* Remove default Blocksy indicators/decoration */
body div#offcanvas.ct-panel.ct-header .ct-menu-link::before,
body div#offcanvas.ct-panel.ct-header .ct-menu-link::after,
body div#offcanvas.ct-panel.ct-header .ct-sub-menu-parent::after {
    display: none !important;
}

/* Header Text / Notice Area */
body div#offcanvas.ct-panel.ct-header .ct-header-text {
    margin-top: 1rem !important;
}

body div#offcanvas.ct-panel.ct-header .ct-header-text .entry-content p,
body div#offcanvas.ct-panel.ct-header .ct-header-text .entry-content a,
body div#offcanvas.ct-panel.ct-header .ct-header-text .entry-content strong {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #ffffff !important;
    opacity: 0.8 !important;
    font-family: 'Noto Serif KR', serif !important;
}

body div#offcanvas.ct-panel.ct-header .ct-header-text .entry-content a {
    text-decoration: underline !important;
}

/* Fix for specific Blocksy behaviors */
body div#offcanvas.ct-panel.active {
    visibility: visible !important;
}

/* Global Reset for Offcanvas content to prevent bleed from main.min.css */
body div#offcanvas.ct-panel * {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Secondary Button Overall Overrides (Based on Brand Style Guide)
   Applying Secondary Button styles to all theme and plugin buttons.
   - Background: #F3F3F3
   - Text: #666666
   - Border: #D0D0D0
   - Hover Background: #E8E8E8
   ========================================================================== */

/* 1. Base Button Styles */
.button:not(#wpadminbar *):not(.product_detail_cart *):not(.ct-search-form-controls *),
.ct-button,
.added_to_cart,
.ct-button-ghost,
[type=submit]:not(#wpadminbar *):not(.product_detail_cart *):not(.ct-search-form-controls *),
.wp-element-button:not(.ct-search-form-controls *),
.wp-block-button__link,
button.regform-button,
button[class*=ajax],
.woocommerce button.button:not(.product_detail_cart *),
.woocommerce-message .showlogin,
.woocommerce-message .restore-item,
.forminator-ui[data-design=none] .forminator-button,
.fluentform .ff-el-group button.ff-btn,
.ct-button-secondary-text {
    font-family: 'Noto Serif KR', serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 12px 24px !important;
    border: 1px solid #D0D0D0 !important;
    appearance: none !important;
    cursor: pointer !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    text-align: center !important;
    border-radius: 0px !important;
    transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955) !important;
    --has-link-decoration: var(--false);

    background-color: #333333 !important;
    color: #FFFFFF !important;
}

/* 2. Hover Button Styles */
.button:hover:not(#wpadminbar *),
.ct-button:hover,
.entry-tags a:hover,
.added_to_cart:hover,
[type=submit]:hover:not(#wpadminbar *),
.wp-element-button:hover,
.wp-block-button__link:hover,
button.regform-button:hover,
button[class*=ajax]:hover,
.woocommerce button.button:hover,
.woocommerce-message .showlogin:hover,
.woocommerce-message .restore-item:hover,
.forminator-ui[data-design=none] .forminator-button:hover,
.fluentform .ff-el-group button.ff-btn:hover {
    color: #FFFFFF !important;
    border-color: #4A4A4A !important;
    background-color: #4A4A4A !important;
}

/* Boosted specificity with :not(#wpadminbar *) to override the global 14px rule */
body .ct-header-cart .ct-cart-content .buttons .button:not(#wpadminbar *),
body .ct-header-cart .ct-cart-content .buttons a.button:not(#wpadminbar *),
body .ct-header-cart .ct-cart-content .buttons a.wc-forward:not(#wpadminbar *) {
    font-size: 12px !important;
    min-height: 40px !important;
    padding: 8px 16px !important;
}





/* Specific: Apply Coupon Button Width */
button[name="apply_coupon"] {
    min-width: 140px !important;
}

/* Specific: Product Detail Add to Cart Button (Point Color - #3A4BFF) - High Specificity Override */
.product_detail_cart .elementor-widget-container .cart button.single_add_to_cart_button.button.alt {
    background-color: #3A4BFF !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0px !important;
}

.product_detail_cart .elementor-widget-container .cart button.single_add_to_cart_button.button.alt:hover {
    background-color: #2F3EDB !important;
    color: #FFFFFF !important;
}

/* Specific: Detail Category Link (Point Color - #3A4BFF) */
.detail_category a {
    color: #3A4BFF !important;
}

.detail_category a:hover {
    color: #2F3EDB !important;
    text-decoration: underline !important;
}


/* ==========================================================================
   Form Elements Overall Overrides (Based on Brand Style Guide)
   Applying Style Guide input styling to all theme and plugin form fields.
   - Border: #D0D0D0
   - BG: #FFFFFF
   - Font: Noto Serif KR, 16px
   - Radius: 0px (Matches Button style)
   ========================================================================== */

/* 1. Base Input, Select, Textarea Styles */
select:not(#wpadminbar *),
textarea:not(#wpadminbar *),
input:is([type=url], [type=tel], [type=text], [type=time], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=number], [type=search], [type=password]):not(#wpadminbar *),
.ct-pseudo-input:not(#wpadminbar *),
fieldset .wc-stripe-elements-field,
.ff-inherit-theme-style .ff-el-form-control:not([size]):not([multiple]) {
    appearance: none !important;
    width: 100% !important;
    height: 48px !important;
    /* Consistent with button height */
    color: #333333 !important;
    padding: 12px 16px !important;
    border: 1px solid #D0D0D0 !important;
    border-radius: 0px !important;
    /* Sharp corners as per recent button update */
    background-color: #FFFFFF !important;
    font-family: 'Noto Serif KR', serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    transition: color .12s cubic-bezier(0.455, 0.03, 0.515, 0.955), border-color .12s cubic-bezier(0.455, 0.03, 0.515, 0.955), background-color .12s cubic-bezier(0.455, 0.03, 0.515, 0.955) !important;
}

/* Adjust Textarea specifically */
textarea {
    height: auto !important;
    min-height: 120px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Adjust Select arrow/padding */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px !important;
    padding-right: 40px !important;
}

/* 2. Select2 & Dropdown Compatibility */
span.select2-dropdown,
span.select2-container .select2-selection--single,
span.select2-container .select2-selection--single .select2-selection__rendered {
    font-family: 'Noto Serif KR', serif !important;
    font-size: 16px !important;
    border-radius: 0px !important;
    border-color: #D0D0D0 !important;
}

span.select2-container .select2-selection--single {
    height: 48px !important;
    background-color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
}

span.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 16px !important;
    color: #333333 !important;
}

span.select2-container .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    right: 8px !important;
}

/* 3. Focus State */
select:focus:not(#wpadminbar *),
textarea:focus:not(#wpadminbar *),
input:focus:not(#wpadminbar *) {
    border-color: #333333 !important;
    outline: none !important;
}

/* 4. Fix Search Form Icon Button */
.ct-search-form .wp-element-button[data-button*=icon] {
    background: transparent !important;
    border: none !important;
    padding: 0 15px !important;
    min-height: 48px !important;
    width: auto !important;
    color: #666666 !important;
    box-shadow: none !important;
}

.ct-search-form .wp-element-button[data-button*=icon] svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
}

/* Ensure the loader doesn't hide the icon if not active */
.ct-search-form .ct-ajax-loader {
    display: none !important;
}

.ct-search-form .ct-ajax-loader.active {
    display: block !important;
}

/* ==========================================================================
   SINGLE POST CONTENT STYLES - Figma Migration
   Based on Figma design: 입시 아티클 홈페이지_Design
   PC: node-id=5-5217 | Mobile: node-id=5-4912
   ========================================================================== */

/* ---------------------------------------------
   CSS Custom Properties for Single Post
   --------------------------------------------- */
body.single-post {
    --sp-font-serif: 'Noto Serif KR', serif;

    /* PC Typography */
    --sp-h1-size: 32px;
    --sp-h1-weight: 700;
    --sp-h1-line-height: 1.3;

    --sp-h2-size: 28px;
    --sp-h2-weight: 700;
    --sp-h2-line-height: 1.35;

    --sp-h3-size: 24px;
    --sp-h3-weight: 700;
    --sp-h3-line-height: 1.4;

    --sp-h4-size: 20px;
    --sp-h4-weight: 700;
    --sp-h4-line-height: 1.4;

    --sp-h5-size: 18px;
    --sp-h5-weight: 700;
    --sp-h5-line-height: 1.4;

    --sp-h6-size: 16px;
    --sp-h6-weight: 700;
    --sp-h6-line-height: 1.6;

    --sp-body-size: 16px;
    --sp-body-weight: 400;
    --sp-body-line-height: 2;

    /* Colors */
    --sp-color-text-primary: #333333;
    --sp-color-text-secondary: #666666;
    --sp-color-inferno-orange: #FF5A3C;
    --sp-color-stroke: #D0D0D0;
    --sp-color-box-fill-light: #F3F3F3;
}

/* Mobile Typography Override */
@media (max-width: 767px) {
    body.single-post {
        --sp-h1-size: 24px;
        --sp-h1-line-height: 1.3;

        --sp-h2-size: 20px;
        --sp-h2-line-height: 1.35;

        --sp-h3-size: 18px;
        --sp-h3-line-height: 1.4;

        --sp-h4-size: 16px;
        --sp-h4-line-height: 1.6;

        --sp-h5-size: 16px;
        --sp-h5-line-height: 1.6;

        --sp-h6-size: 14px;
        --sp-h6-line-height: 1.6;

        --sp-body-line-height: 1.6;
    }
}

/* ---------------------------------------------
   Heading Styles: H1 - H6
   --------------------------------------------- */
body.single-post h1,
body.single-post .entry-content h1 {
    font-family: var(--sp-font-serif);
    font-size: var(--sp-h1-size);
    font-weight: var(--sp-h1-weight);
    font-style: normal;
    line-height: var(--sp-h1-line-height);
    color: var(--sp-color-text-primary);
    margin-top: 0;
    /*margin-bottom: 24px;*/
}

body.single-post h2,
body.single-post .entry-content h2 {
    font-family: var(--sp-font-serif);
    font-size: var(--sp-h2-size);
    font-weight: var(--sp-h2-weight);
    font-style: normal;
    line-height: var(--sp-h2-line-height);
    color: var(--sp-color-text-primary);
    /*margin-top: 48px;
    margin-bottom: 24px;*/
}

body.single-post h3,
body.single-post .entry-content h3 {
    font-family: var(--sp-font-serif);
    font-size: var(--sp-h3-size);
    font-weight: var(--sp-h3-weight);
    font-style: normal;
    line-height: var(--sp-h3-line-height);
    color: var(--sp-color-text-primary);
    /*margin-top: 40px;
    margin-bottom: 20px;*/
}

body.single-post h4,
body.single-post .entry-content h4 {
    font-family: var(--sp-font-serif);
    font-size: var(--sp-h4-size);
    font-weight: var(--sp-h4-weight);
    font-style: normal;
    line-height: var(--sp-h4-line-height);
    color: var(--sp-color-text-primary);
    /*margin-top: 32px;
    margin-bottom: 16px;*/
}

body.single-post h5,
body.single-post .entry-content h5 {
    font-family: var(--sp-font-serif);
    font-size: var(--sp-h5-size);
    font-weight: var(--sp-h5-weight);
    font-style: normal;
    line-height: var(--sp-h5-line-height);
    color: var(--sp-color-text-primary);
    /*margin-top: 24px;
    margin-bottom: 12px;*/
}

body.single-post h6,
body.single-post .entry-content h6 {
    font-family: var(--sp-font-serif);
    font-size: var(--sp-h6-size);
    font-weight: var(--sp-h6-weight);
    font-style: normal;
    line-height: var(--sp-h6-line-height);
    color: var(--sp-color-text-primary);
    /*margin-top: 20px;
    margin-bottom: 10px;*/
}

/* ---------------------------------------------
   Paragraph (P Tag) Styles
   --------------------------------------------- */
body.single-post .jet-listing-dynamic-field__content p,
body.single-post .entry-content p {
    font-family: var(--sp-font-serif);
    font-size: var(--sp-body-size);
    font-weight: var(--sp-body-weight);
    font-style: normal;
    line-height: var(--sp-body-line-height);
    color: var(--sp-color-text-primary);
    margin-top: 0;
    margin-bottom: 0px;
}

/* Last paragraph in section - remove bottom margin */
body.single-post .entry-content p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------
   Horizontal Rule (HR) Styles
   --------------------------------------------- */
body.single-post hr,
body.single-post .entry-content hr {
    border: none;
    border-top: 1px solid var(--sp-color-stroke);
    margin: 48px 0;
    height: 0;
    clear: both;
}

/* ---------------------------------------------
   Quick Tip Styles
   Top/bottom border box with "Quick Dip" title
   Usage: <span class="quick_tip">...</span>
   --------------------------------------------- */
body.single-post .quick_tip {
    display: block;
    position: relative;
    align-self: stretch;

    padding: 24px 0;
    padding-top: 56px;
    /* Space for title */
    background: transparent;

    /* Top and bottom borders */
    border-top: 1px solid #D0D0D0;
    border-bottom: 1px solid #D0D0D0;

    font-family: var(--sp-font-serif);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    /* 32px */
    color: var(--sp-color-text-primary);

    /* Block-level display for span */
    margin-top: 24px;
    margin-bottom: 24px;
    border-radius: 0;
}

/* Quick Dip Title */
body.single-post .quick_tip::before {
    content: "Quick Dip";
    display: block;
    position: absolute;
    top: 24px;
    left: 0;

    font-family: var(--sp-font-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #FF5A3C;

    margin-bottom: 12px;
}

/* Mobile Quick Tip */
@media (max-width: 767px) {
    body.single-post .quick_tip {
        font-size: 16px;
        line-height: 170%;
        /* Slightly tighter on mobile */
        padding-top: 52px;
    }

    body.single-post .quick_tip::before {
        font-size: 14px;
    }
}

/* ---------------------------------------------
   Blockquote2 Styles (Orange Background)
   Usage: <blockquote class="blockquote2">...</blockquote>
   --------------------------------------------- */
body.single-post blockquote.blockquote2,
body.single-post .entry-content blockquote.blockquote2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;

    padding: 24px 18px;
    background: rgba(255, 90, 60, 0.10);

    font-family: var(--sp-font-serif);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    /* 32px */
    color: var(--sp-color-text-primary);

    margin: 24px 0;
    margin-left: 0;
    margin-right: 0;
    border: none;
    border-left: none;
    border-radius: 0;
    quotes: none;
}

body.single-post blockquote.blockquote2::before,
body.single-post blockquote.blockquote2::after {
    content: none;
}

/* Blockquote2 paragraph inside */
body.single-post blockquote.blockquote2 p {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

/* Multiple paragraphs inside blockquote2 */
body.single-post blockquote.blockquote2 p+p {
    margin-top: 16px;
}

/* Bold inside blockquote2 */
body.single-post blockquote.blockquote2 strong,
body.single-post blockquote.blockquote2 b {
    font-weight: 700;
}

/* Mobile Blockquote2 */
@media (max-width: 767px) {

    body.single-post blockquote.blockquote2,
    body.single-post .entry-content blockquote.blockquote2 {
        font-size: 16px;
        line-height: 140%;
        /* 25.2px */
    }
}

/* ---------------------------------------------
   Standard Blockquote Styles (Left Border)
   Usage: <blockquote>...</blockquote>
   --------------------------------------------- */
body.single-post blockquote:not(.blockquote2),
body.single-post .entry-content blockquote:not(.blockquote2) {
    display: block;
    padding-left: 8px;
    padding-right: 0;
    align-self: stretch;

    border: none;
    border-left: 1px solid var(--sp-color-stroke);
    background: transparent;

    font-family: var(--sp-font-serif);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    /* 32px */
    color: var(--sp-color-text-primary);

    margin: 24px 0;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    quotes: none;
}

body.single-post blockquote:not(.blockquote2)::before,
body.single-post blockquote:not(.blockquote2)::after {
    content: none;
}

/* Blockquote paragraph inside */
body.single-post blockquote:not(.blockquote2) p {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

/* Multiple paragraphs inside blockquote */
body.single-post blockquote:not(.blockquote2) p+p {
    margin-top: 16px;
}

/* Bold inside blockquote */
body.single-post blockquote:not(.blockquote2) strong,
body.single-post blockquote:not(.blockquote2) b {
    font-weight: 700;
}

/* Mobile Standard Blockquote - Same styles for both PC and Mobile */
@media (max-width: 767px) {

    body.single-post blockquote:not(.blockquote2),
    body.single-post .entry-content blockquote:not(.blockquote2) {
        font-size: 16px;
        line-height: 200%;
        /* 32px */
    }
}

/* ---------------------------------------------
   Additional Content Elements
   --------------------------------------------- */

/* Images in post content */
body.single-post .entry-content img {
    max-width: 100%;
    height: auto;
    margin: 24px 0;
    display: block;
}

/* Figure and Figcaption */
body.single-post figure {
    margin: 24px 0;
}

body.single-post figcaption {
    font-family: var(--sp-font-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--sp-color-text-secondary);
    text-align: center;
    margin-top: 8px;
}

/* Lists */
body.single-post ul,
body.single-post ol,
body.single-post .entry-content ul,
body.single-post .entry-content ol {
    font-family: var(--sp-font-serif);
    font-size: var(--sp-body-size);
    font-weight: var(--sp-body-weight);
    line-height: var(--sp-body-line-height);
    color: var(--sp-color-text-primary);
    margin-top: 0;
    margin-bottom: 0px;
    padding-left: 0px;
}

/* 2. 예외 처리: #header 내부의 리스트는 왼쪽 패딩을 0으로 설정 */
body.single-post #header ul,
body.single-post #header ol {
    padding-left: 0px !important;
}

/* 1. 먼저 모든 리스트에 간격 적용 */
body.single-post li,
body.single-post .entry-content li {
    margin-bottom: 8px;
}

/* 2. #header 내부의 리스트는 다시 0(또는 기존 값)으로 초기화 */
body.single-post #header li {
    margin-bottom: 0;
}

body.single-post li:last-child,
body.single-post .entry-content li:last-child {
    margin-bottom: 0;
}

/* Links within content */
body.single-post .entry-content a {
    color: #3A4BFF;
    text-decoration: none;
    transition: color 0.2s ease;
}

body.single-post .entry-content a:hover {
    color: #2F3EDB;
    text-decoration: underline;
}

/* Code and Pre */
body.single-post code,
body.single-post .entry-content code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    background: var(--sp-color-box-fill-light);
    padding: 2px 6px;
    border-radius: 3px;
}

body.single-post pre,
body.single-post .entry-content pre {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    line-height: 1.6;
    background: var(--sp-color-box-fill-light);
    padding: 16px;
    border-radius: 0;
    overflow-x: auto;
    margin: 24px 0;
}

body.single-post pre code {
    background: transparent;
    padding: 0;
}

/* Table */
body.single-post table,
body.single-post .entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-family: var(--sp-font-serif);
    font-size: var(--sp-body-size);
}

body.single-post th,
body.single-post .entry-content th {
    font-weight: 700;
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid var(--sp-color-stroke);
}

body.single-post td,
body.single-post .entry-content td {
    padding: 12px;
    border-bottom: 1px solid var(--sp-color-stroke);
}

/* Strong / Bold */
body.single-post strong,
body.single-post b,
body.single-post .entry-content strong,
body.single-post .entry-content b {
    font-weight: 700;
}

/* Italic / Emphasis */
body.single-post em,
body.single-post i,
body.single-post .entry-content em,
body.single-post .entry-content i {
    font-style: italic;
}

/* Mobile Adjustments for Content Spacing */
@media (max-width: 767px) {

    body.single-post h2,
    body.single-post .entry-content h2 {
        margin-top: 40px;
        margin-bottom: 20px;
    }

    body.single-post h3,
    body.single-post .entry-content h3 {
        margin-top: 32px;
        margin-bottom: 16px;
    }

    body.single-post hr,
    body.single-post .entry-content hr {
        margin: 32px 0;
    }

    body.single-post p,
    body.single-post .entry-content p {
        margin-bottom: 20px;
    }

    body.single-post .quick_tip,
    body.single-post blockquote.blockquote2,
    body.single-post blockquote:not(.blockquote2) {
        margin: 20px 0;
    }
}


/* Specific: MFS Form Button Styles - ID Specificity Boost to override global styles */
body .mfs_form .button:not(#_override_),
body .mfs_form input[type="submit"]:not(#_override_),
body .mfs_form button:not(#_override_) {
    background-color: #333333 !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

body .mfs_form .button:hover:not(#_override_),
body .mfs_form input[type="submit"]:hover:not(#_override_),
body .mfs_form button:hover:not(#_override_) {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-color: #000000 !important;
}

/* Search Modal Button Adjustments */
#search-modal form .ct-search-form-controls button {
    margin-top: 0px !important;
    top: -5px !important;
    position: relative;
    background-color: transparent !important;
    border: none !important;
    /* Ensure no border if inherited */
}

#search-modal form .ct-search-form-controls button:hover {
    background-color: transparent !important;
    /* No background on hover */
    color: #333333 !important;
    /* Change icon color to darker gray */
}

/* =========================================
   Search Results Page Styling
   ========================================= */

/* Main Container Spacing */
body.search .site-main {
    padding-top: 60px;
    padding-bottom: 60px;
    max-width: 960px;
    margin: auto;
}

/* Page Title ("...에 대한 검색 결과") */
body.search .page-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 32px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 40px;
    text-align: left !important;
    /* Force Left Align */
}

/* Force Left Alignment for Hero Section if needed */
body.search .hero-section {
    text-align: left !important;
    align-items: flex-start !important;
}

/* Entry Card Layout */
body.search .entry-card {
    border-bottom: 1px solid #D0D0D0;
    padding: 40px 0;
    display: flex;
    flex-direction: row;
    /* Changed to row */
    align-items: flex-start !important;
    /* Force Left Align */
    text-align: left !important;
    gap: 16px;
}

/* Remove default bottom margin for grid items in search results */
body.search [data-archive=default][data-layout=simple]>article:not(:last-child) {
    margin-bottom: 0 !important;
}

/* Category (Meta) */
body.search .entry-meta,
body.search .entry-meta a {
    font-family: "Noto Serif KR", sans-serif;
    font-size: 14px;
    color: #3A4BFF !important;
    /* Point Blue */
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 4px;
}

/* Entry Title */
body.search .entry-title {
    margin: 0;
    line-height: 1.4;
}

body.search .entry-title a {
    font-family: 'Noto Serif KR', serif;
    font-size: 24px;
    /* H3 Desktop */
    font-weight: 700;
    color: #333333;
    text-decoration: none;
    transition: color 0.2s ease;
}

body.search .entry-title a:hover {
    color: #3A4BFF;
}

/* Read More Button ("더 보기") */
body.search .entry-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border: 1px solid #D0D0D0;
    background-color: #F3F3F3;
    color: #666666;
    font-family: 'Noto Serif KR', serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: 26px;
    /* Increased by 10px (16px -> 26px) */
    cursor: pointer;
}

body.search .entry-button:hover {
    background-color: #E8E8E8;
    /* Hover Fill */
    color: #333333;
    border-color: #D0D0D0;
}

body.search .entry-button svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    margin-left: 4px;
}

/* Pagination */
body.search .ct-pagination {
    margin-top: 60px;
    display: flex;
    justify-content: flex-start !important;
    /* Force Left Align */
    align-items: center;
    gap: 8px;
}

body.search .ct-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #D0D0D0;
    /* Navigation Stroke */
    background-color: #F3F3F3;
    /* Navigation Box */
    color: #666666;
    /* Secondary Color */
    font-family: 'Noto Serif KR', serif;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Current Page */
body.search .ct-pagination .page-numbers.current {
    background-color: #333333;
    /* Primary */
    color: #FFFFFF;
    /* White */
    border-color: #333333;
    font-weight: 700;
}

/* Hover State */
body.search .ct-pagination .page-numbers:not(.current):not(.dots):hover {
    background-color: #E8E8E8;
    color: #333333;
}

/* Dots */
body.search .ct-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: #999999;
    cursor: default;
}

/* Next/Prev Buttons */
body.search .ct-pagination .next.page-numbers,
body.search .ct-pagination .prev.page-numbers {
    font-weight: 700;
    padding: 0 20px;
    width: auto;
}

body.search .ct-pagination .next.page-numbers svg,
body.search .ct-pagination .prev.page-numbers svg {
    width: 10px;
    height: 10px;
    margin: 0 6px;
    fill: currentColor;
}

.dodn-modal-box {
    max-width: 960px;
}

/* =========================================
   Order Complete Page Styling (Strict Figma Match)
   ========================================= */

/* 1. Hide Default WooCommerce Elements */
.woocommerce-thankyou-order-received,
.woocommerce-order-overview.order_details,
.woocommerce-column__title {
    display: none !important;
}

/* 2. Page Title Override */
.woocommerce-checkout .hero-section .page-title,
.woocommerce-order-received .hero-section .page-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 32px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 40px;
}

.woocommerce-order-received .ct-container-full {
    padding-top: 0;
}

.woocommerce-order-received #main-container .site-main {
    width: 960px;
    margin: auto;
}

/* 3. Custom Order Header (Order Num, Info) - Defined in thankyou.php */
.dodn-order-header-wrap {
    margin-bottom: 60px;
}

.dodn-order-number-section {
    margin-bottom: 30px;
}

.dodn-label {
    font-family: "Noto Serif KR", sans-serif;
    font-size: 12px;
    color: #999999;
    margin-bottom: 8px;
    display: block;
}

.dodn-value-lg {
    font-family: 'Noto Serif KR', serif;
    font-size: 28px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 135% !important;
    /* 37.8px */
}

.dodn-order-info-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 20px;
    flex-direction: column;
}

.dodn-info-item {
    display: flex;
    gap: 12px;
    align-items: center;
}

.dodn-info-item .dodn-label {
    margin-bottom: 0;
    min-width: 80px;
    font-size: 14px;
    color: #666666;
}

.dodn-info-item .dodn-value {
    font-family: "Noto Serif KR", sans-serif;
    font-size: 14px;
    color: #666666;
    font-weight: 400;
}

/* 4. Section Titles (Downloads, Order Details, Customer Details) */
.woocommerce-order h2,
.woocommerce-order h3,
.woocommerce-order h4,
.msmp-email-section h4 {
    font-family: 'Noto Serif KR', serif;
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    margin-top: 50px;
    margin-bottom: 20px;
}

/* 5. Tables Global Style (Downloads, Order Details) */
/* Reset borders */
table.shop_table,
table.order_details,
.bank-account-info table,
.download-table {
    border: none !important;
    border-collapse: collapse !important;
    width: 100%;
    margin-bottom: 40px;
}

table.shop_table td,
table.shop_table th,
table.order_details td,
table.order_details th,
.bank-account-info table td,
.bank-account-info table th {
    border: none !important;
    /* Reset all first */
    border-bottom: 1px solid #E5E5E5 !important;
    /* Only bottom border */
    padding: 16px 8px;
    text-align: left;
    font-size: 14px;
}

/* Header Specifics */
table.shop_table thead th,
table.order_details thead th,
.bank-account-info table th {
    font-weight: 400;
    color: #999999;
}

/* Cell Specifics */
table.shop_table td,
.bank-account-info table td {
    color: #333333;
}

/* Links (Product Names, Downloads) */
table.shop_table a,
.download-table a {
    color: #3A4BFF !important;
    text-decoration: none;
    font-weight: 400;
}

/* Remove last border if needed, or keep for consistency */
table.shop_table tr:last-child td {
    border-bottom: 1px solid #E5E5E5 !important;
}

/* 6. Order Detail Totals (Footer) */
table.shop_table tfoot th {
    font-weight: 400;
    color: #666666;
    text-align: left;
    padding-left: 8px;
}

table.shop_table tfoot td {
    text-align: right;
    font-weight: 700;
    /* Values are bold */
    color: #333333;
    padding-right: 8px;
}

/* 7. Billing Address Section */
.woocommerce-customer-details h2 {
    display: block !important;
    /* Ensure title is visible if hidden previously */
    border-bottom: none;
    padding-bottom: 0;
}

.woocommerce-customer-details address {
    border: 0;
    background-color: transparent;
    padding: 0px;
    font-family: "Noto Serif KR", sans-serif;
    font-style: normal;
    font-size: 14px;
    line-height: 1.8;
    color: #666666;
    border-radius: 4px;
}

.woocommerce-customer-details address p {
    margin: 0;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .dodn-order-info-row {
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================
   404 Page Styling
   ========================================= */

/* Body Background */
body.error404 {
    background-color: #FAFAF8;
}

/* Main Container: Full Height & Centering */
body.error404 .site-main {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}


body.error404 .ct-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}


/* Title ("이런! 해당 페이지를 찾을 수 없습니다.") */
body.error404 .page-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 32px;
    font-weight: 700;
    color: #333333;
    line-height: 1.4;
    margin-bottom: 16px;
}

/* Description */
body.error404 .page-description {
    font-family: 'Noto Serif KR', serif;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Hide Search Form */
body.error404 .entry-content form {
    display: none !important;
}

/* Go to Main Button */
.btn-go-main {
    display: inline-flex;
    padding: 14px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: #3A4BFF;
    /* Point Blue */
    color: #FFFFFF !important;
    font-family: 'Noto Serif KR', serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
}

.btn-go-main:hover {
    background-color: #2F3EDB;
    color: #FFFFFF !important;
}