/* 페이스터 앱 새 디자인 공통 CSS (주식회사 홀빅, 2026-11-04)
 * 넣는 곳: public/css/newdesign.css, index.html 의 마지막 CSS link 다음.
 * 모든 클래스는 nd- 접두사. 기존 CSS(common.css, style*.css)와 충돌하지 않으므로 화면 하나씩 바꿔도 된다.
 * 바꾼 화면의 맨 바깥 요소에 class="nd-page"(흰 바탕은 "nd-page nd-white"). 알림창·시트는 nd-overlay 또는 nd-dim 아래.
 * 목업(screens/* /new.html)의 CSS와 같되 앱용으로 바꾼 것: 상태 표시줄 그림 제거, 떠 있는 버튼·덮개·시트·알림창은 fixed, 아래 여백은 env(safe-area-inset-bottom), 실제 button/input/img 보정, 첫 화면(.nd-intro) 추가.
 * 클래스 목록: nd-act nd-active nd-add nd-addfile nd-alpha nd-amt nd-av nd-bad nd-banner nd-bar nd-big nd-bk nd-body nd-border-pink nd-bottom nd-btn nd-btns nd-card nd-chev nd-chk nd-chkrow nd-ci nd-clear nd-close-circle nd-cols nd-datepicker nd-dim nd-dis nd-dlg nd-dot nd-dots nd-ellipsis nd-empty nd-err nd-f nd-fail nd-file nd-files nd-fix nd-fname nd-focus-input nd-foot nd-form nd-half nd-hd nd-ic nd-in nd-input-close nd-intro nd-k nd-kv nd-lb nd-line nd-link nd-links nd-logo nd-menu4 nd-month nd-nd-in nd-nd-x nd-nopad nd-note nd-noti nd-ok nd-on nd-opt nd-overlay nd-p nd-pad nd-page nd-pdf nd-penbtn nd-pin nd-prof nd-r nd-result nd-ring nd-row nd-rt nd-sec nd-seg nd-sheet nd-sm nd-srch nd-stepper nd-sticky nd-sub nd-sum nd-t nd-ta nd-tabs nd-tag nd-text nd-tg nd-thumb nd-tile nd-tiles nd-tot nd-v nd-white nd-who nd-x
 */
