/* ====== 모든 CSS (기존 완전 복원 + 부적 탭 여백/스타일 수정 + 자미두수 레드 테마 + 프리미엄 텍스트 색상 + 쿠폰 배지 중앙 정렬) ====== */

/* ====== 디자인 토큰 ======
   자주 쓰이는 색을 이름으로 모아둔 곳. 색을 바꿔야 할 때 여기만 고치면 전체에 반영된다.
   값은 기존과 동일하므로 이 블록을 넣는 것만으로는 화면이 달라지지 않는다.
   ※ 새 색을 쓰기 전에 여기에 맞는 토큰이 있는지 먼저 확인할 것. 없으면 토큰을 추가하고 쓸 것. */
:root {
    /* --- 원색 (RGB 삼원색) ---
       반투명으로도 쓰이는 색은 여기서 삼원색으로 보관한다.
       rgba() 안에서 rgba(var(--rgb-gold), 0.2) 형태로 재사용하기 위함이며,
       이 덕분에 색을 한 번 바꾸면 불투명·반투명이 함께 바뀐다. */
    --rgb-gold:         255, 215, 0;
    --rgb-gold-dim:     212, 175, 55;
    --rgb-bg-deep:      10, 22, 40;
    --rgb-white:        255, 255, 255;
    --rgb-black:        0, 0, 0;

    /* --- 브랜드 금색 --- */
    --color-gold:       rgb(var(--rgb-gold));      /* 강조·포인트 (가장 많이 쓰임) */
    --color-gold-dim:   rgb(var(--rgb-gold-dim));  /* 차분한 금색 — 프리미엄 카드 계열 */
    --color-gold-dark:  #B8860B;                   /* 어두운 금색 — 테두리·그림자 */

    /* --- 텍스트 --- */
    --color-text-title: #F0E8D8;  /* 제목 */
    --color-text-sub:   #D0C8B8;  /* 보조 설명 */
    --color-text-body:  #B0C0D0;  /* 본문 */
    --color-text-muted: #8A9BB0;  /* 흐린 텍스트·비활성 */
    --color-white:      rgb(var(--rgb-white));
    --color-cream:      #FFF8DC;  /* 크림색 — 한자·강조 텍스트 */

    /* --- 배경 --- */
    --color-bg-deep:    rgb(var(--rgb-bg-deep));  /* 카드·페이지의 짙은 남색 배경 */

    /* --- 테마 (다크 모드에서 .phone.dark-mode 가 덮어씀) --- */
    --phone-bg:         radial-gradient(ellipse at 50% 0%, #E8D5A0, #C9A84C 25%, #B8942A 55%, #8A6B1A 80%, #4A3510 100%);
    --phone-bg-dark:    #121212;
    --scrollbar-thumb:  rgba(var(--rgb-gold-dim), 0.4);

    /* --- 모서리 둥글기 ---
       실제 사용처를 조사해 역할별로 이름을 붙였다. 새 요소를 만들 때 크기가 아니라
       역할로 골라 쓰면 값이 다시 흩어지지 않는다. */
    --radius-chip:    6px;   /* 토글 안의 작은 버튼, 날짜 셀 */
    --radius-control: 8px;   /* 토글 그룹, 캘린더 항목, 작은 입력 */
    --radius-input:   10px;  /* 입력·선택 요소 */
    --radius-button:  12px;  /* 일반 버튼, 목록 항목 */
    --radius-card:    14px;  /* 카드 */
    --radius-box:     16px;  /* 중간 크기 박스 */
    --radius-section: 18px;  /* 큰 섹션 래퍼 */
    --radius-pill:    20px;  /* 알약형 버튼·배지, 모달 */
    --radius-circle:  50%;   /* 원형 */

    /* --- 글자 크기 --- */
    --fs-xs:            11px;
    --fs-sm:            12px;
    --fs-base:          13px;  /* 본문 기본 */
    --fs-md:            14px;
    --fs-lg:            15px;
    --fs-xl:            16px;
    --fs-2xl:           18px;
    --fs-3xl:           22px;
}

/* ====== 한글·영문 글꼴 (Pretendard) ======
   원래 외부 CDN 에서 받았으나, 스토어 앱은 앱 파일이 폰 안에 들어가므로 글꼴만 인터넷에
   의존하면 신호가 없을 때 글자만 깨진다. 그래서 글꼴 파일을 폴더에 포함한다.
   굵기 9종이 한 파일에 들어있는 가변 글꼴이라, 파일 하나로 400~900 을 모두 쓴다.
   ※ 글꼴 이름을 'Pretendard' 로 두었기에 기존 글꼴 스택 7곳을 고칠 필요가 없다. */
@font-face {
    font-family: 'Pretendard';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('Fonts/PretendardVariable.woff2') format('woff2-variations');
}

/* ====== 한자 전용 글꼴 ======
   Pretendard 에는 이 앱이 쓰는 한자 321자 중 228자가 없어서, 없는 글자는 기기가 임의로
   채워 넣었다(안드로이드 Noto, 아이폰 Apple SD Gothic Neo, 윈도우 맑은 고딕). 그래서 같은
   화면이 기기마다 다르게 보이고 한글과 한자의 획 굵기도 맞지 않았다.
   unicode-range 로 한자 구간만 이 글꼴이 담당하게 해 모든 기기에서 동일하게 만든다.
   한자의 넓은 폭은 대부분 좌우 여백이고 글자 자체(잉크 높이)는 한글보다 6% 클 뿐이다.
   size-adjust 95% 면 한자 잉크 높이 85.5 가 한글 85.0 과 거의 같아지고, 세로 어긋남도
   가장 작다. 더 줄이면 한자가 작아지면서 기준선 위로 덜 올라와 아래로 처져 보인다.
   한글·영문·숫자는 이 구간 밖이라 영향이 없다.
   글꼴 파일은 앱이 실제로 쓰는 321자만 담은 서브셋(130KB)이다. */
@font-face {
    font-family: 'BichaekHanja';
    src: url('Fonts/NotoSerifKR-hanja.woff2') format('woff2');
    font-weight: 200 900;
    font-display: swap;
    size-adjust: 95%;
    unicode-range: U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #0A0806;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: 'BichaekHanja', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    padding: 0;
    margin: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.phone {
    /* 기기 폭을 따라가되 상한을 둔다. 상한 480px는 현재 유통되는 가장 넓은 휴대폰(430px)까지
       여백 없이 채우면서, 태블릿·폴더블에서는 모바일 UI가 과하게 늘어나지 않도록 잡은 값이다. */
    width: 100%;
    max-width: 480px;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    background: var(--phone-bg);
    border-radius: 0;
    position: relative;
    box-shadow: 0 40px 100px rgba(var(--rgb-black), 0.8);
    display: flex;
    flex-direction: column;
    border: none;
    margin: 0 auto;
    flex-shrink: 0;
    transition: background 0.4s ease;
}
/* ====== 앱 좌/우 이동 (폴더블·태블릿 등 화면이 넓을 때) ====== */
/* justify-content 만으로는 .phone 의 margin:0 auto 를 이기지 못하므로 margin 도 함께 푼다 */
body.app-left  { justify-content: flex-start; }
body.app-right { justify-content: flex-end; }
body.app-left  .phone { margin-left: 0;    margin-right: auto; }
body.app-right .phone { margin-left: auto; margin-right: 0; }

.app-align-btn {
    display: none;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;   /* 가로와 같게 하여 정원이 되도록 한다 */
    align-items: center;
    justify-content: center;
    background: rgba(var(--rgb-bg-deep), 0.9);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.35);
    color: var(--color-gold-dim);
    font-size: var(--fs-3xl);
    line-height: 1;
    border-radius: var(--radius-circle);
    box-shadow: 0 2px 8px rgba(var(--rgb-black), 0.35);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    /* 모달(10000)·부적 오버레이(20000)·토스트(30001)보다 아래에 두어, 그것들이 열리면 자연히 가려진다 */
    z-index: 9999;
}
.app-align-btn.left  { left: 12px; }
.app-align-btn.right { right: 12px; }
.app-align-btn:hover {
    background: rgba(var(--rgb-bg-deep), 1);
    border-color: rgba(var(--rgb-gold-dim), 0.6);
}
.app-align-btn:active { background: rgba(var(--rgb-gold-dim), 0.2); }

/* ====== 키보드 초점 표시 ======
   :focus 가 아니라 :focus-visible 을 쓰므로 마우스·터치로 누를 때는 나타나지 않고,
   키보드(Tab)로 이동할 때만 표시된다. 기존 사용 경험을 바꾸지 않으면서 키보드 탐색만 가능하게 한다.
   outline 은 요소의 border-radius 를 따라가므로 모양을 따로 맞출 필요가 없다. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}
/* 앱 폭(480px)보다 최소 80px 이상 여유가 있을 때만 노출. 휴대폰에서는 아예 나타나지 않는다.
   이미 그쪽 끝에 붙어 있으면 해당 방향 버튼을 숨겨, 버튼이 앱을 가리는 일이 없게 한다 */
@media (min-width: 560px) {
    body:not(.app-left)  .app-align-btn.left  { display: flex; }
    body:not(.app-right) .app-align-btn.right { display: flex; }
}
.phone::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 248, 220, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(var(--rgb-gold), 0.12) 0%, transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(30, 20, 10, 0.35) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    border-radius: 0;
}
.phone::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(20, 15, 5, 0.25) 100%);
    pointer-events: none;
    z-index: 0;
    border-radius: 0;
}
/* ====== 다크 모드 ======
   토큰만 덮어써서 테마를 바꾼다. 아래 규칙들은 모두 기본 규칙보다 특이도가 높으므로
   (.phone.dark-mode = 0,2,0 > .phone = 0,1,0) !important 없이도 정상적으로 적용된다. */
.phone.dark-mode {
    --phone-bg:       var(--phone-bg-dark);
    --scrollbar-thumb: #222222;
}
.phone.dark-mode::before,
.phone.dark-mode::after {
    display: none;
}
.phone.dark-mode .app-title-main,
.phone.dark-mode .app-title-main .sub,
.phone.dark-mode .app-title-sub {
    background: linear-gradient(135deg, #BF953F 0%, #FCF6B5 30%, #B38728 60%, #FBF5B7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    color: transparent;
    -webkit-text-stroke: 0;
    text-stroke: 0;
}
.phone.dark-mode .app-title-sub {
    opacity: 1;
}
/* ====== APP BAR ====== */
.content {
    flex: 1;
    padding: 20px 22px 16px 22px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    min-height: 0;
    scroll-behavior: smooth;
}
.content::-webkit-scrollbar {
    width: 4px;
}
.content::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}
.app-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    flex-shrink: 0;
    height: auto;
    min-height: 80px;
    margin-bottom: 5px;
}
.app-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: auto;
}
.app-brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    line-height: 1.2;
}
.app-icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-button);
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(var(--rgb-black), 0.3);
    flex-shrink: 0;
    background: var(--color-bg-deep);
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--color-gold);
}
.app-icon-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.app-title-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1;
}
.app-title-sub {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--color-bg-deep);
    letter-spacing: 0.3px;
    opacity: 0.7;
}
.app-title-main {
    font-size: 19.6px;
    font-weight: 900;
    color: var(--color-bg-deep);
    letter-spacing: -0.3px;
    -webkit-text-stroke: 0.5px var(--color-bg-deep);
    text-stroke: 0.5px var(--color-bg-deep);
}
.app-title-main .sub {
    font-weight: 900;
    font-size: 19.6px;
    color: var(--color-bg-deep);
    -webkit-text-stroke: 0.5px var(--color-bg-deep);
    text-stroke: 0.5px var(--color-bg-deep);
}
.page {
    display: none;
    flex: 1;
    flex-direction: column;
}
.page.active {
    display: flex;
}
.page.page-drag {
    position: absolute;
    z-index: 5;
}
.page.page-drag-top {
    z-index: 6;
}
/* ====== 모든 카드/박스 간격 통일 ====== */
.brand-intro,
.divination-card,
.guide-text,
.fortune-form-wrapper,
.bichaek-cards-wrapper,
.bichaek-card,
.lotto-card,
.lotto-generate-box,
.dream-form-wrapper,
.dream-result-area,
.taegil-result-item,
.match-result-item,
.profile-card,
.coupon-card,
.birth-sync-box,
.menu-group,
.dev-board,
.login-section,
.fortune-main-tabs,
.amulet-page,
.today-forecast-header,
.amulet-header-unified {
    margin-bottom: 16px;
}
.brand-intro {
    background: rgba(var(--rgb-bg-deep), 0.92);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-section);
    padding: 16px 20px 12px 20px;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    box-shadow: 0 8px 30px rgba(var(--rgb-black), 0.3);
}
.brand-intro .sub-desc {
    font-size: var(--fs-base);
    color: var(--color-gold);
    text-align: center;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    padding-bottom: 8px;
}
.brand-intro .philosophy {
    background: rgba(var(--rgb-black), 0.2);
    border-radius: var(--radius-button);
    padding: 8px 12px;
    margin-top: 6px;
    display: none;
}
.brand-intro .philosophy.open {
    display: block;
}
.brand-intro .philosophy .item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
}
.brand-intro .philosophy .item:not(:last-child) {
    border-bottom: 1px solid rgba(var(--rgb-gold-dim), 0.08);
}
.brand-intro .philosophy .item .icon {
    font-size: var(--fs-2xl);
    width: 26px;
    flex-shrink: 0;
    text-align: center;
    margin-top: 2px;
}
.brand-intro .philosophy .item .text {
    flex: 1;
}
.brand-intro .philosophy .item .text .title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-gold);
    display: block;
}
.brand-intro .philosophy .item .text .desc {
    font-size: var(--fs-base);
    color: var(--color-text-sub);
    line-height: 1.5;
    margin-top: 1px;
}
.toggle-btn {
    background: rgba(var(--rgb-gold), 0.08);
    border: 1px solid rgba(var(--rgb-gold), 0.15);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-size: var(--fs-sm);
    color: var(--color-gold-dim);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    display: block;
    margin: 6px auto 0 auto;
    min-height: 28px;
}
.toggle-btn:active {
    transform: scale(0.95);
    background: rgba(var(--rgb-gold), 0.15);
}

