/* ==========================================================================
   peshare ps2 — legacy content layer
   Loaded (after w3.css, indy-min.css, ps2.css) by /main/headerCommonCode.jsp,
   i.e. by every page that still uses the classic page skeleton:

     <body>
       topmenu                      -> new header (ps2_header.jsp)
       <div id="belowtopnav">
         <div id="leftmenu">        -> section sidebar
         <div class="w3-rest">
           <div class="w3-row">
             <div id="main">        -> content card
             <div id="right">       -> ad rail (logged-out only)
           <div class="footer">     -> legacy footer slot (ads only)
       topmenu_links                -> new footer + scripts

   Part 1 re-frames that skeleton, part 2 gives the content a modern
   typographic baseline, part 3 re-skins the w3.css components the content
   is written with.
   ========================================================================== */

/* ---------- 1. page frame ---------- */
body {
    margin: 0;
    font-family: var(--ps-font);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ps-ink);
    background: var(--ps-bg-soft);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: keep-all;
    overflow-wrap: break-word;
}

::selection { background: #bdf0cf; color: var(--ps-ink); }

:focus-visible { outline: 2px solid var(--ps-brand); outline-offset: 2px; }

#belowtopnav {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 0 32px;
    align-items: start;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 24px 80px;
    background: transparent !important;
}

#belowtopnav::before, #belowtopnav::after { display: none; }
#belowtopnav.ps-nosidebar { grid-template-columns: minmax(0, 1fr); max-width: 1120px; }
#belowtopnav.ps-nosidebar > #leftmenu { display: none; }

.ps-wide #belowtopnav, .ps-wide #belowtopnav.ps-nosidebar { max-width: none; }

#belowtopnav > .w3-rest { min-width: 0; overflow: visible; }

#belowtopnav > .w3-rest > .w3-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    background: transparent !important;
}

#belowtopnav > .w3-rest > .w3-row::before,
#belowtopnav > .w3-rest > .w3-row::after { display: none; }

#main {
    flex: 1 1 0;
    float: none;
    width: auto;
    min-width: 0;
    padding: clamp(20px, 3vw, 40px);
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-radius-lg);
    background: #fff;
    box-shadow: var(--ps-shadow-sm);
    overflow-x: auto;
}

/* right rail: only exists for the ad shown to logged-out visitors */
#right {
    flex: 0 0 180px;
    float: none;
    width: 180px;
    padding: 0 !important;
    text-align: center;
    position: sticky;
    top: calc(var(--ps-header-h) + 20px);
}

#right:not(:has(ins.adsbygoogle)) { display: none; }
#right br { display: none; }
#skyscraper, .sidesection { min-height: 0; margin: 0; }

/* legacy footer slot: the copyright lives in the new footer; only ads remain here */
#belowtopnav .footer { padding: 0; background: transparent !important; }
#belowtopnav .footer > hr, #belowtopnav .footer > br { display: none; }
.ps-legacy-copy { display: none; }

#ad-footer { z-index: 90; }
body:has(#ad-footer:not(.w3-hide)) .ps-footer { padding-bottom: 130px; }

/* section sidebar */
#leftmenu {
    position: sticky;
    top: calc(var(--ps-header-h) + 20px);
    float: none;
    width: auto;
    max-height: calc(100vh - var(--ps-header-h) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 4px 0 0;
    scrollbar-width: thin;
}

#leftmenuinner, #leftmenuinnerinner {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent !important;
    overflow: visible;
}

#leftmenu br, #leftmenu .w3-closebtn { display: none; }

#leftmenu h2.left, #leftmenu h2 {
    margin: 22px 12px 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
    color: var(--ps-ink-3);
}

#leftmenu h2:first-of-type { margin-top: 4px; }

#leftmenu a {
    display: block;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--ps-ink-2);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

#leftmenu a:hover { background: rgba(11, 19, 36, .055); color: var(--ps-ink); text-decoration: none; }

#leftmenu a.active {
    background: var(--ps-brand-soft);
    color: var(--ps-brand-strong);
    font-weight: 700;
}

#leftmenu ul { margin: 0; padding: 0 0 0 12px; list-style: none; line-height: inherit; }
#leftmenu li { line-height: inherit; }
#leftmenu .w3-hide a, #leftmenu ul a { font-size: 14.5px; }

.ps-sidebar-bar, .ps-sidebar-backdrop, .ps-sidebar-close { display: none; }

/* ---------- 2. content baseline ---------- */
#main { font-size: 16.5px; line-height: 1.75; }

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
    font-family: inherit;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.35;
    color: var(--ps-ink);
    text-wrap: balance;
}

#main h1 { margin: 0 0 18px; font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.035em; }
#main h2 { margin: 34px 0 14px; font-size: clamp(22px, 2.4vw, 27px); font-weight: 800; }
#main h3 { margin: 26px 0 12px; font-size: clamp(19px, 2vw, 22px); }
#main h4 { margin: 22px 0 10px; font-size: 18px; }
#main h5, #main h6 { margin: 18px 0 8px; font-size: 16.5px; }
#main > :first-child, #main > form:first-child > :first-child { margin-top: 0; }