:root{--nd-bg:#f7f8fa;--nd-card:#ffffff;--nd-seg:#eceef2;--nd-in:#ffffff;--nd-line:#f0f2f5;--nd-tint:#e3ecf9;--nd-cardline:#eceef2}

/* 전역 reset 은 넣지 않음(앱의 reset CSS 가 이미 함). 화면 뿌리 클래스는 nd-page */
.nd-page{height:100%;min-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--nd-bg);font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif;letter-spacing:-0.01em;color:#191f28;position:relative;padding-top:env(safe-area-inset-top,0px);font-size:16px;line-height:normal}
/* 요소 기본값 되돌리기(낮은 우선순위 :where 라서 아래 부품 규칙이 이김) */
.nd-page :where(button,input,textarea,select),.nd-overlay :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;letter-spacing:inherit;text-align:inherit;border-radius:0;line-height:inherit;-webkit-appearance:none;appearance:none}
.nd-page :where(button),.nd-overlay :where(button){cursor:pointer}
.nd-page :where(a){color:inherit;text-decoration:none}
.nd-page :where(ul,ol){list-style:none}
.nd-page.nd-white{background:#fff}
.nd-hd{height:60px;display:flex;align-items:center;justify-content:center;position:relative;padding:0 56px}
.nd-hd b{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-hd .nd-bk,.nd-hd .nd-x{position:absolute;top:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.nd-hd .nd-bk{left:14px}.nd-hd .nd-x{right:14px}
.nd-hd svg{width:22px;height:22px;stroke:#333d4b;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nd-hd .nd-act{position:absolute;right:16px;top:14px;height:32px;display:flex;align-items:center;gap:16px}
.nd-body{padding:4px 20px 136px;display:flex;flex-direction:column;gap:16px}
.nd-body.nd-nopad{padding-bottom:48px}
.nd-card{background:var(--nd-card);border-radius:20px;border:1px solid var(--nd-cardline)}
.nd-sec{padding:8px 0}
.nd-sec h3{font-size:13px;color:#6b7684;font-weight:700;padding:14px 24px 6px}
.nd-row{display:flex;align-items:center;gap:14px;min-height:60px;padding:0 24px;border-bottom:1px solid var(--nd-line);font-size:15px;font-weight:500}
.nd-row:last-child{border-bottom:0}
.nd-row .nd-ic{width:22px;height:22px;flex:0 0 22px;display:flex;align-items:center;justify-content:center}
.nd-row .nd-ic svg{width:22px;height:22px;stroke:#2358a0;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nd-row .nd-dot{width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--nd-tint);color:#2358a0;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.nd-row .nd-lb{flex:1;min-width:0}
.nd-row .nd-lb small{display:block;font-size:12px;color:#8b95a1;font-weight:400;margin-top:2px}
.nd-row .nd-rt{font-size:13px;color:#8b95a1;white-space:nowrap}
.nd-row .nd-rt.nd-v{font-size:15px;color:#191f28;font-weight:500}
.nd-chev{width:9px;height:9px;border-top:2px solid #b0b8c1;border-right:2px solid #b0b8c1;transform:rotate(45deg);flex:0 0 9px}
.nd-prof{display:flex;align-items:center;gap:16px;padding:20px 24px;min-height:96px}
.nd-penbtn{margin-left:auto;width:36px;height:36px;border-radius:50%;background:var(--nd-tint);display:flex;align-items:center;justify-content:center;flex:0 0 36px}
.nd-penbtn svg{width:18px;height:18px;stroke:#2358a0;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nd-av{width:56px;height:56px;border-radius:50%;background:#2358a0;display:flex;align-items:center;justify-content:center;flex:0 0 56px;overflow:hidden}
.nd-av svg{width:72%;height:72%;display:block}
.nd-who b{display:block;font-size:13.5px;font-weight:700}.nd-who span{font-size:18px;font-weight:500}.nd-who small{display:block;font-size:12px;color:#8b95a1;margin-top:2px}
.nd-banner{height:300px;display:flex;flex-direction:column;justify-content:center;padding:0 32px}
.nd-banner .nd-av{width:76px;height:76px;flex-basis:76px;margin-bottom:12px}
.nd-banner h2{font-size:25px;font-weight:900;line-height:1.3}.nd-banner p{font-size:13.5px;color:#6b7684;margin-top:8px}
.nd-big{display:flex;align-items:center;gap:16px;background:#2358a0;color:#fff;border-radius:20px;padding:24px}
.nd-big svg{width:40px;height:40px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nd-big b{font-size:19px;font-weight:700;display:block}.nd-big small{font-size:12.5px;color:#c9d8ee}
.nd-big .nd-chev{margin-left:auto;border-color:#fff}
.nd-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nd-tile{background:var(--nd-card);border:1px solid var(--nd-cardline);border-radius:20px;padding:20px;min-height:128px;display:flex;flex-direction:column;justify-content:space-between}
.nd-tile .nd-ci{width:44px;height:44px;border-radius:14px;background:var(--nd-tint);display:flex;align-items:center;justify-content:center}
.nd-tile .nd-ci svg{width:24px;height:24px;stroke:#2358a0;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nd-tile b{display:block;font-size:16px;font-weight:700;margin-top:14px}.nd-tile small{display:block;font-size:12px;color:#8b95a1;margin-top:3px}
.nd-tile.nd-p{background:#2358a0;color:#fff}.nd-tile.nd-p .nd-ci{background:rgba(255,255,255,.18)}.nd-tile.nd-p .nd-ci svg{stroke:#fff}.nd-tile.nd-p small{color:#c9d8ee}
.nd-form{padding:24px;display:flex;flex-direction:column;gap:18px}
.nd-f label{display:block;font-size:13px;color:#6b7684;font-weight:700;margin:0 0 8px}
.nd-f label i{color:#c23b2a;font-style:normal}
.nd-in{height:50px;border:1px solid #dfe5ee;border-radius:12px;padding:0 14px;display:flex;align-items:center;font-size:14.5px;color:#a3acb9;background:var(--nd-in);gap:10px}
.nd-in.nd-v{color:#191f28}
.nd-in .nd-chev{margin-left:auto;transform:rotate(135deg);margin-top:-5px}
.nd-in.nd-ta{height:150px;align-items:flex-start;padding-top:14px}
.nd-in .nd-tag{margin-left:auto;font-size:12px;color:#2358a0;background:#e3ecf9;border-radius:8px;padding:3px 9px}
.nd-chk{display:flex;align-items:center;gap:10px;font-size:14px;padding:2px 0}
.nd-chk i{width:22px;height:22px;border-radius:50%;border:2px solid #cfd6df;display:inline-flex;align-items:center;justify-content:center}
.nd-chk i.nd-on{background:#2358a0;border-color:#2358a0}
.nd-chk i svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.nd-chk.nd-sm{font-size:13.5px}
.nd-chk .nd-chev{margin-left:auto}
.nd-fix{position:fixed;left:20px;right:20px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:40}
.nd-btn{height:52px;border-radius:14px;background:#2358a0;color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center}
.nd-btn.nd-dis{background:#c3d0e4}.nd-btn.nd-line{background:#fff;color:#2358a0;border:1.5px solid #2358a0}
.nd-btn.nd-half{flex:1}.nd-btns{display:flex;gap:10px}
.nd-seg{display:flex;background:var(--nd-seg);border-radius:14px;padding:4px}
.nd-seg span{flex:1;text-align:center;height:38px;line-height:38px;border-radius:11px;font-size:14px;font-weight:600;color:#6b7684}
.nd-seg span.nd-on{background:#fff;color:#2358a0;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.nd-tabs{display:flex;gap:6px;padding:0 4px}
.nd-tabs span{padding:8px 14px;border-radius:18px;font-size:13.5px;font-weight:600;color:#6b7684;background:var(--nd-card)}
.nd-tabs span.nd-on{background:#2358a0;color:#fff}
.nd-kv{padding:8px 0 12px}
.nd-kv h3{font-size:14px;font-weight:700;padding:16px 24px 8px}
.nd-kv .nd-r{display:flex;justify-content:space-between;gap:16px;padding:10px 24px;font-size:14px}
.nd-kv .nd-r span:first-child{color:#6b7684;flex:0 0 96px}.nd-kv .nd-r span:last-child{text-align:right;font-weight:500;word-break:keep-all}
.nd-kv .nd-r.nd-tot{border-top:1px solid var(--nd-line);margin-top:4px;padding-top:12px}.nd-kv .nd-r.nd-tot span:last-child{font-size:17px;font-weight:700;color:#2358a0}
.nd-sum{display:flex;align-items:center;justify-content:space-between;padding:20px 24px}
.nd-sum b{font-size:15px}.nd-sum .nd-amt{font-size:22px;font-weight:900;color:#2358a0}
.nd-month{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;font-size:16px;font-weight:700}
.nd-month .nd-chev{transform:rotate(135deg);margin-top:-6px}
.nd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:72px 24px;color:#6b7684;font-size:14px;text-align:center;line-height:1.6}
.nd-ring{position:relative;width:64px;height:64px;display:flex;align-items:center;justify-content:center}
.nd-ring b{position:absolute;border-radius:50%;border:1.6px solid #2358a0;display:block}
.nd-ring em{width:8px;height:8px;border-radius:50%;background:#2358a0;display:block}
.nd-text{padding:24px;font-size:13.5px;line-height:1.8;color:#333d4b}
.nd-text h4{font-size:15px;font-weight:700;margin:10px 0 6px;color:#191f28}
.nd-noti{display:flex;gap:14px;padding:16px 24px;border-bottom:1px solid var(--nd-line)}
.nd-noti:last-child{border-bottom:0}
.nd-noti .nd-dot{width:36px;height:36px;border-radius:50%;background:var(--nd-tint);display:flex;align-items:center;justify-content:center;flex:0 0 36px}
.nd-noti .nd-dot svg{width:18px;height:18px;stroke:#2358a0;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nd-noti .nd-t b{display:block;font-size:12px;color:#2358a0;font-weight:700}.nd-noti .nd-t p{font-size:14px;margin-top:2px}.nd-noti .nd-t small{display:block;font-size:12px;color:#8b95a1;margin-top:3px}
.nd-tg{width:44px;height:26px;border-radius:13px;background:#cfd6df;position:relative;flex:0 0 44px}
.nd-tg.nd-on{background:#2358a0}.nd-tg::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff}
.nd-tg.nd-on::after{left:21px}
.nd-menu4{display:grid;grid-template-columns:repeat(4,1fr);padding:22px 12px 18px}
.nd-menu4 div{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:500}
.nd-menu4 .nd-ci{width:48px;height:48px;border-radius:16px;background:var(--nd-tint);display:flex;align-items:center;justify-content:center}
.nd-menu4 .nd-ci svg{width:24px;height:24px;stroke:#2358a0;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nd-srch{display:flex;align-items:center;gap:10px;height:50px;border-radius:14px;background:var(--nd-card);padding:0 16px;font-size:14px;color:#a3acb9;margin:4px 0}
.nd-srch svg{width:20px;height:20px;stroke:#6b7684;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:auto}
.nd-pin{display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 20px 30px;text-align:center}
.nd-pin h2{font-size:22px;font-weight:900}.nd-pin p{font-size:14px;color:#6b7684}
.nd-pin .nd-dots{display:flex;gap:14px;margin:16px 0 8px}.nd-pin .nd-dots i{width:14px;height:14px;border-radius:50%;background:#cfd6df}
.nd-pin a{font-size:13px;color:#2358a0;text-decoration:underline}
.nd-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px))}
.nd-pad span{height:64px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:500;border-radius:14px;background:var(--nd-card)}
.nd-pad span.nd-k{color:#8b95a1;font-size:15px}
/* 덮어 그리는 것: 시트·알림창 */
.nd-dim{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(16,24,40,.45);z-index:500}
.nd-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;padding:14px 20px calc(20px + env(safe-area-inset-bottom,0px));z-index:501;max-height:80vh;overflow:auto}
.nd-sheet .nd-bar{width:44px;height:5px;border-radius:3px;background:#dfe5ee;margin:0 auto 14px}
.nd-sheet h4{font-size:17px;font-weight:700;margin-bottom:8px;padding:0 2px}
.nd-sheet .nd-opt{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 4px;border-bottom:1px solid var(--nd-line);font-size:15px}
.nd-sheet .nd-opt:last-child{border-bottom:0}.nd-sheet .nd-opt small{display:block;font-size:12px;color:#8b95a1}
.nd-sheet .nd-opt.nd-on{color:#2358a0;font-weight:700}
.nd-sheet .nd-add{margin-top:12px;height:48px;border-radius:12px;border:1.5px dashed #b9c7dd;color:#2358a0;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}
.nd-dlg{position:fixed;z-index:502;left:34px;right:34px;top:50%;transform:translateY(-50%);background:#fff;border-radius:20px;padding:30px 24px 24px;text-align:center;box-shadow:0 12px 32px rgba(16,24,40,.18)}
.nd-dlg .nd-ring{width:52px;height:52px;margin:0 auto 12px}
.nd-dlg p{font-size:15px;line-height:1.6;margin-bottom:18px}
.nd-dlg .nd-btn{height:46px;font-size:15px}
.nd-foot{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:11px;color:#aab2bd;line-height:1.6}

/* 볼록감(누를 수 있는 것만) */
.nd-big,.nd-btn:not(.nd-dis):not(.nd-line){background-image:linear-gradient(180deg,#2d64ad 0%,#2358a0 55%,#1f4f91 100%);box-shadow:0 6px 14px rgba(35,88,160,.28),inset 0 1px 0 rgba(255,255,255,.22)}
.nd-btn.nd-line{box-shadow:0 2px 6px rgba(16,24,40,.06)}
.nd-tabs span{border:1px solid #e4e8ee;box-shadow:0 1px 2px rgba(16,24,40,.06),inset 0 1px 0 #fff}
.nd-tabs span.nd-on{border-color:#1f4f91;background-image:linear-gradient(180deg,#2d64ad,#2358a0);box-shadow:0 3px 8px rgba(35,88,160,.28),inset 0 1px 0 rgba(255,255,255,.2)}
.nd-seg{box-shadow:inset 0 1px 3px rgba(16,24,40,.10)}
.nd-seg span.nd-on{box-shadow:0 2px 6px rgba(16,24,40,.14),inset 0 1px 0 #fff}
.nd-menu4 .nd-ci,.nd-tile .nd-ci{background-image:linear-gradient(180deg,#eaf1fb,#dde8f7);box-shadow:0 2px 5px rgba(35,88,160,.12),inset 0 1px 0 rgba(255,255,255,.8)}
.nd-tile{box-shadow:0 3px 10px rgba(16,24,40,.07),inset 0 1px 0 #fff}.nd-tile.nd-p{background-image:linear-gradient(180deg,#2d64ad 0%,#2358a0 55%,#1f4f91 100%);box-shadow:0 6px 14px rgba(35,88,160,.28),inset 0 1px 0 rgba(255,255,255,.22)}.nd-tile.nd-p .nd-ci{background-image:none;box-shadow:none}
.nd-card.nd-prof,.nd-prof{cursor:pointer}.nd-card:has(.nd-prof){box-shadow:0 2px 8px rgba(16,24,40,.06)}
.nd-in.nd-v,.nd-in{box-shadow:inset 0 1px 2px rgba(16,24,40,.04)}
.nd-row .nd-chev{border-color:#9aa5b4}
.nd-penbtn,.nd-sheet .nd-add{box-shadow:0 1px 3px rgba(16,24,40,.08)}
.nd-pad span{box-shadow:0 1px 3px rgba(16,24,40,.06)}

/* ── 앱 전용 추가(목업에는 없음): 실제 button/input/img 요소 보정, 알림창 뿌리, 첫 화면 ── */
.nd-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif;letter-spacing:-0.01em;color:#191f28;font-size:16px;line-height:normal}
.nd-dlg h3{font-size:17px;font-weight:700;margin-bottom:8px}
button.nd-btn,a.nd-btn{border:0;width:100%;font-family:inherit;cursor:pointer}
button.nd-btn:disabled{opacity:.45;cursor:default}
.nd-btns .nd-btn{width:auto}
input.nd-in,textarea.nd-in{width:100%;outline:0;font-family:inherit;color:#191f28;font-size:14.5px;display:block}
input.nd-in::placeholder,textarea.nd-in::placeholder{color:#a3acb9}
textarea.nd-in{resize:none;padding-top:14px;line-height:1.5}
.nd-in:focus-within{border-color:#2358a0}
.nd-in.nd-dis{background:#f2f4f6}
/* 기존 입력 컴포넌트(RPInput, RPInputBorder)를 .nd-nd-in 안에 넣었을 때 */
.nd-in .input-close{position:relative;flex:1;width:auto;height:100%;border:0;display:flex;align-items:center;background:none}
.nd-in .input-close input{width:100%;height:100%;line-height:normal;font-size:14.5px;color:#191f28;text-indent:0;padding:0 28px 0 0;border:0;border-radius:0;background:none;outline:0;font-family:inherit;font-weight:400}
.nd-in .input-close input.border-pink,.nd-in .input-close.focus-input{border:0}
.nd-in .input-close input::placeholder{color:#a3acb9}
.nd-in .input-close input:disabled{color:#8b95a1;background:none}
.nd-in button.close-circle{right:0;width:20px;height:20px;background:#cfd6df}
.nd-in button.close-circle::before{height:11px}.nd-in button.close-circle::after{width:11px}
/* 탭이 router-link(a) 일 때도 같은 모양 */
.nd-tabs>a{display:inline-block;padding:8px 14px;border-radius:18px;font-size:13.5px;font-weight:600;color:#6b7684;background:var(--nd-card);text-decoration:none;border:1px solid #e4e8ee;box-shadow:0 1px 2px rgba(16,24,40,.06),inset 0 1px 0 #fff}
.nd-tabs>a.nd-on{color:#fff;border-color:#1f4f91;background:#2358a0;background-image:linear-gradient(180deg,#2d64ad,#2358a0);box-shadow:0 3px 8px rgba(35,88,160,.28),inset 0 1px 0 rgba(255,255,255,.2)}
.nd-av img{width:100%;height:100%;object-fit:cover;display:block}
.nd-hd .nd-logo{height:28px;max-width:90px;object-fit:contain;margin-right:8px}
.nd-hd .nd-act button{display:flex;align-items:center;justify-content:center}
button.nd-in{width:100%;text-align:left}
.nd-in>input,.nd-in>textarea{flex:1;min-width:0;width:100%;height:100%;background:none;border:0;outline:0;font:inherit;font-size:14.5px;color:#191f28;padding:0}
.nd-in>input:disabled{color:#8b95a1}
.nd-in>textarea{height:auto;align-self:stretch;padding:12px 0;line-height:1.5;resize:none}
.nd-in .nd-ellipsis{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nd-err{display:block;font-size:12px;color:#c23b2a;margin-top:6px;min-height:0}
.nd-err:empty{display:none}
.nd-srch input{flex:1;min-width:0;background:none;border:0;outline:0;font:inherit;font-size:14px;color:#191f28}
.nd-srch input::placeholder{color:#a3acb9}
.nd-srch button{display:flex;align-items:center;justify-content:center;margin-left:8px}
.nd-srch button svg{margin-left:0}
.nd-srch button.nd-clear svg{width:16px;height:16px;stroke:#a3acb9}
.nd-ic img{width:22px;height:22px;object-fit:contain;display:block}
.nd-noti .nd-dot img{width:18px;height:18px;object-fit:contain;display:block}
.nd-rt.nd-ok{color:#2358a0}.nd-rt.nd-bad{color:#c23b2a}
.nd-sheet .nd-opt.active{color:#2358a0;font-weight:700}
.nd-sheet .nd-opt .nd-tag{margin-left:8px;font-size:11px;color:#2358a0;background:#e3ecf9;border-radius:8px;padding:2px 7px;vertical-align:1px}
.nd-sheet .nd-sub{font-size:12px;color:#8b95a1;margin-bottom:10px;padding:0 2px}
.nd-sheet .nd-btns{margin-top:14px}
.nd-sheet .nd-btns .nd-btn{height:48px}
.nd-penbtn input{display:none}
.nd-pin .nd-dots i.nd-on{background:#2358a0}
.nd-pin a{cursor:pointer}
.nd-sheet .nd-cols{display:flex;gap:12px;height:240px;margin-top:4px}
.nd-sheet .nd-cols ul{flex:1;overflow:auto;margin:0;padding:0;list-style:none}
.nd-sheet .nd-cols li{height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:15px;color:#6b7684;cursor:pointer}
.nd-sheet .nd-cols li.nd-on{background:#e3ecf9;color:#2358a0;font-weight:700}
.nd-sheet .nd-opt img{width:24px;height:24px;object-fit:contain;margin-right:10px;flex:0 0 24px}
.nd-note{font-size:12px;color:#8b95a1;line-height:1.6}
.nd-result{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:72px 24px;text-align:center}
.nd-result img{width:118px}
.nd-result b{font-size:18px;color:#191f28;line-height:1.5}
.nd-result small{font-size:13px;color:#6b7684;line-height:1.6}
.nd-result .nd-fail{width:64px;height:64px;border-radius:50%;background:#fdecea;display:flex;align-items:center;justify-content:center}
.nd-result .nd-fail svg{width:30px;height:30px;stroke:#c23b2a;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nd-bad{color:#c23b2a}
.nd-kv .nd-r span:last-child.nd-bad{color:#c23b2a}
.nd-text h4 small{font-size:12px}
.nd-sticky{position:sticky;top:0;z-index:2;background:var(--nd-bg);padding:4px 4px 8px;font-size:13px;color:#6b7684}
.nd-in .nd-datepicker,.nd-month .nd-datepicker{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:14.5px;color:#191f28;height:100%}
.nd-month .nd-datepicker{font-size:16px;font-weight:700;text-align:center}
.nd-row.nd-chkrow{cursor:pointer}
label.nd-row{cursor:pointer}
button.nd-add{width:100%;margin-top:0}
.nd-files{display:flex;flex-wrap:wrap;gap:12px}
.nd-file{width:calc((100% - 24px) / 3)}
.nd-thumb{width:100%;aspect-ratio:1;border-radius:14px;background:#f2f4f6;border:1px solid #eceef2;overflow:hidden;display:flex;align-items:center;justify-content:center}
.nd-thumb img,.nd-thumb .nd-pdf{width:100%;height:100%;object-fit:cover}
.nd-thumb.nd-addfile{flex-direction:column;gap:6px;color:#8b95a1;font-size:13px;border:1.5px dashed #b9c7dd;background:#fff}
.nd-thumb.nd-addfile svg{width:26px;height:26px;stroke:#8b95a1;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nd-fname{display:flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;color:#6b7684}
.nd-fname span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nd-fname button{display:flex}.nd-fname button svg{width:14px;height:14px;stroke:#8b95a1;fill:none;stroke-width:2;stroke-linecap:round}
.nd-stepper{display:flex;align-items:center;justify-content:center;gap:0}
.nd-stepper button{width:44px;height:44px;border:1px solid #dfe5ee;background:#fff;font-size:20px;color:#2358a0}
.nd-stepper button:first-child{border-radius:12px 0 0 12px}.nd-stepper button:last-child{border-radius:0 12px 12px 0}
.nd-stepper button.nd-dis{color:#c3d0e4}
.nd-stepper div{height:44px;border-top:1px solid #dfe5ee;border-bottom:1px solid #dfe5ee;display:flex;align-items:center;padding:0 12px;gap:4px;font-size:15px}
.nd-stepper input{width:36px;text-align:right;border:0;background:none;font:inherit;font-size:15px;font-weight:700;color:#191f28;outline:0}
.nd-alpha{position:fixed;right:2px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1px;z-index:30;background:rgba(255,255,255,.85);border-radius:10px;padding:4px 2px}
.nd-alpha p{font-size:10px;color:#2358a0;padding:1px 5px;cursor:pointer;line-height:1.3}
.nd-hd .nd-nd-x svg{fill:#333d4b;stroke:none}
.nd-text img{max-width:100%;height:auto}
.nd-text p{margin:0 0 6px}
/* 로그인 전 첫 화면(BeforeLogin, Intro 컴포넌트) */
.nd-intro{display:flex;flex-direction:column;min-height:100vh;background:#fff;padding:calc(12vh + env(safe-area-inset-top,0px)) 26px calc(60px + env(safe-area-inset-bottom,0px))}
.nd-intro img{display:block;width:110px;margin-left:-10px}
.nd-intro h2{font-size:26px;font-weight:700;line-height:1.3;margin-top:16px;color:#191f28}
.nd-intro p{font-size:13px;color:#6b7684;margin-top:10px}
.nd-intro .nd-bottom{margin-top:auto}
.nd-intro .nd-link{display:flex;align-items:center;justify-content:center;width:100%;height:40px;margin-top:6px;border:0;background:none;color:#2358a0;font-size:15px;font-weight:600;font-family:inherit}
.nd-intro .nd-links{display:flex;justify-content:center;gap:14px;margin-top:18px}
.nd-intro .nd-links button{border:0;background:none;padding:0;color:#8b95a1;font-size:11px;text-decoration:underline;font-family:inherit}

/* 운영 추가분. 월세 없이 타일이 3개면 배달비를 한 줄 전체로 둔다 */
.nd-tile.nd-wide{grid-column:1/-1}

/* 앱의 reset CSS 가 요소마다 글꼴을 직접 지정해 상속만으로는 적용되지 않는다 */
.nd-page,.nd-page *,.nd-overlay,.nd-overlay *{font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif}
.nd-big b{color:#fff}
/* .nd-chk i 의 원형 체크 규칙이 화살표에도 먹는 것을 되돌린다 */
.nd-chk i.nd-chev{width:9px;height:9px;flex:0 0 9px;border:0;border-top:2px solid #b0b8c1;border-right:2px solid #b0b8c1;border-radius:0}

/* ===== 1105 디테일 보정: newdesign.css 맨 아래에 그대로 추가 (QA 확인 뒤 추가분) ===== */

/* 1) 입력칸 포커스
   기존 RPInputBorder 가 포커스 때 안쪽 input 에 .border-pink(2px 네모 테두리)를 붙임 → 안쪽 테두리는 없애고
   바깥 .nd-in 테두리 색만 바뀌게(은은한 파란 테두리 + 옅은 번짐) */
.nd-in input.border-pink,
.nd-in .input-close input.border-pink,
.nd-in input:focus,
.nd-in .input-close input:focus,
.nd-in textarea:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.nd-in:focus-within { border-color: #2358a0; box-shadow: 0 0 0 3px rgba(35, 88, 160, .12); }
/* 검색창(.nd-srch) 등 .nd-in 이 아닌 새 화면 입력칸도 같은 처리 */
.nd-page input.border-pink, .nd-overlay input.border-pink, .nd-intro input.border-pink,
.nd-srch input:focus, .nd-srch .input-close input:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.nd-srch:focus-within { border-color: #2358a0; }
/* 숫자 입력칸(계좌번호 등 type=number)의 위아래 화살표 숨김 */
.nd-page input[type=number]::-webkit-inner-spin-button, .nd-page input[type=number]::-webkit-outer-spin-button,
.nd-overlay input[type=number]::-webkit-inner-spin-button, .nd-overlay input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.nd-page input[type=number], .nd-overlay input[type=number] { -moz-appearance: textfield; }

/* 1-2) 실기기 탭 반응: 안드로이드·iOS 웹뷰에서 누를 때 생기는 회색/파란 네모(탭 하이라이트) 제거,
   누를 수 있는 줄·타일·버튼은 살짝 눌리는 느낌만 */
.nd-page, .nd-page *, .nd-overlay, .nd-overlay *, .nd-intro, .nd-intro * { -webkit-tap-highlight-color: transparent; }
.nd-pad span, .nd-tile, .nd-row, .nd-chk, .nd-seg, .nd-tabs { -webkit-user-select: none; user-select: none; }
.nd-row:active { background: #f7f8fa; }
.nd-tile:active, .nd-big:active, button.nd-btn:not(:disabled):not(.nd-dis):active, .nd-menu4 > *:active { transform: scale(.985); }
.nd-pad span:active { background: #e8ecf1; }

/* 1-3) 움직임: 시트는 아래서 올라오고, 알림창은 살짝 커지며, 딤은 서서히. 토글·탭·체크는 부드럽게 전환 (열릴 때만, CSS 만으로) */
@keyframes nd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nd-up { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nd-pop { from { transform: translateY(-50%) scale(.96); opacity: 0; } to { transform: translateY(-50%) scale(1); opacity: 1; } }
.nd-overlay .nd-dim { animation: nd-fade .18s ease-out; }
.nd-overlay .nd-sheet { animation: nd-up .24s cubic-bezier(.2, .8, .2, 1); }
.nd-overlay .nd-dlg { animation: nd-pop .18s ease-out; }
.nd-tg { transition: background-color .2s ease; }
.nd-tg::after { transition: left .2s cubic-bezier(.2, .8, .2, 1); }
.nd-seg span, .nd-tabs span { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.nd-chk i { transition: background-color .15s ease, border-color .15s ease; }
button.nd-btn, .nd-tile, .nd-big, .nd-row, .nd-menu4 > *, .nd-pad span { transition: transform .08s ease, background-color .12s ease, opacity .15s ease; }
@media (prefers-reduced-motion: reduce) { .nd-overlay .nd-dim, .nd-overlay .nd-sheet, .nd-overlay .nd-dlg, #alert-wrap .alert-content { animation: none; } }

/* 1-4) 바둑알 탭(.nd-tabs: 회원정보·배대사·매출알림톡·신용카드, 월세내역·공지 필터)이 왼쪽에 몰림 → 화면 폭을 똑같이 나눠 차지 */
.nd-tabs { padding: 0; gap: 6px; }
.nd-tabs > a, .nd-tabs > span { flex: 1 1 0; text-align: center; padding: 8px 4px; white-space: nowrap; min-width: 0; }
@media (max-width: 375px) { .nd-tabs > a, .nd-tabs > span { font-size: 12.5px; } }

/* 2) 토스트 알림(notify: "아이디를 정확하게 입력해주세요." 등)
   화면 가운데 빨간 띠 → 아래쪽(버튼 위) 어두운 둥근 토스트, 글꼴은 앱 글꼴 */
#alert-wrap.alert-wrap { position: fixed; top: auto; bottom: calc(128px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); width: 100%; max-width: 414px; padding: 0 20px; pointer-events: none; font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif; }
#alert-wrap .alert-content { padding: 13px 18px; border-radius: 12px; background: rgba(25, 31, 40, .92) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); animation: nd-toast .22s ease-out; }
#alert-wrap .alert-content.bg-red { background: rgba(25, 31, 40, .92) !important; }
#alert-wrap .alert-content + .alert-content { margin-top: 8px; }
#alert-wrap .alert-content span { color: #fff; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em; }
@keyframes nd-toast { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 약관 화살표: 필수 약관 전문 보기가 화살표로 옮겨 가서 9px 그대로면 손가락으로 누르기 어렵다. 누르는 영역만 넓힌다 */
.nd-chk i.nd-chev{position:relative}
.nd-chk i.nd-chev::after{content:"";position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px}

/* 토스트: 입력 중에는 키보드가 화면 아래를 덮으므로 위쪽에 띄운다. 동작 줄이기 설정은 위 토스트 규칙보다 뒤에 있어야 적용된다 */
body:has(input:focus, textarea:focus) #alert-wrap.alert-wrap{top:88px;bottom:auto}
@media (prefers-reduced-motion:reduce){#alert-wrap .alert-content{animation:none}}

/* 결과 제목 안의 강조 글자: 옛 공통 CSS 의 span 크기가 들어와 앞뒤 글자보다 작게 보인다 */
.nd-result b span{font-size:inherit;font-weight:inherit;line-height:inherit}
.nd-hd + .nd-tabs{padding:0 20px;margin-bottom:12px}
.nd-in{position:relative}
.nd-in>select{position:absolute;top:0;left:0;width:100%;height:100%;background:none;border:0;outline:0;font:inherit;font-size:14.5px;color:#191f28;padding:0 34px 0 14px;-webkit-appearance:none;appearance:none}
.nd-in>select + .nd-chev{pointer-events:none}
.nd-in>input:disabled,.nd-in .input-close input:disabled{opacity:1;-webkit-text-fill-color:#8b95a1}
button.nd-add{margin-top:12px;height:48px;border-radius:12px;border:1.5px dashed #b9c7dd;color:#2358a0;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
.nd-f label.nd-in{display:flex;margin:0;font-size:14.5px;font-weight:400}
.nd-sticky{height:29px;margin-bottom:-29px}
.nd-body>.nd-sticky{margin-bottom:-45px}