/* ====== 오늘의 운세 헤더 ====== */
.today-forecast-header {
    text-align: center;
    padding: 16px 20px 12px 20px;
    background: rgba(var(--rgb-bg-deep), 0.92);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-section);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    box-shadow: 0 8px 30px rgba(var(--rgb-black), 0.3);
}
.today-forecast-header .today-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: 0.5px;
    text-shadow: 0 0 20px rgba(var(--rgb-gold), 0.15);
}
.today-forecast-header .today-title .inline-title-icon {
    margin-right: 0;
}
.today-forecast-header .today-date {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-text-sub);
    margin-top: 6px;
    letter-spacing: 0.3px;
}
.phone.dark-mode .today-forecast-header .today-title {
    color: var(--color-white);
    text-shadow: 0 0 20px rgba(var(--rgb-gold), 0.15);
}
.phone.dark-mode .today-forecast-header .today-date {
    color: var(--color-text-sub);
}

/* ====== divination-card ====== */
.divination-card {
    background: rgba(var(--rgb-bg-deep), 0.92);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-section);
    padding: 16px 18px 18px 18px;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    box-shadow: 0 8px 30px rgba(var(--rgb-black), 0.3);
    flex-shrink: 0;
}
.divination-card .header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.divination-card .header .icon-wrap {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--color-gold);
}
.divination-card .header .title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-text-title);
}
.divination-card .header .badge {
    font-size: 10px;
    color: var(--color-text-muted);
    background: rgba(var(--rgb-gold-dim), 0.12);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    margin-left: auto;
}
.divination-card .desc {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-text-body);
    margin: 0 0 8px 0;
    line-height: 1.4;
    text-align: center;
}
.coupon-only-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--color-gold);
    background: transparent;
    border: none;
    padding: 2px 12px;
    margin: -4px auto 10px auto;
    width: 100%;
    letter-spacing: 0.2px;
}
.divination-card .display-area {
    background: rgba(var(--rgb-black), 0.25);
    border-radius: var(--radius-card);
    padding: 12px 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}
.divination-card .display-area .symbol-placeholder {
    font-size: 56px;
    line-height: 1;
    color: var(--color-gold-dim);
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    flex-shrink: 0;
}
.divination-card .display-area .symbol-placeholder svg {
    width: 72px;
    height: 72px;
    display: block;
    margin: auto;
}
.divination-card .action-btn {
    background: rgba(var(--rgb-gold), 0.15);
    border: 1px solid rgba(var(--rgb-gold), 0.3);
    border-radius: var(--radius-pill);
    padding: 10px 24px;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-gold);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    width: 100%;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 0 0;
}
.divination-card .action-btn:active {
    transform: scale(0.96);
    background: rgba(var(--rgb-gold), 0.25);
}
.divination-card .action-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}
.iching-loading {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    position: relative;
    width: 100%;
}
.iching-loading .circular-progress {
    position: relative;
    width: 80px;
    height: 80px;
}
.iching-loading .circular-progress svg {
    transform: rotate(-90deg);
    width: 80px;
    height: 80px;
}
.iching-loading .circular-progress .bg-circle {
    fill: none;
    stroke: rgba(var(--rgb-white), 0.1);
    stroke-width: 4;
}
.iching-loading .circular-progress .progress-circle {
    fill: none;
    stroke: var(--color-white);
    stroke-width: 4;
    stroke-linecap: round;
    transition: none;
}
.iching-loading .circular-progress .center-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-gold);
    font-family: 'BichaekHanja', 'Pretendard', sans-serif;
}
.iching-loading .loading-text {
    font-size: var(--fs-base);
    color: var(--color-white);
    margin-top: 8px;
    text-align: center;
}
.iching-result {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.iching-result .hexagram {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 4px;
    color: var(--color-gold);
}
.iching-result .hexagram-name {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-gold);
}
.iching-result .hexagram-desc {
    font-size: var(--fs-md);
    color: var(--color-text-sub);
    text-align: center;
    margin-top: 4px;
    line-height: 1.6;
}
.loading-bar-wrap {
    width: 100%;
    max-width: 200px;
    height: 6px;
    background: rgba(var(--rgb-white), 0.2);
    border-radius: 4px;
    overflow: hidden;
    margin: 10px auto;
}
.loading-bar-wrap .loading-bar {
    height: 100%;
    width: 0%;
    background: var(--color-white);
    border-radius: 4px;
    transition: width 0.05s linear;
}
.loading-text {
    font-size: var(--fs-base);
    color: var(--color-white);
    margin-top: 4px;
    text-align: center;
}
.qimen-result {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.qimen-result .qimen-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-gold);
    margin-bottom: 2px;
}
.qimen-result .qimen-desc {
    font-size: var(--fs-md);
    color: var(--color-text-sub);
    text-align: center;
    margin-top: 4px;
    line-height: 1.6;
}
.jami-result {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.jami-result .jami-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-gold);
    margin-bottom: 2px;
}
.jami-result .jami-desc {
    font-size: var(--fs-md);
    color: var(--color-text-sub);
    text-align: center;
    margin-top: 4px;
    line-height: 1.6;
}
.guide-text {
    font-size: var(--fs-base) !important;
    font-weight: 400 !important;
    color: var(--color-white) !important;
    text-align: center;
    letter-spacing: 0.3px;
    opacity: 1;
    text-shadow: 0 0 20px rgba(var(--rgb-gold), 0.1);
    background: rgba(var(--rgb-bg-deep), 0.92);
    padding: 12px 14px;
    border-radius: var(--radius-card);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.15);
    box-shadow: 0 4px 15px rgba(var(--rgb-black), 0.2);
    flex-shrink: 0;
}
.guide-text .highlight-yellow {
    color: var(--color-gold);
    font-weight: 700;
}
.guide-text .highlight-white {
    color: var(--color-white);
    font-weight: 700;
}
.spacer {
    flex: 1;
    min-height: 16px;
}
.fortune-main-tabs {
    display: flex;
    background: rgba(var(--rgb-bg-deep), 0.9);
    border-radius: var(--radius-card);
    padding: 4px;
    margin-bottom: 16px;
    flex-shrink: 0;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.15);
    height: 56px;
}
.main-tab-item {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: #C8D0D8;
    border-radius: var(--radius-input);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'BichaekHanja', 'Pretendard', sans-serif;
    gap: 6px;
}
.main-tab-item .inline-title-icon {
    margin-right: 0;
}
.main-tab-item.active {
    background: var(--color-gold);
    color: var(--color-bg-deep);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(var(--rgb-gold), 0.2);
}
.main-tab-item .tab-sub {
    font-weight: 400;
    opacity: 0.6;
    font-size: var(--fs-md);
}
.main-tab-item.active .tab-sub {
    opacity: 0.5;
    color: var(--color-bg-deep);
}
.fortune-tab-content {
    display: none;
    flex-direction: column;
    flex: 1;
}
.fortune-tab-content.active {
    display: flex;
}
.fortune-form-wrapper {
    background: rgba(var(--rgb-bg-deep), 0.92);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-section);
    padding: 16px 18px 14px 18px;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    box-shadow: 0 8px 30px rgba(var(--rgb-black), 0.3);
    flex-shrink: 0;
}
.form-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--rgb-gold-dim), 0.15);
}
.form-header .icon {
    font-size: var(--fs-2xl);
    display: flex;
    align-items: center;
}
.fortune-form-wrapper .form-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}
.fortune-form-wrapper .form-row label {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--color-text-sub);
    min-width: 40px;
    text-align: left;
    flex-shrink: 0;
}
.fortune-form-wrapper .form-row .gender-toggle {
    display: flex;
    gap: 2px;
    background: rgba(var(--rgb-black), 0.2);
    border-radius: var(--radius-control);
    padding: 2px;
    flex: 1;
}
.fortune-form-wrapper .form-row .gender-toggle button {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: 4px 10px;
    border-radius: var(--radius-chip);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    flex: 1;
    text-align: center;
    min-width: 40px;
}
.fortune-form-wrapper .form-row .gender-toggle button.active {
    background: var(--color-gold);
    color: var(--color-bg-deep);
}
.fortune-form-wrapper .form-row .calendar-toggle {
    display: flex;
    gap: 4px;
    background: rgba(var(--rgb-black), 0.2);
    border-radius: var(--radius-control);
    padding: 2px;
    flex: 1;
}
.fortune-form-wrapper .form-row .calendar-toggle button {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: 4px 10px;
    border-radius: var(--radius-chip);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    flex: 1;
    text-align: center;
}
.fortune-form-wrapper .form-row .calendar-toggle button.active {
    background: var(--color-gold);
    color: var(--color-bg-deep);
}
.fortune-form-wrapper .form-row .select-group {
    display: flex;
    gap: 2px;
    flex: 1;
    flex-wrap: nowrap;
}
.fortune-form-wrapper .form-row .select-group select {
    padding: 6px 4px;
    border-radius: var(--radius-input);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    background: rgba(var(--rgb-black), 0.3);
    color: var(--color-text-title);
    font-size: var(--fs-base);
    font-family: inherit;
    min-width: 0;
    flex: 0.7;
}
.fortune-form-wrapper .form-row .select-group select.year-select {
    flex: 1.1;
}
.fortune-form-wrapper .form-row .select-group select.hour-select {
    flex: 0.7;
}
.fortune-form-wrapper .form-row .select-group select:focus {
    outline: none;
    border-color: var(--color-gold);
}
.fortune-form-wrapper .form-row .select-group select option {
    background: #1A1A28;
    color: var(--color-text-title);
}
.fortune-form-wrapper .info-btn {
    background: rgba(var(--rgb-gold), 0.15);
    border: 1px solid rgba(var(--rgb-gold), 0.3);
    border-radius: var(--radius-pill);
    padding: 10px 24px;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-gold);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    display: block;
    margin: 12px auto 0 auto;
    min-width: 140px;
    text-align: center;
    min-height: 48px;
    width: 100%;
}
.fortune-form-wrapper .info-btn:active {
    transform: scale(0.96);
    background: rgba(var(--rgb-gold), 0.25);
}
.fortune-form-wrapper .info-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}
.fortune-form-wrapper .match-btn {
    background: rgba(var(--rgb-gold), 0.15) !important;
    border: 1px solid rgba(var(--rgb-gold), 0.3) !important;
    border-radius: var(--radius-pill) !important;
    padding: 10px 24px !important;
    font-size: var(--fs-lg) !important;
    font-weight: 600 !important;
    color: var(--color-gold) !important;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    display: block;
    margin: 12px auto 0 auto !important;
    min-width: 140px;
    text-align: center;
    min-height: 48px !important;
    width: 100%;
}
.fortune-form-wrapper .match-btn:active {
    transform: scale(0.96);
    background: rgba(var(--rgb-gold), 0.25) !important;
}
.dream-btn .coupon-text,
.match-btn .coupon-text,
.info-btn .coupon-text,
.lotto-form-area .form-btn .coupon-text {
    font-weight: 400;
    color: #B39700;
}
.info-loading {
    display: none;
    width: 100%;
    margin: 8px 0;
}
.info-loading .loading-bar-wrap {
    max-width: 200px;
    margin: 10px auto;
}
.form-guide {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: 10px;
}
/* ====== 운세 카드 통합 ====== */
.fortune-cards-wrapper {
    display: none;
    flex-direction: column;
    background: rgba(var(--rgb-bg-deep), 0.92);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-section);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    box-shadow: 0 8px 30px rgba(var(--rgb-black), 0.3);
    overflow: hidden;
    margin-bottom: 16px;
}
.fortune-cards-wrapper.show {
    display: flex;
}
.fortune-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(var(--rgb-gold-dim), 0.15);
    padding: 16px 18px;
    transition: all 0.2s;
    position: relative;
    margin-bottom: 0;
}
.fortune-card:last-child {
    border-bottom: none;
}
.fortune-card .card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.fortune-card .card-header .icon {
    font-size: var(--fs-2xl);
    display: flex;
    align-items: center;
}
.fortune-card .card-header .name {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-text-title);
    flex: 1;
    /* 카드 이름의 한자 유무에 따라 폴백 폰트가 달라져 줄 높이가 2px 흔들린다.
       운세·비책 카드 높이를 동일하게 유지하기 위해 양쪽 모두 같은 값으로 고정한다. */
    line-height: 20px;
}
.fortune-card .card-header .stars {
    font-size: var(--fs-md);
    color: var(--color-gold);
    letter-spacing: 1px;
    margin-right: 4px;
}
.fortune-card .card-header .lock {
    font-size: var(--fs-md);
    opacity: 0.4;
    color: var(--color-text-muted);
}
.fortune-card .card-preview {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-text-body);
    line-height: 1.6;
    padding-left: 30px;
    margin-bottom: 4px;
    min-height: 20px;
    white-space: pre-wrap;
    word-break: break-word;
}
.fortune-card .card-action {
    text-align: right;
    padding-left: 30px;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.fortune-card .card-action .card-action-btn {
    font-size: var(--fs-base);
    color: var(--color-gold-dim);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.fortune-card .card-action .card-action-btn:hover {
    opacity: 0.8;
}
.fortune-card .card-action .card-action-btn:active {
    opacity: 1;
}
.fortune-card.unlocked {
    border-color: rgba(var(--rgb-gold), 0.3);
}
.fortune-card.unlocked .card-preview {
    color: var(--color-gold);
}
.fortune-card.unlocked .card-action {
    color: #4CAF50;
    opacity: 0.8;
}
/* ====== 비책 카드 통합 ====== */
.bichaek-cards-wrapper {
    display: none;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
}
.bichaek-cards-wrapper.show {
    display: flex;
}
.bichaek-card {
    background: rgba(var(--rgb-bg-deep), 0.88);
    border-radius: var(--radius-card);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    padding: 12px 14px;
    flex-shrink: 0;
    transition: all 0.2s;
    position: relative;
    margin-bottom: 16px;
}
/* 로또 페이지의 비책 카드만, 바로 위 '생성하기' 박스(.lotto-generate-box, padding-top 20px)와
   타이틀 위쪽 여백을 동일하게 맞춘다. 늘어난 8px만큼 카드 높이도 함께 늘어난다.
   ※ @media (max-height:700px) 안에도 대응 규칙이 있으니 함께 유지할 것 */
#lotto-bichaek-card {
    padding-top: 20px;
}
/* 로또 비책 카드만 타이틀을 가로 중앙 정렬하고, 아이콘을 좌측 끝이 아니라 글자 바로 앞에 붙인다.
   .icon 의 margin-left:auto 와 .name 의 margin-right:auto 가 남는 여백을 정확히 반씩 나눠 가져
   [아이콘 + gap 6 + 글자] 묶음을 가운데로 밀어준다. 글자 길이가 바뀌어도 브라우저가 다시 계산하므로
   아이콘은 항상 글자에 붙어 있는다.
   padding-right 4px 는 아이콘(18px)과 자물쇠(14px)의 폭 차이를 보정해 글자 중심을 정중앙에 맞춘다.
   자물쇠는 레이아웃에 그대로 두어 제목이 길어져도 겹치지 않는다. */
#lotto-bichaek-card .card-header .icon {
    margin-left: auto;
}
#lotto-bichaek-card .card-header .name {
    flex: 0 1 auto;
    margin-right: auto;
    text-align: center;
    padding-right: 4px;
}
/* 잠금 상태의 안내 문구('OO님을 위한 금주의 로또 비책을 확인하세요')만 가로 중앙 정렬한다.
   text-align:center 이므로 닉네임 길이가 바뀌어도 브라우저가 남는 폭을 다시 계산해 항상 중앙을 유지한다.
   좌우 padding 을 4px 로 함께 고정하는 이유: @media (max-height:700px) 에서
   .bichaek-card .card-preview 의 padding-left 가 26px 로 바뀌는데, 그대로 두면 좌우 비대칭 때문에
   글자가 중앙에서 11px 밀린다.
   :not(.unlocked) 로 한정했으므로 잠금 해제 후(79~108자, 약 3줄 본문)에는 이 규칙이 아예 적용되지 않고
   기존 좌측 정렬과 기존 padding 이 그대로 유지된다. */
