/*
Theme Name: Evers Magazine
Theme URI: https://incheon.drevers-magazine.com/
Author: Dr.Evers Marketing
Description: 닥터에버스 지점 웹매거진 전용 가벼운 클래식 테마. 배너, 지점 정보, 검색을 관리자 화면에서 관리합니다.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: evers-magazine
*/

:root {
	--page: #F4F7F6;
	--paper: #FFFFFF;
	--ink: #101C1B;
	--muted: #5A6A69;
	--line: #D6DEDD;
	--teal: #0B8D8C;
	--teal-deep: #0A5452;
	--teal-tint: #E3F1F0;
	--event: #F25C1E;
	--event-tint: #FFF0E8;
	--sans: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
	color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.no-scroll, html.no-scroll body { overflow: hidden; }
body {
	margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans);
	font-size: 15px; line-height: 1.6; overflow-x: hidden;
	word-break: keep-all; overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.in { max-width: 1040px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
.hint { font-size: 13px; color: var(--muted); background: #FFF8E1; border: 1px dashed #E0C060; padding: 8px 12px; }
.hint.pad { margin: 12px 0; }
.btn { display: inline-block; background: var(--teal); color: #fff; font-weight: 700; font-size: 14px; padding: 9px 16px; }

/* ---------- strip ---------- */
.strip { background: var(--event); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 8px 16px; font-size: 13px; text-align: center; }
.strip .tag { font-size: 10px; letter-spacing: .08em; background: rgba(0,0,0,.18); padding: 1px 7px; border-radius: 3px; }
.strip .go { border-bottom: 1px solid rgba(255,255,255,.7); }

/* ---------- masthead ---------- */
.masthead { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,640px); grid-template-areas: "logo slot" "nav nav"; gap: 0 20px; align-items: center; padding-top: 14px; }
.logo { grid-area: logo; display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo i { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--teal); color: var(--teal); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 13px; flex: none; }
.logo-img { height: 44px; width: auto; flex: none; }
.logo-text strong { display: block; font-size: 20px; line-height: 1.15; letter-spacing: -.02em; }
.logo-text small { font-size: 11px; letter-spacing: .12em; color: var(--teal-deep); }
.burger { grid-area: burger; display: none; width: 40px; height: 40px; padding: 8px; border: 0; background: none; cursor: pointer; align-content: center; gap: 5px; }
.burger i { display: block; height: 2px; background: var(--ink); }
.nav { grid-area: nav; margin-top: 14px; background: var(--teal); color: #fff; box-shadow: 0 0 0 100vmax var(--teal); clip-path: inset(0 -100vmax); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav .menu { display: flex; flex-wrap: wrap; }
.nav .menu a { display: block; font-size: 14px; font-weight: 700; padding: 13px 14px; }
.nav .menu .current-menu-item a, .nav .menu a:hover { background: var(--teal-deep); }
.nav .off { background: #fff; color: var(--teal-deep); font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 18px; white-space: nowrap; }
.slot { grid-area: slot; min-width: 0; }
.slot-hint { font-size: 12px; color: var(--muted); background: #FFF8E1; border: 1px dashed #E0C060; padding: 10px 12px; }

/* ---------- banner carousel ---------- */
.car { min-width: 0; }
.track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.track::-webkit-scrollbar { display: none; }
.sl { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; min-width: 0; }
.bimg { display: block; height: 96px; overflow: hidden; background: var(--event-tint); border: 1px solid #F7C7AE; min-width: 0; }
.bimg-pic { width: 100%; height: 100%; object-fit: cover; }
.bt { display: grid; gap: 2px; align-content: center; height: 100%; padding: 10px 16px; }
.bt small { color: var(--event); font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.bt strong { font-size: 16px; line-height: 1.35; }
.bt em { font-style: normal; color: var(--muted); font-size: 12px; }
.sl .btn { background: var(--event); display: grid; place-items: center; text-align: center; font-size: 13px; padding: 0 16px; }
.ctl { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.ctl button { font: inherit; font-size: 15px; line-height: 1; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #F7C7AE; background: #fff; color: var(--event); cursor: pointer; }
.ctl .cnt { font-size: 11px; color: var(--muted); min-width: 30px; text-align: center; }
.dots { display: flex; gap: 6px; align-items: center; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: #D6DEDD; transition: width .2s; }
.dots i.on { width: 18px; background: var(--event); }
@media (prefers-reduced-motion: reduce) { .dots i { transition: none; } .track { scroll-behavior: auto; } }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); grid-template-rows: 1fr 1fr; gap: 4px; height: 430px; margin-top: 10px; }
.hero.n1 { grid-template-columns: minmax(0,1fr); grid-template-rows: none; height: 400px; }
.hero.n1 .tile.big { grid-row: auto; }
.hero.n2 .tile.t2 { grid-row: span 2; }
.tile { position: relative; overflow: hidden; color: #fff; display: flex; align-items: flex-end; padding: 18px; background: #0F5755; min-width: 0; }
.tile.big { grid-row: span 2; padding: 26px; }
.tile.t2 { background: #1F7C7A; }
.tile.t3 { background: #2B8E8B; }
.tile::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px); }
.tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.tile::before { z-index: 1; }
.tile:has(.tile-img)::before { background: linear-gradient(to top, rgba(6,30,29,.94) 0%, rgba(6,30,29,.78) 30%, rgba(6,30,29,.38) 58%, rgba(6,30,29,0) 82%); }
.tile .tx { position: relative; z-index: 2; display: block; text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.35); }
.tile .cat { text-shadow: none; }
.tile .cat { display: inline-block; background: var(--teal-tint); color: var(--teal-deep); font-size: 11px; font-weight: 700; padding: 1px 8px; margin-bottom: 8px; }
.tile h3 { font-size: 16px; line-height: 1.4; font-weight: 700; }
.tile.big h3 { font-size: 28px; line-height: 1.32; font-weight: 900; letter-spacing: -.02em; }
.tile .d { display: block; font-size: 12px; opacity: .85; margin-top: 6px; }

/* ---------- main + sidebar ---------- */
.cols { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 20px; padding-top: 22px; padding-bottom: 36px; }
.pairs { display: grid; gap: 18px; min-width: 0; align-content: start; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.blk { background: #fff; padding: 16px 16px 14px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.bh { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--teal); }
.bh h2 { background: var(--teal); color: #fff; font-size: 14px; padding: 5px 14px; font-weight: 700; }
.bh a { font-size: 12px; color: var(--muted); }
.lead .img { aspect-ratio: 3/2; background: var(--teal-tint); border: 1px solid #C8E2E0; overflow: hidden; }
.lead .img img { width: 100%; height: 100%; object-fit: cover; }
.lead h3 { font-size: 17px; font-weight: 700; line-height: 1.45; margin-top: 8px; }
.lead p { font-size: 13px; color: var(--muted); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lead h3, .cf h3, .row h2 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.li .t { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lead .d, .li .d, .cf .d { font-size: 12px; color: var(--muted); }
.li { display: grid; }
.li a { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; line-height: 1.5; }
.li a:hover, .lead h3 a:hover, .cf h3 a:hover { color: var(--teal-deep); }
.wide { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 12px 18px; align-items: start; }
.wide .bh { grid-column: 1 / -1; }
.wide .lead .img { aspect-ratio: 3/2; }
.wide .lead h3 { font-size: 20px; line-height: 1.4; }
.wide.rev .li { order: 1; }
.wide.rev .lead { order: 2; }
/* only one post in a wide block: image beside the text instead of an empty right column */
.wide.solo .lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); column-gap: 18px; align-content: start; }
.wide.solo .lead .img { grid-column: 1; grid-row: 1 / span 4; }
.wide.solo .lead > :not(.img) { grid-column: 2; }
.wide.solo.rev .lead { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); }
.wide.solo.rev .lead .img { grid-column: 2; }
.wide.solo.rev .lead > :not(.img) { grid-column: 1; }
.band { background: var(--teal-tint); }
.band .lead .img { background: #fff; }
.sm .cf h3 { font-size: 16px; font-weight: 700; line-height: 1.45; }
.sm .cf p { font-size: 13px; color: var(--muted); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vb { background: var(--teal-deep); color: #fff; }
.vb .bh { border-bottom-color: rgba(255,255,255,.35); }
.vb .bh h2 { background: #fff; color: var(--teal-deep); }
.vb .bh a { color: #BFE0DC; }
.vb .vt { font-size: 15px; font-weight: 700; line-height: 1.45; }
.vb .li a { border-top-color: rgba(255,255,255,.2); }
.vb .li a:hover { color: #fff; }
.vb .li .d { color: #9FCBC7; }
.vthumb { position: relative; display: grid; place-items: center; aspect-ratio: 16/9; background: #0F6361; overflow: hidden; }
.vthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vthumb .play { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.vthumb .play::before { content: ""; border-left: 11px solid var(--teal-deep); border-block: 7px solid transparent; margin-left: 3px; }
.blk.empty { background: #fff; }

.side { display: grid; gap: 18px; align-content: start; min-width: 0; }
.box { background: #fff; padding: 16px; display: grid; gap: 10px; min-width: 0; }
.box h4 { font-size: 14px; font-weight: 700; padding-bottom: 8px; border-bottom: 2px solid var(--teal); }
.box.info { background: var(--teal-tint); }
.box.info p { font-size: 13px; color: var(--muted); }
.btns { display: grid; gap: 6px; }
.btns a { text-align: center; font-size: 13px; font-weight: 700; padding: 8px; background: var(--teal); color: #fff; }
.btns a.o { background: #fff; color: var(--teal-deep); border: 1px solid var(--teal); }
.btns a.e { background: var(--event); }
.rank { display: grid; }
.rank li { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.rank li b { color: var(--teal); font-weight: 900; }
.sns { font-weight: 700; color: var(--teal-deep); font-size: 14px; }

/* search */
.sf { display: flex; border: 1.5px solid var(--teal); background: #fff; }
.sf input { flex: 1; min-width: 0; border: 0; padding: 8px 12px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); }
.sf button { border: 0; background: var(--teal); color: #fff; font: inherit; font-size: 13px; font-weight: 700; padding: 0 16px; cursor: pointer; }
.kw { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kw b { font-size: 12px; color: var(--muted); margin-right: 4px; }
.kw a { font-size: 13px; border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 2px 12px; }
.kw a:hover { border-color: var(--teal); }

/* ---------- article / list ---------- */
.art { background: #fff; padding: 22px 26px 26px; min-width: 0; align-self: start; }
.art.page { margin-top: 22px; margin-bottom: 36px; }
.crumb { font-size: 12px; color: var(--muted); }
.art-title { font-size: 28px; line-height: 1.4; font-weight: 900; letter-spacing: -.02em; margin-top: 8px; }
.by { font-size: 12px; color: var(--muted); margin-top: 8px; }
.art-img { margin-top: 16px; }
.art-img img { width: 100%; }
.entry { margin-top: 18px; font-size: 16px; line-height: 1.9; }
.entry > * + * { margin-top: 1em; }
.entry h2 { font-size: 22px; line-height: 1.4; margin-top: 1.6em; }
.entry h3 { font-size: 18px; line-height: 1.4; margin-top: 1.4em; }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry ul { list-style: disc; }
.entry ol { list-style: decimal; }
.entry a { color: var(--teal-deep); text-decoration: underline; }
.after { margin-top: 24px; border: 1px solid var(--teal); padding: 14px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.after strong { font-size: 14px; }
.rel { margin-top: 24px; }
.rel h4 { font-size: 14px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.arch-head { background: #fff; padding: 18px 20px; border-bottom: 2px solid var(--teal); }
.arch-head h1 { font-size: 22px; font-weight: 900; }
.arch-head p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.listcol { min-width: 0; display: grid; gap: 14px; align-content: start; }
.rows { display: grid; gap: 1px; background: var(--line); }
.row { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 16px; background: #fff; padding: 14px; }
.row .thumb { aspect-ratio: 3/2; background: var(--teal-tint); overflow: hidden; display: block; }
.row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.row h2 { font-size: 17px; font-weight: 700; line-height: 1.45; }
.row p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.row .mt { font-size: 12px; color: var(--muted); }
.row .mt span { color: var(--teal); font-weight: 700; margin-right: 6px; }
.empty { background: #fff; padding: 22px; display: grid; gap: 12px; font-size: 14px; }
.pagination { background: #fff; padding: 12px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pagination .page-numbers { border: 1px solid var(--line); padding: 4px 12px; font-size: 13px; }
.pagination .current { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ---------- footer ---------- */
.site-footer { background: var(--teal-deep); color: #D4ECEA; margin-top: 8px; }
.ft-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; padding-top: 20px; padding-bottom: 20px; font-size: 13px; }
.ft-grid b { display: block; color: #fff; font-weight: 500; margin-bottom: 2px; }

/* ---------- drawer (mobile menu) ---------- */
.drawer-wrap[hidden] { display: none; }
.drawer-wrap { position: fixed; inset: 0; z-index: 60; }
.dim { position: absolute; inset: 0; background: rgba(10,20,20,.45); }
.drawer { position: absolute; left: 0; top: 0; bottom: 0; width: min(84%, 340px); background: #fff; padding: 52px 18px 24px; display: grid; gap: 12px; align-content: start; overflow-y: auto; box-shadow: 4px 0 18px rgba(0,0,0,.2); }
.drawer h4 { font-size: 11px; letter-spacing: .14em; color: var(--muted); font-weight: 700; }
.drawer .close { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border: 0; background: none; font-size: 26px; color: var(--muted); cursor: pointer; }
.dcats a { display: block; font-size: 17px; font-weight: 700; padding: 11px 0; border-bottom: 1px solid var(--line); }
.drawer .off { background: var(--teal); color: #fff; text-align: center; font-weight: 700; padding: 11px; border-radius: 22px; }
.drawer .inf { font-size: 12px; color: var(--muted); line-height: 1.7; }

/* ---------- mobile bottom bar ---------- */
.cta-bar { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
	.masthead { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "logo burger" "nav nav" "slot slot"; padding-top: 10px; }
	.burger { display: grid; }
	.nav { margin-top: 8px; }
	.nav .menu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.nav .menu::-webkit-scrollbar { display: none; }
	.nav .menu a { white-space: nowrap; }
	.nav .off { display: none; }
	.slot { margin-top: 12px; }
	.sl { grid-template-columns: minmax(0,1fr); gap: 6px; }
	.bimg { height: auto; aspect-ratio: 3/1; }
	.sl .btn { padding: 8px 12px; }
	.hero { grid-template-columns: minmax(0,1fr); grid-template-rows: none; height: auto; }
	.tile { aspect-ratio: 16/9; min-height: 0; }
	.tile.big { grid-row: auto; aspect-ratio: 3/2; padding: 18px; }
	.tile.big h3 { font-size: 21px; }
	.cols { grid-template-columns: minmax(0,1fr); padding-top: 14px; }
	.pair, .wide { grid-template-columns: minmax(0,1fr); }
	.wide.rev .li, .wide.rev .lead { order: 0; }
	.wide.solo .lead, .wide.solo.rev .lead { grid-template-columns: minmax(0,1fr); }
	.wide.solo .lead .img, .wide.solo.rev .lead .img { grid-column: 1; grid-row: auto; }
	.wide.solo .lead > :not(.img), .wide.solo.rev .lead > :not(.img) { grid-column: 1; }
	.ft-grid { grid-template-columns: minmax(0,1fr); }
	.art { padding: 18px 16px 22px; }
	.art-title { font-size: 22px; }
	.row { grid-template-columns: 110px minmax(0,1fr); gap: 12px; }
	.cta-bar { display: flex; gap: 6px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid var(--line); padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
	.cta-bar a { flex: 1; display: grid; place-items: center; text-align: center; font-size: 12.5px; line-height: 1.25; font-weight: 700; padding: 8px 3px; min-height: 44px; background: var(--teal); color: #fff; border-radius: 6px; }
	.cta-bar a.e { background: var(--event); }
	.cta-bar a.o { background: #fff; color: var(--teal-deep); border: 1px solid var(--teal); }
	body { padding-bottom: 64px; }
}

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

/* Article building blocks: summary, table of contents, FAQ, sources, disclaimer */
.by strong { color: var(--ink, #1f2a2a); font-weight: 700; }
.entry .ev-summary { background: #E3F1F0; border-left: 4px solid var(--teal); padding: 16px 18px; border-radius: 0 6px 6px 0; }
.entry .ev-summary > p:first-child { font-weight: 900; margin: 0 0 6px; }
.entry .ev-summary ul { margin: 0; }
.entry .ev-toc { border: 1px solid var(--line, #d9e4e3); padding: 14px 18px; border-radius: 6px; }
.entry .ev-toc > p { font-weight: 900; margin: 0 0 6px; }
.entry .ev-toc ol { margin: 0; }
.entry .ev-toc li { line-height: 1.8; }
.entry .ev-toc a { text-decoration: none; }
.entry h2[id], .entry h3[id] { scroll-margin-top: 80px; }
.entry .wp-block-rank-math-faq-block .rank-math-question { font-size: 17px; margin: 1.2em 0 .3em; }
.entry .wp-block-rank-math-faq-block .rank-math-answer { margin: 0; }
.entry .ev-sources { font-size: 14px; line-height: 1.7; }
.entry .ev-sources li + li { margin-top: .5em; }
.ev-disclaimer { margin-top: 18px; padding: 12px 14px; font-size: 13px; line-height: 1.7; color: var(--muted); border-top: 1px solid var(--line, #d9e4e3); }

/* Tables inside articles */
.entry figure.ev-table { margin: 1.2em 0; overflow-x: auto; }
.entry .ev-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.65; }
.entry .ev-table th, .entry .ev-table td { border: 1px solid var(--line); padding: 10px 12px; vertical-align: top; text-align: left; }
.entry .ev-table thead th { background: var(--teal-tint); font-weight: 900; }
.entry .ev-table figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }