.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: 7; /* 메뉴 컬럼 개수 */
    --gap: 0px;
    --menu-width: 820px;
    --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;
    margin-top: 8px;
    width: 124px;
    height: 116px;
    display: flex;
    align-items: center;
    z-index: 20;
}
.logo > a {
    display: block;
    width: 100%;
    height: 116px;
}
.logo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: left center;
}

/* 그리드 레이아웃 */
.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;
}

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

.main-nav:hover .global-submenu {
    display: block;
}
.submenu-grid {
    width: var(--menu-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    column-gap: var(--gap);
    padding: 10px 20px; /* ✅ 좌우 여백 줄이기 */
}

.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;
}
.submenu-col ul li + li {
    margin-top: 8px;
}
.submenu-col ul li a {
    font-size: 13px;
    color: #333;
    text-decoration: none;
}
.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;
        margin-top: 0;
        width: 106px;
        height: 100px;
    }

    .logo > a {
        height: 99px;
    }

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

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

}

/*
  모바일도 같은 세로 메뉴를 쓴다. 구조는 그대로 두고 여백과 글자만 조금 줄인다.
*/
@media (max-width: 767px) {
    .logo {
        left: 20px;
        width: 92px;
        height: 100px;
    }

    .logo > a {
        height: 86px;
    }

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

    .site-menu-entry > a {
        padding: 11px 0 5px;
        font-size: 15px;
    }

    .site-menu-entry ul {
        padding-bottom: 8px;
    }

    .site-menu-entry ul li a {
        font-size: 13px;
    }
}

/* ---------- 검색창 (헤더 오른쪽) ---------- */
.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 를 가운데 정렬하므로 오른쪽에 남는 자리는
  50vw - (--menu-width / 2) 이고, 여기서 헤더 오른쪽 여백 20px 을 뺀 만큼이다.
  메뉴를 ☰ 로 접는 1199px 이하에서는 기존 정책 그대로 제한하지 않는다.
*/
@media (min-width: 1200px) {
    .search-box {
        max-width: calc(50vw - (var(--menu-width) / 2) - 20px);
    }
}

.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;
}

#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: 1399px) {
    .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;
}

/* 푸터 */
.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: 40px 20px 22px;
    }

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



/* ---------- 로그인 폼 ---------- */
.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;
}