:root {
    /* 오행 (일간으로 결정, 토큰 §1-2) */
    --wood:  #2C6B4F; --wood-t:  #DCE5DE;
    --fire:  #A83B2E; --fire-t:  #EBDCD8;
    --earth: #7E5E1C; --earth-t: #E8E1D2;
    --metal: #5B6774; --metal-t: #DEE1E4;
    --water: #1D4676; --water-t: #DAE0E9;

    /* 중립 (모든 화면 공통, 토큰 §1-1) */
    --ink:   #17171A;
    --paper: #F5F3EE;
    --card:  #FFFFFF;
    --rule:  #DCD9D2;
    --rule2: #EBE8E2;
    --mute:  #8B8880;
    --body:  #3A3A3E;

    /* 오행 미정 화면의 기본값 */
    --el:   var(--ink);
    --tint: #E6E3DC;

    /* 서체 (토큰 §2) */
    --font-ui:   'IBM Plex Sans KR', system-ui, sans-serif;
    --font-han:  'Noto Serif KR', serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* 하위 호환용 별칭 (기존 규칙이 아직 참조) */
    --text-main: var(--ink);
    --text-muted: var(--mute);
    --border-color: var(--rule);
    --card-bg: var(--card);
    --bg-color: var(--paper);
    --radius: 0;
}

.el-wood  { --el: var(--wood);  --tint: var(--wood-t)  }
.el-fire  { --el: var(--fire);  --tint: var(--fire-t)  }
.el-earth { --el: var(--earth); --tint: var(--earth-t) }
.el-metal { --el: var(--metal); --tint: var(--metal-t) }
.el-water { --el: var(--water); --tint: var(--water-t) }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0 !important;
}

body {
    font-family: var(--font-ui);
    background-color: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background-color: var(--card);
    position: relative;
    overflow-x: hidden;
}

.view {
    display: none;
    padding: 24px;
    animation: fadeIn 0.3s ease-in-out;
}

.view.active {
    display: block;
}

/* 범용 숨김 유틸리티 (locked/unlocked 등 조건부 노출 토글용) */
.hidden {
    display: none !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── 랜딩(SCR-01) 상단 GNB ── */
.bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -24px -24px 24px;
    padding: 14px 18px;
    background: var(--card);
    border-bottom: 1px solid var(--rule);
}
.bar .bi {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--ink);
}
.bar .r { display: flex; gap: 14px; align-items: center; }
.bar .mn { font-size: 11.5px; color: var(--mute); }

/* ── 랜딩 히어로 ── */
.hero { margin-bottom: 24px; }
.hero .eyebrow {
    font-size: 10.5px;
    color: var(--mute);
    font-family: var(--font-mono);
    letter-spacing: .14em;
    margin-bottom: 14px;
}
.hero h1 {
    font-size: 29px;
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1.28;
    color: var(--ink);
}
.hero p {
    font-size: 12.5px;
    color: var(--body);
    line-height: 1.8;
    margin-top: 14px;
}

/* ── 동물 견본 5종(오행별 tint). 동물 자리 이모지는 토큰 §6 예외 ── */
.strip {
    display: flex;
    margin: 0 -24px 24px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.strip div {
    flex: 1;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-right: 1px solid var(--rule);
}
.strip div:last-child { border-right: 0; }
.strip div .e { font-size: 22px; }
.strip div .h { font-size: 10px; font-family: var(--font-han); color: var(--body); }

/* ── 3단계 안내 ── */
.brief { margin-top: 20px; }
.brief dl {
    display: flex;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rule2);
    align-items: baseline;
}
.brief dl:last-child { border-bottom: 0; }
.brief dt {
    font-size: 10px;
    color: var(--mute);
    font-family: var(--font-mono);
    flex: 0 0 20px;
    letter-spacing: .04em;
}
.brief dd { font-size: 12px; color: var(--body); line-height: 1.65; }
.brief dd b { color: var(--ink); font-weight: 500; }

