/* ============================================================
   0103 둘러보기
   ============================================================ */

.sub-fade-up{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease;}
.sub-fade-up.is-visible{opacity:1;transform:translateY(0);}
#sub-page-container{width:100%;overflow:hidden;}
.sub-page-section{width:100%;}

/* ════ PC 탭 (1280px 초과에서만 표시) ════ */
.tour-tab-nav-pc{
    display: none; /* 기본 숨김 */
    position: sticky;
    z-index: 500;
    background: #fff;
    border-bottom: 1px solid #e2e2e2;
}

.tour-tab-list{
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
}

.tour-tab-list li { flex:1; text-align:center; }

.tour-tab-btn{
    display: block;
    padding: 22px 0;
    font-size: 17px;
    color: #999;
    text-decoration: none;
    position: relative;
    transition: all .3s;
    font-weight: 500;
}

.tour-tab-btn::after{
    content:'';
    position:absolute;
    bottom:-1px; left:0;
    width:0; height:3px;
    background:#102476;
    transition:width .3s;
}

.tour-tab-btn.active { color:#102476; font-weight:700; }
.tour-tab-btn.active::after { width:100%; }

/* ════ 모바일 탭 (1280px 이하에서만 표시) ════ */
.tour-tab-nav-mo{
    display: none; /* 기본 숨김 */
    position: sticky;
    z-index: 500;
}

.tour-tab-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.tour-tab-grid-btn{
    padding: 16px 8px;
    font-size: 14px;
    font-weight: 500;
    color: #999;
    background: #fff;
    border: none;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}

.tour-tab-grid-btn.active{
    background: #102476;
    color: #fff;
    font-weight: 700;
}

/* ════ PC 섹션 이미지 ════ */
.tour-pc-sections { display: none; } /* 기본 숨김 */

.tour-pc-sec { width:100%; line-height:0; }
.tour-pc-sec.bg-gray { background:#f4f5f7; }

.tour-pc-sec-img{
    width:100%;
    height:auto;
    display:block;
}

/* ════ 모바일 패널 ════ */
.tour-mo-wrap { display:none;padding-top:50px;margin: 0 10px 0 10px; } /* 기본 숨김 */

.tour-mo-panel { display:none; }
.tour-mo-panel.active { display:block; }

.tour-mo-text { padding:40px 20px 24px; }

.tour-mo-num{
    display:block;
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-weight:700;
    font-size:44px;
    color:#dde3f0;
    line-height:1;
    margin-bottom:4px;
}

.tour-mo-en{
    display:block;
    font-size:11px;
    letter-spacing:2px;
    color:#102476;
    font-weight:600;
    margin-bottom:14px;
}

.tour-mo-title{
    font-size:26px;
    font-weight:700;
    color:#111;
    line-height:1.4;
    letter-spacing:-1px;
    margin-bottom:16px;
}

.tour-mo-desc{
    font-size:15px;
    color:#555;
    line-height:1.9;
    word-break:keep-all;
    margin-bottom:20px;
}

.tour-mo-desc strong { color:#102476; }

.tour-mo-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.tour-mo-tag{
    display:inline-block;
    padding:6px 16px;
    border-radius:30px;
    background:#eef1f9;
    color:#102476;
    font-size:13px;
    font-weight:600;
}

.tour-mo-img { width:100%; line-height:0; }
.tour-mo-img img { width:100%; height:auto; display:block; }

/* ════ 갤러리 ════ */
.tour-gallery {
    background: #f4f5f7;
    padding: 100px 0 120px;
}

.tour-gallery-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.tour-gallery-tit {
    text-align: center;
    margin-bottom: 50px;
}

.tour-gallery-tit img {
    max-width: 600px;
    width: 100%;
    height: auto;
    display: inline-block;
}

.tour-gallery-tit-text {
    font-size: 28px;
    font-weight: 700;
    color: #222;
}

/* ── 갤러리 뷰어 ── */
.tg-viewer {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* 큰 이미지 */
.tg-main-wrap {
    position: relative;
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    line-height: 0;
}

.tg-main-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: opacity .2s;
}

/* 썸네일 영역 */
.tg-thumb-wrap {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 2행 고정 + 가로 스크롤 */
.tg-thumb-list {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: calc(50% - 5px);
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}

.tg-thumb-list::-webkit-scrollbar { display: none; }
.tg-thumb-list.dragging { cursor: grabbing; }

/* 4:3 비율 썸네일 */
.tg-thumb-item {
    position: relative;
    padding-top: 75%; /* 4:3 비율 */
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    border: 2.5px solid transparent;
    transition: border-color .2s, opacity .2s;
    opacity: 0.75;
}

.tg-thumb-item.active {
    border-color: #034381;
    opacity: 1;
}

.tg-thumb-item:hover { opacity: 0.9; }

.tg-thumb-item img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}



/* ── 갤러리 좌우 버튼 ── */
.tg-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    color: #0b2a5b;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
    font-size: 0; /* 버튼 안 텍스트 대신 ::before로 화살표 위치를 정확히 제어 */
}

.tg-nav::before {
    position: absolute;
    top: 46%; /* 화살표가 아래로 치우쳐 보이면 이 값을 44~48% 사이에서 조절 */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 42px;
    line-height: 1;
    font-weight: 300;
    font-family: Arial, sans-serif;
}

.tg-nav-prev::before { content: '‹'; }
.tg-nav-next::before { content: '›'; }

.tg-nav:hover {
    background: #fff;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    transform: translateY(-50%) scale(1.04);
}

.tg-nav-prev { left: 18px; }
.tg-nav-next { right: 18px; }

/* ════════════════════════════════════
   반응형 분기
   ════════════════════════════════════ */

/* PC (1280px 초과) */
@media screen and (min-width: 1281px) {
    .tour-tab-nav-pc  { display: block; }
    .tour-tab-nav-mo  { display: none; }
    .tour-pc-sections { display: block; }
    .tour-mo-wrap     { display: none; }
    .tour-gallery     { padding: 100px 0 120px; }
    .tg-viewer        { flex-direction: row; }
}

/* 모바일 (1280px 이하) */
@media screen and (max-width: 1280px) {
    .tour-tab-nav-pc  { display: none; }
    .tour-tab-nav-mo  { display: block; }
    .tour-pc-sections { display: none; }
    .tour-mo-wrap     { display: block; }
    .tour-gallery     { padding: 70px 0 80px; }
    .tour-gallery-inner { max-width: 100%; }
    .tour-gallery-tit img { padding: 0 10px; box-sizing: border-box; }

    /* 모바일: 큰이미지 위, 썸네일 아래 가로 스크롤 */
    .tg-viewer        { flex-direction: column; gap: 12px; }
    .tg-thumb-wrap    { flex: none; width: 100%; }
    .tg-thumb-list    {
        grid-template-rows: 1fr;       /* 1행 */
        grid-auto-columns: 28vw;
        overflow-x: auto;
        max-height: none;
    }
    .tg-thumb-item    { padding-top: 75%; }
}


@media screen and (max-width: 768px) {
    .tg-nav {
        width: 40px;
        height: 40px;
    }
    .tg-nav::before {
        top: 45%;
        font-size: 30px;
    }
    .tg-nav-prev { left: 10px; }
    .tg-nav-next { right: 10px; }
}

@media screen and (max-width: 480px) {
    .tour-tab-grid-btn { font-size: 13px; padding: 14px 6px; }
    .tg-thumb-list { grid-auto-columns: 32vw; }
}