/**
 * ┌─────────────────────────────────────────────────────────────────────┐
 * │  FILE INDEX — 여수뉴스포털                                          │
 * ├──────────────┬──────────────────────────────────────────────────────┤
 * │  파일명      │  portal-1200.css                                           │
 * │  위치        │  /assets/css/portal-1200.css                                        │
 * │  생성일      │  2026-05-16                                           │
 * │  수정일      │  2026-05-16                                           │
 * │  버전        │  v1.0                                                 │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  기능/역할   │  스타일시트 — 포털·컴포넌트별 규칙 적용               │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  레이아웃    │  기준 너비: 1200px (전역·포털 변수와 연동)            │
 * │  섹터 구조   │  .sector-wrap width:100% — 다열은 .sector-inner (원칙2) │
 * │  폰트 기준   │  최소 14px (--fs-base 등 변수 연동)                 │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  연관 파일   │  load-by  : header.php·포털 레이아웃 (상이)            │
 * │              │  변수 주입: echoLayoutVars()·포털 CSS (해당 시)       │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  참조 사항   │  /docs/PROJECT_RULES.md 원칙8·포털 CSS 접두 규칙       │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  변경 이력   │  2026-05-16 v1.0 - FILE INDEX 일괄 부여                     │
 * └──────────────┴──────────────────────────────────────────────────────┘
 */

:root {
  /* ── 색상 토큰 ────────────────────────────────────────── */
  --c-brand:        #0a4d8c;       /* 여수 브랜드 메인 (Joongang 블루) */
  --c-brand-dark:   #075184;
  --c-brand-light:  #e8f1fb;
  --c-accent:       #c0392b;       /* 헤드라인 강조 */
  --c-accent-2:     #e67e22;       /* 보조 액센트 */

  --c-text:         #0f172a;
  --c-text-2:       #334155;
  --c-text-3:       #64748b;
  --c-text-4:       #94a3b8;
  --c-link:         #0a4d8c;
  --c-link-hover:   #c0392b;

  --c-bg:           #ffffff;
  --c-bg-soft:      #f8fafc;
  --c-bg-mute:      #f1f5f9;
  --c-bg-dark:      #0f172a;

  --c-line:         #e2e8f0;
  --c-line-2:       #cbd5e1;
  --c-line-strong:  #0f172a;

  --c-success:      #16a34a;
  --c-warn:         #f59e0b;
  --c-danger:       #dc2626;
  --c-info:         #0891b2;

  /* 카테고리 (14 포털 전용) */
  --c-news:    #c0392b;
  --c-biz:     #2980b9;
  --c-tour:    #f39c12;
  --c-deal:    #d35400;
  --c-goods:   #16a085;
  --c-join:    #3498db;
  --c-nanum:   #c62828;
  --c-publicity:#7c3aed;
  --c-work:    #f57f17;
  --c-shop:    #0891b2;
  --c-book:    #4338ca;
  --c-match:   #db2777;
  --c-wellbeing:#00897b;
  --c-nous:    #0a4d8c;

  /* ── 타이포그래피 토큰 ─────────────────────────────── */
  --f-sans:  'Pretendard','Spoqa Han Sans Neo',-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo',Roboto,sans-serif;
  --f-serif: 'Noto Serif KR','Nanum Myeongjo',Georgia,serif;
  --f-mono:  'Pretendard',Monaco,Consolas,monospace;

  /* 전역 9단계 폰트 스케일(layout.css :root)만 사용 */
  --p1200-fs-xs:   var(--fs-xs);
  --p1200-fs-sm:   var(--fs-sm);
  --p1200-fs-base: var(--fs-base);
  --p1200-fs-md:   var(--fs-md);
  --p1200-fs-lg:   var(--fs-lg);
  --p1200-fs-xl:   var(--fs-xl);
  --p1200-fs-2xl:  var(--fs-2xl);
  --p1200-fs-3xl:  var(--fs-3xl);
  --p1200-fs-hero: var(--fs-hero);

  /* 라인 높이 */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;
  --lh-loose:   1.85;

  /* 폰트 가중치 */
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;
  --fw-black:   900;

  /* ── 간격 토큰 (4의 배수) ────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  28px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;

  /* ── 라운드 ─────────────────────────────────────── */
  --r-xs:  3px;
  --r-sm:  5px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ── 섀도우 ─────────────────────────────────────── */
  --sh-xs:  0 1px 2px rgba(15,23,42,.06);
  --sh-sm:  0 2px 5px rgba(15,23,42,.08);
  --sh-md:  0 4px 12px rgba(15,23,42,.10);
  --sh-lg:  0 8px 24px rgba(15,23,42,.12);
  --sh-xl:  0 16px 48px rgba(15,23,42,.16);
  --sh-glow: 0 0 0 3px rgba(10,77,140,.15);

  /* ── 6 레이어 z-index 위계 ──────────────────────── */
  --z-base:     0;
  --z-content:  10;
  --z-overlay:  100;     /* 카드 위 floating */
  --z-sticky:   500;     /* sticky header */
  --z-modal:    1000;    /* 모달 */
  --z-toast:    2000;    /* 토스트/알림 */

  /* ── 1200px 시스템 ─────────────────────────────── */
  --w-page:    1200px;          /* 본문 너비 */
  --w-content: 1200px;          /* 콘텐츠 너비 */
  --w-narrow:  840px;           /* 디테일 narrow */
  --w-wide:    1280px;          /* hero/배너만 사용 */

  --gap-grid:  20px;
  --gap-grid-sm: 12px;
  --gap-grid-lg: 32px;

  /* 트랜지션 */
  --t-fast: .15s ease;
  --t-mid:  .25s ease;
  --t-slow: .4s cubic-bezier(.4,0,.2,1);
}

