/* ------------------------------------------------------------------ *
 * pickly — 리디자인 스타일시트
 * 시안: donation/pickly (taste-skill redesign, 2026-09-05)
 * 1) preflight  2) 시안 globals.css  3) 앱 화면(검색·결과·인증)
 * ------------------------------------------------------------------ */

/* --- 1) preflight : 시안이 쓰던 tailwind 리셋을 대체합니다 ----------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- 2) 시안 globals.css (원본 유지) ------------------------------- */
@font-face{font-family:Pickly Sans;src:url('/fonts/PretendardVariable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
.wordmark img,.reset-brand img{display:block;width:164px;height:auto;max-width:100%}.wordmark:has(img){display:inline-flex;align-items:center;flex-shrink:0}footer .wordmark img{width:143px}@media(max-width:767px){.header .wordmark img{width:138px}}
/* Taste Skill redesign: variance 8, motion 4, density 4. Existing copy, routes and wordmark retained. */
:root{color-scheme:light;--ink:#243337;--muted:#647074;--paper:#fffcf7;--apricot:#f4b08d;--line:#dddeda;--radius:18px;--danger:#a63d1c}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Pickly Sans','Malgun Gothic',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer;color:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #a44e2c;outline-offset:5px}main{max-width:1600px;margin:0 auto;padding:0 40px}.skip-link{position:fixed;top:-70px;left:20px;z-index:20;padding:15px;background:var(--ink);color:white}.skip-link:focus{top:12px}.header{height:92px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 24px}.wordmark{font-family:'Pickly Sans','Malgun Gothic',sans-serif;font-size:40px;letter-spacing:-.055em;font-weight:900;line-height:1}.header nav{display:flex;gap:36px;align-items:center;font-size:15px;font-weight:550}.header nav a{position:relative;padding:10px 0}.header nav a:after{content:'';position:absolute;bottom:3px;left:0;width:100%;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .2s}.header nav a:hover:after{transform:scaleX(1)}.nav-cta{display:flex;align-items:center;gap:18px;font-size:14px;font-weight:650;background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:14px 20px;transition:transform .2s}.nav-cta:hover{transform:translateY(-2px)}.hero{background:#fae8d8;border-radius:26px;overflow:hidden}.hero-stage{display:grid;grid-template-columns:1fr 1fr;min-height:510px;position:relative;background:linear-gradient(110deg,#fae8d8 0%,#f7dcc9 100%)}.hero-copy{padding:48px 0 45px 48px;position:relative;z-index:2;pointer-events:none}.brand-line{display:inline-flex;align-items:center;margin:0 0 26px;font-size:14px;font-weight:650;letter-spacing:-.02em}.brand-line:before{content:'';height:1px;width:26px;background:currentColor;margin-right:10px}h1{font-size:clamp(48px,4.65vw,72px);font-weight:750;line-height:1.12;letter-spacing:-.06em;margin:0;word-break:keep-all;text-wrap:balance}h1 span{display:inline-block;margin-top:6px;color:#a44e2c}.description{font-size:16px;line-height:1.7;letter-spacing:-.02em;margin:26px 0 0;color:#5e625e}.studio{position:relative;min-width:0;display:flex;align-items:flex-end;justify-content:center;isolation:isolate}.character{width:125%;max-width:none;flex-shrink:0;background:none;border:0;padding:0;margin:0 0 22px -38px;mix-blend-mode:multiply;transform-origin:50% 88%;animation:character-arrive .9s ease-out both;transition:transform .5s cubic-bezier(.2,.7,.2,1)}.character img{display:block;width:100%;height:auto;mask-image:radial-gradient(ellipse 66% 68% at 50% 50%,#000 59%,transparent 99%)}.character:hover,.awake .character{transform:translateY(-7px) rotate(-1deg)}.awake .character{animation:greeting 2s ease-in-out infinite}.discovery-desk{display:grid;grid-template-columns:240px minmax(0,1fr);gap:25px;align-items:start;padding:27px 35px 24px;background:var(--ink);color:var(--paper)}.desk-heading{font-size:18px;font-weight:600;line-height:1.5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px}.desk-heading>span{max-width:150px;word-break:keep-all}.search{display:flex;align-items:center;gap:15px;background:var(--paper);color:var(--ink);padding:8px 8px 8px 20px;border-radius:var(--radius);border:2px solid transparent;transition:border-color .2s,box-shadow .2s}.search:focus-within{border-color:var(--apricot);box-shadow:0 0 0 3px #f4b08d66}.search>svg{flex-shrink:0;color:#6a7677}.search input{flex:1;width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);height:42px;font-size:16px}.search input::placeholder{color:#737b79}.search button{display:flex;align-items:center;gap:16px;justify-content:center;background:var(--apricot);border:0;border-radius:12px;height:46px;padding:0 20px;font-size:15px;font-weight:650;white-space:nowrap;transition:background .2s}.search button:hover{background:#ef9f76}.suggestions{display:flex;gap:19px;align-items:center;flex-wrap:wrap;padding-top:17px;font-size:13px;color:#e5e9e5}.suggestions>span{color:#b9c2bf}.suggestions button{border:0;background:none;padding:3px 0;display:flex;align-items:center;gap:5px;font-size:13px}.suggestions button:hover{color:var(--apricot)}.sharing{display:grid;grid-template-columns:.85fr 1.65fr;gap:55px;padding:75px 24px 70px;align-items:center}.sharing-intro>svg{color:#a44e2c;margin-bottom:20px}.sharing h2{font-size:31px;font-weight:650;letter-spacing:-.04em;line-height:1.3;margin:0 0 20px;text-wrap:balance}.sharing-intro>p{font-size:15px;color:var(--muted);line-height:1.75;margin:0}.reward-split{display:grid;grid-template-columns:1fr 1fr;position:relative;isolation:isolate}.reward-half{border-radius:var(--radius) 0 0 var(--radius);padding:32px;background:#edf0eb;min-width:0}.reward-half>p{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:650;margin:0 0 22px}.reward-half>strong{display:block;font-size:clamp(68px,8vw,112px);font-weight:650;line-height:1;letter-spacing:-.075em}.reward-half>strong span{font-size:.4em;letter-spacing:-.03em;margin-left:4px}.reward-caption{display:block;font-size:14px;line-height:1.5;margin-top:25px;color:#5b6664}.donation{background:var(--apricot);border-radius:0 var(--radius) var(--radius) 0}.donation .reward-caption{color:#614833}.split-join{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;background:var(--paper);border-radius:50%;display:grid;place-items:center}footer{border-top:1px solid var(--line);padding:30px 24px 35px;display:flex;align-items:center;gap:25px}footer .wordmark{font-size:28px;letter-spacing:-.045em}footer p{font-size:14px;color:var(--muted)}footer>span{margin-left:auto;font-size:13px;color:var(--muted)}.notice{position:fixed;z-index:10;bottom:24px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 32px));display:flex;align-items:center;gap:20px;padding:18px 22px;background:var(--ink);color:var(--paper);border:1px solid #74827d;border-radius:var(--radius);box-shadow:0 12px 30px #23333626}.notice p{font-size:14px;line-height:1.7;margin:0}.notice button{border:0;background:none;padding:6px;color:inherit}@keyframes character-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes greeting{0%,100%{transform:translateY(-3px) rotate(-.6deg)}50%{transform:translateY(-8px) rotate(.6deg)}}
@media(min-width:1450px){.hero-stage{min-height:570px}.hero-copy{padding-top:58px}.character{margin-bottom:15px}}
@media(max-width:1100px){main{padding:0 24px}.header{padding:0 10px}.hero-copy{padding:40px 0 36px 30px}h1{font-size:54px}.hero-stage{min-height:450px}.description{font-size:15px}.character{width:138%;margin-bottom:32px;margin-left:-10px}.discovery-desk{grid-template-columns:170px minmax(0,1fr);padding:24px;gap:20px}.desk-heading{font-size:16px}.desk-heading>svg{display:none}.suggestions{gap:13px}.suggestions>span{display:none}.sharing{padding:55px 12px;gap:30px}.reward-half{padding:25px}.reward-caption{font-size:13px}.sharing h2{font-size:28px}}
@media(max-width:767px){main{padding:0 16px}.header{height:80px;padding:0 5px;gap:18px}.wordmark{font-size:38px}.header nav{display:none}.nav-cta{font-size:13px;padding:12px 14px;gap:10px}.hero{border-radius:20px}.hero-stage{display:flex;flex-direction:column;min-height:0}.hero-copy{padding:32px 26px 0}.brand-line{font-size:13px;margin-bottom:22px}h1{font-size:clamp(43px,8vw,62px);line-height:1.13}.description{font-size:15px;line-height:1.7;margin-top:22px}.studio{height:auto;aspect-ratio:1.6;max-height:390px;overflow:hidden}.character{width:100%;margin:0;align-self:center}.discovery-desk{display:block;padding:22px 18px}.desk-heading{padding:0;margin-bottom:14px;font-size:16px}.desk-heading>span{max-width:none}.desk-heading>svg{display:block;width:19px}.search{gap:10px;padding:6px 6px 6px 12px;border-radius:14px}.search>svg{width:18px}.search input{font-size:14px;height:40px}.search button{font-size:0;width:42px;height:42px;padding:0;gap:0;border-radius:9px}.search button svg{width:22px}.suggestions{gap:8px 15px;padding-top:14px}.suggestions button{font-size:12px;min-height:30px}.sharing{display:block;padding:43px 6px}.sharing-intro>svg{margin-bottom:14px;width:26px}.sharing h2{font-size:29px;line-height:1.3}.sharing h2 br:last-child{display:none}.sharing-intro>p{font-size:14px}.reward-split{margin-top:25px}.reward-half{padding:24px 18px}.reward-half>p{font-size:13px;gap:6px;margin-bottom:18px}.reward-half>p>svg{width:14px}.reward-half>strong{font-size:70px}.reward-caption{font-size:12px;margin-top:20px;word-break:keep-all}.split-join{width:32px;height:32px}.split-join svg{width:16px}footer{padding:25px 6px;gap:16px;flex-wrap:wrap}footer p{font-size:12px}footer>span{margin-left:0;font-size:12px;flex-basis:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.character,.awake .character{animation:none}*{transition:none!important}.character:hover,.awake .character{transform:none}}
/* Local animation frames keep the rest of both characters stationary. */
.character,.awake .character{position:relative;animation:none;transition:none;mask-image:radial-gradient(ellipse 66% 68% at 50% 50%,#000 59%,transparent 99%)}
.character:hover,.awake .character{transform:none}
.character img{mask-image:none}
.character picture{display:contents}
.character .gesture{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.character .gesture-wave{mask-image:radial-gradient(ellipse 8.8% 15.5% at 56.3% 41.2%,#000 86%,transparent 100%);animation:girl-wave 6s linear infinite}
.character .gesture-wink{mask-image:radial-gradient(ellipse 3.9% 4.9% at 32.55% 24.1%,#000 79%,transparent 100%);animation:boy-wink 7.2s linear infinite}
@keyframes girl-wave{0%,10%,23%,36%,100%{opacity:0}12%,20%,25%,33%{opacity:1}}
@keyframes boy-wink{0%,47%,56%,100%{opacity:0}48.5%,54.5%{opacity:1}}
@media(prefers-reduced-motion:reduce){.character .gesture{animation:none;display:none}}

/* 브랜드 라인 : 로드 시 살짝 떠오르고, 브랜드명 아래로 밑줄이 그려집니다 */
.brand-line{animation:brand-line-in .6s ease-out both}
.brand-highlight{position:relative;color:#a44e2c}
.brand-highlight:after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;animation:brand-underline .45s .4s ease-out both}
@keyframes brand-line-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes brand-underline{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.brand-line{animation:none}.brand-highlight:after{animation:none;transform:scaleX(1)}}

/* --- 3) 앱 화면 : 검색 데스크 확장, 결과, 인증 ---------------------- *
 * 시안 팔레트를 그대로 사용합니다.
 * --ink #243337 / --muted #647074 / --paper #fffcf7 / --apricot #f4b08d
 * ------------------------------------------------------------------ */

/* 헤더의 로그인 · 포인트 영역 */
.header-side{display:flex;align-items:center;gap:22px}
.auth-status{display:flex;align-items:center;gap:14px;font-size:14px}
.auth-link{font-size:14px;font-weight:600;padding:8px 2px;border-bottom:1px solid transparent;transition:border-color .2s}
.auth-link:hover{border-color:var(--ink)}
.auth-account{display:flex;align-items:center;gap:12px}
.donation-impact{background:#fae8d8;border:1px solid #ebc6ad;border-radius:var(--radius);padding:28px;color:var(--ink)}
.donation-impact h2{word-break:keep-all}
.donation-amount{display:block;font-size:clamp(38px,5vw,54px);font-weight:700;line-height:1;letter-spacing:-.055em;font-variant-numeric:tabular-nums;margin:12px 0}
.donation-impact p{font-size:14px;line-height:1.7;word-break:keep-all}
.donation-impact .dash-note{color:#665348;margin-top:10px;font-size:13px}
.donation-action{display:inline-block;padding:12px 16px;background:var(--ink);color:var(--paper);border-radius:10px;font-size:14px;font-weight:600;margin-top:16px;white-space:nowrap}
.donation-banner{max-width:38ch}
.donation-banner p{margin:0;font-size:15px;line-height:1.75;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}
.donation-banner .donation-disclosure{margin-top:12px;font-size:13px;line-height:1.7}
.donation-participate{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:32px;padding:13px 22px;border-radius:var(--radius);background:#a44e2c;color:var(--paper);font-size:14px;font-weight:650;white-space:nowrap;transition:transform .2s,background .2s}
.donation-participate:hover{background:#8f4322;transform:translateY(-2px)}
.donation-participate:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:var(--radius)}
.donation-participate:active{transform:translateY(1px)}
.history-donation{display:block;color:#87502f;font-size:12px;line-height:1.6;margin-top:4px}
@media(max-width:767px){.donation-impact{padding:22px 18px}.donation-banner{max-width:none}.donation-banner p{font-size:14px}.donation-banner .donation-disclosure{font-size:12px}}
.auth-email{color:var(--muted);font-size:13px}
.auth-points{font-weight:700;letter-spacing:-.02em;background:#fae8d8;border-radius:999px;padding:6px 12px;font-size:13px;transition:background .3s}
.auth-points-updated{background:var(--apricot)}
.auth-points-earned{font-size:12px;font-weight:700;color:#a44e2c;animation:point-pop .5s ease-out}
@keyframes point-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 눌림 피드백 : hover 만 있던 주요 버튼에 press 상태를 더합니다 */
.nav-cta:active,.about-cta:active,.donation-action:active,.search button:active,.auth-primary:active,.dash-interest-form button:active{transform:translateY(1px)}

/* 검색 데스크 : 기간 선택과 도움말을 시안 폼에 얹습니다 */
.search .select-wrap{position:relative;display:flex;align-items:center;flex-shrink:0}
.search select{appearance:none;height:46px;border-radius:12px;background:#eef1ec;padding:0 34px 0 15px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .2s}
.search select:hover{background:#e4e8e2}
.search .select-arrow{position:absolute;right:14px;width:11px;stroke:#5f6a68;stroke-width:1.5;fill:none;pointer-events:none}
.search button[type=submit]{position:relative;padding-right:44px}
.search button[type=submit]:after{content:'';position:absolute;right:19px;top:50%;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.search button[type=submit]:disabled{opacity:.6;cursor:progress}
.search-help{grid-column:1/-1;margin:14px 0 0;font-size:13px;color:#b9c2bf}
.suggestions>#examples{display:flex;gap:19px;align-items:center;flex-wrap:wrap}
.suggestions button:after{content:'+';font-size:14px;line-height:1;margin-left:5px;opacity:.65}

/* 신뢰 문구 스트립 */
.trust-strip{display:flex;flex-wrap:wrap;gap:14px 40px;padding:26px 24px 0}
.trust-item{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
.trust-item svg{width:19px;height:19px;flex-shrink:0;fill:none;stroke:#a44e2c;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 진행 상태 */
.status{max-width:1000px;margin:34px auto 0;padding:22px 26px;border:1px solid var(--line);border-radius:var(--radius);background:#fffdfa;transition:opacity .5s,transform .5s}
.status.quiet{opacity:.5}
.status.error{border-color:#e0b3a2;background:#fdf1eb;color:#8f3d1c;font-size:14.5px;line-height:1.6}
.activity-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.activity-title{font-size:16px;font-weight:650;letter-spacing:-.03em;word-break:keep-all}
.status-time{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0}
.search-greeting{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center;margin:-6px 0 20px;padding:8px 22px 0;background:#fff3e8;border-radius:16px;overflow:hidden;animation:search-hello-in .35s ease-out}
.search-girl{position:relative;width:150px;height:185px;transform-origin:55% 90%;animation:search-girl-hello 3.2s ease-in-out infinite;mask-image:linear-gradient(#000 88%,transparent)}
.search-girl img{position:absolute;width:350px;max-width:none;height:auto;left:-172px;top:-4px}
.search-greeting-bubble{padding:18px 0;min-width:0;word-break:keep-all}
.search-greeting-label{display:block;font-size:12px;color:#946349;margin-bottom:8px}
.search-greeting-bubble strong{display:block;font-size:22px;line-height:1.45;letter-spacing:-.03em;color:var(--ink)}
.search-greeting-bubble p{margin:9px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
.search-greeting.without-portrait{grid-template-columns:1fr}
.search-reward{display:inline-block;margin:18px 0 0;padding:9px 15px;border-radius:999px;background:#edf5eb;color:#326044;font-size:15px;font-weight:700;animation:search-hello-in .3s ease-out}
@keyframes search-hello-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes search-girl-hello{0%,100%{transform:rotate(0)}18%{transform:rotate(-3deg) translateY(-2px)}38%{transform:rotate(2deg)}58%{transform:rotate(-1deg)}}
@media(max-width:600px){.search-greeting{grid-template-columns:104px minmax(0,1fr);gap:10px;padding:6px 12px 0}.search-girl{width:104px;height:138px}.search-girl img{width:270px;left:-132px;top:0}.search-greeting-bubble strong{font-size:17px}.search-greeting-bubble p{font-size:12px}.search-greeting-label{font-size:11px}}
@media(prefers-reduced-motion:reduce){.search-greeting,.search-girl,.search-reward{animation:none}}
.activity-list{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:18px}
.activity-step{position:relative;padding-left:22px;font-size:13.5px;color:#9aa3a1;transition:color .3s}
.activity-step:before{content:'';position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#dcdfda;transition:background .3s,transform .3s}
.activity-step[data-state=active]{color:var(--ink);font-weight:600}
.activity-step[data-state=active]:before{background:var(--apricot);animation:step-pulse 1.3s ease-in-out infinite}
.activity-step[data-state=done]{color:var(--muted)}
.activity-step[data-state=done]:before{background:#a44e2c}
@keyframes step-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}

/* 결과 카드 */
.result{max-width:1000px;margin:0 auto;padding-bottom:20px}
.card{margin-top:26px;padding:28px 30px;border:1px solid var(--line);border-radius:var(--radius);background:#fffdfa}
.card>h2{font-size:15px;font-weight:650;letter-spacing:-.02em;color:#a44e2c;margin-bottom:18px}
.card.donation-impact{background:#fae8d8;border-color:#ebc6ad}
.card.donation-impact>h2{font-size:19px;color:var(--ink)}
.donation-impact .dash-meter-label{width:auto;min-width:60px;white-space:nowrap}
.appear{animation:appear .45s ease-out both}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.summary{font-size:16.5px;line-height:1.78;letter-spacing:-.02em;word-break:keep-all;white-space:pre-wrap;max-width:68ch}
.summary.streaming:after{content:'';display:inline-block;width:2px;height:1em;margin-left:3px;background:var(--apricot);vertical-align:-2px;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}

.pick{padding:22px 0;border-top:1px solid var(--line)}
.pick:first-child{padding-top:0;border-top:0}
.pick-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pick-name{font-size:19px;font-weight:700;letter-spacing:-.035em;word-break:keep-all}
.price{font-size:14px;font-weight:650;color:#a44e2c;background:#fae8d8;border-radius:999px;padding:5px 12px}
.why{margin-top:12px;font-size:15px;line-height:1.72;color:#4d5856;word-break:keep-all}
.pros-cons{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
.pros-cons li{position:relative;padding-left:20px;font-size:14px;line-height:1.6;color:#4d5856;word-break:keep-all}
.pros-cons li:before{position:absolute;left:0;font-weight:700}
.pro:before{content:'+';color:#2f7a5b}
.con:before{content:'−';color:#a44e2c}

.tips li{position:relative;padding-left:22px;margin-top:11px;font-size:14.5px;line-height:1.7;color:#4d5856;word-break:keep-all}
.tips li:first-child{margin-top:0}
.tips li:before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--apricot)}

.shop-row{margin-top:20px}
.shop-row:first-child{margin-top:0}
.shop-kw{font-size:14px;font-weight:650;letter-spacing:-.02em;margin-bottom:12px;word-break:keep-all}
.shop-links{display:flex;flex-wrap:wrap;gap:9px}
.shop-links a{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;padding:9px 15px;border-radius:12px;background:#eef1ec;transition:background .2s,transform .2s}
.shop-links a:hover{background:var(--apricot);transform:translateY(-2px)}
.pick-shopping{margin-top:20px}
.pick-shopping .shop-kw{font-size:13px;font-weight:500;color:#4d5856;margin-bottom:8px}
.pick-shopping .shop-links a{min-height:44px;justify-content:center}
.pick-name-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--line)}
.pick-name-link:hover{text-decoration-color:currentColor;color:#a44e2c}
.pick-name-link:focus-visible,.shop-links a:focus-visible{outline:2px solid #a44e2c;outline-offset:4px}
@media(max-width:480px){.pick-shopping .shop-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pick-shopping .shop-links a{padding:9px 12px}}

.sources{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.source{display:flex;gap:13px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--paper);transition:border-color .2s,transform .2s}
.source:hover{border-color:var(--apricot);transform:translateY(-2px)}
.source-badge{flex-shrink:0;width:32px;height:32px;border-radius:10px;background:#fae8d8;color:#a44e2c;display:grid;place-items:center;font-size:14px;font-weight:700}
.source-body{min-width:0}
.source-body .t{font-size:14px;font-weight:650;line-height:1.45;letter-spacing:-.02em;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.source-body .u{font-size:12px;color:var(--muted);margin-top:4px}
.source-body .s{font-size:12.5px;line-height:1.55;color:#77807e;margin-top:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 로그인 모달 */
.auth-modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px}
.auth-backdrop{position:absolute;inset:0;background:#2433374d;backdrop-filter:blur(3px)}
.auth-dialog{position:relative;width:min(430px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:34px 32px 30px;background:var(--paper);border-radius:26px;box-shadow:0 24px 60px #2433372e;animation:appear .3s ease-out both}
.auth-close{position:absolute;top:16px;right:18px;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;color:var(--muted);transition:background .2s}
.auth-close:hover{background:#eef1ec}
.auth-eyebrow{display:inline-flex;align-items:center;font-size:13px;font-weight:650;letter-spacing:-.02em;color:#a44e2c;margin-bottom:14px}
.auth-eyebrow:before{content:'';height:1px;width:22px;background:currentColor;margin-right:9px}
.auth-dialog h2,.reset-panel h1{font-size:26px;font-weight:700;letter-spacing:-.045em;line-height:1.3;word-break:keep-all}
.auth-intro{font-size:14.5px;line-height:1.7;color:var(--muted);margin-top:12px;word-break:keep-all}
.auth-notice{margin-top:18px;padding:13px 16px;border-radius:12px;background:#fae8d8;font-size:13.5px;line-height:1.6;color:#7a4527}
.auth-notice.is-error{display:flex;align-items:flex-start;gap:10px;background:#fdebe6;color:var(--danger)}
.auth-notice-icon{flex-shrink:0;margin-top:1px;color:var(--danger)}
.auth-notice-title{display:block;font-weight:650;margin-bottom:2px}
.auth-notice-message{margin:0}

.auth-oauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;margin-top:20px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-size:14.5px;font-weight:650;color:var(--ink);transition:background .2s,border-color .2s}
.auth-oauth:hover{background:#f7f8f5;border-color:#c9d0c6}
.auth-oauth svg{flex-shrink:0}
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0 4px;font-size:12.5px;color:var(--muted)}
.auth-divider:before,.auth-divider:after{content:'';flex:1;height:1px;background:var(--line)}
.auth-form{display:flex;flex-direction:column;margin-top:24px}
.auth-form label{font-size:13px;font-weight:650;margin-bottom:8px}
.auth-form label+input{margin-bottom:16px}
.auth-form input{height:50px;padding:0 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:15px;transition:border-color .2s,box-shadow .2s}
.auth-form input:focus{outline:0;border-color:var(--apricot);box-shadow:0 0 0 3px #f4b08d55}
.auth-form .auth-age{display:flex;align-items:center;gap:10px;min-height:44px;margin:8px 0;cursor:pointer}
.auth-form .auth-age input{flex:0 0 20px;width:20px;height:20px;padding:0;accent-color:var(--ink)}
.auth-help{font-size:12.5px;color:var(--muted);margin:-10px 0 16px}
.auth-error{font-size:13px;line-height:1.6;color:#a63d1c;word-break:keep-all}
.auth-error:not(:empty){margin-bottom:14px}
.auth-primary{height:52px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:650;margin-top:6px;transition:transform .2s,background .2s}
.auth-primary:hover{transform:translateY(-2px)}
.auth-primary:disabled{opacity:.55;transform:none;cursor:progress}
.auth-secondary{height:50px;border-radius:12px;background:#eef1ec;font-size:14.5px;font-weight:650;transition:background .2s}
.auth-secondary:hover{background:#e4e8e2}
.auth-text-button{font-size:13.5px;color:var(--muted);padding:8px;text-decoration:underline;text-underline-offset:3px}
.auth-actions{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.auth-switches{display:flex;justify-content:space-between;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.auth-switches-single{justify-content:center;border-top:0;padding-top:0;margin-top:14px}
.auth-switches button{font-size:13.5px;color:var(--muted);padding:6px 2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.auth-switches button:hover{color:var(--ink);border-color:var(--ink)}
[data-auth-unconfirmed]{border-top:0;padding-top:0}

/* 비밀번호 재설정 페이지 */
.reset-page{background:#fae8d8}
.reset-shell{max-width:520px;margin:0 auto;padding:48px 20px 60px;display:flex;flex-direction:column;align-items:center;gap:28px}
.reset-brand{font-family:'Pickly Sans','Malgun Gothic',sans-serif;font-size:38px;font-weight:900;letter-spacing:-.05em;line-height:1}
.reset-brand span{color:#a44e2c}
.reset-panel{width:100%;padding:34px 32px 32px;background:var(--paper);border-radius:26px;box-shadow:0 20px 50px #24333721}
.reset-home{display:inline-block;margin-top:22px;font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* 앱 화면 반응형 */
@media(max-width:1100px){
 .trust-strip{gap:12px 26px;padding:22px 12px 0}
 .status,.result{max-width:none}
}
@media(max-width:767px){
 .header-side{gap:12px}
 .auth-email{display:none}
 .auth-points{padding:5px 10px;font-size:12px}
 .search{flex-wrap:wrap;padding:10px}
 .search>svg{order:0}
 .search input{order:1;width:auto}
 .search .select-wrap{order:2;flex:1}
 .search select{width:100%;height:42px;font-size:13px}
 .search button[type=submit]{order:3;font-size:14px;width:auto;height:42px;padding:0 38px 0 16px;flex-shrink:0}
 .search button[type=submit]:after{right:16px}
 .search-help{font-size:12px;margin-top:12px}
 .trust-strip{flex-direction:column;gap:10px;padding:20px 6px 0}
 .trust-item{font-size:12.5px}
 .status{margin-top:26px;padding:18px}
 .activity-list{gap:8px 18px;margin-top:14px}
 .card{margin-top:18px;padding:22px 18px;border-radius:16px}
 .summary{font-size:15.5px}
 .pick-name{font-size:17px}
 .sources{grid-template-columns:1fr}
 .auth-dialog{padding:30px 22px 26px;border-radius:20px}
 .auth-dialog h2,.reset-panel h1{font-size:23px}
 .reset-panel{padding:28px 22px;border-radius:20px}
}

/* 모바일 검색바 : 입력줄과 조작줄을 분리합니다 */
@media(max-width:767px){
 .search{display:grid;grid-template-columns:20px minmax(0,1fr) auto;grid-template-areas:'icon input input' 'select select submit';align-items:center;column-gap:10px;row-gap:10px;padding:12px;flex-wrap:nowrap}
 .search>svg{grid-area:icon;width:19px}
 .search input{grid-area:input;width:100%;height:38px}
 .search .select-wrap{grid-area:select;width:100%}
 .search select{width:100%;height:44px}
 .search button[type=submit]{grid-area:submit;width:auto;height:44px;font-size:14px;padding:0 40px 0 18px;gap:0}
 .search button[type=submit]:after{right:18px}
 /* 시안의 3행 헤드라인을 모바일에서도 유지 */
 .sharing h2 br:last-child{display:block}
}

/* 모바일 헤더 : 로그인 상태에서 계정 영역이 줄바꿈되지 않도록 */
@media(max-width:767px){
 .header{gap:10px}
 .header-side{flex-wrap:nowrap;gap:10px}
 .auth-status{gap:8px}
 .auth-link,.nav-cta,.auth-points,.auth-points-earned{white-space:nowrap}
 .auth-link{font-size:13px}
 /* 로그인하면 헤더 CTA를 감춰 계정 영역에 자리를 내줍니다 */
 .header-side:has(.auth-account) .nav-cta{display:none}
}

/* --- 4) 대시보드 · 소개 페이지 -------------------------------------- *
 * 시안 팔레트를 그대로 상속합니다. 기존 셀렉터는 건드리지 않고
 * .dash-* / .about-* 접두사로만 추가합니다.
 * ------------------------------------------------------------------ */

.dash,.about{max-width:1000px;margin:0 auto;padding:14px 0 60px}
.dash-eyebrow,.about-eyebrow{display:inline-flex;align-items:center;font-size:13px;font-weight:650;letter-spacing:-.02em;color:#a44e2c}
.dash-eyebrow:before,.about-eyebrow:before{content:'';height:1px;width:22px;background:currentColor;margin-right:9px}
.dash-title,.about-title{font-size:clamp(30px,3.4vw,42px);font-weight:750;letter-spacing:-.05em;line-height:1.22;margin:14px 0 0;word-break:keep-all;text-wrap:balance}

/* 포인트 요약 */
.dash-balance{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.dash-balance strong{font-size:clamp(38px,5vw,54px);font-weight:700;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums}
.dash-today{font-size:14px;font-weight:650;color:#a44e2c;background:#fae8d8;border-radius:999px;padding:6px 13px}
.dash-meters{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.dash-meter{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dash-meter-label{flex-shrink:0;width:38px;font-size:14px;font-weight:650}
.dash-meter-track{flex:1;min-width:120px;height:9px;border-radius:999px;background:#eef1ec;overflow:hidden}
.dash-meter-fill{height:100%;width:100%;border-radius:999px;background:var(--apricot);transform:scaleX(0);transform-origin:left;transition:transform .4s ease-out}
.dash-meter-count{font-size:13.5px;font-weight:650;font-variant-numeric:tabular-nums;flex-shrink:0}
.dash-meter-note{font-size:13px;color:var(--muted);flex-shrink:0}
.dash-note{margin-top:22px;font-size:13px;line-height:1.7;color:var(--muted);word-break:keep-all}

/* 나눔 예정처 — 단체명과 미협의 고지는 같은 시각적 비중을 유지합니다.
 * 고지를 작게 넣거나 접어두면 오인 방지 효과가 사라집니다. */
.dash-orgs{display:flex;flex-wrap:wrap;gap:9px}
.dash-orgs li{font-size:15px;font-weight:650;letter-spacing:-.02em;padding:10px 16px;border-radius:12px;background:#eef1ec}
.dash-orgs-notice{margin-top:16px;padding:14px 17px;border-radius:12px;background:#fae8d8;color:#7a4527;font-size:14.5px;font-weight:600;line-height:1.65;word-break:keep-all}

/* 관심 키워드 */
.dash-interest-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dash-interest-form input{flex:1;min-width:200px;height:48px;padding:0 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:15px;transition:border-color .2s,box-shadow .2s}
.dash-interest-form input:focus{outline:0;border-color:var(--apricot);box-shadow:0 0 0 3px #f4b08d55}
.dash-interest-form .select-wrap{position:relative;display:flex;align-items:center;flex-shrink:0}
.dash-interest-form select{appearance:none;height:48px;border-radius:12px;background:#eef1ec;padding:0 34px 0 15px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.dash-interest-form select:hover{background:#e4e8e2}
.dash-interest-form button{height:48px;padding:0 24px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:650;transition:transform .2s}
.dash-interest-form button:hover{transform:translateY(-2px)}
.dash-interest-form button:disabled{opacity:.55;transform:none;cursor:progress}
#interest-error:not(:empty){margin-top:14px}
.dash-chips{display:flex;flex-direction:column;gap:10px}
.dash-chips:not(:empty){margin-top:22px}
.dash-chip{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);transition:border-color .2s}
.dash-chip:hover{border-color:var(--apricot)}
.dash-chip-text{flex:1;min-width:0;font-size:14.5px;font-weight:600;letter-spacing:-.02em;word-break:keep-all}
.dash-chip-action{flex-shrink:0;font-size:13px;font-weight:650;padding:8px 14px;border-radius:10px;background:#eef1ec;transition:background .2s}
.dash-chip-action:hover{background:var(--apricot)}
.dash-chip-remove{color:var(--muted)}
.dash-chip-remove:hover{background:#f6ded4;color:#a63d1c}
.dash-chip-remove:disabled{opacity:.5;cursor:progress}
.dash-empty{margin-top:20px;font-size:14px;line-height:1.7;color:var(--muted);word-break:keep-all}

/* 적립 내역 */
.dash-table-wrap{overflow-x:auto}
.dash-table{width:100%;border-collapse:collapse;font-size:14px}
.dash-table th{text-align:left;font-size:12.5px;font-weight:650;color:var(--muted);padding:0 12px 12px 0;white-space:nowrap}
.dash-table td{padding:13px 12px 13px 0;border-top:1px solid var(--line);white-space:nowrap}
.dash-table th:last-child,.dash-table td:last-child{padding-right:0;text-align:right}
.dash-table th:nth-child(3),.dash-table td:nth-child(3){text-align:right}
.dash-cell-date{color:var(--muted);font-variant-numeric:tabular-nums}
.dash-cell-amount{font-weight:700;font-variant-numeric:tabular-nums}
.dash-cell-amount.is-earned{color:#2f7a5b}
.dash-cell-amount.is-spent{color:#a44e2c}
.dash-cell-balance{color:var(--muted);font-variant-numeric:tabular-nums}
.dash-more{width:100%;margin-top:20px}

/* 소개 페이지 */
.about-lede{margin-top:20px;font-size:17px;line-height:1.75;letter-spacing:-.02em;color:#4d5856;word-break:keep-all}
.about-steps{counter-reset:about-step;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.about-step{counter-increment:about-step;padding:22px;border-radius:14px;background:#eef1ec}
.about-step:before{content:counter(about-step);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--apricot);font-size:13px;font-weight:700;margin-bottom:14px}
.about-step h3{font-size:15px;font-weight:700;letter-spacing:-.03em;margin-bottom:9px;word-break:keep-all}
.about-step p{font-size:13.5px;line-height:1.7;color:#5b6664;word-break:keep-all}
.about-list li{position:relative;padding-left:22px;margin-top:12px;font-size:14.5px;line-height:1.75;color:#4d5856;word-break:keep-all}
.about-list li:first-child{margin-top:0}
.about-list li:before{content:'';position:absolute;left:2px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--apricot)}
.about-cta{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:15px 22px;border-radius:var(--radius);background:var(--ink);color:var(--paper);font-size:15px;font-weight:650;transition:transform .2s}
.about-cta:hover{transform:translateY(-2px)}
footer>span a{text-decoration:underline;text-underline-offset:3px}

@media(max-width:1100px){
 .dash,.about{max-width:none}
}
@media(max-width:767px){
 .dash,.about{padding-bottom:40px}
 .dash-meter-label{width:auto}
 .dash-meter-track{min-width:90px}
 .dash-interest-form input{min-width:0;flex-basis:100%;height:44px;font-size:14px}
 .dash-interest-form .select-wrap{flex:1}
 .dash-interest-form select{width:100%;height:44px;font-size:13px}
 .dash-interest-form button{height:44px;padding:0 18px;font-size:14px}
 .dash-chip{flex-wrap:wrap;gap:9px}
 .dash-chip-text{flex-basis:100%}
 .dash-table{font-size:13px}
 .dash-orgs li{font-size:14px;padding:9px 13px}
 .dash-orgs-notice{font-size:13.5px}
}

/* 대시보드·소개 페이지의 헤더 메뉴는 모바일에서도 노출합니다.
 * 랜딩(.header nav)은 시안대로 계속 숨깁니다 — 그쪽은 앵커 메뉴라
 * 화면을 스크롤하면 같은 자리로 갈 수 있습니다. */
@media(max-width:767px){
 .header nav.page-nav{display:flex;gap:16px;font-size:13px;min-width:0}
 .header nav.page-nav a{padding:8px 0;white-space:nowrap}
 .page-shell-header{gap:12px;flex-wrap:wrap}
}
@media(max-width:400px){
 .header nav.page-nav{gap:12px;font-size:12.5px}
}

/* --- 5) 감사 후속 : 상태 표시·대시보드 요약·스켈레톤·404 ------------- */


/* 없는 주소로 왔을 때 보여 주는 페이지 */
.notfound{max-width:620px;margin:0 auto;padding:clamp(60px,12vw,140px) 0 clamp(80px,14vw,160px)}
.notfound-code{font-size:15px;font-weight:650;letter-spacing:.1em;color:#a44e2c}
.notfound-title{margin:16px 0 0;font-size:clamp(28px,4.4vw,40px);font-weight:750;letter-spacing:-.045em;line-height:1.25;word-break:keep-all;text-wrap:balance}
.notfound-lede{margin:16px 0 0;font-size:16px;line-height:1.75;color:var(--muted);word-break:keep-all;max-width:44ch}
.notfound-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:32px}
.notfound-cta{display:inline-flex;align-items:center;padding:14px 22px;border-radius:var(--radius);background:var(--ink);color:var(--paper);font-size:15px;font-weight:650;transition:transform .2s}
.notfound-cta:hover{transform:translateY(-2px)}
.notfound-cta:active{transform:translateY(1px)}
.notfound-link{font-size:14px;color:var(--muted);border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s}
.notfound-link:hover{border-color:var(--ink);color:var(--ink)}


/* 로그인 영역 : JS 가 계정 정보를 채우기 전까지 자리만 잡아 둡니다 */
.auth-status--pending{visibility:hidden}

/* 포인트·기부 예정금 카드를 넓은 화면에서 나란히 배치합니다 */
.dash-summary{display:grid;gap:26px;margin-top:26px}
.dash-summary>.card{margin-top:0}
@media(min-width:980px){.dash-summary{grid-template-columns:1fr 1fr}}
@media(max-width:767px){.dash-summary{gap:18px;margin-top:18px}}

/* 대시보드 로드 실패 배너 : 해당 섹션이 아니라 페이지 상단에 노출합니다 */
.dash-error{margin:16px 0 0;padding:14px 17px;border:1px solid #e0b3a2;border-radius:12px;background:#fdf1eb;color:#8f3d1c;font-size:14px;line-height:1.65;word-break:keep-all}

/* 큰 숫자가 도착하기 전 자리 표시 */
.skeleton{position:relative;color:transparent!important}
.skeleton::after{content:'';position:absolute;left:0;top:.14em;bottom:.14em;width:2.8em;border-radius:8px;background:linear-gradient(90deg,#eef1ec 25%,#e3e7e1 37%,#eef1ec 63%);background-size:400% 100%;animation:skeleton-shimmer 1.4s ease infinite}
@keyframes skeleton-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.skeleton::after{animation:none}}

/* 히어로 이용 3단계 : 라벨 + 브랜드색 화살표로 진행 방향을 분명히 보여 줍니다.
 * h1 보다는 확실히 작게 두되, 한눈에 읽히도록. 등장은 순서대로(스토리텔링). */
.hero-steps{display:flex;flex-wrap:wrap;align-items:center;gap:10px 2px;margin-top:32px;font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.4}
.hero-steps li{display:inline-flex;align-items:center;white-space:nowrap;animation:hero-step-in .5s ease-out both}
.hero-steps li:nth-child(2){animation-delay:.09s}
.hero-steps li:nth-child(3){animation-delay:.18s}
.hero-steps li span{padding:9px 16px;border-radius:999px;background:var(--paper);border:1px solid #ebc6ad;color:var(--ink)}
.hero-steps li+li::before{content:'\2192';margin:0 10px;font-size:1.2em;font-weight:400;color:#a44e2c;transform:translateY(1px)}
@keyframes hero-step-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-steps li{animation:none}}
@media(max-width:767px){.hero-steps{margin-top:24px;font-size:13.5px;gap:8px 0}.hero-steps li span{padding:8px 13px}.hero-steps li+li::before{margin:0 7px}}
/* Dashboard withdrawal form */
.withdrawal-form{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin:20px 0}
.withdrawal-form label{display:grid;gap:8px;flex:1 1 170px;font-size:14px}
.withdrawal-form input{box-sizing:border-box;width:100%;min-width:0;padding:12px;border:1px solid var(--line);border-radius:8px;font:inherit}
.withdrawal-form button{padding:12px 20px}
.withdrawal-form button:disabled{opacity:.5;cursor:not-allowed}
.donation-jump-link{display:inline-flex;align-items:center;gap:8px;margin:4px 0 20px;padding:12px 18px;border-radius:12px;background:#eef1ec;font-size:14.5px;font-weight:650;transition:background .2s,transform .2s}
.donation-jump-link:hover{background:#e4e8e2;transform:translateY(-1px)}
.donation-options{border:0;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.donation-option{border:1px solid var(--line);padding:18px;border-radius:12px;display:grid;gap:16px}
.donation-option:has(input:checked){border-color:#a44e2c;background:#fae8d8}
.donation-option label{display:flex;gap:8px;align-items:center;font-weight:600;cursor:pointer}
.donation-option input{width:18px;height:18px;accent-color:#a44e2c}
.donation-option a{text-decoration:underline;text-underline-offset:4px;font-size:14px}
#donation-choice-save{height:48px;padding:0 24px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:650;transition:transform .2s,background .2s}
#donation-choice-save:hover{transform:translateY(-2px)}
#donation-choice-save:disabled{opacity:.55;transform:none;cursor:not-allowed}
#donation-choice-message,#donation-choice-totals{margin-top:12px}
@media(max-width:600px){.donation-options{grid-template-columns:1fr}.donation-jump-link{width:100%;justify-content:center}}

/* --- 6) 대시보드 프리미엄 리디자인 ----------------------------------- *
 * 참고 이미지(글래스 카드 · 은은한 구체 · 도트 텍스처의 웜톤 SaaS)를
 * `.dash` 영역에만 적용합니다. id·class는 그대로 두고 시각만 바꿉니다.
 * `.card` 처럼 소개·관리자 페이지와 공유하는 클래스는 항상 `.dash` 를
 * 앞에 붙여 다른 화면에는 영향이 가지 않게 합니다.
 * ------------------------------------------------------------------ */

.dash{position:relative;isolation:isolate}

/* 배경 장식 : 참고 이미지의 은은한 구체 + 도트 텍스처, 상단에만 */
.dash-ambient{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.dash-orb{position:absolute;border-radius:50%}
.dash-orb--1{width:380px;height:380px;top:-170px;right:-110px;background:radial-gradient(circle at 32% 28%,#fff 0%,#fbd9bd 40%,#f4b08d 66%,rgba(244,176,141,0) 80%);opacity:.55}
.dash-orb--2{width:250px;height:250px;top:110px;left:-110px;background:radial-gradient(circle at 35% 30%,#fff 0%,#f7e3d2 45%,rgba(234,201,168,0) 78%);opacity:.45}
.dash-ambient:after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(36,51,55,.055) 1px,transparent 1.6px);background-size:18px 18px;-webkit-mask-image:linear-gradient(180deg,#000,#000 320px,transparent 600px);mask-image:linear-gradient(180deg,#000,#000 320px,transparent 600px)}
@media(max-width:767px){.dash-orb--1{width:220px;height:220px;top:-100px;right:-80px}.dash-orb--2{display:none}}

/* 카드 : 유리 질감 + 부드러운 그림자로 참고 이미지의 프리미엄 톤을 살립니다 */
.dash .card{position:relative;margin-top:32px;padding:32px 34px;border:1px solid rgba(221,222,218,.75);border-radius:26px;background:linear-gradient(184deg,rgba(255,253,250,.95),rgba(255,253,250,.86));box-shadow:0 30px 55px -35px rgba(36,51,55,.18),0 2px 10px rgba(36,51,55,.04);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden}
.dash .card:before{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
.dash .dash-summary>.card{margin-top:0}
.dash .card>h2{display:flex;align-items:center;gap:9px;font-size:14.5px}
.dash .card>h2:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--apricot);flex-shrink:0}
.dash .card.donation-impact{background:linear-gradient(174deg,rgba(253,238,225,.96),rgba(248,220,196,.9));border-color:rgba(236,199,169,.8)}
.dash .card.donation-impact>h2:before{background:#a44e2c}

/* 큰 숫자 : 지원 브라우저에서만 그라디언트를 입혀 스켈레톤과 자연스럽게 어울리게 */
.dash .dash-balance strong,.dash .donation-amount{color:var(--ink)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .dash .dash-balance strong,.dash .donation-amount{background:linear-gradient(120deg,#a44e2c 8%,#d97a46 55%,#f4b08d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}

/* 진행 미터 */
.dash .dash-meter-track{background:rgba(36,51,55,.08)}
.dash .dash-meter-fill{background:linear-gradient(90deg,#f4b08d,#e8935f)}

/* 안내문 그룹 : 흩어진 잔글씨를 하나의 상자로 묶어 훑어보기 쉽게 합니다 */
.dash-notes{margin-top:22px;padding:16px 18px;border-radius:16px;background:rgba(36,51,55,.035);border:1px solid rgba(221,222,218,.6)}
.dash-notes .dash-note{margin-top:10px;font-size:13.5px}
.dash-notes .dash-note:first-child{margin-top:0}

/* 중요 고지 : 오인 방지가 필요한 문구는 amber 상자로 무게를 더 둡니다.
 * (기존 감사 메모의 "같은 시각적 비중" 원칙을 대시보드 전반으로 확장) */
.dash-notice{margin-top:22px;padding:16px 18px;border-radius:16px;background:linear-gradient(174deg,#fdeee1,#fae0c8);border:1px solid #ecc7a9}
.dash-notice .dash-note{margin-top:10px;font-size:14px;line-height:1.7;color:#6b4a30}
.dash-notice .dash-note:first-child{margin-top:0}

/* 상태·안내 텍스트 : 뮤트 톤 대신 본문 색으로 눈에 잘 들어오게 */
.dash-status{margin-top:14px;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.6;word-break:keep-all}
.dash-note.dash-callout{color:var(--ink);font-weight:600;font-size:14.5px}
.dash-note.dash-lede{color:var(--ink);font-size:15px;font-weight:600;line-height:1.7}
.dash-note.dash-stats{margin-top:14px;padding:12px 15px;border-radius:12px;background:#f6f2ec;font-size:13.5px;font-weight:650;color:var(--ink)}

/* 출금 내역 목록 : JS가 만든 .dash-note 줄글을 카드형 행으로 */
.dash-withdrawal-list{display:flex;flex-direction:column;gap:10px}
.dash-withdrawal-list:not(:empty){margin-top:18px}
.dash-withdrawal-list .dash-note{margin-top:0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);font-size:13.5px}

/* 출금 폼 : 널찍하고 명확하게 */
.dash .withdrawal-form{gap:16px 18px;margin:22px 0}
.dash .withdrawal-form label{font-size:13.5px;font-weight:650;color:var(--ink)}
.dash .withdrawal-form input{height:50px;padding:0 15px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:15px;transition:border-color .2s,box-shadow .2s}
.dash .withdrawal-form input:focus{outline:0;border-color:var(--apricot);box-shadow:0 0 0 3px #f4b08d55}
.dash .withdrawal-form button{height:50px;border-radius:12px;background:var(--ink);color:var(--paper);font-weight:650;transition:transform .2s,background .2s}
.dash .withdrawal-form button:hover:not(:disabled){transform:translateY(-2px)}
.dash .donation-jump-link{border-radius:14px}
.dash .donation-options{gap:14px}
.dash .donation-option{border-radius:16px;padding:20px;transition:border-color .2s,background .2s,transform .2s}
.dash .donation-option:hover{transform:translateY(-2px)}

/* 관심 키워드 칩 */
.dash .dash-chip{border-radius:16px;background:rgba(255,253,250,.9)}
.dash .dash-chip-text:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--apricot);margin-right:9px;vertical-align:middle}

/* 적립 내역 표 */
.dash .dash-table-wrap{border:1px solid rgba(221,222,218,.7);border-radius:16px;overflow:hidden}
.dash .dash-table{font-size:14.5px}
.dash .dash-table th{padding:14px 14px 14px 16px;background:rgba(36,51,55,.035)}
.dash .dash-table td{padding:14px 14px 14px 16px;border-top:1px solid rgba(221,222,218,.6)}
.dash .dash-table th:first-child,.dash .dash-table td:first-child{padding-left:16px}
.dash .dash-table tbody tr:nth-child(even) td{background:rgba(36,51,55,.02)}

@media(max-width:767px){
  .dash .card{padding:24px 20px;border-radius:20px}
  .dash .card>h2{font-size:14px}
  .dash-notes,.dash-notice{padding:14px 16px}
  .dash .dash-table th,.dash .dash-table td{padding:11px 10px}
}

/* KS X 1001 Hangul (2,350 syllables) + ASCII: headline edits stay in the handwriting font at 0.65MB instead of 3.6MB. */
@font-face{font-family:'Griun Dujun';src:url('/fonts/GriunDujun-common.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
.hero h1{font-family:'Griun Dujun','Pickly Sans','Malgun Gothic',sans-serif;font-weight:400;letter-spacing:-.03em}
.hero-phrase,.hero-ending{font-weight:inherit}

/* Account balances can contain more digits than the introductory reward amount. */
.reward-half>strong { font-size:clamp(18px, calc(8vw * var(--reward-scale, 1)), calc(112px * var(--reward-scale, 1))); }
@media(max-width:767px) { .reward-half>strong { font-size:calc(70px * var(--reward-scale, 1)); } }
/* Shared rows keep labels, amounts and captions aligned across both balances. */
.reward-split { grid-template-rows:auto auto auto; column-gap:0; }
.reward-half { display:grid; grid-template-rows:subgrid; grid-row:1 / 4; align-items:start; }
.reward-half:first-child { grid-column:1; }
.reward-half.donation { grid-column:2; }
.reward-half>strong { align-self:baseline; white-space:nowrap; font-variant-numeric:tabular-nums; }
.reward-half>.reward-caption { align-self:start; }
.policy .card p,.policy .card li{font-size:14.5px;line-height:1.8;color:#4d5856;word-break:keep-all}
.policy .card p+p,.policy .card p+ul,.policy .card ul+p,.policy .card .policy-table+p{margin-top:12px}
.policy-table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.65;color:#4d5856}
.policy-table th,.policy-table td{padding:10px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:top;word-break:keep-all}
.policy-table th{font-weight:650;color:var(--ink);background:#f6f4ef}
.policy-scroll{overflow-x:auto;margin-top:4px}
.policy-table-wide{min-width:560px}