.seo-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── 레이아웃용 Flexbox 설정 (추가) ─── */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    padding-top: 116px;
}


/* ---------- Reset ---------- */
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Segoe UI', 'Arial', sans-serif;
}


:root {
    --columns: 8; /* 메뉴 컬럼 개수 */
    --gap: 0px;
    --menu-width: 900px;
    --tripbora-primary: #7657c8;
    --tripbora-primary-hover: #6042b0;
    --tripbora-primary-active: #513694;
    --tripbora-soft: #f3efff;
    --tripbora-border: #ded5f5;
    --tripbora-text: #28272d;
    --tripbora-focus: rgba(118, 87, 200, 0.24);
}

/* ---------- Navigation Bar ---------- */
.main-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 116px;
    background: transparent;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

/* ✅ hover 시 헤더 전체 흰색으로 */
.main-nav:hover {
    background-color: #ffffff !important;
    transition: none !important; /* 즉시 적용 */
}

/* 로고 */
.logo {
    position: absolute;
    left: 58px;
    top: 0;
    width: 150px;
    height: 100px;
    display: flex;
    align-items: center;
    z-index: 20;
}
.logo > a {
    display: block;
    width: 100%;
}
.logo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 327;
}

/*
  세션 첫 진입 때 한 번만 도는 로고 등장 모션. 헤더 인라인 스크립트가 클래스를 붙였다 뗀다.
  새 그림이나 복제 레이어 없이 기존 로고 <img> 하나만 움직인다.
  1) 비행기 핀 심볼 부분(가로 0~285px / 1200px = 23.75%)만 보이게 잘라, 오른쪽에서 완만한 곡선으로
     제자리까지 날아온다.
  2) 도착 100ms 뒤 같은 이미지의 글자 부분을 왼쪽부터 드러낸다.
  타임라인(2200ms): 심볼 비행 0~1600ms → 정지 100ms → 글자 reveal 1700~2200ms. 비행이 끝나면 transform·opacity 가
  더는 걸려 있지 않아 정적 로고와 같은 렌더링으로 글자가 드러나고, 끝나면 클래스가 빠져 원래 로고만 남는다.
*/
.logo.is-logo-intro img {
    opacity: 0;  /* 이미지가 준비될 때까지. 공간은 aspect-ratio 로 그대로 잡혀 있다. */
}

.logo.is-logo-intro.is-logo-intro-playing img {
    /*
      출발 거리. 1200px 이상은 가운데 820px 메뉴의 첫 글자에 닿지 않는 만큼(1200px 에서 120px,
      1440px 에서 240px, 최대 260px). 메뉴가 ☰ 로 접히는 태블릿은 200px.
    */
    --logo-intro-distance: clamp(120px, calc(50vw - 480px), 260px);
    --logo-intro-lift: -10px;
    opacity: 1;
    transform-origin: 11.875% 50%;  /* 심볼 가운데 */
    animation:
        tripbora-logo-flight 1600ms linear backwards,
        tripbora-logo-reveal 2200ms linear both;
}

/* 태블릿·모바일 출발 거리는 아래 로고 크기 미디어쿼리(1199px·767px) 안에서 함께 정한다. */

/*
  심볼 비행: 오른쪽에서 나타나(약 200ms 동안 opacity) 살짝 떠오르는 완만한 곡선으로 왼쪽 제자리까지 온다.
  가로 이동은 적당한 속도로 시작해 도착하며 감속하고(bounce·급정지 없음), 기울기는 -8° 에서 0° 로 돌아온다.
*/
@keyframes tripbora-logo-flight {
    0% {
        translate: var(--logo-intro-distance) 0;
        rotate: -8deg;
        scale: 0.9;
        transform: translateY(0);
        opacity: 0;
        animation-timing-function: cubic-bezier(0.32, 0.6, 0.38, 1);
    }
    12.5% {
        opacity: 1;
    }
    45% {
        transform: translateY(var(--logo-intro-lift));
        animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    }
    100% {
        translate: 0 0;
        rotate: 0deg;
        scale: 1;
        transform: translateY(0);
        opacity: 1;
    }
}

