/* ─────────────────────────────────────────────────────────────────────
   Corner — resource library styles.
   Warm "paper reading" identity: serif body, amber accents.
   Progressive enhancement: tap-to-translate styles are scoped under
   `.cn-ready` (added by corner.js); with JavaScript off the vocabulary
   stays highlighted and the popover rules never apply.
   ───────────────────────────────────────────────────────────────────── */

:root {
    --cn-paper:  #fdf8ef;
    --cn-ink:    #3d3229;
    --cn-accent: #d97706;
    --cn-hl:     #fef3c7;
    --cn-border: #ede4d3;

    /* Part-of-speech colour coding (verb / adjective / adverb). */
    --cn-verb:      #16a34a;  --cn-verb-hl: #dcfce7;
    --cn-adj:       #2563eb;  --cn-adj-hl:  #dbeafe;
    --cn-adv:       #7c3aed;  --cn-adv-hl:  #ede9fe;

    /* Quiz feedback. */
    --cn-right:      #16a34a;  --cn-right-soft: #ecfdf5;
    --cn-wrong:      #dc2626;  --cn-wrong-soft: #fef2f2;
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.cn-card {
    transition: transform .15s ease, box-shadow .15s ease;
}
.cn-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(61, 50, 41, .12) !important;
}
.cn-cover {
    height: 140px;
    object-fit: cover;
}
.cn-cover-placeholder {
    background: var(--cn-hl);
    color: var(--cn-accent);
}

/* Banner link to writing templates on the Corner home page. */
.cn-banner {
    background: var(--cn-paper);
    border: 1px solid var(--cn-border);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    color: var(--cn-ink);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cn-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 .4rem .9rem rgba(61, 50, 41, .12);
    color: var(--cn-ink);
}
.cn-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: .8rem;
    background: var(--cn-hl);
    color: var(--cn-accent);
    flex-shrink: 0;
}

/* ── Reading progress bar ──────────────────────────────────────────── */
.cn-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--cn-border);
    overflow: hidden;
}
.cn-progress-bar {
    height: 100%;
    border-radius: 3px;
    background: var(--cn-accent);
    transition: width .3s ease;
}

/* ── Collection story list ─────────────────────────────────────────── */
.cn-story-list {
    border-radius: .75rem;
    overflow: hidden;
}
.cn-story-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cn-hl);
    color: var(--cn-subject, var(--cn-accent));
    font-weight: 600;
    flex-shrink: 0;
}
.cn-story-no.cn-done {
    background: var(--cn-subject, var(--cn-accent));
    color: #fff;
}

/* ── The reader ("paper" page) ─────────────────────────────────────── */
.cn-reader {
    background: var(--cn-paper);
    color: var(--cn-ink);
    border: 1px solid var(--cn-border);
    border-radius: 1rem;
    box-shadow: 0 .25rem .75rem rgba(61, 50, 41, .08);
    padding: 2rem 1.5rem;
    font-family: Georgia, 'Noto Serif', 'Noto Serif KR', serif;
    font-size: 1.08rem;
    line-height: 1.9;
}
@media (min-width: 768px) {
    .cn-reader { padding: 2.5rem 3rem; }
}
.cn-reader p { margin-bottom: 1.1rem; }

/* Highlighted vocabulary — readable with zero JS. */
.cn-word {
    background: var(--cn-hl);
    border-bottom: 2px dotted var(--cn-accent);
    border-radius: .2rem;
    padding: 0 .15rem;
}
.cn-ready .cn-word { cursor: pointer; }
.cn-ready .cn-word.cn-open {
    background: var(--cn-ink);
    color: var(--cn-paper);
    border-bottom-color: var(--cn-ink);
}

/* Colour highlights by part of speech (verb / adjective / adverb).
   Words with no data-pos keep the neutral amber highlight above. */
.cn-word[data-pos="verb"] { background: var(--cn-verb-hl); border-bottom-color: var(--cn-verb); }
.cn-word[data-pos="adj"]  { background: var(--cn-adj-hl);  border-bottom-color: var(--cn-adj);  }
.cn-word[data-pos="adv"]  { background: var(--cn-adv-hl);  border-bottom-color: var(--cn-adv);  }

