/* =====================================================================
   LuaLoka — 매거진형 다국어 블로그 스타일 (BEM)
   - 외국인 대상 한국 정보 매거진 / 카드형 / 반응형 / 광고 친화
   ===================================================================== */

:root {
  --c-bg: #ffffff;
  --c-surface: #f6f7f9;
  --c-line: #e7e9ee;
  --c-text: #1d2026;
  --c-sub: #6b7280;
  --c-brand: #d6336c;        /* K-매거진 포인트(분홍/마젠타) */
  --c-brand-dark: #a61e4d;
  --c-accent: #1c7ed6;
  --radius: 14px;
  --shadow: 0 2px 12px rgba(20,22,30,.06);
  --shadow-hover: 0 10px 28px rgba(20,22,30,.12);
  --max: 1200px;
  --gap: 24px;
  --font: "Pretendard", "Pretendard Variable", system-ui, -apple-system, "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.65;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.3; margin: 0; }

.container { max-width: var(--max); margin-inline: auto; padding-inline: 20px; width: 100%; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-brand); color: #fff; padding: 10px 16px; z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; border-radius: 8px; }

/* ── 헤더 ───────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  max-width: var(--max); margin-inline: auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 20px;
}
.site-header__brand { display: flex; align-items: center; }
.site-header__logo-img { height: 46px; width: auto; display: block; }
.site-header__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; }
.site-header__toggle span { width: 24px; height: 2px; background: var(--c-text); border-radius: 2px; transition: .25s; }

.site-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.site-nav__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav__link {
  display: inline-block; padding: 8px 12px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; color: var(--c-text); transition: .2s;
}
.site-nav__link:hover { background: var(--c-surface); color: var(--c-brand); }
.site-nav__link.is-active { background: var(--c-brand); color: #fff; }

.site-search { display: flex; align-items: center; background: var(--c-surface); border-radius: 999px; padding: 4px 6px 4px 14px; }
.site-search__input { border: 0; background: none; outline: none; font-size: 14px; width: 150px; font-family: inherit; }
.site-search__btn { border: 0; background: none; cursor: pointer; font-size: 15px; padding: 4px 8px; }

/* ── 언어 스위치 ─────────────────────────────────────── */
.lang-switch { position: relative; }
.lang-switch__btn {
  border: 1px solid var(--c-line); background: #fff; border-radius: 999px;
  padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.lang-switch__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
  box-shadow: var(--shadow-hover); list-style: none; margin: 0; padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .2s; z-index: 120;
}
.lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; transform: none; }
.lang-switch__link { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.lang-switch__link:hover { background: var(--c-surface); }
.lang-switch__link.is-active { color: var(--c-brand); font-weight: 700; }

/* ── 히어로 ─────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; border-bottom: 1px solid var(--c-line);
  min-height: 340px; display: flex; align-items: center;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__bg { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(40,12,24,.10) 0%, rgba(40,12,24,.45) 100%);
}
.hero__inner { position: relative; z-index: 2; max-width: var(--max); margin-inline: auto; padding: 64px 20px; text-align: center; width: 100%; }
.hero__title { font-size: clamp(26px, 4.5vw, 46px); font-weight: 800; letter-spacing: -1px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.hero__sub { color: rgba(255,255,255,.94); margin-top: 12px; font-weight: 600; font-size: clamp(14px, 2vw, 18px); text-shadow: 0 1px 10px rgba(0,0,0,.3); }

/* ── 섹션 ───────────────────────────────────────────── */
.section { padding: 40px 0 8px; }
.section--muted { background: var(--c-surface); padding: 48px 0; margin-top: 40px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.section__title { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.section__more { color: var(--c-brand); font-weight: 600; font-size: 14px; white-space: nowrap; }

/* ── 카드 그리드 ─────────────────────────────────────── */
.card-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.card-grid__ad { grid-column: 1 / -1; }

.card {
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: .25s; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card__thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: block; background: var(--c-surface); }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: .4s; }
.card:hover .card__thumb img { transform: scale(1.06); }
.card__badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; }
.card__badge--hot { background: var(--c-brand); }
.card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__meta { display: flex; align-items: center; gap: 8px; }
.card__cat { font-size: 12px; font-weight: 700; color: var(--c-brand); }
.card__lang { font-size: 10px; font-weight: 700; color: var(--c-sub); border: 1px solid var(--c-line); border-radius: 4px; padding: 1px 5px; }
.card__title { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.card__title a:hover { color: var(--c-brand); }
.card__desc { font-size: 13.5px; color: var(--c-sub); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 8px; font-size: 12px; color: var(--c-sub); }
.card__more { color: var(--c-brand); font-weight: 600; }

/* ── 페이지 헤드 / 브레드크럼 ─────────────────────────── */
.page-head { padding-top: 32px; padding-bottom: 8px; }
.page-head--center { text-align: center; }
.page-head__title { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin-top: 6px; }
.page-head__title small { font-size: 16px; color: var(--c-sub); font-weight: 600; }
.breadcrumb { display: flex; gap: 8px; font-size: 13px; color: var(--c-sub); align-items: center; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--c-brand); }

/* ── 칩(2Depth) ─────────────────────────────────────── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 16px; }
.chip { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--c-line); background: #fff; font-size: 13.5px; font-weight: 600; }
.chip:hover { border-color: var(--c-brand); color: var(--c-brand); }
.chip.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }

/* ── 본문/사이드 레이아웃 ─────────────────────────────── */
.layout { display: grid; grid-template-columns: 1fr 300px; gap: 36px; padding-top: 24px; padding-bottom: 56px; align-items: start; }
.layout__side { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 24px; }
.widget { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 18px; }
.widget--ad { background: none; border: 0; padding: 0; }
.widget__title { font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: r; }
.rank__item { display: flex; gap: 12px; align-items: flex-start; }
.rank__num { flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--c-brand); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.rank__link { font-size: 14px; font-weight: 600; }
.rank__link:hover { color: var(--c-brand); }

/* ── 게시글 상세 ─────────────────────────────────────── */
.post { padding-top: 28px; }
.post__title { font-size: clamp(24px, 3.5vw, 36px); font-weight: 800; letter-spacing: -.8px; margin: 10px 0; }
.post__meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--c-sub); flex-wrap: wrap; }
.post__cat { color: var(--c-brand); font-weight: 700; }
.post__lang { border: 1px solid var(--c-line); border-radius: 6px; padding: 2px 8px; }
.post__hero { margin: 24px auto; }
.post__hero img { width: 100%; border-radius: var(--radius); aspect-ratio: 16/10; object-fit: cover; }
.post__body { max-width: 760px; font-size: 17px; line-height: 1.85; }
.post__body p { margin: 0 0 20px; }
.post__body h2 { font-size: 24px; font-weight: 800; letter-spacing: -.4px; margin: 36px 0 14px; padding-top: 6px; }
.post__body h3 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; margin: 28px 0 12px; }
.post__body h2 + p, .post__body h3 + p { margin-top: 0; }
.post__body ul, .post__body ol { margin: 0 0 20px; padding-left: 22px; }
.post__body li { margin-bottom: 8px; }
.post__img { margin: 24px 0; }
.post__img img { width: 100%; border-radius: var(--radius); }