/* 글자: 비행 중에는 심볼만 보이게 자르고, 도착 100ms 뒤 500ms 동안 오른쪽으로 펼쳐지듯 드러낸다. */
@keyframes tripbora-logo-reveal {
    0%, 77.27% {
        clip-path: inset(0 76.25% 0 0);
        animation-timing-function: cubic-bezier(0.25, 0.8, 0.3, 1);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo.is-logo-intro img {
        opacity: 1;
        animation: none !important;
    }
}

/* 그리드 레이아웃 */
.nav-grid {
    width: var(--menu-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-template-rows: 100px auto;
    column-gap: var(--gap);
}

/* 메인 메뉴 */
.main-menu {
    grid-column: 1/-1;
    display: contents;
}
.menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
    text-decoration: none;
    color: #333;
    font-size: 16px;
}
.menu-item > a[aria-current="page"], .site-menu-entry > a[aria-current="page"], .site-menu-group > summary[aria-current="page"] {
    color: var(--tripbora-primary);
}

/* 서브메뉴 */
.global-submenu {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    background: #ffffff; /* ✅ hover 시에도 흰색 통일 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    backdrop-filter: none;       /* ✅ 흐림 제거 */
    height: var(--header-submenu-height, 128px);
    padding: 0;
    box-sizing: border-box;
    display: none;
}

.submenu-col h3 {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
    text-align: center;
}
.submenu-col ul {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
}
.submenu-col ul li + li {
    margin-top: 8px;
}
.submenu-col ul li a {
    font-size: 13px;
    color: #333;
    text-decoration: none;
    font-weight: 400;
    line-height: 1.5;
}
.submenu-col ul li .submenu-link-disabled {
    font-size: 13px;
    color: #9aa3af;
    cursor: default;
}

/* Responsive */
@media (max-width: 870px) {
    :root {
        --columns: 2;
        --menu-width: 100%;
    }
    .menu-item a {
        font-size: 15px;
    }
    .submenu-col h3 {
        text-align: left;
    }
    .submenu-col ul {
        text-align: left;
    }
    .login-container .register-container {
        width: 90%;
        margin: 60px auto;
        padding: 20px;
    }
    .login-logo img {
        max-height: 140px;
    }
}

/* ---------- 헤더 좁은 화면 대응 ---------- */

/*
  메뉴 글자가 중간에서 끊기지 않게 한다.
  자리가 모자라면 글자를 자르는 대신 아래 breakpoint 에서 메뉴 판으로 바꾼다.
*/
.menu-item > a,
.site-menu a {
    white-space: nowrap;
}

/* ☰ 는 좁은 화면에서만 쓴다 */
.site-menu-toggle {
    display: none;
    padding: 6px;
    border: none;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

/* 가로줄 세 개를 그려 햄버거 모양을 만든다 */
.site-menu-toggle-bars,
.site-menu-toggle-bars::before,
.site-menu-toggle-bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: #333;
    border-radius: 2px;
}

.site-menu-toggle-bars {
    position: relative;
}

.site-menu-toggle-bars::before,
.site-menu-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.site-menu-toggle-bars::before {
    top: -6px;
}

.site-menu-toggle-bars::after {
    top: 6px;
}

.site-menu-toggle:focus-visible {
    outline: 3px solid rgba(0, 102, 204, 0.28);
    outline-offset: 2px;
}

/* 메뉴 판은 헤더 아래로 펼쳐진다. 헤더 자체는 계속 한 줄이다 */
.site-menu {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 12px 20px 20px;
    background: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    z-index: 30;
}

.site-menu[hidden] {
    display: none;
}

/*
  위에서 아래로 한 줄씩 읽히는 세로 메뉴.
  1차 메뉴가 가로로 늘어서면 좁은 폭에서 다시 줄이 접히고,
  그 아래 같은 이름이 또 나와 두 번 읽게 된다.
*/
.site-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-menu-entry + .site-menu-entry {
    border-top: 1px solid #f0f0f0;
}

/* 1차 메뉴. 하위 링크보다 분명히 굵고 크다 */
.site-menu-entry > a {
    display: block;
    padding: 12px 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

/* 하위 링크가 없는 항목은 아래 여백까지 스스로 갖는다 */
.site-menu-entry > a:only-child {
    padding-bottom: 12px;
}

/* 하위 링크. 들여쓰기와 크기로 위계를 낮춘다 */
.site-menu-entry ul {
    list-style: none;
    margin: 0;
    padding: 0 0 10px 12px;
    text-align: left;
}

.site-menu-entry ul li {
    display: block;
}

.site-menu-entry ul li a {
    display: block;
    width: auto;
    height: auto;
    padding: 5px 0;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    text-decoration: none;
}

.site-menu-entry a:hover,
.site-menu-entry a:focus-visible {
    color: var(--tripbora-primary);
}

/*
  펼쳐 둔 메뉴가 헤더 폭에 들어가지 않는 구간.
  기존 .nav-grid 는 820px 고정 폭 7열 그리드라 여기서부터 로고·검색과 겹치고,
  좁아지면 열 수가 줄면서 메뉴가 여러 줄로 쌓인다. 그래서 통째로 감추고 ☰ 로 바꾼다.
*/
@media (max-width: 1199px) {
    main {
        padding-top: 100px;
    }

    .main-nav {
        height: 100px;
    }

    .logo {
        left: 24px;
        width: 140px;
        height: 100px;
    }

    /* 로고 인트로: 메뉴가 ☰ 로 접혀 로고 오른쪽이 비므로 200px 에서 출발한다. */
    .logo.is-logo-intro.is-logo-intro-playing img {
        --logo-intro-distance: 200px;
    }

    .nav-grid,
    .global-submenu {
        display: none !important;
    }

    .site-menu-toggle {
        display: flex;
    }

}

/* 접힌 메뉴 전용. 펼쳐진 데스크톱 navigation에는 적용하지 않는다. */
@media (max-width: 1199px) {
    .site-menu {
        max-height: calc(100dvh - 100px);
        padding: 8px 16px 12px;
        overscroll-behavior-y: contain;
        scrollbar-width: thin;
        box-shadow: none;
    }

    .site-menu-entry + .site-menu-entry { border-top: 0; }

    .site-menu-entry > a:only-child,
    .site-menu-group > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 42px;
        padding: 0;
        color: #333;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.4;
        list-style: none;
        cursor: pointer;
    }

    .site-menu-entry > a[aria-current="page"],
    .site-menu-group > summary[aria-current="page"] {
        color: var(--tripbora-primary);
    }

    .site-menu-group > summary::-webkit-details-marker { display: none; }
    .site-menu-group > summary::after {
        content: "";
        flex: none;
        width: 7px;
        height: 7px;
        margin: 0 4px 4px 12px;
        border-right: 1.5px solid #777;
        border-bottom: 1.5px solid #777;
        transform: rotate(45deg);
    }
    .site-menu-group[open] > summary::after {
        transform: translateY(4px) rotate(-135deg);
    }
    .site-menu-group > summary:focus-visible {
        outline: 2px solid var(--tripbora-focus);
        outline-offset: -2px;
    }
    .site-menu-entry ul { padding: 0 0 4px 12px; }
    .site-menu-entry ul li a {
        display: flex;
        align-items: center;
        min-height: 34px;
        padding: 0;
        font-size: 13px;
        line-height: 1.4;
    }
    .site-menu .site-menu-about {
        margin-top: 8px;
        padding: 8px 0;
        color: #666;
        font-size: 13px;
        font-weight: 400;
    }
}

/* 모바일 로고 크기와 메뉴의 좌우 여백 */
@media (max-width: 767px) {
    /* 오른쪽 검색·메뉴·언어·로그인 묶음(약 236px)과 겹치지 않도록 좁은 화면에서 함께 줄인다. */
    .logo {
        left: 20px;
        width: clamp(92px, calc(100vw - 268px), 124px);
        height: 100px;
    }

    /* 로고 인트로: 로고 상자 오른쪽 끝(약 70~95px)에서 출발해 오른쪽 버튼 묶음과 겹치지 않는다. */
    .logo.is-logo-intro.is-logo-intro-playing img {
        --logo-intro-distance: 76.25%;
        --logo-intro-lift: -6px;
    }

    .site-menu {
        padding: 8px 16px 16px;
    }

}

/* ---------- 검색창 (헤더 오른쪽) ---------- */
.search-box .sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}

