/*
 * Noble Dental Column Design System v5
 * 공통 디자인은 테마에 고정하고, 글마다 아래 모듈을 조합해 레이아웃을 바꿉니다.
 *
 * Brand source:
 * Brown    #A07F60
 * Charcoal #3E3E3F
 * Gray     #7D7E7F
 */

:root {
    --ndc-brown: #A07F60;
    --ndc-brown-deep: #5A4636;
    --ndc-brown-dark: #44362C;
    --ndc-brown-soft: #C9AB8E;
    --ndc-charcoal: #3E3E3F;
    --ndc-gray: #7D7E7F;
    --ndc-text: #302D2A;
    --ndc-text-soft: #6F6964;
    --ndc-paper: #FAF7F2;
    --ndc-sand: #F1EADF;
    --ndc-sand-2: #E8DED1;
    --ndc-line: #DDD2C5;
    --ndc-white: #FFFFFF;
}

.noble-single-page,
.noble-single-page * {
    box-sizing: border-box;
}

.noble-single-page {
    width: 100%;
    margin: 0;
    padding: 38px 18px 56px;
    background: #f2f6fa;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.noble-single-shell {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.noble-single-article {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e4e9ee !important;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(36, 47, 58, .035);
    overflow: hidden;
}

.noble-single-article::before,
.noble-single-article::after {
    display: none !important;
}

/* WordPress가 출력하는 글 제목/메타 */
.noble-single-header {
    padding: 38px 48px 22px;
    background: #fff;
}

.noble-single-title {
    margin: 0 !important;
    padding: 0 !important;
    color: #1f1f1f !important;
    font-family: "Noto Sans KR", "Pretendard", sans-serif;
    font-size: 30px !important;
    line-height: 1.42 !important;
    font-weight: 700 !important;
    letter-spacing: -.045em;
    word-break: keep-all;
}

.noble-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    color: #777;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: -.02em;
}

.noble-single-meta time {
    color: var(--ndc-brown);
    font-weight: 600;
}

.noble-single-meta-divider {
    color: #c3c3c3;
}

.noble-single-rule {
    height: 1px;
    margin: 0 48px;
    background: #eceff2;
}

/* 본문 */
.noble-single-content {
    width: 100%;
    margin: 0 !important;
    padding: 28px 48px 46px;
    color: var(--ndc-text);
    font-size: 16px;
    line-height: 1.85;
}

.noble-single-content > .ndc-article {
    width: 100%;
    max-width: 870px;
    margin: 0 auto !important;
    overflow: hidden;
    background: var(--ndc-paper);
    color: var(--ndc-text);
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ndc-article,
.ndc-article * {
    box-sizing: border-box;
}

.ndc-article p,
.ndc-article li {
    word-break: keep-all;
}

.ndc-article img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.ndc-article a {
    color: var(--ndc-brown-deep);
    text-underline-offset: 3px;
}

/* 제목 계열 */
.ndc-article .ndc-display,
.ndc-article h2,
.ndc-article h3,
.ndc-article .ndc-faq-title,
.ndc-article .ndc-clinic-name {
    font-family: "Noto Serif KR", serif;
    color: var(--ndc-text);
}

.ndc-article h2,
.ndc-article h3 {
    clear: none !important;
    word-break: keep-all;
}

/* =========================
   TOC
   ========================= */
.ndc-toc {
    width: 100%;
    max-width: 430px;
    margin: 0 0 28px;
    padding: 15px 18px;
    border: 1px solid #d8d8d8;
    background: #fbfbfb;
}

.ndc-toc-title {
    margin-bottom: 8px;
    color: #3f3f3f;
    font-size: 12px;
    font-weight: 700;
}

.ndc-toc ol {
    margin: 0;
    padding-left: 18px;
}

.ndc-toc li {
    margin: 3px 0;
    color: #6d6d6d;
    font-size: 11.5px;
    line-height: 1.55;
}

.ndc-toc a {
    color: inherit;
    text-decoration: none;
}

.ndc-toc a:hover {
    color: var(--ndc-brown);
}

/* =========================
   HERO
   ========================= */
.ndc-hero {
    position: relative;
    overflow: hidden;
    padding: 58px 34px 50px;
    background:
        radial-gradient(circle at 88% 0%, rgba(160,127,96,.16), transparent 36%),
        linear-gradient(145deg, #44362c 0%, #312e2c 100%);
    color: #fff;
}

.ndc-hero::after {
    content: attr(data-number);
    position: absolute;
    top: 15px;
    right: 24px;
    color: rgba(255,255,255,.055);
    font-family: "Noto Serif KR", serif;
    font-size: 94px;
    line-height: 1;
    font-style: italic;
    pointer-events: none;
}

.ndc-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr);
    gap: 34px;
    align-items: center;
}

