/*
Theme Name: Insight
Description: 어두운 매거진형 인사이트 테마 (kbam.co.kr/insights 구성 기준). 정주행·입질·간보기·뽀득 공용.
Version: 1.0.1
Requires PHP: 7.4
Text Domain: insight
*/

/* ==========================================================
   0. 기본값
   ========================================================== */
:root {
	--accent: #ffd338;
	--bg: #111;
	--card: #1e1e1e;
	--chip: #2f2f2f;
	--line: rgba(255, 255, 255, .1);
	--box: rgba(59, 59, 59, .3);
	--w: #fff;
	--w80: rgba(255, 255, 255, .8);
	--w60: rgba(255, 255, 255, .6);
	--w40: rgba(255, 255, 255, .4);
	--g300: #e5e5e5;
	--g500: #959595;
	--g600: #888;
	--mark: #fbeeb8;
	--wrap: 872px;
	--font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--w); font-family: var(--font); font-size: 16px; line-height: 1.6; letter-spacing: -.02em; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; vertical-align: top; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed !important; left: 12px; top: 12px; z-index: 999; width: auto; height: auto; clip: auto; padding: 8px 14px; background: var(--w); color: #000; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ins-wrap { width: 100%; max-width: calc(var(--wrap) + 40px); margin: 0 auto; padding: 0 20px; }

/* ==========================================================
   1. 머리
   ========================================================== */
.gnb { position: sticky; top: 0; z-index: 50; height: 52px; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .2s; }
.gnb.is-scrolled { border-bottom-color: var(--line); }
.gnb__in { display: flex; align-items: center; gap: 24px; height: 100%; padding: 0 24px; }
.gnb__logo { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; letter-spacing: -.04em; }
.gnb__logo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.gnb__logo-mark { width: 26px; height: 26px; border-radius: 7px; display: block; }
.gnb__menu { flex: 1; display: flex; justify-content: center; }
.gnb__list { display: flex; gap: 4px; }
.gnb__list a { display: block; padding: 6px 12px; font-size: 15px; font-weight: 500; color: var(--w80); border-radius: 8px; transition: color .2s, background .2s; }
.gnb__list a:hover, .gnb__list .current-menu-item > a, .gnb__list .current-category-ancestor > a, .gnb__list .current-post-ancestor > a { color: var(--w); background: var(--chip); }
.gnb__util { flex-shrink: 0; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.gnb__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--w); transition: background .2s; }
.gnb__icon:hover { background: var(--chip); }
.gnb__icon svg { width: 20px; height: 20px; }
.gnb__cta { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--accent); color: #111; font-size: 14px; font-weight: 600; }
.gnb__cta svg { width: 14px; height: 14px; }
.gnb__all { display: none; }
.gnb-search { position: fixed; inset: 52px 0 auto; z-index: 49; background: var(--bg); border-bottom: 1px solid var(--line); padding: 28px 0 32px; }
.gnb-search form { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 8px 0 20px; border-radius: 16px; background: var(--card); }
.gnb-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: 0; font-size: 18px; }
.gnb-search input::placeholder { color: var(--w40); }
.gnb-search button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.gnb-search button svg { width: 22px; height: 22px; }
.nf-search { position: static; padding: 32px 0 0; border: 0; background: none; }
.all-menu { position: fixed; inset: 52px 0 0; z-index: 49; background: var(--bg); overflow-y: auto; padding: 24px 20px 40px; }
.all-menu__list a { display: block; padding: 14px 0; font-size: 22px; font-weight: 600; border-bottom: 1px solid var(--line); }
.all-menu__sub { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 24px; }
.all-menu__sub a { font-size: 14px; color: var(--w60); }

/* ==========================================================
   2. 탭·제목
   ========================================================== */