.search-box{
    position:absolute;
    right:20px;
    top:0;
    height:100px;
    display:flex;
    align-items:center;
    gap:6px;
    box-sizing:border-box;
    padding-right: clamp(8px, 2vw, 24px);
    z-index:20;
}

/*
  검색창은 가운데 메뉴 오른쪽에 남는 자리 안에서만 펼친다.
  .search-box 는 absolute 라 넓어져도 메뉴를 밀어내지 못하고 그대로 덮는다.
  그래서 밀림이 아니라 폭 자체를 막는다.
  .nav-grid 는 --menu-width 를 가운데 정렬하며 로고·도구 공간을 남긴다.
  오른쪽 여백 20px을 제외한 영역까지만 검색창을 펼친다.
  메뉴를 ☰ 로 접는 1199px 이하에서는 기존 정책 그대로 제한하지 않는다.
*/
@media (min-width: 1200px) {
    .main-nav {
        --header-submenu-gap: 16px;
    }

    /* 1차 메뉴만 간격을 조정한다. 독립된 mega menu의 grid에는 전파하지 않는다. */
    .main-nav > .nav-grid {
        --header-menu-gap: 60px;
        /* 1차 메뉴 간격과 독립적으로 기존 하위 메뉴 폭을 유지한다. */
        --header-submenu-inline-space: 32px;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: calc(100% - 400px);
        height: 100px;
    }

    .main-nav > .nav-grid > .main-menu {
        display: flex;
        align-items: center;
        gap: var(--header-menu-gap);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .main-nav > .nav-grid > .main-menu > .menu-item {
        flex: 0 0 auto;
        position: relative;
    }

    .main-nav > .nav-grid > .main-menu > .menu-item > a {
        width: auto;
        height: auto;
        font-size: clamp(14px, 1.1vw, 16px);
        line-height: 1.4;
    }

    .main-menu > .menu-item > .submenu-col {
        position: absolute;
        top: calc(100% + var(--header-submenu-gap));
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% + var(--header-submenu-inline-space));
        box-sizing: border-box;
        padding: 0 0 20px;
        font-size: 13px;
        line-height: 1.5;
        visibility: hidden;
        pointer-events: none;
    }

    /* 부모와 하위 메뉴 사이를 지나가도 hover가 끊기지 않는 투명한 연결 영역. */
    .main-menu > .menu-item > .submenu-col::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 100%;
        height: var(--header-submenu-gap);
    }

    .main-nav > .global-submenu {
        top: var(--header-submenu-top, 70px);
    }

    .main-nav:has(.main-menu:hover, .global-submenu:hover, .main-menu:focus-within) > .global-submenu {
        display: block;
    }

    .main-nav:has(.main-menu:hover, .global-submenu:hover, .main-menu:focus-within) .main-menu > .menu-item > .submenu-col {
        visibility: visible;
        pointer-events: auto;
    }

    .search-box {
        max-width: calc(50vw - (var(--menu-width) / 2) - 20px);
        justify-content: flex-end;
        padding-right: 0;
        gap: 4px;
    }

    .search-box #auth-area { margin-left: 0; }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    html:lang(en) .main-nav > .nav-grid,
    html:lang(ja) .main-nav > .nav-grid {
        --header-menu-gap: 40px;
    }
}

