/* === Hello USA Theme — generated 2025-09-10T09:38:20.091203 === */
:root{
  --primary-color: #004780;
  --secondary-color: #004780;
  --accent-color: #004780;
  --bg-color: #f7f2ea;
  --text-color: #1F2937;
  --muted-color: #9CA3AF;
  --surface: #ffffff;
  --surface-2: #fff7ec;
  --ring: rgba(36,117,116,.25);
  /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.8rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Breakpoints */
    --mobile: 480px;
    --tablet: 768px;
    --desktop: 1024px;
    --wide: 1440px;
    
    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.2s ease;
}

/* Base */
html, body{background:#f7f2ea; color:var(--text-color);}
a{color:#004780;}
a:hover{color:#004780;}

/* Buttons */
.btn, .button, button, input[type="submit"], .btn-primary{
 /* background: #004780; */
  color: #fff;
  border: 1px solid #004780;
  transition: .2s ease-in-out;
}
.btn:hover, .button:hover, button:hover, input[type="submit"]:hover, .btn-primary:hover{
  background: #004780;
  border-color: #004780;
}
.btn-outline, .btn-secondary{
  background: transparent;
  color: #004780;
  border: 1px solid #004780;
}
.btn-outline:hover, .btn-secondary:hover{
  background: #004780;
  color:#fff;
}

/* Header/Nav */
header, .header, .gnb, .topbar, .nav-bar, nav.primary{
  background: var(--surface);
  border-bottom: 1px solid #ece6dd !important;
}
nav.primary{
  background: var(--surface);
  border-bottom: 1px solid #fff !important;
}
.header a, .gnb a, .topbar a, nav.primary a{
  color: var(--text-color);
}
.header a:hover, .gnb a:hover, .topbar a:hover, nav.primary a:hover{
  color: #004780;
}

/* Cards / Panels */
.card, .panel, .box, .well{
  background: var(--surface);
  border: 1px solid #efe7db;
  box-shadow: 0 4px 16px rgba(31,41,55,.06);
  border-radius: 12px;
}

/* Badges / Pills */
.badge, .label{
  background: var(--accent-color);
  color:#fff;
}

/* Forms */
input, select, textarea{
  border:1px solid #e9dfd1;
  background:#fff;
  color:var(--text-color);
  border-radius:10px;
}
input:focus, select:focus, textarea:focus{
  outline: 0;
  border-color: #004780;
  box-shadow: 0 0 0 3px var(--ring);
}

/* ========================================
   Reset & Base Styles
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* === Hello USA Theme — generated 2025-09-10T09:38:20.091203 === */
:root{
  --primary-color: #004780;
  --secondary-color: #004780;
  --accent-color: #004780;
  --bg-color: #f7f2ea;
  --text-color: #1f2937;
  --muted-color: #9CA3AF;
  --surface: #ffffff;
  --surface-2: #fff7ec;
  --ring: rgba(36,117,116,.25);
}

}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Typography
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); }
h5 { font-size: clamp(1rem, 2vw, 1.25rem); }
h6 { font-size: 1rem; }

a {
    color: #004780;
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: #004780;
}

/* ========================================
   Header Styles
   ======================================== */
.header {
    position: relative;
    margin : auto;
    background: #f7f2ea;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: var(--transition);
}

.header__wrapper {
    width: 100%;
    background: var(--dark-color);
	float: none !important;
}

.header__container {
    max-width: 1550px;
    margin: auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    position: relative;
}

/* Logo */
.header__logo {
    flex-shrink: 0;
    z-index: 1001;
	width: 40%;
}
@media (max-width: 1024px) {
    .header__logo {
        width: 30%; /* 태블릿 */
    }
}

@media (max-width: 768px) {
    .header__logo {
        width: 70%; /* 모바일 */
    }
}

.header__logo img {
    height: 50px;
    width: auto;
    display: block;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #000;
    margin: 3px 0;
    transition: var(--transition-fast);
    border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Navigation */
.header__nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    list-style: none;
    margin: 0;
    margin-right: 50px;
    padding: 0;
}