.ins-page { padding: 28px 0 120px; }
.tab { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.tab::-webkit-scrollbar { display: none; }
.tab__btn { flex-shrink: 0; display: inline-flex; align-items: center; height: 30px; padding: 4px 10px; border-radius: 8px; background: var(--chip); color: var(--w); font-size: 15px; font-weight: 500; line-height: 1.46; white-space: nowrap; transition: background .2s, color .2s; }
.tab__btn:hover { background: #383838; }
.tab__btn.is-active { background: var(--w); color: #000; }
.sec { margin-top: 72px; }
.sec:first-child { margin-top: 0; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding: 0 24px; }
.sec__title { font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; }
.sec__desc { margin-top: 8px; font-size: 15px; color: var(--w60); }
.sec__nav { display: flex; gap: 8px; }
.sec__nav button { width: 28px; height: 28px; border-radius: 50%; background: var(--chip); display: inline-flex; align-items: center; justify-content: center; transition: background .2s, opacity .2s; }
.sec__nav button:hover { background: #383838; }
.sec__nav button:disabled { opacity: .35; cursor: default; }
.sec__nav svg { width: 14px; height: 14px; }
.archive-head { margin: 40px 0 32px; padding: 0 24px; }
.archive-head .sec__title { font-size: 36px; }

/* ==========================================================
   3. 인기 카드 (가로 슬라이드)
   ========================================================== */
.pop { position: relative; }
.pop__track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.pop__track::-webkit-scrollbar { display: none; }
.pop-card { position: relative; flex: 0 0 calc(50% - 4px); aspect-ratio: 432 / 510; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 20px; overflow: hidden; background: var(--card); isolation: isolate; }
.pop-card__img { position: absolute; inset: 0; z-index: -2; }
.pop-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pop-card:hover .pop-card__img img { transform: scale(1.04); }
.pop-card::after { content: ""; position: absolute; inset: 40% 0 0; z-index: -1; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .85)); }
.pop-card__cat { position: absolute; top: 24px; left: 24px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; background: rgba(17, 17, 17, .6); backdrop-filter: blur(6px); font-size: 13px; font-weight: 600; }
.pop-card__cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pop-card__con { padding: 32px; }
.pop-card__title { font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -.04em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pop-card__date { display: block; margin-top: 12px; font-size: 16px; line-height: 26px; color: var(--w60); }

/* 이미지가 없을 때 대신 쓰는 판 */
.noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16%; background: radial-gradient(120% 80% at 30% 20%, #2a2a2a, #191919); color: var(--w40); font-size: 15px; font-weight: 600; text-align: center; line-height: 1.4; }
.noimg span { display: block; }

/* ==========================================================
   4. 목록 (2열, 3:4 썸네일)
   ========================================================== */
.list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 60px; }
.list-card { display: flex; gap: 20px; min-width: 0; }
.list-card__thumb { flex: 0 0 160px; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: var(--card); }
.list-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.list-card:hover .list-card__thumb img { transform: scale(1.05); }
.list-card__txt { flex: 1; min-width: 0; padding: 16px 0; display: flex; flex-direction: column; }
.list-card__cat { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--accent); }
.list-card__title { font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -.04em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.list-card:hover .list-card__title { color: var(--w80); }
.list-card__desc { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--w60); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-card__date { margin-top: 8px; font-size: 16px; line-height: 26px; color: var(--w60); }
.empty { padding: 80px 24px; text-align: center; color: var(--w60); font-size: 16px; }

/* 더보기 / 페이지 번호 */
.more { display: flex; justify-content: center; margin-top: 48px; }
.more__btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; font-size: 15px; font-weight: 500; }
.more__count { color: var(--w60); font-weight: 400; }
.more__count b { color: var(--w); font-weight: 500; }
.more__ico { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--w); color: #111; }
.more__ico svg { width: 12px; height: 12px; }
.more__btn.is-loading .more__ico { animation: ins-spin .8s linear infinite; }
@keyframes ins-spin { to { transform: rotate(360deg); } }
.paging { display: flex; justify-content: center; gap: 4px; margin-top: 48px; }
.paging a, .paging span { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 10px; font-size: 15px; color: var(--w60); }
.paging a:hover { background: var(--chip); color: var(--w); }
.paging .current { background: var(--w); color: #000; font-weight: 600; }

/* ==========================================================
   5. 글 보기
   ========================================================== */
.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0; font-size: 15px; line-height: 24px; color: var(--w); }
.crumb li { display: inline-flex; align-items: center; }
.crumb li + li::before { content: ""; width: 20px; height: 20px; background: currentColor; opacity: .3; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m8 6 4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m8 6 4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.crumb a { opacity: .8; }
.crumb a:hover { opacity: 1; }
.view-head { margin-top: 24px; }
.view-head__title { font-size: 48px; font-weight: 500; line-height: 1.25; letter-spacing: -.06em; }
.view-head__sub { margin-top: 16px; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--g300); letter-spacing: -.04em; }
.view-head__info { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: 20px; }
.meta__div { width: 1px; height: 8px; background: #383838; }
.meta__time { display: inline-flex; align-items: center; gap: 4px; }
.meta__time svg { width: 16px; height: 16px; opacity: .7; }
.meta__by { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.meta__avatar { width: 20px; height: 20px; border-radius: 8px; border: 1px solid var(--line); background: var(--accent); color: #111; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.share { display: flex; gap: 4px; }
.share button { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .2s; }
.share button:hover { background: var(--chip); }
.share svg { width: 20px; height: 20px; }
.toast { position: fixed; left: 50%; bottom: 40px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 12px; background: var(--w); color: #111; font-size: 14px; font-weight: 600; transition: opacity .25s, transform .25s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* 포인트 요약 */
.brief { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; padding: 32px 36px; border-radius: 20px; background: var(--box); }
.brief__title { font-size: 22px; font-weight: 500; line-height: 30px; letter-spacing: -.06em; }
.brief__list { display: flex; flex-direction: column; gap: 10px; }
.brief__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 24px; letter-spacing: -.05em; }
.brief__list li::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.2 2.6 2.6L14 7.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }

.view-thumb { margin-top: 40px; border-radius: 20px; overflow: hidden; }
.view-thumb img { width: 100%; }
.view-thumb figcaption { padding: 10px 4px 0; font-size: 13px; color: var(--w60); }

/* 본문 */
.tc { margin-top: 56px; font-size: 18px; line-height: 1.66; letter-spacing: -.72px; color: var(--w); }
.tc > * + * { margin-top: 1.2em; }
.tc p:empty { display: none; }
.tc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tc strong { font-weight: 700; }
.tc h2 { margin-top: 64px; padding-top: 48px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 22px; font-weight: 600; line-height: 1.35; letter-spacing: -.04em; scroll-margin-top: 80px; }
.tc h2::before { content: "■"; margin-right: 8px; font-size: .8em; vertical-align: .08em; }
.tc > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tc h2 + * { margin-top: 20px; }
.tc h3 { margin-top: 40px; font-size: 18px; font-weight: 600; line-height: 1.6; scroll-margin-top: 80px; }
.tc h3 > span.mk, .tc h3:not(.plain) { display: table; padding: 0 6px; background: var(--mark); color: #000; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tc h3:not(.plain)::before { content: "◆ "; }
.tc h3 + * { margin-top: 14px; }
.tc h4 { margin-top: 32px; font-size: 18px; font-weight: 600; }
.tc ul, .tc ol { padding-left: 1.3em; }
.tc ul { list-style: disc; }
.tc ol { list-style: decimal; }
.tc li + li { margin-top: .35em; }
.tc li::marker { color: var(--w60); }
.tc blockquote { margin: 1.6em 0 0; padding: 24px 28px; border-radius: 20px; background: var(--box); font-size: 17px; color: var(--w80); }
.tc blockquote p + p { margin-top: .6em; }
.tc blockquote cite { display: block; margin-top: 10px; font-size: 14px; font-style: normal; color: var(--w60); }
.tc hr { margin: 56px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.tc img { border-radius: 16px; }
.tc figure { margin-top: 32px; }
.tc figcaption, .tc .wp-element-caption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--w60); text-align: left; }
.tc .wp-block-table, .tc .tbl { margin-top: 28px; overflow-x: auto; border-radius: 20px; background: var(--box); }
.tc table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 26px; }
.tc th, .tc td { padding: 12px 24px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tc th, .tc thead td { background: rgba(255, 255, 255, .05); font-weight: 500; white-space: nowrap; }
.tc tr:last-child td { border-bottom: 0; }
.tc .wp-block-table figcaption { margin: 0; padding: 12px 24px 14px; }
.tc .note, .tc .wp-block-group.is-style-note { padding: 24px 28px; border-radius: 20px; background: var(--box); font-size: 16px; }
.tc .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.tc .wp-block-button__link { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 24px; background: var(--accent); color: #111; font-size: 16px; font-weight: 600; text-decoration: none; }
.tc .ref { font-size: 14px; line-height: 1.6; color: var(--w60); }
.tc .ref a { color: var(--w80); }
.tc details, .faq-item { margin-top: 8px; border-radius: 20px; background: var(--card); }
.tc details > summary, .faq-item > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 28px 36px; cursor: pointer; font-size: 18px; font-weight: 500; line-height: 1.5; }
.tc details > summary::-webkit-details-marker { display: none; }
.tc details > summary::before { content: "Q"; flex-shrink: 0; color: var(--w60); font-weight: 500; }
.tc details > summary::after { content: ""; flex-shrink: 0; margin-left: auto; width: 16px; height: 16px; background: currentColor; opacity: .6; transition: transform .2s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 4.5L13 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 4.5L13 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.tc details[open] > summary::after { transform: rotate(180deg); }
.tc details > :not(summary) { margin: 0; padding: 0 36px 28px 64px; font-size: 16px; color: var(--w80); }
.tc details > :not(summary) + :not(summary) { padding-top: 0; margin-top: -14px; }

.view-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 56px; }
.view-tags a { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; background: var(--chip); font-size: 14px; }
.view-tags a:hover { background: #383838; }
.view-note { margin-top: 32px; padding: 20px 24px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--w60); }
.view-note a { color: var(--w80); text-decoration: underline; text-underline-offset: 3px; }

/* 연관 콘텐츠 (화면 가득) */
.related { margin-top: 120px; padding: 80px 0 0; border-top: 1px solid var(--line); }
.related .ins-wrap { max-width: 1320px; }
.related .sec__head { padding: 0 28px; }
.related .list { grid-template-columns: repeat(2, 1fr); padding: 0 28px; }

/* 고정 페이지 */
.page-body .tc { margin-top: 40px; }

/* ==========================================================
   6. 바닥
   ========================================================== */
.foot { padding: 56px 0 64px; background: #0a0a0a; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.7; color: var(--w60); }
.foot__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.foot__name { font-size: 20px; font-weight: 800; color: var(--w); letter-spacing: -.04em; }
.foot__desc { margin-top: 6px; color: var(--w60); }
.foot__menu { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot__menu a { font-size: 14px; color: var(--w80); }
.foot__menu a:hover { color: var(--w); }
.foot__menu li:first-child a { color: var(--w); font-weight: 700; }
.foot__note { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot__biz { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 12px; }
.foot__biz b { margin-right: 6px; font-weight: 500; color: var(--w80); }
.foot__copy { margin-top: 16px; color: var(--w40); }
.top-btn { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; background: var(--chip); display: inline-flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s, background .2s; }
.top-btn.is-on { opacity: 1; pointer-events: auto; }
.top-btn:hover { background: #383838; }
.top-btn svg { width: 20px; height: 20px; }

/* ==========================================================
   7. 등장 모션
   ========================================================== */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.rv { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* ==========================================================
   8. 반응형
   ========================================================== */
@media (max-width: 1024px) {
	.gnb__menu { display: none; }
	.gnb__all { display: inline-flex; }
	.gnb__all span { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; }
	.gnb__all span::before, .gnb__all span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor; transition: transform .2s; }
	.gnb__all span::before { top: -6px; }
	.gnb__all span::after { top: 6px; }
	.gnb__all[aria-expanded="true"] span { background: transparent; }
	.gnb__all[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
	.gnb__all[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
	.related .list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
	.tc { font-size: 16px; line-height: 1.62; letter-spacing: -.64px; }
	.tc h2 { font-size: 20px; }
	.tc table { font-size: 14px; line-height: 22px; }
	.tc th, .tc td { padding: 10px 16px; }
}
@media (max-width: 767px) {
	.gnb__in { padding: 0 8px 0 20px; gap: 8px; }
	.gnb__cta { display: none; }
	.ins-page { padding: 16px 0 96px; }
	.sec { margin-top: 56px; }
	.sec__head { padding: 0; margin-bottom: 20px; }
	.sec__title { font-size: 24px; }
	.archive-head { padding: 0; margin: 32px 0 24px; }
	.archive-head .sec__title { font-size: 28px; }
	.pop__track { margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; }
	.pop-card { flex-basis: 86%; }
	.pop-card__con { padding: 24px; }
	.pop-card__title { font-size: 22px; }
	.pop-card__date { font-size: 14px; }
	.list { grid-template-columns: 1fr; gap: 16px; }
	.list-card { gap: 16px; }
	.list-card__thumb { flex-basis: 100px; border-radius: 14px; }
	.list-card__txt { padding: 6px 0; }
	.list-card__title { font-size: 17px; line-height: 24px; }
	.list-card__desc { display: none; }
	.list-card__date { font-size: 14px; margin-top: 4px; }
	.view-head { margin-top: 16px; }
	.view-head__title { font-size: 30px; line-height: 1.3; letter-spacing: -.05em; }
	.crumb { font-size: 13px; }
	.brief { padding: 24px 22px; margin-top: 28px; }
	.brief__title { font-size: 19px; }
	.tc { margin-top: 40px; }
	.tc h2 { margin-top: 48px; padding-top: 36px; }
	.tc details > summary { padding: 22px 22px; font-size: 16px; }
	.tc details > :not(summary) { padding: 0 22px 22px 46px; font-size: 15px; }
	.related { margin-top: 80px; padding-top: 56px; }
	.related .sec__head, .related .list { padding: 0; }
	.related .list { grid-template-columns: 1fr; }
	.top-btn { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}