/* ════════════════════════════════════════════════════════════
   §1  1200px 컨테이너 시스템
═══════════════════════════════════════════════════════════════ */
.p1200 {
  width: 100%;
  max-width: var(--w-page);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--s-4);
  padding-right: var(--s-4);
  box-sizing: border-box;
}
.p1200-narrow { max-width: var(--w-narrow); }
.p1200-wide   { max-width: var(--w-wide); }
.p1200-full   { max-width: 100%; }

/* 페이지 영역 — header / wing / body / footer */
.page-1200 {
  width: 100%;
  font-family: var(--f-sans);
  color: var(--c-text);
  background: var(--c-bg);
}
.page-1200 a { color: var(--c-link); text-decoration: none; transition: color var(--t-fast); }
.page-1200 a:hover { color: var(--c-link-hover); }

/* ════════════════════════════════════════════════════════════
   §2  그리드 — 12 컬럼 + 자주 쓰이는 프리셋
═══════════════════════════════════════════════════════════════ */
.g-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap-grid); }

/* 자주 쓰는 분할 */
.g-2     { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-grid); }
.g-3     { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.g-4     { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid); }
.g-5     { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap-grid); }
.g-6     { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap-grid); }
.g-2-1   { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-grid); }
.g-1-2   { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-grid); }
.g-3-1   { display: grid; grid-template-columns: 3fr 1fr; gap: var(--gap-grid); }
.g-1-3   { display: grid; grid-template-columns: 1fr 3fr; gap: var(--gap-grid); }
.g-7-3   { display: grid; grid-template-columns: 7fr 3fr; gap: var(--gap-grid-lg); }   /* 메인 + 사이드 */
.g-8-4   { display: grid; grid-template-columns: 8fr 4fr; gap: var(--gap-grid-lg); }