.nav__item {
    position: relative;
}

.nav__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: var(--spacing-sm) 0;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.nav__link:hover {
    color: #004780;
}

.nav__link.active {
    color: #004780;
    position: relative;
}

.nav__link.active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #004780;
    border-radius: 50%;
}

/* Dropdown Arrow */
.dropdown-arrow {
    font-size: 0.75rem;
    transition: var(--transition-fast);
}

.nav__item.has-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    padding: var(--spacing-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-fast);
    z-index: 100;
}

.nav__item.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    list-style: none;
    position: relative;
}

.dropdown-item a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-color);
    font-size: 0.95rem;
    border-radius: 4px;
    transition: var(--transition-fast);
}

.dropdown-item a:hover {
    background: var(--light-color);
    color: #004780;
}

/* Submenu */
.submenu {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    padding: var(--spacing-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: var(--transition-fast);
}

.dropdown-item.has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(10px);
}

.submenu li {
    list-style: none;
}

.submenu a {
    display: block;
    padding: var(--spacing-sm);
    color: var(--text-color);
    font-size: 0.9rem;
    border-radius: 4px;
    transition: var(--transition-fast);
}

.submenu a:hover {
    background: var(--light-color);
    color: #004780;
}

/* Header Actions */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Button Styles */
.btn {
	background: transparent;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 25px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;
}

.btn--primary {
    background: #004780;
    color: #fff !important;
    border: 2px solid #004780;
}

.btn--primary:hover {
    background: transparent;
    color: #004780 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,74,172,0.3);
}

/* User Menu */
.user-menu {
    position: relative;
}

.user-menu__toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.user-menu__toggle:hover {
    background: rgba(255,255,255,0.3);
}

.user-menu__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 180px;
    background: #f7f2ea;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    padding: var(--spacing-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-fast);
}

.user-menu__dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu__dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-menu__dropdown a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-color);
    font-size: 0.95rem;
    border-radius: 4px;
    transition: var(--transition-fast);
}

.user-menu__dropdown a:hover {
    background: var(--light-color);
    color: #004780;
}

/* Mobile Menu Close Button */
.mobile-menu-close {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    color: #000;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 105;
}0

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-fast);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   Responsive Styles
   ======================================== */

/* Tablet Styles (1024px and below) */
@media screen and (max-width: 1024px) {
    .header__container {
        padding: 0 var(--spacing-md);
    }

    .nav__list {
        gap: var(--spacing-lg);
    }

    .nav__link {
        font-size: 0.95rem;
    }

    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.9rem;
    }

    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Mobile Navigation */
    .header__nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background: var(--dark-color);
        padding: 80px 20px 20px;
        overflow-y: auto;
        transition: var(--transition);
        z-index: 999;
    }

    .header__nav.active {
        right: 0;
    }

    .mobile-menu-close {
        display: block;
    }

    .mobile-menu-overlay {
        display: block;
    }

    .nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
		background : #fff;
    }

    .nav__item {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .nav__link {
        padding: var(--spacing-md);
        width: 100%;
        justify-content: space-between;
    }

    /* Mobile Dropdown */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(255,255,255,0.05);
        border-radius: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav__item.has-dropdown.active .dropdown-menu {
        max-height: 500px;
        padding: var(--spacing-sm) 0;
    }

    .nav__item.has-dropdown.active .dropdown-arrow {
        transform: rotate(180deg);
    }

    .dropdown-item a {
       /* color: rgba(255,255,255,0.8); */
        padding-left: var(--spacing-xl);
    }

    .dropdown-item a:hover {
        background: rgba(255,255,255,0.1);
        color: #fff;
    }

    /* Mobile Submenu */
    .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(255,255,255,0.03);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding: 0;
		background : #fff;
    }

    .dropdown-item.has-submenu.active .submenu {
        max-height: 300px;
        padding: var(--spacing-sm) 0;
    }

    .submenu a {
       /* color: rgba(255,255,255,0.7); */
        padding-left: calc(var(--spacing-xl) * 2);
    }

    /* Header Actions for Mobile */
    .header__actions {
        gap: var(--spacing-sm);
    }

    .btn--primary span {
        display: none;
    }

    .btn--primary {
        padding: var(--spacing-sm);
        width: 30px;
        height: 30px;
		margin-left : 10px;
        border-radius: 50%;
        justify-content: center;
    }

    .user-menu__toggle {
        width: 35px;
        height: 35px;
    }
}