#main p { margin: 0 0 14px; }
#main b, #main strong { font-weight: 700; }
#main a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
#main a:hover { color: var(--ps-brand-strong); }
#main img { max-width: 100%; height: auto; margin-bottom: 0; }
#main iframe { max-width: 100%; border-radius: 14px; }
#main hr { margin: 28px 0; border: 0; border-top: 1px solid var(--ps-line); }
#main ul, #main ol { padding-left: 1.3em; line-height: 1.75; }
#main li { line-height: 1.75; }
#main li + li { margin-top: 4px; }
#main blockquote { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--ps-brand-bright); color: var(--ps-ink-2); }
#main code { padding: 2px 6px; border-radius: 6px; background: var(--ps-bg-soft); color: #be123c; font-size: .92em; }
#main label { font-weight: 500; }
#main small { color: var(--ps-ink-3); }

#main input[type=text], #main input[type=password], #main input[type=email], #main input[type=number],
#main input[type=search], #main input[type=url], #main input[type=date], #main select, #main textarea {
    max-width: 100%;
    padding: 9px 13px;
    border: 1.5px solid var(--ps-line-strong);
    border-radius: 12px;
    background-color: #fff;
    color: var(--ps-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    outline: 0;
    transition: border-color .15s, box-shadow .15s;
}

#main input[type=search] { box-sizing: border-box; -webkit-appearance: none; appearance: none; }

#main input:focus, #main select:focus, #main textarea:focus {
    border-color: var(--ps-brand) !important;
    box-shadow: 0 0 0 4px rgba(14, 138, 67, .14);
}

#main input:disabled, #main textarea:disabled, #main select:disabled { background-color: var(--ps-bg-soft); color: var(--ps-ink-3); }
#main input[type=radio], #main input[type=checkbox] { accent-color: var(--ps-brand); }
#main input[type=file] { font-family: inherit; font-size: 14.5px; }

