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

body {
    font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
    color: #1e1e1e;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

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

ul,
li {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* ===== Utility ===== */
.pc-only {
    display: block;
}

.mo-only {
    display: none;
}

.inner {
    max-width: 1588px;
    margin: 0 auto;
    padding: 0 24px;
}

/* 어드민 에디터 콘텐츠 용 */
.editor-content-view,
.editor-content-view * {
    all: revert-layer;
    margin: 0;
}

.editor-content-view *:has(> img)::after {
    content: '';
    clear: both;
    display: block;
}

.editor-content-view img {
    max-width: 100%;
    width: 100% !important;
    height: auto !important;
}

.editor-content-view table {
    max-width: 100%;
    overflow-x: auto;
}

/* ===== btn ===== */
.prev-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #00B2B0;
    background-color: transparent;
    text-align: center;
    width: 240px;
    padding: 15px 0;
    font-size: 20px;
    font-weight: 600;
    color: #00B2B0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.prev-btn:hover {
    background-color: #0A5874;
    border-color: #0A5874;
    color: #fff;
    gap: 12px;
}

.prev-btn::before {
    content: '';
    width: 0;
    height: 20px;
    opacity: 0;
    visibility: hidden;
    display: flex;
    background: url(/common/img/icon-arrow-tail-w-f5e163ed6df1bc3a5e08947822b53a1c.png) no-repeat center/contain;
    transition: all 0.3s ease;
}

.prev-btn:hover::before {
    width: 20px;
    opacity: 1;
    visibility: visible;
}

.next-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00B2B0;
    text-align: center;
    width: 240px;
    padding: 16px 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.next-btn:hover {
    background-color: #0A5874;
    gap: 12px;
}

.next-btn::after {
    content: '';
    width: 0;
    height: 20px;
    opacity: 0;
    visibility: hidden;
    display: flex;
    background: url(/common/img/icon-arrow-tail-w-f5e163ed6df1bc3a5e08947822b53a1c.png) no-repeat center/contain;
    transform: rotate(180deg);
    transition: all 0.3s ease;
}

.next-btn:hover::after {
    width: 20px;
    opacity: 1;
    visibility: visible;
}

.more-btn {
    width: 100%;
    max-width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    border-radius: 50px;
    border: 1px solid #C7C7C7;
    font-size: 16px;
    font-weight: 500;
    color: #1E1E1E;
    margin: 0px auto 0;
}

.more-btn::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url(/common/img/icon-swiper-arrow-808cdba18c084150700940f7f18c0b5d.png) no-repeat center/contain;
    transform: rotate(90deg);
}

/* ===== PC Header ===== */
.pc-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
}

.util-bar {
    border-bottom: 1px solid #e0e0e0;
}

.util-bar-inner {
    display: flex;
    justify-content: flex-end;
    height: 50px;
    align-items: center;
}

.util-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.util-wrap a {
    font-size: 15px;
    font-weight: 500;
    color: #535353;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

.util-wrap a:hover {
    text-decoration: underline;
}

.util-wrap .divider {
    width: 1px;
    height: 10px;
    background: #cfcfcf;
}

.gnb-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    position: relative;
}

.gnb-wrap .logo {
    display: flex;
    width: 110px;
}

.gnb-wrap .logo img {
    width: 100%;
}

.gnb {
    display: flex;
    align-items: center;
    gap: 30px;
}

.gnb a {
    font-size: 19px;
    font-weight: 600;
    color: #1e1e1e;
    letter-spacing: -0.38px;
    padding: 0 20px;
    line-height: 64px;
    white-space: nowrap;
    position: relative;
}

.gnb a:hover {
    color: #00b2b0;
}

.gnb a::after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    border-top: 3px solid #00b2b0;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 100ms;
}

.gnb a:hover::after {
    opacity: 1;
}

