/* ===== 웹폰트 ===== */
@font-face {
    font-family: 'Engravers Gothic';
    src: url('/fonts/Engravers%27%20Gothic%20Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Bodoni MT';
    src: url('/fonts/Bodoni%20MT%20Regular.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Baskerville';
    src: url('/fonts/baskervi.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: SackersGothicStd;
    font-display: swap;
    font-weight: 400;
    src: url('/fonts/Sackers%20Gothic%20Heavy.ttf') format('truetype');
}

.insight-heading {
    font-family: 'Bodoni MT', 'Bodoni 72', 'Didot', 'Playfair Display', serif;
    font-size: 70px;
    font-weight: 900;
    color: #000;
    letter-spacing: -0.04em;
    text-shadow: 0.3px 0 0 #000, -0.3px 0 0 #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== 다크모드 토글 아이콘 ===== */
.navUser-action--darkmode { cursor: pointer; background: none; border: none; padding: 4px; }
html:not(.dark-mode) .icon-moon { display: none; }
html.dark-mode .icon-sun { display: none; }

/* ===== 공통 ===== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

html {
    scroll-behavior: smooth;
    transition: background-color 0.3s, color 0.3s;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.01em;
    color: #1a1a1a;
    min-height: 100vh;
    background: #fff;
    overflow-x: auto;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ===== 로고 ===== */
.logo {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #222;
}

.logo-sm {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #666;
}

/* ===== 헤더 ===== */
.header {
    background: #fff;
    border-bottom: 2px solid #000;
    position: relative;
    z-index: 100;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    box-sizing: border-box;
}

.header-bar {
    padding: 8px 0;
    margin-bottom: 8px;
}

.navUser-icons {
    display: flex;
    justify-content: flex-end;
    padding: 9px 31px 0 16px;
    width: 100%;
    height: 28px;
    align-items: center;
}

.navUser {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    flex-shrink: 0;
    border: none;
    width: 100% !important;
    max-width: 2525px !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.navUser-section {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.navUser-item {
    list-style: none;
}

.navUser-action {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    color: #222;
    text-decoration: none;
    font-size: 0.8rem;
}

.logo-container {
    flex: 1;
    text-align: center;
}

.header-logo {
    margin: 0;
}

.header-logo__link {
    display: inline-block;
    text-decoration: none;
}

.header-logo-image-container {
    width: 180px;
    margin: 0 auto;
}

.header-logo-image-container svg {
    width: 100%;
    height: auto;
}

.search-header-logo {
    width: 140px;
    margin: 0 auto 12px;
}

.search-header-logo svg {
    width: 100%;
    height: auto;
}

.dropdown--quickSearch {
    display: none;
}

.quickSearch-form-container {
    display: none;
}

.quickSearch-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quickSearch-field input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.85rem;
}

.quickSearch-field button {
    background: none;
    border: none;
    cursor: pointer;
}

.quickSearch-form-close-button {
    display: none;
}

.currency-flag-img {
    border-radius: 2px;
}

.currency-code {
    font-size: 0.75rem;
    color: #555;
}

.countPill {
    font-size: 0.6rem;
    background: #222;
    color: #fff;
    border-radius: 50%;
    padding: 1px 5px;
    margin-left: 2px;
}

/* 네비게이션 */
.navPages {
    position: relative;
    border-top: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 0;
    height: auto;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100% !important;
    max-width: 2525px !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow: visible !important;
}

@media (min-width: 768px) {
    .navPages {
        display: flex;
    }
}

.navPages-list {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
}


.navPages-list.menu-hk {
    gap: 0;
}

.navPages-item {
    list-style: none;
}

.navPages-action {
    display: inline-block;
    padding: 0 20px 7px 20px;
    font-family: "Futura", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: normal;
    text-transform: uppercase;
    color: rgba(0,0,0,0.95);
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 0.2px #fff;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    background: none;
}

.navPages-action:hover {
    color: #666;
}

.navPages-action--bold {
    font-weight: 800;
}

/* navUser 구분선 */
.navUser-divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: #bbb;
    vertical-align: middle;
}

/* 메뉴 구분선 */
.navPages-item--divider {
    width: 1px;
    height: 14px;
    background: #dedede;
    margin: 0 4px;
    align-self: center;
}

/* 드롭다운 메뉴 — 풀 와이드 메가 드롭다운 */
.navPages-item--has-dropdown {
    position: static;
}

.navPages-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    margin: 0;
    padding: 16px 0;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    border-bottom: 2px solid #000;
    z-index: 9999;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

.navPages-item--has-dropdown:hover .navPages-dropdown {
    display: block;
}

.navPages-dropdown-inner {
    list-style: none;
    margin: 0;
    padding: 0;
    width: fit-content;
}


.navPages-dropdown-action {
    display: block;
    padding: 5px 20px;
    font-family: "Futura", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.95);
    text-decoration: none;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    transition: color 0.2s ease;
}

.navPages-dropdown-action:hover {
    color: #000;
}

/* 다국어: 기본 영어 표시, 한국어 숨김 */
.nav-ko {
    display: none;
}

.nav-en {
    display: inline;
}

/* html lang="ko" 일 때 한국어 표시, 영어 숨김 */
html[lang="ko"] .nav-ko {
    display: inline;
}

html[lang="ko"] .nav-en {
    display: none;
}

.search-underline {
    display: inline-block;
    width: 100px;
    height: 1px;
    background: #000;
    vertical-align: middle;
    margin-left: 4px;
}

.navUser-action--lang {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #333;
    text-decoration: none;
}

.navPages-list--user {
    display: none;
}

.navPages-container-wrapper .slider-close-button-container {
    display: none;
}

.navPages-container {
    flex-shrink: 0;
    overflow: visible !important;
    position: relative;
    z-index: 100;
}

.navPage-subMenu,
.currency-selector {
    display: none !important;
}

.nav-search__related-container {
    display: none;
}

.search-background-dim {
    display: none !important;
}

/* ===== 통계 카드 ===== */
.stat-card {
    background: #f8f8f8;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    padding: 8px 10px !important;
}

.stat-card-link {
    cursor: pointer;
    transition: background 0.15s ease;
}

.stat-card-link:hover {
    background: #f0f0f0;
}

.stat-number {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    transition: transform 0.15s ease, color 0.15s ease;
}

.stat-label {
    font-size: 0.7rem;
    color: #999;
    margin-top: 1px;
}

/* ===== 숫자 bump 애니메이션 ===== */
@keyframes statBump {
    0%   { transform: scale(1);   color: #333; }
    40%  { transform: scale(1.12); color: #111; }
    100% { transform: scale(1);   color: #333; }
}

.stat-bump {
    animation: statBump 0.25s ease both;
}

/* ===== 질문 ===== */
.question-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: #444;
    margin-bottom: 8px;
}

/* ===== 버튼 영역 래퍼 ===== */
.action-group {
    margin-top: 12px;
    margin-bottom: 12px;
    text-align: center;
    animation: fadeInUp 0.2s ease both;
}

/* 버튼 간격 축소 */
.action-grid {
    --bs-gutter-x: 0.4rem;
    --bs-gutter-y: 0.4rem;
}

/* ===== 액션 버튼 ===== */
.btn-action {
    padding: 26px 12px;
    border-radius: 14px;
    border: 2px solid transparent;
    font-weight: 700;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 94px;
    user-select: none;
}

.btn-action:hover {
    filter: brightness(0.95);
    transform: scale(1.02);
}

.btn-action:active {
    transform: scale(0.97);
    filter: brightness(0.9);
    transition: all 0.12s ease;
}

.btn-action:disabled {
    opacity: 0.35;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

.action-emoji {
    font-size: 2.2rem;
    line-height: 1;
}

.action-label {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* ===== 클릭 보상 flash ===== */
@keyframes clickFlash {
    0%   { filter: brightness(1); }
    35%  { filter: brightness(1.15); }
    100% { filter: brightness(1); }
}

.btn-action-flash {
    animation: clickFlash 0.2s ease both;
}

/* ===== 유형별 색상 ===== */
.btn-done {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border-color: rgba(34, 197, 94, 0.4);
}
.btn-done:hover, .btn-done:focus {
    background: rgba(34, 197, 94, 0.18);
    color: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.15);
}
.btn-done:active {
    background: rgba(34, 197, 94, 0.25);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
}

.btn-skip {
    background: rgba(156, 163, 175, 0.1);
    color: #6b7280;
    border-color: rgba(156, 163, 175, 0.4);
}
.btn-skip:hover, .btn-skip:focus {
    background: rgba(156, 163, 175, 0.18);
    color: #6b7280;
    border-color: #6b7280;
    box-shadow: 0 4px 20px rgba(156, 163, 175, 0.12);
}
.btn-skip:active {
    background: rgba(156, 163, 175, 0.25);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
}

.btn-giveup {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.4);
}
.btn-giveup:hover, .btn-giveup:focus {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.15);
}
.btn-giveup:active {
    background: rgba(239, 68, 68, 0.22);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
}

.btn-growth {
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
    border-color: rgba(59, 130, 246, 0.4);
}
.btn-growth:hover, .btn-growth:focus {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}
.btn-growth:active {
    background: rgba(59, 130, 246, 0.22);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
}

/* ===== 첫 진입 fade-in ===== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== DONE 버튼 첫 진입 pulse (1회) ===== */
@keyframes donePulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.2); }
    50%  { transform: scale(1.035); box-shadow: 0 0 14px 3px rgba(34, 197, 94, 0.1); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.btn-done-pulse {
    animation: donePulse 0.7s ease 0.35s 1 both;
}

/* ===== 습관 루프 메시지 ===== */
.habit-message {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

@keyframes habitIn {
    0%   { opacity: 0; transform: translateY(4px); }
    15%  { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-4px); }
}

.habit-message-show {
    animation: habitIn 1.5s ease both;
}

/* ===== 메시지 종료 후 버튼 재강조 ===== */
@keyframes replayPulse {
    0%   { transform: scale(1);   filter: brightness(1);    box-shadow: 0 0 0 0 rgba(0,0,0,0); }
    50%  { transform: scale(1.1); filter: brightness(1.08); box-shadow: 0 0 12px rgba(0,0,0,0.08); }
    100% { transform: scale(1);   filter: brightness(1);    box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

.btn-replay-pulse {
    animation: replayPulse 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}

/* ===== 토스트 ===== */
.d-none { display: none !important; }

.toast-msg {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 9999;
    animation: toastIn 0.2s ease;
}

.toast-success {
    background: #000;
    color: #fff;
}

.toast-error {
    background: #ef4444;
    color: #fff;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== 타임라인 ===== */
.timeline-section {
    border-top: 1px solid #e8e8e8;
    padding-top: 12px;
    opacity: 0.7;
}

.timeline-date {
    font-size: 0.7rem;
    color: #999;
    margin-bottom: 4px;
    margin-top: 10px;
    letter-spacing: 0.05em;
}

.timeline-date:first-child {
    margin-top: 0;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 3px;
    background: #f8f8f8;
    transition: background 0.4s ease;
}

/* ===== 타임라인 신규 항목 하이라이트 ===== */
@keyframes timelineHighlight {
    0%   { background: rgba(0, 0, 0, 0.04); }
    100% { background: #f8f8f8; }
}

.timeline-item-new {
    animation: timelineHighlight 0.5s ease both;
}

.timeline-type {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.type-DONE         { background: rgba(34,197,94,0.1);  color: #16a34a; }
.type-IN_PROGRESS  { background: rgba(59,130,246,0.08); color: #2563eb; }
.type-MISSED       { background: rgba(239,68,68,0.08); color: #dc2626; }

.timeline-body {
    flex: 1;
    min-width: 0;
}

.timeline-content {
    font-size: 0.8rem;
    color: #666;
    word-break: break-word;
}

.timeline-time {
    font-size: 0.65rem;
    color: #aaa;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.timeline-empty {
    text-align: center;
    color: #aaa;
    padding: 30px 0;
    font-size: 0.85rem;
}

/* ===== 더보기 버튼 ===== */
.timeline-more {
    text-align: center;
    padding: 8px 0;
}

.timeline-more button {
    background: none;
    border: none;
    color: #999;
    font-size: 0.75rem;
    cursor: pointer;
}

.timeline-more button:hover {
    color: #555;
}

/* ===== 날짜 선택 input ===== */
.date-input {
    font-size: 0.8rem;
}

/* ===== 태그 입력 ===== */
.tag-input {
    font-size: 0.8rem;
}

/* ===== 최근 태그 ===== */
.recent-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.recent-tag-btn {
    background: rgba(139, 92, 246, 0.08);
    color: rgba(139, 92, 246, 0.8);
    border: none;
    border-radius: 4px;
    font-size: 0.65rem;
    padding: 2px 6px;
    cursor: pointer;
}

.recent-tag-btn:hover {
    background: rgba(139, 92, 246, 0.16);
    color: rgba(139, 92, 246, 1);
}

/* ===== 타임라인 태그 badge ===== */
.timeline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.timeline-tag {
    font-size: 0.6rem;
    color: rgba(139, 92, 246, 0.8);
    background: rgba(139, 92, 246, 0.06);
    padding: 1px 5px;
    border-radius: 3px;
}

/* ===== 패턴 페이지 ===== */

/* TOP 카드 */
.top-card {
    background: #f8f8f8;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    padding: 14px 12px;
    text-align: center;
}

.top-card-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.top-card-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
}

.pattern-card {
    background: #f8f8f8;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    padding: 12px 14px;
}

.pattern-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.pattern-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.pattern-bar-label {
    font-size: 0.75rem;
    font-weight: 600;
    width: 55px;
    flex-shrink: 0;
    color: #666;
}

.pattern-bar-track {
    flex: 1;
    height: 6px;
    background: #e8e8e8;
    border-radius: 3px;
    overflow: hidden;
}

.pattern-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.pattern-bar-value {
    font-size: 0.65rem;
    color: #999;
    width: 60px;
    text-align: right;
    flex-shrink: 0;
}

/* 최다 값 강조 */
.highlight-item {
    font-weight: 700 !important;
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.04);
    transform: scale(1.02);
}

.highlight-item .pattern-bar-label {
    color: #222 !important;
    font-weight: 700;
}

.highlight-item .pattern-bar-value {
    color: #444 !important;
    font-weight: 700;
}

.highlight-item .pattern-bar-fill {
    height: 8px;
}

.highlight-item .pattern-tag-name {
    color: rgba(139, 92, 246, 1) !important;
    font-weight: 700;
}

.highlight-item .pattern-tag-type-count {
    color: #444 !important;
    font-weight: 700;
}

.pattern-empty {
    font-size: 0.75rem;
    color: #aaa;
}

.pattern-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pattern-tag-type-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.pattern-tag-name {
    font-size: 0.75rem;
    color: rgba(139,92,246,0.8);
    width: 70px;
    flex-shrink: 0;
}

.pattern-tag-type-badge {
    font-size: 0.65rem;
    font-weight: 700;
}

.pattern-tag-type-count {
    font-size: 0.65rem;
    color: #999;
    margin-left: auto;
}

/* ===== 폼 ===== */
.form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
}

/* ===== 반응형 (모바일 최적화) ===== */
@media (max-width: 576px) {
    .container {
        padding-top: 4px !important;
        padding-bottom: 8px !important;
    }

    .header-bar {
        padding: 4px 0;
        margin-bottom: 4px;
    }

    .stat-card {
        padding: 6px 8px !important;
    }

    .stat-number {
        font-size: 1.1rem;
    }

    .stat-label {
        font-size: 0.65rem;
    }

    .question-text {
        font-size: 1.05rem;
        margin-bottom: 6px;
    }

    .action-group {
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .btn-action {
        padding: 20px 8px;
        min-height: 82px;
        border-radius: 12px;
    }

    .action-emoji {
        font-size: 1.8rem;
    }

    .action-label {
        font-size: 0.85rem;
    }

    .navPages-action {
        padding: 8px 6px;
        font-size: 0.6rem;
    }

    .header-logo-image-container {
        width: 120px;
    }
}

/* ========================================
   다크모드 — Apple Style
   배경: #000 / #161617 / #1d1d1f
   인풋: #1d1d1f 고정
   ======================================== */
html.dark-mode {
    color-scheme: dark;
}

html.dark-mode body {
    background: #000;
    color: #f5f5f7;
}

/* 헤더 */
html.dark-mode .header,
html.dark-mode .header-sticky-container {
    background: #000 !important;
    border-bottom: 1px solid #2a2a2a;
}

html.dark-mode .header-bar {
    background: #000 !important;
}

/* 모든 텍스트 & 링크 — 인라인 스타일 강제 오버라이드 */
html.dark-mode a,
html.dark-mode p,
html.dark-mode span,
html.dark-mode div,
html.dark-mode li,
html.dark-mode label,
html.dark-mode td,
html.dark-mode th,
html.dark-mode .logo-container a,
html.dark-mode .header a {
    color: #f5f5f7 !important;
}

/* 네비 아이콘 SVG — fill & stroke 반전 */
html.dark-mode .navUser-action svg path,
html.dark-mode .navUser-action svg g path {
    fill: #f5f5f7 !important;
}
html.dark-mode .navUser-action--darkmode .icon-sun line,
html.dark-mode .navUser-action--darkmode .icon-sun circle {
    stroke: #f5f5f7 !important;
}
html.dark-mode .navUser-action--darkmode .icon-moon path {
    stroke: #f5f5f7 !important;
}
html.dark-mode .navUser-divider {
    background: #333;
}

/* 네비 메뉴 */
html.dark-mode .navPages {
    background: #161617;
}
html.dark-mode .navPages-action {
    color: #ccc;
}
html.dark-mode .navPages-action:hover {
    color: #fff;
}
html.dark-mode .navPages-dropdown {
    background: #161617;
    border-color: #2a2a2a;
}
html.dark-mode .navPages-dropdown-action {
    color: #999;
}
html.dark-mode .navPages-dropdown-action:hover {
    color: #fff;
}

/* 검색 */
html.dark-mode .dropdown--quickSearch {
    background: #161617;
}
html.dark-mode .quickSearch-field input,
html.dark-mode #search-input {
    background: #1d1d1f;
    color: #f5f5f7;
    border-color: #333;
}
html.dark-mode .search-background-dim {
    background: rgba(0, 0, 0, 0.7);
}

/* 인풋, 텍스트영역, 셀렉트 — 배경 #1d1d1f 고정 */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    background: #1d1d1f !important;
    color: #f5f5f7 !important;
    border-color: #333 !important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #888;
}

/* 카드 & 컨테이너 */
html.dark-mode .card,
html.dark-mode .panel,
html.dark-mode .modal-content,
html.dark-mode .dropdown-menu {
    background: #1d1d1f;
    color: #f5f5f7;
    border-color: #2a2a2a;
}

/* 일반 섹션 배경 */
html.dark-mode section,
html.dark-mode .container,
html.dark-mode .portfolio-content,
html.dark-mode .portfolio-nav-row {
    background: transparent;
}

/* 통계 카드 */
html.dark-mode .stat-card {
    background: #1d1d1f !important;
    border-color: #2a2a2a !important;
}
html.dark-mode .stat-card-link:hover {
    background: #252527 !important;
}
html.dark-mode .stat-number {
    color: #f5f5f7 !important;
}
html.dark-mode .stat-label {
    color: #888 !important;
}

/* 질문 텍스트 */
html.dark-mode .question-text {
    color: #f5f5f7 !important;
}

/* 액션 버튼 — 다크모드 톤 */
html.dark-mode .btn-done {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
}
html.dark-mode .btn-skip {
    background: rgba(156, 163, 175, 0.15) !important;
    color: #9ca3af !important;
    border-color: rgba(156, 163, 175, 0.5) !important;
}
html.dark-mode .btn-giveup {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}
html.dark-mode .btn-growth {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

/* 내용 추가 버튼 */
html.dark-mode .btn-outline-secondary {
    color: #888 !important;
    border-color: #333 !important;
    background: transparent !important;
}
html.dark-mode .btn-outline-secondary:hover {
    background: #1d1d1f !important;
    color: #f5f5f7 !important;
}

/* Bootstrap bg-light 오버라이드 */
html.dark-mode .bg-light {
    background: #1d1d1f !important;
    color: #f5f5f7 !important;
    border-color: #333 !important;
}
html.dark-mode .border-light {
    border-color: #333 !important;
}
html.dark-mode .form-control {
    background: #1d1d1f !important;
    color: #f5f5f7 !important;
    border-color: #333 !important;
}

/* 타임라인 */
html.dark-mode .timeline-section {
    border-color: #2a2a2a !important;
}
html.dark-mode .timeline-date {
    color: #666 !important;
}
html.dark-mode .timeline-item {
    background: #1d1d1f !important;
    border-color: #2a2a2a !important;
}
html.dark-mode .timeline-content {
    color: #ccc !important;
}
html.dark-mode .timeline-time {
    color: #666 !important;
}
html.dark-mode .timeline-empty {
    color: #666 !important;
}
html.dark-mode .timeline-more button {
    color: #888 !important;
    border-color: #333 !important;
    background: #1d1d1f !important;
}
html.dark-mode .timeline-tag {
    background: #252527 !important;
    color: #aaa !important;
}

/* 습관 메시지 */
html.dark-mode .habit-message {
    color: #888 !important;
}

/* 텍스트 색상 오버라이드 */
html.dark-mode .text-dark,
html.dark-mode .bg-white {
    background: #000 !important;
    color: #f5f5f7 !important;
}
html.dark-mode .text-secondary {
    color: #888 !important;
}

html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
    color: #f5f5f7 !important;
}

html.dark-mode a {
    color: #6bb8ff;
}
html.dark-mode a:hover {
    color: #9dd1ff;
}

/* 구분선 */
html.dark-mode hr {
    border-color: #2a2a2a;
}
html.dark-mode .border-bottom {
    border-color: #2a2a2a !important;
}

/* 다국어 선택 */
html.dark-mode .navUser-action--lang {
    color: #ccc;
}

/* 스크롤바 (webkit) */
html.dark-mode ::-webkit-scrollbar {
    background: #161617;
}
html.dark-mode ::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

/* ===== 메인 섹션 그리드 (MR PORTER style) ===== */
.main-section {
    position: relative;
    clear: both;
    max-width: 1440px;
    margin: 0 auto;
    padding-top: 48px;
    padding-bottom: 20px;
}
.main-section-grid {
    display: grid;
    position: relative;
    box-sizing: border-box;
    gap: 0 32px;
}
.main-section-grid.cols-2 { grid-template-columns: repeat(2, 672px); justify-content: center; }
.main-section-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.main-section-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* 카드 아이템 컨테이너 */
.ms-card {
    position: relative;
    display: block;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 이미지 래퍼 링크 */
.ms-card-img-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.ms-card-img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.ms-card-img {
    display: block;
    width: 672px;
    height: 758px;
    object-fit: cover;
    border-radius: 0;
    background: #f5f5f7;
}

/* 타이틀 링크 */
.ms-card-title-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.ms-card-title {
    margin: 0 0 8px;
    padding: 16px 0 0;
    font-family: SackersGothicStd, sans-serif;
    font-synthesis: none;
    font-size: 12px;
    font-weight: 1000;
    line-height: 1.3333333333333333;
    color: rgba(0, 0, 0, 1);
    text-transform: uppercase;
    text-align: left;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/* CTA 링크 ("Shop now" 스타일) */
.ms-card-cta-wrap {
    padding: 0;
    text-align: left;
}
.ms-card-cta {
    display: inline-block;
    font-family: Georgia, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2857142857142858;
    color: rgba(0, 0, 0, 1);
    text-transform: none;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    transition: opacity 0.2s ease;
}
.ms-card-cta:hover {
    opacity: 0.6;
}

/* 보드 라벨 (기존 호환) */
.ms-card-board {
    display: none;
}
.ms-card-body {
    display: none;
}

/* 다크모드 */
html.dark-mode .ms-card-title { color: #f5f5f7; }
html.dark-mode .ms-card-cta { color: #f5f5f7; }
html.dark-mode .ms-card-img { background: #161617; }

/* 반응형 */
@media (max-width: 768px) {
    .header { border-bottom-width: 4px; }
}
@media (max-width: 768px) {
    .main-section-grid.cols-3,
    .main-section-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .main-section-grid.cols-2,
    .main-section-grid.cols-3,
    .main-section-grid.cols-4 { grid-template-columns: 1fr; }
    .ms-card-img { width: 100% !important; height: auto !important; max-height: 25vh; object-fit: cover !important; }
    .ms-card-title { font-size: 14px; padding-top: 10px; }
    .ms-card { margin-bottom: 24px; }
    .main-section { padding: 16px 16px; }
    .main-section-grid { gap: 0; }
}

/* ===== 모바일 하단 네비게이션 ===== */
.mobile-bottom-nav {
    display: none;
}
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        height: 56px;
        align-items: center;
        justify-content: space-around;
        padding-bottom: env(safe-area-inset-bottom);
    }
    body {
        padding-bottom: 56px;
    }
}
.mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: #111;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    -webkit-tap-highlight-color: transparent;
}
.mobile-bottom-nav-item span:not(.msg-badge):not(.notif-badge) {
    font-family: 'Engravers Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
}
.mobile-bottom-nav-item:active {
    opacity: 0.5;
}
html.dark-mode .mobile-bottom-nav {
    background: #000;
    border-top: 1px solid #2a2a2a;
}
html.dark-mode .mobile-bottom-nav-item {
    color: #f5f5f7;
}

/* 모바일에서는 헤더의 검색/계정/메시지/알림/로그아웃/다국어/다크모드 아이콘 숨김 (하단 네비/슬라이드 메뉴에 있음) */
@media (max-width: 768px) {
    #searchItem,
    #searchDivider,
    #accountItem,
    #accountDivider,
    #messagesItem,
    #messagesDivider,
    #messagesAfterDivider,
    #notificationItem,
    #notificationAfterDivider,
    #logoutItem,
    #logoutDivider,
    #adminDashboardItem,
    #adminDashboardDivider,
    .header-lang-selector,
    #darkmodeItem {
        display: none !important;
    }
}

/* 모바일 슬라이드 메뉴 상단 도구 영역 (다국어/다크모드) */
.mobile-slide-menu-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid #e0e0e0;
}
.mobile-slide-menu-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 32px;
    padding: 0 10px;
    background: none;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    color: #111;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
}
html.dark-mode .mobile-slide-menu-tools {
    border-bottom-color: #2a2a2a;
}
html.dark-mode .mobile-slide-menu-tool {
    color: #f5f5f7;
    border-color: #2a2a2a;
}

/* 모바일 슬라이드 메뉴 */
.mobile-slide-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: #fff;
    z-index: 10001;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mobile-slide-menu.is-open {
    transform: translateX(0);
}
.mobile-slide-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}
.mobile-slide-menu-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mobile-slide-menu-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #111;
}
.mobile-slide-menu-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}
.mobile-slide-menu-list li a {
    display: block;
    padding: 5px 20px;
    font: 14px / 18px Georgia;
    font-weight: 400;
    letter-spacing: .2px;
    color: #111;
    text-decoration: none;
}
.mobile-slide-menu-list li a:active {
    background: #f5f5f5;
}
.mobile-slide-menu-list li.mobile-slide-menu-group {
    margin: 0 0 8px;
    padding: 16px 0 0;
    position: relative;
    font: 14px / 18px Georgia;
    letter-spacing: .2px;
    font-weight: 400;
    color: #000;
    text-align: center;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}
.mobile-slide-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.mobile-slide-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
html.dark-mode .mobile-slide-menu {
    background: #1d1d1f;
}
html.dark-mode .mobile-slide-menu-header {
    border-bottom: 1px solid #2a2a2a;
}
html.dark-mode .mobile-slide-menu-title,
html.dark-mode .mobile-slide-menu-close {
    color: #f5f5f7;
}
html.dark-mode .mobile-slide-menu-list li a {
    color: #f5f5f7;
}
html.dark-mode .mobile-slide-menu-list li a:active {
    background: #2a2a2a;
}
html.dark-mode .mobile-slide-menu-list li.mobile-slide-menu-group {
    color: #fff;
}

/* ===== Footer (MR PORTER 원본) ===== */
#footer {
    overflow-x: hidden;
}
* {
    -moz-osx-font-smoothing: auto;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.Footer2 {
    font-size: 14px;
    line-height: 1.5;
    color: #111;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}
.FooterLayout2__topBg {
    width: 2525px;
    height: 380px;
    background: #f0f0f0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}
.FooterLayout2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    max-width: 1440px;
    margin: 0 auto;
    border-top: 1px solid #e5e5e5;
    position: relative;
    z-index: 1;
}
.FooterLayout2__area {
    padding: 40px 48px;
}
.FooterLayout2__area--topLeft {
    grid-column: 1;
    grid-row: 1;
    border-bottom: 1px solid #e5e5e5;
    border-right: 0;
    height: 380px;
}
.FooterLayout2__area--topRight {
    grid-column: 2;
    grid-row: 1;
    border-bottom: 1px solid #e5e5e5;
    border-left: 0;
    height: 380px;
}
.FooterLayout2__area--bottomLeft {
    grid-column: 1;
    grid-row: 2;
    border-right: 0;
}
.FooterLayout2__area--bottomRight {
    grid-column: 2;
    grid-row: 2;
    border-left: 0;
    border-top: 0;
}
.Section2 {
}

/* Heading */
.Heading2 {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 20px;
    line-height: 1.4;
}
.Heading2--secondary {
    font-size: 16px;
    letter-spacing: 1px;
}

/* Paragraph */
.Paragraph2 {
    font-size: 13px;
    font-weight: 400;
    color: #666;
    line-height: 1.6;
    margin: 0 0 10px;
}
.Paragraph2__link {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.Paragraph2__link:hover {
    opacity: 0.6;
}

/* Button */
.Button10 {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.Button10--link {
    font-size: 11px;
}
.Button10:hover {
    opacity: 0.6;
}

/* Account Utility (Newsletter) */
.AccountUtility2 {
    margin-bottom: 32px;
}
.AccountUtility2__details {
}
.AccountUtility2__cta {
    margin-bottom: 20px;
}
.AccountUtility2__emailReadMore {
    margin-top: 8px;
}
.AccountUtility2__email-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}
.AccountUtility2__registration-form {
    display: flex;
}
.RegistrationForm2__form {
    display: flex;
    width: 100%;
}
.RegistrationForm2__email-field {
    flex: 1;
}
.RegistrationForm2__email-text {
    width: 302px;
    height: 40px;
    padding: 0 14px;
    font-size: 13px;
    font-family: inherit;
    color: #111;
    background: #fff;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 0;
    outline: none;
    -webkit-font-smoothing: antialiased;
}
.RegistrationForm2__email-text::placeholder {
    color: #999;
}
.RegistrationForm2__email-text:focus {
    border-color: #111;
}
.SimpleAsyncButton10__asyncButtonWrapper {
}
.RegistrationForm2__submit-button {
    height: 44px;
    padding: 0 24px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: #111;
    border: 1px solid #111;
    border-radius: 0;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    transition: background 0.2s ease;
}
.RegistrationForm2__submit-button:hover {
    background: #333;
}

/* Social Icons */
.SocialIcons2__container {
    margin-top: 24px;
}
.SocialIcons2 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
}
.SocialIcons2__icon {
}
.SocialIcons2__link {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 0;
    color: #111;
    text-decoration: none;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.2s ease;
}
.SocialIcons2__link:hover {
    opacity: 0.5;
}
.SocialIcons2__link--youtube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31.5 31.5 0 0 0 0 12a31.5 31.5 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31.5 31.5 0 0 0 24 12a31.5 31.5 0 0 0-.5-5.8zM9.5 15.5v-7L16 12l-6.5 3.5z'/%3E%3C/svg%3E");
}
.SocialIcons2__link--facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M24 12a12 12 0 1 0-13.9 11.9v-8.4H7.1V12h3V9.4c0-3 1.8-4.7 4.5-4.7 1.3 0 2.7.2 2.7.2v3h-1.5c-1.5 0-2 .9-2 1.9V12h3.3l-.5 3.5h-2.8v8.4A12 12 0 0 0 24 12z'/%3E%3C/svg%3E");
}
.SocialIcons2__link--twitter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M18.9 1h3.7l-8 9.2L24 23h-7.4l-5.8-7.6L4.6 23H.8l8.6-9.8L0 1h7.6l5.2 6.9L18.9 1zm-1.3 19.8h2L6.5 3H4.3l13.3 17.8z'/%3E%3C/svg%3E");
}
.SocialIcons2__link--instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1.1.4 2.2.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.9c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1.1.4-2.2.4-1.3.1-1.6.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1.1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1.1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zM12 0C8.7 0 8.3 0 7 .1 5.7.1 4.8.3 4 .6c-.9.3-1.6.7-2.3 1.4C1 2.7.6 3.4.3 4.3.1 5.1 0 5.9 0 7.2 0 8.5 0 8.9 0 12.2s0 3.7.1 5c.1 1.3.2 2.1.5 2.9.3.9.7 1.6 1.4 2.3.7.7 1.4 1.1 2.3 1.4.8.3 1.6.4 2.9.5 1.3.1 1.7.1 5 .1s3.7 0 5-.1c1.3-.1 2.1-.2 2.9-.5.9-.3 1.6-.7 2.3-1.4.7-.7 1.1-1.4 1.4-2.3.3-.8.4-1.6.5-2.9.1-1.3.1-1.7.1-5s0-3.7-.1-5c-.1-1.3-.2-2.1-.5-2.9-.3-.9-.7-1.6-1.4-2.3C21.3 1 20.6.6 19.7.3 18.9.1 18.1 0 16.8 0 15.5 0 15.1 0 12 0zm0 5.8a6.2 6.2 0 1 0 0 12.4 6.2 6.2 0 0 0 0-12.4zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-10.9a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8z'/%3E%3C/svg%3E");
}

