@charset "UTF-8";

/* ==========================================================================
   1. 기본 초기화 & 신문 종이 질감 배경
   ========================================================================== */
:root {
  --paper-bg: #efe9d9;
  --paper-sub: #e6dec8;
  --ink-navy: #13293d;
  --ink-black: #1e2022;
  --ink-gray: #4f5254;
  --ink-muted: #76736b;
  --accent-red: #b0372b;
  --rule-dark: #13293d;
  --rule-mid: #8e8778;
  --rule-light: #cbc3b1;
  --font-en-serif: 'Playfair Display', 'Cinzel', Georgia, serif;
  --font-kr-serif: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  --font-kr-hand: 'Nanum Pen Script', cursive;
  --font-en-hand: 'Dancing Script', cursive;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: var(--paper-bg);
  background-image:
    radial-gradient(rgba(19, 41, 61, 0.035) 1px, transparent 0),
    radial-gradient(rgba(176, 55, 43, 0.02) 1px, transparent 0);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
  color: var(--ink-black);
  font-family: var(--font-kr-serif);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent-red);
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input {
  font-family: inherit;
  border: 0;
  background: transparent;
  outline: none;
}

.gazette-container {
  max-width: 1380px;
  margin: 0 auto;
  padding: 16px 28px 50px;
}

/* ==========================================================================
   2. 상단 신문 마스트헤드 (THE WORLD ROAMER)
   ========================================================================== */
.header-top-rule {
  border-top: 2px solid var(--rule-dark);
  margin-bottom: 14px;
}

.masthead-grid {
  display: grid;
  grid-template-columns: 210px 1fr 210px;
  align-items: center;
  gap: 12px;
  padding: 4px 0 16px;
}

.masthead-left .left-keywords {
  font-family: var(--font-en-serif);
  font-size: 15px;
  color: var(--ink-navy);
  margin-bottom: 8px;
}

.masthead-left .left-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-gray);
}

/* 중앙 로고 타이틀 */
.masthead-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
}

.masthead-icon.compass-box {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
}

.compass-svg {
  width: 100%;
  height: 100%;
}

.masthead-icon.globe-box {
  width: 66px;
  height: 66px;
  border: 2px solid var(--ink-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  color: var(--ink-navy);
  overflow: hidden;
  flex-shrink: 0;
}

.main-newspaper-title {
  font-family: var(--font-en-serif);
  font-size: 68px;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 2px;
  color: var(--ink-navy);
  text-transform: uppercase;
}

.main-newspaper-title a:hover {
  color: var(--ink-navy);
}

.sub-newspaper-title {
  font-family: var(--font-en-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4.5px;
  color: var(--ink-navy);
  margin-top: 8px;
}

/* 우측 손글씨 & 비행기 */
.masthead-right {
  display: flex;
  justify-content: flex-end;
}

.handwritten-slogan {
  transform: rotate(-8deg);
  text-align: center;
  color: var(--ink-navy);
}

.handwritten-slogan .hw-line1,
.handwritten-slogan .hw-line2 {
  display: block;
  font-family: var(--font-kr-hand);
  font-size: 32px;
  line-height: 1.05;
}

.plane-underline {
  position: relative;
  width: 155px;
  height: 30px;
  margin-top: -4px;
}

.plane-svg {
  width: 100%;
  height: 100%;
}

.plane-underline i {
  position: absolute;
  right: -4px;
  top: -4px;
  font-size: 19px;
  transform: rotate(35deg);
}

/* ==========================================================================
   3. 중간 붉은 배너 & 네비게이션 바
   ========================================================================== */
.bulletin-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-top: 1.5px solid var(--rule-dark);
  border-bottom: 1.5px solid var(--rule-dark);
  min-height: 34px;
  font-family: var(--font-en-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ink-navy);
}

.bulletin-red-box {
  display: inline-block;
  background-color: var(--accent-red);
  color: #fff;
  padding: 5px 26px;
  font-size: 12px;
  letter-spacing: 2px;
}

.bulletin-right {
  text-align: right;
}

/* 메뉴바 */
.newspaper-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid var(--rule-dark);
  padding: 10px 4px;
}