.btn-sitemap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.btn-sitemap span {
    display: block;
    width: 24px;
    height: 2px;
    background: #1e1e1e;
    border-radius: 999px;
    transition: transform 0.25s, opacity 0.2s;
}

/* ===== Mobile Header ===== */
.mo-header {
    display: none;
}

.mo-top-banner {
    width: 100%;
    height: 85px;
    overflow: hidden;
}

.mo-top-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mo-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 50px;
    background: #fff;
}

.mo-header-inner .logo {
    display: flex;
    width: 105px;
}

.mo-header-inner .logo img {
    width: 100%;
}

.mo-menu-scroll {
    display: flex;
    overflow-x: auto;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mo-menu-scroll::-webkit-scrollbar {
    display: none;
}

.mo-menu-scroll a {
    flex-shrink: 0;
    padding: 16px;
    font-size: 16px;
    font-weight: 400;
    color: #444;
    letter-spacing: -0.32px;
    white-space: nowrap;
    border-bottom: 1px solid #e0e0e0;
}

.mo-menu-scroll a.active {
    font-weight: 600;
    color: #00b2b0;
    border-bottom: 2.5px solid #00b2b0;
}

/* ===== CTA Banner ===== */
.cta-banner {
    position: relative;
    height: 350px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: url("/common/img/cta-bg-1b8d17814f5755fdc02086513d3eef26.png") center 30% / cover no-repeat;
}

.cta-bg {
    position: absolute;
    inset: 0;
}

.cta-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 39%, rgba(0, 0, 0, 0.4) 55%), linear-gradient(90deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.34) 100%);
}

.cta-banner-inner {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding-right: 139px;
}

.cta-title {
    font-size: 38px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.76px;
    color: #fff;
}

.cta-title .bold {
    font-weight: 600;
}