#lotto-bichaek-card:not(.unlocked) .card-preview {
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}
.bichaek-category-group {
    background: rgba(var(--rgb-bg-deep), 0.92);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-section);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    box-shadow: 0 8px 30px rgba(var(--rgb-black), 0.3);
    overflow: hidden;
    margin-bottom: 16px;
}
.bichaek-category-group .bichaek-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(var(--rgb-gold-dim), 0.15);
    padding: 16px 18px;
    margin-bottom: 0;
    border-radius: 0;
}
.bichaek-category-group .bichaek-card:last-child {
    border-bottom: none;
}
.bichaek-card .card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.bichaek-card .card-header .icon {
    font-size: var(--fs-2xl);
    display: flex;
    align-items: center;
}
.bichaek-card .card-header .name {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-text-title);
    flex: 1;
    /* 운세 카드(.fortune-card .card-header .name)와 반드시 같은 값을 유지할 것 */
    line-height: 20px;
}
.bichaek-card .card-header .bichaek-gauge {
    position: relative;
    width: 60px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #E74C3C, #F39C12, #F1C40F, #A6D854, #2ECC71);
    margin-right: 8px;
    flex-shrink: 0;
}
.bichaek-card .card-header .bichaek-gauge .bichaek-gauge-pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--color-white);
    transform: translateX(-50%);
    filter: drop-shadow(0 1px 1px rgba(var(--rgb-black), 0.4));
}
.bichaek-card .card-header .lock {
    font-size: var(--fs-md);
    opacity: 0.4;
    color: var(--color-text-muted);
}
.bichaek-card .card-preview {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-text-body);
    line-height: 1.6;
    padding-left: 4px;
    margin-bottom: 4px;
    min-height: 20px;
    white-space: pre-wrap;
    word-break: break-word;
}
.bichaek-card .card-action {
    text-align: right;
    padding-left: 30px;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.bichaek-card .card-action .card-action-btn {
    font-size: var(--fs-base);
    color: var(--color-gold-dim);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.bichaek-card .card-action .card-action-btn:hover {
    opacity: 0.8;
}
.bichaek-card .card-action .card-action-btn:active {
    opacity: 1;
}
.bichaek-card.unlocked {
    border-color: rgba(var(--rgb-gold), 0.3);
}
.bichaek-card.unlocked .card-preview {
    color: var(--color-gold);
}
.bichaek-card.unlocked .card-action {
    color: #4CAF50;
    opacity: 0.8;
}
.bichaek-card .lotto-note {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 8px;
    border-top: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    padding-top: 10px;
    display: none;
}
.bichaek-card.unlocked .lotto-note {
    display: block;
}
.bichaek-category-title {
    display: none;
}
.section-divider {
    border-top: 1px solid rgba(var(--rgb-gold-dim), 0.1);
    margin: 10px 0 10px 0;
    padding-top: 6px;
}
.section-divider .divider-label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    font-weight: 500;
    display: block;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
.match-result-item {
    background: rgba(var(--rgb-bg-deep), 0.88);
    border-radius: var(--radius-button);
    padding: 10px 14px;
    min-height: 20px;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.06);
    margin-top: 8px;
}
.match-result-item .match-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.match-result-item .match-header .icon {
    font-size: var(--fs-2xl);
    display: flex;
    align-items: center;
}
.match-result-item .match-header .name {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-text-title);
    flex: 1;
}
.match-result-item .match-header .lock {
    font-size: var(--fs-md);
    opacity: 0.4;
    color: var(--color-text-muted);
}
.match-result-item .match-msg {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-gold);
    line-height: 1.6;
    padding-left: 30px;
    word-break: break-word;
}
/* ====== LOTTO ====== */
.lotto-page {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.lotto-card {
    background: rgba(var(--rgb-bg-deep), 0.92);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-box);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    padding: 20px 18px 18px 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(var(--rgb-black), 0.2);
    margin-bottom: 16px;
}
.lotto-card .lotto-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
}
.lotto-card .lotto-header .title {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-white);
    display: flex;
    align-items: center;
    gap: 6px;
}
.lotto-card .lotto-header .title .highlight {
    color: var(--color-gold);
}
.lotto-numbers {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 12px 0;
}
.lotto-ball {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-circle);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(var(--rgb-black), 0.4);
    box-shadow: inset -2px -2px 6px rgba(var(--rgb-black), 0.3), inset 2px 2px 6px rgba(var(--rgb-white), 0.15);
    flex-shrink: 0;
    transition: background 0.1s;
}
.lotto-ball.range1 {
    background: #E8941E;
}
.lotto-ball.range2 {
    background: #2E7DB5;
}
.lotto-ball.range3 {
    background: #C62828;
}
.lotto-ball.range4 {
    background: #757575;
}
.lotto-ball.range5 {
    background: #5D9B2A;
}
.lotto-ball.placeholder {
    background: rgba(var(--rgb-white), 0.15);
    box-shadow: inset -2px -2px 6px rgba(var(--rgb-black), 0.15), inset 2px 2px 6px rgba(var(--rgb-white), 0.1);
}
.lotto-note {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 8px;
    border-top: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    padding-top: 10px;
}
.lotto-info {
    background: rgba(var(--rgb-black), 0.2);
    border-radius: var(--radius-button);
    padding: 12px 16px;
    margin-top: 10px;
}
.lotto-info .row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: var(--fs-base);
    color: var(--color-text-sub);
}
.lotto-info .row .label {
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
}
.lotto-info .row .label .icon-img {
    width: 13px;
    height: 13px;
    margin-right: 6px;
}
.lotto-info .row .value {
    color: var(--color-gold);
    font-weight: 600;
}
.lotto-generate-box {
    background: rgba(var(--rgb-bg-deep), 0.92);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    border-radius: var(--radius-box);
    /* 아래 17px: 볼 행(.lotto-set-item)이 자체 padding-bottom 4px를 갖고 있어,
       4 + 17 + 테두리 1 = 22px 로 상단 여백(테두리 1 + padding 20 + 1 = 22px)과 정확히 대칭이 된다 */
    padding: 20px 16px 17px 16px;
    margin-top: 0;
    margin-bottom: 16px;
    box-shadow: 0 4px 15px rgba(var(--rgb-black), 0.2);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: auto;
}
.lotto-generate-box .inner-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 14px;
}
.lotto-generate-box .left-icon {
    font-size: var(--fs-3xl);
    flex-shrink: 0;
    margin-right: 10px;
}
.lotto-generate-box .text-group {
    flex: 1;
    text-align: center;
}
.lotto-generate-box .text-group .main-text {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.4;
}
.lotto-generate-box .text-group .main-text .icon-img {
    vertical-align: middle;
}
.lotto-generate-box .text-group .main-text .highlight {
    color: var(--color-gold);
}
.lotto-generate-box .text-group .sub-text {
    font-size: var(--fs-xs);
    color: var(--color-white);
    margin-top: 2px;
    display: block;
}
.lotto-generate-box .right-icon {
    font-size: var(--fs-xl);
    flex-shrink: 0;
    margin-left: 10px;
    opacity: 0.5;
    color: var(--color-text-muted);
}
.lotto-form-area {
    width: 100%;
    padding-top: 10px;
    border-top: none;
}
.lotto-form-area .form-guide {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: 8px;
}
.lotto-form-area .form-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.lotto-form-area .form-row label {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--color-text-sub);
    min-width: 40px;
    text-align: left;
    flex-shrink: 0;
}
.lotto-form-area .form-row .gender-toggle {
    display: flex;
    gap: 2px;
    background: rgba(var(--rgb-black), 0.2);
    border-radius: var(--radius-control);
    padding: 2px;
    flex: 1;
}
.lotto-form-area .form-row .gender-toggle button {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: 4px 10px;
    border-radius: var(--radius-chip);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    flex: 1;
    text-align: center;
    min-width: 40px;
}
.lotto-form-area .form-row .gender-toggle button.active {
    background: var(--color-gold);
    color: var(--color-bg-deep);
}
.lotto-form-area .form-row .calendar-toggle {
    display: flex;
    gap: 4px;
    background: rgba(var(--rgb-black), 0.2);
    border-radius: var(--radius-control);
    padding: 2px;
    flex: 1;
}
.lotto-form-area .form-row .calendar-toggle button {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: 4px 10px;
    border-radius: var(--radius-chip);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    flex: 1;
    text-align: center;
}
.lotto-form-area .form-row .calendar-toggle button.active {
    background: var(--color-gold);
    color: var(--color-bg-deep);
}
.lotto-form-area .form-row .select-group {
    display: flex;
    gap: 2px;
    flex: 1;
    flex-wrap: nowrap;
}
.lotto-form-area .form-row .select-group select {
    padding: 6px 4px;
    border-radius: var(--radius-input);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    background: rgba(var(--rgb-black), 0.3);
    color: var(--color-text-title);
    font-size: var(--fs-base);
    font-family: inherit;
    min-width: 0;
    flex: 0.7;
}
.lotto-form-area .form-row .select-group select.year-select {
    flex: 1.1;
}
.lotto-form-area .form-row .select-group select.hour-select {
    flex: 0.7;
}
.lotto-form-area .form-row .select-group select:focus {
    outline: none;
    border-color: var(--color-gold);
}
.lotto-form-area .form-row .select-group select option {
    background: #1A1A28;
    color: var(--color-text-title);
}
.lotto-form-area .form-btn {
    background: rgba(var(--rgb-gold), 0.15);
    border: 1px solid rgba(var(--rgb-gold), 0.3);
    border-radius: var(--radius-pill);
    padding: 10px 24px;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-gold);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    display: block;
    margin: 12px auto 0 auto;
    min-width: 140px;
    text-align: center;
    min-height: 48px;
    width: 100%;
}
.lotto-form-area .form-btn:active {
    transform: scale(0.96);
    background: rgba(var(--rgb-gold), 0.25);
}
.lotto-form-area .form-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}
#lotto-result-container {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: none;
    overflow: visible;
    min-height: auto;
}
.lotto-set-item {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 6px;
}
.lotto-set-item .lotto-ball {
    width: 38px;
    height: 38px;
    font-size: var(--fs-xl);
}
.lotto-more-hint {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 4px;
}
/* ====== DREAM (도구) ====== */
.dream-page {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.dream-form-wrapper {
    background: rgba(var(--rgb-bg-deep), 0.92);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-section);
    padding: 18px 18px 16px 18px;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    box-shadow: 0 8px 30px rgba(var(--rgb-black), 0.3);
    flex-shrink: 0;
}
.dream-form-wrapper .dream-guide {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-text-body);
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.6;
}
.dream-form-wrapper .dream-input-wrap {
    margin-bottom: 10px;
}
.dream-form-wrapper .dream-input-wrap textarea {
    width: 100%;
    height: 80px;
    padding: 10px 12px;
    border-radius: var(--radius-button);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    background: rgba(var(--rgb-black), 0.3);
    color: var(--color-text-title);
    font-size: var(--fs-md);
    font-family: inherit;
    resize: none;
    line-height: 1.6;
    transition: border-color 0.2s;
}
.dream-form-wrapper .dream-input-wrap textarea:focus {
    outline: none;
    border-color: var(--color-gold);
}
.dream-form-wrapper .dream-input-wrap textarea::placeholder {
    color: #5A6A7A;
}
.dream-form-wrapper .dream-char-count {
    text-align: right;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-top: 4px;
}
.dream-form-wrapper .dream-char-count .count-num {
    font-weight: 600;
}
.dream-form-wrapper .dream-char-count .count-num.over {
    color: #E84342;
}
.dream-form-wrapper .dream-btn {
    background: rgba(var(--rgb-gold), 0.15);
    border: 1px solid rgba(var(--rgb-gold), 0.3);
    border-radius: var(--radius-pill);
    padding: 10px 24px;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-gold);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    display: block;
    margin: 12px auto 0 auto;
    min-width: 140px;
    text-align: center;
    min-height: 48px;
    width: 100%;
}
.dream-form-wrapper .dream-btn:active {
    transform: scale(0.96);
    background: rgba(var(--rgb-gold), 0.25);
}
.dream-form-wrapper .dream-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}
.dream-loading {
    display: none;
    width: 100%;
    margin-bottom: 8px;
}
.dream-loading .loading-bar-wrap {
    max-width: 200px;
    margin: 10px auto;
}
.dream-result-area {
    background: rgba(var(--rgb-bg-deep), 0.88);
    border-radius: var(--radius-card);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    padding: 12px 14px;
    min-height: 20px;
    margin-top: 0;
    margin-bottom: 16px;
    display: none;
    flex-direction: column;
    gap: 6px;
}
.dream-result-area.show {
    display: flex;
}
.dream-result-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.dream-result-title .icon {
    font-size: var(--fs-2xl);
    display: flex;
    align-items: center;
}
.dream-result-title .name {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-text-title);
    flex: 1;
}
.dream-result-title .lock {
    font-size: var(--fs-md);
    opacity: 0.4;
    color: var(--color-text-muted);
}
.dream-result-area .dream-result-text {
    font-size: var(--fs-md);
    color: var(--color-gold);
    line-height: 1.6;
    padding-left: 30px;
    word-break: break-word;
}
/* ====== 부적 (AMULET) - 최종 수정: 탭 위치/크기 완전 해결 ====== */
.amulet-page {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 통합 헤더 + 탭 - 좌우 패딩 제거로 탭이 콘텐츠 영역에 꽉 차도록 */
.amulet-header-unified {
    background: rgba(var(--rgb-bg-deep), 0.92);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-section);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    box-shadow: 0 8px 30px rgba(var(--rgb-black), 0.3);
    padding: 6px 0 0 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
}
.amulet-header-unified .amulet-sub {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-text-sub);
    padding: 0 18px;
    line-height: 1.8;
}
.amulet-header-unified .amulet-coupon-notice {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--color-gold);
    opacity: 0.8;
    margin-top: 2px;
    margin-bottom: 6px;
    padding: 0 18px;
    line-height: 1.8;
}
.phone.dark-mode .amulet-header-unified .amulet-sub {
    color: var(--color-text-sub);
}
.phone.dark-mode .amulet-header-unified .amulet-coupon-notice {
    color: var(--color-gold);
}

