/* ══ 아래 메뉴 · 머리 단추 · 알림 · 포인트 · 고민 묻기 (2026-10-19 · 지시-1019a · 1022h · 1022i) ══
   @media 는 10-media.css 에 둔다. 여기는 모양만. 글자 크기는 토큰(--fs-*)만 쓴다. */

/* 아래 메뉴 – 바닥에서 띄운 둥근 상자(지시-1022i 2번). 다섯 칸 · 칸 사이 옅은 세로줄 · 지금 화면 칸은 금빛 */
.dock{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;max-width:40rem;margin:0 auto;
  background:var(--dock-bg);border-radius:26px;
  box-shadow:inset 0 0 0 1px var(--accent-ring),0 6px 18px rgba(0,0,0,.25)}
.dock[hidden]{display:none}
.dockin{display:flex;align-items:stretch;padding:12px 2px 13px}
.dk{flex:1 1 0;min-width:0;min-height:58px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.15rem;background:none;border:0;font:inherit;font-size:var(--fs-xs);
  color:var(--ink-2);cursor:pointer;position:relative;padding:.35rem .1rem;line-height:1.2;white-space:nowrap}
.dk + .dk::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--dock-line)}
.dk span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dk:hover,.dk:focus-visible{color:var(--accent-ink)}
.dk.on{color:var(--accent)}
.dk.on::after{content:"";position:absolute;bottom:-13px;width:34px;height:2.5px;border-radius:2px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.dki{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* 홈 칸 – 지금 화면이 홈이면 속이 찬 집 모양 */
.dk-home .dki-on{display:none}
.dk-home.on .dki-on{display:block}
.dk-home.on .dki-off{display:none}
.dkn{position:absolute;top:.3rem;left:calc(50% + .45rem);min-width:1.25rem;height:1.25rem;padding:0 .3rem;
  border-radius:999px;background:var(--warn);color:#fff;font-size:var(--fs-xs);font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.dkn[hidden]{display:none}
/* 지시-1022p – 맨 아래 글이 메뉴에 가려지지 않게: 메뉴 높이(83) + 띄움(10) + 여백(16) + 안전 영역 */
body.hasdock{padding-bottom:calc(109px + env(safe-area-inset-bottom))}

/* 머리 단추 – 알림 종(오른쪽). 안 본 알림이 있으면 빨간 점(지시-1022i 1번) */
.headbell{position:relative;flex:none;align-self:center;width:44px;height:44px;margin:0 0 0 .1rem;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:999px;color:var(--ink-2);cursor:pointer}
.headbell .dki{width:22px;height:22px}
/* 소개 페이지(body.app 없음)에는 알림 종이 없다 – 알림은 앱 안에서만 */
body:not(.app) .headbell{display:none!important}
.hdot{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 2px var(--head-bg)}
.hdot[hidden]{display:none}
/* 로그인 단추는 종 왼쪽의 작은 글자 */
.prog .who button,body.night .prog .who button{border:1.5px solid var(--rule-2);border-radius:999px;background:none;padding:.3rem .9rem;min-height:40px;
  font-family:inherit;font-size:var(--fs-sm);color:var(--ink-2)}
.prog .who button:hover{color:var(--gold)}
/* 내리면 머리줄 뒤가 살짝 흐려진다 (21-dock.js headScroll 이 붙인다) */
body .prog.scrolled,body.night .prog.scrolled{background:var(--head-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--rule)}

/* 누를 때 살짝 눌리는 느낌 · 파란 테두리 없음 (지시-1022i 3번). 줄이기 설정이면 움직이지 않는다. */
button,a{-webkit-tap-highlight-color:transparent}
.dk,.allic,.allpt-in,.headbell,.ptfb,.allsubbtn{transition:transform .12s ease}
.dk:active,.allic:active,.allpt-in:active,.headbell:active,.ptfb:active,.allsubbtn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  .dk,.allic,.allpt-in,.headbell,.ptfb,.allsubbtn{transition:none}
  .dk:active,.allic:active,.allpt-in:active,.headbell:active,.ptfb:active,.allsubbtn:active{transform:none}
}

/* 알림 · 포인트 · 고민 묻기 공통 */
.ntop{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin:.6rem 0;font-size:var(--fs-sm)}
.linkb{background:none;border:0;padding:.3rem .2rem;font:inherit;font-size:var(--fs-sm);color:var(--accent-ink);
  text-decoration:underline;cursor:pointer;min-height:40px}
.nlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.nitem{border-bottom:1px solid var(--rule)}
.nitem > button{display:flex;width:100%;gap:.7rem;align-items:flex-start;text-align:left;background:none;
  border:0;padding:.8rem .2rem;font:inherit;color:var(--ink);cursor:pointer;min-height:48px}
.nd{flex:none;width:.55rem;height:.55rem;border-radius:50%;margin-top:.5rem;background:transparent}
.nitem.unseen .nd{background:var(--warn)}
.nbody{display:block;min-width:0;flex:1}
.nt{display:block;font-size:var(--fs-base);font-weight:700;color:var(--ink)}
.nbline{display:block;font-size:var(--fs-md);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nw{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:.15rem}
.nitem .prow{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;padding:.8rem .2rem .1rem}
.nitem .prow .nt{font-weight:600}
.pd{font-size:var(--fs-base);font-weight:700;white-space:nowrap}
.pd.plus{color:var(--accent-ink)}
.pd.minus{color:var(--ink-2)}
.pbox{margin:.9rem 0;padding:1rem 1.05rem;border:1px solid var(--rule-2);border-radius:14px;background:var(--surface)}
.pbox p{margin:.35rem 0}
.pbig{font-size:var(--fs-3xl);font-weight:700;color:var(--ink);line-height:1.2;margin:.2rem 0}
.pwarn{color:var(--warn);font-size:var(--fs-sm);font-weight:600}
.pbstat{list-style:none;margin:.5rem 0 0;padding:0}
.pbstat li{padding:.25rem 0;font-size:var(--fs-md)}
.pth{font-size:var(--fs-lg);margin:1.2rem 0 .3rem}
.pairclosefull{margin-top:1rem}

/* 포인트함 (지시-1022h 2번) – 맨 위 상자 · 쌓임 · 씀 · 사라짐 세 칸 · 골라 보기 · 표 · 맨 아래 접힌 안내 */
.ptrio{list-style:none;margin:.5rem 0 0;padding:.4rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;border-top:1px solid var(--rule)}
.ptrio li{display:flex;flex-direction:column;gap:.2rem;min-width:0;padding:.4rem .2rem;font-size:var(--fs-sm);color:var(--ink-2)}
.ptrio .pd{font-size:var(--fs-md)}
.ptfilter{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 .4rem}
.ptfb{flex:1 1 4.2rem;min-height:44px;border:1px solid var(--rule-2);border-radius:999px;background:var(--surface);
  font:inherit;font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer}
.ptfb[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-ink);color:var(--accent-ink);font-weight:700}
/* 1023g – 포인트 표는 grid 한 틀. 머리줄 · 내역 줄이 같은 칸 폭을 써서 위아래가 맞는다 */
.ptgrid{font-size:var(--fs-sm);color:var(--ink-2)}
.ptrow{display:grid;grid-template-columns:4em minmax(0,9.5em) 1fr 4.4em 2.8em;column-gap:8px;align-items:center;padding:.6rem .2rem;border-bottom:1px solid var(--rule)}
.ptrow>span{min-width:0;white-space:nowrap}
/* 가운데 빈 칸(1fr)은 내용과 포인트 사이 – 포인트 · 기한은 오른쪽 끝에 붙는다 */
.ptrow>span:nth-child(3){grid-column:4}
.ptrow>span:nth-child(4){grid-column:5}
/* 머리줄도 같은 글자 크기(em 칸이 맞도록)에서 글만 작게 */
.pthead{padding:.4rem .2rem;font-weight:600;color:var(--ink-2)}
.pthead>span{font-size:var(--fs-xs)}
.pthead>span:nth-child(n+3){text-align:right}
.ptdt{color:var(--ink-2)}
.ptc{display:flex;align-items:center;min-width:0;font-size:var(--fs-md);color:var(--ink)}
.ptl{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ptp{font-size:var(--fs-md);font-weight:700;text-align:right}
.ptx{text-align:right;color:var(--ink-2)}
.ptguide{margin:1.2rem 0 .4rem;border-top:1px solid var(--rule);padding-top:.2rem}
.ptguide summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:var(--fs-md);color:var(--accent-ink);font-weight:600}
.ptguide p{font-size:var(--fs-md);color:var(--ink-2);margin:.4rem 0}

/* 전체 화면 (☰ · 지시-1022h 1번 · 1022j 시안 그대로) – 머리줄 · 포인트 띠 · 바로 하기 · 따로 보는 풀이 · 도움 · 맨 아래 한 줄 */
.allhead{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin:.2rem 0 .6rem}
.allname{margin:0;font-family:"Gowun Batang",serif;font-size:var(--fs-xl);font-weight:700;color:var(--ink)}
.allside{display:flex;align-items:center;gap:.35rem;margin:0;font-size:var(--fs-sm)}
.allside .linkb{min-height:44px;padding:0 .2rem}
.sep{color:var(--ink-2)}
/* 포인트 띠 – 테두리는 금빛 한 줄(장식), 쓰는 곳은 청록(--accent) */
.allpt{margin:0}
.allpt-in{display:flex;width:100%;align-items:center;gap:.5rem;min-height:52px;padding:12px 14px;box-sizing:border-box;
  background:var(--surface);border:0;border-radius:14px;box-shadow:inset 0 0 0 1px var(--gold-soft);
  font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.allpt-t{font-size:var(--fs-sm);color:var(--ink-2)}
.allpt-v{margin-left:auto;font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.allpt-use{font-size:var(--fs-xs);font-weight:600;color:var(--accent-ink);white-space:nowrap}
.allpt-x{margin:.35rem .2rem 0;font-size:var(--fs-xs);color:var(--ink-2)}
.allpt .acts{margin-top:.5rem}
/* 소제목 – 금빛 막대 한 줄(장식) */
.allsec{margin:0}
.allh{display:flex;align-items:center;gap:8px;margin:20px 0 14px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.allh::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--gold);flex:none}
.allgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 6px}
/* 바로 하기 · 도움 – 틀 없는 선 아이콘(30px) */
.allic{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;padding:0;background:none;border:0;
  font:inherit;color:var(--ink);cursor:pointer;text-align:center;text-decoration:none;line-height:1.3}
.allic[hidden]{display:none}
.allic .lb{font-size:var(--fs-xs);color:var(--ink);word-break:keep-all}
.allic .pl{width:30px;height:30px;color:var(--ink);fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* 따로 보는 풀이 – 채우지 않은 색 테두리 원(62px) + 큰 그림(38px). 색은 풀이마다 따로.
   ★ 이름을 .pring 으로 둔다 – .bd 는 첫 화면 명리 칸(p.bd)이 쓰는 이름이라 겹치면 그 칸이 찌그러진다(지시-1022l 2). */
.pring{flex:none;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px currentColor}
.pring svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.c-newyear{color:#b8452f}
body.night .c-newyear,:root[data-theme="dark"] .c-newyear{color:#e8866b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c-newyear{color:#e8866b}}
.c-life2{color:#2a7c6c}
body.night .c-life2,:root[data-theme="dark"] .c-life2{color:#63bba8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c-life2{color:#63bba8}}
.c-again{color:#66761d}
body.night .c-again,:root[data-theme="dark"] .c-again{color:#adc25a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c-again{color:#adc25a}}
.c-close{color:#a63c67}
body.night .c-close,:root[data-theme="dark"] .c-close{color:#dc7aa0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c-close{color:#dc7aa0}}
.c-diet{color:#b0661c}
body.night .c-diet,:root[data-theme="dark"] .c-diet{color:#e8a35a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c-diet{color:#e8a35a}}
.c-health{color:#33589a}
body.night .c-health,:root[data-theme="dark"] .c-health{color:#7ea2e2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c-health{color:#7ea2e2}}
.allsoon{display:block;font-size:var(--fs-xs);color:var(--ink-2);margin-top:-4px}
.allsub{margin-top:.6rem}
.allsub > .tag{margin:0 0 .4rem;font-family:"Gowun Batang",serif;font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.allsubbtn{display:block;width:100%;min-height:52px;margin:.4rem 0;padding:.7rem .8rem;box-sizing:border-box;text-align:left;
  background:var(--surface);border:1px solid var(--rule-2);border-radius:10px;font:inherit;font-size:var(--fs-md);line-height:1.5;color:var(--ink);cursor:pointer}
.allsubbtn:hover,.allsubbtn:focus-visible{border-color:var(--accent-ink);background:var(--accent-soft)}
/* 도움 – 소제목 없이 얇은 선 아래 네 칸 */
.allhelp{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.allfoot{margin:1.6rem 0 0;padding-top:.8rem;border-top:1px solid var(--rule);font-size:var(--fs-sm);line-height:2.1;color:var(--ink-2);text-align:center}
.allfoot a{color:var(--ink-2)}
.allfoot .linkb{min-height:44px;padding:0 .2rem;color:var(--ink-2)}
.allin[hidden],#all-sep[hidden],#all-pt-x[hidden],#all-dplist[hidden],.allsoon[hidden]{display:none}
#ask-box textarea{width:100%;box-sizing:border-box;min-height:6rem;font:inherit;font-size:var(--fs-base);
  padding:.6rem .7rem;border:1.5px solid var(--rule-2);border-radius:10px;background:var(--surface);color:var(--ink);resize:vertical}
#ask-box textarea:focus{outline:2px solid var(--accent-line);outline-offset:1px}
#notice-list,#points-box,#ask-box,#set-box{overflow-wrap:anywhere}

/* 화면 밝기 세 칸 – 좁은 폰에서 줄을 바꾼다(지시-1019b). 글자 크기는 그대로. */
#themecal{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
#themecal .calopt{flex:1 1 7rem;justify-content:center;min-height:52px}

/* 소개하고 함께 받기 (지시-1019c) */
.refline{margin:.2rem 0 .8rem;font-size:var(--fs-sm);color:var(--accent-ink);font-weight:600;line-height:1.5}
.refline[hidden]{display:none}
.reflink{word-break:break-all;font-size:var(--fs-md);color:var(--ink);margin:.3rem 0 .6rem}

/* 지시-1022o – 내 정보 맨 위 「로그인 계정」 한 줄. 고칠 수 없는 글자(입력 칸이 아니다). */
.pf-acct{margin:0 0 .7rem;font-size:var(--fs-sm);color:var(--ink-2);word-break:break-all}

/* 지시-1022p – 생년월일 칸: 날짜 칸은 첫 줄 혼자, 둘째 줄에 [오전|오후] [  ]시 [  ]분. 세 칸 높이 같게, 가운데 정렬. */
.inputs > input[type=text]{flex:0 0 auto;width:12.5rem;max-width:100%;min-width:0;height:44px}
.inputs > .hourbox{flex:0 0 100%;margin:0}
.inputs .hourbox .hap,.inputs .hourbox .hh,.inputs .hourbox .hmin{height:44px;min-height:44px}
.inputs .hourbox .hh,.inputs .hourbox .hmin{width:3.4em;min-width:3.2em;font-family:inherit;font-size:var(--fs-base);text-align:center}
.inputs .hourbox .hapg{align-items:stretch;height:44px;box-sizing:border-box}
.inputs .hourbox .hap{height:100%;min-height:0;box-sizing:border-box}
.inputs .hourbox .hwrap{height:44px;margin:0;align-items:center}
/* 지시-1022q – 안내 글은 그 위 줄에 붙는다: 윗 여백은 작고 아래 여백은 크게 */
.hournote{margin:.1rem 0 .9rem}

/* 지시-1022p – 아이폰 홈 화면 앱(standalone)에서만 보이는 「‹」 뒤로 단추. 평소에는 숨는다(휴대폰 뒤로가기와 같은 일). */
.hback{display:none;flex:none;width:36px;height:44px;margin:0 .15rem 0 -.4rem;padding:0;border:0;background:none;color:var(--ink-2);font-size:1.7rem;line-height:1;cursor:pointer}
html.ios-standalone .hback{display:inline-flex;align-items:center;justify-content:center}
.headbell[hidden]{display:none}

/* 1023b – 생년월일만 넣은 궁합 결과 맨 위 한 줄(사주로 본 궁합 · 결 · 성격은 상대분이 직접) */
.pairsaju-top{margin:0 0 .9rem;font-size:var(--fs-md);line-height:1.7;color:var(--ink-2)}

/* 1023c ⑤ – 다른 분 생년월일로 본 사주(s2): 본인 결 정하기 · 성격검사 · 궁합 초대 칸 · 풀이 신청은 보이지 않는다 */
body.farsaju #s2 #s3gy,body.farsaju #s2 #s3pq,body.farsaju #s2 #s2pairinv,body.farsaju #s2 [data-reqmore],body.farsaju #s2 .reqbtn{display:none!important}
#farfull{margin-top:1rem}
.pairinv-after{margin:1.2rem 0 0;padding-top:.9rem;border-top:1px solid var(--rule);font-size:var(--fs-md);line-height:1.7;color:var(--ink-2)}
.pairinv-after .acts{margin-top:.6rem}

/* 1023f – 내 풀이 한 형식 목록: 골라 보기 · 줄(아이콘 · 제목 · 작은 줄 · 날짜 · 상태 · ⋯) */
.mfilter{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 .6rem}
.mfb{min-height:40px;padding:0 .8rem;border:1px solid var(--rule-2);border-radius:999px;background:none;font:inherit;font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer}
.mfb[aria-pressed="true"]{border-color:var(--accent-ink);color:var(--accent-ink);font-weight:700;background:var(--accent-soft)}
.mlist{list-style:none;margin:0;padding:0}
.mrow{border-bottom:1px solid var(--rule)}
.mline{display:flex;align-items:center;gap:.4rem}
.mmain{flex:1;min-width:0;display:flex;align-items:center;gap:.7rem;padding:.7rem .2rem;min-height:56px;background:none;border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.mico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--ink-2)}
.mico.pring{width:34px;height:34px;box-shadow:inset 0 0 0 1px currentColor}
.mico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mico.pring svg{width:18px;height:18px}
.mtxt{flex:1;min-width:0;display:flex;flex-direction:column}
.mtxt b{font-size:var(--fs-md);color:var(--ink);overflow-wrap:anywhere}
.mtxt small{font-size:var(--fs-sm);color:var(--ink-2)}
.mbadge{flex:none;display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-sm);white-space:nowrap}
.mbadge.prep{color:var(--muted)}
.mbadge.new{color:var(--accent-ink);font-weight:700}
.mdot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--accent)}
.mchev{font-size:1.3rem;color:var(--ink-2)}
.mmore{flex:none;min-width:40px;min-height:40px;background:none;border:0;font-size:1.2rem;color:var(--ink-2);cursor:pointer}
.mmenu{padding:.2rem 0 .8rem .4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;font-size:var(--fs-sm)}
.mmenu .note{margin:0;width:100%}
.mview{padding:.2rem 0 .6rem}
/* 지시-1023h – 준비 중 줄을 누르면 그 줄 아래 한 줄이 펼쳐진다 */
.mwait{margin:0;padding:0 .2rem .7rem;font-size:var(--fs-sm);color:var(--muted)}
/* 목록 줄 칸 모양 – 08 의 「.minelist button · li.pending span」(옛 한 줄 단추 꼴)이 줄 짜임을 깨지 않도록 되돌린다 */
.minelist .mmain{display:flex;flex:1;width:auto;min-width:0;gap:.7rem;padding:.7rem .2rem;min-height:56px;font:inherit;color:var(--ink);cursor:pointer}
.minelist .mmore{display:block;flex:none;width:auto;min-width:40px;min-height:40px;padding:0;font-size:1.2rem;color:var(--ink-2)}
.minelist .mrow .mico{display:inline-flex;width:34px;padding:0;cursor:inherit}
.minelist .mrow .mtxt{display:flex;flex:1;min-width:0;padding:0;cursor:inherit}
.minelist .mrow .mbadge{display:inline-flex;width:auto;padding:0;cursor:inherit}
.minelist .mrow .mchev{display:inline;width:auto;padding:0}

/* 1024h – 고민상담 지난 답장: 날짜 · 고민 첫 줄 한 줄, 누르면 고민 전문과 답장 */
.askpast{margin-top:1rem}
.askpi{margin:.5rem 0;padding:.4rem 0;border-top:1px solid var(--rule)}
.askpi summary{cursor:pointer;line-height:1.6;font-weight:600}
.askpd{color:var(--muted);font-size:var(--fs-sm);font-weight:400;margin-right:.4rem}
.askpq{font-weight:600}
.askpa p{margin:.5rem 0;line-height:1.85}

/* 1024i – 계정 정보 저장 뒤 화면 아래 한 줄(2초). 창이 닫힌 뒤에 뜬다. */
.proftoast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(5.6rem + env(safe-area-inset-bottom));z-index:80;margin:0;padding:.55rem 1.1rem;border-radius:999px;background:var(--ink);color:var(--bg);font-size:var(--fs-sm);white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.2);pointer-events:none}

/* 1024i 2 – 화면 밝기: 윗줄 「시스템 설정대로」 한 줄 전체, 아랫줄 「밝게」「어둡게」 반반. 셋 다 같은 높이.
   1019b 의 #themecal .calopt(flex 1 1 7rem)를 이긴다 – 그 줄이 세로로 늘어 윗줄이 두 배가 됐다. */
.themeseg{display:flex;flex-direction:column;gap:.5rem;margin:.6rem 0}
#themecal .calopt{flex:0 0 auto;width:100%;min-width:0;height:3.1rem;box-sizing:border-box;margin:0;white-space:nowrap;text-align:center;justify-content:center}
#themecal .themerow{display:flex;gap:.5rem}
#themecal .themerow .calopt{flex:1 1 0;width:auto}

/* 1024k – 같은 자리의 버튼은 폭 100%(세로로 쌓음) · 높이를 같게. .btn · .btn.ghost 모양은 그대로. */
.s3acts .btn,#cq-done .acts .btn,#pq-skipbox .btn{flex:1 1 100%;box-sizing:border-box;height:3.2rem}

/* 1024k(고침) – 결제 안내 상자 · 풀이 안 단추도 같은 폭 100% · 같은 높이 · 주 버튼 .btn, 나머지 .btn.ghost */
#s7pre .acts .btn,.fr-three .btn{flex:1 1 100%;box-sizing:border-box;height:3.2rem}
.fr-three .btn{display:block;width:100%;margin-top:.5rem}

/* 1024k B – 결제하고 풀이 받기 · 결제 안내 한 줄은 한 줄 전체(폭 100%, 가운데). 버튼 높이는 3.2rem 으로 같게. */
#paybtn,.acts > .note{flex:1 1 100%;box-sizing:border-box}
#paybtn{height:3.2rem;justify-content:center}