/* --- 로딩 --- */
        :root {
      
            --accent: #d90d31;
			 --Brand_Color: #4A00E0; /* 실제 서비스 시 메인 CSS의 변수로 대체됩니다 */
        }
.Font_White{color:#fff !important;}
.Line_White{border-color:#fff !important}
.Font_White strong{color:#fff !important}


a.Font_White:hover {
  background-color: #fff;
  color: #1f274d !important;
  border-color: #fff;
  transform: translateY(-3px);
}

.Logo_Area{width:400px}
.Logo_Area img{max-width:100%;margin:0 auto}
        /* --- LOADING OVERLAY --- */
        .preloader {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #fff;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: #111;
        }
        .loading-bar {
            width: 300px;
            height: 2px;
            background: #eee;
            margin-top: 20px;
            position: relative;
            overflow: hidden;
        }
        .bar-fill {
            position: absolute;
            left: 0; top: 0;
            height: 100%;
            width: 0%;
            background: var(--accent);
        }



        @media (max-width: 900px) {
            .Logo_Area{width:300px}
			  .loading-bar {
            width: 250px;
            height: 2px;
            background: #eee;
            margin-top: 20px;
            position: relative;
            overflow: hidden;
        }


        }


        /* Gradient Classes for Preview */
        .grad-vertical {
            background: linear-gradient(to bottom, #4CAF50, #5C7FA8, #1B5E20);
        }
        .grad-diagonal {
            background: linear-gradient(135deg, #4CAF50, #5C7FA8, #1B5E20);
        }
        .grad-radial {
            background: radial-gradient(circle, #4CAF50, #5C7FA8, #1B5E20);
        }
 




   /* 퀵메뉴 글로벌 CSS 변수 */
 /* 글로벌 CSS 변수 */
        :root {
            --ux-bg-main: #f4f6f9;
            --ux-text-dark: #1a1a1a;
            --ux-text-gray: #666666;
            --ux-white: #ffffff;
        }

    

        /* ========================================================
           브랜드 컬러 캡슐형 퀵메뉴 래퍼
           ======================================================== */
        .ux-pill-vertical-wrapper {
            position: fixed !important;
            top: 50% !important;
            right: 24px !important;
            transform: translateY(-50%) !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-end !important; 
            gap: 12px !important; 
            z-index: 999999 !important; /* 항상 최상단 */
        }

        /* ★ 호버 떨림(Jitter) 완벽 방지용 부모 래퍼 */
        .ux-pill-row {
            position: relative !important;
            width: 48px !important;
            height: 48px !important;
            display: block !important;
            cursor: pointer !important;
        }

        /* 실제 디자인이 들어가는 늘어나는 아이템 (마스크 역할) */
        .ux-pill-item {
            position: absolute !important;
            top: 0 !important;
            right: 0 !important;
            width: 48px !important;
            height: 48px !important;
            min-width: 48px !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
            border-radius: 24px !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
            display: block !important;
            overflow: hidden !important; /* 넘치는 글씨를 숨김 */
            text-decoration: none !important;
            
            /* 애니메이션 설정: 너비만 부드럽게 늘어납니다 */
            transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, filter 0.3s ease !important;
            
            /* 렌더링 최적화 */
            box-sizing: border-box !important;
           /* transform: translateZ(0) !important;*/
            backface-visibility: hidden !important;
            -webkit-font-smoothing: antialiased !important;
            will-change: width !important;
        }

        /* 부모 래퍼에 마우스가 닿았을 때 마스크(배경)가 확장됨 */
        .ux-pill-row:hover .ux-pill-item {
            width: 160px !important; 
            box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
            filter: brightness(1.05) !important;
        }

        /* ★ 핵심 해결책: 내부 콘텐츠를 160px로 고정하고 Flex로 배치 (절대 움직이지 않음) */
        .ux-pill-content {
            position: absolute !important;
            top: 0 !important;
            right: 0 !important;
            width: 160px !important; /* 확장될 최대 너비와 동일하게 고정 */
            height: 100% !important;
            display: flex !important;
            flex-direction: row-reverse !important; /* 아이콘을 우측으로 */
            align-items: center !important;
            justify-content: flex-start !important;
            pointer-events: none !important; /* 마우스 간섭 방지 */
        }

        /* 아이콘 박스 (크기 고정) */
        .ux-pill-icon-box {
            width: 48px !important;
            height: 48px !important;
            flex-shrink: 0 !important; /* 찌그러짐 방지 */
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
        }

        .ux-pill-icon-box svg {
            display: block !important;
            max-width: 44px !important;
            max-height: 44px !important;
        }

        /* 메뉴 텍스트 (position: absolute 제거, 이동 없음) */
        .ux-pill-text {
            padding-right: 8px !important; /* 아이콘과의 여백 */
            font-size: 15px !important;
            font-weight: 600 !important;
            white-space: nowrap !important;
            opacity: 0 !important; /* 평소엔 투명 */
            
            /* transform 이동 애니메이션을 빼고 opacity만 조절하여 글씨 떨림 완벽 해결 */
            transition: opacity 0.3s ease !important;
          /*  transform: translateZ(0) !important; /* 폰트 안티앨리어싱 유지용 */
        }

        /* 호버 시 텍스트 나타남 */
        .ux-pill-row:hover .ux-pill-text {
            opacity: 1 !important;
            transition-delay: 0.1s !important; /* 배경이 조금 늘어난 뒤 등장 */
        }

        /* ========================================================
           각 브랜드별 고유 색상 설정
           ======================================================== */
        .ux-brand-kakao { background-color: #fbe300 !important; color: #3b1e1e !important; }
        .ux-brand-naver { background-color: #03C75A !important; color: #FFFFFF !important; }
        .ux-brand-insta { 
            background-image: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; 
            color: #FFFFFF !important; 
        }
        .ux-brand-youtube { background-color: #FF0000 !important; color: #FFFFFF !important; }
        .ux-brand-x, .ux-brand-threads { background-color: #000000 !important; color: #FFFFFF !important; }
        .ux-brand-fb { background-color: #1877F2 !important; color: #FFFFFF !important; }

        @media (max-width: 768px) {
            .ux-pill-vertical-wrapper {
                transform: scale(0.85) translateY(-50%) !important;
                right: 10px !important;
                transform-origin: right center !important;
            }

        }
/*슬라이드*/




 /* 우측 플로팅 배너 (퀵메뉴) */
        .sdc-quick-menu {
            position: fixed;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: 70px;
            background: linear-gradient(145deg, #0b4b9b, #052550);
            border-top-left-radius: 16px;
            border-bottom-left-radius: 16px;
            z-index: 999;
            display: flex;
            flex-direction: column;
            box-shadow: -8px 8px 25px rgba(0,0,0,0.2);
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.1);
            border-right: none;
        }
        .sdc-quick-item {
            padding: 22px 5px;
            text-align: center;
            color: #fff;
            font-size: 13px;
            font-weight: 500;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            letter-spacing: 0.5px;
            line-height: 1.4;
        }
        .sdc-quick-item:hover { 
            background: rgba(255,255,255,0.15); 
            padding-right: 12px;
        }
        .sdc-quick-item:last-child { border-bottom: none; }
        
        @media (max-width: 1024px) {
            .sdc-quick-menu { display: none; }
        }



/* =========================================================
   THE OCHANGHO MAIN
========================================================= */

.och-main {
    --och-bg-01: #dbd8c7;
    --och-bg-02: #dfdcd7;
    --och-dark: #403830;
    --och-ink: #2c2924;
    --och-muted: #706a62;
    --och-line: rgba(44, 41, 36, .18);
    --och-serif: "Cormorant Garamond", Georgia, serif;
    --och-sans: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --och-en: "Manrope", "Pretendard", sans-serif;
	--och-kor: "Gowun Batang", serif;
    --och-ease: cubic-bezier(.22, 1, .36, 1);
    --och-wrap: 1620px;
    --och-side: clamp(24px, 5.2vw, 82px);

    position: relative;
    width: 100%;
    overflow-x: hidden;

    color: var(--och-ink);
    background: var(--och-bg-01);

    font-family: var(--och-sans);

    word-break: keep-all;
    overflow-wrap: break-word;
}

.och-main,
.och-main * {
    box-sizing: border-box;
}

.och-main img,
.och-main video {
    display: block;
    max-width: 100%;
}

.och-main a {
    color: inherit;
    text-decoration: none;
}

.och-main button {
    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;
    color: inherit;

    font: inherit;

    cursor: pointer;
}

.och-main h1,
.och-main h2,
.och-main h3,
.och-main h4,
.och-main p {
    margin: 0;
    padding: 0;

    word-break: keep-all;
    overflow-wrap: break-word;
}

.och-main .section-wrap {
    width: min(var(--och-wrap), calc(100% - var(--och-side) * 2));
    margin: 0 auto;
}

.och-main .section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--och-muted);

    font-family: var(--och-en);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .18em;display:none;
}

.och-main .section-label::before {
    content: "";

    width: 34px;
    height: 1px;

    background: currentColor;

    opacity: .6;
}

.och-main .section-title {
    font-family: var(--och-serif);

	
    font-size: clamp(40px, 6.2vw, 70px);
    font-weight: 500;
    line-height: .89;
    letter-spacing: -.042em;
}

.och-main .section-copy {
    color: var(--och-muted);

    font-family: var(--och-sans);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: -.02em;display:none;
}
.Diplay_Block{display:block !important}
.och-main .chevron-icon {
    display: block;

    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

    flex: 0 0 auto;
}


/* =========================================================
   MOTION
========================================================= */

.och-main .motion-reveal {
    opacity: 0;
    transform: translateY(32px);

    transition:
        opacity .9s ease,
        transform .9s var(--och-ease);
}

.och-main .motion-reveal.is-visible {
    opacity: 1;
    transform: none;
}

.och-main .motion-stagger > * {
    opacity: 0;
    transform: translateY(22px);
}

.och-main .motion-stagger.is-visible > * {
    animation: ochItemReveal .75s var(--och-ease) forwards;
}

.och-main .motion-stagger.is-visible > *:nth-child(2) {
    animation-delay: .08s;
}

.och-main .motion-stagger.is-visible > *:nth-child(3) {
    animation-delay: .16s;
}

@keyframes ochItemReveal {
    to {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   HERO - V6
========================================================= */

.och-main .f-hero {
    position: relative;

    min-height: auto;

    margin: 0px;

    overflow: hidden;

    border-radius: 0px;

    background: #292622;
    color: #fff;
}

.och-main .f-hero-slide {
    position: absolute;
    inset: 0;

    opacity: 0;

    transform: scale(1.05);

    transition:
        opacity .95s ease,
        transform 6s ease;
}

.och-main .f-hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.och-main .f-hero-slide img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.och-main .f-hero::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(31, 27, 22, .04) 0%,
            rgba(31, 27, 22, .1) 42%,
            rgba(31, 27, 22, .54) 100%
        );

    pointer-events: none;
}

.och-main .f-hero-inner {
    position: relative;
    z-index: 2;

    min-height: 800px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 42px 48px 44px;
}

.och-main .f-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    color: rgba(255,255,255,.92);

    font-family: var(--och-en);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .18em;display:none !important;
}

.och-main .f-eyebrow::before {
    content: "";

    width: 36px;
    height: 1px;

    background: currentColor;

    opacity: .7;
}

.och-main .f-hero-copy {
    max-width: 1080px;
}

.och-main .f-hero-copy h1 {
    max-width: 1000px;

    font-family: var(--och-serif);
    font-size: clamp(50px, 8.6vw, 148px);
    font-weight: 500;
    line-height: .82;
    letter-spacing: -.048em;
}

.och-main .f-hero-copy h1 em {
    display: block;

    margin-left: 7vw;

    font-weight: 500;
    font-style: italic;
}

.och-main .f-hero-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 32px;

    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,.28);
}

.och-main .f-hero-meta p {
    max-width: 430px;

    color: rgba(255,255,255,.78);

    font-size: 14px;
    line-height: 1.85;
}

.och-main .f-hero-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.och-main .f-hero-index {
    min-width: 72px;

    text-align: center;

    color: rgba(255,255,255,.7);

    font-family: var(--och-en);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
}

.och-main .f-hero-button {
    position: relative;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.42);
    border-radius: 50%;

    color: #fff;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.och-main .f-hero-button:hover {
    background: rgba(255,255,255,.94);
    color: var(--och-ink);

    transform: scale(1.04);
}

.och-main .f-hero-progress {
    position: absolute;
    z-index: 3;

    left: 48px;
    right: 48px;
    bottom: 18px;

    height: 2px;

    overflow: hidden;

    background: rgba(255,255,255,.22);
}

.och-main .f-hero-progress span {
    display: block;

    width: 0;
    height: 100%;

    background: #fff;
}

.och-main .f-hero-copy.is-slide-motion {
    animation: ochHeroKick .55s var(--och-ease);
}

@keyframes ochHeroKick {
    from {
        opacity: .55;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   INTRO - V6 + VIDEO
========================================================= */

.och-main .d-intro {
    padding: 118px 0 132px;

    background: var(--och-bg-01);
}

.och-main .d-intro-grid {
    display: grid;
    grid-template-columns: minmax(380px,.82fr) minmax(0,1.18fr);
    gap: clamp(50px,6.5vw,104px);
    align-items: center;
}

.och-main .d-intro-copy {
    max-width: 640px;
}

.och-main .d-intro-copy .section-label {
    margin-bottom: 24px;
}

.och-main .d-intro-copy .section-copy {
    max-width: 470px;

    margin-top: 28px;
}

.och-main .d-intro-visual {
    min-width: 0;
}

.och-main .d-intro-image {
    position: relative;

    overflow: hidden;

    border-radius: 24px;

    background: #c4c0b6;

    transform: translateZ(0);
}

.och-main .d-intro-image img,
.och-main .d-intro-image video {
    display: block;

    width: 100%;
    height: auto;

    transition:
        transform 1.15s var(--och-ease),
        filter .5s ease;
}

.och-main .d-intro-visual:hover .d-intro-image img,
.och-main .d-intro-visual:hover .d-intro-image video {
    transform: scale(1.02);

    filter: saturate(1.03);
}

.och-main .d-intro-caption {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid var(--och-line);

    color: var(--och-muted);

    font-family: var(--och-en);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .14em;
}


/* =========================================================
   STAY - V6
========================================================= */

.och-main .d-stay {
    padding: 108px 0 126px;

    background: var(--och-bg-02);
}

.och-main .d-stay-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(320px,430px);
    gap: 70px;
    align-items: end;

    margin-bottom: 46px;
}

.och-main .d-stay-head .section-copy {
    justify-self: end;

    max-width: 430px;
}

.och-main .d-room-shell {
    display: grid;
    grid-template-columns: minmax(0,1.28fr) minmax(330px,.72fr);

    min-height: 600px;

    overflow: hidden;

    border-radius: 28px;

    background: var(--och-dark);
    color: #fff;
}

.och-main .d-room-media {
    position: relative;

    min-height: 600px;

    overflow: hidden;
}

.och-main .d-room-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        opacity .35s ease,
        transform .75s var(--och-ease);
}

.och-main .d-room-media.is-changing img {
    opacity: .25;

    transform: scale(1.035);
}

.och-main .d-room-chip {
    position: absolute;
    left: 22px;
    top: 22px;

    padding: 9px 12px;

    border-radius: 999px;

    background: rgba(223,220,215,.92);
    color: var(--och-ink);

    font-family: var(--och-en);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;

    backdrop-filter: blur(8px);
}

.och-main .d-room-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 32px 34px 34px;
}

.och-main .d-room-tabs {
    border-top: 1px solid rgba(255,255,255,.18);
}

.och-main .d-room-tab {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 72px;

    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 12px;

    padding-left: 20px;
    padding-right: 20px;

    overflow: hidden;

    border-bottom: 1px solid rgba(255,255,255,.18);

    color: rgba(255,255,255,.42);

    text-align: left;

    transition:
        color .25s ease,
        padding-left .3s ease;
}

.och-main .d-room-tab::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background: rgba(255,255,255,.055);

    transform: translateX(-102%);

    transition: transform .42s var(--och-ease);
}

.och-main .d-room-tab:hover::before,
.och-main .d-room-tab.is-active::before {
    transform: translateX(0);
}

.och-main .d-room-tab:hover,
.och-main .d-room-tab.is-active {
    color: #fff;
}

.och-main .d-room-tab:hover {
    padding-left: 26px;
}

.och-main .d-room-tab > span {
    font-family: var(--och-en);
    font-size: 10px;
}

.och-main .d-room-tab strong {
    font-family: var(--och-serif);
    font-size: clamp(30px,2.3vw,40px);
    font-weight: 500;
    line-height: 1;
}

.och-main .d-room-tab .chevron-icon {
    opacity: 0;

    transform: translateX(-6px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.och-main .d-room-tab.is-active .chevron-icon {
    opacity: 1;

    transform: none;
}

.och-main .d-room-detail {
    padding-top: 28px;

    transition:
        opacity .3s ease,
        transform .3s var(--och-ease);
}

.och-main .d-room-detail.is-switching {
    opacity: 0;

    transform: translateY(12px);
}

.och-main .d-room-detail small {
    display: block;

    margin-bottom: 11px;

    color: rgba(255,255,255,.48);

    font-family: var(--och-en);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .15em;
}

.och-main .d-room-detail h3 {
    font-family: var(--och-serif);
    font-size: clamp(44px,3.5vw,60px);
    font-weight: 500;
    line-height: .94;
}

.och-main .d-room-detail p {
    max-width: 420px;

    margin-top: 22px;

    color: rgba(255,255,255,.62);

    font-size: 16px;
    line-height: 1.85;
}

.och-main .d-room-link {
    display: inline-flex;
    align-items: center;
    gap: 20px;

    margin-top: 25px;
    padding-bottom: 8px;

    border-bottom: 1px solid rgba(255,255,255,.6);

    font-family: var(--och-en);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .14em;
}


/* =========================================================
   LOWER COMMON
========================================================= */

.och-main .och-lower-wrap {
    width: min(var(--och-wrap), calc(100% - var(--och-side) * 2));
    margin: 0 auto;
}

.och-main .och-lower-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--och-muted);

    font-family: var(--och-en);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .18em;display:none;
}

.och-main .och-lower-label::before {
    content: "";

    width: 34px;
    height: 1px;

    background: currentColor;

    opacity: .6;
}

.och-main .och-lower-copy {
    color: var(--och-muted);

    font-family: var(--och-sans);
    font-size: 19px;
    line-height: 1.9;
}

.och-main .och-lower-chevron {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   FOUR CHAPTERS - NEW
========================================================= */

.och-main .och-chapters {
    padding: 140px 0 150px;

    background: var(--och-bg-01);
}

.och-main .och-chapters-head {
    display: grid;/*
    grid-template-columns: 220px minmax(0,1fr);*/
    gap: 60px;
    align-items: start;

    margin-bottom: 70px;
}

.och-main .och-chapters-title {
    max-width: 900px;

     font-family: var(--och-serif);

	
    font-size: clamp(40px, 6.2vw, 70px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.045em;
}

.och-main .och-chapters-grid {
    display: grid;
    grid-template-columns: minmax(600px,.72fr) minmax(0,1.28fr);
    gap: clamp(55px,7vw,115px);
}

.och-main .och-chapters-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.och-main .och-chapter-menu {
    border-top: 1px solid rgba(44,41,36,.2);
}

.och-main .och-chapter-button {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 60px;

    display: grid;
    grid-template-columns: 38px 1fr 20px;
    align-items: center;
    gap: 16px;

    padding: 0 20px;

    overflow: hidden;

    border-bottom: 1px solid rgba(44,41,36,.2);

    color: rgba(44,41,36,.4);

    transition:
        color .35s ease,
        padding-left .4s var(--och-ease);
}

.och-main .och-chapter-button::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background: rgba(44,41,36,.065);

    transform: translateX(-102%);

    transition: transform .45s var(--och-ease);
}

.och-main .och-chapter-button:hover::before,
.och-main .och-chapter-button.is-active::before {
    transform: none;
}

.och-main .och-chapter-button:hover,
.och-main .och-chapter-button.is-active {
    color: var(--och-ink);

    padding-left: 28px;
}

.och-main .och-chapter-button > span {
    font-family: var(--och-en);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .13em;
}

.och-main .och-chapter-button strong {
    font-family: var(--och-serif);
    font-size: clamp(20px,2.7vw,30px);
    font-weight: 500;
    line-height: 1;
}

.och-main .och-chapter-button .och-lower-chevron {
    opacity: 0;

    transform: translateX(-7px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.och-main .och-chapter-button:hover .och-lower-chevron,
.och-main .och-chapter-button.is-active .och-lower-chevron {
    opacity: 1;

    transform: none;
}

.och-main .och-chapter-copy {
    max-width: 100%;

    margin-top: 62px;

    transition:
        opacity .3s ease,
        transform .35s var(--och-ease);
}

.och-main .och-chapter-copy.is-switching {
    opacity: 0;

    transform: translateY(14px);
}

.och-main .och-chapter-time {
    display: block;

    margin-bottom: 17px;

    color: #746d64;

    font-family: var(--och-en);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;display:none !important
}

.och-main .och-chapter-copy h3 {
    max-width: 100%;

    font-family: var(--och-serif);
    font-size: clamp(25px,4.6vw,40px);
    font-weight: 500;
    line-height: .89;
    letter-spacing: -.04em;
}

.och-main .och-chapter-copy p {
    max-width: 550px;

    margin-top: 25px;

    color: #716b63;

    font-size: 17px;
    line-height: 1.5;
}

.och-main .och-chapter-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-top: 30px;
    padding-bottom: 8px;

    border-bottom: 1px solid var(--och-ink);

    font-family: var(--och-en);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .14em;
}

.och-main .och-chapter-stage {
    position: relative;

    min-height: auto;

    overflow: hidden;

    background: #bdb8ac;
}

.och-main .och-chapter-image {
    position: absolute;
    inset: 0;
}

.och-main .och-chapter-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(22,20,17,.28) 100%
        );

    pointer-events: none;
}

.och-main .och-chapter-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.01);

    transition:
        opacity .4s ease,
        transform .8s var(--och-ease);
}

.och-main .och-chapter-stage.is-changing .och-chapter-image img {
    opacity: .32;

    transform: scale(1.055);
}

.och-main .och-chapter-caption {
    position: absolute;
    z-index: 2;

    left: 28px;
    right: 28px;
    bottom: 25px;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    color: rgba(255,255,255,.9);

    font-family: var(--och-en);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .14em;
}


/* =========================================================
   SOFT ENDING - NEW
========================================================= */

.och-main .och-soft {
    padding: 30px 0 150px;

    background: var(--och-bg-02);display:none !important;
}

.och-main .och-soft-layout {
    position: relative;

    padding-bottom: 120px;
}

.och-main .och-soft-media {
    width: 82%;
    margin-left: auto;

    overflow: hidden;
}

.och-main .och-soft-media img,
.och-main .och-soft-media video {
    width: 100%;
    height: auto;

    transition: transform 1s var(--och-ease);
}

.och-main .och-soft-layout:hover .och-soft-media img,
.och-main .och-soft-layout:hover .och-soft-media video {
    transform: scale(1.02);
}

.och-main .och-soft-copy {
    position: absolute;
    z-index: 2;

    left: 0;
    bottom: 0;

    width: min(680px,52%);

    padding: clamp(42px,5vw,72px);

    background: var(--och-bg-01);
}

.och-main .och-soft-copy .och-lower-label {
    margin-bottom: 28px;display:none
}

.och-main .och-soft-title {
    max-width: 620px;

    font-family: var(--och-serif);
    font-size: clamp(35px,5.8vw,80px);
    font-weight: 500;
    line-height: .87;
    letter-spacing: -.045em;
}

.och-main .och-soft-copy .och-lower-copy {
    max-width: 450px;

    margin-top: 30px;
}


/* =========================================================
   CTA - NEW
========================================================= */

.och-main .och-cta {
    padding: 60px 0 40px;

    background: var(--och-bg-01);
}

.och-main .och-cta-grid {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr);
    gap: clamp(65px,8vw,135px);
}