.navbar-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
}

.navbar-menu li a,
.btn-open-drawer {
  font-family: var(--font-en-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--ink-navy);
  padding: 6px 2px;
  position: relative;
  cursor: pointer;
}

.navbar-menu li.active a {
  color: var(--accent-red);
}

.navbar-menu li.active a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -11px;
  width: 100%;
  height: 3px;
  background-color: var(--accent-red);
}

/* 검색창 */
.search-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-search-submit {
  font-size: 17px;
  color: var(--ink-navy);
  cursor: pointer;
}

.search-input {
  width: 195px;
  border-bottom: 1px solid var(--rule-dark);
  padding: 4px 2px;
  font-size: 13px;
  color: var(--ink-black);
}

/* ==========================================================================
   4. 신문 1면 상단 (오키나와 메인 특집 + 우측 TRAVEL STORIES)
   ========================================================================== */
.front-top-row {
  display: grid;
  grid-template-columns: 1fr 370px;
  margin-top: 20px;
  border-bottom: 1.5px solid var(--rule-mid);
}

.hero-feature {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 26px;
  padding-right: 26px;
  padding-bottom: 24px;
  border-right: 1px solid var(--rule-mid);
}

.hero-photo-link {
  display: block;
  height: 100%;
}

.hero-photo {
  width: 100%;
  height: 100%;
  min-height: 390px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1px solid rgba(0,0,0,0.12);
}

.badge-location {
  align-self: flex-start;
  background-color: var(--ink-navy);
  color: #fff;
  font-family: var(--font-en-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 12px;
}

.photo-script {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.65);
  transform: rotate(-5deg);
  margin-bottom: 6px;
}

.script-big {
  display: block;
  font-family: var(--font-en-hand);
  font-size: 46px;
  line-height: 1;
}

.script-small {
  display: block;
  font-family: var(--font-en-hand);
  font-size: 24px;
}

.hero-article-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.article-kicker {
  font-family: var(--font-en-serif);
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-red);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.article-main-heading {
  font-family: var(--font-kr-serif);
  font-size: 40px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--ink-navy);
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.article-sub-heading {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-black);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule-light);
}

.article-lead {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-gray);
  margin-bottom: 18px;
}

.article-byline {
  font-family: var(--font-en-serif);
  font-size: 13px;
  color: var(--ink-black);
  margin-bottom: 18px;
}

.article-more-box {
  border-top: 1px solid var(--rule-mid);
  border-bottom: 1px solid var(--rule-mid);
  padding: 10px 0;
}

.link-detail-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-navy);
}

/* 우측 TRAVEL STORIES */
.side-stories {
  padding-left: 24px;
  padding-bottom: 24px;
}

.side-stories-title {
  font-family: var(--font-en-serif);
  font-size: 17px;
  font-weight: 800;
  color: var(--ink-navy);
  letter-spacing: 1px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--rule-mid);
  margin-bottom: 14px;
}

.side-story-item {
  display: grid;
  grid-template-columns: 125px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-light);
}

.side-story-item:first-child {
  padding-top: 0;
}

.side-story-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ss-thumb {
  width: 125px;
  height: 92px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0,0,0,0.1);
}

.ss-cat {
  display: block;
  font-family: var(--font-en-serif);
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-red);
  margin-bottom: 2px;
}

.ss-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink-navy);
  margin-bottom: 4px;
}

.ss-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-gray);
  margin-bottom: 4px;
}

.ss-date {
  font-family: var(--font-en-serif);
  font-size: 11.5px;
  color: var(--ink-muted);
}