/* Contact Panel */
.ContactPanel2 {
    margin-bottom: 32px;
}
.ContactPanel2__copy {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}
.ContactPanel2__copy p {
    margin: 0;
}
.ContactPanel2__copy a {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ContactPanel2__copy a:hover {
    opacity: 0.6;
}

/* Locale Switch */
.LocaleSwitch2__footer {
}
.LocaleSwitch2__details {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.LocaleSwitch2__country {
    display: flex;
    align-items: center;
    gap: 8px;
}
.LocaleSwitch2__country-name,
.LocaleSwitch2__country-name--footer {
    font-size: 13px;
    color: #111;
}
.LocaleSwitch2__down-arrow,
.LocaleSwitch2__down-arrow--footer {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #111;
    border-bottom: 1.5px solid #111;
    transform: rotate(45deg);
    margin-top: -4px;
}

/* Footer Links Accordion */
.FooterLinksAccordion2__wrapper-link--desktop {
    display: flex;
    gap: 80px;
}
.FooterLinksAccordion2__wrapper-link--mobile {
    display: none;
}
.FooterLinksAccordion2__section {
}
.FooterLinksAccordion2__title {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 16px;
}
.FooterLinksAccordion2 {
    list-style: none;
    margin: 0;
    padding: 0;
}
.FooterLinksAccordion2 li {
    margin-bottom: 10px;
}
.FooterLinksAccordion2__link {
    font-size: 13px;
    font-weight: 400;
    color: #666;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s ease;
    cursor: pointer;
}
.FooterLinksAccordion2__link:hover {
    color: #111;
}
.FooterLinksAccordion2__link--bold {
    font-weight: 700;
}
.FooterLinksAccordion2__link--red {
    color: #111;
}

/* Get App / Branding */
.getApp2 {
    margin-bottom: 24px;
}
.getApp2__textBoxDesktop {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-top: 12px;
}

/* Site Switch / Copyright */
.SiteSwitch2 {
    border-top: 1px solid #e5e5e5;
    max-width: 1440px;
    margin: 0 auto;
}
.SiteSwitch2__wrapper {
    padding: 24px 48px;
}
.SiteSwitch2__copyright {
}
.Copyright2 {
    display: flex;
    align-items: center;
    justify-content: center;
}
.Copyright2__copyright {
    font-size: 11px;
    font-weight: 400;
    color: #999;
    letter-spacing: 0.5px;
}

/* Footer 반응형 */
@media (max-width: 768px) {
    .FooterLayout2 {
        grid-template-columns: 1fr;
    }
    .FooterLayout2__area {
        padding: 32px 24px;
    }
    .FooterLayout2__area--topLeft {
        grid-column: 1;
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
    }
    .FooterLayout2__area--topRight {
        grid-column: 1;
        border-bottom: 1px solid #e5e5e5;
    }
    .FooterLayout2__area--bottomLeft {
        grid-column: 1;
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
    }
    .FooterLayout2__area--bottomRight {
        grid-column: 1;
    }
    .FooterLinksAccordion2__wrapper-link--desktop {
        flex-direction: column;
        gap: 32px;
    }
    .SiteSwitch2__wrapper {
        padding: 20px 24px;
    }
}

/* profile_menu_item style: messages & notifications header icons */
.navUser-action--messages,
#notifIconLink {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border-radius: 50% !important;
    padding: 4px !important;
    box-shadow: none !important;
    font-size: 1rem;
    color: #222;
    position: relative;
    text-decoration: none;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    transition: background-color 0.2s ease !important;
}

.navUser-action--messages img,
#notifIconLink img {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0;
    position: relative;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
}