/* 오행 아직 없는 화면의 지시자(토큰 §5-1, §1-4): 5칸 전부 각자 색 */
.ind {
    display: flex;
    background: var(--card);
    margin: 0 0 24px;
}
.ind i {
    flex: 1;
    height: 3px;
    background: var(--rule2);
}
.ind i.on { background: var(--el); }
.ind.all i:nth-child(1) { background: var(--wood); }
.ind.all i:nth-child(2) { background: var(--fire); }
.ind.all i:nth-child(3) { background: var(--earth); }
.ind.all i:nth-child(4) { background: var(--metal); }
.ind.all i:nth-child(5) { background: var(--water); }

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 14px;
}

input[type="text"],
input[type="date"],
input[type="time"],
select {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--rule);
    font-size: 16px;
    font-family: inherit;
    background-color: var(--paper);
    color: var(--ink);
}

input:focus, select:focus {
    outline: none;
    border-color: var(--ink);
    background-color: var(--card);
}

.radio-group {
    display: flex;
    gap: 12px;
}

.radio-group input[type="radio"] {
    display: none;
}

.radio-group label {
    flex: 1;
    text-align: center;
    padding: 12px;
    background-color: var(--paper);
    border: 1px solid var(--rule);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    margin-bottom: 0;
}

.radio-group input[type="radio"]:checked + label {
    background-color: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

/* Buttons (토큰 §5-5: 각지게, 그림자 없음) */
.btn-primary {
    width: 100%;
    padding: 14px;
    background-color: var(--ink);
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.01em;
    cursor: pointer;
}

.btn-primary:disabled {
    background-color: var(--rule);
    color: var(--mute);
    cursor: not-allowed;
}

.btn-secondary {
    width: 100%;
    padding: 14px;
    background-color: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* 결제·해금 등 오행 강조(토큰 §5-5 .b.el). --el은 오행 미정이면 --ink로 폴백 */
.btn-pay {
    width: 100%;
    padding: 14px;
    background-color: var(--el);
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 12px;
}

.btn-share {
    width: 100%;
    padding: 14px;
    background-color: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 12px;
}

/* Loading */
.loading-container {
    text-align: center;
    padding-top: 60px;
}

.walking-chapchu {
    display: none; /* 찹츄 테마 삭제 — 마크업/파일은 유지, 참조만 끊음 */
    width: 260px;
    height: 110px;
    margin: 0 auto 24px;
    background-image: url('/images/chapchu_walk_4_frame.png');
    background-size: 520px 220px;   /* 2×260 wide, 2×110 tall */
    background-repeat: no-repeat;
    animation: 
        walk-cycle-4 1.2s steps(1) infinite,
        bounce-walk 0.6s ease-in-out infinite alternate;
}

@keyframes walk-cycle-4 {
    0%    { background-position: 0px 0px; }       /* top-left */
    25%   { background-position: -260px 0px; }    /* top-right */
    50%   { background-position: 0px -110px; }    /* bottom-left */
    75%   { background-position: -260px -110px; } /* bottom-right */
    100%  { background-position: 0px 0px; }       /* loop back */
}

@keyframes bounce-walk {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

.waiting-chapchu {
    display: none; /* 찹츄 테마 삭제 — 마크업/파일은 유지, 참조만 끊음 */
    width: 200px;
    height: 220px;
    margin: 0 auto 24px;
    background-image: url('/images/chapchu_waiting_2_frame.png');
    background-size: 400px 220px;
    background-repeat: no-repeat;
    animation: 
        wait-cycle 0.8s steps(2) infinite,
        bounce-walk 0.8s ease-in-out infinite alternate;
}

@keyframes wait-cycle {
    from { background-position: 0px 0px; }
    to { background-position: -400px 0px; }
}

/* ── 여덟 글자 채우기(토큰 §7). 해금(상세 분석) 로딩 전용 ── */
.pil {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rule2);
    border: 1px solid var(--rule2);
    margin-top: 32px;
}
.pil div {
    background: var(--card);
    aspect-ratio: .86;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-han);
    font-size: 25px;
    color: var(--ink);
    opacity: 0;
    transition: opacity .45s ease;
}
.pil div.on { opacity: 1; }
.prog {
    height: 1px;
    background: var(--rule2);
    margin-top: 16px;
    position: relative;
}
.prog i {
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 0%;
    background: var(--ink);
    transition: width .3s linear;
}

/* Results */
.result-header {
    text-align: center;
    margin-bottom: 24px;
}

/* Button Active Feedback */
.btn-primary:active,
.btn-secondary:active,
.btn-pay:active,
.btn-share:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* Payment View */
.payment-container {
    text-align: center;
    padding-top: 40px;
}

.payment-icon {
    font-size: 64px;
    margin-bottom: 16px;
    animation: bounce-walk 1s ease-in-out infinite alternate;
}

.payment-container h2 {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.045em;
    color: var(--ink);
    margin-bottom: 8px;
}

.payment-subtitle {
    color: var(--text-muted);
    margin-bottom: 32px;
    font-size: 16px;
}

.payment-card {
    background: var(--tint);
    border: 1px solid var(--rule);
    padding: 28px 20px;
    margin-bottom: 24px;
}

.payment-label {
    font-size: 10.5px;
    color: var(--mute);
    margin-bottom: 8px;
    font-weight: 400;
    font-family: var(--font-mono);
    letter-spacing: .06em;
}

.payment-amount {
    font-family: var(--font-han);
    font-size: 40px;
    font-weight: 400;
    color: var(--el);
    line-height: 1.2;
    margin-bottom: 8px;
}

.payment-amount span {
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-ui);
}