/* Mobile Styles (768px and below) */
@media screen and (max-width: 768px) {
    .header__container {
        height: 60px;
    }

    .header__logo img {
        height: 40px;
    }

    .header__nav {
        width: 90%;
        max-width: none;
    }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.15rem; }
    h4 { font-size: 1.05rem; }
    h5 { font-size: 1rem; }
}

/* Small Mobile (480px and below) */
@media screen and (max-width: 480px) {
    .header__container {
        padding: 0 var(--spacing-sm);
    }

    .header__nav {
        width: 100%;
        padding: 60px 15px 15px;
    }

    .nav__link {
        font-size: 0.9rem;
        padding: var(--spacing-sm);
    }

    .dropdown-item a {
        font-size: 0.85rem;
        padding-left: var(--spacing-lg);
    }

    .submenu a {
        font-size: 0.85rem;
        padding-left: calc(var(--spacing-lg) * 1.5);
    }
}

/* ========================================
   Utility Classes
   ======================================== */
.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }
.mt-5 { margin-top: var(--spacing-xxl); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }
.mb-5 { margin-bottom: var(--spacing-xxl); }

.pt-1 { padding-top: var(--spacing-sm); }
.pt-2 { padding-top: var(--spacing-md); }
.pt-3 { padding-top: var(--spacing-lg); }
.pt-4 { padding-top: var(--spacing-xl); }
.pt-5 { padding-top: var(--spacing-xxl); }

.pb-1 { padding-bottom: var(--spacing-sm); }
.pb-2 { padding-bottom: var(--spacing-md); }
.pb-3 { padding-bottom: var(--spacing-lg); }
.pb-4 { padding-bottom: var(--spacing-xl); }
.pb-5 { padding-bottom: var(--spacing-xxl); }

/* Hide/Show Classes */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

@media (max-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
}

@media (min-width: 769px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .header,
    .mobile-menu-toggle,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* =========================
   Travel List Layout (New)
   ========================= */
/* ===== 페이지 폭: 풀사이즈 + 반응 여백 ===== */
.tl-page{
  width:100%;
  max-width:none;
  margin:0 auto;
  padding: 40px clamp(12px, 4vw, 40px) 80px; /* 좌우 여백만 살짝 */
}

/* ===== 상단 컨트롤 ===== */
.tl-viewControls{
  display:flex; gap:8px; align-items:center;
  margin: 12px 0 16px;
}
.tl-viewBtn{
  padding:8px 12px; border:1px solid #e6ded2; border-radius:10px;
  background:#fff; cursor:pointer; font-size:14px;
}
.tl-viewBtn.is-active{ border-color:#e1b253; background:#fff7e6; }

/* ===== 본문 2컬럼 레이아웃 ===== */
.tl-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) 320px;  /* 왼쪽 가변, 오른쪽 320px */
  gap:24px;
}
@media (max-width:1024px){
  .tl-grid{ grid-template-columns: 1fr; }
}

/* ===== 카드 그리드: 열 수 토글 가능 ===== */
/* 기본(버튼으로 지정 안했을 때): 모바일 1 / 태블릿 2 / 데스크톱 3 열 */
.tl-cards{
  --cols: 1;
  display:grid !important;
  gap: 18px;
}
@media (min-width: 768px){
  .tl-cards:not([data-cols]){ --cols:2; }
}
@media (min-width: 1200px){
  .tl-cards:not([data-cols]){ --cols:3; }
}
/* 버튼으로 강제 지정할 때 */
.tl-cards[data-cols="1"]{ --cols:1; }
.tl-cards[data-cols="2"]{ --cols:2; }
.tl-cards[data-cols="3"]{ --cols:3; }