.cta-phone {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cta-phone-icon {
    width: 45px;
    height: 45px;
}

.cta-number {
    font-size: 56px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -1.12px;
    line-height: 1.5;
}

/* ===== Footer ===== */
.footer {
    background: #fff;
}

.footer-inner {
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-info {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.footer-logo {
    height: 24px;
    width: 105px;
}

.footer-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-item .label {
    font-size: 16px;
    font-weight: 500;
    color: #707070;
    letter-spacing: -0.32px;
    white-space: nowrap;
}

.detail-item .value {
    font-size: 16px;
    font-weight: 500;
    color: #1e1e1e;
    letter-spacing: -0.32px;
    white-space: nowrap;
}

.detail-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.row-divider {
    width: 1.5px;
    height: 14px;
    background: #d7d7d7;
    flex-shrink: 0;
}

.footer-sns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.sns-item {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background-color: #eee;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

.sns-item.sns-facebook {
    background-image: url("/common/img/sns-circle-facebook-fa00c0accb93a61525c5b54a145c4d7a.png");
}

.sns-item.sns-kakao {
    background-image: url("/common/img/sns-circle-kakao-54375e6064dad2a998737cdec28238ae.png");
}

.sns-item.sns-instagram {
    background-image: url("/common/img/sns-circle-instagram-de36c0484ebb6b0db81a28d1927caabd.png");
}

.sns-item.sns-blog {
    background-image: url("/common/img/sns-circle-blog-d2892458fe56bdb5ef4e1990a82fdadb.png");
}

.sns-item:hover {
    background-color: #1E1E1E;
}

.sns-item:hover.sns-facebook {
    background-image: url("/common/img/sns-circle-facebook-active-1b5e822b71cd9b756a5aae41ec628834.png");
}

.sns-item:hover.sns-kakao {
    background-image: url("/common/img/sns-circle-kakao-active-1a53db0af069bed747aa70d409b3672f.png");
}

.sns-item:hover.sns-instagram {
    background-image: url("/common/img/sns-circle-instagram-active-de8cceb0120cd2585dff884c4a9d492a.png");
}

.sns-item:hover.sns-blog {
    background-image: url("/common/img/sns-circle-blog-active-d134cd59cef6b9cbd5f3f4bfba3c8a40.png");
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    font-size: 16px;
    font-weight: 500;
    color: #1e1e1e;
    letter-spacing: -0.32px;
}

.footer-links .link-privacy strong {
    font-weight: 700;
}

.footer-links a:hover {
    text-decoration: underline;
}

.copyright {
    font-size: 16px;
    font-weight: 400;
    color: #707070;
    letter-spacing: -0.32px;
}

/* ===== Floating Banner ===== */
.floating-banner {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    background: #fff;
    border-radius: 10px 0 0 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    width: 120px;
    padding: 20px 0 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.floating-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 120px;
    cursor: pointer;
}

.floating-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-icon img {
    max-width: 100%;
    max-height: 100%;
}

.floating-item span {
    font-size: 15px;
    font-weight: 400;
    color: #1e1e1e;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
}

.floating-phone span::after,
.floating-kakao span::after,
.floating-consult span::after {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    background: url("/common/img/float-icon-hover-6c33386d462411400a3922a6ee406160.png") center / cover no-repeat;
    opacity: 0;
    margin-left: 0px;
    transform: translateX(10px);
    transition: transform 500ms, opacity 1000ms, width 300ms, height 300ms, margin 300ms;
}

.floating-phone:hover span::after,
.floating-kakao:hover span::after,
.floating-consult:hover span::after {
    width: 10px;
    height: 10px;
    opacity: 1;
    transform: translateX(0px);
    margin-left: 3px;
}

.floating-phone .floating-number {
    font-size: 15px;
    font-weight: 600;
    color: #0075e2;
    letter-spacing: -0.3px;
}

.floating-top .floating-icon {
    background: url("/common/img/float-top-default-896c93b9ea9f2d050c0e5f7490bd63b1.png") center / cover no-repeat;
}

.floating-top span {
    transition: color 300ms;
}

.floating-top:hover span {
    color: #00B2B0;
}

.floating-top .floating-icon {
    transition: background 300ms;
}

.floating-top:hover .floating-icon {
    background-image: url("/common/img/float-top-hover-7420b73d6cd28a78bfea569c894a03bd.png");
}

.floating-divider {
    width: 80px;
    height: 1px;
    background: #d9d9d9;
}

/* ===== Mobile Tab Menu ===== */
.mo-tab-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    height: 70px;
    display: none;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.tab-icon {
    width: 24px;
    height: 24px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.tab-item.tab-home .tab-icon {
    background-image: url("/common/img/tab-home-928c6fb7aaf60d08d3d5a921476aade5.png");
}

.tab-item.tab-home.active .tab-icon {
    background-image: url("/common/img/tab-home-active-2754a89c9770039eb0cc57fe3f20ac8e.png");
}

.tab-item.tab-kakao .tab-icon {
    background-image: url("/common/img/tab-kakao-012651b28c640ce3befddec5f65b437d.png");
}

.tab-item.tab-kakao.active .tab-icon {
    background-image: url("/common/img/tab-kakao-active-a997c0b0f6a4e4e7e72dcea4c4e4c677.png");
}

.tab-item.tab-consult .tab-icon {
    background-image: url("/common/img/tab-consult-c51895292aa7acd9900f6a57e6e674b1.png");
}

.tab-item.tab-consult.active .tab-icon {
    background-image: url("/common/img/tab-consult-active-caebd76b400dffe340ca16407b0525d9.png");
}

.tab-item.tab-phone .tab-icon {
    background-image: url("/common/img/tab-phone-761a3a784021436291f77856390a1681.png");
}

.tab-item.tab-phone.active .tab-icon {
    background-image: url("/common/img/tab-phone-active-5e65891f52054649ef60097f22212727.png");
}

.tab-item span {
    font-size: 14px;
    font-weight: 500;
    color: #444;
    letter-spacing: -0.28px;
    text-align: center;
}

.tab-item.active span {
    color: #00b2b0;
    font-weight: 500;
}

/* ===== Sub Visual ===== */
.sub-visual {
    position: relative;
    height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.sub-visual-bg {
    position: absolute;
    inset: 0;
}

.sub-visual-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.sub-visual-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sub-visual .inner {
    width: 100%;
}

.sub-visual-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sub-visual-content h1 {
    font-size: 36px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.72px;
}

.sub-visual-content.color_b h1 {
    color: #1e1e1e;
}

.dot-accent {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #5ddfde;
    border-radius: 2px;
    margin-left: 8px;
    vertical-align: bottom;
    margin-bottom: 6px;
}

.sub-visual-content p {
    font-size: 22px;
    font-weight: 500;
    color: #eee;
    letter-spacing: -0.44px;
    line-height: 1.5;
}

.sub-visual-content.color_b p {
    color: #444;
}

/* ===== picked list ===== */
.picked-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
}

.picked-title-wrap h2 {
    font-size: 32px;
    font-weight: 600;
    color: #111;
    letter-spacing: -0.64px;
}

.picked-navigation {
    display: none;
    align-items: center;
    gap: 10px;
}

.picked-navigation.show {
    display: flex;
}

.picked-navigation .picked-swiper-btn {
    display: flex;
    width: 48px;
    aspect-ratio: 1/1;
}

.picked-navigation .picked-swiper-btn.picked-swiper-prev {
    rotate: 180deg;
}

.picked-navigation .picked-swiper-btn:disabled {
    opacity: 0.3;
}

/* ===== Filter Bar ===== */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
}

.filter-bar.align_end {
    align-items: flex-end;
}

.filter-left {
    display: flex;
    gap: 12px;
    align-items: center;
}

.search-box {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    height: 48px;
    overflow: hidden;
    flex-shrink: 0;
    padding-right: 15px;
}

.search-box input {
    padding: 0 16px;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: inherit;
    width: 240px;
    height: 100%;
    color: #333;
}

.search-box input::placeholder {
    color: #767676;
}

.btn-search {
    display: flex;
    width: 28px;
    aspect-ratio: 1/1;
}

/* list count */
.filter-bar .list-count {
    font-size: 18px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.36px;
    line-height: 1.5;
}

.filter-bar .list-count strong {
    font-weight: 600;
    color: #EC1B23;
}

/* Drop Menu */
.drop-menu {
    position: relative;
    width: 176px;
}

.drop-menu-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    padding: 0 15px 0 18px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
    color: #767676;
    letter-spacing: -0.32px;
    cursor: pointer;
}

.drop-arrow {
    display: block;
    width: 28px;
    height: 28px;
    background: url("/common/img/icon-arrow-down-gray-b75d509490e28479872efbcaab9522ee.png") center / cover no-repeat;
    transition: transform 0.2s;
}

.drop-menu.active .drop-menu-btn,
.drop-menu.filtered .drop-menu-btn {
    background: #f8ffff;
    border-color: #00b2b0;
    color: #00b2b0;
}

.drop-menu.filtered .drop-arrow {
    background-image: url("/common/img/icon-arrow-down-mint-0a360fe8fa6a8b7af141d5b69c0bbb49.png");
}

.drop-menu.active .drop-arrow {
    transform: rotate(180deg);
    background-image: url("/common/img/icon-arrow-down-mint-0a360fe8fa6a8b7af141d5b69c0bbb49.png");
}

.drop-menu-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 15px 0;
    z-index: 10;
    flex-direction: column;
    gap: 10px;
}

.drop-menu.active .drop-menu-list {
    display: flex;
}

.drop-item {
    padding: 0 18px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    letter-spacing: -0.32px;
    line-height: 1.5;
}

.drop-item.active {
    color: #00b2b0;
}

/* Multi-select checkbox dropdown */
.drop-check-list {
    padding: 10px 0 0 !important;
    gap: 0 !important;
}

.drop-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    letter-spacing: -0.3px;
    cursor: pointer;
}

.drop-check-item:hover {
    background: #f8f8f8;
}

.drop-check-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #00b2b0;
    cursor: pointer;
    flex-shrink: 0;
}