.och-main .och-cta-copy {
    min-height: auto;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.och-main .och-cta-meta {
    display: flex;
    justify-content: space-between;
    gap: 30px;

    padding-bottom: 22px;

    border-bottom: 1px solid rgba(44,41,36,.22);

    color: #6f6960;

    font-family: var(--och-kor);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;display:none !important;
}

.och-main .och-cta-title {
    max-width: 980px;

    margin-top: 68px;

    font-family: var(--och-serif);
    font-size: clamp(30px,7.6vw,60px);
    font-weight: 700;
    line-height: 1.41;
    letter-spacing: -.048em;
}

.och-main .och-cta-title em {
    display: block;

    margin-left: 0vw;

    font-weight: 700;
    font-style: normal;
}

.och-main .och-cta-bottom {
    display: grid;
    grid-template-columns: minmax(250px,420px) auto;
    gap: 55px;
    align-items: center;

    margin-top: 70px;
}

.och-main .och-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.och-main .och-cta-main {
    position: relative;
    isolation: isolate;

    min-width: 255px;
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    padding: 0 23px;

    overflow: hidden;

    border-radius: 999px;

    background: var(--och-ink);
    color: #fff;

    font-family: var(--och-en);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
}

.och-main .och-cta-main::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background: #514a42;

    transform: translateX(-102%);

    transition: transform .45s var(--och-ease);
}