.badge_count.is-hidden {
    display: none !important;
}

.badge_count {
    background-color: rgb(244, 54, 30) !important;
    color: rgb(255, 255, 255) !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    font-size: 9.5px !important;
    letter-spacing: -0.3px !important;
    line-height: 14px !important;
    padding: 0px 4px !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    text-align: center !important;
    box-shadow: rgba(244, 54, 30, 0.16) 0px 2px 4px 0px !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    z-index: 10 !important;
    cursor: pointer !important;
    display: block !important;
}

/* ===== 다크모드: Footer ===== */
html.dark-mode .FooterLayout2__topBg {
    background: #1d1d1f;
}
html.dark-mode .FooterLayout2 {
    border-top-color: #2a2a2a;
}
html.dark-mode .FooterLayout2__area--topLeft,
html.dark-mode .FooterLayout2__area--topRight {
    border-bottom-color: #2a2a2a;
}
html.dark-mode .Heading2 {
    color: #f5f5f7;
}
html.dark-mode .ContactPanel2__copy {
    color: #999;
}
html.dark-mode .ContactPanel2__copy a {
    color: #f5f5f7;
}
html.dark-mode .LocaleSwitch2__country-name,
html.dark-mode .LocaleSwitch2__country-name--footer {
    color: #f5f5f7;
}
html.dark-mode .LocaleSwitch2__down-arrow,
html.dark-mode .LocaleSwitch2__down-arrow--footer {
    border-right-color: #f5f5f7;
    border-bottom-color: #f5f5f7;
}
html.dark-mode .Paragraph2 {
    color: #999;
}
html.dark-mode .Paragraph2__link {
    color: #f5f5f7;
}
html.dark-mode .FooterLinksAccordion2__title {
    color: #f5f5f7;
}
html.dark-mode .FooterLinksAccordion2 a {
    color: #999;
}
html.dark-mode .FooterLinksAccordion2 a:hover {
    color: #f5f5f7;
}
html.dark-mode .SocialIcons2__link {
    filter: invert(1);
}
html.dark-mode .Button10 {
    color: #f5f5f7;
}
html.dark-mode .SiteSwitch2__wrapper {
    border-color: #2a2a2a;
}