:root { --color-fg:#171717; --ink:var(--color-fg); --muted:#929292; --line:#e9e9e7; --canvas:#fbfaf9; --surface:#fff; --yellow:#fee500; --font:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",Arial,sans-serif; }
* { box-sizing:border-box; } html { background:#f4f4f2; } body { min-width:320px; margin:0; color:var(--ink); background:var(--surface); font-family:var(--font); letter-spacing:-.045em; } button,a { color:inherit; font:inherit; } button { cursor:pointer; } a { text-decoration:none; } img { display:block; max-width:100%; } :focus-visible { outline:3px solid #1677ff; outline-offset:3px; }
.app-shell { min-height:100dvh; } .review-nav { display:flex; gap:8px; overflow-x:auto; padding:10px 16px; border-bottom:1px solid var(--line); background:#fff; } .review-nav a { flex:none; padding:7px 11px; border-radius:999px; color:#6c6c6c; font-size:13px; } .review-nav a[aria-current="page"] { color:#fff; background:#222; } .mobile-canvas { width:100%; max-width:393px; min-height:calc(100dvh - 45px); margin:auto; overflow:hidden; background:var(--canvas); }
.ui-icon { display:inline-block; width:18px; height:18px; object-fit:contain; vertical-align:middle; } .ui-icon--inverse { filter:invert(1); } .ui-icon--heart { width:14px; height:14px; margin-right:2px; } .ui-icon--info { width:14px; height:14px; margin-right:5px; } .ui-icon--kakao { width:22px; height:22px; margin-right:11px; } .ui-icon--kakao-note { width:16px; height:16px; margin-right:6px; }
.page,.onboarding { min-height:inherit; padding:20px 27px 36px; } .page h1,.onboarding h1 { margin:0; font-size:27px; line-height:1.33; font-weight:750; } .page h2 { margin:0; font-size:18px; } .topbar { display:flex; align-items:center; justify-content:space-between; min-height:52px; margin-bottom:33px; } .wordmark,.onboarding__brand span,.landing__logo { font-size:22px; font-weight:750; letter-spacing:.35em; } .topbar__actions { display:flex; align-items:center; gap:15px; } .icon-button { display:grid; width:25px; height:25px; place-items:center; padding:0; border:0; background:transparent; } .profile-button { display:grid; width:25px; height:25px; place-items:center; padding:0; border:0; border-radius:50%; color:#fff; background:#222; font-size:12px; } .eyebrow,.hello { margin:0 0 8px; color:var(--muted); font-size:14px; } .hello { margin-top:-5px; } .home h1 { margin-bottom:27px; }
.featured { position:relative; overflow:hidden; border-radius:14px; } .featured>img { width:100%; height:225px; object-fit:cover; } .featured__body { padding:17px 20px 22px; } .featured__body>div:first-child { display:flex; justify-content:space-between; align-items:center; } .featured small { font-size:14px; } .featured b { padding:5px 9px; border:1px solid currentColor; border-radius:999px; font-size:11px; font-weight:500; } .featured h2 { margin:8px 0 5px; font-size:22px; } .featured p { margin:0; font-size:14px; } .featured__button { display:flex; min-height:54px; align-items:center; justify-content:center; margin-top:19px; border-radius:12px; font-weight:650; } .featured--light { background:#eadcc7; } .featured--light .featured__button { color:#fff; background:#222; }
.chips { display:flex; gap:9px; overflow-x:auto; margin:26px -27px 31px; padding:0 27px; scrollbar-width:none; } .chip,.tab { flex:none; min-height:37px; padding:0 17px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:14px; } .chip--active,.tab--active { border-color:#222; color:#fff; background:#222; } .section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; } .section-heading h2 { font-size:17px; } .section-heading span { color:var(--muted); font-size:14px; } .notify-list ul,.product-grid,.alert-cards,.stats,.menu-card { margin:0; padding:0; list-style:none; }
.compact-product { display:grid; grid-template-columns:79px 1fr 35px; gap:18px; align-items:center; min-height:92px; border-bottom:1px solid var(--line); } .compact-product__image { width:79px; height:63px; border-radius:3px; object-fit:cover; } .compact-product small,.compact-product span,.product-card small,.product-card span,.alert-cards small,.alert-cards span,.profile p,.menu-card small { display:block; color:var(--muted); font-size:14px; line-height:1.65; } .compact-product strong,.product-card strong,.alert-cards strong,.menu-card strong { display:block; font-size:16px; } .quiet-button { display:grid; width:30px; height:30px; place-items:center; border:1px solid var(--line); border-radius:8px; background:#fff; color:#aaa; }
.onboarding { display:flex; flex-direction:column; background:#fdfcfa; } .landing { align-items:center; text-align:center; } .landing__logo { margin-top:9px; letter-spacing:.37em; } .landing__logo small { display:block; margin-top:5px; color:#999; font-size:8px; font-weight:500; letter-spacing:.32em; } .landing__image { width:250px; height:253px; margin:11px auto; object-fit:contain; } .landing h1 { align-self:stretch; text-align:left; } .landing>p { align-self:stretch; margin:25px 0 0; color:#666; font-size:16px; line-height:1.6; text-align:left; } .landing__offer { margin-top:auto; padding:8px 14px; border-radius:4px; color:#fff; background:#414141; font-size:12px; } .kakao-button,.primary-button { display:flex; width:100%; min-height:54px; align-items:center; justify-content:center; border-radius:12px; font-size:16px; font-weight:750; } .kakao-button { margin-top:5px; background:var(--yellow); } .login-link { margin:15px 0 0; color:#aaa; font-size:13px; }
.onboarding__brand { display:flex; align-items:center; justify-content:space-between; margin:31px 0 23px; } .onboarding__brand small { color:#999; font-size:14px; } .interests h1 { margin-bottom:22px; } .interests>p:not(.field-note):not(.onboarding__footnote) { margin:0 0 26px; color:#555; font-size:14px; line-height:1.65; } .interest-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .interest { display:flex; height:148px; flex-direction:column; align-items:center; justify-content:center; gap:13px; border:1px solid #d6d6d4; border-radius:12px; background:transparent; font-weight:650; } .interest--selected { border:2px solid #222; } .interest img { width:70px; height:69px; object-fit:contain; } .field-note { margin:27px 0; color:#aaa; font-size:13px; text-align:center; } .primary-button { color:#fff; background:#222; } .onboarding__footnote { margin:16px 0 0; color:#aaa; font-size:13px; text-align:center; }
.category h1 { margin-bottom:27px; } .category .chips { margin-top:0; margin-bottom:33px; } .product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:27px 11px; } .product-card { position:relative; } .product-card__image { width:100%; aspect-ratio:1; border-radius:13px; object-fit:cover; } .product-card__bell { position:absolute; top:10px; right:10px; display:grid; width:29px; height:29px; place-items:center; border:1px solid #ddd; border-radius:50%; background:#fff7; } .product-card__bell--on { border-color:#ed3131; background:#ed3131; } .product-card small { margin-top:9px; } .product-card strong { margin-top:1px; } .more-button { display:block; margin:26px auto 0; border:0; background:transparent; font-size:15px; }
.tabs { display:flex; gap:9px; margin:26px 0 24px; } .tab { padding:0 16px; } .featured--dark { color:#fff; background:#171717; } .featured--dark>img { position:absolute; right:0; width:68%; height:100%; opacity:.94; } .featured--dark .featured__body { position:relative; min-height:253px; padding-top:30px; background:linear-gradient(90deg,#151515 35%,transparent); } .featured--dark small { color:#ffdf45; } .featured--dark h2 { margin-top:10px; } .countdown { display:flex; gap:8px; align-items:center; margin-top:15px; } .countdown b { min-width:28px; padding:3px 4px; border:0; border-radius:0; background:#444; font-size:18px; text-align:center; } .countdown i { font-style:normal; font-size:20px; } .featured__actions { display:flex; gap:10px; margin-top:17px; } .featured__actions a,.featured__actions button { display:grid; height:54px; flex:1; place-items:center; border:1px solid #555; border-radius:12px; background:#050505; color:#fff; font-size:15px; } .featured__actions a { color:#222; border-color:#fff; background:#fff; }
.alert-cards { display:grid; gap:15px; margin-top:25px; } .alert-cards li { display:grid; grid-template-columns:58px 1fr auto; gap:18px; align-items:center; padding:23px 19px; border:1px solid var(--line); border-radius:13px; background:#fff; } .alert-cards__image { width:58px; height:58px; object-fit:cover; } .alert-cards li>button { padding:9px 13px; border:0; border-radius:7px; color:#999; background:#f4f3f0; font-size:12px; } .alert-cards em { color:#e63636; font-style:normal; font-weight:700; } .kakao-note { display:flex; align-items:center; margin:19px 0 0; color:#555; font-size:13px; white-space:nowrap; } .kakao-note span { color:#999; }
.mypage .topbar { margin-bottom:30px; } .profile { display:flex; gap:15px; align-items:center; } .avatar { display:grid; width:58px; height:58px; place-items:center; border-radius:50%; color:#fff; background:#222; font-size:24px; } .profile h1 { font-size:22px; } .profile h1 small { margin-left:8px; padding:5px 9px; color:#999; background:#f0f0ee; font-size:11px; font-weight:500; } .profile p { margin:3px 0 0; } .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:27px; } .stats li { min-height:78px; padding:14px 19px; border:1px solid #e0e0dd; border-radius:12px; background:#fff; } .stats small,.stats strong { display:block; } .stats small { color:#999; font-size:12px; white-space:nowrap; } .stats strong { margin-top:4px; font-size:18px; } .menu-section { margin-top:33px; } .menu-section h2 { margin-bottom:17px; font-size:16px; } .menu-card { overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#fff; } .menu-card li { display:grid; grid-template-columns:48px 1fr auto; gap:18px; align-items:center; min-height:86px; padding:12px 19px; } .menu-card li+li { border-top:1px solid var(--line); } .menu-card li>span { display:grid; width:47px; height:47px; place-items:center; border-radius:2px; background:#f4f4f4; } .menu-card li>b { font-size:26px; font-weight:400; } .version { margin:23px 0 0; color:#999; font-size:12px; text-align:center; }
.detail-page,.checkout-page { min-height:inherit; padding:0 27px 30px; background:#fdfcfb; } .detail-topbar,.checkout-topbar { display:grid; grid-template-columns:28px 1fr 28px; height:104px; align-items:end; padding:0 0 20px; background:#fff; text-align:center; } .detail-topbar { margin:0 -27px; padding:0 27px 20px; } .detail-topbar strong { font-size:17px; letter-spacing:.25em; } .checkout-topbar strong { font-size:18px; } .checkout-topbar span { color:#999; font-size:16px; text-align:right; } .detail-topbar a,.checkout-topbar a { display:grid; width:24px; height:24px; place-items:center; } .detail-topbar .ui-icon,.checkout-topbar .ui-icon { width:18px; height:18px; } .detail-hero { position:relative; margin:0 -27px; } .detail-hero>img { width:100%; height:262px; object-fit:cover; } .status-badge { position:absolute; z-index:1; top:11px; left:10px; padding:7px 10px; border-radius:2px; color:#fff; background:#20201f; font-size:12px; font-weight:700; letter-spacing:.04em; } .status-badge--live { background:#ec2528; } .status-badge--featured { background:#18c9a2; } .deal-title { padding-top:35px; } .category-pill { display:inline-block; padding:9px 16px; border-radius:999px; background:#f2f2f1; font-size:14px; } .deal-title h1 { margin:20px 0 11px; font-size:23px; line-height:1.25; } .deal-title p { margin:0; color:#999; font-size:14px; line-height:1.65; } .deal-title .deal-title__description { color:#666; } .opening-card { margin-top:26px; padding:21px 19px; border:1px solid #ebebe8; border-radius:14px; background:#fff; } .opening-card>div:first-child { display:flex; justify-content:space-between; align-items:center; font-size:13px; letter-spacing:.18em; } .opening-card>div:first-child span { display:flex; gap:8px; align-items:center; } .opening-card>div:first-child .ui-icon { width:16px; height:16px; } .opening-card>div:first-child strong { border-bottom:1px solid #222; font-size:13px; letter-spacing:-.04em; } .timer { display:grid; grid-template-columns:1fr 12px 1fr 12px 1fr; align-items:center; gap:6px; margin-top:20px; text-align:center; } .timer b { display:block; padding:11px 0 8px; border-radius:2px; color:#e53535; background:#f2f2f0; font-size:27px; letter-spacing:.14em; } .timer b small { display:block; margin-top:7px; color:#666; font-size:11px; font-weight:400; letter-spacing:0; } .timer i { color:#aaa; font-size:23px; font-style:normal; } .deal-rows { margin:22px 0 0; padding:0; list-style:none; } .deal-rows li { display:grid; grid-template-columns:21px 1fr auto; min-height:42px; align-items:center; border-bottom:1px solid #eee; font-size:14px; } .deal-row__icon { width:16px; height:16px; } .deal-rows strong { font-size:14px; font-weight:500; } .deal-rows .accent,.accent { color:#286cff; } .bubble-note { position:relative; width:max-content; max-width:100%; margin:21px auto 8px; padding:8px 14px; border:1px solid #e5dfd7; border-radius:6px; background:#fff; color:#555; font-size:12px; text-align:center; } .bubble-note::after { position:absolute; bottom:-6px; left:50%; width:10px; height:10px; border-right:1px solid #e5dfd7; border-bottom:1px solid #e5dfd7; background:#fff; content:""; transform:translateX(-50%) rotate(45deg); } .bottom-button,.outline-button { display:flex; width:100%; height:54px; align-items:center; justify-content:center; border-radius:11px; font-size:16px; font-weight:700; } .bottom-button { color:#fff; background:#20201f; } .detail-note { display:flex; justify-content:center; align-items:center; margin:16px 0 0; color:#aaa; font-size:13px; } .detail-note .ui-icon { width:16px; height:16px; margin-right:5px; opacity:.6; }
.deal-rows--compact { margin-top:23px; } .deal-rows--compact li { min-height:39px; } .struck { color:#aaa; text-decoration:line-through; } .under-price { display:flex; justify-content:space-between; align-items:start; margin-top:5px; padding:20px; border:1px solid #e8e8e5; border-radius:13px; background:#f7f7f6; } .under-price span,.last-price span,.restock-card>span { display:flex; gap:7px; align-items:center; color:#777; font-size:12px; letter-spacing:.18em; } .under-price span .ui-icon { width:16px; height:16px; } .under-price b { display:block; margin-top:15px; font-size:28px; } .under-price em,.last-price em { padding:8px 12px; border-radius:6px; color:#ee3333; background:#ffe7e7; font-size:13px; font-style:normal; font-weight:700; } .sold-summary { display:flex; align-items:center; gap:4px; margin:17px 0 22px; font-size:14px; } .sold-summary .ui-icon { width:18px; height:18px; } .sold-summary b,.restock-card b { color:#286cff; } .last-price { padding:17px 20px 14px; border-top:1px solid #eee; border-bottom:1px solid #eee; } .last-price>div { display:flex; justify-content:space-between; } .last-price>b { display:block; margin-top:12px; font-size:28px; } .restock-card { margin-top:10px; padding:20px; border-radius:13px; background:#f4f3ef; } .restock-card>span .ui-icon { width:16px; height:16px; } .restock-card strong { display:block; margin-top:14px; font-size:15px; } .restock-card p { margin:12px 0 0; color:#555; font-size:13px; }
.checkout-page { padding-bottom:50px; } .checkout-section { margin-top:32px; } .checkout-section h1,.checkout-section h2 { margin:0 0 16px; font-size:17px; } .order-card,.recipient-card,.payment-list,.total-card,.receipt { border:1px solid #e9e9e6; border-radius:13px; background:#fff; } .order-card { display:grid; grid-template-columns:80px 1fr; gap:25px; align-items:center; min-height:120px; padding:19px; } .order-card img { width:80px; height:80px; border-radius:3px; object-fit:cover; } .order-card small,.order-card span { display:block; color:#777; font-size:13px; } .order-card strong { display:block; margin:5px 0 17px; font-size:15px; } .order-card span { display:flex; justify-content:space-between; color:#777; } .order-card span b { color:#111; } .recipient-card { padding:25px 19px 18px; } .recipient-card button { float:right; padding:8px 14px; border:1px solid #e5e5e2; border-radius:4px; background:#fff; font-size:13px; } .recipient-card strong { font-size:16px; } .recipient-card p { margin:11px 0 0; color:#666; font-size:14px; line-height:1.55; } .payment-list { overflow:hidden; padding:0 20px; } .payment-list label { display:flex; min-height:47px; align-items:center; gap:20px; border-bottom:1px solid #eee; font-size:14px; } .payment-list label:last-child { border:0; } .payment-list input { width:16px; height:16px; margin:0; accent-color:#111; } .total-card { margin:0; padding:13px 19px; } .total-card div { display:flex; justify-content:space-between; min-height:32px; align-items:center; color:#555; font-size:14px; } .total-card dd { margin:0; color:#111; } .total-card__final { margin-top:5px; padding-top:13px; border-top:1px solid #eee; } .total-card__final dd { font-size:19px; font-weight:750; } .checkout-page>.bottom-button { margin-top:21px; }
.checkout-complete { text-align:center; } .checkout-complete .checkout-topbar { text-align:center; } .confirmed-icon { width:79px; height:79px; margin:36px auto 17px; } .confirmed-label { margin:0; font-size:12px; letter-spacing:.46em; } .checkout-complete h1 { margin:20px 0 13px; font-size:27px; } .confirmed-copy { margin:0; color:#777; font-size:15px; } .receipt { margin-top:27px; padding:23px 19px 16px; text-align:left; } .receipt>p { margin:0; color:#999; font-size:13px; text-align:center; } .receipt>strong { display:block; margin:7px 0 10px; font-size:19px; text-align:center; } .receipt dl { margin:0; padding-top:10px; border-top:1px solid #eee; } .receipt dl div { display:flex; justify-content:space-between; min-height:31px; align-items:center; font-size:13px; } .receipt dt { color:#555; } .receipt dd { margin:0; } .alert-prompt { margin-top:25px; padding:22px 14px; border-radius:13px; background:#f4f3ef; font-size:14px; } .alert-prompt strong { display:block; } .alert-prompt p { margin:6px 0 0; color:#666; font-size:13px; } .checkout-complete .bottom-button { margin-top:20px; } .outline-button { margin-top:20px; border:1px solid #e5e5e2; background:#fff; }
.partner-page,.partner-login { min-height:inherit; padding:20px 27px 32px; background:#fcfbfa; } .partner-header { display:grid; grid-template-columns:1fr auto 1fr; min-height:52px; align-items:center; margin-bottom:36px; } .partner-header>strong { font-size:17px; text-align:center; } .partner-header>span,.partner-header>.icon-button { justify-self:end; } .partner-header>a:not(.partner-brand) { display:grid; width:24px; height:24px; place-items:center; } .partner-brand { font-size:20px; font-weight:750; letter-spacing:.3em; } .partner-brand small { margin-left:7px; color:#999; font-size:13px; letter-spacing:.12em; } .partner-handle { margin:0 0 7px; color:#999; font-size:16px; } .partner-page h1,.partner-login h1 { margin:0; font-size:25px; line-height:1.35; } .partner-section-title { margin:37px 0 18px; font-size:16px; } .partner-section-title small { color:#333; font-weight:400; } .partner-login { text-align:center; } .partner-login .partner-header { grid-template-columns:1fr; margin-bottom:37px; text-align:left; } .partner-confirm { width:79px; height:79px; margin:0 auto 16px; } .partner-login h1 { margin:21px 0 18px; } .partner-login>p:not(.confirmed-label):not(.partner-links) { margin:0; color:#666; font-size:15px; line-height:1.55; } .partner-form { margin-top:36px; text-align:left; } .partner-form label { display:block; margin-top:28px; font-size:14px; font-weight:650; } .partner-form label:first-child { margin-top:0; } .partner-form input { width:100%; height:44px; margin-top:11px; padding:0 19px; border:1px solid #e0e0dd; border-radius:12px; background:#fff; outline:0; font:inherit; font-size:13px; } .partner-form .bottom-button { margin-top:20px; } .partner-links { margin:20px 0 0; color:#999; font-size:13px; } .partner-notice { display:flex; gap:18px; align-items:center; margin-top:21px; padding:18px 38px; border-radius:13px; background:#f2f1ee; text-align:left; } .partner-notice .ui-icon { flex:none; width:22px; height:22px; } .partner-notice p { margin:0; color:#555; font-size:13px; line-height:1.55; } .partner-notice a { border-bottom:1px solid #333; color:#333; }
.roas-card { margin-top:27px; padding:31px 20px 25px; border-radius:15px; color:#fff; background:#20201f; } .roas-card>div:first-child,.report-total>div:first-child { display:flex; justify-content:space-between; font-size:14px; } .roas-card a { color:inherit; font-size:12px; } .roas-card>strong,.report-total>strong { display:inline-block; margin:16px 10px 10px 0; font-size:49px; line-height:1; letter-spacing:-.08em; } .roas-card>em,.report-total>em { display:inline-block; padding:5px 9px; border-radius:5px; color:#ff5858; background:#4b2222; font-size:13px; font-style:normal; font-weight:700; vertical-align:bottom; } .roas-card>small { display:block; margin-left:157px; color:#999; font-size:12px; } .roas-card hr { margin:29px 0 18px; border:0; border-top:1px solid #686866; } .roas-card dl,.report-total dl { display:grid; grid-template-columns:1fr 1fr; gap:25px; margin:0; } .roas-card dt,.roas-card dd,.report-total dt,.report-total dd { margin:0; } .roas-card dt,.report-total dt { color:inherit; font-size:13px; } .roas-card dd,.report-total dd { margin-top:5px; font-size:13px; font-weight:650; } .dashboard-stats,.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 0; padding:0; list-style:none; } .dashboard-stats li,.metric-grid li { min-height:132px; padding:23px 15px; border:1px solid #e9e9e6; border-radius:13px; background:#fff; } .dashboard-stats span,.metric-grid span { display:block; color:#555; font-size:13px; } .dashboard-stats strong,.metric-grid strong { display:block; margin-top:8px; color:#286cff; font-size:23px; } .dashboard-stats small,.metric-grid small { display:block; margin-top:3px; color:#555; font-size:12px; } .budget-card { display:grid; grid-template-columns:1fr auto; gap:4px 15px; align-items:center; margin-top:17px; padding:20px; border:1px solid #e9e9e6; border-radius:13px; background:#fff; } .budget-card span { color:#555; font-size:14px; } .budget-card strong { font-size:22px; } .budget-card a { grid-row:1 / 3; grid-column:2; padding:10px 14px; border-radius:4px; color:#fff; background:#222; font-size:13px; font-weight:650; } .quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .quick-actions a { min-height:120px; padding:68px 20px 15px; border:1px solid #e9e9e6; border-radius:13px; background:#fff; font-size:16px; font-weight:700; } .quick-actions small { display:block; margin-top:5px; color:#777; font-size:11px; font-weight:400; } .list-heading { display:flex; align-items:center; justify-content:space-between; margin-top:37px; } .list-heading h2 { margin:0; font-size:16px; } .list-heading>a { color:#999; font-size:13px; } .list-heading button { padding:8px 12px; border:1px solid #d7d7d4; border-radius:6px; background:#fff; font-size:12px; } .campaign-list,.performance-list { margin:17px 0 0; padding:0; list-style:none; } .campaign-list { display:grid; gap:10px; } .campaign-list li { display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; min-height:120px; padding:20px; border:1px solid #e9e9e6; border-radius:13px; background:#fff; } .campaign-list li>span { align-self:start; padding:5px 8px; border-radius:4px; color:#e33; background:#ffeded; font-size:12px; } .campaign-list li+li>span { color:#999; background:#f1f1ef; } .campaign-list strong { font-size:15px; } .campaign-list p { margin:7px 0 0; color:#555; font-size:13px; } .campaign-list b { color:#286cff; } .campaign-list em { padding:7px 10px; border-radius:4px; color:#286cff; background:#eef4ff; font-size:11px; font-style:normal; }
.budget-page .partner-header { margin-bottom:44px; } .budget-page section { margin-top:36px; } .budget-page section:first-of-type { margin-top:0; } .budget-page h1,.budget-page h2 { margin:0 0 15px; font-size:17px; } .balance { font-size:28px; text-decoration:underline; text-underline-offset:5px; } .amount-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; } .amount-grid button { height:71px; border:1px solid #d5d5d2; border-radius:12px; background:#fff; font-size:14px; } .amount-grid .selected { border-color:#222; color:#fff; background:#222; font-weight:650; } .payment-choice { display:flex; height:42px; align-items:center; gap:20px; border-bottom:1px solid #eee; font-size:14px; } .payment-choice input { width:16px; height:16px; margin:0; accent-color:#222; } .tax-note { margin:0; padding:12px; border-radius:13px; color:#777; background:#f3f2ee; font-size:13px; text-align:center; } .budget-total dl { margin:0; } .budget-total dl div { display:flex; justify-content:space-between; min-height:33px; align-items:center; font-size:14px; } .budget-total dt,.budget-total dd { margin:0; } .budget-total dl div:last-child { margin-top:9px; padding-top:13px; border-top:1px solid #e7e7e3; font-size:16px; font-weight:700; } .budget-page>.bottom-button { margin-top:19px; }
.application-complete { text-align:center; } .application-complete .checkout-topbar { margin:0 0 36px; } .application-complete h1 { margin:20px 0 13px; } .application-complete>p:not(.confirmed-label):not(.balance-alert) { margin:0; color:#666; line-height:1.5; } .application-card { margin-top:32px; padding:23px 20px 19px; border:1px solid #e9e9e6; border-radius:13px; background:#fff; text-align:left; } .application-card>p { margin:0 0 10px; color:#999; text-align:center; } .application-card dl { margin:0; padding:11px 0; border-top:1px solid #eee; } .application-card dl div,.product-total div { display:flex; justify-content:space-between; min-height:31px; align-items:center; font-size:13px; } .application-card dt,.application-card dd,.product-total dt,.product-total dd { margin:0; } .application-card dt,.product-total dt { color:#555; } .budget-after { padding:20px; border:1px solid #eeeae0; border-radius:12px; background:#fbfbf7; } .budget-after strong { font-size:13px; font-weight:400; } .budget-after p { display:flex; justify-content:space-between; margin:11px 0 0; color:#555; font-size:13px; } .budget-after b { color:#111; font-weight:500; } .budget-after p:last-child b { color:#e33; font-weight:700; } .balance-alert { margin:28px 0 0; color:#999; font-size:12px; text-align:left; } .balance-alert b { color:#222; } .application-complete .bottom-button { margin-top:19px; }
.reports-page .partner-header { margin-bottom:34px; } .partner-tabs { display:flex; gap:10px; margin:27px 0 25px; } .partner-tabs button { padding:10px 15px; border:1px solid #e9e9e6; border-radius:999px; color:#999; background:#fff; font-size:14px; } .partner-tabs .active { border-color:#222; color:#fff; background:#222; } .report-total { padding:32px 20px 20px; border:1px solid #e9e9e6; border-radius:13px; background:#fff; } .report-total>strong { color:#000; } .report-total>em { color:#f05a5a; background:#ffeded; } .line-chart { height:42px; margin:0 0 10px; border-bottom:1px solid #eee; background:linear-gradient(140deg,transparent 0 21%,#286cff 22% 24%,transparent 25% 36%,#286cff 37% 39%,transparent 40% 51%,#286cff 52% 54%,transparent 55% 64%,#286cff 65% 67%,transparent 68% 77%,#286cff 78% 80%,transparent 81%); } .report-total dl { padding-top:10px; } .report-total dt { color:#555; } .metric-grid { grid-template-columns:1fr 1fr; gap:10px; } .metric-grid li { min-height:110px; padding:19px; } .metric-grid strong { margin-top:7px; color:#111; font-size:18px; } .metric-grid small { color:#f05a5a; } .bar-chart { display:flex; height:143px; align-items:end; gap:10px; margin-top:15px; padding:20px 12px 25px; border:1px solid #e9e9e6; border-radius:13px; background:repeating-linear-gradient(to bottom,transparent 0 23px,#eee 24px 25px); } .bar-chart i { display:block; flex:1; height:var(--h,40%); background:#d5d5d5; } .bar-chart i:nth-child(1) { --h:27%; } .bar-chart i:nth-child(2) { --h:35%; } .bar-chart i:nth-child(3) { --h:52%; } .bar-chart i:nth-child(4) { --h:52%; } .bar-chart i:nth-child(5) { --h:63%; } .bar-chart i:nth-child(6) { --h:79%; } .bar-chart i:nth-child(7) { --h:99%; background:#222; } .report-links { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:26px; } .report-links a { padding:18px; border:1px solid #e9e9e6; border-radius:13px; background:#fff; font-size:14px; text-align:center; }
.campaign-product { display:grid; grid-template-columns:150px 1fr; gap:20px; align-items:center; margin-top:-16px; } .campaign-product img { width:150px; height:118px; border-radius:4px; object-fit:cover; } .campaign-product span { color:#999; font-size:14px; } .campaign-product h1 { margin:8px 0; font-size:21px; } .campaign-product em { display:inline-block; padding:4px 8px; border-radius:4px; color:#286cff; background:#eef4ff; font-size:13px; font-style:normal; } .roas-card--light { color:#222; background:#fff; border:1px solid #e9e9e6; } .roas-card--light hr { border-color:#eee; } .roas-card--light>small { color:#999; } .roas-card--light>em { color:#f05a5a; background:#ffeded; } .metric-grid--campaign { margin-top:16px; } .metric-grid--campaign li { min-height:74px; padding:14px; text-align:center; } .metric-grid--campaign strong { color:#286cff; font-size:17px; } .funnel-card { padding:22px 20px; border:1px solid #e9e9e6; border-radius:13px; background:#fff; } .funnel-card p { display:flex; justify-content:space-between; margin:7px 0; color:#555; font-size:14px; } .funnel-card p b { color:#111; font-weight:500; } .funnel-card i { display:block; width:100%; height:5px; background:linear-gradient(to right,#222 var(--w),#eee var(--w)); } .campaign-page>.bottom-button { margin-top:25px; }
.product-total { margin:17px 0 0; padding:20px; border:1px solid #e9e9e6; border-radius:13px; background:#fff; } .product-total div { min-height:42px; font-size:14px; } .product-total div:last-child dd { font-weight:750; text-decoration:underline; text-underline-offset:4px; } .performance-list { display:grid; gap:25px; margin-top:25px; } .performance-list li { display:grid; grid-template-columns:92px 1fr; gap:20px; padding:20px 17px; border-radius:14px; background:#fff; } .performance-list img { width:92px; height:92px; border-radius:3px; object-fit:cover; } .performance-list li>div { align-self:center; } .performance-list em { display:inline-block; padding:5px 9px; border-radius:4px; color:#999; background:#f1f1ef; font-size:13px; font-style:normal; } .performance-list .live-label { color:#fff; background:#e52d31; } .performance-list span,.performance-list strong { display:block; } .performance-list span { margin-top:7px; color:#999; font-size:13px; } .performance-list strong { margin-top:2px; font-size:17px; } .performance-list dl { display:grid; grid-column:1 / -1; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; padding-top:15px; border-top:1px solid #eee; } .performance-list dt,.performance-list dd { margin:0; font-size:12px; } .performance-list dt { color:#777; } .performance-list dd { margin-top:5px; font-size:17px; } .performance-list .disabled { opacity:.3; }
@media (min-width:480px) { .mobile-canvas { box-shadow:0 0 0 1px var(--line),0 8px 32px #0001; } } @media (min-width:720px) { .app-shell { display:grid; grid-template-columns:minmax(12rem,1fr) minmax(0,393px) minmax(12rem,1fr); align-items:start; } .review-nav { position:sticky; top:20px; grid-column:1; justify-self:end; width:176px; flex-direction:column; overflow:visible; padding:0; border:0; background:transparent; } .mobile-canvas { grid-column:2; min-height:100dvh; margin:0; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }