:root {
    --coral-text: #963d2b;
    --coral-text-strong: #702a1e;
    --charcoal: #1f2926;
    --off-white: #f9f8f1;
    --sage-highlight: #dbe8d6;
    --apricot-highlight: #f7dfc8;
    --serif-local: Georgia, "Noto Serif KR", serif;
}

body {
    color: var(--charcoal);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

[data-reveal] {
    opacity: 1;
    transform: none;
}

.kicker,
.card-number,
.card-category,
.header-action span,
.hero-note span,
.chip-energy span,
.signal-card a span,
.partner-notice > span {
    color: var(--coral-text);
}

.menu a:hover {
    color: var(--coral-text-strong);
}

.hero-copy h1,
.section-heading h2,
.evidence-copy h2,
.reading-boundary h2,
.article-header h1,
.listing-head h1,
.card-body h3,
.article-content h2 {
    font-family: var(--serif-local);
}

.hero-copy h1 em {
    color: inherit;
    font-style: normal;
}

.title-accent {
    display: inline;
    padding: 0;
    background: transparent;
    color: var(--coral-text);
    font-style: normal;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.title-highlight {
    display: inline;
    padding: 0;
    background: transparent;
    color: var(--coral-text-strong);
    text-decoration-line: underline;
    text-decoration-color: rgb(112 42 30 / 32%);
    text-decoration-thickness: .065em;
    text-underline-offset: .18em;
    text-decoration-skip-ink: auto;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/*
 * 큰 제목의 강조는 별도 색면이 아니라 글자색과 가는 밑줄만 쓴다.
 * 줄바꿈은 컨테이너 안에서 일어나도록 폭과 행간을 고정해, 1440px부터
 * 360px까지 글자와 장식 요소가 서로 침범하지 않게 한다.
 */
.hero-copy h1,
.section-heading h2,
.evidence-copy h2,
.reading-boundary h2,
.article-header h1,
.listing-head h1,
.article-content h2 {
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.hero-copy h1 {
    max-width: 12em;
    font-size: clamp(3.1rem, 5.4vw, 5.6rem);
    line-height: 1.04;
}

.section-heading h2,
.evidence-copy h2,
.reading-boundary h2 {
    max-width: 15em;
    line-height: 1.16;
}

.article-header h1,
.listing-head h1 {
    max-width: 14em;
    line-height: 1.16;
}

.article-content h2 {
    max-width: 18em;
    line-height: 1.28;
}

.evidence-section {
    color: var(--off-white);
}

.evidence-section .title-accent {
    color: var(--oxygen);
}

.evidence-section .evidence-copy > p,
.evidence-section .evidence-ladder small {
    color: #d9e7df;
}

.hero-summary,
.section-heading > p:last-child,
.signal-card p,
.card-body > p:not(.card-category),
.article-deck,
.article-footer > p,
.empty-state p {
    color: #3e4d49;
}

html.js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .65s ease, transform .65s ease;
}

html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.rhythm-observation-note {
    max-width: 42rem;
    margin: 1.15rem 0 0;
    color: var(--muted);
    font-size: .78rem;
}

.signal-card {
    position: relative;
    overflow: hidden;
}

.signal-card-icon {
    position: absolute;
    right: .7rem;
    top: .7rem;
    width: 4.8rem;
    height: 4.8rem;
    object-fit: contain;
    opacity: .92;
    pointer-events: none;
}

.signal-card h3,
.signal-card p,
.signal-card a,
.signal-card .card-number {
    position: relative;
    z-index: 1;
}

.empty-state-guide {
    max-width: 42rem;
    margin: 1.7rem auto 0;
    padding: 1.25rem;
    border: 1px solid var(--line);
    background: rgb(255 255 255 / 56%);
    text-align: left;
}

.empty-state-label {
    margin: 0;
    color: var(--pine);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.empty-state-principles {
    margin: .65rem 0 1rem;
    padding-left: 1.25rem;
    color: var(--charcoal);
    font-size: .9rem;
}

.empty-state-principles li + li {
    margin-top: .35rem;
}

.empty-state-links {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .7rem;
}

.empty-state-links a {
    padding: .2rem .65rem;
    border: 1px solid var(--pine);
    color: var(--pine);
    font-size: .82rem;
    font-weight: 800;
}

.health-signature {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.health-signature-dot {
    position: absolute;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 .35rem rgb(255 119 95 / 14%);
}

.health-signature-dot:nth-child(1) { left: 9%; top: 28%; }
.health-signature-dot:nth-child(2) { right: 15%; top: 16%; background: var(--oxygen); }
.health-signature-dot:nth-child(3) { bottom: 13%; left: 58%; background: var(--pine); }

html.js .rhythm-track.is-visible .rhythm-line {
    transform: scaleX(0);
    transform-origin: left center;
    animation: health-line-draw 1.15s cubic-bezier(.2, .75, .25, 1) .12s forwards;
}

html.js .atlas-art .health-signature-dot {
    animation: health-orbit 5.5s ease-in-out infinite;
}

html.js .atlas-art .health-signature-dot:nth-child(2) { animation-delay: -1.8s; }
html.js .atlas-art .health-signature-dot:nth-child(3) { animation-delay: -3.6s; }

html.js .evidence-ladder.is-visible > div {
    clip-path: inset(0 100% 0 0);
    animation: health-ladder-reveal .6s ease forwards;
}

html.js .evidence-ladder.is-visible > div:nth-child(2) { animation-delay: .12s; }
html.js .evidence-ladder.is-visible > div:nth-child(3) { animation-delay: .24s; }

@keyframes health-line-draw {
    to { transform: scaleX(1); }
}

@keyframes health-orbit {
    50% { transform: translateY(-.55rem) scale(1.08); opacity: .68; }
}

@keyframes health-ladder-reveal {
    to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal] {
        opacity: 1;
        transform: none;
    }

    html.js .rhythm-track.is-visible .rhythm-line,
    html.js .atlas-art .health-signature-dot,
    html.js .evidence-ladder.is-visible > div {
        animation: none;
        clip-path: none;
        transform: none;
    }
}

@media (max-width: 760px) {
    .hero-copy h1 {
        max-width: 100%;
        font-size: clamp(2.75rem, 11.6vw, 3.8rem);
        line-height: 1.08;
    }

    .section-heading h2,
    .evidence-copy h2,
    .reading-boundary h2 {
        max-width: 100%;
        font-size: clamp(2rem, 9.6vw, 3.15rem);
        line-height: 1.2;
    }

    .article-header h1,
    .listing-head h1 {
        max-width: 100%;
        font-size: clamp(2.15rem, 10.2vw, 3.05rem);
        line-height: 1.2;
    }

    .article-content h2 {
        max-width: 100%;
        font-size: clamp(1.5rem, 7.4vw, 2rem);
        line-height: 1.34;
    }

    .signal-card-icon {
        width: 4.1rem;
        height: 4.1rem;
    }

    .rhythm-observation-note {
        margin-top: .85rem;
    }
}

.brand,
.header-action,
.menu a,
.signal-card a,
.text-link,
.boundary-link,
.empty-state-links a,
.pagination a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.menu-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}

.menu-toggle::before {
    position: absolute;
    inset: 0;
    content: "";
}

.menu-toggle i {
    position: relative;
    z-index: 1;
}

@media (max-width: 860px) {
    :root {
        --shell: min(100% - 40px, 1180px);
    }

    .header-inner {
        min-height: 70px;
        gap: 1rem;
    }

    .brand small,
    .header-action {
        display: none;
    }

    .menu-toggle {
        display: grid;
        place-content: center;
        gap: 5px;
        margin-left: auto;
        border: 0;
        background: transparent;
        color: var(--pine);
        cursor: pointer;
    }

    .menu-toggle i {
        display: block;
        width: 22px;
        height: 1px;
        background: currentColor;
    }

    .primary-nav {
        display: none;
        position: absolute;
        z-index: 25;
        top: 100%;
        right: 0;
        left: 0;
        margin: 0;
        padding: .75rem max(20px, calc((100% - 1180px) / 2));
        border-bottom: 1px solid var(--line);
        background: var(--ivory);
        box-shadow: 0 12px 24px rgb(7 62 53 / 12%);
    }

    .primary-nav.is-open {
        display: block;
    }

    .primary-nav .menu {
        display: grid;
        gap: .15rem;
    }

    .primary-nav .menu a {
        padding: .45rem 0;
        font-size: .98rem;
    }

    .atlas-hero {
        padding: 4.75rem 0 4.3rem;
    }

    .atlas-hero-grid,
    .evidence-layout,
    .reading-boundary {
        grid-template-columns: 1fr;
        gap: 2.75rem;
    }

    .atlas-art {
        width: min(100%, 430px);
        min-height: 390px;
        margin-inline: auto;
    }

    .signal-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .signal-card {
        min-height: 230px;
    }
}

/* 헤더와 글 상세의 바깥 폭을 하나로 두고, 긴 본문만 읽기 폭으로 제한한다. */
:root{--article-frame:var(--shell);--article-reading:72ch}
.article-shell{width:var(--article-frame);max-width:none;padding-inline:0}
.health-article>.article-header,.health-article>.editorial-note,.health-article>.partner-notice,.health-article>.article-content,.health-article>.article-footer,.health-article~.comments-area{max-width:var(--article-reading);margin-inline:auto}
.article-header h1{max-width:17ch;font-size:clamp(2.3rem,4vw,4.15rem);line-height:1.16;letter-spacing:-.055em;text-wrap:balance}
.article-deck{max-width:62ch;font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.75}.article-content{font-size:clamp(1rem,1.16vw,1.125rem);line-height:1.9}
.article-content h2{margin:3.25rem 0 1rem;font-size:clamp(1.62rem,2.3vw,2.25rem);line-height:1.32;letter-spacing:-.04em}.article-content h3{margin:2.2rem 0 .7rem;font-size:clamp(1.2rem,1.65vw,1.5rem);line-height:1.45;letter-spacing:-.025em}
.article-content blockquote{margin:2rem 0;padding:1.2rem 0 1.2rem 1.35rem;border-left:4px solid var(--coral);background:transparent;color:#27332f;font-family:var(--serif-local);font-size:clamp(1.16rem,1.7vw,1.4rem);line-height:1.62}.article-content blockquote p{margin:.25rem 0}.article-content blockquote cite{display:block;margin-top:.85rem;color:#5f6b66;font-family:inherit;font-size:.78rem;font-style:normal}
.article-content table{display:block;width:100%;max-width:100%;margin:1.65rem 0;overflow-x:auto;border:1px solid var(--line);border-collapse:separate;border-spacing:0;background:#fff;font-size:.92em;line-height:1.55;-webkit-overflow-scrolling:touch}.article-content caption{padding:.8rem 0;border-bottom:1px solid var(--line);background:transparent;color:var(--coral-text);font-size:.86rem;font-weight:800;text-align:left;caption-side:top}.article-content thead{background:var(--pine);color:#fff}.article-content th,.article-content td{min-width:9.5rem;padding:.78rem .9rem;border-right:1px solid #d8e2da;border-bottom:1px solid #d8e2da;text-align:left;vertical-align:top}.article-content th:last-child,.article-content td:last-child{border-right:0}.article-content tbody tr:last-child td{border-bottom:0}.article-content tbody tr:nth-child(even){background:#f6faf5}
.partner-notice{margin-top:1.1rem!important;margin-bottom:1.8rem!important;padding:0!important;border:0!important;background:transparent!important;color:#65736d!important;font-size:.78rem!important;line-height:1.65!important}.partner-notice p{margin:0!important;color:inherit!important}.partner-notice strong,.partner-notice>span{display:none!important}
.health-article>.editorial-note{padding:1rem 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent}
.journal-card .card-image{aspect-ratio:1}
@media(max-width:760px){.article-shell{width:var(--shell);padding-block:3rem}.article-header h1{max-width:100%;font-size:clamp(2rem,9.8vw,3rem);line-height:1.2}.article-content h2{margin-top:2.65rem;font-size:clamp(1.48rem,7.1vw,1.85rem)}.article-content .product-context h4{font-size:1.18rem;line-height:1.45}.article-content table{font-size:.88rem}.article-content th,.article-content td{min-width:8.2rem;padding:.7rem .75rem}}