.search-box button#search-toggle{
    padding:6px;
    background:none;
    border:none;
    border-radius:4px;
    cursor:pointer;
    display:flex;
    align-items:center;
    flex-shrink:0;
    transition:opacity .15s ease, width .15s ease, padding .15s ease;
}

.search-box.search-open button#search-toggle {
    width:0;
    padding:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    overflow:hidden;
}
.search-box img{width:22px;height:22px;}

.search-box button:focus-visible,
#search-form input:focus-visible {
    outline:3px solid rgba(0, 102, 204, 0.28);
    outline-offset:2px;
}

/* 자리가 모자라면 언어 선택·프로필이 아니라 검색창만 줄어든다 */
#search-form{
    display:flex;
    position:relative;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    width:0;
    flex-shrink:1;
    min-width:0;
    overflow:hidden;
    transition:width .25s ease, opacity .25s ease, visibility 0s linear .25s;
}

#search-form.open{
    width:240px;
    max-width:100%;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:width .25s ease, opacity .25s ease;
}

/* 오른쪽 안쪽에 지우기(36px) + 검색(38px) 두 버튼이 들어갈 자리를 비워 둔다 */
#search-form input{
    flex:1;
    width:100%;
    min-width:0;
    padding:9px 78px 9px 12px;
    font-size:14px;
    border:1px solid #cbd3dc;
    border-radius:6px;
    background:#fff;
    color:#252b33;
    outline:none;
}

/* 브라우저 기본 X 는 클릭 영역이 너무 좁아 쓰지 않고, 아래 버튼만 남긴다 */
#search-form input::-webkit-search-cancel-button,
#search-form input::-webkit-search-decoration{
    -webkit-appearance:none;
    appearance:none;
}

/*
  지우기 버튼. 보이는 X 는 12px 그대로 두고 투명한 클릭 영역만 36x36 으로 넓힌다.
  검색 버튼(right:1px, 폭 38px) 바로 왼쪽에 두어 서로 겹치지 않는다.
  돋보기 토글은 form 바깥에 있고 열린 동안 폭이 0 이라 겹칠 일이 없다.
*/
#search-form .search-clear{
    position:absolute;
    top:50%;
    right:39px;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:transparent;
    cursor:pointer;
}

#search-form .search-clear[hidden]{
    display:none;
}

#search-form .search-clear:hover{
    background:#f1f5f9;
}

#search-form .search-clear:focus-visible{
    outline:3px solid rgba(0, 102, 204, 0.28);
    outline-offset:-3px;
}

.search-clear-icon{
    position:relative;
    display:block;
    width:12px;
    height:12px;
}

.search-clear-icon::before,
.search-clear-icon::after{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1.6px;
    border-radius:1px;
    background:#6b7684;
}