.drop-check-actions {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid #eee;
    margin-top: 6px;
}

.drop-check-reset,
.drop-check-apply {
    flex: 1;
    height: 34px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.drop-check-reset {
    background: #f0f0f0;
    color: #666;
}

.drop-check-reset:hover {
    background: #e5e5e5;
}

.drop-check-apply {
    background: #00b2b0;
    color: #fff;
}

.drop-check-apply:hover {
    background: #009e9c;
}


/* ===== Pagination ===== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 50px 0; */
    padding-top: 30px;
}

.page-arrow {
    display: flex;
    width: 40px;
    height: 40px;
}

.page-arrow.disabled {
    pointer-events: none;
    opacity: 0.3;
    cursor: not-allowed;
}

.page-arrow-right {
    transform: rotate(180deg);
}

.page-nums {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
}

.page-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 500;
    color: #636363;
}

.page-num.active {
    background: #1e1e1e;
    color: #fff;
    font-weight: 600;
}

/* ===== 게시글 상세 공통 =====*/
/* 대표이미지 스와이퍼 영역 */
.page-gallery-section {
    background: #f3f3f3;
    padding: 50px 0 60px;
}

.page-gallery-section .picked-title-wrap {
    margin-bottom: 16px;
}

.page-gallery-section .picked-title-wrap h2 {
    font-size: 28px;
}