/* 통합 탭 - 운세/궁합 탭과 완전히 동일한 좌우 위치 및 너비 */
.amulet-tabs-unified {
    display: flex;
    background: rgba(var(--rgb-bg-deep), 0.9);
    border-radius: 0 0 14px 14px;
    padding: 4px;
    margin: 0;
    width: 100%;
    border: none;
    height: 56px;
    align-items: center;
}
.amulet-tab-item.unified {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: #C8D0D8;
    border-radius: 0 0 10px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'BichaekHanja', 'Pretendard', sans-serif;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.amulet-tab-item.unified.active {
    background: var(--color-gold);
    color: var(--color-bg-deep);
    box-shadow: 0 2px 10px rgba(var(--rgb-gold), 0.2);
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.amulet-tab-item.unified:first-child.active {
    border-radius: 0 0 0 10px;
}
.amulet-tab-item.unified:last-child.active {
    border-radius: 0 0 10px 0;
}

/* 일반 부적 그리드 - 간격 16px로 통일 */
.amulet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}
.amulet-item {
    background: rgba(var(--rgb-bg-deep), 0.88);
    border-radius: var(--radius-box);
    padding: 14px 12px 12px 12px;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.1);
    text-align: center;
    transition: all 0.2s;
    position: relative;
    cursor: pointer;
}
.amulet-item:active {
    transform: scale(0.97);
    background: rgba(var(--rgb-bg-deep), 0.95);
}
.amulet-item .amulet-icon {
    font-size: 38px;
    display: block;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 6px rgba(var(--rgb-gold-dim), 0.2));
}
.amulet-item .amulet-item-name {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-text-title);
    display: block;
}
.amulet-item .amulet-item-status {
    font-size: var(--fs-sm);
    color: var(--color-gold);
    display: block;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(var(--rgb-gold-dim), 0.08);
}
.amulet-item .amulet-item-status.locked {
    color: var(--color-text-muted);
}

/* 부적 탭 콘텐츠 전환 - 비활성 탭 완전히 숨김 (누락되어 있던 규칙, 간격 버그의 원인) */
.amulet-tab-content {
    display: none;
}
.amulet-tab-content.active {
    display: flex;
    flex-direction: column;
}

/* ====== 프리미엄 부적 ====== */
.amulet-premium-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.amulet-premium-box {
    border-radius: var(--radius-box);
    padding: 18px 16px 16px 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: none !important;
    box-shadow: inset 0 0 30px rgba(var(--rgb-black), 0.3);
}
.amulet-premium-box.daegil-box {
    background: linear-gradient(145deg, #CC0000, #8B0000);
}
.amulet-premium-box.mansa-box {
    background: linear-gradient(145deg, var(--color-gold), var(--color-gold-dark));
}

.amulet-premium-progress {
    background: rgba(var(--rgb-black), 0.4);
    border-radius: var(--radius-input);
    padding: 10px 14px;
    margin-bottom: 12px;
    position: relative;
}
.amulet-premium-progress .progress-lock-icon {
    position: absolute;
    top: 10px;
    right: 14px;
}
.amulet-premium-progress .progress-label {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.5;
    padding-right: 22px;
}
.amulet-premium-progress .progress-label .highlight {
    color: var(--color-gold);
}
.amulet-premium-progress .progress-label .sub-text {
    font-weight: 400;
    opacity: 0.8;
    font-size: var(--fs-sm);
}
.amulet-premium-progress .progress-track {
    width: 100%;
    height: 6px;
    background: rgba(var(--rgb-white), 0.15);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}
.amulet-premium-progress .progress-track .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold), #FF8C00);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}