/* ==========================================================================
   5. 신문 1면 하단 (4대륙 칼럼 + NEXT DESTINATION + 세계지도 & 스탬프)
   ========================================================================== */
.front-bottom-row {
  display: grid;
  grid-template-columns: 1fr 370px;
}

.bottom-left-zone {
  padding-top: 20px;
  padding-right: 26px;
  border-right: 1px solid var(--rule-mid);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.four-columns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.continent-col {
  padding: 0 16px;
  border-right: 1px solid var(--rule-light);
  display: flex;
  flex-direction: column;
}

.continent-col:first-child {
  padding-left: 0;
}

.continent-col:last-child {
  padding-right: 0;
  border-right: none;
}

.col-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1.5px solid var(--rule-dark);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.col-continent {
  font-family: var(--font-en-serif);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink-navy);
}

.col-continent.red {
  color: var(--accent-red);
}

.col-viewmore {
  font-family: var(--font-en-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-gray);
}

.col-photo {
  width: 100%;
  height: 140px;
  background-size: cover;
  background-position: center;
  margin-bottom: 12px;
  border: 1px solid rgba(0,0,0,0.1);
}

.col-post-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink-navy);
  margin-bottom: 8px;
}

.col-post-excerpt {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-gray);
  margin-bottom: 14px;
  flex-grow: 1;
}

.col-post-meta {
  font-size: 12px;
  color: var(--ink-muted);
  padding-top: 8px;
  border-top: 1px dotted var(--rule-light);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* NEXT DESTINATION 바 */
.next-dest-banner {
  margin-top: 22px;
  border-top: 1.5px solid var(--rule-dark);
  border-bottom: 1.5px solid var(--rule-dark);
  padding: 12px 6px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.nd-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en-serif);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink-navy);
  letter-spacing: 1px;
  padding-right: 24px;
  border-right: 1px solid var(--rule-mid);
}

.nd-label i {
  font-size: 20px;
  transform: rotate(45deg);
}

.nd-trail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14.5px;
  font-weight: 600;
}

/* 우측 하단 지도 & 스탬프 */
.bottom-right-zone {
  padding-top: 20px;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.worldmap-box {
  position: relative;
  border: 1px solid var(--rule-mid);
  background-color: var(--paper-sub);
}

.vintage-worldmap {
  width: 100%;
  height: auto;
  display: block;
}

.map-script-top {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-en-hand);
  font-size: 17px;
  line-height: 1.15;
  color: var(--ink-navy);
  transform: rotate(-6deg);
  text-align: right;
}

.map-kor-note {
  position: absolute;
  top: 44%;
  right: 14px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-gray);
}

/* 스탬프 5종 */
.stamps-collection {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 14px;
  align-items: center;
}

.v-stamp {
  border: 2px dashed currentColor;
  padding: 6px 4px;
  text-align: center;
  font-family: var(--font-en-serif);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  background-color: rgba(255,255,255,0.25);
}

.v-stamp i {
  font-size: 22px;
  margin: 3px 0;
}

.st-top, .st-bot {
  font-size: 8.5px;
  font-weight: 800;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  width: 92%;
}

