@charset "UTF-8";
/* ═══════════════════════════════════════════
   기본 — TR 브랜드 토큰(:root) + reset
   원본: prototype/design/index.html <style> 블록에서 분리
═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   TR BRAND TOKENS (브랜드 가이드 준수)
   - 그라데이션 배경 사용 금지
   - 이탤릭/밑줄 금지 (굵기 조정만 허용)
═══════════════════════════════════════════ */

:root {
  /* TR 기본 팔레트 */
  --tr-orange:       #D64000;
  --tr-green:        #123015;
  --tr-white:        #FFFFFF;
  /* TR 보조 팔레트 (그래픽 요소 / Green 배경 위 텍스트) */
  --tr-dark-gold:    #e9b045;
  --tr-dark-amber:   #d4792a;
  --tr-dark-sky:     #0874e3;
  --tr-dark-teal:    #4db299;
  --tr-dark-lime:    #8fcb64;
  /* TR 라이트 팔레트 (배경용) */
  --tr-light-gold:   #fcf2da;
  --tr-light-amber:  #f8eadd;
  --tr-light-sky:    #e3f1fd;
  --tr-light-teal:   #e3f3ee;
  --tr-light-lime:   #e1f4cd;
  /* 텍스트 팔레트 */
  --tr-graphite:     #212223;
  /* 유틸 */
  --gray-bg:         #F5F5F4;
  --gray-line:       #E5E4E2;
  --gray-mid:        #8A8886;
  --sans: 'Noto Sans KR', Arial, sans-serif;
  --shadow: 0 4px 20px rgba(33,34,35,0.10);
  --shadow-lift: 0 12px 32px rgba(33,34,35,0.16);
  --t: 0.25s ease;
  /* [2026-08-21] 스크롤 시 상단에 남는 고정영역(.gnb-menu) 높이.
     페이지 안의 sticky 요소(상세 탭바·정보패널)가 붙을 기준점이다.
     시안은 유틸바+로고까지 계속 떠 있다고 보고 167px 를 박아 뒀지만,
     실제 화면은 스크롤을 내리면 #siteHeaderWrap 이 접혀 대메뉴 줄만 남는다.
     그래서 실제 높이를 common.js 가 재서 이 변수에 넣어 준다(아래 값은 대체값). */
  --sticky-top: 55px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--tr-graphite);
  background: var(--tr-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

/* 밑줄 금지 */

em, i { font-style: normal; }

/* 이탤릭 금지 */

ul { list-style: none; }

button { font-family: var(--sans); cursor: pointer; border: none; background: none; }