.och-main .och-cta-main:hover::before {
    transform: none;
}

.och-main .och-cta-sub {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding-bottom: 8px;

    border-bottom: 1px solid var(--och-ink);

    font-family: var(--och-en);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .13em;display:none;
}

.och-main .och-cta-visual {
    position: relative;

    min-height: auto;

    overflow: hidden;
}

.och-main .och-cta-visual img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 1s var(--och-ease);
}

.och-main .och-cta-grid:hover .och-cta-visual img {
    transform: scale(1.03);
}

.och-main .och-cta-image-note {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 20px;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding-top: 14px;

    border-top: 1px solid rgba(255,255,255,.52);

    color: #fff;

    font-family: var(--och-en);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .13em;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 960px) {

    .och-main .section-wrap,
    .och-main .och-lower-wrap {
        width: calc(100% - 48px);
    }

    .och-main .section-title {
        font-size: clamp(50px,10vw,78px);
    }


    /* HERO */

    .och-main .f-hero {
        min-height: 680px;

        margin: 12px;

        border-radius: 24px;
    }

    .och-main .f-hero-inner {
        min-height: 680px;

        padding: 28px 22px 34px;
    }

    .och-main .f-hero-copy h1 {
        font-size: clamp(64px,14vw,100px);
    }

    .och-main .f-hero-copy h1 em {
        margin-left: 0;
    }

    .och-main .f-hero-meta {
        grid-template-columns: 1fr;
    }


    /* INTRO */

    .och-main .d-intro {
        padding: 50px 0 30px;
    }

    .och-main .d-intro-grid {
        grid-template-columns: 1fr;

        gap: 46px;
    }


    /* STAY */

    .och-main .d-stay {
        padding: 88px 0 100px;
    }

    .och-main .d-stay-head {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .och-main .d-stay-head .section-copy {
        justify-self: start;
    }

    .och-main .d-room-shell {
        grid-template-columns: 1fr;
    }

    .och-main .d-room-media {
        min-height: 460px;
    }


    /* CHAPTER */

    .och-main .och-chapters {
        padding: 100px 0 110px;
    }

    .och-main .och-chapters-head {
        grid-template-columns: 1fr;

        gap: 24px;
    }

    .och-main .och-chapters-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .och-main .och-chapter-stage {
        min-height: 620px;
    }


    /* SOFT */

    .och-main .och-soft {
        padding-bottom: 110px;
    }

    .och-main .och-soft-layout {
        padding-bottom: 0;
    }

    .och-main .och-soft-media {
        width: 100%;
    }

    .och-main .och-soft-copy {
        position: relative;

        width: 88%;

        margin-top: -70px;
    }


    /* CTA */

    .och-main .och-cta {
        padding: 100px 0 90px;
    }

    .och-main .och-cta-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .och-main .och-cta-copy {
        min-height: auto;
    }

    .och-main .och-cta-visual {
        min-height: auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .och-main .section-wrap,
    .och-main .och-lower-wrap {
        width: calc(100% - 36px);
    }

    .och-main .section-title {
        font-size: clamp(35px,13vw,50px);
    }

    .och-main .section-copy,
    .och-main .och-lower-copy {
        font-size: 14px;
    }


    /* HERO */

    .och-main .f-hero {
        min-height: 50vh;

        margin: 8px;

        border-radius: 20px;display:flex;
		justify-content: flex-end;
    }

    .och-main .f-hero-inner {
	width:100%;
		min-height: auto;
    padding: 24px 18px 32px;
    position: relative;
    bottom: 0;
   
    }

    .och-main .f-hero-copy h1 {
        font-size: clamp(40px,16vw,80px);
    }

.och-main .f-eyebrow{display:none;}
.och-main .f-hero-progress{display:none}
    /* INTRO */

    .och-main .d-intro-caption {
        flex-direction: column;
        gap: 8px;
    }


    /* ROOM */

    .och-main .d-room-media {
        min-height: 400px;
    }

    .och-main .d-room-panel {
        padding: 26px 22px 30px;
    }

    .och-main .d-room-tab strong {
        font-size: 25px;
    }

.och-main .d-room-detail p{font-size:11px}
    /* CHAPTER */

    .och-main .och-chapters {
        padding: 85px 0 95px;
    }

    .och-main .och-chapters-title {
        font-size: clamp(35px,14vw,50px);
    }

    .och-main .och-chapter-button {
        min-height: 75px;
    }

    .och-main .och-chapter-button strong {
        font-size: 20px;
    }

    .och-main .och-chapter-copy {
        margin-top: 38px;
    }

    .och-main .och-chapter-copy h3 {
        font-size: clamp(22px,13vw,45px);
    }

    .och-main .och-chapter-stage {
        min-height: 500px;
    }


    /* SOFT */

    .och-main .och-soft {
        padding-bottom: 90px;
    }

    .och-main .och-soft-copy {
        width: calc(100% - 18px);

        margin-top: -38px;
        padding: 34px 24px;
    }

    .och-main .och-soft-title {
        font-size: clamp(22px,13vw,45px);
    }


    /* CTA */

    .och-main .och-cta {
        padding: 85px 0 70px;
    }

    .och-main .och-cta-meta {
        flex-direction: column;
        gap: 9px;
    }

    .och-main .och-cta-title {
        font-size: clamp(30px,17vw,65px);
    }

    .och-main .och-cta-title em {
        margin-left: 0;
    }

    .och-main .och-cta-bottom {
        grid-template-columns: 1fr;

        gap: 36px;

        margin-top: 48px;
    }

    .och-main .och-cta-actions {
        width: 100%;
    }

    .och-main .och-cta-main {
        width: 100%;
    }

    .och-main .och-cta-visual {
        min-height: auto;
    }
.och-main .f-hero-meta p{display:none}
}
.d-intro-caption{display:none !important}
.och-cta-image-note{display:none !important}
.och-chapter-caption{display:none !important}
/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .och-main *,
    .och-main *::before,
    .och-main *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .och-main .motion-reveal,
    .och-main .motion-stagger > * {
        opacity: 1;
        transform: none;
    }

}

     /* === 기본 리셋 === */
 
        /* =========================================
           2. Footer Layout CSS Variables for Theming
           ========================================= */
        :root {
            /* Default (White Theme) Values */
            --uni-bg-color: #ffffff;
            --uni-text-main: #111827;
            --uni-text-sub: #6b7280;
            --uni-border-color: #e5e7eb;
			--uni-border-color2: #bdb8a8;
            --uni-icon-bg: #f9fafb;
            --uni-icon-color: #6b7280;
            --uni-brand-bg: #000;
            --uni-brand-text: #fff;
        }



        /* Theme Overrides using Classes instead of Data Attributes */
        .uni-theme-dark {
            --uni-bg-color: #111111;
            --uni-text-main: #ffffff;
            --uni-text-sub: #fff;
            /* 다크 모드에서도 보더가 보이도록 어두운 회색 설정 */
            --uni-border-color: #333333; 
			--uni-border-color2: #bdb8a8;
            --uni-icon-bg: #1f2937;
            --uni-icon-color: #9ca3af;
            --uni-brand-bg: #fff;
            --uni-brand-text: #000;
        }

        .uni-theme-gray {
            --uni-bg-color: #f3f4f6;
            --uni-text-main: #1f2937;
            --uni-text-sub: #4b5563;
            --uni-border-color: #e5e7eb;
			--uni-border-color2: #bdb8a8;
            --uni-icon-bg: #ffffff;
            --uni-icon-color: #6b7280;
            --uni-brand-bg: #374151;
            --uni-brand-text: #fff;
        }


        /* =========================================
           3. Footer Layout Styles
           ========================================= */
        .uni-footer-wrapper {
            width: 100%;/*
            background-color: var(--uni-bg-color);*/
			background-color: #dbd8c7;
            border-top: 1px solid var(--uni-border-color2);
            color: var(--uni-text-main);
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
            position: relative;
            z-index: 1;
            box-shadow: none !important;
            background-image: none !important;
        }

        .uni-footer-inner {
            max-width: 100%;
            margin: 0 auto;
            padding: 20px 15px;
        }

        /* Top Section */
        .uni-footer-top {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 20px;display:block
        }

        .uni-brand-area {
            display: flex;
            align-items: center;
            margin-bottom: 0px;
        }

        /* Logo Icon (SVG) - Replaces Lucide */
        .uni-brand-icon-svg {
            width: 32px;
            height: 32px;
            background-color: var(--uni-brand-bg);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--uni-brand-text);
            margin-right: 10px;
        }
        .uni-brand-icon-svg svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .uni-brand-img {
            height: 32px;
            width: auto;
            display: block;
            transition: filter 0.3s ease;display:none; 
        }
        /* Dark mode logo inversion - Updated selector for class */
        .uni-theme-dark .uni-brand-img {
            filter: invert(1) brightness(200%);
        }

        /* Social Icons */
        .uni-social-list { display: flex; gap: 16px;; }

        .uni-social-link {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: var(--uni-icon-bg);
            color: var(--uni-icon-color);
            text-decoration: none;
            transition: all 0.2s ease;
        }

        /* Hover Effects */
        .uni-social-link:hover { color: white; }
        .uni-social-link.is-naver:hover { background-color: #03C75A; }
        .uni-social-link.is-blog:hover { background-color: #42d31a; }
        .uni-social-link.is-insta:hover { background-color: #db2777; }
        .uni-social-link.is-youtube:hover { background-color: #ea4335; }
        .uni-social-link.is-facebook:hover { background-color: #2563eb; }
        .uni-social-link.is-kakao:hover { background-color: #FEE500; color: #000; }

        /* SVG Styles - Updated for Solid Icons */
        .uni-svg-icon {
            width: 18px; /* Slightly larger for better visibility */
            height: 18px; 
            transition: all 0.2s ease;
            fill: currentColor; /* Uses text color by default */
        }
        .uni-social-link:hover .uni-svg-icon {
            fill: #fff;
        }
        /* Kakao icon needs black icon on hover usually */
        .uni-social-link.is-kakao:hover .uni-svg-icon {
            fill: #000;
        }

        /* Divider */
        .uni-divider {
            border-top: 1px solid var(--uni-border-color);
            margin: 20px 0;display:none;
        }

        /* Policy Nav */
        .uni-policy-nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px 32px;
            margin-bottom: 24px;
        }
        .uni-policy-link {
            font-size: 14px;
            color: var(--uni-text-main);
            text-decoration: none;
            font-weight: 700;
            transition: color 0.2s;
        }
        .uni-policy-link:hover { color: var(--uni-text-main); }
        .uni-policy-link.is-bold { font-weight: 700; color: var(--uni-text-main); }

        /* Info Area - Improved Mobile Gap */
        .uni-info-area {
            text-align: center;
            font-size: 13px;
            color: var(--uni-text-sub);
            line-height: 1.6;font-weight: 600;
            
            /* 핵심 수정: 컨테이너 자체를 flex-col로 만들고 gap을 주어 줄 사이 간격을 통일 */
            display: flex;
            flex-direction: column;
            gap: 6px; 
        }
        .uni-info-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            /* 행 내부 아이템 간격 */
            gap: 6px 4px; 
        }
        .uni-info-item { 
            margin-right: 8px; 
        }
        .uni-info-row > :last-child { margin-right: 0; }

        .uni-info-sep { 
            display: none;
            margin-right: 8px;
            color: var(--uni-border-color);
            opacity: 0.5;
        }
        /* Updated selector for class */
        .uni-theme-dark .uni-info-sep { color: #555; }

        .uni-info-area a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

        /* Bottom Area */
        .uni-footer-bottom {
            margin-top: 32px;
            padding-top: 32px;
            border-top: 1px solid var(--uni-border-color2);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .uni-copyright {
            font-size: 13px;
            color: var(--uni-text-sub);
            opacity: 0.95;
            font-weight: 500;
        }

        /* Family Site */
        .uni-family-container { position: relative;display:none }
        .uni-family-btn {
            display: flex; align-items: center; gap: 4px;
            font-size: 12px;
            color: var(--uni-text-sub);
            background-color: transparent;
            border: 1px solid var(--uni-border-color);
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .uni-family-btn:hover { color: var(--uni-text-main); border-color: var(--uni-text-sub); }
        
        .uni-family-menu {
            position: absolute; bottom: 100%; right: 0;
            margin-bottom: 8px; width: 160px;
            background-color: var(--uni-bg-color);
            border: 1px solid var(--uni-border-color);
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
            overflow: hidden; z-index: 10;
        }
        
        .uni-family-link {
            display: block; padding: 8px 16px;
            font-size: 12px; color: var(--uni-text-sub); text-decoration: none;
        }
        .uni-family-link:hover { 
            background-color: var(--uni-border-color); 
            color: var(--uni-text-main); 
        }

        .uni-hidden { display: none !important; }

        /* Desktop */
        @media (min-width: 768px) {
            .uni-footer-inner { padding: 40px 70px; }
            .uni-footer-top { flex-direction: row; margin-bottom: 40px; }
            .uni-brand-area { margin-bottom: 0; }
            .uni-policy-nav { justify-content: flex-start; }
            .uni-info-area { text-align: left; gap: 4px; } /* 데스크탑에서는 간격 조금 줄임 */
            .uni-info-row { justify-content: flex-start; gap: 0; }
            .uni-info-sep { display: inline; }
            .uni-footer-bottom { flex-direction: row; }





        }



		/*서브페이지*/

.Sub_Left{width:100%;margin:20px 0}
.Sub_Left>dl{
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  position: relative;
  top: 0;
  z-index: 1;
  gap: 0px;}
.Sub_Left>dl>dt{width:300px;}
.Sub_Left>dl>dd{width:calc(100% - 330px);}

     @media (max-width: 1180px) {

	.Sub_Left>dl>dt{width:0px;display:none}
.Sub_Left>dl>dd{width:calc(100% - 0px);}



     }



     @media (max-width: 900px) {


.Last_Center{width:100%;padding:5% 3%;}



     }
	      @media (max-width: 320px) {
 .lux-content {
    padding: 2rem 2rem 14rem 2rem;
  }
				  .lux-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.25;
  }

    .lux-desc {
    font-size: 0.85rem;
  }

 .hero-text-content h1 {
    font-size: 1.5rem;
  }

  .status-badge {
  display: inline-block;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  backdrop-filter: blur(4px);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 600;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

 .hero-text-content p {
    font-size: 0.85rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 48px;
    word-break: keep-all;
    font-weight: 600;
  }
 .cs-hero-section {
    position: relative;
    width: 100%;
   min-height: 400px;
    display: flex;
    align-items: center;
    overflow: hidden;
  }


		      }



			     @media (max-width: 350px) {
				 
			html {
    /* 개별 요소가 아닌 html의 기준 사이즈만 80%로 줄입니다. 
       이렇게 하면 rem을 사용한 모든 하위 요소의 폰트가 일괄적으로 예쁘게 80% 비율로 줄어듭니다. */
    font-size: 70%; /* 16px의 80% = 12.8px */
    
    /* 만약 80%가 여전히 작게 느껴진다면 명시적으로 px을 주셔도 됩니다. */
    /* font-size: 13px; */
  }
				 
				 
				 }






				 /*갤탭*/
/* -----------------------------------
   세로 모드 (Portrait)
   가로 너비가 924px 이하일 때 적용
----------------------------------- */
				 @media screen and (max-width: 924px) {
 
}

/* -----------------------------------
   가로 모드 (Landscape)
   가로 너비가 925px 이상 1480px 이하일 때 적용
----------------------------------- */
@media screen and (min-width: 925px) and (max-width: 1480px) {
  
}

/*개인정보 코딩*/
  /* Container styling */
        .privacy-container {
            max-width: 1300px;
            margin: 0 auto;
            background-color: #ffffff;
            padding: 50px 60px;
            border-radius: 12px;
    
        }

        /* Typography */
        .privacy-container   .main-title {
            text-align: center;
            font-size: 28px;
            font-weight: 700;
            color: #111111;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 2px solid #2c3e50;
        }

        .privacy-container   .intro-text {
            font-size: 15px;
            font-weight: 500;
            color: #444;
            margin-bottom: 40px;
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid #3498db;
        }

        /* Section & Sub-titles */
        .section-title {
            font-size: 20px;
            font-weight: 700;
            color: #2c3e50;
            margin-top: 50px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0e0e0;
        }

        .sub-title {
            font-size: 16px;
            font-weight: 700;
            color: #34495e;
            margin-top: 25px;
            margin-bottom: 10px;
        }

        /* Paragraph Specific Class */
        .privacy-text {
            font-size: 15px;
            color: #555555;
            margin-bottom: 15px;
            word-break: keep-all;
        }

        .privacy-text .note {
            font-size: 14px;
            color: #7f8c8d;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        /* Lists */
        .text-list {
            list-style-type: none;
            padding-left: 0;
            margin-bottom: 20px;
        }

        .text-list li {
            font-size: 15px;
            color: #555555;
            margin-bottom: 8px;
            padding-left: 15px;
            text-indent: -15px;
            line-height: 1.6;
        }

        .text-list li .sub-list {
            list-style-type: none;
            padding-left: 15px;
            margin-top: 5px;
            margin-bottom: 5px;
        }
        
        .text-list li .sub-list  li {
            text-indent: -18px;
            padding-left: 18px;
            font-size: 14px;
            color: #666666;
            margin-bottom: 5px;
        }

        /* Table Styling with strict class and child combinators */
        .table-responsive {
            width: 100%;
            overflow-x: auto;
            margin-top: 20px;
            margin-bottom: 30px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            -webkit-overflow-scrolling: touch;
        }

        .table-responsive .privacy-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 100%;
            background-color: #ffffff;
        }

        /* th, td styled strictly with parent combinators */
        .table-responsive .privacy-table thead tr th,
        .table-responsive .privacy-table tbody tr td {
            border-bottom: 1px solid #e0e0e0;
            border-right: 1px solid #e0e0e0;
            padding: 15px;
            font-size: 14px;
            vertical-align: middle;
            line-height: 1.5;
        }

        .table-responsive .privacy-table thead tr th:last-child,
        .table-responsive .privacy-table tbody tr td:last-child {
            border-right: none;
        }

        .table-responsive .privacy-table thead tr th {
            background-color: #f8fafc;
            color: #333333;
            font-weight: 700;
            text-align: center;
        }

        .table-responsive .privacy-table tbody tr:last-child td {
            border-bottom: none;
        }

        .table-responsive .privacy-table tbody tr td {
            color: #555555;
            word-break: keep-all;
        }
        
        /* Links styled strictly inside privacy container */
        .text-list li a,
        .privacy-text a {
            color: #3498db;
            text-decoration: none;
            transition: color 0.2s ease;
        }
        
        .text-list li a:hover,
        .privacy-text a:hover {
            text-decoration: underline;
            color: #2980b9;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .privacy-container {
                padding: 30px 20px;
            }
             .main-title {
                font-size: 24px;
            }
             .section-title {
                font-size: 18px;
            }
            .privacy-text, 
             .text-list li {
                font-size: 14px;
            }
        }