.search-clear-icon::before{
    transform:translateY(-50%) rotate(45deg);
}

.search-clear-icon::after{
    transform:translateY(-50%) rotate(-45deg);
}

#search-form .search-submit{
    position:absolute;
    top:1px;
    right:1px;
    bottom:1px;
    width:38px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:0 5px 5px 0;
    background:transparent;
    cursor:pointer;
}

#search-form .search-submit:hover {
    background:#f1f5f9;
}

/*
  서비스 소개(/about) 아이콘 링크. 배경·테두리 없이 원형 info 선 아이콘만 두고
  hover/focus 때 아이콘 색만 브랜드 보라로 바뀐다. 클릭 영역은 40px 로 넓혀 둔다.
  ☰ 가 보이는 1199px 이하에서는 감추고 메뉴 판의 글자 링크(.site-menu-about)로 대신한다.
*/
.header-about-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    transition: color .15s ease;
}

.header-about-link:hover,
.header-about-link:focus-visible {
    color: var(--tripbora-primary);
}

.header-about-link:focus-visible {
    outline: 3px solid var(--tripbora-focus);
    outline-offset: 2px;
}

.header-about-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.header-about-icon-dot {
    fill: currentColor;
    stroke: none;
}

/* 메뉴 판의 소개 보조 링크. 1차 메뉴보다 한 단계 가볍게 둔다 */
.site-menu-about {
    display: block;
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
    font-size: 15px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
}

.site-menu-about:hover,
.site-menu-about:focus-visible {
    color: var(--tripbora-primary);
}

@media (max-width: 1199px) {
    .header-about-link {
        display: none;
    }
}

#auth-area{
    margin-left:16px;
    display:flex;
    align-items:center;
    position:relative;
    flex-shrink:0;
}

#login-btn{
    padding:6px 14px;
    font-size:14px;
    background: var(--tripbora-primary);
    color:#fff;
    border:none;
    border-radius:4px;
    cursor:pointer;
}

.language-menu {
    position: relative;
    flex-shrink: 0;
}

.language-menu-toggle {
    display: flex;
    align-items: center;
    min-height: 36px;
    box-sizing: border-box;
    padding: 7px 9px;
    gap: 6px;
    border: 1px solid #d7dee7;
    border-radius: 6px;
    background: #fff;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    list-style: none;
    white-space: nowrap;
    cursor: pointer;
}

.language-menu-toggle::-webkit-details-marker {
    display: none;
}

.language-menu-toggle:hover {
    border-color: #aebdce;
}

.language-menu-toggle:focus-visible,
.language-menu-option:focus-visible {
    outline: 3px solid rgba(0, 102, 204, 0.28);
    outline-offset: 2px;
}

.language-menu-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.language-menu-chevron {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.language-menu[open] .language-menu-chevron {
    transform: translateY(2px) rotate(225deg);
}

.language-menu-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1100;
    width: 156px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    border: 1px solid #dfe5ec;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(31, 48, 70, 0.1);
}

.locale-option-form {
    margin: 0;
}

.language-menu-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 36px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #344054;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.language-menu-option:hover,
.language-menu-option.is-active {
    background: var(--tripbora-soft);
    color: var(--tripbora-primary-hover);
}

.language-menu-check {
    color: var(--tripbora-primary-hover);
    font-weight: 700;
}

@media (max-width: 1599px) {
    /* 넓어진 1차 메뉴와 도구가 겹치지 않도록 언어 아이콘을 유지한다. */
    .language-menu-current {
        display: none;
    }

    .language-menu-toggle {
        width: 36px;
        justify-content: center;
        padding: 7px;
    }

    .language-menu-chevron {
        display: none;
    }
}

.profile-menu-container {
    position: relative;
}

.profile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width:40px;
    height:40px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d7dee7;
    border-radius:50%;
    background: #fff;
    cursor:pointer;
}

.profile-menu-toggle:hover {
    border-color: #aebdce;
}

#profile-img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1100;
    width: 200px;
    max-width: calc(100vw - 24px);
    padding: 8px;
    border: 1px solid #dfe5ec;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(31, 48, 70, 0.1);
}

.profile-menu[hidden] {
    display: none;
}

.profile-menu-title {
    padding: 9px 11px 10px;
    color: #697587;
    font-size: 12px;
    font-weight: 700;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #344054;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.profile-menu-item:hover {
    background: var(--tripbora-soft);
    color: var(--tripbora-primary-hover);
}

.profile-menu-toggle:focus-visible,
.profile-menu-item:focus-visible {
    outline: 3px solid rgba(0, 102, 204, 0.28);
    outline-offset: 2px;
}

.profile-menu-admin,
.profile-menu-logout-form {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #edf0f4;
}

