@charset "utf-8";

body.syou-sub-page.syou-philosophy-page #container.syou-sub {
    padding: 0;
}

body.syou-sub-page.syou-philosophy-page .syou-sub__body:has(.syou-philosophy),
body.syou-sub-page.syou-caution-page .syou-sub__body:has(.syou-caution-page),
body.syou-sub-page.syou-faq-page .syou-sub__body:has(.syou-faq-page) {
    padding: 0 0 32px;
    background: #fff;
}

.syou-philosophy {
    color: #1a1a1a;
    background: #fff;
}

.syou-philosophy-hero {
    margin: 0;
    padding: 0;
    background: #fff;
}

.syou-philosophy-hero__media {
    position: relative;
    overflow: hidden;
}

.syou-philosophy-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.62);
    pointer-events: none;
}

.syou-philosophy-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 6.5;
    object-fit: cover;
    object-position: center top;
    vertical-align: top;
}

.syou-philosophy-hero__copy {
    margin: 0;
    padding: 28px 24px 32px;
    text-align: center;
    background: #fff;
}

body.syou-philosophy-page .syou-philosophy-hero__brand {
    margin: 0 0 14px;
    font-size: var(--syou-frame-title, 2rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--syou-primary, #c49a6b);
}

/* 소개 문구 */
.syou-philosophy-intro {
    margin: 0;
    background: #fff;
}

.syou-philosophy-intro__copy {
    padding: 24px 16px 28px;
    background: #f3f3f3;
}

.syou-philosophy-intro__headline {
    margin: 0 0 16px;
}

.syou-philosophy-intro__headline-line {
    margin: 0 0 8px;
    font-size: var(--syou-frame-sub, 1.7rem);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.03em;
    color: #333;
    word-break: keep-all;
}

.syou-philosophy-intro__headline-line:last-child {
    margin-bottom: 0;
}

.syou-philosophy-intro__headline-part {
    font-weight: 400;
}

.syou-philosophy-intro__em--gold {
    color: var(--syou-primary-dark, #a87f52);
}

.syou-philosophy-intro__em--warm {
    color: #c9a86c;
}

.syou-philosophy-intro__body {
    margin: 0;
}

.syou-philosophy-intro__body-line {
    margin: 0 0 10px;
    font-size: var(--syou-frame-caption, 1.6rem);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.02em;
    color: #444;
    word-break: keep-all;
}

.syou-philosophy-intro__body-line:last-child {
    margin-bottom: 0;
}

/* 진료 철학 핵심 3가지 */
.syou-philosophy-pillars {
    padding: 28px 16px 36px;
    background: #fff;
}

body.syou-philosophy-page .syou-philosophy-pillars__title {
    margin: 0 0 20px;
    font-size: var(--syou-frame-title, 2rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--syou-text, #222);
}

.syou-philosophy-pillars__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* common.css ol>li::before(1. 2. 3.) 미적용 */
.syou-philosophy-pillars__list > .syou-philosophy-pillars__item::before {
    content: none !important;
    display: none !important;
}

.syou-philosophy-pillars__item {
    margin: 0 0 16px;
    padding: 16px 14px 20px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fff;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.syou-philosophy-pillars__item:last-child {
    margin-bottom: 0;
}

@media (hover: hover) {
    body.syou-philosophy-page .syou-philosophy-pillars__item:hover {
        border-color: var(--syou-primary, #c49a6b);
        background: rgba(196, 154, 107, 0.05);
        box-shadow:
            0 0 0 1px rgba(196, 154, 107, 0.45),
            0 4px 16px rgba(196, 154, 107, 0.12);
    }

}

body.syou-philosophy-page .syou-philosophy-pillars__item:focus-within {
    border-color: var(--syou-primary, #c49a6b);
    background: rgba(196, 154, 107, 0.05);
    box-shadow:
        0 0 0 1px rgba(196, 154, 107, 0.45),
        0 4px 16px rgba(196, 154, 107, 0.12);
}

.syou-philosophy-pillars__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0 0 10px;
}

body.syou-philosophy-page .syou-philosophy-pillars__num {
    margin: 0;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--syou-primary, #c49a6b);
    transition: font-size 0.25s ease, color 0.2s ease;
}

body.syou-philosophy-page .syou-philosophy-pillars__brand {
    margin: 0;
    font-size: var(--syou-frame-meta, 1.4rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--syou-primary, #c49a6b);
    transition: font-size 0.25s ease, color 0.2s ease;
}

@media (hover: hover) {
    body.syou-philosophy-page .syou-philosophy-pillars__item:hover .syou-philosophy-pillars__num {
        font-size: 32px;
    }

    body.syou-philosophy-page .syou-philosophy-pillars__item:hover .syou-philosophy-pillars__brand {
        font-size: 1.55rem;
    }
}

body.syou-philosophy-page .syou-philosophy-pillars__item:focus-within .syou-philosophy-pillars__num {
    font-size: 32px;
}

body.syou-philosophy-page .syou-philosophy-pillars__item:focus-within .syou-philosophy-pillars__brand {
    font-size: 1.55rem;
}

body.syou-philosophy-page .syou-philosophy-pillars__item-title {
    margin: 0 0 10px;
    font-size: var(--syou-frame-text, 1.8rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #222;
    word-break: keep-all;
}

.syou-philosophy-pillars__item-desc {
    margin: 0;
    font-size: var(--syou-frame-caption, 1.6rem);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.02em;
    color: #555;
    word-break: keep-all;
}

@container syouframe (max-width: 740px) {
    .syou-philosophy-hero__copy {
        padding: calc(100cqw * 28 / 430) calc(100cqw * 24 / 430) calc(100cqw * 32 / 430);
    }

    body.syou-philosophy-page .syou-philosophy-hero__brand {
        margin-bottom: calc(100cqw * 14 / 430);
    }

    .syou-philosophy-intro__copy {
        padding: calc(100cqw * 24 / 430) calc(100cqw * 16 / 430) calc(100cqw * 28 / 430);
    }

    .syou-philosophy-intro__headline-line {
        font-size: var(--syou-frame-sub, 1.7rem);
    }

    .syou-philosophy-intro__body-line {
        font-size: var(--syou-frame-caption, 1.6rem);
    }

    .syou-philosophy-pillars {
        padding: calc(100cqw * 28 / 430) calc(100cqw * 16 / 430) calc(100cqw * 36 / 430);
    }

    body.syou-philosophy-page .syou-philosophy-pillars__title {
        margin-bottom: calc(100cqw * 20 / 430);
    }

    body.syou-philosophy-page .syou-philosophy-pillars__num {
        font-size: calc(100cqw * 28 / 430);
    }

    body.syou-philosophy-page .syou-philosophy-pillars__item-title {
        font-size: var(--syou-frame-text, 1.8rem);
    }

    .syou-philosophy-pillars__item-desc {
        font-size: var(--syou-frame-caption, 1.6rem);
    }
}

@media (max-width: 740px) {
    body.syou-layout:not(.syou-proportional-scale) .syou-philosophy-hero__copy {
        padding: calc(100vw * 28 / 430) calc(100vw * 24 / 430) calc(100vw * 32 / 430);
    }

    body.syou-layout:not(.syou-proportional-scale).syou-philosophy-page .syou-philosophy-hero__brand {
        margin-bottom: calc(100vw * 14 / 430);
    }

    body.syou-layout:not(.syou-proportional-scale) .syou-philosophy-intro__copy {
        padding: calc(100vw * 24 / 430) calc(100vw * 16 / 430) calc(100vw * 28 / 430);
    }

    body.syou-layout:not(.syou-proportional-scale) .syou-philosophy-intro__headline-line {
        font-size: var(--syou-frame-sub, 1.7rem);
    }

    body.syou-layout:not(.syou-proportional-scale) .syou-philosophy-intro__body-line {
        font-size: var(--syou-frame-caption, 1.6rem);
    }

    body.syou-layout:not(.syou-proportional-scale) .syou-philosophy-pillars {
        padding: calc(100vw * 28 / 430) calc(100vw * 16 / 430) calc(100vw * 36 / 430);
    }

    body.syou-layout:not(.syou-proportional-scale).syou-philosophy-page .syou-philosophy-pillars__title {
        margin-bottom: calc(100vw * 20 / 430);
    }

    body.syou-layout:not(.syou-proportional-scale).syou-philosophy-page .syou-philosophy-pillars__num {
        font-size: calc(100vw * 28 / 430);
    }

    body.syou-layout:not(.syou-proportional-scale).syou-philosophy-page .syou-philosophy-pillars__item-title {
        font-size: var(--syou-frame-text, 1.8rem);
    }

    body.syou-layout:not(.syou-proportional-scale) .syou-philosophy-pillars__item-desc {
        font-size: var(--syou-frame-caption, 1.6rem);
    }
}