.payment-desc {
    font-size: 13px;
    color: var(--mute);
    margin: 0;
}

.payment-free-notice {
    font-size: 14px;
    color: var(--el);
    font-weight: 500;
    margin-bottom: 16px;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Modal */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal.hidden {
    display: none;
}
.modal-content {
    background: var(--card);
    width: 90%;
    max-width: 400px;
    padding: 24px;
    border: 1px solid var(--rule);
}
.modal-content h3 {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    letter-spacing: -.03em;
}
.privacy-terms {
    font-size: 14px;
    color: var(--ink);
    background: var(--paper);
    padding: 16px;
    margin-bottom: 24px;
}
.privacy-terms ul {
    margin-top: 8px;
    padding-left: 20px;
}
.privacy-terms li {
    margin-bottom: 4px;
}
.privacy-notice {
    margin-top: 12px;
    font-size: 13px;
    color: var(--ink);
    font-weight: 700;
}

/* ── 찹츄 종합 요약 카드: 캐릭터 정보 영역 (토큰 §5-2 .info) ── */
.info {
    background: var(--card);
    padding: 18px 0;
}
.info .animal-name {
    font-size: 10.5px;
    color: var(--mute);
    font-family: var(--font-mono);
    letter-spacing: .06em;
    margin-bottom: 9px;
}
#char-summary-title {
    font-size: 29px;
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1.15;
    color: var(--ink);
}
.info .ln {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--body);
    margin-top: 11px;
}
.btn-insta {
    width: 100%;
    padding: 12px;
    background: var(--ink);
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* ── 인스타 카드 이미지 생성용 숨겨진 템플릿 ── */
.insta-card-template {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 400px;
    height: 711px; /* 9:16 비율 */
    z-index: -1;
    pointer-events: none;
}
.insta-card-bg {
    width: 100%;
    height: 100%;
    background: #2B180F;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 24px;
    box-sizing: border-box;
}
.insta-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #FFB800;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.8;
}
.insta-card-title {
    font-size: 24px;
    font-weight: 900;
    color: #FFE566;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 12px;
    word-break: keep-all;
}
.insta-card-animal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
}
#insta-card-animal-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    background-color: #2b170e;
    margin-bottom: 8px;
}
.insta-card-animal-name {
    font-size: 13px;
    font-weight: 500;
    color: #FFE566;
    margin: 0;
    letter-spacing: 0.5px;
}
.insta-card-body {
    font-size: 14px;
    color: #FFF8E1;
    text-align: center;
    line-height: 1.7;
    margin-bottom: 12px;
    word-break: keep-all;
    opacity: 0.9;
}
.insta-card-theme-answers {
    width: 100%;
    margin-top: 5px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 184, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}