/* 열 수에 맞춰 카드 칼럼 수 결정 */
.tl-cards{
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
}

/* ===== 카드 레이아웃: 1열(리스트) vs 2/3열(타일) ===== */

/* 1열: 좌 이미지 / 우 본문 (가로형) */
.tl-cards[data-cols="1"] .tl-card,
.tl-cards:not([data-cols]) .tl-card{  /* 모바일 기본 1열일 때 */
  display:grid;
  grid-template-columns: minmax(280px,360px) minmax(0,1fr);
}
@media (min-width:768px){
  .tl-cards:not([data-cols]) .tl-card{  /* 태블릿 이상은 기본 2/3열 = 타일형으로 바뀜 */
    display:flex; flex-direction:column;
  }
}

/* 2/3열: 이미지 위 / 본문 아래 (세로형 타일) */
.tl-cards[data-cols="2"] .tl-card,
.tl-cards[data-cols="3"] .tl-card{
  display:flex;
  flex-direction:column;
}

/* 공통 카드 스타일 */
.tl-card{
  border:1px solid #eae1d5; border-radius:16px; background:#fff;
  overflow:hidden; transition:transform .2s ease;
}
.tl-card:hover{ transform: translateY(-2px); }

/* 이미지 */
.tl-media{
  background-size:cover; background-position:center;
  min-width:0;
  /* 가로형(1열)의 왼쪽 이미지는 비율 고정 */
}
.tl-cards[data-cols="1"] .tl-media{ min-width:280px; aspect-ratio:16/10; }
.tl-cards[data-cols="2"] .tl-media,
.tl-cards[data-cols="3"] .tl-media,
.tl-cards:not([data-cols]) .tl-media{ aspect-ratio: 16 / 10; }