.amulet-premium-card {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    padding: 6px 0;
}
.amulet-premium-card:active {
    transform: scale(0.97);
}
.amulet-premium-card .premium-image {
    width: 80%;
    max-width: 160px;
    height: auto;
    display: block;
    margin: 0 auto 8px auto;
    filter: drop-shadow(0 4px 20px rgba(var(--rgb-black), 0.4));
}
.amulet-premium-card .premium-name {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-white);
    text-shadow: 0 2px 8px rgba(var(--rgb-black), 0.5);
}
.amulet-premium-card .premium-status {
    font-size: var(--fs-md);
    font-weight: 600;
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    display: inline-block;
}
.amulet-premium-card .premium-status.locked {
    background: rgba(var(--rgb-black), 0.4);
    color: var(--color-white);
    font-size: var(--fs-sm);
    font-weight: 400;
    padding: 3px 10px;
}
.amulet-premium-card .premium-status.unlocked {
    background: rgba(var(--rgb-gold), 0.2);
    color: var(--color-gold);
    box-shadow: 0 0 20px rgba(var(--rgb-gold), 0.2);
}
.amulet-premium-card.locked {
    cursor: pointer;
}
.amulet-premium-card.locked .premium-image {
    filter: grayscale(0.6) brightness(0.7);
}
.amulet-premium-card.dev-unlocked {
    cursor: pointer;
}
.amulet-premium-card.dev-unlocked .premium-image {
    filter: grayscale(0.15) brightness(0.95);
}
.premium-dev-badge {
    margin-top: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #8AF7C0;
    background: rgba(52, 211, 153, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: var(--radius-pill);
    padding: 3px 12px;
    display: inline-block;
}

/* ====== 부적 상세 한자/닉네임 ====== */
.amulet-detail-hanja {
    font-size: 60px !important;
}
.amulet-detail-nickname {
    font-size: 40px;
}

/* ====== 공유 버튼 (경량화) ====== */
.share-btn-container {
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.share-btn-action {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: var(--fs-base) !important;
    font-weight: 400 !important;
    color: var(--color-gold-dim) !important;
    opacity: 0.5 !important;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.share-btn-action:hover {
    opacity: 0.8 !important;
}
.share-btn-action:active {
    opacity: 1 !important;
}
.share-btn-action .icon {
    font-size: var(--fs-md);
    display: flex;
    align-items: center;
}
.share-btn-action .icon .share-icon-img {
    width: 14px;
    height: 14px;
}

/* ====== 부적 상세 오버레이 ====== */
.amulet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--rgb-black), 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 20000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.amulet-overlay.active {
    display: flex;
}
.amulet-overlay-content {
    width: 100%;
    max-width: 360px;
    max-height: 92vh;
    max-height: 92dvh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(var(--rgb-bg-deep), 0.95);
    border-radius: 24px;
    padding: 24px 20px 20px 20px;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.15);
    box-shadow: 0 20px 60px rgba(var(--rgb-black), 0.8);
}
.amulet-close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: var(--fs-3xl);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 4px 8px;
    font-family: inherit;
}
.amulet-close-btn:hover {
    color: var(--color-white);
}
.amulet-detail-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.amulet-detail-name {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-gold);
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}
.amulet-detail-hologram-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-section);
    overflow: hidden;
    position: relative;
    background: #0B0B1A;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.15);
    margin-bottom: 14px;
    box-shadow: inset 0 0 40px rgba(var(--rgb-gold-dim), 0.03);
}
.amulet-detail-hologram-box.premium-ratio {
    aspect-ratio: 3 / 4;
}
.amulet-detail-hologram {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #151525, #0B0B1A);
}
.amulet-detail-hologram .hologram-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hologram-layer-bg {
    background: radial-gradient(circle at 25% 30%, var(--glow-color1, rgba(var(--rgb-gold), 0.35)), transparent 55%),
                radial-gradient(circle at 75% 70%, var(--glow-color2, rgba(255,20,147,0.28)), transparent 55%),
                radial-gradient(circle at 50% 85%, var(--glow-color3, rgba(139,0,255,0.22)), transparent 60%);
    animation: bgPulse 3.2s ease-in-out infinite alternate;
}
@keyframes bgPulse {
    0% { opacity: 0.65; transform: scale(1); filter: saturate(1); }
    100% { opacity: 1; transform: scale(1.08); filter: saturate(1.3); }
}
.hologram-layer-pattern {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hologram-layer-pattern svg {
    width: 100%;
    height: 100%;
}
.hologram-layer-shimmer {
    background: linear-gradient(105deg,
        transparent 20%,
        color-mix(in srgb, var(--glow-color1, var(--color-gold)) 60%, white 40%) 42%,
        rgba(var(--rgb-white), 0.55) 50%,
        color-mix(in srgb, var(--glow-color3, #FF1493) 60%, white 40%) 58%,
        transparent 80%);
    background-size: 300% 100%;
    mix-blend-mode: screen;
    opacity: 0.35;
    animation: shimmerMove 3.4s ease-in-out infinite;
}
@keyframes shimmerMove {
    0% { background-position: 220% 0; }
    100% { background-position: -220% 0; }
}
.hologram-layer-glow {
    background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), var(--glow-color3, rgba(var(--rgb-gold), 0.18)), transparent 55%);
    animation: glowMove 5s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}
@keyframes glowMove {
    0% { --glow-x: 20%; --glow-y: 30%; }
    50% { --glow-x: 80%; --glow-y: 70%; }
    100% { --glow-x: 35%; --glow-y: 20%; }
}
.hologram-layer-particles {
    overflow: hidden;
}
.particle {
    position: absolute;
    border-radius: var(--radius-circle);
    animation: particleFloat var(--duration, 5s) ease-in-out infinite alternate;
}
@keyframes particleFloat {
    0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    100% { transform: translate(var(--tx, 20px), var(--ty, -20px)) scale(1.5); opacity: 1; }
}
.amulet-detail-hologram.paused .hologram-layer-pattern svg {
    animation-play-state: paused;
}
.amulet-detail-hologram.paused .hologram-layer-shimmer {
    animation-play-state: paused;
}
.amulet-detail-hologram.paused .hologram-layer-glow {
    animation-play-state: paused;
}
.amulet-detail-hologram.paused .particle {
    animation-play-state: paused;
}
.amulet-detail-hologram.paused .hologram-layer-bg {
    animation-play-state: paused;
}
/* ====== 3D 메탈 골드 한자 (60px) ====== */
.amulet-detail-hanja {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) rotate(var(--rot, 0deg));
    font-size: 60px !important;
    font-weight: 800;
    font-family: 'BichaekHanja', 'Pretendard', sans-serif;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    z-index: 10;
    pointer-events: none;
    display: inline-block;
    will-change: transform, background-position;
    background: linear-gradient(
        var(--light-angle, 160deg),
        var(--color-cream) 0%,
        #F5E6A3 10%,
        #E8C84A 25%,
        var(--color-gold-dim) 40%,
        var(--color-gold-dark) 55%,
        var(--color-gold-dim) 70%,
        #F0D060 85%,
        var(--color-cream) 100%
    );
    background-size: 400% 400%;
    background-position: var(--light-pos, 50% 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow:
        0 1px 0 var(--color-gold-dark),
        0 2px 0 #A0700A,
        0 3px 0 #8B6508,
        0 4px 8px rgba(var(--rgb-black), 0.6),
        0 6px 16px rgba(var(--rgb-black), 0.4),
        0 10px 30px rgba(var(--rgb-gold-dim), 0.2);
    filter: drop-shadow(0 0 25px rgba(var(--rgb-gold-dim), 0.3)) drop-shadow(0 0 55px rgba(var(--rgb-gold-dim), 0.12));
}
.phone.dark-mode .amulet-detail-hanja {
    background: linear-gradient(
        var(--light-angle, 160deg),
        var(--color-cream) 0%,
        #F5E6A3 10%,
        #E8C84A 25%,
        var(--color-gold-dim) 40%,
        var(--color-gold-dark) 55%,
        var(--color-gold-dim) 70%,
        #F0D060 85%,
        var(--color-cream) 100%
    );
    background-size: 400% 400%;
    background-position: var(--light-pos, 50% 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow:
        0 1px 0 var(--color-gold-dark),
        0 2px 0 #A0700A,
        0 3px 0 #8B6508,
        0 4px 8px rgba(var(--rgb-black), 0.6),
        0 6px 16px rgba(var(--rgb-black), 0.4),
        0 10px 30px rgba(var(--rgb-gold-dim), 0.2);
    filter: drop-shadow(0 0 25px rgba(var(--rgb-gold-dim), 0.3)) drop-shadow(0 0 55px rgba(var(--rgb-gold-dim), 0.12));
}
/* ====== 닉네임 3D 메탈 골드 ====== */
.amulet-detail-nickname {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + var(--tx2, 0px)), calc(-50% + var(--ty2, 0px))) rotate(var(--rot2, 0deg));
    font-size: 40px;
    font-weight: 800;
    font-family: 'BichaekHanja', 'Pretendard', sans-serif;
    z-index: 20;
    pointer-events: none;
    display: inline-block;
    white-space: nowrap;
    will-change: transform, background-position;
    background: linear-gradient(
        var(--light-angle, 160deg),
        var(--color-cream) 0%,
        #F5E6A3 10%,
        #E8C84A 25%,
        var(--color-gold-dim) 40%,
        var(--color-gold-dark) 55%,
        var(--color-gold-dim) 70%,
        #F0D060 85%,
        var(--color-cream) 100%
    );
    background-size: 400% 400%;
    background-position: var(--light-pos, 50% 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow:
        0 1px 0 var(--color-gold-dark),
        0 2px 0 #A0700A,
        0 3px 0 #8B6508,
        0 4px 8px rgba(var(--rgb-black), 0.6),
        0 6px 16px rgba(var(--rgb-black), 0.4),
        0 10px 30px rgba(var(--rgb-gold-dim), 0.2);
    filter: drop-shadow(0 0 25px rgba(var(--rgb-gold-dim), 0.3)) drop-shadow(0 0 55px rgba(var(--rgb-gold-dim), 0.12));
    opacity: 0.95;
}
.phone.dark-mode .amulet-detail-nickname {
    background: linear-gradient(
        var(--light-angle, 160deg),
        var(--color-cream) 0%,
        #F5E6A3 10%,
        #E8C84A 25%,
        var(--color-gold-dim) 40%,
        var(--color-gold-dark) 55%,
        var(--color-gold-dim) 70%,
        #F0D060 85%,
        var(--color-cream) 100%
    );
    background-size: 400% 400%;
    background-position: var(--light-pos, 50% 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow:
        0 1px 0 var(--color-gold-dark),
        0 2px 0 #A0700A,
        0 3px 0 #8B6508,
        0 4px 8px rgba(var(--rgb-black), 0.6),
        0 6px 16px rgba(var(--rgb-black), 0.4),
        0 10px 30px rgba(var(--rgb-gold-dim), 0.2);
    filter: drop-shadow(0 0 25px rgba(var(--rgb-gold-dim), 0.3)) drop-shadow(0 0 55px rgba(var(--rgb-gold-dim), 0.12));
}

.amulet-detail-guide {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-text-sub);
    text-align: center;
    line-height: 1.7;
    margin: 0 0 6px 0;
    padding: 0 8px;
}
.amulet-detail-duration {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-gold);
    text-align: center;
    line-height: 1.6;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(var(--rgb-gold), 0.06);
    border-radius: var(--radius-input);
    border: 1px solid rgba(var(--rgb-gold), 0.08);
    width: 100%;
}
.amulet-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 12px;
}
.ctrl-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: all 0.2s;
    width: 24px;
    height: 24px;
    opacity: 0.6;
}
.ctrl-btn:hover {
    opacity: 1;
}
.ctrl-btn:active {
    transform: scale(0.85);
}
.ctrl-btn svg {
    width: 16px;
    height: 16px;
}
.amulet-timer-bar {
    width: 100%;
    height: 1px;
    background: rgba(var(--rgb-white), 0.15);
    border-radius: 1px;
    margin-top: 14px;
    overflow: hidden;
    position: relative;
}
.timer-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-gold), #FFA500);
    border-radius: 1px;
    transition: width 0.1s linear;
}

/* ====== 모달 레이아웃 (완전 복원) ====== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(var(--rgb-black), 0.7);
    backdrop-filter: blur(4px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.modal-overlay.active {
    display: flex;
}
/* 약관·개인정보처리방침은 앱 정보 / 회원가입 모달 위에서 열려야 하므로 한 단계 위로 올린다.
   (모든 모달이 z-index 10000으로 같아, DOM에서 뒤에 있는 앱 정보 모달이 약관을 덮는 문제) */
#legal-modal {
    z-index: 10001;
}
.modal-box {
    background: #1A1A28;
    border-radius: var(--radius-pill);
    padding: 24px 20px 20px 20px;
    max-width: 360px;
    width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    box-shadow: 0 20px 60px rgba(var(--rgb-black), 0.6);
    display: flex;
    flex-direction: column;
}
.modal-box .modal-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-gold);
    text-align: center;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.modal-box .modal-title .inline-title-icon {
    margin-right: 0;
}
.modal-box .modal-field {
    margin-bottom: 14px;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.modal-box .modal-field label {
    display: block;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--color-text-sub);
    margin-bottom: 4px;
}
.modal-box .modal-field input {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-input);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    background: rgba(var(--rgb-black), 0.3);
    color: var(--color-text-title);
    font-size: var(--fs-md);
    font-family: inherit;
}
.modal-box .modal-field input:focus {
    outline: none;
    border-color: var(--color-gold);
}
.modal-box .modal-field .char-limit {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
    text-align: right;
}
.modal-box .modal-field .char-limit.over {
    color: #E84342;
}
.modal-box .avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 4px;
}
.profile-pw-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    margin-top: 22px;
}
.profile-pw-links a {
    font-size: var(--fs-sm);
    color: var(--color-text-sub);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}
.profile-pw-links a:hover {
    opacity: 0.7;
}
.modal-box .avatar-grid .avatar-option {
    text-align: center;
    padding: 4px;
    border-radius: var(--radius-button);
    border: 2px solid transparent;
    cursor: pointer;
    transition: 0.2s;
    background: rgba(var(--rgb-white), 0.05);
}
.modal-box .avatar-grid .avatar-option img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-circle);
    display: block;
}
.modal-box .avatar-grid .avatar-option:active {
    transform: scale(0.9);
}
.modal-box .avatar-grid .avatar-option.selected {
    border-color: var(--color-gold);
    background: rgba(var(--rgb-gold), 0.15);
}
.modal-box .modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.modal-box .modal-actions button {
    flex: 1;
    padding: 10px 0;
    border-radius: var(--radius-button);
    border: none;
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: 0.2s;
}
.modal-box .modal-actions button:active {
    transform: scale(0.95);
}
.modal-box .modal-actions .btn-save {
    background: var(--color-gold);
    color: var(--color-bg-deep);
}
.modal-box .modal-actions .btn-cancel {
    background: rgba(var(--rgb-white), 0.1);
    color: var(--color-text-title);
}
/* ====== 사주/기간 선택 캘린더 위젯 ====== */
.fortune-form-wrapper .form-row.gender-cal-row,
.lotto-form-area .form-row.gender-cal-row,
.birth-sync-box .sync-form-row.gender-cal-row {
    align-items: center;
    gap: 26px;
}
.gender-cal-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.birth-picker-btn,
.date-range-picker-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 9px 10px;
    border-radius: var(--radius-input);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    background: rgba(var(--rgb-black), 0.3);
    color: var(--color-text-title);
    font-size: var(--fs-base);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: 0.2s;
    min-width: 0;
}
.birth-picker-btn .value,
.date-range-picker-btn .value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.birth-picker-btn:active,
.date-range-picker-btn:active {
    border-color: var(--color-gold);
    transform: scale(0.98);
}
.birth-picker-btn .cal-icon,
.date-range-picker-btn .cal-icon {
    font-size: var(--fs-md);
    flex-shrink: 0;
    opacity: 0.85;
}

/* 캘린더 모달 */
.cal-modal-box {
    max-width: 340px;
    padding: 18px 16px 16px 16px;
}
.cal-modal-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: #B8A97A;
    text-align: center;
    margin-bottom: 10px;
}
.cal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.cal-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    background: rgba(var(--rgb-white), 0.05);
    color: var(--color-gold);
    font-size: var(--fs-xl);
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cal-nav-btn:active { background: rgba(var(--rgb-gold), 0.15); }
.cal-header-label {
    background: transparent;
    border: none;
    color: var(--color-cream);
    font-size: 19px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius-control);
}
.cal-header-label:active { background: rgba(var(--rgb-gold), 0.12); }

.cal-body {
    height: 248px;
}
.cal-day-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.cal-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
    flex-shrink: 0;
}
.cal-weekday-row span {
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 4px 0;
}
.cal-weekday-row span.cal-sun { color: #E84342; }
.cal-weekday-row span.cal-sat { color: #4C9FDB; }
.cal-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 2px;
    flex: 1;
    align-items: center;
}
.cal-day-cell {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-circle);
    color: var(--color-text-title);
    font-size: var(--fs-base);
    font-family: inherit;
    cursor: pointer;
}
.cal-day-empty { cursor: default; }
.cal-day-cell.cal-day-sun { color: #E84342; }
.cal-day-cell.cal-day-sat { color: #4C9FDB; }
.cal-day-cell.cal-day-today { box-shadow: inset 0 0 0 1px var(--color-gold); }
.cal-day-cell.cal-day-disabled { color: #4A4A5A; cursor: not-allowed; }
.cal-day-cell:active:not(.cal-day-disabled):not(.cal-day-empty) { background: rgba(var(--rgb-gold), 0.15); }
.cal-day-cell.cal-day-selected { background: var(--color-gold); color: var(--color-bg-deep); font-weight: 700; }
.cal-day-cell.cal-day-selected.cal-day-sun,
.cal-day-cell.cal-day-selected.cal-day-sat { color: var(--color-bg-deep); }
.cal-day-cell.cal-day-inrange { background: rgba(var(--rgb-gold), 0.18); border-radius: var(--radius-chip); }

.cal-ym-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cal-back-btn {
    align-self: flex-start;
    flex-shrink: 0;
    height: 28px;
    display: flex;
    align-items: center;
    background: rgba(var(--rgb-white), 0.05);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.25);
    border-radius: var(--radius-control);
    color: var(--color-gold);
    font-size: var(--fs-base);
    font-weight: 600;
    font-family: inherit;
    padding: 0 12px;
    cursor: pointer;
}
.cal-back-btn:active { background: rgba(var(--rgb-gold), 0.15); }
.cal-ym-lists {
    display: flex;
    gap: 8px;
    flex: 1;
    min-height: 0;
}
.cal-year-list {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 2px;
}
.cal-year-item {
    background: transparent;
    border: none;
    border-radius: var(--radius-control);
    color: var(--color-text-sub);
    font-size: var(--fs-md);
    font-family: inherit;
    padding: 8px 0;
    cursor: pointer;
    flex-shrink: 0;
}
.cal-year-item.active { background: var(--color-gold); color: var(--color-bg-deep); font-weight: 700; }
.cal-month-grid {
    flex: 1;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 6px;
}
.cal-month-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: rgba(var(--rgb-black), 0.25);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.15);
    border-radius: var(--radius-control);
    color: var(--color-text-title);
    font-size: var(--fs-base);
    font-family: inherit;
    cursor: pointer;
}
.cal-month-item.active { background: var(--color-gold); color: var(--color-bg-deep); font-weight: 700; border-color: var(--color-gold); }

