/* 이용 안내·ⓘ — 2026-10-31 구조 정리로 index.html <style> 1180~1217줄에서 옮김. 파일 번호 순서대로 읽어야 함(뒤 규칙이 앞 규칙을 덮음) */
/* 이용 안내 (2026-10-15 ④-4): 꺽쇠로 펼치고 접는 목차 — 내 정보 상자와 같은 테두리 */
.guide{display:flex;flex-direction:column;gap:10px}
.guide-lead{margin:0;font-size:.92rem;line-height:1.7;color:var(--ink);word-break:keep-all}
.guide-hint{margin:0 0 4px;font-size:.8rem;color:var(--muted)}
.guide-item{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.guide-head{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.guide-head:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:14px}
.guide-no{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;background:var(--bg);font-size:.76rem;font-weight:700;color:var(--muted)}
.guide-title{flex:1;font-size:.92rem;font-weight:700;color:var(--ink);word-break:keep-all}
.guide-head::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.guide-head[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.guide-body{padding:0 16px 14px 46px;font-size:.88rem;line-height:1.75;color:var(--ink);word-break:keep-all}
.guide-body[hidden]{display:none}
.guide-body h4{margin:12px 0 4px;font-size:.86rem;font-weight:700}
.guide-body h4:first-child{margin-top:0}
.guide-body p{margin:0 0 6px}
.guide-body ul,.guide-body ol{margin:0 0 6px;padding-left:18px}
.guide-body li{margin:2px 0}
.guide-note{color:var(--muted);font-size:.82rem}
.guide-subs{display:flex;flex-direction:column;gap:8px}
.guide-sub{border-radius:12px;background:var(--bg);border-color:transparent}
.guide-sub .guide-head{padding:11px 12px}
.guide-sub .guide-title{font-size:.9rem}
.guide-sub .guide-body{padding:0 14px 12px 14px}
@media (max-width:600px){.guide-body{padding-left:16px}}

/* 2026-10-16 ④-5 안내 정리: 빈 괄호 안내 줄은 숨김, ⓘ는 칸 이름 옆(작게)·말풍선은 내용만큼, 끝에 "더 보기 ›"(이용 안내 그 칸으로) */
.field-note:empty{height:0;padding-top:0;padding-bottom:0;overflow:hidden} /* 줄 간격(아래 여백)은 남김 */
.note-row.is-solar>*,.note-row.is-solar>.leap-btn[hidden]{display:none!important}
.info-btn.info-inline{position:static;transform:none;display:inline-block;vertical-align:-3px;margin-left:6px;width:17px;height:17px;font-size:.64rem;line-height:14px}
.info-bubble.is-short{height:auto;max-height:252px}
.info-more{margin:6px 0 0!important;text-align:right}
.info-more a{color:var(--ink);font-weight:700;text-decoration:none}
.info-more a:hover{text-decoration:underline}
.guide-back[hidden]{display:none}
.guide-back{align-self:flex-start;margin:-4px 0 2px -6px}
.guide-body h4:target,.guide-flash{animation:guideFlash 1.6s ease-out}
@keyframes guideFlash{0%{background:#f3e3a6}100%{background:transparent}}

/* 2026-11-05 폰 ⓘ 위치 정리: 폰(600px 이하·좁은 카드)에서 칸 이름이 입력칸 위로 올라가면 ⓘ가 글자보다 아래로 내려가던 것
   (칸 이름이 block이 되며 vertical-align:-3px가 살아남) → 칸 이름 줄을 PC처럼 가로로 늘어놓고 ⓘ를 글자 가운데 높이에 맞춤 */
.field-label .info-btn.info-inline{align-self:center;vertical-align:middle;flex:none}
@media (max-width:600px){
  .field-label{display:flex;justify-content:flex-start;align-items:center}
  .backup-info .info-btn.info-inline{vertical-align:middle}
}
@container (max-width:330px){.field-label{display:flex;justify-content:flex-start;align-items:center}}
:where(.fortune-card.cq-narrow) .field-label{display:flex;justify-content:flex-start;align-items:center} /* iOS 15 보조 */