/* Mode tabs */
  .mode-tabs { display:flex; gap:8px; margin-bottom:14px; }
  .mode-tab {
    flex:1; text-align:center; padding:10px; border-radius:12px; font-size:13px; font-weight:700;
    background:#fff; color:#6e6e73; cursor:pointer; border:1px solid #e5e5ea;
  }
  .mode-tab.active { background:linear-gradient(135deg,#5e5ce6,#ff375f); color:#fff; border-color:transparent; }

  /* 별을 품은 보석 — 포켓사주 전용 크레딧 심볼 */
  .credit-icon {
    position:relative; display:inline-block; width:1.05em; height:1.05em; flex:0 0 auto;
    margin:0 .14em; border-radius:34%; vertical-align:-.13em; transform:rotate(8deg);
    background:linear-gradient(145deg,#7568e8 0 49%,#d86fa7 49% 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 1px 3px rgba(94,92,230,.18);
    user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; animation:none !important;
  }
  .credit-icon::before {
    content:''; position:absolute; inset:23%; background:#fff0bd;
    clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);
    transform:rotate(-8deg); filter:drop-shadow(0 0 1px rgba(255,241,190,.42));
  }
  .credit-icon::after {
    content:''; position:absolute; left:19%; top:15%; width:26%; height:12%; border-radius:999px;
    background:rgba(255,255,255,.58); transform:rotate(-23deg);
  }
  .credit-icon-light {
    background:rgba(43,31,94,.3); border:1px solid rgba(255,255,255,.38);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(36,24,86,.14); box-sizing:border-box;
  }
  .credit-action { display:inline-flex; align-items:center; justify-content:center; gap:.05em; }
  #credit-balance-badge { display:inline-flex; align-items:center; justify-content:flex-end; gap:3px; }

  /* 프로필의 약관 링크는 새 문서로 이동하지 않고 앱 위의 전체 화면 뷰어에서 엽니다.
     웹뷰가 index.html을 다시 초기화하며 두 번 깜빡이던 경로를 없애고, 시스템 뒤로가기도 그대로 지원합니다. */
  body.legal-viewer-open { overflow:hidden; }
  .legal-viewer[hidden] { display:none !important; }
  .legal-viewer {
    position:fixed; inset:0; z-index:12000; color:#1d1d1f; background:#f7f6fb;
    font-size:14px; line-height:1.75; overscroll-behavior:contain; opacity:0; visibility:hidden;
    transition:opacity .12s ease,visibility 0s linear .12s;
  }
  .legal-viewer.is-open { opacity:1; visibility:visible; transition:opacity .12s ease; }
  .legal-viewer::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(circle at 12% 0%,rgba(104,87,229,.11),transparent 28rem),radial-gradient(circle at 100% 8%,rgba(236,63,135,.08),transparent 24rem);
  }
  .legal-viewer-panel { position:relative; height:100%; display:flex; flex-direction:column; }
  .legal-viewer-bar {
    flex:0 0 auto; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
    border-bottom:1px solid rgba(94,92,230,.1); background:rgba(247,246,251,.91);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  }
  .legal-viewer-close {
    min-height:42px; padding:0 12px; border:0; border-radius:12px; background:transparent; color:#5748c9;
    font:750 14px/1 Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif; cursor:pointer; outline:none;
  }
  .legal-viewer-close:focus-visible { outline:2px solid rgba(94,92,230,.32); outline-offset:1px; }
  .legal-viewer-tabs { display:flex; align-items:center; gap:4px; padding:3px; border-radius:12px; background:rgba(118,118,128,.1); }
  .legal-viewer-tabs button {
    min-height:36px; padding:0 12px; border:0; border-radius:9px; background:transparent; color:#6e6e73;
    font:700 12px/1 Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif; cursor:pointer;
  }
  .legal-viewer-tabs button.is-active { background:#fff; color:#5748c9; box-shadow:0 1px 5px rgba(62,44,105,.1); }
  .legal-viewer-scroll {
    flex:1 1 auto; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch;
    padding:22px max(16px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  }
  .legal-viewer-content {
    width:min(100%,820px); min-height:240px; margin:0 auto; padding:clamp(26px,5vw,54px);
    border:1px solid rgba(255,255,255,.9); border-radius:28px; background:rgba(255,255,255,.94);
    box-shadow:0 22px 60px rgba(62,44,105,.09); word-break:keep-all; overflow-wrap:anywhere;
  }
  .legal-viewer-content[hidden] { display:none !important; }
  .legal-viewer-loading { margin:70px 0; color:#86868b; text-align:center; }
  .legal-viewer-content .legal-kicker { margin:0 0 6px; color:#6857e5; font-size:11px; font-weight:800; }
  .legal-viewer-content h1 { margin:0; font-size:clamp(28px,6vw,40px); line-height:1.25; letter-spacing:-.04em; }
  .legal-viewer-content .legal-date { margin:10px 0 26px; color:#6e6e73; font-size:12px; }
  .legal-viewer-content .legal-lead {
    margin:0 0 30px; padding:18px 20px; border-radius:18px;
    background:linear-gradient(135deg,rgba(104,87,229,.08),rgba(236,63,135,.06)); color:#403d4a;
  }
  .legal-viewer-content .legal-section { padding:27px 0; border-top:1px solid rgba(94,92,230,.13); }
  .legal-viewer-content .legal-section h2 { margin:0 0 12px; font-size:19px; line-height:1.45; letter-spacing:-.025em; }
  .legal-viewer-content .legal-section p { margin:0 0 10px; }
  .legal-viewer-content .legal-section p:last-child { margin-bottom:0; }
  .legal-viewer-content .legal-section ul,
  .legal-viewer-content .legal-section ol { margin:0; padding-left:22px; }
  .legal-viewer-content .legal-section li { margin:7px 0; }
  .legal-viewer-content .legal-table { width:100%; margin-top:12px; border-collapse:collapse; font-size:14px; }
  .legal-viewer-content .legal-table th,
  .legal-viewer-content .legal-table td { padding:12px 13px; border:1px solid #e8e5f1; text-align:left; vertical-align:top; }
  .legal-viewer-content .legal-table th { width:28%; background:#faf9fd; font-weight:750; }
  .legal-viewer-content .legal-note { color:#6e6e73; font-size:13px; }
  .legal-viewer-error { margin:60px auto; color:#6e6e73; text-align:center; }
  .legal-viewer-error a { display:inline-flex; margin-top:14px; color:#5748c9; font-weight:750; }
  @media (max-width:520px) {
    .legal-viewer-bar { min-height:58px; padding-bottom:8px; }
    .legal-viewer-close { padding-left:4px; }
    .legal-viewer-tabs button { padding:0 10px; }
    .legal-viewer-scroll { padding:10px 10px calc(28px + env(safe-area-inset-bottom)); }
    .legal-viewer-content { padding:26px 20px; border-radius:22px; }
    .legal-viewer-content .legal-lead { padding:16px; }
    .legal-viewer-content .legal-section { padding:23px 0; }
    .legal-viewer-content .legal-table,
    .legal-viewer-content .legal-table tbody,
    .legal-viewer-content .legal-table tr,
    .legal-viewer-content .legal-table th,
    .legal-viewer-content .legal-table td { display:block; width:100%; }
    .legal-viewer-content .legal-table tr { margin-bottom:10px; }
    .legal-viewer-content .legal-table th { border-bottom:0; }
  }
  @media (prefers-reduced-motion:reduce) {
    .legal-viewer, .legal-viewer.is-open { transition:none; }
  }

  /* Compat two-person form */
  .person-block { border:1px solid #eee; border-radius:14px; padding:12px; margin-bottom:10px; }
  .person-block .person-label { font-size:12px; font-weight:800; color:#5e5ce6; margin-bottom:8px; }
  #form-card .person-block .field:last-child { margin-bottom:0; } /* 사주 탭도 궁합과 동일하게, 마지막 입력칸과 버튼 사이 중복 여백 정리 */
  .compat-intro {
    text-align:center; padding:6px 8px 16px; margin-bottom:14px; border-bottom:1px solid #f0f0f2;
  }
  .compat-intro-pair { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:16px; }
  .compat-intro-word {
    color:#3a3a3c; font-size:14px; line-height:1; font-weight:800; letter-spacing:1px;
  }
  .compat-connection { position:relative; display:inline-block; width:42px; height:26px; flex:0 0 auto; }
  .compat-connection > span {
    position:absolute; top:50%; width:21px; height:21px; border:1.5px solid #7771db; border-radius:50%;
    transform:translateY(-50%); background:rgba(255,255,255,.55); box-shadow:0 2px 7px rgba(94,92,230,.12);
  }
  .compat-connection > span:first-child { left:calc(50% - 16px); }
  .compat-connection > span:last-child { left:calc(50% - 5px); }
  .vs-badge > span {
    position:absolute; top:50%; width:14px; height:14px; border:1.5px solid #7771db; border-radius:50%;
    transform:translateY(-50%); background:transparent;
  }
  .vs-badge > span:first-child { left:calc(50% - 11px); }
  .vs-badge > span:last-child { left:calc(50% - 3px); }
  /* .compat-intro h2 / .solo-intro h2 / .solo-intro-elements 오비트 / .compat-connection
     애니메이션은 탭 진입 즉시 필요한 상단 모션이라 index.html 인라인 스타일로 옮김 (이 파일은 비동기
     로딩이라 첫 진입 시 모션이 씹히는 문제가 있었음). 관련 keyframes도 전부 인라인으로 이동함 */
  .solo-intro p { max-width:390px; padding:0 6px; font-size:clamp(11.5px,2.9vw,12.5px); word-break:keep-all; text-wrap:balance; }
  @keyframes guidedTitleReduced { 0%,4%,23%,100% { filter:brightness(1); opacity:1; } 11% { filter:brightness(1.1); opacity:.9; } }
  .compat-intro p { max-width:390px; margin:9px auto 0; padding:0 6px; font-size:clamp(11.5px,2.7vw,12.5px); line-height:1.55; color:#6e6e73; word-break:keep-all; text-wrap:balance; }
  .compat-intro-topics { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:13px; color:#86868b; }
  .compat-intro-topics span { display:inline-flex; align-items:center; font-size:10.5px; font-weight:600; white-space:nowrap; }
  .compat-intro-topics span + span::before { content:'·'; margin:0 8px; color:#c7c7cc; }
  /* 최근 본 궁합 컨테이너도 회색 채움 박스였던 걸, 사주의 최근 본 사주(.saju-recent)처럼
     테두리·배경 없이 밑줄 하나로만 구분하는 플랫한 스타일로 통일함 */
  .compat-recent {
    margin:0 0 14px; padding:0 0 14px; border:0; border-bottom:1px solid #f0f0f2; background:transparent;
  }
  .compat-recent-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
  .compat-recent-head h3 { margin:0; color:#1d1d1f; font-size:13px; line-height:1.3; font-weight:800; letter-spacing:-0.2px; }
  .compat-recent-head p { margin:3px 0 0; color:#86868b; font-size:10.5px; line-height:1.4; }
  .compat-recent-list { display:flex; flex-direction:column; gap:7px; }
  .compat-recent-item {
    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px;
    min-height:58px; padding:8px 8px 8px 12px; border:1px solid #ece9fa; border-radius:13px; background:#fff;
  }
  /* 로그인 사용자는 "최근 본 궁합"을 서버에서 불러오는 동안 실제로 네트워크 응답을 기다려야 해서,
     응답 오기 전까진 섹션이 아예 없다가 응답 오는 순간 통째로 나타나며 아래 폼이 밀리는 문제가 있었음.
     응답 기다리는 동안에도 실제 카드와 같은 높이의 스켈레톤을 먼저 보여줘서 자리를 미리 잡아둠 */
  .compat-recent-item.is-skeleton { border-color:#ece9fa; background:#fff; pointer-events:none; }
  .compat-recent-skel-line { height:11px; border-radius:6px; background:#eee9fb; animation:compatSkelPulse 1.1s ease-in-out infinite; }
  .compat-recent-skel-line + .compat-recent-skel-line { margin-top:8px; width:60%; height:9px; }
  @keyframes compatSkelPulse { 0%,100% { opacity:0.6; } 50% { opacity:1; } }
  .compat-recent-open {
    min-width:0; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer;
  }
  .compat-recent-pair { display:flex; align-items:baseline; gap:6px; min-width:0; }
  .compat-recent-names { overflow:hidden; color:#1d1d1f; font-size:12.5px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
  .compat-recent-score { flex:0 0 auto; color:#5e5ce6; font-size:11px; font-weight:800; }
  .compat-recent-summary { overflow:hidden; margin-top:3px; color:#86868b; font-size:10.5px; text-overflow:ellipsis; white-space:nowrap; }
  .compat-recent-delete {
    min-width:44px; min-height:36px; padding:0 9px; border:0; border-radius:10px; background:#f5f5f7;
    color:#86868b; font-size:10.5px; font-weight:700; cursor:pointer;
  }

  /* 최근 본 사주: 반복 문구 없이 프로필과 이름만 한 줄로 보여주는 목록 */
  .saju-recent {
    margin:0 0 14px; padding:0 0 14px; border:0; border-bottom:1px solid #f0f0f2; background:transparent;
  }
  .saju-recent-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 2px 10px; }
  .saju-recent-head-copy { min-width:0; }
  .saju-recent-head h3 { margin:0; color:#1d1d1f; font-size:13px; line-height:1.3; font-weight:800; letter-spacing:-0.2px; }
  .saju-recent-head p { margin:3px 0 0; color:#86868b; font-size:10.5px; line-height:1.4; }
  .saju-recent-edit {
    flex:0 0 auto; min-width:36px; min-height:25px; padding:0; border:0; background:transparent;
    color:#5e5ce6; font-family:inherit; font-size:10.5px; font-weight:750; cursor:pointer;
  }
  .saju-recent-list {
    display:flex; align-items:flex-start; gap:13px; overflow-x:auto; overflow-y:visible;
    padding:4px 2px 2px; border:0; background:transparent; scrollbar-width:none;
    scroll-snap-type:x proximity; overscroll-behavior-inline:contain;
  }
  .saju-recent-list::-webkit-scrollbar { display:none; }
  .saju-recent-item { position:relative; flex:0 0 58px; width:58px; scroll-snap-align:start; }
  .saju-recent-open {
    display:flex; flex-direction:column; align-items:center; width:58px; padding:0; border:0; background:transparent;
    color:inherit; font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .saju-recent-avatar {
    width:50px; height:50px; display:flex; align-items:center; justify-content:center; overflow:hidden;
    border:1px solid #e7e3fa; border-radius:50%; background:#f4f2ff;
    color:var(--recent-avatar-color,#5e5ce6); font-size:17px; font-weight:800;
    transition:transform .16s ease, opacity .16s ease;
  }
  .saju-recent-avatar img { width:100%; height:100%; display:block; object-fit:cover; pointer-events:none; }
  .saju-recent-name {
    width:58px; overflow:hidden; margin-top:6px; color:#3a3a3c; font-size:10.5px; line-height:1.25;
    font-weight:700; text-align:center; text-overflow:ellipsis; white-space:nowrap;
  }
  .saju-recent-open:active .saju-recent-avatar { transform:scale(.95); }
  .saju-recent-remove {
    position:absolute; top:-3px; left:0; z-index:2; width:20px; height:20px; display:none; align-items:center; justify-content:center;
    padding:0; border:2px solid #fff; border-radius:50%; background:#ff3b30; color:#fff;
    font-family:inherit; font-size:15px; font-weight:800; line-height:1; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.16);
  }
  .saju-recent-list.is-editing .saju-recent-remove { display:flex; }
  .saju-recent-list.is-editing .saju-recent-avatar { opacity:.88; }
  /* 궁합의 person-block에만 회색 배경(#fbfbfd)을 채워서 흰 카드 안에 회색 박스가 또 있는
     "박스 안의 박스"처럼 보이는 문제가 있었음. 사주(person-block에 배경 지정 없음, 테두리만
     있는 플랫한 스타일)와 통일 — MY/DEAR 구분은 이미 별도로 있는 vs-divider가 담당하므로
     person-block 자체에 채움색까지 줄 필요는 없음 */
  #compat-card .person-block { padding:14px; }
  #compat-card .person-block .field:last-child { margin-bottom:0; } /* 마지막 입력칸(태어난 시각)과 다음 버튼 사이 여백이 field+block padding+block margin으로 중복 누적되던 것 정리 */
  #compat-card .person-label {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
    font-size:12px; color:#1d1d1f; letter-spacing:1.1px;
  }
  .person-order { color:#aeaeb2; font-size:9.5px; font-weight:700; letter-spacing:0.4px; }
  .vs-divider { display:flex; align-items:center; gap:14px; margin:12px 0; }

  .compat-saved-chips { display:flex; gap:6px; overflow-x:auto; margin-bottom:10px; padding-bottom:2px; }
  .compat-chip {
    flex:0 0 auto; padding:6px 12px; border-radius:20px; border:1px solid #ece7ff; background:#f9f9ff;
    color:#5e5ce6; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap;
  }
  .person-summary-pill {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    border:1px solid #ece7ff; background:#f9f9ff; border-radius:14px; padding:12px 14px; margin-bottom:10px; cursor:pointer;
  }
  .person-summary-pill .psp-text { font-size:12.5px; font-weight:700; color:#1d1d1f; }
  .person-summary-pill .psp-edit { font-size:11px; color:#5e5ce6; font-weight:700; }
  .vs-line { flex:1; height:1px; background:#ececec; }
  .vs-badge {
    position:relative; flex-shrink:0; display:inline-block; width:34px; height:34px; border-radius:11px;
    background:#f4f2ff; border:1px solid #e7e4fa;
  }

  .compat-header { background:linear-gradient(135deg,#5e5ce6,#ff375f); border-radius:16px; padding:16px 22px; text-align:center; margin-bottom:10px; }
  .compat-header .names { color:#fff; font-size:18px; font-weight:800; }
  .compat-header .sub2 { color:rgba(255,255,255,0.85); font-size:12px; margin-top:4px; }
  .badge-compat-good{background:#d1f2d9;} .badge-compat-watch{background:#ffe1e3;} .badge-compat-tip{background:#e4e0ff;}
  /* 예스/노 타로 배지 전용 — 🔮 수정구슬의 파랑/보라 톤이 연보라(badge-compat-tip)나 연하늘 배경과
     겹쳐 흐릿하게 보이는 문제가 있어서, 이 아이콘만 따뜻한 크림톤 배경으로 분리(사주 탭
     badge-today와 같은 색). 다른 badge-compat-tip 배지(🔍·💌·🤝)는 그대로 연보라 유지 */
  .badge-compat-fortune{background:#ffedd9;}

  .compat-title-badge {
    display:inline-block; margin:0 auto 12px; padding:8px 16px; border-radius:999px;
    background:linear-gradient(135deg,#f1efff,#fff0f4); color:#5e5ce6; font-size:13.5px; font-weight:800;
    text-align:center;
  }
  .compat-title-wrap {
    text-align:center; padding:18px 22px 16px; margin-bottom:10px; border:1px solid #efedf8; border-radius:18px;
    background:linear-gradient(135deg,#fbfaff,#fff8fa); box-shadow:0 8px 22px -18px rgba(94,92,230,0.35);
  }
  .compat-summary-kicker { margin-bottom:9px; color:#86868b; font-size:10.5px; font-weight:700; letter-spacing:0.2px; }
  .compat-score-row { display:flex; align-items:baseline; justify-content:center; gap:15px; margin:0 auto; }
  .compat-score-value { display:flex; align-items:baseline; gap:3px; }
  .compat-score-num { font-size:27px; line-height:1; font-weight:800; color:#ff375f; }
  .compat-score-total { font-size:10.5px; font-weight:700; color:#a1a1a6; }
  .compat-score-label { color:#1d1d1f; font-size:12px; font-weight:700; text-align:left; }
  .compat-score-note {
    display:flex; align-items:flex-start; justify-content:center; gap:5px; max-width:280px; margin:9px auto 0;
    color:#86868b; font-size:10.5px; line-height:1.4; text-align:left;
  }

  .compat-personal { display:flex; flex-direction:column; gap:10px; }
  .compat-personal .cp-card { background:#f9f9ff; border-radius:12px; padding:12px 14px; }
  .compat-personal .cp-name { font-size:12px; font-weight:800; color:#5e5ce6; margin-bottom:4px; }
  .compat-personal .cp-desc { font-size:13px; color:#3a3a3c; line-height:1.5; }

  .compat-together { background:#fff5f8; border-radius:12px; padding:12px 14px; margin-top:10px; font-size:13px; color:#3a3a3c; line-height:1.5; }
  #compat-status:empty { min-height:0; margin:0; }
  #compat-report-area .actions { flex-wrap:wrap; }
  #compat-report-area .actions .btn-download { flex:1 0 100%; }
  #compat-report-area .actions .btn-reset { flex:1 1 calc(50% - 5px); }

  @media (max-width:420px) {
    .compat-intro { padding-left:2px; padding-right:2px; }
    .compat-intro h2 { font-size:18px; }
    .compat-intro p { max-width:310px; }
    .compat-intro-topics span { font-size:10px; }
    .compat-intro-topics span + span::before { margin-left:6px; margin-right:6px; }
    .compat-title-wrap { padding-left:18px; padding-right:18px; }
    .compat-score-row { gap:14px; }
    .compat-score-note { max-width:250px; }
    .compat-recent-head p { max-width:210px; }
    .saju-recent { margin-bottom:12px; padding-bottom:12px; }
    .compat-recent { margin-bottom:12px; padding-bottom:12px; }
  }

  /* 홈 프로필: '나'는 대표 카드, 지인은 빠르게 훑는 작은 목록 카드로 구분 */
  .saved-list { display:grid; grid-template-columns:1fr; gap:9px; margin-bottom:18px; }
  .saved-row-item {
    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px;
    min-height:84px; background:#fff; border:1px solid rgba(222,222,228,.9); border-radius:18px;
    padding:11px 13px; position:relative; min-width:0;
    box-shadow:0 1px 2px rgba(0,0,0,.02), 0 4px 12px rgba(0,0,0,.028);
  }
  .sri-left { display:flex; align-items:center; gap:11px; min-width:0; }
  .sri-avatar-wrap { position:relative; width:44px; height:44px; flex:0 0 44px; }
  .sri-identity { min-width:0; }
  .sri-actions {
    display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:8px; min-width:0; background:transparent;
  }
  .sri-action {
    position:relative; flex:0 0 46px; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
    padding:0; border:1px solid #e5e1f7; border-radius:14px; background:#f6f4ff;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:background-color .16s ease, transform .16s ease;
  }
  .sri-action-saju { border-color:#f0e1e8; background:#fff5f8; }
  .sri-action-pgn { border-color:#eadcf0; background:linear-gradient(145deg,#f8f4ff,#fff4f8); }
  .sri-action img { width:27px; height:27px; display:block; pointer-events:none; }
  /* 타로(오늘 운세) 아이콘만 카드 3장이 겹쳐 다른 두 아이콘보다 선이 두껍고 밀집돼 보여서,
     내 사람들 카드에서만 표시 크기를 약 91%로 살짝 줄임(탭바 원본 SVG나 다른 곳의 크기는 그대로 둠) */
  .sri-action-today img { width:24.5px; height:24.5px; }
  .sri-action:active { transform:scale(.96); background:#ece9fb; }
  .sri-action-saju:active { background:#f9eaf0; }
  .sri-action-label {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .sri-name { overflow:hidden; color:#1d1d1f; font-size:14.5px; font-weight:800; letter-spacing:-.25px; text-overflow:ellipsis; white-space:nowrap; }
  .sri-relation {
    display:inline-flex; align-items:center; width:max-content; margin-top:5px; padding:3px 7px;
    border-radius:999px; background:rgba(118,118,128,.07); color:#7d7d84; font-size:9.5px; font-weight:650; line-height:1;
  }
  .sri-edit-info {
    display:none; margin-top:3px; padding:0; border:0; background:transparent;
    color:#5e5ce6; font-family:inherit; font-size:10.5px; font-weight:750; cursor:pointer;
  }
  .sri-avatar {
    width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden;
    background:#f4f2ff; border:1px solid #e9e5ff; color:var(--avatar-color,#5e5ce6);
    font-size:16px; font-weight:800;
  }
  .sri-avatar, .thc-avatar { padding:0; font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .sri-avatar img, .thc-avatar img, .mypage-photo-avatar img {
    width:100%; height:100%; display:block; object-fit:cover; pointer-events:none;
  }
  .sdel {
    position:absolute; top:-6px; left:-6px; z-index:2; width:20px; height:20px; padding:0; border:2px solid #fff;
    border-radius:50%; background:#ff3b30; color:#fff; font-size:16px; font-weight:700; line-height:1;
    display:none; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
    box-shadow:0 1px 4px rgba(0,0,0,.16);
  }
  .saved-list.is-editing .sdel { display:flex; }
  .saved-list.is-editing .sri-relation { display:none; }
  .saved-list.is-editing .sri-edit-info { display:block; }
  .sdel:active { background:#d92d23; }
  .saved-row-add {
    grid-column:1 / -1; display:flex; align-items:center; justify-content:center; min-height:48px; text-align:center; padding:12px; border-radius:16px; cursor:pointer;
    border:1px solid #e7e3fa; color:#5e5ce6; background:#faf9ff; font-size:12.5px; font-weight:700;
  }
  .saved-row-add .plus { font-size:15px; margin-right:2px; }

  .solo-today-section { margin-bottom:14px; }
  .stl-label { font-size:12px; font-weight:800; color:#6e6e73; margin: 4px 0 10px; }
  .stl-heading { display:flex; align-items:center; justify-content:space-between; margin:4px 0 10px; }
  .stl-heading .stl-label { margin:0; }
  .stl-copy { min-width:0; }
  .saved-edit-toggle {
    min-width:0; min-height:24px; padding:3px 2px; border:0; border-radius:0; background:transparent;
    color:#5e5ce6; font-size:10.5px; font-weight:750; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .saved-edit-toggle:active { opacity:.58; }
  .today-hero-card {
    display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:18px;
    min-height:104px; padding:16px 20px; border-radius:22px; margin-bottom:8px;
    background:linear-gradient(135deg,#6962e5 0%,#a654bd 52%,#e84d7e 100%);
    box-shadow:0 8px 20px -14px rgba(94,72,180,.42);
  }
  .thc-left { display:flex; align-items:center; justify-content:flex-start; gap:14px; min-width:0; }
  .thc-avatar-wrap { position:relative; width:68px; height:68px; flex:0 0 68px; }
  .thc-avatar {
    width:68px; height:68px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    overflow:hidden; font-size:25px; font-weight:750; color:#fff;
    background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.62);
  }
  .thc-me-star {
    position:absolute; top:-10px; left:50%; width:22px; height:22px; overflow:visible;
    transform:translateX(-50%); filter:drop-shadow(0 2px 3px rgba(72,48,120,.2));
    fill:#ffb340; stroke:#fff; stroke-width:3.2; stroke-linejoin:round; paint-order:stroke fill;
  }
  .thc-copy { min-width:0; }
  .thc-kicker { display:block; margin-bottom:4px; color:rgba(255,255,255,.72); font-size:9.5px; font-weight:750; letter-spacing:.04em; }
  .thc-name { max-width:112px; overflow:hidden; color:#fff; font-size:16px; font-weight:750; letter-spacing:-.25px; text-overflow:ellipsis; white-space:nowrap; }
  .thc-actions {
    display:flex; flex-direction:row; align-items:center; gap:8px; width:100%; min-width:0;
  }
  .thc-cta {
    position:relative; flex:1 1 50%; display:flex; align-items:center; justify-content:center; min-width:0; min-height:48px;
    padding:0 11px; border:1px solid rgba(255,255,255,.3); border-radius:13px;
    background:rgba(255,255,255,.13); color:#fff; font-size:13.5px; font-weight:750;
    white-space:nowrap; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .thc-cta:active { background:rgba(255,255,255,.1); }
  .thc-cta-pgn { flex:0 0 48px; padding:0; }
  .thc-cta-pgn img { width:25px; height:25px; filter:brightness(0) invert(1); opacity:.94; }

  @media (min-width:720px) {
    .saved-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .saved-row-item { grid-template-columns:minmax(0,1fr) auto; }
    .saved-row-add { grid-column:auto; min-height:84px; }
    .today-hero-card { grid-template-columns:auto 240px; justify-content:center; gap:22px; }
    .thc-left { justify-content:flex-start; }
    .thc-actions { width:240px; }
    .thc-actions.has-pgn { width:300px; }
  }

  /* 320~480px 모바일 폭 전체에서 같은 비율로 여백과 밀도를 조절합니다. */
  @media (max-width:480px) {
    .solo-today-section, .stl-heading, .saved-list {
      margin-left:clamp(10px,3.2vw,14px); margin-right:clamp(10px,3.2vw,14px);
    }
    .saved-list { gap:8px; margin-bottom:16px; }
    .today-hero-card {
      grid-template-columns:auto clamp(118px,40vw,176px); justify-content:space-between; min-height:clamp(90px,22vw,94px);
      padding:clamp(11px,3vw,13px) clamp(22px,6vw,24px); column-gap:clamp(14px,4vw,16px); border-radius:20px;
      box-shadow:0 7px 16px -15px rgba(73,53,150,.34);
    }
    .thc-left { justify-content:flex-start; gap:clamp(8px,2.3vw,10px); }
    .thc-avatar-wrap, .thc-avatar { width:68px; height:68px; }
    .thc-avatar-wrap { flex-basis:68px; }
    .thc-avatar { font-size:23px; }
    .thc-me-star { top:-11px; width:23px; height:23px; }
    .thc-copy { max-width:clamp(48px,13vw,58px); }
    .thc-name { max-width:100%; font-size:clamp(13.5px,3.65vw,15px); }
    .thc-actions { gap:clamp(4px,1.5vw,7px); }
    .thc-cta {
      min-height:clamp(38px,9.4vw,40px); padding-left:clamp(3px,1.2vw,5px); padding-right:clamp(3px,1.2vw,5px);
      border-color:rgba(255,255,255,.22); border-radius:11px;
      background:rgba(255,255,255,.1); font-size:clamp(10.5px,2.75vw,11.5px);
    }
    .saved-row-item {
      grid-template-columns:minmax(0,1fr) auto; min-height:clamp(72px,18vw,76px);
      padding:clamp(7px,1.9vw,8px) clamp(22px,6vw,24px); border-color:rgba(222,222,228,.66);
      border-radius:17px; box-shadow:0 1px 2px rgba(0,0,0,.018),0 3px 9px rgba(0,0,0,.022);
    }
    .sri-left { min-width:0; gap:clamp(8px,2.4vw,10px); }
    .sri-actions { min-width:0; gap:clamp(4px,1.4vw,6px); }
    .sri-action {
      flex-basis:clamp(38px,9.5vw,40px); width:clamp(38px,9.5vw,40px); height:clamp(38px,9.5vw,40px);
      border-color:rgba(218,213,242,.68); border-radius:12px; background:rgba(246,244,255,.68);
    }
    .sri-action-saju { border-color:rgba(237,218,227,.7); background:rgba(255,245,248,.7); }
    .sri-action-pgn { border-color:rgba(228,215,239,.72); background:linear-gradient(145deg,rgba(247,244,255,.8),rgba(255,245,249,.8)); }
    .sri-action img { width:clamp(22px,5.5vw,23px); height:clamp(22px,5.5vw,23px); }
    .sri-action-today img { width:clamp(20px,5vw,21px); height:clamp(20px,5vw,21px); }
    .sri-relation { background:rgba(118,118,128,.045); color:#85858b; }
    .saved-row-add { min-height:44px; border-color:rgba(226,221,249,.72); background:rgba(250,249,255,.72); }
  }

  @media (max-width:340px) {
    .today-hero-card { grid-template-columns:auto 118px; justify-content:space-between; column-gap:12px; padding-left:18px; padding-right:18px; }
    .thc-me-star { width:22px; height:22px; }
    .thc-kicker { font-size:9px; }
    .thc-copy { max-width:48px; }
    .thc-actions { gap:4px; }
    .thc-cta-pgn { flex-basis:38px; }
    .saved-row-item { grid-template-columns:minmax(0,1fr) auto; padding-left:18px; padding-right:18px; }
  }

  /* ---------- 앱 셸: 하단 탭바 + 화면 구조 ---------- */
  body {
    padding-top: env(safe-area-inset-top); /* viewport-fit=cover로 콘텐츠가 상태바 밑까지 확장되면서 사라진 상단 여백 복원 */
    padding-bottom: calc(78px + env(safe-area-inset-bottom)); /* 고정 탭바에 콘텐츠 가려지지 않도록 */
  }
  /* 화면별 상단 여백: 홈은 더 넉넉하게, 타로는 살짝 좁게, 나머지는 기존 44px 유지.
     사주/궁합 박스(.form-card)는 위쪽만 늘리면 아래쪽과 안 맞아 어색해서, 위아래를 함께 20px로 맞춤 */
  #screen-home .home-header { margin-top:40px; }
  #screen-fortune .fortune-hub-header { margin-top:12px; }
  #screen-solo > .form-card {
    padding-top:16px; padding-bottom:20px;
    margin-top:-6px; margin-bottom:-20px; /* 너무 좁아 보인다는 피드백으로 상단 여백을 살짝 다시 늘림 */
  }
  #screen-compat > .form-card {
    padding-top:20px; padding-bottom:20px;
    margin-top:-6px; margin-bottom:-20px; /* .wrap의 상단(24px)보다 하단(50px) 패딩이 커서 카드 위/아래 빈 공간이 안 맞던 것을, 카드를 위로 당기고 하단 빈 공간을 줄여 비율을 맞춤 */
  }
  #screen-mypage > .mypage-section:first-child { padding-top:20px; }
  .app-screen { display:none; }
  .app-screen.active { display:block; }
  .bottom-tabbar {
    position:fixed; left:0; right:0; bottom:0; height:calc(64px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid #ececec; display:flex; z-index:500;
    box-shadow:0 -2px 12px rgba(0,0,0,0.04);
  }
  .tab-item {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    background:none; border:none; cursor:pointer; color:#a1a1a6; font-size:10.5px; font-weight:700;
    -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  }
  .tab-item .tab-icon {
    width:44px; height:28px; display:flex; align-items:center; justify-content:center;
    line-height:1; transition:transform 0.15s ease, background 0.15s ease;
    padding:2px 10px; border-radius:12px;
  }
  .tab-item .tab-icon img {
    display:block; width:24px; height:24px; pointer-events:none;
    -webkit-user-drag:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  }
  .tab-item.active { color:#5e5ce6; }
  .tab-item.active .tab-icon { transform:translateY(-1px) scale(1.08); background:rgba(94,92,230,0.14); }
  .tab-item .tab-badge {
    position:absolute; margin-left:14px; margin-top:-16px; width:8px; height:8px; border-radius:50%;
    background:#ff375f; box-shadow:0 0 0 2px #fff;
  }

  /* 홈 화면 */
  .home-header { text-align:center; margin: 6px 0 20px; }
  .home-header .mark { margin-bottom: 10px; }
  .home-greeting { font-size:15px; font-weight:800; color:#1d1d1f; margin-bottom:2px; }
  .home-sub { font-size:12.5px; color:#86868b; }
  .home-empty {
    text-align:center; padding:32px 16px; background:#fff; border-radius:18px;
    box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.05);
  }
  .home-empty .he-icon-wrap { position:relative; display:inline-block; margin-bottom:10px; }
  .home-empty .he-icon { font-size:36px; display:block; }
  .home-empty .he-icon-wrap .fm-sparkle { font-size:13px; }
  .home-empty p { font-size:13px; color:#6e6e73; margin: 0 0 16px; line-height:1.5; white-space:pre-line; }
  .home-cta-btn {
    display:inline-block; padding:14px 28px; border-radius:14px; border:none; cursor:pointer;
    background:linear-gradient(135deg,#5e5ce6,#ff375f); color:#fff; font-size:14px; font-weight:800;
  }

  /* 마이페이지 화면 */
  .mypage-section { background:#fff; border-radius:16px; padding:18px; margin-bottom:14px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
  .mypage-section h3 { font-size:13px; font-weight:800; color:#1d1d1f; margin:0 0 12px; }
  .mypage-login-desc { font-size:13.5px; font-weight:800; color:#1d1d1f; text-align:center; margin:0 0 16px; }
  .mli-benefits { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
  .home-benefits { margin-top:24px; margin-bottom:0; flex-direction:column; align-items:center; }
  .mli-benefit-row { display:flex; justify-content:center; gap:8px; }
  .mli-benefit {
    display:inline-flex; align-items:center; padding:7px 13px; border-radius:20px;
    background:linear-gradient(135deg,#f7f5ff,#fff5f8); color:#5e5ce6; font-size:11px; font-weight:700; white-space:nowrap;
  }
  .home-benefits .mli-benefit {
    position:relative; overflow:hidden;
    animation: chipBounce 1.8s ease-in-out infinite;
    animation-delay: var(--d, 0s);
  }
  .home-benefits .mli-benefit::after {
    content:''; position:absolute; top:0; left:-100%; width:55%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.85), transparent);
    animation: chipShine 3.2s ease-in-out infinite;
    animation-delay: var(--d, 0s);
  }
  html[data-language="en"] .home-benefits .mli-benefit-row {
    width:100%; flex-wrap:wrap; gap:6px;
  }
  html[data-language="en"] .home-benefits .mli-benefit {
    padding-left:9px; padding-right:9px;
  }
  @media (max-width:350px) {
    .home-benefits .mli-benefit-row { max-width:220px; flex-wrap:wrap; gap:6px; }
  }
  @keyframes chipBounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
  @keyframes chipShine { 0% { left:-100%; } 35% { left:130%; } 100% { left:130%; } }
  .mypage-balance-row {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding:14px 16px;
    border-radius:14px; background:linear-gradient(135deg,#f7f5ff,#fff5f8);
  }
  .mypage-balance-label { font-size:12.5px; font-weight:700; color:#6e6e73; }
  .mypage-balance-num { font-size:20px; font-weight:800; background:linear-gradient(135deg,#5e5ce6,#ff375f); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  .reassign-me-link {
    display:block; width:100%; text-align:center; margin-top:14px; padding-top:14px; border-top:1px solid #f0f0f0;
    background:none; border-left:none; border-right:none; border-bottom:none; font-size:12px; font-weight:700; color:#5e5ce6; cursor:pointer;
  }
  .mypage-profile { display:flex; align-items:center; justify-content:space-between; }
  .mypage-profile .mp-email { font-size:13px; font-weight:700; color:#1d1d1f; }
  .mypage-photo-section {
    position:relative; overflow:hidden;
    transition:opacity .32s ease, transform .32s ease, box-shadow .32s ease;
  }
  .mypage-photo-section > * { transition:opacity .28s ease, transform .28s ease; }
  .mypage-photo-section.is-loading { min-height:150px; }
  .mypage-photo-section.is-loading > * { opacity:0; transform:translateY(5px); pointer-events:none; }
  .mypage-photo-section.is-loading::after {
    content:''; position:absolute; inset:18px; border-radius:12px;
    background:
      radial-gradient(circle at 29px 29px,#e8e5f4 0 28px,transparent 29px),
      linear-gradient(#e8e5f4 0 0) 74px 8px / 32% 14px no-repeat,
      linear-gradient(#f0eef6 0 0) 74px 34px / 58% 10px no-repeat,
      linear-gradient(100deg,transparent 20%,rgba(255,255,255,.78) 46%,transparent 72%) -160px 0 / 160px 100% no-repeat,
      #faf9fd;
    animation:mypageProfileLoading 1.25s ease-in-out infinite;
  }
  @keyframes mypageProfileLoading {
    0% { background-position:0 0,74px 8px,74px 34px,-160px 0,0 0; }
    100% { background-position:0 0,74px 8px,74px 34px,calc(100% + 160px) 0,0 0; }
  }
  .mypage-photo-row { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:12px; }
  .mypage-photo-avatar {
    width:58px; height:58px; padding:0; overflow:hidden; border:1px solid #e8e4fb; border-radius:50%;
    background:#f4f2ff; color:#5e5ce6; font-family:inherit; font-size:19px; font-weight:800; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mypage-photo-copy { min-width:0; }
  .mypage-photo-name { overflow:hidden; color:#1d1d1f; font-size:13.5px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
  .mypage-photo-note { margin-top:4px; color:#8e8e93; font-size:10.5px; line-height:1.4; }
  .mypage-photo-change {
    min-height:34px; padding:0 11px; border:1px solid #e7e3f8; border-radius:10px; background:#f7f5ff;
    color:#5e5ce6; font-family:inherit; font-size:10.5px; font-weight:750; cursor:pointer;
  }
  .mypage-profile-edit {
    width:100%; margin-top:14px; padding:11px 0 0; border:0; border-top:1px solid #f0f0f2; background:transparent;
    color:#5e5ce6; font-family:inherit; font-size:11px; font-weight:750; cursor:pointer;
  }
  .mypage-photo-remove {
    width:100%; margin-top:12px; padding:10px 0 0; border:0; border-top:1px solid #f0f0f2; background:transparent;
    color:#ff3b30; font-family:inherit; font-size:10.5px; font-weight:700; cursor:pointer;
  }

  @media (prefers-reduced-motion: reduce) {
    .mypage-photo-section,
    .mypage-photo-section > * { transition:none; }
    .mypage-photo-section.is-loading::after { animation:none; }
  }

  /* 프로필 사진이 있을 때만 변경·삭제 선택지를 보여주는 iOS형 하단 시트 */
  .profile-photo-sheet {
    position:fixed; inset:0; z-index:2600; display:flex; align-items:flex-end; justify-content:center;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .profile-photo-sheet-backdrop { position:absolute; inset:0; padding:0; border:0; background:rgba(0,0,0,.28); }
  .profile-photo-sheet-backdrop { animation:profilePhotoFadeIn .18s ease both; }
  .profile-photo-sheet-panel { position:relative; width:min(100%,420px); animation:profilePhotoSheetUp .22s cubic-bezier(.2,.8,.2,1) both; }
  .profile-photo-sheet-title {
    padding:12px 16px 9px; border-radius:15px 15px 0 0; background:rgba(250,250,252,.98);
    color:#8e8e93; font-size:10.5px; font-weight:650; text-align:center;
  }
  .profile-photo-sheet-action {
    width:100%; min-height:49px; padding:0 16px; border:0; border-top:1px solid #e5e5ea; background:rgba(250,250,252,.98);
    color:#5e5ce6; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  }
  .profile-photo-sheet-remove { border-radius:0 0 15px 15px; color:#ff3b30; }
  .profile-photo-sheet-panel:not(.has-photo) [data-photo-action="change"] { border-radius:0 0 15px 15px; }
  .profile-photo-sheet-cancel { margin-top:8px; border-top:0; border-radius:15px; background:#fff; color:#1d1d1f; }
  @keyframes profilePhotoFadeIn { from { opacity:0; } to { opacity:1; } }
  @keyframes profilePhotoSheetUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
  @media (prefers-reduced-motion:reduce) {
    .profile-photo-sheet-backdrop, .profile-photo-sheet-panel { animation:none; }
  }

  /* 프로필의 이름·생년월일시를 안전하게 수정하는 집중형 편집 시트 */
  body.profile-modal-open { overflow:hidden; }
  .profile-edit-overlay {
    position:fixed; inset:0; z-index:2700; display:flex; align-items:center; justify-content:center;
    padding:20px;
  }
  .profile-edit-backdrop { position:absolute; inset:0; padding:0; border:0; background:rgba(0,0,0,.32); animation:profilePhotoFadeIn .18s ease both; }
  .profile-edit-card {
    position:relative; width:min(100%,460px); max-height:min(760px,calc(100vh - 40px)); overflow:auto;
    padding:21px; border:1px solid rgba(255,255,255,.68); border-radius:22px; background:rgba(255,255,255,.98);
    box-shadow:0 24px 60px rgba(24,20,48,.2); animation:profileEditIn .22s cubic-bezier(.2,.8,.2,1) both;
  }
  .profile-edit-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
  .profile-edit-kicker { margin-bottom:4px; color:#8e8e93; font-size:9px; font-weight:750; letter-spacing:.16em; }
  .profile-edit-header h3 { margin:0; color:#1d1d1f; font-size:19px; font-weight:800; }
  .profile-edit-close {
    width:30px; height:30px; padding:0; border:0; border-radius:50%; background:#f2f2f7;
    color:#8e8e93; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  }
  .profile-edit-fields { display:flex; flex-direction:column; gap:15px; }
  .profile-edit-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .profile-edit-grid3 { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:8px; }
  .profile-edit-field { display:flex; flex-direction:column; min-width:0; }
  .profile-edit-field[hidden] { display:none; }
  .profile-edit-field > span { margin-bottom:7px; color:#6e6e73; font-size:11px; font-weight:750; }
  .profile-edit-field input, .profile-edit-field select {
    width:100%; height:45px; min-width:0; padding:0 12px; border:1px solid #e5e5ea; border-radius:12px;
    outline:0; background:#f8f8fa; color:#1d1d1f; font-family:inherit; font-size:13px; font-weight:600;
  }
  .profile-edit-field input:focus, .profile-edit-field select:focus { border-color:#aaa5ef; box-shadow:0 0 0 3px rgba(94,92,230,.09); }
  .profile-edit-field input:disabled { color:#a1a1a6; background:#f2f2f7; }
  .profile-edit-time-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .profile-edit-notime {
    display:flex; align-items:center; gap:8px; min-height:45px; padding:0 12px; border:1px solid #e5e5ea;
    border-radius:12px; background:#f8f8fa; color:#6e6e73; font-size:11px; font-weight:650;
  }
  .profile-edit-notime input { width:17px; height:17px; padding:0; accent-color:#5e5ce6; }
  .profile-edit-note {
    margin-top:16px; padding:11px 12px; border-radius:12px; background:#f7f5ff;
    color:#6e6e73; font-size:10.5px; line-height:1.5;
  }
  .profile-edit-status { min-height:18px; margin-top:8px; color:#ff3b30; font-size:10.5px; line-height:1.4; }
  .profile-edit-actions { display:grid; grid-template-columns:1fr 1.35fr; gap:9px; margin-top:4px; }
  .profile-edit-actions button {
    min-height:46px; border:0; border-radius:13px; font-family:inherit; font-size:13px; font-weight:750; cursor:pointer;
  }
  .profile-edit-cancel { background:#f2f2f7; color:#3a3a3c; }
  .profile-edit-save { background:linear-gradient(135deg,#5e5ce6,#cf4a99); color:#fff; }
  .profile-edit-save:disabled { opacity:.55; }
  @keyframes profileEditIn { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
  @media (max-width:560px) {
    .profile-edit-overlay { align-items:flex-end; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); }
    .profile-edit-card { max-height:calc(100vh - 28px); padding:20px 18px; border-radius:22px; }
    .profile-edit-header { margin-bottom:18px; }
  }
  @media (max-width:370px) {
    .profile-edit-grid2 { grid-template-columns:1fr; }
    .profile-edit-time-row { grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion:reduce) {
    .profile-edit-backdrop, .profile-edit-card { animation:none; }
  }
  .mypage-earn-row { display:flex; flex-direction:column; gap:8px; }
  .mypage-earn-row .premium-earn-btn { width:100%; }

  .mypage-notify-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; }
  .mypage-language-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:6px 0; }
  .mypage-language-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:3px; }
  .app-language-select { flex:0 0 auto; min-width:104px; }
  .mypage-notify-row + .mypage-notify-row { border-top:1px solid #f0f0f0; padding-top:14px; margin-top:4px; }
  .mn-title { font-size:13px; font-weight:700; color:#1d1d1f; }
  .mn-sub { font-size:11px; color:#a1a1a6; margin-top:2px; }
  .mn-toggle { position:relative; display:inline-block; width:44px; height:26px; flex:0 0 auto; }
  .mn-toggle input { opacity:0; width:0; height:0; }
  .mn-toggle-slider {
    position:absolute; inset:0; background:#e5e5ea; border-radius:26px; cursor:pointer; transition:background 0.2s ease;
  }
  .mn-toggle-slider::before {
    content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%;
    transition:transform 0.2s ease; box-shadow:0 1px 3px rgba(0,0,0,0.15);
  }
  .mn-toggle input:checked + .mn-toggle-slider { background:linear-gradient(135deg,#5e5ce6,#ff375f); }
  .mn-toggle input:checked + .mn-toggle-slider::before { transform:translateX(18px); }
  .mn-hour-select {
    border:1px solid #e5e5ea; border-radius:10px; padding:7px 10px; font-size:13px; font-weight:700; color:#1d1d1f;
    background:#fff; -webkit-tap-highlight-color:transparent;
  }

  @media (prefers-reduced-motion:reduce) {
    .solo-intro h2 {
      animation:guidedTitleReduced 6s ease-in-out infinite; background-image:linear-gradient(135deg,#5e5ce6,#ff375f); background-size:100% 100%; background-position:0 0;
    }
    .compat-intro h2 {
      animation:guidedTitleReduced 6s ease-in-out infinite; background-image:linear-gradient(#1d1d1f,#1d1d1f); background-size:100% 100%; background-position:0 0;
    }
    .solo-intro-elements span, .solo-intro-elements::before, .solo-intro-elements::after, .compat-connection > span { animation:none; }
    .solo-intro-elements span { opacity:.82; transform:none; filter:none; }
    .solo-intro-elements::after { opacity:.76; transform:translate(-50%,-50%) scale(1); }
  }

  /* 앱 셸 타이포 위계 */
  .mode-tab,
  .compat-recent-head h3, .compat-recent-names,
  .saju-recent-head h3,
  .person-summary-pill .psp-text,
  .compat-title-badge,
  .compat-personal .cp-name, .compat-personal .cp-desc, .compat-together,
  .saved-row-add,
  .thc-cta,
  .home-empty p, .home-cta-btn,
  .mypage-section h3, .mypage-login-desc,
  .mypage-photo-name,
  .profile-photo-sheet-action,
  .profile-edit-field input, .profile-edit-field select,
  .profile-edit-actions button,
  .mn-title, .mn-hour-select {
    font-size:var(--type-body);
  }

  .solo-intro p, .compat-intro p,
  .compat-recent-head p, .compat-recent-summary,
  .saju-recent-head p,
  .compat-header .sub2, .compat-score-label, .compat-score-note,
  .home-sub,
  .mypage-balance-label, .reassign-me-link,
  .mypage-profile .mp-email, .mypage-photo-note,
  .profile-edit-note,
  .mn-sub {
    font-size:var(--type-secondary);
  }

  .person-block .person-label,
  .compat-intro-topics span,
  .compat-recent-score, .compat-recent-delete,
  .saju-recent-edit, .saju-recent-name,
  .person-order, .compat-chip,
  .person-summary-pill .psp-edit,
  .compat-summary-kicker, .compat-score-total,
  .sri-relation, .sri-edit-info,
  .stl-label, .saved-edit-toggle,
  .thc-kicker,
  .tab-item,
  .mli-benefit,
  .mypage-photo-change, .mypage-profile-edit, .mypage-photo-remove,
  .profile-photo-sheet-title,
  .profile-edit-kicker, .profile-edit-field > span,
  .profile-edit-notime, .profile-edit-status {
    font-size:var(--type-meta);
  }

  /* 모바일 밀집 영역은 글자를 바로 줄이기보다 버튼 폭과 간격을 먼저 확보합니다. */
  @media (max-width:480px) {
    .today-hero-card {
      grid-template-columns:auto clamp(132px,42vw,176px);
      padding-left:clamp(18px,5vw,22px); padding-right:clamp(18px,5vw,22px);
      column-gap:clamp(10px,3vw,14px);
    }
    .thc-cta {
      padding-left:clamp(3px,1vw,4px); padding-right:clamp(3px,1vw,4px);
      font-size:clamp(11.5px,3vw,12px); letter-spacing:-.08px;
    }
    .thc-actions.has-pgn { gap:4px; }
    .thc-actions.has-pgn .thc-cta:not(.thc-cta-pgn) { padding-left:2px; padding-right:2px; font-size:11.5px; }
    .thc-cta-pgn { flex-basis:42px; }
  }

  @media (max-width:340px) {
    .today-hero-card { grid-template-columns:auto 132px; column-gap:10px; padding-left:16px; padding-right:16px; }
    .today-hero-card:has(.thc-actions.has-pgn) {
      grid-template-columns:1fr; row-gap:10px; min-height:128px; padding-top:12px; padding-bottom:12px;
    }
    .today-hero-card:has(.thc-actions.has-pgn) .thc-left { width:100%; }
    .today-hero-card:has(.thc-actions.has-pgn) .thc-actions { width:100%; gap:5px; }
    .today-hero-card:has(.thc-actions.has-pgn) .thc-cta:not(.thc-cta-pgn) { min-height:40px; font-size:12px; }
    .today-hero-card:has(.thc-actions.has-pgn) .thc-cta-pgn { flex-basis:40px; min-height:40px; }
  }
.saved-language-notice {
  max-width:640px;
  margin:0 auto 12px;
  padding:10px 12px;
  border:1px solid #dedaf3;
  border-radius:12px;
  background:#f7f5ff;
  color:#625c78;
  font-size:12px;
  line-height:1.45;
  text-align:center;
  word-break:keep-all;
}
.saved-language-notice[hidden] { display:none; }