.cal-range-status {
    text-align: center;
    font-size: 12.5px;
    color: var(--color-text-sub);
    background: rgba(var(--rgb-black), 0.25);
    border-radius: var(--radius-control);
    padding: 8px 6px;
    margin-top: 22px;
}

.cal-hour-section { margin-top: 20px; }
.cal-hour-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.cal-hour-title { font-size: var(--fs-base); font-weight: 600; color: var(--color-text-sub); }
.cal-unknown-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    cursor: pointer;
}
.cal-unknown-toggle input { accent-color: var(--color-gold); }
.cal-hour-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 6px;
    height: 206px;
}
.cal-hour-chips.disabled { opacity: 0.35; pointer-events: none; }
.cal-hour-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: rgba(var(--rgb-black), 0.25);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.15);
    border-radius: var(--radius-control);
    color: var(--color-text-title);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
}
.cal-hour-chip.active { background: var(--color-gold); color: var(--color-bg-deep); font-weight: 700; border-color: var(--color-gold); }

.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
}
.terms-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-gold);
    margin-top: 2px;
    flex-shrink: 0;
}
.terms-check label {
    font-size: var(--fs-base);
    color: var(--color-text-body);
    line-height: 1.4;
    cursor: pointer;
}

/* ====== 알림 설정 ====== */
.notif-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(var(--rgb-gold-dim), 0.08);
}
.notif-item .notif-label {
    font-size: var(--fs-md);
    color: var(--color-text-title);
}
.switch-toggle {
    position: relative;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
}
.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch-toggle .slider {
    position: absolute;
    inset: 0;
    background: #333;
    border-radius: var(--radius-card);
    transition: 0.3s;
}
.switch-toggle .slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: var(--radius-circle);
    transition: 0.3s;
}
.switch-toggle input:checked + .slider {
    background: var(--color-gold);
}
.switch-toggle input:checked + .slider::before {
    transform: translateX(20px);
}

/* ====== 앱 평가하기 ====== */
.rating-guide {
    text-align: center;
    font-size: var(--fs-md);
    color: var(--color-text-body);
    line-height: 1.6;
    margin-bottom: 16px;
}
.rating-stars {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 36px;
    margin-bottom: 8px;
}
.rating-stars .star {
    cursor: pointer;
    color: #555;
    transition: 0.2s;
    user-select: none;
}
.rating-stars .star.active {
    color: var(--color-gold);
}
.rating-stars .star:hover {
    transform: scale(1.2);
}
.rating-score {
    text-align: center;
    font-size: var(--fs-md);
    color: var(--color-text-muted);
    margin-bottom: 12px;
}
.btn-store {
    background: rgba(100, 200, 255, 0.15);
    border: 1px solid rgba(100, 200, 255, 0.25);
    border-radius: var(--radius-button);
    padding: 10px 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: #80D0FF;
    cursor: pointer;
    font-family: inherit;
    transition: 0.2s;
    width: 100%;
    text-align: center;
}
.btn-store:active {
    transform: scale(0.95);
    background: rgba(100, 200, 255, 0.25);
}

/* ====== 앱 공유하기 ====== */
.share-link-box,
.share-message-box {
    margin-bottom: 12px;
}
.share-link-label {
    display: block;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--color-text-sub);
    margin-bottom: 4px;
}
.share-link-row {
    display: flex;
    gap: 6px;
}
.share-link-row input {
    flex: 1;
    padding: 8px 10px;
    border-radius: var(--radius-control);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    background: rgba(var(--rgb-black), 0.3);
    color: var(--color-text-title);
    font-size: var(--fs-sm);
    font-family: inherit;
}
.share-link-row input:focus {
    outline: none;
    border-color: var(--color-gold);
}
.btn-copy {
    padding: 8px 14px;
    border-radius: var(--radius-control);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    background: rgba(var(--rgb-gold), 0.1);
    color: var(--color-gold);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-base);
    transition: 0.2s;
    white-space: nowrap;
}
.btn-copy:active {
    transform: scale(0.95);
}
.share-message-box textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-control);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    background: rgba(var(--rgb-black), 0.3);
    color: var(--color-text-title);
    font-size: var(--fs-base);
    font-family: inherit;
    resize: none;
}
.share-message-box textarea:focus {
    outline: none;
    border-color: var(--color-gold);
}
.share-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px;
}
.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
    border-radius: var(--radius-input);
    border: none;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: 0.2s;
}
.share-btn:active {
    transform: scale(0.95);
}
.share-btn.kakao {
    background: #FEE500;
    color: #3C1E1E;
}
.share-btn.sms {
    background: #34B7F1;
    color: #fff;
}
.share-btn.email {
    background: #EA4335;
    color: #fff;
}
.share-btn.more {
    background: rgba(var(--rgb-white), 0.1);
    color: var(--color-text-title);
    border: 1px solid rgba(var(--rgb-white), 0.15);
}
.share-btn.more .icon-img {
    width: 14px;
    height: 14px;
    margin-right: 0;
}

/* ====== 1:1 문의 ====== */
#inquiry-modal select {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-input);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    background: rgba(var(--rgb-black), 0.3);
    color: var(--color-text-title);
    font-size: var(--fs-md);
    font-family: inherit;
}
#inquiry-modal select:focus {
    outline: none;
    border-color: var(--color-gold);
}
#inquiry-modal select option {
    background: #1A1A28;
    color: var(--color-text-title);
}
#inquiry-modal textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-input);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    background: rgba(var(--rgb-black), 0.3);
    color: var(--color-text-title);
    font-size: var(--fs-md);
    font-family: inherit;
    resize: none;
}
#inquiry-modal textarea:focus {
    outline: none;
    border-color: var(--color-gold);
}

/* ====== 앱 정보 ====== */
.appinfo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(var(--rgb-gold-dim), 0.06);
}
.appinfo-item .label {
    font-size: var(--fs-md);
    color: var(--color-text-body);
}
.appinfo-item .value {
    font-size: var(--fs-md);
    color: var(--color-text-title);
    font-weight: 500;
}
.appinfo-item.link {
    cursor: pointer;
    transition: 0.2s;
}
.appinfo-item.link:active {
    background: rgba(var(--rgb-gold), 0.05);
    border-radius: var(--radius-chip);
}
.appinfo-item.link .arrow {
    color: #5A5A6A;
    font-size: var(--fs-xl);
}
.appinfo-divider {
    height: 1px;
    background: rgba(var(--rgb-gold-dim), 0.08);
    margin: 6px 0;
}

/* ====== 택일 페이지 ====== */
.taegil-purpose-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
}
.taegil-purpose-btn {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--color-white);
    background: rgba(var(--rgb-white), 0.08);
    border: 1px solid rgba(var(--rgb-white), 0.12);
    border-radius: var(--radius-box);
    padding: 6px 0;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    text-align: center;
    min-height: 32px;
    white-space: nowrap;
}
.taegil-purpose-btn:hover {
    background: rgba(var(--rgb-gold), 0.15);
}
.taegil-purpose-btn.active {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-bg-deep);
    font-weight: 700;
}
.taegil-purpose-btn.active:hover {
    background: var(--color-gold);
}
input[type="date"] {
    background: rgba(var(--rgb-black), 0.3);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    border-radius: var(--radius-input);
    padding: 8px 10px;
    color: var(--color-text-title);
    font-family: 'BichaekHanja', 'Pretendard', sans-serif;
    font-size: var(--fs-base);
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
input[type="date"]:focus {
    outline: none;
    border-color: var(--color-gold);
}
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    cursor: pointer;
}
input[type="date"]::-webkit-datetime-edit {
    color: var(--color-text-title);
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    color: var(--color-text-title);
}
input[type="date"]::-webkit-datetime-edit-text {
    color: var(--color-text-muted);
}
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: var(--color-text-title);
}
input[type="date"]:invalid::-webkit-datetime-edit {
    color: #5A6A7A;
}
.taegil-result-item {
    background: rgba(var(--rgb-bg-deep), 0.88);
    border-radius: var(--radius-button);
    padding: 12px 16px;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.08);
}
.taegil-result-item .taegil-header {
    font-size: var(--fs-base);
    color: var(--color-text-body);
    margin-bottom: 8px;
    line-height: 1.6;
}
.taegil-result-item .taegil-header .highlight-yellow {
    color: var(--color-gold);
    font-weight: 700;
}
.taegil-result-item .taegil-date {
    font-size: var(--fs-md);
    color: var(--color-text-sub);
    padding: 4px 0;
    border-bottom: 1px solid rgba(var(--rgb-gold-dim), 0.06);
}
.taegil-result-item .taegil-date:last-child {
    border-bottom: none;
}
.taegil-result-item .taegil-date .rank {
    font-weight: 700;
    color: var(--color-gold);
    margin-right: 8px;
}
.taegil-result-item .taegil-date .day-of-week {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    margin-left: 4px;
}
.analysis-badge {
    display: block;
    background: rgba(var(--rgb-bg-deep), 0.7);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    border-radius: var(--radius-pill);
    padding: 8px 12px;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--color-text-body);
    text-align: center;
    margin: 6px 0 4px 0;
    letter-spacing: 0.2px;
    width: 100%;
}
.analysis-badge .highlight {
    color: var(--color-gold);
    font-weight: 700;
}

/* ====== 내정보 페이지 ====== */
.profile-card {
    background: rgba(var(--rgb-bg-deep), 0.88);
    border-radius: var(--radius-card);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-circle);
    background: linear-gradient(145deg, #1A2A4A, #0D1B3E);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--color-gold);
    flex-shrink: 0;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.15);
    cursor: pointer;
    transition: 0.2s;
    user-select: none;
}
.profile-avatar:active {
    transform: scale(0.9);
}
.profile-info {
    flex: 1;
}
.profile-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-title);
}
.profile-name .profile-hanja {
    font-size: var(--fs-md);
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 4px;
}
.profile-email {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-top: 1px;
}
.profile-edit-btn {
    background: rgba(var(--rgb-gold), 0.1);
    border: 1px solid rgba(var(--rgb-gold), 0.15);
    border-radius: var(--radius-box);
    padding: 6px 14px;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--color-gold);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    min-height: 36px;
    flex-shrink: 0;
}
.profile-edit-btn:active {
    transform: scale(0.95);
    background: rgba(var(--rgb-gold), 0.2);
}

.coupon-card {
    background: rgba(var(--rgb-bg-deep), 0.88);
    border-radius: var(--radius-card);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    padding: 14px 18px;
    flex-shrink: 0;
}
.coupon-card .coupon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--rgb-gold-dim), 0.08);
}
.coupon-card .coupon-header span {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-text-title);
    display: flex;
    align-items: center;
    gap: 6px;
}
.coupon-card .coupon-header span .inline-title-icon {
    margin-right: 0;
}}
.coupon-card .coupon-header .coupon-count-badge {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-gold);
}
.coupon-card .coupon-header .coupon-count-badge small {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--color-text-muted);
}
.coupon-card .purchase-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.coupon-card .purchase-item {
    display: grid;
    grid-template-columns: 55px 70px 1fr 42px;
    align-items: center;
    gap: 6px;
    background: rgba(var(--rgb-black), 0.2);
    border-radius: var(--radius-button);
    padding: 8px 14px;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    transition: 0.2s;
}
.coupon-card .purchase-item:active {
    transform: scale(0.98);
    background: rgba(var(--rgb-gold), 0.06);
}
.coupon-card .purchase-item .qty {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--color-gold);
    text-align: right;
    justify-self: end;
    flex-shrink: 0;
    min-width: 0;
}
.coupon-card .purchase-item .price {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--color-text-title);
    text-align: right;
    justify-self: end;
    flex-shrink: 0;
    min-width: 0;
}
.coupon-card .purchase-item .discount {
    font-size: var(--fs-sm);
    color: #4CAF50;
    font-weight: 600;
    text-align: center;
    justify-self: center;
    flex: 0;
    min-width: 0;
    white-space: nowrap;
}
.coupon-card .purchase-item .buy-btn {
    background: rgba(var(--rgb-gold), 0.15);
    border: 1px solid rgba(var(--rgb-gold), 0.3);
    border-radius: var(--radius-button);
    padding: 6px 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-gold);
    cursor: pointer;
    font-family: inherit;
    min-height: 32px;
    flex-shrink: 0;
    transition: 0.2s;
    width: 100%;
    text-align: center;
    min-width: 0;
}
.coupon-card .purchase-item .buy-btn:active {
    transform: scale(0.95);
    background: rgba(var(--rgb-gold), 0.25);
}