.stamp-asia { color: #b0372b; transform: rotate(-5deg); }
.stamp-europe { color: #2c3e50; transform: rotate(2deg); }
.stamp-americas { color: #34495e; transform: rotate(-3deg); }
.stamp-oceania { color: #1f4e5f; transform: rotate(3deg); }

.v-stamp-round {
  border: 2px solid #2c3e50;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  color: #2c3e50;
  transform: rotate(-8deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.round-inner {
  border: 1px dashed #2c3e50;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en-serif);
  font-size: 7.5px;
  text-align: center;
  line-height: 1.1;
}

/* ==========================================================================
   6. 서브 페이지 (카테고리 목록, 글 본문 상세, 댓글, 사이드 드로어)
   ========================================================================== */
.category-banner-head {
  margin-top: 24px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--rule-dark);
}

.cb-sub {
  font-family: var(--font-en-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-red);
  letter-spacing: 2px;
}

.cb-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--ink-navy);
}

.newspaper-archive-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.archive-card-item {
  border-right: 1px solid var(--rule-light);
  padding-right: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule-light);
}

.archive-card-item:nth-child(4n) {
  border-right: none;
  padding-right: 0;
}

.ac-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 1.5px solid var(--rule-dark);
  padding-bottom: 6px;
  margin-bottom: 10px;
  font-family: var(--font-en-serif);
  font-size: 12px;
  font-weight: 800;
}

.ac-cat { color: var(--accent-red); }

.ac-thumb {
  display: block;
  width: 100%;
  height: 160px;
  background-color: #d6cfc2;
  background-image: url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?auto=format&fit=crop&w=600&q=80');
  background-size: cover;
  background-position: center;
  margin-bottom: 12px;
}

.ac-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink-navy);
  margin-bottom: 8px;
}

.ac-summary {
  font-size: 13.5px;
  color: var(--ink-gray);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ac-meta {
  font-size: 12px;
  color: var(--ink-muted);
}

/* 본문 상세보기 */
.permalink-container {
  grid-column: 1 / -1;
}

.gazette-post-detail {
  max-width: 900px;
  margin: 28px auto;
  background: rgba(255,255,255,0.35);
  border: 1px solid var(--rule-mid);
  padding: 40px 50px;
}

.post-detail-header {
  text-align: center;
  border-bottom: 2px double var(--rule-dark);
  padding-bottom: 24px;
  margin-bottom: 32px;
}

.pd-category {
  display: inline-block;
  background: var(--accent-red);
  color: #fff;
  font-family: var(--font-en-serif);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  margin-bottom: 12px;
}

.pd-title {
  font-size: 34px;
  font-weight: 900;
  color: var(--ink-navy);
  margin-bottom: 14px;
}

.pd-meta {
  font-family: var(--font-en-serif);
  font-size: 13px;
  color: var(--ink-gray);
}

#article-view {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink-black);
  min-height: 300px;
}

#article-view p { margin-bottom: 22px; }

/* 드로어 사이드 메뉴 */
.gazette-drawer {
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  height: 100%;
  background: var(--paper-bg);
  border-right: 2px solid var(--rule-dark);
  z-index: 1000;
  padding: 24px;
  transition: left 0.25s ease;
  overflow-y: auto;
}

.gazette-drawer.open { left: 0; }

.drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}

.drawer-backdrop.open { display: block; }

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--rule-dark);
  padding-bottom: 12px;
  margin-bottom: 16px;
  font-family: var(--font-en-serif);
}

.drawer-body ul li {
  margin-bottom: 10px;
}

.drawer-footer {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-mid);
  display: flex;
  gap: 16px;
}

/* 페이징 & 푸터 */
.gazette-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 36px 0;
  font-family: var(--font-en-serif);
}

.pg-nums { display: flex; gap: 8px; }

.gazette-footer {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 2px double var(--rule-dark);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-en-serif);
  font-size: 12px;
  color: var(--ink-gray);
}

/* 반응형 처리 */
@media screen and (max-width: 1100px) {
  .masthead-grid, .front-top-row, .front-bottom-row {
    grid-template-columns: 1fr;
  }
  .masthead-left, .masthead-right {
    text-align: center;
    justify-content: center;
  }
  .hero-feature, .bottom-left-zone {
    border-right: none;
    padding-right: 0;
  }
  .side-stories, .bottom-right-zone {
    padding-left: 0;
    margin-top: 24px;
  }
  .four-columns-grid, .newspaper-archive-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 768px) {
  .main-newspaper-title { font-size: 36px; }
  .hero-feature, .four-columns-grid, .newspaper-archive-list {
    grid-template-columns: 1fr;
  }
  .gazette-post-detail { padding: 24px 18px; }
}