/* Part-of-speech legend under the intro line. */
.cn-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.cn-legend-item {
    font-size: .78rem;
    font-weight: 600;
    padding: .1rem .55rem;
    border-radius: 1rem;
    border-bottom: 2px solid transparent;
}
.cn-legend-item.cn-pos-verb { background: var(--cn-verb-hl); border-bottom-color: var(--cn-verb); }
.cn-legend-item.cn-pos-adj  { background: var(--cn-adj-hl);  border-bottom-color: var(--cn-adj);  }
.cn-legend-item.cn-pos-adv  { background: var(--cn-adv-hl);  border-bottom-color: var(--cn-adv);  }
.cn-legend-item.cn-pos-none { background: var(--cn-hl);      border-bottom-color: var(--cn-accent); }

/* Coloured dot on flashcard fronts, matching the word's POS. */
.cn-pos-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    margin-right: .35rem;
    vertical-align: middle;
}
.cn-pos-dot.cn-pos-verb { background: var(--cn-verb); }
.cn-pos-dot.cn-pos-adj  { background: var(--cn-adj);  }
.cn-pos-dot.cn-pos-adv  { background: var(--cn-adv);  }

/* ── End-of-story comprehension quiz ───────────────────────────────── */
.cn-quiz {
    background: var(--cn-paper);
    border: 1px solid var(--cn-border);
    border-radius: 1rem;
    padding: 1.25rem 1.25rem .5rem;
}
.cn-q { margin-bottom: 1.25rem; }
.cn-q:last-child { margin-bottom: .75rem; }
.cn-q-text {
    font-weight: 600;
    color: var(--cn-ink);
    margin-bottom: .6rem;
    line-height: 1.6;
}
.cn-opts { display: grid; gap: .5rem; }
.cn-opt {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    width: 100%;
    text-align: left;
    background: #fff;
    color: var(--cn-ink);
    border: 1.5px solid var(--cn-border);
    border-radius: .6rem;
    padding: .6rem .8rem;
    font: inherit;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.cn-opt:hover:not(:disabled) { border-color: var(--cn-accent); }
.cn-opt:disabled { cursor: default; }
.cn-opt-letter {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cn-hl);
    color: var(--cn-accent);
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
}
.cn-opt-text { flex: 1; }
.cn-opt-mark { flex-shrink: 0; font-weight: 700; }

.cn-opt.cn-correct {
    border-color: var(--cn-right);
    background: var(--cn-right-soft);
}
.cn-opt.cn-correct .cn-opt-letter { background: var(--cn-right); color: #fff; }
.cn-opt.cn-correct .cn-opt-mark::after { content: '✓'; color: var(--cn-right); }
.cn-opt.cn-wrong {
    border-color: var(--cn-wrong);
    background: var(--cn-wrong-soft);
}
.cn-opt.cn-wrong .cn-opt-letter { background: var(--cn-wrong); color: #fff; }
.cn-opt.cn-wrong .cn-opt-mark::after { content: '✗'; color: var(--cn-wrong); }

.cn-feedback {
    margin-top: .6rem;
    padding: .6rem .8rem;
    border-left: 4px solid var(--cn-right);
    background: var(--cn-right-soft);
    border-radius: .5rem;
    font-size: .92rem;
    line-height: 1.6;
    font-family: var(--bs-body-font-family, sans-serif);
}
.cn-feedback.cn-is-wrong {
    border-left-color: var(--cn-wrong);
    background: var(--cn-wrong-soft);
}
.cn-feedback-verdict { font-weight: 700; margin: 0 0 .2rem; color: var(--cn-right); }
.cn-feedback.cn-is-wrong .cn-feedback-verdict { color: var(--cn-wrong); }
.cn-feedback-explain { color: var(--cn-ink); }
.cn-feedback-explain :last-child { margin-bottom: 0; }

/* ── Story illustration ────────────────────────────────────────────── */
.cn-illustration {
    margin: 0;
    background: var(--cn-paper);
    border: 1px solid var(--cn-border);
    border-radius: 1rem;
    padding: .6rem;
    text-align: center;
}
.cn-illustration img {
    max-width: 100%;
    max-height: 340px;
    border-radius: .7rem;
}

/* ── Story audio player ────────────────────────────────────────────── */
.cn-audio {
    background: var(--cn-paper);
    border: 1px solid var(--cn-border);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}
.cn-audio-label {
    display: block;
    font-weight: 600;
    color: var(--cn-ink);
    margin-bottom: .6rem;
    font-family: var(--bs-body-font-family, sans-serif);
}
.cn-audio audio {
    width: 100%;
    display: block;
}

/* ── Grammar points ────────────────────────────────────────────────── */
.cn-grammar {
    background: var(--cn-paper);
    border: 1px solid var(--cn-border);
    border-radius: 1rem;
    padding: 1.25rem 1.25rem .5rem;
}
.cn-gram {
    border-left: 4px solid var(--cn-accent);
    background: var(--cn-hl);
    border-radius: .6rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}
.cn-gram:last-child { margin-bottom: .5rem; }
.cn-gram-pattern {
    font-weight: 700;
    color: var(--cn-accent);
    font-size: 1.05rem;
    margin: 0 0 .25rem;
    font-family: var(--bs-body-font-family, sans-serif);
}
.cn-gram-meaning {
    color: var(--cn-ink);
    margin: 0 0 .5rem;
    line-height: 1.6;
    font-family: var(--bs-body-font-family, sans-serif);
}
.cn-gram-meaning:last-child { margin-bottom: 0; }
.cn-gram-ex {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--cn-ink);
}
.cn-gram-ex li {
    margin-bottom: .25rem;
    line-height: 1.6;
}
.cn-gram-ex li:last-child { margin-bottom: 0; }

/* Translation popover (created by corner.js). */
.cn-pop {
    position: absolute;
    z-index: 1080;
    max-width: 16rem;
    background: var(--cn-ink);
    color: var(--cn-paper);
    font-family: var(--bs-body-font-family, sans-serif);
    font-size: .9rem;
    line-height: 1.4;
    padding: .4rem .7rem;
    border-radius: .5rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25);
    pointer-events: none;
}
.cn-pop::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--cn-ink);
}