.menu-group {
    background: rgba(var(--rgb-bg-deep), 0.88);
    border-radius: var(--radius-card);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    overflow: hidden;
    flex-shrink: 0;
    padding: 14px 16px;
}
.menu-group .menu-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 10px 0;
    border-bottom: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    margin-bottom: 12px;
}
.menu-group .menu-header .icon {
    font-size: var(--fs-xl);
    display: flex;
    align-items: center;
}
.menu-group .menu-header .title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-text-title);
}
.menu-group .menu-item {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(var(--rgb-black), 0.2);
    border-radius: var(--radius-button);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    margin-bottom: 6px;
    margin-left: 0;
    margin-right: 0;
    transition: all 0.15s;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--color-text-title);
    min-height: 44px;
    cursor: pointer;
}
.menu-group .menu-item:last-child {
    margin-bottom: 0;
}
.menu-group .menu-item:active {
    transform: scale(0.98);
    background: rgba(var(--rgb-gold), 0.06);
}
.menu-group .menu-item .menu-icon {
    font-size: var(--fs-2xl);
    text-align: center;
    opacity: 0.7;
    justify-self: center;
}
.menu-group .menu-item .menu-arrow {
    font-size: var(--fs-xl);
    color: #5A5A6A;
    justify-self: end;
}
.menu-group .menu-item .menu-toggle {
    justify-self: end;
    position: relative;
    width: 44px;
    height: 24px;
    background: #333;
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}
.menu-group .menu-item .menu-toggle.active {
    background: var(--color-gold);
}
.menu-group .menu-item .menu-toggle .knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: var(--radius-circle);
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(var(--rgb-black), 0.2);
}
.menu-group .menu-item .menu-toggle.active .knob {
    transform: translateX(20px);
}

.birth-sync-box {
    background: rgba(var(--rgb-bg-deep), 0.88);
    border-radius: var(--radius-card);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    padding: 14px 18px;
    flex-shrink: 0;
}
.birth-sync-box .sync-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-text-title);
    margin-bottom: 6px;
}
.birth-sync-box .sync-title .inline-title-icon {
    margin-right: 0;
}
.birth-sync-box .sync-desc {
    font-size: var(--fs-sm);
    /* 저장된 정보가 있을 때만 updateBirthDesc() 가 노란색(var(--color-gold))으로 덮어쓴다 */
    color: var(--color-text-body);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 8px;
    background: rgba(var(--rgb-black), 0.2);
    padding: 6px 10px;
    border-radius: var(--radius-control);
}
.birth-sync-box .sync-form-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}
.birth-sync-box .sync-form-row label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text-sub);
    min-width: 40px;
    text-align: left;
    flex-shrink: 0;
}
.birth-sync-box .sync-form-row .gender-toggle {
    display: flex;
    gap: 2px;
    background: rgba(var(--rgb-black), 0.2);
    border-radius: var(--radius-control);
    padding: 2px;
    flex: 1;
}
.birth-sync-box .sync-form-row .gender-toggle button {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: 4px 10px;
    border-radius: var(--radius-chip);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    flex: 1;
    text-align: center;
}
.birth-sync-box .sync-form-row .gender-toggle button.active {
    background: var(--color-gold);
    color: var(--color-bg-deep);
}
.birth-sync-box .sync-form-row .calendar-toggle {
    display: flex;
    gap: 4px;
    background: rgba(var(--rgb-black), 0.2);
    border-radius: var(--radius-control);
    padding: 2px;
    flex: 1;
}
.birth-sync-box .sync-form-row .calendar-toggle button {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: 4px 10px;
    border-radius: var(--radius-chip);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    flex: 1;
    text-align: center;
}
.birth-sync-box .sync-form-row .calendar-toggle button.active {
    background: var(--color-gold);
    color: var(--color-bg-deep);
}
.birth-sync-box .sync-form-row .select-group {
    display: flex;
    gap: 2px;
    flex: 1;
    flex-wrap: nowrap;
}
.birth-sync-box .sync-form-row .select-group select {
    padding: 4px 3px;
    border-radius: var(--radius-control);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    background: rgba(var(--rgb-black), 0.3);
    color: var(--color-text-title);
    font-size: var(--fs-sm);
    font-family: inherit;
    min-width: 0;
    flex: 0.7;
}
.birth-sync-box .sync-form-row .select-group select.year-select {
    flex: 1.1;
}
.birth-sync-box .sync-form-row .select-group select.hour-select {
    flex: 0.7;
}
.birth-sync-box .sync-form-row .select-group select:focus {
    outline: none;
    border-color: var(--color-gold);
}
.birth-sync-box .sync-form-row .select-group select option {
    background: #1A1A28;
    color: var(--color-text-title);
}
.birth-sync-box .sync-save-btn {
    background: rgba(var(--rgb-gold), 0.15);
    border: 1px solid rgba(var(--rgb-gold), 0.3);
    border-radius: var(--radius-button);
    padding: 6px 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-gold);
    cursor: pointer;
    font-family: inherit;
    transition: 0.2s;
    width: 100%;
    margin-top: 6px;
    min-height: 36px;
}
.birth-sync-box .sync-save-btn:active {
    transform: scale(0.95);
    background: rgba(var(--rgb-gold), 0.25);
}
.birth-sync-box .sync-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-text-title);
    font-size: var(--fs-base);
    cursor: pointer;
    margin-top: 12px;
    margin-bottom: 4px;
}
.birth-sync-box .sync-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-gold);
    cursor: pointer;
}
.birth-sync-box .sync-status {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-top: 4px;
    text-align: center;
    width: 100%;
}

.dev-board {
    background: rgba(var(--rgb-bg-deep), 0.88);
    border-radius: var(--radius-card);
    border: 1px solid rgba(255, 100, 100, 0.2);
    padding: 14px 18px;
    flex-shrink: 0;
}
.dev-board .dev-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dev-board .dev-header .dev-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: #FF6B6B;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dev-board .dev-toggle {
    position: relative;
    width: 48px;
    height: 28px;
    background: #333;
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}
.dev-board .dev-toggle.active {
    background: var(--color-gold);
}
.dev-board .dev-toggle .knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: var(--radius-circle);
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(var(--rgb-black), 0.2);
}
.dev-board .dev-toggle.active .knob {
    transform: translateX(20px);
}
.dev-board .dev-desc {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-top: 6px;
}
.dev-board .dev-charge {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.dev-board .dev-charge span {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.dev-board .dev-charge .charge-btn {
    background: rgba(100,200,255,0.1);
    border: 1px solid rgba(100,200,255,0.25);
    border-radius: var(--radius-button);
    padding: 4px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #80D0FF;
    cursor: pointer;
    font-family: inherit;
    transition: 0.2s;
    min-height: 30px;
}
.dev-board .dev-charge .charge-btn:active {
    transform: scale(0.95);
    background: rgba(100,200,255,0.2);
}

/* ====== 로그인 ====== */
.login-section {
    background: rgba(var(--rgb-bg-deep), 0.88);
    border-radius: var(--radius-card);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    padding: 16px 18px;
    flex-shrink: 0;
}
.login-section .login-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-text-title);
    margin-bottom: 10px;
    text-align: center;
}
.login-section .social-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    justify-content: center;
    margin-bottom: 8px;
}
.login-section .social-btns button {
    width: 100%;
    padding: 8px 0;
    border-radius: var(--radius-button);
    border: none;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: 0.2s;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.login-section .social-btns button:active {
    transform: scale(0.95);
}
.login-section .social-btns .btn-google {
    background: var(--color-white);
    color: #333;
}
.login-section .social-btns .btn-google svg {
    width: 18px;
    height: 18px;
}
.login-section .social-btns .btn-naver {
    background: #03C75A;
    color: #fff;
}
.login-section .social-btns .btn-naver svg {
    width: 18px;
    height: 18px;
}
.login-section .social-btns .btn-kakao {
    background: #FEE500;
    color: #3C1E1E;
}
.login-section .social-btns .btn-kakao svg {
    width: 18px;
    height: 18px;
}
.login-section .social-btns .btn-apple {
    background: var(--color-white);
    color: #000000;
    border: 1px solid #d1d1d6;
}
.login-section .social-btns .btn-apple svg {
    width: 18px;
    height: 18px;
}
.login-section .login-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}
.login-section .login-divider hr {
    flex: 1;
    border: none;
    border-top: 1px solid rgba(var(--rgb-gold-dim), 0.15);
}
.login-section .login-divider span {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}
.login-section .login-email-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.login-section .login-email-form input {
    padding: 8px 10px;
    border-radius: var(--radius-input);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.2);
    background: rgba(var(--rgb-black), 0.3);
    color: var(--color-text-title);
    font-size: var(--fs-base);
    font-family: inherit;
}
.login-section .login-email-form input:focus {
    outline: none;
    border-color: var(--color-gold);
}
.login-section .login-email-form .login-submit {
    background: rgba(var(--rgb-gold), 0.15);
    border: 1px solid rgba(var(--rgb-gold), 0.3);
    border-radius: var(--radius-button);
    padding: 8px 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-gold);
    cursor: pointer;
    font-family: inherit;
    transition: 0.2s;
}
.login-section .login-email-form .login-submit:active {
    transform: scale(0.95);
    background: rgba(var(--rgb-gold), 0.25);
}
.password-wrapper {
    position: relative;
    width: 100%;
}
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    width: 100%;
    padding-right: 44px;
}
.password-wrapper .pw-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    border-radius: var(--radius-circle);
    width: 32px;
    height: 32px;
}
.password-wrapper .pw-toggle-btn:hover {
    color: var(--color-gold);
}
.password-wrapper .pw-toggle-btn:active {
    transform: translateY(-50%) scale(0.9);
}
.login-links {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    font-size: var(--fs-base);
}
.login-links a {
    color: var(--color-gold-dim);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}
.login-links a:hover {
    opacity: 0.7;
}
.login-links .divider {
    color: #5A5A6A;
}

/* ====== 로그아웃 버튼 ====== */
.logout-btn-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 16px;
    text-align: center;
    background: rgba(var(--rgb-bg-deep), 0.88);
    border: 1px solid rgba(var(--rgb-gold-dim), 0.08);
    border-radius: var(--radius-button);
    font-size: var(--fs-base);
    font-weight: 500;
    color: #FF6B6B;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    flex-shrink: 0;
    min-height: 48px;
    margin: 16px 0;
}
.logout-btn-bottom .inline-title-icon {
    margin-right: 0;
}
.logout-btn-bottom:active {
    transform: scale(0.98);
    background: rgba(255, 0, 0, 0.05);
}

/* ====== BOTTOM TAB ====== */
.bottom-tab {
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 0;
    border-top: 1px solid rgba(var(--rgb-gold-dim), 0.15);
    background: rgba(var(--rgb-bg-deep), 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink: 0;
    height: 60px;
    margin-top: 4px;
    border-radius: 0 0 0 0;
    position: sticky;
    bottom: 0;
    z-index: 100;
    gap: 0;
}
.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 0;
    transition: all 0.2s;
    flex: 1;
    min-height: 60px;
    background: transparent;
    border: none;
    max-width: 80px;
    position: relative;
}
.tab-item .tab-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.3s;
    font-size: var(--fs-2xl);
    line-height: 1;
}
.tab-item .tab-icon svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s;
    stroke-width: 2;
}
.tab-item .tab-label {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--color-text-muted);
    transition: all 0.2s;
    line-height: 1.2;
    letter-spacing: 0.2px;
}
.tab-item.active {
    background: linear-gradient(180deg, rgba(var(--rgb-gold), 0.25) 0%, rgba(var(--rgb-gold), 0.05) 100%);
}
.tab-item.active .tab-label {
    color: var(--color-white);
    font-weight: 700 !important;
}
.tab-item.active .tab-icon {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(var(--rgb-gold), 0.5));
}
.tab-item.active .tab-icon svg {
    stroke-width: 3;
    transform: scale(1.1);
}
.tab-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.5px;
    background: var(--color-gold);
    box-shadow: 0 0 4px rgba(var(--rgb-gold), 0.3);
    border-radius: 1px;
}
.tab-item:first-child .tab-icon svg {
    stroke: #E84342 !important;
}
.tab-item:first-child.active .tab-icon svg {
    stroke: #E84342 !important;
}

