/* ============================================================ Smart Direct-Buy — "duty-free receipt" visual language. Priorities: sunlight legibility, one-handed reach, a decisive stamped verdict. Mono for numbers, grotesque for labels. ============================================================ */ :root { --paper: #FBFAF7; --ink: #14181F; --ink-soft: #5A6270; --line: #15181f1a; --card: #FFFFFF; --green: #1B873F; --red: #D6422B; --blue: #2563B0; --amber: #B5710A; --stamp-shadow: #14181f14; --radius: 14px; --tap: 56px; /* minimum touch target */ } @media (prefers-color-scheme: dark) { :root { --paper: #101319; --ink: #F2EFE9; --ink-soft: #9AA3B2; --line: #f2efe91f; --card: #181C24; --green: #38B765; --red: #FF6A4D; --blue: #6FA8FF; --amber: #E0A84A; --stamp-shadow: #00000040; } } /* Manual override classes (set on ) beat the media query. */ html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } /* hidden must win over display:flex/grid set on .cat-field, .verdict, etc. */ [hidden] { display: none !important; } body { font-family: "Space Grotesk", system-ui, sans-serif; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); } /* Japanese: switch to Noto Sans JP for readability (Meiryo-like, OFL/free). */ html[lang="ja"] body, html[lang="ja"] .masthead__title { font-family: "Noto Sans JP", "Space Grotesk", system-ui, sans-serif; } .app { max-width: 460px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 16px; } /* ---- Masthead ---- */ .masthead__row { display: flex; justify-content: space-between; align-items: center; } .masthead__ctrls { display: flex; align-items: center; gap: 8px; } .lang-select { font-family: inherit; font-weight: 700; font-size: 13px; background: var(--card); color: var(--ink); border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 8px; cursor: pointer; min-height: 40px; } .masthead__tag { font-size: 12px; letter-spacing: .22em; font-weight: 700; color: var(--blue); border: 1.5px solid var(--blue); padding: 4px 8px; border-radius: 4px; } .theme-btn { width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--card); color: var(--ink); font-size: 20px; cursor: pointer; box-shadow: 0 1px 4px var(--stamp-shadow); } .masthead__title { font-size: clamp(34px, 11vw, 46px); line-height: .98; font-weight: 700; letter-spacing: -.02em; margin-top: 14px; } .rate-line { margin-top: 8px; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--ink-soft); } .rate-line.is-stale { color: var(--amber); } /* ---- Cards ---- */ .card { background: var(--card); border-radius: var(--radius); padding: 18px 16px; box-shadow: 0 1px 3px var(--stamp-shadow); display: flex; flex-direction: column; gap: 12px; } .card__head { display: flex; align-items: center; gap: 10px; } .card__num { font-family: "IBM Plex Mono", monospace; font-weight: 600; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 15px; } .card__head h2 { font-size: 18px; font-weight: 700; } .card__hint { font-size: 13px; color: var(--ink-soft); margin-top: -6px; } /* ---- Scan row: button + number field ---- */ .scan-row { display: flex; gap: 10px; } .btn { font-family: inherit; font-weight: 700; font-size: 16px; border: none; border-radius: 10px; cursor: pointer; min-height: var(--tap); display: flex; align-items: center; justify-content: center; } .btn--scan { flex: 0 0 42%; background: var(--ink); color: var(--paper); gap: 6px; } .btn--scan:active { transform: scale(.98); } .money-field { flex: 1; display: flex; align-items: center; gap: 4px; border: 2px solid var(--line); border-radius: 10px; padding: 0 12px; min-height: var(--tap); background: transparent; } .money-field:focus-within { border-color: var(--blue); } .money-field__cur { font-family: "IBM Plex Mono", monospace; font-size: 22px; font-weight: 600; color: var(--ink-soft); } .money-field input { flex: 1; border: none; background: transparent; color: var(--ink); font-family: "IBM Plex Mono", monospace; font-size: 24px; font-weight: 600; width: 100%; outline: none; min-width: 0; } .ocr-out { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-soft); background: var(--line); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; } /* ---- Segmented controls ---- */ .seg { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .seg--display { margin-top: 4px; } .seg__lead { font-size: 14px; color: var(--ink-soft); margin-right: 2px; } .seg__btn { font-family: inherit; font-weight: 700; font-size: 15px; border: 2px solid var(--line); background: transparent; color: var(--ink-soft); border-radius: 8px; padding: 8px 14px; min-height: 44px; cursor: pointer; } .seg__btn.is-on { background: var(--blue); border-color: var(--blue); color: #fff; } /* ---- Settings ---- */ .card--settings { gap: 14px; } .toggle { display: flex; align-items: center; gap: 12px; font-size: 15px; cursor: pointer; } .toggle--inline { font-size: 14px; } .toggle input { width: 22px; height: 22px; accent-color: var(--blue); flex: 0 0 auto; } .overseas-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .info-btn { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--blue); font-size: 15px; cursor: pointer; line-height: 1; } .info-note { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); background: var(--line); border-radius: 8px; padding: 10px 12px; } .info-note a { color: var(--blue); font-weight: 700; text-decoration: none; display: inline-block; margin-top: 4px; } .cat-field { display: flex; align-items: center; gap: 10px; font-size: 14px; } .cat-field select { flex: 1; border: 2px solid var(--line); border-radius: 8px; padding: 10px; font-family: inherit; font-size: 15px; background: var(--card); color: var(--ink); } .cat-field input { flex: 1; min-width: 0; border: 2px solid var(--line); border-radius: 8px; padding: 10px; font-family: "IBM Plex Mono", monospace; font-size: 16px; background: transparent; color: var(--ink); } .tax-note { font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); margin-top: -2px; } .ship-field { display: flex; align-items: center; gap: 10px; font-size: 15px; } .ship-field input { flex: 1; border: 2px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: "IBM Plex Mono", monospace; font-size: 18px; background: transparent; color: var(--ink); } /* ---- Go button ---- */ .btn--go { background: var(--green); color: #fff; font-size: 19px; min-height: 60px; letter-spacing: .01em; box-shadow: 0 3px 0 #0000001f; } .btn--go:active { transform: translateY(2px); box-shadow: none; } .status { text-align: center; font-size: 14px; min-height: 18px; color: var(--ink-soft); } .status.is-error { color: var(--red); font-weight: 700; } /* ---- Verdict: the signature stamped slab ---- */ .verdict { background: var(--card); border-radius: var(--radius); border: 2.5px dashed var(--line); padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; overflow: hidden; } .verdict::before, .verdict::after { /* perforation notches like a torn ticket */ content: ""; position: absolute; top: 50%; width: 22px; height: 22px; background: var(--paper); border-radius: 50%; transform: translateY(-50%); } .verdict::before { left: -11px; } .verdict::after { right: -11px; } .verdict__stamp { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; border: 3px solid currentColor; border-radius: 8px; padding: 6px 14px; transform: rotate(-4deg); } .verdict.is-local .verdict__stamp, .verdict.is-local .total--local .total__value { color: var(--green); } .verdict.is-online .verdict__stamp, .verdict.is-online .total--online .total__value { color: var(--red); } .verdict.is-tie .verdict__stamp { color: var(--ink-soft); } /* Caution overrides the online-red stamp with amber when import tax is in play. */ .verdict.is-caution .verdict__stamp { color: var(--amber); } .verdict.is-caution .total--online .total__value { color: var(--amber); } /* Stale state: inputs changed after a result was shown. Dim everything except the "re-compare" banner so the old numbers read clearly as out of date. */ .verdict__stale { width: 100%; box-sizing: border-box; text-align: center; font-weight: 700; font-size: 14px; line-height: 1.4; color: var(--amber); background: rgba(255, 176, 32, 0.10); border: 1.5px solid var(--amber); border-radius: 10px; padding: 9px 12px; } .verdict.is-stale .verdict__stamp, .verdict.is-stale .verdict__text, .verdict.is-stale .verdict__totals, .verdict.is-stale .verdict__diff, .verdict.is-stale .verdict__rate, .verdict.is-stale .customs, .verdict.is-stale .verdict__save { opacity: 0.38; filter: grayscale(0.7); } /* Customs advisory block */ .customs { width: 100%; margin-top: 4px; border-top: 1.5px dashed var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; } .customs__note { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); } .customs.is-over .customs__note { color: var(--amber); font-weight: 500; } .customs__link { font-size: 13px; font-weight: 700; color: var(--blue); text-decoration: none; } .customs__link:hover { text-decoration: underline; } .verdict__text { font-size: 19px; font-weight: 700; text-align: center; line-height: 1.25; } .verdict__totals { display: flex; align-items: stretch; gap: 10px; width: 100%; margin-top: 4px; } .total { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 4px; } .total__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .total__value { font-family: "IBM Plex Mono", monospace; font-size: clamp(22px, 7vw, 30px); font-weight: 600; } .total__vs { align-self: center; font-size: 13px; color: var(--ink-soft); } .verdict__diff { font-family: "IBM Plex Mono", monospace; font-size: 14px; color: var(--ink-soft); } .verdict__rate { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-soft); opacity: .85; } /* Editable exchange rate */ .rates { display: flex; flex-direction: column; gap: 8px; border-top: 1.5px dashed var(--line); padding-top: 14px; } .rates__head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-soft); } .rates__reset { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--blue); background: transparent; border: none; cursor: pointer; padding: 4px; } .rates__row { display: flex; gap: 10px; flex-wrap: wrap; } .rate-input { flex: 1 1 130px; min-width: 120px; display: flex; align-items: center; gap: 6px; border: 2px solid var(--line); border-radius: 8px; padding: 0 10px; min-height: 48px; } .rate-input:focus-within { border-color: var(--blue); } .rate-input span { font-family: "IBM Plex Mono", monospace; font-size: 18px; color: var(--ink-soft); } .rate-input input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--ink); font-family: "IBM Plex Mono", monospace; font-size: 18px; font-weight: 600; outline: none; } .rates__hint { font-size: 12px; color: var(--ink-soft); } .rate-input--pair { flex: 1 1 100%; } .rate-eq, .rate-unit { font-family: "IBM Plex Mono", monospace; font-size: 14px; color: var(--ink-soft); white-space: nowrap; } .rate-eq { min-width: 64px; } /* ---- Accessibility / motion ---- */ :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } .build-tag { text-align: center; font-size: 11px; opacity: .55; margin-top: -8px; } /* ---------------- Scan (tap-to-pick) modal ---------------- */ .scan-modal { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); } .scan-modal__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: #fff; font-weight: 700; font-size: 16px; } .scan-modal__close { width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: #fff; font-size: 18px; cursor: pointer; } .scan-modal__stage { position: relative; flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; } .scan-figure { position: relative; display: inline-block; line-height: 0; } .scan-modal__stage img { display: block; width: 100%; height: auto; } .scan-boxes { position: absolute; inset: 0; pointer-events: none; } .scan-box { position: absolute; pointer-events: auto; cursor: pointer; transform: translate(-50%, -50%); /* anchor on the text center */ border: 2px solid var(--blue); background: rgba(74, 124, 255, 0.18); border-radius: 6px; min-width: 30px; min-height: 30px; box-shadow: 0 0 0 2px rgba(0,0,0,0.25); } .scan-box::after { content: attr(data-label); position: absolute; left: 50%; top: -10px; transform: translate(-50%, -100%); background: var(--blue); color: #fff; font-weight: 700; font-size: 13px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } .scan-box.is-best { border-color: #34c759; background: rgba(52, 199, 89, 0.22); } .scan-box.is-best::after { background: #34c759; } .scan-modal__hint { color: #cbd2e0; font-size: 13px; text-align: center; padding: 10px 16px 0; } .scan-modal__manual { margin: 12px 16px calc(12px + env(safe-area-inset-bottom)); padding: 14px; border-radius: 12px; border: none; background: #fff; color: #111; font-weight: 700; font-size: 15px; cursor: pointer; } /* ---------------- Auth: login gate, account bar, admin ---------------- */ .login-gate { position: fixed; inset: 0; z-index: 200; background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; } .login-card__title { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--ink); } .login-card__sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 18px; line-height: 1.5; } .login-input { width: 100%; box-sizing: border-box; margin-bottom: 12px; padding: 14px; font-size: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); } .login-btn { width: 100%; padding: 15px; border: none; border-radius: 12px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; } .login-err { color: #e5484d; font-size: 13px; margin: 12px 0 0; text-align: center; } .acct-bar { display: flex; align-items: center; gap: 8px; padding: 10px 4px 0; font-size: 13px; color: var(--ink-soft); } .acct-bar__usage { font-weight: 600; font-size: 13px; background: rgba(74, 124, 255, 0.12); color: var(--blue); border: 1px solid rgba(74, 124, 255, 0.35); border-radius: 999px; padding: 6px 12px; } .acct-bar__usage strong { font-weight: 800; } .acct-bar__usage.is-admin { background: rgba(52, 199, 89, 0.14); color: #2ea043; border-color: rgba(52, 199, 89, 0.4); } .acct-bar__usage.is-low { background: rgba(255, 149, 0, 0.14); color: #d2820a; border-color: rgba(255, 149, 0, 0.45); } .acct-bar__usage.is-out { background: rgba(229, 72, 77, 0.14); color: #e5484d; border-color: rgba(229, 72, 77, 0.45); } .acct-bar__spacer { flex: 1; } .acct-bar__btn { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; } .admin-modal { position: fixed; inset: 0; z-index: 210; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; } .admin-card { width: 100%; max-width: 440px; max-height: 85vh; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; } .admin-card__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: var(--ink); } .admin-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--line); color: var(--ink); cursor: pointer; font-size: 15px; } .admin-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; } .admin-field input { padding: 12px; font-size: 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); } .admin-save { padding: 12px 18px; border: none; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700; cursor: pointer; } .admin-saved { color: #34c759; font-size: 13px; margin: 8px 0 0; } .admin-users-title { font-size: 14px; color: var(--ink); margin: 20px 0 8px; } .admin-users { font-size: 13px; color: var(--ink-soft); } .admin-users .row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .admin-users .row .email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-users .row .badge { color: var(--blue); font-weight: 700; } /* ---- Admin: monitoring + expanded config ---- */ .admin-sec { font-size: 14px; color: var(--ink); margin: 20px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); } .admin-sec:first-of-type { border-top: none; padding-top: 0; } .admin-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13px; } .admin-metrics .mrow { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; } .admin-metrics .mrow span { color: var(--ink-soft); } .admin-metrics .mrow strong { color: var(--ink); font-weight: 700; } .admin-refresh { margin-top: 10px; padding: 8px 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 8px; font-size: 13px; cursor: pointer; } .admin-auto { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font-size: 12px; color: var(--ink-soft); cursor: pointer; } .admin-field em { font-style: normal; color: var(--ink-soft); font-size: 11px; opacity: 0.8; margin-left: 4px; } /* ---- Consent, save-to-history, history viewer ---- */ .login-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ink-soft); margin: 4px 0 14px; line-height: 1.4; cursor: pointer; } .login-consent input { margin-top: 2px; flex-shrink: 0; } .verdict__save { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .save-product { flex: 1; min-width: 140px; padding: 10px 12px; font-size: 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); } .save-history { padding: 10px 16px; border: none; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; } .save-done { color: #34c759; font-size: 13px; font-weight: 700; } .history-hint { font-size: 12px; color: var(--ink-soft); margin: 0 0 12px; } .history-list { font-size: 13px; color: var(--ink); } .hrow { padding: 12px 0; border-top: 1px solid var(--line); } .hrow__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; } .hrow__top strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hrow__del { flex-shrink: 0; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; } .hrow__line { color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; } .hrow__sub { color: var(--ink-soft); font-size: 11px; opacity: 0.8; margin-top: 2px; } /* login language selector */ .login-lang-row { display: flex; justify-content: flex-end; margin-bottom: 8px; } .login-lang { padding: 6px 10px; font-size: 13px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; } /* ---- Crop step ---- */ .crop-modal { position: fixed; inset: 0; z-index: 60; background: #0b0b0c; display: flex; flex-direction: column; } .crop-stage { position: relative; flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 8px; } .crop-figure { position: relative; display: inline-block; line-height: 0; } .crop-figure img { display: block; width: 100%; height: auto; } .crop-box { position: absolute; box-sizing: border-box; border: 2px solid #fff; border-radius: 4px; cursor: move; box-shadow: 0 0 0 9999px rgba(0,0,0,0.55); touch-action: none; } .crop-h { position: absolute; width: 26px; height: 26px; background: var(--blue); border: 2px solid #fff; border-radius: 50%; touch-action: none; } .crop-h--tl { left: -13px; top: -13px; cursor: nwse-resize; } .crop-h--tr { right: -13px; top: -13px; cursor: nesw-resize; } .crop-h--bl { left: -13px; bottom: -13px; cursor: nesw-resize; } .crop-h--br { right: -13px; bottom: -13px; cursor: nwse-resize; } .crop-hint { color: #cfcfd2; font-size: 13px; text-align: center; padding: 10px 16px 0; margin: 0; } .crop-actions { display: flex; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); } .crop-btn { flex: 1; padding: 14px; border: none; border-radius: 12px; background: var(--blue); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; } .crop-btn--ghost { background: rgba(255,255,255,0.14); color: #fff; } /* ---- Google sign-in button + divider ---- */ .google-btn-wrap { display: flex; justify-content: center; margin: 4px 0 10px; min-height: 40px; } .login-or { display: flex; align-items: center; text-align: center; color: var(--ink-soft); font-size: 12px; margin: 6px 0 12px; } .login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .login-or span { padding: 0 10px; } /* ---- History search / filter / sort ---- */ .history-controls { margin-bottom: 10px; } .hist-search { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); } .hist-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .hist-filter { flex: 1; min-width: 90px; padding: 8px 10px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); cursor: pointer; } .hist-count { font-size: 11.5px; color: var(--ink-soft); margin: 8px 0 0; } /* ---- In-app browser warning (Google OAuth blocked there) ---- */ .inapp-notice { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 10px; padding: 11px 13px; font-size: 12.5px; line-height: 1.5; margin: 0 0 14px; } /* ---- Admin: product ranking ---- */ .admin-ranking { margin-top: 4px; } .rank-region { margin-bottom: 14px; } .rank-region__title { font-weight: 700; font-size: 13px; margin: 6px 0; color: var(--ink); } .rank-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; } .rank-no { font-weight: 700; color: var(--brand); } .rank-name { font-weight: 600; color: var(--ink); word-break: break-word; } .rank-cnt { text-align: right; white-space: nowrap; color: var(--ink); } .rank-save, .rank-win { grid-column: 2 / 4; font-size: 11px; color: var(--ink-soft); } .rank-win { color: var(--ink-soft); }