/* Finish bar */
.cn-finish {
    background: var(--cn-paper);
    border: 1px dashed var(--cn-border);
    border-radius: 1rem;
}

/* ── Writing practice (wp-) — interactive exam-writing drills ──────── */
:root {
    /* Chart series colors, validated for CVD + contrast on the paper
       surfaces (light: #d97706/#2563eb, dark override below). */
    --wp-s1: #d97706;
    --wp-s2: #2563eb;
}

/* Numbered step headers. */
.wp-step {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.wp-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--cn-accent);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.wp-step-title {
    font-weight: 700;
    color: var(--cn-ink);
}

/* The exam-paper question box. */
.wp-exam {
    background: var(--cn-paper);
    border: 2px solid var(--cn-ink);
    border-radius: .5rem;
    padding: 1rem 1.1rem;
    color: var(--cn-ink);
}
.wp-exam-head {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}
.wp-exam-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    border: 2px solid var(--cn-ink);
    border-radius: .4rem;
    font-weight: 700;
    flex-shrink: 0;
}
.wp-exam-prompt { line-height: 1.7; }
.wp-exam-prompt p { margin-bottom: .4rem; }
.wp-exam-prompt p:last-child { margin-bottom: 0; }

/* ── Charts inside the exam box (pure HTML/SVG, no JS) ─────────────── */
.wp-chart {
    margin-top: 1rem;
    border: 1px solid var(--cn-border);
    border-radius: .5rem;
    padding: .9rem .9rem .6rem;
    overflow-x: auto;
}
.wp-chart-title {
    text-align: center;
    font-weight: 700;
    margin: 0 0 .6rem;
    font-size: .95rem;
}
.wp-chart svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.wp-chart svg text {
    fill: var(--cn-ink);
    font-family: var(--bs-body-font-family, sans-serif);
}
.wp-chart svg .wp-axis  { stroke: var(--cn-border); stroke-width: 1; }
.wp-chart svg .wp-line  { stroke: var(--wp-s1); stroke-width: 2; fill: none; }
.wp-chart svg .wp-dot   { fill: var(--wp-s1); stroke: var(--cn-paper); stroke-width: 2; }
.wp-chart svg .wp-val   { font-size: 13px; font-weight: 700; text-anchor: middle; }
.wp-chart svg .wp-tick  { font-size: 12px; text-anchor: middle; }