/* ════════════════════════════════════════════════════════════
   §3  타이포그래피 유틸
═══════════════════════════════════════════════════════════════ */
.t-h1 { font-family: var(--f-sans); font-size: var(--fs-4xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: -.02em; color: var(--c-text); margin: 0 0 var(--s-4); }
.t-h2 { font-family: var(--f-sans); font-size: var(--fs-3xl); font-weight: var(--fw-extra); line-height: var(--lh-tight); letter-spacing: -.018em; color: var(--c-text); margin: 0 0 var(--s-4); }
.t-h3 { font-family: var(--f-sans); font-size: var(--fs-2xl); font-weight: var(--fw-bold);  line-height: var(--lh-snug);  letter-spacing: -.015em; color: var(--c-text); margin: 0 0 var(--s-3); }
.t-h4 { font-family: var(--f-sans); font-size: var(--fs-xl);  font-weight: var(--fw-bold);  line-height: var(--lh-snug);  letter-spacing: -.012em; color: var(--c-text); margin: 0 0 var(--s-3); }
.t-h5 { font-family: var(--f-sans); font-size: var(--fs-lg);  font-weight: var(--fw-semi);  line-height: var(--lh-snug);  color: var(--c-text); margin: 0 0 var(--s-2); }
.t-body  { font-family: var(--f-sans); font-size: var(--fs-md); font-weight: var(--fw-normal); line-height: var(--lh-relaxed); color: var(--c-text-2); }
.t-body-lg { font-family: var(--f-sans); font-size: var(--fs-lg); font-weight: var(--fw-normal); line-height: var(--lh-relaxed); color: var(--c-text-2); }
.t-meta  { font-size: var(--fs-xs); color: var(--c-text-3); }
.t-cap   { font-size: var(--fs-xs); color: var(--c-text-4); }
.t-serif { font-family: var(--f-serif) !important; }

/* 헤드라인 클램프 */
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ════════════════════════════════════════════════════════════
   §4  카드 컴포넌트 (재사용)
═══════════════════════════════════════════════════════════════ */
.card-1200 {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.card-1200:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.card-flat { background: var(--c-bg); border-radius: var(--r-md); }
.card-shadow { background: var(--c-bg); border-radius: var(--r-md); box-shadow: var(--sh-sm); }

/* ════════════════════════════════════════════════════════════
   §5  뱃지 / 칩
═══════════════════════════════════════════════════════════════ */
.badge-1200 {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  background: var(--c-brand); color: #fff;
  letter-spacing: .02em;
}
.badge-1200.urgent { background: var(--c-danger); animation: blink-1200 1.2s infinite; }
.badge-1200.live   { background: var(--c-success); }
.badge-1200.cat    { background: var(--c-brand-light); color: var(--c-brand); border: 1px solid var(--c-brand); }
.badge-1200.outline{ background: transparent; color: var(--c-text); border: 1px solid var(--c-line-2); }

@keyframes blink-1200 {
  0%, 100% { opacity: 1; }
  50%      { opacity: .65; }
}

/* ════════════════════════════════════════════════════════════
   §6  섹션 구분
═══════════════════════════════════════════════════════════════ */
.sec-1200 { padding: var(--s-7) 0; }
.sec-1200 + .sec-1200 { border-top: 1px solid var(--c-line); }
.sec-title-1200 {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 2.5px solid var(--c-text);
}
.sec-title-1200 .h { font-size: var(--fs-2xl); font-weight: var(--fw-extra); letter-spacing: -.015em; color: var(--c-text); display: flex; align-items: center; gap: var(--s-2); }
.sec-title-1200 .h i { color: var(--c-brand); font-size: var(--fs-lg); }
.sec-title-1200 .more { font-size: var(--fs-xs); color: var(--c-text-3); }
.sec-title-1200 .more:hover { color: var(--c-link-hover); }

/* ════════════════════════════════════════════════════════════
   §7  버튼
═══════════════════════════════════════════════════════════════ */
.btn-1200 {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: #fff; color: var(--c-text);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); cursor: pointer;
  transition: all var(--t-fast);
}
.btn-1200:hover { border-color: var(--c-brand); color: var(--c-brand); }
.btn-1200.primary { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.btn-1200.primary:hover { background: var(--c-brand-dark); color: #fff; }
.btn-1200.ghost   { background: transparent; border-color: transparent; }
.btn-1200.sm { padding: 6px 12px; font-size: var(--fs-xs); }
.btn-1200.lg { padding: 12px 24px; font-size: var(--fs-md); }

/* ════════════════════════════════════════════════════════════
   §8  반응형 — 1200 → 1024 → 768 → 480
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .p1200, .p1200-narrow, .p1200-wide { max-width: 100%; padding-left: var(--s-3); padding-right: var(--s-3); }
  .g-7-3, .g-8-4, .g-2-1, .g-3-1 { grid-template-columns: 1fr; }
  .t-h1 { font-size: var(--fs-3xl); }
  .t-h2 { font-size: var(--fs-2xl); }
}
@media (max-width: 768px) {
  .g-4, .g-5, .g-6 { grid-template-columns: repeat(2, 1fr); gap: var(--gap-grid-sm); }
  .g-3 { grid-template-columns: 1fr; }
  .sec-1200 { padding: var(--s-5) 0; }
  .t-h1 { font-size: var(--fs-2xl); }
  .t-h2 { font-size: var(--fs-xl); }
  .t-h3 { font-size: var(--fs-lg); }
  .sec-title-1200 .h { font-size: var(--fs-xl); }
}
@media (max-width: 480px) {
  .g-2, .g-4, .g-5, .g-6 { grid-template-columns: 1fr; }
  .p1200 { padding-left: var(--s-3); padding-right: var(--s-3); }
}

/* ════════════════════════════════════════════════════════════
   §9  접근성 / 인쇄 / 다크 모드 베이스 (옵션)
═══════════════════════════════════════════════════════════════ */
.sr-only-1200 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media print {
  .p1200 { padding: 0; }
  .sec-1200 + .sec-1200 { border: 0; }
  .btn-1200, .badge-1200.urgent { animation: none !important; }
}
.focus-1200:focus-visible { outline: 0; box-shadow: var(--sh-glow); }

/* ════════════════════════════════════════════════════════════
   §10  유틸
═══════════════════════════════════════════════════════════════ */
.divider-1200 { height: 1px; background: var(--c-line); margin: var(--s-5) 0; }
.divider-1200.thick { height: 3px; background: var(--c-text); margin: var(--s-7) 0; }
.spacer-1, .spacer-2, .spacer-3, .spacer-4, .spacer-5 { display: block; }
.spacer-1 { height: var(--s-2); }
.spacer-2 { height: var(--s-4); }
.spacer-3 { height: var(--s-6); }
.spacer-4 { height: var(--s-8); }
.spacer-5 { height: var(--s-12); }

.text-brand   { color: var(--c-brand); }
.text-accent  { color: var(--c-accent); }
.text-success { color: var(--c-success); }
.text-danger  { color: var(--c-danger); }
.text-mute    { color: var(--c-text-3); }

.bg-brand     { background: var(--c-brand); color: #fff; }
.bg-soft      { background: var(--c-bg-soft); }
.bg-mute      { background: var(--c-bg-mute); }