.ndc-hero-badge {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    margin-bottom: 19px;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(160,127,96,.17);
    color: #ead7c6;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 600;
}

.ndc-hero h2 {
    margin: 0 0 18px !important;
    color: #fff !important;
    font-size: 31px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    letter-spacing: -.045em;
}

.ndc-hero-lead {
    margin: 0 !important;
    color: #e1ddd9 !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
}

.ndc-hero-note {
    margin-top: 22px;
    color: #cdb59f;
    font-size: 11px;
}

/* =========================
   INTRO
   ========================= */
.ndc-intro {
    padding: 58px 38px;
    background: var(--ndc-sand);
}

.ndc-intro-inner {
    padding: 34px 32px;
    border: 1px solid rgba(160,127,96,.17);
    border-radius: 7px;
    background: rgba(255,255,255,.34);
}

.ndc-intro h2 {
    margin: 0 0 18px !important;
    font-size: 25px !important;
    line-height: 1.55 !important;
    font-weight: 600 !important;
}

.ndc-intro .ndc-answer {
    margin-bottom: 18px;
    padding-left: 15px;
    border-left: 3px solid var(--ndc-brown);
    color: #403b37;
    font-weight: 600;
}

/* =========================
   TOPIC / SECTION
   ========================= */
.ndc-topic {
    padding: 62px 38px;
}

.ndc-topic--paper { background: var(--ndc-paper); }
.ndc-topic--white { background: #fff; }
.ndc-topic--sand { background: var(--ndc-sand); }
.ndc-topic--deep {
    background: var(--ndc-charcoal);
    color: #eee;
}

.ndc-topic--deep h2,
.ndc-topic--deep h3,
.ndc-topic--deep p,
.ndc-topic--deep li {
    color: #f2f2f2 !important;
}

.ndc-topic-head {
    margin-bottom: 26px;
}

.ndc-topic-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--ndc-brown);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .14em;
}

.ndc-topic-kicker::after {
    content: "";
    width: 30px;
    height: 1px;
    background: currentColor;
}

.ndc-topic h2 {
    margin: 0 !important;
    font-size: 25px !important;
    line-height: 1.55 !important;
    font-weight: 600 !important;
    letter-spacing: -.035em;
}

.ndc-topic h3 {
    margin: 26px 0 12px !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
}

.ndc-topic p {
    margin: 0 0 16px !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
}

/* H2 바로 아래의 결론형 1~2문장 */
.ndc-answer {
    margin: 0 0 20px;
    color: #3f3a36;
    font-size: 15px;
    line-height: 1.85;
    font-weight: 600;
}

/* =========================
   SPLIT
   ========================= */
.ndc-split {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    gap: 30px;
    align-items: start;
}

.ndc-split--reverse .ndc-media {
    order: 2;
}

.ndc-split--reverse .ndc-copy {
    order: 1;
}

.ndc-media {
    min-width: 0;
}

.ndc-media figure,
.ndc-wide-media figure {
    margin: 0 !important;
}

.ndc-media figcaption,
.ndc-wide-media figcaption {
    margin-top: 7px;
    color: #8a8179;
    font-size: 10.5px;
    line-height: 1.55;
}

.ndc-wide-media {
    margin-top: 26px;
}

/* =========================
   IMAGE SLOT
   향후 WP 이미지 패널이 data-image-slot 번호로 채움
   ========================= */
.ndc-image-slot {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 220px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 26px 20px;
    border: 1px dashed rgba(160,127,96,.42);
    background: rgba(255,255,255,.48);
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}

.ndc-image-slot-title {
    color: var(--ndc-brown-deep);
    font-size: 13px;
    font-weight: 700;
}

.ndc-image-slot-guide {
    display: block;
    margin-top: 6px;
    color: #887d74;
    font-size: 11px;
    line-height: 1.55;
}

.ndc-image-slot.is-filled {
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.ndc-image-slot.is-filled > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================
   LIST
   ========================= */
.ndc-dot-list,
.ndc-number-list,
.ndc-check-list {
    list-style: none;
    margin: 22px 0 0 !important;
    padding: 0 !important;
}

.ndc-dot-list {
    border-top: 1px solid rgba(160,127,96,.18);
}

.ndc-dot-list li {
    position: relative;
    margin: 0 !important;
    padding: 14px 4px 14px 18px;
    border-bottom: 1px solid rgba(160,127,96,.18);
    font-size: 14px;
    line-height: 1.75;
}

.ndc-dot-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 24px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ndc-brown);
}

.ndc-number-list li {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 13px;
    margin: 0 0 16px !important;
    align-items: start;
}

