/*
 * 어른의 국어 - 읽을거리 개별 글
 * 대상: stories 카테고리의 single post
 */


/* ==================================================
   기본 변수 / 본문 폭
================================================== */

.single-post {
    --gw-green: #314a3b;
    --gw-deep: #183f40;
    --gw-paper: #f7f3e8;
    --gw-paper-light: #fbfaf6;
    --gw-line: #ded8ca;
    --gw-soft: #66655f;
    --gw-gold: #c99d47;
}


.single-post .inside-article {
    max-width: 920px;
    margin-right: auto;
    margin-left: auto;
}


.single-post .entry-title {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.25;
    letter-spacing: -.045em;
    word-break: keep-all;
}


/* ==================================================
   글 제목 아래 메타 정보
   날짜는 표시하고 작성자는 숨김
================================================== */

.single-post .entry-meta {
    margin-top: 12px;

    color: #8a877f;

    font-size: 13px;
    line-height: 1.5;
}


/* 작성자 숨김 */
.single-post .entry-meta .byline,
.single-post .entry-meta .author {
    display: none !important;
}


/* 날짜는 표시 */
.single-post .entry-meta .posted-on {
    display: inline;
}


/* 날짜 링크 디자인 */
.single-post .entry-meta a,
.single-post .entry-meta a:visited {
    color: #8a877f;

    text-decoration: none;
}

/* ==================================================
   글 전체
================================================== */

.gw-story {
    color: #262622;

    font-size: 18px;
    line-height: 1.9;

    word-break: keep-all;
    overflow-wrap: break-word;
}


.gw-story p {
    margin: 0 0 1.35em;
}


.gw-story h2 {
    margin: 2.4em 0 .8em;

    color: var(--gw-deep);

    font-size: 1.62em;
    line-height: 1.4;
    letter-spacing: -.035em;
}


/* ==================================================
   INTRO
================================================== */

.gw-story-intro {
    margin-bottom: 46px;
}


.gw-story-eyebrow {
    margin-bottom: 16px;

    color: var(--gw-green);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
}


.gw-story-lead {
    margin-bottom: 22px !important;

    color: #252824;

    font-size: 1.3em;
    line-height: 1.75;
}


/* ==================================================
   일반 본문 섹션
================================================== */

.gw-story-section {
    margin: 50px 0;
}


.gw-story-section > h2:first-child {
    margin-top: 0;
}


/* ==================================================
   상호작용 박스
================================================== */

.gw-story-interaction {
    margin: 52px 0;
    padding: 30px;

    background: var(--gw-paper-light);

    border: 1px solid var(--gw-line);
    border-radius: 16px;
}


.gw-story-interaction-head h2 {
    margin: 7px 0 13px;

    font-size: 1.45em;
}


.gw-story-interaction-head p {
    margin-bottom: 0;

    color: var(--gw-soft);
}


.gw-story-step {
    display: inline-block;

    color: var(--gw-green);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
}


/* ==================================================
   예시 문장
================================================== */

.gw-story-sentence {
    margin: 24px 0;
    padding: 21px 22px;

    background: #fff;

    border: 1px solid #e7e1d5;
    border-left: 4px solid var(--gw-green);
    border-radius: 0 10px 10px 0;

    color: #2a2c28;

    font-size: 1.08em;
    line-height: 1.75;
}


.gw-story-sentence strong {
    color: var(--gw-deep);
}


/* ==================================================
   펼쳐보기 / 정답 확인
================================================== */

.gw-story-reveal {
    margin-top: 18px;

    background: #fff;

    border: 1px solid var(--gw-line);
    border-radius: 10px;

    overflow: hidden;
}


.gw-story-reveal summary {
    position: relative;

    padding: 16px 48px 16px 18px;

    color: var(--gw-green);

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
    list-style: none;
}


.gw-story-reveal summary::-webkit-details-marker {
    display: none;
}


.gw-story-reveal summary::after {
    content: "+";

    position: absolute;
    top: 50%;
    right: 18px;

    color: var(--gw-green);

    font-size: 22px;
    font-weight: 400;

    transform: translateY(-50%);
}


.gw-story-reveal[open] summary::after {
    content: "−";
}


.gw-story-reveal summary:hover {
    background: #f6f7f4;
}


.gw-story-reveal summary:focus-visible {
    outline: 3px solid rgba(49, 74, 59, .24);
    outline-offset: -3px;
}


.gw-story-reveal-content {
    padding: 20px 21px 22px;

    border-top: 1px solid var(--gw-line);

    color: #363832;
}


.gw-story-reveal-content > strong:first-child {
    display: block;
    margin-bottom: 9px;

    color: var(--gw-deep);

    font-size: 1.13em;
}


.gw-story-reveal-content p:last-of-type {
    margin-bottom: 15px;
}


.gw-story-reveal-content a,
.gw-story-reveal-content a:visited {
    color: var(--gw-green);

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}


.gw-story-reveal-content a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* ==================================================
   핵심 문장
================================================== */

.gw-story-point {
    margin: 30px 0;
    padding: 25px 27px;

    background: var(--gw-paper);

    border-radius: 12px;
}