/* Horizontal bar rows (single or paired series). */
.wp-bars { display: grid; gap: .45rem; }
.wp-bar-row {
    display: grid;
    grid-template-columns: 6.5rem 1fr 3.2rem;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
}
.wp-bar-label { text-align: right; color: var(--cn-ink); }
.wp-bar-track {
    background: var(--cn-hl);
    border-radius: 4px;
    height: 14px;
    overflow: hidden;
}
.wp-bar {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: var(--wp-s1);
}
.wp-bar.wp-b2 { background: var(--wp-s2); }
.wp-bar-val { font-weight: 700; color: var(--cn-ink); font-size: .85rem; }
.wp-bar-row.wp-row-sub { margin-top: -.25rem; }
.wp-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: .82rem;
    color: var(--cn-ink);
    margin-bottom: .5rem;
}
.wp-legend-chip {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: .2rem;
    background: var(--wp-s1);
    margin-right: .3rem;
    vertical-align: -1px;
}
.wp-legend-chip.wp-b2 { background: var(--wp-s2); }

/* Extra info boxes under the graph (원인 / 전망), exam style. */
.wp-facts {
    margin-top: .8rem;
    display: grid;
    gap: .5rem;
}
.wp-fact {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    border: 1px solid var(--cn-border);
    border-radius: .5rem;
    padding: .5rem .7rem;
    font-size: .92rem;
}
.wp-fact-tag {
    flex-shrink: 0;
    font-weight: 700;
    background: var(--cn-hl);
    color: var(--cn-accent);
    border-radius: .35rem;
    padding: .05rem .5rem;
    font-size: .85rem;
}
.wp-fact ul { margin: 0; padding-left: 1.1rem; }
.wp-fact li { line-height: 1.6; }

/* ── 51/52 passages — the boxed text as printed on the exam paper ──── */
.wp-passage {
    border: 1px solid var(--cn-border);
    border-radius: .5rem;
    padding: .9rem 1rem;
    line-height: 1.9;
}
.wp-passage p { margin-bottom: .6rem; }
.wp-passage p:last-child { margin-bottom: 0; }
.wp-passage-title { text-align: center; font-weight: 700; margin: 0 0 .6rem; }

/* Email / invitation header rows (제목 · 보낸 사람 …). */
.wp-mail {
    border: 1px solid var(--cn-border);
    border-bottom: none;
    border-radius: .5rem .5rem 0 0;
    font-size: .92rem;
    overflow: hidden;
}
.wp-mail-row { display: flex; border-bottom: 1px solid var(--cn-border); }
.wp-mail-row > span:first-child {
    flex: 0 0 6.5rem;
    background: var(--cn-hl);
    font-weight: 700;
    padding: .35rem .7rem;
}
.wp-mail-row > span:last-child { flex: 1; padding: .35rem .7rem; }
.wp-mail + .wp-passage { border-radius: 0 0 .5rem .5rem; }

/* Messenger bubbles for 문자 메시지 questions. */
.wp-chat { display: grid; gap: .45rem; max-width: 30rem; margin: 0 auto; }
.wp-chat-name {
    font-size: .78rem;
    color: var(--cn-ink);
    opacity: .65;
    margin: 0;
}
.wp-chat-name.wp-me { text-align: right; }
.wp-bubble {
    border: 1px solid var(--cn-border);
    border-radius: 1rem 1rem 1rem .25rem;
    padding: .55rem .85rem;
    justify-self: start;
    max-width: 88%;
    line-height: 1.7;
}
.wp-bubble.wp-me {
    border-radius: 1rem 1rem .25rem 1rem;
    justify-self: end;
    background: var(--cn-hl);
}

/* The ( ㉠ ) gap inside a passage. */
.wp-slot {
    background: var(--cn-hl);
    color: var(--cn-accent);
    font-weight: 700;
    border-radius: .3rem;
    padding: 0 .45rem;
    white-space: nowrap;
}

/* 54 essay-part labels (서론 / 본론 / 결론) in the scaffold + model answer. */
.wp-part {
    display: inline-block;
    background: var(--cn-hl);
    color: var(--cn-accent);
    font-weight: 700;
    font-size: .8rem;
    border-radius: 1rem;
    padding: .1rem .75rem;
    margin: .4rem 0 .3rem;
    font-family: var(--bs-body-font-family, sans-serif);
}

