@charset "utf-8";
/* =====================================================
   style.css 작성 규칙
   1) 미디어쿼리 분기점은 파일 맨 아래 4개 블록으로만 관리한다.
      - 1366px 이하 : 노트북에서 변칙적인 경우에만 사용
      - 1024px 이상 : 노트북 & PC
      - 768px ~ 1023px : 태블릿 가로, 세로
      - 767px 이하 : 모바일 가로, 세로
   2) 레이아웃의 큰 틀은 단독 클래스, 그 안의 세부 요소는 종속 선언자로 작성한다.
      (종속은 최대 5단계까지)
===================================================== */
:root {
  --ui-font: "Pretendard", sans-serif;
  --serif-font: "Punc Medium", "Noto Serif KR", serif;
  --theme-color1: #e8cf79;
  --theme-color2: #e3e9b0;
  --black-clolor: #000000;
  --gray-color: #9e978e;
  --white-color: #ffffff;

  --border-width: 2.25px;
}

* {box-sizing: border-box;-webkit-hyphens: none;hyphens: none;}
html, body {margin: 0;padding: 0;line-height: 180%;}


/* ---------- Utilities ---------- */
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
.is-hidden {display: none;}

.m-visible {display: none;}

body {font-family: var(--ui-font);color: var(--black-clolor);min-height: 100vh;line-height: 180%;}
body:has(.site-content.webzine-bg1) {background: linear-gradient(to right, #e8cf79 0%, #e8d07b 20%, #e3e9b0 30%, #e3e9b0 100%);}
body:has(.site-content.webzine-bg2) {background: linear-gradient(90deg, #e8cf79 0%, #e8cf79 70%, #e3e9b0 80%, #e3e9b0 100%);}
body:has(.site-content.webzine-bg2) .site-header {border-bottom: var(--border-width) solid #000;}

.wrap {padding: 30px;display: flex;min-height: 100vh;flex-direction: column;}


/* skip nav */
.skip-nav a {position: absolute;top: 0;left: 0;right: 0;height: 0;overflow: hidden;color: #fff;background: #000000;font-size: 16px;}
.skip-nav a:focus {height: auto;z-index: 210;padding: 10px;line-height: 1.6;text-align: center;outline: 2px solid #fff;outline-offset: -3px;}

/* ---------- Header ---------- */
.site-header {display: flex;align-items: center;justify-content: space-between;padding-bottom: 14px;margin-bottom: 0;}
.site-header .logo {display: flex;align-items: center;text-decoration: none; position: relative;z-index: 10;}
.site-header .logo img {display: block;height: 52px;width: auto;}
.site-header .header-top-row {display: contents;}
.site-header .nav-toggle {display: none;flex-direction: column;gap: 8.5px;width: 43px;height: 32px;padding: 0;background: none;border: none;cursor: pointer;flex-shrink: 0;}
.site-header .nav-toggle span {display: block;height: 4.5px;width: 100%;background: var(--black-clolor);}
.site-header .header-nav {position: absolute;right: 30px;top: 29px;z-index: 10;display: flex;gap: 44px;}
.site-header .header-nav .header-nav-link {font-family: var(--ui-font);color: var(--black-clolor);text-decoration: none;font-weight: 900;font-size: 24px;background: transparent;}

/* ---------- Share dropdown (desktop) / popover (mobile) ---------- */
.share-dropdown {display: none;position: absolute;background: #e3e9b0;border: 2.25px solid var(--black-clolor);z-index: 500;padding: 0 8px;}
.share-dropdown.open {display: block;}
.share-dropdown a {display: block;padding: 18px 0;font-family: var(--ui-font);font-weight: 900;font-size: 24px;color: var(--black-clolor);text-decoration: none;text-align: center;border-bottom: 2.25px solid var(--black-clolor);}
.share-dropdown .share-close {display: block;width: 100%;padding: 22px 0;background: none;border: none;font-family: var(--ui-font);font-size: 18px;font-weight: 900;color: var(--black-clolor);cursor: pointer;text-align: center;}
.share-dropdown .share-close:before {content: "";display: inline-block;vertical-align: middle;width: 12px;height: 12px;background: url("../img/common/ico_close.svg") center center no-repeat;background-size: cover;}

/* ---------- Floating shortcut icons (index page only) ---------- */
.ico-ani-about, .ico-ani-issue {position: fixed;top: 0;left: 0;z-index: 100; will-change: transform;opacity: 0;transition: opacity 0.6s ease;}
.ico-ani-about.is-ready, .ico-ani-issue.is-ready {opacity: 1;}
.ico-ani-about a, .ico-ani-issue a {display: block;width: 100%;height: 100%;background-position: center;background-size: cover;background-repeat: no-repeat;}
.ico-ani-about {width: 99px;height: 99px;}
.ico-ani-about a {display: block;width: 100%;height: 100%;background: url("../img/common/img_fl_banner01.webp") center center no-repeat;background-size: cover;}
.ico-ani-issue {width: 123px;height: 141px;}
.ico-ani-issue a {display: block;width: 100%;height: 100%;background: url("../img/common/img_fl_banner02.webp") center center no-repeat;background-size: cover;}
/* .ico-ani-issue a span {display:inline-block;margin-top: 39px;margin-left: 11px;font-size: 24px;font-weight: 900;line-height: 1.36;} */
/* 이동은 assets/js/index_floating.js에서 처리 (직선 이동 + 화면 가장자리 반사) */

/* ---------- Answer image popover (same on desktop and mobile) ---------- */
.answer-trigger {font-family: var(--ui-font);font-size: 18px;font-weight: 800;background: transparent;text-align: center;}
.answer-popover {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width: 90vw;max-height: 85vh;overflow-y: auto;background: var(--theme-color2);border: 2px solid var(--black-clolor);border-radius: 6px;padding: 26px 22px 22px;box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);z-index: 400;}
.answer-popover.open {display: block;}
.answer-popover img {display: block;max-width: 100%;height: auto;}
.answer-popover .answer-close {display: flex;align-items: center;justify-content: center;position: absolute;top: 12px;right: 12px;width: 30px;height: 30px;border-radius: 50%;border: 1.5px solid var(--black-clolor);background: transparent;color: var(--black-clolor);font-size: 16px;line-height: 1;cursor: pointer;}

/* ---------- Footer ---------- */
.site-footer {display: grid;grid-template-columns: repeat(12, 1fr);justify-content: space-between;align-items: flex-end;gap: 7.5px;padding-top: 18px;}
.site-footer .footer-info {grid-column: 4 / -1;font-family: var(--ui-font);font-size: 14px;line-height: 180%;color: #000;}
.site-footer.align-start-0 .footer-info {grid-column: 1 / -1;}
.site-footer.align-start-3 .footer-info {grid-column: 3 / -1;}

.site-main {flex: 1;}


/* =====================================================
   MAIN LIST PAGE (메인)
===================================================== */


.site-content {display: block;}
.site-content.list-type {display: grid;grid-template-columns: repeat(12, 1fr);gap: 7.5px;}
.site-content.webzine-bg1 {margin-top: -34px;}
.site-content .archive-list {grid-column: 4 / -1;}


/* ---------- 지난호 리스트 (issue_list.html) ---------- */
.site-content .issue-list {grid-column: 1 / -1;border-top: 0;}
.issue-list .issue-row {border-bottom: var(--border-width) solid var(--black-clolor);}
.issue-list .issue-row .row-content {display: grid;grid-template-columns: repeat(12, 1fr);gap: 7.5px;padding: 25px 0;min-width: 0;color: inherit;text-decoration: none;min-height: 214px;}
.issue-list .issue-row .issue-meta {grid-column: 1 / 3;}
.issue-list .issue-row .issue-meta .issue-date {font-family: var(--ui-font);font-size: 30px;font-weight: 900;color: #000;}
.issue-list .issue-row .issue-meta .issue-date .num {margin-top: 20px;display: block;}
.issue-list .issue-row .issue-titles {grid-column: 3 / -1;}
.issue-list .issue-row .issue-titles .issue-title {font-family: var(--ui-font);font-size: 30px;font-weight: 900;}
.issue-list .issue-row .issue-thumbs {grid-column: 9 / -1;display: grid;grid-template-columns: repeat(4, 1fr);gap: 7.5px;}
.issue-list .issue-row .issue-thumbs .thumb {display: flex;align-items: stretch;justify-content: center;max-width: 8.33vw;aspect-ratio: 1 / 1.07;overflow: hidden;}
.issue-list .issue-row .issue-thumbs .thumb img {width: 100%;object-fit: cover;}
.issue-no {font-family: var(--ui-font);}

/* =====================================================
   ARCHIVE / 이번 호 목록 PAGE
===================================================== */

.archive-list {position: relative;}
:is(.archive-list, .archive-view) .archive-row-title {position: absolute;top: -33px;width: 100%;display: grid;grid-template-columns: repeat(9, 1fr);gap: 7.5px;}
:is(.archive-list, .archive-view) .archive-row-title .issue-date {font-family: var(--ui-font);font-size: 24px;font-weight: 900;margin-top: 0;color: #000;grid-column: 1 / 3;}
:is(.archive-list, .archive-view) .archive-row-title .issue-name {font-size: 24px;font-weight: 900;grid-column: 3 / 8;}

.archive-list .archive-row {border-bottom: var(--border-width) solid #000;}
.archive-list .archive-row:first-child {border-top: var(--border-width) solid #000;}

.archive-list .archive-row .row-content {display: grid;grid-template-columns: repeat(9, 1fr);gap: 7.5px;min-width: 0;min-height: 180px;padding: 2px 0;color: inherit;text-decoration: none;}

.archive-list .archive-row .num {font-family: var(--ui-font);font-size: 24px;font-weight: 900;padding-top: 2px;grid-column: 1 / 3;}
.archive-list .archive-row .content {grid-column: 3 / -1;}
.archive-list .archive-row .content h3 {font-family: var(--ui-font);font-size: 24px;font-weight: 900;margin: 0;line-height: 180%;-webkit-hyphens: none;hyphens: none;word-break: keep-all;}
.archive-list .archive-row .content .byline {font-family: var(--ui-font);font-size: 24px;font-weight: 400;line-height: 180%;margin: 0;}
.archive-list .archive-row .content .desc {font-size: 24px;font-weight: 400;color: var(--black-clolor);line-height: 180%;margin: 0;}
.archive-list .archive-row .intro-content {grid-column: 3 / 8;padding-top: 5px;padding-bottom: 74px;}
.archive-list .archive-row .content .intro-text {font-size: 18px;font-weight: 500;line-height: 1.65;margin: 0;word-break: keep-all;}
.archive-list .archive-row .content .intro-text + .intro-text {margin-top: 44px;}
.archive-list .archive-row .content .intro-text.indent {padding-left: 37px;margin-top: 0;}
.archive-list .archive-row .content .intro-text strong {font-weight: 900;}
.archive-list .archive-row .about-content {grid-column: 3 / 8;}
.archive-list .archive-row .about-content2 {grid-column: 3 / 9;padding-top: 22px;}
.archive-list .archive-row .content .about-text {font-size: 24px;font-weight: 400;line-height: 180%;margin: 0;margin-bottom: 24px;word-break: keep-all;}
.archive-list .archive-row .content .about-text strong {font-weight: 900;}
.archive-list .archive-row .content .about-img {height: 280px;margin-top: -24px;}
.archive-list .archive-row .content .about-img img {height: 100%;}
.archive-list .archive-row .thumb {margin: 8.5px 0;grid-column: 9 / -1;}
.archive-list .archive-row .thumb img {max-width: 100%;height: 100%;aspect-ratio: 1/1.07;object-fit: cover;}

.about {padding: 1.5px 0;font-family: var(--ui-font);border-bottom: var(--border-width) solid #000;}
.about .btn-about {display: block;font-size: 24px;font-weight: 900;line-height: 180%;color: #000;text-decoration: none;}

.archive-view {position: relative;display: grid;grid-template-columns: repeat(12, 1fr);gap: 7.5px;}
.archive-view .archive-row-title {grid-column: 4 / -1;top: -65px;}

/* 이번 호 소개 팝오버: intro.html로 이동하는 대신 제목 아래에 소개글을 띄운다.
   위치(top/left)는 JS(positionIntroPopover in ui_common.js)가 트리거 바로
   아래로 계산해서 지정한다. */
.intro-trigger {font: inherit;background: none;border: none;padding: 0;margin: 0;color: inherit;text-align: left;cursor: pointer;}
.intro-popover {display: none;position: absolute;z-index: 250;width: min(608px, calc(100% - 24px));}
.intro-popover.open {display: block;}
.intro-popover .intro-popover-box {background: var(--theme-color2);border: 3px solid #000;padding: 17px 10px 20px 19px;}
.intro-popover .intro-popover-box p {font-family: var(--ui-font);font-size: 24px;line-height: 136%;word-break: keep-all;margin: 0 0 34px;}
.intro-popover .intro-popover-close {display: block;margin: 0 auto;padding: 10px;background: transparent;}
.intro-popover .intro-popover-close:before {content: "";display: block;width: 13px;height: 13px;background: url(../img/common/ico_close.svg) center center no-repeat;background-size: cover;}


/* =====================================================
   DETAIL / 상세 PAGE
===================================================== */
.article-wrap {position: relative;display: grid;grid-template-columns: repeat(12, 1fr);gap: 7.5px;padding-bottom: 4px;margin-top: 4px;align-items: start;}
.article-wrap + .back-to-issue {display: none;}

/* ---------- 좌측: 글쓴이 정보 / 각주 ---------- */
.article-wrap .article-byline {grid-column: span 2;position: relative;align-self: stretch;font-family: var(--serif-font);font-size: 12px;line-height: 180%;color: #000;}
/* author wrapper: holds one or more .byline-author; adjust top/bottom here to reposition */
.article-wrap .article-byline .byline-authors {position: absolute;left: 0;right: 0;bottom: 280px;font-family: var(--serif-font);}
.article-wrap .article-byline .byline-author + .byline-author {margin-top: 37px;}
.article-wrap .article-byline .byline-author p:not(.by-name, .by-links) {padding-right: 12px;word-break: keep-all;}
.article-wrap .article-byline .byline-author .by-name {color: #000;font-size: 12px;text-decoration: underline;text-underline-offset: 3px;margin-bottom: 17.5px;}
.article-wrap .article-byline .byline-author .by-links {margin-top: 17.5px;}

.article-wrap .byline-notes {margin-top: 0;padding-top: 0;border-top: none;}
.article-wrap .byline-notes .notes-title {display: none;font-family: var(--ui-font);font-weight: 800;color: var(--black-clolor);margin: 0 0 10px;font-size: 13px;}
.article-wrap .byline-notes .byline-close {display: none;}
.article-wrap .byline-notes ol {margin: 0;padding-left: 0;list-style: none;}
/* each note: JS sets `top` to align with its in-text .footnote-ref marker.
   Numbering comes from data-num (not a CSS counter) so a note keeps its
   own number even when a sibling note is hidden (e.g. mobile's single-note popover). */
.article-wrap .byline-notes ol li {position: absolute;left: 0;right: 0;margin: 0;font-size: 12px;color: #000;word-break: keep-all;-webkit-hyphens: none;hyphens: none;}
.article-wrap .byline-notes ol li::before {content: attr(data-num) ". ";color: #000;}

/* ---------- 중앙: 본문 ---------- */
.article-wrap .article-body {grid-column: span 7;min-width: 0;padding: 0 4.5px;border-left: var(--border-width) solid #000;border-right: var(--border-width) solid #000;}

/* cover box: title + byline on the left, category label (KR/EN) on the right,
   split by a vertical rule; the whole box sits on the article-body's borders. */
.article-wrap .article-body .article-cover {display: grid;grid-template-columns: 72% 28%;align-items: stretch;border-bottom: var(--border-width) solid #000;padding-bottom: 4.5px;}
.article-wrap .article-body .article-cover .article-cover-main {text-align: center;padding: 28px 20px 21px 20px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.article-wrap .article-body .article-cover .article-cover-category {text-align: center;padding: 28px 20px 21px 20px;border-left: var(--border-width) solid #000;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.article-wrap .article-body .article-cover .article-title {font-family: var(--ui-font);font-size: 24px;font-weight: 700;line-height: 180%;margin: 0 0 7px;}
.article-wrap .article-body .article-cover .category-kr {font-family: var(--ui-font);font-size: 24px;font-weight: 700;line-height: 180%;}
.article-wrap .article-body .article-cover .category-en {font-size: 24px;font-weight: 700;margin: 0;line-height: 180%;}
/* byline trigger: 모바일에서만 클릭 가능(글쓴이 정보 노출), PC에서는 이름만 표시 */
.article-wrap .article-body .article-cover .byline-trigger {display: flex;align-items: center;justify-content: center;gap: 6px;margin: 0 auto;padding: 0;background: none;border: none;font: inherit;color: var(--black-clolor);cursor: default;}
.article-wrap .article-body .article-cover .byline-trigger .byline-trigger-name {font-family: var(--ui-font);font-weight: 500;font-size: 18px;color: #000;line-height: 180%;}
.article-wrap .article-body .article-cover .byline-trigger .byline-trigger-icon {display: none;}

.article-wrap .article-body .article-lede {font-family: var(--ui-font);text-align: center;font-size: 18px;font-weight: 700;padding: 35px 0;line-height: 180%;border-bottom: var(--border-width) solid #000;}
.article-wrap .article-body .article-lede u {text-underline-offset: 4px;}

.article-wrap .article-body .article-content {padding: 26px 58px 26px 42px;font-family: var(--serif-font);}
.article-wrap .article-body .article-content > h4 {font-family: var(--ui-font);font-size: 18px;font-weight: 700;line-height: 180%;}
.article-wrap .article-body .article-content h4.text-subtitle {font-size: 18px;font-weight: 700;line-height: 180%;padding-left: 38px;margin-bottom: 43px;margin-top: 72px;}
.article-wrap .article-body .article-content h4.text-subtitle.type2 {padding-left: 0;margin-top: 0;font-size: 24px;text-align: center;margin-bottom: 26px;}
/* .article-content > h4:first-child {margin-top: 0;} */
.article-wrap .article-body .article-content > p {font-size: 18px;line-height: 180%;text-align: left;word-break: keep-all;letter-spacing: -0.25px; /*text-indent: 36px;*/}
.article-wrap .article-body .article-content p.text-first {margin-top: 39px;}
.article-wrap .article-body .article-content p.text-last:after {content: '';display: inline-block;vertical-align: -7%;width: 47px;height: 10px;background: url("../img/common/img_content_fin.svg");background-size: cover;margin-left: 8px;}
.article-wrap .article-body .article-content p.text-indent {text-indent: 36px;}
.article-wrap .article-body .article-content p.text-pdx {padding-left: 36px;padding-right: 36px;}
/* .article-content > p + p {margin-top: 39px;} */
.article-wrap .article-body .article-content .content-figure {max-width: 29vw;margin: 29px auto 0;}
.article-wrap .article-body .article-content .content-figure img {width: 100%;}

/* in-text footnote marker: the referenced word itself (clickable on mobile) */
.article-wrap .article-body .article-content .footnote-ref {cursor: default; /*color: #9E978E;*/}
.article-wrap .article-body .article-content .footnote-ref::after {content: attr(data-note);vertical-align: 9px;font-size: 12px;line-height: 0;margin-left: 1px;}

/* dialogue line: 집담회/좌담 형식에서 발화자 태그 + 발화 내용 */
.article-wrap .article-body .article-content > p.dialogue-line {display: flex;align-items: flex-start;gap: 6px;text-indent: 0;}
.article-wrap .article-body .article-content > p.dialogue-line + p.dialogue-line {margin-top: 38px;}
.dialogue-line .dialogue-tag {flex-shrink: 0;display: inline-flex;align-items: center;justify-content: center;padding: 1px 1px 3px 1px;font-size: 18px;font-weight: 400;color: #fff;line-height: 1;margin-top: 7px;}
.dialogue-line .dialogue-tag--a {background: #00877D;}
.dialogue-line .dialogue-tag--b {background: #0068B2;}
.dialogue-line .dialogue-tag--c {background: #863A20;}

/* speaker text color: branches off whichever .dialogue-tag--* the line's tag carries */
.dialogue-line:has(.dialogue-tag--a) {color: #00877D;}
.dialogue-line:has(.dialogue-tag--b) {color: #0068B2;}
.dialogue-line:has(.dialogue-tag--c) {color: #863A20;}

/* pull-quote: an in-text citation block (버지니아 울프, 이경렬 등의 인용) */
.pull-quote {padding-left: 38px;padding-right: 38px;margin-top: 40px;margin-bottom: 43px;color: #53555a;}
.pull-quote.type2 {color: #000;}
.pull-quote:first-child {margin-top: 0;}
.pull-quote p {font-family: var(--ui-font);font-size: 18px;font-weight: 400;line-height: 180%;text-indent: 0;margin: 0;word-break: keep-all;}
.pull-quote cite {display: block;text-align: right;font-style: normal;font-family: var(--ui-font);font-size: 18px;font-weight: 400;margin-top: 11px;word-break: keep-all;line-height: 180%;}
.pull-quote cite.type2 {margin-top: 44px;}
.pull-quote.bdt1 {margin-top: 82px;margin-bottom: 75px;}
/* .pull-quote.bdt1 {margin-top: 66px;margin-bottom: -24px;}
.pull-quote.bdt1:before {content:"";display: block;width: calc(100% + 38px + 58px + 42px);height:2.25px;background: #000;margin-left: -80px;} */

/* 십자말풀이 */
.crossword {--cw-border: 2px;margin: 105px 0 36px 0;}
.crossword .crossword-heading {text-align: center;font-size: 24px;font-family: var(--ui-font);margin-bottom: 35px;line-height: 180%;}
.crossword .crossword-board {position: relative;max-width: 37vw;margin: 0 auto;overflow: hidden;}
.crossword .crossword-board .crossword-grid {display: grid;grid-template-columns: repeat(10, minmax(0, 1fr));border-top: var(--cw-border) solid #000;border-left: var(--cw-border) solid #000;background: var(--theme-color1);width: 100%;}
.crossword .crossword-board--answer {display: none;margin-top: 20px;}
.crossword.is-revealed .crossword-board--answer {display: block;}
.crossword.is-revealed .crossword-board .crossword-grid--answer .crossword-cell:not(.crossword-cell--given) .crossword-cell-letter {color: #8B6AD4;}
.crossword .crossword-board .crossword-grid .crossword-cell {position: relative;min-width: 0;min-height: 0;overflow: hidden;aspect-ratio: 1 / 1;border-right: var(--cw-border) solid #000;border-bottom: var(--cw-border) solid #000;display: flex;align-items: center;justify-content: center;}
.crossword .crossword-board .crossword-grid .crossword-cell--block {background: var(--gray-color);}
.crossword .crossword-board .crossword-grid .crossword-cell .crossword-cell-num {position: absolute;top: 2px;left: 3px;font-family: var(--ui-font);font-size: 18px;font-weight: 900;line-height: 1;}
.crossword .crossword-board .crossword-grid .crossword-cell .crossword-cell-letter {font-family: var(--ui-font);font-size: 36px;font-weight: 700;}
.crossword .crossword-board .crossword-grid .crossword-cell .crossword-cell-input {position: absolute;inset: 0;width: 100%;height: 100%;min-width: 0;min-height: 0;margin: 0;padding: 0;line-height: 1;border: none;border-radius: 0;-webkit-appearance: none;appearance: none;background: transparent;text-align: center;font-family: var(--ui-font);font-size: 36px;font-weight: 500;color: var(--black-clolor);}
.crossword .crossword-board .crossword-grid .crossword-cell .crossword-cell-input:focus {outline: 2px solid var(--black-clolor);outline-offset: -2px;background: rgba(255, 255, 255, 0.35);}
.crossword .crossword-reveal-btn {display: flex;width: fit-content;margin: 20px auto 0;padding: 0;background: none;border: var(--border-width) solid #000;border-right: none;cursor: pointer;}
.crossword .crossword-reveal-btn .crossword-reveal-cell {display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;border-right: var(--border-width) solid #000;font-family: var(--ui-font);font-size: 18px;font-weight: 700;color: var(--black-clolor);background: var(--theme-color1);}
.crossword .crossword-reveal-btn .crossword-reveal-cell--block {background: var(--gray-color);}
.crossword .crossword-reveal-btn:focus-visible {outline: 2px solid var(--black-clolor);outline-offset: 2px;}
.crossword .crossword-clues {position: relative;max-width: 40vw;margin: 27px auto 0;display: grid;grid-template-columns: 1fr 1fr;}
/* .crossword .crossword-clues:before {content: '';display: block;height: 100%;width: var(--border-width);background: #000;position: absolute;left: calc(50% - -6.75px);transform: translateX(-50%);} */
.crossword .crossword-clues .crossword-clue-col:first-child {padding-right: 80px;}
.crossword .crossword-clues .crossword-clue-col:last-child {padding-left: 80px;border-left: var(--border-width) solid #000;}
.crossword .crossword-clues .crossword-clue-heading {font-family: var(--ui-font);font-size: 18px;font-weight: 800;margin: 0 0 33px;}
.crossword .crossword-clues .crossword-clue-list {margin: 0;padding: 0;list-style: none;}
.crossword .crossword-clues .crossword-clue {margin-bottom: 34px;}
.crossword .crossword-clues .crossword-clue:last-child {margin-bottom: 0;}
.crossword .crossword-clues .crossword-clue .crossword-clue-head {margin: 0;font-family: var(--ui-font);line-height: 180%;font-size: 18px;font-weight: 500;text-indent: 0 !important;}
.crossword .crossword-clues .crossword-clue .crossword-clue-pattern {letter-spacing: 1px;}
.crossword .crossword-clues .crossword-clue .crossword-clue-text {font-family: var(--ui-font);line-height: 180%;font-size: 18px;font-weight: 500;text-indent: 0 !important;word-break: keep-all;}
.crossword .crossword-clues .crossword-clue .crossword-clue-hint {font-family: var(--ui-font);line-height: 180%;font-size: 15px;font-weight: 600;color: #9E978E;text-indent: 0 !important;word-break: keep-all;}

/* ---------- 우측: 사이드 이미지 ---------- */
.article-wrap .side-media {grid-column: span 3;align-self: stretch;position: relative;}
.article-wrap .side-figure {position: absolute;top: 0;right: 0;width: calc(calc(calc(100vw / 12) * 3) - 23.5px);margin: 0;}
.article-wrap .side-figure img {width: 100%; /*aspect-ratio: 4/3;*/}
.article-wrap .side-figure img + img {margin-top: 8px;}
.article-wrap .side-figure figcaption {font-family: var(--ui-font);font-size: 12px;color: #000;text-align: center;line-height: 180%;}

/* ---------- 이전 글 / 다음 글 ---------- */
.article-wrap .article-nav {grid-column: 3 / 10;border-top: var(--border-width) solid #000;}
.article-wrap .article-nav .article-nav-links {display: grid;grid-template-columns: 1fr 1fr;padding: 4px 0;}
.article-wrap .article-nav .article-nav-links .article-nav-link:first-child {text-align: right;padding-right: 4px;}
.article-wrap .article-nav .article-nav-links .article-nav-link:last-child {text-align: left;padding-left: 4px;margin-left: -8px;border-left: var(--border-width) solid #000;}
.article-wrap .article-nav .article-nav-links .article-nav-link a {padding: 25px 45px 35px 45px;text-decoration: none;color: var(--black-clolor);display: block;}
.article-wrap .article-nav .article-nav-link .label {display: block;font-family: var(--ui-font);font-size: 18px;font-weight: 400;color: var(--black-clolor);margin-bottom: 23px;}
.article-wrap .article-nav .article-nav-link .title {display: block;font-family: var(--ui-font);font-size: 24px;font-weight: 900;line-height: 180%;}
.back-to-issue {display: block;text-align: center;padding: 6px 0;font-family: var(--ui-font);font-size: 24px;font-weight: 900;text-decoration: none;color: var(--black-clolor);border-top: var(--border-width) solid #000;border-bottom: var(--border-width) solid #000;}


/* =====================================================
   ABOUT US PAGE
===================================================== */
.about-page {padding: 30px 0 60px;max-width: 900px;}
.about-eyebrow {font-family: var(--ui-font);font-size: 24px;font-weight: 900;line-height: 2;margin: 0;}
.about-heading {font-family: var(--ui-font);font-size: 24px;font-weight: 900;line-height: 2;margin: 0 0 20px;}
.about-tagline {font-family: var(--ui-font);font-size: 24px;font-weight: 900;line-height: 1.5;margin: 0 0 36px;text-align: left;}
.about-desc {font-family: var(--serif-font);font-size: 18px;line-height: 180%;text-align: left;text-indent: 36px;margin: 0 0 16px;}
.about-divider {border: none;border-top: var(--border-width) solid #000;margin: 40px 0;}
.about-columns {display: grid;grid-template-columns: 1fr 2fr;gap: 60px;}
.about-columns .about-section-title {font-family: var(--ui-font);font-size: 18px;font-weight: 900;margin: 0 0 27px;}
.about-columns .about-credit .credit-row {margin-bottom: 20px;}
.about-columns .about-credit .credit-row dt {font-family: var(--ui-font);font-size: 18px;font-weight: 900;}
.about-columns .about-credit .credit-row dd {font-family: var(--ui-font);font-size: 18px;font-weight: 400;margin: 0;min-height: 1.5em;}
/* .about-layers {position: relative;} */
.about-columns .about-layers .layer-item {margin-bottom: 24px;}
.about-columns .about-layers .layer-item .layer-title {font-size: 18px;font-weight: 900;}
.about-columns .about-layers .layer-item .layer-title + p {font-size: 18px;line-height: 180%;margin: 0;word-break: keep-all;}


/* =====================================================
   RESPONSIVE / 미디어쿼리 (분기점은 아래 4개만 사용)
   순서: 1366 → 1024 → 768~1023 → 767 (아래로 갈수록 우선)
===================================================== */

/* 노트북에서 변칙적인 경우 : 1366px 이하
   (아래 태블릿/모바일에도 그대로 상속되므로, 화면이 줄어들며 유지돼야 하는 레이아웃 변경만 둔다) */
@media screen and (max-width: 1366px) {
  /* 공통 */
  .site-header {border-bottom: var(--border-width) solid var(--black-clolor);padding-bottom: 4px;}
  .site-header .header-nav {position: unset;}
  .site-footer {display: block;margin-top: 0;}

  /* 목록 페이지 */
  .site-content.webzine-bg1 {margin-top: 0;}
  .site-content.list-type {grid-template-columns: repeat(7, 1fr);}
  .site-content .archive-list {grid-column: 1 / -1;}
  :is(.archive-list, .archive-view) .archive-row-title {position: unset;display: grid;grid-template-columns: repeat(7, 1fr);padding: 5px 0;}
  :is(.archive-list, .archive-view) .archive-row-title .issue-date {width: auto;grid-column: 1 / 3;}
  :is(.archive-list, .archive-view) .archive-row-title .issue-name {width: auto;grid-column: 3 / -1;}
  .archive-view {display: none;}

  /* .archive-list .archive-row {border-bottom-width: 1.5px;} */
  
  .archive-list .archive-row .row-content {min-height: 68px;grid-template-columns: repeat(7, 1fr);gap: 7.5px;}
  .archive-list .archive-row .num {grid-column: 1 / 3;}
  .archive-list .archive-row .content {grid-column: 3 / -1;}
  .archive-list .archive-row .thumb {grid-column: 7 / 7;}
  .archive-list .archive-row .about-content2 {padding-top: 10px;}

  .about {padding: 0;}
  .about .btn-about {width: 100%;}

  /* 상세 페이지 */
  .article-wrap {grid-template-columns: 220px 1fr;}
  .article-wrap .article-byline {grid-column: span 1;}
  .article-wrap .article-body {grid-column: span 1;padding-right: 0;border-right: 0;}
  .article-wrap .article-nav {grid-column: 2;}
  .article-wrap .side-media {display: none;}
  .article-wrap .side-figure {display: block;position: static;width: auto;margin: 10px 0;text-align: center;}
  .article-wrap .side-figure img.is-portrait {max-width: 75%;margin-left: auto;margin-right: auto;}

  /* About Us 페이지 */
  .about-columns {display: block;}
  .about-columns .about-layers:before {content: '';display: block;width: 100%;height: var(--border-width);position: absolute;left: 0;border-top: var(--border-width) solid #000;}
  .about-columns .about-layers .about-section-title {padding-top: 22px;}
}

/* 노트북 & PC : 1024px- */
@media all and (min-width:1024px) {
  body:has(.site-content.webzine-bg2) .site-header .header-nav {position: unset;margin-top: -20px;}
}
@media screen and (max-width: 1366px) {
   .crossword .crossword-board {max-width: calc(100vw - 300px);}
   .crossword .crossword-clues {max-width: 60vw;}
}
/* 태블릿 가로, 세로 : 768px-1023px */
@media all and (min-width:768px) and (max-width:1023px) {
  .wrap {padding: 15px;}
  body:has(.site-content.webzine-bg2) .site-header .header-nav {position: unset;margin-top: -20px;}
}

/* 모바일 가로, 세로 : -767px */
@media all and (max-width:767px) {
  :root {--border-width: 1.5px;}
  
  .wrap {padding: 15px;}

  body:has(.site-content.webzine-bg1) {background: linear-gradient(to bottom, #e8cf79 0%, #e8d07b 80%, #e3e9b0 90%, #e3e9b0 100%);}
  body:has(.site-content.webzine-bg2) {background: linear-gradient(to bottom, #e8cf79 0%, #e8d07b 80%, #e3e9b0 90%, #e3e9b0 100%);}

  /* ---- 플로팅 배너 ---- */
  .ico-ani-about {width: 50px;height: 50px;}
  .ico-ani-issue {width: 61px;height: 71px;}

  /* ---- headers become relative anchors for the dropdown nav ---- */
  .site-header {position: relative;flex-wrap: wrap;align-items: center;padding-bottom: 5px;/*border-bottom-width: 2px;*/}
  .site-header .logo img {height: 37px;}
  .site-header .nav-toggle {display: flex;}
  /* ---- 메인 (issue TOC) header: stack logo row + title row ---- */
  .site-header .header-top-row {display: flex;width: 100%;justify-content: space-between;align-items: center;}

  /* hamburger dropdown panel, shared by all pages */
  .site-header .header-nav {display: none;position: absolute;top: 100%;right: 0;flex-direction: column;gap: 0;background: #e8d07a;border: 4.5px solid var(--black-clolor);min-width: 100px;z-index: 500;padding: 0 10px;}
  .site-header .header-nav.open {display: flex;}
  .site-header .header-nav .header-nav-link {padding: 9px 0;font-size: 15px;font-weight: 900;}
  .site-header .header-nav .header-nav-link:last-child {border-bottom: none;}

  /* share becomes a centered popover card, same treatment as .article-byline */
  .share-dropdown {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);min-width: 150px;max-height: 70vh;overflow-y: auto;border: 4.5px solid #000;padding: 12px 20px;z-index: 500;background: #e8d07a;}
  .share-dropdown.open {display: block;}
  .share-dropdown a {padding: 14px 10px;font-size: 15px;border-bottom: 0;}
  .share-dropdown .share-close {display: flex;align-items: center;justify-content: center;position: absolute;top: 0px;right: 0px;width: 29px;height: 29px;padding: 8px;background: transparent;color: var(--black-clolor);font-size: 16px;line-height: 1;}

  .site-main {margin-top: 0;}

  .archive-title-block {width: 100%;flex-direction: column;align-items: center;text-align: center;gap: 2px;margin-top: 12px;order: 3;}
  .archive-title-block .issue-name {font-size: 17px;}
  .archive-title-block .issue-date {font-size: 13px;}

  /* ---- 메인 page article rows ---- */
  .site-content .archive-list {grid-column: 1 / -1;}

  :is(.archive-list, .archive-view) .archive-row-title {position: unset;padding: 2.5px 0;border-bottom: var(--border-width) solid #000;}
  :is(.archive-list, .archive-view) .archive-row-title .issue-date {font-size: 15px;}
  :is(.archive-list, .archive-view) .archive-row-title .issue-name {font-size: 14px;}

  /* 이번 호 소개 팝오버: 공유 팝오버와 동일하게 화면 상단에 고정된 카드로 표시 */
  .intro-popover {position: fixed;top: 14vh;left: 15px;right: 15px;width: auto;z-index: 400;        width: calc(100% - 30px);}
  .intro-popover .intro-popover-box {position: relative;background: #e8d07a;border-width: 4.5px;max-height: 70vh;overflow-y: auto;padding: 7px 33px 7px 8px;}
  .intro-popover .intro-popover-box p {font-size: 15px;margin-bottom: 0;}
  .intro-popover .intro-popover-close {position: absolute;top: 0;right: 0;}

  .about {border-top: var(--border-width) solid #000;}
  .about .btn-about {width: 100%;font-size: 15px;}

  .archive-row .row-spacer {display: none;}
  .archive-list .archive-row:first-child {border-top: 0;}
  .archive-list .archive-row:last-child {border-bottom: 0;}
  .archive-list .archive-row .row-content {min-height: auto;}
  .archive-list .archive-row .num {grid-column: 1 / 3;font-size: 16px;padding-top: 0;word-break: keep-all;}
  .archive-list .archive-row .content {grid-column: 3 / -1;padding-right: 5px;}
  .archive-list .archive-row .content.intro-content {grid-column: 1 / -1;padding-bottom: 24px;}
  .archive-list .archive-row .content .intro-text {font-size: 12px;font-weight: 400;}
   .archive-list .archive-row .content .intro-text + .intro-text {margin-top: 28px;}
   .archive-list .archive-row .content .intro-text.indent {padding-left: 24px;margin-top: 0;}

  .archive-list .archive-row .content h3 {font-size: 14px;margin-bottom: 0;}
  .archive-list .archive-row .content .byline {font-size: 14px;margin-bottom: 0;}
  .archive-list .archive-row .content .desc {font-size: 15px;font-weight: 400;}
  .archive-list .archive-row .content .intro {font-size: 15px;}
  .archive-list .archive-row .content .about-text {font-size: 15px;margin-bottom: 20px;}
  .archive-list .archive-row .content .about-img {height: 180px;margin-top: -20px;}
   .archive-list .archive-row .content .about-img img {max-width: 100%;}
  .archive-list .archive-row .thumb {display: none;}

  /* ---- 지난호 (archive) list rows ---- */
  .issue-list .issue-row {grid-template-columns: 1fr;gap: 6px;}
  .issue-list .issue-row .row-content {grid-template-columns: repeat(7, 1fr);gap: 7.5px;padding: 7px 0;min-height: unset;}
  .issue-list .issue-row .issue-thumbs {display: none;}
  .issue-list .issue-row .issue-meta {grid-column: 1 / 3;}
  .issue-list .issue-row .issue-meta .issue-date {font-size: 15px;margin-top: 0;word-break: keep-all;}
  .issue-list .issue-row .issue-meta .issue-date .num {margin-top: 0;}
  .issue-list .issue-row .issue-titles {grid-column: 3 / -1;}
  .issue-list .issue-row .issue-titles .issue-title {font-size: 15px;margin: 0;}

  /* ---- 상세 (article detail) ---- */
  .article-wrap {grid-template-columns: 1fr;gap: 0;margin-top: 0;padding-bottom: 0; /*margin-top: 18px;*/}
  .article-wrap + .back-to-issue {display: flex;}

  /* article-byline: byline-authors stays inline at the bottom of the
     article; byline-notes (footnotes) opens as its own popover card
     instead, positioned by JS (positionByline in ui_common.js). */
  .article-wrap .article-byline {display: block;order: 2;padding: 18px 0 30px 0;border-top: var(--border-width) solid #000;}
  .article-wrap .article-byline .byline-authors {position: static;}
  .article-wrap .article-byline .byline-author {font-size: 10px;}
  .article-wrap .article-byline .byline-author + .byline-author {margin-top: 30px;}
  .article-wrap .article-byline .byline-author p:not(.by-name, .by-links) {padding-right: 0;}
  .article-wrap .article-byline .byline-author .by-name {margin-bottom: 12px;}
  .article-wrap .article-byline .byline-author .by-links {margin-top: 17px;}

  /* notes popover: hidden until a footnote-ref opens it. top is set
     inline by JS to sit 1px below whichever footnote-ref opened it;
     14vh here is only the fallback before JS runs. */
  .article-wrap .byline-notes {display: none;}
  .article-wrap .byline-notes .notes-title {display: none;}
  .article-wrap .byline-notes ol li {position: static;margin-bottom: 0;font-size: 12px;padding-right: 23px;}
  .article-wrap .byline-notes.open {display: block;position: fixed;top: 14vh;left: 15px;right: 15px;max-height: 70vh;overflow-y: auto;background: #e8d07a;border: 4.5px solid #000;padding: 10px;z-index: 400;}
  .article-wrap .byline-notes.open .byline-close {display: block;}
  .article-wrap .byline-notes .byline-close {display: flex;align-items: center;justify-content: center;position: absolute;top: 0;right: 0;padding: 10px;background: transparent;color: var(--black-clolor);font-size: 16px;line-height: 1;cursor: pointer;}
  .article-wrap .byline-notes .byline-close:before {content: "";display: inline-block;vertical-align: middle;width: 13px;height: 13px;background: url("../img/common/ico_close.svg") center center no-repeat;background-size: cover;}

  .article-wrap .article-body {border-left: 0 solid #000;padding: 0;}

  .article-wrap .article-body .article-cover {grid-template-columns: 1fr;padding: 0; /*padding: 14.5px 0;*/}
  .article-wrap .article-body .article-cover .article-cover-main {padding: 19px 0 17px;}
  .article-wrap .article-body .article-cover .article-cover-category {flex-direction: row;gap: 8px;border-left: 0;border-bottom: var(--border-width) solid #000;padding: 18px 0 16px;order: -1;}
  .article-wrap .article-body .article-cover .article-title {font-size: 16px;margin-top: 0;margin-bottom: -2px;}
  .article-wrap .article-body .article-cover .category-kr {font-size: 16px;}
  .article-wrap .article-body .article-cover .category-en {font-size: 16px;}
  /* byline trigger row, shown right under the title */
  .article-wrap .article-body .article-cover .byline-trigger {display: inline-flex;align-items: center;gap: 6px; /*order: -1;*/ padding: 0;background: none;border: none;font: inherit;color: var(--black-clolor);cursor: pointer;}
  .article-wrap .article-body .article-cover .byline-trigger .byline-trigger-name {font-size: 12px;font-weight: 500;}
  .article-wrap .article-body .article-cover .byline-trigger .byline-trigger-icon {display: inline-flex;align-items: center;justify-content: center;width: 16px;height: 16px;border: 1.5px solid var(--black-clolor);border-radius: 50%;font-size: 11px;font-weight: 800;}

  .article-wrap .article-body .article-lede {font-size: 14px;/*line-height: 1.5;*/padding: 10px 0;}

  .article-wrap .article-body .article-content {padding: 15px 0;}
  .article-wrap .article-body .article-content > h4 {font-size: 14px;margin-top: 10px;}
  .article-wrap .article-body .article-content h4.text-subtitle {padding-left: 27px;margin-bottom: 29px;margin-top: 27px;font-size: 12px;}
  .article-wrap .article-body .article-content h4.text-subtitle.type2 {font-size: 12px;}
  .article-wrap .article-body .article-content > p {font-size: 12px; /* text-indent: 24px;*/}
  .article-wrap .article-body .article-content p.text-first {margin-top: 26px;}
  .article-wrap .article-body .article-content p.text-last:after {vertical-align: -5%;width: 37px;height: 8px;margin-left: 3px;}
  .article-wrap .article-body .article-content p.text-indent {text-indent: 27px;}
  .article-wrap .article-body .article-content p.text-pdx {padding-left: 27px;padding-right: 27px;}

  /* a footnote-ref opens the notes popover, filtered to just its own note */
  .article-wrap .article-body .article-content .footnote-ref {cursor: pointer;color: #9E978E;}
  .article-wrap .article-body .article-content .footnote-ref::after {vertical-align: 5px;font-size: 8px;}

  .article-wrap .article-body .article-content > p.dialogue-line {gap: 4px;}
  .article-wrap .article-body .article-content > p.dialogue-line + p.dialogue-line {margin-top: 26px;}
  .dialogue-line .dialogue-tag {font-size: 12px;margin-top: 4.5px;/*padding: 0;*/}

  .pull-quote {padding-left: 27px;padding-right: 27px;margin-top: 27px;margin-bottom: 28px;}
  .pull-quote p {font-size: 12px;}
  .pull-quote cite {font-size: 12px;margin-top: 0;}
  .pull-quote cite.type2 {margin-top: 26px;line-height: 180%;}
  .pull-quote.bdt1 {padding-top: 10px;margin-top: 22px;margin-bottom: 0;border-top: var(--border-width) solid #000;}

  /* 십자말 풀이 */ 
  .crossword {--cw-border: 1px;margin: 34px 0 9px 0;}
  .crossword .crossword-heading {font-size: 12px;margin-bottom: 15px;}
  .crossword .crossword-board {max-width: 100%;container-type: inline-size;}
  .crossword .crossword-board .crossword-grid .crossword-cell .crossword-cell-num {font-size: max(9px, 2cqw);top: 1px;left: 1px;}
  .crossword .crossword-board .crossword-grid .crossword-cell .crossword-cell-letter {font-size: min(17px, 5.6cqw);}
  .crossword .crossword-board .crossword-grid .crossword-cell .crossword-cell-input {font-size: min(17px, 5.6cqw);}
  .crossword .crossword-board .crossword-grid .crossword-cell .crossword-cell-input:focus {outline: 1.5px solid var(--black-clolor);outline-offset: -1.5px;}
  .crossword .crossword-reveal-btn {margin-top: 15px;}
  .crossword .crossword-reveal-btn .crossword-reveal-cell {width: 24px;height: 24px;font-size: 12px;}
  .crossword .crossword-clues {max-width: 100%;margin-top: 16px;}
  .crossword .crossword-clues:before {width: 0.5px;left: 50%;}
  .crossword .crossword-clues .crossword-clue-col:first-child {padding-right: 24px;}
  .crossword .crossword-clues .crossword-clue-col:last-child {padding-left: 24px;}
  .crossword .crossword-clues .crossword-clue-heading {font-size: 13px;margin-bottom: 14px;}
  .crossword .crossword-clues .crossword-clue {margin-bottom: 29px;}
  .crossword .crossword-clues .crossword-clue .crossword-clue-head {font-size: 12px;}
  .crossword .crossword-clues .crossword-clue .crossword-clue-text {font-size: 12px;}
  .crossword .crossword-clues .crossword-clue .crossword-clue-hint {font-size: 12px;}

  /* ---- 사이드 이미지 / 이전·다음 글 ---- */
  .article-wrap .side-figure {margin: 17px 0;}
  .article-wrap .side-figure img + img {margin-top: 16px;}
  .article-wrap .side-figure figcaption {font-size: 10px;margin-top: 0;}

  .article-wrap .article-nav {display: none;grid-column: 1;margin-top: 0;}
  .article-wrap .article-nav .article-nav-links {grid-template-columns: 1fr;padding: 0;}
  .article-wrap .article-nav .article-nav-links .article-nav-link a {padding: 22.5px 0;}
  .article-wrap .article-nav .article-nav-links .article-nav-link a:first-child {border-right: none;border-bottom: 1px solid rgba(0, 0, 0, 0.5);text-align: left;}
  .article-wrap .article-nav .article-nav-links .article-nav-link a:last-child {text-align: right;}
  .article-wrap .article-nav .article-nav-link .label {font-size: 13.5px;margin-bottom: 10px;}
  .article-wrap .article-nav .article-nav-link .title {font-size: 18px;}
  .back-to-issue {font-size: 12px;font-weight: 400;padding: 12px 0;text-align: left; display: flex;align-items: center;border-bottom: 0;}
  .back-to-issue:before {content: '←';display: block;margin-right: 4px;}

  /* ---- 푸터 ---- */
  .site-footer {flex-direction: column;align-items: flex-start;gap: 10px;margin-top: 0;padding-top: 15px;border-top: var(--border-width) solid #000;}
  .site-footer .footer-info {text-align: left;font-size: 8px;}

  /* ---- About Us 페이지 ---- */
  .about-page {padding: 15px 0 30px;}
  .about-eyebrow, .about-heading, .about-tagline {font-size: 18px;}
  .about-desc {font-size: 14px;text-indent: 24px;}
  .about-divider {margin: 24px 0;}
  .about-columns .about-section-title {margin-bottom: 22px;font-size: 12px;/*line-height: 1.36;*/}
  .about-columns .about-credit .credit-row {margin-bottom: 22px;}
  .about-columns .about-credit .credit-row dt {font-size: 12px;/*line-height: 1.36;*/}
  .about-columns .about-credit .credit-row dd {font-size: 12px;}
  .about-columns .about-layers .layer-item {margin-bottom: 22px;}
  .about-columns .about-layers .layer-item .layer-title {font-size: 12px;/*line-height: 1.36;*/}
  .about-columns .about-layers .layer-item .layer-title + p {font-size: 12px;}
  .about-columns .about-layers .about-section-title {padding-top: 10px;}
}

/* 모바일 세로 : -430px */
@media all and (max-width:430px) {
   /* ---------- Utilities ---------- */
   .m-visible {display: block;}
}