.profile-menu-admin {
    border-radius: 0 0 6px 6px;
    color: #315f88;
}

.profile-menu-logout-form {
    margin-bottom: 0;
}

.profile-menu-logout {
    font-family: inherit;
}

/* 모바일 헤더: 상단 컨트롤과 검색 행을 분리한다. 데스크톱 규칙은 유지한다. */
.search-toggle-close { display: none; }

@media (max-width: 1199px) {
    .main-nav {
        display: flex;
        align-items: center;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .main-nav .logo {
        position: static;
        width: 124px;
        flex-shrink: 0;
    }

    .main-nav .search-box {
        position: static;
        margin-left: auto;
        padding: 0;
        gap: 4px;
    }

    .search-box > .language-menu { display: none; }

    .search-box #search-toggle,
    .search-box.search-open button#search-toggle,
    .search-box .site-menu-toggle {
        width: 44px;
        height: 44px;
        padding: 10px;
        box-sizing: border-box;
        justify-content: center;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: none;
    }

    .search-box.search-open #search-toggle img { display: none; }
    .search-box.search-open .search-toggle-close {
        display: block;
        position: relative;
        width: 22px;
        height: 22px;
    }
    .search-toggle-close::before,
    .search-toggle-close::after {
        content: '';
        position: absolute;
        left: 2px;
        top: 10px;
        width: 18px;
        height: 2px;
        background: currentColor;
        transform: rotate(45deg);
    }
    .search-toggle-close::after { transform: rotate(-45deg); }

    .search-box #auth-area { margin-left: 4px; }
    .search-box #login-btn {
        min-height: 44px;
        padding: 0 12px;
        white-space: nowrap;
    }
    .search-box .profile-menu-toggle { width: 44px; height: 44px; }

    #search-form,
    #search-form.open {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        padding: 0 16px 16px;
        box-sizing: border-box;
        background: #fff;
        overflow: visible;
        transition: none;
    }
    #search-form { display: none; }
    #search-form.open { display: flex; }
    #search-form input {
        height: 48px;
        box-sizing: border-box;
        padding: 0 92px 0 12px;
        font-size: 16px;
    }
    #search-form .search-submit {
        top: 2px;
        right: 18px;
        bottom: auto;
        width: 44px;
        height: 44px;
    }
    #search-form .search-clear {
        top: 2px;
        right: 62px;
        width: 44px;
        height: 44px;
        transform: none;
    }

    .site-menu { max-height: calc(100dvh - 100px); }
    .site-menu-utilities {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e5e7eb;
    }
    .site-menu-utilities .language-menu-toggle {
        width: 100%;
        min-height: 44px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-sizing: border-box;
        justify-content: flex-start;
    }
    .site-menu-utilities .language-menu-current,
    .site-menu-utilities .language-menu-chevron { display: block; }
    .site-menu-utilities .language-menu-chevron { margin-left: auto; }
    .site-menu-utilities .language-menu-popover {
        position: static;
        width: auto;
        max-width: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .site-menu-utilities .language-menu-option {
        min-height: 44px;
        border-radius: 0;
    }
}