/* ㉠ / ㉡ labels on the step-2 sentence frames and the model answer. */
.wp-frame-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid var(--cn-accent);
    color: var(--cn-accent);
    font-weight: 700;
    font-size: .85rem;
    margin-right: .35rem;
    vertical-align: -4px;
}
.wp-alt {
    font-size: .88rem;
    color: var(--cn-ink);
    opacity: .75;
    margin: -.5rem 0 1rem 2rem;
    font-family: var(--bs-body-font-family, sans-serif);
}

/* ── The fill-in scaffold ──────────────────────────────────────────── */
.wp-paper { font-size: 1.05rem; }

/* A gap the student fills. With JS off it stays a dashed slot; corner.js
   swaps in an <input> and grades it. */
.wp-blank {
    display: inline-block;
    min-width: 5.5rem;
    border-bottom: 2px dashed var(--cn-accent);
    text-align: center;
    line-height: 1.3;
}
.wp-blank-input {
    border: none;
    border-bottom: 2px dashed var(--cn-accent);
    background: var(--cn-hl);
    border-radius: .3rem .3rem 0 0;
    text-align: center;
    font: inherit;
    color: var(--cn-ink);
    padding: 0 .3rem;
    max-width: 12rem;
}
.wp-blank-input:focus {
    outline: none;
    border-bottom-style: solid;
}
.wp-blank-input.wp-right {
    background: var(--cn-right-soft);
    border-bottom: 2px solid var(--cn-right);
    color: var(--cn-right);
    font-weight: 700;
}
.wp-blank-input.wp-wrong {
    background: var(--cn-wrong-soft);
    border-bottom: 2px solid var(--cn-wrong);
    color: var(--cn-wrong);
}

/* Check / reveal buttons only make sense with JS on. */
.wp-actions {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.cn-ready .wp-actions { display: flex; }
.wp-score { font-weight: 700; color: var(--cn-ink); }

/* ── Model-answer reveal ───────────────────────────────────────────── */
.wp-reveal > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    background: var(--cn-hl);
    color: var(--cn-accent);
    border: 1px solid var(--cn-border);
    border-radius: .6rem;
    padding: .55rem 1rem;
    font-weight: 700;
    transition: transform .12s ease;
}
.wp-reveal > summary::-webkit-details-marker { display: none; }
.wp-reveal > summary:hover { transform: translateY(-1px); }
.wp-reveal[open] > summary { border-radius: .6rem .6rem 0 0; }

.wp-tips {
    background: var(--cn-hl);
    border-left: 4px solid var(--cn-accent);
    border-radius: .6rem;
    padding: .75rem 1rem;
    color: var(--cn-ink);
    line-height: 1.65;
}
.wp-tips-title { font-weight: 700; color: var(--cn-accent); }
.wp-tips ul { margin: 0; padding-left: 1.1rem; }
.wp-tips li { margin-bottom: .25rem; }
.wp-tips li:last-child { margin-bottom: 0; }
.wp-tips p:last-child { margin-bottom: 0; }

/* ── Dark mode ─────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --cn-paper:  #1c1917;
        --cn-ink:    #e7e5e4;
        --cn-accent: #f59e0b;
        --cn-hl:     #78350f;
        --cn-border: #44403c;

        /* Deeper, translucent POS highlights so Hangul stays legible on paper. */
        --cn-verb:      #4ade80;  --cn-verb-hl: #14532d;
        --cn-adj:       #60a5fa;  --cn-adj-hl:  #1e3a8a;
        --cn-adv:       #c4b5fd;  --cn-adv-hl:  #4c1d95;

        --cn-right:      #4ade80;  --cn-right-soft: #052e1c;
        --cn-wrong:      #f87171;  --cn-wrong-soft: #3b0d0d;
    }
    .cn-card:hover,
    .cn-banner:hover { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5) !important; }
    .cn-word { color: var(--cn-ink); }
    .cn-pop {
        background: var(--cn-hl);
        color: var(--cn-ink);
    }
    .cn-pop::after { border-top-color: var(--cn-hl); }

    .cn-opt { background: #292524; }
    .cn-legend-item { color: var(--cn-ink); }

    :root {
        /* Dark-surface chart series (validated: L band 0.48–0.67, ≥3:1). */
        --wp-s1: #d97706;
        --wp-s2: #3b82f6;
    }
    .wp-exam { border-color: var(--cn-border); }
    .wp-exam-no { border-color: var(--cn-ink); }
}