/* 본문 */
.tl-body{
  min-width:0; overflow:hidden;
  padding:20px; display:flex; flex-direction:column; gap:12px;
}
.tl-meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tl-badge{ font-size:12px; padding:6px 10px; border-radius:10px; background:#fff8f0; border:1px solid #eee; color:#c35a00; }
.tl-actions{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.tl-favBtn{ width:36px; height:36px; border:1px solid #eee; background:#fff8f0; border-radius:12px; cursor:pointer; }
.tl-favBtn img{ width:22px; height:22px; }

.tl-title{ margin:4px 0 0; font-size: clamp(18px, 2vw, 20px); font-weight:700;}
.tl-desc{ margin:0; font-size:14.5px; line-height:1.6; color:#555; }
.tl-infoRow{ display:flex; flex-wrap:wrap; gap:10px 14px; font-size:14px; color:#333; }
.tl-infoRow .dot::before{ content:"•"; margin-right:6px; }
.tl-title, .tl-desc, .tl-infoRow{ white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }

/* 사이드바는 그대로 */
.tl-sidebar .tl-block{ border:1px solid #eae1d5; border-radius:16px; background:#fff; padding:18px; margin-bottom:18px; }
.tl-blockTitle{ margin:0 0 14px; font-size:15px; font-weight:700; color:#333; }
.tl-storyList{ display:flex; gap:12px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:6px; }
.tl-story{ flex:0 0 180px; height:110px; background-size:cover; background-position:center; border-radius:14px; position:relative; scroll-snap-align:start; }
.tl-story::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.35)); }
.tl-popular{ display:grid; grid-template-columns:1fr; gap:12px; }
.tl-popItem{ display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center; padding:10px; background:#fff8f0; border:1px solid #eee; border-radius:14px; text-decoration:none; color:inherit; }
.tl-thumb{ width:72px; height:56px; background-size:cover; background-position:center; border-radius:10px; }
.tl-popTitle{ margin:0 0 4px; font-size:14px; font-weight:700; }
.tl-popMeta{ font-size:13px; color:#555; }

/* ===== 모바일 안정화 패치 ===== */

/* 0) 모든 카드 계층이 줄어들 수 있도록 */
.tl-cardLink, .tl-card, .tl-body { min-width: 0; }

/* 1) 모바일(<=768px)에서는 카드 1열 + 세로형 타일로 고정 */
@media (max-width: 768px){
  .tl-grid{ grid-template-columns: 1fr; }              /* 사이드바 아래로 */
  .tl-cards{ grid-template-columns: 1fr !important; }  /* 카드 1열 */
  .tl-cards{ --cols: 1; }                              /* data-cols와 무관하게 1열 우선 */

  .tl-card{
    display: flex !important;
    flex-direction: column;                             /* 이미지 위, 본문 아래 */
    width: 100%;
  }
  .tl-media{
    width: 100%;
    min-width: 0;
    aspect-ratio: 16/10;                                /* 썸네일 일정 비율 */
    background-size: cover;
    background-position: center;
  }
  .tl-body{
    padding: 16px;
    overflow: hidden;                                   /* 내부 스크롤 막기 */
  }

  /* 긴 한글 줄바꿈: 자연스럽게 줄 갈라짐 */
  .tl-title, .tl-desc{
    white-space: normal;
    word-break: keep-all;     /* 한글 자연 줄바꿈 */
    overflow-wrap: break-word;
  }

  /* 보기 전환 버튼은 모바일에선 작게 한 줄 */
  .tl-viewControls{ gap:6px; margin:10px 0 12px; }
  .tl-viewBtn{ padding:6px 10px; font-size:13px; }
}

/* 2) 데스크톱에서만 1/2/3열 토글 동작 (이미지 가로형/세로형 전환 포함) */
@media (min-width: 769px){
  /* 1열일 땐 가로형 카드(좌 이미지/우 본문) */
  .tl-cards[data-cols="1"] .tl-card{
    display: grid;
    grid-template-columns: minmax(280px,360px) minmax(0,1fr);
  }
  /* 2/3열일 땐 세로형 타일 */
  .tl-cards[data-cols="2"] .tl-card,
  .tl-cards[data-cols="3"] .tl-card{
    display: flex;
    flex-direction: column;
  }
}

/* 3) 혹시 상위 테마가 .posts .item 등으로 폭을 제한할 경우 대비 */
.tl-cards, .tl-cardLink, .tl-card { width: 100%; }

/* ========== 헤더 카드형 박스 ========== */
.tl-hero{
  background:#fff;
  border:1px solid #eae1d5;
  border-radius:16px;
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin: 8px 0 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.03);
}
.tl-heroText{ min-width:0; }
.tl-heroTitle{
  margin:0 0 6px; 
  font-size: clamp(22px, 3.2vw, 36px);
  line-height:1.2;
  font-weight:800;
  color:#1f2937;
}
.tl-heroSep{ margin:0 8px; color:#9ca3af; }
.tl-heroSub{
  margin:0; font-size:14.5px; color:#9CA3AF;
}

/* ========== 보기 전환 버튼 3개 ========== */
.tl-viewControls{ display:flex; gap:8px; flex-wrap:wrap; }
.tl-viewBtn{
  appearance:none; border:1px solid #e6ded2; background:#fff;
  padding:8px 12px; border-radius:10px; cursor:pointer;
  font-size:14px; color:#374151;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.tl-viewBtn:hover{ background:#fff7e6; border-color:#e1b253; transform: translateY(-1px); }
.tl-viewBtn.is-active{ background:#fff1d6; border-color:#e1b253; }

/* 모바일에서 헤더 카드 정렬 */
@media (max-width: 768px){
  .tl-hero{ flex-direction:column; align-items:flex-start; }
  .tl-viewControls{ margin-top:6px; }
}

/* ========== 카드/그리드 기본(이미 적용하신 tl- 스타일 유지) ========== */
/* 버튼이 안보이는 것을 방지(상위 테마의 숨김/오버플로우 대비) */
.tl-hero, .tl-viewControls, .tl-viewBtn{ visibility:visible; opacity:1; }

/* ===== 모바일 오프캔버스: 화면 꽉 채우기 ===== */

/* 기본(데스크톱/태블릿)은 기존 폭 유지, 모바일에서는 전체 화면 덮기 */
@media (max-width: 768px){
  #main-nav{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    /* bottom: 0 로만 두면 일부 브라우저에서 주소창 높이 이슈가 생김 → dvh로 고정 */
    height: 100dvh !important;          /* 세로 꽉 채움(동적 뷰포트) */
    width: 100vw !important;            /* 가로 꽉 채움 */
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    background: #fff !important;        /* 불투명 배경 */
    opacity: 1 !important;

    transform: translateX(100%);        /* 기본: 숨김 */
    transition: transform .28s ease;
    z-index: 2147483637 !important;
    display: flex;                       /* 내부 스크롤 영역 계산용 */
    flex-direction: column;
  }
  #main-nav.active{ transform: translateX(0); }

  /* 내부 리스트가 화면 높이에 맞춰 스크롤되도록 */
  #main-nav .nav__list{
    flex: 1 1 auto;
    min-height: 0;                      /* flex 자식 스크롤 활성화 핵심 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(16px, env(safe-area-inset-bottom)); /* iOS 홈 인디케이터 여유 */
  }

  /* 닫기 버튼이 화면 밖으로 밀리지 않게 고정 */
  #mobile-menu-close{
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    z-index: 2147483640 !important;
  }

  /* 딤드는 메뉴 아래, 페이지 위 */
  #mobile-menu-overlay{
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.45) !important;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 2147483636 !important;
  }
  #mobile-menu-overlay.active{ opacity:1; pointer-events:auto; }
}


/* === Header center-lock patch ====================================== */
/* 컨테이너: 3열 그리드(왼쪽=로고, 가운데=메뉴, 오른쪽=액션) */
/* === Center-lock header (logo | nav(center) | actions) === */
	.header__container{
	  display: grid !important;
	  grid-template-columns: 2fr auto 2fr;   /* 가운데 열을 정확히 중앙에 고정 */
	  align-items: center;
	  gap: 10%;
	  /*max-width: 1440px;                     /* 사이트 폭에 맞춰 1280/1600 등 조절 */
	  margin: 0 auto;
	  padding: 0 clamp(12px, 2.5vw, 24px);
	  height: 70px;
	}

	/* 그리드 배치 명시 */
	.header__logo{    grid-column:1; justify:center; width:auto !important; }
	.header__nav{     grid-column:2; justify-self:center; width:auto !important; }
	.header__actions{ grid-column:3; justify-self:end; }

	/* 중앙을 밀어내는 여백 제거 */
	.nav__list{
	  margin: 0 !important;              /* (기존 margin-right:50px 제거) */
	  gap: 33px;
	  white-space: nowrap;                /* 줄바꿈으로 중앙 흔들림 방지 */
	}

	/* 로고 크기를 이미지 높이로만 통일 */
	.header__logo img{ height:50px; width:auto; display:block; }
	/* 혹시 퍼센트 폭이 남아있다면 무효화 */
	.header__logo{ width:auto !important; }

	/* 태블릿/모바일 높이 조정 */
	/* 모바일(태블릿 포함)에서만: 우측 정렬 클러스터 */
	@media (max-width: 1024px){
	  /* 컨테이너를 flex로 전환해 순서/정렬 제어 */
	  .header__container{
		display: flex !important;
		align-items: center;
		padding: 0 var(--spacing-md);
		height: 60px;
	  }

	  /* 순서 지정: 로고(1) → 내비(2) → 액션(3) → 햄버거(4) */
	  .header__logo{ order: 1; }
	  #main-nav{ order: 2; } /* 오프캔버스지만 DOM 순서 유지 */

	  /* 우측 끝으로 밀고, 햄버거와 한 줄 정렬 */
	  .header__actions{
		order: 3;
		margin-left: auto;        /* 오른쪽으로 밀기 */
		display: flex;
		align-items: center;
		gap: 10px;                /* 예약확인/유저와 간격 */
	  }

	  .mobile-menu-toggle{
		order: 4;
		display: flex;            /* 이미 모바일에서 보이지만 안전하게 */
		justify-content: center;
		align-items: center;
		margin-left: 10px;        /* 액션과 살짝 간격 */
	  }

	  /* 중앙 메뉴가 흔들리지 않도록 여백 제거(중복 방지) */
	  .nav__list{
		margin: 0 !important;
		gap: var(--spacing-lg);
	  }
	}
	/* === Header right-area fix: actions + hamburger 정렬 (모바일 전용 분리) === */

	/* 기본: 3열(로고 | 네비 | 액션) */
	.header__container{
	  display:grid !important;
	  grid-template-columns:1fr auto 1fr; /* 데스크톱/기본 */
	  align-items:center;
	  gap: clamp(10px, 3vw, 34px);
	  float: none !important;
	}
	.header__logo{width: 200px !important;      /* 기본 크기 */
	  max-width: 50vw;   /* 화면 폭의 40% 이하로 제한 */}                 /* 퍼센트 폭 무효화 */
	.header__nav{ grid-column:2; justify-self:center; }
	.header__actions{ grid-column:3; justify-self:start; display:flex; align-items:center; gap:8px; }

	/* 이전에 강제로 4번째 칸을 만들던 규칙 무효화 */
	.mobile-menu-toggle{ grid-column:auto; }

	/* 태블릿~모바일: 4열로 분리 (액션=3열, 햄버거=4열) */
	@media (max-width:1024px){
	  .header__container{ grid-template-columns:auto 1fr auto auto; }
	  .header__actions{ grid-column:3; justify-self:center; }
	  .mobile-menu-toggle{ display:flex; grid-column:4; justify-self:start; margin-left:8px; }
	}

	/* 작은 화면에서 높이/정렬 보정 */
	.header__container > *{ align-self:center; }
	.header__logo img{ height:40px; }            /* 이미 사용 중인 값과 동일 수준 */


	/* 모바일 서브메뉴 접고 펴기 */
	@media (max-width:1024px){
	  nav .dropdown-menu{
		display:none !important;          /* 기본은 숨김 */
		overflow:hidden;
		max-height:0;
		transition:max-height .25s ease;
	  }
	  nav .has-dropdown.open > .dropdown-menu{
		display:block !important;         /* 열릴 때 표시 */
		max-height:1000px;                /* 애니메이션용 여유치 */
	  }
	  /* 화살표 회전 */
	  nav .dropdown-arrow{ transition: transform .2s ease; }
	  nav .has-dropdown.open .dropdown-arrow{ transform: rotate(180deg); }
	}
	.header_container {
		display: flex;
		justify-content: left;  /* 메뉴와 액션 버튼을 양 끝으로 */
		align-items: center;
		gap: 0; /* 불필요한 공백 제거 */
	}

	.header_nav {
		margin-right: 10px; /* 액션 버튼과 간격 최소화 */
	}

	.header_actions {
		display: flex;
		align-items: center;
		gap: 6px; /* 버튼 사이 간격만 유지 */
	}
	
	
	/* ====== Header: 로고↔메뉴 = 메뉴↔액션버튼 동일 간격 패치 ====== */
/* 원하는 ‘기준 간격’을 여기서만 바꾸면 양쪽이 동시에 맞춰짐 */
:root { --header-gap: 34px; }  /* ← 지금 로고↔메뉴 간격 값으로 설정(원하는 값) */

/* 동일 클래스만 사용하도록 고정 (.header__container 기준) */
.header__container{
  display: grid !important;
  grid-template-columns: auto 1fr auto;   /* 로고 | (가운데)메뉴 | 액션 */
  align-items: center;
  column-gap: var(--header-gap) !important;  /* ← 양쪽 간격을 '같게' 만드는 핵심 */
  row-gap: 0 !important;
}

/* 그리드 각 영역 배치 + 불필요 여백 제거 */
.header__logo{    grid-column: 1; justify-self: start;  margin: 0 40% !important; }
.header__nav{     grid-column: 2; justify-self: center; margin: 0 !important; }
.header__actions{ grid-column: 3; justify-self: end;    margin: 0 50% !important; display:flex; align-items:center; gap:8px; }


/* 로고 크기 기본화(선택) */
.header__logo img{ height:50px; width:auto; display:block; }

/* ====== 반응형(필요 시) ====== */
@media (max-width: 1024px){
  .header__container{
    grid-template-columns: auto 1fr auto auto; /* 로고 | 여유 | 액션 | 햄버거 */
    column-gap: 12px !important;               /* 모바일은 살짝 좁게 */
  }
  .header__actions{ justify-self:end; }
  .mobile-menu-toggle{ display:flex; align-items:center; }
}

/* ===== Site-wide Sticky Header ===== */
:root{
  --header-height: 60px; /* 현재 헤더 높이와 동일하게 */
}


/* 사이트 전역에서 따라오는 헤더 */
header.header {
  position: fixed;       /* sticky 대신 fixed */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;      /* 뒤 비치지 않도록 */
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

/* 본문이 헤더 밑으로 안 가려지도록 보정 */
body {
  padding-top: 70px;   /* header 높이만큼 */
}
/* sticky가 작동 못 하게 막는 상위 속성들 무효화(있는 경우에만) */
header.header,
.header__wrapper,
.header__container {
  overflow: visible !important;
  contain: none !important;
  transform: none !important;  /* 상위 요소에 transform 있으면 sticky 깨집니다 */
}

/* 헤더 내부 정렬(이미 적용된 그리드 유지) – 겹침 방지용 보정만 */
.header__container{
  column-gap: var(--header-gap, 34px) !important;
  height: var(--header-height) !important;
}

/* --- 모바일 헤더 넘침 방지 패치 --- */
html, body { overflow-x: hidden; } /* 최후 안전장치 */

/* 데스크톱 기본: 퍼센트 gap 금지 */
.header__container{
  column-gap: var(--header-gap, 34px) !important;
  max-width: 100vw;   /* 안전 */
}

/* 모바일 구간 */
@media (max-width: 768px){
  /* 1) 그리드 폭을 뷰포트 안에 고정 */
  .header__container{
    grid-template-columns: auto 1fr auto !important; /* 로고 | 메뉴 | 액션 */
    column-gap: 10px !important;                     /* 과한 간격 금지 */
    padding: 0 12px !important;                      /* 좌우 패딩 축소 */
    width: 100% !important;
    max-width: 100vw !important;
  }
  /* 2) 그리드 자식이 가로로 늘어나지 못하게 */
  .header__container > *{ min-width: 0 !important; }
  .header__nav{ overflow: hidden; }                  /* 리스트가 밖으로 못 나가게 */

  /* 3) 로고의 퍼센트 폭 제거 (원인 1) */
  .header__logo{
    width: auto !important;          /* 30%/70% 제거 */
    flex: 0 0 auto !important;
	margin: 0 4% !important;
  }
  .header__logo img{
    max-width: 25vw;                 /* 화면 절반 이하로 제한 */
    height: auto !important;
  }

  /* 4) 메뉴/버튼 간 간격과 버튼 크기 축소 */
  .nav__list{ gap: 14px !important; margin: 0 !important; }
  .header__actions{ gap: 8px !important; }
  .btn--primary{ padding: 8px !important; width: 32px !important; height: 32px !important; }
}

/* 혹시 남아있다면 무효화: 퍼센트 gap/마진이 넘침을 유발함 */
.header__container,
.header_container{ gap: 0 !important; }             /* 예전 10% gap 제거 */
.nav__list{ margin-right: 0 !important; }           /* 예전 50px 제거 */


/* 헤더 중앙 정렬 강제 적용 - 기존 스타일 덮어쓰기 */
.header__container {
    
    align-items: center !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    height: 70px !important;
    gap: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* 각 영역을 flexbox로 재정의 */
.header__logo {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    order: 1 !important;
}

.header__nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    order: 2 !important;
}

.header__actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    order: 3 !important;
}

/* 네비게이션 리스트 */
.nav__list {
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* 로고 이미지 크기 조정 */
.header__logo img {
    height: 50px !important;
    width: auto !important;
    display: block !important;
}