.page-gallery-section .picked-title-wrap .picked-navigation {
    display: flex;
}

.page-gallery-section .picked-gallery {
    aspect-ratio: 1/0.6;
    border-radius: 15px;
    overflow: hidden;
    background: #f8f8f8;
}

.picked-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 상세 섹션 */
.page-detail-section {
    padding: 50px 0 100px;
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

/* 타이틀 + 정보 */
.page-detail-title {
    width: 100%;
    border-bottom: 1px solid #111;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-detail-title.in_sum {
    padding-bottom: 20px;
    gap: 25px;
}

.page-name {
    font-size: 28px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.56px;
    line-height: 1.5;
}

.page-detail-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 18px;
    color: #666;
}

.page-detail-meta strong {
    color: #111;
    font-weight: 500;
    margin-left: 8px;
}

.page-detail-meta .page-detail-divider {
    color: #888;
}

.page-detail-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666666;
    line-height: 1.5;
    letter-spacing: -0.36px;
}

.page-detail-meta .meta-item .meta-value {
    color: #444444;
    font-weight: 500;
}

.page-info-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 2px;
}

.page-info-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.page-info-label {
    width: 120px;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 500;
    color: #767676;
    letter-spacing: -0.36px;
    line-height: 1.5;
}

.page-info-value {
    font-size: 18px;
    font-weight: 400;
    color: #111;
    letter-spacing: -0.36px;
    line-height: 1.5;
}

.page-info-divider {
    height: 1px;
    background: #e0e0e0;
    width: 100%;
}

/* 컨텐츠 영역 */
.page-detail-section .page-detail-content {
    width: 100%;
}

/* 하단 영역 */
.page-bottom-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* 이전글/다음글 */
.page-nav-section {
    width: 100%;
    border-top: 1px solid #111;
}

.page-nav-row {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 30px 20px;
    color: #555;
}

.page-nav-row.page-nav-disabled {
    color: #888;
}