.insta-card-theme-row {
    font-size: 12px;
    line-height: 1.4;
    color: #FFF8E1;
    text-align: left;
    display: flex;
    flex-direction: column;
}
.insta-card-theme-q {
    font-weight: 700;
    color: #FFB800;
    margin-bottom: 2px;
}
.insta-card-theme-a {
    color: #FFE566;
    opacity: 0.95;
}
.insta-card-footer {
    font-size: 11px;
    color: #FFB800;
    opacity: 0.6;
    letter-spacing: 1px;
    border-top: 1px solid rgba(255,184,0,0.2);
    padding-top: 10px;
    width: 100%;
    text-align: center;
    margin-top: auto;
}

/* 웹뷰용 질문 한 줄 요약 */
.summary-theme-answers {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed rgba(74, 55, 40, 0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.summary-theme-row {
    font-size: 14px;
    line-height: 1.5;
    color: #4A3728;
    text-align: left;
    display: flex;
    flex-direction: column;
}
.summary-theme-q {
    font-weight: 700;
    color: #FF8F00;
    margin-bottom: 2px;
}
.summary-theme-a {
    color: #4A3728;
}

/* 동물 판형(토큰 §5-2 .plate). 원형 아바타 금지 → 판형 그대로, 이미지는 하단 정렬 */
.plate {
    background: var(--tint);
    position: relative;
}
.plate .img {
    height: 186px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
}
#char-animal-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* 카드 배경 한자(.gl). day_stem을 app.js가 채운다 */
.plate .gl {
    position: absolute;
    left: 16px;
    top: 14px;
    font-family: var(--font-han);
    font-size: 82px;
    font-weight: 200;
    color: var(--el);
    opacity: .18;
    line-height: .78;
    letter-spacing: -.04em;
}

/* 캐릭터 카드: 직장/연애/극복가이드 상세 섹션 */
.char-detail-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--rule2);
}
.char-detail-label {
    font-size: 10.5px;
    font-weight: 400;
    color: var(--mute);
    font-family: var(--font-mono);
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.char-detail-text {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--body);
}

/* ── 캐릭터 카드 뷰 액션 버튼 영역 ── */
.char-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 0 8px;
}

.char-action-buttons.hidden {
    display: none;
}

/* 가로 나란히 버튼 행 (이미지 저장 + 카톡 공유) */
.button-row-half {
    display: flex;
    gap: 10px;
}

.button-row-half > * {
    flex: 1;
}

/* 작은 카카오 공유 버튼 (캐릭터 카드 뷰용) */
.btn-share-sm {
    padding: 12px;
    background-color: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-share-sm:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* 상세 사주 분석 CTA 버튼 강조 */
.btn-detail-cta {
    font-size: 13px;
    padding: 14px;
    letter-spacing: -.01em;
}

/* 시간 모름 체크박스 (SCR-02) */
.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 400;
    color: var(--mute);
    cursor: pointer;
}
.checkbox-inline input {
    width: auto;
}

/* ── SCR-06 프리미엄 리포트: 프로필 헤더 ── */
.report-profile {
    text-align: left;
    font-size: 12px;
    color: var(--mute);
    font-family: var(--font-mono);
    font-weight: 400;
    margin-bottom: 20px;
}