.ndc-number {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ndc-brown-soft);
    border-radius: 50%;
    color: var(--ndc-brown-deep);
    font-size: 10px;
    font-weight: 700;
}

.ndc-number-list strong {
    display: block;
    margin-bottom: 3px;
    color: #3a3531;
    font-size: 14px;
}

.ndc-number-list p {
    margin: 0 !important;
    color: var(--ndc-text-soft);
    font-size: 13px !important;
}

/* =========================
   HIGHLIGHT
   ========================= */
.ndc-highlight {
    margin: 24px 0;
    padding: 20px 22px;
}

.ndc-highlight--line {
    border-left: 3px solid var(--ndc-brown);
    background: rgba(255,255,255,.52);
}

.ndc-highlight--dark {
    background: var(--ndc-charcoal);
    color: #fff;
}

.ndc-highlight--dark strong,
.ndc-highlight--dark p {
    color: #fff !important;
}

/* =========================
   STEPS
   ========================= */
.ndc-steps {
    margin-top: 24px;
}

.ndc-step {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 16px;
    position: relative;
    padding: 0 0 24px;
}

.ndc-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 39px;
    bottom: 3px;
    width: 1px;
    background: var(--ndc-line);
}

.ndc-step-num {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ndc-brown);
    border-radius: 50%;
    background: var(--ndc-paper);
    color: var(--ndc-brown-deep);
    font-size: 11px;
    font-weight: 700;
}

.ndc-step strong {
    display: block;
    margin: 2px 0 5px;
    color: #37322e;
}

/* =========================
   TABLE
   ========================= */
.ndc-table-wrap {
    width: 100%;
    margin-top: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ndc-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    border-spacing: 0;
    background: #fff;
    font-size: 12.5px;
}

.ndc-table caption {
    padding: 0 0 10px;
    color: #6f655d;
    font-size: 11px;
    text-align: left;
}

.ndc-table thead th {
    padding: 12px 13px;
    border: 0;
    background: var(--ndc-charcoal);
    color: #fff;
    font-weight: 600;
    text-align: left;
}

.ndc-table tbody td {
    padding: 12px 13px;
    border: 0;
    border-bottom: 1px solid #e6dfd8;
    color: #504a45;
    vertical-align: top;
}

.ndc-table tbody tr:nth-child(even) td {
    background: #f7f2eb;
}

/* =========================
   REFERENCES
   ========================= */
.ndc-reference-note,
.ndc-references {
    color: #776f68;
    font-size: 11.5px;
    line-height: 1.7;
}

.ndc-references {
    padding: 34px 38px;
    border-top: 1px solid var(--ndc-line);
    background: #fff;
}

.ndc-references strong {
    display: block;
    margin-bottom: 9px;
    color: #4c4641;
}

.ndc-references ol {
    margin: 0;
    padding-left: 18px;
}

/* =========================
   FAQ
   FAQPage schema는 본문에서 생성하지 않음.
   사용자를 위한 실제 FAQ UI만 출력.
   ========================= */
.ndc-faq {
    padding: 54px 38px;
    background: var(--ndc-charcoal);
    color: #fff;
}

.ndc-faq-kicker {
    margin-bottom: 9px;
    color: var(--ndc-brown-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.ndc-faq-title {
    margin: 0 0 22px !important;
    color: #fff !important;
    font-size: 24px !important;
    line-height: 1.5 !important;
}

.ndc-faq details {
    border-top: 1px solid rgba(255,255,255,.13);
}

.ndc-faq details:last-child {
    border-bottom: 1px solid rgba(255,255,255,.13);
}

.ndc-faq summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 12px 32px 12px 0;
    color: #fff;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.ndc-faq summary::-webkit-details-marker {
    display: none;
}

.ndc-faq summary::after {
    content: "+";
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ndc-brown-soft);
    font-size: 20px;
    font-weight: 300;
}

.ndc-faq details[open] summary::after {
    content: "−";
}

.ndc-q {
    display: inline-flex;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(201,171,142,.55);
    border-radius: 50%;
    color: #dbc3ad;
    font-family: "Noto Serif KR", serif;
    font-size: 11px;
    font-style: italic;
}

.ndc-faq-answer {
    padding: 0 34px 17px 37px;
    color: #d2cdca;
    font-size: 12.5px;
    line-height: 1.8;
}

/* =========================
   CTA
   ========================= */
.ndc-cta {
    padding: 46px 28px;
    background: var(--ndc-sand);
    text-align: center;
}

.ndc-cta-line {
    width: 34px;
    height: 2px;
    margin: 0 auto 16px;
    background: var(--ndc-brown);
}