/* 모바일 메뉴의 utility와 언어 subview. 데스크톱 언어 popover는 그대로 둔다. */
@media (max-width: 1199px) {
    .site-menu-utilities .site-menu-about,
    .site-menu-utilities .language-menu-toggle {
        display: flex;
        align-items: center;
        min-height: 38px;
        margin: 0;
        padding: 0;
        border: 0;
        color: #666;
        font-size: 13px;
        font-weight: 400;
        gap: 10px;
    }
    .site-menu-utilities .site-menu-about { justify-content: space-between; }
    .site-menu-utilities .language-menu-current { margin-left: auto; }
    .site-menu-utility-chevron {
        width: 6px;
        height: 6px;
        margin-right: 4px;
        border-top: 1.5px solid #888;
        border-right: 1.5px solid #888;
        transform: rotate(45deg);
    }
    .site-menu-nav:has(.site-menu-language[open]) > .site-menu-list,
    .site-menu-utilities:has(.site-menu-language[open]) > .site-menu-about,
    .site-menu-language[open] > summary { display: none; }
    .site-menu-utilities:has(.site-menu-language[open]) {
        margin: 0;
        padding: 0;
        border: 0;
    }
    .site-menu-language-back {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 42px;
        width: 100%;
        padding: 0;
        border: 0;
        background: none;
        color: #333;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }
    .site-menu-language .language-menu-option {
        justify-content: flex-start;
        gap: 10px;
        min-height: 40px;
        padding: 0 0 0 24px;
        font-size: 14px;
        font-weight: 400;
        background: none;
    }
    .site-menu-language .language-menu-option.is-active { color: var(--tripbora-primary); }
    .site-menu-language .language-menu-check { order: -1; margin-left: -20px; }
    .site-menu-language-back:focus-visible {
        outline: 2px solid var(--tripbora-focus);
        outline-offset: -2px;
    }
}

/* 푸터 */
.site-footer {
    padding: 52px 24px 24px;
    border-top: 1px solid var(--tripbora-border);
    background: linear-gradient(180deg, #f8f6fc 0%, #fafafc 100%);
    color: var(--tripbora-text);
    font-size: 14px;
    text-align: left;
}

.footer-inner {
    max-width: 1120px;
    margin: 0 auto;
}

.footer-main {
    display: grid;
    grid-template-columns: minmax(300px, 1.5fr) minmax(150px, 0.7fr) minmax(180px, 0.8fr);
    gap: 56px;
}

.footer-brand {
    min-width: 0;
}

.footer-logo {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--tripbora-primary-active);
    font-size: 28px;
    font-weight: 800;
    text-decoration: none;
}

.footer-logo:hover {
    color: var(--tripbora-primary);
}

.footer-description {
    max-width: 360px;
    margin: 0;
    color: #6b6674;
    line-height: 1.7;
}

.footer-column-title {
    margin: 0 0 14px;
    color: var(--tripbora-text);
    font-size: 14px;
    font-weight: 750;
}

.footer-links {
    display: grid;
    gap: 9px;
    margin: 0;
    list-style: none;
    padding: 0;
}

.footer-links li a {
    color: #625e6b;
    text-decoration: none;
}

.footer-links li a:hover {
    color: var(--tripbora-primary);
}

.footer-contact {
    min-width: 0;
}

.footer-contact-email {
    color: inherit;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.footer-contact-email:hover {
    color: var(--tripbora-primary);
}

.footer-info {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid #e8e3f4;
}

.footer-info p {
    margin: 0;
    color: #817b89;
    line-height: 1.6;
}

.footer-operations {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 4px !important;
}

.footer-operation {
    display: inline-flex;
    min-width: 0;
    gap: 4px;
}

.footer-operation--separated::before {
    margin-right: 6px;
    content: "·";
}

@media (max-width: 820px) {
    .site-footer {
        padding: 24px 20px 18px;
    }

    .footer-main {
        grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .footer-logo {
        margin-bottom: 4px;
        font-size: 22px;
    }

    .footer-description {
        line-height: 1.5;
    }

    .footer-column-title {
        margin-bottom: 6px;
    }

    .footer-links {
        gap: 0;
    }

    .footer-links li a {
        display: flex;
        align-items: center;
        min-height: 32px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .footer-info {
        margin-top: 12px;
        padding-top: 10px;
        border-color: #e7e5ea;
        font-size: 13px;
    }

    .footer-info p {
        line-height: 1.5;
    }

    .footer-operations {
        gap: 0 10px;
        margin-bottom: 2px !important;
    }
}

@media (max-width: 600px) {
    .site-footer {
        padding: 20px 16px 16px;
    }

    .footer-main {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 14px 20px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-operations {
        flex-direction: column;
    }

    .footer-operation--separated::before {
        content: none;
    }
}



/* ---------- 로그인 폼 ---------- */
.login-container {
    width: 480px;         /* 원하는 고정 너비 */
    margin: 10px auto;
    padding: 30px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
    box-sizing: border-box;
}

.login-container h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 26px;
}

.login-container input[type="text"],
.login-container input[type="password"] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

.login-container label {
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.login-container input[type="checkbox"] {
    margin-right: 6px;
}

.login-container button {
    width: 100%;
    padding: 12px;
    background: var(--tripbora-primary);
    border: none;
    color: #fff;
    font-size: 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.login-container button:hover {
    background: var(--tripbora-primary-hover);
}

.login-container p {
    text-align: center;
    font-size: 14px;
    margin-top: 20px;
}
.login-container p a {
    color: var(--tripbora-primary);
    text-decoration: none;
}
.login-container p a:hover {
    text-decoration: underline;
}

.alert {
    font-size: 13px;
    margin-top: 2px;
    line-height: 1.4;
    text-align: left;
}

.login-container .alert.error { color: red; }
.login-container .alert.success { color: green; }

.login-logo {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 20px;
}
.login-logo img {
    max-height: 200px;
    width: auto;
}

/* 공통 스타일 - input 내부 여백은 좌측 아이콘 공간 확보로 조정됨 */
.form-step input[type="text"],
.form-step input[type="email"],
.form-step input[type="password"],
.form-step input[type="date"],
.form-step input[type="file"] {
    width: 100%;
    height: 48px;
    padding: 0 12px 0 44px; /* 왼쪽 아이콘 공간 */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 8px;
    box-sizing: border-box;
    background-color: #fff;
}

input::placeholder {
    color: #aaa;
}

/* 아이콘 구조용 컨테이너 */
.input-with-icon {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

/* 아이콘이 input 내부에 겹치도록 배치 */
.input-with-icon .icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 각각 아이콘 이미지 지정 */
.icon.user-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z' /%3E%3C/svg%3E");
    /*
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    */

}
.icon.email-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75' /%3E%3C/svg%3E");
    /*
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z' /%3E%3Cpath d='M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z' /%3E%3C/svg%3E");
    */
}
.icon.lock-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z' /%3E%3C/svg%3E");
    /*
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z' clip-rule='evenodd' /%3E%3C/svg%3E");
    */
}

.icon.phone-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3' /%3E%3C/svg%3E");
    /*
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z' /%3E%3C/svg%3E");
    */
    /*
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3' /%3E%3C/svg%3E");
    */
    /*
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z' /%3E%3C/svg%3E");
    */
}

.icon.calendar-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5' /%3E%3C/svg%3E");
    /*
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z' clip-rule='evenodd' /%3E%3C/svg%3E");
    */
}

.icon.image-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z' /%3E%3C/svg%3E");
    /*
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z' clip-rule='evenodd' /%3E%3C/svg%3E");
    */
}


/* 이메일 심볼
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25' /%3E%3C/svg%3E");
*/

.input-with-icon input {
    width: 100%;
    height: 48px;
    padding: 0 12px 0 44px; /* 아이콘 공간 확보 */
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #fff;

}

/* ✅ 더 넓은 범위에 적용되도록 수정 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="file"] {
    padding: 0 12px 0 44px; /* ← 이게 로그인폼에도 적용되도록 */
}

