.member-shell { width: min(100%, var(--content-width)); min-height: 100vh; margin: 0 auto; background: var(--color-bg); box-shadow: var(--shadow); }
.member-header { min-height: 66px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.brand { color: var(--color-brand); font-size: 20px; font-weight: 800; }
.brand.clickable { cursor: pointer; }
.wallet-short { color: var(--color-muted); font-size: 13px; }
.member-main { min-height: calc(100vh - 132px); padding: 14px 14px 92px; display: grid; align-content: start; gap: 12px; }
.hero-balance { padding: 20px; border-radius: 18px; background: var(--color-brand); color: #fff; }
.hero-label { opacity: .78; }
.hero-value { margin: 5px 0 2px; font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.wallet-summary { padding: 18px; border-radius: 18px; background: linear-gradient(145deg, var(--color-brand), var(--color-brand-dark)); color: #fff; }
.wallet-title { margin: 0; font-size: 18px; }
.wallet-assets { display: grid; gap: 2px; margin: 14px 0; border-radius: 12px; overflow: hidden; }
.wallet-assets > div { display: grid; grid-template-columns: 74px 1fr; align-items: center; padding: 11px 12px; background: rgba(255,255,255,.1); }
.wallet-assets span { opacity: .76; font-size: 13px; }
.wallet-assets strong { text-align: right; font-size: 19px; }
.wallet-address-line { display: grid; gap: 4px; padding-top: 4px; word-break: break-all; font-size: 12px; opacity: .84; }
.wallet-held { margin-top: 9px; text-align: right; font-size: 12px; opacity: .88; }
.balance-strip { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 16px; border-radius: 14px; background: var(--color-brand); color: #fff; }
.balance-strip strong { font-size: 20px; }
.balance-strip small { grid-column: 1 / -1; opacity: .78; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-actions.three { grid-template-columns: 1fr 1fr; }
.quick-actions.three a:last-child { grid-column: 1 / -1; }
.asset-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; border-radius: 14px; background: var(--color-surface-soft); }
.asset-tabs a { min-height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--color-muted); font-weight: 800; }
.asset-tabs a.active { background: var(--color-brand); color: #fff; box-shadow: var(--shadow); }
.referral-note.reward { border-left-color: var(--color-brand); background: var(--color-brand-soft); }
.referral-note.no-reward { border-left-color: var(--color-muted); }
.history-item { display: grid; gap: 5px; padding: 13px 0; border-bottom: 1px solid var(--color-line); word-break: break-all; }
.history-item:last-child { border-bottom: 0; }
.quote-box { padding: 14px; display: grid; gap: 8px; border-radius: 12px; background: var(--color-surface-soft); }
.bottom-nav { position: fixed; left: 50%; bottom: 0; z-index: 10; width: min(100%, var(--content-width)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 1fr); background: var(--color-surface); border-top: 1px solid var(--color-line); }
.bottom-nav a { min-height: 66px; display: grid; place-content: center; gap: 2px; color: var(--color-muted); font-size: 11px; text-align: center; }
.bottom-nav a.active { color: var(--color-brand); font-weight: 700; }
.bottom-nav svg { width: 19px; height: 19px; margin: 0 auto; }
.screen-title { margin: 2px 0 4px; font-size: 22px; }
.wallet-box { word-break: break-all; }
.confirm-dialog .detail-line { padding: 8px 0; }
.connect-hero { padding: 34px 20px; text-align: center; }
.connect-mark { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 22px; background: var(--color-brand-soft); color: var(--color-brand); font-size: 34px; font-weight: 800; }
.connect-hero h1 { margin: 0 0 8px; font-size: 26px; }
.connect-hero p { margin: 0 0 22px; color: var(--color-muted); }
.progress-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.progress-step { height: 5px; border-radius: 99px; background: var(--color-line); }
.progress-step.active { background: var(--color-brand); }
@media (min-width: 431px) { .member-shell { margin-top: 22px; margin-bottom: 22px; min-height: calc(100vh - 44px); border-radius: 24px; overflow: hidden; } }

/* ===== HUGITO ECO MEMBER THEME ===== */
.member-shell { position:relative; background:linear-gradient(180deg,#edf8f2 0,#f7faf8 240px,#f2f6f4 100%); }
.member-shell::before { content:""; position:absolute; inset:0 0 auto; height:180px; pointer-events:none; opacity:.13; background:url('../img/connect-bg.png') center 18%/cover no-repeat; -webkit-mask-image:linear-gradient(#000,transparent); mask-image:linear-gradient(#000,transparent); }
.member-header { position:relative; z-index:2; min-height:72px; padding:17px 18px; border-bottom:0; background:rgba(255,255,255,.93); backdrop-filter:blur(12px); }
.member-header::after { content:""; position:absolute; left:18px; right:18px; bottom:0; height:1px; background:linear-gradient(90deg,transparent,#cde5d5,transparent); }
.brand { font-size:0; display:flex; align-items:center; gap:7px; }
.brand::before { content:"♻"; display:grid; place-items:center; width:34px; height:34px; border-radius:12px; color:#fff; font-size:20px; background:linear-gradient(145deg,#0aa35b,#087a57); box-shadow:0 6px 15px rgba(8,122,87,.22); }
.brand::after { content:"HUGITO"; font-size:17px; letter-spacing:.7px; color:var(--color-brand-dark); font-weight:900; }
.member-main { position:relative; z-index:1; gap:14px; padding:16px 14px 96px; }
.wallet-summary,.hero-balance,.balance-strip { position:relative; overflow:hidden; background:linear-gradient(145deg,#087a57 0%,#075f47 68%,#0a6c4b 100%); box-shadow:0 14px 30px rgba(7,95,71,.18); }
.wallet-summary::after,.hero-balance::after,.balance-strip::after { content:""; position:absolute; width:150px; height:150px; right:-55px; bottom:-80px; border-radius:50%; background:radial-gradient(circle,rgba(125,221,97,.32),rgba(125,221,97,0) 68%); pointer-events:none; }
.wallet-assets>div { background:rgba(255,255,255,.105); border-bottom:1px solid rgba(255,255,255,.08); }
.wallet-assets>div:last-child { border-bottom:0; }
.wallet-assets strong { text-shadow:0 1px 2px rgba(0,0,0,.12); }
.surface,.quote-box { border-color:#dce9e0; border-radius:20px; background:rgba(255,255,255,.96); }
.quote-box { box-shadow:0 8px 24px rgba(18,85,58,.05); }
.quick-actions { gap:11px; }
.quick-actions .button-primary { min-height:54px; }
.asset-tabs { padding:5px; border:1px solid #e1ece5; border-radius:18px; background:rgba(255,255,255,.78); box-shadow:0 7px 20px rgba(18,85,58,.04); }
.asset-tabs a { min-height:48px; border-radius:14px; }
.asset-tabs a.active { background:linear-gradient(135deg,#087a57,#11a35b); box-shadow:0 7px 16px rgba(8,122,87,.20); }
.bottom-nav { border-top:1px solid #dfeae3; background:rgba(255,255,255,.96); backdrop-filter:blur(14px); box-shadow:0 -7px 22px rgba(18,85,58,.055); }
.bottom-nav a { min-height:70px; transition:.18s ease; }
.bottom-nav a span { font-size:17px; line-height:18px; }
.bottom-nav a.active { color:#087a57; font-weight:800; }
.bottom-nav a.active span { transform:translateY(-1px); }

.hugito-mini-hero { position:relative; min-height:170px; overflow:hidden; border-radius:22px; background:#dff4e8 url('../img/connect-bg.png') center 54%/cover no-repeat; box-shadow:0 12px 28px rgba(8,122,87,.13); }
.hugito-mini-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,67,48,.68),rgba(4,67,48,.12) 62%,rgba(4,67,48,0)); }
.hugito-mini-copy { position:absolute; z-index:2; left:18px; top:20px; width:55%; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.28); }
.hugito-mini-copy b { display:block; font-size:21px; line-height:1.18; margin-bottom:6px; }
.hugito-mini-copy span { font-size:12px; opacity:.94; }
.hugito-chip { display:inline-flex; margin-top:12px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.9); color:#087a57; font-size:11px; font-weight:800; text-shadow:none; }
.eco-section-title { display:flex; align-items:center; gap:7px; }
.eco-section-title::before { content:"●"; color:#64c44c; font-size:10px; }
.profile-identity { position:relative; overflow:hidden; padding-top:110px !important; }
.profile-identity::before { content:""; position:absolute; left:0; right:0; top:0; height:70px; background:url('../img/connect-bg.png') center 47%/cover no-repeat; }
.profile-identity::after { content:"♻"; position:absolute; left:18px; top:46px; display:grid; place-items:center; width:58px; height:58px; border:4px solid #fff; border-radius:50%; background:linear-gradient(145deg,#0aa35b,#087a57); color:#fff; font-size:28px; box-shadow:0 7px 16px rgba(8,122,87,.18); }
.profile-menu .button { justify-content:space-between; padding-left:18px; background:#fff; }
.profile-menu .button::after { content:"›"; color:#7d998b; font-size:22px; }
.history-surface { overflow:hidden; }
.history-surface::before { content:"Waste to Value, Again"; display:block; margin:-16px -16px 12px; padding:11px 16px; color:#087a57; background:linear-gradient(90deg,#e7f7ed,#f7fcf8); font-size:11px; font-weight:800; letter-spacing:.3px; }
@media (max-width:370px){ .hugito-mini-hero{min-height:150px}.hugito-mini-copy b{font-size:18px} }
/* 회원 홈 상단 로그아웃(작은 버튼, 모바일 한 줄 유지) */
.header-actions { gap:8px; min-width:0; }
.header-actions .wallet-short { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.header-logout { flex:none; padding:6px 11px; border:1px solid #cde5d5; border-radius:999px; background:#fff; color:var(--color-brand); font-size:12px; font-weight:700; line-height:1.2; cursor:pointer; }
.header-logout:disabled { opacity:.55; cursor:default; }

/* 코드페이 출금: 간편주소(ID) 영역, 안내/확인 모달(모바일·배경 스크롤 잠금) */
html.modal-open, html.modal-open body { overflow:hidden; }
.codepay-current { display:grid; gap:6px; }
.codepay-readonly { background:#f4f8f5; color:var(--color-text); font-weight:700; cursor:default; }
.codepay-readonly:focus { outline:2px solid #9fd0b6; outline-offset:1px; }
.codepay-id-display { margin:0; padding:10px 12px; border-radius:10px; background:#f4f8f5; font-size:18px; font-weight:800; letter-spacing:.02em; word-break:break-all; overflow-wrap:anywhere; user-select:all; }
.confirm-dialog .detail-line .codepay-id-display { display:block; font-size:16px; }
.confirm-dialog { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
.codepay-notice-body p { margin:0; line-height:1.6; word-break:keep-all; overflow-wrap:anywhere; }
.confirm-dialog .button:focus-visible, .codepay-block .button:focus-visible { outline:3px solid #0b7a57; outline-offset:2px; }
@media (max-width:360px) { .confirm-dialog { padding:16px; } .confirm-dialog .dialog-actions { grid-template-columns:1fr; } }
.bottom-nav a { word-break:keep-all; line-height:1.15; padding:0 2px; }
.confirm-dialog .detail-line { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.confirm-dialog .detail-line > small { flex:none; color:var(--color-muted); }
.confirm-dialog .detail-line > strong, .confirm-dialog .detail-line > span { text-align:right; min-width:0; overflow-wrap:anywhere; }
.confirm-dialog .detail-line.detail-line-block { display:block; }
.confirm-dialog .detail-line.detail-line-block > small { display:block; margin-bottom:6px; }
.confirm-dialog .detail-line.detail-line-block > .codepay-id-display { text-align:left; }

/* 코드페이 설치하기: 버튼 + 선택창(안드로이드/아이폰 공식 스토어 링크, 추천인 코드 안내) */
.codepay-install-open { border-style:dashed; }
.codepay-install p { margin:0; line-height:1.6; }
.codepay-install-links .button { min-height:48px; display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; white-space:normal; }
.codepay-referral { display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center; padding:12px 14px; border:2px solid #0b7a57; border-radius:12px; background:#eefaf4; }
.codepay-referral-text { grid-column:1 / 2; color:var(--color-text); font-weight:600; word-break:keep-all; overflow-wrap:anywhere; }
.codepay-referral-code { display:inline-block; padding:0 6px; border-radius:6px; background:#fff; color:#0b7a57; font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-size:1.15em; letter-spacing:.04em; text-transform:none; }
.codepay-referral-copy { min-height:44px; padding:0 14px; white-space:nowrap; }
.codepay-referral-status { grid-column:1 / -1; font-size:13px; }
.codepay-referral-status:empty { display:none; }
.codepay-referral-status.is-ok { color:#0b7a57; font-weight:700; }
.codepay-referral-status.is-error { color:var(--color-danger); }
@media (max-width:360px) { .codepay-referral { grid-template-columns:1fr; } .codepay-referral-copy { width:100%; } }