.post__actions { max-width: 760px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 8px; border-top: 1px solid var(--c-line); margin-top: 24px; }
.post__actions-label { font-weight: 700; font-size: 14px; margin-right: 4px; }
.btn-share { border: 1px solid var(--c-line); background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: .2s; }
.btn-share:hover { border-color: var(--c-brand); color: var(--c-brand); }
.btn-share--fb:hover { border-color: #1877f2; color: #1877f2; }
.btn-share--x:hover { border-color: #000; color: #000; }
.btn-share--ln:hover { border-color: #06c755; color: #06c755; }

/* ── 이전/다음 ───────────────────────────────────────── */
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 28px; padding-bottom: 8px; }
.prevnext__item { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 16px 20px; transition: .2s; }
.prevnext__item:hover { border-color: var(--c-brand); background: var(--c-surface); }
.prevnext__item--next { text-align: right; }
.prevnext__label { display: block; font-size: 12px; color: var(--c-sub); font-weight: 700; margin-bottom: 6px; }
.prevnext__title { font-weight: 700; font-size: 15px; }

/* ── 광고 슬롯 ───────────────────────────────────────── */
.ad-slot { margin: 24px 0; min-height: 90px; display: flex; align-items: center; justify-content: center; background: var(--c-surface); border: 1px dashed var(--c-line); border-radius: 10px; overflow: hidden; }
.ad-slot::before { content: "AD"; position: absolute; font-size: 10px; color: #b6bcc6; letter-spacing: 2px; }
.ad-slot ins { position: relative; z-index: 1; width: 100%; }
.ad-slot--side { min-height: 250px; }
/* 메인 상단 가늘고 긴 띠 광고 */
.ad-strip { margin: 18px 0 6px; }
.ad-strip .ad-slot { margin: 0; min-height: 90px; max-height: 110px; }
.home-lead { font-size: clamp(20px, 3vw, 30px); font-weight: 800; letter-spacing: -.6px; padding: 18px 0 4px; }

/* ── 일반 게시판형 리스트 (일자리 등) ─────────────────── */
.board { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c-text); }
.board__item { border-bottom: 1px solid var(--c-line); }
.board__link { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 16px; padding: 18px 8px; transition: background .15s; }
.board__link:hover { background: var(--c-surface); }
.board__cat { font-size: 12.5px; font-weight: 700; color: var(--c-brand); text-align: center; }
.board__title { font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.board__link:hover .board__title { color: var(--c-brand); }
.board__desc { display: none; }
.board__arrow { color: var(--c-sub); font-size: 16px; }
.board__ad { padding: 16px 0; }

/* ── 빈 상태 ─────────────────────────────────────────── */
.empty { padding: 60px 0; text-align: center; color: var(--c-sub); font-size: 15px; }

/* ── 언어 선택 랜딩 ──────────────────────────────────── */
.lang-landing { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 40px 20px; background: linear-gradient(135deg, #fff0f5 0%, #eef4ff 100%); }
.lang-landing__logo { margin: 0; }
.lang-landing__logo img { width: clamp(220px, 40vw, 360px); height: auto; }
.lang-landing__sub { color: var(--c-sub); font-weight: 600; margin-top: 8px; text-align: center; }
.lang-landing__hero { text-align: center; }
.lang-landing__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; width: 100%; max-width: 620px; }
.lang-landing__item { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 24px 16px; box-shadow: var(--shadow); transition: .2s; }
.lang-landing__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--c-brand); }
.lang-landing__code { font-size: 13px; font-weight: 800; color: var(--c-brand); letter-spacing: 1px; }
.lang-landing__name { font-size: 15px; font-weight: 600; }

/* ── 푸터 (간소형) ───────────────────────────────────── */
.site-footer { background: #16181d; color: #c8ccd4; margin-top: 56px; }
.site-footer__inner { max-width: var(--max); margin-inline: auto; padding: 32px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-footer__brand img { height: 34px; width: auto; display: block; opacity: .95; }
.site-footer__langs { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 18px; flex-wrap: wrap; }
.site-footer__langs a { font-size: 13px; color: #9aa0ab; }
.site-footer__langs a:hover, .site-footer__langs a.is-active { color: #fff; }
.site-footer__bottom { border-top: 1px solid #2a2d34; text-align: center; padding: 16px; font-size: 12.5px; color: #6b7280; }

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .layout__side { position: static; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .site-header__toggle { display: flex; }
  .site-nav {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 320px);
    background: #fff; flex-direction: column; align-items: stretch; gap: 14px;
    padding: 80px 22px 30px; box-shadow: -8px 0 30px rgba(0,0,0,.15);
    transform: translateX(100%); transition: transform .28s; overflow-y: auto; z-index: 110;
  }
  .site-nav.is-open { transform: none; }
  .site-nav__list { flex-direction: column; gap: 2px; }
  .site-nav__link { display: block; padding: 12px; }
  .site-search { width: 100%; }
  .site-search__input { flex: 1; width: auto; }
  .lang-switch__menu { right: auto; left: 0; }
  .prevnext { grid-template-columns: 1fr; }
  .prevnext__item--next { text-align: left; }
}
@media (max-width: 520px) {
  .card-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .card__body { padding: 12px; }
  .card__title { font-size: 14.5px; }
  .card__desc { display: none; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .board__link { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .board__cat { grid-column: 1 / -1; text-align: left; }
  .board__arrow { grid-row: 2; }
}

/* 메뉴 오픈 시 배경 스크롤 잠금 + 딤 */
body.nav-open { overflow: hidden; }
/* 백드롭은 '시각 전용' — pointer-events:none 으로 탭을 절대 가로채지 않는다.
   (헤더 backdrop-filter 의 쌓임 맥락 때문에 백드롭이 메뉴 항목 위로 올라와
    모바일에서 카테고리 탭이 닫기로 가로채이던 오류 수정. 바깥 탭 닫기는 JS가 처리) */
.nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); opacity: 0; visibility: hidden; transition: .28s; z-index: 105; pointer-events: none; }
.nav-backdrop.is-open { opacity: 1; visibility: visible; }