.input-with-icon input {
    padding-left: 44px !important;
}


.toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.7;
    pointer-events: auto;
}

/* 👁️ 보이기 아이콘 */
.toggle-password.show {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z' /%3E%3C/svg%3E");
}

/* 🙈 가리기 아이콘 (필요 시 다른 아이콘으로) */
.toggle-password.hide {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 3l18 18M3 3l18 18M12 4.5C7.36 4.5 3.423 7.51 2.036 12.322c-.07.207-.07.431 0 .639C3.423 16.49 7.36 19.5 12 19.5c4.64 0 8.577-3.01 9.964-7.182.07-.208.07-.432 0-.639C20.577 7.51 16.64 4.5 12 4.5Z' /%3E%3C/svg%3E");
}

.input-with-icon {
    position: relative;
}

.input-with-icon input {
    margin-bottom: 0; /* ⛔ 인풋 자체의 margin 제거 */
}

.input-group {
    margin-bottom: 12px; /* ✅ 그룹 전체 여백 부여 */
}


.extra-links {
    text-align: center;
    font-size: 14px;
    margin-top: 12px;
}
.extra-links a {
    color: var(--tripbora-primary);
    text-decoration: none;
}
.extra-links a:hover {
    text-decoration: underline;
}
.verification-resend-entry {
    display: block;
    margin-top: 10px;
    color: #667085;
}

/*이미지 저장막기 */
img.protected-image {
    -webkit-user-drag: none;
    user-select: none;
}

/*
  공공누리 제3유형(변경금지) 사진: 카드 썸네일에서도 잘라 보이지 않게 원본 비율 전체를 담는다.
  이미지 칸 크기는 각 카드 규칙 그대로 두고 남는 자리만 중립 배경으로 채운다.
  카드마다 cover·확대(hover) 규칙의 우선순위가 달라 여기서 한 번에 덮는다.
*/
img.is-no-derivatives {
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    background-color: #f3f4f6;
}

/*
  여행지 카드 썸네일(img.card-thumb). 채우는 방식은 각 카드의 object-fit: cover 그대로이고, 자르는 위치만 바꾼다.
  세로 사진은 가운데를 자르면 탑·건물 윗부분이 먼저 잘리므로 card-thumbnail.js 가 실제 비율로 data-thumb-shape 를 붙여
  조금 위쪽을 남긴다. 아래가 크게 잘리지 않게 위 끝(0%)까지는 올리지 않는다.
  공공누리 제3유형(img.is-no-derivatives)은 위 규칙(!important)이 그대로 이긴다.
*/
img.card-thumb[data-thumb-shape="portrait"] {
    object-position: 50% 40%;
}

img.card-thumb[data-thumb-shape="tall"] {
    object-position: 50% 35%;
}