/* ====== 토스트 컨테이너 ====== */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30001;
    width: 90%;
    max-width: 360px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.toast-msg {
    background: rgba(var(--rgb-bg-deep), 0.95);
    backdrop-filter: blur(8px);
    color: var(--color-text-title);
    padding: 12px 20px;
    border-radius: var(--radius-card);
    border: 1px solid rgba(var(--rgb-gold), 0.3);
    box-shadow: 0 8px 30px rgba(var(--rgb-black), 0.5);
    font-size: var(--fs-md);
    font-weight: 500;
    text-align: center;
    width: 100%;
    pointer-events: auto;
    animation: slideUp 0.3s ease-out;
    transition: opacity 0.3s;
}
.toast-msg.success {
    border-color: #4CAF50;
}
.toast-msg.error {
    border-color: #E84342;
}
.toast-msg.info {
    border-color: #4C9FDB;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====== 자미두수 카드 전용 테마 (옵시디언 블랙골드) ====== */
.premium-card {
    background: #121212 !important;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.35) !important;
    box-shadow: 0 8px 30px rgba(var(--rgb-black), 0.6) !important;
}
.premium-card .header .icon-wrap {
    color: var(--color-gold-dim) !important;
}
.premium-card .header .title {
    color: var(--color-text-title) !important;
}
.premium-card .header .badge {
    background: rgba(var(--rgb-gold-dim), 0.12) !important;
    color: var(--color-gold-dim) !important;
}
.premium-card .desc {
    color: #B8A97A !important;
}
.premium-card .display-area {
    background: #000000 !important;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.15) !important;
}
.premium-card .action-btn {
    background: transparent !important;
    border: 1px solid rgba(var(--rgb-gold-dim), 0.3) !important;
    color: var(--color-gold-dim) !important;
}
.premium-card .action-btn:active {
    background: rgba(var(--rgb-gold-dim), 0.12) !important;
}
.premium-card .coupon-only-badge {
    color: var(--color-gold-dim) !important;
    background: transparent !important;
    border-radius: var(--radius-pill);
    padding: 4px 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: -4px auto 10px auto;
}
/* 결과 영역 색상 — 어느 카드가 유료가 되든 대응하도록 두 구조 모두 지정 */
.premium-card .qimen-result .qimen-title,
.premium-card .jami-result .jami-title {
    color: var(--color-text-title) !important;
}
.premium-card .qimen-result .qimen-desc,
.premium-card .jami-result .jami-desc {
    color: #B8A97A !important;
}

/* ====== 반응형 ====== */
@media (max-width:400px) {
    .phone { width: 100%; border-radius: 0; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; }
    .phone::before, .phone::after { border-radius: 0; }
    .bottom-tab { border-radius: 0; height: 56px; }
    .tab-item .tab-label { font-size: var(--fs-sm); }
    .tab-item .tab-icon { width: 18px; height: 18px; }
    .tab-item .tab-icon svg { width: 16px; height: 16px; }
    .lotto-ball { width: 34px; height: 34px; font-size: var(--fs-md); }
    .lotto-set-item .lotto-ball { width: 34px; height: 34px; font-size: var(--fs-md); }
    .divination-card .header .icon-wrap { width: 20px; height: 20px; font-size: var(--fs-2xl); }
    .fortune-form-wrapper .form-row select { font-size: var(--fs-sm); padding: 6px 2px; }
    .birth-picker-btn, .date-range-picker-btn { font-size: var(--fs-sm); padding: 8px 10px; }
    .cal-body { height: 224px; }
    .cal-hour-chips { height: 182px; }
    .cal-day-cell { width: 26px; height: 26px; font-size: var(--fs-sm); }
    .cal-hour-chip { font-size: var(--fs-xs); }
    .app-icon-box { width: 40px; height: 40px; }
    .app-title-main { font-size: 16.5px; }
    .app-title-main .sub { font-size: 16.5px; }
    .app-title-sub { font-size: var(--fs-xs); }
    .fortune-form-wrapper .form-row label { min-width: 36px; font-size: var(--fs-sm); }
    .fortune-form-wrapper .form-row { gap: 3px; }
    .main-tab-item { font-size: var(--fs-md); }
    .fortune-form-wrapper .form-row .gender-toggle button { padding: 2px 8px; font-size: var(--fs-sm); min-width: 32px; }
    .fortune-form-wrapper .form-row .calendar-toggle button { padding: 2px 8px; font-size: var(--fs-sm); min-width: 32px; }
    .lotto-form-area .form-row label { min-width: 36px; font-size: var(--fs-sm); }
    .lotto-form-area .form-row .gender-toggle button { padding: 2px 8px; font-size: var(--fs-sm); min-width: 32px; }
    .lotto-form-area .form-row .calendar-toggle button { padding: 2px 8px; font-size: var(--fs-sm); min-width: 32px; }
    .lotto-form-area .form-row .select-group select { font-size: var(--fs-sm); padding: 6px 2px; }
    .lotto-form-area .form-btn { font-size: var(--fs-md); padding: 8px 16px; min-height: 44px; }
    .iching-loading .circular-progress { width: 60px; height: 60px; }
    .iching-loading .circular-progress svg { width: 60px; height: 60px; }
    .iching-loading .circular-progress .center-number { font-size: var(--fs-3xl); }
    .lotto-note { font-size: var(--fs-xs); }
    .fortune-card .card-header .stars { font-size: var(--fs-sm); }
    .dream-form-wrapper .dream-input-wrap textarea { height: 60px; font-size: var(--fs-base); }
    .dream-form-wrapper .dream-btn { font-size: var(--fs-md); padding: 8px 16px; min-height: 44px; }
    .taegil-purpose-btn { font-size: var(--fs-sm); padding: 4px 0; }
    .taegil-purpose-grid { gap: 4px; }
    .coupon-card .purchase-item .qty { font-size: var(--fs-sm); min-width: 0; }
    .coupon-card .purchase-item .price { font-size: var(--fs-sm); }
    .coupon-card .purchase-item .discount { font-size: var(--fs-sm); }
    .coupon-card .purchase-item .buy-btn { font-size: var(--fs-sm); padding: 4px 0; min-height: 30px; }
    .modal-box .avatar-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .dev-board .dev-charge .charge-btn { font-size: var(--fs-xs); padding: 3px 8px; }
    .profile-avatar { width: 48px; height: 48px; font-size: 24px; }
    .profile-name { font-size: var(--fs-lg); }
    .menu-group .menu-item { padding: 6px 12px; min-height: 40px; font-size: var(--fs-base); }
    /* 부적 그리드 - 모바일에서도 간격 16px 유지 */
    .amulet-grid { gap: 16px; }
    .amulet-item { padding: 10px 8px; }
    .amulet-item .amulet-icon { font-size: 32px; }
    .amulet-item .amulet-item-name { font-size: var(--fs-base); }
    .amulet-detail-hologram-box { aspect-ratio: 1 / 1; }
    .amulet-detail-hanja { font-size: 56px; }
    .amulet-detail-name { font-size: var(--fs-md); }
    .amulet-detail-nickname { font-size: 32px; }
    .amulet-tab-item.unified { font-size: 0.8em; }
    .amulet-premium-box { padding: 14px 12px; }
    .amulet-premium-card .premium-image { max-width: 120px; }
    .amulet-premium-card .premium-name { font-size: var(--fs-xl); }
}
@media (max-height:700px) {
    .phone { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
    .phone::before, .phone::after { border-radius: 0; }
    .bottom-tab { border-radius: 0; height: 54px; }
    .tab-item .tab-icon { width: 18px; height: 18px; }
    .tab-item .tab-icon svg { width: 14px; height: 14px; }
    .tab-item .tab-label { font-size: var(--fs-sm); }
    .app-icon-box { width: 40px; height: 40px; }
    .app-title-main { font-size: 16.5px; }
    .app-title-main .sub { font-size: 16.5px; }
    .app-title-sub { font-size: var(--fs-xs); }
    .brand-intro .sub-desc { font-size: var(--fs-sm); }
    .divination-card { padding: 12px 14px; }
    .divination-card .header .title { font-size: var(--fs-md); }
    .divination-card .display-area { min-height: 120px; padding: 10px 12px; }
    .lotto-page .lotto-numbers { gap: 4px; }
    .fortune-card { padding: 10px 12px; }
    .fortune-card .card-preview { font-size: var(--fs-base); padding-left: 26px; }
    .fortune-card .card-header .stars { font-size: var(--fs-sm); }
    .bichaek-card { padding: 10px 12px; }
    .bichaek-card .card-preview { font-size: var(--fs-base); padding-left: 26px; }
    .profile-card { padding: 12px 14px; }
    .profile-avatar { width: 44px; height: 44px; font-size: var(--fs-3xl); }
    .profile-name { font-size: var(--fs-md); }
    .coupon-card { padding: 10px 14px; }
    .coupon-card .purchase-item { padding: 6px 10px; }
    .coupon-card .purchase-item .qty { font-size: var(--fs-sm); }
    .coupon-card .purchase-item .price { font-size: var(--fs-sm); }
    .coupon-card .purchase-item .discount { font-size: var(--fs-sm); }
    .coupon-card .purchase-item .buy-btn { font-size: var(--fs-sm); padding: 4px 0; min-height: 30px; }
    .menu-group .menu-item { padding: 6px 12px; min-height: 40px; font-size: var(--fs-base); }
    .fortune-form-wrapper { padding: 14px 14px 12px 14px; }
    .fortune-form-wrapper .form-row { margin-bottom: 6px; gap: 3px; }
    .fortune-form-wrapper .form-row label { font-size: var(--fs-sm); min-width: 36px; }
    .fortune-form-wrapper .form-row select { font-size: var(--fs-sm); padding: 6px 3px; }
    .fortune-form-wrapper .form-row .gender-toggle button { font-size: var(--fs-sm); padding: 2px 8px; min-width: 32px; }
    .fortune-form-wrapper .form-row .calendar-toggle button { font-size: var(--fs-sm); padding: 2px 8px; min-width: 32px; }
    .guide-text { font-size: var(--fs-base) !important; padding: 8px 10px; }
    .lotto-generate-box { padding: 10px 14px 10px 14px; }
    /* 압축 모드에서는 생성하기 박스도 10px이므로 비책 카드의 ID 규칙(20px)을 되돌린다 */
    #lotto-bichaek-card { padding-top: 10px; }
    .lotto-generate-box .inner-row { margin-bottom: 6px; }
    .lotto-generate-box .left-icon { font-size: 20px; }
    .lotto-generate-box .right-icon { font-size: var(--fs-xl); }
    .lotto-form-area .form-row { margin-bottom: 4px; }
    .lotto-form-area .form-row .gender-toggle button { font-size: var(--fs-sm); padding: 2px 8px; min-width: 32px; }
    .lotto-form-area .form-row .calendar-toggle button { font-size: var(--fs-sm); padding: 2px 8px; min-width: 32px; }
    .lotto-form-area .form-btn { font-size: var(--fs-md); padding: 8px 16px; min-height: 44px; }
    .lotto-card .lotto-header .title { font-size: var(--fs-md); }
    .dev-board { padding: 10px 14px; }
    .dev-board .dev-header .dev-title { font-size: var(--fs-base); }
    .dev-board .dev-toggle { width: 40px; height: 24px; }
    .dev-board .dev-toggle .knob { width: 20px; height: 20px; }
    .dev-board .dev-toggle.active .knob { transform: translateX(16px); }
    .dev-board .dev-charge .charge-btn { font-size: var(--fs-xs); padding: 3px 8px; }
    .lotto-ball { width: 34px; height: 34px; font-size: var(--fs-md); }
    .lotto-set-item .lotto-ball { width: 34px; height: 34px; font-size: var(--fs-md); }
    .match-result-item .match-msg { font-size: var(--fs-base); }
    .main-tab-item { font-size: var(--fs-md); }
    .fortune-main-tabs { height: 46px; }
    .loading-bar-wrap { max-width: 150px; height: 5px; }
    .lotto-more-hint { margin-top: 4px; }
    .iching-loading .circular-progress { width: 60px; height: 60px; }
    .iching-loading .circular-progress svg { width: 60px; height: 60px; }
    .iching-loading .circular-progress .center-number { font-size: var(--fs-3xl); }
    .lotto-note { font-size: var(--fs-xs); }
    .dream-form-wrapper .dream-input-wrap textarea { height: 50px; font-size: var(--fs-base); }
    .dream-form-wrapper .dream-btn { font-size: var(--fs-md); padding: 8px 16px; min-height: 44px; }
    .taegil-purpose-btn { font-size: var(--fs-sm); padding: 4px 0; }
    .taegil-purpose-grid { gap: 4px; }
    .login-section { padding: 12px 14px; }
    .birth-sync-box { padding: 12px 14px; }
    .birth-sync-box .sync-form-row .select-group select { font-size: var(--fs-xs); padding: 3px 2px; }
    .modal-box { padding: 16px 14px; }
    .logout-btn-bottom { min-height: 44px; font-size: var(--fs-base); padding: 10px 14px; }
    /* 부적 그리드 - 모바일 세로에서도 간격 16px 유지 */
    .amulet-grid { gap: 16px; }
    .amulet-item { padding: 10px 8px; }
    .amulet-item .amulet-icon { font-size: 28px; }
    .amulet-detail-hologram-box { aspect-ratio: 1 / 1; }
    .amulet-detail-hanja { font-size: 48px; }
    .amulet-detail-name { font-size: var(--fs-md); }
    .amulet-detail-nickname { font-size: 28px; }
    .amulet-tab-item.unified { font-size: 0.7em; }
    .amulet-premium-box { padding: 12px 10px; }
    .amulet-premium-card .premium-image { max-width: 100px; }
    .amulet-premium-card .premium-name { font-size: var(--fs-lg); }
}

/* ====== 신규 SVG 아이콘 통일 스타일 (아이콘 교체 작업) ====== */
/* 일반 인라인 아이콘 (폼헤더, 카드헤더, 메뉴, 모달타이틀 등) */
.icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
    flex-shrink: 0;
}
.lock-icon {
    width: 14px;
    height: 14px;
}
/* 타이틀 텍스트 앞에 붙는 아이콘 (오늘의 운세, 탭, LOTTO 헤더, 로그아웃 등) */
.inline-title-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: -3px;
    margin-right: 6px;
    display: inline-block;
    flex-shrink: 0;
}
/* 주역/기문둔갑/자미두수 "대기" 그래픽 (기존 장식 SVG 대체) */
.divination-card .display-area .symbol-placeholder .placeholder-icon-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
    margin: auto;
}
/* 하단 네비게이션 아이콘 */
.tab-item .tab-icon .nav-icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: all 0.3s;
}
.tab-item.active .tab-icon .nav-icon-img {
    transform: scale(1.1);
}
/* 부적 그리드 카드 아이콘 - 다른 아이콘보다 크게 강조 */
.amulet-item .amulet-icon .amulet-icon-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    margin: 0 auto 4px auto;
    filter: drop-shadow(0 0 6px rgba(var(--rgb-gold-dim), 0.2));
}

@media (max-width:400px) {
    .icon-img { width: 16px; height: 16px; }
    .inline-title-icon { width: 16px; height: 16px; }
    .divination-card .display-area .symbol-placeholder .placeholder-icon-img { width: 60px; height: 60px; }
    .tab-item .tab-icon .nav-icon-img { width: 18px; height: 18px; }
    .amulet-item .amulet-icon .amulet-icon-img { width: 34px; height: 34px; }
}