.page-nav-row.page-nav-next {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.page-nav-label {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.page-nav-label span {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.4px;
    line-height: 1.5;
}

.page-nav-label::after {
    content: "";
    display: block;
    width: 24px;
    aspect-ratio: 1/1;
    background: url("/common/img/icon-page-nav-cd86e499aff076d69c694f075e462d4b.png") center / cover no-repeat;
}

.page-nav-row.page-nav-prev .page-nav-label::after {
    rotate: 180deg;
}

.page-nav-disabled .page-nav-label::after {
    opacity: 0.8;
}

.page-nav-text {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.4px;
    line-height: 1.5;
    text-decoration: none;
    color: inherit;
}

a.page-nav-text:hover {
    text-decoration: underline;
}

.page-nav-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 버튼영역 */
.page-detail-btns {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    width: 100%;
}




/* ===== 테이블 리스트 - 구매후기,유용한정보,공지사항 공통사항 */
.table-board {
    border-top: 2px solid #000;
}

.table-thead {
    display: flex;
    align-items: center;
    height: 80px;
    border-bottom: 1px solid #b9b9b9;
}

.th-col {
    font-size: 18px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.36px;
    text-align: center;
    padding: 0 20px;
}

.table-row {
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.15s;
}

.table-row:hover {
    background: #f6f6f6;
}

.table-row-item {
    width: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.td-col {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.36px;
    padding: 0 20px;
    line-height: 1.5;
}

@media (max-width: 1023px) {

    /* PC header */
    .gnb-wrap {
        height: 50px;
    }

    .gnb {
        gap: 10px;
    }

    .gnb a {
        font-size: 16px;
        padding: 0 15px;
        height: 100%;
    }

    /* CTA Banner */
    .cta-banner {
        background-size: 250%;
    }

    /* Footer */
    .footer-inner {
        padding: 45px 0;
    }

    .footer-top {
        flex-direction: column;
        gap: 35px;
    }

    .footer-details {
        gap: 12px;
    }

    .detail-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .detail-group .row-divider {
        display: none;
    }

    .footer-sns {
        gap: 16px;
    }

    .sns-item {
        width: 44px;
        height: 44px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 12px 20px;
    }

    /* Tab menu spacing */
    .footer {
        padding-bottom: 70px;
    }

    /* picked list */
    .picked-swiper .swiper-slide {
        width: 225px;
    }

    .picked-navigation {
        display: flex;
        gap: 6px;
    }

    .picked-navigation .picked-swiper-btn {
        width: 40px;
    }

    /* Filter bar */
    .filter-bar {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        padding: 40px 0 20px;
    }

    .filter-right {
        width: 100%;
    }

    .filter-left {
        width: 100%;
        gap: 6px;
    }


    .search-box {
        width: 100%;
        height: 40px;
    }

    .search-box input {
        width: 100%;
        height: 100%;
        font-size: 12px;
    }

    .filter-bar .list-count {
        font-size: 16px;
    }

    .drop-menu {
        width: 100%;
        min-width: 0;
    }

    .drop-menu-btn {
        height: 40px;
        font-size: 12px;
        padding: 0 8px 0 10px;
    }

    .drop-item {
        font-size: 12px;
        padding: 0 10px;
    }

    .drop-check-item {
        padding: 6px 10px;
        font-size: 12px;
        gap: 6px;
    }

    .drop-check-item input[type="checkbox"] {
        width: 14px;
        height: 14px;
    }

    .drop-check-actions {
        padding: 8px 10px;
    }

    .drop-check-reset,
    .drop-check-apply {
        height: 30px;
        font-size: 12px;
    }

    .drop-arrow {
        width: 20px;
        height: 20px;
    }

}

/* ===== Mobile Responsive (Layout) ===== */
@media (max-width: 768px) {
    .pc-only {
        display: none !important;
    }

    .mo-only {
        display: flex;
    }

    .mo-tab-menu {
        display: flex;
    }

    .pc-header {
        display: none;
    }

    .mo-header {
        display: block;
        position: sticky;
        top: 0px;
        z-index: 9000;
        background: #fff;
        transition: all 0.3s ease;
    }

    .mo-header.top-head-out {
        top: -50px;
    }

    /* CTA Banner */
    .cta-banner {
        height: 180px;
    }

    .cta-overlay {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 44%), linear-gradient(90deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.34) 100%);
    }

    .cta-content {
        padding: 0;
        width: 100%;
        align-items: center;
        gap: 10px;
    }

    .cta-title {
        font-size: 22px;
        letter-spacing: -0.44px;
        text-align: center;
    }

    .cta-phone-icon {
        width: 36px;
        height: 36px;
    }

    .cta-number {
        font-size: 36px;
        letter-spacing: -0.72px;
    }

    /* sub Visual */
    .sub-visual {
        height: auto;
        aspect-ratio: 1/0.718;
    }

    .sub-visual-bg img {
        scale: 1.2;
        object-position: 70% 30%;
    }

    .sub-visual-content {
        gap: 4px;
    }

    .sub-visual-content h1 {
        font-size: 28px;
    }

    .sub-visual-content p {
        font-size: 16px;
    }

    /* picked list */
    .picked-title-wra {
        margin-bottom: 20px;
    }

    .picked-title-wrap h2 {
        font-size: 20px;
        font-weight: 500;
    }

    /* btn */
    .prev-btn {
        width: 100%;
        max-width: 200px;
        padding: 11px 0;
        font-size: 16px;
    }

    .prev-btn::before {
        height: 18px;
    }

    .prev-btn:hover::before {
        width: 18px;
    }

    .next-btn {
        width: 100%;
        max-width: 200px;
        padding: 12px 0;
        font-size: 16px;
    }

    .next-btn::after {
        height: 18px;
    }

    .next-btn:hover::after {
        width: 18px;
    }

    /* ===== 게시글 상세 공통 =====*/
    /* 대표이미지 스와이퍼 영역 */
    .page-gallery-section {
        padding: 20px 0 30px;
    }

    .page-gallery-section .picked-title-wrap {
        margin-bottom: 20px;
    }

    .page-gallery-section .picked-title-wrap h2 {
        font-size: 20px;
    }

    .page-gallery-section .picked-gallery {
        aspect-ratio: 1/0.609;
    }

    /* 상세 섹션 */
    .page-detail-section {
        padding: 50px 0;
        gap: 30px;
    }

    /* 타이틀 + 정보 */
    .page-detail-title {
        gap: 6px;
        padding-bottom: 20px;
    }

    .page-detail-title.in_sum {
        gap: 15px;
        padding-bottom: 15px;
    }

    .page-name {
        font-size: 20px;
    }

    .page-detail-meta {
        flex-wrap: wrap;
        gap: 14px;
        font-size: 14px;
        letter-spacing: -0.3px;
    }

    .page-detail-meta strong {
        margin-left: 6px;
    }

    .page-detail-meta .meta-item {
        gap: 6px;
    }

    .page-info-list {
        gap: 10px;
    }

    .page-info-label {
        width: 90px;
        font-size: 16px;
    }

    .page-info-value {
        font-size: 16px;
    }

    /* 하단 영역 */
    .page-bottom-area {
        gap: 30px;
    }

    /* 이전글/다음글 */
    .page-nav-row {
        padding: 15px 10px;
    }

    .page-nav-label span {
        font-size: 16px;
    }

    .page-nav-text {
        font-size: 16px;
    }

    .page-nav-title {
        white-space: initial;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

    .page-detail-btns {
        gap: 10px;
    }

    .page-detail-btns.column {
        gap: 20px;
        flex-direction: column;
    }

    /* 테이블리스트 */
    .table-thead {
        height: 50px;
    }

    .th-col {
        font-size: 16px;
    }

    .table-row-item {
        flex-wrap: wrap;
        min-height: 0;
        padding: 16px 0;
        gap: 6px 12px;
        justify-content: space-between;
    }

    .td-col {
        font-size: 16px;
        padding: 0;
    }

}

/* ===== Sitemap Panel ===== */
.sitemap-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 400px;
    max-width: 90vw;
    max-height: 80vh;
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    margin-top: 0;
    padding: 0 18px;
}

.sitemap-panel.open {
    display: block;
}

/* 햄버거 → X 토글 */
.btn-sitemap.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.btn-sitemap.active span:nth-child(2) {
    opacity: 0;
}

.btn-sitemap.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* 아이콘 메뉴 (6개) */
.sitemap-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px 0;
    padding: 10px 0 20px;
    border-bottom: 1px solid #DDDDDD;
}