.ndc-cta-copy {
    margin: 0 0 20px !important;
    color: #413a34;
    font-family: "Noto Serif KR", serif;
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-weight: 600;
    text-align: center !important;
}

.ndc-cta-btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 9px 25px;
    border-radius: 999px;
    background: var(--ndc-charcoal);
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
}

.ndc-cta-btn:hover {
    background: var(--ndc-brown);
}

/* =========================
   글 안쪽 병원 안내
   ========================= */
.ndc-clinic {
    padding: 38px;
    background: #302f30;
    color: #c9c5c1;
}

.ndc-clinic-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 26px;
    align-items: start;
}

.ndc-clinic-name {
    margin-bottom: 8px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.ndc-clinic-brand {
    color: var(--ndc-brown-soft);
    font-size: 10px;
    letter-spacing: .08em;
}

.ndc-clinic-info {
    color: #c9c5c1;
    font-size: 11.5px;
    line-height: 1.85;
}

.ndc-clinic-info a {
    color: #ddd4cc;
}

.ndc-clinic-note {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.1);
    color: #85817e;
    font-size: 10.5px;
    line-height: 1.65;
}

/* 이전 / 목록 / 다음 */
.noble-post-navigation {
    margin-top: 12px;
    border: 1px solid #e4e9ee;
    border-radius: 7px;
    background: #fff;
}

.noble-post-nav-inner {
    display: grid;
    grid-template-columns: 1fr 70px 1fr;
    align-items: center;
    gap: 18px;
    min-height: 76px;
    padding: 13px 22px;
}

.noble-post-nav-item {
    min-width: 0;
}

.noble-post-nav-item a {
    display: block;
    overflow: hidden;
    color: #545454;
    font-size: 12px;
    line-height: 1.55;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.noble-post-nav-label {
    display: block;
    margin-bottom: 4px;
    color: #9c9c9c;
    font-size: 10px;
    line-height: 1.4;
}

.noble-post-nav-next {
    text-align: right;
}

.noble-post-list-button {
    display: inline-flex;
    width: 54px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 1px solid #d6dade;
    border-radius: 4px;
    background: #fff;
    color: #555 !important;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none !important;
}

.noble-post-navigation--only-list {
    padding: 18px;
    text-align: center;
}

/* Easy TOC를 혹시 사용하는 경우에도 작게 정리 */
.noble-single-content #ez-toc-container {
    width: auto !important;
    max-width: 430px;
    margin: 0 0 28px !important;
    padding: 15px 18px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 2px !important;
    background: #fbfbfb !important;
    box-shadow: none !important;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px) {
    .noble-single-page {
        padding: 18px 10px 34px;
    }

    .noble-single-header {
        padding: 26px 22px 18px;
    }

    .noble-single-title {
        font-size: 23px !important;
        line-height: 1.48 !important;
    }

    .noble-single-rule {
        margin: 0 22px;
    }

    .noble-single-content {
        padding: 22px 22px 34px;
        font-size: 15px;
    }

    .ndc-hero,
    .ndc-intro,
    .ndc-topic,
    .ndc-faq,
    .ndc-clinic {
        padding-left: 22px;
        padding-right: 22px;
    }

    .ndc-hero-grid,
    .ndc-split,
    .ndc-clinic-grid {
        grid-template-columns: 1fr;
    }

    .ndc-split--reverse .ndc-media,
    .ndc-split--reverse .ndc-copy {
        order: initial;
    }

    .ndc-hero h2 {
        font-size: 25px !important;
    }

    .ndc-intro h2,
    .ndc-topic h2 {
        font-size: 22px !important;
    }

    .ndc-hero-media {
        max-width: 520px;
        margin: 0 auto;
    }

    .noble-post-nav-inner {
        grid-template-columns: 1fr 52px 1fr;
        gap: 10px;
        padding: 12px 14px;
    }
}

@media (max-width: 520px) {
    .noble-single-page {
        padding-left: 6px;
        padding-right: 6px;
    }

    .noble-single-header {
        padding: 23px 18px 16px;
    }

    .noble-single-title {
        font-size: 21px !important;
    }

    .noble-single-rule {
        margin: 0 18px;
    }

    .noble-single-content {
        padding: 18px 18px 28px;
    }

    .ndc-hero,
    .ndc-intro,
    .ndc-topic,
    .ndc-faq,
    .ndc-clinic {
        padding-left: 18px;
        padding-right: 18px;
    }

    .ndc-intro-inner {
        padding: 26px 20px;
    }

    .ndc-toc {
        max-width: 100%;
    }

    .noble-post-nav-item a {
        display: none;
    }

    .noble-post-nav-label {
        margin: 0;
        color: #666;
        font-size: 11px;
    }
}