.gw-story-point span {
    display: block;
    margin-bottom: 9px;

    color: #777;

    font-size: 13px;
    font-weight: 600;
}


.gw-story-point strong {
    display: block;

    color: var(--gw-deep);

    font-size: 1.18em;
    line-height: 1.65;
}


/* ==================================================
   단어 카드
================================================== */

.gw-story-word-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;

    margin: 27px 0 30px;
}


.gw-story-word-card {
    min-width: 0;
    padding: 23px 20px;

    background: #fffdf8;

    border: 1px solid var(--gw-line);
    border-radius: 12px;
}


.gw-story-word {
    display: block;

    color: var(--gw-deep);

    font-size: 1.28em;
    font-weight: 700;
}


.gw-story-hanja {
    display: block;
    margin-top: 3px;

    color: #8a877f;

    font-size: 1.02em;
}


.gw-story-word-card p {
    margin: 16px 0 0;

    color: var(--gw-soft);

    font-size: .9em;
    line-height: 1.65;
}


/* ==================================================
   학습 방법
================================================== */

.gw-story-learning {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;

    margin-top: 28px;
}


.gw-story-learning > div {
    min-width: 0;
    padding: 22px 18px;

    background: #fff;

    border: 1px solid var(--gw-line);
    border-radius: 12px;
}


.gw-story-learning span {
    display: block;
    margin-bottom: 24px;

    color: #aaa;

    font-size: 12px;
    font-weight: 700;
}


.gw-story-learning strong {
    display: block;

    color: var(--gw-deep);

    font-size: 1.08em;
}


.gw-story-learning p {
    margin: 9px 0 0;

    color: var(--gw-soft);

    font-size: .86em;
    line-height: 1.65;
}


/* ==================================================
   마지막 선택 영역
================================================== */

.gw-story-final {
    margin: 58px 0 45px;
    padding: 34px;

    background: var(--gw-paper-light);

    border: 1px solid var(--gw-line);
    border-radius: 16px;
}


.gw-story-final h2 {
    margin: 8px 0 13px;

    font-size: 1.48em;
}


.gw-story-final > p {
    color: var(--gw-soft);
}


.gw-story-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    margin-top: 25px;
}


.gw-story-choice-grid a,
.gw-story-choice-grid a:visited {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 150px;
    padding: 20px;

    background: #fff;

    border: 1px solid var(--gw-line);
    border-radius: 11px;

    color: inherit !important;

    text-decoration: none !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


.gw-story-choice-grid a:hover {
    transform: translateY(-2px);

    border-color: #cbc2b2;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
}


.gw-story-choice-grid span {
    color: #aaa;

    font-size: 12px;
    font-weight: 600;
}


.gw-story-choice-grid strong {
    margin-top: 15px;

    color: var(--gw-deep);

    font-size: 1.1em;
}


.gw-story-choice-grid b {
    margin-top: auto;
    padding-top: 17px;

    color: var(--gw-green);

    font-size: 14px;
}


/* 전체 어휘 */

.gw-story-all-vocab {
    margin-top: 24px;
    padding-top: 22px;

    border-top: 1px solid var(--gw-line);

    text-align: center;
}


.gw-story-all-vocab p {
    margin-bottom: 9px;

    color: var(--gw-soft);

    font-size: 15px;
}


.gw-story-all-vocab a,
.gw-story-all-vocab a:visited {
    color: var(--gw-green);

    font-weight: 700;

    text-decoration: none;
}


.gw-story-all-vocab a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* ==================================================
   독자 질문
================================================== */

.gw-story-reader-question {
    margin: 48px 0 12px;
    padding: 30px 29px;

    background:
        linear-gradient(
            135deg,
            var(--gw-deep),
            #214e4b
        );

    border-radius: 16px;

    color: #fff;
}


.gw-story-reader-question > span {
    display: block;
    margin-bottom: 10px;

    color: #d9c28c;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
}


.gw-story-reader-question > strong {
    display: block;

    color: #fff;

    font-size: 1.22em;
    line-height: 1.6;
}


.gw-story-reader-question p {
    margin: 13px 0 0;

    color: rgba(255, 255, 255, .78);

    font-size: .95em;
    line-height: 1.75;
}


/* ==================================================
   모바일
================================================== */

@media (max-width: 768px) {

    .single-post .entry-title {
        font-size: 32px;
    }


    .gw-story {
        font-size: 17px;
        line-height: 1.82;
    }


    .gw-story h2 {
        margin-top: 2.1em;

        font-size: 1.4em;
    }


    .gw-story-lead {
        font-size: 1.17em;
    }


    .gw-story-interaction {
        margin: 40px 0;
        padding: 23px 19px;
    }


    .gw-story-sentence {
        padding: 18px 18px;
    }


    .gw-story-point {
        padding: 22px 20px;
    }


    .gw-story-word-grid,
    .gw-story-choice-grid {
        grid-template-columns: 1fr;
    }


    .gw-story-learning {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .gw-story-final {
        padding: 26px 20px;
    }


    .gw-story-choice-grid a {
        min-height: 125px;
    }


    .gw-story-reader-question {
        padding: 26px 21px;
    }

}


@media (max-width: 480px) {

    .gw-story-learning {
        grid-template-columns: 1fr;
    }

}