/* ── 만세력 세로 4기둥(토큰 §5-3 .pillars). 일주 칸만 --tint 배경 + --el 글자색 ── */
.manse-table {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--card);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 24px;
}
.manse-table .col {
    border-right: 1px solid var(--rule2);
    padding: 11px 0;
    text-align: center;
}
.manse-table .col:last-child { border-right: 0; }
.manse-table .col.self { background: var(--tint); }
.manse-table .h {
    font-size: 9.5px;
    color: var(--mute);
    font-family: var(--font-mono);
    margin-bottom: 8px;
}
.manse-table .c {
    font-family: var(--font-han);
    font-size: 23px;
    line-height: 1.32;
    color: var(--ink);
}
.manse-table .col.self .c { color: var(--el); }
.manse-table .c.unknown {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--mute);
}

/* ── 오행 분포(element_dist, 토큰 §5-3 .dis). 순서 고정: 木火土金水 ── */
.dis {
    display: flex;
    margin-bottom: 24px;
    padding-top: 11px;
    border-top: 1px solid var(--rule2);
}
.dis > div { flex: 1; text-align: center; }
.dis .g { font-family: var(--font-han); font-size: 12px; color: var(--body); }
.dis .v { font-size: 11px; color: var(--mute); font-family: var(--font-mono); margin-top: 2px; }
.dis .fill { height: 2px; margin-top: 5px; }

/* ── 해설 아코디언(토큰 §5-4 .read). 인덱스는 Mono 2자리, 잠긴 항목은 "잠김" 텍스트 ── */
.read {
    background: var(--card);
    margin-bottom: 24px;
}
.read .row2 {
    border-top: 1px solid var(--rule2);
    padding: 14px 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
}
.read .row2.off { cursor: default; }
.read .idx {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--mute);
    flex: 0 0 16px;
    padding-top: 3px;
}
.read .content { flex: 1; }
.read .t {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -.025em;
}
.read .x {
    font-size: 12.5px;
    line-height: 1.95;
    color: var(--body);
    margin-top: 9px;
}
.read .x p { margin-bottom: 10px; }
.read .x p:last-child { margin-bottom: 0; }
.read .x strong { color: var(--ink); font-weight: 600; }
.read .row2.off .t { color: #A6A39C; }
.read .row2.off .idx { color: #C6C3BC; }
.read .mk {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--mute);
    flex: 0 0 auto;
}

/* ── 홈 화면 전용 푸터 (사업자 정보) ── */
.site-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
}
.site-footer-info p,
.site-footer-contact p {
    margin: 0;
}
.site-footer-contact {
    margin-top: 10px;
}
.site-footer-links {
    margin-top: 14px;
}
.site-footer-links a {
    color: var(--text-muted);
    text-decoration: underline;
}
.site-footer-copyright {
    margin-top: 14px;
    color: #999;
}

/* ── 정책 페이지 공통 (/info/about, /info/terms, /info/privacy) ── */
.info-page {
    padding: 24px;
}
.info-back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
}
.info-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 20px;
}
.info-intro {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
    word-break: keep-all;
}
.info-company-name {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 16px;
}
.info-dl div {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}
.info-dl dt {
    width: 130px;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--text-muted);
}
.info-dl dd {
    margin: 0;
}

/* 이용약관/개인정보처리방침 아코디언 (네이티브 details/summary) */
.info-accordion {
    border-bottom: 1px solid var(--border-color);
    padding: 14px 0;
}
.info-accordion summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    list-style: none;
}
.info-accordion summary::-webkit-details-marker {
    display: none;
}
.info-accordion summary::before {
    content: '▶ ';
    color: var(--ink);
}
.info-accordion[open] summary::before {
    content: '▼ ';
}
.info-accordion p,
.info-accordion ul,
.info-accordion ol {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-main);
    word-break: keep-all;
    padding-left: 4px;
}
.info-accordion ul,
.info-accordion ol {
    padding-left: 22px;
}
.info-accordion li {
    margin-bottom: 6px;
}
.info-supplementary {
    margin-top: 24px;
    font-size: 13px;
    color: var(--text-muted);
}