.sitemap-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 5px;
    border-radius: 14px;
    text-decoration: none;
    color: #1E1E1E;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.15s;
}

.sitemap-icon-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.sitemap-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sitemap-icon img {
    object-fit: contain;
}

.sitemap-icon-item span {
    line-height: 1.5;
}

/* 섹션 */
.sitemap-section {
    padding: 25px 0 15px;
}

.sitemap-section:not(:last-child) {
    border-bottom: 1px solid #DDDDDD;
}

.sitemap-section-label {
    font-size: 14px;
    font-weight: 500;
    color: #6C6C6C;
    letter-spacing: 0.5px;
    line-height: 1.5;
    padding: 0 18px;
}

.sitemap-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    text-decoration: none;
    color: #1E1E1E;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    transition: background-color 0.1s;
    border-radius: 10px;
}

.sitemap-link:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.sitemap-link .icon-link {
    display: flex;
    width: 24px;
    aspect-ratio: 1/1;
}


/* 모바일 사이트맵: 풀스크린 */
.mo-sitemap {
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
    z-index: 9999;
    overflow-y: auto;
    background: #fff;
}

.mo-sitemap.open {
    display: block;
}

body.sitemap-open {
    overflow: hidden;
}

body.sitemap-open .mo-menu-scroll {
    display: none;
}