#main input[type=submit], #main input[type=button], #main input[type=reset],
#main button:not([class]) {
    padding: 8px 18px;
    border: 1px solid var(--ps-line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--ps-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

#main input[type=submit]:hover, #main input[type=button]:hover, #main button:not([class]):hover { border-color: var(--ps-ink); }

#main table { border-collapse: collapse; max-width: 100%; }

/* fonts the old pages asked for by class */
.batang-kp, .indy-volk, .nanum-gothic, .notosans-kr { font-family: var(--ps-font) !important; font-size: inherit; }
.indy-text-en { font-family: var(--ps-font); word-break: normal; }

.indy-a-no, .indy-a-no-black, .indy-a-no-nohover { text-decoration: none !important; }
.indy-a-no:hover { color: var(--ps-brand-strong); text-decoration: none; }

/* ---------- 3. w3.css components, re-skinned ---------- */

/* palette */
.w3-theme { color: #fff !important; background-color: var(--ps-brand) !important; }
.w3-theme-border { border-color: var(--ps-brand) !important; }

.w3-red, .w3-hover-red:hover { background-color: #e5484d !important; }
.w3-pink, .w3-hover-pink:hover { background-color: #db2777 !important; }
.w3-purple, .w3-hover-purple:hover { background-color: #7c3aed !important; }
.w3-deep-purple, .w3-hover-deep-purple:hover { background-color: #5b21b6 !important; }
.w3-indigo, .w3-hover-indigo:hover { background-color: #4338ca !important; }
.w3-blue, .w3-hover-blue:hover { background-color: #2563eb !important; }
.w3-teal, .w3-hover-teal:hover { background-color: #0d9488 !important; }
.w3-green, .w3-hover-green:hover { background-color: #16a34a !important; }
.w3-lime, .w3-hover-lime:hover { background-color: #d9f99d !important; color: #1a2e05 !important; }
.w3-yellow, .w3-hover-yellow:hover { background-color: var(--ps-mark) !important; color: var(--ps-ink) !important; }
.w3-amber, .w3-hover-amber:hover { background-color: #fbbf24 !important; color: #1f1300 !important; }
.w3-orange, .w3-hover-orange:hover { background-color: #f97316 !important; color: #fff !important; }
.w3-deep-orange, .w3-hover-deep-orange:hover { background-color: #ea580c !important; }
.w3-brown, .w3-hover-brown:hover { background-color: #92400e !important; }
.w3-blue-grey, .w3-hover-blue-grey:hover { background-color: #475569 !important; }
.w3-grey, .w3-hover-grey:hover { background-color: #94a3b8 !important; color: #0b1324 !important; }
.w3-dark-grey, .w3-hover-dark-grey:hover { background-color: #334155 !important; }
.w3-black, .w3-hover-black:hover { background-color: var(--ps-ink) !important; }
.w3-light-grey, .w3-hover-light-grey:hover { background-color: #f1f4f7 !important; color: var(--ps-ink) !important; }
.w3-sand { background-color: #fbf6ec !important; }
.w3-khaki { background-color: #f3e9b8 !important; }
.w3-pale-red, .w3-hover-pale-red:hover { background-color: #ffeceb !important; color: var(--ps-ink) !important; }
.w3-pale-yellow, .w3-hover-pale-yellow:hover { background-color: #fff8db !important; color: var(--ps-ink) !important; }
.w3-pale-green, .w3-hover-pale-green:hover { background-color: #e8f7ee !important; color: var(--ps-ink) !important; }
.w3-pale-blue, .w3-hover-pale-blue:hover { background-color: #e8f1ff !important; color: var(--ps-ink) !important; }

.w3-text-red { color: #dc2626 !important; }
.w3-text-blue { color: #2563eb !important; }
.w3-text-green { color: #15803d !important; }
.w3-text-teal { color: #0f766e !important; }
.w3-text-pink { color: #db2777 !important; }
.w3-text-purple { color: #7c3aed !important; }
.w3-text-grey { color: var(--ps-ink-3) !important; }

.w3-border { border-color: var(--ps-line-strong) !important; }
.w3-border-red { border-color: #e5484d !important; }
.w3-border-blue { border-color: #2563eb !important; }
.w3-border-green { border-color: #16a34a !important; }
.w3-border-teal { border-color: #0d9488 !important; }
.w3-border-pink { border-color: #db2777 !important; }
.w3-border-purple { border-color: #7c3aed !important; }
.w3-border-yellow { border-color: #facc15 !important; }
.w3-border-black { border-color: var(--ps-ink) !important; }
.w3-border-grey { border-color: #94a3b8 !important; }
.w3-border-light-grey { border-color: var(--ps-line) !important; }
.w3-border-blue-grey { border-color: #cbd5e1 !important; }

/* shape */
.w3-round-small { border-radius: 6px !important; }
.w3-round, .w3-round-medium { border-radius: 10px !important; }
.w3-round-large { border-radius: 14px !important; }
.w3-round-xlarge { border-radius: 20px !important; }
.w3-round-xxlarge, .w3-round-jumbo { border-radius: 999px !important; }

.w3-card, .w3-card-2 { box-shadow: 0 1px 2px rgba(11, 19, 36, .06), 0 0 0 1px rgba(11, 19, 36, .06) !important; border-radius: 16px; }
.w3-card-4 { box-shadow: var(--ps-shadow), 0 0 0 1px rgba(11, 19, 36, .05) !important; border-radius: 18px; }
.w3-card-8, .w3-card-12, .w3-card-16, .w3-card-24 { box-shadow: var(--ps-shadow-lg) !important; border-radius: 20px; }

/* buttons */
button.w3-btn, a.w3-btn, input.w3-btn, span.w3-btn, .w3-btn-block { font-family: inherit; }

.w3-btn, .w3-btn-block {
    border-radius: 10px;
    background-color: var(--ps-ink);
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.5;
    box-shadow: none;
    transition: transform .15s var(--ps-ease), box-shadow .2s, filter .2s, background-color .2s, color .2s;
}

.w3-btn:hover, .w3-btn-block:hover { box-shadow: 0 8px 18px -8px rgba(11, 19, 36, .35); filter: brightness(.97); }
.w3-btn:active, .w3-btn-block:active { transform: scale(.97); }
.w3-btn:disabled, .w3-btn.w3-disabled { opacity: .45; box-shadow: none; }
.w3-btn.w3-padding-small { padding: 6px 14px !important; }
.w3-btn.w3-padding-tiny { padding: 4px 11px !important; }
.w3-btn.w3-white, .w3-btn.w3-light-grey { color: var(--ps-ink) !important; }
.w3-btn-block { padding: 11px 16px; }
i.w3-btn { border-radius: 999px; }

.w3-closebtn { cursor: pointer; font-weight: 400; line-height: 1; transition: color .15s; }
.w3-closebtn:hover { color: var(--ps-red); }

/* tags & badges */
.w3-tag { border-radius: 8px; padding: 1px 9px; font-weight: 600; font-size: .92em; }
.w3-badge { min-width: 1.7em; padding: 0 .45em; font-weight: 700; font-size: .85em; line-height: 1.7em; }

/* form controls */
.w3-input {
    padding: 10px 14px !important;
    border: 1.5px solid var(--ps-line-strong);
    border-radius: 12px;
    background-color: #fff !important;
    color: var(--ps-ink) !important;
    font-family: inherit;
}

.w3-select { padding: 9px 13px; border: 1.5px solid var(--ps-line-strong); border-radius: 12px; background-color: #fff; }

.w3-check, input[type=radio].w3-radio { width: 20px; height: 20px; top: 4px; accent-color: var(--ps-brand); }
.w3-validate, .w3-radio:checked + .w3-validate, .w3-check:checked + .w3-validate,
input[type=radio].w3-radio:checked + .w3-validate { color: inherit; }
input[type=radio].w3-radio:checked + .w3-validate, .w3-check:checked + .w3-validate { font-weight: 600; }

/* tables */
.w3-table, .w3-table-all {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ps-line) !important;
    border-radius: 14px;
    font-size: 15px;
    overflow: hidden;
    box-shadow: none !important;
}

.w3-table th, .w3-table-all th {
    padding: 11px 14px !important;
    background: var(--ps-bg-soft);
    color: var(--ps-ink-2);
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.w3-table td, .w3-table-all td { padding: 11px 14px !important; border-top: 1px solid var(--ps-line); vertical-align: middle; }
.w3-table tr:first-child td, .w3-table-all tr:first-child td { border-top: 0; }
.w3-table thead + tbody tr:first-child td, .w3-table tr + tr td { border-top: 1px solid var(--ps-line); }
.w3-bordered tr, .w3-table-all tr { border-bottom: 0; }
.w3-striped tbody tr:nth-child(even), .w3-table-all tr:nth-child(odd) { background-color: transparent; }
.w3-striped tbody tr:nth-child(even) td, .w3-table-all tbody tr:nth-child(even) td { background-color: #fafbfc; }
/* 색이 있는 머리줄 (tr.w3-blue, tr.w3-blue-grey ...): 줄의 색을 그대로 보여 주고 글자는 흰색.
   (머리 칸의 밝은 바탕이 줄의 색을 덮어서, 흰 글씨 링크가 보이지 않던 것을 고친다: /book/, /writing/ 목록) */
.w3-table tr.w3-green th, .w3-table tr.w3-blue th, .w3-table tr.w3-teal th, .w3-table tr.w3-red th, .w3-table tr.w3-black th,
.w3-table tr.w3-blue-grey th, .w3-table tr.w3-dark-grey th, .w3-table tr.w3-indigo th, .w3-table tr.w3-purple th, .w3-table tr.w3-deep-purple th,
.w3-table tr.w3-pink th, .w3-table tr.w3-brown th, .w3-table tr.w3-deep-orange th, .w3-table tr.w3-orange th,
.w3-table-all tr.w3-green th, .w3-table-all tr.w3-blue th, .w3-table-all tr.w3-teal th, .w3-table-all tr.w3-red th, .w3-table-all tr.w3-black th,
.w3-table-all tr.w3-blue-grey th, .w3-table-all tr.w3-dark-grey th, .w3-table-all tr.w3-indigo th {
    background: transparent;
    color: #fff;
}
/* 머리 칸 안의 링크는 그 칸의 글자색을 따른다 (밝은 머리줄에서는 진한 글씨, 색 있는 머리줄에서는 흰 글씨) */
.w3-table th a, .w3-table-all th a { color: inherit !important; }
.w3-table th a:hover, .w3-table-all th a:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.w3-hoverable tbody tr:hover td { background-color: var(--ps-brand-soft); }

/* lists, pagination, panels */
.w3-ul li { padding: 10px 14px; border-bottom: 1px solid var(--ps-line); }

.w3-pagination { display: inline-flex; gap: 4px; padding: 0 !important; border: 0 !important; }
.w3-pagination li { display: block; margin: 0 !important; }
.w3-pagination li a {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ps-line-strong) !important;
    border-radius: 12px;
    background: #fff;
    color: var(--ps-ink-2);
    font-weight: 600;
    text-decoration: none;
}

.w3-pagination li a:hover { border-color: var(--ps-ink) !important; background-color: #fff !important; color: var(--ps-ink) !important; }

.w3-panel { border-radius: 14px; }
.w3-leftbar { border-left-width: 4px !important; border-radius: 0 12px 12px 0; }

.w3-code, .w3-example {
    margin: 16px 0;
    padding: 14px 18px;
    border: 0;
    border-left: 4px solid var(--ps-brand-bright) !important;
    border-radius: 0 14px 14px 0;
    background: #f6f9f7;
    box-shadow: none;
    font-family: var(--ps-font);
    font-size: 1em;
    line-height: 1.75;
    word-break: normal;
}

/* legacy modals */
.w3-modal {
    z-index: 300;
    padding: 6vh 16px 24px;
    background-color: rgba(11, 19, 36, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.w3-modal-content { border-radius: 24px; overflow: hidden; box-shadow: var(--ps-shadow-lg) !important; }
.w3-tooltip .w3-text { border-radius: 8px; }
.w3-dropdown-content, .w3-dropnav { border-radius: 14px; box-shadow: var(--ps-shadow-lg); overflow: hidden; }

/* ---------- 4. shared content pieces ---------- */

/* page title: most pages open their content with an <h3> */
#main > h3:first-of-type, #main > form:first-child > h3:first-child,
#main > div:first-child > h3:first-child, #main > h1:first-child {
    margin: 0 0 6px;
    font-size: clamp(24px, 2.7vw, 31px);
    font-weight: 800;
    letter-spacing: -0.035em;
}

#main > h3:first-child + br, #main > form:first-child > h3:first-child + br { display: none; }

/* answer options: radio + label pairs wrapped by ps2-legacy.js */
#main .ps-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 760px;
    margin: 8px 0 0;
    padding: 11px 14px;
    border: 1.5px solid var(--ps-line);
    border-radius: 14px;
    background: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

#main .ps-opt:hover { border-color: var(--ps-line-strong); background: var(--ps-bg-soft); }
#main .ps-opt input[type=radio] { position: absolute; top: auto; width: 1px; height: 1px; opacity: 0; }

#main .ps-opt__key {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--ps-bg-soft);
    color: var(--ps-ink-3);
    font-size: 13px;
    font-weight: 700;
    transition: background-color .15s, color .15s;
}

#main .ps-opt__text { min-width: 0; padding-top: 1px; }

#main .ps-opt:has(input:checked) {
    border-color: var(--ps-brand);
    background: var(--ps-brand-soft);
    box-shadow: 0 0 0 3px rgba(14, 138, 67, .10);
}

#main .ps-opt:has(input:checked) .ps-opt__key { background: var(--ps-brand); color: #fff; }
#main .ps-opt:has(input:focus-visible) { outline: 2px solid var(--ps-brand); outline-offset: 2px; }

/* answer feedback (check_answer.jsp, get_spell_answer.jsp) */
.correctAnsw-input[type=text] { border: 1.5px solid #16a34a !important; background: var(--ps-brand-soft) !important; }
.wrongAnsw-input[type=text] { border: 1.5px solid #e5484d !important; background: #ffeceb !important; }
.w3-btn.w3-border-green.w3-white { border: 0 !important; background: var(--ps-brand-soft) !important; color: var(--ps-brand-strong) !important; cursor: default; }
#main .w3-animate-bottom > b { color: #dc2626; }

/* ---------- 5. 수능 ---------- */
div[id^="qn"] { scroll-margin-top: calc(var(--ps-header-h) + 16px); }

/* instruction bar: "20. 다음 글에서 …" */
div[id^="qn"] > div:first-child > .w3-theme,
#whole_page .w3-container.w3-theme {
    margin-bottom: 16px;
    padding: 13px 18px !important;
    border-left: 4px solid var(--ps-brand);
    border-radius: 0 14px 14px 0 !important;
    background-color: var(--ps-brand-soft) !important;
    color: var(--ps-ink) !important;
    box-shadow: none !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}

#whole_page .w3-container.w3-theme :is(h2, h3, h4) {
    margin: 0;
    color: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

#whole_page > .w3-card-4 { padding: 4px 0 8px; box-shadow: none !important; }
#whole_page > .w3-card-4 > .w3-container:not(.w3-theme) { padding: 0 2px; }

div[id^="qn"] > .w3-center img { margin: 2px 0 14px; border-radius: 16px; }

/* the passage */
div[id^="qn"] > .w3-text-theme > p,
#whole_page .w3-text-theme p {
    font-size: 17px;
    line-height: 1.9;
    word-break: normal;
}

div[id^="qn"] > p:empty, div[id^="qn"] > p:last-child { margin: 0; }
form[name="mkform_01"] > div[id^="qn"] { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px dashed var(--ps-line); }
form[name="mkform_01"] > div[id^="qn"]:last-of-type { border-bottom: 0; }

/* answer row */
span[id^="qAnda"] > input[type=text] { width: 64px; height: 40px; padding: 0 !important; text-align: center; font-weight: 700; }
span[id^="qAnda"] .w3-btn { margin: 0 2px; vertical-align: middle; }
div[id^="scpt_txt"] { padding: 14px 18px; background: var(--ps-bg-soft); font-size: 15.5px; word-break: normal; }

/* 해설 · 출처 · 번역 · 퀴즈 · 음성 */
div[id^="qn"] > .w3-btn { margin: 4px 2px 0 0; vertical-align: middle; }
.exptabs { margin-top: 14px; }
.exptabs .w3-container { padding: 16px 20px; border-color: #eadfa8 !important; box-shadow: none !important; }
.exptabs p.w3-pale-green { padding: 14px 18px !important; border-color: #bfe5cc !important; line-height: 1.8; }

/* 1 … 45 and same-type navigation */
#main a.w3-btn.w3-padding-tiny { min-width: 38px; margin: 0 1px 6px 0; text-align: center; }
#main p.w3-yellow.w3-bottombar {
    margin: 26px 0 10px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ps-ink-3) !important;
    font-size: 14px;
}

.ps-satlist__title { margin: 26px 0 10px !important; color: var(--ps-ink-3); font-size: 14px; font-weight: 700; }
.ps-satlist__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }

.ps-satlist__grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 46px;
    border: 1px solid var(--ps-line);
    border-radius: 12px;
    background: #fff;
    color: var(--ps-ink-2);
    font-size: 14.5px;
    text-decoration: none;
    transition: border-color .15s, background-color .15s, color .15s;
}

.ps-satlist__grid a b { color: var(--ps-ink); font-variant-numeric: tabular-nums; }
.ps-satlist__grid a:hover { border-color: var(--ps-brand); background: var(--ps-brand-soft); color: var(--ps-brand-strong); }
.ps-satlist__grid a:hover b { color: inherit; }

/* start-from picker on the year index */
#stn { position: relative; padding: 6px 14px; }
#stn p { margin: 6px 0; }

/* listening play / pause */
i.fa.w3-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0 !important; font-size: 13px !important; }

/* ---------- 6. 문법 ---------- */
#epln_closebtn h1 { font-size: clamp(26px, 3vw, 34px); }
.w3-example { padding: 18px 22px; }
.w3-example > h3:first-child { margin-top: 0 !important; }
.w3-example .w3-code { background: #fff; }
#main .w3-code h5 { margin: 6px 0; font-size: 16.5px; font-weight: 600; }
#main .w3-container.w3-border.w3-card-4 { padding: 22px 24px !important; border: 1px solid var(--ps-line) !important; box-shadow: var(--ps-shadow-sm) !important; }
#main .w3-tag.w3-rightbar { padding: 3px 12px; border-right-width: 0 !important; border-radius: 8px; font-size: 14px; }
.fb-share-button, #kakao-link-btn { display: inline-block; vertical-align: middle; margin: 10px 4px 10px 0; }
#kakao-link-btn img { width: 28px; border-radius: 8px; }
#leftmenu a[href="#"] { color: #a3acb9; pointer-events: none; }

/* 한마디 카드 (/saying/mainCards.jsp): float columns -> even grid */
#main .w3-row-padding:has(> .w3-third > [class*="w3-card"]) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    margin: 0 !important;
    padding: 0;
}

#main .w3-row-padding:has(> .w3-third > [class*="w3-card"])::before,
#main .w3-row-padding:has(> .w3-third > [class*="w3-card"])::after { display: none; }

#main .w3-row-padding:has(> .w3-third > [class*="w3-card"]) > .w3-third {
    display: flex;
    flex-direction: column;
    float: none;
    width: auto;
    margin: 0 !important;
    padding: 0;
}

ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

#main .w3-third > .w3-card-16 {
    flex: 1;
    padding: 18px 2px !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--ps-shadow-sm) !important;
    overflow: hidden;
    transition: transform .25s var(--ps-ease), box-shadow .25s;
}

#main .w3-third > .w3-card-16:hover { transform: translateY(-3px); box-shadow: var(--ps-shadow) !important; }
#main .w3-third > .w3-card-16.w3-yellow { background-color: #fff9e3 !important; }
#main .w3-third > .w3-card-16 h4 { margin: 0 0 4px; font-size: 17px; }
#main .w3-third > .w3-card-16 h4 + p { margin: 0 0 12px; color: var(--ps-ink-3); font-size: 13px; font-weight: 600 !important; }
#main .w3-third > .w3-card-16 img { border-radius: 12px; }
#main .w3-third > .w3-card-16 iframe { height: 200px; }

/* Daily Quiz difficulty pills (built by ps2-legacy.js) */
#main .ps-quiz__levels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; color: var(--ps-ink-3); font-size: 14px; clear: both; }

#main .ps-seg {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--ps-line-strong);
    border-radius: 999px;
    color: var(--ps-ink-2);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

#main .ps-seg:hover { border-color: var(--ps-ink-3); }
#main .ps-seg input { position: absolute; top: auto; width: 1px; height: 1px; opacity: 0; }
#main .ps-seg:has(input:checked) { border-color: var(--ps-ink); background: var(--ps-ink); color: #fff; }
form[name="mkform_01"] #input_answer { max-width: 520px; height: 50px; }
form[name="mkform_01"] > .w3-right { color: var(--ps-ink-3); font-size: 14px; }

/* ---------- account pages without the site header (/main/crtUser.jsp, signin_forgot.jsp …) ---------- */
.ps-authtop { display: flex; justify-content: center; padding: 44px 16px 6px; }
.ps-authtop .ps-logo { text-decoration: none; }
.ps-authtop .ps-logo__text { font-size: 26px; }
.ps-authtop + .w3-wide { margin-bottom: 8px; color: var(--ps-ink-3); font-size: 14.5px; letter-spacing: 0; }

.indy-signin {
    width: min(480px, calc(100% - 32px)) !important;
    margin: 20px auto 28px;
    padding: 14px 10px 22px;
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-radius-lg);
    background: #fff;
    box-shadow: var(--ps-shadow) !important;
}

.indy-signin h1 { margin: 6px 0 20px; font-family: inherit; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.indy-signin label b { color: var(--ps-ink-2); font-size: 13.5px; font-weight: 600; }
.indy-signin .w3-input { height: 50px; margin: 6px 0 14px !important; }
.indy-signin .w3-btn-block { height: 52px; margin-top: 8px; border: 0 !important; border-radius: 999px !important; font-size: 16px; }
.indy-signin .w3-btn-block.w3-light-grey { background-color: var(--ps-ink) !important; color: #fff !important; }
.indy-signin .w3-btn-block.w3-green { background-color: var(--ps-brand) !important; }
.indy-signin p { color: var(--ps-ink-3); font-size: 13.5px; line-height: 1.6; }
.indy-signin form > a img { border-radius: 8px; }
.indy-signin + div[style] { color: var(--ps-ink-3); }

/* ---------- 7. 메시지 목록 (/msg/browse.jsp) ---------- */
.ps-msgbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 18px 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--ps-line);
    border-radius: 14px;
    background: var(--ps-bg-soft);
}

.ps-msgbar__info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15px; font-weight: 600; }
.ps-msgbar__info b { margin-left: 4px; padding: 1px 9px; border-radius: 999px; background: var(--ps-brand); color: #fff; font-size: 12.5px; }
#main .ps-msgbar__info a { color: var(--ps-brand-strong); font-size: 14px; }
.ps-msgbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-msgbar__btn { background-color: var(--ps-brand) !important; color: #fff !important; }
.ps-msgbar__btn--sub { border: 1px solid var(--ps-line-strong) !important; background-color: #fff !important; color: var(--ps-ink) !important; }
.ps-msgbar input[type=checkbox], .ps-msgtable input[type=checkbox] { width: 18px; height: 18px; vertical-align: middle; cursor: pointer; }
.ps-msglist { margin-top: 12px; }
.ps-msgtable__chk { width: 44px; text-align: center !important; }
.ps-msgtable__no { width: 56px; color: var(--ps-ink-3); font-variant-numeric: tabular-nums; }
.ps-msgtable__empty { padding: 36px 14px !important; color: var(--ps-ink-3); text-align: center; }
.ps-msgtable tr.is-new td { background: #f3fbf6; }
.ps-msgtable tr.is-new td a { font-weight: 700; }
.ps-msgtable td a { display: block; }

.ps-msgstate {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ps-bg-soft);
    color: var(--ps-ink-3);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.ps-msgstate.is-new { background: var(--ps-brand); color: #fff; }
.ps-msgstate.is-wait { background: #fff4d6; color: #8a6100; }

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
    #belowtopnav > .w3-rest > .w3-row { flex-direction: column; align-items: stretch; }
    #main { flex: none; }
    #right { position: static; flex: none; width: auto; }
}

@media (max-width: 1023px) {
    #belowtopnav { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 64px; }

    /* the section sidebar turns into a slide-in panel opened from .ps-sidebar-bar */
    #leftmenu {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 210;
        width: min(320px, 86vw);
        max-height: none;
        padding: 64px 16px 24px;
        background: #fff;
        box-shadow: var(--ps-shadow-lg);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .34s var(--ps-ease), visibility 0s .34s;
    }

    #leftmenu.is-open { transform: none; visibility: visible; transition: transform .34s var(--ps-ease), visibility 0s; }

    .ps-sidebar-close {
        position: absolute;
        top: 14px;
        right: 14px;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: var(--ps-bg-soft);
        color: var(--ps-ink-2);
        cursor: pointer;
    }

    .ps-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 205;
        background: rgba(11, 19, 36, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s, visibility 0s .3s;
    }

    .ps-sidebar-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }

    .ps-sidebar-bar {
        display: block;
        position: sticky;
        top: var(--ps-header-h);
        z-index: 80;
        padding: 8px 16px;
        border-bottom: 1px solid var(--ps-line);
        background: rgba(255, 255, 255, .9);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .ps-sidebar-bar button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        padding: 0 14px 0 10px;
        border: 1px solid var(--ps-line-strong);
        border-radius: 999px;
        background: #fff;
        color: var(--ps-ink);
        font-family: inherit;
        font-size: 14.5px;
        font-weight: 600;
        cursor: pointer;
    }

    .ps-sidebar-bar .ps-i { width: 16px; height: 16px; }
}

@media (max-width: 639px) {
    #belowtopnav { padding: 12px 12px 56px; }
    #main { padding: 20px 16px; border-radius: 20px; font-size: 16px; }
    .w3-modal { padding-top: 16px; }
}

@media print {
    .ps-header, .ps-footer, .ps-drawer, .ps-modal, .ps-sidebar-bar, #leftmenu, #right, #ad-footer { display: none !important; }
    body { background: #fff; }
    #belowtopnav { display: block; padding: 0; }
    #main { border: 0; box-shadow: none; padding: 0; }
}

/* ───────── AI 실력 진단으로 가는 안내 (수능 · 문법 · 작문 화면, /skill/template/cta.jsp) ───────── */
.sk-cta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 22px 0; padding: 16px 20px; border: 1px solid var(--ps-line); border-radius: 18px;
    background: radial-gradient(300px 120px at 100% 0%, rgba(34, 197, 94, .16), transparent 70%), #fff;
}
.sk-cta b { color: var(--ps-ink); font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.sk-cta span { color: var(--ps-ink-2); font-size: 14px; }
#main a.sk-cta__btn {
    display: inline-flex; align-items: center; height: 38px; margin-left: auto; padding: 0 16px; border-radius: 999px; background: var(--ps-ink);
    color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
#main a.sk-cta__btn:hover { background: #1c2740; color: #fff; }
@media (max-width: 640px) {
    .sk-cta { padding: 14px 16px; }
    #main a.sk-cta__btn { margin-left: 0; }
}

/* ───────── AI Feedback (수능 문제 화면의 버튼과 펼쳐지는 피드백, /skill/feedback.jsp) ───────── */
#main button.sk-fbbtn {
    display: inline-flex; align-items: center; height: 36px; margin: 0 0 6px 4px; padding: 0 16px; border: 0; border-radius: 999px;
    background: linear-gradient(135deg, #0b1324 0%, #0e8a43 100%); color: #fff; font: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em;
    cursor: pointer; vertical-align: middle; box-shadow: 0 8px 18px -10px rgba(14, 138, 67, .8); transition: transform .2s var(--ps-ease), filter .2s;
}
#main button.sk-fbbtn:hover { filter: brightness(1.12); }
#main button.sk-fbbtn:active { transform: scale(.97); }
#main .skf { margin: 16px 0 8px; padding: 18px 20px; border: 1px solid var(--ps-line); border-radius: 20px; background: #fff; box-shadow: var(--ps-shadow-sm); color: var(--ps-ink-2); font-size: 15px; line-height: 1.75; text-align: left; }
#main .skf p { margin: 0 0 6px; }
#main .skf h5 { margin: 0 0 6px; color: var(--ps-ink); font-size: 15.5px; font-weight: 800; }
#main .skf h5 small, #main .skf summary small { margin-left: 8px; color: var(--ps-ink-3); font-size: 12.5px; font-weight: 500; }
#main .skf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 12px; }
#main .skf-head > b { margin-right: 4px; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, #0b1324, #0e8a43); color: #fff; font-size: 13px; }
#main .skf-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--ps-bg-soft); color: var(--ps-ink-2); font-size: 12.5px; font-weight: 700; }
#main .skf-chip.is-ok { background: var(--ps-brand-soft); color: var(--ps-brand-strong); }
#main .skf-chip.is-no { background: #fdecec; color: #c0353a; }
#main .skf-box { margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: var(--ps-bg-soft); }
#main .skf-box.is-ok { background: var(--ps-brand-soft); }
#main .skf-box.is-no { background: #fdecec; }
#main .skf .en { color: var(--ps-ink); font-weight: 600; }
#main .skf-me { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
#main .skf-me li { margin: 0; padding: 8px 12px; border-radius: 12px; background: #fff; line-height: 1.65; }
#main .skf-steps { margin: 6px 0 0; padding-left: 1.3em; }
#main .skf-steps li { margin: 2px 0; line-height: 1.65; }
#main .skf-more { margin-top: 10px; padding: 0 16px; border: 1px solid var(--ps-line); border-radius: 16px; }
#main .skf-more > summary { padding: 12px 0; color: var(--ps-ink); font-weight: 800; cursor: pointer; }
#main .skf-more[open] { padding-bottom: 12px; }
#main .skf-sent { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--ps-line); }
#main .skf-sent > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--ps-bg-soft); font-size: 12px; font-weight: 800; }
#main .skf-sent.is-key > span { background: var(--ps-brand); color: #fff; }
#main .skf em { padding: 1px 8px; border-radius: 999px; background: var(--ps-brand-soft); color: var(--ps-brand-strong); font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
#main .skf .skf-note { color: var(--ps-ink-3); font-size: 13.5px; }
#main .skf-voc > div { display: grid; grid-template-columns: minmax(100px, 170px) minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--ps-line); }
#main .skf-voc b { color: var(--ps-ink); }
#main .skf-voc .is-above b { color: #c0353a; }
#main .skf-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
#main .skf-links a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--ps-line-strong); border-radius: 999px; color: var(--ps-ink); font-size: 13.5px; font-weight: 700; text-decoration: none; }
#main .skf-links a.is-main { border-color: transparent; background: var(--ps-brand); color: #fff; }
#main .skf-wait { display: flex; align-items: center; gap: 10px; margin: 0; }
#main .skf-wait i { flex: none; width: 18px; height: 18px; border: 2px solid var(--ps-line); border-top-color: var(--ps-brand); border-radius: 50%; animation: skf-spin .8s linear infinite; }
@keyframes skf-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
    #main .skf { padding: 14px; }
    #main .skf-voc > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ───────── 옆에서 열리는 참고 패널 (.sidenavgra) ─────────
   왕초보 영문법의 "참고: 1~5형식 버려라", Quiz · 단어의 문제 보기에서 쓴다.
   예전에는 화면 맨 위(top: 0, z-index: 2)에서 시작해서 닫기 단추(×)가 사이트 머리 밑에 깔려 닫을 수 없었다.
   이제 머리보다 위에 뜨고, 닫기 단추는 패널 안에서 늘 보인다. Esc 나 바깥을 눌러도 닫힌다 (js/ps2-legacy.js). */
.sidenavgra { z-index: 270; top: 0; height: 100vh; height: 100dvh; padding: 0 0 60px; background-color: #fff; color: var(--ps-ink); transition: width .38s var(--ps-ease); overscroll-behavior: contain; font-size: 16.5px; line-height: 1.85; }
.sidenavgra[style*="width"]:not([style*="width: 0"]) { border-radius: 0 28px 28px 0; box-shadow: 0 0 0 100vmax rgba(11, 19, 36, .45), var(--ps-shadow-lg); }
.sidenavgra a.closebtngra { position: sticky; top: 14px; right: auto; z-index: 5; float: right; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 14px 18px 0 0; padding: 0; border-radius: 50%; background: var(--ps-bg-soft); color: var(--ps-ink); font-size: 26px !important; line-height: 1; text-decoration: none; transition: background .2s, color .2s; }
.sidenavgra a.closebtngra:hover { background: var(--ps-ink); color: #fff; }
.sidenavgra > .w3-responsive { clear: both; padding-top: 6px; }
.sidenavgra h1 { margin: 0 0 20px; font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.3; }
.sidenavgra p { margin: 0 0 16px; }
.sidenavgra .w3-table { margin: 6px 0 18px; border: 1px solid var(--ps-line); border-radius: 16px; overflow: hidden; box-shadow: none !important; }
.sidenavgra .w3-table tr.w3-blue { background-color: var(--ps-night) !important; color: #fff !important; }
.sidenavgra .w3-table th, .sidenavgra .w3-table td { padding: 12px 16px; border-bottom: 1px solid var(--ps-line); }
.sidenavgra .w3-table tr:last-child td { border-bottom: 0; }
#main .pa button.w3-btn-block.w3-amber { display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 20px; border: 1px solid #f3d27a; border-radius: 18px; background: #fff8e1 !important; color: #5c4200 !important; font-size: 16.5px; font-weight: 800; text-align: left; box-shadow: none; cursor: pointer; transition: transform .2s var(--ps-ease), border-color .2s; }
#main .pa button.w3-btn-block.w3-amber:hover { transform: translateY(-2px); border-color: #e0a800; }
#main .pa button.w3-btn-block.w3-amber .fa-external-link { margin-left: auto; }

/* 소설 읽기 화면 아래의 책 표지 (아마존 링크): 너무 크게 나오지 않게 */
#belowtopnav .footer .bottomad a > img { max-width: 132px; height: auto; border-radius: 10px; box-shadow: var(--ps-shadow); }

/* ───────── 문법 연습 창 (.gramnav: 문법 개론의 [연습] 단추) ─────────
   닫기 단추(×)가 사이트 머리 밑에 가려 있어서 Esc 로만 닫을 수 있었다.
   창을 머리 위로 올리고, 위쪽에 제목 줄과 늘 보이는 [× 닫기] 단추를 두었다 (마우스 · 휴대폰에서도 닫을 수 있다). */
#belowtopnav .gramnav { z-index: 270; top: 0; height: 100vh; height: 100dvh; padding: 88px 0 60px; background-color: #fff; color: var(--ps-ink); overscroll-behavior: contain; }
#belowtopnav .gramnav .gramquiz { max-width: 880px; margin: 0 auto; padding: 0 24px; font-size: 17px; line-height: 1.8; }
#belowtopnav .gramnav a.closegramnav { display: none; }
#belowtopnav .gramnav[style*="width: 100%"]::before { content: "문법 연습"; position: fixed; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; height: 68px; padding: 0 24px; border-bottom: 1px solid var(--ps-line); background: rgba(255, 255, 255, .96); color: var(--ps-ink); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
#belowtopnav .gramnav[style*="width: 100%"] a.closegramnav { position: fixed; top: 12px; right: 20px; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--ps-ink); color: #fff; font-size: 24px !important; line-height: 1; text-decoration: none; transition: background .2s; }
#belowtopnav .gramnav[style*="width: 100%"] a.closegramnav::after { content: "닫기"; font-size: 14.5px; font-weight: 700; }
#belowtopnav .gramnav[style*="width: 100%"] a.closegramnav:hover { background: var(--ps-brand-strong); color: #fff; }