/* ===== 개인정보 처리방침 팝업 ===== */
.popup-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.popup-modal.is-open {
    display: block;
}

.popup-modal-dim {
    position: absolute;
    inset: 0;
    background: rgba(132, 132, 132, 0.6);
}

.popup-modal-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    max-width: calc(100% - 40px);
    height: 800px;
    max-height: calc(100% - 80px);
    background: #fff;
    border: 1px solid #363636;
    border-radius: 5px;
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    /* overflow: hidden; */
}

.popup-modal-close {
    position: absolute;
    top: 29px;
    right: 30px;
    width: 42px;
    height: 42px;
    background: #f0f0f0 url('/common/img/icon-close.png') no-repeat center / 20px 20px;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    z-index: 2;
}

.popup-modal-close::before,
.popup-modal-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: #222;
}

.popup-modal-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.popup-modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.popup-modal-header {
    flex-shrink: 0;
    border-bottom: 1px solid #ccc;
    text-align: center;
    padding: 30px 0 25px;
    margin: 0 60px;
}

.popup-modal-title {
    margin: 0;
    font-size: 30px;
    font-weight: 500;
    color: #000;
    letter-spacing: -0.6px;
    line-height: 1.5;
}

.popup-modal-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 0 0 5px 5px;
}

.popup-modal-content {
    flex: 1;
    min-height: 0;
    padding: 40px 60px;
    overflow-y: auto;
}

body.popup-modal-open {
    overflow: hidden;
}

@media (max-width: 1024px) {
    .popup-modal-box {
        width: calc(100% - 32px);
        height: calc(100% - 120px);
        max-height: none;
        border-radius: 8px;
    }

    .popup-modal-close {
        top: -52px;
        right: 0;
        /* background: transparent; */
    }

    /* .popup-modal-close::before,
    .popup-modal-close::after {
        background: #fff;
    } */

    .popup-modal-header {
        padding: 20px 0;
        margin: 0 20px;
    }

    .popup-modal-title {
        /* font-size: 24px; */
    }

    .popup-modal-body {
        border-radius: 0 0 8px 8px;
    }

    .popup-modal-content {
        padding: 24px 20px;
    }
}